feat: extract formatEllipsized util, use in gateway for node ID

fedimint · Aug 31, 2023 · bda9484 · bda9484
1 parent d5bb69a
commit bda9484
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 10 deletions.
diff --git a/apps/gateway-ui/src/components/GatewayCard.tsx b/apps/gateway-ui/src/components/GatewayCard.tsx
@@ -13,7 +13,7 @@ export const GatewayCard = React.memo(function GatewayCard({
   children,
 }: GatewayCardProps) {
   return (
-    <Card w='100%' h='100%' maxWidth='100%' maxH='100%'>
+    <Card w='100%' maxWidth='100%'>
       <CardHeader>
         <Text size='lg' fontWeight='600'>
           {title}

diff --git a/apps/gateway-ui/src/components/InfoCard.tsx b/apps/gateway-ui/src/components/InfoCard.tsx
@@ -7,7 +7,7 @@ import {
   Box,
   useClipboard,
 } from '@chakra-ui/react';
-import { useTranslation } from '@fedimint/utils';
+import { formatEllipsized, useTranslation } from '@fedimint/utils';
 import { GatewayCard } from '.';
 import { ReactComponent as CopyIcon } from '../assets/svgs/copy.svg';
 import { ReactComponent as LinkIcon } from '../assets/svgs/linkIcon.svg';
@@ -27,7 +27,7 @@ export const InfoCard = React.memo(function InfoCard(
 
   return (
     <GatewayCard title={t('info-card.card_header')}>
-      <Flex gap='8px'>
+      <Flex gap='8px' mb='8px'>
         <Text
           fontSize='md'
           color={theme.colors.gray[900]}
@@ -37,7 +37,7 @@ export const InfoCard = React.memo(function InfoCard(
           cursor='pointer'
           onClick={onCopy}
         >
-          {nodeId}
+          {formatEllipsized(nodeId)}
         </Text>
         <Box>
           {hasCopied ? (

diff --git a/apps/guardian-ui/src/components/GatewaysCard.tsx b/apps/guardian-ui/src/components/GatewaysCard.tsx
@@ -10,13 +10,10 @@ import {
 } from '@chakra-ui/react';
 import { ConfigResponse, Gateway } from '../types';
 import { Table, TableColumn, TableRow } from '@fedimint/ui';
-import { useTranslation } from '@fedimint/utils';
+import { useTranslation, formatEllipsized } from '@fedimint/utils';
 import { useAdminContext } from '../hooks';
 import { LightningModuleRpc } from '../GuardianApi';
 
-const ellipsisSandwich = (text: string) =>
-  `${text.substring(0, 6)}...${text.substring(text.length - 6)}`;
-
 type TableKey = 'nodeId' | 'gatewayId' | 'fee';
 
 interface GatewaysCardProps {
@@ -79,7 +76,7 @@ export const GatewaysCard: React.FC<GatewaysCardProps> = ({ config }) => {
           key: gateway_id,
           nodeId: (
             <Flex direction='column' gap='4px'>
-              <Text>{ellipsisSandwich(node_pub_key)}</Text>
+              <Text>{formatEllipsized(node_pub_key)}</Text>
               <Text size='xs'>
                 <Link
                   color={theme.colors.blue[600]}
@@ -94,7 +91,7 @@ export const GatewaysCard: React.FC<GatewaysCardProps> = ({ config }) => {
               </Text>
             </Flex>
           ),
-          gatewayId: ellipsisSandwich(gateway_id),
+          gatewayId: formatEllipsized(gateway_id),
           fee: fee,
           outgoingFee: fee,
         };

diff --git a/packages/utils/src/format.tsx b/packages/utils/src/format.tsx
@@ -0,0 +1,11 @@
+/**
+ * Given a string, turn it into an "ellipsis sandwich" with the start and
+ * end showing. If the text is shorter than it would be with an ellipsis,
+ * the full string is returned instead.
+ */
+export function formatEllipsized(text: string, size = 6) {
+  if (text.length <= size * 2 + 3) {
+    return text;
+  }
+  return `${text.substring(0, size)}...${text.substring(text.length - size)}`;
+}
diff --git a/packages/utils/src/index.tsx b/packages/utils/src/index.tsx
@@ -1 +1,2 @@
 export * from './i18n';
+export * from './format';