@rango-dev/widget-embedded 0.28.1-next.0 → 0.28.1-next.2

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;AA8BxC,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBAqG1B"}
+{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAkCxC,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBAyH1B"}

package/dist/types/config.d.ts

@@ -25,7 +25,7 @@ export type WidgetColors = {
  * radius, width, and height.
  * @property {'auto' | 'light' | 'dark'} mode - The mode property is used to specify the default theme for
  * the widget.
- * @property {string} fontFamily - The font family to be used in the widget.
+ * @property {string} fontFamily - The font family to be used in the widget. If you want to do this, include the font of your choice in your HTML file.
  * @property {{ light?: WidgetColors; dark?: WidgetColors }} colors - The `colors` property is a sub-property of the `WidgetTheme` object that
  * defines the color scheme for the widget. It is of type `Colors`, which is likely another object that
  * contains specific color values for various parts of the widget (e.g. background color, text color,

package/dist/utils/common.d.ts

@@ -1,4 +1,5 @@
 import type { Token } from 'rango-sdk';
+import { TransactionType } from 'rango-sdk';
 export declare function removeDuplicateFrom<T>(array: T[]): T[];
 export declare function areEqual(array1: (number | string)[], array2: (number | string)[]): boolean;
 export declare function debounce(fn: Function, time: number): (...args: any) => void;
@@ -8,4 +9,6 @@ export declare function startWithText(text: string, searchText: string): boolean
 export declare const getContainer: () => HTMLElement;
 export declare const getExpanded: () => HTMLElement;
 export declare function compareWithSearchFor(tokenA: Token, tokenB: Token, searchFor?: string): number;
+export declare const isBlockchainTypeInCategory: (blockchainType: TransactionType, category: string) => boolean;
+export declare const getFontUrlByName: (fontName: string) => string | undefined;
 //# sourceMappingURL=common.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAWvC,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAEtD;AAED,wBAAgB,QAAQ,CACtB,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAC3B,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,WAK5B;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,aAGvB,GAAG,UAS9B;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAGtE;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAEnE;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAEvE;AAED,eAAO,MAAM,YAAY,mBACyC,CAAC;AAEnE,eAAO,MAAM,WAAW,mBAC8C,CAAC;AAsDvE,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,KAAK,EACb,MAAM,EAAE,KAAK,EACb,SAAS,CAAC,EAAE,MAAM,GACjB,MAAM,CA0GR"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAGvC,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAY5C,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAEtD;AAED,wBAAgB,QAAQ,CACtB,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAC3B,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,WAK5B;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,aAGvB,GAAG,UAS9B;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAGtE;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAEnE;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAEvE;AAED,eAAO,MAAM,YAAY,mBACyC,CAAC;AAEnE,eAAO,MAAM,WAAW,mBAC8C,CAAC;AAsDvE,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,KAAK,EACb,MAAM,EAAE,KAAK,EACb,SAAS,CAAC,EAAE,MAAM,GACjB,MAAM,CA0GR;AAED,eAAO,MAAM,0BAA0B,mBACrB,eAAe,YACrB,MAAM,KACf,OAeF,CAAC;AAEF,eAAO,MAAM,gBAAgB,aAAc,MAAM,uBAGhD,CAAC"}

package/dist/utils/configs.d.ts

@@ -15,7 +15,6 @@ export declare function setConfig(name: keyof Configs, value: any): any;
 export declare function initConfig(nextConfigs: Configs): Configs;
 export declare const DEFAULT_PRIMARY_RADIUS = 20;
 export declare const DEFAULT_SECONDARY_RADIUS = 25;
-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;

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,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,mBAAmB,kBACf,OAAO,sBACF,OAAO,YACjB,aAAa,YAMxB,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;AAE3C,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,mBAAmB,kBACf,OAAO,sBACF,OAAO,YACjB,aAAa,YAMxB,CAAC"}

package/dist/utils/wallets.d.ts

@@ -33,4 +33,6 @@ export declare function createTokenHash(token: Asset): TokenHash;
 export declare function makeTokensBalance(connectedWallets: ConnectedWallet[]): TokensBalance;
 export declare const isFetchingBalance: (connectedWallets: ConnectedWallet[], blockchain: string) => boolean;
 export declare function hashWalletsState(walletsInfo: ModalWalletInfo[]): string;
+export declare function filterBlockchainsByWalletTypes(wallets: ModalWalletInfo[], blockchains: BlockchainMeta[]): BlockchainMeta[];
+export declare function filterWalletsByCategory(wallets: WalletInfoWithNamespaces[], category: string): WalletInfoWithNamespaces[];
 //# sourceMappingURL=wallets.d.ts.map

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.28.1-next.0",
+  "version": "0.28.1-next.2",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -29,7 +29,7 @@
     "@rango-dev/queue-manager-core": "^0.26.0",
     "@rango-dev/queue-manager-rango-preset": "^0.33.0",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/ui": "^0.34.1-next.0",
+    "@rango-dev/ui": "^0.34.1-next.1",
     "@rango-dev/wallets-react": "^0.19.0",
     "@rango-dev/wallets-shared": "^0.33.0",
     "bignumber.js": "^9.1.1",
@@ -52,4 +52,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/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/WidgetProvider/WidgetProvider.tsx

@@ -1,9 +1,10 @@
 import type { PropTypes } from './WidgetProvider.types';
 import type { PropsWithChildren } from 'react';
 
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } 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';
@@ -19,6 +20,16 @@ export function WidgetProvider(props: PropsWithChildren<PropTypes>) {
     });
   }, [config.apiKey, config.apiUrl]);
 
