@rango-dev/widget-embedded 0.24.2-next.5 → 0.24.2-next.7

package/src/components/SwapDetailsModal/SwapDetailsModal.styles.ts

@@ -4,3 +4,11 @@ export const WalletContainer = styled('div', {
   display: 'flex',
   justifyContent: 'center',
 });
+
+export const TooltipErrorContent = styled('div', {
+  maxWidth: 280,
+  '& ._typography': {
+    wordWrap: 'break-word',
+    display: 'block',
+  },
+});

package/src/components/SwapDetailsModal/SwapDetailsModal.types.ts

@@ -37,7 +37,7 @@ export interface CompleteModalPropTypes {
     displayName: string;
     image: string;
   };
-  description?: string;
+  description?: React.ReactNode;
   diagnosisUrl?: string | null;
 }
 

package/src/containers/ExpandedQuotes/ExpandedQuotes.tsx

@@ -22,7 +22,7 @@ export function ExpandedQuotes(props: PropTypes) {
   const containerClass = isDelayedVisible ? '' : 'is-hidden';
   const { config } = useAppStore();
   const fullExpandedMode = config?.variant === 'full-expanded';
-
+  const container = getExpanded();
   useEffect(() => {
     let timeout: ReturnType<typeof setTimeout> | null = null;
 
@@ -53,8 +53,9 @@ export function ExpandedQuotes(props: PropTypes) {
         title={i18n.t('Routes')}
         suffix={
           <>
-            <SelectStrategy container={getExpanded()} />
+            <SelectStrategy container={container} />
             <HeaderButtons
+              container={container}
               onClickRefresh={onClickRefresh}
               hidden={['history', 'notifications', 'settings']}
             />
@@ -67,6 +68,7 @@ export function ExpandedQuotes(props: PropTypes) {
           fetch={fetch}
           hasSort={false}
           loading={loading}
+          container={getExpanded()}
           onClickOnQuote={onClickOnQuote}
           fullExpandedMode={fullExpandedMode}
         />

package/src/containers/QuoteInfo/QuoteInfo.styles.ts

@@ -8,6 +8,13 @@ export const QuoteContainer = styled('div', {
 });
 export const FooterStepAlarm = styled('div', {
   paddingBottom: '$15',
+  variants: {
+    dense: {
+      true: {
+        paddingBottom: 0,
+      },
+    },
+  },
 });
 
 export const FooterAlert = styled('div', {

package/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -26,6 +26,7 @@ export function QuoteInfo(props: PropTypes) {
     selected,
     onClickAllRoutes,
     fullExpandedMode = false,
+    container,
   } = props;
   const { inputAmount, inputUsdValue, toToken } = useQuoteStore();
 
@@ -59,6 +60,7 @@ export function QuoteInfo(props: PropTypes) {
       <Quote
         quote={quote}
         error={error}
+        container={container}
         showModalFee={showModalFee}
         warning={warning}
         tagHidden={tagHidden}

package/src/containers/QuoteInfo/QuoteInfo.types.ts

@@ -15,4 +15,5 @@ export type PropTypes = {
   selected?: boolean;
   showModalFee?: boolean;
   fullExpandedMode?: boolean;
+  container?: HTMLElement;
 };

package/src/containers/Settings/Lists.tsx

@@ -4,12 +4,12 @@ import type { ListPropTypes, SvgIconProps } from '@rango-dev/ui';
 import { i18n } from '@lingui/core';
 import {
   AutoThemeIcon,
-  BridgeIcon,
+  BridgesIcon,
   ChevronRightIcon,
   DarkModeIcon,
   Divider,
-  DoneIcon,
   ExchangeIcon,
+  InfinityIcon,
   InfoIcon,
   LanguageIcon,
   LightModeIcon,
@@ -42,7 +42,7 @@ const ThemeSection = styled('div', {
 const themesList = [
   {
     id: ThemeModeEnum.LIGHT,
-    icon: <LightModeIcon color="black" size={16} />,
+    icon: <LightModeIcon color="black" size={24} />,
     tooltip: (
       <Typography size="xsmall" variant="body">
         {i18n.t('Light')}
@@ -51,7 +51,7 @@ const themesList = [
   },
   {
     id: ThemeModeEnum.DARK,
-    icon: <DarkModeIcon color="black" size={14} />,
+    icon: <DarkModeIcon color="black" size={24} />,
     tooltip: (
       <Typography size="xsmall" variant="body">
         {i18n.t('Dark')}
@@ -60,7 +60,7 @@ const themesList = [
   },
   {
     id: ThemeModeEnum.AUTO,
-    icon: <AutoThemeIcon color="black" size={16} />,
+    icon: <AutoThemeIcon color="black" size={24} />,
     tooltip: (
       <Typography size="xsmall" variant="body">
         {i18n.t('Auto')}
@@ -70,7 +70,7 @@ const themesList = [
 ];
 
 const getThemeIcon = (theme: ThemeMode) => {
-  const iconProps: SvgIconProps = { color: 'gray', size: 14 };
+  const iconProps: SvgIconProps = { color: 'gray', size: 16 };
 
   switch (theme) {
     case 'auto':
@@ -161,7 +161,7 @@ export function SettingsLists() {
       </>
     ),
     onClick: () => navigate(navigationRoutes.bridges),
-    start: <BridgeIcon color="gray" size={14} />,
+    start: <BridgesIcon color="gray" size={16} />,
   };
 
   const exchangeItem = {
@@ -178,10 +178,10 @@ export function SettingsLists() {
           totalExchangeSources
         )}
         <Divider direction="horizontal" size={8} />
-        <ChevronRightIcon color="gray" />
+        <ChevronRightIcon color="black" />
       </>
     ),
-    start: <ExchangeIcon color="gray" size={14} />,
+    start: <ExchangeIcon color="gray" size={16} />,
     onClick: () => navigate(navigationRoutes.exchanges),
   };
 
@@ -192,14 +192,14 @@ export function SettingsLists() {
         {i18n.t('Language')}
       </Typography>
     ),
-    start: <LanguageIcon color="gray" size={14} />,
+    start: <LanguageIcon color="gray" size={16} />,
     end: (
       <>
         <Typography variant="body" size="medium">
           {currentLanguage}
         </Typography>
         <Divider direction="horizontal" size={8} />
-        <ChevronRightIcon color="gray" />
+        <ChevronRightIcon color="black" />
       </>
     ),
     onClick: () => navigate(navigationRoutes.languages),
@@ -230,7 +230,7 @@ export function SettingsLists() {
         </Tooltip>
       </>
     ),
-    start: <DoneIcon color="gray" size={14} />,
+    start: <InfinityIcon color="gray" size={16} />,
     end: <Switch checked={infiniteApprove} />,
     onClick: toggleInfiniteApprove,
   };

package/src/hooks/useWalletList.ts

@@ -5,6 +5,7 @@ import type { BlockchainMeta } from 'rango-sdk';
 import { WalletState } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import {
+  detectMobileScreens,
   KEPLR_COMPATIBLE_WALLETS,
   type WalletType,
   WalletTypes,
@@ -47,13 +48,19 @@ export function useWalletList(params: Params) {
       walletConnectProjectId: config?.walletConnectProjectId,
     }) || ALL_SUPPORTED_WALLETS;
 
-  const wallets = mapWalletTypesToWalletInfo(
+  let wallets = mapWalletTypesToWalletInfo(
     state,
     getWalletInfo,
     listAvailableWalletTypes,
     chain
   );
 
+  wallets = detectMobileScreens()
+    ? wallets.filter(
+        (wallet) => wallet.showOnMobile || state(wallet.type).installed
+      )
+    : wallets;
+
   const sortedWallets = sortWalletsBasedOnConnectionState(wallets);
   const [error, setError] = useState('');
 

package/src/pages/WalletsPage.tsx

@@ -13,12 +13,11 @@ import { getContainer } from '../utils/common';
 
 const ListContainer = styled('div', {
   display: 'flex',
-  justifyContent: 'space-evenly',
+  justifyContent: 'center',
   alignItems: 'center',
   gap: '$10',
   flexWrap: 'wrap',
   paddingTop: '$5',
-  height: '100%',
 });
 
 const Container = styled(PageContainer, {

package/src/utils/wallets.ts

@@ -77,7 +77,12 @@ export function mapWalletTypesToWalletInfo(
       return true;
     })
     .map((type) => {
-      const { name, img: image, installLink } = getWalletInfo(type);
+      const {
+        name,
+        img: image,
+        installLink,
+        showOnMobile,
+      } = getWalletInfo(type);
       const state = mapStatusToWalletState(getState(type));
       return {
         title: name,
@@ -85,6 +90,7 @@ export function mapWalletTypesToWalletInfo(
         link: detectInstallLink(installLink),
         state,
         type,
+        showOnMobile,
       };
     });
 }