Metamask address is changing

hi suppose if i am signing to metamask and coinbase both but after reloading any page then address changes to by default coinbase address
can anyone help me out from this
after sign in with metamask
image

after reloding or to go any other page for e.g. setnft
image
it’s changing to by default coin base address

It depends where from that address is displayed there, it could be displayed from the current user account and not form the wallet

like any idea how we can resolve this

we are displaying from react moralis

We may need more info like what is the code that displays it

this is whole code of wallet connection

import { useMoralisDapp } from "providers/MoralisDappProvider/MoralisDappProvider";

import { useMoralis } from "react-moralis";

import { getEllipsisTxt } from "helpers/formatters";

import Blockie from "./Blockie";

import { Button, Card, Modal } from "antd";

// import { createClient, configureChains, defaultChains, WagmiConfig } from 'wagmi';

// import { publicProvider } from 'wagmi/providers/public';

import { useState } from "react";

import Address from "./Address/Address";

import { SelectOutlined } from "@ant-design/icons";

import { getExplorer } from "helpers/networks";

import Connectors from "./Connectors";

import Moralis from "moralis-v1";

// const { provider, webSocketProvider } = configureChains(defaultChains, [publicProvider()]);

// const client = createClient({

//   provider,

//   webSocketProvider,

//   autoConnect: true,

// });

const styles = {

  account: {

    height: "42px",

    padding: "0 15px",

    display: "flex",

    justifyContent: "center",

    alignItems: "center",

    width: "fit-content",

    borderRadius: "12px",

    backgroundColor: "rgb(244, 244, 244)",

    cursor: "pointer",

  },

  text: {

    color: "#21BF96",

  },

  wallet: {

    fontSize: "24px",

    fontFamily: "Alex Brush",

    fontWeight: "600",

  },

};

