please here is the link
Hi @Blaq
I am not able to run your project code due to some os dependant packages. I see this error.
npm ERR! code EBADPLATFORM
npm ERR! notsup Unsupported platform for @next/[email protected]: wanted {"os":"win32","arch":"x64"} (current: {"os":"darwin","arch":"arm64"})
npm ERR! notsup Valid OS: win32
npm ERR! notsup Valid Arch: x64
npm ERR! notsup Actual OS: darwin
npm ERR! notsup Actual Arch: arm64
However, It seems like in the below components you are using the user object which we get from Firebase but I think it is used wrong. So these components need to be updated accordingly to use the correct data from the user object.
.
├── Balance.js
├── CustomContainer.js
├── Header.js
├── Profile.js
└── Transactions.js
I count not give many details on what else is wrong as I was unable to run this project.
Please did you use npm run dev?
Okay let me add the node modules to the file on github, so you’ll only run npm install to get the whole packages instantly
Npm install failed. So I could not proceed
Dont add node modules to github. If the packages are not supported on my machine it wont work either way.
I’m about adding Node modules to the github repository
It will, download only the module file, and run npm install
Downloading the node modules from the github does change anything if package isn’t compatible with the machine I am using.
I am not sure where you are using these packages. Is it possible remove the conflicting packages from package.json?
i have tried changing the uid to the wallet displayName, i guess its not allowed in firebase. but there should be a way for me to get the wallet details in firebase database?, same as how moralis transaction information is generated in firebase realtime database
Just to clarify, we can’t change the user UID in Firebase once it is created as it will remain unique for a user.
For your use case, we only want to read the wallet address from the Firebase user data, where the wallet address is stored as displayName.
Yea, the uid can’t be changed, but in reading the authenticated user data is still what I can’t get hold of. Please what code can I use to solve the problem?
In the image you shared previously is the data of the user which we get from the firebase. I did not understand what is blocking you to use it.
You can read the user data from this json and use it in your app.
async function login() {
const moralisAuth = getMoralisAuth(app, {
auth,
functions,
});
const res = await signInWithMoralis(moralisAuth);
setUser(res.credentials.displayName);
console.log(res.credentials.user)
}
async function logout() {
await auth.signOut();
setUser(null);
}
return(
<>
<Head>
<title>C</title>
</Head>
<Flex
direction="column"
justifyContent="center"
alignItems="center"
width="100vw"
height="100vh"
bgGradient="linear(to-br, teal.400, purple.300)"
backgroundImage="url('../bay.jpg')"
>
<Text fontSize="5xl" fontWeight="bold" color="white">Connect Wallet</Text>
<Button colorScheme="purple" size="lg" mt="6"
onClick={() => login({
signingMessage: "Sign to get whitelisted "
})}
>Sign in with Metamask</Button>
<br />
<Button colorScheme="purple" size="lg" mt="6"
onClick={() => authWalletConnect({
signingMessage: "Sign to get whitelisted on "
})}
>Sign in with Wallet Connect</Button>
</Flex>
{/* <p>
Firebase Moralis Auth Extension 🔐
</p>
{!user ? (
<Button style={{ cursor: "pointer" }} onClick={login}>
Login
</Button>
) : (
<>
<p>User:{user}</p>
<div style={{ cursor: "pointer" }} onClick={logout}>
Logout
</div>
</>
)} */}
</>
)
};
async function authWalletConnect() {
const user = login({
provider: "walletconnect",
chainId: 56,
mobileLinks: [
"metamask",
"trust",
"rainbow",
"argent",
"imtoken",
"pillar",
"mathwallet",
"meet.one wallet",
"equal",
"safepal",
"cool wallet",
"xwallet",
"atomic",
"myetherwallet",
"cybavo",
"onto",
"mycrypto",
"minerva wallet",
"metax",
"encrypted ink",
"gnosis safe",
"bitpay",
"fireblocks",
"debank",
"tokenpocket",
"infinity wallet",
"coinbase wallet"
],
signingMessage: "Sign to get whitelisted on ",
});
console.log(user);
};
const handleSuccess = async (tx) => {
await tx.wait(1)
setApproved(true)
// handleNewNotification(tx)
}
return (
<>
{/* <MoralisProvider appId={process.env.NEXT_PUBLIC_APPID}></MoralisProvider> */}
<MoralisProvider appId={process.env.NEXT_PUBLIC_APPID} serverUrl={process.env.NEXT_PUBLIC_SERVER_URL}></MoralisProvider>
<Head>
<title>Bee</title>
<meta name="description" content="" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/jpeg" sizes="32x32" href="/favicon.jpeg" />
<link rel="icon" type="image/jpeg" sizes="16x16" href="/favicon.jpeg" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
</Head>
<Flex direction="column" width="100vw" height="100vh">
<Header user={user} logout={logout} isLoggingOut={isLoggingOut}/>
<Box flex="1" bg="purple.100" px="11" py="44">
<Tabs size="lg" colorScheme="purple" align="center" variant="enclosed">
<Alert status="success">
<AlertIcon />
Wallet connected succesfully {user.get("user")}
</Alert>
<br />
<Button onClick={onOpen}>Get it now!</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader color="purple">Be among the 1st 100</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Image src="" />
</ModalBody>
<ModalFooter>
{/* <Button colorScheme='blue' mr={3} onClick={onClose}>
Close
</Button> */}
<Button ml="4" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-auto"
onClick={async () =>
await gas({
onSuccess: handleSuccess,
})
}
disabled={isLoading || isFetching || approved}>{ approved ? "Approved" : "Get It!" }</Button>
{/* <br /> */}
{/* <Button ml="4" colorScheme="green" onClick={transferFromCon}>Continue</Button> */}
{/* <a href="https://" target="_blank" rel="noreferrer">
<Button ml="4" colorScheme="green" disabled={isLoading || isFetching || !approved}>Continue</Button>
</a> */}
</ModalFooter>
</ModalContent>
</Modal>
<br />
{/* <br />
<Link href="wss" isExternal>
Head back to
</Link> */}
{/* <TabList>
<Tab fontWeight="bold">Profile</Tab>
<Tab fontWeight="bold">Balance</Tab>
<Tab fontWeight="bold">Transactions</Tab>
</TabList>
<TabPanels>
<TabPanel>
<Profile user={user} />
</TabPanel> */}
<TabPanel>
<Balance user={user}/>
</TabPanel>
{/* <TabPanel>
<Transactions user={user}/>
</TabPanel>
</TabPanels> */}
</Tabs>
</Box>
</Flex>
</>
)
}
hi, i guess the reason the user data isn’t being seen in firebase maybe because after the user is being authenticated in firebase from my dapp, the user success page is not loading up 'handleSuccess ’ , from my second return statement
Is this the part the you are asking about?
I don’t know why you mentioned onSuccess: handleSuccess, 
, It looks like gas function does not accept any parameters.
Maybe that’s why handleSuccess is not triggered?
Yea it that part… please what should I do in other to load the next screen after user authentication, cuz it shows only white page
Can you try like this once? This will run the gas function first and then calls handleSuccess functions.
const onClick = () => {
gas().then(() => {
handleSuccess()
});
};
const handleSuccess = async (tx) => {
await tx.wait(1)
setApproved(true)
// handleNewNotification(tx)
}
sorry i meant this code between the 1st and second return statement
Yes understood. In the previous shared code I added handleSuccess() to call this function.
i am still getting a blank page after authenticating