diff --git a/demo/nextjs-ssr-app/components/Main.tsx b/demo/nextjs-ssr-app/components/Main.tsx index 53352b0a3..29965d1be 100644 --- a/demo/nextjs-ssr-app/components/Main.tsx +++ b/demo/nextjs-ssr-app/components/Main.tsx @@ -12,7 +12,8 @@ import { useWeb3AuthDisconnect, useWeb3AuthUser, } from "@web3auth/modal/react"; -import { useAccount, useBalance, useChainId, useSignMessage, useSignTypedData, useSwitchChain } from "wagmi"; +import { useState } from "react"; +import { useAccount, useBalance, useChainId, useSendTransaction, useSignMessage, useSignTypedData, useSwitchChain } from "wagmi"; const Main = () => { const { provider, isConnected } = useWeb3Auth(); @@ -25,6 +26,7 @@ const Main = () => { const { userInfo, isMFAEnabled } = useWeb3AuthUser(); const { data: balance } = useBalance({ address }); const { signTypedData, data: signedTypedDataData } = useSignTypedData(); + const { sendTransaction, data: txHash, isPending: isSendingTx, error: sendTxError } = useSendTransaction(); const { enableMFA, loading: isEnableMFALoading, error: enableMFAError } = useEnableMFA(); const { manageMFA, loading: isManageMFALoading, error: manageMFAError } = useManageMFA(); const { showCheckout, loading: isCheckoutLoading, error: checkoutError } = useCheckout(); @@ -32,8 +34,123 @@ const Main = () => { const { showWalletUI, loading: isWalletUILoading, error: walletUIError } = useWalletUI(); const { token, loading: isUserTokenLoading, error: userTokenError, getIdentityToken } = useIdentityToken(); + // ─── EIP-7702 / EIP-5792 State ────────────────────────────────────── + const [eipResult, setEipResult] = useState(""); + const [lastBatchId, setLastBatchId] = useState(null); + const [eipLoading, setEipLoading] = useState(null); + console.log("isConnected", isConnected, balance); + // ─── EIP-7702 Handlers ────────────────────────────────────────────── + + const getAccountUpgradeStatus = async () => { + if (!provider || !address) return; + setEipLoading("upgradeStatus"); + try { + const currentChainId = "0x" + chainId.toString(16); + const result = await provider.request({ + method: "wallet_getAccountUpgradeStatus", + params: [{ account: address, chainId: currentChainId }], + }); + setEipResult(JSON.stringify(result, null, 2)); + } catch (error: any) { + setEipResult(JSON.stringify({ error: error?.message || error }, null, 2)); + } finally { + setEipLoading(null); + } + }; + + const upgradeAccount = async () => { + if (!provider || !address) return; + setEipLoading("upgrade"); + try { + const currentChainId = "0x" + chainId.toString(16); + const result = await provider.request({ + method: "wallet_upgradeAccount", + params: [{ account: address, chainId: currentChainId }], + }); + setEipResult(JSON.stringify(result, null, 2)); + } catch (error: any) { + setEipResult(JSON.stringify({ error: error?.message || error }, null, 2)); + } finally { + setEipLoading(null); + } + }; + + // ─── EIP-5792 Handlers ────────────────────────────────────────────── + + const getCapabilities = async () => { + if (!provider || !address) return; + setEipLoading("capabilities"); + try { + const currentChainId = "0x" + chainId.toString(16); + const result = await provider.request({ + method: "wallet_getCapabilities", + params: [address, [currentChainId]], + }); + setEipResult(JSON.stringify(result, null, 2)); + } catch (error: any) { + setEipResult(JSON.stringify({ error: error?.message || error }, null, 2)); + } finally { + setEipLoading(null); + } + }; + + const sendBatchCalls = async () => { + if (!provider || !address) return; + setEipLoading("sendBatch"); + try { + const currentChainId = "0x" + chainId.toString(16); + // Two simple self-transfers as a batch + const batchId = await provider.request({ + method: "wallet_sendCalls", + params: [ + { + version: "2.0", + chainId: currentChainId, + from: address, + calls: [ + { + to: address, + value: "0x0", + data: "0x", + }, + { + to: address, + value: "0x0", + data: "0x", + }, + ], + }, + ], + }); + if (batchId && typeof batchId === "string") { + setLastBatchId(batchId); + } + setEipResult(JSON.stringify({ batchId }, null, 2)); + } catch (error: any) { + setEipResult(JSON.stringify({ error: error?.message || error }, null, 2)); + } finally { + setEipLoading(null); + } + }; + + const getCallsStatus = async () => { + if (!provider || !lastBatchId) return; + setEipLoading("callsStatus"); + try { + const result = await provider.request({ + method: "wallet_getCallsStatus", + params: [lastBatchId], + }); + setEipResult(JSON.stringify(result, null, 2)); + } catch (error: any) { + setEipResult(JSON.stringify({ error: error?.message || error }, null, 2)); + } finally { + setEipLoading(null); + } + }; + const loggedInView = ( <>
@@ -177,8 +294,85 @@ const Main = () => { Sign Typed Data {signedTypedDataData &&