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

package/src/components/SwapDetailsModal/SwapDetailsModal.styles.ts

@@ -0,0 +1,29 @@
+import { css, darkTheme, styled } from '@rango-dev/ui';
+
+export const wordWrap = css({
+  wordWrap: 'break-word',
+  display: 'block',
+});
+
+export const ProfileBanner = styled('img', {
+  width: '100%',
+});
+
+export const WalletIcon = styled('div', {
+  position: 'relative',
+});
+
+export const WalletIconBadgeContainer = styled('span', {
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  borderRadius: '50%',
+  width: '14px',
+  height: '14px',
+  display: 'flex',
+  padding: '$2',
+  backgroundColor: '$warning300',
+  [`.${darkTheme} &`]: {
+    $$color: '$warning600',
+  },
+});

package/src/components/SwapDetailsModal/SwapDetailsModal.tsx

@@ -0,0 +1,61 @@
+import type { ModalPropTypes } from './SwapDetailsModal.types';
+
+import React from 'react';
+
+import { getContainer } from '../../utils/common';
+import { WatermarkedModal } from '../common/WatermarkedModal';
+
+import { CancelContent } from './SwapDetailsModal.Cancel';
+import { DeleteContent } from './SwapDetailsModal.Delete';
+import { NetworkStateContent } from './SwapDetailsModal.NetworkState';
+import { WalletStateContent } from './SwapDetailsModal.WalletState';
+
+export function SwapDetailsModal(props: ModalPropTypes) {
+  const {
+    isOpen,
+    state,
+    switchNetworkModalState,
+    onClose,
+    onDelete,
+    onCancel,
+    swap,
+    message,
+    handleSwitchNetwork,
+  } = props;
+
+  return (
+    <WatermarkedModal
+      open={isOpen}
+      onClose={onClose}
+      container={getContainer()}>
+      {state === 'connectWallet' && (
+        <WalletStateContent swap={swap} message={message} onClose={onClose} />
+      )}
+      {state === 'switchNetwork' && switchNetworkModalState && (
+        <NetworkStateContent
+          message={message}
+          switchNetworkModalState={switchNetworkModalState}
+          handleSwitchNetwork={handleSwitchNetwork}
+        />
+      )}
+      {state === 'delete' && (
+        <DeleteContent
+          onClose={onClose}
+          onDelete={() => {
+            onClose();
+            onDelete();
+          }}
+        />
+      )}
+      {state === 'cancel' && (
+        <CancelContent
+          onClose={onClose}
+          onCancel={() => {
+            onClose();
+            onCancel();
+          }}
+        />
+      )}
+    </WatermarkedModal>
+  );
+}

package/src/components/SwapDetailsModal/SwapDetailsModal.types.ts

@@ -0,0 +1,84 @@
+import type { TargetNamespace } from '@rango-dev/queue-manager-rango-preset';
+import type { LegacyWalletType } from '@rango-dev/wallets-core/legacy';
+import type { PendingSwap } from 'rango-types';
+
+export type ModalState =
+  | 'connectWallet'
+  | 'switchNetwork'
+  | 'delete'
+  | 'cancel'
+  | null;
+
+export type SwitchNetworkModalState = {
+  type: 'success' | 'loading' | 'error';
+  title: string;
+  description: string;
+};
+export interface ModalPropTypes {
+  isOpen: boolean;
+  onClose: () => void;
+  onCancel: () => void;
+  onDelete: () => void;
+  state: ModalState;
+  switchNetworkModalState: SwitchNetworkModalState | null;
+  swap: PendingSwap;
+  message: string;
+  handleSwitchNetwork: () => void;
+}
+
+export interface CompleteModalPropTypes {
+  open: boolean;
+  onClose: () => void;
+  status: 'success' | 'failed';
+  priceValue: string;
+  realValue: string;
+  usdValue: string;
+  realUsdValue: string;
+  percentageChange: string;
+  chain: {
+    displayName?: string;
+    image?: string;
+  };
+  token: {
+    displayName: string;
+    image?: string;
+  };
+  description?: React.ReactNode;
+  diagnosisUrl?: string | null;
+}
+
+export interface WalletStateContentProps {
+  swap: PendingSwap;
+  message: string;
+  onClose: () => void;
+}
+
+export interface NetworkStateContentProps {
+  message: string;
+  switchNetworkModalState: SwitchNetworkModalState;
+  handleSwitchNetwork: () => void;
+}
+
+export interface InstallWalletContentProps {
+  walletType: LegacyWalletType;
+}
+
+export interface ConnectWalletContentProps {
+  wallet: {
+    walletType: LegacyWalletType;
+    address: string;
+    derivationPath?: string;
+  };
+  namespace: TargetNamespace | null;
+  onClose: () => void;
+}
+
+export interface CancelContentProps {
+  onCancel: () => void;
+  onClose: () => void;
+}
+
+export interface DeleteContentProps {
+  onDelete: () => void;
+  onClose: () => void;
+}

