Ethereum Boilerplate Questions

isaiahbjork · January 12, 2022, 7:37pm

When creating an NFT do y’all know what to put to have the royalties go to a different address than the user selling it.

Cedro · January 13, 2022, 7:17pm

Help in this community is not efficient as it should be. Unfortunately.

MarkyMarx · January 13, 2022, 8:06pm

Just a quick question. How easy is the boilerplate dex to add a small extra fee for your platform? I know this was possible when using the 1inch API but is it supported via the plugin?

Mike · January 14, 2022, 2:52pm

Hey
I have some issues with DEX component, why I cannot search a coin like DAO in search bar and why coin logos do not appear here?

and second issue: how can I add a token to the token list ?
and third issue : how can I change slippage?

Cedro · January 14, 2022, 5:08pm

These are the same issues we have and have not found answers for

Make sure you don’t have an ad blocker that blocks coin logos. (If you haven’t changed anything yet in your code)

For slippage: Change line 62 in useInchDex.

Cedro · January 14, 2022, 5:10pm

It doesn’t seem to be possible here. My understanding is boilerplate generates money for 1inch and moralis but not for you! (In return you would only have your own fancy dex on your website without benefiting from it).

Mike · January 14, 2022, 7:09pm

but slippage should change by user input and differ coin to coin. I think 1inch plugin did not prepare a setting for the slippage. and about logo, I did not change anything in codes and browser did not block any ads.

Cedro · January 14, 2022, 7:23pm

For slippage modifier, see this article and if are able to implement it, let me know because I wasn’t successful. Add/Import cusotm token on dex

For logo issues:
remove your (node_modules), then run the following commands:

yarn install
yarn upgrade
yarn start

inresponsegaming · January 14, 2022, 9:18pm

So I followed the tutorial and I can get the webpage loaded and auth works fine. but all the tabs don’t return data and getting 400 call errors. I followed the walkthrough did I miss something?

Cedro · January 15, 2022, 12:40am

Add morlais server and app id to .env

Yomoo · January 15, 2022, 6:20am

you can edit the slippage in plugin settings.

rdwan · January 15, 2022, 10:50am

The NFT address is “0x2953399124f0cbb46d2cbacd8a89cf0599974963”
My wallet address is “0x02e41950550ad5646548f94a04d6d7c357f9634e”
When I view the contract on Polygonscan it says the owner is another contract in the “Read Contract” section but OpenSea says that my wallet address is the owner

YosephKS · January 15, 2022, 10:57am

It might be that the NFT contract is owned by OpenSea minting contract and you own the token of that NFT contract

JimBob · January 15, 2022, 10:57am

There’s a boilerplate (that’s react) and a react-native boilerplate, and there iiiissss a vanilla boilerplate but it’s not the same boilerplate as these, it’s just a few lines of code that show how to authenticate.

Any plans to have an actual vanillaJS version of the entire boilerplate?

The functionality of Moralis is great, and the react boilerplate has a lot of useful things, but to take one or two elements and integrate into an already built webpage, would be a massive help in bridging web2 and web3 - to see examples of how to use moralis “modules” without needing to rebuild a page as react.

Just an idea I hope you’ll consider. Especially since you bothered to go through an entire 6hr vanilla course on your youtube! Which is a good course, BTW.

jtran1047 · January 15, 2022, 11:22am

Hi, i have built a virtual server in Moralis and using the ethereum boilerplate in visual code on my macbook.
I have added the virtual server URL and APP ID (details below) into the .env files and used command ‘yarn start’ to load the dapp on ‘localhost:3000’ address in my chrome browser, but i’m receiving ‘this site can’t be reached’ error, no page is loaded. My firewall is turned off at moment. Can you please assist as to why it’s not working?

Mandatory info for starting the app

REACT_APP_MORALIS_APPLICATION_ID = q8OLLd9cgWLeRTTQIJkEV5BvpyImWHh1YZC92leP
REACT_APP_MORALIS_SERVER_URL = https://pd5tcj9aje6f.usemoralis.com:2053/server

