{"id":13450560,"url":"https://github.com/perlin-network/react-use-wavelet","last_synced_at":"2025-03-23T16:31:40.275Z","repository":{"id":57347227,"uuid":"198775669","full_name":"perlin-network/react-use-wavelet","owner":"perlin-network","description":"Simple React hooks for interacting with Wavelet.","archived":true,"fork":false,"pushed_at":"2020-09-12T06:24:42.000Z","size":4173,"stargazers_count":5,"open_issues_count":18,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-17T03:27:57.922Z","etag":null,"topics":["blockchain","dapp","react","react-hooks","smart-contracts","wavelet"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/perlin-network.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-25T06:58:02.000Z","updated_at":"2023-01-28T12:21:35.000Z","dependencies_parsed_at":"2022-09-05T07:50:45.238Z","dependency_job_id":null,"html_url":"https://github.com/perlin-network/react-use-wavelet","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/perlin-network%2Freact-use-wavelet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/perlin-network%2Freact-use-wavelet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/perlin-network%2Freact-use-wavelet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/perlin-network%2Freact-use-wavelet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/perlin-network","download_url":"https://codeload.github.com/perlin-network/react-use-wavelet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221653965,"owners_count":16858326,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blockchain","dapp","react","react-hooks","smart-contracts","wavelet"],"created_at":"2024-07-31T07:00:36.096Z","updated_at":"2024-10-28T16:31:27.444Z","avatar_url":"https://github.com/perlin-network.png","language":"JavaScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# `react-use-wavelet`\n[![npmjs.com](https://img.shields.io/npm/v/react-use-wavelet.svg)](https://www.npmjs.com/package/react-use-wavelet)\n[![codecov](https://codecov.io/gh/perlin-network/react-use-wavelet/branch/master/graph/badge.svg)](https://codecov.io/gh/perlin-network/react-use-wavelet)\n[![Discord Chat](https://img.shields.io/discord/458332417909063682.svg)](https://discord.gg/dMYfDPM)\n\nReact hooks to easily integrate [Wavelet](https://wavelet.perlin.net) smart contracts into your React application. \n\n## Setup\n\n```shell\nyarn add react-use-wavelet\n```\n\n## Usage\n\n```jsx\nimport React, {useCallback, useState} from \"react\";\nimport { useWavelet, useAccount, useContract } from 'react-use-wavelet';\nimport { Wavelet } from 'wavelet-client';\nimport JSBI from \"jsbi\";\nconst BigInt = JSBI.BigInt;\n\nconst MyAccount = () =\u003e {\n  // First get a working client\n  const [client, node, clientErr] = useWavelet('https://testnet.perlin.net');\n  // To get a Wavelet Account\n  const [account, accountErr] = useAccount(client, 'yourprivatekey');\n  \n  const [chatLogs, setChatLogs] = useState([]);\n  // callback to set chat logs  to results of contract 'get_messages' function\n  const loadLogs = useCallback((contract) =\u003e {\n    const wallet = Wavelet.loadWalletFromPrivateKey('yourprivatekey');\n    setChatLogs(contract.test(wallet, 'get_messages', BigInt(0)).logs);\n  }, []);\n  // load logs every time wavelet reaches consensus;\n  const onUpdate = loadLogs;\n  \n  // load logs after contract loads\n  const onLoad = loadLogs;\n  \n  // To get a Wavelet Contract, and register callbacks\n  const [contract] = useContract(client, 'contract addr', onUpdate, onLoad);\n\n  // To call a contract function\n  const sendMessage = (message) =\u003e {\n    const wallet = Wavelet.loadWalletFromPrivateKey('yourprivatekey');\n    contract.call(wallet, 'send_message', BigInt(0), BigInt(250000), BigInt(0),  {\n      type: 'string',\n      value: message\n    });\n  }\n\n  return (\n  \u003cdiv\u003e\n    Balance: {account ? account.balance : 'account not loaded'}\n    Public Key: {account ? account.pulic_key : 'account not loaded'}\n    \u003cbutton onClick={() =\u003e sendMessage('Yo')} /\u003e\n    \u003ctextarea\n        rows={35}\n        readOnly\n        value={chatLogs.length === 1 ? chatLogs[0] : ''}\n    /\u003e\n  \u003c/div\u003e\n  )\n}\n```\n\nYou 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)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fperlin-network%2Freact-use-wavelet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fperlin-network%2Freact-use-wavelet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fperlin-network%2Freact-use-wavelet/lists"}