@rango-dev/widget-embedded 0.22.4-next.1 → 0.22.4-next.11

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -55,7 +55,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
 
   const blockchains = useAppStore().blockchains();
   const {
-    quote,
+    selectedQuote,
     setSelectedWallets: selectQuoteWallets,
     quoteWalletsConfirmed: quoteWalletsConfirmed,
     setQuoteWalletConfirmed: setQuoteWalletConfirmed,
@@ -70,33 +70,37 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const [quoteWarning, setQuoteWarning] = useState<
     ConfirmSwapWarnings['quoteUpdate'] | null
   >(null);
-  const [destination, setDestination] = useState(customDestination);
   const [showCustomDestination, setShowCustomDestination] = useState(
     !!customDestination
   );
 
-  const requiredWallets = getRequiredWallets(quote);
+  const requiredWallets = getRequiredWallets(selectedQuote?.swaps || null);
 
   const lastStepToBlockchain = blockchains.find(
     (blockchain) =>
       blockchain.name ===
-      quote?.result?.swaps[quote?.result?.swaps.length - 1].to.blockchain
+      selectedQuote?.swaps[selectedQuote?.swaps.length - 1].to.blockchain
   );
   const isWalletRequiredFor = (blockchain: string) =>
-    !!quote?.result?.swaps.find((swap) => swap.from.blockchain === blockchain);
+    !!selectedQuote?.swaps.find((swap) => swap.from.blockchain === blockchain);
 
-  const [selectableWallets, setSelectableWallets] = useState<ConnectedWallet[]>(
+  const getInitialSelectableWallets = () =>
     connectedWallets.filter((connectedWallet) => {
       return (
         connectedWallet.selected &&
         requiredWallets.includes(connectedWallet.chain)
       );
-    })
+    });
+
+  const [selectableWallets, setSelectableWallets] = useState<ConnectedWallet[]>(
+    getInitialSelectableWallets()
   );
   const lastStepToBlockchainMeta = blockchains.find(
     (chain) => chain.name === lastStepToBlockchain?.name
   );
 
+  const isInsufficientBalanceModalOpen = balanceWarnings.length > 0;
+
   const isSelected = (walletType: string, chain: string) =>
     !!selectableWallets.find(
       (selectableWallet) =>
@@ -104,18 +108,18 @@ export function ConfirmWalletsModal(props: PropTypes) {
         selectableWallet.chain === chain &&
         selectableWallet.selected &&
         (isWalletRequiredFor(chain) ||
-          (!isWalletRequiredFor(chain) && !destination))
+          (!isWalletRequiredFor(chain) && !customDestination))
     );
 
   const isAddressMatched =
-    !!destination &&
+    !!customDestination &&
     showCustomDestination &&
     lastStepToBlockchainMeta &&
