@rango-dev/widget-embedded 0.42.3 → 0.42.4-next.0

package/src/components/SlippageWarningsAndErrors/SlippageWarningsAndErrors.tsx

@@ -0,0 +1,48 @@
+import type { ActionType } from './SlippageWarningsAndErrors.helpers';
+import type { PropTypes } from './SlippageWarningsAndErrors.types';
+
+import { Alert, Button } from '@rango-dev/ui';
+import React from 'react';
+
+import { DEFAULT_SLIPPAGE } from '../../constants/swapSettings';
+import { useAppStore } from '../../store/AppStore';
+
+import { makeAlerts } from './SlippageWarningsAndErrors.helpers';
+
+export function SlippageWarningsAndErrors(props: PropTypes) {
+  const { slippage, customSlippage, setSlippage, setCustomSlippage } =
+    useAppStore();
+  const { onChangeSettings } = props;
+  const currentSlippage = customSlippage !== null ? customSlippage : slippage;
+
+  const alertInfo = makeAlerts(currentSlippage);
+
+  const onClickActionButton = (action: ActionType) => {
+    if (action === 'reset-slippage') {
+      setSlippage(DEFAULT_SLIPPAGE);
+      setCustomSlippage(null);
+    } else if (action === 'change-settings') {
+      onChangeSettings();
+    }
+  };
+
+  if (!alertInfo) {
+    return null;
+  }
+  return (
+    <Alert
+      title={alertInfo.title}
+      type={alertInfo.alertType}
+      variant="alarm"
+      action={
+        <Button
+          id="widget-slippage-warning-error-change-settings-or-reset-slippage-btn"
+          size="xxsmall"
+          type={alertInfo.alertType}
+          onClick={() => onClickActionButton(alertInfo.action)}>
+          {alertInfo.actionButtonTitle}
+        </Button>
+      }
+    />
+  );
+}

package/src/components/SlippageWarningsAndErrors/SlippageWarningsAndErrors.types.ts

@@ -0,0 +1,3 @@
+export interface PropTypes {
+  onChangeSettings: () => void;
+}

package/src/components/StatefulConnectModal/StatefulConnectModal.tsx

@@ -17,8 +17,14 @@ import {
   DerivationPath,
   Namespaces,
 } from '../WalletStatefulConnect';
+import { Detached } from '../WalletStatefulConnect/Detached';
 
-import { isOnDerivationPath, isOnNamespace, isOnStatus } from './helpers';
+import {
+  isOnDerivationPath,
+  isOnDetached,
+  isOnNamespace,
+  isOnStatus,
+} from './helpers';
 
 const KEEP_SUCCESS_MODAL_FOR = 3_000;
 const DELAY_SHOWING_MODAL_FOR = 300;
@@ -56,6 +62,10 @@ export function StatefulConnectModal(props: PropTypes) {
       .catch(catchErrorOnHandle);
   };
 
