@rango-dev/widget-embedded 0.14.1-next.5 → 0.14.1-next.7

package/dist/types/config.d.ts

@@ -7,22 +7,16 @@ import type { Asset } from 'rango-sdk';
  * @property {string} background
  * @property {string} foreground
  * @property {string} primary
- * @property {string} success
- * @property {string} error
- * @property {string} warning
- * @property {string} surface
- * @property {string} neutral
+ * @property {string} secondary
  *
  */
+export type WidgetColorsKeys = keyof WidgetColors;
 export type WidgetColors = {
     background?: string;
     foreground?: string;
-    primary?: string;
-    success?: string;
-    error?: string;
-    warning?: string;
-    surface?: string;
     neutral?: string;
+    primary?: string;
+    secondary?: string;
 };
 /**
  * The `WidgetTheme` defines the properties of a widget theme, including mode, font family, colors, border

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;;;;;;;;;;;;;;;;;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"}
+{"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;;;;;;;GAOG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,YAAY,CAAC;AAClD,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,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,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/colors.d.ts

@@ -0,0 +1,11 @@
+import type { WidgetColors } from '../types';
+export declare const colorShade: (col: string, amt: number) => string;
+export declare const generateRangeColors: (name: string, color: string) => {
+    [x: string]: string;
+};
+export declare const generateColors: (mainColors: {
+    [x: string]: string;
+}, colors?: WidgetColors) => {
+    [x: string]: string;
+};
+//# sourceMappingURL=colors.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/utils/colors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,UAAU,CAAC;AAE/D,eAAO,MAAM,UAAU,QAAS,MAAM,OAAO,MAAM,WAyBlD,CAAC;AAEF,eAAO,MAAM,mBAAmB,SAAU,MAAM,SAAS,MAAM;;CAkC9D,CAAC;AACF,eAAO,MAAM,cAAc;;YAEhB,YAAY;;CA0BtB,CAAC"}

package/dist/utils/common.d.ts

@@ -2,9 +2,5 @@ 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;
 export declare function containsText(text: string, searchText: string): boolean;
-export declare const colorShade: (col: string, amt: number) => string;
-export declare const generateRangeColors: (name: string, color: string) => {
-    [x: string]: string;
-};
 export declare const getContainer: () => HTMLElement;
 //# 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":"AACA,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,eAAO,MAAM,UAAU,QAAS,MAAM,OAAO,MAAM,WAqBlD,CAAC;AAEF,eAAO,MAAM,mBAAmB,SAAU,MAAM,SAAS,MAAM;;CAuB9D,CAAC;AAEF,eAAO,MAAM,YAAY,mBAC2B,CAAC"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAAA,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,eAAO,MAAM,YAAY,mBAC2B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.14.1-next.5",
+  "version": "0.14.1-next.7",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -19,12 +19,12 @@
   "dependencies": {
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
-    "@rango-dev/provider-all": "^0.17.1-next.0",
+    "@rango-dev/provider-all": "^0.17.1-next.1",
     "@rango-dev/queue-manager-core": "^0.17.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.1",
     "@rango-dev/queue-manager-react": "^0.17.0",
-    "@rango-dev/ui": "^0.17.1-next.2",
-    "@rango-dev/wallets-react": "^0.3.0",
+    "@rango-dev/ui": "^0.17.1-next.4",
+    "@rango-dev/wallets-react": "^0.3.1-next.0",
     "@rango-dev/wallets-shared": "^0.17.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",

package/src/components/TokenList/TokenList.tsx

@@ -24,7 +24,7 @@ import React, { forwardRef, useEffect, useState } from 'react';
 import { useAppStore } from '../../store/app';
 import { useMetaStore } from '../../store/meta';
 import { useWalletsStore } from '../../store/wallets';
-import { generateRangeColors } from '../../utils/common';
+import { generateRangeColors } from '../../utils/colors';
 
 import { LoadingTokenList } from './LoadingTokenList';
 import {

package/src/constants/fonts.ts

@@ -0,0 +1 @@
+export const DEFAULT_FONT_FAMILY = 'Roboto';

package/src/hooks/useTheme.ts

@@ -1,26 +1,36 @@
 import type { WidgetTheme } from '../types';
 
-import { createTheme, darkTheme, lightTheme } from '@rango-dev/ui';
+import {
+  createTheme,
+  darkTheme,
+  lightTheme,
+  darkColors as mainDarkColors,
+  theme as mainTheme,
+} from '@rango-dev/ui';
 import { useEffect, useState } from 'react';
 
+import { DEFAULT_FONT_FAMILY } from '../constants/fonts';
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
+import { generateColors } from '../utils/colors';
 import {
   DEFAULT_PRIMARY_RADIUS,
   DEFAULT_SECONDARY_RADIUS,
 } from '../utils/configs';
 
-export function useTheme({
-  // colors,
-  fontFamily = 'Roboto',
-  borderRadius = DEFAULT_PRIMARY_RADIUS,
-  secondaryBorderRadius = DEFAULT_SECONDARY_RADIUS,
-  mode = 'auto',
-}: WidgetTheme) {
+export function useTheme(props: WidgetTheme) {
+  const {
+    colors,
+    fontFamily = DEFAULT_FONT_FAMILY,
+    borderRadius = DEFAULT_PRIMARY_RADIUS,
+    secondaryBorderRadius = DEFAULT_SECONDARY_RADIUS,
+    mode = 'auto',
+  } = props;
   const theme = useSettingsStore.use.theme();
+  const mainColors = mainTheme.colors;
+
   const fetchMeta = useMetaStore.use.fetchMeta();
   const setTheme = useSettingsStore.use.setTheme();
-
   const customTheme = createTheme({
     radii: {
       primary: `${borderRadius}px`,
@@ -31,8 +41,38 @@ export function useTheme({
     },
   });
 
-  const lightClassName = `${customTheme.className} ${lightTheme.className}`;
-  const darkClassName = `${customTheme.className} ${darkTheme.className}`;
+  const darkColors = generateColors(
+    {
+      ...mainColors,
+      ...mainDarkColors,
+    },
+    colors?.dark
+  );
+  const lightColors = generateColors(mainColors, colors?.light);
+  const customLightTheme = Object.keys(lightColors).length
+    ? createTheme({
+        colors: lightColors,
+      })
+    : lightTheme;
+  const customDarkTheme = Object.keys(darkColors).length
+    ? createTheme({
+        colors: {
+          ...darkColors,
+          neutral100: darkColors.neutral900,
+          neutral200: darkColors.neutral800,
+          neutral300: darkColors.neutral700,
+          neutral400: darkColors.neutral600,
+          neutral500: darkColors.neutral500,
+          neutral600: darkColors.neutral400,
+          neutral700: darkColors.neutral300,
+          neutral800: darkColors.neutral200,
+          neutral900: darkColors.neutral100,
+        },
+      })
+    : darkTheme;
+
+  const lightClassName = `${customTheme.className} ${customLightTheme.className}`;
+  const darkClassName = `${customTheme.className} ${customDarkTheme.className}`;
 
   const [OSTheme, setOSTheme] = useState('light');
 

package/src/index.ts

@@ -1,46 +1,53 @@
-import {
-  WidgetTheme,
-  WidgetConfig,
-  WidgetColors,
+import type {
   BlockchainAndTokenConfig,
+  WidgetColors,
+  WidgetColorsKeys,
+  WidgetConfig,
+  WidgetTheme,
 } from './types';
-import { WidgetProps, Widget } from './Widget';
-import { WalletType } from '@rango-dev/wallets-shared';
-import { WidgetWallets } from './Wallets';
-import {
-  useWallets,
-  ProviderInterface,
-  EventHandler as HandleWalletsUpdate,
-} from '@rango-dev/wallets-react';
-import {
-  useEvents as useWidgetEvents,
-  MainEvents,
-  RouteEvent,
-  StepEvent,
+import type { WidgetProps } from './Widget';
+import type {
   Route,
-  Step,
+  RouteEvent,
+  RouteFailedEvent,
   RouteStartedEvent,
   RouteSucceededEvent,
-  RouteFailedEvent,
-  RouteEventType,
+  Step,
+  StepApprovalTxSucceededEvent,
+  StepCheckStatusEvent,
+  StepEvent,
+  StepFailedEvent,
+  StepOutputRevealedEvent,
   StepStartedEvent,
   StepSucceededEvent,
-  StepFailedEvent,
-  StepTxExecutionUpdatedEvent,
   StepTxExecutionBlockedEvent,
-  StepCheckStatusEvent,
-  StepApprovalTxSucceededEvent,
-  StepOutputRevealedEvent,
+  StepTxExecutionUpdatedEvent,
+} from '@rango-dev/queue-manager-rango-preset';
+import type {
+  EventHandler as HandleWalletsUpdate,
+  ProviderInterface,
+} from '@rango-dev/wallets-react';
+import type { WalletType } from '@rango-dev/wallets-shared';
+
+import {
+  MainEvents,
+  RouteEventType,
   StepEventType,
-  StepExecutionEventStatus,
   StepExecutionBlockedEventStatus,
+  StepExecutionEventStatus,
+  useEvents as useWidgetEvents,
 } from '@rango-dev/queue-manager-rango-preset';
+import { useWallets } from '@rango-dev/wallets-react';
+
+import { WidgetWallets } from './Wallets';
+import { Widget } from './Widget';
 
 export type {
   WidgetConfig,
   WalletType,
   WidgetTheme,
   WidgetColors,
+  WidgetColorsKeys,
   ProviderInterface,
   BlockchainAndTokenConfig,
   WidgetProps,

package/src/types/config.ts

@@ -8,22 +8,16 @@ import type { Asset } from 'rango-sdk';
  * @property {string} background
  * @property {string} foreground
  * @property {string} primary
- * @property {string} success
- * @property {string} error
- * @property {string} warning
- * @property {string} surface
- * @property {string} neutral
+ * @property {string} secondary
  *
  */
