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

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');
   });
 });

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;
+}

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>(DEPOSITS_QUERY, {
+    variables: { partyId: keypair?.pub },
+    skip: !keypair?.pub,
+  });
+
+  const assets = assetsConnectionToAssets(data?.assetsConnection);
+
+  return (
+    <AsyncRenderer<Deposits> data={data} loading={loading} error={error}>
+      {assets.length ? (
+        <Web3Container>
+          <DepositManager
+            assets={assets}
+            isFaucetable={VEGA_ENV !== Networks.MAINNET}
+          />
+        </Web3Container>
+      ) : (
+        <Splash>
+          <p>{t('No assets on this network')}</p>
+        </Splash>
+      )}
+    </AsyncRenderer>
+  );
+};

apps/console-lite/src/app/components/deposits/index.ts

@@ -0,0 +1 @@
+export * from './deposits';

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 = () => {
       <Tab id="fills" name={t('Fills')}>
         <FillsContainer />
       </Tab>
+      <Tab id="deposits" name={t('Deposits')}>
+        <DepositContainer />
+      </Tab>
     </Tabs>
   );
 };

apps/trading/components/web3-container/index.ts

@@ -1 +0,0 @@
-export { Web3Container } from './web3-container';

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 = () => {

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';

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 = () => {

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 = () => {

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');

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';

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<MetaMask>(
-  (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<MetaMask>(
+    (actions) => new MetaMask(actions)
+  );
+
   const [walletconnect, walletconnectHooks] =
     initializeConnector<WalletConnect>(
       (actions) =>

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 type { NetworkParamsQuery } from './__generated__/NetworkParamsQuery';
-import { NETWORK_PARAMS_QUERY } from '@vegaprotocol/web3';
+import { NETWORK_PARAMS_QUERY } from './use-ethereum-config';
 import { EnvironmentProvider } from '@vegaprotocol/environment';
 
 const defaultHookValue = {

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 (
     <AsyncRenderer data={config} loading={loading} error={error}>
@@ -108,6 +107,7 @@ export const Web3Content = ({
     );
   }
 
+  // eslint-disable-next-line react/jsx-no-useless-fragment
   return <>{children}</>;
 };