chore(bridge-ui-v2): pre-select destination chain (#14850)

Co-authored-by: David <david@taiko.xyz>

packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte

@@ -5,9 +5,9 @@
   import { routingContractsMap } from '$bridgeConfig';
   import { chainConfig } from '$chainConfig';
   import { FlatAlert } from '$components/Alert';
-  import ChainSelectorWrapper from '$components/Bridge/ChainSelectorWrapper.svelte';
   import { Button } from '$components/Button';
   import { Card } from '$components/Card';
+  import { ChainSelectorWrapper } from '$components/ChainSelector';
   import { successToast, warningToast } from '$components/NotificationToast';
   import { errorToast, infoToast } from '$components/NotificationToast/NotificationToast.svelte';
   import { OnAccount } from '$components/OnAccount';
@@ -327,7 +327,7 @@
 </script>
 
 {#if $activeBridge === BridgeTypes.FUNGIBLE}
-  <Card class="w-full md:w-[524px]" title={$t('bridge.title.default')} text={$t('bridge.description')}>
+  <Card class="w-full md:w-[524px]" title={$t('bridge.title.default')} text={$t('bridge.description.default')}>
     <div class="space-y-[30px]">
       <div class="f-between-center gap-4">
         <ChainSelectorWrapper />

packages/bridge-ui-v2/src/components/Bridge/ChainSelectorWrapper.svelte → packages/bridge-ui-v2/src/components/ChainSelector/ChainSelectorWrapper.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import { onMount } from 'svelte';
 
+  import { chainConfig } from '$chainConfig';
   import { destNetwork, destOptions } from '$components/Bridge/state';
   import SwitchChainsButton from '$components/Bridge/SwitchChainsButton.svelte';
   import { ChainSelector } from '$components/ChainSelector';
   import { OnNetwork } from '$components/OnNetwork';
   import { hasBridge } from '$libs/bridge/bridges';
-  import { chains } from '$libs/chain';
+  import { chainIdToChain, chains } from '$libs/chain';
   import { network } from '$stores/network';
 
   function handleSourceChange(): void {
@@ -28,8 +29,30 @@
 
   function onNetworkChange() {
     updateDestOptions();
+    const alternateChainID = getAlternateNetwork();
+    if (!$destNetwork && alternateChainID) {
+      // if only two chains are available, set the destination chain to the other one
+      $destNetwork = chainIdToChain(alternateChainID);
+    }
   }
 
+  const getAlternateNetwork = (): number | null => {
+    if (!$network?.id) {
+      return null;
+    }
+    const currentNetwork: number = Number($network.id);
+    const chainKeys: number[] = Object.keys(chainConfig).map(Number);
+
+    // only allow switching between two chains, if we have more we do not use this util
+    if (chainKeys.length !== 2) {
+      return null;
+    }
+
+    const alternateChainId = chainKeys.find((key) => key !== currentNetwork);
+    if (!alternateChainId) return null;
+    return alternateChainId;
+  };
+
   onMount(() => {
     updateDestOptions();
   });

packages/bridge-ui-v2/src/components/ChainSelector/index.ts

@@ -1 +1,2 @@
 export { default as ChainSelector } from './ChainSelector.svelte';
+export { default as ChainSelectorWrapper } from './ChainSelectorWrapper.svelte';

packages/bridge-ui-v2/src/libs/chain/chains.ts

@@ -20,6 +20,14 @@ function mapChainConfigToChain(chainId: string, chainConfig: ChainConfigMap[numb
   };
 }
 
+export const chainIdToChain = (chainId: number): Chain => {
+  const chain = chains.find((chain) => chain.id === chainId);
+  if (!chain) {
+    throw new Error(`Chain with id ${chainId} not found`);
+  }
+  return chain;
+};
+
 export const chains: Chain[] = Object.entries(chainConfig).map(([chainId, chainConfig]) =>
   mapChainConfigToChain(chainId, chainConfig),
 );