package/src/components/SwapDetailsModal/index.ts

@@ -0,0 +1,3 @@
+export { SwapDetailsModal } from './SwapDetailsModal';
+export { SwapDetailsCompleteModal } from './SwapDetailsCompleteModal';
+export type { ModalState, ModalPropTypes } from './SwapDetailsModal.types';

package/src/components/SwapMetrics/SwapMetrics.constants.ts

@@ -0,0 +1,4 @@
+export const USD_FORMAT_DECIMALS = 2;
+export const USD_EXCHANGE_MINIMUM = 0.001;
+export const SMALL_VALUE_DECIMALS = 14;
+export const LARGE_VALUE_MAX_DIGITS = 10;

package/src/components/SwapMetrics/SwapMetrics.helpers.ts

@@ -0,0 +1,80 @@
+import type { SlippageColorParams } from './SwapMetrics.types';
+
+import BigNumber from 'bignumber.js';
+
+import { QuoteErrorType, QuoteWarningType } from '../../types';
+
+import {
+  LARGE_VALUE_MAX_DIGITS,
+  SMALL_VALUE_DECIMALS,
+  USD_EXCHANGE_MINIMUM,
+  USD_FORMAT_DECIMALS,
+} from './SwapMetrics.constants';
+
+export function getSlippageColor(params: SlippageColorParams) {
+  const { error, isDarkTheme, warning } = params;
+  const { quoteError, slippageError } = error;
+  const { quoteWarning, slippageWarning } = warning;
+  const hasSlippageError =
+    !!slippageError ||
+    quoteError?.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE;
+  const hasSlippageWarning =
+    !!slippageWarning ||
+    quoteWarning?.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE;
+
+  if (hasSlippageError) {
+    return '$error500';
+  } else if (hasSlippageWarning) {
+    return '$warning500';
+  }
+  if (isDarkTheme) {
+    return '$neutral600';
+  }
+  return '$neutral700';
+}
+
+export function getUsdExchangeRate(params: {
+  toTokenUsdPrice: number | null;
+  fromTokenUsdPrice: number | null;
+}) {
+  const { toTokenUsdPrice, fromTokenUsdPrice } = params;
+  if (!toTokenUsdPrice || !fromTokenUsdPrice) {
+    return { rawValue: '0', displayValue: '0' };
+  }
+  const toPrice = new BigNumber(toTokenUsdPrice);
+  const fromPrice = new BigNumber(fromTokenUsdPrice);
+  const rawValue = toPrice.dividedBy(fromPrice);
+  let displayValue: string;
+
+  if (rawValue.isLessThan(1)) {
+    /*
+     * Format the number with up to SMALL_VALUE_DECIMALS digits after the decimal point,
+     * then remove any trailing zeros.
+     * Example: "0.120000" → "0.12", "0.00000000000010" → "0.0000000000001"
+     */
+    displayValue = rawValue.toFixed(SMALL_VALUE_DECIMALS).replace(/\.?0+$/, '');
+  } else if (rawValue.toFixed(0).length > LARGE_VALUE_MAX_DIGITS) {
+    displayValue = rawValue.toFixed(0).slice(0, LARGE_VALUE_MAX_DIGITS);
+  } else {
+    displayValue = rawValue.toFixed(USD_FORMAT_DECIMALS);
+  }
+  return {
+    displayValue,
+    rawValue: rawValue.toFixed(),
+  };
+}
+
+export function formatTokenValueInUsd(
+  usdExchangeRate: number,
+  tokenUsdPrice: number
+): string {
+  const value = new BigNumber(usdExchangeRate).multipliedBy(tokenUsdPrice);
+  if (value.isLessThan(USD_EXCHANGE_MINIMUM)) {
+    return '$0';
+  }
+  const result = value
+    .decimalPlaces(USD_FORMAT_DECIMALS, BigNumber.ROUND_DOWN)
+    .toFormat(USD_FORMAT_DECIMALS);
+
+  return `$${result}`;
+}

package/src/components/SwapMetrics/SwapMetrics.styles.ts

@@ -0,0 +1,32 @@
+import { darkTheme, styled, Typography } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  display: 'flex',
+  padding: '$4',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const Rate = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '$2',
+  '& .rate-text': {
+    color: '$neutral700',
+    [`.${darkTheme} &`]: {
+      color: '$neutral700',
+    },
+  },
+  '& ._icon-button': {
+    transform: 'rotate(90deg)',
+    width: '$16',
+    height: '$16',
+  },
+});
+
+export const TokenName = styled(Typography, {
+  maxWidth: '$32',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});

package/src/components/SwapMetrics/SwapMetrics.tsx

