@rango-dev/ui 0.15.1-next.2 → 0.15.1-next.21

package/src/components/BestRoute/BestRoute.stories.tsx

@@ -1,41 +1,17 @@
-import React from 'react';
-import { BestRoute, PropTypes } from './BestRoute';
-import { bestRoute, bestRouteExample2, bestRouteExample3 } from './mock';
-import { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-export default {
-  title: 'Components/Best Route',
+import { BestRoute } from './BestRoute';
+import { route1 } from './mock';
+
+const meta: Meta<typeof BestRoute> = {
   component: BestRoute,
-} as Meta<typeof BestRoute>;
+};
 
-export const Main = (props: PropTypes) => (
-  <div style={{ maxWidth: 512 }}>
-    <BestRoute {...props} data={bestRoute} totalFee="0.28" totalTime="10:45" />
-  </div>
-);
-export const With4Step = (props: PropTypes) => (
-  <div style={{ maxWidth: 512 }}>
-    <BestRoute
-      {...props}
-      data={bestRouteExample2}
-      totalFee="0.28"
-      totalTime="10:45"
-    />
-  </div>
-);
+export default meta;
+type Story = StoryObj<typeof BestRoute>;
 
-export const With2Step = (props: PropTypes) => (
-  <div style={{ maxWidth: 512 }}>
-    <BestRoute
-      {...props}
-      data={bestRouteExample3}
-      totalFee="0.28"
-      totalTime="10:45"
-    />
-  </div>
-);
-export const WithError = (props: PropTypes) => (
-  <div style={{ maxWidth: 512 }}>
-    <BestRoute {...props} error="No Route Found" />
-  </div>
-);
+export const Main: Story = {
+  args: {
+    ...route1,
+  },
+};

package/src/components/BestRoute/BestRoute.styles.ts

@@ -0,0 +1,212 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+
+import { darkTheme, styled } from '../../theme';
+import { CollapsibleContent } from '../common/styles';
+
+export const EXPANDABLE_ROUTES_TRANSITION_DURATION = 300;
+
+export const RouteContainer = styled(Collapsible.Root, {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'start',
+  overflowX: 'auto',
+  overflowY: 'hidden',
+  width: '100%',
+  borderRadius: '$xm',
+  variants: {
+    recommended: {
+      true: {
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary800',
+        },
+        backgroundColor: '$$color',
+      },
+      false: {
+        $$color: '$colors$neutral400',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral200',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+  },
+  '& .steps-details': {
+    padding: '$10 $15',
+  },
+});
+
+export const SummaryContainer = styled('div', {
+  borderRadius: '$xm',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'start',
+  justifyContent: 'space-between',
+  color: '$foreground',
+  cursor: 'pointer',
+  boxSizing: 'border-box',
+  position: 'relative',
+  variants: {
+    recommended: {
+      true: {
+        $$color: '$colors$info100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary600',
+        },
+        backgroundColor: '$$color',
+        '&:hover': {
+          backgroundColor: '$$color',
+        },
+      },
+      false: {
+        $$color: '$colors$neutral200',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral500',
+        },
+        backgroundColor: '$$color',
+        '&:hover': {
+          backgroundColor: '$$color',
+        },
+      },
+    },
+    basic: { true: { borderTopRightRadius: '0', borderTopLeftRadius: '0' } },
+    listItem: {
+      true: {},
+      false: {},
+    },
+  },
+
+  compoundVariants: [
+    {
+      listItem: true,
+      recommended: true,
+      css: {
+        '&:hover': {
+          $$color: '$colors$secondary200',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$secondary700',
+          },
+          backgroundColor: '$$color',
+        },
+      },
+    },
+    {
+      listItem: true,
+      recommended: false,
+      css: {
+        '&:hover': {
+          $$color: '$colors$neutral300',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$neutral400',
+          },
+          backgroundColor: '$$color',
+        },
+      },
+    },
+  ],
+  '& .summary': {
+    width: '100%',
+    padding: '$15 $15 $10 $15',
+  },
+  '& .basic-info': {
+    paddingTop: '$10',
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+export const Chains = styled(Collapsible.Trigger, {
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  height: '$36',
+  padding: '$10 $15',
+  boxSizing: 'border-box',
+  cursor: 'pointer',
+  border: 'none',
+  outline: 'none',
+  backgroundColor: 'transparent',
+  variants: {
+    error: {
+      true: {
+        [`& ${Image}`]: {
+          border: '1px $warning500 solid',
+          borderRadius: '100%',
+        },
+      },
+      false: {
+        [`& ${Image}`]: {
+          border: '1px transparent solid',
+          borderRadius: '100%',
+        },
+      },
+    },
+    recommended: {
+      true: {
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary800',
+        },
+        backgroundColor: '$$color',
+      },
+      false: {
+        $$color: '$colors$neutral400',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral200',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+  },
+  '& div:nth-child(1)': { display: 'flex' },
+});
+
+export const Content = styled(CollapsibleContent, {
+  width: '100%',
+});
+
+export const IconContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '$2',
+  transition: `all ${EXPANDABLE_ROUTES_TRANSITION_DURATION}ms ease`,
+  variants: {
+    orientation: {
+      down: {
+        transform: 'rotate(0)',
+      },
+      up: {
+        transform: 'rotate(180deg)',
+      },
+    },
+  },
+});
+
+export const Separator = styled('div', {
+  height: '$12',
+  marginLeft: '$10',
+  marginRight: '$10',
+  borderLeft: '1px solid $foreground',
+});
+
+export const HorizontalSeparator = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  margin: '0 $15',
+  borderTop: '1px solid',
+  $$color: '$colors$neutral300',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral400',
+  },
+  borderColor: '$$color',
+});
+
+export const FrameIcon = styled('div', {
+  width: '$16',
+  height: '$16',
+  justifyContent: 'center',
+  alignItems: 'center',
+  display: 'flex',
+});

