https://github.com/mvr-studio/use-dapp-connector
https://github.com/mvr-studio/use-dapp-connector
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mvr-studio/use-dapp-connector
- Owner: mvr-studio
- Created: 2023-03-30T07:16:15.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-12T09:52:40.000Z (about 2 years ago)
- Last Synced: 2025-01-27T10:43:39.225Z (4 months ago)
- Language: TypeScript
- Homepage: https://mvr-studio.github.io/use-dapp-connector/
- Size: 408 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Cardano DApp Connector Hooks
A little easier DApp Connector experience for React.
## Installation
```sh
yarn add @mvr-studio/use-dapp-connector
```
## useDappConnector
Use a Cardano wallet available in `window.cardano`.
```tsx
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`.
```tsx
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`.
```tsx
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`.
```tsx
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](https://github.com/mvr-studio/use-dapp-connector/blob/main/test/e2e/App.tsx)