Package Exports

@nosplatform/api-functions

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nosplatform/api-functions) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@nosplatform/api-functions

nOS API bindings and types

installation

npm i --save @nosplatform/api-functions
yarn add @nosplatform/api-functions

Usage in react

HoC

Wrap your component with the higher-order components to provide fallbacks when running outside the context of the nOS client. Specify propTypes provided by this package.

import React from 'react';
import { compose } from 'recompose';
import { injectNOS, injectAssets, nosProps, assetProps } from "@nosplatform/api-functions/lib/react";

class ShowBalance extends React.Component {
  static propTypes = {
    nos: nosProps.isRequired,
    assets: assetProps.isRequired
  }

  render() {
    return (
      <button type="button" onClick={this.handleClick}>
        Show NEO Balance
      </button>
    );
  }

  async handleClick = () => {
    const { nos, assets } = this.props;
    const balance = await nos.getBalance({ asset: assets.NEO });
    console.log('NEO Balance:', balance);
  }
};

export default compose(
  injectNOS,
  injectAssets
)(ShowBalance);

Render Props

import React from 'react';
import { NosAssets, NosFunctions } from "@nosplatform/api-functions/lib/react";

const ShowBalance = () => {
  render() {
    const handleClick = async (nos, assets) => {
      const balance = await nos.getBalance({ asset: assets.NEO });
      console.log('NEO Balance:', balance);
    }

    return (
      <NosFunctions>
        {({ nos }) => (
          <NosAssets>
            {({ assets }) => (
              <button type="button" onClick={() => handleClick(nos, assets)}>
                Show NEO Balance
              </button>
            )}
          </NosAssets>
        )}
      </NosFunctions>
    );
  }
};

export default ShowBalance;

Hooks

import React from 'react';
import { compose } from 'recompose';
import { useNOS, useAssets } from "@nosplatform/api-functions/lib/react";

const ShowBalance = () => {
  render() {
    const nos = useNOS();
    const assets = useAssets();

    const handleClick = async () => {
      const balance = await nos.getBalance({ asset: assets.NEO });
      console.log('NEO Balance:', balance);
    }

    return (
      <button type="button" onClick={handleClick}>
        Show NEO Balance
      </button>
    );
  }
};

export default ShowBalance;

In addition to automatically providing the NOS API function as a prop to your React component, the api-functions package also provides the opportunity to specify a fallback implementation. This is especially useful for building in the context of another browser if not wanting to use the nOS client for any reason.

const previousBalance = "23"; // Calculated previous balance
const balance = await nos.getBalance({ asset: assets.NEO }, () => Promise.resolve(previousBalance));
console.log("NEO Balance:", balance); // NEO Balance: 23