From 3815342438803b219e3705cdc1d5ccd9bc9441c6 Mon Sep 17 00:00:00 2001 From: Manan Tank Date: Fri, 10 May 2024 16:37:14 +0530 Subject: [PATCH 1/3] remove imports from barrel files --- packages/thirdweb/src/pay/getBuyHistory.ts | 3 ++- packages/thirdweb/src/react/web/ui/components/WalletImage.tsx | 2 +- packages/thirdweb/src/wallets/create-wallet.ts | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/thirdweb/src/pay/getBuyHistory.ts b/packages/thirdweb/src/pay/getBuyHistory.ts index 9b5b5d2cbb8..dfaa65289c3 100644 --- a/packages/thirdweb/src/pay/getBuyHistory.ts +++ b/packages/thirdweb/src/pay/getBuyHistory.ts @@ -1,6 +1,7 @@ import type { ThirdwebClient } from "../client/client.js"; -import type { BuyWithCryptoStatus, BuyWithFiatStatus } from "../exports/pay.js"; import { getClientFetch } from "../utils/fetch.js"; +import type { BuyWithCryptoStatus } from "./buyWithCrypto/getStatus.js"; +import type { BuyWithFiatStatus } from "./buyWithFiat/getStatus.js"; import { getPayBuyHistoryEndpoint } from "./utils/definitions.js"; /** diff --git a/packages/thirdweb/src/react/web/ui/components/WalletImage.tsx b/packages/thirdweb/src/react/web/ui/components/WalletImage.tsx index 59942c69848..79f1459fd80 100644 --- a/packages/thirdweb/src/react/web/ui/components/WalletImage.tsx +++ b/packages/thirdweb/src/react/web/ui/components/WalletImage.tsx @@ -1,10 +1,10 @@ "use client"; import { useEffect, useState } from "react"; import type { ThirdwebClient } from "../../../../client/client.js"; -import { useActiveWallet } from "../../../../exports/react-native.js"; import { getInstalledWalletProviders } from "../../../../wallets/injected/mipdStore.js"; import { getStoredActiveWalletId } from "../../../../wallets/manager/index.js"; import type { WalletId } from "../../../../wallets/wallet-types.js"; +import { useActiveWallet } from "../../../core/hooks/wallets/wallet-hooks.js"; import { getStorage } from "../../../core/storage.js"; import { getLastAuthProvider } from "../../wallets/in-app/storage.js"; import { emailIcon, phoneIcon } from "../ConnectWallet/icons/dataUris.js"; diff --git a/packages/thirdweb/src/wallets/create-wallet.ts b/packages/thirdweb/src/wallets/create-wallet.ts index d36bd94b3c0..ffab67cb6d1 100644 --- a/packages/thirdweb/src/wallets/create-wallet.ts +++ b/packages/thirdweb/src/wallets/create-wallet.ts @@ -16,7 +16,7 @@ import type { import { trackConnect } from "../analytics/track.js"; import type { ThirdwebClient } from "../client/client.js"; import { getContract } from "../contract/contract.js"; -import { isContractDeployed } from "../exports/utils.js"; +import { isContractDeployed } from "../utils/bytecode/is-contract-deployed.js"; import { COINBASE } from "./constants.js"; import { DEFAULT_ACCOUNT_FACTORY } from "./smart/lib/constants.js"; import type { WCConnectOptions } from "./wallet-connect/types.js"; From 06f9e0c670a9b392cc3fc5f4d61b1af303ad8052 Mon Sep 17 00:00:00 2001 From: Manan Tank Date: Fri, 10 May 2024 18:58:56 +0530 Subject: [PATCH 2/3] cleanups --- packages/thirdweb/src/exports/react.ts | 6 +- .../src/react/core/hooks/pay/useBuyHistory.ts | 10 +- .../core/hooks/pay/useBuyWithCryptoHistory.ts | 2 +- .../core/hooks/pay/useBuyWithFiatHistory.ts | 2 +- .../core/hooks/pay/useBuyWithFiatQuote.ts | 5 +- .../core/hooks/pay/usePostOnrampQuote.ts | 10 +- .../ui/ConnectWallet/ConnectButtonProps.ts | 4 +- .../react/web/ui/ConnectWallet/Details.tsx | 2 +- .../ConnectWallet/screens/Buy/BuyScreen.tsx | 35 ++--- .../screens/Buy/fiat/FiatFlow.tsx | 10 +- .../screens/Buy/fiat/FiatStatusScreen.tsx | 8 +- .../screens/Buy/fiat/FiatSteps.tsx | 44 +++--- .../screens/Buy/fiat/FiatTxDetailsTable.tsx | 11 +- .../screens/Buy/fiat/PostOnRampSwap.tsx | 24 +--- .../screens/Buy/fiat/PostOnRampSwapFlow.tsx | 4 + .../screens/Buy/openOnRamppopup.tsx | 2 +- .../screens/Buy/swap/ConfirmationScreen.tsx | 5 +- .../ConnectWallet/screens/Buy/swap/Fees.tsx | 3 + .../Buy/tx-history/SwapDetailsScreen.tsx | 9 +- .../tx-history/useBuyTransactionsToShow.ts | 14 +- .../thirdweb/src/react/web/ui/PayEmbed.tsx | 132 +++++++++++++++++- .../react/web/ui/design-system/elements.ts | 1 - 22 files changed, 240 insertions(+), 103 deletions(-) diff --git a/packages/thirdweb/src/exports/react.ts b/packages/thirdweb/src/exports/react.ts index 5606a641f27..243afcb505d 100644 --- a/packages/thirdweb/src/exports/react.ts +++ b/packages/thirdweb/src/exports/react.ts @@ -116,5 +116,9 @@ export { // auth export { type SiweAuthOptions } from "../react/core/hooks/auth/useSiweAuth.js"; -export { PayEmbed, type PayEmbedProps } from "../react/web/ui/PayEmbed.js"; +export { + PayEmbed, + type PayEmbedProps, + type PayEmbedConnectOptions, +} from "../react/web/ui/PayEmbed.js"; export type { PayUIOptions } from "../react/web/ui/ConnectWallet/ConnectButtonProps.js"; diff --git a/packages/thirdweb/src/react/core/hooks/pay/useBuyHistory.ts b/packages/thirdweb/src/react/core/hooks/pay/useBuyHistory.ts index 097b41afef8..36bfd928569 100644 --- a/packages/thirdweb/src/react/core/hooks/pay/useBuyHistory.ts +++ b/packages/thirdweb/src/react/core/hooks/pay/useBuyHistory.ts @@ -31,7 +31,7 @@ export type BuyHistoryQueryOptions = Omit< * import { useBuyHistory } from "thirdweb/react"; * * function Component() { - * const buyWithCryptoHistory = useBuyHistory(params); + * const buyHistoryQuery = useBuyHistory(params); * return
...
* } * ``` @@ -47,13 +47,7 @@ export function useBuyHistory( if (!params) { throw new Error("params are required"); } - if (!params?.client) { - throw new Error("Client is required"); - } - return getBuyHistory({ - ...params, - client: params.client, - }); + return getBuyHistory(params); }, enabled: !!params, }); diff --git a/packages/thirdweb/src/react/core/hooks/pay/useBuyWithCryptoHistory.ts b/packages/thirdweb/src/react/core/hooks/pay/useBuyWithCryptoHistory.ts index dc5acda172a..6e1fc94615f 100644 --- a/packages/thirdweb/src/react/core/hooks/pay/useBuyWithCryptoHistory.ts +++ b/packages/thirdweb/src/react/core/hooks/pay/useBuyWithCryptoHistory.ts @@ -18,7 +18,7 @@ export type BuyWithCryptoHistoryQueryOptions = Omit< >; /** - * Hook to get the "Buy with crypto" transaction history for a given wallet. + * Hook to get the "Buy with crypto" transaction history for a given wallet address. * * This hook is a React Query wrapper of the [`getBuyWithCryptoHistory`](https://portal.thirdweb.com/references/typescript/v5/getBuyWithCryptoHistory) function. * You can also use that function directly diff --git a/packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatHistory.ts b/packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatHistory.ts index cad0c064da2..ad36d5a08a4 100644 --- a/packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatHistory.ts +++ b/packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatHistory.ts @@ -18,7 +18,7 @@ export type BuyWithFiatHistoryQueryOptions = Omit< >; /** - * Hook to get the "Buy with Fiat" transaction history for a given wallet. + * Hook to get the "Buy with Fiat" transaction history for a given wallet address. * * This hook is a React Query wrapper of the [`getBuyWithFiatHistory`](https://portal.thirdweb.com/references/typescript/v5/getBuyWithFiatHistory) function. * You can also use that function directly diff --git a/packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuote.ts b/packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuote.ts index dee064b962d..e75122107bb 100644 --- a/packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuote.ts +++ b/packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuote.ts @@ -26,7 +26,7 @@ export type BuyWithFiatQuoteQueryOptions = Omit< * This hook is a React Query wrapper of the [`getBuyWithFiatQuote`](https://portal.thirdweb.com/references/typescript/v5/getBuyWithFiatQuote) function. * You can also use that function directly * - * Once you have the quote, you can open a new window with `onRampLink` as window location to allow the user to buy the token with fiat currency. + * Once you have the `quote`, you can open a new window with `quote.onRampLink` to allow the user to buy the token with fiat currency. * and [`useBuyWithFiatStatus`](https://portal.thirdweb.com/references/typescript/v5/useBuyWithFiatStatus) function to start polling for the status of this transaction. * * @param params - object of type [`GetBuyWithFiatQuoteParams`](https://portal.thirdweb.com/references/typescript/v5/GetBuyWithFiatQuoteParams) @@ -38,12 +38,13 @@ export type BuyWithFiatQuoteQueryOptions = Omit< * import { base } from "thirdweb/chains"; * import { useBuyWithFiatQuote } from "thirdweb/react"; * + * // get a quote for buying 0.01 base native token with USD fiat currency * function Example() { * const quote = useBuyWithFiatQuote({ * client: client, // thirdweb client * fromCurrencySymbol: "USD", // fiat currency symbol * toChainId: base.id, // base chain id - * toAmount: "10", // amount of token to buy + * toAmount: "0.01", // amount of token to buy * toTokenAddress: NATIVE_TOKEN_ADDRESS, // native token * toAddress: "0x...", // user's wallet address * }); diff --git a/packages/thirdweb/src/react/core/hooks/pay/usePostOnrampQuote.ts b/packages/thirdweb/src/react/core/hooks/pay/usePostOnrampQuote.ts index 011768c8603..a654217c0ac 100644 --- a/packages/thirdweb/src/react/core/hooks/pay/usePostOnrampQuote.ts +++ b/packages/thirdweb/src/react/core/hooks/pay/usePostOnrampQuote.ts @@ -18,10 +18,14 @@ export type PostOnRampQuoteQueryOptions = Omit< >; /** - * When buying a token with fiat currency, It may be a 2 step process where the user is sent an intermediate token from the on-ramp provider ( known as "On-ramp" token ) - * and then it needs to be swapped to destination token. + * When buying a token with fiat currency - It only involes doing on-ramp if the on-ramp provider supports buying the given destination token directly. * - * When you get a "Buy with Fiat" status of type "CRYPTO_SWAP_REQUIRED" from the [`useBuyWithFiatStatus`](https://portal.thirdweb.com/references/typescript/v5/useBuyWithFiatStatus) hook, + * If the on-ramp provider does not support buying the destination token directly, user can be sent an intermediate token with fiat currency from the on-ramp provider which + * can be swapped to destination token onchain. + * + * `usePostOnRampQuote` hook is used to get the quote for swapping the on-ramp token to destination token. + * + * When you get a "Buy with Fiat" status of type `"CRYPTO_SWAP_REQUIRED"` from the [`useBuyWithFiatStatus`](https://portal.thirdweb.com/references/typescript/v5/useBuyWithFiatStatus) hook, * you can use `usePostOnRampQuote` hook to get the quote of type [`BuyWithCryptoQuote`](https://portal.thirdweb.com/references/typescript/v5/BuyWithCryptoQuote) for swapping the on-ramp token to destination token to complete the step-2 of the process. * * Once you have the quote, you can start the Swap process by following the same steps as mentioned in the [`useBuyWithCryptoQuote`](https://portal.thirdweb.com/references/typescript/v5/useBuyWithCryptoQuote) documentation. diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButtonProps.ts b/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButtonProps.ts index d276c5c75c1..26191f63711 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButtonProps.ts +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButtonProps.ts @@ -41,8 +41,8 @@ export type PayUIOptions = { * * By default, the "Crypto" option is enabled. You can disable it by setting `buyWithCrypto` to `false` * - * You can also prefill the source token and chain for the swap to customize the default values. - * You can also disable the edits for the prefilled values by setting `allowEdits` - By default all are editable + * You can prefill the source token and chain using `prefillSource` + * You can also disable the edits for the prefilled values by setting `prefillSource.allowEdits` - By default all are editable * * For example, if you want to allow selecting chain and but disable selecting token, you can set `allowEdits` to `{ token: false, chain: true }` */ diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx index 94b1343fb20..638c3404f21 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx @@ -682,7 +682,7 @@ export const ConnectedWalletDetails: React.FC<{ ); } - // swap tokens + // thirdweb pay else if (screen === "buy") { content = ( - + {account && ( + + )} + {!isExpanded && ( <> {!account && props.connectButton ? ( @@ -572,13 +575,13 @@ function SwapScreenContent( ? { // wallet fromAddress: account.address, - // from token + // from fromChainId: fromChain.id, fromTokenAddress: isNativeToken(fromToken) ? NATIVE_TOKEN_ADDRESS : fromToken.address, - toChainId: toChain.id, // to + toChainId: toChain.id, toTokenAddress: isNativeToken(toToken) ? NATIVE_TOKEN_ADDRESS : toToken.address, @@ -854,8 +857,8 @@ function FiatScreenContent( type AmountTooLowError = { code: "MINIMUM_PURCHASE_AMOUNT"; data: { - minimumAmountUSDCents: 250; - requestedAmountUSDCents: 7; + minimumAmountUSDCents: number; + requestedAmountUSDCents: number; }; }; @@ -877,7 +880,7 @@ function FiatScreenContent( return ( - {/* Show Currency Selector + Calculated Amount */} + {/* Show Calculated Fiat Amount */}
void; @@ -56,8 +62,6 @@ export function OnrampStatusScreen(props: { uiStatus = "completed"; } - // determine step - // close the onramp popup if onramp is completed useEffect(() => { if (!openedWindow || !statusQuery.data) { diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatSteps.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatSteps.tsx index 3b959a9c8c7..fbe096684f0 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatSteps.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatSteps.tsx @@ -19,6 +19,7 @@ import { Button, ButtonLink } from "../../../../components/buttons.js"; import { Text } from "../../../../components/text.js"; import { TokenSymbol } from "../../../../components/token/TokenSymbol.js"; import { + type Theme, fontSize, iconSize, radius, @@ -67,7 +68,6 @@ export function fiatQuoteToPartialQuote( name: quote.onRampToken.token.name, symbol: quote.onRampToken.token.symbol, }, - toToken: { chainId: quote.toToken.chainId, tokenAddress: quote.toToken.tokenAddress, @@ -532,16 +532,24 @@ function StepContainer(props: { state?: FiatStatusMeta["progressStatus"]; children: React.ReactNode; }) { - const color = - props.state === "actionRequired" || props.state === "pending" - ? "accentText" - : props.state === "completed" - ? "success" - : props.state === "failed" - ? "danger" - : props.state === "partialSuccess" - ? "danger" - : "borderColor"; + let color: keyof Theme["colors"] = "borderColor"; + let text: string | undefined; + + if (props.state === "pending") { + text = "Pending"; + color = "accentText"; + } else if (props.state === "actionRequired") { + color = "accentText"; + } else if (props.state === "completed") { + text = "Completed"; + color = "success"; + } else if (props.state === "failed") { + color = "danger"; + text = "Failed"; + } else if (props.state === "partialSuccess") { + color = "danger"; + text = "Incomplete"; + } return ( - {props.state && ( + {props.state && text && ( - {props.state === "completed" - ? "Completed" - : props.state === "failed" - ? "Failed" - : props.state === "pending" - ? "Pending" - : props.state === "actionRequired" - ? "" - : props.state === "partialSuccess" - ? "Incomplete" - : undefined} + {text} )} diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx index b484a2f1e9f..4923f4ebbc8 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx @@ -12,8 +12,12 @@ import { USDIcon } from "../../../icons/currencies/USDIcon.js"; import { TokenInfoRow } from "../tx-history/TokenInfoRow.js"; import type { FiatStatusMeta } from "../tx-history/statusMeta.js"; +/** + * Show a table with the details of a "OnRamp" transaction step in the "Buy with Fiat" flow. + * - Show OnRamp token as "Receive" + * - Show fiat amount as "Pay" + */ export function OnRampTxDetailsTable(props: { - // status: ValidBuyWithFiatStatus; client: ThirdwebClient; token: { chainId: number; @@ -44,6 +48,7 @@ export function OnRampTxDetailsTable(props: { return (
+ {/* Receive */} + {/* Status */} {props.statusMeta && ( <> {lineSpacer} - - {/* Status */} 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 index 8c17f3e15b1..51448945ac5 100644 --- 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 @@ -26,7 +26,7 @@ export function PostOnRampSwap(props: { const account = useActiveAccount(); const [lockedOnRampQuote, setLockedOnRampQuote] = useState< - BuyWithCryptoQuote | undefined | null + BuyWithCryptoQuote | undefined >(undefined); const postOnRampQuoteQuery = useQuery({ @@ -116,28 +116,6 @@ export function PostOnRampSwap(props: { ); } - if (lockedOnRampQuote === null) { - return ( - - - - - - - - - - - - - No transaction found - - - - - ); - } - return ( so it does not suddenly change during the swap process. +/** + * - Show 2 steps UI with step 2 highlighted, on continue button click: + * - Show swap flow + */ export function PostOnRampSwapFlow(props: { status: BuyWithFiatStatus; quote: BuyWithFiatPartialQuote; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/openOnRamppopup.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/openOnRamppopup.tsx index 7be5dcd605a..8d0fecbfbf3 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/openOnRamppopup.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/openOnRamppopup.tsx @@ -6,7 +6,7 @@ export function openOnrampPopup(link: string, theme: string) { return window.open( `${link}&theme=${theme}`, - "Buy", + "thirdweb Pay", `width=${width}, height=${height}, top=${top}, left=${left}`, ); } diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx index d45bbeff5a8..2e15ae27a52 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx @@ -79,7 +79,7 @@ export function SwapConfirmationScreen(props: { )} - {/* You Receive */} + {/* Receive */} + {/* Pay */} - {/* Show 2 steps */} + {/* Show 2 steps - Approve and confirm */} {isApprovalRequired && ( <> diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/Fees.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/Fees.tsx index 84e0e3acdaf..c9860dbf913 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/Fees.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/Fees.tsx @@ -50,6 +50,7 @@ export function FiatFees(props: { }) { return ( + {/* Amount ( without fees included ) */}
+ {/* Processing Fees */} {props.quote.processingFees.map((fee, i) => { const feeAmount = formatNumber(Number(fee.amount), 4); @@ -93,6 +95,7 @@ export function FiatFees(props: { + {/* Total Amount */}
{isPartialSuccess && gotToken ? ( + // Expected + Got <> {/* Expected */} ) : ( + // Receive + {/* Status */} {statusMeta && showStatusRow && ( <> {lineSpacer} - - {/* Status */} )} + {/* destination chain tx hash link */} {destinationTxHash && sourceTxHash !== destinationTxHash && toChainQuery.data?.explorers?.[0]?.url && ( diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/useBuyTransactionsToShow.ts b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/useBuyTransactionsToShow.ts index 9f5fc7376c4..39c68e7d24a 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/useBuyTransactionsToShow.ts +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/useBuyTransactionsToShow.ts @@ -99,7 +99,7 @@ export function useBuyTransactionsToShow(client: ThirdwebClient) { if (query.data) { const txStatusInfo = query.data; - // if already present - don't add it + // if already present in endpoint - don't add it if (buyHistory.data) { if (txStatusInfo.type === "swap") { const isPresent = buyHistory.data.page.find((tx) => { @@ -138,7 +138,7 @@ export function useBuyTransactionsToShow(client: ThirdwebClient) { } } } else { - // if no history - add without duplicate check + // if no buy history available for this walllet - add without duplicate check txStatusList.push(txStatusInfo); } } @@ -148,14 +148,20 @@ export function useBuyTransactionsToShow(client: ThirdwebClient) { if (buyHistory.data) { for (const tx of buyHistory.data.page) { if ("buyWithCryptoStatus" in tx) { - if (tx.buyWithCryptoStatus.status !== "NOT_FOUND") { + if ( + tx.buyWithCryptoStatus.status !== "NOT_FOUND" && + tx.buyWithCryptoStatus.status !== "NONE" + ) { txStatusList.push({ type: "swap", status: tx.buyWithCryptoStatus, }); } } else { - if (tx.buyWithFiatStatus.status !== "NOT_FOUND") { + if ( + tx.buyWithFiatStatus.status !== "NOT_FOUND" && + tx.buyWithFiatStatus.status !== "NONE" + ) { txStatusList.push({ type: "fiat", status: tx.buyWithFiatStatus, diff --git a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx b/packages/thirdweb/src/react/web/ui/PayEmbed.tsx index 542c3b37cb3..64fe59e15ee 100644 --- a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx +++ b/packages/thirdweb/src/react/web/ui/PayEmbed.tsx @@ -21,17 +21,131 @@ 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 - +/** + * Props of [`PayEmbed`](https://portal.thirdweb.com/references/typescript/v5/PayEmbed) component + */ export type PayEmbedProps = { + /** + * Override the default tokens shown in PayEmbed uI + * + * By default, PayEmbed shows a few popular tokens for Pay supported chains + * @example + * + * `supportedTokens` prop allows you to override this list as shown below. + * + * ```tsx + * import { ConnectButton } from 'thirdweb/react'; + * import { NATIVE_TOKEN_ADDRESS } from 'thirdweb'; + * + * function Example() { + * return ( + * + * ); + * } + * ``` + */ supportedTokens?: SupportedTokens; + /** + * A client is the entry point to the thirdweb SDK. + * It is required for all other actions. + * You can create a client using the `createThirdwebClient` function. Refer to the [Creating a Client](https://portal.thirdweb.com/typescript/v5/client) documentation for more information. + * + * You must provide a `clientId` or `secretKey` in order to initialize a client. Pass `clientId` if you want for client-side usage and `secretKey` for server-side usage. + * + * ```tsx + * import { createThirdwebClient } from "thirdweb"; + * + * const client = createThirdwebClient({ + * clientId: "", + * }) + * ``` + */ client: ThirdwebClient; + /** + * By default - ConnectButton UI uses the `en-US` locale for english language users. + * + * You can customize the language used in the ConnectButton UI by setting the `locale` prop. + * + * Refer to the [`LocaleId`](https://portal.thirdweb.com/references/typescript/v5/LocaleId) type for supported locales. + */ locale?: LocaleId; + /** + * Customize the Pay UI options. Refer to the [`PayUIOptions`](https://portal.thirdweb.com/references/typescript/v5/PayUIOptions) type for more details. + */ payOptions?: PayUIOptions; + + /** + * Set the theme for the `PayEmbed` component. By default it is set to `"dark"` + * + * theme can be set to either `"dark"`, `"light"` or a custom theme object. + * You can also import [`lightTheme`](https://portal.thirdweb.com/references/typescript/v5/lightTheme) + * or [`darkTheme`](https://portal.thirdweb.com/references/typescript/v5/darkTheme) + * functions from `thirdweb/react` to use the default themes as base and overrides parts of it. + * @example + * ```ts + * import { lightTheme } from "thirdweb/react"; + * + * const customTheme = lightTheme({ + * colors: { + * modalBg: 'red' + * } + * }) + * + * function Example() { + * return + * } + * ``` + */ theme?: "light" | "dark" | Theme; + + /** + * Customize the options for "Connect" Button showin in the PayEmbed UI when the user is not connected to a wallet. + * + * Refer to the [`PayEmbedConnectOptions`](https://portal.thirdweb.com/references/typescript/v5/PayEmbedConnectOptions) type for more details. + */ connectOptions?: PayEmbedConnectOptions; }; +/** + * Embed thirdweb Pay UI for Buy tokens using Crypto or Credit Card. + * + * PayEmbed also renders a "Connect" button if the user is not connected to a wallet. You can customize the options for "Connect" button using the `connectOptions` prop. + * + * @param props - Props of type [`PayEmbedProps`](https://portal.thirdweb.com/references/typescript/v5/PayEmbedProps) to configure the PayEmbed component. + * + * @example + * ```tsx + * + * ``` + */ export function PayEmbed(props: PayEmbedProps) { const localeQuery = useConnectLocale(props.locale || "en_US"); const [screen, setScreen] = useState<"buy" | "tx-history">("buy"); @@ -115,6 +229,20 @@ export function PayEmbed(props: PayEmbedProps) { ); } +/** + * Connection options for the `PayEmbed` component + * + * @example + * ```tsx + * + * ``` + */ export type PayEmbedConnectOptions = { /** * Configurations for the `ConnectButton`'s Modal that is shown for connecting a wallet 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 11f4c035d9e..655aadde7ac 100644 --- a/packages/thirdweb/src/react/web/ui/design-system/elements.ts +++ b/packages/thirdweb/src/react/web/ui/design-system/elements.ts @@ -11,6 +11,5 @@ 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; From a4c7def326806569bfbd1e860851a5d22d8a4a8a Mon Sep 17 00:00:00 2001 From: Manan Tank Date: Fri, 10 May 2024 22:39:04 +0530 Subject: [PATCH 3/3] jsdoc correction in payembed --- .../thirdweb/src/react/web/ui/PayEmbed.tsx | 21 ++----------------- 1 file changed, 2 insertions(+), 19 deletions(-) diff --git a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx b/packages/thirdweb/src/react/web/ui/PayEmbed.tsx index 64fe59e15ee..b444e880d23 100644 --- a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx +++ b/packages/thirdweb/src/react/web/ui/PayEmbed.tsx @@ -34,12 +34,12 @@ export type PayEmbedProps = { * `supportedTokens` prop allows you to override this list as shown below. * * ```tsx - * import { ConnectButton } from 'thirdweb/react'; + * import { PayEmbed } from 'thirdweb/react'; * import { NATIVE_TOKEN_ADDRESS } from 'thirdweb'; * * function Example() { * return ( - * */ connectModal?: ConnectButton_connectModalOptions; @@ -270,14 +267,6 @@ export type PayEmbedConnectOptions = { * * This allows to sponsor gas fees for your user's transaction using the thirdweb account abstraction infrastructure. * - * ```tsx - * */ accountAbstraction?: SmartWalletOptions; @@ -293,8 +282,6 @@ export type PayEmbedConnectOptions = { * If you want to disable autoConnect, set this prop to `false`. * * If you want to customize the timeout, you can assign an object with a `timeout` key to this prop. - * ```tsx - * * ``` */ autoConnect?: @@ -334,10 +321,6 @@ export type PayEmbedConnectOptions = { * - They will be displayed in the network selector in the `ConnectButton`'s details modal post connection * - They will be sent to wallet at the time of connection if the wallet supports requesting multiple chains ( example: WalletConnect ) so that users can switch between the chains post connection easily * - * ```tsx - * - * ``` - * * You can create a `Chain` object using the [`defineChain`](https://portal.thirdweb.com/references/typescript/v5/defineChain) function. * At minimum, you need to pass the `id` of the blockchain to `defineChain` function to create a `Chain` object. *