Merge pull request #85 from daqhris/devin-fix-web3-app

Fix ENS resolution and WalletConnect API errors

.env.local

@@ -1,13 +1,22 @@
-NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=your_wallet_connect_project_id_here
-POAP_API_KEY=your_poap_api_key_here
-ALCHEMY_API_KEY=your_alchemy_api_key_here
-ETHEREUM_RPC_URL=https://eth-mainnet.alchemyapi.io/v2/${ALCHEMY_API_KEY}
-PRIVATE_KEY=your_ethereum_wallet_private_key_here
+# WalletConnect Project ID (keep this value as is, it's already set correctly)
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=CHPA6N569JF66K6G1WQBY4WWW7SU6N5P72
+
+# Replace with actual values in a production environment
+POAP_API_KEY=dummy_poap_api_key
+ALCHEMY_API_KEY=dummy_alchemy_api_key
+ETHEREUM_RPC_URL=https://eth-mainnet.alchemyapi.io/v2/dummy_alchemy_api_key
+PRIVATE_KEY=0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef
 # Keep this private key secret and never commit it to version control
-EAS_CONTRACT_ADDRESS=0x4200000000000000000000000000000000021A42 # Optimism Sepolia testnet address
-SCHEMA_REGISTRY_ADDRESS=0x4200000000000000000000000000000000021A43 # Optimism Sepolia testnet address
-ETHERSCAN_API_KEY=your_etherscan_api_key_here
-BLOCKSCOUT_API_KEY=your_blockscout_api_key_here
-BLOCKSCOUT_OPTIMISM_API_KEY=your_blockscout_optimism_api_key_here
+
+# Ethereum Attestation Service (EAS) contract addresses (Optimism Sepolia testnet)
+EAS_CONTRACT_ADDRESS=0x4200000000000000000000000000000000021A42
+SCHEMA_REGISTRY_ADDRESS=0x4200000000000000000000000000000000021A43
+
+# API Keys (replace with actual values in production)
+ETHERSCAN_API_KEY=dummy_etherscan_api_key
+BLOCKSCOUT_API_KEY=dummy_blockscout_api_key
+BLOCKSCOUT_OPTIMISM_API_KEY=dummy_blockscout_optimism_api_key
+
+# Deployer information
 DEPLOYER_ETH_ADDRESS=0xF0bC5CC2B4866dAAeCb069430c60b24520077037
 DEPLOYER_ENS_NAME=mission-enrollment.daqhris.eth

components/IdentityVerification.tsx

@@ -1,13 +1,20 @@
 import React, { useEffect, useState } from "react";
 import { useEnsAddress, useEnsName } from "wagmi";
+import { isAddress, getAddress } from "ethers";
 
