thirdweb 5.29.6 → 5.30.0-nightly-33777df88fb190c2af8ad25e4930040884996f1e-20240620000630

package/src/pay/buyWithCrypto/getQuote.ts

@@ -65,6 +65,13 @@ export type GetBuyWithCryptoQuoteParams = {
    */
   toTokenAddress: string;
 
+  /**
+   * Extra details to store with the purchase.
+   *
+   * This details will be stored with the purchase and can be retrieved later via the status API or Webhook
+   */
+  purchaseData?: object;
+
   /**
    * The maximum slippage in basis points (bps) allowed for the swap.
    * For example, if you want to allow a maximum slippage of 0.5%, you should specify `50` bps.
@@ -229,34 +236,27 @@ export async function getBuyWithCryptoQuote(
   params: GetBuyWithCryptoQuoteParams,
 ): Promise<BuyWithCryptoQuote> {
   try {
-    const queryParams = new URLSearchParams({
-      fromAddress: params.fromAddress,
-      fromChainId: params.fromChainId.toString(),
-      fromTokenAddress: params.fromTokenAddress.toLowerCase(),
-      toChainId: params.toChainId.toString(),
-      toTokenAddress: params.toTokenAddress.toLowerCase(),
-    });
-
-    if ("fromAmount" in params && params.fromAmount) {
-      queryParams.append("fromAmount", params.fromAmount);
-    }
-
-    if ("toAmount" in params && params.toAmount) {
-      queryParams.append("toAmount", params.toAmount);
-    }
-
-    if (params.maxSlippageBPS) {
-      queryParams.append("maxSlippageBPS", params.maxSlippageBPS.toString());
-    }
-
-    if (params.intentId) {
-      queryParams.append("intentId", params.intentId);
-    }
-
-    const queryString = queryParams.toString();
-    const url = `${getPayBuyWithCryptoQuoteEndpoint()}?${queryString}`;
+    const clientFetch = getClientFetch(params.client);
 
-    const response = await getClientFetch(params.client)(url);
+    const response = await clientFetch(getPayBuyWithCryptoQuoteEndpoint(), {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        fromAddress: params.fromAddress,
+        fromChainId: params.fromChainId.toString(),
+        fromTokenAddress: params.fromTokenAddress,
+        toChainId: params.toChainId.toString(),
+        toTokenAddress: params.toTokenAddress,
+        fromAmount: params.fromAmount,
+        toAmount: params.toAmount,
+        maxSlippageBPS: params.maxSlippageBPS,
+        intentId: params.intentId,
+        purchaseData: params.purchaseData,
+      }),
+    });
 
     // Assuming the response directly matches the SwapResponse interface
     if (!response.ok) {

package/src/pay/buyWithCrypto/getStatus.ts

@@ -70,6 +70,7 @@ export type BuyWithCryptoStatus =
       toAddress: string;
       failureMessage?: string;
       bridge?: string;
+      purchaseData?: object;
     };
 
 export type ValidBuyWithCryptoStatus = Exclude<

package/src/pay/buyWithFiat/getQuote.ts

@@ -15,10 +15,15 @@ export type GetBuyWithFiatQuoteParams = {
   client: ThirdwebClient;
 
   /**
-   * The address of the wallet to which the tokens will be sent.
+   * The address of the wallet where the tokens will be sent.
    */
   toAddress: string;
 
+  /**
+   * The address of the wallet which will be used to buy the token.
+   */
+  fromAddress: string;
+
   /**
    * Chain id of the token to buy.
    */
@@ -62,6 +67,13 @@ export type GetBuyWithFiatQuoteParams = {
    * Defaults to `false`
    */
   isTestMode?: boolean;
+
+  /**
+   * Extra details to store with the purchase.
+   *
+   * This details will be stored with the purchase and can be retrieved later via the status API or Webhook
+   */
+  purchaseData?: object;
 };
 
 /**
@@ -236,33 +248,27 @@ export async function getBuyWithFiatQuote(
   params: GetBuyWithFiatQuoteParams,
 ): Promise<BuyWithFiatQuote> {
   try {
-    const queryParams = new URLSearchParams({
-      toAddress: params.toAddress,
-      fromCurrencySymbol: params.fromCurrencySymbol,
-      toChainId: params.toChainId.toString(),
-      toTokenAddress: params.toTokenAddress.toLowerCase(),
-    });
-
-    if (params.fromAmount) {
-      queryParams.append("fromAmount", params.fromAmount);
-    }
-
-    if (params.toAmount) {
-      queryParams.append("toAmount", params.toAmount);
-    }
-
-    if (params.maxSlippageBPS) {
-      queryParams.append("maxSlippageBPS", params.maxSlippageBPS.toString());
-    }
+    const clientFetch = getClientFetch(params.client);
 
-    if (params.isTestMode) {
-      queryParams.append("isTestMode", params.isTestMode.toString());
-    }
-
-    const queryString = queryParams.toString();
-    const url = `${getPayBuyWithFiatQuoteEndpoint()}?${queryString}`;
-
-    const response = await getClientFetch(params.client)(url);
+    const response = await clientFetch(getPayBuyWithFiatQuoteEndpoint(), {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        toAddress: params.toAddress,
+        fromCurrencySymbol: params.fromCurrencySymbol,
+        toChainId: params.toChainId.toString(),
+        toTokenAddress: params.toTokenAddress,
+        fromAmount: params.fromAmount,
+        toAmount: params.toAmount,
+        maxSlippageBPS: params.maxSlippageBPS,
+        isTestMode: params.isTestMode,
+        purchaseData: params.purchaseData,
+        fromAddress: params.fromAddress,
+      }),
+    });
 
     // Assuming the response directly matches the SwapResponse interface
     if (!response.ok) {

package/src/pay/buyWithFiat/getStatus.ts

@@ -116,6 +116,11 @@ export type BuyWithFiatStatus =
        * Message indicating the reason for failure
        */
       failureMessage?: string;
+
+      /**
+       * Arbitrary data sent at the time of fetching the quote
+       */
+      purchaseData?: object;
     };
 
 /**

package/src/react/core/hooks/contract/useContractEvents.ts

@@ -35,7 +35,7 @@ type UseContractEventsOptions<
  *
  * const account = useActiveAccount();
  * const contractEvents = useContractEvents({
- *  contract
+ *  contract,
  *  events: [tokensClaimedEvent({ claimer: account?.address })],
  * });
  * ```

package/src/react/core/hooks/transaction/useSendTransaction.ts

@@ -47,6 +47,7 @@ export type SendTransactionPayModalConfig =
         | {
             testMode?: boolean;
           };
+      purchaseData?: object;
     }
   | false;
 

package/src/react/native/hooks/wallets/useActiveWalletChain.ts

@@ -8,7 +8,7 @@ import { connectionManager } from "../../index.js";
  * ```jsx
  * import { useActiveWalletChain } from "thirdweb/react";
  *
- * const chainId = useActiveWalletChain();
+ * const activeChain = useActiveWalletChain();
  * ```
  * @walletConnection
  */

