Skip to content

mvr-studio/use-dapp-connector

Repository files navigation

Cardano DApp Connector Hooks

A little easier DApp Connector experience for React.

Installation

yarn add @mvr-studio/use-dapp-connector

useDappConnector

Use a Cardano wallet available in window.cardano.

import { useDappConnector } from '@mvr-studio/use-dapp-connector'
// walletName - any CIP-30 compatible Cardano wallet.
const Component = () => {
  const { walletApi, enable, isEnabled, isEnabling, error, isReady, apiVersion, name, icon } = useDappConnector({
    walletName: 'lace'
  })

  const fetchNetworkId = async () => {
    const networkId = await api?.getNetworkId()
    // Do something with networkId
  }
}

useDappConnector Props

Name Type Default Description
walletName Wallet Name (string) Name of wallet to enable
limitNetwork NetworkId (number) null Limit network to Mainnet (1) or Preprod/Preview (0)
throwable boolean false Should throw errors (true) or just leave them in error variable

useCardanoWallets

It helps to list all Cardano wallets discoverable in window.cardano.

Simple use

Lists all Cardano wallets under wallets.

import { useCardanoWallets } from '@mvr-studio/use-dapp-connector'

const Component = () => {
  const { fetchWallets, wallets } = useCardanoWallets()

  // 1. On load fetching, add timeout, because some wallets like Nami tend to load slower.
  useEffect(() => {
    setTimeout(() => fetchWallets, 1000)
  }, [])

  // 2. On events like onClick.
  const onConnectWalletClick = () => {
    fetchWallets()
    setConnectWalletModalVisible(true)
  }
}

Allowlist

Lists wallets allowed by allowlist in wallets.

import { useCardanoWallets } from '@mvr-studio/use-dapp-connector'

const Component = () => {
  // It lists Lace and Eternl in `wallets`, the rest of Cardano wallets found in
  const { wallets } = useCardanoWallets({ allowlist: ['lace', 'eternl'] })
}

Allowlist and restExperimental

Lists wallets allowed by allowlist in wallets, the rest of wallets found will be available in experimentalWallets.

import { useCardanoWallets } from '@mvr-studio/use-dapp-connector'

const Component = () => {
  // It lists Lace and Eternl in `wallets`, the rest of Cardano wallets found in
  const { wallets, experimentalWallets } = useCardanoWallets({ allowlist: ['lace', 'eternl'], restExperimental: true })
}

useCardanoWallets Props

Name Type Default Description
allowlist? WalletName[] An optional list of allowed wallets to list in wallets.
restExperimental? boolean Determines if the rest of wallets found in window.cardano should be listed in experimentalWallets or not.

Extended example