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

package/src/components/SwapListItem/SwapListItem.tsx

@@ -0,0 +1,72 @@
+import type { SwapListItemPropTypes } from './SwapListItem.types.js';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { Skeleton } from '../Skeleton/index.js';
+import { Typography } from '../Typography/index.js';
+
+import { formattedDateAndTime, getStatus } from './SwapListItem.helpers.js';
+import {
+  Container,
+  Date,
+  Header,
+  LoadingContainer,
+  LoadingMain,
+  Main,
+} from './SwapListItem.styles.js';
+import { StatusColors } from './SwapListItem.types.js';
+import { SwapToken } from './SwapToken.js';
+
+export function SwapListItem(props: PropsWithChildren<SwapListItemPropTypes>) {
+  if ('isLoading' in props) {
+    return (
+      <LoadingMain>
+        <LoadingContainer>
+          <Header>
+            <Skeleton variant="text" size="medium" width={76} />
+            <Skeleton variant="text" size="medium" width={76} />
+          </Header>
+          <SwapToken isLoading={true} />
+        </LoadingContainer>
+      </LoadingMain>
+    );
+  }
+
+  const {
+    onClick,
+    requestId,
+    creationTime,
+    onlyShowTime,
+    status,
+    swapTokenData,
+    tooltipContainer,
+    currentStep,
+    className,
+  } = props;
+  return (
+    <Main onClick={onClick.bind(null, requestId)} className={className}>
+      <Container>
+        <Header>
+          <Date>
+            <Typography variant="label" size="medium" color="neutral600">
+              {formattedDateAndTime(creationTime, onlyShowTime)}
+            </Typography>
+          </Date>
+          <Typography
+            variant="label"
+            size="medium"
+            color={StatusColors[status]}>
+            {getStatus(status)}
+          </Typography>
+        </Header>
+        <SwapToken
+          data={swapTokenData}
+          status={status}
+          tooltipContainer={tooltipContainer}
+          currentStep={currentStep}
+        />
+      </Container>
+    </Main>
+  );
+}

package/src/components/SwapListItem/SwapListItem.types.ts

@@ -0,0 +1,53 @@
+import type { PendingSwapStep } from 'rango-types';
+
+export type Status = 'running' | 'failed' | 'success';
+
+export interface SwapListItemProps {
+  requestId: string;
+  creationTime: string;
+  status: Status;
+  onClick: (requestId: string) => void;
+  swapTokenData: SwapTokenData;
+  onlyShowTime?: boolean;
+  className: string;
+  tooltipContainer?: HTMLElement;
+  currentStep: PendingSwapStep | null;
+}
+
+export interface LoadingProps {
+  isLoading: true;
+}
+
+export type SwapListItemPropTypes = SwapListItemProps | LoadingProps;
+
+export const StatusColors = {
+  failed: 'error500',
+  running: 'info500',
+  success: 'success500',
+};
+
+export interface SwapTokenData {
+  from: {
+    token: {
+      image?: string;
+      displayName: string;
+    };
+    blockchain: {
+      image?: string;
+    };
+    amount: string;
+    realAmount: string;
+  };
+
+  to: {
+    token: {
+      image?: string;
+      displayName: string;
+    };
+    blockchain: {
+      image?: string;
+    };
+    amount: string;
+    realAmount: string;
+  };
+}

package/src/components/SwapListItem/SwapToken.styles.ts

