thirdweb 5.111.10 → 5.112.0

package/src/bridge/Webhook.ts

@@ -118,6 +118,28 @@ export async function parse(
    * The tolerance in seconds for the timestamp verification.
    */
   tolerance = 300, // Default to 5 minutes if not specified
+
+  /**
+   * Add various validations to the parsed payload to ensure it matches the expected values. Throws error if any validation fails.
+   */
+  verify?: {
+    /**
+     * Verify that the payload's the destination token amount (in wei) is greater than `minDestinationAmount` value
+     */
+    minDestinationAmount?: bigint;
+    /**
+     * Verify that the payload's destination token address is the same as `destinationTokenAddress` value
+     */
+    destinationTokenAddress?: string;
+    /**
+     * Verify that the payload's destination chain id is the same as `destinationChainId` value
+     */
+    destinationChainId?: number;
+    /**
+     * Verify that the payload's receiver address is the same as `receiverAddress` value.
+     */
+    receiverAddress?: string;
+  },
 ): Promise<WebhookPayload> {
   // Get the signature and timestamp from headers
   const receivedSignature =
@@ -183,5 +205,90 @@ export async function parse(
     );
   }
 
+  if (verify) {
+    // verify receiver address
+    if (verify.receiverAddress) {
+      if (
+        parsedPayload.data.receiver.toLowerCase() !==
+        verify.receiverAddress.toLowerCase()
+      ) {
+        throw new Error(
+          `Verification Failed: receiverAddress mismatch, Expected: ${verify.receiverAddress}, Received: ${parsedPayload.data.receiver}`,
+        );
+      }
+    }
+
+    // verify destination token address
+    if (verify.destinationTokenAddress) {
+      // onchain transaction
+      if ("destinationToken" in parsedPayload.data) {
+        if (
+          parsedPayload.data.destinationToken.address.toLowerCase() !==
+          verify.destinationTokenAddress.toLowerCase()
+        ) {
+          throw new Error(
+            `Verification Failed: destinationTokenAddress mismatch, Expected: ${verify.destinationTokenAddress}, Received: ${parsedPayload.data.destinationToken.address}`,
+          );
+        }
+      }
+      // onramp transaction
+      else if ("onramp" in parsedPayload.data) {
+        if (
+          parsedPayload.data.token.address.toLowerCase() !==
+          verify.destinationTokenAddress.toLowerCase()
+        ) {
+          throw new Error(
+            `Verification Failed: destinationTokenAddress mismatch, Expected: ${verify.destinationTokenAddress}, Received: ${parsedPayload.data.token.address}`,
+          );
+        }
+      }
+    }
+
+    // verify destination chain id
+    if (verify.destinationChainId) {
+      // onchain tx
+      if ("destinationToken" in parsedPayload.data) {
+        if (
+          parsedPayload.data.destinationToken.chainId !==
+          verify.destinationChainId
+        ) {
+          throw new Error(
+            `Verification Failed: destinationChainId mismatch, Expected: ${verify.destinationChainId}, Received: ${parsedPayload.data.destinationToken.chainId}`,
+          );
+        }
+      }
+      // onramp tx
+      else if ("onramp" in parsedPayload.data) {
+        if (parsedPayload.data.token.chainId !== verify.destinationChainId) {
+          throw new Error(
+            `Verification Failed: destinationChainId mismatch, Expected: ${verify.destinationChainId}, Received: ${parsedPayload.data.token.chainId}`,
+          );
+        }
+      }
+    }
+
+    // verify amount
+    if (verify.minDestinationAmount) {
+      // onchain tx
+      if ("destinationAmount" in parsedPayload.data) {
+        if (
+          parsedPayload.data.destinationAmount < verify.minDestinationAmount
+        ) {
+          throw new Error(
+            `Verification Failed: minDestinationAmount, Expected minimum amount to be ${verify.minDestinationAmount}, Received: ${parsedPayload.data.destinationAmount}`,
+          );
+        }
+      }
+      // onramp tx
+      else if ("onramp" in parsedPayload.data) {
+        if (parsedPayload.data.amount < verify.minDestinationAmount) {
+          throw new Error(
+            `Verification Failed: minDestinationAmount, Expected minimum amount to be ${verify.minDestinationAmount}, Received: ${parsedPayload.data.amount}`,
+          );
+        }
+      }
+    }
+  }
+
   return parsedPayload satisfies WebhookPayload;
 }

package/src/exports/react.native.ts

@@ -17,7 +17,14 @@ export type {
   ConnectButton_detailsButtonOptions,
   ConnectButton_detailsModalOptions,
   ConnectButtonProps,
+  DirectPaymentOptions,
+  FundWalletOptions,
+  PaymentInfo,
+  PayUIOptions,
+  TransactionOptions,
 } from "../react/core/hooks/connection/ConnectButtonProps.js";
+export type { ConnectEmbedProps } from "../react/core/hooks/connection/ConnectEmbedProps.js";
+export type { OnConnectCallback } from "../react/core/hooks/connection/types.js";
 export { useContractEvents } from "../react/core/hooks/contract/useContractEvents.js";
 // contract
 export { useReadContract } from "../react/core/hooks/contract/useReadContract.js";

package/src/exports/react.ts

@@ -23,6 +23,7 @@ export type {
   TransactionOptions,
 } from "../react/core/hooks/connection/ConnectButtonProps.js";
 export type { ConnectEmbedProps } from "../react/core/hooks/connection/ConnectEmbedProps.js";
+export type { OnConnectCallback } from "../react/core/hooks/connection/types.js";
 export { useContractEvents } from "../react/core/hooks/contract/useContractEvents.js";
 // contract
 export { useReadContract } from "../react/core/hooks/contract/useReadContract.js";

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

@@ -25,6 +25,7 @@ import type {
   TokenInfo,
 } from "../../utils/defaultTokens.js";
 import type { SiweAuthOptions } from "../auth/useSiweAuth.js";
+import type { OnConnectCallback } from "./types.js";
 
 export type PaymentInfo = Prettify<
   {
@@ -937,13 +938,14 @@ export type ConnectButtonProps = {
    *
    * ```tsx
    * <ConnectButton
-   *  onConnect={(wallet) => {
-   *    console.log("connected to", wallet)
+   *  onConnect={(activeWallet, allConnectedWallets) => {
+   *    console.log("connected to", activeWallet)
+   *    console.log("all connected wallets", allConnectedWallets)
    *  }}
    * />
    * ```
    */
-  onConnect?: (wallet: Wallet) => void;
+  onConnect?: OnConnectCallback;
 
   /**
    * Called when the user disconnects the wallet by clicking on the "Disconnect Wallet" button in the `ConnectButton`'s Details Modal.

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

@@ -8,6 +8,7 @@ import type { WelcomeScreen } from "../../../web/ui/ConnectWallet/screens/types.
 import type { LocaleId } from "../../../web/ui/types.js";
 import type { Theme } from "../../design-system/index.js";
 import type { SiweAuthOptions } from "../auth/useSiweAuth.js";
+import type { OnConnectCallback } from "./types.js";
 
 export type ConnectEmbedProps = {
   /**
@@ -213,14 +214,15 @@ export type ConnectEmbedProps = {
    *
    * ```tsx
    * <ConnectEmbed
-   *  onConnect={(wallet) => {
-   *    console.log("connected to", wallet)
+   *  onConnect={(activeWallet, allConnectedWallets) => {
+   *    console.log("connected to", activeWallet)
+   *    console.log("all connected wallets", allConnectedWallets)
    *  }}
    * />
    * ```
    * ```
    */
-  onConnect?: (wallet: Wallet) => void;
+  onConnect?: OnConnectCallback;
 
   /**
    * By default, A "Powered by Thirdweb" branding is shown at the bottom of the embed.

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

@@ -0,0 +1,6 @@
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+
+export type OnConnectCallback = (
+  activeWallet: Wallet,
+  allConnectedWallets: Wallet[],
+) => void;

package/src/react/core/hooks/wallets/useAuthToken.ts

@@ -1,5 +1,8 @@
-import { useActiveAccount } from "./useActiveAccount.js";
-import { useActiveWallet } from "./useActiveWallet.js";
+import type {
+  EcosystemWallet,
+  InAppWallet,
+} from "../../../../wallets/in-app/core/wallet/types.js";
+import { useConnectedWallets } from "./useConnectedWallets.js";
 
 /**
  * A hook that returns the authentication token (JWT) for the currently active wallet.
@@ -26,16 +29,20 @@ import { useActiveWallet } from "./useActiveWallet.js";
  * @wallet
  */
 export function useAuthToken() {
-  const activeWallet = useActiveWallet();
-  const activeAccount = useActiveAccount();
-  // if the active wallet is an in-app wallet and the active account is the same as the active wallet's account, return the auth token for the in-app wallet
-  if (
-    activeWallet?.getAuthToken &&
-    activeAccount &&
-    activeAccount.address === activeWallet.getAccount()?.address
-  ) {
-    return activeWallet.getAuthToken();
+  const walletWithAuthToken = useWalletWithAuthToken();
+  // if any connected wallet has an auth token, return it
+  if (walletWithAuthToken) {
+    return walletWithAuthToken.getAuthToken();
   }
-  // all other wallets don't expose an auth token for now
+  // no wallet with an auth token found
   return null;
 }
+
+function useWalletWithAuthToken(): InAppWallet | EcosystemWallet | undefined {
+  const wallets = useConnectedWallets();
+  const wallet = wallets.find((w) => !!w.getAuthToken) as
+    | InAppWallet
+    | EcosystemWallet
+    | undefined;
+  return wallet ?? undefined;
+}

package/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx

@@ -16,6 +16,7 @@ import {
   useSiweAuth,
 } from "../../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectEmbedProps } from "../../../../core/hooks/connection/ConnectEmbedProps.js";
+import type { OnConnectCallback } from "../../../../core/hooks/connection/types.js";
 import { useActiveAccount } from "../../../../core/hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.js";
 import { useIsAutoConnecting } from "../../../../core/hooks/wallets/useIsAutoConnecting.js";
@@ -354,7 +355,7 @@ const ConnectEmbedContent = (props: {
     | true
     | undefined;
   localeId: LocaleId;
-  onConnect: ((wallet: Wallet) => void) | undefined;
+  onConnect: OnConnectCallback | undefined;
   recommendedWallets: Wallet[] | undefined;
   showAllWallets: boolean | undefined;
   hiddenWallets: WalletId[] | undefined;

package/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx

@@ -6,6 +6,7 @@ import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../../wallets/smart/types.js";
 import type { WalletId } from "../../../../../wallets/wallet-types.js";
 import type { SiweAuthOptions } from "../../../../core/hooks/auth/useSiweAuth.js";
+import type { OnConnectCallback } from "../../../../core/hooks/connection/types.js";
 import { useActiveAccount } from "../../../../core/hooks/wallets/useActiveAccount.js";
 import {
   useIsWalletModalOpen,
@@ -26,7 +27,7 @@ type ConnectModalOptions = {
   wallets: Wallet[];
   accountAbstraction: SmartWalletOptions | undefined;
   auth: SiweAuthOptions | undefined;
-  onConnect: ((wallet: Wallet) => void) | undefined;
+  onConnect: OnConnectCallback | undefined;
   size: "compact" | "wide";
   welcomeScreen: WelcomeScreen | undefined;
   meta: {

package/src/react/web/ui/ConnectWallet/Modal/ConnectModalContent.tsx

@@ -9,6 +9,7 @@ import {
   type SiweAuthOptions,
   useSiweAuth,
 } from "../../../../core/hooks/auth/useSiweAuth.js";
+import type { OnConnectCallback } from "../../../../core/hooks/connection/types.js";
 import { useActiveAccount } from "../../../../core/hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.js";
 import { useSetActiveWallet } from "../../../../core/hooks/wallets/useSetActiveWallet.js";
@@ -43,7 +44,7 @@ export const ConnectModalContent = (props: {
   wallets: Wallet[];
   accountAbstraction: SmartWalletOptions | undefined;
   auth: SiweAuthOptions | undefined;
-  onConnect: ((wallet: Wallet) => void) | undefined;
+  onConnect: OnConnectCallback | undefined;
   size: "compact" | "wide";
   meta: {
     title?: string;
@@ -93,7 +94,7 @@ export const ConnectModalContent = (props: {
       }
 
       if (props.onConnect) {
-        props.onConnect(wallet);
+        props.onConnect(wallet, connectionManager.connectedWallets.getValue());
       }
 
       onModalUnmount(() => {

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

@@ -8,6 +8,7 @@ import type { AppMetadata } from "../../../../wallets/types.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import type { SiweAuthOptions } from "../../../core/hooks/auth/useSiweAuth.js";
+import type { OnConnectCallback } from "../../../core/hooks/connection/types.js";
 import { SetRootElementContext } from "../../../core/providers/RootElementContext.js";
 import { WalletUIStatesProvider } from "../../providers/wallet-ui-states-provider.js";
 import { canFitWideModal } from "../../utils/canFitWideModal.js";
@@ -90,7 +91,7 @@ export function useConnectModal() {
 
 function Modal(
   props: UseConnectModalOptions & {
-    onConnect: (wallet: Wallet) => void;
+    onConnect: OnConnectCallback;
     onClose: () => void;
     connectLocale: ConnectLocale;
   },

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.111.10";
+export const version = "5.112.0";

package/src/wallets/connection/autoConnect.ts

@@ -17,8 +17,9 @@ import type { AutoConnectProps } from "./types.js";
  *
  * const autoConnected = await autoConnect({
  *  client,
- *  onConnect: (wallet) => {
- *    console.log("wallet", wallet);
+ *  onConnect: (activeWallet, allConnectedWallets) => {
+ *    console.log("active wallet", activeWallet);
+ *    console.log("all connected wallets", allConnectedWallets);
  *  },
  * });
  * ```

package/src/wallets/connection/autoConnectCore.test.ts

@@ -19,6 +19,23 @@ describe("useAutoConnectCore", () => {
   const mockStorage = new MockStorage();
   const manager = createConnectionManager(mockStorage);
 
+  const wallet1 = createWalletAdapter({
+    adaptedAccount: TEST_ACCOUNT_A,
+    chain: ethereum,
+    client: TEST_CLIENT,
+    onDisconnect: () => {},
+    switchChain: () => {},
+  });
+
+  const wallet2 = createWalletAdapter({
+    adaptedAccount: { ...TEST_ACCOUNT_A, address: "0x123" },
+    chain: ethereum,
+    client: TEST_CLIENT,
+    onDisconnect: () => {},
+    switchChain: () => {},
+  });
+  wallet2.id = "io.metamask" as unknown as "adapter";
+
   afterEach(() => {
     vi.restoreAllMocks();
   });
@@ -161,23 +178,6 @@ describe("useAutoConnectCore", () => {
   });
 
   it("should connect multiple wallets correctly", async () => {
-    const wallet1 = createWalletAdapter({
-      adaptedAccount: TEST_ACCOUNT_A,
-      chain: ethereum,
-      client: TEST_CLIENT,
-      onDisconnect: () => {},
-      switchChain: () => {},
-    });
-
-    const wallet2 = createWalletAdapter({
-      adaptedAccount: { ...TEST_ACCOUNT_A, address: "0x123" },
-      chain: ethereum,
-      client: TEST_CLIENT,
-      onDisconnect: () => {},
-      switchChain: () => {},
-    });
-    wallet2.id = "io.metamask" as unknown as "adapter";
-
     mockStorage.setItem("thirdweb:active-wallet-id", wallet1.id);
     mockStorage.setItem(
       "thirdweb:connected-wallet-ids",
@@ -228,7 +228,10 @@ describe("useAutoConnectCore", () => {
       storage: mockStorage,
     });
 
-    expect(mockOnConnect).toHaveBeenCalledWith(wallet);
+    expect(mockOnConnect).toHaveBeenCalledWith(
+      wallet,
+      manager.connectedWallets.getValue(),
+    );
   });
 
   it("should continue even if onConnect callback throws", async () => {
@@ -262,7 +265,10 @@ describe("useAutoConnectCore", () => {
       storage: mockStorage,
     });
 
-    expect(mockOnConnect).toHaveBeenCalledWith(wallet);
+    expect(mockOnConnect).toHaveBeenCalledWith(
+      wallet,
+      manager.connectedWallets.getValue(),
+    );
   });
 
   it("should call setLastAuthProvider if authProvider is present", async () => {
@@ -300,6 +306,7 @@ describe("useAutoConnectCore", () => {
   });
 
   it("should set connection status to disconnect if no connectedWallet is returned", async () => {
+    manager.activeWalletStore.setValue(undefined);
     const wallet = createWalletAdapter({
       adaptedAccount: TEST_ACCOUNT_A,
       chain: ethereum,

package/src/wallets/connection/autoConnectCore.ts

@@ -152,22 +152,12 @@ const _autoConnectCore = async ({
 
     try {
       // connected wallet could be activeWallet or smart wallet
-      const connectedWallet = await (connectOverride
+      await (connectOverride
         ? connectOverride(activeWallet)
         : manager.connect(activeWallet, {
             accountAbstraction: props.accountAbstraction,
             client: props.client,
           }));
-      if (connectedWallet) {
-        autoConnected = true;
-        try {
-          onConnect?.(connectedWallet);
-        } catch {
-          // ignore
-        }
-      } else {
-        manager.activeWalletConnectionStatusStore.setValue("disconnected");
-      }
     } catch (e) {
       if (e instanceof Error) {
         console.warn("Error auto connecting wallet:", e.message);
@@ -216,6 +206,20 @@ const _autoConnectCore = async ({
     });
   }
   manager.isAutoConnecting.setValue(false);
+
+  const connectedActiveWallet = manager.activeWalletStore.getValue();
+  const allConnectedWallets = manager.connectedWallets.getValue();
+  if (connectedActiveWallet) {
+    autoConnected = true;
+    try {
+      onConnect?.(connectedActiveWallet, allConnectedWallets);
+    } catch (e) {
+      console.error("Error calling onConnect callback:", e);
+    }
+  } else {
+    manager.activeWalletConnectionStatusStore.setValue("disconnected");
+  }
+
   return autoConnected; // useQuery needs a return value
 };
 

package/src/wallets/connection/types.ts

@@ -101,13 +101,14 @@ export type AutoConnectProps = {
    *
    * ```tsx
    * <AutoConnect
-   *  onConnect={(wallet) => {
-   *    console.log("auto connected to", wallet)
+   *  onConnect={(activeWallet, otherWallets) => {
+   *    console.log("auto connected to", activeWallet)
+   *    console.log("other wallets that were also connected", otherWallets)
    *  }}
    * />
    * ```
    */
-  onConnect?: (wallet: Wallet) => void;
+  onConnect?: (activeWallet: Wallet, otherWallets: Wallet[]) => void;
 
   /**
    * Optional chain to autoconnect to

package/src/wallets/manager/connection-manager.test.ts

@@ -49,7 +49,7 @@ describe.runIf(process.env.TW_SECRET_KEY)("Connection Manager", () => {
 
     await manager.connect(wallet, { client, onConnect });
 
-    expect(onConnect).toHaveBeenCalledWith(wallet);
+    expect(onConnect).toHaveBeenCalledWith(wallet, [wallet]);
     expect(storage.setItem).toHaveBeenCalled();
   });
 

package/src/wallets/manager/index.ts

@@ -1,6 +1,7 @@
 import type { Chain } from "../../chains/types.js";
 import { cacheChains } from "../../chains/utils.js";
 import type { ThirdwebClient } from "../../client/client.js";
+import type { OnConnectCallback } from "../../react/core/hooks/connection/types.js";
 import { computedStore } from "../../reactive/computedStore.js";
 import { effect } from "../../reactive/effect.js";
 import { createStore } from "../../reactive/store.js";
@@ -29,7 +30,7 @@ export type ConnectManagerOptions = {
   client: ThirdwebClient;
   accountAbstraction?: SmartWalletOptions;
   setWalletAsActive?: boolean;
-  onConnect?: (wallet: Wallet) => void;
+  onConnect?: OnConnectCallback;
 };
 
 /**
@@ -158,7 +159,7 @@ export function createConnectionManager(storage: AsyncStorage) {
     wallet.subscribe("accountChanged", async () => {
       // We reimplement connect here to prevent memory leaks
       const newWallet = await handleConnection(wallet, options);
-      options?.onConnect?.(newWallet);
+      options?.onConnect?.(newWallet, connectedWallets.getValue());
     });
 
     return activeWallet;
@@ -167,7 +168,7 @@ export function createConnectionManager(storage: AsyncStorage) {
   const connect = async (wallet: Wallet, options?: ConnectManagerOptions) => {
     // connectedWallet can be either wallet or smartWallet
     const connectedWallet = await handleConnection(wallet, options);
-    options?.onConnect?.(connectedWallet);
+    options?.onConnect?.(connectedWallet, connectedWallets.getValue());
     return connectedWallet;
   };