@rango-dev/widget-embedded 0.0.0-experimental-936229e8-20251208

package/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx

@@ -0,0 +1,83 @@
+import type {
+  HighSlippageWarning,
+  InsufficientSlippageWarning,
+} from '../../types';
+
+import { i18n } from '@lingui/core';
+import { Button, Divider, MessageBox, WarningIcon } from '@rango-dev/ui';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import { QuoteWarningType } from '../../types';
+import { getContainer } from '../../utils/common';
+import { WatermarkedModal } from '../common/WatermarkedModal';
+
+import { SwapButton } from './QuoteWarningsAndErrors.styles';
+
+type PropsTypes = {
+  open: boolean;
+  confirmationDisabled: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  warning: InsufficientSlippageWarning | HighSlippageWarning;
+};
+
+export function SlippageWarningModal(props: PropsTypes) {
+  const { open, onClose, onConfirm, warning, confirmationDisabled } = props;
+  const navigate = useNavigate();
+
+  return (
+    <WatermarkedModal
+      id="widget-slippage-warning-modal"
+      anchor="bottom"
+      open={open}
+      container={getContainer()}
+      onClose={onClose}>
+      <MessageBox
+        type="warning"
+        title={
+          warning.type === QuoteWarningType.HIGH_SLIPPAGE
+            ? i18n.t('High slippage')
+            : i18n.t('Low slippage')
+        }
+        description={
+          warning.type === QuoteWarningType.HIGH_SLIPPAGE
+            ? i18n.t(
+                'Caution, your slippage is high. Your trade may be front run.'
+              )
+            : i18n.t({
+                id: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
+                values: {
+                  minRequiredSlippage: warning.minRequiredSlippage,
+                },
+              })
+        }>
+        <Divider size={18} />
+        <Divider size={32} />
+        <SwapButton
+          id="widget-slippage-warning-modal-confirm-anyway-btn"
+          size="large"
+          type="primary"
+          variant="contained"
+          fullWidth
+          disabled={confirmationDisabled}
+          onClick={onConfirm}>
+          <WarningIcon color="white" size={16} />
+          {i18n.t('Swap anyway')}
+        </SwapButton>
+        <Divider size={10} />
+        <Button
+          id="widget-slippage-warning-modal-change-slippage-btn"
+          size="large"
+          type="primary"
+          variant="outlined"
+          fullWidth
+          disabled={confirmationDisabled}
+          onClick={() => navigate('../' + navigationRoutes.settings)}>
+          {i18n.t('Change Slippage')}
+        </Button>
+      </MessageBox>
+    </WatermarkedModal>
+  );
+}

package/src/components/QuoteWarningsAndErrors/UnknownPriceWarningModal.tsx

@@ -0,0 +1,45 @@
+import type { UnknownPriceWarning } from '../../types';
+
+import { Button, MessageBox, WarningIcon } from '@rango-dev/ui';
+import React from 'react';
+
+import { errorMessages } from '../../constants/errors';
+import { getContainer } from '../../utils/common';
+import { WatermarkedModal } from '../common/WatermarkedModal';
+
+type Props = {
+  open: boolean;
+  confirmationDisabled: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  warning: UnknownPriceWarning;
+};
+
+export function UnknownPriceWarningModal(props: Props) {
+  const { open, onClose, onConfirm, confirmationDisabled } = props;
+  return (
+    <WatermarkedModal
+      id="widget-unknown-price-warning-modal"
+      footer={
+        <Button
+          id="widget-unknown-price-warning-modal-confirm-btn"
+          type="primary"
+          size="large"
+          prefix={<WarningIcon />}
+          fullWidth
+          disabled={confirmationDisabled}
+          onClick={onConfirm}>
+          {errorMessages().unknownPriceError.confirmMessage}
+        </Button>
+      }
+      open={open}
+      onClose={onClose}
+      container={getContainer()}>
+      <MessageBox
+        type="warning"
+        title={errorMessages().unknownPriceError.impactTitle}
+        description={errorMessages().unknownPriceError.description}
+      />
+    </WatermarkedModal>
+  );
+}

package/src/components/QuoteWarningsAndErrors/index.ts

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

package/src/components/Quotes/Quotes.styles.ts

