Skip to content

Latest commit

 

History

History
100 lines (71 loc) · 2.64 KB

README.md

File metadata and controls

100 lines (71 loc) · 2.64 KB
Raw

Vuiet

Vuiet is a minimal wallet manager built on the Sui blockchain for Vue 3.

Demo

Basic code examples can be found on our demo page - vuiet.dev

Getting Started

Installation:

npm install -S vuiet

Setup

// main.ts (App entry point)
import { createApp } from 'vue'
import Vuiet from 'vuiet'

// Needed to load tailwind classes for the components.
// If you're not planning on using the built-in components there's no need to import it.
import 'vuiet/dist/style.css'

const app = createApp(App)

app.use(SuiWallet, {
  autoConnect: true,
  chainOverwrite: {
    SUI_DEVNET: {
      faucetUrl: 'https://faucet.devnet.sui.io/gas'
    }
  }
})

app.mount('#app')

Options

autoConnect (default true, optional)

Whenever to connect to the previous wallet on page reload.

When enabled the wallet name is store in local storage with key VUIET__PREV_WALLET_NAME. Deleting the entry will make the lib "forget" it, but will not auto-disconnect the user.


chain (default SUI_DEVNET)

What chain to use - this option is subject to change.


chainOverwrite (optional)

Overwrites the chain defaults. Can be useful to specify faucet urls since by default they're not specified.

Values that can be overwritten: nodeUrl, displayName, key and faucetUrl

  • Valid chains are SUI_DEVNET, SUI_TESTNET and SUI_MAINNET

shouldGlobal (optional)

Whenever to add the wallet to the global vue instance. If enabled wallet will be added to vue's globalProperties as $wallet.

Basic Usage

<template>
  <p @click="$wallet.disconnect()">Address: {{ $wallet.address }}</p>
  <p>Balance: {{ balance }}</p>
  <!-- Balance is by default SUI -->
  <!-- If you want to normalize it divide by 1e9 -->

  <button @click="$wallet.select('Suiet')">Connect (Suiet)</button>
</template>

<script setup>
  import { useWallet, useCoinBalance } from 'vuiet'
  const $wallet = useWallet()
  const { balance } = useCoinBalance()
</script>

Component Usage

⚠️ Components aren't as tested and modular as I wanted them to be at the moment. If you have any suggestions or found a bug feel free to open an issue.

<template>
  <p @click="$wallet.disconnect()">Address: {{ $wallet.address }}</p>

  <WalletMultiButton />
</template>

<script setup>
  import { useWallet, WalletMultiButton } from 'vuiet'
  const $wallet = useWallet()
</script>