feat: data added successfully

emidev98 · May 6, 2024 · 9d90b87 · 9d90b87
1 parent 0c7cd75
commit 9d90b87
Show file tree

Hide file tree

Showing 19 changed files with 1,199 additions and 590 deletions.
diff --git a/index.html b/index.html
@@ -3,11 +3,6 @@
   <head>
     <meta charset="utf-8" />
     <title>UTXO Utils</title>
-
-    <script type="module">
-      import { Buffer } from "buffer";
-      window.Buffer = Buffer;
-    </script>
     <base href="/" />
 
     <meta name="color-scheme" content="light dark" />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,26 +14,27 @@
   "dependencies": {
     "@capacitor/android": "^6.0.0",
     "@capacitor/app": "6.0.0",
-    "@capacitor/background-runner": "^1.1.0",
     "@capacitor/core": "^6.0.0",
     "@capacitor/haptics": "6.0.0",
     "@capacitor/keyboard": "6.0.0",
     "@capacitor/status-bar": "6.0.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@ionic/react": "^7.0.0",
-    "@ionic/react-router": "^7.0.0",
     "@ionic/storage": "^4.0.0",
+    "@mui/icons-material": "^5.15.15",
+    "@mui/material": "^5.15.15",
+    "@mui/x-date-pickers": "^7.3.1",
     "@types/node": "^20.12.7",
-    "@types/react-router": "^5.1.20",
-    "@types/react-router-dom": "^5.3.3",
     "bitcoin-address-validation": "^2.2.3",
     "buffer": "^6.0.3",
     "ionicons": "^7.0.0",
+    "material-react-table": "^2.13.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router": "^5.3.4",
-    "react-router-dom": "^5.3.4",
-    "sass": "^1.75.0",
-    "stream-browserify": "^3.0.0"
+    "react-router": "^6.23.0",
+    "react-router-dom": "^6.23.0",
+    "sass": "^1.75.0"
   },
   "devDependencies": {
     "@capacitor/cli": "^6.0.0",

diff --git a/src/App.scss b/src/App.scss
@@ -1,3 +1,7 @@
 .menu-pane-visible {
     max-width: 304px;
+}
+
+#PageContent {
+    padding: 2em;
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,4 @@
-import { IonApp, IonContent, IonFab, IonFabButton, IonFabList, IonIcon, IonRouterOutlet, IonSplitPane, setupIonicReact, useIonRouter } from '@ionic/react';
-import { Route, Switch } from 'react-router-dom';
+import { IonApp, IonContent, IonFab, IonFabButton, IonIcon, IonSplitPane, setupIonicReact } from '@ionic/react';
 import Menu from './components/menu/Menu';
 
 /* Core CSS required for Ionic components to work properly */
@@ -27,37 +26,37 @@ import React, { useEffect, useState } from 'react';
 import Header from './components/header/Header';
 import { addOutline, addSharp } from 'ionicons/icons';
 import NewAddress from './components/new-address/NewAddress';
+import { Outlet, Route, Routes, useNavigate } from 'react-router-dom';
 
 setupIonicReact();
 
 const App: React.FC = () => {
   const { pages, getCurrentPage } = usePages();
   const [isOpen, setOpen] = useState(false);
-  const router = useIonRouter();
+  const navigate = useNavigate();
 
   // Load the first page in the app 
   // when user tries to access a page
   // that is not defined in the router
   useEffect(() => {
     const currentPage = getCurrentPage();
-    router.push(currentPage.url);
+    navigate(currentPage.url);
   }, [])
 
   return (
     <IonApp>
       <IonSplitPane contentId="main" >
         <Menu />
 
-        <IonRouterOutlet id="main">
-          <IonContent fullscreen>
-            <Header />
-            <Switch>
-              {pages.map((page, index) =>
-                <Route key={index} path={page.url} exact render={page.component}></Route>
-              )}
-            </Switch>
-          </IonContent>
-        </IonRouterOutlet>
+        <IonContent id="main" fullscreen>
+          <Header />
+          <div id="PageContent">
+            <Routes>
+              {pages.map((page, index) => <Route key={index} path={page.url} element={page.component} />)}
+            </Routes>
+            <Outlet />
+          </div>
+        </IonContent>
 
       </IonSplitPane>
 

diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -1,5 +1,5 @@
 
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import './Header.scss';
 import { IonButtons, IonHeader, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/react';
 import { Page, usePages } from '../../hooks/usePages';

diff --git a/src/components/menu/Menu.scss b/src/components/menu/Menu.scss
@@ -1,80 +1,72 @@
-ion-menu {
+.AppMenu {
 
   ion-content {
     --background: var(--ion-item-background, var(--ion-background-color, #fff));
-
+
+  }
+
+  ion-list-header {
+    padding-left: 10px;
+    font-size: 22px;
+    font-weight: 600;
+    min-height: 20px;
   }
 
-  &.md {
+  ion-note {
+    padding-left: 10px;
+    font-size: 16px;
+    color: var(--ion-color-medium-shade);
+    margin-bottom: 32px;
 
-    ion-list-header {
-      padding-left: 10px;
+    ion-icon {
+      margin-right: 0.4em;
     }
+  }
 
-    ion-note {
-      padding-left: 10px;
-      font-size: 16px;
-      color: var(--ion-color-medium-shade);
+  ion-list {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 
-      ion-icon {
-        margin-right: 0.4em;
-      }
+    .github-info {
+      display: flex;
+      align-items: center;
     }
 
-    ion-list {
-      padding: 0;
+    .MenuEntry {
+      padding: 1.2em;
+      border-radius: 4px;
       display: flex;
-      flex-direction: column;
-      height: 100%;
-
-      ion-item {
-        --padding-start: 10px;
-        --padding-end: 10px;
-        border-radius: 4px;
-
-        ion-icon {
-          color: #616e7e;
-        }
-
-        &.selected {
-          --color: var(--ion-color-primary);
-          --background: rgba(var(--ion-color-primary-rgb), 0.14);
-
-          ion-icon {
-            color: var(--ion-color-primary);
-          }
-        }
+      align-items: center;
+      text-decoration: none; 
+      color: var(--ion-color-medium-shade);
+
+      ion-icon {
+        font-size: 1.4rem;
+        margin-right: 20px;
       }
 
-      &#inbox-list {
-
-        ion-list-header {
-          font-size: 22px;
-          font-weight: 600;
-          min-height: 20px;
-        }
+      &.active {
+        color: var(--ion-color-primary);
+        background: rgba(var(--ion-color-primary-rgb), 0.14);
 
-        .github-info {
-          display: flex;
-          align-items: center;
-        }
-
-        >:last-child {
-          margin-top: auto;
-          border-top: 1px solid var(--ion-color-step-150, #d7d8da);
+        ion-icon {
+          color: var(--ion-color-primary);
         }
       }
     }
 
-    ion-content {
-      --padding-start: 8px;
-      --padding-end: 8px;
-      --padding-top: 20px;
-      --padding-bottom: 20px;
+    >:last-child {
+      margin-top: auto;
+      border-top: 1px solid var(--ion-color-step-150, #d7d8da);
     }
+  }
 
-    ion-note {
-      margin-bottom: 30px;
-    }
+  ion-content {
+    --padding-start: 8px;
+    --padding-end: 8px;
+    --padding-top: 20px;
+    --padding-bottom: 20px;
   }
 }
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
@@ -1,7 +1,6 @@
 import {
   IonContent,
   IonIcon,
-  IonItem,
   IonLabel,
   IonList,
   IonListHeader,
@@ -10,32 +9,31 @@ import {
   IonNote,
 } from '@ionic/react';
 
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import './Menu.scss';
 import { logoGithub } from 'ionicons/icons';
 import { usePages } from '../../hooks/usePages';
+import { NavLink } from 'react-router-dom';
 
 const Menu: React.FC = () => {
   const location = useLocation();
   const { pages } = usePages();
 
   return (
-    <IonMenu contentId="main" type="overlay">
+    <IonMenu className="AppMenu" contentId="main" type="overlay">
       <IonContent>
         <IonList id="inbox-list">
           <IonListHeader>UTXO Utils</IonListHeader>
-          <IonNote className='github-info'>
+          <IonNote className="github-info">
             <IonIcon aria-hidden="true" md={logoGithub}></IonIcon>
             <span>emidev98/utxo-utils</span>
           </IonNote>
           {pages.map((page, index) => {
             return (
-              <IonMenuToggle key={index} autoHide={false}>
-                <IonItem className={location.pathname === page.url ? 'selected' : ''} routerLink={page.url} routerDirection="none" lines="none" detail={false}>
-                  <IonIcon aria-hidden="true" slot="start" ios={page.iosIcon} md={page.mdIcon} />
-                  <IonLabel>{page.title}</IonLabel>
-                </IonItem>
-              </IonMenuToggle>
+              <NavLink key={index} className="MenuEntry" to={page.url}>
+                <IonIcon ios={page.iosIcon} md={page.mdIcon} />
+                <IonLabel>{page.title}</IonLabel>
+              </NavLink>
             );
           })}
         </IonList>