feat(gui): Dedicated react component for truncating swap ids, peer ids, ...

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>

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) {

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>

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)}
             />
           ))}

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:{" "}

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;
+}

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}

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>