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