A robust solution to connect and interact with Bitcoin wallets. The package provides components and hooks for easy integration within a React application.
Use the package manager of your choice to install bitcoin-wallet-adapter
.
npm install bitcoin-wallet-adapter
# or
yarn add bitcoin-wallet-adapter
A provider component that should be wrapped around your application to enable wallet functionalities.
If your project has an extra Redux provider make sure it acts as a wrapper for this provider
import { WalletProvider } from "bitcoin-wallet-adapter";
<WalletProvider>
<YourApp />
</WalletProvider>;
A component to render a multi-connect button for various wallet connections.
import { ConnectMultiButton } from "bitcoin-wallet-adapter";
<ConnectMultiButton
walletImageClass="w-[60px]"
walletLabelClass="pl-3 font-bold text-xl"
walletItemClass="border w-full md:w-6/12 cursor-pointer border-transparent rounded-xl mb-4 hover:border-green-500 transition-all"
headingClass="text-green-700 text-4xl pb-12 font-bold text-center"
buttonClassname="bg-green-300 hover:bg-green-400 rounded-xl flex items-center text-green-800 px-4 py-1 font-bold"
InnerMenu={InnerMenu} // component to show a menu when wallet is connected
icon=""
iconClass=""
balance={1000} // comment it if you dont know the wallet balance
/>;
buttonClassname (string | Optional)
: Overrides style on buttonheadingClass (string | Optional)
: Overrides style on modal headingwalletItemClass (string | Optional)
: Overrides style on wallets divwalletImageClass (string | Optional)
: Overrides style on the wallet imageswalletLabelClass (string | Optional)
: Overrides style on the wallet labelsInnerMenu (React Component | Optional)
: Overrides default menu when wallet is connectedicon (string | Optional)
: Overrides default image in modaliconClass (string | Optional)
: Overrides default image in modal classnamebalance (number | Optional)
: shows the balance innstead of wallet address when wallet is connected
A component to pay BTC from connected wallet to a given address
amount (number)
: Number of Sats to Transferreceipent (string)
: BTC Address that will receive the satsbuttonClassname (string | Optional)
: Overrides button styling
import { PayButton } from "bitcoin-wallet-adapter";
<PayButton
amount={5000}
receipent={"bc1qrwtu9ec4sl6txnxqhvgmuavm72gv32jsaz2mks"}
/>;
A component to render notifications within the application.
import { Notification } from "bitcoin-wallet-adapter";
<Notification />;
A hook to fetch wallet addresses.
import { useWalletAddress } from "bitcoin-wallet-adapter";
const walletDetails = useWalletAddress();
A hook to facilitate the PSBT signing process for various wallets (Unisat, Xverse and Leather/Hiro).
import { useSignTx } from "bitcoin-wallet-adapter";
const MyComponent = () => {
const { signTx, loading, result, error } = useSignTx();
const handleSellSign = async () => {
const signOptions = {
psbt: yourPsbtBase64,
network: "Mainnet",
action: "sell",
inputs: [
{
address: walletDetails.ordinal_address,
publickey: walletDetails.ordinal_pubkey,
sighash: 131,
index: [0],
},
],
};
await signTx(signOptions);
};
};
const handleDummySign = async () => {
const signOptions = {
psbt: yourPsbtBase64,
network: "Mainnet",
action: "dummy",
inputs: [
{
address: walletDetails.cardinal_address,
publickey: walletDetails.cardinal_pubkey,
sighash: 1,
index: [0],
},
]
};
await signTx(signOptions);
};
};
const handleBuySign = async () => {
const inputs = [];
new Array(inputLength).fill(1).map((item: number, idx: number) => {
if (idx !== 2)
inputs.push({
address: walletDetails.cardinal_address,
publickey: walletDetails.cardinal_pubkey,
sighash: 1,
index: [idx],
});
});
const signOptions = {
psbt: yourPsbtBase64,
network: "Mainnet",
action: "buy",
inputs
};
await signTx(signOptions);
};
};
useEffect(() => {
// Handling Wallet Sign Results/Errors
if (result) {
// Handle successful result from wallet sign
console.log("Sign Result:", result);
if (result) {
listOrdinal(result);
}
}
if (error) {
// Handle error from wallet sign
console.error(" Sign Error:", error);
// Turn off loading after handling results or errors
setLoading(false);
alert(error.message || "wallet error occurred");
}
}, [result, error]);
A hook to facilitate the message signing process for various wallets (Magiceden, Unisat, Xverse and Leather/Hiro).
import { useMessageSign } from "bitcoin-wallet-adapter";
const MyComponent = () => {
const { signMessage, loading, result, error } = useMessageSign();
const handleMessageSign = async () => {
const messageOptions = {
network: "mainnet",
address: walletDetails.ordinal_address,
message: "Any Message Here",
wallet: walletDetails.wallet,
};
await signMessage(messageOptions);
};
};
useEffect(() => {
// Handling Wallet Sign Results/Errors
if (result) {
// Handle successful result from wallet sign
console.log("Message Sign Result:", result);
if (result) {
delistOrdinal(result);
}
}
if (error) {
// Handle error from wallet sign
console.error(" Sign Error:", error);
// Turn off loading after handling results or errors
setLoading(false);
alert(error.message || "wallet error occurred");
}
}, [result, error]);
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
This project is licensed under the MIT License - see the LICENSE.md file for details.