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

package/src/components/Button/Ripple.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from 'react';
+
+import { RippleContainer } from './Button.styles.js';
+
+const DURATION = 850;
+
+const useDebouncedRippleCleanUp = (
+  rippleCount: number,
+  duration: number,
+  cleanUpFunction: () => void
+) => {
+  useEffect(() => {
+    let bounce: ReturnType<typeof setTimeout> | null = null;
+    if (rippleCount > 0) {
+      if (bounce) {
+        clearTimeout(bounce);
+      }
+
+      bounce = setTimeout(() => {
+        cleanUpFunction();
+        if (bounce) {
+          clearTimeout(bounce);
+        }
+      }, duration);
+    }
+
+    return () => {
+      if (bounce) {
+        clearTimeout(bounce);
+      }
+    };
+  }, [rippleCount, duration, cleanUpFunction]);
+};
+
+const Ripple = ({ duration = DURATION }: { duration?: number }) => {
+  const [rippleArray, setRippleArray] = useState<
+    { x: number; y: number; size: number }[]
+  >([]);
+
+  useDebouncedRippleCleanUp(rippleArray.length, duration, () => {
+    setRippleArray([]);
+  });
+
+  const addRipple = (event: React.MouseEvent<HTMLDivElement>) => {
+    const rippleContainer = event.currentTarget.getBoundingClientRect();
+    const size =
+      rippleContainer.width > rippleContainer.height
+        ? rippleContainer.width
+        : rippleContainer.height;
+    const x = event.pageX - rippleContainer.x - size / 2;
+    const y = event.pageY - rippleContainer.y - size / 2;
+    const newRipple = {
+      x,
+      y,
+      size,
+    };
+
+    setRippleArray([...rippleArray, newRipple]);
+  };
+
+  return (
+    <RippleContainer onMouseDown={addRipple}>
+      {rippleArray.length > 0 &&
+        rippleArray.map((ripple, index) => {
+          const key = 'span' + index;
+          return (
+            <span
+              key={key}
+              style={{
+                top: ripple.y,
+                left: ripple.x,
+                width: ripple.size,
+                height: ripple.size,
+              }}
+            />
+          );
+        })}
+    </RippleContainer>
+  );
+};
+
+export default Ripple;

package/src/components/Button/index.ts

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

package/src/components/ChainToken/ChainToken.constants.ts

@@ -0,0 +1,13 @@
+import type { ChainTokenPropTypes } from './ChainToken.types.js';
+
+export const tokenChainSizeMap: {
+  [key in ChainTokenPropTypes['size']]: { token: number; chain: number };
+} = {
+  small: { token: 17, chain: 10 },
+  xmedium: { token: 22, chain: 10 },
+  medium: { token: 27, chain: 10 },
+  large: { token: 30, chain: 15 },
+};
+
+export const DEFAULT_TOKEN_IMAGE_SRC =
+  'https://raw.githubusercontent.com/rango-exchange/assets/refs/heads/main/common/unknown-image.png';

package/src/components/ChainToken/ChainToken.styles.ts

@@ -0,0 +1,68 @@
+import { darkTheme, styled } from '../../theme.js';
+import { Image } from '../common/index.js';
+
+export const Container = styled('div', {
+  position: 'relative',
+  display: 'flex',
+  [`& ${Image}`]: { borderRadius: '100%' },
+});
+
+export const ChainImageContainer = styled('div', {
+  position: 'absolute',
+  borderRadius: '100%',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
+  variants: {
+    size: {
+      small: {
+        right: '-3px',
+        bottom: '-3px',
+      },
+      xmedium: {
+        right: '-3px',
+        bottom: '-3px',
+      },
+      medium: {
+        right: '0',
+        bottom: '0',
+      },
+      large: {
+        right: '-5px',
+        bottom: '-5px',
+      },
+    },
+    hasBorder: {
+      true: {
+        $$borderColor: '$colors$secondary250',
+        [`.${darkTheme} &`]: {
+          $$borderColor: '$colors$secondary550',
+        },
+        border: '1px solid $$borderColor',
+      },
+      false: {},
+    },
+  },
+});
+export const TokenImageContainer = styled('div', {
+  borderRadius: '100%',
+  width: '$30',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  variants: {
+    hasBorder: {
+      true: {
+        $$borderColor: '$colors$secondary550',
+        [`.${darkTheme} &`]: {
+          $$borderColor: '$colors$secondary500',
+        },
+        border: '1px solid $$borderColor',
+      },
+      false: {},
+    },
+  },
+});

