Use web3Api / useWeb3ExecuteFunction unauthenticated?

Moralis General
#1

I want to display market data gathered using web3Api and useWeb3ExecuteFunction from renderMarket while not authenticated. what is a simple example of how to do this? currently data comes in fine using this code structure while connected.

import { useWeb3ExecuteFunction, useMoralisWeb3Api, useMoralis } from "react-moralis";
import { useEffect, useState } from "react";

export function GetMarket() {
  const { Moralis, isWeb3Enabled, enableWeb3, isAuthenticated, isWeb3EnableLoading } =
    useMoralis();
  const Web3Api = useMoralisWeb3Api();

  const { data: supply, fetch: fetchsupply } = useWeb3ExecuteFunction();


  const renderMarket = async () => {

// Get data , supply liquidity etc
// const reserves = await Web3Api.defi.getPairReserves(options);
// let res1 = await fetchsupply({ params: optionsSupply });

  };

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

  useEffect(() => {
    if (isAuthenticated && isWeb3Enabled) {
      renderMarket();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isAuthenticated, isWeb3Enabled]);

  return (
    <>

    </>
  );
}

export default GetMarket;
#2

You can use useMoralisWeb3Api and useWeb3ExecuteFunction directly. The user does not need to be authenticated.

Example

#3

Here’s my mess of a code example, every time i try to just remove authentication conditions i get errors, where am i going wrong here? function needs to be async to update realtime?

import { useWeb3ExecuteFunction, useMoralisWeb3Api, useMoralis } from "react-moralis";
import { useEffect, useState } from "react";
import { optionsSupply } from "../CakeABI";

import Widget from "./Widget";
import { Row, Col } from "antd";
import "./getmarket.scss";

export function GetMarket() {
  const { Moralis, isWeb3Enabled, enableWeb3, isAuthenticated, isWeb3EnableLoading } =
    useMoralis();
  const [cake, setcake] = useState();
  const [bnbprice, setbnb] = useState();
  const [liquidtotal, setliquidtotal] = useState();



  const { data: supply, fetch: fetchsupply } = useWeb3ExecuteFunction();
  const Web3Api = useMoralisWeb3Api();

  const renderMarket = async () => {

    const options = {
      pair_address: "0x0eD7e52944161450477ee417DE9Cd3a859b14fD0",
      chain: "bsc",
    };

    const reserves = await Web3Api.defi.getPairReserves(options);
    console.log(reserves);
    const bnbreserve = await Moralis.Units.FromWei(reserves.reserve1)
    console.log(bnbreserve * bnbprice?.data?.price);
    const cakereserve = await Moralis.Units.FromWei(reserves.reserve0)
    console.log(cakereserve * cake?.data?.price); //liquidity
    let liquidtotal = (bnbreserve * bnbprice?.data?.price) + (cakereserve * cake?.data?.price);
    console.log(liquidtotal);

    setliquidtotal(await liquidtotal);

    // eslint-disable-next-line
    let res1 = await fetchsupply({ params: optionsSupply });
    let res5 = await fetch(
      "https://api.pancakeswap.info/api/v2/tokens/0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c"
    );
    setbnb(await res5.json());

    let res4 = await fetch(
      "https://api.pancakeswap.info/api/v2/tokens/0x0E09FaBB73Bd3Ade0a17ECC321fD13a19e81cE82"
    );
    setcake(await res4.json());
  };

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

  useEffect(() => {
    if (isAuthenticated && isWeb3Enabled) {
      renderMarket();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isAuthenticated, isWeb3Enabled]);

  return (
    <>
      <div className="widgetcontainer">
        <Row className="widget">
          <Col flex="1 0 25%" className="column holder">
            <Widget
              type="supply"
              numvalue={
                supply && (
                  <div>
                    {(
                      parseInt(JSON.parse(JSON.stringify(supply)).hex, 16) /
                      Math.pow(10, 18)
                    )
                      .toFixed(2)
                      .replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")}{" "}
                    Cake
                  </div>
                )
              }
            />
          </Col>
          <Col flex="1 0 25%" className="column mktPrice">
            <Widget
              type="mktPrice"
              numvalue={
                cake && (
                  <div>
                    $
                    {parseFloat(
                      JSON.parse(JSON.stringify(cake?.data?.price))
                    ).toFixed(5)}
                  </div>
                )
              }
            />
          </Col>
          <Col flex="1 0 25%" className="column mktCap">
            <Widget type="mktCap" numvalue={
              cake && supply && (
                <span>
                  
                  {(
                    parseFloat(JSON.parse(JSON.stringify(cake?.data?.price))) *
                    (parseInt(JSON.parse(JSON.stringify(supply)).hex, 16) /
                      Math.pow(10, 18))
                  )
                    .toFixed(2)
                    .replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")}
                </span>
              )
            } />
          </Col>
          <Col flex="1 0 25%" className="column liquidity">
            <Widget type="liquidity" numvalue={
                liquidtotal && (
                  <div>
                    $
                    {parseFloat(
                      JSON.parse(JSON.stringify(liquidtotal))
                    ).toFixed(2)}
                  </div>
                )
              }/>
          </Col>
        </Row>
      </div>
    </>
  );
}

export default GetMarket;

If i remove isAuthenticated from the conditions in the useEffect hooks, everything except the liquidity loads .

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

  useEffect(() => {
    if (isWeb3Enabled) {  //removed isAuthenticated
      renderMarket();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isWeb3Enabled]);  //removed isAuthenticated
#4

This works fine using your example, just some null data (only the first getPairReserves works) and errors due to not having optionsSupply.

const { ..... isInitialized } = useMoralis();

...

useEffect(() => {
    
    if(isInitialized) {
      renderMarket()
    }
      
  }, [isInitialized])
#5

hmm played with that for a minute and it diddnt really work i get the first three widgets reading out supply, price, and marketcap but it says NAN for liquidity . I connect and nothing changes then when I disconnect liquidity pops up and supply and market cap stop working. Wish i fully understood how this works , oh well learning…

how its set now

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

  useEffect(() => {
    if (isInitialized && isWeb3Enabled) {    // I tried this with just isInitialized aswell no workie
      renderMarket()   
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isInitialized, isWeb3Enabled]);    // I tried this with just isInitialized aswell no workie

null readings for the two reserves and the usdvalue sum but getting data in wei. why null sometimes and others not , im doing something terribly wrong … something to do with the way im processing the two reserves. also if anyone has any insight into the fix for the depreciation warnings that would be awesome.

Screenshot_10

#6

Yes your following functions don’t work but have we gotten past your issue of running the web3api and executefunctions without being authenticated? That was the main focus of that code snippet. We can move on with your next issue if that’s all sorted.

#7

Well no, fields stay empty until connect, then the last value the liquidity doesn’t show up until disconnect then reconnect.

#8

still can’t figure out what’s wrong with this code, I get the first console.log showing the pair object, but when it goes to console.log the liquidtotal I get NaN, also it runs twice for whatever reason. then if I go to my code and just change one thing then save and go back to the browser the liquidity renders in the widget properly… until I refresh, it’s worth noting that I always have to refresh the browser for changes all throughout my app, after i recompile and go back to the browser I get as pictured in fig.2

Screenshot_31

Screenshot_33

 const { Moralis, isWeb3Enabled, enableWeb3, isAuthenticated, isWeb3EnableLoading, isInitialized } =
    useMoralis();
  const [token, settoken] = useState();
  const [bnbprice, setbnb] = useState();
  const [liquidtotal, setliquidtotal] = useState();
  const Web3Api = useMoralisWeb3Api();


const renderMarket = async () => {

   let res5 = await fetch(
      "https://api.pancakeswap.info/api/v2/tokens/0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c"
    );
    setbnb(await res5.json());

    let res4 = await fetch(
      "https://api.pancakeswap.info/api/v2/tokens/TOKENCONTRACTADDRESS"
    );

    settoken(await res4.json());
  const options = {
      pair_address: "LIQUIDITY PAIR ADDRESS",
      chain: "bsc",
    };
    const reserves = await Web3Api.defi.getPairReserves(options);
    console.log(reserves);
    const bnbreserve = Moralis.Units.FromWei(reserves.reserve1) * bnbprice?.data?.price;
    const tokenreserve = Moralis.Units.FromWei(reserves.reserve0) * token?.data?.price;
    const liquidtotal = bnbreserve + tokenreserve ;
    setliquidtotal(liquidtotal);
    console.log(liquidtotal);
};
useEffect(() => {
    if (!isWeb3Enabled && !isWeb3EnableLoading) {
      const connectorId = window.localStorage.getItem("connectorId");
      enableWeb3({ provider: connectorId });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isWeb3Enabled]);

useEffect(() => {
    if (isInitialized && isWeb3Enabled) {
      renderMarket();

    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isInitialized, isWeb3Enabled]);
#9

What is TOKENCONTRACTADDRESS meant to be in res4?

This returns a valid number for your bnbprice.

let res5 = await fetch('https://api.pancakeswap.info/api/v2/tokens/0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c');
const bnbResponse = await res5.json();

...

const reserves = await Web3Api.defi.getPairReserves(options);
console.log('Reserves', reserves);

const bnbreserve = Moralis.Units.FromWei(reserves.reserve1) * bnbResponse.data.price;
console.log('BNB Reserve', bnbreserve);

With your method there is likely an execution issue where you’re using bnbprice before the state is actually set and ready to use with the response from await res5.json(). With this we’re just using the response directly.

This would explain things working when you hot reload your app and the state is already ready.

#10

Thank you so much for your help, it’s working! kinda, lol.

TOKEN CONTRACT ADDRESS is where you put the token contract address to get a dollar price on pancakeswap. Its then used in the liquidity equation below it to find total usd liquidity the same thing that’s happening with res5 bnbprice. your solution works because its not setting the state it just waits and loads bnbResponse does the same for tokenResponse when I configure it the same way. After getting the usd prices, liquidtotal is calculated and its state is set with setliquidtotal(liquidtotal) and values are updated with useState, useEffect with dependancy isInitialized keeps the values updated

  const [token, settoken] = useState();
  const [bnbprice, setbnb] = useState();
  const [liquidtotal, setliquidtotal] = useState();

in the return for the main component, i call on the token variable (should be tokenprice) to display the current price and again to multiply by the supply to get MarketCap value, so i need a variable i can work with as tokenResponse is out of scope. i found that if after recieving tokenResponse from pancake i add settoken(tokenResponse) to update the state it works! I just dont quite get why settoken(await res4.json()) doesn’t wait for the response before setting the state. anyway after that longwinded explnation of what i’m doing, there still lingers a few artifacts. one is that when i disconnect my wallet, supply and marketcap disappear, but upon first vist while disconnected it works. It seems like useWeb3ExecuteFunction() is requiring isWeb3Enabled to be True … sometimes, or something is up with my useEffect setup or state dependancies? Based on what was said before, that useWeb3ExecuteFunction() doesnt require isWeb3Enabled
then i should be able to completely remove the ‘useEffect()’ that checks for it. so when i do remove that useEffect() and only the other useEffect() remains, the code looks like this:

  useEffect(() => {
    if (isInitialized) {
      renderMarket();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isInitialized]);

but again, just like when i disconnect my wallet, the supply and marketcap dont display.
in the console and i see the liquidity console.log() read out twice which seems weird, i have checked to see if <MoralisProvider> is wrapped in <React.StrictMode> in my index.js and its not, so that cant be why its reading out twice. Below is the full code with the token set to CAKE , obviously you would need the wallet connect button set up and the cake abi imported for the supply fetch. so in an external file TokenABI.js i have the code like this:

export const optionsSupply = {
    abi: [
     //Cake abi goes here
    ],
    contractAddress: "0x0E09FaBB73Bd3Ade0a17ECC321fD13a19e81cE82", 
    functionName: "getCirculatingSupply",
  };

Updated Main code:

import {
    useWeb3ExecuteFunction,
    useMoralisWeb3Api,
    useMoralis,
  } from "react-moralis";
  import { useEffect, useState } from "react";
  import { optionsSupply } from "../TokenABI";
  import Widget from "./Widget";
  import { Row, Col } from "antd";
  import "./getmarket.scss";
  
  export function GetMarket() {
    const {
      Moralis,
      isWeb3Enabled,
      enableWeb3,
      isWeb3EnableLoading,
      isInitialized,
    } = useMoralis();
  
    const [token, settoken] = useState();
    // const [bnbprice, setbnb] = useState();
    const [liquidtotal, setliquidtotal] = useState();
    const { data: supply, fetch: fetchsupply } = useWeb3ExecuteFunction();
    const Web3Api = useMoralisWeb3Api();
  
    const renderMarket = async () => {
      // eslint-disable-next-line
      let res1 = await fetchsupply({ params: optionsSupply });
  
      let res2 = await fetch(
        "https://api.pancakeswap.info/api/v2/tokens/0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c"
      );
      const bnbResponse = await res2.json();
      // setbnb(await res2.json());
  
      let res3 = await fetch(
        "https://api.pancakeswap.info/api/v2/tokens/0x0E09FaBB73Bd3Ade0a17ECC321fD13a19e81cE82"
      );
      const tokenResponse = await res3.json();
      settoken(tokenResponse);
  
      const options = {
        pair_address: "0x0eD7e52944161450477ee417DE9Cd3a859b14fD0",
        chain: "bsc",
      };
      let reserves = await Web3Api.defi.getPairReserves(options);
  
      console.log(reserves);
      const bnbreserve = reserves.reserve1;
      const tokenreserve = reserves.reserve0;
      const liquidtotal =
        Moralis.Units.FromWei(bnbreserve) * bnbResponse.data.price +
        Moralis.Units.FromWei(tokenreserve) * tokenResponse.data.price;
      console.log(liquidtotal);
      setliquidtotal(liquidtotal);
    };
  
    useEffect(() => {
      if (!isWeb3Enabled && !isWeb3EnableLoading) {
        const connectorId = window.localStorage.getItem("connectorId");
        enableWeb3({ provider: connectorId });
      }
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [isWeb3Enabled]);
  
    useEffect(() => {
      if (isInitialized && isWeb3Enabled) {
        renderMarket();
      }
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [isInitialized, isWeb3Enabled]);
    return (
      <>
        <div className="widgetcontainer">
          <Row className="widget">
            <Col flex="1 0 25%" className="column supply">
              <Widget
                type="supply"
                numvalue={
                  supply && (
                    <div>
                      {(
                        parseInt(JSON.parse(JSON.stringify(supply)).hex, 16) /
                        Math.pow(10, 18)
                      )
                        .toFixed(2)
                        .replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")}{" "}
                      token
                    </div>
                  )
                }
              />
            </Col>
            <Col flex="1 0 25%" className="column mktPrice">
              <Widget
                type="mktPrice"
                numvalue={
                  token && (
                    <div>
                      $
                      {parseFloat(
                        JSON.parse(JSON.stringify(token?.data?.price))
                      ).toFixed(5)}
                    </div>
                  )
                }
              />
            </Col>
            <Col flex="1 0 25%" className="column mktCap">
              <Widget
                type="mktCap"
                numvalue={
                  token &&
                  supply && (
                    <span>
                      {(
                        parseFloat(
                          JSON.parse(JSON.stringify(token?.data?.price))
                        ) *
                        (parseInt(JSON.parse(JSON.stringify(supply)).hex, 16) /
                          Math.pow(10, 18))
                      )
                        .toFixed(2)
                        .replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")}
                    </span>
                  )
                }
              />
            </Col>
            <Col flex="1 0 25%" className="column liquidity">
              <Widget
                type="liquidity"
                numvalue={
                  liquidtotal && <div>${parseFloat(liquidtotal).toFixed(2)}</div>
                }
              />
            </Col>
          </Row>
        </div>
      </>
    );
  }
  
  export default GetMarket;
#11

You are still storing the response but the useState set doesn’t wait before the rest of your code executes; it’s asynchronous. This is why you likely had those issues. In the future you can use useEffect to do things with your state after it has been set or is valid.

It seems like useWeb3ExecuteFunction() is requiring isWeb3Enabled to be True

Yes useWeb3ExecuteFunction() requires a provider in order to run contract functions.

i see the liquidity console.log() read out twice which seems weird

Is this only from console.log(liquidtotal)? You can log at the start of renderMarket to see if it’s running multiple times. Is <React.StrictMode> anywhere in your entry point or index.js?

So can you summarize, the main issue now is the data disappearing only when you disconnect your wallet?

#12

I checked and there is no <React.StrictMode> so that cant be the issue, and yes that is the only remaining issue. On disconnect, supply and therefor marketcap disappear, even though they were available before connecting and while connected.

#13

Can you post your disconnect code?

#14

okay,
near the bottom of the file is the logout function when clicking the connected button

        <Button
          size="large"
          type="primary"
          style={{
            width: "100%",
            marginTop: "10px",
            borderRadius: "0.5rem",
            fontSize: "16px",
            fontWeight: "500",
          }}
          onClick={async () => {
            await logout();
            window.localStorage.removeItem("connectorId");
            setIsModalVisible(false);
          }}
        >
          Disconnect Wallet
        </Button>

and here’s the whole connect button code, pretty much boilerplate code:

import { useMoralis } from "react-moralis";
import { getEllipsisTxt } from "../../helpers/formatters";
//import Blockie from "../Blockie";
import { Button, Card, Modal } from "antd";
import { useState } from "react";
import Address from "../Address/Address";
import { SelectOutlined } from "@ant-design/icons";
import { getExplorer } from "../../helpers/networks";
import Text from "antd/lib/typography/Text";
import { connectors } from "./config";
const styles = {
  connector: {
    alignItems: "center",
    display: "flex",
    flexDirection: "column",
    height: "auto",
    justifyContent: "center",
    marginLeft: "auto",
    marginRight: "auto",
    padding: "20px 5px",
    cursor: "pointer",
  },
  icon: {
    alignSelf: "center",
    fill: "rgb(40, 13, 95)",
    flexShrink: "0",
    marginBottom: "8px",
    height: "30px",
  },
};

function Account() {
  const { authenticate, isAuthenticated, account, chainId, logout } =
    useMoralis();
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isAuthModalVisible, setIsAuthModalVisible] = useState(false);

  if (!isAuthenticated || !account) {
    return (
      <>
        <div className="redButton">
          <button onClick={() => setIsAuthModalVisible(true)}>
            Wallet Not Connected
          </button>
        </div>
        <Modal
          visible={isAuthModalVisible}
          footer={null}
          onCancel={() => setIsAuthModalVisible(false)}
          bodyStyle={{
            padding: "15px",
            fontSize: "17px",
            fontWeight: "500",
          }}
          style={{ fontSize: "16px", fontWeight: "500" }}
          width="340px"
        >
          <div
            style={{
              padding: "10px",
              display: "flex",
              justifyContent: "center",
              fontWeight: "700",
              fontSize: "20px",
            }}
          >
            Connect Wallet
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
            {connectors.map(({ title, icon, connectorId }, key) => (
              <div
                style={styles.connector}
                key={key}
                onClick={async () => {
                  try {
                    window.localStorage.setItem("connectorId", connectorId);
                    await authenticate({ provider: connectorId, chainId: 56,});
                    
                    setIsAuthModalVisible(false);
                  } catch (e) {
                    console.error(e);
                  }
                }}
              >
                <img src={icon} alt={title} style={styles.icon} />
                <Text style={{ fontSize: "14px" }}>{title}</Text>
              </div>
            ))}
          </div>
        </Modal>
      </>
    );
  }

  return (
    <>

      <div className="buttonWrap">
        <div className="greenButton">
          <button onClick={() => setIsModalVisible(true)}>
            {getEllipsisTxt(account, 6)}
          </button>
        </div>
      </div>

      <Modal
        visible={isModalVisible}
        footer={null}
        onCancel={() => setIsModalVisible(false)}
        bodyStyle={{
          padding: "15px",
          fontSize: "17px",
          fontWeight: "500",
        }}
        style={{ fontSize: "16px", fontWeight: "500" }}
        width="400px"
      >
        Account
        <Card
          style={{
            marginTop: "10px",
            borderRadius: "1rem",
          }}
          bodyStyle={{ padding: "15px" }}
        >
          <Address
            avatar="left"
            size={6}
            copyable
            style={{ fontSize: "20px" }}
          />
          <div style={{ marginTop: "10px", padding: "0 10px" }}>
            <a
              href={`${getExplorer(chainId)}/address/${account}`}
              target="_blank"
              rel="noreferrer"
            >
              <SelectOutlined style={{ marginRight: "5px" }} />
              View on Explorer
            </a>
          </div>
        </Card>
        <Button
          size="large"
          type="primary"
          style={{
            width: "100%",
            marginTop: "10px",
            borderRadius: "0.5rem",
            fontSize: "16px",
            fontWeight: "500",
          }}
          onClick={async () => {
            await logout();
            window.localStorage.removeItem("connectorId");
            setIsModalVisible(false);
          }}
        >
          Disconnect Wallet
        </Button>
      </Modal>
    </>
  );
}

export default Account;

and this is the auth section of my main app.js

  const { isWeb3Enabled, enableWeb3, isAuthenticated, isWeb3EnableLoading } = useMoralis();
    const {  switchNetwork, chainId, chain  } = useChain();


    useEffect(() => {
      const connectorId = window.localStorage.getItem("connectorId");
      if (isAuthenticated && !isWeb3Enabled && !isWeb3EnableLoading){
          enableWeb3({ provider: connectorId });}
  
      if (chainId !== '0x38') {
        if (!chainId) return null;
  
        if (window.confirm(`You're on the wrong network! Click OK to switch to Binance Smart Chain`)) {
                switchNetwork("0x38")
              } else {
                alert("You're on the wrong network & will result in loss of funds due to failed transaction! Switch to Binance Smart CHain manually in your Metamask Wallet!");
             }
      }  
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [isAuthenticated, isWeb3Enabled, chain]);
#15

Where is the logout() function? You can remove parts from your overall disconnect code e.g. the localStorage and setIsModalVisible(false); and do the same in your logout until you can further isolate where the issue is.

#16

logout() is called near the end of the file and defined as from useMoralis() at the top, removing one or both localStorage and setIsModalVisible(false) doesn’t seem to change anything supply and mktcap still dissapear, when i remove both only diference is the modal disconnect window pops up on reconnect, no values though.

#17

I see now, my search didn’t pick that up. As logout will change a few states in useMoralis, my first assumption is that it’s an issue with a useEffect that is causing things to re-render incorrectly. Add a log to each one to see if any of them run when you disconnect with logout().

#18

okay so I put logs in both useEffect page starts up disconnected and logs, “web3 enabled” and “Market Rendered”.on connected no logs, but on disconnect, both logs display again.

#19

So Market Rendered shows when you disconnect? That’s probably the issue then. But I would think the data would just re-fetch and not disappear (or eventually appear again). Can you log those variables you’re using in your component e.g. supply inside a useEffect and have a look at what happens when you disconnect.

#20

Okay, I put console.log(parseFloat(supply)) in both useEffect on page load while disconnected it reads NaN twice, on connect no change, on disconnect It logs two float values.