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

package/src/components/ExpandedRoute/ExpandedRoute.styles.ts

@@ -0,0 +1,186 @@
+import { css, darkTheme, styled } from '../../theme';
+import { PriceImpact } from '../PriceImpact';
+
+export const tokenLabelStyles = css({});
+
+const FlexCenter = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+export const RouteContainer = styled('div', {
+  border: '1px solid',
+  padding: '$20 $15',
+  backgroundColor: '$neutral200',
+  borderRadius: '$xm',
+  cursor: 'pointer',
+  gap: '$20',
+  display: 'flex',
+  flexDirection: 'column',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral500',
+  },
+  variants: {
+    selected: {
+      true: {
+        $$color: '$colors$secondary500',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary400',
+        },
+        borderColor: '$$color',
+      },
+      false: {
+        borderColor: 'transparent',
+      },
+    },
+  },
+});
+
+export const RouteHeader = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+});
+
+export const TagsContainer = styled('div', {
+  display: 'flex',
+  gap: '$5',
+});
+
+export const Steps = styled('div', {
+  display: 'flex',
+  height: '85px',
+  padding: '$2',
+});
+
+export const Step = styled('div', {
+  padding: '$2',
+  display: 'flex',
+  width: '100%',
+});
+
+export const LeftSection = styled(FlexCenter, {
+  minWidth: '42px',
+  position: 'relative',
+});
+
+export const RightSection = styled('div', {
+  width: '100%',
+  height: '50%',
+  borderBottom: '1px dashed',
+  borderColor: '$info300',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '2px',
+  [`.${darkTheme} &`]: {
+    borderColor: '$secondary600',
+  },
+});
+
+export const FromToken = styled(FlexCenter, {
+  position: 'absolute',
+  flexDirection: 'column',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  [`& .${tokenLabelStyles}`]: {
+    color: '$neutral700',
+    [`.${darkTheme} &`]: {
+      color: '$neutral900',
+    },
+  },
+});
+
+export const SwapperContainer = styled(FlexCenter, {
+  flexDirection: 'column',
+  '& ._typography': {
+    color: '$neutral700',
+    [`.${darkTheme} &`]: {
+      color: '$neutral900',
+    },
+  },
+});
+
+export const SwapperImage = styled(FlexCenter, {
+  borderRadius: '$lg',
+  position: 'relative',
+  width: '$18',
+  height: '$18',
+  border: '1px solid transparent',
+  variants: {
+    state: {
+      warning: {
+        borderColor: '$warning500',
+      },
+      error: {
+        borderColor: '$error500',
+      },
+    },
+  },
+});
+
+export const IconHighlight = styled(FlexCenter, {
+  borderRadius: '$lg',
+  position: 'absolute',
+  width: '$8',
+  height: '$8',
+  bottom: -2,
+  right: -2,
+  variants: {
+    type: {
+      warning: {
+        $$color: '$colors$warning300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$warning600',
+        },
+        backgroundColor: '$$color',
+      },
+      error: {
+        $$color: '$colors$error300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$error600',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+  },
+});
+
+export const OutputSection = styled(FlexCenter, {
+  flexDirection: 'column',
+  paddingLeft: '$4',
+});
+
+export const VerticalLine = styled('div', {
+  display: 'flex',
+  width: '50%',
+  borderRight: '1px dashed',
+  height: '$10',
+  borderColor: '$info300',
+  [`.${darkTheme} &`]: {
+    borderColor: '$secondary600',
+  },
+});
+
+export const StyledPriceImpact = styled(PriceImpact, {
+  justifyContent: 'center',
+  gap: '$4',
+});
+
+export const lastStepStyle = css({
+  position: 'relative',
+  '&::after': {
+    content: '',
+    position: 'absolute',
+    top: '50%',
+    right: '0',
+    transform: 'translate(-50%, -50%) rotate(45deg)',
+    width: '$6',
+    height: '$6',
+    borderTop: '2px solid',
+    borderRight: '2px solid',
+    borderColor: '$info300',
+    [`.${darkTheme} &`]: {
+      borderColor: '$secondary600',
+    },
+  },
+});

package/src/components/ExpandedRoute/ExpandedRoute.tsx

@@ -0,0 +1,147 @@
+import type { PropTypes } from './ExpandedRoute.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 {
+  FromToken,
+  IconHighlight,
+  lastStepStyle,
+  LeftSection,
+  OutputSection,
+  RightSection,
+  RouteContainer,
+  RouteHeader,
+  Step,
+  Steps,
+  StyledPriceImpact,
+  SwapperContainer,
+  SwapperImage,
+  TagsContainer,
+  tokenLabelStyles,
+  VerticalLine,
+} from './ExpandedRoute.styles';
+
+export function ExpandedRoute(props: PropTypes) {
+  const {
+    steps,
+    tags,
+    time,
+    fee,
+    percentageChange,
+    warningLevel,
+    outputPrice,
+    tooltipContainer,
+    selected = false,
+    onClick,
+  } = props;
+  const numberOfSteps = steps.length;
+  return (
+    <RouteContainer selected={selected} onClick={onClick}>
+      <RouteHeader>
+        <QuoteCost fee={fee} time={time} steps={numberOfSteps} />
+        <TagsContainer>
+          {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 (
+            <Step
+              key={key}
+              className={index === numberOfSteps - 1 ? lastStepStyle() : ''}>
+              <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>
+                <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>
+            </Step>
+          );
+        })}
+        <OutputSection>
+          <ChainToken
+            chainImage={steps[numberOfSteps - 1].to.chain.image}
+            tokenImage={steps[numberOfSteps - 1].to.token.image}
+            size="medium"
+          />
+          <div>
+            <div>
+              <Tooltip
+                content={outputPrice.realValue}
+                container={tooltipContainer}
+                open={!outputPrice.realValue ? false : undefined}>
+                <Typography size="xmedium" variant="title">
+                  {outputPrice.value}
+                </Typography>
+                <Divider size={4} direction="horizontal" />
+                <Typography size="large" variant="body">
+                  {steps[numberOfSteps - 1].to.token.displayName}
+                </Typography>
+              </Tooltip>
+            </div>
+          </div>
+          <StyledPriceImpact
+            size="xsmall"
+            warningLevel={warningLevel}
+            outputUsdValue={outputPrice.usdValue}
+            realOutputUsdValue={outputPrice.realUsdValue}
+            percentageChange={percentageChange}
+            tooltipProps={{
+              container: tooltipContainer,
+            }}
+          />
+        </OutputSection>
+      </Steps>
+    </RouteContainer>
+  );
+}

