@rango-dev/widget-embedded 0.12.1-next.3 → 0.12.1-next.31

package/src/components/RouteErrors/RouteErrors.tsx

@@ -0,0 +1,79 @@
+import type { PropTypes } from './RouteErrors.types';
+
+import { Alert, Divider, InfoIcon } from '@rango-dev/ui';
+import React from 'react';
+
+import { errorMessages } from '../../constants/errors';
+import { useBestRouteStore } from '../../store/bestRoute';
+import { hasLimitError, LimitErrorMessage } from '../../utils/swap';
+
+import { Action, Alerts } from './RouteErrors.styles';
+import { RouteErrorsModal } from './RouteErrorsModal';
+
+const WARNING_LEVEL_LIMIT = -10;
+
+export function RouteErrors(props: PropTypes) {
+  const { bestRoute } = useBestRouteStore();
+  const {
+    highValueLoss,
+    percentageChange,
+    priceImpactCanNotBeComputed,
+    openModal,
+    onToggle,
+    totalFeeInUsd,
+    outputUsdValue,
+    inputUsdValue,
+    loading,
+    extraSpace,
+  } = props;
+  const error = hasLimitError(bestRoute);
+  const { recommendation } = LimitErrorMessage(bestRoute);
+
+  const showWarnings = !error && (highValueLoss || priceImpactCanNotBeComputed);
+  const showAlerts = showWarnings || error;
+
+  return (
+    <>
+      {(loading || (extraSpace && !showAlerts)) && <Divider size={20} />}
+      {showAlerts && (
+        <Alerts>
+          {showWarnings && (
+            <>
+              <Alert
+                title={
+                  highValueLoss
+                    ? errorMessages.highValueLossError.title
+                    : errorMessages.unknownPriceError.title
+                }
+                type={
+                  highValueLoss && !!percentageChange?.lt(WARNING_LEVEL_LIMIT)
+                    ? 'error'
+                    : 'warning'
+                }
+                variant="alarm"
+                action={
+                  <Action onClick={() => onToggle(true)}>
+                    <InfoIcon size={12} color="gray" />
+                  </Action>
+                }
+              />
+            </>
+          )}
+          {error && (
+            <Alert type="error" variant="alarm" title={recommendation} />
+          )}
+        </Alerts>
+      )}
+
+      <RouteErrorsModal
+        highValueLoss={highValueLoss}
+        open={openModal}
+        onToggle={onToggle}
+        percentageChange={percentageChange}
+        inputUsdValue={inputUsdValue}
+        outputUsdValue={outputUsdValue}
+        totalFeeInUsd={totalFeeInUsd}
+      />
+    </>
+  );
+}

package/src/components/RouteErrors/RouteErrors.types.ts

@@ -0,0 +1,29 @@
+import type BigNumber from 'bignumber.js';
+
+export interface PropTypes {
+  openModal: boolean;
+  onToggle: (open: boolean) => void;
+  totalFeeInUsd: BigNumber | null;
+  outputUsdValue: BigNumber | null;
+  inputUsdValue: BigNumber | null;
+  percentageChange: BigNumber | null;
+  highValueLoss: boolean;
+  priceImpactCanNotBeComputed: boolean;
+  loading: boolean;
+  extraSpace: boolean;
+}
+
+type ModalPropTypesKeys = keyof Omit<
+  PropTypes,
+  'priceImpactCanNotBeComputed' | 'openModal' | 'extraSpace' | 'loading'
+>;
+
+export type ModalPropTypes = Pick<PropTypes, ModalPropTypesKeys> & {
+  open: boolean;
+};
+
+export interface ModalContentData {
+  title: string;
+  value: string;
+  valueColor?: string;
+}

package/src/components/RouteErrors/RouteErrorsModal.tsx

