React + gRPC + bchd = 💚
This project is under development. Stuff can break.
Runing Envoy + React + Tests in a single terminal
cd cashweb/
docker-compose build
Recreate proto files: ./src/protos/genproto.sh
React
gPRC, Web gRPC
Typescript
After doing a lot of research and figuring out many ways to interact with gRPC server through web client. I ended up following this approach:
With Envoy (Current approach).
Snapshot Testing
:information_source: Eventually this project will have:
Ability to interact with a local bchd node(private). :white_check_mark:
Ability to subscribe to custom events via cashserver(private). :white_check_mark:
Docker and Docker-Compose :white_check_mark:
:speaker: Private repositories will be made public in coming week(s).
bitcoincash:qre3vyl5amlua9a80fg9ta3ck806fvqvly9frxe6n4
MIT
docker-compose up
Running separatly [3 terminals]
React app:
npm install
npm start
or
docker build -f Dockerfile.dev -t webclient .
docker run -p 3000:3000 -v /app/node_modules -v $(pwd):/app webclient
Tests: npm run test
Envoy:
cd envoy/
docker build -t envoy .
Go to the browser at localhost:3000
Lazy loading, Code splitting
Error boundaries
Hot Reload
Components.
Memoized Components. (Prevents unnecessary rerendering)
Components: They are dumb, they only display the data provided. It may contain some conditional operators and are easy to memoize.
Containers: They are smart components the are aware of the props. (Props could be directly from the parent or from the store.) These smart components can make calls to business logic code or update the app state.
Views: These components contain containers and are also aware of the app state.
Redux: Consists of Actions, Reducers, Sagas and other business logic.
Utils: Consists of helper functions.
Protos: Used to connect to gRPC Server and act as a connection client.
Managers:
gRPC Manager. inspired from grpc-bchrpc-browser
Docker/Docker Compose: Containerises the application.
Hot reload via shared volumes in development mode.
Envoy: Envoy translates the HTTP/ 1.1 calls produced by the client into HTTP/ 2 calls that can be handled by the services.
Node interaction: Live Transactions, Fetch Transaction details, Fetch Block details
Scripts:
genproto.sh
Testing: Snapshot testing of Components.
Fetch SLP token data and more interactions.
Block Subscription.
Create a wallet and submit transactions.
Fetch address information.
Play a game via scanning a QR code [Separate module].
Kubernetes configs + docs.
Travis/circle CI configs + docs.
more...
docker run -p 8080:8080 envoy
