adds transaction hash to accounts overview page

adds heading text for smaller breakpoint view adds ability to copy transaction hash to clipboard copy to clipboard generalized functionality
iron-fish · Jun 26, 2024 · 6242eb8 · 6242eb8
1 parent a8f188c
commit 6242eb8
Show file tree

Hide file tree

Showing 12 changed files with 97 additions and 70 deletions.
diff --git a/renderer/components/AccountRow/AccountRow.tsx b/renderer/components/AccountRow/AccountRow.tsx
@@ -22,7 +22,7 @@ import { LogoSm } from "@/ui/SVGs/LogoSm";
 import { formatOre } from "@/utils/ironUtils";
 
 import { AccountSyncingProgress } from "../AccountSyncingProgress/AccountSyncingProgress";
-import { CopyAddress } from "../CopyAddress/CopyAddress";
+import { CopyToClipboard } from "../CopyToClipboard/CopyToClipboard";
 import { ViewOnlyChip } from "../ViewOnlyChip/ViewOnlyChip";
 
 const messages = defineMessages({
@@ -106,7 +106,7 @@ export function AccountRow({
               <Heading as="span" fontWeight="regular" fontSize="2xl">
                 {formatOre(balance)} $IRON
               </Heading>
-              <CopyAddress address={address} />
+              <CopyToClipboard text={address} />
             </VStack>
 
             <VStack

diff --git a/renderer/components/BridgeTransactionInformation/BridgeTransactionInformationShell.tsx b/renderer/components/BridgeTransactionInformation/BridgeTransactionInformationShell.tsx
@@ -4,10 +4,10 @@ import {
   Grid,
   GridItem,
   Heading,
-  Text,
   HStack,
-  VStack,
   Image,
+  Text,
+  VStack,
 } from "@chakra-ui/react";
 import NextImage from "next/image";
 import { ReactNode } from "react";
@@ -17,7 +17,7 @@ import chainportIcon from "@/images/chainport/chainport-icon-lg.png";
 import { COLORS } from "@/ui/colors";
 import { ShadowCard } from "@/ui/ShadowCard/ShadowCard";
 
-import { CopyAddress } from "../CopyAddress/CopyAddress";
+import { CopyToClipboard } from "../CopyToClipboard/CopyToClipboard";
 
 const messages = defineMessages({
   heading: {
@@ -170,11 +170,12 @@ export function BridgeTransactionInformationShell({
                   <Box fontSize="md">
                     <VStack alignItems="flex-start">
                       {targetTxHash ? (
-                        <CopyAddress
+                        <CopyToClipboard
                           fontSize="md"
                           color={COLORS.BLACK}
                           _dark={{ color: COLORS.WHITE }}
-                          address={targetTxHash}
+                          text={targetTxHash}
+                          messageType="hashCopied"
                           parts={2}
                         />
                       ) : (

diff --git a/renderer/components/ContactRow/ContactRow.tsx b/renderer/components/ContactRow/ContactRow.tsx
@@ -9,7 +9,7 @@ import { PillButton } from "@/ui/PillButton/PillButton";
 import { ShadowCard } from "@/ui/ShadowCard/ShadowCard";
 import { ArrowSend } from "@/ui/SVGs/ArrowSend";
 
-import { CopyAddress } from "../CopyAddress/CopyAddress";
+import { CopyToClipboard } from "../CopyToClipboard/CopyToClipboard";
 import { FishIcon } from "../FishIcon/FishIcon";
 
 const messages = defineMessages({
@@ -78,7 +78,7 @@ export function ContactRow({ name, address, order }: Props) {
             <Text as="span">{name}</Text>
           </GridItem>
           <GridItem display="flex">
-            <CopyAddress address={address} color="inherit" />
+            <CopyToClipboard text={address} color="inherit" />
           </GridItem>
           <GridItem display="flex" alignItems="center" mr={4}>
             <PillButton

diff --git a/...er/components/CopyAddress/CopyAddress.tsx → ...nents/CopyToClipboard/CopyToClipboard.tsx b/...er/components/CopyAddress/CopyAddress.tsx → ...nents/CopyToClipboard/CopyToClipboard.tsx
@@ -11,18 +11,26 @@ const messages = defineMessages({
   addressCopied: {
     defaultMessage: "Address copied to clipboard",
   },
+  hashCopied: {
+    defaultMessage: "Hash copied to clipboard",
+  },
+  default: {
+    defaultMessage: "Copied to clipboard",
+  },
 });
 
 type Props = TextProps & {
-  address: string;
+  text: string;
   parts?: 2 | 3;
   truncate?: boolean;
+  messageType?: keyof typeof messages;
 };
 
-export function CopyAddress({
-  address,
+export function CopyToClipboard({
+  text,
   parts = 3,
   truncate = true,
+  messageType = "addressCopied",
   ...rest
 }: Props) {
   const [_, copyToClipboard] = useCopyToClipboard();
@@ -34,9 +42,9 @@ export function CopyAddress({
       as="button"
       onClick={(e) => {
         e.preventDefault();
-        copyToClipboard(address);
+        copyToClipboard(text);
         toast({
-          message: formatMessage(messages.addressCopied),
+          message: formatMessage(messages[messageType]),
         });
       }}
       color={COLORS.GRAY_MEDIUM}
@@ -48,7 +56,7 @@ export function CopyAddress({
       }}
       {...rest}
     >
-      {truncate ? truncateString(address, parts) : address}
+      {truncate ? truncateString(text, parts) : text}
       <CopyIcon
         color={COLORS.GRAY_MEDIUM}
         _dark={{ color: COLORS.DARK_MODE.GRAY_LIGHT }}

diff --git a/renderer/components/NoteRow/NoteHeadings.tsx b/renderer/components/NoteRow/NoteHeadings.tsx
@@ -7,7 +7,7 @@ type Props = {
 };
 
 export function NoteHeadings({ asTransactions }: Props) {
-  const headingsText = useHeadingsText();
+  const headingsText = useHeadingsText(asTransactions);
 
   return (
     <Grid
@@ -16,8 +16,10 @@ export function NoteHeadings({ asTransactions }: Props) {
         lg: "grid",
       }}
       templateColumns={{
-        base: `repeat(5, 1fr)`,
-        lg: `repeat(5, 1fr) ${asTransactions ? CARET_WIDTH : ""}`,
+        base: `repeat(${asTransactions ? "6" : "5"}, 1fr)`,
+        lg: `repeat(${asTransactions ? "6" : "5"}, 1fr) ${
+          asTransactions ? CARET_WIDTH : ""
+        }`,
       }}
       opacity="0.8"
       mb={4}

diff --git a/renderer/components/NoteRow/NoteRow.tsx b/renderer/components/NoteRow/NoteRow.tsx
@@ -1,5 +1,5 @@
 import { ChevronRightIcon } from "@chakra-ui/icons";
-import { Box, HStack, Text, Flex } from "@chakra-ui/react";
+import { Box, Flex, HStack, Text } from "@chakra-ui/react";
 import type {
   RpcAsset,
   TransactionStatus,
@@ -20,8 +20,8 @@ import { ExpiredIcon } from "./icons/ExpiredIcon";
 import { PendingIcon } from "./icons/PendingIcon";
 import { ReceivedIcon } from "./icons/ReceivedIcon";
 import { SentIcon } from "./icons/SentIcon";
-import { messages, CARET_WIDTH, useHeadingsText } from "./shared";
-import { CopyAddress } from "../CopyAddress/CopyAddress";
+import { CARET_WIDTH, messages, useHeadingsText } from "./shared";
+import { CopyToClipboard } from "../CopyToClipboard/CopyToClipboard";
 
 function getNoteStatusDisplay(
   type: TransactionType,
@@ -89,10 +89,10 @@ function NoteTo({
   }
 
   return (
-    <CopyAddress
+    <CopyToClipboard
       color={COLORS.BLACK}
       _dark={{ color: COLORS.WHITE }}
-      address={type === "send" ? to : from}
+      text={type === "send" ? to : from}
     />
   );
 }
@@ -139,7 +139,7 @@ export function NoteRow({
     from === to && type !== "miner",
     isBridge,
   );
-  const headings = useHeadingsText();
+  const headings = useHeadingsText(asTransaction);
 
   const cellContent = useMemo(() => {
     let key = 0;
@@ -151,7 +151,7 @@ export function NoteRow({
     );
     const symbol = CurrencyUtils.shortSymbol(assetId, asset);
 
-    return [
+    const row = [
       <HStack gap={4} key={key++}>
         {statusDisplay.icon}
         <Text as="span">{formatMessage(statusDisplay.message)}</Text>
@@ -173,6 +173,21 @@ export function NoteRow({
           : memo}
       </Text>,
     ];
+
+    if (asTransaction) {
+      row.push(
+        <Text as="span" key={key++}>
+          <CopyToClipboard
+            messageType="hashCopied"
+            color={COLORS.BLACK}
+            _dark={{ color: COLORS.WHITE }}
+            text={transactionHash}
+          />
+        </Text>,
+      );
+    }
+
+    return row;
   }, [
     asset,
     assetId,
@@ -186,6 +201,8 @@ export function NoteRow({
     to,
     type,
     value,
+    asTransaction,
+    transactionHash,
   ]);
 
   return (

diff --git a/renderer/components/NoteRow/shared.ts b/renderer/components/NoteRow/shared.ts
@@ -18,6 +18,9 @@ export const messages = defineMessages({
   memo: {
     defaultMessage: "Memo",
   },
+  transactionHash: {
+    defaultMessage: "Hash",
+  },
   sent: {
     defaultMessage: "Sent",
   },
@@ -49,13 +52,17 @@ export const messages = defineMessages({
   },
 });
 
-export function useHeadingsText() {
+export function useHeadingsText(asTransaction: boolean = false) {
   const { formatMessage } = useIntl();
-  return [
+  const headings = [
     formatMessage(messages.action),
     formatMessage(messages.amount),
     formatMessage(messages.fromTo),
     formatMessage(messages.date),
     formatMessage(messages.memo),
   ];
+  if (asTransaction) {
+    headings.push(formatMessage(messages.transactionHash));
+  }
+  return headings;
 }
diff --git a/renderer/components/TransactionInformation/TransactionInformation.tsx b/renderer/components/TransactionInformation/TransactionInformation.tsx
@@ -4,8 +4,8 @@ import {
   Grid,
   GridItem,
   Heading,
-  Text,
   HStack,
+  Text,
   VStack,
 } from "@chakra-ui/react";
 import { upperFirst } from "lodash-es";
@@ -24,7 +24,7 @@ import { ShadowCard } from "@/ui/ShadowCard/ShadowCard";
 import { formatDate } from "@/utils/formatDate";
 import { formatOre } from "@/utils/ironUtils";
 
-import { CopyAddress } from "../CopyAddress/CopyAddress";
+import { CopyToClipboard } from "../CopyToClipboard/CopyToClipboard";
 
 type Transaction = TRPCRouterOutputs["getTransaction"]["transaction"];
 
@@ -69,11 +69,12 @@ function TransactionHashBody({ transaction }: { transaction: Transaction }) {
 
   return (
     <VStack alignItems="flex-start">
-      <CopyAddress
+      <CopyToClipboard
         fontSize="md"
         color={COLORS.BLACK}
         _dark={{ color: COLORS.WHITE }}
-        address={transaction.hash}
+        text={transaction.hash}
+        messageType="hashCopied"
         parts={2}
       />
       {data && (

diff --git a/renderer/intl/locales/en-US.json b/renderer/intl/locales/en-US.json
@@ -159,6 +159,9 @@
   "9+Ddtu": {
     "message": "Next"
   },
+  "93oVTh": {
+    "message": "Copied to clipboard"
+  },
   "9DI6zl": {
     "message": "You can change the fee amount you'd like to pay. However, that will directly correlate with the speed with which your transaction is picked up by the blockchain."
   },
@@ -273,6 +276,9 @@
   "IwW0RC": {
     "message": "If none of these steps help, please report the issue on <link>Discord</link>."
   },
+  "Ix4/6C": {
+    "message": "Hash copied to clipboard"
+  },
   "JJNc3c": {
     "message": "Previous"
   },
@@ -469,12 +475,12 @@
   "ThbkST": {
     "message": "Unable to load your transactions"
   },
+  "TvwmZr": {
+    "message": "Hash"
+  },
   "TzwzhT": {
     "message": "You can remove and reimport your accounts whenever you like, provided that you possess the account keys. It is highly recommended to maintain a backup of your account keys in a secure location."
   },
-  "U78NhE": {
-    "message": "Complete"
-  },
   "ULXFfP": {
     "message": "Receive"
   },
@@ -601,9 +607,6 @@
   "eVlu1R": {
     "message": "Select language"
   },
-  "eaEGGc": {
-    "message": "Preparing target txn"
-  },
   "ecJcrS": {
     "message": "Syncing blocks"
   },
@@ -619,9 +622,6 @@
   "fKN5VY": {
     "message": "Create Contact"
   },
-  "fYjxPn": {
-    "message": "Submitted target txn"
-  },
   "flxGnZ": {
     "message": "Telemetry enabled"
   },
@@ -658,9 +658,6 @@
   "hR0flV": {
     "message": "All your transactions, whether in $IRON or other custom assets, will be displayed in this section. To start a transaction, simply click on the 'Send' or 'Receive' tabs."
   },
-  "iFsDVR": {
-    "message": "Loading"
-  },
   "iWiHY7": {
     "message": "The blockchain is syncing. Your balance may be inaccurate and sending transactions will be disabled until the sync is complete."
   },
@@ -766,9 +763,6 @@
   "rGIQdX": {
     "message": "Back to Account Overview"
   },
-  "raexxM": {
-    "message": "Submitted"
-  },
   "rbrahO": {
     "message": "Close"
   },
@@ -817,9 +811,6 @@
   "vV69eP": {
     "message": "Downloading a snapshot is the fastest way to sync with the network."
   },
-  "vXCeIi": {
-    "message": "Failed"
-  },
   "vaP4MI": {
     "message": "It currently holds:"
   },