use-has-wallet
is a React hook for detecting if specific wallet extensions are installed in the user's browser. It's based on EIP-6963 using the mipd
library of various wallet providers to check for their presence.
You can install use-has-wallet
via npm:
npm install use-has-wallet
or via yarn:
yarn add use-has-wallet
To use use-has-wallet
, import the hook and use it within your React components. You'll need to pass the RDNS of the wallet you want to check.
import React from 'react';
import { useHasWalletExtension, METAMASK_RDNS } from 'use-has-wallet';
const MyComponent = () => {
const hasMetamask = useHasWalletExtension(METAMASK_RDNS);
return (
<div>
{hasMetamask ? 'Metamask is installed' : 'Metamask is not installed'}
</div>
);
};
export default MyComponent;
The useHasWalletExtension
hook checks if a wallet extension specified by its RDNS is installed.
-
rdns
(string): The registered domain name of the wallet to check.
-
boolean
: A boolean indicating whether the wallet extension is installed.
The package provides constants for common wallet RDNS to simplify usage:
COINBASE_WALLET_RDNS
COINBASE_SMART_WALLET_RDNS
METAMASK_RDNS
RAINBOW_RDNS
WALLETCONNECT_RDNS
import {
COINBASE_WALLET_RDNS,
COINBASE_SMART_WALLET_RDNS,
METAMASK_RDNS,
RAINBOW_RDNS,
WALLETCONNECT_RDNS,
} from 'use-has-wallet';
import React from 'react';
import {
useHasWalletExtension,
METAMASK_RDNS,
WALLETCONNECT_RDNS,
} from 'use-has-wallet';
const WalletChecker = () => {
const hasMetamask = useHasWalletExtension(METAMASK_RDNS);
const hasWalletConnect = useHasWalletExtension(WALLETCONNECT_RDNS);
return (
<div>
<div>Metamask: {hasMetamask ? 'Installed' : 'Not Installed'}</div>
<div>
WalletConnect: {hasWalletConnect ? 'Installed' : 'Not Installed'}
</div>
</div>
);
};
export default WalletChecker;
Contributions are welcome! Please open an issue or submit a pull request if you have any improvements or suggestions.
use-has-wallet
is released under the MIT License.