@rango-dev/ui 0.29.1-next.0 → 0.29.1-next.10

package/src/components/FullExpandedQuote/FullExpandedQuote.tsx

@@ -0,0 +1,182 @@
+import type { DataLoadedProps, PropTypes } from './FullExpandedQuote.types';
+
+import React from 'react';
+
+import { ErrorIcon, WarningIcon } from '../../icons';
+import { ChainToken } from '../ChainToken';
+import { Image } from '../common';
+import { Divider } from '../Divider';
+import { QuoteCost } from '../QuoteCost';
+import { QuoteTag } from '../QuoteTag';
+import { Tooltip } from '../Tooltip';
+import { Typography } from '../Typography';
+
+import {
+  SkeletonHeader,
+  SkeletonItemLeft,
+  SkeletonItemRight,
+  SkeletonOutput,
+} from './FullExpandedQuote.Skeletons';
+import {
+  FromToken,
+  IconHighlight,
+  lastStepStyle,
+  LeftSection,
+  OutputSection,
+  RightSection,
+  RouteContainer,
+  RouteHeader,
+  StepItem,
+  Steps,
+  StyledPriceImpact,
+  SwapperContainer,
+  SwapperImage,
+  TagsContainer,
+  tokenLabelStyles,
+  VerticalLine,
+} from './FullExpandedQuote.styles';
+
+const ITEM_SKELETON_COUNT = 3;
+
+export function FullExpandedQuote(props: PropTypes) {
+  const {
+    loading,
+    percentageChange,
+    warningLevel,
+    tooltipContainer,
+    onClick,
+    selected = false,
+  } = props;
+
+  const steps: DataLoadedProps['steps'] = loading
+    ? Array(ITEM_SKELETON_COUNT).fill(undefined)
+    : props.steps;
+  const numberOfSteps = steps.length;
+
+  return (
+    <RouteContainer selected={selected} onClick={onClick}>
+      <RouteHeader loading={loading}>
+        {loading ? (
+          <SkeletonHeader />
+        ) : (
+          <>
+            <QuoteCost
+              fee={props.fee}
+              time={props.time}
+              steps={numberOfSteps}
+            />
+            <TagsContainer>
+              {props.tags.map((tag) => (
+                <QuoteTag key={tag.label} label={tag.label} value={tag.value} />
+              ))}
+            </TagsContainer>
+          </>
+        )}
+      </RouteHeader>
+      <Steps>
+        {steps.map((step, index) => {
+          const key = `item-${index}`;
+          return (
+            <StepItem
+              key={key}
+              className={index === numberOfSteps - 1 ? lastStepStyle() : ''}>
+              {loading ? (
+                <SkeletonItemLeft />
+              ) : (
+                <LeftSection>
+                  <ChainToken
+                    size="small"
+                    chainImage={step.from.chain.image}
+                    tokenImage={step.from.token.image}
+                  />
+                  <FromToken>
+                    <Tooltip
+                      content={step.from.price.realValue}
+                      container={tooltipContainer}
+                      side="bottom"
+                      open={!step.from.price.realValue ? false : undefined}>
+                      <Typography size="xsmall" variant="body">
+                        {step.from.price.value}
+                      </Typography>
+                    </Tooltip>
+                    <Typography
+                      size="xsmall"
+                      variant="body"
+                      className={tokenLabelStyles()}>
+                      {step.from.token.displayName}
+                    </Typography>
+                  </FromToken>
+                </LeftSection>
+              )}
+              <RightSection>
+                {loading ? (
+                  <SkeletonItemRight />
+                ) : (
+                  <>
+                    <SwapperContainer>
+                      <SwapperImage state={step.state}>
+                        <Image
+                          size={15}
+                          type="circular"
+                          src={step.swapper.image}
+                        />
+                        {step.state && (
+                          <IconHighlight type={step.state}>
+                            {step.state === 'error' ? (
+                              <ErrorIcon size={6} color="error" />
+                            ) : (
+                              <WarningIcon size={6} color="warning" />
+                            )}
+                          </IconHighlight>
+                        )}
+                      </SwapperImage>
+                      <Typography size="xsmall" variant="body" align="center">
+                        {step.swapper.displayName}
+                      </Typography>
+                    </SwapperContainer>
+
+                    <VerticalLine />
+                  </>
+                )}
+              </RightSection>
+            </StepItem>
+          );
+        })}
+        {!loading && (
+          <OutputSection>
+            <ChainToken
+              chainImage={steps[numberOfSteps - 1].to.chain.image}
+              tokenImage={steps[numberOfSteps - 1].to.token.image}
+              size="medium"
+            />
+            <div>
+              <Tooltip
+                content={props.outputPrice.realValue}
+                container={tooltipContainer}
+                open={!props.outputPrice.realValue ? false : undefined}>
+                <Typography size="xmedium" variant="title">
+                  {props.outputPrice.value}
+                </Typography>
+                <Divider size={4} direction="horizontal" />
+                <Typography size="large" variant="body">
+                  {steps[numberOfSteps - 1].to.token.displayName}
+                </Typography>
+              </Tooltip>
+            </div>
+            <StyledPriceImpact
+              size="xsmall"
+              warningLevel={warningLevel}
+              outputUsdValue={props.outputPrice.usdValue}
+              realOutputUsdValue={props.outputPrice.realUsdValue}
+              percentageChange={percentageChange}
+              tooltipProps={{
+                container: tooltipContainer,
+              }}
+            />
+          </OutputSection>
+        )}
+        {loading && <SkeletonOutput />}
+      </Steps>
+    </RouteContainer>
+  );
+}