package/src/components/BestRoute/BestRoute.tsx

@@ -1,230 +1,176 @@
-import React, { Fragment, PropsWithChildren } from 'react';
-import { i18n } from '@lingui/core';
-import { GasIcon, TimeIcon } from '../../components/Icon';
-import { StepDetail } from '../../components/StepDetail';
-import { Typography } from '../../components/Typography';
-import { keyframes, styled } from '../../theme';
-import { Skeleton } from '../Skeleton';
-import { Spinner } from '../Spinner';
-import { BestRouteResponse } from 'rango-sdk';
-import { Tooltip } from '../Tooltip';
-import { Image } from '../common';
-
-const Container = styled('div', {
-  borderRadius: '$5',
-  border: '1px solid $neutral100',
-  display: 'flex',
-  alignItems: 'center',
-  minHeight: 126,
-  justifyContent: 'space-between',
-  backgroundColor: '$surface',
-});
+import type { BestRouteProps } from './BestRoute.types';
 
-const ErrorMsg = styled(Typography, {
-  color: '$error',
-});
-const BestRouteContainer = styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-  margin: '0 auto',
-  overflowX: 'auto',
-  overflowY: 'hidden',
-  alignSelf: 'stretch',
-  padding: '$4',
-  '@md': {
-    padding: '$8',
-  },
-});
-const Line = styled('div', {
-  height: '0',
-  width: '$20',
-  border: '1px dashed $foreground',
-  borderRadius: 'inherit',
-  '@lg': {
-    width: '$32',
-  },
-});
+import React, { useLayoutEffect, useRef, useState } from 'react';
 
-const HR = styled('hr', {
-  width: '100%',
-  border: '1px solid $neutral400',
-  margin: '$8 0',
-});
-
-const RelativeContainer = styled('div', {
-  position: 'relative',
-});
-const Dot = styled('div', {
-  width: '$6',
-  height: '$6',
-  backgroundColor: '$foreground',
-  position: 'absolute',
-  top: '45%',
-  right: -5,
-  marginLeft: '$8',
-  borderRadius: '50%',
-  '@md': {
-    width: '$8',
-    height: '$8',
-    right: -8,
-    top: '45%',
-  },
-});
-const ArrowRight = styled('div', {
-  width: '0px',
-  height: '0px',
-  borderTop: '5px solid transparent',
-  borderBottom: '5px solid transparent',
-  borderLeft: '5px solid $foreground',
-});
+import { Typography } from '../../components/Typography';
+import { ChevronDownIcon, ChevronRightIcon, InfoIcon } from '../../icons';
+import { Image } from '../common';
+import { Divider } from '../Divider';
+import { RouteCost } from '../RouteCost';
+import { StepDetails } from '../StepDetails';
+import { TokenAmount } from '../TokenAmount/TokenAmount';
+import { Tooltip } from '../Tooltip';
 
