From 20a4f7e2e71698b1ca276108047b29c0c5050be5 Mon Sep 17 00:00:00 2001
From: abtestingalpha <abtestingalpha@gmail.com>
Date: Tue, 13 Aug 2024 17:11:04 -0400
Subject: [PATCH 1/4] Extracts bridgeQuote into own state

---
 .../BridgeExchangeRateInfo.tsx                | 15 ++++----
 .../BridgeTransactionButton.tsx               |  5 +--
 .../StateManagedBridge/OutputContainer.tsx    |  3 +-
 .../pages/state-managed-bridge/index.tsx      |  8 ++---
 .../slices/bridge/reducer.ts                  | 16 ---------
 .../slices/bridgeQuote/hooks.ts               |  6 ++++
 .../slices/bridgeQuote/reducer.ts             | 35 +++++++++++++++++++
 packages/synapse-interface/store/reducer.ts   |  2 ++
 packages/synapse-interface/store/store.ts     | 12 ++++---
 .../utils/hooks/useBridgeListener.ts          |  2 +-
 10 files changed, 69 insertions(+), 35 deletions(-)
 create mode 100644 packages/synapse-interface/slices/bridgeQuote/hooks.ts
 create mode 100644 packages/synapse-interface/slices/bridgeQuote/reducer.ts

diff --git a/packages/synapse-interface/components/StateManagedBridge/BridgeExchangeRateInfo.tsx b/packages/synapse-interface/components/StateManagedBridge/BridgeExchangeRateInfo.tsx
index 11283e8b62..4af36e5a57 100644
--- a/packages/synapse-interface/components/StateManagedBridge/BridgeExchangeRateInfo.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/BridgeExchangeRateInfo.tsx
@@ -8,6 +8,7 @@ import { getValidAddress, isValidAddress } from '@/utils/isValidAddress'
 import { EMPTY_BRIDGE_QUOTE } from '@/constants/bridge'
 import { CHAINS_BY_ID } from '@constants/chains'
 import * as CHAINS from '@constants/chains/master'
