Merge pull request #239 from Itheum/stg

1.8.0 STG -> MAIN
Itheum · Nov 20, 2023 · 328363a · 328363a
2 parents 40ff4ee + 20f047e
commit 328363a
Show file tree

Hide file tree

Showing 21 changed files with 3,662 additions and 5,582 deletions.
diff --git a/config-overrides.js b/config-overrides.js
@@ -1,11 +1,7 @@
 module.exports = function override(config) {
-  console.log("override");
   let loaders = config.resolve;
   loaders.fallback = {
     fs: false,
-    path: require.resolve("path-browserify"),
-    stream: require.resolve("stream-browserify"),
-    crypto: require.resolve("crypto-browserify"),
   };
 
   return config;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,35 +1,34 @@
 {
   "name": "explorer-dapp",
   "description": "Itheum Explorer is a DApp for the public to explore and visualize data within the Itheum protocol",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "author": "Itheum",
   "license": "GPL-3.0-or-later",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "6.4.2",
     "@fortawesome/free-solid-svg-icons": "6.4.2",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@itheum/sdk-mx-data-nft": "2.1.5",
-    "@multiversx/sdk-core": "12.9.0",
-    "@multiversx/sdk-dapp": "2.22.1",
-    "@multiversx/sdk-network-providers": "2.0.0",
+    "@itheum/sdk-mx-data-nft": "2.2.0",
+    "@multiversx/sdk-core": "12.13.0",
+    "@multiversx/sdk-dapp": "2.23.0",
+    "@multiversx/sdk-network-providers": "2.1.0",
     "@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.1",
-    "axios": "1.5.1",
+    "axios": "1.6.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.6",
-    "lucide-react": "0.284.0",
+    "lucide-react": "0.292.0",
     "moment": "2.29.4",
     "moment-timezone": "0.5.43",
-    "node": "18.18.0",
+    "node": "18.18.2",
     "react": "18.2.0",
     "react-bootstrap": "2.9.0",
     "react-calendar-heatmap": "1.9.0",
@@ -39,23 +38,24 @@
     "react-icons": "4.11.0",
     "react-inlinesvg": "3.0.3",
     "react-modal": "3.16.1",
-    "react-pdf": "7.4.0",
-    "react-router-dom": "6.16.0",
+    "react-pdf": "7.5.1",
+    "react-router-dom": "6.18.0",
     "react-slick": "0.29.0",
-    "react-tooltip": "5.21.5",
+    "react-tooltip": "5.22.0",
     "react-vertical-timeline-component": "3.6.0",
-    "react-zoom-pan-pinch": "3.1.0",
+    "react-zoom-pan-pinch": "3.3.0",
     "slick-carousel": "1.8.1",
     "styled-components": "5.3.11",
-    "tailwind-merge": "1.14.0",
+    "tailwind-merge": "2.0.0",
     "tailwindcss-animate": "1.0.7",
     "web-vitals": "3.5.0",
-    "zustand": "4.4.1"
+    "zustand": "4.4.6"
   },
   "scripts": {
-    "start": "REACT_APP_VERSION=$(node -pe 'require(\"./package.json\").version') react-app-rewired start",
-    "winStart": "set \"REACT_APP_VERSION=$(node -pe 'require(\"./package.json\").version')\" && react-app-rewired start",
-    "build": "REACT_APP_VERSION=$(node -pe 'require(\"./package.json\").version') react-app-rewired build",
+    "start": "REACT_APP_VERSION=$npm_package_version react-app-rewired start",
+    "build": "REACT_APP_VERSION=$npm_package_version react-app-rewired build",
+    "winStart": "cross-env REACT_APP_VERSION=$npm_package_version react-app-rewired start",
+    "winBuild": "cross-env REACT_APP_VERSION=$npm_package_version react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject",
     "lint": "eslint --ext js,ts,tsx src"
@@ -72,42 +72,39 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
-    "@types/d3": "7.4.1",
-    "@types/dompurify": "3.0.3",
-    "@types/node": "18.18.0",
-    "@types/react": "18.2.25",
-    "@types/react-dom": "18.2.10",
+    "@types/d3": "7.4.3",
+    "@types/dompurify": "3.0.5",
+    "@types/node": "18.18.2",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
+    "@types/react-modal": "3.16.3",
     "@types/react-router-dom": "5.3.3",
-    "@types/react-slick": "0.23.10",
-    "@types/react-vertical-timeline-component": "3.3.4",
+    "@types/react-slick": "0.23.12",
+    "@types/react-vertical-timeline-component": "3.3.6",
     "@types/styled-components": "5.1.28",
-    "crypto-browserify": "3.12.0",
+    "cross-env": "7.0.3",
     "eslint-config-prettier": "9.0.0",
-    "eslint-config-react": "1.1.7",
     "eslint-config-react-app": "7.0.1",
     "eslint-config-standard": "17.1.0",
-    "eslint-import-resolver-alias": "1.1.2",
     "eslint-import-resolver-typescript": "3.6.1",
-    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-import": "2.29.0",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "5.0.0",
+    "eslint-plugin-prettier": "5.0.1",
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "nft.storage": "7.1.1",
-    "path-browserify": "1.0.1",
-    "prettier": "3.0.3",
+    "prettier": "3.1.0",
     "react-app-rewired": "2.2.1",
     "react-scripts": "5.0.1",
     "sass": "1.68.0",
-    "stream-browserify": "3.0.0",
-    "tailwindcss": "3.3.3",
+    "tailwindcss": "3.3.5",
     "typescript": "4.9.5"
   },
   "resolutions": {
     "**/*/nth-check": "2.0.1"
   },
   "engines": {
-    "node": "18.18.0"
+    "node": "18.18.2"
   }
 }
