@rango-dev/widget-embedded 0.19.0 → 0.19.1-next.0

package/src/components/LoadingSwapDetails/LoadingSwapDetails.tsx

@@ -1,53 +1,47 @@
 import { i18n } from '@lingui/core';
-import { ChainToken, Divider, Skeleton, Typography } from '@rango-dev/ui';
+import { Divider, Skeleton, Typography } from '@rango-dev/ui';
 import React from 'react';
 
-import { Container, StepSeparator } from './LoadingSwapDetails.styles';
-import { LoadingSwapDetailStep } from './LoadingSwapDetailStep';
+import { QuoteSummarySkeleton, StepSkeleton } from '../QuoteSkeleton';
 
-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>
-  );
+import {
+  Container,
+  extraInfoStyles,
+  StepContainer,
+  StepSeparator,
+} from './LoadingSwapDetails.styles';
 
+export function LoadingSwapDetails() {
   return (
     <Container>
-      <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>
-
+      <QuoteSummarySkeleton type="swap-preview" />
       <div className="swaps-steps">
         <Typography variant="title" size="small">
           {i18n.t('Swaps steps')}
         </Typography>
       </div>
 
-      <div className="step-container">
-        <LoadingSwapDetailStep extraInfo />
+      <>
+        <StepContainer>
+          <StepSkeleton separator={false} />
+          <div className={extraInfoStyles()}>
+            <Divider direction="horizontal" size={20} />
+            <Skeleton height={22} variant="rectangular" />
+          </div>
+        </StepContainer>
         <StepSeparator />
-        <LoadingSwapDetailStep />
+        <StepContainer>
+          <StepSkeleton separator={false} />
+        </StepContainer>
         <StepSeparator />
-        <LoadingSwapDetailStep />
+        <StepContainer>
+          <StepSkeleton separator={false} />
+        </StepContainer>
         <StepSeparator />
-        <LoadingSwapDetailStep />
-      </div>
+        <StepContainer>
+          <StepSkeleton separator={false} />
+        </StepContainer>
+      </>
     </Container>
   );
 }

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

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

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

@@ -1,9 +1,11 @@
 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/{NoRoutes/NoRoutes.tsx → NoResult/NoResult.tsx}

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

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

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

package/src/components/NoResult/index.ts

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

package/src/components/NotificationContent/NotificationContent.tsx

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

package/src/components/Quote/Quote.styles.ts

@@ -0,0 +1,249 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { css, darkTheme, Image, styled, Typography } from '@rango-dev/ui';
+
+import { CollapsibleContent } from '../ConfirmWalletsModal/ConfirmWallets.styles';
+
+export const EXPANDABLE_QUOTE_TRANSITION_DURATION = 300;
+
+export const QuoteContainer = styled(Collapsible.Root, {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'start',
+  overflowX: 'auto',
+  overflowY: 'hidden',
+  width: '100%',
+  borderRadius: '$xm',
+  cursor: 'default',
+  variants: {
+    recommended: {
+      true: {
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary800',
+        },
+        backgroundColor: '$$color',
+      },
+      false: {
+        $$color: '$colors$neutral400',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral200',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+  },
+});
+
+export const stepsDetailsStyles = css({
+  padding: '$10 $15',
+});
+
+export const SummaryContainer = styled('div', {
+  borderRadius: '$xm',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'start',
+  justifyContent: 'space-between',
+  color: '$foreground',
+  cursor: 'pointer',
+  boxSizing: 'border-box',
+  position: 'relative',
+  variants: {
+    recommended: {
+      true: {
+        $$color: '$colors$info100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary600',
+        },
+        backgroundColor: '$$color',
+        '&:hover': {
+          backgroundColor: '$$color',
+        },
+      },
+      false: {
+        $$color: '$colors$neutral200',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral500',
+        },
+        backgroundColor: '$$color',
+        '&:hover': {
+          backgroundColor: '$$color',
+        },
+      },
+    },
+    basic: { true: { borderTopRightRadius: '0', borderTopLeftRadius: '0' } },
+    listItem: {
+      true: {},
+      false: {},
+    },
+  },
+
+  compoundVariants: [
+    {
+      listItem: true,
+      recommended: true,
+      css: {
+        '&:hover': {
+          $$color: '$colors$secondary200',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$secondary700',
+          },
+          backgroundColor: '$$color',
+        },
+      },
+    },
+    {
+      listItem: true,
+      recommended: false,
+      css: {
+        '&:hover': {
+          $$color: '$colors$neutral300',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$neutral400',
+          },
+          backgroundColor: '$$color',
+        },
+      },
+    },
+  ],
+});
+
+export const summaryStyles = css({
+  padding: '$15 $15 $10 $15',
+  cursor: 'default',
+});
+
+export const basicInfoStyles = css({
+  paddingTop: '$10',
+  display: 'flex',
+  alignItems: 'center',
+  '.usd-value': {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
+});
+
+export const Chains = styled(Collapsible.Trigger, {
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  height: '$36',
+  padding: '$10 $15',
+  boxSizing: 'border-box',
+  cursor: 'pointer',
+  border: 'none',
+  outline: 'none',
+  backgroundColor: 'transparent',
+  variants: {
+    error: {
+      true: {
+        [`& ${Image}`]: {
+          border: '1px $warning500 solid',
+          borderRadius: '100%',
+        },
+      },
+      false: {
+        [`& ${Image}`]: {
+          border: '1px transparent solid',
+          borderRadius: '100%',
+        },
+      },
+    },
+    recommended: {
+      true: {
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary800',
+        },
+        backgroundColor: '$$color',
+      },
+      false: {
+        $$color: '$colors$neutral400',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral200',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+  },
+  '& div:nth-child(1)': { display: 'flex' },
+});
+
+export const ChainImageContainer = styled('div', {
+  width: '18px',
+  height: '18px',
+  borderRadius: '100%',
+  border: '1.5px transparent solid',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  variants: {
+    state: {
+      error: {
+        borderColor: '$error500',
+      },
+      warning: { borderColor: '$warning500' },
+    },
+  },
+});
+
+export const Content = styled(CollapsibleContent, {
+  width: '100%',
+  background: 'inherit',
+});
+
+export const IconContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '$2',
+  transition: `all ${EXPANDABLE_QUOTE_TRANSITION_DURATION}ms ease`,
+  variants: {
+    orientation: {
+      down: {
+        transform: 'rotate(0)',
+      },
+      up: {
+        transform: 'rotate(180deg)',
+      },
+    },
+  },
+});
+
+export const Separator = styled('div', {
+  height: '$12',
+  marginLeft: '$10',
+  marginRight: '$10',
+  borderLeft: '1px solid $foreground',
+});
+
+export const HorizontalSeparator = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  margin: '0 $15',
+  borderTop: '1px solid',
+  $$color: '$colors$neutral300',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral400',
+  },
+  borderColor: '$$color',
+});
+
+export const FrameIcon = styled('div', {
+  width: '$16',
+  height: '$16',
+  justifyContent: 'center',
+  alignItems: 'center',
+  display: 'flex',
+});
+
+export const BasicInfoOutput = styled(Typography, {
+  width: '100%',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  letterSpacing: 0.4,
+});