feat: integrated authz in governance and transfers (backport #1085)

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

@@ -9,6 +9,11 @@ import {
  resetError,
  resetTxAndHash,
 } from '@/store/features/common/commonSlice';
+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';
+
 const Profile = () => {
  const profileName = useAppSelector((state) => state.wallet.name);
  const dispatch = useAppDispatch();
@@ -34,6 +39,10 @@ const Profile = () => {
  dispatch(resetWallet());
  dispatch(resetError());
  dispatch(resetTxAndHash());
+ dispatch(bankReset());
+ dispatch(rewardsReset());
+ dispatch(stakingReset());
+ dispatch(authzReset());
  logout();
  }}
  className="cursor-pointer"

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

@@ -3,7 +3,7 @@ import React from 'react';
 
 const TopNav = () => {
  return (
- <div className="flex py-2 justify-between w-full items-center">
+ <div className="flex justify-between w-full items-center">
  <h2 className="text-xl not-italic font-normal leading-[normal]">
  Overview
  </h2>

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

@@ -17,6 +17,7 @@ import { txDeposit } from '@/store/features/gov/govSlice';
 import { Controller, useForm } from 'react-hook-form';
 import { dialogBoxPaperPropStyles } from '@/utils/commonStyles';
 import { TxStatus } from '@/types/enums';
+import useAuthzExecHelper from '@/custom-hooks/useAuthzExecHelper';
 
 const DepositPopup = ({
  chainID,
@@ -41,13 +42,20 @@ const DepositPopup = ({
  const networks = useAppSelector((state: RootState) => state.wallet.networks);
  const allChainInfo = networks[chainID];
 
+ const isAuthzMode = useAppSelector((state) => state.authz.authzModeEnabled);
+ const authzGranter = useAppSelector((state) => state.authz.authzAddress);
+
  const { getVoteTxInputs } = useGetTxInputs();
+ const { txAuthzDeposit } = useAuthzExecHelper();
  const dispatch = useAppDispatch();
 
  const currency = allChainInfo.network.config.currencies[0];
  const loading = useAppSelector(
  (state: RootState) => state.gov.chains?.[chainID]?.tx?.status
  );
+ const authzLoading = useAppSelector(
+ (state) => state.authz.chains?.[chainID]?.tx?.status || TxStatus.INIT
+ );
 
  const {
  handleSubmit,
@@ -68,6 +76,18 @@ const DepositPopup = ({
  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;
+ }
+
  dispatch(
  txDeposit({
  depositer: address,
@@ -188,9 +208,13 @@ const DepositPopup = ({
  <div className="mt-6">
  <button
  className="deposit-popup-btn proposal-text-medium"
- disabled={loading === TxStatus.PENDING}
+ disabled={
+ (!isAuthzMode && loading === TxStatus.PENDING) ||
+ (isAuthzMode && authzLoading === TxStatus.PENDING)
+ }
  >
- {loading === TxStatus.PENDING ? (
+ {(!isAuthzMode && loading === TxStatus.PENDING) ||
+ (isAuthzMode && authzLoading === TxStatus.PENDING) ? (
  <CircularProgress size={20} sx={{ color: 'white' }} />
  ) : (
  'Deposit'

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

@@ -59,6 +59,7 @@ const GovPage = ({ chainIDs }: { chainIDs: string[] }) => {
  <Proposals
  handleChangeProposalState={handleChangeProposalState}
  proposalStatus={proposalState}
+ chainIDs={chainIDs}
  />
  <AllProposals
  handleOpenOverview={handleOpenOverview}

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

@@ -30,6 +30,8 @@ import { setSelectedNetwork } from '@/store/features/common/commonSlice';
 import ProposalProjection from './ProposalProjection';
 import TopNav from '@/components/TopNav';
 import { useRemark } from 'react-remark';
+import AuthzToast from '@/components/AuthzToast';
+import AuthzButton from '@/components/AuthzButton';
 
 const emptyTallyResult = {
  yes: '',
@@ -228,8 +230,11 @@ const ProposalOverviewVote = ({
  <div className="flex gap-10 h-screen">
  <div className="flex-1 flex flex-col space-y-4">
  <div className="flex space-y-10 flex-col">
- <div className="proposal-text-big">Governance</div>
-
+ <div className="flex justify-between items-center">
+ <div className="proposal-text-big">Governance</div>
+ <AuthzButton />
+ </div>
+ <AuthzToast chainIDs={[chainID]} margins="" />
  <div className="flex space-x-1">
  <Link href="/governance">
  <Image

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

@@ -3,23 +3,27 @@
 import React from 'react';
 import './style.css';
 import TopNav from '@/components/TopNav';
+import AuthzToast from '@/components/AuthzToast';
 
 type ProposalStatusUpdate = (status: string) => void;
 
 const Proposals = ({
  handleChangeProposalState,
  proposalStatus,
+ chainIDs,
 }: {
  handleChangeProposalState: ProposalStatusUpdate;
  proposalStatus: string;
+ chainIDs: string[];
 }) => {
  return (
  <div className="main-page">
  <div className="flex justify-between items-center w-full">
  <div className="proposal-text-big">Governance</div>
 
- <TopNav />
+ <TopNav showAuthzButton={true} />
  </div>
+ <AuthzToast chainIDs={chainIDs} margins='w-full'/>
 
  <div className="proposals-head">
  <div className="text-[20px]">Proposals</div>

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

@@ -10,6 +10,7 @@ import useGetChainInfo from '@/custom-hooks/useGetChainInfo';
 import { dialogBoxPaperPropStyles } from '@/utils/commonStyles';
 import { RootState } from '@/store/store';
 import { TxStatus } from '@/types/enums';
+import useAuthzExecHelper from '@/custom-hooks/useAuthzExecHelper';
 
 interface VoteOptionNumber {
  [key: string]: number;
@@ -40,6 +41,9 @@ const VotePopup = ({
  networkLogo: string;
 }) => {
  const [voteOption, setVoteOption] = useState<string>('');
+ const isAuthzMode = useAppSelector((state) => state.authz.authzModeEnabled);
+ const authzGranter = useAppSelector((state) => state.authz.authzAddress);
+ const { txAuthzVote } = useAuthzExecHelper();
 
  const handleVoteChange = (option: string) => {
  setVoteOption(option);
@@ -55,13 +59,29 @@ const VotePopup = ({
  (state: RootState) => state.gov.chains?.[chainID]?.tx?.status
  );
 
+ const authzLoading = useAppSelector(
+ (state) => state.authz.chains?.[chainID]?.tx?.status || TxStatus.INIT
+ );
+
  const dispatch = useAppDispatch();
 
  const handleVote = () => {
  const { address, aminoConfig, feeAmount, prefix, rest, rpc } =
  getChainInfo(chainID);
  const { minimalDenom } = getDenomInfo(chainID);
 
+ if (isAuthzMode) {
+ txAuthzVote({
+ grantee: address,
+ proposalId,
+ option: voteOptionNumber[voteOption],
+ granter: authzGranter,
+ chainID,
+ metaData: '',
+ });
+ return;
+ }
+
  dispatch(
  txVote({
  voter: address,
@@ -191,9 +211,13 @@ const VotePopup = ({
  <button
  onClick={handleVote}
  className="vote-popup-btn proposal-text-medium"
- disabled={loading === TxStatus.PENDING}
+ disabled={
+ (!isAuthzMode && loading === TxStatus.PENDING) ||
+ (isAuthzMode && authzLoading === TxStatus.PENDING)
+ }
  >
- {loading === TxStatus.PENDING ? (
+ {(!isAuthzMode && loading === TxStatus.PENDING) ||
+ (isAuthzMode && authzLoading === TxStatus.PENDING) ? (
  <CircularProgress size={20} sx={{ color: 'white' }} />
  ) : (
  'Vote'

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

@@ -21,6 +21,7 @@ import {
  NO_MESSAGES_ILLUSTRATION,
 } from '@/utils/constants';
 import { CircularProgress } from '@mui/material';
+import MainTopNav from '@/components/MainTopNav';
 
 const StakingOverview = () => {
  const dispatch = useAppDispatch();
@@ -96,7 +97,9 @@ const StakingOverview = () => {
 
  return (
  <div className="staking-main">
- <h2 className="txt-lg font-medium mb-6">Staking</h2>
+ <div className="mb-6">
+ <MainTopNav title="Staking" />
+ </div>
  <div className="overview-grid">
  {chainIDs.map((chainID) => {
  const delegations = stakingData[chainID]?.delegations.delegations;

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

@@ -25,6 +25,7 @@ import {
 import Image from 'next/image';
 import { CircularProgress } from '@mui/material';
 import { TxStatus } from '@/types/enums';
+import MainTopNav from '@/components/MainTopNav';
 
 const StakingPage = ({
  chainName,
@@ -135,7 +136,9 @@ const StakingPage = ({
  return (
  <div className="flex justify-between">
  <div className="staking-main">
- <h2 className="txt-lg font-medium mb-6">Staking</h2>
+ <div className="mb-6">
+ <MainTopNav title="Staking" />
+ </div>
  <div className="overview-grid">
  <ChainDelegations
  chainID={chainID}

frontend/src/app/(routes)/transfers/SendPage.tsx

@@ -18,6 +18,7 @@ import { setError } from '@/store/features/common/commonSlice';
 import NoAssets from '@/components/illustrations/NoAssets';
 import { capitalizeFirstLetter } from '@/utils/util';
 import useAssetsCardNumber from '@/custom-hooks/useAssetsCardNumber';
+import useAuthzExecHelper from '@/custom-hooks/useAuthzExecHelper';
 
 const SendPage = ({ sortedAssets }: { sortedAssets: ParsedAsset[] }) => {
  const [selectedAsset, setSelectedAsset] = useState<ParsedAsset | undefined>();
@@ -37,6 +38,12 @@ const SendPage = ({ sortedAssets }: { sortedAssets: ParsedAsset[] }) => {
  const feeAmount = selectedAsset
  ? getChainInfo(selectedAsset.chainID).feeAmount
  : 0;
+ const isAuthzMode = useAppSelector((state) => state.authz.authzModeEnabled);
+ const authzAddress = useAppSelector((state) => state.authz.authzAddress);
+ const { txAuthzSend } = useAuthzExecHelper();
+ const authzLoading = useAppSelector(
+ (state) => state.authz.chains?.[selectedAsset?.chainID || '']?.tx?.status || TxStatus.INIT
+ );
 
  const amountRules = {
  ...sendProps.amount,
@@ -168,6 +175,22 @@ const SendPage = ({ sortedAssets }: { sortedAssets: ParsedAsset[] }) => {
  selectedAsset.denom,
  selectedAsset.decimals
  );
+<<<<<<< HEAD
+=======
+ if (isAuthzMode) {
+ txAuthzSend({
+ granter: authzAddress,
+ grantee: txInputs.from,
+ recipient: txInputs.to,
+ denom: txInputs.assetDenom,
+ amount: txInputs.amount,
+ chainID: txInputs.basicChainInfo.chainID,
+ memo: txInputs.memo,
+ });
+ return;
+ }
+ txInputs.onTxSuccessCallBank = clearForm;
+>>>>>>> 71ed992 (feat: integrated authz in governance and transfers (#1085))
  dispatch(txBankSend(txInputs));
  } else {
  const destChainID = getChainIDFromAddress(data.address);
@@ -182,6 +205,16 @@ const SendPage = ({ sortedAssets }: { sortedAssets: ParsedAsset[] }) => {
  return;
  }
 
+ if (isAuthzMode) {
+ dispatch(
+ setError({
+ type: 'error',
+ message: 'The IBC Transactions are not yet supported on Authz mode',
+ })
+ );
+ return;
+ }
+
  const txInputs = txTransferInputs(
  selectedAsset.chainID,
  destChainID,
@@ -314,7 +347,7 @@ const SendPage = ({ sortedAssets }: { sortedAssets: ParsedAsset[] }) => {
  </div>
  </div>
  </div>
- {isIBC && (
+ {!isAuthzMode && isIBC && (
  <div className="h-[46px] rounded-2xl bg-[#32226a] mb-4 px-6 py-4 flex">
  <div className="flex flex-1 items-center gap-2">
  <Image
@@ -332,8 +365,8 @@ const SendPage = ({ sortedAssets }: { sortedAssets: ParsedAsset[] }) => {
  )}
  <CustomSubmitButton
  pendingStatus={
- sendTxStatus === TxStatus.PENDING ||
- ibcTxStatus === TxStatus.PENDING
+ (!isAuthzMode && (sendTxStatus === TxStatus.PENDING ||
+ ibcTxStatus === TxStatus.PENDING) || (isAuthzMode && authzLoading === TxStatus.PENDING))
  }
  buttonStyle="primary-custom-btn w-[144px]"
  circularProgressSize={24}