enable wallets based on runtime config (#144)

ChainSafe · Oct 12, 2021 · 8e5310d · 8e5310d
1 parent 4e78d9a
commit 8e5310d
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 10 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -30,7 +30,10 @@ if (
 
 const App: React.FC<{}> = () => {
   const {
-    __RUNTIME_CONFIG__: { UI: { wrapTokenPage = false } = {} },
+    __RUNTIME_CONFIG__: {
+      UI: { wrapTokenPage = false } = {},
+      CHAINBRIDGE: { chains },
+    },
   } = window;
   const tokens = chainbridgeConfig.chains
     .filter((c) => c.type === "Ethereum")
@@ -88,7 +91,7 @@ const App: React.FC<{}> = () => {
             gasPriceSetting="fast"
           >
             <NetworkManagerProvider>
-              <ChainbridgeProvider>
+              <ChainbridgeProvider chains={chains}>
                 <Router>
                   <AppWrapper wrapTokenPage={wrapTokenPage}>
                     <ChainbridgeRoutes wrapTokenPage={wrapTokenPage} />

diff --git a/src/Contexts/ChainbridgeContext.tsx b/src/Contexts/ChainbridgeContext.tsx
@@ -2,6 +2,8 @@ import React, { useCallback, useContext } from "react";
 import {
   BridgeConfig,
   chainbridgeConfig,
+  EvmBridgeConfig,
+  SubstrateBridgeConfig,
   TokenConfig,
 } from "../chainbridgeConfig";
 import { Tokens } from "@chainsafe/web3-context/dist/context/tokensReducer";
@@ -15,6 +17,7 @@ import NetworkSelectModal from "../Modules/NetworkSelectModal";
 
 interface IChainbridgeContextProps {
   children: React.ReactNode | React.ReactNode[];
+  chains?: Array<EvmBridgeConfig | SubstrateBridgeConfig>;
 }
 
 type ChainbridgeContext = {
@@ -52,13 +55,17 @@ type ChainbridgeContext = {
     tokenAddress: string,
     destinationChainId: number
   ) => Promise<boolean | undefined>;
+  chains?: Array<EvmBridgeConfig | SubstrateBridgeConfig>;
 };
 
 const ChainbridgeContext = React.createContext<ChainbridgeContext | undefined>(
   undefined
 );
 
-const ChainbridgeProvider = ({ children }: IChainbridgeContextProps) => {
+const ChainbridgeProvider = ({
+  children,
+  chains,
+}: IChainbridgeContextProps) => {
   const {
     handleSetHomeChain,
     destinationChainConfig,
@@ -167,8 +174,10 @@ const ChainbridgeProvider = ({ children }: IChainbridgeContextProps) => {
         address,
         chainId,
         checkSupplies,
+        chains,
       }}
     >
+      {/*TODO: we should remove this on refactor task. Context provider single responsibility is to provide share state */}
       <NetworkSelectModal />
       {children}
     </ChainbridgeContext.Provider>

diff --git a/src/Modules/NetworkSelectModal.tsx b/src/Modules/NetworkSelectModal.tsx
@@ -32,7 +32,7 @@ const useStyles = makeStyles(({ constants, palette, zIndex }: ITheme) => {
 
 const NetworkSelectModal = () => {
   const classes = useStyles();
-  const { isReady } = useChainbridge();
+  const { isReady, chains } = useChainbridge();
   const { walletType, setWalletType } = useNetworkManager();
 
   return (
@@ -50,12 +50,20 @@ const NetworkSelectModal = () => {
             Please select a wallet type
           </Typography>
           <section className={classes.buttons}>
-            <Button onClick={() => setWalletType("Ethereum")}>
-              Use Ethereum wallet
-            </Button>
-            <Button onClick={() => setWalletType("Substrate")}>
-              Use Substrate wallet
-            </Button>
+            {chains?.every((item) => item.type === "Ethereum") ? (
+              <Button onClick={() => setWalletType("Ethereum")}>
+                Use Ethereum wallet
+              </Button>
+            ) : (
+              <>
+                <Button onClick={() => setWalletType("Ethereum")}>
+                  Use Ethereum wallet
+                </Button>
+                <Button onClick={() => setWalletType("Substrate")}>
+                  Use Substrate wallet
+                </Button>
+              </>
+            )}
           </section>
         </>
       )}