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

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

@@ -10,4 +10,5 @@ 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;AAGvC,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAW5C,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"}
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.28.1-next.1",
+  "version": "0.28.1-next.2",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -52,4 +52,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

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

@@ -4,6 +4,7 @@ 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,
@@ -241,3 +242,8 @@ export const isBlockchainTypeInCategory = (
       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`;