Add Fiat onramp, Add PayEmbed

.changeset/great-rockets-scream.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react": patch
+---
+
+thirdweb Pay UI minor improvements

.changeset/little-coins-thank.md

@@ -0,0 +1,50 @@
+---
+"thirdweb": minor
+---
+
+### "Credit Card" payment method added in thirdweb Pay for Fiat on-ramp
+
+### `PayEmbed` component added to embed thirdweb Pay UI
+
+```tsx
+<PayEmbed
+  client={client}
+  style={{
+    width: "360px",
+  }}
+/>
+```
+
+### thirdweb Pay UI customization available in `PayEmbed` and `ConnectButton`
+
+`payOptions` prop in `PayEmbed` and `ConnectButton > detailsModal` allows you custimize :
+
+- Enable/Disable payment methods
+- Set default amount for Buy token
+- Set Buy token/chain to be selected by default
+- Set Source token/chain to be selected by default for Crypto payment method
+- Disable editing for Buy token/chain/amount and Source token/chain
+
+```tsx
+<ConnectButton
+  client={client}
+  detailsModal={{
+    payOptions: yourOptions,
+  }}
+/>
+
+<PayEmbed
+  client={client}
+  detailsModal={{
+    payOptions: yourOptions,
+  }}
+/>
+```
+
+### Fiat on-ramp functions and hooks added
+
+- `getBuyWithFiatQuote`, `useBuyWithFiatQuote` to get a quote for buying crypto with fiat currency
+- `getBuyWithFiatStatus`, `useBuyWithFiatStatus` to get status of "Buy with fiat" transaction
+- `getBuyWithFiatHistory`, `useBuyWithFiatHistory` to get "Buy with fiat" transaction history
+- `getPostOnRampQuote`, `usePostOnRampQuote` to get quote for swapping on-ramp token to destination token after doing on-ramp
+- Add `getBuyHistory` and `useBuyHistory` to get both "Buy with Fiat" and "Buy with Crypto" transaction history in a single list

.vscode/settings.json

@@ -5,11 +5,15 @@
     "quickfix.biome": "explicit",
     "source.organizeImports.biome": "explicit"
   },
-  "typescript.preferences.importModuleSpecifier": "relative",
   "[typescriptreact]": {
     "editor.defaultFormatter": "biomejs.biome"
   },
   "[markdown]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "typescript.preferences.autoImportFileExcludePatterns": ["/exports"],
+  "typescript.preferences.importModuleSpecifier": "relative"
 }

legacy_packages/react/src/wallet/ConnectWallet/screens/Buy/swap/pendingSwapTx.ts

@@ -1,11 +1,12 @@
-import { getBuyWithCryptoStatus } from "@thirdweb-dev/sdk";
-import type { BuyWithCryptoStatus } from "@thirdweb-dev/sdk";
+import { getBuyWithCryptoStatus, type BuyWithCryptoStatus } from "@thirdweb-dev/sdk";
 import { wait } from "../../../../../utils/wait";
 