function Account() {

  const {

    authenticate,

    isAuthenticated,

    logout,

    isInitialized,

    enableWeb3,

    account,

  } = useMoralis();

  const { walletAddress, chainId } = useMoralisDapp();

  const [isModalVisible, setIsModalVisible] = useState(false);

  const [isModalOpen, setIsModalOpen] = useState(false);

  const [isAuthOpen, setIsAuthOpen] = useState(false);

  const [isOpened, setIsOpened] = useState(true);

  const [authError, setAuthError] = useState(null);

  const [isAuthenticating, setIsAuthenticating] = useState(false);

  let moralisAuth;

  function getWallet() {

    if (typeof web3 !== "undefined") {

      //authenticate({ signingMessage: "Please Sign In" });

      setIsAuthOpen(true);

    } else {

      setIsModalOpen(true);

    }

  }

  function activateInjectedProvider(providerName) {

    const { ethereum } = window;

    if (!ethereum?.providers) {

      return undefined;

    }

    let provider;

    switch (providerName) {

      case "Coinbase":

        provider = ethereum.providers.find(

          ({ isCoinbaseWallet }) => isCoinbaseWallet

        );

        break;

      case "Metamask":

        provider = ethereum.providers.find(({ isMetaMask }) => isMetaMask);

        break;

      default:

        return;

    }

    if (provider) {

      ethereum.setSelectedProvider(provider);

    }

  }

  const handleAuth = async (

    provider:

      | "metamask"

      | "coinbase"

      | "walletconnect"

      | "magicLink"

      | "web3Auth" = "metamask"

  ) => {

    activateInjectedProvider(provider);

    try {

      setAuthError(null);

      setIsAuthenticating(true);

      // Enable web3 to get user address and chain

      await enableWeb3({ throwOnError: true, provider });

      const { account, chainId } = Moralis;

      if (!account) {

        throw new Error(

          "Connecting to chain failed, as no connected account was found"

        );

      }

      if (!chainId) {

        throw new Error(

          "Connecting to chain failed, as no connected chain was found"

        );

      }

      // Get message to sign from the auth api

      const { message } = await Moralis.Cloud.run("requestMessage", {

        address: account,

        chain: parseInt(chainId, 16),

        networkType: "evm",

      });

      // Authenticate and login via parse

      await authenticate({

        signingMessage: message,

        throwOnError: true,

      });

    } catch (error) {

      setAuthError(error);

      alert(error)

    } finally {

      setIsAuthenticating(false);

      setIsAuthOpen(false);

    }

  };

  // async function magicLink(connectorId: Moralis.Web3ProviderType) {

  //   setIsAuthOpen(false);

  //   if (connectorId === "magicLink") {

  //     authenticate({ provider: connectorId });

  //   } else {

  //     activateInjectedProvider(connectorId);

  //     authenticate({ provider: connectorId });

  //   }

  // }

  // const handleCustomLogin = async () => {

  //   await authenticate({

  //     provider: "magicLink",

  //     email: email,

  //     apiKey: "ZxkDdAQEFiO5boRqGHPhyFXLW4or11UtPskIWsRWUvZtanXvclPTINwUJOtbB4VJ", // Enter API key from Magic Dashboard https://dashboard.magic.link/

  //     network: "rinkbey"

  //   });

  // };

  if (!isAuthenticated) {

    return (

      <>

        <div onClick={() => getWallet()}>

          <p className="text-white text-center"> Connect To Wallet</p>

        </div>

        <Modal

          open={isModalOpen}

          footer={null}

          onCancel={() => setIsModalOpen(false)}

          bodyStyle={{

            padding: "15px",

            fontSize: "17px",

            fontWeight: "500",

          }}

          style={{ fontSize: "16px", fontWeight: "500" }}

          width="400px"

        >

          <h3>You don't have any wallet to connect</h3>

        </Modal>

        <Modal

          className="modal-w"

          open={isAuthOpen}

          footer={null}

          onCancel={() => setIsAuthOpen(false)}

          bodyStyle={{

            padding: "15px",

            fontSize: "17px",

            fontWeight: "500",

          }}

          style={{ fontSize: "16px", fontWeight: "500" }}

          width="400px"

        >

          {/* <div style={{padding: "90px"}}>

          {Connectors.map(({ title, icon, connectorId }, key) => (

            <button onClick={() =>  connectWallet(

              connectorId,

          )}>{title}</button>

          <button onClick={() =>  handleAuth('metamask')}>{title}</button>

         

          ))}

          </div> */}

          <div style={{ padding: "10px" }}>

            <div className="mb-2">

              <h2 className="fw-bold text-center ">Connect your wallet</h2>

            </div>

            <div className="border-top">

              {Connectors.map(({ title, icon, connectorId }, key) => (

                <div

                  className="d-flex align-items-center mt-3"

                  disabled={isAuthenticating}

                >

                  <img

                    src={icon}

                    style={{ height: "26px", width: "26px" }}

                    alt={connectorId}

                  />

                  <a

                    className="mx-2 text-dark text-decoration-none"

                    href="/#"

                    onClick={() => handleAuth(connectorId)}

                    style={styles.wallet}

                  >

                    {title}

                  </a>

                </div>

              ))}

            </div>

          </div>

        </Modal>

      </>

    );

  } else {

    return (

      <>

        <div onClick={() => setIsModalVisible(true)}>

          <p>{getEllipsisTxt(account, 6)}</p>

          {/* <Blockie currentWallet scale={3} /> */}

        </div>

        <Modal

          className=""

          open={isModalVisible}

          footer={null}

          onCancel={() => setIsModalVisible(false)}

          bodyStyle={{

            padding: "15px",

            fontSize: "17px",

            fontWeight: "500",

          }}

          style={{ fontSize: "16px", fontWeight: "500", width: "75%" }}

          width="400px"

        >

          <div className="border-bottom"><h2 className="fw-bold text-center ">Disconnect your wallet</h2></div>

          <div className="row align-items-center mt-1">

            <div className=" col-md-10 col-12 text-md-start text-center">

            <h3 className="fw-bold  pt-1">Account:</h3>

              <h4 className="fw-bold  pt-1">{account}</h4>

            </div>

           

            {/* <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> */}

            <div className="d-flex col-md-2 col-12 justify-content-end mt-3">

              <Button

              className="d-flex align-items-center m-auto"

                size="large"

                type="primary"

                style={{

                  borderRadius: "0.5rem",

                  fontSize: "25px",

                  fontFamily: "Alex Brush",

                  fontWeight: "500",

                }}

                onClick={() => {

                  logout();

                  setIsModalVisible(false);

                }}

              >

                Disconnect

              </Button>

            </div>

          </div>

        </Modal>

      </>

    );

  }

}

