# Mobile wallet dApp
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.
{% hint style="info" %}
Details regarding the OEP-1 protocol can be found [here](https://github.com/ontio-cyano/CEPs/blob/master/CEPS/CEP1.mediawiki).
{% endhint %}
## 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.
{% hint style="info" %}
The above description is with respect to the wallets that can serve as providers. Currently, the following are supported:
* [**ONTO**](https://onto.app/)
* [**Cyano Wallet**](http://101.132.193.149/files/app-debug.apk)
* [**O-Wallet**](https://github.com/ontio/OWallet/releases)
* [**Math Wallet**](http://www.mathwallet.org/en/)
* [**Banko**](http://bankowallet.com/pc.html)
* [**Huobi Wallet**](https://www.huobiwallet.com/)
{% endhint %}
## Interaction Process
Generally speaking, application users' primary concerns are the login and transaction procedure.
The process flow is illustrated in the following figure:
### Login scenario
1. A `dApp` is opened in the wallet's `dApp` store.
2. 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.
3. If the `dApp` verification is completed, access is granted.
### Smart Contract invocation scenario
1. The `dApp` sends an invocation request to the wallet.
2. 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-**
```bash
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`.
```markup
```
{% hint style="warning" %}
CDN users are advised to fix the version in the above link so as to avoid compatibility issues during updates.
{% endhint %}
### 2. Import
#### **CommonJS**
```javascript
var client = require('cyanobridge').client
```
#### **ES6 module**
```javascript
import { client } from 'cyanobridge'
```
#### Web Page Embed
To import the **browser.js** file inside the `./lib` directory:
```markup
var client = CyanoMobile.client;
```
### 3. Initialization
The `dAPI` needs to be initialized and registered before being used.
```javascript
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.
```javascript
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)
}
```
#### **Login**
Login is signed on the wallet's end. The `dApp` carries out the verification signature.
```javascript
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**
```javascript
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.
| Error Code | Description |
| :--------: | :------------: |
| 0 | Success |
| 80001 | Params error |
| 80002 | Method error |
| 80003 | Internal error |
An example of the code returned (JSON):
```yaml
{
"action": "login",
"error": 0,
"desc": "SUCCESS",
"result": true
}
```
## Code base for Reference
| **Signature verification methods** | **Transaction event query methods** | **Cyano Wallet** | **dAPI - Mobile provider SDK** | **dAPI - Mobile client SDK** |
| :--------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------: | :---------------------------------------------------------------------: | ----------------------------------------------------------- |
| [Java SDK](https://github.com/ontio/ontology-java-sdk/blob/master/docs/cn/interface.md#%E7%AD%BE%E5%90%8D%E9%AA%8C%E7%AD%BE) | [Java SDK](https://github.com/ontio/ontology-java-sdk/blob/master/docs/cn/basic.md#%E4%B8%8E%E9%93%BE%E4%BA%A4%E4%BA%92%E6%8E%A5%E5%8F%A3) | [Cyano - Android](https://github.com/ontio-cyano/cyano-android) | [Cyano - Android SDK](https://github.com/ontio-cyano/cyano-android-sdk) | [Cyano Bridge](https://github.com/ontio-cyano/cyano-bridge) |
| [TypeScript SDK](https://github.com/ontio/ontology-ts-sdk/blob/master/test/ecdsa.crypto.test.ts) | [TypeScript SDK](https://github.com/ontio/ontology-ts-sdk/blob/master/test/websocket.test.ts) | [Cyano - iOS](https://github.com/ontio-cyano/cyano-ios) | [Cyano - iOS SDK](https://github.com/ontio-cyano/cyano-ios-sdk) | |