@@ -0,0 +1,134 @@
+import type { PropTypes } from './SwapMetrics.types';
+
+import { i18n } from '@lingui/core';
+import {
+  IconButton,
+  ReverseIcon,
+  Skeleton,
+  Tooltip,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import { useTheme } from '../../hooks/useTheme';
+import { useAppStore } from '../../store/AppStore';
+import { getContainer } from '../../utils/common';
+import { getSlippageValidation } from '../../utils/settings';
+
+import {
+  formatTokenValueInUsd,
+  getSlippageColor,
+  getUsdExchangeRate,
+} from './SwapMetrics.helpers';
+import { Container, Rate, TokenName } from './SwapMetrics.styles';
+
+export function SwapMetrics(props: PropTypes) {
+  const { slippage, customSlippage, quoteTokensRate, changeQuoteTokensRate } =
+    useAppStore();
+  const {
+    quoteError,
+    quoteWarning,
+    fromToken: initialFromToken,
+    toToken: initialToToken,
+    quote,
+    loading,
+  } = props;
+  const currentSlippage = customSlippage !== null ? customSlippage : slippage;
+  const { mode } = useTheme({});
+  const slippageValidation = getSlippageValidation(currentSlippage);
+  const isDarkTheme = mode === 'dark';
+  const isDefaultRate = quoteTokensRate === 'default';
+
+  const error = {
+    quoteError,
+    slippageError:
+      slippageValidation?.type === 'error' ? slippageValidation.message : null,
+  };
+  const warning = {
+    quoteWarning,
+    slippageWarning:
+      slippageValidation?.type === 'warning'
+        ? slippageValidation.message
+        : null,
+  };
+
+  const sourceToken = quote?.swaps[0]?.from || initialFromToken;
+  const destinationToken =
+    quote?.swaps[quote?.swaps.length - 1]?.to || initialToToken;
+
+  const fromToken = isDefaultRate ? sourceToken : destinationToken;
+  const toToken = isDefaultRate ? destinationToken : sourceToken;
+
+  const fromAmount = Number(
+    isDefaultRate ? quote?.outputAmount : quote?.requestAmount
+  );
+  const toAmount = Number(
+    isDefaultRate ? quote?.requestAmount : quote?.outputAmount
+  );
+
+  const fromTokenUsdPrice = fromAmount || fromToken.usdPrice;
+  const toTokenUsdPrice = toAmount || toToken.usdPrice;
+
+  const { rawValue: rawExchangeRate, displayValue: displayExchangeRate } =
+    getUsdExchangeRate({
+      toTokenUsdPrice,
+      fromTokenUsdPrice,
+    });
+
+  return (
+    <Container>
+      <Typography
+        variant={!!error || !!warning ? 'label' : 'body'}
+        size={!!error || !!warning ? 'medium' : 'small'}
+        color={getSlippageColor({ error, warning, isDarkTheme })}>
+        {i18n.t('Slippage:')} {currentSlippage}%
+      </Typography>
+      {loading ? (
+        <Skeleton height={16} width={104} variant="rounded" />
+      ) : (
+        fromTokenUsdPrice &&
+        toTokenUsdPrice && (
+          <Rate>
+            <Typography className="rate-text" variant="body" size="small">
+              1
+            </Typography>
+            <TokenName className="rate-text" variant="body" size="small">
+              {toToken.symbol}
+            </TokenName>
+            <IconButton
+              id="widget-home-page-change-rate-button"
+              onClick={changeQuoteTokensRate}>
+              <ReverseIcon size={14} color="secondary" />
+            </IconButton>
+            <Tooltip
+              container={getContainer()}
+              side="top"
+              sideOffset={4}
+              content={
+                <Typography className="rate-text" variant="body" size="small">
+                  {rawExchangeRate}
+                </Typography>
+              }>
+              <Typography className="rate-text" variant="body" size="small">
+                {displayExchangeRate}
+              </Typography>
+            </Tooltip>
+
+            <TokenName className="rate-text" variant="body" size="small">
+              {fromToken.symbol}
+            </TokenName>
+            {fromToken.usdPrice && (
+              <Typography color="neutral600" variant="body" size="small">
+                ~
+                {formatTokenValueInUsd(
+                  Number(rawExchangeRate),
+                  fromToken.usdPrice
+                )}
+              </Typography>
+            )}
+          </Rate>
+        )
+      )}
+    </Container>
+  );
+}

package/src/components/SwapMetrics/SwapMetrics.types.ts

@@ -0,0 +1,26 @@
+import type { QuoteError, QuoteWarning, SelectedQuote } from '../../types';
+import type { TokenData } from '../TokenList/TokenList.types';
+import type { SwapResultAsset } from 'rango-sdk';
+
+export interface PropTypes {
+  quoteError: QuoteError | null;
+  quoteWarning: QuoteWarning | null;
+  fromToken: TokenData;
+  toToken: TokenData;
+  quote: SelectedQuote | null;
+  loading: boolean;
+}
+
+export type Tokens = {
+  to: TokenData | SwapResultAsset;
+  from: TokenData | SwapResultAsset;
+};
+
+export type SlippageColorParams = {
+  error: { quoteError: QuoteError | null; slippageError: string | null };
+  warning: {
+    quoteWarning: QuoteWarning | null;
+    slippageWarning: string | null;
+  };
+  isDarkTheme: boolean;
+};

package/src/components/SwapMetrics/index.ts

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

package/src/components/SwitchFromAndTo/SwitchFromAndTo.styles.ts

@@ -0,0 +1,48 @@
+import { keyframes, styled } from '@rango-dev/ui';
+
+export const ROTATE_ANIMATION_DURATION = 450;
+
+const rotateAnimation = keyframes({
+  '0%': {
+    transform: 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)',
+  },
+  '33%': {
+    transform: 'rotateX(0deg) rotateZ(78deg) rotateY(66deg)',
+  },
+  '66%': {
+    transform: 'rotateX(0deg) rotateZ(163deg) rotateY(66deg)',
+  },
+  '100%': {
+    transform: 'rotateX(0deg) rotateZ(180deg) rotateY(0deg)',
+  },
+});
+
+export const SwitchButtonContainer = styled('div', {
+  position: 'absolute',
+  bottom: '-12px',
+  left: '50%',
+  transform: 'translate(-50%, 10%)',
+  cursor: 'pointer',
+});
+
+export const StyledButton = styled('div', {
+  borderRadius: '$md',
+  border: '3px solid $background',
+  background: '$neutral100',
+  width: '$24',
+  height: '$24',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: '$foreground',
+  '&.rotate': {
+    '& svg': {
+      animation: `${rotateAnimation} ${ROTATE_ANIMATION_DURATION}ms ease-in-out forwards`,
+    },
+  },
+  '&:hover': {
+    color: '$secondary500',
+    transform: 'translateY(1px) scale(1.04)',
+    boxShadow: '1px 1px 1px 1px rgba(0, 0, 0, 0.05)',
+  },
+});

