Using Initia Wallet Widget

Overview

To effectively integrate wallet functionalities within the Initia ecosystem, developers need to install and configure the @initia/react-wallet-widget. This guide outlines the steps and coding practices for setting up wallet interactions, managing assets, and executing transactions using the Initia network infrastructure.

npm: @initia/react-wallet-widgetnpm

Tutorial

Step 1: Install dependencies

pnpm add @initia/react-wallet-widget

Step 2: Wrap your application with WalletWidgetProvider

import { WalletWidgetProvider, initWalletWidget } from "@initia/react-wallet-widget"
import { ChainSchema } from "@initia/initia-registry-types/zod"

const L1_CHAIN_ID = "initiation-1"
const L2_CHAIN_ID = "minimove-1"

// For projects built on the Initia Layer 1
const { data: layer } = await axios.get(`https://omni-api.${L1_CHAIN_ID}.initia.xyz/v1/registry/chains/layer1`)

// For Minitia L2s that are registered on the [Initia Registry](https://github.com/initia-labs/initia-registry)
const { data: layer } = await axios.get(`https://omni-api.${L1_CHAIN_ID}.initia.xyz/v1/registry/chains/${L2_CHAIN_ID}`)

// For Minitia L2s that are NOT yet registered on the [Initia Registry](https://github.com/initia-labs/initia-registry)
const { data: layer } = await axios.get("chain.json url")

// For manually registering your L2
const layer = ChainSchema.parse({
  chain_id: L2_CHAIN_ID,
  chain_name: "local-testnet",
  apis: {
    rpc: [{ address: `https://rpc.${L2_CHAIN_ID}.initia.xyz` }],
    rest: [{ address: `https://lcd.${L2_CHAIN_ID}.initia.xyz` }],
    api: [{ address: `https://api.${L2_CHAIN_ID}.initia.xyz` }],
  },
  fees: {
    fee_tokens: [{ denom: "umin", fixed_min_gas_price: 0.15 }],
  },
  bech32_prefix: "init",
})

const initiaWalletWidget = initWalletWidget({ layer })

render(
  <WalletWidgetProvider widget={initiaWalletWidget}>
    <App />
  </WalletWidgetProvider>,
)

Step 3: Interface

interface Wallet {
  address: string
  isLoading: boolean
  onboard(): void
  view(event: React.MouseEvent): void
  disconnect(): Promise<void>
  signArbitrary(data: string | Uint8Array): Promise<string>
  verifyArbitrary(data: string | Uint8Array, signature: string): Promise<boolean>
  requestTx(
    txBodyValue: { messages: { typeUrl: string; value: Record<string, any> }[]; memo?: string },
    gas?: number,
  ): Promise<string>
  requestInitiaTx(tx: { msgs: Msg[]; memo?: string }, gas?: number): Promise<string>
}

The wallet object provides a range of methods to manage wallet operations:

• address: The current wallet address.

• isLoading: Indicates whether the wallet connection is being established.

• onboard(): Triggers the wallet connection process.

• view(event): Displays the wallet interface for managing assets.

• disconnect(): Disconnects the wallet.

• signArbitrary(data): Signs arbitrary data with the wallet.

• verifyArbitrary(data, signature): Verifies a signature against the provided data.

• requestTx(txBodyValue, gas): Signs and broadcasts a transaction, returning the transaction hash.

• requestInitiaTx(tx, gas): Utilizes the @initia/initia.js library to broadcast transactions.

Example Usage

Below is a practical example demonstrating how to use the wallet functions in a React application:

initia.js

import { useAddress, useWallet } from "@initia/react-wallet-widget"
import { MsgSend } from "@initia/initia.js"

const App = () => {
  const address = useAddress()
  const { onboard, view, requestTx } = useWallet()

  if (address) {
    const send = async () => {
      const msgs = [
        MsgSend.fromProto({
          fromAddress: address,
          toAddress: address,
          amount: [{ amount: "1000000", denom: "uinit" }],
        }),
      ]

      // or
      const msgs = [new MsgSend(address, recipientAddress, { [denom]: toAmount(amount) })]
      const transactionHash = await requestInitiaTx({ msgs, memo })
      console.log(transactionHash)
    }

    return (
      <>
        <button onClick={view}>{address}</button>
        <button onClick={send}>Send</button>
      </>
    )
  }

  return <button onClick={onboard}>Connect</button>
}

Cosmos Module

import { useAddress, useWallet } from "@initia/react-wallet-widget"
import { MsgSend } from "cosmjs-types/cosmos/bank/v1beta1/tx"

const App = () => {
  const address = useAddress()
  const { onboard, view, requestTx } = useWallet()

  if (address) {
    const send = async () => {
      const messages = [
        {
          typeUrl: "/cosmos.bank.v1beta1.MsgSend",
          value: MsgSend.fromPartial({
            fromAddress: address,
            toAddress: address,
            amount: [{ amount: "1000000", denom: "uinit" }],
          }),
        },
      ]

      const transactionHash = await requestTx({ messages })
      console.log(transactionHash)
    }

    return (
      <>
        <button onClick={view}>{address}</button>
        <button onClick={send}>Send</button>
      </>
    )
  }

  return <button onClick={onboard}>Connect</button>
}

Conclusion

Integrating the @initia/react-wallet-widget into your application not only enhances user interaction by providing seamless wallet connectivity and management but also aligns your development practices with the robust capabilities of the Initia ecosystem. By following the outlined steps and leveraging the comprehensive API provided by the wallet widget, developers can efficiently implement a wide range of blockchain-related functionalities—from simple transactions to complex contract interactions.