From ef57baf56569833c89f8c803d122ab714d268dad Mon Sep 17 00:00:00 2001 From: Maxime Beauchamp Date: Tue, 12 Sep 2023 18:52:01 -0400 Subject: [PATCH] added refreshing when deleting/adding grants --- .../settings/AllowanceGrantedRow.tsx | 33 ++++++++ .../settings/AllowanceIssuedRow.tsx | 2 +- .../src/components/settings/GranterRow.tsx | 2 +- .../src/components/wallet/AllowanceModal.tsx | 11 +-- .../src/pages/settings/authorizations.tsx | 82 +++++++++++++------ deploy-web/src/utils/deploymentUtils.ts | 9 +- deploy-web/src/utils/timer.ts | 8 ++ 7 files changed, 103 insertions(+), 44 deletions(-) create mode 100644 deploy-web/src/components/settings/AllowanceGrantedRow.tsx diff --git a/deploy-web/src/components/settings/AllowanceGrantedRow.tsx b/deploy-web/src/components/settings/AllowanceGrantedRow.tsx new file mode 100644 index 000000000..6e0444e3f --- /dev/null +++ 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 = ({ allowance }) => { + // const denomData = useDenomData(grant.authorization.spend_limit.denom); + + return ( + + {getAllowanceTitleByType(allowance)} + +
+ + + AKT + + + + + + ); +}; diff --git a/deploy-web/src/components/settings/AllowanceIssuedRow.tsx b/deploy-web/src/components/settings/AllowanceIssuedRow.tsx index 9d15f8617..d9aced5d4 100644 --- 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 = ({ allowance, - + onEditAllowance(allowance)}> diff --git a/deploy-web/src/components/settings/GranterRow.tsx b/deploy-web/src/components/settings/GranterRow.tsx index 812fbd783..703c4a0c3 100644 --- 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 = ({ children, grant, on - + onEditGrant(grant)}> diff --git a/deploy-web/src/components/wallet/AllowanceModal.tsx b/deploy-web/src/components/wallet/AllowanceModal.tsx index b92a0972d..79ffd2fb6 100644 --- 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 = ({ 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 = ({ 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 = ({ editingAllowanc {!!amount && granteeAddress && ( - 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 transaction fees on your behalf ending on{" "} . diff --git a/deploy-web/src/pages/settings/authorizations.tsx b/deploy-web/src/pages/settings/authorizations.tsx index 6901500f0..75233cada 100644 --- 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 = ({}) => { const { classes } = useStyles(); const { address } = useKeplr(); @@ -39,20 +45,43 @@ const SettingsSecurityPage: React.FunctionComponent = ({}) => { const [showAllowanceModal, setShowAllowanceModal] = useState(false); const [deletingGrant, setDeletingGrant] = useState(null); const [deletingAllowance, setDeletingAllowance] = useState(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(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,7 +92,7 @@ const SettingsSecurityPage: React.FunctionComponent = ({}) => { const response = await signAndBroadcastTx([message]); if (response) { - refetchAllowancesIssued(); + setIsRefreshing("allowancesIssued"); setDeletingAllowance(null); } } @@ -71,7 +100,6 @@ const SettingsSecurityPage: React.FunctionComponent = ({}) => { function onCreateNewGrant() { setEditingGrant(null); setShowGrantModal(true); - refetchGranterGrants(); } function onEditGrant(grant: GrantType) { @@ -80,18 +108,17 @@ const SettingsSecurityPage: React.FunctionComponent = ({}) => { } 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 = ({}) => { } return ( - + = ({}) => { } > - 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.
{isLoadingGranterGrants || !granterGrants ? ( @@ -135,7 +163,7 @@ const SettingsSecurityPage: React.FunctionComponent = ({}) => { Grantee Spending Limit Expiration - + @@ -195,7 +223,7 @@ const SettingsSecurityPage: React.FunctionComponent = ({}) => { }} > - Fee Authorizations + Tx Fee Authorizations