feat(hooks): add use-currency-formatter (#25)

.changeset/real-kings-sort.md

@@ -0,0 +1,6 @@
+---
+"@interlay/ui": patch
+"@interlay/hooks": patch
+---
+
+feat(hooks): add use-currency-formatter

.storybook/main.ts

@@ -12,8 +12,8 @@ function getAbsolutePath(value: string): any {
 const config: StorybookConfig = {
   stories: [
     '../packages/components/src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
-    '../packages/icons/**/src/stories/*.stories.@(js|jsx|mjs|ts|tsx)',
-    '../packages/hooks/src/**/*.stories.@(js|jsx|mjs|ts|tsx)'
+    '../packages/hooks/src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../packages/icons/**/src/stories/*.stories.@(js|jsx|mjs|ts|tsx)'
   ],
   addons: [
     getAbsolutePath('@storybook/addon-links'),

packages/components/src/TokenInput/BaseTokenInput.tsx

@@ -1,10 +1,10 @@
 import { useLabel } from '@react-aria/label';
 import { mergeProps } from '@react-aria/utils';
 import { forwardRef, ReactNode } from 'react';
+import { useCurrencyFormatter } from '@interlay/hooks';
 
 import { Flex } from '../Flex';
 import { NumberInput, NumberInputProps } from '../NumberInput';
-import { formatUSD } from '../utils/format';
 
 import { TokenInputLabel } from './TokenInputLabel';
 import { StyledUSDAdornment } from './TokenInput.style';
@@ -36,12 +36,13 @@ const BaseTokenInput = forwardRef<HTMLInputElement, BaseTokenInputProps>(
     },
     ref
   ): JSX.Element => {
+    const format = useCurrencyFormatter();
     const { labelProps, fieldProps } = useLabel({ label, ...props });
 
     const hasLabel = !!label || !!balance;
 
     const bottomAdornment = valueUSD !== undefined && (
-      <StyledUSDAdornment $isDisabled={isDisabled}>{formatUSD(valueUSD, { compact: true })}</StyledUSDAdornment>
+      <StyledUSDAdornment $isDisabled={isDisabled}>{format(valueUSD)}</StyledUSDAdornment>
     );
 
     return (

packages/components/src/TokenInput/TokenListItem.tsx

@@ -1,4 +1,5 @@
-import { formatUSD } from '../utils/format';
+import { useCurrencyFormatter } from '@interlay/hooks';
+
 import { CoinIcon } from '../CoinIcon';
 import { Flex } from '../Flex';
 import { useSelectModalContext } from '../Select/SelectModalContext';
@@ -11,6 +12,7 @@ type TokenListItemProps = { isDisabled?: boolean } & TokenData;
 
 const TokenListItem = ({ balance, balanceUSD, value, tickers, isDisabled }: TokenListItemProps): JSX.Element => {
   const isSelected = useSelectModalContext().selectedItem?.key === value && !isDisabled;
+  const format = useCurrencyFormatter();
 
   return (
     <>
@@ -21,7 +23,7 @@ const TokenListItem = ({ balance, balanceUSD, value, tickers, isDisabled }: Toke
       <Flex alignItems='flex-end' direction='column' flex='0' gap='spacing2'>
         <StyledListItemLabel $isSelected={isSelected}>{balance}</StyledListItemLabel>
         <Span color='tertiary' size='s'>
-          {formatUSD(balanceUSD, { compact: true })}
+          {format(balanceUSD)}
         </Span>
       </Flex>
     </>

packages/hooks/package.json

@@ -36,7 +36,10 @@
   },
   "dependencies": {
     "@interlay/theme": "workspace:*",
+    "@internationalized/number": "^3.2.1",
+    "@react-aria/i18n": "^3.8.1",
     "@react-aria/utils": "^3.19.0",
+    "decimal.js-light": "^2.5.1",
     "formik": "^2.4.5",
     "react-use": "^17.4.0"
   },

packages/hooks/src/index.ts

@@ -3,3 +3,4 @@ export { useStyleProps } from './use-style-props';
 export * from './use-form';
 export type { MarginProps, StyleProps, UseStylePropsResult, StyledMarginProps } from './use-style-props';
 export { useDOMRef } from './use-dom-ref';
+export * from './use-currency-formatter';

packages/hooks/src/use-currency-formatter/__tests__/use-currency-formatter.test.tsx

@@ -0,0 +1,86 @@
+import { renderHook } from '@testing-library/react';
+
+import { useCurrencyFormatter } from '../use-currency-formatter';
+
+describe('useCurrencyFormatter', () => {
+  describe('simple integer', () => {
+    it('should format 0 to $0.00', () => {
+      const { result } = renderHook(() => useCurrencyFormatter());
+
+      expect(result.current(0)).toBe('$0.00');
+    });
+
+    it('should format 1 to $1.00', () => {
+      const { result } = renderHook(() => useCurrencyFormatter());
+
+      expect(result.current(1)).toBe('$1.00');
+    });
+
+    it('should format 1.0001 to $1.00', () => {
+      const { result } = renderHook(() => useCurrencyFormatter());
+
+      expect(result.current(1.0001)).toBe('$1.00');
+    });
+
+    it('should format 1.0001 to $1.00', () => {
+      const { result } = renderHook(() => useCurrencyFormatter());
+
+      expect(result.current(1.0001)).toBe('$1.00');
+    });
+  });
+
+  describe('decimals', () => {
+    it('should format 0.1 to $0.100', () => {
+      const { result } = renderHook(() => useCurrencyFormatter());
+
+      expect(result.current(0.1)).toBe('$0.100');
+    });
+
+    it('should format 0.0001 to $0.0001', () => {
+      const { result } = renderHook(() => useCurrencyFormatter());
+
+      expect(result.current(0.0001)).toBe('$0.0001');
+    });
+
+    it('should format 0.0000000009 to $0.0000000009', () => {
+      const { result } = renderHook(() => useCurrencyFormatter());
+
+      expect(result.current(0.0000000009)).toBe('$0.0000000009');
+    });
+
+    it('should format 0.00000000009 to $0.00000000009', () => {
+      const { result } = renderHook(() => useCurrencyFormatter());
+
+      expect(result.current(0.00000000009)).toBe('<$0.00000001');
+    });
+  });
+
+  describe('big integer', () => {
+    it('should format 100000 to $100,000.00', () => {
+      const { result } = renderHook(() => useCurrencyFormatter());
+
+      expect(result.current(100000)).toBe('$100,000.00');
+    });
+
+    it('should format 1000000 to $1M', () => {
+      const { result } = renderHook(() => useCurrencyFormatter());
+
+      expect(result.current(1000000)).toBe('$1M');
+    });
+  });
+
+  it('should not compact', () => {
+    const { result } = renderHook(() => useCurrencyFormatter({ compact: false }));
+
+    expect(result.current(0)).toBe('$0.00');
+    expect(result.current(0.001)).toBe('$0.00');
+    expect(result.current(1)).toBe('$1.00');
+    expect(result.current(1000000)).toBe('$1,000,000.00');
+  });
+
+  it('should format EUR', () => {
+    const { result } = renderHook(() => useCurrencyFormatter({ currency: 'EUR' }));
+
+    expect(result.current(0)).toBe('€0.00');
+  });
+});

packages/hooks/src/use-currency-formatter/index.tsx

@@ -0,0 +1,2 @@
+export { useCurrencyFormatter } from './use-currency-formatter';
+export type { UseCurrencyFormatterProps } from './use-currency-formatter';

packages/hooks/src/use-currency-formatter/stories/use-currency-formatter.stories.tsx

@@ -0,0 +1,133 @@
+import { StoryObj } from '@storybook/react';
+
+import { useCurrencyFormatter } from '../use-currency-formatter';
+
+const Render = () => {
+  const format = useCurrencyFormatter();
+
+  return (
+    <div style={{ display: 'flex', gap: 32 }}>
+      <div>
+        <h1>Digits</h1>
+        <span>
+          <strong>1 digit:</strong> {format(1.6801231)}
+        </span>
+        <br />
+        <span>
+          <strong>2 digit:</strong> {format(10.0001231)}
+        </span>
+        <br />
+        <span>
+          <strong>3 digit:</strong> {format(100.0001231)}
+        </span>
+        <br />
+        <span>
+          <strong>4 digit:</strong> {format(1000.0001231)}
+        </span>
+        <br />
+        <span>
+          <strong>5 digit:</strong> {format(10000.0001231)}
+        </span>
+        <br />
+        <span>
+          <strong>6 digit:</strong> {format(100000.0001231)}
+        </span>
+        <br />
+        <span>
+          <strong>7 digit:</strong> {format(1000000.0001231)}
+        </span>
+        <br />
+        <span>
+          <strong>8 digit:</strong> {format(10000000.0001231)}
+        </span>
+        <br />
+        <span>
+          <strong>9 digit:</strong> {format(100000000.0001231)}
+        </span>
+        <br />
+        <span>
+          <strong>10 digit:</strong> {format(1000000000.0001231)}
+        </span>
+        <br />
+        <span>
+          <strong>11 digit:</strong> {format(10000000000.0001231)}
+        </span>
+        <br />
+        <span>
+          <strong>12 digit:</strong> {format(100000000000.0001231)}
+        </span>
+        <br />
+        <span>
+          <strong>13 digit:</strong> {format(1000000000000.0001231)}
+        </span>
+      </div>
+      <div>
+        <h1>Decimals</h1>
+        <span>
+          <strong>1 decimal:</strong> {format(0.1)}
+        </span>
+        <br />
+        <span>
+          <strong>2 decimal:</strong> {format(0.01)}
+        </span>
+        <br />
+        <span>
+          <strong>3 decimal:</strong> {format(0.001)}
+        </span>
+        <br />
+        <span>
+          <strong>4 decimal:</strong> {format(0.0001)}
+        </span>
+        <br />
+        <span>
+          <strong>5 decimal:</strong> {format(0.00001)}
+        </span>
+        <br />
+        <span>
+          <strong>6 decimal:</strong> {format(0.000001)}
+        </span>
+        <br />
+        <span>
+          <strong>7 decimal:</strong> {format(0.0000001)}
+        </span>
+        <br />
+        <span>
+          <strong>8 decimal:</strong> {format(0.00000001)}
+        </span>
+        <br />
+        <span>
+          <strong>9 decimal:</strong> {format(0.000000001)}
+        </span>
+        <br />
+        <span>
+          <strong>10 decimal:</strong> {format(0.0000000001)}
+        </span>
+        <br />
+        <span>
+          <strong>11 decimal:</strong> {format(0.00000000001)}
+        </span>
+        <br />
+        <span>
+          <strong>12 decimal:</strong> {format(0.000000000001)}
+        </span>
+        <br />
+        <span>
+          <strong>13 decimal:</strong> {format(0.0000000000001)}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default {
+  title: 'Hooks',
+  parameters: {
+    layout: 'centered'
+  },
+  args: {
+    style: { minWidth: 300 }
+  },
+  render: Render
+};
+
+export const UseCurrencyFormatter: StoryObj = {};