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

package/src/components/common/styles.ts

@@ -0,0 +1,35 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+
+import { keyframes, styled } from '../../theme.js';
+
+const slideDown = keyframes({
+  from: {
+    height: 0,
+  },
+  to: {
+    height: 'var(--radix-collapsible-content-height)',
+  },
+});
+
+const slideUp = keyframes({
+  from: {
+    height: 'var(--radix-collapsible-content-height)',
+  },
+  to: {
+    height: 0,
+  },
+});
+
+export const CollapsibleContent = styled(Collapsible.Content, {
+  overflow: 'hidden',
+  variants: {
+    open: {
+      true: {
+        animation: `${slideDown} 300ms ease-out`,
+      },
+      false: {
+        animation: `${slideUp} 300ms ease-out`,
+      },
+    },
+  },
+});

package/src/components/index.ts

@@ -0,0 +1,50 @@
+export * from './I18nManager/index.js';
+export * from './Alert/index.js';
+export * from './BlockchainsChip/index.js';
+export * from './BottomLogo/index.js';
+export * from './Button/index.js';
+export * from './IconButton/index.js';
+export * from './Collapsible/index.js';
+export * from './Checkbox/index.js';
+export * from './Chip/index.js';
+export * from './common/index.js';
+export * from './Divider/index.js';
+export * from './FullExpandedQuote/index.js';
+export * from './Header/index.js';
+export * from './Modal/index.js';
+export * from './MessageBox/index.js';
+export * from './RadioGroup/index.js';
+export * from './RefreshProgressButton/index.js';
+export * from './SelectableCategoryList/index.js';
+export * from './Spinner/index.js';
+export * from './SwapListItem/index.js';
+export * from './Switch/index.js';
+export * from './TextField/index.js';
+export * from './Toast/index.js';
+export * from './Tooltip/index.js';
+export * from './Typography/index.js';
+export * from './Wallet/index.js';
+export * from './Radio/index.js';
+export * from './PriceImpact/index.js';
+export * from './ChainToken/index.js';
+export * from './Skeleton/index.js';
+export * from './VirtualizedList/index.js';
+export * from './ListItemButton/index.js';
+export * from './List/index.js';
+export * from './ListItem/index.js';
+export * from './NotFound/index.js';
+export * from './MessageBox/index.js';
+export * from './IconButton/index.js';
+export * from './QuoteCost/index.js';
+export * from './TokenAmount/index.js';
+export * from './StepDetails/index.js';
+export * from './Popover/index.js';
+export * from './Flags/index.js';
+export * from './Select/index.js';
+export * from './QuoteTag/index.js';
+export * from './Tabs/index.js';
+export * from './CustomTokenWarning/index.js';
+export type {
+  SvgIconProps,
+  SvgIconPropsWithChildren,
+} from './SvgIcon/index.js';

package/src/constants/index.ts

@@ -0,0 +1,6 @@
+export const UI_ID = {
+  SWAP_FROM_INPUT_CONTAINER_ID: 'rango-swap-from-input-container',
+  SWAP_TO_INPUT_CONTAINER_ID: 'rango-swap-to-input-container',
+  SWAP_FROM_CHAIN_IMAGE_ID: 'rango-swap-from-chain-image',
+  SWAP_TO_CHAIN_IMAGE_ID: 'rango-swap-to-chain-image',
+};

package/src/containers/ConnectWalletsModal/ConnectWalletsModal.styles.ts

@@ -0,0 +1,8 @@
+import { styled } from '../../theme.js';
+
+export const ModalContent = styled('div', {
+  display: 'grid',
+  gap: '$8',
+  gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+  overflow: 'auto',
+});

package/src/containers/ConnectWalletsModal/ConnectWalletsModal.tsx

@@ -0,0 +1,30 @@
+import type { ConnectWalletsModalPropTypes } from './ConnectWalletsModal.types.js';
+
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+import { Modal, Wallet } from '../../components/index.js';
+
+import { ModalContent } from './ConnectWalletsModal.styles.js';
+
+export function ConnectWalletsModal(props: ConnectWalletsModalPropTypes) {
+  const { open, list, onSelect, onClose, id } = props;
+
+  return (
+    <Modal
+      title={i18n.t('Connect Wallets')}
+      open={open}
+      onClose={onClose}
+      id={id}
+      styles={{
+        container: { width: '75%', maxWidth: '30rem', height: '60%' },
+      }}
+    >
+      <ModalContent>
+        {list.map((info) => (
+          <Wallet {...info} key={info.title} onClick={onSelect} />
+        ))}
+      </ModalContent>
+    </Modal>
+  );
+}

package/src/containers/ConnectWalletsModal/ConnectWalletsModal.types.ts

