@initia/react-wallet-widget

@initia/react-wallet-widget

Getting started

Install dependencies:

pnpm add @initia/react-wallet-widget

If your layer's chain.json has already been registered in initia-labs/initia-registry:

import { WalletWidgetProvider } from "@initia/react-wallet-widget"

render(
  <WalletWidgetProvider chainId="YOUR_CHAIN_ID">
    <App />
  </WalletWidgetProvider>,
)

or, to manually register your layer:

import { ChainSchema } from "@initia/initia-registry-types/zod"

const layer = ChainSchema.parse({
  chain_id: "YOUR_CHAIN_ID",
  chain_name: "YOUR_CHAIN_NAME",
  apis: {
    rpc: [{ address: "YOUR_RPC_URL" }],
    rest: [{ address: "YOUR_LCD_URL" }],
  },
  fees: {
    fee_tokens: [{ denom: "YOUR_FEE_DENOM", fixed_min_gas_price: 0.15 }],
  },
  bech32_prefix: "init",
})

render(
  <WalletWidgetProvider customLayer={layer}>
    <App />
  </WalletWidgetProvider>,
)

Simple example

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>
}

Simple example using @initia/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>
}

Opening the bridge modal

import { useWallet } from "@initia/react-wallet-widget"

const App = () => {
  const { bridge } = useWallet()

  return <button onClick={bridge}>Bridge</button>
}

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

Interface

interface ReactWalletWidget {
  /** The current wallet address */
  address: string

  /** The current offline signer */
  offlineSigner: OfflineAminoSigner | null

  /** The current connected wallet */
  wallet: WidgetWallet | null

  /** Current connected Ethereum provider */
  ethereum: Eip1193Provider | null

  /** Indicates whether the wallet connection is being established */
  isLoading: boolean

  /** Triggers the wallet connection process */
  onboard(): void

  /** Displays the wallet interface for managing assets */
  view(event: React.MouseEvent): void

  /** Signs and broadcasts a transaction, returning the transaction hash */
  requestTx(
    txBodyValue: { messages: { typeUrl: string; value: Record<string, any> }[]; memo?: string },
    options?: { chainId?: string; gas?: number },
  ): Promise<string>

  /** Utilizes the @initia/initia.js library to broadcast transactions */
  requestInitiaTx(tx: { msgs: Msg[]; memo?: string }, options?: { chainId?: string; gas?: number }): Promise<string>

  /** Signs and broadcasts an Ethereum transaction, returning the transaction hash */
  requestEthereumTx(transactionData: TransactionRequest, options?: RequestTxOptions): Promise<string>

  /** Estimate a transaction gas, returning the expected gas required */
  estimateTx(
    txBodyValue: { messages: { typeUrl: string; value: Record<string, any> }[]; memo?: string },
    chainId?: string,
  ): Promise<number>

  /** Utilizes the @initia/initia.js library to estimate transactions */
  estimateInitiaTx(tx: { msgs: Msg[]; memo?: string }, chainId?: string): Promise<number>

  /** Estimate an Ethereum transaction gas, returning the expected gas required */
  estimateEthereumTx(transactionData: TransactionRequest, chainId?: string): Promise<bigint>

  /** Signs arbitrary data with the wallet */
  signArbitrary(data: string | Uint8Array): Promise<string>

  /** Verifies a signature against the provided data */
  verifyArbitrary(data: string | Uint8Array, signature: string): Promise<boolean>

  /** Disconnects the wallet */
  disconnect(): Promise<void>

  /** Opening the bridge modal */
  bridge(): void
}

interface WidgetConfig {
  /**
   * The chain ID for the wallet connection.
   * This only works if your chain is registered in initia-registry.
   * Default: "interwoven-1".
   */
  chainId?: string

  /**
   * Custom layer configuration.
   * This option is for when your chain is not yet registered in initia-registry.
   */
  customLayer?: Chain

  /**
   * Protobuf types for transaction serialization.
   * Only required if you need custom message signing.
   */
  protoTypes?: Iterable<[string, GeneratedType]>

  /**
   * Amino converters for encoding/decoding transactions.
   * Only required if you need custom message signing.
   */
  aminoConverters?: AminoConverters

  /**
   * Flag to use Keplr as a Direct signer.
   * Set to `true` if you want to use Keplr as a Direct signer instead of a the Amino signer.
   */
  useKeplrAsDirectSigner?: boolean

  /**
   * Additional wallets to be supported by the widget.
   * Use this if you want to declare custom wallet extension providers that we do not provide.
   */
  additionalWallets?: WidgetWallet[]

  /** Function to filter and select specific types of wallets */
  filterWallet?: (type: WidgetWallet) => boolean

  /** Adjustment factor for transaction gas estimation */
  gasAdjustment?: number

  /** URL for api */
  apiUrl?: string

  /** URL for dex api */
  dexApiUrl?: string

  /** URL for block explorer */
  explorerUrl?: string

  /** URL for fetching registry information */
  registryUrl?: string

  /** URL for fetching the swap list configuration */
  swaplistUrl?: string

  /** URL for fetching error messages or logs */
  errorsUrl?: string

  /** URLs for various module configurations */
  modules?: {
    usernames: string
    dex_utils: string
    swap_transfer: string
  }

  /** Theme configuration for the widget UI */
  theme?: WidgetTheme

  /** Interface for the bridge modal */
  bridgeOptions?: {
    /** Default source chain id */
    defaultSrcChainId?: string

    /** Default source asset denom */
    defaultSrcAssetDenom?: string

    /** Default destination chain id */
    defaultDstChainId?: string

    /** Default destination asset denom */
    defaultDstAssetDenom?: string

    /** Determine whether the destination chain should be fixed */
    readOnlyDstChain?: boolean

    /** Determine whether the destination asset should be fixed */
    readOnlyDstAsset?: boolean
  }
}

Usage on testnet

import { TESTNET } from "@initia/react-wallet-widget"

render(<WalletWidgetProvider {...TESTNET} />)

Usage in non-React projects

If you are not using React but wish to use the Wallet Widget in your project, you can leverage the core functionality by installing @initia/wallet-widget.