From 5e87be8a8b25f50d8d79ffc80bf61d6178995359 Mon Sep 17 00:00:00 2001
From: binarybaron <binarybaron@unstoppableswap.net>
Date: Mon, 9 Sep 2024 21:46:48 +0200
Subject: [PATCH] feat(gui): Dedicated react component for truncating swap ids,
 peer ids, ...

---
 .../renderer/components/alert/SwapStatusAlert.tsx  |  3 ++-
 .../src/renderer/components/modal/DialogHeader.tsx |  3 ++-
 .../components/modal/feedback/FeedbackDialog.tsx   |  3 ++-
 .../modal/listSellers/ListSellersDialog.tsx        |  6 ++----
 .../components/modal/provider/ProviderInfo.tsx     |  3 ++-
 .../renderer/components/other/TruncatedText.tsx    | 14 ++++++++++++++
 .../components/pages/history/table/HistoryRow.tsx  |  5 ++++-
 .../history/table/SwapMoneroRecoveryButton.tsx     |  5 ++++-
 8 files changed, 32 insertions(+), 10 deletions(-)
 create mode 100644 src-gui/src/renderer/components/other/TruncatedText.tsx

diff --git a/src-gui/src/renderer/components/alert/SwapStatusAlert.tsx b/src-gui/src/renderer/components/alert/SwapStatusAlert.tsx
index 8453331e..1fa17491 100644
--- a/src-gui/src/renderer/components/alert/SwapStatusAlert.tsx
+++ b/src-gui/src/renderer/components/alert/SwapStatusAlert.tsx
@@ -11,6 +11,7 @@ import {
 import { ReactNode } from "react";
 import { exhaustiveGuard } from "utils/typescriptUtils";
 import HumanizedBitcoinBlockDuration from "../other/HumanizedBitcoinBlockDuration";
+import TruncatedText from "../other/TruncatedText";
 import {
   SwapCancelRefundButton,
   SwapResumeButton,
@@ -219,7 +220,7 @@ export default function SwapStatusAlert({
       variant="filled"
     >
       <AlertTitle>
-        Swap {swap.swap_id.substring(0, 5)}... is unfinished
+        Swap <TruncatedText>{swap.swap_id}</TruncatedText> is unfinished
       </AlertTitle>
       <SwapAlertStatusText swap={swap} />
     </Alert>
diff --git a/src-gui/src/renderer/components/modal/DialogHeader.tsx b/src-gui/src/renderer/components/modal/DialogHeader.tsx
index 043bef49..4cdb482b 100644
--- a/src-gui/src/renderer/components/modal/DialogHeader.tsx
+++ b/src-gui/src/renderer/components/modal/DialogHeader.tsx
@@ -1,4 +1,5 @@
 import { DialogTitle, makeStyles, Typography } from "@material-ui/core";
+import { ReactNode } from "react";
 
 const useStyles = makeStyles({
   root: {
@@ -8,7 +9,7 @@ const useStyles = makeStyles({
 });
 
 type DialogTitleProps = {
-  title: string;
+  title: ReactNode;
 };
 
 export default function DialogHeader({ title }: DialogTitleProps) {
diff --git a/src-gui/src/renderer/components/modal/feedback/FeedbackDialog.tsx b/src-gui/src/renderer/components/modal/feedback/FeedbackDialog.tsx
index 093b0384..6b42c2ec 100644
--- a/src-gui/src/renderer/components/modal/feedback/FeedbackDialog.tsx
+++ b/src-gui/src/renderer/components/modal/feedback/FeedbackDialog.tsx
@@ -13,6 +13,7 @@ import {
 import { CliLog } from "models/cliModel";
 import { useSnackbar } from "notistack";
 import { useState } from "react";
+import TruncatedText from "renderer/components/other/TruncatedText";
 import { store } from "renderer/store/storeRenderer";
 import { useActiveSwapInfo, useAppSelector } from "store/hooks";
 import { parseDateString } from "utils/parseUtils";
@@ -68,7 +69,7 @@ function SwapSelectDropDown({
       <MenuItem value={0}>Do not attach logs</MenuItem>
       {swaps.map((swap) => (
         <MenuItem value={swap.swap_id} key={swap.swap_id}>
-          Swap {swap.swap_id.substring(0, 5)}... from{" "}
+          Swap <TruncatedText>{swap.swap_id}</TruncatedText> from{" "}
           {new Date(parseDateString(swap.start_date)).toDateString()} (
           <PiconeroAmount amount={swap.xmr_amount} />)
         </MenuItem>
diff --git a/src-gui/src/renderer/components/modal/listSellers/ListSellersDialog.tsx b/src-gui/src/renderer/components/modal/listSellers/ListSellersDialog.tsx
index e62e89ab..5a74e76f 100644
--- a/src-gui/src/renderer/components/modal/listSellers/ListSellersDialog.tsx
+++ b/src-gui/src/renderer/components/modal/listSellers/ListSellersDialog.tsx
@@ -14,6 +14,7 @@ import {
 import { Multiaddr } from "multiaddr";
 import { useSnackbar } from "notistack";
 import { ChangeEvent, useState } from "react";
+import TruncatedText from "renderer/components/other/TruncatedText";
 import PromiseInvokeButton from "renderer/components/PromiseInvokeButton";
 
 const PRESET_RENDEZVOUS_POINTS = [
@@ -108,10 +109,7 @@ export default function ListSellersDialog({
             <Chip
               key={rAddress}
               clickable
-              label={`${rAddress.substring(
-                0,
-                Math.min(rAddress.length - 1, 20),
-              )}...`}
+              label={<TruncatedText limit={30}>{rAddress}</TruncatedText>}
               onClick={() => setRendezvousAddress(rAddress)}
             />
           ))}
diff --git a/src-gui/src/renderer/components/modal/provider/ProviderInfo.tsx b/src-gui/src/renderer/components/modal/provider/ProviderInfo.tsx
index 77be7dc5..6b5c7e28 100644
--- a/src-gui/src/renderer/components/modal/provider/ProviderInfo.tsx
+++ b/src-gui/src/renderer/components/modal/provider/ProviderInfo.tsx
@@ -1,6 +1,7 @@
 import { Box, Chip, makeStyles, Tooltip, Typography } from "@material-ui/core";
 import { VerifiedUser } from "@material-ui/icons";
 import { ExtendedProviderStatus } from "models/apiModel";
+import TruncatedText from "renderer/components/other/TruncatedText";
 import {
   MoneroBitcoinExchangeRate,
   SatsAmount,
@@ -38,7 +39,7 @@ export default function ProviderInfo({
         {provider.multiAddr}
       </Typography>
       <Typography color="textSecondary" gutterBottom>
-        {provider.peerId.substring(0, 8)}...{provider.peerId.slice(-8)}
+        <TruncatedText limit={12}>{provider.peerId}</TruncatedText>
       </Typography>
       <Typography variant="caption">
         Exchange rate:{" "}
diff --git a/src-gui/src/renderer/components/other/TruncatedText.tsx b/src-gui/src/renderer/components/other/TruncatedText.tsx
new file mode 100644
index 00000000..a5e3d585
--- /dev/null
+++ b/src-gui/src/renderer/components/other/TruncatedText.tsx
@@ -0,0 +1,14 @@
+export default function TruncatedText({
+  children,
+  limit = 6,
+  ellipsis = "...",
+}: {
+  children: string;
+  limit?: number;
+  ellipsis?: string;
+}) {
+  const truncatedText =
+    children.length > limit ? children.slice(0, limit) + ellipsis : children;
+
+  return truncatedText;
+}
diff --git a/src-gui/src/renderer/components/pages/history/table/HistoryRow.tsx b/src-gui/src/renderer/components/pages/history/table/HistoryRow.tsx
index d325c93a..4f1748ca 100644
--- a/src-gui/src/renderer/components/pages/history/table/HistoryRow.tsx
+++ b/src-gui/src/renderer/components/pages/history/table/HistoryRow.tsx
@@ -11,6 +11,7 @@ import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
 import { GetSwapInfoResponse } from "models/tauriModel";
 import { useState } from "react";
+import TruncatedText from "renderer/components/other/TruncatedText";
 import { PiconeroAmount, SatsAmount } from "../../../other/Units";
 import HistoryRowActions from "./HistoryRowActions";
 import HistoryRowExpanded from "./HistoryRowExpanded";
@@ -52,7 +53,9 @@ export default function HistoryRow(swap: GetSwapInfoResponse) {
             {expanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
           </IconButton>
         </TableCell>
-        <TableCell>{swap.swap_id}</TableCell>
+        <TableCell>
+          <TruncatedText>{swap.swap_id}</TruncatedText>
+        </TableCell>
         <TableCell>
           <AmountTransfer
             xmrAmount={swap.xmr_amount}
diff --git a/src-gui/src/renderer/components/pages/history/table/SwapMoneroRecoveryButton.tsx b/src-gui/src/renderer/components/pages/history/table/SwapMoneroRecoveryButton.tsx
index 1137df24..0e00e2a6 100644
--- a/src-gui/src/renderer/components/pages/history/table/SwapMoneroRecoveryButton.tsx
+++ b/src-gui/src/renderer/components/pages/history/table/SwapMoneroRecoveryButton.tsx
@@ -9,6 +9,7 @@ import {
 } from "@material-ui/core";
 import { ButtonProps } from "@material-ui/core/Button/Button";
 import { BobStateName, GetSwapInfoResponseExt } from "models/tauriModelExt";
+import TruncatedText from "renderer/components/other/TruncatedText";
 import PromiseInvokeButton from "renderer/components/PromiseInvokeButton";
 import { getMoneroRecoveryKeys } from "renderer/rpc";
 import { store } from "renderer/store/storeRenderer";
@@ -38,7 +39,9 @@ function MoneroRecoveryKeysDialog({
   return (
     <Dialog open onClose={onClose} maxWidth="sm" fullWidth>
       <DialogHeader
-        title={`Recovery Keys for swap ${swap_id.substring(0, 5)}...`}
+        title=<>
+          Recovery Keys for swap <TruncatedText>{swap_id}</TruncatedText>
+        </>
       />
       <DialogContent>
         <DialogContentText>