D enciu 1.10.0

package.json

@@ -29,14 +29,12 @@
     "react-calendar-heatmap": "1.9.0",
     "react-dom": "18.2.0",
     "react-hot-toast": "2.4.1",
-    "react-icons": "5.0.1",
     "react-inlinesvg": "3.0.3",
     "react-pdf": "7.7.0",
     "react-router-dom": "6.21.2",
     "react-slick": "0.29.0",
     "react-vertical-timeline-component": "3.6.0",
     "react-zoom-pan-pinch": "3.3.0",
-    "sass": "1.69.7",
     "slick-carousel": "1.8.1",
     "tailwind-merge": "2.2.0",
     "tailwindcss-animate": "1.0.7",
@@ -82,7 +80,6 @@
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "jsdom": "23.2.0",
-    "nft.storage": "7.1.1",
     "postcss": "8.4.33",
     "prettier": "3.2.2",
     "tailwindcss": "3.4.1",

src/components/CustomPagination.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useState } from "react";
-import { FaAngleDoubleLeft, FaAngleDoubleRight, FaAngleLeft, FaAngleRight } from "react-icons/fa";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
 
 // const PAGE_SIZES: number[] = [8, 16, 24];
 const THROTTLE_TIME = 500;
@@ -49,7 +49,7 @@ export const CustomPagination: FC<PropsType> = ({
             }, THROTTLE_TIME);
           }}
           disabled={!canPreviousPage || isInThrottle || disabled}>
-          <FaAngleDoubleLeft />
+          <ChevronsLeft strokeWidth={2.5} />
         </button>
         <button
           className="btn btn-primary"
@@ -61,7 +61,7 @@ export const CustomPagination: FC<PropsType> = ({
             }, THROTTLE_TIME);
           }}
           disabled={!canPreviousPage || isInThrottle || disabled}>
-          <FaAngleLeft />
+          <ChevronLeft strokeWidth={2.5} />
         </button>
       </div>
 
@@ -82,7 +82,7 @@ export const CustomPagination: FC<PropsType> = ({
             }, THROTTLE_TIME);
           }}
           disabled={!canNextPage || isInThrottle || disabled}>
-          <FaAngleRight />
+          <ChevronRight strokeWidth={2.5} />
         </button>
         <button
           className="btn btn-primary"
@@ -94,7 +94,7 @@ export const CustomPagination: FC<PropsType> = ({
             }, THROTTLE_TIME);
           }}
           disabled={!canNextPage || isInThrottle || disabled}>
-          <FaAngleDoubleRight />
+          <ChevronsRight strokeWidth={2.5} />
         </button>
       </div>
     </div>

src/components/Layout/Navbar.tsx

