...
+ * }
+ * ```
+ */
+export function useBuyHistory(
+ params?: BuyHistoryParams,
+ queryParams?: BuyHistoryQueryOptions,
+): UseQueryResult{JSON.stringify(buyWithCryptoHistory.data, null, 2)}
+ * return ...
* }
* ```
* @buyCrypto
*/
export function useBuyWithCryptoHistory(
- buyWithCryptoHistoryParams?: BuyWithCryptoHistoryQueryParams,
- queryParams?: BuyWithCryptoQuoteQueryOptions,
+ params?: BuyWithCryptoHistoryParams,
+ queryParams?: BuyWithCryptoHistoryQueryOptions,
): UseQueryResult ...
+ * }
+ * ```
+ * @buyFiat
+ */
+export function useBuyWithFiatHistory(
+ params?: BuyWithFiatHistoryParams,
+ queryParams?: BuyWithFiatHistoryQueryOptions,
+): UseQueryResult
+ * {quote.data && (
+ *
+ * open onramp provider
+ *
+ * )}
+ *
+ * );
+ * }
+ * ```
+ * @buyFiat
+ */
+export function useBuyWithFiatQuote(
+ params?: GetBuyWithFiatQuoteParams,
+ queryOptions?: BuyWithFiatQuoteQueryOptions,
+): UseQueryResult...
;
+ * }
+ * ```
+ * @buyFiat
+ */
+export function useBuyWithFiatStatus(
+ params?: GetBuyWithFiatStatusParams,
+): UseQueryResult
-
- Send to
-
-
- setAddress(e.target.value)}
- />
-
-
-
- {showError && (
- <>
-
- Invalid address
-
-
- )}
-
- Connected
- {
- props.onSelect(props.activeAccount.address);
- }}
- />
-
- );
-}
-
-const StyledInput = /* @__PURE__ */ styled(Input)(() => {
- const theme = useCustomTheme();
- return {
- border: `1.5px solid ${theme.colors.borderColor}`,
- borderTopRightRadius: 0,
- borderBottomRightRadius: 0,
- height: "100%",
- boxSizing: "border-box",
- boxShadow: "none",
- borderRight: "none",
- "&:focus": {
- boxShadow: "none",
- borderColor: theme.colors.accentText,
- },
- "&[data-is-error='true']": {
- boxShadow: "none",
- borderColor: theme.colors.danger,
- },
- };
-});
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/AccountSelectorButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/AccountSelectorButton.tsx
deleted file mode 100644
index 3b95aaca220..00000000000
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/AccountSelectorButton.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { ChevronDownIcon } from "@radix-ui/react-icons";
-import type { ThirdwebClient } from "../../../../../../client/client.js";
-import type {
- Account,
- Wallet,
-} from "../../../../../../wallets/interfaces/wallet.js";
-import { shortenString } from "../../../../../core/utils/addresses.js";
-import { WalletImage } from "../../../components/WalletImage.js";
-import { Container } from "../../../components/basic.js";
-import { Text } from "../../../components/text.js";
-import { iconSize } from "../../../design-system/index.js";
-import { WalletIcon } from "../../icons/WalletIcon.js";
-import { SecondaryButton } from "./buttons.js";
-
-/**
- *
- * @internal
- */
-export function AccountSelectorButton(props: {
- onClick: () => void;
- activeWallet: Wallet;
- activeAccount: Account;
- address: string;
- chevron?: boolean;
- client: ThirdwebClient;
-}) {
- return (
- {
+ if (
+ drawerScreen &&
+ drawerRef.current &&
+ !drawerRef.current.contains(e.target as Node)
+ ) {
+ e.preventDefault();
+ e.stopPropagation();
+ closeDrawer();
+ }
+ }}
+ >
+ {/* Drawer */}
+ {drawerScreen && (
+ <>
+
+ {drawerScreen}
+
+
+ )}
+
+
+ {
+ setHasEditedAmount(true);
+ setTokenAmount(value);
+ }}
+ freezeAmount={payOptions.prefillBuy?.allowEdits?.amount === false}
+ freezeChainAndToken={
+ payOptions.prefillBuy?.allowEdits?.chain === false &&
+ payOptions.prefillBuy?.allowEdits?.token === false
+ }
+ token={toToken}
+ chain={toChain}
+ onSelectToken={() => {
+ setScreen({
+ type: "screen-id",
+ name: "select-to-token",
+ });
+ }}
+ client={props.client}
+ hideTokenSelector={!!props.buyForTx}
+ />
+
+
+ {showPaymentSelection ?
+
+ )}
+
+ {method === "crypto" && account && activeChain && (
+ {
+ setScreen({
+ type: "screen-id",
+ name: "select-from-token",
+ });
+ }}
+ account={account}
+ activeChain={activeChain}
+ />
+ )}
+
+ {method === "creditCard" && account && (
+ {
+ // currently disabled because we are only using Stripe
+ }}
+ account={account}
+ />
+ )}
+
+
+
+ {!isExpanded && (
+ <>
+ {!account && props.connectButton ? (
+
+
+
+ {props.connectButton}
+ ) : (
+
+ )}
+
+ )}
+
+
+ Fees
+
+
,
+ );
+ }
+
+ const prefillSource =
+ payOptions.buyWithCrypto !== false
+ ? payOptions.buyWithCrypto?.prefillSource
+ : undefined;
+
+ return (
+
+
+
+ {/* Error */}
+ {quoteQuery.error && (
+
+
+ Fees
+
+
+
,
+ );
+ }
+
+ // biome-ignore lint/suspicious/noExplicitAny:
+
+
+ {/* Error message */}
+ {fiatQuoteQuery.error && (
+
+ {getErrorMessage(fiatQuoteQuery.error).map((msg) => (
+
+ {msg}
+
+ ))}
+
+ )}
+
+ {/* Continue */}
+
+
+ {props.isLoading ? (
+
+ {props.value ? `${formatNumber(Number(props.value), 4)}` : "--"}
+
+ )}
+
+ {
+ props.onSelect("crypto");
}}
>
-
- Credit Card
-
- Coming Soon
-
+ Crypto
+ {
- if (
- drawerScreen &&
- drawerRef.current &&
- !drawerRef.current.contains(e.target as Node)
- ) {
- e.preventDefault();
- e.stopPropagation();
- closeDrawer();
- }
- }}
- >
- {/* Drawer */}
- {drawerScreen && (
- <>
-
-
- {drawerScreen === "address" && (
- {
- setAddress(v);
- closeDrawer();
- }}
- activeAccount={account}
- activeWallet={props.activeWallet}
- client={client}
- />
- )}
-
- {method === "crypto" && (
- <>
- {drawerScreen === "fees" && (
-
-
-
- )}
-
-
- {
- setHasEditedAmount(true);
- setStopUpdatingTokenAmount(true);
- setTokenAmount(value);
- }}
- token={toToken}
- chain={toChain}
- onSelectToken={() => setScreen("select-to-token")}
- client={props.client}
- hideTokenSelector={!!props.buyForTx}
- />
-
-
-
- {!isMiniScreen && (
-
-
-
-
- Fees
-
-
-
- )}
-
- )}
-
- {
- setScreen("select-from-token");
- }}
- chain={fromChain}
- token={fromToken}
- isLoading={
- buyWithCryptoQuoteQuery.isLoading && !sourceTokenAmount
- }
- client={client}
- />
- setDrawerScreen("fees")}
- />
-
- )}
-
-
- Send To
- {
- setDrawerScreen("address");
- }}
- chevron
- client={client}
- />
-
-
-
- {method === "crypto" && isSwapQuoteError && (
-
-
- )}
-
- {method === "crypto" && (
- <>
- {switchChainRequired && (
-
- )}
-
- {!switchChainRequired && (
-
- )}
-
- )}
-
- {method === "creditCard" && (
-
- )}
-
-
-
- {getErrorMessage()}
-
-
-
- )}
-
+
+ {formatNumber(Number(onRampTokenAmount), 4)}{" "}
+
+
+ );
+
+ const fiatIcon =
+
+ {formatNumber(Number(toTokenAmount), 4)}{" "}
+ {" "}
+
+ {formatNumber(Number(props.status.destination.amount), 4)}{" "}
+
+
+ ) : null;
+
+ const toTokenInfo = partialSuccessToTokenInfo || (
+
+
+ {toChainMetaQuery.data?.name}
+ {" "}
+
+ {destinationChainMetaQuery.data?.name}
+
+
+ ) : null;
+
+ const toTokehChainInfo = partialSuccessToChainInfo || (
+
+ {props.state && (
+
+ {props.state === "completed"
+ ? "Completed"
+ : props.state === "failed"
+ ? "Failed"
+ : props.state === "pending"
+ ? "Pending"
+ : props.state === "actionRequired"
+ ? ""
+ : props.state === "partialSuccess"
+ ? "Incomplete"
+ : undefined}
+
+ )}
+
+ {(props.state === "actionRequired" || props.state === "completed") && (
+
+
+ )}
+
+
+
+ Pay
+
+
+ {props.fiat.currencySymbol === "USD" && (
+
+ {formatNumber(Number(props.fiat.amount), 4)}{" "}
+ {props.fiat.currencySymbol}
+
+
+
+
+
+ {props.statusMeta && (
+ <>
+ {lineSpacer}
+
+ {/* Status */}
+
+ Status
+
+
+ {props.statusMeta.text}
+
+
+
+
+ )}
+
+ {lineSpacer}
+
+ {onrampTxHash && onRampChainQuery.data?.explorers?.[0]?.url && (
+ <>
+
+ View on Explorer
+
+
+ )}
+
+ );
+}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/PostOnRampSwap.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/PostOnRampSwap.tsx
new file mode 100644
index 00000000000..8c17f3e15b1
--- /dev/null
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/PostOnRampSwap.tsx
@@ -0,0 +1,158 @@
+import { useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
+import { getPostOnRampQuote } from "../../../../../../../pay/buyWithFiat/getPostOnRampQuote.js";
+import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
+import { useActiveAccount } from "../../../../../../core/hooks/wallets/wallet-hooks.js";
+import { Spacer } from "../../../../components/Spacer.js";
+import { Spinner } from "../../../../components/Spinner.js";
+import { Container, ModalHeader } from "../../../../components/basic.js";
+import { Button } from "../../../../components/buttons.js";
+import { Text } from "../../../../components/text.js";
+import { iconSize } from "../../../../design-system/index.js";
+import { AccentFailIcon } from "../../../icons/AccentFailIcon.js";
+import { SwapFlow } from "../swap/SwapFlow.js";
+
+export function PostOnRampSwap(props: {
+ client: ThirdwebClient;
+ buyWithFiatStatus: BuyWithFiatStatus;
+ onBack?: () => void;
+ onViewPendingTx: () => void;
+ onDone: () => void;
+ isBuyForTx: boolean;
+ isEmbed: boolean;
+}) {
+ const account = useActiveAccount();
+
+ const [lockedOnRampQuote, setLockedOnRampQuote] = useState<
+ BuyWithCryptoQuote | undefined | null
+ >(undefined);
+
+ const postOnRampQuoteQuery = useQuery({
+ queryKey: ["getPostOnRampQuote", props.buyWithFiatStatus],
+ queryFn: async () => {
+ return await getPostOnRampQuote({
+ client: props.client,
+ buyWithFiatStatus: props.buyWithFiatStatus,
+ });
+ },
+ // stop fetching if a quote is already locked
+ enabled: !lockedOnRampQuote,
+ refetchOnWindowFocus: false,
+ });
+
+ useEffect(() => {
+ if (
+ postOnRampQuoteQuery.data &&
+ !lockedOnRampQuote &&
+ !postOnRampQuoteQuery.isRefetching
+ ) {
+ setLockedOnRampQuote(postOnRampQuoteQuery.data);
+ }
+ }, [
+ postOnRampQuoteQuery.data,
+ lockedOnRampQuote,
+ postOnRampQuoteQuery.isRefetching,
+ ]);
+
+ if (postOnRampQuoteQuery.isError) {
+ return (
+
-
- )}
-
-
-
-
-
- {" "}
- {isSuccess ? "Bought" : "Buy"}{" "}
-
-
- {props.destinationAmount}
-
-
-
- {" "}
- for{" "}
-
-
- {props.sourceAmount}
-
-
-
- )}
-
- {isFailed && (
- <>
-
+
+ Amount
+
+
+ {formatNumber(Number(props.quote.fromCurrency.amount), 4)}{" "}
+ {props.quote.fromCurrency.currencySymbol}
+
+
+
+ {props.quote.processingFees.map((fee, i) => {
+ const feeAmount = formatNumber(Number(fee.amount), 4);
+
+ return (
+
+
+ {fee.feeType === "NETWORK" ? "Network Fee" : "Processing Fee"}
+
+
+
+ {feeAmount === 0 ? "~" : ""}
+ {feeAmount} {fee.currencySymbol}{" "}
+
+
+ );
+ })}
+
+
+
+ Total
+
+
+ {formatNumber(Number(props.quote.fromCurrencyWithFees.amount), 4)}{" "}
+ {props.quote.fromCurrencyWithFees.currencySymbol}
+
+
+
);
}
-
-const TokenButton = /* @__PURE__ */ styled(Button)(() => {
- const theme = useCustomTheme();
- return {
- background: "transparent",
- border: "1px solid transparent",
- "&:hover": {
- background: "transparent",
- borderColor: theme.colors.accentText,
- },
- justifyContent: "flex-start",
- transition: "background 0.3s, border-color 0.3s",
- gap: spacing.sm,
- paddingInline: spacing.sm,
- paddingBlock: spacing.sm,
- color: theme.colors.primaryText,
- borderRadius: radius.md,
- minWidth: "50%",
- };
-});
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapFees.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapFees.tsx
deleted file mode 100644
index b85d1f1fda4..00000000000
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapFees.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/actions/getQuote.js";
-import { formatNumber } from "../../../../../../../utils/formatNumber.js";
-import { Container } from "../../../../components/basic.js";
-import { Text } from "../../../../components/text.js";
-
-/**
- * @internal
- */
-export function SwapFees(props: {
- quote: BuyWithCryptoQuote;
- align: "left" | "right";
-}) {
- return (
-
- {props.quote.processingFees.map((fee) => {
- const feeAmount = formatNumber(Number(fee.amount), 4);
- return (
-
-
- {feeAmount === 0 ? "~" : ""}
- {feeAmount} {fee.token.symbol}
-
-
- (${(fee.amountUSDCents / 100).toFixed(2)})
-
-
- );
- })}
-
- );
-}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapFlow.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapFlow.tsx
new file mode 100644
index 00000000000..1c05f6a7006
--- /dev/null
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapFlow.tsx
@@ -0,0 +1,109 @@
+import { useMemo, useState } from "react";
+import { defineChain } from "../../../../../../../chains/utils.js";
+import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
+import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
+import type { Account } from "../../../../../../../wallets/interfaces/wallet.js";
+import type { TokenInfo } from "../../../defaultTokens.js";
+import { type ERC20OrNativeToken, NATIVE_TOKEN } from "../../nativeToken.js";
+import { SwapConfirmationScreen } from "./ConfirmationScreen.js";
+import { SwapStatusScreen } from "./SwapStatusScreen.js";
+
+type SwapFlowProps = {
+ onBack?: () => void;
+ buyWithCryptoQuote: BuyWithCryptoQuote;
+ account: Account;
+ onViewPendingTx: () => void;
+ client: ThirdwebClient;
+ isFiatFlow: boolean;
+ onDone: () => void;
+ onTryAgain: () => void;
+ isBuyForTx: boolean;
+ isEmbed: boolean;
+};
+
+export function SwapFlow(props: SwapFlowProps) {
+ const [swapTxHash, setSwapTxHash] = useState();
+
+ const quote = props.buyWithCryptoQuote;
+
+ const fromChain = useMemo(
+ () => defineChain(quote.swapDetails.fromToken.chainId),
+ [quote],
+ );
+
+ const toChain = useMemo(
+ () => defineChain(quote.swapDetails.toToken.chainId),
+ [quote],
+ );
+
+ const fromTokenSymbol = quote.swapDetails.fromToken.symbol || "";
+ const toTokenSymbol = quote.swapDetails.toToken.symbol || "";
+
+ const fromAmount = quote.swapDetails.fromAmount;
+ const toAmount = quote.swapDetails.toAmount;
+
+ const _toToken = quote.swapDetails.toToken;
+ const _fromToken = quote.swapDetails.fromToken;
+
+ const toToken: ERC20OrNativeToken = useMemo(() => {
+ if (_toToken.tokenAddress === NATIVE_TOKEN_ADDRESS) {
+ return NATIVE_TOKEN;
+ }
+
+ const tokenInfo: TokenInfo = {
+ address: _toToken.tokenAddress,
+ name: _toToken.name || "",
+ symbol: _toToken.symbol || "",
+ };
+ return tokenInfo;
+ }, [_toToken]);
+
+ const fromToken: ERC20OrNativeToken = useMemo(() => {
+ if (_fromToken.tokenAddress === NATIVE_TOKEN_ADDRESS) {
+ return NATIVE_TOKEN;
+ }
+
+ const tokenInfo: TokenInfo = {
+ address: _fromToken.tokenAddress,
+ name: _fromToken.name || "",
+ symbol: _fromToken.symbol || "",
+ };
+ return tokenInfo;
+ }, [_fromToken]);
+
+ if (swapTxHash) {
+ return (
+
+
+
+
+ Buy Success
+
+
+
+
+
+ Incomplete
+
+
+ Expected {swapStatus.data.quote.toToken.symbol}, Got{" "}
+ {swapStatus.data.destination.token.symbol} instead
+
+
+
+
+
+ Transaction Failed
+
+
+
+ Your transaction {`couldn't`} be processed
+
+
+
+
+
+ )}
+
+ {uiStatus === "pending" && (
+ <>
+
+
+ Buy Pending
+
+
+
+
+ );
+}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/pendingSwapTx.ts b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/pendingSwapTx.ts
index 9c0354ed6ec..d024cfd13cc 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/pendingSwapTx.ts
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/pendingSwapTx.ts
@@ -1,93 +1,24 @@
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import {
- type BuyWithCryptoStatus,
- getBuyWithCryptoStatus,
-} from "../../../../../../../pay/buyWithCrypto/actions/getStatus.js";
import { createStore } from "../../../../../../../reactive/store.js";
-import { wait } from "../../../../../../../utils/promise/wait.js";
-type SwapTxInfo = {
- transactionHash: string;
- status: BuyWithCryptoStatus["status"];
- subStatus?: BuyWithCryptoStatus["subStatus"];
- source: {
- symbol: string;
- value: string;
- chainId: number;
- };
- destination: {
- symbol: string;
- value: string;
- chainId: number;
- };
-};
+export type PendingTxInfo =
+ | {
+ type: "swap";
+ txHash: string;
+ }
+ | {
+ type: "fiat";
+ intentId: string;
+ };
-// array of transaction hashes
-export const swapTransactionsStore = /* @__PURE__ */ createStore(
+export const pendingTransactions = /* @__PURE__ */ createStore(
[],
);
/**
* @internal
*/
-export const addPendingSwapTransaction = (
- client: ThirdwebClient,
- txInfo: SwapTxInfo,
-) => {
- const currentValue = swapTransactionsStore.getValue();
- const indexAdded = currentValue.length;
-
- // add it
- swapTransactionsStore.setValue([...currentValue, txInfo]);
-
- // poll for it's status and update the store when we know it's status
- const maxRetries = 50;
- let retryCount = 0;
-
- async function tryToGetStatus() {
- // keep polling for the transaction status every 5 seconds until maxRetries
- await wait(5000);
- try {
- retryCount++;
- const res = await getBuyWithCryptoStatus({
- client: client,
- transactionHash: txInfo.transactionHash,
- });
-
- if (res.status === "COMPLETED" || res.status === "FAILED") {
- const value = swapTransactionsStore.getValue();
- const updatedValue = [...value];
- const oldValue = value[indexAdded];
- if (oldValue) {
- const newValue = {
- ...oldValue,
- status: res.status,
- subStatus: res.subStatus,
- };
- updatedValue[indexAdded] = newValue;
-
- // in case - the destination token is different ( happens when tx is partially successful )
- if (res.destination) {
- newValue.destination = {
- symbol: res.destination.token.symbol || "",
- value: res.destination.amount,
- chainId: res.destination.token.chainId,
- };
- }
-
- swapTransactionsStore.setValue(updatedValue);
- }
-
- return; // stop
- }
- } catch {
- // ignore
- }
-
- if (retryCount < maxRetries) {
- await tryToGetStatus();
- }
- }
-
- tryToGetStatus();
+export const addPendingTx = (txInfo: PendingTxInfo) => {
+ const currentValue = pendingTransactions.getValue();
+ // prepend the new tx to list
+ pendingTransactions.setValue([txInfo, ...currentValue]);
};
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/useSwapSupportedChains.ts b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/useSwapSupportedChains.ts
index 9cbc3adf221..e2e8fbc0570 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/useSwapSupportedChains.ts
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/useSwapSupportedChains.ts
@@ -1,21 +1,56 @@
import { useQuery } from "@tanstack/react-query";
+import type { Chain } from "../../../../../../../chains/types.js";
import { defineChain } from "../../../../../../../chains/utils.js";
import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import { getPayChainsEndpoint } from "../../../../../../../pay/buyWithCrypto/utils/definitions.js";
+import {
+ getPaySupportedDestinations,
+ getPaySupportedSources,
+} from "../../../../../../../pay/utils/definitions.js";
import { getClientFetch } from "../../../../../../../utils/fetch.js";
import { withCache } from "../../../../../../../utils/promise/withCache.js";
-export async function fetchSwapSupportedChains(client: ThirdwebClient) {
+type Response = {
+ result: Array<{
+ chainId: number;
+ tokens: Array<{
+ address: string;
+ buyWithCryptoEnabled: boolean;
+ buyWithFiatEnabled: boolean;
+ name: string;
+ symbol: string;
+ }>;
+ }>;
+};
+
+export type SupportedChainAndTokens = Array<{
+ chain: Chain;
+ tokens: Array<{
+ address: string;
+ buyWithCryptoEnabled: boolean;
+ buyWithFiatEnabled: boolean;
+ name: string;
+ symbol: string;
+ icon?: string;
+ }>;
+}>;
+
+export async function fetchBuySupportedDestinations(
+ client: ThirdwebClient,
+): Promise {
return withCache(
async () => {
const fetchWithHeaders = getClientFetch(client);
- const res = await fetchWithHeaders(getPayChainsEndpoint());
- const data = await res.json();
- const chainIds = data.result.chainIds as number[];
- return chainIds.map(defineChain);
+ const res = await fetchWithHeaders(getPaySupportedDestinations());
+ const data = (await res.json()) as Response;
+ return data.result.map((item) => ({
+ chain: defineChain({
+ id: item.chainId,
+ }),
+ tokens: item.tokens,
+ }));
},
{
- cacheKey: "swapSupportedChains",
+ cacheKey: "destination-tokens",
cacheTime: 5 * 60 * 1000,
},
);
@@ -24,11 +59,44 @@ export async function fetchSwapSupportedChains(client: ThirdwebClient) {
/**
* @internal
*/
-export function useSwapSupportedChains(client: ThirdwebClient) {
+export function useBuySupportedDestinations(client: ThirdwebClient) {
+ return useQuery({
+ queryKey: ["destination-tokens", client],
+ queryFn: async () => {
+ return fetchBuySupportedDestinations(client);
+ },
+ });
+}
+
+export function useBuySupportedSources(options: {
+ client: ThirdwebClient;
+ destinationChainId: number;
+ destinationTokenAddress: string;
+}) {
return useQuery({
- queryKey: ["swapSupportedChains", client],
+ queryKey: ["source-tokens", options],
queryFn: async () => {
- return fetchSwapSupportedChains(client);
+ const fetchWithHeaders = getClientFetch(options.client);
+ const baseUrl = getPaySupportedSources();
+
+ const url = new URL(baseUrl);
+ url.searchParams.append(
+ "destinationChainId",
+ options.destinationChainId.toString(),
+ );
+ url.searchParams.append(
+ "destinationTokenAddress",
+ options.destinationTokenAddress,
+ );
+
+ const res = await fetchWithHeaders(url.toString());
+ const data = (await res.json()) as Response;
+ return data.result.map((item) => ({
+ chain: defineChain({
+ id: item.chainId,
+ }),
+ tokens: item.tokens,
+ }));
},
});
}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistory.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistory.tsx
new file mode 100644
index 00000000000..c46724b7152
--- /dev/null
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistory.tsx
@@ -0,0 +1,227 @@
+"use client";
+import {
+ ArrowRightIcon,
+ CrossCircledIcon,
+ ExternalLinkIcon,
+} from "@radix-ui/react-icons";
+import { useState } from "react";
+import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js";
+import {
+ useActiveAccount,
+ useActiveWalletChain,
+} from "../../../../../../core/hooks/wallets/wallet-hooks.js";
+import { Skeleton } from "../../../../components/Skeleton.js";
+import { Spinner } from "../../../../components/Spinner.js";
+import { Container, Line, ModalHeader } from "../../../../components/basic.js";
+import { Button, ButtonLink } from "../../../../components/buttons.js";
+import { Text } from "../../../../components/text.js";
+import {
+ fontSize,
+ iconSize,
+ spacing,
+} from "../../../../design-system/index.js";
+import {
+ BuyTxHistoryButton,
+ BuyTxHistoryButtonHeight,
+} from "./BuyTxHistoryButton.js";
+import { TxDetailsScreen } from "./TxDetailsScreen.js";
+import {
+ type TxStatusInfo,
+ useBuyTransactionsToShow,
+} from "./useBuyTransactionsToShow.js";
+
+/**
+ * @internal
+ */
+export function BuyTxHistory(props: {
+ onBack?: () => void;
+ client: ThirdwebClient;
+ onDone: () => void;
+ isBuyForTx: boolean;
+ isEmbed: boolean;
+}) {
+ const [selectedTx, setSelectedTx] = useState(null);
+
+ if (selectedTx) {
+ return (
+ setSelectedTx(null)}
+ onDone={props.onDone}
+ isBuyForTx={props.isBuyForTx}
+ isEmbed={props.isEmbed}
+ />
+ );
+ }
+
+ return
+
+
+
+
+
+ {noTransactions && !isLoading && (
+
+ No Transactions
+
+ )}
+
+ {noTransactions && isLoading && (
+
+
+ )}
+
+ {txInfosToShow.map((txInfo) => {
+ return (
+ {
+ props.onSelectTx(txInfo);
+ }}
+ />
+ );
+ })}
+
+ {isLoading && txInfosToShow.length > 0 && (
+ <>
+
+
+
+ {pagination && !hidePagination && (
+
+
+
+
+
+ View on Explorer{" "}
+
+
+
+ );
+}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistoryButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistoryButton.tsx
new file mode 100644
index 00000000000..257ee9bfaec
--- /dev/null
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistoryButton.tsx
@@ -0,0 +1,127 @@
+import styled from "@emotion/styled";
+import { defineChain } from "../../../../../../../chains/utils.js";
+import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import { formatNumber } from "../../../../../../../utils/formatNumber.js";
+import { ChainName } from "../../../../components/ChainName.js";
+import { Spacer } from "../../../../components/Spacer.js";
+import { TokenIcon } from "../../../../components/TokenIcon.js";
+import { Container } from "../../../../components/basic.js";
+import { Button } from "../../../../components/buttons.js";
+import { Text } from "../../../../components/text.js";
+import { useCustomTheme } from "../../../../design-system/CustomThemeProvider.js";
+import { spacing } from "../../../../design-system/index.js";
+import {
+ getBuyWithCryptoStatusMeta,
+ getBuyWithFiatStatusMeta,
+} from "./statusMeta.js";
+import type { TxStatusInfo } from "./useBuyTransactionsToShow.js";
+
+export const BuyTxHistoryButtonHeight = "62px";
+
+export function BuyTxHistoryButton(props: {
+ txInfo: TxStatusInfo;
+ client: ThirdwebClient;
+ onClick?: () => void;
+}) {
+ const statusMeta =
+ props.txInfo.type === "swap"
+ ? getBuyWithCryptoStatusMeta(props.txInfo.status)
+ : getBuyWithFiatStatusMeta(props.txInfo.status);
+
+ return (
+
+
+
+
+ {/* Status */}
+
+
+ {statusMeta.status}
+
+
+
+ );
+}
+
+const TxButton = /* @__PURE__ */ styled(Button)(() => {
+ const theme = useCustomTheme();
+ return {
+ background: theme.colors.tertiaryBg,
+ "&:hover": {
+ background: theme.colors.secondaryButtonBg,
+ },
+ height: BuyTxHistoryButtonHeight,
+ };
+});
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/FiatDetailsScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/FiatDetailsScreen.tsx
new file mode 100644
index 00000000000..1c3fea795bb
--- /dev/null
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/FiatDetailsScreen.tsx
@@ -0,0 +1,134 @@
+import { useState } from "react";
+import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import type {
+ BuyWithFiatStatus,
+ ValidBuyWithFiatStatus,
+} from "../../../../../../../pay/buyWithFiat/getStatus.js";
+import { useBuyWithFiatStatus } from "../../../../../../core/hooks/pay/useBuyWithFiatStatus.js";
+import { Container, Line, ModalHeader } from "../../../../components/basic.js";
+import { OnRampTxDetailsTable } from "../fiat/FiatTxDetailsTable.js";
+import { PostOnRampSwapFlow } from "../fiat/PostOnRampSwapFlow.js";
+import { getBuyWithFiatStatusMeta } from "./statusMeta.js";
+
+export function FiatDetailsScreen(props: {
+ status: ValidBuyWithFiatStatus;
+ onBack: () => void;
+ client: ThirdwebClient;
+ onDone: () => void;
+ isBuyForTx: boolean;
+ isEmbed: boolean;
+}) {
+ const initialStatus = props.status;
+ const [stopPolling, setStopPolling] = useState(false);
+
+ const statusQuery = useBuyWithFiatStatus(
+ stopPolling
+ ? undefined
+ : {
+ client: props.client,
+ intentId: initialStatus.intentId,
+ },
+ );
+
+ const status: ValidBuyWithFiatStatus =
+ (statusQuery.data?.status === "NOT_FOUND" ? undefined : statusQuery.data) ||
+ initialStatus;
+
+ const hasTwoSteps = isSwapRequiredAfterOnRamp(status);
+ const statusMeta = getBuyWithFiatStatusMeta(status);
+
+ if (hasTwoSteps) {
+ const fiatQuote = status.quote;
+ return (
+ {
+ setStopPolling(true);
+ }}
+ />
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+// if the toToken is the same as the onRampToken, no swap is required
+export function isSwapRequiredAfterOnRamp(
+ buyWithFiatStatus: BuyWithFiatStatus,
+) {
+ if (buyWithFiatStatus.status === "NOT_FOUND") {
+ return false;
+ }
+
+ const sameChain =
+ buyWithFiatStatus.quote.toToken.chainId ===
+ buyWithFiatStatus.quote.onRampToken.chainId;
+
+ const sameToken =
+ buyWithFiatStatus.quote.toToken.tokenAddress ===
+ buyWithFiatStatus.quote.onRampToken.tokenAddress;
+
+ return !(sameChain && sameToken);
+}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/SwapDetailsScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/SwapDetailsScreen.tsx
new file mode 100644
index 00000000000..5e15cefaf36
--- /dev/null
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/SwapDetailsScreen.tsx
@@ -0,0 +1,307 @@
+import { ExternalLinkIcon } from "@radix-ui/react-icons";
+import { defineChain } from "../../../../../../../chains/utils.js";
+import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
+import type { ValidBuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
+import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js";
+import { useBuyWithCryptoStatus } from "../../../../../../core/hooks/pay/useBuyWithCryptoStatus.js";
+import { Spacer } from "../../../../components/Spacer.js";
+import { Container, Line, ModalHeader } from "../../../../components/basic.js";
+import { ButtonLink } from "../../../../components/buttons.js";
+import { Text } from "../../../../components/text.js";
+import {
+ fontSize,
+ iconSize,
+ spacing,
+} from "../../../../design-system/index.js";
+import { formatSeconds } from "../swap/formatSeconds.js";
+import { TokenInfoRow } from "./TokenInfoRow.js";
+import { type StatusMeta, getBuyWithCryptoStatusMeta } from "./statusMeta.js";
+
+export function SwapDetailsScreen(props: {
+ status: ValidBuyWithCryptoStatus;
+ onBack: () => void;
+ client: ThirdwebClient;
+}) {
+ const { status: initialStatus, client } = props;
+ const statusQuery = useBuyWithCryptoStatus(
+ initialStatus.source?.transactionHash
+ ? {
+ client: client,
+ transactionHash: initialStatus.source.transactionHash,
+ }
+ : undefined,
+ );
+
+ const status: ValidBuyWithCryptoStatus =
+ (statusQuery.data?.status !== "NOT_FOUND" ? statusQuery.data : undefined) ||
+ initialStatus;
+
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+type SwapTxDetailsData = {
+ fromToken: {
+ chainId: number;
+ symbol: string;
+ address: string;
+ amount: string;
+ };
+ quotedToToken: {
+ chainId: number;
+ symbol: string;
+ address: string;
+ amount: string;
+ };
+ gotToken?: {
+ chainId: number;
+ symbol: string;
+ address: string;
+ amount: string;
+ };
+ statusMeta?: StatusMeta;
+ sourceTxHash?: string;
+ destinationTxHash?: string;
+ isPartialSuccess: boolean;
+ estimatedDuration: number;
+};
+
+export function SwapTxDetailsTable(
+ props:
+ | {
+ type: "quote";
+ quote: BuyWithCryptoQuote;
+ client: ThirdwebClient;
+ }
+ | {
+ client: ThirdwebClient;
+ type: "status";
+ status: ValidBuyWithCryptoStatus;
+ hideStatusRow?: boolean;
+ },
+) {
+ let uiData: SwapTxDetailsData;
+ let showStatusRow = true;
+ if (props.type === "status") {
+ const status = props.status;
+ if (props.hideStatusRow) {
+ showStatusRow = false;
+ }
+
+ const isPartialSuccess =
+ status.status === "COMPLETED" && status.subStatus === "PARTIAL_SUCCESS";
+
+ uiData = {
+ fromToken: {
+ chainId: status.quote.fromToken.chainId,
+ symbol: status.quote.fromToken.symbol || "",
+ address: status.quote.fromToken.tokenAddress,
+ amount: status.quote.fromAmount,
+ },
+ quotedToToken: {
+ chainId: status.quote.toToken.chainId,
+ symbol: status.quote.toToken.symbol || "",
+ address: status.quote.toToken.tokenAddress,
+ amount: status.quote.toAmount,
+ },
+ gotToken: status.destination
+ ? {
+ chainId: status.destination.token.chainId,
+ symbol: status.destination.token.symbol || "",
+ address: status.destination.token.tokenAddress,
+ amount: status.destination.amount,
+ }
+ : undefined,
+ statusMeta: getBuyWithCryptoStatusMeta(status),
+ estimatedDuration: status.quote.estimated.durationSeconds || 0,
+ isPartialSuccess,
+ destinationTxHash: status.destination?.transactionHash,
+ sourceTxHash: status.source?.transactionHash,
+ };
+ } else {
+ const quote = props.quote;
+ uiData = {
+ fromToken: {
+ chainId: quote.swapDetails.fromToken.chainId,
+ symbol: quote.swapDetails.fromToken.symbol || "",
+ address: quote.swapDetails.fromToken.tokenAddress,
+ amount: quote.swapDetails.fromAmount,
+ },
+ quotedToToken: {
+ chainId: quote.swapDetails.toToken.chainId,
+ symbol: quote.swapDetails.toToken.symbol || "",
+ address: quote.swapDetails.toToken.tokenAddress,
+ amount: quote.swapDetails.toAmount,
+ },
+ isPartialSuccess: false,
+ estimatedDuration: quote.swapDetails.estimated.durationSeconds || 0,
+ };
+ }
+
+ const { client } = props;
+
+ const {
+ fromToken,
+ quotedToToken: toToken,
+ statusMeta,
+ sourceTxHash,
+ destinationTxHash,
+ isPartialSuccess,
+ gotToken,
+ estimatedDuration,
+ } = uiData;
+
+ const fromChainId = fromToken.chainId;
+ const toChainId = toToken.chainId;
+
+ const fromChainQuery = useChainQuery(defineChain(fromChainId));
+ const toChainQuery = useChainQuery(defineChain(toChainId));
+
+ const lineSpacer = (
+ <>
+
+ {props.label}
+
+
+
+ {formatNumber(Number(props.tokenAmount), 4)} {props.tokenSymbol}
+
+
+
+ {chainQuery.data?.name}
+
+
+ );
+}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/TxDetailsScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/TxDetailsScreen.tsx
new file mode 100644
index 00000000000..2e5d74f5d24
--- /dev/null
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/TxDetailsScreen.tsx
@@ -0,0 +1,40 @@
+import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import { FiatDetailsScreen } from "./FiatDetailsScreen.js";
+import { SwapDetailsScreen } from "./SwapDetailsScreen.js";
+import type { TxStatusInfo } from "./useBuyTransactionsToShow.js";
+
+export function TxDetailsScreen(props: {
+ client: ThirdwebClient;
+ statusInfo: TxStatusInfo;
+ onBack: () => void;
+ onDone: () => void;
+ isBuyForTx: boolean;
+ isEmbed: boolean;
+}) {
+ const { statusInfo } = props;
+
+ if (statusInfo.type === "swap") {
+ return (
+ []
+ >({
+ queries: pendingTxStoreValue.map((tx) => {
+ return {
+ queryKey: ["pending-tx-status", tx],
+ queryFn: async () => {
+ if (tx.type === "swap") {
+ const swapStatus = await getBuyWithCryptoStatus({
+ client: client,
+ transactionHash: tx.txHash,
+ });
+
+ if (
+ swapStatus.status === "NOT_FOUND" ||
+ swapStatus.status === "NONE"
+ ) {
+ return null;
+ }
+
+ return {
+ type: "swap",
+ status: swapStatus,
+ };
+ }
+
+ const fiatStatus = await getBuyWithFiatStatus({
+ client: client,
+ intentId: tx.intentId,
+ });
+
+ if (
+ fiatStatus.status === "NOT_FOUND" ||
+ fiatStatus.status === "NONE"
+ ) {
+ return null;
+ }
+
+ return {
+ type: "fiat",
+ status: fiatStatus,
+ };
+ },
+ refetchInterval: 10 * 1000, // 10 seconds
+ };
+ }),
+ });
+
+ if (pendingStatusQueries.length > 0 && pageIndex === 0) {
+ for (const query of pendingStatusQueries) {
+ if (query.data) {
+ const txStatusInfo = query.data;
+
+ // if already present - don't add it
+ if (buyHistory.data) {
+ if (txStatusInfo.type === "swap") {
+ const isPresent = buyHistory.data.page.find((tx) => {
+ if (
+ "buyWithCryptoStatus" in tx &&
+ tx.buyWithCryptoStatus.status !== "NOT_FOUND"
+ ) {
+ return (
+ tx.buyWithCryptoStatus.source?.transactionHash ===
+ txStatusInfo.status.source?.transactionHash
+ );
+ }
+ return false;
+ });
+
+ if (!isPresent) {
+ txStatusList.push(txStatusInfo);
+ }
+ }
+
+ if (txStatusInfo.type === "fiat") {
+ const isPresent = buyHistory.data.page.find((tx) => {
+ if (
+ "buyWithFiatStatus" in tx &&
+ tx.buyWithFiatStatus.status !== "NOT_FOUND"
+ ) {
+ return (
+ tx.buyWithFiatStatus.intentId === txStatusInfo.status.intentId
+ );
+ }
+ return false;
+ });
+
+ if (!isPresent) {
+ txStatusList.push(txStatusInfo);
+ }
+ }
+ } else {
+ // if no history - add without duplicate check
+ txStatusList.push(txStatusInfo);
+ }
+ }
+ }
+ }
+
+ if (buyHistory.data) {
+ for (const tx of buyHistory.data.page) {
+ if ("buyWithCryptoStatus" in tx) {
+ if (tx.buyWithCryptoStatus.status !== "NOT_FOUND") {
+ txStatusList.push({
+ type: "swap",
+ status: tx.buyWithCryptoStatus,
+ });
+ }
+ } else {
+ if (tx.buyWithFiatStatus.status !== "NOT_FOUND") {
+ txStatusList.push({
+ type: "fiat",
+ status: tx.buyWithFiatStatus,
+ });
+ }
+ }
+ }
+ }
+
+ const hidePagination =
+ !buyHistory.data ||
+ (buyHistory.data && !buyHistory.data.hasNextPage && pageIndex === 0);
+
+ return {
+ pageIndex,
+ setPageIndex,
+ txInfosToShow: txStatusList,
+ hidePagination,
+ isLoading: buyHistory.isLoading,
+ pagination: buyHistory.data
+ ? {
+ hasNextPage: buyHistory.data.hasNextPage,
+ }
+ : undefined,
+ };
+}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx
index 4cd3878a6a2..ceac841e604 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx
@@ -20,7 +20,8 @@ import { StyledDiv } from "../../design-system/elements.js";
import { fontSize, iconSize, spacing } from "../../design-system/index.js";
import { useSendToken } from "../../hooks/useSendToken.js";
import { type SupportedTokens, defaultTokens } from "../defaultTokens.js";
-import { TokenSelector, formatTokenBalance } from "./TokenSelector.js";
+import { TokenSelector } from "./TokenSelector.js";
+import { formatTokenBalance } from "./formatTokenBalance.js";
import { type ERC20OrNativeToken, NATIVE_TOKEN } from "./nativeToken.js";
type TXError = Error & { data?: { message?: string } };
@@ -29,7 +30,7 @@ type TXError = Error & { data?: { message?: string } };
* @internal
*/
export function SendFunds(props: {
- supportedTokens: SupportedTokens;
+ supportedTokens?: SupportedTokens;
onBack: () => void;
}) {
const [screen, setScreen] = useState<"base" | "tokenSelector">("base");
@@ -38,16 +39,17 @@ export function SendFunds(props: {
const { connectLocale, client } = useConnectUI();
let defaultToken: ERC20OrNativeToken = NATIVE_TOKEN;
+ const supportedTokens = props.supportedTokens || defaultTokens;
if (
// if we know chainId
chainId &&
// if there is a list of tokens for this chain
- props.supportedTokens[chainId] &&
+ supportedTokens[chainId] &&
// if the list of tokens is not the default list
- props.supportedTokens[chainId] !== defaultTokens[chainId]
+ supportedTokens[chainId] !== defaultTokens[chainId]
) {
// use the first token in the list as default selected
- const tokensForChain = props.supportedTokens[chainId];
+ const tokensForChain = supportedTokens[chainId];
const firstToken = tokensForChain?.[0];
if (firstToken) {
defaultToken = firstToken;
@@ -61,8 +63,7 @@ export function SendFunds(props: {
const chain = useActiveWalletChain();
- const tokenList =
- (chain?.id ? props.supportedTokens[chain.id] : undefined) || [];
+ const tokenList = (chain?.id ? supportedTokens[chain.id] : undefined) || [];
if (screen === "tokenSelector" && chain) {
return (
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SwapTransactionsScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SwapTransactionsScreen.tsx
deleted file mode 100644
index bdbc902e978..00000000000
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SwapTransactionsScreen.tsx
+++ /dev/null
@@ -1,433 +0,0 @@
-"use client";
-import { ArrowRightIcon, CrossCircledIcon } from "@radix-ui/react-icons";
-import { useMemo, useState, useSyncExternalStore } from "react";
-import { defineChain } from "../../../../../chains/utils.js";
-import type { ThirdwebClient } from "../../../../../client/client.js";
-import type {
- BuyWithCryptoStatus,
- BuyWithCryptoStatuses,
- BuyWithCryptoSubStatuses,
-} from "../../../../../pay/buyWithCrypto/actions/getStatus.js";
-import { formatNumber } from "../../../../../utils/formatNumber.js";
-import { useChainQuery } from "../../../../core/hooks/others/useChainQuery.js";
-import { useBuyWithCryptoHistory } from "../../../../core/hooks/pay/useBuyWithCryptoHistory.js";
-import {
- useActiveAccount,
- useActiveWalletChain,
-} from "../../../../core/hooks/wallets/wallet-hooks.js";
-import { Skeleton } from "../../components/Skeleton.js";
-import { Spacer } from "../../components/Spacer.js";
-import { Spinner } from "../../components/Spinner.js";
-import { Container, Line, ModalHeader } from "../../components/basic.js";
-import { Button } from "../../components/buttons.js";
-import { Text } from "../../components/text.js";
-import { useCustomTheme } from "../../design-system/CustomThemeProvider.js";
-import { fadeInAnimation } from "../../design-system/animations.js";
-import { StyledAnchor, StyledDiv } from "../../design-system/elements.js";
-import {
- fontSize,
- iconSize,
- radius,
- spacing,
-} from "../../design-system/index.js";
-import { BuyIcon } from "../icons/BuyIcon.js";
-import { CryptoIcon } from "../icons/CryptoIcon.js";
-import { swapTransactionsStore } from "./Buy/swap/pendingSwapTx.js";
-
-type TxStatusInfo = {
- boughChainId: number;
- transactionHash: string;
- boughtTokenAmount: string;
- boughtTokenSymbol: string;
- status: BuyWithCryptoStatus["status"];
- subStatus?: BuyWithCryptoStatus["subStatus"];
-};
-
-// Note: Do not use useConnectUI here
-
-const PAGE_SIZE = 10;
-
-/**
- * @internal
- */
-export function SwapTransactionsScreen(props: {
- onBack: () => void;
- client: ThirdwebClient;
-}) {
- const [pageIndex, setPageIndex] = useState(0);
- const _historyQuery = useSwapTransactions(pageIndex, props.client);
-
- const inMemoryPendingTxs = useSyncExternalStore(
- swapTransactionsStore.subscribe,
- swapTransactionsStore.getValue,
- );
-
- const txInfosToShow: TxStatusInfo[] = [];
-
- const txHashSet = new Set();
- for (const tx of _historyQuery.data?.page || []) {
- txHashSet.add(tx.source.transactionHash);
- }
-
- // add in-memory pending transactions
- for (const tx of inMemoryPendingTxs) {
- if (pageIndex > 0) {
- continue;
- }
-
- // if tx is already in history endpoint, don't add it
- if (txHashSet.has(tx.transactionHash)) {
- continue;
- }
-
- txInfosToShow.push({
- boughChainId: tx.destination.chainId,
- transactionHash: tx.transactionHash,
- boughtTokenAmount: tx.destination.value,
- boughtTokenSymbol: tx.destination.symbol,
- status: "PENDING",
- });
- }
-
- // Add data from endpoint
- for (const tx of _historyQuery.data?.page || []) {
- txInfosToShow.push({
- boughChainId: tx.destination?.token.chainId || tx.quote.toToken.chainId,
- transactionHash: tx.source.transactionHash,
- boughtTokenAmount: tx.destination?.amount || tx.quote.toAmount,
- boughtTokenSymbol:
- tx.destination?.token.symbol || tx.quote.toToken.symbol || "",
- status: tx.status,
- subStatus: tx.subStatus,
- });
- }
-
- const activeChain = useActiveWalletChain();
- const chainQuery = useChainQuery(activeChain);
- const activeAccount = useActiveAccount();
-
- const noTransactions = txInfosToShow.length === 0;
-
- const hidePagination =
- !_historyQuery.data ||
- (_historyQuery.data && !_historyQuery.data.hasNextPage && pageIndex === 0);
-
- return (
-
-
-
-
-
-
- {noTransactions && !_historyQuery.isLoading && (
-
- No Transactions
-
- )}
-
- {noTransactions && _historyQuery.isLoading && (
-
-
- )}
-
- {txInfosToShow.map((txInfo) => {
- return (
-
-
-
- {_historyQuery.data && !hidePagination && (
-
-
-
-
-
- View all transactions
-
-
-
- );
-}
-
-/**
- * @internal
- */
-export function useSwapTransactions(pageIndex: number, client: ThirdwebClient) {
- const account = useActiveAccount();
- const historyQuery = useBuyWithCryptoHistory(
- {
- walletAddress: account?.address || "",
- start: pageIndex * PAGE_SIZE,
- count: PAGE_SIZE,
- client,
- },
- {
- // 30 seconds
- refetchInterval: 30 * 1000,
- },
- );
-
- return historyQuery;
-}
-
-function TransactionInfo(props: { txInfo: TxStatusInfo }) {
- const {
- boughChainId,
- transactionHash,
- boughtTokenAmount,
- boughtTokenSymbol,
- status,
- } = props.txInfo;
-
- const fromChain = useMemo(() => defineChain(boughChainId), [boughChainId]);
-
- const chainQuery = useChainQuery(fromChain);
- const statusMeta = getStatusMeta(status, props.txInfo.subStatus);
-
- return (
-
-
-
-
-
-
- );
-}
-
-const ButtonLink = /* @__PURE__ */ (() => Button.withComponent("a"))();
-
-const IconBox = /* @__PURE__ */ StyledDiv(() => {
- const theme = useCustomTheme();
- return {
- color: theme.colors.secondaryText,
- padding: spacing.sm,
- border: `2px solid ${theme.colors.borderColor}`,
- borderRadius: radius.lg,
- display: "flex",
- justifyContent: "center",
- alignItems: "center",
- position: "relative",
- };
-});
-
-const TxHashLink = /* @__PURE__ */ StyledAnchor(() => {
- const theme = useCustomTheme();
- return {
- padding: spacing.sm,
- borderRadius: radius.lg,
- cursor: "pointer",
- animation: `${fadeInAnimation} 300ms ease`,
- background: theme.colors.tertiaryBg,
- "&:hover": {
- transition: "background 250ms ease",
- background: theme.colors.secondaryButtonBg,
- },
- height: "68px",
- };
-});
-
-function getStatusMeta(
- status: BuyWithCryptoStatuses,
- subStatus?: BuyWithCryptoSubStatuses,
-) {
- if (subStatus === "WAITING_BRIDGE") {
- return {
- status: "Bridging",
- color: "accentText",
- loading: true,
- } as const;
- }
-
- if (subStatus === "PARTIAL_SUCCESS") {
- return {
- status: "Incomplete",
- color: "secondaryText",
- loading: false,
- } as const;
- }
-
- if (status === "PENDING") {
- return {
- status: "Pending",
- color: "accentText",
- loading: true,
- } as const;
- }
-
- if (status === "FAILED") {
- return {
- status: "Failed",
- color: "danger",
- loading: false,
- } as const;
- }
-
- if (status === "COMPLETED") {
- return {
- status: "Completed",
- color: "success",
- loading: false,
- } as const;
- }
-
- return {
- status: "Unknown",
- color: "secondaryText",
- } as const;
-}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsx
index 8a920bf3cc7..63c0e2af88d 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsx
@@ -1,12 +1,15 @@
import styled from "@emotion/styled";
import { ChevronDownIcon, CrossCircledIcon } from "@radix-ui/react-icons";
+import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import type { Chain } from "../../../../../chains/types.js";
import type { ThirdwebClient } from "../../../../../client/client.js";
+import type { Account } from "../../../../../wallets/interfaces/wallet.js";
+import { getTokenBalance } from "../../../../../wallets/utils/getTokenBalance.js";
import { useChainQuery } from "../../../../core/hooks/others/useChainQuery.js";
-import { useWalletBalance } from "../../../../core/hooks/others/useWalletBalance.js";
+import { useTokenInfo } from "../../../../core/hooks/others/useTokenInfo.js";
import { useActiveAccount } from "../../../../core/hooks/wallets/wallet-hooks.js";
-import { ChainIcon, fallbackChainIcon } from "../../components/ChainIcon.js";
+import { ChainIcon } from "../../components/ChainIcon.js";
import { Skeleton } from "../../components/Skeleton.js";
import { Spacer } from "../../components/Spacer.js";
import { Spinner } from "../../components/Spinner.js";
@@ -20,6 +23,7 @@ import { fontSize, iconSize, spacing } from "../../design-system/index.js";
import { ChainButton, NetworkSelectorContent } from "../NetworkSelector.js";
import type { TokenInfo } from "../defaultTokens.js";
import type { ConnectLocale } from "../locale/types.js";
+import { formatTokenBalance } from "./formatTokenBalance.js";
import {
type ERC20OrNativeToken,
NATIVE_TOKEN,
@@ -27,6 +31,7 @@ import {
} from "./nativeToken.js";
// NOTE: MUST NOT USE useConnectUI here because this UI can be used outside connect ui
+// Note: TokenSelector can be used when wallet may or may not be connected
/**
*
@@ -46,14 +51,12 @@ export function TokenSelector(props: {
}) {
const [screen, setScreen] = useState<"base" | "select-chain">("base");
const [input, setInput] = useState("");
- const activeAccount = useActiveAccount();
const chain = props.chain;
const chainQuery = useChainQuery(chain);
// if input is undefined, it loads the native token
// otherwise it loads the token with given address
- const tokenQuery = useWalletBalance({
- address: activeAccount?.address,
+ const tokenQuery = useTokenInfo({
chain: chain,
tokenAddress: input,
client: props.client,
@@ -67,7 +70,6 @@ export function TokenSelector(props: {
tokenList = [
{
...tokenQuery.data,
- icon: "",
address: input,
},
...tokenList,
@@ -154,7 +156,6 @@ export function TokenSelector(props: {
{formatTokenBalance(tokenBalanceQuery.data)}
- ) : (
- {formatTokenBalance(tokenBalanceQuery.data)} ;
+ }
+
+ return
+
+
+
+
+
+ );
+}
+
+function TokenInfo(props: {
+ token: ERC20OrNativeToken;
+ chain: Chain;
+ client: ThirdwebClient;
+}) {
+ const account = useActiveAccount();
+ const tokenBalanceQuery = useWalletBalance({
+ address: account?.address,
+ chain: props.chain,
+ tokenAddress: isNativeToken(props.token) ? undefined : props.token.address,
+ client: props.client,
+ });
+
+ const tokenName = isNativeToken(props.token)
+ ? tokenBalanceQuery.data?.name
+ : props.token.name;
+
+ return (
+
+
+ {tokenName ? (
+
+ {tokenName}
+
+ ) : (
+ {formatTokenBalance(tokenBalanceQuery.data)}
+ ) : (
+
+
+ );
+}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/formatTokenBalance.ts b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/formatTokenBalance.ts
new file mode 100644
index 00000000000..d9bfc12a361
--- /dev/null
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/formatTokenBalance.ts
@@ -0,0 +1,19 @@
+/**
+ * @internal
+ * @param balanceData
+ * @returns
+ */
+export function formatTokenBalance(
+ balanceData: {
+ symbol: string;
+ name: string;
+ decimals: number;
+ displayValue: string;
+ },
+ showSymbol = true,
+) {
+ return (
+ Number(balanceData.displayValue).toFixed(3) +
+ (showSymbol ? ` ${balanceData.symbol}` : "")
+ );
+}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/nativeToken.ts b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/nativeToken.ts
index dd79a82d7b7..0b9d9a2486a 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/nativeToken.ts
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/nativeToken.ts
@@ -8,7 +8,7 @@ export const NATIVE_TOKEN: NativeToken = { nativeToken: true };
* @internal
*/
export function isNativeToken(
- token: TokenInfo | NativeToken,
+ token: Partial | NativeToken,
): token is NativeToken {
return "nativeToken" in token;
}
diff --git a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx b/packages/thirdweb/src/react/web/ui/PayEmbed.tsx
new file mode 100644
index 00000000000..542c3b37cb3
--- /dev/null
+++ b/packages/thirdweb/src/react/web/ui/PayEmbed.tsx
@@ -0,0 +1,245 @@
+import { useState } from "react";
+import type { Chain } from "../../../chains/types.js";
+import type { ThirdwebClient } from "../../../client/client.js";
+import type { Wallet } from "../../../wallets/interfaces/wallet.js";
+import type { SmartWalletOptions } from "../../../wallets/smart/types.js";
+import type { AppMetadata } from "../../../wallets/types.js";
+import type { SiweAuthOptions } from "../../core/hooks/auth/useSiweAuth.js";
+import { ConnectButton } from "./ConnectWallet/ConnectButton.js";
+import type {
+ ConnectButton_connectModalOptions,
+ PayUIOptions,
+} from "./ConnectWallet/ConnectButtonProps.js";
+import type { SupportedTokens } from "./ConnectWallet/defaultTokens.js";
+import { useConnectLocale } from "./ConnectWallet/locale/getConnectLocale.js";
+import BuyScreen from "./ConnectWallet/screens/Buy/BuyScreen.js";
+import { BuyTxHistory } from "./ConnectWallet/screens/Buy/tx-history/BuyTxHistory.js";
+import { DynamicHeight } from "./components/DynamicHeight.js";
+import { Spinner } from "./components/Spinner.js";
+import { Container } from "./components/basic.js";
+import { CustomThemeProvider } from "./design-system/CustomThemeProvider.js";
+import { type Theme, radius } from "./design-system/index.js";
+import type { LocaleId } from "./types.js";
+
+// TODO - JS doc
+
+export type PayEmbedProps = {
+ supportedTokens?: SupportedTokens;
+ client: ThirdwebClient;
+ locale?: LocaleId;
+ payOptions?: PayUIOptions;
+ theme?: "light" | "dark" | Theme;
+ connectOptions?: PayEmbedConnectOptions;
+};
+
+export function PayEmbed(props: PayEmbedProps) {
+ const localeQuery = useConnectLocale(props.locale || "en_US");
+ const [screen, setScreen] = useState<"buy" | "tx-history">("buy");
+
+ let content = null;
+
+ if (!localeQuery.data) {
+ content = (
+ {
+ setScreen("buy");
+ }}
+ onDone={() => {
+ // noop
+ }}
+ isBuyForTx={false}
+ isEmbed={true}
+ />
+ );
+ } else {
+ content = (
+ {
+ setScreen("tx-history");
+ }}
+ payOptions={props.payOptions || {}}
+ onDone={() => {
+ // noop
+ }}
+ connectButton={
+
+
+ {content}
+
+
+ );
+}
+
+export type PayEmbedConnectOptions = {
+ /**
+ * Configurations for the `ConnectButton`'s Modal that is shown for connecting a wallet
+ * Refer to the [`ConnectButton_connectModalOptions`](https://portal.thirdweb.com/references/typescript/v5/ConnectButton_connectModalOptions) type for more details
+ * @example
+ * ```tsx
+ * {chainQuery.data.name} ;
+ }
+
+ return
+
+ {null}
+
+
+ );
+}
diff --git a/packages/thirdweb/src/react/web/ui/components/SwitchNetwork.tsx b/packages/thirdweb/src/react/web/ui/components/SwitchNetwork.tsx
new file mode 100644
index 00000000000..f86b142407d
--- /dev/null
+++ b/packages/thirdweb/src/react/web/ui/components/SwitchNetwork.tsx
@@ -0,0 +1,38 @@
+import { useState } from "react";
+import type { Chain } from "../../../../chains/types.js";
+import { useSwitchActiveWalletChain } from "../../../core/hooks/wallets/wallet-hooks.js";
+import { Spinner } from "./Spinner.js";
+import { Button, type ButtonProps } from "./buttons.js";
+
+export function SwitchNetworkButton(
+ props: ButtonProps & {
+ chain: Chain;
+ fullWidth?: boolean;
+ },
+) {
+ const [isSwitching, setIsSwitching] = useState(false);
+ const switchActiveWalletChain = useSwitchActiveWalletChain();
+
+ return (
+
+ );
+}
diff --git a/packages/thirdweb/src/react/web/ui/components/TokenIcon.tsx b/packages/thirdweb/src/react/web/ui/components/TokenIcon.tsx
index d6f6c1f2468..1337011ef58 100644
--- a/packages/thirdweb/src/react/web/ui/components/TokenIcon.tsx
+++ b/packages/thirdweb/src/react/web/ui/components/TokenIcon.tsx
@@ -4,7 +4,6 @@ import type { ThirdwebClient } from "../../../../client/client.js";
import { useChainQuery } from "../../../core/hooks/others/useChainQuery.js";
import { genericTokenIcon } from "../ConnectWallet/icons/dataUris.js";
import {
- type ERC20OrNativeToken,
type NativeToken,
isNativeToken,
} from "../ConnectWallet/screens/nativeToken.js";
@@ -17,46 +16,24 @@ import { Img } from "./Img.js";
* @internal
*/
export function TokenIcon(props: {
- token: ERC20OrNativeToken;
+ token:
+ | {
+ address: string;
+ icon?: string;
+ }
+ | NativeToken;
chain: Chain;
size: keyof typeof iconSize;
client: ThirdwebClient;
-}) {
- const token = props.token;
-
- if (isNativeToken(token)) {
- return (
- 
- );
-}
-
-function NativeTokenIcon(props: {
- chain: Chain;
- nativeToken: NativeToken;
- size: keyof typeof iconSize;
- client: ThirdwebClient;
}) {
const chainQuery = useChainQuery(props.chain);
return (
{
};
}
+ if (props.variant === "ghost") {
+ return {
+ border: "1.5px solid transparent",
+ "&:hover": {
+ borderColor: theme.colors.accentText,
+ },
+ };
+ }
+
if (props.variant === "secondary") {
return {
"&:hover": {
@@ -111,6 +120,8 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
};
});
+export const ButtonLink = /* @__PURE__ */ (() => Button.withComponent("a"))();
+
export const IconButton = /* @__PURE__ */ StyledButton(() => {
const theme = useCustomTheme();
return {
diff --git a/packages/thirdweb/src/react/web/ui/components/token/TokenSymbol.tsx b/packages/thirdweb/src/react/web/ui/components/token/TokenSymbol.tsx
index c2673b0c911..5da6d33161b 100644
--- a/packages/thirdweb/src/react/web/ui/components/token/TokenSymbol.tsx
+++ b/packages/thirdweb/src/react/web/ui/components/token/TokenSymbol.tsx
@@ -17,10 +17,15 @@ export function TokenSymbol(props: {
chain: Chain;
size: "sm" | "md" | "lg";
color?: keyof Theme["colors"];
+ inline?: boolean;
}) {
if (!isNativeToken(props.token)) {
return (
-
+
{props.token.symbol}
);
@@ -31,6 +36,7 @@ export function TokenSymbol(props: {
chain={props.chain}
size={props.size}
color={props.color}
+ inline={props.inline}
/>
);
}
@@ -39,6 +45,7 @@ function NativeTokenSymbol(props: {
chain: Chain;
size: "sm" | "md" | "lg";
color?: keyof Theme["colors"];
+ inline?: boolean;
}) {
const chainQuery = useChainQuery(props.chain);
const data = chainQuery.data;
@@ -48,7 +55,11 @@ function NativeTokenSymbol(props: {
}
return (
-
+
{data.nativeCurrency.symbol}
);
diff --git a/packages/thirdweb/src/react/web/ui/design-system/elements.ts b/packages/thirdweb/src/react/web/ui/design-system/elements.ts
index 655aadde7ac..11f4c035d9e 100644
--- a/packages/thirdweb/src/react/web/ui/design-system/elements.ts
+++ b/packages/thirdweb/src/react/web/ui/design-system/elements.ts
@@ -11,5 +11,6 @@ export const StyledInput = /* @__PURE__ */ styled.input;
export const StyledH2 = /* @__PURE__ */ styled.h2;
export const StyledP = /* @__PURE__ */ styled.p;
export const StyledUl = /* @__PURE__ */ styled.ul;
+export const StyledIframe = /* @__PURE__ */ styled.iframe;
export const StyledSelect = /* @__PURE__ */ styled.select;
export const StyledOption = /* @__PURE__ */ styled.option;
+
+
+
+
+
+ )}
+
+ {/* Row 1 */}
+
+
+ Buy{" "}
+ {formatNumber(
+ Number(
+ props.txInfo.type === "swap"
+ ? props.txInfo.status.quote.toAmount
+ : props.txInfo.status.quote.estimatedToTokenAmount,
+ ),
+ 4,
+ )}{" "}
+ {props.txInfo.status.quote.toToken.symbol}
+ {" "}
+
+
+
+
+
+
+ {isPartialSuccess && gotToken ? (
+ <>
+ {/* Expected */}
+
+ Time
+
+
+ ~{formatSeconds(estimatedDuration || 0)}
+
+
+
+
+ {statusMeta && showStatusRow && (
+ <>
+ {lineSpacer}
+
+ {/* Status */}
+
+ Status
+
+ {statusMeta.status}
+
+
+
+ )}
+
+ {lineSpacer}
+
+ {fromChainQuery.data?.explorers?.[0]?.url && sourceTxHash && (
+
+ View on {fromChainQuery.data.name} Explorer
+
+ )}
+
+ {destinationTxHash &&
+ sourceTxHash !== destinationTxHash &&
+ toChainQuery.data?.explorers?.[0]?.url && (
+ <>
+
+ View on {toChainQuery.data.name} Explorer
+
+
+ )}
+
+ );
+}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/TokenInfoRow.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/TokenInfoRow.tsx
new file mode 100644
index 00000000000..71c55552811
--- /dev/null
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/TokenInfoRow.tsx
@@ -0,0 +1,54 @@
+import { useMemo } from "react";
+import { defineChain } from "../../../../../../../chains/utils.js";
+import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import { formatNumber } from "../../../../../../../utils/formatNumber.js";
+import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js";
+import { TokenIcon } from "../../../../components/TokenIcon.js";
+import { Container } from "../../../../components/basic.js";
+import { Text } from "../../../../components/text.js";
+
+export function TokenInfoRow(props: {
+ tokenSymbol: string;
+ tokenAmount: string;
+ tokenAddress: string;
+ chainId: number;
+ label: string;
+ client: ThirdwebClient;
+}) {
+ const chainObj = useMemo(() => defineChain(props.chainId), [props.chainId]);
+ const chainQuery = useChainQuery(chainObj);
+
+ return (
+
-
-
-
- )}
-
-
-
- {/* Row 1 */}
-
- Buy
-
- + {formatNumber(Number(boughtTokenAmount), 4)} {boughtTokenSymbol}
- {" "}
-
-
-
- {/* Status */}
-
-
- {statusMeta.status}
-
- {statusMeta.loading &&
-
- {/* Network */}
- {chainQuery.data?.name ? (
- {chainQuery.data.name}
- ) : (
-
-
-
+
+ );
+ } else if (screen === "tx-history") {
+ content = (
+