@rango-dev/widget-embedded 0.17.1-next.9 → 0.19.0

package/dist/types/quote.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../src/types/quote.ts"],"names":[],"mappings":"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"}

package/dist/utils/quote.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../src/utils/quote.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EACV,KAAK,EACL,iBAAiB,EACjB,cAAc,EACd,KAAK,EACN,MAAM,WAAW,CAAC;AAGnB,OAAO,SAAS,MAAM,cAAc,CAAC;AAqBrC,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,KAAK,EAAE,EACf,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,KAAK,EAAE,cAAc,GAAG,IAAI,GAC3B,KAAK,GAAG,IAAI,CAqBd;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,iBAAiB,GAAG,IAAI,GAC9B,MAAM,GAAG,IAAI,GAAG,SAAS,CAE3B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAK1B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,GACxB,OAAO,CAMT;AAED,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,SAAS,GAAG,IAAI,EAC9B,YAAY,EAAE,SAAS,GAAG,CAAC,WAQ5B;AAED,wBAAgB,0BAA0B,CACxC,cAAc,EAAE,MAAM,EACtB,GAAG,EAAE,0BAA0B,EAAE,GAAG,IAAI,GACvC,wBAAwB,EAAE,GAAG,IAAI,CAcnC;AAED,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,MAAM,GAClB,uBAAuB,CASzB;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,KAAK,EAAE,EAAE,CAAC,SAAS,KAAK,EAAE,EACnE,KAAK,EAAE,CAAC,EACR,KAAK,EAAE,CAAC,KAUT;AAED,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,cAAc,EAAE,EAC7B,MAAM,EAAE,KAAK,EAAE,GACd;IACD,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,SAAS,EAAE,KAAK,GAAG,IAAI,CAAC;IACxB,YAAY,EAAE,cAAc,GAAG,IAAI,CAAC;IACpC,OAAO,EAAE,KAAK,GAAG,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;CACrB,CA4CA;AAED,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,iBAAiB,EACxB,MAAM,EAAE;IACN,SAAS,EAAE,KAAK,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB,GACA,YAAY,GAAG,IAAI,CAgDrB;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,iBAAiB,GACvB,UAAU,GAAG,IAAI,CA+BnB;AAED,wBAAgB,cAAc,CAC5B,aAAa,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,EACxC,cAAc,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,iBAgB1C"}

package/src/components/NoResult/index.ts

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

package/src/components/Quote/Quote.styles.ts

@@ -1,212 +0,0 @@
-import * as Collapsible from '@radix-ui/react-collapsible';
-import { darkTheme, styled } from '@rango-dev/ui';
-
-import { CollapsibleContent } from '../ConfirmWalletsModal/ConfirmWallets.styles';
-
-export const EXPANDABLE_QUOTE_TRANSITION_DURATION = 300;
-
-export const QuoteContainer = 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_QUOTE_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/Quote/Quote.tsx