+import { useBridgeQuoteState } from '@/slices/bridgeQuote/hooks'
 
 export const BridgeExchangeRateInfo = () => {
   /* TODO:
@@ -55,10 +56,11 @@ const DestinationAddress = () => {
 }
 
 const Slippage = () => {
+  const { fromValue } = useBridgeState()
+
   const {
-    fromValue,
     bridgeQuote: { exchangeRate },
-  } = useBridgeState()
+  } = useBridgeQuoteState()
 
   const { formattedPercentSlippage, safeFromAmount, underFee, textColor } =
     useExchangeRateInfo(fromValue, exchangeRate)
@@ -77,7 +79,7 @@ const Slippage = () => {
 const Router = () => {
   const {
     bridgeQuote: { bridgeModuleName },
-  } = useBridgeState()
+  } = useBridgeQuoteState()
   return (
     <div className="flex justify-between">
       <span className="text-zinc-500 dark:text-zinc-400">Router</span>
@@ -87,7 +89,8 @@ const Router = () => {
 }
 
 const TimeEstimate = () => {
-  const { fromToken, bridgeQuote } = useBridgeState()
+  const { fromToken } = useBridgeState()
+  const { bridgeQuote } = useBridgeQuoteState()
 
   let showText
   let showTime
@@ -125,10 +128,10 @@ const TimeEstimate = () => {
 
 const GasDropLabel = () => {
   let decimalsToDisplay
+  const { toChainId } = useBridgeState()
   const {
     bridgeQuote: { gasDropAmount },
-    toChainId,
-  } = useBridgeState()
+  } = useBridgeQuoteState()
   const symbol = CHAINS_BY_ID[toChainId]?.nativeCurrency.symbol
 
   if ([CHAINS.FANTOM.id].includes(toChainId)) {
diff --git a/packages/synapse-interface/components/StateManagedBridge/BridgeTransactionButton.tsx b/packages/synapse-interface/components/StateManagedBridge/BridgeTransactionButton.tsx
index 9e76fc286b..6e63de8ab5 100644
--- a/packages/synapse-interface/components/StateManagedBridge/BridgeTransactionButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/BridgeTransactionButton.tsx
@@ -12,6 +12,7 @@ import { usePortfolioBalances } from '@/slices/portfolio/hooks'
 import { useAppDispatch } from '@/store/hooks'
 import { setIsDestinationWarningAccepted } from '@/slices/bridgeDisplaySlice'
 import { useWalletState } from '@/slices/wallet/hooks'
+import { useBridgeQuoteState } from '@/slices/bridgeQuote/hooks'
 
 export const BridgeTransactionButton = ({
   approveTxn,
@@ -43,10 +44,10 @@ export const BridgeTransactionButton = ({
     toToken,
     fromChainId,
     toChainId,
-    isLoading,
-    bridgeQuote,
   } = useBridgeState()
 
+  const { isLoading, bridgeQuote } = useBridgeQuoteState()
+
   const { isWalletPending } = useWalletState()
   const { showDestinationWarning, isDestinationWarningAccepted } =
     useBridgeDisplayState()
diff --git a/packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx b/packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx
index 9d3459e551..c7e8d05ade 100644
--- a/packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx
@@ -12,10 +12,11 @@ import { CHAINS_BY_ID } from '@/constants/chains'
 import { setToChainId, setToToken } from '@/slices/bridge/reducer'
 import { useBridgeDisplayState, useBridgeState } from '@/slices/bridge/hooks'
 import { useWalletState } from '@/slices/wallet/hooks'
+import { useBridgeQuoteState } from '@/slices/bridgeQuote/hooks'
 
 export const OutputContainer = () => {
   const { address } = useAccount()
-  const { bridgeQuote, isLoading } = useBridgeState()
+  const { bridgeQuote, isLoading } = useBridgeQuoteState()
   const { showDestinationAddress } = useBridgeDisplayState()
 
   const showValue =
diff --git a/packages/synapse-interface/pages/state-managed-bridge/index.tsx b/packages/synapse-interface/pages/state-managed-bridge/index.tsx
index 5cb882de61..de337c73ee 100644
--- a/packages/synapse-interface/pages/state-managed-bridge/index.tsx
+++ b/packages/synapse-interface/pages/state-managed-bridge/index.tsx
@@ -36,8 +36,6 @@ import {
   setToChainId,
   setToToken,
   updateFromValue,
-  setBridgeQuote,
-  setIsLoading,
   setDestinationAddress,
 } from '@/slices/bridge/reducer'
 import { setIsWalletPending } from '@/slices/wallet/reducer'
@@ -70,6 +68,8 @@ import { wagmiConfig } from '@/wagmiConfig'
 import { useStaleQuoteUpdater } from '@/utils/hooks/useStaleQuoteUpdater'
 import { screenAddress } from '@/utils/screenAddress'
 import { useWalletState } from '@/slices/wallet/hooks'
+import { useBridgeQuoteState } from '@/slices/bridgeQuote/hooks'
+import { setBridgeQuote, setIsLoading } from '@/slices/bridgeQuote/reducer'
 
 const StateManagedBridge = () => {
   const { address } = useAccount()
@@ -86,12 +86,12 @@ const StateManagedBridge = () => {
     toChainId,
     fromToken,
     toToken,
-    bridgeQuote,
     debouncedFromValue,
     destinationAddress,
-    isLoading: isQuoteLoading,
   }: BridgeState = useBridgeState()
 
+  const { bridgeQuote, isLoading: isQuoteLoading } = useBridgeQuoteState()
+
   const { isWalletPending } = useWalletState()
 
   const { showSettingsSlideOver, showDestinationAddress } = useSelector(
diff --git a/packages/synapse-interface/slices/bridge/reducer.ts b/packages/synapse-interface/slices/bridge/reducer.ts
index 2891b5d92f..6a27ef3c64 100644
--- a/packages/synapse-interface/slices/bridge/reducer.ts
+++ b/packages/synapse-interface/slices/bridge/reducer.ts
@@ -27,8 +27,6 @@ export interface BridgeState {
   fromValue: string
   debouncedFromValue: string
   debouncedToTokensFromValue: string
-  bridgeQuote: BridgeQuote
-  isLoading: boolean
   deadlineMinutes: number | null
   destinationAddress: Address | null
 }
@@ -62,8 +60,6 @@ export const initialState: BridgeState = {
   fromValue: '',
   debouncedFromValue: '',
   debouncedToTokensFromValue: '',
-  bridgeQuote: EMPTY_BRIDGE_QUOTE,
-  isLoading: false,
   deadlineMinutes: null,
   destinationAddress: null,
 }
@@ -72,9 +68,6 @@ export const bridgeSlice = createSlice({
   name: 'bridge',
   initialState,
   reducers: {
-    setIsLoading: (state, action: PayloadAction<boolean>) => {
-      state.isLoading = action.payload
-    },
     setFromChainId: (state, action: PayloadAction<number>) => {
       const incomingFromChainId = action.payload
 
@@ -431,9 +424,6 @@ export const bridgeSlice = createSlice({
       state.toChainIds = toChainIds
       state.toTokens = toTokens
     },
-    setBridgeQuote: (state, action: PayloadAction<BridgeQuote>) => {
-      state.bridgeQuote = action.payload
-    },
     updateFromValue: (state, action: PayloadAction<string>) => {
       state.fromValue = action.payload
     },
@@ -455,9 +445,6 @@ export const bridgeSlice = createSlice({
     clearDestinationAddress: (state) => {
       state.destinationAddress = initialState.destinationAddress
     },
-    resetBridgeQuote: (state) => {
-      state.bridgeQuote = initialState.bridgeQuote
-    },
     resetBridgeInputs: (state) => {
       state.fromChainId = initialState.fromChainId
       state.fromToken = initialState.fromToken
@@ -472,8 +459,6 @@ export const bridgeSlice = createSlice({
 export const {
   updateDebouncedFromValue,
   updateDebouncedToTokensFromValue,
-  setBridgeQuote,
-  resetBridgeQuote,
   setFromChainId,
   setToChainId,
   setFromToken,
@@ -481,7 +466,6 @@ export const {
   updateFromValue,
   setDeadlineMinutes,
   setDestinationAddress,
-  setIsLoading,
   resetBridgeInputs,
   clearDestinationAddress,
 } = bridgeSlice.actions
diff --git a/packages/synapse-interface/slices/bridgeQuote/hooks.ts b/packages/synapse-interface/slices/bridgeQuote/hooks.ts
new file mode 100644
index 0000000000..ecc7e9c76e
--- /dev/null
+++ b/packages/synapse-interface/slices/bridgeQuote/hooks.ts
@@ -0,0 +1,6 @@
+import { RootState } from '@/store/store'
+import { useAppSelector } from '@/store/hooks'
+
+export const useBridgeQuoteState = (): RootState['bridgeQuote'] => {
+  return useAppSelector((state) => state.bridgeQuote)
+}
diff --git a/packages/synapse-interface/slices/bridgeQuote/reducer.ts b/packages/synapse-interface/slices/bridgeQuote/reducer.ts
new file mode 100644
index 0000000000..abfb32935f
--- /dev/null
+++ b/packages/synapse-interface/slices/bridgeQuote/reducer.ts
@@ -0,0 +1,35 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+import { EMPTY_BRIDGE_QUOTE } from '@/constants/bridge'
+import { type BridgeQuote } from '@/utils/types'
+
+export interface BridgeQuoteState {
+  bridgeQuote: BridgeQuote
+  isLoading: boolean
+}
+
+export const initialState: BridgeQuoteState = {
+  bridgeQuote: EMPTY_BRIDGE_QUOTE,
+  isLoading: false,
+}
+
+export const bridgeQuoteSlice = createSlice({
+  name: 'bridgeQuote',
+  initialState,
+  reducers: {
+    setIsLoading: (state, action: PayloadAction<boolean>) => {
+      state.isLoading = action.payload
+    },
+    setBridgeQuote: (state, action: PayloadAction<BridgeQuote>) => {
+      state.bridgeQuote = action.payload
+    },
+    resetBridgeQuote: (state) => {
+      state.bridgeQuote = initialState.bridgeQuote
+    },
+  },
+})
+
+export const { setBridgeQuote, resetBridgeQuote, setIsLoading } =
+  bridgeQuoteSlice.actions
+
+export default bridgeQuoteSlice.reducer
diff --git a/packages/synapse-interface/store/reducer.ts b/packages/synapse-interface/store/reducer.ts
index f2d9c3a4e5..f6d940f210 100644
--- a/packages/synapse-interface/store/reducer.ts
+++ b/packages/synapse-interface/store/reducer.ts
@@ -17,6 +17,7 @@ import poolWithdraw from '@/slices/poolWithdrawSlice'
 import priceData from '@/slices/priceDataSlice'
 import gasData from '@/slices/gasDataSlice'
 import wallet from '@/slices/wallet/reducer'
+import bridgeQuote from '@/slices/bridgeQuote/reducer'
 import { api } from '@/slices/api/slice'
 import { RootActions } from '@/slices/application/actions'
 
@@ -48,6 +49,7 @@ export const appReducer = combineReducers({
   priceData,
   gasData,
   wallet,
+  bridgeQuote,
   [api.reducerPath]: api.reducer,
   ...persistedReducers,
 })
diff --git a/packages/synapse-interface/store/store.ts b/packages/synapse-interface/store/store.ts
index db96e735d7..70f5515a6f 100644
--- a/packages/synapse-interface/store/store.ts
+++ b/packages/synapse-interface/store/store.ts
@@ -45,6 +45,7 @@ let previousState = store.getState()
 store.subscribe(() => {
   const currentState = store.getState()
   const bridgeState = currentState.bridge
+  const bridgeQuoteState = currentState.bridgeQuote
 
   const address = currentState.application?.lastConnectedAddress
 
@@ -53,13 +54,14 @@ store.subscribe(() => {
 
   if (
     !_.isEqual(
-      previousState.bridge.bridgeQuote,
-      currentState.bridge.bridgeQuote
+      previousState.bridgeQuote.bridgeQuote,
+      currentState.bridgeQuote.bridgeQuote
     ) &&
-    currentState.bridge.bridgeQuote.outputAmount !== 0n
+    currentState.bridgeQuote.bridgeQuote.outputAmount !== 0n
   ) {
     const { outputAmountString, routerAddress, exchangeRate } =
-      bridgeState.bridgeQuote
+      bridgeQuoteState.bridgeQuote
+
     const { fromChainId, toChainId, fromToken, toToken, debouncedFromValue } =
       bridgeState
 
@@ -74,7 +76,7 @@ store.subscribe(() => {
       outputAmountString,
       routerAddress,
       exchangeRate: BigInt(exchangeRate.toString()),
-      bridgeQuote: currentState.bridge.bridgeQuote,
+      bridgeQuote: currentState.bridgeQuote.bridgeQuote,
     }
     segmentAnalyticsEvent(eventTitle, eventData)
   }
diff --git a/packages/synapse-interface/utils/hooks/useBridgeListener.ts b/packages/synapse-interface/utils/hooks/useBridgeListener.ts
index e19fd6f2b9..0855ce2d1c 100644
--- a/packages/synapse-interface/utils/hooks/useBridgeListener.ts
+++ b/packages/synapse-interface/utils/hooks/useBridgeListener.ts
@@ -4,11 +4,11 @@ import { useAppDispatch } from '@/store/hooks'
 import { useBridgeState } from '@/slices/bridge/hooks'
 import {
   BridgeState,
-  setIsLoading,
   initialState,
   updateDebouncedFromValue,
   updateDebouncedToTokensFromValue,
 } from '@/slices/bridge/reducer'
+import { setIsLoading } from '@/slices/bridgeQuote/reducer'
 
 export const useBridgeListener = () => {
   const dispatch = useAppDispatch()

From 4f2cb18b68647587c819451b850743ed6b5d7740 Mon Sep 17 00:00:00 2001
From: abtestingalpha <abtestingalpha@gmail.com>
Date: Tue, 13 Aug 2024 17:11:20 -0400
Subject: [PATCH 2/4] Removes teaser

---
 .../synapse-interface/pages/teaser/#index.tsx |  30 ---
 .../pages/teaser/FauxBridge.tsx               | 248 ------------------
 .../synapse-interface/pages/teaser/Hero.tsx   | 153 -----------
 .../pages/teaser/ValueProps.tsx               | 231 ----------------
 4 files changed, 662 deletions(-)
 delete mode 100644 packages/synapse-interface/pages/teaser/#index.tsx
 delete mode 100644 packages/synapse-interface/pages/teaser/FauxBridge.tsx
 delete mode 100644 packages/synapse-interface/pages/teaser/Hero.tsx
 delete mode 100644 packages/synapse-interface/pages/teaser/ValueProps.tsx

diff --git a/packages/synapse-interface/pages/teaser/#index.tsx b/packages/synapse-interface/pages/teaser/#index.tsx
deleted file mode 100644
index 635b626b15..0000000000
--- a/packages/synapse-interface/pages/teaser/#index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
-import { useAccount } from 'wagmi'
-
-import { segmentAnalyticsEvent } from '@/contexts/SegmentAnalyticsProvider'
-
-import Hero from './Hero'
-import ValueProps from './ValueProps'
-
-import Wrapper from '@/components/WipWrapperComponents/Wrapper'
-
-const LandingPage = () => {
-  const router = useRouter()
-
-  useEffect(() => {
-    segmentAnalyticsEvent(`[Teaser] arrives`, {
-      query: router.query,
-      pathname: router.pathname,
-    })
-  }, [])
-
-  return (
-    <Wrapper>
-      <Hero />
-      <ValueProps />
-    </Wrapper>
-  )
-}
-
-export default LandingPage
diff --git a/packages/synapse-interface/pages/teaser/FauxBridge.tsx b/packages/synapse-interface/pages/teaser/FauxBridge.tsx
deleted file mode 100644
index 2e7390cb8d..0000000000
--- a/packages/synapse-interface/pages/teaser/FauxBridge.tsx
+++ /dev/null
@@ -1,248 +0,0 @@
-import PulseDot from '@/components/icons/PulseDot'
-import { CHAINS_ARR } from '@/constants/chains'
-import * as BRIDGEABLE from '@constants/tokens/bridgeable'
-import { TOKENS_SORTED_BY_SWAPABLETYPE } from '@/constants/tokens'
-import * as WALLET_ICONS from '@components/WalletIcons'
-
-const cardStyle =
-  'text-black dark:text-white bg-zinc-100 dark:bg-zinc-900/95 p-3 rounded-md border border-zinc-200 dark:border-zinc-800 shadow-xl grid gap-4 max-w-sm'
-const sectionStyle =
-  'relative bg-zinc-50 dark:bg-zinc-800 rounded-md px-2.5 py-3 grid gap-3 grid-cols-2 border border-zinc-300 dark:border-transparent'
-const buttonStyle =
-  'rounded px-4 py-1 bg-zinc-100 dark:bg-zinc-700 border border-zinc-200 dark:border-transparent hover:border-zinc-400 hover:dark:border-zinc-500 h-fit mr-1 cursor-pointer focus:border-zinc-400 focus:dark:borer-zinc-500'
-const buttonSelectStyle =
-  'flex gap-1.5 items-center rounded px-3 py-1.5 bg-inherit dark:bg-zinc-700 border border-zinc-200 dark:border-transparent hover:border-zinc-400 hover:dark:border-zinc-500 active:opacity-70 focus:ring-1 focus:ring-zinc-500 focus:border-transparent'
-const inputWrapperStyle =
-  'relative flex bg-white dark:bg-inherit border border-zinc-200 dark:border-zinc-700 rounded-md gap-0 p-1.5 col-span-2 gap-1.5 items-center'
-const inputStyle =
-  'bg-inherit border-none w-full p-1.5 text-xxl font-normal dark:font-light tracking-wide rounded'
-
-export default () => {
-  return (
-    <div className={cardStyle}>
-      <section className={sectionStyle}>
-        <Select type="Chain" data="volume" />
-        <SupportedWallets />
-        <div className={inputWrapperStyle}>
-          <Select type="Token" data="volume" />
-          <input type="text" placeholder="1000" className={inputStyle} />
-          <HistoricMax />
-        </div>
-      </section>
-      <section className={sectionStyle}>
-        <Select type="Chain" data="count" />
-        <div className={inputWrapperStyle}>
-          <Select type="Token" data="count" />
-          <input disabled readOnly type="text" className={inputStyle}></input>
-        </div>
-      </section>
-      <BridgeButton />
-    </div>
-  )
-}
-
-const Select = ({
-  type,
-  data,
-}: {
-  type: 'Chain' | 'Token'
-  data: 'volume' | 'count'
-}) => {
-  let button: string
-  let header: string
-  let value: number
-  let reduce: Function
-  let format: Function
-  switch (data) {
-    case 'volume':
-      button = `Volume by ${type}`
-      header = '$ vol.'
-      value = 1000000000 + Math.random() * 100000000
-      reduce = () => (value *= 0.85)
-      format = () => {
-        if (value >= 1000000) return '$' + (value / 1000000).toFixed(1) + 'M'
-        let str = value.toFixed(0)
-        if (value >= 1000) {
-          for (let i = 3; i < str.length; i += 4)
-            str = `${str.slice(0, str.length - i)},${str.slice(-i)}`
-          return '$' + str
-        }
-        return '$' + value.toFixed(2)
-      }
-      break
-    case 'count':
-      button = `Txns by ${type}`
-      header = 'Txns'
-      value = 10000 + Math.random() * 1000
-      reduce = () => (value *= 0.9)
-      format = () => {
-        let str = value.toFixed()
-        for (let i = 3; i < str.length; i += 4)
-          str = `${str.slice(0, str.length - i)},${str.slice(-i)}`
-        return str
-      }
-      break
-  }
-
-  let arr
-  let key: string
-  let img: string
-  let name: string
-
-  switch (type) {
-    case 'Chain':
-      arr = CHAINS_ARR
-      key = 'id'
-      img = 'chainImg'
-      name = 'name'
-      break
-    case 'Token':
-      arr = Object.values(BRIDGEABLE)
-      key = 'name'
-      img = 'icon'
-      name = 'symbol'
-      break
-  }
-
-  return (
-    <div>
-      <button
-        className={`peer ml-0.5 w-fit whitespace-nowrap ${buttonSelectStyle}`}
-      >
-        {type} <span className="text-xxs">▼</span>
-      </button>
-      <div className="absolute pt-1.5 hidden hover:block peer-hover:block peer-focus:block animate-slide-down origin-top-left z-10 whitespace-nowrap">
-        <table className="rounded border-separate border-spacing-0 shadow bg-white dark:bg-zinc-900/95 backdrop-blur-sm border border-zinc-200 dark:border-zinc-700 block max-h-[372px] overflow-y-scroll">
-          <thead className="text-sm cursor-default">
-            <tr>
-              <th className="font-normal px-4 pt-3 pb-2 sticky top-0 bg-white/90 dark:bg-zinc-900/95 backdrop-blur-sm border-b border-zinc-300 dark:border-zinc-800 text-zinc-500 text-left ">
-                {type}
-              </th>
-              <th className="font-normal px-4 pt-3 pb-2 sticky top-0 bg-white/90 dark:bg-zinc-900/95 backdrop-blur-sm border-b border-zinc-300 dark:border-zinc-800 text-zinc-500 text-right ">
-                {header}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {arr.map((item, i) => {
-              reduce()
-              return (
-                <tr
-                  key={item[key] === 'Wrapped ETH' ? item.symbol : item[key]}
-                  className="hover:bg-zinc-100 hover:dark:bg-zinc-800 cursor-default"
-                >
-                  <td className="px-4 py-2.5 text-left flex items-center gap-2">
-                    <img width="16" height="16" src={item[img].src} />
-                    {item[name]}
-                  </td>
-                  <td className="px-4 py-2 text-right">{format()}</td>
-                </tr>
-              )
-            })}
-          </tbody>
-          <tfoot />
-        </table>
-      </div>
-    </div>
-  )
-}
-
-const SupportedWallets = () => (
-  <div className="group relative self-center justify-self-end">
-    <div className="absolute mb-2 bottom-full right-0 px-3 py-2 bg-white dark:bg-zinc-900/50 backdrop-blur-sm border border-zinc-200 dark:border-zinc-800 rounded items-center hidden group-hover:grid gap-2 shadow whitespace-nowrap animate-slide-up origin-bottom-right">
-      <header className="text-sm text-zinc-500">Supported wallets</header>
-      <ul className="flex gap-4">
-        {Object.values(WALLET_ICONS).map((icon, i) => (
-          <li key={i}>{icon({ width: 24, height: 24 })}</li>
-        ))}
-      </ul>
-    </div>
-    <button className="peer flex gap-2.5 items-center justify-self-end text-sm text-zinc-700 dark:text-zinc-300 mr-1 cursor-pointer">
-      <PulseDot className="fill-green-500 stroke-green-500" /> Connected
-    </button>
-  </div>
-)
-
-const HistoricMax = () => (
-  <div className="group relative">
-    <div className="absolute mb-2 bottom-full right-0 hidden group-hover:block animate-slide-up origin-bottom-right">
-      <a
-        href="https://ftmscan.com/tx/0x18199d88fe9fc8baa0f0f02d216c0e7998e1e59aaef6e0ea7a7a35d8dd6bc90b"
-        target="_blank"
-        className="px-3 py-2 bg-white dark:bg-zinc-900/95 backdrop-blur-sm border border-zinc-200 dark:border-zinc-800 rounded items-center grid gap-x-4 gap-y-1 shadow whitespace-nowrap text-sm"
-      >
-        <ul>
-          <li>40,668 ETH</li>
-          <li>Fantom</li>
-        </ul>
-        <RightAngle height="12" />
-        <ul>
-          <li>40,668 ETH</li>
-          <li>Ethereum</li>
-        </ul>
-        <header className="text-zinc-500 col-span-3">Jan 29, 2022 – #1</header>
-      </a>
-    </div>
-    <button className={`peer ${buttonStyle}`}>Max</button>
-  </div>
-)
-
-const RightAngle = ({ height }) => {
-  const width = height / 2
-  return (
-    <svg
-      width={width}
-      height={height}
-      viewBox={`0 0 ${width} ${height}`}
-      fill="none"
-      strokeWidth={height / 6}
-      strokeLinejoin="round"
-      strokeLinecap="round"
-      overflow="visible"
-      className="stroke-zinc-500"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d={`M0,0 ${width},${width} 0,${height}`} />
-    </svg>
-  )
-}
-
-const BridgeButton = () => (
-  <div className="group relative">
-    <div className="absolute mb-1 w-full bottom-full hidden group-hover:block animate-slide-up origin-bottom">
-      <div className="text-sm text-zinc-500 dark:text-zinc-400 w-fit m-auto px-3 py-1 bg-white dark:bg-zinc-900/95 border border-zinc-200 dark:border-zinc-800 rounded shadow">
-        Visit Bridge
-      </div>
-    </div>
-    <a
-      href="#"
-      className="border border-fuchsia-500 py-2.5 pl-2 block rounded text-lg tracking-wider text-center hover:bg-purple-50 hover:dark:bg-fuchsia-950"
-      onMouseEnter={(e) => {
-        const target = e.target as HTMLAnchorElement
-        target.querySelector('animate')?.beginElement()
-      }}
-    >
-      Bridge
-      <svg
-        width="12"
-        height="13"
-        viewBox="0 -8 16 16"
-        overflow="visible"
-        strokeWidth="4"
-        fill="none"
-        preserveAspectRatio="xMaxYMid"
-        className="inline ml-2 mb-1 stroke-zinc-800 dark:stroke-zinc-200"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <animate
-          attributeName="width"
-          values="12; 18; 12"
-          dur=".5s"
-          calcMode="spline"
-          keySplines="0 0 0 1; .5 0 0 1"
-        />
-        <path d="m16,0 -16,0 m8,-8 8,8 -8,8" />
-      </svg>
-    </a>
-  </div>
-)
\ No newline at end of file
diff --git a/packages/synapse-interface/pages/teaser/Hero.tsx b/packages/synapse-interface/pages/teaser/Hero.tsx
deleted file mode 100644
index a92906294f..0000000000
--- a/packages/synapse-interface/pages/teaser/Hero.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-
-export default function Hero() {
-  const [h1, setH1] = useState<[cta: string] | [cta: string, index: number]>([
-    'default',
-  ])
-
-  const bridgeRef = useRef(null)
-  const buildRef = useRef(null)
-
-  const [cta, index] = h1
-
-  const ctas = {
-    default: {
-      tag: 'Synapse 2.0: The Modular Interchain Network',
-    },
-    bridge: {
-      tag: 'Any asset to any chain',
-      url: '#',
-    },
-    build: {
-      tag: 'Custom everything',
-      url: '#',
-    },
-  }
-
-  const { tag, url } = ctas[cta]
-
-  const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time))
-
-  useEffect(() => {
-    if (index < tag.length) {
-      sleep((index / tag.length) * 5 + 5).then(() => setH1([cta, +index + 1]))
-    } else {
-      bridgeRef?.current?.addEventListener(
-        'mousemove',
-        () => setH1(['bridge', 0]),
-        { once: true }
-      )
-
-      buildRef?.current?.addEventListener(
-        'mousemove',
-        () => setH1(['build', 0]),
-        { once: true }
-      )
-    }
-
-    if (cta !== 'default') {
-      document.addEventListener('mousemove', () => setH1(['default', 0]), {
-        once: true,
-      })
-    }
-  })
-
-  const Tagline = () => {
-    return (
-      <>
-        {tag.slice(0, index)}
-        {index < tag.length - 4 && (
-          <span className="text-fuchsia-500/60">
-            {String.fromCharCode(Math.random() * 61 + 65)}
-          </span>
-        )}
-        {index < tag.length - 5 && (
-          <span className="text-purple-500/60">_</span>
-        )}
-      </>
-    )
-  }
-
-  const ctaButtonBaseStyle =
-    'px-5 pt-1.5 pb-2 text-lg m-2 border rounded inline-block'
-
-  return (
-    <header className="my-0 xs:my-4 md:my-8 lg:my-12 text-center max-w-3xl grid place-items-center">
-      <div className="hidden sm:block text-3xl sm:text-6xl font-semibold my-4 cursor-default">
-        Modular Interchain Messages
-      </div>
-      <div
-        className="pt-4 pb-12 grid gap-4"
-        onMouseMove={(e) => e.stopPropagation()}
-      >
-        <h1 className="max-w-xl text-3xl md:text-2xl font-medium cursor-default">
-          {url ? (
-            <a
-              href={url}
-              onMouseEnter={(e) => {
-                const target = e.target as HTMLAnchorElement
-                target.querySelector('animate')?.beginElement()
-              }}
-              className="p-4 hover:text-black hover:dark:text-white"
-            >
-              <Tagline />
-              {index === tag.length && <ArrowBounce />}
-            </a>
-          ) : (
-            <Tagline />
-          )}
-        </h1>
-        <div>
-          <a
-            ref={cta !== 'bridge' ? bridgeRef : null}
-            className={`${ctaButtonBaseStyle} border-zinc-500 hover:border-black hover:dark:border-white bg-white hover:bg-zinc-100 dark:bg-zinc-950 hover:dark:bg-zinc-900`}
-            href={ctas.bridge.url}
-          >
-            Bridge
-          </a>
-          <a
-            ref={cta !== 'build' ? buildRef : null}
-            className={`${ctaButtonBaseStyle} border-fuchsia-500 hover:bg-fuchsia-100 hover:dark:bg-fuchsia-950`}
-            href={ctas.build.url}
-          >
-            Build
-          </a>
-        </div>
-      </div>
-      <p className="leading-relaxed max-w-xl text-lg dark:font-light tracking-wider -mt-8">
-        Say goodbye to centralized resource pools for cross-chain communication.
-        Synapse lets you customize literally every aspect of your interchain
-        communications.
-      </p>
-    </header>
-  )
-}
-
-const ArrowBounce = () => (
-  <svg
-    width="14"
-    height="14"
-    viewBox="0 -8 16 16"
-    overflow="visible"
-    strokeWidth="4"
-    fill="none"
-    preserveAspectRatio="xMaxYMid"
-    className="inline ml-2 mb-1"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <animate
-      attributeName="width"
-      values="14; 22; 14"
-      dur=".5s"
-      calcMode="spline"
-      keySplines="0 0 0 1; .5 0 0 1"
-    />
-    <animate
-      attributeName="stroke"
-      values="hsl(275deg 100% 60%); hsl(290deg 100% 70%); hsl(275deg 100% 60%)"
-      dur="2s"
-      repeatCount="indefinite"
-    />
-    <path d="m16,0 -16,0 m8,-8 8,8 -8,8" />
-  </svg>
-)
diff --git a/packages/synapse-interface/pages/teaser/ValueProps.tsx b/packages/synapse-interface/pages/teaser/ValueProps.tsx
deleted file mode 100644
index 26323d5cd0..0000000000
--- a/packages/synapse-interface/pages/teaser/ValueProps.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-import FauxBridge from './FauxBridge'
-
-export default function ValueProps() {
-  return (
-    <article className="grid gap-16 md:gap-24 p-4">
-      <section>
-        {/* <dl className="w-fit md:w-max grid grid-rows-2 grid-flow-col-dense text-center items-center bg-gradient-to-b from-white to-slate-100 dark:from-zinc-900 dark:to-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-md px-8 pt-3 pb-2.5 gap-x-12 shadow-sm mt-6 mx-auto cursor-default">
-          <dt className="row-start-2 text-lg text-zinc-500 dark:text-zinc-300/80 tracking-wide">
-            Bridge volume
-          </dt>
-          <dd className="text-3xl font-medium tracking-wide">
-            $
-            <data value="45302800827" className="mx-0.5">
-              45.3
-            </data>
-            B
-          </dd>
-          <dt className="row-start-2 text-lg text-zinc-500 dark:text-zinc-300/80 tracking-wide">
-            Transactions
-          </dt>
-          <dd className="text-3xl font-medium tracking-wide">
-            <data value="10619219" className="mx-0.5">
-              10.6
-            </data>
-            M
-          </dd>
-          <dt className="row-start-2 text-lg text-zinc-500 dark:text-zinc-300/80 tracking-wide">
-            Total value locked
-          </dt>
-          <dd className="text-3xl font-medium tracking-wide">
-            $
-            <data value="116783994" className="mx-0.5">
-              116.7
-            </data>
-            M
-          </dd>
-        </dl> */}
-        <ul className="w-fit md:w-max grid md:flex text-xl md:text-lg text-center items-center place-center bg-gradient-to-b from-white to-slate-100 dark:from-zinc-900 dark:to-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-md px-6 gap-x-8 mt-6 shadow-sm mx-auto cursor-default">
-          <li className="-mt-1 p-3">
-            $<data className="mx-0.5">45.3B</data> Bridge volume
-          </li>
-          <li className="-mt-1 p-3">
-            <data className="mx-0.5">10.6M</data> transactions
-          </li>
-          <li className="-mt-1 p-3">
-            $<data className="mx-0.5">116.7M</data> Total value locked
-          </li>
-        </ul>
-        {/* <ul className="w-fit md:w-max grid grid-cols-1 sm:flex text-lg text-center items-center place-center bg-gradient-to-b from-white to-slate-100 dark:from-zinc-900 dark:to-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-md px-6 py-2 gap-x-8 gap-y-4 shadow-sm mx-auto cursor-default">
-          <li className="-mt-1 p-1">50 blockchains</li>
-          <li className="-mt-1 p-1">50,000 validators</li>
-          <li className="-mt-1 p-1">10.2B messages</li>
-          <li className="-mt-1 p-1">$1.2B transferred</li>
-        </ul> */}
-      </section>
-      <section className="flex odd:flex-col even:flex-col-reverse md:grid grid-cols-2 gap-x-12 gap-y-4 items-center">
-        <div className="grid place-items-center">
-          <svg
-            width="100%"
-            height="100%"
-            viewBox="-9 -9 170 118"
-            vectorEffect="non-scaling-stroke"
-            strokeWidth=".5"
-            overflow="visible"
-            // preserveAspectRatio="none"
-            className="stroke-fuchsia-800/50 dark:stroke-fuchsia-300/50 fill-fuchsia-200/50 dark:fill-fuchsia-300/5 drop-shadow-xl h-64 max-w-sm"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect
-              width="168"
-              height="116"
-              x="-8"
-              y="-8"
-              rx="4"
-              className="stroke-purple-400/75 fill-[hsl(275deg_100%_96%)] dark:fill-[hsl(300deg_40%_10%)]"
-            />
-            <path d="m48,11 4,0 m22,0 4,0 m50,11 0,4 m0,22 0,4 m-24,24 -4,0 m-48,0 -4,0 m0,-39 4,0 m11,11 0,4 m0,-30 0,4" />
-            <rect width="48" height="48" rx="2" />
-            <rect width="22" height="22" x="52" rx="2" />
-            <rect width="74" height="22" x="78" rx="2" />
-            <rect width="100" height="22" x="52" y="26" rx="2" />
-            <rect width="48" height="48" x="0" y="52" rx="2" />
-            <rect width="48" height="48" x="52" y="52" rx="2" />
-            <rect width="48" height="48" x="104" y="52" rx="2" />
-          </svg>
-        </div>
-        <div>
-          <h2 className="text-4xl font-medium mb-4">Reach every user</h2>
-          <p className="text-lg leading-relaxed mb-3">
-            Synapse enables developers to build truly native cross-chain
-            applications with an economically secure method to reach consensus
-            on interchain transactions,
-          </p>
-        </div>
-      </section>
-      {/* <section>
-        <ul className="flex flex-wrap gap-12 bg-white dark:bg-zinc-950 px-8 py-6 border border-zinc-300 dark:border-zinc-800 rounded-lg shadow-lg">
-          <li className="basis-56 grow">
-            <h2 className="text-4xl font-medium mb-4">Extensible</h2>
-            <p className="text-lg mb-2">
-              Synapse’s cross-chain messaging contracts can be deployed across
-              any blockchain
-            </p>
-          </li>
-          <li className="basis-56 grow">
-            <h2 className="text-4xl font-medium mb-4">Secure</h2>
-            <p className="text-lg mb-2">
-              Synapse employs an Optimistic security model to ensure integrity
-              of cross-chain messages
-            </p>
-          </li>
-          <li className="basis-56 grow">
-            <h2 className="text-4xl font-medium mb-4">Generalized</h2>
-            <p className="text-lg mb-2">
-              Any arbitrary data can be sent across chains including contract
-              calls, NFTs, snapshots, and more
-            </p>
-          </li>
-        </ul>
-      </section> */}
-      <section className="flex odd:flex-col even:flex-col-reverse md:grid grid-cols-2 gap-12 items-center">
-        <div>
-          <h2 className="text-4xl font-medium mb-4">
-            Build powerful decentralized apps
-          </h2>
-          <p className="text-lg leading-relaxed mb-4">
-            Synapse Bridge is built on top of the cross-chain infrastructure
-            enabling users to seamlessly transfer assets across all blockchains.
-            The Bridge has become the most widely-used method to move assets
-            cross-chain, offering low cost, fast, and secure bridging.
-          </p>
-        </div>
-        <div className="grid justify-center">
-          <FauxBridge />
-        </div>
-      </section>
-      {/* <section>
-        <ul className="flex flex-wrap gap-12 bg-white dark:bg-zinc-950 px-8 py-6 border border-zinc-300 dark:border-zinc-800 rounded-lg shadow-lg">
-          <li className="basis-56 grow">
-            <h2 className="text-4xl font-medium mb-4">Deep Liquidity</h2>
-            <p className="text-lg mb-2">
-              Swap native assets using our cross-chain AMM liquidity pools
-            </p>
-          </li>
-          <li className="basis-56 grow">
-            <h2 className="text-4xl font-medium mb-4">Wide Support</h2>
-            <p className="text-lg mb-2">
-              Access over 16 different EVM and non-EVM blockchains with more
-              integrations coming soon
-            </p>
-          </li>
-          <li className="basis-56 grow">
-            <h2 className="text-4xl font-medium mb-4">Developer Friendly</h2>
-            <p className="text-lg mb-2">
-              Easily integrate cross-chain token bridging natively into your
-              decentralized application
-            </p>
-          </li>
-        </ul>
-      </section> */}
-      {/* <section className="w-full">
-        <header className="p-4">
-          <h2 className="text-4xl font-medium mb-4">Widely Integrated</h2>
-          <p className="text-lg mb-2">
-            Synapse is widely integrated across the most-used Layer 1 & 2
-            networks for a seamless cross-chain experience.
-          </p>
-        </header>
-        <ul className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 text-center gap-4 bg-white dark:bg-zinc-950 p-4 border border-zinc-300 dark:border-zinc-800 rounded-lg shadow-lg">
-          {ChainList().map((a) => {
-            return (
-              <li className="border border-zinc-300 dark:border-zinc-700 rounded pb-4 pt-16">
-                {a}
-              </li>
-            )
-          })}
-        </ul>
-      </section> */}
-      <section className="flex odd:flex-col even:flex-col-reverse md:grid grid-cols-2 gap-12 items-center">
-        <div className="w-full h-full grid items-center justify-center">
-          <svg
-            width="100%"
-            height="50%"
-            viewBox="-4 -4 8 8"
-            strokeWidth=".1"
-            vectorEffect="non-scaling-size"
-            fill="none"
-            overflow="visible"
-            className="stroke-fuchsia-500"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle r="4" />
-          </svg>
-        </div>
-        <div>
-          <h2 className="text-4xl font-medium my-4">Secure your routes</h2>
-          <p className="text-lg leading-relaxed">
-            Synapse has processed millions of transactions and tens of billions
-            in bridged assets.
-          </p>
-        </div>
-      </section>
-    </article>
-  )
-}
-
-/*
-if (theme) {
-    formStyle = `p-3 rounded-md border shadow-sm grid gap-4 absolute w-96 ${
-      theme === 'dark'
-        ? 'text-white bg-zinc-900 border-zinc-800 mr-8 mt-8'
-        : 'text-black bg-neutral-100 border-zinc-300 ml-8 mb-8'
-    }`
-    sectionStyle = `rounded px-2.5 py-3 grid gap-3 grid-cols-2 ${
-      theme === 'dark' ? 'bg-zinc-800' : 'bg-zinc-50 border border-zinc-200'
-    }`
-    selectStyle = `rounded w-fit cursor-pointer border ${
-      theme === 'dark'
-        ? 'bg-zinc-700 border-transparent'
-        : 'bg-inherit border-zinc-300'
-    }`
-    inputWrapperStyle = `flex border rounded-md p-1.5 col-span-2 gap-1.5 ${
-      theme === 'dark'
-        ? 'bg-inherit border-zinc-700'
-        : 'bg-white border-zinc-200 '
-    }`
-    inputStyle = `bg-inherit border-none w-full p-1.5 text-xxl font-normal tracking-wide rounded ${
-      theme === 'dark' ? 'font-light' : 'font-normal'
-    }`
-  }
-  */