-export const pulse = keyframes({
-  '0%': {
-    opacity: 1,
-  },
-  '50%': {
-    opacity: 0.3,
-  },
-  '100%': {
-    opacity: 1,
-  },
-});
+import {
+  Chains,
+  Content,
+  EXPANDABLE_ROUTES_TRANSITION_DURATION,
+  FrameIcon,
+  HorizontalSeparator,
+  IconContainer,
+  RouteContainer,
+  SummaryContainer,
+} from './BestRoute.styles';
+import { RouteSummary } from './RouteSummary';
 
-const GasContainer = styled('div', {
-  backgroundColor: '$neutral100',
-  borderRadius: '5px',
-  margin: '$4',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-  padding: '$4',
-  '@md': {
-    padding: '$8',
-    margin: '$8',
-  },
-});
+export function BestRoute(props: BestRouteProps) {
+  const {
+    steps,
+    totalFee,
+    totalTime,
+    input,
+    output,
+    percentageChange,
+    warningLevel,
+    type,
+    recommended = true,
+  } = props;
 
-const CostContainer = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  variants: {
-    warning: {
-      true: {
-        animation: `${pulse} 2s ease-in-out infinite`,
-      },
-    },
-  },
-});
+  const numberOfSteps = steps.length;
 
-const TotalFee = styled(Typography, {
-  variants: {
-    warning: {
-      true: {
-        color: '$warning300',
-      },
-    },
-  },
-});
+  const [expanded, setExpanded] = useState(props.expanded);
+  const routeRef = useRef<HTMLButtonElement | null>(null);
 
-const SkeletonContainer = styled('div', {
-  padding: '$4',
-  '@md': {
-    padding: '$8',
-  },
-});
-const SwapperContainer = styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});
+  useLayoutEffect(() => {
+    if (expanded && routeRef.current) {
+      setTimeout(() => {
+        routeRef?.current?.scrollIntoView({ behavior: 'smooth' });
+      }, EXPANDABLE_ROUTES_TRANSITION_DURATION);
+    }
+  }, [expanded]);
 
