Transfer - Help & Discussion

Here you can discuss and ask help about the course related lesson.

Tips for quick help:

  • How to post Code
  • Mention the lesson name, Example: “Cloud Code - Triggers”
  • Screenshot about the console error if possible.

Can anybody help me with contacting support? I said to the support 6 days ago that I want to cancel but she did not cancel now it subscribed to itself and deduct to my bank anyone please help

Hey @Flippy, hope you are well.

Sorry for the inconvenience, I have sent this to our amazing support team so they can help you asap with this, could you just confirm that your email used in the forum, is the same for the academy?

Carlos Z

Hello! From the “Transfer” lesson in this dApp programming course, it seems that I am failing to properly initialize the Moralis functionality. My repo for this project is https://github.com/aelkins3/dashboard.git. The console error I receive when testing the package is in the screenshot provided. Please advise me for how to correct this problem! Thank you @thecil.

1 Like

Hey @limitlessandrew, hope you are well.

Apparently you are not initializing properly the moralis server, you dont need to create a anonymous function for that, in your dashboard.js

// should remove this
(async function() {
  const serverUrl = "https://bfj7efbtjvtt.usemoralis.com:2053/server";
  const applicationId = "b3ejOczyFpDIqZ5KLOwkRq1koDEeggNh5BE7NT0W";
  await Moralis.start({serverUrl,applicationId});
})()

Instead, just type it this way Check Docs Here

  const serverUrl = "https://bfj7efbtjvtt.usemoralis.com:2053/server";
  const applicationId = "b3ejOczyFpDIqZ5KLOwkRq1koDEeggNh5BE7NT0W";
  Moralis.start({serverUrl,applicationId});

Then you should be able to use the rest of the moralis functions :nerd_face:

Carlos Z

@thecil Thanks Carlos. I actually have tried that and just tried again, but I get the exact same error as before with the prior approach to initialization. The same error in the console and the login button does not work yet.

Ok, the problem is that you change the variable name appId to applicationId, but to start moralis server, is mandatory that the variables name for it are serverUrl and appId.

First i notice that you have not load the dashboard.js to your index.html, so all i did was to add
<script src="./dashboard.js"></script> at the end of the body tag.

Then just to change the name of the variable to the required one

const serverUrl = "https://bfj7efbtjvtt.usemoralis.com:2053/server";
const appId = "b3ejOczyFpDIqZ5KLOwkRq1koDEeggNh5BE7NT0W";
Moralis.start({serverUrl,appId});

Then, all your js logic started to work properly, once i click the login button, it shows the metamask sign message properly:

Carlos Z

Wonderful, thank you. I’m surprised that the exact variable name appId is required, but as long as it works that fine with me. I’m not sure they mentioned the js line in the html file in the videos. It obviously makes perfect sense, but I’d recommend confirming that. You’re far above earning your keep Carlos, thanks again my friend!

1 Like

Alright, here’s another. Sorry, it’s late at night, but I’m wondering why I’m suddenly getting this error. I thought we just started Moralis. Do I run one of those functions too? Where? He didn’t do this in this video.

hello good morning in the courses i have been looking for smart contracts but to no avail can anyone help pls

Most commonly, one would take the Ethereum courses to learn smart contract, though EOS course are available too.

Here my code, great course.

dashboard.js

//MORALIS CODE
(async function(){
  const appId = "CoSnJfP8V4N6U9pwckCEI464pV0Dxr8dy553wAUu"
  const serverUrl =  "https://m3vcipdsyz02.usemoralis.com:2053/server"
  await Moralis.start({ serverUrl, appId })
  })();

async function login() {
  await Moralis.authenticate();
}

async function logout() {
  await Moralis.authenticate();
}

async function transferNative(){
  const address = document.getElementById('native-address').value;
  const amount = document.getElementById('native-amount').value;



  // sending 0.5 ETH
const options = {
  type: "native",
amount: Moralis.Units.ETH(options),
receiver: address,
}
let result = await Moralis.transfer(options)
}

