Quick Start
Hello my friend 👋 Welcome onboard 🛳
Suiet wallet kit is a wallet aggregator for DApps to interact with all the wallets in Sui💧 ecosystem easily. 🥳
Let’s try our kit and empower your dapp in minutes. 🪄
:::tip Sui has released devnet 0.29 and introduced a bunch of new features as well as breaking changes. As a professional wallet kit, we also followed up the changes and upgraded our version to 0.2.x.
So We recommend you to walk through our Migration Guide To 0.2.x. :::
⭐️ Have fun with Demo Playground
🔨 Setup
First of all, let’s install the npm package @suiet/wallet-kit to your project.
npm package: https://www.npmjs.com/package/@suiet/wallet-kit
npm install @suiet/wallet-kit
# or
yarn add @suiet/wallet-kit
# or
pnpm install @suiet/wallet-kit
Then wrap your <App /> with our context provider, so that our hooks can work nicely inside your dapp.
Oh don’t forget to import our css to enable default styles 🎨
import { WalletProvider } from "@suiet/wallet-kit";
import "@suiet/wallet-kit/style.css";
// take react@18 project as an example
ReactDOM.createRoot(document.getElementById("root")).render(
<WalletProvider>
<App />
</WalletProvider>
);
By default, suiet kit will load all the preset wallets to the list💡
🕹 Place ConnectButton
:::tip We recommend to use hooks together with our components. But if you want to use our hooks only with your customized UI components, follow the instruction #Use Hooks Only :::
Just import our <ConnectButton /> and place it to wherever you like, such as Header.
import {ConnectButton} from '@suiet/wallet-kit';
const App = () => {
return (
<>
<header>
<ConnectButton/>
</header>
<
... />
</>
)
};
🪝 Use Wallet Capabilities
After your dapp connects to a wallet that supports Sui wallet-standard, your dapp is already empowered and able to call wallet capabilities.🎉
Please explore the docs for further usage information 💡
import {useWallet} from '@suiet/wallet-kit';
import {TransactionBlock} from "@mysten/sui.js";
const App = () => {
const wallet = useWallet()
useEffect(() => {
if (!wallet.connected) return;
console.log('connected wallet name: ', wallet.name)
console.log('account address: ', wallet.account?.address)
console.log('account publicKey: ', wallet.account?.publicKey)
}, [wallet.connected])
// launch a move call for the connected account via wallet
async function handleMoveCall() {
const tx = new TransactionBlock();
const packageObjectId = "0x1";
tx.moveCall({
target: `${packageObjectId}::nft::mint`,
arguments: [tx.pure("Example NFT")],
});
await wallet.signAndExecuteTransactionBlock({
transactionBlock: tx,
});
}
// launch a move call for the connected account via wallet
async function handleSignMessage() {
await wallet.signMessage({
message: new TextEncoder().encode("Hello World"),
});
}
return (<.../>)
};
Continue to BUIDL your amazing dapp and join the incoming Sui-nami! 🌊
📚 More Tutorials
Check out this section: #Tutorials
💧 Demo Playground
Feel free to play with our Demo Playground 🔗 (Github repo)