refactor(bridge-ui-v2): Add component CloseButton (#14914)

taikoxyz · Oct 16, 2023 · 624155c · 624155c
1 parent c0e6a17
commit 624155c
Show file tree

Hide file tree

Showing 10 changed files with 27 additions and 29 deletions.
diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
@@ -5,7 +5,7 @@
 
   import FlatAlert from '$components/Alert/FlatAlert.svelte';
   import { Button } from '$components/Button';
-  import { Icon } from '$components/Icon';
+  import { CloseButton } from '$components/CloseButton';
   import { InputBox } from '$components/InputBox';
   import { LoadingText } from '$components/LoadingText';
   import { Tooltip } from '$components/Tooltip';
@@ -157,9 +157,7 @@
 
   <dialog id={dialogId} class="modal" class:modal-open={modalOpen}>
     <div class="modal-box relative px-6 py-[35px] md:rounded-[20px] bg-neutral-background">
-      <button class="absolute right-6 top-[35px] z-50" on:click={cancelModal}>
-        <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
-      </button>
+      <CloseButton onClick={cancelModal} />
 
       <div class="w-full">
         <h3 class="title-body-bold mb-7">{$t('processing_fee.title')}</h3>

diff --git a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
@@ -4,7 +4,7 @@
   import type { Address } from 'viem';
 
   import { Button } from '$components/Button';
-  import { Icon } from '$components/Icon';
+  import { CloseButton } from '$components/CloseButton';
   import { Tooltip } from '$components/Tooltip';
   import { shortenAddress } from '$libs/util/shortenAddress';
   import { uid } from '$libs/util/uid';
@@ -109,9 +109,7 @@
 
   <dialog id={dialogId} class="modal" class:modal-open={modalOpen}>
     <div class="modal-box relative px-6 md:rounded-[20px] bg-neutral-background">
-      <button class="absolute right-6 z-50" on:click={closeModal}>
-        <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
-      </button>
+      <CloseButton onClick={closeModal} />
 
       <div class="w-full">
         <h3 class="title-body-bold mb-7">{$t('recipient.title')}</h3>

diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
@@ -6,7 +6,7 @@
   import { SwitchChainError, UserRejectedRequestError } from 'viem';
 
   import { chainConfig } from '$chainConfig';
-  import { Icon } from '$components/Icon';
+  import { CloseButton } from '$components/CloseButton';
   import { LoadingMask } from '$components/LoadingMask';
   import { warningToast } from '$components/NotificationToast';
   import { chains } from '$libs/chain';
@@ -148,9 +148,7 @@
         <LoadingMask spinnerClass="border-white" text={$t('messages.network.switching')} />
       {/if}
 
-      <button class="absolute right-6 top-[35px] md:top-[20px] z-50" on:click={closeModal}>
-        <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
-      </button>
+      <CloseButton onClick={closeModal} />
       <div class="w-full">
         <h3 class="title-body-bold mb-[20px]">
           {#if switchWallet}

diff --git a/packages/bridge-ui-v2/src/components/CloseButton/CloseButton.svelte b/packages/bridge-ui-v2/src/components/CloseButton/CloseButton.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { Icon } from '$components/Icon';
+
+  export let onClick: () => void;
+</script>
+
+<button class="absolute right-6 z-50" on:click={onClick}>
+  <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
+</button>
diff --git a/packages/bridge-ui-v2/src/components/CloseButton/index.ts b/packages/bridge-ui-v2/src/components/CloseButton/index.ts
@@ -0,0 +1 @@
+export { default as CloseButton } from './CloseButton.svelte';
diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte
@@ -8,6 +8,7 @@
   import { FlatAlert } from '$components/Alert';
   import AddressInput from '$components/Bridge/AddressInput/AddressInput.svelte';
   import { Button } from '$components/Button';
+  import { CloseButton } from '$components/CloseButton';
   import { Icon } from '$components/Icon';
   import Erc20 from '$components/Icon/ERC20.svelte';
   import { Spinner } from '$components/Spinner';
@@ -163,9 +164,7 @@
 
 <dialog id={dialogId} class="modal modal-bottom md:modal-middle" class:modal-open={modalOpen}>
   <div class="modal-box relative px-6 py-[35px] md:rounded-[20px] bg-neutral-background">
-    <button class="absolute right-6 top-[35px] z-50" on:click={closeModal}>
-      <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
-    </button>
+    <CloseButton onClick={closeModal} />
 
     <h3 class="title-body-bold mb-7">{$t('token_dropdown.custom_token.title')}</h3>
 

diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte
@@ -3,6 +3,7 @@
   import { t } from 'svelte-i18n';
   import type { Address } from 'viem';
 
+  import { CloseButton } from '$components/CloseButton';
   import { Icon } from '$components/Icon';
   import Erc20 from '$components/Icon/ERC20.svelte';
   import { OnAccount } from '$components/OnAccount';
@@ -58,9 +59,7 @@
 <!-- Mobile view -->
 <dialog {id} class="modal modal-bottom" class:modal-open={menuOpen}>
   <div class="modal-box relative px-6 py-[35px] w-full bg-neutral-background">
-    <button class="absolute right-6 top-[35px] z-50" on:click={closeMenu}>
-      <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
-    </button>
+    <CloseButton onClick={closeMenu} />
 
     <div class="w-full">
       <h3 class="title-body-bold mb-7">{$t('token_dropdown.label')}</h3>

diff --git a/packages/bridge-ui-v2/src/components/Transactions/InsufficientFunds.svelte b/packages/bridge-ui-v2/src/components/Transactions/InsufficientFunds.svelte
@@ -3,6 +3,7 @@
   import { t } from 'svelte-i18n';
 
   import { Button } from '$components/Button';
+  import { CloseButton } from '$components/CloseButton';
   import { Icon } from '$components/Icon';
   import { PUBLIC_GUIDE_URL } from '$env/static/public';
   import { uid } from '$libs/util/uid';
@@ -44,9 +45,7 @@
 
 <dialog id={dialogId} class="modal" class:modal-open={modalOpen}>
   <div class="modal-box relative px-6 py-[35px] md:rounded-[20px] bg-neutral-background">
-    <button class="absolute right-6 top-[35px] z-50" on:click={closeModal}>
-      <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
-    </button>
+    <CloseButton onClick={closeModal} />
     <div class="w-full space-y-6">
       <h3 class="title-body-bold mb-7">{$t('transactions.actions.claim.dialog.title')}</h3>
       <div class="body-regular text-secondary-content mb-3 flex flex-col items-end">

diff --git a/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte b/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte
@@ -4,6 +4,7 @@
   import { formatEther } from 'viem';
 
   import { chainConfig } from '$chainConfig';
+  import { CloseButton } from '$components/CloseButton';
   import { Icon } from '$components/Icon';
   import type { BridgeTransaction } from '$libs/bridge';
   import { noop } from '$libs/util/noop';
@@ -41,9 +42,7 @@
 <dialog id={dialogId} class="modal modal-bottom" class:modal-open={detailsOpen}>
   <div
     class="modal-box relative border border-neutral-background px-6 py-[30px] dark:glassy-gradient-card dark:glass-background-gradient">
-    <button class="absolute right-6 z-50" on:click={closeDetails}>
-      <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
-    </button>
+    <CloseButton onClick={closeDetails} />
 
     <h3 class="title-body-bold mb-7 text-primary-content">{$t('processing_fee.title')}</h3>
 

diff --git a/packages/bridge-ui-v2/src/components/Transactions/StatusInfoDialog.svelte b/packages/bridge-ui-v2/src/components/Transactions/StatusInfoDialog.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { t } from 'svelte-i18n';
 
+  import { CloseButton } from '$components/CloseButton';
   import { Icon } from '$components/Icon';
   import { uid } from '$libs/util/uid';
 
@@ -47,12 +48,9 @@
 
 <dialog id={dialogId} class="modal" class:modal-open={modalOpen}>
   <div
-    class="modal-box
- bg-neutral-background text-primary-content text-center max-w-[565px]">
+    class="modal-box bg-neutral-background text-primary-content text-center max-w-[565px]">
     <div class="w-full flex justify-end">
-      <button class="right-6 z-50" on:click={closeModal}>
-        <Icon type="x-close" fillClass="fill-primary-content" size={24} />
-      </button>
+      <CloseButton onClick={closeModal} />
     </div>
     <div class="w-full">
       <h1 class="title-body-bold">{$t('transactions.status.dialog.title')}</h1>