Mobile wallet dApp

Launching the dApp inside the mobile wallet

Considering the current scenario, mobile wallets are an important channel of access to dApps. After integrating Ontology's cyano-bridge package, the developer can implement and invoke dAPI that adheres to OEP-1 standards, and can communicate with any wallet dApp that integrates the Provider SDK to carry out chain-related operations.

Details regarding the OEP-1 protocol can be found here.

Fundamental concepts

Let us take a look at the processes that distributed technologies such as dApps and mobile wallets carry out.

Role of dApps

The dApp back end primarily carries out the following tasks:

dApp operations, i.e., generating the relevant login parameters, or the parameters for invoking smart contracts.
Synchronizing with the on-chain data, and fetching the results of login, or smart contract invocation.

Role of mobile wallets

A mobile wallet acts as a provider. It carries out the roles that involve interacting with the chain, such as providing the signature data, pre-executing and executing transactions, etc.

The above description is with respect to the wallets that can serve as providers. Currently, the following are supported:

Interaction Process

Generally speaking, application users' primary concerns are the login and transaction procedure.

The process flow is illustrated in the following figure:

A dApp is opened in the wallet's dApp store.
Next, there are two possible circumstances - either the dApp sends an account query request to the wallet, and the wallet returns the asset account's address, or the dApp sends a login request to the wallet and the wallet returns signature data.
If the dApp verification is completed, access is granted.

Smart Contract invocation scenario

The dApp sends an invocation request to the wallet.
The wallet digitally signs the transaction, pre-executes it, sends it to the chain, and returns the transaction hash to the dApp.

dAPI protocol usage

1. Installation

Based on subjective requirements, one of the following two methods can be chosen to install cyanobridge.

npm installation-

npm install cyanobridge

CDN installation-

Currently, the latest version can be acquired using jsDelivr. Paste the following script on the page's code to instantly start using the dAPI.

<script src="https://cdn.jsdelivr.net/npm/cyanobridge/lib/browser.min.js"></script>

CDN users are advised to fix the version in the above link so as to avoid compatibility issues during updates.

2. Import

CommonJS

var client = require('cyanobridge').client

ES6 module

import { client } from 'cyanobridge'

Web Page Embed

To import the browser.js file inside the ./lib directory:

<script src="./lib/browser.js"></script>

var client = CyanoMobile.client;

3. Initialization

The dAPI needs to be initialized and registered before being used.

import { client } from 'cyanobridge'
client.registerClient();

4. Method Usage

Fetch account or user identity information

dApp information is optional. The developer may choose not to fill it when making the function call.

import { client } from 'cyanobridge'

const params = {
    dappName: 'My dapp',
    dappIcon: '' // some url points to the dapp icon
}

try {
    const res = await client.api.asset.getAccount(params);
    const res = await client.api.identity.getIdentity(params);
    console.log(res)
} catch(err) {
    console.log(err)
}

const params = {
    type: 'account',// account or identity that will sign the message
    dappName: 'My dapp', // dapp's name
    dappIcon: 'http://mydapp.com/icon.png', // the URL that points to the dapp's icon resource
    message: 'test message', // message sent from dapp that will be signed by native client
    expired: new Date('2019-01-01').getTime(), // expiry date of login
    callback: '' // callback url of dapp
}
let res;
try {
    res = await client.api.message.login(params);
    console.log(res)
}catch(err) {
    console.log(err)
}

Invoke contract or initiate payment

const scriptHash = '8b344a43204e60750e7ccc8c1b708a67f88f2c43';
const operation = 'transferOng'
const args = [
   {
        "name": "arg0-id",
        "value": "String:hedgsg"
    }, {
        "name": "arg1-from",
        "value": "Address:AecaeSEBkt5GcBCxwz1F41TvdjX3dnKBkJ"
    }, {
        "name": "arg2-to",
        "value": "Address:AUr5QUfeBADq6BMY6Tp5yuMsUNGpsD7nLZ"
    }, {
        "name": "arg3-int",
        "value": 1
    }
]
const gasPrice = 500;
const gasLimit = 20000;
const payer = 'AecaeSEBkt5GcBCxwz1F41TvdjX3dnKBkJ'
const config = {
    "login": true,
    "message": "invoke smart contract test"
}
const params = {
          scriptHash,
          operation,
          args,
          gasPrice,
          gasLimit,
          payer,
          config
        }
try {
   const res = await client.api.smartContract.invoke(params);
   } catch(err) {
    console.log(err)
}

Error codes

This is the list of error codes that the system returns.

An example of the code returned (JSON):

{
    "action": "login",
    "error": 0,
    "desc": "SUCCESS",
    "result": true
}

Code base for Reference

PreviousChrome Plugin NextQR code mechanism

Last updated 4 years ago