Supported chain and tokens using overriden state (#4388)

Author: edwardysun

.changeset/funny-crews-invite.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Update setting default source chain and token

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

@@ -59,7 +59,11 @@ import {
   type PaymentMethods,
   useEnabledPaymentMethods,
 } from "./main/useEnabledPaymentMethods.js";
-import { useUISelectionStates } from "./main/useUISelectionStates.js";
+import {
+  useFiatCurrencySelectionStates,
+  useFromTokenSelectionStates,
+  useToTokenSelectionStates,
+} from "./main/useUISelectionStates.js";
 import { openOnrampPopup } from "./openOnRamppopup.js";
 import { BuyTokenInput } from "./swap/BuyTokenInput.js";
 import { FiatFees, SwapFees } from "./swap/Fees.js";
@@ -134,33 +138,26 @@ function BuyScreenContent(props: BuyScreenContentProps) {
     id: "main",
   });
 
-  const [hasEditedAmount, setHasEditedAmount] = useState(false);
-
-  const onDone = useCallback(() => {
-    setScreen({ id: "main" });
-    props.onDone();
-  }, [props.onDone]);
-
-  // UI selection
   const {
     tokenAmount,
     setTokenAmount,
     toChain,
     setToChain,
     deferredTokenAmount,
-    fromChain,
-    setFromChain,
     toToken,
     setToToken,
-    fromToken,
-    setFromToken,
-    selectedCurrency,
-    setSelectedCurrency,
-  } = useUISelectionStates({
+  } = useToTokenSelectionStates({
     payOptions,
     supportedDestinations,
   });
 
+  const [hasEditedAmount, setHasEditedAmount] = useState(false);
+
+  const onDone = useCallback(() => {
+    setScreen({ id: "main" });
+    props.onDone();
+  }, [props.onDone]);
+
   // check if the screen is expanded or not
 
   // update supportedSources whenever toToken or toChain is updated
@@ -186,21 +183,24 @@ function BuyScreenContent(props: BuyScreenContentProps) {
     }
 
     const supportedSources = supportedSourcesQuery.data;
-    if (supportedSources[0]?.chain) {
-      setFromChain(supportedSources[0]?.chain);
-    }
 
     return createSupportedTokens(
       supportedSources,
       payOptions,
       props.supportedTokens,
     );
-  }, [
-    props.supportedTokens,
-    supportedSourcesQuery.data,
-    payOptions,
-    setFromChain,
-  ]);
+  }, [props.supportedTokens, supportedSourcesQuery.data, payOptions]);
+
+  const { fromChain, setFromChain, fromToken, setFromToken } =
+    useFromTokenSelectionStates({
+      payOptions,
+      supportedSources: supportedSourcesQuery.data || [],
+    });
+
+  const { selectedCurrency, setSelectedCurrency } =
+    useFiatCurrencySelectionStates({
+      payOptions,
+    });
 
   const enabledPaymentMethods = useEnabledPaymentMethods({
     payOptions: props.payOptions,

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

@@ -15,25 +15,32 @@ import {
 } from "../fiat/currencies.js";
 import type { SupportedChainAndTokens } from "../swap/useSwapSupportedChains.js";
 
-// handle states for token and chain selection
+type SupportedSourcesInputData = {
+  chain: Chain;
+  tokens: {
+    address: string;
+    buyWithCryptoEnabled: boolean;
+    buyWithFiatEnabled: boolean;
+    name: string;
+    symbol: string;
+  }[];
+};
 
-export function useUISelectionStates(options: {
+// handle states for token and chain selection
+export function useToTokenSelectionStates(options: {
   payOptions: PayUIOptions;
   supportedDestinations: SupportedChainAndTokens;
 }) {
-  const activeChain = useActiveWalletChain();
   const { payOptions, supportedDestinations } = options;
-
+  // --------------------------------------------------------------------------
   // buy token amount ---------------------------------------------------------
   // NOTE - for transaction / direct payment modes, the token amount is set when the user tap continue
   const prefillBuy = (payOptions as FundWalletOptions)?.prefillBuy;
+  const activeChain = useActiveWalletChain();
   const initialTokenAmount = prefillBuy?.amount || "";
-
   const [tokenAmount, setTokenAmount] = useState<string>(initialTokenAmount);
   const deferredTokenAmount = useDebouncedValue(tokenAmount, 300);
 
-  // --------------------------------------------------------------------------
-
   // Destination chain and token selection -----------------------------------
   const [toChain, setToChain] = useState<Chain>(
     // use prefill chain if available
@@ -52,27 +59,73 @@ export function useUISelectionStates(options: {
       (payOptions.mode === "direct_payment" && payOptions.paymentInfo.token) ||
       NATIVE_TOKEN,
   );
+
+  return {
+    toChain,
+    setToChain,
+    toToken,
+    setToToken,
+    tokenAmount,
+    setTokenAmount,
+    deferredTokenAmount,
+  };
+}
+
+export function useFromTokenSelectionStates(options: {
+  payOptions: PayUIOptions;
+  supportedSources: SupportedSourcesInputData[];
+}) {
+  const { payOptions, supportedSources } = options;
+
   // --------------------------------------------------------------------------
+  const firstSupportedSource = supportedSources?.length
+    ? supportedSources[0]
+    : undefined;
 
   // Source token and chain selection ---------------------------------------------------
-  const [fromChain, setFromChain] = useState<Chain>(
-    // use prefill chain if available
+  const [fromChain_, setFromChain] = useState<Chain>();
+
+  // use prefill chain if available
+  const fromChainDevSpecified =
     (payOptions.buyWithCrypto !== false &&
       payOptions.buyWithCrypto?.prefillSource?.chain) ||
-      (payOptions.mode === "transaction" && payOptions.transaction?.chain) ||
-      (payOptions.mode === "direct_payment" && payOptions.paymentInfo?.chain) ||
-      // default to polygon
-      polygon,
-  );
+    (payOptions.mode === "transaction" && payOptions.transaction?.chain) ||
+    (payOptions.mode === "direct_payment" && payOptions.paymentInfo?.chain);
+
+  const fromChainFromApi = firstSupportedSource?.chain
+    ? firstSupportedSource.chain
+    : undefined;
 
-  const [fromToken, setFromToken] = useState<ERC20OrNativeToken>(
-    // use prefill token if available
+  const fromChain =
+    fromChain_ || fromChainDevSpecified || fromChainFromApi || polygon;
+
+  const [fromToken_, setFromToken] = useState<ERC20OrNativeToken>();
+
+  // use prefill token if available
+  const fromTokenDevSpecified =
     (payOptions.buyWithCrypto !== false &&
       payOptions.buyWithCrypto?.prefillSource?.token) ||
-      (payOptions.mode === "direct_payment" && payOptions.paymentInfo.token) ||
-      // default to native token
-      NATIVE_TOKEN,
-  );
+    (payOptions.mode === "direct_payment" && payOptions.paymentInfo.token);
+
+  // May be updated in the future
+  const fromTokenFromApi = NATIVE_TOKEN;
+
+  // supported tokens query in here
+  const fromToken =
+    fromToken_ || fromTokenDevSpecified || fromTokenFromApi || NATIVE_TOKEN;
+
+  return {
+    fromChain,
+    setFromChain,
+    fromToken,
+    setFromToken,
+  };
+}
+
+export function useFiatCurrencySelectionStates(options: {
+  payOptions: PayUIOptions;
+}) {
+  const { payOptions } = options;
 
   // --------------------------------------------------------------------------
   const devSpecifiedDefaultCurrency =
@@ -89,20 +142,7 @@ export function useUISelectionStates(options: {
   );
 
   return {
-    tokenAmount,
-    setTokenAmount,
-
-    toChain,
-    setToChain,
-    deferredTokenAmount,
-    fromChain,
-    setFromChain,
-    toToken,
-    setToToken,
-    fromToken,
-    setFromToken,
     selectedCurrency,
-
     setSelectedCurrency,
   };
 }

packages/thirdweb/src/utils/domains.ts

@@ -11,7 +11,7 @@ type DomainOverrides = {
   inAppWallet?: string;
   /**
    * The base URL for the payment server.
-   * @default "interstate.thirdweb.com"
+   * @default "pay.thirdweb.com"
    */
   pay?: string;
   /**