feat: detect correct chain

wallet/src/common-files/utils/web3.js

@@ -4,6 +4,14 @@ import Web3 from 'web3';
 
 const { ethereum } = global;
 
+export const ChainIdMapping = {
+preprod: { chainId: '0x5', chainName: 'Goerli' },
+testnet: { chainId: '0x5', chainName: 'Goerli' },
+staging: { chainId: '0x5', chainName: 'Goerli' },
+local: { chainId: '0x539', chainName: 'Ganache' }, // 1337
+production: { chainId: '0x1', chainName: 'Ethereum Mainnet' },
+};
+
 export default {
 connectedAccount: undefined,
 connection() {
@@ -16,17 +24,34 @@ export default {
 * Note: function only supposed to call once
 */
 async connect() {
-if (!ethereum) {
-throw Error('MetaMask is not connected');
+if (!ethereum || !ethereum.isMetaMask) {
+throw Error('Wallet is not connected or is not MetaMask', ethereum.isMetaMask);
 }
 this.web3 = new Web3(ethereum);
 global.web3 = this.web3; // for now global.web3 is only set and not referenced anywhere
 
 [this.connectedAccount] = await ethereum.request({ method: 'eth_requestAccounts' });
+ethereum.on('chainChanged', () => window.location.reload());
+
 ethereum.on('accountsChanged', ([account]) => {
 this.connectedAccount = account;
 });
 
+const chainId = await ethereum.request({ method: 'eth_chainId' });
+console.log('Chain ID', chainId);
+if (
+chainId !== ChainIdMapping[process.env.REACT_APP_MODE].chainId &&
+process.env.REACT_APP_MODE !== 'local'
+)
+await ethereum.request({
+method: 'wallet_switchEthereumChain',
+params: [
+{
+chainId: ChainIdMapping[process.env.REACT_APP_MODE].chainId,
+},
+], // chainId must be in hexadecimal numbers
+});
+
 return ethereum;
 },
 

wallet/src/components/Modals/Bridge/Transfer/index.jsx

@@ -7,6 +7,7 @@ import styled from 'styled-components';
 import { MdArrowForwardIos } from 'react-icons/md';
 import { ModalBody } from 'react-bootstrap';
 import matic from '../../../../assets/svg/matic.svg';
+import { ChainIdMapping } from '../../../../common-files/utils/web3';
 
 const MyModalBody = styled.div`
 flex-direction: column;
@@ -109,17 +110,11 @@ const ContinueTransferButton = styled.button`
 }
 `;
 
-const TransferModal = ({
-show,
-setShow,
-handleClose,
-transferValue,
-txType,
-triggerTx,
-setReadyTx,
-}) => {
+const { ethereum } = global;
+
+const TransferModal = ({ show, handleClose, transferValue, txType, triggerTx, setReadyTx }) => {
 return (
-<Modal contentClassName="modalFather" show={show} onHide={() => setShow(false)}>
+<Modal contentClassName="modalFather" show={show} onHide={handleClose}>
 <Modal.Header closeButton>
 <div className="modalTitle">Confirm transaction</div>
 </Modal.Header>
@@ -173,16 +168,32 @@ const TransferModal = ({
 <EstimationFeeTitleMain>Estimation Transaction fee</EstimationFeeTitleMain>
 <EstimationFeeTitleLight>TBC</EstimationFeeTitleLight>
 </EstimationFeeTitle>
-<ContinueTransferButton
-type="button"
-// onClick={() => triggerTx()}
-onClick={async () => {
-handleClose();
-setReadyTx(await triggerTx());
-}}
->
-Create Transaction
-</ContinueTransferButton>
+{txType === 'withdraw' ||
+(txType === 'deposit' &&
+ethereum.chainId === ChainIdMapping[process.env.REACT_APP_MODE].chainId) ? (
+<ContinueTransferButton
+type="button"
+onClick={async () => {
+handleClose();
+setReadyTx(await triggerTx());
+}}
+>
+Create Transaction
+</ContinueTransferButton>
+) : (
+<ContinueTransferButton
+type="button"
+style={{ backgroundColor: 'grey' }}
+onClick={() => {
+return ethereum.request({
+method: 'wallet_switchEthereumChain',
+params: [{ chainId: ChainIdMapping[process.env.REACT_APP_MODE].chainId }], // chainId must be in hexadecimal numbers
+});
+}}
+>
+Switch to {ChainIdMapping[process.env.REACT_APP_MODE].chainName} For Deposits.
+</ContinueTransferButton>
+)}
 </EstimationFee>
 </MyModalBody>
 </ModalBody>

wallet/src/static/supported-token-lists/index.ts

@@ -1,13 +1,16 @@
 import localTokens from '@TokenList/supported-tokens-local';
 import testnetTokens from '@TokenList/supported-tokens-testnet';
+import mainnetTokens from '@TokenList/supported-tokens-mainnet';
 import TokenType from './TokenType';
 
 const supportedTokens = (): TokenType[] => {
 switch (process.env.REACT_APP_MODE) {
 case 'testnet':
-return testnetTokens.tokens;
+case 'preprod':
 case 'staging':
 return testnetTokens.tokens;
+case 'production':
+return mainnetTokens.tokens;
 default: {
 return localTokens.tokens;
 }

wallet/src/static/supported-token-lists/supported-tokens-mainnet.ts

@@ -0,0 +1,101 @@
+const tokensList = {
+tokens: [
+{
+chainId: 1,
+name: 'Wrapped Ether',
+symbol: 'WETH',
+decimals: 18,
+address: '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2',
+logoURI: 'https://wallet-asset.matic.network/img/tokens/eth.svg',
+tags: ['pos', 'erc20', 'swapable', 'metaTx'],
+id: 'ethereum',
+extensions: {
+parentAddress: '',
+project: {
+name: '-',
+summary: '-',
+contact: '-',
+website: 'https://weth.io/',
+},
+},
+},
+{
+chainId: 1,
+name: 'Matic Token',
+symbol: 'MATIC',
+decimals: 18,
+address: '0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0',
+logoURI: 'https://wallet-asset.matic.network/img/tokens/matic.svg',
+tags: ['plasma', 'erc20', 'swapable'],
+id: 'matic-network',
+extensions: {
+parentAddress: '',
+project: {
+name: 'Polygon',
+summary: '-',
+contact: '[email protected]',
+website: 'https://polygon.technology',
+},
+},
+},
+{
+chainId: 1,
+name: 'USD Coin',
+symbol: 'USDC',
+decimals: 6,
+address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
+logoURI: 'https://wallet-asset.matic.network/img/tokens/usdc.svg',
+tags: ['pos', 'erc20', 'swapable', 'metaTx', 'stablecoin'],
+id: 'usd-coin',
+extensions: {
+parentAddress: '',
+project: {
+name: 'Centre',
+summary: '-',
+contact: '-',
+website: 'https://www.centre.io',
+},
+},
+},
+{
+chainId: 1,
+name: 'Tether USD',
+symbol: 'USDT',
+decimals: 6,
+address: '0xdAC17F958D2ee523a2206206994597C13D831ec7',
+logoURI: 'https://wallet-asset.matic.network/img/tokens/usdt.svg',
+tags: ['pos', 'stablecoin', 'erc20', 'swapable', 'metaTx'],
+id: 'tether',
+extensions: {
+parentAddress: '',
+project: {
+name: 'Tether',
+summary: '-',
+contact: '[email protected]',
+website: 'https://tether.to/',
+},
+},
+},
+{
+chainId: 1,
+name: 'Dai',
+symbol: 'DAI',
+decimals: 18,
+address: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
+logoURI: 'https://wallet-asset.matic.network/img/tokens/dai.svg',
+tags: ['pos', 'stablecoin', 'erc20', 'swapable', 'metaTx'],
+id: 'dai',
+extensions: {
+parentAddress: '',
+project: {
+name: '-',
+summary: '-',
+contact: '-',
+website: 'https://makerdao.com/',
+},
+},
+},
+],
+};
+
+export default tokensList;