From 45af188906ccef6c539d5ee540ea111f8359645d Mon Sep 17 00:00:00 2001
From: Mark Paul <paul.mark@gmail.com>
Date: Mon, 7 Aug 2023 23:18:30 +1000
Subject: [PATCH] fixes for #83, #84, #85. Good error message for web wallet on
 wallet screen, SVG links open in new window, model outside clicks dont close
 it anymore

---
 package-lock.json                   |  4 ++--
 package.json                        |  2 +-
 src/components/Layout/Layout.tsx    | 14 +++++++++-----
 src/components/TrailBlazerModal.tsx |  4 ++--
 src/libs/ui.ts                      | 23 ++++++++++++++++++++---
 src/pages/MultiversxBubbles.tsx     | 17 +++++++++++++----
 src/pages/MyWallet.tsx              | 27 +++++++++++++++++++++++++--
 7 files changed, 72 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a54918f0..14e27bd0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "explorer-dapp",
-  "version": "0.1.0.beta.2",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "explorer-dapp",
-      "version": "0.1.0.beta.2",
+      "version": "0.2.0",
       "license": "GPL-3.0-or-later",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "6.1.0",
diff --git a/package.json b/package.json
index c63d2bf7..59b7e0c9 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "explorer-dapp",
   "description": "Itheum Explorer the public explore the Itheum protocol components",
-  "version": "0.1.0.beta.2",
+  "version": "0.2.0",
   "author": "Itheum",
   "license": "GPL-3.0-or-later",
   "dependencies": {
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index 4aade35b..95894805 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -13,15 +13,19 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
     <div className="d-flex flex-column flex-fill wrapper">
       <Navbar />
       <main className="d-flex flex-column flex-grow-1">
-        <AuthenticatedRoutesWrapper
-          routes={routes}
-          unlockRoute={`${routeNames.unlock}${search}`}
-        >
+        <AuthenticatedRoutesWrapper routes={routes} unlockRoute={`${routeNames.unlock}${search}`}>
           {children}
         </AuthenticatedRoutesWrapper>
       </main>
       <Footer />
-      <Toaster />
+      <Toaster
+        toastOptions={{
+          // Default options for specific types
+          error: {
+            duration: 30000,
+          },
+        }}
+      />
     </div>
   );
 };
