From 2e64e28b9f9ad0057dba2fcdec0c665b27db7182 Mon Sep 17 00:00:00 2001
From: jgresham <johnsgresham@gmail.com>
Date: Mon, 12 May 2025 18:58:53 -0700
Subject: [PATCH 1/2] add write contract call wrap unwrap weth

---
 .../sub-accounts-demo/src/app/page.tsx        | 84 ++++++++++++++++---
 smart-wallet/sub-accounts-demo/src/weth.ts    | 22 +++++
 2 files changed, 94 insertions(+), 12 deletions(-)
 create mode 100644 smart-wallet/sub-accounts-demo/src/weth.ts

diff --git a/smart-wallet/sub-accounts-demo/src/app/page.tsx b/smart-wallet/sub-accounts-demo/src/app/page.tsx
index f0c90111..beb699a1 100644
--- a/smart-wallet/sub-accounts-demo/src/app/page.tsx
+++ b/smart-wallet/sub-accounts-demo/src/app/page.tsx
@@ -1,19 +1,62 @@
 'use client'
-
+ 
 import { parseEther } from 'viem'
-import { useAccount, useConnect, useDisconnect, useSendTransaction, useSignMessage } from 'wagmi'
+import { useAccount, useConnect, useWriteContract, useDisconnect, useSendTransaction, useSignMessage } from 'wagmi'
+import { WETH_ADDRESS, WETH_ABI } from '../weth'
+import { useState } from 'react'
 
 function App() {
   const account = useAccount()
   const { connectors, connect, status, error } = useConnect()
   const { disconnect } = useDisconnect()
   const { sendTransactionAsync, data } = useSendTransaction()
-  const { signMessage, data: signData } = useSignMessage()
+
+  // weth data and functions
+  const [wrapAmount, setWrapAmount] = useState<string>('0')
+  const [txHash, setTxHash] = useState<string>('')
+  const { writeContractAsync: wrap, isPending: isWrapping, 
+    isSuccess: isWrapped, isError: isErrorWrapping, error: errorWrapping } = useWriteContract()
+  const { writeContractAsync: unwrap, isPending: isUnwrapping, isSuccess: isUnwrapped, 
+    isError: isErrorUnwrapping, error: errorUnwrapping } = useWriteContract()
+
+  const handleWrap = async () => {
+    if (!wrapAmount || account.status !== 'connected') return
+    
+    try {
+      const tx = await wrap({
+        address: WETH_ADDRESS as `0x${string}`,
+        abi: WETH_ABI,
+        functionName: 'deposit',
+        value: parseEther(wrapAmount)
+      })
+      setTxHash(tx)
+    } catch (error) {
+      console.error('Error wrapping ETH:', error)
+    }
+  }
+
+  const handleUnwrap = async () => {
+    if (!wrapAmount || account.status !== 'connected') return
+    
+    try {
+      const tx = await unwrap({
+        address: WETH_ADDRESS as `0x${string}`,
+        abi: WETH_ABI,
+        functionName: 'withdraw',
+        args: [parseEther(wrapAmount)]
+      })
+      setTxHash(tx)
+    } catch (error) {
+      console.error('Error unwrapping WETH:', error)
+    }
+  }
+  // end weth data and functions
+
   return (
     <>
       <div>
         <h2>Account</h2>
-
+ 
         <div>
           Status: {account.status}
           <br />
@@ -21,14 +64,14 @@ function App() {
           <br />
           ChainId: {account.chainId}
         </div>
-
+ 
         {account.status === 'connected' && (
           <button type="button" onClick={() => disconnect()}>
             Disconnect
           </button>
         )}
       </div>
-
+ 
       <div>
         <h2>Connect</h2>
         {connectors
@@ -53,18 +96,35 @@ function App() {
         </button>
         <div>{data && "Transaction sent successfully! 🎉"}</div>
         <div>{data}</div>
+      </div>
 
-        <div>Sign Message</div>
+      <div>
+        <h2>Wrap ETH to WETH and Unwrap WETH to ETH</h2>
+        <input type="number" value={wrapAmount} onChange={(e) => setWrapAmount(e.target.value)} />
         <button 
           type="button" 
-          onClick={() => signMessage({ message: 'Hello World' })}
+          onClick={handleWrap}
+          disabled={!wrapAmount || account.status !== 'connected' || isWrapping}
         >
-          Sign Message
+          {isWrapping ? 'Wrapping...' : 'Wrap'}
         </button>
-        <div>{signData}</div>
+        <button 
+          type="button" 
+          onClick={handleUnwrap}
+          disabled={!wrapAmount || account.status !== 'connected' || isUnwrapping}
+        >
+          {isUnwrapping ? 'Unwrapping...' : 'Unwrap'}
+        </button>
+        <div>{txHash && "Tx Hash: " + txHash}</div>
+        <div>{isWrapping && "Wrapping..."}</div>
+        <div>{isWrapped && "Wrapped! 🎉"}</div>
+        <div>{isErrorWrapping && "Error wrapping: " + errorWrapping?.message}</div>
+        <div>{isUnwrapping && "Unwrapping..."}</div>
+        <div>{isUnwrapped && "Unwrapped! 🎉"}</div>
+        <div>{isErrorUnwrapping && "Error unwrapping: " + errorUnwrapping?.message}</div>
       </div>
     </>
   )
 }
-
-export default App
+ 
+export default App
\ No newline at end of file
diff --git a/smart-wallet/sub-accounts-demo/src/weth.ts b/smart-wallet/sub-accounts-demo/src/weth.ts
new file mode 100644
index 00000000..9e9e3ef1
--- /dev/null
+++ b/smart-wallet/sub-accounts-demo/src/weth.ts
@@ -0,0 +1,22 @@
+
+export const WETH_ADDRESS = '0x4200000000000000000000000000000000000006'; // Base Sepolia WETH
+export const WETH_ABI = [
+  {
+    constant: false,
+    inputs: [],
+    name: 'deposit',
+    outputs: [],
+    payable: true,
+    stateMutability: 'payable',
+    type: 'function',
+  },
+  {
+    constant: false,
+    inputs: [{ name: 'wad', type: 'uint256' }],
+    name: 'withdraw',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+];
\ No newline at end of file

From 3edd1d3a93df7a44d94c0524670ebe731220dfaf Mon Sep 17 00:00:00 2001
From: jgresham <johnsgresham@gmail.com>
Date: Mon, 12 May 2025 19:32:58 -0700
Subject: [PATCH 2/2] add back sign message

---
 .../sub-accounts-demo/src/app/page.tsx        | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/smart-wallet/sub-accounts-demo/src/app/page.tsx b/smart-wallet/sub-accounts-demo/src/app/page.tsx
index beb699a1..16c6c0fd 100644
--- a/smart-wallet/sub-accounts-demo/src/app/page.tsx
+++ b/smart-wallet/sub-accounts-demo/src/app/page.tsx
@@ -1,5 +1,5 @@
 'use client'
- 
+
 import { parseEther } from 'viem'
 import { useAccount, useConnect, useWriteContract, useDisconnect, useSendTransaction, useSignMessage } from 'wagmi'
 import { WETH_ADDRESS, WETH_ABI } from '../weth'
@@ -10,6 +10,7 @@ function App() {
   const { connectors, connect, status, error } = useConnect()
   const { disconnect } = useDisconnect()
   const { sendTransactionAsync, data } = useSendTransaction()
+  const { signMessage, data: signData } = useSignMessage()
 
   // weth data and functions
   const [wrapAmount, setWrapAmount] = useState<string>('0')
@@ -56,7 +57,7 @@ function App() {
     <>
       <div>
         <h2>Account</h2>
- 
+
         <div>
           Status: {account.status}
           <br />
@@ -64,14 +65,14 @@ function App() {
           <br />
           ChainId: {account.chainId}
         </div>
- 
+
         {account.status === 'connected' && (
           <button type="button" onClick={() => disconnect()}>
             Disconnect
           </button>
         )}
       </div>
- 
+
       <div>
         <h2>Connect</h2>
         {connectors
@@ -96,6 +97,15 @@ function App() {
         </button>
         <div>{data && "Transaction sent successfully! 🎉"}</div>
         <div>{data}</div>
+
+        <div>Sign Message</div>
+        <button 
+          type="button" 
+          onClick={() => signMessage({ message: 'Hello World' })}
+        >
+          Sign Message
+        </button>
+        <div>{signData}</div>
       </div>
 
       <div>
@@ -115,7 +125,7 @@ function App() {
         >
           {isUnwrapping ? 'Unwrapping...' : 'Unwrap'}
         </button>
-        <div>{txHash && "Tx Hash: " + txHash}</div>
+        <div>{txHash && "Wrap tx Hash: " + txHash}</div>
         <div>{isWrapping && "Wrapping..."}</div>
         <div>{isWrapped && "Wrapped! 🎉"}</div>
         <div>{isErrorWrapping && "Error wrapping: " + errorWrapping?.message}</div>
@@ -126,5 +136,5 @@ function App() {
     </>
   )
 }
- 
+
 export default App
\ No newline at end of file