Merge pull request #202 from Itheum/d-robert-1.7.0

d-robert 1.7.0

package.json

@@ -5,52 +5,52 @@
   "author": "Itheum",
   "license": "GPL-3.0-or-later",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.1.0",
-    "@fortawesome/free-solid-svg-icons": "6.1.0",
-    "@fortawesome/react-fontawesome": "0.1.18",
-    "@headlessui/react": "1.7.15",
+    "@fortawesome/fontawesome-svg-core": "6.4.2",
+    "@fortawesome/free-solid-svg-icons": "6.4.2",
+    "@fortawesome/react-fontawesome": "0.2.0",
+    "@headlessui/react": "1.7.17",
     "@itheum/sdk-mx-data-nft": "1.2.0",
-    "@multiversx/sdk-core": "12.8.0",
-    "@multiversx/sdk-dapp": "2.20.1",
+    "@multiversx/sdk-core": "12.9.0",
+    "@multiversx/sdk-dapp": "2.22.1",
     "@multiversx/sdk-network-providers": "2.0.0",
-    "@radix-ui/react-dialog": "1.0.4",
-    "@radix-ui/react-dropdown-menu": "2.0.5",
-    "@radix-ui/react-navigation-menu": "1.1.3",
+    "@radix-ui/react-dialog": "1.0.3",
+    "@radix-ui/react-dropdown-menu": "2.0.6",
+    "@radix-ui/react-navigation-menu": "1.1.4",
     "@radix-ui/react-slot": "1.0.2",
     "@radix-ui/react-switch": "1.0.3",
-    "@types/react-modal": "3.16.0",
-    "axios": "0.24.0",
+    "@types/react-modal": "3.16.1",
+    "axios": "1.5.1",
     "bootstrap": "4.6.2",
     "chart.js": "4.4.0",
     "chartjs-plugin-zoom": "2.0.1",
     "class-variance-authority": "0.7.0",
     "clsx": "2.0.0",
     "d3": "7.8.5",
-    "dompurify": "3.0.5",
-    "lucide-react": "0.265.0",
+    "dompurify": "3.0.6",
+    "lucide-react": "0.284.0",
     "moment": "2.29.4",
     "moment-timezone": "0.5.43",
     "node": "19.7.0",
     "react": "18.2.0",
-    "react-bootstrap": "2.7.4",
+    "react-bootstrap": "2.9.0",
     "react-calendar-heatmap": "1.9.0",
     "react-chartjs-2": "5.2.0",
     "react-dom": "18.2.0",
-    "react-hot-toast": "2.4.0",
-    "react-icons": "4.8.0",
-    "react-inlinesvg": "3.0.2",
+    "react-hot-toast": "2.4.1",
+    "react-icons": "4.11.0",
+    "react-inlinesvg": "3.0.3",
     "react-modal": "3.16.1",
-    "react-pdf": "7.3.3",
-    "react-router-dom": "6.14.2",
+    "react-pdf": "7.4.0",
+    "react-router-dom": "6.16.0",
     "react-slick": "0.29.0",
-    "react-tooltip": "5.11.1",
+    "react-tooltip": "5.21.5",
     "react-vertical-timeline-component": "3.6.0",
     "react-zoom-pan-pinch": "3.1.0",
     "slick-carousel": "1.8.1",
     "styled-components": "5.3.11",
     "tailwind-merge": "1.14.0",
