Vortex | Introducing Vortex, the Ethereum React Dapp Booster

mortimrmortimr ParisMember Posts: 1

Hi everyone !

I'm Iulian and I am the single developer of the Vortex tool. I made this tool mainly because I wanted to help Dapp Developers enhance their data management and user experience. This tool introduces a Redux Store that will handle Web3 loading, transactions, contract method calls, account following and action feed. Everything you need to deploy a dynamic and mordern application, and giving action feedback to user, enhancing their experience.

What is Redux ?

From the official Redux repository
Redux is a predictable state container for JavaScript apps [...] It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

Basically Redux is a store that handles the state of your whole application. With React, you can connect your components on specific parts of the state, and these components will be re-rendered only if their connected state is changed. You're used to manual setState, now your components state is in the Redux store. This means two components can have the exact same state, and multiple components can share parts of the state. This is a very powerful tool, and if your app is well implemented, it means you can import a Redux state and your app will be in the exact same state as when you exported.

What is Vortex ?

When you create a Redux store, you have to define reducers and actions, that are sets of functions that will interact with the stored state and alter it. With Vortex, all of the reducers and actions are already created, and all you have to do is either fetch the data available in the store, or dispatch actions. You can even merge your reducers and initial state when creating a Vortex Instance.
  • Vortex will handle Web3, and will store its instance on the store. It will also notify you if errors occured while loading (missing metamask ? not connected ?) or if you are on the wrong network and can't find your contracts.
  • Vortex will handle Transactions, and if you use the transaction wrappers web3.eth.vortexSendTransaction and web3.eth.vortexSendRawTransaction (that works exactly like the original web3.eth.sendTransaction and web3.eth.sendRawTransaction. You will have a detailed follow up of the transaction status in the store, and you'll be able to access these informations from anywhere in your application. Want to do a notification system telling when transactions are broadcasted ? When they have errors ? When they are confirmed ? Just plug it to Vortex. Want to render a components dynamically depending on the transaction status ? If it succeeded ? Just plug it to Vortex.
  • Vortex will handle Smart Contracts. If you use the method wrappers, you'll be able to have follow ups on transactions just like the manual ones. Also, constant methods are cached, and if you plug a component on a method call, it will be re-rendered as soon as the value changes (automatic refresh and intelligent refresh based on user actions). This way, you don't have to refresh the page or manually poll web3 to see if something changed in your Smart Contract. You'll also be able to dynamically load Smart Contracts at specific addresses.
  • Vortex will handle Accounts, and will give you the balance of accounts you decide to follow (by default only following your coinbase). The value of the balance is refreshed upon timeout (that you define), and upon corresponding actions from the user (if transaction is emitted from a followed account, the balance will be refreshed when transaction if confirmed, same if transaction is emitted to a followed account). You will also be able to access transaction arguments, and they're updated as soon as the transaction receipt is available.
  • Vortex will handle a Action Feed, that is an array with the major actions happening in the store (transactions, contract loaded, errors, account followed). Perfect for notifications or event feeds.
And I'm working on a lot of new features !

How can I use Vortex ?

It's easy, head to our github repository to find the links to documentations and resources.

You also have two more repositories :
  • Vortex Components: Library with generic React Components using Vortex
  • Vortex Demo: A demonstration Dapp, showing how to use the Vortex Components

I feel like there is something missing !

If you have any idea, you can head to the gitlab repositories, read the contribution guidelines, open an issue, and contribute to the repository !

Thank you for reading ;)
Sign In or Register to comment.