Skip to content

<WalletProvider>

<WalletProvider> est le context provider React du portefeuille intégré.

Exemple

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

Référence

props.wallet

Le portefeuille initialisé tel que renvoyé par createWallet.

Hooks

Les hooks suivants sont exportés par @money-sdk/react et doivent être appelés à l'intérieur d'un <WalletProvider> :

useWallet()

Renvoie l'instance Wallet passée au provider. Utilisez-le lorsque vous avez besoin d'appeler des méthodes comme getProvider, disconnect ou experimental_expand en dehors du 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()

Renvoie un booléen indiquant si l'utilisateur a connecté le portefeuille à votre dApp. Utile pour conditionner l'UI :

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

function App() {
  const connected = useConnected()

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

useObservable(observable)

Hook bas niveau pour s'abonner à un observable interne exposé par l'instance du portefeuille. Vous n'en aurez généralement pas besoin directement — préférez useConnected pour l'état de connexion.