fix(console): refactor useAllowance hook (#336)

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<GrantType | null>(null);
   const [editingAllowance, setEditingAllowance] = useState<AllowanceType | null>(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;

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

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<string | undefined>(`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(

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> = props => {
                                         <BackgroundTaskProvider>
                                           <TemplatesProvider>
                                             <LocalNoteProvider>
-                                              <AllowanceWatcher />
                                               <GoogleAnalytics />
                                               <Component {...pageProps} />
                                             </LocalNoteProvider>

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));