fix: CNCT-1176 (#3059)

Author: jnsdls

.changeset/strong-onions-sing.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+fix losing state when looking at transactions during pay

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -498,20 +498,6 @@ function BuyScreenContent(props: BuyScreenContentProps) {
         )}
 
         <Container px="lg" flex="column" gap="sm">
-          {account && (
-            <Button
-              variant="outline"
-              fullWidth
-              style={{
-                padding: spacing.xs,
-                fontSize: fontSize.sm,
-              }}
-              onClick={props.onViewPendingTx}
-            >
-              View all transactions
-            </Button>
-          )}
-
           {!isExpanded && (
             <>
               {!account && props.connectButton ? (
@@ -528,6 +514,20 @@ function BuyScreenContent(props: BuyScreenContentProps) {
               )}
             </>
           )}
+
+          {account && (
+            <Button
+              variant="outline"
+              fullWidth
+              style={{
+                padding: spacing.xs,
+                fontSize: fontSize.sm,
+              }}
+              onClick={props.onViewPendingTx}
+            >
+              View all transactions
+            </Button>
+          )}
         </Container>
 
         <Spacer y="lg" />

packages/thirdweb/src/react/web/ui/PayEmbed.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import type { Chain } from "../../../chains/types.js";
 import type { ThirdwebClient } from "../../../client/client.js";
@@ -165,47 +167,52 @@ export function PayEmbed(props: PayEmbedProps) {
         <Spinner size="xl" color="secondaryText" />
       </div>
     );
-  } else if (screen === "tx-history") {
-    content = (
-      <BuyTxHistory
-        client={props.client}
-        onBack={() => {
-          setScreen("buy");
-        }}
-        onDone={() => {
-          // noop
-        }}
-        isBuyForTx={false}
-        isEmbed={true}
-      />
-    );
   } else {
+    // show and hide screens with CSS to not lose state when switching between them
     content = (
-      <BuyScreen
-        isEmbed={true}
-        supportedTokens={props.supportedTokens}
-        theme={props.theme || "dark"}
-        client={props.client}
-        connectLocale={localeQuery.data}
-        onViewPendingTx={() => {
-          setScreen("tx-history");
-        }}
-        payOptions={props.payOptions || {}}
-        onDone={() => {
-          // noop
-        }}
-        connectButton={
-          <ConnectButton
-            {...props.connectOptions}
+      <>
+        <div style={{ display: screen === "tx-history" ? "none" : "inherit" }}>
+          <BuyScreen
+            isEmbed={true}
+            supportedTokens={props.supportedTokens}
+            theme={props.theme || "dark"}
+            client={props.client}
+            connectLocale={localeQuery.data}
+            onViewPendingTx={() => {
+              setScreen("tx-history");
+            }}
+            payOptions={props.payOptions || {}}
+            onDone={() => {
+              // noop
+            }}
+            connectButton={
+              <ConnectButton
+                {...props.connectOptions}
+                client={props.client}
+                connectButton={{
+                  style: {
+                    width: "100%",
+                  },
+                }}
+              />
+            }
+          />
+        </div>
+        {/* this does not need to persist so we can just show-hide it with JS */}
+        {screen === "tx-history" && (
+          <BuyTxHistory
             client={props.client}
-            connectButton={{
-              style: {
-                width: "100%",
-              },
+            onBack={() => {
+              setScreen("buy");
+            }}
+            onDone={() => {
+              // noop
             }}
+            isBuyForTx={false}
+            isEmbed={true}
           />
-        }
-      />
+        )}
+      </>
     );
   }