[thirdweb] fix: Respect buyWithFiat setting in PayEmbed (#6289)

Author: joaquim-verges

.changeset/eight-pandas-serve.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Respect buy with fiat disabled in pay embed

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

@@ -558,6 +558,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
                 supportedSourcesQuery.data &&
                 sourceSupportedTokens && (
                   <TokenSelectorScreen
+                    fiatSupported={props.payOptions.buyWithFiat !== false}
                     client={props.client}
                     sourceTokens={sourceSupportedTokens}
                     sourceSupportedTokens={sourceSupportedTokens}

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

@@ -69,6 +69,7 @@ export function TokenSelectorScreen(props: {
   onSelectToken: (wallet: Wallet, token: TokenInfo, chain: Chain) => void;
   onConnect: () => void;
   onPayWithFiat: () => void;
+  fiatSupported: boolean;
 }) {
   const connectedWallets = useConnectedWallets();
   const activeAccount = useActiveAccount();
@@ -255,29 +256,31 @@ export function TokenSelectorScreen(props: {
               </Text>
             </Container>
           </Button>
-          <Button
-            variant="secondary"
-            fullWidth
-            onClick={props.onPayWithFiat}
-            bg="tertiaryBg"
-            style={{
-              border: `1px solid ${theme.colors.borderColor}`,
-              padding: spacing.sm,
-            }}
-          >
-            <Container
-              flex="row"
-              gap="sm"
-              center="y"
-              expand
-              color="secondaryIconColor"
+          {props.fiatSupported && (
+            <Button
+              variant="secondary"
+              fullWidth
+              onClick={props.onPayWithFiat}
+              bg="tertiaryBg"
+              style={{
+                border: `1px solid ${theme.colors.borderColor}`,
+                padding: spacing.sm,
+              }}
             >
-              <CardStackIcon width={iconSize.md} height={iconSize.md} />
-              <Text size="sm" color="primaryText">
-                Pay with credit card
-              </Text>
-            </Container>
-          </Button>
+              <Container
+                flex="row"
+                gap="sm"
+                center="y"
+                expand
+                color="secondaryIconColor"
+              >
+                <CardStackIcon width={iconSize.md} height={iconSize.md} />
+                <Text size="sm" color="primaryText">
+                  Pay with credit card
+                </Text>
+              </Container>
+            </Button>
+          )}
         </Container>
       </Container>
     </Container>