Skip to content

<WalletProvider>

<WalletProvider> ist der React-Context-Provider für das Embedded Wallet.

Beispiel

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

Referenz

props.wallet

Das initialisierte Wallet, wie es von createWallet zurückgegeben wird.

Hooks

Die folgenden Hooks werden aus @money-sdk/react exportiert und müssen innerhalb eines <WalletProvider> aufgerufen werden:

useWallet()

Gibt die Wallet-Instanz zurück, die dem Provider übergeben wurde. Verwende dies, wenn du außerhalb des Widgets Methoden wie getProvider, disconnect oder experimental_expand aufrufen musst.

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

Gibt einen Boolean zurück, der angibt, ob der Nutzer das Wallet mit deiner dApp verbunden hat. Nützlich, um UI einzuschränken:

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

function App() {
  const connected = useConnected()

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

useObservable(observable)

Low-Level-Hook zum Abonnieren eines internen Observable, das von der Wallet-Instanz bereitgestellt wird. In der Regel wirst du dies nicht direkt benötigen – bevorzuge useConnected für den Verbindungsstatus.