diff --git a/public/locales/en.json b/public/locales/en.json index ebb2242..e7123c5 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -356,6 +356,8 @@ "showRelativeDatesDescription": "Everywhere on the site, if a date is less than 7 days ago, it will show as a relative date instead.", "showNativeDates": "Show dates in a native date format from the language", "showNativeDatesDescription": "If disabled, dates will always be shown as YYYY/MM/DD HH:mm:ss", + "transactionsHighlightOwn": "Highlight own transactions in the transactions table", + "transactionsHighlightVerified": "Highlight verified addresses in the transactions table", "transactionDefaultRaw": "Default to the 'Raw' tab instead of 'CommonMeta' on the transaction page", "defaultPageSize": "Default page size for table listings", "tableHotkeys": "Enable table navigation hotkeys (left and right arrows)", diff --git a/src/components/addresses/VerifiedAddress.tsx b/src/components/addresses/VerifiedAddress.tsx index cdef14d..452fa53 100644 --- a/src/components/addresses/VerifiedAddress.tsx +++ b/src/components/addresses/VerifiedAddress.tsx @@ -30,8 +30,8 @@ export type VerifiedAddresses = Record; export const verifiedAddresses: VerifiedAddresses = verifiedAddressesJson; -export const getVerified = (address: string): VerifiedAddress | undefined => - verifiedAddresses[address]; +export const getVerified = (address?: string | null): VerifiedAddress | undefined => + address ? verifiedAddresses[address] : undefined; interface Props { address: string; diff --git a/src/pages/addresses/AddressButtonRow.tsx b/src/pages/addresses/AddressButtonRow.tsx index b207797..6445046 100644 --- a/src/pages/addresses/AddressButtonRow.tsx +++ b/src/pages/addresses/AddressButtonRow.tsx @@ -46,7 +46,6 @@ )} - {/* Add contact/edit wallet button */} {/* TODO: Change this to edit if they're already a contact */} {myWallet diff --git a/src/pages/settings/SettingsPage.tsx b/src/pages/settings/SettingsPage.tsx index dd2462b..3d32234 100644 --- a/src/pages/settings/SettingsPage.tsx +++ b/src/pages/settings/SettingsPage.tsx @@ -63,6 +63,8 @@ booleanSetting("blockHashCopyButtons"), booleanSetting("showRelativeDates"), booleanSetting("showNativeDates"), + booleanSetting("transactionsHighlightOwn"), + booleanSetting("transactionsHighlightVerified"), booleanSetting("transactionDefaultRaw"), integerSetting("defaultPageSize"), booleanSetting("tableHotkeys"), diff --git a/src/pages/transactions/TransactionsPage.less b/src/pages/transactions/TransactionsPage.less index c9f2feb..641e254 100644 --- a/src/pages/transactions/TransactionsPage.less +++ b/src/pages/transactions/TransactionsPage.less @@ -13,4 +13,46 @@ margin-right: @margin-sm; } } + + // Highlight own transactions + .ant-table .transaction-row-own { + background: fade(@kw-primary, 15%); + + td.ant-table-cell { + border-bottom-color: fade(@kw-primary, 20%); + } + + .ant-table-cell.ant-table-column-sort { + background: fade(@kw-primary, 20%); + } + + &:hover td.ant-table-cell { + background: fade(@kw-primary, 20%); + + &.ant-table-cell.ant-table-column-sort { + background: fade(@kw-primary, 35%); + } + } + } + + // Highlight verified addresses + .ant-table .transaction-row-verified { + background: fade(@kw-orange, 10%); + + td.ant-table-cell { + border-bottom-color: fade(@kw-orange, 20%); + } + + .ant-table-cell.ant-table-column-sort { + background: fade(@kw-orange, 10%); + } + + &:hover td.ant-table-cell { + background: fade(@kw-orange, 20%); + + &.ant-table-cell.ant-table-column-sort { + background: fade(@kw-orange, 35%); + } + } + } } diff --git a/src/pages/transactions/TransactionsTable.tsx b/src/pages/transactions/TransactionsTable.tsx index 4627c13..a3e46ca 100644 --- a/src/pages/transactions/TransactionsTable.tsx +++ b/src/pages/transactions/TransactionsTable.tsx @@ -2,6 +2,7 @@ // This file is part of KristWeb 2 under AGPL-3.0. // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt import { useState, useEffect, Dispatch, SetStateAction } from "react"; +import classNames from "classnames"; import { Table, TablePaginationConfig } from "antd"; import { useTranslation } from "react-i18next"; @@ -20,11 +21,15 @@ import { TransactionType, TYPES_SHOW_VALUE } from "@comp/transactions/TransactionType"; import { ContextualAddress } from "@comp/addresses/ContextualAddress"; +import { getVerified } from "@comp/addresses/VerifiedAddress"; import { KristValue } from "@comp/krist/KristValue"; import { KristNameLink } from "@comp/names/KristNameLink"; import { TransactionConciseMetadata } from "@comp/transactions/TransactionConciseMetadata"; import { DateTime } from "@comp/DateTime"; +import { useWallets } from "@wallets"; +import { useBooleanSetting } from "@utils/settings"; + import Debug from "debug"; const debug = Debug("kristweb:transactions-table"); @@ -93,6 +98,12 @@ ); const dateColumnWidth = useDateColumnWidth(); + const highlightOwn = useBooleanSetting("transactionsHighlightOwn") && + listingType !== ListingType.WALLETS; + const highlightVerified = useBooleanSetting("transactionsHighlightVerified"); + + // Used to highlight own transactions + const { walletAddressMap } = useWallets(); // Fetch the transactions from the API, mapping the table options useEffect(() => { @@ -122,6 +133,19 @@ debug("results? %b res.transactions.length: %d res.count: %d res.total: %d", !!res, res?.transactions?.length, res?.count, res?.total); + function getRowClasses(tx: KristTransaction): string { + return classNames({ + // Highlight own transactions + "transaction-row-own": highlightOwn + && ((tx.from && walletAddressMap[tx.from]) + || (tx.to && walletAddressMap[tx.to])), + + // Highlight verified addresses + "transaction-row-verified": highlightVerified + && (!!getVerified(tx.from) || !!getVerified(tx.to)), + }); + } + const tbl = className="transactions-table" size="small" @@ -132,6 +156,9 @@ {...paginationTableProps} + // Highlight own transactions and verified addresses + rowClassName={getRowClasses} + columns={[ // ID { diff --git a/src/utils/settings.ts b/src/utils/settings.ts index 50cfb74..6ef7625 100644 --- a/src/utils/settings.ts +++ b/src/utils/settings.ts @@ -46,6 +46,10 @@ readonly showRelativeDates: boolean; /** Show dates in a native date format from the language. */ readonly showNativeDates: boolean; + /** Highlight own transactions in the transactions table. */ + readonly transactionsHighlightOwn: boolean; + /** Highlight verified addresses in the transactions table. */ + readonly transactionsHighlightVerified: boolean; /** Default to the 'Raw' tab instead of 'CommonMeta' on the transaction page. */ readonly transactionDefaultRaw: boolean; /** Default page size for table listings. */ @@ -74,6 +78,8 @@ blockHashCopyButtons: false, showRelativeDates: false, showNativeDates: false, + transactionsHighlightOwn: true, + transactionsHighlightVerified: true, transactionDefaultRaw: false, defaultPageSize: 15, tableHotkeys: true,