@@ -0,0 +1,11 @@
+import type { WalletInfo } from '../../components/index.js';
+import type { WalletType } from '@rango-dev/wallets-shared';
+
+export interface ConnectWalletsModalPropTypes {
+  open: boolean;
+  list: WalletInfo[];
+  onSelect: (walletType: WalletType) => void;
+  id: string;
+  onClose: () => void;
+  error?: string;
+}

package/src/containers/ConnectWalletsModal/index.ts

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

package/src/containers/Notifications/NotificationNotFound.tsx

@@ -0,0 +1,19 @@
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+import { Divider, Typography } from '../../components/index.js';
+import { NoNotificationIcon } from '../../icons/index.js';
+
+import { NotFoundContainer } from './Notifications.styles.js';
+
+export function NotificationNotFound() {
+  return (
+    <NotFoundContainer>
+      <NoNotificationIcon color="secondary" size={26} />
+      <Divider size={12} />
+      <Typography variant="body" size="medium" color="neutral700">
+        {i18n.t('There are no notifications.')}
+      </Typography>
+    </NotFoundContainer>
+  );
+}

package/src/containers/Notifications/Notifications.styles.ts

@@ -0,0 +1,82 @@
+import { Button, ListItemButton } from '../../components/index.js';
+import { darkTheme, styled } from '../../theme.js';
+
+export const Container = styled('div', {
+  borderRadius: '$sm',
+  padding: '0 $10 $10 $10',
+  width: '350px',
+  maxWidth: '90vw',
+  minHeight: '150px',
+  maxHeight: '207px',
+  overflowY: 'auto',
+  background: 'inherit',
+  variants: {
+    equalPadding: {
+      true: {
+        padding: '$10',
+      },
+    },
+  },
+});
+
+export const Header = styled('div', {
+  padding: '$10 $10 0 $10',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  background: 'inherit',
+  position: 'sticky',
+  top: '0',
+  zIndex: 999,
+});
+
+export const ClearAllButton = styled(Button, {
+  padding: '$5 !important',
+});
+
+export const List = styled('ul', {
+  padding: 0,
+  margin: 0,
+  listStyle: 'none',
+
+  '.to-chain-token': {
+    transform: 'translateX(-3px)',
+  },
+});
+
+export const ListItem = styled(ListItemButton, {
+  variants: {
+    actionRequired: {
+      true: {
+        backgroundColor: '$error300',
+        [`.${darkTheme} &`]: {
+          backgroundColor: '$error600',
+        },
+      },
+    },
+  },
+});
+
+export const Images = styled('div', {
+  display: 'flex',
+  padding: '0 0 0 $5',
+  alignItems: 'center',
+  alignSelf: 'stretch',
+});
+
+export const NotFoundContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'column',
+  padding: '$10',
+  width: '100%',
+  height: '150px',
+});
+
+export const IconContainer = styled('span', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  paddingRight: '$8',
+});

package/src/containers/Notifications/Notifications.tsx

@@ -0,0 +1,114 @@
+import type { PropTypes } from './Notifications.types.js';
+
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+import { ChainToken, Divider, Typography } from '../../components/index.js';
+import { ChevronRightIcon } from '../../icons/index.js';
+
+import { NotificationNotFound } from './NotificationNotFound.js';
+import {
+  ClearAllButton,
+  Container,
+  Header,
+  IconContainer,
+  Images,
+  List,
+  ListItem,
+} from './Notifications.styles.js';
+
+export function Notifications(props: PropTypes) {
+  const {
+    list,
+    getBlockchainImage,
+    getTokenImage,
+    onClickItem,
+    onClearAll,
+    containerStyles,
+    id,
+  } = props;
+  return (
+    <Container equalPadding={list.length === 0} css={containerStyles}>
+      {list.length > 0 && (
+        <>
+          <Header>
+            <Typography variant="label" size="medium">
+              {i18n.t('Notifications')}
+            </Typography>
+            <ClearAllButton
+              id={`${id}-clear-all-btn`}
+              variant="ghost"
+              size="xsmall"
+              onClick={onClearAll}>
+              <Typography variant="body" size="xsmall" color="neutral700">
+                {i18n.t('Clear all')}
+              </Typography>
+            </ClearAllButton>
+          </Header>
+          <Divider direction="vertical" size={4} />
+        </>
+      )}
+      {list.length ? (
+        <List>
+          {list.map((notificationItem, index) => {
+            const { route, requestId, event } = notificationItem;
+            const fromTokenImage = getTokenImage(route.from);
+
+            const fromBlockchainImage = getBlockchainImage(
+              route.from.blockchain
+            );
+
+            const toTokenImage = getTokenImage(route.to);
+
+            const toBlockchainImage = getBlockchainImage(route.to.blockchain);
+
+            return (
+              <React.Fragment key={requestId}>
+                {index > 0 && <Divider size={4} />}
+                <ListItem
+                  className={`${id}-list-item`}
+                  onClick={() => onClickItem(requestId)}
+                  actionRequired={event.messageSeverity === 'warning'}
+                  title={
+                    <Typography
+                      variant="body"
+                      size="small"
+                      color={
+                        event.messageSeverity === 'warning'
+                          ? '$foreground'
+                          : '$neutral700'
+                      }>
+                      {i18n.t(event.message)}
+                    </Typography>
+                  }
+                  id={requestId}
+                  start={
+                    <Images>
+                      <ChainToken
+                        tokenImage={fromTokenImage}
+                        chainImage={fromBlockchainImage}
+                        size="small"
+                      />
+                      <ChainToken
+                        tokenImage={toTokenImage}
+                        chainImage={toBlockchainImage}
+                        size="small"
+                      />
+                    </Images>
+                  }
+                  end={
+                    <IconContainer>
+                      <ChevronRightIcon size={12} color="gray" />
+                    </IconContainer>
+                  }
+                />
+              </React.Fragment>
+            );
+          })}
+        </List>
+      ) : (
+        <NotificationNotFound />
+      )}
+    </Container>
+  );
+}

