I did not understand this. Can you give more details
Error: XMLHttpRequest failed: “Unable to connect to the Parse API”… i got this after editing moralis.start
please i want to be able to see user address, balance and transaction history on my firebase realtime database, same as how moralis server dashboard made that available
This is an error from old moralis sdk. Can you check if Moralis is imported from latest moralis sdk of version 2.xx.xx.
import { Button, Text, Flex, Center, useColorModeValue, Image, Box, Tabs, TabList, Tab, TabPanels, TabPanel, Alert, AlertIcon, Link, styled, AccordionButton } from "@chakra-ui/react"
import Head from "next/head"
import { useMoralis, useWeb3Contract } from "react-moralis"
import Balance from "../components/Balance"
import Transactions from "../components/Transactions"
import Header from "../components/Header"
import Profile from "../components/Profile"
import moralis from 'moralis-v1'
import { useEffect, useState } from "react"
import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, ModalCloseButton } from '@chakra-ui/react'
import { useDisclosure } from '@chakra-ui/react'
import { MoralisProvider } from "react-moralis";
import { initializeApp } from "firebase/app";
import { getMoralisAuth } from '@moralisweb3/client-firebase-auth-utils';
import { signInWithMoralis } from '@moralisweb3/client-firebase-evm-auth';
import { getAuth } from '@firebase/auth';
import { getFunctions } from "firebase/functions"
all my imported packages
replace this with
import moralis from 'moralis'
If you also want to use moralis-v1 in same code then you can import it like below so there is no overlap between the two SDKs.
import moralisV1 from 'moralis-v1'
Were you able to successfully save the user data in Firebase after the authentication?
You can find the sample code in this tutorial on how to read the user address from firebase. Please have a look at it and let us know if you have any questions.
yea i did all what was shown in the video, it signed my wallet in, the uid was an harsh token not a wallet address… i am try to get both the wallet address and the balance of a wallet in my firebase database when they sign to my dapp
The auth extension saves the wallet address under the account name. And UID is a unique profile id generated by the moralis auth API. It is unique so it is saved as the profile id.
So if you use user.name rather than user.uid you will get the wallet address of the user.
async function login() {
const moralisAuth = getMoralisAuth(app, {
auth,
functions,
});
const res = await signInWithMoralis(moralisAuth);
setUser(res.credentials.user.name);
}
i am still getting the harsh token
Can you add a console.log(res.credentials.user) to check what data is present in the user object.
async function login() {
const moralisAuth = getMoralisAuth(app, {
auth,
functions,
});
const res = await signInWithMoralis(moralisAuth);
setUser(res.credentials.user.displayName);
console.log(res.credentials.user)
}
still got the harsh token in firebase
Can you once try restarting the server to make sure the code is updated in localhost? And also try logout and then login.
i just did, still the harsh uid
Can you show which part of the code is responsible for showing the wallet address your app UI?
You can also try adding some logs to check if the correct data is being passed to the UI.
The wallet address is already being returned from the firebase. You just have to use it correctly in the code.
return(
<>
<Head>
<title></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 on "
})}
>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>
</>
)} */}
</>
)
};
// const ABI =
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></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("ethAddress")}
</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="../bored.jpg" />
</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://.com/" target="_blank" rel="noreferrer">
<Button ml="4" colorScheme="green" disabled={isLoading || isFetching || !approved}>Continue</Button>
</a> */}
</ModalFooter>
</ModalContent>
</Modal>
<br />
{/* <br />
<Link href="wss://real.com/" 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>
</>
)
}
my index.js return statement, after the wallet signing, its expected to load the next return statement
import { ChakraProvider } from "@chakra-ui/react"
import { ThemeProvider, ColorModeProvider } from "@chakra-ui/react"
import { MoralisProvider } from "react-moralis"
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<MoralisProvider appId={process.env.NEXT_PUBLIC_APPID} serverUrl={process.env.NEXT_PUBLIC_SERVER_URL}>
<Component {...pageProps} />
</MoralisProvider>
</ChakraProvider>
)
}
export default MyApp
my app.js file…
Which line should render the wallet address here?
the first return statement is for signing in the user