+ );
+ }
+ ```
+
+ ### 4. Request an account and send a transaction
+
+ Openfort provides a `WalletClient` signer, which does not support EIP-7702 authorization signing. Use [`requestAccount`](/wallets/transactions/using-eip-7702#how-to-use-non-7702-mode) to create a smart wallet, then pass the account address to `sendCalls`. The returned address is stable for a given signer and can be stored — you don't need to call `requestAccount` before every transaction:
+
+ ```tsx
+ import { useMemo, useCallback } from "react";
+ import { zeroAddress } from "viem";
+ import { createSmartWalletClient, alchemyWalletTransport } from "@alchemy/wallet-apis";
+ import { arbitrumSepolia } from "viem/chains";
+ import type { WalletClient } from "viem";
+
+ function SendTransaction({ signer }: { signer: WalletClient }) {
+ const client = useMemo(
+ () =>
+ createSmartWalletClient({
+ signer,
+ transport: alchemyWalletTransport({
+ apiKey: "YOUR_ALCHEMY_API_KEY",
+ }),
+ chain: arbitrumSepolia,
+ paymaster: {
+ policyId: "YOUR_GAS_MANAGER_POLICY_ID",
+ },
+ }),
+ [signer],
+ );
+
+ const handleSend = useCallback(async () => {
+ // Request a smart wallet (required for WalletClient signers)
+ const { address } = await client.requestAccount({
+ creationHint: { accountType: "sma-b" },
+ });
+
+ // Send the transaction using the smart wallet address
+ const { id } = await client.sendCalls({
+ account: address,
+ calls: [{ to: zeroAddress, value: BigInt(0), data: "0x" }],
+ });
+
+ // Wait for the transaction to be confirmed
+ const result = await client.waitForCallsStatus({ id });
+ console.log(`Transaction hash: ${result.receipts?.[0]?.transactionHash}`);
+ }, [client]);
+
+ return ;
+ }
+ ```
+
+ ### Notes
+
+ * See the [Sponsor gas](/wallets/transactions/sponsor-gas) guide for more on gas sponsorship configuration.
+ * Learn more about Openfort's React SDK in the [Openfort documentation](https://www.openfort.io/docs/products/embedded-wallet/react/quickstart).
+
+
+
+ ## Setup
+
+ Use the `@openfort/openfort-js` package with the Wallet Client SDK in a browser environment.
+
+ ### Installation
+
+
+ ```shell npm
+ npm install @openfort/openfort-js @alchemy/wallet-apis viem
+ ```
+
+ ```shell bun
+ bun add @openfort/openfort-js @alchemy/wallet-apis viem
+ ```
+
+ ```shell yarn
+ yarn add @openfort/openfort-js @alchemy/wallet-apis viem
+ ```
+
+ ```shell pnpm
+ pnpm add @openfort/openfort-js @alchemy/wallet-apis viem
+ ```
+
+
+ ### Prerequisites: Get your keys
+
+ * Alchemy API key:
+ * Go to the [Alchemy Dashboard](https://dashboard.alchemy.com/)
+ * Create or select an app and copy the API key
+ * Gas sponsorship Policy ID (Gas Manager):
+ * Create a gas sponsorship policy in the [dashboard](https://dashboard.alchemy.com/services/gas-manager/configuration) and copy its Policy ID
+ * Openfort Publishable Key:
+ * Go to the [Openfort Dashboard](https://dashboard.openfort.xyz/)
+ * Create or select a project and copy the Publishable Key
+ * Openfort Shield Publishable Key:
+ * In the [Openfort Dashboard](https://dashboard.openfort.xyz/), navigate to Shield settings and copy the Shield Publishable Key
+
+
+ The gas sponsorship policy must be linked to the application behind your Alchemy API key for sponsorship to work.
+
+
+ ### Send a transaction
+
+ ```ts
+ import Openfort from "@openfort/openfort-js";
+ import { createWalletClient, custom } from "viem";
+ import { createSmartWalletClient, alchemyWalletTransport } from "@alchemy/wallet-apis";
+ import { arbitrumSepolia } from "viem/chains";
+
+ // Initialize Openfort
+ const openfort = new Openfort({
+ baseConfiguration: {
+ publishableKey: process.env.OPENFORT_PUBLISHABLE_KEY!,
+ },
+ shieldConfiguration: {
+ shieldPublishableKey: process.env.OPENFORT_SHIELD_PUBLISHABLE_KEY!,
+ },
+ });
+
+ // Authenticate the user — verification is required before using the wallet
+ await openfort.auth.requestEmailOTP({ email: "user@example.com" });
+ await openfort.auth.verifyEmailOTP({ email: "user@example.com", code: "123456" });
+
+ // Get the EIP-1193 provider from Openfort
+ const provider = await openfort.embeddedWallet.getEthereumProvider();
+ const [address] = await provider.request({ method: "eth_requestAccounts" });
+
+ // Create a viem WalletClient from the Openfort provider
+ const signer = createWalletClient({
+ account: address,
+ chain: arbitrumSepolia,
+ transport: custom(provider),
+ });
+
+ // Create the Smart Wallet client
+ const client = createSmartWalletClient({
+ signer,
+ transport: alchemyWalletTransport({ apiKey: process.env.ALCHEMY_API_KEY! }),
+ chain: arbitrumSepolia,
+ paymaster: { policyId: process.env.ALCHEMY_POLICY_ID! },
+ });
+
+ // Request a smart wallet (required for WalletClient signers)
+ // The returned address is stable for a given signer and can be stored for later use
+ const { address: accountAddress } = await client.requestAccount({
+ creationHint: { accountType: "sma-b" },
+ });
+
+ // Send the transaction using the smart wallet address
+ const { id } = await client.sendCalls({
+ account: accountAddress,
+ calls: [
+ {
+ to: "0x0000000000000000000000000000000000000000",
+ value: BigInt(0),
+ data: "0x",
+ },
+ ],
+ });
+
+ // Wait for the transaction to be confirmed
+ const result = await client.waitForCallsStatus({ id });
+ console.log(`Transaction hash: ${result.receipts?.[0]?.transactionHash}`);
+ ```
+
+ ### Notes
+
+ * See the [Sponsor gas](/wallets/transactions/sponsor-gas) guide for more on gas sponsorship configuration.
+ * This example uses Openfort's `@openfort/openfort-js` client-side package. `@alchemy/wallet-apis` can be used in any JavaScript environment.
+ * Learn more about Openfort's embedded wallets in the [Openfort documentation](https://www.openfort.io/docs).
+
+