Tech322/bonasi mint

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

@@ -1,7 +1,37 @@
-const CollectDropButton = ({ className = "" }: { className?: string }) => (
-  <button type="button" className={`${className} bg-darkgray py-[3px] w-full`} disabled>
-    Collect
-  </button>
-)
+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/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/Pages/Web3Page/BonsaiSection.tsx

@@ -1,6 +1,9 @@
 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
@@ -9,7 +12,11 @@ const BonsaiSection = ({ isPopup }) => (
     isPopup={isPopup}
     animationUrl={data[12].ipfs}
   >
-    <CollectDropButton />
+    <CollectDropButton
+      chainId={IS_TESTNET ? baseSepolia.id : base.id}
+      tokenId={3}
+      address={BONSAI_DROP_ADDRESS as Address}
+    />
   </DropCollect>
 )
 

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

@@ -106,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/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

src/lib/zora/getToken.tsx

@@ -0,0 +1,27 @@
+import { Address } from "viem"
+import getCollectorClient from "./getCollectorClient"
+
+const getToken = async (
+  collectionAddress: Address,
+  mintType: any,
+  tokenId: any,
+  chainId: number,
+) => {
+  const collectorClient = getCollectorClient(chainId)
+
+  const tokenInfo: any = {
+    tokenContract: collectionAddress,
+    mintType,
+  }
+
+  if (mintType === "1155") tokenInfo.tokenId = tokenId
+
+  const { token, prepareMint } = await collectorClient.getToken(tokenInfo)
+
+  return {
+    token,
+    prepareMint,
+  }
+}
+
+export default getToken

src/lib/zora/getUniversalMinter.tsx

@@ -1,4 +1,4 @@
-import { zoraUniversalMinterAddress } from "@zoralabs/universal-minter"
+import { zoraUniversalMinterAddress } from "@/lib/consts"
 
 const getUniversalMinter = (chainId) =>
   zoraUniversalMinterAddress[chainId as keyof typeof zoraUniversalMinterAddress]

src/styles/globals.css

@@ -33,8 +33,18 @@ body {
   background-color: black;
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
-    Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
 }
 
 body::-webkit-scrollbar {

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2020",
     "lib": [
       "dom",
       "dom.iterable",