vue-sui v0.0.52
vue-sui
Vue component to connect your dapp to Sui blockchain.
Includes suidouble library for easier interaction with Move smart contracts.
Demo
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.
Provider: provider
Emits an instance of Sui's JsonRpcProvider 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 @provider="onProvider" defaultChain="sui:mainnet" />
onProvider = async (provider) => {
const data = await provider.getObject({id: '0xcc2bd176a478baea9a0de7a24cd927661cc6e860d5bacecb9a138ef20dbab231'});
}
Adapter: adapter
Emits an instance of SuiInBrowserAdapter, which follows the logic of StandartAdapter with functions of 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.TransactionBlock();
const data = await adapter.signAndExecuteTransactionBlock({transactionBlock: 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', ['test', 23]);
// 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 provider = await suiInBrowser.getProvider(); // instance of JsonRpcProvider
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" />
24 days ago
24 days ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago