10807152902

Committed 11 Sep 2024 07:37AM UTC coverage: 14.157%. Remained the same

Build # 10807152902

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9178 from hicommonwealth/9177-phantom-pulled-up-by-error

Fix window.ethereum usage to avoid phantom pop up

Run Details

3083 of 20188 branches covered (15.27%)

Branch coverage included in aggregate %.

0 of 1 new or added line in 1 file covered. (0.0%)

1 existing line in 1 file now uncovered.

4013 of 29936 relevant lines covered (13.41%)

4.01 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/commonwealth/client/scripts/controllers/app/webWallets/metamask_web_wallet.ts

import axios from 'axios';

declare let window: any;

import type Web3 from 'web3';
import type BlockInfo from '../../../models/BlockInfo';
import type IWebWallet from '../../../models/IWebWallet';

import { hexToNumber } from 'web3-utils';

import { SIWESigner } from '@canvas-js/chain-ethereum';
import { ChainBase, ChainNetwork, WalletId } from '@hicommonwealth/shared';
import { setActiveAccount } from 'controllers/app/login';
import app from 'state';
import { fetchCachedConfiguration } from 'state/api/configuration';
import { userStore } from 'state/ui/user';
import { Web3BaseProvider } from 'web3';

class MetamaskWebWalletController implements IWebWallet<string> {
  // GETTERS/SETTERS
  private _enabled: boolean;
  private _enabling = false;
  private _accounts: string[];
  private _provider: Web3BaseProvider;
  private _web3: Web3 | any;

  public readonly name = WalletId.Metamask;
  public readonly label = 'Metamask';
  public readonly defaultNetwork = ChainNetwork.Ethereum;
  public readonly chain = ChainBase.Ethereum;

  public get available() {
    return !!window.ethereum;
  }

  public get provider() {
    return this._provider;
  }

  public get enabled() {
    return this.available && this._enabled;
  }

  public get enabling() {
    return this._enabling;
  }

  public get accounts() {
    return this._accounts || [];
  }

  public get api() {
    return this._web3;
  }

  public getChainId() {
    // We need app.chain? because the app might not be on a page with a chain (e.g homepage),
    // and node? because the chain might not have a node provided
    return (app.chain?.meta?.ChainNode?.eth_chain_id || 0)?.toString() || '1';
  }

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  public async getRecentBlock(chainIdentifier: string): Promise<BlockInfo> {
    const block = await this._web3.givenProvider.request({
      method: 'eth_getBlockByNumber',
      params: ['latest', false],
    });

    return {
      number: Number(hexToNumber(block.number)),
      hash: block.hash,
      timestamp: Number(hexToNumber(block.timestamp)),
    };
  }

  public getSessionSigner() {
    return new SIWESigner({
      signer: {
        signMessage: (message) =>
          this._web3.givenProvider.request({
            method: 'personal_sign',
            params: [this.accounts[0], message],
          }),
        getAddress: () => this.accounts[0],
      },
      chainId: parseInt(this.getChainId()),
    });
  }

