Javascript SDK

Javascript Developer Kit for OCAP Service that runs in browser/node.js/native environments.

There are many different ways to use @arcblock/ocap-js in your javascript(webapp/node.js/react-native) applications.

Requirements

  • Node.js v10+, we need node.js as a tooling env
  • Yarn as a more performant package manager alternative

That's all, if you are willing to setup projects with command line, a good command line app is recommended.

Use in WEB application

1. Integrate with new React application

If you have npm version 6+, using following command to bootstrap:

npx create-react-app my-ocap-app --scripts-version @arcblock/react-scripts
cd my-ocap-app
yarn start
1
2
3

If not, we need to install create-react-app first:

yarn global add create-react-app
1

Then,

create-react-app my-ocap-app --scripts-version @arcblock/react-scripts
cd my-ocap-app
yarn start
1
2
3

If anything does not work, file an issue at here.

2. Integrate with new Vue.js application

vue create --preset ArcBlock/ocap-vue-starter my-ocap-dapp
cd my-ocap-dapp
yarn serve
1
2
3

For more instructions, please read ocap-vue-starter documentation.

3. Integrate with existing ES6+ application

If you want to integrate ocap javascript sdk to an existing application that already have webpack and babel included:

3.1 Add dependency

yarn add @arcblock/ocap-js babel-polyfill
1

3.2 Update project entry

Because babel polyfill should be included at the beginning of application code, we need to import it in our entry file:

import 'babel-polyfill';
1

WARNING

If you are wondering why we need to import babel-polyfill manually, please read this.

If you are using webpack for building, prepend babel-polyfill to your main entry file will have the same effect.

4. Integrate with existing ES5 application

OCAP JS SDK provides a standalone bundle for developers that donot have a build process with webpack and babel.

4.1 Add dependency

<script src="https://cdn.jsdelivr.net/npm/@arcblock/ocap-js@@latest/lib/bundle.js"></script>
1

4.2 Use SDK

const client = new OCAPClient({
  dataSource: 'btc',
});

(async () => {
  const account = await client.accountByAddress({ address: '1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa' });

  console.log(account);
})();
1
2
3
4
5
6
7
8
9

Use in Node.js application

1. Add dependency

yarn add @arcblock/ocap-js
1

2. Use SDK

const OCAPClient = require('@arcblock/ocap-js');

// init client
const client = new OCAPClient({
  httpBaseUrl: 'https://ocap.arcblock.io/api', // we may have multiple hosts in future
  socketBaseUrl: ds => `wss://ocap.arcblock.io/api/${ds}/socket`,
  dataSource: 'eth', // btc, eth
  enableQuery: true,
  enableSubscription: true,
  enableMutation: true,
});

// list api
const queries = client.getQueries();
const subscriptions = client.getSubscriptions();
const mutations = client.getMutations();

// query
const account = await client.accountByAddress({
  address: '0xe65d3128feafd14d472442608daf94bceb91e333',
});

// subscription
const subscription = await client.newBlockMined();
subscription.on('data', data => console.log(data));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

WARNING

Correct dataSource param is required when initialize an OCAP Client, only btc and eth are supported now.

Use in Native Application (React Native)

Exactly same as Node.js server integration, for an working example, please visit ocap-react-native-starter.

Please note, we donot need babel-polyfill for react-native.

Starter Projects

GitHub

CodeSandbox

Start building apps without tedious environment setup.

Last Updated: 11/22/2018, 2:36:48 AM