@rango-dev/widget-embedded 0.1.11-next.23 → 0.1.11-next.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.11-next.23",
+  "version": "0.1.11-next.25",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -32,7 +32,7 @@
     "@rango-dev/queue-manager-core": "^0.1.11-next.0",
     "@rango-dev/queue-manager-rango-preset": "^0.1.11-next.7",
     "@rango-dev/queue-manager-react": "^0.1.10-next.76",
-    "@rango-dev/ui": "^0.1.11-next.11",
+    "@rango-dev/ui": "^0.1.11-next.12",
     "@rango-dev/wallets-core": "^0.1.11-next.88",
     "@rango-dev/wallets-shared": "^0.1.11-next.84",
     "bignumber.js": "^9.1.1",

package/src/App.tsx

@@ -106,21 +106,7 @@ export function App({ config }: WidgetProps) {
     >
       <div id="pageContainer" className={activeTheme}>
         <QueueManager>
-          <SwapContainer
-            // style={
-            //   currentPage !== navigationRoutes.home && config?.theme?.height
-            //     ? {
-            //         height: config?.theme?.height,
-            //         width: config?.theme?.width || 'auto',
-            //       }
-            //     : config?.theme?.width
-            //     ? {
-            //         width: config?.theme?.width || 'auto',
-            //       }
-            //     : undefined
-            // }
-            fixedHeight={currentPage !== navigationRoutes.home}
-          >
+          <SwapContainer fixedHeight={currentPage !== navigationRoutes.home}>
             <AppRouter
               lastConnectedWallet={lastConnectedWalletWithNetwork}
               disconnectedWallet={disconnectedWallet}

package/src/hooks/useTheme.ts

@@ -2,7 +2,7 @@ import { createTheme } from '@rango-dev/ui';
 import { useState, useEffect, useLayoutEffect } from 'react';
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
-import { Theme } from '../types';
+import { WidgetTheme } from '../types';
 import { shadeColor } from '../utils/common';
 import usePrevious from './usePrevious';
 
@@ -11,7 +11,7 @@ export function useTheme({
   fontFamily = 'Robot',
   borderRadius = 8,
   mode = 'auto',
-}: Theme) {
+}: WidgetTheme) {
   const theme = useSettingsStore.use.theme();
   const fetchMeta = useMetaStore.use.fetchMeta();
   const setTheme = useSettingsStore.use.setTheme();

package/src/index.tsx

@@ -11,4 +11,4 @@ root.render(
   </BrowserRouter>
 );
 
-export { SwapBox } from './lib';
+export { Widget } from './lib';

package/src/lib.tsx

@@ -15,7 +15,7 @@ import { Layout } from './components/Layout';
 import { globalFont, globalStyles } from './globalStyles';
 import { useTheme } from './hooks/useTheme';
 import { isEvmBlockchain } from 'rango-sdk';
-import { WidgetConfig } from './types';
+import { WidgetTheme, WidgetConfig, WidgetColors, BlockchainAndTokenConfig } from './types';
 import useSelectLanguage from './hooks/useSelectLanguage';
 import './i18n';
 import QueueManager from './QueueManager';
@@ -23,11 +23,14 @@ import { useUiStore } from './store/ui';
 import { navigationRoutes } from './constants/navigationRoutes';
 import { initConfig } from './utils/configs';
 
+
+export {WidgetConfig, WalletType, WidgetTheme, WidgetColors,  BlockchainAndTokenConfig}
+
 export type WidgetProps = {
   config?: WidgetConfig;
 };
 
-export const SwapBox: React.FC<WidgetProps> = ({ config }) => {
+export const Widget: React.FC<WidgetProps> = ({ config }) => {
   globalStyles();
   globalFont(config?.theme?.fontFamily || 'Roboto');
 
@@ -115,18 +118,7 @@ export const SwapBox: React.FC<WidgetProps> = ({ config }) => {
       <div id="pageContainer" className={activeTheme}>
         <QueueManager>
           <SwapContainer
-            fixedHeight={currentPage !== navigationRoutes.home}
-            // style={
-            //   currentPage !== navigationRoutes.home && config?.theme?.height
-            //     ? {
-            //         height: config?.theme?.height,
-            //         width: config?.theme?.width || 'auto',
-            //       }
-            //     : {
-            //         width: config?.theme?.width || 'auto',
-            //       }
-            // }
-          >
+            fixedHeight={currentPage !== navigationRoutes.home}>
             <AppRouter
               lastConnectedWallet={lastConnectedWalletWithNetwork}
               disconnectedWallet={disconnectedWallet}

package/src/types/config.ts

@@ -1,43 +1,109 @@
 import { Asset } from 'rango-sdk';
 import { WalletType } from '@rango-dev/wallets-shared';
 
-export type Colors = {
+/**
+ * The above type defines a set of optional color properties for a widget.
+ * @property {string} background
+ * @property {string} foreground
+ * @property {string} primary
+ * @property {string} success
+ * @property {string} error
+ * @property {string} warning
+ */
+export type WidgetColors = {
   background?: string;
-  // inputBackground?: string;
-  // icons?: string;
-  primary?: string;
   foreground?: string;
-  // text?: string;
+  primary?: string;
   success?: string;
   error?: string;
   warning?: string;
 };
 
-export type Theme = {
-  mode?: 'dark' | 'light' | 'auto';
+/**
+ * The `WidgetTheme` defines the properties of a widget theme, including mode, font family, colors, border
+ * 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 {Colors} 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,
+ * 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} 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.
+ */
+export type WidgetTheme = {
+  mode?: 'auto' | 'light' | 'dark';
   fontFamily?: string;
-  colors?: Colors;
+  colors?: WidgetColors;
   borderRadius?: number;
   width?: number;
   height?: number;
 };
-export type Support = {
+
+/**
+ * `BlockchainAndTokenConfig`
+ *
+ * @property {string} blockchain - This property is optional and represents the default selected blockchain.
+ * @property {Asset} token - The `token` property is a type of `Asset` and represents the default token
+ * which is selected. e.g. {blockchain: 'BSC', symbol: 'BNB', address: null}
+ * @property {string[]} blockchains - An optional array of strings representing the supported
+ * blockchains. e.g. ['BSC','ETHEREUM']
+ * @property {Asset[]} tokens - The `tokens` property is an optional array of `Asset` objects that
+ * you could use that to limit tokens to some limited ones.
+ */
+export type BlockchainAndTokenConfig = {
   blockchain?: string;
   token?: Asset;
   blockchains?: string[];
   tokens?: Asset[];
 };
 
+/**
+ * The type WidgetConfig defines the configuration options for a widget, including API key, affiliate
+ * reference, amount, blockchain and token configurations, liquidity sources, wallet types, language,
+ * and theme.
+ *
+ * @property {string} apiKey - The API key used to communicate with Rango API
+ * @property {string} affiliateRef - The affiliate reference is an optional string property in the
+ * WidgetConfig type. It is used to set and track referrals or affiliations for the dApps.
+ * @property {number} amount - The default input amount.
+ * @property {BlockchainAndTokenConfig} from - The `from` property is an optional property of type
+ * `BlockchainAndTokenConfig` that specifies the default blockchain and token from which the user wants to
+ * exchange.It can also used to limit source swap blockchains/tokens to some limited ones.
+ * @property {BlockchainAndTokenConfig} to - The "to" property is an optional property of type
+ * "BlockchainAndTokenConfig" that specifies the default blockchain and token to which the user wants to
+ * exchange.It can also used to limit destination swap blockchains/tokens to some limited ones.
+ * blockchain during the transaction.
+ * @property {string[]} liquiditySources - The `liquiditySources` property is an optional array of
+ * strings that specifies the liquidity sources allowed dexes and bridges for the routing
+ * @property {WalletType[]} wallets - The `wallets` property is an optional array of `WalletType`
+ * values that represent the types of wallets that the widget should support. For example, it could
+ * include values like `"metamask"`, `"kepler"`, or `"phantom"`.
+ * @property {boolean} multiWallets - The `multiWallets` property is a boolean value that indicates
+ * whether the widget should allow the user to select multiple wallets for the transaction.
+ * @property {boolean} customAddress - A boolean value indicating whether the user can input a custom
+ * address for the transaction. If set to true, the widget will allow the user to input a custom
+ * address for the destination.
+ * @property {string} language - The language property is an optional string that specifies the
+ * default language in which the widget should be displayed. If not provided, the widget will default to the
+ * language of the user's browser.
+ * @property {WidgetTheme} theme - The `theme` property is a part of the `WidgetConfig` type and is
+ * used to specify the visual theme of the widget. It is of type `WidgetTheme`, which is an interface
+ * that defines the various properties of the theme, such as colors, fonts, and others.
+ */
 export type WidgetConfig = {
   apiKey: string;
   affiliateRef?: string;
   amount?: number;
-  from?: Support;
-  to?: Support;
+  from?: BlockchainAndTokenConfig;
+  to?: BlockchainAndTokenConfig;
   liquiditySources?: string[];
   wallets?: WalletType[];
   multiWallets?: boolean;
   customAddress?: boolean;
   language?: string;
-  theme?: Theme;
+  theme?: WidgetTheme;
 };