Chary/fee auth ondemand (#1189)

* fix signer issue * disable IBC button for metamask wallet * fix total sum value in dashboard * handle not found coin price info from coingecko * change witval to vitwit in validator profile * load authz and feegrants on demand * remove token prices in landing page * chore: fix lint issue * chore: update loading ui * fix lint issue * add cdn images to landing page --------- Co-authored-by: hemanthghs <ghshemanth@gmail.com>
vitwit · Mar 7, 2024 · d864758 · d864758
1 parent b0eebf3
commit d864758
Show file tree

Hide file tree

Showing 12 changed files with 148 additions and 57 deletions.
diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -20,6 +20,12 @@ const nextConfig = {
         port: '',
         pathname: '/cosmos/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'resolute.sgp1.cdn.digitaloceanspaces.com',
+        port: '',
+        pathname: '/**',
+      },
     ],
   },
 };

diff --git a/frontend/src/app/(routes)/staking/validator/[validator]/ValidatorProfile.tsx b/frontend/src/app/(routes)/staking/validator/[validator]/ValidatorProfile.tsx
@@ -112,13 +112,17 @@ const ValidatorMetadataCard = ({
       <div className="flex gap-2 items-center h-8">
         <ValidatorLogo identity={identity} height={24} width={24} />
         <div className="text-[18px] leading-[21.7px]">
-          {capitalizeFirstLetter(moniker)}
+          {
+            moniker.toLowerCase() === WITVAL ? 'VITWIT' : capitalizeFirstLetter(moniker)
+          }
         </div>
       </div>
       <div className="space-y-10">
         <div className="space-y-2">
           <div className="text-[#FFFFFF80] text-[14px]">Description</div>
-          <div className="text-[16px] leading-[30px]">{description || '-'}</div>
+          <div className="text-[16px] leading-[30px]">{
+           moniker.toLowerCase() === WITVAL?
+           'Vitwit excels in providing top-notch infrastructure services for the Cosmos blockchain ecosystem. We specialize in setting up and managing validators, relayers, and offering expert advisory services.':description || '-'}</div>
         </div>
         {website ? (
           <div>

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -107,7 +107,7 @@
     @apply px-[120px] flex flex-col justify-center h-screen;
     font-family: 'Space Grotesk' !important;
     background:
-      url('/cosmos-background.png'),
+      url('https://resolute.sgp1.cdn.digitaloceanspaces.com/cosmos-background.png'),
       lightgray 50% / cover;
   }
 
@@ -498,6 +498,11 @@
   animation: dots 1s steps(5, end) infinite;
 }
 
+.dots-loader:after {
+  content: ' ...';
+  animation: dots 1s steps(5, end) infinite;
+}
+
 @keyframes dots {
   0%,
   20% {

diff --git a/frontend/src/components/AuthzButton.tsx b/frontend/src/components/AuthzButton.tsx
@@ -10,9 +10,10 @@ const AuthzButton = () => {
   const isAuthzEnabled = useAppSelector(
     (state) => state.authz.authzModeEnabled
   );
-  const grantsToMeLoading = useAppSelector(
-    (state) => state.authz.getGrantsToMeLoading > 0
-  );
+
+  // const grantsToMeLoading = useAppSelector(
+  //   (state) => state.authz.getGrantsToMeLoading > 0
+  // );
 
   const { getInterChainGrants, disableAuthzMode } = useAuthzGrants();
   const grants = getInterChainGrants();
@@ -26,32 +27,40 @@ const AuthzButton = () => {
 
   return (
     <div className="flex gap-2 items-center">
-      <DialogAuthzGrants
-        open={grantsDialogOpen}
-        onClose={handleGransDialogClose}
-        grants={grants}
-      />
+      {
+        grantsDialogOpen && <DialogAuthzGrants
+          open={grantsDialogOpen}
+          onClose={handleGransDialogClose}
+          grants={grants}
+        />
+      }
+
       {/* <Image src="/authz-icon-2.svg" width={32} height={32} alt="authz" /> */}
       <Tooltip
         title={
           isMetaMask
-            ? "MetaMask doesn't support Authz"
-            : grantsToMeLoading
-              ? 'fetching authz permissions...'
-              : !grants.length
-                ? 'No authz permissions'
-                : ''
+            ? "MetaMask doesn't support Authz" : null
         }
+      // title={
+      //   isMetaMask
+      //     ? "MetaMask doesn't support Authz"
+      //     : grantsToMeLoading
+      //       ? 'fetching authz permissions...'
+      //       : !grants.length
+      //         ? 'No authz permissions'
+      //         : ''
+      // }
       >
         <div
           className={
-            grantsToMeLoading || !grants.length
-              ? 'cursor-not-allowed'
-              : 'cursor-pointer'
+            // grantsToMeLoading || !grants.length
+            //   ? 'cursor-not-allowed'
+            //   : 
+            'cursor-pointer'
           }
           onClick={() => {
             if (!isAuthzEnabled) {
-              if (!grantsToMeLoading && grants.length && !isMetaMask)
+              // if (!grantsToMeLoading && grants.length && !isMetaMask)
                 setGrantsDialogOpen(true);
             } else {
               disableAuthzMode();

diff --git a/frontend/src/components/DialogAuthzGrants.tsx b/frontend/src/components/DialogAuthzGrants.tsx
@@ -1,4 +1,4 @@
-import {
+import useAuthzGrants, {
   ChainAuthz,
   InterChainAuthzGrants,
 } from '@/custom-hooks/useAuthzGrants';
@@ -8,13 +8,14 @@ import { Dialog, DialogContent } from '@mui/material';
 import Image from 'next/image';
 import React from 'react';
 import { copyToClipboard } from '@/utils/copyToClipboard';
-import { useAppDispatch } from '@/custom-hooks/StateHooks';
+import { useAppDispatch, useAppSelector } from '@/custom-hooks/StateHooks';
 import { setError } from '@/store/features/common/commonSlice';
 import useGetChainInfo from '@/custom-hooks/useGetChainInfo';
 import { getMsgNameFromAuthz } from '@/utils/authorizations';
 import { enableAuthzMode } from '@/store/features/authz/authzSlice';
 import { setAuthzMode } from '@/utils/localStorage';
 import { exitFeegrantMode } from '@/store/features/feegrant/feegrantSlice';
+import useInitAuthz from '@/custom-hooks/useInitAuthz';
 
 interface DialogAuthzGrantsProps {
   open: boolean;
@@ -23,11 +24,24 @@ interface DialogAuthzGrantsProps {
 }
 
 const DialogAuthzGrants: React.FC<DialogAuthzGrantsProps> = (props) => {
-  const { open, onClose, grants } = props;
+  const {
+    open,
+    onClose,
+    // grants
+  } = props;
   const dispatch = useAppDispatch();
   const { getCosmosAddress } = useGetChainInfo();
   const cosmosAddress = getCosmosAddress();
 
+  const grantsToMeLoading = useAppSelector(
+    (state) => state.authz.getGrantsToMeLoading > 0
+  );
+
+  const { getInterChainGrants } = useAuthzGrants();
+  const grants = getInterChainGrants();
+
+  useInitAuthz();
+
   return (
     <Dialog
       open={open}
@@ -53,6 +67,13 @@ const DialogAuthzGrants: React.FC<DialogAuthzGrantsProps> = (props) => {
           </div>
           <div className="mb-[72px] px-10">
             <h2 className="text-[20px] font-bold">Select Granter</h2>
+
+            {!grantsToMeLoading && !grants.length ? (
+              <div className="flex gap-1 items-center justify-center my-6">
+                <p>- No authz permissions found -</p>
+              </div>
+            ) : null}
+
             {grants.map((grant) => (
               <div className="grants-card" key={grant.address}>
                 <AddressChip address={grant.cosmosAddress} />
@@ -70,6 +91,15 @@ const DialogAuthzGrants: React.FC<DialogAuthzGrantsProps> = (props) => {
                 </button>
               </div>
             ))}
+
+            {grantsToMeLoading ? (
+              <div className="flex gap-1 items-center justify-center my-6">
+                <p>
+                  Please wait, trying to fetch your grants
+                  <span className="dots-loader"></span>
+                </p>
+              </div>
+            ) : null}
           </div>
         </div>
       </DialogContent>

diff --git a/frontend/src/components/DialogFeegrants.tsx b/frontend/src/components/DialogFeegrants.tsx
@@ -4,10 +4,10 @@ import { Dialog, DialogContent, Tooltip } from '@mui/material';
 import Image from 'next/image';
 import React from 'react';
 import { copyToClipboard } from '@/utils/copyToClipboard';
-import { useAppDispatch } from '@/custom-hooks/StateHooks';
+import { useAppDispatch, useAppSelector } from '@/custom-hooks/StateHooks';
 import { setError } from '@/store/features/common/commonSlice';
 import useGetChainInfo from '@/custom-hooks/useGetChainInfo';
-import {
+import useFeeGrants, {
   ChainAllowance,
   InterChainFeegrants,
 } from '@/custom-hooks/useFeeGrants';
@@ -16,6 +16,7 @@ import { setFeegrantMode } from '@/utils/localStorage';
 import { getMsgNamesFromAllowance } from '@/utils/feegrant';
 import { capitalizeFirstLetter } from '@/utils/util';
 import { exitAuthzMode } from '@/store/features/authz/authzSlice';
+import useInitFeegrant from '@/custom-hooks/useInitFeegrant';
 
 interface DialogFeegrantsProps {
   open: boolean;
@@ -24,11 +25,24 @@ interface DialogFeegrantsProps {
 }
 
 const DialogFeegrants: React.FC<DialogFeegrantsProps> = (props) => {
-  const { open, onClose, grants } = props;
+  const {
+    open,
+    onClose,
+    // grants
+  } = props;
   const dispatch = useAppDispatch();
   const { getCosmosAddress } = useGetChainInfo();
   const cosmosAddress = getCosmosAddress();
 
+  const grantsToMeLoading = useAppSelector(
+    (state) => state.feegrant.getGrantsToMeLoading > 0
+  );
+
+  const { getInterChainGrants } = useFeeGrants();
+  const grants = getInterChainGrants();
+
+  useInitFeegrant();
+
   return (
     <Dialog
       open={open}
@@ -54,6 +68,13 @@ const DialogFeegrants: React.FC<DialogFeegrantsProps> = (props) => {
           </div>
           <div className="mb-[72px] px-10">
             <h2 className="text-[20px] font-bold">Select Granter</h2>
+
+            {!grantsToMeLoading && !grants.length ? (
+              <div className="flex gap-1 items-center justify-center my-6">
+                <p>- No allowances found -</p>
+              </div>
+            ) : null}
+
             {grants.map((grant) => (
               <div className="grants-card" key={grant.address}>
                 <AddressChip address={grant.cosmosAddress} />
@@ -73,6 +94,15 @@ const DialogFeegrants: React.FC<DialogFeegrantsProps> = (props) => {
                 </button>
               </div>
             ))}
+
+            {grantsToMeLoading ? (
+              <div className="flex gap-1 items-center justify-center my-6">
+                <p>
+                  Please wait, trying to fetch your allowances
+                  <span className="dots-loader"></span>
+                </p>
+              </div>
+            ) : null}
           </div>
         </div>
       </DialogContent>

diff --git a/frontend/src/components/FeegrantButton.tsx b/frontend/src/components/FeegrantButton.tsx
@@ -10,9 +10,9 @@ const FeegrantButton = () => {
   const isFeegrantEnabled = useAppSelector(
     (state) => state.feegrant.feegrantModeEnabled
   );
-  const grantsToMeLoading = useAppSelector(
-    (state) => state.feegrant.getGrantsToMeLoading > 0
-  );
+  // const grantsToMeLoading = useAppSelector(
+  //   (state) => state.feegrant.getGrantsToMeLoading > 0
+  // );
 
   const { getInterChainGrants, disableFeegrantMode } = useFeeGrants();
   const grants = getInterChainGrants();
@@ -26,31 +26,35 @@ const FeegrantButton = () => {
 
   return (
     <div className="flex gap-2 items-center">
-      <DialogFeegrants
+      {
+        grantsDialogOpen &&   <DialogFeegrants
         open={grantsDialogOpen}
         onClose={handleGransDialogClose}
         grants={grants}
       />
+      }
+
       <Tooltip
         title={
           isMetaMask
             ? "MetaMask doesn't support Feegrant"
-            : grantsToMeLoading
-              ? 'fetching feegrant allowances...'
-              : !grants.length
-                ? 'No feegrant allowances'
+            // : grantsToMeLoading
+            //   ? 'fetching feegrant allowances...'
+            //   : !grants.length
+            //     ? 'No feegrant allowances'
                 : ''
         }
       >
         <div
           className={
-            grantsToMeLoading || !grants.length
-              ? 'cursor-not-allowed'
-              : 'cursor-pointer'
+            // grantsToMeLoading || !grants.length
+            //   ? 'cursor-not-allowed'
+            //   :
+               'cursor-pointer'
           }
           onClick={() => {
             if (!isFeegrantEnabled) {
-              if (!grantsToMeLoading && grants.length && !isMetaMask)
+              // if (!grantsToMeLoading && grants.length && !isMetaMask)
                 setGrantsDialogOpen(true);
             } else {
               disableFeegrantMode();

diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx
@@ -13,7 +13,7 @@ import {
   unsetIsLoading,
 } from '../store/features/wallet/walletSlice';
 import { RootState } from '../store/store';
-import { getAllTokensPrice, setAllNetworksInfo } from '@/store/features/common/commonSlice';
+import { setAllNetworksInfo } from '@/store/features/common/commonSlice';
 import { useAppDispatch, useAppSelector } from '@/custom-hooks/StateHooks';
 import WalletPopup from './WalletPopup';
 import CustomParticles from './Particles';
@@ -123,8 +123,6 @@ export const Landingpage = ({ children }: { children: React.ReactNode }) => {
       accountChangeListener
     );
 
-    dispatch(getAllTokensPrice());
-
     return () => {
       window.removeEventListener(
         `${walletName}_keystorechange`,
@@ -201,7 +199,7 @@ export const Landingpage = ({ children }: { children: React.ReactNode }) => {
 
             <Image
               className="ml-auto  sm:w-[600] md:w-[800] lg:w-[967]"
-              src="/landing-laptop.svg"
+              src="https://resolute.sgp1.cdn.digitaloceanspaces.com/landing-laptop.svg"
               width={967}
               height={481}
               alt="landing page image"

diff --git a/frontend/src/components/SideBar.tsx b/frontend/src/components/SideBar.tsx
@@ -19,20 +19,21 @@ import {
   TWITTER_ICON,
   TWITTER_LINK,
 } from '@/utils/constants';
-import useInitAuthz from '@/custom-hooks/useInitAuthz';
-import useInitFeegrant from '@/custom-hooks/useInitFeegrant';
-import { setAllNetworksInfo } from '@/store/features/common/commonSlice';
+// import useInitAuthz from '@/custom-hooks/useInitAuthz';
+// import useInitFeegrant from '@/custom-hooks/useInitFeegrant';
+import { getAllTokensPrice, setAllNetworksInfo } from '@/store/features/common/commonSlice';
 
 const SideBar = ({ children }: { children: React.ReactNode }) => {
   const pathName = usePathname();
   const pathParts = pathName.split('/');
   const selectedPart = getSelectedPartFromURL(pathParts).toLowerCase();
-  useInitAuthz();
-  useInitFeegrant();
+  // useInitAuthz();
+  // useInitFeegrant();
   const isAuthzMode = useAppSelector((state) => state.authz.authzModeEnabled);
   const dispatch = useAppDispatch();
   useEffect(() => {
     dispatch(setAllNetworksInfo());
+    dispatch(getAllTokensPrice());
   }, []);
   return (
     <div className="main">