@opensui/wallet-kit
v0.1.27
Published
OpenSui wallet kit is a React toolkit for DApps to interact with all the wallets in Sui easily.
Downloads
15
Readme
OpenSui wallet kit, connect with every wallet on Sui
OpenSui wallet kit is a React toolkit for DApps to interact with all the wallets in Sui easily.
Features
- Support all the official Sui Wallet Standard defined by Sui
- Automatically detect all the installed wallets implemented wallet-standard
- Provide
UI components
andReact Provider
&Hooks
- Can customize component style and many hooks
Getting started
To get started in a React application, you can install the following packages:
npm install @opensui/wallet-kit
Usage
At the root of your application, you can then set up the wallet kit provider:
import { WalletKitProvider } from "@opensui/wallet-kit";
export function App() {
return <WalletKitProvider>{/* Your application... */}</WalletKitProvider>;
}
The WalletKitProvider also supports an adapters prop, which lets you override the default Sui Wallet Adapters.
You can then add a connect-wallet button to your page:
import { ConnectWalletButton } from "@opensui/wallet-kit";
function ConnectToWallet() {
return (
<div>
Connect wallet to get started:
<ConnectWalletButton />
</div>
);
}
To get access to the currently connected wallet, use the useWalletKit() hook to interact with the wallet, such as proposing transactions:
import { useWalletKit } from "@opensui/wallet-kit";
export function SendTransaction() {
const { signAndExecuteTransaction } = useWalletKit();
const handleClick = async () => {
await signAndExecuteTransaction({
kind: "moveCall",
data: {
packageObjectId: "0x2",
module: "devnet_nft",
function: "mint",
typeArguments: [],
arguments: [
"name",
"capy",
"https://cdn.britannica.com/94/194294-138-B2CF7780/overview-capybara.jpg?w=800&h=450&c=crop",
],
gasBudget: 10000,
},
});
};
return (
<Button onClick={handleClick} disabled={!connected}>
Send Transaction
</Button>
);
}
More Info
Here are our official website opensuiwallet.com & kit docs
Demo
Here is a Demo Playground for you experience.