Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: Remove useArbTokenBridge from store #1479

Closed
Show file tree
Hide file tree
Changes from 39 commits
Commits
Show all changes
49 commits
Select commit Hold shift + click to select a range
1a053aa
Remove useArbTokenBridge from store
chrstph-dvx Jan 26, 2024
0e08dfd
Update syncers
chrstph-dvx Jan 26, 2024
14f7d20
Add useCallback to useArbTokenBridge, move addBridgeTokenListToBridge
chrstph-dvx Jan 26, 2024
955547e
Memoize useTransactions
chrstph-dvx Jan 26, 2024
2d39062
Fix typing
chrstph-dvx Jan 26, 2024
4ad3bb5
Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…
chrstph-dvx Jan 26, 2024
7dc7d8c
Reset useArbTokenBridge
chrstph-dvx Jan 29, 2024
4cf85e2
Add shared zustand store for bridgeTokens
chrstph-dvx Jan 29, 2024
c02f0e5
Replace params with useNetworks in useArbTokenBridge
chrstph-dvx Jan 29, 2024
a96c5a6
Add addBridgeTokenListToBridge to useArbTokenBridge
chrstph-dvx Jan 29, 2024
d2e4846
Move updateTokenData
chrstph-dvx Jan 29, 2024
1ffeabb
Move addToken
chrstph-dvx Jan 29, 2024
65583ee
Move addToExecutedMessagesCache
chrstph-dvx Jan 29, 2024
b87dc6f
Add useCallback for updateEthBalances
chrstph-dvx Jan 29, 2024
b4da51b
Add useCallback for useArbTokenBridge functions
chrstph-dvx Jan 29, 2024
207c6f9
Memoize returned object in useArbTokenBridge
chrstph-dvx Jan 29, 2024
8cef344
Remove unused import
chrstph-dvx Jan 29, 2024
aa1b575
Rework call to useArbTokenBridge
chrstph-dvx Jan 29, 2024
f2c7c82
Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…
chrstph-dvx Jan 30, 2024
59f56e4
Keep track of source/destination chain in state
chrstph-dvx Jan 30, 2024
5354099
Fix warning with missing autoresizer style
chrstph-dvx Jan 30, 2024
b6503cd
Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…
chrstph-dvx Jan 31, 2024
130e603
Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…
chrstph-dvx Feb 8, 2024
5576101
Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…
chrstph-dvx Feb 8, 2024
dcb5145
Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…
chrstph-dvx Feb 20, 2024
f96c6a7
Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…
chrstph-dvx Feb 27, 2024
22b6448
Remove ledger from yarn.lock
chrstph-dvx Feb 27, 2024
96e9124
Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…
chrstph-dvx Mar 20, 2024
0af6601
Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…
chrstph-dvx Jul 30, 2024
8be9478
fix import dialog
fionnachan Jul 31, 2024
cfcadf2
Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…
fionnachan Jul 31, 2024
5df85c3
Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…
chrstph-dvx Aug 1, 2024
801d145
Fix import token
chrstph-dvx Aug 1, 2024
38cf72a
Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…
chrstph-dvx Aug 2, 2024
d8e12da
Add missing hooks in App
chrstph-dvx Aug 2, 2024
3bd8a45
Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…
fionnachan Aug 2, 2024
303d33d
Remove connectionState
chrstph-dvx Aug 2, 2024
ce1ade6
Remove unused import
chrstph-dvx Aug 2, 2024
b868e0e
Add lost code after merge
chrstph-dvx Aug 2, 2024
a99a910
Remove commented code
chrstph-dvx Aug 5, 2024
fe8b01a
Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…
fionnachan Aug 6, 2024
7dd835d
Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…
chrstph-dvx Aug 14, 2024
24440ca
Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…
chrstph-dvx Aug 14, 2024
d915ff1
Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…
chrstph-dvx Aug 19, 2024
e52eebe
Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…
fionnachan Aug 30, 2024
396576e
Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…
chrstph-dvx Sep 9, 2024
04c22f8
Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…
chrstph-dvx Sep 9, 2024
d7a8593
Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…
chrstph-dvx Sep 9, 2024
30462e6
Remove extra token button
chrstph-dvx Sep 9, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 23 additions & 118 deletions packages/arb-token-bridge-ui/src/components/App/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,39 +9,36 @@ import {
useConnectModal
} from '@rainbow-me/rainbowkit'
import merge from 'lodash-es/merge'
import axios from 'axios'
import { createOvermind, Overmind } from 'overmind'
import { Provider } from 'overmind-react'
import { useInterval } from 'react-use'
import { useLocalStorage } from '@uidotdev/usehooks'