package/src/containers/Notifications/Notifications.types.ts

@@ -0,0 +1,18 @@
+import type { CSS } from '../../theme.js';
+import type { Asset } from 'rango-types';
+
+type Notification = {
+  route: { from: Asset; to: Asset };
+  event: { messageSeverity: string; message: string };
+  requestId: string;
+};
+
+export type PropTypes = {
+  list: Notification[];
+  id: string;
+  getBlockchainImage: (blockchain: string) => string | undefined;
+  getTokenImage: (token: Asset) => string | undefined;
+  onClickItem: (requestId: string) => void;
+  onClearAll: () => void;
+  containerStyles?: CSS;
+};

package/src/containers/Notifications/index.ts

@@ -0,0 +1 @@
+export * from './Notifications.js';

package/src/containers/SwapInput/SwapInput.styles.ts

@@ -0,0 +1,130 @@
+import { Button, TextField, Typography } from '../../components/index.js';
+import { css, darkTheme, styled } from '../../theme.js';
+
+export const textStyles = css();
+
+export const Container = styled('div', {
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
+  borderRadius: '$xm',
+  padding: '$15',
+  variants: {
+    sharpBottomStyle: {
+      true: {
+        borderBottomLeftRadius: '$0',
+        borderBottomRightRadius: '$0',
+      },
+    },
+  },
+  [`& .${textStyles}`]: {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
+  '& ._text-field': {
+    '& input': {
+      padding: 0,
+    },
+  },
+});
+
+export const InputAmount = styled(TextField, {
+  width: '100%',
+  fontSize: '$18',
+  lineHeight: '$26',
+  fontWeight: '$medium',
+  textAlign: 'right',
+  '&:disabled': {
+    cursor: 'unset',
+  },
+});
+export const MaxButton = styled(Button, {
+  $$color: '$colors$secondary200',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$secondary800',
+  },
+  backgroundColor: '$$color',
+  '& ._typography': {
+    color: '$colors$secondary500',
+    [`.${darkTheme} &`]: {
+      color: '$colors$secondary250',
+    },
+  },
+});
+
+export const ValueTypography = styled('div', {
+  display: 'flex',
+  width: '100%',
+  textAlign: 'right',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  variants: {
+    hasWarning: {
+      true: {
+        '& ._typography': {
+          color: '$warning500',
+        },
+      },
+      false: {
+        '& ._typography': {
+          $$color: '$colors$neutral600',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$neutral700',
+          },
+          color: '$$color',
+        },
+      },
+    },
+  },
+});
+
+export const formStyles = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const TokenSectionContainer = styled('div', {
+  width: '60%',
+});
+
+export const labelStyles = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const balanceStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const amountStyles = css({
+  width: '48%',
+  maxWidth: '170px',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'end',
+  flexGrow: 1,
+});
+
+export const labelContainerStyles = css({
+  paddingBottom: '$5',
+});
+
+export const UsdPrice = styled(Typography, {
+  width: '100%',
+  textAlign: 'right',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  maxWidth: 147,
+});

package/src/containers/SwapInput/SwapInput.tsx

