Use types from web3-react library

export connectors to avoid needless data manipulation, use built in types from web3-react (#310)

apps/token/src/lib/web3-connectors.ts

@@ -1,9 +1,10 @@
 import { ethers } from 'ethers';
+import type { Web3ReactHooks } from '@web3-react/core';
 import { initializeConnector } from '@web3-react/core';
 import { MetaMask } from '@web3-react/metamask';
 import { WalletConnect } from '@web3-react/walletconnect';
 
-export const metamask = initializeConnector<MetaMask>(
+export const [metamask, metamaskHooks] = initializeConnector<MetaMask>(
   (actions) => new MetaMask(actions)
 );
 
@@ -14,22 +15,23 @@ if (isNaN(CHAIN_ID)) {
   throw new Error('Invalid Ethereum chain ID for environment');
 }
 
-export const walletconnect = initializeConnector<WalletConnect>(
+export const [walletconnect, walletconnectHooks] =
-  (actions) =>
+  initializeConnector<WalletConnect>(
-    new WalletConnect(actions, {
+    (actions) =>
-      rpc: {
+      new WalletConnect(actions, {
-        [CHAIN_ID]: PROVIDER_URL,
+        rpc: {
-      },
+          [CHAIN_ID]: PROVIDER_URL,
-    }),
+        },
-  [CHAIN_ID]
+      }),
-);
+    [CHAIN_ID]
+  );
 
 export const defaultProvider = new ethers.providers.JsonRpcProvider(
   PROVIDER_URL,
   CHAIN_ID
 );
 
-export const Connectors = {
+export const Connectors: [MetaMask | WalletConnect, Web3ReactHooks][] = [
-  metamask,
+  [metamask, metamaskHooks],
-  walletconnect,
+  [walletconnect, walletconnectHooks],
-};
+];

apps/trading/lib/web3-connectors.ts

@@ -1,8 +1,9 @@
+import type { Web3ReactHooks } from '@web3-react/core';
 import { initializeConnector } from '@web3-react/core';
 import { MetaMask } from '@web3-react/metamask';
 import { WalletConnect } from '@web3-react/walletconnect';
 
-export const metamask = initializeConnector<MetaMask>(
+const [metamask, metamaskHooks] = initializeConnector<MetaMask>(
   (actions) => new MetaMask(actions)
 );
 
@@ -13,7 +14,7 @@ if (isNaN(CHAIN_ID)) {
   throw new Error('Invalid Ethereum chain ID for environment');
 }
 
-export const walletconnect = initializeConnector<WalletConnect>(
+const [walletconnect, walletconnectHooks] = initializeConnector<WalletConnect>(
   (actions) =>
     new WalletConnect(actions, {
       rpc: {
@@ -23,7 +24,7 @@ export const walletconnect = initializeConnector<WalletConnect>(
   [CHAIN_ID]
 );
 
-export const Connectors = {
+export const Connectors: [MetaMask | WalletConnect, Web3ReactHooks][] = [
-  metamask,
+  [metamask, metamaskHooks],
-  walletconnect,
+  [walletconnect, walletconnectHooks],
-};
+];

libs/web3/src/lib/types.ts

@@ -1,8 +0,0 @@
-import type { Web3ReactHooks } from '@web3-react/core';
-import type { MetaMask } from '@web3-react/metamask';
-import type { WalletConnect } from '@web3-react/walletconnect';
-
-export type Connectors = {
-  [name: string]: [Connector, Web3ReactHooks, object];
-};
-type Connector = MetaMask | WalletConnect;

libs/web3/src/lib/web3-connect-dialog.spec.tsx

@@ -1,12 +1,13 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { Web3ConnectDialog } from './web3-connect-dialog';
+import type { Web3ReactHooks } from '@web3-react/core';
 import { initializeConnector } from '@web3-react/core';
 import { MetaMask } from '@web3-react/metamask';
+import type { Connector } from '@web3-react/types';
 
-const connectors = {
+const [foo, fooHooks] = initializeConnector((actions) => new MetaMask(actions));
-  foo: initializeConnector((actions) => new MetaMask(actions)),
+
-  bar: initializeConnector((actions) => new MetaMask(actions)),
+const connectors: [Connector, Web3ReactHooks][] = [[foo, fooHooks]];
-};
 
 const props = {
   dialogOpen: false,
@@ -27,7 +28,7 @@ test('Dialog can be open or closed', () => {
 
 test('Renders connection options', async () => {
   const spyOnConnect = jest
-    .spyOn(connectors.foo[0], 'activate')
+    .spyOn(foo, 'activate')
     .mockReturnValue(Promise.resolve());
 
   render(<Web3ConnectDialog {...props} dialogOpen={true} />);
@@ -35,12 +36,10 @@ test('Renders connection options', async () => {
   expect(connectorList).toBeInTheDocument();
   expect(connectorList.children).toHaveLength(Object.keys(connectors).length);
 
-  // foo/bar connector options displayed
+  expect(screen.getByTestId('web3-connector-MetaMask')).toBeInTheDocument();
-  expect(screen.getByTestId('web3-connector-foo')).toBeInTheDocument();
-  expect(screen.getByTestId('web3-connector-bar')).toBeInTheDocument();
 
   // Assert connection is attempted with desired chain
-  fireEvent.click(screen.getByTestId('web3-connector-foo'));
+  fireEvent.click(screen.getByTestId('web3-connector-MetaMask'));
   expect(spyOnConnect).toHaveBeenCalledWith(props.desiredChainId);
   await waitFor(() => {
     expect(props.setDialogOpen).toHaveBeenCalledWith(false);

libs/web3/src/lib/web3-connect-dialog.tsx

@@ -1,11 +1,14 @@
 import { t } from '@vegaprotocol/react-helpers';
 import { Dialog, Intent } from '@vegaprotocol/ui-toolkit';
-import type { Connectors } from './types';
+import type { Web3ReactHooks } from '@web3-react/core';
+import type { Connector } from '@web3-react/types';
+import { MetaMask } from '@web3-react/metamask';
+import { WalletConnect } from '@web3-react/walletconnect';
 
 interface Web3ConnectDialogProps {
   dialogOpen: boolean;
   setDialogOpen: (isOpen: boolean) => void;
-  connectors: Connectors;
+  connectors: [Connector, Web3ReactHooks][];
   desiredChainId?: number;
 }
 
@@ -23,9 +26,10 @@ export const Web3ConnectDialog = ({
       title={t('Connect to your Ethereum wallet')}
     >
       <ul data-testid="web3-connector-list">
-        {Object.entries(connectors).map(([connectorName, [connector]]) => {
+        {connectors.map(([connector], i) => {
+          const connectorName = getConnectorName(connector);
           return (
-            <li key={connectorName} className="mb-12 last:mb-0">
+            <li key={i} className="mb-12 last:mb-0">
               <button
                 className="capitalize hover:text-vega-pink dark:hover:text-vega-yellow underline"
                 data-testid={`web3-connector-${connectorName}`}
@@ -43,3 +47,9 @@ export const Web3ConnectDialog = ({
     </Dialog>
   );
 };
+
+function getConnectorName(connector: Connector) {
+  if (connector instanceof MetaMask) return 'MetaMask';
+  if (connector instanceof WalletConnect) return 'WalletConnect';
+  return 'Unknown';
+}

libs/web3/src/lib/web3-provider.spec.tsx

@@ -1,11 +1,12 @@
 import { act, render, screen } from '@testing-library/react';
+import type { Web3ReactHooks } from '@web3-react/core';
 import { initializeConnector } from '@web3-react/core';
 import { MetaMask } from '@web3-react/metamask';
 import { Web3Provider } from './web3-provider';
 
-const connectors = {
+const [foo, fooHooks] = initializeConnector((actions) => new MetaMask(actions));
-  foo: initializeConnector((actions) => new MetaMask(actions)),
+
-};
+const connectors: [MetaMask, Web3ReactHooks][] = [[foo, fooHooks]];
 
 test('Renders children', async () => {
   await act(async () => {

libs/web3/src/lib/web3-provider.tsx

@@ -1,19 +1,14 @@
+import type { Web3ReactHooks } from '@web3-react/core';
 import { Web3ReactProvider } from '@web3-react/core';
-import type { Connectors } from './types';
+import type { Connector } from '@web3-react/types';
 
 interface Web3ProviderProps {
   children: JSX.Element | JSX.Element[];
-  connectors: Connectors;
+  connectors: [Connector, Web3ReactHooks][];
 }
 
 export const Web3Provider = ({ children, connectors }: Web3ProviderProps) => {
   return (
-    <Web3ReactProvider
+    <Web3ReactProvider connectors={connectors}>{children}</Web3ReactProvider>
-      connectors={Object.values(connectors).map(([connector, hooks]) => {
-        return [connector, hooks];
-      })}
-    >
-      {children}
-    </Web3ReactProvider>
   );
 };