import { ConnectionState } from '../../util'
import { TokenBridgeParams } from '../../hooks/useArbTokenBridge'
import { WelcomeDialog } from './WelcomeDialog'
import { BlockedDialog } from './BlockedDialog'
import { AppContextProvider } from './AppContext'
import { config, useActions, useAppState } from '../../state'
import { config, useAppState } from '../../state'
import { MainContent } from '../MainContent/MainContent'
import { ArbTokenBridgeStoreSync } from '../syncers/ArbTokenBridgeStoreSync'
import { BalanceUpdater } from '../syncers/BalanceUpdater'
import { TokenListSyncer } from '../syncers/TokenListSyncer'
import { Header } from '../common/Header'
import { HeaderAccountPopover } from '../common/HeaderAccountPopover'
import { getNetworkName, isNetwork, rpcURLs } from '../../util/networks'
import { getNetworkName, rpcURLs } from '../../util/networks'
import {
ArbQueryParamProvider,
useArbQueryParams
} from '../../hooks/useArbQueryParams'
import { TOS_LOCALSTORAGE_KEY } from '../../constants'
import { getProps } from '../../util/wagmi/setup'
import { useAccountIsBlocked } from '../../hooks/useAccountIsBlocked'
import { useCCTPIsBlocked } from '../../hooks/CCTP/useCCTPIsBlocked'
import { useNativeCurrency } from '../../hooks/useNativeCurrency'
import { sanitizeQueryParams, useNetworks } from '../../hooks/useNetworks'
import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
import { HeaderConnectWalletButton } from '../common/HeaderConnectWalletButton'
import { ProviderName, trackEvent } from '../../util/AnalyticsUtils'
import { useArbTokenBridge } from '../../hooks/useArbTokenBridge'
import { onDisconnectHandler } from '../../util/walletConnectUtils'
import { addressIsSmartContract } from '../../util/AddressUtils'
import { useCCTPIsBlocked } from '../../hooks/CCTP/useCCTPIsBlocked'
import { useWarningTokensList } from '../../hooks/useWarningTokensList'

