Skip to main content

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

Next, make sure @mysten/sui is installed in your project. If not, install it as well.

npm install @mysten/sui
# or
yarn add @mysten/sui
# or
pnpm install @mysten/sui

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πŸ’‘

If you want to customize the wallet list, please refer to Customize Wallet 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 {Transaction} from "@mysten/sui/transactions";

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 Transaction();
const packageObjectId = "0x1";
tx.moveCall({
target: `${packageObjectId}::nft::mint`,
arguments: [tx.pure.string("Example NFT")],
});
await wallet.signAndExecuteTransaction({
transaction: tx,
});
}

// launch a move call for the connected account via wallet
async function handleSignMessage() {
await wallet.signPersonalMessage({
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)

🀝 Trusted by great Sui projects​