Wallet Connection and Transaction Execution
This guide is primarily for developers and potentially project managers who want to understand the Passport integration process.
Wallet Connection and Transaction Execution with Next.js
This tutorial demonstrates how to integrate Immutable Passport's wallet connection and transaction execution capabilities within a Next.js application. It showcases how to establish a connection to the user's wallet and execute transactions on the Immutable zkEVM network.
Features Overview​
- Wallet Connection: Connect to users' wallets through Immutable Passport
- Transaction Execution: Execute ERC-721 token transfers on Immutable zkEVM
SDK Integration Details​
Wallet Connection​
Establishes a connection to the user's wallet using Passport.
const provider = await passportInstance.connectEvm();
const browserProvider = new BrowserProvider(provider);
const signer = await browserProvider.getSigner();
const [userAddress] = await provider.request({ method: 'eth_requestAccounts' });
The application uses Passport's connectEvm()
method to establish a connection to the user's wallet. This method returns a provider that can be used with ethers.js. The code then creates a BrowserProvider using this provider, gets a signer for transactions, and retrieves the user's Ethereum address.
Transaction Execution​
Shows how to execute transactions, specifically an ERC-721 token transfer, using the connected wallet.
const abi = ['function safeTransferFrom(address from, address to, uint256 tokenId)'];
const contract = new ethers.Contract(erc721Address, abi, signer);
try {
tx = await contract.safeTransferFrom(userAddress, toAddress, tokenId);
// Wait for the transaction to complete
const receipt = await tx.wait();
} catch (error: any) {
// Handle errors
}
The application demonstrates how to interact with an ERC-721 smart contract for transferring NFTs. It creates a contract instance using ethers.js, then calls the safeTransferFrom
method to transfer a token from the user's address to another address. The code also includes error handling and transaction receipt verification.
Running the App​
Prerequisites​
- Node.js and pnpm installed
- An account on Immutable Hub for obtaining API keys
- A created testnet collection with minted tokens on Immutable zkEVM
Setting up the Environment​
Copy
.env.example
to.env.local
and fill in:NEXT_PUBLIC_PUBLISHABLE_KEY=your_publishable_key
NEXT_PUBLIC_CLIENT_ID=your_client_idConfigure your Hub application:
- Add
http://localhost:3000/redirect
as a redirect URI - Add
http://localhost:3000/logout
as a logout URI
- Add
Running Locally​
Install dependencies:
pnpm install
Start the development server:
pnpm dev
Open your browser to http://localhost:3000
Using the App​
- Click the "Send Transaction" button
- Complete the Passport authentication flow if not already logged in
- Approve the transaction in your connected wallet
- The app will handle the transaction and show the result
Summary​
This example demonstrates the integration of Immutable Passport's wallet connection and transaction execution capabilities within a Next.js application. By following this tutorial, developers can implement wallet connections and execute blockchain transactions in their own applications, allowing for seamless interaction with the Immutable zkEVM ecosystem.