@rango-dev/widget-embedded 0.17.1-next.8 → 0.18.0

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -19,15 +19,16 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { getQuoteErrorMessage } from '../../constants/errors';
-import { navigationRoutes } from '../../constants/navigationRoutes';
 import { getQuoteUpdateWarningMessage } from '../../constants/warnings';
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
 import { useWalletsStore } from '../../store/wallets';
+import { getBlockchainShortNameFor } from '../../utils/meta';
 import { confirmSwapDisabled } from '../../utils/swap';
 
 import { getRequiredWallets, isValidAddress } from './ConfirmWallets.helpers';
 import {
+  alarmsStyles,
   CollapsibleContent,
   CollapsibleRoot,
   ConfirmButton,
@@ -43,6 +44,7 @@ import {
   Trigger,
   Wallets,
   WalletsContainer,
+  walletsListStyles,
 } from './ConfirmWallets.styles';
 import { WalletList } from './WalletList';
 
@@ -244,7 +246,8 @@ export function ConfirmWalletsModal(props: PropTypes) {
       open={open}
       onClose={() => {
         if (!quoteWalletsConfirmed) {
-          navigate(navigationRoutes.home, { replace: true });
+          const home = '../';
+          navigate(home, { replace: true });
         }
         onClose();
       }}
@@ -285,7 +288,12 @@ export function ConfirmWalletsModal(props: PropTypes) {
             <Typography variant="headline" size="small">
               {i18n.t({
                 id: 'Your {blockchainName} wallets',
-                values: { blockchainName: showMoreWalletFor },
+                values: {
+                  blockchainName: getBlockchainShortNameFor(
+                    showMoreWalletFor,
+                    blockchains
+                  ),
+                },
               })}
             </Typography>
           </ShowMoreHeader>
@@ -312,7 +320,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
       </Modal>
       {showMoreWalletFor && (
         <WalletsContainer>
-          <div className="wallets-list">
+          <div className={walletsListStyles()}>
             <WalletList
               chain={showMoreWalletFor}
               isSelected={isSelected}
@@ -355,7 +363,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                     <Typography variant="title" size="xmedium">
                       {i18n.t({
                         id: 'Your {blockchainName} wallets',
-                        values: { blockchainName: blockchain?.displayName },
+                        values: { blockchainName: blockchain?.shortName },
                       })}
                     </Typography>
                     <Typography
@@ -364,7 +372,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                       size="medium">
                       {i18n.t({
                         id: 'You need to connect a {blockchainName} wallet.',
-                        values: { blockchainName: blockchain?.displayName },
+                        values: { blockchainName: blockchain?.shortName },
                       })}
                     </Typography>
                   </Title>
@@ -452,7 +460,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                         </CollapsibleContent>
                       </CollapsibleRoot>
                       {isAddressMatched && (
-                        <div className="alarms">
+                        <div className={alarmsStyles()}>
                           <Alert
                             variant="alarm"
                             type="error"

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -33,7 +33,7 @@ import {
 } from '../../utils/wallets';
 import { WalletModal } from '../WalletModal';
 
-import { WalletButton } from './ConfirmWallets.styles';
+import { ShowMoreWallets } from './ConfirmWallets.styles';
 import {
   LogoContainer,
   Spinner,
@@ -292,14 +292,14 @@ export function WalletList(props: PropTypes) {
         );
       })}
       {shouldShowMoreWallets && (
-        <WalletButton selected={false} onClick={onShowMore.bind(null)}>
+        <ShowMoreWallets selected={false} onClick={onShowMore}>
           <Typography variant="label" size="medium">
             {i18n.t('Show more wallets')}
             <Typography variant="label" size="medium" color="$primary">
               &nbsp;+{numberOfSupportedWallets - (limit ?? 0)}
             </Typography>
           </Typography>
-        </WalletButton>
+        </ShowMoreWallets>
       )}
     </>
   );

package/src/components/HeaderButtons/HomeButtons.tsx

@@ -11,7 +11,9 @@ import {
 } from '@rango-dev/ui';
 import React from 'react';
 
+import { useAppStore } from '../../store/AppStore';
 import { getContainer } from '../../utils/common';
+import { isFeatureHidden } from '../../utils/settings';
 import { NotificationContent } from '../NotificationContent';
 
 import { HeaderButton } from './HeaderButtons.styles';
@@ -26,6 +28,12 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
     onClickNotifications,
   } = props;
 
+  const {
+    config: { features },
+  } = useAppStore();
+
+  const isNotificationsHidden = isFeatureHidden('notification', features);
+
   return (
     <>
       <Tooltip
@@ -41,25 +49,27 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
         </HeaderButton>
       </Tooltip>
 
-      <Tooltip
-        container={getContainer()}
-        side="top"
-        content={i18n.t('Notifications')}>
-        <Popover
-          align="center"
-          collisionBoundary={layoutRef}
-          collisionPadding={{ right: 20, left: 20 }}
+      {!isNotificationsHidden && (
+        <Tooltip
           container={getContainer()}
-          content={<NotificationContent />}>
-          <HeaderButton
-            size="small"
-            variant="ghost"
-            onClick={onClickNotifications}>
-            <NotificationsIcon size={18} color="black" />
-            <UnreadNotificationsBadge />
-          </HeaderButton>
-        </Popover>
-      </Tooltip>
+          side="top"
+          content={i18n.t('Notifications')}>
+          <Popover
+            align="center"
+            collisionBoundary={layoutRef}
+            collisionPadding={{ right: 20, left: 20 }}
+            container={getContainer()}
+            content={<NotificationContent />}>
+            <HeaderButton
+              size="small"
+              variant="ghost"
+              onClick={onClickNotifications}>
+              <NotificationsIcon size={18} color="black" />
+              <UnreadNotificationsBadge />
+            </HeaderButton>
+          </Popover>
+        </Tooltip>
+      )}
       <Tooltip
         container={getContainer()}
         side="top"

package/src/components/Layout/Layout.styles.ts

@@ -8,8 +8,10 @@ export const Container = styled('div', {
   overflow: 'hidden !important',
   boxShadow: '15px 15px 15px 0px rgba(0, 0, 0, 0.05)',
   width: '95vw',
+  minWidth: '300px',
   maxWidth: '390px',
   maxHeight: '700px',
+  textAlign: 'left',
   $$color: '$colors$neutral100',
   [`.${darkTheme} &`]: {
     $$color: '$colors$neutral300',

package/src/components/Layout/Layout.tsx

@@ -3,12 +3,13 @@ import type { PropsWithChildren } from 'react';
 
 import { BottomLogo, Divider, Header } from '@rango-dev/ui';
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
 
-import { navigationRoutes } from '../../constants/navigationRoutes';
+import { useNavigateBack } from '../../hooks/useNavigateBack';
+import { useAppStore } from '../../store/AppStore';
 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';
@@ -23,25 +24,37 @@ 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 navigate = useNavigate();
+  const navigateBack = useNavigateBack();
 
   const onConnectWallet = () => {
-    if (!connectWalletsButtonDisabled) {
-      navigate('/' + navigationRoutes.wallets);
+    if (!connectWalletsButtonDisabled && header.onWallet) {
+      header.onWallet();
     }
   };
+
+  const showBackButton =
+    typeof header.hasBackButton === 'undefined' || header.hasBackButton;
+
   return (
     <Container ref={ref} fixedHeight={fixedHeight} id="swap-box">
       <Header
-        prefix={<>{header.onBack && <BackButton onClick={header.onBack} />}</>}
+        prefix={<>{showBackButton && <BackButton onClick={navigateBack} />}</>}
         title={header.title}
         suffix={
           <>
             {header.suffix}
-            {header.hasConnectWallet && (
+            {header.onWallet && !isConnectWalletHidden && (
               <WalletButton
                 container={getContainer()}
                 onClick={onConnectWallet}

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

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

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

@@ -1,78 +1,82 @@
-import { styled } from '@rango-dev/ui';
+import { css, styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   width: '100%',
   height: '100%',
-  padding: '$0 $20',
-
-  '.cost': {
-    paddingTop: '$15',
-    display: 'flex',
-  },
-
-  '.quote-summary': {
-    padding: '$15 $0',
-  },
-
-  '.quote-summary-item': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-
-  '.token-amount': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-
-  '.quote-summary-separator': {
-    width: '0px',
-    height: '$16',
-    borderLeft: '1px solid $neutral400',
-    marginLeft: '13px',
-  },
-
-  '.swaps-steps': {
-    paddingBottom: '$10',
-  },
+  padding: '$10 $20',
 });
 
 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,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 quoteSummary = (
-    <div className="quote-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="quote-summary">
-        {quoteSummary}
-        <div className="quote-summary-separator"></div>
-        {quoteSummary}
-      </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/NoResult/NoResult.helpers.ts

@@ -27,18 +27,6 @@ export function makeInfo(
       },
       description: '',
     };
-  } else if (
-    error?.type === QuoteErrorType.NO_RESULT &&
-    error.diagnosisMessage
-  ) {
-    return {
-      alert: {
-        type: 'error',
-        text: error.diagnosisMessage,
-        action: null,
-      },
-      description: '',
-    };
   } else if (disabledLiquiditySources.length) {
     return {
       alert: {
@@ -51,6 +39,18 @@ 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,

package/src/components/NoResult/NoResult.tsx

@@ -12,17 +12,14 @@ import React from 'react';
 
 import { errorMessages } from '../../constants/errors';
 import { useAppStore } from '../../store/AppStore';
-import { useSettingsStore } from '../../store/settings';
 
 import { makeInfo } from './NoResult.helpers';
 import { Container, Footer, PrefixIcon } from './NoResult.styles';
 
 export function NoResult(props: PropTypes) {
   const { fetch, error } = props;
-  const disabledLiquiditySources =
-    useSettingsStore.use.disabledLiquiditySources();
-  const toggleAllLiquiditySources =
-    useSettingsStore.use.toggleAllLiquiditySources();
+  const disabledLiquiditySources = useAppStore().disabledLiquiditySources;
+  const toggleAllLiquiditySources = useAppStore().toggleAllLiquiditySources;
 
   const swappers = useAppStore().swappers();
 

package/src/components/NotificationContent/NotificationContent.tsx

@@ -10,6 +10,7 @@ import {
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { navigationRoutes } from '../../constants/navigationRoutes';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useUiStore } from '../../store/ui';
@@ -34,7 +35,7 @@ export function NotificationContent() {
 
   const handleOnClick = (requestId: Notification['requestId']) => {
     setSelectedSwap(requestId);
-    navigate(`/swaps/${requestId}`);
+    navigate(`${navigationRoutes.swaps}/${requestId}`);
   };
 
   return (

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

@@ -1,5 +1,5 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { darkTheme, styled } from '@rango-dev/ui';
+import { css, darkTheme, Image, styled, Typography } from '@rango-dev/ui';
 
 import { CollapsibleContent } from '../ConfirmWalletsModal/ConfirmWallets.styles';
 
@@ -13,6 +13,7 @@ export const QuoteContainer = styled(Collapsible.Root, {
   overflowY: 'hidden',
   width: '100%',
   borderRadius: '$xm',
+  cursor: 'default',
   variants: {
     recommended: {
       true: {
@@ -31,9 +32,10 @@ export const QuoteContainer = styled(Collapsible.Root, {
       },
     },
   },
-  '& .steps-details': {
-    padding: '$10 $15',
-  },
+});
+
+export const stepsDetailsStyles = css({
+  padding: '$10 $15',
 });
 
 export const SummaryContainer = styled('div', {
@@ -104,14 +106,23 @@ export const SummaryContainer = styled('div', {
       },
     },
   ],
-  '& .summary': {
-    width: '100%',
-    padding: '$15 $15 $10 $15',
-  },
-  '& .basic-info': {
-    paddingTop: '$10',
-    display: 'flex',
-    alignItems: 'center',
+});
+
+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',
   },
 });
 
@@ -162,8 +173,27 @@ export const Chains = styled(Collapsible.Trigger, {
   '& 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', {
@@ -210,3 +240,10 @@ export const FrameIcon = styled('div', {
   alignItems: 'center',
   display: 'flex',
 });
+
+export const BasicInfoOutput = styled(Typography, {
+  width: '100%',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  letterSpacing: 0.4,
+});