Merge branch 'master' into dl/sx-confirm

OffchainLabs · Dec 19, 2024 · ca4fff2 · ca4fff2
2 parents 16a3d05 + b569ef1
commit ca4fff2
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 18 deletions.
diff --git a/...ages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTableRowAction.tsx b/...ages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTableRowAction.tsx
@@ -1,4 +1,6 @@
 import { useCallback } from 'react'
+import { useAccount, useNetwork } from 'wagmi'
+
 import { GET_HELP_LINK } from '../../constants'
 import { useClaimWithdrawal } from '../../hooks/useClaimWithdrawal'
 import { useClaimCctp } from '../../state/cctpState'
@@ -13,7 +15,6 @@ import { getNetworkName } from '../../util/networks'
 import { errorToast } from '../common/atoms/Toast'
 import { Button } from '../common/Button'
 import { useSwitchNetworkWithConfig } from '../../hooks/useSwitchNetworkWithConfig'
-import { useNetwork } from 'wagmi'
 import { isDepositReadyToRedeem } from '../../state/app/utils'
 import { useRedeemRetryable } from '../../hooks/useRedeemRetryable'
 import { TransferCountdown } from '../common/TransferCountdown'
@@ -23,6 +24,7 @@ import { useRedeemTeleporter } from '../../hooks/useRedeemTeleporter'
 import { sanitizeTokenSymbol } from '../../util/TokenUtils'
 import { formatAmount } from '../../util/NumberUtils'
 import { useTransactionHistoryAddressStore } from './TransactionHistorySearchBar'
+import { Tooltip } from '../common/Tooltip'
 
 export function TransactionsTableRowAction({
   tx,
@@ -33,10 +35,17 @@ export function TransactionsTableRowAction({
   isError: boolean
   type: 'deposits' | 'withdrawals'
 }) {
+  const { address: connectedAddress } = useAccount()
   const { chain } = useNetwork()
   const { switchNetworkAsync } = useSwitchNetworkWithConfig()
   const networkName = getNetworkName(chain?.id ?? 0)
-  const { sanitizedAddress } = useTransactionHistoryAddressStore()
+  const { sanitizedAddress: searchedAddress } =
+    useTransactionHistoryAddressStore()
+
+  const isViewingAnotherAddress =
+    connectedAddress &&
+    searchedAddress &&
+    connectedAddress.toLowerCase() !== searchedAddress.toLowerCase()
 
   const tokenSymbol = sanitizeTokenSymbol(tx.asset, {
     erc20L1Address: tx.tokenAddress,
@@ -47,10 +56,10 @@ export function TransactionsTableRowAction({
   const { claim: claimCctp, isClaiming: isClaimingCctp } = useClaimCctp(tx)
   const { redeem, isRedeeming: isRetryableRedeeming } = useRedeemRetryable(
     tx,
-    sanitizedAddress
+    searchedAddress
   )
   const { redeem: teleporterRedeem, isRedeeming: isTeleporterRedeeming } =
-    useRedeemTeleporter(tx, sanitizedAddress)
+    useRedeemTeleporter(tx, searchedAddress)
 
   const isRedeeming = isRetryableRedeeming || isTeleporterRedeeming
 
@@ -162,16 +171,25 @@ export function TransactionsTableRowAction({
     return isClaiming || isClaimingCctp ? (
       <span className="my-2 animate-pulse text-xs">Claiming...</span>
     ) : (
-      <Button
-        aria-label={`Claim ${formatAmount(Number(tx.value), {
-          symbol: tokenSymbol
-        })}`}
-        variant="primary"
-        className="w-14 rounded bg-green-400 p-2 text-xs text-black"
-        onClick={handleClaim}
+      <Tooltip
+        content={
+          <span>{`Funds will arrive at ${searchedAddress} on ${getNetworkName(
+            tx.destinationChainId
+          )} once the claim transaction succeeds.`}</span>
+        }
+        show={isViewingAnotherAddress}
       >
-        Claim
-      </Button>
+        <Button
+          aria-label={`Claim ${formatAmount(Number(tx.value), {
+            symbol: tokenSymbol
+          })}`}
+          variant="primary"
+          className="w-14 rounded bg-green-400 p-2 text-xs text-black"
+          onClick={handleClaim}
+        >
+          Claim
+        </Button>
+      </Tooltip>
     )
   }
 

diff --git a/packages/arb-token-bridge-ui/src/hooks/useClaimWithdrawal.ts b/packages/arb-token-bridge-ui/src/hooks/useClaimWithdrawal.ts
@@ -15,6 +15,7 @@ import { fetchErc20Data } from '../util/TokenUtils'
 import { fetchNativeCurrency } from './useNativeCurrency'
 import { getProviderForChainId } from '@/token-bridge-sdk/utils'
 import { captureSentryErrorWithExtraData } from '../util/SentryUtils'
+import { useTransactionHistoryAddressStore } from '../components/TransactionHistory/TransactionHistorySearchBar'
 
 export type UseClaimWithdrawalResult = {
   claim: () => Promise<void>
@@ -28,8 +29,11 @@ export function useClaimWithdrawal(
     app: { arbTokenBridge }
   } = useAppState()
   const { address } = useAccount()
+  const { sanitizedAddress } = useTransactionHistoryAddressStore()
   const { data: signer } = useSigner({ chainId: tx.parentChainId })
-  const { updatePendingTransaction } = useTransactionHistory(address)
+  const { updatePendingTransaction } = useTransactionHistory(
+    sanitizedAddress ?? address
+  )
   const [isClaiming, setIsClaiming] = useState(false)
 
   const claim = useCallback(async () => {

diff --git a/packages/arb-token-bridge-ui/src/util/wagmi/setup.ts b/packages/arb-token-bridge-ui/src/util/wagmi/setup.ts
@@ -148,14 +148,13 @@ export function getProps(targetChainKey: string | null) {
     chains
   })
 
+  wallets[0]?.wallets.push(okxWallet({ chains, projectId }))
+
   const connectors = connectorsForWallets([
     ...wallets,
     {
       groupName: 'More',
-      wallets: [
-        trustWallet({ chains, projectId }),
-        okxWallet({ chains, projectId })
-      ]
+      wallets: [trustWallet({ chains, projectId })]
     }
   ])