Adds some functionality and fixes to wallet

wallet/.env

@@ -1,6 +1,6 @@
 SKIP_PREFLIGHT_CHECK=true
-PROPOSER_API_URL=https://proposer.staging.polygon-nightfall.technology
+PROPOSER_API_URL=https://proposer.polygon-nightfall.technology
 LOCAL_API_URL=http://localhost:8081
-PROPOSER_WS_URL=wss://kpg1x6a0vj.execute-api.eu-west-1.amazonaws.com/staging
+PROPOSER_WS_URL=wss://kpg1x6a0vj.execute-api.eu-west-1.amazonaws.com/production
 LOCAL_WS_URL=ws://localhost:8082
 LOCAL_UTIL_API_URL=http://localhost:8087

wallet/package.json

@@ -103,7 +103,7 @@
 },
 "scripts": {
 "start": "LOCAL_PROPOSER=true PUBLIC_URL='/nightfall/' USE_STUBS=true REACT_APP_MODE=local node scripts/start.js",
-"build": "LOCAL_PROPOSER=false USE_STUBS=false REACT_APP_MODE=staging PUBLIC_URL='https://nightfallv3-wallet.s3.eu-west-1.amazonaws.com' node scripts/build.js",
+"build": "LOCAL_PROPOSER=false USE_STUBS=false REACT_APP_MODE=production PUBLIC_URL='https://wallet-beta.polygon.technology/nightfall/' node scripts/build.js",
 "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'",
 "e2e-test": "npx synpress run --env TRANSACTIONS_PER_BLOCK=2"
@@ -138,13 +138,13 @@
 "eslint-plugin-import": "^2.26.0",
 "jest": "^26.6.0",
 "mocha": "^9.2.2",
-"react-error-overlay": "^6.0.9",
+"react-error-overlay": "6.0.9",
 "react-scripts": "4.0.3",
 "single-spa-react": "^4.6.1",
 "ts-node": "^10.7.0"
 },
 "resolutions": {
-"react-error-overlay": "^6.0.9"
+"react-error-overlay": "6.0.9"
 },
 "babel": {
 "presets": [

wallet/public/app_loader.js

@@ -51,7 +51,7 @@ function loadDemoApp() {
 };
 console.log('fetching asset manifest');
 return (
-fetch(`https://nightfallv3-wallet.s3.eu-west-1.amazonaws.com/asset-manifest.json`)
+fetch(`https://wallet-beta.polygon.technology/nightfall/asset-manifest.json`)
 .then(response => {
 return response.json();
 })

wallet/src/assets/lottie/syncing.json

@@ -0,0 +1 @@
+{"v":"4.8.0","meta":{"g":"LottieFiles AE ","a":"","k":"","d":"","tc":""},"fr":30,"ip":0,"op":150,"w":512,"h":512,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[256,362,0],"ix":2},"a":{"a":0,"k":[-0.5,-34,0],"ix":1},"s":{"a":0,"k":[100,18.269,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-0.5,-125],[-0.5,57]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.717647075653,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":34,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.049412001815,0.35867100136,0.741175991881,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":13,"s":[0]},{"t":16,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[256.5,256,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-0.5,-125],[-0.5,57]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.717647075653,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":34,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.049412001815,0.35867100136,0.741175991881,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.7],"y":[0.445]},"o":{"x":[0.523],"y":[0.081]},"t":3,"s":[0]},{"t":12,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.651],"y":[-0.002]},"t":0,"s":[360]},{"t":29,"s":[0]}],"ix":10},"p":{"a":0,"k":[256,255.999,0],"ix":2},"a":{"a":0,"k":[9.5,8.499,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[447,447],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[100]},{"t":29,"s":[0]}],"ix":1},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":146,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.717647075653,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":34,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[9.5,8.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":150,"st":0,"bm":0}],"markers":[]}

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

@@ -43,7 +43,12 @@ export function getContractAddress(contractName) {
 * @param {number} fee - the value of the transaction.
 * @returns {Promise} This will resolve into a transaction receipt
 */
-export async function submitTransaction(unsignedTransaction, contractAddress, fee) {
+export async function submitTransaction(
+unsignedTransaction,
+contractAddress,
+gasLimitOverride = 0,
+fee,
+) {
 const web3 = Web3.connection();
 const blockGasPrice = Number(await web3.eth.getGasPrice());
 const from = await Web3.getAccount();
@@ -55,12 +60,18 @@ export async function submitTransaction(unsignedTransaction, contractAddress, fe
 } catch (error) {
 console.log('Gas Estimation Failed: ', error);
 }
-// Estimate the gasLimit
-const gasLimit = await web3.eth.estimateGas({
-from,
-to: contractAddress,
-data: unsignedTransaction,
-});
+
+let gasLimit = 0;
+try {
+gasLimit = await web3.eth.estimateGas({
+from,
+to: contractAddress,
+data: unsignedTransaction,
+});
+} catch (error) {
+console.log('Gas Estimate Failed');
+gasLimit = gasLimitOverride;
+}
 
 const gasLimitWithBuffer = Math.ceil(Number(gasLimit) * 1.5); // 50% seems a more than reasonable buffer.
 // When submitTransaction is called is sets a state in the Shield contract.
@@ -72,11 +83,10 @@ export async function submitTransaction(unsignedTransaction, contractAddress, fe
 to: contractAddress,
 data: unsignedTransaction,
 gas: web3.utils.toHex(gasLimitWithBuffer),
-gasPrice: web3.utils.toHex(proposedGasPrice),
+gasPrice: web3.utils.toHex(proposedGasPrice * 1.2),
 };
 
 if (fee) tx.value = web3.utils.toHex(fee);
-
 return ethereum.request({
 method: 'eth_sendTransaction',
 params: [tx],

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

@@ -1,9 +1,17 @@
-// ignore unused exports default
+/* ignore unused exports */
 
 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/Assets/index.jsx

@@ -124,7 +124,7 @@ function ReceiveModal(props) {
 >
 <Modal.Header closeButton>
 <Header>
-<HeaderTitle>My QR Code</HeaderTitle>
+<HeaderTitle>Receive on Polygon Nightfall</HeaderTitle>
 </Header>
 </Modal.Header>
 <Modal.Body style={{ padding: '0px' }}>
@@ -170,7 +170,7 @@ export default function Assets({ tokenList }) {
 <div className="dasardTopSection">
 <div className="container">
 <div className="containerLeftSide">
-<div className="heading">Polygon Nightfall Staging</div>
+<div className="heading">Polygon Nightfall</div>
 <div className="amount">&#36;{total.toFixed(2)}</div>
 <div className="buttonsWrapper">
 <button type="button" onClick={() => setModalShow(true)}>
@@ -205,7 +205,7 @@ export default function Assets({ tokenList }) {
 }}
 id={tokenDepositId}
 >
-<span>Move funds from Goerli to Nightfall</span>
+<span>Move funds from Ethereum to Nightfall</span>
 </Link>
 </button>
 </div>