diff --git a/packages/hardhat/deploy/02_deploy_loogie_auction.ts b/packages/hardhat/deploy/02_deploy_loogie_auction.ts index 2a0aa20..77d30ce 100644 --- a/packages/hardhat/deploy/02_deploy_loogie_auction.ts +++ b/packages/hardhat/deploy/02_deploy_loogie_auction.ts @@ -18,11 +18,11 @@ const deployLoogieActionContract: DeployFunction = async function (hre: HardhatR } const [hour, minBidIncrementPercentage] = [3600, 5]; - const duration = hour / 12; + const duration = hour / 2; const loogieAuction = await deploy("LoogieAuction", { from: deployer, - args: [duration, hour, minBidIncrementPercentage, weth, loogieNftAddress], + args: [duration, 0, minBidIncrementPercentage, weth, loogieNftAddress], log: true, autoMine: true, }); diff --git a/packages/nextjs/app/collection/[id]/page.tsx b/packages/nextjs/app/collection/[id]/page.tsx new file mode 100644 index 0000000..70d3f60 --- /dev/null +++ b/packages/nextjs/app/collection/[id]/page.tsx @@ -0,0 +1,58 @@ +"use client"; + +import { useParams } from "next/navigation"; +import { gql, useQuery } from "@apollo/client"; +import type { NextPage } from "next"; +import { Auction } from "~~/components/loogies/auction/Auction"; + +const LOOGIE_GRAPHQL = gql` + query GetLoogieData($id: Int!) { + loogie(id: $id) { + id + chubbiness + color + mouthLength + } + auction(id: $id) { + amount + } + bids(first: 6, orderBy: amount, orderDirection: desc) { + id + amount + bidder { + id + } + auction { + endTime + startTime + id + amount + } + } + } +`; + +const CollectionId: NextPage = () => { + const router = useParams(); + let slug: number | undefined; + if (Array.isArray(router.id)) { + slug = parseInt(router.id[0]); + } else { + slug = parseInt(router.id); + } + const { data: loogiesData } = useQuery(LOOGIE_GRAPHQL, { + variables: { id: slug }, + pollInterval: 1000, + }); + console.log(slug, typeof slug, "hello"); + + return ( + <> +
+ +
+ + ); +}; + +export default CollectionId; diff --git a/packages/nextjs/app/collection/page.tsx b/packages/nextjs/app/collection/page.tsx index 731d4e3..9e335e3 100644 --- a/packages/nextjs/app/collection/page.tsx +++ b/packages/nextjs/app/collection/page.tsx @@ -1,5 +1,6 @@ "use client"; +import Link from "next/link"; import { gql, useQuery } from "@apollo/client"; import type { NextPage } from "next"; import { Card } from "~~/components/loogies/Card"; @@ -12,18 +13,11 @@ const Collection: NextPage = () => { chubbiness, color mouthLength - }, - bids(first:2){ - id,amount, bidder { - id - }, auction { - endTime, - startTime, - id - amount - } + owner { + id } } + } `; const LOOGIE_GQL = gql(LOOGIE_GRAPHQL); @@ -32,17 +26,19 @@ const Collection: NextPage = () => { return ( <>
-
+
{loogiesData && loogiesData?.loogies?.map((loogie: any, index: number) => { return ( - + + + ); })}
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx index 6f23f7e..13e720c 100644 --- a/packages/nextjs/app/page.tsx +++ b/packages/nextjs/app/page.tsx @@ -14,6 +14,7 @@ const LOOGIE_GRAPHQL = gql` } auction(id: $id) { amount + endTime } bids(first: 6, orderBy: amount, orderDirection: desc) { id @@ -33,7 +34,7 @@ const LOOGIE_GRAPHQL = gql` const Home: NextPage = () => { const { data: loogiesData } = useQuery(LOOGIE_GRAPHQL, { - variables: { id: 2 }, + variables: { id: 4 }, pollInterval: 1000, }); diff --git a/packages/nextjs/components/assets/LoogiesLogo.tsx b/packages/nextjs/components/assets/LoogiesLogo.tsx index 3ec6a88..71c2e6f 100644 --- a/packages/nextjs/components/assets/LoogiesLogo.tsx +++ b/packages/nextjs/components/assets/LoogiesLogo.tsx @@ -1,88 +1,29 @@ export const LoogiesLogo = ({ className }: { className?: string }) => { return ( - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + ); }; diff --git a/packages/nextjs/components/loogies/Card.tsx b/packages/nextjs/components/loogies/Card.tsx index 1b20bab..b41a8a6 100644 --- a/packages/nextjs/components/loogies/Card.tsx +++ b/packages/nextjs/components/loogies/Card.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { Address } from "../scaffold-eth"; import { RenderLoogie } from "./utils"; import useHexToColor from "~~/hooks/loogie/useHexToColor"; @@ -7,20 +8,30 @@ type CardProps = { chubbiness: number; mouthLength: number; color: string; + ownerAddress?: string; }; -export const Card: React.FC = ({ id, chubbiness, mouthLength, color }) => { +export const Card: React.FC = ({ id, chubbiness, mouthLength, color, ownerAddress }) => { return (
- +

Loogie #{id}

This Loogie is the color #f1c55f with a chubbiness of {chubbiness} and mouth length of {mouthLength}!!!

+ {ownerAddress &&
}
diff --git a/packages/nextjs/components/loogies/auction/Auction.tsx b/packages/nextjs/components/loogies/auction/Auction.tsx index 2599b1b..52999fb 100644 --- a/packages/nextjs/components/loogies/auction/Auction.tsx +++ b/packages/nextjs/components/loogies/auction/Auction.tsx @@ -2,6 +2,7 @@ import React, { useState } from "react"; import Image from "next/image"; import { Modal } from "../Modal"; import { AuctionBidLists } from "./AuctionBidLists"; +import { AuctionBidPreview } from "./AuctionBidPreview"; import { AuctionDetails } from "./AuctionDetails"; import { ethers } from "ethers"; import LoogieComponent from "~~/components/loogies/Loogie"; @@ -10,6 +11,7 @@ import { useScaffoldContractWrite } from "~~/hooks/scaffold-eth"; type AuctionProps = { loogiesData: any; + auctionData?: any; }; export const Auction: React.FC = ({ loogiesData }) => { @@ -27,7 +29,7 @@ export const Auction: React.FC = ({ loogiesData }) => { const { writeAsync: bid } = useScaffoldContractWrite({ contractName: "LoogieAuction", functionName: "createBid", - args: [BigInt(1)], + args: [BigInt(4)], value: currentBid ? ethers.parseEther(currentBid) : undefined, }); @@ -36,18 +38,25 @@ export const Auction: React.FC = ({ loogiesData }) => { bid(); }; + const LoogieAuctionDetails = + loogiesData && loogiesData.loogie ? ( + + ) : ( +

Loading Auction details...

+ ); + return ( -
+
loogie picker
-
- +
+ {LoogieAuctionDetails}
setCurrentBid(amount)} value={currentBid} disabled={false} /> @@ -56,13 +65,13 @@ export const Auction: React.FC = ({ loogiesData }) => {
- {/* Button to show all bids */} - + {/* Preview bids */} + {loogiesData && loogiesData.loogie && ( + + )}
-
+
{loogiesData && loogiesData.loogie && }
diff --git a/packages/nextjs/components/loogies/auction/AuctionBidLists.tsx b/packages/nextjs/components/loogies/auction/AuctionBidLists.tsx index 3a5a443..b7cbb3c 100644 --- a/packages/nextjs/components/loogies/auction/AuctionBidLists.tsx +++ b/packages/nextjs/components/loogies/auction/AuctionBidLists.tsx @@ -18,7 +18,10 @@ export const AuctionBidLists: React.FC = ({ bids }) => { <> {bids.length > 0 ? ( bids.map((bid, index) => ( - +
+ {" "} + +
)) ) : (
diff --git a/packages/nextjs/components/loogies/auction/AuctionBidPreview.tsx b/packages/nextjs/components/loogies/auction/AuctionBidPreview.tsx new file mode 100644 index 0000000..e40e28a --- /dev/null +++ b/packages/nextjs/components/loogies/auction/AuctionBidPreview.tsx @@ -0,0 +1,40 @@ +import React from "react"; +import { AuctionBids } from "./AuctionBids"; +import { formatEther } from "@ethersproject/units"; + +type Bid = { + bidder: { + id: string; + }; + amount: number; +}; + +type AuctionBidListsProps = { + bids: Bid[]; + handleOpenModal: () => void; +}; + +export const AuctionBidPreview: React.FC = ({ bids, handleOpenModal }) => { + return ( +
+
+ {bids.length > 0 ? ( + bids + .slice(0, 2) + .map((bid, index) => ( + + )) + ) : ( +
+ No bid has been made for this Loogie yet. +
+ )} +
+ + {/* Button to show all bids */} + +
+ ); +}; diff --git a/packages/nextjs/components/loogies/auction/AuctionBids.tsx b/packages/nextjs/components/loogies/auction/AuctionBids.tsx index 2bd19ec..3027669 100644 --- a/packages/nextjs/components/loogies/auction/AuctionBids.tsx +++ b/packages/nextjs/components/loogies/auction/AuctionBids.tsx @@ -5,7 +5,7 @@ import { Address } from "~~/components/scaffold-eth"; export const AuctionBids = ({ address, amount }: { address: string; amount: BigNumberish }) => { console.log(address, amount); return ( -
+

{amount.toString()} Ξ

diff --git a/packages/nextjs/components/loogies/auction/AuctionDetails.tsx b/packages/nextjs/components/loogies/auction/AuctionDetails.tsx index 859fb08..15007dd 100644 --- a/packages/nextjs/components/loogies/auction/AuctionDetails.tsx +++ b/packages/nextjs/components/loogies/auction/AuctionDetails.tsx @@ -1,34 +1,10 @@ import React from "react"; import { Countdown } from "./Countdown"; -import { gql, useQuery } from "@apollo/client"; import { formatEther } from "@ethersproject/units"; -export const AuctionDetails = ({ - name, - currentBid, - deadline, -}: { - name: string; - currentBid: number; - deadline: string; -}) => { - const LOOGIE_GRAPHQL = ` - {loogie(id:1){ - id, - }, - auction(id:1){ - amount - endTime - } -} -`; - - const LOOGIE_GQL = gql(LOOGIE_GRAPHQL); - console.log(deadline); - const { data: loogiesData } = useQuery(LOOGIE_GQL, { pollInterval: 1000 }); - +export const AuctionDetails = ({ name, currentBid, auction }: { name: string; currentBid: number; auction: any }) => { const formattedEndDate = (endDate: string | number) => { - if (endDate && loogiesData && loogiesData.auction) { + if (endDate) { const unixTimeInMilliseconds = Number(endDate) * 1000; const auctionEndDate = new Date(unixTimeInMilliseconds); return auctionEndDate.toISOString(); @@ -37,7 +13,7 @@ export const AuctionDetails = ({ } }; - console.log(loogiesData); + console.log(auction, "hi"); return (
@@ -51,14 +27,14 @@ export const AuctionDetails = ({

Current Bid

{currentBid !== undefined ? ( -

Ξ {formatEther(currentBid)}

+

Ξ {formatEther(auction.amount)}

) : ( )}

Auction Ends At

- {loogiesData && } +
diff --git a/packages/nextjs/components/loogies/utils.tsx b/packages/nextjs/components/loogies/utils.tsx index 6c35b3f..69d3e8a 100644 --- a/packages/nextjs/components/loogies/utils.tsx +++ b/packages/nextjs/components/loogies/utils.tsx @@ -7,6 +7,7 @@ export function RenderLoogie({ mouthLength, width = 400, height = 400, + className, }: { id: string; color: string; @@ -14,10 +15,11 @@ export function RenderLoogie({ mouthLength: number; width?: number; height?: number; + className?: string; }) { return (