@rango-dev/ui 0.24.0 → 0.25.0

package/dist/widget/ui/src/components/RouteCost/RouteCost.styles.d.ts

@@ -1,158 +0,0 @@
-export declare const Container: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
-    sm: string;
-    md: string;
-    lg: string;
-}, import("@stitches/react/types/css-util").CSS<{
-    sm: string;
-    md: string;
-    lg: string;
-}, {
-    colors: {
-        primary: string;
-        primary500: string;
-        primary600: string;
-        secondary: string;
-        secondary100: string;
-        secondary200: string;
-        secondary300: string;
-        secondary400: string;
-        secondary500: string;
-        secondary600: string;
-        secondary700: string;
-        secondary800: string;
-        secondary900: string;
-        neutral: string;
-        neutral100: string;
-        neutral200: string;
-        neutral300: string;
-        neutral400: string;
-        neutral500: string;
-        neutral600: string;
-        neutral700: string;
-        neutral800: string;
-        neutral900: string;
-        error100: string;
-        error300: string;
-        error500: string;
-        error600: string;
-        error700: string;
-        warning100: string;
-        warning300: string;
-        warning500: string;
-        warning600: string;
-        warning700: string;
-        info: string;
-        info100: string;
-        info300: string;
-        info500: string;
-        info600: string;
-        info700: string;
-        success100: string;
-        success300: string;
-        success500: string;
-        success600: string;
-        success700: string;
-        background: string;
-        foreground: string;
-    };
-    space: {
-        0: string;
-        5: string;
-        10: string;
-        15: string;
-        20: string;
-        25: string;
-        30: string;
-        40: string;
-        46: string;
-        50: string;
-        60: string;
-        70: string;
-        80: string;
-        90: string;
-        100: string;
-        2: string;
-        4: string;
-        6: string;
-        8: string;
-        12: string;
-        16: string;
-        24: string;
-        28: string;
-        32: string;
-    };
-    radii: {
-        xs: string;
-        sm: string;
-        xm: string;
-        md: string;
-        xl: string;
-        lg: string;
-        primary: string;
-        secondary: string;
-    };
-    fontSizes: {
-        10: string;
-        12: string;
-        14: string;
-        16: string;
-        18: string;
-        20: string;
-        22: string;
-        24: string;
-        28: string;
-        32: string;
-        36: string;
-        40: string;
-        48: string;
-    };
-    fonts: {
-        primary: string;
-        widget: string;
-    };
-    fontWeights: {
-        regular: number;
-        medium: number;
-        semiBold: number;
-        bold: number;
-    };
-    lineHeights: {
-        12: string;
-        16: string;
-        20: string;
-        24: string;
-        26: string;
-        28: string;
-        30: string;
-        36: string;
-        40: string;
-        44: string;
-        52: string;
-        64: string;
-    };
-    letterSpacings: {};
-    sizes: {
-        4: string;
-        6: string;
-        8: string;
-        12: string;
-        16: string;
-        18: string;
-        20: string;
-        24: string;
-        28: string;
-        32: string;
-        36: string;
-        40: string;
-        45: string;
-        48: string;
-    };
-    borderWidths: {};
-    borderStyles: {};
-    shadows: {
-        s: string;
-    };
-    zIndices: {};
-    transitions: {};
-}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
-//# sourceMappingURL=RouteCost.styles.d.ts.map

package/dist/widget/ui/src/components/RouteCost/RouteCost.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RouteCost.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/RouteCost/RouteCost.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAiBpB,CAAC"}

package/dist/widget/ui/src/components/RouteCost/RouteCost.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RouteCost.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/RouteCost/RouteCost.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}

package/dist/widget/ui/src/components/RouteCost/index.d.ts

@@ -1,2 +0,0 @@
-export { RouteCost } from './RouteCost';
-//# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/components/RouteCost/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/RouteCost/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/widget/ui/src/containers/History/types.d.ts

@@ -1,2 +0,0 @@
-export type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
-//# sourceMappingURL=types.d.ts.map

package/dist/widget/ui/src/containers/History/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/History/types.tsx"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC"}

package/dist/widget/ui/src/helper/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/helper/index.ts"],"names":[],"mappings":"AAEA,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAEtE;AAED,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,MAAM,GAAG,IAAI,EACtB,QAAQ,SAAI,EACZ,cAAc,SAAI,GACjB,MAAM,GAAG,IAAI,CAYf;AA2CD,eAAO,MAAM,mBAAmB,SACxB,MAAM,QACN,OAAO,GAAG,MAAM,UACd,MAAM;;CA8Bf,CAAC"}

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

@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { BestRoute } from './BestRoute';
-import { route1 } from './mock';
-
-const meta: Meta<typeof BestRoute> = {
-  component: BestRoute,
-};
-
-export default meta;
-type Story = StoryObj<typeof BestRoute>;
-
-export const Main: Story = {
-  args: {
-    ...route1,
-  },
-};

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

@@ -1,213 +0,0 @@
-import * as Collapsible from '@radix-ui/react-collapsible';
-
-import { darkTheme, styled } from '../../theme';
-import { Image } from '../common';
-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,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;
-};