https://github.com/perlin-network/react-use-wavelet

Simple React hooks for interacting with Wavelet.
https://github.com/perlin-network/react-use-wavelet

blockchain dapp react react-hooks smart-contracts wavelet

Last synced: about 1 month ago
JSON representation

Simple React hooks for interacting with Wavelet.

• Host: GitHub
• URL: https://github.com/perlin-network/react-use-wavelet
• Owner: perlin-network
• Archived: true
• Created: 2019-07-25T06:58:02.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-09-12T06:24:42.000Z (over 4 years ago)
• Last Synced: 2024-10-17T03:27:57.922Z (about 2 months ago)
• Topics: blockchain, dapp, react, react-hooks, smart-contracts, wavelet
• Language: JavaScript
• Homepage:
• Size: 3.98 MB
• Stars: 5
• Watchers: 4
• Forks: 1
• Open Issues: 18
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• fucking-awesome-react-hooks - `react-use-wavelet` - contract platform (Packages)
• awesome-react-hooks-cn - `react-use-wavelet` - contract platform (Packages)
• awesome-react-hooks - `react-use-wavelet` - contract platform (Packages)
• awesome-react-hooks - `react-use-wavelet` - contract platform (Packages)

README

        
# `react-use-wavelet`

[![npmjs.com](https://img.shields.io/npm/v/react-use-wavelet.svg)](https://www.npmjs.com/package/react-use-wavelet)

[![codecov](https://codecov.io/gh/perlin-network/react-use-wavelet/branch/master/graph/badge.svg)](https://codecov.io/gh/perlin-network/react-use-wavelet)

[![Discord Chat](https://img.shields.io/discord/458332417909063682.svg)](https://discord.gg/dMYfDPM)

React hooks to easily integrate [Wavelet](https://wavelet.perlin.net) smart contracts into your React application. 

## Setup

```shell

yarn add react-use-wavelet

```

## Usage

```jsx

import React, {useCallback, useState} from "react";

import { useWavelet, useAccount, useContract } from 'react-use-wavelet';

import { Wavelet } from 'wavelet-client';

import JSBI from "jsbi";

const BigInt = JSBI.BigInt;

const MyAccount = () => {

  // First get a working client

  const [client, node, clientErr] = useWavelet('https://testnet.perlin.net');

  // To get a Wavelet Account

  const [account, accountErr] = useAccount(client, 'yourprivatekey');

  

  const [chatLogs, setChatLogs] = useState([]);

  // callback to set chat logs  to results of contract 'get_messages' function

  const loadLogs = useCallback((contract) => {

    const wallet = Wavelet.loadWalletFromPrivateKey('yourprivatekey');

    setChatLogs(contract.test(wallet, 'get_messages', BigInt(0)).logs);

  }, []);

  // load logs every time wavelet reaches consensus;

  const onUpdate = loadLogs;

  

  // load logs after contract loads

  const onLoad = loadLogs;

  

  // To get a Wavelet Contract, and register callbacks

  const [contract] = useContract(client, 'contract addr', onUpdate, onLoad);

  // To call a contract function

  const sendMessage = (message) => {

    const wallet = Wavelet.loadWalletFromPrivateKey('yourprivatekey');

    contract.call(wallet, 'send_message', BigInt(0), BigInt(250000), BigInt(0),  {

      type: 'string',

      value: message

    });

  }

  return (

  


    Balance: {account ? account.balance : 'account not loaded'}

    Public Key: {account ? account.pulic_key : 'account not loaded'}

     sendMessage('Yo')} />

    

  

  )

}

```


You can use `contract` and `client` objects in the same way as documented in the [wavelet-client-js docs](https://github.com/perlin-network/wavelet-client-js)