Napoleon's Pixelated Mugshot

    react-use-wavelet

    0.2.3 • Public • Published

    react-use-wavelet

    npmjs.com codecov Discord Chat

    React hooks to easily integrate Wavelet smart contracts into your React application.

    Setup

    yarn add react-use-wavelet

    Usage

    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 (
      <div>
        Balance: {account ? account.balance : 'account not loaded'}
        Public Key: {account ? account.pulic_key : 'account not loaded'}
        <button onClick={() => sendMessage('Yo')} />
        <textarea
            rows={35}
            readOnly
            value={chatLogs.length === 1 ? chatLogs[0] : ''}
        />
      </div>
      )
    }

    You can use contract and client objects in the same way as documented in the wavelet-client-js docs

    Install

    npm i react-use-wavelet

    DownloadsWeekly Downloads

    5

    Version

    0.2.3

    License

    MIT

    Unpacked Size

    33.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • claudiucelfilip
    • ryanswrt
    • iwasaki-kenta