Web3 forms generator

This advanced functionality allows creators and developers to scan smart contracts and extract useful features for their projects and ideas on the Web3.

Interacting with Smart Contracts without requiring advanced coding skills has become a tangible reality. DexKit has developed an exceptionally valuable tool that enables users to leverage features from their preferred Contracts and incorporate them into their creative projects built with DexAppBuilder.

For seasoned DeFi enthusiasts who have previously utilized Ethereum's Remix, this tool serves as a simplified version encompassing its most significant functionalities. It empowers new developers or individuals with limited technical expertise in web3 to fashion tailored products effortlessly, without having to write a single line of code.

By invoking functions from your favored contracts, you can achieve the following:

• Effortlessly receive crypto donations in your DApp by simply clicking on any of the supported network's chosen tokens.

• Send airdrops to your community.

• Organize equitable raffles employing complete randomness.

• Widely distribute your token to a vast customer base.

• Design and deploy crypto games.

• Monetize your content.

• And any other function that you can extract from any verified smart contract to bring your innovative ideas to fruition.

Enhance your community's experience by harnessing the potential of this innovative tool in conjunction with the upcoming Token Gate feature. With this powerful combination, you can empower your audience to access your exclusive content by holding specific token(s).

Basic requirements

To start using this tool you must create your DApp with DexAppBuilder. In this way you can add the forms that you create here (those that contain the calls to the contracts that we will need for our app).

No crypto wallet? No problem! Create your first one inside the platform using your email or another credentials. No need to download heavy apps to your device.

Getting started

If you already have your DApp created, continue here to navigate directly to the form builder. It is there where we will create our calls to smart contracts that we will later use in our DApp.

We are assuming that you are already logged in with a web3 wallet and already have a DApp created at this point.

Introducing forms

We will refer to each of the extracted calls or functions from the smart contracts as "forms." These forms can be created and stored for future utilization.

To illustrate this concept, let's consider a hypothetical scenario. Imagine that we aim to establish a donation system that enables our website visitors to contribute a specific amount of N cryptocurrency with a single click.

The term "N cryptocurrency" denotes any permissible token within the supported networks, from which we can extract the transfer function and modify it according to our requirements.

Now, let's delve further into our hypothetical case. Suppose we want to create a crypto donation button for N token, and we desire our visitors to donate a particular amount of a specific token towards this cause.

In this scenario, we have two forms to extract: firstly, the form for purchasing N amount of the chosen tokens, and secondly, the form with the button for transferring the tokens to the address we chose for the purpose.

Extracting the functions

Once we have displayed the contract addresses of our favorite tokens (in this case the one we will use for the donation button) we proceed to scan the address to obtain the functions. Below we explain how to do it and create a widget for each of the contract calls or “forms”, as we decided to call it laconically.

1. Enter the platform's website and connect your wallet. Once inside, click on the “create custom form” section.

1. Once clicked you will see the following screen. Fill all the blanks with the requested information:

   • Name: the name for this form.

   • Description: Describe what's this form about.

   • Network: check available networks for compatibility list.

   • Contract address: Paste here the token contract address that you're about to use for this purpose. As long we're using our own token we're taking it from the contract addresses in ---Our token---section of this documentation.
   • ABI: this field will be filled automatically when we paste a compatible contract address.

Create form landing page before filling

Here is how it will look your form with the basic information.

For security reasons, some smart contracts are unreadable by this platform, so we always recommend using verified contracts in their respective block explorer.

1. Now it is time to check, within the functions printed by the platform, which of them we will need for our current purpose. In this case we will use the transfer function that is responsible for, as the name itself says, transferring tokens (in this case it will be from the donor's wallet to the organization).

In the image above you can see the functions that belong to the contract of our $KIT token. In our current example we will use the transfer function, as stated above. Next, the fields contained within the function must be filled in:

• Function name: The public title for your component. You can hide this ticking on the «Hide label» button

• Call label: This is the name contained inside the call button.

• Inputs

  • Recipient: the ERC-20 address(es) that will get the donation.

    • Input type

      • Default, for a single fixed recipient address 0x4e110...

      • Address input (for several recipient addresses at the same time).

• Amount

  • Input type

    • Default amount (enter fixed digit. For example: 20)

    • Formatted decimal (enter amount and put the decimals, in this case are 18 digits for this specific contract).

Using the components

After you have created your components using the functions of your favorite Smart Contracts, it is time to implement them within your product(s). You can add them very easily in any of your DApps by following the steps below:

1. Assuming you have already created your DApp with DexAppBuilder, navigate to the admin dashboard. Now click in the three-dot menu at the right of your DApp and click on «edit».

1. Now navigate to «Pages» picking the option in the left vertical section. You will now see your main page with all the components inside. Let's create a new page for our forms hitting in the «+ Create new page» button.

1. Let's give a name to our new page. For this example we plan to create a donation section for different projects and purposes.

Hit on «Save» when you're done with your page name.

1. Our “Donate” page has been created, as we can see in the image below. There are no components within it, which is why we will click on the “+ Add custom section” option because there we will find the widget we need.

1. Once inside the custom page editor, click on the + icon located in the center (or on the right of the screen) to add a new widget / component. From the list we are going to use the one called “Contract from user form” that will summon all our forms created with the instructions above.

Just drag n' drop the component to the screen center.

1. After placing the component in the screen you will see your created forms. Choose the one(s) you need for the purpose.

1. Here is how it will look your component. You are able to hide the title and extra information for that component ticking in the «Hide form info» option, like we show below.

Do not forget to hit the blue «Save» button progressively located in the bottom right of your page. This will ensure your data won't be lost with any screen state change.

1. This is what your donation component would look like when installed. You can get creative with this option and add content to the page to ensure that it will touch the hearts of your readers/viewers and they will donate to your cause.

For this purpose we place our donation widget below the summary of the project we want to promote.

If you can correctly display the component in your DApp, as we see in the example above, congratulations! 🥳 You've now managed to integrate your first custom function!

We encourage you to continue testing this new functionality. The possibilities are endless and only you can give the best purpose to this new product.