This project is a Typescript + React template to get you started building dApps for CKB, using the Lumos framework.
It's designed to kickstart your project by providing functional examples of how to:
- Query data from the blockchain.
- Interact with CKB wallets (Keypering is supported out of the box).
- Build, sign, send, and track transactions.
See the Video Walkthrough for an overview of the architecture and code walkthrough.
Check out the docs, the intro tutorial, as well as the third entry in the Dapps on CKB video workshop.
yarn install
The app will need a CKB node, and Keypering instance to connect to.
-
You can specify the URL of a CKB node to connect to in the server
.envfile- The app is configured to connect to a local AGGRON4 testnet node by default (How to run a local node)
-
Ensure a local Keypering instance is running at the URL specified in client app. Keypering can be built from source, or downloaded via the latest release for your platform.
yarn start
The CKB Testnet Faucet can be used to claim testnet CKB for your Keypering wallet.
The client serves as the point of interaction for users. It handles queries and transactions for the blockchain via the dApp server, and gets required signatures for transactions from the Wallet.
The client is based on the create-react-app typescript template. Styled-components is used for the bulk of styling. React-hook-form is used for a clean, lightweight form handler. State managment is handled in a lightweight fashion using hooks.
While a project of this complexity ultimately has to make some opinionated choices, we hope it can still be useful to those who prefer a different JS stack. The architecture and code snippets for Lumos & CKB interaction will be generally applicable for integration into other framework(s).
A lighter weight dapp that also uses Kepyering can be found at the simplest dapp.
There are a set of Stores that maintain application-level state. They make use of the useContext() react hook to allow usage anywhere in the application.
The Services manage interaction with other components, such as the dApp server and wallet.
The server is essentially a wrapper around the Lumos indexer & transaction generation functionality. The example server here is a small express server with typescript to get you started.
It features a simple REST api for the queries and actions required by the client.
- General routes for querying the node directly, without having to maintain it's own connection.
- Indexer routes for core indexer functions (querying for cells and transactions).
- Ckb routes for handling ckb balances and transfers.
Numerical values are stored as BigInt form for comparison, because numbers in the CKB system can exceed the maximum value that can be safely stored in Javascript numbers. These are converted to strings when required (passing via API, serialization, display). Certain formatter methods use bignumber.js for its' convenient formatting options.
The minimum transfer amount is 61 CKBytes (6100000000 Shannons). This is because enough CKBytes must be provided such that a new cell can be created for the recipient. Attempting to transfer less than this amount will result in a "Transaction: InsufficientCellCapacity" error.