From ba811e4e17e14cbb04d525bbbc254af2f0e77ca0 Mon Sep 17 00:00:00 2001
From: Josemaria Nriagu <49484425+josenriagu@users.noreply.github.com>
Date: Mon, 1 Mar 2021 12:41:52 +0100
Subject: [PATCH] fix(ui): cannot read substring of undefined

---
 .../components/Cards/profile-cards/profile-card.tsx |  1 +
 ui/design/src/utils/string-utils.ts                 | 13 ++++++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/ui/design/src/components/Cards/profile-cards/profile-card.tsx b/ui/design/src/components/Cards/profile-cards/profile-card.tsx
index 49f45b708f..4edec39e99 100644
--- a/ui/design/src/components/Cards/profile-cards/profile-card.tsx
+++ b/ui/design/src/components/Cards/profile-cards/profile-card.tsx
@@ -188,6 +188,7 @@ const ProfileCard: React.FC<IProfileCardProps> = props => {
       navigator.clipboard.writeText(CID);
     }
   };
+
   return (
     <MainAreaCardBox className={className}>
       <ProfileCardCoverImage
diff --git a/ui/design/src/utils/string-utils.ts b/ui/design/src/utils/string-utils.ts
index b5835ed5d0..bd3786c210 100644
--- a/ui/design/src/utils/string-utils.ts
+++ b/ui/design/src/utils/string-utils.ts
@@ -6,11 +6,14 @@ export const capitalize = (str?: string) => {
 };
 
 export const truncateMiddle = (str: string, startChars: number = 6, endChars: number = 4) => {
-  let truncated = '';
-  truncated += str.substring(0, startChars);
-  truncated += '...';
-  truncated += str.substring(str.length - endChars, str.length);
-  return truncated;
+  if (str) {
+    let truncated = '';
+    truncated += str.substring(0, startChars);
+    truncated += '...';
+    truncated += str.substring(str.length - endChars, str.length);
+    return truncated;
+  }
+  return '';
 };
 
 /**