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

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.14",
   "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/HeaderButtons/UnreadNotificationsBadge.tsx

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

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/components/NotificationContent/NotificationContent.tsx

@@ -22,20 +22,15 @@ export function NotificationContent() {
   const navigate = useNavigate();
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
 
-  const getUnreadNotifications =
-    useNotificationStore.use.getUnreadNotifications();
+  const { getUnreadNotifications } = useNotificationStore();
 
   const notifications: Notification[] = getUnreadNotifications();
-
-  const setAsRead = useNotificationStore.use.setAsRead();
-
   const { tokens, blockchains } = useMetaStore.use.meta();
   const sortedNotification = notifications
     .sort((a, b) => b.creationTime - a.creationTime)
     .slice(0, MAX_NOTIFICATIONS_DISPLAYED);
 
   const handleOnClick = (requestId: Notification['requestId']) => {
-    setAsRead(requestId);
     setSelectedSwap(requestId);
     navigate(`/swaps/${requestId}`);
   };

package/src/components/SwapDetails/SwapDetails.tsx

@@ -39,6 +39,7 @@ import {
 import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { useBestRouteStore } from '../../store/bestRoute';
 import { useMetaStore } from '../../store/meta';
+import { useNotificationStore } from '../../store/notification';
 import { numberToString } from '../../utils/numbers';
 import { getPriceImpactLevel } from '../../utils/routing';
 import {
@@ -90,12 +91,22 @@ export function SwapDetails(props: SwapDetailsProps) {
     setModalState(null);
   };
 
+  const getUnreadNotifications =
+    useNotificationStore.use.getUnreadNotifications();
+  const setAsRead = useNotificationStore.use.setAsRead();
+  const unreadNotifications = getUnreadNotifications();
   const currentStep = getCurrentStep(swap);
   const currentStepNetworkStatus = currentStep?.networkStatus;
 
   useEffect(() => {
-    if (swap.status === 'success' || swap.status === 'failed') {
-      setShowCompletedModal(swap.status);
+    const existNotification = unreadNotifications.find(
+      (n) => n.requestId === swap.requestId
+    );
+    if (existNotification) {
+      if (swap.status === 'success' || swap.status === 'failed') {
+        setShowCompletedModal(swap.status);
+        setAsRead(swap.requestId);
+      }
     }
   }, [swap.status]);
 
@@ -207,7 +218,7 @@ export function SwapDetails(props: SwapDetailsProps) {
   const percentageChange = getPercentageChange(inputUsdValue, outputUsdValue);
 
   const completeModalDesc =
-    showCompletedModal === 'success'
+    swap.status === 'success'
       ? `You have received ${numberToString(
           outputAmount,
           TOKEN_AMOUNT_MIN_DECIMALS,
@@ -389,7 +400,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         open={!!showCompletedModal}
         diagnosisUrl={diagnosisUrl}
         onClose={() => setShowCompletedModal(null)}
-        status={showCompletedModal}
+        status={swap.status === 'success' ? 'success' : 'failed'}
         priceValue={numberToString(
           outputAmount,
           TOKEN_AMOUNT_MIN_DECIMALS,

package/src/components/SwapDetailsModal/SwapDetailsModal.types.ts

@@ -22,7 +22,7 @@ export interface ModalPropTypes {
 export interface CompleteModalPropTypes {
   open: boolean;
   onClose: () => void;
-  status: 'success' | 'failed' | null;
+  status: 'success' | 'failed';
   priceValue: string;
   usdValue: string;
   percentageChange: string;

package/src/components/WidgetEvents.tsx

@@ -16,7 +16,7 @@ export function WidgetEvents() {
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const getWalletsDetails = useWalletsStore.use.getWalletsDetails();
   const setNotification = useNotificationStore.use.setNotification();
-
+  const setAsRead = useNotificationStore.use.setAsRead();
   const widgetEvents = useEvents();
 
   useEffect(() => {
@@ -42,10 +42,16 @@ export function WidgetEvents() {
         toAccount && getWalletsDetails([toAccount]);
       }
       if (
-        event.type === StepEventType.TX_EXECUTION_BLOCKED &&
-        validBlockedStatuses.includes(event.status)
+        (event.type === StepEventType.TX_EXECUTION_BLOCKED &&
+          validBlockedStatuses.includes(event.status)) ||
+        event.type === StepEventType.FAILED
       ) {
         setNotification(event, route);
+      } else if (
+        event.type === StepEventType.TX_EXECUTION ||
+        event.type === StepEventType.CHECK_STATUS
+      ) {
+        setAsRead(route.requestId);
       }
     });
 

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;