Skip to content

<WalletProvider>

<WalletProvider> es el proveedor de contexto de React para la wallet integrada.

Ejemplo

tsx
// src/index.tsx
import { createWallet } from '@money-sdk/core'
import { WalletProvider } from '@money-sdk/react'

const wallet = createWallet(/* ... */)

function Root() {
  return (
    <WalletProvider wallet={wallet}>
      <App />
    </WalletProvider>
  )
}

Referencia

props.wallet

La wallet inicializada tal y como la devuelve createWallet.

Hooks

Los siguientes hooks se exportan desde @money-sdk/react y deben llamarse dentro de un <WalletProvider>:

useWallet()

Devuelve la instancia Wallet pasada al proveedor. Úsalo cuando necesites llamar a métodos como getProvider, disconnect o experimental_expand fuera del widget.

tsx
import { useWallet } from '@money-sdk/react'

function ConnectButton() {
  const wallet = useWallet()

  const handleClick = async () => {
    const solana = await wallet.getProvider('solana')
    await solana?.connect()
  }

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

useConnected()

Devuelve un booleano que indica si el usuario ha conectado la wallet a tu dApp. Útil para controlar el acceso a la UI:

tsx
import { useConnected } from '@money-sdk/react'

function App() {
  const connected = useConnected()

  return connected ? <Dashboard /> : <Landing />
}

useObservable(observable)

Hook de bajo nivel para suscribirse a un observable interno expuesto por la instancia de la wallet. Por lo general no necesitarás esto directamente: prefiere useConnected para el estado de conexión.