feat: enhance AddressLink component with optional prefix prop and upd…

…ate usage in StakingContractSection
valory-xyz · Dec 20, 2024 · bdf8156 · bdf8156
1 parent 8c4059b
commit bdf8156
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 21 deletions.
diff --git a/frontend/components/AddressLink.tsx b/frontend/components/AddressLink.tsx
@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 import { MiddlewareChain } from '@/client';
 import { UNICODE_SYMBOLS } from '@/constants/symbols';
 import { EXPLORER_URL_BY_MIDDLEWARE_CHAIN } from '@/constants/urls';
@@ -7,12 +9,14 @@ import { truncateAddress } from '@/utils/truncate';
 type AddressLinkProps = {
   address: Address;
   middlewareChain: MiddlewareChain;
+  prefix?: ReactNode;
   hideLinkArrow?: boolean;
 };
 
 export const AddressLink = ({
   address,
   hideLinkArrow = false,
+  prefix,
   middlewareChain,
 }: AddressLinkProps) => {
   if (!address) return null;
@@ -25,6 +29,13 @@ export const AddressLink = ({
     >
       {truncateAddress(address)}
 
+      {prefix ? (
+        <>
+          &nbsp;
+          {prefix}
+        </>
+      ) : null}
+
       {hideLinkArrow ? null : (
         <>
           &nbsp;

diff --git a/frontend/components/ManageStakingPage/StakingContractSection/index.tsx b/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 && (

diff --git a/frontend/config/agents.ts b/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,

diff --git a/frontend/constants/urls.ts b/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],
-    ),
-  );