show counterparty pk in activity details

components/account/LiquidationDetails.tsx

@@ -1,5 +1,7 @@
 import { EXPLORERS } from '@components/settings/PreferredExplorerSettings'
 import FormatNumericValue from '@components/shared/FormatNumericValue'
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
+import { PublicKey } from '@solana/web3.js'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/image'
@@ -10,6 +12,7 @@ import {
   SpotOrPerpLiquidationItem,
 } from 'types'
 import { PREFERRED_EXPLORER_KEY } from 'utils/constants'
+import { abbreviateAddress } from 'utils/formatting'
 
 const LiquidationDetails = ({
   activity,
@@ -199,12 +202,17 @@ const LiquidationDetails = ({
           {t('activity:counterparty')}
         </p>
         <a
-          className="text-sm"
+          className="flex items-center text-sm"
           href={`/?address=${activity.activity_details.counterparty}`}
           target="_blank"
           rel="noopener noreferrer"
         >
-          {t('activity:view-account')}
+          <span className="mr-1.5">
+            {abbreviateAddress(
+              new PublicKey(activity.activity_details.counterparty)
+            )}
+          </span>
+          <ArrowTopRightOnSquareIcon className="h-3 w-3" />
         </a>
       </div>
       <div className="col-span-1">

components/account/PerpTradeDetails.tsx

@@ -2,12 +2,15 @@ import { EXPLORERS } from '@components/settings/PreferredExplorerSettings'
 import FormatNumericValue from '@components/shared/FormatNumericValue'
 import Tooltip from '@components/shared/Tooltip'
 import PerpSideBadge from '@components/trade/PerpSideBadge'
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
+import { PublicKey } from '@solana/web3.js'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import useMangoAccount from 'hooks/useMangoAccount'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/image'
 import { PerpTradeActivity } from 'types'
 import { PREFERRED_EXPLORER_KEY } from 'utils/constants'
+import { abbreviateAddress } from 'utils/formatting'
 import { getDecimalCount } from 'utils/numbers'
 import { formatFee } from './ActivityFeedTable'
 
@@ -40,6 +43,8 @@ const PerpTradeDetails = ({ activity }: { activity: PerpTradeActivity }) => {
 
   const totalPrice = (notional + fee) / quantity
 
+  const counterpartyPk = isTaker ? maker : taker
+
   return (
     <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
       <div className="col-span-1">
@@ -100,12 +105,15 @@ const PerpTradeDetails = ({ activity }: { activity: PerpTradeActivity }) => {
           {t('activity:counterparty')}
         </p>
         <a
-          className="text-sm"
-          href={`/?address=${isTaker ? maker : taker}`}
+          className="flex items-center text-sm"
+          href={`/?address=${counterpartyPk}`}
           target="_blank"
           rel="noopener noreferrer"
         >
-          {t('activity:view-account')}
+          <span className="mr-1.5">
+            {abbreviateAddress(new PublicKey(counterpartyPk))}
+          </span>
+          <ArrowTopRightOnSquareIcon className="h-3 w-3" />
         </a>
       </div>
       <div className="col-span-1">