web-sdk updates

Author: tolgahan-arikan

docs.json

@@ -278,6 +278,8 @@
                               "sdk/web/wallet-sdk/ecosystem/hooks/useOpenConnectModal",
                               "sdk/web/wallet-sdk/ecosystem/hooks/useChain",
                               "sdk/web/wallet-sdk/ecosystem/hooks/useFeeOptions",
+                              "sdk/web/wallet-sdk/ecosystem/hooks/useHasPermission",
+                              "sdk/web/wallet-sdk/ecosystem/hooks/useSendWalletTransaction",
                               "sdk/web/wallet-sdk/ecosystem/hooks/useExplicitSessions",
                               "sdk/web/wallet-sdk/ecosystem/hooks/useListAccounts",
                               "sdk/web/wallet-sdk/ecosystem/hooks/useSignInEmail",
@@ -1288,6 +1290,8 @@
                               "ja/sdk/web/wallet-sdk/ecosystem/hooks/useOpenConnectModal",
                               "ja/sdk/web/wallet-sdk/ecosystem/hooks/useChain",
                               "ja/sdk/web/wallet-sdk/ecosystem/hooks/useFeeOptions",
+                              "ja/sdk/web/wallet-sdk/ecosystem/hooks/useHasPermission",
+                              "ja/sdk/web/wallet-sdk/ecosystem/hooks/useSendWalletTransaction",
                               "ja/sdk/web/wallet-sdk/ecosystem/hooks/useExplicitSessions",
                               "ja/sdk/web/wallet-sdk/ecosystem/hooks/useListAccounts",
                               "ja/sdk/web/wallet-sdk/ecosystem/hooks/useSignInEmail",
@@ -2268,6 +2272,8 @@
                               "es/sdk/web/wallet-sdk/ecosystem/hooks/useOpenConnectModal",
                               "es/sdk/web/wallet-sdk/ecosystem/hooks/useChain",
                               "es/sdk/web/wallet-sdk/ecosystem/hooks/useFeeOptions",
+                              "es/sdk/web/wallet-sdk/ecosystem/hooks/useHasPermission",
+                              "es/sdk/web/wallet-sdk/ecosystem/hooks/useSendWalletTransaction",
                               "es/sdk/web/wallet-sdk/ecosystem/hooks/useExplicitSessions",
                               "es/sdk/web/wallet-sdk/ecosystem/hooks/useListAccounts",
                               "es/sdk/web/wallet-sdk/ecosystem/hooks/useSignInEmail",

ja/solutions/payments/checkout-sdk.mdx

@@ -1,6 +1,6 @@
 ---
-title: Checkout SDK（NFT向けカード決済）
-description: @0xsequence/checkout を使って、パートナー（例：Transak、Forte）経由でNFT購入時にクレジット／デビットカード決済を追加できます。
+title: "Checkout SDK（NFT向けカード決済）"
+description: "@0xsequence/checkout を使って、パートナー（例：Transak、Forte）経由でNFT購入時にクレジット／デビットカード決済を追加できます。"
 sidebarTitle: Checkout SDK
 ---
 
