@govtechsg/ethers-contract-hook
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.0 • Public • Published

    Ethers.js Contract React Hooks

    Automagically generate hooks from Ethers.js contract functions.

    Install

    npm i --save @govtechsg/ethers-contract-hook

    Hooks

    useContractFunctionHook

    const {
      call,
      send,
      state,
      events,
      receipt,
      transaction,
      transactionHash,
      error,
      errorMessage,
    } = useContractFunctionHook(contractInstance, "methodName");

    Sample usage

    export const TestHook = ({ contract }: { contract: DocumentStore }): ReactElement => {
      const { state, send, events, receipt, transaction, transactionHash, errorMessage } = useContractFunctionHook(
        contract,
        "issue"
      );
      const [hash, setHash] = useState("0x3e912831190e8fab93f35f16ba29598389cba9a681b2c22f49d1ec2701f15cd0");
      const handleTransaction = (): void => {
        send(hash);
      };
      return (
        <div>
          <input value={hash} onChange={(e) => setHash(e.target.value)} style={{ width: "100%" }} />
          <button onClick={handleTransaction}>Issue Merkle Root</button>
          <h2>Summary</h2>
          <p>Transaction State: {state}</p>
          <p>Transaction Hash: {transactionHash}</p>
          <p>Error: {errorMessage}</p>
          <h2>Transaction</h2>
          <pre>{JSON.stringify(transaction, null, 2)}</pre>
          <h2>Receipt</h2>
          <pre>{JSON.stringify(receipt, null, 2)}</pre>
          <h2>Events</h2>
          <pre>{JSON.stringify(events, null, 2)}</pre>
        </div>
      );
    };

    Example application

    An example application can be found in /example/app.tsx. The example is based off the document store smart contract used by OpenAttestation.

    To run the example you will need to have a local ganache running:

    npm run ganache

    in a separate terminal, run the example application:

    npm run example

    your example application will now run at http://localhost:9001/

    Features

    • React - A JavaScript library for building user interfaces.
    • Webpack - Component bundler.
    • React testing library - Simple and complete testing utilities that encourage good testing practices.
    • Jest - JavaScript testing framework used by Facebook.
    • ESLint - Make sure you are writing a quality code.
    • Prettier - Enforces a consistent style by parsing your code and re-printing it.
    • Typescript - JavaScript superset, providing optional static typing
    • Circle CI - Automate tests and linting for every push or pull request.
    • Storybook - Tool for developing UI components in isolation with documentation.
    • Semantic Release - Fully automated version management and package publishing.
    • Debug - JS debugging utility that works both in node.js and browsers.

    Development

    • npm run storybook: to start storybook, create stories and visualize the different component
    • npm run test: to run tests
    • npm run lint: to run lint
    • npm run example: to run the example build with the library to develop an hosting application. Don't forget to update the example if you update this library.

    Keywords

    none

    Install

    npm i @govtechsg/ethers-contract-hook

    DownloadsWeekly Downloads

    23

    Version

    2.2.0

    License

    GPL-3.0

    Unpacked Size

    148 kB

    Total Files

    35

    Last publish

    Collaborators

    • gyunikuchan
    • gds_ace_dlt
    • gdsbot
    • gylsky
    • eijiew
    • ryanoolala
    • nebulis
    • dyihoon90
    • sebastianquek