Merge pull request #126 from Itheum/stg

STG 1.3.2 > MAIN

package.json

@@ -1,7 +1,7 @@
 {
   "name": "explorer-dapp",
   "description": "Itheum Explorer the public explore the Itheum protocol components",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "author": "Itheum",
   "license": "GPL-3.0-or-later",
   "dependencies": {
@@ -30,6 +30,7 @@
     "react-icons": "4.8.0",
     "react-inlinesvg": "^3.0.2",
     "react-modal": "3.16.1",
+    "react-pdf": "^7.3.3",
     "react-router-dom": "6.14.2",
     "react-tooltip": "5.11.1",
     "react-vertical-timeline-component": "3.6.0",

src/App.tsx

@@ -7,7 +7,7 @@ import {
 } from "components";
 import { TransactionsToastList, NotificationModal, SignTransactionsModals } from "components";
 import { apiTimeout, walletConnectV2ProjectId, sampleAuthenticatedDomains, ELROND_NETWORK } from "config";
-import { MultiversxBubbles, MyWallet, PageNotFound, Unlock } from "pages";
+import { MultiversxBubbles, MultiversxInfographics, MyWallet, PageNotFound, Unlock } from "pages";
 import { ItheumTrailblazer } from "pages/ItheumTrailblazer";
 import { routes, routeNames } from "routes";
 
@@ -39,7 +39,7 @@ export const App = () => {
 
                 <Route path={`${routeNames.itheumtrailblazer}/:targetNonce/:targetMessageToBeSigned`} element={<ItheumTrailblazer />} />
                 <Route path={`${routeNames.multiversxbubbles}/:targetNonce/:targetMessageToBeSigned`} element={<MultiversxBubbles />} />
-
+                <Route path={`${routeNames.multiversxinfographics}/:targetNonce/:targetMessageToBeSigned`} element={<MultiversxInfographics />} />
                 <Route path={`${routeNames.mywallet}/:targetNonce/:targetMessageToBeSigned`} element={<MyWallet />} />
                 <Route path="*" element={<PageNotFound />} />
               </Routes>

src/assets/sass/theme.scss

@@ -668,7 +668,7 @@ code {
 
   .nfts-unlocks {
     font-size: 1.5rem;
-    margin-top: 1rem !important;
+    margin-top: 2rem !important;
     margin-bottom: 1rem !important;
   }
 }
@@ -687,6 +687,29 @@ code {
 /* Apps Custom Styles
 -------------------------------------------------- */
 
+.c-model-header-with-action {
+  display: flex;
+  flex-direction: column;
+  width: auto;
+  margin: auto;
+
+  @media screen and (min-width: 564px) {
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+
+.c-model-title {
+  font-size: 1.5rem;
+  font-weight: 700 !important;
+  margin-bottom: 5px;
+
+  @media screen and (min-width: 564px) {
+    margin-bottom: auto;
+  }
+}
+
 .trailblazer-view {
   .base-tile {
     .header {
@@ -825,5 +848,5 @@ code {
 }
 
 .fontsize-sm {
-  font-size: .9rem !important;
+  font-size: 0.9rem !important;
 }

src/components/DataNftCard.tsx

@@ -77,7 +77,7 @@ export function DataNftCard({
           </div>
           <div className="mb-1 row">
             <span className="col-4 opacity-6 fontsize-sm">Royalties:</span>
-            <span className="col-8">{convertToLocalString(dataNft.royalties * 100, 2) + "%"}</span>
+            <span className="col-8">{isNaN(dataNft.royalties) ? "0%" : convertToLocalString(dataNft.royalties * 100, 2) + "%"}</span>
           </div>
 
           <div className="c-actions">

src/components/TrailBlazerModal.tsx

@@ -4,7 +4,6 @@ import { FaCalendarCheck, FaChartBar, FaChessKnight, FaFlagCheckered, FaHandshak
 import { IoClose } from "react-icons/io5";
 import Modal from "react-modal";
 import { VerticalTimeline, VerticalTimelineElement } from "react-vertical-timeline-component";
-import imgBlurChart from "assets/img/blur-chart.png";
 import { Loader } from "components";
 import { useGetLoginInfo } from "@multiversx/sdk-dapp/hooks";
 import { IFrameModal } from "./iFrameModal";
@@ -248,7 +247,6 @@ export const TrailBlazerModal = ({
       <ModalBody>
         {!owned ? (
           <div className="d-flex flex-column align-items-center justify-content-center">
-            <img src={imgBlurChart} style={{ width: "90%", height: "auto" }} />
             <h4 className="mt-3 font-title">You do not own this Data NFT</h4>
             <h6>(Buy the Data NFT from the marketplace to unlock the data)</h6>
           </div>

src/config.tsx

@@ -18,6 +18,8 @@ export const CANTINA_CORNER_NONCES = [50, 51, 52];
 
 export const TRAILBLAZER_NONCES = process.env.REACT_APP_ENV_NETWORK && process.env.REACT_APP_ENV_NETWORK === EnvironmentsEnum.devnet ? [407, 423, 453] : [1];
 export const MULTIVERSX_BUBBLE_NONCES = process.env.REACT_APP_ENV_NETWORK && process.env.REACT_APP_ENV_NETWORK === EnvironmentsEnum.devnet ? [416] : [2];
+export const MULTIVERSX_INFOGRAPHICS_NONCES =
+  process.env.REACT_APP_ENV_NETWORK && process.env.REACT_APP_ENV_NETWORK === EnvironmentsEnum.devnet ? [469, 476, 480] : [3];
 
 export const CC_SHOW_SIZE = 10;
 export const GAMER_PASSPORT_GAMER_NONCES = [12];
@@ -34,5 +36,5 @@ export const MAINNET_EXPLORER_ADDRESS = "https://explorer.multiversx.com";
 
 export const SUPPORTED_APPS =
   process.env.REACT_APP_ENV_NETWORK && process.env.REACT_APP_ENV_NETWORK === EnvironmentsEnum.devnet
-    ? ["itheumtrailblazer", "multiversxbubbles", "esdtBubble", "playstationgamerpassport"]
-    : ["itheumtrailblazer", "multiversxbubbles"];
+    ? ["itheumtrailblazer", "multiversxbubbles", "esdtBubble", "playstationgamerpassport", "multiversxinfographics"]
+    : ["itheumtrailblazer", "multiversxbubbles", "multiversxinfographics"];

src/libs/utils/constant.ts

@@ -1,5 +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";
 
 export const ERROR_CONNECT_WALLET = "Connect your wallet";
 export const ERROR_TRANSACTION_ONGOING = "A transaction is ongoing";
@@ -30,4 +31,10 @@ export const APP_MAPPINGS = [
     desc: "There are over 110 million active Sony Playstation gamers, and now, they can own some of their data. Unlock these PlatStation gamers Data NFTs by using this app.",
     img: "https://itheum-static.s3.ap-southeast-2.amazonaws.com/expl-app-playstation-icon.png",
   },
+  {
+    appName: "MultiversX Infographics",
+    routeKey: "multiversxinfographics",
+    desc: 'This app visualizes dynamic and evolving data streams rendered into PDF files that showcase unique MultiversX ecosystem "alpha", insights, and education.',
+    img: iconInfrographics,
+  },
 ];

src/pages/AppMarketplace/MultiversxInfographics/MultiversxInfographics.scss

@@ -0,0 +1,47 @@
+.c-container-document {
+  margin: 1em 0;
+  min-height: 900px;
+
+  .react-pdf__Document {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .react-pdf__Page {
+    max-width: calc(100% - 2em);
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+    margin: 1em;
+    min-height: 300px;
+  }
+
+  .react-pdf__Page canvas {
+    max-width: 100%;
+    height: auto !important;
+  }
+
+  .react-pdf__message {
+    padding: 20px;
+    color: white;
+  }
+}
+
+.c-container-paging {
+  text-align: center;
+
+  button {
+    cursor: pointer;
+    width: 80px;
+  }
+
+  .btn-outline-primary:hover:disabled {
+    color: grey;
+    cursor: initial;
+  }
+
+  .c-pagecount {
+    margin: 0;
+    display: flex;
+    align-items: center;
+  }
+}