WIP

src/components/CollectDropButton/CollectDropButton.tsx

@@ -1,7 +1,35 @@
-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,
+  chainId,
+}: {
+  className?: string
+  address: Address
+  chainId: number
+}) => {
+  const { collect, loading } = useCollectDrop()
+
+  const handleClick = async () => {
+    const response = await collect(address, chainId)
+    if (!response) return
+    toast.success("Collected!")
+  }
+
+  return (
+    <button
+      type="button"
+      onTouchStart={handleClick}
+      onClick={handleClick}
+      className={`${className} bg-darkgray py-[3px] w-full`}
+      disabled={true}
+    >
+      {loading ? `Collecting...` : "Collect"}
+    </button>
+  )
+}
 
 export default CollectDropButton

src/components/Pages/Web3Page/BonasiSection.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 BonasiSection = ({ isPopup }) => (
   <DropCollect
@@ -9,7 +12,10 @@ const BonasiSection = ({ isPopup }) => (
     isPopup={isPopup}
     animationUrl={data[12].ipfs}
   >
-    <CollectDropButton />
+    <CollectDropButton
+      chainId={IS_TESTNET ? baseSepolia.id : base.id}
+      address={BONSAI_DROP_ADDRESS as Address}
+    />
   </DropCollect>
 )
 

src/hooks/useCollectDrop.tsx

@@ -0,0 +1,79 @@
+import { HYDROPLANING_DROP_ADDRESS, ZORA_FEE, HYDROPLANING_REWARDS_RECIPIENT } from "@/lib/consts"
+import handleTxError from "@/lib/handleTxError"
+import { useState } from "react"
+import { BigNumber } from "ethers"
+import getEncodedMinterArgs from "@/lib/zora/getEncodedMinterArgs"
+import {
+  zoraCreator1155ImplABI,
+  zoraCreatorFixedPriceSaleStrategyAddress,
+} from "@zoralabs/protocol-deployments"
+import get1155SaleStatus from "@/lib/get1155SaleStatus"
+import { Address } from "viem"
+import usePrivySendTransaction from "./usePrivySendTransaction"
+import useConnectedWallet from "./useConnectedWallet"
+import usePreparePrivyWallet from "./usePreparePrivyWallet"
+import getCollectorClient from "@/lib/zora/getCollectorClient"
+import getToken from "@/lib/zora/getToken"
+
+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
+      if (!connectedWallet) return false
+
+      setLoading(true)
+
+      const { token } = await getToken(dropAddress, '1155', tokenId, chainId)
+
+      console.log("ZIAD", token)
+
+      const collectorClient = getCollectorClient(chainId)
+      const { parameters } = await collectorClient.mint({
+        tokenContract: dropAddress,
+        mintType: '1155',
+        quantityToMint: 1,
+        minterAccount: connectedWallet,
+        tokenId,
+      })
+
+      // const response = await sendTransaction(
+      //   HYDROPLANING_DROP_ADDRESS,
+      //   chainId,
+      //   zoraCreator1155ImplABI,
+      //   "mint",
+      //   [
+      //     zoraCreatorFixedPriceSaleStrategyAddress[chainId],
+      //     1,
+      //     1,
+      //     [HYDROPLANING_REWARDS_RECIPIENT],
+      //     minterArguments,
+      //   ],
+      //   totalFee,
+      //   "HENO.WEB3",
+      //   "COLLECT",
+      // )
+      // const { error } = response as any
+      // if (error) {
+      //   setLoading(false)
+      //   return false
+      // }
+      setLoading(false)
+      return true
+    } catch (error) {
+      handleTxError(error)
+      return { error }
+    }
+  }
+
+  return {
+    collect,
+    loading,
+  }
+}
+
+export default useCollectDrop

src/lib/zora/getCollectorClient.tsx

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

src/lib/zora/getToken.tsx

@@ -0,0 +1,27 @@
+import getCollectorClient from './getCollectorClient'
+import { Address } from 'viem'
+
+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