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
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user