package/src/components/ExpandedRoute/ExpandedRoute.types.ts

@@ -0,0 +1,18 @@
+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'];
+  percentageChange?: PriceImpactProps['percentageChange'];
+  warningLevel?: PriceImpactProps['warningLevel'];
+  outputPrice: SwapInputProps['price'];
+  tooltipContainer?: HTMLElement;
+  onClick?: () => void;
+  selected?: boolean;
+}

package/src/components/ExpandedRoute/index.ts

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

package/src/components/ExpandedRoute/mock.ts

@@ -0,0 +1,236 @@
+import type { Step } from '../StepDetails/StepDetails.types';
+
+export const steps: Step[] = [
+  {
+    swapper: {
+      displayName: 'AllBridge',
+      image:
+        'https://raw.githubusercontent.com/rango-exchange/assets/main/swappers/AllBridge/icon.svg',
+    },
+    from: {
+      token: {
+        displayName: 'USDC',
+        image: 'https://rango.vip/i/mh9zko',
+      },
+      chain: {
+        displayName: 'Polygon',
+        image:
+          'https://raw.githubusercontent.com/rango-exchange/assets/main/blockchains/POLYGON/icon.svg',
+      },
+      price: {
+        value: '1.00000000',
+        realValue: '5.5',
+      },
+    },
+    to: {
+      chain: {
+        displayName: 'ETH',
+        image: 'https://api.rango.exchange/blockchains/ethereum.svg',
+      },
+      token: {
+        displayName: 'ETH',
+
+        image: 'https://api.rango.exchange/tokens/ETH/ETH.png',
+      },
+      price: {
+        value: '14.863736725876758517',
+        realValue: '5.5',
+      },
+    },
+  },
+  {
+    swapper: {
+      displayName: 'ThorChain',
+      image: 'https://api.rango.exchange/swappers/Thorchain.svg',
+    },
+    from: {
+      token: {
+        displayName: 'AVAX',
+        image: 'https://api.rango.exchange/tokens/AVAX/AVAX.png',
+      },
+      chain: {
+        displayName: 'Avax',
+        image:
+          'https://raw.githubusercontent.com/rango-exchange/assets/main/blockchains/AVAX_CCHAIN/icon.svg',
+      },
+      price: {
+        value: '1.00000000',
+        realValue: '5.5',
+      },
+    },
+    to: {
+      chain: {
+        displayName: 'ETH',
+        image: 'https://api.rango.exchange/blockchains/ethereum.svg',
+      },
+      token: {
+        displayName: 'ETH',
+
+        image: 'https://api.rango.exchange/tokens/ETH/ETH.png',
+      },
+      price: {
+        value: '14.863736725876758517',
+      },
+    },
+  },
+  {
+    swapper: {
+      displayName: 'Satellite',
+      image: 'https://api.rango.exchange/swappers/satellite.png',
+    },
+    from: {
+      token: {
+        displayName: 'WMATIC',
+        image: 'https://rango.vip/i/NcQpfK',
+      },
+      chain: {
+        displayName: 'BTC',
+        image: 'https://api.rango.exchange/tokens/BTC/BTC.png',
+      },
+      price: {
+        value: '3.5',
+      },
+    },
+    to: {
+      chain: {
+        displayName: 'ETH',
+        image: 'https://api.rango.exchange/blockchains/ethereum.svg',
+      },
+      token: {
+        displayName: 'ETH',
+
+        image: 'https://api.rango.exchange/tokens/ETH/ETH.png',
+      },
+      price: {
+        value: '14.863736725876758517',
+      },
+    },
+  },
+  {
+    swapper: {
+      displayName: 'CurveFi',
+      image:
+        'https://raw.githubusercontent.com/rango-exchange/assets/main/swappers/CurveFi/icon.png',
+    },
+    from: {
+      token: {
+        displayName: 'BTC',
+        image: 'https://api.rango.exchange/tokens/BTC/BTC.png',
+      },
+      chain: {
+        displayName: 'BTC',
+        image: 'https://api.rango.exchange/tokens/BTC/BTC.png',
+      },
+      price: {
+        value: '2',
+      },
+    },
+    to: {
+      chain: {
+        displayName: 'ETH',
+        image: 'https://api.rango.exchange/blockchains/ethereum.svg',
+      },
+      token: {
+        displayName: 'ETH',
+
+        image: 'https://api.rango.exchange/tokens/ETH/ETH.png',
+      },
+      price: {
+        value: '14.863736725876758517',
+      },
+    },
+  },
+  {
+    swapper: {
+      displayName: '1inch',
+      image:
+        'https://raw.githubusercontent.com/rango-exchange/assets/main/swappers/1Inch/icon.svg',
+    },
+    from: {
+      token: {
+        displayName: 'OSMO',
+        image: 'https://api.rango.exchange/tokens/COSMOS/OSMO.png',
+      },
+      chain: {
+        displayName: 'Osmosis',
+        image:
+          'https://raw.githubusercontent.com/rango-exchange/assets/main/blockchains/OSMOSIS/icon.svg',
+      },
+      price: {
+        value: '5.546',
+      },
+    },
+    to: {
+      chain: {
+        displayName: 'ETH',
+        image: 'https://api.rango.exchange/blockchains/ethereum.svg',
+      },
+      token: {
+        displayName: 'ETH',
+
+        image: 'https://api.rango.exchange/tokens/ETH/ETH.png',
+      },
+      price: {
+        value: '14.863736725876758517',
+      },
+    },
+  },
+  {
+    swapper: {
+      displayName: 'Pancake',
+      image:
+        'https://raw.githubusercontent.com/rango-exchange/assets/main/swappers/Pancake/icon.svg',
+    },
+    from: {
+      token: {
+        displayName: 'OSMO',
+        image: 'https://api.rango.exchange/tokens/COSMOS/OSMO.png',
+      },
+      chain: {
+        displayName: 'Osmosis',
+        image:
+          'https://raw.githubusercontent.com/rango-exchange/assets/main/blockchains/OSMOSIS/icon.svg',
+      },
+      price: {
+        value: '5.546',
+      },
+    },
+    to: {
+      chain: {
+        displayName: 'ETH',
+        image: 'https://api.rango.exchange/blockchains/ethereum.svg',
+      },
+      token: {
+        displayName: 'ETH',
+
+        image: 'https://api.rango.exchange/tokens/ETH/ETH.png',
+      },
+      price: {
+        value: '14.863736725876758517',
+      },
+    },
+  },
+];
+
+export const tags = [
+  {
+    value: 'RECOMMENDED',
+    label: 'Recommended',
+  },
+  {
+    value: 'CENTRALIZED',
+    label: 'Centrailized',
+  },
+  {
+    value: 'LOWEST_FEE',
+    label: 'Lowest Fee',
+  },
+  {
+    value: 'FASTEST',
+    label: 'Fastest',
+  },
+  {
+    value: 'HIGH_IMPACT',
+    label: 'High Impact',
+  },
+];

