Liquidlink

Developers can also integrate IOTA into their Dapps using the Snap.

This page shows how to integrate MetaMask with IOTA Snap in a Next.js frontend so users can log in to IOTA with MetaMask.

Prerequisites

Node.js 18+
MetaMask desktop extension installed and unlocked
Next.js project (App Router or Pages Router)

Install

# Nextjs
npm create next-app@latest --ts

# install IOTA SDK
npm install @iota/dapp-kit @iota/iota-sdk  @iota/wallet-standard

# Add the IOTA Snap integration
npm install @liquidlink-lab/iota-snap-for-metamask

Import

import {
metaMaskAvailable,
registerIotaSnapWallet,
} from "@liquidlink-lab/iota-snap-for-metamask";

Integration Steps

Check MetaMask availability : Use metaMaskAvailable() to confirm MetaMask is present. Avoid calling wallet APIs during SSR.
Register IOTA Snap wallet: Call registerIotaSnapWallet() to add the IOTA Snap provider into your wallet registry/list. MetaMask may prompt users to install/enable the Snap.
Connect Iota snap to login: Trigger the provider’s connect flow from your UI to let users log in to IOTA with MetaMask and manage their IOTA account.

The remaining flow including manage the wallet and executing transactions is handle by the IOTA SDK. Everything else remains the same, with no additional changes required.

IOTA Snap wallet

Link: http://snap.liquidlink.io/

Github Link: https://github.com/Liquidlink-Lab/iota-snap-package-main/tree/main/frontend

Although you can use the IOTA Snap to sign transactions and manage your wallet, MetaMask cannot display IOTA wallet assets. You can use snap.liquidlink.io to manage your asset