remove redundant uuid generation

KorbinianK · KorbinianK · commit c3f9dc6106b4 · 2024-07-03T01:12:36.000+02:00
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
@@ -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
@@ -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
     <button class="flex justify-start link" on:click={editTransactionDetails}> {$t('common.edit')} </button>
   </div>
   <Recipient bind:this={recipientComponent} small />
+  {#if $destOwnerAddress !== $account?.address && $destOwnerAddress}
+    <DestOwner bind:this={destOwnerComponent} small />
+  {/if}
   <ProcessingFee bind:this={processingFeeComponent} small bind:hasEnoughEth />
 </div>
 
diff --git 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
@@ -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
@@ -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 @@
   <!-- Input field and label -->
   <div class="f-between-center text-secondary-content">
     <label class="body-regular" for={inputId}>{labelText}</label>
+    {#if resettable}
+      <button class="link" on:click={setToCurrentAddress}>{$t('common.reset_to_wallet')}</button>
+    {/if}
   </div>
   <div class="relative f-items-center">
     <input
diff --git a/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/ProcessingFee/ProcessingFee.svelte
@@ -13,7 +13,6 @@
   import { closeOnEscapeOrOutsideClick } from '$libs/customActions';
   import { ProcessingFeeMethod } from '$libs/fee';
   import { parseToWei } from '$libs/util/parseToWei';
-  import { uid } from '$libs/util/uid';
 
   import NoneOption from './NoneOption.svelte';
   import RecommendedFee from './RecommendedFee.svelte';
@@ -23,7 +22,7 @@
   export let hasEnoughEth: boolean = false;
   export let disabled = false;
 
-  let dialogId = `dialog-${uid()}`;
+  let dialogId = `dialog-${crypto.randomUUID()}`;
 
   let recommendedAmount = BigInt(0);
   let errorCalculatingRecommendedAmount = false;
diff --git a/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/RecipientStep/RecipientStep.svelte b/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/RecipientStep/RecipientStep.svelte
@@ -4,7 +4,10 @@
   import { Alert } from '$components/Alert';
   import { ProcessingFee, Recipient } from '$components/Bridge/SharedBridgeComponents';
 
+  import DestOwner from './DestOwner.svelte';
+
   let recipientComponent: Recipient;
+  let destOwnerComponent: DestOwner;
   let processingFeeComponent: ProcessingFee;
 
   export let hasEnoughEth: boolean = false;
@@ -18,6 +21,7 @@
 
 <div class="mt-[30px] space-y-[16px]">
   <Recipient bind:this={recipientComponent} />
+  <DestOwner bind:this={destOwnerComponent} />
   <ProcessingFee bind:this={processingFeeComponent} bind:hasEnoughEth />
 </div>
 <div class="h-sep my-[30px]" />
diff --git 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<Chain> | 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
@@ -9,15 +9,14 @@
   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;
   export let value: Maybe<Chain> = null;
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/packages/bridge-ui/src/libs/util/uid.test.ts b/packages/bridge-ui/src/libs/util/uid.test.ts
diff --git a/packages/bridge-ui/src/libs/util/uid.ts b/packages/bridge-ui/src/libs/util/uid.ts
