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

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';
+  }
+}

package/src/components/SwapDetails/SwapDetails.styles.ts

@@ -0,0 +1,72 @@
+import { darkTheme, styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  display: 'flex',
+  width: '100%',
+  flexDirection: 'column',
+  alignItems: 'center',
+  height: '0',
+  flexGrow: 1,
+  '& .row': {
+    display: 'flex',
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '$10 $20',
+    borderBottom: '1px solid',
+    $$color: '$colors$neutral300',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral400',
+    },
+    borderColor: '$$color',
+    color: '$neutral500',
+  },
+  '& .request-id': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '$24',
+  },
+  '& .output': {
+    display: 'flex',
+    width: '100%',
+    padding: '$15 $20 $20',
+    flexDirection: 'column',
+    alignItems: 'start',
+  },
+  '& .title-steps': {
+    textAlign: 'left',
+    width: '100%',
+    padding: '0 $20 $10',
+  },
+});
+
+export const HeaderDetails = styled('div', {
+  width: '100%',
+});
+
+export const StepsList = styled('div', {
+  padding: '$0 $20 $20 $20',
+  width: '100%',
+  overflow: 'auto',
+});
+export const Alerts = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '$10',
+});
+
+export const PlaceholderContainer = styled('div', {
+  height: '450px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const LoaderContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  paddingTop: '33%',
+  flex: 1,
+});