<WalletProvider>

<WalletProvider>는 임베디드 지갑을 위한 React 컨텍스트 provider입니다.

예제

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

레퍼런스

`props.wallet`

createWallet에서 반환된 초기화된 지갑입니다.

훅

다음 훅들은 @money-sdk/react에서 export되며, 반드시 <WalletProvider> 내부에서 호출해야 합니다:

`useWallet()`

provider에 전달된 Wallet 인스턴스를 반환합니다. 위젯 외부에서 getProvider, disconnect 또는 experimental_expand 같은 메서드를 호출해야 할 때 사용하세요.

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

사용자가 여러분의 dApp에 지갑을 연결했는지 여부를 나타내는 boolean을 반환합니다. UI 게이팅에 유용합니다:

tsx

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

function App() {
  const connected = useConnected()

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

`useObservable(observable)`

지갑 인스턴스가 노출하는 내부 observable을 구독하기 위한 저수준 훅입니다. 일반적으로 직접 사용할 일은 없습니다 — 연결 상태에는 useConnected를 사용하세요.

<WalletProvider> ​

예제 ​

레퍼런스 ​

props.wallet ​

훅 ​

useWallet() ​

useConnected() ​

useObservable(observable) ​