package/src/components/{ExpandedRoute/ExpandedRoute.types.ts → FullExpandedQuote/FullExpandedQuote.types.ts}

@@ -1,18 +1,27 @@
+import type { SwapInputProps } from '../../containers/SwapInput/SwapInput.types';
 import type { PriceImpactProps } from '../PriceImpact/PriceImpact.types';
 import type { PropTypes as QuoteCostProps } from '../QuoteCost/QuoteCost.types';
 import type { Step } from '../StepDetails/StepDetails.types';
 import type { RouteTag } from 'rango-sdk';
-import type { SwapInputProps } from 'src/containers/SwapInput/SwapInput.types';
 
-export interface PropTypes {
-  steps: Step[];
-  tags: RouteTag[];
-  time: QuoteCostProps['time'];
-  fee: QuoteCostProps['fee'];
+type BaseProps = {
   percentageChange?: PriceImpactProps['percentageChange'];
   warningLevel?: PriceImpactProps['warningLevel'];
-  outputPrice: SwapInputProps['price'];
   tooltipContainer?: HTMLElement;
   onClick?: () => void;
   selected?: boolean;
-}
+};
+
+export type DataLoadedProps = {
+  steps: Step[];
+  tags: RouteTag[];
+  time: QuoteCostProps['time'];
+  fee: QuoteCostProps['fee'];
+  outputPrice: SwapInputProps['price'];
+  loading?: false;
+};
+type LoadingProps = {
+  loading: true;
+};
+
+export type PropTypes = BaseProps & (DataLoadedProps | LoadingProps);

package/src/components/FullExpandedQuote/index.ts

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

package/src/components/List/List.tsx

