Abstrating Network provider logic

craco.config.js → craco.config.cjs

@@ -38,6 +38,16 @@ module.exports = {
           }),
         ],
       },
+      module: {
+        rules: [
+          ...webpackConfig.module.rules,
+          {
+            test: /\.mjs$/,
+            include: /node_modules/,
+            type: "javascript/auto",
+          },
+        ],
+      },
       devtool: "source-map",
     }),
   },

docker-compose-substrate.yml

@@ -0,0 +1,17 @@
+# Copyright 2020 ChainSafe Systems
+# SPDX-License-Identifier: LGPL-3.0-only
+
+version: "3"
+services:
+  geth1:
+    image: "chainsafe/chainbridge-geth:20200505131100-5586a65"
+    container_name: geth1
+    ports:
+      - "8545:8545"
+
+  sub-chain:
+    image: "chainsafe/chainbridge-substrate-chain:v1.3.0"
+    container_name: sub-chain
+    command: chainbridge-substrate-chain --dev --alice --ws-external --rpc-external
+    ports:
+      - "9944:9944"

package.json

@@ -6,13 +6,22 @@
     "@babel/core": "^7.12.3",
     "@babel/runtime": "^7.12.1",
     "@chainsafe/chainbridge-contracts": "1.0.5",
-    "@chainsafe/web3-context": "1.2.0",
     "@chainsafe/common-components": "1.0.26",
+    "@chainsafe/web3-context": "1.2.0",
     "@chainsafe/common-theme": "1.0.10",
     "@material-ui/styles": "4.10.0",
+    "@polkadot/api": "3.11.1",
+    "@polkadot/extension-dapp": "0.37.1",
+    "@polkadot/keyring": "5.6.3",
+    "@polkadot/networks": "5.6.3",
+    "@polkadot/types": "3.9.3",
+    "@polkadot/ui-keyring": "0.69.1",
+    "@polkadot/ui-settings": "0.69.1",
+    "@polkadot/util": "5.6.3",
+    "@polkadot/util-crypto": "5.6.3",
     "@sentry/react": "^5.26.0",
     "@types/history": "^4.7.8",
-    "bnc-onboard": "1.19.2",
+    "bnc-onboard": "1.26.1",
     "clsx": "^1.1.1",
     "dayjs": "^1.9.1",
     "ethers": "5.0.32",
@@ -25,6 +34,7 @@
     "yup": "^0.29.3"
   },
   "devDependencies": {
+    "@polkadot/typegen": "^4.11.2",
     "@sentry/cli": "1.58.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.0.4",
@@ -52,8 +62,10 @@
     "clean:dist": "rm -rf ./*/**/dist && rm -rf ./*/**/build && rm -rf ./*/**/storybook-static",
     "clean": "yarn clean:dependencies && yarn clean:dist",
     "prettier": "prettier --config .prettierrc 'packages/**/src/**/*.{ts,tsx,js,jsx,md}' --write",
-    "start:tunnel": "./ngrok http https://localhost:3000"
+    "start:tunnel": "./ngrok http https://localhost:3000",
+    "start:substrate": "docker-compose -f ./docker-compose-substrate.yml up -V"
   },
+  "cracoConfig": "./craco.config.cjs",
   "eslintConfig": {
     "extends": "react-app"
   },

relayer-config.json

@@ -0,0 +1,27 @@
+{
+  "chains": [
+    {
+      "name": "eth",
+      "type": "ethereum",
+      "id": "0",
+      "endpoint": "ws://localhost:8545",
+      "from": "0xff93B45308FD417dF303D6515aB04D9e89a750Ca",
+      "opts": {
+        "bridge": "0x62877dDCd49aD22f5eDfc6ac108e9a4b5D2bD88B",
+        "erc20Handler": "0x3167776db165D8eA0f51790CA2bbf44Db5105ADF",
+        "erc721Handler": "0x3f709398808af36ADBA86ACC617FeB7F5B7B193E",
+        "genericHandler": "0x2B6Ab4b880A45a07d83Cf4d664Df4Ab85705Bc07",
+        "gasLimit": "1000000",
+        "maxGasPrice": "20000000"
+      }
+    },
+    {
+      "name": "sub",
+      "type": "substrate",
+      "id": "1",
+      "endpoint": "ws://localhost:9944",
+      "from": "5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY",
+      "opts": {}
+    }
+  ]
+}

src/App.tsx

@@ -11,8 +11,9 @@ import Routes from "./Components/Routes";
 import { lightTheme } from "./Themes/LightTheme";
 import { ChainbridgeProvider } from "./Contexts/ChainbridgeContext";
 import AppWrapper from "./Layouts/AppWrapper";