-const IdentityVerification: React.FC<{ onVerified: (address: string) => void }> = ({ onVerified }): JSX.Element => {
+const IdentityVerification: React.FC<{ onVerified: (address: string) => void }> = ({ onVerified }) => {
   const [inputAddress, setInputAddress] = useState<string>("");
   const [isVerifying, setIsVerifying] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
 
-  const { data: ensName, isLoading: isEnsNameLoading } = useEnsName({ address: inputAddress as `0x${string}` });
-  const { data: ensAddress, isLoading: isEnsAddressLoading } = useEnsAddress({ name: inputAddress });
+  const { data: ensName, isLoading: isEnsNameLoading } = useEnsName({
+    address: isAddress(inputAddress) ? inputAddress as `0x${string}` : undefined,
+    chainId: 1 // Assuming mainnet, adjust if needed
+  });
+  const { data: ensAddress, isLoading: isEnsAddressLoading } = useEnsAddress({
+    name: inputAddress.includes('.') ? inputAddress : undefined,
+    chainId: 1 // Assuming mainnet, adjust if needed
+  });
 
   const isLoading = isEnsNameLoading || isEnsAddressLoading;
 
@@ -22,31 +29,35 @@ const IdentityVerification: React.FC<{ onVerified: (address: string) => void }>
     setError("");
 
     try {
-      let verifiedAddress = inputAddress;
+      let verifiedAddress = inputAddress.trim();
 
-      if (inputAddress.endsWith(".eth")) {
+      if (verifiedAddress.includes('.')) {
+        // Potential ENS name
         if (isLoading) {
           // Wait for ENS resolution to complete
           await new Promise(resolve => setTimeout(resolve, 2000));
         }
         if (!ensAddress) {
-          // Check if the input is a valid Ethereum address despite ENS resolution failure
-          if (inputAddress.startsWith("0x") && inputAddress.length === 42) {
-            verifiedAddress = inputAddress;
-          } else {
-            throw new Error("Invalid ENS name or ENS resolution failed");
-          }
-        } else {
-          verifiedAddress = ensAddress;
+          throw new Error("Invalid ENS name or ENS resolution failed");
         }
-      } else if (!inputAddress.startsWith("0x") || inputAddress.length !== 42) {
-        throw new Error("Invalid Ethereum address format");
+        verifiedAddress = ensAddress;
+      } else {
+        // Check if it's a valid Ethereum address
+        if (!isAddress(verifiedAddress)) {
+          throw new Error("Invalid Ethereum address format");
+        }
+        // Normalize the address to checksum format
+        verifiedAddress = getAddress(verifiedAddress);
       }
 
-      // Additional checks can be added here (e.g., checksum validation)
+      // Ensure the address is valid after all checks
+      if (!isAddress(verifiedAddress)) {
+        throw new Error("Invalid address after verification");
+      }
 
       onVerified(verifiedAddress);
     } catch (err) {
+      console.error("Verification error:", err);
       setError(err instanceof Error ? err.message : "Verification failed");
     } finally {
       setIsVerifying(false);

components/OnchainAttestation.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { EAS, SchemaEncoder } from "@ethereum-attestation-service/eas-sdk";
-import { ethers } from "ethers";
-import { useAccount, usePublicClient } from "wagmi";
+import { BrowserProvider, JsonRpcSigner } from "ethers";
+import { useAccount, useWalletClient } from "wagmi";
 
 // This component uses the Ethereum Attestation Service (EAS) protocol
 // to create attestations on both Base and Optimism rollups
@@ -29,15 +29,19 @@ interface OnchainAttestationProps {
   ensName: string | null;
 }
 
-const OnchainAttestation: React.FC<OnchainAttestationProps> = ({ onAttestationComplete, poaps, ensName }): JSX.Element => {
+const OnchainAttestation: React.FC<OnchainAttestationProps> = ({
+  onAttestationComplete,
+  poaps,
+  ensName
+}) => {
   const { address } = useAccount();
-  const publicClient = usePublicClient();
+  const { data: walletClient } = useWalletClient();
   const [isAttesting, setIsAttesting] = useState<boolean>(false);
   const [attestationStatus, setAttestationStatus] = useState<string | null>(null);
   const [selectedRollup, setSelectedRollup] = useState<"base" | "optimism">("base");
 
   const handleAttestation = async (): Promise<void> => {
-    if (!address || !publicClient) {
+    if (!address || !walletClient) {
       setAttestationStatus("Error: Wallet not connected");
       return;
     }
@@ -47,9 +51,12 @@ const OnchainAttestation: React.FC<OnchainAttestationProps> = ({ onAttestationCo
 
     try {
       const eas = new EAS(EAS_CONTRACT_ADDRESS);
-      const provider = new ethers.BrowserProvider(publicClient.transport);
+      if (!walletClient) {
+        throw new Error("Wallet client is not available");
+      }
+      const provider = new BrowserProvider(walletClient.transport);
       const signer = await provider.getSigner();
-      await eas.connect(signer);
+      eas.connect(signer as unknown as JsonRpcSigner);
 
       const schemaEncoder = new SchemaEncoder("address userAddress,uint256 tokenId,uint256 timestamp,address attester");
       const poapData = poaps[0]; // Assuming we're using the first POAP for simplicity

components/WalletConnectionGuide.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
+import { RainbowKitCustomConnectButton } from "../components/scaffold-eth";
 
 interface WalletConnectionGuideProps {
   theme: string;
 }
 
-const WalletConnectionGuide: React.FC<WalletConnectionGuideProps> = ({ theme }) => {
+const WalletConnectionGuide: React.FC<WalletConnectionGuideProps> = ({ theme }: WalletConnectionGuideProps) => {
   return (
     <div className={`p-6 ${theme === "dark" ? "bg-gray-800" : "bg-white"} rounded-lg shadow-lg`}>
       <div className="mt-6">

package.json

@@ -71,9 +71,9 @@
     "@testing-library/react": "^16.0.0",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/jest": "^29.5.12",
-    "@types/node": "^22.2.0",
+    "@types/node": "^22.4.0",
     "@types/nprogress": "^0",
-    "@types/react": "^18.0.9",
+    "@types/react": "^18.3.3",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^5.39.0",

tsconfig.json

@@ -29,7 +29,8 @@
     "baseUrl": ".",
     "types": [
       "jest",
-      "node"
+      "node",
+      "react"
     ],
     "plugins": [
       {