From e577fe35cb51457ccad8b6f8447afde66a2389bd Mon Sep 17 00:00:00 2001
From: abtestingalpha <abtestingalpha@gmail.com>
Date: Tue, 13 Aug 2024 19:13:40 -0400
Subject: [PATCH 3/4] Moves quote fetching to async thunk

---
 .../BridgeTransactionButton.tsx               |   3 +-
 .../synapse-interface/constants/bridge.ts     |  18 +-
 .../pages/state-managed-bridge/index.tsx      | 206 +++---------------
 .../slices/bridge/reducer.ts                  |   3 +-
 .../slices/bridgeQuote/reducer.ts             |  30 ++-
 .../slices/bridgeQuote/thunks.ts              | 185 ++++++++++++++++
 .../synapse-interface/utils/types/index.tsx   |   1 +
 7 files changed, 244 insertions(+), 202 deletions(-)
 create mode 100644 packages/synapse-interface/slices/bridgeQuote/thunks.ts

diff --git a/packages/synapse-interface/components/StateManagedBridge/BridgeTransactionButton.tsx b/packages/synapse-interface/components/StateManagedBridge/BridgeTransactionButton.tsx
index 6e63de8ab5..2b070970bd 100644
--- a/packages/synapse-interface/components/StateManagedBridge/BridgeTransactionButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/BridgeTransactionButton.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 import { TransactionButton } from '@/components/buttons/TransactionButton'
-import { EMPTY_BRIDGE_QUOTE, EMPTY_BRIDGE_QUOTE_ZERO } from '@/constants/bridge'
+import { EMPTY_BRIDGE_QUOTE } from '@/constants/bridge'
 import { useAccount, useAccountEffect, useSwitchChain } from 'wagmi'
 import { useEffect, useState } from 'react'
 import { isAddress } from 'viem'