@@ -0,0 +1,91 @@
+import { styled } from '../../theme.js';
+import { Typography } from '../Typography/Typography.js';
+
+export const TokenContainer = styled('div', {
+  display: 'flex',
+  padding: 0,
+  alignItems: 'center',
+  gap: 10,
+});
+
+export const Images = styled('div', {
+  display: 'flex',
+  padding: 0,
+  alignItems: 'center',
+  alignSelf: 'stretch',
+});
+
+export const Layout = styled('div', {
+  display: 'flex',
+  alignItems: 'flex-start',
+  variants: {
+    direction: {
+      column: {
+        flexDirection: 'column',
+        flex: '1 0 0',
+      },
+      row: {
+        padding: 0,
+      },
+    },
+  },
+});
+
+export const TopSection = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  alignSelf: 'stretch',
+});
+
+export const TokenInfo = styled('div', {
+  display: 'flex',
+  padding: 0,
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'flex-start',
+});
+
+export const Icon = styled('div', {
+  display: 'flex',
+  padding: '$4',
+  width: '$32',
+  height: '$32',
+
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const LayoutLoading = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const IconLoading = styled('div', {
+  width: '$24',
+  height: '$24',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const LoadingContainer = styled('div', {
+  display: 'flex',
+  padding: 0,
+  alignItems: 'center',
+  gap: 25,
+});
+
+export const TokenNameText = styled(Typography, {
+  maxWidth: '97px',
+});
+
+export const AmountText = styled(Typography, {
+  maxWidth: '$48',
+});
+
+export const FlexCenteredContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});

package/src/components/SwapListItem/SwapToken.tsx

@@ -0,0 +1,223 @@
+import type { PropTypes } from './SwapToken.types.js';
+
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+import { InfoIcon, NextIcon } from '../../icons/index.js';
+import { ChainToken } from '../ChainToken/index.js';
+import { Divider } from '../Divider/index.js';
+import { Skeleton } from '../Skeleton/index.js';
+import { textTruncate } from '../TokenAmount/TokenAmount.styles.js';
+import { NumericTooltip, Tooltip } from '../Tooltip/index.js';
+import { Typography } from '../Typography/index.js';
+
+import {
+  AmountText,
+  FlexCenteredContainer,
+  Icon,
+  IconLoading,
+  Images,
+  Layout,
+  LayoutLoading,
+  TokenContainer,
+  TokenInfo,
+  TokenNameText,
+  TopSection,
+} from './SwapToken.styles.js';
+
+const TOKEN_NAME_TOOLTIP_THRESHOLD = 10;
+const TOKEN_AMOUNT_TOOLTIP_THRESHOLD = 6;
+
+export function SwapToken(props: PropTypes) {
+  if ('isLoading' in props) {
+    return (
+      <TokenContainer>
+        <Images>
+          <div>
+            <ChainToken size="medium" loading={true} />
+          </div>
+          <div
+            style={{
+              transform: 'translateX(-5px)',
+            }}>
+            <ChainToken size="medium" loading={true} />
+          </div>
+        </Images>
+        <LayoutLoading>
+          <TokenInfo>
+            <Skeleton variant="text" size="medium" width={76} />
+            <Divider size={8} />
+            <Skeleton variant="text" size="medium" width={60} />
+          </TokenInfo>
+          <IconLoading>
+            <NextIcon size={12} color="gray" />
+          </IconLoading>
+          <TokenInfo>
+            <Skeleton variant="text" size="medium" width={76} />
+            <Divider size={8} />
+            <Skeleton variant="text" size="medium" width={60} />
+          </TokenInfo>
+        </LayoutLoading>
+      </TokenContainer>
+    );
+  }
+
+  const {
+    data: {
+      from: {
+        token: fromToken,
+        amount: fromAmount,
+        blockchain: fromBlockchain,
+        realAmount: fromRealAmount,
+      },
+      to: {
+        token: toToken,
+        blockchain: toBlockchain,
+        realAmount: toRealAmount,
+      },
+    },
+    status,
+    tooltipContainer,
+    currentStep,
+  } = props;
+
+  return (
+    <TokenContainer>
+      <Images>
+        <div>
+          <ChainToken
+            tokenImage={fromToken.image}
+            chainImage={fromBlockchain.image}
+            size="large"
+          />
+        </div>
+        <div
+          style={{
+            transform: 'translateX(-10px)',
+          }}>
+          <ChainToken
+            tokenImage={toToken.image}
+            chainImage={toBlockchain.image}
+            size="large"
+          />
+        </div>
+      </Images>
+      {status === 'running' ? (
+        <Layout direction="column">
+          <TopSection>
+            <TokenNameText
+              className={textTruncate()}
+              size="medium"
+              variant="title">
+              {fromToken.displayName}
+            </TokenNameText>
+            {fromToken.displayName.length > TOKEN_NAME_TOOLTIP_THRESHOLD && (
+              <Tooltip
+                content={fromToken.displayName}
+                container={tooltipContainer}>
+                <InfoIcon size={12} color="gray" />
+              </Tooltip>
+            )}
+            <Icon>
+              <NextIcon size={24} color="black" />
+            </Icon>
+            <TokenNameText
+              className={textTruncate()}
+              size="medium"
+              variant="title">
+              {toToken.displayName}
+            </TokenNameText>
+            {toToken.displayName.length > TOKEN_NAME_TOOLTIP_THRESHOLD && (
+              <Tooltip
+                content={toToken.displayName}
+                container={tooltipContainer}>
+                <InfoIcon size={12} color="gray" />
+              </Tooltip>
+            )}
+          </TopSection>
+          <Typography size="small" variant="body" color="neutral700">
+            {currentStep?.fromBlockchain === currentStep?.toBlockchain
+              ? i18n.t('Waiting for the swap transaction')
+              : i18n.t('Waiting for the bridge transaction')}
+          </Typography>
+        </Layout>
+      ) : (
+        <Layout direction="row">
+          <TokenInfo>
+            <FlexCenteredContainer>
+              <TokenNameText
+                className={textTruncate()}
+                size="medium"
+                variant="title">
+                {fromToken.displayName}
+              </TokenNameText>
+              {fromToken.displayName.length > TOKEN_NAME_TOOLTIP_THRESHOLD && (
+                <Tooltip
+                  content={fromToken.displayName}
+                  container={tooltipContainer}>
+                  <InfoIcon size={12} color="gray" />
+                </Tooltip>
+              )}
+            </FlexCenteredContainer>
+
+            {!!fromAmount && (
+              <FlexCenteredContainer>
+                <AmountText
+                  className={textTruncate()}
+                  size="small"
+                  variant="body"
+                  color="neutral700">
+                  {fromRealAmount}
+                </AmountText>
+
+                {fromRealAmount.length > TOKEN_AMOUNT_TOOLTIP_THRESHOLD && (
+                  <NumericTooltip
+                    content={fromRealAmount}
+                    container={tooltipContainer}>
+                    <InfoIcon size={12} color="gray" />
+                  </NumericTooltip>
+                )}
+              </FlexCenteredContainer>
+            )}
+          </TokenInfo>
+          <Icon>
+            <NextIcon size={24} color="black" />
+          </Icon>
+          <TokenInfo>
+            <FlexCenteredContainer>
+              <TokenNameText
+                className={textTruncate()}
+                size="medium"
+                variant="title">
+                {toToken.displayName}
+              </TokenNameText>
+              {toToken.displayName.length > TOKEN_NAME_TOOLTIP_THRESHOLD && (
+                <Tooltip
+                  content={toToken.displayName}
+                  container={tooltipContainer}>
+                  <InfoIcon size={12} color="gray" />
+                </Tooltip>
+              )}
+            </FlexCenteredContainer>
+            <FlexCenteredContainer>
+              <AmountText
+                className={textTruncate()}
+                size="small"
+                variant="body"
+                color="neutral700">
+                {toRealAmount}
+              </AmountText>
+              {toRealAmount.length > TOKEN_AMOUNT_TOOLTIP_THRESHOLD && (
+                <NumericTooltip
+                  content={toRealAmount}
+                  container={tooltipContainer}>
+                  <InfoIcon size={12} color="gray" />
+                </NumericTooltip>
+              )}
+            </FlexCenteredContainer>
+          </TokenInfo>
+        </Layout>
+      )}
+    </TokenContainer>
+  );
+}

package/src/components/SwapListItem/SwapToken.types.ts

@@ -0,0 +1,15 @@
+import type {
+  LoadingProps,
+  Status,
+  SwapTokenData,
+} from './SwapListItem.types.js';
+import type { PendingSwapStep } from 'rango-types';
+
+export interface SwapTokenProps {
+  data: SwapTokenData;
+  status: Status;
+  tooltipContainer?: HTMLElement;
+  currentStep: PendingSwapStep | null;
+}
+
+export type PropTypes = SwapTokenProps | LoadingProps;

package/src/components/SwapListItem/index.ts

@@ -0,0 +1,5 @@
+export { SwapListItem } from './SwapListItem.js';
+export type {
+  SwapTokenData,
+  SwapListItemPropTypes,
+} from './SwapListItem.types.js';

package/src/components/Switch/Switch.styles.tsx

@@ -0,0 +1,55 @@
+import * as RadixSwitch from '@radix-ui/react-switch';
+
+import { darkTheme, styled } from '../../theme.js';
+
+export const StyledSwitchRoot = styled(RadixSwitch.Root, {
+  boxSizing: 'border-box',
+  boxShadow: 'none',
+  width: '24px',
+  height: '16px',
+  $$color: '$colors$neutral600',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral700',
+  },
+  backgroundColor: '$$color',
+  border: 'none',
+  borderRadius: '99999px',
+  padding: '0',
+  cursor: 'pointer',
+  transition: 'all 0.35s',
+  overflow: 'hidden',
+
+  '&[data-state="checked"]': {
+    $$color: '$colors$secondary500',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$secondary250',
+    },
+    backgroundColor: '$$color',
+    borderColor: '$$color',
+  },
+  '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
+});
+
+export const StyledSwitchThumb = styled(RadixSwitch.Thumb, {
+  boxSizing: 'border-box',
+  position: 'relative',
+  left: '$2',
+  display: 'block',
+  width: '12px',
+  height: '12px',
+  backgroundColor: '$background',
+  borderColor: '$secondary100',
+  transition: ' transform 300ms',
+  borderRadius: '999999px',
+  willChange: 'transform',
+  '&:hover': {
+    boxShadow: 'rgba(0, 0, 0, 0.6) 0px 3px 8px',
+    '-moz-box-shadow': 'rgba(0, 0, 0, 0.6) 0px 3px 8px',
+    '-webkit-box-shadow': 'rgba(0, 0, 0, 0.6) 0px 3px 8px',
+    '-o-box-shadow': 'rgba(0, 0, 0, 0.6) 0px 3px 8px',
+  },
+
+  '&[data-state="checked"]': {
+    transform: 'translateX(8px)',
+  },
+});

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,14 @@
+import type { SwitchPropTypes } from './Switch.types.js';
+
+import React from 'react';
+
+import { StyledSwitchRoot, StyledSwitchThumb } from './Switch.styles.js';
+
+export function Switch(props: SwitchPropTypes) {
+  const { checked, onChange } = props;
+  return (
+    <StyledSwitchRoot checked={checked} onCheckedChange={onChange}>
+      <StyledSwitchThumb />
+    </StyledSwitchRoot>
+  );
+}

package/src/components/Switch/Switch.types.tsx

@@ -0,0 +1,4 @@
+export interface SwitchPropTypes {
+  checked: boolean;
+  onChange?: (checked: boolean) => void;
+}

package/src/components/Switch/index.ts

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