diff --git a/config/default.js b/config/default.js index ae34354b4..12c71f2e8 100644 --- a/config/default.js +++ b/config/default.js @@ -1,6 +1,6 @@ function configureAWSBucket() { const bucket = 'nightfallv3'; - const mode = process.env.MODE; // options are 'local', 'internal', 'preprod', 'production', 'staging', and 'testnet' + const mode = process.env.REACT_APP_MODE; // options are 'local', 'internal', 'preprod', 'production', 'staging', and 'testnet' if (mode === 'local') return bucket; return `${bucket}-${mode}`; } diff --git a/wallet/README.md b/wallet/README.md index 49a87f223..4a3825ead 100644 --- a/wallet/README.md +++ b/wallet/README.md @@ -1,26 +1,34 @@ # Wallet -## Testing ERC Contracts -For testing purposes, account `0x9C8B2276D490141Ae1440Da660E470E7C0349C63` with privateKey `0x4775af73d6dc84a0ae76f8726bda4b9ecf187c377229cb39e1afa7a18236a69e` has been setup in testnet wit some Ether and some ERC tokens. - -## How is nightfall's mnemonic stored? -When connecting with Metamask to your nightfall account for the first time, you will be prompted to enter a twelve word -mnemonic. This mnemonic is used by nightfall to generate your personal set of keys that will allow you to operate on nighrfall. -You need to save this 12 word seed in a safe place, as it is the only way to recover your nightfall account. -This wallet offers a backup, but this backup is only a convenient way to log in to your account without entering the mnemonic, and -must no be relied to provide a permanent backup. -If you select to backup your nightfall mnemonic, it will be encrypted in local storage using as a key the result of hashing as signed message via Metamask. When logging back, you will be request to sign a message to decript the mnemonic and unlock your metamask account. - -## How to generate different keys from a single mnemonic? -When you login to nightfall, you will be using account index 0. You can select a different index in `Account Settings` to use a different set of keys. - -## Tests -*Updates : E2E test is not working, not maintained currently* -To launch test, set these `NETWORK_NAME`, `RPC_URL`, `CHAIN_ID`, and `PRIVATE_KEY` environment variable in local machine and then run -```sh -npm run e2e-test -``` -### For example -If launching test (e2e test) locally with Ganache. - 1. Follow instruction [here](https://github.com/EYBlockchain/nightfall_3#wallet) to start wallet app with ganache. - 2. Run `e2e-test` npm script in wallet director `NETWORK_NAME=ganache-nightfall RPC_URL=http://localhost:8546 CHAIN_ID=1337 PRIVATE_KEY=0x4775af73d6dc84a0ae76f8726bda4b9ecf187c377229cb39e1afa7a18236a69e npm run e2e-test` +### Running the Wallet locally +1. Install dependencies + `npm ci` + +2. Local development uses the ERC20Mock token deployed by `nightfall-deployer`. +To make changes to the tokens used in the wallet for local development, look at `src/static/supported-token-list/supported-tokens-testnet.ts` + +3. Start nightfall in development mode +`cd ..` +`./start-nightfall -g -d -s` + +4. Start the wallet in local development mode. +`npm run start` + +5. Ensure that your account used in metamask has the same tokens as supported by the wallet (See 2); + +6. It is usually good practice to reset your local browser state between runs. + +### Resetting Local Browser State + +#### **Reset Browser DBs** +The browser db is persistent between runs and not clearing them will cause untold issues. +- Open developer console in the browser. +- Navigate to the Application tab +- In the left hand column, under storage, select IndexedDB. +- Click on Nightfall Commitments and delete the database. +- Click on local storage in the same column. +- Right click on the localhost:3000 entry and click on Clear. + +#### **Reset Metamask** +Metamask nonces will be persistent between runs not resetting them will cause untold issues. +- Go to Metamask > Settings > Advanced > Reset Account. diff --git a/wallet/craco.config.js b/wallet/craco.config.js index 72f452683..0588c3c1a 100644 --- a/wallet/craco.config.js +++ b/wallet/craco.config.js @@ -6,9 +6,15 @@ BigInt.prototype.toJSON = function () { return this.toString(); }; +const path = require(`path`); + module.exports = { webpack: { - alias: {}, + alias: { + '@TokenList': path.resolve(__dirname, `src/static/supported-token-lists/`), + '@Nightfall': path.resolve(__dirname, `src/nightfall-browser/`), + '@Components': path.resolve(__dirname, `src/components/`), + }, plugins: { add: [ new WebpackManifestPlugin({ diff --git a/wallet/package-lock.json b/wallet/package-lock.json index b898dd7d4..017e24562 100644 --- a/wallet/package-lock.json +++ b/wallet/package-lock.json @@ -13773,6 +13773,12 @@ "ts-node": "^10.4.0" } }, + "craco-alias": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/craco-alias/-/craco-alias-3.0.1.tgz", + "integrity": "sha512-N+Qaf/Gr/f3o5ZH2TQjMu5NhR9PnT1ZYsfejpNvZPpB0ujdrhsSr4Ct6GVjnV5ostCVquhTKJpIVBKyL9qDQYA==", + "dev": true + }, "crc-32": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.0.tgz", @@ -24337,7 +24343,7 @@ }, "nanoid": { "version": "3.1.30", - "resolved": "", + "resolved": false, "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==", "dev": true }, diff --git a/wallet/package.json b/wallet/package.json index 78a89a2a9..f85512a12 100644 --- a/wallet/package.json +++ b/wallet/package.json @@ -49,10 +49,10 @@ "zokrates-js": "^1.0.39" }, "scripts": { - "start": "LOCAL_PROPOSER=true USE_STUBS=true craco start", + "start": "LOCAL_PROPOSER=true USE_STUBS=true REACT_APP_MODE=local craco start", "start:docker": "REACT_APP_ENVIRONMENT=Docker PORT=3010 craco start", "start:ropsten": "REACT_APP_ENVIRONMENT=Ropsten craco start", - "build": "LOCAL_PROPOSER=false USE_STUBS=true craco build", + "build": "LOCAL_PROPOSER=false USE_STUBS=false REACT_APP_MODE=test craco build", "deploy": "npm run build && aws s3 sync build s3://pnf-dev-browser --cache-control max-age=172800 --delete && aws configure set preview.cloudfront true && aws cloudfront create-invalidation --distribution-id ENV3X13MLR5YT --paths \"/*\"", "test": "env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' mocha -r ts-node/register 'tests/**/*.ts'", "eject": "craco eject", diff --git a/wallet/src/components/BridgeComponent/index.jsx b/wallet/src/components/BridgeComponent/index.jsx index f16f760a8..29c14b110 100644 --- a/wallet/src/components/BridgeComponent/index.jsx +++ b/wallet/src/components/BridgeComponent/index.jsx @@ -4,6 +4,12 @@ import { MdArrowForwardIos } from 'react-icons/md'; import { toast } from 'react-toastify'; import { useLocation } from 'react-router-dom'; import axios from 'axios'; +import importTokens from '@TokenList/index'; +import deposit from '@Nightfall/services/deposit'; +import withdraw from '@Nightfall/services/withdraw'; +import { getWalletBalance } from '@Nightfall/services/commitment-storage'; +import { decompressKey } from '@Nightfall/services/keys'; +import { saveTransaction } from '@Nightfall/services/database'; import styles from '../../styles/bridge.module.scss'; import stylesModal from '../../styles/modal.module.scss'; import ethChainImage from '../../assets/img/ethereum-chain.svg'; @@ -12,8 +18,6 @@ import discloserBottomImage from '../../assets/img/discloser-bottom.svg'; import lightArrowImage from '../../assets/img/light-arrow.svg'; import { approve, getContractAddress, submitTransaction } from '../../common-files/utils/contract'; import Web3 from '../../common-files/utils/web3'; -import deposit from '../../nightfall-browser/services/deposit'; -import withdraw from '../../nightfall-browser/services/withdraw'; import approveImg from '../../assets/img/modalImages/adeposit_approve1.png'; import depositConfirmed from '../../assets/img/modalImages/adeposit_confirmed.png'; import successHand from '../../assets/img/modalImages/success-hand.png'; @@ -21,18 +25,16 @@ import transferCompletedImg from '../../assets/img/modalImages/tranferCompleted. import { UserContext } from '../../hooks/User/index.jsx'; import './styles.scss'; import Input from '../Input/index.tsx'; -import TokensList from '../Modals/Bridge/TokensList/index.tsx'; +import TokensList from '../Modals/Bridge/index.tsx'; import { useAccount } from '../../hooks/Account/index.tsx'; -import { getWalletBalance } from '../../nightfall-browser/services/commitment-storage'; import './toast.css'; import ERC20 from '../../contract-abis/ERC20.json'; -import tokensList from '../Modals/Bridge/TokensList/tokensList'; import { APPROVE_AMOUNT } from '../../constants'; import { retrieveAndDecrypt } from '../../utils/lib/key-storage'; -import { decompressKey } from '../../nightfall-browser/services/keys'; -import { saveTransaction } from '../../nightfall-browser/services/database'; import BigFloat from '../../common-files/classes/bigFloat'; +const supportedTokens = importTokens(); + const { proposerUrl } = global.config; // eslint-disable-next-line @typescript-eslint/no-var-requires @@ -47,11 +49,10 @@ const BridgeComponent = () => { const [l2Balance, setL2Balance] = useState(0n); const [shieldContractAddress, setShieldAddress] = useState(''); const location = useLocation(); - const initialTx = location?.tokenState?.initialTxType ?? 'deposit'; const initialToken = - tokensList.tokens.find(t => t.address.toLowerCase() === location?.tokenState?.tokenAddress) ?? - tokensList.tokens[0]; + supportedTokens.find(t => t.address.toLowerCase() === location?.tokenState?.tokenAddress) ?? + supportedTokens[0]; const [token, setToken] = useState(initialToken); const [txType, setTxType] = useState(initialTx); @@ -146,8 +147,6 @@ const BridgeComponent = () => { async function triggerTx() { if (shieldContractAddress === '') setShieldAddress((await getContractAddress('Shield')).data.address); - // const { address } = (await getContractAddress('ERC20Mock')).data; // TODO Only for testing now - // const ercAddress = address; // TODO Location to be removed later const ercAddress = token.address; console.log('ercAddress', ercAddress); const zkpKeys = await retrieveAndDecrypt(state.compressedPkd); @@ -228,8 +227,6 @@ const BridgeComponent = () => { async function updateL1Balance() { console.log('L1 Balance'); if (token && token?.address) { - // const { address } = (await getContractAddress('ERC20Mock')).data; // TODO REMOVE THIS WHEN OFFICIAL ADDRESSES - // console.log('ERC20', defaultTokenAddress); const contract = new window.web3.eth.Contract(ERC20, token.address); const result = await contract.methods.balanceOf(accountInstance.address).call(); // 29803630997051883414242659 setL1Balance(result); @@ -240,7 +237,6 @@ const BridgeComponent = () => { async function updateL2Balance() { if (token && token.address) { - // const { address } = (await getContractAddress('ERC20Mock')).data; // TODO REMOVE THIS WHEN OFFICIAL ADDRESSES const l2bal = await getWalletBalance(state.compressedPkd); if (Object.hasOwnProperty.call(l2bal, state.compressedPkd)) setL2Balance(l2bal[state.compressedPkd][token.address.toLowerCase()] ?? 0n); diff --git a/wallet/src/components/Modals/Bridge/TokensList/index.tsx b/wallet/src/components/Modals/Bridge/index.tsx similarity index 88% rename from wallet/src/components/Modals/Bridge/TokensList/index.tsx rename to wallet/src/components/Modals/Bridge/index.tsx index d4dfca01f..8a93f0dc9 100644 --- a/wallet/src/components/Modals/Bridge/TokensList/index.tsx +++ b/wallet/src/components/Modals/Bridge/index.tsx @@ -2,8 +2,10 @@ import React, { useState, Dispatch, SetStateAction, ChangeEvent } from 'react'; import './styles.scss'; import { FiSearch } from 'react-icons/fi'; import Modal from 'react-bootstrap/Modal'; -import tokensList from './tokensList'; -import TokenType from './TokenType'; +import importTokens from '@TokenList/index'; +import TokenType from '@TokenList/TokenType'; + +const supportedTokens = importTokens(); type TokenListType = { handleClose: Dispatch>; @@ -11,11 +13,11 @@ type TokenListType = { }; const TokensList = ({ handleClose, setToken }: TokenListType): JSX.Element => { - const [filteredTokens, setFilteredTokens] = useState(tokensList.tokens); + const [filteredTokens, setFilteredTokens] = useState(supportedTokens); const filterTokens = (e: ChangeEvent) => { setFilteredTokens( - tokensList.tokens.filter(token => + supportedTokens.filter((token: any) => token.name.toLowerCase().includes(e.target.value.toLocaleLowerCase()), ), ); diff --git a/wallet/src/components/Modals/Bridge/TokensList/styles.scss b/wallet/src/components/Modals/Bridge/styles.scss similarity index 100% rename from wallet/src/components/Modals/Bridge/TokensList/styles.scss rename to wallet/src/components/Modals/Bridge/styles.scss diff --git a/wallet/src/components/Modals/instantWithdrawal.tsx b/wallet/src/components/Modals/instantWithdrawal.tsx index 7fdb30e26..021b90cf0 100644 --- a/wallet/src/components/Modals/instantWithdrawal.tsx +++ b/wallet/src/components/Modals/instantWithdrawal.tsx @@ -1,8 +1,8 @@ import React, { useState } from 'react'; import { Button, Col, FormControl, InputGroup, Modal, ProgressBar, Row } from 'react-bootstrap'; +import { markWithdrawState } from '@Nightfall/services/database'; +import setInstantWithdrawl from '@Nightfall/services/instant-withdrawal'; import { getContractAddress, submitTransaction } from '../../common-files/utils/contract'; -import { markWithdrawState } from '../../nightfall-browser/services/database'; -import setInstantWithdrawl from '../../nightfall-browser/services/instant-withdrawal'; import './index.scss'; interface InstantWithdrawProps { diff --git a/wallet/src/components/Modals/sendModal.tsx b/wallet/src/components/Modals/sendModal.tsx index e22ea305e..503eb12a5 100644 --- a/wallet/src/components/Modals/sendModal.tsx +++ b/wallet/src/components/Modals/sendModal.tsx @@ -3,21 +3,25 @@ import Modal from 'react-bootstrap/Modal'; import { AiOutlineDown } from 'react-icons/ai'; import { FiSearch } from 'react-icons/fi'; import axios from 'axios'; -import tokensList from './Bridge/TokensList/tokensList'; +import importTokens from '@TokenList/index'; +import TokenType from '@TokenList/TokenType'; +import transfer from '@Nightfall/services/transfer'; +import { getWalletBalance } from '@Nightfall/services/commitment-storage'; +import { saveTransaction } from '@Nightfall/services/database'; import stylesModal from '../../styles/modal.module.scss'; import { UserContext } from '../../hooks/User'; import maticImg from '../../assets/img/polygon-chain.svg'; -import transfer from '../../nightfall-browser/services/transfer'; import { retrieveAndDecrypt } from '../../utils/lib/key-storage'; import { getContractAddress } from '../../common-files/utils/contract'; -import { getWalletBalance } from '../../nightfall-browser/services/commitment-storage'; import styles from '../../styles/bridge.module.scss'; import approveImg from '../../assets/img/modalImages/adeposit_approve1.png'; import depositConfirmed from '../../assets/img/modalImages/adeposit_confirmed.png'; import successHand from '../../assets/img/modalImages/success-hand.png'; import transferCompletedImg from '../../assets/img/modalImages/tranferCompleted.png'; -import { saveTransaction } from '../../nightfall-browser/services/database'; import BigFloat from '../../common-files/classes/bigFloat'; + +const supportedTokens = importTokens(); + // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore const { proposerUrl } = global.config; @@ -43,7 +47,7 @@ const SendModal = (props: SendModalProps): JSX.Element => { const { onHide, show, ...initialSendToken } = props; const [sendToken, setSendToken] = useState(initialSendToken); const [filteredTokens, setFilteredTokens] = useState( - tokensList.tokens.map(({ name, symbol, address, logoURI, decimals }) => { + supportedTokens.map(({ name, symbol, address, logoURI, decimals }) => { return { name, symbol, @@ -58,9 +62,9 @@ const SendModal = (props: SendModalProps): JSX.Element => { const [l2Balance, setL2Balance] = useState(0n); const [showTokensListModal, setShowTokensListModal] = useState(false); - const filterTxs = (criteria: string) => - tokensList.tokens - .filter(t => t.name.toLowerCase().includes(criteria)) + const filterTxs = (criteria: string): any[] => + supportedTokens + .filter((t: TokenType) => t.name.toLowerCase().includes(criteria)) .map(({ name, symbol, address, logoURI, decimals }) => { return { name, @@ -154,7 +158,6 @@ const SendModal = (props: SendModalProps): JSX.Element => { await timeout(2000); setShowModalTransferInProgress(false); setShowModalTransferEnRoute(true); - // const { address } = (await getContractAddress('ERC20Mock')).data; // TODO Only for testing now const { transaction, rawTransaction } = await transfer( { offchain: true, diff --git a/wallet/src/components/Modals/txInfoModal.tsx b/wallet/src/components/Modals/txInfoModal.tsx index 69e621aab..49f704a86 100644 --- a/wallet/src/components/Modals/txInfoModal.tsx +++ b/wallet/src/components/Modals/txInfoModal.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { Button, Col, Modal, Row } from 'react-bootstrap'; +import { markWithdrawState } from '@Nightfall/services/database'; +import { finaliseWithdrawal } from '@Nightfall/services/finalise-withdrawal'; +import { isValidWithdrawal } from '@Nightfall/services/valid-withdrawal'; import { getContractAddress, submitTransaction } from '../../common-files/utils/contract'; -import { markWithdrawState } from '../../nightfall-browser/services/database'; -import { finaliseWithdrawal } from '../../nightfall-browser/services/finalise-withdrawal'; -import { isValidWithdrawal } from '../../nightfall-browser/services/valid-withdrawal'; import stylesModal from '../../styles/modal.module.scss'; interface TxModalProps { diff --git a/wallet/src/components/TokenItem/index.jsx b/wallet/src/components/TokenItem/index.jsx index fa2c061ea..3ba6f1de0 100644 --- a/wallet/src/components/TokenItem/index.jsx +++ b/wallet/src/components/TokenItem/index.jsx @@ -1,17 +1,19 @@ import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; +import importTokens from '@TokenList/index'; +import { getWalletBalance } from '@Nightfall/services/commitment-storage'; import styles from '../../styles/tokenItem.module.scss'; import metamaskIcon from '../../assets/svg/metamask.svg'; import { UserContext } from '../../hooks/User/index.jsx'; -import tokensList from '../Modals/Bridge/TokensList/tokensList'; -import { getWalletBalance } from '../../nightfall-browser/services/commitment-storage'; import SendModal from '../Modals/sendModal'; +const supportedTokens = importTokens(); + export default function TokenItem(props) { const [showSendModal, setShowSendModal] = useState(false); const [state] = React.useContext(UserContext); - const [filteredTokens, setFilteredTokens] = useState(tokensList.tokens); + const [filteredTokens, setFilteredTokens] = useState(supportedTokens); useEffect(async () => { const l2bal = await getWalletBalance(state.compressedPkd); diff --git a/wallet/src/components/Transactions/index.jsx b/wallet/src/components/Transactions/index.jsx index 2711cdb94..98a230cb0 100644 --- a/wallet/src/components/Transactions/index.jsx +++ b/wallet/src/components/Transactions/index.jsx @@ -1,24 +1,23 @@ import React from 'react'; import { Row, Spinner, Image } from 'react-bootstrap'; +import importTokens from '@TokenList/index'; +import { getAllTransactions, findBlocksFromBlockNumberL2 } from '@Nightfall/services/database.js'; +import { getAllCommitments } from '@Nightfall/services/commitment-storage'; +import { isValidWithdrawal } from '@Nightfall/services/valid-withdrawal'; import WithdrawTransaction from './withdraw.tsx'; import bridgeInfoImage from '../../assets/img/bridge-info.png'; import polygonChainImage from '../../assets/img/polygon-chain.svg'; import tickBox from '../../assets/svg/tickBox.svg'; import etherscanArrow from '../../assets/svg/etherscanGo.svg'; -import { - getAllTransactions, - findBlocksFromBlockNumberL2, -} from '../../nightfall-browser/services/database.js'; import TxInfoModal from '../Modals/txInfoModal.tsx'; import Web3 from '../../common-files/utils/web3'; import './index.scss'; -import { getAllCommitments } from '../../nightfall-browser/services/commitment-storage'; import { getContractAddress, getContractInstance } from '../../common-files/utils/contract'; -import { isValidWithdrawal } from '../../nightfall-browser/services/valid-withdrawal'; import useInterval from '../../hooks/useInterval'; -import tokensList from '../Modals/Bridge/TokensList/tokensList'; import { getPricing, setPricing } from '../../utils/lib/local-storage'; +const supportedTokens = importTokens(); + const { SHIELD_CONTRACT_NAME, ZERO } = global.config; const txTypeOptions = ['Deposit', 'Transfer', 'Transfer', 'Withdraw']; @@ -43,16 +42,16 @@ const Transactions = () => { const [delay, setDelay] = React.useState(50); const initialPrices = {}; - tokensList.tokens.forEach(t => { + supportedTokens.forEach(t => { initialPrices[t.id] = 0; }, {}); const [currencyValues, setCurrencyValues] = React.useState({ now: 0, ...initialPrices }); React.useEffect(async () => { - if (!getPricing()) await setPricing(tokensList.tokens.map(t => t.id)); + if (!getPricing()) await setPricing(supportedTokens.map(t => t.id)); else if (Date.now() - getPricing().time > 86400) - await setPricing(tokensList.tokens.map(t => t.id)); + await setPricing(supportedTokens.map(t => t.id)); setCurrencyValues(getPricing()); }, []); @@ -125,15 +124,7 @@ const Transactions = () => { tx.withdrawState = 'fulfilled'; } - // const { address: mockAddress } = (await getContractAddress('ERC20Mock')).data; - // const testList = tokensList.tokens.map(t => { - // return { - // ...t, - // address: mockAddress, - // }; - // }); - - const { logoURI, decimals, id, symbol } = tokensList.tokens.find( + const { logoURI, decimals, id, symbol } = supportedTokens.find( t => t.address.toLowerCase() === `0x${ercAddress.slice(-40).toLowerCase()}`, ) ?? { logoURI: null, diff --git a/wallet/src/hooks/User/index.jsx b/wallet/src/hooks/User/index.jsx index 71c1a8b1d..8a27a2ffb 100644 --- a/wallet/src/hooks/User/index.jsx +++ b/wallet/src/hooks/User/index.jsx @@ -1,11 +1,11 @@ import React from 'react'; import { useLocation } from 'react-router-dom'; -import Web3 from '../../common-files/utils/web3'; +import { generateKeys } from '@Nightfall/services/keys'; +import blockProposedEventHandler from '@Nightfall/event-handlers/block-proposed'; +import { getMaxBlock } from '@Nightfall/services/database'; import * as Storage from '../../utils/lib/local-storage'; -import { generateKeys } from '../../nightfall-browser/services/keys'; -import blockProposedEventHandler from '../../nightfall-browser/event-handlers/block-proposed'; -import { getMaxBlock } from '../../nightfall-browser/services/database'; +import Web3 from '../../common-files/utils/web3'; import { encryptAndStore, retrieveAndDecrypt, storeBrowserKey } from '../../utils/lib/key-storage'; const { eventWsUrl } = global.config; diff --git a/wallet/src/components/Modals/Bridge/TokensList/TokenType.ts b/wallet/src/static/supported-token-lists/TokenType.ts similarity index 96% rename from wallet/src/components/Modals/Bridge/TokensList/TokenType.ts rename to wallet/src/static/supported-token-lists/TokenType.ts index 7ea90e4af..3b61fd667 100644 --- a/wallet/src/components/Modals/Bridge/TokensList/TokenType.ts +++ b/wallet/src/static/supported-token-lists/TokenType.ts @@ -6,6 +6,7 @@ type TokenType = { address: string; logoURI: string; tags: Array; + id: string; extensions: { parentAddress: string; project: { diff --git a/wallet/src/static/supported-token-lists/index.ts b/wallet/src/static/supported-token-lists/index.ts new file mode 100644 index 000000000..edaa6a6e6 --- /dev/null +++ b/wallet/src/static/supported-token-lists/index.ts @@ -0,0 +1,15 @@ +import localTokens from '@TokenList/supported-tokens-local'; +import testnetTokens from '@TokenList/supported-tokens-testnet'; +import TokenType from './TokenType'; + +const supportedTokens = (): TokenType[] => { + switch (process.env.REACT_APP_MODE) { + case 'test': + return testnetTokens.tokens; + default: { + return localTokens.tokens; + } + } +}; + +export default supportedTokens; diff --git a/wallet/src/static/supported-token-lists/supported-tokens-local.ts b/wallet/src/static/supported-token-lists/supported-tokens-local.ts new file mode 100644 index 000000000..61b790f66 --- /dev/null +++ b/wallet/src/static/supported-token-lists/supported-tokens-local.ts @@ -0,0 +1,25 @@ +const tokensList = { + tokens: [ + { + chainId: 5, + name: 'Ether - ERC20 Mock', + symbol: 'ETH', + decimals: 9, + address: '0x17E1009e6Eab141615811104795D98c316d97AC0', + logoURI: 'https://wallet-asset.matic.network/img/tokens/eth.svg', + tags: ['pos', 'erc20', 'swapable', 'metaTx'], + id: 'ethereum', + extensions: { + parentAddress: '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee', + project: { + name: '-', + summary: '-', + contact: '-', + website: 'https://weth.io/', + }, + }, + }, + ], +}; + +export default tokensList; diff --git a/wallet/src/components/Modals/Bridge/TokensList/tokensList.ts b/wallet/src/static/supported-token-lists/supported-tokens-testnet.ts similarity index 100% rename from wallet/src/components/Modals/Bridge/TokensList/tokensList.ts rename to wallet/src/static/supported-token-lists/supported-tokens-testnet.ts diff --git a/wallet/src/views/bridge/index.jsx b/wallet/src/views/bridge/index.jsx index e395f34cb..e01b49234 100644 --- a/wallet/src/views/bridge/index.jsx +++ b/wallet/src/views/bridge/index.jsx @@ -1,14 +1,11 @@ -/* eslint-disable react/jsx-no-undef */ -/* eslint-disable react/jsx-pascal-case */ import React, { useContext } from 'react'; import { useMediaQuery } from 'react-responsive'; +import SideBar from '@Components/SideBar/index.jsx'; +import BridgeComponent from '@Components/BridgeComponent/index.jsx'; +import Header from '@Components/Header/header.jsx'; import pgIcon from '../../static/img/bridgepage/pg_coin4x2.png'; import ethIcon from '../../static/img/bridgepage/eth_coin4x2.png'; -import Header from '../../components/Header/header.jsx'; -import SideBar from '../../components/SideBar/index.jsx'; -// eslint-disable-next-line import/no-unresolved import { UserContext } from '../../hooks/User/index.jsx'; -import BridgeComponent from '../../components/BridgeComponent/index.jsx'; import './styles.scss'; const Bridge = () => { diff --git a/wallet/src/views/transactionPage/index.jsx b/wallet/src/views/transactionPage/index.jsx index 4f5130dd0..5f4a87fd6 100644 --- a/wallet/src/views/transactionPage/index.jsx +++ b/wallet/src/views/transactionPage/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; -import Header from '../../components/Header/header.jsx'; -import SideBar from '../../components/SideBar/index.jsx'; -import Transactions from '../../components/Transactions/index.jsx'; +import Header from '@Components/Header/header.jsx'; +import SideBar from '@Components/SideBar/index.jsx'; +import Transactions from '@Components/Transactions/index.jsx'; import styles from '../../styles/transactionPage.module.scss'; export default function TransactionPage() { diff --git a/wallet/src/views/wallet/index.jsx b/wallet/src/views/wallet/index.jsx index 21812b699..de7e2264f 100644 --- a/wallet/src/views/wallet/index.jsx +++ b/wallet/src/views/wallet/index.jsx @@ -8,21 +8,22 @@ import FormControl from 'react-bootstrap/FormControl'; import Container from 'react-bootstrap/Container'; import Row from 'react-bootstrap/Row'; import Col from 'react-bootstrap/Col'; -import Assets from '../../components/Assets/index.jsx'; -import Header from '../../components/Header/header.jsx'; -import SideBar from '../../components/SideBar/index.jsx'; -import Tokens from '../../components/Tokens/index.jsx'; -import { getWalletBalance } from '../../nightfall-browser/services/commitment-storage.js'; +import importTokens from '@TokenList/index'; +import Assets from '@Components/Assets/index.jsx'; +import Header from '@Components/Header/header.jsx'; +import SideBar from '@Components/SideBar/index.jsx'; +import Tokens from '@Components/Tokens/index.jsx'; +import { getWalletBalance } from '@Nightfall/services/commitment-storage.js'; import { UserContext } from '../../hooks/User/index.jsx'; import './wallet.scss'; import * as Storage from '../../utils/lib/local-storage'; import Web3 from '../../common-files/utils/web3'; import { useAccount } from '../../hooks/Account/index.tsx'; -import tokensList from '../../components/Modals/Bridge/TokensList/tokensList'; -// import { getContractAddress } from '../../common-files/utils/contract.js'; import useInterval from '../../hooks/useInterval.js'; +const supportedTokens = importTokens(); + const { DEFAULT_ACCOUNT_NUM } = global.config; /** @@ -89,13 +90,13 @@ function WalletModal(props) { export default function Wallet() { const { setAccountInstance } = useAccount(); const initialPrices = {}; - tokensList.tokens.forEach(t => { + supportedTokens.forEach(t => { initialPrices[t.id] = 0; }, {}); const [currencyValues, setCurrencyValues] = useState({ now: 0, ...initialPrices }); - const initialTokenState = tokensList.tokens.map(t => { + const initialTokenState = supportedTokens.map(t => { return { l2Balance: '0', currencyValue: currencyValues[t.id], @@ -122,9 +123,9 @@ export default function Wallet() { }, []); useEffect(async () => { - if (!Storage.getPricing()) await Storage.setPricing(tokensList.tokens.map(t => t.id)); + if (!Storage.getPricing()) await Storage.setPricing(supportedTokens.map(t => t.id)); else if (Date.now() - Storage.getPricing().time > 86400) - await Storage.setPricing(tokensList.tokens.map(t => t.id)); + await Storage.setPricing(supportedTokens.map(t => t.id)); setCurrencyValues(Storage.getPricing); }, []); @@ -145,16 +146,6 @@ export default function Wallet() { return t; }), ); - // Trapdoor for testing - // const { address: trapdoorAddress } = (await getContractAddress('ERC20Mock')).data; // TODO Only for testing now - // setTokens( - // updatedState.map(({ address, ...rest }) => { - // return { - // ...rest, - // address: trapdoorAddress, - // }; - // }), - // ); setTokens(updatedState); setDelay(10000); }, delay); diff --git a/wallet/src/web-worker/index.js b/wallet/src/web-worker/index.js index e85560768..56e4d2244 100644 --- a/wallet/src/web-worker/index.js +++ b/wallet/src/web-worker/index.js @@ -4,8 +4,8 @@ /* * main thread file */ -import fetchCircuit from 'comlink-loader?singleton!../nightfall-browser/services/fetch-circuit'; -import { checkIndexDBForCircuit, storeCircuit } from '../nightfall-browser/services/database'; +import fetchCircuit from 'comlink-loader?singleton!@Nightfall/services/fetch-circuit'; +import { checkIndexDBForCircuit, storeCircuit } from '@Nightfall/services/database'; const { circuitsAWSFiles, USE_STUBS } = global.config; diff --git a/wallet/tsconfig.json b/wallet/tsconfig.json index 97724a609..b21d0089b 100644 --- a/wallet/tsconfig.json +++ b/wallet/tsconfig.json @@ -1,12 +1,13 @@ { + "extends": "./tsconfig.path.json", "compilerOptions": { "target": "es2020", "lib": [ "dom", "dom.iterable", "esnext", - "es5", - "es6", + "es5", + "es6" ], "allowJs": true, "skipLibCheck": true, @@ -27,5 +28,4 @@ "src/custom.d.ts", "tests/", ] - } diff --git a/wallet/tsconfig.path.json b/wallet/tsconfig.path.json new file mode 100644 index 000000000..4e7ce9cf9 --- /dev/null +++ b/wallet/tsconfig.path.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "baseUrl": "./src", + "paths": { + "@TokenList/*": ["static/supported-token-lists/*"], + "@Nightfall/*": ["nightfall-browser/*"], + "@Components/*": ["components/*"], + } + } +} \ No newline at end of file