@initia/react-wallet-widget
TypeScript icon, indicating that this package has built-in type declarations

0.129.0 • Public • Published

@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>,
)

Interface

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

  /** The current wallet account. */
  account: AccountData | 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 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>
}

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

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.

Readme

Keywords

none

Package Sidebar

Install

npm i @initia/react-wallet-widget

Weekly Downloads

874

Version

0.129.0

License

none

Unpacked Size

31.1 kB

Total Files

9

Last publish

Collaborators

  • beer-1
  • initia-labs
  • vritra
  • joon9823
  • simcheolhwan