From 269d22709a485bb0b1bec8f34e8a66a2c3625480 Mon Sep 17 00:00:00 2001 From: Maxime Beauchamp <15185355+baktun14@users.noreply.github.com> Date: Mon, 26 Aug 2024 15:18:32 -0400 Subject: [PATCH] fix(console): refactor useAllowance hook (#336) --- .../authorizations/AllowanceWatcher.tsx | 8 ------- .../authorizations/Authorizations.tsx | 10 ++++----- .../context/WalletProvider/WalletProvider.tsx | 8 +++---- apps/deploy-web/src/hooks/useAllowance.tsx | 21 ++++++++++--------- apps/deploy-web/src/pages/_app.tsx | 2 -- apps/deploy-web/src/queries/useGrantsQuery.ts | 8 +++---- 6 files changed, 24 insertions(+), 33 deletions(-) delete mode 100644 apps/deploy-web/src/components/authorizations/AllowanceWatcher.tsx diff --git a/apps/deploy-web/src/components/authorizations/AllowanceWatcher.tsx b/apps/deploy-web/src/components/authorizations/AllowanceWatcher.tsx deleted file mode 100644 index 67e356c4d..000000000 --- a/apps/deploy-web/src/components/authorizations/AllowanceWatcher.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { FC } from "react"; - -import { useAllowance } from "@src/hooks/useAllowance"; - -export const AllowanceWatcher: FC = () => { - useAllowance(); - return null; -}; diff --git a/apps/deploy-web/src/components/authorizations/Authorizations.tsx b/apps/deploy-web/src/components/authorizations/Authorizations.tsx index 74947a45d..1bf9be1a2 100644 --- a/apps/deploy-web/src/components/authorizations/Authorizations.tsx +++ b/apps/deploy-web/src/components/authorizations/Authorizations.tsx @@ -6,7 +6,6 @@ import { NextSeo } from "next-seo"; import { Fieldset } from "@src/components/shared/Fieldset"; import { useWallet } from "@src/context/WalletProvider"; -import { useAllowance } from "@src/hooks/useAllowance"; import { useAllowancesIssued, useGranteeGrants, useGranterGrants } from "@src/queries/useGrantsQuery"; import { AllowanceType, GrantType } from "@src/types/grant"; import { averageBlockTime } from "@src/utils/priceUtils"; @@ -21,13 +20,17 @@ import { DeploymentGrantTable } from "./DeploymentGrantTable"; import { FeeGrantTable } from "./FeeGrantTable"; import { GranteeRow } from "./GranteeRow"; import { GrantModal } from "./GrantModal"; +import { useAllowance } from "@src/hooks/useAllowance"; type RefreshingType = "granterGrants" | "granteeGrants" | "allowancesIssued" | "allowancesGranted" | null; const defaultRefetchInterval = 30 * 1000; const refreshingInterval = 1000; export const Authorizations: React.FunctionComponent = () => { - const { address, signAndBroadcastTx } = useWallet(); + const { address, signAndBroadcastTx, isManaged } = useWallet(); + const { + fee: { all: allowancesGranted, isLoading: isLoadingAllowancesGranted, setDefault, default: defaultAllowance } + } = useAllowance(address, isManaged); const [editingGrant, setEditingGrant] = useState(null); const [editingAllowance, setEditingAllowance] = useState(null); const [showGrantModal, setShowGrantModal] = useState(false); @@ -46,9 +49,6 @@ export const Authorizations: React.FunctionComponent = () => { const { data: allowancesIssued, isLoading: isLoadingAllowancesIssued } = useAllowancesIssued(address, { refetchInterval: isRefreshing === "allowancesIssued" ? refreshingInterval : defaultRefetchInterval }); - const { - fee: { all: allowancesGranted, isLoading: isLoadingAllowancesGranted, setDefault, default: defaultAllowance } - } = useAllowance(); useEffect(() => { let timeout: NodeJS.Timeout; diff --git a/apps/deploy-web/src/context/WalletProvider/WalletProvider.tsx b/apps/deploy-web/src/context/WalletProvider/WalletProvider.tsx index b4ae00b66..433f7e582 100644 --- a/apps/deploy-web/src/context/WalletProvider/WalletProvider.tsx +++ b/apps/deploy-web/src/context/WalletProvider/WalletProvider.tsx @@ -13,7 +13,6 @@ import { event } from "nextjs-google-analytics"; import { SnackbarKey, useSnackbar } from "notistack"; import { LoadingState, TransactionModal } from "@src/components/layout/TransactionModal"; -import { useAllowance } from "@src/hooks/useAllowance"; import { useUsdcDenom } from "@src/hooks/useDenom"; import { useManagedWallet } from "@src/hooks/useManagedWallet"; import { useUser } from "@src/hooks/useUser"; @@ -27,6 +26,7 @@ import { UrlService } from "@src/utils/urlUtils"; import { LocalWalletDataType } from "@src/utils/walletUtils"; import { useSelectedChain } from "../CustomChainProvider"; import { useSettings } from "../SettingsProvider"; +import { useAllowance } from "@src/hooks/useAllowance"; const ERROR_MESSAGES = { 5: "Insufficient funds", @@ -79,14 +79,14 @@ export const WalletProvider = ({ children }) => { const { settings } = useSettings(); const usdcIbcDenom = useUsdcDenom(); const user = useUser(); - const userWallet = useSelectedChain(); const { wallet: managedWallet, isLoading, create, refetch } = useManagedWallet(); const { address: walletAddress, username, isWalletConnected } = useMemo(() => managedWallet || userWallet, [managedWallet, userWallet]); const { addEndpoints } = useManager(); + const isManaged = !!managedWallet; const { fee: { default: feeGranter } - } = useAllowance(); + } = useAllowance(walletAddress as string, isManaged); useWhen(managedWallet, refreshBalances); @@ -349,7 +349,7 @@ export const WalletProvider = ({ children }) => { logout, signAndBroadcastTx, refreshBalances, - isManaged: !!managedWallet, + isManaged: isManaged, isWalletLoading: isLoading, isTrialing: !!managedWallet?.isTrialing, creditAmount: managedWallet?.creditAmount diff --git a/apps/deploy-web/src/hooks/useAllowance.tsx b/apps/deploy-web/src/hooks/useAllowance.tsx index 8d8ab81f3..4d846fa2f 100644 --- a/apps/deploy-web/src/hooks/useAllowance.tsx +++ b/apps/deploy-web/src/hooks/useAllowance.tsx @@ -8,7 +8,6 @@ import Link from "next/link"; import { useSnackbar } from "notistack"; import { useLocalStorage } from "usehooks-ts"; -import { useWallet } from "@src/context/WalletProvider"; import { useWhen } from "@src/hooks/useWhen"; import { useAllowancesGranted } from "@src/queries/useGrantsQuery"; @@ -24,15 +23,14 @@ const AllowanceNotificationMessage: FC = () => ( ); -export const useAllowance = () => { - const { address, isManaged } = useWallet(); +export const useAllowance = (address: string, isManaged: boolean) => { const [defaultFeeGranter, setDefaultFeeGranter] = useLocalStorage(`default-fee-granters/${address}`, undefined); const { data: allFeeGranters, isLoading, isFetched } = useAllowancesGranted(address); const { enqueueSnackbar } = useSnackbar(); - const actualAddresses = useMemo(() => { + const actualAllowanceAddresses = useMemo(() => { if (!address || !allFeeGranters) { - return []; + return null; } return allFeeGranters.reduce((acc, grant) => { @@ -45,14 +43,15 @@ export const useAllowance = () => { }, [allFeeGranters, address]); useWhen( - isFetched && address && !isManaged, + isFetched && address && !isManaged && !!actualAllowanceAddresses, () => { + const _actualAllowanceAddresses = actualAllowanceAddresses as string[]; const persistedAddresses = persisted[address] || []; - const added = difference(actualAddresses, persistedAddresses); - const removed = difference(persistedAddresses, actualAddresses); + const added = difference(_actualAllowanceAddresses, persistedAddresses); + const removed = difference(persistedAddresses, _actualAllowanceAddresses); if (added.length || removed.length) { - persisted[address] = actualAddresses; + persisted[address] = _actualAllowanceAddresses; localStorage.setItem(`fee-granters`, JSON.stringify(persisted)); } @@ -70,9 +69,11 @@ export const useAllowance = () => { if (defaultFeeGranter && removed.includes(defaultFeeGranter)) { setDefaultFeeGranter(undefined); + } else if (!defaultFeeGranter && _actualAllowanceAddresses.length) { + setDefaultFeeGranter(_actualAllowanceAddresses[0]); } }, - [actualAddresses, persisted] + [actualAllowanceAddresses, persisted] ); return useMemo( diff --git a/apps/deploy-web/src/pages/_app.tsx b/apps/deploy-web/src/pages/_app.tsx index 5fc267f9e..6e56a265d 100644 --- a/apps/deploy-web/src/pages/_app.tsx +++ b/apps/deploy-web/src/pages/_app.tsx @@ -14,7 +14,6 @@ import Router from "next/router"; import { ThemeProvider } from "next-themes"; import NProgress from "nprogress"; -import { AllowanceWatcher } from "@src/components/authorizations/AllowanceWatcher"; import GoogleAnalytics from "@src/components/layout/CustomGoogleAnalytics"; import { CustomIntlProvider } from "@src/components/layout/CustomIntlProvider"; import { PageHead } from "@src/components/layout/PageHead"; @@ -71,7 +70,6 @@ const App: React.FunctionComponent = props => { - diff --git a/apps/deploy-web/src/queries/useGrantsQuery.ts b/apps/deploy-web/src/queries/useGrantsQuery.ts index 2256d84cc..7e11fb8d5 100644 --- a/apps/deploy-web/src/queries/useGrantsQuery.ts +++ b/apps/deploy-web/src/queries/useGrantsQuery.ts @@ -7,7 +7,7 @@ import { ApiUrlService } from "@src/utils/apiUtils"; import { QueryKeys } from "./queryKeys"; async function getGranterGrants(apiEndpoint: string, address: string) { - if (!address || !apiEndpoint) return []; + if (!address || !apiEndpoint) return undefined; const response = await axios.get(ApiUrlService.granterGrants(apiEndpoint, address)); const filteredGrants = response.data.grants.filter( @@ -26,7 +26,7 @@ export function useGranterGrants(address: string, options = {}) { } async function getGranteeGrants(apiEndpoint: string, address: string) { - if (!address || !apiEndpoint) return []; + if (!address || !apiEndpoint) return undefined; const response = await axios.get(ApiUrlService.granteeGrants(apiEndpoint, address)); const filteredGrants = response.data.grants.filter( @@ -47,7 +47,7 @@ export function useGranteeGrants(address: string, options = {}) { } async function getAllowancesIssued(apiEndpoint: string, address: string) { - if (!address || !apiEndpoint) return []; + if (!address || !apiEndpoint) return undefined; const response = await axios.get(ApiUrlService.allowancesIssued(apiEndpoint, address)); @@ -61,7 +61,7 @@ export function useAllowancesIssued(address: string, options = {}) { } async function getAllowancesGranted(apiEndpoint: string, address: string) { - if (!address || !apiEndpoint) return []; + if (!address || !apiEndpoint) return undefined; const response = await axios.get(ApiUrlService.allowancesGranted(apiEndpoint, address));