<WalletProvider>

<WalletProvider> is the React context provider for the embedded wallet.

Example

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

Reference

props.wallet

The initialized wallet as returned by createWallet.

Hooks

The following hooks are exported from @money-sdk/react and must be called inside a <WalletProvider>:

useWallet()

Returns the Wallet instance passed to the provider. Use this when you need to call methods like getProvider, disconnect or experimental_expand outside of the widget.

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

Returns a boolean indicating whether the user has connected the wallet to your dApp. Useful for gating UI:

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

function App() {
  const connected = useConnected()

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

useObservable(observable)

Low-level hook for subscribing to an internal observable exposed by the wallet instance. You generally won't need this directly — prefer useConnected for connection state.