diff --git a/apps/token/src/lib/web3-connectors.ts b/apps/token/src/lib/web3-connectors.ts index 9f711de7b..e26f5c1ef 100644 --- a/apps/token/src/lib/web3-connectors.ts +++ b/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( +export const [metamask, metamaskHooks] = initializeConnector( (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( - (actions) => - new WalletConnect(actions, { - rpc: { - [CHAIN_ID]: PROVIDER_URL, - }, - }), - [CHAIN_ID] -); +export const [walletconnect, walletconnectHooks] = + initializeConnector( + (actions) => + new WalletConnect(actions, { + rpc: { + [CHAIN_ID]: PROVIDER_URL, + }, + }), + [CHAIN_ID] + ); export const defaultProvider = new ethers.providers.JsonRpcProvider( PROVIDER_URL, CHAIN_ID ); -export const Connectors = { - metamask, - walletconnect, -}; +export const Connectors: [MetaMask | WalletConnect, Web3ReactHooks][] = [ + [metamask, metamaskHooks], + [walletconnect, walletconnectHooks], +]; diff --git a/apps/trading/lib/web3-connectors.ts b/apps/trading/lib/web3-connectors.ts index 55ce0ef02..3f73ad6b9 100644 --- a/apps/trading/lib/web3-connectors.ts +++ b/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( +const [metamask, metamaskHooks] = initializeConnector( (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( +const [walletconnect, walletconnectHooks] = initializeConnector( (actions) => new WalletConnect(actions, { rpc: { @@ -23,7 +24,7 @@ export const walletconnect = initializeConnector( [CHAIN_ID] ); -export const Connectors = { - metamask, - walletconnect, -}; +export const Connectors: [MetaMask | WalletConnect, Web3ReactHooks][] = [ + [metamask, metamaskHooks], + [walletconnect, walletconnectHooks], +]; diff --git a/libs/web3/src/lib/types.ts b/libs/web3/src/lib/types.ts deleted file mode 100644 index 5dd624e6c..000000000 --- a/libs/web3/src/lib/types.ts +++ /dev/null @@ -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; diff --git a/libs/web3/src/lib/web3-connect-dialog.spec.tsx b/libs/web3/src/lib/web3-connect-dialog.spec.tsx index 9f73e7406..4ce308252 100644 --- a/libs/web3/src/lib/web3-connect-dialog.spec.tsx +++ b/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 = { - foo: initializeConnector((actions) => new MetaMask(actions)), - bar: initializeConnector((actions) => new MetaMask(actions)), -}; +const [foo, fooHooks] = 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(); @@ -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-foo')).toBeInTheDocument(); - expect(screen.getByTestId('web3-connector-bar')).toBeInTheDocument(); + expect(screen.getByTestId('web3-connector-MetaMask')).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); diff --git a/libs/web3/src/lib/web3-connect-dialog.tsx b/libs/web3/src/lib/web3-connect-dialog.tsx index 039deb4c6..30bc8b919 100644 --- a/libs/web3/src/lib/web3-connect-dialog.tsx +++ b/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')} >
    - {Object.entries(connectors).map(([connectorName, [connector]]) => { + {connectors.map(([connector], i) => { + const connectorName = getConnectorName(connector); return ( -
  • +