react-use-ark

React hook to easily access ARK blockchain Ѧ API.

Links

ARK API documentation.

ARK blockchain explorer official website.

Official ARK client SDK for TypeScript.

Demo

Live demo & Code examples created with React DemoTab 📑

Install

• npm npm install react-use-ark
• yarn yarn add react-use-ark

Usage

Simply import ARK hooks that you wish to fetch data in your React application.
Each hook:

• starts with a resource name as 'useTransactions...', 'useBlocks...', 'useDelegates...', 'useWallets...'.
• always returns the same state object { response, isLoading, error } where response type is defined to easily access it's properties.
• accepts fetchOnMount boolean argument, which can be used as an utility to cover common pattern of data fetching when component mounts.
• accepts network argument which is an enumeration object 'DEVNET | MAINNET | TESTNET' or user defined string (localhost). Set it appropriately to your needs, depending on running relay.

import React from 'react';
import { useTransactionsLatest } from 'react-use-ark';
 
const App = () => {
  // Get 20 latest transactions when App component mounts.
  const [{ response, isLoading, error }] = useTransactionsLatest(1, 20, true);
  return (
    <div>
      {isLoading && <div>Loading...</div>}
      {error && <div>Error fetching data: {error}</div>}
      {response && (
        <ul>
          {response.data.map(transaction => (
            <li key={transaction.id}>
              <div>Amount: {transaction.amount}</div>
              <div>Fee: {transaction.fee}</div>
              <div>Sender: {transaction.sender}</div>
              <div>Recipient: {transaction.recipient}</div>
              <div>Block ID: {transaction.blockId}</div>
              <div>Confirmations: {transaction.confirmations}</div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};
 
ReactDOM.render(<App />, document.getElementById('root'));

Development

Easily set up a local development environment!

Build all the examples and starts storybook server on localhost:9009:

• clone
• npm install
• npm start

OR

Clone this repo on your machine, navigate to its location in the terminal and run:

npm install
npm link # link your local repo to your global packages 
npm run build:watch # build the files and watch for changes 

Clone project repo that you wish to test with react-use-ark library and run:

npm install
npm link react-use-ark # link your local copy into this project's node_modules 
npm start

Start coding! 🎉

Contributing

There are many endpoints to cover and hooks to be created, all contributions are welcome!