@rango-dev/ui 0.0.0-experimental-936229e8-20251208

package/src/components/Select/Select.styles.ts

@@ -0,0 +1,96 @@
+import * as Select from '@radix-ui/react-select';
+
+import { darkTheme, styled } from '../../theme.js';
+
+export const EXPANDABLE_QUOTE_TRANSITION_DURATION = 300;
+
+export const SelectTrigger = styled(Select.Trigger, {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  cursor: 'pointer',
+  outline: 0,
+  whiteSpace: 'nowrap',
+  width: '100%',
+  '& svg': {
+    transition: `all ${EXPANDABLE_QUOTE_TRANSITION_DURATION}ms ease`,
+  },
+  '& ._typography': {
+    whiteSpace: 'nowrap',
+  },
+  variants: {
+    open: {
+      true: {
+        '& svg': {
+          transform: 'rotate(180deg)',
+        },
+      },
+      false: {
+        '& svg': {
+          transform: 'rotate(0)',
+        },
+      },
+    },
+    variant: {
+      filled: {
+        border: 0,
+        borderRadius: '$sm',
+        padding: '$5 $10',
+        backgroundColor: '$neutral300',
+        [`.${darkTheme} &`]: {
+          backgroundColor: '$neutral400',
+        },
+        '&:hover': {
+          backgroundColor: '$secondary100',
+          [`.${darkTheme} &`]: {
+            backgroundColor: '$neutral',
+          },
+        },
+      },
+      outlined: {
+        backgroundColor: 'transparent',
+        padding: '$10',
+        border: '1px solid $neutral300',
+        borderRadius: '$xm',
+        '&:hover': {
+          borderColor: '$secondary200',
+          '& svg': {
+            color: '$secondary500',
+          },
+        },
+      },
+    },
+  },
+});
+
+export const SelectContent = styled(Select.Content, {
+  width: 'var(--radix-select-trigger-width)',
+  maxHeight: 'var(--radix-select-content-available-height)',
+  overflowY: 'auto',
+  borderRadius: '$sm',
+  boxShadow: '-5px 5px 10px 0px rgba(86, 86, 86, 0.10)',
+  backgroundColor: '$background',
+});
+
+export const SelectItem = styled(Select.Item, {
+  padding: '$10',
+  listStyleType: 'none',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  cursor: 'pointer',
+  '&:focus': {
+    outline: 'none',
+  },
+
+  '&:hover': {
+    backgroundColor: '$secondary100',
+    '& ._text': {
+      color: '$secondary500',
+    },
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral',
+      color: '$secondary500',
+    },
+  },
+});

package/src/components/Select/Select.tsx

