From 68b48f4faa16af2cf77b5faae9f6341e2541469b Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Mon, 6 Oct 2025 22:33:31 +0000
Subject: [PATCH] [MNY-232] SDK: Fix ExecutingTxScreen missing back button in
 TransactionWidget (#8193)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating the `onBack` functionality in the `TransactionWidget` and `TransactionModal` components, ensuring that the back navigation behavior is more consistent across these components.

### Detailed summary
- In `TransactionWidget.tsx`, `onBack` now sets the screen to `init-ui`.
- In `TransactionModal.tsx`, `onBack` sets the screen to `deposit`.
- In `ExecutingScreen.tsx`, the `onBack` prop is changed from optional to required.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **New Features**
  * Added back navigation from the executing transaction screen, allowing users to return to the previous step without closing the modal.
  * Unified back-button behavior across transaction flows for a more consistent experience.
  * Provides clearer control during long-running executions with an explicit back option.
  * Navigation enhancement applies to both bridge and transaction modal flows, improving step-to-step control while keeping transaction processing unchanged.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx     | 3 +++
 .../src/react/web/ui/TransactionButton/ExecutingScreen.tsx     | 2 +-
 .../src/react/web/ui/TransactionButton/TransactionModal.tsx    | 3 +++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
index 03e195195ab..02204e189b5 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
@@ -770,6 +770,9 @@ function TransactionWidgetContent(
   if (screen.id === "execute-tx") {
     return (
       <ExecutingTxScreen
+        onBack={() => {
+          setScreen({ id: "init-ui" });
+        }}
         closeModal={() => {
           setScreen({ id: "init-ui" });
         }}
diff --git a/packages/thirdweb/src/react/web/ui/TransactionButton/ExecutingScreen.tsx b/packages/thirdweb/src/react/web/ui/TransactionButton/ExecutingScreen.tsx
index 5270a22bd72..0fbc3b36e81 100644
--- a/packages/thirdweb/src/react/web/ui/TransactionButton/ExecutingScreen.tsx
+++ b/packages/thirdweb/src/react/web/ui/TransactionButton/ExecutingScreen.tsx
@@ -20,7 +20,7 @@ export function ExecutingTxScreen(props: {
   tx: PreparedTransaction;
   closeModal: () => void;
   onTxSent: (data: WaitForReceiptOptions) => void;
-  onBack?: () => void;
+  onBack: (() => void) | undefined;
   windowAdapter: WindowAdapter;
 }) {
   const sendTxCore = useSendTransaction({
diff --git a/packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx b/packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx
index b3c3663c075..ba58fa3a381 100644
--- a/packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx
+++ b/packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx
@@ -133,6 +133,9 @@ function DepositAndExecuteTx(props: ModalProps) {
   if (screen === "execute-tx") {
     return (
       <ExecutingTxScreen
+        onBack={() => {
+          setScreen("deposit");
+        }}
         closeModal={props.onClose}
         onTxSent={props.onTxSent}
         tx={props.tx}