@@ -90,7 +90,6 @@ export const BridgeTransactionButton = ({
   const isButtonDisabled =
     isLoading ||
     isWalletPending ||
-    bridgeQuote === EMPTY_BRIDGE_QUOTE_ZERO ||
     bridgeQuote === EMPTY_BRIDGE_QUOTE ||
     (destinationAddress && !isAddress(destinationAddress)) ||
     (isConnected && !sufficientBalance) ||
diff --git a/packages/synapse-interface/constants/bridge.ts b/packages/synapse-interface/constants/bridge.ts
index 40708c1f1a..5c40ff4c88 100644
--- a/packages/synapse-interface/constants/bridge.ts
+++ b/packages/synapse-interface/constants/bridge.ts
@@ -19,25 +19,9 @@ export const EMPTY_BRIDGE_QUOTE = {
   timestamp: null,
   originChainId: null,
   destChainId: null,
+  requestId: null,
 }
 
-export const EMPTY_BRIDGE_QUOTE_ZERO = {
-  outputAmount: 0n,
-  outputAmountString: '0',
-  routerAddress: '',
-  allowance: 0n,
-  exchangeRate: 0n,
-  feeAmount: 0n,
-  delta: 0n,
-  originQuery: null,
-  destQuery: null,
-  estimatedTime: null,
-  bridgeModuleName: null,
-  gasDropAmount: 0n,
-  timestamp: null,
-  originChainId: null,
-  destChainId: null,
-}
 /**
  * ETH Only Bridge Config used to calculate swap fees
  *
diff --git a/packages/synapse-interface/pages/state-managed-bridge/index.tsx b/packages/synapse-interface/pages/state-managed-bridge/index.tsx
index de337c73ee..488c4cb498 100644
--- a/packages/synapse-interface/pages/state-managed-bridge/index.tsx
+++ b/packages/synapse-interface/pages/state-managed-bridge/index.tsx
@@ -25,8 +25,7 @@ import Button from '@/components/ui/tailwind/Button'
 import { SettingsToggle } from '@/components/StateManagedBridge/SettingsToggle'
 import { BridgeCard } from '@/components/ui/BridgeCard'
 import { ConfirmDestinationAddressWarning } from '@/components/StateManagedBridge/BridgeWarnings'
-import { EMPTY_BRIDGE_QUOTE_ZERO } from '@/constants/bridge'
-import { AcceptedChainId, CHAINS_BY_ID } from '@/constants/chains'
+import { CHAINS_BY_ID } from '@/constants/chains'
 import { segmentAnalyticsEvent } from '@/contexts/SegmentAnalyticsProvider'
 import { useBridgeState } from '@/slices/bridge/hooks'
 import {
@@ -44,9 +43,6 @@ import {
   setShowSettingsSlideOver,
 } from '@/slices/bridgeDisplaySlice'
 import { useSynapseContext } from '@/utils/providers/SynapseProvider'
-import { getErc20TokenAllowance } from '@/actions/getErc20TokenAllowance'
-import { formatBigIntToString } from '@/utils/bigint/format'
-import { calculateExchangeRate } from '@/utils/calculateExchangeRate'
 import { Token } from '@/utils/types'
 import { txErrorHandler } from '@/utils/txErrorHandler'
 import { approveToken } from '@/utils/approveToken'
@@ -61,15 +57,14 @@ import { useAppDispatch } from '@/store/hooks'
 import { RootState } from '@/store/store'
 import { getTimeMinutesFromNow } from '@/utils/time'
 import { isTransactionReceiptError } from '@/utils/isTransactionReceiptError'
-import { isTransactionUserRejectedError } from '@/utils/isTransactionUserRejectedError'
 import { useMaintenance } from '@/components/Maintenance/Maintenance'
-import { getBridgeModuleNames } from '@/utils/getBridgeModuleNames'
 import { wagmiConfig } from '@/wagmiConfig'
 import { useStaleQuoteUpdater } from '@/utils/hooks/useStaleQuoteUpdater'
 import { screenAddress } from '@/utils/screenAddress'
 import { useWalletState } from '@/slices/wallet/hooks'
 import { useBridgeQuoteState } from '@/slices/bridgeQuote/hooks'
-import { setBridgeQuote, setIsLoading } from '@/slices/bridgeQuote/reducer'
+import { resetBridgeQuote, setIsLoading } from '@/slices/bridgeQuote/reducer'
+import { fetchBridgeQuote } from '@/slices/bridgeQuote/thunks'
 
 const StateManagedBridge = () => {
   const { address } = useAccount()
@@ -127,7 +122,7 @@ const StateManagedBridge = () => {
       console.log('trying to set bridge quote')
       getAndSetBridgeQuote()
     } else {
-      dispatch(setBridgeQuote(EMPTY_BRIDGE_QUOTE_ZERO))
+      dispatch(resetBridgeQuote())
       dispatch(setIsLoading(false))
     }
   }, [fromChainId, toChainId, fromToken, toToken, debouncedFromValue])
@@ -156,176 +151,39 @@ const StateManagedBridge = () => {
     // will have to handle deadlineMinutes here at later time, gets passed as optional last arg in .bridgeQuote()
 
     /* clear stored bridge quote before requesting new bridge quote */
-    dispatch(setBridgeQuote(EMPTY_BRIDGE_QUOTE_ZERO))
+    dispatch(resetBridgeQuote())
+    const currentTimestamp: number = getTimeMinutesFromNow(0)
 
     try {
-      dispatch(setIsLoading(true))
-      const currentTimestamp: number = getTimeMinutesFromNow(0)
-
-      const allQuotes = await synapseSDK.allBridgeQuotes(
-        fromChainId,
-        toChainId,
-        fromToken.addresses[fromChainId],
-        toToken.addresses[toChainId],
-        stringToBigInt(debouncedFromValue, fromToken?.decimals[fromChainId]),
-        {
-          originUserAddress: address,
-        }
-      )
-
-      const pausedBridgeModules = new Set(
-        pausedModulesList
-          .filter((module) =>
-            module.chainId ? module.chainId === fromChainId : true
-          )
-          .flatMap(getBridgeModuleNames)
-      )
-
-      const activeQuotes = allQuotes.filter(
-        (quote) => !pausedBridgeModules.has(quote.bridgeModuleName)
-      )
-
-      if (activeQuotes.length === 0) {
-        const msg = `No route found for bridging ${debouncedFromValue} ${fromToken?.symbol} on ${CHAINS_BY_ID[fromChainId]?.name} to ${toToken?.symbol} on ${CHAINS_BY_ID[toChainId]?.name}`
-        throw new Error(msg)
-      }
-
-      const rfqQuote = activeQuotes.find(
-        (quote) => quote.bridgeModuleName === 'SynapseRFQ'
-      )
-
-      const nonRfqQuote = activeQuotes.find(
-        (quote) => quote.bridgeModuleName !== 'SynapseRFQ'
-      )
-
-      let quote
-
-      if (rfqQuote && nonRfqQuote) {
-        const rfqMaxAmountOut = BigInt(rfqQuote.maxAmountOut.toString())
-        const nonRfqMaxAmountOut = BigInt(nonRfqQuote.maxAmountOut.toString())
-
-        const allowedPercentileDifference = 30n
-        const maxDifference =
-          (nonRfqMaxAmountOut * allowedPercentileDifference) / 100n
-
-        if (rfqMaxAmountOut > nonRfqMaxAmountOut - maxDifference) {
-          quote = rfqQuote
-        } else {
-          quote = nonRfqQuote
-
-          segmentAnalyticsEvent(`[Bridge] use non-RFQ quote over RFQ`, {
-            bridgeModuleName: nonRfqQuote.bridgeModuleName,
-            originChainId: fromChainId,
-            originToken: fromToken.symbol,
-            originTokenAddress: fromToken.addresses[fromChainId],
-            destinationChainId: toChainId,
-            destinationToken: toToken.symbol,
-            destinationTokenAddress: toToken.addresses[toChainId],
-            rfqQuoteAmountOut: rfqQuote.maxAmountOut.toString(),
-            nonRfqMaxAmountOut: nonRfqQuote.maxAmountOut.toString(),
-          })
-        }
-      } else {
-        quote = rfqQuote ?? nonRfqQuote
-      }
-
-      const {
-        feeAmount,
-        routerAddress,
-        maxAmountOut,
-        originQuery,
-        destQuery,
-        estimatedTime,
-        bridgeModuleName,
-        gasDropAmount,
-        originChainId,
-        destChainId,
-      } = quote
-
-      if (!(originQuery && maxAmountOut && destQuery && feeAmount)) {
-        dispatch(setBridgeQuote(EMPTY_BRIDGE_QUOTE_ZERO))
-        dispatch(setIsLoading(false))
-        return
-      }
-
-      const toValueBigInt = BigInt(maxAmountOut.toString()) ?? 0n
-
-      // Bridge Lifecycle: originToken -> bridgeToken -> destToken
-      // debouncedFromValue is in originToken decimals
-      // originQuery.minAmountOut and feeAmount is in bridgeToken decimals
-      // Adjust feeAmount to be in originToken decimals
-      const adjustedFeeAmount =
-        (BigInt(feeAmount) *
-          stringToBigInt(
-            `${debouncedFromValue}`,
-            fromToken?.decimals[fromChainId]
-          )) /
-        BigInt(originQuery.minAmountOut)
-
-      const isUnsupported = AcceptedChainId[fromChainId] ? false : true
-
-      const allowance =
-        fromToken?.addresses[fromChainId] === zeroAddress ||
-        address === undefined ||
-        isUnsupported
-          ? 0n
-          : await getErc20TokenAllowance({
-              address,
-              chainId: fromChainId,
-              tokenAddress: fromToken?.addresses[fromChainId] as Address,
-              spender: routerAddress,
-            })
-
-      const {
-        originQuery: originQueryWithSlippage,
-        destQuery: destQueryWithSlippage,
-      } = synapseSDK.applyBridgeSlippage(
-        bridgeModuleName,
-        originQuery,
-        destQuery
-      )
-
       if (thisRequestId === currentSDKRequestID.current) {
-        dispatch(
-          setBridgeQuote({
-            outputAmount: toValueBigInt,
-            outputAmountString: commify(
-              formatBigIntToString(
-                toValueBigInt,
-                toToken.decimals[toChainId],
-                8
-              )
-            ),
-            routerAddress,
-            allowance,
-            exchangeRate: calculateExchangeRate(
-              stringToBigInt(
-                debouncedFromValue,
-                fromToken?.decimals[fromChainId]
-              ) - BigInt(adjustedFeeAmount),
-              fromToken?.decimals[fromChainId],
-              toValueBigInt,
-              toToken.decimals[toChainId]
-            ),
-            feeAmount,
-            delta: BigInt(maxAmountOut.toString()),
-            originQuery: originQueryWithSlippage,
-            destQuery: destQueryWithSlippage,
-            estimatedTime: estimatedTime,
-            bridgeModuleName: bridgeModuleName,
-            gasDropAmount: BigInt(gasDropAmount.toString()),
-            timestamp: currentTimestamp,
-            originChainId,
-            destChainId,
+        const result = await dispatch(
+          fetchBridgeQuote({
+            synapseSDK,
+            fromChainId,
+            toChainId,
+            fromToken,
+            toToken,
+            debouncedFromValue,
+            requestId: thisRequestId,
+            currentTimestamp,
+            address,
+            pausedModulesList,
           })
         )
 
         toast.dismiss(quoteToastRef.current.id)
 
-        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)
+        if (fetchBridgeQuote.fulfilled.match(result)) {
+          const message = `Route found for bridging ${debouncedFromValue} ${fromToken?.symbol} on ${CHAINS_BY_ID[fromChainId]?.name} to ${toToken.symbol} on ${CHAINS_BY_ID[toChainId]?.name}`
 
-        quoteToastRef.current.id = toast(message, { duration: 3000 })
+          quoteToastRef.current.id = toast(message, { duration: 3000 })
+        }
+
+        if (fetchBridgeQuote.rejected.match(result)) {
+          quoteToastRef.current.id = toast(result.payload as string, {
+            duration: 3000,
+          })
+        }
       }
     } catch (err) {
       console.log(err)
@@ -347,14 +205,10 @@ const StateManagedBridge = () => {
         console.log(message)
 
         quoteToastRef.current.id = toast(message, { duration: 3000 })
-        dispatch(setBridgeQuote(EMPTY_BRIDGE_QUOTE_ZERO))
+        dispatch(resetBridgeQuote())
 
         return
       }
-    } finally {
-      if (thisRequestId === currentSDKRequestID.current) {
-        dispatch(setIsLoading(false))
-      }
     }
   }
 
@@ -509,7 +363,7 @@ const StateManagedBridge = () => {
           isSubmitted: false,
         })
       )
-      dispatch(setBridgeQuote(EMPTY_BRIDGE_QUOTE_ZERO))
+      dispatch(resetBridgeQuote())
       dispatch(setDestinationAddress(null))
       dispatch(setShowDestinationAddress(false))
       dispatch(updateFromValue(''))
diff --git a/packages/synapse-interface/slices/bridge/reducer.ts b/packages/synapse-interface/slices/bridge/reducer.ts
index 6a27ef3c64..602d6d873e 100644
--- a/packages/synapse-interface/slices/bridge/reducer.ts
+++ b/packages/synapse-interface/slices/bridge/reducer.ts
@@ -1,8 +1,7 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { type Address } from 'viem'
 
-import { EMPTY_BRIDGE_QUOTE } from '@/constants/bridge'
-import { type BridgeQuote, type Token } from '@/utils/types'
+import { type Token } from '@/utils/types'
 import {
   getRoutePossibilities,
   getSymbol,
diff --git a/packages/synapse-interface/slices/bridgeQuote/reducer.ts b/packages/synapse-interface/slices/bridgeQuote/reducer.ts
index abfb32935f..5c7575f91a 100644
--- a/packages/synapse-interface/slices/bridgeQuote/reducer.ts
+++ b/packages/synapse-interface/slices/bridgeQuote/reducer.ts
@@ -2,15 +2,18 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 
 import { EMPTY_BRIDGE_QUOTE } from '@/constants/bridge'
 import { type BridgeQuote } from '@/utils/types'
+import { fetchBridgeQuote } from './thunks'
 
 export interface BridgeQuoteState {
   bridgeQuote: BridgeQuote
   isLoading: boolean
+  error: any
 }
 
 export const initialState: BridgeQuoteState = {
   bridgeQuote: EMPTY_BRIDGE_QUOTE,
   isLoading: false,
+  error: null,
 }
 
 export const bridgeQuoteSlice = createSlice({
@@ -20,16 +23,33 @@ export const bridgeQuoteSlice = createSlice({
     setIsLoading: (state, action: PayloadAction<boolean>) => {
       state.isLoading = action.payload
     },
-    setBridgeQuote: (state, action: PayloadAction<BridgeQuote>) => {
-      state.bridgeQuote = action.payload
-    },
     resetBridgeQuote: (state) => {
       state.bridgeQuote = initialState.bridgeQuote
     },
   },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchBridgeQuote.pending, (state) => {
+        // state.status = FetchState.LOADING
+        state.isLoading = true
+      })
+      .addCase(
+        fetchBridgeQuote.fulfilled,
+        (state, action: PayloadAction<BridgeQuote>) => {
+          state.bridgeQuote = action.payload
+          // state.status = FetchState.VALID
+          state.isLoading = false
+        }
+      )
+      .addCase(fetchBridgeQuote.rejected, (state, action) => {
+        // state.error = action.payload
+        state.bridgeQuote = EMPTY_BRIDGE_QUOTE
+        // state.status = FetchState.INVALID
+        state.isLoading = false
+      })
+  },
 })
 
-export const { setBridgeQuote, resetBridgeQuote, setIsLoading } =
-  bridgeQuoteSlice.actions
+export const { resetBridgeQuote, setIsLoading } = bridgeQuoteSlice.actions
 
 export default bridgeQuoteSlice.reducer
diff --git a/packages/synapse-interface/slices/bridgeQuote/thunks.ts b/packages/synapse-interface/slices/bridgeQuote/thunks.ts
new file mode 100644
index 0000000000..d984a15dee
--- /dev/null
+++ b/packages/synapse-interface/slices/bridgeQuote/thunks.ts
@@ -0,0 +1,185 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import { commify } from '@ethersproject/units'
+import { Address, zeroAddress } from 'viem'
+
+import { getErc20TokenAllowance } from '@/actions/getErc20TokenAllowance'
+import { AcceptedChainId, CHAINS_BY_ID } from '@/constants/chains'
+import { segmentAnalyticsEvent } from '@/contexts/SegmentAnalyticsProvider'
+import { stringToBigInt, formatBigIntToString } from '@/utils/bigint/format'
+import { calculateExchangeRate } from '@/utils/calculateExchangeRate'
+import { getBridgeModuleNames } from '@/utils/getBridgeModuleNames'
+import { Token } from '@/utils/types'
+
+export const fetchBridgeQuote = createAsyncThunk(
+  'bridgeQuote/fetchBridgeQuote',
+  async (
+    {
+      synapseSDK,
+      fromChainId,
+      toChainId,
+      fromToken,
+      toToken,
+      debouncedFromValue,
+      requestId,
+      currentTimestamp,
+      address,
+      pausedModulesList,
+    }: {
+      synapseSDK: any
+      fromChainId: number
+      toChainId: number
+      fromToken: Token
+      toToken: Token
+      debouncedFromValue: string
+      requestId: number
+      currentTimestamp: number
+      address: Address
+      pausedModulesList: any
+    },
+    { rejectWithValue }
+  ) => {
+    const allQuotes = await synapseSDK.allBridgeQuotes(
+      fromChainId,
+      toChainId,
+      fromToken.addresses[fromChainId],
+      toToken.addresses[toChainId],
+      stringToBigInt(debouncedFromValue, fromToken?.decimals[fromChainId]),
+      {
+        originUserAddress: address,
+      }
+    )
+
+    const pausedBridgeModules = new Set(
+      pausedModulesList
+        .filter((module) =>
+          module.chainId ? module.chainId === fromChainId : true
+        )
+        .flatMap(getBridgeModuleNames)
+    )
+    const activeQuotes = allQuotes.filter(
+      (quote) => !pausedBridgeModules.has(quote.bridgeModuleName)
+    )
+
+    if (activeQuotes.length === 0) {
+      const msg = `No route found for bridging ${debouncedFromValue} ${fromToken?.symbol} on ${CHAINS_BY_ID[fromChainId]?.name} to ${toToken?.symbol} on ${CHAINS_BY_ID[toChainId]?.name}`
+      return rejectWithValue(msg)
+    }
+
+    const rfqQuote = activeQuotes.find(
+      (q) => q.bridgeModuleName === 'SynapseRFQ'
+    )
+
+    const nonRfqQuote = activeQuotes.find(
+      (quote) => quote.bridgeModuleName !== 'SynapseRFQ'
+    )
+
+    let quote
+
+    if (rfqQuote && nonRfqQuote) {
+      const rfqMaxAmountOut = BigInt(rfqQuote.maxAmountOut.toString())
+      const nonRfqMaxAmountOut = BigInt(nonRfqQuote.maxAmountOut.toString())
+
+      const allowedPercentileDifference = 30n
+      const maxDifference =
+        (nonRfqMaxAmountOut * allowedPercentileDifference) / 100n
+
+      if (rfqMaxAmountOut > nonRfqMaxAmountOut - maxDifference) {
+        quote = rfqQuote
+      } else {
+        quote = nonRfqQuote
+
+        segmentAnalyticsEvent(`[Bridge] use non-RFQ quote over RFQ`, {
+          bridgeModuleName: nonRfqQuote.bridgeModuleName,
+          originChainId: fromChainId,
+          originToken: fromToken.symbol,
+          originTokenAddress: fromToken.addresses[fromChainId],
+          destinationChainId: toChainId,
+          destinationToken: toToken.symbol,
+          destinationTokenAddress: toToken.addresses[toChainId],
+          rfqQuoteAmountOut: rfqQuote.maxAmountOut.toString(),
+          nonRfqMaxAmountOut: nonRfqQuote.maxAmountOut.toString(),
+        })
+      }
+    } else {
+      quote = rfqQuote ?? nonRfqQuote
+    }
+
+    const {
+      feeAmount,
+      routerAddress,
+      maxAmountOut,
+      originQuery,
+      destQuery,
+      estimatedTime,
+      bridgeModuleName,
+      gasDropAmount,
+      originChainId,
+      destChainId,
+    } = quote
+
+    if (!(originQuery && maxAmountOut && destQuery && feeAmount)) {
+      const msg = `No route found for bridging ${debouncedFromValue} ${fromToken?.symbol} on ${CHAINS_BY_ID[fromChainId]?.name} to ${toToken?.symbol} on ${CHAINS_BY_ID[toChainId]?.name}`
+      return rejectWithValue(msg)
+    }
+
+    const toValueBigInt = BigInt(maxAmountOut.toString()) ?? 0n
+
+    // Bridge Lifecycle: originToken -> bridgeToken -> destToken
+    // debouncedFromValue is in originToken decimals
+    // originQuery.minAmountOut and feeAmount is in bridgeToken decimals
+    // Adjust feeAmount to be in originToken decimals
+    const adjustedFeeAmount =
+      (BigInt(feeAmount) *
+        stringToBigInt(
+          `${debouncedFromValue}`,
+          fromToken?.decimals[fromChainId]
+        )) /
+      BigInt(originQuery.minAmountOut)
+
+    const isUnsupported = AcceptedChainId[fromChainId] ? false : true
+
+    const allowance =
+      fromToken?.addresses[fromChainId] === zeroAddress ||
+      address === undefined ||
+      isUnsupported
+        ? 0n
+        : await getErc20TokenAllowance({
+            address,
+            chainId: fromChainId,
+            tokenAddress: fromToken?.addresses[fromChainId] as Address,
+            spender: routerAddress,
+          })
+
+    const {
+      originQuery: originQueryWithSlippage,
+      destQuery: destQueryWithSlippage,
+    } = synapseSDK.applyBridgeSlippage(bridgeModuleName, originQuery, destQuery)
+
+    return {
+      outputAmount: toValueBigInt,
+      outputAmountString: commify(
+        formatBigIntToString(toValueBigInt, toToken.decimals[toChainId], 8)
+      ),
+      routerAddress,
+      allowance,
+      exchangeRate: calculateExchangeRate(
+        stringToBigInt(debouncedFromValue, fromToken?.decimals[fromChainId]) -
+          BigInt(adjustedFeeAmount),
+        fromToken?.decimals[fromChainId],
+        toValueBigInt,
+        toToken.decimals[toChainId]
+      ),
+      feeAmount,
+      delta: BigInt(maxAmountOut.toString()),
+      originQuery: originQueryWithSlippage,
+      destQuery: destQueryWithSlippage,
+      estimatedTime,
+      bridgeModuleName,
+      gasDropAmount: BigInt(gasDropAmount.toString()),
+      timestamp: currentTimestamp,
+      originChainId,
+      destChainId,
+      requestId,
+    }
+  }
+)
diff --git a/packages/synapse-interface/utils/types/index.tsx b/packages/synapse-interface/utils/types/index.tsx
index e44e870f35..8454ba91e0 100644
--- a/packages/synapse-interface/utils/types/index.tsx
+++ b/packages/synapse-interface/utils/types/index.tsx
@@ -85,6 +85,7 @@ export type BridgeQuote = {
   timestamp: number
   originChainId: number
   destChainId: number
+  requestId: number
 }
 
 interface TokensByChain {

From d23cb0aecc862324a01c56580a9aeefa65cf536d Mon Sep 17 00:00:00 2001
From: abtestingalpha <abtestingalpha@gmail.com>
Date: Tue, 13 Aug 2024 19:38:25 -0400
Subject: [PATCH 4/4] Lints

---
 .../pages/state-managed-bridge/index.tsx                  | 4 +---
 packages/synapse-interface/slices/bridgeQuote/reducer.ts  | 8 +-------
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages/synapse-interface/pages/state-managed-bridge/index.tsx b/packages/synapse-interface/pages/state-managed-bridge/index.tsx
index 488c4cb498..f2b04e8d5a 100644
--- a/packages/synapse-interface/pages/state-managed-bridge/index.tsx
+++ b/packages/synapse-interface/pages/state-managed-bridge/index.tsx
@@ -1,6 +1,5 @@
 import toast from 'react-hot-toast'
 import { useEffect, useRef, useState } from 'react'
-import { commify } from '@ethersproject/units'
 import { Address, zeroAddress, isAddress } from 'viem'
 import { polygon } from 'viem/chains'
 import { useAccount } from 'wagmi'
@@ -63,7 +62,7 @@ import { useStaleQuoteUpdater } from '@/utils/hooks/useStaleQuoteUpdater'
 import { screenAddress } from '@/utils/screenAddress'
 import { useWalletState } from '@/slices/wallet/hooks'
 import { useBridgeQuoteState } from '@/slices/bridgeQuote/hooks'
-import { resetBridgeQuote, setIsLoading } from '@/slices/bridgeQuote/reducer'
+import { resetBridgeQuote } from '@/slices/bridgeQuote/reducer'
 import { fetchBridgeQuote } from '@/slices/bridgeQuote/thunks'
 
 const StateManagedBridge = () => {
@@ -123,7 +122,6 @@ const StateManagedBridge = () => {
       getAndSetBridgeQuote()
     } else {
       dispatch(resetBridgeQuote())
-      dispatch(setIsLoading(false))
     }
   }, [fromChainId, toChainId, fromToken, toToken, debouncedFromValue])
 
diff --git a/packages/synapse-interface/slices/bridgeQuote/reducer.ts b/packages/synapse-interface/slices/bridgeQuote/reducer.ts
index 5c7575f91a..8407876035 100644
--- a/packages/synapse-interface/slices/bridgeQuote/reducer.ts
+++ b/packages/synapse-interface/slices/bridgeQuote/reducer.ts
@@ -7,13 +7,11 @@ import { fetchBridgeQuote } from './thunks'
 export interface BridgeQuoteState {
   bridgeQuote: BridgeQuote
   isLoading: boolean
-  error: any
 }
 
 export const initialState: BridgeQuoteState = {
   bridgeQuote: EMPTY_BRIDGE_QUOTE,
   isLoading: false,
-  error: null,
 }
 
 export const bridgeQuoteSlice = createSlice({
@@ -30,21 +28,17 @@ export const bridgeQuoteSlice = createSlice({
   extraReducers: (builder) => {
     builder
       .addCase(fetchBridgeQuote.pending, (state) => {
-        // state.status = FetchState.LOADING
         state.isLoading = true
       })
       .addCase(
         fetchBridgeQuote.fulfilled,
         (state, action: PayloadAction<BridgeQuote>) => {
           state.bridgeQuote = action.payload
-          // state.status = FetchState.VALID
           state.isLoading = false
         }
       )
-      .addCase(fetchBridgeQuote.rejected, (state, action) => {
-        // state.error = action.payload
+      .addCase(fetchBridgeQuote.rejected, (state) => {
         state.bridgeQuote = EMPTY_BRIDGE_QUOTE
-        // state.status = FetchState.INVALID
         state.isLoading = false
       })
   },