From 80868354939d95e419b35a15a7add93de0449445 Mon Sep 17 00:00:00 2001
From: xiaodino <ruby@taiko.xyz>
Date: Tue, 19 Sep 2023 23:52:31 -0700
Subject: [PATCH 1/2] fix(bridge-ui-v2): update InsufficientFunds dialog in
 mobile view

---
 .../src/components/Transactions/MobileDetailsDialog.svelte  | 2 +-
 .../bridge-ui-v2/src/components/Transactions/Status.svelte  | 6 +++++-
 .../src/components/Transactions/Transaction.svelte          | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte b/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte
index b83f002d4ac..e746ef00949 100644
--- a/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte
+++ b/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte
@@ -66,7 +66,7 @@
             </div>
           </h4>
           <div class="f-items-center space-x-1">
-            <Status bridgeTx={selectedItem} />
+            <Status bridgeTx={selectedItem} isDesktopOrLarger={false} isMobileDetailsDialog={true}/>
           </div>
         </li>
         <li class="f-between-center">
diff --git a/packages/bridge-ui-v2/src/components/Transactions/Status.svelte b/packages/bridge-ui-v2/src/components/Transactions/Status.svelte
index 8b5e370c9c7..f0857963435 100644
--- a/packages/bridge-ui-v2/src/components/Transactions/Status.svelte
+++ b/packages/bridge-ui-v2/src/components/Transactions/Status.svelte
@@ -36,6 +36,8 @@
   const log = getLogger('components:Status');
 
   export let bridgeTx: BridgeTransaction;
+  export let isDesktopOrLarger: boolean;
+  export let isMobileDetailsDialog: boolean;
 
   let polling: ReturnType<typeof startPolling>;
 
@@ -140,7 +142,9 @@
           warningToast($t('transactions.actions.claim.rejected'));
           break;
         case err instanceof InsufficientBalanceError:
-          modalOpen = true;
+          if (isDesktopOrLarger || isMobileDetailsDialog) {
+            modalOpen = true;
+          }
           break;
         case err instanceof InvalidProofError:
           errorToast($t('TODO: InvalidProofError'));
diff --git a/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte b/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte
index 6a12fac7350..4c373f8c542 100644
--- a/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte
+++ b/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte
@@ -65,7 +65,7 @@
   {/if}
 
   <div class="sm:w-1/4 md:w-1/5 py-2 flex flex-col justify-center">
-    <Status bridgeTx={item} />
+    <Status bridgeTx={item} isDesktopOrLarger={isDesktopOrLarger} isMobileDetailsDialog={false}/>
   </div>
   <div class="hidden md:flex w-1/5 py-2 flex flex-col justify-center">
     <a

From ba5fc6cb11825bdb34fa0c24af60edac97168582 Mon Sep 17 00:00:00 2001
From: xiaodino <ruby@taiko.xyz>
Date: Wed, 20 Sep 2023 00:44:38 -0700
Subject: [PATCH 2/2] Update

---
 .../components/Transactions/MobileDetailsDialog.svelte |  2 +-
 .../src/components/Transactions/Status.svelte          | 10 +++++++---
 .../src/components/Transactions/Transaction.svelte     |  2 +-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte b/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte
index e746ef00949..07c83580062 100644
--- a/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte
+++ b/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte
@@ -66,7 +66,7 @@
             </div>
           </h4>
           <div class="f-items-center space-x-1">
-            <Status bridgeTx={selectedItem} isDesktopOrLarger={false} isMobileDetailsDialog={true}/>
+            <Status bridgeTx={selectedItem} isFromMobileDetailsDialog={true}/>
           </div>
         </li>
         <li class="f-between-center">
diff --git a/packages/bridge-ui-v2/src/components/Transactions/Status.svelte b/packages/bridge-ui-v2/src/components/Transactions/Status.svelte
index f0857963435..f95b7bd4976 100644
--- a/packages/bridge-ui-v2/src/components/Transactions/Status.svelte
+++ b/packages/bridge-ui-v2/src/components/Transactions/Status.svelte
@@ -5,6 +5,7 @@
   import { parseEther, UserRejectedRequestError } from 'viem';
 
   import { chainConfig } from '$chainConfig';
+  import { DesktopOrLarger } from '$components/DesktopOrLarger';
   import {
     errorToast,
     infoToast,
@@ -36,8 +37,7 @@
   const log = getLogger('components:Status');
 
   export let bridgeTx: BridgeTransaction;
-  export let isDesktopOrLarger: boolean;
-  export let isMobileDetailsDialog: boolean;
+  export let isFromMobileDetailsDialog: boolean;
 
   let polling: ReturnType<typeof startPolling>;
 
@@ -45,6 +45,8 @@
   let processable = false; // bridge tx state to be processed: claimed/retried/released
   let bridgeTxStatus: Maybe<MessageStatus>;
 
+  let isDesktopOrLarger = false;
+
   let modalOpen = false;
 
   // TODO: enum?
@@ -142,7 +144,7 @@
           warningToast($t('transactions.actions.claim.rejected'));
           break;
         case err instanceof InsufficientBalanceError:
-          if (isDesktopOrLarger || isMobileDetailsDialog) {
+          if (isDesktopOrLarger || isFromMobileDetailsDialog) {
             modalOpen = true;
           }
           break;
@@ -299,3 +301,5 @@
 </div>
 
 <InsufficientFunds bind:modalOpen />
+
+<DesktopOrLarger bind:is={isDesktopOrLarger} />
diff --git a/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte b/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte
index 4c373f8c542..266d18c9b59 100644
--- a/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte
+++ b/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte
@@ -65,7 +65,7 @@
   {/if}
 
   <div class="sm:w-1/4 md:w-1/5 py-2 flex flex-col justify-center">
-    <Status bridgeTx={item} isDesktopOrLarger={isDesktopOrLarger} isMobileDetailsDialog={false}/>
+    <Status bridgeTx={item} isFromMobileDetailsDialog={false}/>
   </div>
   <div class="hidden md:flex w-1/5 py-2 flex flex-col justify-center">
     <a