Yomoo · January 15, 2022, 2:44pm

Hi @JimBob

Usually, you will not meet any production web3 projects built on vanilla Js+html. There are too much info/calculations/components and vanilla html+js is not good for constantly changed states, rerenders and etc.

React is a true web3 standard. React projects are simply faster in building, easier in maintaining, reading the code, and have better performance in case you don’t have static with no logic site(not about web3, right?)

Before starting to react you need to have good skills in the vanilla js+html stack.

Hope this helps. Feel free to ask any questions

Yomoo · January 15, 2022, 2:52pm

Do you have a message in your IDE like this:

Dressi · January 16, 2022, 5:16am

Hey @Yomoo
I have a weird problem with the boilerplate. I have tried to customize it a bit for my own needs and I, therefore, have deleted most of the header and so on but we weird thing is that as soon as I remove these 6 imports that aren’t even being used, the authenticate button doesn’t work anymore.

import TokenPrice from "components/TokenPrice";
import ERC20Balance from "components/ERC20Balance";
import ERC20Transfers from "components/ERC20Transfers";
import DEX from "components/DEX";
import NFTBalance from "components/NFTBalance";
import Wallet from "components/Wallet";

this is the full app.jsx that works:

import { useEffect } from "react";
import { useMoralis } from "react-moralis";
import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
import Account from "components/Account/Account";
import Chains from "components/Chains";
import TokenPrice from "components/TokenPrice";
import ERC20Balance from "components/ERC20Balance";
import ERC20Transfers from "components/ERC20Transfers";
import DEX from "components/DEX";
import NFTBalance from "components/NFTBalance";
import Wallet from "components/Wallet";
import NativeBalance from "components/NativeBalance";
import "./style.css";
import Video from "videos/video.m4v";
import logo from "images/logo.png"

const styles = {
  content: {
    display: "flex",
    justifyContent: "center",
    fontFamily: "Montserrat, sans-serif",
    color: "#041836",
    marginTop: "130px",
    padding: "10px",
  },
  header: {
    position: "fixed",
    zIndex: 1,
    width: "100%",
    display: "flex",
    color: "#fff",
    justifyContent: "space-between",
    alignItems: "center",
    fontFamily: "Montserrat, sans-serif",
    borderBottom: "2px solid rgba(0, 0, 0, 0.06)",
    padding: "5px 10px",
  },
  headerRight: {
    display: "flex",
    gap: "20px",
    alignItems: "center",
    fontSize: "15px",
    fontWeight: "600",
  },
  video: {
    position: "fixed",
    width: "100%",
    zIndex: "-1",
    height: "100%",
    objectFit: "cover",
  },
  image: {
    cursor: "pointer",
    width: "80px",
  },
  a: {
    display: "flex",
    alignItems: "center",
    textDecoration: "none",
    color: "white",
    fontSize: "28px",
  },
};
const App = ({ isServerInfo }) => {
  const { isWeb3Enabled, enableWeb3, isAuthenticated, isWeb3EnableLoading } = useMoralis();

  useEffect(() => {
    const connectorId = window.localStorage.getItem("connectorId");
    if (isAuthenticated && !isWeb3Enabled && !isWeb3EnableLoading) enableWeb3({ provider: connectorId });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isAuthenticated, isWeb3Enabled]);

  return (
    <div style={{ height: "100vh", overflow: "auto" }}>
      <video autoPlay loop muted src={Video} type="video/m4v" style={styles.video} />
      
      <Router>
        <div style={styles.header}>
          <a href="https://www.loshippos.com/" style={styles.a}>
            <img src={logo} style={styles.image} alt="Logo" />
            Los Hippos
          </a>
          <div style={styles.headerRight}>
            <Chains />
            <NativeBalance />
            <Account />
          </div>
        </div>

        <div style={styles.content}>
        </div>
      </Router>
    </div>
  );
};

