LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat: [console-lite] - add 'proto' portfolio view (#962)

Browse Source 
* feat: [console-lite] - add proto portfolio view

* feat: [console-lite] - add proto portfolio view - mount diff in types

* feat: [console-lite] - add proto portfolio view - add unit test

* feat: [console-lite] - add proto portfolio view - add int test

Co-authored-by: maciek <maciek@vegaprotocol.io>
This commit is contained in:
macqbat 2022-08-09 12:10:55 +02:00 committed by GitHub
parent 4cd980f6bf
commit 8a03ca5cfe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 170 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
apps/simple-trading-app-e2e/src/integration/market-trade.test.ts
View File

@ -7,18 +7,7 @@ import { generateEstimateOrder } from '../support/mocks/generate-estimate-order'
import { generatePartyBalance } from '../support/mocks/generate-party-balance';
import { generatePartyMarketData } from '../support/mocks/generate-party-market-data';
import { generateMarketMarkPrice } from '../support/mocks/generate-market-mark-price';
const connectVegaWallet = () => {
const form = 'rest-connector-form';
const walletName = Cypress.env('TRADING_TEST_VEGA_WALLET_NAME');
const walletPassphrase = Cypress.env('TRADING_TEST_VEGA_WALLET_PASSPHRASE');
cy.getByTestId('connect-vega-wallet').click();
cy.getByTestId('connectors-list').find('button').click();
cy.getByTestId(form).find('#wallet').click().type(walletName);
cy.getByTestId(form).find('#passphrase').click().type(walletPassphrase);
cy.getByTestId('rest-connector-form').find('button[type=submit]').click();
};
import { connectVegaWallet } from '../support/connect-wallet';
describe('Market trade', () => {
let markets;

34
apps/simple-trading-app-e2e/src/integration/portfolio-page.test.ts Normal file
View File

@ -0,0 +1,34 @@
import {
connectVegaWallet,
disconnectVegaWallet,
} from '../support/connect-wallet';
describe('Portfolio page', () => {
afterEach(() => {
disconnectVegaWallet();
});
it('button for wallet connect should work', () => {
cy.visit('/');
cy.get('[href="/portfolio"]').eq(0).click();
cy.getByTestId('connect-vega-wallet-text').should('be.visible');
connectVegaWallet();
cy.getByTestId('connect-vega-wallet-text').should('not.exist');
});
it('certain tabs should exist', () => {
cy.visit('/portfolio');
connectVegaWallet();
cy.getByTestId('Assets').should('exist');
cy.getByTestId('tab-assets').should('exist');
cy.getByTestId('Positions').click();
cy.getByTestId('tab-positions').should('exist');
cy.getByTestId('Orders').click();
cy.getByTestId('tab-orders').should('exist');
cy.getByTestId('Fills').click();
cy.getByTestId('tab-fills').should('exist');
});
});

16
apps/simple-trading-app-e2e/src/support/connect-wallet.ts Normal file
View File

@ -0,0 +1,16 @@
export const connectVegaWallet = () => {
const form = 'rest-connector-form';
const walletName = Cypress.env('TRADING_TEST_VEGA_WALLET_NAME');
const walletPassphrase = Cypress.env('TRADING_TEST_VEGA_WALLET_PASSPHRASE');
cy.getByTestId('connect-vega-wallet').click();
cy.getByTestId('connectors-list').find('button').click();
cy.getByTestId(form).find('#wallet').click().type(walletName);
cy.getByTestId(form).find('#passphrase').click().type(walletPassphrase);
cy.getByTestId('rest-connector-form').find('button[type=submit]').click();
};
export const disconnectVegaWallet = () => {
cy.getByTestId('connect-vega-wallet').click();
cy.getByTestId('disconnect').click();
};

50
apps/simple-trading-app/src/app/app.tsx
View File

@ -1,8 +1,9 @@
import { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { createClient } from './lib/apollo-client';
import { ThemeContext } from '@vegaprotocol/react-helpers';
import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
import { EnvironmentProvider, NetworkLoader } from '@vegaprotocol/environment';
import { createClient } from './lib/apollo-client';
import {
VegaConnectDialog,
VegaManageDialog,
@ -13,14 +14,12 @@ import '../styles.scss';
import { AppLoader } from './components/app-loader';
import Header from './components/header';
import { Main } from './components/main';
import { useLocation } from 'react-router-dom';
import LocalContext from './context/local-context';
import useLocalValues from './hooks/use-local-values';
function App() {
const localValues = useLocalValues();
const [theme, toggleTheme] = useThemeSwitcher();
const [vegaWallet, setVegaWallet] = useState({
connect: false,
manage: false,
});
const [menuOpen, setMenuOpen] = useState(false);
const onToggle = () => setMenuOpen(!menuOpen);
@ -36,28 +35,23 @@ function App() {
<ThemeContext.Provider value={theme}>
<NetworkLoader createClient={createClient}>
<VegaWalletProvider>
<AppLoader>
<div className="max-h-full min-h-full dark:bg-lite-black dark:text-white-60 bg-white text-black-60 grid grid-rows-[min-content,1fr]">
<Header
setVegaWallet={setVegaWallet}
toggleTheme={toggleTheme}
/>
<Main isMenuOpen={menuOpen} onToggle={onToggle} />
<VegaConnectDialog
connectors={Connectors}
dialogOpen={vegaWallet.connect}
setDialogOpen={(open) =>
setVegaWallet((x) => ({ ...x, connect: open }))
}
/>
<VegaManageDialog
dialogOpen={vegaWallet.manage}
setDialogOpen={(open) =>
setVegaWallet((x) => ({ ...x, manage: open }))
}
/>
</div>
</AppLoader>
<LocalContext.Provider value={localValues}>
<AppLoader>
<div className="max-h-full min-h-full dark:bg-lite-black dark:text-white-60 bg-white text-black-60 grid grid-rows-[min-content,1fr]">
<Header toggleTheme={toggleTheme} />
<Main isMenuOpen={menuOpen} onToggle={onToggle} />
<VegaConnectDialog
connectors={Connectors}
dialogOpen={localValues.vegaWalletDialog.connect}
setDialogOpen={localValues.vegaWalletDialog.setConnect}
/>
<VegaManageDialog
dialogOpen={localValues.vegaWalletDialog.manage}
setDialogOpen={localValues.vegaWalletDialog.setManage}
/>
</div>
</AppLoader>
</LocalContext.Provider>
</VegaWalletProvider>
</NetworkLoader>
</ThemeContext.Provider>

22
apps/simple-trading-app/src/app/components/header/header.tsx
View File

@ -1,18 +1,16 @@
import React from 'react';
import React, { useContext } from 'react';
import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
import Logo from './logo';
import { VegaWalletConnectButton } from '../vega-wallet-connect-button';
type WalletParams = {
connect: boolean;
manage: boolean;
};
import LocalContext from '../../context/local-context';
interface Props {
setVegaWallet: (func: (wParams: WalletParams) => WalletParams) => void;
toggleTheme: () => void;
}
const Header = ({ setVegaWallet, toggleTheme }: Props) => {
const Header = ({ toggleTheme }: Props) => {
const {
vegaWalletDialog: { setConnect, setManage },
} = useContext(LocalContext);
return (
<div
className="flex items-stretch pr-16 py-16 bg-black text-white-60"
@ -21,12 +19,8 @@ const Header = ({ setVegaWallet, toggleTheme }: Props) => {
<Logo />
<div className="flex items-center gap-4 ml-auto mr-8 relative z-10">
<VegaWalletConnectButton
setConnectDialog={(open) =>
setVegaWallet((x) => ({ ...x, connect: open }))
}
setManageDialog={(open) =>
setVegaWallet((x) => ({ ...x, manage: open }))
}
setConnectDialog={setConnect}
setManageDialog={setManage}
/>
<ThemeSwitcher
onToggle={toggleTheme}

46
apps/simple-trading-app/src/app/components/portfolio/portfolio.tsx
View File

@ -1,13 +1,49 @@
import { useContext } from 'react';
import { AccountsContainer } from '@vegaprotocol/accounts';
import { t } from '@vegaprotocol/react-helpers';
import { useVegaWallet } from '@vegaprotocol/wallet';
import { Button, Splash, Tabs, Tab } from '@vegaprotocol/ui-toolkit';
import LocalContext from '../../context/local-context';
import { OrderListContainer } from '@vegaprotocol/orders';
import { PositionsContainer } from '@vegaprotocol/positions';
import { FillsContainer } from '@vegaprotocol/fills';
export const Portfolio = () => {
const { keypair } = useVegaWallet();
const {
vegaWalletDialog: { setConnect },
} = useContext(LocalContext);
if (!keypair) {
return (
<Splash>
<div className="text-center">
<p className="mb-12" data-testid="connect-vega-wallet-text">
{t('Connect your Vega wallet')}
</p>
<Button
onClick={() => setConnect(true)}
data-testid="vega-wallet-connect"
>
{t('Connect')}
</Button>
</div>
</Splash>
);
}
return (
<section>
<h2 className="text-lg mb-16">{t('Assets')}</h2>
<div className="h-screen">
<Tabs>
<Tab id="assets" name={t('Assets')}>
<AccountsContainer />
</div>
</section>
</Tab>
<Tab id="positions" name={t('Positions')}>
<PositionsContainer />
</Tab>
<Tab id="orders" name={t('Orders')}>
<OrderListContainer />
</Tab>
<Tab id="fills" name={t('Fills')}>
<FillsContainer />
</Tab>
</Tabs>
);
};

16
apps/simple-trading-app/src/app/context/local-context.ts Normal file
View File

@ -0,0 +1,16 @@
import { createContext } from 'react';
export interface VegaWalletDialogState {
connect: boolean;
manage: boolean;
setConnect: (isOpen: boolean) => void;
setManage: (isOpen: boolean) => void;
}
export interface LocalValues {
vegaWalletDialog: VegaWalletDialogState;
}
const LocalContext = createContext<LocalValues>({} as LocalValues);
export default LocalContext;

17
apps/simple-trading-app/src/app/hooks/use-local-values.spec.ts Normal file
View File

@ -0,0 +1,17 @@
import { renderHook, act } from '@testing-library/react-hooks';
import useLocalValues from './use-local-values';
describe('local values hook', () => {
it('state of wallet dialog should be properly handled', () => {
const { result } = renderHook(() => useLocalValues());
expect(result.current.vegaWalletDialog).toBeDefined();
expect(result.current.vegaWalletDialog.manage).toBe(false);
expect(result.current.vegaWalletDialog.connect).toBe(false);
act(() => {
result.current.vegaWalletDialog.setConnect(true);
result.current.vegaWalletDialog.setManage(true);
});
expect(result.current.vegaWalletDialog.manage).toBe(true);
expect(result.current.vegaWalletDialog.connect).toBe(true);
});
});

15
apps/simple-trading-app/src/app/hooks/use-local-values.ts Normal file
View File

@ -0,0 +1,15 @@
import { useMemo, useState } from 'react';
import type { LocalValues } from '../context/local-context';
const useLocalValues = () => {
const [connect, setConnect] = useState<boolean>(false);
const [manage, setManage] = useState<boolean>(false);
return useMemo<LocalValues>(
() => ({
vegaWalletDialog: { connect, manage, setConnect, setManage },
}),
[connect, manage, setConnect, setManage]
);
};
export default useLocalValues;