bump abacus + make addresses copyable

package.json

@@ -35,7 +35,7 @@
     "@cosmjs/encoding": "^0.31.0",
     "@cosmjs/proto-signing": "^0.31.0",
     "@cosmjs/stargate": "^0.31.0",
-    "@dydxprotocol/abacus": "^0.2.28",
+    "@dydxprotocol/abacus": "^0.2.37",
     "@cosmjs/tendermint-rpc": "^0.31.0",
     "@dydxprotocol/v4-client": "^0.29.0",
     "@ethersproject/providers": "^5.7.2",

pnpm-lock.yaml

@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
   '@0xsquid/sdk':
     specifier: ^1.7.2
@@ -27,8 +23,8 @@ dependencies:
     specifier: ^0.31.0
     version: 0.31.0
   '@dydxprotocol/abacus':
-    specifier: ^0.2.28
-    version: 0.2.28
+    specifier: ^0.2.37
+    version: 0.2.37
   '@dydxprotocol/v4-client':
     specifier: ^0.29.0
     version: 0.29.0
@@ -1143,8 +1139,8 @@ packages:
     resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==}
     dev: true
 
-  /@dydxprotocol/abacus@0.2.28:
-    resolution: {integrity: sha512-mGmhwQM8aiV/cD+d3lvW76ysoPN7uVsDyAiVcRdzGqgj+gbM0IIJDYXG14xHruOTi+gK1Aga5MUz2pdvmPDhYA==}
+  /@dydxprotocol/abacus@0.2.37:
+    resolution: {integrity: sha512-amoq9aVXo+lVTQGu2jsyy5/0bniOMEXpyJDmaAr2TpbrtQtw2WgyAP+se9Q5wt3yh0Mzdtsh7P2h090kH7/bZQ==}
     dev: false
 
   /@dydxprotocol/dydxjs@0.3.0:
@@ -8277,7 +8273,7 @@ packages:
     resolution: {integrity: sha512-WIdaQ8uW1vIbYvNnAVunkC6yxTrneJC7VQ5UUQ0kuw8b0C0A39KTIpoQHCfc8tV7o9vF4niwRhdXEdfAgQEsQQ==}
     dependencies:
       cosmos-directory-types: 0.0.6
-      node-fetch-native: 1.2.0
+      node-fetch-native: 1.4.0
     dev: false
 
   /cosmos-directory-types@0.0.6:
@@ -12462,8 +12458,8 @@ packages:
     resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
     engines: {node: '>=10.5.0'}
 
-  /node-fetch-native@1.2.0:
-    resolution: {integrity: sha512-5IAMBTl9p6PaAjYCnMv5FmqIF6GcZnawAVnzaCG0rX2aYZJ4CxEkZNtVPuTRug7fL7wyM5BQYTlAzcyMPi6oTQ==}
+  /node-fetch-native@1.4.0:
+    resolution: {integrity: sha512-F5kfEj95kX8tkDhUCYdV8dg3/8Olx/94zB8+ZNthFs6Bz31UpUi8Xh40TN3thLwXgrwXry1pEg9lJ++tLWTcqA==}
     dev: false
 
   /node-fetch@2.6.12:
@@ -15855,3 +15851,7 @@ packages:
       release-it: 15.11.0
       semver: 7.5.1
     dev: false
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false

src/views/tables/TransferHistoryTable.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import styled, { type AnyStyledComponent, css } from 'styled-components';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import type { ColumnSize } from '@react-types/table';
@@ -10,7 +11,7 @@ import { useBreakpoints, useStringGetter } from '@/hooks';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { tradeViewMixins } from '@/styles/tradeViewMixins';
 
-import { Icon } from '@/components/Icon';
+import { Icon, IconName } from '@/components/Icon';
 import { Output, OutputType } from '@/components/Output';
 import { Table, TableCell, TableColumnHeader, type ColumnDef } from '@/components/Table';
 
@@ -78,8 +79,8 @@ const getTransferHistoryTableColumnDef = ({
         ),
         renderCell: ({ fromAddress, toAddress }) => (
           <TableCell stacked>
-            <span>{fromAddress ? truncateAddress(fromAddress) : '-'}</span>
-            <span>{toAddress ? truncateAddress(toAddress) : '-'}</span>
+            <CopyableAddress address={fromAddress ?? undefined} />
+            <CopyableAddress address={toAddress ?? undefined} />
           </TableCell>
         ),
       },
@@ -93,8 +94,14 @@ const getTransferHistoryTableColumnDef = ({
         columnKey: TransferHistoryTableColumnKey.TxHash,
         getCellValue: (row) => row.transactionHash,
         label: stringGetter({ key: STRING_KEYS.TRANSACTION }),
-        renderCell: ({ transactionHash }) =>
-          transactionHash ? <Styled.TxHash withIcon>{transactionHash}</Styled.TxHash> : '-',
+        renderCell: ({ transactionHash, resources }) =>
+          transactionHash ? (
+            <Styled.TxHash withIcon href={resources.blockExplorerUrl}>
+              {truncateAddress(transactionHash, '')}
+            </Styled.TxHash>
+          ) : (
+            '-'
+          ),
       },
     } as Record<TransferHistoryTableColumnKey, ColumnDef<SubaccountTransfer>>
   )[key],
@@ -161,6 +168,26 @@ export const TransferHistoryTable = ({
   );
 };
 
+const CopyableAddress = ({ address }: { address?: string }) => {
+  const [copied, setCopied] = useState(false);
+
+  const onCopy = () => {
+    if (!address) return;
+    setCopied(true);
+    navigator.clipboard.writeText(address);
+    setTimeout(() => setCopied(false), 500);
+  };
+
+  return address ? (
+    <Styled.CopyableAddress onClick={onCopy} copied={copied}>
+      {truncateAddress(address)}
+      <Icon iconName={IconName.Copy} />
+    </Styled.CopyableAddress>
+  ) : (
+    '-'
+  );
+};
+
 const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.Table = styled(Table)`
@@ -182,3 +209,19 @@ Styled.TimeOutput = styled(Output)`
 Styled.TxHash = styled(Link)`
   justify-content: flex-end;
 `;
+
+Styled.CopyableAddress = styled(Styled.InlineRow)<{ copied: boolean }>`
+  cursor: pointer;
+
+  ${({ copied }) =>
+    copied
+      ? css`
+          filter: brightness(0.8);
+        `
+      : css`
+          &:hover {
+            filter: brightness(1.1);
+            text-decoration: underline;
+          }
+        `}
+`;