diff --git a/package.json b/package.json index 88420c0..c200637 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 83de3b2..a7f94ab 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/views/tables/TransferHistoryTable.tsx b/src/views/tables/TransferHistoryTable.tsx index f5df2a9..59fa60b 100644 --- a/src/views/tables/TransferHistoryTable.tsx +++ b/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 }) => ( - {fromAddress ? truncateAddress(fromAddress) : '-'} - {toAddress ? truncateAddress(toAddress) : '-'} + + ), }, @@ -93,8 +94,14 @@ const getTransferHistoryTableColumnDef = ({ columnKey: TransferHistoryTableColumnKey.TxHash, getCellValue: (row) => row.transactionHash, label: stringGetter({ key: STRING_KEYS.TRANSACTION }), - renderCell: ({ transactionHash }) => - transactionHash ? {transactionHash} : '-', + renderCell: ({ transactionHash, resources }) => + transactionHash ? ( + + {truncateAddress(transactionHash, '')} + + ) : ( + '-' + ), }, } as Record> )[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 ? ( + + {truncateAddress(address)} + + + ) : ( + '-' + ); +}; + const Styled: Record = {}; 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; + } + `} +`;