@rango-dev/ui 0.24.0 → 0.24.1-next.0

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/RouteCost.styles.ts

@@ -1,20 +0,0 @@
-import { styled } from '../../theme';
-
-export const Container = styled('div', {
-  borderRadius: '$xs',
-  display: 'flex',
-  justifyContent: 'start',
-  alignItems: 'center',
-  paddingBottom: '$10',
-  '& .item': {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '& .icon': {
-    width: '$16',
-    height: '$16',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});

package/src/components/RouteCost/index.ts

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

package/src/containers/History/types.tsx

@@ -1 +0,0 @@
-export type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';

package/src/helper/index.ts

@@ -1,99 +0,0 @@
-/* eslint-disable @typescript-eslint/no-magic-numbers */
-
-export function containsText(text: string, searchText: string): boolean {
-  return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
-}
-
-export function getConciseAddress(
-  address: string | null,
-  maxChars = 8,
-  ellipsisLength = 3
-): string | null {
-  if (!address) {
-    return null;
-  }
-  if (address.length < 2 * maxChars + ellipsisLength) {
-    return address;
-  }
-  const start = Math.ceil((address.length - maxChars) / 2);
-  const end = address.length - maxChars;
-  return `${address.substr(start, maxChars)}${'.'.repeat(
-    ellipsisLength
-  )}${address.substr(end)}`;
-}
-
-const hexToRgb = (hex: string) =>
-  ((value) =>
-    value.length === 3
-      ? value.split('').map((c) => parseInt(c.repeat(2), 16))
-      : (value.match(/.{1,2}/g) || []).map((v) => parseInt(v, 16)))(
-    hex.replace('#', '')
-  );
-
-const isHexTooDark = (hexColor: string) =>
-  (([r, g, b]) => 0.2126 * r + 0.7152 * g + 0.0722 * b < 40)(
-    hexToRgb(hexColor)
-  );
-
-const isHexTooLight = (hexColor: string) =>
-  (([r, g, b]) => (r * 299 + g * 587 + b * 114) / 1000 > 155)(
-    hexToRgb(hexColor)
-  );
-
-const colorShade = (col: string, amt: number) => {
-  col = col.replace(/^#/, '');
-  if (col.length === 3) {
-    col = col[0] + col[0] + col[1] + col[1] + col[2] + col[2];
-  }
-  let [r, g, b]: any = col.match(/.{2}/g);
-  [r, g, b] = [
-    parseInt(r, 16) + amt,
-    parseInt(g, 16) + amt,
-    parseInt(b, 16) + amt,
-  ];
-
-  r = Math.max(Math.min(255, r), 0).toString(16);
-  g = Math.max(Math.min(255, g), 0).toString(16);
-  b = Math.max(Math.min(255, b), 0).toString(16);
-
-  const rr = (r.length < 2 ? '0' : '') + r;
-  const gg = (g.length < 2 ? '0' : '') + g;
-  const bb = (b.length < 2 ? '0' : '') + b;
-
-  return `#${rr}${gg}${bb}`;
-};
-
-export const generateRangeColors = (
-  name: string,
-  mode: 'light' | 'dark',
-  color?: string
-) => {
-  let colors = { [name]: color };
-  if (color) {
-    let c = color;
-    if (isHexTooDark(color) || mode === 'dark') {
-      for (let i = 1; i < 10; i++) {
-        colors = {
-          ...colors,
-          [name + i * 100]:
-            name === 'neutral'
-              ? colorShade(c, i * 15)
-              : colorShade(color, i * 5),
-        };
-      }
-    }
-    if (isHexTooLight(color) || mode === 'light') {
-      for (let i = 1; i < 10; i++) {
-        c = colorShade(c, -(i * 5));
-        colors = {
-          ...colors,
-          [name + i * 100]:
-            name === 'neutral'
-              ? colorShade(c, -(i * 5))
-              : colorShade(color, -(i * 5)),
-        };
-      }
-    }
-  }
-  return colors;
-};