package/src/components/ChainToken/ChainToken.tsx

@@ -0,0 +1,84 @@
+import type { ChainTokenPropTypes } from './ChainToken.types.js';
+
+import React from 'react';
+
+import { Image } from '../common/index.js';
+import { Skeleton } from '../Skeleton/index.js';
+
+import {
+  DEFAULT_TOKEN_IMAGE_SRC,
+  tokenChainSizeMap,
+} from './ChainToken.constants.js';
+import {
+  ChainImageContainer,
+  Container,
+  TokenImageContainer,
+} from './ChainToken.styles.js';
+
+export const ChainToken: React.FC<ChainTokenPropTypes> = (props) => {
+  const {
+    tokenImage,
+    chainImage,
+    chianImageId,
+    size,
+    useAsPlaceholder,
+    loading,
+  } = props;
+
+  const tokenImageSrc =
+    tokenImage === '' ? DEFAULT_TOKEN_IMAGE_SRC : tokenImage;
+  const chainImageSrc =
+    chainImage === '' ? DEFAULT_TOKEN_IMAGE_SRC : chainImage;
+
+  return (
+    <Container
+      css={
+        loading
+          ? {}
+          : {
+              width: tokenChainSizeMap[size].token,
+              height: tokenChainSizeMap[size].token,
+            }
+      }>
+      {loading ? (
+        <Skeleton
+          variant="circular"
+          height={tokenChainSizeMap[size].token}
+          width={tokenChainSizeMap[size].token}
+        />
+      ) : (
+        <TokenImageContainer hasBorder={!tokenImageSrc}>
+          <Image
+            size={tokenChainSizeMap[size].token}
+            src={tokenImageSrc}
+            type="circular"
+            {...((useAsPlaceholder || !tokenImageSrc) && {
+              useAsPlaceholder: true,
+              backgroundColor: 'transparent',
+            })}
+          />
+        </TokenImageContainer>
+      )}
+      <ChainImageContainer size={size} hasBorder={!chainImageSrc}>
+        {loading ? (
+          <Skeleton
+            variant="circular"
+            height={tokenChainSizeMap[size].chain}
+            width={tokenChainSizeMap[size].chain}
+          />
+        ) : (
+          <Image
+            id={chianImageId}
+            size={tokenChainSizeMap[size].chain}
+            src={chainImageSrc}
+            type="circular"
+            {...((useAsPlaceholder || !chainImageSrc) && {
+              useAsPlaceholder: true,
+              backgroundColor: 'transparent',
+            })}
+          />
+        )}
+      </ChainImageContainer>
+    </Container>
+  );
+};

package/src/components/ChainToken/ChainToken.types.ts

@@ -0,0 +1,14 @@
+import type { ChainImageContainer } from './ChainToken.styles.js';
+import type * as Stitches from '@stitches/react';
+
+type BaseProps = Stitches.VariantProps<typeof ChainImageContainer>;
+type BaseSizes = Exclude<BaseProps['size'], object>;
+
+export type ChainTokenPropTypes = {
+  tokenImage?: string;
+  chainImage?: string;
+  chianImageId?: string;
+  size: NonNullable<BaseSizes>;
+  useAsPlaceholder?: boolean;
+  loading?: boolean;
+};

package/src/components/ChainToken/index.ts

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

package/src/components/Checkbox/Checkbox.styles.ts