@@ -0,0 +1,162 @@
+import type { SwapInputPropTypes } from './SwapInput.types.js';
+
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+import {
+  Divider,
+  NumericTooltip,
+  PriceImpact,
+  Skeleton,
+  Typography,
+} from '../../components/index.js';
+import { UI_ID } from '../../constants/index.js';
+
+import {
+  amountStyles,
+  balanceStyles,
+  Container,
+  formStyles,
+  InputAmount,
+  labelContainerStyles,
+  labelStyles,
+  MaxButton,
+  textStyles,
+  TokenSectionContainer,
+} from './SwapInput.styles.js';
+import { TokenSection } from './TokenSection.js';
+
+export function SwapInput(props: SwapInputPropTypes) {
+  const showBalance =
+    'balance' in props &&
+    !props.loading &&
+    !props.loadingBalance &&
+    props.token.displayName &&
+    props.anyWalletConnected;
+
+  const showBalanceSkeleton =
+    'balance' in props && (props.loading || props.loadingBalance);
+  const price = props.price;
+
+  return (
+    <Container
+      id={
+        props.mode === 'To'
+          ? UI_ID.SWAP_TO_INPUT_CONTAINER_ID
+          : UI_ID.SWAP_FROM_INPUT_CONTAINER_ID
+      }
+      sharpBottomStyle={props.sharpBottomStyle}>
+      <div className={labelContainerStyles()}>
+        <div className={labelStyles()}>
+          <Typography variant="body" size="small" className={textStyles()}>
+            {props.label}
+          </Typography>
+          {showBalance && (
+            <div className={balanceStyles()}>
+              <Typography className={textStyles()} variant="body" size="xsmall">
+                {i18n.t('Balance')}: {props.balance}
+              </Typography>
+              <Divider direction="horizontal" size={4} />
+              <MaxButton
+                variant="default"
+                size="xsmall"
+                id={`${props.id}-max-btn`}
+                onClick={props.onSelectMaxBalance}>
+                <Typography variant="body" size="xsmall">
+                  {i18n.t('Max')}
+                </Typography>
+              </MaxButton>
+            </div>
+          )}
+          {showBalanceSkeleton && (
+            <div className={balanceStyles()}>
+              <Skeleton variant="text" size="large" width={105} />
+            </div>
+          )}
+        </div>
+      </div>
+      <div className={formStyles()}>
+        <TokenSectionContainer>
+          <TokenSection
+            id={`${props.id}-token-selection-container`}
+            selectionType={props.selectionType}
+            chain={props.chain.displayName}
+            chianImageId={
+              props.mode === 'To'
+                ? UI_ID.SWAP_TO_CHAIN_IMAGE_ID
+                : UI_ID.SWAP_FROM_CHAIN_IMAGE_ID
+            }
+            tokenSymbol={props.token.displayName}
+            error={props.error}
+            chainImage={props.chain.image}
+            tokenImage={props.token.image}
+            onClick={props.onClickToken}
+            loading={props.loading}
+            warning={props.token.securityWarning}
+            tooltipContainer={props.tooltipContainer}
+          />
+        </TokenSectionContainer>
+        <div className={amountStyles()}>
+          {props.loading || (props.mode === 'To' && props.fetchingQuote) ? (
+            <>
+              <Skeleton variant="text" size="large" />
+              <Divider size={8} />
+              <Skeleton variant="text" size="medium" />
+            </>
+          ) : (
+            <>
+              <NumericTooltip
+                align="end"
+                content={price.realValue}
+                container={props.tooltipContainer}
+                open={
+                  !price.realValue || price.realValue === '0'
+                    ? false
+                    : undefined
+                }>
+                <InputAmount
+                  disabled={props.disabled || props.mode === 'To'}
+                  style={{ padding: 0 }}
+                  value={price.value}
+                  id={`${props.id}-input`}
+                  type={'onInputChange' in props ? 'number' : 'text'}
+                  step="any"
+                  size="large"
+                  placeholder="0"
+                  variant="ghost"
+                  {...('onInputBlur' in props && {
+                    onBlur: (event: React.ChangeEvent<HTMLInputElement>) =>
+                      props.onInputBlur?.(event.target.value),
+                  })}
+                  min={0}
+                  {...('onInputChange' in props && {
+                    onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
+                      props.onInputChange(event.target.value),
+                  })}
+                />
+              </NumericTooltip>
+              <PriceImpact
+                size="medium"
+                tooltipProps={{
+                  container: props.tooltipContainer,
+                  side: 'bottom',
+                }}
+                outputUsdValue={price.usdValue}
+                realOutputUsdValue={price.realUsdValue}
+                percentageChange={
+                  'percentageChange' in props
+                    ? props.percentageChange
+                    : undefined
+                }
+                warningLevel={
+                  'percentageChange' in props ? props.warningLevel : undefined
+                }
+                error={price.error}
+              />
+            </>
+          )}
+        </div>
+      </div>
+    </Container>
+  );
+}