package/src/react/web/hooks/transaction/useSendTransaction.tsx

@@ -92,6 +92,7 @@ export function useSendTransaction(config: SendTransactionConfig = {}) {
                 payOptions={{
                   buyWithCrypto: payModal?.buyWithCrypto,
                   buyWithFiat: payModal?.buyWithFiat,
+                  purchaseData: payModal?.purchaseData,
                 }}
               />,
             );

package/src/react/web/hooks/wallets/useActiveWalletChain.ts

@@ -8,7 +8,7 @@ import { connectionManager } from "../../index.js";
  * ```jsx
  * import { useActiveWalletChain } from "thirdweb/react";
  *
- * const chainId = useActiveWalletChain();
+ * const activeChain = useActiveWalletChain();
  * ```
  * @walletConnection
  */

package/src/react/web/ui/ConnectWallet/ConnectButtonProps.ts

@@ -74,6 +74,13 @@ export type PayUIOptions = {
         testMode?: boolean;
       }
     | false;
+
+  /**
+   * Extra details to store with the purchase.
+   *
+   * This details will be stored with the purchase and can be retrieved later via the status API or Webhook
+   */
+  purchaseData?: object;
 };
 
 /**
@@ -85,7 +92,7 @@ export type ConnectButton_connectButtonOptions = {
    * Set a custom label for the button. The default is `"Connect"`
    * @example
    * ```tsx
-   * <ConnectButton button={{
+   * <ConnectButton connectButton={{
    *    label: "Sign in"
    * }} />
    * ```
@@ -98,8 +105,8 @@ export type ConnectButton_connectButtonOptions = {
    * For some CSS properties, you may need to use the `!important` to override the default styles
    *
    * ```tsx
-   * <ConnectButton button={{
-   *  className="my-custom-class"
+   * <ConnectButton connectButton={{
+   *   className: "my-custom-class",
    * }} />
    * ```
    */
