Welcome to
- Scaffold-Alchemy
+ ID-Ephyrian (w/ Alchemy)
{isConnected ? (
diff --git a/packages/nextjs/components/scaffold-alchemy/ConnectButton/AddressInfoDropdown.tsx b/packages/nextjs/components/scaffold-alchemy/ConnectButton/AddressInfoDropdown.tsx
index 34ffe9b..1a9088d 100644
--- a/packages/nextjs/components/scaffold-alchemy/ConnectButton/AddressInfoDropdown.tsx
+++ b/packages/nextjs/components/scaffold-alchemy/ConnectButton/AddressInfoDropdown.tsx
@@ -116,9 +116,9 @@ export const AddressInfoDropdown = ({
- {accountType === "EOA" && "Upgrade to SCA"}
- {accountType === "EOA_7702" && "Already a 7702 + EOA"}
- {accountType === "SCA_4337" && "Already a 4337 - SCA"}
+ {accountType === "EOA" && "Upgrade to a Smart Wallet"}
+ {accountType === "EOA_7702" && "This is a Smart Wallet"}
+ {accountType === "SCA_4337" && "This is a Smart Account"}
{accountType === "UNKNOWN" && "Detecting account type..."}
From e8554c828561acce67179287604d9b97f02f5558 Mon Sep 17 00:00:00 2001
From: Ephyrian <150686927+UMainLove@users.noreply.github.com>
Date: Tue, 1 Jul 2025 13:43:06 +0200
Subject: [PATCH 06/11] feature: Added account upgrade (eip7702) functionality
using external wallets
---
package.json | 12 +-
packages/hardhat/package.json | 6 +-
.../ConnectButton/AddressInfoDropdown.tsx | 165 +++++-
.../nextjs/hooks/scaffold-alchemy/index.ts | 1 +
.../hooks/scaffold-alchemy/useAccountType.ts | 40 +-
.../hooks/scaffold-alchemy/useClient.ts | 2 +-
.../hooks/scaffold-alchemy/useEOAUpgrade.ts | 475 ++++++++++++++++++
packages/nextjs/package.json | 4 +-
.../nextjs/utils/scaffold-alchemy/index.ts | 1 +
yarn.lock | 467 +++++++++++++----
10 files changed, 1049 insertions(+), 124 deletions(-)
create mode 100644 packages/nextjs/hooks/scaffold-alchemy/useEOAUpgrade.ts
diff --git a/package.json b/package.json
index cf88379..04d04f8 100644
--- a/package.json
+++ b/package.json
@@ -48,15 +48,17 @@
},
"packageManager": "yarn@3.2.3",
"dependencies": {
- "@aa-sdk/core": "^4.24.0",
- "@account-kit/infra": "^4.24.0",
- "@account-kit/plugingen": "4.24.0",
- "@account-kit/smart-contracts": "^4.24.0",
+ "@aa-sdk/core": "^4.31.0",
+ "@account-kit/infra": "^4.31.0",
+ "@account-kit/plugingen": "4.31.0",
+ "@account-kit/smart-contracts": "^4.31.0",
+ "@account-kit/wallet-client": "0.1.0-alpha.9",
"viem": "2.28.4"
},
"devDependencies": {
"husky": "^9.1.6",
- "lint-staged": "^15.2.10"
+ "lint-staged": "^15.2.10",
+ "typescript": "^5.8.3"
},
"engines": {
"node": ">=18.18.0"
diff --git a/packages/hardhat/package.json b/packages/hardhat/package.json
index 389fcbc..070b267 100644
--- a/packages/hardhat/package.json
+++ b/packages/hardhat/package.json
@@ -46,9 +46,9 @@
"typescript": "<5.6.0"
},
"dependencies": {
- "@aa-sdk/core": "^4.12.0",
- "@account-kit/infra": "^4.12.0",
- "@account-kit/smart-contracts": "^4.12.0",
+ "@aa-sdk/core": "^4.31.0",
+ "@account-kit/infra": "^4.31.0",
+ "@account-kit/smart-contracts": "^4.31.0",
"@inquirer/password": "^4.0.2",
"@openzeppelin/contracts": "^5.0.2",
"@scaffold-alchemy/shared": "workspace:*",
diff --git a/packages/nextjs/components/scaffold-alchemy/ConnectButton/AddressInfoDropdown.tsx b/packages/nextjs/components/scaffold-alchemy/ConnectButton/AddressInfoDropdown.tsx
index 1a9088d..02f5fab 100644
--- a/packages/nextjs/components/scaffold-alchemy/ConnectButton/AddressInfoDropdown.tsx
+++ b/packages/nextjs/components/scaffold-alchemy/ConnectButton/AddressInfoDropdown.tsx
@@ -1,6 +1,5 @@
/* eslint-disable prettier/prettier */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { useRef, useState } from "react";
+import { useRef, useState } from "react";
import { NetworkOptions } from "./NetworkOptions";
import { useLogout } from "@account-kit/react";
import CopyToClipboard from "react-copy-to-clipboard";
@@ -15,10 +14,12 @@ import {
DocumentDuplicateIcon,
QrCodeIcon,
ShieldCheckIcon, //feature_1
+ ExclamationTriangleIcon, // feature_1_part_2
} from "@heroicons/react/24/outline";
import { BlockieAvatar, isENS } from "~~/components/scaffold-alchemy";
-import { useOutsideClick, useAccountType } from "~~/hooks/scaffold-alchemy"; // 'useAccountType' is feature_1
+import { useOutsideClick, useAccountType, useEOAUpgrade } from "~~/hooks/scaffold-alchemy"; // 'useAccountType' is feature_1 AND 'useEOAUpgrade' is feature_1_part_2
import { getTargetNetworks } from "~~/utils/scaffold-alchemy";
+import { EIP7702_CONFIG } from "~~/utils/scaffold-alchemy/eip7702.config"; // feature_1_part_2
const allowedNetworks = getTargetNetworks();
@@ -38,8 +39,18 @@ export const AddressInfoDropdown = ({
const checkSumAddress = getAddress(address);
const { logout } = useLogout();
const { accountType } = useAccountType(); //Feature_1
+ const {
+ upgradeWithPrivateKey,
+ status: upgradeStatus,
+ isEIP7702Supported,
+ isMetaMaskConnected,
+ reset: resetUpgrade
+ } = useEOAUpgrade(); // feature_1_part_2
const [addressCopied, setAddressCopied] = useState(false);
+ const [showPrivateKeyModal, setShowPrivateKeyModal] = useState(false); // feature_1_part_2
+ const [privateKey, setPrivateKey] = useState(""); // feature_1_part_2
+ const [showPrivateKey, setShowPrivateKey] = useState(false); // feature_1_part_2
const [selectingNetwork, setSelectingNetwork] = useState(false);
const dropdownRef = useRef
(null);
@@ -49,6 +60,49 @@ export const AddressInfoDropdown = ({
};
useOutsideClick(dropdownRef, closeDropdown);
+ // feature_1_part_2: EIP-7702 Upgrade Button block start -----------------
+
+ // Determine if upgrade button should be shown and enabled
+ const showUpgradeButton = accountType === "EOA" && isMetaMaskConnected;
+ const isUpgradeEnabled = showUpgradeButton && isEIP7702Supported;
+ const isUpgrading = upgradeStatus === "upgrading";
+
+ // Get the appropriate message for the account status
+ const getAccountStatusMessage = () => {
+ if (isUpgrading) return "Upgrading...";
+ if (accountType === "EOA" && isMetaMaskConnected) return EIP7702_CONFIG.messages.UPGRADE_BUTTON;
+ if (accountType === "EOA_7702") return EIP7702_CONFIG.messages.UPGRADED_EOA;
+ if (accountType === "SCA_4337") return EIP7702_CONFIG.messages.SMART_ACCOUNT;
+ if (accountType === "UNKNOWN") return EIP7702_CONFIG.messages.DETECTING;
+ return "This is an EOA";
+ };
+
+ const handleUpgradeClick = async () => {
+ if (isUpgradeEnabled && !isUpgrading) {
+ closeDropdown();
+
+ // Since MetaMask doesn't support EIP-7702 yet, show private key modal directly
+ setShowPrivateKeyModal(true);
+ }
+ };
+
+ const handlePrivateKeyUpgrade = async () => {
+ if (!privateKey) return;
+
+ try {
+ // Reset the error state before attempting private key upgrade
+ resetUpgrade();
+ await upgradeWithPrivateKey(privateKey);
+ setShowPrivateKeyModal(false);
+ setPrivateKey(""); // Clear private key from memory
+ } catch (error) {
+ console.error("Private key upgrade failed:", error);
+ // Keep the modal open on error
+ }
+ };
+
+ // feature_1_part_2: EIP-7702 Upgrade Button block end -------------------
+
return (
<>
@@ -113,15 +167,31 @@ export const AddressInfoDropdown = ({
-
-
-
- {accountType === "EOA" && "Upgrade to a Smart Wallet"}
- {accountType === "EOA_7702" && "This is a Smart Wallet"}
- {accountType === "SCA_4337" && "This is a Smart Account"}
- {accountType === "UNKNOWN" && "Detecting account type..."}
-
-
+ {showUpgradeButton ? (
+
+ ) : (
+
+
+
+ {getAccountStatusMessage()}
+
+
+ )}
{allowedNetworks.length > 1 ? (
@@ -147,6 +217,75 @@ export const AddressInfoDropdown = ({
+
+ {/* Private Key Modal */}
+ {showPrivateKeyModal && (
+
+
+
+
+ EIP-7702 Upgrade with Private Key
+
+
+
+
+
+
Security Warning
+
+ {"MetaMask doesn't support EIP-7702 yet. You can upgrade using your private key, but this is risky. Never share your private key with anyone!"}
+
+
+
+
+
+
+
+ setPrivateKey(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
{
+ setShowPrivateKeyModal(false);
+ setPrivateKey("");
+ setShowPrivateKey(false);
+ }}>
+
diff --git a/packages/nextjs/hooks/scaffold-alchemy/useAccountType.ts b/packages/nextjs/hooks/scaffold-alchemy/useAccountType.ts
index fe920d0..162421f 100644
--- a/packages/nextjs/hooks/scaffold-alchemy/useAccountType.ts
+++ b/packages/nextjs/hooks/scaffold-alchemy/useAccountType.ts
@@ -30,67 +30,6 @@ export const useAccountType = () => {
connectorType: connector?.type,
connectorName: connector?.name,
});
-/*
- // Check if there's bytecode at the address (indicates smart account) - feature_1_part_2
- let hasCode = false;
- if (address && publicClient) {
- try {
- const code = await publicClient.getCode({
- address: address as `0x${string}`,
- blockTag: 'latest'
- });
- hasCode = code !== undefined && code !== "0x";
- console.log("[useAccountType] Bytecode check:", { address, hasCode });
- } catch (error) {
- console.error("[useAccountType] Error checking bytecode:", error);
- }
- }
-
- // If we have a client and address, check if it's from external wallet or not
- if (client && address) {
- // Check if connected via external wallet
- const isExternalWallet =
- connector?.type === "injected" ||
- connector?.type === "walletConnect" ||
- connector?.name?.toLowerCase().includes("wallet") ||
- connector?.name?.toLowerCase().includes("metamask");
-
- //added extended logic for feature_1_part_2
- if (isExternalWallet && hasCode) {
- // External wallet with code at address = likely 7702 upgraded
- setAccountType("EOA_7702");
- } else if (isExternalWallet) {
- // External wallet without code = regular EOA
- setAccountType("EOA");
- } else {
- // Has SCA but no external wallet = email/social login
- setAccountType("SCA_4337");
- }
- } else if (isConnected && !client) {
- // Connected with external wallet but no SCA client
- if (hasCode) {
- // Has code but no SCA client = 7702 upgraded EOA
- setAccountType("EOA_7702");
- } else {
- setAccountType("EOA");
- }
- } else if (!isConnected && address) {
- // Has address but not connected via wagmi = likely email/social
- setAccountType("SCA_4337");
- } else {
- setAccountType("UNKNOWN");
- }
- } catch (error) {
- console.error("Error detecting account type:", error);
- setAccountType("UNKNOWN");
- } finally {
- setIsLoading(false);
- }
- };
-
- detectAccountType();
- }, [isConnected, connector, client, address, publicClient, targetNetwork]);
-*/
// If useClient already detected a Smart Wallet, use that
if (isSmartWallet) {
setAccountType("EOA_7702");
diff --git a/packages/nextjs/hooks/scaffold-alchemy/useClient.ts b/packages/nextjs/hooks/scaffold-alchemy/useClient.ts
index 088c587..fb9ec00 100644
--- a/packages/nextjs/hooks/scaffold-alchemy/useClient.ts
+++ b/packages/nextjs/hooks/scaffold-alchemy/useClient.ts
@@ -12,17 +12,6 @@ export const useClient = (
type: "MultiOwnerModularAccount",
},
) => {
-
- /*
- const { client, address } = useSmartAccountClient(config);
- const alchemy = new Alchemy({
- url: client?.transport.alchemyRpcUrl,
- network: RPC_CHAIN_NAMES[scaffoldConfig.targetNetworks[0].id] as Network,
- });
- const enhancedApiDecorator = alchemyEnhancedApiActions(alchemy);
- return { client: client?.extend(enhancedApiDecorator as any), origClient: client, address };
-};
-*/
// Get Smart Account client (for social login users)
const { client: smartAccountClient, address: smartAccountAddress } = useSmartAccountClient(config);
diff --git a/packages/nextjs/hooks/scaffold-alchemy/useScaffoldWriteContract.ts b/packages/nextjs/hooks/scaffold-alchemy/useScaffoldWriteContract.ts
index 7c8f81b..6605c41 100644
--- a/packages/nextjs/hooks/scaffold-alchemy/useScaffoldWriteContract.ts
+++ b/packages/nextjs/hooks/scaffold-alchemy/useScaffoldWriteContract.ts
@@ -1,8 +1,10 @@
+/* eslint-disable prettier/prettier */
+
import { useEffect, useState } from "react";
import { useClient } from "./useClient";
import { useSendUserOperation } from "@account-kit/react";
import { ExtractAbiFunctionNames } from "abitype";
-import { Abi, EncodeFunctionDataParameters, WriteContractReturnType, encodeFunctionData } from "viem";
+import { Abi, EncodeFunctionDataParameters, WriteContractReturnType, encodeFunctionData, Hex } from "viem"; // Hex is part of feature_1_part_3
import { UseWriteContractParameters, useWriteContract } from "wagmi";
import { useSelectedNetwork } from "~~/hooks/scaffold-alchemy";
import { useDeployedContractInfo, useTransactor } from "~~/hooks/scaffold-alchemy";
@@ -70,6 +72,7 @@ export function useScaffoldWriteContract
(
const writeTx = useTransactor();
const [isMining, setIsMining] = useState(false);
+ const [isSmartWalletMining, setIsSmartWalletMining] = useState(false); //feature_1_part_3
const wagmiContractWrite = useWriteContract(finalWriteContractParams);
@@ -80,10 +83,12 @@ export function useScaffoldWriteContract(
chainId: selectedNetwork.id as AllowedChainIds,
});
- const { client } = useClient();
+ const { client, isSmartWallet } = useClient(); // isSmartWallet is part of feature_1_part_3
+ // Only use useSendUserOperation for Smart Accounts cases
+ // For Smart Wallets, we'll use the client directly to avoid the EOA fallback
const { sendUserOperationAsync, sendUserOperation } = useSendUserOperation({
- client,
+ client: !isSmartWallet ? client : undefined, // feature_1_part_3: client is undefined for Smart Wallets otherwise it falls back to EOA
waitForTxn: true,
});
@@ -103,23 +108,70 @@ export function useScaffoldWriteContract(
return;
}
+// feature_1_part_3: useScaffoldWriteContract now supports Smart Wallets (EIP-7702) userOps block start ------
try {
setIsMining(true);
+ if (isSmartWallet) {
+ setIsSmartWalletMining(true);
+ }
+
const { blockConfirmations, onBlockConfirmation } = options || {};
- const makeWriteWithParams = async () => {
- const { hash } = await sendUserOperationAsync({
- uo: {
- target: deployedContractData.address,
- data: encodeFunctionData({
- abi: deployedContractData.abi,
- functionName: variables.functionName,
- args: variables.args || [],
- } as EncodeFunctionDataParameters),
- value: variables.value,
- },
- });
- return hash;
+
+ const makeWriteWithParams = async (): Promise => {
+ const encodedData = encodeFunctionData({
+ abi: deployedContractData.abi,
+ functionName: variables.functionName,
+ args: variables.args || [],
+ } as EncodeFunctionDataParameters);
+
+ // For Smart Wallets (EIP-7702), use the client directly
+ if (isSmartWallet && client) {
+ console.log("[ScaffoldWrite] Using Smart Wallet client for UserOp");
+ console.log("[ScaffoldWrite] Target:", deployedContractData.address);
+ console.log("[ScaffoldWrite] Function:", variables.functionName);
+ console.log("[ScaffoldWrite] Value:", variables.value || 0n);
+
+ try {
+ const result = await client.sendUserOperation({
+ uo: {
+ target: deployedContractData.address,
+ data: encodedData,
+ value: variables.value || 0n,
+ },
+ });
+
+ console.log("[ScaffoldWrite] UserOp sent, result:", result);
+
+ // Wait for the transaction if we have a hash
+ if ('hash' in result && result.hash) {
+ console.log("[ScaffoldWrite] Waiting for UserOp transaction:", result.hash);
+ const txHash = await client.waitForUserOperationTransaction({
+ hash: result.hash,
+ });
+ console.log("[ScaffoldWrite] Transaction confirmed:", txHash);
+ return txHash as Hex;
+ }
+
+ throw new Error("Failed to get transaction hash from Smart Wallet operation");
+ } catch (error) {
+ console.error("[ScaffoldWrite] Smart Wallet operation failed:", error);
+ throw error;
+ }
+ } else if (sendUserOperationAsync) {
+ // Use the SDK's sendUserOperationAsync for regular smart accounts
+ const { hash } = await sendUserOperationAsync({
+ uo: {
+ target: deployedContractData.address,
+ data: encodedData,
+ value: variables.value,
+ },
+ });
+ return hash as Hex;
+ } else {
+ throw new Error("No method available to send transaction");
+ }
};
+
const writeTxResult = await writeTx(makeWriteWithParams, { blockConfirmations, onBlockConfirmation });
return writeTxResult;
@@ -127,9 +179,11 @@ export function useScaffoldWriteContract(
throw e;
} finally {
setIsMining(false);
+ setIsSmartWalletMining(false);
}
};
-
+// feature_1_part_3: useScaffoldWriteContract now supports Smart Wallets (EIP-7702) userOps block end ------
+
const sendContractWriteTx = <
TContractName extends ContractName,
TFunctionName extends ExtractAbiFunctionNames, "nonpayable" | "payable">,
@@ -141,25 +195,53 @@ export function useScaffoldWriteContract(
return;
}
- sendUserOperation({
- uo: {
- target: deployedContractData.address,
- data: encodeFunctionData({
- abi: deployedContractData.abi,
- functionName: variables.functionName,
- args: variables.args || [],
- } as EncodeFunctionDataParameters),
- value: variables.value,
- },
- });
+// feature_1_part_3: useScaffoldWriteContract now supports Smart Wallets (EIP-7702) userOps block start ------
+ if (!client && !isSmartWallet) {
+ notification.error(`You must first login before making an onchain action`);
+ return;
+ }
+
+ const encodedData = encodeFunctionData({
+ abi: deployedContractData.abi,
+ functionName: variables.functionName,
+ args: variables.args || [],
+ } as EncodeFunctionDataParameters);
+
+ // For Smart Wallets (EIP-7702), use the client directly
+ if (isSmartWallet && client) {
+ console.log("[ScaffoldWrite] Using Smart Wallet client for UserOp (sync)");
+ setIsSmartWalletMining(true);
+ client.sendUserOperation({
+ uo: {
+ target: deployedContractData.address,
+ data: encodedData,
+ value: variables.value || 0n,
+ },
+ }).then(() => {
+ setIsSmartWalletMining(false);
+ }).catch((error: any) => {
+ console.error("Smart Wallet operation failed:", error);
+ setIsSmartWalletMining(false);
+ });
+ } else if (sendUserOperation) {
+ // Use the SDK's sendUserOperation for regular smart accounts
+ sendUserOperation({
+ uo: {
+ target: deployedContractData.address,
+ data: encodedData,
+ value: variables.value,
+ },
+ });
+ }
};
return {
...wagmiContractWrite,
- isMining,
+ isMining: isMining || isSmartWalletMining,
// Overwrite wagmi's writeContactAsync
writeContractAsync: sendContractWriteAsyncTx,
// Overwrite wagmi's writeContract
writeContract: sendContractWriteTx,
};
}
+// feature_1_part_3: useScaffoldWriteContract now supports Smart Wallets (EIP-7702) userOps block end ------
\ No newline at end of file
From 4371d65cbc95ceb321047eb221d6af427e039605 Mon Sep 17 00:00:00 2001
From: Ephyrian <150686927+UMainLove@users.noreply.github.com>
Date: Sat, 12 Jul 2025 21:41:46 +0200
Subject: [PATCH 11/11] feature: Added explicit Smart Contract Account
deployment button
---
README.md | 32 ++--
.../ConnectButton/AddressInfoDropdown.tsx | 46 ++++-
.../nextjs/hooks/scaffold-alchemy/index.ts | 1 +
.../hooks/scaffold-alchemy/useAccountType.ts | 36 +++-
.../useSmartAccountDeployment.ts | 167 ++++++++++++++++++
5 files changed, 262 insertions(+), 20 deletions(-)
create mode 100644 packages/nextjs/hooks/scaffold-alchemy/useSmartAccountDeployment.ts
diff --git a/README.md b/README.md
index f39499a..4cfb502 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,6 @@
-# 🏗 Scaffold-Alchemy
+# 🏗 Scaffold-Alchemy by UMainLove
+
+## THIS FORK CONTAINS EIP-7702 SUPPORT WITH METAMASK WALLETS
Scaffold-Alchemy is a fork of the popular starter project [Scaffold-Eth 2](https://scaffoldeth.io/). It is everything you need to build dApps on Ethereum. You can get started immediately NextJS, TypeScript, Hardhat, AccountKit, Enhanced APIs and Subgraphs 🤩
@@ -16,34 +18,42 @@ Before you begin, you need to install the following tools:
To get started with Scaffold-Alchemy, follow the steps below:
-1. Install the latest version of Scaffold-Alchemy
+Install the latest version of Scaffold-Alchemy
-```
+```bash
npx create-web3-dapp
```
-2. In a terminal, deploy the test contract:
+In a terminal, deploy the test contract:
-```
+```bash
yarn deploy
```
This command deploys a test smart contract to a testnet. You can see the default testnet in `packages/hardhat/hardhat/config.ts`
-3. In a second terminal, start your NextJS app:
+In a second terminal, start your NextJS app:
-```
+```bash
yarn start
```
-Visit your app on: `http://localhost:3000`. You can interact with your smart contract using the `Debug Contracts` page. You can tweak the app config in `packages/nextjs/scaffold.config.ts`.
+Visit your app on: `http://localhost:56900`. You can interact with your smart contract using the `Debug Contracts` page. You can tweak the app config in `packages/nextjs/scaffold.config.ts`.
+
+## Additional Features
+
+- Added deployment button for Modular Smart Contract Accounts (erc4337 + erc6900)
+- Added eip-7702 upgrade button for connected EOA (Tested with: Metamask Wallets on Ethereum Sepolia testnet, private key required)
+- Smart Wallets (EOA + eip7702 + erc4337) interactions fully supported
## Documentation
-Visit our [docs](https://docs.alchemy.com/docs/scaffold-alchemy) to learn all the technical details and guides of Scaffold-Alchemy.
+Visit [docs](https://docs.alchemy.com/docs/scaffold-alchemy) to learn all the technical details and guides of Scaffold-Alchemy.
-## Contributing to Scaffold-Alchemy
+Visit [EIP-7702](https://eips.ethereum.org/EIPS/eip-7702) to learn more about this Ethereum Improvement Proposal.
-We welcome contributions to Scaffold-Alchemy!
+Visit [Implementation](https://www.alchemy.com/docs/wallets/react/using-7702) to learn how eip-7702 could be implemented using Alchemy.
+
+## Contributing to Scaffold-Alchemy
Please see [CONTRIBUTING.MD](https://github.com/alchemyplatform/scaffold-alchemy/blob/main/CONTRIBUTING.md) for more information and guidelines for contributing to Scaffold-Alchemy.
diff --git a/packages/nextjs/components/scaffold-alchemy/ConnectButton/AddressInfoDropdown.tsx b/packages/nextjs/components/scaffold-alchemy/ConnectButton/AddressInfoDropdown.tsx
index 02f5fab..6ac2cce 100644
--- a/packages/nextjs/components/scaffold-alchemy/ConnectButton/AddressInfoDropdown.tsx
+++ b/packages/nextjs/components/scaffold-alchemy/ConnectButton/AddressInfoDropdown.tsx
@@ -1,4 +1,6 @@
/* eslint-disable prettier/prettier */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
import { useRef, useState } from "react";
import { NetworkOptions } from "./NetworkOptions";
import { useLogout } from "@account-kit/react";
@@ -15,9 +17,10 @@ import {
QrCodeIcon,
ShieldCheckIcon, //feature_1
ExclamationTriangleIcon, // feature_1_part_2
+ RocketLaunchIcon, // feature_2
} from "@heroicons/react/24/outline";
import { BlockieAvatar, isENS } from "~~/components/scaffold-alchemy";
-import { useOutsideClick, useAccountType, useEOAUpgrade } from "~~/hooks/scaffold-alchemy"; // 'useAccountType' is feature_1 AND 'useEOAUpgrade' is feature_1_part_2
+import { useOutsideClick, useAccountType, useEOAUpgrade, useSmartAccountDeployment } from "~~/hooks/scaffold-alchemy"; // 'useAccountType' is feature_1 AND 'useEOAUpgrade' is feature_1_part_2 AND 'useSmartAccountDeployment' is feature_2
import { getTargetNetworks } from "~~/utils/scaffold-alchemy";
import { EIP7702_CONFIG } from "~~/utils/scaffold-alchemy/eip7702.config"; // feature_1_part_2
@@ -46,6 +49,10 @@ export const AddressInfoDropdown = ({
isMetaMaskConnected,
reset: resetUpgrade
} = useEOAUpgrade(); // feature_1_part_2
+ const {
+ isDeploying,
+ deploySmartAccount,
+ } = useSmartAccountDeployment(); // feature_2
const [addressCopied, setAddressCopied] = useState(false);
const [showPrivateKeyModal, setShowPrivateKeyModal] = useState(false); // feature_1_part_2
@@ -67,12 +74,17 @@ export const AddressInfoDropdown = ({
const isUpgradeEnabled = showUpgradeButton && isEIP7702Supported;
const isUpgrading = upgradeStatus === "upgrading";
+ // feature_2: Determine if deploy button should be shown
+ const showDeployButton = accountType === "SCA_4337_UNDEPLOYED";
+
// Get the appropriate message for the account status
const getAccountStatusMessage = () => {
if (isUpgrading) return "Upgrading...";
+ if (isDeploying) return "Deploying...";
if (accountType === "EOA" && isMetaMaskConnected) return EIP7702_CONFIG.messages.UPGRADE_BUTTON;
if (accountType === "EOA_7702") return EIP7702_CONFIG.messages.UPGRADED_EOA;
if (accountType === "SCA_4337") return EIP7702_CONFIG.messages.SMART_ACCOUNT;
+ if (accountType === "SCA_4337_UNDEPLOYED") return "Deploy Smart Account";
if (accountType === "UNKNOWN") return EIP7702_CONFIG.messages.DETECTING;
return "This is an EOA";
};
@@ -86,6 +98,14 @@ export const AddressInfoDropdown = ({
}
};
+ // Handle deploy button click for SCA_4337_UNDEPLOYED accounts
+ const handleDeployClick = async () => {
+ if (!isDeploying) {
+ closeDropdown();
+ await deploySmartAccount();
+ }
+ };
+
const handlePrivateKeyUpgrade = async () => {
if (!privateKey) return;
@@ -167,9 +187,23 @@ export const AddressInfoDropdown = ({
- {showUpgradeButton ? (
+ {showDeployButton ? (
+
+ ) : showUpgradeButton ? (