Merge 9db21b1 into edaffaf

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,13 +56,14 @@ const DestinationAddress = () => {
 }
 
 const Slippage = () => {
+  const { debouncedFromValue } = useBridgeState()
+
   const {
-    fromValue,
     bridgeQuote: { exchangeRate },
-  } = useBridgeState()
+  } = useBridgeQuoteState()
 
   const { formattedPercentSlippage, safeFromAmount, underFee, textColor } =
-    useExchangeRateInfo(fromValue, exchangeRate)
+    useExchangeRateInfo(debouncedFromValue, exchangeRate)
   return (
     <div className="flex justify-between">
       <span className="text-zinc-500 dark:text-zinc-400">Slippage</span>
@@ -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)) {
@@ -166,9 +169,9 @@ const GasDropLabel = () => {
   )
 }
 
-const useExchangeRateInfo = (fromValue, exchangeRate) => {
+const useExchangeRateInfo = (value, exchangeRate) => {
   const safeExchangeRate = typeof exchangeRate === 'bigint' ? exchangeRate : 0n
-  const safeFromAmount = fromValue ?? '0'
+  const safeFromAmount = value ?? '0'
 
   const formattedExchangeRate = formatBigIntToString(safeExchangeRate, 18, 4)
   const numExchangeRate = Number(formattedExchangeRate)

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'
@@ -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,
@@ -39,14 +40,14 @@ export const BridgeTransactionButton = ({
   const {
     destinationAddress,
     fromToken,
-    fromValue,
+    debouncedFromValue,
     toToken,
     fromChainId,
     toChainId,
-    isLoading,
-    bridgeQuote,
   } = useBridgeState()
 
+  const { isLoading, bridgeQuote } = useBridgeQuoteState()
+
   const { isWalletPending } = useWalletState()
   const { showDestinationWarning, isDestinationWarningAccepted } =
     useBridgeDisplayState()
@@ -60,24 +61,26 @@ export const BridgeTransactionButton = ({
   const sufficientBalance = useMemo(() => {
     if (!fromChainId || !fromToken || !toChainId || !toToken) return false
     return (
-      stringToBigInt(fromValue, fromToken?.decimals[fromChainId]) <=
+      stringToBigInt(debouncedFromValue, fromToken?.decimals[fromChainId]) <=
       balanceForToken
     )
-  }, [balanceForToken, fromValue, fromChainId, toChainId, toToken])
+  }, [balanceForToken, debouncedFromValue, fromChainId, toChainId, toToken])
 
   const fromTokenDecimals: number | undefined =
     fromToken && fromToken?.decimals[fromChainId]
 
-  const fromValueBigInt = useMemo(() => {
-    return fromTokenDecimals ? stringToBigInt(fromValue, fromTokenDecimals) : 0
-  }, [fromValue, fromTokenDecimals])
+  const debouncedFromValueBigInt = useMemo(() => {
+    return fromTokenDecimals
+      ? stringToBigInt(debouncedFromValue, fromTokenDecimals)
+      : 0
+  }, [debouncedFromValue, fromTokenDecimals])
 
   const bridgeQuoteAmountGreaterThanInputForRfq = useMemo(() => {
     return (
       bridgeQuote.bridgeModuleName === 'SynapseRFQ' &&
-      bridgeQuote.outputAmount > fromValueBigInt
+      bridgeQuote.outputAmount > debouncedFromValueBigInt
     )
-  }, [bridgeQuote.outputAmount, fromValueBigInt])
+  }, [bridgeQuote.outputAmount, debouncedFromValueBigInt])
 
   const chainSelectionsMatchBridgeQuote = useMemo(() => {
     return (
@@ -89,7 +92,6 @@ export const BridgeTransactionButton = ({
   const isButtonDisabled =
     isLoading ||
     isWalletPending ||
-    bridgeQuote === EMPTY_BRIDGE_QUOTE_ZERO ||
     bridgeQuote === EMPTY_BRIDGE_QUOTE ||
     (destinationAddress && !isAddress(destinationAddress)) ||
     (isConnected && !sufficientBalance) ||
@@ -127,7 +129,7 @@ export const BridgeTransactionButton = ({
   } else if (
     !isLoading &&
     bridgeQuote?.feeAmount === 0n &&
-    fromValueBigInt > 0
+    debouncedFromValueBigInt > 0
   ) {
     buttonProperties = {
       label: `Amount must be greater than fee`,
@@ -136,7 +138,7 @@ export const BridgeTransactionButton = ({
   } else if (
     !isLoading &&
     !chainSelectionsMatchBridgeQuote &&
-    fromValueBigInt > 0
+    debouncedFromValueBigInt > 0
   ) {
     buttonProperties = {
       label: 'Please reset chain selection',
@@ -145,13 +147,13 @@ export const BridgeTransactionButton = ({
   } else if (
     !isLoading &&
     bridgeQuoteAmountGreaterThanInputForRfq &&
-    fromValueBigInt > 0
+    debouncedFromValueBigInt > 0
   ) {
     buttonProperties = {
       label: 'Invalid bridge quote',
       onClick: null,
     }
-  } else if (!isConnected && fromValueBigInt > 0) {
+  } else if (!isConnected && debouncedFromValueBigInt > 0) {
     buttonProperties = {
       label: `Connect Wallet to Bridge`,
       onClick: openConnectModal,
@@ -171,13 +173,17 @@ export const BridgeTransactionButton = ({
       onClick: () => dispatch(setIsDestinationWarningAccepted(true)),
       className: '!from-bgLight !to-bgLight',
     }
-  } else if (chain?.id != fromChainId && fromValueBigInt > 0) {
+  } else if (chain?.id != fromChainId && debouncedFromValueBigInt > 0) {
     buttonProperties = {
       label: `Switch to ${chains.find((c) => c.id === fromChainId)?.name}`,
       onClick: () => switchChain({ chainId: fromChainId }),
       pendingLabel: 'Switching chains',
     }
-  } else if (!isApproved && fromValueBigInt > 0 && bridgeQuote?.destQuery) {
+  } else if (
+    !isApproved &&
+    debouncedFromValueBigInt > 0 &&
+    bridgeQuote?.destQuery
+  ) {
     buttonProperties = {
       onClick: approveTxn,
       label: `Approve ${fromToken?.symbol}`,

packages/synapse-interface/components/StateManagedBridge/FromChainSelector.tsx

@@ -0,0 +1,24 @@
+import { setFromChainId } from '@/slices/bridge/reducer'
+import { ChainSelector } from '@/components/ui/ChainSelector'
+import { CHAINS_BY_ID } from '@/constants/chains'
+import { useFromChainListArray } from './hooks/useFromChainListArray'
+import { useBridgeState } from '@/slices/bridge/hooks'
+import { useWalletState } from '@/slices/wallet/hooks'
+
+export const FromChainSelector = () => {
+  const { fromChainId } = useBridgeState()
+  const { isWalletPending } = useWalletState()
+
+  return (
+    <ChainSelector
+      dataTestId="bridge-origin-chain"
+      selectedItem={CHAINS_BY_ID[fromChainId]}
+      isOrigin={true}
+      label="From"
+      itemListFunction={useFromChainListArray}
+      setFunction={setFromChainId}
+      action="Bridge"
+      disabled={isWalletPending}
+    />
+  )
+}

packages/synapse-interface/components/StateManagedBridge/FromTokenSelector.tsx

@@ -0,0 +1,23 @@
+import { setFromToken } from '@/slices/bridge/reducer'
+import { TokenSelector } from '@/components/ui/TokenSelector'
+import { useBridgeState } from '@/slices/bridge/hooks'
+import { useFromTokenListArray } from './hooks/useFromTokenListArray'
+import { useWalletState } from '@/slices/wallet/hooks'
+
+export const FromTokenSelector = () => {
+  const { fromToken } = useBridgeState()
+  const { isWalletPending } = useWalletState()
+
+  return (
+    <TokenSelector
+      dataTestId="bridge-origin-token"
+      selectedItem={fromToken}
+      isOrigin={true}
+      placeholder="Out"
+      itemListFunction={useFromTokenListArray}
+      setFunction={setFromToken}
+      action="Bridge"
+      disabled={isWalletPending}
+    />
+  )
+}