From 3e74cff35b24b28ba7b9594a381d83bbb7dd47b5 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 27 Sep 2023 15:10:12 -0700
Subject: [PATCH 001/106] Initialize fetchBridgeQuotes in utils, add
 BridgeQuoteRequest data type

---
 .../StateManagedBridge/ToTokenListOverlay.tsx      |  2 ++
 .../utils/actions/fetchBridgeQuotes.tsx            | 14 ++++++++++++++
 2 files changed, 16 insertions(+)
 create mode 100644 packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index 5b2c3ed1fa..1904808e6e 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -151,6 +151,8 @@ export const ToTokenListOverlay = () => {
     onClose()
   }
 
+  console.log('possibleTokens: ', possibleTokens)
+
   return (
     <div
       ref={overlayRef}
diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
new file mode 100644
index 0000000000..623a715546
--- /dev/null
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -0,0 +1,14 @@
+import { Address } from 'viem'
+import { useSynapseContext } from '../providers/SynapseProvider'
+
+interface BridgeQuoteRequest {
+  originChainId: number
+  destinationChainId: number
+  originTokenAddress: Address
+  destinationTokenAddress: Address
+  amount: bigint
+}
+
+function fetchBridgeQuote(request: BridgeQuoteRequest) {
+  const { synapseSDK } = useSynapseContext()
+}

From aaa28fd84e4ec6ba5c07867c20d976f4307cc9e9 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 27 Sep 2023 15:29:09 -0700
Subject: [PATCH 002/106] Basic useBridgeQuote that continuously provides back
 bridge quote amount

---
 .../StateManagedBridge/ToTokenListOverlay.tsx | 16 ++++++++-
 .../utils/actions/fetchBridgeQuotes.tsx       | 36 ++++++++++++++++++-
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index 1904808e6e..57aa45861d 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -18,9 +18,13 @@ import { CHAINS_BY_ID } from '@/constants/chains'
 import useCloseOnOutsideClick from '@/utils/hooks/useCloseOnOutsideClick'
 import { CloseButton } from './components/CloseButton'
 import { SearchResults } from './components/SearchResults'
+import { useBridgeQuote } from '@/utils/actions/fetchBridgeQuotes'
+import { Address } from 'viem'
+import { stringToBigInt } from '@/utils/bigint/format'
 
 export const ToTokenListOverlay = () => {
-  const { fromChainId, toTokens, toChainId, toToken } = useBridgeState()
+  const { fromChainId, fromToken, toTokens, toChainId, toToken, fromValue } =
+    useBridgeState()
 
   const [currentIdx, setCurrentIdx] = useState(-1)
   const [searchStr, setSearchStr] = useState('')
@@ -153,6 +157,16 @@ export const ToTokenListOverlay = () => {
 
   console.log('possibleTokens: ', possibleTokens)
 
+  const fetchedBridgeQuote = useBridgeQuote({
+    originChainId: fromChainId,
+    destinationChainId: toChainId,
+    originTokenAddress: fromToken?.addresses[fromChainId] as Address,
+    destinationTokenAddress: toToken?.addresses[toChainId] as Address,
+    amount: stringToBigInt(fromValue, fromToken.decimals[fromChainId]),
+  })
+
+  console.log('fetchedBridgeQuote:', fetchedBridgeQuote)
+
   return (
     <div
       ref={overlayRef}
diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index 623a715546..29af7eb400 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react'
 import { Address } from 'viem'
 import { useSynapseContext } from '../providers/SynapseProvider'
 
@@ -9,6 +10,39 @@ interface BridgeQuoteRequest {
   amount: bigint
 }
 
-function fetchBridgeQuote(request: BridgeQuoteRequest) {
+export function useBridgeQuote(request: BridgeQuoteRequest) {
+  const [bridgeQuote, setBridgeQuote] = useState(null)
   const { synapseSDK } = useSynapseContext()
+
+  console.log('request:', request)
+
+  useEffect(() => {
+    ;(async () => {
+      if (request) {
+        const {
+          feeAmount,
+          routerAddress,
+          maxAmountOut,
+          originQuery,
+          destQuery,
+        } = await synapseSDK.bridgeQuote(
+          request.originChainId,
+          request.destinationChainId,
+          request.originTokenAddress,
+          request.destinationTokenAddress,
+          request.amount
+        )
+
+        setBridgeQuote({
+          feeAmount: feeAmount,
+          routerAddress: routerAddress,
+          maxAmountOut: maxAmountOut,
+          originQuery: originQuery,
+          destQuery: destQuery,
+        })
+      }
+    })()
+  }, [request])
+
+  return bridgeQuote
 }

From 58cd2ff0c5f87cb835d91d2f5b297883eacbd705 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 27 Sep 2023 15:36:20 -0700
Subject: [PATCH 003/106] Simple async fetchBridgeQuote function

---
 .../StateManagedBridge/ToTokenListOverlay.tsx      | 14 +++++++-------
 .../utils/actions/fetchBridgeQuotes.tsx            | 12 ++++++++++++
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index 57aa45861d..775aaa929f 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -157,13 +157,13 @@ export const ToTokenListOverlay = () => {
 
   console.log('possibleTokens: ', possibleTokens)
 
-  const fetchedBridgeQuote = useBridgeQuote({
-    originChainId: fromChainId,
-    destinationChainId: toChainId,
-    originTokenAddress: fromToken?.addresses[fromChainId] as Address,
-    destinationTokenAddress: toToken?.addresses[toChainId] as Address,
-    amount: stringToBigInt(fromValue, fromToken.decimals[fromChainId]),
-  })
+  // const fetchedBridgeQuote = useBridgeQuote({
+  //   originChainId: fromChainId,
+  //   destinationChainId: toChainId,
+  //   originTokenAddress: fromToken?.addresses[fromChainId] as Address,
+  //   destinationTokenAddress: toToken?.addresses[toChainId] as Address,
+  //   amount: stringToBigInt(fromValue, fromToken.decimals[fromChainId]),
+  // })
 
   console.log('fetchedBridgeQuote:', fetchedBridgeQuote)
 
diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index 29af7eb400..a0fdbc353a 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -10,6 +10,18 @@ interface BridgeQuoteRequest {
   amount: bigint
 }
 
+export async function fetchBridgeQuote(request: BridgeQuoteRequest) {
+  const { synapseSDK } = useSynapseContext()
+
+  return synapseSDK.bridgeQuote(
+    request.originChainId,
+    request.destinationChainId,
+    request.originTokenAddress,
+    request.destinationTokenAddress,
+    request.amount
+  )
+}
+
 export function useBridgeQuote(request: BridgeQuoteRequest) {
   const [bridgeQuote, setBridgeQuote] = useState(null)
   const { synapseSDK } = useSynapseContext()

From 83f03ec1981b4731f5beb90ae9c01e46a82a1f54 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 27 Sep 2023 15:55:13 -0700
Subject: [PATCH 004/106] Adjust fetchBridgeQuote function to accept synapseSDK
 as a param

---
 .../StateManagedBridge/ToTokenListOverlay.tsx | 31 ++++++++++++-------
 .../utils/actions/fetchBridgeQuotes.tsx       | 24 ++++++++------
 2 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index 775aaa929f..f7b0a547f3 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -18,13 +18,15 @@ import { CHAINS_BY_ID } from '@/constants/chains'
 import useCloseOnOutsideClick from '@/utils/hooks/useCloseOnOutsideClick'
 import { CloseButton } from './components/CloseButton'
 import { SearchResults } from './components/SearchResults'
-import { useBridgeQuote } from '@/utils/actions/fetchBridgeQuotes'
+import { fetchBridgeQuote } from '@/utils/actions/fetchBridgeQuotes'
 import { Address } from 'viem'
 import { stringToBigInt } from '@/utils/bigint/format'
+import { useSynapseContext } from '@/utils/providers/SynapseProvider'
 
 export const ToTokenListOverlay = () => {
   const { fromChainId, fromToken, toTokens, toChainId, toToken, fromValue } =
     useBridgeState()
+  const { synapseSDK } = useSynapseContext()
 
   const [currentIdx, setCurrentIdx] = useState(-1)
   const [searchStr, setSearchStr] = useState('')
@@ -155,17 +157,24 @@ export const ToTokenListOverlay = () => {
     onClose()
   }
 
-  console.log('possibleTokens: ', possibleTokens)
+  // console.log('possibleTokens: ', possibleTokens)
+  useEffect(() => {
+    ;(async () => {
+      console.log('hit here')
+      const results = await fetchBridgeQuote(
+        {
+          originChainId: fromChainId,
+          destinationChainId: toChainId,
+          originTokenAddress: fromToken?.addresses[fromChainId] as Address,
+          destinationTokenAddress: toToken?.addresses[toChainId] as Address,
+          amount: stringToBigInt(fromValue, fromToken.decimals[fromChainId]),
+        },
+        synapseSDK
+      )
 
-  // const fetchedBridgeQuote = useBridgeQuote({
-  //   originChainId: fromChainId,
-  //   destinationChainId: toChainId,
-  //   originTokenAddress: fromToken?.addresses[fromChainId] as Address,
-  //   destinationTokenAddress: toToken?.addresses[toChainId] as Address,
-  //   amount: stringToBigInt(fromValue, fromToken.decimals[fromChainId]),
-  // })
-
-  console.log('fetchedBridgeQuote:', fetchedBridgeQuote)
+      console.log('results:', results)
+    })()
+  }, [synapseSDK])
 
   return (
     <div
diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index a0fdbc353a..6366ef3485 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 import { Address } from 'viem'
 import { useSynapseContext } from '../providers/SynapseProvider'
+import { BridgeQuote } from '../types'
 
 interface BridgeQuoteRequest {
   originChainId: number
@@ -10,16 +11,19 @@ interface BridgeQuoteRequest {
   amount: bigint
 }
 
-export async function fetchBridgeQuote(request: BridgeQuoteRequest) {
-  const { synapseSDK } = useSynapseContext()
-
-  return synapseSDK.bridgeQuote(
-    request.originChainId,
-    request.destinationChainId,
-    request.originTokenAddress,
-    request.destinationTokenAddress,
-    request.amount
-  )
+export async function fetchBridgeQuote(
+  request: BridgeQuoteRequest,
+  synapseSDK: any
+): Promise<BridgeQuote> {
+  if (request && synapseSDK) {
+    return synapseSDK.bridgeQuote(
+      request.originChainId,
+      request.destinationChainId,
+      request.originTokenAddress,
+      request.destinationTokenAddress,
+      request.amount
+    )
+  }
 }
 
 export function useBridgeQuote(request: BridgeQuoteRequest) {

From f1d198682af80f7f97d0dd82d7af0eeb8a186bee Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 27 Sep 2023 16:05:29 -0700
Subject: [PATCH 005/106] fetchBridgeQuotes can return multiple bridge quotes
 via SDK in single function call

---
 .../StateManagedBridge/ToTokenListOverlay.tsx | 35 +++++++++++++------
 .../utils/actions/fetchBridgeQuotes.tsx       | 20 +++++++++++
 2 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index f7b0a547f3..7a87faecd1 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -18,7 +18,10 @@ import { CHAINS_BY_ID } from '@/constants/chains'
 import useCloseOnOutsideClick from '@/utils/hooks/useCloseOnOutsideClick'
 import { CloseButton } from './components/CloseButton'
 import { SearchResults } from './components/SearchResults'
-import { fetchBridgeQuote } from '@/utils/actions/fetchBridgeQuotes'
+import {
+  fetchBridgeQuotes,
+  fetchBridgeQuote,
+} from '@/utils/actions/fetchBridgeQuotes'
 import { Address } from 'viem'
 import { stringToBigInt } from '@/utils/bigint/format'
 import { useSynapseContext } from '@/utils/providers/SynapseProvider'
@@ -157,18 +160,30 @@ export const ToTokenListOverlay = () => {
     onClose()
   }
 
-  // console.log('possibleTokens: ', possibleTokens)
+  console.log('possibleTokens: ', possibleTokens)
+
   useEffect(() => {
     ;(async () => {
       console.log('hit here')
-      const results = await fetchBridgeQuote(
-        {
-          originChainId: fromChainId,
-          destinationChainId: toChainId,
-          originTokenAddress: fromToken?.addresses[fromChainId] as Address,
-          destinationTokenAddress: toToken?.addresses[toChainId] as Address,
-          amount: stringToBigInt(fromValue, fromToken.decimals[fromChainId]),
-        },
+      const results = await fetchBridgeQuotes(
+        [
+          {
+            originChainId: fromChainId,
+            destinationChainId: toChainId,
+            originTokenAddress: fromToken?.addresses[fromChainId] as Address,
+            destinationTokenAddress:
+              '0x8f3Cf7ad23Cd3CaDbD9735AFf958023239c6A063', //DAI
+            amount: stringToBigInt(fromValue, fromToken.decimals[fromChainId]),
+          },
+          {
+            originChainId: fromChainId,
+            destinationChainId: toChainId,
+            originTokenAddress: fromToken?.addresses[fromChainId] as Address,
+            destinationTokenAddress:
+              '0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174', //USDC
+            amount: stringToBigInt(fromValue, fromToken.decimals[fromChainId]),
+          },
+        ],
         synapseSDK
       )
 
diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index 6366ef3485..448cdf5b2e 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -26,6 +26,26 @@ export async function fetchBridgeQuote(
   }
 }
 
+export async function fetchBridgeQuotes(
+  requests: BridgeQuoteRequest[],
+  synapseSDK: any
+) {
+  try {
+    const bridgeQuotesPromises = requests.map(
+      async (request: BridgeQuoteRequest) => {
+        const results = await Promise.all([
+          fetchBridgeQuote(request, synapseSDK),
+        ])
+        return results
+      }
+    )
+    const bridgeQuotes = await Promise.all(bridgeQuotesPromises)
+    return bridgeQuotes
+  } catch (e) {
+    console.error('error from fetchBridgeQuotes: ', e)
+  }
+}
+
 export function useBridgeQuote(request: BridgeQuoteRequest) {
   const [bridgeQuote, setBridgeQuote] = useState(null)
   const { synapseSDK } = useSynapseContext()

From 72d35c383f0c2324ceff807ff15cb793a90e55d5 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 27 Sep 2023 16:19:06 -0700
Subject: [PATCH 006/106] static typing

---
 .../StateManagedBridge/ToTokenListOverlay.tsx |  3 +-
 .../utils/actions/fetchBridgeQuotes.tsx       | 45 ++-----------------
 2 files changed, 5 insertions(+), 43 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index 7a87faecd1..48839f7bc1 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -160,11 +160,10 @@ export const ToTokenListOverlay = () => {
     onClose()
   }
 
-  console.log('possibleTokens: ', possibleTokens)
+  // console.log('possibleTokens: ', possibleTokens)
 
   useEffect(() => {
     ;(async () => {
-      console.log('hit here')
       const results = await fetchBridgeQuotes(
         [
           {
diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index 448cdf5b2e..b80345ea6d 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -3,7 +3,7 @@ import { Address } from 'viem'
 import { useSynapseContext } from '../providers/SynapseProvider'
 import { BridgeQuote } from '../types'
 
-interface BridgeQuoteRequest {
+export interface BridgeQuoteRequest {
   originChainId: number
   destinationChainId: number
   originTokenAddress: Address
@@ -29,11 +29,11 @@ export async function fetchBridgeQuote(
 export async function fetchBridgeQuotes(
   requests: BridgeQuoteRequest[],
   synapseSDK: any
-) {
+): Promise<[BridgeQuote][]> {
   try {
-    const bridgeQuotesPromises = requests.map(
+    const bridgeQuotesPromises: Promise<[BridgeQuote]>[] = requests.map(
       async (request: BridgeQuoteRequest) => {
-        const results = await Promise.all([
+        const results: [BridgeQuote] = await Promise.all([
           fetchBridgeQuote(request, synapseSDK),
         ])
         return results
@@ -45,40 +45,3 @@ export async function fetchBridgeQuotes(
     console.error('error from fetchBridgeQuotes: ', e)
   }
 }
-
-export function useBridgeQuote(request: BridgeQuoteRequest) {
-  const [bridgeQuote, setBridgeQuote] = useState(null)
-  const { synapseSDK } = useSynapseContext()
-
-  console.log('request:', request)
-
-  useEffect(() => {
-    ;(async () => {
-      if (request) {
-        const {
-          feeAmount,
-          routerAddress,
-          maxAmountOut,
-          originQuery,
-          destQuery,
-        } = await synapseSDK.bridgeQuote(
-          request.originChainId,
-          request.destinationChainId,
-          request.originTokenAddress,
-          request.destinationTokenAddress,
-          request.amount
-        )
-
-        setBridgeQuote({
-          feeAmount: feeAmount,
-          routerAddress: routerAddress,
-          maxAmountOut: maxAmountOut,
-          originQuery: originQuery,
-          destQuery: destQuery,
-        })
-      }
-    })()
-  }, [request])
-
-  return bridgeQuote
-}

From 0a8088683e8233c732d92daef1b8acbcbef13129 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 27 Sep 2023 16:27:56 -0700
Subject: [PATCH 007/106] Init Bridge Updater component to allow for refreshing
 toTokens quotes

---
 .../components/StateManagedBridge/ToTokenListOverlay.tsx | 2 +-
 packages/synapse-interface/pages/_app.tsx                | 2 ++
 packages/synapse-interface/slices/bridge/updater.tsx     | 9 +++++++++
 .../utils/actions/fetchBridgeQuotes.tsx                  | 2 --
 4 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 packages/synapse-interface/slices/bridge/updater.tsx

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index 48839f7bc1..4f56739c39 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -188,7 +188,7 @@ export const ToTokenListOverlay = () => {
 
       console.log('results:', results)
     })()
-  }, [synapseSDK])
+  }, [synapseSDK, toTokens])
 
   return (
     <div
diff --git a/packages/synapse-interface/pages/_app.tsx b/packages/synapse-interface/pages/_app.tsx
index bb2844fed9..83a3cd8bad 100644
--- a/packages/synapse-interface/pages/_app.tsx
+++ b/packages/synapse-interface/pages/_app.tsx
@@ -50,6 +50,7 @@ import { UserProvider } from '@/contexts/UserProvider'
 
 import PortfolioUpdater from '@/slices/portfolio/updater'
 import TransactionsUpdater from '@/slices/transactions/updater'
+import BridgeUpdater from '@/slices/bridge/updater'
 
 const rawChains = [
   mainnet,
@@ -133,6 +134,7 @@ function Updaters() {
     <>
       <PortfolioUpdater />
       <TransactionsUpdater />
+      <BridgeUpdater />
     </>
   )
 }
diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
new file mode 100644
index 0000000000..9f3b038cb8
--- /dev/null
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -0,0 +1,9 @@
+import { useBridgeState } from '@/slices/bridge/hooks'
+import { BridgeState } from './reducer'
+
+export default function Updater(): null {
+  const { fromChainId, toChainId, fromToken, toTokens }: BridgeState =
+    useBridgeState()
+
+  return null
+}
diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index b80345ea6d..ac23aa3904 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -1,6 +1,4 @@
-import { useState, useEffect } from 'react'
 import { Address } from 'viem'
-import { useSynapseContext } from '../providers/SynapseProvider'
 import { BridgeQuote } from '../types'
 
 export interface BridgeQuoteRequest {

From dcc693b284e6e23e58af2763020f288a0437c951 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 27 Sep 2023 16:39:16 -0700
Subject: [PATCH 008/106] Bridge Updater component can access bridge quotes
 based on current toTokens in store

---
 .../slices/bridge/updater.tsx                 | 44 ++++++++++++++++++-
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 9f3b038cb8..45b47196c8 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -1,9 +1,49 @@
+import { useEffect, useMemo } from 'react'
+import { Address } from 'viem'
 import { useBridgeState } from '@/slices/bridge/hooks'
 import { BridgeState } from './reducer'
+import {
+  BridgeQuoteRequest,
+  fetchBridgeQuotes,
+} from '@/utils/actions/fetchBridgeQuotes'
+import { BridgeQuote, Token } from '@/utils/types'
+import { stringToBigInt } from '@/utils/bigint/format'
+import { useSynapseContext } from '@/utils/providers/SynapseProvider'
 
 export default function Updater(): null {
-  const { fromChainId, toChainId, fromToken, toTokens }: BridgeState =
-    useBridgeState()
+  const { synapseSDK } = useSynapseContext()
+  const {
+    fromChainId,
+    toChainId,
+    fromToken,
+    toTokens,
+    fromValue,
+  }: BridgeState = useBridgeState()
+
+  useEffect(() => {
+    if (fromChainId && toChainId && fromToken && fromValue) {
+      const bridgeQuoteRequests: BridgeQuoteRequest[] = toTokens.map(
+        (token: Token) => {
+          return {
+            originChainId: fromChainId,
+            destinationChainId: toChainId,
+            originTokenAddress: fromToken?.addresses[fromChainId] as Address,
+            destinationTokenAddress: token?.addresses[toChainId] as Address,
+            amount: stringToBigInt(fromValue, fromToken.decimals[fromChainId]),
+          }
+        }
+      )
+
+      ;(async () => {
+        const bridgeQuotes = await fetchBridgeQuotes(
+          bridgeQuoteRequests,
+          synapseSDK
+        )
+
+        console.log('bridgeQuotes:', bridgeQuotes)
+      })()
+    }
+  }, [fromChainId, toChainId, fromToken, fromValue, toTokens, synapseSDK])
 
   return null
 }

From a7c5a7ecb0fc7f8780baaa109c3b01d5c29913b2 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 27 Sep 2023 16:40:37 -0700
Subject: [PATCH 009/106] Remove test code in ToTokenListOverlay

---
 .../StateManagedBridge/ToTokenListOverlay.tsx | 40 +------------------
 .../slices/bridge/updater.tsx                 |  2 +-
 2 files changed, 2 insertions(+), 40 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index 4f56739c39..de9cd1f273 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -18,18 +18,9 @@ import { CHAINS_BY_ID } from '@/constants/chains'
 import useCloseOnOutsideClick from '@/utils/hooks/useCloseOnOutsideClick'
 import { CloseButton } from './components/CloseButton'
 import { SearchResults } from './components/SearchResults'
-import {
-  fetchBridgeQuotes,
-  fetchBridgeQuote,
-} from '@/utils/actions/fetchBridgeQuotes'
-import { Address } from 'viem'
-import { stringToBigInt } from '@/utils/bigint/format'
-import { useSynapseContext } from '@/utils/providers/SynapseProvider'
 
 export const ToTokenListOverlay = () => {
-  const { fromChainId, fromToken, toTokens, toChainId, toToken, fromValue } =
-    useBridgeState()
-  const { synapseSDK } = useSynapseContext()
+  const { fromChainId, toTokens, toChainId, toToken } = useBridgeState()
 
   const [currentIdx, setCurrentIdx] = useState(-1)
   const [searchStr, setSearchStr] = useState('')
@@ -161,35 +152,6 @@ export const ToTokenListOverlay = () => {
   }
 
   // console.log('possibleTokens: ', possibleTokens)
-
-  useEffect(() => {
-    ;(async () => {
-      const results = await fetchBridgeQuotes(
-        [
-          {
-            originChainId: fromChainId,
-            destinationChainId: toChainId,
-            originTokenAddress: fromToken?.addresses[fromChainId] as Address,
-            destinationTokenAddress:
-              '0x8f3Cf7ad23Cd3CaDbD9735AFf958023239c6A063', //DAI
-            amount: stringToBigInt(fromValue, fromToken.decimals[fromChainId]),
-          },
-          {
-            originChainId: fromChainId,
-            destinationChainId: toChainId,
-            originTokenAddress: fromToken?.addresses[fromChainId] as Address,
-            destinationTokenAddress:
-              '0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174', //USDC
-            amount: stringToBigInt(fromValue, fromToken.decimals[fromChainId]),
-          },
-        ],
-        synapseSDK
-      )
-
-      console.log('results:', results)
-    })()
-  }, [synapseSDK, toTokens])
-
   return (
     <div
       ref={overlayRef}
diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 45b47196c8..0f27068bce 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -35,7 +35,7 @@ export default function Updater(): null {
       )
 
       ;(async () => {
-        const bridgeQuotes = await fetchBridgeQuotes(
+        const bridgeQuotes: [BridgeQuote][] = await fetchBridgeQuotes(
           bridgeQuoteRequests,
           synapseSDK
         )

From 1b3cc2e3b6bb4f8d87598df0344327ebfb5d825a Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 27 Sep 2023 16:55:39 -0700
Subject: [PATCH 010/106] Return token Token type in fetchBridgeQuote() call to
 match possibleTokens in ToTokenListOverlay

---
 .../StateManagedBridge/ToTokenListOverlay.tsx          |  5 +++--
 packages/synapse-interface/slices/bridge/updater.tsx   |  3 ++-
 .../utils/actions/fetchBridgeQuotes.tsx                | 10 ++++++++--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index de9cd1f273..6e827c801d 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -27,7 +27,7 @@ export const ToTokenListOverlay = () => {
   const dispatch = useDispatch()
   const overlayRef = useRef(null)
 
-  let possibleTokens = sortByPriorityRank(toTokens)
+  let possibleTokens: Token[] = sortByPriorityRank(toTokens)
 
   const { toTokens: allToChainTokens } = getRoutePossibilities({
     fromChainId,
@@ -151,7 +151,8 @@ export const ToTokenListOverlay = () => {
     onClose()
   }
 
-  // console.log('possibleTokens: ', possibleTokens)
+  console.log('possibleTokens: ', possibleTokens)
+
   return (
     <div
       ref={overlayRef}
diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 0f27068bce..5824ae560e 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -21,7 +21,7 @@ export default function Updater(): null {
   }: BridgeState = useBridgeState()
 
   useEffect(() => {
-    if (fromChainId && toChainId && fromToken && fromValue) {
+    if (fromChainId && toChainId && fromToken && fromValue && synapseSDK) {
       const bridgeQuoteRequests: BridgeQuoteRequest[] = toTokens.map(
         (token: Token) => {
           return {
@@ -30,6 +30,7 @@ export default function Updater(): null {
             originTokenAddress: fromToken?.addresses[fromChainId] as Address,
             destinationTokenAddress: token?.addresses[toChainId] as Address,
             amount: stringToBigInt(fromValue, fromToken.decimals[fromChainId]),
+            token: token,
           }
         }
       )
diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index ac23aa3904..9ae78c20e7 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -1,5 +1,5 @@
 import { Address } from 'viem'
-import { BridgeQuote } from '../types'
+import { BridgeQuote, Token } from '@/utils/types'
 
 export interface BridgeQuoteRequest {
   originChainId: number
@@ -7,6 +7,7 @@ export interface BridgeQuoteRequest {
   originTokenAddress: Address
   destinationTokenAddress: Address
   amount: bigint
+  token: Token
 }
 
 export async function fetchBridgeQuote(
@@ -14,13 +15,18 @@ export async function fetchBridgeQuote(
   synapseSDK: any
 ): Promise<BridgeQuote> {
   if (request && synapseSDK) {
-    return synapseSDK.bridgeQuote(
+    const bridgeQuote = await synapseSDK.bridgeQuote(
       request.originChainId,
       request.destinationChainId,
       request.originTokenAddress,
       request.destinationTokenAddress,
       request.amount
     )
+
+    return {
+      ...bridgeQuote,
+      token: request.token,
+    }
   }
 }
 

From 96479d1c866d108e54e5abacba539eb0a16f91c2 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 27 Sep 2023 17:10:18 -0700
Subject: [PATCH 011/106] Update

---
 .../synapse-interface/pages/state-managed-bridge/index.tsx    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/synapse-interface/pages/state-managed-bridge/index.tsx b/packages/synapse-interface/pages/state-managed-bridge/index.tsx
index b5da17b74c..22040a7f9c 100644
--- a/packages/synapse-interface/pages/state-managed-bridge/index.tsx
+++ b/packages/synapse-interface/pages/state-managed-bridge/index.tsx
@@ -6,6 +6,8 @@ import { animated } from 'react-spring'
 import { useRouter } from 'next/router'
 import { segmentAnalyticsEvent } from '@/contexts/SegmentAnalyticsProvider'
 
+import { useBridgeState } from '@/slices/bridge/hooks'
+import { BridgeState } from '@/slices/bridge/reducer'
 import {
   updateFromValue,
   setBridgeQuote,
@@ -99,7 +101,7 @@ const StateManagedBridge = () => {
     toChainIds,
     fromTokens,
     toTokens,
-  } = useSelector((state: RootState) => state.bridge)
+  }: BridgeState = useBridgeState()
 
   const {
     showSettingsSlideOver,

From 9cea20955aa73345d06445adcf073bb027cb0256 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 27 Sep 2023 17:21:19 -0700
Subject: [PATCH 012/106] Add comment

---
 packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index 9ae78c20e7..e8487ce58b 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -1,6 +1,8 @@
 import { Address } from 'viem'
 import { BridgeQuote, Token } from '@/utils/types'
 
+// Pass in Origin Token and Destination Token
+// To allow fetchBridgeQuote to calculate exchange rate
 export interface BridgeQuoteRequest {
   originChainId: number
   destinationChainId: number

From bd502211afb3d7c2b1712983b507370e14baad7f Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 28 Sep 2023 12:45:26 -0700
Subject: [PATCH 013/106] init fechAndStoreBridgeQuotes async thunk

---
 packages/synapse-interface/slices/bridge/hooks.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/synapse-interface/slices/bridge/hooks.ts b/packages/synapse-interface/slices/bridge/hooks.ts
index bd316f0aa0..03db91d05c 100644
--- a/packages/synapse-interface/slices/bridge/hooks.ts
+++ b/packages/synapse-interface/slices/bridge/hooks.ts
@@ -1,6 +1,17 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+
 import { RootState } from '@/store/store'
 import { useAppSelector } from '@/store/hooks'
+import {
+  fetchBridgeQuote,
+  BridgeQuoteRequest,
+} from '@/utils/actions/fetchBridgeQuotes'
 
 export const useBridgeState = (): RootState['bridge'] => {
   return useAppSelector((state) => state.bridge)
 }
+
+export const fetchAndStoreBridgeQuotes = createAsyncThunk(
+  'bridge/fetchAndStoreBridgeQuotes',
+  async () => {}
+)

From 09dc065bd384043139a8eb676afc9a68e16166ef Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 28 Sep 2023 12:47:55 -0700
Subject: [PATCH 014/106] fetchAndStoreBridgeQuotes

---
 packages/synapse-interface/slices/bridge/hooks.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/synapse-interface/slices/bridge/hooks.ts b/packages/synapse-interface/slices/bridge/hooks.ts
index 03db91d05c..ac02cc3fea 100644
--- a/packages/synapse-interface/slices/bridge/hooks.ts
+++ b/packages/synapse-interface/slices/bridge/hooks.ts
@@ -4,6 +4,7 @@ import { RootState } from '@/store/store'
 import { useAppSelector } from '@/store/hooks'
 import {
   fetchBridgeQuote,
+  fetchBridgeQuotes,
   BridgeQuoteRequest,
 } from '@/utils/actions/fetchBridgeQuotes'
 
@@ -13,5 +14,8 @@ export const useBridgeState = (): RootState['bridge'] => {
 
 export const fetchAndStoreBridgeQuotes = createAsyncThunk(
   'bridge/fetchAndStoreBridgeQuotes',
-  async () => {}
+  async (requests: BridgeQuoteRequest[], synapseSDK: any) => {
+    const bridgeQuotes = await fetchBridgeQuotes(requests, synapseSDK)
+    return bridgeQuotes
+  }
 )

From 1adaacd2b8288176395fedaa2bf02a0d422f1561 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 28 Sep 2023 12:48:52 -0700
Subject: [PATCH 015/106] add fetchAndStoreBridgeQuote to use for current
 bridge selections

---
 packages/synapse-interface/slices/bridge/hooks.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/synapse-interface/slices/bridge/hooks.ts b/packages/synapse-interface/slices/bridge/hooks.ts
index ac02cc3fea..5b86d1710b 100644
--- a/packages/synapse-interface/slices/bridge/hooks.ts
+++ b/packages/synapse-interface/slices/bridge/hooks.ts
@@ -12,6 +12,14 @@ export const useBridgeState = (): RootState['bridge'] => {
   return useAppSelector((state) => state.bridge)
 }
 
+export const fetchAndStoreBridgeQuote = createAsyncThunk(
+  'bridge/fetchAndStoreBridgeQuote',
+  async (request: BridgeQuoteRequest, synapseSDK: any) => {
+    const bridgeQuote = await fetchBridgeQuote(request, synapseSDK)
+    return bridgeQuote
+  }
+)
+
 export const fetchAndStoreBridgeQuotes = createAsyncThunk(
   'bridge/fetchAndStoreBridgeQuotes',
   async (requests: BridgeQuoteRequest[], synapseSDK: any) => {

From c9d99930c410b807ba2368358e168e38c3dd31d3 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 28 Sep 2023 15:11:14 -0700
Subject: [PATCH 016/106] Update BridgeQuoteRequest to include originToken

---
 .../synapse-interface/utils/actions/fetchBridgeQuotes.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index e8487ce58b..058a181fec 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -6,7 +6,7 @@ import { BridgeQuote, Token } from '@/utils/types'
 export interface BridgeQuoteRequest {
   originChainId: number
   destinationChainId: number
-  originTokenAddress: Address
+  originToken: Token
   destinationTokenAddress: Address
   amount: bigint
   token: Token
@@ -20,7 +20,7 @@ export async function fetchBridgeQuote(
     const bridgeQuote = await synapseSDK.bridgeQuote(
       request.originChainId,
       request.destinationChainId,
-      request.originTokenAddress,
+      request.originToken.addresses[request.originChainId],
       request.destinationTokenAddress,
       request.amount
     )

From f2e086ef412716d49f136f668c68bd7095796117 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 28 Sep 2023 15:14:34 -0700
Subject: [PATCH 017/106] ...

---
 packages/synapse-interface/slices/bridge/updater.tsx        | 4 ++--
 .../synapse-interface/utils/actions/fetchBridgeQuotes.tsx   | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 5824ae560e..c40f577163 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -26,11 +26,11 @@ export default function Updater(): null {
         (token: Token) => {
           return {
             originChainId: fromChainId,
+            originToken: fromToken as Token,
             destinationChainId: toChainId,
-            originTokenAddress: fromToken?.addresses[fromChainId] as Address,
             destinationTokenAddress: token?.addresses[toChainId] as Address,
+            destinationToken: token as Token,
             amount: stringToBigInt(fromValue, fromToken.decimals[fromChainId]),
-            token: token,
           }
         }
       )
diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index 058a181fec..4cb5b8001f 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -5,11 +5,11 @@ import { BridgeQuote, Token } from '@/utils/types'
 // To allow fetchBridgeQuote to calculate exchange rate
 export interface BridgeQuoteRequest {
   originChainId: number
-  destinationChainId: number
   originToken: Token
+  destinationChainId: number
   destinationTokenAddress: Address
+  destinationToken: Token
   amount: bigint
-  token: Token
 }
 
 export async function fetchBridgeQuote(
@@ -27,7 +27,7 @@ export async function fetchBridgeQuote(
 
     return {
       ...bridgeQuote,
-      token: request.token,
+      destinationToken: request.destinationToken,
     }
   }
 }

From 102e9a3ff710e7190fa6c73575856494c97d9f4c Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 28 Sep 2023 15:44:23 -0700
Subject: [PATCH 018/106] port getAndSetBridgeQuote logic into fetchBridgeQuote

---
 .../utils/actions/fetchBridgeQuotes.tsx       | 79 ++++++++++++++++---
 1 file changed, 70 insertions(+), 9 deletions(-)

diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index 4cb5b8001f..7a18dddc29 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -1,6 +1,13 @@
 import { Address } from 'viem'
 import { BridgeQuote, Token } from '@/utils/types'
-
+import {
+  stringToBigInt,
+  powBigInt,
+  formatBigIntToString,
+} from '../bigint/format'
+import { subtractSlippage } from '../slippage'
+import { commify } from '@ethersproject/units'
+import { calculateExchangeRate } from '../calculateExchangeRate'
 // Pass in Origin Token and Destination Token
 // To allow fetchBridgeQuote to calculate exchange rate
 export interface BridgeQuoteRequest {
@@ -17,17 +24,71 @@ export async function fetchBridgeQuote(
   synapseSDK: any
 ): Promise<BridgeQuote> {
   if (request && synapseSDK) {
-    const bridgeQuote = await synapseSDK.bridgeQuote(
-      request.originChainId,
-      request.destinationChainId,
-      request.originToken.addresses[request.originChainId],
-      request.destinationTokenAddress,
-      request.amount
+    const {
+      originChainId,
+      originToken,
+      destinationChainId,
+      destinationTokenAddress,
+      destinationToken,
+      amount,
+    }: BridgeQuoteRequest = request
+    const { feeAmount, routerAddress, maxAmountOut, originQuery, destQuery } =
+      await synapseSDK.bridgeQuote(
+        originChainId,
+        destinationChainId,
+        originToken.addresses[originChainId],
+        destinationTokenAddress,
+        amount
+      )
+
+    const toValueBigInt: bigint = BigInt(maxAmountOut.toString()) ?? 0n
+    const originTokenDecimals: number = originToken.decimals[originChainId]
+    const adjustedFeeAmount: bigint =
+      BigInt(feeAmount) < amount
+        ? BigInt(feeAmount)
+        : BigInt(feeAmount) / powBigInt(10n, BigInt(18 - originTokenDecimals))
+
+    const originMinWithSlippage = subtractSlippage(
+      originQuery?.minAmountOut ?? 0n,
+      'ONE_TENTH',
+      null
     )
+    const destMinWithSlippage = subtractSlippage(
+      destQuery?.minAmountOut ?? 0n,
+      'ONE_TENTH',
+      null
+    )
+
+    let newOriginQuery = { ...originQuery }
+    newOriginQuery.minAmountOut = originMinWithSlippage
+
+    let newDestQuery = { ...destQuery }
+    newDestQuery.minAmountOut = destMinWithSlippage
 
     return {
-      ...bridgeQuote,
-      destinationToken: request.destinationToken,
+      outputAmount: toValueBigInt,
+      outputAmountString: commify(
+        formatBigIntToString(
+          toValueBigInt,
+          destinationToken.decimals[destinationChainId],
+          8
+        )
+      ),
+      routerAddress,
+      allowance: null, // update for allowances
+      exchangeRate: calculateExchangeRate(
+        amount - adjustedFeeAmount,
+        originToken.decimals[originChainId],
+        toValueBigInt,
+        destinationToken.decimals[destinationChainId]
+      ),
+      feeAmount,
+      delta: BigInt(maxAmountOut.toString()),
+      quotes: {
+        originQuery: newOriginQuery,
+        destQuery: newDestQuery,
+      },
+      // destinationToken: request.destinationToken,
     }
   }
 }

From aee1e6c0ab4b3b9184a2d57c6b9b487371caecd5 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 28 Sep 2023 15:47:30 -0700
Subject: [PATCH 019/106] Extend BridgeQuote type into BridgeQuoteResponse to
 include destinationToken to match token options by

---
 .../utils/actions/fetchBridgeQuotes.tsx         | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index 7a18dddc29..832406a4ec 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -8,8 +8,11 @@ import {
 import { subtractSlippage } from '../slippage'
 import { commify } from '@ethersproject/units'
 import { calculateExchangeRate } from '../calculateExchangeRate'
-// Pass in Origin Token and Destination Token
-// To allow fetchBridgeQuote to calculate exchange rate
+
+export interface BridgeQuoteResponse extends BridgeQuote {
+  destinationToken: Token
+}
+
 export interface BridgeQuoteRequest {
   originChainId: number
   originToken: Token
@@ -22,7 +25,7 @@ export interface BridgeQuoteRequest {
 export async function fetchBridgeQuote(
   request: BridgeQuoteRequest,
   synapseSDK: any
-): Promise<BridgeQuote> {
+): Promise<BridgeQuoteResponse> {
   if (request && synapseSDK) {
     const {
       originChainId,
@@ -88,7 +91,7 @@ export async function fetchBridgeQuote(
         originQuery: newOriginQuery,
         destQuery: newDestQuery,
       },
-      // destinationToken: request.destinationToken,
+      destinationToken: request.destinationToken,
     }
   }
 }
@@ -96,11 +99,11 @@ export async function fetchBridgeQuote(
 export async function fetchBridgeQuotes(
   requests: BridgeQuoteRequest[],
   synapseSDK: any
-): Promise<[BridgeQuote][]> {
+): Promise<[BridgeQuoteResponse][]> {
   try {
-    const bridgeQuotesPromises: Promise<[BridgeQuote]>[] = requests.map(
+    const bridgeQuotesPromises: Promise<[BridgeQuoteResponse]>[] = requests.map(
       async (request: BridgeQuoteRequest) => {
-        const results: [BridgeQuote] = await Promise.all([
+        const results: [BridgeQuoteResponse] = await Promise.all([
           fetchBridgeQuote(request, synapseSDK),
         ])
         return results

From 90932143560b0c8270e2d8dfbb3fe8f725331921 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 28 Sep 2023 15:49:17 -0700
Subject: [PATCH 020/106] Add typing to thunks

---
 packages/synapse-interface/slices/bridge/hooks.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/hooks.ts b/packages/synapse-interface/slices/bridge/hooks.ts
index 5b86d1710b..b1920c75b2 100644
--- a/packages/synapse-interface/slices/bridge/hooks.ts
+++ b/packages/synapse-interface/slices/bridge/hooks.ts
@@ -6,6 +6,7 @@ import {
   fetchBridgeQuote,
   fetchBridgeQuotes,
   BridgeQuoteRequest,
+  BridgeQuoteResponse,
 } from '@/utils/actions/fetchBridgeQuotes'
 
 export const useBridgeState = (): RootState['bridge'] => {
@@ -15,7 +16,10 @@ export const useBridgeState = (): RootState['bridge'] => {
 export const fetchAndStoreBridgeQuote = createAsyncThunk(
   'bridge/fetchAndStoreBridgeQuote',
   async (request: BridgeQuoteRequest, synapseSDK: any) => {
-    const bridgeQuote = await fetchBridgeQuote(request, synapseSDK)
+    const bridgeQuote: BridgeQuoteResponse = await fetchBridgeQuote(
+      request,
+      synapseSDK
+    )
     return bridgeQuote
   }
 )
@@ -23,7 +27,10 @@ export const fetchAndStoreBridgeQuote = createAsyncThunk(
 export const fetchAndStoreBridgeQuotes = createAsyncThunk(
   'bridge/fetchAndStoreBridgeQuotes',
   async (requests: BridgeQuoteRequest[], synapseSDK: any) => {
-    const bridgeQuotes = await fetchBridgeQuotes(requests, synapseSDK)
+    const bridgeQuotes: [BridgeQuoteResponse][] = await fetchBridgeQuotes(
+      requests,
+      synapseSDK
+    )
     return bridgeQuotes
   }
 )

From ab13f334c614579fcd1dee5822c4bc6358ced8d2 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 28 Sep 2023 16:02:11 -0700
Subject: [PATCH 021/106] Add store state and reducer for
 fetchAndStoerBridgeQuotes

---
 packages/synapse-interface/slices/bridge/reducer.ts  | 7 +++++++
 packages/synapse-interface/slices/bridge/updater.tsx | 2 ++
 2 files changed, 9 insertions(+)

diff --git a/packages/synapse-interface/slices/bridge/reducer.ts b/packages/synapse-interface/slices/bridge/reducer.ts
index ec6b367527..ecfc00005e 100644
--- a/packages/synapse-interface/slices/bridge/reducer.ts
+++ b/packages/synapse-interface/slices/bridge/reducer.ts
@@ -21,6 +21,8 @@ import {
   updatePendingBridgeTransaction,
   updatePendingBridgeTransactions,
 } from './actions'
+import { fetchAndStoreBridgeQuotes } from './hooks'
+import { BridgeQuoteResponse } from '@/utils/actions/fetchBridgeQuotes'
 import { findValidToken } from '@/utils/findValidToken'
 
 export interface BridgeState {
@@ -35,6 +37,7 @@ export interface BridgeState {
 
   fromValue: string
   bridgeQuote: BridgeQuote
+  toTokensBridgeQuotes: [BridgeQuoteResponse][]
   isLoading: boolean
   deadlineMinutes: number | null
   destinationAddress: Address | null
@@ -70,6 +73,7 @@ export const initialState: BridgeState = {
 
   fromValue: '',
   bridgeQuote: EMPTY_BRIDGE_QUOTE,
+  toTokensBridgeQuotes: [],
   isLoading: false,
   deadlineMinutes: null,
   destinationAddress: null,
@@ -509,6 +513,9 @@ export const bridgeSlice = createSlice({
           state.pendingBridgeTransactions = action.payload
         }
       )
+      .addCase(fetchAndStoreBridgeQuotes.fulfilled, (state, action) => {
+        state.toTokensBridgeQuotes = action.payload
+      })
   },
 })
 
diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index c40f577163..25da03d231 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo } from 'react'
+import { useAppDispatch } from '@/store/hooks'
 import { Address } from 'viem'
 import { useBridgeState } from '@/slices/bridge/hooks'
 import { BridgeState } from './reducer'
@@ -11,6 +12,7 @@ import { stringToBigInt } from '@/utils/bigint/format'
 import { useSynapseContext } from '@/utils/providers/SynapseProvider'
 
 export default function Updater(): null {
+  const dipatch = useAppDispatch()
   const { synapseSDK } = useSynapseContext()
   const {
     fromChainId,

From 7a8e5707de7b51e08b80ef81dbb85b115264e9aa Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 28 Sep 2023 16:21:08 -0700
Subject: [PATCH 022/106] Bridge Updater to dispatch fetched bridge quotes for
 toTokens when avail

---
 .../synapse-interface/slices/bridge/hooks.ts    | 16 ++++++++++++++--
 .../synapse-interface/slices/bridge/updater.tsx | 17 ++++++++---------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/hooks.ts b/packages/synapse-interface/slices/bridge/hooks.ts
index b1920c75b2..68a9cd17fc 100644
--- a/packages/synapse-interface/slices/bridge/hooks.ts
+++ b/packages/synapse-interface/slices/bridge/hooks.ts
@@ -15,7 +15,13 @@ export const useBridgeState = (): RootState['bridge'] => {
 
 export const fetchAndStoreBridgeQuote = createAsyncThunk(
   'bridge/fetchAndStoreBridgeQuote',
-  async (request: BridgeQuoteRequest, synapseSDK: any) => {
+  async ({
+    request,
+    synapseSDK,
+  }: {
+    request: BridgeQuoteRequest
+    synapseSDK: any
+  }) => {
     const bridgeQuote: BridgeQuoteResponse = await fetchBridgeQuote(
       request,
       synapseSDK
@@ -26,7 +32,13 @@ export const fetchAndStoreBridgeQuote = createAsyncThunk(
 
 export const fetchAndStoreBridgeQuotes = createAsyncThunk(
   'bridge/fetchAndStoreBridgeQuotes',
-  async (requests: BridgeQuoteRequest[], synapseSDK: any) => {
+  async ({
+    requests,
+    synapseSDK,
+  }: {
+    requests: BridgeQuoteRequest[]
+    synapseSDK: any
+  }) => {
     const bridgeQuotes: [BridgeQuoteResponse][] = await fetchBridgeQuotes(
       requests,
       synapseSDK
diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 25da03d231..3e4f7db672 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -7,12 +7,13 @@ import {
   BridgeQuoteRequest,
   fetchBridgeQuotes,
 } from '@/utils/actions/fetchBridgeQuotes'
+import { fetchAndStoreBridgeQuotes } from '@/slices/bridge/hooks'
 import { BridgeQuote, Token } from '@/utils/types'
 import { stringToBigInt } from '@/utils/bigint/format'
 import { useSynapseContext } from '@/utils/providers/SynapseProvider'
 
 export default function Updater(): null {
-  const dipatch = useAppDispatch()
+  const dispatch = useAppDispatch()
   const { synapseSDK } = useSynapseContext()
   const {
     fromChainId,
@@ -37,14 +38,12 @@ export default function Updater(): null {
         }
       )
 
-      ;(async () => {
-        const bridgeQuotes: [BridgeQuote][] = await fetchBridgeQuotes(
-          bridgeQuoteRequests,
-          synapseSDK
-        )
-
-        console.log('bridgeQuotes:', bridgeQuotes)
-      })()
+      dispatch(
+        fetchAndStoreBridgeQuotes({
+          requests: bridgeQuoteRequests,
+          synapseSDK,
+        })
+      )
     }
   }, [fromChainId, toChainId, fromToken, fromValue, toTokens, synapseSDK])
 

From b696385081f09f370ba82b369479096d3721cae9 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 28 Sep 2023 17:36:46 -0700
Subject: [PATCH 023/106] Update fetchBridgeQuotes to return array of objects

---
 .../StateManagedBridge/ToTokenListOverlay.tsx     | 15 +++++++++++----
 .../components/SelectSpecificTokenButton.tsx      |  2 ++
 packages/synapse-interface/slices/bridge/hooks.ts |  2 +-
 .../utils/actions/fetchBridgeQuotes.tsx           | 12 +++++++-----
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index 6e827c801d..a62c3ad4b8 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -6,7 +6,7 @@ import Fuse from 'fuse.js'
 import { useKeyPress } from '@hooks/useKeyPress'
 import SlideSearchBox from '@pages/bridge/SlideSearchBox'
 import { Token } from '@/utils/types'
-import { setToToken } from '@/slices/bridge/reducer'
+import { BridgeState, setToToken } from '@/slices/bridge/reducer'
 import { setShowToTokenListOverlay } from '@/slices/bridgeDisplaySlice'
 import { segmentAnalyticsEvent } from '@/contexts/SegmentAnalyticsProvider'
 import { useBridgeState } from '@/slices/bridge/hooks'
@@ -20,7 +20,13 @@ import { CloseButton } from './components/CloseButton'
 import { SearchResults } from './components/SearchResults'
 
 export const ToTokenListOverlay = () => {
-  const { fromChainId, toTokens, toChainId, toToken } = useBridgeState()
+  const {
+    fromChainId,
+    toTokens,
+    toChainId,
+    toToken,
+    toTokensBridgeQuotes,
+  }: BridgeState = useBridgeState()
 
   const [currentIdx, setCurrentIdx] = useState(-1)
   const [searchStr, setSearchStr] = useState('')
@@ -152,11 +158,12 @@ export const ToTokenListOverlay = () => {
   }
 
   console.log('possibleTokens: ', possibleTokens)
+  console.log('toTokensBridgeQuotes: ', toTokensBridgeQuotes)
 
   return (
     <div
       ref={overlayRef}
-      data-test-id="token-slide-over"
+      data-test-id="to-token-list-overlay"
       className="max-h-full pb-4 mt-2 overflow-auto scrollbar-hide"
     >
       <div className="z-10 w-full px-2 ">
@@ -175,7 +182,7 @@ export const ToTokenListOverlay = () => {
             Receive…
           </div>
           <div className="px-2 pb-2 md:px-2">
-            {possibleTokens.map((token, idx) => {
+            {possibleTokens.map((token: Token, idx: number) => {
               return (
                 <SelectSpecificTokenButton
                   isOrigin={false}
diff --git a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
index d2bdfa8e7e..72113ef8da 100644
--- a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
@@ -21,6 +21,7 @@ const SelectSpecificTokenButton = ({
   selectedToken,
   onClick,
   alternateBackground = false,
+  exchangeRate,
 }: {
   showAllChains?: boolean
   isOrigin: boolean
@@ -29,6 +30,7 @@ const SelectSpecificTokenButton = ({
   selectedToken: Token
   onClick: () => void
   alternateBackground?: boolean
+  exchangeRate?: string
 }) => {
   const ref = useRef<any>(null)
   const isCurrentlySelected = selectedToken?.routeSymbol === token?.routeSymbol
diff --git a/packages/synapse-interface/slices/bridge/hooks.ts b/packages/synapse-interface/slices/bridge/hooks.ts
index 68a9cd17fc..be190de525 100644
--- a/packages/synapse-interface/slices/bridge/hooks.ts
+++ b/packages/synapse-interface/slices/bridge/hooks.ts
@@ -39,7 +39,7 @@ export const fetchAndStoreBridgeQuotes = createAsyncThunk(
     requests: BridgeQuoteRequest[]
     synapseSDK: any
   }) => {
-    const bridgeQuotes: [BridgeQuoteResponse][] = await fetchBridgeQuotes(
+    const bridgeQuotes: BridgeQuoteResponse[] = await fetchBridgeQuotes(
       requests,
       synapseSDK
     )
diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index 832406a4ec..0c3be5ee12 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -99,13 +99,15 @@ export async function fetchBridgeQuote(
 export async function fetchBridgeQuotes(
   requests: BridgeQuoteRequest[],
   synapseSDK: any
-): Promise<[BridgeQuoteResponse][]> {
+): Promise<BridgeQuoteResponse[]> {
   try {
-    const bridgeQuotesPromises: Promise<[BridgeQuoteResponse]>[] = requests.map(
+    const bridgeQuotesPromises: Promise<BridgeQuoteResponse>[] = requests.map(
       async (request: BridgeQuoteRequest) => {
-        const results: [BridgeQuoteResponse] = await Promise.all([
-          fetchBridgeQuote(request, synapseSDK),
-        ])
+        const results: BridgeQuoteResponse = await fetchBridgeQuote(
+          request,
+          synapseSDK
+        )
+
         return results
       }
     )

From f3bbd99e57f0a5923881030ddf9d7df7ed4158f8 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 28 Sep 2023 17:42:01 -0700
Subject: [PATCH 024/106] Pass in formatted exchangeRate string into
 SelectSpecificTokenButton

---
 .../StateManagedBridge/ToTokenListOverlay.tsx         |  6 ++++++
 packages/synapse-interface/slices/bridge/reducer.ts   | 11 +++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index a62c3ad4b8..23687e54c5 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -18,10 +18,12 @@ import { CHAINS_BY_ID } from '@/constants/chains'
 import useCloseOnOutsideClick from '@/utils/hooks/useCloseOnOutsideClick'
 import { CloseButton } from './components/CloseButton'
 import { SearchResults } from './components/SearchResults'
+import { formatBigIntToString } from '@/utils/bigint/format'
 
 export const ToTokenListOverlay = () => {
   const {
     fromChainId,
+    fromToken,
     toTokens,
     toChainId,
     toToken,
@@ -191,6 +193,10 @@ export const ToTokenListOverlay = () => {
                   selectedToken={toToken}
                   active={idx === currentIdx}
                   showAllChains={false}
+                  exchangeRate={formatBigIntToString(
+                    toTokensBridgeQuotes[idx]?.exchangeRate,
+                    fromToken?.decimals[fromChainId]
+                  )}
                   onClick={() => {
                     if (token === toToken) {
                       onClose()
diff --git a/packages/synapse-interface/slices/bridge/reducer.ts b/packages/synapse-interface/slices/bridge/reducer.ts
index ecfc00005e..dbb26a8e33 100644
--- a/packages/synapse-interface/slices/bridge/reducer.ts
+++ b/packages/synapse-interface/slices/bridge/reducer.ts
@@ -37,7 +37,7 @@ export interface BridgeState {
 
   fromValue: string
   bridgeQuote: BridgeQuote
-  toTokensBridgeQuotes: [BridgeQuoteResponse][]
+  toTokensBridgeQuotes: BridgeQuoteResponse[]
   isLoading: boolean
   deadlineMinutes: number | null
   destinationAddress: Address | null
@@ -513,9 +513,12 @@ export const bridgeSlice = createSlice({
           state.pendingBridgeTransactions = action.payload
         }
       )
-      .addCase(fetchAndStoreBridgeQuotes.fulfilled, (state, action) => {
-        state.toTokensBridgeQuotes = action.payload
-      })
+      .addCase(
+        fetchAndStoreBridgeQuotes.fulfilled,
+        (state, action: PayloadAction<BridgeQuoteResponse[]>) => {
+          state.toTokensBridgeQuotes = action.payload
+        }
+      )
   },
 })
 

From c93a0c429521e181625259d01e0966b8c0b85022 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 28 Sep 2023 18:05:06 -0700
Subject: [PATCH 025/106] Add OptionDetails component that displays
 exchangeRate for now

---
 .../StateManagedBridge/ToTokenListOverlay.tsx   |  3 ++-
 .../components/SelectSpecificTokenButton.tsx    | 17 ++++++++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index 23687e54c5..290a095ad3 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -195,7 +195,8 @@ export const ToTokenListOverlay = () => {
                   showAllChains={false}
                   exchangeRate={formatBigIntToString(
                     toTokensBridgeQuotes[idx]?.exchangeRate,
-                    fromToken?.decimals[fromChainId]
+                    18, //manually set this for now
+                    4
                   )}
                   onClick={() => {
                     if (token === toToken) {
diff --git a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
index 72113ef8da..22369b7ad5 100644
--- a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
@@ -32,6 +32,8 @@ const SelectSpecificTokenButton = ({
   alternateBackground?: boolean
   exchangeRate?: string
 }) => {
+  exchangeRate && console.log('exchangeRate:', exchangeRate)
+
   const ref = useRef<any>(null)
   const isCurrentlySelected = selectedToken?.routeSymbol === token?.routeSymbol
   const { fromChainId, toChainId, fromToken, toToken } = useBridgeState()
@@ -58,6 +60,7 @@ const SelectSpecificTokenButton = ({
 
   return (
     <button
+      data-test-id="select-specific-token-button"
       ref={ref}
       tabIndex={active ? 1 : 0}
       onClick={onClick}
@@ -80,10 +83,22 @@ const SelectSpecificTokenButton = ({
         isOrigin={isOrigin}
         showAllChains={showAllChains}
       />
+      {exchangeRate && <OptionDetails exchangeRate={exchangeRate} />}
     </button>
   )
 }
 
+export const OptionDetails = ({ exchangeRate }: { exchangeRate: string }) => {
+  return (
+    <div data-test-id="exchange-rate" className="flex items-center font-normal">
+      <div className="flex text-sm text-secondary whitespace-nowrap">
+        1&nbsp;:&nbsp;
+      </div>
+      <div className="mb-[1px] text-primary">{exchangeRate}</div>
+    </div>
+  )
+}
+
 const ButtonContent = memo(
   ({
     token,
@@ -103,7 +118,7 @@ const ButtonContent = memo(
     )?.parsedBalance
 
     return (
-      <div className="flex items-center w-full">
+      <div data-test-id="button-content" className="flex items-center w-full">
         <img
           alt="token image"
           className="w-8 h-8 ml-2 mr-4 rounded-full"

From 1c222d9e0d93f1ef17e3e2e0cc72c0c31a458648 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 28 Sep 2023 18:20:59 -0700
Subject: [PATCH 026/106] Prefetch exchange rates without fromValue

---
 .../components/StateManagedBridge/ToTokenListOverlay.tsx  | 2 +-
 .../components/SelectSpecificTokenButton.tsx              | 2 --
 packages/synapse-interface/slices/bridge/updater.tsx      | 8 ++++++--
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index 290a095ad3..ee459a61fe 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -194,7 +194,7 @@ export const ToTokenListOverlay = () => {
                   active={idx === currentIdx}
                   showAllChains={false}
                   exchangeRate={formatBigIntToString(
-                    toTokensBridgeQuotes[idx]?.exchangeRate,
+                    toTokensBridgeQuotes?.[idx]?.exchangeRate,
                     18, //manually set this for now
                     4
                   )}
diff --git a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
index 22369b7ad5..72c02dbeea 100644
--- a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
@@ -32,8 +32,6 @@ const SelectSpecificTokenButton = ({
   alternateBackground?: boolean
   exchangeRate?: string
 }) => {
-  exchangeRate && console.log('exchangeRate:', exchangeRate)
-
   const ref = useRef<any>(null)
   const isCurrentlySelected = selectedToken?.routeSymbol === token?.routeSymbol
   const { fromChainId, toChainId, fromToken, toToken } = useBridgeState()
diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 3e4f7db672..bfd8710037 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -24,7 +24,8 @@ export default function Updater(): null {
   }: BridgeState = useBridgeState()
 
   useEffect(() => {
-    if (fromChainId && toChainId && fromToken && fromValue && synapseSDK) {
+    if (fromChainId && toChainId && fromToken && synapseSDK) {
+      const hasFromValue: boolean = fromValue !== ''
       const bridgeQuoteRequests: BridgeQuoteRequest[] = toTokens.map(
         (token: Token) => {
           return {
@@ -33,7 +34,10 @@ export default function Updater(): null {
             destinationChainId: toChainId,
             destinationTokenAddress: token?.addresses[toChainId] as Address,
             destinationToken: token as Token,
-            amount: stringToBigInt(fromValue, fromToken.decimals[fromChainId]),
+            amount: stringToBigInt(
+              hasFromValue ? fromValue : '1',
+              fromToken.decimals[fromChainId]
+            ),
           }
         }
       )

From 0caac537294a0f6c0cde3ce9a7dced75a55e560d Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 28 Sep 2023 18:27:05 -0700
Subject: [PATCH 027/106] Add state/reducer for fetchAndStoreBridgeQuotes
 status

---
 packages/synapse-interface/slices/bridge/reducer.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/synapse-interface/slices/bridge/reducer.ts b/packages/synapse-interface/slices/bridge/reducer.ts
index dbb26a8e33..90bbc07e6d 100644
--- a/packages/synapse-interface/slices/bridge/reducer.ts
+++ b/packages/synapse-interface/slices/bridge/reducer.ts
@@ -24,6 +24,7 @@ import {
 import { fetchAndStoreBridgeQuotes } from './hooks'
 import { BridgeQuoteResponse } from '@/utils/actions/fetchBridgeQuotes'
 import { findValidToken } from '@/utils/findValidToken'
+import { FetchState } from '../portfolio/actions'
 
 export interface BridgeState {
   fromChainId: number
@@ -38,6 +39,7 @@ export interface BridgeState {
   fromValue: string
   bridgeQuote: BridgeQuote
   toTokensBridgeQuotes: BridgeQuoteResponse[]
+  toTokensBridgeQuotesStatus: FetchState
   isLoading: boolean
   deadlineMinutes: number | null
   destinationAddress: Address | null
@@ -74,6 +76,7 @@ export const initialState: BridgeState = {
   fromValue: '',
   bridgeQuote: EMPTY_BRIDGE_QUOTE,
   toTokensBridgeQuotes: [],
+  toTokensBridgeQuotesStatus: FetchState.IDLE,
   isLoading: false,
   deadlineMinutes: null,
   destinationAddress: null,
@@ -513,12 +516,19 @@ export const bridgeSlice = createSlice({
           state.pendingBridgeTransactions = action.payload
         }
       )
+      .addCase(fetchAndStoreBridgeQuotes.pending, (state) => {
+        state.toTokensBridgeQuotesStatus = FetchState.LOADING
+      })
       .addCase(
         fetchAndStoreBridgeQuotes.fulfilled,
         (state, action: PayloadAction<BridgeQuoteResponse[]>) => {
           state.toTokensBridgeQuotes = action.payload
+          state.toTokensBridgeQuotesStatus = FetchState.VALID
         }
       )
+      .addCase(fetchAndStoreBridgeQuotes.rejected, (state) => {
+        state.toTokensBridgeQuotesStatus = FetchState.INVALID
+      })
   },
 })
 

From f133d9e11947c106e5495835cb1750457ae3a38c Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 28 Sep 2023 18:28:40 -0700
Subject: [PATCH 028/106] Show exchangeRates only after fetch status is valid

---
 .../StateManagedBridge/ToTokenListOverlay.tsx     | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index ee459a61fe..ab45702288 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -19,6 +19,7 @@ import useCloseOnOutsideClick from '@/utils/hooks/useCloseOnOutsideClick'
 import { CloseButton } from './components/CloseButton'
 import { SearchResults } from './components/SearchResults'
 import { formatBigIntToString } from '@/utils/bigint/format'
+import { FetchState } from '@/slices/portfolio/actions'
 
 export const ToTokenListOverlay = () => {
   const {
@@ -28,6 +29,7 @@ export const ToTokenListOverlay = () => {
     toChainId,
     toToken,
     toTokensBridgeQuotes,
+    toTokensBridgeQuotesStatus,
   }: BridgeState = useBridgeState()
 
   const [currentIdx, setCurrentIdx] = useState(-1)
@@ -193,11 +195,14 @@ export const ToTokenListOverlay = () => {
                   selectedToken={toToken}
                   active={idx === currentIdx}
                   showAllChains={false}
-                  exchangeRate={formatBigIntToString(
-                    toTokensBridgeQuotes?.[idx]?.exchangeRate,
-                    18, //manually set this for now
-                    4
-                  )}
+                  exchangeRate={
+                    toTokensBridgeQuotesStatus === FetchState.VALID &&
+                    formatBigIntToString(
+                      toTokensBridgeQuotes?.[idx]?.exchangeRate,
+                      18, //manually set this for now
+                      4
+                    )
+                  }
                   onClick={() => {
                     if (token === toToken) {
                       onClose()

From e60778a927597067a27b18258c2f21012d35aaa5 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 28 Sep 2023 18:31:24 -0700
Subject: [PATCH 029/106] Add action and reducer to resetFetchedBridgeQuotes

---
 packages/synapse-interface/slices/bridge/actions.ts | 3 +++
 packages/synapse-interface/slices/bridge/reducer.ts | 6 ++++++
 2 files changed, 9 insertions(+)

diff --git a/packages/synapse-interface/slices/bridge/actions.ts b/packages/synapse-interface/slices/bridge/actions.ts
index c8afb8e28c..18cf41aa27 100644
--- a/packages/synapse-interface/slices/bridge/actions.ts
+++ b/packages/synapse-interface/slices/bridge/actions.ts
@@ -28,3 +28,6 @@ export const removePendingBridgeTransaction = createAction<number>(
 export const updatePendingBridgeTransactions = createAction<
   PendingBridgeTransaction[]
 >('bridge/updatePendingBridgeTransactions')
+export const resetFetchedBridgeQuotes = createAction<void>(
+  'bridge/resetFetchedBridgeQuotes'
+)
diff --git a/packages/synapse-interface/slices/bridge/reducer.ts b/packages/synapse-interface/slices/bridge/reducer.ts
index 90bbc07e6d..d5fe9accd0 100644
--- a/packages/synapse-interface/slices/bridge/reducer.ts
+++ b/packages/synapse-interface/slices/bridge/reducer.ts
@@ -18,6 +18,7 @@ import {
   PendingBridgeTransaction,
   addPendingBridgeTransaction,
   removePendingBridgeTransaction,
+  resetFetchedBridgeQuotes,
   updatePendingBridgeTransaction,
   updatePendingBridgeTransactions,
 } from './actions'
@@ -529,6 +530,11 @@ export const bridgeSlice = createSlice({
       .addCase(fetchAndStoreBridgeQuotes.rejected, (state) => {
         state.toTokensBridgeQuotesStatus = FetchState.INVALID
       })
+      .addCase(resetFetchedBridgeQuotes, (state) => {
+        state.toTokensBridgeQuotes = initialState.toTokensBridgeQuotes
+        state.toTokensBridgeQuotesStatus =
+          initialState.toTokensBridgeQuotesStatus
+      })
   },
 })
 

From 4d93c72c39b90ef1ed7ad9802030836407d21c69 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 28 Sep 2023 18:33:03 -0700
Subject: [PATCH 030/106] Reset fetched bridge quotes if fromToken is reset or
 is null

---
 packages/synapse-interface/slices/bridge/updater.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index bfd8710037..d76bcf2f1a 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -8,6 +8,7 @@ import {
   fetchBridgeQuotes,
 } from '@/utils/actions/fetchBridgeQuotes'
 import { fetchAndStoreBridgeQuotes } from '@/slices/bridge/hooks'
+import { resetFetchedBridgeQuotes } from './actions'
 import { BridgeQuote, Token } from '@/utils/types'
 import { stringToBigInt } from '@/utils/bigint/format'
 import { useSynapseContext } from '@/utils/providers/SynapseProvider'
@@ -49,6 +50,10 @@ export default function Updater(): null {
         })
       )
     }
+
+    if (!fromToken) {
+      dispatch(resetFetchedBridgeQuotes())
+    }
   }, [fromChainId, toChainId, fromToken, fromValue, toTokens, synapseSDK])
 
   return null

From 2c2ede75237548a30df281549d5a7234fbee281e Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 29 Sep 2023 12:15:02 -0700
Subject: [PATCH 031/106] Reset fetched bridge quotes if no toChainId exists

---
 packages/synapse-interface/slices/bridge/updater.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index d76bcf2f1a..b401a402ec 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -51,7 +51,7 @@ export default function Updater(): null {
       )
     }
 
-    if (!fromToken) {
+    if (!fromToken && !toChainId) {
       dispatch(resetFetchedBridgeQuotes())
     }
   }, [fromChainId, toChainId, fromToken, fromValue, toTokens, synapseSDK])

From 605af4d4077346caeed638582553b4789b8c889c Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 29 Sep 2023 12:47:47 -0700
Subject: [PATCH 032/106] calculateEstimatedTransactionTime util function

---
 .../calculateEstimatedTransactionTime.tsx     | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 packages/synapse-interface/utils/calculateEstimatedTransactionTime.tsx

diff --git a/packages/synapse-interface/utils/calculateEstimatedTransactionTime.tsx b/packages/synapse-interface/utils/calculateEstimatedTransactionTime.tsx
new file mode 100644
index 0000000000..5171871e28
--- /dev/null
+++ b/packages/synapse-interface/utils/calculateEstimatedTransactionTime.tsx
@@ -0,0 +1,39 @@
+import { Chain, Token } from './types'
+import { Address } from 'viem'
+import { BRIDGE_REQUIRED_CONFIRMATIONS } from '@/constants/bridge'
+import { tokenAddressToToken } from '@/constants/tokens'
+import { ARBITRUM, ETH } from '@/constants/chains/master'
+import { USDC } from '@/constants/tokens/bridgeable'
+import { CHAINS_BY_ID } from '@/constants/chains'
+
+export const calculateEstimatedTransactionTime = ({
+  originChainId,
+  originTokenAddress,
+}: {
+  originChainId: number
+  originTokenAddress: Address
+}): number => {
+  const originChain: Chain = CHAINS_BY_ID[originChainId]
+  const originToken: Token = tokenAddressToToken(
+    originChainId,
+    originTokenAddress
+  )
+  const baseEstimatedCompletionInSeconds: number =
+    (BRIDGE_REQUIRED_CONFIRMATIONS[originChainId] * originChain.blockTime) /
+    1000
+
+  let estimatedCompletionInSeconds: number
+
+  // Specific to CCTP Transactions
+  if (originChainId === ARBITRUM.id || originChainId === ETH.id) {
+    const isCCTP: boolean = originTokenAddress === USDC.addresses[originChainId]
+    const attestationTime: number = 13 * 60
+
+    estimatedCompletionInSeconds =
+      baseEstimatedCompletionInSeconds + attestationTime
+
+    return estimatedCompletionInSeconds
+  }
+
+  return estimatedCompletionInSeconds
+}

From ea6b3c6b029e20784d568342752cb1d657b39ef3 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 29 Sep 2023 12:50:45 -0700
Subject: [PATCH 033/106] Pass in estimatedDuration prop to
 SelectSpecificTokenButton to populate token selection

---
 .../StateManagedBridge/ToTokenListOverlay.tsx         | 11 +++++++++++
 .../components/SelectSpecificTokenButton.tsx          |  2 ++
 .../utils/calculateEstimatedTransactionTime.tsx       |  4 +++-
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index ab45702288..f56ebf5237 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import { useEffect, useRef, useState } from 'react'
 import { useDispatch } from 'react-redux'
+import { Address } from 'viem'
 import Fuse from 'fuse.js'
 
 import { useKeyPress } from '@hooks/useKeyPress'
@@ -20,6 +21,7 @@ import { CloseButton } from './components/CloseButton'
 import { SearchResults } from './components/SearchResults'
 import { formatBigIntToString } from '@/utils/bigint/format'
 import { FetchState } from '@/slices/portfolio/actions'
+import { calculateEstimatedTransactionTime } from '@/utils/calculateEstimatedTransactionTime'
 
 export const ToTokenListOverlay = () => {
   const {
@@ -203,6 +205,15 @@ export const ToTokenListOverlay = () => {
                       4
                     )
                   }
+                  estimatedDuration={
+                    toTokensBridgeQuotesStatus === FetchState.VALID &&
+                    calculateEstimatedTransactionTime({
+                      originChainId: fromChainId,
+                      originTokenAddress: fromToken.addresses[
+                        fromChainId
+                      ] as Address,
+                    })
+                  }
                   onClick={() => {
                     if (token === toToken) {
                       onClose()
diff --git a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
index 72c02dbeea..908bdd3559 100644
--- a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
@@ -22,6 +22,7 @@ const SelectSpecificTokenButton = ({
   onClick,
   alternateBackground = false,
   exchangeRate,
+  estimatedDuration,
 }: {
   showAllChains?: boolean
   isOrigin: boolean
@@ -31,6 +32,7 @@ const SelectSpecificTokenButton = ({
   onClick: () => void
   alternateBackground?: boolean
   exchangeRate?: string
+  estimatedDuration?: number
 }) => {
   const ref = useRef<any>(null)
   const isCurrentlySelected = selectedToken?.routeSymbol === token?.routeSymbol
diff --git a/packages/synapse-interface/utils/calculateEstimatedTransactionTime.tsx b/packages/synapse-interface/utils/calculateEstimatedTransactionTime.tsx
index 5171871e28..5d3d10fc04 100644
--- a/packages/synapse-interface/utils/calculateEstimatedTransactionTime.tsx
+++ b/packages/synapse-interface/utils/calculateEstimatedTransactionTime.tsx
@@ -32,7 +32,9 @@ export const calculateEstimatedTransactionTime = ({
     estimatedCompletionInSeconds =
       baseEstimatedCompletionInSeconds + attestationTime
 
-    return estimatedCompletionInSeconds
+    return isCCTP
+      ? estimatedCompletionInSeconds
+      : baseEstimatedCompletionInSeconds
   }
 
   return estimatedCompletionInSeconds

From c00a458d92a9b7be4664019229f919390ecd3d94 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 29 Sep 2023 12:53:48 -0700
Subject: [PATCH 034/106] Add comments

---
 .../StateManagedBridge/components/SelectSpecificTokenButton.tsx | 1 +
 .../utils/calculateEstimatedTransactionTime.tsx                 | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
index 908bdd3559..e72724270c 100644
--- a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
@@ -34,6 +34,7 @@ const SelectSpecificTokenButton = ({
   exchangeRate?: string
   estimatedDuration?: number
 }) => {
+  estimatedDuration && console.log('estimatedDuration: ', estimatedDuration)
   const ref = useRef<any>(null)
   const isCurrentlySelected = selectedToken?.routeSymbol === token?.routeSymbol
   const { fromChainId, toChainId, fromToken, toToken } = useBridgeState()
diff --git a/packages/synapse-interface/utils/calculateEstimatedTransactionTime.tsx b/packages/synapse-interface/utils/calculateEstimatedTransactionTime.tsx
index 5d3d10fc04..6e24e4b428 100644
--- a/packages/synapse-interface/utils/calculateEstimatedTransactionTime.tsx
+++ b/packages/synapse-interface/utils/calculateEstimatedTransactionTime.tsx
@@ -6,6 +6,8 @@ import { ARBITRUM, ETH } from '@/constants/chains/master'
 import { USDC } from '@/constants/tokens/bridgeable'
 import { CHAINS_BY_ID } from '@/constants/chains'
 
+// Utility function to fetch estimated transaction time
+// Returned as a number, in seconds
 export const calculateEstimatedTransactionTime = ({
   originChainId,
   originTokenAddress,

From f2cdd29ba41ffc3132d3be1aed0ff00b4284e26b Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 29 Sep 2023 12:58:07 -0700
Subject: [PATCH 035/106] Add estimatedDurationInSeconds as prop in
 OptionDetails component, display duration in minute format

---
 .../StateManagedBridge/ToTokenListOverlay.tsx |  2 +-
 .../components/SelectSpecificTokenButton.tsx  | 38 ++++++++++++++-----
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index f56ebf5237..6bf2252af5 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -205,7 +205,7 @@ export const ToTokenListOverlay = () => {
                       4
                     )
                   }
-                  estimatedDuration={
+                  estimatedDurationInSeconds={
                     toTokensBridgeQuotesStatus === FetchState.VALID &&
                     calculateEstimatedTransactionTime({
                       originChainId: fromChainId,
diff --git a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
index e72724270c..53dcc4832e 100644
--- a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
@@ -22,7 +22,7 @@ const SelectSpecificTokenButton = ({
   onClick,
   alternateBackground = false,
   exchangeRate,
-  estimatedDuration,
+  estimatedDurationInSeconds,
 }: {
   showAllChains?: boolean
   isOrigin: boolean
@@ -32,9 +32,8 @@ const SelectSpecificTokenButton = ({
   onClick: () => void
   alternateBackground?: boolean
   exchangeRate?: string
-  estimatedDuration?: number
+  estimatedDurationInSeconds?: number
 }) => {
-  estimatedDuration && console.log('estimatedDuration: ', estimatedDuration)
   const ref = useRef<any>(null)
   const isCurrentlySelected = selectedToken?.routeSymbol === token?.routeSymbol
   const { fromChainId, toChainId, fromToken, toToken } = useBridgeState()
@@ -84,18 +83,39 @@ const SelectSpecificTokenButton = ({
         isOrigin={isOrigin}
         showAllChains={showAllChains}
       />
-      {exchangeRate && <OptionDetails exchangeRate={exchangeRate} />}
+      {exchangeRate && (
+        <OptionDetails
+          exchangeRate={exchangeRate}
+          estimatedDurationInSeconds={estimatedDurationInSeconds}
+        />
+      )}
     </button>
   )
 }
 
-export const OptionDetails = ({ exchangeRate }: { exchangeRate: string }) => {
+export const OptionDetails = ({
+  exchangeRate,
+  estimatedDurationInSeconds,
+}: {
+  exchangeRate: string
+  estimatedDurationInSeconds: number
+}) => {
+  const estimatedDurationInMinutes: number = Math.floor(
+    estimatedDurationInSeconds / 60
+  )
+
   return (
-    <div data-test-id="exchange-rate" className="flex items-center font-normal">
-      <div className="flex text-sm text-secondary whitespace-nowrap">
-        1&nbsp;:&nbsp;
+    <div data-test-id="option-details" className="flex flex-col">
+      <div
+        data-test-id="exchange-rate"
+        className="flex items-center font-normal"
+      >
+        <div className="flex text-sm text-secondary whitespace-nowrap">
+          1&nbsp;:&nbsp;
+        </div>
+        <div className="mb-[1px] text-primary">{exchangeRate}</div>
       </div>
-      <div className="mb-[1px] text-primary">{exchangeRate}</div>
+      <div> ~ {estimatedDurationInMinutes} min</div>
     </div>
   )
 }

From f2aaee6768d0bdad5d2a333cb3b8f3292c0fbae1 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 29 Sep 2023 12:59:35 -0700
Subject: [PATCH 036/106] Style estimated duration in token selection

---
 .../components/SelectSpecificTokenButton.tsx                  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
index 53dcc4832e..2b56982e52 100644
--- a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
@@ -115,7 +115,9 @@ export const OptionDetails = ({
         </div>
         <div className="mb-[1px] text-primary">{exchangeRate}</div>
       </div>
-      <div> ~ {estimatedDurationInMinutes} min</div>
+      <div className="text-sm text-right text-secondary">
+        {estimatedDurationInMinutes} min
+      </div>
     </div>
   )
 }

From 96e6bbc2fe15be76b0be29e8cecbc1f4495656cf Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 29 Sep 2023 13:05:44 -0700
Subject: [PATCH 037/106] Add util function locateBestExchangeRateIndex

---
 .../utils/actions/fetchBridgeQuotes.tsx           | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index 0c3be5ee12..89c4fcdd5c 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -117,3 +117,18 @@ export async function fetchBridgeQuotes(
     console.error('error from fetchBridgeQuotes: ', e)
   }
 }
+
+function locateBestExchangeRateIndex(
+  quotes: BridgeQuoteResponse[]
+): number | null {
+  if (quotes.length === 0) {
+    return null
+  }
+
+  return quotes.reduce((indexOfHighest, currentQuote, currentIndex) => {
+    if (currentQuote.exchangeRate > quotes[indexOfHighest].exchangeRate) {
+      return currentIndex
+    }
+    return indexOfHighest
+  }, 0)
+}

From f31746bcb81026edebc406b936f041d3f3a83ca7 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 29 Sep 2023 13:09:44 -0700
Subject: [PATCH 038/106] Add isBestExchangeRate bool prop to
 SelectSpecificTokenButton

---
 .../components/StateManagedBridge/ToTokenListOverlay.tsx  | 8 +++++++-
 .../components/SelectSpecificTokenButton.tsx              | 2 ++
 .../synapse-interface/utils/actions/fetchBridgeQuotes.tsx | 2 +-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index 6bf2252af5..3e67adf3b6 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState, useMemo } from 'react'
 import { useDispatch } from 'react-redux'
 import { Address } from 'viem'
 import Fuse from 'fuse.js'
@@ -22,6 +22,7 @@ import { SearchResults } from './components/SearchResults'
 import { formatBigIntToString } from '@/utils/bigint/format'
 import { FetchState } from '@/slices/portfolio/actions'
 import { calculateEstimatedTransactionTime } from '@/utils/calculateEstimatedTransactionTime'
+import { locateBestExchangeRateIndex } from '@/utils/actions/fetchBridgeQuotes'
 
 export const ToTokenListOverlay = () => {
   const {
@@ -166,6 +167,10 @@ export const ToTokenListOverlay = () => {
   console.log('possibleTokens: ', possibleTokens)
   console.log('toTokensBridgeQuotes: ', toTokensBridgeQuotes)
 
+  const bestExchangeRateIndex: number = useMemo(() => {
+    return locateBestExchangeRateIndex(toTokensBridgeQuotes)
+  }, [toTokensBridgeQuotes])
+
   return (
     <div
       ref={overlayRef}
@@ -197,6 +202,7 @@ export const ToTokenListOverlay = () => {
                   selectedToken={toToken}
                   active={idx === currentIdx}
                   showAllChains={false}
+                  isBestExchangeRate={idx === bestExchangeRateIndex}
                   exchangeRate={
                     toTokensBridgeQuotesStatus === FetchState.VALID &&
                     formatBigIntToString(
diff --git a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
index 2b56982e52..3c307eb9b3 100644
--- a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
@@ -22,6 +22,7 @@ const SelectSpecificTokenButton = ({
   onClick,
   alternateBackground = false,
   exchangeRate,
+  isBestExchangeRate = false,
   estimatedDurationInSeconds,
 }: {
   showAllChains?: boolean
@@ -32,6 +33,7 @@ const SelectSpecificTokenButton = ({
   onClick: () => void
   alternateBackground?: boolean
   exchangeRate?: string
+  isBestExchangeRate?: boolean
   estimatedDurationInSeconds?: number
 }) => {
   const ref = useRef<any>(null)
diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index 89c4fcdd5c..68817ea1f9 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -118,7 +118,7 @@ export async function fetchBridgeQuotes(
   }
 }
 
-function locateBestExchangeRateIndex(
+export function locateBestExchangeRateIndex(
   quotes: BridgeQuoteResponse[]
 ): number | null {
   if (quotes.length === 0) {

From fc6b9eee4034ed1ecd425d6cb2910acde70080e5 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 29 Sep 2023 13:18:40 -0700
Subject: [PATCH 039/106] ...

---
 .../components/SelectSpecificTokenButton.tsx               | 7 +++++++
 packages/synapse-interface/slices/bridge/updater.tsx       | 3 ++-
 .../synapse-interface/utils/actions/fetchBridgeQuotes.tsx  | 4 ++--
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
index 3c307eb9b3..6423ea2d2f 100644
--- a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
@@ -36,6 +36,13 @@ const SelectSpecificTokenButton = ({
   isBestExchangeRate?: boolean
   estimatedDurationInSeconds?: number
 }) => {
+  isBestExchangeRate &&
+    console.log(
+      'isBestExchangeRate: ',
+      isBestExchangeRate,
+      ' at token: ',
+      token
+    )
   const ref = useRef<any>(null)
   const isCurrentlySelected = selectedToken?.routeSymbol === token?.routeSymbol
   const { fromChainId, toChainId, fromToken, toToken } = useBridgeState()
diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index b401a402ec..52ddc01704 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -51,7 +51,8 @@ export default function Updater(): null {
       )
     }
 
-    if (!fromToken && !toChainId) {
+    if (!fromToken || !toChainId) {
+      console.log('hit')
       dispatch(resetFetchedBridgeQuotes())
     }
   }, [fromChainId, toChainId, fromToken, fromValue, toTokens, synapseSDK])
diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index 68817ea1f9..cfb1ca7727 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -121,11 +121,11 @@ export async function fetchBridgeQuotes(
 export function locateBestExchangeRateIndex(
   quotes: BridgeQuoteResponse[]
 ): number | null {
-  if (quotes.length === 0) {
+  if (quotes?.length === 0) {
     return null
   }
 
-  return quotes.reduce((indexOfHighest, currentQuote, currentIndex) => {
+  return quotes?.reduce((indexOfHighest, currentQuote, currentIndex) => {
     if (currentQuote.exchangeRate > quotes[indexOfHighest].exchangeRate) {
       return currentIndex
     }

From 065dcbc5de324c3281fca84ae6c95bc86c270246 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 29 Sep 2023 13:25:29 -0700
Subject: [PATCH 040/106] Create OptionTag with BestOptionType interface to
 create multiple options

---
 .../components/SelectSpecificTokenButton.tsx  | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
index 6423ea2d2f..8afa4480f8 100644
--- a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
@@ -36,13 +36,13 @@ const SelectSpecificTokenButton = ({
   isBestExchangeRate?: boolean
   estimatedDurationInSeconds?: number
 }) => {
-  isBestExchangeRate &&
-    console.log(
-      'isBestExchangeRate: ',
-      isBestExchangeRate,
-      ' at token: ',
-      token
-    )
+  // isBestExchangeRate &&
+  //   console.log(
+  //     'isBestExchangeRate: ',
+  //     isBestExchangeRate,
+  //     ' at token: ',
+  //     token
+  //   )
   const ref = useRef<any>(null)
   const isCurrentlySelected = selectedToken?.routeSymbol === token?.routeSymbol
   const { fromChainId, toChainId, fromToken, toToken } = useBridgeState()
@@ -102,6 +102,15 @@ const SelectSpecificTokenButton = ({
   )
 }
 
+export interface BestOptionType {
+  RATE: 'Best rate'
+  SPEED: 'Fastest'
+}
+
+export const OptionTag = ({ type }: { type: BestOptionType }) => {
+  return <div data-test-id="option-tag">{`${type}`}</div>
+}
+
 export const OptionDetails = ({
   exchangeRate,
   estimatedDurationInSeconds,
@@ -115,10 +124,7 @@ export const OptionDetails = ({
 
   return (
     <div data-test-id="option-details" className="flex flex-col">
-      <div
-        data-test-id="exchange-rate"
-        className="flex items-center font-normal"
-      >
+      <div className="flex items-center font-normal">
         <div className="flex text-sm text-secondary whitespace-nowrap">
           1&nbsp;:&nbsp;
         </div>

From b590781ba7511660aa04ed15960f2d5dfff840a2 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 29 Sep 2023 13:29:36 -0700
Subject: [PATCH 041/106] Basic unstyled OptionTag is working

---
 .../components/SelectSpecificTokenButton.tsx       | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
index 8afa4480f8..1bf98bf744 100644
--- a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
@@ -36,13 +36,6 @@ const SelectSpecificTokenButton = ({
   isBestExchangeRate?: boolean
   estimatedDurationInSeconds?: number
 }) => {
-  // isBestExchangeRate &&
-  //   console.log(
-  //     'isBestExchangeRate: ',
-  //     isBestExchangeRate,
-  //     ' at token: ',
-  //     token
-  //   )
   const ref = useRef<any>(null)
   const isCurrentlySelected = selectedToken?.routeSymbol === token?.routeSymbol
   const { fromChainId, toChainId, fromToken, toToken } = useBridgeState()
@@ -92,6 +85,7 @@ const SelectSpecificTokenButton = ({
         isOrigin={isOrigin}
         showAllChains={showAllChains}
       />
+      {isBestExchangeRate && <OptionTag type={BestOptionType.RATE} />}
       {exchangeRate && (
         <OptionDetails
           exchangeRate={exchangeRate}
@@ -102,9 +96,9 @@ const SelectSpecificTokenButton = ({
   )
 }
 
-export interface BestOptionType {
-  RATE: 'Best rate'
-  SPEED: 'Fastest'
+export enum BestOptionType {
+  RATE = 'Best rate',
+  SPEED = 'Fastest',
 }
 
 export const OptionTag = ({ type }: { type: BestOptionType }) => {

From 72b7fcbd381fc7dfc39a5341e412b5c9d4ca6afe Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 29 Sep 2023 13:50:25 -0700
Subject: [PATCH 042/106] Add gradient

---
 .../components/SelectSpecificTokenButton.tsx          | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
index 1bf98bf744..f8a09f4f92 100644
--- a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
@@ -102,7 +102,16 @@ export enum BestOptionType {
 }
 
 export const OptionTag = ({ type }: { type: BestOptionType }) => {
-  return <div data-test-id="option-tag">{`${type}`}</div>
+  return (
+    <div
+      data-test-id="option-tag"
+      className="flex text-sm whitespace-nowrap text-primary"
+      style={{
+        background:
+          'linear-gradient(to right, rgba(128, 0, 255, 1), rgba(255, 0, 191, 1))',
+      }}
+    >{`${type}`}</div>
+  )
 }
 
 export const OptionDetails = ({

From a46fb3b4468b85cf30956377b3c1e54c17a0163d Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Sat, 30 Sep 2023 10:08:24 -0700
Subject: [PATCH 043/106] Style tag

---
 .../StateManagedBridge/components/SelectSpecificTokenButton.tsx | 2 +-
 packages/synapse-interface/slices/bridge/updater.tsx            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
index f8a09f4f92..003445289b 100644
--- a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
@@ -105,7 +105,7 @@ export const OptionTag = ({ type }: { type: BestOptionType }) => {
   return (
     <div
       data-test-id="option-tag"
-      className="flex text-sm whitespace-nowrap text-primary"
+      className="flex px-2.5 mr-3 text-sm whitespace-nowrap text-primary rounded-xl"
       style={{
         background:
           'linear-gradient(to right, rgba(128, 0, 255, 1), rgba(255, 0, 191, 1))',
diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 52ddc01704..acb4139f2c 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -51,7 +51,7 @@ export default function Updater(): null {
       )
     }
 
-    if (!fromToken || !toChainId) {
+    if (!fromToken) {
       console.log('hit')
       dispatch(resetFetchedBridgeQuotes())
     }

From 40687ddcd3d7b7c88fdc53f3ef843aab88078c00 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Sat, 30 Sep 2023 10:09:07 -0700
Subject: [PATCH 044/106] Render tag only if exchangeRate available

---
 .../components/SelectSpecificTokenButton.tsx                  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
index 003445289b..1b3707104d 100644
--- a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
@@ -85,7 +85,9 @@ const SelectSpecificTokenButton = ({
         isOrigin={isOrigin}
         showAllChains={showAllChains}
       />
-      {isBestExchangeRate && <OptionTag type={BestOptionType.RATE} />}
+      {exchangeRate && isBestExchangeRate && (
+        <OptionTag type={BestOptionType.RATE} />
+      )}
       {exchangeRate && (
         <OptionDetails
           exchangeRate={exchangeRate}

From 998a34d073734a5eb9b78d034210b7e049705bc2 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Mon, 2 Oct 2023 09:55:25 -0700
Subject: [PATCH 045/106] Add destinationChainId in response for
 fetchBridgeQuotes

---
 packages/synapse-interface/slices/bridge/updater.tsx           | 2 +-
 packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index acb4139f2c..e66f5ecbbd 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -26,6 +26,7 @@ export default function Updater(): null {
 
   useEffect(() => {
     if (fromChainId && toChainId && fromToken && synapseSDK) {
+      console.log('toChainId: ', toChainId)
       const hasFromValue: boolean = fromValue !== ''
       const bridgeQuoteRequests: BridgeQuoteRequest[] = toTokens.map(
         (token: Token) => {
@@ -52,7 +53,6 @@ export default function Updater(): null {
     }
 
     if (!fromToken) {
-      console.log('hit')
       dispatch(resetFetchedBridgeQuotes())
     }
   }, [fromChainId, toChainId, fromToken, fromValue, toTokens, synapseSDK])
diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index cfb1ca7727..66397ec4d2 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -11,6 +11,7 @@ import { calculateExchangeRate } from '../calculateExchangeRate'
 
 export interface BridgeQuoteResponse extends BridgeQuote {
   destinationToken: Token
+  destinationChainId: number
 }
 
 export interface BridgeQuoteRequest {
@@ -92,6 +93,7 @@ export async function fetchBridgeQuote(
         destQuery: newDestQuery,
       },
       destinationToken: request.destinationToken,
+      destinationChainId: destinationChainId,
     }
   }
 }
@@ -115,6 +117,7 @@ export async function fetchBridgeQuotes(
     return bridgeQuotes
   } catch (e) {
     console.error('error from fetchBridgeQuotes: ', e)
+    return []
   }
 }
 

From ddf98526f9a34fa22975e2d51145373d554914d1 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Mon, 2 Oct 2023 10:01:23 -0700
Subject: [PATCH 046/106] Ensure quote does not show unless destinationChainId
 matches, solve for case when connected chain id is default toChainId

---
 .../StateManagedBridge/ToTokenListOverlay.tsx          | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index 3e67adf3b6..ef9f193512 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -164,8 +164,12 @@ export const ToTokenListOverlay = () => {
     onClose()
   }
 
-  console.log('possibleTokens: ', possibleTokens)
-  console.log('toTokensBridgeQuotes: ', toTokensBridgeQuotes)
+  const bridgeQuotesMatchDestination: boolean = useMemo(() => {
+    return (
+      Array.isArray(toTokensBridgeQuotes) &&
+      toTokensBridgeQuotes[0]?.destinationChainId === toChainId
+    )
+  }, [toTokensBridgeQuotes, toChainId])
 
   const bestExchangeRateIndex: number = useMemo(() => {
     return locateBestExchangeRateIndex(toTokensBridgeQuotes)
@@ -205,6 +209,7 @@ export const ToTokenListOverlay = () => {
                   isBestExchangeRate={idx === bestExchangeRateIndex}
                   exchangeRate={
                     toTokensBridgeQuotesStatus === FetchState.VALID &&
+                    bridgeQuotesMatchDestination &&
                     formatBigIntToString(
                       toTokensBridgeQuotes?.[idx]?.exchangeRate,
                       18, //manually set this for now
@@ -213,6 +218,7 @@ export const ToTokenListOverlay = () => {
                   }
                   estimatedDurationInSeconds={
                     toTokensBridgeQuotesStatus === FetchState.VALID &&
+                    bridgeQuotesMatchDestination &&
                     calculateEstimatedTransactionTime({
                       originChainId: fromChainId,
                       originTokenAddress: fromToken.addresses[

From 66fc512bfcfc171e7fefa87b6ae5b5b62e7b9bc6 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Mon, 2 Oct 2023 10:04:35 -0700
Subject: [PATCH 047/106] Style OptionTag

---
 .../components/SelectSpecificTokenButton.tsx                  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
index 1b3707104d..e0c5044fe3 100644
--- a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
@@ -107,10 +107,10 @@ export const OptionTag = ({ type }: { type: BestOptionType }) => {
   return (
     <div
       data-test-id="option-tag"
-      className="flex px-2.5 mr-3 text-sm whitespace-nowrap text-primary rounded-xl"
+      className="flex px-3 py-0.5 mr-3 text-sm whitespace-nowrap text-primary rounded-xl"
       style={{
         background:
-          'linear-gradient(to right, rgba(128, 0, 255, 1), rgba(255, 0, 191, 1))',
+          'linear-gradient(to right, rgba(128, 0, 255, 0.2), rgba(255, 0, 191, 0.2))',
       }}
     >{`${type}`}</div>
   )

From e8479af7a41efd1cc1fe235fe2175dec7fdee3c7 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Mon, 2 Oct 2023 11:58:36 -0700
Subject: [PATCH 048/106] Match bridgeQuotes based on destinationToken and not
 array positioning

---
 .../StateManagedBridge/ToTokenListOverlay.tsx        | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index ef9f193512..2a30577b2a 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -22,7 +22,10 @@ import { SearchResults } from './components/SearchResults'
 import { formatBigIntToString } from '@/utils/bigint/format'
 import { FetchState } from '@/slices/portfolio/actions'
 import { calculateEstimatedTransactionTime } from '@/utils/calculateEstimatedTransactionTime'
-import { locateBestExchangeRateIndex } from '@/utils/actions/fetchBridgeQuotes'
+import {
+  locateBestExchangeRateIndex,
+  BridgeQuoteResponse,
+} from '@/utils/actions/fetchBridgeQuotes'
 
 export const ToTokenListOverlay = () => {
   const {
@@ -164,6 +167,8 @@ export const ToTokenListOverlay = () => {
     onClose()
   }
 
+  console.log('toTokensBridgeQuotes: ', toTokensBridgeQuotes)
+
   const bridgeQuotesMatchDestination: boolean = useMemo(() => {
     return (
       Array.isArray(toTokensBridgeQuotes) &&
@@ -211,7 +216,10 @@ export const ToTokenListOverlay = () => {
                     toTokensBridgeQuotesStatus === FetchState.VALID &&
                     bridgeQuotesMatchDestination &&
                     formatBigIntToString(
-                      toTokensBridgeQuotes?.[idx]?.exchangeRate,
+                      toTokensBridgeQuotes.filter(
+                        (bridgeQuotes: BridgeQuoteResponse) =>
+                          bridgeQuotes.destinationToken === token
+                      )?.[0]?.exchangeRate,
                       18, //manually set this for now
                       4
                     )

From 873f2d6a51643da65880842b4f92cbb5e27ade34 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Mon, 2 Oct 2023 12:13:51 -0700
Subject: [PATCH 049/106] Init getDefaultBridgeAmount util function

---
 .../synapse-interface/slices/bridge/updater.tsx     | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index e66f5ecbbd..e866ea0a5a 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -26,7 +26,6 @@ export default function Updater(): null {
 
   useEffect(() => {
     if (fromChainId && toChainId && fromToken && synapseSDK) {
-      console.log('toChainId: ', toChainId)
       const hasFromValue: boolean = fromValue !== ''
       const bridgeQuoteRequests: BridgeQuoteRequest[] = toTokens.map(
         (token: Token) => {
@@ -59,3 +58,15 @@ export default function Updater(): null {
 
   return null
 }
+
+enum DefaultBridgeAmount {
+  STABLE = '50',
+  ETH = '0.01',
+  BTC = '0.001',
+}
+
+export const getDefaultBridgeAmount = ({
+  originToken,
+}: {
+  originToken: Token
+}) => {}

From 91481185d0b2d0fb404052a44dec732f02a23d7d Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Mon, 2 Oct 2023 12:17:50 -0700
Subject: [PATCH 050/106] Create required enums to construct respective
 getDefaultBridgeAmount func

---
 .../slices/bridge/updater.tsx                 | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index e866ea0a5a..8333221cc2 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -59,6 +59,12 @@ export default function Updater(): null {
   return null
 }
 
+enum SwappableTypes {
+  STABLE = 'USD',
+  ETH = 'ETH',
+  BTC = 'WBTC',
+}
+
 enum DefaultBridgeAmount {
   STABLE = '50',
   ETH = '0.01',
@@ -69,4 +75,15 @@ export const getDefaultBridgeAmount = ({
   originToken,
 }: {
   originToken: Token
-}) => {}
+}): DefaultBridgeAmount => {
+  const swappableType: string = originToken.swapableType
+
+  switch (swappableType) {
+    case SwappableTypes.STABLE:
+      return DefaultBridgeAmount.STABLE
+    case SwappableTypes.ETH:
+      return DefaultBridgeAmount.ETH
+    case SwappableTypes.BTC:
+      return DefaultBridgeAmount.BTC
+  }
+}

From 673e557d2f474e62656d6036eedc629336848d45 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Mon, 2 Oct 2023 12:18:34 -0700
Subject: [PATCH 051/106] ...

---
 packages/synapse-interface/slices/bridge/updater.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 8333221cc2..856c7a03db 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -36,7 +36,7 @@ export default function Updater(): null {
             destinationTokenAddress: token?.addresses[toChainId] as Address,
             destinationToken: token as Token,
             amount: stringToBigInt(
-              hasFromValue ? fromValue : '1',
+              hasFromValue ? fromValue : getDefaultBridgeAmount(fromToken),
               fromToken.decimals[fromChainId]
             ),
           }
@@ -71,11 +71,9 @@ enum DefaultBridgeAmount {
   BTC = '0.001',
 }
 
-export const getDefaultBridgeAmount = ({
-  originToken,
-}: {
+export const getDefaultBridgeAmount = (
   originToken: Token
-}): DefaultBridgeAmount => {
+): DefaultBridgeAmount => {
   const swappableType: string = originToken.swapableType
 
   switch (swappableType) {

From b57ad1fd6f83426d84a09f8b1a474c3a5c144ba4 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Mon, 2 Oct 2023 12:33:50 -0700
Subject: [PATCH 052/106] Update locateBestExchangeRateToken to match best rate
 by Token

---
 .../utils/actions/fetchBridgeQuotes.tsx         | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index 66397ec4d2..7705f158d9 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -121,17 +121,20 @@ export async function fetchBridgeQuotes(
   }
 }
 
-export function locateBestExchangeRateIndex(
+export function locateBestExchangeRateToken(
   quotes: BridgeQuoteResponse[]
-): number | null {
+): Token | null {
   if (quotes?.length === 0) {
     return null
   }
 
-  return quotes?.reduce((indexOfHighest, currentQuote, currentIndex) => {
-    if (currentQuote.exchangeRate > quotes[indexOfHighest].exchangeRate) {
-      return currentIndex
+  let bestQuote: BridgeQuoteResponse | null = null
+
+  quotes.forEach((quote) => {
+    if (!bestQuote || quote.exchangeRate > bestQuote.exchangeRate) {
+      bestQuote = quote
     }
-    return indexOfHighest
-  }, 0)
+  })
+
+  return bestQuote ? bestQuote.destinationToken : null
 }

From fa491d776035a8edc95e36d83eb68b75d2d1c966 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Mon, 2 Oct 2023 12:35:04 -0700
Subject: [PATCH 053/106] Proprogate bestExchangeRateToken changes to
 ToTokenListOverlay

---
 .../components/StateManagedBridge/ToTokenListOverlay.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index 2a30577b2a..6d821fff3b 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -23,7 +23,7 @@ import { formatBigIntToString } from '@/utils/bigint/format'
 import { FetchState } from '@/slices/portfolio/actions'
 import { calculateEstimatedTransactionTime } from '@/utils/calculateEstimatedTransactionTime'
 import {
-  locateBestExchangeRateIndex,
+  locateBestExchangeRateToken,
   BridgeQuoteResponse,
 } from '@/utils/actions/fetchBridgeQuotes'
 
@@ -176,8 +176,8 @@ export const ToTokenListOverlay = () => {
     )
   }, [toTokensBridgeQuotes, toChainId])
 
-  const bestExchangeRateIndex: number = useMemo(() => {
-    return locateBestExchangeRateIndex(toTokensBridgeQuotes)
+  const bestExchangeRateToken: Token = useMemo(() => {
+    return locateBestExchangeRateToken(toTokensBridgeQuotes)
   }, [toTokensBridgeQuotes])
 
   return (
@@ -211,7 +211,7 @@ export const ToTokenListOverlay = () => {
                   selectedToken={toToken}
                   active={idx === currentIdx}
                   showAllChains={false}
-                  isBestExchangeRate={idx === bestExchangeRateIndex}
+                  isBestExchangeRate={token === bestExchangeRateToken}
                   exchangeRate={
                     toTokensBridgeQuotesStatus === FetchState.VALID &&
                     bridgeQuotesMatchDestination &&

From 1134490a0419ea08a57c67b744edca7e6f5a85e1 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Mon, 2 Oct 2023 12:35:24 -0700
Subject: [PATCH 054/106] clean

---
 .../components/StateManagedBridge/ToTokenListOverlay.tsx        | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index 6d821fff3b..c7c29b710e 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -167,8 +167,6 @@ export const ToTokenListOverlay = () => {
     onClose()
   }
 
-  console.log('toTokensBridgeQuotes: ', toTokensBridgeQuotes)
-
   const bridgeQuotesMatchDestination: boolean = useMemo(() => {
     return (
       Array.isArray(toTokensBridgeQuotes) &&

From 1ab1da8cc85b91e600dc956f076ec07617d917d4 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Mon, 2 Oct 2023 16:27:11 -0700
Subject: [PATCH 055/106] Fix NaN bug

---
 .../components/StateManagedBridge/ToTokenListOverlay.tsx | 9 +++++++++
 .../utils/calculateEstimatedTransactionTime.tsx          | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index c7c29b710e..599f641ae0 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -201,6 +201,15 @@ export const ToTokenListOverlay = () => {
           </div>
           <div className="px-2 pb-2 md:px-2">
             {possibleTokens.map((token: Token, idx: number) => {
+              console.log(
+                'expectedTime:',
+                calculateEstimatedTransactionTime({
+                  originChainId: fromChainId,
+                  originTokenAddress: fromToken.addresses[
+                    fromChainId
+                  ] as Address,
+                })
+              )
               return (
                 <SelectSpecificTokenButton
                   isOrigin={false}
diff --git a/packages/synapse-interface/utils/calculateEstimatedTransactionTime.tsx b/packages/synapse-interface/utils/calculateEstimatedTransactionTime.tsx
index 6e24e4b428..65e1465e71 100644
--- a/packages/synapse-interface/utils/calculateEstimatedTransactionTime.tsx
+++ b/packages/synapse-interface/utils/calculateEstimatedTransactionTime.tsx
@@ -39,5 +39,5 @@ export const calculateEstimatedTransactionTime = ({
       : baseEstimatedCompletionInSeconds
   }
 
-  return estimatedCompletionInSeconds
+  return baseEstimatedCompletionInSeconds
 }

From ee39e42fbd893c018c75474ad753a8c9ca9a08fd Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Mon, 2 Oct 2023 17:30:38 -0700
Subject: [PATCH 056/106] ...

---
 .../components/StateManagedBridge/ToTokenListOverlay.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index 599f641ae0..c7c29b710e 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -201,15 +201,6 @@ export const ToTokenListOverlay = () => {
           </div>
           <div className="px-2 pb-2 md:px-2">
             {possibleTokens.map((token: Token, idx: number) => {
-              console.log(
-                'expectedTime:',
-                calculateEstimatedTransactionTime({
-                  originChainId: fromChainId,
-                  originTokenAddress: fromToken.addresses[
-                    fromChainId
-                  ] as Address,
-                })
-              )
               return (
                 <SelectSpecificTokenButton
                   isOrigin={false}

From 8bba04a40d2ba879da6521d279c91dbcea8eb34e Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Tue, 3 Oct 2023 11:17:46 -0700
Subject: [PATCH 057/106] Clean

---
 .../components/Portfolio/Transaction/PendingTransaction.tsx  | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx b/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx
index 4c4efdc7f5..dd33a21018 100644
--- a/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx
+++ b/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx
@@ -264,11 +264,6 @@ const TransactionStatusDetails = ({
               className="flex cursor-pointer hover:bg-[#101018] rounded-sm hover:text-[#FFDD33] hover:underline p-1 ml-1 items-center"
               onClick={handleSynapseExplorerTxClick}
             >
-              {/* <Image
-                className="w-4 h-4 ml-1 mr-1.5 my-auto rounded-full"
-                src={destinationChain.explorerImg}
-                alt={`${destinationChain.explorerName} logo`}
-              /> */}
               <div className="text-[#FFDD33]">Taking longer than expected.</div>
             </div>
             <TransactionOptions

From 659017156ac873ccd8d606fb2a090668e10337a0 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Tue, 3 Oct 2023 16:41:36 -0700
Subject: [PATCH 058/106] Add maxConcurrentRequests and requestDelay to limit
 single overload + throttle fetchBridgeQuotes call

---
 .../utils/actions/fetchBridgeQuotes.tsx       | 34 +++++++++++++------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index 7705f158d9..e56532cbdd 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -100,20 +100,34 @@ export async function fetchBridgeQuote(
 
 export async function fetchBridgeQuotes(
   requests: BridgeQuoteRequest[],
-  synapseSDK: any
+  synapseSDK: any,
+  maxConcurrentRequests: number = 10, // Set the maximum number of concurrent requests
+  requestDelay: number = 1000 // Set the delay between requests in milliseconds (adjust as needed)
 ): Promise<BridgeQuoteResponse[]> {
   try {
-    const bridgeQuotesPromises: Promise<BridgeQuoteResponse>[] = requests.map(
-      async (request: BridgeQuoteRequest) => {
-        const results: BridgeQuoteResponse = await fetchBridgeQuote(
-          request,
-          synapseSDK
-        )
+    const bridgeQuotes: BridgeQuoteResponse[] = []
+
+    for (let i = 0; i < requests.length; i += maxConcurrentRequests) {
+      const batchRequests = requests.slice(i, i + maxConcurrentRequests)
+      const bridgeQuotesPromises: Promise<BridgeQuoteResponse>[] =
+        batchRequests.map(async (request: BridgeQuoteRequest) => {
+          const results: BridgeQuoteResponse = await fetchBridgeQuote(
+            request,
+            synapseSDK
+          )
+
+          return results
+        })
 
-        return results
+      const batchBridgeQuotes = await Promise.all(bridgeQuotesPromises)
+      bridgeQuotes.push(...batchBridgeQuotes)
+
+      // Add a delay between batches of requests to avoid overloading the server
+      if (i + maxConcurrentRequests < requests.length) {
+        await new Promise((resolve) => setTimeout(resolve, requestDelay))
       }
-    )
-    const bridgeQuotes = await Promise.all(bridgeQuotesPromises)
+    }
+
     return bridgeQuotes
   } catch (e) {
     console.error('error from fetchBridgeQuotes: ', e)

From b000008e6247435dc183a7cdd5461b9a7a1e5c6b Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Tue, 3 Oct 2023 16:47:44 -0700
Subject: [PATCH 059/106] Debounce user input in Bridge updater to prevent
 alternative quote fetching, initial 5000ms

---
 .../slices/bridge/updater.tsx                 | 31 ++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 856c7a03db..1285949ece 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react'
+import { useEffect, useState } from 'react'
 import { useAppDispatch } from '@/store/hooks'
 import { Address } from 'viem'
 import { useBridgeState } from '@/slices/bridge/hooks'
@@ -23,10 +23,24 @@ export default function Updater(): null {
     toTokens,
     fromValue,
   }: BridgeState = useBridgeState()
+  const [debouncedFromValue, setDebouncedFromValue] =
+    useState<string>(fromValue)
 
+  // Debounce user input to prevent unnecessary quote fetching
+  useEffect(() => {
+    const debounceDelay = 500
+
+    const debounceTimer = setTimeout(() => {
+      setDebouncedFromValue(fromValue)
+    }, debounceDelay)
+
+    return () => clearTimeout(debounceTimer)
+  }, [fromValue])
+
+  // Conditions for fetching alternative bridge quotes
   useEffect(() => {
     if (fromChainId && toChainId && fromToken && synapseSDK) {
-      const hasFromValue: boolean = fromValue !== ''
+      const hasFromValue: boolean = debouncedFromValue !== ''
       const bridgeQuoteRequests: BridgeQuoteRequest[] = toTokens.map(
         (token: Token) => {
           return {
@@ -36,7 +50,9 @@ export default function Updater(): null {
             destinationTokenAddress: token?.addresses[toChainId] as Address,
             destinationToken: token as Token,
             amount: stringToBigInt(
-              hasFromValue ? fromValue : getDefaultBridgeAmount(fromToken),
+              hasFromValue
+                ? debouncedFromValue
+                : getDefaultBridgeAmount(fromToken),
               fromToken.decimals[fromChainId]
             ),
           }
@@ -54,7 +70,14 @@ export default function Updater(): null {
     if (!fromToken) {
       dispatch(resetFetchedBridgeQuotes())
     }
-  }, [fromChainId, toChainId, fromToken, fromValue, toTokens, synapseSDK])
+  }, [
+    fromChainId,
+    toChainId,
+    fromToken,
+    debouncedFromValue,
+    toTokens,
+    synapseSDK,
+  ])
 
   return null
 }

From 64fce404f0d7a7ac7258c4891ac6edbb4b531850 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Tue, 3 Oct 2023 16:52:16 -0700
Subject: [PATCH 060/106] updateDebouncedFromValue action

---
 packages/synapse-interface/slices/bridge/actions.ts | 3 +++
 packages/synapse-interface/slices/bridge/reducer.ts | 1 +
 2 files changed, 4 insertions(+)

diff --git a/packages/synapse-interface/slices/bridge/actions.ts b/packages/synapse-interface/slices/bridge/actions.ts
index 18cf41aa27..216bca538a 100644
--- a/packages/synapse-interface/slices/bridge/actions.ts
+++ b/packages/synapse-interface/slices/bridge/actions.ts
@@ -31,3 +31,6 @@ export const updatePendingBridgeTransactions = createAction<
 export const resetFetchedBridgeQuotes = createAction<void>(
   'bridge/resetFetchedBridgeQuotes'
 )
+export const updateDebouncedFromValue = createAction<string>(
+  'bridge/updateDebouncedFromValue'
+)
diff --git a/packages/synapse-interface/slices/bridge/reducer.ts b/packages/synapse-interface/slices/bridge/reducer.ts
index d5fe9accd0..db73bda880 100644
--- a/packages/synapse-interface/slices/bridge/reducer.ts
+++ b/packages/synapse-interface/slices/bridge/reducer.ts
@@ -21,6 +21,7 @@ import {
   resetFetchedBridgeQuotes,
   updatePendingBridgeTransaction,
   updatePendingBridgeTransactions,
+  updateDebouncedFromValue,
 } from './actions'
 import { fetchAndStoreBridgeQuotes } from './hooks'
 import { BridgeQuoteResponse } from '@/utils/actions/fetchBridgeQuotes'

From 55f6393efe738f7ce49ea7364f67278d1e4f372a Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Tue, 3 Oct 2023 16:53:37 -0700
Subject: [PATCH 061/106] Add reducer

---
 packages/synapse-interface/slices/bridge/reducer.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/synapse-interface/slices/bridge/reducer.ts b/packages/synapse-interface/slices/bridge/reducer.ts
index db73bda880..2a13d168ba 100644
--- a/packages/synapse-interface/slices/bridge/reducer.ts
+++ b/packages/synapse-interface/slices/bridge/reducer.ts
@@ -39,6 +39,7 @@ export interface BridgeState {
   toTokens: Token[]
 
   fromValue: string
+  debouncedFromValue: string
   bridgeQuote: BridgeQuote
   toTokensBridgeQuotes: BridgeQuoteResponse[]
   toTokensBridgeQuotesStatus: FetchState
@@ -76,6 +77,7 @@ export const initialState: BridgeState = {
   toTokens,
 
   fromValue: '',
+  debouncedFromValue: '',
   bridgeQuote: EMPTY_BRIDGE_QUOTE,
   toTokensBridgeQuotes: [],
   toTokensBridgeQuotesStatus: FetchState.IDLE,
@@ -467,6 +469,12 @@ export const bridgeSlice = createSlice({
   },
   extraReducers: (builder) => {
     builder
+      .addCase(
+        updateDebouncedFromValue,
+        (state, action: PayloadAction<string>) => {
+          state.debouncedFromValue = action.payload
+        }
+      )
       .addCase(
         addPendingBridgeTransaction,
         (state, action: PayloadAction<PendingBridgeTransaction>) => {

From ff3ab45c939f5021419b2ec83527d6519344c36f Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Tue, 3 Oct 2023 16:56:17 -0700
Subject: [PATCH 062/106] Lift debouncedFromValue to store

---
 packages/synapse-interface/slices/bridge/updater.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 1285949ece..d08681e9a2 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -8,7 +8,7 @@ import {
   fetchBridgeQuotes,
 } from '@/utils/actions/fetchBridgeQuotes'
 import { fetchAndStoreBridgeQuotes } from '@/slices/bridge/hooks'
-import { resetFetchedBridgeQuotes } from './actions'
+import { resetFetchedBridgeQuotes, updateDebouncedFromValue } from './actions'
 import { BridgeQuote, Token } from '@/utils/types'
 import { stringToBigInt } from '@/utils/bigint/format'
 import { useSynapseContext } from '@/utils/providers/SynapseProvider'
@@ -22,16 +22,15 @@ export default function Updater(): null {
     fromToken,
     toTokens,
     fromValue,
+    debouncedFromValue,
   }: BridgeState = useBridgeState()
-  const [debouncedFromValue, setDebouncedFromValue] =
-    useState<string>(fromValue)
 
   // Debounce user input to prevent unnecessary quote fetching
   useEffect(() => {
     const debounceDelay = 500
 
     const debounceTimer = setTimeout(() => {
-      setDebouncedFromValue(fromValue)
+      dispatch(updateDebouncedFromValue(fromValue))
     }, debounceDelay)
 
     return () => clearTimeout(debounceTimer)

From 3133d1cb8ac10edb86ffc870182cb8ef57946193 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Tue, 3 Oct 2023 16:59:42 -0700
Subject: [PATCH 063/106] Utilize debouncedFromValue throughout bridge
 experience

---
 .../pages/state-managed-bridge/index.tsx      | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/packages/synapse-interface/pages/state-managed-bridge/index.tsx b/packages/synapse-interface/pages/state-managed-bridge/index.tsx
index 22040a7f9c..ba040eca36 100644
--- a/packages/synapse-interface/pages/state-managed-bridge/index.tsx
+++ b/packages/synapse-interface/pages/state-managed-bridge/index.tsx
@@ -95,6 +95,7 @@ const StateManagedBridge = () => {
     toToken,
     bridgeQuote,
     fromValue,
+    debouncedFromValue,
     destinationAddress,
 
     fromChainIds,
@@ -132,7 +133,7 @@ const StateManagedBridge = () => {
       fromToken &&
       toToken &&
       fromToken?.decimals[fromChainId] &&
-      stringToBigInt(fromValue, fromToken.decimals[fromChainId]) > 0n
+      stringToBigInt(debouncedFromValue, fromToken.decimals[fromChainId]) > 0n
     ) {
       console.log('trying to set bridge quote')
       getAndSetBridgeQuote()
@@ -145,7 +146,7 @@ const StateManagedBridge = () => {
     toChainId,
     fromToken,
     toToken,
-    fromValue,
+    debouncedFromValue,
     address,
     portfolioBalances,
   ])
@@ -158,7 +159,7 @@ const StateManagedBridge = () => {
       if (
         fromToken &&
         bridgeQuote?.allowance &&
-        stringToBigInt(fromValue, fromToken.decimals[fromChainId]) <=
+        stringToBigInt(debouncedFromValue, fromToken.decimals[fromChainId]) <=
           bridgeQuote.allowance
       ) {
         setIsApproved(true)
@@ -166,7 +167,7 @@ const StateManagedBridge = () => {
         setIsApproved(false)
       }
     }
-  }, [bridgeQuote, fromToken, fromValue, fromChainId, toChainId])
+  }, [bridgeQuote, fromToken, debouncedFromValue, fromChainId, toChainId])
 
   let quoteToast
 
@@ -183,7 +184,7 @@ const StateManagedBridge = () => {
           toChainId,
           fromToken.addresses[fromChainId],
           toToken.addresses[toChainId],
-          stringToBigInt(fromValue, fromToken.decimals[fromChainId])
+          stringToBigInt(debouncedFromValue, fromToken.decimals[fromChainId])
         )
 
       // console.log(`[getAndSetQuote] fromChainId`, fromChainId)
@@ -205,7 +206,7 @@ const StateManagedBridge = () => {
       const originTokenDecimals = fromToken.decimals[fromChainId]
       const adjustedFeeAmount =
         BigInt(feeAmount) <
-        stringToBigInt(`${fromValue}`, fromToken.decimals[fromChainId])
+        stringToBigInt(`${debouncedFromValue}`, fromToken.decimals[fromChainId])
           ? BigInt(feeAmount)
           : BigInt(feeAmount) / powBigInt(10n, BigInt(18 - originTokenDecimals))
 
@@ -264,8 +265,10 @@ const StateManagedBridge = () => {
             routerAddress,
             allowance,
             exchangeRate: calculateExchangeRate(
-              stringToBigInt(fromValue, fromToken.decimals[fromChainId]) -
-                BigInt(adjustedFeeAmount),
+              stringToBigInt(
+                debouncedFromValue,
+                fromToken.decimals[fromChainId]
+              ) - BigInt(adjustedFeeAmount),
               fromToken.decimals[fromChainId],
               toValueBigInt,
               toToken.decimals[toChainId]
@@ -280,7 +283,7 @@ const StateManagedBridge = () => {
         )
 
         toast.dismiss(quoteToast)
-        const message = `Route found for bridging ${fromValue} ${fromToken.symbol} on ${CHAINS_BY_ID[fromChainId]?.name} to ${toToken.symbol} on ${CHAINS_BY_ID[toChainId]?.name}`
+        const message = `Route found for bridging ${debouncedFromValue} ${fromToken.symbol} on ${CHAINS_BY_ID[fromChainId]?.name} to ${toToken.symbol} on ${CHAINS_BY_ID[toChainId]?.name}`
         console.log(message)
         quoteToast = toast(message, { duration: 3000 })
       }
@@ -298,7 +301,7 @@ const StateManagedBridge = () => {
         } else if (!toToken) {
           message = 'Please select a destination token'
         } else {
-          message = `No route found for bridging ${fromValue} ${fromToken.symbol} on ${CHAINS_BY_ID[fromChainId]?.name} to ${toToken.symbol} on ${CHAINS_BY_ID[toChainId]?.name}`
+          message = `No route found for bridging ${debouncedFromValue} ${fromToken.symbol} on ${CHAINS_BY_ID[fromChainId]?.name} to ${toToken.symbol} on ${CHAINS_BY_ID[toChainId]?.name}`
         }
         console.log(message)
         quoteToast = toast(message, { duration: 3000 })
@@ -346,7 +349,7 @@ const StateManagedBridge = () => {
       address,
       originChainId: fromChainId,
       destinationChainId: toChainId,
-      inputAmount: fromValue,
+      inputAmount: debouncedFromValue,
       expectedReceivedAmount: bridgeQuote.outputAmountString,
       slippage: bridgeQuote.exchangeRate,
     })
@@ -356,7 +359,7 @@ const StateManagedBridge = () => {
         id: currentTimestamp,
         originChain: CHAINS_BY_ID[fromChainId],
         originToken: fromToken,
-        originValue: fromValue,
+        originValue: debouncedFromValue,
         destinationChain: CHAINS_BY_ID[toChainId],
         destinationToken: toToken,
         transactionHash: undefined,
@@ -379,7 +382,7 @@ const StateManagedBridge = () => {
         fromChainId,
         toChainId,
         fromToken.addresses[fromChainId as keyof Token['addresses']],
-        stringToBigInt(fromValue, fromToken.decimals[fromChainId]),
+        stringToBigInt(debouncedFromValue, fromToken.decimals[fromChainId]),
         bridgeQuote.quotes.originQuery,
         bridgeQuote.quotes.destQuery
       )
@@ -391,7 +394,10 @@ const StateManagedBridge = () => {
           ? {
               data: data.data,
               to: data.to,
-              value: stringToBigInt(fromValue, fromToken.decimals[fromChainId]),
+              value: stringToBigInt(
+                debouncedFromValue,
+                fromToken.decimals[fromChainId]
+              ),
             }
           : data
 
@@ -409,7 +415,7 @@ const StateManagedBridge = () => {
           address,
           originChainId: fromChainId,
           destinationChainId: toChainId,
-          inputAmount: fromValue,
+          inputAmount: debouncedFromValue,
           expectedReceivedAmount: bridgeQuote.outputAmountString,
           slippage: bridgeQuote.exchangeRate,
         })

From 4036485821dcded0e49c266e79286388e631cf77 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Tue, 3 Oct 2023 17:23:25 -0700
Subject: [PATCH 064/106] Create orderedPossibleTokens to create ordered list
 based on fetched bridge quotes

---
 .../StateManagedBridge/ToTokenListOverlay.tsx | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index c7c29b710e..3e70186996 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -27,6 +27,10 @@ import {
   BridgeQuoteResponse,
 } from '@/utils/actions/fetchBridgeQuotes'
 
+interface TokenWithExchangeRate extends Token {
+  exchangeRate: bigint
+}
+
 export const ToTokenListOverlay = () => {
   const {
     fromChainId,
@@ -178,6 +182,46 @@ export const ToTokenListOverlay = () => {
     return locateBestExchangeRateToken(toTokensBridgeQuotes)
   }, [toTokensBridgeQuotes])
 
+  const orderedPossibleTokens: TokenWithExchangeRate[] | Token[] =
+    useMemo(() => {
+      if (
+        toTokensBridgeQuotesStatus === FetchState.VALID &&
+        bridgeQuotesMatchDestination &&
+        possibleTokens &&
+        possibleTokens.length > 0
+      ) {
+        const bridgeQuotesMap = new Map(
+          toTokensBridgeQuotes.map((quote) => [quote.destinationToken, quote])
+        )
+
+        const tokensWithExchangeRates: TokenWithExchangeRate[] =
+          possibleTokens.map((token) => {
+            const bridgeQuote = bridgeQuotesMap.get(token)
+            if (bridgeQuote) {
+              return {
+                ...token,
+                exchangeRate: bridgeQuote.exchangeRate,
+              }
+            } else {
+              return token as TokenWithExchangeRate
+            }
+          })
+
+        const sortedTokens = tokensWithExchangeRates.sort(
+          (a, b) => Number(b.exchangeRate) - Number(a.exchangeRate)
+        )
+
+        return sortedTokens
+      }
+      return possibleTokens
+    }, [
+      possibleTokens,
+      toTokensBridgeQuotes,
+      toTokensBridgeQuotesStatus,
+      bridgeQuotesMatchDestination,
+    ])
+
+  console.log('orderedPossibleTokens: ', orderedPossibleTokens)
   return (
     <div
       ref={overlayRef}

From 3c3dc5ce4f8491cb3d34c008cc6f5ba29d7f92e2 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 4 Oct 2023 11:52:39 -0700
Subject: [PATCH 065/106] Debounce 400

---
 packages/synapse-interface/slices/bridge/updater.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index d08681e9a2..a70cf37263 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -27,7 +27,7 @@ export default function Updater(): null {
 
   // Debounce user input to prevent unnecessary quote fetching
   useEffect(() => {
-    const debounceDelay = 500
+    const debounceDelay = 400
 
     const debounceTimer = setTimeout(() => {
       dispatch(updateDebouncedFromValue(fromValue))

From cf36911bbbf08f49bf429dc21cddda507a41a8cb Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 4 Oct 2023 11:53:41 -0700
Subject: [PATCH 066/106] Debounce 300ms

---
 packages/synapse-interface/slices/bridge/updater.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index a70cf37263..c452dd8260 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -27,7 +27,7 @@ export default function Updater(): null {
 
   // Debounce user input to prevent unnecessary quote fetching
   useEffect(() => {
-    const debounceDelay = 400
+    const debounceDelay = 300
 
     const debounceTimer = setTimeout(() => {
       dispatch(updateDebouncedFromValue(fromValue))

From 78d2edac22ceea91e31f603dcf65414078adc2bf Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 4 Oct 2023 11:55:16 -0700
Subject: [PATCH 067/106] 400ms debounce works

---
 packages/synapse-interface/slices/bridge/updater.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index c452dd8260..a70cf37263 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -27,7 +27,7 @@ export default function Updater(): null {
 
   // Debounce user input to prevent unnecessary quote fetching
   useEffect(() => {
-    const debounceDelay = 300
+    const debounceDelay = 400
 
     const debounceTimer = setTimeout(() => {
       dispatch(updateDebouncedFromValue(fromValue))

From a9a58ca01b0850a98513664a86d984457f66a5fa Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 4 Oct 2023 12:03:06 -0700
Subject: [PATCH 068/106] Ensure loader activates when fromValue updates, not
 based on debouncedFromValue

---
 packages/synapse-interface/slices/bridge/updater.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index a70cf37263..27aead3fbd 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { useAppDispatch } from '@/store/hooks'
 import { Address } from 'viem'
 import { useBridgeState } from '@/slices/bridge/hooks'
-import { BridgeState } from './reducer'
+import { BridgeState, setIsLoading } from './reducer'
 import {
   BridgeQuoteRequest,
   fetchBridgeQuotes,
@@ -28,12 +28,16 @@ export default function Updater(): null {
   // Debounce user input to prevent unnecessary quote fetching
   useEffect(() => {
     const debounceDelay = 400
+    dispatch(setIsLoading(true))
 
     const debounceTimer = setTimeout(() => {
       dispatch(updateDebouncedFromValue(fromValue))
     }, debounceDelay)
 
-    return () => clearTimeout(debounceTimer)
+    return () => {
+      clearTimeout(debounceTimer)
+      dispatch(setIsLoading(false))
+    }
   }, [fromValue])
 
   // Conditions for fetching alternative bridge quotes

From 05c17bf739cd2a45918ee9029a24157628080d44 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 4 Oct 2023 12:05:28 -0700
Subject: [PATCH 069/106] ..

---
 packages/synapse-interface/slices/bridge/updater.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 27aead3fbd..058a818b78 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { useAppDispatch } from '@/store/hooks'
 import { Address } from 'viem'
 import { useBridgeState } from '@/slices/bridge/hooks'
-import { BridgeState, setIsLoading } from './reducer'
+import { BridgeState, setIsLoading, initialState } from './reducer'
 import {
   BridgeQuoteRequest,
   fetchBridgeQuotes,

From 0e8d636abd1805ebc7572f23630a4776bc370ef1 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 4 Oct 2023 15:32:13 -0700
Subject: [PATCH 070/106] Sort Best Rate selection and place at top

---
 .../StateManagedBridge/ToTokenListOverlay.tsx | 91 ++++++++++---------
 1 file changed, 50 insertions(+), 41 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index 3e70186996..1ae33faa8d 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -238,54 +238,63 @@ export const ToTokenListOverlay = () => {
           <CloseButton onClick={onClose} />
         </div>
       </div>
-      {possibleTokens && possibleTokens.length > 0 && (
+      {orderedPossibleTokens && orderedPossibleTokens.length > 0 && (
         <>
           <div className="px-2 pt-2 pb-2 text-sm text-primaryTextColor ">
             Receive…
           </div>
           <div className="px-2 pb-2 md:px-2">
-            {possibleTokens.map((token: Token, idx: number) => {
-              return (
-                <SelectSpecificTokenButton
-                  isOrigin={false}
-                  key={idx}
-                  token={token}
-                  selectedToken={toToken}
-                  active={idx === currentIdx}
-                  showAllChains={false}
-                  isBestExchangeRate={token === bestExchangeRateToken}
-                  exchangeRate={
-                    toTokensBridgeQuotesStatus === FetchState.VALID &&
-                    bridgeQuotesMatchDestination &&
-                    formatBigIntToString(
-                      toTokensBridgeQuotes.filter(
-                        (bridgeQuotes: BridgeQuoteResponse) =>
-                          bridgeQuotes.destinationToken === token
-                      )?.[0]?.exchangeRate,
-                      18, //manually set this for now
+            {orderedPossibleTokens.map(
+              (token: TokenWithExchangeRate, idx: number) => {
+                console.log('token: ', token)
+                return (
+                  <SelectSpecificTokenButton
+                    isOrigin={false}
+                    key={idx}
+                    token={token}
+                    selectedToken={toToken}
+                    active={idx === currentIdx}
+                    showAllChains={false}
+                    // isBestExchangeRate={token === bestExchangeRateToken}
+                    // exchangeRate={
+                    //   toTokensBridgeQuotesStatus === FetchState.VALID &&
+                    //   bridgeQuotesMatchDestination &&
+                    //   formatBigIntToString(
+                    //     toTokensBridgeQuotes.filter(
+                    //       (bridgeQuotes: BridgeQuoteResponse) =>
+                    //         bridgeQuotes.destinationToken == token
+                    //     )?.[0]?.exchangeRate,
+                    //     18, //manually set this for now
+                    //     4
+                    //   )
+                    // }
+                    isBestExchangeRate={idx === 0}
+                    exchangeRate={formatBigIntToString(
+                      token?.exchangeRate,
+                      18,
                       4
-                    )
-                  }
-                  estimatedDurationInSeconds={
-                    toTokensBridgeQuotesStatus === FetchState.VALID &&
-                    bridgeQuotesMatchDestination &&
-                    calculateEstimatedTransactionTime({
-                      originChainId: fromChainId,
-                      originTokenAddress: fromToken.addresses[
-                        fromChainId
-                      ] as Address,
-                    })
-                  }
-                  onClick={() => {
-                    if (token === toToken) {
-                      onClose()
-                    } else {
-                      handleSetToToken(toToken, token)
+                    )}
+                    estimatedDurationInSeconds={
+                      toTokensBridgeQuotesStatus === FetchState.VALID &&
+                      bridgeQuotesMatchDestination &&
+                      calculateEstimatedTransactionTime({
+                        originChainId: fromChainId,
+                        originTokenAddress: fromToken.addresses[
+                          fromChainId
+                        ] as Address,
+                      })
                     }
-                  }}
-                />
-              )
-            })}
+                    onClick={() => {
+                      if (token === toToken) {
+                        onClose()
+                      } else {
+                        handleSetToToken(toToken, token)
+                      }
+                    }}
+                  />
+                )
+              }
+            )}
           </div>
         </>
       )}

From e0f21d6151e45559cd5f667eaab97b93cd1d02c6 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 4 Oct 2023 16:11:26 -0700
Subject: [PATCH 071/106] Add delay on bridge loading animation

---
 .../components/StateManagedBridge/ToTokenListOverlay.tsx  | 2 --
 packages/synapse-interface/slices/bridge/updater.tsx      | 8 +++++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index 1ae33faa8d..b6ca7cdc60 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -221,7 +221,6 @@ export const ToTokenListOverlay = () => {
       bridgeQuotesMatchDestination,
     ])
 
-  console.log('orderedPossibleTokens: ', orderedPossibleTokens)
   return (
     <div
       ref={overlayRef}
@@ -246,7 +245,6 @@ export const ToTokenListOverlay = () => {
           <div className="px-2 pb-2 md:px-2">
             {orderedPossibleTokens.map(
               (token: TokenWithExchangeRate, idx: number) => {
-                console.log('token: ', token)
                 return (
                   <SelectSpecificTokenButton
                     isOrigin={false}
diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 058a818b78..3979cca69e 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -28,7 +28,12 @@ export default function Updater(): null {
   // Debounce user input to prevent unnecessary quote fetching
   useEffect(() => {
     const debounceDelay = 400
-    dispatch(setIsLoading(true))
+    const animationDelay = 200
+    // dispatch(setIsLoading(true))
+
+    const animationTimer = setTimeout(() => {
+      dispatch(setIsLoading(true))
+    }, animationDelay)
 
     const debounceTimer = setTimeout(() => {
       dispatch(updateDebouncedFromValue(fromValue))
@@ -36,6 +41,7 @@ export default function Updater(): null {
 
     return () => {
       clearTimeout(debounceTimer)
+      clearTimeout(animationTimer)
       dispatch(setIsLoading(false))
     }
   }, [fromValue])

From 13ada281b2c3e41e5b8bfb034fd60ed111c33521 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 4 Oct 2023 16:14:06 -0700
Subject: [PATCH 072/106] Add default case for getDefaultBridgeAmount switch
 statement

---
 packages/synapse-interface/slices/bridge/updater.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 3979cca69e..d02483aaab 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -115,5 +115,7 @@ export const getDefaultBridgeAmount = (
       return DefaultBridgeAmount.ETH
     case SwappableTypes.BTC:
       return DefaultBridgeAmount.BTC
+    default:
+      return DefaultBridgeAmount.STABLE
   }
 }

From 163e3bc66e7d58dcdcc2c7c3e17d84b729f7b937 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 4 Oct 2023 16:20:33 -0700
Subject: [PATCH 073/106] Ensure loader not triggered until debouncedFromValue
 populated

---
 packages/synapse-interface/slices/bridge/updater.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index d02483aaab..999ef7ccc6 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -32,7 +32,9 @@ export default function Updater(): null {
     // dispatch(setIsLoading(true))
 
     const animationTimer = setTimeout(() => {
-      dispatch(setIsLoading(true))
+      if (debouncedFromValue !== initialState.debouncedFromValue) {
+        dispatch(setIsLoading(true))
+      }
     }, animationDelay)
 
     const debounceTimer = setTimeout(() => {

From 29631f9ef86ef1539778d2c9f64d72b7af03d655 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 4 Oct 2023 17:19:41 -0700
Subject: [PATCH 074/106] Add isLoadingExchangeRate prop to
 SelectSpecificTokenButton

---
 .../components/StateManagedBridge/ToTokenListOverlay.tsx       | 3 +++
 .../components/SelectSpecificTokenButton.tsx                   | 2 ++
 2 files changed, 5 insertions(+)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index b6ca7cdc60..d619a79475 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -266,6 +266,9 @@ export const ToTokenListOverlay = () => {
                     //     4
                     //   )
                     // }
+                    isLoadingExchangeRate={
+                      toTokensBridgeQuotesStatus === FetchState.LOADING
+                    }
                     isBestExchangeRate={idx === 0}
                     exchangeRate={formatBigIntToString(
                       token?.exchangeRate,
diff --git a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
index e0c5044fe3..cddb0510ec 100644
--- a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
@@ -21,6 +21,7 @@ const SelectSpecificTokenButton = ({
   selectedToken,
   onClick,
   alternateBackground = false,
+  isLoadingExchangeRate = false,
   exchangeRate,
   isBestExchangeRate = false,
   estimatedDurationInSeconds,
@@ -32,6 +33,7 @@ const SelectSpecificTokenButton = ({
   selectedToken: Token
   onClick: () => void
   alternateBackground?: boolean
+  isLoadingExchangeRate?: boolean
   exchangeRate?: string
   isBestExchangeRate?: boolean
   estimatedDurationInSeconds?: number

From a276d9ac21d1f1f50708ff9c93ceaba724369840 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 4 Oct 2023 17:24:10 -0700
Subject: [PATCH 075/106] Show loading spinner when fetching bridge quote
 exchange rates

---
 .../components/SelectSpecificTokenButton.tsx  | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
index cddb0510ec..9f4c47a6f7 100644
--- a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
@@ -12,6 +12,7 @@ import { usePortfolioBalances } from '@/slices/portfolio/hooks'
 import { useBridgeState } from '@/slices/bridge/hooks'
 import { CHAINS_BY_ID } from '@/constants/chains'
 import { findChainIdsWithPausedToken } from '@/constants/tokens'
+import LoadingSpinner from '@/components/ui/tailwind/LoadingSpinner'
 
 const SelectSpecificTokenButton = ({
   showAllChains,
@@ -87,14 +88,20 @@ const SelectSpecificTokenButton = ({
         isOrigin={isOrigin}
         showAllChains={showAllChains}
       />
-      {exchangeRate && isBestExchangeRate && (
-        <OptionTag type={BestOptionType.RATE} />
-      )}
-      {exchangeRate && (
-        <OptionDetails
-          exchangeRate={exchangeRate}
-          estimatedDurationInSeconds={estimatedDurationInSeconds}
-        />
+      {!isLoadingExchangeRate ? (
+        <LoadingSpinner className="mr-8 opacity-50" />
+      ) : (
+        <>
+          {exchangeRate && isBestExchangeRate && (
+            <OptionTag type={BestOptionType.RATE} />
+          )}
+          {exchangeRate && (
+            <OptionDetails
+              exchangeRate={exchangeRate}
+              estimatedDurationInSeconds={estimatedDurationInSeconds}
+            />
+          )}
+        </>
       )}
     </button>
   )

From cf1bd9edf12b2c430e932e9ec7833a78495b6ad9 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 4 Oct 2023 17:26:33 -0700
Subject: [PATCH 076/106] ...

---
 .../components/SelectSpecificTokenButton.tsx                   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
index 9f4c47a6f7..3cb61d275c 100644
--- a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
@@ -88,13 +88,14 @@ const SelectSpecificTokenButton = ({
         isOrigin={isOrigin}
         showAllChains={showAllChains}
       />
-      {!isLoadingExchangeRate ? (
+      {isLoadingExchangeRate ? (
         <LoadingSpinner className="mr-8 opacity-50" />
       ) : (
         <>
           {exchangeRate && isBestExchangeRate && (
             <OptionTag type={BestOptionType.RATE} />
           )}
+
           {exchangeRate && (
             <OptionDetails
               exchangeRate={exchangeRate}

From e0c11b81de79b0dfcc20d0c0f8d5c65b8930af45 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 4 Oct 2023 17:32:00 -0700
Subject: [PATCH 077/106] Update name from LoadingSpinner  to LoadingDots to be
 more descriptive' ' '

---
 .../StateManagedBridge/OutputContainer.tsx        |  4 ++--
 .../StateManagedBridge/ToTokenListOverlay.tsx     | 15 +--------------
 .../components/SelectSpecificTokenButton.tsx      |  4 ++--
 .../StateManagedSwap/SwapOutputContainer.tsx      |  4 ++--
 .../components/buttons/ButtonLoadingSpinner.tsx   |  4 ++--
 .../{LoadingSpinner.tsx => LoadingDots.tsx}       |  7 +++++--
 .../pages/pool/PoolInfoSection/index.tsx          | 10 +++++-----
 .../synapse-interface/pages/pool/[poolId].tsx     |  2 +-
 .../pages/pool/poolManagement/DepositButton.tsx   |  4 ++--
 .../pages/pool/poolManagement/WithdrawButton.tsx  |  4 ++--
 .../pages/pool/poolManagement/index.tsx           |  4 ++--
 .../synapse-interface/pages/pools/PoolCard.tsx    |  4 ++--
 12 files changed, 28 insertions(+), 38 deletions(-)
 rename packages/synapse-interface/components/ui/tailwind/{LoadingSpinner.tsx => LoadingDots.tsx} (55%)

diff --git a/packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx b/packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx
index ae5de8f979..c8d3ea0323 100644
--- a/packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { Address, useAccount } from 'wagmi'
 
-import LoadingSpinner from '../ui/tailwind/LoadingSpinner'
+import LoadingDots from '../ui/tailwind/LoadingDots'
 import { ToChainSelector } from './ToChainSelector'
 import { shortenAddress } from '@/utils/shortenAddress'
 import { ToTokenSelector } from './ToTokenSelector'
@@ -47,7 +47,7 @@ export const OutputContainer = ({}) => {
           <ToTokenSelector />
           <div className="flex ml-4">
             {isLoading ? (
-              <LoadingSpinner className="opacity-50" />
+              <LoadingDots className="opacity-50" />
             ) : (
               <input
                 pattern="[0-9.]+"
diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index d619a79475..2271f88fe5 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -253,26 +253,13 @@ export const ToTokenListOverlay = () => {
                     selectedToken={toToken}
                     active={idx === currentIdx}
                     showAllChains={false}
-                    // isBestExchangeRate={token === bestExchangeRateToken}
-                    // exchangeRate={
-                    //   toTokensBridgeQuotesStatus === FetchState.VALID &&
-                    //   bridgeQuotesMatchDestination &&
-                    //   formatBigIntToString(
-                    //     toTokensBridgeQuotes.filter(
-                    //       (bridgeQuotes: BridgeQuoteResponse) =>
-                    //         bridgeQuotes.destinationToken == token
-                    //     )?.[0]?.exchangeRate,
-                    //     18, //manually set this for now
-                    //     4
-                    //   )
-                    // }
                     isLoadingExchangeRate={
                       toTokensBridgeQuotesStatus === FetchState.LOADING
                     }
                     isBestExchangeRate={idx === 0}
                     exchangeRate={formatBigIntToString(
                       token?.exchangeRate,
-                      18,
+                      18, //manually set this for now
                       4
                     )}
                     estimatedDurationInSeconds={
diff --git a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
index 3cb61d275c..6a17d9ac99 100644
--- a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificTokenButton.tsx
@@ -12,7 +12,7 @@ import { usePortfolioBalances } from '@/slices/portfolio/hooks'
 import { useBridgeState } from '@/slices/bridge/hooks'
 import { CHAINS_BY_ID } from '@/constants/chains'
 import { findChainIdsWithPausedToken } from '@/constants/tokens'
-import LoadingSpinner from '@/components/ui/tailwind/LoadingSpinner'
+import LoadingDots from '@/components/ui/tailwind/LoadingDots'
 
 const SelectSpecificTokenButton = ({
   showAllChains,
@@ -89,7 +89,7 @@ const SelectSpecificTokenButton = ({
         showAllChains={showAllChains}
       />
       {isLoadingExchangeRate ? (
-        <LoadingSpinner className="mr-8 opacity-50" />
+        <LoadingDots className="mr-8 opacity-50" />
       ) : (
         <>
           {exchangeRate && isBestExchangeRate && (
diff --git a/packages/synapse-interface/components/StateManagedSwap/SwapOutputContainer.tsx b/packages/synapse-interface/components/StateManagedSwap/SwapOutputContainer.tsx
index ee35082cf7..32878d566a 100644
--- a/packages/synapse-interface/components/StateManagedSwap/SwapOutputContainer.tsx
+++ b/packages/synapse-interface/components/StateManagedSwap/SwapOutputContainer.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { Address, useAccount } from 'wagmi'
 
-import LoadingSpinner from '../ui/tailwind/LoadingSpinner'
+import LoadingDots from '../ui/tailwind/LoadingDots'
 import { SwapToTokenSelector } from './SwapToTokenSelector'
 import { useSwapState } from '@/slices/swap/hooks'
 
@@ -30,7 +30,7 @@ export const SwapOutputContainer = ({}) => {
           <SwapToTokenSelector />
           <div className="flex ml-4">
             {isLoading ? (
-              <LoadingSpinner className="opacity-50" />
+              <LoadingDots className="opacity-50" />
             ) : (
               <input
                 pattern="[0-9.]+"
diff --git a/packages/synapse-interface/components/buttons/ButtonLoadingSpinner.tsx b/packages/synapse-interface/components/buttons/ButtonLoadingSpinner.tsx
index 766271670f..6ed15448f7 100644
--- a/packages/synapse-interface/components/buttons/ButtonLoadingSpinner.tsx
+++ b/packages/synapse-interface/components/buttons/ButtonLoadingSpinner.tsx
@@ -1,9 +1,9 @@
-import LoadingSpinner from '@tw/LoadingSpinner'
+import LoadingDots from '@/components/ui/tailwind/LoadingDots'
 
 export default function ButtonLoadingSpinner({
   className,
 }: {
   className?: string
 }) {
-  return <LoadingSpinner className={`opacity-50 ${className}`} />
+  return <LoadingDots className={`opacity-50 ${className}`} />
 }
diff --git a/packages/synapse-interface/components/ui/tailwind/LoadingSpinner.tsx b/packages/synapse-interface/components/ui/tailwind/LoadingDots.tsx
similarity index 55%
rename from packages/synapse-interface/components/ui/tailwind/LoadingSpinner.tsx
rename to packages/synapse-interface/components/ui/tailwind/LoadingDots.tsx
index b1d837da0e..b110e89c2d 100644
--- a/packages/synapse-interface/components/ui/tailwind/LoadingSpinner.tsx
+++ b/packages/synapse-interface/components/ui/tailwind/LoadingDots.tsx
@@ -1,4 +1,4 @@
-export default function LoadingSpinner({
+export default function LoadingDots({
   className,
   shift = false,
 }: {
@@ -6,7 +6,10 @@ export default function LoadingSpinner({
   shift?: boolean
 }) {
   return (
-    <div className={`flex relative left-[12px] ${className}`}>
+    <div
+      data-test-id="loading-dots"
+      className={`flex relative left-[12px] ${className}`}
+    >
       <div className={`dot-flashing ${shift ? 'left-[12px]' : ''}`}></div>
     </div>
   )
diff --git a/packages/synapse-interface/pages/pool/PoolInfoSection/index.tsx b/packages/synapse-interface/pages/pool/PoolInfoSection/index.tsx
index 39f423a9c5..b957cc5415 100644
--- a/packages/synapse-interface/pages/pool/PoolInfoSection/index.tsx
+++ b/packages/synapse-interface/pages/pool/PoolInfoSection/index.tsx
@@ -1,7 +1,7 @@
 import AugmentWithUnits from '../components/AugmentWithUnits'
 import InfoSectionCard from './InfoSectionCard'
 import CurrencyReservesCard from './CurrencyReservesCard'
-import LoadingSpinner from '@tw/LoadingSpinner'
+import LoadingDots from '@/components/ui/tailwind/LoadingDots'
 import {
   commify,
   formatBigIntToPercentString,
@@ -24,7 +24,7 @@ const PoolInfoSection = ({ chainId }: { chainId: number }) => {
             poolData && poolData.swapFee ? (
               formatBigIntToPercentString(poolData.swapFee, 8, 2, false)
             ) : (
-              <LoadingSpinner />
+              <LoadingDots />
             )
           }
         />
@@ -37,7 +37,7 @@ const PoolInfoSection = ({ chainId }: { chainId: number }) => {
                 label={pool.priceUnits}
               />
             ) : (
-              <LoadingSpinner />
+              <LoadingDots />
             )
           }
         />
@@ -59,7 +59,7 @@ const PoolInfoSection = ({ chainId }: { chainId: number }) => {
                 label={pool.priceUnits}
               />
             ) : (
-              <LoadingSpinner />
+              <LoadingDots />
             )
           }
         />
@@ -78,7 +78,7 @@ const PoolInfoSection = ({ chainId }: { chainId: number }) => {
                 )
               )}`
             ) : (
-              <LoadingSpinner />
+              <LoadingDots />
             )
           }
         />
diff --git a/packages/synapse-interface/pages/pool/[poolId].tsx b/packages/synapse-interface/pages/pool/[poolId].tsx
index 9ca448b1af..4b46e6d659 100644
--- a/packages/synapse-interface/pages/pool/[poolId].tsx
+++ b/packages/synapse-interface/pages/pool/[poolId].tsx
@@ -12,7 +12,7 @@ import { fetchPoolData, resetPoolData } from '@/slices/poolDataSlice'
 import { RootState } from '@/store/store'
 import { resetPoolDeposit } from '@/slices/poolDepositSlice'
 import { resetPoolWithdraw } from '@/slices/poolWithdrawSlice'
-import LoadingSpinner from '@/components/ui/tailwind/LoadingSpinner'
+import LoadingSpinner from '@/components/ui/tailwind/LoadingDots'
 import { fetchPoolUserData } from '@/slices/poolUserDataSlice'
 
 const PoolPage = () => {
diff --git a/packages/synapse-interface/pages/pool/poolManagement/DepositButton.tsx b/packages/synapse-interface/pages/pool/poolManagement/DepositButton.tsx
index ea57a9e251..0b14b0f471 100644
--- a/packages/synapse-interface/pages/pool/poolManagement/DepositButton.tsx
+++ b/packages/synapse-interface/pages/pool/poolManagement/DepositButton.tsx
@@ -4,7 +4,7 @@ import { useAccount, useNetwork, useSwitchNetwork } from 'wagmi'
 import { useEffect, useMemo, useState } from 'react'
 import { RootState } from '@/store/store'
 
-import LoadingSpinner from '@/components/ui/tailwind/LoadingSpinner'
+import LoadingDots from '@/components/ui/tailwind/LoadingDots'
 import { TransactionButton } from '@/components/buttons/TransactionButton'
 import { DEFAULT_DEPOSIT_QUOTE } from './Deposit'
 import { stringToBigInt } from '@/utils/bigint/format'
@@ -81,7 +81,7 @@ const DepositButton = ({ approveTxn, depositTxn }) => {
     buttonProperties = {
       label: (
         <div className="flex items-center justify-center h-[24px]">
-          <LoadingSpinner />
+          <LoadingDots />
         </div>
       ),
       onClick: null,
diff --git a/packages/synapse-interface/pages/pool/poolManagement/WithdrawButton.tsx b/packages/synapse-interface/pages/pool/poolManagement/WithdrawButton.tsx
index def04009b3..824fe1b98b 100644
--- a/packages/synapse-interface/pages/pool/poolManagement/WithdrawButton.tsx
+++ b/packages/synapse-interface/pages/pool/poolManagement/WithdrawButton.tsx
@@ -5,7 +5,7 @@ import { useAccount, useNetwork, useSwitchNetwork } from 'wagmi'
 import { useEffect, useState } from 'react'
 import { useConnectModal } from '@rainbow-me/rainbowkit'
 import { stringToBigInt } from '@/utils/bigint/format'
-import LoadingSpinner from '@/components/ui/tailwind/LoadingSpinner'
+import LoadingDots from '@/components/ui/tailwind/LoadingDots'
 import { DEFAULT_WITHDRAW_QUOTE } from '@/slices/poolWithdrawSlice'
 
 const WithdrawButton = ({ approveTxn, withdrawTxn, isApproved }) => {
@@ -59,7 +59,7 @@ const WithdrawButton = ({ approveTxn, withdrawTxn, isApproved }) => {
     buttonProperties = {
       label: (
         <div className="flex items-center justify-center h-[24px]">
-          <LoadingSpinner />
+          <LoadingDots />
         </div>
       ),
       onClick: null,
diff --git a/packages/synapse-interface/pages/pool/poolManagement/index.tsx b/packages/synapse-interface/pages/pool/poolManagement/index.tsx
index cd676a59cc..8f67239599 100644
--- a/packages/synapse-interface/pages/pool/poolManagement/index.tsx
+++ b/packages/synapse-interface/pages/pool/poolManagement/index.tsx
@@ -6,7 +6,7 @@ import { RootState } from '@/store/store'
 import LiquidityManagementTabs from '../components/LiquidityManagementTabs'
 import Deposit from './Deposit'
 import Withdraw from './Withdraw'
-import LoadingSpinner from '@/components/ui/tailwind/LoadingSpinner'
+import LoadingDots from '@/components/ui/tailwind/LoadingDots'
 import {
   fetchPoolUserData,
   resetPoolUserData,
@@ -38,7 +38,7 @@ const PoolManagement = ({
   if (isLoading) {
     return (
       <div className="flex items-center justify-center h-full">
-        <LoadingSpinner />
+        <LoadingDots />
       </div>
     )
   }
diff --git a/packages/synapse-interface/pages/pools/PoolCard.tsx b/packages/synapse-interface/pages/pools/PoolCard.tsx
index 7bb919982f..46f1c81028 100644
--- a/packages/synapse-interface/pages/pools/PoolCard.tsx
+++ b/packages/synapse-interface/pages/pools/PoolCard.tsx
@@ -9,7 +9,7 @@ import Card from '@tw/Card'
 import Grid from '@tw/Grid'
 import { memo } from 'react'
 import { CHAINS_BY_ID } from '@constants/chains'
-import LoadingSpinner from '@tw/LoadingSpinner'
+import LoadingDots from '@/components/ui/tailwind/LoadingDots'
 import { useAccount } from 'wagmi'
 import { toast } from 'react-hot-toast'
 import { commify, formatBigIntToString } from '@/utils/bigint/format'
@@ -123,7 +123,7 @@ const PoolCard = memo(
                       )
                     )}`
                   ) : (
-                    <LoadingSpinner shift={true} />
+                    <LoadingDots shift={true} />
                   )}
                 </div>
               </div>

From c235df6c1b2731362727f3ed3776a0d192643d6a Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Wed, 4 Oct 2023 17:32:11 -0700
Subject: [PATCH 078/106] Update ButtonLoadingSpinner to ButtonLoadingDots

---
 .../synapse-interface/components/InteractiveInputRow.tsx    | 6 +++---
 .../{ButtonLoadingSpinner.tsx => ButtonLoadingDots.tsx}     | 2 +-
 .../components/buttons/TransactionButton.tsx                | 4 ++--
 packages/synapse-interface/pages/pool/[poolId].tsx          | 4 ++--
 packages/synapse-interface/pages/stake/StakeCard.tsx        | 6 +++---
 5 files changed, 11 insertions(+), 11 deletions(-)
 rename packages/synapse-interface/components/buttons/{ButtonLoadingSpinner.tsx => ButtonLoadingDots.tsx} (78%)

diff --git a/packages/synapse-interface/components/InteractiveInputRow.tsx b/packages/synapse-interface/components/InteractiveInputRow.tsx
index f399acf154..197810ad38 100644
--- a/packages/synapse-interface/components/InteractiveInputRow.tsx
+++ b/packages/synapse-interface/components/InteractiveInputRow.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Button from '@tw/Button'
-import ButtonLoadingSpinner from '@components/buttons/ButtonLoadingSpinner'
+import ButtonLoadingDots from '@/components/buttons/ButtonLoadingDots'
 import { getMenuItemBgForCoin } from '@styles/tokens'
 import { Token } from '@types'
 
@@ -155,11 +155,11 @@ const InteractiveInputRow = ({
               <>
                 {loadingLabel ? (
                   <div className="flex items-center justify-center space-x-5 animate-pulse">
-                    <ButtonLoadingSpinner className="mr-2" />
+                    <ButtonLoadingDots className="mr-2" />
                     <span>{loadingLabel}</span>
                   </div>
                 ) : (
-                  <ButtonLoadingSpinner />
+                  <ButtonLoadingDots />
                 )}
               </>
             ) : (
diff --git a/packages/synapse-interface/components/buttons/ButtonLoadingSpinner.tsx b/packages/synapse-interface/components/buttons/ButtonLoadingDots.tsx
similarity index 78%
rename from packages/synapse-interface/components/buttons/ButtonLoadingSpinner.tsx
rename to packages/synapse-interface/components/buttons/ButtonLoadingDots.tsx
index 6ed15448f7..d18cc419e9 100644
--- a/packages/synapse-interface/components/buttons/ButtonLoadingSpinner.tsx
+++ b/packages/synapse-interface/components/buttons/ButtonLoadingDots.tsx
@@ -1,6 +1,6 @@
 import LoadingDots from '@/components/ui/tailwind/LoadingDots'
 
-export default function ButtonLoadingSpinner({
+export default function ButtonLoadingDots({
   className,
 }: {
   className?: string
diff --git a/packages/synapse-interface/components/buttons/TransactionButton.tsx b/packages/synapse-interface/components/buttons/TransactionButton.tsx
index 1cdbc9ab48..71e2b6a40b 100644
--- a/packages/synapse-interface/components/buttons/TransactionButton.tsx
+++ b/packages/synapse-interface/components/buttons/TransactionButton.tsx
@@ -1,5 +1,5 @@
 import Button from '@tw/Button'
-import ButtonLoadingSpinner from '@components/buttons/ButtonLoadingSpinner'
+import ButtonLoadingDots from '@/components/buttons/ButtonLoadingDots'
 import { usePendingTxWrapper } from '@hooks/usePendingTxWrapper'
 import { TransactionResponse } from '@ethersproject/providers'
 
@@ -52,7 +52,7 @@ export const TransactionButton = ({
     >
       {isPending ? (
         <div className="inline-flex items-center justify-center">
-          <ButtonLoadingSpinner className="mr-8" />
+          <ButtonLoadingDots className="mr-8" />
           <span className="opacity-30">{pendingLabel}</span>{' '}
         </div>
       ) : (
diff --git a/packages/synapse-interface/pages/pool/[poolId].tsx b/packages/synapse-interface/pages/pool/[poolId].tsx
index 4b46e6d659..1feb566365 100644
--- a/packages/synapse-interface/pages/pool/[poolId].tsx
+++ b/packages/synapse-interface/pages/pool/[poolId].tsx
@@ -12,7 +12,7 @@ import { fetchPoolData, resetPoolData } from '@/slices/poolDataSlice'
 import { RootState } from '@/store/store'
 import { resetPoolDeposit } from '@/slices/poolDepositSlice'
 import { resetPoolWithdraw } from '@/slices/poolWithdrawSlice'
-import LoadingSpinner from '@/components/ui/tailwind/LoadingDots'
+import LoadingDots from '@/components/ui/tailwind/LoadingDots'
 import { fetchPoolUserData } from '@/slices/poolUserDataSlice'
 
 const PoolPage = () => {
@@ -59,7 +59,7 @@ const PoolPage = () => {
       >
         {!pool || isLoading || !poolId ? (
           <div className="flex items-center justify-center">
-            <LoadingSpinner />
+            <LoadingDots />
           </div>
         ) : pool ? (
           <PoolBody address={address} connectedChainId={connectedChainId} />
diff --git a/packages/synapse-interface/pages/stake/StakeCard.tsx b/packages/synapse-interface/pages/stake/StakeCard.tsx
index 2663d46263..5624282d6e 100644
--- a/packages/synapse-interface/pages/stake/StakeCard.tsx
+++ b/packages/synapse-interface/pages/stake/StakeCard.tsx
@@ -15,7 +15,7 @@ import { Token } from '@/utils/types'
 
 import { MINICHEF_ADDRESSES } from '@/constants/minichef'
 
-import ButtonLoadingSpinner from '@/components/buttons/ButtonLoadingSpinner'
+import ButtonLoadingDots from '@/components/buttons/ButtonLoadingDots'
 import InteractiveInputRow from '@/components/InteractiveInputRow'
 import LoadingText from '@/components/loading/LoadingText'
 import Button from '@/components/ui/tailwind/Button'
@@ -181,7 +181,7 @@ const StakeCard = ({ address, chainId, pool }: StakeCardProps) => {
         >
           {isPending ? (
             <div className="flex items-center justify-center space-x-5">
-              <ButtonLoadingSpinner className="mr-2" />
+              <ButtonLoadingDots className="mr-2" />
               <span className="animate-pulse">Claiming SYN</span>{' '}
             </div>
           ) : (
@@ -189,7 +189,7 @@ const StakeCard = ({ address, chainId, pool }: StakeCardProps) => {
           )}
         </Button>
       )}
-      <Card className="bg-bgBase rounded-md" divider={false}>
+      <Card className="rounded-md bg-bgBase" divider={false}>
         <div className="flex justify-center space-x-4">
           <Button
             className={`${

From cc0f32a8d9732efc375d688e17ebc8a21d4373f9 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 5 Oct 2023 11:22:18 -0700
Subject: [PATCH 079/106] Add debouncedToTokensFromValue action and reducer

---
 packages/synapse-interface/slices/bridge/actions.ts | 3 +++
 packages/synapse-interface/slices/bridge/reducer.ts | 9 +++++++++
 2 files changed, 12 insertions(+)

diff --git a/packages/synapse-interface/slices/bridge/actions.ts b/packages/synapse-interface/slices/bridge/actions.ts
index 216bca538a..d1f45b8f40 100644
--- a/packages/synapse-interface/slices/bridge/actions.ts
+++ b/packages/synapse-interface/slices/bridge/actions.ts
@@ -34,3 +34,6 @@ export const resetFetchedBridgeQuotes = createAction<void>(
 export const updateDebouncedFromValue = createAction<string>(
   'bridge/updateDebouncedFromValue'
 )
+export const updateDebouncedToTokensFromValue = createAction<string>(
+  'bridge/updateDebouncedToTokensFromValue'
+)
diff --git a/packages/synapse-interface/slices/bridge/reducer.ts b/packages/synapse-interface/slices/bridge/reducer.ts
index 2a13d168ba..9949773523 100644
--- a/packages/synapse-interface/slices/bridge/reducer.ts
+++ b/packages/synapse-interface/slices/bridge/reducer.ts
@@ -22,6 +22,7 @@ import {
   updatePendingBridgeTransaction,
   updatePendingBridgeTransactions,
   updateDebouncedFromValue,
+  updateDebouncedToTokensFromValue,
 } from './actions'
 import { fetchAndStoreBridgeQuotes } from './hooks'
 import { BridgeQuoteResponse } from '@/utils/actions/fetchBridgeQuotes'
@@ -40,6 +41,7 @@ export interface BridgeState {
 
   fromValue: string
   debouncedFromValue: string
+  debouncedToTokensFromValue: string
   bridgeQuote: BridgeQuote
   toTokensBridgeQuotes: BridgeQuoteResponse[]
   toTokensBridgeQuotesStatus: FetchState
@@ -78,6 +80,7 @@ export const initialState: BridgeState = {
 
   fromValue: '',
   debouncedFromValue: '',
+  debouncedToTokensFromValue: '',
   bridgeQuote: EMPTY_BRIDGE_QUOTE,
   toTokensBridgeQuotes: [],
   toTokensBridgeQuotesStatus: FetchState.IDLE,
@@ -475,6 +478,12 @@ export const bridgeSlice = createSlice({
           state.debouncedFromValue = action.payload
         }
       )
+      .addCase(
+        updateDebouncedToTokensFromValue,
+        (state, action: PayloadAction<string>) => {
+          state.debouncedToTokensFromValue = action.payload
+        }
+      )
       .addCase(
         addPendingBridgeTransaction,
         (state, action: PayloadAction<PendingBridgeTransaction>) => {

From d8d3faeafc1514f8041cc33d11283c2988410da3 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 5 Oct 2023 11:24:37 -0700
Subject: [PATCH 080/106] Setup debounce for alternative bridge quotes

---
 packages/synapse-interface/slices/bridge/updater.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 999ef7ccc6..f42bd742d9 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -8,7 +8,11 @@ import {
   fetchBridgeQuotes,
 } from '@/utils/actions/fetchBridgeQuotes'
 import { fetchAndStoreBridgeQuotes } from '@/slices/bridge/hooks'
-import { resetFetchedBridgeQuotes, updateDebouncedFromValue } from './actions'
+import {
+  resetFetchedBridgeQuotes,
+  updateDebouncedFromValue,
+  updateDebouncedToTokensFromValue,
+} from './actions'
 import { BridgeQuote, Token } from '@/utils/types'
 import { stringToBigInt } from '@/utils/bigint/format'
 import { useSynapseContext } from '@/utils/providers/SynapseProvider'
@@ -28,6 +32,7 @@ export default function Updater(): null {
   // Debounce user input to prevent unnecessary quote fetching
   useEffect(() => {
     const debounceDelay = 400
+    const alternativeDebounceDelay = 500
     const animationDelay = 200
     // dispatch(setIsLoading(true))
 
@@ -41,9 +46,14 @@ export default function Updater(): null {
       dispatch(updateDebouncedFromValue(fromValue))
     }, debounceDelay)
 
+    const alternativeDebounceTimer = setTimeout(() => {
+      dispatch(updateDebouncedToTokensFromValue(fromValue))
+    }, alternativeDebounceDelay)
+
     return () => {
       clearTimeout(debounceTimer)
       clearTimeout(animationTimer)
+      clearTimeout(alternativeDebounceDelay)
       dispatch(setIsLoading(false))
     }
   }, [fromValue])

From 9ccd38540863ea700fa3c9f01f8b3a805feb4a93 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 5 Oct 2023 11:27:37 -0700
Subject: [PATCH 081/106] Utilize debouncedToTokensFromValue to fetch alternate
 bridge quotes

---
 packages/synapse-interface/slices/bridge/updater.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index f42bd742d9..e125a83d45 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -27,11 +27,12 @@ export default function Updater(): null {
     toTokens,
     fromValue,
     debouncedFromValue,
+    debouncedToTokensFromValue,
   }: BridgeState = useBridgeState()
 
   // Debounce user input to prevent unnecessary quote fetching
   useEffect(() => {
-    const debounceDelay = 400
+    const debounceDelay = 200
     const alternativeDebounceDelay = 500
     const animationDelay = 200
     // dispatch(setIsLoading(true))
@@ -53,7 +54,7 @@ export default function Updater(): null {
     return () => {
       clearTimeout(debounceTimer)
       clearTimeout(animationTimer)
-      clearTimeout(alternativeDebounceDelay)
+      clearTimeout(alternativeDebounceTimer)
       dispatch(setIsLoading(false))
     }
   }, [fromValue])
@@ -61,7 +62,7 @@ export default function Updater(): null {
   // Conditions for fetching alternative bridge quotes
   useEffect(() => {
     if (fromChainId && toChainId && fromToken && synapseSDK) {
-      const hasFromValue: boolean = debouncedFromValue !== ''
+      const hasFromValue: boolean = debouncedToTokensFromValue !== ''
       const bridgeQuoteRequests: BridgeQuoteRequest[] = toTokens.map(
         (token: Token) => {
           return {
@@ -72,7 +73,7 @@ export default function Updater(): null {
             destinationToken: token as Token,
             amount: stringToBigInt(
               hasFromValue
-                ? debouncedFromValue
+                ? debouncedToTokensFromValue
                 : getDefaultBridgeAmount(fromToken),
               fromToken.decimals[fromChainId]
             ),
@@ -95,7 +96,8 @@ export default function Updater(): null {
     fromChainId,
     toChainId,
     fromToken,
-    debouncedFromValue,
+    // debouncedFromValue,
+    debouncedToTokensFromValue,
     toTokens,
     synapseSDK,
   ])

From 08354e366cd7c0fdbf5f4189dc9d104811781af7 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 5 Oct 2023 14:44:24 -0700
Subject: [PATCH 082/106] Separate debouncing for primary quote and alternate
 quotes

---
 .../slices/bridge/updater.tsx                 | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index e125a83d45..fb320d3d81 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -30,12 +30,13 @@ export default function Updater(): null {
     debouncedToTokensFromValue,
   }: BridgeState = useBridgeState()
 
-  // Debounce user input to prevent unnecessary quote fetching
+  /**
+   * Debounce user input to fetch primary bridge quote
+   * Delay loading animation when user input updates
+   */
   useEffect(() => {
     const debounceDelay = 200
-    const alternativeDebounceDelay = 500
     const animationDelay = 200
-    // dispatch(setIsLoading(true))
 
     const animationTimer = setTimeout(() => {
       if (debouncedFromValue !== initialState.debouncedFromValue) {
@@ -47,17 +48,23 @@ export default function Updater(): null {
       dispatch(updateDebouncedFromValue(fromValue))
     }, debounceDelay)
 
+    return () => {
+      clearTimeout(debounceTimer)
+      clearTimeout(animationTimer)
+    }
+  }, [fromValue])
+
+  useEffect(() => {
+    const alternativeDebounceDelay = 500
+
     const alternativeDebounceTimer = setTimeout(() => {
       dispatch(updateDebouncedToTokensFromValue(fromValue))
     }, alternativeDebounceDelay)
 
     return () => {
-      clearTimeout(debounceTimer)
-      clearTimeout(animationTimer)
       clearTimeout(alternativeDebounceTimer)
-      dispatch(setIsLoading(false))
     }
-  }, [fromValue])
+  }, [debouncedFromValue])
 
   // Conditions for fetching alternative bridge quotes
   useEffect(() => {

From 3c646051283aa69ff71bf446f7f747de9039931b Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 5 Oct 2023 14:48:16 -0700
Subject: [PATCH 083/106] Update semantic naming, add comments

---
 packages/synapse-interface/slices/bridge/updater.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index fb320d3d81..e2852e0dd8 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -54,15 +54,16 @@ export default function Updater(): null {
     }
   }, [fromValue])
 
+  // Debounce alternative destination token bridge quotes
   useEffect(() => {
-    const alternativeDebounceDelay = 500
+    const alternativeOptionsDebounceDelay = 500
 
-    const alternativeDebounceTimer = setTimeout(() => {
-      dispatch(updateDebouncedToTokensFromValue(fromValue))
-    }, alternativeDebounceDelay)
+    const alternativeOptionsDebounceTimer = setTimeout(() => {
+      dispatch(updateDebouncedToTokensFromValue(debouncedFromValue))
+    }, alternativeOptionsDebounceDelay)
 
     return () => {
-      clearTimeout(alternativeDebounceTimer)
+      clearTimeout(alternativeOptionsDebounceTimer)
     }
   }, [debouncedFromValue])
 
@@ -103,7 +104,6 @@ export default function Updater(): null {
     fromChainId,
     toChainId,
     fromToken,
-    // debouncedFromValue,
     debouncedToTokensFromValue,
     toTokens,
     synapseSDK,

From bc86a5c94b0b9555199aead1eb857c3a71d0eac6 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 5 Oct 2023 15:01:38 -0700
Subject: [PATCH 084/106] Update debounce times between primary/alternative

---
 packages/synapse-interface/slices/bridge/updater.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index e2852e0dd8..1a51fa2e3c 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -35,7 +35,7 @@ export default function Updater(): null {
    * Delay loading animation when user input updates
    */
   useEffect(() => {
-    const debounceDelay = 200
+    const debounceDelay = 300
     const animationDelay = 200
 
     const animationTimer = setTimeout(() => {
@@ -56,16 +56,16 @@ export default function Updater(): null {
 
   // Debounce alternative destination token bridge quotes
   useEffect(() => {
-    const alternativeOptionsDebounceDelay = 500
+    const alternativeOptionsDebounceDelay = 1000
 
     const alternativeOptionsDebounceTimer = setTimeout(() => {
-      dispatch(updateDebouncedToTokensFromValue(debouncedFromValue))
+      dispatch(updateDebouncedToTokensFromValue(fromValue))
     }, alternativeOptionsDebounceDelay)
 
     return () => {
       clearTimeout(alternativeOptionsDebounceTimer)
     }
-  }, [debouncedFromValue])
+  }, [fromValue])
 
   // Conditions for fetching alternative bridge quotes
   useEffect(() => {

From 2519be0c5f212b8f6359691841c2c1f2ee4addd7 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Thu, 5 Oct 2023 15:27:07 -0700
Subject: [PATCH 085/106] Tweak debouncer for alternative quote

---
 packages/synapse-interface/slices/bridge/updater.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 1a51fa2e3c..a2e70ead1c 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -59,13 +59,13 @@ export default function Updater(): null {
     const alternativeOptionsDebounceDelay = 1000
 
     const alternativeOptionsDebounceTimer = setTimeout(() => {
-      dispatch(updateDebouncedToTokensFromValue(fromValue))
+      dispatch(updateDebouncedToTokensFromValue(debouncedFromValue))
     }, alternativeOptionsDebounceDelay)
 
     return () => {
       clearTimeout(alternativeOptionsDebounceTimer)
     }
-  }, [fromValue])
+  }, [debouncedFromValue])
 
   // Conditions for fetching alternative bridge quotes
   useEffect(() => {

From 2a9ed4e7e5cd72bfcc17212527979cc0ed5432eb Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 6 Oct 2023 11:18:08 -0700
Subject: [PATCH 086/106] Update debounce and maxConcurrentRequests to make
 alternative bridge quotes more reliable

---
 .../synapse-interface/slices/bridge/updater.tsx     | 13 +++++++------
 .../utils/actions/fetchBridgeQuotes.tsx             |  2 +-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index a2e70ead1c..f8eee985a1 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -24,6 +24,7 @@ export default function Updater(): null {
     fromChainId,
     toChainId,
     fromToken,
+    toToken,
     toTokens,
     fromValue,
     debouncedFromValue,
@@ -56,7 +57,7 @@ export default function Updater(): null {
 
   // Debounce alternative destination token bridge quotes
   useEffect(() => {
-    const alternativeOptionsDebounceDelay = 1000
+    const alternativeOptionsDebounceDelay = 500
 
     const alternativeOptionsDebounceTimer = setTimeout(() => {
       dispatch(updateDebouncedToTokensFromValue(debouncedFromValue))
@@ -69,7 +70,7 @@ export default function Updater(): null {
 
   // Conditions for fetching alternative bridge quotes
   useEffect(() => {
-    if (fromChainId && toChainId && fromToken && synapseSDK) {
+    if (fromChainId && toChainId && fromToken && toToken && synapseSDK) {
       const hasFromValue: boolean = debouncedToTokensFromValue !== ''
       const bridgeQuoteRequests: BridgeQuoteRequest[] = toTokens.map(
         (token: Token) => {
@@ -101,12 +102,12 @@ export default function Updater(): null {
       dispatch(resetFetchedBridgeQuotes())
     }
   }, [
-    fromChainId,
-    toChainId,
-    fromToken,
+    // fromChainId,
+    // toChainId,
+    // fromToken,
+    // synapseSDK,
     debouncedToTokensFromValue,
     toTokens,
-    synapseSDK,
   ])
 
   return null
diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index e56532cbdd..701064e975 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -101,7 +101,7 @@ export async function fetchBridgeQuote(
 export async function fetchBridgeQuotes(
   requests: BridgeQuoteRequest[],
   synapseSDK: any,
-  maxConcurrentRequests: number = 10, // Set the maximum number of concurrent requests
+  maxConcurrentRequests: number = 3, // Set the maximum number of concurrent requests
   requestDelay: number = 1000 // Set the delay between requests in milliseconds (adjust as needed)
 ): Promise<BridgeQuoteResponse[]> {
   try {

From 5c3ecc72daa518b376f0f26441eac90e05378d10 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 6 Oct 2023 11:22:03 -0700
Subject: [PATCH 087/106] Tighten up alternative bridge quotes fetching
 conditions for stability

---
 .../slices/bridge/updater.tsx                 | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index f8eee985a1..0698c82155 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -32,7 +32,7 @@ export default function Updater(): null {
   }: BridgeState = useBridgeState()
 
   /**
-   * Debounce user input to fetch primary bridge quote
+   * Debounce user input to fetch primary bridge quote (in ms)
    * Delay loading animation when user input updates
    */
   useEffect(() => {
@@ -90,25 +90,21 @@ export default function Updater(): null {
         }
       )
 
-      dispatch(
-        fetchAndStoreBridgeQuotes({
-          requests: bridgeQuoteRequests,
-          synapseSDK,
-        })
-      )
+      if (hasFromValue) {
+        console.log('fetching')
+        dispatch(
+          fetchAndStoreBridgeQuotes({
+            requests: bridgeQuoteRequests,
+            synapseSDK,
+          })
+        )
+      }
     }
 
     if (!fromToken) {
       dispatch(resetFetchedBridgeQuotes())
     }
-  }, [
-    // fromChainId,
-    // toChainId,
-    // fromToken,
-    // synapseSDK,
-    debouncedToTokensFromValue,
-    toTokens,
-  ])
+  }, [debouncedToTokensFromValue, toTokens])
 
   return null
 }

From 2b7e837a2266de872138d6819ae990c2e303d01f Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 6 Oct 2023 11:24:24 -0700
Subject: [PATCH 088/106] update naming

---
 packages/synapse-interface/slices/bridge/updater.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 0698c82155..0f74c22a76 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -71,7 +71,7 @@ export default function Updater(): null {
   // Conditions for fetching alternative bridge quotes
   useEffect(() => {
     if (fromChainId && toChainId && fromToken && toToken && synapseSDK) {
-      const hasFromValue: boolean = debouncedToTokensFromValue !== ''
+      const userInputExists: boolean = debouncedToTokensFromValue !== ''
       const bridgeQuoteRequests: BridgeQuoteRequest[] = toTokens.map(
         (token: Token) => {
           return {
@@ -81,7 +81,7 @@ export default function Updater(): null {
             destinationTokenAddress: token?.addresses[toChainId] as Address,
             destinationToken: token as Token,
             amount: stringToBigInt(
-              hasFromValue
+              userInputExists
                 ? debouncedToTokensFromValue
                 : getDefaultBridgeAmount(fromToken),
               fromToken.decimals[fromChainId]
@@ -90,7 +90,7 @@ export default function Updater(): null {
         }
       )
 
-      if (hasFromValue) {
+      if (userInputExists) {
         console.log('fetching')
         dispatch(
           fetchAndStoreBridgeQuotes({

From 2599ed4b36347c978d1ef73ebd61db26a049cee8 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 6 Oct 2023 11:38:45 -0700
Subject: [PATCH 089/106] Clear quotes if user input does not exist

---
 packages/synapse-interface/slices/bridge/updater.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 0f74c22a76..8bc374a6cb 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -70,8 +70,8 @@ export default function Updater(): null {
 
   // Conditions for fetching alternative bridge quotes
   useEffect(() => {
+    const userInputExists: boolean = debouncedToTokensFromValue !== ''
     if (fromChainId && toChainId && fromToken && toToken && synapseSDK) {
-      const userInputExists: boolean = debouncedToTokensFromValue !== ''
       const bridgeQuoteRequests: BridgeQuoteRequest[] = toTokens.map(
         (token: Token) => {
           return {
@@ -89,7 +89,6 @@ export default function Updater(): null {
           }
         }
       )
-
       if (userInputExists) {
         console.log('fetching')
         dispatch(
@@ -100,8 +99,7 @@ export default function Updater(): null {
         )
       }
     }
-
-    if (!fromToken) {
+    if (!fromToken || !userInputExists) {
       dispatch(resetFetchedBridgeQuotes())
     }
   }, [debouncedToTokensFromValue, toTokens])

From 1f342befd6935548b964c2b29a2dcf62ca05bbe0 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 6 Oct 2023 11:43:25 -0700
Subject: [PATCH 090/106] Allow input to be zerod

---
 .../components/StateManagedBridge/InputContainer.tsx          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx b/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx
index ae7f1294a6..66f2750e9b 100644
--- a/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx
@@ -64,8 +64,8 @@ export const InputContainer = () => {
   useEffect(() => {
     if (
       fromToken &&
-      fromToken.decimals[fromChainId] &&
-      stringToBigInt(fromValue, fromToken.decimals[fromChainId]) !== 0n
+      fromToken.decimals[fromChainId]
+      // && stringToBigInt(fromValue, fromToken.decimals[fromChainId]) !== 0n
       // stringToBigInt(fromValue, fromToken.decimals[fromChainId]) ===
       //   fromTokenBalance
     ) {

From bdfb3c2135dc73b2679264c62452c496656200b6 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 6 Oct 2023 11:59:09 -0700
Subject: [PATCH 091/106] Update trigger for useEffect updating alternative
 bridge quotes

---
 .../slices/bridge/updater.tsx                 | 49 +++++++++++--------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 8bc374a6cb..c1ff94a899 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -57,7 +57,7 @@ export default function Updater(): null {
 
   // Debounce alternative destination token bridge quotes
   useEffect(() => {
-    const alternativeOptionsDebounceDelay = 500
+    const alternativeOptionsDebounceDelay = 1000
 
     const alternativeOptionsDebounceTimer = setTimeout(() => {
       dispatch(updateDebouncedToTokensFromValue(debouncedFromValue))
@@ -70,27 +70,29 @@ export default function Updater(): null {
 
   // Conditions for fetching alternative bridge quotes
   useEffect(() => {
-    const userInputExists: boolean = debouncedToTokensFromValue !== ''
-    if (fromChainId && toChainId && fromToken && toToken && synapseSDK) {
-      const bridgeQuoteRequests: BridgeQuoteRequest[] = toTokens.map(
-        (token: Token) => {
-          return {
-            originChainId: fromChainId,
-            originToken: fromToken as Token,
-            destinationChainId: toChainId,
-            destinationTokenAddress: token?.addresses[toChainId] as Address,
-            destinationToken: token as Token,
-            amount: stringToBigInt(
-              userInputExists
-                ? debouncedToTokensFromValue
-                : getDefaultBridgeAmount(fromToken),
-              fromToken.decimals[fromChainId]
-            ),
+    const userInputExists: boolean =
+      debouncedToTokensFromValue !== initialState.debouncedToTokensFromValue
+    const userInputIsZero: boolean = hasOnlyZeros(debouncedFromValue)
+
+    if (userInputExists && !userInputIsZero) {
+      if (fromChainId && toChainId && fromToken && toToken && synapseSDK) {
+        const bridgeQuoteRequests: BridgeQuoteRequest[] = toTokens.map(
+          (token: Token) => {
+            return {
+              originChainId: fromChainId,
+              originToken: fromToken as Token,
+              destinationChainId: toChainId,
+              destinationTokenAddress: token?.addresses[toChainId] as Address,
+              destinationToken: token as Token,
+              amount: stringToBigInt(
+                userInputExists
+                  ? debouncedToTokensFromValue
+                  : getDefaultBridgeAmount(fromToken),
+                fromToken.decimals[fromChainId]
+              ),
+            }
           }
-        }
-      )
-      if (userInputExists) {
-        console.log('fetching')
+        )
         dispatch(
           fetchAndStoreBridgeQuotes({
             requests: bridgeQuoteRequests,
@@ -99,6 +101,7 @@ export default function Updater(): null {
         )
       }
     }
+
     if (!fromToken || !userInputExists) {
       dispatch(resetFetchedBridgeQuotes())
     }
@@ -107,6 +110,10 @@ export default function Updater(): null {
   return null
 }
 
+function hasOnlyZeros(input: string): boolean {
+  return /^0+(\.0+)?$/.test(input)
+}
+
 enum SwappableTypes {
   STABLE = 'USD',
   ETH = 'ETH',

From 73256d5372b122cc01713150aaef4eac053fc0ac Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 6 Oct 2023 12:05:11 -0700
Subject: [PATCH 092/106] hasOnlyZeroes shared utils function

---
 .../PortfolioContent/components/PortfolioTokenAsset.tsx    | 7 ++-----
 packages/synapse-interface/slices/bridge/updater.tsx       | 7 ++-----
 packages/synapse-interface/utils/hasOnlyZeroes.ts          | 3 +++
 3 files changed, 7 insertions(+), 10 deletions(-)
 create mode 100644 packages/synapse-interface/utils/hasOnlyZeroes.ts

diff --git a/packages/synapse-interface/components/Portfolio/PortfolioContent/components/PortfolioTokenAsset.tsx b/packages/synapse-interface/components/Portfolio/PortfolioContent/components/PortfolioTokenAsset.tsx
index 0ae17ccb74..7d61f18363 100644
--- a/packages/synapse-interface/components/Portfolio/PortfolioContent/components/PortfolioTokenAsset.tsx
+++ b/packages/synapse-interface/components/Portfolio/PortfolioContent/components/PortfolioTokenAsset.tsx
@@ -24,10 +24,7 @@ import { useBridgeState } from '@/slices/bridge/hooks'
 import { fetchAndStoreSingleTokenAllowance } from '@/slices/portfolio/hooks'
 import { AVALANCHE, ETH, ARBITRUM } from '@/constants/chains/master'
 import { USDC } from '@/constants/tokens/bridgeable'
-
-function hasOnlyZeros(input: string): boolean {
-  return /^0+(\.0+)?$/.test(input)
-}
+import { hasOnlyZeroes } from '@/utils/hasOnlyZeroes'
 
 const handleFocusOnInput = () => {
   inputRef.current.focus()
@@ -97,7 +94,7 @@ export const PortfolioTokenAsset = ({
       decimals[portfolioChainId],
       3
     )
-    return balance > 0n && hasOnlyZeros(formattedBalance)
+    return balance > 0n && hasOnlyZeroes(formattedBalance)
       ? '< 0.001'
       : formattedBalance
   }, [balance, portfolioChainId])
diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index c1ff94a899..3a306ae541 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -16,6 +16,7 @@ import {
 import { BridgeQuote, Token } from '@/utils/types'
 import { stringToBigInt } from '@/utils/bigint/format'
 import { useSynapseContext } from '@/utils/providers/SynapseProvider'
+import { hasOnlyZeroes } from '@/utils/hasOnlyZeroes'
 
 export default function Updater(): null {
   const dispatch = useAppDispatch()
@@ -72,7 +73,7 @@ export default function Updater(): null {
   useEffect(() => {
     const userInputExists: boolean =
       debouncedToTokensFromValue !== initialState.debouncedToTokensFromValue
-    const userInputIsZero: boolean = hasOnlyZeros(debouncedFromValue)
+    const userInputIsZero: boolean = hasOnlyZeroes(debouncedFromValue)
 
     if (userInputExists && !userInputIsZero) {
       if (fromChainId && toChainId && fromToken && toToken && synapseSDK) {
@@ -110,10 +111,6 @@ export default function Updater(): null {
   return null
 }
 
-function hasOnlyZeros(input: string): boolean {
-  return /^0+(\.0+)?$/.test(input)
-}
-
 enum SwappableTypes {
   STABLE = 'USD',
   ETH = 'ETH',
diff --git a/packages/synapse-interface/utils/hasOnlyZeroes.ts b/packages/synapse-interface/utils/hasOnlyZeroes.ts
new file mode 100644
index 0000000000..98a5d5f7d0
--- /dev/null
+++ b/packages/synapse-interface/utils/hasOnlyZeroes.ts
@@ -0,0 +1,3 @@
+export const hasOnlyZeroes = (input: string): boolean => {
+  return /^0+(\.0+)?$/.test(input)
+}

From 730a21d5197ad70232e1c88902a214bf23f40de9 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 6 Oct 2023 12:12:46 -0700
Subject: [PATCH 093/106] Add try catch around fetchBridgeQuote action

---
 .../utils/actions/fetchBridgeQuotes.tsx       | 129 +++++++++---------
 1 file changed, 67 insertions(+), 62 deletions(-)

diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index 701064e975..cf158e8db7 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -28,72 +28,77 @@ export async function fetchBridgeQuote(
   synapseSDK: any
 ): Promise<BridgeQuoteResponse> {
   if (request && synapseSDK) {
-    const {
-      originChainId,
-      originToken,
-      destinationChainId,
-      destinationTokenAddress,
-      destinationToken,
-      amount,
-    }: BridgeQuoteRequest = request
-    const { feeAmount, routerAddress, maxAmountOut, originQuery, destQuery } =
-      await synapseSDK.bridgeQuote(
+    try {
+      const {
         originChainId,
+        originToken,
         destinationChainId,
-        originToken.addresses[originChainId],
         destinationTokenAddress,
-        amount
+        destinationToken,
+        amount,
+      }: BridgeQuoteRequest = request
+      const { feeAmount, routerAddress, maxAmountOut, originQuery, destQuery } =
+        await synapseSDK.bridgeQuote(
+          originChainId,
+          destinationChainId,
+          originToken.addresses[originChainId],
+          destinationTokenAddress,
+          amount
+        )
+
+      const toValueBigInt: bigint = BigInt(maxAmountOut.toString()) ?? 0n
+      const originTokenDecimals: number = originToken.decimals[originChainId]
+      const adjustedFeeAmount: bigint =
+        BigInt(feeAmount) < amount
+          ? BigInt(feeAmount)
+          : BigInt(feeAmount) / powBigInt(10n, BigInt(18 - originTokenDecimals))
+
+      const originMinWithSlippage = subtractSlippage(
+        originQuery?.minAmountOut ?? 0n,
+        'ONE_TENTH',
+        null
       )
+      const destMinWithSlippage = subtractSlippage(
+        destQuery?.minAmountOut ?? 0n,
+        'ONE_TENTH',
+        null
+      )
+
+      let newOriginQuery = { ...originQuery }
+      newOriginQuery.minAmountOut = originMinWithSlippage
 
-    const toValueBigInt: bigint = BigInt(maxAmountOut.toString()) ?? 0n
-    const originTokenDecimals: number = originToken.decimals[originChainId]
-    const adjustedFeeAmount: bigint =
-      BigInt(feeAmount) < amount
-        ? BigInt(feeAmount)
-        : BigInt(feeAmount) / powBigInt(10n, BigInt(18 - originTokenDecimals))
-
-    const originMinWithSlippage = subtractSlippage(
-      originQuery?.minAmountOut ?? 0n,
-      'ONE_TENTH',
-      null
-    )
-    const destMinWithSlippage = subtractSlippage(
-      destQuery?.minAmountOut ?? 0n,
-      'ONE_TENTH',
-      null
-    )
-
-    let newOriginQuery = { ...originQuery }
-    newOriginQuery.minAmountOut = originMinWithSlippage
-
-    let newDestQuery = { ...destQuery }
-    newDestQuery.minAmountOut = destMinWithSlippage
-
-    return {
-      outputAmount: toValueBigInt,
-      outputAmountString: commify(
-        formatBigIntToString(
+      let newDestQuery = { ...destQuery }
+      newDestQuery.minAmountOut = destMinWithSlippage
+
+      return {
+        outputAmount: toValueBigInt,
+        outputAmountString: commify(
+          formatBigIntToString(
+            toValueBigInt,
+            destinationToken.decimals[destinationChainId],
+            8
+          )
+        ),
+        routerAddress,
+        allowance: null, // update for allowances
+        exchangeRate: calculateExchangeRate(
+          amount - adjustedFeeAmount,
+          originToken.decimals[originChainId],
           toValueBigInt,
-          destinationToken.decimals[destinationChainId],
-          8
-        )
-      ),
-      routerAddress,
-      allowance: null, // update for allowances
-      exchangeRate: calculateExchangeRate(
-        amount - adjustedFeeAmount,
-        originToken.decimals[originChainId],
-        toValueBigInt,
-        destinationToken.decimals[destinationChainId]
-      ),
-      feeAmount,
-      delta: BigInt(maxAmountOut.toString()),
-      quotes: {
-        originQuery: newOriginQuery,
-        destQuery: newDestQuery,
-      },
-      destinationToken: request.destinationToken,
-      destinationChainId: destinationChainId,
+          destinationToken.decimals[destinationChainId]
+        ),
+        feeAmount,
+        delta: BigInt(maxAmountOut.toString()),
+        quotes: {
+          originQuery: newOriginQuery,
+          destQuery: newDestQuery,
+        },
+        destinationToken: request.destinationToken,
+        destinationChainId: destinationChainId,
+      }
+    } catch (error) {
+      console.error('Error fetching bridge quote:', error)
+      throw error
     }
   }
 }
@@ -129,8 +134,8 @@ export async function fetchBridgeQuotes(
     }
 
     return bridgeQuotes
-  } catch (e) {
-    console.error('error from fetchBridgeQuotes: ', e)
+  } catch (error) {
+    console.error('Error fetching bridge quotes: ', error)
     return []
   }
 }

From e9bf7cac1dbd52fa775514a46d9d179b00bef67e Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 6 Oct 2023 12:14:46 -0700
Subject: [PATCH 094/106] clean

---
 .../components/PortfolioTokenAsset.tsx          |  1 -
 .../synapse-interface/slices/bridge/updater.tsx | 17 +++++++----------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/synapse-interface/components/Portfolio/PortfolioContent/components/PortfolioTokenAsset.tsx b/packages/synapse-interface/components/Portfolio/PortfolioContent/components/PortfolioTokenAsset.tsx
index 7d61f18363..f6dccc003b 100644
--- a/packages/synapse-interface/components/Portfolio/PortfolioContent/components/PortfolioTokenAsset.tsx
+++ b/packages/synapse-interface/components/Portfolio/PortfolioContent/components/PortfolioTokenAsset.tsx
@@ -1,6 +1,5 @@
 import React, { useMemo, useCallback, useState } from 'react'
 import { useAppDispatch } from '@/store/hooks'
-import { RootState } from '@/store/store'
 import { useAccount } from 'wagmi'
 import {
   setFromChainId,
diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 3a306ae541..a42cc445f7 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -1,19 +1,16 @@
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { useAppDispatch } from '@/store/hooks'
 import { Address } from 'viem'
 import { useBridgeState } from '@/slices/bridge/hooks'
 import { BridgeState, setIsLoading, initialState } from './reducer'
-import {
-  BridgeQuoteRequest,
-  fetchBridgeQuotes,
-} from '@/utils/actions/fetchBridgeQuotes'
+import { BridgeQuoteRequest } from '@/utils/actions/fetchBridgeQuotes'
 import { fetchAndStoreBridgeQuotes } from '@/slices/bridge/hooks'
 import {
   resetFetchedBridgeQuotes,
   updateDebouncedFromValue,
   updateDebouncedToTokensFromValue,
 } from './actions'
-import { BridgeQuote, Token } from '@/utils/types'
+import { Token } from '@/utils/types'
 import { stringToBigInt } from '@/utils/bigint/format'
 import { useSynapseContext } from '@/utils/providers/SynapseProvider'
 import { hasOnlyZeroes } from '@/utils/hasOnlyZeroes'
@@ -37,18 +34,18 @@ export default function Updater(): null {
    * Delay loading animation when user input updates
    */
   useEffect(() => {
-    const debounceDelay = 300
-    const animationDelay = 200
+    const DEBOUNCE_DELAY = 300
+    const ANIMATION_DELAY = 200
 
     const animationTimer = setTimeout(() => {
       if (debouncedFromValue !== initialState.debouncedFromValue) {
         dispatch(setIsLoading(true))
       }
-    }, animationDelay)
+    }, ANIMATION_DELAY)
 
     const debounceTimer = setTimeout(() => {
       dispatch(updateDebouncedFromValue(fromValue))
-    }, debounceDelay)
+    }, DEBOUNCE_DELAY)
 
     return () => {
       clearTimeout(debounceTimer)

From b6d1578686dd908e41bdacd0cd172b5baa183e6c Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 6 Oct 2023 12:17:19 -0700
Subject: [PATCH 095/106] clean

---
 packages/synapse-interface/slices/bridge/updater.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index a42cc445f7..88fee34c23 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -55,11 +55,11 @@ export default function Updater(): null {
 
   // Debounce alternative destination token bridge quotes
   useEffect(() => {
-    const alternativeOptionsDebounceDelay = 1000
+    const ALTERNATE_OPTIONS_DEBOUNCE_DELAY = 1000
 
     const alternativeOptionsDebounceTimer = setTimeout(() => {
       dispatch(updateDebouncedToTokensFromValue(debouncedFromValue))
-    }, alternativeOptionsDebounceDelay)
+    }, ALTERNATE_OPTIONS_DEBOUNCE_DELAY)
 
     return () => {
       clearTimeout(alternativeOptionsDebounceTimer)

From 5638ee9c8d4e97d63113fd0ad96c2ebff695eeff Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 6 Oct 2023 12:29:13 -0700
Subject: [PATCH 096/106] Example with fetching with default values

---
 .../slices/bridge/updater.tsx                 | 50 +++++++++----------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 88fee34c23..4659747589 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -72,33 +72,33 @@ export default function Updater(): null {
       debouncedToTokensFromValue !== initialState.debouncedToTokensFromValue
     const userInputIsZero: boolean = hasOnlyZeroes(debouncedFromValue)
 
-    if (userInputExists && !userInputIsZero) {
-      if (fromChainId && toChainId && fromToken && toToken && synapseSDK) {
-        const bridgeQuoteRequests: BridgeQuoteRequest[] = toTokens.map(
-          (token: Token) => {
-            return {
-              originChainId: fromChainId,
-              originToken: fromToken as Token,
-              destinationChainId: toChainId,
-              destinationTokenAddress: token?.addresses[toChainId] as Address,
-              destinationToken: token as Token,
-              amount: stringToBigInt(
-                userInputExists
-                  ? debouncedToTokensFromValue
-                  : getDefaultBridgeAmount(fromToken),
-                fromToken.decimals[fromChainId]
-              ),
-            }
+    // if (userInputExists && !userInputIsZero) {
+    if (fromChainId && toChainId && fromToken && toToken && synapseSDK) {
+      const bridgeQuoteRequests: BridgeQuoteRequest[] = toTokens.map(
+        (token: Token) => {
+          return {
+            originChainId: fromChainId,
+            originToken: fromToken as Token,
+            destinationChainId: toChainId,
+            destinationTokenAddress: token?.addresses[toChainId] as Address,
+            destinationToken: token as Token,
+            amount: stringToBigInt(
+              userInputExists
+                ? debouncedToTokensFromValue
+                : getDefaultBridgeAmount(fromToken),
+              fromToken.decimals[fromChainId]
+            ),
           }
-        )
-        dispatch(
-          fetchAndStoreBridgeQuotes({
-            requests: bridgeQuoteRequests,
-            synapseSDK,
-          })
-        )
-      }
+        }
+      )
+      dispatch(
+        fetchAndStoreBridgeQuotes({
+          requests: bridgeQuoteRequests,
+          synapseSDK,
+        })
+      )
     }
+    // }
 
     if (!fromToken || !userInputExists) {
       dispatch(resetFetchedBridgeQuotes())

From be51adb063c6e8a1bfc070491087aeffbf67edd0 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 6 Oct 2023 12:31:35 -0700
Subject: [PATCH 097/106] Only fetch alternative bridge quotes when user input
 exists and is not zero

---
 .../slices/bridge/updater.tsx                 | 50 +++++++++----------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 4659747589..88fee34c23 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -72,33 +72,33 @@ export default function Updater(): null {
       debouncedToTokensFromValue !== initialState.debouncedToTokensFromValue
     const userInputIsZero: boolean = hasOnlyZeroes(debouncedFromValue)
 
-    // if (userInputExists && !userInputIsZero) {
-    if (fromChainId && toChainId && fromToken && toToken && synapseSDK) {
-      const bridgeQuoteRequests: BridgeQuoteRequest[] = toTokens.map(
-        (token: Token) => {
-          return {
-            originChainId: fromChainId,
-            originToken: fromToken as Token,
-            destinationChainId: toChainId,
-            destinationTokenAddress: token?.addresses[toChainId] as Address,
-            destinationToken: token as Token,
-            amount: stringToBigInt(
-              userInputExists
-                ? debouncedToTokensFromValue
-                : getDefaultBridgeAmount(fromToken),
-              fromToken.decimals[fromChainId]
-            ),
+    if (userInputExists && !userInputIsZero) {
+      if (fromChainId && toChainId && fromToken && toToken && synapseSDK) {
+        const bridgeQuoteRequests: BridgeQuoteRequest[] = toTokens.map(
+          (token: Token) => {
+            return {
+              originChainId: fromChainId,
+              originToken: fromToken as Token,
+              destinationChainId: toChainId,
+              destinationTokenAddress: token?.addresses[toChainId] as Address,
+              destinationToken: token as Token,
+              amount: stringToBigInt(
+                userInputExists
+                  ? debouncedToTokensFromValue
+                  : getDefaultBridgeAmount(fromToken),
+                fromToken.decimals[fromChainId]
+              ),
+            }
           }
-        }
-      )
-      dispatch(
-        fetchAndStoreBridgeQuotes({
-          requests: bridgeQuoteRequests,
-          synapseSDK,
-        })
-      )
+        )
+        dispatch(
+          fetchAndStoreBridgeQuotes({
+            requests: bridgeQuoteRequests,
+            synapseSDK,
+          })
+        )
+      }
     }
-    // }
 
     if (!fromToken || !userInputExists) {
       dispatch(resetFetchedBridgeQuotes())

From b292e40ff2009fa9967e833e7150ca4d125c0e72 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 6 Oct 2023 12:38:19 -0700
Subject: [PATCH 098/106] Increase bridge qutoe fetching reliability after
 setting default to selections to undefined

---
 packages/synapse-interface/slices/bridge/reducer.ts  | 6 +++---
 packages/synapse-interface/slices/bridge/updater.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/synapse-interface/slices/bridge/reducer.ts b/packages/synapse-interface/slices/bridge/reducer.ts
index 9949773523..c0c176e025 100644
--- a/packages/synapse-interface/slices/bridge/reducer.ts
+++ b/packages/synapse-interface/slices/bridge/reducer.ts
@@ -63,9 +63,9 @@ const {
   toTokens,
 } = getRoutePossibilities({
   fromChainId: ETHEREUM.id,
-  fromToken: ETH,
-  toChainId: ARBITRUM.id,
-  toToken: ETH,
+  fromToken: null,
+  toChainId: null,
+  toToken: null,
 })
 
 export const initialState: BridgeState = {
diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index 88fee34c23..e3c89f98e8 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -72,7 +72,7 @@ export default function Updater(): null {
       debouncedToTokensFromValue !== initialState.debouncedToTokensFromValue
     const userInputIsZero: boolean = hasOnlyZeroes(debouncedFromValue)
 
-    if (userInputExists && !userInputIsZero) {
+    if (!userInputIsZero) {
       if (fromChainId && toChainId && fromToken && toToken && synapseSDK) {
         const bridgeQuoteRequests: BridgeQuoteRequest[] = toTokens.map(
           (token: Token) => {

From 0168ec8e41b77de078dfb9d6316bfa9d3dc972e1 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 6 Oct 2023 12:48:15 -0700
Subject: [PATCH 099/106] Update loading status when fetching default exchange
 rates

---
 .../StateManagedBridge/ToTokenListOverlay.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index 2271f88fe5..ca67303409 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -171,6 +171,17 @@ export const ToTokenListOverlay = () => {
     onClose()
   }
 
+  const isLoadingExchangeRate = useMemo(() => {
+    const hasRequiredUserInput: boolean = Boolean(
+      fromChainId && toChainId && fromToken && toToken
+    )
+    const isFetchLoading: boolean =
+      toTokensBridgeQuotesStatus === FetchState.IDLE ||
+      toTokensBridgeQuotesStatus === FetchState.LOADING
+
+    return hasRequiredUserInput && isFetchLoading
+  }, [fromChainId, toChainId, fromToken, toToken, toTokensBridgeQuotesStatus])
+
   const bridgeQuotesMatchDestination: boolean = useMemo(() => {
     return (
       Array.isArray(toTokensBridgeQuotes) &&
@@ -178,10 +189,6 @@ export const ToTokenListOverlay = () => {
     )
   }, [toTokensBridgeQuotes, toChainId])
 
-  const bestExchangeRateToken: Token = useMemo(() => {
-    return locateBestExchangeRateToken(toTokensBridgeQuotes)
-  }, [toTokensBridgeQuotes])
-
   const orderedPossibleTokens: TokenWithExchangeRate[] | Token[] =
     useMemo(() => {
       if (
@@ -253,9 +260,7 @@ export const ToTokenListOverlay = () => {
                     selectedToken={toToken}
                     active={idx === currentIdx}
                     showAllChains={false}
-                    isLoadingExchangeRate={
-                      toTokensBridgeQuotesStatus === FetchState.LOADING
-                    }
+                    isLoadingExchangeRate={isLoadingExchangeRate}
                     isBestExchangeRate={idx === 0}
                     exchangeRate={formatBigIntToString(
                       token?.exchangeRate,

From 701a22c3bf80d5ce80d932dc5dc98984a2788b07 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 6 Oct 2023 12:57:47 -0700
Subject: [PATCH 100/106] Only show best rate if more than one option

---
 .../components/StateManagedBridge/ToTokenListOverlay.tsx  | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index ca67303409..7712d7bfc0 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -228,6 +228,10 @@ export const ToTokenListOverlay = () => {
       bridgeQuotesMatchDestination,
     ])
 
+  const totalPossibleTokens: number = useMemo(() => {
+    return Array.isArray(totalPossibleTokens) ? orderedPossibleTokens.length : 0
+  }, [orderedPossibleTokens])
+
   return (
     <div
       ref={overlayRef}
@@ -261,10 +265,10 @@ export const ToTokenListOverlay = () => {
                     active={idx === currentIdx}
                     showAllChains={false}
                     isLoadingExchangeRate={isLoadingExchangeRate}
-                    isBestExchangeRate={idx === 0}
+                    isBestExchangeRate={totalPossibleTokens > 1 && idx === 0}
                     exchangeRate={formatBigIntToString(
                       token?.exchangeRate,
-                      18, //manually set this for now
+                      18,
                       4
                     )}
                     estimatedDurationInSeconds={

From 9700b57cad4fc2ce990176cc9db92233e8307d87 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 6 Oct 2023 12:58:56 -0700
Subject: [PATCH 101/106] Fix lint

---
 .../components/StateManagedBridge/ToTokenListOverlay.tsx      | 4 ----
 packages/synapse-interface/slices/bridge/reducer.ts           | 3 +--
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index 7712d7bfc0..7a2500a42e 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -22,10 +22,6 @@ import { SearchResults } from './components/SearchResults'
 import { formatBigIntToString } from '@/utils/bigint/format'
 import { FetchState } from '@/slices/portfolio/actions'
 import { calculateEstimatedTransactionTime } from '@/utils/calculateEstimatedTransactionTime'
-import {
-  locateBestExchangeRateToken,
-  BridgeQuoteResponse,
-} from '@/utils/actions/fetchBridgeQuotes'
 
 interface TokenWithExchangeRate extends Token {
   exchangeRate: bigint
diff --git a/packages/synapse-interface/slices/bridge/reducer.ts b/packages/synapse-interface/slices/bridge/reducer.ts
index c0c176e025..9bcfabb3c2 100644
--- a/packages/synapse-interface/slices/bridge/reducer.ts
+++ b/packages/synapse-interface/slices/bridge/reducer.ts
@@ -1,9 +1,8 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { Address } from 'wagmi'
 
-import { ETH } from '@/constants/tokens/bridgeable'
 import { EMPTY_BRIDGE_QUOTE } from '@/constants/bridge'
-import { ARBITRUM, ETH as ETHEREUM } from '@/constants/chains/master'
+import { ETH as ETHEREUM } from '@/constants/chains/master'
 import { BridgeQuote, Token } from '@/utils/types'
 import {
   getRoutePossibilities,

From e4e69ba65da10de0e6e0cfc11a650948160ced3f Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 6 Oct 2023 13:03:28 -0700
Subject: [PATCH 102/106] ..

---
 .../components/StateManagedBridge/ToTokenListOverlay.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
index 7a2500a42e..ec01273341 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenListOverlay.tsx
@@ -225,7 +225,7 @@ export const ToTokenListOverlay = () => {
     ])
 
   const totalPossibleTokens: number = useMemo(() => {
-    return Array.isArray(totalPossibleTokens) ? orderedPossibleTokens.length : 0
+    return orderedPossibleTokens.length
   }, [orderedPossibleTokens])
 
   return (

From 0a996b19ca79cbd1a06e07ba29cf0ee20bcc50f9 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 6 Oct 2023 13:11:19 -0700
Subject: [PATCH 103/106] Disable integration tests for iniitally settting
 bridge origin and destination token

---
 .../cypress/e2e/landing.cy.ts                 | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/synapse-interface/cypress/e2e/landing.cy.ts b/packages/synapse-interface/cypress/e2e/landing.cy.ts
index b015d233b8..e77fea99ca 100644
--- a/packages/synapse-interface/cypress/e2e/landing.cy.ts
+++ b/packages/synapse-interface/cypress/e2e/landing.cy.ts
@@ -35,21 +35,21 @@ describe('Landing (/)', () => {
     })
   })
 
-  it('initially loads default origin token', () => {
-    cy.fixture(BRIDGE_CONSTANTS).then((fixture) => {
-      cy.get('[data-test-id="bridge-origin-token"]')
-        .should('be.visible')
-        .and('contain.text', fixture.defaultOriginToken)
-    })
-  })
+  // it('initially loads default origin token', () => {
+  //   cy.fixture(BRIDGE_CONSTANTS).then((fixture) => {
+  //     cy.get('[data-test-id="bridge-origin-token"]')
+  //       .should('be.visible')
+  //       .and('contain.text', fixture.defaultOriginToken)
+  //   })
+  // })
 
-  it('initially loads default destination token', () => {
-    cy.fixture(BRIDGE_CONSTANTS).then((fixture) => {
-      cy.get('[data-test-id="bridge-destination-token"]')
-        .should('be.visible')
-        .and('contain.text', fixture.defaultDestinationToken)
-    })
-  })
+  // it('initially loads default destination token', () => {
+  //   cy.fixture(BRIDGE_CONSTANTS).then((fixture) => {
+  //     cy.get('[data-test-id="bridge-destination-token"]')
+  //       .should('be.visible')
+  //       .and('contain.text', fixture.defaultDestinationToken)
+  //   })
+  // })
 })
 
 describe('Landing Page (/landing)', () => {

From 8a89a87e9d840b819c35fc7d6eda2fa8d3cedb44 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Fri, 6 Oct 2023 13:30:51 -0700
Subject: [PATCH 104/106] Test max 2 concurrent requests

---
 packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index cf158e8db7..261b3f8b5d 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -106,7 +106,7 @@ export async function fetchBridgeQuote(
 export async function fetchBridgeQuotes(
   requests: BridgeQuoteRequest[],
   synapseSDK: any,
-  maxConcurrentRequests: number = 3, // Set the maximum number of concurrent requests
+  maxConcurrentRequests: number = 2, // Set the maximum number of concurrent requests
   requestDelay: number = 1000 // Set the delay between requests in milliseconds (adjust as needed)
 ): Promise<BridgeQuoteResponse[]> {
   try {

From b77650f9d6c92cc289badb94b2c71451b25e9354 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Tue, 10 Oct 2023 14:19:38 -0700
Subject: [PATCH 105/106] Set loading to false in useEffect cleanup

---
 packages/synapse-interface/slices/bridge/updater.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/synapse-interface/slices/bridge/updater.tsx b/packages/synapse-interface/slices/bridge/updater.tsx
index e3c89f98e8..f035ec7e44 100644
--- a/packages/synapse-interface/slices/bridge/updater.tsx
+++ b/packages/synapse-interface/slices/bridge/updater.tsx
@@ -50,6 +50,7 @@ export default function Updater(): null {
     return () => {
       clearTimeout(debounceTimer)
       clearTimeout(animationTimer)
+      dispatch(setIsLoading(false))
     }
   }, [fromValue])
 

From 2d35210b578366d494201bcd6d2eeb6a43f9e007 Mon Sep 17 00:00:00 2001
From: Jonah Lin <57741810+linjonah@users.noreply.github.com>
Date: Tue, 10 Oct 2023 14:26:40 -0700
Subject: [PATCH 106/106] Add error handling for when fetchBridgeQuote does not
 have request or synapseSDK avail

---
 packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
index 261b3f8b5d..d9194fffa7 100644
--- a/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
+++ b/packages/synapse-interface/utils/actions/fetchBridgeQuotes.tsx
@@ -100,6 +100,8 @@ export async function fetchBridgeQuote(
       console.error('Error fetching bridge quote:', error)
       throw error
     }
+  } else {
+    console.error('Missing request or synapse SDK')
   }
 }