From aca0d6aa74a5cb660757e351017fbf86b7dbfca4 Mon Sep 17 00:00:00 2001
From: binarybaron <86064887+binarybaron@users.noreply.github.com>
Date: Sat, 16 Nov 2024 12:28:09 +0100
Subject: [PATCH] feat(gui): Show up to 16 characters of peer id of asb (#176)

---
 .../renderer/components/modal/provider/ProviderInfo.tsx  | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src-gui/src/renderer/components/modal/provider/ProviderInfo.tsx b/src-gui/src/renderer/components/modal/provider/ProviderInfo.tsx
index 7e2bd7f99..37e13b27f 100644
--- a/src-gui/src/renderer/components/modal/provider/ProviderInfo.tsx
+++ b/src-gui/src/renderer/components/modal/provider/ProviderInfo.tsx
@@ -31,7 +31,7 @@ const useStyles = makeStyles((theme) => ({
  */
 function ProviderMarkupChip({ provider }: { provider: ExtendedProviderStatus }) {
   const marketExchangeRate = useAppSelector(s => s.rates?.xmrBtcRate);
-  if (marketExchangeRate === null) 
+  if (marketExchangeRate === null)
     return null;
 
   const providerExchangeRate = satsToBtc(provider.price);
@@ -63,7 +63,7 @@ export default function ProviderInfo({
         {provider.multiAddr}
       </Typography>
       <Typography color="textSecondary" gutterBottom>
-        <TruncatedText>{provider.peerId}</TruncatedText>
+        <TruncatedText limit={16} truncateMiddle>{provider.peerId}</TruncatedText>
       </Typography>
       <Typography variant="caption">
         Exchange rate:{" "}
@@ -82,9 +82,8 @@ export default function ProviderInfo({
         )}
         {provider.age ? (
           <Chip
-            label={`Went online ${Math.round(secondsToDays(provider.age))} ${
-              provider.age === 1 ? "day" : "days"
-            } ago`}
+            label={`Went online ${Math.round(secondsToDays(provider.age))} ${provider.age === 1 ? "day" : "days"
+              } ago`}
           />
         ) : (
           <Chip label="Discovered via rendezvous point" />