SD-16: Add token list component

Author: rAskVAL

.storybook/preview.tsx

@@ -1,5 +1,7 @@
 import { Preview } from '@storybook/react';
 
+import Providers from '../src/domains/common/providers/Providers';
+
 // TODO: Add after chromatic setup
 // MotionGlobalConfig.skipAnimations = isChromatic();
 
@@ -30,6 +32,9 @@ const preview = {
       },
     },
   },
+  decorators: [
+    Story => <Providers><Story /></Providers>,
+  ],
 } satisfies Preview;
 
 export default preview;

eslint.config.js

@@ -140,7 +140,7 @@ export default tseslint.config(
           },
         ],
         patterns: [{
-          regex: 'src/(?!(domains/.*/(components|utils|assets|hooks|providers)/.*))',
+          regex: 'src/(?!(domains/.*/(components|utils|assets|hooks|providers|types|styles)/.*))',
           message: 'Organize modules in predefined groups under domains.',
         }, {
           /*

package-lock.json

@@ -18,12 +18,15 @@
     "generate-icons": "tsx scripts/generateIcons.ts"
   },
   "dependencies": {
-    "motion": "^12.4.10",
+    "@types/styled-components": "^5.1.34",
+    "bignumber.js": "^9.1.2",
+    "motion": "^12.4.12",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "styled-components": "^6.1.15",
     "styled-reset": "^4.5.2",
     "usehooks-ts": "^3.1.1",
+    "utility-types": "^3.11.0",
     "vite-plugin-svgr": "^4.3.0",
     "zustand": "^5.0.3"
   },

package.json

@@ -0,0 +1,68 @@
+import { useMotionValueEvent, useScroll } from 'motion/react';
+import { ReactNode, useEffect, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+
+type Props = {
+  children: ReactNode,
+  className?: string,
+};
+
+const ScrollShadow = ({ children, className }: Props) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const { scrollY } = useScroll({ container: ref });
+  const [isScrolledTop, setIsScrolledTop] = useState(false);
+  const [isScrolledBottom, setIsScrolledBottom] = useState(false);
+
+  const updateScrollState = () => {
+    const el = ref.current;
+    if (!el) return;
+
+    const { clientHeight, scrollHeight, scrollTop } = el;
+
+    setIsScrolledTop(scrollTop > 0);
+    setIsScrolledBottom(scrollHeight > clientHeight && scrollTop < (scrollHeight - clientHeight));
+  };
+
+  useEffect(() => {
+    updateScrollState();
+  }, []);
+
+  useMotionValueEvent(scrollY, 'change', updateScrollState);
+
+  return (
+    <Container
+      $isScrolledTop={isScrolledTop}
+      $isScrolledBottom={isScrolledBottom}
+      ref={ref}
+      className={className}
+    >
+      {children}
+    </Container>
+  );
+};
+
+export default ScrollShadow;
+
+const Container = styled.div<{ $isScrolledTop: boolean, $isScrolledBottom: boolean }>`
+  width: min(100vw, 440px);
+  overflow-y: auto;
+
+  mask-composite: intersect;
+
+  ${({ $isScrolledTop, $isScrolledBottom }) => {
+    if ($isScrolledTop && $isScrolledBottom) {
+      return css`
+        mask-image: linear-gradient(to bottom, transparent, black 40px),
+        linear-gradient(to top, transparent, black 40px);
+      `;
+    } else if ($isScrolledTop) {
+      return css`
+        mask-image: linear-gradient(to bottom, transparent, black 40px);
+      `;
+    } else if ($isScrolledBottom) {
+      return css`
+        mask-image: linear-gradient(to top, transparent, black 40px);
+      `;
+    }
+  }}
+`;

src/domains/common/components/ScrollShadow.tsx

@@ -0,0 +1,55 @@
+import type { ComponentProps } from 'react';
+import styled from 'styled-components';
+
+import CIcon, { IconName } from 'src/domains/common/components/CIcon';
+import { vars } from 'src/domains/common/styles/utils';
+
+type Size = number | `${string}%` | `${string}px`;
+
+type Props = {
+  icon?: IconName,
+  size?: Size,
+  iconProps?: Omit<ComponentProps<typeof CIcon>, 'icon'>,
+};
+
+const TokenIcon = ({
+  icon,
+  size,
+  iconProps,
+}: Props) => {
+
+  return (
+    <Container $size={size}>
+      {icon && (
+        <CIcon
+          icon={icon}
+          color={vars('--color-neutral-foreground-inverted-1-rest')}
+          size="100%"
+          {...iconProps}
+        />
+      )}
+    </Container>
+  );
+};
+
+export default TokenIcon;
+
+const getSize = ({ $size = 16 }: { $size?: Size }) =>
+  typeof $size === 'number' ? `${$size}px` : $size;
+
+const Container = styled.div<{
+  $withBorder?: boolean,
+  $size?: Size,
+}>`
+  display: flex;
+
+  align-items: center;
+
+  max-width: ${getSize};
+  max-height: ${getSize};
+  min-height: ${getSize};
+  min-width: ${getSize};
+
+  background-color: ${vars('--color-neutral-background-inverted-rest')};
+  border-radius: ${vars('--border-radius-circular')};
+`;

src/domains/common/components/TokenIcon.tsx

@@ -0,0 +1,15 @@
+import { IconName } from 'src/domains/common/components/CIcon';
+
+export type Token = {
+  chain: 'alephEvm',
+  name: string | undefined,
+  symbol: string | undefined,
+  address: string,
+  decimals: number | undefined,
+  icon: IconName | undefined,
+  balance?: {
+    atomic: bigint | string,
+    usd?: number,
+  },
+  usdPrice?: number,
+};

src/domains/common/types/types.ts

@@ -0,0 +1,68 @@
+import BigNumber from 'bignumber.js';
+
+import getBalanceWithDecimals from './getBalanceWithDecimals';
+
+const formatConfig = {
+  decimalSeparator: '.',
+  groupSeparator: ',',
+  groupSize: 3,
+  secondaryGroupSize: 0,
+};
+
+type Options = Partial<{
+  formatDecimals: number,
+  prefix: string,
+  withPlusSign: boolean,
+}>;
+
+const defaultOptions = {
+  formatDecimals: 2,
+  prefix: '',
+  withPlusSign: false,
+} satisfies Options;
+
+type Params = {
+  balance: bigint | BigNumber | string | number,
+  decimals: number,
+  options?: Options,
+};
+
+/**
+ * Get an easily readable format of the balance, ready to be displayed.
+ */
+export default ({ balance, decimals, options }: Params) => {
+  const { formatDecimals, prefix, withPlusSign } = {
+    ...defaultOptions,
+    ...options,
+  };
+  const bigNumberBalance = BigNumber(balance.toString());
+  const isNegative = bigNumberBalance.isNegative();
+  const plusOrMinus = isNegative ? '-' : withPlusSign ? '+' : '';
+  const signWithPrefix = `${plusOrMinus}${prefix}`;
+
+  if (decimals === 0) {
+    const newBalance = bigNumberBalance
+      .dp(formatDecimals, BigNumber.ROUND_DOWN) // ROUND_DOWN rounds both positive and negative numbers towards zero
+      .abs()
+      .toFormat(formatConfig);
+    return `${signWithPrefix}${newBalance}`;
+  }
+
+  const newBalance = (
+    getBalanceWithDecimals(bigNumberBalance, decimals)
+      .dp(formatDecimals, BigNumber.ROUND_DOWN)
+      .abs()
+      .toFormat(formatConfig)
+  );
+
+  const isVerySmall = Number(newBalance) === 0;
+  const isZero = bigNumberBalance.isZero();
+
+  if (isZero) return `${prefix}0.00`;
+
+  if (isVerySmall) {
+    return `${plusOrMinus ? `${plusOrMinus} ` : ''}<${prefix}0.${'1'.padStart(formatDecimals, '0')}`;
+  }
+
+  return `${signWithPrefix}${newBalance}`;
+};

src/domains/common/utils/formatBalance.ts

@@ -0,0 +1,9 @@
+import BigNumber from 'bignumber.js';
+
+export default (balance: BigNumber | bigint, decimals: number) => {
+  const bigNumberBalance = BigNumber.isBigNumber(balance) ? balance : BigNumber(balance.toString());
+
+  if (decimals === 0) return bigNumberBalance;
+
+  return bigNumberBalance.shiftedBy(decimals * -1);
+};

src/domains/common/utils/getBalanceWithDecimals.ts

@@ -0,0 +1,3 @@
+import { isNullish } from 'utility-types';
+
+export default (val: unknown): val is NonNullable<unknown> => !isNullish(val);