@rango-dev/widget-embedded 0.12.1-next.12 → 0.12.1-next.13

package/dist/types/config.d.ts

@@ -36,6 +36,8 @@ export type WidgetColors = {
  * border color
  * @property {number} borderRadius - `borderRadius` is a property of the `WidgetTheme` type that
  * specifies the radius of the corners of a widget.
+ * @property {number} secondaryBorderRadius - `secondaryBorderRadius` is a property of the `WidgetTheme` type that
+ * specifies the radius of the buttons of a widget.
  * @property {number} width - The `width` property is a number that represents the width of the widget.
  * @property {number} height - The `height` property is a number that specifies the height of the widget.
  * @property {boolean} singleTheme - The `singleTheme` property is a boolean that specifies the theme is support dark and light or only light.
@@ -48,6 +50,7 @@ export type WidgetTheme = {
         dark: WidgetColors;
     };
     borderRadius?: number;
+    secondaryBorderRadius?: number;
     width?: number;
     height?: number;
     singleTheme?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAEvC;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,YAAY,CAAC;QAAC,IAAI,EAAE,YAAY,CAAA;KAAE,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACrC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,wBAAwB,CAAC;IAChC,EAAE,CAAC,EAAE,wBAAwB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,UAAU,GAAG,iBAAiB,CAAC,EAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC;CACxB,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAEvC;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,YAAY,CAAC;QAAC,IAAI,EAAE,YAAY,CAAA;KAAE,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACrC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,wBAAwB,CAAC;IAChC,EAAE,CAAC,EAAE,wBAAwB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,UAAU,GAAG,iBAAiB,CAAC,EAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC;CACxB,CAAC"}

package/dist/utils/configs.d.ts

@@ -4,4 +4,6 @@ export interface Configs {
 export declare function getConfig(name: keyof Configs): string;
 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;
 //# 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,MAAM,WAAW,OAAO;IACtB,OAAO,EAAE,MAAM,CAAC;CACjB;AAQD,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,UAE5C;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,EAAE,KAAK,EAAE,GAAG,OAIxD;AAED,wBAAgB,UAAU,CAAC,WAAW,EAAE,OAAO,WAS9C"}
+{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../src/utils/configs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACtB,OAAO,EAAE,MAAM,CAAC;CACjB;AAQD,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,UAE5C;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,EAAE,KAAK,EAAE,GAAG,OAIxD;AAED,wBAAgB,UAAU,CAAC,WAAW,EAAE,OAAO,WAS9C;AAED,eAAO,MAAM,sBAAsB,KAAK,CAAC;AACzC,eAAO,MAAM,wBAAwB,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.12.1-next.12",
+  "version": "0.12.1-next.13",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
     "@rango-dev/queue-manager-core": "^0.15.1-next.1",
     "@rango-dev/queue-manager-rango-preset": "^0.15.1-next.5",
     "@rango-dev/queue-manager-react": "^0.15.1-next.3",
-    "@rango-dev/ui": "^0.15.1-next.9",
+    "@rango-dev/ui": "^0.15.1-next.10",
     "@rango-dev/wallets-react": "^0.1.1-next.5",
     "@rango-dev/wallets-shared": "^0.15.1-next.3",
     "bignumber.js": "^9.1.1",

package/src/Widget.tsx

@@ -21,6 +21,7 @@ const MainContainer = styled('div', {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
+  fontFamily: '$widget',
 });
 
 export type WidgetProps = {
@@ -29,7 +30,7 @@ export type WidgetProps = {
 
 export function Main(props: PropsWithChildren<WidgetProps>) {
   const { config } = props;
-  globalFont(config?.theme?.fontFamily || 'Roboto');
+  globalFont();
 
   const { activeTheme } = useTheme(config?.theme || {});
   const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =

package/src/components/Layout/Layout.styles.ts

@@ -4,8 +4,7 @@ export const Container = styled('div', {
   position: 'relative',
   display: 'flex',
   flexDirection: 'column',
-  //TODO: add radii theme token for 20px
-  borderRadius: '20px',
+  borderRadius: '$primary',
   overflow: 'hidden !important',
   boxShadow: '15px 15px 15px 0px rgba(0, 0, 0, 0.05)',
   width: '95vw',

package/src/globalStyles.ts

@@ -1,12 +1,9 @@
 import { globalCss } from '@rango-dev/ui';
 
-export const globalFont = (fontFamily: string) =>
+export const globalFont = () =>
   globalCss({
     '@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')",
     ],
-    body: {
-      fontFamily,
-    },
   })();

package/src/hooks/useTheme.ts

@@ -1,87 +1,53 @@
-import { darkTheme, lightTheme } from '@rango-dev/ui';
-import { useState, useEffect, useLayoutEffect } from 'react';
+import type { WidgetTheme } from '../types';
+
+import { createTheme, darkTheme, lightTheme } from '@rango-dev/ui';
+import { useEffect, useState } from 'react';
+
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
-import { WidgetTheme } from '../types';
-import usePrevious from './usePrevious';
+import {
+  DEFAULT_PRIMARY_RADIUS,
+  DEFAULT_SECONDARY_RADIUS,
+} from '../utils/configs';
 
 export function useTheme({
   // colors,
   fontFamily = 'Roboto',
-  // borderRadius = 8,
+  borderRadius = DEFAULT_PRIMARY_RADIUS,
+  secondaryBorderRadius = DEFAULT_SECONDARY_RADIUS,
   mode = 'auto',
 }: WidgetTheme) {
   const theme = useSettingsStore.use.theme();
   const fetchMeta = useMetaStore.use.fetchMeta();
   const setTheme = useSettingsStore.use.setTheme();
-  // const light = themeColors?.light;
-  // const dark = themeColors?.dark;
-  // const neutral = light?.neutral || '#fafafa';
-  // const background = light?.background || '#fff';
-  // const foreground = light?.foreground || '#000';
 
-  // const darkColors = {
-  //   ...generateRangeColors('primary', 'dark', dark?.primary),
-  //   ...generateRangeColors('error', 'dark', dark?.error),
-  //   ...generateRangeColors('warning', 'dark', dark?.warning),
-  //   ...generateRangeColors('success', 'dark', dark?.success),
-  //   ...generateRangeColors('neutral', 'dark', dark?.neutral),
-  //   surface: dark?.surface,
-  //   background: dark?.background,
-  //   foreground: dark?.foreground,
-  // };
+  const customTheme = createTheme({
+    radii: {
+      primary: `${borderRadius}px`,
+      secondary: `${secondaryBorderRadius}px`,
+    },
+    fonts: {
+      widget: fontFamily,
+    },
+  });
 
-  // const lightColors = {
-  //   surface: light?.surface || '#fff',
-  //   ...generateRangeColors('primary', 'light', light?.primary || '#5FA425'),
-  //   ...generateRangeColors('error', 'light', light?.error || '#FF0000'),
-  //   ...generateRangeColors('warning', 'light', light?.warning || '#F5A623'),
-  //   ...generateRangeColors('success', 'light', light?.success || '#0070F3'),
-  //   ...generateRangeColors('neutral', 'light', neutral),
-  //   background,
-  //   foreground,
-  // };
+  const lightClassName = `${customTheme.className} ${lightTheme.className}`;
+  const darkClassName = `${customTheme.className} ${darkTheme.className}`;
 
-  // const customLightTheme = createTheme({
-  //   colors: lightColors,
-  //   radii: {
-  //     xs: `${borderRadius}px`,
-  //   },
-  //   shadows: {
-  //     s: `0px 3px 5px 3px ${light?.neutral || '#f0f2f5'} ,0px 6px 10px 3px ${
-  //       light?.neutral || '#f0f2f5'
-  //     }, 0px 1px 18px 3px ${light?.neutral || '#f0f2f5'}`,
-  //   },
-  // });
-
-  // const customDarkTheme = createTheme({
-  //   colors: {
-  //     ...lightColors,
-  //     ...generateRangeColors('neutral', 'dark', '#111111'),
-  //     foreground: background,
-  //     background: foreground,
-  //     surface: '#000',
-  //     ...JSON.parse(JSON.stringify(darkColors)),
-  //   },
-  //   radii: {
-  //     xs: `${borderRadius}px`,
-  //   },
-  //   shadows: {
-  //     s: `0px 3px 5px 3px ${dark?.neutral || '#222'}, 0px 6px 10px 3px ${
-  //       dark?.neutral || '#222'
-  //     }, 0px 1px 18px 3px ${dark?.neutral || '#222'}`,
-  //   },
-  // });
   const [OSTheme, setOSTheme] = useState('light');
 
   useEffect(() => {
-    (async () => {
+    const fetchData = async () => {
       await fetchMeta();
-    })();
+    };
+    void fetchData();
 
     const switchTheme = (event: MediaQueryListEvent) => {
-      if (event.matches) setOSTheme('dark');
-      else setOSTheme('light');
+      if (event.matches) {
+        setOSTheme('dark');
+      } else {
+        setOSTheme('light');
+      }
     };
 
     if (
@@ -101,20 +67,16 @@ export function useTheme({
     };
   }, []);
   useEffect(() => {
-    if (mode !== 'auto') setTheme(mode);
+    if (mode !== 'auto') {
+      setTheme(mode);
+    }
   }, [mode]);
-  const prevFont = usePrevious(fontFamily);
-
-  useLayoutEffect(() => {
-    const { classList } = document.body;
-
-    if (prevFont) classList.remove(`font_${prevFont.replace(/ /g, '')}`);
-    classList.add(`font_${fontFamily.replace(/ /g, '')}`);
-  }, [fontFamily]);
 
   const getActiveTheme = () => {
-    if (theme === 'auto') return OSTheme === 'dark' ? darkTheme : lightTheme;
-    else return theme === 'dark' ? darkTheme : lightTheme;
+    if (theme === 'auto') {
+      return OSTheme === 'dark' ? darkClassName : lightClassName;
+    }
+    return theme === 'dark' ? darkClassName : lightClassName;
   };
 
   return { activeTheme: getActiveTheme() };

package/src/types/config.ts

@@ -38,6 +38,8 @@ export type WidgetColors = {
  * border color
  * @property {number} borderRadius - `borderRadius` is a property of the `WidgetTheme` type that
  * specifies the radius of the corners of a widget.
+ * @property {number} secondaryBorderRadius - `secondaryBorderRadius` is a property of the `WidgetTheme` type that
+ * specifies the radius of the buttons of a widget.
  * @property {number} width - The `width` property is a number that represents the width of the widget.
  * @property {number} height - The `height` property is a number that specifies the height of the widget.
  * @property {boolean} singleTheme - The `singleTheme` property is a boolean that specifies the theme is support dark and light or only light.
@@ -47,6 +49,7 @@ export type WidgetTheme = {
   fontFamily?: string;
   colors?: { light: WidgetColors; dark: WidgetColors };
   borderRadius?: number;
+  secondaryBorderRadius?: number;
   width?: number;
   height?: number;
   singleTheme?: boolean;

package/src/utils/configs.ts

@@ -28,3 +28,6 @@ export function initConfig(nextConfigs: Configs) {
   configs = clonedConfigs;
   return configs;
 }
+
+export const DEFAULT_PRIMARY_RADIUS = 20;
+export const DEFAULT_SECONDARY_RADIUS = 25;