From 208ac9be410fdcdae7202ae4848a9d242d6c3586 Mon Sep 17 00:00:00 2001 From: --replace Date: Wed, 22 May 2024 19:04:40 -0400 Subject: [PATCH 1/2] fix(dapp): implement horizaontal scroll for continents card --- client/src/app/page.tsx | 66 +++++++++++++----------- client/src/components/CardSkeleton.tsx | 2 +- client/src/components/ContinentCard.tsx | 31 +++++------ client/src/hooks/useHorizontalScroll.tsx | 18 +++++++ 4 files changed, 67 insertions(+), 50 deletions(-) create mode 100644 client/src/hooks/useHorizontalScroll.tsx diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx index 26ff9c8..0943fc9 100644 --- a/client/src/app/page.tsx +++ b/client/src/app/page.tsx @@ -6,6 +6,7 @@ import ConnectButton from "@/components/ConnectButton"; import useFetchContinents from "@/hooks/useFetchAuctions"; import { Bidder } from "@/components/Bidders"; import CardSkeloton from "@/components/CardSkeleton"; +import { useHorizontalScroll } from "@/hooks/useHorizontalScroll"; export type EthereumAddress = `0x${string}`; export interface Continent { @@ -33,54 +34,57 @@ export interface Continent { export default function Home() { const { data: continents } = useFetchContinents(); + const scrollRef = useHorizontalScroll(); return ( -
- -
-
- - logo - - - logo - +
+
+
+ +
- -
-
-
- WANNA OWN A PIECE OF THE W logoRLD? -
-

- Collect unique NFTs representing Africa, Asia, Europe, North America, South America, Australia, and Antarctica -

+
+
+ WANNA OWN A PIECE OF THE W logoRLD? +
+

+ Collect unique NFTs representing Africa, Asia, Europe, North America, South America, Australia, and Antarctica +

-
+
-
-

7 Continents, 7 NFTs, 7 Owners

-

Auctioned: 4/7

+
+

7 Continents, 7 NFTs, 7 Owners

+

Auctioned: 4/7

+
-
-
+
+
{ - continents?.data && continents?.data.slice(0, 3).map((continent: Continent) => ( + continents?.data && continents?.data.map((continent: Continent) => ( )) } { - !continents?.data && Array.from({ length: 3 }).map((_, index) => ( + !continents?.data && Array.from({ length: 5 }).map((_, index) => ( )) }
- + +
+
); diff --git a/client/src/components/CardSkeleton.tsx b/client/src/components/CardSkeleton.tsx index 57a01ad..3fe598d 100644 --- a/client/src/components/CardSkeleton.tsx +++ b/client/src/components/CardSkeleton.tsx @@ -20,7 +20,7 @@ const CardSkeloton = () => {
- +
diff --git a/client/src/components/ContinentCard.tsx b/client/src/components/ContinentCard.tsx index 8af5b61..bda144b 100644 --- a/client/src/components/ContinentCard.tsx +++ b/client/src/components/ContinentCard.tsx @@ -7,9 +7,10 @@ import Tilt from "react-parallax-tilt"; import avatar from "gradient-avatar" import { Input } from "@/components/ui/input"; import { Continent, EthereumAddress } from '@/app/page'; -import { shortenAddress, transformIPFSURL } from '@/utils'; -import { useWriteContract, useSignMessage } from 'wagmi'; +import { shortenAddress, showError, transformIPFSURL } from '@/utils'; +import { useWriteContract, useSimulateContract } from 'wagmi'; import ContinentAuction from '@/contracts/ContinentAuction.json'; +import ContinentToken from '@/contracts/ContinentToken.json'; import { formatEther, parseEther } from 'viem'; import { toast } from 'sonner'; import { Label } from './ui/label'; @@ -20,8 +21,6 @@ const TOKEN_CONTRACT_ADDRESS = (process.env.NEXT_PUBLIC_TOKEN_CONTRACT_ADDRESS?. const ContinentCard = ({ continent }: { continent: Continent }) => { const highestBid = formatEther(BigInt(continent.auction.highestBid)); - const { signMessage } = useSignMessage() - const [bidAmount, setBidAmount] = React.useState(highestBid); const [startPrice, setStartPrice] = React.useState(""); const [bidIncrement, setBidIncrement] = React.useState(0.001); @@ -38,18 +37,7 @@ const ContinentCard = ({ continent }: { continent: Continent }) => { onError(error, variables, context) { console.log(error, variables, context) console.error(error.message) - if (error.message.includes("insufficient funds")) { - toast.error("Insufficient funds", { - description: "You do not have enough funds to place this bid. Please top up your wallet and try again. The cost of transaction is calculated as `gas * gas fee + value`", - position: "top-left", - }) - } - if (error.message.includes("Ownable: caller is not the owner")) { - toast.error("Transaction failed", { - description: "You can start an auction only if you own the continent", - position: "top-left", - }) - } + showError(error.message) }, } }) @@ -67,14 +55,21 @@ const ContinentCard = ({ continent }: { continent: Continent }) => { const createAuction = () => { writeContract({ abi: ContinentAuction.abi, - address: AUCTION_CONTRACT_ADDRESS, + // address: AUCTION_CONTRACT_ADDRESS, + address: "0x0686b68Ed021883D5aCEeEE52c93E93937e1ed81", functionName: 'createAuction', args: [BigInt(continent.tokenId), parseEther(startPrice), parseEther(bidIncrement.toString()), BigInt(duration)], }) } const buyCitizenship = async () => { - //todo: implement buy citizenship + writeContract({ + abi: ContinentToken.abi, + address: "0x8148b0Ee040B1CFBb573bE82DE3704A20C139ccE", + functionName: 'buyCitizenship', + args: [BigInt(continent.tokenId)], + value: parseEther("0.001") + }) } return ( diff --git a/client/src/hooks/useHorizontalScroll.tsx b/client/src/hooks/useHorizontalScroll.tsx new file mode 100644 index 0000000..692e1f7 --- /dev/null +++ b/client/src/hooks/useHorizontalScroll.tsx @@ -0,0 +1,18 @@ +import { useEffect, useRef } from "react"; + +export function useHorizontalScroll() { + const elRef = useRef(null); + useEffect(() => { + const el = elRef.current; + if (el) { + const onWheel = (e: WheelEvent) => { + if (e.deltaY == 0) return; + e.preventDefault(); + el.scrollBy(e.deltaY, 0); + }; + el.addEventListener("wheel", onWheel); + return () => el.removeEventListener("wheel", onWheel); + } + }, []); + return elRef; +} From 54cc021ea252001a109a50e1fe96b3c90bfab49c Mon Sep 17 00:00:00 2001 From: --replace Date: Wed, 22 May 2024 19:06:15 -0400 Subject: [PATCH 2/2] fix(dapp): implement horizaontal scroll for continents card --- client/src/utils/index.ts | 45 +++++++++++++++++++++++++++++++++++---- 1 file changed, 41 insertions(+), 4 deletions(-) diff --git a/client/src/utils/index.ts b/client/src/utils/index.ts index 2660dac..a91f3fe 100644 --- a/client/src/utils/index.ts +++ b/client/src/utils/index.ts @@ -1,5 +1,6 @@ +import { toast } from "sonner"; + export function shortenAddress(address: string) { - console.log(address) let shortenedAddress = address ? address.slice(0, 5) + "..." + address.slice(-5) : ""; return shortenedAddress; } @@ -25,7 +26,6 @@ export const transformIPFSURL = (url: string) => { }; - type HttpMethod = "GET" | "POST" | "PUT" | "DELETE"; export type FetchAPIResponse = { success: boolean; @@ -33,7 +33,6 @@ export type FetchAPIResponse = { message?: string; }; - export const fetchAPI = async ( path: string, method: HttpMethod = "GET", @@ -49,4 +48,42 @@ export const fetchAPI = async ( const data = await response.json() as T; return data as FetchAPIResponse;; -}; \ No newline at end of file +}; + +export const showError = (message: string ) => { + + if (message.includes("insufficient funds")) { + toast.error("Insufficient funds", { + description: "You do not have enough funds to place this bid. Please top up your wallet and try again. The cost of transaction is calculated as `gas * gas fee + value`", + position: "top-left", + }) + } + + if (message.includes("Ownable: caller is not the owner")) { + toast.error("Transaction failed", { + description: "You can start an auction only if you own the continent", + position: "top-left", + }); + } + + if (message.includes("Continent does not exist")) { + toast.error("Transaction failed", { + description: "Continent does not exist", + position: "top-left", + }); + } + + if (message.includes("You already own this continent")) { + toast.error("Transaction failed", { + description: "You already own this continent", + position: "top-left", + }); + } + + if (message.includes("Not enough Ether sent to cover citizenship tax")) { + toast.error("Transaction failed", { + description: "Not enough Ether sent to cover citizenship tax", + position: "top-left", + }); + } +} \ No newline at end of file