feat: current power visibility

src/payloadsExplorer/components/PayloadItemDetailsModal.tsx

@@ -1,6 +1,10 @@
 import { InitialPayload } from '@bgd-labs/aave-governance-ui-helpers';
+import {
+  selectLastTxByTypeAndPayload,
+  TransactionStatus,
+} from '@bgd-labs/frontend-web3-utils';
 import { Box } from '@mui/system';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { toHex } from 'viem';
 
 import { PayloadActions } from '../../proposals/components/proposal/PayloadActions';
@@ -10,28 +14,50 @@ import {
   seatbeltStartLink,
 } from '../../proposals/utils/formatPayloadData';
 import { useStore } from '../../store';
+import {
+  TransactionUnion,
+  TxType,
+} from '../../transactions/store/transactionsSlice';
 import { BasicModal, Link, SmallButton } from '../../ui';
 import { NetworkIcon } from '../../ui/components/NetworkIcon';
 import { texts } from '../../ui/utils/texts';
+import { selectPayloadExploreById } from '../store/payloadsExplorerSelectors';
 import { PayloadStatus } from './PayloadStatus';
 
 interface PayloadItemDetailsModalProps {
   initialPayload: InitialPayload;
+  setSelectedPayloadForExecute: ({
+    chainId,
+    payloadsController,
+    id,
+  }: InitialPayload) => void;
 }
 
 export function PayloadItemDetailsModal({
   initialPayload,
+  setSelectedPayloadForExecute,
 }: PayloadItemDetailsModalProps) {
+  const store = useStore();
   const {
     isPayloadExplorerItemDetailsModalOpen,
     setIsPayloadExplorerItemDetailsModalOpen,
-    payloadsExploreData,
-  } = useStore();
+    getPayloadsExploreDataById,
+  } = store;
 
-  const payload =
-    payloadsExploreData[initialPayload.chainId][
-      initialPayload.payloadsController
-    ][`${initialPayload.payloadsController}_${initialPayload.id}`];
+  useEffect(() => {
+    getPayloadsExploreDataById(
+      initialPayload.chainId,
+      initialPayload.payloadsController,
+      initialPayload.id,
+    );
+  }, []);
+
+  const payload = selectPayloadExploreById(
+    store,
+    initialPayload.chainId,
+    initialPayload.payloadsController,
+    initialPayload.id,
+  );
 
   if (!payload) return null;
 
@@ -50,6 +76,20 @@ export function PayloadItemDetailsModal({
     withoutProposalData: true,
   });
 
