From 1cdea0b2e89847b1c1ed3e6606672ba75ad35b42 Mon Sep 17 00:00:00 2001 From: Elmar <102954831+elmar-vega@users.noreply.github.com> Date: Wed, 31 Aug 2022 16:33:08 +0100 Subject: [PATCH] Feat/915 deposit funds (#1129) * feat(web3): make web3 container component reusable * feat(console-lite): add deposits tab to portfolio page * fix(console-lite): linting errors * fix(console-lite): pr comments * fix(console-lite): use enums for network vars --- .../src/integration/portfolio-page.test.ts | 3 + .../deposits/__generated__/Deposits.ts | 66 +++++++++++++++++++ .../src/app/components/deposits/deposits.tsx | 61 +++++++++++++++++ .../src/app/components/deposits/index.ts | 1 + .../app/components/portfolio/portfolio.tsx | 4 ++ .../components/web3-container/index.ts | 1 - .../pages/portfolio/deposit/index.page.tsx | 2 +- apps/trading/pages/portfolio/index.page.tsx | 2 +- .../pages/portfolio/withdraw/index.page.tsx | 2 +- .../portfolio/withdrawals/index.page.tsx | 2 +- libs/deposits/src/lib/deposit-form.spec.tsx | 2 +- libs/web3/src/index.ts | 1 + .../web3/src}/lib/web3-connectors.ts | 9 +-- .../web3/src/lib}/web3-container.spec.tsx | 4 +- .../web3/src/lib}/web3-container.tsx | 16 ++--- 15 files changed, 156 insertions(+), 20 deletions(-) create mode 100644 apps/console-lite/src/app/components/deposits/__generated__/Deposits.ts create mode 100644 apps/console-lite/src/app/components/deposits/deposits.tsx create mode 100644 apps/console-lite/src/app/components/deposits/index.ts delete mode 100644 apps/trading/components/web3-container/index.ts rename {apps/trading => libs/web3/src}/lib/web3-connectors.ts (87%) rename {apps/trading/components/web3-container => libs/web3/src/lib}/web3-container.spec.tsx (96%) rename {apps/trading/components/web3-container => libs/web3/src/lib}/web3-container.tsx (91%) diff --git a/apps/console-lite-e2e/src/integration/portfolio-page.test.ts b/apps/console-lite-e2e/src/integration/portfolio-page.test.ts index a5465c96e..3e6ff0f31 100644 --- a/apps/console-lite-e2e/src/integration/portfolio-page.test.ts +++ b/apps/console-lite-e2e/src/integration/portfolio-page.test.ts @@ -30,5 +30,8 @@ describe('Portfolio page', () => { cy.getByTestId('Fills').click(); cy.getByTestId('tab-fills').should('exist'); + + cy.getByTestId('Deposits').click(); + cy.getByTestId('tab-deposits').should('exist'); }); }); diff --git a/apps/console-lite/src/app/components/deposits/__generated__/Deposits.ts b/apps/console-lite/src/app/components/deposits/__generated__/Deposits.ts new file mode 100644 index 000000000..f0b897c64 --- /dev/null +++ b/apps/console-lite/src/app/components/deposits/__generated__/Deposits.ts @@ -0,0 +1,66 @@ +/* tslint:disable */ +/* eslint-disable */ +// @generated +// This file was automatically generated and should not be edited. + +// ==================================================== +// GraphQL query operation: Deposits +// ==================================================== + +export interface Deposits_assetsConnection_edges_node_source_BuiltinAsset { + __typename: "BuiltinAsset"; +} + +export interface Deposits_assetsConnection_edges_node_source_ERC20 { + __typename: "ERC20"; + /** + * The address of the ERC20 contract + */ + contractAddress: string; +} + +export type Deposits_assetsConnection_edges_node_source = Deposits_assetsConnection_edges_node_source_BuiltinAsset | Deposits_assetsConnection_edges_node_source_ERC20; + +export interface Deposits_assetsConnection_edges_node { + __typename: "Asset"; + /** + * The ID of the asset + */ + id: string; + /** + * The full name of the asset (e.g: Great British Pound) + */ + name: string; + /** + * The symbol of the asset (e.g: GBP) + */ + symbol: string; + /** + * The precision of the asset. Should match the decimal precision of the asset on its native chain, e.g: for ERC20 assets, it is often 18 + */ + decimals: number; + /** + * The origin source of the asset (e.g: an ERC20 asset) + */ + source: Deposits_assetsConnection_edges_node_source; +} + +export interface Deposits_assetsConnection_edges { + __typename: "AssetEdge"; + node: Deposits_assetsConnection_edges_node; +} + +export interface Deposits_assetsConnection { + __typename: "AssetsConnection"; + /** + * The assets + */ + edges: (Deposits_assetsConnection_edges | null)[] | null; +} + +export interface Deposits { + /** + * The list of all assets in use in the Vega network or the specified asset if ID is provided + */ + assetsConnection: Deposits_assetsConnection; +} diff --git a/apps/console-lite/src/app/components/deposits/deposits.tsx b/apps/console-lite/src/app/components/deposits/deposits.tsx new file mode 100644 index 000000000..c71f49d0f --- /dev/null +++ b/apps/console-lite/src/app/components/deposits/deposits.tsx @@ -0,0 +1,61 @@ +import { gql, useQuery } from '@apollo/client'; +import { DepositManager } from '@vegaprotocol/deposits'; +import { t } from '@vegaprotocol/react-helpers'; +import { Networks, useEnvironment } from '@vegaprotocol/environment'; +import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit'; +import { useVegaWallet } from '@vegaprotocol/wallet'; +import { Web3Container } from '@vegaprotocol/web3'; +import { assetsConnectionToAssets } from '@vegaprotocol/react-helpers'; +import type { Deposits } from './__generated__/Deposits'; + +const DEPOSITS_QUERY = gql` + query Deposits { + assetsConnection { + edges { + node { + id + name + symbol + decimals + source { + ... on ERC20 { + contractAddress + } + } + } + } + } + } +`; + +/** + * Fetches data required for the Deposit page + */ +export const DepositContainer = () => { + const { VEGA_ENV } = useEnvironment(); + const { keypair } = useVegaWallet(); + + const { data, loading, error } = useQuery(DEPOSITS_QUERY, { + variables: { partyId: keypair?.pub }, + skip: !keypair?.pub, + }); + + const assets = assetsConnectionToAssets(data?.assetsConnection); + + return ( + data={data} loading={loading} error={error}> + {assets.length ? ( + + + + ) : ( + +

{t('No assets on this network')}

+ + )} + + ); +}; diff --git a/apps/console-lite/src/app/components/deposits/index.ts b/apps/console-lite/src/app/components/deposits/index.ts new file mode 100644 index 000000000..81c398a22 --- /dev/null +++ b/apps/console-lite/src/app/components/deposits/index.ts @@ -0,0 +1 @@ +export * from './deposits'; diff --git a/apps/console-lite/src/app/components/portfolio/portfolio.tsx b/apps/console-lite/src/app/components/portfolio/portfolio.tsx index 8e5431c52..b8348bfac 100644 --- a/apps/console-lite/src/app/components/portfolio/portfolio.tsx +++ b/apps/console-lite/src/app/components/portfolio/portfolio.tsx @@ -7,6 +7,7 @@ import { OrderListContainer } from '@vegaprotocol/orders'; import { PositionsContainer } from '@vegaprotocol/positions'; import { FillsContainer } from '@vegaprotocol/fills'; import ConnectWallet from '../wallet-connector'; +import { DepositContainer } from '../deposits'; export const Portfolio = () => { const { keypair } = useVegaWallet(); @@ -31,6 +32,9 @@ export const Portfolio = () => { + + + ); }; diff --git a/apps/trading/components/web3-container/index.ts b/apps/trading/components/web3-container/index.ts deleted file mode 100644 index 6e35feeb3..000000000 --- a/apps/trading/components/web3-container/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Web3Container } from './web3-container'; diff --git a/apps/trading/pages/portfolio/deposit/index.page.tsx b/apps/trading/pages/portfolio/deposit/index.page.tsx index df92f98f6..3f3334f94 100644 --- a/apps/trading/pages/portfolio/deposit/index.page.tsx +++ b/apps/trading/pages/portfolio/deposit/index.page.tsx @@ -1,5 +1,5 @@ import { t } from '@vegaprotocol/react-helpers'; -import { Web3Container } from '../../../components/web3-container'; +import { Web3Container } from '@vegaprotocol/web3'; import { DepositContainer } from './deposit-container'; const Deposit = () => { diff --git a/apps/trading/pages/portfolio/index.page.tsx b/apps/trading/pages/portfolio/index.page.tsx index f4efac6cd..8f06f58b2 100644 --- a/apps/trading/pages/portfolio/index.page.tsx +++ b/apps/trading/pages/portfolio/index.page.tsx @@ -1,4 +1,4 @@ -import { Web3Container } from '../../components/web3-container'; +import { Web3Container } from '@vegaprotocol/web3'; import { t } from '@vegaprotocol/react-helpers'; import { PositionsContainer } from '@vegaprotocol/positions'; import { OrderListContainer } from '@vegaprotocol/orders'; diff --git a/apps/trading/pages/portfolio/withdraw/index.page.tsx b/apps/trading/pages/portfolio/withdraw/index.page.tsx index 37ec49b1b..3d085b5a7 100644 --- a/apps/trading/pages/portfolio/withdraw/index.page.tsx +++ b/apps/trading/pages/portfolio/withdraw/index.page.tsx @@ -2,7 +2,7 @@ import { useRouter } from 'next/router'; import { useMemo } from 'react'; import { WithdrawPageContainer } from './withdraw-page-container'; import { VegaWalletContainer } from '../../../components/vega-wallet-container'; -import { Web3Container } from '../../../components/web3-container'; +import { Web3Container } from '@vegaprotocol/web3'; import { t } from '@vegaprotocol/react-helpers'; const Withdraw = () => { diff --git a/apps/trading/pages/portfolio/withdrawals/index.page.tsx b/apps/trading/pages/portfolio/withdrawals/index.page.tsx index e229e9e08..f6742483b 100644 --- a/apps/trading/pages/portfolio/withdrawals/index.page.tsx +++ b/apps/trading/pages/portfolio/withdrawals/index.page.tsx @@ -1,5 +1,5 @@ import { VegaWalletContainer } from '../../../components/vega-wallet-container'; -import { Web3Container } from '../../../components/web3-container'; +import { Web3Container } from '@vegaprotocol/web3'; import { WithdrawalsContainer } from '../withdrawals-container'; const Withdrawals = () => { diff --git a/libs/deposits/src/lib/deposit-form.spec.tsx b/libs/deposits/src/lib/deposit-form.spec.tsx index dbd40f2eb..2fe29b70a 100644 --- a/libs/deposits/src/lib/deposit-form.spec.tsx +++ b/libs/deposits/src/lib/deposit-form.spec.tsx @@ -4,7 +4,7 @@ import type { DepositFormProps } from './deposit-form'; import { DepositForm } from './deposit-form'; import { useVegaWallet } from '@vegaprotocol/wallet'; import { useWeb3React } from '@web3-react/core'; -import type { Asset } from './deposit-manager'; +import type { Asset } from '@vegaprotocol/react-helpers'; jest.mock('@vegaprotocol/wallet'); jest.mock('@web3-react/core'); diff --git a/libs/web3/src/index.ts b/libs/web3/src/index.ts index 397ed6f1f..c0c4dbdb9 100644 --- a/libs/web3/src/index.ts +++ b/libs/web3/src/index.ts @@ -10,3 +10,4 @@ export * from './lib/transaction-dialog'; export * from './lib/web3-provider'; export * from './lib/web3-connect-dialog'; export * from './lib/web3-wallet-input'; +export * from './lib/web3-container'; diff --git a/apps/trading/lib/web3-connectors.ts b/libs/web3/src/lib/web3-connectors.ts similarity index 87% rename from apps/trading/lib/web3-connectors.ts rename to libs/web3/src/lib/web3-connectors.ts index 2b0dfc7b7..3c385c1a4 100644 --- a/apps/trading/lib/web3-connectors.ts +++ b/libs/web3/src/lib/web3-connectors.ts @@ -3,14 +3,15 @@ import { initializeConnector } from '@web3-react/core'; import { MetaMask } from '@web3-react/metamask'; import { WalletConnect } from '@web3-react/walletconnect'; -const [metamask, metamaskHooks] = initializeConnector( - (actions) => new MetaMask(actions) -); - export const createConnectors = (providerUrl: string, chainId: number) => { if (isNaN(chainId)) { throw new Error('Invalid Ethereum chain ID for environment'); } + + const [metamask, metamaskHooks] = initializeConnector( + (actions) => new MetaMask(actions) + ); + const [walletconnect, walletconnectHooks] = initializeConnector( (actions) => diff --git a/apps/trading/components/web3-container/web3-container.spec.tsx b/libs/web3/src/lib/web3-container.spec.tsx similarity index 96% rename from apps/trading/components/web3-container/web3-container.spec.tsx rename to libs/web3/src/lib/web3-container.spec.tsx index fd380ad93..abb789429 100644 --- a/apps/trading/components/web3-container/web3-container.spec.tsx +++ b/libs/web3/src/lib/web3-container.spec.tsx @@ -3,8 +3,8 @@ import type { MockedResponse } from '@apollo/client/testing'; import { MockedProvider } from '@apollo/client/testing'; import { Web3Container } from './web3-container'; import type { useWeb3React } from '@web3-react/core'; -import type { NetworkParamsQuery } from '@vegaprotocol/web3'; -import { NETWORK_PARAMS_QUERY } from '@vegaprotocol/web3'; +import type { NetworkParamsQuery } from './__generated__/NetworkParamsQuery'; +import { NETWORK_PARAMS_QUERY } from './use-ethereum-config'; import { EnvironmentProvider } from '@vegaprotocol/environment'; const defaultHookValue = { diff --git a/apps/trading/components/web3-container/web3-container.tsx b/libs/web3/src/lib/web3-container.tsx similarity index 91% rename from apps/trading/components/web3-container/web3-container.tsx rename to libs/web3/src/lib/web3-container.tsx index d18a3c3c7..dd5732e3e 100644 --- a/apps/trading/components/web3-container/web3-container.tsx +++ b/libs/web3/src/lib/web3-container.tsx @@ -1,15 +1,13 @@ -import { AsyncRenderer, Button, Splash } from '@vegaprotocol/ui-toolkit'; -import { - Web3Provider, - Web3ConnectDialog, - useEthereumConfig, -} from '@vegaprotocol/web3'; -import { useWeb3React } from '@web3-react/core'; import type { ReactNode } from 'react'; import { useEffect, useState, useMemo } from 'react'; +import { useWeb3React } from '@web3-react/core'; +import { AsyncRenderer, Button, Splash } from '@vegaprotocol/ui-toolkit'; import { t } from '@vegaprotocol/react-helpers'; import { useEnvironment } from '@vegaprotocol/environment'; -import { createConnectors } from '../../lib/web3-connectors'; +import { Web3Provider } from './web3-provider'; +import { useEthereumConfig } from './use-ethereum-config'; +import { Web3ConnectDialog } from './web3-connect-dialog'; +import { createConnectors } from './web3-connectors'; interface Web3ContainerProps { children: ReactNode; @@ -23,6 +21,7 @@ export const Web3Container = ({ children }: Web3ContainerProps) => { if (config?.chain_id) { return createConnectors(ETHEREUM_PROVIDER_URL, Number(config?.chain_id)); } + return null; }, [config?.chain_id, ETHEREUM_PROVIDER_URL]); return ( @@ -108,6 +107,7 @@ export const Web3Content = ({ ); } + // eslint-disable-next-line react/jsx-no-useless-fragment return <>{children}; };