@@ -0,0 +1,129 @@
+import type { ModalPropTypes } from './RouteErrors.types';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  Divider,
+  MessageBox,
+  Modal,
+  Typography,
+  WarningIcon,
+} from '@rango-dev/ui';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { errorMessages } from '../../constants/errors';
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import {
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
+  HIGHT_PRICE_IMPACT,
+  PERCENTAGE_CHANGE_MAX_DECIMALS,
+  PERCENTAGE_CHANGE_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../../constants/routing';
+import { numberToString } from '../../utils/numbers';
+
+import { Flex } from './RouteErrors.styles';
+import { RouteErrorsModalItem } from './RouteErrorsModalItem';
+
+export function RouteErrorsModal(props: ModalPropTypes) {
+  const {
+    highValueLoss,
+    open,
+    onToggle,
+    percentageChange,
+    inputUsdValue,
+    outputUsdValue,
+    totalFeeInUsd,
+  } = props;
+  const navigate = useNavigate();
+  const type =
+    highValueLoss && !!percentageChange?.lt(HIGHT_PRICE_IMPACT)
+      ? 'error'
+      : 'warning';
+  const highValueLossData = [
+    {
+      title: i18n.t('Swapping'),
+      value: numberToString(
+        inputUsdValue,
+        USD_VALUE_MIN_DECIMALS,
+        USD_VALUE_MAX_DECIMALS
+      ),
+    },
+    {
+      title: i18n.t('Gas cost'),
+      value: numberToString(
+        totalFeeInUsd,
+        GAS_FEE_MIN_DECIMALS,
+        GAS_FEE_MAX_DECIMALS
+      ),
+    },
+    {
+      title: i18n.t('Receiving'),
+      value: numberToString(
+        outputUsdValue,
+        USD_VALUE_MIN_DECIMALS,
+        USD_VALUE_MAX_DECIMALS
+      ),
+    },
+    {
+      title: i18n.t('Price impact'),
+      value: numberToString(
+        percentageChange,
+        PERCENTAGE_CHANGE_MIN_DECIMALS,
+        PERCENTAGE_CHANGE_MAX_DECIMALS
+      ),
+      valueColor: `${type}500`,
+    },
+  ];
+
+  return (
+    <Modal
+      open={open}
+      onClose={() => onToggle(false)}
+      container={document.getElementById('swap-box') || document.body}>
+      {highValueLoss ? (
+        <MessageBox
+          type={type}
+          title={errorMessages.highValueLossError.impactTitle}
+          description={errorMessages.highValueLossError.description}
+        />
+      ) : (
+        <MessageBox
+          type={type}
+          title={errorMessages.unknownPriceError.impactTitle}
+          description={errorMessages.unknownPriceError.description}
+        />
+      )}
+      {highValueLoss && (
+        <Flex>
+          <Divider size={20} />
+          <Typography size="small" variant="title">
+            {i18n.t('Details')}
+          </Typography>
+          <Flex>
+            {highValueLossData.map((item, index) => {
+              const key = index;
+              return <RouteErrorsModalItem key={key} {...item} />;
+            })}
+          </Flex>
+        </Flex>
+      )}
+      <Divider size={32} />
+      <Button
+        type="primary"
+        size="large"
+        prefix={<WarningIcon />}
+        fullWidth
+        onClick={() => {
+          navigate(navigationRoutes.confirmSwap);
+        }}>
+        {highValueLoss
+          ? errorMessages.highValueLossError.confirmMessage
+          : errorMessages.unknownPriceError.confirmMessage}
+      </Button>
+    </Modal>
+  );
+}

package/src/components/RouteErrors/RouteErrorsModalItem.tsx

@@ -0,0 +1,24 @@
+import type { ModalContentData } from './RouteErrors.types';
+
+import { Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { Item } from './RouteErrors.styles';
+
+export function RouteErrorsModalItem(props: ModalContentData) {
+  const { title, value, valueColor } = props;
+
+  return (
+    <Item>
+      <Typography size="medium" variant="label" color="neutral800">
+        {title}
+      </Typography>
+      <Typography
+        size="large"
+        variant="label"
+        color={valueColor || 'foreground'}>
+        {`${valueColor ? '%' : '$'}${value}`}
+      </Typography>
+    </Item>
+  );
+}

package/src/components/RouteErrors/index.ts

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

package/src/components/SearchInput/SearchInput.styles.ts

@@ -0,0 +1,9 @@
+import { styled } from '@rango-dev/ui';
+
+export const IconWrapper = styled('div', {
+  width: '$24',
+  height: '$24',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});

package/src/components/SearchInput/SearchInput.tsx

@@ -0,0 +1,51 @@
+import type { PropTypes } from './SearchInput.types';
+
+import { CloseIcon, IconButton, SearchIcon, TextField } from '@rango-dev/ui';
+import React from 'react';
+
+import { IconWrapper } from './SearchInput.styles';
+
+export function SearchInput(props: PropTypes) {
+  const {
+    variant,
+    fullWidth,
+    color,
+    size,
+    onChange,
+    value,
+    setValue,
+    ...inputAttributes
+  } = props;
+
+  return (
+    <TextField
+      prefix={
+        <IconWrapper>
+          <SearchIcon color="black" />
+        </IconWrapper>
+      }
+      suffix={
+        !!value.length && (
+          <IconButton
+            variant="ghost"
+            onClick={() => setValue?.('')}
+            size="small">
+            <CloseIcon color="gray" size={10} />
+          </IconButton>
+        )
+      }
+      fullWidth={fullWidth}
+      color={color}
+      variant={variant}
+      style={{
+        padding: 10,
+        borderRadius: 25,
+        alignItems: 'center',
+      }}
+      size={size}
+      value={value}
+      onChange={onChange}
+      {...inputAttributes}
+    />
+  );
+}

package/src/components/SearchInput/SearchInput.types.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+
+export type PropTypes = {
+  variant?: 'contained' | 'outlined' | 'ghost';
+  fullWidth?: boolean;
+  color?: 'dark' | 'light';
+  size?: 'small' | 'large';
+  value: string;
+  setValue?: (value: string) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value'>;

package/src/components/SearchInput/index.ts

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

package/src/components/SettingsContainer/SettingsContainer.style.ts

@@ -0,0 +1,27 @@
+import { styled } from '@rango-dev/ui';
+
+export const SettingsContainer = styled('div', {
+  height: '100%',
+});
+
+export const LiquiditySourceList = styled('ul', {
+  padding: '$15 $5 0',
+  margin: 0,
+  listStyle: 'none',
+  height: '100%',
+  overflowY: 'visible',
+});
+
+export const LiquiditySourceSuffix = styled('div', {
+  width: 80,
+  display: 'flex',
+  justifyContent: 'flex-end',
+});
+
+export const NotFoundContainer = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
+});

package/src/components/SettingsContainer/index.ts

@@ -0,0 +1,6 @@
+export {
+  SettingsContainer,
+  LiquiditySourceList,
+  LiquiditySourceSuffix,
+  NotFoundContainer,
+} from './SettingsContainer.style';

package/src/components/Slippage/Slippage.styles.ts

@@ -0,0 +1,24 @@
+import { styled } from '@rango-dev/ui';
+
+export const BaseContainer = styled('div', {
+  paddingTop: '$5',
+  paddingBottom: '30px',
+});
+
+export const SlippageChipsContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'start',
+});
+
+export const Head = styled('div', {
+  display: 'flex',
+  justifyContent: 'start',
+  alignItems: 'center',
+  paddingBottom: '$10',
+});
+
+export const SlippageTooltipContainer = styled('div', {
+  maxWidth: '300px',
+  padding: '$10',
+});

