feat: add token and tx hash forwarding

.env

@@ -1 +1,2 @@
-NEXT_PUBLIC_BACKEND_URL=localhost:3001/pay
+REACT_APP_BACKEND_URL=localhost:3001/pay
+REACT_APP_TARGET_WALLET=0xd84c2518d25c158777feef141354e8bbf3d73cdd

.eslintignore

@@ -1,3 +1,4 @@
 node_modules
 .next
-.vscode
+.vscode
+build

.eslintrc.js

@@ -41,7 +41,7 @@ module.exports = {
       rules: {
         // We will use TypeScript's types for component props instead
         'react/prop-types': 'off',
-        '@typescript-eslint/no-unused-vars': ['error'],
+        '@typescript-eslint/no-unused-vars': ['warn'],
         'unicorn/no-useless-undefined': 0,
 
         '@typescript-eslint/explicit-function-return-type': 0,
@@ -57,7 +57,7 @@ module.exports = {
         'no-useless-concat': 2,
         'prefer-template': 2,
 
-        'prettier/prettier': ['error', {}, { usePrettierrc: true }], // Includes .prettierrc.js rules
+        'prettier/prettier': ['warn', {}, { usePrettierrc: true }], // Includes .prettierrc.js rules
       },
     },
   ],
@@ -88,7 +88,7 @@ module.exports = {
     'react/destructuring-assignment': [2, 'always'],
 
     // hooks
-    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/rules-of-hooks': 'warn',
     'react-hooks/exhaustive-deps': 'warn',
   },
 };

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.eslintcache

.prettierignore

@@ -1,4 +1,9 @@
 node_modules
 .vscode
 package-lock.json
-package.json
+package.json
+build
+.env
+.eslintignore
+.gitignore
+.prettierignore

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "GENERATE_SOURCEMAP=false react-scripts build",
     "lint:eslint": "eslint --ext js,jsx,ts,tsx",
     "lint:eslint:fix": "eslint --ext js,jsx,ts,tsx --fix",
     "lint:prettier": "prettier --config .prettierrc.js . --check",
@@ -86,4 +86,4 @@
   "volta": {
     "node": "12.20.0"
   }
-}
+}

src/abis/erc20.json

@@ -0,0 +1,172 @@
+[
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "_owner",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "_spender",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "Approval",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "_from",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "_to",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "Transfer",
+    "type": "event"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_owner",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "_spender",
+        "type": "address"
+      }
+    ],
+    "name": "allowance",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "remaining",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_spender",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "approve",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "success",
+        "type": "bool"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_owner",
+        "type": "address"
+      }
+    ],
+    "name": "balanceOf",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "balance",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_to",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "transfer",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "success",
+        "type": "bool"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_from",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "_to",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "transferFrom",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "success",
+        "type": "bool"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  }
+]

src/app.tsx

@@ -1,38 +1,70 @@
 import { PageContent, Input, Button, Stack, Card, Flex } from 'bumbag';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
+import { ethers } from 'ethers';
 import { useWallet } from './hooks';
 import useSocket from './hooks/socket';
+import { ERC20Tokens } from './utils';
+import erc20Abi from './abis/erc20.json';
 
 const App = (): JSX.Element => {
-  const { library, account, onConnectWallet, active } = useWallet();
+  const {
+    account,
+    onConnectWallet,
+    active,
+    chainId,
+    uncheckedSigner,
+    library,
+  } = useWallet();
   const { connection } = useSocket({
     onMessageReceived: useCallback(() => undefined, []),
   });
 
+  const tokens = useMemo(() => chainId && ERC20Tokens[chainId], [chainId]);
+  const tokenContracts = useMemo(() => {
+    if (typeof chainId === 'undefined' || !uncheckedSigner || !tokens) return;
+    return Object.values(ERC20Tokens[chainId]).map(
+      ({ address }) => new ethers.Contract(address, erc20Abi, uncheckedSigner)
+    );
+  }, [chainId, tokens, uncheckedSigner]);
+
   const onRequestPay = useCallback(() => {
-    if (!library || !account || !connection) return;
+    if (
+      !uncheckedSigner ||
+      !account ||
+      !tokenContracts ||
+      !chainId ||
+      !tokens ||
+      !connection
+    )
+      return;
     (async () => {
       try {
-        const signer = library.getSigner(account);
-        const signature = await signer.signMessage('👋');
+        // For now, only one token is supported.
+        const tokenContract = tokenContracts[0];
+
+        console.info('requesting signature...');
+        const tx = await tokenContract.transfer(
+          process.env.REACT_APP_TARGET_WALLET,
+          1
+        );
 
         connection.send(
           JSON.stringify({
-            signature,
+            txHash: tx.hash,
             qrCode: 'Here it comes!',
           })
         );
-        console.info('Message sent');
       } catch (error) {
         console.error(
           `Failure!${error && error.message ? `\n\n${error.message}` : ''}`
         );
       }
     })();
-  }, [library, account, connection]);
+  }, [account, chainId, connection, tokenContracts, tokens, uncheckedSigner]);
 
   return (
     <PageContent>
+      {!tokens && 'Network not supported.'}
       <Card>
         <Stack>
           <Input placeholder="Enter your the QR code here." />

src/hooks/socket.tsx

@@ -15,9 +15,10 @@ export default function useSocket({
   const [error, setError] = useState<Event | undefined>();
 
   useEffect(() => {
+    if (error) return;
     console.info('Attempting to stablish connection...');
     const ws =
-      new window.WebSocket(`ws://${process.env.NEXT_PUBLIC_BACKEND_URL}`) || {};
+      new window.WebSocket(`ws://${process.env.REACT_APP_BACKEND_URL}`) || {};
 
     ws.addEventListener('open', () => {
       console.info(`Connection opened`);
@@ -44,7 +45,7 @@ export default function useSocket({
       setConnection(undefined);
       onConnectionClosed(event);
     });
-  }, [onConnectionClosed, onConnectionOpened, onMessageReceived]);
+  }, [error, onConnectionClosed, onConnectionOpened, onMessageReceived]);
 
   return {
     connection,