Develop Paper
  • Program
  • Server
  • Development Tool
  • Blockchain
  • Database
  • Artificial Intelligence
  • Blogs
Position: Home > Blockchain > Content

Develop WebApps with Vue using Polkadot.js

Time:2021-11-26

Develop WebApps with Vue using Polkadot.js

Element

Generally, the following three elements will appear in an operation on any program

  • Sender / receiver: account wallet address
  • Channel: websocket long connection
  • Message: message can be encrypted

Account

Develop WebApps with Vue using Polkadot.js

Develop WebApps with Vue using Polkadot.js
Dependency:

  • @polkadot/util-cryptoUsed to generate random keys
  • @polkadot/keyringFor managing wallet accounts,/testingYou can develop test accounts synchronously
  • @vue-polkadot/vue-settingsBasic information of the synchronization chain node (such as the currency unit to be used in transfer)
  • @vue-polkadot/vue-identiconUsed to display account Avatar
  • @polkadot/utilSome tools, such as data formatting

Install Keyring

//  store.ts
import { cryptoWaitReady } from '@polkadot/util-crypto'
import testKeyring from '@polkadot/keyring/testing'
const myKeyring = async (store: any) => {
  await cryptoWaitReady()
  const keyring = testKeyring({ type: 'sr25519' })
  Vue.prototype.$keyring = keyring
}

Invoke Keyring in component to generate wallet account

//  Account.vue
import { Vue } from 'vue-property-decorator'
export default class Account extends Vue {
    public newAccount: any = {
        name: '',
        mnemonicSeed: '',
        address: '',
        password: ''
    }
    private getAddressFromSeed(mnemonicSeed: string): any {
        return this.$keyring.createFromUri(
            mnemonicSeed.trim(),
            this.getMeta(),
            'sr25519'
        )
    }
    private getMeta(): any {
        return {
            name: this.newAccount?.name || '',
            whereCreated: 'Earth',
            whenCreated: Date.now()
        }
    }
}

The create interface is used to create accounts, and the add interface is used to add accounts in local memory.

 const json = pair.toJson(password)
 this.$keyring.addFromJson(json)

During transaction transfer, the amount data needs additional processing

static sendBalance(
        sender: string | any,
        recipient: string,
        amount: number,
        tokenDecimals: number
    ): Promise<any> {
        let value = numberToHex(amount * 1e3 * 10 ** (tokenDecimals || 12))
        return exec(sender, 'balances', 'transfer', [recipient, value])
    }

Link to Chain

Establish a long websocket connection between the web client and the chain side application to maintain data communication, and then instantiate the polkdot API.
The execution time is usually only once, which occurs after the page is loaded.

  • connect with websocket
  • make the api global

Code

//Introduce dependency
import { ApiPromise, WsProvider } from '@polkadot/api'
import { EventEmitter } from 'events'
//Define interface type
export interface ApiService {
    connect(apiUrl: string, types: any): Promise<ApiPromise | Error>
    disconnect(): void
    // registerCustomTypes(userTypes: string, apiUrl?: string): Promise<ApiPromise | Error>;
}
/**
 * Singleton instance for @polkadot/api.
 */
export default class Api extends EventEmitter implements ApiService {
    private static _instance: Api = new Api()
    private _api!: ApiPromise
    private _apiUrl!: string
    /**
     * getInstance
     * @returns Api Instance
     */
    public static getInstance(): Api {
        return Api._instance
    }
    private constructor() {
        super()
    }
    /**
     * connect
     * @requires apiUrl: string
     * @returns instance of polkadot-js/api instance
     */
    public async connect(
        apiUrl: string,
        types: Record<any, any>
    ): Promise<ApiPromise | Error> {
        if (!apiUrl) {
            throw new TypeError(
                `[VUE API] ERR: Unable to init api with apiUrl ${apiUrl}`
            )
        }
        try {
            const provider = new WsProvider(apiUrl)
            const apiPromise = await ApiPromise.create({ provider, types })
            this.setApi(apiPromise)
            this._emit('connect', apiPromise)
            // const isReady = apiPromise.isReady.then(api => {
            //     this.setApi(apiPromise)
            //     this._emit('connect', apiPromise)
            // })
        } catch (err) {
            this._emit('error', err)
            throw err
        }
        this.setUrl(apiUrl)
        return this._api
    }
    /**
     * disconnect
     */
    public disconnect(): void {
        if (this._api) {
            // this._api.once('disconnected', () => this._emit('disconnect', this._apiUrl));
            this._api.disconnect()
            this.setUrl('')
        }
    }
    private setApi(api: ApiPromise) {
        this._api = api
    }
    private setUrl(apiUrl: string) {
        this._apiUrl = apiUrl
    }
    get api(): ApiPromise {
        return this._api
    }
    /**
     * tryEmit
     *
     */
    public _emit(message = 'event', payload?: ApiPromise | Error): void {
        this.emit(message, payload)
    }
}

Tips:

  • websocketThe exception of connection failure cannot be caught and will not be solved temporarily.
  • eventIt depends on the success / failure listening that mainly handles connect events. If there are other exception capture mechanisms outside, you can remove them here.
  • @vue-polkadot/vue-apiThe plug-in has the same function as this code. The former has some encapsulation for Vue.
  • @vue-polkadot/vue-apiThe type parameter is not passed in during instantiation. If a custom type needs to be passed in, it needs to be processed separately.

