Merge branch 'master' into clear-stale-pending-tx

packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react'
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'
+
+import { useAppState } from '../../state'
+import { useAccountType } from '../../hooks/useAccountType'
+
+export enum AdvancedSettingsErrors {
+  INVALID_ADDRESS = 'The destination address is not valid.'
+}
+
+export const AdvancedSettings = ({
+  destinationAddress = '',
+  onChange,
+  error
+}: {
+  destinationAddress?: string
+  onChange: (value?: string) => void
+  error: AdvancedSettingsErrors | null
+}) => {
+  const {
+    app: { selectedToken }
+  } = useAppState()
+  const { isEOA = false, isSmartContractWallet = false } = useAccountType()
+
+  const [collapsed, setCollapsed] = useState(true)
+
+  useEffect(
+    // Show on page load if SC wallet since destination address mandatory
+    () => setCollapsed(!isSmartContractWallet),
+    [isSmartContractWallet]
+  )
+
+  // Disabled for ETH
+  if (!selectedToken) {
+    return null
+  }
+
+  if (!isEOA && !isSmartContractWallet) {
+    return null
+  }
+
+  function handleVisibility() {
+    // Keep visible for SC wallets since destination address is mandatory
+    if (!isSmartContractWallet) {
+      setCollapsed(!collapsed)
+    }
+  }
+
+  return (
+    <div className="mt-6">
+      <button
+        onClick={handleVisibility}
+        className="flex flex-row items-center text-gray-dark"
+      >
+        <span className="text-lg font-semibold">Advanced Settings</span>
+        {collapsed ? (
+          <ChevronDownIcon className="ml-1 h-4 w-4" />
+        ) : (
+          <ChevronUpIcon className="ml-1 h-4 w-4" />
+        )}
+      </button>
+      {!collapsed && (
+        <>
+          <div className="mt-2">
+            <span className="text-md text-gray-dark">
+              Destination Address
+              {!isSmartContractWallet ? ' (optional)' : ''}
+            </span>
+            <input
+              className="mt-1 w-full rounded-lg border border-gray-dark px-2 py-1 shadow-input"
+              placeholder="Enter destination address"
+              defaultValue={destinationAddress}
+              spellCheck={false}
+              onChange={e => onChange(e.target.value?.toLowerCase())}
+            />
+          </div>
+        </>
+      )}
+      {isSmartContractWallet && error && (
+        <span className="text-xs text-red-400">{error}</span>
+      )}
+    </div>
+  )
+}

packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx

@@ -1,10 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { Listbox } from '@headlessui/react'
-import {
-  ChevronDownIcon,
-  ChevronUpIcon,
-  ArrowsUpDownIcon
-} from '@heroicons/react/24/outline'
+import { ChevronDownIcon, ArrowsUpDownIcon } from '@heroicons/react/24/outline'
 import { Loader } from '../common/atoms/Loader'
 import { twMerge } from 'tailwind-merge'
 import { BigNumber, constants, utils } from 'ethers'
@@ -25,6 +21,7 @@ import {
 } from '../../util/networks'
 import { getWagmiChain } from '../../util/wagmi/getWagmiChain'
 import { addressIsSmartContract } from '../../util/AddressUtils'
+import { AdvancedSettings, AdvancedSettingsErrors } from './AdvancedSettings'
 import { ExternalLink } from '../common/ExternalLink'
 import { Dialog, useDialog } from '../common/Dialog'
 import { Tooltip } from '../common/Tooltip'
@@ -63,10 +60,6 @@ export function SwitchNetworksButton(
   )
 }
 
-enum AdvancedSettingsErrors {
-  INVALID_ADDRESS = 'The destination address is not valid.'
-}
-
 type OptionsExtraProps = {
   disabled?: boolean
   disabledTooltip?: string
@@ -359,7 +352,6 @@ export function TransferPanelMain({
   const [to, setTo] = useState<Chain>(externalTo)
 
   const [loadingMaxAmount, setLoadingMaxAmount] = useState(false)
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false)
   const [advancedSettingsError, setAdvancedSettingsError] =
     useState<AdvancedSettingsErrors | null>(null)
   const [withdrawOnlyDialogProps, openWithdrawOnlyDialog] = useDialog()
@@ -469,12 +461,6 @@ export function TransferPanelMain({
     }
   }, [amount, isMaxAmount, setMaxAmount, setQueryParams])
 
-  useEffect(
-    // Show on page load if SC wallet since destination address mandatory
-    () => setShowAdvancedSettings(isSmartContractWallet),
-    [isSmartContractWallet]
-  )
-
   useEffect(() => {
     // Different destination address only allowed for tokens
     if (!selectedToken) {
@@ -851,55 +837,11 @@ export function TransferPanelMain({
         </NetworkListboxPlusBalancesContainer>
       </NetworkContainer>
 
-      {/* Only allow different destination address for tokens */}
-      {selectedToken && (
-        <div className="mt-6">
-          <button
-            onClick={() =>
-              // Keep visible for SC wallets since destination address is mandatory
-              !isSmartContractWallet &&
-              setShowAdvancedSettings(!showAdvancedSettings)
-            }
-            className="flex flex-row items-center text-gray-dark"
-          >
-            <span className="text-lg font-semibold">Advanced Settings</span>
-            {showAdvancedSettings ? (
-              <ChevronUpIcon className="ml-1 h-4 w-4" />
-            ) : (
-              <ChevronDownIcon className="ml-1 h-4 w-4" />
-            )}
-          </button>
-          {showAdvancedSettings && (
-            <>
-              <div className="mt-2">
-                <span className="text-md text-gray-dark">
-                  Destination Address
-                  {!isSmartContractWallet ? ' (optional)' : ''}
-                </span>
-                <input
-                  className="mt-1 w-full rounded-lg border border-gray-dark px-2 py-1 shadow-input"
-                  placeholder="Enter destination address"
-                  defaultValue={destinationAddress}
-                  spellCheck={false}
-                  onChange={e => {
-                    if (!e.target.value) {
-                      setDestinationAddress(undefined)
-                    } else {
-                      setDestinationAddress(e.target.value.toLowerCase())
-                    }
-                  }}
-                />
-              </div>
-            </>
-          )}
-          {isSmartContractWallet && advancedSettingsError && (
-            <span className="text-xs text-red-400">
-              {advancedSettingsError}
-            </span>
-          )}
-        </div>
-      )}
-
+      <AdvancedSettings
+        destinationAddress={destinationAddress}
+        onChange={value => setDestinationAddress(value)}
+        error={advancedSettingsError}
+      />
       <Dialog
         closeable
         title="Token not supported"

packages/arb-token-bridge-ui/tsconfig.json

@@ -11,10 +11,9 @@
     "noEmit": true,
     "incremental": true,
     "jsx": "preserve",
-    "baseUrl": ".",
     "paths": {
-      "@/images/*": ["public/images/*"],
-      "@/icons/*": ["public/icons/*"]
+      "@/images/*": ["./public/images/*"],
+      "@/icons/*": ["./public/icons/*"]
     }
   },
   "exclude": ["node_modules"]