Usando el widget de billetera Initia

Descripción general

Para integrar eficazmente las funcionalidades de billetera dentro del ecosistema Initia, los desarrolladores deben instalar y configurar @initia/react-wallet-widget. Esta guía describe los pasos y las prácticas de codificación para configurar interacciones de billetera, administrar activos y ejecutar transacciones utilizando la infraestructura de red de Initia.

npm: @initia/react-wallet-widgetnpm

Tutorial

Paso 1: instalar dependencias

pnpm add @initia/react-wallet-widget

Paso 2: envuelva su solicitud conWalletWidgetProvider

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

Paso 3: Interfaz

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

El objeto de billetera proporciona una variedad de métodos para administrar las operaciones de billetera:

• address: La dirección actual de la billetera.

• isLoading: Indica si se está estableciendo la conexión de la billetera.

• onboard(): Activa el proceso de conexión de la billetera.

• view(event): Muestra la interfaz de billetera para administrar activos.

• disconnect(): Desconecta la billetera.

• signArbitrary(data): Firma datos arbitrarios con la billetera.

• verifyArbitrary(data, signature): Verifica una firma con los datos proporcionados.

• requestTx(txBodyValue, gas): firma y transmite una transacción, devolviendo el hash de la transacción.

• requestInitiaTx(tx, gas): Utiliza la @initia/initia.jsbiblioteca para transmitir transacciones.

Uso de ejemplo

A continuación se muestra un ejemplo práctico que demuestra cómo utilizar las funciones de billetera en una aplicación React:

inicia.jsMódulo Cosmos

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

Conclusión

La integración @initia/react-wallet-widgeten su aplicación no solo mejora la interacción del usuario al brindar conectividad y administración de billetera sin problemas, sino que también alinea sus prácticas de desarrollo con las sólidas capacidades del ecosistema de Initia. Siguiendo los pasos descritos y aprovechando la API integral proporcionada por el widget de billetera, los desarrolladores pueden implementar de manera eficiente una amplia gama de funcionalidades relacionadas con blockchain, desde transacciones simples hasta interacciones de contratos complejas.