Skip to main content

​
Import

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

​
Usage

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

​
Return Type: UseOpenWalletModalReturnType

The hook returns an object with the following properties: 
type UseOpenWalletModalReturnType = {
  setOpenWalletModal: (isOpen: boolean, options?: WalletOptions) => void
  openWalletModalState: boolean
}

​
Properties

​
setOpenWalletModal

(isOpen: boolean, options?: WalletOptions) => void Function to open or close the Wallet modal. Parameters:
ParameterTypeDescription
isOpenbooleanWhether the modal should be open (true) or closed (false)
optionsWalletOptionsOptional settings for the Wallet modal
interface WalletOptions {
  defaultNavigation?: Navigation
}

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

​
openWalletModalState

boolean The current open state of the Wallet modal (true if open, false if closed).

​
Notes

This hook provides methods to control the Wallet Inventory modal that allows users to view their tokens and NFTs. The Wallet modal displays all tokens, NFTs and collectibles present in the connected wallet.
⌘I