account: Integrate ICNS name service

frontend/src/components/FeegranterInfo.jsx

@@ -0,0 +1,63 @@
+import CloseOutlined from "@mui/icons-material/CloseOutlined";
+import { Alert, Button, Typography } from "@mui/material";
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getICNSName } from "../features/common/commonSlice";
+
+export default function FeegranterInfo(props) {
+  const dispatch = useDispatch();
+  const icnsNames = useSelector((state) => state.common.icnsNames);
+
+  const [showAddress, setShowAddress] = useState(false);
+
+  const fetchName = (address) => {
+    if (!icnsNames?.[address]) {
+      dispatch(
+        getICNSName({
+          address: address,
+        })
+      );
+    }
+    return icnsNames?.[address]?.name;
+  };
+
+  const address = props.feegrant?.granter;
+  const name = fetchName(address);
+
+  const toggleAddress = () => {
+    setShowAddress((showAddress) => !showAddress);
+  };
+
+  return (
+    <Alert
+      sx={{
+        textAlign: "left",
+        m: 2,
+      }}
+      color="warning"
+      variant="outlined"
+      action={
+        <Button
+          color="inherit"
+          size="small"
+          sx={{
+            margin: "auto",
+            textTransform: "none",
+          }}
+          startIcon={<CloseOutlined />}
+          onClick={() => props.onRemove()}
+        >
+          Remove Feegrant
+        </Button>
+      }
+    >
+      <Typography>
+        Transaction fees will be deducted from{" "}
+        <strong onClick={toggleAddress} style={{ cursor: "pointer" }}>
+          {showAddress ? address : name || address}
+        </strong>{" "}
+        account
+      </Typography>
+    </Alert>
+  );
+}

frontend/src/components/PeriodicFeeGrant.jsx

@@ -11,14 +11,28 @@ import { FormControl } from "@mui/material";
 import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
