react-use-ark

React hook to easily access ARK blockchain Ѧ API.

Links

ARK blockchain explorer official website.

Official ARK client SDK for TypeScript.

Demo

Install

npm install 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

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!