feat: add auto complete function (#44)

Author: sirily11

apps/etdstats/lib/Layout.tsx

@@ -1,12 +1,13 @@
 import { AppBar, Box, Drawer, Stack, Toolbar } from "@mui/material";
 import { useRouter } from "next/router";
 
-import React from "react";
+import React, { useCallback } from "react";
 import {
   ConnectWalletButton,
   NextCirculatProgressBar,
   UniversalSearchButton,
 } from "ui";
+import { db } from "./models/SearchModel";
 import { DrawerWidth } from "./settings/ui";
 
 export default function Layout(props: {
@@ -15,6 +16,18 @@ export default function Layout(props: {
 }) {
   const router = useRouter();
 
+  const search = useCallback(async (value: string) => {
+    const result = await db.searchResults
+      .where("id")
+      .startsWithAnyOfIgnoreCase(value)
+      .toArray();
+
+    return result.map((r) => ({
+      title: r.id,
+      subtitle: r.result.type,
+    }));
+  }, []);
+
   return (
     <Box>
       <AppBar
@@ -35,6 +48,7 @@ export default function Layout(props: {
               onSearch={async (v) => {
                 await router.push(`/info/${v}`);
               }}
+              onType={search}
             />
           </Stack>
           <Stack direction={"row"} alignItems="center" spacing={2}>

apps/etdstats/lib/components/card/DataCard.tsx

@@ -11,6 +11,7 @@ import { numberWithCommas } from "../../utils/format";
 import TrendingDownIcon from "@mui/icons-material/TrendingDown";
 import TrendingUpIcon from "@mui/icons-material/TrendingUp";
 import { Box } from "@mui/system";
+import Image from "next/image";
 
 interface Props {
   title: string;
@@ -40,9 +41,9 @@ export default function DataCard(props: Props) {
             </Stack>
             <Typography variant="h4" fontWeight={600}>
               {props.number ? (
-                numberWithCommas(props.number)
+                numberWithCommas(props.number!)
               ) : (
-                <CircularProgress />
+                <Image src={"/Progressbar.webp"} width={50} height={50} />
               )}
             </Typography>
           </Stack>

apps/etdstats/lib/components/display/TransactionDisplay.tsx

@@ -79,10 +79,7 @@ export default function TransactionDisplay({ data }: Props) {
             />
           </Grid>
           <Grid item xs={12} md={6}>
-            <ListItemButton
-              title="Timestamp"
-              subtitle={data.data.block.timestamp}
-            />
+            <ListItemButton title="Timestamp" subtitle={data.data.timestamp} />
           </Grid>
         </Grid>
         <Box p={2}>

apps/etdstats/lib/components/display/UserDisplay.tsx

@@ -256,7 +256,7 @@ export default function TransactionDisplay({ data, id, currentPage }: Props) {
                   </Typography>
                 </Stack>
                 <Pagination
-                  count={pageCount}
+                  count={Number.isNaN(pageCount) ? 0 : pageCount}
                   page={page}
                   onChange={async (e, page) => {
                     await onPageChange(page);

apps/etdstats/lib/models/SearchModel.ts

@@ -0,0 +1,21 @@
+import Dexie, { Table } from "dexie";
+import { TransactionResponse } from "openapi_client";
+
+export interface SearchResult {
+  id: string;
+  result: TransactionResponse;
+}
+
+export class SearchModel extends Dexie {
+  searchResults: Table<SearchResult>;
+
+  constructor() {
+    super("SearchModel");
+    this.version(1).stores({
+      searchResults: "++id",
+    });
+    this.searchResults = this.table("searchResults");
+  }
+}
+
+export const db = new SearchModel();

apps/etdstats/package.json

@@ -29,7 +29,9 @@
     "recharts": "^2.1.11",
     "prop-types": "15.8.1",
     "metamask-react": "2.4.0",
-    "react-query": "3.39.1"
+    "react-query": "3.39.1",
+    "dexie": "3.2.2",
+    "dexie-react-hooks": "1.1.1"
   },
   "devDependencies": {
     "@types/node": "18.0.0",

apps/etdstats/pages/info/[id].tsx

@@ -2,6 +2,7 @@ import { Box, capitalize, Stack, Typography } from "@mui/material";
 import axios from "axios";
 import { GetServerSideProps } from "next";
 import { TransactionResponse, TransactionService } from "openapi_client";
+import { useEffect } from "react";
 import {
   Breadcrumbs,
   DownloadDataButton,
@@ -11,6 +12,7 @@ import {
 import BlockDisplay from "../../lib/components/display/BlockDisplay";
 import TransactionDisplay from "../../lib/components/display/TransactionDisplay";
 import UserDisplay from "../../lib/components/display/UserDisplay";
+import { db } from "../../lib/models/SearchModel";
 
 interface Props {
   data: TransactionResponse;
@@ -19,6 +21,14 @@ interface Props {
 }
 
 export default function Details({ data, id, currentPage }: Props) {
+  useEffect(() => {
+    (async () => {
+      if ((await db.searchResults.where("id").equals(id).count()) === 0) {
+        await db.searchResults.add({ id, result: data });
+      }
+    })();
+  }, [id]);
+
   const menus = [
     {
       title: "Home",
@@ -51,8 +61,8 @@ export default function Details({ data, id, currentPage }: Props) {
         justifyItems={"center"}
       >
         <Box>
-          <DownloadDataButton />
-          <ShareDataButton />
+          <DownloadDataButton id={id} data={data} />
+          <ShareDataButton data={data} />
         </Box>
         <Box>
           <SaveToFavoriteButton />

apps/etdstats/pages/info/index.tsx

@@ -27,7 +27,15 @@ export default function Index(props: Props) {
   });
 
   return (
-    <Box mt={10} p={2}>
+    <Box
+      mt={10}
+      sx={{
+        paddingX: {
+          xs: 2,
+          sm: 15,
+        },
+      }}
+    >
       <Grid container spacing={5}>
         <Grid item xs={12} md={7}>
           <Card sx={{ backgroundColor: green }}>
@@ -107,7 +115,7 @@ export default function Index(props: Props) {
               <Typography fontWeight={800} fontSize={20}>
                 Vistors statistics
               </Typography>
-              <Box minHeight="500px">
+              <Box>
                 <PieChart
                   data={[
                     { name: "Mobile", value: analyticsResult.data?.mobile },

apps/etdstats/public/Progressbar.webp

@@ -23,6 +23,8 @@
     "@mui/system": "5.8.4",
     "recharts": "2.1.11",
     "metamask-react": "2.4.0",
-    "next": "12.1.6"
+    "next": "12.1.6",
+    "qrcode.react": "3.1.0",
+    "material-ui-popup-state": "3.1.1"
   }
 }

node_packages/ui/package.json

@@ -2,13 +2,33 @@ import { IconButton, Tooltip } from "@mui/material";
 import DownloadIcon from "@mui/icons-material/Download";
 
 interface Props {
+  id: string;
   data?: any;
 }
 
-export function DownloadDataButton({ data }: Props) {
+function download(filename: string, text: string) {
+  var element = document.createElement("a");
+  element.setAttribute(
+    "href",
+    "data:text/plain;charset=utf-8," + encodeURIComponent(text)
+  );
+  element.setAttribute("download", filename);
+
+  element.style.display = "none";
+  document.body.appendChild(element);
+
+  element.click();
+
+  document.body.removeChild(element);
+}
+
+export function DownloadDataButton({ id, data }: Props) {
   return (
     <Tooltip title="Download">
-      <IconButton disabled={data === undefined}>
+      <IconButton
+        disabled={data === undefined}
+        onClick={() => download(`${id}.json`, JSON.stringify(data))}
+      >
         <DownloadIcon />
       </IconButton>
     </Tooltip>

node_packages/ui/src/buttons/DownloadDataButton.tsx

@@ -1,17 +1,41 @@
 import { ShareRounded } from "@mui/icons-material";
-import { IconButton, Tooltip } from "@mui/material";
+import { Box, IconButton, Paper, Popover, Tooltip } from "@mui/material";
 import React from "react";
+import {
+  usePopupState,
+  bindTrigger,
+  bindMenu,
+  bindPopover,
+} from "material-ui-popup-state/hooks";
+import { QRCodeCanvas } from "qrcode.react";
 
 interface Props {
   data?: any;
 }
 
 export function ShareDataButton({ data }: Props) {
+  const popupState = usePopupState({ variant: "popover", popupId: "demoMenu" });
+
   return (
-    <Tooltip title="Share">
-      <IconButton disabled={data === undefined}>
-        <ShareRounded />
-      </IconButton>
-    </Tooltip>
+    <>
+      <Tooltip title="Share">
+        <IconButton disabled={data === undefined} {...bindTrigger(popupState)}>
+          <ShareRounded />
+        </IconButton>
+      </Tooltip>
+      <Popover
+        {...bindPopover(popupState)}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "center",
+        }}
+      >
+        <Paper>
+          <Box p={2}>
+            <QRCodeCanvas value={JSON.stringify(data)} />,
+          </Box>
+        </Paper>
+      </Popover>
+    </>
   );
 }