package/src/components/Slippage/Slippage.tsx

@@ -0,0 +1,94 @@
+import { i18n } from '@lingui/core';
+import {
+  Chip,
+  Divider,
+  InfoIcon,
+  TextField,
+  Tooltip,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import {
+  MAX_SLIPPAGE,
+  MIN_SLIPPGAE,
+  SLIPPAGES,
+} from '../../constants/swapSettings';
+import { useSettingsStore } from '../../store/settings';
+import { getContainer } from '../../utils/common';
+
+import { BaseContainer, Head, SlippageChipsContainer } from './Slippage.styles';
+import { SlippageTooltipContent } from './SlippageTooltipContent';
+
+export function Slippage() {
+  const slippage = useSettingsStore.use.slippage();
+  const setSlippage = useSettingsStore.use.setSlippage();
+  const customSlippage = useSettingsStore.use.customSlippage();
+  const setCustomSlippage = useSettingsStore.use.setCustomSlippage();
+
+  return (
+    <BaseContainer>
+      <Head>
+        <Typography variant="title" size="xmedium">
+          {i18n.t('Slippage tolerance per swap')}
+        </Typography>
+        <Divider direction="horizontal" size={4} />
+        <Tooltip
+          container={getContainer()}
+          side="top"
+          content={<SlippageTooltipContent />}>
+          <InfoIcon color="gray" />
+        </Tooltip>
+      </Head>
+      <SlippageChipsContainer>
+        {SLIPPAGES.map((slippageItem, index) => {
+          const key = `slippage-${index}`;
+          return (
+            <>
+              <Chip
+                style={{ width: '64px', flexShrink: 0 }}
+                key={key}
+                onClick={() => {
+                  if (customSlippage) {
+                    setCustomSlippage(null);
+                  }
+                  setSlippage(slippageItem);
+                }}
+                selected={!customSlippage && slippageItem === slippage}
+                label={`${slippageItem.toString()}%`}
+              />
+              <Divider direction="horizontal" size={8} />
+            </>
+          );
+        })}
+        <TextField
+          type="number"
+          min="0.01"
+          max="30"
+          step="0.01"
+          fullWidth
+          variant="contained"
+          value={customSlippage || ''}
+          color="dark"
+          onChange={(event) => {
+            const parsedValue = parseFloat(event.target.value);
+            if (
+              !parsedValue ||
+              (parsedValue >= MIN_SLIPPGAE && parsedValue <= MAX_SLIPPAGE)
+            ) {
+              setCustomSlippage(parsedValue);
+            }
+          }}
+          suffix={
+            customSlippage && (
+              <Typography variant="body" size="small">
+                %
+              </Typography>
+            )
+          }
+          placeholder={i18n.t('Custom')}
+        />
+      </SlippageChipsContainer>
+    </BaseContainer>
+  );
+}

package/src/components/Slippage/SlippageTooltipContent.tsx

@@ -0,0 +1,23 @@
+import { i18n } from '@lingui/core';
+import { Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { SlippageTooltipContainer } from './Slippage.styles';
+
+export function SlippageTooltipContent() {
+  return (
+    <SlippageTooltipContainer>
+      <Typography variant="label" size="medium" color="neutral900">
+        {i18n.t(
+          'Your transaction will be reverted if the price changes unfavorably by more than this percentage'
+        )}
+        <br />
+        <br />
+        <b>{i18n.t('Warning')}</b>:
+        {i18n.t(
+          'This setting is applied per step, e.g. 1Inch, Thorchain, etc. and only that step will be reverted, not the whole transaction'
+        )}
+      </Typography>
+    </SlippageTooltipContainer>
+  );
+}

package/src/components/Slippage/index.ts

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

package/src/components/SwapDetails/SwapDetails.Placeholder.tsx

@@ -0,0 +1,79 @@
+import type { SwapDetailsPlaceholderPropTypes } from './SwapDetails.types';
+
+import { i18n } from '@lingui/core';
+import {
+  CopyIcon,
+  IconButton,
+  NotFound,
+  Skeleton,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import { useNavigateBack } from '../../hooks/useNavigateBack';
+import { SuffixContainer } from '../HeaderButtons/HeaderButtons.styles';
+import { Layout } from '../Layout';
+import { LoadingSwapDetails } from '../LoadingSwapDetails';
+
+import {
+  Container,
+  HeaderDetails,
+  PlaceholderContainer,
+} from './SwapDetails.styles';
+
+export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
+  const { requestId, showSkeleton } = props;
+  const { navigateBackFrom } = useNavigateBack();
+
+  return (
+    <Layout
+      noPadding
+      header={{
+        title: i18n.t('Swap and Bridge'),
+        onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
+        suffix: <SuffixContainer />,
+      }}>
+      {showSkeleton && (
+        <Container>
+          <HeaderDetails>
+            <div className="row">
+              <Typography variant="label" size="large" color="neutral900">
+                {`${i18n.t('Request ID')}:`}
+              </Typography>
+              <div className="request-id">
+                <Typography variant="label" size="small" color="neutral900">
+                  <Skeleton width={60} height={10} variant="rounded" />
+                </Typography>
+                <IconButton variant="ghost">
+                  <CopyIcon size={16} color="gray" />
+                </IconButton>
+              </div>
+            </div>
+            <div className="row">
+              <Typography variant="label" size="large" color="neutral900">
+                {`${i18n.t('Created at')}:`}
+              </Typography>
+              <Typography variant="label" size="small" color="neutral900">
+                <Skeleton width={60} height={10} variant="rounded" />
+              </Typography>
+            </div>
+          </HeaderDetails>
+          <LoadingSwapDetails />
+        </Container>
+      )}
+      {!showSkeleton && (
+        <PlaceholderContainer>
+          <NotFound
+            title={i18n.t('Not found')}
+            description={i18n.t({
+              id: 'swapNotFound',
+              values: { requestId },
+              message: 'Swap with request ID = {requestId} not found.',
+            })}
+          />
+        </PlaceholderContainer>
+      )}
+    </Layout>
+  );
+}

package/src/components/SwapDetails/SwapDetails.helpers.tsx

@@ -0,0 +1,85 @@
+import type { GetStep } from '../SwapDetailsAlerts';
+import type { PendingSwapStep } from '@rango-dev/queue-manager-rango-preset';
+import type { Step, StepDetailsProps } from '@rango-dev/ui';
+
+import React from 'react';
+
+import {
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+} from '../../constants/routing';
+import { numberToString } from '../../utils/numbers';
+import { isNetworkStatusInWarningState } from '../../utils/swap';
+import { SwapDetailsAlerts } from '../SwapDetailsAlerts';
+
+export const RESET_INTERVAL = 2_000;
+export const SECONDS = 60;
+
+export const getSteps = ({ swap, ...args }: GetStep): Step[] => {
+  const hasAlreadyProceededToSign = swap.hasAlreadyProceededToSign !== false;
+  return swap.steps.map((step, index) => {
+    const amountToConvert =
+      index === 0 ? swap.inputAmount : swap.steps[index - 1].outputAmount;
+    return {
+      from: {
+        token: { displayName: step.fromSymbol, image: step.fromLogo || '' },
+        chain: {
+          displayName: step.fromBlockchain,
+          image: step.fromBlockchainLogo || '',
+        },
+        price: {
+          value: numberToString(
+            amountToConvert,
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
+          ),
+        },
+      },
+      to: {
+        token: { displayName: step.toSymbol, image: step.toLogo },
+        chain: {
+          displayName: step.toBlockchain,
+          image: step.toBlockchainLogo || '',
+        },
+        price: {
+          value: numberToString(
+            step.outputAmount || step.expectedOutputAmountHumanReadable,
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
+          ),
+        },
+      },
+      swapper: { displayName: step.swapperId, image: step.swapperLogo || '' },
+      alerts: (
+        <SwapDetailsAlerts
+          step={step}
+          hasAlreadyProceededToSign={hasAlreadyProceededToSign}
+          {...args}
+        />
+      ),
+    };
+  });
+};
+
+export function getStepState(step: PendingSwapStep): StepDetailsProps['state'] {
+  if (
+    isNetworkStatusInWarningState(step) &&
+    step.status !== 'failed' &&
+    step.status !== 'success'
+  ) {
+    return 'warning';
+  }
+
+  switch (step.status) {
+    case 'created':
+      return 'default';
+    case 'approved':
+    case 'waitingForApproval':
+    case 'running':
+      return 'in-progress';
+    case 'failed':
+      return 'error';
+    case 'success':
+      return 'completed';
+  }
+}