+import { getICNSName } from "../features/common/commonSlice";
 
 export function PeriodicFeegrant(props) {
   const { loading, onGrant, currency, granters, granter, setGranter } = props;
 
   const { handleSubmit, control, getValues } = useFormContext();
 
+  const dispatch = useDispatch();
   const isAuthzMode = useSelector((state) => state.common.authzMode);
+  const icnsNames = useSelector((state) => state.common.icnsNames);
+
+  const fetchName = (address) => {
+    if (!icnsNames?.[address]) {
+      dispatch(
+        getICNSName({
+          address: address,
+        })
+      );
+    }
+    return icnsNames?.[address]?.name;
+  };
 
   return (
     <>
@@ -46,7 +60,7 @@ export function PeriodicFeegrant(props) {
           >
             {granters.map((granter, index) => (
               <MenuItem id={index} value={granter}>
-                {granter}
+              {fetchName(granter) || granter}
               </MenuItem>
             ))}
           </Select>

frontend/src/components/Send.js

@@ -8,10 +8,12 @@ import Box from "@mui/material/Box";
 import InputAdornment from "@mui/material/InputAdornment";
 import CircularProgress from "@mui/material/CircularProgress";
 import PropTypes from "prop-types";
+import { useDispatch, useSelector } from "react-redux";
 import { FormControl } from "@mui/material";
 import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
+import { getICNSName } from "../features/common/commonSlice";
 
 Send.propTypes = {
   onSend: PropTypes.func.isRequired,
@@ -34,10 +36,12 @@ export default function Send(props) {
     isAuthzMode,
     grantsToMe,
     setGranter,
-    granter
+    granter,
   } = props;
 
+  const dispatch = useDispatch();
   const currency = chainInfo?.config?.currencies[0];
+  const icnsNames = useSelector((state) => state.common.icnsNames);
 
   const { handleSubmit, control, setValue } = useForm({
     defaultValues: {
@@ -55,6 +59,17 @@ export default function Send(props) {
     });
   };
 
+  const fetchName = (address) => {
+    if (!icnsNames?.[address]) {
+      dispatch(
+        getICNSName({
+          address: address,
+        })
+      );
+    }
+    return icnsNames?.[address]?.name;
+  };
+
   return (
     <Paper
       elevation={0}
@@ -76,7 +91,7 @@ export default function Send(props) {
         }}
       >
         <form onSubmit={handleSubmit(onSubmit)}>
-        {isAuthzMode && grantsToMe?.length > 0 ? (
+          {isAuthzMode && grantsToMe?.length > 0 ? (
             <FormControl
               fullWidth
               sx={{
@@ -96,7 +111,7 @@ export default function Send(props) {
               >
                 {grantsToMe.map((granter, index) => (
                   <MenuItem id={index} value={granter}>
-                    {granter}
+                    {fetchName(granter) || granter}
                   </MenuItem>
                 ))}
               </Select>

frontend/src/components/Vote.js

@@ -14,7 +14,7 @@ import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import PropTypes from "prop-types";
 import { useDispatch } from "react-redux";
-import { setError } from "../features/common/commonSlice";
+import { getICNSName, setError } from "../features/common/commonSlice";
 import CloseIcon from "@mui/icons-material/Close";
 
 VoteDialog.propTypes = {
@@ -37,11 +37,12 @@ export default function VoteDialog(props) {
   const [option, setOption] = React.useState("");
   const dispatch = useDispatch();
   const [granter, setGranter] = React.useState(
-    props.granters.length > 0 ? props.granters[0] : ""
+    props.granters.length ? props.granters[0] : ""
   );
   const [justification, setJustification] = React.useState("");
   const govTx = useSelector((state) => state.gov.tx);
   const authzExecTx = useSelector((state) => state.authz.execTx);
+  const icnsNames = useSelector((state) => state.common.icnsNames);
 
   const handleClose = () => {
     setOption("");
@@ -69,6 +70,17 @@ export default function VoteDialog(props) {
     setOption(e.target.value);
   };
 
+  const fetchName = (address) => {
+    if (!icnsNames?.[address]) {
+      dispatch(
+        getICNSName({
+          address: address,
+        })
+      );
+    }
+    return icnsNames?.[address]?.name;
+  };
+
   return (
     <div>
       <Dialog
@@ -157,7 +169,7 @@ export default function VoteDialog(props) {
                 >
                   {props.granters.map((granter, index) => (
                     <MenuItem id={index} value={granter}>
-                      {granter}
+                      {fetchName(granter) || granter}
                     </MenuItem>
                   ))}
                 </Select>

frontend/src/components/common/NameAddress.jsx

@@ -0,0 +1,16 @@
+import React, { useState } from "react";
+import { shortenAddress } from "../../utils/util";
+
+const NameAddress = ({ address, name }) => {
+  const [show, setShow] = useState(false);
+  const toggleAddress = () => {
+    setShow(!show);
+  };
+  return (
+    <div onClick={toggleAddress} style={{ cursor: "pointer" }}>
+      {show ? shortenAddress(address, 24) : name || shortenAddress(address, 24)}
+    </div>
+  );
+};
+
+export default NameAddress;

frontend/src/components/feegrant/BasicFeeGrant.jsx

@@ -3,15 +3,18 @@ import { FormControl, InputAdornment, TextField } from "@mui/material";
 import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import { Controller, useFormContext } from "react-hook-form";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
+import { getICNSName } from "../../features/common/commonSlice";
 
 function BasicFeeGrant(props) {
   const { granters, granter, setGranter } = props;
   const params = useParams();
+  const dispatch = useDispatch();
+
   const selectedNetwork = useSelector(
     (state) => state.common.selectedNetwork.chainName
   );
@@ -21,13 +24,25 @@ function BasicFeeGrant(props) {
 
   const networks = useSelector((state) => state.wallet.networks);
   const nameToChainIDs = useSelector((state) => state.wallet.nameToChainIDs);
+  const icnsNames = useSelector((state) => state.common.icnsNames);
 
   const currency =
     networks[nameToChainIDs[currentNetwork]]?.network.config.currencies;
 
 
   const { control } = useFormContext();
 
+  const fetchName = (address) => {
+    if (!icnsNames?.[address]) {
+      dispatch(
+        getICNSName({
+          address: address,
+        })
+      );
+    }
+    return icnsNames?.[address]?.name;
+  };
+
   return (
     <>
           {isAuthzMode && granters?.length > 0 ? (
@@ -54,7 +69,7 @@ function BasicFeeGrant(props) {
           >
             {granters.map((granter, index) => (
               <MenuItem id={index} value={granter}>
-                {granter}
+              {fetchName(granter) || granter}
               </MenuItem>
             ))}
           </Select>