added refreshing when deleting/adding grants

akash-network · Sep 12, 2023 · ef57baf · ef57baf
1 parent 29c83c4
commit ef57baf
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 44 deletions.
diff --git a/deploy-web/src/components/settings/AllowanceGrantedRow.tsx b/deploy-web/src/components/settings/AllowanceGrantedRow.tsx
@@ -0,0 +1,33 @@
+import React, { ReactNode } from "react";
+import { TableCell } from "@mui/material";
+import { CustomTableRow } from "../shared/CustomTable";
+import { Address } from "../shared/Address";
+import { FormattedTime } from "react-intl";
+import { AllowanceType } from "@src/types/grant";
+import { AKTAmount } from "../shared/AKTAmount";
+import { coinToUDenom } from "@src/utils/priceUtils";
+import { getAllowanceTitleByType } from "@src/utils/grants";
+
+type Props = {
+  allowance: AllowanceType;
+  children?: ReactNode;
+};
+
+export const AllowanceGrantedRow: React.FunctionComponent<Props> = ({ allowance }) => {
+  // const denomData = useDenomData(grant.authorization.spend_limit.denom);
+
+  return (
+    <CustomTableRow>
+      <TableCell>{getAllowanceTitleByType(allowance)}</TableCell>
+      <TableCell>
+        <Address address={allowance.granter} isCopyable />
+      </TableCell>
+      <TableCell>
+        <AKTAmount uakt={coinToUDenom(allowance.allowance.spend_limit[0])} /> AKT
+      </TableCell>
+      <TableCell align="right">
+        <FormattedTime year="numeric" month={"numeric"} day={"numeric"} value={allowance.allowance.expiration} />
+      </TableCell>
+    </CustomTableRow>
+  );
+};
diff --git a/deploy-web/src/components/settings/AllowanceIssuedRow.tsx b/deploy-web/src/components/settings/AllowanceIssuedRow.tsx
@@ -32,7 +32,7 @@ export const AllowanceIssuedRow: React.FunctionComponent<Props> = ({ allowance,
       <TableCell align="right">
         <FormattedTime year="numeric" month={"numeric"} day={"numeric"} value={allowance.allowance.expiration} />
       </TableCell>
-      <TableCell>
+      <TableCell align="right">
         <IconButton onClick={() => onEditAllowance(allowance)}>
           <EditIcon />
         </IconButton>

diff --git a/deploy-web/src/components/settings/GranterRow.tsx b/deploy-web/src/components/settings/GranterRow.tsx
@@ -31,7 +31,7 @@ export const GranterRow: React.FunctionComponent<Props> = ({ children, grant, on
       <TableCell align="right">
         <FormattedTime year="numeric" month={"numeric"} day={"numeric"} value={grant.expiration} />
       </TableCell>
-      <TableCell>
+      <TableCell align="right">
         <IconButton onClick={() => onEditGrant(grant)}>
           <EditIcon />
         </IconButton>

diff --git a/deploy-web/src/components/wallet/AllowanceModal.tsx b/deploy-web/src/components/wallet/AllowanceModal.tsx
@@ -1,6 +1,6 @@
 import { useRef, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
-import { FormControl, TextField, Typography, Box, Alert, Select, MenuItem, InputLabel, InputAdornment } from "@mui/material";
+import { FormControl, TextField, Typography, Box, Alert, InputAdornment } from "@mui/material";
 import { addYears, format } from "date-fns";
 import { makeStyles } from "tss-react/mui";
 import { useKeplr } from "@src/context/KeplrWalletProvider";
@@ -9,10 +9,8 @@ import { TransactionMessageData } from "@src/utils/TransactionMessageData";
 import { LinkTo } from "../shared/LinkTo";
 import { event } from "nextjs-google-analytics";
 import { AnalyticsEvents } from "@src/utils/analytics";
-import { AllowanceType, GrantType } from "@src/types/grant";
+import { AllowanceType } from "@src/types/grant";
 import { Popup } from "../shared/Popup";
-import { getUsdcDenom, useUsdcDenom } from "@src/hooks/useDenom";
-import { denomToUdenom } from "@src/utils/mathHelpers";
 import { useDenomData } from "@src/hooks/useWalletBalance";
 import { uAktDenom } from "@src/utils/constants";
 import { FormattedDate } from "react-intl";
@@ -34,7 +32,6 @@ export const AllowanceModal: React.FunctionComponent<Props> = ({ editingAllowanc
   const [error, setError] = useState("");
   const { classes } = useStyles();
   const { signAndBroadcastTx } = useKeplr();
-  const usdcDenom = useUsdcDenom();
   const {
     handleSubmit,
     control,
@@ -53,8 +50,6 @@ export const AllowanceModal: React.FunctionComponent<Props> = ({ editingAllowanc
   const { amount, granteeAddress, expiration } = watch();
   const denomData = useDenomData(uAktDenom);
 
-  console.log(coinToDenom(editingAllowance.allowance.spend_limit[0]));
-
   const onDepositClick = event => {
     event.preventDefault();
     formRef.current.dispatchEvent(new Event("submit", { cancelable: true, bubbles: true }));
@@ -214,7 +209,7 @@ export const AllowanceModal: React.FunctionComponent<Props> = ({ editingAllowanc
         {!!amount && granteeAddress && (
           <Alert severity="info" variant="outlined">
             <Typography variant="caption">
-              This address will be able to spend up to {amount} AKT on fees on your behalf ending on{" "}
+              This address will be able to spend up to {amount} AKT on <b>transaction fees</b> on your behalf ending on{" "}
               <FormattedDate value={expiration} year="numeric" month="2-digit" day="2-digit" hour="2-digit" minute="2-digit" />.
             </Typography>
           </Alert>

diff --git a/deploy-web/src/pages/settings/authorizations.tsx b/deploy-web/src/pages/settings/authorizations.tsx
@@ -4,7 +4,7 @@ import PageContainer from "@src/components/shared/PageContainer";
 import SettingsLayout, { SettingsTabs } from "@src/components/settings/SettingsLayout";
 import { Fieldset } from "@src/components/shared/Fieldset";
 import { Box, Button, CircularProgress, Table, TableBody, TableCell, TableContainer, TableRow, Typography } from "@mui/material";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useKeplr } from "@src/context/KeplrWalletProvider";
 import { CustomTableHeader } from "@src/components/shared/CustomTable";
 import { Address } from "@src/components/shared/Address";
@@ -19,6 +19,8 @@ import { GranteeRow } from "@src/components/settings/GranteeRow";
 import { AllowanceModal } from "@src/components/wallet/AllowanceModal";
 import { AllowanceIssuedRow } from "@src/components/settings/AllowanceIssuedRow";
 import { makeStyles } from "tss-react/mui";
+import { averageBlockTime } from "@src/utils/priceUtils";
+import { AllowanceGrantedRow } from "@src/components/settings/AllowanceGrantedRow";
 
 type Props = {};
 
@@ -30,6 +32,10 @@ const useStyles = makeStyles()(theme => ({
   }
 }));
 
+type RefreshingType = "granterGrants" | "granteeGrants" | "allowancesIssued" | "allowancesGranted" | null;
+const defaultRefetchInterval = 30 * 1000;
+const refreshingInterval = 1000;
+
 const SettingsSecurityPage: React.FunctionComponent<Props> = ({}) => {
   const { classes } = useStyles();
   const { address } = useKeplr();
@@ -39,20 +45,43 @@ const SettingsSecurityPage: React.FunctionComponent<Props> = ({}) => {
   const [showAllowanceModal, setShowAllowanceModal] = useState(false);
   const [deletingGrant, setDeletingGrant] = useState<GrantType | null>(null);
   const [deletingAllowance, setDeletingAllowance] = useState<AllowanceType | null>(null);
-  const { data: granterGrants, isLoading: isLoadingGranterGrants, refetch: refetchGranterGrants } = useGranterGrants(address);
-  const { data: granteeGrants, isLoading: isLoadingGranteeGrants, refetch: refetchGranteeGrants } = useGranteeGrants(address);
-  const { data: allowancesIssued, isLoading: isLoadingAllowancesIssued, refetch: refetchAllowancesIssued } = useAllowancesIssued(address);
-  const { data: allowancesGranted, isLoading: isLoadingAllowancesGranted, refetch: refetchAllowancesGranted } = useAllowancesGranted(address);
-
+  const [isRefreshing, setIsRefreshing] = useState<RefreshingType>(null);
+  const { data: granterGrants, isLoading: isLoadingGranterGrants } = useGranterGrants(address, {
+    refetchInterval: isRefreshing === "granterGrants" ? refreshingInterval : defaultRefetchInterval
+  });
+  const { data: granteeGrants, isLoading: isLoadingGranteeGrants } = useGranteeGrants(address, {
+    refetchInterval: isRefreshing === "granteeGrants" ? refreshingInterval : defaultRefetchInterval
+  });
+  const { data: allowancesIssued, isLoading: isLoadingAllowancesIssued } = useAllowancesIssued(address, {
+    refetchInterval: isRefreshing === "allowancesIssued" ? refreshingInterval : defaultRefetchInterval
+  });
+  const { data: allowancesGranted, isLoading: isLoadingAllowancesGranted } = useAllowancesGranted(address, {
+    refetchInterval: isRefreshing === "allowancesGranted" ? refreshingInterval : defaultRefetchInterval
+  });
   const { signAndBroadcastTx } = useKeplr();
 
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+    if (isRefreshing) {
+      timeout = setTimeout(() => {
+        setIsRefreshing(null);
+      }, averageBlockTime + 1000);
+    }
+
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [isRefreshing]);
+
   async function onDeleteGrantConfirmed() {
     const message = TransactionMessageData.getRevokeMsg(address, deletingGrant.grantee, deletingGrant.authorization["@type"]);
 
     const response = await signAndBroadcastTx([message]);
 
     if (response) {
-      refetchGranterGrants();
+      setIsRefreshing("granterGrants");
       setDeletingGrant(null);
     }
   }
@@ -63,15 +92,14 @@ const SettingsSecurityPage: React.FunctionComponent<Props> = ({}) => {
     const response = await signAndBroadcastTx([message]);
 
     if (response) {
-      refetchAllowancesIssued();
+      setIsRefreshing("allowancesIssued");
       setDeletingAllowance(null);
     }
   }
 
   function onCreateNewGrant() {
     setEditingGrant(null);
     setShowGrantModal(true);
-    refetchGranterGrants();
   }
 
   function onEditGrant(grant: GrantType) {
@@ -80,18 +108,17 @@ const SettingsSecurityPage: React.FunctionComponent<Props> = ({}) => {
   }
 
   function onGrantClose() {
-    refetchGranteeGrants();
+    setIsRefreshing("granterGrants");
     setShowGrantModal(false);
   }
 
   function onCreateNewAllowance() {
     setEditingAllowance(null);
     setShowAllowanceModal(true);
-    refetchAllowancesIssued();
   }
 
   function onAllowanceClose() {
-    refetchAllowancesIssued();
+    setIsRefreshing("allowancesIssued");
     setShowAllowanceModal(false);
   }
 
@@ -101,7 +128,7 @@ const SettingsSecurityPage: React.FunctionComponent<Props> = ({}) => {
   }
 
   return (
-    <Layout isLoading={isLoadingAllowancesIssued || isLoadingAllowancesGranted || isLoadingGranteeGrants || isLoadingGranterGrants}>
+    <Layout isLoading={!!isRefreshing || isLoadingAllowancesIssued || isLoadingAllowancesGranted || isLoadingGranteeGrants || isLoadingGranterGrants}>
       <NextSeo title="Settings Authorizations" />
 
       <SettingsLayout
@@ -111,14 +138,15 @@ const SettingsSecurityPage: React.FunctionComponent<Props> = ({}) => {
           <Box sx={{ marginLeft: { xs: 0, sm: 0, md: "1rem" } }}>
             <Button onClick={onCreateNewGrant} color="secondary" variant="contained">
               <AccountBalanceIcon />
-              &nbsp;Authorize Spending
+              &nbsp;Authorize Spend
             </Button>
           </Box>
         }
       >
         <PageContainer sx={{ paddingTop: "1rem" }}>
           <Typography variant="h6" className={classes.subTitle}>
-            These authorizations allow you authorize other addresses to spend on deployments using your funds. You can revoke these authorizations at any time.
+            These authorizations allow you authorize other addresses to spend on deployments or deployment deposits using your funds. You can revoke these
+            authorizations at any time.
           </Typography>
           <Fieldset label="Authorizations Given">
             {isLoadingGranterGrants || !granterGrants ? (
@@ -135,7 +163,7 @@ const SettingsSecurityPage: React.FunctionComponent<Props> = ({}) => {
                           <TableCell>Grantee</TableCell>
                           <TableCell align="right">Spending Limit</TableCell>
                           <TableCell align="right">Expiration</TableCell>
-                          <TableCell></TableCell>
+                          <TableCell align="right"></TableCell>
                         </TableRow>
                       </CustomTableHeader>
 
@@ -195,7 +223,7 @@ const SettingsSecurityPage: React.FunctionComponent<Props> = ({}) => {
             }}
           >
             <Typography variant="h1" sx={{ fontSize: "2rem", fontWeight: "bold" }}>
-              Fee Authorizations
+              Tx Fee Authorizations
             </Typography>
             <Button onClick={onCreateNewAllowance} color="secondary" variant="contained" sx={{ marginLeft: { xs: 0, sm: 0, md: "1rem" } }}>
               <AccountBalanceIcon />
@@ -204,7 +232,8 @@ const SettingsSecurityPage: React.FunctionComponent<Props> = ({}) => {
           </Box>
 
           <Typography variant="h6" className={classes.subTitle}>
-            These authorizations allow you authorize other addresses to spend on fees using your funds. You can revoke these authorizations at any time.
+            These authorizations allow you authorize other addresses to spend on transaction fees using your funds. You can revoke these authorizations at any
+            time.
           </Typography>
 
           <Fieldset label="Authorizations Given">
@@ -223,7 +252,7 @@ const SettingsSecurityPage: React.FunctionComponent<Props> = ({}) => {
                           <TableCell>Grantee</TableCell>
                           <TableCell align="right">Spending Limit</TableCell>
                           <TableCell align="right">Expiration</TableCell>
-                          <TableCell></TableCell>
+                          <TableCell align="right"></TableCell>
                         </TableRow>
                       </CustomTableHeader>
 
@@ -247,32 +276,33 @@ const SettingsSecurityPage: React.FunctionComponent<Props> = ({}) => {
           </Fieldset>
 
           <Fieldset label="Authorizations Received">
-            {isLoadingGranteeGrants || !granteeGrants ? (
+            {isLoadingAllowancesGranted || !allowancesGranted ? (
               <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
                 <CircularProgress size="2rem" color="secondary" />
               </Box>
             ) : (
               <>
-                {granteeGrants.length > 0 ? (
+                {allowancesGranted.length > 0 ? (
                   <TableContainer>
                     <Table size="small">
                       <CustomTableHeader>
                         <TableRow>
-                          <TableCell>Granter</TableCell>
-                          <TableCell align="right">Spending Limit</TableCell>
+                          <TableCell>Type</TableCell>
+                          <TableCell>Grantee</TableCell>
+                          <TableCell>Spending Limit</TableCell>
                           <TableCell align="right">Expiration</TableCell>
                         </TableRow>
                       </CustomTableHeader>
 
                       <TableBody>
-                        {granteeGrants.map(grant => (
-                          <GranteeRow key={grant.granter} grant={grant} />
+                        {allowancesGranted.map(allowance => (
+                          <AllowanceGrantedRow key={allowance.granter} allowance={allowance} />
                         ))}
                       </TableBody>
                     </Table>
                   </TableContainer>
                 ) : (
-                  <Typography variant="caption">No authorizations received.</Typography>
+                  <Typography variant="caption">No allowances received.</Typography>
                 )}
               </>
             )}

diff --git a/deploy-web/src/utils/deploymentUtils.ts b/deploy-web/src/utils/deploymentUtils.ts
@@ -1,6 +1,7 @@
 import axios from "axios";
 import { PROVIDER_PROXY_URL } from "./constants";
 import { LocalCert } from "@src/context/CertificateProvider/CertificateProviderContext";
+import { wait } from "./timer";
 
 export const sendManifestToProvider = async (providerInfo, manifest, dseq: string, localCert: LocalCert) => {
   console.log("Sending manifest to " + providerInfo?.owner);
@@ -43,11 +44,3 @@ export const sendManifestToProvider = async (providerInfo, manifest, dseq: strin
 
   return response;
 };
-
-async function wait(time) {
-  return new Promise((res, rej) => {
-    setTimeout(() => {
-      res(true);
-    }, time);
-  });
-}
diff --git a/deploy-web/src/utils/timer.ts b/deploy-web/src/utils/timer.ts
@@ -22,3 +22,11 @@ export const Timer = (ms: number) => {
     abort
   };
 };
+
+export async function wait(time: number) {
+  return new Promise((res, rej) => {
+    setTimeout(() => {
+      res(true);
+    }, time);
+  });
+}