Query & Transactions

Query

import Connector from '@/api/util/connector'
static async getBalance(address: string): Promise<any> {
        let { api } = Connector.getInstance()
        const { data: balance } = await api.query.system.account(address)
        return balance.free
    }

Transactions

import Connector from '@/api/util/connector'
let { api } = Connector.getInstance()
const transfer = await api.tx[section][method](...params)
/*Unsub will perform continuous listening. The returned callback function can stop listening after the block is out or confirmed*/
const unsub = await transfer.signAndSend(
     sender,    // account: AddressOrPair, 
     {},    //options: Partial<SignerOptions>
     ()=>{   //statusCb
         // after isFinalized
         unsub()
     }
)

Transactions with Extension

import Connector from '@/lib/substrate/Api'
import {
    web3Accounts,
    web3Enable,
    web3FromAddress
} from '@polkadot/extension-dapp'
let { api } = Connector.getInstance()
const allInjected = await web3Enable('Dipole')
const allAccounts = await web3Accounts()
// finds an injector for an address
const sender = allAccounts[0].address
const injector = await web3FromAddress(sender)
api.setSigner(injector.signer)

Transactions with password

if (!sender.isLocked) {
    await unSubFoo(payload)
} else {
    try {
         //  unlock account success
         sender.decodePkcs8(password)
         await unSubFoo(payload)
    } catch (err){
         //  unlock password failed
         console.log(err)
    }
}

reference resources

  • polkadot.js
  • vue-polkadot
  • polkadot-js/chromeExtension
  • The relationship among private key, public key and wallet address in blockchain
Tags: account, address, Example, Plug-in unit, wallet

Recommended Today

Double pointer advanced – connected to rainwater -rust language description

1 title 42. rainwater connection 2 ideas As mentioned before, the rainwater that can be collected can be obtained by finding out the maximum value around each point one by one; Maintain the left and right pointers, andleft_max, right_max, this article is used by a student in the ForumRustTo solve the problem, it took144ms…… 3 […]

  • How many steps are needed to create NFT?
  • Digital Tibet China NFT DAPP development
  • Jingtan digital collection platform model source code construction DAPP development
  • DDC development FAQ (II)
  • Build hyperledger fabric 2.4 development environment and simple case based on Debian
  • Smart contract – one of the core technologies of blockchain
  • Detailed explanation of bash source code of test network startup process of hyperledger fabric
  • Why can everything be NFT? Why is there one NFT and many NFTs?
  • Hyperledger fabric custom alliance chain network engineering practice
  • Dynamic addition and deletion of hyperledger fabric organization
Pre: Form script
Next: Hexo + GitHub easy to build personal blog

    Tags

    address algorithm array assembly attribute Browser c Catalog Character string Client code command configuration file container data Database Definition Edition element Example file function java javascript Journal link linux Memory method Modular mysql node object page parameter php Plug-in unit project python Route source code The server Thread time user

    Recent Posts

    • Double pointer advanced – connected to rainwater -rust language description
    • 5、 C++ operator overloading makes object-oriented programming more convenient
    • Dotnet startup process passes in nonexistent folder as working directory behavior change
    • 04 cubemx+keil+proteus simulation STM32 – GPIO (III)
    • Java running jar command prompt has no main manifest attribute

    Recent Comments

    • My God on Answer for Let me ask you a math problem of my son's first grade: how many rectangles are included in the graph
    • My God on Answer for Let me ask you a math problem of my son's first grade: how many rectangles are included in the graph
    • Border town on Answer for Let me ask you a math problem of my son's first grade: how many rectangles are included in the graph
    • weineel on Answer for Let me ask you a math problem of my son's first grade: how many rectangles are included in the graph
    • alexanderdavid on Answer for Let me ask you a math problem of my son's first grade: how many rectangles are included in the graph

    Categories

    • .NET Core
    • Agile Development
    • Algorithm And Data Structure
    • Android
    • Apple MAC
    • Architecture Design
    • Artificial Intelligence
    • ASP.NET
    • Backend
    • Blockchain
    • C
    • C#
    • C++
    • Cloud
    • Database
    • Design Pattern
    • Development Tool
    • Embedded
    • Erlang
    • Freshman
    • Game
    • Golang
    • HTML/CSS
    • HTML5
    • Informal Essay
    • Information Security
    • IOS
    • Java
    • JavaScript
    • JSP
    • Linux
    • Lua
    • MongoDB
    • MsSql
    • MySql
    • Network Security
    • OOP
    • oracle
    • Other DB
    • Other Technologies
    • Other Technology
    • Perl
    • PHP
    • Program
    • Python
    • Redis
    • Regular Expression
    • Ruby
    • Rust
    • SAP
    • Server
    • Software Testing
    • Team Management
    • VBS
    • VUE
    • WEB Front End
    • Windows
    • XML/XSLT
  • java
  • php
  • python
  • linux
  • windows
  • android
  • ios
  • mysql
  • html
  • .net
  • github
  • node.js

Copyright © 2021 Develop Paper All Rights Reserved      Sitemap    About DevelopPaper    Privacy Policy    Contact Us