  // ACTIONS
  public async enable(forceChainId?: string) {
    // TODO: use https://docs.metamask.io/guide/rpc-api.html#other-rpc-methods to switch active
    // chain according to currently active node, if one exists
    console.log('Attempting to enable Metamask');
    this._enabling = true;
    try {
      // default to ETH
      const chainId = forceChainId ?? this.getChainId();

      // ensure we're on the correct chain

      const Web3 = (await import('web3')).default;

      let ethereum = window.ethereum;

      if (window.ethereum.providers?.length) {
        window.ethereum.providers.forEach(async (p) => {
          if (p.isMetaMask) ethereum = p;
        });
      }

      this._web3 =
        process.env.ETH_RPC !== 'e2e-test'
          ? {
              givenProvider: ethereum,
            }
          : {
              givenProvider: window.ethereum,
              eth: {
                getAccounts: async () => {
                  return await this._web3.givenProvider.request({
                    method: 'eth_requestAccounts',
                  });
                },
              },
            };

      // TODO: does this come after?
      await this._web3.givenProvider.request({
        method: 'eth_requestAccounts',
      });
      const chainIdHex = `0x${parseInt(chainId, 10).toString(16)}`;
      try {
        const config = fetchCachedConfiguration();

        if (config?.evmTestEnv !== 'test') {
          await this._web3.givenProvider.request({
            method: 'wallet_switchEthereumChain',
            params: [{ chainId: chainIdHex }],
          });
        }
      } catch (switchError) {
        // This error code indicates that the chain has not been added to MetaMask.
        if (switchError.code === 4902) {
          const wsRpcUrl = app.chain?.meta?.ChainNode?.url ?? '';
          const rpcUrl =
            (app.chain?.meta?.ChainNode?.alt_wallet_url ?? wsRpcUrl)
              ? new URL(wsRpcUrl).host
              : '';

          // TODO: we should cache this data!
          const chains = await axios.get('https://chainid.network/chains.json');
          const baseChain = chains.data.find((c) => c.chainId == chainId);
          const pubRpcUrl = baseChain.rpc.filter((r) => !/\${.*?}/.test(r));
          // remove duplicate https b/c chain list has a bug in their sepolia endpoint
          const url =
            pubRpcUrl.length > 0
              ? pubRpcUrl[0].replace(/(https:\/\/)+/, 'https://')
              : rpcUrl;
          if (url === '') {
            throw new Error('Could not find rpc for new network');
          }
          await this._web3.givenProvider.request({
            method: 'wallet_addEthereumChain',
            params: [
              {
                chainId: chainIdHex,
                chainName: baseChain.name,
                nativeCurrency: baseChain.nativeCurrency,
                rpcUrls: [url],
              },
            ],
          });
        } else {
          throw switchError;
        }
      }
      // fetch active accounts
      this._accounts = (
        await this._web3.givenProvider.request({
          method: 'eth_requestAccounts',
        })
      ).map((addr) => {
        return Web3.utils.toChecksumAddress(addr);
      });
      this._provider = this._web3.currentProvider;
      if (this._accounts.length === 0) {
        throw new Error('Metamask fetched no accounts');
      }

      await this.initAccountsChanged();
      this._enabled = true;
      this._enabling = false;
    } catch (error) {
      let errorMsg = `Failed to enable Metamask: ${error.message}`;
      if (error.code === 4902) {
        errorMsg = `Failed to enable Metamask: Please add chain ID ${app?.chain?.meta?.ChainNode?.eth_chain_id || 0}`;
      }
      console.error(errorMsg);
      this._enabling = false;
      throw new Error(errorMsg);
    }
  }

  public async initAccountsChanged() {
    await this._web3.givenProvider.on(
      'accountsChanged',
      async (accounts: string[]) => {
        const updatedAddress = userStore
          .getState()
          .accounts.find((addr) => addr.address === accounts[0]);
        if (!updatedAddress) return;
        await setActiveAccount(updatedAddress);
      },
    );
    // TODO: chainChanged, disconnect events
  }

  public async switchNetwork(chainId?: string) {
    try {
      // Get current chain ID
      const communityChain = chainId ?? this.getChainId();
      const chainIdHex = `0x${parseInt(communityChain, 10).toString(16)}`;
      try {
        await this._web3.givenProvider.request({
          method: 'wallet_switchEthereumChain',
          params: [{ chainId: chainIdHex }],
        });
      } catch (error) {
        if (error.code === 4902) {
          const chains = await axios.get('https://chainid.network/chains.json');
          const baseChain = chains.data.find(
            (c) => c.chainId == communityChain,
          );
          // Check if the string contains '${' and '}'
          const rpcUrl = baseChain.rpc.filter((r) => !/\${.*?}/.test(r));
          const url =
            rpcUrl.length > 0
              ? rpcUrl[0].replace(/(https:\/\/)+/, 'https://')
              : app?.chain?.meta?.ChainNode?.alt_wallet_url || '';
          await this._web3.givenProvider.request({
            method: 'wallet_addEthereumChain',
            params: [
              {
                chainId: chainIdHex,
                chainName: baseChain.name,
                nativeCurrency: baseChain.nativeCurrency,
                rpcUrls: [url],
              },
            ],
          });
        }
      }
    } catch (error) {
      console.error('Error checking and switching chain:', error);
    }
  }

  // TODO: disconnect
}

export default MetamaskWebWalletController;

1	import axios from 'axios';
2
3	declare let window: any;
4
5	import type Web3 from 'web3';
6	import type BlockInfo from '../../../models/BlockInfo';
7	import type IWebWallet from '../../../models/IWebWallet';
8
9	import { hexToNumber } from 'web3-utils';
10
11	import { SIWESigner } from '@canvas-js/chain-ethereum';
12	import { ChainBase, ChainNetwork, WalletId } from '@hicommonwealth/shared';
13	import { setActiveAccount } from 'controllers/app/login';
14	import app from 'state';
15	import { fetchCachedConfiguration } from 'state/api/configuration';
16	import { userStore } from 'state/ui/user';
17	import { Web3BaseProvider } from 'web3';
18
19	class MetamaskWebWalletController implements IWebWallet<string> {
20	// GETTERS/SETTERS
21	private _enabled: boolean;
22	private _enabling = false;	×
23	private _accounts: string[];
24	private _provider: Web3BaseProvider;
25	private _web3: Web3 \| any;
26
27	public readonly name = WalletId.Metamask;	×
28	public readonly label = 'Metamask';	×
29	public readonly defaultNetwork = ChainNetwork.Ethereum;	×
30	public readonly chain = ChainBase.Ethereum;	×
31
32	public get available() {
33	return !!window.ethereum;	×
34	}
35
36	public get provider() {
37	return this._provider;	×
38	}
39
40	public get enabled() {
41	return this.available && this._enabled;	×
42	}
43
44	public get enabling() {
45	return this._enabling;	×
46	}
47
48	public get accounts() {
49	return this._accounts \|\| [];	×
50	}
51
52	public get api() {
53	return this._web3;	×
54	}
55
56	public getChainId() {
57	// We need app.chain? because the app might not be on a page with a chain (e.g homepage),
58	// and node? because the chain might not have a node provided
59	return (app.chain?.meta?.ChainNode?.eth_chain_id \|\| 0)?.toString() \|\| '1';	×
60	}
61
62	// eslint-disable-next-line @typescript-eslint/no-unused-vars
63	public async getRecentBlock(chainIdentifier: string): Promise<BlockInfo> {
64	const block = await this._web3.givenProvider.request({	×
65	method: 'eth_getBlockByNumber',
66	params: ['latest', false],
67	});
68
69	return {	×
70	number: Number(hexToNumber(block.number)),
71	hash: block.hash,
72	timestamp: Number(hexToNumber(block.timestamp)),
73	};
74	}
75
76	public getSessionSigner() {
77	return new SIWESigner({	×
78	signer: {
79	signMessage: (message) =>
80	this._web3.givenProvider.request({	×
81	method: 'personal_sign',
82	params: [this.accounts[0], message],
83	}),
84	getAddress: () => this.accounts[0],	×
85	},
86	chainId: parseInt(this.getChainId()),
87	});
88	}
89
90	// ACTIONS
91	public async enable(forceChainId?: string) {
92	// TODO: use https://docs.metamask.io/guide/rpc-api.html#other-rpc-methods to switch active
93	// chain according to currently active node, if one exists
94	console.log('Attempting to enable Metamask');	×
95	this._enabling = true;	×
96	try {	×
97	// default to ETH
98	const chainId = forceChainId ?? this.getChainId();	×
99
100	// ensure we're on the correct chain
101
102	const Web3 = (await import('web3')).default;	×
103
104	let ethereum = window.ethereum;	×
105
106	if (window.ethereum.providers?.length) {	×
107	window.ethereum.providers.forEach(async (p) => {	×
108	if (p.isMetaMask) ethereum = p;	×
109	});
110	}
111
112	this._web3 =	×
113	process.env.ETH_RPC !== 'e2e-test'	×
114	? {
115	givenProvider: ethereum,
116	}
117	: {
118	givenProvider: window.ethereum,
119	eth: {
120	getAccounts: async () => {
121	return await this._web3.givenProvider.request({	×
122	method: 'eth_requestAccounts',
123	});
124	},
125	},
126	};
127
128	// TODO: does this come after?
129	await this._web3.givenProvider.request({	×
130	method: 'eth_requestAccounts',
131	});
132	const chainIdHex = `0x${parseInt(chainId, 10).toString(16)}`;	×
133	try {	×
134	const config = fetchCachedConfiguration();	×
135
136	if (config?.evmTestEnv !== 'test') {	×
137	await this._web3.givenProvider.request({	×
138	method: 'wallet_switchEthereumChain',
139	params: [{ chainId: chainIdHex }],
140	});
141	}
142	} catch (switchError) {
143	// This error code indicates that the chain has not been added to MetaMask.
144	if (switchError.code === 4902) {	×
145	const wsRpcUrl = app.chain?.meta?.ChainNode?.url ?? '';	×
146	const rpcUrl =
147	(app.chain?.meta?.ChainNode?.alt_wallet_url ?? wsRpcUrl)	×
148	? new URL(wsRpcUrl).host
149	: '';
150
151	// TODO: we should cache this data!
152	const chains = await axios.get('https://chainid.network/chains.json');	×
153	const baseChain = chains.data.find((c) => c.chainId == chainId);	×
154	const pubRpcUrl = baseChain.rpc.filter((r) => !/\${.*?}/.test(r));	×
155	// remove duplicate https b/c chain list has a bug in their sepolia endpoint
156	const url =
157	pubRpcUrl.length > 0	×
158	? pubRpcUrl[0].replace(/(https:\/\/)+/, 'https://')
159	: rpcUrl;
160	if (url === '') {	×
161	throw new Error('Could not find rpc for new network');	×
162	}
163	await this._web3.givenProvider.request({	×
164	method: 'wallet_addEthereumChain',
165	params: [
166	{
167	chainId: chainIdHex,
168	chainName: baseChain.name,
169	nativeCurrency: baseChain.nativeCurrency,
170	rpcUrls: [url],
171	},
172	],
173	});
174	} else {
175	throw switchError;	×
176	}
177	}
178	// fetch active accounts
179	this._accounts = (	×
180	await this._web3.givenProvider.request({
181	method: 'eth_requestAccounts',
182	})
183	).map((addr) => {
184	return Web3.utils.toChecksumAddress(addr);	×
185	});
186	this._provider = this._web3.currentProvider;	×
187	if (this._accounts.length === 0) {	×
188	throw new Error('Metamask fetched no accounts');	×
189	}
190
191	await this.initAccountsChanged();	×
192	this._enabled = true;	×
193	this._enabling = false;	×
194	} catch (error) {
195	let errorMsg = `Failed to enable Metamask: ${error.message}`;	×
196	if (error.code === 4902) {	×
197	errorMsg = `Failed to enable Metamask: Please add chain ID ${app?.chain?.meta?.ChainNode?.eth_chain_id \|\| 0}`;	×
198	}
199	console.error(errorMsg);	×
200	this._enabling = false;	×
201	throw new Error(errorMsg);	×
202	}
203	}
204
205	public async initAccountsChanged() {
206	await this._web3.givenProvider.on(	×
207	'accountsChanged',
208	async (accounts: string[]) => {
209	const updatedAddress = userStore	×
210	.getState()
211	.accounts.find((addr) => addr.address === accounts[0]);	×
212	if (!updatedAddress) return;	×
213	await setActiveAccount(updatedAddress);	×
214	},
215	);
216	// TODO: chainChanged, disconnect events
217	}
218
219	public async switchNetwork(chainId?: string) {
220	try {	×
221	// Get current chain ID
222	const communityChain = chainId ?? this.getChainId();	×
223	const chainIdHex = `0x${parseInt(communityChain, 10).toString(16)}`;	×
224	try {	×
NEW 225	await this._web3.givenProvider.request({	×
226	method: 'wallet_switchEthereumChain',
227	params: [{ chainId: chainIdHex }],
228	});
229	} catch (error) {
230	if (error.code === 4902) {	×
231	const chains = await axios.get('https://chainid.network/chains.json');	×
232	const baseChain = chains.data.find(	×
233	(c) => c.chainId == communityChain,	×
234	);
235	// Check if the string contains '${' and '}'
236	const rpcUrl = baseChain.rpc.filter((r) => !/\${.*?}/.test(r));	×
237	const url =
238	rpcUrl.length > 0	×
239	? rpcUrl[0].replace(/(https:\/\/)+/, 'https://')
240	: app?.chain?.meta?.ChainNode?.alt_wallet_url \|\| '';	×
241	await this._web3.givenProvider.request({	×
242	method: 'wallet_addEthereumChain',
243	params: [
244	{
245	chainId: chainIdHex,
246	chainName: baseChain.name,
247	nativeCurrency: baseChain.nativeCurrency,
248	rpcUrls: [url],
249	},
250	],
251	});
252	}
253	}
254	} catch (error) {
255	console.error('Error checking and switching chain:', error);	×
256	}
257	}
258
259	// TODO: disconnect
260	}
261
262	export default MetamaskWebWalletController;

hicommonwealth / commonwealth / 10807152902

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous