diff --git a/fern/wallets/pages/authentication/login-methods/bring-your-own-auth.mdx b/fern/wallets/pages/authentication/login-methods/bring-your-own-auth.mdx index 6af5ade7f..2ac164c9e 100644 --- a/fern/wallets/pages/authentication/login-methods/bring-your-own-auth.mdx +++ b/fern/wallets/pages/authentication/login-methods/bring-your-own-auth.mdx @@ -90,7 +90,7 @@ The `aud` claim must be set to your Alchemy-provided audience ID. You can obtain ## Implementation Guide - + ## Using React Hooks ### Step 1: Install Dependencies @@ -170,7 +170,7 @@ The `aud` claim must be set to your Alchemy-provided audience ID. You can obtain ``` - + ## Authenticating Users with a JWT token **Endpoint:** `POST https://api.g.alchemy.com/signer/v1/auth-jwt` diff --git a/fern/wallets/pages/authentication/login-methods/email-magic-link.mdx b/fern/wallets/pages/authentication/login-methods/email-magic-link.mdx index 2185ac56c..fa70d0876 100644 --- a/fern/wallets/pages/authentication/login-methods/email-magic-link.mdx +++ b/fern/wallets/pages/authentication/login-methods/email-magic-link.mdx @@ -17,7 +17,7 @@ Email magic link authentication is a two-step process: - + ## Implementation Options You can implement Email Magic Link authentication in two ways: @@ -308,7 +308,7 @@ Email magic link authentication is a two-step process: ``` - + ## Other Javascript Frameworks Email magic link authentication allows you to log in and sign up users using an email address. Your users will receive a link in their inbox which will redirect them to your site (configured in the dashboard) to complete login. diff --git a/fern/wallets/pages/authentication/login-methods/email-otp.mdx b/fern/wallets/pages/authentication/login-methods/email-otp.mdx index 0252a07a9..3240a5abf 100644 --- a/fern/wallets/pages/authentication/login-methods/email-otp.mdx +++ b/fern/wallets/pages/authentication/login-methods/email-otp.mdx @@ -10,7 +10,7 @@ Email OTP (One-Time Password) authentication is a two-step process: 2. The user enters the 6-digit code they receive in their inbox to complete authentication - + ## Overview You can implement Email OTP authentication in two ways: @@ -484,7 +484,7 @@ Email OTP (One-Time Password) authentication is a two-step process: - + ## Other Javascript Frameworks Email OTP authentication allows you to log in and sign up users using an email address. Your users will receive six-digit code in their inbox which they can enter in your site to complete login. diff --git a/fern/wallets/pages/authentication/login-methods/passkey-signup.mdx b/fern/wallets/pages/authentication/login-methods/passkey-signup.mdx index 6c88eac3e..b24ac0a9b 100644 --- a/fern/wallets/pages/authentication/login-methods/passkey-signup.mdx +++ b/fern/wallets/pages/authentication/login-methods/passkey-signup.mdx @@ -9,7 +9,7 @@ Passkeys provide a secure, passwordless authentication method that can be used t - + ## Implementation Options You can implement Passkey Signup authentication in two ways: @@ -437,7 +437,7 @@ Passkeys provide a secure, passwordless authentication method that can be used t ``` - + ## Other Javascript Frameworks It is possible to create wallets for users using just a passkey. This is useful for creating wallets for users if you don't want to go through the email OTP or magic link flow. diff --git a/fern/wallets/pages/authentication/login-methods/sms-login.mdx b/fern/wallets/pages/authentication/login-methods/sms-login.mdx index ef8859b4a..f0c58a1b8 100644 --- a/fern/wallets/pages/authentication/login-methods/sms-login.mdx +++ b/fern/wallets/pages/authentication/login-methods/sms-login.mdx @@ -33,7 +33,7 @@ Pricing varies by country and requires specific area codes to be enabled for you ## Implementation - + SMS auth is not yet supported with pre-built UI components. Please follow [this guide](/wallets/pages/react/react-hooks) to set up custom UI and configure authentication with hooks. @@ -220,7 +220,7 @@ Pricing varies by country and requires specific area codes to be enabled for you ``` - + Ensure you've set up your project by following [this](/wallets/pages/core/quickstart) guide first. ```ts diff --git a/fern/wallets/pages/authentication/login-methods/social-login.mdx b/fern/wallets/pages/authentication/login-methods/social-login.mdx index d7b81f9d3..0b7d3850a 100644 --- a/fern/wallets/pages/authentication/login-methods/social-login.mdx +++ b/fern/wallets/pages/authentication/login-methods/social-login.mdx @@ -10,7 +10,7 @@ Social login authentication allows users to authenticate using OAuth providers l 2. **Popup flow**: Opens the provider's login page in a popup window without leaving your application - + ## Prerequisites Before implementing social login in your application, you need to configure your Smart Wallets dashboard and application: @@ -199,7 +199,7 @@ Social login authentication allows users to authenticate using OAuth providers l - + ## Other Javascript Frameworks Social login authentication allows you to log in and sign up users using an OAuth provider, such as Google Sign-In or Facebook Login. You can also configure custom providers through Auth0. diff --git a/fern/wallets/pages/concepts/smart-account-client.mdx b/fern/wallets/pages/concepts/smart-account-client.mdx index c935abded..c3471a64c 100644 --- a/fern/wallets/pages/concepts/smart-account-client.mdx +++ b/fern/wallets/pages/concepts/smart-account-client.mdx @@ -19,28 +19,7 @@ The [`SmartWalletClient`](https://github.com/alchemyplatform/aa-sdk/blob/b8dad09 ## Implementation - - The [`useSmartAccountClient`](/docs/wallets/reference/account-kit/react/hooks/useSmartAccountClient) hook provides access to your smart account client using the API key and policy ID settings from \[`createConfig`]/docs/wallets/react/quickstart/ui-customization). - - React hooks only support Alchemy Signer, so ensure you [set up your environment](/docs/wallets/react/quickstart/existing-project) and app integration before using the client. - - - Don't call methods like `client.sendUserOperation()` directly on the client. Instead, use React hooks like [`useSendCalls`](/docs/wallets/reference/account-kit/react/hooks/useSendCalls) which provide better state management and error handling. - - - ```tsx twoslash - import React from "react"; - import { useSmartAccountClient, useSendCalls } from "@account-kit/react"; - - const { client } = useSmartAccountClient({}); - - const { sendCalls, isSendingCalls, sendCallsResult } = useSendCalls({ - client, - }); - ``` - - - + Use the [`createSmartWalletClient`](/docs/wallets/reference/account-kit/wallet-client/functions/createSmartWalletClient) function to create a smart wallet client. 1. Replace the placeholders @@ -77,7 +56,7 @@ The [`SmartWalletClient`](https://github.com/alchemyplatform/aa-sdk/blob/b8dad09 ``` - + When using the wallet [API](/docs/wallets/smart-wallet-quickstart/api), you don't need to define a client - send requests directly to the API endpoints. @@ -94,24 +73,6 @@ The [`SmartWalletClient`](https://github.com/alchemyplatform/aa-sdk/blob/b8dad09 [here](/docs/wallets/smart-contracts/other-accounts/modular-account/upgrading-to-modular-account). - **React and React Native** - - Override the default account type using the `type` parameter: - - * `type` (string) - Defines the smart account type. Options: - * `"ModularAccountV2"` (recommended and default) - * `"LightAccount"` - * `"MultiOwnerLightAccount"` - - ```tsx twoslash - import React from "react"; - import { useSmartAccountClient } from "@account-kit/react"; - - const { client } = useSmartAccountClient({ - type: "LightAccount", - }); - ``` - **Javascript** Specify the account type when calling `requestAccount` using the `creationHint` parameter. See all parameter [options](/docs/wallets/api-reference/smart-wallets/wallet-api-endpoints/wallet-api-endpoints/wallet-request-account#request.body.requestAccountRequest.creationHint). @@ -141,17 +102,6 @@ The [`SmartWalletClient`](https://github.com/alchemyplatform/aa-sdk/blob/b8dad09 By default, account addresses are deterministically generated from the signer address. To connect to an existing account that doesn't match the deterministic address of your signer, specify the account address when creating the client. - **React & React Native** - - ```tsx twoslash - import React from "react"; - import { useSmartAccountClient } from "@account-kit/react"; - - const { client } = useSmartAccountClient({ - accountAddress: "0xYOUR_SMART_ACCOUNT_ADDR", - }); - ``` - **Javascript** Pass the address to the `createSmartWalletClient` directly rather than calling `requestAccount`. diff --git a/fern/wallets/pages/guide-template.mdx b/fern/wallets/pages/guide-template.mdx index febb12936..7887f9073 100644 --- a/fern/wallets/pages/guide-template.mdx +++ b/fern/wallets/pages/guide-template.mdx @@ -36,19 +36,13 @@ Example: ## Implementation - - Required SDK version: ^v4.59.1 - - - - - + Required SDK version: ^v4.59.1 - + See the [`wallet_prepareCalls` API reference](/docs/wallets/api/smart-wallets/wallet-api-endpoints/wallet-api-endpoints/wallet-prepare-calls) for full descriptions of the parameters used in the following examples. diff --git a/fern/wallets/pages/react/mfa/setup-mfa.mdx b/fern/wallets/pages/react/mfa/setup-mfa.mdx index 0e3869c76..4d7a12301 100644 --- a/fern/wallets/pages/react/mfa/setup-mfa.mdx +++ b/fern/wallets/pages/react/mfa/setup-mfa.mdx @@ -5,7 +5,7 @@ slug: wallets/react/mfa/setup-mfa --- - + With Smart Wallets, multi-factor authentication (MFA) uses authenticator apps—like Google Authenticator, Authy, or Microsoft Authenticator—to generate a Time-based One-Time Password (TOTP). By requiring both a user's primary login (e.g., email OTP, magic link, or social login) and a TOTP from their authenticator app, your application gains an extra layer of security. diff --git a/fern/wallets/pages/react/pay-gas-with-any-token.mdx b/fern/wallets/pages/react/pay-gas-with-any-token.mdx index b3e8f7910..7d92308f0 100644 --- a/fern/wallets/pages/react/pay-gas-with-any-token.mdx +++ b/fern/wallets/pages/react/pay-gas-with-any-token.mdx @@ -17,170 +17,7 @@ Gas fees paid in the native gas token can feel foreign to users that primarily h - - ## 2. Add the policy to your global config - - ```ts twoslash config.ts - import { createConfig } from "@account-kit/react"; - import { sepolia } from "@account-kit/infra"; - - export const config = createConfig({ - apiKey: "ALCHEMY_API_KEY", - chain: sepolia, - policyId: "GAS_MANAGER_POLICY_ID", // your policy - policyToken: { - address: "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238", // USDC_ADDRESS on sepolia (can be any ERC-20 token address enabled in your policy) - maxTokenAmount: 10_000_000n, // Safety limit. If using USDC, this is 10 USDC (10 * 10^6). - }, - }); - ``` - - All `UserOperations` sent with the hooks will now be paid with the token configured above. - - - Be sure to use version **4.54.1** or later of the Account Kit SDK. - - - ## 3. Send a sponsored UserOperation - -```tsx twoslash -import React from "react"; -import { - useSmartAccountClient, - useSendUserOperation, -} from "@account-kit/react"; -import { sepolia, getAlchemyPaymasterAddress } from "@account-kit/infra"; -import { encodeFunctionData, parseAbi } from "viem"; - -export default function PayWithUsdcButton() { - const { client, isLoadingClient } = useSmartAccountClient({}); - const erc20Abi = parseAbi([ - "function approve(address spender, uint256 amount) public returns (bool)", - ]); - const paymasterAddress = getAlchemyPaymasterAddress(sepolia, "0.7.0"); - - return ( - - ); -} -``` - - - When performing ERC-20 sponsorship, be sure to use the `sendUserOperation` - method on a client. Support for the `useSendUserOperation` hook is coming - soon. - - -### 4 (Optional) Override on a single client - -If you only want specific operations to use the policy, you can specify it on a dedicated client instead of setting it globally. - - ```tsx twoslash - const { client } = useSmartAccountClient({ - policyId: "GAS_MANAGER_POLICY_ID", - policyToken: { - address: "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238", // USDC_ADDRESS on sepolia (can be any ERC-20 token address enabled in your policy) - maxTokenAmount: 10_000_000n, // Safety limit. If using USDC, this is 10 USDC (10 * 10^6). - }, - }); - ``` - -Then use `client.sendUserOperation()` to send UserOperations. - - - - ## 2. Set the Policy ID globally - - When creating your Account Kit config, you can optionally pass in a Gas Policy ID. This will enable all UOs sent by the `useSendUserOperation` hook to be sponsored by the policy you created. - - Copy it and then replace the `GAS_MANAGER_POLICY_ID` in the snippet below. - - - Remember to replace `ALCHEMY_API_KEY` with your Alchemy API key. If you don't - have one yet, you can create an API key on the [Alchemy - dashboard](https://dashboard.alchemy.com/signup/?a=aa-docs). - - - ```ts twoslash config.ts - // @noErrors - import { createConfig } from "@account-kit/react-native"; - import { sepolia } from "@account-kit/infra"; - - export const config = createConfig({ - apiKey: "ALCHEMY_API_KEY", - chain: sepolia, - policyId: "GAS_MANAGER_POLICY_ID", // [!code ++] - }); - ``` - - Now you can follow the guide for [Sending user operations](/wallets/react-native/using-smart-accounts/send-user-operations) to send sponsored UOs from your smart account! - - ## 3. Set the gas policy ID per UserOperation - - If you want more control over which UOs are sponsored, then you can set the policy ID on a specific instance of the `Smart Account Client` returned by the `useSmartAccountClient()` hook. - - ```tsx twoslash - import React from "react"; - import { View, Pressable, Text } from "react-native"; - import { - useSmartAccountClient, - useSendUserOperation, - } from "@account-kit/react-native"; - - export default function MyComponent() { - const { client } = useSmartAccountClient({ - policyId: "GAS_MANAGER_POLICY_ID", - }); - const { sendUserOperation } = useSendUserOperation({ client }); - - return ( - - - sendUserOperation({ - uo: { - target: "0xTARGET_ADDRESS", - data: "0x", - value: 0n, - }, - }) - } - > - - Send Sponsored User Operation - - - - ); - } - ``` - - - + ## 2. Create a smart Account Client Now you can create a Smart Account Client which is configured to sponsor gas. diff --git a/fern/wallets/pages/recipes/multi-chain-setup.mdx b/fern/wallets/pages/recipes/multi-chain-setup.mdx index ff6ed73af..2fae32ce2 100644 --- a/fern/wallets/pages/recipes/multi-chain-setup.mdx +++ b/fern/wallets/pages/recipes/multi-chain-setup.mdx @@ -11,7 +11,7 @@ Smart Wallets supports multi-chain apps, allowing you to build applications that In order to support multiple chains in your app, the first thing you need to do is update your `createConfig` call to include the chains you want to support. - + ```ts twoslash config.ts // @noErrors diff --git a/fern/wallets/pages/signer/authentication/server-wallets.mdx b/fern/wallets/pages/signer/authentication/server-wallets.mdx index 7cee52232..30b9673f2 100644 --- a/fern/wallets/pages/signer/authentication/server-wallets.mdx +++ b/fern/wallets/pages/signer/authentication/server-wallets.mdx @@ -13,7 +13,7 @@ slug: wallets/authentication/login-methods/server-wallets Server wallets can be programmatically controlled using access keys. This enables backend applications to sign transactions and messages on behalf of users without requiring interactive authentication. - + ## Prerequisites Get your **API key** by creating a new app in your [Alchemy Dashboard](https://dashboard.alchemy.com/apps). Make sure your desired network is enabled for your app under the Networks tab. diff --git a/fern/wallets/pages/third-party/signers/custom-integration.mdx b/fern/wallets/pages/third-party/signers/custom-integration.mdx index 0e658fb7e..8cb303dc9 100644 --- a/fern/wallets/pages/third-party/signers/custom-integration.mdx +++ b/fern/wallets/pages/third-party/signers/custom-integration.mdx @@ -15,7 +15,7 @@ This will allow you to use EIP-7702 to get features like gas sponsorship, batchi To bring your own signer, you create a `SmartAccountSigner` that implements `signAuthorization`. See the details for the interface requirements [here](/wallets/resources/types#smartaccountsigner). - + For example, you can upgrade an existing embedded EOA by extending a viem `WalletClient` to use your provider's EIP-7702 authorization signing. The bulk of the logic happens in a function that returns a client. Your embedded wallet is wrapped in a `WalletClientSigner` that supports `signAuthorization`, then passed to `createSmartWalletClient` to construct a client for sending transactions. diff --git a/fern/wallets/pages/third-party/signers/privy.mdx b/fern/wallets/pages/third-party/signers/privy.mdx index 35c9b06e4..beeb8fce6 100644 --- a/fern/wallets/pages/third-party/signers/privy.mdx +++ b/fern/wallets/pages/third-party/signers/privy.mdx @@ -19,7 +19,7 @@ Upgrade existing Privy wallets to Smart Wallets to enable gasless transactions ( - + ## Setup Follow these steps to integrate Privy with Smart Wallets. @@ -419,7 +419,7 @@ Upgrade existing Privy wallets to Smart Wallets to enable gasless transactions ( * The hooks API mirrors the React web version for easy cross-platform development. - + ## Setup Use the `@privy-io/node` package with Smart Wallets infrastructure in a server environment. diff --git a/fern/wallets/pages/third-party/signers/turnkey.mdx b/fern/wallets/pages/third-party/signers/turnkey.mdx index 6130d3710..3472a9123 100644 --- a/fern/wallets/pages/third-party/signers/turnkey.mdx +++ b/fern/wallets/pages/third-party/signers/turnkey.mdx @@ -18,7 +18,7 @@ Upgrade existing Turnkey wallets to Smart Wallets to enable gasless transactions - + ## Setup Use Turnkey's `@turnkey/sdk-server` package with Smart Wallets infrastructure in a server environment. diff --git a/fern/wallets/pages/transactions/cross-chain-swap-tokens/index.mdx b/fern/wallets/pages/transactions/cross-chain-swap-tokens/index.mdx index dfe701964..04318ecd8 100644 --- a/fern/wallets/pages/transactions/cross-chain-swap-tokens/index.mdx +++ b/fern/wallets/pages/transactions/cross-chain-swap-tokens/index.mdx @@ -52,21 +52,12 @@ Before you begin, ensure you have: * **Important**: You'll need to send these tokens to your smart wallet address to be able to swap! * A signer to own the account and sign messages - - Note that Cross-chain Swaps are currently supported via direct APIs and the - SDK. React support coming soon! - - - - - - - + - + diff --git a/fern/wallets/pages/transactions/cross-chain-swap-tokens/react.mdx b/fern/wallets/pages/transactions/cross-chain-swap-tokens/react.mdx deleted file mode 100644 index f06a8080d..000000000 --- a/fern/wallets/pages/transactions/cross-chain-swap-tokens/react.mdx +++ /dev/null @@ -1,172 +0,0 @@ -Required SDK version: ^v4.70.0 - - - **Important**: Cross-chain swaps do not support `postCalls`. You cannot batch - additional actions after a cross-chain swap completes. - - -Use the `usePrepareSwap` hook with the `toChainId` parameter to request cross-chain swap quotes and the `useSignAndSendPreparedCalls` hook to execute token swaps across different chains. - -**Prerequisites** - -* [Smart Wallets installed and configured in your project](/wallets/react/quickstart) -* An [authenticated user](/wallets/authentication/overview) -* Tokens in your smart account to swap - - - ```tsx title="crossChainSwap.tsx" - import { - useSmartAccountClient, - usePrepareSwap, - useSignAndSendPreparedCalls, - useWaitForCallsStatus, - useUser, - } from "@account-kit/react"; - - // Chain IDs - const CHAIN_IDS = { - ARBITRUM: "0xa4b1", - BASE: "0x2105", - } as const; - - // Token addresses - const TOKENS = { - NATIVE: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEee", // ETH - BASE_USDC: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913", - } as const; - - export default function CrossChainSwap() { - const user = useUser(); - const { client } = useSmartAccountClient({ - accountParams: { mode: "7702" }, - }); - - const { prepareSwapAsync, isPreparingSwap } = usePrepareSwap({ - client, - }); - - const { - signAndSendPreparedCallsAsync, - isSigningAndSendingPreparedCalls, - signAndSendPreparedCallsResult, - } = useSignAndSendPreparedCalls({ client }); - - const { - data: statusResult, - isLoading: isWaitingForConfirmation, - error, - } = useWaitForCallsStatus({ - client, - id: signAndSendPreparedCallsResult?.preparedCallIds[0], - }); - - const handleCrossChainSwap = async () => { - if (!client?.account.address) { - throw new Error("No account connected"); - } - - try { - // Step 1: Request cross-chain swap quote - const result = await prepareSwapAsync({ - from: client.account.address, - fromToken: TOKENS.NATIVE, - toChainId: CHAIN_IDS.BASE, // Destination chain - toToken: TOKENS.BASE_USDC, - fromAmount: "0x5af3107a4000", // 0.0001 ETH - }); - - const { quote, ...calls } = result; - console.log("Cross-chain swap quote:", quote); - - // Ensure we have prepared calls - if (calls.rawCalls) { - throw new Error("Expected prepared calls"); - } - - // Step 2: Sign and send the prepared calls - const callIds = await signAndSendPreparedCallsAsync(calls); - - console.log("Cross-chain swap initiated"); - console.log("Call ID:", callIds?.preparedCallIds[0]); - } catch (error) { - console.error("Cross-chain swap failed:", error); - } - }; - - if (!user) { - return
Please log in to use swap functionality
; - } - - return ( -
- - - {signAndSendPreparedCallsResult && ( -

- {isWaitingForConfirmation - ? "Waiting for cross-chain confirmation..." - : error - ? `Error: ${error}` - : statusResult?.statusCode === 200 - ? "Cross-chain swap confirmed!" - : `Status: ${statusResult?.statusCode}`} -

- )} -
- ); - } - ``` - - -## How it works - -1. **Request quote**: `usePrepareSwap` requests a cross-chain swap quote with the `toChainId` parameter -2. **Destructure result**: Extract `quote` for display and `calls` for signing -3. **Sign and send**: `useSignAndSendPreparedCalls` signs and submits the transaction (callId automatically preserved) -4. **Track status**: `useWaitForCallsStatus` monitors the transaction with cross-chain status codes - -Cross-chain swaps take longer than single-chain swaps due to cross-chain messaging and confirmation requirements. - -## Cross-chain status codes - -Cross-chain swaps have additional status codes to reflect the cross-chain nature: - -| Code | Status | -| ------- | --------------------------- | -| 100 | Pending | -| **120** | **Cross-Chain In Progress** | -| 200 | Confirmed | -| 400 | Offchain Failure | -| **410** | **Cross-chain Refund** | -| 500 | Onchain Failure | -| 600 | Partial Onchain Failure | - -## Swap options - -You can specify either an exact input amount or a minimum output amount: - -```tsx -// Mode 1: Swap exact input amount -await prepareSwapAsync({ - from: address, - toChainId: "0x2105", // Base - fromToken: "0x...", - toToken: "0x...", - fromAmount: "0x2710", // Swap exactly 0.01 USDC -}); - -// Mode 2: Get minimum output amount -await prepareSwapAsync({ - from: address, - toChainId: "0x2105", // Base - fromToken: "0x...", - toToken: "0x...", - minimumToAmount: "0x5AF3107A4000", // Get at least 0.0001 ETH -}); -``` diff --git a/fern/wallets/pages/transactions/pay-gas-with-any-token/index.mdx b/fern/wallets/pages/transactions/pay-gas-with-any-token/index.mdx index 476d84c0e..17178a75b 100644 --- a/fern/wallets/pages/transactions/pay-gas-with-any-token/index.mdx +++ b/fern/wallets/pages/transactions/pay-gas-with-any-token/index.mdx @@ -22,15 +22,11 @@ Post-operation mode is recommended. This mode requires users to hold enough of t ## Implementation - - - - - + - + @@ -41,17 +37,12 @@ Post-operation mode is recommended. This mode requires users to hold enough of t Pay gas with any token also works with the prepare calls methods in the various frameworks. Usage of the capability will be the same as when using send calls. It is recommended to use prepare calls if you want to inspect the prepared call prior to prompting the user for signature. - - See the [`usePrepareCalls` react - hook](/wallets/reference/account-kit/react/hooks/usePrepareCalls) - - - + See the [`prepareCalls` SDK reference](/wallets/reference/account-kit/wallet-client/functions/prepareCalls) - + See the [`wallet_prepareCalls` API reference](/wallets/api/smart-wallets/wallet-api-endpoints/wallet-api-endpoints/wallet-prepare-calls) diff --git a/fern/wallets/pages/transactions/pay-gas-with-any-token/react.mdx b/fern/wallets/pages/transactions/pay-gas-with-any-token/react.mdx deleted file mode 100644 index 9656f3a22..000000000 --- a/fern/wallets/pages/transactions/pay-gas-with-any-token/react.mdx +++ /dev/null @@ -1,71 +0,0 @@ -Required SDK version: ^v4.61.0 - -Use the `useSendCalls` hook and the `paymasterService` capability parameter to send calls with -an ERC20 token paymaster. - -**Prerequisites** - -* [Smart Wallets installed and configured in your project](/wallets/pages/react/setup.mdx). - -See the [`useSendCalls` SDK reference](/wallets/reference/account-kit/react/hooks/useSendCalls) for parameter descriptions. - - - ```tsx title="sendCalls.tsx" focus={5-7,14-27} - import { useSendCalls, useSmartAccountClient } from "@account-kit/react"; - import { config } from "./config"; - - export default function SendCalls() { - const { client } = useSmartAccountClient({}); - const { sendCallsAsync } = useSendCalls({ client }); - - const handleSend = async () => { - if (!client) { - throw new Error("Smart account client not connected"); - } - - try { - const { ids } = await sendCallsAsync({ - capabilities: { - paymasterService: { - policyId: config.policyId, - erc20: { - tokenAddress: config.gasToken, - postOpSettings: { - autoApprove: { - below: config.approveBelow, - amount: config.approveAmount, - }, - }, - }, - }, - }, - calls: [ - { - to: "0x0000000000000000000000000000000000000000", - value: "0x00", - data: "0x", - }, - ], - }); - - console.log("Transaction sent with ID:", ids[0]); - } catch (error) { - console.error(error); - } - }; - - return ; - } - ``` - - ```ts title="config.ts" - import { type Address, toHex } from "viem"; - - export const config = { - policyId: process.env.ALCHEMY_POLICY_ID!, - gasToken: "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238" as Address, // USDC on Sepolia - approveBelow: toHex(1000000n), // 1 USDC - approveAmount: toHex(10000000n), // 10 USDC - }; - ``` - diff --git a/fern/wallets/pages/transactions/retry-transactions/index.mdx b/fern/wallets/pages/transactions/retry-transactions/index.mdx index b2d69c647..b7d1a353a 100644 --- a/fern/wallets/pages/transactions/retry-transactions/index.mdx +++ b/fern/wallets/pages/transactions/retry-transactions/index.mdx @@ -34,15 +34,11 @@ Key use cases: - - - - - + - + diff --git a/fern/wallets/pages/transactions/retry-transactions/react.mdx b/fern/wallets/pages/transactions/retry-transactions/react.mdx deleted file mode 100644 index 55df1f857..000000000 --- a/fern/wallets/pages/transactions/retry-transactions/react.mdx +++ /dev/null @@ -1,119 +0,0 @@ -Required SDK version: ^v4.61.0 - -Use the `useSendCalls` hook to send and retry transactions. When retrying, don't specify a `nonceOverride` - the client automatically uses the same nonce to replace the stuck transaction. - -You'll need both `ALCHEMY_API_KEY` and `ALCHEMY_POLICY_ID` environment variables set to follow along! - - - -```tsx title="retryTransaction.tsx" -import { config } from "@/app/config"; -import { - useSendCalls, - useSmartAccountClient, - useSmartWalletClient, -} from "@account-kit/react"; -import { useState } from "react"; - -export default function RetryTransaction() { - const { client } = useSmartAccountClient({}); - const { sendCallsAsync } = useSendCalls({ client }); - const walletClient = useSmartWalletClient({ - account: client?.getAddress(), - }); - const [isStuck, setIsStuck] = useState(false); - - const handleSend = async () => { - if (!client) { - throw new Error("Smart account client not connected"); - } - if (!walletClient) { - throw new Error("Wallet client not connected"); - } - - try { - const { ids } = await sendCallsAsync({ - capabilities: { - paymasterService: { - policyId: config.policyId, - }, - }, - calls: [ - { - to: "0x0000000000000000000000000000000000000000", - value: "0x00", - data: "0x", - }, - ], - }); - - console.log("Transaction sent:", ids[0]); - - // Check status after a delay - setTimeout(async () => { - const callStatus = await walletClient.getCallsStatus(ids[0]!); - console.log(callStatus.status); - if (callStatus.status === 100) { - setIsStuck(true); - console.log("Transaction is still in mempool"); - } - }, 3000); // Check after 3 seconds - } catch (error) { - console.error(error); - } - }; - - const handleRetry = async () => { - if (!client) { - throw new Error("Smart account client not connected"); - } - if (!walletClient) { - throw new Error("Wallet client not connected"); - } - - try { - // Re-send without nonceOverride to replace stuck transaction - const { ids } = await sendCallsAsync({ - capabilities: { - paymasterService: { - policyId: config.policyId, - }, - }, - calls: [ - { - to: "0x0000000000000000000000000000000000000000", - value: "0x00", - data: "0x", - }, - ], - }); - - console.log("Replacement transaction sent:", ids[0]); - setIsStuck(false); - - const result = await walletClient.waitForCallsStatus({ id: ids[0]! }); - console.log("Replacement confirmed:", result); - } catch (error) { - console.error(error); - } - }; - - return ( -
- - {isStuck && ( - - )} -
- ); -} -``` - -```ts title="config.ts" -export const config = { - alchemyApiKey: process.env.ALCHEMY_API_KEY!, - policyId: process.env.ALCHEMY_POLICY_ID!, -}; -``` - - diff --git a/fern/wallets/pages/transactions/send-batch-transactions/index.mdx b/fern/wallets/pages/transactions/send-batch-transactions/index.mdx index 054d13c8d..447b74a79 100644 --- a/fern/wallets/pages/transactions/send-batch-transactions/index.mdx +++ b/fern/wallets/pages/transactions/send-batch-transactions/index.mdx @@ -20,15 +20,10 @@ To use this feature, you just need to specify multiple calls to make. The parame ## Implementation - - - - - + - - + diff --git a/fern/wallets/pages/transactions/send-batch-transactions/react.mdx b/fern/wallets/pages/transactions/send-batch-transactions/react.mdx deleted file mode 100644 index 56d0d3550..000000000 --- a/fern/wallets/pages/transactions/send-batch-transactions/react.mdx +++ /dev/null @@ -1,150 +0,0 @@ -Required SDK version: ^v4.59.1 - -Use the `useSendCalls` hook to send a batched transaction. You can also use the `usePrepareCalls` hook to only prepare the transaction for signing. - - - -```tsx title="sendCalls.tsx" focus={6-9,19-41} -import { useSendCalls, useSmartAccountClient } from "@account-kit/react"; -import { type Address, encodeFunctionData, erc20Abi, parseUnits } from "viem"; -import { swapAbi } from "./swapAbi"; - -export default function SendCalls() { - const { client } = useSmartAccountClient({}); - const { sendCallsAsync } = useSendCalls({ - client, - }); - - const DEMO_USDC_ADDRESS: Address = - "0xCFf7C6dA719408113DFcb5e36182c6d5aa491443"; - - const DEMO_SWAP_ADDRESS: Address = - "0xB0AEC4c25E8332256A91bBaf169E3C32dfC3C33C"; - - const handleSend = async () => { - try { - const { ids } = await sendCallsAsync({ - calls: [ - // To batch, simply specify multiple calls in the calls array - { - // approve 5000 USDC to the swap contract - to: DEMO_USDC_ADDRESS, - data: encodeFunctionData({ - abi: erc20Abi, - functionName: "approve", - args: [DEMO_SWAP_ADDRESS, parseUnits("5000", 6)], - }), - }, - { - // swap 5000 USDC to 1 WETH - to: DEMO_SWAP_ADDRESS, - data: encodeFunctionData({ - abi: swapAbi, - functionName: "swapUSDCtoWETH", - args: [parseUnits("5000", 6), parseUnits("1", 18)], - }), - }, - ], - }); - - console.log("Transaction sent with ID:", ids[0]); - } catch (error) { - console.error(error); - } - }; - - return ; -} -``` - -```ts title="swapAbi.ts" -export const swapAbi = [ - { - type: "constructor", - inputs: [], - stateMutability: "nonpayable", - }, - { - type: "function", - name: "mint", - inputs: [ - { - name: "amount1", - type: "uint256", - internalType: "uint256", - }, - { - name: "amount2", - type: "uint256", - internalType: "uint256", - }, - ], - outputs: [], - stateMutability: "nonpayable", - }, - { - type: "function", - name: "swapUSDCtoWETH", - inputs: [ - { - name: "amountIn", - type: "uint256", - internalType: "uint256", - }, - { - name: "amountOut", - type: "uint256", - internalType: "uint256", - }, - ], - outputs: [], - stateMutability: "nonpayable", - }, - { - type: "function", - name: "swapWETHtoUSDC", - inputs: [ - { - name: "amountIn", - type: "uint256", - internalType: "uint256", - }, - { - name: "amountOut", - type: "uint256", - internalType: "uint256", - }, - ], - outputs: [], - stateMutability: "nonpayable", - }, - { - type: "function", - name: "usdc", - inputs: [], - outputs: [ - { - name: "", - type: "address", - internalType: "contract ERC20Mintable", - }, - ], - stateMutability: "view", - }, - { - type: "function", - name: "weth", - inputs: [], - outputs: [ - { - name: "", - type: "address", - internalType: "contract ERC20Mintable", - }, - ], - stateMutability: "view", - }, -] as const; -``` - - diff --git a/fern/wallets/pages/transactions/send-parallel-transactions/index.mdx b/fern/wallets/pages/transactions/send-parallel-transactions/index.mdx index 2d069e31e..4cb99227a 100644 --- a/fern/wallets/pages/transactions/send-parallel-transactions/index.mdx +++ b/fern/wallets/pages/transactions/send-parallel-transactions/index.mdx @@ -14,15 +14,12 @@ This quide explains how to send multiple parallel transactions. Note that you do The `nonceKey` override must fit into a `uint152`! - - - - - + - + + diff --git a/fern/wallets/pages/transactions/send-parallel-transactions/react.mdx b/fern/wallets/pages/transactions/send-parallel-transactions/react.mdx deleted file mode 100644 index d2e0565a3..000000000 --- a/fern/wallets/pages/transactions/send-parallel-transactions/react.mdx +++ /dev/null @@ -1,94 +0,0 @@ -Required SDK version: ^v4.61.0 - -Use the `useSendCalls` hook and the `nonceOverride` capability parameter to send parallel userops. You can also use the `usePrepareCalls` hook to only prepare the operation for signing. - -You'll need both `ALCHEMY_API_KEY` and `ALCHEMY_POLICY_ID` environment variables set to follow along! - - - -```tsx title="sendParallelCalls.tsx" -import { config } from "@/app/config"; -import { - useSendCalls, - useSmartAccountClient, - useSmartWalletClient, -} from "@account-kit/react"; - -export default function SendParallelCalls() { - const { client } = useSmartAccountClient({}); - const { sendCallsAsync } = useSendCalls({ client }); - const walletClient = useSmartWalletClient({ - account: client?.account.address, - }); - - const handleSend = async () => { - if (!client) { - throw new Error("Smart account client not connected"); - } - if (!walletClient) { - throw new Error("Smart wallet client not connected"); - } - - try { - const [{ ids: idsOne }, { ids: idsTwo }] = await Promise.all([ - sendCallsAsync({ - capabilities: { - paymasterService: { - policyId: config.policyId, - }, - nonceOverride: { - nonceKey: "0x01", - }, - }, - calls: [ - { - to: "0x0000000000000000000000000000000000000000", - value: "0x00", - data: "0x", - }, - ], - }), - sendCallsAsync({ - capabilities: { - paymasterService: { - policyId: config.policyId, - }, - nonceOverride: { - nonceKey: "0x02", - }, - }, - calls: [ - { - to: "0x0000000000000000000000000000000000000000", - value: "0x00", - data: "0x", - }, - ], - }), - ]); - - console.log("id of sent call one: ", idsOne); - console.log("id of sent call two: ", idsTwo); - - const result = await Promise.all([ - walletClient.waitForCallsStatus({ id: idsOne[0]! }), - walletClient.waitForCallsStatus({ id: idsTwo[0]! }), - ]); - - console.log(result); - } catch (error) { - console.error(error); - } - }; - return ; -} -``` - -```ts title="config.ts" -export const config = { - alchemyApiKey: process.env.ALCHEMY_API_KEY!, - policyId: process.env.ALCHEMY_POLICY_ID!, -}; -``` - - diff --git a/fern/wallets/pages/transactions/send-transactions/encoding-function-data/react.mdx b/fern/wallets/pages/transactions/send-transactions/encoding-function-data/react.mdx deleted file mode 100644 index 00875dbd1..000000000 --- a/fern/wallets/pages/transactions/send-transactions/encoding-function-data/react.mdx +++ /dev/null @@ -1,57 +0,0 @@ -In React, you can use [Viem](https://viem.sh/docs/contract/encodeFunctionData) to encode function call data. - -**Prerequisites** - -* [Smart Wallets installed and configured in your project](/wallets/pages/react/setup.mdx). - - - ```tsx title="sendCalls.tsx" focus={20-24} - import { useSendCalls, useSmartAccountClient } from "@account-kit/react"; - import { encodeFunctionData } from "viem"; - import { exampleAbi } from "./abi.ts"; - - export default function SendCalls() { - const { client } = useSmartAccountClient({}); - const { sendCalls, isSendingCalls } = useSendCalls({ - client, - }); - - const handleSend = async () => { - if (!client) { - throw new Error("Smart account client not connected"); - } - - sendCalls({ - calls: [ - { - to: "0x0000000000000000000000000000000000000000", - data: encodeFunctionData({ - abi: exampleAbi, - functionName: "mintTo", - args: [client.account.address], - }), - }, - ], - }); - }; - - return ( - - ); - } - ``` - - ```ts title="abi.ts" - export const exampleAbi = [ - { - inputs: [{ name: "recipient", type: "address" }], - name: "mintTo", - outputs: [{ name: "", type: "uint256" }], - stateMutability: "nonpayable", - type: "function", - }, - ] as const; - ``` - diff --git a/fern/wallets/pages/transactions/send-transactions/index.mdx b/fern/wallets/pages/transactions/send-transactions/index.mdx index f07932034..e28f78564 100644 --- a/fern/wallets/pages/transactions/send-transactions/index.mdx +++ b/fern/wallets/pages/transactions/send-transactions/index.mdx @@ -14,10 +14,6 @@ This guide will teach you how to send a single EVM transaction. Smart Wallets ma ## Implementation - - - - @@ -33,10 +29,6 @@ This guide will teach you how to send a single EVM transaction. Smart Wallets ma If you need to encode function data (instead of just sending value), it is easy to do so using Viem or Foundry. - - - - @@ -48,16 +40,16 @@ This guide will teach you how to send a single EVM transaction. Smart Wallets ma - Instead of using the `sendCalls` abstraction, you can prepare and send calls using underlying methods in React or using the JavaScript client. Usage of the capability will be the same as when using send calls. It is recommended to use `prepareCalls` if you want to inspect the prepared call prior to prompting the user for signature. + Instead of using the `sendCalls` abstraction, you can prepare and send calls using underlying methods. Usage of the capability will be the same as when using send calls. It is recommended to use `prepareCalls` if you want to inspect the prepared call prior to prompting the user for signature. - - - - + + + See the [`wallet_prepareCalls` API reference](/wallets/api/smart-wallets/wallet-api-endpoints/wallet-api-endpoints/wallet-prepare-calls). + diff --git a/fern/wallets/pages/transactions/send-transactions/prepare-calls/react.mdx b/fern/wallets/pages/transactions/send-transactions/prepare-calls/react.mdx deleted file mode 100644 index 09ae0d42c..000000000 --- a/fern/wallets/pages/transactions/send-transactions/prepare-calls/react.mdx +++ /dev/null @@ -1,60 +0,0 @@ -Required SDK version: ^v4.62.2 - -**Prerequisites** - -* [Smart Wallets installed and configured in your project](/wallets/pages/react/setup.mdx). - -You can use React hooks to prepare, sign, and send transactions. - - - ```tsx title="sendCalls.tsx" focus={10-15,22-39} - import { - usePrepareCalls, - useSmartAccountClient, - useSendPreparedCalls, - useSmartWalletClient, - } from "@account-kit/react"; - import { parseEther, toHex } from "viem"; - - export default function SendCalls() { - const { client } = useSmartAccountClient({}); - const { prepareCallsAsync } = usePrepareCalls({ client }); - const { sendPreparedCallsAsync } = useSendPreparedCalls({ client }); - const smartWalletClient = useSmartWalletClient({ - account: client?.account.address, - }); - - const handleSend = async () => { - if (!client || !smartWalletClient) { - throw new Error("Client not connected"); - } - - const preparedCalls = await prepareCallsAsync({ - calls: [ - { - to: "0x0000000000000000000000000000000000000000", - value: toHex(parseEther("0")), - data: "0x", - }, - ], - }); - - console.log({ preparedCalls }); // Here you can inspect the prepared calls before signing. - - const signedCalls = - await smartWalletClient.signPreparedCalls(preparedCalls); - - const sentCalls = await sendPreparedCallsAsync(signedCalls); - - console.log({ sentCalls }); - }; - - return ; - } - ``` - - -See the [`usePrepareCalls`](/wallets/reference/account-kit/react/hooks/usePrepareCalls), -[`useSendPreparedCalls`](/wallets/reference/account-kit/react/hooks/useSendPreparedCalls), and -[`useSmartWalletClient`](/wallets/reference/account-kit/react/hooks/useSmartWalletClient) SDK reference for -full descriptions of the parameters used in the above example. diff --git a/fern/wallets/pages/transactions/send-transactions/react.mdx b/fern/wallets/pages/transactions/send-transactions/react.mdx deleted file mode 100644 index c0d58a393..000000000 --- a/fern/wallets/pages/transactions/send-transactions/react.mdx +++ /dev/null @@ -1,74 +0,0 @@ -Required SDK version: ^v4.62.2 - -**Prerequisites** - -* [Smart Wallets installed and configured in your project](/wallets/pages/react/setup.mdx) -* An [authenticated user](/wallets/authentication/overview) - -You can use the `useSendCalls` hook to send calls, followed by the `useWaitForCallsStatus` hook to wait for confirmation. - - - ```tsx title="sendCalls.tsx" focus={11-22,29-37,42-44} - import { - useSendCalls, - useSmartAccountClient, - useWaitForCallsStatus, - } from "@account-kit/react"; - import { parseEther, toHex } from "viem"; - - export default function SendCalls() { - const { client } = useSmartAccountClient({}); - - const { sendCalls, isSendingCalls, sendCallsResult } = useSendCalls({ - client, - }); - - const { - data: statusResult, - isLoading: isWaitingForConfirmation, - error, - } = useWaitForCallsStatus({ - client, - id: sendCallsResult?.ids[0], - }); - - const handleSend = async () => { - if (!client) { - throw new Error("Smart account client not connected"); - } - - sendCalls({ - calls: [ - { - to: "0x0000000000000000000000000000000000000000", - value: toHex(parseEther("0")), - data: "0x", - }, - ], - }); - }; - - return ( -
- - {sendCallsResult && ( -

- {isWaitingForConfirmation - ? "Waiting for confirmation..." - : error - ? `Error: ${error}` - : !statusResult - ? "Timed out waiting for confirmation" - : `Result: ${statusResult.status}`} -

- )} -
- ); - } - ``` - - -See the [`useSendCalls` SDK reference](/wallets/reference/account-kit/react/hooks/useSendCalls) for -full descriptions of the parameters used in the above example. diff --git a/fern/wallets/pages/transactions/signing/sign-messages/index.mdx b/fern/wallets/pages/transactions/signing/sign-messages/index.mdx index 13cb598cc..83b4bbccb 100644 --- a/fern/wallets/pages/transactions/signing/sign-messages/index.mdx +++ b/fern/wallets/pages/transactions/signing/sign-messages/index.mdx @@ -27,11 +27,7 @@ Smart Wallets support EIP-191 message signing, which is the standard for Ethereu ## Text messages - - - - - + @@ -39,11 +35,7 @@ Smart Wallets support EIP-191 message signing, which is the standard for Ethereu ## Raw hex messages - - - - - + diff --git a/fern/wallets/pages/transactions/signing/sign-messages/react-raw.mdx b/fern/wallets/pages/transactions/signing/sign-messages/react-raw.mdx deleted file mode 100644 index c9ba4f238..000000000 --- a/fern/wallets/pages/transactions/signing/sign-messages/react-raw.mdx +++ /dev/null @@ -1,34 +0,0 @@ -Required SDK version: ^v4.59.1 - -Use the [`useSignMessage`](/wallets/reference/account-kit/react/hooks/useSignMessage) hook to sign raw hex messages with your Smart Wallet. - - - -```tsx title="signRawMessage.tsx" -import { useSignMessage, useSmartAccountClient } from "@account-kit/react"; - -export default function SignRawMessage() { - const { client } = useSmartAccountClient({}); - const { signMessageAsync } = useSignMessage({ - client, - }); - - const handleSignRawMessage = async () => { - const signature = await signMessageAsync({ - message: { - raw: "0x48656c6c6f2c20776f726c6421", // "Hello, world!" in hex - }, - }); - - console.log("Raw signature:", signature); - }; - - return ( -
- -
- ); -} -``` - - diff --git a/fern/wallets/pages/transactions/signing/sign-messages/react-text.mdx b/fern/wallets/pages/transactions/signing/sign-messages/react-text.mdx deleted file mode 100644 index f21daaa37..000000000 --- a/fern/wallets/pages/transactions/signing/sign-messages/react-text.mdx +++ /dev/null @@ -1,32 +0,0 @@ -Required SDK version: ^v4.59.1 - -Use the [`useSignMessage`](/wallets/reference/account-kit/react/hooks/useSignMessage) hook to sign text messages with your Smart Wallet. - - - -```tsx title="signTextMessage.tsx" -import { useSignMessage, useSmartAccountClient } from "@account-kit/react"; - -export default function SignTextMessage() { - const { client } = useSmartAccountClient({}); - const { signMessageAsync } = useSignMessage({ - client, - }); - - const handleSignTextMessage = async () => { - const signature = await signMessageAsync({ - message: "Hello, world!", - }); - - console.log("Signature:", signature); - }; - - return ( -
- -
- ); -} -``` - - diff --git a/fern/wallets/pages/transactions/signing/sign-typed-data/index.mdx b/fern/wallets/pages/transactions/signing/sign-typed-data/index.mdx index d4aad781f..be985277f 100644 --- a/fern/wallets/pages/transactions/signing/sign-typed-data/index.mdx +++ b/fern/wallets/pages/transactions/signing/sign-typed-data/index.mdx @@ -24,11 +24,7 @@ Typed data follows the [EIP-712](https://eips.ethereum.org/EIPS/eip-712) standar ## Implementation - - - - - + diff --git a/fern/wallets/pages/transactions/signing/sign-typed-data/react.mdx b/fern/wallets/pages/transactions/signing/sign-typed-data/react.mdx deleted file mode 100644 index 0e202ac12..000000000 --- a/fern/wallets/pages/transactions/signing/sign-typed-data/react.mdx +++ /dev/null @@ -1,51 +0,0 @@ -Required SDK version: ^v4.59.1 - -Use the [`useSignTypedData`](/wallets/reference/account-kit/react/hooks/useSignTypedData) hook to sign typed data with your Smart Wallet. - - - -```tsx title="signTypedData.tsx" -import { useSignTypedData, useSmartAccountClient } from "@account-kit/react"; - -export default function SignTypedData() { - const { client } = useSmartAccountClient({}); - const { signTypedDataAsync } = useSignTypedData({ - client, - }); - - const handleSignTypedData = async () => { - const typedData = { - domain: { - name: "MyDApp", - version: "1", - chainId: 1, - verifyingContract: "0x...", - }, - types: { - Auth: [ - { name: "user", type: "address" }, - { name: "nonce", type: "uint256" }, - { name: "timestamp", type: "uint256" }, - ], - }, - primaryType: "Auth", - message: { - user: "0x...", // wallet address - nonce: 12345, - timestamp: Date.now(), - }, - } as const; - - const signature = await signTypedDataAsync({ typedData }); - console.log("Typed data signature:", signature); - }; - - return ( -
- -
- ); -} -``` - - diff --git a/fern/wallets/pages/transactions/solana/sponsor-gas-solana.mdx b/fern/wallets/pages/transactions/solana/sponsor-gas-solana.mdx index be03a876c..e30b6bd9c 100644 --- a/fern/wallets/pages/transactions/solana/sponsor-gas-solana.mdx +++ b/fern/wallets/pages/transactions/solana/sponsor-gas-solana.mdx @@ -26,25 +26,7 @@ When you request gas sponsorship for a transaction using a configured policy, th ## Implementation - - Required SDK version: ^v4.59.1 - - ## Global sponsorship - - To apply a sponsorship policy to all transactions sent by the Solana wallet provider, you can configure fee and rent sponsorship by passing a `policyId` into your Solana config. Replace the API key and Policy Id with your keys from the [dashboard](https://dashboard.alchemy.com/services/gas-manager/configuration). This setup applies sponsorship to all Solana transactions sent from wallets created with this configuration (e.g. this will be applied to usage of the `useSolana…` hooks). - - - - ### Per transaction sponsorship - - Alternatively, to apply sponsorship conditionally for each transaction, you can pass a `policyId` to the `useSolanaTransaction` hook. - - - - Congrats! You’re now creating smart wallets on Solana with social login and sending sponsored transactions to create a zero-friction experience from sign-up to transaction. - - - + ### Prepare a Serialized Solana Transaction Here’s an example of creating a serialized transfer transaction using javascript: diff --git a/fern/wallets/pages/transactions/sponsor-gas/index.mdx b/fern/wallets/pages/transactions/sponsor-gas/index.mdx index 2788bdae2..6de5e0c6f 100644 --- a/fern/wallets/pages/transactions/sponsor-gas/index.mdx +++ b/fern/wallets/pages/transactions/sponsor-gas/index.mdx @@ -20,15 +20,11 @@ and bill the sponsoring developer in fiat. ## Implementation - - - - - + - + @@ -39,17 +35,12 @@ and bill the sponsoring developer in fiat. Gas sponsorship also works with the prepare calls methods in the various frameworks. Usage of the capability will be the same as when using send calls. It is recommended to use prepare calls if you want to inspect the prepared call prior to prompting the user for signature. - - See the [`usePrepareCalls` react - hook](/wallets/reference/account-kit/react/hooks/usePrepareCalls) - - - + See the [`prepareCalls` SDK reference](/wallets/reference/account-kit/wallet-client/functions/prepareCalls) - + See the [`wallet_prepareCalls` API reference](/wallets/api/smart-wallets/wallet-api-endpoints/wallet-api-endpoints/wallet-prepare-calls) diff --git a/fern/wallets/pages/transactions/sponsor-gas/react.mdx b/fern/wallets/pages/transactions/sponsor-gas/react.mdx deleted file mode 100644 index 9c56f8049..000000000 --- a/fern/wallets/pages/transactions/sponsor-gas/react.mdx +++ /dev/null @@ -1,65 +0,0 @@ -Required SDK version: ^v4.61.0 - -Use the `useSendCalls` hook to sponsor gas for a transaction. - -The gas sponsorship policy ID can be configured: - -1. In the `AlchemyAccountProvider` component configuration. Used by default if configured. -2. In the `paymasterService` capabilities `policyId` parameter. Overrides the component configuration. - -**Prerequisites** - -* [Smart Wallets installed and configured in your project](/wallets/pages/react/setup.mdx). - -See the [`useSendCalls` SDK reference](/wallets/reference/account-kit/react/hooks/useSendCalls) for parameter descriptions. - - - ```tsx title="sendCalls.tsx" focus={5-6,14-21} - import { useSendCalls, useSmartAccountClient } from "@account-kit/react"; - import { config } from "./config.ts"; - - export default function SendCalls() { - const { client } = useSmartAccountClient({}); - const { sendCallsAsync } = useSendCalls({ client }); - - const handleSend = async () => { - if (!client) { - throw new Error("Smart account client not connected"); - } - - try { - const { ids } = await sendCallsAsync({ - // OPTIONAL: configure here to override a policyId set - // in the `AlchemyAccountProvider` configuration. - capabilities: { - paymasterService: { - policyId: config.policyId, - }, - }, - calls: [ - { - to: "0x0000000000000000000000000000000000000000", - value: "0x00", - data: "0x", - }, - ], - }); - - console.log("Transaction sent with ID:", ids[0]); - } catch (error) { - console.error(error); - } - }; - - return ; - } - ``` - - ```ts title="config.ts" - import { Address, toHex } from "viem"; - - export const config = { - policyId: process.env.ALCHEMY_POLICY_ID!, - }; - ``` - diff --git a/fern/wallets/pages/transactions/swap-tokens/index.mdx b/fern/wallets/pages/transactions/swap-tokens/index.mdx index 77d389d67..39457b2fc 100644 --- a/fern/wallets/pages/transactions/swap-tokens/index.mdx +++ b/fern/wallets/pages/transactions/swap-tokens/index.mdx @@ -52,15 +52,11 @@ Before you begin, ensure you have: * A signer to own the account and sign messages - - - - - + - + @@ -86,6 +82,3 @@ This removes any ambiguity— if it’s numerical, it’s a hex. The expiry is an informational indicator of when you can expect to be able to process the swap request. If you’re at/near the expiry, it might be a good time to request a new quote. -## What if I’m using React? - -Use the `@account-kit/react` package to access a `smartWalletClient`. This package automatically uses the Signer for user authentication & signing. [Check out the docs for getting started with React to learn more](/wallets/react/quickstart). diff --git a/fern/wallets/pages/transactions/swap-tokens/react.mdx b/fern/wallets/pages/transactions/swap-tokens/react.mdx deleted file mode 100644 index 8699a3037..000000000 --- a/fern/wallets/pages/transactions/swap-tokens/react.mdx +++ /dev/null @@ -1,149 +0,0 @@ -Required SDK version: ^v4.70.0 - -Use the `usePrepareSwap` hook to request swap quotes and the `useSignAndSendPreparedCalls` hook to execute token swaps on the same chain. - -**Prerequisites** - -* [Smart Wallets installed and configured in your project](/wallets/react/quickstart) -* An [authenticated user](/wallets/authentication/overview) -* Tokens in your smart account to swap - - - ```tsx title="swapTokens.tsx" - import { - useSmartAccountClient, - usePrepareSwap, - useSignAndSendPreparedCalls, - useWaitForCallsStatus, - useUser, - } from "@account-kit/react"; - - // Token addresses on Arbitrum - const TOKENS = { - NATIVE: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEee", // ETH - USDC: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831", - } as const; - - export default function SwapTokens() { - const user = useUser(); - const { client } = useSmartAccountClient({ - accountParams: { mode: "7702" }, - }); - - const { prepareSwapAsync, isPreparingSwap } = usePrepareSwap({ - client, - }); - - const { - signAndSendPreparedCallsAsync, - isSigningAndSendingPreparedCalls, - signAndSendPreparedCallsResult, - } = useSignAndSendPreparedCalls({ client }); - - const { - data: statusResult, - isLoading: isWaitingForConfirmation, - error, - } = useWaitForCallsStatus({ - client, - id: signAndSendPreparedCallsResult?.preparedCallIds[0], - }); - - const handleSwap = async () => { - if (!client?.account.address) { - throw new Error("No account connected"); - } - - try { - // Step 1: Request swap quote - const result = await prepareSwapAsync({ - from: client.account.address, - fromToken: TOKENS.NATIVE, - toToken: TOKENS.USDC, - fromAmount: "0x5af3107a4000", // 0.0001 ETH - // postCalls: [{ - // to: "0x...", - // data: "0x...", - // value: "0x0" - // }], // Optional: batch additional calls after the swap - }); - - const { quote, ...calls } = result; - console.log("Swap quote:", quote); - - // Ensure we have user operation calls - if (calls.rawCalls) { - throw new Error("Expected user operation calls"); - } - - // Step 2: Sign and send the prepared calls - const callIds = await signAndSendPreparedCallsAsync(calls); - - console.log("Transaction sent"); - console.log("Call ID:", callIds?.preparedCallIds[0]); - } catch (error) { - console.error("Swap failed:", error); - } - }; - - if (!user) { - return
Please log in to use swap functionality
; - } - - return ( -
- - - {signAndSendPreparedCallsResult && ( -

- {isWaitingForConfirmation - ? "Waiting for confirmation..." - : error - ? `Error: ${error}` - : statusResult?.statusCode === 200 - ? "Swap confirmed!" - : `Status: ${statusResult?.statusCode}`} -

- )} -
- ); - } - ``` - - -## How it works - -1. **Request quote**: `usePrepareSwap` requests a swap quote and prepares the transaction calls -2. **Destructure result**: Extract `quote` for display and `calls` for signing -3. **Sign and send**: `useSignAndSendPreparedCalls` signs and submits the transaction -4. **Track status**: `useWaitForCallsStatus` monitors the transaction until confirmation - -The quote includes the minimum amount you'll receive and the expiry time for the quote. - -## Swap options - -You can specify either an exact input amount or a minimum output amount: - -```tsx -// Mode 1: Swap exact input amount -await prepareSwapAsync({ - from: address, - fromToken: "0x...", - toToken: "0x...", - fromAmount: "0x2710", // Swap exactly 0.01 USDC (10000 in hex, 6 decimals) -}); - -// Mode 2: Get minimum output amount -await prepareSwapAsync({ - from: address, - fromToken: "0x...", - toToken: "0x...", - minimumToAmount: "0x5AF3107A4000", // Get at least 0.0001 ETH (18 decimals) -}); -``` diff --git a/fern/wallets/pages/transactions/using-eip-7702/index.mdx b/fern/wallets/pages/transactions/using-eip-7702/index.mdx index 81e68ea0d..4157697c0 100644 --- a/fern/wallets/pages/transactions/using-eip-7702/index.mdx +++ b/fern/wallets/pages/transactions/using-eip-7702/index.mdx @@ -20,15 +20,11 @@ when the delegation is missing on the chain they're interacting with. ## Implementation - - - - - + - + @@ -68,17 +64,12 @@ when the delegation is missing on the chain they're interacting with. - - See the [`usePrepareCalls` react - hook](/wallets/reference/account-kit/react/hooks/usePrepareCalls) - - - + See the [`prepareCalls` SDK reference](/wallets/reference/account-kit/wallet-client/functions/prepareCalls) - + See the [`wallet_prepareCalls` API reference](/wallets/api/smart-wallets/wallet-api-endpoints/wallet-api-endpoints/wallet-prepare-calls) diff --git a/fern/wallets/pages/transactions/using-eip-7702/react.mdx b/fern/wallets/pages/transactions/using-eip-7702/react.mdx deleted file mode 100644 index 87de7f4d9..000000000 --- a/fern/wallets/pages/transactions/using-eip-7702/react.mdx +++ /dev/null @@ -1,50 +0,0 @@ -Required SDK version: ^v4.61.0 - -To use Smart Wallets in EIP-7702 mode, you must specify the mode when constructing the smart account client with `useSmartAccountClient`. -This will allow the authorized EOA to act as a smart wallet with the same address as the EOA. The `useSendCalls` hook will sign the required -delegation payload the first time that a user interacts with a new chain. This payload is then relayed on chain with the user's first transaction. - -**Prerequisites:** - -* [Smart Wallets installed and configured in your project](/wallets/react/setup) - -See the [`useSendCalls` SDK reference](/wallets/reference/account-kit/react/hooks/useSendCalls) for parameter descriptions. - - - ```tsx title="sendCalls.tsx" focus={4-8,17-25} - import { useSendCalls, useSmartAccountClient } from "@account-kit/react"; - - export default function SendCalls() { - const { client } = useSmartAccountClient({ - accountParams: { - mode: "7702", - }, - }); - const { sendCallsAsync } = useSendCalls({ client }); - - const handleSend = async () => { - if (!client) { - throw new Error("Smart account client not connected"); - } - - try { - const { ids } = await sendCallsAsync({ - calls: [ - { - to: "0x0000000000000000000000000000000000000000", - value: "0x00", - data: "0x", - }, - ], - }); - - console.log("Transaction sent with ID:", ids[0]); - } catch (error) { - console.error(error); - } - }; - - return ; - } - ``` - diff --git a/fern/wallets/pages/troubleshooting/server-side-rendering.mdx b/fern/wallets/pages/troubleshooting/server-side-rendering.mdx index ba61535af..d30e69128 100644 --- a/fern/wallets/pages/troubleshooting/server-side-rendering.mdx +++ b/fern/wallets/pages/troubleshooting/server-side-rendering.mdx @@ -13,7 +13,7 @@ When using Smart Wallets in a server-side rendered setting, you will see inconsi To enable server-side rendering support, you need to set `ssr: true` when creating a config. - + When using React, you should also make the config a function so that you can call it once per request, which allows for request-based isolation of the account state.