-import { Web3Provider } from "@chainsafe/web3-context";
+import { NetworkManagerProvider } from "./Contexts/NetworkManagerContext";
 import { chainbridgeConfig } from "./chainbridgeConfig";
+import { Web3Provider } from "@chainsafe/web3-context";
 import { utils } from "ethers";
 import "@chainsafe/common-theme/dist/font-faces.css";
 
@@ -29,11 +30,16 @@ if (
 
 const App: React.FC<{}> = () => {
   const tokens = chainbridgeConfig.chains.reduce((tca, bc) => {
-    return {
-      ...tca,
-      [bc.networkId]: bc.tokens,
-    };
+    if (bc.networkId) {
+      return {
+        ...tca,
+        [bc.networkId]: bc.tokens,
+      };
+    } else {
+      return tca;
+    }
   }, {});
+
   return (
     <ErrorBoundary
       fallback={({ error, componentStack, eventId, resetError }) => (
@@ -59,28 +65,32 @@ const App: React.FC<{}> = () => {
         <ToasterProvider autoDismiss>
           <Web3Provider
             tokensToWatch={tokens}
+            networkIds={[5]}
             onboardConfig={{
               dappId: process.env.REACT_APP_BLOCKNATIVE_DAPP_ID,
               walletSelect: {
                 wallets: [{ walletName: "metamask", preferred: true }],
               },
               subscriptions: {
-                network: (network) => console.log("chainId: ", network),
+                network: (network) =>
+                  network && console.log("chainId: ", network),
                 balance: (amount) =>
-                  console.log("balance: ", utils.formatEther(amount)),
+                  amount && console.log("balance: ", utils.formatEther(amount)),
               },
             }}
             checkNetwork={false}
             gasPricePollingInterval={120}
             gasPriceSetting="fast"
           >
-            <ChainbridgeProvider>
-              <Router>
-                <AppWrapper>
-                  <Routes />
-                </AppWrapper>
-              </Router>
-            </ChainbridgeProvider>
+            <NetworkManagerProvider>
+              <ChainbridgeProvider>
+                <Router>
+                  <AppWrapper>
+                    <Routes />
+                  </AppWrapper>
+                </Router>
+              </ChainbridgeProvider>
+            </NetworkManagerProvider>
           </Web3Provider>
         </ToasterProvider>
       </ThemeSwitcher>

src/Components/Custom/AddressInput.tsx

@@ -30,6 +30,7 @@ interface IAddressInput extends FormikTextInputProps {
   classNames?: {
     input?: string;
   };
+  sendToSameAccountHelper?: boolean;
 }
 
 const AddressInput: React.FC<IAddressInput> = ({
@@ -44,6 +45,7 @@ const AddressInput: React.FC<IAddressInput> = ({
   label,
   labelClassName,
   captionMessage,
+  sendToSameAccountHelper = false,
   ...rest
 }: IAddressInput) => {
   const classes = useStyles();
@@ -83,13 +85,15 @@ const AddressInput: React.FC<IAddressInput> = ({
           disabled={stored !== undefined}
         />
       </div>
-      <div className={classes.checkbox}>
-        <CheckboxInput
-          label="I want to send funds to my address"
-          value={stored !== undefined}
-          onChange={() => toggleReceiver()}
-        />
-      </div>
+      {sendToSameAccountHelper && (
+        <div className={classes.checkbox}>
+          <CheckboxInput
+            label="I want to send funds to my address"
+            value={stored !== undefined}
+            onChange={() => toggleReceiver()}
+          />
+        </div>
+      )}
     </section>
   );
 };

src/Components/Custom/TokenSelectInput.tsx

@@ -19,7 +19,7 @@ const TokenSelectInput: React.FC<ITokenSelectInput> = ({
   sync,
   ...rest
 }: ITokenSelectInput) => {
-  const [field] = useField(name);
+  const [field, , helpers] = useField(name);
   const labelParsed = tokens[field.value]
     ? `${label} ${tokens[field.value]?.balance} ${tokens[field.value]?.symbol}`
     : "Please select token";
@@ -35,6 +35,13 @@ const TokenSelectInput: React.FC<ITokenSelectInput> = ({
     // eslint-disable-next-line
   }, [field]);
 
+  useEffect(() => {
+    // If there is only one token, auto select
+    if (Object.keys(tokens).length === 1 && field.value === "") {
+      helpers.setValue(Object.keys(tokens)[0]);
+    }
+  }, [tokens, helpers, field.value]);
+
   return (
     <FormikSelectInput
       name={name}