@mohaijiang/deploy-test v0.1.2

Vue Sui Wallet

Explore the code on Github | View demo

A simple login/logout button that works with Vue3 & Sui Wallets (support all sui-kit based wallets).

It exposes the functionality of the wallet in an easy to use composable. You can also inject the functionality if you are using the Options API.

It saves the connected wallet address and is persistent on app restarts (Similar to "log in/logout" auth behavior).

Table of Contents

1. Installation
2. Features
   1. Login Button
   2. Access logged in account, provider and API
   3. Options Api
   4. Client State
3. Sui Wallet API
   1. Optional Variables
   2. Example
4. Props available
   1. SuiConnectButton

Installation

1. Install using your package manager(npm, yarn, pnpm)

npm i vue-sui-wallet

yarn add vue-sui-wallet

pnpm add vue-sui-wallet

2. Add the following code in the main.js file

import VueSuiWallet from "vue-sui-wallet";
import "../node_modules/vue-sui-wallet/dist/style.css";

// this can be safely skipped if already in your main.js
const app = createApp(App);

app.use(VueSuiWallet);

// this is probably skipped, it should be on your main.js file.
app.mount('#app')

Features

Login Button

The component is global, you don't need to import it per-component. You can render it using the following code.

<sui-connect-button></sui-connect-button>

Find a list of the button's props here

Access logged in account, provider and API

You can use the composable inside your <script setup> using the following code.

const {suiWallet, account, provider} = useSuiWallet();

Scroll to Sui Wallet API section to view more information.

Options API

If you are not using the composition API, you can still inject all the variables that are provided by this plugin.

The following variables are available:

This is an example of how the "useSuiWallet" composable injects these variables.

const provider = inject("suiAuthProvider");
const account = inject("suiAuthAccount");
const suiWallet = inject("suiWallet");
const walletProviders = inject("suiWalletProviders");

Client State (account, provider)

Upon authentication, the system saves 2 variables in the localStorage that you can use at any point.

Sui Wallet API

You can easily use the sui wallet API by importing it like:

const {suiWallet} = useSuiWallet();

Then, you can call any of the functions that sui wallet extension has.

Example of usage

Using the composable as it follows, you can Mint an NFT by SUI.

// This will work only if you are already logged in using your wallet.
// Otherwise, an Error is thrown.

const {suiWallet} = useSuiWallet();

suiWallet.signAndExecuteTransaction({
  data:{
    packageObjectId: '0x0000000000000000000000000000000000000002',
    module: 'devnet_nft',
    function: 'mint',
    typeArguments: [],
    arguments: ["Example NFT","An NFT created by Sui Wallet",
      "ipfs://QmZPWWy5Si54R3d26toaqRiqvCH7HkGdXkxwUgCm2oKKM2?filename=img-sq-01.png"],
    gasBudget: 5000
  }}
).then(res=>{
  alert('Transaction completed successfully. <br>' +res.certificate.transactionDigest+ '')
  console.log(res);
}).catch(e=>{
  console.log(e);
});

Props available

SuiConnectButton