@rango-dev/widget-embedded 0.23.1-next.11 → 0.23.1-next.13

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

@@ -1 +1 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA2BnD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,wBAAgB,IAAI,sBAsLnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA4BnD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,wBAAgB,IAAI,sBAsLnB"}

package/dist/types/config.d.ts

@@ -2,7 +2,7 @@ import type { Language } from '@rango-dev/ui';
 import type { ProviderInterface } from '@rango-dev/wallets-react';
 import type { WalletType } from '@rango-dev/wallets-shared';
 import type { Asset } from 'rango-sdk';
-export type WidgetVariant = 'default' | 'expandable';
+export type WidgetVariant = 'default' | 'expanded' | 'full-expanded';
 /**
  * The above type defines a set of optional color properties for a widget.
  * @property {string} background
@@ -170,7 +170,8 @@ export type Features = Partial<Record<'theme' | 'language' | 'connectWalletButto
  *   - 'language': Visibility state for the language.
  *   - 'experimentalRoute': Enablement state for the experimental route.
  * @property {WidgetVariant} variant
- *   If it is expandable, multiple routes will show up on the home page;
+ *   If it is expanded, multiple routes will show up on the home page;
+ *   If it is full-expanded, multiple routes will show up on the home page with full routes;
  *   if not, you will need to go to a different page to see the suggested routes.
  */
 export type WidgetConfig = {

package/dist/types/config.d.ts.map

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

package/dist/utils/configs.d.ts

@@ -1,4 +1,4 @@
-import type { Tokens } from '../types';
+import type { Tokens, WidgetVariant } from '../types';
 import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
 export interface Configs {
     API_KEY: string;
@@ -19,5 +19,6 @@ export declare const DEFAULT_FONT_FAMILY = "Roboto";
 export declare const THEME_CLASS_NAME_PREFIX = "theme-widget";
 export declare const isTokenExcludedInConfig: (token: Token | null, tokensConfig?: TokensConfig) => boolean;
 export declare const isBlockchainExcludedInConfig: (blockchain: BlockchainMeta | null, blockchainsConfig?: string[]) => boolean | null | undefined;
+export declare const isVarianExpandable: (variant?: WidgetVariant) => boolean;
 export {};
 //# sourceMappingURL=configs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../src/utils/configs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAM9D,MAAM,WAAW,OAAO;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,KAAK,YAAY,GACb,KAAK,EAAE,GACP;IACE,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;CAC9B,CAAC;AAMN,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,UAE5C;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,EAAE,KAAK,EAAE,GAAG,OAIxD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,WAAW,EAAE,OAAO,WAS9C;AAED,eAAO,MAAM,sBAAsB,KAAK,CAAC;AACzC,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAC3C,eAAO,MAAM,mBAAmB,WAAW,CAAC;AAE5C,eAAO,MAAM,uBAAuB,iBAAiB,CAAC;AAEtD,eAAO,MAAM,uBAAuB,UAC3B,KAAK,GAAG,IAAI,iBACJ,YAAY,YAe5B,CAAC;AAEF,eAAO,MAAM,4BAA4B,eAC3B,cAAc,GAAG,IAAI,sBACb,MAAM,EAAE,+BAO7B,CAAC"}
+{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../src/utils/configs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAM9D,MAAM,WAAW,OAAO;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,KAAK,YAAY,GACb,KAAK,EAAE,GACP;IACE,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;CAC9B,CAAC;AAMN,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,UAE5C;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,EAAE,KAAK,EAAE,GAAG,OAIxD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,WAAW,EAAE,OAAO,WAS9C;AAED,eAAO,MAAM,sBAAsB,KAAK,CAAC;AACzC,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAC3C,eAAO,MAAM,mBAAmB,WAAW,CAAC;AAE5C,eAAO,MAAM,uBAAuB,iBAAiB,CAAC;AAEtD,eAAO,MAAM,uBAAuB,UAC3B,KAAK,GAAG,IAAI,iBACJ,YAAY,YAe5B,CAAC;AAEF,eAAO,MAAM,4BAA4B,eAC3B,cAAc,GAAG,IAAI,sBACb,MAAM,EAAE,+BAO7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,aAAc,aAAa,YAEzD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.23.1-next.11",
+  "version": "0.23.1-next.13",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,7 +25,7 @@
     "@rango-dev/queue-manager-core": "^0.26.0",
     "@rango-dev/queue-manager-rango-preset": "^0.28.1-next.3",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/ui": "^0.29.1-next.8",
+    "@rango-dev/ui": "^0.29.1-next.10",
     "@rango-dev/wallets-react": "^0.14.1-next.1",
     "@rango-dev/wallets-shared": "^0.28.1-next.1",
     "bignumber.js": "^9.1.1",
@@ -48,4 +48,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/HeaderButtons/HeaderButtons.styles.ts

@@ -5,6 +5,12 @@ export const HeaderButton = styled(IconButton, {
   position: 'relative',
   padding: '0',
   overflow: 'unset',
+  '&:hover': {
+    backgroundColor: '$info100',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral',
+    },
+  },
 });
 
 export const ConnectedIcon = styled('div', {
@@ -31,7 +37,6 @@ export const SuffixContainer = styled('div', {
 
 export const NotificationsBadgeContainer = styled('div', {
   position: 'absolute',
-  backgroundColor: '$secondary500',
   width: '14px',
   height: '14px',
   display: 'flex',
@@ -40,6 +45,16 @@ export const NotificationsBadgeContainer = styled('div', {
   borderRadius: '7px',
   top: '$0',
   right: '$0',
+  variants: {
+    isSever: {
+      true: {
+        backgroundColor: '$error500',
+      },
+      false: {
+        backgroundColor: '$secondary500',
+      },
+    },
+  },
 });
 
 export const ProgressIcon = styled('div', {
@@ -53,3 +68,11 @@ export const ProgressIcon = styled('div', {
     },
   },
 });
+
+export const InProgressTransactionBadgeContainer = styled('div', {
+  position: 'absolute',
+  right: '$4',
+  top: '$4',
+  backgroundColor: '$background',
+  borderRadius: '100%',
+});

package/src/components/HeaderButtons/HeaderButtons.tsx

@@ -16,6 +16,7 @@ import { isFeatureHidden } from '../../utils/settings';
 import { NotificationContent } from '../NotificationContent';
 
 import { HeaderButton } from './HeaderButtons.styles';
+import InProgressTransactionBadge from './InProgressTransactionBadge';
 import { RefreshButton } from './RefreshButton';
 import { UnreadNotificationsBadge } from './UnreadNotificationsBadge';
 
@@ -83,6 +84,7 @@ export function HeaderButtons(props: HeaderButtonsPropTypes) {
           content={i18n.t('Transactions History')}>
           <HeaderButton size="small" variant="ghost" onClick={onClickHistory}>
             <TransactionIcon size={18} color="black" />
+            <InProgressTransactionBadge />
           </HeaderButton>
         </Tooltip>
       )}

package/src/components/HeaderButtons/InProgressTransactionBadge.tsx

@@ -0,0 +1,26 @@
+import type { PendingSwap } from 'rango-types';
+
+import { useManager } from '@rango-dev/queue-manager-react';
+import { InProgressIcon } from '@rango-dev/ui';
+import React from 'react';
+
+import { getPendingSwaps } from '../../utils/queue';
+
+import { InProgressTransactionBadgeContainer } from './HeaderButtons.styles';
+
+const InProgressTransactionBadge = () => {
+  const { manager } = useManager();
+  const list: PendingSwap[] = getPendingSwaps(manager).map(({ swap }) => swap);
+
+  if (!list.find((swap) => swap.status === 'running')) {
+    return null;
+  }
+
+  return (
+    <InProgressTransactionBadgeContainer>
+      <InProgressIcon color="info" size={6} />
+    </InProgressTransactionBadgeContainer>
+  );
+};
+
+export default InProgressTransactionBadge;

package/src/components/HeaderButtons/UnreadNotificationsBadge.tsx

@@ -1,3 +1,4 @@
+import { EventSeverity } from '@rango-dev/queue-manager-rango-preset';
 import { Typography } from '@rango-dev/ui';
 import React from 'react';
 
@@ -8,10 +9,17 @@ import { NotificationsBadgeContainer } from './HeaderButtons.styles';
 export function UnreadNotificationsBadge() {
   const { getUnreadNotifications } = useNotificationStore();
 
-  const notificationsCount = getUnreadNotifications().length;
+  const notificationsList = getUnreadNotifications();
+
+  const notificationsCount = notificationsList.length;
+
+  const hasSeverNotification = !!notificationsList.find(
+    (notificationItem) =>
+      notificationItem.event.messageSeverity === EventSeverity.WARNING
+  );
 
   return notificationsCount ? (
-    <NotificationsBadgeContainer>
+    <NotificationsBadgeContainer isSever={hasSeverNotification}>
       <Typography variant="body" size="xsmall" color="$background">
         {notificationsCount}
       </Typography>

package/src/components/NoResult/NoResult.helpers.ts

@@ -9,6 +9,9 @@ import {
   type QuoteRequestFailed,
 } from '../../types';
 
+const SMALL_NO_ROUTE__ICON_SIZE = 24;
+const LARGE_NO_ROUTE_ICON_SIZE = 60;
+
 export function makeInfo(
   error: NoResultError | QuoteRequestFailed | null,
   disabledLiquiditySources: string[],
@@ -57,3 +60,13 @@ export function makeInfo(
     description: errorMessages().noResultError.description,
   };
 }
+
+export enum NoRouteIconSize {
+  small = SMALL_NO_ROUTE__ICON_SIZE,
+  large = LARGE_NO_ROUTE_ICON_SIZE,
+}
+
+export enum NoRouteTitleSize {
+  small = 'small',
+  large = 'medium',
+}

package/src/components/NoResult/NoResult.styles.ts

@@ -6,8 +6,26 @@ export const Container = styled('div', {
   alignItems: 'center',
 });
 
+export const ErrorDescription = styled('div', {
+  variants: {
+    size: {
+      small: {},
+      large: {
+        maxWidth: '316px',
+      },
+    },
+  },
+});
+
 export const Footer = styled('div', {
-  width: '100%',
+  variants: {
+    size: {
+      small: {
+        width: '100%',
+      },
+      large: {},
+    },
+  },
 });
 
 export const PrefixIcon = styled('div', {

package/src/components/NoResult/NoResult.tsx

@@ -13,16 +13,24 @@ import React from 'react';
 import { errorMessages } from '../../constants/errors';
 import { useAppStore } from '../../store/AppStore';
 
-import { makeInfo } from './NoResult.helpers';
-import { Container, Footer, PrefixIcon } from './NoResult.styles';
+import {
+  makeInfo,
+  NoRouteIconSize,
+  NoRouteTitleSize,
+} from './NoResult.helpers';
+import {
+  Container,
+  ErrorDescription,
+  Footer,
+  PrefixIcon,
+} from './NoResult.styles';
 
 export function NoResult(props: PropTypes) {
-  const { fetch, error } = props;
+  const { fetch, error, size = 'small' } = props;
   const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
   const toggleAllLiquiditySources = useAppStore().toggleAllLiquiditySources;
 
   const swappers = useAppStore().swappers();
-
   const info = makeInfo(
     error,
     disabledLiquiditySources,
@@ -32,27 +40,30 @@ export function NoResult(props: PropTypes) {
 
   return (
     <Container>
-      <NoRouteIcon size={24} color="gray" />
+      <NoRouteIcon size={NoRouteIconSize[size]} color="gray" />
       <Divider size={4} />
-      <Typography variant="title" size="small">
+      <Typography variant="title" size={NoRouteTitleSize[size]}>
         {errorMessages().noResultError.title}
       </Typography>
+      {size === 'large' && <Divider size={4} />}
       {!!info.description && (
-        <Typography
-          variant="body"
-          size="small"
-          align="center"
-          color="neutral700">
-          {info.description}
-        </Typography>
+        <ErrorDescription size={size}>
+          <Typography
+            variant="body"
+            size="small"
+            align="center"
+            color="neutral700">
+            {info.description}
+          </Typography>
+        </ErrorDescription>
       )}
-      <Divider size={4} />
+      <Divider size={size === 'large' ? '24' : '4'} />
       {!!info.alert && (
-        <Footer>
+        <Footer size={size}>
           <Alert
             type={info.alert.type}
             title={info.alert.text}
-            titleAlign={'center'}
+            titleAlign={'left'}
             action={
               info.alert.action && (
                 <Button

package/src/components/NoResult/NoResult.types.ts

@@ -3,6 +3,7 @@ import type { NoResultError, QuoteRequestFailed } from '../../types';
 export interface PropTypes {
   fetch: () => void;
   error: NoResultError | QuoteRequestFailed | null;
+  size?: 'small' | 'large';
 }
 
 type AlertAction = {

package/src/components/NotificationContent/NotificationContent.styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '@rango-dev/ui';
+import { darkTheme, ListItemButton, styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   padding: '$10',
@@ -17,6 +17,19 @@ export const List = styled('ul', {
   },
 });
 
+export const ListItem = styled(ListItemButton, {
+  variants: {
+    actionRequired: {
+      true: {
+        backgroundColor: '$error300',
+        [`.${darkTheme} &`]: {
+          backgroundColor: '$error600',
+        },
+      },
+    },
+  },
+});
+
 export const Images = styled('div', {
   display: 'flex',
   padding: 0,

package/src/components/NotificationContent/NotificationContent.tsx

@@ -5,7 +5,7 @@ import { EventSeverity } from '@rango-dev/queue-manager-rango-preset';
 import {
   ChainToken,
   ChevronRightIcon,
-  ListItemButton,
+  Divider,
   Typography,
 } from '@rango-dev/ui';
 import React from 'react';
@@ -16,7 +16,12 @@ import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { areTokensEqual } from '../../utils/wallets';
 
-import { Container, Images, List } from './NotificationContent.styles';
+import {
+  Container,
+  Images,
+  List,
+  ListItem,
+} from './NotificationContent.styles';
 import { NotificationNotFound } from './NotificationNotFound';
 
 const MAX_NOTIFICATIONS_DISPLAYED = 4;
@@ -41,7 +46,7 @@ export function NotificationContent() {
     <Container>
       {sortedNotification.length ? (
         <List>
-          {sortedNotification.map((notificationItem) => {
+          {sortedNotification.map((notificationItem, index) => {
             const { route, requestId, event } = notificationItem;
             const fromToken = tokens.find((tokenItem) =>
               areTokensEqual(tokenItem, route.from)
@@ -60,42 +65,47 @@ export function NotificationContent() {
             );
 
             return (
-              <ListItemButton
-                key={requestId}
-                onClick={() => handleOnClick(requestId)}
-                title={
-                  <Typography
-                    variant="body"
-                    size="small"
-                    color={
-                      event.messageSeverity === EventSeverity.WARNING
-                        ? '$foreground'
-                        : '$neutral700'
-                    }>
-                    {i18n.t(event.message)}
-                  </Typography>
-                }
-                id={requestId}
-                start={
-                  <Images>
-                    <div className="from-chain-token">
-                      <ChainToken
-                        tokenImage={fromToken ? fromToken.image : ''}
-                        chainImage={fromBlockchain ? fromBlockchain.logo : ''}
-                        size="small"
-                      />
-                    </div>
-                    <div className="to-chain-token">
-                      <ChainToken
-                        tokenImage={toToken ? toToken.image : ''}
-                        chainImage={toBlockchain ? toBlockchain.logo : ''}
-                        size="small"
-                      />
-                    </div>
-                  </Images>
-                }
-                end={<ChevronRightIcon size={12} color="gray" />}
-              />
+              <React.Fragment key={requestId}>
+                {index > 0 && <Divider size={4} />}
+                <ListItem
+                  onClick={() => handleOnClick(requestId)}
+                  actionRequired={
+                    event.messageSeverity === EventSeverity.WARNING
+                  }
+                  title={
+                    <Typography
+                      variant="body"
+                      size="small"
+                      color={
+                        event.messageSeverity === EventSeverity.WARNING
+                          ? '$foreground'
+                          : '$neutral700'
+                      }>
+                      {i18n.t(event.message)}
+                    </Typography>
+                  }
+                  id={requestId}
+                  start={
+                    <Images>
+                      <div className="from-chain-token">
+                        <ChainToken
+                          tokenImage={fromToken ? fromToken.image : ''}
+                          chainImage={fromBlockchain ? fromBlockchain.logo : ''}
+                          size="small"
+                        />
+                      </div>
+                      <div className="to-chain-token">
+                        <ChainToken
+                          tokenImage={toToken ? toToken.image : ''}
+                          chainImage={toBlockchain ? toBlockchain.logo : ''}
+                          size="small"
+                        />
+                      </div>
+                    </Images>
+                  }
+                  end={<ChevronRightIcon size={12} color="gray" />}
+                />
+              </React.Fragment>
             );
           })}
         </List>