D enciu

.eslintrc

@@ -31,9 +31,10 @@
   },
   "extends": [
     "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended"
+    "plugin:react-hooks/recommended",
+    "prettier"
   ],
-  "plugins": ["react-hooks", "import"],
+  "plugins": ["react-hooks", "prettier", "import"],
   "rules": {
     "import/order": [
       "warn",

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "printWidth": 160,
+  "singleQuote": false,
+  "quoteProps": "preserve",
+  "trailingComma": "es5",
+  "editor.formatOnSave": true,
+  "tabWidth": 2,
+  "bracketSameLine": true,
+  "bracketSpacing": true,
+  "arrowParens": "always"
+}

package.json

@@ -1,40 +1,42 @@
 {
   "name": "explorer-dapp",
   "description": "Itheum Explorer the public explore the Itheum protocol components",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "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.4",
     "@multiversx/sdk-core": "12.2.1",
     "@multiversx/sdk-dapp": "2.10.17",
-    "@multiversx/sdk-network-providers": "^1.4.0",
-    "@types/react-modal": "^3.16.0",
+    "@multiversx/sdk-network-providers": "1.4.0",
+    "@types/react-modal": "3.16.0",
     "axios": "0.24.0",
     "bootstrap": "4.6.2",
-    "chartjs-plugin-zoom": "^2.0.1",
-    "d3": "^7.8.5",
+    "chartjs-plugin-zoom": "2.0.1",
+    "d3": "7.8.5",
     "moment": "2.29.4",
-    "moment-timezone": "^0.5.43",
+    "moment-timezone": "0.5.43",
     "react": "18.2.0",
-    "react-bootstrap": "^2.7.4",
-    "react-calendar-heatmap": "^1.9.0",
-    "react-chartjs-2": "^5.2.0",
+    "react-bootstrap": "2.7.4",
+    "react-calendar-heatmap": "1.9.0",
+    "react-chartjs-2": "5.2.0",
     "react-dom": "18.2.0",
-    "react-hot-toast": "^2.4.0",
-    "react-icons": "^4.8.0",
-    "react-modal": "^3.16.1",
+    "react-hot-toast": "2.4.0",
+    "react-icons": "4.8.0",
+    "react-modal": "3.16.1",
     "react-router-dom": "6.4.2",
-    "react-tooltip": "^5.11.1",
-    "react-vertical-timeline-component": "^3.6.0",
-    "styled-components": "^5.3.11",
+    "react-tooltip": "5.11.1",
+    "react-vertical-timeline-component": "3.6.0",
+    "styled-components": "5.3.11",
     "web-vitals": "1.0.1"
   },
   "scripts": {
     "start": "REACT_APP_VERSION=$(node -pe 'require(\"./package.json\").version') react-app-rewired start",
+    "winStart": "set \"REACT_APP_VERSION=$(node -pe 'require(\"./package.json\").version')\" && react-app-rewired start",
     "build": "REACT_APP_VERSION=$(node -pe 'require(\"./package.json\").version') react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject",
@@ -54,14 +56,14 @@
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
-    "@types/d3": "^7.4.0",
+    "@types/d3": "7.4.0",
     "@types/jest": "26.0.15",
     "@types/node": "12.0.0",
     "@types/react": "18.0.24",
     "@types/react-dom": "18.0.8",
     "@types/react-router-dom": "5.1.7",
-    "@types/react-vertical-timeline-component": "^3.3.3",
-    "@types/styled-components": "^5.1.26",
+    "@types/react-vertical-timeline-component": "3.3.3",
+    "@types/styled-components": "5.1.26",
     "crypto-browserify": "3.12.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-config-react": "1.1.7",
@@ -75,13 +77,14 @@
     "eslint-plugin-promise": "6.0.0",
     "eslint-plugin-react": "7.30.1",
     "eslint-plugin-react-hooks": "4.6.0",
-    "nft.storage": "^7.0.3",
+    "nft.storage": "7.0.3",
     "path-browserify": "1.0.1",
     "prettier": "2.7.1",
     "react-app-rewired": "2.2.1",
     "react-scripts": "5.0.1",
     "sass": "1.55.0",
     "stream-browserify": "3.0.0",
+    "tailwindcss": "3.3.3",
     "typescript": "4.1.2"
   },
   "resolutions": {

src/components/Layout/Layout.tsx

@@ -8,6 +8,7 @@ import { Navbar } from "./Navbar";
 
 export const Layout = ({ children }: { children: React.ReactNode }) => {
   const { search } = useLocation();
+
   return (
     <div className="d-flex flex-column flex-fill wrapper">
       <Navbar />

src/components/Modal/TwModal.tsx

@@ -0,0 +1,73 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { Fragment, useState } from "react";
+
+type ModalProps = {
+  isModalOpen: boolean;
+  content: React.ReactElement;
+  setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export default function MyModal(props: ModalProps) {
+  const { isModalOpen = false, content, setIsModalOpen } = props;
+  let [isOpen, setIsOpen] = useState(isModalOpen);
+
+  function closeModal() {
+    setIsOpen(false);
+  }
+
+  function openModal() {
+    setIsOpen(isModalOpen);
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={openModal}
+        className="rounded-md bg-black bg-opacity-20 px-4 py-2 text-sm font-medium text-white hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
+        Open dialog
+      </button>
+
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as="div" className="relative z-10" onClose={closeModal}>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0">
+            <div className="fixed inset-0 bg-black bg-opacity-25 backdrop-blur-md" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 overflow-y-auto">
+            <div className="flex min-h-full items-center justify-center p-4 text-center">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95">
+                <Dialog.Panel className="w-full max-w-6xl transform overflow-hidden rounded-2xl bg-black p-6 text-left align-middle shadow-xl transition-all">
+                  <div className="mt-2">{content}</div>
+
+                  <div className="mt-4">
+                    <button
+                      type="button"
+                      className="inline-flex justify-center !rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                      onClick={closeModal}>
+                      Close
+                    </button>
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  );
+}