Default sections

Use the predefined sections so you can create your crypto app in a matter of minutes.

Adding components

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 crypto app 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 crypto apps in the list. Click on the menu (the three dots to the right of your crypto app, within the “Actions” column) and click on “Edit”.

Once inside the administration page of your crypto app, 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 crypto app.

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

As you can see, we are now inside the new page we created and it is empty. Now let's click on the "+ Add Section" button that will open the modal where all the predefined components are located.

All of these components can be individually added to any page of your crypto app, 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.

Cryptocurrency componentes

Swap

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:

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%.

Keep in mind that this functionality also enables you, as the creator of the crypto app, to earn commissions for each commercial exchange of your visitors. Look at the fees section to learn how to configure them.

Exchange

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 apear 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.

Wallet

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.

Non Fungible tokens (NFTs) components

Featured NFTs

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.

NFT Store

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.

Collections

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.

Web3 components

Contract form (advanced feature)

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.

User contract form

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 crypto app. Clicking on any of them will show you in the preview on the right 👇

Resources

Video

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.

Call to action (CTA)

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 crypto app.

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 crypto app 🙏

Low code

Markdown

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.