Ethereum Boilerplate Questions

LocoTheDev · November 1, 2021, 12:55am

Please check my answer above. Thank you!

LocoTheDev · November 1, 2021, 12:55am

With .env you are „hiding“ them. That’s the point of creating dotenv

metamaker · November 1, 2021, 2:00am

Getting error:
Failed to compile.

src/providers/MoralisDappProvider/MoralisDappProvider.js
Line 27:19: ‘React’ is not defined no-undef

Fix?

TheFabled · November 1, 2021, 4:54am

add
import React from “react”;
to MoralisDappProvider.js

metamaker · November 1, 2021, 5:23am

Getting an unexpected character error.

ivan · November 1, 2021, 7:47am

@jamie03also keep in mind that server url and app id are public non secret data https://docs.moralis.io/misc/faq

Yomoo · November 1, 2021, 8:18am

Hi @rpc, @mrhigh3r

Fixed on new version

Yomoo · November 1, 2021, 8:19am

Hey @metamaker please share the error message, screens

Utility4all · November 1, 2021, 10:56am

I encountered the below problem while starting my app. What could be the problem?

ivan · November 1, 2021, 11:09am

Have you run “yarn install”?

ivan · November 1, 2021, 11:11am

aah nvm you have a typo…

you forgot >

<MoralisProvider appId="APP ID" serverUrl="SERVER URL">

solok · November 1, 2021, 11:41am

Fixed it. The problem was with Node.js version 17.0.1.
They changed the openssl provider. To make this work I had to change/add --open-legacy-provider to start and build in the package.json.

"scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "build": "react-scripts --openssl-legacy-provider build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

Don’t know yet if you have to add id to test and eject aswell.

Utility4all · November 1, 2021, 1:06pm

Yes, I have. I ran that before running yarn start.

metamaker · November 1, 2021, 7:39pm

How would we go about adding more decimals to the token price display in the nav bar?

mrhigh3r · November 2, 2021, 4:08am

When trying to do transaction chain, this is the error

BigNumber Error: new BigNumber() number type has more than 15 significant digits: 0.9959742504000001
at ee (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/common-0.js:24:29614)
at new z (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/common-0.js:24:27841)
at chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/ui-2.js:1:656149
at Object.useMemo (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/ui-0.js:1:89069)
at useMemo (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/common-3.js:1:89032)
at h (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/ui-2.js:1:656086)
at ha (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/ui-0.js:1:84902)
at Ou (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/ui-0.js:1:129798)
at _s (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/ui-0.js:1:115596)
at bs (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/ui-0.js:1:115521)
at fs (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/ui-0.js:1:112869)
at chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/ui-0.js:1:71307
at n.unstable_runWithPriority (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/ui-0.js:8:32852)
at Ko (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/ui-0.js:1:71016)
at Zo (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/ui-0.js:1:71252)
at Xo (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/ui-0.js:1:71187)
at ps (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/ui-0.js:1:113242)
at el (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/ui-0.js:1:138577)
at render (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/ui-0.js:1:140494)
at chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/ui-0.js:1:5615

TheFabled · November 2, 2021, 4:48am

I was able to do this by changing the useTokenPrice.js and formatters.js.

useTokenPrice.js
import { useEffect, useState } from “react”;

import { useMoralis, useMoralisWeb3Api } from “react-moralis”;

import { c2, n4, n6, n12, tokenValueTxt } from “…/helpers/formatters”;

const useTokenPrice = (options) => {

const { token } = useMoralisWeb3Api();

const { isInitialized } = useMoralis();

const [tokenPrice, setTokenPrice] = useState();

useEffect(() => {

if (isInitialized)

  fetchTokenPrice(options)

    .then((price) => {

      // usdPrice is a number, format() returns a string

      console.log(price)

      if (price.usdPrice > 0.01){

      price.usdPrice = c2.format(price.usdPrice);

      const { value, decimals, symbol } = price.nativePrice;

      // nativePrice is an Object

      // {value: string, decimals: number, name: string, symbol: string},

      // tokenValueTxt returns a string

      price.nativePrice = tokenValueTxt(value, decimals, symbol);

      setTokenPrice(price);

      }

      else if (price.usdPrice > 0.0001){

        price.usdPrice = n4.format(price.usdPrice);

      const { value, decimals, symbol } = price.nativePrice;

      price.nativePrice = tokenValueTxt(value, decimals, symbol);

      setTokenPrice(price);

      }

      else if (price.usdPrice > 0.000001){

        price.usdPrice = n6.format(price.usdPrice);

      const { value, decimals, symbol } = price.nativePrice;

      price.nativePrice = tokenValueTxt(value, decimals, symbol);

      setTokenPrice(price);

      }

      else 

        price.usdPrice = n12.format(price.usdPrice);

      const { value, decimals, symbol } = price.nativePrice;

      price.nativePrice = tokenValueTxt(value, decimals, symbol);

      setTokenPrice(price);

      

    })

    .catch((e) => alert(e.message));

// eslint-disable-next-line react-hooks/exhaustive-deps

}, [isInitialized]);

const fetchTokenPrice = async (options) => {

const { chain, address } = options;

return await token

  .getTokenPrice({ chain, address })

  .then((result) => result)

  .catch((e) => alert(e.message));

};

return { fetchTokenPrice, tokenPrice };

};

export default useTokenPrice;

formatters.js

export const n6 = new Intl.NumberFormat(“en-us”, {

style: “decimal”,

minimumFractionDigits: 0,

maximumFractionDigits: 6,

});

export const n4 = new Intl.NumberFormat(“en-us”, {

style: “decimal”,

minimumFractionDigits: 0,

maximumFractionDigits: 4,

});

export const c2 = new Intl.NumberFormat(“en-us”, {

style: “currency”,

currency: “USD”,

minimumFractionDigits: 2,

maximumFractionDigits: 2,

});

export const n12 = new Intl.NumberFormat(“en-us”, {

style: “decimal”,

minimumFractionDigits: 0,

maximumFractionDigits: 12,

});

/**

Returns a string of form “abc…xyz”
@param {string} str string to string
@param {number} n number of chars to keep at front/end
@returns {string}

*/

export const getEllipsisTxt = (str, n = 6) => {

return ${str.substr(0, n)}...${str.substr(str.length - n, str.length)};

};

export const tokenValue = (value, decimals) => (decimals ? value / Math.pow(10, decimals) : value);

/**

Return a formatted string with the symbol at the end
@param {number} value integer value
@param {number} decimals number of decimals
@param {string} symbol token symbol
@returns {string}

*/

export const tokenValueTxt = (value, decimals, symbol) => ${n4.format(tokenValue(value, decimals))} ${symbol};

metamaker · November 2, 2021, 5:33am

What is the ETA on the Solana version being released?

ivan · November 2, 2021, 7:47am

We don’t promise any eta, we hope this year, but it will come when it’s done we need to integrate solana into Moralis first

Chaun · November 2, 2021, 4:41pm

Hi Guys, I ran both npx yarn install and npm install,

Then when running npx yarn start or npx run start I get this error.

germc21 · November 2, 2021, 6:41pm

Hey Guys,

Loving Moralis, when I try to go to localhost after npm/yarn install etc in my chrome browser I’m getting:

from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

How can I resolve this? The UI loads and I can connect metamask but cant pull anything in with this issue.

Thanks,

Ger