export default Account;

You can find a forum post on how to paste code on forum.

sorry next time i will take care of this
could see code if possible to provide any solution

You can read this on posting code - you can edit your post. It is hard to read your code as it is now.

1 Like
import { useMoralisDapp } from "providers/MoralisDappProvider/MoralisDappProvider";

import { useMoralis } from "react-moralis";

import { getEllipsisTxt } from "helpers/formatters";

import Blockie from "./Blockie";

import { Button, Card, Modal } from "antd";

// import { createClient, configureChains, defaultChains, WagmiConfig } from 'wagmi';

// import { publicProvider } from 'wagmi/providers/public';

import { useState } from "react";

import Address from "./Address/Address";

import { SelectOutlined } from "@ant-design/icons";

import { getExplorer } from "helpers/networks";

import Connectors from "./Connectors";

import Moralis from "moralis-v1";

// const { provider, webSocketProvider } = configureChains(defaultChains, [publicProvider()]);

// const client = createClient({

//   provider,

//   webSocketProvider,

//   autoConnect: true,

// });

const styles = {

  account: {

    height: "42px",

    padding: "0 15px",

    display: "flex",

    justifyContent: "center",

    alignItems: "center",

    width: "fit-content",

    borderRadius: "12px",

    backgroundColor: "rgb(244, 244, 244)",

    cursor: "pointer",

  },

  text: {

    color: "#21BF96",

  },

  wallet: {

    fontSize: "24px",

    fontFamily: "Alex Brush",

    fontWeight: "600",

  },

};