declare global {
interface Window {
Expand All @@ -58,113 +55,6 @@ const rainbowkitTheme = merge(darkTheme(), {
}
} as Theme)

const ArbTokenBridgeStoreSyncWrapper = (): JSX.Element | null => {
const actions = useActions()
const {
app: { selectedToken }
} = useAppState()
const [networks] = useNetworks()
const { childChain, childChainProvider, parentChain, parentChainProvider } =
useNetworksRelationship(networks)
const nativeCurrency = useNativeCurrency({ provider: childChainProvider })

// We want to be sure this fetch is completed by the time we open the USDC modals
useCCTPIsBlocked()

const [tokenBridgeParams, setTokenBridgeParams] =
useState<TokenBridgeParams | null>(null)

useEffect(() => {
if (!nativeCurrency.isCustom) {
return
}

const selectedTokenAddress = selectedToken?.address.toLowerCase()
const selectedTokenL2Address = selectedToken?.l2Address?.toLowerCase()
// This handles a super weird edge case where, for example:
//
// Your setup is: from Arbitrum One to Mainnet, and you have $ARB selected as the token you want to bridge over.
// You then switch your destination network to a network that has $ARB as its native currency.
// For this network, $ARB can only be bridged as the native currency, and not as a standard ERC-20, which is why we have to reset the selected token.
if (
selectedTokenAddress === nativeCurrency.address ||
selectedTokenL2Address === nativeCurrency.address
) {
actions.app.setSelectedToken(null)
}
}, [selectedToken, nativeCurrency])

// Listen for account and network changes
useEffect(() => {
// Any time one of those changes
setTokenBridgeParams(null)
actions.app.setConnectionState(ConnectionState.LOADING)

const {
isArbitrum: isConnectedToArbitrum,
isOrbitChain: isConnectedToOrbitChain
} = isNetwork(networks.sourceChain.id)
const isParentChainEthereum = isNetwork(
parentChain.id
).isEthereumMainnetOrTestnet

actions.app.reset(networks.sourceChain.id)
actions.app.setChainIds({
l1NetworkChainId: parentChain.id,
l2NetworkChainId: childChain.id
fionnachan marked this conversation as resolved.
Show resolved Hide resolved
})

if (
(isParentChainEthereum && isConnectedToArbitrum) ||
isConnectedToOrbitChain
) {
console.info('Withdrawal mode detected:')
actions.app.setConnectionState(ConnectionState.L2_CONNECTED)
} else {
console.info('Deposit mode detected:')
actions.app.setConnectionState(ConnectionState.L1_CONNECTED)
}

setTokenBridgeParams({
l1: {
network: parentChain,
provider: parentChainProvider
},
l2: {
network: childChain,
provider: childChainProvider
}
})
}, [
networks.sourceChain.id,
parentChain.id,
childChain.id,
parentChain,
childChain,
parentChainProvider,
childChainProvider
])

useEffect(() => {
axios
.get(
'https://raw.githubusercontent.com/OffchainLabs/arb-token-lists/aff40a59608678cfd9b034dd198011c90b65b8b6/src/WarningList/warningTokens.json'
)
.then(res => {
actions.app.setWarningTokens(res.data)
})
.catch(err => {
console.warn('Failed to fetch warning tokens:', err)
})
}, [])
chrstph-dvx marked this conversation as resolved.
Show resolved Hide resolved

if (!tokenBridgeParams) {
return null
}

return <ArbTokenBridgeStoreSync tokenBridgeParams={tokenBridgeParams} />
}

// connector names: https://github.com/wagmi-dev/wagmi/blob/b17c07443e407a695dfe9beced2148923b159315/docs/pages/core/connectors/_meta.en-US.json#L4
function getWalletName(connectorName: string): ProviderName {
switch (connectorName) {
Expand Down Expand Up @@ -203,6 +93,23 @@ function AppContent() {
const { isBlocked } = useAccountIsBlocked()
const [tosAccepted] = useLocalStorage<boolean>(TOS_LOCALSTORAGE_KEY, false)
const { openConnectModal } = useConnectModal()
const {
app: { selectedToken }
} = useAppState()
// We want to be sure this fetch is completed by the time we open the USDC modals
useCCTPIsBlocked()

useWarningTokensList()

const {
token: { updateTokenData }
} = useArbTokenBridge()

useInterval(() => {
if (selectedToken) {
updateTokenData(selectedToken.address)
}
}, 10_000)

useEffect(() => {
if (tosAccepted && !isConnected) {
Expand Down Expand Up @@ -280,8 +187,6 @@ function AppContent() {
<HeaderAccountPopover />
</Header>
<TokenListSyncer />
<BalanceUpdater />
<ArbTokenBridgeStoreSyncWrapper />
<MainContent />
</>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { ChevronDownIcon } from '@heroicons/react/24/outline'
import { twMerge } from 'tailwind-merge'

import { useAppState } from '../../state'
import { sanitizeImageSrc } from '../../util'
import { TokenSearch } from '../TransferPanel/TokenSearch'
import { sanitizeTokenSymbol } from '../../util/TokenUtils'
import { useNativeCurrency } from '../../hooks/useNativeCurrency'
Expand All @@ -19,40 +18,13 @@ import { Transition } from '../common/Transition'

export function TokenButton(): JSX.Element {
const {
app: {
selectedToken,
arbTokenBridge: { bridgeTokens },
arbTokenBridgeLoaded
}
app: { selectedToken }
} = useAppState()
const [networks] = useNetworks()
const { childChainProvider } = useNetworksRelationship(networks)

const nativeCurrency = useNativeCurrency({ provider: childChainProvider })

const tokenLogo = useMemo<string | undefined>(() => {
const selectedAddress = selectedToken?.address
if (!selectedAddress) {
return nativeCurrency.logoUrl
}
if (!arbTokenBridgeLoaded) {
return undefined
}
if (typeof bridgeTokens === 'undefined') {
return undefined
}
const logo = bridgeTokens[selectedAddress]?.logoURI
if (logo) {
return sanitizeImageSrc(logo)
}
return undefined
}, [
nativeCurrency,
bridgeTokens,
selectedToken?.address,
arbTokenBridgeLoaded
])
fionnachan marked this conversation as resolved.
Show resolved Hide resolved

const tokenSymbol = useMemo(() => {
if (!selectedToken) {
return nativeCurrency.symbol
Expand All @@ -75,18 +47,6 @@ export function TokenButton(): JSX.Element {
onClick={onPopoverButtonClick}
>
<div className="flex items-center gap-2">
{/* Commenting it out until we update the token image source files to be of better quality */}
{/* {tokenLogo && (
// SafeImage is used for token logo, we don't know at buildtime
where those images will be loaded from // It would throw error
if it's loaded from external domains // eslint-disable-next-line
@next/next/no-img-element
<img
src={tokenLogo}
alt="Token logo"
className="h-5 w-5 sm:h-7 sm:w-7"
/>
)} */}
<span className="text-xl font-light sm:text-3xl">
{tokenSymbol}
</span>
Expand Down
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useAppState is now an unused import

Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useLatest } from 'react-use'
import { create } from 'zustand'

import { useERC20L1Address } from '../../hooks/useERC20L1Address'
import { useActions, useAppState } from '../../state'
import { useActions } from '../../state'
import {
erc20DataToErc20BridgeToken,
fetchErc20Data,
Expand All @@ -20,6 +20,10 @@ import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
import { isWithdrawOnlyToken } from '../../util/WithdrawOnlyUtils'
import { isTransferDisabledToken } from '../../util/TokenTransferDisabledUtils'
import { useTransferDisabledDialogStore } from './TransferDisabledDialog'
import {
useArbTokenBridge,
useBridgeTokensStore
} from '../../hooks/useArbTokenBridge'
import { TokenInfo } from './TokenInfo'
import { NoteBox } from '../common/NoteBox'
import { isTeleportEnabledToken } from '../../util/TokenTeleportEnabledUtils'
Expand Down Expand Up @@ -65,12 +69,10 @@ export function TokenImportDialog({
tokenAddress
}: TokenImportDialogProps): JSX.Element {
const { address: walletAddress } = useAccount()
const { bridgeTokens } = useBridgeTokensStore()
const {
app: {
arbTokenBridge: { bridgeTokens, token },
selectedToken
}
} = useAppState()
token: { add: addToken, updateTokenData }
} = useArbTokenBridge()
const [networks] = useNetworks()
const {
childChain,
Expand Down Expand Up @@ -178,10 +180,10 @@ export function TokenImportDialog({

const selectToken = useCallback(
async (_token: ERC20BridgeToken) => {
await token.updateTokenData(_token.address)
await updateTokenData(_token.address)
actions.app.setSelectedToken(_token)
},
[token, actions]
[updateTokenData, actions]
)

useEffect(() => {
Expand Down Expand Up @@ -233,39 +235,8 @@ export function TokenImportDialog({
searchForTokenInLists
])

useEffect(() => {
if (!isOpen) {
return
}

if (isL1AddressLoading && !l1Address) {
return
}

const foundToken = tokensFromUser[l1Address || tokenAddress]

if (typeof foundToken === 'undefined') {
return
}

// Listen for the token to be added to the bridge so we can automatically select it
if (foundToken.address !== selectedToken?.address) {
onClose(true)
selectToken(foundToken)
}
}, [
isL1AddressLoading,
tokenAddress,
isOpen,
l1Address,
onClose,
selectToken,
selectedToken,
tokensFromUser
])

async function storeNewToken(newToken: string) {
return token.add(newToken).catch((ex: Error) => {
return addToken(newToken).catch((ex: Error) => {
setStatus(ImportStatus.ERROR)

if (ex.name === 'TokenDisabledError') {
Expand Down Expand Up @@ -295,9 +266,18 @@ export function TokenImportDialog({
selectToken(tokenToImport!)
} else {
// Token is not added to the bridge, so we add it
storeNewToken(l1Address).catch(() => {
setStatus(ImportStatus.ERROR)
})
addToken(l1Address)
.then(() => {
onClose(true)
selectToken(tokenToImport!)
})
.catch(ex => {
setStatus(ImportStatus.ERROR)

if (ex.name === 'TokenDisabledError') {
warningToast('This token is currently paused in the bridge')
}
})
}

// do not allow import of withdraw-only tokens at deposit mode
Expand Down
Loading
Loading