[SDK] Feature: Allow proceeding past first checkout widget page with no wallet (#7937)

Author: gregfromstl

.changeset/eager-loops-fold.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Allows using the checkout widget without a wallet connected

packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx

@@ -277,7 +277,6 @@ export function BridgeOrchestrator({
       {state.value === "init" && uiOptions.mode === "direct_payment" && (
         <DirectPayment
           client={client}
-          connectOptions={modifiedConnectOptions}
           onContinue={handleRequirementsResolved}
           showThirdwebBranding={showThirdwebBranding}
           uiOptions={uiOptions}

packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx

@@ -22,8 +22,11 @@ import type { ConnectButton_connectModalOptions } from "../../../core/hooks/conn
 import type { SupportedTokens } from "../../../core/utils/defaultTokens.js";
 import { useConnectLocale } from "../ConnectWallet/locale/getConnectLocale.js";
 import { EmbedContainer } from "../ConnectWallet/Modal/ConnectEmbed.js";
+import { Container } from "../components/basic.js";
+import { Button } from "../components/buttons.js";
 import { DynamicHeight } from "../components/DynamicHeight.js";
 import { Spinner } from "../components/Spinner.js";
+import { Text } from "../components/text.js";
 import type { LocaleId } from "../types.js";
 import { BridgeOrchestrator, type UIOptions } from "./BridgeOrchestrator.js";
 import { UnsupportedTokenScreen } from "./UnsupportedTokenScreen.js";
@@ -421,6 +424,19 @@ export function CheckoutWidget(props: CheckoutWidgetProps) {
     );
   }
 
+  if (bridgeDataQuery.isError) {
+    content = (
+      <Container flex="column" center="both" gap="md" p="md" py="xl">
+        <Text center size="md" weight={600}>
+          Something went wrong.
+        </Text>
+        <Button variant="ghost" onClick={() => bridgeDataQuery.refetch()}>
+          Retry
+        </Button>
+      </Container>
+    );
+  }
+
   return (
     <CustomThemeProvider theme={theme}>
       <EmbedContainer

packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx

@@ -3,17 +3,13 @@ import type { Token } from "../../../../bridge/types/Token.js";
 import { defineChain } from "../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { Address } from "../../../../utils/address.js";
-import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
-import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
-import { ConnectButton } from "../ConnectWallet/ConnectButton.js";
 import { PoweredByThirdweb } from "../ConnectWallet/PoweredByTW.js";
 import { FiatValue } from "../ConnectWallet/screens/Buy/swap/FiatValue.js";
 import { Container, Line } from "../components/basic.js";
 import { Button } from "../components/buttons.js";
 import { ChainName } from "../components/ChainName.js";
 import { Spacer } from "../components/Spacer.js";
 import { Text } from "../components/text.js";
-import type { PayEmbedConnectOptions } from "../PayEmbed.js";
 import type { UIOptions } from "./BridgeOrchestrator.js";
 import { ChainIcon } from "./common/TokenAndChain.js";
 import { WithHeader } from "./common/WithHeader.js";
@@ -34,11 +30,6 @@ export interface DirectPaymentProps {
    */
   onContinue: (amount: string, token: Token, receiverAddress: Address) => void;
 
-  /**
-   * Connect options for wallet connection
-   */
-  connectOptions?: PayEmbedConnectOptions;
-
   /**
    * Whether to show thirdweb branding in the widget.
    * @default true
@@ -50,12 +41,9 @@ export function DirectPayment({
   uiOptions,
   client,
   onContinue,
-  connectOptions,
   showThirdwebBranding = true,
 }: DirectPaymentProps) {
-  const activeAccount = useActiveAccount();
   const chain = defineChain(uiOptions.paymentInfo.token.chainId);
-  const theme = useCustomTheme();
   const handleContinue = () => {
     onContinue(
       uiOptions.paymentInfo.amount,
@@ -188,23 +176,9 @@ export function DirectPayment({
 
       {/* Action button */}
       <Container flex="column">
-        {activeAccount ? (
-          <Button fullWidth onClick={handleContinue} variant="primary">
-            {buyNow}
-          </Button>
-        ) : (
-          <ConnectButton
-            client={client}
-            connectButton={{
-              label: buyNow,
-              style: {
-                width: "100%",
-              },
-            }}
-            theme={theme}
-            {...connectOptions}
-          />
-        )}
+        <Button fullWidth onClick={handleContinue} variant="primary">
+          {buyNow}
+        </Button>
 
         {showThirdwebBranding ? (
           <div>

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx

@@ -121,10 +121,10 @@ export function WalletFiatSelection({
               </Container>
               <Container flex="column" gap="3xs" style={{ flex: 1 }}>
                 <Text color="primaryText" size="sm" style={{ fontWeight: 600 }}>
-                  Connect Another Wallet
+                  Connect a Wallet
                 </Text>
                 <Text color="secondaryText" size="xs">
-                  Use a different wallet to pay
+                  Pay with any web3 wallet
                 </Text>
               </Container>
             </Container>
@@ -169,7 +169,7 @@ export function WalletFiatSelection({
                   Pay with Card
                 </Text>
                 <Text color="secondaryText" size="xs">
-                  Buy crypto and bridge in one step
+                  Onramp and pay in one step
                 </Text>
               </Container>
             </Container>