thirdweb 5.100.2-nightly-5ab59ff400cc32caa414354855fa07831ed90f3a-20250523000413 → 5.101.0

package/src/bridge/Webhook.ts

@@ -0,0 +1,139 @@
+import { z } from "zod/v4-mini";
+import { isAddress } from "../utils/address.js";
+import { isHex } from "../utils/encoding/hex.js";
+
+const hexSchema = z
+  .string()
+  .check(z.refine(isHex, { message: "Invalid hex string" }));
+const addressSchema = z
+  .string()
+  .check(z.refine(isAddress, { message: "Invalid address" }));
+
+const webhookSchema = z.union([
+  z.object({
+    version: z.literal(1),
+    data: z.object({}),
+  }),
+  z.object({
+    version: z.literal(2),
+    data: z.object({
+      paymentId: z.string(),
+      // only exists when the payment was triggered from a developer specified payment link
+      paymentLinkId: z.optional(z.string()),
+      clientId: z.string(),
+      action: z.enum(["TRANSFER", "BUY", "SELL"]),
+      status: z.enum(["PENDING", "FAILED", "COMPLETED"]),
+      originToken: addressSchema,
+      originAmount: z.string(),
+      destinationToken: addressSchema,
+      destinationAmount: z.string(),
+      sender: addressSchema,
+      receiver: addressSchema,
+      type: z.string(),
+      transactions: z.array(hexSchema),
+      developerFeeBps: z.coerce.number(),
+      developerFeeRecipient: addressSchema,
+      purchaseData: z.record(z.string(), z.unknown()),
+    }),
+  }),
+]);
+
+export type WebhookPayload = Exclude<
+  z.infer<typeof webhookSchema>,
+  { version: 1 }
+>;
+
+/**
+ * Parses an incoming webhook from thirdweb.
+ *
+ * @param payload - The raw text body received from thirdweb.
+ * @param headers - The webhook headers received from thirdweb.
+ * @param secret - The webhook secret to verify the payload with.
+ */
+export async function parse(
+  /**
+   * Raw text body received from thirdweb.
+   */
+  payload: string,
+
+  /**
+   * The webhook headers received from thirdweb.
+   */
+  headers: Record<string, string>,
+
+  /**
+   * The webhook secret to verify the payload with.
+   */
+  secret: string,
+
+  /**
+   * The tolerance in seconds for the timestamp verification.
+   */
+  tolerance = 300, // Default to 5 minutes if not specified
+) {
+  // Get the signature and timestamp from headers
+  const receivedSignature =
+    headers["x-payload-signature"] || headers["x-pay-signature"];
+  const receivedTimestamp =
+    headers["x-timestamp"] || headers["x-pay-timestamp"];
+
+  if (!receivedSignature || !receivedTimestamp) {
+    throw new Error("Missing required webhook headers: signature or timestamp");
+  }
+
+  // Verify timestamp
+  const now = Math.floor(Date.now() / 1000);
+  const timestamp = Number.parseInt(receivedTimestamp, 10);
+  const diff = Math.abs(now - timestamp);
+
+  if (diff > tolerance) {
+    throw new Error(
+      `Webhook timestamp is too old. Difference: ${diff}s, tolerance: ${tolerance}s`,
+    );
+  }
+
+  // Generate signature using the same method as the sender
+  const encoder = new TextEncoder();
+  const key = await crypto.subtle.importKey(
+    "raw",
+    encoder.encode(secret),
+    { name: "HMAC", hash: "SHA-256" },
+    false,
+    ["sign"],
+  );
+
+  const signature = await crypto.subtle.sign(
+    "HMAC",
+    key,
+    encoder.encode(`${receivedTimestamp}.${payload}`),
+  );
+
+  // Convert the signature to hex string
+  const computedSignature = Array.from(new Uint8Array(signature))
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+
+  // Compare signatures
+  if (computedSignature !== receivedSignature) {
+    throw new Error("Invalid webhook signature");
+  }
+
+  // Parse the payload as JSON
+  let payloadObject: unknown;
+  try {
+    payloadObject = JSON.parse(payload) as unknown;
+  } catch {
+    throw new Error("Invalid webhook payload: not valid JSON");
+  }
+
+  const parsedPayload = webhookSchema.parse(payloadObject);
+
+  // v1 is no longer supported
+  if (parsedPayload.version === 1) {
+    throw new Error(
+      "Invalid webhook payload: version 1 is no longer supported, please upgrade to webhook version 2.",
+    );
+  }
+
+  return parsedPayload;
+}

