Configure chain type icon via env variables

gateway-fm · Oct 21, 2024 · acb2817 · acb2817
1 parent 525f1c7
commit acb2817
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 52 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -109,6 +109,9 @@ export const getChains = ({
     polygonZkEVM.bridgeContractAddress,
     polygonZkEVMProvider
   );
+  if (import.meta.env.VITE_CHAIN_ICON_PATH) {
+    polygonZkEVM.iconUrl = import.meta.env.VITE_CHAIN_ICON_PATH;
+  }
 
   return Promise.all([
     ethereumProvider.getNetwork().catch(() => Promise.reject(ProviderError.Ethereum)),
@@ -129,41 +132,41 @@ export const getChains = ({
       wethToken,
       metadata,
     ]) => [
-      {
-        bridgeContractAddress: ethereum.bridgeContractAddress,
-        chainId: ethereumNetwork.chainId,
-        explorerUrl: ethereum.explorerUrl,
-        Icon: EthChainIcon,
-        key: "ethereum",
-        name: getEthereumNetworkName(ethereumNetwork.chainId),
-        nativeCurrency: {
-          decimals: 18,
-          name: "Ether",
-          symbol: "ETH",
-          wrapped: { address: wethToken, chainId: polygonZkEVMNetwork.chainId },
+        {
+          bridgeContractAddress: ethereum.bridgeContractAddress,
+          chainId: ethereumNetwork.chainId,
+          explorerUrl: ethereum.explorerUrl,
+          Icon: EthChainIcon,
+          key: "ethereum",
+          name: getEthereumNetworkName(ethereumNetwork.chainId),
+          nativeCurrency: {
+            decimals: 18,
+            name: "Ether",
+            symbol: "ETH",
+            wrapped: { address: wethToken, chainId: polygonZkEVMNetwork.chainId },
+          },
+          networkId: 0,
+          poeContractAddress: ethereum.poeContractAddress,
+          provider: ethereumProvider,
+          rollupManagerAddress: ethereum.rollupManagerAddress,
         },
-        networkId: 0,
-        poeContractAddress: ethereum.poeContractAddress,
-        provider: ethereumProvider,
-        rollupManagerAddress: ethereum.rollupManagerAddress,
-      },
-      {
-        bridgeContractAddress: polygonZkEVM.bridgeContractAddress,
-        chainId: polygonZkEVMNetwork.chainId,
-        explorerUrl: polygonZkEVM.explorerUrl,
-        Icon: polygonZkEVM.iconUrl ? L2Icon(polygonZkEVM.iconUrl) : PolygonZkEVMChainIcon,
-        key: "polygon-zkevm",
-        name: polygonZkEVMNetworkName,
-        nativeCurrency: {
-          decimals: metadata.decimals,
-          name: metadata.name,
-          symbol: metadata.symbol,
-          wrapped: { address: gasToken, chainId: ethereumNetwork.chainId },
+        {
+          bridgeContractAddress: polygonZkEVM.bridgeContractAddress,
+          chainId: polygonZkEVMNetwork.chainId,
+          explorerUrl: polygonZkEVM.explorerUrl,
+          Icon: polygonZkEVM.iconUrl ? L2Icon(polygonZkEVM.iconUrl) : PolygonZkEVMChainIcon,
+          key: "polygon-zkevm",
+          name: polygonZkEVMNetworkName,
+          nativeCurrency: {
+            decimals: metadata.decimals,
+            name: metadata.name,
+            symbol: metadata.symbol,
+            wrapped: { address: gasToken, chainId: ethereumNetwork.chainId },
+          },
+          networkId: polygonZkEVM.networkId,
+          provider: polygonZkEVMProvider,
         },
-        networkId: polygonZkEVM.networkId,
-        provider: polygonZkEVMProvider,
-      },
-    ]
+      ]
   );
 };
 

diff --git a/src/views/bridge-details/components/chain/chain.tsx b/src/views/bridge-details/components/chain/chain.tsx
@@ -16,26 +16,23 @@ export const Chain: FC<ChainProps> = ({ chain, className }) => {
   const classes = useChainStyles();
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-  const chainIconUrl = import.meta.env.VITE_ICON_PATH;
+  const chainIconUrl = import.meta.env.VITE_CHAIN_ICON_PATH;
 
   const renderChainIcon = () => {
-    switch (chain.key) {
-      case "ethereum": {
-        return <EthChainIcon />;
-      }
-      case "polygon-zkevm": {
-        return <PolygonZkEVMChainIcon className={classes.chainIcon} />;
-      }
-      case "gpt": {
-        return <img alt="GPT" className={classes.chainIcon} src={GptIcon} />;
-      }
-      case "lumia": {
-        return <Lumia className={classes.chainIcon} />;
-      }
-      default: {
-        return null;
-      }
+    if (chain.key === "ethereum") {
+      return <EthChainIcon />;
     }
+    if (chainIconUrl) {
+      return (
+        <img
+          alt={chain.name}
+          className={classes.chainIcon}
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          src={chainIconUrl}
+        />
+      );
+    }
+    return <PolygonZkEVMChainIcon className={classes.chainIcon} />;
   };
 
   return (

diff --git a/src/views/home/components/bridge-form/bridge-form.view.tsx b/src/views/home/components/bridge-form/bridge-form.view.tsx
@@ -141,7 +141,7 @@ export const BridgeForm: FC<BridgeFormProps> = ({ account, formData, onResetForm
     // Load all the tokens for the selected chain without their balance
     if (selectedChains && defaultTokens) {
       const { from } = selectedChains;
-      const chainTokens = [ ...defaultTokens, ...getChainCustomTokens(from)];
+      const chainTokens = [...defaultTokens, ...getChainCustomTokens(from)];
 
       setTokens(
         chainTokens.map((token) => ({
@@ -268,7 +268,6 @@ export const BridgeForm: FC<BridgeFormProps> = ({ account, formData, onResetForm
       </div>
     );
   }
-
 
   const symbol = isWETH(token, selectedChains.from.key) ? "WETH" : token.symbol;
   return (