+type ValidBuyWithCryptoStatus = Exclude<BuyWithCryptoStatus, { status: 'NOT_FOUND'}>
+
 type SwapTxInfo = {
   transactionHash: string;
-  status: BuyWithCryptoStatus["status"];
-  subStatus?: BuyWithCryptoStatus["subStatus"];
+  status: ValidBuyWithCryptoStatus["status"];
+  subStatus?: ValidBuyWithCryptoStatus["subStatus"];
   source: {
     symbol: string;
     value: string;

legacy_packages/react/src/wallet/ConnectWallet/screens/SwapTransactionsScreen.tsx

@@ -24,13 +24,16 @@ import { BuyIcon } from "../icons/BuyIcon";
 import { Text } from "../../../components/text";
 import { CryptoIcon } from "../icons/CryptoIcon";
 
+type ValidBuyWithCryptoStatus = Exclude<BuyWithCryptoStatus, { status: 'NOT_FOUND'}>
+
+
 type TxStatusInfo = {
   boughChainId: number;
   transactionHash: string;
   boughtTokenAmount: string;
   boughtTokenSymbol: string;
-  status: BuyWithCryptoStatus["status"];
-  subStatus?: BuyWithCryptoStatus["subStatus"];
+  status: ValidBuyWithCryptoStatus["status"];
+  subStatus?: ValidBuyWithCryptoStatus["subStatus"];
 };
 
 const PAGE_SIZE = 10;
@@ -51,7 +54,11 @@ export function SwapTransactionsScreen(props: { onBack: () => void }) {
 
   const txHashSet = new Set<string>();
   _historyQuery.data?.page.forEach((tx) => {
-    txHashSet.add(tx.source.transactionHash);
+    if (tx.status !== "NOT_FOUND" && tx.status !== 'NONE') {
+      if (tx.source?.transactionHash) {
+        txHashSet.add(tx.source?.transactionHash);
+      }
+    }
   });
 
   // add in-memory pending transactions
@@ -76,15 +83,20 @@ export function SwapTransactionsScreen(props: { onBack: () => void }) {
 
   // Add data from endpoint
   _historyQuery.data?.page.forEach((tx) => {
-    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,
-    });
+    if (tx.status !== "NOT_FOUND" && tx.status !== 'NONE') {
+      if (tx.source?.transactionHash) {
+        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 activeChainId = useChainId();
@@ -367,8 +379,8 @@ const TxHashLink = /* @__PURE__ */ StyledAnchor(() => {
 });
 
 function getStatusMeta(
-  status: BuyWithCryptoStatus["status"],
-  subStatus?: BuyWithCryptoStatus["subStatus"],
+  status: ValidBuyWithCryptoStatus["status"],
+  subStatus?: ValidBuyWithCryptoStatus["subStatus"],
 ) {
   if (subStatus === "WAITING_BRIDGE") {
     return {

packages/thirdweb/src/exports/pay.ts

@@ -4,17 +4,56 @@ export {
   type QuoteApprovalParams,
   type QuoteTokenInfo,
   type GetBuyWithCryptoQuoteParams,
-} from "../pay/buyWithCrypto/actions/getQuote.js";
+} from "../pay/buyWithCrypto/getQuote.js";
 
 export {
   getBuyWithCryptoStatus,
   type BuyWithCryptoStatus,
   type BuyWithCryptoTransaction,
-  type BuyWithCryptoTransactionDetails,
-} from "../pay/buyWithCrypto/actions/getStatus.js";
+} from "../pay/buyWithCrypto/getStatus.js";
 
 export {
   getBuyWithCryptoHistory,
   type BuyWithCryptoHistoryData,
   type BuyWithCryptoHistoryParams,
-} from "../pay/buyWithCrypto/actions/getHistory.js";
+} from "../pay/buyWithCrypto/getHistory.js";
+
+// fiat ------------------------------------------------
+
+export {
+  getBuyWithFiatQuote,
+  type BuyWithFiatQuote,
+  type GetBuyWithFiatQuoteParams,
+} from "../pay/buyWithFiat/getQuote.js";
+
+export {
+  getBuyWithFiatStatus,
+  type BuyWithFiatStatus,
+  type GetBuyWithFiatStatusParams,
+} from "../pay/buyWithFiat/getStatus.js";
+
+export {
+  getBuyWithFiatHistory,
+  type BuyWithFiatHistoryData,
+  type BuyWithFiatHistoryParams,
+} from "../pay/buyWithFiat/getHistory.js";
+
+export {
+  getPostOnRampQuote,
+  type GetPostOnRampQuoteParams,
+} from "../pay/buyWithFiat/getPostOnRampQuote.js";
+
+export {
+  getBuyHistory,
+  type BuyHistoryData,
+  type BuyHistoryParams,
+} from "../pay/getBuyHistory.js";
+
+export { isSwapRequiredPostOnramp } from "../pay/buyWithFiat/isSwapRequiredPostOnramp.js";
+
+// types ------------------------------------------------
+
+export type {
+  PayTokenInfo,
+  PayOnChainTransactionDetails,
+} from "../pay/utils/commonTypes.js";

packages/thirdweb/src/exports/react-native.ts

@@ -32,19 +32,33 @@ export {
 export { createContractQuery } from "../react/core/utils/createQuery.js";
 export { useInvalidateContractQuery } from "../react/core/hooks/others/useInvalidateQueries.js";
 
-// Buy with crypto
+// pay
 export {
   useBuyWithCryptoQuote,
-  type BuyWithCryptoQuoteQueryParams,
+  type BuyWithCryptoQuoteQueryOptions,
 } from "../react/core/hooks/pay/useBuyWithCryptoQuote.js";
-export {
-  useBuyWithCryptoStatus,
-  type BuyWithCryptoStatusQueryParams,
-} from "../react/core/hooks/pay/useBuyWithCryptoStatus.js";
+export { useBuyWithCryptoStatus } from "../react/core/hooks/pay/useBuyWithCryptoStatus.js";
 export {
   useBuyWithCryptoHistory,
-  type BuyWithCryptoHistoryQueryParams,
+  type BuyWithCryptoHistoryQueryOptions,
 } from "../react/core/hooks/pay/useBuyWithCryptoHistory.js";
+export {
+  useBuyWithFiatQuote,
+  type BuyWithFiatQuoteQueryOptions,
+} from "../react/core/hooks/pay/useBuyWithFiatQuote.js";
+export { useBuyWithFiatStatus } from "../react/core/hooks/pay/useBuyWithFiatStatus.js";
+export {
+  useBuyWithFiatHistory,
+  type BuyWithFiatHistoryQueryOptions,
+} from "../react/core/hooks/pay/useBuyWithFiatHistory.js";
+export {
+  useBuyHistory,
+  type BuyHistoryQueryOptions,
+} from "../react/core/hooks/pay/useBuyHistory.js";
+export {
+  usePostOnRampQuote,
+  type PostOnRampQuoteQueryOptions,
+} from "../react/core/hooks/pay/usePostOnrampQuote.js";
 
 import { useSendTransactionCore } from "../react/core/hooks/contract/useSendTransaction.js";
 

packages/thirdweb/src/exports/react.ts

@@ -80,20 +80,33 @@ export {
 export { createContractQuery } from "../react/core/utils/createQuery.js";
 export { useInvalidateContractQuery } from "../react/core/hooks/others/useInvalidateQueries.js";
 
-// Buy with crypto
+// pay
 export {
   useBuyWithCryptoQuote,
-  type BuyWithCryptoQuoteQueryParams,
+  type BuyWithCryptoQuoteQueryOptions,
 } from "../react/core/hooks/pay/useBuyWithCryptoQuote.js";
-
-export {
-  useBuyWithCryptoStatus,
-  type BuyWithCryptoStatusQueryParams,
-} from "../react/core/hooks/pay/useBuyWithCryptoStatus.js";
+export { useBuyWithCryptoStatus } from "../react/core/hooks/pay/useBuyWithCryptoStatus.js";
 export {
   useBuyWithCryptoHistory,
-  type BuyWithCryptoHistoryQueryParams,
+  type BuyWithCryptoHistoryQueryOptions,
 } from "../react/core/hooks/pay/useBuyWithCryptoHistory.js";
+export {
+  useBuyWithFiatQuote,
+  type BuyWithFiatQuoteQueryOptions,
+} from "../react/core/hooks/pay/useBuyWithFiatQuote.js";
+export { useBuyWithFiatStatus } from "../react/core/hooks/pay/useBuyWithFiatStatus.js";
+export {
+  useBuyWithFiatHistory,
+  type BuyWithFiatHistoryQueryOptions,
+} from "../react/core/hooks/pay/useBuyWithFiatHistory.js";
+export {
+  useBuyHistory,
+  type BuyHistoryQueryOptions,
+} from "../react/core/hooks/pay/useBuyHistory.js";
+export {
+  usePostOnRampQuote,
+  type PostOnRampQuoteQueryOptions,
+} from "../react/core/hooks/pay/usePostOnrampQuote.js";
 
 export {
   AutoConnect,
@@ -102,3 +115,6 @@ export {
 
 // auth
 export { type SiweAuthOptions } from "../react/core/hooks/auth/useSiweAuth.js";
+
+export { PayEmbed, type PayEmbedProps } from "../react/web/ui/PayEmbed.js";
+export type { PayUIOptions } from "../react/web/ui/ConnectWallet/ConnectButtonProps.js";

packages/thirdweb/src/exports/thirdweb.ts

@@ -156,20 +156,24 @@ export {
   type QuoteApprovalParams,
   type QuoteTokenInfo,
   type GetBuyWithCryptoQuoteParams,
-} from "../pay/buyWithCrypto/actions/getQuote.js";
+} from "../pay/buyWithCrypto/getQuote.js";
 
 export {
   getBuyWithCryptoStatus,
   type BuyWithCryptoStatus,
   type BuyWithCryptoTransaction,
-  type BuyWithCryptoTransactionDetails,
-} from "../pay/buyWithCrypto/actions/getStatus.js";
+} from "../pay/buyWithCrypto/getStatus.js";
 
 export {
   getBuyWithCryptoHistory,
   type BuyWithCryptoHistoryData,
   type BuyWithCryptoHistoryParams,
-} from "../pay/buyWithCrypto/actions/getHistory.js";
+} from "../pay/buyWithCrypto/getHistory.js";
+
+export type {
+  PayOnChainTransactionDetails,
+  PayTokenInfo,
+} from "../pay/utils/commonTypes.js";
 
 // ------------------------------------------------
 // encoding

packages/thirdweb/src/pay/buyWithCrypto/actions/getHistory.ts → packages/thirdweb/src/pay/buyWithCrypto/getHistory.ts

@@ -1,5 +1,5 @@
-import type { ThirdwebClient } from "../../../client/client.js";
-import { getClientFetch } from "../../../utils/fetch.js";
+import type { ThirdwebClient } from "../../client/client.js";
+import { getClientFetch } from "../../utils/fetch.js";
 import { getPayBuyWithCryptoHistoryEndpoint } from "../utils/definitions.js";
 import type { BuyWithCryptoStatus } from "./getStatus.js";