From bf2379193e305fd3674bf601a672ab24ea674698 Mon Sep 17 00:00:00 2001
From: Korbinian Kasberger <korbi@taiko.xyz>
Date: Thu, 7 Sep 2023 14:27:14 +0200
Subject: [PATCH 1/8] disabled buttons now have a border

---
 packages/bridge-ui-v2/src/components/Button/Button.svelte | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/bridge-ui-v2/src/components/Button/Button.svelte b/packages/bridge-ui-v2/src/components/Button/Button.svelte
index b93c011bb4..ff10e9bfff 100644
--- a/packages/bridge-ui-v2/src/components/Button/Button.svelte
+++ b/packages/bridge-ui-v2/src/components/Button/Button.svelte
@@ -21,6 +21,7 @@
   export let outline = false;
   export let block = false;
   export let wide = false;
+  export let disabled = false;
 
   // Remember, with Tailwind's classes you cannot use string interpolation: `btn-${type}`.
   // The whole class name must appear in the code in order for Tailwind compiler to know
@@ -45,7 +46,7 @@
   };
 
   $: classes = classNames(
-    'btn h-auto min-h-fit border-0',
+    'btn h-auto min-h-fit ',
 
     type === 'primary' ? 'body-bold' : 'body-regular',
 
@@ -60,6 +61,8 @@
     // since we're showing some important information.
     loading ? 'btn-disabled !text-primary-content' : null,
 
+    disabled ? 'border-1 border-primary-border' : 'border-0',
+
     $$props.class,
   );
 
@@ -69,7 +72,7 @@
   }
 </script>
 
