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

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,114 @@
+import type { ToastPropTypes } from './Toast.types.js';
+
+import React, { useEffect, useState } from 'react';
+
+import { CloseIcon } from '../../icons/index.js';
+import AlertIcon from '../Alert/Alert.icon.js';
+import { IconHighlight } from '../Alert/Alert.styles.js';
+import { Alert } from '../Alert/index.js';
+import { Divider } from '../Divider/index.js';
+import { IconButton } from '../IconButton/index.js';
+
+import { TOAST_HIDE_DELAY, TOAST_UNMOUNT_DELAY } from './Toast.helpers.js';
+import { useToast } from './Toast.Provider.js';
+import {
+  AlertBox,
+  AlertFlexContainer,
+  StyledTypography,
+  ToastContentContainer,
+  toastContentStyles,
+} from './Toast.styles.js';
+
+export const Toast = (props: ToastPropTypes) => {
+  const {
+    id,
+    autoHideDuration,
+    onClose,
+    type,
+    title,
+    position,
+    hasCloseIcon = true,
+    hideOnTap = true,
+    variant = 'standard',
+  } = props;
+  const [isActive, setIsActive] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const { removeToast } = useToast();
+  useEffect(() => {
+    let cleanup;
+
+    if (autoHideDuration) {
+      const timer = setTimeout(() => {
+        handleClose();
+      }, autoHideDuration);
+
+      cleanup = () => clearTimeout(timer);
+    }
+
+    return cleanup;
+  }, [id]);
+
+  const handleClose = () => {
+    setIsActive(false);
+    setTimeout(() => {
+      setIsVisible(false);
+    }, TOAST_HIDE_DELAY);
+    setTimeout(() => {
+      removeToast(id, position);
+      onClose?.();
+    }, TOAST_UNMOUNT_DELAY);
+  };
+
+  useEffect(() => {
+    setIsVisible(true);
+    setTimeout(() => {
+      setIsActive(true);
+    }, 0);
+  }, []);
+
+  return (
+    <ToastContentContainer
+      isActive={isActive}
+      position={position}
+      isVisible={isVisible}>
+      <div className={toastContentStyles()}>
+        <AlertBox
+          onClick={hideOnTap ? handleClose : undefined}
+          variant={variant}
+          type={type}>
+          {variant === 'custom' ? (
+            <AlertFlexContainer>
+              <IconHighlight type={type} align="center">
+                <AlertIcon type={type} />
+              </IconHighlight>
+              <Divider direction="horizontal" size={10} />
+              <StyledTypography variant="body" size="small" align="left">
+                {props.title}
+              </StyledTypography>
+            </AlertFlexContainer>
+          ) : (
+            <Alert
+              title={title}
+              type={type}
+              variant="alarm"
+              titleAlign="left"
+              id={id.toString()}
+              action={
+                hasCloseIcon ? (
+                  // eslint-disable-next-line jsx-id-attribute-enforcement/missing-ids
+                  <IconButton
+                    className="toast-close-icon-btn"
+                    variant="ghost"
+                    size="xsmall"
+                    onClick={handleClose}>
+                    <CloseIcon size={12} />
+                  </IconButton>
+                ) : undefined
+              }
+            />
+          )}
+        </AlertBox>
+      </div>
+    </ToastContentContainer>
+  );
+};

package/src/components/Toast/Toast.types.ts

@@ -0,0 +1,33 @@
+import type { ToastContainer } from './Toast.styles.js';
+import type { Type } from '../Alert/Alert.types.js';
+import type * as Stitches from '@stitches/react';
+import type { CSSProperties } from 'react';
+
+type BaseProps = Stitches.VariantProps<typeof ToastContainer>;
+export type ToastPosition = Exclude<BaseProps['position'], object>;
+export interface ProviderPropTypes {
+  container: HTMLElement;
+}
+
+export type ToastType = {
+  autoHideDuration?: number;
+  id?: number | string;
+  containerStyle?: CSSProperties;
+  onClose?: () => void;
+  position: ToastPosition;
+  title: string;
+  type: Type;
+  style?: CSSProperties;
+  hasCloseIcon?: boolean;
+  hideOnTap?: boolean;
+  variant?: 'custom' | 'standard';
+};
+
+export type ToastPropTypes = ToastType & {
+  id: number | string;
+};
+
+export type ProviderContext = {
+  addToast: (content: ToastType) => void;
+  removeToast: (id: number | string, position: ToastPosition) => void;
+};

