Merge pull request #399 from Itheum/d-robert-feature-givebitz

givebitz  bounty feature UI

README.md

@@ -1,4 +1,5 @@
 # @itheum/explorer-dapp
+
 Itheum Explorer the public explore the Itheum protocol components.
 
 Build using the **MultiversX dApp Template**, built using [React.js](https://reactjs.org/) and [Typescript](https://www.typescriptlang.org/).
@@ -71,3 +72,7 @@ One can contribute by creating _pull requests_, or by opening _issues_ for disco
 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
 4. Push to the Branch (`git push origin feature/AmazingFeature`)
 5. Open a Pull Request
+
+## Known Issues
+
+If you see some build error in docket or other CICD services related to vite and `@rollup/rollup-linux-x64-gnu`... you will need to `git rm -r --cached ./package-lock.json` locally and make sure you dont commit `package-lock.json`

package.json

@@ -8,7 +8,7 @@
     "@fortawesome/fontawesome-svg-core": "6.5.1",
     "@fortawesome/free-solid-svg-icons": "6.5.1",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@itheum/sdk-mx-data-nft": "3.2.0-alpha.2",
+    "@itheum/sdk-mx-data-nft": "3.2.1",
     "@multiversx/sdk-core": "12.19.0",
     "@multiversx/sdk-dapp": "2.28.7",
     "@multiversx/sdk-network-providers": "2.3.0",
@@ -41,6 +41,7 @@
     "react-vertical-timeline-component": "3.6.0",
     "react-zoom-pan-pinch": "3.4.3",
     "slick-carousel": "1.8.1",
+    "simplex-noise": "4.0.1",
     "tailwind-merge": "2.2.1",
     "tailwindcss-animate": "1.0.7",
     "web-vitals": "3.5.2",

src/components/CopyAddress.tsx

@@ -5,7 +5,7 @@ import { CopyPlusIcon } from "lucide-react";
 export function CopyAddress({ address, precision = 6 }: { address: string; precision?: number }) {
   return (
     <a
-      className="line-clamp-2 text-sm leading-snug !text-sky-300 flex gap-2"
+      className="line-clamp-2 text-sm leading-snug !text-[#35d9fa] flex gap-2"
       style={{
         cursor: "pointer",
       }}
@@ -14,7 +14,7 @@ export function CopyAddress({ address, precision = 6 }: { address: string; preci
         toastSuccess("Address is copied to clipboard");
       }}>
       {precision > 0 ? address.slice(0, precision) + " ... " + address.slice(-precision) : address}
-      <CopyPlusIcon className="text-sky-300 w-4 h-4" />
+      <CopyPlusIcon className="text-[#35d9fa] w-4 h-4" />
     </a>
   );
 }

src/config.tsx

@@ -18,6 +18,11 @@ export const MARKETPLACE_DETAILS_PAGE =
     ? "https://test.datadex.itheum.io/datanfts/marketplace/"
     : "https://datadex.itheum.io/datanfts/marketplace/";
 
+export const CREATOR_PROFILE_PAGE =
+  import.meta.env.VITE_ENV_NETWORK && import.meta.env.VITE_ENV_NETWORK === EnvironmentsEnum.devnet
+    ? "https://test.datadex.itheum.io/profile/"
+    : "https://datadex.itheum.io/profile/";
+
 export const MAINNET_EXPLORER_ADDRESS = "https://explorer.multiversx.com";
 
 export const SUPPORTED_COLLECTIONS =

src/index.css

@@ -202,3 +202,27 @@ h6 {
 .animate-ping-slow {
   animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
 }
+
+.before\:translate-x-\[var\(--mouse-x\)\]::before {
+  content: var(--tw-content);
+  --tw-translate-x: var(--mouse-x);
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.before\:translate-y-\[var\(--mouse-y\)\]::before {
+  content: var(--tw-content);
+  --tw-translate-y: var(--mouse-y);
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.after\:\[background\:_radial-gradient\(250px_circle_at_var\(--mouse-x\)_var\(--mouse-y\)\2c theme\(colors\.slate\.400\)\2c transparent\)\]::after {
+  content: var(--tw-content);
+  background: radial-gradient(250px circle at var(--mouse-x) var(--mouse-y), #94a3b8, transparent);
+}
+
+.after\:\[background\:_radial-gradient\(250px_circle_at_var\(--mouse-x\)_var\(--mouse-y\)\2c theme\(colors\.slate\.400\)\2c transparent\)\]::after {
+  content: var(--tw-content);
+  background: radial-gradient(250px circle at var(--mouse-x) var(--mouse-y), #94a3b8, transparent);
+}

src/libComponents/animated/HighlightHoverEffect.ts

@@ -0,0 +1,64 @@
+export class Highlighter {
+  container: Element;
+  boxes: unknown[];
+  mouse: { x: number; y: number };
+  containerSize: { w: number; h: number };
+  constructor(containerElement: Element) {
+    this.container = containerElement;
+    this.boxes = Array.from(this.container.children);
+    this.mouse = {
+      x: 0,
+      y: 0,
+    };
+    this.containerSize = {
+      w: 0,
+      h: 0,
+    };
+    this.initContainer = this.initContainer.bind(this);
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.init();
+  }
+
+  initContainer() {
+    const containerElement = this.container as HTMLElement;
+    this.containerSize.w = containerElement.offsetWidth;
+    this.containerSize.h = containerElement.offsetHeight;
+  }
+
+  onMouseMove(event: { clientX: any; clientY: any }) {
+    const { clientX, clientY } = event;
+    const rect = this.container.getBoundingClientRect();
+    const { w, h } = this.containerSize;
+    const x = clientX - rect.left;
+    const y = clientY - rect.top;
+    const inside = x < w && x > 0 && y < h && y > 0;
+    if (inside) {
+      this.mouse.x = x;
+      this.mouse.y = y;
+      this.boxes.forEach((box: unknown) => {
+        if (typeof box === "object" && box !== null) {
+          const typedBox = box as {
+            getBoundingClientRect: () => { (): any; new (): any; left: number; top: number };
+            style: { setProperty: (arg0: string, arg1: string) => void };
+          };
+          const boxX = -(typedBox.getBoundingClientRect().left - rect.left) + this.mouse.x;
+          const boxY = -(typedBox.getBoundingClientRect().top - rect.top) + this.mouse.y;
+          typedBox.style.setProperty("--mouse-x", `${boxX}px`);
+          typedBox.style.setProperty("--mouse-y", `${boxY}px`);
+        }
+      });
+    }
+  }
+
+  init() {
+    this.initContainer();
+    window.addEventListener("resize", this.initContainer);
+    window.addEventListener("mousemove", this.onMouseMove);
+  }
+}
+
+// Init Highlighter
+const highlighters = document.querySelectorAll("[data-highlighter]");
+highlighters.forEach((highlighter) => {
+  new Highlighter(highlighter);
+});

src/libComponents/animated/TracyBeam.tsx

@@ -0,0 +1,98 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import { motion, useTransform, useScroll, useSpring } from "framer-motion";
+import { cn } from "libs/utils";
+
+export const TracingBeam = ({ children, className }: { children: React.ReactNode; className?: string }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ["start start", "end start"],
+  });
+
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [svgHeight, setSvgHeight] = useState(0);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      setSvgHeight(contentRef.current.offsetHeight);
+    }
+  }, []);
+
+  const y1 = useSpring(useTransform(scrollYProgress, [0, 0.8], [50, svgHeight]), {
+    stiffness: 500,
+    damping: 90,
+  });
+  const y2 = useSpring(useTransform(scrollYProgress, [0, 1], [50, svgHeight - 200]), {
+    stiffness: 500,
+    damping: 90,
+  });
+
+  return (
+    <motion.div ref={ref} className={cn("relative w-full max-w-4xl mx-auto h-full", className)}>
+      <div className="absolute -left-8 md:-left-8  top-3">
+        <motion.div
+          transition={{
+            duration: 0.2,
+            delay: 0.5,
+          }}
+          animate={{
+            boxShadow: scrollYProgress.get() > 0 ? "none" : "rgba(0, 0, 0, 0.24) 0px 3px 8px",
+          }}
+          className="ml-[27px] h-4 w-4 rounded-full border border-netural-200 shadow-sm flex items-center justify-center">
+          <motion.div
+            transition={{
+              duration: 0.2,
+              delay: 0.25,
+            }}
+            animate={{
+              backgroundColor: scrollYProgress.get() > 0 ? "white" : "var(--emerald-500)",
+              borderColor: scrollYProgress.get() > 0 ? "white" : "var(--emerald-600)",
+            }}
+            className="h-2 w-2  rounded-full border border-neutral-300 bg-white"
+          />
+        </motion.div>
+        <svg
+          viewBox={`0 0 20 ${svgHeight}`}
+          width="20"
+          height={svgHeight} // Set the SVG height
+          className=" ml-4 block"
+          aria-hidden="true">
+          <motion.path
+            d={`M 1 0V -36 l 18 24 V ${svgHeight * 0.8} l -18 24V ${svgHeight}`}
+            fill="none"
+            stroke="#9091A0"
+            strokeOpacity="0.16"
+            transition={{
+              duration: 10,
+            }}></motion.path>
+          <motion.path
+            d={`M 1 0V -36 l 18 24 V ${svgHeight * 0.8} l -18 24V ${svgHeight}`}
+            fill="none"
+            stroke="url(#gradient)"
+            strokeWidth="1.25"
+            className="motion-reduce:hidden"
+            transition={{
+              duration: 10,
+            }}></motion.path>
+          <defs>
+            <motion.linearGradient
+              id="gradient"
+              gradientUnits="userSpaceOnUse"
+              x1="0"
+              x2="0"
+              y1={y1} // set y1 for gradient
+              y2={y2} // set y2 for gradient
+            >
+              <stop stopColor="#35d9fa" stopOpacity="0"></stop>
+              <stop stopColor="#35d9fa"></stop>
+              <stop offset="0.325" stopColor="#18f495"></stop>
+              <stop offset="1" stopColor="#022629" stopOpacity="0"></stop>
+            </motion.linearGradient>
+          </defs>
+        </svg>
+      </div>
+      <div ref={contentRef}>{children}</div>
+    </motion.div>
+  );
+};