#31 Bump dependencies for packages/ui

apps/staking/.storybook/main.js

@@ -44,7 +44,8 @@ module.exports = {
                           return (
                               /node_modules/.test(filename) &&
                               !/@chakra-ui/.test(filename) &&
-                              !/@zag-js/.test(filename)
+                              !/@zag-js/.test(filename) &&
+                              !/ethers/.test(filename)
                           );
                       },
                   }
@@ -75,4 +76,8 @@ module.exports = {
             },
         };
     },
+    babel: async (options) => ({
+        ...options,
+        plugins: [['@babel/plugin-proposal-class-properties', { loose: true }]],
+    }),
 };

apps/staking/__tests__/components/stake/PoolSetting.test.tsx

@@ -30,7 +30,6 @@ import {
     buildUseStakingPoolFactoryReturn,
     buildUseStakingPoolReturn,
 } from '../pools/mocks';
-import { StakingPool } from '../../../src/graphql/models';
 
 const pool = '0x51937974a767da96dc1c3f9a7b07742e256f0ffe';
 const account = '0x907eA0e65Ecf3af503007B382E1280Aeb46104ad';

apps/staking/package.json

@@ -65,6 +65,7 @@
     "devDependencies": {
         "@babel/core": "^7.15.5",
         "@babel/plugin-proposal-private-methods": "^7.18.6",
+        "@babel/plugin-proposal-class-properties": "7.18.6",
         "@storybook/addon-actions": "^6.4.10",
         "@storybook/addon-essentials": "^6.4.10",
         "@storybook/addon-links": "^6.4.10",

apps/staking/src/components/CTSIText.tsx

@@ -10,7 +10,142 @@
 // PARTICULAR PURPOSE. See the GNU General Public License for more details.
 
 import React, { FC } from 'react';
-import { BigNumberText, BigNumberTextProps } from '@explorer/ui';
+import { Flex, FlexProps, HStack, SystemProps, Text } from '@chakra-ui/react';
+import { BigNumber, BigNumberish } from 'ethers';
+import { formatUnits } from 'ethers/lib/utils';
+import { Icon } from '@chakra-ui/icons';
+import { IconType } from 'react-icons';
+import humanizeDuration from 'humanize-duration';
+
+type Unit = 'eth' | 'ctsi' | 'percent' | 'usd' | 'duration' | 'number';
+type Countdown = {
+    timeLeft: String;
+    timeLabel: String;
+};
+
+const formatDuration = (ms: number): string[] => {
+    return humanizeDuration(ms, {
+        round: true,
+        largest: 1,
+    }).split(' ');
+};
+
+const formatPercentNumber = (
+    value: number,
+    options?: Intl.NumberFormatOptions
+) => {
+    const formatter = new Intl.NumberFormat('en-US', options);
+    return formatter.format(value * 100);
+};
+
+const formatPercent = (
+    value: BigNumberish,
+    options?: Intl.NumberFormatOptions
+) => {
+    if (typeof value === 'number') {
+        return formatPercentNumber(value, options);
+    } else {
+        return formatPercentNumber(parseFloat(value.toString()), options);
+    }
+};
+
+const format = (
+    value: BigNumberish,
+    unit: Unit,
+    options: Intl.NumberFormatOptions
+): string[] => {
+    const numberFormat = new Intl.NumberFormat('en-US', options);
+    switch (unit) {
+        case 'eth':
+            return [
+                numberFormat.format(parseFloat(formatUnits(value, 18))),
+                'ETH',
+            ];
+        case 'ctsi':
+            return [
+                numberFormat.format(parseFloat(formatUnits(value, 18))),
+                'CTSI',
+            ];
+        case 'percent':
+            return [formatPercent(value, options), '%'];
+        case 'usd':
+            return [numberFormat.format(parseFloat(value.toString())), 'USD'];
+        case 'duration':
+            return formatDuration(parseFloat(value.toString()));
+        default:
+            return [numberFormat.format(BigNumber.from(value).toNumber()), ''];
+    }
+};
+
+export interface BigNumberTextProps extends FlexProps {
+    icon?: IconType;
+    value: BigNumberish;
+    nullLabel?: string;
+    direction?: SystemProps['flexDirection'];
+    fontSize?: SystemProps['fontSize'];
+    unit?: Unit;
+    options?: Intl.NumberFormatOptions;
+    countdown?: Countdown;
+}
+
+const defaultOptions: Intl.NumberFormatOptions = {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 4,
+};
+
+export const BigNumberText: FC<BigNumberTextProps> = (props) => {
+    const {
+        children,
+        value,
+        nullLabel = '-',
+        direction = 'column',
+        fontSize = '3xl',
+        icon,
+        unit = 'number',
+        options = defaultOptions,
+        countdown,
+        ...flexProps
+    } = props;
+    const [valueLabel, unitLabel] = value
+        ? format(value, unit, options)
+        : [nullLabel, ''];
+
+    return (
+        <Flex
+            direction={direction}
+            align="baseline"
+            justify="space-between"
+            {...flexProps}
+        >
+            <HStack>
+                {icon && <Icon as={icon} color={props.color} />}
+                {children}
+            </HStack>
+            <HStack align="baseline">
+                <>
+                    <Text fontSize={fontSize} lineHeight={1}>
+                        {valueLabel}
+                    </Text>
+                    {unit && unitLabel && (
+                        <Text
+                            fontSize="sm"
+                            data-testid="big-number-text-unit-label"
+                        >
+                            {unitLabel}
+                        </Text>
+                    )}
+                </>
+            </HStack>
+            {countdown && countdown.timeLeft && (
+                <HStack>
+                    <Text fontSize="sm">
+                        {countdown.timeLabel} {countdown.timeLeft}
+                    </Text>
+                </HStack>
+            )}
+        </Flex>
+    );
+};
 
 const CTSIText: FC<BigNumberTextProps> = (props) => {
     return <BigNumberText unit="ctsi" {...props} />;

apps/staking/src/components/node/AvailableNode.tsx

@@ -26,7 +26,7 @@ import {
 } from '@chakra-ui/react';
 import { BigNumber, BigNumberish, ethers } from 'ethers';
 import { useForm } from 'react-hook-form';
-import { BigNumberText } from '@explorer/ui';
+import { BigNumberText } from '../CTSIText';
 
 type AvailableNodeProps = {
     balance: BigNumber; // user ETH balance

apps/staking/src/components/node/OwnedNode.tsx

@@ -35,10 +35,11 @@ import {
 } from '@chakra-ui/react';
 import { FC, useState } from 'react';
 
-import { AddressText, BigNumberText } from '@explorer/ui';
+import { AddressText } from '@explorer/ui';
 import { BigNumber, BigNumberish, ethers } from 'ethers';
 import { useForm } from 'react-hook-form';
 import { FaCoins, FaNetworkWired } from 'react-icons/fa';
+import { BigNumberText } from '../CTSIText';
 
 type OwnedNodeProps = {
     account: string; // metamask account (or pool address)

apps/staking/src/components/node/PendingNode.tsx

@@ -10,10 +10,11 @@
 // PARTICULAR PURPOSE. See the GNU General Public License for more details.
 
 import { Button, HStack, Stack, Text, VStack } from '@chakra-ui/react';
-import { AddressText, BigNumberText } from '@explorer/ui';
+import { AddressText } from '@explorer/ui';
 import { BigNumber } from 'ethers';
 import { FC } from 'react';
 import { FaCoins, FaNetworkWired } from 'react-icons/fa';
+import { BigNumberText } from '../CTSIText';
 
 type PendingNodeProps = {
     account: string; // metamask account (or pool)

apps/staking/src/components/node/RetiredNode.tsx

@@ -17,10 +17,11 @@ import {
     Text,
     VStack,
 } from '@chakra-ui/react';
-import { AddressText, BigNumberText } from '@explorer/ui';
+import { AddressText } from '@explorer/ui';
 import { BigNumber } from 'ethers';
 import { FC } from 'react';
 import { FaCoins, FaNetworkWired } from 'react-icons/fa';
+import { BigNumberText } from '../CTSIText';
 
 type RetiredNodeProps = {
     chainId: number;

apps/staking/src/components/stake/components/PoolsOverview.tsx

@@ -1,16 +1,10 @@
 import { Icon } from '@chakra-ui/icons';
 import { HStack, Stack, Text, Tooltip } from '@chakra-ui/react';
-import {
-    Banner,
-    BigNumberText,
-    MyPoolsIcon,
-    MyStakeIcon,
-    PoolsIcon,
-} from '@explorer/ui';
+import { Banner, MyPoolsIcon, MyStakeIcon, PoolsIcon } from '@explorer/ui';
 import { BigNumber } from 'ethers';
 import { FC } from 'react';
 import { Summary } from '../../../graphql/models';
-import CTSIText from '../../CTSIText';
+import CTSIText, { BigNumberText } from '../../CTSIText';
 
 export interface PoolsOverviewProps {
     balance: BigNumber;

packages/ui/.storybook/main.js

@@ -22,11 +22,9 @@ module.exports = {
         '../src/stories/**/*.stories.@(js|jsx|ts|tsx)',
     ],
     addons: [
-        'storybook-addon-apollo-client',
         'storybook-addon-performance/register',
         '@storybook/addon-links',
         '@storybook/addon-essentials',
-        'storybook-addon-next-router',
     ],
     webpackFinal: async (config) => {
         config.module.rules = config.module.rules.map((r) =>
@@ -37,7 +35,8 @@ module.exports = {
                           return (
                               /node_modules/.test(filename) &&
                               !/@chakra-ui/.test(filename) &&
-                              !/@zag-js/.test(filename)
+                              !/@zag-js/.test(filename) &&
+                              !/ethers/.test(filename)
                           );
                       },
                   }
@@ -68,4 +67,8 @@ module.exports = {
             },
         };
     },
+    babel: async (options) => ({
+        ...options,
+        plugins: [['@babel/plugin-proposal-class-properties', { loose: true }]],
+    }),
 };

packages/ui/.storybook/preview.tsx

@@ -9,17 +9,13 @@
 // WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
 // PARTICULAR PURPOSE. See the GNU General Public License for more details.
 
-import { MockedProvider } from '@apollo/client/testing';
-import { ChakraProvider } from '@chakra-ui/react';
+import { useEffect } from 'react';
+import { ChakraProvider, useColorMode } from '@chakra-ui/react';
 import { Fonts } from '@explorer/ui';
 import '@fontsource/rubik';
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
-import { StoryContext } from '@storybook/react';
-import { RouterContext } from 'next/dist/shared/lib/router-context';
-import React from 'react';
 import { withPerformance } from 'storybook-addon-performance';
 import theme from '../src/styles/theme';
-import withColorMode from './withColorMode';
 
 export const parameters = {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -29,15 +25,9 @@ export const parameters = {
             date: /Date$/,
         },
     },
-    nextRouter: {
-        Provider: RouterContext.Provider,
-    },
     viewport: {
         viewports: MINIMAL_VIEWPORTS,
     },
-    apolloClient: {
-        MockedProvider,
-    },
 };
 
 export const globalTypes = {
@@ -52,7 +42,19 @@ export const globalTypes = {
     },
 };
 
-const withChakra = (Story: Function, context: StoryContext) => {
+const withColorMode = (Story: Function, { globals: { theme = 'light' } }) => {
+    const { colorMode, setColorMode } = useColorMode();
+
+    useEffect(() => {
+        if (colorMode !== theme) {
+            setColorMode(theme);
+        }
+    }, [theme, colorMode]);
+
+    return <Story />;
+};
+
+const withChakra = (Story: Function) => {
     return (
         <ChakraProvider resetCSS theme={theme}>
             <Fonts />