The goal of this project is to increase and accelerate the adoption of blockchain technology.
Through this solution, developers will be able to automatically generate entire React.js dApps starting from the ABI of smart contracts; those, in order to be compatible with this solution, must be written in Rust, using the MultiversX framework.
The dApp will be configured with the libraries made available by the MultiversX team to facilitate the interactions with the blockchain and smart contracts.

A Proof of Concept has already been developed as my graduation project. This POC is very limited as it allows the generation of dApps from relatively simple smart contracts; for example, the POC version covers only the Rust and framework basic types, completely ignoring custom types defined via struct or enums. Another limitation is that the generated components are not assembled; this means, that the programmer has to assemble the components based on how they interact with each other.

For the participation in the hackathon, the development of the project started again from 0 sever times, but the final version is represented by this repository. We started from scratch again, with the goal to fix some bugs present in the POC version and, most importantly, to allow proper implementation of the limitations described above.

Thus, the final version will be more versatile and will be compatible with a greater variance of smart contracts.

Demo   |   Bug(label: bug)   |   Feature(label: enhancement)

• 📐 Architecture
• 🖥️ Getting started
  • Prerequisites
  • Local development
• 🛠 How to
• ✅ Todo
• 👥 Contribute
• 📑 License

Back to ⬆️

• JavaScript runtime node.js;
• Rust toolchain rustup, rustc, cargo;
• OPTIONAL:
  • Alternative package manager:
    • pnpm: npm install --global pnpm
      or
    • yarn: npm install --global yarn;
  • cargo-watch: cargo install cargo-watch;

• Get the repository: git clone https://github.com/doinel1a/gen-x;

• Open your terminal or code editor to the path the project is located, and run:

  • In the root / folder:

    	npm	pnpm	yarn
    To install the dependencies	npm install	pnpm install	yarn install

  • In the front-end folder:

    	npm	pnpm	yarn
    To install the dependencies	npm install	pnpm install	yarn install
    To run the development server *	npm run dev	pnpm dev	yarn dev
    To build the app for production	npm run build	pnpm build	yarn build
    To preview the production optimized app *	npm run preview	pnpm preview	yarn preview

    * The front-end interface will be accessible at the following url: http://localhost:3000.

  • In the back-end folder:

    	Cargo
    To run the back-end in development mode *	cargo run
    To run the back-end in development & watch mode *	cargo watch -x "run"
    To run the back-end in production mode *	cargo run --release
    To build the back-end for production	cargo build --release

    *
       The API will be accessible at the following url: http://localhost:8080.
       The available endpoints are:

    • /api/v1/healthcheck
    • /api/v1/generate

Back to ⬆️

To test the solution:

• Cloud:

  1. In your favourite API client:
     1. Set the HTTP Method to POST;
     2. Set the url as https://gen-x-back-end.fly.dev/api/v1/generate;
     3. Select Body and then JSON;
     4. Insert a JSON which must have the following structure:

        {
          "sc_address": "",
          "sc_abi": {
            "name": "SC name",
            "constructor": {
              "inputs": [ . . . ],
              "outputs": [ . . . ]
            },
            "endpoints": [ . . . ],
            "events": [ . . . ] ,
            "hasCallback": false,
            "types": { . . . }
          }
        }

        To enable the rendering feature of a endpoint inside a specific page, insert in the documentation of each endpoint a field like path: /pages/page1; otherwise it will be rendered in its predefined folder
  2. Send request;
  3. Download .zip project;

• Locally:

  1. Get started;
  2. Build and run the API;
  3. In your favourite API client:
     1. Set the HTTP Method to POST;
     2. Set the url as http://localhost:8080/api/v1/generate;
     3. Select Body and then JSON;
     4. Insert a JSON which must have the following structure:

       {
         "sc_address": "",
         "sc_abi": {
           "name": "SC name",
           "constructor": {
             "inputs": [ . . . ],
             "outputs": [ . . . ]
           },
           "endpoints": [ . . . ],
           "events": [ . . . ] ,
           "hasCallback": false,
           "types": { . . . }
         }
       }

     To enable the rendering feature of a endpoint inside a specific page, insert in the documentation of each endpoint a field like path: /pages/page1; otherwise it will be rendered in its predefined folder
  4. Send request;
  5. Download .zip project;

Back to ⬆️

• Front-end:
  • Integrate API:
    • Display back-end errors in the UI;
• Back-end:
  • Test generate endpoint to download .zip archive;
  • Set listen address dynamically based on the environment;
  • Smart contract ABI:
    • Address:
      • Validation;
    • Endpoints:
      • Readonly:
        • Render single endpoint w/ its inputs & outputs;
        • Render all endpoints;
        • Render & "assemble" endpoints in the specified page;
          To enable this feature, insert in the documentation of each endpoint a field like path: /pages/page1
        • Handle custom types - Struct & Enum:
          • Input serialization:
            • Base Rust types;
            • Struct;
            • Enums (only rendering);
          • Output deserialization:
            • Base Rust types;
            • Struct;
            • Enums (only rendering);
      • Mutable:
        • Render single endpoint w/ its inputs & outputs;
        • Render all endpoints;
        • Render & "assemble" endpoints in the specified page; To enable this feature, insert in the documentation of each endpoint a field like path: /pages/page1
        • Handle custom types - Struct & Enum:
          • Input serialization:
            • Base Rust types;
            • Struct;
            • Enums (only rendering);
          • Output deserialization:
            • Base Rust types;
            • Struct;
            • Enums (only rendering);
    • Custom types:
      • Struct;
      • Enum;
  • Fix MultiversX sdk UI styling;
  • Update dApp boilerplate to the last version;
• CI / CD:
  • Deploy front-end (vercel);
  • Deploy back-end (fly.io);
  • Set-up Docker;
  • Optimize Docker image size;
  • CI / CD github actions;
  • Trigger vercel deployments only on front-end folder push;
    (git diff --quiet HEAD^ HEAD -- . in git project settings; . since front-end is setted as root directory)
  • Trigger fly.io deployments, through gh actions, only on back-end folder push;

Back to ⬆️

Contributions are what make the open source community such an amazing place to learn, inspire, and create.
Any contribution is greatly appreciated: big or small, it can be documentation updates, adding new features or something bigger.
Please check the contributing guide for details on how to help out and keep in mind that all commits must follow the conventional commit format.

1. Get started;
2. For a new feature:
   1. Create a new branch: git checkout -b feat/NEW-FEATURE;
   2. Add your changes to the staging area: git add PATH/TO/FILENAME.EXTENSION;
   3. Commit your changes: git commit -m "feat: NEW FEATURE";
   4. Push your new branch: git push origin feat/NEW-FEATURE;
3. For a bug fix:
   1. Create a new branch: git checkout -b fix/BUG-FIX;
   2. Add your changes to the staging area: git add PATH/TO/FILENAME.EXTENSION;
   3. Commit your changes: git commit -m "fix: BUG FIX";
   4. Push your new branch: git push origin fix/BUG-FIX;
4. Open a new pull request;

Back to ⬆️

All logos and trademarks are the property of their respective owners.
Everything else is distributed under the GPL-3.0 License.
See the LICENSE file for more informations.

Back to ⬆️