export default App;

and this is the app.jsx that doesn’t work:

import { useEffect } from "react";
import { useMoralis } from "react-moralis";
import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
import Account from "components/Account/Account";
import Chains from "components/Chains";
/* import TokenPrice from "components/TokenPrice";
import ERC20Balance from "components/ERC20Balance";
import ERC20Transfers from "components/ERC20Transfers";
import DEX from "components/DEX";
import NFTBalance from "components/NFTBalance";
import Wallet from "components/Wallet"; */
import NativeBalance from "components/NativeBalance";
import "./style.css";
import Video from "videos/video.m4v";
import logo from "images/logo.png"

const styles = {
  content: {
    display: "flex",
    justifyContent: "center",
    fontFamily: "Montserrat, sans-serif",
    color: "#041836",
    marginTop: "130px",
    padding: "10px",
  },
  header: {
    position: "fixed",
    zIndex: 1,
    width: "100%",
    display: "flex",
    color: "#fff",
    justifyContent: "space-between",
    alignItems: "center",
    fontFamily: "Montserrat, sans-serif",
    borderBottom: "2px solid rgba(0, 0, 0, 0.06)",
    padding: "5px 10px",
  },
  headerRight: {
    display: "flex",
    gap: "20px",
    alignItems: "center",
    fontSize: "15px",
    fontWeight: "600",
  },
  video: {
    position: "fixed",
    width: "100%",
    zIndex: "-1",
    height: "100%",
    objectFit: "cover",
  },
  image: {
    cursor: "pointer",
    width: "80px",
  },
  a: {
    display: "flex",
    alignItems: "center",
    textDecoration: "none",
    color: "white",
    fontSize: "28px",
  },
};
const App = ({ isServerInfo }) => {
  const { isWeb3Enabled, enableWeb3, isAuthenticated, isWeb3EnableLoading } = useMoralis();

  useEffect(() => {
    const connectorId = window.localStorage.getItem("connectorId");
    if (isAuthenticated && !isWeb3Enabled && !isWeb3EnableLoading) enableWeb3({ provider: connectorId });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isAuthenticated, isWeb3Enabled]);

  return (
    <div style={{ height: "100vh", overflow: "auto" }}>
      <video autoPlay loop muted src={Video} type="video/m4v" style={styles.video} />
      
      <Router>
        <div style={styles.header}>
          <a href="https://www.loshippos.com/" style={styles.a}>
            <img src={logo} style={styles.image} alt="Logo" />
            Los Hippos
          </a>
          <div style={styles.headerRight}>
            <Chains />
            <NativeBalance />
            <Account />
          </div>
        </div>

        <div style={styles.content}>
        </div>
      </Router>
    </div>
  );
};

export default App;

I hope you can help me with my weird error

Yomoo · January 16, 2022, 6:21am

Hey @Dressi

They don’t work for me both. Please share the error from console log

Dressi · January 16, 2022, 6:54am

ohh thats weird.
i dont get any error at all in my terminal in vsc it just says this:

ompiled with warnings.

src/App.jsx
  Line 6:8:   'TokenPrice' is defined but never used      no-unused-vars
  Line 7:8:   'ERC20Balance' is defined but never used    no-unused-vars
  Line 8:8:   'ERC20Transfers' is defined but never used  no-unused-vars
  Line 9:8:   'DEX' is defined but never used             no-unused-vars
  Line 10:8:  'NFTBalance' is defined but never used      no-unused-vars
  Line 11:8:  'Wallet' is defined but never used          no-unused-vars

src/components/Chains/Chains.jsx
  Line 4:10:  'AvaxLogo' is defined but never used     no-unused-vars
  Line 4:20:  'PolygonLogo' is defined but never used  no-unused-vars
  Line 4:33:  'BSCLogo' is defined but never used      no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.```

but in the browser console i get this error in both the working and not working version