@@ -1,345 +0,0 @@
-import type { QuoteProps } from './Quote.types';
-import type { Step } from '@rango-dev/ui';
-import type { SwapResult } from 'rango-sdk';
-
-import { i18n } from '@lingui/core';
-import {
-  Alert,
-  ChevronDownIcon,
-  ChevronRightIcon,
-  Divider,
-  Image,
-  InfoIcon,
-  QuoteCost,
-  StepDetails,
-  TokenAmount,
-  Tooltip,
-  Typography,
-} from '@rango-dev/ui';
-import React, { useLayoutEffect, useRef, useState } from 'react';
-
-import {
-  GAS_FEE_MAX_DECIMALS,
-  GAS_FEE_MIN_DECIMALS,
-  PERCENTAGE_CHANGE_MAX_DECIMALS,
-  PERCENTAGE_CHANGE_MIN_DECIMALS,
-  TOKEN_AMOUNT_MAX_DECIMALS,
-  TOKEN_AMOUNT_MIN_DECIMALS,
-} from '../../constants/routing';
-import {
-  FooterAlert,
-  FooterStepAlarm,
-} from '../../containers/QuoteInfo/QuoteInfo.styles';
-import { useAppStore } from '../../store/AppStore';
-import { QuoteErrorType, QuoteWarningType } from '../../types';
-import {
-  numberToString,
-  secondsToString,
-  totalArrivalTime,
-} from '../../utils/numbers';
-import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
-import { getTotalFeeInUsd } from '../../utils/swap';
-
-import {
-  Chains,
-  Content,
-  EXPANDABLE_QUOTE_TRANSITION_DURATION,
-  FrameIcon,
-  HorizontalSeparator,
-  IconContainer,
-  QuoteContainer,
-  SummaryContainer,
-} from './Quote.styles';
-import { QuoteSummary } from './QuoteSummary';
-
-export function Quote(props: QuoteProps) {
-  const {
-    quote,
-    input,
-    output,
-    error,
-    warning,
-    type,
-    recommended = true,
-  } = props;
-  const tokens = useAppStore().tokens();
-
-  const [expanded, setExpanded] = useState(props.expanded);
-  const quoteRef = useRef<HTMLButtonElement | null>(null);
-  const totalFee = numberToString(
-    getTotalFeeInUsd(quote.result?.swaps ?? [], tokens),
-    GAS_FEE_MIN_DECIMALS,
-    GAS_FEE_MAX_DECIMALS
-  );
-  const totalTime = secondsToString(totalArrivalTime(quote.result?.swaps));
-
-  const priceImpact = getPriceImpact(input.usdValue, output.usdValue ?? null);
-  const percentageChange = numberToString(
-    String(priceImpact),
-    PERCENTAGE_CHANGE_MIN_DECIMALS,
-    PERCENTAGE_CHANGE_MAX_DECIMALS
-  );
-  const priceImpactWarningLevel = getPriceImpactLevel(priceImpact ?? 0);
-
-  const getQuoteSteps = (swaps: SwapResult[]): Step[] => {
-    return swaps.map((swap, index) => {
-      let stepState: 'error' | 'warning' | undefined = undefined;
-      const stepHasError =
-        (error?.type === QuoteErrorType.BRIDGE_LIMIT &&
-          error.swap.swapperId === swap.swapperId) ||
-        (warning?.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE &&
-          warning.recommendedSlippages?.has(index));
-      const stepHasWarning =
-        warning?.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE &&
-        warning.recommendedSlippages?.has(index);
-
-      if (stepHasError) {
-        stepState = 'error';
-      } else if (stepHasWarning) {
-        stepState = 'warning';
-      }
-
-      return {
-        swapper: { displayName: swap.swapperId, image: swap.swapperLogo },
-        from: {
-          token: { displayName: swap.from.symbol, image: swap.from.logo },
-          chain: {
-            displayName: swap.from.blockchain,
-            image: swap.from.blockchainLogo,
-          },
-          price: {
-            value:
-              index === 0
-                ? numberToString(
-                    input.value,
-                    TOKEN_AMOUNT_MIN_DECIMALS,
-                    TOKEN_AMOUNT_MAX_DECIMALS
-                  )
-                : swap.fromAmount,
-          },
-        },
-        to: {
-          token: { displayName: swap.to.symbol, image: swap.to.logo },
-          chain: {
-            displayName: swap.to.blockchain,
-            image: swap.to.blockchainLogo,
-          },
-          price: {
-            value: swap.toAmount,
-          },
-        },
-        state: stepState,
-        alerts:
-          stepHasError || stepHasWarning ? (
-            <FooterStepAlarm>
-              <Alert
-                type={stepHasError ? 'error' : 'warning'}
-                title={
-                  error?.type === QuoteErrorType.BRIDGE_LIMIT
-                    ? error?.recommendation
-                    : i18n.t('Slippage Error:')
-                }
-                footer={
-                  <FooterAlert>
-                    {error?.type === QuoteErrorType.BRIDGE_LIMIT && (
-                      <>
-                        <Typography
-                          size="xsmall"
-                          variant="body"
-                          color="neutral900">
-                          {error.fromAmountRangeError}
-                        </Typography>
-                        <Divider direction="horizontal" size={8} />
-                        <Typography
-                          size="xsmall"
-                          variant="body"
-                          color="neutral900">
-                          |
-                        </Typography>
-                        <Divider direction="horizontal" size={8} />
-                        <Typography
-                          size="xsmall"
-                          variant="body"
-                          color="neutral900">
-                          {i18n.t({
-                            id: 'Yours: {amount} {symbol}',
-                            values: {
-                              amount: numberToString(
-                                swap.fromAmount,
-                                TOKEN_AMOUNT_MIN_DECIMALS,
-                                TOKEN_AMOUNT_MAX_DECIMALS
-                              ),
-                              symbol: swap?.from.symbol,
-                            },
-                          })}
-                        </Typography>
-                      </>
-                    )}
-                    {(error?.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE ||
-                      warning?.type ===
-                        QuoteWarningType.INSUFFICIENT_SLIPPAGE) && (
-                      <Typography
-                        size="xsmall"
-                        variant="body"
-                        color="neutral900">
-                        {i18n.t({
-                          id: 'min required Slippage: {minRequiredSlippage}',
-                          values: {
-                            ...(error?.type ===
-                              QuoteErrorType.INSUFFICIENT_SLIPPAGE && {
-                              minRequiredSlippage:
-                                error.recommendedSlippages?.get(index),
-                            }),
-                            ...(warning?.type ===
-                              QuoteWarningType.INSUFFICIENT_SLIPPAGE && {
-                              minRequiredSlippage:
-                                warning.recommendedSlippages?.get(index),
-                            }),
-                          },
-                        })}
-                      </Typography>
-                    )}
-                  </FooterAlert>
-                }
-              />
-            </FooterStepAlarm>
-          ) : undefined,
-      };
-    });
-  };
-  const steps = getQuoteSteps(quote.result?.swaps ?? []);
-  const numberOfSteps = steps.length;
-
-  useLayoutEffect(() => {
-    if (expanded && quoteRef.current) {
-      setTimeout(() => {
-        quoteRef?.current?.scrollIntoView({ behavior: 'smooth' });
-      }, EXPANDABLE_QUOTE_TRANSITION_DURATION);
-    }
-  }, [expanded]);
-
-  return (
-    <>
-      <SummaryContainer
-        recommended={recommended}
-        listItem={type === 'list-item'}
-        basic={type === 'basic'}>
-        <div className="summary">
-          <QuoteCost 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={priceImpactWarningLevel}
-            />
-          )}
-          {type === 'swap-preview' && (
-            <>
-              <QuoteSummary
-                from={steps[0].from}
-                to={steps[numberOfSteps - 1].to}
-                percentageChange={percentageChange}
-                warningLevel={priceImpactWarningLevel}
-              />
-              <Divider size={4} />
-            </>
-          )}
-        </div>
-        <QuoteContainer
-          recommended={recommended}
-          open={expanded}
-          onOpenChange={setExpanded}>
-          <Chains
-            ref={(ref) => (quoteRef.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="quote-details"
-                    key={key}
-                    step={step}
-                    hasSeparator={index !== steps.length - 1}
-                    state={step.state}
-                  />
-                );
-              })}
-            </div>
-          </Content>
-        </QuoteContainer>
-      </SummaryContainer>
-    </>
-  );
-}

package/src/components/Quote/Quote.types.ts

@@ -1,16 +0,0 @@
-import type { QuoteError, QuoteWarning } from '../../types';
-import type { BestRouteResponse } from 'rango-sdk';
-import type { ReactNode } from 'react';
-
-export type QuoteProps = {
-  type: 'basic' | 'list-item' | 'swap-preview';
-  error: QuoteError | null;
-  warning: QuoteWarning | null;
-  recommended: boolean;
-  tag?: ReactNode;
-  quote: BestRouteResponse;
-  input: { value: string; usdValue: string };
-  output: { value: string; usdValue?: string };
-  expanded?: boolean;
-  tooltipContainer?: HTMLElement;
-};

package/src/components/Quote/QuoteSkeleton.styles.ts

@@ -1,110 +0,0 @@
-import { darkTheme, styled } from '@rango-dev/ui';
-
-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',
-  },
-  '& .quote-summary': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'end',
-  },
-  '& .quote-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',
-      },
-    },
-  },
-});