-export interface PropTypes {
-  data: BestRouteResponse | null;
-  totalFee: string;
-  feeWarning: boolean;
-  totalTime: string;
-  loading?: boolean;
-  error?: string;
-}
-export function BestRoute(props: PropsWithChildren<PropTypes>) {
-  const { data, loading, error, totalFee, feeWarning, totalTime } = props;
   return (
-    <Container>
-      {loading ? (
-        <SkeletonContainer>
-          <Skeleton width={48} height={94} />
-        </SkeletonContainer>
-      ) : (
-        <GasContainer>
-          <Tooltip content={i18n.t('Transaction cost (fee)')}>
-            <CostContainer warning={feeWarning}>
-              <GasIcon size={20} color={feeWarning ? 'warning' : undefined} />
-              <TotalFee
-                mt={4}
-                align="center"
-                variant="caption"
-                warning={feeWarning}>
-                {error && '-'}
-                {!!data && `$${totalFee}`}
-              </TotalFee>
-            </CostContainer>
-          </Tooltip>
-          <HR />
-          <Tooltip content={i18n.t('Time estimate')}>
-            <CostContainer warning={feeWarning}>
-              <TimeIcon size={20} />
-              <Typography mt={4} align="center" variant="caption">
-                {error && '-'}
-                {!!data && `~${totalTime}m`}
+    <>
+      <SummaryContainer
+        recommended={recommended}
+        listItem={type === 'list-item'}
+        basic={type === 'basic'}>
+        <div className="summary">
+          <RouteCost fee={totalFee} time={totalTime} steps={numberOfSteps} />
+          {type === 'basic' && (
+            <div className="basic-info">
+              <FrameIcon>
+                <InfoIcon size={12} color="gray" />
+              </FrameIcon>
+              <Typography
+                size="small"
+                variant="body"
+                style={{ letterSpacing: 0.4 }}>
+                {`${input.value} ${steps[0].from.token.displayName} = ${
+                  output.value
+                } ${steps[steps.length - 1].to.token.displayName}`}
               </Typography>
-            </CostContainer>
-          </Tooltip>
-        </GasContainer>
-      )}
-      <BestRouteContainer>
-        {loading && <Spinner color="primary" />}
-
-        {error && <ErrorMsg variant="caption">{error}</ErrorMsg>}
-
-        {!!data &&
-          data.result?.swaps.map((swap, index) => (
-            <Fragment key={index}>
-              {index === 0 && (
-                <RelativeContainer>
-                  <StepDetail
-                    direction="vertical"
-                    logo={swap.from.logo}
-                    symbol={swap.from.symbol}
-                    chainLogo={swap.from.blockchainLogo}
-                    blockchain={swap.from.blockchain}
-                    amount={swap.fromAmount}
-                  />
-                  <Dot />
-                </RelativeContainer>
-              )}
-              <SwapperContainer>
-                <Line />
-                <Image src={swap.swapperLogo} alt={swap.swapperId} size={20} />
-                <Line />
-              </SwapperContainer>
-
-              {index + 1 === data.result?.swaps.length && <ArrowRight />}
-              <StepDetail
-                direction="vertical"
-                logo={swap.to.logo}
-                symbol={swap.to.symbol}
-                chainLogo={swap.to.blockchainLogo}
-                blockchain={swap.to.blockchain}
-                amount={swap.toAmount}
+              <Typography
+                color="$neutral800"
+                ml={2}
+                size="xsmall"
+                variant="body">
+                {`($${output.usdValue})`}
+              </Typography>
+            </div>
+          )}
+          {type === 'list-item' && (
+            <TokenAmount
+              type="output"
+              direction="vertical"
+              price={{ value: output.value, usdValue: output.usdValue }}
+              token={{
+                displayName: steps[numberOfSteps - 1].to.token.displayName,
+                image: steps[numberOfSteps - 1].to.token.image,
+              }}
+              chain={{ image: steps[numberOfSteps - 1].to.chain.image }}
+              percentageChange={percentageChange}
+              warningLevel={warningLevel}
+            />
+          )}
+          {type === 'swap-preview' && (
+            <>
+              <RouteSummary
+                from={steps[0].from}
+                to={steps[numberOfSteps - 1].to}
+                percentageChange={percentageChange}
+                warningLevel={warningLevel}
               />
-            </Fragment>
-          ))}
-        {!!data && !data?.result && (
-          <Typography variant="body2">{i18n.t('No routes found')}</Typography>
-        )}
-      </BestRouteContainer>
-    </Container>
+              <Divider size={4} />
+            </>
+          )}
+        </div>
+        <RouteContainer
+          recommended={recommended}
+          open={expanded}
+          onOpenChange={setExpanded}>
+          <Chains
+            ref={(ref) => (routeRef.current = ref)}
+            recommended={recommended}
+            onClick={setExpanded.bind(null, (prevState) => !prevState)}>
+            <div>
+              {steps.map((step, index) => {
+                const key = `item-${index}`;
+                return (
+                  <React.Fragment key={key}>
+                    <Tooltip
+                      container={props.tooltipContainer}
+                      side="bottom"
+                      sideOffset={4}
+                      content={step.from.chain.displayName}>
+                      <Image src={step.from.chain.image} size={16} />
+                    </Tooltip>
+                    {index === numberOfSteps - 1 && (
+                      <>
+                        <IconContainer>
+                          <ChevronRightIcon size={12} color="black" />
+                        </IconContainer>
+                        <Tooltip
+                          container={props.tooltipContainer}
+                          side="bottom"
+                          sideOffset={4}
+                          content={step.to.chain.displayName}>
+                          <Image src={step.to.chain.image} size={16} />
+                        </Tooltip>
+                      </>
+                    )}
+                    {index !== numberOfSteps - 1 && (
+                      <IconContainer>
+                        <ChevronRightIcon size={12} color="black" />
+                      </IconContainer>
+                    )}
+                  </React.Fragment>
+                );
+              })}
+            </div>
+            <IconContainer orientation={expanded ? 'up' : 'down'}>
+              <ChevronDownIcon size={12} color="black" />
+            </IconContainer>
+          </Chains>
+          <Content open={expanded}>
+            <HorizontalSeparator />
+            <div className="steps-details">
+              {steps.map((step, index) => {
+                const key = `item-${index}`;
+                return (
+                  <StepDetails
+                    type="route-details"
+                    key={key}
+                    step={step}
+                    hasSeparator={index !== steps.length - 1}
+                    state={step.alerts ? 'error' : undefined}
+                  />
+                );
+              })}
+            </div>
+          </Content>
+        </RouteContainer>
+      </SummaryContainer>
+    </>
   );
 }