works up until calling linkExternalWallets

Author: proletesseract

examples/passport/logged-in-user-with-nextjs/src/app/globals.css

@@ -15,4 +15,8 @@ body {
 
 .mb-1 {
     margin-bottom: 1rem;
+}
+
+.mt-1 {
+  margin-top: 1rem;
 }

examples/passport/logged-in-user-with-nextjs/src/app/link-external-wallet/page.tsx

@@ -1,13 +1,18 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Button, Heading, Table, Link } from '@biom3/react';
 import NextLink from 'next/link';
 import { passportInstance } from '../utils/setupDefault';
 import { generateNonce } from 'siwe';
-import { useConnect, useSignTypedData } from 'wagmi';
-import { config } from '../utils/wagmiConfig';
-import { metaMask } from 'wagmi/connectors';
+import { Provider } from '@imtbl/sdk/passport';
+
+// Define a type for the window.ethereum object
+declare global {
+  interface Window {
+    ethereum?: any;
+  }
+}
 
 export default function LinkExternalWallet() {
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
@@ -18,12 +23,25 @@ export default function LinkExternalWallet() {
   const [linkingStatus, setLinkingStatus] = useState<string>('');
   const [linkingError, setLinkingError] = useState<string | null>(null);
   const [linkedAddresses, setLinkedAddresses] = useState<string[]>([]);
+  const [isMetaMaskInstalled, setIsMetaMaskInstalled] = useState<boolean>(false);
+
+  // Check if MetaMask is installed
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setIsMetaMaskInstalled(!!window.ethereum);
+    }
+  }, []);
 
-  const { connectAsync } = useConnect({
-    config
-  });
+  // fetch the Passport provider from the Passport instance
+  const [passportProvider, setPassportProvider] = useState<Provider>();
 
