+
+
+ EIP-7702 Account Abstraction Demo
+
+
+
+ {/* Connection Section */}
+
+
+ Connect Your Smart Account
+
+
+ Connect with social login and get instant smart account features -
+ no wallet setup required!
+
+
+
+ {/* Display account info */}
+ {account && (
+
+
+ ✅ Smart Account Connected
+
+
+ Address: {account.address}
+
+
+ Balance: {balance?.displayValue}{" "}
+ {balance?.symbol}
+
+
+ )}
+
+
+ {account && (
+ <>
+ {/* Contract Information */}
+
+
+
+
Current Stored Value
+
+ {storeValue?.toString() || "0"}
+
+
+
+
+
+ {/* Transaction Section */}
+
+
+
+
Store
+
+ prepareContractCall({
+ contract: storageContract,
+ method: "function store(uint256 num)",
+ params: [BigInt(37)],
+ })
+ }
+ onTransactionSent={(result) => {
+ console.log("Transaction sent:", result.transactionHash);
+ setTransactionStatus(
+ "Transaction sent, waiting for confirmation..."
+ );
+ }}
+ onTransactionConfirmed={(result) => {
+ console.log(
+ "Transaction confirmed:",
+ result.transactionHash
+ );
+ setTransactionStatus(
+ `Stored successfully! TX: ${result.transactionHash}`
+ );
+ setTimeout(() => setTransactionStatus(""), 5000);
+ }}
+ onError={(error) => {
+ console.error("Transaction error:", error);
+ setTransactionStatus(`❌ Error: ${error.message}`);
+ setTimeout(() => setTransactionStatus(""), 5000);
+ }}
+ >
+ Store 37
+
+
+
+
+
+ {/* Custom Store Button */}
+
+
+
+ Custom Implementation
+
+
+
+
+
+ {/* Status Display */}
+ {transactionStatus && (
+
+
Transaction Status
+
+ {transactionStatus}
+
+
+ )}
+ >
+ )}
+