@rango-dev/widget-embedded 0.28.2 → 0.28.3-next.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.28.2",
+  "version": "0.28.3-next.1",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -24,14 +24,15 @@
   "dependencies": {
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
-    "@rango-dev/logging-core": "^0.3.0",
-    "@rango-dev/provider-all": "^0.33.2",
+    "@rango-dev/logging-core": "^0.3.1-next.1",
+    "@rango-dev/provider-all": "^0.33.3-next.0",
     "@rango-dev/queue-manager-core": "^0.26.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.33.2",
+    "@rango-dev/queue-manager-rango-preset": "^0.33.3-next.0",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/ui": "^0.34.0",
-    "@rango-dev/wallets-react": "^0.19.0",
-    "@rango-dev/wallets-shared": "^0.33.0",
+    "@rango-dev/signer-solana": "^0.28.1-next.2",
+    "@rango-dev/ui": "^0.34.1-next.3",
+    "@rango-dev/wallets-react": "^0.19.1-next.1",
+    "@rango-dev/wallets-shared": "^0.33.1-next.1",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
@@ -52,4 +53,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/BlockchainList/BlockchainList.helpers.ts

@@ -1,35 +1,16 @@
-import { BlockchainCategories } from '@rango-dev/ui';
-import { type BlockchainMeta, TransactionType } from 'rango-sdk';
+import { type BlockchainMeta } from 'rango-sdk';
 
-import { containsText } from '../../utils/common';
-
-export const filterByType = (
-  blockchain: BlockchainMeta,
-  type: string
-): boolean => {
-  switch (type) {
-    case BlockchainCategories.ALL:
-      return true;
-    case BlockchainCategories.UTXO:
-      return blockchain.type === TransactionType.TRANSFER;
-    case BlockchainCategories.OTHER:
-      return (
-        blockchain.type !== TransactionType.TRANSFER &&
-        blockchain.type !== TransactionType.COSMOS &&
-        blockchain.type !== TransactionType.EVM
-      );
-    default:
-      return blockchain.type === type;
-  }
-};
+import { containsText, isBlockchainTypeInCategory } from '../../utils/common';
 
 export const filterBlockchains = (
   list: BlockchainMeta[],
   searchedFor: string,
-  blockchainType: string
+  blockchainCategory: string
 ) =>
   list
-    .filter((blockchain) => filterByType(blockchain, blockchainType))
+    .filter((blockchain) =>
+      isBlockchainTypeInCategory(blockchain.type, blockchainCategory)
+    )
     .filter(
       (blockchain) =>
         containsText(blockchain.name, searchedFor) ||

package/src/components/ConfirmWalletsModal/ConfirmWallets.styles.ts

@@ -34,7 +34,7 @@ export const WalletButton = styled('button', {
   position: 'relative',
 
   '&:hover': {
-    $$color: '$colors$info100',
+    $$color: '$colors$secondary100',
     [`.${darkTheme} &`]: {
       $$color: '$colors$neutral100',
     },
@@ -42,7 +42,7 @@ export const WalletButton = styled('button', {
   },
 
   '&:focus-visible': {
-    $$color: '$colors$info100',
+    $$color: '$colors$secondary100',
     [`.${darkTheme} &`]: {
       $$color: '$colors$info700',
     },
@@ -138,14 +138,14 @@ export const CustomDestinationButton = styled('div', {
   borderBottomRightRadius: '0',
   borderBottomLeftRadius: '0',
   '&:hover': {
-    $$color: '$colors$info100',
+    $$color: '$colors$secondary100',
     [`.${darkTheme} &`]: {
       $$color: '$colors$neutral100',
     },
     backgroundColor: '$$color',
   },
   '&:focus-visible': {
-    $$background: '$colors$info100',
+    $$background: '$colors$secondary100',
     [`.${darkTheme} &`]: {
       $$background: '$colors$info700',
     },

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

@@ -6,7 +6,7 @@ export const HeaderButton = styled(IconButton, {
   padding: '0',
   overflow: 'unset',
   '&:hover': {
-    backgroundColor: '$info100',
+    backgroundColor: '$secondary100',
     [`.${darkTheme} &`]: {
       backgroundColor: '$neutral',
     },

package/src/components/HeaderButtons/HeaderButtons.tsx

@@ -17,8 +17,8 @@ import { NotificationContent } from '../NotificationContent';
 
 import { HeaderButton } from './HeaderButtons.styles';
 import InProgressTransactionBadge from './InProgressTransactionBadge';
+import { NotificationsBadge } from './NotificationsBadge';
 import { RefreshButton } from './RefreshButton';
-import { UnreadNotificationsBadge } from './UnreadNotificationsBadge';
 
 export function HeaderButtons(props: HeaderButtonsPropTypes) {
   const {
@@ -52,6 +52,7 @@ export function HeaderButtons(props: HeaderButtonsPropTypes) {
         <Popover
           align="end"
           alignOffset={-88}
+          sideOffset={15}
           collisionPadding={{ right: 20, left: 20 }}
           container={getContainer()}
           content={<NotificationContent />}>
@@ -62,7 +63,7 @@ export function HeaderButtons(props: HeaderButtonsPropTypes) {
               content={i18n.t('Notifications')}>
               <HeaderButton size="small" variant="ghost">
                 <NotificationsIcon size={18} color="black" />
-                <UnreadNotificationsBadge />
+                <NotificationsBadge />
               </HeaderButton>
             </Tooltip>
           </div>

package/src/components/HeaderButtons/{UnreadNotificationsBadge.tsx → NotificationsBadge.tsx}

@@ -6,10 +6,10 @@ import { useNotificationStore } from '../../store/notification';
 
 import { NotificationsBadgeContainer } from './HeaderButtons.styles';
 
-export function UnreadNotificationsBadge() {
-  const { getUnreadNotifications } = useNotificationStore();
+export function NotificationsBadge() {
+  const { getNotifications } = useNotificationStore();
 
-  const notificationsList = getUnreadNotifications();
+  const notificationsList = getNotifications();
 
   const notificationsCount = notificationsList.length;
 

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

@@ -1,4 +1,4 @@
-import { darkTheme, ListItemButton, styled } from '@rango-dev/ui';
+import { Button, darkTheme, ListItemButton, styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   padding: '$10',
@@ -7,6 +7,17 @@ export const Container = styled('div', {
   minHeight: '150px',
 });
 
+export const Header = styled('div', {
+  padding: '0 $10',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const ClearAllButton = styled(Button, {
+  padding: '$5 !important',
+});
+
 export const List = styled('ul', {
   padding: 0,
   margin: 0,
@@ -32,7 +43,7 @@ export const ListItem = styled(ListItemButton, {
 
 export const Images = styled('div', {
   display: 'flex',
-  padding: 0,
+  padding: '0 0 0 $5',
   alignItems: 'center',
   alignSelf: 'stretch',
 });
@@ -46,3 +57,7 @@ export const NotFoundContainer = styled('div', {
   width: '100%',
   height: '150px',
 });
+
+export const IconContainer = styled('span', {
+  paddingRight: '$8',
+});

package/src/components/NotificationContent/NotificationContent.tsx

@@ -17,7 +17,10 @@ import { useNotificationStore } from '../../store/notification';
 import { areTokensEqual } from '../../utils/wallets';
 
 import {
+  ClearAllButton,
   Container,
+  Header,
+  IconContainer,
   Images,
   List,
   ListItem,
@@ -29,9 +32,9 @@ const MAX_NOTIFICATIONS_DISPLAYED = 4;
 export function NotificationContent() {
   const navigate = useNavigate();
 
-  const { getUnreadNotifications } = useNotificationStore();
+  const { getNotifications, clearNotifications } = useNotificationStore();
 
-  const notifications: Notification[] = getUnreadNotifications();
+  const notifications: Notification[] = getNotifications();
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
   const sortedNotification = notifications
@@ -44,6 +47,24 @@ export function NotificationContent() {
 
   return (
     <Container>
+      {sortedNotification.length > 0 && (
+        <>
+          <Header>
+            <Typography variant="label" size="medium">
+              {i18n.t('Notifications')}
+            </Typography>
+            <ClearAllButton
+              variant="ghost"
+              size="xsmall"
+              onClick={clearNotifications}>
+              <Typography variant="body" size="xsmall">
+                {i18n.t('Clear all')}
+              </Typography>
+            </ClearAllButton>
+          </Header>
+          <Divider direction="vertical" size={4} />
+        </>
+      )}
       {sortedNotification.length ? (
         <List>
           {sortedNotification.map((notificationItem, index) => {
@@ -103,7 +124,11 @@ export function NotificationContent() {
                       </div>
                     </Images>
                   }
-                  end={<ChevronRightIcon size={12} color="gray" />}
+                  end={
+                    <IconContainer>
+                      <ChevronRightIcon size={12} color="gray" />
+                    </IconContainer>
+                  }
                 />
               </React.Fragment>
             );

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

@@ -147,7 +147,7 @@ export const SummaryContainer = styled('div', {
       listItem: false,
       selected: true,
       css: {
-        $$color: '$colors$info100',
+        $$color: '$colors$secondary100',
         [`.${darkTheme} &`]: {
           $$color: '$colors$secondary600',
         },

package/src/components/Slippage/Slippage.tsx

@@ -67,7 +67,7 @@ export function Slippage() {
           step="0.01"
           fullWidth
           variant="contained"
-          value={customSlippage || ''}
+          value={customSlippage === null ? '' : customSlippage}
           color="dark"
           onChange={(event) => {
             const value = event.target.value;

package/src/components/SwapDetails/SwapDetails.tsx

@@ -96,21 +96,20 @@ export function SwapDetails(props: SwapDetailsProps) {
     setModalState(null);
   };
 
-  const getUnreadNotifications =
-    useNotificationStore.use.getUnreadNotifications();
-  const setAsRead = useNotificationStore.use.setAsRead();
-  const unreadNotifications = getUnreadNotifications();
+  const getNotifications = useNotificationStore.use.getNotifications();
+  const removeNotification = useNotificationStore.use.removeNotification();
+  const notifications = getNotifications();
   const currentStep = getCurrentStep(swap);
   const currentStepNetworkStatus = currentStep?.networkStatus;
 
   useEffect(() => {
-    const existNotification = unreadNotifications.find(
+    const existNotification = notifications.find(
       (n) => n.requestId === swap.requestId
     );
     if (existNotification) {
       if (swap.status === 'success' || swap.status === 'failed') {
         setShowCompletedModal(swap.status);
-        setAsRead(swap.requestId);
+        removeNotification(swap.requestId);
       } else if (showCompletedModal) {
         setShowCompletedModal(null);
       }

package/src/constants/fonts.ts

@@ -1 +1,85 @@
 export const DEFAULT_FONT_FAMILY = 'Roboto';
+
+export const SUPPORTED_FONTS = [
+  {
+    name: 'Roboto',
+    value: 'Roboto',
+    url: '',
+  },
+  {
+    name: 'Times New Roman',
+    value: 'Times New Roman',
+    url: 'https://fonts.cdnfonts.com/css/times-new-roman',
+  },
+  {
+    name: 'Arial',
+    value: 'Arial',
+    url: '',
+  },
+  {
+    name: 'Open Sans',
+    value: 'Open Sans',
+    url: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap',
+  },
+  {
+    name: 'Noto Sans',
+    value: 'Noto Sans',
+    url: 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap',
+  },
+  {
+    name: 'Montserrat',
+    value: 'Montserrat',
+    url: 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap',
+  },
+  {
+    name: 'Poppins',
+    value: 'Poppins',
+    url: 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap',
+  },
+  {
+    name: 'Roboto Condensed',
+    value: 'Roboto Condensed',
+    url: 'https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap',
+  },
+
+  {
+    name: 'Roboto Mono',
+    value: 'Roboto Mono',
+    url: 'https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap',
+  },
+  {
+    name: 'Oswald',
+    value: 'Oswald',
+    url: 'https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap',
+  },
+  {
+    name: 'Raleway',
+    value: 'Raleway',
+    url: 'https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap',
+  },
+  {
+    name: 'Sedan',
+    value: 'Sedan',
+    url: 'https://fonts.googleapis.com/css2?family=Sedan:ital@0;1&display=swap',
+  },
+  {
+    name: 'Inter',
+    value: 'Inter',
+    url: 'https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap',
+  },
+  {
+    name: 'Rubik',
+    value: 'Rubik',
+    url: 'https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap',
+  },
+  {
+    name: 'Lora',
+    value: 'Lora',
+    url: 'https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap',
+  },
+  {
+    name: 'Barlow Condensed',
+    value: 'Barlow Condensed',
+    url: 'https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap',
+  },
+];

package/src/containers/WidgetInfo/WidgetInfo.tsx

@@ -31,7 +31,7 @@ export function WidgetInfo(props: React.PropsWithChildren) {
   const swappers = useAppStore().swappers();
   const loadingStatus = useAppStore().fetchStatus;
   const resetLanguage = useLanguage().resetLanguage;
-  const notifications = useNotificationStore().getUnreadNotifications();
+  const notifications = useNotificationStore().getNotifications();
 
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   const value: WidgetInfoContextInterface = {

package/src/containers/WidgetProvider/WidgetProvider.tsx

@@ -1,9 +1,11 @@
 import type { PropTypes } from './WidgetProvider.types';
 import type { PropsWithChildren } from 'react';
 
-import React, { useMemo } from 'react';
+import { setSolanaSignerConfig } from '@rango-dev/signer-solana';
+import React, { useEffect } from 'react';
 
 import { DEFAULT_BASE_URL, RANGO_PUBLIC_API_KEY } from '../../constants';
+import useFontLoader from '../../hooks/useFontLoader';
 import QueueManager from '../../QueueManager';
 import { initConfig } from '../../utils/configs';
 import { WidgetWallets } from '../Wallets';
@@ -12,13 +14,29 @@ import { WidgetInfo } from '../WidgetInfo';
 export function WidgetProvider(props: PropsWithChildren<PropTypes>) {
   const { onUpdateState, config } = props;
 
-  useMemo(() => {
+  const fontFamily = props.config?.theme?.fontFamily;
+
+  const { handleLoadCustomFont } = useFontLoader();
+
+  useEffect(() => {
+    if (fontFamily) {
+      handleLoadCustomFont(fontFamily);
+    }
+  }, [fontFamily]);
+
+  useEffect(() => {
     initConfig({
       API_KEY: config?.apiKey || RANGO_PUBLIC_API_KEY,
       BASE_URL: config?.apiUrl || DEFAULT_BASE_URL,
     });
   }, [config.apiKey, config.apiUrl]);
 
+  useEffect(() => {
+    if (props.config?.signers?.customSolanaRPC) {
+      setSolanaSignerConfig('customRPC', props.config.signers.customSolanaRPC);
+    }
+  }, [props.config?.signers?.customSolanaRPC]);
+
   return (
     <WidgetWallets config={config} onUpdateState={onUpdateState}>
       <QueueManager apiKey={config.apiKey}>

package/src/globalStyles.ts

@@ -2,8 +2,6 @@ import { globalCss } from '@rango-dev/ui';
 
 export const globalFont = () =>
   globalCss({
-    '@import': [
+    '@import':
       "url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')",
-      "url('https://fonts.cdnfonts.com/css/times-new-roman')",
-    ],
   })();

package/src/hooks/useBootstrap/useBootstrap.ts

@@ -14,11 +14,13 @@ import { tabManager } from '../../store/ui';
 import { useFetchApiConfig } from '../useFetchApiConfig';
 import { useForceAutoConnect } from '../useForceAutoConnect';
 import { useSubscribeToWidgetEvents } from '../useSubscribeToWidgetEvents';
+import { useSyncNotifications } from '../useSyncNotifications';
 
 export function useBootstrap() {
-  globalFont();
   useForceAutoConnect();
+  globalFont();
   useSubscribeToWidgetEvents();
+  useSyncNotifications();
   const blockchains = useAppStore().blockchains();
   const { canSwitchNetworkTo } = useWallets();
   const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =

package/src/hooks/useFontLoader.ts

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+import { getFontUrlByName } from '../utils/common';
+/*
+ *TODO:
+ * Loading fonts from JS has a downside and it is the bundle needs to be downloaded and executed first which means after sometime font will be added to <head /> and it causes a layoutshift each time.
+ * We've added Roboto into <head /> since it's the default font. the downside here is it will load roboto anyway even dApp has set fontFamily other than Roboto which causes an unneccerary downloand (Roboto).
+ * We decided to go with the second one and it can be solved in future by split these types of configs into a separate js file and let it to be loaded with a more priority than the main bundle. it should be also cached which imrpove user experience after first load.
+ */
+const useFontLoader = () => {
+  const [fontLink, setFontLink] = useState<HTMLLinkElement | null>(null);
+
+  const loadFont = (fontUrl: string) => {
+    const link = document.createElement('link');
+    link.href = fontUrl;
+    link.rel = 'stylesheet';
+    document.head.appendChild(link);
+    return link;
+  };
+
+  const unloadFont = () => {
+    if (fontLink) {
+      document.head.removeChild(fontLink);
+      setFontLink(null);
+    }
+  };
+
+  const handleLoadCustomFont = (fontName: string) => {
+    unloadFont(); // Remove previous font
+    const fontUrl = getFontUrlByName(fontName);
+    if (fontUrl) {
+      const newFontLink = loadFont(fontUrl);
+      setFontLink(newFontLink);
+    }
+  };
+
+  return { handleLoadCustomFont };
+};
+
+export default useFontLoader;

package/src/hooks/useSyncNotifications/index.ts

@@ -0,0 +1 @@
+export { useSyncNotifications } from './useSyncNotifications';

package/src/hooks/useSyncNotifications/useSyncNotifications.ts

@@ -0,0 +1,25 @@
+import { useManager } from '@rango-dev/queue-manager-react';
+import { useEffect } from 'react';
+
+import { useNotificationStore } from '../../store/notification';
+import { getPendingSwaps } from '../../utils/queue';
+
+export function useSyncNotifications() {
+  const { isSynced, syncNotifications } = useNotificationStore();
+  const { manager, state } = useManager();
+
+  useEffect(() => {
+    const shouldSyncNotifications =
+      useNotificationStore.persist.hasHydrated() &&
+      state.loadedFromPersistor &&
+      !isSynced;
+
+    if (shouldSyncNotifications) {
+      syncNotifications(getPendingSwaps(manager));
+    }
+  }, [
+    useNotificationStore.persist.hasHydrated(),
+    state.loadedFromPersistor,
+    isSynced,
+  ]);
+}

package/src/hooks/useTheme.ts

@@ -6,10 +6,10 @@ import {
 } from '@rango-dev/ui';
 import { useEffect, useState } from 'react';
 
+import { DEFAULT_FONT_FAMILY } from '../constants/fonts';
 import { useAppStore } from '../store/AppStore';
 import { type WidgetTheme } from '../types';
 import {
-  DEFAULT_FONT_FAMILY,
   DEFAULT_PRIMARY_RADIUS,
   DEFAULT_SECONDARY_RADIUS,
 } from '../utils/configs';

package/src/index.ts

@@ -59,6 +59,7 @@ import { Networks, WalletTypes } from '@rango-dev/wallets-shared';
 import { PendingSwapNetworkStatus } from 'rango-types';
 
 import { WIDGET_UI_ID as UI_ID } from './constants';
+import { SUPPORTED_FONTS } from './constants/fonts';
 import { WidgetWallets } from './containers/Wallets';
 import { Widget } from './containers/Widget';
 import { useWidget } from './containers/WidgetInfo';
@@ -113,6 +114,7 @@ export {
   StepExecutionEventStatus,
   StepExecutionBlockedEventStatus,
   UI_ID,
+  SUPPORTED_FONTS,
 };
 
 // Internal type exports for Rango

package/src/pages/SelectBlockchainPage.tsx

@@ -1,7 +1,7 @@
 import { i18n } from '@lingui/core';
 import {
   Divider,
-  getCountCategories,
+  getCategoriesCount,
   SelectableCategoryList,
 } from '@rango-dev/ui';
 import React, { useState } from 'react';
@@ -30,9 +30,9 @@ export function SelectBlockchainPage(props: PropTypes) {
     type,
   });
 
-  const countActiveCategories = getCountCategories(blockchains);
+  const activeCategoriesCount = getCategoriesCount(blockchains);
 
-  const showCategory = countActiveCategories !== 1;
+  const showCategory = activeCategoriesCount !== 1;
 
   return (
     <Layout