@rango-dev/ui 0.22.1-next.0 → 0.22.1-next.2

package/src/components/BestRoute/BestRoute.tsx

@@ -1,176 +0,0 @@
-import type { BestRouteProps } from './BestRoute.types';
-
-import React, { useLayoutEffect, useRef, useState } from 'react';
-
-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';
-
-import {
-  Chains,
-  Content,
-  EXPANDABLE_ROUTES_TRANSITION_DURATION,
-  FrameIcon,
-  HorizontalSeparator,
-  IconContainer,
-  RouteContainer,
-  SummaryContainer,
-} from './BestRoute.styles';
-import { RouteSummary } from './RouteSummary';
-
-export function BestRoute(props: BestRouteProps) {
-  const {
-    steps,
-    totalFee,
-    totalTime,
-    input,
-    output,
-    percentageChange,
-    warningLevel,
-    type,
-    recommended = true,
-  } = props;
-
-  const numberOfSteps = steps.length;
-
-  const [expanded, setExpanded] = useState(props.expanded);
-  const routeRef = useRef<HTMLButtonElement | null>(null);
-
-  useLayoutEffect(() => {
-    if (expanded && routeRef.current) {
-      setTimeout(() => {
-        routeRef?.current?.scrollIntoView({ behavior: 'smooth' });
-      }, EXPANDABLE_ROUTES_TRANSITION_DURATION);
-    }
-  }, [expanded]);
-
-  return (
-    <>
-      <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>
-              <Typography
-                color="$neutral600"
-                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}
-              />
-              <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>
-    </>
-  );
-}

package/src/components/BestRoute/BestRoute.types.ts

@@ -1,32 +0,0 @@
-import type { SwapInputProps } from '../../containers/SwapInput/SwapInput.types';
-import type { PriceImpactProps } from '../PriceImpact/PriceImpact.types';
-import type { ReactNode } from 'react';
-
-type BaseStep = Pick<SwapInputProps, 'chain' | 'token' | 'price'>;
-
-export type Step = {
-  swapper: SwapInputProps['chain'];
-  from: BaseStep;
-  to: BaseStep;
-  error?: {
-    title?: string;
-    description?: string;
-  };
-  alerts?: ReactNode;
-};
-
-export type BestRouteProps = Pick<
-  PriceImpactProps,
-  'percentageChange' | 'warningLevel'
-> & {
-  type: 'basic' | 'list-item' | 'swap-preview';
-  recommended: boolean;
-  tag?: ReactNode;
-  input: { value: string; usdValue: string };
-  output: { value: string; usdValue?: string };
-  steps: Step[];
-  totalFee: string;
-  totalTime: string;
-  expanded?: boolean;
-  tooltipContainer?: HTMLElement;
-};

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