package/src/bridge/index.ts

@@ -2,9 +2,11 @@ export * as Buy from "./Buy.js";
 export * as Sell from "./Sell.js";
 export * as Transfer from "./Transfer.js";
 export * as Onramp from "./Onramp.js";
+export * as Webhook from "./Webhook.js";
 export { status } from "./Status.js";
 export { routes } from "./Routes.js";
 export { chains } from "./Chains.js";
+export { parse } from "./Webhook.js";
 
 export type { Chain } from "./types/Chain.js";
 export type { Quote, PreparedQuote } from "./types/Quote.js";
@@ -16,5 +18,6 @@ export type {
 } from "./types/Route.js";
 export type { Status } from "./types/Status.js";
 export type { Token } from "./types/Token.js";
-export type { Action } from "./types/BridgeAction.js";
 export type { ApiError } from "./types/Errors.js";
+export type { Action } from "./types/BridgeAction.js";
+export type { WebhookPayload } from "./Webhook.js";

package/src/engine/get-status.ts

@@ -79,6 +79,7 @@ export async function getTransactionStatus(args: {
   const { client, transactionId } = args;
   const searchResult = await searchTransactions({
     baseUrl: getThirdwebBaseUrl("engineCloud"),
+    bodySerializer: stringify,
     fetch: getClientFetch(client),
     body: {
       filters: [

package/src/engine/server-wallet.test.ts

@@ -3,13 +3,14 @@ import { TEST_CLIENT } from "../../test/src/test-clients.js";
 import { TEST_ACCOUNT_B } from "../../test/src/test-wallets.js";
 import { typedData } from "../../test/src/typed-data.js";
 import { arbitrumSepolia } from "../chains/chain-definitions/arbitrum-sepolia.js";
+import { baseSepolia } from "../chains/chain-definitions/base-sepolia.js";
 import { sepolia } from "../chains/chain-definitions/sepolia.js";
 import { getContract } from "../contract/contract.js";
 import { setContractURI } from "../extensions/common/__generated__/IContractMetadata/write/setContractURI.js";
+import { mintTo } from "../extensions/erc20/write/mintTo.js";
 import { claimTo } from "../extensions/erc1155/drops/write/claimTo.js";
 import { getAllActiveSigners } from "../extensions/erc4337/__generated__/IAccountPermissions/read/getAllActiveSigners.js";
 import { sendTransaction } from "../transaction/actions/send-transaction.js";
-import { setThirdwebDomains } from "../utils/domains.js";
 import {
   DEFAULT_ACCOUNT_FACTORY_V0_6,
   ENTRYPOINT_ADDRESS_v0_6,
@@ -32,12 +33,12 @@ describe.runIf(
     let serverWallet: Engine.ServerWallet;
 
     beforeAll(async () => {
-      setThirdwebDomains({
-        rpc: "rpc.thirdweb-dev.com",
-        storage: "storage.thirdweb-dev.com",
-        bundler: "bundler.thirdweb-dev.com",
-        engineCloud: "engine.thirdweb-dev.com",
-      });
+      // setThirdwebDomains({
+      //   rpc: "rpc.thirdweb-dev.com",
+      //   storage: "storage.thirdweb-dev.com",
+      //   bundler: "bundler.thirdweb-dev.com",
+      //   engineCloud: "engine.thirdweb-dev.com",
+      // });
       serverWallet = Engine.serverWallet({
         client: TEST_CLIENT,
         vaultAccessToken: process.env.VAULT_TOKEN as string,
@@ -81,7 +82,7 @@ describe.runIf(
       });
       const claimTx = claimTo({
         contract: nftContract,
-        to: TEST_ACCOUNT_B.address,
+        to: serverWallet.address,
         tokenId: 0n,
         quantity: 1n,
       });
@@ -97,16 +98,15 @@ describe.runIf(
     });
 
     it("should send a extension tx", async () => {
-      const nftContract = getContract({
+      const tokenContract = getContract({
         client: TEST_CLIENT,
-        chain: sepolia,
-        address: "0xe2cb0eb5147b42095c2FfA6F7ec953bb0bE347D8",
+        chain: baseSepolia,
+        address: "0x87C52295891f208459F334975a3beE198fE75244",
       });
-      const claimTx = claimTo({
-        contract: nftContract,
-        to: TEST_ACCOUNT_B.address,
-        tokenId: 0n,
-        quantity: 1n,
+      const claimTx = mintTo({
+        contract: tokenContract,
+        to: serverWallet.address,
+        amount: "0.001",
       });
       const tx = await sendTransaction({
         account: serverWallet,

package/src/engine/server-wallet.ts

@@ -144,13 +144,14 @@ export function serverWallet(options: ServerWalletOptions): ServerWallet {
 
     const result = await sendTransaction({
       baseUrl: getThirdwebBaseUrl("engineCloud"),
+      bodySerializer: stringify,
       fetch: getClientFetch(client),
       headers,
       body,
     });
 
     if (result.error) {
-      throw new Error(`Error sending transaction: ${result.error}`);
+      throw new Error(`Error sending transaction: ${stringify(result.error)}`);
     }
 
     const data = result.data?.result;
@@ -220,6 +221,7 @@ export function serverWallet(options: ServerWalletOptions): ServerWallet {
 
       const signResult = await signMessage({
         baseUrl: getThirdwebBaseUrl("engineCloud"),
+        bodySerializer: stringify,
         fetch: getClientFetch(client),
         headers,
         body: {
@@ -256,6 +258,7 @@ export function serverWallet(options: ServerWalletOptions): ServerWallet {
 
       const signResult = await signTypedData({
         baseUrl: getThirdwebBaseUrl("engineCloud"),
+        bodySerializer: stringify,
         fetch: getClientFetch(client),
         headers,
         body: {

package/src/react/core/hooks/connection/ConnectButtonProps.ts

@@ -98,6 +98,7 @@ export type PayUIOptions = Prettify<
             currency?: CurrencyMeta["shorthand"];
           };
           preferredProvider?: FiatProvider;
+          supportedProviders?: FiatProvider[];
         }
       | false;
 

package/src/react/web/ui/ConnectWallet/screens/Buy/PayProviderSelection.tsx

@@ -0,0 +1,68 @@
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import type { FiatProvider } from "../../../../../../pay/utils/commonTypes.js";
+import { iconSize, spacing } from "../../../../../core/design-system/index.js";
+import { Container } from "../../../components/basic.js";
+import { Button } from "../../../components/buttons.js";
+import { Text } from "../../../components/text.js";
+import { getProviderLabel } from "./utils.js";
+
+/**
+ * Shows the selected payment provider based on the preferred provider OR the quoted provider.
+ * @internal
+ */
+export const PayProviderSelection = (props: {
+  onShowProviders: () => void;
+  quotedProvider?: FiatProvider;
+  preferredProvider?: FiatProvider;
+  supportedProviders: FiatProvider[];
+}) => {
+  const ProviderItem = (
+    <Container
+      flex="row"
+      center="y"
+      gap="xxs"
+      color="secondaryText"
+      style={{ padding: spacing.md }}
+    >
+      <Text size="xs">
+        {getProviderLabel(
+          props.preferredProvider ?? props.quotedProvider ?? "",
+        )}
+      </Text>
+      {props.supportedProviders.length > 1 && (
+        <ChevronDownIcon width={iconSize.sm} height={iconSize.sm} />
+      )}
+    </Container>
+  );
+
+  return (
+    <Container
+      bg="tertiaryBg"
+      flex="row"
+      borderColor="borderColor"
+      style={{
+        paddingLeft: spacing.md,
+        justifyContent: "space-between",
+        alignItems: "center",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderBottom: "none",
+      }}
+    >
+      <Text size="xs" color="secondaryText">
+        Provider
+      </Text>
+      {props.supportedProviders.length > 1 ? (
+        <Button
+          variant="ghost"
+          onClick={props.onShowProviders}
+          style={{ padding: 0 }} // Padding is managed within children as the button is conditional
+        >
+          {ProviderItem}
+        </Button>
+      ) : (
+        ProviderItem
+      )}
+    </Container>
+  );
+};

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatScreenContent.tsx

@@ -1,15 +1,13 @@
-import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
 import { trackPayEvent } from "../../../../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
-import type { FiatProvider } from "../../../../../../../pay/utils/commonTypes.js";
 import {
-  type Theme,
-  iconSize,
-  spacing,
-} from "../../../../../../core/design-system/index.js";
+  type FiatProvider,
+  FiatProviders,
+} from "../../../../../../../pay/utils/commonTypes.js";
+import type { Theme } from "../../../../../../core/design-system/index.js";
 import type { PayUIOptions } from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
 import { useBuyWithFiatQuote } from "../../../../../../core/hooks/pay/useBuyWithFiatQuote.js";
 import { PREFERRED_FIAT_PROVIDER_STORAGE_KEY } from "../../../../../../core/utils/storage.js";
@@ -26,6 +24,7 @@ import { Button } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
 import { type ERC20OrNativeToken, isNativeToken } from "../../nativeToken.js";
 import { EstimatedTimeAndFees } from "../EstimatedTimeAndFees.js";
+import { PayProviderSelection } from "../PayProviderSelection.js";
 import { PayWithCreditCard } from "../PayWIthCreditCard.js";
 import type { SelectedScreen } from "../main/types.js";
 import { FiatFees } from "../swap/Fees.js";
@@ -84,6 +83,19 @@ export function FiatScreenContent(props: {
       : undefined,
   );
 
+  const supportedProviders = (() => {
+    if (!buyWithFiatOptions) return [...FiatProviders];
+    const options = buyWithFiatOptions?.supportedProviders ?? [];
+    const optionsWithPreferred =
+      options.length > 0
+        ? new Set([
+            ...(preferredProvider ? [preferredProvider] : []),
+            ...options,
+          ])
+        : FiatProviders;
+    return Array.from(optionsWithPreferred);
+  })();
+
   const fiatQuoteQuery = useBuyWithFiatQuote(
     buyWithFiatOptions !== false && tokenAmount
       ? {
@@ -98,8 +110,8 @@ export function FiatScreenContent(props: {
           isTestMode: buyWithFiatOptions?.testMode,
           purchaseData: props.payOptions.purchaseData,
           fromAddress: payer.account.address,
-          preferredProvider: preferredProvider,
           paymentLinkId: paymentLinkId,
+          preferredProvider: preferredProvider ?? supportedProviders[0],
         }
       : undefined,
   );
@@ -159,6 +171,7 @@ export function FiatScreenContent(props: {
                 </Text>
                 <Spacer y="lg" />
                 <Providers
+                  supportedProviders={supportedProviders}
                   preferredProvider={
                     preferredProvider || fiatQuoteQuery.data?.provider
                   }
@@ -188,35 +201,13 @@ export function FiatScreenContent(props: {
             currency={selectedCurrency}
             onSelectCurrency={showCurrencySelector}
           />
-          <Container
-            bg="tertiaryBg"
-            flex="row"
-            borderColor="borderColor"
-            style={{
-              paddingLeft: spacing.md,
-              justifyContent: "space-between",
-              alignItems: "center",
-              borderWidth: "1px",
-              borderStyle: "solid",
-              borderBottom: "none",
-            }}
-          >
-            <Text size="xs" color="secondaryText">
-              Provider
-            </Text>
-            <Button variant="ghost" onClick={showProviders}>
-              <Container flex="row" center="y" gap="xxs" color="secondaryText">
-                <Text size="xs">
-                  {preferredProvider
-                    ? `${preferredProvider.charAt(0).toUpperCase() + preferredProvider.slice(1).toLowerCase()}`
-                    : fiatQuoteQuery.data?.provider
-                      ? `${fiatQuoteQuery.data?.provider.charAt(0).toUpperCase() + fiatQuoteQuery.data?.provider.slice(1).toLowerCase()}`
-                      : ""}
-                </Text>
-                <ChevronDownIcon width={iconSize.sm} height={iconSize.sm} />
-              </Container>
-            </Button>
-          </Container>
+          {/** Shows preferred or quoted provider and conditional selection */}
+          <PayProviderSelection
+            onShowProviders={showProviders}
+            quotedProvider={fiatQuoteQuery.data?.provider}
+            preferredProvider={preferredProvider}
+            supportedProviders={supportedProviders}
+          />
           {/* Estimated time + View fees button */}
           <EstimatedTimeAndFees
             quoteIsLoading={fiatQuoteQuery.isLoading}

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/OnRampScreen.tsx

@@ -44,6 +44,7 @@ import { StepConnectorArrow } from "../swap/StepConnector.js";
 import { WalletRow } from "../swap/WalletRow.js";
 import { addPendingTx } from "../swap/pendingSwapTx.js";
 import type { PayerInfo } from "../types.js";
+import { getProviderLabel } from "../utils.js";
 import { StepContainer } from "./FiatSteps.js";
 
 type OnRampScreenState = {
@@ -213,7 +214,7 @@ function StepUI(props: {
         />
         <Container flex="column" gap="3xs" center="y" style={{ flex: "1" }}>
           <Text size="sm" color="primaryText">
-            {step.action.charAt(0).toUpperCase() + step.action.slice(1)}
+            {getProviderLabel(step.action)}
           </Text>
 
           <Container

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/Providers.tsx

@@ -1,14 +1,14 @@
-import {
-  type FiatProvider,
-  FiatProviders,
-} from "../../../../../../../pay/utils/commonTypes.js";
+import type { FiatProvider } from "../../../../../../../pay/utils/commonTypes.js";
 import { Container } from "../../../../components/basic.js";
 import { Button } from "../../../../components/buttons.js";
 import { Link } from "../../../../components/text.js";
+import { getProviderLabel } from "../utils.js";
 /**
  * @internal
  */
+
 export function Providers(props: {
+  supportedProviders: FiatProvider[];
   preferredProvider?: FiatProvider;
   onSelect: (provider: FiatProvider) => void;
 }) {
@@ -21,37 +21,34 @@ export function Providers(props: {
         alignItems: "flex-start",
       }}
     >
-      {FiatProviders.map((provider) => {
-        return (
-          <Container
-            key={provider}
-            flex="row"
-            expand
-            style={{
-              justifyContent: "space-between",
-            }}
+      {props.supportedProviders.map((provider) => (
+        <Container
+          key={provider}
+          flex="row"
+          expand
+          style={{
+            justifyContent: "space-between",
+          }}
+        >
+          <Button
+            fullWidth
+            onClick={() => props.onSelect(provider)}
+            variant={"link"}
           >
-            <Button
-              fullWidth
-              onClick={() => props.onSelect(provider)}
-              variant={"link"}
+            <Link
+              color={
+                props.preferredProvider === provider
+                  ? "primaryText"
+                  : "secondaryText"
+              }
+              size="sm"
+              hoverColor="primaryText"
             >
-              <Link
-                color={
-                  props.preferredProvider === provider
-                    ? "primaryText"
-                    : "secondaryText"
-                }
-                size="sm"
-                hoverColor="primaryText"
-              >
-                {provider.charAt(0).toUpperCase() +
-                  provider.slice(1).toLowerCase()}
-              </Link>
-            </Button>
-          </Container>
-        );
-      })}
+              {getProviderLabel(provider)}
+            </Link>
+          </Button>
+        </Container>
+      ))}
     </Container>
   );
 }

package/src/react/web/ui/ConnectWallet/screens/Buy/utils.ts

@@ -1,3 +1,12 @@
 export function getBuyTokenAmountFontSize(value: string) {
   return value.length > 10 ? "26px" : value.length > 6 ? "34px" : "50px";
 }
+
+/**
+ *
+ * @param str accepts any string but expects a fully upppercased string / type FiatProvider
+ * @returns Fiat provider label to be rendered used within presentation logic
+ */
+export function getProviderLabel(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+}

package/src/react/web/wallets/in-app/CountrySelector.tsx

@@ -21,19 +21,26 @@ export function getCountrySelector(countryIsoCode: SupportedSmsCountry) {
 export function CountrySelector({
   countryCode,
   setCountryCode,
+  allowedCountryCodes,
 }: {
   countryCode: string;
   setCountryCode: React.Dispatch<React.SetStateAction<string>>;
+  allowedCountryCodes?: SupportedSmsCountry[];
 }) {
   const selectRef = useRef<HTMLSelectElement>(null);
 
-  const supportedCountriesForSms = supportedSmsCountries ?? [
-    {
-      countryIsoCode: "US",
-      countryName: "United States",
-      phoneNumberCode: 1,
-    },
-  ];
+  const supportedCountriesForSms =
+    allowedCountryCodes && allowedCountryCodes.length > 0
+      ? supportedSmsCountries.filter((c) =>
+          allowedCountryCodes.includes(c.countryIsoCode as SupportedSmsCountry),
+        )
+      : (supportedSmsCountries ?? [
+          {
+            countryIsoCode: "US",
+            countryName: "United States",
+            phoneNumberCode: 1,
+          },
+        ]);
 
   return (
     <>

package/src/react/web/wallets/in-app/InputSelectionUI.test.tsx

@@ -42,4 +42,27 @@ describe("InputSelectionUI", () => {
 
     expect(screen.getByRole("combobox")).toHaveValue("US +1");
   });
+
+  it("should filter countries based on allowedSmsCountryCodes", () => {
+    const mockGetCountrySelector = vi.mocked(getCountrySelector);
+    mockGetCountrySelector.mockReturnValue("IN +91");
+
+    render(
+      <InputSelectionUI
+        onSelect={vi.fn()}
+        placeholder=""
+        name=""
+        type=""
+        submitButtonText=""
+        format="phone"
+        allowedSmsCountryCodes={["IN", "BR"]}
+      />,
+    );
+
+    const options = screen.getAllByRole("option");
+    const optionTexts = options.map((o) => o.textContent);
+    expect(optionTexts.some((t) => t?.includes("India"))).toBe(true);
+    expect(optionTexts.some((t) => t?.includes("Brazil"))).toBe(true);
+    expect(optionTexts.some((t) => t?.includes("United States"))).toBe(false);
+  });
 });

package/src/react/web/wallets/in-app/InputSelectionUI.tsx

@@ -24,11 +24,16 @@ export function InputSelectionUI(props: {
   format?: "phone";
   disabled?: boolean;
   defaultSmsCountryCode?: SupportedSmsCountry;
+  allowedSmsCountryCodes?: SupportedSmsCountry[];
 }) {
   const [countryCodeInfo, setCountryCodeInfo] = useState(
     props.defaultSmsCountryCode
       ? getCountrySelector(props.defaultSmsCountryCode)
-      : "US +1",
+      : props.allowedSmsCountryCodes &&
+          props.allowedSmsCountryCodes.length > 0 &&
+          props.allowedSmsCountryCodes[0]
+        ? getCountrySelector(props.allowedSmsCountryCodes[0])
+        : "US +1",
   );
   const [input, setInput] = useState("");
   const [error, setError] = useState<string | undefined>();
@@ -69,6 +74,7 @@ export function InputSelectionUI(props: {
           <CountrySelector
             countryCode={countryCodeInfo}
             setCountryCode={setCountryCodeInfo}
+            allowedCountryCodes={props.allowedSmsCountryCodes}
           />
         )}
         <Input

package/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -451,6 +451,9 @@ export const ConnectWalletSocialOptions = (
             defaultSmsCountryCode={
               wallet.getConfig()?.auth?.defaultSmsCountryCode
             }
+            allowedSmsCountryCodes={
+              wallet.getConfig()?.auth?.allowedSmsCountryCodes
+            }
           />
         ) : (
           <WalletTypeRowButton