Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/endrohq/lisk-react
Simple react packages for building modern Lisk dApps
https://github.com/endrohq/lisk-react
dapp hooks javascript lisk react
Last synced: 3 months ago
JSON representation
Simple react packages for building modern Lisk dApps
- Host: GitHub
- URL: https://github.com/endrohq/lisk-react
- Owner: endrohq
- License: gpl-3.0
- Created: 2021-06-01T12:09:24.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-05-09T10:30:25.000Z (over 1 year ago)
- Last Synced: 2024-10-04T00:04:14.321Z (4 months ago)
- Topics: dapp, hooks, javascript, lisk, react
- Language: TypeScript
- Homepage:
- Size: 517 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `Lisk React`
Simple react packages for building modern [Lisk dApps](https://lisk.com/docs/)
## @lisk-react/use-lisk
A react application built for the Lisk ecosystem will most likely use the following features:
- listen to blockchain changes such as (new blocks, active connections)
- Authenticate a user wallet for accessing private routes
For that, we introduce a global Lisk Context Provider:
#### Example
```javascript
import { LiskProvider } from '@lisk-react/use-lisk'
const targetNetwork = {
nodeUrl: 'http://localhost:4000',
wsUrl: 'ws://localhost:4001/ws'
}
function App () {
return (
{/* <...> */}
)
}
```
LiskProvider brings you out of the box websocket connection, a wallet to authenticate the user and an up-to-date LiskAPIClient with all of the components listening to your given endpoints at the start.
### useClient
useClient can be called from within any function component to access context variables such as `isConnected`, `setTargetNetwork`
#### Example
```javascript
import { useClient } from '@lisk-react/use-lisk'
function Component () {
const { network: { isConnected, endpoint } } = useClient()
const { block, accounts } = useBlock()
// ...
}
```
The hook returns to the following interface:
```typescript
interface UseClientProps {
network?: {
isConnected: boolean // Indicator if LiskProvider is connected with the blockchain
endpoint: { // Your given endpoints to LiskProvider
wsUrl: string
nodeUrl: string
}
}
}
```
### useWallet
useWallet can be called from within any function component to access context variables such as `isAuthenicated`, `authenticate`, `generateAccount` or `logout`
#### Example
```javascript
import { useWallet } from '@lisk-react/use-lisk'
function Component () {
const { authenticate, isAuthenicated } = useWallet()
// ...
}
```
The hook returns to the following interface:
```typescript
interface UseWalletProps {
account?: LiskAccount; // An up-to-date account when authenticated
isAuthenticated: boolean; // indicator if the user is authenticated
loading: boolean; // A state transition between authenticating and fetching the blockchain state
generate(): LiskAccount; // A function that generate a random account
logout(): void; // A reset function for the wallet
setAccount(account: LiskAccount): void; // Persisting a generated account in the wallet
authenticate(passphrase: string): void; // Authenticating the user via a given passphrase
}
```
### useBlock
useBlock can be called from within any function component to access the most recent blocks with their involved accounts
#### Example
```javascript
import { useBlock } from '@lisk-react/use-lisk'
function Component () {
const { block, accounts } = useBlock()
// ...
}
The hook returns to the following interface:
```typescript
interface UseWalletProps {
block: Block // The latest decoded block produced by the blockchain
accounts: LiskAccount[] // All decoded accounts involved in the last block
}
```
## @lisk-react/use-wallet
A react application built for the Lisk ecosystem will most likely authenticate users so that part of the application can become private vs. public. The developer will need to define a authenication methods and make sure that application can react to user changes with ease. The `useWallet()` library will abstract all of those settings into an easy to use React hook.
#### Example
```javascript
import { LiskWalletProvider } from '@lisk-react/use-wallet'
function App () {
return (
{/* <...> */}
)
}
```
### useLiskWallet
useLiskWallet can be called from within any function component to access context variables such as `isAuthenicated`, `authenticate`, `generateAccount` or `logout`
#### Example
```javascript
import { useLiskWallet } from '@lisk-react/use-wallet'
function Component () {
const { authenticate, isAuthenticated } = useLiskWallet()
// ...
}
```