Add testMode to buyWithCrypto pay options (#4435)

Author: edwardysun

.changeset/olive-steaks-vanish.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Add testMode to buyWithCrypto pay options

packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts

@@ -64,6 +64,7 @@ export type PayUIOptions = Prettify<
     buyWithCrypto?:
       | false
       | {
+          testMode?: boolean;
           prefillSource?: {
             chain: Chain;
             token?: TokenInfo;

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

@@ -97,7 +97,13 @@ export type BuyScreenProps = {
  * @internal
  */
 export default function BuyScreen(props: BuyScreenProps) {
-  const supportedDestinationsQuery = useBuySupportedDestinations(props.client);
+  const isTestMode = props.payOptions.buyWithCrypto
+    ? props.payOptions.buyWithCrypto.testMode
+    : undefined;
+  const supportedDestinationsQuery = useBuySupportedDestinations(
+    props.client,
+    isTestMode,
+  );
 
   if (!supportedDestinationsQuery.data) {
     return <LoadingScreen />;

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/useUISelectionStates.ts

@@ -50,7 +50,8 @@ export function useToTokenSelectionStates(options: {
       // use active chain if its supported as destination
       supportedDestinations.find((x) => x.chain.id === activeChain?.id)
         ?.chain ||
-      // default to polygon
+      // default to the first chain in supportedDestinations, or polygon if nothing is found at all
+      supportedDestinations[0]?.chain ||
       polygon,
   );
 

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/useSwapSupportedChains.ts

@@ -36,11 +36,14 @@ export type SupportedChainAndTokens = Array<{
 
 export async function fetchBuySupportedDestinations(
   client: ThirdwebClient,
+  isTestMode?: boolean,
 ): Promise<SupportedChainAndTokens> {
   return withCache(
     async () => {
       const fetchWithHeaders = getClientFetch(client);
-      const res = await fetchWithHeaders(getPaySupportedDestinations());
+      const res = await fetchWithHeaders(
+        `${getPaySupportedDestinations()}?isTestMode=${isTestMode}`,
+      );
       const data = (await res.json()) as Response;
       return data.result.map((item) => ({
         chain: defineChain({
@@ -59,11 +62,14 @@ export async function fetchBuySupportedDestinations(
 /**
  * @internal
  */
-export function useBuySupportedDestinations(client: ThirdwebClient) {
+export function useBuySupportedDestinations(
+  client: ThirdwebClient,
+  isTestMode?: boolean,
+) {
   return useQuery({
     queryKey: ["destination-tokens", client],
     queryFn: async () => {
-      return fetchBuySupportedDestinations(client);
+      return fetchBuySupportedDestinations(client, isTestMode);
     },
   });
 }