-
- )
-}
-
-const PossibleChain = ({
- chainId,
- onChangeChain,
- isOrigin,
-}: {
- chainId: number
- onChangeChain: (chainId: number, flip: boolean, type: 'from' | 'to') => void
- isOrigin: boolean
-}) => {
- const chain = CHAINS_BY_ID[chainId]
- return chain ? (
-
- ) : null
-}
-
-const SelectedChain = ({ chainId }: { chainId: number }) => {
- const chain = CHAINS_BY_ID[chainId]
- return chain ? (
-
- {title}
-
-
- {orderedChains.map((id) =>
- Number(id) === chainId ? (
-
-
-
- ) : null
-}
-
-const chainOrderBySwapSide = (
- connectedChain: number,
- isOrigin: boolean,
- chainId: number,
- chains: string[] | undefined
-) => {
- let orderedChains
- if (isOrigin) {
- orderedChains = ORDERED_CHAINS_BY_ID.filter((e) => e !== String(chainId))
- orderedChains = orderedChains.slice(0, 5)
- orderedChains.unshift(chainId)
- return orderedChains
- } else {
- return getOrderedChains(connectedChain, chainId, chains)
- }
-}
diff --git a/packages/synapse-interface/components/StateManagedBridge/ConnectionIndicators.tsx b/packages/synapse-interface/components/ConnectionIndicators.tsx
similarity index 100%
rename from packages/synapse-interface/components/StateManagedBridge/ConnectionIndicators.tsx
rename to packages/synapse-interface/components/ConnectionIndicators.tsx
diff --git a/packages/synapse-interface/components/Popup.tsx b/packages/synapse-interface/components/Popup.tsx
deleted file mode 100644
index bef8575530..0000000000
--- a/packages/synapse-interface/components/Popup.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useState, useEffect } from 'react'
-import { IMPAIRED_CHAINS } from '@/constants/impairedChains'
-const Popup = ({ chainId }) => {
- const [active, setActive] = useState(false)
-
- useEffect(() => {
- if (chainId && IMPAIRED_CHAINS[chainId]) {
- setActive(true)
- } else {
- setActive(false)
- }
- }, [chainId])
-
- if (!active) return null
- return (
-
-
-
- {chain.name === 'Boba Network' ? 'Boba' : chain.name}
-
-
-
- )
-}
-
-export default Popup
diff --git a/packages/synapse-interface/components/StateManagedBridge/FromChainSelector.tsx b/packages/synapse-interface/components/StateManagedBridge/FromChainSelector.tsx
index a55118bf7b..61a377a876 100644
--- a/packages/synapse-interface/components/StateManagedBridge/FromChainSelector.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/FromChainSelector.tsx
@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux'
import { setShowFromChainListOverlay } from '@/slices/bridgeDisplaySlice'
import { useBridgeState } from '@/slices/bridge/hooks'
import { CHAINS_BY_ID } from '@/constants/chains'
-import { DropDownArrowSvg } from './components/DropDownArrowSvg'
+import { DropDownArrowSvg } from '../icons/DropDownArrowSvg'
import {
getNetworkButtonBgClassNameActive,
getNetworkButtonBorderActive,
diff --git a/packages/synapse-interface/components/StateManagedBridge/FromTokenSelector.tsx b/packages/synapse-interface/components/StateManagedBridge/FromTokenSelector.tsx
index bed5ec2f94..20ce214938 100644
--- a/packages/synapse-interface/components/StateManagedBridge/FromTokenSelector.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/FromTokenSelector.tsx
@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux'
import { setShowFromTokenListOverlay } from '@/slices/bridgeDisplaySlice'
import { useBridgeState } from '@/slices/bridge/hooks'
-import { DropDownArrowSvg } from './components/DropDownArrowSvg'
+import { DropDownArrowSvg } from '../icons/DropDownArrowSvg'
import {
getBorderStyleForCoinHover,
getMenuItemHoverBgForCoin,
diff --git a/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx b/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx
index 3b31daced6..ae7f1294a6 100644
--- a/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx
@@ -10,7 +10,7 @@ import {
ConnectToNetworkButton,
ConnectWalletButton,
ConnectedIndicator,
-} from './ConnectionIndicators'
+} from '@/components/ConnectionIndicators'
import { FromChainSelector } from './FromChainSelector'
import { FromTokenSelector } from './FromTokenSelector'
import { useBridgeState } from '@/slices/bridge/hooks'
diff --git a/packages/synapse-interface/components/StateManagedBridge/ToChainSelector.tsx b/packages/synapse-interface/components/StateManagedBridge/ToChainSelector.tsx
index 0038eb3f3c..3934fe8d17 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToChainSelector.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToChainSelector.tsx
@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux'
import { setShowToChainListOverlay } from '@/slices/bridgeDisplaySlice'
import { useBridgeState } from '@/slices/bridge/hooks'
import { CHAINS_BY_ID } from '@/constants/chains'
-import { DropDownArrowSvg } from './components/DropDownArrowSvg'
+import { DropDownArrowSvg } from '../icons/DropDownArrowSvg'
import {
getNetworkButtonBgClassNameActive,
getNetworkButtonBorderActive,
diff --git a/packages/synapse-interface/components/StateManagedBridge/ToTokenSelector.tsx b/packages/synapse-interface/components/StateManagedBridge/ToTokenSelector.tsx
index 6d2159d908..47166d0b78 100644
--- a/packages/synapse-interface/components/StateManagedBridge/ToTokenSelector.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/ToTokenSelector.tsx
@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux'
import { setShowToTokenListOverlay } from '@/slices/bridgeDisplaySlice'
import { useBridgeState } from '@/slices/bridge/hooks'
-import { DropDownArrowSvg } from './components/DropDownArrowSvg'
+import { DropDownArrowSvg } from '../icons/DropDownArrowSvg'
import {
getBorderStyleForCoinHover,
getMenuItemHoverBgForCoin,
diff --git a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificNetworkButton.tsx b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificNetworkButton.tsx
index f12b7c8b4a..1852838824 100644
--- a/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificNetworkButton.tsx
+++ b/packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificNetworkButton.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
import { CHAINS_BY_ID } from '@constants/chains'
import Image from 'next/image'
import {
@@ -10,6 +10,11 @@ import {
getNetworkButtonBorderActive,
getMenuItemStyleForChain,
} from '@/styles/chains'
+import { usePortfolioState } from '@/slices/portfolio/hooks'
+import {
+ TokenWithBalanceAndAllowances,
+ sortTokensByBalanceDescending,
+} from '@/utils/actions/fetchPortfolioBalances'
export const SelectSpecificNetworkButton = ({
itemChainId,
@@ -50,7 +55,7 @@ export const SelectSpecificNetworkButton = ({
ref={ref}
tabIndex={active ? 1 : 0}
className={`
- flex items-center
+ flex items-center justify-between
transition-all duration-75
w-full
px-2 py-4
@@ -74,17 +79,105 @@ export const SelectSpecificNetworkButton = ({
function ButtonContent({ chainId }: { chainId: number }) {
const chain = CHAINS_BY_ID[chainId]
+ const { balancesAndAllowances } = usePortfolioState()
+
+ const balanceTokens =
+ balancesAndAllowances &&
+ balancesAndAllowances[chainId] &&
+ sortTokensByBalanceDescending(
+ balancesAndAllowances[chainId].filter((bt) => bt.balance > 0n)
+ )
return chain ? (
<>
-
-
-
- {IMPAIRED_CHAINS[chainId] && IMPAIRED_CHAINS[chainId].content()}
-
-
-
-
-
- (null)
+ const { swapChainId, swapFromToken, swapToToken, swapFromValue } =
+ useSwapState()
+ const [showValue, setShowValue] = useState('')
+
+ const [hasMounted, setHasMounted] = useState(false)
+
+ const { balancesAndAllowances } = usePortfolioState()
+
+ useEffect(() => {
+ setHasMounted(true)
+ }, [])
+
+ const { isConnected } = useAccount()
+ const { chain } = useNetwork()
+
+ const dispatch = useDispatch()
+
+ const tokenData = balancesAndAllowances[swapChainId]?.find(
+ (token) => token.tokenAddress === swapFromToken?.addresses[swapChainId]
+ )
+
+ const parsedBalance = tokenData?.parsedBalance
+
+ const balance = tokenData?.balance
+
+ useEffect(() => {
+ if (
+ swapFromToken &&
+ swapFromToken.decimals[swapChainId] &&
+ stringToBigInt(swapFromValue, swapFromToken.decimals[swapChainId]) !== 0n
+ ) {
+ setShowValue(swapFromValue)
+ }
+ }, [swapFromValue, swapChainId, swapFromToken])
+
+ const handleFromValueChange = (
+ event: React.ChangeEvent
+ ) => {
+ const swapFromValueString: string = cleanNumberInput(event.target.value)
+ try {
+ dispatch(updateSwapFromValue(swapFromValueString))
+ setShowValue(swapFromValueString)
+ } catch (error) {
+ console.error('Invalid value for conversion to BigInteger')
+ const inputValue = event.target.value
+ const regex = /^[0-9]*[.,]?[0-9]*$/
+
+ if (regex.test(inputValue) || inputValue === '') {
+ dispatch(updateSwapFromValue(''))
+ setShowValue(inputValue)
+ }
+ }
+ }
+
+ const onMaxBalance = useCallback(() => {
+ dispatch(
+ updateSwapFromValue(
+ formatBigIntToString(balance, swapFromToken.decimals[swapChainId])
+ )
+ )
+ }, [balance, swapChainId, swapFromToken])
+
+ const connectedStatus = useMemo(() => {
+ if (hasMounted && isConnected) {
+ if (swapChainId === chain.id) {
+ return (null)
+ const chain = CHAINS_BY_ID[itemChainId]
+
+ useEffect(() => {
+ if (active) {
+ ref?.current?.focus()
+ }
+ }, [active])
+
+ let bgClassName
+
+ if (isCurrentChain) {
+ bgClassName = `
+ ${getNetworkButtonBgClassName(chain.color)}
+ ${getNetworkButtonBorder(chain.color)}
+ bg-opacity-30
+ `
+ }
+
+ return (
+
+ )
+}
+
+function ButtonContent({ chainId }: { chainId: number }) {
+ const chain = CHAINS_BY_ID[chainId]
+
+ return chain ? (
+ <>
+ (null)
+ const isCurrentlySelected = selectedToken?.routeSymbol === token?.routeSymbol
+ const { swapChainId, swapFromToken, swapToToken } = useSwapState()
+
+ useEffect(() => {
+ if (active) {
+ ref?.current?.focus()
+ }
+ }, [active])
+
+ const chainId = swapChainId
+
+ let bgClassName
+
+ const classNameForMenuItemStyle = getMenuItemStyleForCoin(token?.color)
+
+ if (isCurrentlySelected) {
+ bgClassName = `${getMenuItemBgForCoin(
+ token?.color
+ )} ${getBorderStyleForCoin(token?.color)}`
+ } else {
+ bgClassName = getBorderStyleForCoinHover(token?.color)
+ }
+
+ return (
+
+ )
+}
+
+const ButtonContent = memo(
+ ({
+ token,
+ chainId,
+ isOrigin,
+ showAllChains,
+ }: {
+ token: Token
+ chainId: number
+ isOrigin: boolean
+ showAllChains: boolean
+ }) => {
+ const portfolioBalances = usePortfolioBalances()
+
+ const parsedBalance = portfolioBalances[chainId]?.find(
+ (tb) => tb.token.addresses[chainId] === token.addresses[chainId]
+ )?.parsedBalance
+
+ return (
+
{children}
@@ -53,4 +81,4 @@ export const WalletAnalyticsProvider = ({ children }) => {
)
}
-export const useWalletStatus = () => useContext(WalletStatusContext)
+export const useUserStatus = () => useContext(WalletStatusContext)
diff --git a/packages/synapse-interface/package.json b/packages/synapse-interface/package.json
index 14535c1c28..e8c72c8078 100644
--- a/packages/synapse-interface/package.json
+++ b/packages/synapse-interface/package.json
@@ -1,6 +1,6 @@
{
"name": "@synapsecns/synapse-interface",
- "version": "0.1.132",
+ "version": "0.1.134",
"private": true,
"engines": {
"node": ">=16.0.0"
diff --git a/packages/synapse-interface/pages/_app.tsx b/packages/synapse-interface/pages/_app.tsx
index 19cef6e443..bb2844fed9 100644
--- a/packages/synapse-interface/pages/_app.tsx
+++ b/packages/synapse-interface/pages/_app.tsx
@@ -46,7 +46,7 @@ import { SegmentAnalyticsProvider } from '@/contexts/SegmentAnalyticsProvider'
import { Provider } from 'react-redux'
import { store } from '@/store/store'
-import { WalletAnalyticsProvider } from '@/contexts/WalletAnalyticsProvider'
+import { UserProvider } from '@/contexts/UserProvider'
import PortfolioUpdater from '@/slices/portfolio/updater'
import TransactionsUpdater from '@/slices/transactions/updater'
@@ -146,16 +146,16 @@ const App = ({ Component, pageProps }: AppProps) => {
-
-
-
+
+
+
-
-
+
+
+
diff --git a/packages/synapse-interface/pages/bridge/BridgeWatcher/BlockCountdown.tsx b/packages/synapse-interface/pages/bridge/BridgeWatcher/BlockCountdown.tsx
deleted file mode 100644
index fe604a6721..0000000000
--- a/packages/synapse-interface/pages/bridge/BridgeWatcher/BlockCountdown.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import _ from 'lodash'
-import { useEffect, useState, memo } from 'react'
-import { fetchBlockNumber } from '@wagmi/core'
-import {
- ChevronRightIcon,
- ChevronDoubleRightIcon,
-} from '@heroicons/react/outline'
-import { Arc } from '@visx/shape'
-import { Chord } from '@visx/chord'
-import { BridgeWatcherTx } from '@types'
-import { getNetworkTextColor } from '@styles/chains'
-import { CHAINS_BY_ID } from '@/constants/chains'
-import { BRIDGE_REQUIRED_CONFIRMATIONS } from '@constants/bridge'
-import {
- EmptySubTransactionItem,
- CheckingConfPlaceholder,
-} from '@components/TransactionItems'
-
-const BlockCountdown = memo(
- ({
- fromEvent,
- toEvent,
- setCompletedConf,
- }: {
- fromEvent: BridgeWatcherTx
- toEvent?: BridgeWatcherTx
- setCompletedConf: (bool: boolean) => void
- }) => {
- const chain = fromEvent?.chainId ? CHAINS_BY_ID[fromEvent.chainId] : null
- const [confirmationDelta, setConfirmationDelta] = useState(-1)
- const [time, setTime] = useState(Date.now())
-
- useEffect(() => {
- const interval = setInterval(() => {
- setTime(Date.now())
- }, 5000)
-
- return () => {
- clearInterval(interval)
- }
- }, [])
-
- useEffect(() => {
- if (confirmationDelta === 0 || toEvent) {
- return
- }
- fetchBlockNumber({
- chainId: fromEvent?.chainId,
- }).then((newestBlockNumber) => {
- // if error with rpc getting block number, don't run the following code
- if (!newestBlockNumber) {
- return
- }
- // get number of blocks since from event blocknumber
- const blockDifference = newestBlockNumber - BigInt(fromEvent.blockNumber)
-
- // get number of blocks since event block number - required confirmations
- const blocksSinceConfirmed =
- blockDifference - BigInt(BRIDGE_REQUIRED_CONFIRMATIONS[fromEvent?.chainId])
-
- // if blocks since confirmed is less than 0, thats how many blocks left to confirm
- setConfirmationDelta(
- blocksSinceConfirmed >= 0 ? 0 : Number(blocksSinceConfirmed) * -1
- )
- if (blocksSinceConfirmed >= 0) {
- setCompletedConf(true)
- }
- })
- }, [time])
-
- return (
- <>
- (undefined)
- const [toSynapseContract, setToSynapseContract] =
- useState(undefined)
- const [toCCTPContract, setToCCTPContract] = useState(undefined)
- const [toSigner, setToSigner] = useState()
- const { data: toSignerRaw } = useWalletClient({
- chainId: fromEvent.toChainId,
- })
- const [completedConf, setCompletedConf] = useState(false)
- const [attempted, setAttempted] = useState(false)
- const { providerMap } = useSynapseContext()
-
- const networkTextColorClass: string = useMemo(() => {
- const networkChainById = CHAINS_BY_ID[fromEvent.chainId]
- return getNetworkTextColor(networkChainById?.color)
- }, [fromEvent.toChainId])
-
- const getToBridgeEvent = async (): Promise => {
- const headOnDestination = await fetchBlockNumber({
- chainId: fromEvent.toChainId,
- })
- const provider = providerMap[fromEvent.toChainId]
-
- const isCCTP =
- typeof fromEvent.contractEmittedFrom === 'string' &&
- typeof SYNAPSE_CCTP_CONTRACTS[fromEvent.chainId] === 'string' &&
- fromEvent.contractEmittedFrom.toLowerCase() ===
- SYNAPSE_CCTP_CONTRACTS[fromEvent.chainId].toLowerCase()
- ? true
- : false
-
- const iface = new Interface(isCCTP ? SYNAPSE_CCTP_ABI : SYNAPSE_BRIDGE_ABI)
-
- let allToEvents = []
- let i = 0
- let afterOrginTx = true
- while (afterOrginTx) {
- const startBlock = Number(headOnDestination) - GETLOGS_SIZE * i
-
- // get timestamp from from block
- const blockRaw = await getBlock(startBlock - (GETLOGS_SIZE + 1), provider)
- const blockTimestamp = blockRaw?.timestamp
-
- // Exit loop if destination block was mined before the block for the origin tx
- if (blockTimestamp < fromEvent.timestamp) {
- afterOrginTx = false
- }
-
- const fromEventsBridge = await getLogs(
- startBlock,
- provider,
- toSynapseContract,
- fromEvent.toAddress
- )
-
- const fromEventsCCTP = await getLogs(
- startBlock,
- provider,
- toCCTPContract,
- fromEvent.toAddress
- )
-
- allToEvents.push(fromEventsBridge, fromEventsCCTP)
- i++
-
- // Break if cannot find tx
- if (i > 30) {
- afterOrginTx = false
- }
- }
- const flattendEvents = _.flatten(allToEvents)
- let parsedLogs
- if (!isCCTP) {
- parsedLogs = flattendEvents
- .map((log) => {
- return {
- ...iface.parseLog(log).args,
- transactionHash: log.transactionHash,
- blockNumber: Number(log.blockNumber),
- }
- })
- .filter((log: any) => {
- const convertedKappa = remove0xPrefix(log.kappa)
- return !checkTxIn(log) && convertedKappa === fromEvent.kappa
- })
- } else {
- parsedLogs = flattendEvents
- .map((log) => {
- return {
- ...iface.parseLog(log).args,
- transactionHash: log.transactionHash,
- blockNumber: Number(log.blockNumber),
- }
- })
- .filter((log: any) => {
- return log.requestID === fromEvent.kappa
- })
- }
-
- const parsedLog = parsedLogs?.[0]
- if (parsedLog) {
- const [inputTimestamp, transactionReceipt] = await Promise.all([
- getBlock(parsedLog.blockNumber, provider),
- getTransactionReceipt(parsedLog.transactionHash, provider),
- ])
-
- const destBridgeTx = generateBridgeTx(
- false,
- fromEvent.toAddress,
- fromEvent.toChainId,
- parsedLog,
- inputTimestamp,
- transactionReceipt,
- fromEvent.toAddress
- )
- setAttempted(true)
- return destBridgeTx
- }
-
- setAttempted(true)
- return null
- }
-
- useEffect(() => {
- if (toSigner && fromEvent) {
- const toSynapseContract = new Contract(
- BRIDGE_CONTRACTS[fromEvent.toChainId],
- SYNAPSE_BRIDGE_ABI,
- providerMap[fromEvent.toChainId]
- )
- setToSynapseContract(toSynapseContract)
-
- // Initialize CCTP Contract when signer and fromEvent are available
- if (SYNAPSE_CCTP_CONTRACTS[fromEvent.toChainId]) {
- const toCCTPContract = new Contract(
- SYNAPSE_CCTP_CONTRACTS[fromEvent.toChainId],
- SYNAPSE_CCTP_ABI,
- providerMap[fromEvent.toChainId]
- )
- setToCCTPContract(toCCTPContract)
- }
- }
- }, [fromEvent, toSigner])
-
- // Listens for confirmations to complete and if so, recheck destination chain for logs
- useEffect(() => {
- if (completedConf && (toSynapseContract || toCCTPContract) && attempted) {
- getToBridgeEvent().then((tx) => {
- setToEvent(tx)
- })
- }
- }, [completedConf, toEvent, fromEvent, toSynapseContract, toCCTPContract])
-
- // Listens for SynapseContract to be set and if so, will check destination chain for logs if there is no toEvent
- useEffect(() => {
- if ((toSynapseContract || toCCTPContract) && !toEvent) {
- getToBridgeEvent().then((tx) => {
- setToEvent(tx)
- return
- })
- }
- return
- }, [toSynapseContract, toCCTPContract])
-
- useEffect(() => {
- if (toSignerRaw != undefined) {
- setToSigner(toSignerRaw.account.address)
- }
- }, [toSignerRaw])
-
- return (
- ()
- const [fromCCTPContract, setFromCCTPContract] = useState()
-
- const [fromSigner, setFromSigner] = useState()
- const { address: fromSignerRaw, isConnecting, isDisconnected } = useAccount()
- const { providerMap } = useSynapseContext()
-
- const createContractsAndInterfaces = (chainId, provider) => {
- const bridgeAddress = BRIDGE_CONTRACTS[chainId]
- const synapseCCTPAddress = SYNAPSE_CCTP_CONTRACTS[chainId]
-
- const validBridgeContract = BRIDGE_CONTRACTS[fromChainId]
- ? BRIDGE_CONTRACTS[fromChainId]
- : BRIDGE_CONTRACTS[CHAINS.ETH.id]
- const bridgeContract = new Contract(
- validBridgeContract,
- SYNAPSE_BRIDGE_ABI,
- provider
- )
-
- const bridgeInterface = new Interface(SYNAPSE_BRIDGE_ABI)
-
- const synapseCCTPContract = synapseCCTPAddress
- ? new Contract(synapseCCTPAddress, SYNAPSE_CCTP_ABI, provider)
- : null
-
- const synapseCCTPInterface = synapseCCTPAddress
- ? new Interface(SYNAPSE_CCTP_ABI)
- : null
-
- return {
- bridgeContract,
- bridgeInterface,
- synapseCCTPContract,
- synapseCCTPInterface,
- }
- }
-
- const fetchFromBridgeEvents = async (
- currentFromBlock: number,
- provider: any,
- adjustedAddress: string
- ) => {
- const {
- bridgeContract,
- bridgeInterface,
- synapseCCTPContract,
- synapseCCTPInterface,
- } = createContractsAndInterfaces(provider.network.chainId, provider)
- let allFromEvents = []
- let retryCount = 0
- const maxRetries = 5 // Adjust this as needed
-
- // fetch bridge logs
- for (let i = 0; i < GETLOGS_REQUEST_COUNT; i++) {
- let successful = false
- while (!successful && retryCount < maxRetries) {
- try {
- const fromEvents = await getLogs(
- currentFromBlock - GETLOGS_SIZE * i,
- provider,
- bridgeContract,
- adjustedAddress
- )
- allFromEvents.push(fromEvents)
- successful = true
- } catch (error) {
- retryCount++
- console.log(
- `getLogs failed, retrying in ${Math.pow(2, retryCount)} seconds...`
- )
- await new Promise((resolve) =>
- setTimeout(resolve, Math.pow(2, retryCount) * 1000)
- )
- }
- }
- if (retryCount === maxRetries) {
- console.error('getLogs failed after maximum retries')
- break
- }
- }
- // fetch synapseCCTP logs if the contract exists for the chain
- if (synapseCCTPContract) {
- for (let i = 0; i < GETLOGS_REQUEST_COUNT; i++) {
- let successful = false
- while (!successful && retryCount < maxRetries) {
- try {
- const fromEvents = await getLogs(
- currentFromBlock - GETLOGS_SIZE * i,
- provider,
- synapseCCTPContract,
- adjustedAddress
- )
- allFromEvents.push(fromEvents)
- successful = true
- } catch (error) {
- retryCount++
- console.log(
- `getLogs failed, retrying in ${Math.pow(
- 2,
- retryCount
- )} seconds...`
- )
- await new Promise((resolve) =>
- setTimeout(resolve, Math.pow(2, retryCount) * 1000)
- )
- }
- }
- if (retryCount === maxRetries) {
- console.error('getLogs failed after maximum retries')
- break
- }
- }
- }
-
- return _.flatten(allFromEvents)
- }
-
- const parseLogs = (
- fromEvents: any[],
- bridgeInterface: Interface,
- synapseCCTPInterface: Interface,
- bridgeAddress: string,
- synapseCCTPAddress?: string
- ) => {
- return fromEvents
- .map((log) => {
- // Select the correct interface based on the contract address
- const iface =
- log.address.toLowerCase() === bridgeAddress.toLowerCase()
- ? bridgeInterface
- : synapseCCTPInterface
-
- return {
- ...iface.parseLog(log).args,
- transactionHash: log.transactionHash,
- blockNumber: Number(log.blockNumber),
- contractEmittedFrom: log.address.toLowerCase(),
- }
- })
- .filter((log) => checkTxIn(log))
- }
-
- const fetchTimestampsAndReceipts = (parsedLogs: any[], provider: any) => {
- return Promise.all([
- Promise.all(parsedLogs.map((log) => getBlock(log.blockNumber, provider))),
- Promise.all(
- parsedLogs.map((log) =>
- getTransactionReceipt(log.transactionHash, provider)
- )
- ),
- ])
- }
-
- const generateBridgeTransactions = (
- parsedLogs: any[],
- inputTimestamps: any[],
- transactionReceipts: any[],
- address: string,
- fromChainId: number,
- destinationAddress: string
- ) => {
- return _.zip(parsedLogs, inputTimestamps, transactionReceipts).map(
- ([parsedLog, timestampObj, txReceipt]) => {
- return generateBridgeTx(
- true,
- address,
- fromChainId,
- parsedLog,
- timestampObj,
- txReceipt,
- destinationAddress
- )
- }
- )
- }
-
- const getFromBridgeEvents = async (): Promise => {
- const currentFromBlock = await fetchBlockNumber({ chainId: fromChainId })
- const provider = providerMap[fromChainId] ?? providerMap[ChainId.ETH]
- const iface = new Interface(SYNAPSE_BRIDGE_ABI)
- const adjustedAddress = destinationAddress ? destinationAddress : address
-
- // Define the contracts and interfaces here
- const {
- bridgeContract,
- bridgeInterface,
- synapseCCTPContract,
- synapseCCTPInterface,
- } = createContractsAndInterfaces(provider?.network?.chainId, provider)
-
- const fromEvents = await fetchFromBridgeEvents(
- Number(currentFromBlock),
- provider,
- adjustedAddress
- )
- // Use the correct interfaces and addresses when parsing the logs
- const parsedLogs = parseLogs(
- fromEvents,
- bridgeInterface,
- synapseCCTPInterface,
- bridgeContract.address,
- synapseCCTPContract?.address
- )
-
- const [inputTimestamps, transactionReceipts] =
- await fetchTimestampsAndReceipts(parsedLogs, provider)
- const txObjects = generateBridgeTransactions(
- parsedLogs,
- inputTimestamps,
- transactionReceipts,
- address,
- fromChainId,
- destinationAddress
- )
-
- return txObjects
- }
-
- useEffect(() => {
- if (fromSigner && fromChainId && toChainId && address) {
- const validBridgeContract = BRIDGE_CONTRACTS[fromChainId]
- ? BRIDGE_CONTRACTS[fromChainId]
- : BRIDGE_CONTRACTS[1]
- const fromSynapseContract = new Contract(
- validBridgeContract,
- SYNAPSE_BRIDGE_ABI,
- providerMap[fromChainId]
- )
- setFromSynapseContract(fromSynapseContract)
- }
- }, [fromChainId, fromSigner])
-
- useEffect(() => {
- if (fromSynapseContract) {
- getFromBridgeEvents().then((txs) => {
- setFromTransactions(txs)
- })
- }
-
- return () => setFromTransactions([...fromTransactions])
- }, [fromSynapseContract, bridgeTxHashes])
-
- useEffect(() => {
- setFromSigner(fromSignerRaw)
- }, [fromSignerRaw])
-
- return (
-
- {/* {chain.name}
+
+
+ {balanceTokens && balanceTokens.length > 0 ? (
+
+
{chain.name}
+ setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+ {hasOneToken && (
+
+ )
+}
diff --git a/packages/synapse-interface/components/StateManagedBridge/helpers/sortByBalance.ts b/packages/synapse-interface/components/StateManagedBridge/helpers/sortByBalance.ts
index c7f1fc31f3..e8447b81f3 100644
--- a/packages/synapse-interface/components/StateManagedBridge/helpers/sortByBalance.ts
+++ b/packages/synapse-interface/components/StateManagedBridge/helpers/sortByBalance.ts
@@ -1,11 +1,12 @@
import _ from 'lodash'
import { Token } from '@/utils/types'
+import { NetworkTokenBalancesAndAllowances } from '@/utils/actions/fetchPortfolioBalances'
export const hasBalance = (
t: Token,
chainId: number,
- portfolioBalances: any
+ portfolioBalances: NetworkTokenBalancesAndAllowances
) => {
if (!chainId) {
return false
diff --git a/packages/synapse-interface/components/StateManagedSwap/SwapChainListOverlay.tsx b/packages/synapse-interface/components/StateManagedSwap/SwapChainListOverlay.tsx
new file mode 100644
index 0000000000..bb98d7d435
--- /dev/null
+++ b/packages/synapse-interface/components/StateManagedSwap/SwapChainListOverlay.tsx
@@ -0,0 +1,194 @@
+import _ from 'lodash'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import Fuse from 'fuse.js'
+import { useKeyPress } from '@hooks/useKeyPress'
+import * as ALL_CHAINS from '@constants/chains/master'
+import SlideSearchBox from '@pages/bridge/SlideSearchBox'
+import { CHAINS_BY_ID, sortChains } from '@constants/chains'
+import { useDispatch } from 'react-redux'
+import { segmentAnalyticsEvent } from '@/contexts/SegmentAnalyticsProvider'
+import { setShowFromChainListOverlay } from '@/slices/bridgeDisplaySlice'
+import { SelectSpecificNetworkButton } from './components/SelectSpecificNetworkButton'
+import useCloseOnOutsideClick from '@/utils/hooks/useCloseOnOutsideClick'
+import { CloseButton } from './components/CloseButton'
+import { SearchResults } from './components/SearchResults'
+import { setShowSwapChainListOverlay } from '@/slices/swapDisplaySlice'
+import { setSwapChainId } from '@/slices/swap/reducer'
+import { useSwapState } from '@/slices/swap/hooks'
+
+export const SwapChainListOverlay = () => {
+ const { swapChainId, swapFromChainIds } = useSwapState()
+ const [currentIdx, setCurrentIdx] = useState(-1)
+ const [searchStr, setSearchStr] = useState('')
+ const dispatch = useDispatch()
+ const dataId = 'swap-origin-chain-list'
+ const overlayRef = useRef(null)
+
+ let possibleChains = sortChains(
+ _(ALL_CHAINS)
+ .pickBy((value) => _.includes(swapFromChainIds, value.id))
+ .values()
+ .value()
+ )
+
+ let remainingChains = swapFromChainIds
+ ? sortChains(
+ _.difference(
+ Object.keys(CHAINS_BY_ID).map((id) => CHAINS_BY_ID[id]),
+ swapFromChainIds.map((id) => CHAINS_BY_ID[id])
+ )
+ )
+ : []
+
+ const possibleChainsWithSource = possibleChains.map((chain) => ({
+ ...chain,
+ source: 'possibleChains',
+ }))
+
+ const remainingChainsWithSource = remainingChains.map((chain) => ({
+ ...chain,
+ source: 'remainingChains',
+ }))
+
+ const masterList = [...possibleChainsWithSource, ...remainingChainsWithSource]
+
+ const fuseOptions = {
+ includeScore: true,
+ threshold: 0.0,
+ keys: [
+ {
+ name: 'name',
+ weight: 2,
+ },
+ 'id',
+ 'nativeCurrency.symbol',
+ ],
+ }
+
+ const fuse = new Fuse(masterList, fuseOptions)
+
+ if (searchStr?.length > 0) {
+ const results = fuse.search(searchStr).map((i) => i.item)
+
+ possibleChains = results.filter((item) => item.source === 'possibleChains')
+ remainingChains = results.filter(
+ (item) => item.source === 'remainingChains'
+ )
+ }
+
+ const escPressed = useKeyPress('Escape')
+ const arrowUp = useKeyPress('ArrowUp')
+ const arrowDown = useKeyPress('ArrowDown')
+
+ const onClose = useCallback(() => {
+ setCurrentIdx(-1)
+ setSearchStr('')
+ dispatch(setShowSwapChainListOverlay(false))
+ }, [dispatch])
+
+ const escFunc = () => {
+ if (escPressed) {
+ onClose()
+ }
+ }
+ const arrowDownFunc = () => {
+ const nextIdx = currentIdx + 1
+ if (arrowDown && nextIdx < masterList.length) {
+ setCurrentIdx(nextIdx)
+ }
+ }
+
+ const arrowUpFunc = () => {
+ const nextIdx = currentIdx - 1
+ if (arrowUp && -1 < nextIdx) {
+ setCurrentIdx(nextIdx)
+ }
+ }
+
+ const onSearch = (str: string) => {
+ setSearchStr(str)
+ setCurrentIdx(-1)
+ }
+
+ useEffect(arrowDownFunc, [arrowDown])
+ useEffect(escFunc, [escPressed])
+ useEffect(arrowUpFunc, [arrowUp])
+ useCloseOnOutsideClick(overlayRef, onClose)
+
+ const handleSetSwapChainId = (chainId) => {
+ const eventTitle = `[Swap User Action] Sets new fromChainId`
+ const eventData = {
+ previousFromChainId: swapChainId,
+ newFromChainId: chainId,
+ }
+
+ segmentAnalyticsEvent(eventTitle, eventData)
+ dispatch(setSwapChainId(chainId))
+ onClose()
+ }
+
+ return (
+ + {numOverTwoTokens}
+ )}
+
+ {isHovered && (
+
+
+ {balanceTokens.map(
+ (token: TokenWithBalanceAndAllowances, key: number) => {
+ const tokenSymbol = token.token.symbol
+ const balance = token.parsedBalance
+ return (
+
+ )}
+
+ {balance} {tokenSymbol}
+
+ )
+ }
+ )}
+
+
+ )
+}
diff --git a/packages/synapse-interface/components/StateManagedSwap/SwapChainSelector.tsx b/packages/synapse-interface/components/StateManagedSwap/SwapChainSelector.tsx
new file mode 100644
index 0000000000..b0204ecbaf
--- /dev/null
+++ b/packages/synapse-interface/components/StateManagedSwap/SwapChainSelector.tsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import { useDispatch } from 'react-redux'
+
+import { CHAINS_BY_ID } from '@/constants/chains'
+import { DropDownArrowSvg } from '@/components/icons/DropDownArrowSvg'
+import {
+ getNetworkButtonBgClassNameActive,
+ getNetworkButtonBorderActive,
+ getNetworkButtonBorderHover,
+ getNetworkHover,
+} from '@/styles/chains'
+import { useSwapState } from '@/slices/swap/hooks'
+import { setShowSwapChainListOverlay } from '@/slices/swapDisplaySlice'
+
+export const SwapChainSelector = () => {
+ const dispatch = useDispatch()
+ const { swapChainId } = useSwapState()
+ const chain = CHAINS_BY_ID[swapChainId]
+
+ const buttonContent = swapChainId ? (
+
+
+
+
+
+ {possibleChains && possibleChains.length > 0 && (
+ <>
+ {
+ if (swapChainId === mapChainId) {
+ onClose()
+ } else {
+ handleSetSwapChainId(mapChainId)
+ }
+ }}
+ dataId={dataId}
+ />
+ )
+ })}
+
+ )}
+ {remainingChains && remainingChains.length > 0 && (
+ <>
+ handleSetSwapChainId(mapChainId)}
+ dataId={dataId}
+ alternateBackground={true}
+ />
+ )
+ })}
+
+ )}
+
+ From…
+ {possibleChains.map(({ id: mapChainId }, idx) => {
+ return (
+
+ All chains
+
+ {remainingChains.map(({ id: mapChainId }, idx) => {
+ return (
+
+
+ ) : (
+
+ 
+
+
+
+ From
+ {chain.name}
+
+
+ )
+
+ return (
+
+ )
+}
diff --git a/packages/synapse-interface/components/SwapExchangeRateInfo.tsx b/packages/synapse-interface/components/StateManagedSwap/SwapExchangeRateInfo.tsx
similarity index 100%
rename from packages/synapse-interface/components/SwapExchangeRateInfo.tsx
rename to packages/synapse-interface/components/StateManagedSwap/SwapExchangeRateInfo.tsx
diff --git a/packages/synapse-interface/components/StateManagedSwap/SwapFromTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedSwap/SwapFromTokenListOverlay.tsx
new file mode 100644
index 0000000000..d97b6318a1
--- /dev/null
+++ b/packages/synapse-interface/components/StateManagedSwap/SwapFromTokenListOverlay.tsx
@@ -0,0 +1,223 @@
+import _ from 'lodash'
+
+import { useEffect, useRef, useState } from 'react'
+import { useDispatch } from 'react-redux'
+import Fuse from 'fuse.js'
+
+import { useKeyPress } from '@hooks/useKeyPress'
+import SlideSearchBox from '@pages/bridge/SlideSearchBox'
+import { Token } from '@/utils/types'
+import { segmentAnalyticsEvent } from '@/contexts/SegmentAnalyticsProvider'
+import { usePortfolioBalances } from '@/slices/portfolio/hooks'
+import SelectSpecificTokenButton from './components/SelectSpecificTokenButton'
+
+import { hasBalance } from './helpers/sortByBalance'
+import { sortByPriorityRank } from './helpers/sortByPriorityRank'
+import useCloseOnOutsideClick from '@/utils/hooks/useCloseOnOutsideClick'
+import { CloseButton } from './components/CloseButton'
+import { SearchResults } from './components/SearchResults'
+import { useSwapState } from '@/slices/swap/hooks'
+import { setShowSwapFromTokenListOverlay } from '@/slices/swapDisplaySlice'
+import { setSwapFromToken } from '@/slices/swap/reducer'
+import { getSwapPossibilities } from '@/utils/swapFinder/generateSwapPossibilities'
+import { CHAINS_BY_ID } from '@/constants/chains'
+
+export const SwapFromTokenListOverlay = () => {
+ const [currentIdx, setCurrentIdx] = useState(-1)
+ const [searchStr, setSearchStr] = useState('')
+ const dispatch = useDispatch()
+ const overlayRef = useRef(null)
+
+ const { swapFromTokens, swapChainId, swapFromToken } = useSwapState()
+ const portfolioBalances = usePortfolioBalances()
+
+ let possibleTokens = sortByPriorityRank(swapFromTokens)
+
+ possibleTokens = [
+ ...possibleTokens.filter((t) =>
+ hasBalance(t, swapChainId, portfolioBalances)
+ ),
+ ...possibleTokens.filter(
+ (t) => !hasBalance(t, swapChainId, portfolioBalances)
+ ),
+ ]
+
+ const { fromTokens: allSwapChainTokens } = getSwapPossibilities({
+ fromChainId: swapChainId,
+ fromToken: null,
+ toChainId: swapChainId,
+ toToken: null,
+ })
+
+ let remainingTokens = sortByPriorityRank(
+ _.difference(allSwapChainTokens, swapFromTokens)
+ )
+
+ remainingTokens = [
+ ...remainingTokens.filter((t) =>
+ hasBalance(t, swapChainId, portfolioBalances)
+ ),
+ ...remainingTokens.filter(
+ (t) => !hasBalance(t, swapChainId, portfolioBalances)
+ ),
+ ]
+
+ const possibleTokensWithSource = possibleTokens.map((token) => ({
+ ...token,
+ source: 'possibleTokens',
+ }))
+ const remainingTokensWithSource = remainingTokens.map((token) => ({
+ ...token,
+ source: 'remainingTokens',
+ }))
+
+ const masterList = [...possibleTokensWithSource, ...remainingTokensWithSource]
+
+ const fuseOptions = {
+ ignoreLocation: true,
+ includeScore: true,
+ threshold: 0.0,
+ keys: [
+ {
+ name: 'symbol',
+ weight: 2,
+ },
+ 'routeSymbol',
+ `addresses.${swapChainId}`,
+ 'name',
+ ],
+ }
+
+ const fuse = new Fuse(masterList, fuseOptions)
+
+ if (searchStr?.length > 0) {
+ const results = fuse.search(searchStr).map((i) => i.item)
+ possibleTokens = results.filter((item) => item.source === 'possibleTokens')
+ remainingTokens = results.filter(
+ (item) => item.source === 'remainingTokens'
+ )
+ }
+
+ const escPressed = useKeyPress('Escape')
+ const arrowUp = useKeyPress('ArrowUp')
+ const arrowDown = useKeyPress('ArrowDown')
+
+ function onClose() {
+ setCurrentIdx(-1)
+ setSearchStr('')
+ dispatch(setShowSwapFromTokenListOverlay(false))
+ }
+
+ function escFunc() {
+ if (escPressed) {
+ onClose()
+ }
+ }
+
+ function arrowDownFunc() {
+ const nextIdx = currentIdx + 1
+ if (arrowDown && nextIdx < masterList.length) {
+ setCurrentIdx(nextIdx)
+ }
+ }
+
+ function arrowUpFunc() {
+ const nextIdx = currentIdx - 1
+ if (arrowUp && -1 < nextIdx) {
+ setCurrentIdx(nextIdx)
+ }
+ }
+
+ function onSearch(str: string) {
+ setSearchStr(str)
+ setCurrentIdx(-1)
+ }
+
+ useEffect(escFunc, [escPressed])
+ useEffect(arrowDownFunc, [arrowDown])
+ useEffect(arrowUpFunc, [arrowUp])
+ useCloseOnOutsideClick(overlayRef, onClose)
+
+ const handleSetFromToken = (oldToken: Token, newToken: Token) => {
+ const eventTitle = '[Swap User Action] Sets new fromToken'
+ const eventData = {
+ previousFromToken: oldToken?.symbol,
+ newFromToken: newToken?.symbol,
+ }
+ segmentAnalyticsEvent(eventTitle, eventData)
+ dispatch(setSwapFromToken(newToken))
+ onClose()
+ }
+
+ return (
+
+
+ From
+ Network
+
+
+ )
+}
diff --git a/packages/synapse-interface/components/StateManagedSwap/SwapFromTokenSelector.tsx b/packages/synapse-interface/components/StateManagedSwap/SwapFromTokenSelector.tsx
new file mode 100644
index 0000000000..1dcca30170
--- /dev/null
+++ b/packages/synapse-interface/components/StateManagedSwap/SwapFromTokenSelector.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import { useDispatch } from 'react-redux'
+
+import { DropDownArrowSvg } from '../icons/DropDownArrowSvg'
+import {
+ getBorderStyleForCoinHover,
+ getMenuItemHoverBgForCoin,
+} from '@/styles/tokens'
+import { useSwapState } from '@/slices/swap/hooks'
+import { setShowSwapFromTokenListOverlay } from '@/slices/swapDisplaySlice'
+
+export const SwapFromTokenSelector = () => {
+ const dispatch = useDispatch()
+
+ const { swapFromToken } = useSwapState()
+
+ const buttonContent = swapFromToken ? (
+
+
+ {possibleTokens && possibleTokens.length > 0 && (
+ <>
+
+
+
+ Swap…
+
+
+ {possibleTokens.map((token, idx) => {
+ return (
+ {
+ if (token === swapFromToken) {
+ onClose()
+ } else {
+ handleSetFromToken(swapFromToken, token)
+ }
+ }}
+ />
+ )
+ })}
+
+
+ )}
+ {remainingTokens && remainingTokens.length > 0 && (
+ <>
+
+ {swapChainId
+ ? `More on ${CHAINS_BY_ID[swapChainId]?.name}`
+ : 'All swappable tokens'}
+
+
+ {remainingTokens.map((token, idx) => {
+ return (
+ handleSetFromToken(swapFromToken, token)}
+ />
+ )
+ })}
+
+
+ )}
+
+
+ ) : (
+
+ 
+
+
+
+
+ {swapFromToken?.symbol}
+
+
+
+ )
+
+ return (
+
+ )
+}
diff --git a/packages/synapse-interface/components/StateManagedSwap/SwapInputContainer.tsx b/packages/synapse-interface/components/StateManagedSwap/SwapInputContainer.tsx
new file mode 100644
index 0000000000..82eb3a047c
--- /dev/null
+++ b/packages/synapse-interface/components/StateManagedSwap/SwapInputContainer.tsx
@@ -0,0 +1,172 @@
+import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react'
+import { useDispatch } from 'react-redux'
+import { useAccount, useNetwork } from 'wagmi'
+
+import MiniMaxButton from '../buttons/MiniMaxButton'
+import { formatBigIntToString, stringToBigInt } from '@/utils/bigint/format'
+import { cleanNumberInput } from '@/utils/cleanNumberInput'
+import {
+ ConnectToNetworkButton,
+ ConnectWalletButton,
+ ConnectedIndicator,
+} from '@/components/ConnectionIndicators'
+import { SwapChainSelector } from './SwapChainSelector'
+import { SwapFromTokenSelector } from './SwapFromTokenSelector'
+import { usePortfolioState } from '@/slices/portfolio/hooks'
+import { updateSwapFromValue } from '@/slices/swap/reducer'
+import { useSwapState } from '@/slices/swap/hooks'
+
+export const SwapInputContainer = () => {
+ const inputRef = useRef
+
+ In
+
+
+ )
+}
diff --git a/packages/synapse-interface/components/StateManagedSwap/SwapOutputContainer.tsx b/packages/synapse-interface/components/StateManagedSwap/SwapOutputContainer.tsx
new file mode 100644
index 0000000000..ee35082cf7
--- /dev/null
+++ b/packages/synapse-interface/components/StateManagedSwap/SwapOutputContainer.tsx
@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react'
+import { Address, useAccount } from 'wagmi'
+
+import LoadingSpinner from '../ui/tailwind/LoadingSpinner'
+import { SwapToTokenSelector } from './SwapToTokenSelector'
+import { useSwapState } from '@/slices/swap/hooks'
+
+export const SwapOutputContainer = ({}) => {
+ const { swapQuote, isLoading, swapToToken } = useSwapState()
+
+ const { address: isConnectedAddress } = useAccount()
+ const [address, setAddress] = useState()
+
+ useEffect(() => {
+ setAddress(isConnectedAddress)
+ }, [isConnectedAddress])
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {hasMounted && isConnected && (
+
+ )}
+
+ {hasMounted && isConnected && (
+
+
+
+ )}
+
+
+ )
+}
diff --git a/packages/synapse-interface/components/StateManagedSwap/SwapToTokenListOverlay.tsx b/packages/synapse-interface/components/StateManagedSwap/SwapToTokenListOverlay.tsx
new file mode 100644
index 0000000000..77bf22b49e
--- /dev/null
+++ b/packages/synapse-interface/components/StateManagedSwap/SwapToTokenListOverlay.tsx
@@ -0,0 +1,254 @@
+import _ from 'lodash'
+import { useEffect, useRef, useState } from 'react'
+import { useDispatch } from 'react-redux'
+import Fuse from 'fuse.js'
+
+import { useKeyPress } from '@hooks/useKeyPress'
+import SlideSearchBox from '@pages/bridge/SlideSearchBox'
+import { Token } from '@/utils/types'
+import { segmentAnalyticsEvent } from '@/contexts/SegmentAnalyticsProvider'
+import SelectSpecificTokenButton from './components/SelectSpecificTokenButton'
+import { getRoutePossibilities } from '@/utils/routeMaker/generateRoutePossibilities'
+
+import { sortByPriorityRank } from './helpers/sortByPriorityRank'
+import { CHAINS_BY_ID } from '@/constants/chains'
+import useCloseOnOutsideClick from '@/utils/hooks/useCloseOnOutsideClick'
+import { CloseButton } from './components/CloseButton'
+import { SearchResults } from './components/SearchResults'
+import { setShowSwapToTokenListOverlay } from '@/slices/swapDisplaySlice'
+import { setSwapToToken } from '@/slices/swap/reducer'
+import { useSwapState } from '@/slices/swap/hooks'
+import { getSwapPossibilities } from '@/utils/swapFinder/generateSwapPossibilities'
+
+export const SwapToTokenListOverlay = () => {
+ const { swapChainId, swapToTokens, swapToToken } = useSwapState()
+
+ const [currentIdx, setCurrentIdx] = useState(-1)
+ const [searchStr, setSearchStr] = useState('')
+ const dispatch = useDispatch()
+ const overlayRef = useRef(null)
+
+ let possibleTokens = sortByPriorityRank(swapToTokens)
+
+ const { toTokens: allToChainTokens } = getSwapPossibilities({
+ fromChainId: swapChainId,
+ fromToken: null,
+ toChainId: swapChainId,
+ toToken: null,
+ })
+
+ let remainingChainTokens = swapChainId
+ ? sortByPriorityRank(_.difference(allToChainTokens, swapToTokens))
+ : []
+
+ const { toTokens: allTokens } = getSwapPossibilities({
+ fromChainId: null,
+ fromToken: null,
+ toChainId: null,
+ toToken: null,
+ })
+
+ let allOtherToTokens = swapChainId
+ ? sortByPriorityRank(_.difference(allTokens, allToChainTokens))
+ : sortByPriorityRank(allTokens)
+
+ const possibleTokenswithSource = possibleTokens.map((token) => ({
+ ...token,
+ source: 'possibleTokens',
+ }))
+
+ const remainingChainTokensWithSource = remainingChainTokens.map((token) => ({
+ ...token,
+ source: 'remainingChainTokens',
+ }))
+
+ const allOtherToTokensWithSource = allOtherToTokens.map((token) => ({
+ ...token,
+ source: 'allOtherToTokens',
+ }))
+
+ const masterList = [
+ ...possibleTokenswithSource,
+ ...remainingChainTokensWithSource,
+ ...allOtherToTokensWithSource,
+ ]
+
+ const fuseOptions = {
+ ignoreLocation: true,
+ includeScore: true,
+ threshold: 0.0,
+ keys: [
+ {
+ name: 'symbol',
+ weight: 2,
+ },
+ 'routeSymbol',
+ `addresses.${swapChainId}`,
+ 'name',
+ ],
+ }
+ const fuse = new Fuse(masterList, fuseOptions)
+
+ if (searchStr?.length > 0) {
+ const results = fuse.search(searchStr).map((i) => i.item)
+
+ possibleTokens = results.filter((item) => item.source === 'possibleTokens')
+ remainingChainTokens = results.filter(
+ (item) => item.source === 'remainingChainTokens'
+ )
+ allOtherToTokens = results.filter(
+ (item) => item.source === 'allOtherToTokens'
+ )
+ }
+
+ const escPressed = useKeyPress('Escape')
+ const arrowUp = useKeyPress('ArrowUp')
+ const arrowDown = useKeyPress('ArrowDown')
+
+ function onClose() {
+ setCurrentIdx(-1)
+ setSearchStr('')
+ dispatch(setShowSwapToTokenListOverlay(false))
+ }
+
+ function escFunc() {
+ if (escPressed) {
+ onClose()
+ }
+ }
+
+ function arrowDownFunc() {
+ const nextIdx = currentIdx + 1
+ if (arrowDown && nextIdx < masterList.length) {
+ setCurrentIdx(nextIdx)
+ }
+ }
+
+ function arrowUpFunc() {
+ const nextIdx = currentIdx - 1
+ if (arrowUp && -1 < nextIdx) {
+ setCurrentIdx(nextIdx)
+ }
+ }
+
+ function onSearch(str: string) {
+ setSearchStr(str)
+ setCurrentIdx(-1)
+ }
+
+ useEffect(escFunc, [escPressed])
+ useEffect(arrowDownFunc, [arrowDown])
+ useEffect(arrowUpFunc, [arrowUp])
+ useCloseOnOutsideClick(overlayRef, onClose)
+
+ const handleSetToToken = (oldToken: Token, newToken: Token) => {
+ const eventTitle = `[Swap User Action] Sets new toToken`
+ const eventData = {
+ previousToToken: oldToken?.symbol,
+ newToToken: newToken?.symbol,
+ }
+ segmentAnalyticsEvent(eventTitle, eventData)
+ dispatch(setSwapToToken(newToken))
+ onClose()
+ }
+
+ return (
+
+
+
+
+
+ {isLoading ? (
+
+
+
+ )
+}
diff --git a/packages/synapse-interface/components/StateManagedSwap/SwapToTokenSelector.tsx b/packages/synapse-interface/components/StateManagedSwap/SwapToTokenSelector.tsx
new file mode 100644
index 0000000000..e0fe621320
--- /dev/null
+++ b/packages/synapse-interface/components/StateManagedSwap/SwapToTokenSelector.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import { useDispatch } from 'react-redux'
+
+import { DropDownArrowSvg } from '../icons/DropDownArrowSvg'
+import {
+ getBorderStyleForCoinHover,
+ getMenuItemHoverBgForCoin,
+} from '@/styles/tokens'
+import { setShowSwapToTokenListOverlay } from '@/slices/swapDisplaySlice'
+import { useSwapState } from '@/slices/swap/hooks'
+
+export const SwapToTokenSelector = () => {
+ const dispatch = useDispatch()
+
+ const { swapToToken } = useSwapState()
+
+ const buttonContent = swapToToken ? (
+
+
+ {possibleTokens && possibleTokens.length > 0 && (
+ <>
+
+
+
+ Receive…
+
+
+ {possibleTokens.map((token, idx) => {
+ return (
+ {
+ if (token === swapToToken) {
+ onClose()
+ } else {
+ handleSetToToken(swapToToken, token)
+ }
+ }}
+ />
+ )
+ })}
+
+
+ )}
+ {remainingChainTokens && remainingChainTokens.length > 0 && (
+ <>
+
+ {swapChainId
+ ? `More on ${CHAINS_BY_ID[swapChainId]?.name}`
+ : 'All swapable tokens'}
+
+
+ {remainingChainTokens.map((token, idx) => {
+ return (
+ handleSetToToken(swapToToken, token)}
+ />
+ )
+ })}
+
+
+ )}
+ {allOtherToTokens && allOtherToTokens.length > 0 && (
+ <>
+
+ All swapable tokens
+
+
+ {allOtherToTokens.map((token, idx) => {
+ return (
+ handleSetToToken(swapToToken, token)}
+ alternateBackground={true}
+ />
+ )
+ })}
+
+
+ )}
+
+
+ ) : (
+
+ 
+
+
+
+
+ {swapToToken?.symbol}
+
+
+
+ )
+
+ return (
+
+ )
+}
diff --git a/packages/synapse-interface/components/StateManagedSwap/SwapTransactionButton.tsx b/packages/synapse-interface/components/StateManagedSwap/SwapTransactionButton.tsx
new file mode 100644
index 0000000000..baa2654f04
--- /dev/null
+++ b/packages/synapse-interface/components/StateManagedSwap/SwapTransactionButton.tsx
@@ -0,0 +1,127 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useAccount, useNetwork, useSwitchNetwork } from 'wagmi'
+import { useConnectModal } from '@rainbow-me/rainbowkit'
+
+import { TransactionButton } from '@/components/buttons/TransactionButton'
+import { EMPTY_SWAP_QUOTE, EMPTY_SWAP_QUOTE_ZERO } from '@/constants/swap'
+import { stringToBigInt } from '@/utils/bigint/format'
+import { usePortfolioBalances } from '@/slices/portfolio/hooks'
+import { useSwapState } from '@/slices/swap/hooks'
+import { SWAP_CHAIN_IDS } from '@/constants/existingSwapRoutes'
+
+export const SwapTransactionButton = ({
+ approveTxn,
+ executeSwap,
+ isApproved,
+}) => {
+ const [isConnected, setIsConnected] = useState(false)
+ const { openConnectModal } = useConnectModal()
+
+ const { chain } = useNetwork()
+ const { chains, switchNetwork } = useSwitchNetwork()
+
+ const { isConnected: isConnectedInit } = useAccount({
+ onDisconnect() {
+ setIsConnected(false)
+ },
+ })
+
+ useEffect(() => {
+ setIsConnected(isConnectedInit)
+ }, [isConnectedInit])
+
+ const {
+ swapChainId,
+ swapFromToken,
+ swapToToken,
+ swapFromValue,
+ isLoading,
+ swapQuote,
+ } = useSwapState()
+
+ const balances = usePortfolioBalances()
+ const balancesForChain = balances[swapChainId]
+ const balanceForToken = balancesForChain?.find(
+ (t) => t.tokenAddress === swapFromToken?.addresses[swapChainId]
+ )?.balance
+
+ const sufficientBalance = useMemo(() => {
+ if (!swapChainId || !swapFromToken || !swapToToken) return false
+ return (
+ stringToBigInt(swapFromValue, swapFromToken?.decimals[swapChainId]) <=
+ balanceForToken
+ )
+ }, [balanceForToken, swapFromValue, swapChainId, swapFromToken, swapToToken])
+
+ const isButtonDisabled =
+ isLoading ||
+ swapQuote === EMPTY_SWAP_QUOTE_ZERO ||
+ swapQuote === EMPTY_SWAP_QUOTE ||
+ (isConnected && !sufficientBalance)
+
+ let buttonProperties
+
+ const fromTokenDecimals: number | undefined =
+ swapFromToken && swapFromToken.decimals[swapChainId]
+
+ const fromValueBigInt = useMemo(() => {
+ return fromTokenDecimals
+ ? stringToBigInt(swapFromValue, fromTokenDecimals)
+ : 0
+ }, [swapFromValue, fromTokenDecimals, swapChainId, swapFromToken])
+
+ if (!swapChainId) {
+ buttonProperties = {
+ label: 'Please select Origin network',
+ onClick: null,
+ }
+ } else if (!SWAP_CHAIN_IDS.includes(swapChainId)) {
+ buttonProperties = {
+ label: 'Swaps are not available on this network',
+ onClick: null,
+ }
+ } else if (!swapFromToken) {
+ buttonProperties = {
+ label: `Please select token`,
+ onClick: null,
+ }
+ } else if (!isConnected && fromValueBigInt > 0) {
+ buttonProperties = {
+ label: `Connect Wallet to Swap`,
+ onClick: openConnectModal,
+ }
+ } else if (isConnected && !sufficientBalance) {
+ buttonProperties = {
+ label: 'Insufficient balance',
+ onClick: null,
+ }
+ } else if (chain?.id != swapChainId && fromValueBigInt > 0) {
+ buttonProperties = {
+ label: `Switch to ${chains.find((c) => c.id === swapChainId).name}`,
+ onClick: () => switchNetwork(swapChainId),
+ pendingLabel: 'Switching chains',
+ }
+ } else if (!isApproved) {
+ buttonProperties = {
+ onClick: approveTxn,
+ label: `Approve ${swapFromToken?.symbol}`,
+ pendingLabel: 'Approving',
+ }
+ } else {
+ buttonProperties = {
+ onClick: executeSwap,
+ label: `Swap ${swapFromToken?.symbol} for ${swapToToken?.symbol}`,
+ pendingLabel: 'Swapping',
+ }
+ }
+
+ return (
+ buttonProperties && (
+
+
+ Out
+
+ {searchStr ? (
+
+ )
+}
diff --git a/packages/synapse-interface/components/StateManagedSwap/components/SelectSpecificNetworkButton.tsx b/packages/synapse-interface/components/StateManagedSwap/components/SelectSpecificNetworkButton.tsx
new file mode 100644
index 0000000000..f12b7c8b4a
--- /dev/null
+++ b/packages/synapse-interface/components/StateManagedSwap/components/SelectSpecificNetworkButton.tsx
@@ -0,0 +1,90 @@
+import { useEffect, useRef } from 'react'
+import { CHAINS_BY_ID } from '@constants/chains'
+import Image from 'next/image'
+import {
+ getNetworkHover,
+ getNetworkButtonBorder,
+ getNetworkButtonBorderHover,
+ getNetworkButtonBgClassName,
+ getNetworkButtonBgClassNameActive,
+ getNetworkButtonBorderActive,
+ getMenuItemStyleForChain,
+} from '@/styles/chains'
+
+export const SelectSpecificNetworkButton = ({
+ itemChainId,
+ isCurrentChain,
+ active,
+ onClick,
+ dataId,
+ alternateBackground = false,
+}: {
+ itemChainId: number
+ isCurrentChain: boolean
+ active: boolean
+ onClick: () => void
+ dataId: string
+ alternateBackground?: boolean
+}) => {
+ const ref = useRef
+ No other results found for{' '}
+ {searchStr}.
+
+ ) : null}
+
+ Want to see a {type} supported on Synapse? Let us know!
+
+
+
+
+ ) : null
+}
diff --git a/packages/synapse-interface/components/StateManagedSwap/components/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/StateManagedSwap/components/SelectSpecificTokenButton.tsx
new file mode 100644
index 0000000000..9f56f08a3e
--- /dev/null
+++ b/packages/synapse-interface/components/StateManagedSwap/components/SelectSpecificTokenButton.tsx
@@ -0,0 +1,207 @@
+import {
+ getBorderStyleForCoin,
+ getBorderStyleForCoinHover,
+ getMenuItemBgForCoin,
+ getMenuItemStyleForCoin,
+} from '@styles/tokens'
+import { memo, useEffect, useRef, useState } from 'react'
+import { Token } from '@/utils/types'
+import { usePortfolioBalances } from '@/slices/portfolio/hooks'
+import { CHAINS_BY_ID } from '@/constants/chains'
+import { useSwapState } from '@/slices/swap/hooks'
+
+const SelectSpecificTokenButton = ({
+ showAllChains,
+ isOrigin,
+ token,
+ active,
+ selectedToken,
+ onClick,
+ alternateBackground = false,
+}: {
+ showAllChains?: boolean
+ isOrigin: boolean
+ token: Token
+ active: boolean
+ selectedToken: Token
+ onClick: () => void
+ alternateBackground?: boolean
+}) => {
+ const ref = useRef{chain.name}
+
+ 
+
+ )
+ }
+)
+
+const Coin = ({ token, showAllChains }: { token; showAllChains: boolean }) => {
+ return (
+
+
+ )
+}
+
+const TokenBalance = ({
+ token,
+ chainId,
+ parsedBalance,
+}: {
+ token: Token
+ chainId: number
+ parsedBalance?: string
+}) => {
+ return (
+ {token?.symbol}
+
+
+ {token?.name}
+ {showAllChains &&
+ {parsedBalance && parsedBalance !== '0.0' && (
+
+ )
+}
+
+const AvailableChains = ({ token }: { token: Token }) => {
+ const [isHovered, setIsHovered] = useState(false)
+ const chainIds = Object.keys(token.addresses)
+ const hasOneChain = chainIds.length > 0
+ const hasMultipleChains = chainIds.length > 1
+ const numOverTwoChains = chainIds.length - 2 > 0 ? chainIds.length - 2 : 0
+
+ return (
+
+ {parsedBalance}
+
+ {' '}
+ {token ? token.symbol : ''}
+
+
+ )}
+ setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+ {hasOneChain && (
+ ![{`${CHAINS_BY_ID[chainIds[0]].name}]({`${CHAINS_BY_ID[chainIds[0]].chainImg.src}`})
+ )}
+ {hasMultipleChains && (
+ ![{`${CHAINS_BY_ID[chainIds[1]].name}]({`${CHAINS_BY_ID[chainIds[1]].chainImg.src}`})
+ )}
+ {numOverTwoChains > 0 && (
+
+ )
+}
+
+export default SelectSpecificTokenButton
diff --git a/packages/synapse-interface/components/StateManagedSwap/helpers/sortByBalance.ts b/packages/synapse-interface/components/StateManagedSwap/helpers/sortByBalance.ts
new file mode 100644
index 0000000000..8f03dfd6b2
--- /dev/null
+++ b/packages/synapse-interface/components/StateManagedSwap/helpers/sortByBalance.ts
@@ -0,0 +1,25 @@
+import _ from 'lodash'
+
+import { Token } from '@/utils/types'
+import { NetworkTokenBalancesAndAllowances } from '@/utils/actions/fetchPortfolioBalances'
+
+export const hasBalance = (
+ t: Token,
+ chainId: number,
+ portfolioBalances: NetworkTokenBalancesAndAllowances
+) => {
+ if (!chainId) {
+ return false
+ }
+ const pb = portfolioBalances[chainId]
+ if (!pb) {
+ return false
+ }
+ const token = _(pb)
+ .pickBy((value, _key) => value.token === t)
+ .value()
+
+ const tokenWithPb = Object.values(token)[0]
+
+ return tokenWithPb && tokenWithPb.balance !== 0n
+}
diff --git a/packages/synapse-interface/components/StateManagedSwap/helpers/sortByPriorityRank.ts b/packages/synapse-interface/components/StateManagedSwap/helpers/sortByPriorityRank.ts
new file mode 100644
index 0000000000..57925085b7
--- /dev/null
+++ b/packages/synapse-interface/components/StateManagedSwap/helpers/sortByPriorityRank.ts
@@ -0,0 +1,11 @@
+import _ from 'lodash'
+
+import { Token } from '@/utils/types'
+
+export const sortByPriorityRank = (tokens: Token[]) => {
+ return _.orderBy(
+ tokens,
+ [(token) => token.priorityRank, (token) => token.symbol.toLowerCase()],
+ ['asc', 'asc']
+ )
+}
diff --git a/packages/synapse-interface/components/TransactionItems.tsx b/packages/synapse-interface/components/TransactionItems.tsx
deleted file mode 100644
index 05c43d3988..0000000000
--- a/packages/synapse-interface/components/TransactionItems.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { CHAINS_BY_ID } from '@constants/chains'
-import { getNetworkLinkTextColor } from '@styles/chains'
-import { Chain } from '@types'
-
-export const CheckingConfPlaceholder = ({ chain }: { chain: Chain }) => {
- return (
- + {numOverTwoChains}
+ )}
+
+ {isHovered && (
+
+
+ {chainIds.map((chainId) => {
+ const chainName = CHAINS_BY_ID[chainId].name
+ return
+ )}
+ {chainName}
+ })}
+
-
- )
-}
-
-export const PendingCreditTransactionItem = ({
- chainId,
-}: {
- chainId: number
-}) => {
- const chain = CHAINS_BY_ID[chainId]
-
- return (
-
-
-
-
-
-
-
-
- Confirmations left on {chain?.name}
-
-
-
- )
-}
-
-export const EmptySubTransactionItem = ({ chainId }: { chainId: number }) => {
- const chain = CHAINS_BY_ID[chainId]
- return (
-
-
-
-
-
-
-
-
-
-
-
- Waiting to be credited on
-
- {chain?.name} -
- - {chain?.name} -
-
- )
-}
-
-export const CreditedTransactionItem = ({ chainId }: { chainId: number }) => {
- const chain = CHAINS_BY_ID[chainId]
- return (
-
- 
-
-
-
- )
-}
diff --git a/packages/synapse-interface/components/StateManagedBridge/components/DropDownArrowSvg.tsx b/packages/synapse-interface/components/icons/DropDownArrowSvg.tsx
similarity index 100%
rename from packages/synapse-interface/components/StateManagedBridge/components/DropDownArrowSvg.tsx
rename to packages/synapse-interface/components/icons/DropDownArrowSvg.tsx
diff --git a/packages/synapse-interface/components/input/TokenAmountInput/SelectTokenDropdown.tsx b/packages/synapse-interface/components/input/TokenAmountInput/SelectTokenDropdown.tsx
deleted file mode 100644
index 1c38bcf012..0000000000
--- a/packages/synapse-interface/components/input/TokenAmountInput/SelectTokenDropdown.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { ChevronDownIcon } from '@heroicons/react/outline'
-import React from 'react'
-import Image from 'next/image'
-import {
- getBorderStyleForCoinHover,
- getMenuItemHoverBgForCoin,
-} from '@styles/tokens'
-import { Token } from '@/utils/types'
-import { QuestionMarkCircleIcon } from '@heroicons/react/outline'
-import { CHAINS_BY_ID } from '@/constants/chains'
-import { Chain } from '@/utils/types'
-
-const SelectTokenDropdown = ({
- chainId,
- selectedToken,
- onClick,
- isOrigin,
-}: {
- chainId: number
- selectedToken: Token
- onClick: () => void
- isOrigin: boolean
-}) => {
- const currentChain: Chain = CHAINS_BY_ID[chainId]
- const isUnsupportedChain: boolean = currentChain ? false : true
- const symbol = selectedToken ? selectedToken.symbol : ''
- const dataId = isOrigin ? 'bridge-origin-token' : 'bridge-destination-token'
-
- return (
-
- )
-}
-export default SelectTokenDropdown
diff --git a/packages/synapse-interface/components/input/TokenAmountInput/index.tsx b/packages/synapse-interface/components/input/TokenAmountInput/index.tsx
deleted file mode 100644
index 399f557e0f..0000000000
--- a/packages/synapse-interface/components/input/TokenAmountInput/index.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import { formatBigIntToString } from '@/utils/bigint/format'
-import React, { useMemo } from 'react'
-import SwitchButton from '@components/buttons/SwitchButton'
-import MiniMaxButton from '@components/buttons/MiniMaxButton'
-import Spinner from '@/components/icons/Spinner'
-import { cleanNumberInput } from '@utils/cleanNumberInput'
-
-import { Token } from '@/utils/types'
-import { ChainLabel } from '@components/ChainLabel'
-import { DisplayType } from '@/pages/bridge/DisplayType'
-import SelectTokenDropdown from './SelectTokenDropdown'
-
-const BridgeInputContainer = ({
- address,
- isOrigin,
- isSwap,
- chains,
- chainId,
- inputString,
- selectedToken,
- connectedChainId,
- onChangeChain,
- onChangeAmount,
- setDisplayType,
- fromTokenBalance,
- isQuoteLoading = false,
-}: {
- address: `0x${string}`
- isOrigin: boolean
- isSwap: boolean
- chains: string[]
- chainId: number
- inputString: string
- selectedToken: Token
- connectedChainId: number
- setDisplayType: (v: DisplayType) => void
- onChangeAmount?: (v: string) => void
- onChangeChain: (chainId: number, flip: boolean, type: 'from' | 'to') => void
- fromTokenBalance?: bigint
- isQuoteLoading?: boolean
-}) => {
- const formattedBalance = useMemo(() => {
- if (!fromTokenBalance) return '0.0'
- return formatBigIntToString(
- fromTokenBalance,
- selectedToken?.decimals[chainId as keyof Token['decimals']],
- 3
- )
- }, [fromTokenBalance])
-
- const isConnected = address !== null
- const isMaxDisabled = formattedBalance === '0.0'
-
- const onClickBalance = () => {
- onChangeAmount(
- formatBigIntToString(
- fromTokenBalance,
- selectedToken?.decimals[chainId as keyof Token['decimals']]
- )
- )
- }
-
- return (
-
-
-
-
-
-
-
-
-
-
-
- Bridging Completed on
-
- {chain?.name} -
- - {chain?.name} -
-
- )
-}
-
-export default BridgeInputContainer
diff --git a/packages/synapse-interface/components/pairTxKappa.tsx b/packages/synapse-interface/components/pairTxKappa.tsx
deleted file mode 100644
index 868a3a8c21..0000000000
--- a/packages/synapse-interface/components/pairTxKappa.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import _ from 'lodash'
-
-function checkTxIn(tx) {
- if (tx.args?.chainId) {
- // if (tx.args?.chainId ?? false) { //
- return true
- } else {
- return false
- }
-}
-
-/**
- * @param {Transaction[]} transactions
- * @return {Transaction[][]}
- */
-export function pairTxKappa(transactions) {
- const transactionsByHash = {}
- for (const tx of transactions) {
- transactionsByHash[tx.transactionHash] = tx
- }
-
- const inputTxns = transactions.filter((tx) => tx.kekTxSig).filter(checkTxIn)
- const outputTxns = transactions
- .filter((tx) => tx.kekTxSig)
- .filter((tx) => !checkTxIn(tx))
-
- const outputTxnsDict = {}
-
- for (const tx of outputTxns) {
- outputTxnsDict[tx.args?.kappa] = tx
- }
-
- const pairSetsByChain = []
-
- for (const inTx of inputTxns) {
- const outTx = outputTxnsDict[inTx.kekTxSig]
- if (outTx) {
- pairSetsByChain.push([inTx, outTx])
- } else {
- pairSetsByChain.push([inTx, undefined])
- }
- }
- const outTxnKeys = pairSetsByChain.map(
- ([inTx, outTx]) => outTx?.transactionHash
- )
- const remainingOuts = outputTxns.filter(
- (tx) => !outTxnKeys.includes(tx.transactionHash)
- )
-
- for (const outTx of remainingOuts) {
- pairSetsByChain.push([undefined, outTx])
- }
-
- return _.sortBy(pairSetsByChain, ([inTx, outTx]) => {
- return -(outTx?.timestamp ?? inTx?.timestamp)
- })
-}
diff --git a/packages/synapse-interface/components/ui/tailwind/Modal.tsx b/packages/synapse-interface/components/ui/tailwind/Modal.tsx
deleted file mode 100644
index 34bb136ba1..0000000000
--- a/packages/synapse-interface/components/ui/tailwind/Modal.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useEffect } from 'react'
-import { useKeyPress } from '@hooks/useKeyPress'
-
-export default function Modal({
- isOpen,
- onClose,
- children,
-}: {
- isOpen: boolean
- onClose: () => void
- children: any
-}) {
- const escPressed = useKeyPress('Escape')
-
- function escEffect() {
- if (escPressed) {
- onClose()
- }
- }
-
- useEffect(escEffect, [escPressed])
-
- if (isOpen) {
- return (
- <>
-
-
-
- {!isOrigin && !isSwap && (
-
-
-
- )}
- {!(isSwap && !isOrigin) && (
-
-
- onChangeChain(chainId, true, isOrigin ? 'from' : 'to')
- }
- />
-
-
-
-
- {
- setDisplayType(isOrigin ? DisplayType.FROM : DisplayType.TO)
- }}
- />
-
-
- onChangeAmount(cleanNumberInput(e.target.value))
- : () => null
- }
- value={inputString === '0' ? null : inputString}
- name="inputRow"
- autoComplete="off"
- />
- {isOrigin && isConnected && (
-
- )}
-
- {isOrigin && isConnected && (
-
-
- )}
-
-
-
-
- )
- } else {
- return null
- }
-}
diff --git a/packages/synapse-interface/components/ui/tailwind/ModalHeadline.tsx b/packages/synapse-interface/components/ui/tailwind/ModalHeadline.tsx
deleted file mode 100644
index 20207f107f..0000000000
--- a/packages/synapse-interface/components/ui/tailwind/ModalHeadline.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { twMerge } from 'tailwind-merge'
-
-const baseClassname = `
- mb-3 text-sm text-secondaryTextColor text-opacity-50
-`
-
-export default function ModalHeadline({
- title,
- subtitle,
- onClose,
- titleClassName,
-}: {
- title: string
- subtitle: string
- onClose: any
- titleClassName?: string
-}) {
- const mergedTitleClassName = twMerge(`${baseClassname} ${titleClassName}`)
-
- return (
-
-
-
- {children}
-
-
-
- )
-}
diff --git a/packages/synapse-interface/constants/chains/master.tsx b/packages/synapse-interface/constants/chains/master.tsx
index c01268700c..55f7f24ce0 100644
--- a/packages/synapse-interface/constants/chains/master.tsx
+++ b/packages/synapse-interface/constants/chains/master.tsx
@@ -406,7 +406,7 @@ export const DOGE: Chain = {
}
export const BASE: Chain = {
- priorityRank: 1,
+ priorityRank: 90,
id: 8453,
chainSymbol: 'ETH',
name: 'Base',
diff --git a/packages/synapse-interface/constants/existingSwapRoutes.ts b/packages/synapse-interface/constants/existingSwapRoutes.ts
new file mode 100644
index 0000000000..e7f6a7e7a3
--- /dev/null
+++ b/packages/synapse-interface/constants/existingSwapRoutes.ts
@@ -0,0 +1,52 @@
+import _ from 'lodash'
+import { zeroAddress } from 'viem'
+
+import { BRIDGE_MAP } from './bridgeMap'
+import { findTokenByAddressAndChain } from '@/utils/findTokenByAddressAndChainId'
+import { ETHEREUM_ADDRESS } from '.'
+
+export const FILTERED = _(BRIDGE_MAP)
+ .mapValues((chainObj) => {
+ return _(chainObj)
+ .pickBy(
+ (tokenObj: any) =>
+ Array.isArray(tokenObj.swappable) && tokenObj.swappable.length > 0
+ )
+ .value()
+ })
+ .pickBy((value, _key) => Object.values(value).length > 0)
+ .value()
+
+export const SWAP_CHAIN_IDS = Object.keys(FILTERED).map(Number)
+
+export const EXISTING_SWAP_ROUTES = _(FILTERED)
+ .map((tokens, chainId) => {
+ return _(tokens)
+ .map((info, tokenAddress) => {
+ if (tokenAddress.toLowerCase() === ETHEREUM_ADDRESS.toLowerCase()) {
+ tokenAddress = zeroAddress
+ }
+
+ const symbol = findTokenByAddressAndChain(
+ tokenAddress,
+ chainId
+ )?.routeSymbol
+ const key = `${symbol}-${chainId}`
+ const swappable = info.swappable.map((address) => {
+ if (address.toLowerCase() === ETHEREUM_ADDRESS.toLowerCase()) {
+ address = zeroAddress
+ }
+
+ const symbol = findTokenByAddressAndChain(
+ address,
+ chainId
+ )?.routeSymbol
+ return `${symbol}-${chainId}`
+ })
+ return [key, swappable]
+ })
+ .value()
+ })
+ .flatten()
+ .fromPairs()
+ .value()
diff --git a/packages/synapse-interface/constants/index.ts b/packages/synapse-interface/constants/index.ts
index 6fcfb54de0..85e1dee41c 100644
--- a/packages/synapse-interface/constants/index.ts
+++ b/packages/synapse-interface/constants/index.ts
@@ -1,2 +1,4 @@
export const MAX_UINT256 =
115792089237316195423570985008687907853269984665640564039457584007913129639935n
+
+export const ETHEREUM_ADDRESS = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE'
diff --git a/packages/synapse-interface/constants/tokens/deprecated.ts b/packages/synapse-interface/constants/tokens/deprecated.ts
index b5ab9eae64..e807d1e8e5 100644
--- a/packages/synapse-interface/constants/tokens/deprecated.ts
+++ b/packages/synapse-interface/constants/tokens/deprecated.ts
@@ -1,5 +1,5 @@
-import usdbLogo from '@assets/icons/usdb.png'
-import fusdtLogo from '@assets/icons/fusdt.svg'
+import usdbLogo from '@assets/icons/usdc.svg'
+import fusdtLogo from '@assets/icons/usdt.svg'
import { Token } from '@/utils/types'
import * as CHAINS from '@/constants/chains/master'
diff --git a/packages/synapse-interface/constants/tokens/index.ts b/packages/synapse-interface/constants/tokens/index.ts
index 5fe0d98f28..73e70c077a 100644
--- a/packages/synapse-interface/constants/tokens/index.ts
+++ b/packages/synapse-interface/constants/tokens/index.ts
@@ -16,19 +16,7 @@ interface TokensByChain {
interface TokenByKey {
[cID: string]: Token
}
-interface BridgeChainsByType {
- [swapableType: string]: string[]
-}
-
-interface BridgeTypeByChain {
- [cID: string]: string[]
-}
-interface SwapableTokensByType {
- [cID: string]: {
- [swapableType: string]: Token[]
- }
-}
export const sortTokens = (tokens: Token[]) =>
Object.values(tokens).sort((a, b) => b.visibilityRank - a.visibilityRank)
@@ -81,83 +69,6 @@ const getBridgeableTokens = (): TokensByChain => {
return bridgeableTokens
}
-const getBridgeChainsByType = (): BridgeChainsByType => {
- const bridgeChainsByType: BridgeChainsByType = {}
- Object.entries(all).map(([key, token]) => {
- const swapableType = String(token?.swapableType)
- const keys = Object.keys(token.addresses).filter((cID) => {
- // Skip if the token is paused on the current chain
- if (PAUSED_TOKENS_BY_CHAIN[cID]?.includes(key)) return false
-
- return !bridgeChainsByType[swapableType]?.includes(cID)
- })
-
- if (bridgeChainsByType[swapableType]) {
- bridgeChainsByType[swapableType] = [
- ...bridgeChainsByType[swapableType],
- ...keys,
- ]
- } else {
- bridgeChainsByType[swapableType] = keys
- }
- })
- return bridgeChainsByType
-}
-
-const getBridgeTypeByChain = (): BridgeTypeByChain => {
- const bridgeChainByType = getBridgeChainsByType()
- const bridgeTypeByChain: BridgeTypeByChain = {}
- Object.keys(bridgeChainByType).forEach((key) => {
- bridgeChainByType[key].forEach((value) => {
- if (bridgeTypeByChain[value]) {
- bridgeTypeByChain[value].push(key)
- } else {
- bridgeTypeByChain[value] = [key]
- }
- })
- })
- return bridgeTypeByChain
-}
-
-const convertArrayToObject = (array: any) => {
- return array.reduce((obj: any, value: any) => {
- obj[value] = []
- return obj
- }, {})
-}
-
-const getBridgeableTokensByType = (): SwapableTokensByType => {
- const bridgeTypeByChain = getBridgeTypeByChain()
- const bridgeSwapableTokensByType = Object.fromEntries(
- Object.entries(bridgeTypeByChain).map(([k, v]) => [
- k,
- convertArrayToObject(v),
- ])
- )
-
- Object.entries(all).map(([key, token]) => {
- const swapableType = String(token?.swapableType)
-
- for (const cID of Object.keys(token.addresses)) {
- // Skip if the token is paused on the current chain
- if (PAUSED_TOKENS_BY_CHAIN[cID]?.includes(key)) continue
-
- if (bridgeSwapableTokensByType[cID][swapableType].length === 0) {
- bridgeSwapableTokensByType[cID][swapableType] = [token]
- } else if (
- !bridgeSwapableTokensByType[cID][swapableType]?.includes(token)
- ) {
- bridgeSwapableTokensByType[cID][swapableType] = [
- ...bridgeSwapableTokensByType[cID][swapableType],
- token,
- ]
- }
- }
- })
-
- return bridgeSwapableTokensByType
-}
-
const getTokenHashMap = () => {
const tokenHashMap = {}
@@ -182,9 +93,7 @@ export const TOKENS_SORTED_BY_SYMBOL = Array.from(
new Set(sortedTokens.map((token) => token.symbol))
)
export const BRIDGABLE_TOKENS = getBridgeableTokens()
-export const BRIDGE_CHAINS_BY_TYPE = getBridgeChainsByType()
-export const BRIDGE_TYPES_BY_CHAIN = getBridgeTypeByChain()
-export const BRIDGE_SWAPABLE_TOKENS_BY_TYPE = getBridgeableTokensByType()
+
export const tokenSymbolToToken = (chainId: number, symbol: string) => {
if (chainId) {
const token = BRIDGABLE_TOKENS[chainId].find((token) => {
@@ -213,40 +122,7 @@ export const TOKEN_HASH_MAP = getTokenHashMap()
// SWAPS
const allTokensWithSwap = [...Object.values(all), ...Object.values(allSwap)]
-const getSwapableTokens = (): TokensByChain => {
- const swapTokens: TokensByChain = {}
- allTokensWithSwap.map((token) => {
- if (!(token?.swapableOn?.length > 0)) return
- for (const cID of token.swapableOn) {
- if (!swapTokens[cID]) {
- swapTokens[cID] = [token]
- } else if (!swapTokens[cID]?.includes(token)) {
- swapTokens[cID] = [...swapTokens[cID], token]
- }
- }
- })
- return swapTokens
-}
-const getSwapableTokensByType = (): SwapableTokensByType => {
- const swapTokens: SwapableTokensByType = {}
- allTokensWithSwap.map((token) => {
- if (!(token?.swapableOn?.length > 0)) return
- for (const cID of token.swapableOn) {
- if (!swapTokens[cID]) {
- swapTokens[cID] = { [token.swapableType]: [token] }
- } else if (!swapTokens[cID][token.swapableType]) {
- swapTokens[cID][token.swapableType] = [token]
- } else if (!swapTokens[cID][token.swapableType].includes(token)) {
- swapTokens[cID][token.swapableType] = [
- ...swapTokens[cID][token.swapableType],
- token,
- ]
- }
- }
- })
- return swapTokens
-}
const getSwapPriorityRanking = () => {
const swapPriorityRanking = {}
allTokensWithSwap.map((token) => {
@@ -262,8 +138,6 @@ const getSwapPriorityRanking = () => {
})
return swapPriorityRanking
}
-export const SWAPABLE_TOKENS = getSwapableTokens()
-export const SWAPABLE_TOKENS_BY_TYPE = getSwapableTokensByType()
export const POOL_PRIORITY_RANKING = getSwapPriorityRanking()
// POOLS
diff --git a/packages/synapse-interface/contexts/WalletAnalyticsProvider.tsx b/packages/synapse-interface/contexts/UserProvider.tsx
similarity index 59%
rename from packages/synapse-interface/contexts/WalletAnalyticsProvider.tsx
rename to packages/synapse-interface/contexts/UserProvider.tsx
index f32e9f6a2f..a610ffae42 100644
--- a/packages/synapse-interface/contexts/WalletAnalyticsProvider.tsx
+++ b/packages/synapse-interface/contexts/UserProvider.tsx
@@ -2,14 +2,20 @@ import { createContext, useContext, useEffect, useRef } from 'react'
import { Chain, useAccount, useNetwork } from 'wagmi'
import { segmentAnalyticsEvent } from './SegmentAnalyticsProvider'
import { useRouter } from 'next/router'
+import { setSwapChainId } from '@/slices/swap/reducer'
+
+import { fetchAndStorePortfolioBalances } from '@/slices/portfolio/hooks'
+import { useAppDispatch } from '@/store/hooks'
+import { resetPortfolioState } from '@/slices/portfolio/actions'
const WalletStatusContext = createContext(undefined)
-export const WalletAnalyticsProvider = ({ children }) => {
+export const UserProvider = ({ children }) => {
+ const dispatch = useAppDispatch()
const { chain } = useNetwork()
const router = useRouter()
const { query, pathname } = router
- const { connector } = useAccount({
+ const { address, connector } = useAccount({
onConnect() {
segmentAnalyticsEvent(`[Wallet Analytics] connects`, {
walletId: connector?.id,
@@ -30,10 +36,16 @@ export const WalletAnalyticsProvider = ({ children }) => {
const prevChain = prevChainRef.current
useEffect(() => {
+ if (chain) {
+ dispatch(setSwapChainId(chain.id))
+ }
+
if (!chain) {
return
}
if (prevChain && chain !== prevChain) {
+ dispatch(setSwapChainId(chain.id))
+
segmentAnalyticsEvent(`[Wallet Analytics] connected to new chain`, {
previousNetworkName: prevChain.name,
previousChainId: prevChain.id,
@@ -46,6 +58,22 @@ export const WalletAnalyticsProvider = ({ children }) => {
}
}, [chain])
+ useEffect(() => {
+ ;(async () => {
+ if (address && chain?.id) {
+ try {
+ await dispatch(fetchAndStorePortfolioBalances(address))
+ } catch (error) {
+ console.error('Failed to fetch and store portfolio balances:', error)
+ }
+ }
+
+ if (!address) {
+ dispatch(resetPortfolioState())
+ }
+ })()
+ }, [chain, address])
+
return (
-
- -
{title}
- -
-
-
- Clear
-
- {subtitle}
-
-
-
- )
- }
-)
-
-const BlockCountdownCircle = ({
- clampedDiff,
- fromChainConfirmations,
- coloring,
-}) => {
- const dataMatrix = [
- [fromChainConfirmations - clampedDiff, 0, 0, 0],
- [clampedDiff, 0, 0, 0],
- ]
- return (
-
- )
-}
-
-export default BlockCountdown
diff --git a/packages/synapse-interface/pages/bridge/BridgeWatcher/BridgeEvent.tsx b/packages/synapse-interface/pages/bridge/BridgeWatcher/BridgeEvent.tsx
deleted file mode 100644
index 87cb0bb049..0000000000
--- a/packages/synapse-interface/pages/bridge/BridgeWatcher/BridgeEvent.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import EventCard from './EventCard'
-import DestinationTx from './DestinationTx'
-import { BridgeWatcherTx } from '@types'
-import Link from 'next/link'
-import { EXPLORER_KAPPA } from '@urls'
-import { memo } from 'react'
-
-const BridgeEvent = memo((fromEvent: BridgeWatcherTx) => {
- // Saving Event Link for when indexing occurs faster
- const EventLink = (
-
-
- View on Explorer
- {' '}
-
- )
- return (
-
- {fromEvent?.toChainId && confirmationDelta > 0 && (
- <>
-
-
-
- )
-})
-export default BridgeEvent
diff --git a/packages/synapse-interface/pages/bridge/BridgeWatcher/DestinationTx.tsx b/packages/synapse-interface/pages/bridge/BridgeWatcher/DestinationTx.tsx
deleted file mode 100644
index de6f5087d8..0000000000
--- a/packages/synapse-interface/pages/bridge/BridgeWatcher/DestinationTx.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-import _ from 'lodash'
-import { useEffect, useState, memo, useMemo } from 'react'
-import { useWalletClient } from 'wagmi'
-import { fetchBlockNumber } from '@wagmi/core'
-import { Contract, Signer } from 'ethers'
-import { Interface } from '@ethersproject/abi'
-import {
- ChevronRightIcon,
- ChevronDoubleRightIcon,
-} from '@heroicons/react/outline'
-import { BridgeWatcherTx } from '@types'
-import { getNetworkTextColor } from '@/styles/chains'
-import SYNAPSE_BRIDGE_ABI from '@abis/synapseBridge.json'
-import { BRIDGE_CONTRACTS } from '@constants/bridge'
-import { CHAINS_BY_ID } from '@/constants/chains'
-import { GETLOGS_SIZE } from '@constants/bridgeWatcher'
-import { useSynapseContext } from '@/utils/providers/SynapseProvider'
-import {
- getLogs,
- getBlock,
- getTransactionReceipt,
- generateBridgeTx,
- checkTxIn,
-} from '@utils/bridgeWatcher'
-import { remove0xPrefix } from '@/utils/remove0xPrefix'
-import EventCard from './EventCard'
-import BlockCountdown from './BlockCountdown'
-import { CreditedTransactionItem } from '@components/TransactionItems'
-import { Address } from 'viem'
-import SYNAPSE_CCTP_ABI from '@abis/synapseCCTP.json'
-import { SYNAPSE_CCTP_CONTRACTS } from '@constants/bridge'
-
-const DestinationTx = (fromEvent: BridgeWatcherTx) => {
- const [toEvent, setToEvent] = useState
-
- {/* {EventLink} */}
-
- {fromEvent &&
-
- {fromEvent &&
-
-
- )
-}
-export default DestinationTx
diff --git a/packages/synapse-interface/pages/bridge/BridgeWatcher/EventCard.tsx b/packages/synapse-interface/pages/bridge/BridgeWatcher/EventCard.tsx
deleted file mode 100644
index 75e9f0eaa7..0000000000
--- a/packages/synapse-interface/pages/bridge/BridgeWatcher/EventCard.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { BridgeWatcherTx } from '@types'
-import { CHAINS_BY_ID } from '@constants/chains'
-import { ETH } from '@constants/tokens/bridgeable'
-import ExplorerLink from './ExplorerLink'
-import { getNetworkLinkTextColor } from '@styles/chains'
-import { AddToWalletMiniButton } from '@components/buttons/AddToWalletButton'
-import { getCoinTextColorCombined } from '@styles/tokens'
-import { memo } from 'react'
-import { formatTimestampToDate } from '@utils/time'
-import { commify, formatBigIntToString } from '@/utils/bigint/format'
-
-const EventCard = memo((event: BridgeWatcherTx) => {
- const chain = CHAINS_BY_ID[event.chainId]
- let showAddBtn
- if (event.token?.symbol == ETH.symbol) {
- showAddBtn = false
- } else {
- showAddBtn = true
- }
-
- return (
- <>
-
- {toEvent ? (
-
-
- {toEvent ? (
-
-
- ) : (
-
-
- )}
-
- {event?.timestamp && formatTimestampToDate(event.timestamp)}
-
-
-
-
- )
-})
-
-export default EventCard
diff --git a/packages/synapse-interface/pages/bridge/BridgeWatcher/ExplorerLink.tsx b/packages/synapse-interface/pages/bridge/BridgeWatcher/ExplorerLink.tsx
deleted file mode 100644
index 2e610abc26..0000000000
--- a/packages/synapse-interface/pages/bridge/BridgeWatcher/ExplorerLink.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { ExternalLinkIcon } from '@heroicons/react/outline'
-import { getExplorerTxUrl } from '@urls'
-
-const ExplorerLink = ({
- transactionHash,
- chainId,
- className,
- overrideExistingClassname = false,
- showIcon = false,
-}) => {
- const explorerTxUrl = getExplorerTxUrl({ hash: transactionHash, chainId })
- const len = transactionHash?.length
-
- return (
-
- {transactionHash?.slice(0, 6)}...{transactionHash?.slice(len - 4, len)}
- {showIcon &&
-
-
-
-
-
-
-
- {event && (
-
-
-
-
-
- {event?.amount
- ? commify(
- formatBigIntToString(
- BigInt(event.amount.toString()),
- event.token?.decimals[event.chainId],
- 8
- )
- )
- : '0'}
-
-
- {event.token && (
- <>
-
- {' '}
- {event.token.symbol}{' '}
-
- 
-
- )}
-
-
- {showAddBtn && event.isFrom && (
-
-
- {fromTransactions?.length > 0 && (
-
-
- {fromTransactions.map((fromEvent, i) => {
- return
-
- )}
-
- )
-}
-
-export default BridgeWatcher
diff --git a/packages/synapse-interface/pages/state-managed-bridge/index.tsx b/packages/synapse-interface/pages/state-managed-bridge/index.tsx
index f3a0aa165a..b5da17b74c 100644
--- a/packages/synapse-interface/pages/state-managed-bridge/index.tsx
+++ b/packages/synapse-interface/pages/state-managed-bridge/index.tsx
@@ -3,7 +3,6 @@ import { useSelector } from 'react-redux'
import { RootState } from '../../store/store'
import toast from 'react-hot-toast'
import { animated } from 'react-spring'
-import BridgeWatcher from '@/pages/bridge/BridgeWatcher'
import { useRouter } from 'next/router'
import { segmentAnalyticsEvent } from '@/contexts/SegmentAnalyticsProvider'
@@ -562,14 +561,6 @@ const StateManagedBridge = () => {
-
*/}
)
}
diff --git a/packages/synapse-interface/pages/swap/NoSwapCard.tsx b/packages/synapse-interface/pages/swap/NoSwapCard.tsx
deleted file mode 100644
index 0fcb7a59d9..0000000000
--- a/packages/synapse-interface/pages/swap/NoSwapCard.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import Card from '@tw/Card'
-import { CHAINS_BY_ID } from '@constants/chains'
-import { getNetworkTextColor } from '@styles/chains'
-import { useMemo } from 'react'
-
-const NoSwapCard = ({ chainId }: { chainId: number }) => {
- const chain = useMemo(() => CHAINS_BY_ID[chainId], [chainId])
- return (
-
- No swaps available on{' '}
-
- {chain?.name ?? 'current network'}
-
-
-
-
- )
-
- successPopup = toast.success(successToastContent, {
- id: 'swap-successful-popup',
- duration: 10000,
- })
-
- resetRates()
- return tx
- } catch (error) {
- toast.dismiss(pendingPopup)
- console.log(`Transaction failed with error: ${error}`)
- }
- } catch (error) {
- console.log(`Swap Execution failed with error: ${error}`)
- toast.dismiss(pendingPopup)
- txErrorHandler(error)
- }
- }
-
- const transitionProps = {
- ...COIN_SLIDE_OVER_PROPS,
- className: `
- origin-bottom absolute
- w-full h-full
- md:w-[95%] md:h-[95%]
- -ml-0 md:-ml-3
- bg-bgBase
- z-20 rounded-lg
- `,
- }
-
- const isFromBalanceEnough = fromTokenBalance >= fromInput.bigInt
- let destAddrNotValid: boolean
-
- const getButtonProperties = () => {
- let properties = {
- label: `Enter amount to swap`,
- pendingLabel: 'Swapping funds...',
- className: '',
- disabled: true,
- buttonAction: () => executeSwap(),
- postButtonAction: () => resetRates(),
- }
-
- const isInputZero = checkStringIfOnlyZeroes(fromInput?.string)
-
- if (error) {
- properties.label = error
- properties.disabled = true
- return properties
- }
-
- if (isInputZero || fromInput?.bigInt === 0n) {
- properties.label = `Enter amount to swap`
- properties.disabled = true
- return properties
- }
-
- if (!isFromBalanceEnough) {
- properties.label = `Insufficient ${fromToken.symbol} Balance`
- properties.disabled = true
- return properties
- }
-
- if (IMPAIRED_CHAINS[connectedChainId]?.disabled) {
- properties.label = `${CHAINS_BY_ID[connectedChainId]?.name} is currently paused`
- properties.disabled = true
- return properties
- }
-
- if (fromInput.bigInt === 0n) {
- properties.label = `Amount must be greater than fee`
- properties.disabled = true
- return properties
- }
-
- if (
- fromInput?.bigInt !== 0n &&
- fromToken?.addresses[connectedChainId] !== '' &&
- fromToken?.addresses[connectedChainId] !== zeroAddress &&
- !swapQuote?.allowance &&
- swapQuote?.allowance < fromInput.bigInt &&
- !approveTx
- ) {
- properties.buttonAction = () =>
- approveToken(
- swapQuote.routerAddress,
- connectedChainId,
- fromToken.addresses[connectedChainId],
- fromInput.bigInt
- )
- properties.label = `Approve ${fromToken.symbol}`
- properties.pendingLabel = `Approving ${fromToken.symbol}`
- properties.className = 'from-[#feba06] to-[#FEC737]'
- properties.disabled = false
- properties.postButtonAction = () => {
- setApproveTx('approved')
- }
- return properties
- }
-
- if (destinationAddress && !validateAndParseAddress(destinationAddress)) {
- destAddrNotValid = true
- properties.label = 'Invalid Destination Address'
- properties.disabled = true
- return properties
- }
-
- // default case
- properties.label = 'Swap your funds'
- properties.disabled = false
-
- const numExchangeRate = swapQuote?.exchangeRate
- ? Number(formatBigIntToString(swapQuote.exchangeRate, 18, 4))
- : 0
-
- if (
- fromInput.bigInt !== 0n &&
- numExchangeRate !== 0 &&
- (numExchangeRate < 0.95 || numExchangeRate > 1.05)
- ) {
- properties.className = 'from-[#fe064a] to-[#fe5281]'
- properties.label = 'Slippage High - Swap Anyway?'
- }
-
- return properties
- }
-
- const {
- label: btnLabel,
- pendingLabel,
- className: btnClassName,
- buttonAction,
- postButtonAction,
- disabled,
- } = useMemo(getButtonProperties, [
- isFromBalanceEnough,
- address,
- fromInput,
- fromToken,
- swapQuote,
- isQuoteLoading,
- destinationAddress,
- error,
- approveTx,
- ])
-
- const ActionButton = useMemo(() => {
- return (
-
- Successfully swapped from {fromToken.symbol} to {toToken.symbol}{' '}
- on {currentChainName}
-
-
-
-
-
-
-
-
-
-
-
-
- {ActionButton}
-
+
+ )
+
+ successPopup = toast.success(successToastContent, {
+ id: 'swap-successful-popup',
+ duration: 10000,
+ })
+
+ dispatch(setSwapQuote(EMPTY_SWAP_QUOTE_ZERO))
+ dispatch(updateSwapFromValue())
+ return tx
+ } catch (error) {
+ toast.dismiss(pendingPopup)
+ console.log(`Transaction failed with error: ${error}`)
+ }
+ } catch (error) {
+ console.log(`Swap Execution failed with error: ${error}`)
+ toast.dismiss(pendingPopup)
+ txErrorHandler(error)
+ }
+ }
+
+ const springClass =
+ '-mt-4 fixed z-50 w-full h-full bg-opacity-50 bg-[#343036]'
return (
+ Successfully swapped from {swapFromToken.symbol} to{' '}
+ {swapToToken.symbol} on {currentChainName}
+
+
-
+
+
-
-
+
+
+
-
+
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- {SWAPABLE_TOKENS[connectedChainId]?.length > 0 ? (
-
+