@@ -107,6 +114,14 @@ export type ConnectButton_connectButtonOptions = {
 
   /**
    * CSS styles to apply to the connectButton element
+   * @example
+   * ```tsx
+   * <ConnectButton connectButton={{
+   *   style: {
+   *     color: "red",
+   *   },
+   * }} />
+   * ```
    */
   style?: React.CSSProperties;
 };
@@ -205,7 +220,7 @@ export type ConnectButton_detailsButtonOptions = {
    * @example
    * ```tsx
    * <ConnectButton detailsButton={{
-   *    balanceToken:{
+   *    displayBalanceToken:{
    *      // show USDC balance when connected to Ethereum mainnet or Polygon
    *      [ethereum.id]: "0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599",
    *      [polygon.id]: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359",
@@ -559,16 +574,42 @@ export type ConnectButtonProps = {
   signInButton?: {
     /**
      * Set a custom label for the sign-in button
+     * @example
+     * ```tsx
+     * <ConnectButton
+     *   signInButton={{
+     *     label: "Sign in now!"
+     *   }}
+     * />
+     * ```
      */
     label?: string;
 
     /**
      * CSS styles to apply to the sign-in button element
+     * @example
+     * ```tsx
+     * <ConnectButton
+     *   signInButton={{
+     *     style: {
+     *       color: "purple",
+     *     }
+     *   }}
+     * />
+     * ```
      */
     style?: React.CSSProperties;
 
     /**
      * CSS class to apply to the sign-in button element
+     * @example
+     * ```tsx
+     * <ConnectButton
+     *   signInButton={{
+     *     className: "my-class-name"
+     *   }}
+     * />
+     * ```
      */
     className?: string;
   };

package/src/react/web/ui/ConnectWallet/Details.tsx

@@ -6,7 +6,6 @@ import {
   PaperPlaneIcon,
   PinBottomIcon,
   PlusIcon,
-  ShuffleIcon,
   TextAlignJustifyIcon,
 } from "@radix-ui/react-icons";
 import { useQuery } from "@tanstack/react-query";
@@ -18,8 +17,6 @@ import { getContract } from "../../../../contract/contract.js";
 import { resolveAvatar } from "../../../../extensions/ens/resolve-avatar.js";
 import { resolveName } from "../../../../extensions/ens/resolve-name.js";
 import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deployed.js";
-import { isInAppWallet } from "../../../../wallets/in-app/core/wallet/index.js";
-import { injectedProvider } from "../../../../wallets/injected/mipdStore.js";
 import {
   CustomThemeProvider,
   useCustomTheme,
@@ -65,41 +62,34 @@ import type {
   ConnectButton_detailsModalOptions,
   PayUIOptions,
 } from "./ConnectButtonProps.js";
+import { MenuButton, MenuLink } from "./MenuButton.js";
 import {
   NetworkSelectorContent,
   type NetworkSelectorProps,
 } from "./NetworkSelector.js";
 import { onModalUnmount } from "./constants.js";
 import type { SupportedTokens } from "./defaultTokens.js";
+import { CoinsIcon } from "./icons/CoinsIcon.js";
 import { FundsIcon } from "./icons/FundsIcon.js";
-import { KeyIcon } from "./icons/KeyIcon.js";
+import { GenericWalletIcon } from "./icons/GenericWalletIcon.js";
+import { OutlineWalletIcon } from "./icons/OutlineWalletIcon.js";
 import { SmartWalletBadgeIcon } from "./icons/SmartAccountBadgeIcon.js";
-import { WalletIcon } from "./icons/WalletIcon.js";
-import { genericTokenIcon } from "./icons/dataUris.js";
 import { getConnectLocale } from "./locale/getConnectLocale.js";
 import type { ConnectLocale } from "./locale/types.js";
 import { LazyBuyScreen } from "./screens/Buy/LazyBuyScreen.js";
 import { BuyTxHistory } from "./screens/Buy/tx-history/BuyTxHistory.js";
+import { ManageWalletScreen } from "./screens/ManageWalletScreen.js";
 import { PrivateKey } from "./screens/PrivateKey.js";
 import { ReceiveFunds } from "./screens/ReceiveFunds.js";
 import { SendFunds } from "./screens/SendFunds.js";
 import { ViewFunds } from "./screens/ViewFunds.js";
+import { WalletConnectReceiverScreen } from "./screens/WalletConnectReceiverScreen.js";
+import type { WalletDetailsModalScreen } from "./screens/types.js";
 
 const TW_CONNECTED_WALLET = "tw-connected-wallet";
 
 const LocalhostChainId = 1337;
 
-type WalletDetailsModalScreen =
-  | "main"
-  | "export"
-  | "send"
-  | "receive"
-  | "buy"
-  | "network-switcher"
-  | "pending-tx"
-  | "view-funds"
-  | "private-key";
-
 /**
  * @internal
  */
@@ -195,7 +185,7 @@ export const ConnectedWalletDetails: React.FC<{
       ) : activeWallet?.id ? (
         <WalletImage size={iconSize.lg} id={activeWallet.id} client={client} />
       ) : (
-        <WalletIcon size={iconSize.lg} />
+        <GenericWalletIcon size={iconSize.lg} />
       )}
 
       <Container flex="column" gap="xxs">
@@ -341,10 +331,11 @@ function DetailsModal(props: {
             client={client}
           />
         ) : (
-          <WalletIcon size={iconSize.xxl} />
+          <GenericWalletIcon size={iconSize.xxl} />
         )}
 
         <Spacer y="md" />
+
         <ConnectedToSmartWallet client={props.client} connectLocale={locale} />
 
         {(activeWallet?.id === "embedded" || activeWallet?.id === "inApp") && (
@@ -501,31 +492,22 @@ function DetailsModal(props: {
               fontSize: fontSize.sm,
             }}
           >
-            <Img
-              width={iconSize.md}
-              height={iconSize.md}
-              src={genericTokenIcon}
-              client={client}
-            />
+            <CoinsIcon size={iconSize.md} />
             <Text color="primaryText">View Funds</Text>
           </MenuButton>
 
-          {/* Private Key Export (if enabled) */}
-          {activeWallet &&
-            isInAppWallet(activeWallet) &&
-            !activeWallet.getConfig()?.hidePrivateKeyExport && (
-              <MenuButton
-                onClick={() => {
-                  setScreen("private-key");
-                }}
-                style={{
-                  fontSize: fontSize.sm,
-                }}
-              >
-                <KeyIcon size={iconSize.md} />
-                <Text color="primaryText">Export Private Key</Text>
-              </MenuButton>
-            )}
+          {/* Manage Wallet */}
+          <MenuButton
+            onClick={() => {
+              setScreen("manage-wallet");
+            }}
+            style={{
+              fontSize: fontSize.sm,
+            }}
+          >
+            <OutlineWalletIcon size={iconSize.md} />
+            <Text color="primaryText">Manage Wallet</Text>
+          </MenuButton>
 
           {/* Switch to Personal Wallet  */}
           {/* {personalWallet &&
@@ -541,11 +523,6 @@ function DetailsModal(props: {
             <AccountSwitcher name={locale.smartWallet} wallet={smartWallet} />
           )} */}
 
-          <SwitchMetamaskAccount
-            closeModal={closeModal}
-            connectLocale={locale}
-          />
-
           {/* Request Testnet funds */}
           {(props.detailsModal?.showTestnetFaucet ?? false) &&
             ((chainQuery.data?.faucets && chainQuery.data.faucets.length > 0) ||
@@ -568,23 +545,6 @@ function DetailsModal(props: {
               </MenuLink>
             )}
 
-          {/* Export  Wallet */}
-          {/* {activeWallet?.id === "local" && (
-            <div>
-              <MenuButton
-                onClick={() => {
-                  setScreen("export");
-                }}
-                style={{
-                  fontSize: fontSize.sm,
-                }}
-              >
-                <PinBottomIcon width={iconSize.md} height={iconSize.md} />
-                <Text color="primaryText">{locale.backupWallet}</Text>
-              </MenuButton>
-            </div>
-          )} */}
-
           {props.detailsModal?.footer && (
             <props.detailsModal.footer close={closeModal} />
           )}
@@ -672,9 +632,32 @@ function DetailsModal(props: {
     content = (
       <PrivateKey
         theme={props.theme} // do not use the useCustomTheme hook to get this, it's not valid here
+        onBack={() => {
+          setScreen("manage-wallet");
+        }}
+        client={client}
+      />
+    );
+  } else if (screen === "manage-wallet") {
+    content = (
+      <ManageWalletScreen
         onBack={() => {
           setScreen("main");
         }}
+        locale={locale}
+        closeModal={closeModal}
+        client={client}
+        setScreen={setScreen}
+      />
+    );
+  } else if (screen === "wallet-connect-receiver") {
+    content = (
+      <WalletConnectReceiverScreen
+        onBack={() => {
+          setScreen("manage-wallet");
+        }}
+        chains={props.chains}
+        closeModal={closeModal}
         client={client}
       />
     );
@@ -774,54 +757,6 @@ const WalletInfoButton = /* @__PURE__ */ StyledButton(() => {
   };
 });
 
-const MenuButton = /* @__PURE__ */ StyledButton(() => {
-  const theme = useCustomTheme();
-  return {
-    all: "unset",
-    padding: `${spacing.sm} ${spacing.sm}`,
-    borderRadius: radius.md,
-    backgroundColor: "transparent",
-    // border: `1px solid ${theme.colors.borderColor}`,
-    boxSizing: "border-box",
-    display: "flex",
-    alignItems: "center",
-    width: "100%",
-    cursor: "pointer",
-    fontSize: fontSize.md,
-    fontWeight: 500,
-    color: theme.colors.secondaryText,
-    gap: spacing.sm,
-    WebkitTapHighlightColor: "transparent",
-    lineHeight: 1.3,
-    transition: "background-color 200ms ease, transform 200ms ease",
-    "&:hover": {
-      backgroundColor: theme.colors.tertiaryBg,
-      transform: "scale(1.01)",
-      svg: {
-        color: theme.colors.accentText,
-      },
-    },
-    "&[disabled]": {
-      cursor: "not-allowed",
-      svg: {
-        display: "none",
-      },
-    },
-    svg: {
-      color: theme.colors.secondaryText,
-      transition: "color 200ms ease",
-    },
-    "&[data-variant='danger']:hover svg": {
-      color: `${theme.colors.danger}!important`,
-    },
-    "&[data-variant='primary']:hover svg": {
-      color: `${theme.colors.primaryText}!important`,
-    },
-  };
-});
-
-const MenuLink = /* @__PURE__ */ (() => MenuButton.withComponent("a"))();
-
 const StyledChevronRightIcon = /* @__PURE__ */ styled(
   /* @__PURE__ */ ChevronRightIcon,
 )(() => {
@@ -996,40 +931,6 @@ function SwitchNetworkButton(props: {
   );
 }
 
-function SwitchMetamaskAccount(props: {
-  closeModal: () => void;
-  connectLocale: ConnectLocale;
-}) {
-  const wallet = useActiveWallet();
-  const connectLocale = props.connectLocale;
-
-  if (wallet?.id !== "io.metamask") {
-    return null;
-  }
-
-  const injectedMetamaskProvider = injectedProvider("io.metamask");
-
-  if (!injectedMetamaskProvider) {
-    return null;
-  }
-
-  return (
-    <MenuButton
-      type="button"
-      onClick={async () => {
-        await injectedMetamaskProvider.request({
-          method: "wallet_requestPermissions",
-          params: [{ eth_accounts: {} }],
-        });
-        props.closeModal();
-      }}
-    >
-      <ShuffleIcon width={iconSize.md} height={iconSize.md} />
-      <Text color="primaryText">{connectLocale.switchAccount}</Text>
-    </MenuButton>
-  );
-}
-
 export type UseWalletDetailsModalOptions = {
   /**
    * A client is the entry point to the thirdweb SDK.

package/src/react/web/ui/ConnectWallet/MenuButton.tsx

@@ -0,0 +1,55 @@
+import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
+import {
+  fontSize,
+  radius,
+  spacing,
+} from "../../../core/design-system/index.js";
+import { StyledButton } from "../design-system/elements.js";
+
+export const MenuButton = /* @__PURE__ */ StyledButton(() => {
+  const theme = useCustomTheme();
+  return {
+    all: "unset",
+    padding: `${spacing.sm} ${spacing.sm}`,
+    borderRadius: radius.md,
+    backgroundColor: "transparent",
+    // border: `1px solid ${theme.colors.borderColor}`,
+    boxSizing: "border-box",
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    cursor: "pointer",
+    fontSize: fontSize.md,
+    fontWeight: 500,
+    color: theme.colors.secondaryText,
+    gap: spacing.sm,
+    WebkitTapHighlightColor: "transparent",
+    lineHeight: 1.3,
+    transition: "background-color 200ms ease, transform 200ms ease",
+    "&:hover": {
+      backgroundColor: theme.colors.tertiaryBg,
+      transform: "scale(1.01)",
+      svg: {
+        color: theme.colors.accentText,
+      },
+    },
+    "&[disabled]": {
+      cursor: "not-allowed",
+      svg: {
+        display: "none",
+      },
+    },
+    svg: {
+      color: theme.colors.secondaryText,
+      transition: "color 200ms ease",
+    },
+    "&[data-variant='danger']:hover svg": {
+      color: `${theme.colors.danger}!important`,
+    },
+    "&[data-variant='primary']:hover svg": {
+      color: `${theme.colors.primaryText}!important`,
+    },
+  };
+});
+
+export const MenuLink = /* @__PURE__ */ (() => MenuButton.withComponent("a"))();