+  const handleDetachedConfirm = () => {
+    handleClosingModal();
+  };
+
   const handleDerivationPathConfirm = (derivationPath: string) => {
     if (!derivationPath) {
       throw new Error(
@@ -130,6 +140,7 @@ export function StatefulConnectModal(props: PropTypes) {
         .then((result) => {
           const resultIsNeedMoreStepsToConnect = [
             ResultStatus.Namespace,
+            ResultStatus.Detached,
             ResultStatus.DerivationPath,
           ].includes(result.status);
 
@@ -178,6 +189,13 @@ export function StatefulConnectModal(props: PropTypes) {
           value={getState().derivationPath}
         />
       )}
+      {isOnDetached(getState) && (
+        <Detached
+          onConfirm={handleDetachedConfirm}
+          value={getState().namespace}
+          selectedNamespaces={getState().selectedNamespaces}
+        />
+      )}
     </WatermarkedModal>
   );
 }

package/src/components/StatefulConnectModal/helpers.ts

@@ -21,3 +21,9 @@ export function isOnDerivationPath(
 } {
   return getState().status === 'derivationPath';
 }
+
+export function isOnDetached(
+  getState: () => State
+): getState is () => State & { namespace: NonNullable<State['namespace']> } {
+  return getState().status === 'detached';
+}

package/src/components/StatefulConnectModal/index.ts

@@ -1,2 +1,2 @@
 export { StatefulConnectModal } from './StatefulConnectModal';
-export { isOnNamespace, isOnDerivationPath } from './helpers';
+export { isOnNamespace, isOnDerivationPath, isOnDetached } from './helpers';

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,76 @@
+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)) {
+    displayValue = rawValue.toFixed(SMALL_VALUE_DECIMALS);
+  } 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/WalletStatefulConnect/Detached.tsx

@@ -0,0 +1,53 @@
+import type { PropTypes } from './Detached.types';
+
+import { i18n } from '@lingui/core';
+import { Divider, Image, MessageBox } from '@rango-dev/ui';
+import React from 'react';
+
+import { NamespaceDetachedItem } from './NamespaceDetachedItem';
+import { NamespaceList, StyledButton } from './Namespaces.styles';
+import { NamespaceUnsupportedItem } from './NamespaceUnsupportedItem';
+
+export function Detached(props: PropTypes) {
+  const { selectedNamespaces, value } = props;
+  const { targetWallet } = value;
+
+  return (
+    <>
+      <MessageBox
+        type="info"
+        title={i18n.t(`Connect {wallet}`, {
+          wallet: targetWallet.type,
+        })}
+        description={i18n.t(
+          'This wallet supports multiple chains. Choose which chains you’d like to connect or disconnect.'
+        )}
+        icon={<Image src={targetWallet.image} size={45} />}
+      />
+      <Divider size={20} />
+      <NamespaceList>
+        {targetWallet.needsNamespace?.data.map((namespace, index, array) => (
+          <React.Fragment key={namespace.id}>
+            {namespace.unsupported ? (
+              <NamespaceUnsupportedItem namespace={namespace} />
+            ) : (
+              <NamespaceDetachedItem
+                walletType={targetWallet.type}
+                namespace={namespace}
+                initialConnect={selectedNamespaces?.includes(namespace.value)}
+              />
+            )}
+            {index !== array.length - 1 && <Divider size={10} />}
+          </React.Fragment>
+        ))}
+      </NamespaceList>
+      <Divider size={20} />
+      <StyledButton
+        id="widget-name-space-confirm-btn"
+        type="primary"
+        onClick={props.onConfirm}>
+        {i18n.t('Done')}
+      </StyledButton>
+    </>
+  );
+}

package/src/components/WalletStatefulConnect/Detached.types.ts

@@ -0,0 +1,8 @@
+import type { NeedsNamespacesState } from '../../hooks/useStatefulConnect';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+
+export interface PropTypes {
+  value: NeedsNamespacesState;
+  onConfirm: () => void;
+  selectedNamespaces: Namespace[] | null;
+}

package/src/components/WalletStatefulConnect/NamespaceDetachedItem.tsx

@@ -0,0 +1,177 @@
+import type { NamespaceDetachedItemPropTypes } from './Namespaces.types';
+import type { NamespaceData } from '@rango-dev/wallets-core/dist/hub/store/namespaces';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  Divider,
+  Spinner,
+  Typography,
+} from '@rango-dev/ui';
+import { useWallets } from '@rango-dev/wallets-react';
+import React, { useEffect, useLayoutEffect, useState } from 'react';
+
+import { useAppStore } from '../../store/AppStore';
+import { getConciseAddress } from '../../utils/wallets';
+
+import { getBlockchainLogo } from './Namespaces.helpers';
+import {
+  NamespaceAccountAddress,
+  NamespaceDetachedItemInfo,
+  NamespaceItemContainer,
+  NamespaceItemContent,
+  NamespaceItemError,
+  NamespaceItemErrorDropdownToggle,
+  NamespaceItemInnerContent,
+  NamespaceLogo,
+} from './Namespaces.styles';
+import { SupportedChainsList } from './SupportedChainsList';
+
+export const NamespaceDetachedItem = function NamespaceDetachedItem(
+  props: NamespaceDetachedItemPropTypes
+) {
+  const { walletType, namespace, initialConnect } = props;
+  const blockchains = useAppStore().blockchains();
+  const { connect, disconnect, state } = useWallets();
+  const [error, setError] = useState<Error | null>(null);
+  const [errorIsExpanded, setErrorIsExpanded] = useState(false);
+
+  const walletState = state(walletType);
+
+  const namespaceState = walletState.namespaces?.get(namespace.value);
+  const firstAccountArray = namespaceState.accounts?.[0]?.split(':');
+
+  useEffect(() => setErrorIsExpanded(false), [error]);
+
+  useLayoutEffect(() => {
+    if (initialConnect) {
+      void handleConnectNamespace(walletType, namespace.value);
+    }
+  }, []);
+
+  const handleConnectNamespace = async (
+    walletType: string,
+    namespace: Namespace
+  ) => {
+    try {
+      await connect(walletType, [
+        {
+          namespace: namespace,
+          network: '',
+        },
+      ]);
+    } catch (error) {
+      setError(error as Error);
+    }
+  };
+
+  const handleButtonClick = async (namespaceState: NamespaceData) => {
+    setError(null);
+    if (namespaceState.connected) {
+      await disconnect(walletType, [namespace.value]);
+    } else {
+      void handleConnectNamespace(walletType, namespace.value);
+    }
+  };
+
+  const getButtonText = () => {
+    if (namespaceState.connected) {
+      return i18n.t('Disconnect');
+    }
+    if (!!error) {
+      return i18n.t('Try again');
+    }
+    return i18n.t('Connect');
+  };
+
+  return (
+    <NamespaceItemContainer hasError={!!error}>
+      <NamespaceItemContent>
+        <NamespaceLogo
+          src={getBlockchainLogo(blockchains, namespace.id)}
+          size={40}
+        />
+        <NamespaceItemInnerContent>
+          <NamespaceDetachedItemInfo>
+            <Typography variant="label" size="large">
+              {namespace.label}
+            </Typography>
+            {namespaceState.connected && (
+              <Typography variant="body" size="small" color="success500">
+                {i18n.t('Connected')}
+              </Typography>
+            )}
+            {!namespaceState.connected && !!error && (
+              <Typography variant="body" size="small" color="error500">
+                {i18n.t('Connection failed')}
+              </Typography>
+            )}
+          </NamespaceDetachedItemInfo>
+          {namespaceState.connected && (
+            <NamespaceAccountAddress
+              variant="body"
+              size="small"
+              color="neutral700">
+              {getConciseAddress(
+                firstAccountArray?.[firstAccountArray?.length - 1]
+              )}
+            </NamespaceAccountAddress>
+          )}
+          {!namespaceState.connected && error && (
+            <NamespaceItemErrorDropdownToggle
+              onClick={() =>
+                setErrorIsExpanded((errorIsExpanded) => !errorIsExpanded)
+              }>
+              <Typography
+                variant="body"
+                size="small"
+                color="neutral700"
+                style={{
+                  textDecoration: 'underline',
+                  userSelect: 'none',
+                  textDecorationSkipInk: 'none',
+                }}>
+                {i18n.t('See why')}
+              </Typography>
+              {errorIsExpanded ? (
+                <ChevronUpIcon size={12} color="gray" />
+              ) : (
+                <ChevronDownIcon size={12} color="gray" />
+              )}
+            </NamespaceItemErrorDropdownToggle>
+          )}
+          {!namespaceState.connected &&
+            !error &&
+            namespace.chains.length > 1 && (
+              <SupportedChainsList chains={namespace.chains} />
+            )}
+        </NamespaceItemInnerContent>
+        {namespaceState.connecting ? (
+          <Spinner color="info" />
+        ) : (
+          <Button
+            id="widget-name-space-connect-btn"
+            variant="ghost"
+            type={namespaceState.connected ? 'error' : 'primary'}
+            size="small"
+            onClick={async () => handleButtonClick(namespaceState)}>
+            {getButtonText()}
+          </Button>
+        )}
+      </NamespaceItemContent>
+      {!namespaceState.connected && !!error && errorIsExpanded && (
+        <>
+          <Divider size={4} />
+          <NamespaceItemError>
+            <Typography variant="body" size="small" color="neutral700">
+              {(error.cause as Error)?.message || error.message}
+            </Typography>
+          </NamespaceItemError>
+        </>
+      )}
+    </NamespaceItemContainer>
+  );
+};