@rango-dev/widget-embedded 0.18.0 → 0.19.0

package/src/components/Layout/Layout.tsx

@@ -3,13 +3,12 @@ import type { PropsWithChildren } from 'react';
 
 import { BottomLogo, Divider, Header } from '@rango-dev/ui';
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 
-import { useNavigateBack } from '../../hooks/useNavigateBack';
-import { useAppStore } from '../../store/AppStore';
+import { navigationRoutes } from '../../constants/navigationRoutes';
 import { useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
 import { getContainer } from '../../utils/common';
-import { isFeatureHidden } from '../../utils/settings';
 import { BackButton, CancelButton, WalletButton } from '../HeaderButtons';
 
 import { Container, Content, Footer } from './Layout.styles';
@@ -24,37 +23,25 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
     fixedHeight = true,
   } = props;
   const connectedWallets = useWalletsStore.use.connectedWallets();
-  const {
-    config: { features },
-  } = useAppStore();
-
-  const isConnectWalletHidden = isFeatureHidden(
-    'connectWalletButton',
-    features
-  );
 
   const connectWalletsButtonDisabled =
     useUiStore.use.connectWalletsButtonDisabled();
-  const navigateBack = useNavigateBack();
+  const navigate = useNavigate();
 
   const onConnectWallet = () => {
-    if (!connectWalletsButtonDisabled && header.onWallet) {
-      header.onWallet();
+    if (!connectWalletsButtonDisabled) {
+      navigate('/' + navigationRoutes.wallets);
     }
   };
-
-  const showBackButton =
-    typeof header.hasBackButton === 'undefined' || header.hasBackButton;
-
   return (
     <Container ref={ref} fixedHeight={fixedHeight} id="swap-box">
       <Header
-        prefix={<>{showBackButton && <BackButton onClick={navigateBack} />}</>}
+        prefix={<>{header.onBack && <BackButton onClick={header.onBack} />}</>}
         title={header.title}
         suffix={
           <>
             {header.suffix}
-            {header.onWallet && !isConnectWalletHidden && (
+            {header.hasConnectWallet && (
               <WalletButton
                 container={getContainer()}
                 onClick={onConnectWallet}

package/src/components/Layout/Layout.types.ts

@@ -1,10 +1,10 @@
 export interface PropTypes {
   header: {
     title: string;
-    onWallet?: () => void;
+    hasConnectWallet?: boolean;
     hasSettings?: boolean;
     suffix?: React.ReactNode;
-    hasBackButton?: boolean;
+    onBack?: () => void;
     onCancel?: () => void;
   };
   hasLogo?: boolean;

package/src/components/LoadingSwapDetails/LoadingSwapDetailStep.tsx

@@ -0,0 +1,41 @@
+import type { StepSkeletonPropsTypes } from './LoadingSwapDetails.types';
+
+import { ChainToken, Divider, NextIcon, Skeleton } from '@rango-dev/ui';
+import React from 'react';
+
+import { StepContainer } from './LoadingSwapDetails.styles';
+
+export function LoadingSwapDetailStep(props: StepSkeletonPropsTypes) {
+  const { extraInfo } = props;
+  return (
+    <StepContainer>
+      <div className="step-title">
+        <Skeleton height={28} width={28} variant="circular" />
+        <Divider direction="horizontal" size={8} />
+        <Skeleton height={15} width={148} variant="rounded" />
+      </div>
+      <div className="step-tokens">
+        <Divider direction="horizontal" size={20} />
+        <div className="step-token-info">
+          <ChainToken size="small" loading chainImage="" tokenImage="" />
+          <Divider direction="horizontal" size={8} />
+          <Skeleton height={12} width={76} variant="rounded" />
+        </div>
+        <div className="step-icon-container">
+          <NextIcon color="gray" size={16} />
+        </div>
+        <div className="step-token-info">
+          <ChainToken size="small" loading chainImage="" tokenImage="" />
+          <Divider direction="horizontal" size={8} />
+          <Skeleton height={12} width={76} variant="rounded" />
+        </div>
+      </div>
+      {extraInfo && (
+        <div className="extra-info">
+          <Divider direction="horizontal" size={20} />
+          <Skeleton height={22} width={297} variant="rectangular" />
+        </div>
+      )}
+    </StepContainer>
+  );
+}

package/src/components/LoadingSwapDetails/LoadingSwapDetails.styles.ts

@@ -1,82 +1,78 @@
-import { css, styled } from '@rango-dev/ui';
+import { styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   width: '100%',
   height: '100%',
-  padding: '$10 $20',
+  padding: '$0 $20',
+
+  '.cost': {
+    paddingTop: '$15',
+    display: 'flex',
+  },
+
+  '.route-summary': {
+    padding: '$15 $0',
+  },
+
+  '.route-summary-item': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+
+  '.token-amount': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+
+  '.route-summary-separator': {
+    width: '0px',
+    height: '$16',
+    borderLeft: '1px solid $neutral400',
+    marginLeft: '13px',
+  },
+
+  '.swaps-steps': {
+    paddingBottom: '$10',
+  },
 });
 
 export const StepContainer = styled('div', {
   backgroundColor: '$neutral100',
   borderRadius: '$xm',
   padding: '$10 $15',
-});
 
+  '.step-title': {
+    display: 'flex',
+    justifyContent: 'start',
+    alignItems: 'center',
+  },
+  '.step-tokens': {
+    paddingTop: '$5',
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '.step-token-info': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '.step-icon-container': {
+    padding: '$4 $6',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  '.extra-info': {
+    display: 'flex',
+    paddingTop: '$10',
+    paddingBottom: '$5',
+  },
+});
 export const StepSeparator = styled('div', {
   width: '0px',
   height: '$20',
   borderLeft: '1px dashed $neutral700',
   marginLeft: '25px',
 });
-
-export const quoteSummaryItemStyles = css({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-});
-
-export const tokenAmountStyles = css({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-});
-
-export const costStyles = css({
-  paddingTop: '$15',
-  display: 'flex',
-});
-
-export const quoteSummaryStyles = css({
-  padding: '$15 $0',
-});
-
-export const quoteSummarySeparatorStyles = css({
-  width: '0px',
-  height: '$16',
-  borderLeft: '1px solid $neutral400',
-  marginLeft: '13px',
-});
-
-export const swapsStepsStyles = css({
-  paddingBottom: '$10',
-});
-
-export const stepTitleStyles = css({
-  display: 'flex',
-  justifyContent: 'start',
-  alignItems: 'center',
-});
-
-export const stepTokensStyles = css({
-  paddingTop: '$5',
-  display: 'flex',
-  alignItems: 'center',
-});
-
-export const stepInfoStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-});
-
-export const stepIconStyles = css({
-  padding: '$4 $6',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});
-
-export const extraInfoStyles = css({
-  display: 'flex',
-  paddingTop: '$10',
-  paddingBottom: '$5',
-});

package/src/components/LoadingSwapDetails/LoadingSwapDetails.tsx

@@ -1,47 +1,53 @@
 import { i18n } from '@lingui/core';
-import { Divider, Skeleton, Typography } from '@rango-dev/ui';
+import { ChainToken, Divider, Skeleton, Typography } from '@rango-dev/ui';
 import React from 'react';
 
-import { QuoteSummarySkeleton, StepSkeleton } from '../QuoteSkeleton';
-
-import {
-  Container,
-  extraInfoStyles,
-  StepContainer,
-  StepSeparator,
-} from './LoadingSwapDetails.styles';
+import { Container, StepSeparator } from './LoadingSwapDetails.styles';
+import { LoadingSwapDetailStep } from './LoadingSwapDetailStep';
 
 export function LoadingSwapDetails() {
+  const routeSummary = (
+    <div className="route-summary-item">
+      <div className="token-amount">
+        <ChainToken loading size="medium" chainImage="" tokenImage="" />
+        <Divider size={8} direction="horizontal" />
+        <Skeleton height={15} width={148} variant="rounded" />
+      </div>
+      <Skeleton height={12} width={64} variant="rounded" />
+    </div>
+  );
+
   return (
     <Container>
-      <QuoteSummarySkeleton type="swap-preview" />
+      <div className="cost">
+        <Skeleton width={60} height={10} variant="rounded" />
+        <Divider size={4} direction="horizontal" />
+        <Skeleton width={60} height={10} variant="rounded" />
+        <Divider size={4} direction="horizontal" />
+        <Skeleton width={60} height={10} variant="rounded" />
+      </div>
+
+      <div className="route-summary">
+        {routeSummary}
+        <div className="route-summary-separator"></div>
+        {routeSummary}
+      </div>
+
       <div className="swaps-steps">
         <Typography variant="title" size="small">
           {i18n.t('Swaps steps')}
         </Typography>
       </div>
 
-      <>
-        <StepContainer>
-          <StepSkeleton separator={false} />
-          <div className={extraInfoStyles()}>
-            <Divider direction="horizontal" size={20} />
-            <Skeleton height={22} variant="rectangular" />
-          </div>
-        </StepContainer>
+      <div className="step-container">
+        <LoadingSwapDetailStep extraInfo />
         <StepSeparator />
-        <StepContainer>
-          <StepSkeleton separator={false} />
-        </StepContainer>
+        <LoadingSwapDetailStep />
         <StepSeparator />
-        <StepContainer>
-          <StepSkeleton separator={false} />
-        </StepContainer>
+        <LoadingSwapDetailStep />
         <StepSeparator />
-        <StepContainer>
-          <StepSkeleton separator={false} />
-        </StepContainer>
-      </>
+        <LoadingSwapDetailStep />
+      </div>
     </Container>
   );
 }

package/src/components/LoadingSwapDetails/LoadingSwapDetails.types.ts

@@ -0,0 +1,3 @@
+export interface StepSkeletonPropsTypes {
+  extraInfo?: boolean;
+}

package/src/components/{NoResult/NoResult.helpers.ts → NoRoutes/NoRoutes.helper.ts}

@@ -1,32 +1,37 @@
-import type { Info } from './NoResult.types';
+import type { Info } from './NoRoutes.types';
 
 import { i18n } from '@lingui/core';
 
 import { errorMessages } from '../../constants/errors';
-import {
-  type NoResultError,
-  QuoteErrorType,
-  type QuoteRequestFailed,
-} from '../../types';
 
 export function makeInfo(
-  error: NoResultError | QuoteRequestFailed | null,
+  diagnosisMessage: string | null,
   disabledLiquiditySources: string[],
+  hasError: boolean,
   toggleAllLiquiditySources: (shouldReset: boolean) => void,
-  refetchQuote: () => void
+  refetchBestRoute: () => void
 ): Info {
-  if (error?.type === QuoteErrorType.REQUEST_FAILED) {
+  if (hasError) {
     return {
       alert: {
         type: 'warning',
         text: errorMessages().genericServerError,
         action: {
-          onClick: refetchQuote,
+          onClick: refetchBestRoute,
           title: i18n.t('Retry'),
         },
       },
       description: '',
     };
+  } else if (diagnosisMessage) {
+    return {
+      alert: {
+        type: 'error',
+        text: diagnosisMessage,
+        action: null,
+      },
+      description: '',
+    };
   } else if (disabledLiquiditySources.length) {
     return {
       alert: {
@@ -39,21 +44,9 @@ export function makeInfo(
       },
       description: errorMessages().liquiditySourcesError.description,
     };
-  } else if (
-    error?.type === QuoteErrorType.NO_RESULT &&
-    error.diagnosisMessage
-  ) {
-    return {
-      alert: {
-        type: 'error',
-        text: error.diagnosisMessage,
-        action: null,
-      },
-      description: '',
-    };
   }
   return {
     alert: null,
-    description: errorMessages().noResultError.description,
+    description: errorMessages().noRoutesError.description,
   };
 }

package/src/components/{NoResult/NoResult.styles.ts → NoRoutes/NoRoutes.styles.ts}

@@ -1,11 +1,9 @@
 import { styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
-  minHeight: '162px',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
-  justifyContent: 'center',
 });
 
 export const Footer = styled('div', {

package/src/components/{NoResult/NoResult.tsx → NoRoutes/NoRoutes.tsx}

@@ -1,4 +1,4 @@
-import type { PropTypes } from './NoResult.types';
+import type { PropTypes } from './NoRoutes.types';
 
 import {
   Alert,
@@ -11,22 +11,27 @@ import {
 import React from 'react';
 
 import { errorMessages } from '../../constants/errors';
-import { useAppStore } from '../../store/AppStore';
+import { useMetaStore } from '../../store/meta';
+import { useSettingsStore } from '../../store/settings';
 
-import { makeInfo } from './NoResult.helpers';
-import { Container, Footer, PrefixIcon } from './NoResult.styles';
+import { makeInfo } from './NoRoutes.helper';
+import { Container, Footer, PrefixIcon } from './NoRoutes.styles';
 
-export function NoResult(props: PropTypes) {
-  const { fetch, error } = props;
-  const disabledLiquiditySources = useAppStore().disabledLiquiditySources;
-  const toggleAllLiquiditySources = useAppStore().toggleAllLiquiditySources;
+export function NoRoutes(props: PropTypes) {
+  const { diagnosisMessage, fetch, error } = props;
+  const disabledLiquiditySources =
+    useSettingsStore.use.disabledLiquiditySources();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+  const toggleAllLiquiditySources =
+    useSettingsStore.use.toggleAllLiquiditySources();
 
-  const swappers = useAppStore().swappers();
+  const hasError = error || loadingMetaStatus === 'failed';
 
   const info = makeInfo(
-    error,
+    diagnosisMessage ?? null,
     disabledLiquiditySources,
-    () => toggleAllLiquiditySources(swappers, true),
+    hasError,
+    toggleAllLiquiditySources,
     fetch
   );
 
@@ -35,7 +40,7 @@ export function NoResult(props: PropTypes) {
       <NoRouteIcon size={24} color="gray" />
       <Divider size={4} />
       <Typography variant="title" size="small">
-        {errorMessages().noResultError.title}
+        {errorMessages().noRoutesError.title}
       </Typography>
       {!!info.description && (
         <Typography

package/src/components/{NoResult/NoResult.types.ts → NoRoutes/NoRoutes.types.ts}

@@ -1,8 +1,7 @@
-import type { NoResultError, QuoteRequestFailed } from '../../types';
-
 export interface PropTypes {
   fetch: () => void;
-  error: NoResultError | QuoteRequestFailed | null;
+  error: boolean;
+  diagnosisMessage?: string;
 }
 
 type AlertAction = {

package/src/components/NoRoutes/index.ts

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

package/src/components/NotificationContent/NotificationContent.tsx

@@ -10,8 +10,7 @@ import {
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { navigationRoutes } from '../../constants/navigationRoutes';
-import { useAppStore } from '../../store/AppStore';
+import { useMetaStore } from '../../store/meta';
 import { useNotificationStore } from '../../store/notification';
 import { useUiStore } from '../../store/ui';
 
@@ -27,15 +26,14 @@ export function NotificationContent() {
   const { getUnreadNotifications } = useNotificationStore();
 
   const notifications: Notification[] = getUnreadNotifications();
-  const blockchains = useAppStore().blockchains();
-  const tokens = useAppStore().tokens();
+  const { tokens, blockchains } = useMetaStore.use.meta();
   const sortedNotification = notifications
     .sort((a, b) => b.creationTime - a.creationTime)
     .slice(0, MAX_NOTIFICATIONS_DISPLAYED);
 
   const handleOnClick = (requestId: Notification['requestId']) => {
     setSelectedSwap(requestId);
-    navigate(`${navigationRoutes.swaps}/${requestId}`);
+    navigate(`/swaps/${requestId}`);
   };
 
   return (

package/src/components/{QuoteWarningsAndErrors/QuoteWarningsAndErrors.styles.ts → RouteErrors/RouteErrors.styles.ts}

@@ -1,4 +1,4 @@
-import { darkTheme, styled } from '@rango-dev/ui';
+import { styled } from '@rango-dev/ui';
 
 export const Alerts = styled('div', {
   width: '100%',
@@ -19,13 +19,6 @@ export const Item = styled('div', {
   justifyContent: 'space-between',
   alignItems: 'center',
   width: '100%',
-  '._title': {
-    $$color: '$colors$neutral600',
-    [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral700',
-    },
-    color: '$$color',
-  },
 });
 
 export const Action = styled('div', {

package/src/components/RouteErrors/RouteErrors.tsx

@@ -0,0 +1,79 @@
+import type { PropTypes } from './RouteErrors.types';
+
+import { Alert, Divider, InfoIcon } from '@rango-dev/ui';
+import React from 'react';
+
+import { errorMessages } from '../../constants/errors';
+import { useBestRouteStore } from '../../store/bestRoute';
+import { hasLimitError, LimitErrorMessage } from '../../utils/swap';
+
+import { Action, Alerts } from './RouteErrors.styles';
+import { RouteErrorsModal } from './RouteErrorsModal';
+
+const WARNING_LEVEL_LIMIT = -10;
+
+export function RouteErrors(props: PropTypes) {
+  const { bestRoute } = useBestRouteStore();
+  const {
+    highValueLoss,
+    percentageChange,
+    priceImpactCanNotBeComputed,
+    openModal,
+    onToggle,
+    totalFeeInUsd,
+    outputUsdValue,
+    inputUsdValue,
+    loading,
+    extraSpace,
+  } = props;
+  const error = hasLimitError(bestRoute);
+  const { recommendation } = LimitErrorMessage(bestRoute);
+
+  const showWarnings = !error && (highValueLoss || priceImpactCanNotBeComputed);
+  const showAlerts = showWarnings || error;
+
+  return (
+    <>
+      {(loading || (extraSpace && !showAlerts)) && <Divider size={20} />}
+      {showAlerts && (
+        <Alerts>
+          {showWarnings && (
+            <>
+              <Alert
+                title={
+                  highValueLoss
+                    ? errorMessages().highValueLossError.title
+                    : errorMessages().unknownPriceError.title
+                }
+                type={
+                  highValueLoss && !!percentageChange?.lt(WARNING_LEVEL_LIMIT)
+                    ? 'error'
+                    : 'warning'
+                }
+                variant="alarm"
+                action={
+                  <Action onClick={() => onToggle(true)}>
+                    <InfoIcon size={12} color="gray" />
+                  </Action>
+                }
+              />
+            </>
+          )}
+          {error && (
+            <Alert type="error" variant="alarm" title={recommendation} />
+          )}
+        </Alerts>
+      )}
+
+      <RouteErrorsModal
+        highValueLoss={highValueLoss}
+        open={openModal}
+        onToggle={onToggle}
+        percentageChange={percentageChange}
+        inputUsdValue={inputUsdValue}
+        outputUsdValue={outputUsdValue}
+        totalFeeInUsd={totalFeeInUsd}
+      />
+    </>
+  );
+}

package/src/components/RouteErrors/RouteErrors.types.ts

@@ -0,0 +1,29 @@
+import type BigNumber from 'bignumber.js';
+
+export interface PropTypes {
+  openModal: boolean;
+  onToggle: (open: boolean) => void;
+  totalFeeInUsd: BigNumber | null;
+  outputUsdValue: BigNumber | null;
+  inputUsdValue: BigNumber | null;
+  percentageChange: BigNumber | null;
+  highValueLoss: boolean;
+  priceImpactCanNotBeComputed: boolean;
+  loading: boolean;
+  extraSpace: boolean;
+}
+
+type ModalPropTypesKeys = keyof Omit<
+  PropTypes,
+  'priceImpactCanNotBeComputed' | 'openModal' | 'extraSpace' | 'loading'
+>;
+
+export type ModalPropTypes = Pick<PropTypes, ModalPropTypesKeys> & {
+  open: boolean;
+};
+
+export interface ModalContentData {
+  title: string;
+  value: string;
+  valueColor?: string;
+}