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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.23.1-next.11",
+  "version": "0.23.1-next.12",
   "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.9",
     "@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/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>