From 82a30afd4bced6071d87c5c018a33ecf22c0449e Mon Sep 17 00:00:00 2001 From: Edward Sun Date: Wed, 4 Sep 2024 14:34:33 -0700 Subject: [PATCH] Supported chain and tokens using overriden state (#4388) --- .changeset/funny-crews-invite.md | 5 + .../ConnectWallet/screens/Buy/BuyScreen.tsx | 50 ++++----- .../screens/Buy/main/useUISelectionStates.ts | 106 ++++++++++++------ packages/thirdweb/src/utils/domains.ts | 2 +- 4 files changed, 104 insertions(+), 59 deletions(-) create mode 100644 .changeset/funny-crews-invite.md diff --git a/.changeset/funny-crews-invite.md b/.changeset/funny-crews-invite.md new file mode 100644 index 00000000000..e35c2c57fea --- /dev/null +++ b/.changeset/funny-crews-invite.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Update setting default source chain and token diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx index 52db03af3ea..98c4aab6e24 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx +++ b/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, diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/useUISelectionStates.ts b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/useUISelectionStates.ts index a7187284f6d..5d3ba27c7a4 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/useUISelectionStates.ts +++ b/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(initialTokenAmount); const deferredTokenAmount = useDebouncedValue(tokenAmount, 300); - // -------------------------------------------------------------------------- - // Destination chain and token selection ----------------------------------- const [toChain, setToChain] = useState( // 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( - // use prefill chain if available + const [fromChain_, setFromChain] = useState(); + + // 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( - // use prefill token if available + const fromChain = + fromChain_ || fromChainDevSpecified || fromChainFromApi || polygon; + + const [fromToken_, setFromToken] = useState(); + + // 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, }; } diff --git a/packages/thirdweb/src/utils/domains.ts b/packages/thirdweb/src/utils/domains.ts index fcc6e50dff0..63cabfc6953 100644 --- a/packages/thirdweb/src/utils/domains.ts +++ b/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; /**