From d6ef79eae0836a9dabd481cd0953bc03eea9bf7a Mon Sep 17 00:00:00 2001
From: Korbinian <KorbinianK@users.noreply.github.com>
Date: Wed, 6 Mar 2024 13:58:43 +0100
Subject: [PATCH] fix(bridge-ui)!: walletconnect not allowing to switch to
 unconfigured chains (#16324)

---
 .../schemas/configuredChains.schema.json      | 52 ++++++++++++++++---
 .../ReviewStep/ReviewStep.svelte              |  2 +-
 .../ConfirmationStep/ConfirmationStep.svelte  |  4 +-
 .../src/components/Faucet/Faucet.svelte       |  3 +-
 .../src/components/NFTs/NFTInfoDialog.svelte  |  4 +-
 .../SideNavigation/SideNavigation.svelte      |  2 +-
 .../Transactions/MobileDetailsDialog.svelte   |  6 +--
 .../Transactions/Status/Status.svelte         |  4 +-
 .../Transactions/Transaction.svelte           |  4 +-
 packages/bridge-ui/src/libs/chain/chains.ts   | 18 +++----
 packages/bridge-ui/src/libs/chain/types.ts    | 11 ++--
 11 files changed, 68 insertions(+), 42 deletions(-)

diff --git a/packages/bridge-ui/config/schemas/configuredChains.schema.json b/packages/bridge-ui/config/schemas/configuredChains.schema.json
index 2ba1ebaa98..8f68b41d05 100644
--- a/packages/bridge-ui/config/schemas/configuredChains.schema.json
+++ b/packages/bridge-ui/config/schemas/configuredChains.schema.json
@@ -5,9 +5,6 @@
       "type": "array",
       "items": {
         "type": "object",
-        "propertyNames": {
-          "pattern": "^[0-9]+$"
-        },
         "additionalProperties": {
           "type": "object",
           "properties": {
@@ -20,20 +17,59 @@
             "type": {
               "type": "string"
             },
-            "urls": {
+            "rpcUrls": {
               "type": "object",
               "properties": {
-                "rpc": {
+                "default": {
+                  "type": "object",
+                  "properties": {
+                    "http": {
+                      "type": "array",
+                      "items": {
+                        "type": "string"
+                      }
+                    }
+                  },
+                  "required": ["http"]
+                }
+              },
+              "required": ["default"]
+            },
+            "nativeCurrency": {
+              "type": "object",
+              "properties": {
+                "name": {
                   "type": "string"
                 },
-                "explorer": {
+                "symbol": {
                   "type": "string"
+                },
+                "decimals": {
+                  "type": "integer"
+                }
+              },
+              "required": ["name", "symbol", "decimals"]
+            },
+            "blockExplorers": {
+              "type": "object",
+              "properties": {
+                "default": {
+                  "type": "object",
+                  "properties": {
+                    "name": {
+                      "type": "string"
+                    },
+                    "url": {
+                      "type": "string"
+                    }
+                  },
+                  "required": ["name", "url"]
                 }
               },
-              "required": ["rpc", "explorer"]
+              "required": ["default"]
             }
           },
-          "required": ["name", "icon", "type", "urls"]
+          "required": ["name", "icon", "type", "rpcUrls", "nativeCurrency", "blockExplorers"]
         }
       }
     }
diff --git a/packages/bridge-ui/src/components/Bridge/NFTBridgeComponents/ReviewStep/ReviewStep.svelte b/packages/bridge-ui/src/components/Bridge/NFTBridgeComponents/ReviewStep/ReviewStep.svelte
index 4d76c7d378..11c015072c 100644
--- a/packages/bridge-ui/src/components/Bridge/NFTBridgeComponents/ReviewStep/ReviewStep.svelte
+++ b/packages/bridge-ui/src/components/Bridge/NFTBridgeComponents/ReviewStep/ReviewStep.svelte
@@ -97,7 +97,7 @@
               <li>
                 <a
                   class="flex justify-start link"
-                  href={`${chainConfig[currentChain].urls.explorer}/token/${nft.addresses[currentChain]}`}
+                  href={`${chainConfig[currentChain]?.blockExplorers?.default.url}/token/${nft.addresses[currentChain]}`}
                   target="_blank">
                   {shortenAddress(nft.addresses[currentChain], 8, 12)}
                   <!-- <Icon type="arrow-top-right" fillClass="fill-primary-link" /> -->
diff --git a/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/ConfirmationStep/ConfirmationStep.svelte b/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/ConfirmationStep/ConfirmationStep.svelte
index af4861ff73..47fc46f83f 100644
--- a/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/ConfirmationStep/ConfirmationStep.svelte
+++ b/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/ConfirmationStep/ConfirmationStep.svelte
@@ -58,7 +58,7 @@
     const userAccount = $account?.address;
     if (!currentChain || !destinationChain || !userAccount) return; //TODO error handling
 
-    const explorer = chainConfig[currentChain].urls.explorer;
+    const explorer = chainConfig[currentChain]?.blockExplorers?.default.url;
 
     await pendingTransactions.add(txHash, currentChain);
 
@@ -92,7 +92,7 @@
     const userAccount = $account?.address;
     if (!currentChain || !destinationChain || !userAccount || !$selectedToken) return; //TODO error handling
 
-    const { explorer } = chainConfig[currentChain].urls;
+    const explorer = chainConfig[currentChain]?.blockExplorers?.default.url;
 
     infoToast({
       title: $t('bridge.actions.approve.tx.title'),
diff --git a/packages/bridge-ui/src/components/Faucet/Faucet.svelte b/packages/bridge-ui/src/components/Faucet/Faucet.svelte
index a1e5f9c0d0..3813303ad5 100644
--- a/packages/bridge-ui/src/components/Faucet/Faucet.svelte
+++ b/packages/bridge-ui/src/components/Faucet/Faucet.svelte
@@ -64,7 +64,8 @@
 
     try {
       const txHash = await mint(selectedToken, $connectedSourceChain.id);
-      const explorer = chainConfig[$connectedSourceChain.id].urls.explorer;
+
+      const explorer = chainConfig[$connectedSourceChain.id]?.blockExplorers?.default.url;
 
       infoToast({
         title: $t('faucet.mint.tx.title'),
diff --git a/packages/bridge-ui/src/components/NFTs/NFTInfoDialog.svelte b/packages/bridge-ui/src/components/NFTs/NFTInfoDialog.svelte
index 850a7e1b02..668e817aba 100644
--- a/packages/bridge-ui/src/components/NFTs/NFTInfoDialog.svelte
+++ b/packages/bridge-ui/src/components/NFTs/NFTInfoDialog.svelte
@@ -119,7 +119,7 @@
             {:else if canonicalChain && canonicalAddress}
               <a
                 class="flex justify-start link"
-                href={`${chainConfig[canonicalChain].urls.explorer}/token/${canonicalAddress}`}
+                href={`${chainConfig[canonicalChain]?.blockExplorers?.default.url}/token/${canonicalAddress}`}
                 target="_blank">
                 {shortenAddress(canonicalAddress, 6, 8)}
                 <Icon type="arrow-top-right" fillClass="fill-primary-link" />
@@ -138,7 +138,7 @@
               {#if bridgedChain && bridgedAddress}
                 <a
                   class="flex justify-start link"
-                  href={`${chainConfig[bridgedChain].urls.explorer}/token/${bridgedAddress}`}
+                  href={`${chainConfig[bridgedChain]?.blockExplorers?.default.url}/token/${bridgedAddress}`}
                   target="_blank">
                   {shortenAddress(bridgedAddress, 6, 8)}
                   <Icon type="arrow-top-right" fillClass="fill-primary-link" />
diff --git a/packages/bridge-ui/src/components/SideNavigation/SideNavigation.svelte b/packages/bridge-ui/src/components/SideNavigation/SideNavigation.svelte
index a36f9a7198..b8ab88500b 100644
--- a/packages/bridge-ui/src/components/SideNavigation/SideNavigation.svelte
+++ b/packages/bridge-ui/src/components/SideNavigation/SideNavigation.svelte
@@ -105,7 +105,7 @@
             <li>
               <LinkButton
                 href={$connectedSourceChain
-                  ? chainConfig[$connectedSourceChain.id].urls.explorer
+                  ? chainConfig[$connectedSourceChain.id]?.blockExplorers?.default.url
                   : PUBLIC_DEFAULT_EXPLORER}
                 external>
                 <Icon type="explorer" />
diff --git a/packages/bridge-ui/src/components/Transactions/MobileDetailsDialog.svelte b/packages/bridge-ui/src/components/Transactions/MobileDetailsDialog.svelte
index 140187ed98..74eaafa5ed 100644
--- a/packages/bridge-ui/src/components/Transactions/MobileDetailsDialog.svelte
+++ b/packages/bridge-ui/src/components/Transactions/MobileDetailsDialog.svelte
@@ -144,7 +144,7 @@
                 <div class="f-row min-w-1/2 text-primary-content">
                   <a
                     class="flex justify-start link"
-                    href={`${chainConfig[canonicalChain].urls.explorer}/token/${canonicalAddress}`}
+                    href={`${chainConfig[canonicalChain]?.blockExplorers?.default.url}/token/${canonicalAddress}`}
                     target="_blank">
                     {shortenAddress(canonicalAddress, 6, 8)}
                   </a>
@@ -162,7 +162,7 @@
                   {#if bridgedChain && bridgedAddress}
                     <a
                       class="flex justify-start link"
-                      href={`${chainConfig[bridgedChain].urls.explorer}/token/${bridgedAddress}`}
+                      href={`${chainConfig[bridgedChain]?.blockExplorers?.default.url}/token/${bridgedAddress}`}
                       target="_blank">
                       {shortenAddress(bridgedAddress, 6, 8)}
                       <Icon type="arrow-top-right" fillClass="fill-primary-link" />
@@ -195,7 +195,7 @@
             <h4 class="text-secondary-content">{$t('transactions.header.explorer')}</h4>
             <a
               class="flex justify-start content-center link"
-              href={`${chainConfig[Number(selectedItem.srcChainId)].urls.explorer}/tx/${selectedItem.hash}`}
+              href={`${chainConfig[Number(selectedItem.srcChainId)]?.blockExplorers?.default.url}/tx/${selectedItem.hash}`}
               target="_blank">
               {$t('transactions.link.explorer')}
               <Icon type="arrow-top-right" />
diff --git a/packages/bridge-ui/src/components/Transactions/Status/Status.svelte b/packages/bridge-ui/src/components/Transactions/Status/Status.svelte
index 4708148b5b..72d04eb114 100644
--- a/packages/bridge-ui/src/components/Transactions/Status/Status.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Status/Status.svelte
@@ -112,7 +112,7 @@
       // Step 5: Call claim() method on the bridge
       const txHash = await bridge.claim({ msgHash, message, wallet });
 
-      const { explorer } = chainConfig[Number(bridgeTx.destChainId)].urls;
+      const explorer = chainConfig[Number(bridgeTx.destChainId)]?.blockExplorers?.default.url;
 
       infoToast({
         title: $t('transactions.actions.claim.tx.title'),
@@ -202,7 +202,7 @@
       // Step 4: Call release() method on the bridge
       const txHash = await bridge.release({ msgHash, message, wallet });
 
-      const { explorer } = chainConfig[Number(bridgeTx.srcChainId)].urls;
+      const explorer = chainConfig[Number(bridgeTx.srcChainId)]?.blockExplorers?.default.url;
 
       infoToast({
         title: $t('transactions.actions.release.tx.title'),
diff --git a/packages/bridge-ui/src/components/Transactions/Transaction.svelte b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
index ee913e7dd6..b7b7965c3b 100644
--- a/packages/bridge-ui/src/components/Transactions/Transaction.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
@@ -182,7 +182,7 @@
     <div class="hidden md:flex grow py-2 flex flex-col justify-center">
       <a
         class="flex justify-center py-3 link"
-        href={`${chainConfig[Number(item.srcChainId)].urls.explorer}/tx/${item.hash}`}
+        href={`${chainConfig[Number(item.srcChainId)]?.blockExplorers?.default.url}/tx/${item.hash}`}
         target="_blank">
         {$t('transactions.link.explorer')}
         <Icon type="arrow-top-right" fillClass="fill-primary-link" />
@@ -245,7 +245,7 @@
     <div class="hidden md:flex w-1/5 py-2 flex flex-col justify-center">
       <a
         class="flex justify-start py-3 link"
-        href={`${chainConfig[Number(item.srcChainId)].urls.explorer}/tx/${item.hash}`}
+        href={`${chainConfig[Number(item.srcChainId)]?.blockExplorers?.default.url}/tx/${item.hash}`}
         target="_blank">
         {$t('transactions.link.explorer')}
         <Icon type="arrow-top-right" fillClass="fill-primary-link" />
diff --git a/packages/bridge-ui/src/libs/chain/chains.ts b/packages/bridge-ui/src/libs/chain/chains.ts
index 8ccbbfed0b..5eb8523478 100644
--- a/packages/bridge-ui/src/libs/chain/chains.ts
+++ b/packages/bridge-ui/src/libs/chain/chains.ts
@@ -1,22 +1,16 @@
 import type { Chain } from 'viem';
 
 import { chainConfig } from '$chainConfig';
-import type { ChainConfigMap } from '$libs/chain';
+import type { ChainConfig } from '$libs/chain';
 
-function mapChainConfigToChain(chainId: string, chainConfig: ChainConfigMap[number]): Chain {
+function mapChainConfigToChain(chainId: string, chainConfig: ChainConfig): Chain {
   return {
     id: Number(chainId),
     name: chainConfig.name,
-    nativeCurrency: {
-      name: 'ETH',
-      symbol: 'ETH',
-      decimals: 18,
-    },
-    rpcUrls: {
-      public: { http: [chainConfig.urls.rpc] },
-      default: { http: [chainConfig.urls.rpc] },
-    },
-  } as const satisfies Chain;
+    rpcUrls: chainConfig.rpcUrls,
+    nativeCurrency: chainConfig.nativeCurrency,
+    blockExplorers: chainConfig.blockExplorers,
+  };
 }
 
 export const chainIdToChain = (chainId: number): Chain => {
diff --git a/packages/bridge-ui/src/libs/chain/types.ts b/packages/bridge-ui/src/libs/chain/types.ts
index 86cf20409a..d5d2d1bba3 100644
--- a/packages/bridge-ui/src/libs/chain/types.ts
+++ b/packages/bridge-ui/src/libs/chain/types.ts
@@ -1,3 +1,5 @@
+import type { Chain } from 'viem';
+
 export type ChainID = bigint;
 
 export enum LayerType {
@@ -6,14 +8,7 @@ export enum LayerType {
   L3 = 'L3',
 }
 
-export type Urls = {
-  rpc: string;
-  explorer: string;
-};
-
-export type ChainConfig = {
-  name: string;
-  urls: Urls;
+export type ChainConfig = Omit<Chain, 'id'> & {
   icon: string;
   type: LayerType;
 };