feat(ui): add TokenBalanceField component for displaying token balances (#142)

Introduce a new reusable component to display token balances with truncation and tooltip functionality. The component replaces inline token balance display logic in permissionHandlerContent and includes utility function for decimal truncation.

Author: mj-kiwi

packages/gator-permissions-snap/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snap-7715-permissions.git"
   },
   "source": {
-    "shasum": "nODLXP/oHwoGcAqLt3fXCkTszV4MiIPEL55PFWvw2us=",
+    "shasum": "2vOYwTM30DDpYzGG2NRfWFDCJ+jxKa36N5T9C1BnyWk=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/gator-permissions-snap/src/core/permissionHandlerContent.tsx

@@ -17,6 +17,7 @@ import {
   TextField,
   TooltipIcon,
   TokenField,
+  TokenBalanceField,
 } from '../ui/components';
 
 export const ACCOUNT_SELECTOR_NAME = 'account-selector';
@@ -81,11 +82,7 @@ export const PermissionHandlerContent = ({
   chainId,
   explorerUrl,
 }: PermissionHandlerContentProps): SnapElement => {
-  const tokenBalanceComponent = tokenBalance ? (
-    <Text>{tokenBalance} available</Text>
-  ) : (
-    <Skeleton />
-  );
+  const tokenBalanceComponent = TokenBalanceField({ tokenBalance });
 
   const fiatBalanceComponent = tokenBalanceFiat ? (
     <Text>{tokenBalanceFiat}</Text>

packages/gator-permissions-snap/src/ui/components/TokenBalanceField.tsx

@@ -0,0 +1,28 @@
+import { Skeleton, Text, Tooltip } from '@metamask/snaps-sdk/jsx';
+
+import { truncateDecimalPlaces } from '../../utils/string';
+
+type TokenBalanceFieldProps = {
+  tokenBalance: string | undefined;
+};
+
+/**
+ * A component that displays the token balance.
+ * @param props - The component props.
+ * @param props.tokenBalance - The token balance to display.
+ * @returns A JSX element containing the token balance or a skeleton if not available.
+ */
+export const TokenBalanceField = ({ tokenBalance }: TokenBalanceFieldProps) => {
+  if (!tokenBalance) {
+    return <Skeleton />;
+  }
+  const truncatedTokenBalance = truncateDecimalPlaces(tokenBalance);
+  if (truncatedTokenBalance === tokenBalance) {
+    return <Text>{truncatedTokenBalance} available</Text>;
+  }
+  return (
+    <Tooltip content={<Text>{tokenBalance}</Text>}>
+      <Text>{truncatedTokenBalance} available</Text>
+    </Tooltip>
+  );
+};

packages/gator-permissions-snap/src/ui/components/index.ts

@@ -7,3 +7,4 @@ export { TextField } from './TextField';
 export { TokenIcon } from './TokenIcon';
 export { TooltipIcon } from './TooltipIcon';
 export { TokenField } from './TokenField';
+export { TokenBalanceField } from './TokenBalanceField';

packages/gator-permissions-snap/src/utils/string.ts

@@ -58,3 +58,34 @@ export function shortenAddress(address = '') {
     skipCharacterInEnd: false,
   });
 }
+
+/**
+ * Truncates the decimal part of a numeric string to a specified number of digits.
+ * If the input is not a valid number, returns the original value.
+ *
+ * @param value - The numeric string to truncate (e.g., "123.45678").
+ * @param decimalPlaces - The maximum number of decimal places to keep. Defaults to 5.
+ * @returns The truncated numeric string.
+ * @throws {Error} If the input value is not a valid number.
+ *
+ * @example
+ * truncateDecimalPlaces("123.456789123", 4); // "123.4567"
+ * truncateDecimalPlaces("100", 4); // "100"
+ * truncateDecimalPlaces("abc", 4); // "abc"
+ */
+export function truncateDecimalPlaces(
+  value: string,
+  decimalPlaces = 5,
+): string {
+  const trimmedValue = value.trim();
+  // Only allow optional minus, digits, optional decimal and digits
+  if (!/^[-+]?\d+(\.\d+)?$/u.test(trimmedValue)) {
+    throw new Error(`Invalid number: ${value}`);
+  }
+
+  const [whole = '', decimals = ''] = trimmedValue.split('.');
+  if (!decimals) {
+    return whole;
+  }
+  return `${whole}.${decimals.slice(0, decimalPlaces)}`;
+}

packages/gator-permissions-snap/test/utils/string.test.ts

@@ -0,0 +1,53 @@
+import { truncateDecimalPlaces } from '../../src/utils/string';
+
+describe('truncateDecimalPlaces', () => {
+  it('truncates decimals to default 5 places', () => {
+    expect(truncateDecimalPlaces('123.456789123')).toBe('123.45678');
+  });
+
+  it('truncates decimals to specified places', () => {
+    expect(truncateDecimalPlaces('123.456789123', 4)).toBe('123.4567');
+  });
+
+  it('returns original if decimals are less than or equal to specified', () => {
+    expect(truncateDecimalPlaces('123.45', 8)).toBe('123.45');
+    expect(truncateDecimalPlaces('123.4567', 4)).toBe('123.4567');
+  });
+
+  it('returns integer part if no decimals', () => {
+    expect(truncateDecimalPlaces('100')).toBe('100');
+  });
+
+  it('trims input before processing', () => {
+    expect(truncateDecimalPlaces('  123.456789123  ', 3)).toBe('123.456');
+  });
+
+  it('handles negative numbers', () => {
+    expect(truncateDecimalPlaces('-123.456789', 2)).toBe('-123.45');
+  });
+
+  it('handles positive sign', () => {
+    expect(truncateDecimalPlaces('+123.456789', 2)).toBe('+123.45');
+  });
+
+  it('throws error for invalid input', () => {
+    expect(() => truncateDecimalPlaces('abc.def')).toThrow(
+      'Invalid number: abc.def',
+    );
+    expect(() => truncateDecimalPlaces('foo')).toThrow('Invalid number: foo');
+    expect(() => truncateDecimalPlaces('')).toThrow('Invalid number: ');
+  });
+
+  it('handles scientific notation', () => {
+    expect(() => truncateDecimalPlaces('1e-8')).toThrow('Invalid number: 1e-8');
+    expect(() => truncateDecimalPlaces('1.23e2')).toThrow(
+      'Invalid number: 1.23e2',
+    );
+  });
+
+  it('throws error for more than one dot', () => {
+    expect(() => truncateDecimalPlaces('1.2.3')).toThrow(
+      'Invalid number: 1.2.3',
+    );
+  });
+});