feat: integrate authz with staking and overview (#1092)

* feat: added authz slice

* chore: fixed all state address mapping

* chore: review changes

* chore: fix error

* feat: integrated authz fetch logic

* chore: added chainID

* feat: integrated authz button

* feat: integrated button authz

* feat: integrated authz in governance page

* feat: integrated authz in transfers page

* chore: fix lint issues

* chore: remove console.log statements

* chore: lint fix

* chore: review changes

* feat: integrate authz in staking and overview

* chore: build fixes

* chore: build fix

frontend/src/app/(routes)/(overview)/overview-components/Asset.tsx

@@ -11,6 +11,9 @@ import { RootState } from '@/store/store';
 import { CircularProgress, Tooltip } from '@mui/material';
 import { setError } from '@/store/features/common/commonSlice';
 import { capitalize } from 'lodash';
+import useGetChainInfo from '@/custom-hooks/useGetChainInfo';
+import { DelegationsPairs } from '@/types/distribution';
+import useAuthzStakingExecHelper from '@/custom-hooks/useAuthzStakingExecHelper';
 
 const Asset = ({
   asset,
@@ -27,11 +30,38 @@ const Asset = ({
     (state: RootState) =>
       state.staking.chains[asset.chainID]?.reStakeTxStatus || TxStatus.IDLE
   );
+  const authzRewards = useAppSelector(
+    (state) => state.distribution.authzChains
+  );
+  const isAuthzMode = useAppSelector((state) => state.authz.authzModeEnabled);
+  const authzAddress = useAppSelector((state) => state.authz.authzAddress);
+  const { getChainInfo } = useGetChainInfo();
 
   const dispatch = useAppDispatch();
-  const { txWithdrawAllRewardsInputs, txRestakeInputs } = useGetTxInputs();
+  const { txWithdrawAllRewardsInputs, txRestakeInputs, txAuthzRestakeMsgs } =
+    useGetTxInputs();
+  const { txAuthzClaim, txAuthzRestake } = useAuthzStakingExecHelper();
 
   const claim = (chainID: string) => {
+    if (isAuthzMode) {
+      const { address } = getChainInfo(chainID);
+      const pairs: DelegationsPairs[] = (
+        authzRewards[chainID]?.delegatorRewards?.list || []
+      ).map((reward) => {
+        const pair = {
+          delegator: authzAddress,
+          validator: reward.validator_address,
+        };
+        return pair;
+      });
+      txAuthzClaim({
+        grantee: address,
+        granter: authzAddress,
+        pairs: pairs,
+        chainID: chainID,
+      });
+      return;
+    }
     if (txClaimStatus === TxStatus.PENDING) {
       dispatch(
         setError({
@@ -58,6 +88,17 @@ const Asset = ({
   };
 
   const claimAndStake = (chainID: string) => {
+    if (isAuthzMode) {
+      const { address } = getChainInfo(chainID);
+      const msgs = txAuthzRestakeMsgs(chainID);
+      txAuthzRestake({
+        grantee: address,
+        granter: authzAddress,
+        msgs: msgs,
+        chainID: chainID,
+      });
+      return;
+    }
     if (txRestakeStatus === TxStatus.PENDING) {
       dispatch(
         setError({

frontend/src/app/(routes)/(overview)/overview-components/AssetsTable.tsx

@@ -6,23 +6,37 @@ import { CircularProgress } from '@mui/material';
 import NoAssets from '@/components/illustrations/NoAssets';
 
 const AssetsTable = ({ chainIDs }: { chainIDs: string[] }) => {
-  const [sortedAssets] = useSortedAssets(chainIDs, {
+  const isAuthzMode = useAppSelector((state) => state.authz.authzModeEnabled);
+  const [sortedAssets, authzSortedAssets] = useSortedAssets(chainIDs, {
     showAvailable: true,
     showRewards: true,
     showStaked: true,
   });
+
+  const assets = isAuthzMode ? authzSortedAssets : sortedAssets;
+
   const balancesLoading = useAppSelector(
     (state) => state.bank.balancesLoading > 0
   );
   const delegationsLoading = useAppSelector(
     (state) => state.staking.delegationsLoading > 0
   );
+  const authzBalanceLoading = useAppSelector(
+    (state) => state.bank.authz.balancesLoading > 0
+  );
+  const authzDelegationsLoading = useAppSelector(
+    (state) => state.staking.authz.delegationsLoading > 0
+  );
+
+  const loading = !isAuthzMode && (balancesLoading || delegationsLoading);
+  const authzLoading =
+    isAuthzMode && (authzBalanceLoading || authzDelegationsLoading);
 
   return (
     <div className="flex flex-col flex-1 overflow-y-scroll">
       <div className="assets-table bg-[#1a1a1b] px-8 py-8">
         <div className="flex flex-col flex-1">
-          {sortedAssets.length ? (
+          {assets.length ? (
             <div className="flex-1">
               <table className="w-full text-sm leading-normal">
                 <thead className="border-b-[0.5px] border-[#B0B0B033] relative">
@@ -60,7 +74,7 @@ const AssetsTable = ({ chainIDs }: { chainIDs: string[] }) => {
                   </tr>
                 </thead>
                 <tbody className="flex-1">
-                  {sortedAssets.map((asset) => (
+                  {assets.map((asset) => (
                     <Asset
                       asset={asset}
                       key={asset.chainID + asset.denom}
@@ -72,7 +86,7 @@ const AssetsTable = ({ chainIDs }: { chainIDs: string[] }) => {
             </div>
           ) : (
             <div className="w-full flex flex-col flex-1 items-center justify-center text-white">
-              {balancesLoading || delegationsLoading ? (
+              {loading || authzLoading ? (
                 <CircularProgress size={32} />
               ) : (
                 <NoAssets />

frontend/src/app/(routes)/(overview)/overview-components/History.tsx

@@ -8,6 +8,7 @@ import { useAppSelector } from '@/custom-hooks/StateHooks';
 import { RootState } from '@/store/store';
 import { useRouter } from 'next/navigation';
 import NoTransactions from '@/components/illustrations/NoTransactions';
+import useGetAuthzAssetsAmount from '../../../../custom-hooks/useGetAuthzAssetsAmount';
 
 const History = ({ chainIDs }: { chainIDs: string[] }) => {
   return (
@@ -32,6 +33,7 @@ export default History;
 const Balance = ({ chainIDs }: { chainIDs: string[] }) => {
   const router = useRouter();
   const nameToChainIDs = useAppSelector((state) => state.wallet.nameToChainIDs);
+  const isAuthzMode = useAppSelector((state) => state.authz.authzModeEnabled);
   const getPath = (chainIDs: string[], module: string) => {
     if (chainIDs.length !== 1) {
       return '/' + module;
@@ -42,7 +44,14 @@ const Balance = ({ chainIDs }: { chainIDs: string[] }) => {
     });
     return '/' + module + '/' + curChainName;
   };
-  const [staked, available, rewards] = useGetAssetsAmount(chainIDs);
+
+  const [myStaked, myAvailable, myRewards] = useGetAssetsAmount(chainIDs);
+  const [authzStaked, authzAvailable, authzRewards] =
+    useGetAuthzAssetsAmount(chainIDs);
+  const staked = isAuthzMode ? authzStaked : myStaked;
+  const available = isAuthzMode ? authzAvailable : myAvailable;
+  const rewards = isAuthzMode ? authzRewards : myRewards;
+
   return (
     <div>
       <div className="text-white text-center mt-10 mb-6">

frontend/src/app/(routes)/(overview)/overview-components/OverviewPage.tsx

@@ -17,11 +17,15 @@ import AssetsTable from './AssetsTable';
 import AccountSummery from './AccountSummary';
 import { getAccountInfo } from '@/store/features/auth/authSlice';
 import { getDelegatorTotalRewards } from '@/store/features/distribution/distributionSlice';
+import useInitAuthzForOverview from '@/custom-hooks/useInitAuthzForOverview';
+import AuthzToast from '@/components/AuthzToast';
 
 const OverviewPage = ({ chainIDs }: { chainIDs: string[] }) => {
   const dispatch = useAppDispatch();
   const networks = useAppSelector((state: RootState) => state.wallet.networks);
+  const isAuthzMode = useAppSelector((state) => state.authz.authzModeEnabled);
 
+  useInitAuthzForOverview(chainIDs);
   useEffect(() => {
     chainIDs.forEach((chainID) => {
       const allChainInfo = networks[chainID];
@@ -66,8 +70,17 @@ const OverviewPage = ({ chainIDs }: { chainIDs: string[] }) => {
     <div className="w-full flex justify-between">
       <div className="flex flex-col w-full px-10 py-6 space-y-6 min-h-screen max-h-screen">
         <TopNav />
+        {isAuthzMode && (
+          <div>
+            <div className="h-4"></div>
+            <AuthzToast chainIDs={chainIDs} margins="" />
+            <div className="h-4"></div>
+          </div>
+        )}
         <WalletSummery chainIDs={chainIDs} />
-        {chainIDs.length === 1 && <AccountSummery chainID={chainIDs[0]} />}
+        {!isAuthzMode && chainIDs.length === 1 && (
+          <AccountSummery chainID={chainIDs[0]} />
+        )}
         <PageAd />
         <div className="flex items-center min-h-[36px] h-8">
           <h2 className="text-xl not-italic font-normal leading-[normal]">

frontend/src/app/(routes)/(overview)/overview-components/Profile.tsx

@@ -13,10 +13,12 @@ import { resetState as bankReset } from '@/store/features/bank/bankSlice';
 import { resetState as rewardsReset } from '@/store/features/distribution/distributionSlice';
 import { resetCompleteState as stakingReset } from '@/store/features/staking/stakeSlice';
 import { resetState as authzReset } from '@/store/features/authz/authzSlice';
+import useAuthzGrants from '@/custom-hooks/useAuthzGrants';
 
 const Profile = () => {
   const profileName = useAppSelector((state) => state.wallet.name);
   const dispatch = useAppDispatch();
+  const { disableAuthzMode } = useAuthzGrants();
 
   return (
     <div className="flex items-center gap-1">
@@ -43,6 +45,7 @@ const Profile = () => {
             dispatch(rewardsReset());
             dispatch(stakingReset());
             dispatch(authzReset());
+            disableAuthzMode();
             logout();
           }}
           className="cursor-pointer"

frontend/src/app/(routes)/(overview)/overview-components/WalletSummery.tsx

@@ -1,12 +1,20 @@
+import { useAppSelector } from '@/custom-hooks/StateHooks';
 import useGetAssetsAmount from '@/custom-hooks/useGetAssetsAmount';
 import { formatDollarAmount } from '@/utils/util';
 import Image from 'next/image';
 import React from 'react';
+import useGetAuthzAssetsAmount from '../../../../custom-hooks/useGetAuthzAssetsAmount';
 type AssetSummary = { icon: string; alt: string; type: string; amount: string };
 
 const WalletSummery = ({ chainIDs }: { chainIDs: string[] }) => {
-  const [stakedAmount, availableAmount, rewardsAmount] =
-    useGetAssetsAmount(chainIDs);
+  const isAuthzMode = useAppSelector((state) => state.authz.authzModeEnabled);
+  const [myStaked, myAvailable, myRewards] = useGetAssetsAmount(chainIDs);
+  const [authzStaked, authzAvailable, authzRewards] =
+    useGetAuthzAssetsAmount(chainIDs);
+  const stakedAmount = isAuthzMode ? authzStaked : myStaked;
+  const availableAmount = isAuthzMode ? authzAvailable : myAvailable;
+  const rewardsAmount = isAuthzMode ? authzRewards : myRewards;
+
   const available = formatDollarAmount(availableAmount);
   const staked = formatDollarAmount(stakedAmount);
   const rewards = formatDollarAmount(rewardsAmount);

frontend/src/app/(routes)/governance/DepositPopup.tsx

@@ -74,7 +74,18 @@ const DepositPopup = ({
   const handleDeposit = (data: { amount: number }) => {
     const { aminoConfig, prefix, rest, feeAmount, address, rpc, minimalDenom } =
       getVoteTxInputs(chainID);
-    console.log(data);
+
+    if (isAuthzMode) {
+      txAuthzDeposit({
+        grantee: address,
+        proposalId: proposalId,
+        amount: Number(data.amount) * 10 ** currency.coinDecimals,
+        granter: authzGranter,
+        chainID: chainID,
+        metaData: '',
+      });
+      return;
+    }
 
     if (isAuthzMode) {
       txAuthzDeposit({

frontend/src/app/(routes)/staking/components/ChainDelegations.tsx

@@ -23,6 +23,7 @@ import DialogRedelegate from './DialogRedelegate';
 import useGetChainInfo from '@/custom-hooks/useGetChainInfo';
 import { parseDenomAmount } from '@/utils/util';
 import { TxStatus } from '@/types/enums';
+import useAuthzStakingExecHelper from '@/custom-hooks/useAuthzStakingExecHelper';
 
 const ChainDelegations = ({
   chainID,
@@ -38,6 +39,8 @@ const ChainDelegations = ({
   const router = useRouter();
   const dispatch = useAppDispatch();
   const { getChainInfo } = useGetChainInfo();
+  const { txAuthzDelegate, txAuthzReDelegate, txAuthzUnDelegate } =
+    useAuthzStakingExecHelper();
 
   const networks = useAppSelector((state: RootState) => state.wallet.networks);
   const networkLogo = networks[chainID]?.network.logos.menu;
@@ -55,6 +58,8 @@ const ChainDelegations = ({
   const stakingParams = useAppSelector(
     (state: RootState) => state.staking.chains[chainID]?.params
   );
+  const authzAddress = useAppSelector((state) => state.authz.authzAddress);
+  const isAuthzMode = useAppSelector((state) => state.authz.authzModeEnabled);
 
   const [availableBalance, setAvailableBalance] = useState(0);
   const [delegateOpen, setDelegateOpen] = useState(false);
@@ -108,9 +113,21 @@ const ChainDelegations = ({
   );
 
   const onDelegateTx = (data: DelegateTxInputs) => {
+    const basicChainInfo = getChainInfo(chainID);
+    if (isAuthzMode) {
+      txAuthzDelegate({
+        grantee: address,
+        granter: authzAddress,
+        validator: data.validator,
+        amount: data.amount * 10 ** currency.coinDecimals,
+        denom: currency.coinMinimalDenom,
+        chainID: basicChainInfo.chainID,
+      });
+      return;
+    }
     dispatch(
       txDelegate({
-        basicChainInfo: getChainInfo(chainID),
+        basicChainInfo: basicChainInfo,
         delegator: address,
         validator: data.validator,
         amount: data.amount * 10 ** currency.coinDecimals,
@@ -122,6 +139,18 @@ const ChainDelegations = ({
   };
 
   const onUndelegateTx = (data: UndelegateTxInputs) => {
+    const basicChainInfo = getChainInfo(chainID);
+    if (isAuthzMode) {
+      txAuthzUnDelegate({
+        grantee: address,
+        granter: authzAddress,
+        validator: data.validator,
+        amount: data.amount * 10 ** currency.coinDecimals,
+        denom: currency.coinMinimalDenom,
+        chainID: basicChainInfo.chainID,
+      });
+      return;
+    }
     dispatch(
       txUnDelegate({
         basicChainInfo: getChainInfo(chainID),
@@ -136,6 +165,19 @@ const ChainDelegations = ({
   };
 
   const onRedelegateTx = (data: RedelegateTxInputs) => {
+    const basicChainInfo = getChainInfo(chainID);
+    if (isAuthzMode) {
+      txAuthzReDelegate({
+        grantee: address,
+        granter: authzAddress,
+        srcValidator: data.src,
+        validator: data.dest,
+        amount: data.amount * 10 ** currency.coinDecimals,
+        denom: currency.coinMinimalDenom,
+        chainID: basicChainInfo.chainID,
+      });
+      return;
+    }
     dispatch(
       txReDelegate({
         basicChainInfo: getChainInfo(chainID),