-  const { signTypedDataAsync } = useSignTypedData();
+  useEffect(() => {
+    const fetchPassportProvider = async () => {
+      const passportProvider = await passportInstance.connectEvm();
+      setPassportProvider(passportProvider);
+    };
+    fetchPassportProvider();
+  }, []);
 
   const loginWithPassport = async () => {
     if (!passportInstance) return;
@@ -51,11 +69,20 @@ export default function LinkExternalWallet() {
     }
 
     try {
-      // Use metaMask connector specifically instead of generic injected
-      const result = await connectAsync({ connector: metaMask() });
-      if (result?.accounts?.[0]) {
+      if (typeof window === 'undefined' || !window.ethereum) {
+        setLinkingError('MetaMask not installed. Please install MetaMask to continue.');
+        return;
+      }
+
+      const accounts = await window.ethereum.request({ 
+        method: 'eth_requestAccounts' 
+      });
+      
+      if (accounts && accounts.length > 0) {
         setWalletConnected(true);
-        setExternalWalletAddress(result.accounts[0]);
+        setExternalWalletAddress(accounts[0]);
+      } else {
+        throw new Error('No accounts found');
       }
     } catch (error) {
       console.error('Error connecting to wallet:', error);
@@ -80,11 +107,7 @@ export default function LinkExternalWallet() {
       const formattedExternalWalletAddress = externalWalletAddress.toLowerCase() as `0x${string}`;
       const formattedPassportAddress = accountAddress.toLowerCase() as `0x${string}`;
 
-      // Sign the message using EIP-712
-      const signature = await signTypedDataAsync({
-        domain: {
-          chainId: BigInt(1)
-        },
+      const dataToSign = {
         types: {
           EIP712Domain: [
             {
@@ -112,15 +135,43 @@ export default function LinkExternalWallet() {
           ]
         },
         primaryType: "LinkWallet",
+        domain: {
+          chainId: 13473,
+        },
         message: {
           walletAddress: formattedExternalWalletAddress,
           immutablePassportAddress: formattedPassportAddress,
           condition: "I agree to link this wallet to my Immutable Passport account.",
           nonce
         }
+      }
+
+      if (typeof window === 'undefined' || !window.ethereum) {
+        throw new Error('MetaMask not installed');
+      }
+
+      // Sign the message using window.ethereum directly
+      const signature = await window.ethereum.request({
+        method: 'eth_signTypedData_v4',
+        params: [formattedExternalWalletAddress, JSON.stringify(dataToSign)]
       });
 
+      // Import and use our signature validation function
+      const { validateSignatureComprehensive } = await import('../utils/validateEIP712Signature');
+      
+      const isValid = await validateSignatureComprehensive(
+        formattedExternalWalletAddress, // the signer address
+        dataToSign, // the payload
+        signature,
+        window.ethereum // pass the provider for contract wallet validation if needed
+      );
+
+      if (!isValid) {
+        throw new Error('Invalid signature');
+      }
+
       setLinkingStatus('Linking wallet...');
+
 
       // Call the linkExternalWallet method to link the wallet
       const result = await passportInstance.linkExternalWallet({
@@ -129,6 +180,8 @@ export default function LinkExternalWallet() {
         signature,
         nonce
       });
+
+      console.log('result', result);
 
       const linkedAddresses = await passportInstance.getLinkedAddresses();
       setLinkedAddresses(linkedAddresses);
@@ -147,15 +200,39 @@ export default function LinkExternalWallet() {
       <Heading size="medium" className="mb-1">
         Link External Wallet
       </Heading>
-      <Button
-        className="mb-1"
-        size="medium"
-        onClick={loginWithPassport}
-        disabled={isLoggedIn}>
-        {isLoggedIn ? 'Logged In' : 'Login'}
-      </Button>
-
-      <Table>
+
+      <div className="mb-1">    
+        {!isLoggedIn ? (
+          <Button
+            size="medium"
+            onClick={loginWithPassport}>
+            Login with Passport
+          </Button>
+        ) : (
+          <>
+            {!walletConnected && (
+              <Button
+                size="medium"
+                onClick={connectWallet}
+                disabled={walletConnected || !isMetaMaskInstalled}>
+                Connect Metamask
+              </Button>
+            )}
+
+            {walletConnected && (
+              <Button
+                size="medium"
+                onClick={linkWallet}
+                disabled={isLinking || !walletConnected}>
+                {isLinking ? 'Linking...' : 'Link Wallet'}
+              </Button>
+            )}
+          </>
+        )}
+      </div>
+      
+
+      <Table className="mb-1">
         <Table.Head>
           <Table.Row>
             <Table.Cell>Attribute</Table.Cell>
@@ -171,6 +248,10 @@ export default function LinkExternalWallet() {
             <Table.Cell><b>Account Address</b></Table.Cell>
             <Table.Cell>{accountAddress || 'N/A'}</Table.Cell>
           </Table.Row>
+          <Table.Row>
+            <Table.Cell><b>MetaMask Available</b></Table.Cell>
+            <Table.Cell>{isMetaMaskInstalled ? 'Yes' : 'No'}</Table.Cell>
+          </Table.Row>
           <Table.Row>
             <Table.Cell><b>External Wallet</b></Table.Cell>
             <Table.Cell>{externalWalletAddress || 'Not connected'}</Table.Cell>
@@ -196,26 +277,7 @@ export default function LinkExternalWallet() {
         </Table.Body>
       </Table>
 
-
-        <Button
-          size="medium"
-          onClick={connectWallet}
-          disabled={!isLoggedIn || walletConnected}>
-          Connect Wallet
-        </Button>
-
-        {walletConnected && (
-          <Button
-            size="medium"
-            onClick={linkWallet}
-            className="mt-6"
-            disabled={isLinking || !isLoggedIn || !walletConnected}>
-            {isLinking ? 'Linking...' : 'Link Wallet'}
-          </Button>
-        )}
-
-      
-      <div className="mt-4">
+      <div className="mt-1">
         <Link rc={<NextLink href="/" />}>Return to Examples</Link>
       </div>
     </>

examples/passport/logged-in-user-with-nextjs/src/app/utils/isValidSignature.ts

@@ -0,0 +1,25 @@
+// #doc passport-wallets-nextjs-sign-isvalidsignature
+import { Provider } from '@imtbl/passport';
+import { BrowserProvider } from 'ethers';
+import { Contract } from 'ethers';
+
+// https://eips.ethereum.org/EIPS/eip-1271#specification
+// EIP-1271 states that `isValidSignature` must return the following value if the signature is valid
+export const ERC_1271_MAGIC_VALUE = '0x1626ba7e';
+
+export const isValidSignature = async (
+  address: string, // The Passport wallet address returned from eth_requestAccounts
+  digest: string | Uint8Array,
+  signature: string,
+  zkEvmProvider: Provider, // can be any provider, Passport or not
+) => {
+  const contract = new Contract(
+    address,
+    ['function isValidSignature(bytes32, bytes) public view returns (bytes4)'],
+    new BrowserProvider(zkEvmProvider),
+  );
+
+  const isValidSignatureHex = await contract.isValidSignature(digest, signature);
+  return isValidSignatureHex === ERC_1271_MAGIC_VALUE;
+};
+// #enddoc passport-wallets-nextjs-sign-eip712-isvalidsignature