JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 46
  • Score
    100M100P100Q71113F
  • License MIT

Vue component to connect your dapp to Sui blockchain

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-sui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    vue-sui

    Vue component to connect your dapp to Sui blockchain.

    Includes suidouble library for easier interaction with Move smart contracts.

    Demo

    demo page

    installation

    npm install vue-sui --save

    usage

    There're two components defined. Styled one:

    import { SignInWithSuiButton } from 'vue-sui';

    and basic handler displaying just text in spans you can put into any button or call via method:

    import { SignInWithSui } from 'vue-sui';

<template>
    <button @click="this.$refs.sui.onClick();"><SignInWithSui ref="sui" /></button>
</temlate>

    you can also hide displaying text at all, keeping methods functionality:

    import { SignInWithSui } from 'vue-sui';

<template>
    <button @click="this.$refs.sui.onClick();">Connect to Sui</button>
    <SignInWithSui ref="sui" :visible="false" />
</temlate>

    events

    Both SignInWithSui and SignInWithSuiButtons emit very same set of events. Basically SignInWithSuiButtons is just a styled wrapper over SignInWithSui. So feel free to use any.

    Client: client

    Emits an instance of Sui's SuiClient class connected to the defaultChain blockchain. Usually it's emited very soon after SignInWithSui component is mounted (and doesn't require user to connect her/his wallet), and lets you interact with blockchain in read-only way right after the page load:

    <SignInWithSui @client="onClient" defaultChain="sui:mainnet" />

onClient = async (client) => {
    const data = await client.getObject({id: '0xcc2bd176a478baea9a0de7a24cd927661cc6e860d5bacecb9a138ef20dbab231'});
}

    Adapter: adapter

    Emits an instance of SuiInBrowserAdapter, which follows the logic of StandartAdapter with functions of signAndExecuteTransaction, signTransaction, signAndExecuteTransactionBlock, signTransactionBlock, signMessage, and disconnect. Note that disconnect is not always available (there's no in Sui Wallet) and you may have to ask users to sign off directly in wallet extension.

    <SignInWithSuiButton @adapter="onAdapter" defaultChain="sui:mainnet" />

onAdapter = async (adapter) => {
    const tx = new sui.Transaction();
    const data = await adapter.signAndExecuteTransaction({transaction: tx});
}

    SuiMaster: suiMaster

    Instance of high-level Sui smart contracts library - suidouble for interaction with smart contracts. Emited on initialization or when defaultChain parameter changed with instance of of suidouble SuiMaster, to let you interact with blockchain in read-only mode:

    <SignInWithSuiButton @suiMaster="onSuiMaster" defaultChain="sui:mainnet" />

async onSuiMaster(suiMaster) {
    const currentChain = suiMaster.connectedChain; // chain id, `sui:mainnet`  `sui:testnet` etc
    const instanceN = suiMaster.instanceN; // you may get few events when state changed, so you may check if it's same instance you had before

    // and interact with blockchain. Read more in suidouble documentation
    const pkg = suiMaster.package({
        id: packageId,
    });
    const module = await pkg.getModule('suidouble_color');

    const eventsResponse = await module.fetchEvents({eventTypeName: 'ColorCreated', order: 'descending'});
    // if you are connected, you can also execute contract methods:
    let result = await module.moveCall('mint', [...]);
    // etc
}

    Connected: connected

    Emited when use allows access to signing txs with her/hist wallet browser extension. Pass the instance of suidouble's SuiInBrowser class as a parameter:

    <SignInWithSuiButton @connected="onConnected" />

async onConnected(suiInBrowser) {
    const suiClient = await suiInBrowser.getClient(); // instance of SuiClient
    const suiMaster = await suiInBrowser.getSuiMaster(); // instance of suidouble SuiMaster instance
    const currentChain = suiInBrowser.getCurrentChain(); // chain id, `sui:mainnet`  `sui:testnet` etc
    const connectedAddress = suiInBrowser.getAddress(); // "0x42ff3..."
}

    Note: it's emited when use switch chain in her/his wallet extension too. So you may get few events in the lifetime of application.

    Disconnected: disconnected

    <SignInWithSuiButton @disconnected="onDisconnected" />

onDisconnected() {
    // connectedAddress is null now
}

    properties

    defaultChain

    chain to require connection too. Possible options are: sui:mainnet sui:devnet sui:testnet sui:local

    <SignInWithSuiButton defaultChain="sui:mainnet" />