feat: display account number (#201)

* chore: bump version

* feat: display account number

src/components/AppDrawer.jsx

@@ -12,7 +12,7 @@ import Button from "@mui/material/Button";
 import PropTypes from "prop-types";
 import { drawerListItems } from "./drawerListItems";
 import { parseBalance } from "../utils/denom";
-import { shortenAddress, shortenPubKey } from "../utils/util";
+import { shortenAddress } from "../utils/util";
 import { useLocation } from "react-router-dom";
 import MuiDrawer from "@mui/material/Drawer";
 import { styled } from "@mui/material/styles";
@@ -129,21 +129,6 @@ export default function AppDrawer(props) {
                   }}
                 />
               </ListItem>
-              <ListItem sx={{ pb: 0.5, pt: 0.5 }}>
-                <Typography variant="body2" color="text.secondary">
-                  PubKey
-                </Typography>
-              </ListItem>
-              <ListItem sx={{ pt: 0.5 }}>
-                <Chip
-                  label={wallet.pubKey ? shortenPubKey(wallet.pubKey, 21) : ""}
-                  size="small"
-                  deleteIcon={<ContentCopyOutlined />}
-                  onDelete={() => {
-                    onCopy(wallet.pubKey);
-                  }}
-                />
-              </ListItem>
               <ListItem sx={{ pb: 0, pt: 0.5 }}>
                 <Typography
                   color="text.secondary"

src/pages/Dashboard.js

@@ -18,14 +18,14 @@ import AlertTitle from "@mui/material/AlertTitle";
 import Snackbar from "@mui/material/Snackbar";
 import Overview from "./Overview";
 import { CustomAppBar } from "../components/CustomAppBar";
-import { resetError, setError } from "../features/common/commonSlice";
 import Page404 from "./Page404";
 import AppDrawer from "../components/AppDrawer";
 import { Alert } from "../components/Alert";
 import { getPallet, isDarkMode, mdTheme } from "../utils/theme";
 import { isConnected, logout } from "../utils/localStorage";
 import { Paper, Typography } from "@mui/material";
 import { exitAuthzMode } from "../features/authz/authzSlice";
+import { copyToClipboard } from "../utils/clipboard";
 
 const Authz = lazy(() => import("./Authz"));
 const Validators = lazy(() => import("./Validators"));
@@ -142,35 +142,6 @@ function DashboardContent(props) {
     navigate(path);
   }
 