@@ -1,110 +0,0 @@
-import { darkTheme, styled } from '../../theme';
-
-export const Container = styled('div', {
-  $$color: '$colors$neutral100',
-  [`.${darkTheme} &`]: {
-    $$color: '$colors$neutral300',
-  },
-  backgroundColor: '$$color',
-  borderBottomLeftRadius: '$xm',
-  borderBottomRightRadius: '$xm',
-  padding: '$15 ',
-  '& .cost-and-tag': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    height: '22px',
-  },
-  variants: {
-    rounded: {
-      true: {
-        borderRadius: '$xm',
-      },
-    },
-  },
-  '& .cost': {
-    display: 'flex',
-  },
-  '& .basic-summary': {
-    padding: '$15 $0 14px $0',
-  },
-  '& .output': {
-    padding: '$6 $0 $15 $0',
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  '& .output__token-info': {
-    display: 'flex',
-    justifyContent: 'start',
-    alignItems: 'center',
-    paddingBottom: '$5',
-  },
-  '& .route-summary': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'end',
-  },
-  '& .route-summary__separator': {
-    height: '$28',
-    marginLeft: '13px',
-    borderLeft: '1px solid $neutral700',
-  },
-  '& .token-amount': {
-    display: 'flex',
-    justifyContent: 'space-between',
-  },
-  '& .token-amount__label': {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'start',
-  },
-  '& .chains': {
-    paddingTop: '$2',
-  },
-  '& .swap-preview': {
-    padding: '$15 $0 $15 $0',
-  },
-  '& .steps': {
-    paddingLeft: '$8',
-  },
-  '& .step__title': {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '& .step__content': {
-    display: 'flex',
-    alignItems: 'start',
-  },
-  '& .step__tokens': {
-    paddingTop: '$5',
-    paddingBottom: '$10',
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '& .step__token-info': {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '& .step__icon-container': {
-    margin: '$0 $2',
-    padding: '$4',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export const StepSeparator = styled('div', {
-  borderLeft: '1px dashed black',
-  minHeight: ' 64px',
-  margin: '0px 11.5px',
-  alignSelf: 'stretch',
-  variants: {
-    hideSeparator: {
-      true: {
-        minHeight: 'unset',
-        height: '0',
-      },
-    },
-  },
-});

package/src/components/BestRoute/BestRouteSkeleton.tsx

@@ -1,112 +0,0 @@
-import type { PropTypes } from './BestRouteSkeleton.types';
-
-import React from 'react';
-
-import { NextIcon } from '../../icons';
-import { ChainToken } from '../ChainToken';
-import { Divider } from '../Divider';
-import { Skeleton } from '../Skeleton';
-
-import { Container, StepSeparator } from './BestRouteSkeleton.styles';
-
-function StepSkeleton(props: { separator?: boolean }) {
-  const { separator = true } = props;
-  return (
-    <>
-      <div className="step__title">
-        <Skeleton height={22} width={22} variant="circular" />
-        <Divider direction="horizontal" size={8} />
-        <Skeleton height={15} width={148} variant="rounded" />
-      </div>
-      <div className="step__content">
-        <StepSeparator hideSeparator={!separator} />
-        <div className="step__tokens">
-          <div className="step__token-info">
-            <ChainToken size="small" loading chainImage="" tokenImage="" />
-            <Divider direction="horizontal" size={8} />
-            <Skeleton height={12} width={76} variant="rounded" />
-          </div>
-          <div className="step__icon-container">
-            <NextIcon color="gray" size={16} />
-          </div>
-          <div className="step__token-info">
-            <ChainToken size="small" loading chainImage="" tokenImage="" />
-            <Divider direction="horizontal" size={8} />
-            <Skeleton height={12} width={76} variant="rounded" />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
-
-export function BestRouteSkeleton(props: PropTypes) {
-  const { type, expanded, tag = false } = props;
-  const routeSummary = (
-    <div className="route-summary">
-      <div className="token-amount">
-        <ChainToken loading size="medium" chainImage="" tokenImage="" />
-        <Divider size={8} direction="horizontal" />
-        <div className="token-amount__label">
-          <Skeleton height={10} width={60} variant="rounded" />
-          <Divider size={4} />
-          <Skeleton height={15} width={148} variant="rounded" />
-        </div>
-      </div>
-      <Skeleton height={12} width={64} variant="rounded" />
-    </div>
-  );
-
-  return (
-    <Container>
-      <div className="cost-and-tag">
-        <div className="cost">
-          <Skeleton width={60} height={10} variant="rounded" />
-          <Divider size={4} direction="horizontal" />
-          <Skeleton width={60} height={10} variant="rounded" />
-          <Divider size={4} direction="horizontal" />
-          <Skeleton width={60} height={10} variant="rounded" />
-        </div>
-        {tag && <Skeleton height={22} width={100} variant="rounded" />}
-      </div>
-      {type === 'basic' && (
-        <div className="basic-summary">
-          <Skeleton height={15} width={148} variant="rounded" />
-        </div>
-      )}
-      {type === 'list-item' && (
-        <div className="output">
-          <div className="output__token-info">
-            <ChainToken loading size="medium" chainImage="" tokenImage="" />
-            <Divider direction="horizontal" size={4} />
-            <Skeleton height={15} width={150} variant="rounded" />
-          </div>
-          <Divider size={4} />
-          <Skeleton height={10} width={184} variant="rounded" />
-        </div>
-      )}
-      {type === 'swap-preview' && (
-        <>
-          <Divider size={4} />
-          <div className="swap-preview">
-            {routeSummary}
-            <div className="route-summary__separator" />
-            {routeSummary}
-          </div>
-        </>
-      )}
-      <div className="chains">
-        <Skeleton height={15} width={321} variant="rounded" />
-      </div>
-
-      {expanded && (
-        <div className="steps">
-          <Divider size={20} />
-          <StepSkeleton />
-          <StepSkeleton />
-          <StepSkeleton separator={false} />
-        </div>
-      )}
-    </Container>
-  );
-}

package/src/components/BestRoute/BestRouteSkeleton.types.ts

@@ -1,5 +0,0 @@
-export type PropTypes = {
-  type: 'basic' | 'list-item' | 'swap-preview';
-  expanded?: boolean;
-  tag?: boolean;
-};

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

@@ -1,15 +0,0 @@
-import { styled } from '../../theme';
-
-export const Container = styled('div', {
-  position: 'relative',
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
-  '& .separator': {
-    height: '14px',
-    marginLeft: '14px',
-    position: 'absolute',
-    borderLeft: '1px solid $foreground',
-    top: '42%',
-  },
-});

package/src/components/BestRoute/RouteSummary.tsx

@@ -1,48 +0,0 @@
-import type { Step } from './BestRoute.types';
-import type { PriceImpactWarningLevel } from '../PriceImpact';
-
-import React from 'react';
-
-import { TokenAmount } from '../TokenAmount';
-
-import { Container } from './RouteSummary.styles';
-
-type PropTypes = {
-  from: Step['from'];
-  to: Step['to'];
-  percentageChange?: string | null;
-  warningLevel: PriceImpactWarningLevel;
-};
-
-export function RouteSummary(props: PropTypes) {
-  const { from, to, percentageChange, warningLevel } = props;
-  return (
-    <Container>
-      <TokenAmount
-        direction="horizontal"
-        label="Swap input"
-        type="input"
-        price={{ value: from.price.value, usdValue: from.price.usdValue }}
-        token={{
-          displayName: from.token.displayName,
-          image: from.token.image,
-        }}
-        chain={{ image: from.chain.image }}
-      />
-      <div className="separator" />
-      <TokenAmount
-        direction="horizontal"
-        label="Estimated output"
-        type="output"
-        price={{ value: to.price.value, usdValue: to.price.usdValue }}
-        token={{
-          displayName: to.token.displayName,
-          image: to.token.image,
-        }}
-        chain={{ image: to.chain.image }}
-        percentageChange={percentageChange}
-        warningLevel={warningLevel}
-      />
-    </Container>
-  );
-}

package/src/components/BestRoute/index.ts

@@ -1,4 +0,0 @@
-export { BestRoute } from './BestRoute';
-export type { Step } from './BestRoute.types';
-export { BestRouteSkeleton } from './BestRouteSkeleton';
-export { RouteSummary } from './RouteSummary';

package/src/components/BestRoute/mock.ts

@@ -1,142 +0,0 @@
-import type { BestRouteProps } from './BestRoute.types';
-
-export const route1: BestRouteProps = {
-  type: 'list-item',
-  recommended: true,
-  input: { value: '1', usdValue: '30000' },
-  output: { value: '3161.441024', usdValue: '26.890' },
-  steps: [
-    {
-      swapper: {
-        displayName: 'MayaProtocol',
-        image: 'https://api.rango.exchange/swappers/maya.jpg',
-      },
-      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: '1.00000000',
-        },
-      },
-      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: 'ETH',
-          image: 'https://api.rango.exchange/tokens/ETH/ETH.png',
-        },
-        chain: {
-          displayName: 'ETH',
-          image: 'https://api.rango.exchange/blockchains/ethereum.svg',
-        },
-        price: { value: '14.863736725876758517' },
-      },
-      to: {
-        token: {
-          displayName: 'ETH',
-          image: 'https://api.rango.exchange/tokens/COSMOS/ETH.png',
-        },
-        chain: {
-          displayName: 'OSMOSIS',
-          image: 'https://api.rango.exchange/blockchains/osmosis.svg',
-        },
-        price: {
-          value: '14.825674725876758517',
-        },
-      },
-    },
-    {
-      swapper: {
-        displayName: 'Osmosis',
-        image: 'https://api.rango.exchange/swappers/osmosis.png',
-      },
-      from: {
-        token: {
-          displayName: 'ETH',
-          image: 'https://api.rango.exchange/tokens/COSMOS/ETH.png',
-        },
-        chain: {
-          displayName: 'OSMOSIS',
-          image: 'https://api.rango.exchange/blockchains/osmosis.svg',
-        },
-        price: {
-          value: '14.825674725876758517',
-        },
-      },
-      to: {
-        token: {
-          displayName: 'ATOM',
-          image: 'https://api.rango.exchange/tokens/COSMOS/ATOM.png',
-        },
-        chain: {
-          displayName: 'OSMOSIS',
-          image: 'https://api.rango.exchange/blockchains/osmosis.svg',
-        },
-        price: {
-          value: '3161.441024',
-        },
-      },
-    },
-    {
-      swapper: {
-        displayName: 'IBC',
-        image: 'https://api.rango.exchange/swappers/IBC.png',
-      },
-      from: {
-        token: {
-          displayName: 'ATOM',
-          image: 'https://api.rango.exchange/tokens/COSMOS/ATOM.png',
-        },
-        chain: {
-          displayName: 'OSMOSIS',
-          image: 'https://api.rango.exchange/blockchains/osmosis.svg',
-        },
-        price: {
-          value: '3161.441024',
-        },
-      },
-      to: {
-        token: {
-          displayName: 'ATOM',
-          image: 'https://api.rango.exchange/tokens/COSMOS/ATOM.png',
-        },
-        chain: {
-          displayName: 'COSMOS',
-          image: 'https://api.rango.exchange/blockchains/cosmos.svg',
-        },
-        price: {
-          value: '3161.441024',
-        },
-      },
-    },
-  ],
-
-  percentageChange: '7.51',
-  warningLevel: 'high',
-  totalFee: '9.90',
-  totalTime: '23:00',
-};

package/src/components/RouteCost/index.ts

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