async function transferERC20(){
  const address = document.getElementById('erc20-address').value;
  const amount = document.getElementById('erc20-amount').value;
  const contract = document.getElementById('erc20-contract').value;
  const decimals = document.getElementById('erc20-decimals').value;


  // sending 0.5 ETH
const options = {
  type: "erc20",
amount: Moralis.Units.Token(amount, decimals),
receiver: address,
contractAddress: contract 
}
let result = await Moralis.transfer(options)
}


//  CHAINLINK ADDRESS RINKEBY
//  0x01BE23585060835E02B77ef475b0Cc51aA1e0709
//  Decimals: 18

//  FUNCTON CLICK LISTENERS 
document.getElementById("btn-login").onclick = login;
document.getElementById("btn-logout").onclick = logout;

document.getElementById("transfer-native").onclick = transferNative;
document.getElementById("transfer-erc20").onclick = transferERC20;


//OLD BOOTSTRAP CODE

(() => {
  'use strict'

  feather.replace({ 'aria-hidden': 'true' })

  // Graphs
  const ctx = document.getElementById('myChart')
  // eslint-disable-next-line no-unused-vars

})()

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.98.0">
    <title>Dashboard Template · Bootstrap v5.2</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/dashboard/">

         <!-- Moralis SDK code -->
         <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
         <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
    

<link href="./bootstrap.min.css" rel="stylesheet">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
    </style>

    
    <!-- Custom styles for this template -->
    <link href="dashboard.css" rel="stylesheet">
  </head>
  <body>
    
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">Company name</a>
  <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
  <div class="navbar-nav">
    <div class="nav-item text-nowrap">
      <a class="nav-link px-3" href="#"  id="btn-logout">Sign out</a>
    </div>
  </div>
</header>

<div class="container-fluid">
  <div class="row">
    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
      <div class="position-sticky pt-3">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">
              <span data-feather="home" class="align-text-bottom"></span>
              Dashboard
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="file" class="align-text-bottom"></span>
              Orders
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="shopping-cart" class="align-text-bottom"></span>
              Products
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="users" class="align-text-bottom"></span>
              Customers
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="bar-chart-2" class="align-text-bottom"></span>
              Reports
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="layers" class="align-text-bottom"></span>
              Integrations
            </a>
          </li>
        </ul>

        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
          <span>Saved reports</span>
          <a class="link-secondary" href="#" aria-label="Add a new report">
            <span data-feather="plus-circle" class="align-text-bottom"></span>
          </a>
        </h6>
        <ul class="nav flex-column mb-2">
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="file-text" class="align-text-bottom"></span>
              Current month
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="file-text" class="align-text-bottom"></span>
              Last quarter
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="file-text" class="align-text-bottom"></span>
              Social engagement
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="file-text" class="align-text-bottom"></span>
              Year-end sale
            </a>
          </li>
        </ul>
      </div>
    </nav>

    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Apotheosis</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
          <div class="btn-group me-2">
            <button type="button" id="btn-login" class="btn btn-sm btn-outline-secondary">Login</button>
          </div>
        </div>
      </div>
      <div id="native-balances" class=" col-md-6 container">
        <h2>Transfer Native Balances</h2>
          <div class="mb-3">
            <input placeholder="Amount to send" type="email"
            class="form-control" id="native-amount">
          </div>
          <div class="mb-3">
            <input placeholder="Address to send to"  type="text"
            class="form-control" id="native-address">
          </div>
          <div class="mb-3 form-check">
          </div>
          <button id="transfer-native" type="submit" class="btn btn-primary">Submit</button>
      </div>
      <div>
          <hr>
      <div id="erc20" class=" col-md-6 container">
        <h2>Transferring ERC20</h2>
          <div class="mb-3">
            <input placeholder="Amount to send"
            class="form-control" id="erc20-amount">
          </div>
          <div class="mb-3">
            <input placeholder="Address to send to"  type="text"
            class="form-control" id="erc20-address">
            </div>
            <div class="mb-3">
              <input placeholder="Contract Address"  type="text"
              class="form-control" id="erc20-contract">            
          </div>
          <div class="mb-3">
            <input placeholder="Decimals"  type="text"
            class="form-control" id="erc20-decimals">            
        </div>
          <div class="mb-3 form-check">
          </div>
          <button id="transfer-erc20" type="submit" class="btn btn-primary">Submit</button>      
      </div>
    </main>
  </div>