function Account() {

  const {

    authenticate,

    isAuthenticated,

    logout,

    isInitialized,

    enableWeb3,

    account,

  } = useMoralis();

  const { walletAddress, chainId } = useMoralisDapp();

  const [isModalVisible, setIsModalVisible] = useState(false);

  const [isModalOpen, setIsModalOpen] = useState(false);

  const [isAuthOpen, setIsAuthOpen] = useState(false);

  const [isOpened, setIsOpened] = useState(true);

  const [authError, setAuthError] = useState(null);

  const [isAuthenticating, setIsAuthenticating] = useState(false);

  let moralisAuth;

  function getWallet() {

    if (typeof web3 !== "undefined") {

      //authenticate({ signingMessage: "Please Sign In" });

      setIsAuthOpen(true);

    } else {

      setIsModalOpen(true);

    }

  }

  function activateInjectedProvider(providerName) {

    const { ethereum } = window;

    if (!ethereum?.providers) {

      return undefined;

    }

    let provider;

    switch (providerName) {

      case "Coinbase":

        provider = ethereum.providers.find(

          ({ isCoinbaseWallet }) => isCoinbaseWallet

        );

        break;

      case "Metamask":

        provider = ethereum.providers.find(({ isMetaMask }) => isMetaMask);

        break;

      default:

        return;

    }

    if (provider) {

      ethereum.setSelectedProvider(provider);

    }

  }

  const handleAuth = async (

    provider:

      | "metamask"

      | "coinbase"

      | "walletconnect"

      | "magicLink"

      | "web3Auth" = "metamask"

  ) => {

    activateInjectedProvider(provider);

    try {

      setAuthError(null);

      setIsAuthenticating(true);

      // Enable web3 to get user address and chain

      await enableWeb3({ throwOnError: true, provider });

      const { account, chainId } = Moralis;

      if (!account) {

        throw new Error(

          "Connecting to chain failed, as no connected account was found"

        );

      }

      if (!chainId) {

        throw new Error(

          "Connecting to chain failed, as no connected chain was found"

        );

      }

      // Get message to sign from the auth api

      const { message } = await Moralis.Cloud.run("requestMessage", {

        address: account,

        chain: parseInt(chainId, 16),

        networkType: "evm",

      });

      // Authenticate and login via parse

      await authenticate({

        signingMessage: message,

        throwOnError: true,

      });

    } catch (error) {

      setAuthError(error);

      alert(error);

    } finally {

      setIsAuthenticating(false);

      setIsAuthOpen(false);

    }

  };

  if (!isAuthenticated) {

    return (

      <>

        <div onClick={() => getWallet()}>

          <p className="text-white text-center"> Connect To Wallet</p>

        </div>

        <Modal

          open={isModalOpen}

          footer={null}

          onCancel={() => setIsModalOpen(false)}

          bodyStyle={{

            padding: "15px",

            fontSize: "17px",

            fontWeight: "500",

          }}

          style={{ fontSize: "16px", fontWeight: "500" }}

          width="400px"

        >

          <h3>You don't have any wallet to connect</h3>

        </Modal>

        <Modal

          className="modal-w"

          open={isAuthOpen}

          footer={null}

          onCancel={() => setIsAuthOpen(false)}

          bodyStyle={{

            padding: "15px",

            fontSize: "17px",

            fontWeight: "500",

          }}

          style={{ fontSize: "16px", fontWeight: "500" }}

          width="400px"

        >

          {/* <div style={{padding: "90px"}}>

          {Connectors.map(({ title, icon, connectorId }, key) => (

            <button onClick={() =>  connectWallet(

              connectorId,

          )}>{title}</button>

          <button onClick={() =>  handleAuth('metamask')}>{title}</button>

         

          ))}

          </div> */}

          <div style={{ padding: "10px" }}>

            <div className="mb-2">

              <h2 className="fw-bold text-center ">Connect your wallet</h2>

            </div>

            <div className="border-top">

              {Connectors.map(({ title, icon, connectorId }, key) => (

                <div

                  className="d-flex align-items-center mt-3"

                  disabled={isAuthenticating}

                >

                  <img

                    src={icon}

                    style={{ height: "26px", width: "26px" }}

                    alt={connectorId}

                  />

                  <a

                    className="mx-2 text-dark text-decoration-none"

                    href="/#"

                    onClick={() => handleAuth(connectorId)}

                    style={styles.wallet}

                  >

                    {title}

                  </a>

                </div>

              ))}

            </div>

          </div>

        </Modal>

      </>

    );

  } else {

    return (

      <>

        <div onClick={() => setIsModalVisible(true)}>

          <p>{getEllipsisTxt(account, 6)}</p>

          {/* <Blockie currentWallet scale={3} /> */}

        </div>

        <Modal

          className=""

          open={isModalVisible}

          footer={null}

          onCancel={() => setIsModalVisible(false)}

          bodyStyle={{

            padding: "15px",

            fontSize: "17px",

            fontWeight: "500",

          }}

          style={{ fontSize: "16px", fontWeight: "500", width: "75%" }}

          width="400px"

        >

          <div className="border-bottom">

            <h2 className="fw-bold text-center ">Disconnect your wallet</h2>

          </div>

          <div className="row align-items-center mt-1">

            <div className=" col-md-10 col-12 text-md-start text-center">

              <h3 className="fw-bold  pt-1">Account:</h3>

              <h4 className="fw-bold  pt-1">{account}</h4>

            </div>

            {/* <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> */}

            <div className="d-flex col-md-2 col-12 justify-content-end mt-3">

              <Button

                className="d-flex align-items-center m-auto"

                size="large"

                type="primary"

                style={{

                  borderRadius: "0.5rem",

                  fontSize: "25px",

                  fontFamily: "Alex Brush",

                  fontWeight: "500",

                }}

                onClick={() => {

                  logout();

                  setIsModalVisible(false);

                }}

              >

                Disconnect

              </Button>

            </div>

          </div>

        </Modal>

      </>

    );

  }

}

export default Account;

is it fine now to read?

Which boilerplate is this from originally? You may need to add a separate connector for Coinbase - you have added some code to check for Coinbase wallet but it would still use the same injected provider (that is used for MetaMask).