Abstrating Network provider logic

README.md

@@ -37,23 +37,28 @@ For running a local instance use the command:
 yarn start
 ```
 
+The codebase is configured to be run against the Geth <> Substrate node that can be set up by following the guide [here](https://chainbridge.chainsafe.io/local/) or executing:
+
+- `yarn start:substrate` to start,
+- `yarn setup:example` to initialize
+
+Should the substrate chain you are targetting require different type definitions, these can be updated in [ChainbridgeAPI.tsx](`src/Contexts/Adaptors/SubstrateApis/ChainbridgeAPI.tsx`)
+
 ### Build
 
 Update the configs for the bridge in `src/chainbridgeContext.ts`. There should be at least 2 chains configured for correct functioning of the bridge. Each chain accepts the following configuration parameters:
 
 ```
-type BridgeConfig = {
-  chainId: number // The bridge's chainId.
-  networkId: number // The networkId of this chain.
-  name: string // The human readable name of this chain.
-  bridgeAddress: string // The address on the brdige contract deployed on this chain.
-  erc20HandlerAddress: string // The ERC20 handler address.
-  rpcUrl: string // An RPC URL for this chain.
-  type: "Ethereum" | "Substrate" // The type of chain.
-  tokens: TokenConfig[] // An object to configure the tokens this bridge can transfer. See the TokenConfig object below.
-  nativeTokenSymbol: string // The native token symbol of this chain.
-  blockExplorer?: string //This should be the full path to display a tx hash, without the trailing slash, ie. https://etherscan.io/tx
-}
+export type BridgeConfig = {
+  networkId?: number; // The networkId of this chain.
+  chainId: number; // The bridge's chainId.
+  name: string; // The human readable name of this chain.
+  rpcUrl: string; // An RPC URL for this chain.
+  type: ChainType; // The type of chain.
+  tokens: TokenConfig[]; // An object to configure the tokens (see below)
+  nativeTokenSymbol: string; // The native token symbol of this chain.
+  decimals: number;
+};
 ```
 
 ```
