From c3f9dc6106b45cdc78525fb106507f592f4626e2 Mon Sep 17 00:00:00 2001 From: Korbinian Date: Wed, 3 Jul 2024 01:12:36 +0200 Subject: [PATCH] remove redundant uuid generation --- .../ImportStep/TokenInput/TokenInput.svelte | 3 +-- .../ReviewStep/ReviewStep.svelte | 14 +++++++++++++- .../NFTBridgeComponents/IDInput/IDInput.svelte | 3 +-- .../ImportStep/TokenAmountInput.svelte | 3 +-- .../AddressInput/AddressInput.svelte | 15 ++++++++++++--- .../ProcessingFee/ProcessingFee.svelte | 3 +-- .../RecipientStep/RecipientStep.svelte | 4 ++++ .../ChainSelectors/ChainPill/ChainPill.svelte | 5 ++--- .../SelectorDialogs/ChainsDialog.svelte | 3 +-- .../Dialogs/ClaimDialog/ClaimDialog.svelte | 3 +-- .../Dialogs/ReleaseDialog/ReleaseDialog.svelte | 3 +-- .../Dialogs/RetryDialog/RetryDialog.svelte | 3 +-- .../src/components/NFTs/NFTInfoDialog.svelte | 3 +-- .../NotificationToast/NotificationToast.svelte | 3 +-- .../TokenDropdown/AddCustomERC20.svelte | 3 +-- .../components/TokenDropdown/TokenDropdown.svelte | 3 +-- .../src/components/Tooltip/Tooltip.svelte | 3 +-- .../Transactions/Filter/StatusFilterDialog.svelte | 3 +-- .../Filter/StatusFilterDropdown.svelte | 3 +-- .../Transactions/InsufficientFunds.svelte | 3 +-- .../Transactions/MobileDetailsDialog.svelte | 3 +-- .../Transactions/Status/StatusInfoDialog.svelte | 3 +-- packages/bridge-ui/src/libs/util/uid.test.ts | 14 -------------- packages/bridge-ui/src/libs/util/uid.ts | 3 --- 24 files changed, 49 insertions(+), 60 deletions(-) delete mode 100644 packages/bridge-ui/src/libs/util/uid.test.ts delete mode 100644 packages/bridge-ui/src/libs/util/uid.ts diff --git a/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/ImportStep/TokenInput/TokenInput.svelte b/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/ImportStep/TokenInput/TokenInput.svelte index 292ef2508de..58d641e62de 100644 --- a/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/ImportStep/TokenInput/TokenInput.svelte +++ b/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/ImportStep/TokenInput/TokenInput.svelte @@ -34,7 +34,6 @@ import { debounce } from '$libs/util/debounce'; import { getLogger } from '$libs/util/logger'; import { truncateDecimal } from '$libs/util/truncateDecimal'; - import { uid } from '$libs/util/uid'; import { account } from '$stores/account'; import { ethBalance } from '$stores/balance'; import { connectedSourceChain } from '$stores/network'; @@ -46,7 +45,7 @@ export let hasEnoughEth: boolean = false; export let exceedsQuota: boolean = false; - let inputId = `input-${uid()}`; + let inputId = `input-${crypto.randomUUID()}`; let inputBox: InputBox; let value = ''; diff --git a/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/ReviewStep/ReviewStep.svelte b/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/ReviewStep/ReviewStep.svelte index fcbdd59c266..fd325673f36 100644 --- a/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/ReviewStep/ReviewStep.svelte +++ b/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/ReviewStep/ReviewStep.svelte @@ -6,11 +6,19 @@ import { chainConfig } from '$chainConfig'; import { Alert } from '$components/Alert'; import { ProcessingFee, Recipient } from '$components/Bridge/SharedBridgeComponents'; - import { destNetwork as destChain, enteredAmount, processingFee, selectedToken } from '$components/Bridge/state'; + import DestOwner from '$components/Bridge/SharedBridgeComponents/RecipientStep/DestOwner.svelte'; + import { + destNetwork as destChain, + destOwnerAddress, + enteredAmount, + processingFee, + selectedToken, + } from '$components/Bridge/state'; import { PUBLIC_SLOW_L1_BRIDGING_WARNING } from '$env/static/public'; import { LayerType } from '$libs/chain'; import { isStablecoin, isSupported, isWrapped, type Token, TokenType } from '$libs/token'; import { isToken } from '$libs/token/isToken'; + import { account } from '$stores/account'; import { ethBalance } from '$stores/balance'; import { connectedSourceChain } from '$stores/network'; @@ -19,6 +27,7 @@ export let hasEnoughFundsToContinue: boolean = true; let recipientComponent: Recipient; + let destOwnerComponent: DestOwner; let processingFeeComponent: ProcessingFee; let slowL1Warning = PUBLIC_SLOW_L1_BRIDGING_WARNING || false; @@ -106,6 +115,9 @@ Recipient & Processing Fee + {#if $destOwnerAddress !== $account?.address && $destOwnerAddress} + + {/if} diff --git a/packages/bridge-ui/src/components/Bridge/NFTBridgeComponents/IDInput/IDInput.svelte b/packages/bridge-ui/src/components/Bridge/NFTBridgeComponents/IDInput/IDInput.svelte index af08bec130a..abaa0d41af3 100644 --- a/packages/bridge-ui/src/components/Bridge/NFTBridgeComponents/IDInput/IDInput.svelte +++ b/packages/bridge-ui/src/components/Bridge/NFTBridgeComponents/IDInput/IDInput.svelte @@ -4,7 +4,6 @@ import { Icon } from '$components/Icon'; import InputBox from '$components/InputBox/InputBox.svelte'; - import { uid } from '$libs/util/uid'; import { IDInputState as State } from './state'; @@ -24,7 +23,7 @@ const dispatch = createEventDispatcher(); - let inputId = `input-${uid()}`; + let inputId = `input-${crypto.randomUUID()}`; function validateInput(idInput: EventTarget | number[] | null = null) { state = State.VALIDATING; diff --git a/packages/bridge-ui/src/components/Bridge/NFTBridgeComponents/ImportStep/TokenAmountInput.svelte b/packages/bridge-ui/src/components/Bridge/NFTBridgeComponents/ImportStep/TokenAmountInput.svelte index e37cd4030ae..825ab3f7d72 100644 --- a/packages/bridge-ui/src/components/Bridge/NFTBridgeComponents/ImportStep/TokenAmountInput.svelte +++ b/packages/bridge-ui/src/components/Bridge/NFTBridgeComponents/ImportStep/TokenAmountInput.svelte @@ -10,7 +10,6 @@ import { ETHToken, fetchBalance, fetchBalance as getTokenBalance, TokenType } from '$libs/token'; import { debounce } from '$libs/util/debounce'; import { getLogger } from '$libs/util/logger'; - import { uid } from '$libs/util/uid'; import { account } from '$stores/account'; import { ethBalance } from '$stores/balance'; import { connectedSourceChain } from '$stores/network'; @@ -30,7 +29,7 @@ const log = getLogger('component:Amount'); - let inputId = `input-${uid()}`; + let inputId = `input-${crypto.randomUUID()}`; let inputBox: InputBox; let computingMaxAmount = false; let invalidInput = false; diff --git a/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/AddressInput/AddressInput.svelte b/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/AddressInput/AddressInput.svelte index 2caf25c2dbf..5379664965c 100644 --- a/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/AddressInput/AddressInput.svelte +++ b/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/AddressInput/AddressInput.svelte @@ -8,12 +8,12 @@ import { Icon } from '$components/Icon'; import { withHoverAndFocusListener } from '$libs/customActions'; import { classNames } from '$libs/util/classNames'; - import { uid } from '$libs/util/uid'; + import { account } from '$stores/account'; import { AddressInputState as State } from './state'; let inputElement: HTMLInputElement; - let inputId = `input-${uid()}`; + let inputId = `input-${crypto.randomUUID()}`; let isElementFocused = false; let isElementHovered = false; @@ -26,6 +26,7 @@ export let isDisabled = false; export let quiet = false; export let state: State = State.DEFAULT; + export let resettable = false; export let onDialog = false; @@ -52,7 +53,12 @@ if (inputElement) inputElement.value = ''; ethereumAddress = ''; state = State.DEFAULT; - // dispatch('clearInput'); + }; + + const setToCurrentAddress = (): void => { + clearAddress(); + ethereumAddress = $account?.address || ''; + validateAddress(); }; export const focus = (): void => inputElement.focus(); @@ -79,6 +85,9 @@
+ {#if resettable} + + {/if}
+
diff --git a/packages/bridge-ui/src/components/ChainSelectors/ChainPill/ChainPill.svelte b/packages/bridge-ui/src/components/ChainSelectors/ChainPill/ChainPill.svelte index e4a8e6f496c..6d2d882cba7 100644 --- a/packages/bridge-ui/src/components/ChainSelectors/ChainPill/ChainPill.svelte +++ b/packages/bridge-ui/src/components/ChainSelectors/ChainPill/ChainPill.svelte @@ -8,7 +8,6 @@ import { DesktopOrLarger } from '$components/DesktopOrLarger'; import { classNames } from '$libs/util/classNames'; import { truncateString } from '$libs/util/truncateString'; - import { uid } from '$libs/util/uid'; import { account } from '$stores'; export let value: Maybe | null = null; @@ -26,8 +25,8 @@ let iconSize = 'min-w-5 max-w-5 min-h-5 max-h-5'; - let buttonId = `button-${uid()}`; - let dialogId = `dialog-${uid()}`; + let buttonId = `button-${crypto.randomUUID()}`; + let dialogId = `dialog-${crypto.randomUUID()}`; let modalOpen = false; const handlePillClick = () => { diff --git a/packages/bridge-ui/src/components/ChainSelectors/SelectorDialogs/ChainsDialog.svelte b/packages/bridge-ui/src/components/ChainSelectors/SelectorDialogs/ChainsDialog.svelte index 6317de54fa3..126631bdc61 100644 --- a/packages/bridge-ui/src/components/ChainSelectors/SelectorDialogs/ChainsDialog.svelte +++ b/packages/bridge-ui/src/components/ChainSelectors/SelectorDialogs/ChainsDialog.svelte @@ -9,7 +9,6 @@ import { ActionButton } from '$components/Button'; import { chains } from '$libs/chain'; import { closeOnEscapeOrOutsideClick } from '$libs/customActions'; - import { uid } from '$libs/util/uid'; import { connectedSourceChain } from '$stores/network'; export let isOpen = false; @@ -17,7 +16,7 @@ export let switchWallet = false; let modalOpen = false; - const dialogId = `dialog-${uid()}`; + const dialogId = `dialog-${crypto.randomUUID()}`; const dispatch = createEventDispatcher(); diff --git a/packages/bridge-ui/src/components/Dialogs/ClaimDialog/ClaimDialog.svelte b/packages/bridge-ui/src/components/Dialogs/ClaimDialog/ClaimDialog.svelte index 146c838754f..649a5d42d56 100644 --- a/packages/bridge-ui/src/components/Dialogs/ClaimDialog/ClaimDialog.svelte +++ b/packages/bridge-ui/src/components/Dialogs/ClaimDialog/ClaimDialog.svelte @@ -24,7 +24,6 @@ } from '$libs/error'; import type { NFT } from '$libs/token'; import { getLogger } from '$libs/util/logger'; - import { uid } from '$libs/util/uid'; import { connectedSourceChain } from '$stores/network'; import { pendingTransactions } from '$stores/pendingTransactions'; @@ -37,7 +36,7 @@ const log = getLogger('ClaimDialog'); - const dialogId = `dialog-${uid()}`; + const dialogId = `dialog-${crypto.randomUUID()}`; const dispatch = createEventDispatcher(); export let dialogOpen = false; diff --git a/packages/bridge-ui/src/components/Dialogs/ReleaseDialog/ReleaseDialog.svelte b/packages/bridge-ui/src/components/Dialogs/ReleaseDialog/ReleaseDialog.svelte index bf461a0c193..b09be8da5e5 100644 --- a/packages/bridge-ui/src/components/Dialogs/ReleaseDialog/ReleaseDialog.svelte +++ b/packages/bridge-ui/src/components/Dialogs/ReleaseDialog/ReleaseDialog.svelte @@ -18,7 +18,6 @@ RetryError, } from '$libs/error'; import { getLogger } from '$libs/util/logger'; - import { uid } from '$libs/util/uid'; import { connectedSourceChain } from '$stores/network'; import { pendingTransactions } from '$stores/pendingTransactions'; @@ -32,7 +31,7 @@ const log = getLogger('ReleaseDialog'); - const dialogId = `dialog-${uid()}`; + const dialogId = `dialog-${crypto.randomUUID()}`; const dispatch = createEventDispatcher(); export let bridgeTx: BridgeTransaction; diff --git a/packages/bridge-ui/src/components/Dialogs/RetryDialog/RetryDialog.svelte b/packages/bridge-ui/src/components/Dialogs/RetryDialog/RetryDialog.svelte index 3a90c0a6624..ef60ee478be 100644 --- a/packages/bridge-ui/src/components/Dialogs/RetryDialog/RetryDialog.svelte +++ b/packages/bridge-ui/src/components/Dialogs/RetryDialog/RetryDialog.svelte @@ -12,7 +12,6 @@ import type { BridgeTransaction } from '$libs/bridge'; import { closeOnEscapeOrOutsideClick } from '$libs/customActions'; import { getLogger } from '$libs/util/logger'; - import { uid } from '$libs/util/uid'; import { pendingTransactions } from '$stores/pendingTransactions'; import Claim from '../Claim.svelte'; @@ -35,7 +34,7 @@ const log = getLogger('RetryDialog'); const dispatch = createEventDispatcher(); - const dialogId = `dialog-${uid()}`; + const dialogId = `dialog-${crypto.randomUUID()}`; let canContinue = false; let retrying: boolean; diff --git a/packages/bridge-ui/src/components/NFTs/NFTInfoDialog.svelte b/packages/bridge-ui/src/components/NFTs/NFTInfoDialog.svelte index 668e817aba4..d44164a01c8 100644 --- a/packages/bridge-ui/src/components/NFTs/NFTInfoDialog.svelte +++ b/packages/bridge-ui/src/components/NFTs/NFTInfoDialog.svelte @@ -11,10 +11,9 @@ import type { NFT } from '$libs/token'; import { getTokenAddresses } from '$libs/token/getTokenAddresses'; import { shortenAddress } from '$libs/util/shortenAddress'; - import { uid } from '$libs/util/uid'; import { connectedSourceChain } from '$stores/network'; - const dialogId = `dialog-${uid()}`; + const dialogId = `dialog-${crypto.randomUUID()}`; const placeholderUrl = '/placeholder.svg'; diff --git a/packages/bridge-ui/src/components/NotificationToast/NotificationToast.svelte b/packages/bridge-ui/src/components/NotificationToast/NotificationToast.svelte index 34e7f0c8f8c..ce60f9c22cb 100644 --- a/packages/bridge-ui/src/components/NotificationToast/NotificationToast.svelte +++ b/packages/bridge-ui/src/components/NotificationToast/NotificationToast.svelte @@ -2,7 +2,6 @@ import { toast } from '@zerodevx/svelte-toast'; import { toastConfig } from '$config'; - import { uid } from '$libs/util/uid'; import ItemToast from './ItemToast.svelte'; import type { TypeToast } from './types'; @@ -28,7 +27,7 @@ } export function notify(notificationType: NotificationType) { - const id = Number(uid()); + const id = Number(crypto.randomUUID()); const close = () => toast.pop(id); const { title, message, type = 'unknown', closeManually = getDefaultCloseBehaviour(type) } = notificationType; diff --git a/packages/bridge-ui/src/components/TokenDropdown/AddCustomERC20.svelte b/packages/bridge-ui/src/components/TokenDropdown/AddCustomERC20.svelte index e9fd7513766..9c72342e64a 100644 --- a/packages/bridge-ui/src/components/TokenDropdown/AddCustomERC20.svelte +++ b/packages/bridge-ui/src/components/TokenDropdown/AddCustomERC20.svelte @@ -17,7 +17,6 @@ import { getTokenAddresses } from '$libs/token/getTokenAddresses'; import { getTokenWithInfoFromAddress } from '$libs/token/getTokenWithInfoFromAddress'; import { getLogger } from '$libs/util/logger'; - import { uid } from '$libs/util/uid'; import { config } from '$libs/wagmi'; import { account } from '$stores/account'; import { connectedSourceChain } from '$stores/network'; @@ -27,7 +26,7 @@ const dispatch = createEventDispatcher(); const log = getLogger('component:AddCustomERC20'); - const dialogId = `dialog-${uid()}`; + const dialogId = `dialog-${crypto.randomUUID()}`; export let modalOpen = false; export let loadingTokenDetails = false; diff --git a/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte b/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte index a39082eba1f..27f734c21eb 100644 --- a/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte +++ b/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte @@ -22,7 +22,6 @@ import { getTokenAddresses } from '$libs/token/getTokenAddresses'; import { getLogger } from '$libs/util/logger'; import { truncateString } from '$libs/util/truncateString'; - import { uid } from '$libs/util/uid'; import { type Account, account } from '$stores/account'; import { connectedSourceChain } from '$stores/network'; @@ -44,7 +43,7 @@ let customTokenModalOpen = false; - let id = `menu-${uid()}`; + let id = `menu-${crypto.randomUUID()}`; $: menuOpen = false; let activeTab: TabTypes = TabTypes.TOKEN; diff --git a/packages/bridge-ui/src/components/Tooltip/Tooltip.svelte b/packages/bridge-ui/src/components/Tooltip/Tooltip.svelte index cf779ef53af..f69ca245731 100644 --- a/packages/bridge-ui/src/components/Tooltip/Tooltip.svelte +++ b/packages/bridge-ui/src/components/Tooltip/Tooltip.svelte @@ -4,12 +4,11 @@ import { Icon } from '$components/Icon'; import { classNames } from '$libs/util/classNames'; import { positionElementByTarget } from '$libs/util/positionElementByTarget'; - import { uid } from '$libs/util/uid'; export let position: Position = 'top'; export let tooltipOpen = false; - let tooltipId = `tooltip-${uid()}`; + let tooltipId = `tooltip-${crypto.randomUUID()}`; let tooltipClass = `block dialog-tooltip`; let classes = classNames('flex z-10 ', $$props.class || 'relative'); diff --git a/packages/bridge-ui/src/components/Transactions/Filter/StatusFilterDialog.svelte b/packages/bridge-ui/src/components/Transactions/Filter/StatusFilterDialog.svelte index b4a3827c85c..4ed183dd43c 100644 --- a/packages/bridge-ui/src/components/Transactions/Filter/StatusFilterDialog.svelte +++ b/packages/bridge-ui/src/components/Transactions/Filter/StatusFilterDialog.svelte @@ -3,11 +3,10 @@ import { ActionButton, CloseButton } from '$components/Button'; import { MessageStatus } from '$libs/bridge'; - import { uid } from '$libs/util/uid'; export let selectedStatus: MessageStatus | null = null; - let dialogId = `dialog-${uid()}`; + let dialogId = `dialog-${crypto.randomUUID()}`; export let menuOpen = false; diff --git a/packages/bridge-ui/src/components/Transactions/Filter/StatusFilterDropdown.svelte b/packages/bridge-ui/src/components/Transactions/Filter/StatusFilterDropdown.svelte index f2445651a8a..4faea34358e 100644 --- a/packages/bridge-ui/src/components/Transactions/Filter/StatusFilterDropdown.svelte +++ b/packages/bridge-ui/src/components/Transactions/Filter/StatusFilterDropdown.svelte @@ -5,13 +5,12 @@ import { MessageStatus } from '$libs/bridge'; import { closeOnEscapeOrOutsideClick } from '$libs/customActions'; import { classNames } from '$libs/util/classNames'; - import { uid } from '$libs/util/uid'; export let selectedStatus: MessageStatus | null = null; let flipped = false; let menuOpen = false; - let uuid = `dropdown-${uid()}`; + let uuid = `dropdown-${crypto.randomUUID()}`; let iconFlipperComponent: IconFlipper; diff --git a/packages/bridge-ui/src/components/Transactions/InsufficientFunds.svelte b/packages/bridge-ui/src/components/Transactions/InsufficientFunds.svelte index 8e78a5189be..afcd8c4f201 100644 --- a/packages/bridge-ui/src/components/Transactions/InsufficientFunds.svelte +++ b/packages/bridge-ui/src/components/Transactions/InsufficientFunds.svelte @@ -5,11 +5,10 @@ import { Icon } from '$components/Icon'; import { PUBLIC_GUIDE_URL } from '$env/static/public'; import { closeOnEscapeOrOutsideClick } from '$libs/customActions'; - import { uid } from '$libs/util/uid'; export let modalOpen = false; - let dialogId = `dialog-${uid()}`; + let dialogId = `dialog-${crypto.randomUUID()}`; function closeModal() { modalOpen = false; diff --git a/packages/bridge-ui/src/components/Transactions/MobileDetailsDialog.svelte b/packages/bridge-ui/src/components/Transactions/MobileDetailsDialog.svelte index 6968d9431a4..e07aaaadb03 100644 --- a/packages/bridge-ui/src/components/Transactions/MobileDetailsDialog.svelte +++ b/packages/bridge-ui/src/components/Transactions/MobileDetailsDialog.svelte @@ -13,7 +13,6 @@ import { getTokenAddresses } from '$libs/token/getTokenAddresses'; import { noop } from '$libs/util/noop'; import { shortenAddress } from '$libs/util/shortenAddress'; - import { uid } from '$libs/util/uid'; import { connectedSourceChain } from '$stores/network'; import ChainSymbolName from './ChainSymbolName.svelte'; @@ -34,7 +33,7 @@ const openToolTip = () => { tooltipOpen = !tooltipOpen; }; - let dialogId = `dialog-${uid()}`; + let dialogId = `dialog-${crypto.randomUUID()}`; const handleStatusDialog = () => { openStatusDialog = !openStatusDialog; diff --git a/packages/bridge-ui/src/components/Transactions/Status/StatusInfoDialog.svelte b/packages/bridge-ui/src/components/Transactions/Status/StatusInfoDialog.svelte index 3dc7f7245b5..672480a605e 100644 --- a/packages/bridge-ui/src/components/Transactions/Status/StatusInfoDialog.svelte +++ b/packages/bridge-ui/src/components/Transactions/Status/StatusInfoDialog.svelte @@ -3,13 +3,12 @@ import { CloseButton } from '$components/Button'; import { Icon } from '$components/Icon'; - import { uid } from '$libs/util/uid'; export let modalOpen = false; export let noIcon = false; - const dialogId = `dialog-${uid()}`; + const dialogId = `dialog-${crypto.randomUUID()}`; const closeModal = () => (modalOpen = false); diff --git a/packages/bridge-ui/src/libs/util/uid.test.ts b/packages/bridge-ui/src/libs/util/uid.test.ts deleted file mode 100644 index 44ee4aa327e..00000000000 --- a/packages/bridge-ui/src/libs/util/uid.test.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { uid } from './uid'; - -describe('uid', () => { - it('should always return a unique id', () => { - const generatedIds = new Set(); - - // Is this unique enough? 😅 - for (let i = 0; i < 1000; i++) { - generatedIds.add(uid()); - } - - expect(generatedIds.size).toBe(1000); - }); -}); diff --git a/packages/bridge-ui/src/libs/util/uid.ts b/packages/bridge-ui/src/libs/util/uid.ts deleted file mode 100644 index 62cb3175f16..00000000000 --- a/packages/bridge-ui/src/libs/util/uid.ts +++ /dev/null @@ -1,3 +0,0 @@ -export function uid() { - return Math.floor(Math.random() * Date.now()).toString(16); -}