Merge pull request #159 from Itheum/milestone-1.5.0

1.5.0 -> STG

package.json

@@ -1,31 +1,31 @@
 {
   "name": "explorer-dapp",
   "description": "Itheum Explorer is a DApp for the public to explore and visualize data within the Itheum protocol",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "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",
-    "@itheum/sdk-mx-data-nft": "^0.1.1",
-    "@multiversx/sdk-core": "12.6.0",
-    "@multiversx/sdk-dapp": "2.19.2",
-    "@multiversx/sdk-network-providers": "1.5.0",
-    "@radix-ui/react-dropdown-menu": "^2.0.5",
-    "@radix-ui/react-navigation-menu": "^1.1.3",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-switch": "^1.0.3",
+    "@itheum/sdk-mx-data-nft": "1.0.0",
+    "@multiversx/sdk-core": "12.8.0",
+    "@multiversx/sdk-dapp": "2.20.1",
+    "@multiversx/sdk-network-providers": "2.0.0",
+    "@radix-ui/react-dropdown-menu": "2.0.5",
+    "@radix-ui/react-navigation-menu": "1.1.3",
+    "@radix-ui/react-slot": "1.0.2",
+    "@radix-ui/react-switch": "1.0.3",
     "@types/react-modal": "3.16.0",
     "axios": "0.24.0",
     "bootstrap": "4.6.2",
     "chartjs-plugin-zoom": "2.0.1",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
+    "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.5",
+    "lucide-react": "0.265.0",
     "moment": "2.29.4",
     "moment-timezone": "0.5.43",
     "react": "18.2.0",
@@ -35,15 +35,16 @@
     "react-dom": "18.2.0",
     "react-hot-toast": "2.4.0",
     "react-icons": "4.8.0",
-    "react-inlinesvg": "^3.0.2",
+    "react-inlinesvg": "3.0.2",
     "react-modal": "3.16.1",
-    "react-pdf": "^7.3.3",
+    "react-pdf": "7.3.3",
     "react-router-dom": "6.14.2",
     "react-tooltip": "5.11.1",
     "react-vertical-timeline-component": "3.6.0",
+    "react-zoom-pan-pinch": "^3.1.0",
     "styled-components": "5.3.11",
-    "tailwind-merge": "^1.14.0",
-    "tailwindcss-animate": "^1.0.6",
+    "tailwind-merge": "1.14.0",
+    "tailwindcss-animate": "1.0.6",
     "web-vitals": "1.0.1"
   },
   "scripts": {
@@ -69,7 +70,7 @@
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "@types/d3": "7.4.0",
-    "@types/dompurify": "^3.0.2",
+    "@types/dompurify": "3.0.2",
     "@types/jest": "26.0.15",
     "@types/node": "12.0.0",
     "@types/react": "18.0.24",

src/components/AuthRedirectWrapper.tsx

@@ -1,14 +1,15 @@
 import React, { PropsWithChildren } from "react";
-import { Navigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { useGetIsLoggedIn } from "hooks";
 import { routeNames } from "routes";
 
 export const AuthRedirectWrapper = ({ children }: PropsWithChildren) => {
   const isLoggedIn = useGetIsLoggedIn();
+  const navigate = useNavigate();
 
-  // if (isLoggedIn) {
-  //   return <Navigate to={routeNames.dashboard} />;
-  // }
+  if (isLoggedIn) {
+    navigate(routeNames.dashboard);
+  }
 
   return <>{children}</>;
 };

src/components/CustomPagination.tsx

@@ -21,6 +21,7 @@ interface PropsType {
 export const CustomPagination: FC<PropsType> = ({
   pageCount,
   pageIndex,
+  // eslint-disable-next-line
   pageSize,
   gotoPage,
   disabled = false,

src/components/DataNftCard.tsx

@@ -3,9 +3,9 @@ import { DataNft } from "@itheum/sdk-mx-data-nft/out";
 import { useGetNetworkConfig } from "@multiversx/sdk-dapp/hooks/useGetNetworkConfig";
 import { MARKETPLACE_DETAILS_PAGE } from "config";
 import { convertToLocalString } from "libs/utils";
-import { ElrondAddressLink } from "./ElrondAddressLink";
 import { Button } from "../libComponents/Button";
 import { Card, CardContent, CardFooter } from "../libComponents/Card";
+import { ElrondAddressLink } from "./ElrondAddressLink";
 
 export function DataNftCard({
   index,

src/components/Layout/HeaderComponent.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import headerHero from "../../assets/img/custom-app-header-trailblazer.png";
 
 type HeaderProps = {
   pageTitle: string;

src/components/Modal/TwModal.tsx

@@ -1,5 +1,5 @@
+import React, { Fragment, useEffect, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
-import { Fragment, useEffect, useState } from "react";
 import { MdOutlineClose } from "react-icons/md";
 
 type ModalProps = {
@@ -9,7 +9,7 @@ type ModalProps = {
 };
 
 export const TwModal = (props: ModalProps) => {
-  const { isModalOpen = false, content, setIsModalOpen } = props;
+  const { isModalOpen = false, content } = props;
   let [isOpen, setIsOpen] = useState(isModalOpen);
 
   function closeModal() {

src/components/TrailBlazerModal.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from "react";
+import { useGetLoginInfo } from "@multiversx/sdk-dapp/hooks";
 import { ModalBody, ModalHeader } from "react-bootstrap";
 import { FaCalendarCheck, FaChartBar, FaChessKnight, FaFlagCheckered, FaHandshake, FaMoneyBillAlt, FaShopify, FaShoppingCart, FaTrophy } from "react-icons/fa";
 import { IoClose } from "react-icons/io5";
 import Modal from "react-modal";
 import { VerticalTimeline, VerticalTimelineElement } from "react-vertical-timeline-component";
 import { Loader } from "components";
-import { useGetLoginInfo } from "@multiversx/sdk-dapp/hooks";
 import { IFrameModal } from "./iFrameModal";
 import { TwModal } from "./Modal/TwModal";
 
@@ -46,17 +46,17 @@ export const TrailBlazerModal = ({
 }) => {
   const { loginMethod } = useGetLoginInfo();
   const [content, setContent] = useState<React.ReactElement>(<></>);
-  const [title, setTitle] = useState<string>();
+  // const [title, setTitle] = useState<string>();
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
   const handleIFrameModal = (link: string) => {
     setContent(<IFrameModal link={link} />);
     setIsModalOpen(true);
   };
 
-  const handleCloseModal = () => {
-    setContent(<></>);
-  };
+  // const handleCloseModal = () => {
+  //   setContent(<></>);
+  // };
 
   const getIconForCategory = (dataItem: any) => {
     switch (dataItem.category) {

src/components/ZoomableSvg/index.scss

@@ -0,0 +1,13 @@
+.zoomable-toolbar-button {
+  display: block;
+  width: 2.5rem;
+  height: 2.5rem;
+  margin: 1px 2px;
+  color: rgb(255, 255, 255);
+  transition: color 200ms ease 0s;
+  background: none;
+  padding: 0px;
+  border: 0px;
+  outline: 0px;
+  cursor: pointer;
+}

src/components/ZoomableSvg/index.tsx

@@ -0,0 +1,116 @@
+import React, { useRef } from "react";
+import SVG from "react-inlinesvg";
+import {
+  TransformWrapper,
+  TransformComponent,
+  ReactZoomPanPinchRef,
+} from "react-zoom-pan-pinch";
+import svgReset from "./Reset.svg";
+import svgZoomIn from "./ZoomIn.svg";
+import svgZoomOut from "./ZoomOut.svg";
+import "./index.scss";
+
+const INITIAL_SCALE = 2;
+
+export const ZoomableSvg = ({
+  data,
+  preProcess,
+} : {
+  data: any,
+  preProcess: any,
+}) => {
+  const transformComponentRef = useRef<ReactZoomPanPinchRef | null>(null);
+
+  const actionZoomIn = () => {
+    if (transformComponentRef.current) {
+      const { zoomIn } = transformComponentRef.current;
+      zoomIn();
+    }
+  };
+
+  const actionZoomOut = () => {
+    if (transformComponentRef.current) {
+      const { zoomOut } = transformComponentRef.current;
+      zoomOut();
+    }
+  };
+
+  const actionReset = () => {
+    if (transformComponentRef.current) {
+      const { centerView } = transformComponentRef.current;
+      centerView(INITIAL_SCALE);
+    }
+  };
+
+  return (
+    <TransformWrapper
+      initialScale={INITIAL_SCALE}
+      centerOnInit
+      centerZoomedOut
+      initialPositionX={0}
+      initialPositionY={0}
+      ref={transformComponentRef}
+      wheel={{
+        // step: 0.5,
+        smoothStep: 0.004,
+      }}
+      // pinch={{
+      //   step: 0.5,
+      // }}
+    >
+      <React.Fragment>
+        <TransformComponent
+          wrapperStyle={{
+            width: '100%',
+            height: '100%',
+          }}
+          contentStyle={{
+            height: "100%",
+            // width: "auto",
+          }}
+        >
+          <SVG
+            id="zoomable-svg"
+            src={data}
+            preProcessor={(code) => preProcess(code)}
+            // style={{ width: "100%", height: "auto" }}
+          />
+        </TransformComponent>
+
+        <div
+          style={{
+            position: "absolute",
+            top: "1rem",
+            left: "unset",
+            right: "1rem",
+            bottom: "unset",
+            backgroundColor: "rgba(19, 20, 22, 0.9)",
+            borderRadius: "2px",
+            display: "flex",
+            flexDirection: "column",
+            padding: "2px 1px",
+          }}
+        >
+          <button
+            className="zoomable-toolbar-button"
+            onClick={actionZoomIn}
+          >
+            <img src={svgZoomIn} style={{ width: "100%", height: "100%" }} />
+          </button>
+          <button
+            className="zoomable-toolbar-button"
+            onClick={actionZoomOut}
+          >
+            <img src={svgZoomOut} style={{ width: "100%", height: "100%" }} />
+          </button>
+          <button
+            className="zoomable-toolbar-button"
+            onClick={actionReset}
+          >
+            <img src={svgReset} style={{ width: "100%", height: "100%" }} />
+          </button>
+        </div>
+      </React.Fragment>
+    </TransformWrapper>
+  );
+};

src/components/index.tsx

@@ -7,3 +7,4 @@ export * from "./DataNftCard";
 export * from "./ElrondAddressLink";
 export * from "./sdkDappComponents";
 export * from "./TrailBlazerModal";
+export * from "./ZoomableSvg";

src/libComponents/ThemeProvider.tsx

@@ -40,9 +40,9 @@ export function ThemeProvider({ children, defaultTheme = "system", storageKey =
 
   const value = {
     theme,
-    setTheme: (theme: Theme) => {
-      localStorage.setItem(storageKey, theme);
-      setTheme(theme);
+    setTheme: (_theme: Theme) => {
+      localStorage.setItem(storageKey, _theme);
+      setTheme(_theme);
     },
   };
 

src/libs/ui.ts

@@ -1,5 +1,3 @@
-import { MARKETPLACE_DETAILS_PAGE } from "config";
-
 export const modalStyles = {
   overlay: {
     backgroundColor: "var(--light-20) !important",

src/libs/utils/constant.ts

@@ -1,6 +1,6 @@
 import iconBubbleMaps from "assets/img/expl-app-bubblemaps-icon.png";
-import iconTrailblazer from "assets/img/expl-app-trailblazer-icon.png";
 import iconInfrographics from "assets/img/expl-app-infographics-icon.png";
+import iconTrailblazer from "assets/img/expl-app-trailblazer-icon.png";
 
 export const ERROR_CONNECT_WALLET = "Connect your wallet";
 export const ERROR_TRANSACTION_ONGOING = "A transaction is ongoing";

src/libs/utils/core.js

@@ -13,9 +13,9 @@ export function onChainDataInsights_LIB({rawReadings, userTz}) {
   }
 
   let scoreGroup = '';
-  let totalScore = 0;
+  // let totalScore = 0;
 
-  let workOnReadings = rawReadings.reverse().map((i, idx) => {
+  let workOnReadings = rawReadings.reverse().map((i) => {
     let newObj = { ...i };
     let thisReadingTs = moment.utc(newObj.createdAt);
     let readingDataPoints = [];
@@ -207,10 +207,10 @@ export function thirdPartyDataInsights_LIB({rawReadings, userTz}) {
     userTz = 'Australia/Sydney'; 
   }
 
-  let scoreGroup = '';
-  let totalScore = 0;
+  // let scoreGroup = '';
+  // let totalScore = 0;
 
-  let workOnReadings = rawReadings.reverse().map((i, idx) => {
+  let workOnReadings = rawReadings.reverse().map((i) => {
     let newObj = { ...i };
     let thisReadingTs = moment.utc(newObj.createdAt);
     let readingDataPoints = [];

src/libs/utils/ui.ts

@@ -1,5 +1,5 @@
-import toast from "react-hot-toast";
 import { clsx, ClassValue } from "clsx";
+import toast from "react-hot-toast";
 import { twMerge } from "tailwind-merge";
 
 /*