Merge pull request #131 from SweetmanTech/tech322/web3-bonasi

Tech322/web3 bonsai

src/components/CollectDropButton/CollectDropButton.tsx

@@ -0,0 +1,7 @@
+const CollectDropButton = ({ className = "" }: { className?: string }) => (
+  <button type="button" className={`${className} bg-darkgray py-[3px] w-full`} disabled>
+    Collect
+  </button>
+)
+
+export default CollectDropButton

src/components/CollectDropButton/index.tsx

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

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/Web3Page/BonsaiSection.tsx

@@ -0,0 +1,16 @@
+import CollectDropButton from "@/components/CollectDropButton"
+import DropCollect from "@/components/DropCollect"
+import data from "@/lib/zora-drops"
+
+const BonsaiSection = ({ isPopup }) => (
+  <DropCollect
+    title={data[12].title}
+    artist={data[12].artist}
+    isPopup={isPopup}
+    animationUrl={data[12].ipfs}
+  >
+    <CollectDropButton />
+  </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/lib/consts.tsx

@@ -40,7 +40,7 @@ export const HYDROPLANING_REWARDS_RECIPIENT = IS_TESTNET
   ? "0x52d91e960e52641ee7142e2942378dda357b8685"
   : "0x61edd3496d5FF1b84F36be0922a9197f8AAC486e"
 export const BONSAI_DROP_ADDRESS = IS_TESTNET
-  ? "0x32510dB16C1aebA2A3f96fcB2EC0089ac0BB41DF"
+  ? "0x93eea2A99C0A409Dce3478D8431B8e028809b23a"
   : "0x98e929350d82Db54c0Bdb9656F4d2F65ad4ED39f"
 export const SPOTIFY_STATE_KEY = "spotify_auth_state"
 export const RELIEF_TRACK_ID = "5aDNHHNXc16VktqV1gSq23"

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