Merge remote-tracking branch 'origin/master' into abstract-hooks-from…

…-txpanel
OffchainLabs · Sep 3, 2024 · 2e28673 · 2e28673
2 parents 5ef62e1 + 59756ff
commit 2e28673
Show file tree

Hide file tree

Showing 43 changed files with 709 additions and 582 deletions.
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "lint": "yarn workspace arb-token-bridge-ui lint",
     "lint:fix": "yarn workspace arb-token-bridge-ui lint:fix",
     "test:e2e": "yarn workspace arb-token-bridge-ui env-cmd --silent --file .e2e.env yarn synpress run --configFile synpress.config.ts",
-    "test:e2e:cctp": "E2E_CCTP=true yarn test:e2e",
+    "test:e2e:cctp": "yarn test:e2e --configFile synpress.cctp.config.ts",
     "test:e2e:orbit": "E2E_ORBIT=true yarn test:e2e"
   },
   "resolutions": {

diff --git a/packages/arb-token-bridge-ui/.e2e.env.sample b/packages/arb-token-bridge-ui/.e2e.env.sample
@@ -12,6 +12,8 @@ CYPRESS_RECORD_VIDEO=false
 # Below key is only used to fund the newly created wallet
 PRIVATE_KEY_CUSTOM=b6b15c8cb491557369f3c7d2c287b053eb229daa9c22138887752191c9520659
 
+PRIVATE_KEY_CCTP=
+
 # We set up MetaMask ourselves
 SKIP_METAMASK_SETUP=true
 

diff --git a/...s/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTableDetailsSteps.tsx b/...s/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTableDetailsSteps.tsx
@@ -21,7 +21,7 @@ import { ExternalLink } from '../common/ExternalLink'
 import { TransferCountdown } from '../common/TransferCountdown'
 import { isDepositReadyToRedeem } from '../../state/app/utils'
 import { Address } from '../../util/AddressUtils'
-import { isTeleport } from '@/token-bridge-sdk/teleport'
+import { isTeleportTx } from '../../hooks/useTransactions'
 import {
   firstRetryableLegRequiresRedeem,
   secondRetryableLegForTeleportRequiresRedeem
@@ -31,7 +31,6 @@ import {
   minutesToHumanReadableTime,
   useTransferDuration
 } from '../../hooks/useTransferDuration'
-import { isTeleporterTransaction } from '../../hooks/useTransactions'
 
 function needsToClaimTransfer(tx: MergedTransaction) {
   return tx.isCctp || tx.isWithdrawal
@@ -119,7 +118,7 @@ const LastStepEndItem = ({
   const destinationChainId = tx.isWithdrawal
     ? tx.parentChainId
     : tx.childChainId
-  const isTeleportTx = isTeleport(tx) && isTeleporterTransaction(tx)
+  const isTeleport = isTeleportTx(tx)
 
   if (destinationNetworkTxId) {
     return (
@@ -134,8 +133,8 @@ const LastStepEndItem = ({
   }
 
   if (
-    (!isTeleportTx && isDepositReadyToRedeem(tx)) ||
-    (isTeleportTx && secondRetryableLegForTeleportRequiresRedeem(tx))
+    (!isTeleport && isDepositReadyToRedeem(tx)) ||
+    (isTeleport && secondRetryableLegForTeleportRequiresRedeem(tx))
   ) {
     return (
       <TransactionsTableRowAction
@@ -181,9 +180,9 @@ export const TransactionsTableDetailsSteps = ({
       tx.depositStatus
     )
 
-  const isTeleportTx = isTeleport(tx) && isTeleporterTransaction(tx)
+  const isTeleport = isTeleportTx(tx)
 
-  const isDestinationChainFailure = isTeleportTx
+  const isDestinationChainFailure = isTeleport
     ? secondRetryableLegForTeleportRequiresRedeem(tx)
     : !isSourceChainDepositFailure && isTxFailed(tx)
 
@@ -194,7 +193,7 @@ export const TransactionsTableDetailsSteps = ({
     if (isTxExpired(tx)) {
       return `Transaction expired on ${networkName}`
     }
-    if (isTeleportTx && firstRetryableLegRequiresRedeem(tx)) {
+    if (isTeleport && firstRetryableLegRequiresRedeem(tx)) {
       return fundsArrivedText
     }
 
@@ -205,7 +204,7 @@ export const TransactionsTableDetailsSteps = ({
       return `Transaction failed on ${networkName}.`
     }
     return fundsArrivedText
-  }, [tx, isDestinationChainFailure, isTeleportTx])
+  }, [tx, isDestinationChainFailure, isTeleport])
 
   return (
     <div className="flex flex-col text-xs">
@@ -226,7 +225,7 @@ export const TransactionsTableDetailsSteps = ({
       />
 
       {/* Pending transfer showing the remaining time */}
-      {!isTeleport(tx) && (
+      {!isTeleportTx(tx) && (
         <Step
           pending={isTxPending(tx)}
           done={!isTxPending(tx) && !isSourceChainDepositFailure}
@@ -241,7 +240,7 @@ export const TransactionsTableDetailsSteps = ({
         />
       )}
 
-      {isTeleport(tx) && isTeleporterTransaction(tx) && (
+      {isTeleportTx(tx) && (
         <TransactionsTableDetailsTeleporterSteps tx={tx} address={address} />
       )}
 

diff --git a/...ages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTableRowAction.tsx b/...ages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTableRowAction.tsx
@@ -19,7 +19,7 @@ import { useRedeemRetryable } from '../../hooks/useRedeemRetryable'
 import { TransferCountdown } from '../common/TransferCountdown'
 import { Address } from '../../util/AddressUtils'
 import { getChainIdForRedeemingRetryable } from '../../util/RetryableUtils'
-import { isTeleport } from '@/token-bridge-sdk/teleport'
+import { isTeleportTx } from '../../hooks/useTransactions'
 import { useRedeemTeleporter } from '../../hooks/useRedeemTeleporter'
 import { sanitizeTokenSymbol } from '../../util/TokenUtils'
 import { formatAmount } from '../../util/NumberUtils'
@@ -67,7 +67,7 @@ export function TransactionsTableRowAction({
         await switchNetworkAsync?.(chainIdForRedeemingRetryable)
       }
 
-      if (isTeleport(tx)) {
+      if (isTeleportTx(tx)) {
         await teleporterRedeem()
       } else {
         await redeem()

diff --git a/packages/arb-token-bridge-ui/src/components/TransactionHistory/helpers.ts b/packages/arb-token-bridge-ui/src/components/TransactionHistory/helpers.ts
@@ -25,11 +25,10 @@ import { AssetType } from '../../hooks/arbTokenBridge.types'
 import { getDepositStatus } from '../../state/app/utils'
 import { getBlockBeforeConfirmation } from '../../state/cctpState'
 import { getAttestationHashAndMessageFromReceipt } from '../../util/cctp/getAttestationHashAndMessageFromReceipt'
-import { isTeleport } from '@/token-bridge-sdk/teleport'
 import { getOutgoingMessageState } from '../../util/withdrawals/helpers'
 import { getUniqueIdOrHashFromEvent } from '../../hooks/useArbTokenBridge'
 import { getProviderForChainId } from '../../token-bridge-sdk/utils'
-import { isTeleporterTransaction } from '../../hooks/useTransactions'
+import { isTeleportTx } from '../../hooks/useTransactions'
 
 const PARENT_CHAIN_TX_DETAILS_OF_CLAIM_TX =
   'arbitrum:bridge:claim:parent:tx:details'
@@ -639,7 +638,7 @@ export function getDestinationNetworkTxId(tx: MergedTransaction) {
     return tx.cctpData?.receiveMessageTransactionHash
   }
 
-  if (isTeleport(tx) && isTeleporterTransaction(tx)) {
+  if (isTeleportTx(tx)) {
     return tx.l2ToL3MsgData?.l3TxID
   }
 

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx
@@ -213,6 +213,7 @@ export const AdvancedSettings = () => {
               onChange={e =>
                 setDestinationAddress(e.target.value?.toLowerCase().trim())
               }
+              aria-label="Custom Destination Address Input"
             />
             {isEOA && (
               <button

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
@@ -57,7 +57,7 @@ export function TokenButton({
         {({ open }) => (
           <>
             <Popover.Button
-              className="arb-hover h-full w-max rounded-bl rounded-tl px-3 py-3 text-white"
+              className="arb-hover h-full w-max rounded-bl rounded-tl px-3 pb-1 pt-2 text-white"
               aria-label="Select Token"
               onClick={onPopoverButtonClick}
               disabled={disabled}
@@ -75,9 +75,7 @@ export function TokenButton({
                     className="h-5 w-5 sm:h-7 sm:w-7"
                   />
                 )} */}
-                <span className="text-xl font-light sm:text-3xl">
-                  {tokenSymbol}
-                </span>
+                <span className="text-xl font-light">{tokenSymbol}</span>
                 {!disabled && (
                   <ChevronDownIcon
                     className={twMerge(
@@ -92,7 +90,7 @@ export function TokenButton({
             <Transition
               // we don't unmount on leave here because otherwise transition won't work with virtualized lists
               options={{ unmountOnLeave: false }}
-              className="fixed left-0 top-0 z-20 sm:absolute sm:top-[76px] sm:max-w-[466px]"
+              className="fixed right-0 top-0 z-20 sm:absolute sm:top-[76px] sm:max-w-[466px]"
               afterLeave={onPopoverClose}
             >
               <Popover.Panel

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx
@@ -27,7 +27,6 @@ import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { TransferDisabledDialog } from './TransferDisabledDialog'
 import { getBridgeUiConfigForChain } from '../../util/bridgeUiConfig'
 import { useUpdateUSDCTokenData } from './TransferPanelMain/hooks'
-import { Balances } from '../../hooks/TransferPanel/useSelectedTokenBalances'
 import { useBalances } from '../../hooks/useBalances'
 import { DestinationNetworkBox } from './TransferPanelMain/DestinationNetworkBox'
 import { SourceNetworkBox } from './TransferPanelMain/SourceNetworkBox'
@@ -268,13 +267,7 @@ export function TransferPanelMain() {
 
   const destinationAddressOrWalletAddress = destinationAddress || walletAddress
 
-  const {
-    ethParentBalance,
-    erc20ParentBalances,
-    updateErc20ParentBalances,
-    ethChildBalance,
-    updateErc20ChildBalances
-  } = useBalances()
+  const { updateErc20ParentBalances, updateErc20ChildBalances } = useBalances()
 
   const { updateUSDCBalances } = useUpdateUSDCBalances({
     walletAddress: destinationAddressOrWalletAddress
@@ -319,19 +312,6 @@ export function TransferPanelMain() {
     isTeleportMode
   ])
 
-  // TODO: move into a hook (FS-714)
-  // when customFeeTokenBalances is moved to an independent hook file, use `setAmount` directly in useMaxAmount and do not pass `customFeeTokenBalances` as a prop
-  const customFeeTokenBalances: Balances = useMemo(() => {
-    if (!nativeCurrency.isCustom) {
-      return { parentBalance: ethParentBalance, childBalance: ethChildBalance }
-    }
-
-    return {
-      parentBalance: erc20ParentBalances?.[nativeCurrency.address] ?? null,
-      childBalance: ethChildBalance
-    }
-  }, [nativeCurrency, ethParentBalance, ethChildBalance, erc20ParentBalances])
-
   const showUSDCSpecificInfo =
     !isTeleportMode &&
     ((isTokenMainnetUSDC(selectedToken?.address) && isArbitrumOne) ||
@@ -348,17 +328,11 @@ export function TransferPanelMain() {
 
   return (
     <div className="flex flex-col pb-6 lg:gap-y-1">
-      <SourceNetworkBox
-        customFeeTokenBalances={customFeeTokenBalances}
-        showUsdcSpecificInfo={showUSDCSpecificInfo}
-      />
+      <SourceNetworkBox showUsdcSpecificInfo={showUSDCSpecificInfo} />
 
       <SwitchNetworksButton />
 
-      <DestinationNetworkBox
-        customFeeTokenBalances={customFeeTokenBalances}
-        showUsdcSpecificInfo={showUSDCSpecificInfo}
-      />
+      <DestinationNetworkBox showUsdcSpecificInfo={showUSDCSpecificInfo} />
 
       <TransferDisabledDialog />
     </div>