Skip to content

Commit

Permalink
Supported chain and tokens using overriden state (#4388)
Browse files Browse the repository at this point in the history
  • Loading branch information
edwardysun authored Sep 4, 2024
1 parent 9e8d3e6 commit 82a30af
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 59 deletions.
5 changes: 5 additions & 0 deletions .changeset/funny-crews-invite.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"thirdweb": patch
---

Update setting default source chain and token
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 =
Expand All @@ -89,20 +142,7 @@ export function useUISelectionStates(options: {
);

return {
tokenAmount,
setTokenAmount,

toChain,
setToChain,
deferredTokenAmount,
fromChain,
setFromChain,
toToken,
setToToken,
fromToken,
setFromToken,
selectedCurrency,

setSelectedCurrency,
};
}
Expand Down
2 changes: 1 addition & 1 deletion packages/thirdweb/src/utils/domains.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
/**
Expand Down

0 comments on commit 82a30af

Please sign in to comment.