-<button {...$$restProps} class={classes} on:click>
+<button {...$$restProps} {disabled} class={classes} on:click>
   {#if loading}
     <Spinner />
   {/if}

From 408d75f67cd7ddca572e6eb5eb7996dbbc3906b2 Mon Sep 17 00:00:00 2001
From: Korbinian Kasberger <korbi@taiko.xyz>
Date: Thu, 7 Sep 2023 14:27:31 +0200
Subject: [PATCH 2/8] fix mobile token dropdown

---
 .../src/components/TokenDropdown/AddCustomERC20.svelte          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte
index d20e8f779a..63c948e569 100644
--- a/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte
+++ b/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte
@@ -169,7 +169,7 @@
     <h3 class="title-body-bold mb-7">{$t('token_dropdown.custom_token.title')}</h3>
 
     <p class="body-regular text-secondary-content mb-3">{$t('token_dropdown.custom_token.description')}</p>
-    <div class="mt-4 mb-2">
+    <div class="mt-4 mb-2 w-full">
       <AddressInput bind:ethereumAddress={tokenAddress} on:addressvalidation={onAddressValidation} />
       {#if tokenDetails}
         <div class="w-full flex items-center justify-between">

From aad93439c915273e9fb38a4635da6261d5241075 Mon Sep 17 00:00:00 2001
From: Korbinian Kasberger <korbi@taiko.xyz>
Date: Thu, 7 Sep 2023 14:27:56 +0200
Subject: [PATCH 3/8] remove duplicate css, fix border color

---
 packages/bridge-ui-v2/src/styles/base.css       | 3 ---
 packages/bridge-ui-v2/src/styles/components.css | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/bridge-ui-v2/src/styles/base.css b/packages/bridge-ui-v2/src/styles/base.css
index 0956774586..fa34583c77 100644
--- a/packages/bridge-ui-v2/src/styles/base.css
+++ b/packages/bridge-ui-v2/src/styles/base.css
@@ -37,9 +37,6 @@
     z-index: -1;
   }
 
-  input {
-    border: 1px solid var(--border-dark-primary, #5d636f);
-  }
 
   @media (min-width: 768px) {
     body::before {
diff --git a/packages/bridge-ui-v2/src/styles/components.css b/packages/bridge-ui-v2/src/styles/components.css
index 631299df9f..f15cb48d36 100644
--- a/packages/bridge-ui-v2/src/styles/components.css
+++ b/packages/bridge-ui-v2/src/styles/components.css
@@ -181,7 +181,7 @@
   }
 
   input {
-    border: 1px solid var(--border-dark-primary, #5d636f);
+    border: 1px solid var(--primary-border);
   }
 
   h1 {

From 9d122a55fa4cf110f08a9f019ab01a4ea97e3b3c Mon Sep 17 00:00:00 2001
From: Korbinian Kasberger <korbi@taiko.xyz>
Date: Thu, 7 Sep 2023 14:30:24 +0200
Subject: [PATCH 4/8] mobile token dropdown width

---
 .../TokenDropdown/DialogView.svelte           | 104 +++++++++---------
 1 file changed, 51 insertions(+), 53 deletions(-)

diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte
index edf4e1167e..d6cd773bdd 100644
--- a/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte
+++ b/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte
@@ -24,10 +24,8 @@
   export let selectToken: (token: Token) => void = noop;
   export let closeMenu: () => void = noop;
 
-  const dispatch = createEventDispatcher();
-
   const showAddERC20 = () => {
-    dispatch('closemenu');
+    menuOpen = false;
     modalOpen = true;
   };
 
@@ -49,73 +47,73 @@
     };
   };
 
-  onMount(() => {
-    tokenService.subscribeToChanges(handleStorageChange);
-  });
+  onMount(() => tokenService.subscribeToChanges(handleStorageChange));
 
   onDestroy(() => tokenService.unsubscribeFromChanges(handleStorageChange));
 </script>
 
 <!-- Mobile view -->
 <dialog {id} class="modal modal-bottom" class:modal-open={menuOpen}>
-  <div class="modal-box relative px-6 py-[35px] bg-neutral-background">
+  <div class="modal-box relative px-6 py-[35px] w-full bg-neutral-background">
     <button class="absolute right-6 top-[35px]" on:click={closeMenu}>
       <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
     </button>
 
-    <h3 class="title-body-bold mb-7">{$t('token_dropdown.label')}</h3>
+    <div class="w-full">
+      <h3 class="title-body-bold mb-7">{$t('token_dropdown.label')}</h3>
 
-    <ul role="listbox" class="menu p-0 bg-neutral-background box-shadow-small">
-      {#each tokens as token (token.symbol)}
-        {@const selected = token === value}
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <li
-          role="option"
-          tabindex="0"
-          aria-selected={selected}
-          class="rounded-[10px]"
-          class:bg-tertiary-interactive-accent={selected}
-          on:click={() => selectToken(token)}>
-          <div class="p-4">
-            <i role="img" aria-label={token.name}>
-              <svelte:component this={symbolToIconMap[token.symbol]} />
-            </i>
-            <span class="body-bold">{token.symbol}</span>
-          </div>
-        </li>
-      {/each}
-      {#each customTokens as token, index (index)}
-        <li
-          role="option"
-          tabindex="0"
-          aria-selected={token === value}
-          on:click={() => selectToken(token)}
-          on:keydown={getTokenKeydownHandler(token)}>
-          <div class="p-4">
-            <i role="img" aria-label={token.name}>
-              <Erc20 />
-            </i>
-            <span class="body-bold">{token.symbol}</span>
-          </div>
-        </li>
-      {/each}
-      <div class="h-sep" />
-      <li>
-        <button on:click={showAddERC20} class="flex hover:bg-dark-5 justify-center items-center p-4 rounded-sm">
-          <Icon type="plus-circle" fillClass="fill-primary-icon" size={20} vWidth={30} vHeight={30} />
-          <span
-            class="
+      <ul role="listbox" class="menu p-0">
+        {#each tokens as token (token.symbol)}
+          {@const selected = token === value}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <li
+            role="option"
+            tabindex="0"
+            aria-selected={selected}
+            class="rounded-[10px]"
+            class:bg-tertiary-interactive-accent={selected}
+            on:click={() => selectToken(token)}>
+            <div class="p-4">
+              <i role="img" aria-label={token.name}>
+                <svelte:component this={symbolToIconMap[token.symbol]} />
+              </i>
+              <span class="body-bold">{token.symbol}</span>
+            </div>
+          </li>
+        {/each}
+        {#each customTokens as token, index (index)}
+          <li
+            role="option"
+            tabindex="0"
+            aria-selected={token === value}
+            on:click={() => selectToken(token)}
+            on:keydown={getTokenKeydownHandler(token)}>
+            <div class="p-4">
+              <i role="img" aria-label={token.name}>
+                <Erc20 />
+              </i>
+              <span class="body-bold">{token.symbol}</span>
+            </div>
+          </li>
+        {/each}
+        <div class="h-sep" />
+        <li>
+          <button on:click={showAddERC20} class="flex hover:bg-dark-5 justify-center items-center p-4 rounded-sm">
+            <Icon type="plus-circle" fillClass="fill-primary-icon" size={20} vWidth={30} vHeight={30} />
+            <span
+              class="
             body-bold
             bg-transparent
             flex-1
             w-[100px]
             px-0
             pl-2">
-            {$t('token_dropdown.add_custom')}
-          </span>
-        </button>
-      </li>
-    </ul>
+              {$t('token_dropdown.add_custom')}
+            </span>
+          </button>
+        </li>
+      </ul>
+    </div>
   </div>
 </dialog>
 

From a0667f5bd1d7e5bc7582bc9d6bcd2835a1dfa0a5 Mon Sep 17 00:00:00 2001
From: Korbinian Kasberger <korbi@taiko.xyz>
Date: Thu, 7 Sep 2023 14:42:22 +0200
Subject: [PATCH 5/8] recipient and processing fee dialogs

---
 .../Bridge/ProcessingFee/ProcessingFee.svelte | 176 +++++++++---------
 .../src/components/Bridge/Recipient.svelte    |  52 +++---
 2 files changed, 116 insertions(+), 112 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
index 5b5295cbf6..920b6777cd 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
@@ -142,105 +142,107 @@
         <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
       </button>
 
-      <h3 class="title-body-bold mb-7">{$t('processing_fee.title')}</h3>
-
-      <p class="body-regular text-secondary-content mb-3">{$t('processing_fee.description')}</p>
-
-      <ul class="space-y-7">
-        <!-- RECOMMENDED -->
-        <li class="f-between-center">
-          <div class="f-col">
-            <label for="input-recommended" class="body-bold">
-              {$t('processing_fee.recommended.label')}
-            </label>
-            <span class="body-small-regular text-secondary-content">
-              <!-- TODO: think about the UI for this part. Talk to Jane -->
-              {#if calculatingRecommendedAmount}
-                <LoadingText mask="0.0001" /> ETH
-              {:else if errorCalculatingRecommendedAmount}
-                {$t('processing_fee.recommended.error')}
-              {:else}
-                {formatEther(recommendedAmount)} ETH
-              {/if}
-            </span>
-          </div>
-          <input
-            id="input-recommended"
-            class="radio w-6 h-6 checked:bg-primary-interactive-accent hover:border-primary-interactive-hover"
-            type="radio"
-            value={ProcessingFeeMethod.RECOMMENDED}
-            name="processingFeeMethod"
-            bind:group={selectedFeeMethod} />
-        </li>
-
-        <!-- NONE -->
-        <li class="space-y-2">
-          <div class="f-between-center">
+      <div class="w-full">
+        <h3 class="title-body-bold mb-7">{$t('processing_fee.title')}</h3>
+
+        <p class="body-regular text-secondary-content mb-3">{$t('processing_fee.description')}</p>
+
+        <ul class="space-y-7">
+          <!-- RECOMMENDED -->
+          <li class="f-between-center">
             <div class="f-col">
-              <label for="input-none" class="body-bold">
-                {$t('processing_fee.none.label')}
+              <label for="input-recommended" class="body-bold">
+                {$t('processing_fee.recommended.label')}
               </label>
               <span class="body-small-regular text-secondary-content">
-                {$t('processing_fee.none.text')}
+                <!-- TODO: think about the UI for this part. Talk to Jane -->
+                {#if calculatingRecommendedAmount}
+                  <LoadingText mask="0.0001" /> ETH
+                {:else if errorCalculatingRecommendedAmount}
+                  {$t('processing_fee.recommended.error')}
+                {:else}
+                  {formatEther(recommendedAmount)} ETH
+                {/if}
               </span>
             </div>
             <input
-              id="input-none"
+              id="input-recommended"
               class="radio w-6 h-6 checked:bg-primary-interactive-accent hover:border-primary-interactive-hover"
               type="radio"
-              disabled={!hasEnoughEth}
-              value={ProcessingFeeMethod.NONE}
+              value={ProcessingFeeMethod.RECOMMENDED}
               name="processingFeeMethod"
               bind:group={selectedFeeMethod} />
-          </div>
+          </li>
+
+          <!-- NONE -->
+          <li class="space-y-2">
+            <div class="f-between-center">
+              <div class="f-col">
+                <label for="input-none" class="body-bold">
+                  {$t('processing_fee.none.label')}
+                </label>
+                <span class="body-small-regular text-secondary-content">
+                  {$t('processing_fee.none.text')}
+                </span>
+              </div>
+              <input
+                id="input-none"
+                class="radio w-6 h-6 checked:bg-primary-interactive-accent hover:border-primary-interactive-hover"
+                type="radio"
+                disabled={!hasEnoughEth}
+                value={ProcessingFeeMethod.NONE}
+                name="processingFeeMethod"
+                bind:group={selectedFeeMethod} />
+            </div>
+
+            {#if !hasEnoughEth}
+              <FlatAlert type="error" message={$t('processing_fee.none.warning')} />
+            {/if}
+          </li>
 
-          {#if !hasEnoughEth}
-            <FlatAlert type="error" message={$t('processing_fee.none.warning')} />
+          <!-- CUSTOM -->
+          <li class="f-between-center">
+            <div class="f-col">
+              <label for="input-custom" class="body-bold">
+                {$t('processing_fee.custom.label')}
+              </label>
+              <span class="body-small-regular text-secondary-content">
+                {$t('processing_fee.custom.text')}
+              </span>
+            </div>
+            <input
+              id="input-custom"
+              class="radio w-6 h-6 checked:bg-primary-interactive-accent hover:border-primary-interactive-hover"
+              type="radio"
+              value={ProcessingFeeMethod.CUSTOM}
+              name="processingFeeMethod"
+              bind:group={selectedFeeMethod} />
+          </li>
+        </ul>
+        <div class="relative f-items-center my-[20px]">
+          {#if selectedFeeMethod === ProcessingFeeMethod.CUSTOM}
+            <InputBox
+              type="number"
+              min="0"
+              placeholder="0.01"
+              disabled={selectedFeeMethod !== ProcessingFeeMethod.CUSTOM}
+              class="w-full input-box p-6 pr-16 title-subsection-bold placeholder:text-tertiary-content"
+              on:input={inputProcessFee}
+              bind:this={inputBox} />
+            <span class="absolute right-6 uppercase body-bold text-secondary-content">ETH</span>
           {/if}
-        </li>
-
-        <!-- CUSTOM -->
-        <li class="f-between-center">
-          <div class="f-col">
-            <label for="input-custom" class="body-bold">
-              {$t('processing_fee.custom.label')}
-            </label>
-            <span class="body-small-regular text-secondary-content">
-              {$t('processing_fee.custom.text')}
-            </span>
-          </div>
-          <input
-            id="input-custom"
-            class="radio w-6 h-6 checked:bg-primary-interactive-accent hover:border-primary-interactive-hover"
-            type="radio"
-            value={ProcessingFeeMethod.CUSTOM}
-            name="processingFeeMethod"
-            bind:group={selectedFeeMethod} />
-        </li>
-      </ul>
-      <div class="relative f-items-center my-[20px]">
-        {#if selectedFeeMethod === ProcessingFeeMethod.CUSTOM}
-          <InputBox
-            type="number"
-            min="0"
-            placeholder="0.01"
-            disabled={selectedFeeMethod !== ProcessingFeeMethod.CUSTOM}
-            class="w-full input-box p-6 pr-16 title-subsection-bold placeholder:text-tertiary-content"
-            on:input={inputProcessFee}
-            bind:this={inputBox} />
-          <span class="absolute right-6 uppercase body-bold text-secondary-content">ETH</span>
-        {/if}
-      </div>
-      <div class="grid grid-cols-2 gap-[20px]">
-        <Button
-          on:click={cancelModal}
-          type="neutral"
-          class="px-[28px] py-[10px] rounded-full w-auto bg-transparent !border border-primary-brand hover:border-primary-interactive-hover">
-          <span class="body-bold">{$t('common.cancel')}</span>
-        </Button>
-        <Button type="primary" class="px-[28px] py-[10px] rounded-full w-auto" on:click={closeModal}>
-          <span class="body-bold">{$t('common.confirm')}</span>
-        </Button>
+        </div>
+        <div class="grid grid-cols-2 gap-[20px]">
+          <Button
+            on:click={cancelModal}
+            type="neutral"
+            class="px-[28px] py-[10px] rounded-full w-auto bg-transparent !border border-primary-brand hover:border-primary-interactive-hover">
+            <span class="body-bold">{$t('common.cancel')}</span>
+          </Button>
+          <Button type="primary" class="px-[28px] py-[10px] rounded-full w-auto" on:click={closeModal}>
+            <span class="body-bold">{$t('common.confirm')}</span>
+          </Button>
+        </div>
       </div>
     </div>
   </dialog>
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
index 028ab7f895..a8228fc309 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
@@ -92,31 +92,33 @@
         <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
       </button>
 
-      <h3 class="title-body-bold mb-7">{$t('recipient.title')}</h3>
-
-      <p class="body-regular text-secondary-content mb-3">{$t('recipient.description')}</p>
-
-      <div class="relative my-[20px]">
-        <AddressInput
-          bind:this={addressInput}
-          bind:ethereumAddress={ethereumAddressBinding}
-          on:addressvalidation={onAddressValidation} />
-      </div>
-
-      <div class="grid grid-cols-2 gap-[20px]">
-        <Button
-          on:click={cancelModal}
-          type="neutral"
-          class="px-[28px] py-[10px] rounded-full w-auto bg-transparent !border border-primary-brand hover:border-primary-interactive-hover">
-          <span class="body-bold">{$t('common.cancel')}</span>
-        </Button>
-        <Button
-          type="primary"
-          disabled={invalidAddress || !ethereumAddressBinding}
-          class="px-[28px] py-[10px] rounded-full w-auto"
-          on:click={closeModal}>
-          <span class="body-bold">{$t('common.confirm')}</span>
-        </Button>
+      <div class="w-full">
+        <h3 class="title-body-bold mb-7">{$t('recipient.title')}</h3>
+
+        <p class="body-regular text-secondary-content mb-3">{$t('recipient.description')}</p>
+
+        <div class="relative my-[20px]">
+          <AddressInput
+            bind:this={addressInput}
+            bind:ethereumAddress={ethereumAddressBinding}
+            on:addressvalidation={onAddressValidation} />
+        </div>
+
+        <div class="grid grid-cols-2 gap-[20px]">
+          <Button
+            on:click={cancelModal}
+            type="neutral"
+            class="px-[28px] py-[10px] rounded-full w-auto bg-transparent !border border-primary-brand hover:border-primary-interactive-hover">
+            <span class="body-bold">{$t('common.cancel')}</span>
+          </Button>
+          <Button
+            type="primary"
+            disabled={invalidAddress || !ethereumAddressBinding}
+            class="px-[28px] py-[10px] rounded-full w-auto"
+            on:click={closeModal}>
+            <span class="body-bold">{$t('common.confirm')}</span>
+          </Button>
+        </div>
       </div>
     </div>
   </dialog>

From c420bfeb34274a4c8bdb9d95bccdd7b265fb8a35 Mon Sep 17 00:00:00 2001
From: Korbinian Kasberger <korbi@taiko.xyz>
Date: Thu, 7 Sep 2023 15:54:16 +0200
Subject: [PATCH 6/8] override functionality for border buttons

---
 .../Bridge/ProcessingFee/ProcessingFee.svelte        |  6 +++++-
 .../src/components/Bridge/Recipient.svelte           |  3 ++-
 .../bridge-ui-v2/src/components/Button/Button.svelte | 12 +++++++++++-
 .../components/TokenDropdown/AddCustomERC20.svelte   |  1 +
 4 files changed, 19 insertions(+), 3 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
index 920b6777cd..60cd5c8844 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
@@ -239,7 +239,11 @@
             class="px-[28px] py-[10px] rounded-full w-auto bg-transparent !border border-primary-brand hover:border-primary-interactive-hover">
             <span class="body-bold">{$t('common.cancel')}</span>
           </Button>
-          <Button type="primary" class="px-[28px] py-[10px] rounded-full w-auto" on:click={closeModal}>
+          <Button
+            type="primary"
+            class="px-[28px] py-[10px] rounded-full w-auto border-primary-brand"
+            hasBorder={true}
+            on:click={closeModal}>
             <span class="body-bold">{$t('common.confirm')}</span>
           </Button>
         </div>
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
index a8228fc309..84560c72b4 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
@@ -115,7 +115,8 @@
             type="primary"
             disabled={invalidAddress || !ethereumAddressBinding}
             class="px-[28px] py-[10px] rounded-full w-auto"
-            on:click={closeModal}>
+            on:click={closeModal}
+            hasBorder={true}>
             <span class="body-bold">{$t('common.confirm')}</span>
           </Button>
         </div>
diff --git a/packages/bridge-ui-v2/src/components/Button/Button.svelte b/packages/bridge-ui-v2/src/components/Button/Button.svelte
index ff10e9bfff..5034bcc50b 100644
--- a/packages/bridge-ui-v2/src/components/Button/Button.svelte
+++ b/packages/bridge-ui-v2/src/components/Button/Button.svelte
@@ -23,6 +23,16 @@
   export let wide = false;
   export let disabled = false;
 
+  export let hasBorder = false;
+
+  let borderClasses: string = '';
+
+  if (hasBorder) {
+    borderClasses = 'border-1 border-primary-border';
+  } else {
+    borderClasses = 'border-0';
+  }
+
   // Remember, with Tailwind's classes you cannot use string interpolation: `btn-${type}`.
   // The whole class name must appear in the code in order for Tailwind compiler to know
   // it must be included during build-time.
@@ -61,7 +71,7 @@
     // since we're showing some important information.
     loading ? 'btn-disabled !text-primary-content' : null,
 
-    disabled ? 'border-1 border-primary-border' : 'border-0',
+    disabled ? borderClasses : '',
 
     $$props.class,
   );
diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte
index 63c948e569..d6d9b7eca5 100644
--- a/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte
+++ b/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte
@@ -192,6 +192,7 @@
     {:else}
       <Button
         type="primary"
+        hasBorder={true}
         class="px-[28px] py-[14px] rounded-full flex-1 w-full"
         {disabled}
         on:click={addCustomErc20Token}>

From 141675eb0521b05c5011f5255fa107d38812af2c Mon Sep 17 00:00:00 2001
From: Korbinian Kasberger <korbi@taiko.xyz>
Date: Thu, 7 Sep 2023 17:00:35 +0200
Subject: [PATCH 7/8] linting

---
 .../bridge-ui-v2/src/components/Activities/Activities.svelte   | 2 +-
 .../src/components/Bridge/ChainSelectorWrapper.svelte          | 3 +--
 packages/bridge-ui-v2/src/styles/base.css                      | 1 -
 packages/bridge-ui-v2/src/styles/components.css                | 2 +-
 4 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte
index 9f91980599..27b0c7b04e 100644
--- a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte
+++ b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte
@@ -6,6 +6,7 @@
   import { Card } from '$components/Card';
   import { ChainSelector } from '$components/ChainSelector';
   import { DesktopOrLarger } from '$components/DesktopOrLarger';
+  import { warningToast } from '$components/NotificationToast';
   import OnAccount from '$components/OnAccount/OnAccount.svelte';
   import { Paginator } from '$components/Paginator';
   import { Spinner } from '$components/Spinner';
@@ -18,7 +19,6 @@
   import MobileDetailsDialog from './MobileDetailsDialog.svelte';
   import StatusInfoDialog from './StatusInfoDialog.svelte';
   import Transaction from './Transaction.svelte';
-  import { warningToast } from '$components/NotificationToast';
 
   let transactions: BridgeTransaction[] = [];
 
diff --git a/packages/bridge-ui-v2/src/components/Bridge/ChainSelectorWrapper.svelte b/packages/bridge-ui-v2/src/components/Bridge/ChainSelectorWrapper.svelte
index ac7d32d053..db7bb38cd8 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/ChainSelectorWrapper.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/ChainSelectorWrapper.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
   import { destNetwork, destOptions } from '$components/Bridge/state';
   import SwitchChainsButton from '$components/Bridge/SwitchChainsButton.svelte';
+  import { ChainSelector } from '$components/ChainSelector';
   import { OnNetwork } from '$components/OnNetwork';
   import { hasBridge } from '$libs/bridge/bridges';
   import { chains } from '$libs/chain';
   import { type Network, network } from '$stores/network';
 
-  import { ChainSelector } from '$components/ChainSelector';
-
   function handleSourceChange(event: CustomEvent<number>): void {
     updateDestOptions();
   }
diff --git a/packages/bridge-ui-v2/src/styles/base.css b/packages/bridge-ui-v2/src/styles/base.css
index fa34583c77..bfe4862a47 100644
--- a/packages/bridge-ui-v2/src/styles/base.css
+++ b/packages/bridge-ui-v2/src/styles/base.css
@@ -37,7 +37,6 @@
     z-index: -1;
   }
 
-
   @media (min-width: 768px) {
     body::before {
       background-size: 700px, cover, cover;
diff --git a/packages/bridge-ui-v2/src/styles/components.css b/packages/bridge-ui-v2/src/styles/components.css
index f15cb48d36..6c4d51dfb9 100644
--- a/packages/bridge-ui-v2/src/styles/components.css
+++ b/packages/bridge-ui-v2/src/styles/components.css
@@ -164,7 +164,7 @@
   }
 
   .overlay-dialog {
-    background-color: var(--overlay-dialog)
+    background-color: var(--overlay-dialog);
   }
 
   .chainselector {

From 923e031c5f2cc5c5bd0dd50999cbc9f14e169810 Mon Sep 17 00:00:00 2001
From: Korbinian Kasberger <korbi@taiko.xyz>
Date: Thu, 7 Sep 2023 18:14:03 +0200
Subject: [PATCH 8/8] linting

---
 .../src/components/Activities/Activities.svelte           | 1 -
 .../src/components/Bridge/ChainSelectorWrapper.svelte     | 8 ++++----
 .../src/components/TokenDropdown/AddCustomERC20.svelte    | 2 +-
 .../src/components/TokenDropdown/DialogView.svelte        | 1 -
 4 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte
index 27b0c7b04e..6a1ddda5e0 100644
--- a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte
+++ b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { Address } from 'viem';
 
diff --git a/packages/bridge-ui-v2/src/components/Bridge/ChainSelectorWrapper.svelte b/packages/bridge-ui-v2/src/components/Bridge/ChainSelectorWrapper.svelte
index db7bb38cd8..99bd2ac07a 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/ChainSelectorWrapper.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/ChainSelectorWrapper.svelte
@@ -5,13 +5,13 @@
   import { OnNetwork } from '$components/OnNetwork';
   import { hasBridge } from '$libs/bridge/bridges';
   import { chains } from '$libs/chain';
-  import { type Network, network } from '$stores/network';
+  import { network } from '$stores/network';
 
-  function handleSourceChange(event: CustomEvent<number>): void {
+  function handleSourceChange(): void {
     updateDestOptions();
   }
 
-  function handleDestChange(event: CustomEvent<number>): void {
+  function handleDestChange(): void {
     updateDestOptions();
   }
 
@@ -24,7 +24,7 @@
     });
   }
 
-  function onNetworkChange(newNetwork: Network, oldNetwork: Network) {
+  function onNetworkChange() {
     updateDestOptions();
   }
 </script>
diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte
index d6d9b7eca5..e00c3f5025 100644
--- a/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte
+++ b/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte
@@ -6,7 +6,7 @@
   import type { Address } from 'viem';
   import { formatUnits } from 'viem';
 
-  import { Alert, FlatAlert } from '$components/Alert';
+  import { FlatAlert } from '$components/Alert';
   import AddressInput from '$components/Bridge/AddressInput.svelte';
   import { Button } from '$components/Button';
   import { Icon } from '$components/Icon';
diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte
index d6cd773bdd..8fe0abc40d 100644
--- a/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte
+++ b/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { onDestroy, onMount } from 'svelte';
-  import { createEventDispatcher } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { Address } from 'viem';