refactor: extract wallet and connection hooks

.eslintrc.js

@@ -14,8 +14,6 @@ module.exports = {
     'plugin:prettier/recommended', // prettier overrides
     'prettier/react',
     'plugin:jsx-a11y/recommended',
-    'plugin:import/errors',
-    'plugin:import/warnings',
     'plugin:promise/recommended',
   ],
   overrides: [
@@ -46,14 +44,8 @@ module.exports = {
         '@typescript-eslint/no-unused-vars': ['error'],
         'unicorn/no-useless-undefined': 0,
 
-        // I suggest this setting for requiring return types on functions only where useful
-        '@typescript-eslint/explicit-function-return-type': [
-          'warn',
-          {
-            allowExpressions: true,
-            allowConciseArrowFunctionExpressionsStartingWithVoid: true,
-          },
-        ],
+        '@typescript-eslint/explicit-function-return-type': 0,
+        '@typescript-eslint/explicit-module-boundary-types': 0,
 
         'prefer-const': 2,
         'arrow-body-style': [2, 'as-needed'],
@@ -81,18 +73,6 @@ module.exports = {
     'no-useless-concat': 2,
     'prefer-template': 2,
 
-    // import
-    'import/no-unresolved': 2,
-    'import/named': 2,
-    'import/default': 2,
-    'import/namespace': 2,
-    'import/no-named-as-default': 2,
-    'import/no-named-as-default-member': 2,
-    'import/no-extraneous-dependencies': 2,
-    'import/newline-after-import': 2,
-    'import/no-named-default': 2,
-    'import/no-useless-path-segments': 2,
-
     // unicorn
     'unicorn/no-fn-reference-in-iterator': 0, // Allows [].map(func)
     'unicorn/catch-error-name': [2, { name: 'error' }],

package.json

@@ -20,7 +20,6 @@
     "@typescript-eslint/parser": "^4.11.1",
     "eslint": "^7.17.0",
     "eslint-config-prettier": "^7.1.0",
-    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.3.0",
     "eslint-plugin-promise": "^4.2.1",
@@ -48,6 +47,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",
+    "react-use-sync": "0.0.8",
     "web-vitals": "^0.2.4",
     "web3-react": "^5.0.5"
   },

src/app.tsx

@@ -0,0 +1,59 @@
+import { PageContent, Input, Button, Stack, Card, Flex } from 'bumbag';
+import React, { useCallback } from 'react';
+import { useWallet } from './hooks';
+import useSocket from './hooks/socket';
+
+const App = (): JSX.Element => {
+  const { library, account, onConnectWallet, active } = useWallet();
+  const { connection } = useSocket({
+    onMessageReceived: useCallback(() => undefined, []),
+  });
+
+  const onRequestPay = useCallback(() => {
+    if (!library || !account || !connection) return;
+    (async () => {
+      try {
+        const signer = library.getSigner(account);
+        const signature = await signer.signMessage('👋');
+
+        connection.send(
+          JSON.stringify({
+            signature,
+            qrCode: 'Here it comes!',
+          })
+        );
+        console.info('Message sent');
+      } catch (error) {
+        console.error(
+          `Failure!${error && error.message ? `\n\n${error.message}` : ''}`
+        );
+      }
+    })();
+  }, [library, account, connection]);
+
+  return (
+    <PageContent>
+      <Card>
+        <Stack>
+          <Input placeholder="Enter your the QR code here." />
+          <Flex alignX="right">
+            {active ? (
+              library &&
+              account && (
+                <Button palette="primary" onClick={onRequestPay}>
+                  Pay
+                </Button>
+              )
+            ) : (
+              <Button palette="primary" onClick={onConnectWallet}>
+                Connect
+              </Button>
+            )}
+          </Flex>
+        </Stack>
+      </Card>
+    </PageContent>
+  );
+};
+
+export default App;

src/hooks/eager-connect.tsx

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+import { useWeb3React } from '@web3-react/core';
+import { injected } from '../connectors';
+
+export default function useEagerConnect(): boolean {
+  const { activate, active } = useWeb3React();
+
+  const [tried, setTried] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      if (tried) return;
+      try {
+        if (await injected.isAuthorized()) activate(injected, undefined, true);
+      } catch {
+        setTried(true);
+      }
+    })();
+  }, [activate, tried]);
+
+  // If the connection worked, wait until we get confirmation of that to flip the flag.
+  useEffect(() => {
+    if (!tried && active) setTried(true);
+  }, [tried, active]);
+
+  return tried;
+}

src/hooks/index.ts → src/hooks/inactive-listener.tsx

@@ -1,56 +1,27 @@
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useWeb3React } from '@web3-react/core';
-
 import { injected } from '../connectors';
 
-export function useEagerConnect() {
-  const { activate, active } = useWeb3React();
-
-  const [tried, setTried] = useState(false);
-
-  useEffect(() => {
-    injected.isAuthorized().then((isAuthorized: boolean) => {
-      if (isAuthorized) {
-        activate(injected, undefined, true).catch(() => {
-          setTried(true);
-        });
-      } else {
-        setTried(true);
-      }
-    });
-  }, []); // intentionally only running on mount (make sure it's only mounted once :))
-
-  // if the connection worked, wait until we get confirmation of that to flip the flag
-  useEffect(() => {
-    if (!tried && active) {
-      setTried(true);
-    }
-  }, [tried, active]);
-
-  return tried;
-}
-
-export function useInactiveListener(suppress: boolean = false) {
+export default function useInactiveListener(suppress = false): void {
   const { active, error, activate } = useWeb3React();
 
-  useEffect((): any => {
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const { ethereum } = window as any;
     if (ethereum && ethereum.on && !active && !error && !suppress) {
-      const handleConnect = () => {
+      const handleConnect = (): void => {
         console.log("Handling 'connect' event");
         activate(injected);
       };
-      const handleChainChanged = (chainId: string | number) => {
+      const handleChainChanged = (chainId: string | number): void => {
         console.log("Handling 'chainChanged' event with payload", chainId);
         activate(injected);
       };
-      const handleAccountsChanged = (accounts: string[]) => {
+      const handleAccountsChanged = (accounts: string[]): void => {
         console.log("Handling 'accountsChanged' event with payload", accounts);
-        if (accounts.length > 0) {
-          activate(injected);
-        }
+        if (accounts.length > 0) activate(injected);
       };
-      const handleNetworkChanged = (networkId: string | number) => {
+      const handleNetworkChanged = (networkId: string | number): void => {
         console.log("Handling 'networkChanged' event with payload", networkId);
         activate(injected);
       };

src/hooks/index.tsx

@@ -0,0 +1,3 @@
+export { default as useEagerConnect } from './eager-connect';
+export { default as useInactiveListener } from './inactive-listener';
+export { default as useWallet } from './wallet';