Merge pull request #133 from SweetmanTech/test

Test

package.json

@@ -23,14 +23,13 @@
     "@pushprotocol/uiweb": "^1.3.8",
     "@stackso/js-core": "^0.3.1",
     "@vercel/analytics": "^1.0.1",
-    "@zoralabs/protocol-deployments": "^0.1.8",
-    "@zoralabs/universal-minter": "^0.2.16",
-    "@zoralabs/zorb": "^0.1.0",
+    "@zoralabs/protocol-deployments": "^0.2.2",
+    "@zoralabs/protocol-sdk": "^0.9.0",
     "axios": "^1.2.1",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "5.0.0",
     "firebase": "10.3.0",
     "framer-motion": "^9.0.2",
     "joi": "^17.12.0",
@@ -59,6 +58,7 @@
     "eslint-config-next": "14.2.4",
     "eslint-config-prettier": "^8.5.0",
     "postcss": "^8",
+    "prettier": "3.3.3",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }

src/components/CollectDropButton/CollectDropButton.tsx

@@ -0,0 +1,37 @@
+import { toast } from "react-toastify"
+import { Address } from "viem"
+import useCollectDrop from "@/hooks/useCollectDrop"
+
+const CollectDropButton = ({
+  className = "",
+  address,
+  tokenId,
+  chainId,
+}: {
+  className?: string
+  address: Address
+  tokenId: number
+  chainId: number
+}) => {
+  const { collect, loading } = useCollectDrop()
+
+  const handleClick = async () => {
+    const response = await collect(address, tokenId, chainId)
+    if (!response) return
+    toast.success("Collected!")
+  }
+
+  return (
+    <button
+      type="button"
+      onTouchStart={handleClick}
+      onClick={handleClick}
+      className={`${className} bg-darkgray py-[3px] w-full`}
+      disabled={loading}
+    >
+      {loading ? `Collecting...` : "Collect"}
+    </button>
+  )
+}
+
+export default CollectDropButton

src/components/CollectDropButton/index.tsx

@@ -0,0 +1,3 @@
+import CollectDropButton from "./CollectDropButton"
+
+export default CollectDropButton

src/components/Core/Icon/index.tsx