-    "tailwindcss-animate": "1.0.6",
-    "web-vitals": "1.0.1"
+    "tailwindcss-animate": "1.0.7",
+    "web-vitals": "3.5.0"
   },
   "scripts": {
     "start": "REACT_APP_VERSION=$(node -pe 'require(\"./package.json\").version') react-app-rewired start",
@@ -72,41 +72,37 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "14.4.3",
-    "@types/d3": "7.4.0",
-    "@types/dompurify": "3.0.2",
-    "@types/jest": "26.0.15",
-    "@types/node": "12.0.0",
-    "@types/react": "18.0.24",
-    "@types/react-dom": "18.0.8",
-    "@types/react-router-dom": "5.1.7",
+    "@types/d3": "7.4.1",
+    "@types/dompurify": "3.0.3",
+    "@types/node": "20.8.2",
+    "@types/react": "18.2.25",
+    "@types/react-dom": "18.2.10",
+    "@types/react-router-dom": "5.3.3",
     "@types/react-slick": "0.23.10",
-    "@types/react-vertical-timeline-component": "3.3.3",
-    "@types/styled-components": "5.1.26",
+    "@types/react-vertical-timeline-component": "3.3.4",
+    "@types/styled-components": "5.1.28",
     "crypto-browserify": "3.12.0",
-    "eslint-config-prettier": "8.3.0",
+    "eslint-config-prettier": "9.0.0",
     "eslint-config-react": "1.1.7",
     "eslint-config-react-app": "7.0.1",
-    "eslint-config-standard": "17.0.0",
+    "eslint-config-standard": "17.1.0",
     "eslint-import-resolver-alias": "1.1.2",
-    "eslint-import-resolver-typescript": "3.2.5",
-    "eslint-plugin-import": "2.26.0",
+    "eslint-import-resolver-typescript": "3.6.1",
+    "eslint-plugin-import": "2.28.1",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-promise": "6.0.0",
-    "eslint-plugin-react": "7.30.1",
+    "eslint-plugin-prettier": "5.0.0",
+    "eslint-plugin-promise": "6.1.1",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "nft.storage": "7.0.3",
+    "nft.storage": "7.1.1",
     "path-browserify": "1.0.1",
-    "prettier": "2.7.1",
+    "prettier": "3.0.3",
     "react-app-rewired": "2.2.1",
     "react-scripts": "5.0.1",
-    "sass": "1.55.0",
+    "sass": "1.68.0",
     "stream-browserify": "3.0.0",
     "tailwindcss": "3.3.3",
-    "typescript": "4.1.2"
+    "typescript": "4.9.5"
   },
   "resolutions": {
     "**/*/nth-check": "2.0.1"

src/components/Layout/HeaderComponent.tsx

@@ -1,22 +1,25 @@
-import React from "react";
+import React, { JSX } from "react";
 
 type HeaderProps = {
   pageTitle: string;
   hasImage: boolean;
+  isAnimated?: boolean;
   imgSrc?: string;
+  animation?: JSX.Element;
   altImageAttribute?: string;
   pageSubtitle?: string;
   dataNftCount?: number;
   children: React.ReactNode;
 };
 export const HeaderComponent: React.FC<HeaderProps> = (props: HeaderProps) => {
-  const { pageTitle, hasImage, imgSrc, altImageAttribute, pageSubtitle, dataNftCount, children } = props;
+  const { pageTitle, isAnimated, hasImage, imgSrc, animation, altImageAttribute, pageSubtitle, dataNftCount, children } = props;
   return (
     <div className="flex justify-center py-4">
       <div className="flex flex-col w-full">
         <h1 className="py-4 mb-0">{pageTitle}</h1>
-        <div className={hasImage ? "border-[0.5px] dark:border-slate-100/30 border-slate-300 rounded-[3rem]" : "hidden"}>
-          <img className="rounded-[3rem] w-full 2xl:h-[375px]" src={imgSrc} alt={altImageAttribute} />
+        <div className={hasImage ? "z-[-1] border-[0.5px] dark:border-slate-100/30 border-slate-300 rounded-[3rem]" : "hidden"}>
+          {isAnimated && <>{animation}</>}
+          <img className="rounded-[3rem] 3xl:h-[375px] w-full " src={imgSrc} alt={altImageAttribute} />
         </div>
         <div>
           {pageSubtitle && dataNftCount ? (

src/components/Layout/Navbar.tsx

@@ -61,8 +61,8 @@ export const Navbar = () => {
       <div className="flex flex-row items-center text-xl">
         <Link className="flex flex-row items-center" to={isLoggedIn ? routeNames.home : routeNames.home}>
           <img src={theme === "dark" ? darkLogo : theme === "system" && systemTheme === "dark" ? darkLogo : lightLogo} className="w-[45px] h-auto" />
-          <span className="text-black dark:text-white pl-2 md:text-xl text-base">Itheum</span>
-          <span className="text-black dark:text-white font-semibold md:text-xl text-base">Explorer</span>
+          <span className="text-black dark:!text-white pl-2 md:text-xl text-base">Itheum</span>
+          <span className="text-black dark:!text-white font-semibold md:text-xl text-base">Explorer</span>
         </Link>
       </div>
 
@@ -71,7 +71,7 @@ export const Navbar = () => {
           <NavigationMenuItem>
             <Link to={isLoggedIn ? routeNames.home : routeNames.home}>
               <NavigationMenuLink
-                className={navigationMenuTriggerStyle() + "dark:!text-white dark:hover:!text-white text-black hover:!text-black !no-underline px-4"}>
+                className={navigationMenuTriggerStyle() + "dark:text-white dark:hover:!text-white text-black hover:!text-black !no-underline px-4"}>
                 Home
               </NavigationMenuLink>
             </Link>
@@ -88,8 +88,8 @@ export const Navbar = () => {
                       "block select-none space-y-1 rounded-md p-3 leading-none !no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                     }>
                     <NavigationMenuLink>
-                      <div className="text-md font-medium leading-none dark:text-white text-muted-foreground">{item.appName}</div>
-                      <p className="line-clamp-2 text-sm leading-snug text-muted pt-0.5">{item?.appDescription}</p>
+                      <div className="text-md font-medium leading-none text-muted-foreground">{item.appName}</div>
+                      <p className="line-clamp-2 text-sm leading-snug text-muted pt-0.5 ">{item?.appDescription}</p>
                     </NavigationMenuLink>
                   </Link>
                 ))}

src/libComponents/NavigationMenu.tsx

@@ -47,7 +47,7 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      "left-0 top-0 w-full dark:bg-[#1f1f1f] bg-slate-50 data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      "flex justify-center items-center left-0 top-0 w-full dark:bg-[#1f1f1f] bg-slate-50 data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
       className
     )}
     {...props}

src/pages/AppMarketplace/NFTunes/index.tsx

@@ -1,23 +1,21 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { DataNft, ViewDataReturnType } from "@itheum/sdk-mx-data-nft";
 import { useGetLoginInfo } from "@multiversx/sdk-dapp/hooks";
 
-import { ModalBody } from "react-bootstrap";
-import ModalHeader from "react-bootstrap/esm/ModalHeader";
-import { IoClose } from "react-icons/io5";
-import Modal from "react-modal";
 import { DataNftCard, Loader } from "components";
 import { NF_TUNES_NONCES } from "config";
 import { useGetAccount, useGetPendingTransactions } from "hooks";
 import { BlobDataType } from "libs/types";
-import { modalStylesFull } from "libs/ui";
 import { toastError } from "libs/utils";
 import "react-pdf/dist/Page/AnnotationLayer.css";
 import "react-pdf/dist/Page/TextLayer.css";
-import { HeaderComponent } from "../../../components/Layout/HeaderComponent";
+import { HeaderComponent } from "components/Layout/HeaderComponent";
+
+import nfTunesBanner from "assets/img/nf-tunes-banner.png";
+import disk from "assets/img/nf-tunes-logo-disk.png";
 
-import nfTunesBanner from "assets/img/nf-tunesb-banner.png";
 import { AudioPlayer } from "components/AudioPlayer";
+import stick from "../../../assets/img/nf-tunes-logo-stick.png";
 
 interface ExtendedViewDataReturnType extends ViewDataReturnType {
   blobDataType: BlobDataType;
@@ -38,10 +36,19 @@ export const NFTunes = () => {
   const [isFetchingDataMarshal, setIsFetchingDataMarshal] = useState<boolean>(true);
   const [owned, setOwned] = useState<boolean>(false);
   const [viewDataRes, setViewDataRes] = useState<ExtendedViewDataReturnType>();
-  const [isModalOpened, setIsModalOpened] = useState<boolean>(false);
   const [currentIndex, setCurrentIndex] = useState(-1);
   const [dataMarshalResponse, setDataMarshalResponse] = useState({ "data_stream": {}, "data": [] });
 
+  const imgAnimation = useMemo(
+    () => (
+      <div className="relative  top-[15%]">
+        <img className="animate-spin-slow w-[20%] left-[40%] max-w-[300px] absolute" src={disk} alt="disk" />
+        <img className="rotate-[20deg] absolute top-[-10px] md:top-[-15px] max-w-[200px] left-[52%] 3xl:left-[50%] w-[15%] " src={stick} alt="stick" />
+      </div>
+    ),
+    []
+  );
+
   useEffect(() => {
     if (!hasPendingTransactions) {
       fetchDataNfts();
@@ -54,15 +61,6 @@ export const NFTunes = () => {
     }
   }, [isLoading, address]);
 
-  function openModal() {
-    setIsModalOpened(true);
-  }
-
-  function closeModal() {
-    setIsModalOpened(false);
-    setViewDataRes(undefined);
-  }
-
   ///get the nfts that are able to open nfTunes app
   async function fetchDataNfts() {
     setIsLoading(true);
@@ -100,7 +98,6 @@ export const NFTunes = () => {
 
       if (_owned) {
         setIsFetchingDataMarshal(true);
-        openModal();
 
         const dataNft = dataNfts[index];
         let res: any;
@@ -138,22 +135,21 @@ export const NFTunes = () => {
 
         setViewDataRes(viewDataPayload);
         setIsFetchingDataMarshal(false);
-      } else {
-        openModal();
       }
     } catch (err) {
       console.error(err);
       toastError((err as Error).message);
-      closeModal();
       setIsFetchingDataMarshal(false);
     }
   }
 
   return (
     <HeaderComponent
       pageTitle={"NF-Tunes"}
+      isAnimated
       hasImage={true}
       imgSrc={nfTunesBanner}
+      animation={imgAnimation}
       altImageAttribute={"NF-Tunes application"}
       pageSubtitle={"Data NFTs that Unlock this App"}
       dataNftCount={dataNfts.length}>

src/pages/Home.tsx

@@ -6,6 +6,8 @@ import { APP_MAPPINGS } from "libs/utils/constant";
 import { routeNames } from "routes";
 import { HeaderComponent } from "../components/Layout/HeaderComponent";
 import { Button } from "../libComponents/Button";
+import disk from "../assets/img/nf-tunes-logo-disk.png";
+import stick from "../assets/img/nf-tunes-logo-stick.png";
 
 export function returnRoute(routeKey: string) {
   return (routeNames as any)[routeKey];
@@ -16,7 +18,7 @@ const HomePage = () => {
     <HeaderComponent pageTitle={"App Marketplace"} hasImage={false}>
       {APP_MAPPINGS.filter((app) => SUPPORTED_APPS.includes(app.routeKey)).map((item) => (
         <div key={item.routeKey} className="mb-3 w-[341px]">
-          <div className=" mb-4 border-[0.5px] rounded-t-[30px] border-neutral-500/90">
+          <div className="  mb-4 border-[0.5px] rounded-t-[30px] border-neutral-500/90">
             <img className="w-[464.29px] h-[250px] rounded-t-[30px]" src={item.img} alt="Apps" />
           </div>
           <h3 className=" !font-[Clash-Medium]">{item.appName}</h3>

src/pages/MyWallet.tsx

@@ -9,7 +9,6 @@ import { DataNftCard, Loader } from "components";
 import { MARKETPLACE_DETAILS_PAGE } from "config";
 import { useGetAccount, useGetPendingTransactions } from "hooks";
 import { BlobDataType } from "libs/types";
-import { modalStyles } from "libs/ui";
 import { nativeAuthOrigins, toastError } from "libs/utils";
 import { HeaderComponent } from "../components/Layout/HeaderComponent";
 

tailwind.config.js

@@ -10,6 +10,7 @@ module.exports = {
       "md": "768px",
       "xl": "1200px",
       "2xl": "1500px",
+      "3xl": "2300px",
     },
     container: {
       center: true,
@@ -54,6 +55,7 @@ module.exports = {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+
       },
       borderRadius: {
         lg: `var(--radius)`,
@@ -76,6 +78,7 @@ module.exports = {
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        'spin-slow': 'spin 4s linear infinite',
       },
     },
   },