package/src/components/Toast/index.ts

@@ -0,0 +1,3 @@
+export { Toast } from './Toast.js';
+export { ToastProvider, useToast } from './Toast.Provider.js';
+export type { ToastPropTypes } from './Toast.types.js';

package/src/components/TokenAmount/TokenAmount.styles.ts

@@ -0,0 +1,91 @@
+import { css, styled } from '../../theme.js';
+import { Typography } from '../Typography/Typography.js';
+
+export const Container = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  gap: '$8',
+  variants: {
+    direction: {
+      vertical: {
+        flexDirection: 'column',
+        alignItems: 'start',
+      },
+      horizontal: { flexDirection: 'row', width: '100%', alignItems: 'end' },
+    },
+    centerAlign: {
+      true: { alignItems: 'center', justifyContent: 'center' },
+    },
+  },
+});
+
+export const centeredFlexBox = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const TokenAmountWrapper = styled('div', {
+  flex: '1 1 0',
+  minWidth: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  flexDirection: 'row',
+  variants: {
+    direction: {
+      vertical: {
+        maxWidth: 320,
+      },
+      horizontal: { maxWidth: 254 },
+    },
+  },
+});
+
+export const usdValueStyles = css({
+  display: 'flex',
+  paddingBottom: '$5',
+  minWidth: 0,
+  flex: '0 1 auto',
+});
+
+export const tooltipRootStyle = {
+  width: 'fit-content',
+};
+
+export const TokenNameText = styled(Typography, {
+  maxWidth: '64px',
+});
+
+export const textTruncate = css({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+export const flexShrinkFix = css({
+  minWidth: 0,
+});
+
+export const usdValueText = css({
+  '& .output-usd-value': {
+    maxWidth: 77,
+  },
+  maxWidth: 88,
+});
+export const verticalUsdValueText = css({
+  '& .output-usd-value': {
+    maxWidth: 300,
+  },
+  maxWidth: 320,
+});
+
+export const flexShrink = css({
+  flexShrink: 1,
+});
+
+export const TokenInfoRow = styled('div', {
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+});

package/src/components/TokenAmount/TokenAmount.tsx

@@ -0,0 +1,149 @@
+import type { PropTypes } from './TokenAmount.types.js';
+
+import React, { useRef } from 'react';
+import { useIsTruncated } from 'src/hooks/useIsTruncated.js';
+import { InfoIcon } from 'src/icons/index.js';
+
+import { ChainToken } from '../ChainToken/index.js';
+import { Divider } from '../Divider/index.js';
+import { PriceImpact } from '../PriceImpact/index.js';
+import { ValueTypography } from '../PriceImpact/PriceImpact.styles.js';
+import { NumericTooltip, Tooltip } from '../Tooltip/index.js';
+import { Typography } from '../Typography/index.js';
+
+import {
+  Container,
+  flexShrink,
+  flexShrinkFix,
+  textTruncate,
+  TokenAmountWrapper,
+  TokenInfoRow,
+  TokenNameText,
+  tooltipRootStyle,
+  usdValueStyles,
+  usdValueText,
+  verticalUsdValueText,
+} from './TokenAmount.styles.js';
+
+export function TokenAmount(props: PropTypes) {
+  const realValueRef = useRef<HTMLSpanElement | null>(null);
+  const isRealValueTruncated = useIsTruncated(
+    props.price?.realValue || '',
+    realValueRef
+  );
+  const realUSdValueRef = useRef<HTMLSpanElement | null>(null);
+  const isRealUsedValueTruncated = useIsTruncated(
+    props.price?.realUsdValue || '',
+    realUSdValueRef
+  );
+  const displayNameRef = useRef<HTMLSpanElement | null>(null);
+  const isDisplayNameTruncated = useIsTruncated(
+    props.token.displayName,
+    displayNameRef
+  );
+  return (
+    <Container
+      direction={props.direction}
+      centerAlign={props.centerAlign}
+      id={props.id}>
+      <TokenAmountWrapper direction={props.direction}>
+        <ChainToken
+          chainImage={props.chain.image}
+          tokenImage={props.token.image}
+          size="medium"
+        />
+
+        <Divider direction="horizontal" size={4} />
+        <div className={flexShrinkFix()}>
+          {props.label && (
+            <Typography size="xsmall" variant="body" color="$neutral700">
+              {props.label}
+            </Typography>
+          )}
+          <TokenInfoRow className={flexShrinkFix()}>
+            <Typography
+              size="medium"
+              variant="title"
+              ref={realValueRef}
+              className={`${textTruncate()} ${flexShrinkFix()}`}
+              style={{ fontWeight: 600 }}>
+              {props.price.realValue}
+            </Typography>
+            {props.price.realValue && isRealValueTruncated && (
+              <>
+                <Divider direction="horizontal" size={2} />
+
+                <NumericTooltip
+                  styles={{ root: tooltipRootStyle }}
+                  content={props.price.realValue}
+                  open={!props.price.realValue ? false : undefined}
+                  container={props.tooltipContainer}>
+                  <InfoIcon size={12} color="gray" />
+                </NumericTooltip>
+              </>
+            )}
+            <Divider direction="horizontal" size={8} />
+            <TokenNameText
+              size="medium"
+              variant="title"
+              className={textTruncate()}
+              ref={displayNameRef}
+              style={{ fontWeight: 400 }}>
+              {props.token.displayName}
+            </TokenNameText>
+            {isDisplayNameTruncated && (
+              <>
+                <Divider direction="horizontal" size={2} />
+                <Tooltip
+                  content={props.token.displayName}
+                  container={props.tooltipContainer}>
+                  <InfoIcon size={12} color="gray" />
+                </Tooltip>
+              </>
+            )}
+          </TokenInfoRow>
+        </div>
+      </TokenAmountWrapper>
+      {props.price.usdValue && props.price.usdValue !== '0' && (
+        <div className={usdValueStyles()}>
+          {props.type === 'input' && (
+            <ValueTypography className={usdValueText()}>
+              <Typography
+                ref={realUSdValueRef}
+                className={textTruncate()}
+                size="small"
+                variant="body">
+                {`~$${props.price.realUsdValue}`}
+              </Typography>
+              {isRealUsedValueTruncated && (
+                <NumericTooltip
+                  content={props.price.realUsdValue}
+                  container={props.tooltipContainer}>
+                  <InfoIcon size={12} color="gray" />
+                </NumericTooltip>
+              )}
+            </ValueTypography>
+          )}
+          {props.type === 'output' && (
+            <PriceImpact
+              className={`${
+                props.direction === 'horizontal'
+                  ? usdValueText()
+                  : verticalUsdValueText()
+              } ${flexShrinkFix()} ${flexShrink()}`}
+              style={{
+                ...(props.direction === 'horizontal' && { flexWrap: 'wrap' }),
+              }}
+              size="small"
+              tooltipProps={{ container: props.tooltipContainer, side: 'top' }}
+              outputUsdValue={props.price.usdValue}
+              percentageChange={props.percentageChange}
+              warningLevel={props.warningLevel}
+              realOutputUsdValue={props.price.realUsdValue}
+            />
+          )}
+        </div>
+      )}
+    </Container>
+  );
+}

package/src/components/TokenAmount/TokenAmount.types.ts

@@ -0,0 +1,22 @@
+import type { SwapInputPropTypes } from '../../containers/SwapInput/SwapInput.types.js';
+import type { PriceImpactPropTypes } from '../PriceImpact/PriceImpact.types.js';
+
+type BaseProps = Pick<SwapInputPropTypes, 'token' | 'price'> & {
+  chain: Pick<SwapInputPropTypes['chain'], 'image'>;
+  direction?: 'vertical' | 'horizontal';
+  id: string;
+  centerAlign?: boolean;
+  label?: string;
+  tooltipContainer?: HTMLElement;
+};
+
+type InputAmountProps = { type: 'input' };
+
+type OutputAmountProps = Pick<
+  PriceImpactPropTypes,
+  'percentageChange' | 'warningLevel'
+> & {
+  type: 'output';
+};
+
+export type PropTypes = BaseProps & (InputAmountProps | OutputAmountProps);

package/src/components/TokenAmount/index.ts

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

package/src/components/Tooltip/NumericTooltip.tsx

@@ -0,0 +1,16 @@
+import type { NumericTooltipPropTypes } from './NumericTooltip.types.js';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { Tooltip } from './Tooltip.js';
+
+export function NumericTooltip(
+  props: PropsWithChildren<NumericTooltipPropTypes>
+) {
+  const MAX_DECIMALS = 12;
+  const formattedNumber = Number(props.content)
+    .toFixed(props.maxDecimals || MAX_DECIMALS)
+    .replace(/(?:\.0*|(\.\d+?)0*)$/, '$1');
+  return <Tooltip {...props} content={formattedNumber} />;
+}

package/src/components/Tooltip/NumericTooltip.types.tsx

@@ -0,0 +1,6 @@
+import type { TooltipPropTypes } from './Tooltip.types.js';
+
+export interface NumericTooltipPropTypes extends TooltipPropTypes {
+  content: string | number | null | undefined;
+  maxDecimals?: number;
+}

package/src/components/Tooltip/Tooltip.styles.ts

@@ -0,0 +1,24 @@
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+
+import { darkTheme, styled } from '../../theme.js';
+import { Typography } from '../Typography/index.js';
+
+export const TooltipContent = styled(RadixTooltip.Content, {
+  zIndex: '999999',
+});
+
+export const TooltipTypography = styled(Typography, {
+  borderRadius: '$md',
+  padding: '$5 $10',
+  boxShadow: '5px 5px 10px 0px rgba(0, 0, 0, 0.10)',
+  backgroundColor: '$neutral200',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral500',
+  },
+});
+
+export const TriggerContent = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,54 @@
+import type { TooltipPropTypes } from './Tooltip.types.js';
+import type { PropsWithChildren } from 'react';
+
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import React from 'react';
+
+import {
+  TooltipContent,
+  TooltipTypography,
+  TriggerContent,
+} from './Tooltip.styles.js';
+
+export function Tooltip(props: PropsWithChildren<TooltipPropTypes>) {
+  const {
+    children,
+    content,
+    color,
+    sideOffset,
+    container,
+    open,
+    side = 'top',
+    styles,
+    align,
+    alignOffset,
+    collisionPadding,
+  } = props;
+
+  return (
+    <RadixTooltip.Provider delayDuration={0}>
+      <RadixTooltip.Root open={open}>
+        <RadixTooltip.Trigger asChild style={styles?.root}>
+          <TriggerContent>{children}</TriggerContent>
+        </RadixTooltip.Trigger>
+        <RadixTooltip.Portal container={container}>
+          <TooltipContent
+            alignOffset={alignOffset}
+            align={align}
+            side={side}
+            sideOffset={sideOffset}
+            collisionPadding={collisionPadding}
+            collisionBoundary={container}>
+            <TooltipTypography
+              css={styles?.content}
+              variant="label"
+              size="medium"
+              color={color}>
+              {content}
+            </TooltipTypography>
+          </TooltipContent>
+        </RadixTooltip.Portal>
+      </RadixTooltip.Root>
+    </RadixTooltip.Provider>
+  );
+}

package/src/components/Tooltip/Tooltip.types.ts

@@ -0,0 +1,22 @@
+import type { CSS } from '../../theme.js';
+import type * as RadixTooltip from '@radix-ui/react-tooltip';
+import type * as Stitches from '@stitches/react';
+import type { ComponentProps, ReactNode } from 'react';
+
+type RadixTooltipContentProps = ComponentProps<typeof RadixTooltip.Content>;
+
+export interface TooltipPropTypes {
+  content: ReactNode;
+  side?: RadixTooltipContentProps['side'];
+  color?: 'primary' | 'error' | 'warning' | 'success';
+  sideOffset?: RadixTooltipContentProps['sideOffset'];
+  container?: HTMLElement;
+  open?: boolean;
+  styles?: {
+    root?: Stitches.CSSProperties;
+    content?: CSS;
+  };
+  align?: RadixTooltipContentProps['align'];
+  alignOffset?: RadixTooltipContentProps['alignOffset'];
+  collisionPadding?: RadixTooltipContentProps['collisionPadding'];
+}

package/src/components/Tooltip/index.ts

@@ -0,0 +1,4 @@
+export { Tooltip } from './Tooltip.js';
+export type { TooltipPropTypes } from './Tooltip.types.js';
+export { NumericTooltip } from './NumericTooltip.js';
+export type { NumericTooltipPropTypes } from './NumericTooltip.types.js';

package/src/components/Typography/NotSelectableTypography.ts

@@ -0,0 +1,7 @@
+import { styled } from '../../theme.js';
+
+import { Typography } from './Typography.js';
+
+export const NotSelectableTypography = styled(Typography, {
+  userSelect: 'none',
+});