From 393cd541282f9e7daa746c6dd222cdea16f239f9 Mon Sep 17 00:00:00 2001
From: Tuan Nguyen <titan.ngvtuan@gmail.com>
Date: Wed, 12 Jun 2024 15:26:49 +0700
Subject: [PATCH 1/2] update image path for sense

---
 src/components/Ticket/AcceptTicket.tsx        |  5 +--
 .../Ticket/NFTRegistrationTicket.tsx          |  5 +--
 src/components/Ticket/OfferTicket.tsx         |  5 +--
 src/components/Ticket/TransferTicket.tsx      |  5 +--
 src/pages/Details/BlockDetails/Tickets.tsx    |  3 +-
 .../Details/NftDetails/SubmittedImage.tsx     |  3 +-
 .../Details/PastelIdDetails/TicketList.tsx    |  3 +-
 .../Details/SenseDetails/SubmittedImage.tsx   |  5 ++-
 src/pages/Tickets/Tickets.helpers.tsx         | 41 ++++++++++++-------
 src/pages/TicketsType/TicketList.tsx          |  3 +-
 src/utils/helpers/url.ts                      |  6 +++
 11 files changed, 51 insertions(+), 33 deletions(-)

diff --git a/src/components/Ticket/AcceptTicket.tsx b/src/components/Ticket/AcceptTicket.tsx
index b5eca720..b730cf2a 100644
--- a/src/components/Ticket/AcceptTicket.tsx
+++ b/src/components/Ticket/AcceptTicket.tsx
@@ -2,6 +2,7 @@ import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
 import parse from 'html-react-parser';
 
+import { getSenseImage } from '@utils/helpers/url';
 import RouterLink, { ExternalLink } from '@components/RouterLink/RouterLink';
 import { formatNumber } from '@utils/helpers/formatNumbers/formatNumbers';
 import { IAcceptTicket } from '@utils/types/ITransactions';
