Simple react packages for building modern Lisk dApps
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:
import { LiskProvider } from '@lisk-react/use-lisk'
const targetNetwork = {
nodeUrl: 'http://localhost:4000',
wsUrl: 'ws://localhost:4001/ws'
}
function App () {
return (
<LiskProvider targetNetwork={targetNetwork}>
{/* <...> */}
</LiskProvider>
)
}
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 can be called from within any function component to access context variables such as isConnected
, setTargetNetwork
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:
interface UseClientProps {
network?: {
isConnected: boolean // Indicator if LiskProvider is connected with the blockchain
endpoint: { // Your given endpoints to LiskProvider
wsUrl: string
nodeUrl: string
}
}
}
useWallet can be called from within any function component to access context variables such as isAuthenicated
, authenticate
, generateAccount
or logout
import { useWallet } from '@lisk-react/use-lisk'
function Component () {
const { authenticate, isAuthenicated } = useWallet()
// ...
}
The hook returns to the following interface:
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 can be called from within any function component to access the most recent blocks with their involved accounts
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
}
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.
import { LiskWalletProvider } from '@lisk-react/use-wallet'
function App () {
return (
<LiskWalletProvider>
{/* <...> */}
</LiskWalletProvider>
)
}
useLiskWallet can be called from within any function component to access context variables such as isAuthenicated
, authenticate
, generateAccount
or logout
import { useLiskWallet } from '@lisk-react/use-wallet'
function Component () {
const { authenticate, isAuthenticated } = useLiskWallet()
// ...
}