ConfluxPortal is the Conflux Metamask version and allows you to extract user accounts for authentication also to show balances, sign messages, send transaction and other functions related to Conflux Network.
React is the most used framework for creating web applications, understanding how it can be integrated with ConfluxPortal will allow you to build DApps for your users, taking advantage of the speed of transactions and even the fees sponsorship.
I´ve created a repository that you can clone and grab whatever you need for your DApp. I will keep this repository and update it.
I have been learning about the conflux network so I decided to develop tools and examples like this according to what I´m learning, I hope to help many beginners in the world of DApps to quickly get along with Conflux Network and its tools.
So let´s start!
You need these requirements:
Next clone and cd to the directory
$ git clone https://github.com/luiscrag/confluxportal-react.git
$ cd confluxportal-react
Now install dependencies and start the React DApp
$ yarn
$ yarn start
Go to https://localhost:3000/
Once you set up your ConfluxPortal account, you can switch to “Conflux Test Network” and get CFX test from the faucet by click in “Deposit” and then “Get CFX”.
The components where the logic of each function related to ConfluxPortal is kept can be seen in src/App.js.
Each component is located within the src/components directory.
I directly use the window.conflux provider API, but you can also use other frameworks and use them as a provider, you can get more information about this in the provider api reference.
At the moment the functionalities are these.
-
Check in which network you are “Tethys or Test”, also listen to network changes.
-
Check if ConfluxPortal is installed.
-
Authorize with your ConfluxPortal and obtain your CFX address.
-
Get Global State
-
Send CFX - This will work when you first authorize your ConfluxPortal and obtain your CFX address.
I will add more features such as transaction status management, deploying smart contracts on the network, user state, and other features.
Stay tuned for this post as I will update it, also feel free to clone the repository and contribute.