package/src/components/SwitchFromAndTo/SwitchFromAndTo.tsx

@@ -0,0 +1,33 @@
+import { ReverseIcon } from '@rango-dev/ui';
+import React from 'react';
+
+import { useQuoteStore } from '../../store/quote';
+
+import {
+  ROTATE_ANIMATION_DURATION,
+  StyledButton,
+  SwitchButtonContainer,
+} from './SwitchFromAndTo.styles';
+
+export function SwitchFromAndToButton() {
+  const switchFromAndTo = useQuoteStore().use.switchFromAndTo();
+
+  return (
+    <SwitchButtonContainer>
+      <StyledButton
+        id="widget-switch-from-and-to-btn"
+        onClick={(event) => {
+          const button = event.currentTarget;
+
+          button.classList.add('rotate');
+
+          setTimeout(() => {
+            button.classList.remove('rotate');
+          }, ROTATE_ANIMATION_DURATION);
+          switchFromAndTo();
+        }}>
+        <ReverseIcon size={12} />
+      </StyledButton>
+    </SwitchButtonContainer>
+  );
+}

package/src/components/SwitchFromAndTo/index.ts

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

package/src/components/TokenList/LoadingTokenList.tsx

@@ -0,0 +1,34 @@
+import type { LoadingTokenListProps } from './TokenList.types';
+
+import { Divider, ListItem, Skeleton } from '@rango-dev/ui';
+import React from 'react';
+
+import { End, List } from './TokenList.styles';
+
+export function LoadingTokenList(props: LoadingTokenListProps) {
+  return (
+    <List>
+      {Array.from(Array(props.size), (e) => (
+        <ListItem
+          key={e}
+          hasDivider
+          start={<Skeleton variant="circular" width={35} height={35} />}
+          end={
+            <End>
+              <Skeleton variant="text" size="large" width={70} />
+              <Divider size={4} />
+              <Skeleton variant="text" size="medium" width={50} />
+            </End>
+          }
+          title={
+            <div>
+              <Skeleton variant="text" size="large" width={90} />
+              <Divider size={4} />
+              <Skeleton variant="text" size="medium" width={90} />
+            </div>
+          }
+        />
+      ))}
+    </List>
+  );
+}

package/src/components/TokenList/TokenList.helpers.ts

@@ -0,0 +1,11 @@
+import type { Token } from 'rango-sdk';
+
+import { containsText } from '../../utils/common';
+
+export const filterTokens = (list: Token[], searchedFor: string) =>
+  list.filter(
+    (token) =>
+      containsText(token.symbol, searchedFor) ||
+      containsText(token.address || '', searchedFor) ||
+      containsText(token.name || '', searchedFor)
+  );