From e53823ad0917a35a7f6c0f4c24ce417afffae285 Mon Sep 17 00:00:00 2001 From: Bartek Date: Tue, 6 Jun 2023 17:00:46 +0200 Subject: [PATCH 1/2] refactor: move `AdvancedSettings` to its own file (#926) --- .../TransferPanel/AdvancedSettings.tsx | 84 +++++++++++++++++++ .../TransferPanel/TransferPanelMain.tsx | 72 ++-------------- 2 files changed, 91 insertions(+), 65 deletions(-) create mode 100644 packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx new file mode 100644 index 0000000000..1abe7d4fca --- /dev/null +++ b/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 ( +
+ + {!collapsed && ( + <> +
+ + Destination Address + {!isSmartContractWallet ? ' (optional)' : ''} + + onChange(e.target.value?.toLowerCase())} + /> +
+ + )} + {isSmartContractWallet && error && ( + {error} + )} +
+ ) +} diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx index 029cbc96e6..ff73732a3b 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx +++ b/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(externalTo) const [loadingMaxAmount, setLoadingMaxAmount] = useState(false) - const [showAdvancedSettings, setShowAdvancedSettings] = useState(false) const [advancedSettingsError, setAdvancedSettingsError] = useState(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({ - {/* Only allow different destination address for tokens */} - {selectedToken && ( -
- - {showAdvancedSettings && ( - <> -
- - Destination Address - {!isSmartContractWallet ? ' (optional)' : ''} - - { - if (!e.target.value) { - setDestinationAddress(undefined) - } else { - setDestinationAddress(e.target.value.toLowerCase()) - } - }} - /> -
- - )} - {isSmartContractWallet && advancedSettingsError && ( - - {advancedSettingsError} - - )} -
- )} - + setDestinationAddress(value)} + error={advancedSettingsError} + /> Date: Wed, 7 Jun 2023 09:39:32 +0100 Subject: [PATCH 2/2] chore: remove `baseUrl` from `tsconfig.json` (#915) Co-authored-by: spsjvc --- packages/arb-token-bridge-ui/tsconfig.json | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/arb-token-bridge-ui/tsconfig.json b/packages/arb-token-bridge-ui/tsconfig.json index 6f6e0a1903..52e6ebc46f 100644 --- a/packages/arb-token-bridge-ui/tsconfig.json +++ b/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"]