package/src/components/PriceImpact/PriceImpact.tsx

@@ -8,13 +8,14 @@ import { Container, OutputUsdValue } from './PriceImpact.styles';
 
 export function PriceImpact(props: PriceImpactProps) {
   const {
-    size,
+    size = 'medium',
     outputUsdValue,
     realOutputUsdValue,
     percentageChange,
     warningLevel,
     error,
     tooltipProps,
+    ...rest
   } = props;
 
   let percentageChangeColor = '$neutral600';
@@ -25,7 +26,7 @@ export function PriceImpact(props: PriceImpactProps) {
   }
 
   return (
-    <Container>
+    <Container {...rest}>
       {outputUsdValue && (
         <Tooltip
           content={realOutputUsdValue}
@@ -36,17 +37,14 @@ export function PriceImpact(props: PriceImpactProps) {
               : undefined
           }
           side={tooltipProps?.side}>
-          <OutputUsdValue
-            size={size === 'small' ? 'small' : 'medium'}
-            variant="body"
-            color="$neutral600">
+          <OutputUsdValue size={size} variant="body" color="$neutral600">
             {`~$${outputUsdValue}`}
           </OutputUsdValue>
         </Tooltip>
       )}
       {((outputUsdValue && percentageChange) || !outputUsdValue) && (
         <Typography
-          size={size === 'small' ? 'small' : 'medium'}
+          size={size}
           variant="body"
           ml={4}
           color={percentageChangeColor}>

package/src/components/PriceImpact/PriceImpact.types.ts

@@ -1,9 +1,10 @@
 import type { PropTypes as TooltipPropTypes } from '../Tooltip/Tooltip.types';
+import type { TypographyPropTypes } from '../Typography';
 
 export type PriceImpactWarningLevel = 'low' | 'high' | undefined;
 
 export type PriceImpactProps = {
-  size: 'small' | 'large';
+  size: TypographyPropTypes['size'];
   outputUsdValue?: string;
   realOutputUsdValue?: string;
   error?: string;

package/src/components/QuoteTag/QuoteTag.styles.ts

@@ -0,0 +1,44 @@
+import { css, darkTheme, styled } from '../../theme';
+
+export const getLabelStyles = css({});
+
+export const TagContainer = styled('div', {
+  backgroundColor: '$neutral400',
+  borderRadius: '$xs',
+  padding: '$2 $5',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  variants: {
+    type: {
+      RECOMMENDED: {
+        [`& .${getLabelStyles}`]: {
+          color: '$secondary500',
+          [`.${darkTheme} &`]: {
+            color: '$secondary400',
+          },
+        },
+      },
+      FASTEST: {
+        [`& .${getLabelStyles}`]: {
+          color: '$success500',
+        },
+      },
+      HIGH_IMPACT: {
+        [`& .${getLabelStyles}`]: {
+          color: '$error500',
+        },
+      },
+      LOWEST_FEE: {
+        [`& .${getLabelStyles}`]: {
+          color: '#FF4DAD',
+        },
+      },
+      CENTRALIZED: {
+        [`& .${getLabelStyles}`]: {
+          color: '$warning500',
+        },
+      },
+    },
+  },
+});