@@ -7,12 +7,11 @@ import { ListItem } from '../ListItem';
 import { BaseList } from './List.styles';
 
 function List(props: ListPropTypes) {
-  const container = props.type;
-
   return (
     <BaseList as={props.as}>
       {props.items.map((item) => {
-        const { id, ...itemProps } = item;
+        const { id, type, ...itemProps } = item;
+        const container = type || props.type;
 
         if (!!container) {
           return React.cloneElement(container, {

package/src/components/List/List.types.ts

@@ -6,6 +6,7 @@ export interface ListPropTypes {
   type?: React.ReactElement;
   items: (ListItemProps & {
     id: string;
+    type?: React.ReactElement;
   })[];
   as?: 'div' | 'ul';
   css?: Stitches.CSS;

package/src/components/List/index.ts

@@ -1 +1,2 @@
 export { List } from './List';
+export type { ListPropTypes } from './List.types';

package/src/components/ListItem/ListItem.styles.ts

@@ -35,6 +35,7 @@ export const BaseListItem = styled('li', {
       fontWeight: 'bold',
       display: 'flex',
       alignItems: 'center',
+      color: '$foreground',
     },
   },
   '.item-end-container': {
@@ -43,6 +44,7 @@ export const BaseListItem = styled('li', {
     alignItems: 'center',
     paddingLeft: '$10',
     overflow: 'hidden',
+    flexShrink: 0,
   },
   variants: {
     hasDivider: {

package/src/components/Popover/Popover.tsx

@@ -13,12 +13,12 @@ export const PopoverContentComponent = (
   props: PropsWithChildren<ContentType>,
   forwardedRef: Ref
 ) => {
-  const { container, children, styles, ...rest } = props;
+  const { container, children, styles, hasArrow = true, ...rest } = props;
   return (
     <RadixPopover.Portal container={container}>
       <PopoverContainer {...rest} ref={forwardedRef}>
         {children}
-        <PopoverArrow css={styles?.arrowStyles} />
+        {hasArrow && <PopoverArrow css={styles?.arrowStyles} />}
       </PopoverContainer>
     </RadixPopover.Portal>
   );
@@ -38,10 +38,11 @@ export function Popover(props: PropsWithChildren<PropTypes>) {
     collisionBoundary = [],
     collisionPadding = 0,
     container = document.body,
+    onOpenChange,
     ...rest
   } = props;
   return (
-    <RadixPopover.Root>
+    <RadixPopover.Root onOpenChange={onOpenChange}>
       <RadixPopover.Trigger asChild>{children}</RadixPopover.Trigger>
       <PopoverContent
         align={align}

package/src/components/Popover/Popover.types.ts

@@ -20,6 +20,8 @@ export interface ContentType {
   styles?: {
     arrowStyles?: CSS;
   };
+  hasArrow?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }
 
 export type PropTypes = ContentType & {

package/src/components/QuoteCost/QuoteCost.styles.ts

@@ -31,6 +31,8 @@ const blinker = keyframes({
 export const itemStyles = css({
   display: 'flex',
   alignItems: 'center',
+  cursor: 'default',
+
   '&.feeSection': {
     cursor: 'pointer',
     '&:hover': {

package/src/components/Select/Select.tsx

@@ -3,7 +3,7 @@ import type { PropTypes } from './Select.types';
 import * as Select from '@radix-ui/react-select';
 import React, { useEffect, useRef, useState } from 'react';
 
-import { ChevronDownIcon, ChevronUpIcon } from '../../icons';
+import { ChevronDownIcon, ChevronUpIcon, DoneIcon } from '../../icons';
 import { Typography } from '../Typography';
 
 import { SelectContent, SelectItem, SelectTrigger } from './select.styles';
@@ -31,47 +31,47 @@ export function SelectComponent(props: PropTypes) {
 
   return (
     <div ref={selectRef}>
-      <Select.Root value={value.value} open={open}>
+      <Select.Root value={value?.value} open={open}>
         <SelectTrigger
           onKeyDown={(event) => event.key === 'Enter' && handleToggle()}
           onClick={handleToggle}
           open={open}
-          aria-label={value.label}>
+          aria-label={value?.label}>
           <Select.Value>
             <Typography variant="body" size="small">
-              {value.label}
+              {value?.label}
             </Typography>
           </Select.Value>
 
           <Select.Icon className="SelectIcon">
-            <ChevronDownIcon size={12} />
+            <ChevronDownIcon size={12} color="black" />
           </Select.Icon>
         </SelectTrigger>
         <Select.Portal container={container}>
-          <SelectContent>
+          <SelectContent position="popper" sideOffset={5}>
             <Select.ScrollUpButton className="SelectScrollButton">
               <ChevronUpIcon />
             </Select.ScrollUpButton>
             <Select.Viewport className="SelectViewport">
               <Select.Group>
-                {options.map(
-                  (option) =>
-                    option.value !== value?.value && (
-                      <SelectItem
-                        onClick={() => {
-                          handleItemClick && handleItemClick(option);
-                          handleToggle();
-                        }}
-                        key={option.value}
-                        value={option.value}>
-                        <Select.ItemText>
-                          <Typography variant="body" size="small">
-                            {option.label}
-                          </Typography>
-                        </Select.ItemText>
-                      </SelectItem>
-                    )
-                )}
+                {options.map((option) => (
+                  <SelectItem
+                    onClick={() => {
+                      handleItemClick && handleItemClick(option);
+                      handleToggle();
+                    }}
+                    key={option.value}
+                    value={option.value}>
+                    <Select.ItemText>
+                      <Typography variant="body" size="small">
+                        {option.label}
+                      </Typography>
+                    </Select.ItemText>
+                    {option.value === value?.value && (
+                      <DoneIcon size={14} color="secondary" />
+                    )}
+                  </SelectItem>
+                ))}
               </Select.Group>
             </Select.Viewport>
             <Select.ScrollDownButton className="SelectScrollButton">

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

@@ -9,92 +9,68 @@ export const SelectTrigger = styled(Select.Trigger, {
   justifyContent: 'space-between',
   alignItems: 'center',
   cursor: 'pointer',
-  backgroundColor: '$secondary',
   padding: '$5 $10',
   border: 0,
+  outline: 0,
   whiteSpace: 'nowrap',
-
+  borderRadius: '$sm',
+  backgroundColor: '$neutral300',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral400',
+  },
+  width: '100%',
+  '&:hover': {
+    backgroundColor: '$info100',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral',
+    },
+  },
   '& svg': {
     transition: `all ${EXPANDABLE_QUOTE_TRANSITION_DURATION}ms ease`,
   },
-
+  '& ._typography': {
+    whiteSpace: 'nowrap',
+  },
   variants: {
     open: {
       true: {
-        borderTopLeftRadius: '$sm',
-        borderTopRightRadius: '$sm',
-        '& ._typography, & svg': {
-          color: '$secondary',
-        },
-
         '& svg': {
           transform: 'rotate(180deg)',
         },
-        backgroundColor: '$neutral100',
-        [`.${darkTheme} &`]: {
-          backgroundColor: '$neutral300',
-        },
       },
       false: {
-        borderRadius: '$md',
-        '& ._typography, & svg': {
-          color: '$background',
-          [`.${darkTheme} &`]: {
-            color: '$foreground',
-          },
-        },
         '& svg': {
           transform: 'rotate(0)',
         },
       },
     },
   },
-  width: '100%',
-  '& ._typography': {
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    width: '52px',
-    '@xs': {
-      width: 'auto',
-    },
-  },
 });
 
 export const SelectContent = styled(Select.Content, {
-  padding: '$5 $10',
-  width: '100%',
-  position: 'absolute',
-  top: '38px',
-  maxHeight: '146px',
+  width: 'var(--radix-select-trigger-width)',
+  maxHeight: 'var(--radix-select-content-available-height)',
   overflowY: 'auto',
-  borderBottomLeftRadius: '$sm',
-  borderBottomRightRadius: '$sm',
+  borderRadius: '$sm',
   boxShadow: '-5px 5px 10px 0px rgba(86, 86, 86, 0.10)',
-  backgroundColor: '$neutral100',
-  [`.${darkTheme} &`]: {
-    backgroundColor: '$neutral300',
-  },
+  backgroundColor: '$background',
 });
 
 export const SelectItem = styled(Select.Item, {
-  padding: '$10 0',
-  borderTop: '1px solid',
-  borderColor: '$neutral300',
-  [`.${darkTheme} &`]: {
-    borderColor: '$neutral400',
-  },
+  padding: '$10',
   listStyleType: 'none',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
   cursor: 'pointer',
-  '&:hover': {
-    '& ._typography': {
-      color: '$colors$secondary',
-    },
-  },
   '&:focus': {
     outline: 'none',
-    '& ._typography': {
-      color: '$colors$secondary',
+  },
+
+  '&:hover': {
+    backgroundColor: '$info100',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral',
     },
   },
 });

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,12 @@
+import type { PropTypes } from './Tabs.types';
+import type { Meta } from '@storybook/react';
+
+import React from 'react';
+
+import { Tabs } from '.';
+
+export default { title: 'Components/Tabs', component: Tabs } as Meta<
+  typeof Tabs
+>;
+
+export const Main = (args: PropTypes) => <Tabs {...args} />;

package/src/components/Tabs/Tabs.styles.tsx

@@ -0,0 +1,157 @@
+import { darkTheme, styled } from '../../theme';
+import { Button } from '../Button';
+
+export const Tabs = styled('div', {
+  display: 'flex',
+  flexDirection: 'row',
+  position: 'relative',
+  justifyContent: 'space-between',
+  height: '100%',
+  variants: {
+    type: {
+      secondary: {
+        border: '3px solid $neutral100',
+        backgroundColor: '$neutral100',
+      },
+      primary: {
+        $$color: '$colors$neutral200',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral500',
+        },
+        borderColor: '$$color',
+        borderWidth: '5px',
+        borderStyle: 'solid',
+        backgroundColor: '$$color',
+      },
+    },
+    borderRadius: {
+      small: {
+        borderRadius: '$xs',
+      },
+      medium: {
+        borderRadius: '$sm',
+      },
+      full: {
+        borderRadius: '$xm',
+      },
+    },
+  },
+});
+
+export const Tab = styled(Button, {
+  color: '$neutral700',
+  backgroundColor: 'transparent',
+  height: '100%',
+  zIndex: 10,
+  '& ._text': {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  variants: {
+    borderRadius: {
+      small: {
+        borderRadius: '$xs',
+      },
+      medium: {
+        borderRadius: '$sm',
+      },
+      full: {
+        borderRadius: '$xm',
+      },
+    },
+    type: {
+      primary: {
+        padding: '$5 $10',
+        height: '100%',
+      },
+      secondary: {},
+    },
+    isActive: {
+      true: {
+        transition: 'color 0.8s linear',
+      },
+      false: {},
+    },
+  },
+
+  compoundVariants: [
+    {
+      type: 'secondary',
+      isActive: true,
+      css: {
+        $$color: '$colors$background',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$foreground',
+        },
+        color: '$$color',
+      },
+    },
+    {
+      type: 'secondary',
+      isActive: false,
+      css: {
+        '&:hover': {
+          backgroundColor: '$info100',
+          color: '$secondary500',
+          [`.${darkTheme} &`]: {
+            backgroundColor: 'transparent',
+            color: '$neutral700',
+          },
+        },
+      },
+    },
+
+    {
+      type: 'primary',
+      isActive: true,
+      css: {
+        color: '$secondary',
+        '& svg': {
+          color: '$secondary',
+        },
+      },
+    },
+    {
+      type: 'primary',
+      isActive: false,
+      css: {
+        '&:hover': {
+          backgroundColor: 'transparent',
+        },
+      },
+    },
+  ],
+});
+
+export const BackdropTab = styled('div', {
+  padding: '$4',
+  position: 'absolute',
+  inset: 0,
+  transition: 'transform 0.2s cubic-bezier(0, 0, 0.86, 1.2)',
+  '&.no-transition': {
+    transition: 'none',
+  },
+  variants: {
+    type: {
+      secondary: {
+        backgroundColor: '$secondary500',
+      },
+      primary: {
+        backgroundColor: '$background',
+      },
+    },
+    borderRadius: {
+      small: {
+        borderRadius: '$xs',
+      },
+      medium: {
+        borderRadius: '$sm',
+      },
+      full: {
+        borderRadius: '$xm',
+      },
+    },
+  },
+});