Skip to main content

Quick Start Guide for Dapp

Here's a quick start guide on setting up INTMAX WalletSDK in your React dApp, which can be adapted for Next.js with minor adjustments. This dApp will let you connect to any compatible web wallet:

Installation​

Prerequisites: Node.js 18.0+

For your dApp connection, you'll need to install intmax-walletsdk and import intmax-walletsdk/dapp for specific dApp functionalities.

npm install intmax-walletsdk

Usage​

Import and Create a New Client Using intmaxbDappClient​

Start by importingintmaxDappClient from walletnext/dapp and configuring it. To configure it, you need to set a name, wallet URL, metadata of dapp, and a provider.

// App.tsx

import { ethereumProvider, intmaxDappClient } from "intmax-walletsdk/dapp";

const createsdk = (walletUrl: string) => {
  return intmaxDappClient({
    wallet: { url: walletUrl, name: "DEMO Wallet", window: { mode: "iframe" } },
    metadata: DAPP_METADATA,
    providers: { eip155: ethereumProvider() },
  });
};

Your metadata should contain the name, description, dApp icon of the dApp.

Example​

const DEFAULT_WALLET_URL = "https://wallet.intmax.io";
const DAPP_METADATA = {
  name: "Dapp Example",
  description: "This is a simple example of how to use the dapp client.",
  icons: [DEFAULT_DAPP_ICON_URL],
};

In this example, intmaxDappClient is configured to use ethereumProvider which is a custom Web3 provider from the SDK. Check out the ethereumProvider docs for more configuration options. After configuring the client, you can use it by passing in the wallet URL of your choice.

const sdk = createsdk(DEFAULT_WALLET_URL);

Initialize wallet connection​

To connect to the wallet account, initialize the provider and then use eth_requestAccounts the method to initiate a walletnext pairing process between dApp and wallet. the eth_accounts fetches the accounts available in the wallet.

Example​

const handleConnect = async () => {
  const ethereum = await sdk.provider("eip155");
  await ethereum.request({ method: "eth_requestAccounts", params: [] });
  const accounts = (await ethereum.request({ method: "eth_accounts", params: [] })) as string[];
};

Sign Transaction​

To set up a function to sign transactions, invoke the eth_sign method. This initiates the wallet popup to sign a transaction that can be used at a later time. This method requires the wallet address and message to be signed as parameters.

Example​

const handleSignMessage = async () => {
  if (accounts.length === 0) await handleConnect();

  const ethereum = await sdk.provider("eip155");
  const _accounts = (await ethereum.request({ method: "eth_accounts", params: [] })) as string[];
  const result = await ethereum.request({
    method: "eth_sign",
    params: [_accounts[0], "Hello Webmax"],
  });
};

Send Transaction​

To send a transaction, the eth_sendTransaction method is triggered. This method requires you to pass in the to address, from address, and the value. See other optional params on the API reference page.

Example​

const handleSendTransaction = async () => {
  if (accounts.length === 0) await handleConnect();

  const ethereum = await sdk.provider("eip155");
  const _accounts = (await ethereum.request({ method: "eth_accounts", params: [] })) as string[];
  const result = await ethereum.request({
    method: "eth_sendTransaction",
    params: [{ from: _accounts[0], to: _accounts[0], value: "0x0" }],
  });
};

Switch Wallet Chains​

INTMAX WalletSDK also allows you to switch between different chains in the connected wallet. To do this, call the wallet_switchEthereumChain method and pass the required chain id as a parameter. This creates a confirmation asking the user to switch to the specified network.

Example​

await ethereum.request({ method: "wallet_switchEthereumChain", params: [{ chainId: "0x89" }] });

Send Signed Typed Transaction​

intmaxwalletsdk can be used to handle the signing of typed data using eth_signTypedData_v4 this method. This method is part of the Ethereum Improvement Proposal (EIP) 712, which introduces a standard for typed structured data signing. eth_signTypedData_v4 requires the typed data to be passed as a parameter.

Example​

const handleSignTypedData = async () => {
  if (accounts.length === 0) await handleConnect();

  const typedData = {
    types: {
      EIP712Domain: [
        { name: "name", type: "string" },
        { name: "version", type: "string" },
      ],
      Person: [
        { name: "name", type: "string" },
        { name: "age", type: "uint256" },
      ],
    },
    domain: { name: "Webmax Dapp Example", version: "1" },
    primaryType: "Person",
    message: { name: "Bob", age: 25 },
  };

  const ethereum = await sdk.provider("eip155");
  const _accounts = (await ethereum.request({ method: "eth_accounts", params: [] })) as string[];
  const result = await ethereum.request({
    method: "eth_signTypedData_v4",
    params: [_accounts[0], JSON.stringify(typedData)],
  });

  setResult(result as string);
};

Check out the API reference for more methods supported by WalletNext. For an end-to-end code example, you can check out the dapp example GitHub repository.