</div>
    <script src="./bootstrap.bundle.min.js"></script>

      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script><script src="dashboard.js"></script>
  </body>
</html>

It seems like I have 4 mistakes in my js, but I can’t somehow find it what is wrong. Could you please help me to check the code…? Thank you.

//moralis code

(async function(){

  const serverUrl="https:/..."

  const appId="..."

  await Moralis.start({serverUrl, appId})

})()

async function login() {

  await Moralis.authenticate();

  }

async function logOut() {

  await Moralis.User.logOut();

}

async function transferNative(){

  const address = document.getElementById('native-address').value;

  const amount = document.getElementById('native-amount').value;

}

// sending 0.5 ETH

const options = {

  type: "native",

  amount: Moralis.Units.ETH(amount),

  receiver: address,

};

let result = await Moralis.transfer(options);

// sending erc20

const options = {

  type: "erc20",

  amount: Moralis.Units.Token(amount, decimals),

  receiver: address,

  contractAddress: conctract

};

let result = await Moralis.transfer(options);

async function transferERC20(){

  const address = document.getElementById('erc20-address').value;

  const amount = document.getElementById('erc20-amount').value;

  const contract = document.getElementById('erc20-contract').value;

  const decimals = document.getElementById('erc20-decimals').value;

}

//chainlink address rinkeby

//0xd0A1E359811322d97991E03f863a0C30C2cF029C

//decimals: 18

//connect button to login - event listener

document.getElementById("btn-login").onclick = login;

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

//transfer clicklisteners

document.getElementById("transfer-native").onclick = transferNative;

document.getElementById("transfer-erc20").onclick = transferERC20;

//old bootstrap code

(() => {

  'use strict'

  feather.replace({ 'aria-hidden': 'true' })

  // Graphs

  const ctx = document.getElementById('myChart')

  // eslint-disable-next-line no-unused-vars

 

})

@thecil Carlos, it is saying this:

dashboard.js:27 
        
       Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules
index.html:251 Live reload enabled.
favicon.ico:1 
       
        
       Failed to load resource: the server responded with a status of 404 (Not Found)
1 Like

Could be an issue in the dashboard.js file, at codeline 27, what do you have in it? because apparently you are trying to execute an await on a non-async function.

Can you share the code of the dashboard.js?

Carlos Z

//moralis code

(async function(){

  const serverUrl="https://..."

  const appId="..."

  await Moralis.start({serverUrl, appId})

})()

async function login() {

  await Moralis.authenticate();

  }

async function logOut() {

  await Moralis.User.logOut();

}

async function transferNative(){

  const address = document.getElementById('native-address').value;

  const amount = document.getElementById('native-amount').value;

}

// sending 0.5 ETH

const options = {

  type: "native",

  amount: Moralis.Units.ETH(amount),

  receiver: address,

};

let result = await Moralis.transfer(options);

// sending erc20

const options = {

  type: "erc20",

  amount: Moralis.Units.Token(amount, decimals),

  receiver: address,

  contractAddress: conctract

};

let result = await Moralis.transfer(options);

async function transferERC20(){

  const address = document.getElementById('erc20-address').value;

  const amount = document.getElementById('erc20-amount').value;

  const contract = document.getElementById('erc20-contract').value;

  const decimals = document.getElementById('erc20-decimals').value;

}

//chainlink address rinkeby

//0xd0A1E359811322d97991E03f863a0C30C2cF029C

//decimals: 18

//connect button to login - event listener

document.getElementById("btn-login").onclick = login;

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

//transfer clicklisteners

document.getElementById("transfer-native").onclick = transferNative;

document.getElementById("transfer-erc20").onclick = transferERC20;

//old bootstrap code

(() => {

  'use strict'

  feather.replace({ 'aria-hidden': 'true' })

  // Graphs

  const ctx = document.getElementById('myChart')

  // eslint-disable-next-line no-unused-vars

 

})

You cant use an await function outside an async block. you should remove those from the dashboard.js

Carlos Z

1 Like