Get started quickly with your Lisk frontend. Clone this repository and start adding your features.
Features included :
- Create new account
- Login
- Logout
- Account page
- Faucet
Clone the repo and install dependencies
git clone https://github.com/JesusTheHun/lisk-react-kit.git
cd lisk-react-kit
yarn install
.env
files are used to configure your project. The .env
file is loaded in all environment,
.env.<process.NODE_ENV>
is then loaded, and finally .env.<process.NODE_ENV>.local
.
The config includes the following
LISK_NETWORK=testnet
LISK_NODE_API_URL=https://testnet.lisk.io
THIS_FRONT_URL=http://localhost:3000 # used to generate exportable URLs
Yes, it is a branded string. It is a fake type to carry some semantic with it. So you know what this string is used for.
There are several types like that such as LiskPassphrase
, LiskAddress
, LSK
, Beddows
and more.
You can see a complete list in services/types.d.ts
.
This project includes a faucet that will abound the account upon creation. If the Lisk node you configured do not accept such transaction, it will result in an error.
If you are not familiar with redux-observable
(link at the end), the mechanic is divided in 3 steps :
An action is dispatched (redux), the action is treated by an epic (rxjs) and then eventually one or more action are dispatched.
For example you dispatch fetchAccount.request
, the epic will see the action, trigger an API call and then
dispatch a new action fetchAccount.success
with the API response as the action payload.
The actions are reduced by redux like the usuals.
Inside services
create a new directory names after your project, myBlockchain
for example.
Create a new file named types.d.ts
and create your custom transaction asset type.
You can take example on LiskPostTransactionAssetTransfer
export type LiskPostTransactionAssetTransfer = {
amount: Beddows;
recipientId: LiskAddress;
};
Then create the action to post such transaction
export const postTransferTransactionAsync = createAsyncAction(
'POST_TRANSFER_TRANSACTION_REQUEST',
'POST_TRANSFER_TRANSACTION_SUCCESS',
'POST_TRANSFER_TRANSACTION_FAILURE'
)<LiskPostTransactionPayload<LiskPostTransactionAssetTransfer>, LiskTransaction, APIErrorResponse>();
And the epic
export const postTransferTransactionsEpic: RootEpic = (action$, state$, {liskNodeApi}) => {
return action$.pipe(
filter(isActionOf(postTransferTransactionAsync.request)),
mergeMap(action => {
// ...
return from(liskNodeApi.postTransferTransaction(action.payload, state$.value.auth.passphrase)).pipe(
map(postTransferTransactionAsync.success),
catchError(message => of(postTransferTransactionAsync.failure(message)))
)
})
);
};
I will gladly accept PRs for this project. If you want to contribute but don't know what to do, here is a list of things that need work :
- Inconsistent error return from service to epic
This project has been developed by Jonathan 'JesusTheHun' MASSUCHETTI.
Licensed under the GPL v3 License
I'm currently running a campaign to become a forging delegate. My delegate name is jesusthehun
.
You can share your support by voting for me !
You can also support the development of this repo by making a donation to 14260358272659413479L