feat: change url to allow request from metamask

apps/etdstats/lib/Layout.tsx

@@ -7,6 +7,7 @@ import {
   NextCirculatProgressBar,
   UniversalSearchButton,
 } from "ui";
+import { useBlockInfo } from "./hooks/useBlockInfo";
 import { db } from "./models/SearchModel";
 import { DrawerWidth } from "./settings/ui";
 
@@ -16,6 +17,7 @@ export default function Layout(props: {
 }) {
   const router = useRouter();
   const [open, setOpen] = React.useState(false);
+  const { blockInfoResult } = useBlockInfo({});
 
   const search = useCallback(async (value: string) => {
     const result = await db.searchResults
@@ -34,8 +36,8 @@ export default function Layout(props: {
     <Box>
       <AppBar
         sx={{
-          width: { sm: `calc(100% - ${DrawerWidth}px )` },
-          ml: { sm: `${DrawerWidth}px` },
+          width: { md: `calc(100% - ${DrawerWidth}px )` },
+          ml: { md: `${DrawerWidth}px` },
         }}
       >
         <Toolbar
@@ -48,21 +50,26 @@ export default function Layout(props: {
             <UniversalSearchButton
               drawerWidth={DrawerWidth}
               onSearch={async (v) => {
-                await router.push(`/info/${v}`);
+                await router.push(`/tx/${v}`);
               }}
               onType={search}
             />
           </Stack>
           <Stack direction={"row"} alignItems="center" spacing={2}>
             <NextCirculatProgressBar size={20} />
-            <ConnectWalletButton />
+            {blockInfoResult.data && (
+              <ConnectWalletButton
+                chainId={blockInfoResult.data!.chainId}
+                rpc={blockInfoResult.data!.rpc}
+              />
+            )}
           </Stack>
         </Toolbar>
       </AppBar>
       <Box component={"nav"}>
         <Drawer
           variant="temporary"
-          open={open}
+          open={false}
           ModalProps={{
             keepMounted: true,
           }}
@@ -79,7 +86,7 @@ export default function Layout(props: {
         <Drawer
           variant="permanent"
           sx={{
-            display: { xs: "none", sm: "block" },
+            display: { sm: "none", md: "block", xs: "none" },
             "& .MuiDrawer-paper": {
               boxSizing: "border-box",
               width: DrawerWidth,
@@ -94,11 +101,11 @@ export default function Layout(props: {
         mt={5}
         component="main"
         sx={{
-          width: { sm: `calc(100% - ${DrawerWidth}px )` },
-          pl: { sm: `${DrawerWidth}px` },
+          width: { md: `calc(100% - ${DrawerWidth}px )` },
+          pl: { md: `${DrawerWidth}px` },
         }}
       >
-        <Box sx={{ paddingX: { md: 25, sm: 3, xs: 3 } }}>{props.children}</Box>
+        <Box sx={{ paddingX: { lg: 25, sm: 3, xs: 3 } }}>{props.children}</Box>
       </Box>
     </Box>
   );

apps/etdstats/lib/Menu.tsx

@@ -35,7 +35,7 @@ const menus: Menu[] = [
   {
     name: "Info",
     icon: <InfoIcon />,
-    href: "/info",
+    href: "/tx",
   },
 ];
 

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

@@ -34,7 +34,7 @@ const columns: GridColDef[] = [
     headerName: "Hash",
     flex: 10,
     renderCell: (rowData) => (
-      <Link href={`/info/${rowData.value}`}>{rowData.value}</Link>
+      <Link href={`/tx/${rowData.value}`}>{rowData.value}</Link>
     ),
   },
   {
@@ -55,7 +55,7 @@ export default function TransactionDisplay({ data }: Props) {
 
   const navTo = useCallback(async (id: string) => {
     console.log("navTo", id);
-    await router.push(`/info/${id}`);
+    await router.push(`/tx/${id}`);
   }, []);
 
   return (

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

@@ -21,7 +21,7 @@ export default function TransactionDisplay({ data }: Props) {
 
   const navTo = useCallback(async (id: string) => {
     console.log("navTo", id);
-    await router.push(`/info/${id}`);
+    await router.push(`/tx/${id}`);
   }, []);
 
   return (

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

@@ -57,7 +57,7 @@ const columns: GridColDef[] = [
     flex: 4,
     sortable: false,
     renderCell: (rowData) => (
-      <Link href={`/info/${rowData.value}`} noWrap>
+      <Link href={`/tx/${rowData.value}`} noWrap>
         {rowData.value}
       </Link>
     ),
@@ -133,7 +133,7 @@ export default function TransactionDisplay({ data, id, currentPage }: Props) {
   const onPageChange = useCallback(
     async (page: number) => {
       setLoading(true);
-      await router.push(`/info/${id}?page=${page}`, undefined, {
+      await router.push(`/tx/${id}?page=${page}`, undefined, {
         scroll: false,
       });
       setPage(page);

apps/etdstats/lib/components/table/GeneralBlockTable.tsx

@@ -16,14 +16,14 @@ const columns: GridColDef[] = [
   {
     headerName: "#",
     field: "id",
-    flex: 1,
+    flex: 4,
   },
   {
     field: "hash",
     headerName: "Hash",
     flex: 10,
     renderCell: (rowData) => (
-      <Link href={`/info/${rowData.value}`}>{rowData.value}</Link>
+      <Link href={`/tx/${rowData.value}`}>{rowData.value}</Link>
     ),
   },
   {

apps/etdstats/lib/components/table/GeneralTransactionTable.tsx

@@ -33,7 +33,7 @@ const columns: GridColDef[] = [
     headerName: "Hash",
     flex: 10,
     renderCell: (rowData) => (
-      <Link href={`/info/${rowData.value}`}>{rowData.value}</Link>
+      <Link href={`/tx/${rowData.value}`}>{rowData.value}</Link>
     ),
   },
   {

node_packages/openapi_client/src/block_info_service.ts

@@ -15,6 +15,8 @@ export interface BlockInfoResponse {
   difficultyChangePercentage: "string";
   blockTimeHistory: string[];
   difficultyHistory: string[];
+  chainId: string;
+  rpc: string;
 }
 
 export interface PaginationResponse<T> {

node_packages/openapi_specs/specs/block_info_service.yaml

@@ -142,7 +142,7 @@ components:
   schemas:
     block-info:
       type: object
-      required: [ "numBlocks", "numTransactions", "blockTime", "blockTimeHistory", "difficultyHistory" ]
+      required: [ "numBlocks", "numTransactions", "blockTime", "blockTimeHistory", "difficultyHistory", "chainId" ]
       properties:
         numBlocks:
           type: number
@@ -174,5 +174,10 @@ components:
           description: List of blocks' difficulty
           items:
             type: number
-
+        chainId:
+          type: string
+          description: ChainID in hex string
+        rpc:
+          type: number
+          description: RPC URL
 

node_packages/openapi_specs/src/analytics_service.json

@@ -2,7 +2,7 @@
     "openapi": "3.0.0",
     "info": {
         "description": "This belongs part of ETDStats microservices which will provide a analytics service",
-        "version": "0.22.0",
+        "version": "1.1.0",
         "title": "Analytics service",
         "termsOfService": "https://github.com/etherdata-blockchain"
     },

node_packages/openapi_specs/src/block_info_service.json

@@ -2,7 +2,7 @@
     "openapi": "3.0.0",
     "info": {
         "description": "This belongs part of ETDStats microservices which will provide a analytics service",
-        "version": "0.22.0",
+        "version": "1.1.0",
         "title": "Block Info service",
         "termsOfService": "https://github.com/etherdata-blockchain"
     },
@@ -489,7 +489,8 @@
                     "numTransactions",
                     "blockTime",
                     "blockTimeHistory",
-                    "difficultyHistory"
+                    "difficultyHistory",
+                    "chainId"
                 ],
                 "properties": {
                     "numBlocks": {
@@ -531,6 +532,14 @@
                         "items": {
                             "type": "number"
                         }
+                    },
+                    "chainId": {
+                        "type": "string",
+                        "description": "ChainID in hex string"
+                    },
+                    "rpc": {
+                        "type": "number",
+                        "description": "RPC URL"
                     }
                 }
             }

node_packages/openapi_specs/src/health_service.spec.json

@@ -2,7 +2,7 @@
     "openapi": "3.0.0",
     "info": {
         "description": "This belongs part of ETDStats microservices which will provide a health check",
-        "version": "0.22.0",
+        "version": "1.1.0",
         "title": "Health service",
         "termsOfService": "https://github.com/etherdata-blockchain"
     },

node_packages/openapi_specs/src/node_service.json

@@ -2,7 +2,7 @@
     "openapi": "3.0.0",
     "info": {
         "description": "This belongs part of ETDStats microservices which will provide a node service. Pending!",
-        "version": "0.22.0",
+        "version": "1.1.0",
         "title": "Node service",
         "termsOfService": "https://github.com/etherdata-blockchain"
     },

node_packages/openapi_specs/src/transaction_service.spec.json

@@ -2,7 +2,7 @@
     "openapi": "3.0.0",
     "info": {
         "description": "This belongs part of ETDStats microservices which will provide a transaction and block services",
-        "version": "0.22.0",
+        "version": "1.1.0",
         "title": "Transaction service",
         "termsOfService": "https://github.com/etherdata-blockchain"
     },

node_packages/ui/src/buttons/ConnectWalletButton.tsx

@@ -1,29 +1,94 @@
 import React, { useCallback } from "react";
 import AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet";
-import { Fade, IconButton, Tooltip } from "@mui/material";
+import {
+  Box,
+  Fade,
+  IconButton,
+  ListItem,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Paper,
+  Popover,
+  Tooltip,
+  Typography,
+  List,
+  ListItemButton,
+  Card,
+  Divider,
+} from "@mui/material";
 import { useMetaMask } from "metamask-react";
+import { useRouter } from "next/router";
+import Link from "next/link";
 
-export function ConnectWalletButton() {
-  const { status, connect } = useMetaMask();
+interface Props {
+  chainId: string;
+  rpc: string;
+}
+
+export function ConnectWalletButton({ chainId, rpc }: Props) {
+  const { status, connect, addChain, account } = useMetaMask();
+  const router = useRouter();
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
-  const onClick = useCallback(() => {
-    if (status === "connected") {
-      return;
-    }
+  const onClick = useCallback(
+    async (e: any) => {
+      if (status === "connected") {
+        setAnchorEl(e.currentTarget);
+        return;
+      }
+      let getUrl = window.location;
+      let baseUrl =
+        getUrl.protocol +
+        "//" +
+        getUrl.host +
+        "/" +
+        getUrl.pathname.split("/")[1];
 
-    connect();
-  }, [status]);
+      await connect();
+      await addChain({
+        chainId: chainId,
+        chainName: "Etherdata Network",
+        rpcUrls: [rpc],
+        nativeCurrency: {
+          name: "ETD",
+          symbol: "ETD",
+          decimals: 18,
+        },
+        blockExplorerUrls: [baseUrl],
+      });
+    },
+    [status]
+  );
 
   return (
-    <Fade in={status !== "unavailable"}>
-      <Tooltip title={status}>
-        <IconButton
-          color={status === "connected" ? "success" : "default"}
-          onClick={onClick}
+    <>
+      <Fade in={status !== "unavailable"}>
+        <Tooltip title={status}>
+          <IconButton
+            color={status === "connected" ? "success" : "default"}
+            onClick={onClick}
+          >
+            <AccountBalanceWalletIcon />
+          </IconButton>
+        </Tooltip>
+      </Fade>
+      <Menu
+        onClose={() => setAnchorEl(null)}
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+      >
+        <MenuItem
+          onClick={async () => {
+            await router.push(`/tx/${account}`);
+            setAnchorEl(null);
+          }}
         >
-          <AccountBalanceWalletIcon />
-        </IconButton>
-      </Tooltip>
-    </Fade>
+          Profile
+        </MenuItem>
+        <MenuItem>Settings</MenuItem>
+      </Menu>
+    </>
   );
 }

services/block_info_service/Package.resolved

@@ -1,5 +1,14 @@
 {
   "pins" : [
+    {
+      "identity" : "alamofire",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/Alamofire/Alamofire",
+      "state" : {
+        "revision" : "354dda32d89fc8cd4f5c46487f64957d355f53d8",
+        "version" : "5.6.1"
+      }
+    },
     {
       "identity" : "async-http-client",
       "kind" : "remoteSourceControl",