[SOLVED] Dex-like Uniswap

Moralis General
#1

Hello, I am in need of some help here. I am trying to code the Uniswap Dex that Filip taught. However, Something isn’t right with my and CSS as my results are now quite the same. I’ve tried playing around for hours, so I think I need some expert help.

Thanks

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Dex</title>
    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Dex</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
            </ul>
            <button id="login_button" class="btn btn-outline-primary my-2 my-sm-0" type="submit">Sign in with Metamask</button>
        </div>
    </nav>
    <div class="container">
      <div class="row"> 
          <div class="col col-md-6 offset-md-3" id="window">
            <h4>Swap</h4>
            <div id="form">
                <div class="Swapbox">
                    <div class="Swapbox_select">
                      SELECT TOKEN  
                    </div>
                    <div class="swapbox_select">
                        <input class="number form-control" placeholder="amount" id="from_amount">
                    </div>
                </div>
                <div class="Swapbox">
                    <div class="Swapbox_select"> 
                      SELECT TOKEN                         
                </div>
                <div class="Swapbox_select">
                    <input class="number form-control" placeholder="amount" id="from_amount">
                </div>
            </div>
        </div>
    </div>
</div>
</div>

    <script type="text/javascript" src="./main.js"></script>
</body>

</html>```


CSS Code

#window{

margin-top: 50px;

background-color: black;

color: cornsilk;

padding: 15px;

border-radius: 20px;

box-shadow: 0 0 5px black;

}

.swapbox_select{

width:50%;

float: right;

}type or paste code here

#2

Can anyone help at all or not???

#3

Hi @ProjekP

Could you please explain exactly what the problem is. Also you can take a look at the tutorial repo

#4

Hello Yomoo, it’s ok. It’s sorted now. I basically did not capitalize Swapbox_select in my CSS code. All fine now.

Thanks

#5

Hi Projek, Please i am setting up a dex and i have done all neccesasry but the problem is how do i add the list of all token and the images or icon to swap box?

#6
#7

Thanks for your quick response Qudusayo, sorry to bother u, which particular place will i add it to?

#8

You add it to the result object returned from Moralis.Plugins.oneInch.getSupportedTokens

#9

Hi Qudusayo,please can you explain in a layman term how to add token to my dex swapbox. i am new to programming.

#10

Here’s a sample where FEG and SafeMoon is added to the token list https://github.com/Qudusayo/Dex/blob/fd7a3888bcb2e7cdd0df4dfe8e045fc6ccbb01a9/script.js#L24-L37

#11

Thanks for your feedback… I have seen your github link, but in the dex tutorial on YouTube the guy didn’t add the token one by one as you mention in your GitHub. if i start adding all the token by each the code will be too large. I think there is code that comprises all the list of the tokens…

#12

Are the tokens you’re trying to add a custom token ?

#13

Sorry for bothering you, i am trying to add most token on coinmarketcap. I want my dex to comprise many token for trading. pls what do you mean by custom token?

#14

Custom token is one that you’ve made or deployed with your own contract.

What DEXes tend to is have their own whitelist of verified tokens but allow you to use any contract (but will state that it’s unknown), so you could build your own list to use.

#15

After i have added those token to my Javascript file unfortunately they didn’t show in my select token on the dex… even the swap button is not clickable…

#16

The token should be at the end of the token list if added, in case you can’t find them, you show how you’re doing it ?

#17

I copied your JavaScript source code from your Github it still the same… the feg and safemoon token are not showing. Is there anything i am doing wrong…

#18

Hi Qudusayo, I saw this error message in my console…

uncaught (in promise) ReferenceError: serverUrl is not defined
at init (main.js:11:25)
at main.js:165:1

#19

Have a look in that file for serverUrl. You need your Moralis serverUrl and appId when you connect.

Connect with Vanilla JS - Moralis

const serverUrl = "https://xxxxx/server";
const appId = "YOUR_APP_ID";
Moralis.start({ serverUrl, appId });
#20

The server of moralis are connected… they are both on javascript file…