diff --git a/src/appsConfig.tsx b/src/appsConfig.tsx
@@ -0,0 +1,47 @@
+import { EnvironmentsEnum } from "libs/types";
+
+export const IS_DEVNET = process.env.REACT_APP_ENV_NETWORK && process.env.REACT_APP_ENV_NETWORK === EnvironmentsEnum.devnet;
+
+export type app_token = {
+  tokenIdentifier: string;
+  nonce: number;
+};
+
+export const TRAILBLAZER_TOKENS: app_token[] = IS_DEVNET
+  ? [
+      { tokenIdentifier: "DATANFTFT-e0b917", nonce: 1 },
+      // { tokenIdentifier: "DATANFTFT-e0b917", nonce: 423 },
+      // { tokenIdentifier: "DATANFTFT-e0b917", nonce: 453 },
+    ]
+  : [{ tokenIdentifier: "DATANFTFT-e936d4", nonce: 1 }];
+export const MULTIVERSX_BUBBLE_TOKENS: app_token[] = IS_DEVNET
+  ? [
+      // { tokenIdentifier: "DATANFTFT-e0b917", nonce: 416 },
+      // { tokenIdentifier: "DATANFTFT-e0b917", nonce: 491 },
+    ]
+  : [{ tokenIdentifier: "DATANFTFT-e936d4", nonce: 2 }];
+export const MULTIVERSX_INFOGRAPHICS_TOKENS: app_token[] = IS_DEVNET
+  ? [
+      { tokenIdentifier: "DATANFTFT-e0b917", nonce: 3 },
+      // { tokenIdentifier: "DATANFTFT-e0b917", nonce: 476 },
+      // { tokenIdentifier: "DATANFTFT-e0b917", nonce: 480 },
+      // { tokenIdentifier: "DATANFTFT-e0b917", nonce: 490 },
+    ]
+  : [{ tokenIdentifier: "DATANFTFT-e936d4", nonce: 3 }];
+export const NF_TUNES_TOKENS: app_token[] = IS_DEVNET
+  ? [
+      { tokenIdentifier: "DATANFTFT-e0b917", nonce: 2 },
+      // { tokenIdentifier: "DATANFTFT-e0b917", nonce: 529 },
+    ]
+  : [{ tokenIdentifier: "DATANFTFT-e936d4", nonce: 4 }];
+export const PLAYSTATION_GAMER_PASSPORT_TOKENS: app_token[] = [
+  // { tokenIdentifier: "DATANFTFT-e0b917", nonce: 379 },
+  // { tokenIdentifier: "DATANFTFT-e0b917", nonce: 380 },
+];
+export const ESDT_BUBBLE_TOKENS: app_token[] = [
+  // { tokenIdentifier: "DATANFTFT-e0b917", nonce: 417 }
+];
+
+export const SUPPORTED_APPS = IS_DEVNET
+  ? ["itheumtrailblazer", "multiversxbubbles", "esdtBubble", "playstationgamerpassport", "multiversxinfographics", "nftunes"]
+  : ["itheumtrailblazer", "multiversxbubbles", "multiversxinfographics", "nftunes"];
diff --git a/src/components/AudioPlayer.tsx b/src/components/AudioPlayer.tsx
@@ -8,20 +8,19 @@ import { ArrowBigLeft, Loader2, Play, Pause, Library, RefreshCcwDot, Volume2, Vo
 
 import DEFAULT_SONG_IMAGE from "assets/img/audio-player-image.png";
 import DEFAULT_SONG_LIGHT_IMAGE from "assets/img/audio-player-light-image.png";
-import { nativeAuthOrigins, toastError } from "libs/utils";
+import { decodeNativeAuthToken, nativeAuthOrigins, toastError } from "libs/utils";
 import { DataNft, ViewDataReturnType } from "@itheum/sdk-mx-data-nft/out";
 
 type AudioPlayerProps = {
   dataNftToOpen: DataNft;
   songs: any;
   tokenLogin: any;
 };
-
 export const AudioPlayer = (props: AudioPlayerProps) => {
   useEffect(() => {
-    audio.onended = function () {
-      setIsPlaying(false);
-    };
+    audio.addEventListener("ended", function () {
+      setCurrentTrackIndex((prevCurrentTrackIndex) => (prevCurrentTrackIndex < props.songs.length - 1 ? prevCurrentTrackIndex + 1 : 0));
+    });
     audio.addEventListener("timeupdate", updateProgress);
     audio.addEventListener("canplaythrough", function () {
       // Audio is ready to be played
@@ -123,7 +122,7 @@ export const AudioPlayer = (props: AudioPlayerProps) => {
         }));
         /// if not previously fetched, fetch now and save the url of the blob
         const res: ViewDataReturnType = await props.dataNftToOpen.viewDataViaMVXNativeAuth({
-          mvxNativeAuthOrigins: nativeAuthOrigins(),
+          mvxNativeAuthOrigins: [decodeNativeAuthToken(props.tokenLogin.nativeAuthToken).origin],
           mvxNativeAuthMaxExpirySeconds: 3600,
 
           fwdHeaderMapLookup: {

diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
@@ -1,13 +1,36 @@
-import React from "react";
+import React, { useEffect } from "react";
+import { useGetLoginInfo } from "@multiversx/sdk-dapp/hooks";
+import { logout } from "@multiversx/sdk-dapp/utils/logout";
 import { Toaster } from "react-hot-toast";
 import { useLocation } from "react-router-dom";
 import { AuthenticatedRoutesWrapper } from "components";
+import { sleep } from "libs/utils/legacyUtil";
 import { routes, routeNames } from "routes";
 import { Footer } from "./Footer";
 import { Navbar } from "./Navbar";
 
 export const Layout = ({ children }: { children: React.ReactNode }) => {
   const { search } = useLocation();
+  const { isLoggedIn: isMxLoggedIn } = useGetLoginInfo();
+  const appVersion = process.env.REACT_APP_VERSION;
+
+  useEffect(() => {
+    const handleAppVersioningLogin = async () => {
+      await sleep(0.5);
+      const localStorageAppVersion = localStorage.getItem("app-version");
+      console.log(appVersion, localStorageAppVersion);
+      const currentLocalStorageVersion = localStorageAppVersion;
+      if (appVersion !== localStorageAppVersion) {
+        if (isMxLoggedIn) {
+          localStorage.setItem("app-version", appVersion || "");
+          if (currentLocalStorageVersion !== null) {
+            logout(undefined, undefined, false);
+          }
+        }
+      }
+    };
+    handleAppVersioningLogin();
+  }, [isMxLoggedIn]);
 
   return (
     <div className="flex flex-col flex-auto min-h-[100dvh]">

diff --git a/src/components/Layout/Navbar.tsx b/src/components/Layout/Navbar.tsx
@@ -1,15 +1,16 @@
 import React, { useEffect, useState } from "react";
 import { Home, Menu, Store, Wallet } from "lucide-react";
 import { Link } from "react-router-dom";
+import { SUPPORTED_APPS } from "appsConfig";
 import lightLogo from "assets/img/logo-icon-b.png";
 import darkLogo from "assets/img/logo-sml-d.png";
 import { CopyAddress } from "components/CopyAddress";
-import { SUPPORTED_APPS } from "config";
 import { logout } from "helpers";
 import { useGetAccount, useGetIsLoggedIn } from "hooks";
 import { APP_MAPPINGS } from "libs/utils/constant";
 import { returnRoute } from "pages/Home";
 import { routeNames } from "routes";
+import { SwitchButton } from "./SwitchButton";
 import { Button } from "../../libComponents/Button";
 import {
   DropdownMenu,
@@ -30,7 +31,6 @@ import {
   navigationMenuTriggerStyle,
 } from "../../libComponents/NavigationMenu";
 import { useTheme } from "../../libComponents/ThemeProvider";
-import { SwitchButton } from "./SwitchButton";
 
 export const Navbar = () => {
   const isLoggedIn = useGetIsLoggedIn();
@@ -69,11 +69,10 @@ export const Navbar = () => {
       <NavigationMenu className="md:!inline !hidden z-0">
         <NavigationMenuList>
           <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"}>
-                Home
-              </NavigationMenuLink>
+            <Link
+              to={isLoggedIn ? routeNames.home : routeNames.home}
+              className={navigationMenuTriggerStyle() + "dark:text-white dark:hover:!text-white text-black hover:!text-black !no-underline px-4"}>
+              Home
             </Link>
           </NavigationMenuItem>
           <NavigationMenuItem>
@@ -87,10 +86,8 @@ export const Navbar = () => {
                     className={
                       "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 text-foreground">{item.appName}</div>
-                      <p className="line-clamp-2 text-sm leading-snug text-muted pt-0.5 ">{item?.appDescription}</p>
-                    </NavigationMenuLink>
+                    <div className="text-md font-medium leading-none text-foreground">{item.appName}</div>
+                    <p className="line-clamp-2 text-sm leading-snug text-muted pt-0.5 ">{item?.appDescription}</p>
                   </Link>
                 ))}
               </ul>
@@ -107,21 +104,17 @@ export const Navbar = () => {
                       className={
                         "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">My Listed</div>
-                        <p className="line-clamp-2 text-sm leading-snug text-muted pt-0.5">Listed Data NFT's</p>
-                      </NavigationMenuLink>
+                      <div className="text-md font-medium leading-none dark:text-white text-muted-foreground">My Listed</div>
+                      <p className="line-clamp-2 text-sm leading-snug text-muted pt-0.5">Listed Data NFT's</p>
                     </Link>
                     <Link
                       to={routeNames.mywallet}
                       title={"My Wallet"}
                       className={
                         "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">My Wallet</div>
-                        <p className="line-clamp-2 text-sm leading-snug text-muted pt-0.5">View RAW Data</p>
-                      </NavigationMenuLink>
+                      <div className="text-md font-medium leading-none dark:text-white text-muted-foreground">My Wallet</div>
+                      <p className="line-clamp-2 text-sm leading-snug text-muted pt-0.5">View RAW Data</p>
                     </Link>
                     <div className="flex flex-col p-3">
                       <p className="text-sm font-medium leading-none dark:text-slate-100 pb-0.5">My Address Quick Copy</p>
@@ -190,7 +183,7 @@ export const Navbar = () => {
             )}
             <SwitchButton />
             <DropdownMenuTrigger asChild>
-              <Button variant="ghost" className="!pl-0">
+              <Button variant="ghost" size="icon" className="mr-2">
                 <Menu />
               </Button>
             </DropdownMenuTrigger>
@@ -199,7 +192,7 @@ export const Navbar = () => {
             <DropdownMenuGroup>
               <Link to={routeNames.home}>
                 <DropdownMenuItem>
-                  <Home className="mr-2 h-4 w-4" />
+                  <Home className="pr-2 h-4 w-4" />
                   <span>Home</span>
                 </DropdownMenuItem>
               </Link>