メインコンテンツへスキップ

インポート

import { useOpenWalletModal } from '@0xsequence/wallet-widget'

使い方

import './App.css'
import { useOpenWalletModal } from '@0xsequence/wallet-widget'

function App() {

  // Get the function to open/close the wallet modal
  const { setOpenWalletModal } = useOpenWalletModal()

  // Function to handle opening the wallet inventory home page
  const openWalletWidget = () => {
    setOpenWalletModal(true) // Open the wallet modal to view tokens
  }

  // Function to handle opening the wallet inventory swap page
  const openWalletWidgetSwapPage = () => {
    setOpenWalletModal(true, { defaultNavigation: { location: 'swap' } }) // Open the wallet modal to view tokens
  }

  return (
    <div>
      <button
        onClick={openWalletWidget}
        title="Wallet Widget"
      >
        Open Wallet Widget Home Page
      </button>

      <button
        onClick={openWalletWidgetSwapPage}
        title="Wallet Widget"
      >
        Open Wallet Widget Swap Page
      </button>
    </div>
   
  )
}

export default App

返却型:UseOpenWalletModalReturnType

このフックは以下のプロパティを持つオブジェクトを返します。
type UseOpenWalletModalReturnType = {
  setOpenWalletModal: (isOpen: boolean, options?: WalletOptions) => void
  openWalletModalState: boolean
}

プロパティ

setOpenWalletModal

(isOpen: boolean, options?: WalletOptions) => void ウォレットモーダルを開閉する関数です。 パラメータ:
パラメータ説明
isOpenbooleanモーダルが開いているか(true)、閉じているか(false
optionsWalletOptionsWalletモーダルのオプション設定(任意)
interface WalletOptions {
  defaultNavigation?: Navigation
}

type Navigation =
  | BasicNavigation
  | CoinDetailsNavigation
  | CollectibleDetailsNavigation
  | CollectionDetailsNavigation
  | TransactionDetailsNavigation
  | SendCoinNavigation
  | SendCollectibleNavigation
  | SwapCoinNavigation
  | SwapCoinListNavigation

openWalletModalState

boolean ウォレットモーダルの現在の開閉状態(開いていればtrue、閉じていればfalse

補足

このフックは、ユーザーが自身のトークンやNFTを閲覧できるウォレットインベントリモーダルの制御メソッドを提供します。ウォレットモーダルでは、接続中のウォレット内のすべてのトークン、NFT、コレクティブルが表示されます。
I