thirdweb 5.30.0-nightly-e7434891354f351d2a399daebdddae9cf1fc817b-20240623000619 → 5.30.0-nightly-3979ff0238ae9b3a0a216e6c2d562eb7206a9fe8-20240626085813

package/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -1,3 +1,4 @@
+import { IdCardIcon } from "@radix-ui/react-icons";
 import { useMemo, useState } from "react";
 import type { Chain } from "../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../client/client.js";
@@ -10,6 +11,7 @@ import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
 import {
   type Theme,
   fontSize,
+  iconSize,
   spacing,
 } from "../../../../../core/design-system/index.js";
 import {
@@ -22,6 +24,7 @@ import { useBuyWithFiatQuote } from "../../../../../core/hooks/pay/useBuyWithFia
 import { useActiveAccount } from "../../../../hooks/wallets/useActiveAccount.js";
 import { useActiveWalletChain } from "../../../../hooks/wallets/useActiveWalletChain.js";
 import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
+import { ChainName } from "../../../components/ChainName.js";
 import {
   Drawer,
   DrawerOverlay,
@@ -36,9 +39,11 @@ import { TokenIcon } from "../../../components/TokenIcon.js";
 import { Container, Line, ModalHeader } from "../../../components/basic.js";
 import { Button } from "../../../components/buttons.js";
 import { Text } from "../../../components/text.js";
+import { TokenSymbol } from "../../../components/token/TokenSymbol.js";
 import type { PayUIOptions } from "../../ConnectButtonProps.js";
 import { ChainButton, NetworkSelectorContent } from "../../NetworkSelector.js";
 import type { SupportedTokens } from "../../defaultTokens.js";
+import { CoinsIcon } from "../../icons/CoinsIcon.js";
 import type { ConnectLocale } from "../../locale/types.js";
 import { TokenSelector } from "../TokenSelector.js";
 import {
@@ -47,8 +52,8 @@ import {
   isNativeToken,
 } from "../nativeToken.js";
 import { EstimatedTimeAndFees } from "./EstimatedTimeAndFees.js";
+import { PayTokenIcon } from "./PayTokenIcon.js";
 import { PayWithCreditCard } from "./PayWIthCreditCard.js";
-import { PaymentSelection } from "./PaymentSelection.js";
 import { CurrencySelection } from "./fiat/CurrencySelection.js";
 import { FiatFlow } from "./fiat/FiatFlow.js";
 import type { CurrencyMeta } from "./fiat/currencies.js";
@@ -119,19 +124,9 @@ type BuyScreenContentProps = {
   isEmbed: boolean;
 };
 
-function useBuyScreenStates(options: { payOptions: PayUIOptions }) {
-  const { payOptions } = options;
-
-  const [method, setMethod] = useState<"crypto" | "creditCard">(
-    payOptions.buyWithCrypto === false
-      ? "creditCard"
-      : payOptions.buyWithFiat === false
-        ? "crypto"
-        : "creditCard",
-  );
-
+function useBuyScreenStates() {
   const [screen, setScreen] = useState<SelectedScreen>({
-    type: "main",
+    id: "main",
   });
 
   const [drawerScreen, setDrawerScreen] = useState<React.ReactNode>();
@@ -143,15 +138,7 @@ function useBuyScreenStates(options: { payOptions: PayUIOptions }) {
     });
   }
 
-  function showMainScreen() {
-    setScreen({
-      type: "main",
-    });
-  }
-
   return {
-    method,
-    setMethod,
     screen,
     setScreen,
     drawerScreen,
@@ -159,7 +146,6 @@ function useBuyScreenStates(options: { payOptions: PayUIOptions }) {
     drawerRef,
     drawerOverlayRef,
     closeDrawer,
-    showMainScreen,
   };
 }
 
@@ -178,8 +164,6 @@ function BuyScreenContent(props: BuyScreenContentProps) {
 
   // screen
   const {
-    method,
-    setMethod,
     screen,
     setScreen,
     drawerScreen,
@@ -187,15 +171,12 @@ function BuyScreenContent(props: BuyScreenContentProps) {
     drawerRef,
     drawerOverlayRef,
     closeDrawer,
-    showMainScreen,
-  } = useBuyScreenStates({ payOptions });
+  } = useBuyScreenStates();
 
   // UI selection
   const {
     tokenAmount,
     setTokenAmount,
-    setHasEditedAmount,
-    hasEditedAmount,
     toChain,
     setToChain,
     deferredTokenAmount,
@@ -213,17 +194,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
     supportedDestinations,
   });
 
-  // Buy Transaction flow states
-  const { amountNeeded } = useBuyTxStates({
-    setTokenAmount,
-    buyForTx,
-    hasEditedAmount,
-    isMainScreen: screen.type === "main",
-    account,
-  });
-
   // check if the screen is expanded or not
-  const isExpanded = activeChain && tokenAmount;
 
   // update supportedSources whenever toToken or toChain is updated
   const supportedSourcesQuery = useBuySupportedSources({
@@ -254,35 +225,28 @@ function BuyScreenContent(props: BuyScreenContentProps) {
     );
   }, [props.supportedTokens, supportedSourcesQuery.data, payOptions]);
 
-  const { showPaymentSelection } = useEnabledPaymentMethods({
-    payOptions,
-    supportedDestinations,
-    toChain,
-    toToken,
-    method,
-    setMethod,
-  });
-
   // screens ----------------------------
 
-  if (screen.type === "node") {
+  if (screen.id === "node") {
     return screen.node;
   }
 
-  if (screen.type === "select-currency") {
+  if (screen.id === "select-currency") {
+    const goBack = () => setScreen(screen.backScreen);
     return (
       <CurrencySelection
         onSelect={(currency) => {
-          showMainScreen();
+          goBack();
           setSelectedCurrency(currency);
         }}
-        onBack={showMainScreen}
+        onBack={goBack}
       />
     );
   }
 
-  if (screen.type === "screen-id" && screen.name === "select-to-token") {
+  if (screen.id === "select-to-token") {
     const chains = supportedDestinations.map((x) => x.chain);
+    const goBack = () => setScreen(screen.backScreen);
     // if token selection is disabled - only show network selector screen
     if (payOptions.prefillBuy?.allowEdits?.token === false) {
       return (
@@ -291,21 +255,21 @@ function BuyScreenContent(props: BuyScreenContentProps) {
           client={props.client}
           connectLocale={props.connectLocale}
           setChain={setToChain}
-          showMainScreen={showMainScreen}
+          goBack={goBack}
         />
       );
     }
 
     return (
       <TokenSelector
-        onBack={showMainScreen}
+        onBack={goBack}
         tokenList={(
           (toChain?.id ? destinationSupportedTokens[toChain.id] : undefined) ||
           []
         ).filter((x) => x.address !== NATIVE_TOKEN_ADDRESS)}
         onTokenSelect={(tokenInfo) => {
           setToToken(tokenInfo);
-          showMainScreen();
+          goBack();
         }}
         chain={toChain}
         chainSelection={
@@ -321,17 +285,18 @@ function BuyScreenContent(props: BuyScreenContentProps) {
         }
         connectLocale={connectLocale}
         client={client}
+        modalTitle="Buy"
       />
     );
   }
 
   if (
-    screen.type === "screen-id" &&
-    screen.name === "select-from-token" &&
+    screen.id === "select-from-token" &&
     supportedSourcesQuery.data &&
     sourceSupportedTokens
   ) {
     const chains = supportedSourcesQuery.data.map((x) => x.chain);
+    const goBack = () => setScreen(screen.backScreen);
     // if token selection is disabled - only show network selector screen
     if (
       payOptions.buyWithCrypto !== false &&
@@ -343,23 +308,21 @@ function BuyScreenContent(props: BuyScreenContentProps) {
           client={props.client}
           connectLocale={props.connectLocale}
           setChain={setFromChain}
-          showMainScreen={showMainScreen}
+          goBack={goBack}
         />
       );
     }
 
     return (
       <TokenSelector
-        onBack={showMainScreen}
+        onBack={goBack}
         tokenList={(
           (fromChain?.id ? sourceSupportedTokens[fromChain.id] : undefined) ||
           []
         ).filter((x) => x.address !== NATIVE_TOKEN_ADDRESS)}
         onTokenSelect={(tokenInfo) => {
           setFromToken(tokenInfo);
-          setScreen({
-            type: "main",
-          });
+          goBack();
         }}
         chain={fromChain}
         chainSelection={
@@ -374,6 +337,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
         }
         connectLocale={connectLocale}
         client={client}
+        modalTitle="Pay with"
       />
     );
   }
@@ -404,74 +368,51 @@ function BuyScreenContent(props: BuyScreenContentProps) {
           </>
         )}
 
-        <Container
-          p="lg"
-          style={{
-            paddingBottom: 0,
-          }}
-        >
-          <ModalHeader
-            title={
-              props.buyForTx
-                ? `Not enough ${props.buyForTx.tokenSymbol}`
-                : "Buy"
+        {screen.id === "main" && (
+          <MainScreen
+            account={account || null}
+            buyForTx={buyForTx || null}
+            client={client}
+            onSelectBuyToken={() =>
+              setScreen({ id: "select-to-token", backScreen: screen })
             }
-            onBack={props.onBack}
+            payOptions={payOptions}
+            setTokenAmount={setTokenAmount}
+            toChain={toChain}
+            toToken={toToken}
+            tokenAmount={tokenAmount}
+            connectButton={props.connectButton}
+            onViewPendingTx={props.onViewPendingTx}
+            setScreen={setScreen}
+            supportedDestinations={supportedDestinations}
           />
+        )}
 
-          <Spacer y="lg" />
-          {!isExpanded && <Spacer y="xl" />}
-
-          {/* Amount needed for Send Tx */}
-          {amountNeeded && props.buyForTx ? (
-            <BuyForTxUI
-              amountNeeded={String(
-                formatNumber(Number(toEther(amountNeeded)), 4),
-              )}
-              buyForTx={props.buyForTx}
-              client={client}
-            />
-          ) : null}
-
-          {/* To */}
-          <BuyTokenInput
-            value={tokenAmount}
-            onChange={async (value) => {
-              setHasEditedAmount(true);
-              setTokenAmount(value);
-            }}
-            freezeAmount={payOptions.prefillBuy?.allowEdits?.amount === false}
-            freezeChainAndToken={
-              payOptions.prefillBuy?.allowEdits?.chain === false &&
-              payOptions.prefillBuy?.allowEdits?.token === false
-            }
-            token={toToken}
-            chain={toChain}
-            onSelectToken={() => {
-              setScreen({
-                type: "screen-id",
-                name: "select-to-token",
-              });
+        {(screen.id === "select-payment-method" ||
+          screen.id === "buy-with-crypto" ||
+          screen.id === "buy-with-fiat") && (
+          <TokenSelectedLayout
+            selectedChain={toChain}
+            selectedToken={toToken}
+            tokenAmount={tokenAmount}
+            client={client}
+            onBack={() => {
+              if (
+                screen.id === "buy-with-crypto" ||
+                screen.id === "buy-with-fiat"
+              ) {
+                setScreen({ id: "select-payment-method" });
+              } else if (screen.id === "select-payment-method") {
+                setScreen({ id: "main" });
+              }
             }}
-            client={props.client}
-            hideTokenSelector={!!props.buyForTx}
-          />
-        </Container>
-
-        {showPaymentSelection ? <Spacer y="lg" /> : <Spacer y="md" />}
-
-        {isExpanded && (
-          <>
-            {showPaymentSelection && (
-              <Container px="lg">
-                <PaymentSelection selected={method} onSelect={setMethod} />
-                <Spacer y="md" />
-              </Container>
+          >
+            {screen.id === "select-payment-method" && (
+              <PaymentMethodSelection setScreen={(id) => setScreen({ id })} />
             )}
 
-            {method === "crypto" && account && activeChain && (
+            {screen.id === "buy-with-crypto" && account && activeChain && (
               <SwapScreenContent
-                {...props}
                 setScreen={setScreen}
                 setDrawerScreen={setDrawerScreen}
                 tokenAmount={deferredTokenAmount}
@@ -481,91 +422,354 @@ function BuyScreenContent(props: BuyScreenContentProps) {
                 fromToken={fromToken}
                 showFromTokenSelector={() => {
                   setScreen({
-                    type: "screen-id",
-                    name: "select-from-token",
+                    id: "select-from-token",
+                    backScreen: screen,
                   });
                 }}
                 account={account}
                 activeChain={activeChain}
+                buyForTx={buyForTx || null}
+                client={client}
+                isEmbed={props.isEmbed}
+                onDone={props.onDone}
+                onViewPendingTx={props.onViewPendingTx}
+                payOptions={payOptions}
               />
             )}
 
-            {method === "creditCard" && account && (
+            {screen.id === "buy-with-fiat" && account && activeChain && (
               <FiatScreenContent
-                {...props}
                 setScreen={setScreen}
                 setDrawerScreen={setDrawerScreen}
                 tokenAmount={deferredTokenAmount}
                 toChain={toChain}
                 toToken={toToken}
-                closeDrawer={closeDrawer}
                 selectedCurrency={selectedCurrency}
+                buyForTx={buyForTx || null}
+                client={client}
+                isEmbed={props.isEmbed}
+                onDone={props.onDone}
+                onViewPendingTx={props.onViewPendingTx}
+                payOptions={payOptions}
+                theme={props.theme}
                 showCurrencySelector={() => {
                   setScreen({
-                    type: "select-currency",
+                    id: "select-currency",
+                    backScreen: screen,
                   });
                 }}
                 account={account}
               />
             )}
+          </TokenSelectedLayout>
+        )}
+      </div>
+    </Container>
+  );
+}
 
-            <Spacer y="sm" />
-          </>
+function SelectedTokenInfo(props: {
+  selectedToken: ERC20OrNativeToken;
+  selectedChain: Chain;
+  tokenAmount: string;
+  client: ThirdwebClient;
+}) {
+  return (
+    <div>
+      <Container
+        flex="row"
+        gap="sm"
+        center="y"
+        style={{
+          justifyContent: "space-between",
+        }}
+      >
+        <Container flex="row" gap="xs" center="y">
+          <Text color="primaryText" data-testid="tokenAmount" size="xxl">
+            {formatNumber(Number(props.tokenAmount), 3)}
+          </Text>
+
+          <Container flex="row" gap="xxs" center="y">
+            <TokenSymbol
+              token={props.selectedToken}
+              chain={props.selectedChain}
+              size="md"
+              color="secondaryText"
+            />
+            <PayTokenIcon
+              chain={props.selectedChain}
+              client={props.client}
+              size="sm"
+              token={props.selectedToken}
+            />
+          </Container>
+        </Container>
+
+        <ChainName
+          chain={props.selectedChain}
+          client={props.client}
+          size="sm"
+          short
+        />
+      </Container>
+    </div>
+  );
+}
+
+function MainScreen(props: {
+  buyForTx: BuyForTx | null;
+  client: ThirdwebClient;
+  setTokenAmount: (amount: string) => void;
+  account: Account | null;
+  tokenAmount: string;
+  payOptions: PayUIOptions;
+  toToken: ERC20OrNativeToken;
+  toChain: Chain;
+  onSelectBuyToken: () => void;
+  connectButton?: React.ReactNode;
+  onViewPendingTx: () => void;
+  setScreen: (screen: SelectedScreen) => void;
+  supportedDestinations: SupportedChainAndTokens;
+}) {
+  const { showPaymentSelection, buyWithCryptoEnabled, buyWithFiatEnabled } =
+    useEnabledPaymentMethods({
+      payOptions: props.payOptions,
+      supportedDestinations: props.supportedDestinations,
+      toChain: props.toChain,
+      toToken: props.toToken,
+    });
+
+  const [hasEditedAmount, setHasEditedAmount] = useState(false);
+  const {
+    buyForTx,
+    setTokenAmount,
+    account,
+    client,
+    tokenAmount,
+    payOptions,
+    toToken,
+    toChain,
+  } = props;
+
+  // Buy Transaction flow states
+  const { amountNeeded } = useBuyTxStates({
+    setTokenAmount,
+    buyForTx,
+    hasEditedAmount,
+    account,
+  });
+
+  const disableContinue = !tokenAmount;
+
+  return (
+    <Container p="lg">
+      <ModalHeader
+        title={
+          props.buyForTx ? `Not enough ${props.buyForTx.tokenSymbol}` : "Buy"
+        }
+      />
+
+      {/* Amount needed for Send Tx */}
+      {amountNeeded && props.buyForTx ? (
+        <>
+          <Spacer y="lg" />
+          <BuyForTxUI
+            amountNeeded={String(
+              formatNumber(Number(toEther(amountNeeded)), 4),
+            )}
+            buyForTx={props.buyForTx}
+            client={client}
+          />
+        </>
+      ) : (
+        <Spacer y="xl" />
+      )}
+
+      {/* To */}
+      <BuyTokenInput
+        value={tokenAmount}
+        onChange={async (value) => {
+          setHasEditedAmount(true);
+          setTokenAmount(value);
+        }}
+        freezeAmount={payOptions.prefillBuy?.allowEdits?.amount === false}
+        freezeChainAndToken={
+          payOptions.prefillBuy?.allowEdits?.chain === false &&
+          payOptions.prefillBuy?.allowEdits?.token === false
+        }
+        token={toToken}
+        chain={toChain}
+        onSelectToken={props.onSelectBuyToken}
+        client={props.client}
+        hideTokenSelector={!!props.buyForTx}
+      />
+
+      <Spacer y="xl" />
+
+      {/* Continue */}
+      <Container flex="column" gap="sm">
+        {!account && props.connectButton ? (
+          <div>{props.connectButton}</div>
+        ) : (
+          <Button
+            variant="accent"
+            fullWidth
+            disabled={disableContinue}
+            data-disabled={disableContinue}
+            onClick={() => {
+              if (showPaymentSelection) {
+                props.setScreen({ id: "select-payment-method" });
+              } else if (buyWithCryptoEnabled) {
+                props.setScreen({ id: "buy-with-crypto" });
+              } else if (buyWithFiatEnabled) {
+                props.setScreen({ id: "buy-with-fiat" });
+              } else {
+                console.error("No payment method enabled");
+              }
+            }}
+          >
+            Continue
+          </Button>
         )}
 
-        <Container px="lg" flex="column" gap="sm">
-          {!isExpanded && (
-            <>
-              {!account && props.connectButton ? (
-                <div>{props.connectButton}</div>
-              ) : (
-                <Button
-                  variant="accent"
-                  fullWidth
-                  disabled={true}
-                  data-disable={true}
-                >
-                  Continue
-                </Button>
-              )}
-            </>
-          )}
+        {/* Do we want to remove this? */}
+        {account && (
+          <Button
+            variant="outline"
+            fullWidth
+            style={{
+              padding: spacing.xs,
+              fontSize: fontSize.sm,
+            }}
+            onClick={props.onViewPendingTx}
+          >
+            View all transactions
+          </Button>
+        )}
+      </Container>
+    </Container>
+  );
+}
+
+function TokenSelectedLayout(props: {
+  children: React.ReactNode;
+  tokenAmount: string;
+  selectedToken: ERC20OrNativeToken;
+  selectedChain: Chain;
+  client: ThirdwebClient;
+  onBack: () => void;
+}) {
+  return (
+    <Container>
+      <Container p="lg">
+        <ModalHeader title={"Buy"} onBack={props.onBack} />
+      </Container>
 
-          {account && (
-            <Button
-              variant="outline"
-              fullWidth
+      <Container
+        px="lg"
+        style={{
+          paddingBottom: spacing.lg,
+        }}
+      >
+        <Spacer y="xs" />
+        <SelectedTokenInfo
+          selectedToken={props.selectedToken}
+          selectedChain={props.selectedChain}
+          tokenAmount={props.tokenAmount}
+          client={props.client}
+        />
+
+        <Spacer y="md" />
+        <Line />
+        <Spacer y="lg" />
+
+        <Text size="sm"> Pay with </Text>
+        <Spacer y="sm" />
+
+        {props.children}
+      </Container>
+    </Container>
+  );
+}
+
+function PaymentMethodSelection(props: {
+  setScreen: (screenId: "buy-with-crypto" | "buy-with-fiat") => void;
+}) {
+  return (
+    <Container animate="fadein">
+      {/* Credit Card */}
+      <Container flex="column" gap="sm">
+        <Button
+          variant="outline"
+          bg="tertiaryBg"
+          onClick={() => props.setScreen("buy-with-fiat")}
+          gap="sm"
+          style={{
+            justifyContent: "flex-start",
+            textAlign: "left",
+          }}
+        >
+          <Container color="secondaryText" flex="row" center="both">
+            <IdCardIcon
               style={{
-                padding: spacing.xs,
-                fontSize: fontSize.sm,
+                width: iconSize.md,
+                height: iconSize.md,
               }}
-              onClick={props.onViewPendingTx}
-            >
-              View all transactions
-            </Button>
-          )}
-        </Container>
+            />
+          </Container>
 
-        <Spacer y="lg" />
-      </div>
+          <Container flex="column" gap="xxs">
+            <Text size="md" color="primaryText">
+              Credit Card
+            </Text>
+            <Text size="xs">Easily and securely make payments</Text>
+          </Container>
+        </Button>
+
+        {/* Crypto */}
+        <Button
+          variant="outline"
+          bg="tertiaryBg"
+          onClick={() => props.setScreen("buy-with-crypto")}
+          style={{
+            justifyContent: "flex-start",
+          }}
+          gap="sm"
+        >
+          <Container color="secondaryText" flex="row" center="both">
+            <CoinsIcon size={iconSize.md} />
+          </Container>
+
+          <Container flex="column" gap="xxs">
+            <Text size="md" color="primaryText">
+              Crypto
+            </Text>
+            <Text size="xs">Pay with confidence using crypto</Text>
+          </Container>
+        </Button>
+      </Container>
     </Container>
   );
 }
 
-function SwapScreenContent(
-  props: BuyScreenContentProps & {
-    setDrawerScreen: (screen: React.ReactNode) => void;
-    setScreen: (screen: SelectedScreen) => void;
-    tokenAmount: string;
-    toToken: ERC20OrNativeToken;
-    toChain: Chain;
-    fromChain: Chain;
-    fromToken: ERC20OrNativeToken;
-    showFromTokenSelector: () => void;
-    account: Account;
-    activeChain: Chain;
-  },
-) {
+function SwapScreenContent(props: {
+  setDrawerScreen: (screen: React.ReactNode) => void;
+  setScreen: (screen: SelectedScreen) => void;
+  tokenAmount: string;
+  toToken: ERC20OrNativeToken;
+  toChain: Chain;
+  fromChain: Chain;
+  fromToken: ERC20OrNativeToken;
+  showFromTokenSelector: () => void;
+  account: Account;
+  activeChain: Chain;
+  client: ThirdwebClient;
+  payOptions: PayUIOptions;
+  buyForTx: BuyForTx | null;
+  isEmbed: boolean;
+  onViewPendingTx: () => void;
+  onDone: () => void;
+}) {
   const {
     setDrawerScreen,
     setScreen,
@@ -646,7 +850,7 @@ function SwapScreenContent(
     }
 
     setScreen({
-      type: "node",
+      id: "node",
       node: (
         <SwapFlow
           isBuyForTx={!!props.buyForTx}
@@ -654,7 +858,7 @@ function SwapScreenContent(
           client={client}
           onBack={() => {
             setScreen({
-              type: "main",
+              id: "buy-with-crypto",
             });
           }}
           buyWithCryptoQuote={quoteQuery.data}
@@ -664,7 +868,7 @@ function SwapScreenContent(
           onDone={props.onDone}
           onTryAgain={() => {
             setScreen({
-              type: "main",
+              id: "buy-with-crypto",
             });
             quoteQuery.refetch();
           }}
@@ -695,7 +899,7 @@ function SwapScreenContent(
       : undefined;
 
   return (
-    <Container px="lg" flex="column" gap="md">
+    <Container flex="column" gap="md" animate="fadein">
       {/* Quote info */}
       <div>
         <PayWithCrypto
@@ -749,8 +953,8 @@ function SwapScreenContent(
             <Text color="danger">Not Enough Funds</Text>
           ) : quoteQuery.isLoading ? (
             <>
-              <Spinner size="sm" color="accentText" />
               Getting price quote
+              <Spinner size="sm" color="accentText" />
             </>
           ) : (
             "Continue"
@@ -761,19 +965,23 @@ function SwapScreenContent(
   );
 }
 
-function FiatScreenContent(
-  props: BuyScreenContentProps & {
-    setDrawerScreen: (screen: React.ReactNode) => void;
-    setScreen: (screen: SelectedScreen) => void;
-    tokenAmount: string;
-    toToken: ERC20OrNativeToken;
-    toChain: Chain;
-    closeDrawer: () => void;
-    selectedCurrency: CurrencyMeta;
-    showCurrencySelector: () => void;
-    account: Account;
-  },
-) {
+function FiatScreenContent(props: {
+  setDrawerScreen: (screen: React.ReactNode) => void;
+  setScreen: (screen: SelectedScreen) => void;
+  tokenAmount: string;
+  toToken: ERC20OrNativeToken;
+  toChain: Chain;
+  selectedCurrency: CurrencyMeta;
+  showCurrencySelector: () => void;
+  account: Account;
+  payOptions: PayUIOptions;
+  theme: "light" | "dark" | Theme;
+  buyForTx: BuyForTx | null;
+  client: ThirdwebClient;
+  onViewPendingTx: () => void;
+  onDone: () => void;
+  isEmbed: boolean;
+}) {
   const {
     toToken,
     tokenAmount,
@@ -827,14 +1035,14 @@ function FiatScreenContent(
     }
 
     setScreen({
-      type: "node",
+      id: "node",
       node: (
         <FiatFlow
           isBuyForTx={!!props.buyForTx}
           quote={fiatQuoteQuery.data}
           onBack={() => {
             setScreen({
-              type: "main",
+              id: "buy-with-fiat",
             });
           }}
           client={client}
@@ -899,8 +1107,7 @@ function FiatScreenContent(
   const disableSubmit = !fiatQuoteQuery.data;
 
   return (
-    <Container px="lg" flex="column" gap="md">
-      {/* Show Calculated Fiat Amount */}
+    <Container flex="column" gap="md" animate="fadein">
       <div>
         <PayWithCreditCard
           isLoading={fiatQuoteQuery.isLoading}
@@ -939,8 +1146,8 @@ function FiatScreenContent(
       >
         {fiatQuoteQuery.isLoading ? (
           <>
-            <Spinner size="sm" color="accentText" />
             Getting price quote
+            <Spinner size="sm" color="accentText" />
           </>
         ) : (
           "Continue"
@@ -1020,7 +1227,7 @@ function BuyForTxUI(props: {
 
       <Spacer y="md" />
       <Line />
-      <Spacer y="lg" />
+      <Spacer y="xl" />
 
       <Text center size="sm">
         Purchase
@@ -1077,7 +1284,7 @@ function createSupportedTokens(
 }
 
 function ChainSelectionScreen(props: {
-  showMainScreen: () => void;
+  goBack: () => void;
   chains: Chain[];
   client: ThirdwebClient;
   connectLocale: ConnectLocale;
@@ -1088,9 +1295,9 @@ function ChainSelectionScreen(props: {
       client={props.client}
       connectLocale={props.connectLocale}
       showTabs={false}
-      onBack={props.showMainScreen}
+      onBack={props.goBack}
       chains={props.chains}
-      closeModal={props.showMainScreen}
+      closeModal={props.goBack}
       networkSelector={{
         renderChain(renderChainProps) {
           return (
@@ -1100,7 +1307,7 @@ function ChainSelectionScreen(props: {
               switchingFailed={false}
               onClick={() => {
                 props.setChain(renderChainProps.chain);
-                props.showMainScreen();
+                props.goBack();
               }}
               client={props.client}
               connectLocale={props.connectLocale}