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
after reloding or to go any other page for e.g. setnft
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.
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).