feat: comprehensive project improvements and fixes
- Fix all TypeScript compilation errors (40+ fixes) - Add missing type definitions (TransactionRequest, SafeInfo) - Fix TransactionRequestStatus vs TransactionStatus confusion - Fix import paths and provider type issues - Fix test file errors and mock providers - Implement comprehensive security features - AES-GCM encryption with PBKDF2 key derivation - Input validation and sanitization - Rate limiting and nonce management - Replay attack prevention - Access control and authorization - Add comprehensive test suite - Integration tests for transaction flow - Security validation tests - Wallet management tests - Encryption and rate limiter tests - E2E tests with Playwright - Add extensive documentation - 12 numbered guides (setup, development, API, security, etc.) - Security documentation and audit reports - Code review and testing reports - Project organization documentation - Update dependencies - Update axios to latest version (security fix) - Update React types to v18 - Fix peer dependency warnings - Add development tooling - CI/CD workflows (GitHub Actions) - Pre-commit hooks (Husky) - Linting and formatting (Prettier, ESLint) - Security audit workflow - Performance benchmarking - Reorganize project structure - Move reports to docs/reports/ - Clean up root directory - Organize documentation - Add new features - Smart wallet management (Gnosis Safe, ERC4337) - Transaction execution and approval workflows - Balance management and token support - Error boundary and monitoring (Sentry) - Fix WalletConnect configuration - Handle missing projectId gracefully - Add environment variable template
This commit is contained in:
defiQUG
145
components/Balance/AddToken.tsx
Normal file
145
components/Balance/AddToken.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Heading,
|
||||
Button,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Input,
|
||||
useToast,
|
||||
useDisclosure,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
} from "@chakra-ui/react";
|
||||
import { useState } from "react";
|
||||
import { useSmartWallet } from "../../contexts/SmartWalletContext";
|
||||
import { getTokenBalance } from "../../helpers/balance";
|
||||
import { validateAddress } from "../../utils/security";
|
||||
import { ethers } from "ethers";
|
||||
|
||||
export default function AddToken() {
|
||||
const { activeWallet, provider, refreshBalance } = useSmartWallet();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const toast = useToast();
|
||||
|
||||
const [tokenAddress, setTokenAddress] = useState("");
|
||||
|
||||
const handleAddToken = async () => {
|
||||
if (!activeWallet || !provider) {
|
||||
toast({
|
||||
title: "Missing Requirements",
|
||||
description: "Wallet and provider must be available",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate address
|
||||
const addressValidation = validateAddress(tokenAddress);
|
||||
if (!addressValidation.valid) {
|
||||
toast({
|
||||
title: "Invalid Address",
|
||||
description: addressValidation.error || "Please enter a valid token contract address",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const validatedAddress = addressValidation.checksummed!;
|
||||
|
||||
try {
|
||||
// Verify token exists by fetching balance
|
||||
const tokenBalance = await getTokenBalance(
|
||||
validatedAddress,
|
||||
activeWallet.address,
|
||||
provider
|
||||
);
|
||||
|
||||
if (!tokenBalance) {
|
||||
toast({
|
||||
title: "Token Not Found",
|
||||
description: "Could not fetch token information. Please verify the address.",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Refresh balance to include the new token
|
||||
await refreshBalance();
|
||||
|
||||
toast({
|
||||
title: "Token Added",
|
||||
description: `${tokenBalance.symbol} (${tokenBalance.name}) added successfully`,
|
||||
status: "success",
|
||||
isClosable: true,
|
||||
});
|
||||
|
||||
setTokenAddress("");
|
||||
onClose();
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: "Failed",
|
||||
description: error.message || "Failed to add token",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (!activeWallet) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Button onClick={onOpen} size="sm" mb={4}>
|
||||
Add Custom Token
|
||||
</Button>
|
||||
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Add Custom Token</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<VStack spacing={4}>
|
||||
<FormControl>
|
||||
<FormLabel>Token Contract Address</FormLabel>
|
||||
<Input
|
||||
value={tokenAddress}
|
||||
onChange={(e) => setTokenAddress(e.target.value)}
|
||||
placeholder="0x..."
|
||||
/>
|
||||
<Text fontSize="xs" color="gray.400" mt={1}>
|
||||
Enter the ERC20 token contract address
|
||||
</Text>
|
||||
</FormControl>
|
||||
</VStack>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<HStack>
|
||||
<Button variant="ghost" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button colorScheme="blue" onClick={handleAddToken}>
|
||||
Add Token
|
||||
</Button>
|
||||
</HStack>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
115
components/Balance/WalletBalance.tsx
Normal file
115
components/Balance/WalletBalance.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Heading,
|
||||
Button,
|
||||
Spinner,
|
||||
Badge,
|
||||
Table,
|
||||
Thead,
|
||||
Tr,
|
||||
Th,
|
||||
Tbody,
|
||||
Td,
|
||||
} from "@chakra-ui/react";
|
||||
import { useSmartWallet } from "../../contexts/SmartWalletContext";
|
||||
import { utils } from "ethers";
|
||||
import AddToken from "./AddToken";
|
||||
|
||||
export default function WalletBalance() {
|
||||
const { activeWallet, balance, isLoadingBalance, refreshBalance } = useSmartWallet();
|
||||
|
||||
if (!activeWallet) {
|
||||
return (
|
||||
<Box p={4} borderWidth="1px" borderRadius="md">
|
||||
<Text color="gray.400">No active wallet selected</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<HStack mb={4} justify="space-between">
|
||||
<Heading size="md">Balance</Heading>
|
||||
<HStack>
|
||||
<AddToken />
|
||||
<Button size="sm" onClick={refreshBalance} isDisabled={isLoadingBalance}>
|
||||
{isLoadingBalance ? <Spinner size="sm" /> : "Refresh"}
|
||||
</Button>
|
||||
</HStack>
|
||||
</HStack>
|
||||
|
||||
{isLoadingBalance ? (
|
||||
<Box p={8} textAlign="center">
|
||||
<Spinner size="lg" />
|
||||
</Box>
|
||||
) : balance ? (
|
||||
<VStack align="stretch" spacing={4}>
|
||||
<Box p={4} borderWidth="1px" borderRadius="md" bg="brand.lightBlack">
|
||||
<HStack justify="space-between">
|
||||
<VStack align="start" spacing={1}>
|
||||
<Text fontSize="sm" color="gray.400">
|
||||
Native Balance
|
||||
</Text>
|
||||
<Text fontSize="2xl" fontWeight="bold">
|
||||
{parseFloat(balance.nativeFormatted).toFixed(6)} ETH
|
||||
</Text>
|
||||
</VStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
{balance.tokens.length > 0 && (
|
||||
<Box>
|
||||
<Heading size="sm" mb={2}>
|
||||
Tokens
|
||||
</Heading>
|
||||
<Table variant="simple" size="sm">
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>Token</Th>
|
||||
<Th>Balance</Th>
|
||||
<Th>Symbol</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{balance.tokens.map((token) => (
|
||||
<Tr key={token.tokenAddress}>
|
||||
<Td>
|
||||
<VStack align="start" spacing={0}>
|
||||
<Text fontWeight="bold">{token.name}</Text>
|
||||
<Text fontSize="xs" color="gray.400">
|
||||
{token.tokenAddress.slice(0, 10)}...
|
||||
</Text>
|
||||
</VStack>
|
||||
</Td>
|
||||
<Td>
|
||||
<Text>{parseFloat(token.balanceFormatted).toFixed(4)}</Text>
|
||||
</Td>
|
||||
<Td>
|
||||
<Badge>{token.symbol}</Badge>
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{balance.tokens.length === 0 && (
|
||||
<Box p={4} textAlign="center" color="gray.400">
|
||||
<Text>No token balances found</Text>
|
||||
</Box>
|
||||
)}
|
||||
</VStack>
|
||||
) : (
|
||||
<Box p={4} textAlign="center" color="gray.400">
|
||||
<Text>Failed to load balance</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -17,8 +17,11 @@ import { DeleteIcon } from "@chakra-ui/icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faSave } from "@fortawesome/free-solid-svg-icons";
|
||||
import { slicedText } from "../../TransactionRequests";
|
||||
import { SecureStorage } from "@/utils/encryption";
|
||||
import { validateAddress } from "@/utils/security";
|
||||
import { STORAGE_KEYS } from "@/utils/constants";
|
||||
|
||||
const STORAGE_KEY = "address-book";
|
||||
const secureStorage = new SecureStorage();
|
||||
|
||||
interface SavedAddressInfo {
|
||||
address: string;
|
||||
@@ -45,7 +48,30 @@ function AddressBook({
|
||||
const [savedAddresses, setSavedAddresses] = useState<SavedAddressInfo[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
setSavedAddresses(JSON.parse(localStorage.getItem(STORAGE_KEY) ?? "[]"));
|
||||
const loadAddresses = async () => {
|
||||
try {
|
||||
const stored = await secureStorage.getItem(STORAGE_KEYS.ADDRESS_BOOK);
|
||||
if (stored) {
|
||||
const parsed = JSON.parse(stored) as SavedAddressInfo[];
|
||||
setSavedAddresses(parsed);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to load address book:", error);
|
||||
// Try to migrate from plain localStorage
|
||||
try {
|
||||
const legacy = localStorage.getItem("address-book");
|
||||
if (legacy) {
|
||||
const parsed = JSON.parse(legacy) as SavedAddressInfo[];
|
||||
await secureStorage.setItem(STORAGE_KEYS.ADDRESS_BOOK, legacy);
|
||||
localStorage.removeItem("address-book");
|
||||
setSavedAddresses(parsed);
|
||||
}
|
||||
} catch (migrationError) {
|
||||
console.error("Failed to migrate address book:", migrationError);
|
||||
}
|
||||
}
|
||||
};
|
||||
loadAddresses();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -53,7 +79,21 @@ function AddressBook({
|
||||
}, [showAddress]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(savedAddresses));
|
||||
const saveAddresses = async () => {
|
||||
if (savedAddresses.length > 0) {
|
||||
try {
|
||||
await secureStorage.setItem(
|
||||
STORAGE_KEYS.ADDRESS_BOOK,
|
||||
JSON.stringify(savedAddresses)
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Failed to save address book:", error);
|
||||
}
|
||||
} else {
|
||||
secureStorage.removeItem(STORAGE_KEYS.ADDRESS_BOOK);
|
||||
}
|
||||
};
|
||||
saveAddresses();
|
||||
}, [savedAddresses]);
|
||||
|
||||
// reset label when modal is reopened
|
||||
@@ -95,15 +135,34 @@ function AddressBook({
|
||||
isDisabled={
|
||||
newAddressInput.length === 0 || newLableInput.length === 0
|
||||
}
|
||||
onClick={() =>
|
||||
onClick={async () => {
|
||||
// Validate address
|
||||
const validation = validateAddress(newAddressInput);
|
||||
if (!validation.valid) {
|
||||
// Show error (would use toast in production)
|
||||
console.error("Invalid address:", validation.error);
|
||||
return;
|
||||
}
|
||||
|
||||
const checksummedAddress = validation.checksummed!;
|
||||
|
||||
// Check for duplicates
|
||||
const isDuplicate = savedAddresses.some(
|
||||
(a) => a.address.toLowerCase() === checksummedAddress.toLowerCase()
|
||||
);
|
||||
if (isDuplicate) {
|
||||
console.error("Address already exists in address book");
|
||||
return;
|
||||
}
|
||||
|
||||
setSavedAddresses([
|
||||
...savedAddresses,
|
||||
{
|
||||
address: newAddressInput,
|
||||
address: checksummedAddress,
|
||||
label: newLableInput,
|
||||
},
|
||||
])
|
||||
}
|
||||
]);
|
||||
}}
|
||||
>
|
||||
<HStack>
|
||||
<FontAwesomeIcon icon={faSave} />
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Center, HStack } from "@chakra-ui/react";
|
||||
import Tab from "./Tab";
|
||||
|
||||
const tabs = ["WalletConnect", "iFrame", "Extension"];
|
||||
const tabs = ["WalletConnect", "iFrame", "Extension", "Smart Wallet"];
|
||||
|
||||
interface TabsSelectParams {
|
||||
selectedTabIndex: number;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { Container, useToast, Center, Spacer, Flex } from "@chakra-ui/react";
|
||||
import { Container, useToast, Center, Spacer, Flex, VStack } from "@chakra-ui/react";
|
||||
|
||||
import { SingleValue } from "chakra-react-select";
|
||||
// WC v2
|
||||
@@ -13,6 +13,9 @@ import { ethers } from "ethers";
|
||||
import axios from "axios";
|
||||
import networksList from "evm-rpcs-list";
|
||||
import { useSafeInject } from "../../contexts/SafeInjectContext";
|
||||
import { useTransaction } from "../../contexts/TransactionContext";
|
||||
import { useSmartWallet } from "../../contexts/SmartWalletContext";
|
||||
import { TransactionExecutionMethod } from "../../types";
|
||||
import TenderlySettings from "./TenderlySettings";
|
||||
import AddressInput from "./AddressInput";
|
||||
import { SelectedNetworkOption, TxnDataType } from "../../types";
|
||||
@@ -23,6 +26,12 @@ import IFrameConnectTab from "./IFrameConnectTab";
|
||||
import BrowserExtensionTab from "./BrowserExtensionTab";
|
||||
import TransactionRequests from "./TransactionRequests";
|
||||
import NotificationBar from "./NotificationBar";
|
||||
import WalletManager from "../SmartWallet/WalletManager";
|
||||
import OwnerManagement from "../SmartWallet/OwnerManagement";
|
||||
import WalletBalance from "../Balance/WalletBalance";
|
||||
import TransactionApproval from "../TransactionExecution/TransactionApproval";
|
||||
import TransactionBuilder from "../TransactionExecution/TransactionBuilder";
|
||||
import TransactionHistory from "../TransactionExecution/TransactionHistory";
|
||||
|
||||
const WCMetadata = {
|
||||
name: "Impersonator",
|
||||
@@ -32,7 +41,7 @@ const WCMetadata = {
|
||||
};
|
||||
|
||||
const core = new Core({
|
||||
projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID,
|
||||
projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID || "demo-project-id",
|
||||
});
|
||||
|
||||
const primaryNetworkIds = [
|
||||
@@ -80,10 +89,11 @@ function Body() {
|
||||
urlFromURL = urlParams.get("url");
|
||||
chainFromURL = urlParams.get("chain");
|
||||
}
|
||||
if (typeof localStorage !== "undefined") {
|
||||
showAddressCache = localStorage.getItem("showAddress");
|
||||
urlFromCache = localStorage.getItem("appUrl");
|
||||
tenderlyForkIdCache = localStorage.getItem("tenderlyForkId");
|
||||
// Use sessionStorage for UI preferences (non-sensitive)
|
||||
if (typeof sessionStorage !== "undefined") {
|
||||
showAddressCache = sessionStorage.getItem("showAddress") ?? null;
|
||||
urlFromCache = sessionStorage.getItem("appUrl") ?? null;
|
||||
tenderlyForkIdCache = sessionStorage.getItem("tenderlyForkId") ?? null;
|
||||
}
|
||||
let networkIdViaURL = 1;
|
||||
if (chainFromURL) {
|
||||
@@ -108,6 +118,8 @@ function Body() {
|
||||
iframeRef,
|
||||
latestTransaction,
|
||||
} = useSafeInject();
|
||||
const { createTransaction, defaultExecutionMethod } = useTransaction();
|
||||
const { activeWallet } = useSmartWallet();
|
||||
|
||||
const [provider, setProvider] = useState<ethers.providers.JsonRpcProvider>();
|
||||
const [showAddress, setShowAddress] = useState(
|
||||
@@ -148,8 +160,10 @@ function Body() {
|
||||
useEffect(() => {
|
||||
// only use cached address if no address from url provided
|
||||
if (!addressFromURL) {
|
||||
// getCachedSession
|
||||
const _showAddress = localStorage.getItem("showAddress") ?? undefined;
|
||||
// getCachedSession - use sessionStorage for UI preferences
|
||||
const _showAddress = typeof sessionStorage !== "undefined"
|
||||
? sessionStorage.getItem("showAddress") ?? undefined
|
||||
: undefined;
|
||||
// WC V2
|
||||
initWeb3Wallet(true, _showAddress);
|
||||
}
|
||||
@@ -174,16 +188,23 @@ function Body() {
|
||||
}, [provider]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem("tenderlyForkId", tenderlyForkId);
|
||||
// Use sessionStorage for UI preferences (non-sensitive)
|
||||
if (typeof sessionStorage !== "undefined") {
|
||||
sessionStorage.setItem("tenderlyForkId", tenderlyForkId);
|
||||
}
|
||||
}, [tenderlyForkId]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem("showAddress", showAddress);
|
||||
// Use sessionStorage for UI preferences (non-sensitive)
|
||||
if (typeof sessionStorage !== "undefined") {
|
||||
sessionStorage.setItem("showAddress", showAddress);
|
||||
}
|
||||
}, [showAddress]);
|
||||
|
||||
useEffect(() => {
|
||||
if (inputAppUrl) {
|
||||
localStorage.setItem("appUrl", inputAppUrl);
|
||||
// Use sessionStorage for UI preferences (non-sensitive)
|
||||
if (inputAppUrl && typeof sessionStorage !== "undefined") {
|
||||
sessionStorage.setItem("appUrl", inputAppUrl);
|
||||
}
|
||||
}, [inputAppUrl]);
|
||||
|
||||
@@ -210,7 +231,7 @@ function Body() {
|
||||
return data;
|
||||
} else {
|
||||
return [
|
||||
{ ...newTxn, value: parseInt(newTxn.value, 16).toString() },
|
||||
{ ...newTxn, value: ethers.BigNumber.from("0x" + newTxn.value).toString() },
|
||||
...data,
|
||||
];
|
||||
}
|
||||
@@ -268,8 +289,8 @@ function Body() {
|
||||
setShowAddress(
|
||||
_showAddress && _showAddress.length > 0 ? _showAddress : _address
|
||||
);
|
||||
if (!(_showAddress && _showAddress.length > 0)) {
|
||||
localStorage.setItem("showAddress", _address);
|
||||
if (!(_showAddress && _showAddress.length > 0) && typeof sessionStorage !== "undefined") {
|
||||
sessionStorage.setItem("showAddress", _address);
|
||||
}
|
||||
setAddress(_address);
|
||||
setUri(
|
||||
@@ -386,7 +407,7 @@ function Body() {
|
||||
};
|
||||
|
||||
const onSessionProposal = useCallback(
|
||||
async (proposal) => {
|
||||
async (proposal: { params: { requiredNamespaces: Record<string, ProposalTypes.BaseRequiredNamespace>; optionalNamespaces?: Record<string, any> }; id: number }) => {
|
||||
if (loading) {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -447,15 +468,17 @@ function Body() {
|
||||
|
||||
const handleSendTransaction = useCallback(
|
||||
async (id: number, params: any[], topic?: string) => {
|
||||
const txValue = params[0].value
|
||||
? ethers.BigNumber.from(params[0].value).toString()
|
||||
: "0";
|
||||
|
||||
setSendTxnData((data) => {
|
||||
const newTxn = {
|
||||
id: id,
|
||||
from: params[0].from,
|
||||
to: params[0].to,
|
||||
data: params[0].data,
|
||||
value: params[0].value
|
||||
? parseInt(params[0].value, 16).toString()
|
||||
: "0",
|
||||
value: txValue,
|
||||
};
|
||||
|
||||
if (data.some((d) => d.id === newTxn.id)) {
|
||||
@@ -465,7 +488,39 @@ function Body() {
|
||||
}
|
||||
});
|
||||
|
||||
if (tenderlyForkId.length > 0) {
|
||||
// If active smart wallet exists, create transaction for approval/execution
|
||||
if (activeWallet) {
|
||||
try {
|
||||
// Convert value properly using BigNumber
|
||||
const valueBigNumber = ethers.BigNumber.from(txValue);
|
||||
const valueHex = valueBigNumber.toHexString();
|
||||
|
||||
await createTransaction({
|
||||
from: activeWallet.address,
|
||||
to: params[0].to,
|
||||
value: valueHex,
|
||||
data: params[0].data || "0x",
|
||||
method: defaultExecutionMethod,
|
||||
});
|
||||
|
||||
toast({
|
||||
title: "Transaction Created",
|
||||
description: "Transaction added to approval queue",
|
||||
status: "info",
|
||||
isClosable: true,
|
||||
});
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: "Transaction Creation Failed",
|
||||
description: error.message || "Failed to create transaction",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Handle execution method
|
||||
if (defaultExecutionMethod === TransactionExecutionMethod.SIMULATION && tenderlyForkId.length > 0) {
|
||||
const { data: res } = await axios.post(
|
||||
"https://rpc.tenderly.co/fork/" + tenderlyForkId,
|
||||
{
|
||||
@@ -477,30 +532,6 @@ function Body() {
|
||||
);
|
||||
console.log({ res });
|
||||
|
||||
// Approve Call Request
|
||||
if (web3wallet && topic) {
|
||||
// await web3wallet.respondSessionRequest({
|
||||
// topic,
|
||||
// response: {
|
||||
// jsonrpc: "2.0",
|
||||
// id: res.id,
|
||||
// result: res.result,
|
||||
// },
|
||||
// });
|
||||
|
||||
await web3wallet.respondSessionRequest({
|
||||
topic,
|
||||
response: {
|
||||
jsonrpc: "2.0",
|
||||
id: id,
|
||||
error: {
|
||||
code: 0,
|
||||
message: "Method not supported by Impersonator",
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
toast({
|
||||
title: "Txn Simulated on Tenderly",
|
||||
description: `Hash: ${res.result}`,
|
||||
@@ -509,8 +540,24 @@ function Body() {
|
||||
duration: null,
|
||||
isClosable: true,
|
||||
});
|
||||
} else {
|
||||
if (web3wallet && topic) {
|
||||
}
|
||||
|
||||
// Respond to WalletConnect
|
||||
if (web3wallet && topic) {
|
||||
if (activeWallet && defaultExecutionMethod !== TransactionExecutionMethod.SIMULATION) {
|
||||
// For now, return error - actual execution will be handled through approval flow
|
||||
await web3wallet.respondSessionRequest({
|
||||
topic,
|
||||
response: {
|
||||
jsonrpc: "2.0",
|
||||
id: id,
|
||||
error: {
|
||||
code: 0,
|
||||
message: "Transaction queued for approval. Check Smart Wallet tab.",
|
||||
},
|
||||
},
|
||||
});
|
||||
} else {
|
||||
await web3wallet.respondSessionRequest({
|
||||
topic,
|
||||
response: {
|
||||
@@ -525,11 +572,11 @@ function Body() {
|
||||
}
|
||||
}
|
||||
},
|
||||
[tenderlyForkId, web3wallet]
|
||||
[tenderlyForkId, web3wallet, activeWallet, createTransaction, defaultExecutionMethod, toast]
|
||||
);
|
||||
|
||||
const onSessionRequest = useCallback(
|
||||
async (event) => {
|
||||
async (event: { topic: string; params: { request: any }; id: number }) => {
|
||||
const { topic, params, id } = event;
|
||||
const { request } = params;
|
||||
|
||||
@@ -749,6 +796,21 @@ function Body() {
|
||||
);
|
||||
case 2:
|
||||
return <BrowserExtensionTab />;
|
||||
case 3:
|
||||
return (
|
||||
<VStack spacing={6} mt={4} align="stretch">
|
||||
<WalletManager />
|
||||
{activeWallet && (
|
||||
<>
|
||||
<OwnerManagement />
|
||||
<WalletBalance />
|
||||
<TransactionBuilder />
|
||||
<TransactionApproval />
|
||||
<TransactionHistory />
|
||||
</>
|
||||
)}
|
||||
</VStack>
|
||||
);
|
||||
}
|
||||
})()}
|
||||
<Center>
|
||||
|
||||
96
components/ErrorBoundary.tsx
Normal file
96
components/ErrorBoundary.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
"use client";
|
||||
|
||||
import React, { Component, ErrorInfo, ReactNode } from "react";
|
||||
import { Box, Button, Heading, Text, VStack } from "@chakra-ui/react";
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
interface State {
|
||||
hasError: boolean;
|
||||
error: Error | null;
|
||||
errorInfo: ErrorInfo | null;
|
||||
}
|
||||
|
||||
class ErrorBoundary extends Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
hasError: false,
|
||||
error: null,
|
||||
errorInfo: null,
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error: Error): State {
|
||||
return {
|
||||
hasError: true,
|
||||
error,
|
||||
errorInfo: null,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||||
// Log error to error tracking service
|
||||
console.error("Error caught by boundary:", error, errorInfo);
|
||||
|
||||
this.setState({
|
||||
error,
|
||||
errorInfo,
|
||||
});
|
||||
|
||||
// In production, send to error tracking service
|
||||
if (process.env.NODE_ENV === "production") {
|
||||
// Example: sendToErrorTracking(error, errorInfo);
|
||||
}
|
||||
}
|
||||
|
||||
handleReset = () => {
|
||||
this.setState({
|
||||
hasError: false,
|
||||
error: null,
|
||||
errorInfo: null,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
<Box p={8} textAlign="center">
|
||||
<VStack spacing={4}>
|
||||
<Heading size="lg" color="red.400">
|
||||
Something went wrong
|
||||
</Heading>
|
||||
<Text color="gray.400">
|
||||
{this.state.error?.message || "An unexpected error occurred"}
|
||||
</Text>
|
||||
{process.env.NODE_ENV === "development" && this.state.errorInfo && (
|
||||
<Box
|
||||
p={4}
|
||||
bg="gray.800"
|
||||
borderRadius="md"
|
||||
maxW="4xl"
|
||||
overflow="auto"
|
||||
textAlign="left"
|
||||
>
|
||||
<Text fontSize="sm" fontFamily="mono" whiteSpace="pre-wrap">
|
||||
{this.state.error?.stack}
|
||||
{"\n\n"}
|
||||
{this.state.errorInfo.componentStack}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
<Button onClick={this.handleReset} colorScheme="blue">
|
||||
Try Again
|
||||
</Button>
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
export default ErrorBoundary;
|
||||
288
components/SmartWallet/DeployWallet.tsx
Normal file
288
components/SmartWallet/DeployWallet.tsx
Normal file
@@ -0,0 +1,288 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Heading,
|
||||
Button,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Input,
|
||||
NumberInput,
|
||||
NumberInputField,
|
||||
NumberInputStepper,
|
||||
NumberIncrementStepper,
|
||||
NumberDecrementStepper,
|
||||
Select,
|
||||
useToast,
|
||||
useDisclosure,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
} from "@chakra-ui/react";
|
||||
import { useState } from "react";
|
||||
import { useSmartWallet } from "../../contexts/SmartWalletContext";
|
||||
import { SmartWalletType } from "../../types";
|
||||
import { validateAddress, validateNetworkId } from "../../utils/security";
|
||||
import { ethers } from "ethers";
|
||||
|
||||
export default function DeployWallet() {
|
||||
const { createWallet, setActiveWallet, provider } = useSmartWallet();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const toast = useToast();
|
||||
|
||||
const [walletType, setWalletType] = useState<SmartWalletType>(SmartWalletType.GNOSIS_SAFE);
|
||||
const [owners, setOwners] = useState<string[]>([""]);
|
||||
const [threshold, setThreshold] = useState(1);
|
||||
const [networkId, setNetworkId] = useState(1);
|
||||
const [isDeploying, setIsDeploying] = useState(false);
|
||||
|
||||
const handleAddOwner = () => {
|
||||
setOwners([...owners, ""]);
|
||||
};
|
||||
|
||||
const handleRemoveOwner = (index: number) => {
|
||||
if (owners.length > 1) {
|
||||
const newOwners = owners.filter((_, i) => i !== index);
|
||||
setOwners(newOwners);
|
||||
if (threshold > newOwners.length) {
|
||||
setThreshold(newOwners.length);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleOwnerChange = (index: number, value: string) => {
|
||||
const newOwners = [...owners];
|
||||
newOwners[index] = value;
|
||||
setOwners(newOwners);
|
||||
};
|
||||
|
||||
const handleDeploy = async () => {
|
||||
// Validate network ID
|
||||
const networkValidation = validateNetworkId(networkId);
|
||||
if (!networkValidation.valid) {
|
||||
toast({
|
||||
title: "Invalid Network",
|
||||
description: networkValidation.error || "Network not supported",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate owners
|
||||
const validOwners: string[] = [];
|
||||
for (const owner of owners) {
|
||||
if (!owner) continue;
|
||||
const validation = validateAddress(owner);
|
||||
if (validation.valid && validation.checksummed) {
|
||||
validOwners.push(validation.checksummed);
|
||||
}
|
||||
}
|
||||
|
||||
if (validOwners.length === 0) {
|
||||
toast({
|
||||
title: "Invalid Owners",
|
||||
description: "Please add at least one valid owner address",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Check for duplicate owners
|
||||
const uniqueOwners = Array.from(new Set(validOwners.map(o => o.toLowerCase())));
|
||||
if (uniqueOwners.length !== validOwners.length) {
|
||||
toast({
|
||||
title: "Duplicate Owners",
|
||||
description: "Each owner address must be unique",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (threshold < 1 || threshold > validOwners.length) {
|
||||
toast({
|
||||
title: "Invalid Threshold",
|
||||
description: `Threshold must be between 1 and ${validOwners.length}`,
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setIsDeploying(true);
|
||||
try {
|
||||
if (walletType === SmartWalletType.GNOSIS_SAFE && provider) {
|
||||
// For Gnosis Safe deployment, we would need a signer
|
||||
// This is a placeholder - full implementation would deploy the contract
|
||||
toast({
|
||||
title: "Deployment Not Available",
|
||||
description: "Gnosis Safe deployment requires a signer. Please connect a wallet first.",
|
||||
status: "info",
|
||||
isClosable: true,
|
||||
});
|
||||
|
||||
// Create wallet config anyway for testing
|
||||
const wallet = await createWallet({
|
||||
type: walletType,
|
||||
address: ethers.Wallet.createRandom().address, // Placeholder address
|
||||
networkId,
|
||||
owners: validOwners.map(o => validateAddress(o).checksummed!),
|
||||
threshold,
|
||||
});
|
||||
|
||||
setActiveWallet(wallet);
|
||||
toast({
|
||||
title: "Wallet Created",
|
||||
description: "Wallet configuration created (not deployed on-chain)",
|
||||
status: "success",
|
||||
isClosable: true,
|
||||
});
|
||||
onClose();
|
||||
} else {
|
||||
// For other wallet types
|
||||
const wallet = await createWallet({
|
||||
type: walletType,
|
||||
address: ethers.Wallet.createRandom().address,
|
||||
networkId,
|
||||
owners: validOwners,
|
||||
threshold,
|
||||
});
|
||||
|
||||
setActiveWallet(wallet);
|
||||
toast({
|
||||
title: "Wallet Created",
|
||||
description: "Wallet configuration created",
|
||||
status: "success",
|
||||
isClosable: true,
|
||||
});
|
||||
onClose();
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: "Deployment Failed",
|
||||
description: error.message || "Failed to deploy wallet",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
} finally {
|
||||
setIsDeploying(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Button onClick={onOpen} mb={4}>
|
||||
Deploy New Wallet
|
||||
</Button>
|
||||
|
||||
<Modal isOpen={isOpen} onClose={onClose} size="xl">
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Deploy Smart Wallet</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<VStack spacing={4}>
|
||||
<FormControl>
|
||||
<FormLabel>Wallet Type</FormLabel>
|
||||
<Select
|
||||
value={walletType}
|
||||
onChange={(e) => setWalletType(e.target.value as SmartWalletType)}
|
||||
>
|
||||
<option value={SmartWalletType.GNOSIS_SAFE}>Gnosis Safe</option>
|
||||
<option value={SmartWalletType.ERC4337}>ERC-4337 Account</option>
|
||||
<option value={SmartWalletType.CUSTOM}>Custom</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<FormControl>
|
||||
<FormLabel>Network ID</FormLabel>
|
||||
<NumberInput
|
||||
value={networkId}
|
||||
onChange={(_, val) => setNetworkId(val)}
|
||||
min={1}
|
||||
>
|
||||
<NumberInputField />
|
||||
<NumberInputStepper>
|
||||
<NumberIncrementStepper />
|
||||
<NumberDecrementStepper />
|
||||
</NumberInputStepper>
|
||||
</NumberInput>
|
||||
</FormControl>
|
||||
|
||||
<Box w="full">
|
||||
<HStack mb={2} justify="space-between">
|
||||
<FormLabel>Owners</FormLabel>
|
||||
<Button size="sm" onClick={handleAddOwner}>
|
||||
Add Owner
|
||||
</Button>
|
||||
</HStack>
|
||||
<VStack spacing={2} align="stretch">
|
||||
{owners.map((owner, index) => (
|
||||
<HStack key={index}>
|
||||
<Input
|
||||
value={owner}
|
||||
onChange={(e) => handleOwnerChange(index, e.target.value)}
|
||||
placeholder="0x..."
|
||||
/>
|
||||
{owners.length > 1 && (
|
||||
<Button
|
||||
size="sm"
|
||||
colorScheme="red"
|
||||
onClick={() => handleRemoveOwner(index)}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
)}
|
||||
</HStack>
|
||||
))}
|
||||
</VStack>
|
||||
</Box>
|
||||
|
||||
<FormControl>
|
||||
<FormLabel>Threshold</FormLabel>
|
||||
<NumberInput
|
||||
value={threshold}
|
||||
onChange={(_, val) => setThreshold(val)}
|
||||
min={1}
|
||||
max={owners.filter((o) => ethers.utils.isAddress(o)).length || 1}
|
||||
>
|
||||
<NumberInputField />
|
||||
<NumberInputStepper>
|
||||
<NumberIncrementStepper />
|
||||
<NumberDecrementStepper />
|
||||
</NumberInputStepper>
|
||||
</NumberInput>
|
||||
<Text fontSize="sm" color="gray.400" mt={1}>
|
||||
{threshold} of {owners.filter((o) => ethers.utils.isAddress(o)).length || 0} owners required
|
||||
</Text>
|
||||
</FormControl>
|
||||
</VStack>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<HStack>
|
||||
<Button variant="ghost" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
onClick={handleDeploy}
|
||||
isLoading={isDeploying}
|
||||
>
|
||||
Deploy
|
||||
</Button>
|
||||
</HStack>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
282
components/SmartWallet/OwnerManagement.tsx
Normal file
282
components/SmartWallet/OwnerManagement.tsx
Normal file
@@ -0,0 +1,282 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Heading,
|
||||
Button,
|
||||
Input,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
useToast,
|
||||
Badge,
|
||||
IconButton,
|
||||
useDisclosure,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
} from "@chakra-ui/react";
|
||||
import { DeleteIcon, AddIcon } from "@chakra-ui/icons";
|
||||
import { useState } from "react";
|
||||
import { useSmartWallet } from "../../contexts/SmartWalletContext";
|
||||
import { validateAddress, isContractAddress } from "../../utils/security";
|
||||
import { ethers, providers } from "ethers";
|
||||
import networksList from "evm-rpcs-list";
|
||||
|
||||
export default function OwnerManagement() {
|
||||
const { activeWallet, addOwner, removeOwner, updateThreshold, provider } = useSmartWallet();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const toast = useToast();
|
||||
|
||||
const [newOwnerAddress, setNewOwnerAddress] = useState("");
|
||||
const [newThreshold, setNewThreshold] = useState(activeWallet?.threshold || 1);
|
||||
|
||||
if (!activeWallet) {
|
||||
return (
|
||||
<Box p={4} borderWidth="1px" borderRadius="md">
|
||||
<Text color="gray.400">No active wallet selected</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const handleAddOwner = async () => {
|
||||
// Validate address format
|
||||
const addressValidation = validateAddress(newOwnerAddress);
|
||||
if (!addressValidation.valid) {
|
||||
toast({
|
||||
title: "Invalid Address",
|
||||
description: addressValidation.error || "Please enter a valid Ethereum address",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const checksummedAddress = addressValidation.checksummed!;
|
||||
|
||||
// Check if contract (cannot add contracts as owners)
|
||||
if (activeWallet && provider) {
|
||||
try {
|
||||
const isContract = await isContractAddress(checksummedAddress, provider);
|
||||
if (isContract) {
|
||||
toast({
|
||||
title: "Cannot Add Contract",
|
||||
description: "Contract addresses cannot be added as owners",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to check if contract:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// Check for duplicates (case-insensitive)
|
||||
if (activeWallet.owners.some(
|
||||
o => o.toLowerCase() === checksummedAddress.toLowerCase()
|
||||
)) {
|
||||
toast({
|
||||
title: "Owner Exists",
|
||||
description: "This address is already an owner",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Get caller address (in production, this would come from connected wallet)
|
||||
const callerAddress = typeof window !== "undefined" && (window as any).ethereum
|
||||
? await (window as any).ethereum.request({ method: "eth_accounts" }).then((accounts: string[]) => accounts[0])
|
||||
: undefined;
|
||||
|
||||
await addOwner(activeWallet.id, { address: checksummedAddress }, callerAddress);
|
||||
toast({
|
||||
title: "Owner Added",
|
||||
description: "Owner added successfully",
|
||||
status: "success",
|
||||
isClosable: true,
|
||||
});
|
||||
setNewOwnerAddress("");
|
||||
onClose();
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: "Failed",
|
||||
description: error.message || "Failed to add owner",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveOwner = async (address: string) => {
|
||||
if (activeWallet.owners.length <= 1) {
|
||||
toast({
|
||||
title: "Cannot Remove",
|
||||
description: "Wallet must have at least one owner",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate address
|
||||
const addressValidation = validateAddress(address);
|
||||
if (!addressValidation.valid) {
|
||||
toast({
|
||||
title: "Invalid Address",
|
||||
description: addressValidation.error || "Invalid address format",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Get caller address
|
||||
const callerAddress = typeof window !== "undefined" && (window as any).ethereum
|
||||
? await (window as any).ethereum.request({ method: "eth_accounts" }).then((accounts: string[]) => accounts[0])
|
||||
: undefined;
|
||||
|
||||
await removeOwner(activeWallet.id, addressValidation.checksummed!, callerAddress);
|
||||
toast({
|
||||
title: "Owner Removed",
|
||||
description: "Owner removed successfully",
|
||||
status: "success",
|
||||
isClosable: true,
|
||||
});
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: "Failed",
|
||||
description: error.message || "Failed to remove owner",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateThreshold = async () => {
|
||||
if (newThreshold < 1 || newThreshold > activeWallet.owners.length) {
|
||||
toast({
|
||||
title: "Invalid Threshold",
|
||||
description: `Threshold must be between 1 and ${activeWallet.owners.length}`,
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Get caller address
|
||||
const callerAddress = typeof window !== "undefined" && (window as any).ethereum
|
||||
? await (window as any).ethereum.request({ method: "eth_accounts" }).then((accounts: string[]) => accounts[0])
|
||||
: undefined;
|
||||
|
||||
await updateThreshold(activeWallet.id, newThreshold, callerAddress);
|
||||
toast({
|
||||
title: "Threshold Updated",
|
||||
description: "Threshold updated successfully",
|
||||
status: "success",
|
||||
isClosable: true,
|
||||
});
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: "Failed",
|
||||
description: error.message || "Failed to update threshold",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<HStack mb={4} justify="space-between">
|
||||
<Heading size="md">Owners</Heading>
|
||||
<Button leftIcon={<AddIcon />} onClick={onOpen} size="sm">
|
||||
Add Owner
|
||||
</Button>
|
||||
</HStack>
|
||||
|
||||
<VStack align="stretch" spacing={2}>
|
||||
{activeWallet.owners.map((owner, index) => (
|
||||
<HStack
|
||||
key={index}
|
||||
p={3}
|
||||
borderWidth="1px"
|
||||
borderRadius="md"
|
||||
justify="space-between"
|
||||
>
|
||||
<HStack>
|
||||
<Text fontSize="sm">{owner}</Text>
|
||||
{index < activeWallet.threshold && (
|
||||
<Badge colorScheme="green">Required</Badge>
|
||||
)}
|
||||
</HStack>
|
||||
<IconButton
|
||||
aria-label="Remove owner"
|
||||
icon={<DeleteIcon />}
|
||||
size="sm"
|
||||
colorScheme="red"
|
||||
onClick={() => handleRemoveOwner(owner)}
|
||||
isDisabled={activeWallet.owners.length <= 1}
|
||||
/>
|
||||
</HStack>
|
||||
))}
|
||||
</VStack>
|
||||
|
||||
<Box mt={4} p={4} borderWidth="1px" borderRadius="md">
|
||||
<HStack>
|
||||
<FormControl>
|
||||
<FormLabel>Threshold</FormLabel>
|
||||
<Input
|
||||
type="number"
|
||||
value={newThreshold}
|
||||
onChange={(e) => setNewThreshold(parseInt(e.target.value) || 1)}
|
||||
min={1}
|
||||
max={activeWallet.owners.length}
|
||||
/>
|
||||
</FormControl>
|
||||
<Button onClick={handleUpdateThreshold} mt={6}>
|
||||
Update Threshold
|
||||
</Button>
|
||||
</HStack>
|
||||
<Text fontSize="sm" color="gray.400" mt={2}>
|
||||
Current: {activeWallet.threshold} of {activeWallet.owners.length}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Add Owner</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody pb={6}>
|
||||
<VStack spacing={4}>
|
||||
<FormControl>
|
||||
<FormLabel>Owner Address</FormLabel>
|
||||
<Input
|
||||
value={newOwnerAddress}
|
||||
onChange={(e) => setNewOwnerAddress(e.target.value)}
|
||||
placeholder="0x..."
|
||||
/>
|
||||
</FormControl>
|
||||
<HStack>
|
||||
<Button onClick={onClose}>Cancel</Button>
|
||||
<Button colorScheme="blue" onClick={handleAddOwner}>
|
||||
Add Owner
|
||||
</Button>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</ModalBody>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
252
components/SmartWallet/WalletManager.tsx
Normal file
252
components/SmartWallet/WalletManager.tsx
Normal file
@@ -0,0 +1,252 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Heading,
|
||||
useDisclosure,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Input,
|
||||
NumberInput,
|
||||
NumberInputField,
|
||||
NumberInputStepper,
|
||||
NumberIncrementStepper,
|
||||
NumberDecrementStepper,
|
||||
Select,
|
||||
useToast,
|
||||
Badge,
|
||||
IconButton,
|
||||
Tr,
|
||||
Td,
|
||||
Table,
|
||||
Thead,
|
||||
Th,
|
||||
Tbody,
|
||||
} from "@chakra-ui/react";
|
||||
import { DeleteIcon, AddIcon, EditIcon } from "@chakra-ui/icons";
|
||||
import { useState } from "react";
|
||||
import { useSmartWallet } from "../../contexts/SmartWalletContext";
|
||||
import { SmartWalletType } from "../../types";
|
||||
import { validateAddress, validateNetworkId } from "../../utils/security";
|
||||
import { ethers } from "ethers";
|
||||
import DeployWallet from "./DeployWallet";
|
||||
|
||||
export default function WalletManager() {
|
||||
const {
|
||||
smartWallets,
|
||||
activeWallet,
|
||||
setActiveWallet,
|
||||
createWallet,
|
||||
deleteWallet,
|
||||
connectToWallet,
|
||||
} = useSmartWallet();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const toast = useToast();
|
||||
|
||||
const [walletAddress, setWalletAddress] = useState("");
|
||||
const [networkId, setNetworkId] = useState(1);
|
||||
const [walletType, setWalletType] = useState<SmartWalletType>(SmartWalletType.GNOSIS_SAFE);
|
||||
|
||||
const handleConnect = async () => {
|
||||
// Validate address
|
||||
const addressValidation = validateAddress(walletAddress);
|
||||
if (!addressValidation.valid) {
|
||||
toast({
|
||||
title: "Invalid Address",
|
||||
description: addressValidation.error || "Please enter a valid Ethereum address",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate network ID
|
||||
const networkValidation = validateNetworkId(networkId);
|
||||
if (!networkValidation.valid) {
|
||||
toast({
|
||||
title: "Invalid Network",
|
||||
description: networkValidation.error || "Network not supported",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const wallet = await connectToWallet(
|
||||
addressValidation.checksummed!,
|
||||
networkId,
|
||||
walletType
|
||||
);
|
||||
if (wallet) {
|
||||
setActiveWallet(wallet);
|
||||
toast({
|
||||
title: "Wallet Connected",
|
||||
description: `Connected to ${addressValidation.checksummed!.slice(0, 10)}...`,
|
||||
status: "success",
|
||||
isClosable: true,
|
||||
});
|
||||
onClose();
|
||||
} else {
|
||||
throw new Error("Failed to connect to wallet");
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: "Connection Failed",
|
||||
description: error.message || "Failed to connect to wallet",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<HStack mb={4} justify="space-between">
|
||||
<Heading size="md">Smart Wallets</Heading>
|
||||
<HStack>
|
||||
<DeployWallet />
|
||||
<Button leftIcon={<AddIcon />} onClick={onOpen} size="sm">
|
||||
Connect Wallet
|
||||
</Button>
|
||||
</HStack>
|
||||
</HStack>
|
||||
|
||||
{activeWallet && (
|
||||
<Box mb={4} p={4} borderWidth="1px" borderRadius="md">
|
||||
<HStack justify="space-between">
|
||||
<VStack align="start" spacing={1}>
|
||||
<HStack>
|
||||
<Text fontWeight="bold">Active Wallet:</Text>
|
||||
<Badge>{activeWallet.type}</Badge>
|
||||
</HStack>
|
||||
<Text fontSize="sm" color="gray.400">
|
||||
{activeWallet.address}
|
||||
</Text>
|
||||
<Text fontSize="sm">
|
||||
{activeWallet.owners.length} owner(s), threshold: {activeWallet.threshold}
|
||||
</Text>
|
||||
</VStack>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => setActiveWallet(undefined)}
|
||||
>
|
||||
Disconnect
|
||||
</Button>
|
||||
</HStack>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Table variant="simple" size="sm">
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>Address</Th>
|
||||
<Th>Type</Th>
|
||||
<Th>Network</Th>
|
||||
<Th>Owners</Th>
|
||||
<Th>Actions</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{smartWallets.map((wallet) => (
|
||||
<Tr key={wallet.id}>
|
||||
<Td>
|
||||
<Text fontSize="sm">{wallet.address.slice(0, 10)}...</Text>
|
||||
</Td>
|
||||
<Td>
|
||||
<Badge>{wallet.type}</Badge>
|
||||
</Td>
|
||||
<Td>{wallet.networkId}</Td>
|
||||
<Td>
|
||||
{wallet.owners.length} ({wallet.threshold})
|
||||
</Td>
|
||||
<Td>
|
||||
<HStack>
|
||||
<IconButton
|
||||
aria-label="Select wallet"
|
||||
icon={<EditIcon />}
|
||||
size="sm"
|
||||
onClick={() => setActiveWallet(wallet)}
|
||||
isDisabled={activeWallet?.id === wallet.id}
|
||||
/>
|
||||
<IconButton
|
||||
aria-label="Delete wallet"
|
||||
icon={<DeleteIcon />}
|
||||
size="sm"
|
||||
colorScheme="red"
|
||||
onClick={() => deleteWallet(wallet.id)}
|
||||
/>
|
||||
</HStack>
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Connect Smart Wallet</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody pb={6}>
|
||||
<VStack spacing={4}>
|
||||
<FormControl>
|
||||
<FormLabel>Wallet Type</FormLabel>
|
||||
<Select
|
||||
value={walletType}
|
||||
onChange={(e) => setWalletType(e.target.value as SmartWalletType)}
|
||||
>
|
||||
<option value={SmartWalletType.GNOSIS_SAFE}>Gnosis Safe</option>
|
||||
<option value={SmartWalletType.ERC4337}>ERC-4337 Account</option>
|
||||
<option value={SmartWalletType.CUSTOM}>Custom</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<FormControl>
|
||||
<FormLabel>Wallet Address</FormLabel>
|
||||
<Input
|
||||
value={walletAddress}
|
||||
onChange={(e) => setWalletAddress(e.target.value)}
|
||||
placeholder="0x..."
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormControl>
|
||||
<FormLabel>Network ID</FormLabel>
|
||||
<NumberInput
|
||||
value={networkId}
|
||||
onChange={(_, value) => setNetworkId(value)}
|
||||
min={1}
|
||||
>
|
||||
<NumberInputField />
|
||||
<NumberInputStepper>
|
||||
<NumberIncrementStepper />
|
||||
<NumberDecrementStepper />
|
||||
</NumberInputStepper>
|
||||
</NumberInput>
|
||||
</FormControl>
|
||||
|
||||
<HStack>
|
||||
<Button onClick={onClose}>Cancel</Button>
|
||||
<Button colorScheme="blue" onClick={handleConnect}>
|
||||
Connect
|
||||
</Button>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</ModalBody>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
245
components/TransactionExecution/TransactionApproval.tsx
Normal file
245
components/TransactionExecution/TransactionApproval.tsx
Normal file
@@ -0,0 +1,245 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Heading,
|
||||
Button,
|
||||
useDisclosure,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
Badge,
|
||||
Progress,
|
||||
Table,
|
||||
Thead,
|
||||
Tr,
|
||||
Th,
|
||||
Tbody,
|
||||
Td,
|
||||
Code,
|
||||
} from "@chakra-ui/react";
|
||||
import { useTransaction } from "../../contexts/TransactionContext";
|
||||
import { TransactionRequestStatus } from "../../types";
|
||||
import { formatEther } from "ethers/lib/utils";
|
||||
|
||||
export default function TransactionApproval() {
|
||||
const { pendingTransactions, approveTransaction, rejectTransaction, executeTransaction } =
|
||||
useTransaction();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const [selectedTx, setSelectedTx] = React.useState<string | null>(null);
|
||||
|
||||
const selectedTransaction = pendingTransactions.find((ptx) => ptx.id === selectedTx);
|
||||
|
||||
const handleApprove = async () => {
|
||||
if (!selectedTx) return;
|
||||
// Get approver address from active wallet or use a placeholder
|
||||
// In production, this would get from the connected wallet
|
||||
const approver = typeof window !== "undefined" && (window as any).ethereum
|
||||
? await (window as any).ethereum.request({ method: "eth_accounts" }).then((accounts: string[]) => accounts[0])
|
||||
: "0x0000000000000000000000000000000000000000";
|
||||
|
||||
await approveTransaction(selectedTx, approver || "0x0000000000000000000000000000000000000000");
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleReject = async () => {
|
||||
if (!selectedTx) return;
|
||||
const approver = typeof window !== "undefined" && (window as any).ethereum
|
||||
? await (window as any).ethereum.request({ method: "eth_accounts" }).then((accounts: string[]) => accounts[0])
|
||||
: "0x0000000000000000000000000000000000000000";
|
||||
|
||||
await rejectTransaction(selectedTx, approver || "0x0000000000000000000000000000000000000000");
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleExecute = async () => {
|
||||
if (!selectedTx) return;
|
||||
const hash = await executeTransaction(selectedTx);
|
||||
if (hash) {
|
||||
// Transaction executed successfully
|
||||
}
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Heading size="md" mb={4}>
|
||||
Pending Transactions
|
||||
</Heading>
|
||||
|
||||
{pendingTransactions.length === 0 ? (
|
||||
<Box p={4} textAlign="center" color="gray.400">
|
||||
<Text>No pending transactions</Text>
|
||||
</Box>
|
||||
) : (
|
||||
<Table variant="simple" size="sm">
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>ID</Th>
|
||||
<Th>To</Th>
|
||||
<Th>Value</Th>
|
||||
<Th>Approvals</Th>
|
||||
<Th>Status</Th>
|
||||
<Th>Actions</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{pendingTransactions.map((ptx) => (
|
||||
<Tr key={ptx.id}>
|
||||
<Td>
|
||||
<Text fontSize="xs">{ptx.id.slice(0, 10)}...</Text>
|
||||
</Td>
|
||||
<Td>
|
||||
<Text fontSize="sm">{ptx.transaction.to.slice(0, 10)}...</Text>
|
||||
</Td>
|
||||
<Td>
|
||||
<Text fontSize="sm">
|
||||
{parseFloat(formatEther(ptx.transaction.value || "0")).toFixed(4)} ETH
|
||||
</Text>
|
||||
</Td>
|
||||
<Td>
|
||||
<Text fontSize="sm">
|
||||
{ptx.approvalCount} / {ptx.requiredApprovals}
|
||||
</Text>
|
||||
<Progress
|
||||
value={(ptx.approvalCount / ptx.requiredApprovals) * 100}
|
||||
size="sm"
|
||||
colorScheme="green"
|
||||
mt={1}
|
||||
/>
|
||||
</Td>
|
||||
<Td>
|
||||
<Badge
|
||||
colorScheme={
|
||||
ptx.transaction.status === TransactionRequestStatus.APPROVED
|
||||
? "green"
|
||||
: "yellow"
|
||||
}
|
||||
>
|
||||
{ptx.transaction.status}
|
||||
</Badge>
|
||||
</Td>
|
||||
<Td>
|
||||
<HStack>
|
||||
<Button
|
||||
size="xs"
|
||||
onClick={() => {
|
||||
setSelectedTx(ptx.id);
|
||||
onOpen();
|
||||
}}
|
||||
>
|
||||
View
|
||||
</Button>
|
||||
{ptx.canExecute && (
|
||||
<Button
|
||||
size="xs"
|
||||
colorScheme="green"
|
||||
onClick={() => handleExecute()}
|
||||
>
|
||||
Execute
|
||||
</Button>
|
||||
)}
|
||||
</HStack>
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
)}
|
||||
|
||||
<Modal isOpen={isOpen} onClose={onClose} size="xl">
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Transaction Details</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
{selectedTransaction && (
|
||||
<VStack align="stretch" spacing={4}>
|
||||
<Box>
|
||||
<Text fontSize="sm" color="gray.400">
|
||||
Transaction ID
|
||||
</Text>
|
||||
<Code>{selectedTransaction.id}</Code>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fontSize="sm" color="gray.400">
|
||||
To
|
||||
</Text>
|
||||
<Text>{selectedTransaction.transaction.to}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fontSize="sm" color="gray.400">
|
||||
Value
|
||||
</Text>
|
||||
<Text>
|
||||
{parseFloat(formatEther(selectedTransaction.transaction.value || "0")).toFixed(
|
||||
6
|
||||
)}{" "}
|
||||
ETH
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fontSize="sm" color="gray.400">
|
||||
Data
|
||||
</Text>
|
||||
<Code fontSize="xs" p={2} display="block" whiteSpace="pre-wrap">
|
||||
{selectedTransaction.transaction.data || "0x"}
|
||||
</Code>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fontSize="sm" color="gray.400">
|
||||
Approvals
|
||||
</Text>
|
||||
<Text>
|
||||
{selectedTransaction.approvalCount} / {selectedTransaction.requiredApprovals}
|
||||
</Text>
|
||||
<Progress
|
||||
value={
|
||||
(selectedTransaction.approvalCount /
|
||||
selectedTransaction.requiredApprovals) *
|
||||
100
|
||||
}
|
||||
size="sm"
|
||||
colorScheme="green"
|
||||
mt={2}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fontSize="sm" color="gray.400">
|
||||
Execution Method
|
||||
</Text>
|
||||
<Badge>{selectedTransaction.transaction.method}</Badge>
|
||||
</Box>
|
||||
</VStack>
|
||||
)}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<HStack>
|
||||
<Button variant="ghost" onClick={onClose}>
|
||||
Close
|
||||
</Button>
|
||||
{selectedTransaction && !selectedTransaction.canExecute && (
|
||||
<>
|
||||
<Button colorScheme="red" onClick={handleReject}>
|
||||
Reject
|
||||
</Button>
|
||||
<Button colorScheme="blue" onClick={handleApprove}>
|
||||
Approve
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</HStack>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
416
components/TransactionExecution/TransactionBuilder.tsx
Normal file
416
components/TransactionExecution/TransactionBuilder.tsx
Normal file
@@ -0,0 +1,416 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Heading,
|
||||
Button,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Input,
|
||||
Select,
|
||||
useToast,
|
||||
useDisclosure,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
NumberInput,
|
||||
NumberInputField,
|
||||
Code,
|
||||
} from "@chakra-ui/react";
|
||||
import { useState } from "react";
|
||||
import { useTransaction } from "../../contexts/TransactionContext";
|
||||
import { useSmartWallet } from "../../contexts/SmartWalletContext";
|
||||
import { TransactionExecutionMethod } from "../../types";
|
||||
import { validateAddress, validateTransactionData, validateTransactionValue, sanitizeInput } from "../../utils/security";
|
||||
import { ethers } from "ethers";
|
||||
|
||||
const ERC20_TRANSFER_ABI = [
|
||||
"function transfer(address to, uint256 amount) returns (bool)",
|
||||
];
|
||||
|
||||
export default function TransactionBuilder() {
|
||||
const { createTransaction, estimateGas, defaultExecutionMethod, setDefaultExecutionMethod } =
|
||||
useTransaction();
|
||||
const { activeWallet, balance } = useSmartWallet();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const toast = useToast();
|
||||
|
||||
const [toAddress, setToAddress] = useState("");
|
||||
const [value, setValue] = useState("");
|
||||
const [data, setData] = useState("");
|
||||
const [isTokenTransfer, setIsTokenTransfer] = useState(false);
|
||||
const [tokenAddress, setTokenAddress] = useState("");
|
||||
const [tokenAmount, setTokenAmount] = useState("");
|
||||
const [gasEstimate, setGasEstimate] = useState<any>(null);
|
||||
const [isEstimating, setIsEstimating] = useState(false);
|
||||
|
||||
const handleEstimateGas = async () => {
|
||||
if (!activeWallet || !toAddress) {
|
||||
toast({
|
||||
title: "Missing Information",
|
||||
description: "Please fill in required fields",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate to address
|
||||
const toValidation = validateAddress(toAddress);
|
||||
if (!toValidation.valid) {
|
||||
toast({
|
||||
title: "Invalid Address",
|
||||
description: toValidation.error || "Invalid 'to' address",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate transaction data
|
||||
if (data) {
|
||||
const dataValidation = validateTransactionData(data);
|
||||
if (!dataValidation.valid) {
|
||||
toast({
|
||||
title: "Invalid Data",
|
||||
description: dataValidation.error || "Invalid transaction data",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setIsEstimating(true);
|
||||
try {
|
||||
const valueHex = value
|
||||
? ethers.utils.parseEther(value).toHexString()
|
||||
: "0x0";
|
||||
|
||||
// Validate value
|
||||
const valueValidation = validateTransactionValue(valueHex);
|
||||
if (!valueValidation.valid) {
|
||||
throw new Error(valueValidation.error || "Invalid transaction value");
|
||||
}
|
||||
|
||||
const estimate = await estimateGas({
|
||||
from: activeWallet.address,
|
||||
to: toValidation.checksummed!,
|
||||
value: valueHex,
|
||||
data: data || "0x",
|
||||
});
|
||||
setGasEstimate(estimate);
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: "Estimation Failed",
|
||||
description: error.message || "Failed to estimate gas",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
} finally {
|
||||
setIsEstimating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateTokenTransfer = () => {
|
||||
if (!tokenAddress || !toAddress || !tokenAmount) {
|
||||
toast({
|
||||
title: "Missing Information",
|
||||
description: "Please fill in all token transfer fields",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Find token info
|
||||
const token = balance?.tokens.find(
|
||||
(t) => t.tokenAddress.toLowerCase() === tokenAddress.toLowerCase()
|
||||
);
|
||||
|
||||
if (!token) {
|
||||
toast({
|
||||
title: "Token Not Found",
|
||||
description: "Token not found in balance. Please add it first.",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Encode transfer function
|
||||
const iface = new ethers.utils.Interface(ERC20_TRANSFER_ABI);
|
||||
const transferData = iface.encodeFunctionData("transfer", [
|
||||
toAddress,
|
||||
ethers.utils.parseUnits(tokenAmount, token.decimals),
|
||||
]);
|
||||
|
||||
setData(transferData);
|
||||
setValue("0");
|
||||
setIsTokenTransfer(false);
|
||||
toast({
|
||||
title: "Transfer Data Generated",
|
||||
description: "Token transfer data has been generated",
|
||||
status: "success",
|
||||
isClosable: true,
|
||||
});
|
||||
};
|
||||
|
||||
const handleCreateTransaction = async () => {
|
||||
if (!activeWallet || !toAddress) {
|
||||
toast({
|
||||
title: "Missing Information",
|
||||
description: "Please fill in required fields",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate all inputs
|
||||
const toValidation = validateAddress(toAddress);
|
||||
if (!toValidation.valid) {
|
||||
toast({
|
||||
title: "Invalid Address",
|
||||
description: toValidation.error || "Invalid 'to' address",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (data) {
|
||||
const dataValidation = validateTransactionData(data);
|
||||
if (!dataValidation.valid) {
|
||||
toast({
|
||||
title: "Invalid Data",
|
||||
description: dataValidation.error || "Invalid transaction data",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const valueHex = value
|
||||
? ethers.utils.parseEther(value).toHexString()
|
||||
: "0x0";
|
||||
|
||||
const valueValidation = validateTransactionValue(valueHex);
|
||||
if (!valueValidation.valid) {
|
||||
toast({
|
||||
title: "Invalid Value",
|
||||
description: valueValidation.error || "Invalid transaction value",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate gas estimate if provided
|
||||
if (gasEstimate?.gasLimit) {
|
||||
const { validateGasLimit } = await import("../../utils/security");
|
||||
const gasValidation = validateGasLimit(gasEstimate.gasLimit);
|
||||
if (!gasValidation.valid) {
|
||||
toast({
|
||||
title: "Invalid Gas Limit",
|
||||
description: gasValidation.error || "Gas limit validation failed",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const tx = await createTransaction({
|
||||
from: activeWallet.address,
|
||||
to: toValidation.checksummed!,
|
||||
value: valueHex,
|
||||
data: sanitizeInput(data || "0x"),
|
||||
method: defaultExecutionMethod,
|
||||
gasLimit: gasEstimate?.gasLimit,
|
||||
gasPrice: gasEstimate?.gasPrice,
|
||||
maxFeePerGas: gasEstimate?.maxFeePerGas,
|
||||
maxPriorityFeePerGas: gasEstimate?.maxPriorityFeePerGas,
|
||||
});
|
||||
|
||||
toast({
|
||||
title: "Transaction Created",
|
||||
description: `Transaction ${tx.id.slice(0, 10)}... created successfully`,
|
||||
status: "success",
|
||||
isClosable: true,
|
||||
});
|
||||
|
||||
// Reset form
|
||||
setToAddress("");
|
||||
setValue("");
|
||||
setData("");
|
||||
setGasEstimate(null);
|
||||
onClose();
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: "Failed",
|
||||
description: error.message || "Failed to create transaction",
|
||||
status: "error",
|
||||
isClosable: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (!activeWallet) {
|
||||
return (
|
||||
<Box p={4} borderWidth="1px" borderRadius="md">
|
||||
<Text color="gray.400">No active wallet selected</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<HStack mb={4} justify="space-between">
|
||||
<Heading size="md">Create Transaction</Heading>
|
||||
<Button onClick={onOpen}>New Transaction</Button>
|
||||
</HStack>
|
||||
|
||||
<Box mb={4} p={4} borderWidth="1px" borderRadius="md">
|
||||
<FormControl>
|
||||
<FormLabel>Default Execution Method</FormLabel>
|
||||
<Select
|
||||
value={defaultExecutionMethod}
|
||||
onChange={(e) =>
|
||||
setDefaultExecutionMethod(e.target.value as TransactionExecutionMethod)
|
||||
}
|
||||
>
|
||||
<option value={TransactionExecutionMethod.DIRECT_ONCHAIN}>
|
||||
Direct On-Chain
|
||||
</option>
|
||||
<option value={TransactionExecutionMethod.RELAYER}>Relayer</option>
|
||||
<option value={TransactionExecutionMethod.SIMULATION}>Simulation</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
|
||||
<Modal isOpen={isOpen} onClose={onClose} size="xl">
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Create Transaction</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<VStack spacing={4}>
|
||||
<FormControl>
|
||||
<FormLabel>To Address</FormLabel>
|
||||
<Input
|
||||
value={toAddress}
|
||||
onChange={(e) => setToAddress(e.target.value)}
|
||||
placeholder="0x..."
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormControl>
|
||||
<FormLabel>Native Value (ETH)</FormLabel>
|
||||
<NumberInput
|
||||
value={value}
|
||||
onChange={(_, val) => setValue(val.toString())}
|
||||
precision={18}
|
||||
>
|
||||
<NumberInputField />
|
||||
</NumberInput>
|
||||
</FormControl>
|
||||
|
||||
<Box w="full" p={4} borderWidth="1px" borderRadius="md">
|
||||
<HStack mb={2}>
|
||||
<Text fontWeight="bold">Token Transfer</Text>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => setIsTokenTransfer(!isTokenTransfer)}
|
||||
>
|
||||
{isTokenTransfer ? "Cancel" : "Add Token Transfer"}
|
||||
</Button>
|
||||
</HStack>
|
||||
|
||||
{isTokenTransfer && (
|
||||
<VStack spacing={3} align="stretch">
|
||||
<FormControl>
|
||||
<FormLabel>Token Address</FormLabel>
|
||||
<Select
|
||||
value={tokenAddress}
|
||||
onChange={(e) => setTokenAddress(e.target.value)}
|
||||
placeholder="Select token"
|
||||
>
|
||||
{balance?.tokens.map((token) => (
|
||||
<option key={token.tokenAddress} value={token.tokenAddress}>
|
||||
{token.symbol} - {token.name}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<FormControl>
|
||||
<FormLabel>Amount</FormLabel>
|
||||
<Input
|
||||
value={tokenAmount}
|
||||
onChange={(e) => setTokenAmount(e.target.value)}
|
||||
placeholder="0.0"
|
||||
type="number"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<Button onClick={handleCreateTokenTransfer} colorScheme="blue">
|
||||
Generate Transfer Data
|
||||
</Button>
|
||||
</VStack>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<FormControl>
|
||||
<FormLabel>Data (Hex)</FormLabel>
|
||||
<Code p={2} display="block" whiteSpace="pre-wrap" fontSize="xs">
|
||||
<Input
|
||||
value={data}
|
||||
onChange={(e) => setData(e.target.value)}
|
||||
placeholder="0x..."
|
||||
fontFamily="mono"
|
||||
/>
|
||||
</Code>
|
||||
</FormControl>
|
||||
|
||||
<HStack w="full">
|
||||
<Button
|
||||
onClick={handleEstimateGas}
|
||||
isDisabled={isEstimating || !toAddress}
|
||||
isLoading={isEstimating}
|
||||
>
|
||||
Estimate Gas
|
||||
</Button>
|
||||
{gasEstimate && (
|
||||
<Text fontSize="sm" color="gray.400">
|
||||
Gas: {gasEstimate.gasLimit} | Cost: ~
|
||||
{ethers.utils.formatEther(gasEstimate.estimatedCost)} ETH
|
||||
</Text>
|
||||
)}
|
||||
</HStack>
|
||||
</VStack>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<HStack>
|
||||
<Button variant="ghost" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button colorScheme="blue" onClick={handleCreateTransaction}>
|
||||
Create Transaction
|
||||
</Button>
|
||||
</HStack>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
256
components/TransactionExecution/TransactionHistory.tsx
Normal file
256
components/TransactionExecution/TransactionHistory.tsx
Normal file
@@ -0,0 +1,256 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Heading,
|
||||
Button,
|
||||
Table,
|
||||
Thead,
|
||||
Tr,
|
||||
Th,
|
||||
Tbody,
|
||||
Td,
|
||||
Badge,
|
||||
useDisclosure,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
Code,
|
||||
Link,
|
||||
Select,
|
||||
} from "@chakra-ui/react";
|
||||
import { useState } from "react";
|
||||
import { useTransaction } from "../../contexts/TransactionContext";
|
||||
import { TransactionRequestStatus, TransactionStatus, TransactionExecutionMethod } from "../../types";
|
||||
import { utils } from "ethers";
|
||||
|
||||
const getStatusColor = (status: TransactionRequestStatus) => {
|
||||
switch (status) {
|
||||
case TransactionRequestStatus.SUCCESS:
|
||||
return "green";
|
||||
case TransactionRequestStatus.FAILED:
|
||||
return "red";
|
||||
case TransactionRequestStatus.EXECUTING:
|
||||
return "blue";
|
||||
case TransactionRequestStatus.APPROVED:
|
||||
return "yellow";
|
||||
case TransactionRequestStatus.REJECTED:
|
||||
return "red";
|
||||
default:
|
||||
return "gray";
|
||||
}
|
||||
};
|
||||
|
||||
export default function TransactionHistory() {
|
||||
const { transactions } = useTransaction();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const [selectedTx, setSelectedTx] = useState<string | null>(null);
|
||||
const [filter, setFilter] = useState<TransactionRequestStatus | "ALL">("ALL");
|
||||
|
||||
const selectedTransaction = transactions.find((tx) => tx.id === selectedTx);
|
||||
|
||||
const filteredTransactions = transactions.filter((tx) => {
|
||||
if (filter === "ALL") return true;
|
||||
return tx.status === filter;
|
||||
});
|
||||
|
||||
const getExplorerUrl = (hash: string, networkId: number) => {
|
||||
const explorers: Record<number, string> = {
|
||||
1: `https://etherscan.io/tx/${hash}`,
|
||||
5: `https://goerli.etherscan.io/tx/${hash}`,
|
||||
137: `https://polygonscan.com/tx/${hash}`,
|
||||
42161: `https://arbiscan.io/tx/${hash}`,
|
||||
10: `https://optimistic.etherscan.io/tx/${hash}`,
|
||||
8453: `https://basescan.org/tx/${hash}`,
|
||||
};
|
||||
return explorers[networkId] || `https://etherscan.io/tx/${hash}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<HStack mb={4} justify="space-between">
|
||||
<Heading size="md">Transaction History</Heading>
|
||||
<Select
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value as TransactionRequestStatus | "ALL")}
|
||||
width="200px"
|
||||
>
|
||||
<option value="ALL">All Status</option>
|
||||
<option value={TransactionRequestStatus.PENDING}>Pending</option>
|
||||
<option value={TransactionRequestStatus.APPROVED}>Approved</option>
|
||||
<option value={TransactionRequestStatus.SUCCESS}>Success</option>
|
||||
<option value={TransactionRequestStatus.FAILED}>Failed</option>
|
||||
<option value={TransactionRequestStatus.REJECTED}>Rejected</option>
|
||||
</Select>
|
||||
</HStack>
|
||||
|
||||
{filteredTransactions.length === 0 ? (
|
||||
<Box p={4} textAlign="center" color="gray.400">
|
||||
<Text>No transactions found</Text>
|
||||
</Box>
|
||||
) : (
|
||||
<Table variant="simple" size="sm">
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>ID</Th>
|
||||
<Th>To</Th>
|
||||
<Th>Value</Th>
|
||||
<Th>Method</Th>
|
||||
<Th>Status</Th>
|
||||
<Th>Hash</Th>
|
||||
<Th>Actions</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{filteredTransactions.map((tx) => (
|
||||
<Tr key={tx.id}>
|
||||
<Td>
|
||||
<Text fontSize="xs">{tx.id.slice(0, 10)}...</Text>
|
||||
</Td>
|
||||
<Td>
|
||||
<Text fontSize="sm">{tx.to.slice(0, 10)}...</Text>
|
||||
</Td>
|
||||
<Td>
|
||||
<Text fontSize="sm">
|
||||
{parseFloat(utils.formatEther(tx.value || "0")).toFixed(4)} ETH
|
||||
</Text>
|
||||
</Td>
|
||||
<Td>
|
||||
<Badge>{tx.method}</Badge>
|
||||
</Td>
|
||||
<Td>
|
||||
<Badge colorScheme={getStatusColor(tx.status)}>{tx.status}</Badge>
|
||||
</Td>
|
||||
<Td>
|
||||
{tx.hash ? (
|
||||
<Link
|
||||
href={getExplorerUrl(tx.hash, 1)}
|
||||
isExternal
|
||||
fontSize="xs"
|
||||
color="blue.400"
|
||||
>
|
||||
{tx.hash.slice(0, 10)}...
|
||||
</Link>
|
||||
) : (
|
||||
<Text fontSize="xs" color="gray.400">
|
||||
-
|
||||
</Text>
|
||||
)}
|
||||
</Td>
|
||||
<Td>
|
||||
<Button
|
||||
size="xs"
|
||||
onClick={() => {
|
||||
setSelectedTx(tx.id);
|
||||
onOpen();
|
||||
}}
|
||||
>
|
||||
View
|
||||
</Button>
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
)}
|
||||
|
||||
<Modal isOpen={isOpen} onClose={onClose} size="xl">
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Transaction Details</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
{selectedTransaction && (
|
||||
<VStack align="stretch" spacing={4}>
|
||||
<Box>
|
||||
<Text fontSize="sm" color="gray.400">
|
||||
Transaction ID
|
||||
</Text>
|
||||
<Code>{selectedTransaction.id}</Code>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fontSize="sm" color="gray.400">
|
||||
From
|
||||
</Text>
|
||||
<Text>{selectedTransaction.from}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fontSize="sm" color="gray.400">
|
||||
To
|
||||
</Text>
|
||||
<Text>{selectedTransaction.to}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fontSize="sm" color="gray.400">
|
||||
Value
|
||||
</Text>
|
||||
<Text>
|
||||
{parseFloat(utils.formatEther(selectedTransaction.value || "0")).toFixed(6)} ETH
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fontSize="sm" color="gray.400">
|
||||
Data
|
||||
</Text>
|
||||
<Code fontSize="xs" p={2} display="block" whiteSpace="pre-wrap">
|
||||
{selectedTransaction.data || "0x"}
|
||||
</Code>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fontSize="sm" color="gray.400">
|
||||
Status
|
||||
</Text>
|
||||
<Badge colorScheme={getStatusColor(selectedTransaction.status)}>
|
||||
{selectedTransaction.status}
|
||||
</Badge>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fontSize="sm" color="gray.400">
|
||||
Execution Method
|
||||
</Text>
|
||||
<Badge>{selectedTransaction.method}</Badge>
|
||||
</Box>
|
||||
{selectedTransaction.hash && (
|
||||
<Box>
|
||||
<Text fontSize="sm" color="gray.400">
|
||||
Transaction Hash
|
||||
</Text>
|
||||
<Link
|
||||
href={getExplorerUrl(selectedTransaction.hash, 1)}
|
||||
isExternal
|
||||
color="blue.400"
|
||||
>
|
||||
{selectedTransaction.hash}
|
||||
</Link>
|
||||
</Box>
|
||||
)}
|
||||
{selectedTransaction.error && (
|
||||
<Box>
|
||||
<Text fontSize="sm" color="gray.400">
|
||||
Error
|
||||
</Text>
|
||||
<Text color="red.400">{selectedTransaction.error}</Text>
|
||||
</Box>
|
||||
)}
|
||||
{selectedTransaction.executedAt && (
|
||||
<Box>
|
||||
<Text fontSize="sm" color="gray.400">
|
||||
Executed At
|
||||
</Text>
|
||||
<Text>{new Date(selectedTransaction.executedAt).toLocaleString()}</Text>
|
||||
</Box>
|
||||
)}
|
||||
</VStack>
|
||||
)}
|
||||
</ModalBody>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user