fix(explorer): handle UI display for empty host version or country co…

…de string cases
SiaFoundation · Nov 25, 2024 · a95d6cc · a95d6cc
1 parent c19d56c
commit a95d6cc
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 13 deletions.
diff --git a/.changeset/small-trees-cough.md b/.changeset/small-trees-cough.md
@@ -0,0 +1,5 @@
+---
+'explorer': minor
+---
+
+Fixed UI display for empty host version or country code string cases.
diff --git a/apps/explorer/components/Host/HostInfo.tsx b/apps/explorer/components/Host/HostInfo.tsx
@@ -93,20 +93,24 @@ export function HostInfo({ host }: Props) {
         )}
       </div>
       <div className="flex flex-wrap gap-x-2 gap-y-1 items-center">
-        <Tooltip content={`Host version ${host.settings.version}`}>
-          <Text size="14" color="subtle" className="flex gap-1 items-center">
-            <Fork16 />
-            {host.settings.version}
-          </Text>
-        </Tooltip>
-        <Tooltip content={`Host located in ${host.countryCode}`}>
-          <div className="flex gap-1 items-center">
-            <Text size="14">{countryCodeEmoji(host.countryCode)}</Text>
-            <Text size="14" color="subtle">
-              {host.countryCode}
+        {host.settings.version.length ? (
+          <Tooltip content={`Host version ${host.settings.version}`}>
+            <Text size="14" color="subtle" className="flex gap-1 items-center">
+              <Fork16 />
+              {host.settings.version}
             </Text>
-          </div>
-        </Tooltip>
+          </Tooltip>
+        ) : null}
+        {host.countryCode.length ? (
+          <Tooltip content={`Host located in ${host.countryCode}`}>
+            <div className="flex gap-1 items-center">
+              <Text size="14">{countryCodeEmoji(host.countryCode)}</Text>
+              <Text size="14" color="subtle">
+                {host.countryCode}
+              </Text>
+            </div>
+          </Tooltip>
+        ) : null}
         <Tooltip
           content={`Host first seen at ${humanDate(host.knownSince, {
             dateStyle: 'medium',