@rango-dev/widget-embedded 0.12.1-next.2 → 0.12.1-next.21

package/src/components/RouteErrors/RouteErrorsModal.tsx

@@ -0,0 +1,128 @@
+import type { ModalPropTypes } from './RouteErrors.types';
+
+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: 'Swapping',
+      value: numberToString(
+        inputUsdValue,
+        USD_VALUE_MIN_DECIMALS,
+        USD_VALUE_MAX_DECIMALS
+      ),
+    },
+    {
+      title: 'Gas cost',
+      value: numberToString(
+        totalFeeInUsd,
+        GAS_FEE_MIN_DECIMALS,
+        GAS_FEE_MAX_DECIMALS
+      ),
+    },
+    {
+      title: 'Receiving',
+      value: numberToString(
+        outputUsdValue,
+        USD_VALUE_MIN_DECIMALS,
+        USD_VALUE_MAX_DECIMALS
+      ),
+    },
+    {
+      title: '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">
+            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/SelectableCategoryList/SelectableCategoryList.helpers.ts

@@ -0,0 +1,20 @@
+import { type BlockchainMeta } from 'rango-sdk';
+
+import { filterByType } from '../BlockchainList/BlockchainList.helpers';
+
+import { BlockchainCategories } from './SelectableCategoryList.types';
+
+const blockchainslogo = {
+  [BlockchainCategories.EVM]: ['ETH', 'BSC', 'POLYGON'],
+  [BlockchainCategories.COSMOS]: ['COSMOS', 'OSMOSIS', 'JUNO'],
+  [BlockchainCategories.UTXO]: ['BTC', 'LTC', 'BCH'],
+  [BlockchainCategories.OTHER]: ['STARKNET', 'TRON', 'SOLANA'],
+};
+
+export const generateBlockchainsLogo = (
+  list: BlockchainMeta[],
+  type: Exclude<BlockchainCategories, 'ALL'>
+) =>
+  list
+    .filter((item) => filterByType(item, type))
+    .filter((item) => blockchainslogo[type].includes(item.name));

package/src/components/SelectableCategoryList/SelectableCategoryList.styles.ts

@@ -0,0 +1,21 @@
+import { styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  display: 'grid',
+  gap: '$10',
+  gridTemplateColumns: 'auto 1fr 1fr 1fr 1fr',
+});
+
+export const ImageContent = styled('div', {
+  display: 'flex',
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'center',
+  paddingTop: '$10',
+});
+export const FirstImage = styled('img', {
+  position: 'absolute',
+  top: -2,
+  width: 15,
+  height: 15,
+});

package/src/components/SelectableCategoryList/SelectableCategoryList.tsx

@@ -0,0 +1,79 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { PropTypes } from './SelectableCategoryList.types';
+
+import { i18n } from '@lingui/core';
+import { Divider, Image, Skeleton, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { useMetaStore } from '../../store/meta';
+import { BlockchainsChip } from '../BlockchainsChip';
+
+import { generateBlockchainsLogo } from './SelectableCategoryList.helpers';
+import {
+  Container,
+  FirstImage,
+  ImageContent,
+} from './SelectableCategoryList.styles';
+import { BlockchainCategories } from './SelectableCategoryList.types';
+
+export function SelectableCategoryList(props: PropTypes) {
+  const { setCategory, category } = props;
+  const blockchains = useMetaStore.use.meta().blockchains;
+  const loadingStatus = useMetaStore.use.loadingStatus();
+  const categories = Object.keys(
+    BlockchainCategories
+  ) as BlockchainCategories[];
+  return (
+    <Container>
+      {loadingStatus === 'loading' &&
+        Array.from(Array(5), (_, index) => (
+          <Skeleton
+            key={index}
+            variant="rounded"
+            height={70}
+            width={index === 0 ? 45 : 65}
+          />
+        ))}
+      {loadingStatus === 'success' &&
+        categories.map((blockchainCategory) => (
+          <BlockchainsChip
+            selected={category === blockchainCategory}
+            key={blockchainCategory}
+            onClick={() => setCategory(blockchainCategory)}>
+            {blockchainCategory !== BlockchainCategories.ALL && (
+              <>
+                <ImageContent>
+                  {generateBlockchainsLogo(blockchains, blockchainCategory).map(
+                    (blockchain, index) =>
+                      index === 0 ? (
+                        <FirstImage
+                          key={`image-${blockchain.name}-${blockchain.chainId}`}
+                          src={blockchain.logo}
+                        />
+                      ) : (
+                        <Image
+                          key={`image-${blockchain.name}-${blockchain.chainId}`}
+                          src={blockchain.logo}
+                          size={15}
+                        />
+                      )
+                  )}
+                </ImageContent>
+                <Divider size={12} />
+              </>
+            )}
+            <Typography
+              size="xsmall"
+              variant="body"
+              color={
+                blockchainCategory === BlockchainCategories.ALL
+                  ? 'secondary500'
+                  : undefined
+              }>
+              {i18n.t(BlockchainCategories[blockchainCategory])}
+            </Typography>
+          </BlockchainsChip>
+        ))}
+    </Container>
+  );
+}

package/src/components/SelectableCategoryList/SelectableCategoryList.types.ts

@@ -0,0 +1,12 @@
+export interface PropTypes {
+  setCategory: (type: string) => void;
+  category: string;
+}
+
+export enum BlockchainCategories {
+  ALL = 'ALL',
+  EVM = 'EVM',
+  COSMOS = 'COSMOS',
+  UTXO = 'UTXO',
+  OTHER = 'OTHER',
+}

package/src/components/SelectableCategoryList/index.ts

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

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

@@ -0,0 +1,33 @@
+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 LiquiditySourceDivider = styled('li', {
+  margin: '0 auto',
+  width: '100%',
+  height: '1px',
+  backgroundColor: '$neutral300',
+});
+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,7 @@
+export {
+  SettingsContainer,
+  LiquiditySourceDivider,
+  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,90 @@
+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 { 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 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="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="small" 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(
+              'swapNotFound',
+              { requestId },
+              { message: 'Swap with request ID = ${requestId} not found.' }
+            )}
+          />
+        </PlaceholderContainer>
+      )}
+    </Layout>
+  );
+}