Merge pull request #622 from valory-xyz/mohan/fix-todo

fix: Few todos and bugs

frontend/components/AddressLink.tsx

@@ -1,18 +1,22 @@
+import { ReactNode } from 'react';
+
 import { MiddlewareChain } from '@/client';
 import { UNICODE_SYMBOLS } from '@/constants/symbols';
 import { EXPLORER_URL_BY_MIDDLEWARE_CHAIN } from '@/constants/urls';
 import { Address } from '@/types/Address';
 import { truncateAddress } from '@/utils/truncate';
 
 type AddressLinkProps = {
-  address?: Address;
-  hideLinkArrow?: boolean;
+  address: Address;
   middlewareChain: MiddlewareChain;
+  prefix?: ReactNode;
+  hideLinkArrow?: boolean;
 };
 
 export const AddressLink = ({
   address,
   hideLinkArrow = false,
+  prefix,
   middlewareChain,
 }: AddressLinkProps) => {
   if (!address) return null;
@@ -23,7 +27,14 @@ export const AddressLink = ({
       target="_blank"
       href={`${EXPLORER_URL_BY_MIDDLEWARE_CHAIN[middlewareChain]}/address/${address}`}
     >
-      {truncateAddress(address)}
+      {prefix ? (
+        <>
+          &nbsp;
+          {prefix}
+        </>
+      ) : (
+        truncateAddress(address)
+      )}
 
       {hideLinkArrow ? null : (
         <>

frontend/components/MainPage/modals/MigrationModal.tsx

@@ -1,18 +1,21 @@
 import { Button, Flex, Modal, Typography } from 'antd';
 import Image from 'next/image';
 
-import { UNICODE_SYMBOLS } from '@/constants/symbols';
+import { AddressLink } from '@/components/AddressLink';
 import { MODAL_WIDTH } from '@/constants/width';
+import { useServices } from '@/hooks/useServices';
 import { useStakingProgram } from '@/hooks/useStakingProgram';
 
-const { Title, Text, Link } = Typography;
+const { Title, Text } = Typography;
 
 type MigrationModalProps = { open: boolean; onClose: () => void };
 export const MigrationSuccessModal = ({
   open,
   onClose,
 }: MigrationModalProps) => {
-  const { activeStakingProgramMeta } = useStakingProgram();
+  const { selectedAgentConfig } = useServices();
+  const { activeStakingProgramMeta, activeStakingProgramAddress } =
+    useStakingProgram();
 
   // Close modal if no active staking program, migration doesn't apply to non-stakers
   if (!activeStakingProgramMeta) {
@@ -39,7 +42,6 @@ export const MigrationSuccessModal = ({
       ]}
     >
       <Flex gap={8} vertical>
-        {/* Robot head */}
         <Flex align="center" justify="center">
           <Image
             src="/splash-robot-head.png"
@@ -52,10 +54,13 @@ export const MigrationSuccessModal = ({
         <Text>
           Your agent is now staked on {activeStakingProgramMeta.name}.
         </Text>
-        {/* TODO: Add relevant block explorer domain */}
-        <Link href="#">
-          View full contract details {UNICODE_SYMBOLS.EXTERNAL_LINK}
-        </Link>
+        {activeStakingProgramAddress && (
+          <AddressLink
+            address={activeStakingProgramAddress}
+            middlewareChain={selectedAgentConfig.middlewareHomeChainId}
+            prefix="View full contract details"
+          />
+        )}
       </Flex>
     </Modal>
   );

frontend/components/ManageStakingPage/StakingContractSection/CountdownUntilMigration.tsx

@@ -8,6 +8,7 @@ import {
   ServiceStakingDetails,
   StakingContractDetails,
 } from '@/types/Autonolas';
+import { formatCountdownDisplay } from '@/utils/time';
 
 const { Text } = Typography;
 
@@ -50,7 +51,7 @@ export const CountdownUntilMigration = ({
 
   const countdownDisplay = isNil(secondsUntilReady)
     ? 'Loading...'
-    : countdownDisplayFormat(secondsUntilReady);
+    : formatCountdownDisplay(secondsUntilReady);
 
   return (
     <Flex vertical gap={1} style={{ maxWidth: POPOVER_WIDTH_LARGE }}>
@@ -61,21 +62,3 @@ export const CountdownUntilMigration = ({
     </Flex>
   );
 };
-
-const countdownDisplayFormat = (totalSeconds: number) => {
-  const days = Math.floor(totalSeconds / (24 * 3600));
-  totalSeconds %= 24 * 3600;
-
-  const hours = Math.floor(totalSeconds / 3600);
-  totalSeconds %= 3600;
-
-  const minutes = Math.floor(totalSeconds / 60);
-  const seconds = totalSeconds % 60;
-
-  // Ensure double digits for hours, minutes, and seconds
-  const formattedHours = String(hours).padStart(2, '0');
-  const formattedMinutes = String(minutes).padStart(2, '0');
-  const formattedSeconds = String(seconds).padStart(2, '0');
-  // TODO: update this support plural and singular text
-  return `${days} days ${formattedHours} hours ${formattedMinutes} minutes ${formattedSeconds} seconds`;
-};

frontend/components/ManageStakingPage/StakingContractSection/index.tsx

@@ -1,10 +1,9 @@
 import { Flex, Tag, theme, Typography } from 'antd';
 import { useMemo } from 'react';
 
+import { AddressLink } from '@/components/AddressLink';
 import { CardSection } from '@/components/styled/CardSection';
-import { GNOSIS_STAKING_PROGRAMS_CONTRACT_ADDRESSES } from '@/config/stakingPrograms/gnosis';
-import { UNICODE_SYMBOLS } from '@/constants/symbols';
-import { EXPLORER_URL_BY_EVM_CHAIN_ID } from '@/constants/urls';
+import { STAKING_PROGRAM_ADDRESS } from '@/config/stakingPrograms';
 import { StakingProgramId } from '@/enums/StakingProgram';
 import { StakingProgramStatus } from '@/enums/StakingProgramStatus';
 import { useServices } from '@/hooks/useServices';
@@ -115,15 +114,11 @@ export const StakingContractSection = ({
       <StakingContractDetails stakingProgramId={stakingProgramId} />
 
       {evmChainId && (
-        <a
-          href={`${EXPLORER_URL_BY_EVM_CHAIN_ID[evmChainId]}/address/${
-            // TODO: make chain independent
-            GNOSIS_STAKING_PROGRAMS_CONTRACT_ADDRESSES[stakingProgramId]
-          }`}
-          target="_blank"
-        >
-          View contract details {UNICODE_SYMBOLS.EXTERNAL_LINK}
-        </a>
+        <AddressLink
+          address={STAKING_PROGRAM_ADDRESS[evmChainId][stakingProgramId]}
+          middlewareChain={selectedAgentConfig.middlewareHomeChainId}
+          prefix="View contract details"
+        />
       )}
 
       {!migrateValidation.canMigrate && (

frontend/components/SettingsPage/DebugInfoSection.tsx

@@ -84,7 +84,7 @@ const AgentStakingInfo = () => {
 };
 
 export const DebugInfoSection = () => {
-  const [isModalOpen, setIsModalOpen] = useState(true);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const showModal = useCallback(() => setIsModalOpen(true), []);
   const handleCancel = useCallback(() => setIsModalOpen(false), []);
 

frontend/components/YourWalletPage/index.tsx

@@ -56,7 +56,7 @@ const Address = () => {
           {
             left: 'Address',
             leftClassName: 'text-light',
-            right: (
+            right: masterSafeAddress && (
               <AddressLink
                 address={masterSafeAddress}
                 middlewareChain={middlewareChain}

frontend/config/agents.ts

@@ -45,7 +45,6 @@ export const AGENT_CONFIG: {
     displayName: 'Prediction agent',
     description: 'Participates in prediction markets.',
   },
-  // TODO: check optimus config
   // [AgentType.Optimus]: {
   //   name: 'Optimus',
   //   homeChainId: ChainId.Optimism,

frontend/constants/urls.ts

@@ -1,6 +1,5 @@
 import { MiddlewareChain } from '@/client';
 import { EvmChainId } from '@/enums/Chain';
-import { asEvmChainId } from '@/utils/middlewareHelpers';
 
 type Url = `http${'s' | ''}://${string}`;
 
@@ -65,10 +64,3 @@ export const SWAP_URL_BY_EVM_CHAIN: Record<number | EvmChainId, Url> = {
   // [EvmChainId.OPTIMISM]: COW_SWAP_GNOSIS_XDAI_OLAS_URL,
   [EvmChainId.Base]: SWAP_BASE_URL,
 };
-
-export const EXPLORER_URL_BY_EVM_CHAIN_ID: Record<number | EvmChainId, Url> =
-  Object.fromEntries(
-    Object.entries(EXPLORER_URL_BY_MIDDLEWARE_CHAIN).map(
-      ([middlewareChain, url]) => [asEvmChainId(middlewareChain), url],
-    ),
-  );

frontend/hooks/useRewardsHistory.ts

@@ -13,13 +13,11 @@ import { EvmChainId } from '@/enums/Chain';
 import { Address } from '@/types/Address';
 import { Nullable } from '@/types/Util';
 import { asMiddlewareChain } from '@/utils/middlewareHelpers';
+import { ONE_DAY_IN_MS } from '@/utils/time';
 
 import { useService } from './useService';
 import { useServices } from './useServices';
 
-const ONE_DAY_IN_S = 24 * 60 * 60;
-const ONE_DAY_IN_MS = ONE_DAY_IN_S * 1000;
-
 const CheckpointGraphResponseSchema = z.object({
   epoch: z.string({
     message: 'Expected epoch to be a string',

frontend/hooks/useStakingContractCountdown.ts

@@ -7,28 +7,7 @@ import {
   StakingContractDetails,
 } from '@/types/Autonolas';
 import { Maybe } from '@/types/Util';
-
-const countdownDisplayFormat = (totalSeconds: number) => {
-  const days = Math.floor(totalSeconds / (24 * 3600));
-  totalSeconds %= 24 * 3600;
-
-  const hours = Math.floor(totalSeconds / 3600);
-  totalSeconds %= 3600;
-
-  const minutes = Math.floor(totalSeconds / 60);
-  const seconds = totalSeconds % 60;
-
-  // Ensure double digits for hours, minutes, and seconds
-  const formattedHours = String(hours).padStart(2, '0');
-  const formattedMinutes = String(minutes).padStart(2, '0');
-  const formattedSeconds = String(seconds).padStart(2, '0');
-
-  const daysInWords = `${days} day${days !== 1 ? 's' : ''}`;
-  const hoursInWords = `${formattedHours} hour${hours !== 1 ? 's' : ''}`;
-  const minutesInWords = `${formattedMinutes} minute${minutes !== 1 ? 's' : ''}`;
-  const secondsInWords = `${formattedSeconds} second${seconds !== 1 ? 's' : ''}`;
-  return `${daysInWords} ${hoursInWords} ${minutesInWords} ${secondsInWords}`.trim();
-};
+import { formatCountdownDisplay } from '@/utils/time';
 
 export const useStakingContractCountdown = ({
   currentStakingContractInfo,
@@ -69,7 +48,7 @@ export const useStakingContractCountdown = ({
 
   const countdownDisplay = isNil(secondsUntilReady)
     ? 'Loading...'
-    : countdownDisplayFormat(secondsUntilReady);
+    : formatCountdownDisplay(secondsUntilReady);
 
   return countdownDisplay;
 };

frontend/utils/time.ts

@@ -1,5 +1,8 @@
 import { isNumber } from 'lodash';
 
+export const ONE_DAY_IN_S = 24 * 60 * 60;
+export const ONE_DAY_IN_MS = ONE_DAY_IN_S * 1000;
+
 export const getTimeAgo = (timestampInSeconds: number) => {
   if (!isNumber(timestampInSeconds)) return null;
 
@@ -65,3 +68,31 @@ export const formatToShortDateTime = (timeInMs?: number) => {
     timeZone: 'UTC',
   });
 };
+
+/**
+ *
+ * @param totalSeconds - total seconds to be formatted
+ * @returns formatted string in the format of 'X days X hours X minutes X seconds'
+ * @example 100000 => '1 day 3 hours 46 minutes 40 seconds'
+ */
+export const formatCountdownDisplay = (totalSeconds: number) => {
+  const days = Math.floor(totalSeconds / (24 * 3600));
+  totalSeconds %= 24 * 3600;
+
+  const hours = Math.floor(totalSeconds / 3600);
+  totalSeconds %= 3600;
+
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+
+  // Ensure double digits for hours, minutes, and seconds
+  const formattedHours = String(hours).padStart(2, '0');
+  const formattedMinutes = String(minutes).padStart(2, '0');
+  const formattedSeconds = String(seconds).padStart(2, '0');
+
+  const daysInWords = `${days} day${days !== 1 ? 's' : ''}`;
+  const hoursInWords = `${formattedHours} hour${hours !== 1 ? 's' : ''}`;
+  const minutesInWords = `${formattedMinutes} minute${minutes !== 1 ? 's' : ''}`;
+  const secondsInWords = `${formattedSeconds} second${seconds !== 1 ? 's' : ''}`;
+  return `${daysInWords} ${hoursInWords} ${minutesInWords} ${secondsInWords}`.trim();
+};