@@ -122,4 +122,4 @@ export function CustomBuy() {
 ## 参考情報
 
 - [Web SDKチェックアウトガイド](/sdk/web/wallet-sdk/embedded/guides/checkout)
-- [Trails概要](/solutions/payments/trails)
+- [Trails概要](/solutions/payments/trails)

sdk/web/wallet-sdk/ecosystem/getting-started.mdx

@@ -28,23 +28,39 @@ yarn add @0xsequence/connect@v6-beta wagmi viem
 
 Next, create the Ecosystem Wallet configuration.
 
+**Required for Ecosystem Wallet**
+
+- `projectAccessKey`
+- `walletUrl`
+
+**Optional**
+
+- `dappOrigin`
+- `signIn.projectName`, `appName`
+- `chainIds`, `defaultChainId`
+- `explicitSessionParams` (optional; `nativeTokenSpending` defaults to `valueLimit: 0`)
+- `includeFeeOptionPermissions`, `enableImplicitSession`
+- `nodesUrl`, `relayerUrl`
+- `walletConnect`
+
 ```typescript [config.ts]
 import { createConfig } from "@0xsequence/connect";
 
 export const config: any = createConfig({
   projectAccessKey: "AQAAAAAAAABtDHG1It7lxRF_9bbxw4diip8",
-  signIn: {
-    projectName: 'Sequence Web SDK Demo',
-  },
   walletUrl: 'https://next-acme-wallet.sequence-dev.app',
+  // Optional
   dappOrigin: window.location.origin,
+  signIn: {
+    projectName: 'Sequence Web SDK Demo'
+  },
   appName: 'Sequence Web SDK Demo',
   chainIds: [42161],
   defaultChainId: 42161,
   google: true,
   apple: true,
   email: true,
-  explicitSessionParams: {...}
+  explicitSessionParams: { ... }
 });
 ```
 
@@ -55,6 +71,8 @@ The `dappOrigin` is the origin of your dapp, used to verify where the user is co
 The `explicitSessionParams` object allows your dapp to request specific permissions from the user upon connection. 
 These permissions can authorize your dapp to perform certain actions on the user's behalf for a defined period, creating a more seamless user experience with no transaction prompts or allowing automations.
 
+`nativeTokenSpending` is optional. If omitted, the session will default to a native token `valueLimit` of `0`.
+
 For example, let's create an explicit session that allows your dapp to `deposit 100 USDC into the AAVE V3 pool on Arbitrum, on behalf of the user for the next 24 hours`
 
 ```typescript [config.ts]
@@ -66,11 +84,12 @@ export const AAVE_V3_POOL_ADDRESS_ARBITRUM = '0x794a61358D6845594F94dc1DB02A252b
 
 export const config: any = createConfig({
   projectAccessKey: "AQAAAAAAAABtDHG1It7lxRF_9bbxw4diip8",
+  walletUrl: 'https://next-acme-wallet.sequence-dev.app',
+  // Optional
+  dappOrigin: window.location.origin,
   signIn: {
     projectName: 'Sequence Web SDK Demo',
   },
-  walletUrl: 'https://next-acme-wallet.sequence-dev.app',
-  dappOrigin: window.location.origin,
   appName: 'Sequence Web SDK Demo',
   chainIds: [42161],
   defaultChainId: 42161,
@@ -200,6 +219,21 @@ yarn add @0xsequence/connect@v6-beta wagmi viem
 
 Next, create the Ecosystem Wallet configuration.
 
+**Required for Ecosystem Wallet**
+
+- `projectAccessKey`
+- `walletUrl`
+
+**Optional**
+
+- `dappOrigin`
+- `signIn.projectName`, `appName`
+- `chainIds`, `defaultChainId`
+- `explicitSessionParams` (optional; `nativeTokenSpending` defaults to `valueLimit: 0`)
+- `includeFeeOptionPermissions`, `enableImplicitSession`
+- `nodesUrl`, `relayerUrl`
+- `walletConnect`
+
 ```typescript [config.ts]
 import { createConfig } from "@0xsequence/connect";
 
@@ -227,6 +261,8 @@ The `dappOrigin` is the origin of your dapp, used to verify where the user is co
 The `explicitSessionParams` object allows your dapp to request specific permissions from the user upon connection. 
 These permissions can authorize your dapp to perform certain actions on the user's behalf for a defined period, creating a more seamless user experience with no transaction prompts.
 
+`nativeTokenSpending` is optional. If omitted, the session will default to a native token `valueLimit` of `0`.
+
 For example, let's create an explicit session that allows your dapp to `deposit 100 USDC into the AAVE V3 pool on Arbitrum, on behalf of the user for the next 24 hours`
 
 ```typescript [config.ts]
@@ -390,5 +426,3 @@ The user will be prompted to approve the permissions when connecting.
 </Steps>
 </Tab>
 </Tabs>
-
-

sdk/web/wallet-sdk/ecosystem/hooks/useExplicitSessions.mdx

@@ -13,7 +13,7 @@ import { useExplicitSessions } from '@0xsequence/connect'
 ## Usage
 
 ```tsx
-import { createContractPermission, createExplicitSession, useExplicitSessions, type Permission, type Session } from '@0xsequence/connect'
+import { createContractPermission, useExplicitSessions, type ExplicitSessionParams, type ExplicitSession } from '@0xsequence/connect'
 import { useEffect, useState } from 'react'
 import { parseUnits } from 'viem'
 
@@ -22,10 +22,11 @@ function App() {
     isLoading,
     error,
     addExplicitSession,
+    modifyExplicitSession,
     getExplicitSessions
   } = useExplicitSessions()
 
-  const [sessions, setSessions] = useState<Session[]>([])
+  const [sessions, setSessions] = useState<ExplicitSession[]>([])
 
   // Load existing sessions
   useEffect(() => {
@@ -47,15 +48,15 @@ function App() {
       address: '0x...',
       functionSignature: 'function testContract() public'
     })
-    const currentSession = sessions[0];
+    const currentSession = sessions[0]
     const modifiedSession = { ...currentSession, permissions: [...currentSession.permissions!, newPermission] }
     modifyExplicitSession(modifiedSession)
   }
 
   // Handle creating a new explicit session
   const handleCreateSession = async () => {
     try {
-      const tokenSpendingSession = createExplicitSession({
+      const tokenSpendingSession: ExplicitSessionParams = {
         chainId: 42161,
         nativeTokenSpending: {
           valueLimit: 0n,
@@ -78,9 +79,9 @@ function App() {
               ]
           })
         ]
-      })
+      }
 
-      await addExplicitSession(42161, tokenSpendingSession)
+      await addExplicitSession(tokenSpendingSession)
 
       // Refresh sessions after creating a new one
       const updatedSessions = await getExplicitSessions()
@@ -113,10 +114,9 @@ function App() {
         <h3>Existing Sessions ({sessions.length})</h3>
         {sessions.map((session, index) => (
           <div key={index}>
-            <p>Session Address: {session.address}</p>
+            <p>Session Address: {session.sessionAddress}</p>
             <p>Chain ID: {session.chainId}</p>
-            <p>Is Implicit: {session.isImplicit ? 'Yes' : 'No'}</p>
-            <p>Permissions: {session.permissions?.permissions?.map((permission: Permission) => permission.target).join(', ')}</p>
+            <p>Permissions: {session.permissions?.map(permission => permission.target).join(', ')}</p>
           </div>
         ))}
       </div>
@@ -133,8 +133,9 @@ The hook returns an object with the following properties:
 type UseExplicitSessionsReturnType = {
   isLoading: boolean
   error: Error | null
-  addExplicitSession: (chainId: ChainId, explicitSession: ExplicitSession) => Promise<void>
-  getExplicitSessions: () => Promise<Session[]>
+  addExplicitSession: (params: ExplicitSessionParams, includeFeeOptionPermissions?: boolean) => Promise<void>
+  modifyExplicitSession: (explicitSession: ExplicitSession) => Promise<void>
+  getExplicitSessions: () => Promise<ExplicitSession[]>
 }
 ```
 
@@ -154,7 +155,7 @@ An error object if the last operation failed, otherwise `null`.
 
 #### addExplicitSession
 
-`(chainId: ChainId, explicitSession: ExplicitSession) => Promise<void>`
+`(params: ExplicitSessionParams, includeFeeOptionPermissions?: boolean) => Promise<void>`
 
 ```typescript
 type ExplicitSession = {
@@ -188,20 +189,9 @@ Function to modify an existing explicit session.
 
 #### getExplicitSessions
 
-`() => Promise<Session[]>`
-
-```typescript
-type Session = {
-  type: 'explicit' | 'implicit'
-  sessionAddress: Address.Address
-  valueLimit?: bigint
-  deadline?: bigint
-  permissions?: Permission.Permission[]
-  chainId?: number
-}
-```
+`() => Promise<ExplicitSession[]>`
 
-Function to get all sessions for the connected wallet.
+Function to get all explicit sessions for the connected wallet.
 
 ## Notes
 

sdk/web/wallet-sdk/ecosystem/hooks/useFeeOptions.mdx

@@ -8,6 +8,7 @@ sidebarTitle: useFeeOptions
 
 ```tsx
 import { useFeeOptions } from '@0xsequence/connect'
+import { zeroAddress } from 'viem'
 ```
 
 ## Usage
@@ -69,8 +70,8 @@ function App() {
               <input
                 type="radio"
                 name="feeOption"
-                checked={selectedFeeOptionTokenAddress === (option.token.contractAddress || '')}
-                onChange={() => setSelectedFeeOptionTokenAddress(option.token.contractAddress || '')}
+                checked={selectedFeeOptionTokenAddress === (option.token.contractAddress || zeroAddress)}
+                onChange={() => setSelectedFeeOptionTokenAddress(option.token.contractAddress || zeroAddress)}
               />
               <label>
                 {option.token.symbol} - {option.token.contractAddress || 'Native Token'}
@@ -85,7 +86,7 @@ function App() {
         </div>
         <div>
           <button 
-            onClick={() => handleConfirmFee(selectedFeeOptionTokenAddress || '')}
+            onClick={() => handleConfirmFee(selectedFeeOptionTokenAddress || zeroAddress)}
             disabled={!selectedFeeOptionTokenAddress}
           >
             Confirm
@@ -161,7 +162,7 @@ Function to confirm the selected fee option.
 | Parameter | Type | Description |
 | --------- | ---- | ----------- |
 | `id` | `string` | The fee confirmation ID |
-| `feeTokenAddress` | `string` | The address of the token to use for fee payment (use empty string for native token) |
+| `feeTokenAddress` | `string` | The address of the token to use for fee payment (use `zeroAddress` for native token) |
 
 #### rejectPendingFeeOption
 
@@ -186,4 +187,4 @@ Key features:
 
 The hook integrates with the Sequence V3 connector to intercept fee confirmation requests and presents a user interface to allow selection of the fee token. It uses shared state management to ensure consistent behavior across multiple instances of the hook.
 
-For a detailed guide on how to use the hook, see the [Pay gas in ERC20](/sdk/web/wallet-sdk/embedded/guides/pay-gas-in-erc20) guide.
+For a detailed guide on how to use the hook, see the [Pay gas in ERC20](/sdk/web/wallet-sdk/embedded/guides/pay-gas-in-erc20) guide.

sdk/web/wallet-sdk/ecosystem/hooks/useHasPermission.mdx

@@ -0,0 +1,79 @@
+---
+title: "useHasPermission"
+description: Hook to check whether the current Sequence V3 session can execute a set of transactions
+sidebarTitle: useHasPermission
+---
+
+## Import
+
+```tsx
+import { useHasPermission } from '@0xsequence/connect'
+```
+
+## Usage
+
+```tsx
+import { useHasPermission } from '@0xsequence/connect'
+import { encodeFunctionData, type TransactionRequest } from 'viem'
+
+function App() {
+  const { checkPermission, isLoading, error, data } = useHasPermission()
+
+  const check = async () => {
+    const txs: TransactionRequest[] = [
+      {
+        to: '0x0000000000000000000000000000000000000000',
+        data: encodeFunctionData({
+          abi: [
+            {
+              type: 'function',
+              name: 'foo',
+              stateMutability: 'nonpayable',
+              inputs: [],
+              outputs: []
+            }
+          ],
+          functionName: 'foo'
+        })
+      }
+    ]
+
+    const allowed = await checkPermission({ chainId: 42161, transactions: txs })
+    console.log('Allowed:', allowed)
+  }
+
+  return (
+    <div>
+      <button onClick={check}>Check permission</button>
+      {isLoading && <div>Checking...</div>}
+      {error && <div>Error: {error.message}</div>}
+      {data !== undefined && <div>Allowed: {data ? 'Yes' : 'No'}</div>}
+    </div>
+  )
+}
+```
+
+## Parameters
+
+```tsx
+type HasPermissionParams = {
+  chainId: number
+  transactions: TransactionRequest[]
+}
+```
+
+## Return Type
+
+```tsx
+type UseHasPermissionReturnType = {
+  isLoading: boolean
+  error: Error | null
+  data: boolean | undefined
+  checkPermission: (params: HasPermissionParams) => Promise<boolean>
+}
+```
+
+## Notes
+
+- This hook uses the Sequence V3 connector internally.
+- Each transaction must include a `to` address.