+export type WidgetColorsKeys = keyof WidgetColors;
 export type WidgetColors = {
   background?: string;
   foreground?: string;
-  primary?: string;
-  success?: string;
-  error?: string;
-  warning?: string;
-  surface?: string;
   neutral?: string;
+  primary?: string;
+  secondary?: string;
 };
 
 /**

package/src/utils/colors.ts

@@ -0,0 +1,93 @@
+import type { WidgetColors, WidgetColorsKeys } from '../types';
+
+export const colorShade = (col: string, amt: number) => {
+  const RANGE = 255;
+  const COL = 3;
+  const RADIX = 16;
+
+  col = col.replace(/^#/, '');
+  if (col.length === COL) {
+    col = col[0] + col[0] + col[1] + col[1] + col[2] + col[2];
+  }
+  let [r, g, b]: any = col.match(/.{2}/g);
+  [r, g, b] = [
+    parseInt(r, RADIX) + amt,
+    parseInt(g, RADIX) + amt,
+    parseInt(b, RADIX) + amt,
+  ];
+
+  r = Math.max(Math.min(RANGE, r), 0).toString(RADIX);
+  g = Math.max(Math.min(RANGE, g), 0).toString(RADIX);
+  b = Math.max(Math.min(RANGE, b), 0).toString(RADIX);
+
+  const rr = (r.length < 2 ? '0' : '') + r;
+  const gg = (g.length < 2 ? '0' : '') + g;
+  const bb = (b.length < 2 ? '0' : '') + b;
+
+  return `#${rr}${gg}${bb}`;
+};
+
+export const generateRangeColors = (name: string, color: string) => {
+  const NUMBER_OF_COLORS = 10;
+  const HALF_NUMBER_OF_COLORS = 5;
+  const COLOR_SUFFIX = 100;
+  const AMT = 32;
+
+  let colors = { [name]: color };
+  for (let i = 1; i < NUMBER_OF_COLORS; i++) {
+    if (i < HALF_NUMBER_OF_COLORS) {
+      colors = {
+        ...colors,
+        [name + i * COLOR_SUFFIX]: colorShade(
+          color,
+          (HALF_NUMBER_OF_COLORS - i) * AMT
+        ),
+      };
+    }
+    if (i === HALF_NUMBER_OF_COLORS) {
+      colors = {
+        ...colors,
+        [name + i * COLOR_SUFFIX]: color,
+      };
+    }
+    if (i > HALF_NUMBER_OF_COLORS) {
+      colors = {
+        ...colors,
+        [name + i * COLOR_SUFFIX]: colorShade(
+          color,
+          -((i - HALF_NUMBER_OF_COLORS) * AMT)
+        ),
+      };
+    }
+  }
+  return colors;
+};
+export const generateColors = (
+  mainColors: { [x: string]: string },
+  colors?: WidgetColors
+) => {
+  if (!colors || !Object.entries(colors).length) {
+    return {};
+  }
+  let changeColors = false;
+  let listOfColors = { ...mainColors };
+  for (const colorKey in colors) {
+    const color = colors[colorKey as WidgetColorsKeys];
+
+    if (!!color && color !== mainColors[colorKey]) {
+      changeColors = true;
+      if (colorKey === 'background' || colorKey === 'foreground') {
+        listOfColors = {
+          ...listOfColors,
+          [colorKey]: color,
+        };
+      } else {
+        listOfColors = {
+          ...listOfColors,
+          ...generateRangeColors(colorKey, color),
+        };
+      }
+    }
+  }
+  return changeColors ? listOfColors : {};
+};

package/src/utils/common.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-magic-numbers */
 export function removeDuplicateFrom<T>(array: T[]): T[] {
   return Array.from(new Set(array));
 }