@@ -0,0 +1,18 @@
+import { styled } from '@rango-dev/ui';
+
+export const ErrorsContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  flexDirection: 'column',
+  height: '100%',
+});
+
+export const StrategyContent = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const SelectContainer = styled('div', {
+  width: '146px',
+});

package/src/components/Quotes/Quotes.tsx

@@ -0,0 +1,154 @@
+import type { PropTypes } from './Quotes.types';
+import type { MultiRouteSimulationResult } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import { Divider, FullExpandedQuote, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { QuoteInfo } from '../../containers/QuoteInfo';
+import { getQuoteError } from '../../hooks/useConfirmSwap/useConfirmSwap.helpers';
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
+import { QuoteErrorType, type SelectedQuote } from '../../types';
+import { getContainer } from '../../utils/common';
+import { generateQuoteWarnings, sortQuotesBy } from '../../utils/quote';
+import { NoResult } from '../NoResult';
+import { QuoteSkeleton } from '../QuoteSkeleton';
+
+import { ErrorsContainer, StrategyContent } from './Quotes.styles';
+import { SelectStrategy } from './SelectStrategy';
+
+const ITEM_SKELETON_COUNT = 3;
+export function Quotes(props: PropTypes) {
+  const {
+    loading,
+    onClickOnQuote,
+    fetch,
+    showModalFee,
+    hasSort = true,
+    fullExpandedMode = false,
+    container: propContainer,
+  } = props;
+  const {
+    selectedQuote,
+    quotes,
+    updateQuotePartialState,
+    fromToken,
+    toToken,
+    sortStrategy,
+    error,
+  } = useQuoteStore()();
+  const { slippage, customSlippage } = useAppStore();
+  const { findToken } = useAppStore();
+  const container = propContainer || getContainer();
+  const hasQuotes = !!quotes && quotes.results.length;
+  const userSlippage = customSlippage ?? slippage;
+  const getQuoteWarning = (quote: MultiRouteSimulationResult) => {
+    if (!fromToken || !toToken || !quotes) {
+      return null;
+    }
+    const mergedQuote: SelectedQuote = {
+      requestAmount: quotes.requestAmount, // Assuming quotes is an array
+      validationStatus: null,
+      ...quote,
+    };
+
+    return generateQuoteWarnings({
+      currentQuote: mergedQuote,
+      userSlippage,
+      findToken,
+    });
+  };
+  const showNoResultMessage =
+    error?.type === QuoteErrorType.NO_RESULT ||
+    error?.type === QuoteErrorType.REQUEST_FAILED;
+
+  const sortQuotes = quotes?.results
+    ? sortQuotesBy(sortStrategy, quotes?.results)
+    : [];
+
+  return (
+    <>
+      {hasSort && (
+        <>
+          <StrategyContent>
+            <Typography size="xmedium" variant="title">
+              {i18n.t('Sort by')}
+            </Typography>
+            <SelectStrategy container={container} />
+          </StrategyContent>
+          <Divider size="10" />
+        </>
+      )}
+
+      {loading &&
+        Array.from({ length: ITEM_SKELETON_COUNT }, (_, index) => (
+          <React.Fragment key={index}>
+            {fullExpandedMode ? (
+              <FullExpandedQuote loading />
+            ) : (
+              <QuoteSkeleton
+                tagHidden={false}
+                type="list-item"
+                expanded={false}
+              />
+            )}
+            {index !== ITEM_SKELETON_COUNT - 1 && <Divider size={16} />}
+          </React.Fragment>
+        ))}
+
+      {!loading && (
+        <>
+          {hasQuotes
+            ? sortQuotes.map((quote, index) => {
+                const quoteWarning = getQuoteWarning(quote);
+                const quoteError = getQuoteError(quote.swaps);
+                const lastIndex = sortQuotes.length - 1 === index;
+
+                return (
+                  <React.Fragment key={quote.requestId}>
+                    <QuoteInfo
+                      id="widget-quotes-quote-info-container"
+                      showModalFee={showModalFee}
+                      container={container}
+                      selected={selectedQuote?.requestId === quote.requestId}
+                      tagHidden={false}
+                      quote={{
+                        ...quote,
+                        requestAmount: quotes.requestAmount,
+                        validationStatus: null,
+                      }}
+                      loading={loading}
+                      error={quoteError?.options || null}
+                      warning={quoteWarning}
+                      fullExpandedMode={fullExpandedMode}
+                      onClick={(quote) => {
+                        if (!quoteError) {
+                          updateQuotePartialState('warning', quoteWarning);
+                        }
+                        updateQuotePartialState(
+                          'error',
+                          quoteError?.options || null
+                        );
+                        onClickOnQuote(quote);
+                      }}
+                      type="list-item"
+                    />
+                    {!lastIndex && <Divider size={16} />}
+                  </React.Fragment>
+                );
+              })
+            : showNoResultMessage && (
+                <ErrorsContainer>
+                  <NoResult
+                    size={fullExpandedMode ? 'large' : 'small'}
+                    error={error}
+                    fetch={fetch}
+                  />
+                </ErrorsContainer>
+              )}
+        </>
+      )}
+    </>
+  );
+}

package/src/components/Quotes/Quotes.types.ts

@@ -0,0 +1,11 @@
+import type { SelectedQuote } from '../../types';
+
+export type PropTypes = {
+  loading: boolean;
+  onClickOnQuote: (quote: SelectedQuote) => void;
+  fetch: (shouldChangeSelectedQuote?: boolean) => void;
+  showModalFee?: boolean;
+  hasSort?: boolean;
+  fullExpandedMode?: boolean;
+  container?: HTMLElement;
+};

package/src/components/Quotes/SelectStrategy.tsx

@@ -0,0 +1,51 @@
+import type { PreferenceType } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import { Select } from '@rango-dev/ui';
+import React from 'react';
+
+import { useQuoteStore } from '../../store/quote';
+
+import { SelectContainer } from './Quotes.styles';
+
+export function SelectStrategy(props: { container: HTMLElement }) {
+  const { updateQuotePartialState, sortStrategy } = useQuoteStore()();
+
+  const ROUTE_STRATEGY: { value: PreferenceType; label: string }[] = [
+    {
+      value: 'SMART',
+      label: i18n.t('Smart Routing'),
+    },
+    {
+      value: 'FEE',
+      label: i18n.t('Lowest Fee'),
+    },
+    {
+      value: 'SPEED',
+      label: i18n.t('Fastest Transfer'),
+    },
+    {
+      value: 'NET_OUTPUT',
+      label: i18n.t('Maximum Return'),
+    },
+    {
+      value: 'PRICE',
+      label: i18n.t('Maximum Output'),
+    },
+  ];
+
+  return (
+    <SelectContainer>
+      <Select
+        id={'widget-quotes-strategy-select'}
+        container={props.container}
+        options={ROUTE_STRATEGY}
+        value={sortStrategy}
+        handleItemClick={(item) => {
+          updateQuotePartialState('sortStrategy', item.value);
+        }}
+        variant="filled"
+      />
+    </SelectContainer>
+  );
+}

package/src/components/Quotes/index.ts

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

package/src/components/RefreshModal/RefreshModal.styles.ts

@@ -0,0 +1,9 @@
+import { Button, styled } from '@rango-dev/ui';
+
+export const RefreshButton = styled(Button, {
+  '& span': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/components/RefreshModal/RefreshModal.tsx

@@ -0,0 +1,41 @@
+import type { PropTypes } from './RefreshModal.types';
+
+import { i18n } from '@lingui/core';
+import { Divider, MessageBox, RefreshIcon } from '@rango-dev/ui';
+import React from 'react';
+
+import { getContainer } from '../../utils/common';
+import { WatermarkedModal } from '../common/WatermarkedModal';
+
+import { RefreshButton } from './RefreshModal.styles';
+
+export function RefreshModal(props: PropTypes) {
+  const { open, onClose } = props;
+
+  return (
+    <WatermarkedModal
+      open={open}
+      dismissible
+      onClose={onClose}
+      id="widget-refresh-modal"
+      container={getContainer()}>
+      <MessageBox
+        title={i18n.t('Something went wrong')}
+        type="error"
+        description={i18n.t('Something went wrong. Please refresh the app.')}>
+        <Divider size={30} />
+        <RefreshButton
+          variant="outlined"
+          id="widget-refresh-modal-refresh-btn"
+          size="large"
+          type="primary"
+          fullWidth
+          onClick={() => location.reload()}>
+          <RefreshIcon size={20} color="primary" />
+          <Divider size={4} direction="horizontal" />
+          {i18n.t('Refresh')}
+        </RefreshButton>
+      </MessageBox>
+    </WatermarkedModal>
+  );
+}

package/src/components/RefreshModal/RefreshModal.types.ts

@@ -0,0 +1,4 @@
+export type PropTypes = {
+  open: boolean;
+  onClose: () => void;
+};

package/src/components/RefreshModal/index.ts

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

package/src/components/SameTokensWarning/SameTokensWarning.styles.ts

@@ -0,0 +1,7 @@
+import { styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+});

package/src/components/SameTokensWarning/SameTokensWarning.tsx

@@ -0,0 +1,31 @@
+import { i18n } from '@lingui/core';
+import { Alert, Divider, NoRouteIcon, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { useQuoteStore } from '../../store/quote';
+import { areTokensEqual } from '../../utils/wallets';
+
+import { Container } from './SameTokensWarning.styles';
+
+export function SameTokensWarning() {
+  const { fromToken, toToken } = useQuoteStore()();
+  const showWarningMessage =
+    !!fromToken && !!toToken && areTokensEqual(fromToken, toToken);
+
+  return showWarningMessage ? (
+    <Container>
+      <Divider size={10} />
+      <NoRouteIcon size={24} color="gray" />
+      <Divider size={4} />
+      <Typography variant="title" size={'small'}>
+        {i18n.t('No Routes Found')}
+      </Typography>
+      <Divider size={4} />
+      <Alert
+        title={i18n.t('You cannot use the same token for From and To.')}
+        type={'warning'}
+        variant="alarm"
+      />
+    </Container>
+  ) : null;
+}

package/src/components/SameTokensWarning/index.ts

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

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

@@ -0,0 +1,21 @@
+import { styled } from '@rango-dev/ui';
+
+export const IconWrapper = styled('div', {
+  width: '$24',
+  height: '$24',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const SearchInputContainer = styled('div', {
+  width: '100%',
+  '& ._text-field': {
+    paddingLeft: '$10',
+    '& input': {
+      paddingLeft: '$2',
+      paddingTop: '$12',
+      paddingBottom: '$12',
+    },
+  },
+});

package/src/components/SearchInput/SearchInput.tsx

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

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

@@ -0,0 +1,14 @@
+import type { TextField } from '@rango-dev/ui';
+import type * as Stitches from '@stitches/react';
+import type { ComponentProps, ReactElement } from 'react';
+
+export type PropTypes = {
+  variant?: 'contained' | 'outlined' | 'ghost';
+  fullWidth?: boolean;
+  color?: 'dark' | 'light';
+  size?: 'small' | 'large';
+  value: string;
+  setValue?: (value: string) => void;
+  style?: Stitches.CSS;
+  suffix?: ReactElement;
+} & ComponentProps<typeof TextField>;

package/src/components/SearchInput/index.ts

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

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

@@ -0,0 +1,30 @@
+import { styled } from '@rango-dev/ui';
+
+export const LiquiditySourceList = styled('ul', {
+  padding: '$15 $5 0',
+  margin: 0,
+  listStyle: 'none',
+  height: '100%',
+  overflowY: 'auto',
+  variants: {
+    disabled: {
+      true: {
+        pointerEvents: 'none',
+      },
+    },
+  },
+});
+
+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,5 @@
+export {
+  LiquiditySourceList,
+  LiquiditySourceSuffix,
+  NotFoundContainer,
+} from './SettingsContainer.style';

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

@@ -0,0 +1,35 @@
+import { Chip, styled, TextField } from '@rango-dev/ui';
+
+export const BaseContainer = styled('div', {
+  paddingTop: '$5',
+  padding: '$10 $5',
+});
+
+export const SlippageChipsContainer = styled('div', {
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: '$10',
+  [`& ${TextField}`]: {
+    flex: '1 1 0',
+    maxWidth: '127px',
+    minWidth: '85px',
+    paddingLeft: '$2',
+  },
+});
+
+export const Head = styled('div', {
+  display: 'flex',
+  justifyContent: 'start',
+  alignItems: 'center',
+  paddingBottom: '$10',
+});
+
+export const SlippageTooltipContainer = styled('div', {
+  maxWidth: '280px',
+  padding: '$10',
+});
+
+export const SlippageChip = styled(Chip, {
+  width: '61px',
+  flexShrink: 0,
+});