react-use-ark

Hook to easily access ARK blockchain Ѧ API in React application

Usage no npm install needed!

<script type="module">
  import reactUseArk from 'https://cdn.skypack.dev/react-use-ark';
</script>

README

ark logo"> react-use-ark

Build Status npm version TypeScript

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!