@@ -31,53 +30,5 @@ export function containsText(text: string, searchText: string): boolean {
   return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
 }
 
-export const colorShade = (col: string, amt: number) => {
-  col = col.replace(/^#/, '');
-  if (col.length === 3) {
-    col = col[0] + col[0] + col[1] + col[1] + col[2] + col[2];
-  }
-  let [r, g, b]: any = col.match(/.{2}/g);
-  [r, g, b] = [
-    parseInt(r, 16) + amt,
-    parseInt(g, 16) + amt,
-    parseInt(b, 16) + amt,
-  ];
-
-  r = Math.max(Math.min(255, r), 0).toString(16);
-  g = Math.max(Math.min(255, g), 0).toString(16);
-  b = Math.max(Math.min(255, b), 0).toString(16);
-
-  const rr = (r.length < 2 ? '0' : '') + r;
-  const gg = (g.length < 2 ? '0' : '') + g;
-  const bb = (b.length < 2 ? '0' : '') + b;
-
-  return `#${rr}${gg}${bb}`;
-};
-
-export const generateRangeColors = (name: string, color: string) => {
-  let colors = { [name]: color };
-  for (let i = 1; i < 10; i++) {
-    if (i < 5) {
-      colors = {
-        ...colors,
-        [name + i * 100]: colorShade(color, (5 - i) * 32),
-      };
-    }
-    if (i === 5) {
-      colors = {
-        ...colors,
-        [name + i * 100]: color,
-      };
-    }
-    if (i > 5) {
-      colors = {
-        ...colors,
-        [name + i * 100]: colorShade(color, -((i - 5) * 32)),
-      };
-    }
-  }
-  return colors;
-};
-
 export const getContainer = () =>
   document.getElementById('swap-box') as HTMLElement;

package/dist/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,yCAAyC,CAAC"}