@rango-dev/widget-embedded 0.24.2-next.6 → 0.25.0

package/dist/pages/WalletsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAuBxC,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBA0E1B"}
+{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAsBxC,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBA0E1B"}

package/dist/utils/wallets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/utils/wallets.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/utils/wallets.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.24.2-next.6",
+  "version": "0.25.0",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -22,13 +22,13 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.2.0",
-    "@rango-dev/provider-all": "^0.29.1-next.1",
+    "@rango-dev/provider-all": "^0.30.0",
     "@rango-dev/queue-manager-core": "^0.26.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.29.2-next.1",
+    "@rango-dev/queue-manager-rango-preset": "^0.30.0",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/ui": "^0.30.1-next.2",
-    "@rango-dev/wallets-react": "^0.15.1-next.0",
-    "@rango-dev/wallets-shared": "^0.29.1-next.0",
+    "@rango-dev/ui": "^0.31.0",
+    "@rango-dev/wallets-react": "^0.16.0",
+    "@rango-dev/wallets-shared": "^0.30.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

package/src/components/HeaderButtons/HeaderButtons.tsx

@@ -26,6 +26,7 @@ export function HeaderButtons(props: HeaderButtonsPropTypes) {
     onClickHistory,
     onClickSettings,
     hidden = [],
+    container,
   } = props;
 
   const {
@@ -40,7 +41,7 @@ export function HeaderButtons(props: HeaderButtonsPropTypes) {
     <>
       {!hidden.includes('refresh') && (
         <Tooltip
-          container={getContainer()}
+          container={container || getContainer()}
           side="top"
           content={i18n.t('Refresh')}>
           <RefreshButton onClick={onClickRefresh} />

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

@@ -8,4 +8,5 @@ export interface HeaderButtonsPropTypes {
   onClickRefresh?: () => void;
   onClickHistory?: () => void;
   hidden?: ('settings' | 'refresh' | 'history' | 'notifications')[];
+  container?: HTMLElement;
 }

package/src/components/Quote/Quote.tsx

@@ -85,6 +85,7 @@ export function Quote(props: QuoteProps) {
     showModalFee = true,
     onClickAllRoutes,
     fullExpandedMode = false,
+    container: propContainer,
   } = props;
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
@@ -308,7 +309,7 @@ export function Quote(props: QuoteProps) {
   const steps = getQuoteSteps(quote?.swaps ?? []);
 
   const numberOfSteps = steps.length;
-  const container = getContainer();
+  const container = propContainer || getContainer();
   const sortedQuoteTags = sortTags(props.quote.tags || []);
   const showAllRoutesButton = !!onClickAllRoutes;
   const totalTime = roundedSecondsToString(totalArrivalTime(quote?.swaps));
@@ -467,6 +468,7 @@ export function Quote(props: QuoteProps) {
           quoteRef={quoteRef}
           selected={selected}
           setExpanded={setExpanded}
+          container={container}
           expanded={expanded}
           steps={steps}
         />

package/src/components/Quote/Quote.types.ts

@@ -15,6 +15,7 @@ export type QuoteProps = {
   showModalFee?: boolean;
   onClickAllRoutes?: () => void;
   fullExpandedMode?: boolean;
+  container?: HTMLElement;
 };
 
 export type optionProps = {
@@ -29,6 +30,7 @@ export type QuoteTriggerProps = {
   setExpanded: React.Dispatch<React.SetStateAction<boolean | undefined>>;
   steps: Step[];
   expanded?: boolean;
+  container?: HTMLElement;
 };
 
 export type QuoteTriggerImagesProps = {
@@ -37,6 +39,7 @@ export type QuoteTriggerImagesProps = {
   src: string;
   open?: boolean;
   className?: string;
+  container?: HTMLElement;
 };
 
 export type QuoteCostDetailsProps = {

package/src/components/Quote/QuoteTrigger.tsx

@@ -27,8 +27,8 @@ const MAX_STEPS = 4;
 const MAX_BLOCKCHAINS = 6;
 
 const ImageComponent = (props: QuoteTriggerImagesProps) => {
-  const tooltipContainer = getContainer();
-  const { content, src, className, open, state } = props;
+  const { content, src, className, open, state, container } = props;
+  const tooltipContainer = container || getContainer();
   return (
     <Tooltip
       container={tooltipContainer}
@@ -44,8 +44,9 @@ const ImageComponent = (props: QuoteTriggerImagesProps) => {
 };
 
 export function QuoteTrigger(props: QuoteTriggerProps) {
-  const { quoteRef, selected, setExpanded, steps, expanded, type } = props;
-  const tooltipContainer = getContainer();
+  const { quoteRef, selected, setExpanded, steps, expanded, type, container } =
+    props;
+  const tooltipContainer = container || getContainer();
   const numberOfSteps = steps.length;
   const blockchains = getUniqueBlockchains(steps);
   const { isTablet, isMobile } = useScreenDetect();
@@ -78,6 +79,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
                 content={step.swapper.displayName}
                 src={step.swapper.image}
                 state={step.state}
+                container={container}
               />
               {index !== numberOfSteps - 1 && <>{arrow}</>}
             </React.Fragment>
@@ -90,6 +92,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
                     content={step.swapper.displayName}
                     src={step.swapper.image}
                     state={step.state}
+                    container={container}
                   />
                   {index !== numberOfSteps - 1 && <>{arrow}</>}
                 </>
@@ -182,6 +185,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
                                   src={chain.image}
                                   open={false}
                                   className={i > index ? 'blockchainImage' : ''}
+                                  container={container}
                                 />
                               )
                           )}

package/src/components/Quotes/Quotes.tsx

@@ -27,6 +27,7 @@ export function Quotes(props: PropTypes) {
     showModalFee,
     hasSort = true,
     fullExpandedMode = false,
+    container: propContainer,
   } = props;
   const {
     selectedQuote,
@@ -39,6 +40,7 @@ export function Quotes(props: PropTypes) {
   } = useQuoteStore();
   const { slippage, customSlippage } = useAppStore();
   const tokens = useAppStore().tokens();
+  const container = propContainer || getContainer();
   const hasQuotes = !!quotes && quotes.results.length;
   const userSlippage = customSlippage ?? slippage;
   const getQuoteWarning = (quote: MultiRouteSimulationResult) => {
@@ -73,7 +75,7 @@ export function Quotes(props: PropTypes) {
             <Typography size="xmedium" variant="title">
               {i18n.t('Sort by')}
             </Typography>
-            <SelectStrategy container={getContainer()} />
+            <SelectStrategy container={container} />
           </StrategyContent>
           <Divider size="10" />
         </>
@@ -107,6 +109,7 @@ export function Quotes(props: PropTypes) {
                   <React.Fragment key={quote.requestId}>
                     <QuoteInfo
                       showModalFee={showModalFee}
+                      container={container}
                       selected={selectedQuote?.requestId === quote.requestId}
                       tagHidden={false}
                       quote={{ ...quote, requestAmount: quotes.requestAmount }}

package/src/components/Quotes/Quotes.types.ts

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

package/src/components/SwapDetails/SwapDetails.styles.ts

@@ -1,4 +1,4 @@
-import { css, darkTheme, styled } from '@rango-dev/ui';
+import { css, darkTheme, styled, Typography } from '@rango-dev/ui';
 
 import { ScrollableArea } from '../Layout';
 
@@ -85,3 +85,12 @@ export const StyledLink = styled('a', {
   alignItems: 'center',
   justifyContent: 'center',
 });
+
+export const ErrorMessages = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '$5',
+});
+export const MessageText = styled(Typography, {
+  wordBreak: 'break-all',
+});

package/src/components/SwapDetails/SwapDetails.tsx

@@ -64,7 +64,9 @@ import {
 
 import { getSteps, getStepState, RESET_INTERVAL } from './SwapDetails.helpers';
 import {
+  ErrorMessages,
   HeaderDetails,
+  MessageText,
   outputStyles,
   requestIdStyles,
   rowStyles,
@@ -211,36 +213,55 @@ export function SwapDetails(props: SwapDetailsProps) {
 
   const percentageChange = getPriceImpact(inputUsdValue, outputUsdValue);
 
+  const stepDetailMessage =
+    stepMessage.detailedMessage.content || stepMessage.shortMessage;
+
   const completeModalDesc =
-    swap.status === 'success'
-      ? i18n.t({
-          id: 'You have received {amount} {token} in {conciseAddress} wallet on {chain} chain.',
-          values: {
-            amount: numberToString(
-              outputAmount,
-              TOKEN_AMOUNT_MIN_DECIMALS,
-              TOKEN_AMOUNT_MAX_DECIMALS
-            ),
-            token: steps[numberOfSteps - 1].to.token.displayName,
-            conciseAddress: getConciseAddress(
-              swap.wallets[steps[numberOfSteps - 1].to.chain.displayName]
-                ?.address || ''
-            ),
-            chain: steps[numberOfSteps - 1].to.chain.displayName,
-          },
-        })
-      : `${i18n.t('Transaction was not sent.')} ${
-          lastConvertedTokenInFailedSwap
-            ? i18n.t({
+    swap.status === 'success' ? (
+      i18n.t({
+        id: 'You have received {amount} {token} in {conciseAddress} wallet on {chain} chain.',
+        values: {
+          amount: numberToString(
+            outputAmount,
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
+          ),
+          token: steps[numberOfSteps - 1].to.token.displayName,
+          conciseAddress: getConciseAddress(
+            swap.wallets[steps[numberOfSteps - 1].to.chain.displayName]
+              ?.address || ''
+          ),
+          chain: steps[numberOfSteps - 1].to.chain.displayName,
+        },
+      })
+    ) : (
+      <ErrorMessages>
+        <Typography
+          variant="body"
+          size="medium"
+          color="neutral700"
+          align="center">
+          {!stepDetailMessage ? i18n.t('Transaction was not sent.') : ''}
+          {lastConvertedTokenInFailedSwap
+            ? `${i18n.t({
                 id: '{amount} {symbol} on {blockchain} remain in your wallet',
                 values: {
                   amount: lastConvertedTokenInFailedSwap.outputAmount,
                   symbol: lastConvertedTokenInFailedSwap.symbol,
                   blockchain: lastConvertedTokenInFailedSwap.blockchain,
                 },
-              })
-            : ''
-        }`;
+              })}`
+            : ''}
+        </Typography>
+        <MessageText
+          align="center"
+          variant="body"
+          size="medium"
+          color="neutral700">
+          {stepDetailMessage}
+        </MessageText>
+      </ErrorMessages>
+    );
 
   return (
     <Layout

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.Failed.tsx

@@ -1,13 +1,12 @@
 import type { FailedAlertsProps } from './SwapDetailsAlerts.types';
 
-import {
-  Alert,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  IconButton,
-} from '@rango-dev/ui';
+import { Alert, ChevronDownIcon, IconButton } from '@rango-dev/ui';
 import React, { useState } from 'react';
 
+import { MessageText } from '../SwapDetails/SwapDetails.styles';
+
+import { ActionIcon, AlertFooter } from './SwapDetailsAlerts.styles';
+
 export function FailedAlert(props: FailedAlertsProps) {
   const { message } = props;
   const [showContentError, setShowContentError] = useState(false);
@@ -16,21 +15,30 @@ export function FailedAlert(props: FailedAlertsProps) {
     <Alert
       type="error"
       title={message.shortMessage}
+      containerStyles={{
+        '& .footer': {
+          paddingTop: '$0',
+        },
+      }}
       action={
         message.detailedMessage.content && (
           <IconButton
             onClick={() => setShowContentError((prev) => !prev)}
             variant="ghost"
             size="xsmall">
-            {showContentError ? (
-              <ChevronUpIcon size={12} color="gray" />
-            ) : (
+            <ActionIcon rotated={showContentError}>
               <ChevronDownIcon size={12} color="gray" />
-            )}
+            </ActionIcon>
           </IconButton>
         )
       }
-      footer={showContentError ? message.detailedMessage.content : undefined}
+      footer={
+        <AlertFooter open={showContentError}>
+          <MessageText variant="body" size="xsmall" color="neutral700">
+            {message.detailedMessage.content}
+          </MessageText>
+        </AlertFooter>
+      }
     />
   );
 }

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.styles.ts

@@ -5,3 +5,27 @@ export const Alerts = styled('div', {
   flexDirection: 'column',
   gap: '$10',
 });
+
+export const ActionIcon = styled('div', {
+  transition: 'transform 0.3s ease-in-out',
+  variants: {
+    rotated: {
+      true: {
+        transform: 'rotate(180deg)',
+      },
+    },
+  },
+});
+
+export const AlertFooter = styled('div', {
+  transition: 'max-height 0.3s ease-in-out',
+  maxHeight: '0px',
+  overflow: 'hidden',
+  variants: {
+    open: {
+      true: {
+        maxHeight: '200px',
+      },
+    },
+  },
+});

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.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,
       };
     });
 }