diff --git a/src/components/TrailBlazerModal.tsx b/src/components/TrailBlazerModal.tsx
index 32725e00..63d1f3fa 100644
--- a/src/components/TrailBlazerModal.tsx
+++ b/src/components/TrailBlazerModal.tsx
@@ -230,7 +230,7 @@ export const TrailBlazerModal = ({
   }
 
   return (
-    <Modal isOpen={isModalOpened} onRequestClose={closeModal} style={customStyles} ariaHideApp={false}>
+    <Modal isOpen={isModalOpened} onRequestClose={closeModal} style={customStyles} ariaHideApp={false} shouldCloseOnOverlayClick={false}>
       <div style={{ height: "3rem" }}>
         <div
           style={{
@@ -243,7 +243,7 @@ export const TrailBlazerModal = ({
         </div>
       </div>
       <ModalHeader>
-        <h4 className="text-center font-title font-weight-bold">Itheum Trailblazer</h4>
+        <h4 className="text-center font-title font-weight-bold">Trailblazer</h4>
       </ModalHeader>
       <ModalBody>
         {!owned ? (
diff --git a/src/libs/ui.ts b/src/libs/ui.ts
index 7c20ecef..6a45baa4 100644
--- a/src/libs/ui.ts
+++ b/src/libs/ui.ts
@@ -2,8 +2,8 @@ import { MARKETPLACE_DETAILS_PAGE } from "config";
 
 export const modalStyles = {
   overlay: {
-    backgroundColor: 'var(--light-20) !important',
-    backdropFilter: 'blur(10px)',
+    backgroundColor: "var(--light-20) !important",
+    backdropFilter: "blur(10px)",
   },
   content: {
     width: "80%",
@@ -13,6 +13,23 @@ export const modalStyles = {
     bottom: "auto",
     marginRight: "-50%",
     transform: "translate(-50%, -50%)",
-    backgroundColor: 'var(--light)',
+    backgroundColor: "var(--light)",
+  },
+};
+
+export const modalStylesFull = {
+  overlay: {
+    backgroundColor: "var(--light-20) !important",
+    backdropFilter: "blur(10px)",
+  },
+  content: {
+    width: "95%",
+    top: "50%",
+    left: "50%",
+    right: "auto",
+    bottom: "auto",
+    marginRight: "-50%",
+    transform: "translate(-50%, -50%)",
+    backgroundColor: "var(--light)",
   },
 };
diff --git a/src/pages/MultiversxBubbles.tsx b/src/pages/MultiversxBubbles.tsx
index 79a69df2..d387c4ac 100644
--- a/src/pages/MultiversxBubbles.tsx
+++ b/src/pages/MultiversxBubbles.tsx
@@ -16,7 +16,7 @@ import { MULTIVERSX_BUBBLE_NONCES } from "config";
 import { useGetAccount, useGetPendingTransactions } from "hooks";
 import { getMessageSignatureFromWalletUrl } from "libs/mvx";
 import { BlobDataType } from "libs/types";
-import { modalStyles } from "libs/ui";
+import { modalStylesFull } from "libs/ui";
 import { toastError } from "libs/utils";
 import { routeNames } from "routes";
 
@@ -200,6 +200,15 @@ export const MultiversxBubbles = () => {
     }
   }
 
+  function preProcess(code: any) {
+    // let newCode = code.replace(/fill=".*?"/g, 'fill="red"');
+    let newCode = code.replace(/height="1080pt"/, 'height="100%"');
+    newCode = newCode.replace(/width="1080pt"/, 'width="100%"');
+    newCode = newCode.replace(/<a/g, '<a xlink:show="new"'); // makes all link open in new tab
+
+    return newCode;
+  }
+
   if (isLoading) {
     return <Loader />;
   }
@@ -230,7 +239,7 @@ export const MultiversxBubbles = () => {
         </div>
       </div>
 
-      <Modal isOpen={isModalOpened} onRequestClose={closeModal} style={modalStyles} ariaHideApp={false}>
+      <Modal isOpen={isModalOpened} onRequestClose={closeModal} style={modalStylesFull} ariaHideApp={false} shouldCloseOnOverlayClick={false}>
         <div style={{ height: "3rem" }}>
           <div
             style={{
@@ -243,7 +252,7 @@ export const MultiversxBubbles = () => {
           </div>
         </div>
         <ModalHeader>
-          <h4 className="text-center font-title font-weight-bold">View Data</h4>
+          <h4 className="text-center font-title font-weight-bold">MultiversX Bubbles</h4>
         </ModalHeader>
         <ModalBody
           style={{
@@ -289,7 +298,7 @@ export const MultiversxBubbles = () => {
                     <audio controls autoPlay src={viewDataRes.data} />
                   </div>
                 ) : viewDataRes.blobDataType === BlobDataType.SVG ? (
-                  <SVG src={viewDataRes.data} style={{ width: "100%", height: "auto" }} />
+                  <SVG src={viewDataRes.data} preProcessor={(code) => preProcess(code)} style={{ width: "100%", height: "auto" }} />
                 ) : (
                   <p className="p-2" style={{ wordWrap: "break-word", whiteSpace: "pre-wrap" }}>
                     {viewDataRes.data}
diff --git a/src/pages/MyWallet.tsx b/src/pages/MyWallet.tsx
index 03695375..3567483b 100644
--- a/src/pages/MyWallet.tsx
+++ b/src/pages/MyWallet.tsx
@@ -16,6 +16,7 @@ import { BlobDataType } from "libs/types";
 import { modalStyles } from "libs/ui";
 import { toastError } from "libs/utils";
 import { routeNames } from "routes";
+import toast from "react-hot-toast";
 
 interface ExtendedViewDataReturnType extends ViewDataReturnType {
   blobDataType: BlobDataType;
@@ -71,7 +72,29 @@ export const MyWallet = () => {
 
   async function viewNormalData(index: number) {
     if (isWebWallet) {
-      toastError("Web Wallet is not supported on this page.");
+      toast.error(
+        <div>
+          Web Wallet is yet to be supported as an option to <b>View Data</b> on this page (it's coming very soon). In the meantime: <br />
+          <br />
+          <div>
+            1) You can use Web Wallet to <b>View Data</b> in <b>Itheum Explorer</b> by using a custom app in the <b>App Marketplace</b> section by{" "}
+            <a href="/" target="_blank">
+              heading here
+            </a>
+          </div>
+          <br />
+          <div>
+            2) Or head over to the <b>Data DEX</b> at{" "}
+            <a href="https://datadex.itheum.io" target="_blank">
+              datadex.itheum.io
+            </a>
+            , login, and then navigate to the <b>Wallet</b> section to view and open your Data NFTs.
+          </div>
+        </div>,
+        {
+          position: "top-right",
+        }
+      );
       return;
     }
     if (!(index >= 0 && index < dataNfts.length)) {
@@ -262,7 +285,7 @@ export const MyWallet = () => {
       {isTrailBlazer || targetNonce ? (
         <TrailBlazerModal isModalOpened={isModalOpened} closeModal={closeModal} owned={true} isFetchingDataMarshal={isFetchingDataMarshal} data={data} />
       ) : (
-        <Modal isOpen={isModalOpened} onRequestClose={closeModal} style={modalStyles} ariaHideApp={false}>
+        <Modal isOpen={isModalOpened} onRequestClose={closeModal} style={modalStyles} ariaHideApp={false} shouldCloseOnOverlayClick={false}>
           <div style={{ height: "3rem" }}>
             <div
               style={{