feat: eip-7702 ui demo (#1302)

* feat: 7702 ui demo

feat: update 7702 mint flow to actually use 7702

feat: partial recurring transfer support

feat: ui progress

feat: react state management

feat: add permission hooks to session key

fix: add templates to demo build

fix: declare env var in turbo

feat: ui demo user card reflects 7702 delegation status (#1294)

* feat: have user avatar reflect if account has been delegated

* feat: reflects delegation status in user details card

* fix: forces delegation status query to refetch until available

* chore: updates comment

* refactor: uses viem public client and refetches delegation addr when nftTransferred status changes

* refactor: uses defined url constant

* chore: removes unnecessary check

fix: coalesce undefined code result

fix: forces delegation query to refetch until available

feat: updated 7702 info blurb

chore: cleanup

* fix: 7702 styling - lofi

* fix: move 7702 out of shared

* feat: responsive - 7702 - ui demo branch (#1318)

* feat: responsive transaction card

* feat: responsive cards

* fix: 7702 client loading state (#1319)

* feat: update copy

* feat: use the new unified mav2 client

* fix: switch type to mode in sma7702 client hook

* feat: mav2 with small cards in ui demo (#1346)

* feat: mav2 in ui demo

* chore: move files back

* chore: rename MAv2 client hook

* feat: update link and copy

---------

Co-authored-by: rob chang <[email protected]>
Co-authored-by: Rob <[email protected]>
Co-authored-by: jakehobbs <[email protected]>

.eslintignore

@@ -6,6 +6,7 @@ site/.vitepress/cache/**/*
 
 /examples/*
 !/examples/ui-demo
+/examples/ui-demo/contracts
 /examples/ui-demo/.next/*
 
 **/.turbo/*

.gitmodules

@@ -19,3 +19,9 @@
 [submodule "examples/embedded-accounts-quickstart"]
 	path = examples/embedded-accounts-quickstart
 	url = https://github.com/alchemyplatform/embedded-accounts-quickstart
+[submodule "examples/ui-demo/contracts/lib/openzeppelin-contracts"]
+	path = examples/ui-demo/contracts/lib/openzeppelin-contracts
+	url = https://github.com/OpenZeppelin/openzeppelin-contracts
+[submodule "examples/ui-demo/contracts/lib/forge-std"]
+	path = examples/ui-demo/contracts/lib/forge-std
+	url = https://github.com/foundry-rs/forge-std

account-kit/smart-contracts/src/ma-v2/modules/allowlist-module/module.ts

@@ -1,8 +1,37 @@
 import { encodeAbiParameters, type Address, type Hex } from "viem";
 import { allowlistModuleAbi } from "./abis/allowlistModuleAbi.js";
+import { HookType, type HookConfig } from "../../actions/common/types.js";
 
 export const AllowlistModule = {
   abi: allowlistModuleAbi,
+  buildHook: (
+    installArgs: {
+      entityId: number;
+      inputs: Array<{
+        target: Address;
+        hasSelectorAllowlist: boolean;
+        hasERC20SpendLimit: boolean;
+        erc20SpendLimit: bigint;
+        selectors: Array<Hex>;
+      }>;
+    },
+    address: Address
+  ): {
+    hookConfig: HookConfig;
+    initData: Hex;
+  } => {
+    const installData = AllowlistModule.encodeOnInstallData(installArgs);
+    return {
+      hookConfig: {
+        address: address,
+        entityId: installArgs.entityId,
+        hookType: HookType.VALIDATION,
+        hasPreHooks: true,
+        hasPostHooks: false,
+      },
+      initData: installData,
+    };
+  },
   encodeOnInstallData: (args: {
     entityId: number;
     inputs: Array<{

account-kit/smart-contracts/src/ma-v2/modules/time-range-module/module.ts

@@ -1,9 +1,42 @@
-import { encodeAbiParameters, type Hex } from "viem";
+import { encodeAbiParameters, type Address, type Hex } from "viem";
 
 import { timeRangeModuleAbi } from "./abis/timeRangeModuleAbi.js";
+import { HookType, type HookConfig } from "../../actions/common/types.js";
 
 export const TimeRangeModule = {
   abi: timeRangeModuleAbi,
+  buildHook: (
+    installArgs: {
+      entityId: number;
+      validUntil: number;
+      validAfter: number;
+    },
+    address: Address
+  ): { hookConfig: HookConfig; initData: Hex } => {
+    if (installArgs.validUntil > 2 ** 48 - 1) {
+      throw new Error(
+        "TimeRangeModule.buildHook: validUntil > type(uint48).max"
+      );
+    }
+
+    if (installArgs.validAfter > 2 ** 48 - 1) {
+      throw new Error(
+        "TimeRangeModule.buildHook: validAfter > type(uint48).max"
+      );
+    }
+
+    const installData = TimeRangeModule.encodeOnInstallData(installArgs);
+    return {
+      hookConfig: {
+        address: address,
+        entityId: installArgs.entityId,
+        hookType: HookType.VALIDATION,
+        hasPreHooks: false,
+        hasPostHooks: false,
+      },
+      initData: installData,
+    };
+  },
   encodeOnInstallData: (args: {
     entityId: number;
     validUntil: number;

examples/ui-demo/contracts/.gitignore

@@ -0,0 +1,23 @@
+# Foundry build and cache directories
+out/
+out-optimized/
+cache/
+node_modules/
+
+# Coverage
+report/
+lcov.info
+
+# env vars
+.env
+
+# deployments
+broadcast/**/run-latest.json
+broadcast/**/dry-run/**/*
+
+# misc
+.DS_Store
+**/.DS_Store
+
+# Monorepo support: unhide lib/
+!lib/

examples/ui-demo/contracts/Deployments.md

@@ -0,0 +1,11 @@
+## Mock Swap Venue
+
+Salt: 0
+
+Swap: 0xB0AEC4c25E8332256A91bBaf169E3C32dfC3C33C
+DemoUSDC: 0xCFf7C6dA719408113DFcb5e36182c6d5aa491443
+DemoWETH: 0x0766798566D1f6e2f0b126f7783aaB2CBb81c66f
+
+## AccountKit Demo NFT
+
+0x7E06a337929B1Cb92363e15414e37959a36E5338

examples/ui-demo/contracts/README.md

@@ -0,0 +1,66 @@
+## Foundry
+
+**Foundry is a blazing fast, portable and modular toolkit for Ethereum application development written in Rust.**
+
+Foundry consists of:
+
+-   **Forge**: Ethereum testing framework (like Truffle, Hardhat and DappTools).
+-   **Cast**: Swiss army knife for interacting with EVM smart contracts, sending transactions and getting chain data.
+-   **Anvil**: Local Ethereum node, akin to Ganache, Hardhat Network.
+-   **Chisel**: Fast, utilitarian, and verbose solidity REPL.
+
+## Documentation
+
+https://book.getfoundry.sh/
+
+## Usage
+
+### Build
+
+```shell
+$ forge build
+```
+
+### Test
+
+```shell
+$ forge test
+```
+
+### Format
+
+```shell
+$ forge fmt
+```
+
+### Gas Snapshots
+
+```shell
+$ forge snapshot
+```
+
+### Anvil
+
+```shell
+$ anvil
+```
+
+### Deploy
+
+```shell
+$ forge script script/Counter.s.sol:CounterScript --rpc-url <your_rpc_url> --private-key <your_private_key>
+```
+
+### Cast
+
+```shell
+$ cast <subcommand>
+```
+
+### Help
+
+```shell
+$ forge --help
+$ anvil --help
+$ cast --help
+```

examples/ui-demo/contracts/broadcast/DeployNFT.s.sol/911867/run-1736807829.json

@@ -0,0 +1,57 @@
+{
+  "transactions": [
+    {
+      "hash": "0x02ae4a484c89989ca992c8024646256c2e37a21bb1d9aab9235fd9a4ae0b92d6",
+      "transactionType": "CREATE2",
+      "contractName": "NFT",
+      "contractAddress": "0x7e06a337929b1cb92363e15414e37959a36e5338",
+      "function": null,
+      "arguments": [
+        "Account Kit Demo NFT",
+        "AKD",
+        "https://static.alchemyapi.io/assets/accountkit/accountkit.jpg"
+      ],
+      "transaction": {
+        "from": "0xddf32240b4ca3184de7ec8f0d5aba27dec8b7a5c",
+        "to": "0x4e59b44847b379578588920ca78fbf26c0b4956c",
+        "gas": "0x15dc14",
+        "value": "0x0",
+        "input": "0x0000000000000000000000000000000000000000000000000000000000000000608060405234801561000f575f80fd5b5060405161124b38038061124b83398101604081905261002e916100ff565b82825f61003b8382610212565b5060016100488282610212565b506006915061005990508282610212565b505050506102cc565b634e487b7160e01b5f52604160045260245ffd5b5f82601f830112610085575f80fd5b81516001600160401b0381111561009e5761009e610062565b604051601f8201601f19908116603f011681016001600160401b03811182821017156100cc576100cc610062565b6040528181528382016020018510156100e3575f80fd5b8160208501602083015e5f918101602001919091529392505050565b5f805f60608486031215610111575f80fd5b83516001600160401b03811115610126575f80fd5b61013286828701610076565b602086015190945090506001600160401b0381111561014f575f80fd5b61015b86828701610076565b604086015190935090506001600160401b03811115610178575f80fd5b61018486828701610076565b9150509250925092565b600181811c908216806101a257607f821691505b6020821081036101c057634e487b7160e01b5f52602260045260245ffd5b50919050565b601f82111561020d57805f5260205f20601f840160051c810160208510156101eb5750805b601f840160051c820191505b8181101561020a575f81556001016101f7565b50505b505050565b81516001600160401b0381111561022b5761022b610062565b61023f81610239845461018e565b846101c6565b6020601f821160018114610271575f831561025a5750848201515b5f19600385901b1c1916600184901b17845561020a565b5f84815260208120601f198516915b828110156102a05787850151825560209485019460019092019101610280565b50848210156102bd57868401515f19600387901b60f8161c191681555b50505050600190811b01905550565b610f72806102d95f395ff3fe6080604052600436106100ee575f3560e01c80636c0360eb11610087578063a22cb46511610057578063a22cb46514610279578063b88d4fde14610298578063c87b56dd146102b7578063e985e9c5146102d6575f80fd5b80636c0360eb1461021f57806370a0823114610233578063755edd171461025257806395d89b4114610265575f80fd5b8063095ea7b3116100c2578063095ea7b3146101a157806323b872dd146101c257806342842e0e146101e15780636352211e14610200575f80fd5b80629a9b7b146100f257806301ffc9a71461011a57806306fdde0314610149578063081812fc1461016a575b5f80fd5b3480156100fd575f80fd5b5061010760075481565b6040519081526020015b60405180910390f35b348015610125575f80fd5b50610139610134366004610c48565b6102f5565b6040519015158152602001610111565b348015610154575f80fd5b5061015d610346565b6040516101119190610c98565b348015610175575f80fd5b50610189610184366004610caa565b6103d5565b6040516001600160a01b039091168152602001610111565b3480156101ac575f80fd5b506101c06101bb366004610cdc565b6103fc565b005b3480156101cd575f80fd5b506101c06101dc366004610d04565b61040b565b3480156101ec575f80fd5b506101c06101fb366004610d04565b610499565b34801561020b575f80fd5b5061018961021a366004610caa565b6104b8565b34801561022a575f80fd5b5061015d6104c2565b34801561023e575f80fd5b5061010761024d366004610d3e565b61054e565b610107610260366004610d3e565b610593565b348015610270575f80fd5b5061015d6105b4565b348015610284575f80fd5b506101c0610293366004610d57565b6105c3565b3480156102a3575f80fd5b506101c06102b2366004610da4565b6105ce565b3480156102c2575f80fd5b5061015d6102d1366004610caa565b6105e6565b3480156102e1575f80fd5b506101396102f0366004610e81565b6106a9565b5f6001600160e01b031982166380ac58cd60e01b148061032557506001600160e01b03198216635b5e139f60e01b145b8061034057506301ffc9a760e01b6001600160e01b03198316145b92915050565b60605f805461035490610eb2565b80601f016020809104026020016040519081016040528092919081815260200182805461038090610eb2565b80156103cb5780601f106103a2576101008083540402835291602001916103cb565b820191905f5260205f20905b8154815290600101906020018083116103ae57829003601f168201915b5050505050905090565b5f6103df826106d6565b505f828152600460205260409020546001600160a01b0316610340565b61040782823361070e565b5050565b6001600160a01b03821661043957604051633250574960e11b81525f60048201526024015b60405180910390fd5b5f61044583833361071b565b9050836001600160a01b0316816001600160a01b031614610493576040516364283d7b60e01b81526001600160a01b0380861660048301526024820184905282166044820152606401610430565b50505050565b6104b383838360405180602001604052805f8152506105ce565b505050565b5f610340826106d6565b600680546104cf90610eb2565b80601f01602080910402602001604051908101604052809291908181526020018280546104fb90610eb2565b80156105465780601f1061051d57610100808354040283529160200191610546565b820191905f5260205f20905b81548152906001019060200180831161052957829003601f168201915b505050505081565b5f6001600160a01b038216610578576040516322718ad960e21b81525f6004820152602401610430565b506001600160a01b03165f9081526003602052604090205490565b5f8060075f81546105a390610eea565b91829055509050610340838261080d565b60606001805461035490610eb2565b610407338383610826565b6105d984848461040b565b61049333858585856108c4565b60605f6105f2836104b8565b6001600160a01b0316036106195760405163d872946b60e01b815260040160405180910390fd5b6006805461062690610eb2565b80601f016020809104026020016040519081016040528092919081815260200182805461065290610eb2565b801561069d5780601f106106745761010080835404028352916020019161069d565b820191905f5260205f20905b81548152906001019060200180831161068057829003601f168201915b50505050509050919050565b6001600160a01b039182165f90815260056020908152604080832093909416825291909152205460ff1690565b5f818152600260205260408120546001600160a01b03168061034057604051637e27328960e01b815260048101849052602401610430565b6104b383838360016109ec565b5f828152600260205260408120546001600160a01b039081169083161561074757610747818486610af0565b6001600160a01b03811615610781576107625f855f806109ec565b6001600160a01b0381165f90815260036020526040902080545f190190555b6001600160a01b038516156107af576001600160a01b0385165f908152600360205260409020805460010190555b5f8481526002602052604080822080546001600160a01b0319166001600160a01b0389811691821790925591518793918516917fddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef91a4949350505050565b610407828260405180602001604052805f815250610b54565b6001600160a01b03821661085857604051630b61174360e31b81526001600160a01b0383166004820152602401610430565b6001600160a01b038381165f81815260056020908152604080832094871680845294825291829020805460ff191686151590811790915591519182527f17307eab39ab6107e8899845ad3d59bd9653f200f220920489ca2b5937696c31910160405180910390a3505050565b6001600160a01b0383163b156109e557604051630a85bd0160e11b81526001600160a01b0384169063150b7a0290610906908890889087908790600401610f0e565b6020604051808303815f875af1925050508015610940575060408051601f3d908101601f1916820190925261093d91810190610f4a565b60015b6109a7573d80801561096d576040519150601f19603f3d011682016040523d82523d5f602084013e610972565b606091505b5080515f0361099f57604051633250574960e11b81526001600160a01b0385166004820152602401610430565b805181602001fd5b6001600160e01b03198116630a85bd0160e11b146109e357604051633250574960e11b81526001600160a01b0385166004820152602401610430565b505b5050505050565b8080610a0057506001600160a01b03821615155b15610ac1575f610a0f846106d6565b90506001600160a01b03831615801590610a3b5750826001600160a01b0316816001600160a01b031614155b8015610a4e5750610a4c81846106a9565b155b15610a775760405163a9fbf51f60e01b81526001600160a01b0384166004820152602401610430565b8115610abf5783856001600160a01b0316826001600160a01b03167f8c5be1e5ebec7d5bd14f71427d1e84f3dd0314c0f7b2291e5b200ac8c7c3b92560405160405180910390a45b505b50505f90815260046020526040902080546001600160a01b0319166001600160a01b0392909216919091179055565b610afb838383610b6b565b6104b3576001600160a01b038316610b2957604051637e27328960e01b815260048101829052602401610430565b60405163177e802f60e01b81526001600160a01b038316600482015260248101829052604401610430565b610b5e8383610bcf565b6104b3335f8585856108c4565b5f6001600160a01b03831615801590610bc75750826001600160a01b0316846001600160a01b03161480610ba45750610ba484846106a9565b80610bc757505f828152600460205260409020546001600160a01b038481169116145b949350505050565b6001600160a01b038216610bf857604051633250574960e11b81525f6004820152602401610430565b5f610c0483835f61071b565b90506001600160a01b038116156104b3576040516339e3563760e11b81525f6004820152602401610430565b6001600160e01b031981168114610c45575f80fd5b50565b5f60208284031215610c58575f80fd5b8135610c6381610c30565b9392505050565b5f81518084528060208401602086015e5f602082860101526020601f19601f83011685010191505092915050565b602081525f610c636020830184610c6a565b5f60208284031215610cba575f80fd5b5035919050565b80356001600160a01b0381168114610cd7575f80fd5b919050565b5f8060408385031215610ced575f80fd5b610cf683610cc1565b946020939093013593505050565b5f805f60608486031215610d16575f80fd5b610d1f84610cc1565b9250610d2d60208501610cc1565b929592945050506040919091013590565b5f60208284031215610d4e575f80fd5b610c6382610cc1565b5f8060408385031215610d68575f80fd5b610d7183610cc1565b915060208301358015158114610d85575f80fd5b809150509250929050565b634e487b7160e01b5f52604160045260245ffd5b5f805f8060808587031215610db7575f80fd5b610dc085610cc1565b9350610dce60208601610cc1565b925060408501359150606085013567ffffffffffffffff811115610df0575f80fd5b8501601f81018713610e00575f80fd5b803567ffffffffffffffff811115610e1a57610e1a610d90565b604051601f8201601f19908116603f0116810167ffffffffffffffff81118282101715610e4957610e49610d90565b604052818152828201602001891015610e60575f80fd5b816020840160208301375f6020838301015280935050505092959194509250565b5f8060408385031215610e92575f80fd5b610e9b83610cc1565b9150610ea960208401610cc1565b90509250929050565b600181811c90821680610ec657607f821691505b602082108103610ee457634e487b7160e01b5f52602260045260245ffd5b50919050565b5f60018201610f0757634e487b7160e01b5f52601160045260245ffd5b5060010190565b6001600160a01b03858116825284166020820152604081018390526080606082018190525f90610f4090830184610c6a565b9695505050505050565b5f60208284031215610f5a575f80fd5b8151610c6381610c3056fea164736f6c634300081a000a000000000000000000000000000000000000000000000000000000000000006000000000000000000000000000000000000000000000000000000000000000a000000000000000000000000000000000000000000000000000000000000000e000000000000000000000000000000000000000000000000000000000000000144163636f756e74204b69742044656d6f204e46540000000000000000000000000000000000000000000000000000000000000000000000000000000000000003414b440000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000003d68747470733a2f2f7374617469632e616c6368656d796170692e696f2f6173736574732f6163636f756e746b69742f6163636f756e746b69742e6a7067000000",
+        "nonce": "0x24",
+        "chainId": "0xde9fb"
+      },
+      "additionalContracts": [],
+      "isFixedGasLimit": false
+    }
+  ],
+  "receipts": [
+    {
+      "status": "0x1",
+      "cumulativeGasUsed": "0x107eb8",
+      "logs": [],
+      "logsBloom": "0x00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000",
+      "type": "0x2",
+      "transactionHash": "0x02ae4a484c89989ca992c8024646256c2e37a21bb1d9aab9235fd9a4ae0b92d6",
+      "transactionIndex": "0x1",
+      "blockHash": "0x9e4144012ac3be4cda0949deacd9f4e7ec834e7aa7f1b6353e72ae36054aeff4",
+      "blockNumber": "0x7d5534",
+      "gasUsed": "0xfd376",
+      "effectiveGasPrice": "0xfd",
+      "from": "0xddf32240b4ca3184de7ec8f0d5aba27dec8b7a5c",
+      "to": "0x4e59b44847b379578588920ca78fbf26c0b4956c",
+      "contractAddress": "0x7e06a337929b1cb92363e15414e37959a36e5338",
+      "l1BaseFeeScalar": "0xa6fe0",
+      "l1BlobBaseFee": "0x337",
+      "l1BlobBaseFeeScalar": "0x0",
+      "l1Fee": "0x27ae655b4d4",
+      "l1GasPrice": "0x5366709",
+      "l1GasUsed": "0xb213"
+    }
+  ],
+  "libraries": [],
+  "pending": [],
+  "returns": {},
+  "timestamp": 1736807829,
+  "chain": 911867,
+  "commit": "42e6bae6"
+}