-  const copyToClipboard = (text) => {
-    navigator.clipboard.writeText(text).then(
-      function () {
-        dispatch(
-          setError({
-            type: "success",
-            message: "Copied to clipboard",
-          })
-        );
-        setTimeout(() => {
-          showTxSnack(false);
-          dispatch(resetError());
-        }, 1000);
-      },
-      function (err) {
-        dispatch(
-          setError({
-            type: "error",
-            message: "Failed to copy",
-          })
-        );
-        setTimeout(() => {
-          showTxSnack(false);
-          dispatch(resetError());
-        }, 1000);
-      }
-    );
-  };
-
   const [drawerOpen, setDrawerOpen] = React.useState(true);
 
   return (
@@ -201,7 +172,7 @@ function DashboardContent(props) {
               onNavigate={navigateTo}
               selectedNetwork={selectedNetwork}
               wallet={wallet}
-              onCopy={copyToClipboard}
+              onCopy={(msg) => copyToClipboard(msg, dispatch)}
               selectedAuthz={selectedAuthz}
               open={drawerOpen}
             />

src/pages/Overview.js

@@ -5,20 +5,18 @@ import { getDelegations, getUnbonding } from "../features/staking/stakeSlice";
 import { getDelegatorTotalRewards } from "../features/distribution/distributionSlice";
 import { parseBalance } from "../utils/denom";
 import {
-  getTypeURLName,
   shortenAddress,
   shortenPubKey,
-  totalDelegations,
   totalRewards,
   totalUnbonding,
 } from "../utils/util";
 import { Button, Chip, Grid, Paper, Typography } from "@mui/material";
 import ContentCopyOutlined from "@mui/icons-material/ContentCopyOutlined";
-import { resetError, setError } from "../features/common/commonSlice";
 import { Box } from "@mui/system";
 import { getAccountInfo } from "../features/auth/slice";
 import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
+import { copyToClipboard } from "../utils/clipboard";
 
 export default function Overview() {
   const wallet = useSelector((state) => state.wallet);
@@ -41,7 +39,6 @@ export default function Overview() {
   const { config } = chainInfo;
   const coinDecimals = config?.currencies[0].coinDecimals || 1;
 
-
   useEffect(() => {
     if (connected && config.currencies.length > 0) {
       setTotalBalance(
@@ -52,17 +49,12 @@ export default function Overview() {
         )
       );
       setTotalDelegations(
-        parseFloat(delegations.totalStaked / 10.0 ** coinDecimals).toFixed(
-          coinDecimals)
-      );
+        delegations.totalStaked / 10.0 ** coinDecimals)
       setTotalRewards(
         totalRewards(rewards?.list, config.currencies[0].coinDecimals)
       );
       setTotalUnbonding(
-        totalUnbonding(
-          unbonding.delegations,
-          config.currencies[0].coinDecimals
-        )
+        totalUnbonding(unbonding.delegations, config.currencies[0].coinDecimals)
       );
     }
   }, [balance, delegations, rewards, unbonding, chainInfo, address]);
@@ -254,7 +246,7 @@ export default function Overview() {
                         fontWeight={500}
                         color="text.primary"
                       >
-                        {delegated}
+                        {parseFloat(delegated)}
                       </Typography>
                     </li>
                     <li
@@ -402,7 +394,7 @@ const AccountInfo = (props) => {
               size="small"
               deleteIcon={<ContentCopyOutlined />}
               onDelete={() => {
-                copyToClipboard(wallet.address);
+                props.onCopy(wallet.address);
               }}
             />
           </Grid>
@@ -445,10 +437,10 @@ const AccountInfo = (props) => {
               fontWeight={600}
               gutterBottom
             >
-              Account Type
+              Account Number
             </Typography>
             <Typography variant="body1" color="text.primary" gutterBottom>
-              {getTypeURLName(account && account?.account["@type"])}
+              {getAccountNumber(account?.account)}
             </Typography>
           </Grid>
           <Grid
@@ -483,32 +475,7 @@ AccountInfo.propTypes = {
   onCopy: PropTypes.func.isRequired,
 };
 
-const copyToClipboard = (text, dispatcher) => {
-  navigator.clipboard.writeText(text).then(
-    function () {
-      dispatcher(
-        setError({
-          type: "success",
-          message: "Copied to clipboard",
-        })
-      );
-      setTimeout(() => {
-        dispatcher(resetError());
-      }, 1000);
-    },
-    function (err) {
-      dispatcher(
-        setError({
-          type: "error",
-          message: "Failed to copy",
-        })
-      );
-      setTimeout(() => {
-        dispatcher(resetError());
-      }, 1000);
-    }
-  );
-};
+
 
 const getSequence = (account) => {
   switch (account["@type"]) {
@@ -518,6 +485,37 @@ const getSequence = (account) => {
     case "/cosmos.auth.v1beta1.BaseAccount": {
       return account?.sequence || 0;
     }
+    case "/cosmos.vesting.v1beta1.DelayedVestingAccount": {
+      return account?.base_vesting_account?.base_account?.sequence || 0;
+    }
+    case "/cosmos.vesting.v1beta1.PeriodicVestingAccount": {
+      return account?.base_vesting_account?.base_account?.sequence || 0;
+    }
+    case "/cosmos.vesting.v1beta1.PermanentLockedAccount": {
+      return account?.base_vesting_account?.base_account?.sequence || 0;
+    }
+    default:
+      return 0;
+  }
+};
+
+const getAccountNumber = (account) => {
+  switch (account["@type"]) {
+    case "/cosmos.vesting.v1beta1.ContinuousVestingAccount": {
+      return account?.base_vesting_account?.base_account?.account_number || 0;
+    }
+    case "/cosmos.auth.v1beta1.BaseAccount": {
+      return account?.account_number || 0;
+    }
+    case "/cosmos.vesting.v1beta1.DelayedVestingAccount": {
+      return account?.base_vesting_account?.base_account?.account_number || 0;
+    }
+    case "/cosmos.vesting.v1beta1.PeriodicVestingAccount": {
+      return account?.base_vesting_account?.base_account?.account_number || 0;
+    }
+    case "/cosmos.vesting.v1beta1.PermanentLockedAccount": {
+      return account?.base_vesting_account?.base_account?.account_number || 0;
+    }
     default:
       return 0;
   }

src/pages/multisig/tx/PageMultisigInfo.js

@@ -12,7 +12,7 @@ import { multisigByAddress } from "../../../features/multisig/multisigSlice";
 import { shortenAddress } from "../../../utils/util";
 import ContentCopyOutlined from "@mui/icons-material/ContentCopyOutlined";
 import Chip from "@mui/material/Chip";
-import { resetError, setError } from "../../../features/common/commonSlice";
+import { copyToClipboard } from "../../../utils/clipboard";
 
 export default function PageMultisigInfo() {
   const dispatch = useDispatch();
@@ -28,33 +28,6 @@ export default function PageMultisigInfo() {
   );
   const [totalStake, setTotalStaked] = useState(0);
 
-  const copyToClipboard = (text) => {
-    navigator.clipboard.writeText(text).then(
-      function () {
-        dispatch(
-          setError({
-            type: "success",
-            message: "Copied to clipboard",
-          })
-        );
-        setTimeout(() => {
-          dispatch(resetError());
-        }, 1000);
-      },
-      function () {
-        dispatch(
-          setError({
-            type: "error",
-            message: "Failed to copy",
-          })
-        );
-        setTimeout(() => {
-          dispatch(resetError());
-        }, 1000);
-      }
-    );
-  };
-
   useEffect(() => {
     let delegations = multisigDel?.delegations || [];
     let total = 0.0;
@@ -147,7 +120,7 @@ export default function PageMultisigInfo() {
               size="small"
               deleteIcon={<ContentCopyOutlined />}
               onDelete={() => {
-                copyToClipboard(multisigAccount?.address);
+                copyToClipboard(multisigAccount?.address, dispatch);
               }}
             />
           </Grid>
@@ -213,7 +186,7 @@ export default function PageMultisigInfo() {
                 size="small"
                 deleteIcon={<ContentCopyOutlined />}
                 onDelete={() => {
-                  copyToClipboard(p?.address);
+                  copyToClipboard(p?.address, dispatch);
                 }}
               />
             ))}

src/utils/clipboard.tsx

@@ -0,0 +1,29 @@
+import { Dispatch } from "react";
+import { resetError, setError } from "../features/common/commonSlice";
+
+export const copyToClipboard = (text: string, dispatcher: Dispatch<any>) => {
+    navigator.clipboard.writeText(text).then(
+      function () {
+        dispatcher(
+          setError({
+            type: "success",
+            message: "Copied to clipboard",
+          })
+        );
+        setTimeout(() => {
+          dispatcher(resetError());
+        }, 1000);
+      },
+      function (err) {
+        dispatcher(
+          setError({
+            type: "error",
+            message: "Failed to copy",
+          })
+        );
+        setTimeout(() => {
+          dispatcher(resetError());
+        }, 1000);
+      }
+    );
+  };