-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
68cd754
commit 0c07bb3
Showing
9 changed files
with
217 additions
and
160 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,71 +1,49 @@ | ||
| "use client"; | ||
|
|
||
| import Link from "next/link"; | ||
| import type { NextPage } from "next"; | ||
| import { useAccount } from "wagmi"; | ||
| import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"; | ||
| import { Address } from "~~/components/scaffold-eth"; | ||
| import { NextPage } from "next"; | ||
| import { useScaffoldReadContract, useScaffoldWriteContract } from "~~/hooks/scaffold-eth"; | ||
| import NFTGrid from "~~/components/NFTGrid"; | ||
|
|
||
| const Home: NextPage = () => { | ||
| const { address: connectedAddress } = useAccount(); | ||
| const { writeContractAsync: writeYourContractAsync } = useScaffoldWriteContract("SVGNFT"); | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="flex items-center flex-col flex-grow pt-10"> | ||
| <div className="px-5"> | ||
| <h1 className="text-center"> | ||
| <span className="block text-2xl mb-2">Welcome to</span> | ||
| <span className="block text-4xl font-bold">Scaffold-ETH 2</span> | ||
| </h1> | ||
| <div className="flex justify-center items-center space-x-2 flex-col sm:flex-row"> | ||
| <p className="my-2 font-medium">Connected Address:</p> | ||
| <Address address={connectedAddress} /> | ||
| </div> | ||
| <p className="text-center text-lg"> | ||
| Get started by editing{" "} | ||
| <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block"> | ||
| packages/nextjs/app/page.tsx | ||
| </code> | ||
| </p> | ||
| <p className="text-center text-lg"> | ||
| Edit your smart contract{" "} | ||
| <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block"> | ||
| YourContract.sol | ||
| </code>{" "} | ||
| in{" "} | ||
| <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block"> | ||
| packages/hardhat/contracts | ||
| </code> | ||
| </p> | ||
| </div> | ||
| const { data: priceData } = useScaffoldReadContract({ | ||
| contractName: "SVGNFT", | ||
| functionName: "price", | ||
| }); | ||
|
|
||
| const { data: noOfTokens } = useScaffoldReadContract({ | ||
| contractName: "SVGNFT", | ||
| functionName: "tokenIds", | ||
| }); | ||
|
|
||
| <div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12"> | ||
| <div className="flex justify-center items-center gap-12 flex-col sm:flex-row"> | ||
| <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl"> | ||
| <BugAntIcon className="h-8 w-8 fill-secondary" /> | ||
| <p> | ||
| Tinker with your smart contract using the{" "} | ||
| <Link href="/debug" passHref className="link"> | ||
| Debug Contracts | ||
| </Link>{" "} | ||
| tab. | ||
| </p> | ||
| </div> | ||
| <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl"> | ||
| <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" /> | ||
| <p> | ||
| Explore your local transactions with the{" "} | ||
| <Link href="/blockexplorer" passHref className="link"> | ||
| Block Explorer | ||
| </Link>{" "} | ||
| tab. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| const mintToken = async () => { | ||
| try { | ||
| await writeYourContractAsync({ | ||
| functionName: "mintItem", | ||
| value: priceData, | ||
| }); | ||
| } catch (e) { | ||
| console.error("Error setting greeting:", e); | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <div className="min-h-screen bg-black text-white"> | ||
| <div className="absolute inset-0 bg-gradient-to-br from-purple-900 via-blue-900 to-black opacity-50"></div> | ||
| <main className="relative container mx-auto px-4 py-16"> | ||
| <h1 className="text-5xl md:text-7xl font-extrabold text-center mb-12 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 animate-pulse"> | ||
| Optimistic Loogies NFT | ||
| </h1> | ||
| <div className="flex justify-center mb-24"> | ||
| <button onClick={mintToken} className="bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 text-white font-bold py-4 px-12 rounded-full transform hover:scale-105 transition duration-300 ease-in-out shadow-xl hover:shadow-2xl text-lg"> | ||
| Mint Your Loogie | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </> | ||
| <NFTGrid noOfTokens={noOfTokens} /> | ||
| </main> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Home; | ||
| export default Home; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import { useScaffoldReadContract } from "~~/hooks/scaffold-eth"; | ||
|
|
||
| function Card({ id }: { id: number }) { | ||
| const { data: chubbiness } = useScaffoldReadContract({ | ||
| contractName: "SVGNFT", | ||
| functionName: "chubbiness", | ||
| args: [BigInt(id)] | ||
| }); | ||
|
|
||
| const { data: color } = useScaffoldReadContract({ | ||
| contractName: "SVGNFT", | ||
| functionName: "color", | ||
| args: [BigInt(id)] | ||
| }); | ||
|
|
||
| const { data: mouthLength } = useScaffoldReadContract({ | ||
| contractName: "SVGNFT", | ||
| functionName: "mouthLength", | ||
| args: [BigInt(id)] | ||
| }); | ||
|
|
||
| const removeHexPrefix = (hexString: string): string => { | ||
| if (hexString.startsWith("0x")) { | ||
| return hexString.slice(2); | ||
| } | ||
| return hexString; | ||
| } | ||
|
|
||
|
|
||
| if (!chubbiness || !color || !mouthLength) { | ||
| return ( | ||
| <div className="group relative overflow-hidden rounded-2xl shadow-2xl transform hover:scale-105 transition duration-300 ease-in-out bg-gray-800 w-full h-full max-w-[400px] max-h-[400px] aspect-square"> | ||
| <div className="absolute inset-0 bg-gradient-to-br from-pink-500 via-purple-500 to-indigo-500 opacity-25 group-hover:opacity-50 transition duration-300"></div> | ||
| <div className="absolute inset-0 flex flex-col items-center justify-center text-white p-4"> | ||
| <svg className="animate-spin h-10 w-10 mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> | ||
| <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle> | ||
| <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> | ||
| </svg> | ||
| <p className="text-lg font-semibold">Loading...</p> | ||
| <p className="text-sm mt-2">Token ID: {id}</p> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const svgString = ` | ||
| <svg width="100%" height="100%" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> | ||
| <g id="eye1"> | ||
| <ellipse stroke-width="3" ry="29.5" rx="29.5" id="svg_1" cy="154.5" cx="181.5" stroke="#000" fill="#fff" /> | ||
| <ellipse ry="3.5" rx="2.5" id="svg_3" cy="154.5" cx="173.5" stroke-width="3" stroke="#000" fill="#000000" /> | ||
| </g> | ||
| <g id="head"> | ||
| <ellipse fill="#${removeHexPrefix(color)}" stroke-width="3" cx="204.5" cy="211.80065" id="svg_5" rx="${Number(chubbiness)}" ry="51.80065" stroke="#000" /> | ||
| </g> | ||
| <g id="eye2"> | ||
| <ellipse stroke-width="3" ry="29.5" rx="29.5" id="svg_2" cy="168.5" cx="209.5" stroke="#000" fill="#fff" /> | ||
| <ellipse ry="3.5" rx="3" id="svg_4" cy="169.5" cx="208" stroke-width="3" fill="#000000" stroke="#000" /> | ||
| </g> | ||
| <g class="mouth" transform="translate(${Math.floor((810 - 9 * Number(chubbiness)) / 11)},0)"> | ||
| <path d="M 130 240 Q 165 250 ${Number(mouthLength)} 235" stroke="black" stroke-width="3" fill="transparent" /> | ||
| </g> | ||
| </svg> | ||
| `; | ||
|
|
||
| return ( | ||
| <div className="group relative overflow-hidden rounded-2xl shadow-2xl transform hover:scale-105 transition duration-300 ease-in-out w-full h-full max-w-[400px] max-h-[400px] aspect-square"> | ||
| <div className="absolute inset-0 bg-gradient-to-br from-pink-500 via-purple-500 to-indigo-500 opacity-25 group-hover:opacity-50 transition duration-300"></div> | ||
| <div className="w-full h-full z-10 relative" dangerouslySetInnerHTML={{ __html: svgString }} /> | ||
| <div className="absolute bottom-0 left-0 right-0 p-4 text-white bg-black bg-opacity-50"> | ||
| <p className="text-lg">Token ID: {id}</p> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Card; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.