I’m just trying to create a dex in REACT & i’m using this repository (DEX UNISWAP)
but that project is not developed on react so I’ve converted those files in react format & m getting some errors is there any expert who can help ?? it will be highly appreciated because m stuck in this
These are the errors showing in my browser
Line 22:9: ‘Moralis’ is not defined no-undef
Line 28:17: ‘Moralis’ is not defined no-undef
Line 43:19: ‘Moralis’ is not defined no-undef
Line 45:27: ‘Moralis’ is not defined no-undef
Line 60:24: ‘Moralis’ is not defined no-undef
Line 95:3: ‘div’ is not defined no-undef
Line 96:7: ‘div’ is not defined no-undef
Line 100:5: ‘txtValue’ is not defined no-undef
Line 101:9: ‘txtValue’ is not defined no-undef
Line 150:23: ‘Moralis’ is not defined no-undef
Line 168:9: ‘Moralis’ is not defined no-undef
Line 170:17: ‘Moralis’ is not defined no-undef
Line 177:29: ‘Moralis’ is not defined no-undef
Line 187:13: ‘Moralis’ is not defined no-undef
Line 206:10: ‘Moralis’ is not defined no-undef
There are more errors in the console
react-dom.development.js:68 Warning: Invalid DOM property class. Did you mean className?
at span
at a
at li
at ul
at div
at div
at nav
at Header (http://localhost:3000/static/js/bundle.js:5238:74)
at Landing
at div
at App (http://localhost:3000/static/js/bundle.js:1384:64)
at Router (http://localhost:3000/static/js/bundle.js:234474:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:233283:5)
at NotificationProvider (http://localhost:3000/static/js/bundle.js:284087:70)
at MoralisProvider (http://localhost:3000/static/js/bundle.js:230749:21)
printWarning @ react-dom.development.js:68
react-dom.development.js:68 Warning: Invalid DOM property for. Did you mean htmlFor?
at label
at div
at div
at section
at main
at Landing
at div
at App (http://localhost:3000/static/js/bundle.js:1384:64)
at Router (http://localhost:3000/static/js/bundle.js:234474:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:233283:5)
at NotificationProvider (http://localhost:3000/static/js/bundle.js:284087:70)
at MoralisProvider (http://localhost:3000/static/js/bundle.js:230749:21)
printWarning @ react-dom.development.js:68
Staking.js:220 Uncaught TypeError: Cannot set properties of null (setting ‘onclick’)
at Staking (Staking.js:220:1)
at renderWithHooks (react-dom.development.js:14969:1)
at mountIndeterminateComponent (react-dom.development.js:17731:1)
at beginWork (react-dom.development.js:18930:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3919:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3968:1)
at invokeGuardedCallback (react-dom.development.js:4028:1)
at beginWork$1 (react-dom.development.js:23775:1)
at performUnitOfWork (react-dom.development.js:22611:1)
at workLoopSync (react-dom.development.js:22548:1)
react-dom.development.js:19954 The above error occurred in the component:
at Staking (http://localhost:3000/static/js/bundle.js:11359:64)
at Routes (http://localhost:3000/static/js/bundle.js:234541:5)
at div
at div
at App (http://localhost:3000/static/js/bundle.js:1384:64)
at Router (http://localhost:3000/static/js/bundle.js:234474:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:233283:5)
at NotificationProvider (http://localhost:3000/static/js/bundle.js:284087:70)
at MoralisProvider (http://localhost:3000/static/js/bundle.js:230749:21)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:19954
scheduler.development.js:169 Uncaught TypeError: Cannot set properties of null (setting ‘onclick’)
at Staking (Staking.js:220:1)
at renderWithHooks (react-dom.development.js:14969:1)
at mountIndeterminateComponent (react-dom.development.js:17731:1)
at beginWork (react-dom.development.js:18930:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3919:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3968:1)
at invokeGuardedCallback (react-dom.development.js:4028:1)
at beginWork$1 (react-dom.development.js:23775:1)
at performUnitOfWork (react-dom.development.js:22611:1)
at workLoopSync (react-dom.development.js:22548:1)
react-dom.development.js:68 Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at MoralisProvider (http://localhost:3000/static/js/bundle.js:230749:21)
printWarning @ react-dom.development.js:68
react-dom.development.js:68 Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at ConnectButton (http://localhost:3000/static/js/bundle.js:280781:22)
at li
at ul
at div
at div
at nav
at Header (http://localhost:3000/static/js/bundle.js:5238:74)
at Landing
at div
at App (http://localhost:3000/static/js/bundle.js:1384:64)
at Router (http://localhost:3000/static/js/bundle.js:234474:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:233283:5)
at NotificationProvider (http://localhost:3000/static/js/bundle.js:284087:70)
at MoralisProvider (http://localhost:3000/static/js/bundle.js:230749:21)
printWarning @ react-dom.development.js:68
3Staking.js:30 Uncaught (in promise) TypeError: Cannot set properties of null (setting ‘innerText’)
at initialize (Staking.js:30:1)
this is the file which I’ve converted
import React from "react";
import { Routes, Route } from "react-router-dom";
import '../Staking/style.css'
import Eth from "../Staking/img/eth.png"
import Arrow from "../Staking/img/arrow.png"
import { useMoralis, useMoralisWeb3Api } from "react-moralis";
export default function Staking(){
const serverUrl = "https://iuwcp9r8o4z9.usemoralis.com:2053/server"; //Server url from moralis.io
const appId = "k3pWgoJrscME3Dfm2MXnhFHS5muKBwjHDQkJbCbk"; // Application id from moralis.io
// Global variables
let currentUser;
let trade = {};
let selection;
let tokens;
// App initialization
async function initialize() {
await Moralis.start({
serverUrl,
appId,
});
// Login Functionality
currentUser = Moralis.User.current();
if (currentUser) {
document.getElementById("top-connect-wallet-button").innerText =
"Connected";
document.getElementById("main-connect-wallet-button").innerText = "Swap";
}
// Load Tokens
await availableTokens();
}
// Login
async function login() {
try {
// Validate is user is logged in
currentUser = Moralis.User.current();
if (!currentUser) {
currentUser = await Moralis.authenticate();
}
// Update UI
document.getElementById("top-connect-wallet-button").innerText =
"Connected";
document.getElementById("main-connect-wallet-button").innerText = "Swap";
} catch (error) {
console.log(error);
}
}
// List all available tokens
async function availableTokens() {
// Get all tokens
const result = await Moralis.Plugins.oneInch.getSupportedTokens({
chain: "eth", // The blockchain you want to use (eth/bsc/polygon)
});
tokens = result.tokens;
// Render all tokens
let parent = document.getElementById("all-coin-list");
let ul = document.createElement("ul");
// Render all tokens
for (const address in tokens) {
let token = tokens[address];
let li = document.createElement("li");
li.innerHTML = `<img src="${token.logoURI}" alt=""><span class="token_list_text">${token.symbol}</span>`;
ul.appendChild(li);
// Add event listener to select token
li.addEventListener("click", () => {
selectToken(address);
});
}
// Append all tokens to the parent div
parent.appendChild(ul);
}
// Search for a token functionality
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("search-input");
filter = input.value.toUpperCase();
div = document.getElementById("all-coin-list");
a = div.getElementsByTagName("li");
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
// Select token functionality
function selectToken(address) {
// Get token
trade[selection] = tokens[address];
// Render selected token on the interface
renderInterface();
// Get estimated quotation and Gas fee
getQuotation();
}
// Render selected token on the interface
function renderInterface() {
// Render selected token on the interface
if (trade.from) {
document.getElementById("from-token-img").src = trade.from.logoURI;
document.getElementById("from-token-text").innerHTML = trade.from.symbol;
document.getElementById("token-default-img").style.display = "none";
}
// Render selected token on the interface
if (trade.to) {
document.getElementById("to-token-img").src = trade.to.logoURI;
document.getElementById("to-token-text").innerHTML = trade.to.symbol;
document.getElementById("select-token-text").innerHTML = "";
}
}
// Get estimated quotation and Gas fee
async function getQuotation() {
// Validate fields are not empty
if (!trade.from || !trade.to || !document.getElementById("from-amount").value)
return;
// Get from amount
let amount = Number(
document.getElementById("from-amount").value * 10 ** trade.from.decimals
);
// Get estimated quotation and Gas fee
const quote = await Moralis.Plugins.oneInch.quote({
chain: "eth", // The blockchain you want to use (eth/bsc/polygon)
fromTokenAddress: trade.from.address, // The token you want to swap
toTokenAddress: trade.to.address, // The token you want to receive
amount: amount,
});
console.log(quote);
// Render quotation
document.getElementById("gas-estimate").innerHTML = quote.estimatedGas;
document.getElementById("to-amount").value =
quote.toTokenAmount / 10 ** quote.toToken.decimals;
}
// Validate if User can Swap
async function validateSwap() {
// Enable Moralis web3 instance to enable swap functionality
await Moralis.enableWeb3();
let address = Moralis.User.current().get("ethAddress");
let amount = Number(
document.getElementById("from-amount").value * 10 ** trade.from.decimals
);
// Validate if User can Swap
if (trade.from.symbol !== "ETH") {
const allowance = await Moralis.Plugins.oneInch.hasAllowance({
chain: "eth", // The blockchain you want to use (eth/bsc/polygon)
fromTokenAddress: trade.from.address, // The token you want to swap
fromAddress: address, // Your wallet address
amount: amount,
});
console.log(allowance);
// If user has allowance
if (!allowance) {
await Moralis.Plugins.oneInch.approve({
chain: "eth", // The blockchain you want to use (eth/bsc/polygon)
tokenAddress: trade.from.address, // The token you want to swap
fromAddress: address, // Your wallet address
});
}
}
try {
// Do the swap
await Swap(address, amount);
} catch (error) {
console.log(error);
}
}
// Swap functionality
async function Swap(userAddress, amount) {
// Swap token
return Moralis.Plugins.oneInch.swap({
chain: "eth", // The blockchain you want to use (eth/bsc/polygon)
fromTokenAddress: trade.from.address, // The token you want to swap
toTokenAddress: trade.to.address, // The token you want to receive
amount: amount,
fromAddress: userAddress, // Your wallet address
slippage: 1,
});
}
// App initialization
initialize();
// Login button
document.getElementById("top-connect-wallet-button").onclick = login;
document.getElementById("main-connect-wallet-button").onclick = login;
// Select side
document.getElementById("from-token-selected").onclick = () => {
selection = "from";
};
document.getElementById("to-token-selected").onclick = () => {
selection = "to";
};
// Swap button
document.getElementById("main-connect-wallet-button").onclick = validateSwap;
return(
<>
<div class="top-bar">
<nav class=" top-bar-nav navbar navbar-expand-lg navbar">
<div class="logo">
<a class="navbar-brand" href="#"><img src="https://cryptologos.cc/logos/uniswap-uni-logo.png"
alt=""/></a>
</div>
<div class="center">
<ul class="nav nav-pills mb-4" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-swap-tab" data-toggle="pill" href="#pills-swap" role="tab"
aria-controls="pills-swap" aria-selected="true">Swap</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-pool-tab" data-toggle="pill" href="#" role="tab" aria-selected="false">Pool</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-vote-tab" data-toggle="pill" href="#" role="tab" aria-selected="false">Vote</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-chart-tab" data-toggle="pill" href="#" role="tab" aria-selected="false">Chart</a>
</li>
</ul>
</div>
<div class="right">
<button class=" navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="eth-button dropdown show">
<a class="ethereum-coin btn dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span><img src={Eth}
alt=""/></span>
Ethereum
</a>
</div>
<div class="top-connect">
<button type="button" class="btn-wallet" id="top-connect-wallet-button">Connect Wallet</button>
</div>
<div>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="ethereum-coin1 dropdown show">
<a class="btn" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><span>...</span>
</a>
</div>
</div>
</nav>
<div class="main-boby">
<div class="tab-content " id="pills-tabContent">
<div class="swap-container tab-pane fade show active" id="pills-swap" role="tabpanel"
aria-labelledby="pills-swap-tab">
<div class="swap-contents">
<div class="card swap-contents-card">
<div class="swap-head card-header">
Swap
</div>
<div class="card-body">
<div class="card-input input-group">
<div class="input-card-top input-eth">
<input type="text" value="" placeholder="0.0" class="form-control"
aria-label="Text input with dropdown button" id="from-amount"/>
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-toggle="modal"
data-target="#modal-token" aria-haspopup="true" aria-expanded="false" id="from-token-selected">
<img class="token-image" src={Eth} alt="" id="token-default-img" />
<img class="token-image" id="from-token-img"/>
<span id="from-token-text"></span>
</button>
<div class="modal fade" id="modal-token" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="eth-search-modal modal-dialog" role="document">
<div class="eth-search-modal modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Select a
token</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="modal-search">
<input type="text" id="search-input" placeholder="Search name" onkeyup="filterFunction()" />
</div>
<hr class="line-divider"/>
<div class="all-coin" id="all-coin-list">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-arrow"><img src={Arrow} alt="" /></div>
<div class="input-card-top">
<input type="text" value="" class="form-control"
aria-label="Text input with dropdown button" id="to-amount" disabled />
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button"
data-toggle="modal" data-target="#modal-token" aria-haspopup="true"
aria-expanded="false" id="to-token-selected">
<span id="select-token-text">select a token</span>
<img class="token-image" id="to-token-img" />
<span id="to-token-text"></span>
</button>
</div>
</div>
<div>Estimated Gas: <span id="gas-estimate"></span></div>
</div>
<button type="button" class="connect-wallet-down" id="main-connect-wallet-button">
Connect Wallet
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
};
in all of my project moralis imported like this by (usemoralis)