@@ -58,8 +58,10 @@ export const Navbar = () => {
       <div className="flex flex-row items-center text-xl">
         <Link className="flex flex-row items-center" to={isLoggedIn ? routeNames.home : routeNames.home}>
           <img src={logo192} className="w-[5rem]" />
-          <span className="text-black dark:!text-white md:text-lg text-base">Itheum&nbsp;</span>
-          <span className="text-black dark:!text-white font-bold md:text-lg text-base">Explorer</span>
+          <div className="flex flex-col leading-none">
+            <span className="text-black dark:!text-white md:text-lg text-base -mb-1">Itheum&nbsp;</span>
+            <span className="bg-clip-text bg-gradient-to-r from-yellow-300 to-orange-500 text-transparent font-bold text-base ">Explorer</span>
+          </div>
         </Link>
       </div>
 

src/components/MXAddressLink.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { FaExternalLinkAlt } from "react-icons/fa";
+import { ExternalLink } from "lucide-react";
 
 interface MXAddressLinkPropsType {
   explorerAddress: string;
@@ -14,7 +14,7 @@ export const MXAddressLink: FC<MXAddressLinkPropsType> = ({ explorerAddress, add
       href={`${explorerAddress}/accounts/${address}`}
       target="_blank">
       {precision > 0 ? address.slice(0, precision) + " ... " + address.slice(-precision) : address}
-      <FaExternalLinkAlt className="ml-2" />
+      <ExternalLink strokeWidth={2.5} size={16} className="ml-1" />
     </a>
   );
 };

src/components/ZoomableSvg/index.tsx

@@ -4,7 +4,7 @@ import { TransformWrapper, TransformComponent, ReactZoomPanPinchRef } from "reac
 import svgReset from "./Reset.svg";
 import svgZoomIn from "./ZoomIn.svg";
 import svgZoomOut from "./ZoomOut.svg";
-import "./index.scss";
+import "./index.css";
 
 const INITIAL_SCALE = 2;
 

src/pages/AppMarketplace/ItheumTrailblazer/components/TrailBlazerModal.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useGetLoginInfo } from "@multiversx/sdk-dapp/hooks";
-import { ShoppingCart } from "lucide-react";
-import { FaCalendarCheck, FaChartBar, FaChessKnight, FaFlagCheckered, FaHandshake, FaMoneyBillAlt, FaShopify, FaTrophy } from "react-icons/fa";
+import { Banknote, BarChart3, CalendarCheck, Flag, HeartHandshake, Map, ShoppingCart, Trophy } from "lucide-react";
 import { VerticalTimeline, VerticalTimelineElement } from "react-vertical-timeline-component";
 import { Loader } from "components";
 import { Modal } from "../../../../components/Modal/Modal";
@@ -34,22 +33,22 @@ export const TrailBlazerModal = ({ owned, isFetchingDataMarshal, data }: { owned
   const getIconForCategory = (dataItem: any) => {
     switch (dataItem.category) {
       case "Partnership":
-        return <FaHandshake />;
+        return <HeartHandshake strokeWidth={2.5} />;
         break;
       case "Achievement":
-        return <FaTrophy />;
+        return <Trophy strokeWidth={2.5} />;
         break;
       case "Offer":
-        return <FaMoneyBillAlt />;
+        return <Banknote strokeWidth={2.5} />;
         break;
       case "Quest":
-        return <FaChessKnight />;
+        return <Map strokeWidth={2.5} />;
         break;
       case "Leaderboard":
-        return <FaChartBar />;
+        return <BarChart3 strokeWidth={2.5} />;
         break;
       default:
-        return <FaCalendarCheck />;
+        return <CalendarCheck strokeWidth={2.5} />;
         break;
     }
   };
@@ -76,9 +75,7 @@ export const TrailBlazerModal = ({ owned, isFetchingDataMarshal, data }: { owned
                   <span>{dataItem.title}</span>
                   <div className="flex flex-row items-center">
                     <span>Claimable On:</span>
-                    <div className="pl-2">
-                      <FaShopify className="h-5 w-5" />
-                    </div>
+                    <div className="pl-1 font-semibold">Shopify</div>
                   </div>
                 </div>
                 <a className="!no-underline" href={dataItem.link} target="_blank">
@@ -106,7 +103,7 @@ export const TrailBlazerModal = ({ owned, isFetchingDataMarshal, data }: { owned
               <div className="text-xl pt-1">Psst! A secret quest is underway.</div>
               <div className="flex md:flex-row flex-col w-full justify-around items-center py-4 gap-3">
                 <div className="">
-                  <FaFlagCheckered className="w-12 h-12" />
+                  <Flag className="w-12 h-12" />
                 </div>
                 <div className="flex flex-col space-y-2">
                   <div className="w-48 leading-relaxed text-[14px]">{dataItem.title}</div>

src/pages/AppMarketplace/MultiversxInfographics/MultiversxInfographics.css

@@ -30,10 +30,6 @@
   text-align: center;
 }
 
-  button {
-    cursor: pointer;
-  }
-
   .btn-outline-primary:hover:disabled {
     color: grey;
     cursor: initial;

src/pages/Home.tsx

@@ -29,7 +29,7 @@ export const Home = () => {
             <Link to={returnRoute(item.routeKey)} className="text-base hover:!no-underline hover:text-black">
               <div className="w-[7.5rem] relative bg-gradient-to-r from-yellow-300 to-orange-500 px-[1px] py-[1px] rounded-md justify-center">
                 <div className="bg-background rounded-md">
-                  <Button className="text-sm tracking-tight relative px-[3.75rem] left-2 bottom-1.5 bg-gradient-to-r from-yellow-300 to-orange-500 transition ease-in-out delay-150 duration-300 hover:translate-y-1.5 hover:-translate-x-[8px] hover:scale-100">
+                  <Button className="text-sm tracking-tight relative px-[2.35rem] left-2 bottom-1.5 bg-gradient-to-r from-yellow-300 to-orange-500 transition ease-in-out delay-150 duration-300 hover:translate-y-1.5 hover:-translate-x-[8px] hover:scale-100">
                     Launch
                   </Button>
                 </div>

src/pages/MultiversxInfographics.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { DataNft, ViewDataReturnType } from "@itheum/sdk-mx-data-nft";
 import { useGetLoginInfo } from "@multiversx/sdk-dapp/hooks";
-import { IoClose } from "react-icons/io5";
 import SVG from "react-inlinesvg";
 import { MULTIVERSX_INFOGRAPHICS_TOKENS } from "appsConfig";
 import headerHero from "assets/img/custom-app-header-infographs.png";
@@ -10,6 +9,7 @@ import { useGetAccount, useGetPendingTransactions } from "hooks";
 import { BlobDataType } from "libs/types";
 import { decodeNativeAuthToken, toastError } from "libs/utils";
 import { HeaderComponent } from "../components/Layout/HeaderComponent";
+import { X } from "lucide-react";
 
 interface ExtendedViewDataReturnType extends ViewDataReturnType {
   blobDataType: BlobDataType;
@@ -190,7 +190,7 @@ export const MultiversxInfographics = () => {
               fontSize: "2rem",
             }}
             onClick={closeModal}>
-            <IoClose />
+            <X strokeWidth={2.5} />
           </div>
         </div>
         <h4 className="text-center font-title font-weight-bold">MultiversX Infographics</h4>

src/pages/MyListed.tsx

@@ -1,15 +1,15 @@
 import React, { useEffect, useState } from "react";
 import { DataNft, Offer } from "@itheum/sdk-mx-data-nft";
 import { Address } from "@multiversx/sdk-core/out";
-import { FaExternalLinkAlt } from "react-icons/fa";
-import { MXAddressLink, Loader } from "components";
+import { Loader, MXAddressLink } from "components";
 import { MARKETPLACE_DETAILS_PAGE } from "config";
 import { useGetAccount, useGetNetworkConfig, useGetPendingTransactions } from "hooks";
 import { dataNftMarket } from "libs/mvx";
 import { convertToLocalString } from "libs/utils";
 import { createNftId } from "libs/utils/token";
 import { HeaderComponent } from "../components/Layout/HeaderComponent";
 import { Card, CardContent } from "../libComponents/Card";
+import { ExternalLink } from "lucide-react";
 
 export const MyListed = () => {
   const {
@@ -73,8 +73,8 @@ export const MyListed = () => {
           if (dataNft) {
             return (
               <div className="mb-3" key={`o-c-${index}`}>
-                <Card className="border-[0.5px] dark:border-slate-100/30 border-slate-300 bg-transparent rounded-[2.37rem] xl:w-[330px] w-[296px]">
-                  <CardContent className="flex flex-col p-3">
+                <Card className="border-[0.5px] dark:border-slate-100/30 border-slate-300 bg-transparent rounded-[2.37rem] xl:w-[330px] w-[296px] pb-5">
+                  <CardContent className="flex flex-col p-4">
                     <div className="mb-4">
                       <img src={isDataNftLoaded ? dataNft.nftImgUrl : "https://media.elrond.com/nfts/thumbnail/default.png"} alt="dataNftImage" />
                     </div>
@@ -91,7 +91,7 @@ export const MyListed = () => {
                               href={`${MARKETPLACE_DETAILS_PAGE}${nftId}`}
                               className="!text-blue-500 text-decoration-none hover:!text-blue-500/80"
                               target="_blank">
-                              <FaExternalLinkAlt />
+                              <ExternalLink strokeWidth={2.5} size={16} />
                             </a>
                           </div>
                         </span>

src/pages/PageNotFound.tsx

@@ -1,20 +1,17 @@
 import * as React from "react";
-import { faSearch } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useLocation } from "react-router-dom";
+import { Search } from "lucide-react";
 
 export const PageNotFound = () => {
   const { pathname } = useLocation();
 
   return (
-    <div className="flex flex-fill items-center container">
-      <div className="col-12 col-md-8 col-lg-5 mx-auto">
-        <div className="card shadow-accent-foreground/40 shadow-md rounded p-4 border-0 bg-background">
-          <div className="card-body text-center flex flex-col justify-center">
-            <FontAwesomeIcon icon={faSearch} className="mx-auto fa-3x mb-2" />
-            <span className=" mt-3">Page not found</span>
-            <span className="empty-details">{pathname}</span>
-          </div>
+    <div className="flex w-full h-[90svh] justify-center items-center">
+      <div className="w-4/12 shadow-accent-foreground/40 shadow-md rounded p-4 border-0 bg-background">
+        <div className="text-center flex flex-col justify-center p-10">
+          <Search strokeWidth={2.5} className="mx-auto w-20 h-20" />
+          <span className="text-xl mt-3">Page not found</span>
+          <span className="text-lg text-muted-foreground">{pathname}</span>
         </div>
       </div>
     </div>