From 6c080cb3be95468deace6fdd3d9467902fef4be1 Mon Sep 17 00:00:00 2001
From: shadab-taiko <108871478+shadab-taiko@users.noreply.github.com>
Date: Fri, 30 Dec 2022 20:02:51 +0530
Subject: [PATCH] fix(bridge): ui fixes (#489)

* feat(bridge): add invalid chain balance section in dropdown

* feat(bridge): add invalid chain icon and fix mobile view

* fix(bridge): open faucet in new tab

* fix(bridge): metamask icon

* fix(bridge): transaction list mobile view

* fix(bridge): transaction detail mobile view

* feat(bridge): move message status tooltip into component

* Update HeaderAnnouncement.svelte

* fix(bridge): invalid chain icon alignment

* fix(bridge): status alignment

Co-authored-by: dave | d1onys1us <13951458+d1onys1us@users.noreply.github.com>
---
 .../src/components/AddressDropdown.svelte     |   8 +-
 .../src/components/ChainDropdown.svelte       |   9 +-
 .../src/components/HeaderAnnouncement.svelte  |   3 +-
 .../components/MessageStatusTooltip.svelte    |  36 ++++
 .../src/components/Transaction.svelte         |  39 +---
 .../src/components/TransactionDetail.svelte   |   4 +-
 .../src/components/Transactions.svelte        |  11 +-
 .../src/components/buttons/SelectToken.svelte |   2 +-
 .../src/components/icons/MetaMask.svelte      | 204 ++++--------------
 packages/bridge-ui/src/pages/home/Home.svelte |   2 +-
 packages/bridge-ui/src/store/transactions.ts  |   3 +-
 11 files changed, 108 insertions(+), 213 deletions(-)
 create mode 100644 packages/bridge-ui/src/components/MessageStatusTooltip.svelte

diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte
index 3efc80d23fa..81e2ef37a21 100644
--- a/packages/bridge-ui/src/components/AddressDropdown.svelte
+++ b/packages/bridge-ui/src/components/AddressDropdown.svelte
@@ -86,11 +86,11 @@
         </span>
       {/if}
     </span>
-    <ChevronDown />
+    <ChevronDown size='20' />
   </label>
   <ul
     tabindex="0"
-    class="dropdown-content address-dropdown-content menu shadow bg-dark-3 rounded-sm w-48 mt-2 pb-2"
+    class="dropdown-content address-dropdown-content menu shadow bg-dark-3 rounded-sm w-48 mt-2 pb-2 text-sm"
   >
     <div class="p-5 pb-0 flex flex-col items-center" transition:slide>
       {#if $fromChain && $signer}
@@ -100,6 +100,10 @@
             ? `${truncateString(tokenBalance)}...`
             : tokenBalance} ETH
         </div>
+      {:else}
+      <div class="text-lg mt-2">
+        -- ETH
+      </div>
       {/if}
     </div>
     <div class="divider" />
diff --git a/packages/bridge-ui/src/components/ChainDropdown.svelte b/packages/bridge-ui/src/components/ChainDropdown.svelte
index 93ddf19bb9c..60a5bb0a2b5 100644
--- a/packages/bridge-ui/src/components/ChainDropdown.svelte
+++ b/packages/bridge-ui/src/components/ChainDropdown.svelte
@@ -6,7 +6,7 @@
   import { ethers } from "ethers";
   import { signer } from "../store/signer";
   import { switchNetwork } from "@wagmi/core";
-  import { ChevronDown } from "svelte-heros-v2";
+  import { ChevronDown, ExclamationTriangle } from "svelte-heros-v2";
   const changeChain = async (chain: Chain) => {
     await switchNetwork({
       chainId: chain.id,
@@ -31,10 +31,13 @@
         <svelte:component this={$fromChain.icon} />
         <span class="ml-2 hidden md:inline-block">{$fromChain.name}</span>
       {:else}
-        <span class="ml-2 hidden md:inline-block">Invalid Chain</span>
+      <span class="ml-2 flex items-center">
+          <ExclamationTriangle class='mr-2' size='20' />
+          <span class="hidden md:block">Invalid Chain</span>
+        </span>
       {/if}
     </span>
-    <ChevronDown />
+    <ChevronDown size='20' />
   </label>
   <ul
     tabindex="0"
diff --git a/packages/bridge-ui/src/components/HeaderAnnouncement.svelte b/packages/bridge-ui/src/components/HeaderAnnouncement.svelte
index 7d33b683214..00f10634049 100644
--- a/packages/bridge-ui/src/components/HeaderAnnouncement.svelte
+++ b/packages/bridge-ui/src/components/HeaderAnnouncement.svelte
@@ -4,7 +4,8 @@
       <p class="font-medium text-white">
         <span class="md:inline"
           >Receive some tokens for bridging with our <a
-            href="https://taiko.xyz/docs/alpha-1-testnet/request-eth-from-faucet"
+            href="https://taiko.xyz/docs/alpha-1-testnet/request-from-faucet"
+            target="_blank"
             class="font-bold text-white underline">faucet</a
           >.</span
         >
diff --git a/packages/bridge-ui/src/components/MessageStatusTooltip.svelte b/packages/bridge-ui/src/components/MessageStatusTooltip.svelte
new file mode 100644
index 00000000000..8edad54e024
--- /dev/null
+++ b/packages/bridge-ui/src/components/MessageStatusTooltip.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import TooltipModal from "./modals/TooltipModal.svelte";
+  import { showMessageStatusTooltip } from '../store/transactions';
+</script>
+
+<TooltipModal title="Message Status" bind:isOpen={$showMessageStatusTooltip}>
+  <span slot="body">
+    <div class="text-left">
+      A bridge message will pass through various states:
+      <br /><br />
+      <ul class="list-disc ml-4">
+        <li class="mb-2">
+          <strong>Pending</strong>: Your asset is not ready to be bridged. Taiko
+          A1 => Ethereum A1 bridging can take several hours before being ready.
+          Ethereum A1 => Taiko A1 should be available to claim within minutes.
+        </li>
+        <li class="mb-2">
+          <strong>Claimable</strong>: Your asset is ready to be claimed on the
+          destination chain, and requires a transaction.
+        </li>
+        <li class="mb-2">
+          <strong>Claimed</strong>: Your asset has finished bridging, and is
+          available to you on the destination chain.
+        </li>
+        <li class="mb-2">
+          <strong>Retry</strong>: The relayer has failed to process this
+          message, and you must retry the processing yourself.
+        </li>
+        <li class="mb-2">
+          <strong>Failed</strong>: Your bridged asset is unable to be processed,
+          and is available to you on the source chain.
+        </li>
+      </ul>
+    </div>
+  </span>
+</TooltipModal>
\ No newline at end of file
diff --git a/packages/bridge-ui/src/components/Transaction.svelte b/packages/bridge-ui/src/components/Transaction.svelte
index fe82e40f19a..2fbc7b2cdb6 100644
--- a/packages/bridge-ui/src/components/Transaction.svelte
+++ b/packages/bridge-ui/src/components/Transaction.svelte
@@ -10,6 +10,7 @@
   import {
     pendingTransactions,
     showTransactionDetails,
+    showMessageStatusTooltip,
   } from "../store/transactions";
   import { errorToast, successToast } from "../utils/toast";
   import { _ } from "svelte-i18n";
@@ -25,7 +26,6 @@
   import { providers } from "../store/providers";
   import { fetchSigner, switchNetwork } from "@wagmi/core";
   import Tooltip from "./Tooltip.svelte";
-  import TooltipModal from "./modals/TooltipModal.svelte";
   import Bridge from "../constants/abi/Bridge";
 
   export let transaction: BridgeTransaction;
@@ -33,7 +33,6 @@
   export let fromChain: Chain;
   export let toChain: Chain;
 
-  let tooltipOpen: boolean = false;
   let processable: boolean = false;
   onMount(async () => {
     processable = await isProcessable();
@@ -166,9 +165,9 @@
       <!-- todo: releaseTokens() on src bridge with proof from destBridge-->
       Failed
     {:else if transaction.status === MessageStatus.Done}
-      Claimed
+      <span class="border border-transparent p-0">Claimed</span>
     {/if}
-    <span class="inline-block" on:click={() => (tooltipOpen = true)}>
+    <span class="inline-block" on:click={() => ($showMessageStatusTooltip = true)}>
       <Tooltip />
     </span>
   </td>
@@ -183,38 +182,6 @@
   </td>
 </tr>
 
-<TooltipModal title="Message Status" bind:isOpen={tooltipOpen}>
-  <span slot="body">
-    <div class="text-left">
-      A bridge message will pass through various states:
-      <br /><br />
-      <ul class="list-disc ml-4">
-        <li class="mb-2">
-          <strong>Pending</strong>: Your asset is not ready to be bridged. Taiko
-          A1 => Ethereum A1 bridging can take several hours before being ready.
-          Ethereum A1 => Taiko A1 should be available to claim within minutes.
-        </li>
-        <li class="mb-2">
-          <strong>Claimable</strong>: Your asset is ready to be claimed on the
-          destination chain, and requires a transaction.
-        </li>
-        <li class="mb-2">
-          <strong>Claimed</strong>: Your asset has finished bridging, and is
-          available to you on the destination chain.
-        </li>
-        <li class="mb-2">
-          <strong>Retry</strong>: The relayer has failed to process this
-          message, and you must retry the processing yourself.
-        </li>
-        <li class="mb-2">
-          <strong>Failed</strong>: Your bridged asset is unable to be processed,
-          and is available to you on the source chain.
-        </li>
-      </ul>
-    </div>
-  </span>
-</TooltipModal>
-
 <style>
   td {
     padding: 1rem;
diff --git a/packages/bridge-ui/src/components/TransactionDetail.svelte b/packages/bridge-ui/src/components/TransactionDetail.svelte
index 3e9d064a1f3..105812a30d8 100644
--- a/packages/bridge-ui/src/components/TransactionDetail.svelte
+++ b/packages/bridge-ui/src/components/TransactionDetail.svelte
@@ -8,7 +8,7 @@
   export let transaction;
 </script>
 <Modal onClose={() => $showTransactionDetails = null} isOpen={!!transaction} title="Transaction Detail">
-  <table class="table table-normal w-2/3 m-auto table-fixed border-spacing-0">
+  <table class="table table-normal w-full md:w-2/3 m-auto table-fixed border-spacing-0 text-sm md:text-base">
     <tr>
       <td>Tx Hash</td>
       <td class="text-right">
@@ -61,7 +61,7 @@
     </tr>
     <tr>
       <td>Data</td>
-      <td class="text-right overflow-auto">
+      <td class="text-center overflow-auto bg-dark-1 !px-1 border-x-4 border-dark-1">
         {transaction.message.data}
       </td>
     </tr>
diff --git a/packages/bridge-ui/src/components/Transactions.svelte b/packages/bridge-ui/src/components/Transactions.svelte
index 39bf18b3a04..c112bc74307 100644
--- a/packages/bridge-ui/src/components/Transactions.svelte
+++ b/packages/bridge-ui/src/components/Transactions.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
   import { chains } from "../domain/chain";
-  import { transactions, showTransactionDetails } from "../store/transactions";
+  import { transactions, showTransactionDetails, showMessageStatusTooltip } from "../store/transactions";
   import Transaction from "./Transaction.svelte";
   import TransactionDetail from './TransactionDetail.svelte';
+  import MessageStatusTooltip from './MessageStatusTooltip.svelte';
 </script>
 
-<div class="my-4 px-4">
+<div class="my-4 md:px-4">
   {#if $transactions.length}
     <table class="table-auto">
       <thead>
@@ -17,7 +18,7 @@
           <th>Details</th>
         </tr>
       </thead>
-      <tbody>
+      <tbody class="text-sm md:text-base">
         {#each $transactions as transaction}
           <Transaction
             toChain={chains[transaction.toChainId]}
@@ -34,4 +35,8 @@
   {#if $showTransactionDetails}
     <TransactionDetail transaction={$showTransactionDetails} />
   {/if}
+
+  {#if $showMessageStatusTooltip}
+    <MessageStatusTooltip />
+  {/if}
 </div>
diff --git a/packages/bridge-ui/src/components/buttons/SelectToken.svelte b/packages/bridge-ui/src/components/buttons/SelectToken.svelte
index c4aa14c7620..7d26db4231e 100644
--- a/packages/bridge-ui/src/components/buttons/SelectToken.svelte
+++ b/packages/bridge-ui/src/components/buttons/SelectToken.svelte
@@ -26,7 +26,7 @@
   >
     <svelte:component this={$token.logoComponent} class="inline-block" />
     <p class="px-2 text-sm">{$token.symbol.toUpperCase()}</p>
-    <ChevronDown />
+    <ChevronDown size='20' />
   </label>
   <ul
     tabindex="0"
diff --git a/packages/bridge-ui/src/components/icons/MetaMask.svelte b/packages/bridge-ui/src/components/icons/MetaMask.svelte
index c4b2517cab3..3650b83c3b0 100644
--- a/packages/bridge-ui/src/components/icons/MetaMask.svelte
+++ b/packages/bridge-ui/src/components/icons/MetaMask.svelte
@@ -2,178 +2,56 @@
   export let width: number = 32;
 </script>
 
-<svg
-  version="1.1"
-  id="Layer_1"
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
-  {width}
-  x="0px"
-  y="0px"
-  viewBox="0 0 318.6 318.6"
-  style="enable-background:new 0 0 318.6 318.6;"
-  xml:space="preserve"
->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" {width} x="0px" y="0px" viewBox="0 0 318.6 318.6" style="enable-background:new 0 0 318.6 318.6;" xml:space="preserve">
   <style type="text/css">
-    .st10 {
-      fill: #e2761b;
-      stroke: #e2761b;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-    .st11 {
-      fill: #e4761b;
-      stroke: #e4761b;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-    .st2 {
-      fill: #d7c1b3;
-      stroke: #d7c1b3;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-    .st3 {
-      fill: #233447;
-      stroke: #233447;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-    .st4 {
-      fill: #cd6116;
-      stroke: #cd6116;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-    .st5 {
-      fill: #e4751f;
-      stroke: #e4751f;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-    .st6 {
-      fill: #f6851b;
-      stroke: #f6851b;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-    .st7 {
-      fill: #c0ad9e;
-      stroke: #c0ad9e;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-    .st8 {
-      fill: #161616;
-      stroke: #161616;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-    .st9 {
-      fill: #763d16;
-      stroke: #763d16;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
+    .mt0{fill:#E2761B;stroke:#E2761B;stroke-linecap:round;stroke-linejoin:round;}
+    .mt1{fill:#E4761B;stroke:#E4761B;stroke-linecap:round;stroke-linejoin:round;}
+    .mt2{fill:#D7C1B3;stroke:#D7C1B3;stroke-linecap:round;stroke-linejoin:round;}
+    .mt3{fill:#233447;stroke:#233447;stroke-linecap:round;stroke-linejoin:round;}
+    .mt4{fill:#CD6116;stroke:#CD6116;stroke-linecap:round;stroke-linejoin:round;}
+    .mt5{fill:#E4751F;stroke:#E4751F;stroke-linecap:round;stroke-linejoin:round;}
+    .mt6{fill:#F6851B;stroke:#F6851B;stroke-linecap:round;stroke-linejoin:round;}
+    .mt7{fill:#C0AD9E;stroke:#C0AD9E;stroke-linecap:round;stroke-linejoin:round;}
+    .mt8{fill:#161616;stroke:#161616;stroke-linecap:round;stroke-linejoin:round;}
+    .mt9{fill:#763D16;stroke:#763D16;stroke-linecap:round;stroke-linejoin:round;}
   </style>
-  <polygon class="st10" points="274.1,35.5 174.6,109.4 193,65.8 " />
+  <polygon class="mt0" points="274.1,35.5 174.6,109.4 193,65.8 "/>
   <g>
-    <polygon class="st11" points="44.4,35.5 143.1,110.1 125.6,65.8 	" />
-    <polygon
-      class="st11"
-      points="238.3,206.8 211.8,247.4 268.5,263 284.8,207.7 	"
-    />
-    <polygon
-      class="st11"
-      points="33.9,207.7 50.1,263 106.8,247.4 80.3,206.8 	"
-    />
-    <polygon
-      class="st11"
-      points="103.6,138.2 87.8,162.1 144.1,164.6 142.1,104.1 	"
-    />
-    <polygon
-      class="st11"
-      points="214.9,138.2 175.9,103.4 174.6,164.6 230.8,162.1 	"
-    />
-    <polygon class="st11" points="106.8,247.4 140.6,230.9 111.4,208.1 	" />
-    <polygon class="st11" points="177.9,230.9 211.8,247.4 207.1,208.1 	" />
+    <polygon class="mt1" points="44.4,35.5 143.1,110.1 125.6,65.8  "/>
+    <polygon class="mt1" points="238.3,206.8 211.8,247.4 268.5,263 284.8,207.7  "/>
+    <polygon class="mt1" points="33.9,207.7 50.1,263 106.8,247.4 80.3,206.8  "/>
+    <polygon class="mt1" points="103.6,138.2 87.8,162.1 144.1,164.6 142.1,104.1  "/>
+    <polygon class="mt1" points="214.9,138.2 175.9,103.4 174.6,164.6 230.8,162.1  "/>
+    <polygon class="mt1" points="106.8,247.4 140.6,230.9 111.4,208.1  "/>
+    <polygon class="mt1" points="177.9,230.9 211.8,247.4 207.1,208.1  "/>
   </g>
   <g>
-    <polygon
-      class="st2"
-      points="211.8,247.4 177.9,230.9 180.6,253 180.3,262.3 	"
-    />
-    <polygon
-      class="st2"
-      points="106.8,247.4 138.3,262.3 138.1,253 140.6,230.9 	"
-    />
+    <polygon class="mt2" points="211.8,247.4 177.9,230.9 180.6,253 180.3,262.3  "/>
+    <polygon class="mt2" points="106.8,247.4 138.3,262.3 138.1,253 140.6,230.9  "/>
   </g>
-  <polygon class="st3" points="138.8,193.5 110.6,185.2 130.5,176.1 " />
-  <polygon class="st3" points="179.7,193.5 188,176.1 208,185.2 " />
+  <polygon class="mt3" points="138.8,193.5 110.6,185.2 130.5,176.1 "/>
+  <polygon class="mt3" points="179.7,193.5 188,176.1 208,185.2 "/>
   <g>
-    <polygon class="st4" points="106.8,247.4 111.6,206.8 80.3,207.7 	" />
-    <polygon class="st4" points="207,206.8 211.8,247.4 238.3,207.7 	" />
-    <polygon
-      class="st4"
-      points="230.8,162.1 174.6,164.6 179.8,193.5 188.1,176.1 208.1,185.2 	"
-    />
-    <polygon
-      class="st4"
-      points="110.6,185.2 130.6,176.1 138.8,193.5 144.1,164.6 87.8,162.1 	"
-    />
+    <polygon class="mt4" points="106.8,247.4 111.6,206.8 80.3,207.7  "/>
+    <polygon class="mt4" points="207,206.8 211.8,247.4 238.3,207.7  "/>
+    <polygon class="mt4" points="230.8,162.1 174.6,164.6 179.8,193.5 188.1,176.1 208.1,185.2  "/>
+    <polygon class="mt4" points="110.6,185.2 130.6,176.1 138.8,193.5 144.1,164.6 87.8,162.1  "/>
   </g>
   <g>
-    <polygon class="st5" points="87.8,162.1 111.4,208.1 110.6,185.2 	" />
-    <polygon class="st5" points="208.1,185.2 207.1,208.1 230.8,162.1 	" />
-    <polygon
-      class="st5"
-      points="144.1,164.6 138.8,193.5 145.4,227.6 146.9,182.7 	"
-    />
-    <polygon
-      class="st5"
-      points="174.6,164.6 171.9,182.6 173.1,227.6 179.8,193.5 	"
-    />
+    <polygon class="mt5" points="87.8,162.1 111.4,208.1 110.6,185.2  "/>
+    <polygon class="mt5" points="208.1,185.2 207.1,208.1 230.8,162.1  "/>
+    <polygon class="mt5" points="144.1,164.6 138.8,193.5 145.4,227.6 146.9,182.7  "/>
+    <polygon class="mt5" points="174.6,164.6 171.9,182.6 173.1,227.6 179.8,193.5  "/>
   </g>
-  <polygon
-    class="st6"
-    points="179.8,193.5 173.1,227.6 177.9,230.9 207.1,208.1 208.1,185.2 "
-  />
-  <polygon
-    class="st6"
-    points="110.6,185.2 111.4,208.1 140.6,230.9 145.4,227.6 138.8,193.5 "
-  />
-  <polygon
-    class="st7"
-    points="180.3,262.3 180.6,253 178.1,250.8 140.4,250.8 138.1,253 138.3,262.3 106.8,247.4 117.8,256.4 
-	140.1,271.9 178.4,271.9 200.8,256.4 211.8,247.4 "
-  />
-  <polygon
-    class="st8"
-    points="177.9,230.9 173.1,227.6 145.4,227.6 140.6,230.9 138.1,253 140.4,250.8 178.1,250.8 180.6,253 "
-  />
+  <polygon class="mt6" points="179.8,193.5 173.1,227.6 177.9,230.9 207.1,208.1 208.1,185.2 "/>
+  <polygon class="mt6" points="110.6,185.2 111.4,208.1 140.6,230.9 145.4,227.6 138.8,193.5 "/>
+  <polygon class="mt7" points="180.3,262.3 180.6,253 178.1,250.8 140.4,250.8 138.1,253 138.3,262.3 106.8,247.4 117.8,256.4   140.1,271.9 178.4,271.9 200.8,256.4 211.8,247.4 "/>
+  <polygon class="mt8" points="177.9,230.9 173.1,227.6 145.4,227.6 140.6,230.9 138.1,253 140.4,250.8 178.1,250.8 180.6,253 "/>
   <g>
-    <polygon
-      class="st9"
-      points="278.3,114.2 286.8,73.4 274.1,35.5 177.9,106.9 214.9,138.2 267.2,153.5 278.8,140 273.8,136.4 
-		281.8,129.1 275.6,124.3 283.6,118.2 	"
-    />
-    <polygon
-      class="st9"
-      points="31.8,73.4 40.3,114.2 34.9,118.2 42.9,124.3 36.8,129.1 44.8,136.4 39.8,140 51.3,153.5 103.6,138.2 
-		140.6,106.9 44.4,35.5 	"
-    />
+    <polygon class="mt9" points="278.3,114.2 286.8,73.4 274.1,35.5 177.9,106.9 214.9,138.2 267.2,153.5 278.8,140 273.8,136.4    281.8,129.1 275.6,124.3 283.6,118.2  "/>
+    <polygon class="mt9" points="31.8,73.4 40.3,114.2 34.9,118.2 42.9,124.3 36.8,129.1 44.8,136.4 39.8,140 51.3,153.5 103.6,138.2    140.6,106.9 44.4,35.5  "/>
   </g>
-  <polygon
-    class="st6"
-    points="267.2,153.5 214.9,138.2 230.8,162.1 207.1,208.1 238.3,207.7 284.8,207.7 "
-  />
-  <polygon
-    class="st6"
-    points="103.6,138.2 51.3,153.5 33.9,207.7 80.3,207.7 111.4,208.1 87.8,162.1 "
-  />
-  <polygon
-    class="st6"
-    points="174.6,164.6 177.9,106.9 193.1,65.8 125.6,65.8 140.6,106.9 144.1,164.6 145.3,182.8 145.4,227.6 
-	173.1,227.6 173.3,182.8 "
-  />
-</svg>
+  <polygon class="mt6" points="267.2,153.5 214.9,138.2 230.8,162.1 207.1,208.1 238.3,207.7 284.8,207.7 "/>
+  <polygon class="mt6" points="103.6,138.2 51.3,153.5 33.9,207.7 80.3,207.7 111.4,208.1 87.8,162.1 "/>
+  <polygon class="mt6" points="174.6,164.6 177.9,106.9 193.1,65.8 125.6,65.8 140.6,106.9 144.1,164.6 145.3,182.8 145.4,227.6   173.1,227.6 173.3,182.8 "/>
+  </svg>
\ No newline at end of file
diff --git a/packages/bridge-ui/src/pages/home/Home.svelte b/packages/bridge-ui/src/pages/home/Home.svelte
index 358f34620f7..36052cb92b7 100644
--- a/packages/bridge-ui/src/pages/home/Home.svelte
+++ b/packages/bridge-ui/src/pages/home/Home.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <div class="container mx-auto max-w-fit text-center my-10">
-  <div class="rounded-3xl border-2 border-zinc-800 border-solid p-6">
+  <div class="rounded-3xl border-2 border-zinc-800 border-solid p-2 md:p-6">
     <div class="tabs mb-4">
       <span
         class="tab tab-bordered {activeTab === 'bridge' ? 'tab-active' : ''}"
diff --git a/packages/bridge-ui/src/store/transactions.ts b/packages/bridge-ui/src/store/transactions.ts
index 4f5ad98b251..c2765855d53 100644
--- a/packages/bridge-ui/src/store/transactions.ts
+++ b/packages/bridge-ui/src/store/transactions.ts
@@ -7,4 +7,5 @@ const pendingTransactions = writable<Transaction[]>([]);
 const transactions = writable<BridgeTransaction[]>([]);
 const transactioner = writable<Transactioner>();
 const showTransactionDetails = writable<BridgeTransaction>();
-export { pendingTransactions, transactions, transactioner, showTransactionDetails };
+const showMessageStatusTooltip = writable<boolean>();
+export { pendingTransactions, transactions, transactioner, showTransactionDetails, showMessageStatusTooltip };