@@ -66,10 +66,10 @@ function Icon({
           size <= 20
             ? styles.sizes.mini
             : size < 25
-            ? styles.sizes.small
-            : size < 40
-            ? styles.sizes.medium
-            : styles.sizes.large
+              ? styles.sizes.small
+              : size < 40
+                ? styles.sizes.medium
+                : styles.sizes.large
         } 
         ${!noHighlights && styles?.variants?.[variant]?.highlight} 
         ${className}

src/components/Core/TextArea.tsx

@@ -55,8 +55,8 @@ function TextArea({
         className={`text-gray_1 w-full border-[2px] !border-gray_1 bg-black
           focus:ring-0 focus:border-gray_1 
           ${className || ""} ${
-          hookToForm && fieldError && fieldError?.message ? clasNameError : ""
-        }`}
+            hookToForm && fieldError && fieldError?.message ? clasNameError : ""
+          }`}
         {...(!hookToForm && {
           value,
           onChange,

src/components/DropCollect.tsx

@@ -0,0 +1,20 @@
+const DropCollect = ({ isPopup, children, title, artist, animationUrl }) => (
+  <div className="w-full flex flex-col gap-1.5">
+    <video
+      src={animationUrl}
+      preload="auto"
+      controls
+      playsInline
+      webkit-playsinline
+      x5-playsinline
+      muted
+      className={`${isPopup ? "h-[200px]" : "h-[300px]"}`}
+    />
+    {children}
+    <span className={`uppercase text-[12px] ${isPopup ? "md:text-[14px]" : "md:text-[16px]"}`}>
+      {title} By {artist}
+    </span>
+  </div>
+)
+
+export default DropCollect

src/components/Pages/BonsaiContent/BonsaiContent.tsx

@@ -0,0 +1,36 @@
+import getIpfsLink from "@/lib/getIpfsLink"
+import { BONSAI } from "@/lib/consts"
+import RecBar from "../../RecBar"
+import useIsMobile from "../../../hooks/useIsMobile"
+
+const BonsaiContent = () => {
+  const isMobile = useIsMobile()
+
+  return (
+    <div className="p-[5px] md:p-[10px] border-[2px] border-gray_1 h-full">
+      <div
+        className="border-[1px] border-darkgray text-gray_1 font-dresden 
+            py-[25px] text-center
+            flex items-center justify-center text-[16px] relative h-full
+            text-[12px] md:text-[16px] relative"
+      >
+        <div
+          className="h-fit max-h-full overflow-y-auto text-[12px] md:text-[16px]
+            px-[15px] md:px-[20px] flex flex-col gap-y-[5px] md:gap-y-[20px]"
+        >
+          {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+          <video
+            src={getIpfsLink(BONSAI)}
+            width={isMobile ? 180 : 200}
+            height={isMobile ? 125 : 230}
+            controls
+            autoPlay
+          />
+        </div>
+        <RecBar />
+      </div>
+    </div>
+  )
+}
+
+export default BonsaiContent

src/components/Pages/BonsaiContent/index.tsx

@@ -0,0 +1,3 @@
+import BonsaiContent from "./BonsaiContent"
+
+export default BonsaiContent

src/components/Pages/LandingPage/LandingPage.tsx

@@ -8,13 +8,13 @@ import { SCREENS } from "@/lib/screens"
 import { usePopupWidget } from "@/providers/PopupWidgetProvider"
 import LandingCard from "../../LandingCard"
 import Layout from "../../Layout"
-import YoutubeContent from "../YoutubeContent"
+import BonsaiContent from "../BonsaiContent"
 
 const LandingPage = () => {
   const { openPopUp } = usePopupWidget() as any
   const { entered } = usePageLoad()
   const isMobile = useIsMobile()
-  const [isOpenYoutubeModal, setIsOpenYoutubeModal] = useState<any>(true)
+  const [isBonsaiOpen, setIsBonsaiOpen] = useState<any>(true)
 
   return (
     <Layout type={isMobile ? "mobile" : "base"}>
@@ -59,13 +59,13 @@ const LandingPage = () => {
           Play Relief
         </a>
       )}
-      {isOpenYoutubeModal && (
+      {isBonsaiOpen && (
         <DraggableModal
           href="/"
-          handleClose={() => setIsOpenYoutubeModal(!isOpenYoutubeModal)}
-          isVisible={isOpenYoutubeModal}
+          handleClose={() => setIsBonsaiOpen(!isBonsaiOpen)}
+          isVisible={isBonsaiOpen}
         >
-          <YoutubeContent />
+          <BonsaiContent />
         </DraggableModal>
       )}
     </Layout>

src/components/Pages/Web3Page/BonsaiSection.tsx

@@ -0,0 +1,23 @@
+import CollectDropButton from "@/components/CollectDropButton"
+import DropCollect from "@/components/DropCollect"
+import { BONSAI_DROP_ADDRESS, IS_TESTNET } from "@/lib/consts"
+import data from "@/lib/zora-drops"
+import { Address } from "viem"
+import { base, baseSepolia } from "viem/chains"
+
+const BonsaiSection = ({ isPopup }) => (
+  <DropCollect
+    title={data[12].title}
+    artist={data[12].artist}
+    isPopup={isPopup}
+    animationUrl={data[12].ipfs}
+  >
+    <CollectDropButton
+      chainId={IS_TESTNET ? baseSepolia.id : base.id}
+      tokenId={3}
+      address={BONSAI_DROP_ADDRESS as Address}
+    />
+  </DropCollect>
+)
+
+export default BonsaiSection

src/components/Pages/Web3Page/Trailer.tsx

@@ -1,4 +1,5 @@
 import ArcadeSection from "./ArcadeSection"
+import BonsaiSection from "./BonsaiSection"
 import DropSection from "./DropSection"
 import HydroplaningSection from "./HydroplaningSection"
 import NeyborsSection from "./NeyborsSection"
@@ -8,6 +9,7 @@ const Trailer = ({ isPopup = false }) => (
   <div className="h-full overflow-y-auto w-full">
     <div className={`flex flex-col items-center gap-y-[10px] ${!isPopup && "md:gap-y-[20px]"}`}>
       <div className="flex flex-col gap-y-[10px] h-full overflow-y-auto pr-2">
+        <BonsaiSection isPopup={isPopup} />
         <HydroplaningSection isPopup={isPopup} />
         <TopArbitrumSection isPopup={isPopup} />
         <DropSection isPopup={isPopup} />

src/hooks/useCollectDrop.tsx

@@ -0,0 +1,65 @@
+import handleTxError from "@/lib/handleTxError"
+import { useState } from "react"
+import { Address } from "viem"
+import getCollectorClient from "@/lib/zora/getCollectorClient"
+import getToken from "@/lib/zora/getToken"
+import usePrivySendTransaction from "./usePrivySendTransaction"
+import useConnectedWallet from "./useConnectedWallet"
+import usePreparePrivyWallet from "./usePreparePrivyWallet"
+
+const useCollectDrop = () => {
+  const { prepare } = usePreparePrivyWallet()
+  const { connectedWallet } = useConnectedWallet()
+  const { sendTransaction } = usePrivySendTransaction()
+  const [loading, setLoading] = useState(false)
+
+  const collect = async (dropAddress: Address, tokenId: number, chainId: number) => {
+    try {
+      if (!(await prepare(chainId))) return false
+      setLoading(true)
+
+      const { token }: any = await getToken(dropAddress, "1155", tokenId, chainId)
+      const { salesConfig } = token
+      const { mintFee } = salesConfig
+
+      const collectorClient = getCollectorClient(chainId)
+      const { parameters } = await collectorClient.mint({
+        tokenContract: dropAddress,
+        mintType: "1155",
+        quantityToMint: 1,
+        minterAccount: connectedWallet as Address,
+        tokenId,
+      })
+
+      const { abi, functionName, args, address: minter } = parameters
+
+      const response = await sendTransaction(
+        minter,
+        chainId,
+        abi,
+        functionName,
+        args,
+        mintFee,
+        "HENO.WEB3",
+        "COLLECT",
+      )
+      const { error } = response as any
+      if (error) {
+        setLoading(false)
+        return false
+      }
+      setLoading(false)
+      return response
+    } catch (error) {
+      handleTxError(error)
+      return { error }
+    }
+  }
+
+  return {
+    collect,
+    loading,
+  }
+}
+
+export default useCollectDrop

src/hooks/usePreparePrivyWallet.tsx

@@ -4,10 +4,10 @@ import useConnectedWallet from "./useConnectedWallet"
 
 const usePreparePrivyWallet = () => {
   const { ready, user, login, authenticated } = usePrivy()
-  const { wallet } = useConnectedWallet() as any
+  const { wallet, connectedWallet } = useConnectedWallet() as any
 
   const prepare = async (chainId: any = CHAIN_ID) => {
-    if (!user && ready && !authenticated) {
+    if (!user && ready && !authenticated && !connectedWallet) {
       login()
       return false
     }

src/lib/consts.tsx

@@ -39,6 +39,9 @@ export const HYDROPLANING_DROP_ADDRESS = IS_TESTNET
 export const HYDROPLANING_REWARDS_RECIPIENT = IS_TESTNET
   ? "0x52d91e960e52641ee7142e2942378dda357b8685"
   : "0x61edd3496d5FF1b84F36be0922a9197f8AAC486e"
+export const BONSAI_DROP_ADDRESS = IS_TESTNET
+  ? "0x93eea2A99C0A409Dce3478D8431B8e028809b23a"
+  : "0x98e929350d82Db54c0Bdb9656F4d2F65ad4ED39f"
 export const SPOTIFY_STATE_KEY = "spotify_auth_state"
 export const RELIEF_TRACK_ID = "5aDNHHNXc16VktqV1gSq23"
 export const HENO_ARTIST_ID = "3mr6jeVpPIXBp8IMMb60aD"
@@ -60,7 +63,7 @@ export const ONE_MILLISEOND = 1000
 
 export const SYSTEM_COMMERCIAL =
   "ipfs://Qmccf1fZeNZc9nWwvq3a5aiQr3bCr5VNCi3PaUbhrUnpRJ/SYSTEM%20COMMERCIAL.mp4"
-
+export const BONSAI = "ipfs://QmeiQuQSv8HWsAmZxzX666V26KbknVi82qQMq5sibGhSHr"
 export const COLLECTIONS = [
   {
     collectionAddress: ZORA_DROP_ADDRESS,
@@ -103,3 +106,22 @@ export const COLLECTIONS = [
     type: "ERC1155",
   },
 ]
+
+export const zoraUniversalMinterAddress = {
+  1: "0x308E190d70c7d1C6Ed569554bCe73Dc3F4ad359A",
+  5: "0x1Eb7Bf3a08784D7cB08CC2AE1448012C0c02bDa2",
+  10: "0x97eb05B8db496B12244BCcf17CF377d00a99b67a",
+  420: "0x39C51a7957651ea176733F19125BD9c253894D6F",
+  424: "0xF82286760a953D2Bad7D6F2F0da458Ac20f955D3",
+  999: "0xD9bC36841C259f07924e73cF08d5a2c92d53639B",
+  8453: "0x308E190d70c7d1C6Ed569554bCe73Dc3F4ad359A",
+  42161: "0xC6899816663891D7493939d74d83cb7f2BBcBB16",
+  58008: "0xE9BaDfb9a1658cDF67D8c4631a7f22610C013319",
+  81457: "0xC6899816663891D7493939d74d83cb7f2BBcBB16",
+  84531: "0x418B87c2C9579d27FC3D66605545AB9889737E60",
+  421614: "0x308E190d70c7d1C6Ed569554bCe73Dc3F4ad359A",
+  7777777: "0xF482C51346f3c77673dc619F243Eb8B09E9A954E",
+  11155111: "0x0ef82DaB14798E63F1B99479Ba689e3f6A6fEb6C",
+  168587773: "0xa718BD919eeA529ac75EEf2cf33363AF211f09f4",
+  999999999: "0xD662FB0fB00261C039441EF49Dbab154d7c533bD",
+}

src/lib/getIpfsLink.ts

@@ -1,6 +1,6 @@
 const getIpfsLink = (hash: string) =>
   hash?.indexOf?.("ipfs://") > -1
-    ? hash.replace("ipfs://", "https://cloudflare-ipfs.com/ipfs/")
+    ? hash.replace("ipfs://", "https://ipfs.decentralized-content.com/ipfs/")
     : hash
 
 export default getIpfsLink

src/lib/zora-drops.ts

@@ -71,6 +71,11 @@ const data = [
     title: "Hydroplaning Music Video (Heno. x Mick Jenkins)",
     startedAt: "August 06, 2024",
   },
+  {
+    ipfs: "https://ipfs.decentralized-content.com/ipfs/QmeiQuQSv8HWsAmZxzX666V26KbknVi82qQMq5sibGhSHr",
+    artist: "heno",
+    title: "Heno., Mad Keys - Lemons Made Better (Snippet)",
+    startedAt: "October 09, 2024",
+  },
 ]
-
 export default data

src/lib/zora/getCollectorClient.tsx

@@ -0,0 +1,14 @@
+import { createCollectorClient } from "@zoralabs/protocol-sdk"
+import { getPublicClient } from "../clients"
+
+const getCollectorClient = (chainId: number) => {
+  const publicClient = getPublicClient(chainId) as any
+  const collectorClient = createCollectorClient({
+    chainId,
+    publicClient,
+  })
+
+  return collectorClient
+}
+
+export default getCollectorClient