@@ -67,6 +72,32 @@ type TokenConfig = {
 };
 ```
 
+EVM Chains should additionally be configured with the following params
+
+```
+export type EvmBridgeConfig = BridgeConfig & {
+  bridgeAddress: string;
+  erc20HandlerAddress: string;
+  type: "Ethereum";
+  nativeTokenSymbol: string;
+  // This should be the full path to display a tx hash, without the trailing slash, ie. https://etherscan.io/tx
+  blockExplorer?: string;
+  defaultGasPrice?: number;
+  deployedBlockNumber?: number;
+};
+```
+
+Substrate chains should be configured with the following
+
+```
+export type SubstrateBridgeConfig = BridgeConfig & {
+  type: "Substrate";
+  chainbridgePalletName: string; // The name of the chainbridge palette
+  transferPalletName: string; // The name of the pallet that should initiate transfers
+  typesFileName: string; // The name of the Substrate types file. The file should be located in `src/Contexts/Adaptors/SubstrateApis`
+};
+```
+
 Run `yarn build`.
 
 Deploy the contents of the `/build` folder to any static website host (eg. S3, Azure storage) or IPFS.

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-centrifuge.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: "centrifugeio/centrifuge-chain:20201204140308-0809a17"
+    container_name: sub-chain
+    command: centrifuge-chain --dev --alice --ws-external --rpc-external
+    ports:
+      - "9944:9944"

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/common-theme": "1.0.10",
+    "@chainsafe/web3-context": "1.2.0",
     "@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,13 @@
     "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",
+    "start:centrifuge": "docker-compose -f ./docker-compose-centrifuge.yml up -V",
+    "setup:example": "./scripts/setup-eth-example.sh && node --experimental-json-modules ./scripts/setup-sub-example.mjs",
+    "setup:centrifuge": "./scrips/setup-eth-centrifuge.sh"
   },
+  "cracoConfig": "./craco.config.cjs",
   "eslintConfig": {
     "extends": "react-app"
   },

relayer-config.json

@@ -0,0 +1,29 @@
+{
+  "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": {
+        "useExtendedCall": "true"
+      }
+    }
+  ]
+}

scripts/bridgeTypes.json

@@ -0,0 +1,18 @@
+{
+  "chainbridge::ChainId": "u8",
+  "ChainId": "u8",
+  "ResourceId": "[u8; 32]",
+  "DepositNonce": "u64",
+  "ProposalVotes": {
+    "votes_for": "Vec<AccountId>",
+    "votes_against": "Vec<AccountId>",
+    "status": "enum"
+  },
+  "Erc721Token": {
+    "id": "TokenId",
+    "metadata": "Vec<u8>"
+  },
+  "TokenId": "U256",
+  "Address": "AccountId",
+  "LookupSource": "AccountId"
+}

scripts/setup-eth-centrifuge.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+
+cb-sol-cli deploy --all --relayerThreshold 1
+cb-sol-cli bridge register-resource --resourceId "0x00000000000000000000000000000009e974040e705c10fb4de576d6cc261900" --targetContract "0x21605f71845f372A9ed84253d2D024B7B10999f4"
+cb-sol-cli bridge set-burn --tokenContract "0x21605f71845f372A9ed84253d2D024B7B10999f4"
+cb-sol-cli erc20 add-minter --minter "0x3167776db165D8eA0f51790CA2bbf44Db5105ADF"

scripts/setup-eth-example.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+
+cb-sol-cli deploy --all --relayerThreshold 1
+cb-sol-cli bridge register-resource --resourceId "0x000000000000000000000000000000c76ebe4a02bbc34786d860b355f5a5ce00" --targetContract "0x21605f71845f372A9ed84253d2D024B7B10999f4"
+cb-sol-cli bridge set-burn --tokenContract "0x21605f71845f372A9ed84253d2D024B7B10999f4"
+cb-sol-cli erc20 add-minter --minter "0x3167776db165D8eA0f51790CA2bbf44Db5105ADF"

scripts/setup-sub-example.mjs

@@ -0,0 +1,38 @@
+import { ApiPromise, WsProvider, Keyring } from "@polkadot/api";
+import types from "./bridgeTypes.json";
+
+const keyring = new Keyring({ type: "sr25519" });
+const wsProvider = new WsProvider("ws://127.0.0.1:9944");
+const api = await ApiPromise.create({ provider: wsProvider, types: types });
+const ALICE = keyring.addFromUri("//Alice");
+
+const addRelayer = (relayer) => {
+  return api.tx.sudo.sudo(api.tx.chainBridge.addRelayer(relayer));
+};
+
+const whitelistChain = (chainId) => {
+  return api.tx.sudo.sudo(api.tx.chainBridge.whitelistChain(chainId));
+};
+
+const registerResource = (rId, method) => {
+  return api.tx.sudo.sudo(api.tx.chainBridge.setResource(rId, method));
+};
+
+(async function () {
+  let nonce = await api.rpc.system.accountNextIndex(ALICE.address);
+  let txHash = await addRelayer(ALICE.address).signAndSend(ALICE, { nonce });
+  console.log(`Added relayer ALICE in tx ${txHash}`);
+
+  nonce = await api.rpc.system.accountNextIndex(ALICE.address);
+  txHash = await whitelistChain(0).signAndSend(ALICE, { nonce });
+  console.log(`Whitelisted chain 0 in tx ${txHash}`);
+
+  nonce = await api.rpc.system.accountNextIndex(ALICE.address);
+  txHash = await registerResource(
+    "0x000000000000000000000000000000c76ebe4a02bbc34786d860b355f5a5ce00",
+    "0x4578616d706c652e7472616e73666572"
+  ).signAndSend(ALICE, { nonce });
+  console.log(`Registered resource in tx ${txHash}`);
+
+  await api.disconnect();
+})();

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";
 
@@ -28,12 +29,19 @@ if (
 }
 
 const App: React.FC<{}> = () => {
-  const tokens = chainbridgeConfig.chains.reduce((tca, bc) => {
-    return {
-      ...tca,
-      [bc.networkId]: bc.tokens,
-    };
-  }, {});
+  const tokens = chainbridgeConfig.chains
+    .filter((c) => c.type === "Ethereum")
+    .reduce((tca, bc: any) => {
+      if (bc.networkId) {
+        return {
+          ...tca,
+          [bc.networkId]: bc.tokens,
+        };
+      } else {
+        return tca;
+      }
+    }, {});
+
   return (
     <ErrorBoundary
       fallback={({ error, componentStack, eventId, resetError }) => (
@@ -59,28 +67,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>
   );
 };