+  const tx =
+    store.activeWallet &&
+    selectLastTxByTypeAndPayload<TransactionUnion>(
+      store,
+      store.activeWallet.address,
+      TxType.executePayload,
+      {
+        proposalId: 0,
+        payloadId: payload.id,
+        chainId: payload.chainId,
+        payloadController: payload.payloadsController,
+      },
+    );
+
   return (
     <BasicModal
       isOpen={isPayloadExplorerItemDetailsModalOpen}
@@ -110,12 +150,42 @@ export function PayloadItemDetailsModal({
           textTypography="body"
         />
 
-        <Link
-          href={`${seatbeltStartLink}${payload.chainId}/${payload.payloadsController}/${payload.id}.md`}
-          inNewWindow
-          css={{ display: 'block', mt: 4 }}>
-          <SmallButton>{texts.proposals.payloadsDetails.seatbelt}</SmallButton>
-        </Link>
+        <Box>
+          <Link
+            href={`${seatbeltStartLink}${payload.chainId}/${payload.payloadsController}/${payload.id}.md`}
+            inNewWindow
+            css={{ display: 'block', mt: 4 }}>
+            <SmallButton>
+              {texts.proposals.payloadsDetails.seatbelt}
+            </SmallButton>
+          </Link>
+        </Box>
+
+        <Box>
+          {isPayloadReadyForExecution &&
+            !isFinalStatus &&
+            store.activeWallet?.isActive && (
+              <Box sx={{ mt: 4 }}>
+                <SmallButton
+                  disabled={tx?.status === TransactionStatus.Success}
+                  loading={tx?.pending}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    if (!!setSelectedPayloadForExecute) {
+                      setSelectedPayloadForExecute({
+                        chainId: payload?.chainId,
+                        payloadsController: payload?.payloadsController,
+                        id: payload?.id,
+                      });
+                    }
+                    store.setIsPayloadExplorerItemDetailsModalOpen(false);
+                    store.setExecutePayloadModalOpen(true);
+                  }}>
+                  {texts.proposals.payloadsDetails.execute}
+                </SmallButton>
+              </Box>
+            )}
+        </Box>
 
         <Box sx={{ mt: 30 }}>
           <Box sx={{ typography: 'headline', mb: 4 }}>

src/payloadsExplorer/components/PayloadsExplorerPage.tsx

@@ -93,6 +93,9 @@ export function PayloadsExplorerPage() {
       // @ts-ignore
       const params = new URLSearchParams(searchParams);
       params.set(name, value);
+      params.delete('payloadId');
+      params.delete('payloadChainId');
+      params.delete('payloadsControllerAddress');
 
       return params.toString();
     },
@@ -109,6 +112,7 @@ export function PayloadsExplorerPage() {
     isRendered,
     startDetailedPayloadsExplorerDataPolling,
     stopDetailedPayloadsExplorerDataPolling,
+    setIsPayloadExplorerItemDetailsModalOpen,
   } = useStore();
 
   const [isColumns, setIsColumns] = useState(false);
@@ -129,11 +133,42 @@ export function PayloadsExplorerPage() {
   }, []);
 
   useEffect(() => {
-    if (searchParams && !!searchParams.get('chainId')) {
-      setChainId(checkChainId(Number(searchParams?.get('chainId'))));
+    if (
+      searchParams &&
+      (!!searchParams.get('payloadChainId') || !!searchParams.get('chainId'))
+    ) {
+      setChainId(
+        checkChainId(
+          Number(
+            searchParams?.get('payloadChainId') || searchParams?.get('chainId'),
+          ),
+        ),
+      );
     }
   }, [searchParams]);
 
+  useEffect(() => {
+    if (
+      searchParams &&
+      !!searchParams.get('payloadId') &&
+      !!searchParams.get('payloadChainId') &&
+      !!searchParams.get('payloadsControllerAddress')
+    ) {
+      const payloadId = Number(searchParams.get('payloadId'));
+      const payloadChainId = Number(searchParams.get('payloadChainId'));
+      const payloadsControllerAddress = String(
+        searchParams.get('payloadsControllerAddress'),
+      ) as Hex;
+
+      setSelectedPayloadForDetailsModal({
+        chainId: payloadChainId,
+        payloadsController: payloadsControllerAddress,
+        id: payloadId,
+      });
+      setIsPayloadExplorerItemDetailsModalOpen(true);
+    }
+  }, [searchParams?.get('payloadId')]);
+
   useEffect(() => {
     setControllerAddress(
       appConfig.payloadsControllerConfig[chainId].contractAddresses[0],
@@ -379,6 +414,7 @@ export function PayloadsExplorerPage() {
       {selectedPayloadForDetailsModal && (
         <PayloadItemDetailsModal
           initialPayload={selectedPayloadForDetailsModal}
+          setSelectedPayloadForExecute={setSelectedPayloadForExecute}
         />
       )}
     </>

src/payloadsExplorer/store/payloadsExplorerSelectors.ts

@@ -0,0 +1,24 @@
+import { Hex } from 'viem';
+
+import { RootState } from '../../store';
+
+export const selectPayloadExploreById = (
+  store: RootState,
+  chainId: number,
+  address: Hex,
+  payloadId: number,
+) => {
+  if (!store.payloadsExploreData[chainId]) {
+    return;
+  } else if (!store.payloadsExploreData[chainId][address]) {
+    return;
+  } else if (
+    !store.payloadsExploreData[chainId][address][`${address}_${payloadId}`]
+  ) {
+    return;
+  } else {
+    return store.payloadsExploreData[chainId][address][
+      `${address}_${payloadId}`
+    ];
+  }
+};

src/payloadsExplorer/store/payloadsExplorerSlice.ts

@@ -23,12 +23,26 @@ export interface IPayloadsExplorerSlice {
     { activePage: number; pageCount: number; currentIds: number[] }
   >;
 
+  setPaginationDetails: (
+    chainId: number,
+    address: Hex,
+    activePage?: number,
+  ) => Promise<{
+    totalPayloadsCount: number;
+    idsForRequest: number[];
+  }>;
+
   payloadsExploreData: PayloadsData;
   getPayloadsExploreData: (
     chainId: number,
     address: Hex,
     activePage?: number,
   ) => Promise<void>;
+  getPayloadsExploreDataById: (
+    chainId: number,
+    address: Hex,
+    payloadId: number,
+  ) => Promise<void>;
 
   isPayloadExplorerItemDetailsModalOpen: boolean;
   setIsPayloadExplorerItemDetailsModalOpen: (value: boolean) => void;
@@ -82,8 +96,7 @@ export const createPayloadsExplorerSlice: StoreSlice<
     }
   },
 
-  payloadsExploreData: {},
-  getPayloadsExploreData: async (chainId, address, activePage) => {
+  setPaginationDetails: async (chainId, address, activePage) => {
     const initialCount = get().totalPayloadsCountByAddress[address];
     const totalPayloadsCount = initialCount
       ? initialCount
@@ -155,6 +168,17 @@ export const createPayloadsExplorerSlice: StoreSlice<
       }),
     );
 
+    return {
+      totalPayloadsCount,
+      idsForRequest,
+    };
+  },
+
+  payloadsExploreData: {},
+  getPayloadsExploreData: async (chainId, address, activePage) => {
+    const { totalPayloadsCount, idsForRequest } =
+      await get().setPaginationDetails(chainId, address, activePage);
+
     if (totalPayloadsCount >= 1) {
       if (!!idsForRequest.length) {
         const payloadsData: Payload[] = await get().govDataService.getPayloads(
@@ -187,6 +211,36 @@ export const createPayloadsExplorerSlice: StoreSlice<
       }
     }
   },
+  getPayloadsExploreDataById: async (chainId, address, payloadId) => {
+    await get().setPaginationDetails(chainId, address);
+
+    const payloadsData: Payload[] = await get().govDataService.getPayloads(
+      chainId,
+      address,
+      [payloadId],
+    );
+
+    const formattedPayloadsData: Record<string, Payload> = {};
+    payloadsData.forEach((payload) => {
+      if (payload) {
+        formattedPayloadsData[`${payload.payloadsController}_${payload.id}`] =
+          payload;
+      }
+    });
+
+    set((state) =>
+      produce(state, (draft) => {
+        draft.payloadsExploreData[chainId] = {
+          [address]: {
+            ...(draft.payloadsExploreData[chainId]
+              ? draft.payloadsExploreData[chainId][address]
+              : {}),
+            ...formattedPayloadsData,
+          },
+        };
+      }),
+    );
+  },
 
   isPayloadExplorerItemDetailsModalOpen: false,
   setIsPayloadExplorerItemDetailsModalOpen: (value) => {

src/transactions/components/TransactionsModalContent.tsx

@@ -33,29 +33,30 @@ export function TransactionsModalContent({
 
       <Box
         sx={(theme) => ({
-          overflowY: 'scroll',
-          height: forTest ? 191 : 440,
-          pr: 20,
+          height: forTest ? 191 : '100%',
           [theme.breakpoints.up('sm')]: {
-            height: forTest ? 128 : 440,
+            overflowY: 'scroll',
+            pr: 20,
+            height: forTest ? 128 : 510,
           },
           [theme.breakpoints.up('lg')]: {
-            height: forTest ? 139 : 440,
+            height: forTest ? 139 : 580,
           },
         })}>
         {allTransactions.map((tx, index) => (
           <TransactionInfoItem key={index} tx={tx} />
         ))}
       </Box>
 
-      <BackButton3D
-        isSmall
-        alwaysWithBorders
-        isVisibleOnMobile
-        alwaysVisible
-        onClick={onBackButtonClick}
-        wrapperCss={{ mt: 40 }}
-      />
+      <Box sx={{ mt: 40 }}>
+        <BackButton3D
+          isSmall
+          alwaysWithBorders
+          isVisibleOnMobile
+          alwaysVisible
+          onClick={onBackButtonClick}
+        />
+      </Box>
     </Box>
   );
 }