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