Skip to content

elastOS dApp to native ionic app migration guide

Jump to bottom
Benjamin Piette edited this page Apr 21, 2021 · 4 revisions

Introduction

Most of the below changes are rather straight forward. The most painful migration may be to replace the elastOS native title bar (title bar plugin) with a custom title bar in your application. Though, we provide sample code for convenience.

Trinity types

  • Don't use them any more. Replace with plugins one by one, see below.

Plugins

  • Replace DID, Hive, Carrier with standard cordova plugins:

npm install --save @elastosfoundation/elastos-cordova-plugin-did

npm install --save @elastosfoundation/elastos-cordova-plugin-hive

npm install --save @elastosfoundation/elastos-cordova-plugin-carrier

  • Title bar: see below.
  • Notification manager: inexisting, replace with real push notifications if willing to.
  • Standard cordova plugins: manually install them.

Add plugin types to your tsconfig.json

  • Make sure you don't have a file named tsconfig.app.json that contains a types: [] entry. If you have one, delete this entry and use tsconfig.json to add types.
  • Add to your tsconfig.json:
"compilerOptions": {
    "types": [
      "node",
      ...
      "@elastosfoundation/elastos-cordova-plugin-did",
      "@elastosfoundation/elastos-cordova-plugin-hive",
      "@elastosfoundation/elastos-cordova-plugin-intent"
    ]
}
  • Delete node_modules/@elastosfoundationfrom typesRoot and trinity-types from types.

Title bar

The generic elastOS title bar has to be replaced with a custom title bar of your choice. For convenience to start with, you can refer to the new title bar implementation in pure ionic, from the DID Demo code base:

Title bar component

Title bar usage example

App manager

The elastOS app manager is replaced with a standalone "intent manager" cordova plugin:

  • Run: ionic cordova plugin add @elastosfoundation/elastos-cordova-plugin-intent
  • declare let appManager: xxx: not needed any more. Delete all calls from your code.
  • Add: declare let intentManager: IntentPlugin.Intent;
  • Replace: appManager.setIntentListener() with intentManager.addIntentListener()
  • Rework non promise API style to promise style (i.e. appManager.sendIntent(action, params, onSuccess, onError) to let response = await intentManager.sendIntent(action, params))
  • setVisibility(): not needed any more. Delete all calls from your code.

Background services

elastOS background services are gone. Replace them with a angular / react service.

Trinity DApp SDK

Helper classes from the Trinity DApp SDK have been moved to the new Elastos Connectivity SDK that can be installed with the following command if needed:

npm install @elastosfoundation/elastos-connectivity-sdk-cordova

Trinity CLI

The Trinity CLI (command line tool) is now deprecated and cannot be used in the new workflow. Instead, the standard ionic-cli

trinity-cli run -p android

Now replaced with:

ionic cordova run android

Or for hot reload:

ionic cordova run android --livereload --external)

Build for prod:

ìonic build --prod

"My first identity" replacement

Your application now needs to use the Elastos Connectivity SDK with connectors in order to provide the equivalent of the current "My First Identity" built-in feature (that provides DID creation and publishing) and talk to Elastos Essentials:

npm install --save @elastosfoundation/elastos-connectivity-sdk-cordova npm install --save @elastosfoundation/elastos-connector-localidentity-cordova npm install --save @elastosfoundation/essentials-connector-cordova

Add styling to your main scss file:

@import "~@elastosfoundation/elastos-connectivity-sdk-cordova/dist/bundle.css"; @import "~@elastosfoundation/elastos-connector-localidentity-cordova/dist/bundle.css";

Example to "sign in" (implements the credaccess intent):

import { Hive , connectivity, DID, Wallet, localization, theme } from "@elastosfoundation/elastos-connectivity-sdk-cordova";
import { EssentialsConnector } from "@elastosfoundation/essentials-connector-cordova";
import { LocalIdentityConnector, localIdentity } from "@elastosfoundation/elastos-connector-localidentity-cordova";

// To be able to let users build a temporary identity in the app, without depending on a third party app:
connectivity.registerConnector(new LocalIdentityConnector());

// To let users use Essentials for his operations:
connectivity.registerConnector(new EssentialsConnector());

// When you want to let user export his local identity into another third party wallet like. Essentials:
localIdentity.manageIdentity();

// To forget the currently active connector and ask user again which one he wants to use:
connectivity.setActiveConnector(null);

// To get credentials from user's DID:
let didAccess = new DID.DIDAccess();
let presentation = await didAccess.getCredentials({claims: {
    name: true,
    email: {
      required: false,
      reason: "To send you are newsletter if you want to receive it"
    }
  }}
);

Additional cleanup

  • Delete manifest.json from your project.
  • Delete trinitynative.json from your project.
  • Delete dappstore.config.json and store/ from your project
Clone this wiki locally