From 8a03ca5cfe79449848d1dc257f8cad478e6930b1 Mon Sep 17 00:00:00 2001 From: macqbat Date: Tue, 9 Aug 2022 12:10:55 +0200 Subject: [PATCH] feat: [console-lite] - add 'proto' portfolio view (#962) * 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 --- .../src/integration/market-trade.test.ts | 13 +---- .../src/integration/portfolio-page.test.ts | 34 +++++++++++++ .../src/support/connect-wallet.ts | 16 ++++++ apps/simple-trading-app/src/app/app.tsx | 50 ++++++++----------- .../src/app/components/header/header.tsx | 22 +++----- .../app/components/portfolio/portfolio.tsx | 46 +++++++++++++++-- .../src/app/context/local-context.ts | 16 ++++++ .../src/app/hooks/use-local-values.spec.ts | 17 +++++++ .../src/app/hooks/use-local-values.ts | 15 ++++++ 9 files changed, 170 insertions(+), 59 deletions(-) create mode 100644 apps/simple-trading-app-e2e/src/integration/portfolio-page.test.ts create mode 100644 apps/simple-trading-app-e2e/src/support/connect-wallet.ts create mode 100644 apps/simple-trading-app/src/app/context/local-context.ts create mode 100644 apps/simple-trading-app/src/app/hooks/use-local-values.spec.ts create mode 100644 apps/simple-trading-app/src/app/hooks/use-local-values.ts diff --git a/apps/simple-trading-app-e2e/src/integration/market-trade.test.ts b/apps/simple-trading-app-e2e/src/integration/market-trade.test.ts index 74d29fab0..859922bc7 100644 --- a/apps/simple-trading-app-e2e/src/integration/market-trade.test.ts +++ b/apps/simple-trading-app-e2e/src/integration/market-trade.test.ts @@ -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; diff --git a/apps/simple-trading-app-e2e/src/integration/portfolio-page.test.ts b/apps/simple-trading-app-e2e/src/integration/portfolio-page.test.ts new file mode 100644 index 000000000..ba80d220b --- /dev/null +++ b/apps/simple-trading-app-e2e/src/integration/portfolio-page.test.ts @@ -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'); + }); +}); diff --git a/apps/simple-trading-app-e2e/src/support/connect-wallet.ts b/apps/simple-trading-app-e2e/src/support/connect-wallet.ts new file mode 100644 index 000000000..473548610 --- /dev/null +++ b/apps/simple-trading-app-e2e/src/support/connect-wallet.ts @@ -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(); +}; diff --git a/apps/simple-trading-app/src/app/app.tsx b/apps/simple-trading-app/src/app/app.tsx index daf1e5358..74b0487ac 100644 --- a/apps/simple-trading-app/src/app/app.tsx +++ b/apps/simple-trading-app/src/app/app.tsx @@ -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() { - -
-
-
- - setVegaWallet((x) => ({ ...x, connect: open })) - } - /> - - setVegaWallet((x) => ({ ...x, manage: open })) - } - /> -
- + + +
+
+
+ + +
+ + diff --git a/apps/simple-trading-app/src/app/components/header/header.tsx b/apps/simple-trading-app/src/app/components/header/header.tsx index f97499029..8d39b1961 100644 --- a/apps/simple-trading-app/src/app/components/header/header.tsx +++ b/apps/simple-trading-app/src/app/components/header/header.tsx @@ -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 (
{
- setVegaWallet((x) => ({ ...x, connect: open })) - } - setManageDialog={(open) => - setVegaWallet((x) => ({ ...x, manage: open })) - } + setConnectDialog={setConnect} + setManageDialog={setManage} /> { + const { keypair } = useVegaWallet(); + const { + vegaWalletDialog: { setConnect }, + } = useContext(LocalContext); + if (!keypair) { + return ( + +
+

+ {t('Connect your Vega wallet')} +

+ +
+ + ); + } return ( -
-

{t('Assets')}

-
+ + -
-
+ + + + + + + + + + + ); }; diff --git a/apps/simple-trading-app/src/app/context/local-context.ts b/apps/simple-trading-app/src/app/context/local-context.ts new file mode 100644 index 000000000..53edc95ea --- /dev/null +++ b/apps/simple-trading-app/src/app/context/local-context.ts @@ -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({} as LocalValues); + +export default LocalContext; diff --git a/apps/simple-trading-app/src/app/hooks/use-local-values.spec.ts b/apps/simple-trading-app/src/app/hooks/use-local-values.spec.ts new file mode 100644 index 000000000..53b58f993 --- /dev/null +++ b/apps/simple-trading-app/src/app/hooks/use-local-values.spec.ts @@ -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); + }); +}); diff --git a/apps/simple-trading-app/src/app/hooks/use-local-values.ts b/apps/simple-trading-app/src/app/hooks/use-local-values.ts new file mode 100644 index 000000000..502ed7877 --- /dev/null +++ b/apps/simple-trading-app/src/app/hooks/use-local-values.ts @@ -0,0 +1,15 @@ +import { useMemo, useState } from 'react'; +import type { LocalValues } from '../context/local-context'; + +const useLocalValues = () => { + const [connect, setConnect] = useState(false); + const [manage, setManage] = useState(false); + return useMemo( + () => ({ + vegaWalletDialog: { connect, manage, setConnect, setManage }, + }), + [connect, manage, setConnect, setManage] + ); +}; + +export default useLocalValues;