+  const fontFamily = props.config?.theme?.fontFamily;
+
+  const { handleLoadCustomFont } = useFontLoader();
+
+  useEffect(() => {
+    if (fontFamily) {
+      handleLoadCustomFont(fontFamily);
+    }
+  }, [fontFamily]);
+
   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

@@ -16,8 +16,8 @@ import { useForceAutoConnect } from '../useForceAutoConnect';
 import { useSubscribeToWidgetEvents } from '../useSubscribeToWidgetEvents';
 
 export function useBootstrap() {
-  globalFont();
   useForceAutoConnect();
+  globalFont();
   useSubscribeToWidgetEvents();
   const blockchains = useAppStore().blockchains();
   const { canSwitchNetworkTo } = useWallets();

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/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

package/src/pages/WalletsPage.tsx

@@ -1,7 +1,15 @@
 import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
-import { styled, Typography, Wallet, WalletState } from '@rango-dev/ui';
+import {
+  Divider,
+  getCategoriesCount,
+  SelectableCategoryList,
+  styled,
+  Typography,
+  Wallet,
+  WalletState,
+} from '@rango-dev/ui';
 import React, { useState } from 'react';
 
 import { Layout, PageContainer } from '../components/Layout';
@@ -11,6 +19,10 @@ import { useWalletList } from '../hooks/useWalletList';
 import { useAppStore } from '../store/AppStore';
 import { useUiStore } from '../store/ui';
 import { getContainer } from '../utils/common';
+import {
+  filterBlockchainsByWalletTypes,
+  filterWalletsByCategory,
+} from '../utils/wallets';
 
 interface NamespacesModalState {
   providerType: string;
@@ -37,6 +49,9 @@ export const TIME_TO_IGNORE_MODAL = 300;
 
 export function WalletsPage() {
   const { fetchStatus: fetchMetaStatus } = useAppStore();
+  const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
+  const blockchains = useAppStore().blockchains();
+
   const [openModal, setOpenModal] = useState(false);
   const [namespacesModalState, setNamespacesModalState] =
     useState<NamespacesModalState | null>(null);
@@ -74,17 +89,34 @@ export function WalletsPage() {
   const selectedWalletState =
     selectedWallet?.state || WalletState.NOT_INSTALLED;
 
+  const filteredBlockchains = filterBlockchainsByWalletTypes(list, blockchains);
+  const activeCategoriesCount = getCategoriesCount(filteredBlockchains);
+  const showCategory = activeCategoriesCount !== 1;
+
+  const filteredWallets = filterWalletsByCategory(list, blockchainCategory);
+
   return (
     <Layout
       header={{
         title: i18n.t('Connect Wallets'),
       }}>
       <Container>
+        {showCategory && (
+          <>
+            <SelectableCategoryList
+              setCategory={setBlockchainCategory}
+              category={blockchainCategory}
+              blockchains={filteredBlockchains}
+              isLoading={fetchMetaStatus === 'loading'}
+            />
+            <Divider size={24} />
+          </>
+        )}
         <Typography variant="title" size="xmedium" align="center">
           {i18n.t('Choose a wallet to connect.')}
         </Typography>
         <ListContainer>
-          {list.map((wallet, index) => {
+          {filteredWallets.map((wallet, index) => {
             const key = `wallet-${index}-${wallet.type}`;
             return (
               <Wallet

package/src/types/config.ts

@@ -28,7 +28,7 @@ export type WidgetColors = {
  * radius, width, and height.
  * @property {'auto' | 'light' | 'dark'} mode - The mode property is used to specify the default theme for
  * the widget.
- * @property {string} fontFamily - The font family to be used in the widget.
+ * @property {string} fontFamily - The font family to be used in the widget. If you want to do this, include the font of your choice in your HTML file.
  * @property {{ light?: WidgetColors; dark?: WidgetColors }} colors - The `colors` property is a sub-property of the `WidgetTheme` object that
  * defines the color scheme for the widget. It is of type `Colors`, which is likely another object that
  * contains specific color values for various parts of the widget (e.g. background color, text color,

package/src/utils/common.ts

@@ -1,6 +1,10 @@
 import type { Token } from 'rango-sdk';
 
+import { BlockchainCategories } from '@rango-dev/ui';
+import { TransactionType } from 'rango-sdk';
+
 import { WIDGET_UI_ID } from '../constants';
+import { SUPPORTED_FONTS } from '../constants/fonts';
 import {
   MIN_LENGTH_SYMBOL_CONTAINS,
   MIN_LENGTH_SYMBOL_START_WITH,
@@ -218,3 +222,28 @@ export function compareWithSearchFor(
 
   return 0;
 }
+
+export const isBlockchainTypeInCategory = (
+  blockchainType: TransactionType,
+  category: string
+): boolean => {
+  switch (category) {
+    case BlockchainCategories.ALL:
+      return true;
+    case BlockchainCategories.UTXO:
+      return blockchainType === TransactionType.TRANSFER;
+    case BlockchainCategories.OTHER:
+      return (
+        blockchainType !== TransactionType.TRANSFER &&
+        blockchainType !== TransactionType.COSMOS &&
+        blockchainType !== TransactionType.EVM
+      );
+    default:
+      return blockchainType === category;
+  }
+};
+
+export const getFontUrlByName = (fontName: string) => {
+  const font = SUPPORTED_FONTS.find((font) => font.value === fontName);
+  return font?.url;
+};

package/src/utils/configs.ts

@@ -46,7 +46,6 @@ export function initConfig(nextConfigs: Configs) {
 
 export const DEFAULT_PRIMARY_RADIUS = 20;
 export const DEFAULT_SECONDARY_RADIUS = 25;
-export const DEFAULT_FONT_FAMILY = 'Roboto';
 
 export const THEME_CLASS_NAME_PREFIX = `theme-widget`;
 

package/src/utils/wallets.ts

@@ -16,9 +16,17 @@ import type {
   WalletType,
   WalletTypes,
 } from '@rango-dev/wallets-shared';
-import type { BlockchainMeta, Token, WalletDetail } from 'rango-sdk';
+import type {
+  BlockchainMeta,
+  Token,
+  TransactionType,
+  WalletDetail,
+} from 'rango-sdk';
 
-import { WalletState as WalletStatus } from '@rango-dev/ui';
+import {
+  BlockchainCategories,
+  WalletState as WalletStatus,
+} from '@rango-dev/ui';
 import { readAccountAddress } from '@rango-dev/wallets-react';
 import {
   detectInstallLink,
@@ -39,6 +47,7 @@ import {
 } from '../constants/routing';
 import { EXCLUDED_WALLETS } from '../constants/wallets';
 
+import { isBlockchainTypeInCategory, removeDuplicateFrom } from './common';
 import { numberToString } from './numbers';
 
 export function mapStatusToWalletState(state: WalletState): WalletStatus {
@@ -64,6 +73,7 @@ export function mapWalletTypesToWalletInfo(
     .filter((wallet) => !EXCLUDED_WALLETS.includes(wallet as WalletTypes))
     .filter((wallet) => {
       const { supportedChains, isContractWallet } = getWalletInfo(wallet);
+
       const { installed, network } = getState(wallet);
       const filterContractWallets =
         isContractWallet && (!installed || (!!chain && network !== chain));
@@ -85,7 +95,12 @@ export function mapWalletTypesToWalletInfo(
         showOnMobile,
         namespaces,
         singleNamespace,
+        supportedChains,
       } = getWalletInfo(type);
+      const blockchainTypes = removeDuplicateFrom(
+        supportedChains.map((item) => item.type)
+      );
+
       const state = mapStatusToWalletState(getState(type));
       return {
         title: name,
@@ -96,6 +111,7 @@ export function mapWalletTypesToWalletInfo(
         showOnMobile,
         namespaces,
         singleNamespace,
+        blockchainTypes,
       };
     });
 }
@@ -538,3 +554,38 @@ export const isFetchingBalance = (
 export function hashWalletsState(walletsInfo: ModalWalletInfo[]) {
   return walletsInfo.map((w) => w.state).join('-');
 }
+
+export function filterBlockchainsByWalletTypes(
+  wallets: ModalWalletInfo[],
+  blockchains: BlockchainMeta[]
+) {
+  const uniqueBlockchainTypes = new Set<TransactionType>();
+  wallets.forEach((wallet) => {
+    wallet.blockchainTypes.forEach((type) => {
+      uniqueBlockchainTypes.add(type);
+    });
+  });
+  const filteredBlockchains = blockchains.filter((blockchain) =>
+    uniqueBlockchainTypes.has(blockchain.type)
+  );
+
+  return filteredBlockchains;
+}
+
+export function filterWalletsByCategory(
+  wallets: WalletInfoWithNamespaces[],
+  category: string
+) {
+  if (category === BlockchainCategories.ALL) {
+    return wallets;
+  }
+
+  return wallets.filter((wallet) => {
+    for (const type of wallet.blockchainTypes) {
+      if (isBlockchainTypeInCategory(type, category)) {
+        return true;
+      }
+    }
+    return false;
+  });
+}