@@ -0,0 +1,99 @@
+import type { SelectPropTypes } from './Select.types.js';
+
+import * as Select from '@radix-ui/react-select';
+import React, { useEffect, useRef, useState } from 'react';
+
+import { ChevronDownIcon, ChevronUpIcon, DoneIcon } from '../../icons/index.js';
+import { Typography } from '../Typography/index.js';
+
+import { SelectContent, SelectItem, SelectTrigger } from './Select.styles.js';
+
+export function SelectComponent<T extends string>(props: SelectPropTypes<T>) {
+  const [open, setOpen] = useState(false);
+  const selectRef = useRef<HTMLDivElement>(null);
+  const { options, value, container, handleItemClick, variant, id, styles } =
+    props;
+  const handleToggle = () => {
+    setOpen((prev) => !prev);
+  };
+
+  const handleClickOutside = (e: MouseEvent) => {
+    if (selectRef.current && !selectRef.current.contains(e.target as Node)) {
+      setOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+
+  const selectedLabel = options.find((option) => option.value === value)?.label;
+
+  const wrapPortal = (children: React.ReactNode) => {
+    if (container) {
+      return <Select.Portal container={container}>{children}</Select.Portal>;
+    }
+
+    return <>{children}</>;
+  };
+
+  return (
+    <div ref={selectRef}>
+      <Select.Root value={value} open={open}>
+        <SelectTrigger
+          id={id}
+          variant={variant}
+          onKeyDown={(event) => event.key === 'Enter' && handleToggle()}
+          onClick={handleToggle}
+          open={open}
+          aria-label={selectedLabel}
+          css={styles?.trigger}>
+          <Select.Value>
+            <Typography variant="body" size="small">
+              {selectedLabel}
+            </Typography>
+          </Select.Value>
+
+          <Select.Icon className="SelectIcon">
+            <ChevronDownIcon size={12} color="black" />
+          </Select.Icon>
+        </SelectTrigger>
+        {wrapPortal(
+          <SelectContent position="popper" sideOffset={5}>
+            <Select.ScrollUpButton className="SelectScrollButton">
+              <ChevronUpIcon />
+            </Select.ScrollUpButton>
+            <Select.Viewport className="SelectViewport">
+              <Select.Group>
+                {options.map((option) => (
+                  <SelectItem
+                    onClick={() => {
+                      handleItemClick?.(option);
+                      handleToggle();
+                    }}
+                    key={option.value}
+                    value={option.value}>
+                    <Select.ItemText>
+                      <Typography variant="body" size="small" className="_text">
+                        {option.label}
+                      </Typography>
+                    </Select.ItemText>
+                    {option.value === value && (
+                      <DoneIcon size={14} color="secondary" />
+                    )}
+                  </SelectItem>
+                ))}
+              </Select.Group>
+            </Select.Viewport>
+            <Select.ScrollDownButton className="SelectScrollButton">
+              <ChevronDownIcon />
+            </Select.ScrollDownButton>
+          </SelectContent>
+        )}
+      </Select.Root>
+    </div>
+  );
+}

package/src/components/Select/Select.types.ts

@@ -0,0 +1,20 @@
+import type * as Stitches from '@stitches/react';
+
+type Item<T> = {
+  value: T;
+  label: string;
+};
+
+type Variant = 'filled' | 'outlined';
+
+export type SelectPropTypes<T> = {
+  options: Item<T>[];
+  handleItemClick?: (item: Item<T>) => void;
+  value: string;
+  container?: HTMLElement;
+  id: string;
+  variant: Variant;
+  styles?: {
+    trigger?: Stitches.CSS;
+  };
+};

package/src/components/Select/index.ts

@@ -0,0 +1,2 @@
+export { SelectComponent as Select } from './Select.js';
+export type { SelectPropTypes } from './Select.types.js';

package/src/components/SelectableCategoryList/SelectableCategoryList.helpers.ts

@@ -0,0 +1,62 @@
+import { type BlockchainMeta, TransactionType } from 'rango-types';
+
+import {
+  CosmosCategoryIcon,
+  EvmCategoryIcon,
+  OtherCategoryIcon,
+  UtxoCategoryIcon,
+} from '../../icons/index.js';
+
+import { BlockchainCategories } from './SelectableCategoryList.types.js';
+
+export const blockchainCategoryIcons = {
+  [BlockchainCategories.EVM]: EvmCategoryIcon,
+  [BlockchainCategories.COSMOS]: CosmosCategoryIcon,
+  [BlockchainCategories.UTXO]: UtxoCategoryIcon,
+  [BlockchainCategories.OTHER]: OtherCategoryIcon,
+};
+
+export const blockchainCategoryLabel = {
+  [BlockchainCategories.ALL]: 'All',
+  [BlockchainCategories.EVM]: 'EVM',
+  [BlockchainCategories.COSMOS]: 'Cosmos',
+  [BlockchainCategories.UTXO]: 'UTXO',
+  [BlockchainCategories.OTHER]: 'Other',
+};
+
+const filterByType = (blockchain: BlockchainMeta, type: string): boolean => {
+  switch (type) {
+    case BlockchainCategories.ALL:
+      return true;
+    case BlockchainCategories.UTXO:
+      return blockchain.type === TransactionType.TRANSFER;
+    case BlockchainCategories.OTHER:
+      return (
+        blockchain.type !== TransactionType.TRANSFER &&
+        blockchain.type !== TransactionType.COSMOS &&
+        blockchain.type !== TransactionType.EVM
+      );
+    default:
+      return blockchain.type === type;
+  }
+};
+
+export const hasAnyCategory = (
+  list: BlockchainMeta[],
+  blockchainType: string
+) => list.some((blockchain) => filterByType(blockchain, blockchainType));
+
+export const getCategoriesCount = (list: BlockchainMeta[]) => {
+  const categoriesToCheck = Object.values(BlockchainCategories).filter(
+    (category) => category !== BlockchainCategories.ALL
+  );
+
+  const categoriesCount = categoriesToCheck.reduce((count, category) => {
+    const isCategoryPresent = list.some((blockchain) =>
+      filterByType(blockchain, category)
+    );
+    return count + (isCategoryPresent ? 1 : 0);
+  }, 0);
+
+  return categoriesCount;
+};

package/src/components/SelectableCategoryList/SelectableCategoryList.styles.ts

@@ -0,0 +1,21 @@
+import { styled } from '../../theme.js';
+
+export const Container = styled('div', {
+  display: 'grid',
+  gap: '$10',
+  gridTemplateColumns: 'auto 1fr 1fr 1fr 1fr',
+});
+
+export const ImageContent = styled('div', {
+  display: 'flex',
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'center',
+  paddingTop: '$10',
+});
+export const FirstImage = styled('img', {
+  position: 'absolute',
+  top: -2,
+  width: 15,
+  height: 15,
+});

package/src/components/SelectableCategoryList/SelectableCategoryList.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { SelectableCategoryListPropTypes } from './SelectableCategoryList.types.js';
+
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+import { BlockchainsChip } from '../BlockchainsChip/index.js';
+import { Divider, Skeleton, Typography } from '../index.js';
+
+import {
+  blockchainCategoryIcons,
+  blockchainCategoryLabel,
+  hasAnyCategory,
+} from './SelectableCategoryList.helpers.js';
+import { Container } from './SelectableCategoryList.styles.js';
+import { BlockchainCategories } from './SelectableCategoryList.types.js';
+
+export function SelectableCategoryList(props: SelectableCategoryListPropTypes) {
+  const { setCategory, category, isLoading, blockchains } = props;
+  const categories = Object.keys(
+    BlockchainCategories
+  ) as BlockchainCategories[];
+  return (
+    <Container>
+      {isLoading &&
+        Array.from(Array(5), (_, index) => (
+          <Skeleton
+            key={index}
+            variant="rounded"
+            height={70}
+            width={index === 0 ? 45 : 65}
+          />
+        ))}
+      {!isLoading &&
+        categories.map((blockchainCategory) => {
+          const Logo =
+            blockchainCategory !== BlockchainCategories.ALL
+              ? blockchainCategoryIcons[blockchainCategory]
+              : null;
+
+          const hasBlockchain = hasAnyCategory(blockchains, blockchainCategory);
+
+          return (
+            hasBlockchain && (
+              <BlockchainsChip
+                className={
+                  'widget-selectable-category-list-blockchains-chip-btn'
+                }
+                selected={category === blockchainCategory}
+                key={blockchainCategory}
+                onClick={() => setCategory(blockchainCategory)}>
+                {Logo && (
+                  <>
+                    <Logo size={28} />
+                    <Divider size={12} />
+                  </>
+                )}
+                <Typography
+                  size="xsmall"
+                  variant="body"
+                  color={
+                    blockchainCategory === BlockchainCategories.ALL
+                      ? 'secondary500'
+                      : undefined
+                  }>
+                  {i18n.t({
+                    id: '{blockchainCategory}',
+                    values: {
+                      blockchainCategory:
+                        blockchainCategoryLabel[blockchainCategory],
+                    },
+                  })}
+                </Typography>
+              </BlockchainsChip>
+            )
+          );
+        })}
+    </Container>
+  );
+}

package/src/components/SelectableCategoryList/SelectableCategoryList.types.ts

@@ -0,0 +1,16 @@
+import type { BlockchainMeta } from 'rango-types';
+
+export interface SelectableCategoryListPropTypes {
+  setCategory: (type: string) => void;
+  category: string;
+  blockchains: BlockchainMeta[];
+  isLoading?: boolean;
+}
+
+export enum BlockchainCategories {
+  ALL = 'ALL',
+  EVM = 'EVM',
+  COSMOS = 'COSMOS',
+  UTXO = 'UTXO',
+  OTHER = 'OTHER',
+}

package/src/components/SelectableCategoryList/index.ts

@@ -0,0 +1,4 @@
+export { SelectableCategoryList } from './SelectableCategoryList.js';
+export type { SelectableCategoryListPropTypes } from './SelectableCategoryList.types.js';
+export { BlockchainCategories } from './SelectableCategoryList.types.js';
+export { getCategoriesCount } from './SelectableCategoryList.helpers.js';

package/src/components/Skeleton/Skeleton.styles.ts

@@ -0,0 +1,66 @@
+import { darkTheme, keyframes, styled } from '../../theme.js';
+
+const waveSquares = keyframes({
+  '0%': {
+    backgroundPosition: '-468px 0',
+  },
+  '100%': {
+    backgroundPosition: '468px 0',
+  },
+});
+// #2B3462 -0.15%, rgba(43, 52, 98, 0.20) 99.85%
+export const SkeletonContainer = styled('div', {
+  $$background:
+    'linear-gradient(90deg, $colors$secondary200 20%, rgba(200, 226, 255, 0.20) 70%, $colors$secondary200 100%)',
+  [`.${darkTheme} &`]: {
+    $$background:
+      'linear-gradient(90deg, $colors$secondary550 0%,rgba(43, 52, 98, 0.20) 70%, $colors$secondary550 100%)',
+  },
+  background: '$$background',
+  backgroundSize: '800px 100px',
+  animation: `${waveSquares} 2s infinite ease-out`,
+  variants: {
+    variant: {
+      text: {
+        borderRadius: '$sm',
+      },
+      circular: {
+        borderRadius: '$lg',
+      },
+      rectangular: {},
+      rounded: {
+        borderRadius: '$sm',
+      },
+    },
+
+    size: {
+      small: {},
+      medium: {},
+      large: {},
+    },
+  },
+
+  compoundVariants: [
+    {
+      size: 'small',
+      variant: 'text',
+      css: {
+        height: '$8',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'text',
+      css: {
+        height: '$12',
+      },
+    },
+    {
+      size: 'large',
+      variant: 'text',
+      css: {
+        height: '$16',
+      },
+    },
+  ],
+});

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,17 @@
+import type { SkeletonPropTypes } from './Skeleton.types.js';
+
+import React from 'react';
+
+import { SkeletonContainer } from './Skeleton.styles.js';
+
+export function Skeleton(props: SkeletonPropTypes) {
+  const { width = '100%' } = props;
+  const customCss =
+    props.variant !== 'text'
+      ? {
+          width,
+          height: props.height,
+        }
+      : { width };
+  return <SkeletonContainer css={customCss} {...props} />;
+}

package/src/components/Skeleton/Skeleton.types.ts

@@ -0,0 +1,20 @@
+import type { SkeletonContainer } from './Skeleton.styles.js';
+import type { VariantProps } from '@stitches/react';
+
+type BaseProps = VariantProps<typeof SkeletonContainer>;
+type BaseVariants = Exclude<BaseProps['variant'], object>;
+type BaseSizes = Exclude<BaseProps['size'], object>;
+
+type TextVariant = {
+  variant: 'text';
+  size: BaseSizes;
+  width?: number;
+};
+
+type OtherVariant = {
+  variant: Exclude<BaseVariants, 'text'>;
+  width?: number;
+  height: number;
+};
+
+export type SkeletonPropTypes = TextVariant | OtherVariant;

package/src/components/Skeleton/index.ts

@@ -0,0 +1,2 @@
+export { Skeleton } from './Skeleton.js';
+export type { SkeletonPropTypes } from './Skeleton.types.js';

package/src/components/Spinner/Spinner.styles.ts

@@ -0,0 +1,15 @@
+import { keyframes, styled } from '../../theme.js';
+
+const spin = keyframes({
+  '100%': {
+    transform: 'rotate(360deg)',
+  },
+});
+
+export const SpinnerContainer = styled('div', {
+  position: 'relative',
+  animation: `${spin} 1.5s linear infinite`,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,16 @@
+import type { SpinnerPropTypes } from './Spinner.types.js';
+
+import React from 'react';
+
+import { LoadingIcon } from '../../icons/index.js';
+
+import { SpinnerContainer } from './Spinner.styles.js';
+
+export function Spinner(props: SpinnerPropTypes) {
+  const { size, color, css = {} } = props;
+  return (
+    <SpinnerContainer css={css}>
+      <LoadingIcon size={size} color={color} />
+    </SpinnerContainer>
+  );
+}

package/src/components/Spinner/Spinner.types.ts

@@ -0,0 +1,9 @@
+import type { SvgIconProps } from '../SvgIcon/index.js';
+import type * as Stitches from '@stitches/react';
+
+export interface SpinnerPropTypes {
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  size?: 12 | 16 | 20 | 24 | 30;
+  color?: SvgIconProps['color'];
+  css?: Stitches.CSS;
+}

package/src/components/Spinner/index.ts

@@ -0,0 +1,2 @@
+export { Spinner } from './Spinner.js';
+export type { SpinnerPropTypes } from './Spinner.types.js';