fix(bridge): minor ui fixes (#474)

* fix(bridge): align pending text and loader

* fix(bridge): data and memo overflow

* fix(bridge): clear memo field after transaction success

* fix(bridge): add transition duration to memo toggle

* fix(bridge): minor faucet button adjustment

packages/bridge-ui/src/components/AddressDropdown.svelte

@@ -56,10 +56,10 @@
 
 <div class="dropdown dropdown-bottom dropdown-end">
   <label tabindex="0" class="btn btn-md justify-around">
-    <span class="font-normal flex-1 text-left">
+    <span class="font-normal flex-1 text-left flex items-center">
       {#if $pendingTransactions && $pendingTransactions.length}
-        {$pendingTransactions.length} Pending
-        <div class="inline-block">
+        <span>{$pendingTransactions.length} Pending</span>
+        <div class="inline-block ml-2">
           <LottiePlayer
             src="/lottie/loader.json"
             autoplay={true}

packages/bridge-ui/src/components/ERC20Faucet.svelte

@@ -48,17 +48,21 @@
   }
 </script>
 
-<button class="btn" on:click={mint}>
-  <Funnel class="mr-2" /> Faucet
-</button>
-<Tooltip />
+<div class="flex items-start">
+  <button class="btn" on:click={mint}>
+    <Funnel class="mr-2" /> Faucet
+  </button>
+  <button class="inline-block ml-2" on:click={() => (tooltipOpen = true)}>
+    <Tooltip />
+  </button>
+</div>
 
 <TooltipModal title="{$token.symbol} Faucet" bind:isOpen={tooltipOpen}>
   <span slot="body">
     <p class="text-left">
       You can request 1000 {$token.symbol}. {$token.symbol} is only available to
       be minted on Ethereum A1. If you are on Taiko A1, your network will be changed
-      first. You must have a small amount of ether in your Ethereum A1 wallet to
+      first. You must have a small amount of ETH in your Ethereum A1 wallet to
       send the transaction.
     </p>
   </span>

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 class="table table-normal w-2/3 m-auto table-fixed border-spacing-0">
     <tr>
       <td>Tx Hash</td>
       <td class="text-right">
@@ -61,13 +61,13 @@
     </tr>
     <tr>
       <td>Data</td>
-      <td class="text-right">
+      <td class="text-right overflow-auto">
         {transaction.message.data}
       </td>
     </tr>
     <tr>
       <td>Memo</td>
-      <td class="text-right">
+      <td class="text-right overflow-auto">
         {transaction.message.memo}
       </td>
     </tr>

packages/bridge-ui/src/components/form/BridgeForm.svelte

@@ -228,6 +228,7 @@
 
       successToast($_("toast.transactionSent"));
       await $signer.provider.waitForTransaction(tx.hash, 1);
+      memo = "";
     } catch (e) {
       console.log(e);
       errorToast($_("toast.errorSendingTransaction"));

packages/bridge-ui/src/components/form/Memo.svelte

@@ -19,7 +19,7 @@
   </span>
   <input
     type="checkbox"
-    class="toggle rounded-full"
+    class="toggle rounded-full duration-300"
     on:click={() => {
       showMemo = !showMemo;
     }}