So please i have an error "currentTrade is not defined at HTMLDivElement.selectToken"

Moralis General
#1

hello dear im new dev from your school only not educated in professional school but you are the best school MORALIS TEAM thank you for all , so please i have an error “currentTrade is not defined
at HTMLDivElement.selectToken”
copying a how to create a DEX full course Like Uniswap FULL" in youtube

HTML CODE :

<title>Vanilla Boilerplate</title>

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

<script src="https://unpkg.com/moralis/dist/moralis.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://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">

<nav class="navbar navbar-expand-lg navbar-light bg-light">

    <a class="navbar-brand" href="#">illimited Pixel</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>

    <body>

      <button id="btn-login" class="btn btn-outline-primary my-2 my-sm-0" type="submit">Sign in with Metamask</button>

      <button id="btn-logout">Logout</button>

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

    </body>

       

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

                     

    </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 token_select" id="from_token_select">

                 <img class="token_image" id="from_token_img">  

                 <span id="from_token_text"></span>

                </div>

                <div class="Swapbox_select">

                    <input class="number form-control" placeholder="amount" id="from_amount">

                </div>

            </div>

            <div class="Swapbox">

                <div class="Swapbox_select  token_select" id="to_token_select">

                  SELECT TOKEN                        

            </div>

            <div class="Swapbox_select">

                <input class="number form-control" placeholder="amount" id="from_amount">

            </div>

        </div>

        <button class="btn btn-large btn-primary btn-block" id="Swap_button">

            Swap

        </button>

    </div>

</div>

<div class="modal-dialog" role="document">

  <div class="modal-content">

    <div class="modal-header">

      <h5 class="modal-title">Select Token</h5>

      <button id="modal_close" type="button" class="close" data-dismiss="modal" aria-label="Close">

        <span aria-hidden="true">&times;</span>

      </button>

    </div>

    <div class="modal-body">

      <div id="token_list"></div>  

    </div>

  </div>

</div>


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

main.js

serverUrl = “https://ALREADYSET.usemoralis.com:2053/server”;

appId = “SRY ALREADY SET IN MY CODE”;

Moralis.start({ serverUrl, appId });

async function init(){

await Moralis.initPlugins();  

     await listAvailableTokens();

}

async function listAvailableTokens(){

const result = await Moralis.Plugins.oneInch.getSupportedTokens({

chain: 'bsc', // The blockchain you want to use (eth/bsc/polygon)

});

tokens = result.tokens;

let parent = document.getElementById(“token_list”);

for( const address in tokens){

   let token = tokens[address];

   let div = document.createElement("div");

   div.setAttribute("data-address", address)

   div.className = "token_row";

   let html = `

   <img class="token_list_img" src="${token.logoURI}">

   <span class="token_list_text">${token.symbol}</span>

   `

  div.innerHTML = html;

  div.onclick = selectToken;

  parent.appendChild(div);

  }

}

function selectToken(){

closeModal();

let address = event.target.getAttribute(“data-address”);

console.log(tokens);

currentTrade[currentSelectSide] = tokens[address];

console.log(currentTrade);

renderInreface();

}

function renderInreface(){

document.getElementById(“from_token_img”).src = currentTrade.from.logoURI;

document.getElementById(“from_token_text”).src = currentTrade.from.symbol;

}

async function login() {

let user = Moralis.User.current();

if (!user) {

try {

  user = await Moralis.authenticate({ signingMessage: "The Swap" })

  console.log(user)

  console.log(user.get('ethAddress'))

} catch(error) {

 console.log(error)

}

}

}

function openModal(side){

currentSelectSide = side;

document.getElementById(“token_modal”).style.display = “block”;

}

function closeModal(){

document.getElementById(“token_modal”).style.display = “none”;

}

async function logOut() {

await Moralis.User.logOut();

console.log(“logged out”);

}

init();

document.getElementById(“modal_close”).onclick = closeModal;

document.getElementById(“from_token_select”).onclick = (() => {openModal(“from”)});

document.getElementById(“btn-login”).onclick = login;

document.getElementById(“btn-logout”).onclick = logOut;

style.css

#window{

margin-top: 50px;



background-color: black;



color: cornsilk;

   

padding: 15px;

block-size: 350px;  

border-radius: 20px;



box-shadow: 0 0 15px rgb(0, 255, 255);

}

.Swapbox_select{

    width:50%;

   

    float: right;

    }

    .Swapbox {

        overflow: auto;

        margin-bottom: 28px;

        background-color: #41cbab;

        text-shadow: 0 0 10px black;

        border: 1px solid #0400ed;

        border-radius: 35px;

        margin-right: -5px;

    }

.token_select{

    padding: 10px 0;

}

.token_select:hover{

     background-color: rgb(0, 134, 40);

     cursor: pointer;

}



.token_select:hover{

    background-color: grey;

    cursor: pointer;

}

.img{

    margin-top: -412px;

}

.token_list_img{

    width: 40px;

    overflow: scroll;

}

.modal-body{

    height: 700px;

    overflow: scroll;

}

.token_row{

    padding: 5px 10px;

}

.token_row:hover{

    background-color: rgb(155, 155, 155);

    cursor: pointer;

}
#2

looks like you just didn’t defined currentTrade function here

1 Like
#3

Please dear YosephKS how can i do defined currentTrade im just learning now , im a noob dev :slight_smile: but i will learn from moralis

#4

Hey man define it like this

const currentTrade = () => {
 // this is where your logic goes
}

Unfortunately I have no idea what’re you trying to do inside the function

1 Like
#6

i try to show the token box logo when i clic on it and the token info

#7

when i click on specific token this dosen’t show the logo in the select box

#8

i get an error in the console: main.js:41 Uncaught ReferenceError: currentTrade is not defined
at HTMLDivElement.selectToken (VM803 main.js:41:3)
selectToken @ main.js:41

#9

err
err1920×1080 425 KB

#10

const currentTrade = (renderInreface) =>
{(“from_token_img”)} // like this ?

#11

hmmm not very sure what are you doing here?

1 Like
#12

i need to show the token logo and text name when i clic on a specifique token

err
err1920×1080 425 KB

#13

i hope you can help me to evolve ,thank you very much for your time .