@@ -0,0 +1,47 @@
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+
+import { darkTheme, styled } from '../../theme.js';
+
+export const CheckboxContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const CheckboxRoot = styled(RadixCheckbox.Root, {
+  borderRadius: '$xs',
+  position: 'relative',
+  width: '1rem',
+  height: '1rem',
+  padding: 0,
+  $$borderColor: '$colors$neutral600',
+  [`.${darkTheme} &`]: {
+    $$borderColor: '$colors$neutral700',
+  },
+  border: '1px solid $$borderColor',
+  backgroundColor: 'transparent',
+  cursor: 'pointer',
+  '&[data-state="checked"]': {
+    $$color: '$colors$secondary500',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$secondary250',
+    },
+    backgroundColor: '$$color',
+    borderColor: '$$color',
+  },
+  '&[data-disabled]': {
+    backgroundColor: '$neutral600',
+    borderColor: '$neutral700',
+  },
+});
+
+export const CheckboxIndicator = styled(RadixCheckbox.CheckboxIndicator, {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const Label = styled('label', {
+  color: '$foreground',
+  fontSize: '$m',
+  cursor: 'pointer',
+});

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,36 @@
+import type { CheckboxPropTypes } from './Checkbox.types.js';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { DoneIcon } from '../../icons/index.js';
+import { Divider } from '../Divider/index.js';
+
+import {
+  CheckboxContainer,
+  CheckboxIndicator,
+  CheckboxRoot,
+  Label,
+} from './Checkbox.styles.js';
+
+export function Checkbox(props: PropsWithChildren<CheckboxPropTypes>) {
+  const { id, label, ...otherProps } = props;
+  const hasLabel = id && label;
+  return (
+    <CheckboxContainer>
+      <CheckboxRoot id={id} {...otherProps}>
+        <CheckboxIndicator>
+          <DoneIcon color="white" size={12} />
+        </CheckboxIndicator>
+      </CheckboxRoot>
+      {hasLabel ? (
+        <>
+          <Divider direction="horizontal" size={8} />
+          <Label className="_text" htmlFor={id}>
+            {label}
+          </Label>
+        </>
+      ) : null}
+    </CheckboxContainer>
+  );
+}

package/src/components/Checkbox/Checkbox.types.ts

@@ -0,0 +1,18 @@
+import type { CheckboxProps } from '@radix-ui/react-checkbox';
+
+type RadixCheckboxProps = Pick<
+  CheckboxProps,
+  'defaultChecked' | 'checked' | 'disabled' | 'name' | 'onCheckedChange'
+>;
+
+interface WithLabelProps {
+  id: string;
+  label: React.ReactNode;
+}
+interface ComponentProps {
+  id?: never;
+  label?: never;
+}
+
+export type CheckboxPropTypes = RadixCheckboxProps &
+  (ComponentProps | WithLabelProps);

package/src/components/Checkbox/index.ts

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

package/src/components/Chip/Chip.styles.ts

@@ -0,0 +1,41 @@
+import { darkTheme, styled } from '../../theme.js';
+
+export const ChipContainer = styled('button', {
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '$xs',
+  padding: '$5 $15',
+  cursor: 'pointer',
+  transition: 'all 0.35s',
+  border: '1px solid transparent',
+  fontFamily: 'inherit',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
+
+  '&:hover': {
+    $$color: '$colors$secondary100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+  },
+
+  '&:focus-visible': {
+    $$color: '$colors$secondary100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color',
+    outline: 0,
+  },
+
+  variants: {
+    selected: {
+      true: { border: '1px solid $secondary500' },
+    },
+  },
+});

package/src/components/Chip/Chip.tsx

@@ -0,0 +1,23 @@
+import type { ChipPropTypes } from './Chip.types.js';
+
+import React from 'react';
+
+import { Typography } from '../Typography/index.js';
+
+import { ChipContainer } from './Chip.styles.js';
+
+export function Chip(props: ChipPropTypes) {
+  const { label, selected, prefix, suffix, ...otherProps } = props;
+  return (
+    <ChipContainer selected={selected} {...otherProps}>
+      {prefix || null}
+      <Typography
+        color={!selected ? 'neutral700' : undefined}
+        variant="body"
+        size="medium">
+        {label}
+      </Typography>
+      {suffix || null}
+    </ChipContainer>
+  );
+}

package/src/components/Chip/Chip.types.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties } from '@stitches/react';
+import type { HTMLAttributes, ReactNode } from 'react';
+
+type ButtonElement = Omit<HTMLAttributes<HTMLButtonElement>, 'prefix'>;
+
+interface ChipProps {
+  label: string;
+  selected?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+}
+
+export type ChipPropTypes = ButtonElement & ChipProps;

package/src/components/Chip/index.ts

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

package/src/components/Collapsible/Collapsible.styles.ts

@@ -0,0 +1,9 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+
+import { styled } from '../../theme.js';
+
+export const Trigger = styled(Collapsible.Trigger, {
+  border: 'none',
+  background: 'transparent',
+  width: '100%',
+});

package/src/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,21 @@
+import type { CollapsiblePropTypes } from './Collapsible.types.js';
+import type { PropsWithChildren } from 'react';
+
+import * as Collapsible from '@radix-ui/react-collapsible';
+import React from 'react';
+
+import { CollapsibleContent } from '../common/styles.js';
+
+import { Trigger } from './Collapsible.styles.js';
+
+export function CollapsibleComponent(
+  props: PropsWithChildren<CollapsiblePropTypes>
+) {
+  const { open, onOpenChange, trigger, children, ...otherProps } = props;
+  return (
+    <Collapsible.Root open={open} onOpenChange={onOpenChange} {...otherProps}>
+      <Trigger asChild>{trigger}</Trigger>
+      <CollapsibleContent open={open}>{children}</CollapsibleContent>
+    </Collapsible.Root>
+  );
+}

package/src/components/Collapsible/Collapsible.types.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+
+export interface CollapsiblePropTypes {
+  trigger: React.ReactNode;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}

package/src/components/Collapsible/index.ts

@@ -0,0 +1,2 @@
+export { CollapsibleComponent as Collapsible } from './Collapsible.js';
+export type { CollapsiblePropTypes } from './Collapsible.types.js';

package/src/components/CustomTokenWarning/CustomTokenWarning.styles.ts

@@ -0,0 +1,30 @@
+import type { Tooltip } from '../Tooltip';
+import type { ComponentProps } from 'react';
+
+import { styled } from '../../theme';
+import { IconHighlight } from '../Alert/Alert.styles';
+
+export const tooltipStyles: ComponentProps<typeof Tooltip>['styles'] = {
+  root: {
+    zIndex: 10,
+  },
+};
+
+export const TooltipContent = styled('div', {
+  width: '217px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  '& .warning-icon-container': {
+    width: '$20',
+    height: '$20',
+    alignSelf: 'unset',
+  },
+});
+
+export const StyledIconHighlight = styled(IconHighlight, {
+  width: '14px',
+  height: '14px',
+  alignSelf: 'unset',
+});

package/src/components/CustomTokenWarning/CustomTokenWarning.tsx

@@ -0,0 +1,44 @@
+import type { PropTypes } from './CustomTokenWarning.types';
+
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+import { WarningIcon } from '../../icons';
+import { IconHighlight } from '../Alert/Alert.styles';
+import { Divider } from '../Divider';
+import { Tooltip } from '../Tooltip';
+import { Typography } from '../Typography';
+
+import {
+  StyledIconHighlight,
+  TooltipContent,
+  tooltipStyles,
+} from './CustomTokenWarning.styles';
+
+export function CustomTokenWarning(props: PropTypes) {
+  return (
+    <Tooltip
+      styles={tooltipStyles}
+      side="bottom"
+      align="center"
+      sideOffset={20}
+      container={props.container}
+      content={
+        <TooltipContent>
+          <IconHighlight type="warning" className="warning-icon-container">
+            <WarningIcon color="warning" size={13} />
+          </IconHighlight>
+          <Divider size={4} direction="horizontal" />
+          <Typography variant="body" size="xsmall">
+            {i18n.t(
+              'This token may involve potential security risks; proceed with caution.'
+            )}
+          </Typography>
+        </TooltipContent>
+      }>
+      <StyledIconHighlight type="warning">
+        <WarningIcon color="warning" size={9} />
+      </StyledIconHighlight>
+    </Tooltip>
+  );
+}

package/src/components/CustomTokenWarning/CustomTokenWarning.types.ts

@@ -0,0 +1,3 @@
+export type PropTypes = {
+  container?: HTMLElement;
+};

package/src/components/CustomTokenWarning/index.ts

@@ -0,0 +1 @@
+export { CustomTokenWarning } from './CustomTokenWarning';