feat: last transaction

frontend/components/MainPage/header/AgentButton/AgentRunningButton.tsx

@@ -34,12 +34,11 @@ export const AgentRunningButton = () => {
 
   const { selectedService, isFetched: isLoaded, setPaused } = useServices();
 
-  const { service, setDeploymentStatus } = useService({
-    serviceConfigId:
-      isLoaded && selectedService?.service_config_id
-        ? selectedService.service_config_id
-        : '',
-  });
+  const serviceConfigId =
+    isLoaded && selectedService?.service_config_id
+      ? selectedService.service_config_id
+      : '';
+  const { service, setDeploymentStatus } = useService({ serviceConfigId });
 
   const handlePause = useCallback(async () => {
     if (!service) return;
@@ -76,7 +75,8 @@ export const AgentRunningButton = () => {
             Agent is working
           </Paragraph>
         )}
-        <LastTransaction />
+
+        <LastTransaction serviceConfigId={serviceConfigId} />
       </Flex>
     </Flex>
   );

frontend/components/MainPage/header/LastTransaction.tsx

@@ -6,11 +6,12 @@ import { useInterval } from 'usehooks-ts';
 import { MiddlewareChain } from '@/client';
 import { ONE_MINUTE_INTERVAL } from '@/constants/intervals';
 import { EXPLORER_URL } from '@/constants/urls';
-import { useAddress } from '@/hooks/useAddress';
 import { usePageState } from '@/hooks/usePageState';
+import { useService } from '@/hooks/useService';
 import { useStakingProgram } from '@/hooks/useStakingProgram';
 import { getLatestTransaction } from '@/service/Ethers';
 import { TransactionInfo } from '@/types/TransactionInfo';
+import { Optional } from '@/types/Util';
 import { getTimeAgo } from '@/utils/time';
 
 const { Text } = Typography;
@@ -24,21 +25,23 @@ const Loader = styled(Skeleton.Input)`
   }
 `;
 
+type LastTransactionProps = { serviceConfigId: Optional<string> };
+
 /**
  * Displays the last transaction time and link to the transaction on explorer
  * by agent safe.
  */
-// TODO: loop over all supported chains 
-export const LastTransaction = () => {
+export const LastTransaction = ({ serviceConfigId }: LastTransactionProps) => {
   const { isPageLoadedAndOneMinutePassed } = usePageState();
-  const { multisigAddress } = useAddress();
   const { activeStakingProgramMeta } = useStakingProgram();
+  const { service } = useService({ serviceConfigId });
+  const multisigAddress =
+    service?.chain_configs[service?.home_chain_id].chain_data.multisig;
+  const chainId = activeStakingProgramMeta?.chainId;
 
   const [isFetching, setIsFetching] = useState(true);
   const [transaction, setTransaction] = useState<TransactionInfo | null>(null);
 
-  const chainId = activeStakingProgramMeta?.chainId;
-
   const fetchTransaction = useCallback(async () => {
     if (!multisigAddress) return;
     if (!chainId) return;