@rango-dev/widget-embedded 0.12.1-next.6 → 0.12.1-next.8

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,43 @@
+import type { SwapDetailsPlaceholderPropTypes } from './SwapDetails.types';
+
+import { i18n } from '@lingui/core';
+import { NotFound, Spinner } 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 { LoaderContainer, PlaceholderContainer } from './SwapDetails.styles';
+
+export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
+  const { requestId, loading } = props;
+  const { navigateBackFrom } = useNavigateBack();
+
+  return (
+    <Layout
+      header={{
+        title: i18n.t('Swap and Bridge'),
+        onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
+        suffix: <SuffixContainer />,
+      }}>
+      <PlaceholderContainer>
+        {loading ? (
+          <LoaderContainer>
+            <Spinner size={24} />
+          </LoaderContainer>
+        ) : (
+          <NotFound
+            title={i18n.t('Not found')}
+            description={i18n.t(
+              'swapNotFound',
+              { requestId },
+              { message: 'Swap with request ID = ${requestId} not found.' }
+            )}
+          />
+        )}
+      </PlaceholderContainer>
+    </Layout>
+  );
+}

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

@@ -0,0 +1,102 @@
+import type { GetStep } from '../SwapDetailsAlerts';
+import type { PendingSwapStep } from '@rango-dev/queue-manager-rango-preset';
+import type {
+  PriceImpactWarningLevel,
+  Step,
+  StepDetailsProps,
+} from '@rango-dev/ui';
+import type BigNumber from 'bignumber.js';
+
+import React from 'react';
+
+import { numberToString } from '../../utils/numbers';
+import { isNetworkStatusInWarningState } from '../../utils/swap';
+import { SwapDetailsAlerts } from '../SwapDetailsAlerts';
+
+export const LOW_PRICE_IMPACT = 3;
+export const HIGHT_PRICE_IMPACT = 10;
+export const RESET_INTERVAL = 2_000;
+export const MIN_DECIMALS = 0;
+export const AMOUNT_DECIMALS = 4;
+export const PERCENT_DECIMALS = 2;
+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,
+            AMOUNT_DECIMALS,
+            AMOUNT_DECIMALS
+          ),
+        },
+      },
+      to: {
+        token: { displayName: step.toSymbol, image: step.toLogo },
+        chain: {
+          displayName: step.toBlockchain,
+          image: step.toBlockchainLogo,
+        },
+        price: {
+          value: numberToString(
+            step.outputAmount || step.expectedOutputAmountHumanReadable,
+            AMOUNT_DECIMALS,
+            AMOUNT_DECIMALS
+          ),
+        },
+      },
+      swapper: { displayName: step.swapperId, image: step.swapperLogo },
+      alerts: (
+        <SwapDetailsAlerts
+          step={step}
+          hasAlreadyProceededToSign={hasAlreadyProceededToSign}
+          {...args}
+        />
+      ),
+    };
+  });
+};
+
+export const getPriceImpactWarningLevel = (
+  priceImpact: BigNumber | null
+): PriceImpactWarningLevel | undefined => {
+  if (!priceImpact) {
+    return undefined;
+  } else if (priceImpact.lt(LOW_PRICE_IMPACT)) {
+    return 'low';
+  }
+  return 'high';
+};
+
+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,76 @@
+import { styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  display: 'flex',
+  width: '100%',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '0',
+  flexGrow: 1,
+  '& .row': {
+    display: 'flex',
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '$10 $5',
+    borderBottom: '1px solid $neutral300',
+    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 Separator = styled('div', {
+  height: '$12',
+  marginRight: '$10',
+  borderLeft: '1px solid $neutral900',
+  marginLeft: '$14',
+});
+
+export const HeaderDetails = styled('div', {
+  width: '100%',
+  padding: '0px 15px',
+});
+
+export const StepsList = styled('div', {
+  padding: '0 $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',
+  textAlign: 'center',
+});
+
+export const LoaderContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  paddingTop: '33%',
+  flex: 1,
+});