Default sections
Use the predefined sections so you can create your DApp in a matter of minutes.
Last updated
Use the predefined sections so you can create your DApp in a matter of minutes.
Last updated
Go to the following link (that redirects to DexAppBuilder's app management) and connect your wallet by clicking on the "Connect wallet" button located in the upper right corner of the screen.
Choose from the available connections. Remember that you must connect the wallet where you have created your DApp so that it appears in the administration section.
Note: You will be asked to digitally sign with your wallet to authenticate yourself in the app. Please accept this signature, it is safe and harmless.
Once connected you will be able to see your DApps in the list. Click on the pencil at the right of your DApp domain, within the “Actions” column).
Once inside the administration page of your DApp, go to the "Layout" section on the left by clicking on it. Several options will be displayed, click on "Pages" to manage the creation of pages within your DApp.
For the purposes of this guide we will create a new page called “Alternative” in which we will paste the “Code” component. Now click on the «New page» blue button.
Now let's create the page title, remembering that we will use "Alternative" for the current example. Once we finished typing it we press in the blue «Save» button
You will now see your new page appear in the list. Click on it to enter the specific page.
You can see here that your page is empty. This means it doesn't contain any component as longwe just created it. Let's start by adding some predefined components by clicking on the "+ Add section" button
All of these components can be individually added to any page of your DApp, even using custom components. Both can be mixed within any page to help you design better.
Let's define each of the components so that you can know their possibilities and use cases.
Looking to promote the purchase/sale of a specific token, even your own? Using this component you can embed a trading window anywhere in your DApp where your customers and visitors can obtain or sell the token you have predefined.
It embeds a highly refined and incredibly efficient atomic swap component where your clients (and yourself) will be able to access the 0x liquidity API and quickly swap cryptocurrencies in the most secure way, directly from your wallet.
Clicking on the component will open the configuration modal. Lets dive in on each field:
Variant: Select among the visual looks that we offer to make your component unique.
Default network: Choose the default network for the component when visitors enter in your page without connecting their crypto wallets.
Network: This will be the default network as soon your visitors connect their wallets.
Search default input token (I have): Pick here the input token for default view / trading. This is the token you're asking to your clients to use, but they can choose any other ones from the list.
Search default output token (I want): Choose here the pair that you are selling by default. For example, if you're promoting your own coin / token in the enabled networks, you can choose it here as input. Remember you need to import your token before it can appear here in the list.
Default slippage: This is the percentage of tolerance for slippages between liquidity orders. The smaller the number, the more efficient the exchanges will be. Recommended between 0-50%.
Show only my tokens on search: Ideal for whitelisted token DApps, this option allows you to do just that: display in your component only the tokens you decide to display.
Gasless swaps: Make it the default to the user's choice of whether to use gasless swaps. Note that users will be able to turn this option on and off in the component directly.
Enable url params: Every time you make a query using the swap component (choosing the network you want to trade on, the token and the amount) the swap component generates a smart URL with all the trade data. Turn this on so your users can see that URL, or leave it off to use the same disguised URL as your DApp.
Keep in mind that this functionality also enables you, as the creator of the DApp, to earn commissions for each commercial exchange of your visitors. Look at the fees section to learn how to configure them.
You can also add a predefined decentralized exchange component that operates as efficiently as the swap component but with a difference: unlike the swap component where exchanges are atomic (instant, or at market price), users will be able to place limit orders within the 0x network and get more out of the trading exchanges.
Default network: Choose the default network for the component when visitors enter in your page without connecting their crypto wallets. Clicking on the green-highlighted pen will open a modal to choose all the networks you want to enable in your exchange.
Network: As the swap component, this will be the default network as soon your visitors connect their wallets.
Quote tokens: This option will highlight tokens for you in order to make easier for your clients to choose them among the list. Those ones will appear on the top of the list 👇 (green-highlighted)
Before you ask us why you can't see more tokens for listing, ask yourself if you have already added and enabled your tokens in the token settings section 😎
Base token: Pick here the input token for default view / trading. This is the token you're asking to your clients to use, but they can choose any other ones from the list.
Quote token: Choose here the pair that you are selling by default.
Default slippage: This is the percentage of tolerance for slippages between liquidity orders. The smaller the number, the more efficient the exchanges will be. Recommended between 0-50%.
Fee recipient address (ERC20 address): Enter the wallet address here where you want to receive the commissions generated by this exchange component. Make sure it is the correct one.
Fee amount (%): Set the percentage you want to charge your clients for each trade they make on your exchange. Don't be greedy and use small percentages to encourage usage.
This is a simple wallet component, where your visitors will be able to check their token balances on predefined networks, view their NFTs, and even send and receive cryptocurrencies.
Highlight NFTs to make them look great within the predefined component and thus receive offers from your visitors.
Did you know that you can place ANY NFT (whether yours or not) with this option, and if the owner accepts the offer you will get the commission for the sale? 🤯🤑
Clicking on the "Featured NFTs" component will open the following modal 👇
Importing single items
Title: Write a title for this component. You will be able to upload several NFTs to it, even from different blockchain networks.
Item type: Choosing "asset" will let you to import individual items if you just want to display some of them.
Network: Pick the network were the NFT is hosted.
Contract address: Paste the contract address for the specific asset.
Token ID: This is the unique identification for each token. Input the one for your specific item.
Title: Put a title for this specific NFT.
Choosing from your collection
Choose the collection that you've imported previously. If you didn't this yet, please refer to importing collections section on this documentation.
Token ID: This is the unique identification for each token. Input the one for your specific item.
Title: Put a title for this specific NFT.
Remember to click on the blue «Save» button frequently to avoid data loss.
If you have opened offers for your NFTs, using this component you can easily display them. It serves to refine assets among large collections by showing only those that have open offers.
Store account: This is the wallet that opened the listings. If you created new listings with one of your wallets please paste it here and your items will appear in the preview.
Name: This will be the public name of this store component.
Title: Write a catchy title for this specific selection.
Description: What is this selection about? Be specific here and you will grab more attention.
Profile image: Place a PFP for this NFT store component.
Background image: The one behind the PFP.
Hit on «Save» when finished.
Display single NFTs or complete collections by groups with this component. The usage is very similar to the Featured NFTs component. Clicking in the «Collections» component will open a modal like the one below 👇 (click on «+ ADD ITEM» to start adding assets)
Importing single items (by asset)
Title: Write a title for this component. You will be able to upload several NFTs to it, even from different blockchain networks.
Item type: Choosing "asset" will let you to import individual items if you just want to display some of them.
Network: Pick the network were the NFT is hosted.
Contract address: Paste the contract address for the specific asset.
Token ID: This is the unique identification for each token. Input the one for your specific item.
Title: Put a title for this specific NFT.
Importing a full collection
Title: Write a title for this component. You will be able to upload several NFTs to it, even from different blockchain networks.
Item type: In this case, collection.
Network: Pick the network were the NFT collection is hosted.
Contract address: Paste the contract address for the specific collection.
Image: Upload a default image for your NFT collection.
Title: Put a title for this specific collection.
Subtitle: Should work as a description for your collection.
Variant: Choose between default and simple.
Featured: This specific collection will be tagged as featured.
With this component you can add specific functions of a certain smart contract (the one you specify) and thus save time and interactions for your visitors by filtering contract actions and using them in the interface of your crypto app. Using this function requires Solidity knowledge (programming language).
Clicking in the component icon will open the following modal 👇
Network: Choose the contract network you're about to use. We will use Ethereum as long we will import the popular USDt Tether contract, verified on Etherscan.
Contract address: Click in the bar and paste the contract address. You can click also in the search bar below tagged with 🔍Search for a contract and write the name of the contract you're looking for. We're using 0xdAC17F958D2ee523a2206206994597C13D831ec7 for this example.
ABI: This is a read-only section that scans the contract ABI (Application Binary Interface) and shows you below all the functions inside the contract.
Clicking in any of the functions will open the functions details or that specific one and will create a window in the preview 👇
Everything will be customizable in each function call, except the logic. This will guarantee that each function call is secure, taking into account that on this occasion we use a highly audited and secure contract like Tether one.
After creating web3 forms you can import them directly into this component and thus save time in implementations. In the photo below you will see the web3 forms listed that you have previously created or cloned in your DApp. Clicking on any of them will show you in the preview on the right 👇
Embed any YouTube video in a curated component for any view (desktop, mobile, tablets, refrigerators, cars, etc.)
Video Type: Only YouTube is enabled for this component. We will enable more video services on demand.
Title: Write a nice descriptive title for this video.
Video URL: Paste the link for the YouTube video.
Grab your visitors' attention with a powerful message with a subtitle and a button with a navigation link. It is the perfect option to promote related products or products found on external websites.
Variant: Choose between light and dark.
Title: Write the subject or the main title for this component. You can see in the image above that is the one with the biggest font size.
Subtitle: The smallest font size, above the title.
Button title: This is the text inside the CTA button.
Button URL: Where will the visitor who clicks on the CTA button go?
Open in new page: Check this option to make the page open in a new tab. This option is recommended when the address is located on a site external to this DApp.
At the same time, we can add NFTs or collections in a CTA to promote them and make our visitors go directly to them by clicking on the «+ ADD ITEM» button 👇
After importing your NFTs, the preview should look like the picture below 👇
This is another friendly reminder for you to save every time you make any changes to your DApp 🙏
For fans of organized content, well-formatted texts and even for writing technical documentation, this component helps create the most stylized pages using the popular and simple Markdown language.
Embed virtually anything using this component. You will need HTML markup, the scripts and the CSS files for it to work great.
Refer to embedding external sites for more information about how to embed third-party apps with this component.
