From e900dd937b98e8636ef2bf37b55a2e7f04844112 Mon Sep 17 00:00:00 2001
From: Korbinian <KorbinianK@users.noreply.github.com>
Date: Fri, 29 Sep 2023 23:14:11 +0200
Subject: [PATCH] chore(bridge-ui-v2): pre-select destination chain (#14850)

Co-authored-by: David <david@taiko.xyz>
---
 .../src/components/Bridge/Bridge.svelte       |  2 +-
 .../ChainSelectorWrapper.svelte               | 25 ++++++++++++++++++-
 .../src/components/ChainSelector/index.ts     |  1 +
 .../bridge-ui-v2/src/libs/chain/chains.ts     |  8 ++++++
 4 files changed, 34 insertions(+), 2 deletions(-)
 rename packages/bridge-ui-v2/src/components/{Bridge => ChainSelector}/ChainSelectorWrapper.svelte (60%)

diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
index 1f93d2a0d7b..4d240bce9d2 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
@@ -8,9 +8,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';
diff --git a/packages/bridge-ui-v2/src/components/Bridge/ChainSelectorWrapper.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelectorWrapper.svelte
similarity index 60%
rename from packages/bridge-ui-v2/src/components/Bridge/ChainSelectorWrapper.svelte
rename to packages/bridge-ui-v2/src/components/ChainSelector/ChainSelectorWrapper.svelte
index 3224e8c07e5..4f851492f0b 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/ChainSelectorWrapper.svelte
+++ b/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';
 
   let destChainElement: ChainSelector;
@@ -30,8 +31,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();
   });
diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/index.ts b/packages/bridge-ui-v2/src/components/ChainSelector/index.ts
index 9e0dd222d33..8dd0a64e2f6 100644
--- a/packages/bridge-ui-v2/src/components/ChainSelector/index.ts
+++ b/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';
diff --git a/packages/bridge-ui-v2/src/libs/chain/chains.ts b/packages/bridge-ui-v2/src/libs/chain/chains.ts
index 6f931d7edae..b6c71f1650a 100644
--- a/packages/bridge-ui-v2/src/libs/chain/chains.ts
+++ b/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),
 );