Milestone 1.4.0 > STG

package.json

@@ -1,24 +1,31 @@
 {
   "name": "explorer-dapp",
-  "description": "Itheum Explorer the public explore the Itheum protocol components",
-  "version": "1.3.1",
+  "description": "Itheum Explorer is a DApp for the public to explore and visualize data within the Itheum protocol",
+  "version": "1.4.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.0.7",
+    "@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",
     "@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",
     "d3": "7.8.5",
     "dompurify": "^3.0.5",
+    "lucide-react": "^0.265.0",
     "moment": "2.29.4",
     "moment-timezone": "0.5.43",
     "react": "18.2.0",
@@ -30,10 +37,13 @@
     "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",
     "styled-components": "5.3.11",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.6",
     "web-vitals": "1.0.1"
   },
   "scripts": {

src/App.tsx

@@ -7,9 +7,10 @@ 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";
+import { ThemeProvider } from "./libComponents/ThemeProvider";
 
 export const App = () => {
   return (
@@ -26,24 +27,26 @@ export const App = () => {
             dappConfig={{
               shouldUseWebViewProvider: true,
             }}>
-            <Layout>
-              <AxiosInterceptorContext.Listener />
-              <TransactionsToastList />
-              <NotificationModal />
-              <SignTransactionsModals className="custom-class-for-modals" />
-              <Routes>
-                <Route path={routeNames.unlock} element={<Unlock />} />
-                {routes.map((route, index) => (
-                  <Route path={route.path} key={"route-key-" + index} element={<route.component />} />
-                ))}
+            <ThemeProvider defaultTheme="dark" storageKey="explorer-ui-theme">
+              <Layout>
+                <AxiosInterceptorContext.Listener />
+                <TransactionsToastList />
+                <NotificationModal />
+                <SignTransactionsModals className="custom-class-for-modals" />
+                <Routes>
+                  <Route path={routeNames.unlock} element={<Unlock />} />
+                  {routes.map((route, index) => (
+                    <Route path={route.path} key={"route-key-" + index} element={<route.component />} />
+                  ))}
 
-                <Route path={`${routeNames.itheumtrailblazer}/:targetNonce/:targetMessageToBeSigned`} element={<ItheumTrailblazer />} />
-                <Route path={`${routeNames.multiversxbubbles}/:targetNonce/:targetMessageToBeSigned`} element={<MultiversxBubbles />} />
-
-                <Route path={`${routeNames.mywallet}/:targetNonce/:targetMessageToBeSigned`} element={<MyWallet />} />
-                <Route path="*" element={<PageNotFound />} />
-              </Routes>
-            </Layout>
+                  <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>
+              </Layout>
+            </ThemeProvider>
           </DappProvider>
         </Router>
       </AxiosInterceptorContext.Interceptor>

src/assets/clashDisplay.css

@@ -0,0 +1,70 @@
+/**
+ * @license
+ *
+ * Font Family: Clash Display
+ * Designed by: Indian Type Foundry
+ * URL: https://www.fontshare.com/fonts/clash-display
+ * © 2023 Indian Type Foundry
+ *
+ * Font Styles:
+ * Clash Display Variable(Variable font)
+ * Clash Display Extralight
+ * Clash Display Light
+ * Clash Display Regular
+ * Clash Display Medium
+ * Clash Display Semibold
+ * Clash Display Bold
+ *
+*/
+
+
+/**
+* This is a variable font
+* You can controll variable axes as shown below:
+* font-variation-settings: 'wght' 700.0;
+*
+* available axes:
+
+* 'wght' (range from 200.0 to 700.0)
+
+*/
+
+@font-face {
+  font-family: 'Clash-Variable';
+  src: url(./fonts/ClashDisplay-Variable.woff2) format('woff2');
+       font-weight: 200 700;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Clash-Light';
+  src: url(./fonts/ClashDisplay-Light.woff2) format('woff2');
+       font-weight: 300;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Clash-Regular';
+  src: url(./fonts/ClashDisplay-Regular.woff2) format('woff2');
+       font-weight: 400;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Clash-Medium';
+  src: url(./fonts/ClashDisplay-Medium.woff2) format('woff2');
+       font-weight: 500;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Clash-Bold';
+  src: url(./fonts/ClashDisplay-Bold.woff2) format('woff2');
+       font-weight: 600;
+       font-style: normal;
+}
+