-    !isValidAddress(lastStepToBlockchainMeta, destination);
+    !isValidAddress(lastStepToBlockchainMeta, customDestination);
 
   const resetCustomDestination = () => {
     setShowCustomDestination(false);
-    setDestination('');
+    setCustomDestination(null);
     setSelectableWallets((selectableWallets) => {
       let anyWalletSelected = false;
       return selectableWallets.map((selectableWallet) => {
@@ -155,7 +159,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
     onCancel();
     if (wallet.chain === lastStepToBlockchain?.name && showCustomDestination) {
       setShowCustomDestination(false);
-      setDestination('');
+      setCustomDestination(null);
     }
     setSelectableWallets((selectableWallets) =>
       selectableWallets
@@ -170,7 +174,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
     );
     selectWallets(lastSelectedWallets);
     selectQuoteWallets(lastSelectedWallets);
-    setCustomDestination(destination);
     setQuoteWalletConfirmed(true);
     onClose();
   };
@@ -188,9 +191,8 @@ export function ConfirmWalletsModal(props: PropTypes) {
     );
     const result = await onCheckBalance?.({
       selectedWallets,
-      customDestination: destination,
+      customDestination,
     });
-
     const warnings = result.warnings;
     if (warnings?.balance?.messages) {
       setBalanceWarnings(warnings.balance.messages);
@@ -254,8 +256,8 @@ export function ConfirmWalletsModal(props: PropTypes) {
               disabled={confirmSwapDisabled(
                 loading,
                 showCustomDestination,
-                destination,
-                quote,
+                customDestination,
+                selectedQuote,
                 selectableWallets,
                 lastStepToBlockchain
               )}
@@ -294,7 +296,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
       })}
       anchor="center">
       <WatermarkedModal
-        open={balanceWarnings.length > 0}
+        open={isInsufficientBalanceModalOpen}
         onClose={setBalanceWarnings.bind(null, [])}
         container={modalContainer}>
         <MessageBox
@@ -442,9 +444,15 @@ export function ConfirmWalletsModal(props: PropTypes) {
                         <StyledTextField
                           autoFocus
                           placeholder={i18n.t('Your destination address')}
-                          value={destination}
+                          value={customDestination || ''}
                           onChange={(e) => {
-                            setDestination(e.target.value);
+                            const value = e.target.value;
+                            if (!value.length) {
+                              setShowCustomDestination(false);
+                              setCustomDestination(null);
+                            } else {
+                              setCustomDestination(value.length ? value : null);
+                            }
                           }}
                         />
                       </CustomCollapsible>
@@ -455,7 +463,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                             variant="alarm"
                             type="error"
                             title={i18n.t({
-                              values: { destination },
+                              values: { destination: customDestination },
                               id: "Address {destination} doesn't match the blockchain address pattern.",
                             })}
                           />

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -59,23 +59,24 @@ export function WalletList(props: PropTypes) {
     useState<'in-progress' | 'completed' | 'rejected' | null>(null);
   const { suggestAndConnect } = useWallets();
   let modalTimerId: ReturnType<typeof setTimeout> | null = null;
-  const { list, error, handleClick } = useWalletList({
-    config,
-    chain,
-    onBeforeConnect: (type) => {
-      modalTimerId = setTimeout(() => {
-        setOpenWalletStateModal(type);
-      }, TIME_TO_IGNORE_MODAL);
-    },
-    onConnect: () => {
-      if (modalTimerId) {
-        clearTimeout(modalTimerId);
-      }
-      setTimeout(() => {
-        setOpenWalletStateModal('');
-      }, TIME_TO_CLOSE_MODAL);
-    },
-  });
+  const { list, error, handleClick, disconnectConnectingWallets } =
+    useWalletList({
+      config,
+      chain,
+      onBeforeConnect: (type) => {
+        modalTimerId = setTimeout(() => {
+          setOpenWalletStateModal(type);
+        }, TIME_TO_IGNORE_MODAL);
+      },
+      onConnect: () => {
+        if (modalTimerId) {
+          clearTimeout(modalTimerId);
+        }
+        setTimeout(() => {
+          setOpenWalletStateModal('');
+        }, TIME_TO_CLOSE_MODAL);
+      },
+    });
   const [sortedList, setSortedList] = useState<WalletInfo[]>(list);
   const numberOfSupportedWallets = list.length;
   const shouldShowMoreWallets = limit && numberOfSupportedWallets - limit > 0;
@@ -133,6 +134,11 @@ export function WalletList(props: PropTypes) {
     };
   }, [addingExperimentalChainStatus]);
 
+  const handleCloseWalletModal = () => {
+    disconnectConnectingWallets();
+    setOpenWalletStateModal('');
+  };
+
   return (
     <>
       {sortedList.slice(0, limit).map((wallet) => {
@@ -195,7 +201,7 @@ export function WalletList(props: PropTypes) {
           <>
             <WalletModal
               open={openWalletStateModal === wallet.type}
-              onClose={() => setOpenWalletStateModal('')}
+              onClose={handleCloseWalletModal}
               image={wallet.image}
               state={wallet.state}
               error={error}

package/src/components/HeaderButtons/{HomeButtons.tsx → HeaderButtons.tsx}

@@ -1,4 +1,4 @@
-import type { HomeButtonsPropTypes } from './HeaderButtons.types';
+import type { HeaderButtonsPropTypes } from './HeaderButtons.types';
 
 import { i18n } from '@lingui/core';
 import {
@@ -19,23 +19,32 @@ import { HeaderButton } from './HeaderButtons.styles';
 import { RefreshButton } from './RefreshButton';
 import { UnreadNotificationsBadge } from './UnreadNotificationsBadge';
 
-export function HomeButtons(props: HomeButtonsPropTypes) {
-  const { onClickRefresh, onClickHistory, onClickSettings } = props;
+export function HeaderButtons(props: HeaderButtonsPropTypes) {
+  const {
+    onClickRefresh,
+    onClickHistory,
+    onClickSettings,
+    hidden = [],
+  } = props;
 
   const {
     config: { features },
   } = useAppStore();
 
-  const isNotificationsHidden = isFeatureHidden('notification', features);
+  const isNotificationsHidden =
+    isFeatureHidden('notification', features) ||
+    hidden.includes('notifications');
 
   return (
     <>
-      <Tooltip
-        container={getContainer()}
-        side="top"
-        content={i18n.t('Refresh')}>
-        <RefreshButton onClick={onClickRefresh} />
-      </Tooltip>
+      {!hidden.includes('refresh') && (
+        <Tooltip
+          container={getContainer()}
+          side="top"
+          content={i18n.t('Refresh')}>
+          <RefreshButton onClick={onClickRefresh} />
+        </Tooltip>
+      )}
 
       {!isNotificationsHidden && (
         <Popover
@@ -57,22 +66,26 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
           </div>
         </Popover>
       )}
-      <Tooltip
-        container={getContainer()}
-        side="top"
-        content={i18n.t('Settings')}>
-        <HeaderButton size="small" variant="ghost" onClick={onClickSettings}>
-          <SettingsIcon size={18} color="black" />
-        </HeaderButton>
-      </Tooltip>
-      <Tooltip
-        container={getContainer()}
-        side="top"
-        content={i18n.t('Transactions History')}>
-        <HeaderButton size="small" variant="ghost" onClick={onClickHistory}>
-          <TransactionIcon size={18} color="black" />
-        </HeaderButton>
-      </Tooltip>
+      {!hidden.includes('settings') && (
+        <Tooltip
+          container={getContainer()}
+          side="top"
+          content={i18n.t('Settings')}>
+          <HeaderButton size="small" variant="ghost" onClick={onClickSettings}>
+            <SettingsIcon size={18} color="black" />
+          </HeaderButton>
+        </Tooltip>
+      )}
+      {!hidden.includes('history') && (
+        <Tooltip
+          container={getContainer()}
+          side="top"
+          content={i18n.t('Transactions History')}>
+          <HeaderButton size="small" variant="ghost" onClick={onClickHistory}>
+            <TransactionIcon size={18} color="black" />
+          </HeaderButton>
+        </Tooltip>
+      )}
     </>
   );
 }

package/src/components/HeaderButtons/HeaderButtons.types.ts

@@ -3,8 +3,9 @@ export interface PropTypes {
   isConnected?: boolean;
   container?: HTMLElement;
 }
-export interface HomeButtonsPropTypes {
+export interface HeaderButtonsPropTypes {
+  onClickSettings?: () => void;
   onClickRefresh?: () => void;
   onClickHistory?: () => void;
-  onClickSettings?: () => void;
+  hidden?: ('settings' | 'refresh' | 'history' | 'notifications')[];
 }

package/src/components/HeaderButtons/index.ts

@@ -1,4 +1,4 @@
 export { BackButton } from './BackButton';
 export { CancelButton } from './CancelButton';
 export { WalletButton } from './WalletButton';
-export { HomeButtons } from './HomeButtons';
+export { HeaderButtons } from './HeaderButtons';

package/src/components/Layout/Layout.tsx

@@ -101,7 +101,19 @@ function Layout(props: PropsWithChildren<PropTypes>) {
       className={activeTheme()}
       ref={containerRef}>
       <Header
-        prefix={<>{showBackButton && <BackButton onClick={navigateBack} />}</>}
+        prefix={
+          <>
+            {showBackButton && (
+              <BackButton
+                onClick={() => {
+                  navigateBack();
+                  // As an example, used in routes page to add a custom logic when navigating back to the home page.
+                  header.onBack && header.onBack();
+                }}
+              />
+            )}
+          </>
+        }
         title={header.title}
         suffix={
           <>

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

@@ -14,6 +14,7 @@ export interface PropTypes {
     suffix?: React.ReactNode;
     hasBackButton?: boolean;
     onCancel?: () => void;
+    onBack?: () => void;
   };
   footer?: React.ReactNode;
   height?: ContainerHeightProp;

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

@@ -1,5 +1,12 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { css, darkTheme, Image, styled, Typography } from '@rango-dev/ui';
+import {
+  Button,
+  css,
+  darkTheme,
+  Image,
+  styled,
+  Typography,
+} from '@rango-dev/ui';
 
 import { CollapsibleContent } from '../CustomCollapsible/CustomCollapsible.styles';
 
@@ -13,31 +20,64 @@ export const QuoteContainer = styled(Collapsible.Root, {
   overflowY: 'hidden',
   width: '100%',
   borderRadius: '$xm',
-  cursor: 'default',
   variants: {
-    recommended: {
-      true: {
-        $$color: '$colors$info300',
+    selected: {
+      true: {},
+      false: {
+        $$color: '$colors$neutral400',
         [`.${darkTheme} &`]: {
-          $$color: '$colors$secondary800',
+          $$color: '$colors$neutral200',
         },
         backgroundColor: '$$color',
       },
-      false: {
+    },
+    listItem: {
+      true: {
         $$color: '$colors$neutral400',
         [`.${darkTheme} &`]: {
           $$color: '$colors$neutral200',
         },
         backgroundColor: '$$color',
       },
+      false: {},
     },
   },
+
+  compoundVariants: [
+    {
+      listItem: false,
+      selected: true,
+      css: {
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary800',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+    {
+      listItem: true,
+      selected: false,
+      css: {
+        cursor: 'pointer',
+        '&:hover': {
+          backgroundColor: '$neutral300',
+          [`.${darkTheme} &`]: {
+            backgroundColor: '$neutral400',
+          },
+        },
+      },
+    },
+  ],
 });
 
 export const stepsDetailsStyles = css({
   padding: '$10 $15',
 });
-
+export const AllRoutesButton = styled(Button, {
+  backgroundColor: 'transparent',
+  border: '1px solid $secondary',
+});
 export const SummaryContainer = styled('div', {
   borderRadius: '$xm',
   display: 'flex',
@@ -45,35 +85,35 @@ export const SummaryContainer = styled('div', {
   alignItems: 'start',
   justifyContent: 'space-between',
   color: '$foreground',
-  cursor: 'pointer',
   boxSizing: 'border-box',
   position: 'relative',
   variants: {
-    recommended: {
-      true: {
-        $$color: '$colors$info100',
+    selected: {
+      true: {},
+      false: {
+        $$color: '$colors$neutral200',
         [`.${darkTheme} &`]: {
-          $$color: '$colors$secondary600',
+          $$color: '$colors$neutral500',
         },
         backgroundColor: '$$color',
-        '&:hover': {
-          backgroundColor: '$$color',
-        },
       },
-      false: {
+    },
+    basic: { true: { borderTopRightRadius: '0', borderTopLeftRadius: '0' } },
+    listItem: {
+      true: {
         $$color: '$colors$neutral200',
         [`.${darkTheme} &`]: {
           $$color: '$colors$neutral500',
         },
         backgroundColor: '$$color',
         '&:hover': {
-          backgroundColor: '$$color',
+          backgroundColor: '$neutral300',
+          [`.${darkTheme} &`]: {
+            backgroundColor: '$neutral400',
+          },
         },
+        cursor: 'pointer',
       },
-    },
-    basic: { true: { borderTopRightRadius: '0', borderTopLeftRadius: '0' } },
-    listItem: {
-      true: {},
       false: {},
     },
   },
@@ -81,27 +121,35 @@ export const SummaryContainer = styled('div', {
   compoundVariants: [
     {
       listItem: true,
-      recommended: true,
+      selected: true,
+      css: {
+        border: '1px solid $secondary',
+      },
+    },
+    {
+      listItem: false,
+      selected: true,
       css: {
+        $$color: '$colors$info100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary600',
+        },
+        backgroundColor: '$$color',
         '&:hover': {
-          $$color: '$colors$secondary200',
-          [`.${darkTheme} &`]: {
-            $$color: '$colors$secondary700',
-          },
           backgroundColor: '$$color',
         },
       },
     },
     {
       listItem: true,
-      recommended: false,
+      selected: false,
       css: {
+        cursor: 'pointer',
         '&:hover': {
-          $$color: '$colors$neutral300',
+          backgroundColor: '$neutral300',
           [`.${darkTheme} &`]: {
-            $$color: '$colors$neutral400',
+            backgroundColor: '$neutral400',
           },
-          backgroundColor: '$$color',
         },
       },
     },
@@ -111,7 +159,15 @@ export const SummaryContainer = styled('div', {
 export const summaryStyles = css({
   width: '100%',
   padding: '$15 $15 $10 $15',
-  cursor: 'default',
+});
+
+export const summaryHeaderStyles = css({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  paddingBottom: '$10',
+  position: 'relative',
 });
 
 export const rowStyles = css({
@@ -124,7 +180,6 @@ export const rowStyles = css({
   },
 });
 export const basicInfoStyles = css({
-  paddingTop: '$10',
   display: 'flex',
   alignItems: 'center',
   '.usd-value': {
@@ -163,23 +218,41 @@ export const Trigger = styled(Collapsible.Trigger, {
         },
       },
     },
-    recommended: {
-      true: {
-        $$color: '$colors$info300',
+    selected: {
+      true: {},
+      false: {
+        $$color: '$colors$neutral400',
         [`.${darkTheme} &`]: {
-          $$color: '$colors$secondary800',
+          $$color: '$colors$neutral200',
         },
         backgroundColor: '$$color',
       },
-      false: {
+    },
+    listItem: {
+      true: {
         $$color: '$colors$neutral400',
         [`.${darkTheme} &`]: {
           $$color: '$colors$neutral200',
         },
         backgroundColor: '$$color',
       },
+      false: {},
     },
   },
+
+  compoundVariants: [
+    {
+      listItem: false,
+      selected: true,
+      css: {
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary800',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+  ],
   '.blockchains_section': {
     display: 'none',
   },
@@ -291,3 +364,25 @@ export const MoreStep = styled('div', {
     },
   },
 });
+
+export const Tag = styled('div', {
+  backgroundColor: '$neutral400',
+  borderRadius: '$xs',
+  padding: '$2 $5',
+  fontSize: '$10',
+  fontWeight: 400,
+});
+export const TagContainer = styled('div', {
+  display: 'flex',
+});
+
+export const Line = styled('div', {
+  width: '100%',
+  borderTopWidth: '1px',
+  borderTopStyle: 'solid',
+  borderTopColor: '$neutral',
+  margin: '$5 0',
+  [`.${darkTheme} &`]: {
+    borderTopColor: '$neutral400',
+  },
+});