@@ -29,9 +30,7 @@ const AcceptTicket: React.FC<IAcceptTicketProps> = ({ ticket, variant }) => {
       let image = noImagePlaceholder;
       if (ticket.image) {
         image =
-          ticket.otherData.offerType === 'nft-offer'
-            ? ticket.image
-            : `data:image/jpeg;base64,${ticket.image}`;
+          ticket.otherData.offerType === 'nft-offer' ? ticket.image : getSenseImage(ticket.image);
       }
       return (
         <img
diff --git a/src/components/Ticket/NFTRegistrationTicket.tsx b/src/components/Ticket/NFTRegistrationTicket.tsx
index 71b7a0c2..c53621dc 100644
--- a/src/components/Ticket/NFTRegistrationTicket.tsx
+++ b/src/components/Ticket/NFTRegistrationTicket.tsx
@@ -8,6 +8,7 @@ import AccordionDetails from '@mui/material/AccordionDetails';
 import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
 import parse from 'html-react-parser';
 
+import { getSenseImage } from '@utils/helpers/url';
 import RouterLink from '@components/RouterLink/RouterLink';
 import { INftRegistrationTicket, INftTicket } from '@utils/types/ITransactions';
 import * as ROUTES from '@utils/constants/routes';
@@ -255,9 +256,7 @@ const NFTRegistrationTicket: React.FC<INFTRegistrationTicketProps> = ({
               {ticket.nftId ? (
                 <Link to={`${ROUTES.NFT_DETAILS}?txid=${transactionHash}`}>
                   <img
-                    src={
-                      ticket?.image ? `data:image/jpeg;base64,${ticket.image}` : noImagePlaceholder
-                    }
+                    src={ticket?.image ? getSenseImage(ticket.image) : noImagePlaceholder}
                     alt={transactionHash}
                     className={`sense-img ${!ticket?.image ? 'placeholder' : ''}`}
                   />
diff --git a/src/components/Ticket/OfferTicket.tsx b/src/components/Ticket/OfferTicket.tsx
index 205098b3..d89e7619 100644
--- a/src/components/Ticket/OfferTicket.tsx
+++ b/src/components/Ticket/OfferTicket.tsx
@@ -2,6 +2,7 @@ import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
 import parse from 'html-react-parser';
 
+import { getSenseImage } from '@utils/helpers/url';
 import RouterLink, { ExternalLink } from '@components/RouterLink/RouterLink';
 import { formatNumber } from '@utils/helpers/formatNumbers/formatNumbers';
 import { IOfferTicket } from '@utils/types/ITransactions';
@@ -28,9 +29,7 @@ const OfferTicket: React.FC<IOfferTicketProps> = ({ ticket, variant }) => {
     let image = noImagePlaceholder;
     if (ticket.image) {
       image =
-        ticket.otherData.offerType === 'nft-offer'
-          ? ticket.image
-          : `data:image/jpeg;base64,${ticket.image}`;
+        ticket.otherData.offerType === 'nft-offer' ? ticket.image : getSenseImage(ticket.image);
     }
     return (
       <img
diff --git a/src/components/Ticket/TransferTicket.tsx b/src/components/Ticket/TransferTicket.tsx
index a68c5ec4..c456a121 100644
--- a/src/components/Ticket/TransferTicket.tsx
+++ b/src/components/Ticket/TransferTicket.tsx
@@ -2,6 +2,7 @@ import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
 import parse from 'html-react-parser';
 
+import { getSenseImage } from '@utils/helpers/url';
 import RouterLink, { ExternalLink } from '@components/RouterLink/RouterLink';
 import { ITransferTicket } from '@utils/types/ITransactions';
 import * as ROUTES from '@utils/constants/routes';
@@ -25,9 +26,7 @@ const TransferTicket: React.FC<ITransferTicketProps> = ({ ticket, variant }) =>
       let image = noImagePlaceholder;
       if (ticket.image) {
         image =
-          ticket.otherData.offerType === 'nft-offer'
-            ? ticket.image
-            : `data:image/jpeg;base64,${ticket.image}`;
+          ticket.otherData.offerType === 'nft-offer' ? ticket.image : getSenseImage(ticket.image);
       }
       return (
         <img
diff --git a/src/pages/Details/BlockDetails/Tickets.tsx b/src/pages/Details/BlockDetails/Tickets.tsx
index 83a81e73..b817c508 100644
--- a/src/pages/Details/BlockDetails/Tickets.tsx
+++ b/src/pages/Details/BlockDetails/Tickets.tsx
@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
 import { decode } from 'js-base64';
 import parse from 'html-react-parser';
 
+import { getSenseImage } from '@utils/helpers/url';
 import RouterLink from '@components/RouterLink/RouterLink';
 import * as ROUTES from '@utils/constants/routes';
 import {
@@ -302,7 +303,7 @@ const TicketsList: React.FC<ITicketsList> = ({
                   <img
                     src={
                       sense.imageFileCdnUrl
-                        ? `data:image/jpeg;base64,${sense.imageFileCdnUrl}`
+                        ? getSenseImage(sense.imageFileCdnUrl)
                         : noImagePlaceholder
                     }
                     alt={sense.imageFileHash}
diff --git a/src/pages/Details/NftDetails/SubmittedImage.tsx b/src/pages/Details/NftDetails/SubmittedImage.tsx
index f4039508..b6ea7402 100644
--- a/src/pages/Details/NftDetails/SubmittedImage.tsx
+++ b/src/pages/Details/NftDetails/SubmittedImage.tsx
@@ -1,3 +1,4 @@
+import { getSenseImage } from '@utils/helpers/url';
 import noImagePlaceholder from '@assets/images/no-image-placeholder.svg';
 
 import * as Styles from './NftDetails.styles';
@@ -10,7 +11,7 @@ interface ISubmittedImage {
 const SubmittedImage: React.FC<ISubmittedImage> = ({ img, alt }) => {
   return (
     <Styles.SubmittedImageWrapper className={`${!img ? 'image-placeholder' : ''}`}>
-      <img src={img ? `data:image/jpeg;base64,${img}` : noImagePlaceholder} alt={alt || ''} />
+      <img src={img ? getSenseImage(img) : noImagePlaceholder} alt={alt || ''} />
     </Styles.SubmittedImageWrapper>
   );
 };
diff --git a/src/pages/Details/PastelIdDetails/TicketList.tsx b/src/pages/Details/PastelIdDetails/TicketList.tsx
index 718a8246..6944eaa3 100644
--- a/src/pages/Details/PastelIdDetails/TicketList.tsx
+++ b/src/pages/Details/PastelIdDetails/TicketList.tsx
@@ -5,6 +5,7 @@ import { decode } from 'js-base64';
 import parse from 'html-react-parser';
 import { SelectChangeEvent } from '@mui/material/Select';
 
+import { getSenseImage } from '@utils/helpers/url';
 import RouterLink from '@components/RouterLink/RouterLink';
 import * as ROUTES from '@utils/constants/routes';
 import {
@@ -160,7 +161,7 @@ const TicketsList: React.FC<ITicketsList> = ({
                   <img
                     src={
                       sense.imageFileCdnUrl
-                        ? `data:image/jpeg;base64,${sense.imageFileCdnUrl}`
+                        ? getSenseImage(sense.imageFileCdnUrl)
                         : noImagePlaceholder
                     }
                     alt={sense.imageFileHash}
diff --git a/src/pages/Details/SenseDetails/SubmittedImage.tsx b/src/pages/Details/SenseDetails/SubmittedImage.tsx
index d1b1fc1b..dc4a0541 100644
--- a/src/pages/Details/SenseDetails/SubmittedImage.tsx
+++ b/src/pages/Details/SenseDetails/SubmittedImage.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import Box from '@mui/material/Box';
 
 import { translateDropdown } from '@utils/helpers/i18n';
+import { getSenseImage } from '@utils/helpers/url';
 
 import imagePlaceholder from '@assets/images/no-image-placeholder.svg';
 import * as Styles from './SenseDetails.styles';
@@ -31,7 +32,7 @@ const SubmittedImage: React.FC<ISubmittedImageProps> = ({ imageUrl, imageHash })
             onClick={handleClickOpen}
             title={translateDropdown('pages.senseDetails.viewFull')}
           >
-            <img src={`data:image/jpeg;base64,${imageUrl}`} alt={imageHash} />
+            <img src={getSenseImage(imageUrl)} alt={imageHash} />
           </button>
         ) : (
           <Box className="image-placeholder-wrapper">
@@ -41,7 +42,7 @@ const SubmittedImage: React.FC<ISubmittedImageProps> = ({ imageUrl, imageHash })
       </Box>
       <Styles.Dialog onClose={handleClose} open={open}>
         <Styles.FullImageWrapper>
-          <img src={`data:image/jpeg;base64,${imageUrl}`} alt={imageHash} />
+          <img src={getSenseImage(imageUrl)} alt={imageHash} />
         </Styles.FullImageWrapper>
       </Styles.Dialog>
     </>
diff --git a/src/pages/Tickets/Tickets.helpers.tsx b/src/pages/Tickets/Tickets.helpers.tsx
index cb9ef349..6e1433ce 100644
--- a/src/pages/Tickets/Tickets.helpers.tsx
+++ b/src/pages/Tickets/Tickets.helpers.tsx
@@ -9,6 +9,7 @@ import { Link } from 'react-router-dom';
 import parse from 'html-react-parser';
 import { decode } from 'js-base64';
 
+import { getSenseImage } from '@utils/helpers/url';
 import CopyButton from '@components/CopyButton/CopyButton';
 import RouterLink from '@components/RouterLink/RouterLink';
 import * as ROUTES from '@utils/constants/routes';
@@ -343,11 +344,7 @@ export const transformSenseData = (sense: TicketsList[], usdPrice: number) =>
                   {dupeDetectionSystemVersion && imageFileCdnUrl ? (
                     <Link to={`${ROUTES.SENSE_DETAILS}?txid=${transactionHash}&hash=${imageHash}`}>
                       <img
-                        src={
-                          imageFileCdnUrl
-                            ? `data:image/jpeg;base64,${imageFileCdnUrl}`
-                            : noImagePlaceholder
-                        }
+                        src={imageFileCdnUrl ? getSenseImage(imageFileCdnUrl) : noImagePlaceholder}
                         alt={imageHash}
                         className="sense-img"
                       />
@@ -380,11 +377,7 @@ export const transformSenseData = (sense: TicketsList[], usdPrice: number) =>
                   {dupeDetectionSystemVersion && imageFileCdnUrl ? (
                     <Link to={`${ROUTES.SENSE_DETAILS}?txid=${transactionHash}&hash=${imageHash}`}>
                       <img
-                        src={
-                          imageFileCdnUrl
-                            ? `data:image/jpeg;base64,${imageFileCdnUrl}`
-                            : noImagePlaceholder
-                        }
+                        src={imageFileCdnUrl ? getSenseImage(imageFileCdnUrl) : noImagePlaceholder}
                         alt={imageHash}
                         className="sense-img"
                       />
@@ -411,11 +404,7 @@ export const transformSenseData = (sense: TicketsList[], usdPrice: number) =>
                   {dupeDetectionSystemVersion && imageFileCdnUrl ? (
                     <Link to={`${ROUTES.SENSE_DETAILS}?txid=${transactionHash}&hash=${imageHash}`}>
                       <img
-                        src={
-                          imageFileCdnUrl
-                            ? `data:image/jpeg;base64,${imageFileCdnUrl}`
-                            : noImagePlaceholder
-                        }
+                        src={imageFileCdnUrl ? getSenseImage(imageFileCdnUrl) : noImagePlaceholder}
                         alt={imageHash}
                         className="sense-img"
                       />
@@ -627,6 +616,17 @@ export const transformOfferAndTransferData = (data: TicketsList[]) =>
       };
 
       const getImage = () => {
+        if (ticketType === 'sense') {
+          return (
+            <Link to={getInfo().link}>
+              <img
+                src={image ? getSenseImage(image) : noImagePlaceholder}
+                alt={reTxId}
+                className="sense-img"
+              />
+            </Link>
+          );
+        }
         return (
           <Link to={getInfo().link}>
             <img
@@ -910,6 +910,17 @@ export const transformInferenceAPICreditPackData = (data: TicketsList[]) =>
     };
 
     const getImage = () => {
+      if (ticketType === 'sense') {
+        return (
+          <Link to={getInfo().link}>
+            <img
+              src={image ? getSenseImage(image) : noImagePlaceholder}
+              alt={reTxId}
+              className="sense-img"
+            />
+          </Link>
+        );
+      }
       return (
         <Link to={getInfo().link}>
           <img
diff --git a/src/pages/TicketsType/TicketList.tsx b/src/pages/TicketsType/TicketList.tsx
index 412cc79f..c58ddfe1 100644
--- a/src/pages/TicketsType/TicketList.tsx
+++ b/src/pages/TicketsType/TicketList.tsx
@@ -9,6 +9,7 @@ import { decode } from 'js-base64';
 import parse from 'html-react-parser';
 import { SelectChangeEvent } from '@mui/material/Select';
 
+import { getSenseImage } from '@utils/helpers/url';
 import RouterLink from '@components/RouterLink/RouterLink';
 import * as ROUTES from '@utils/constants/routes';
 import {
@@ -200,7 +201,7 @@ const TicketsList: React.FC<ITicketsList> = ({
                   <img
                     src={
                       sense.imageFileCdnUrl
-                        ? `data:image/jpeg;base64,${sense.imageFileCdnUrl}`
+                        ? getSenseImage(sense.imageFileCdnUrl)
                         : noImagePlaceholder
                     }
                     alt={sense.imageFileHash}
diff --git a/src/utils/helpers/url.ts b/src/utils/helpers/url.ts
index 4eeffc40..758e58c5 100644
--- a/src/utils/helpers/url.ts
+++ b/src/utils/helpers/url.ts
@@ -1,4 +1,10 @@
+import { getBaseURL } from '@utils/constants/statistics';
+
 export const getParameterByName = (name: string, url = window.location.search) => {
   const params = new URLSearchParams(url);
   return params.get(name) || '';
 };
+
+export const getSenseImage = (imageUrl: string) => {
+  return `${getBaseURL()}/static/sense_images/${imageUrl}`;
+};

From adb25a4f4c8b0daf00f6ba083199a74ffb97cfcc Mon Sep 17 00:00:00 2001
From: Tuan Nguyen <titan.ngvtuan@gmail.com>
Date: Fri, 14 Jun 2024 16:58:44 +0700
Subject: [PATCH 2/2] Added minimum percent for the 24h change in dashboard.

---
 src/components/Summary/Summary.helpers.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/Summary/Summary.helpers.ts b/src/components/Summary/Summary.helpers.ts
index 822df02b..309a82f8 100644
--- a/src/components/Summary/Summary.helpers.ts
+++ b/src/components/Summary/Summary.helpers.ts
@@ -109,7 +109,14 @@ export const calculateDifference = (
     difference = ((firstValue - secondValue) / targetValue) * 100;
   }
 
-  return difference.toFixed(2);
+  let value = difference.toFixed(2);
+  if (Number(difference) > 0 && Number(difference) < 0.01) {
+    value = '0.01';
+  } else if (Number(difference) < 0 && Number(difference) > -0.01) {
+    value = '-0.01';
+  }
+
+  return value;
 };
 
 export const getRouteForChart = (key: string) => {