@rango-dev/widget-embedded 0.23.1-next.16 → 0.23.1-next.17

package/dist/pages/ConfirmSwapPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAmD5E,wBAAgB,eAAe,sBA8T9B"}
+{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAmD5E,wBAAgB,eAAe,sBA4T9B"}

package/dist/types/config.d.ts

@@ -159,8 +159,8 @@ export type Features = Partial<Record<'theme' | 'language' | 'connectWalletButto
  * that defines the various properties of the theme, such as colors, fonts, and others.
  * @property {boolean} externalWallets
  * If `externalWallets` is `true`, you should add `WidgetWallets` to your app.
- * @property {boolean} enableNewLiquiditySources - The `enableNewLiquiditySources` property is a boolean value that when you
- * set it to true, whenever a new liquidity source is added, it will be added to your list as well.
+ * @property {boolean} excludeLiquiditySources - The `excludeLiquiditySources` property is a boolean value that when you
+ * set it to true, the list of liquidity sources provided in `liquiditySources` will be excluded; otherwise, they will be included.
  * @property {Features} features - An optional object for configuring the visibility or enablement of various features.
  *   Keys include:
  *   - 'notification': Visibility state for the notification icon.
@@ -190,7 +190,7 @@ export type WidgetConfig = {
     language?: Language;
     theme?: WidgetTheme;
     externalWallets?: boolean;
-    enableNewLiquiditySources?: boolean;
+    excludeLiquiditySources?: boolean;
     features?: Features;
     variant?: WidgetVariant;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"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"}

package/dist/utils/colors.d.ts

@@ -1,8 +1,10 @@
 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 function generateShades(baseColor: string, prefix: string, reverse?: boolean): {
+    [key: string]: string;
 };
+export declare function generateShade(baseColor: string, decrementAmount: number): string;
+export declare function convertToRGB(baseColor: string): number[];
+export declare function isBright(baseColor: string): boolean;
 export declare const generateColors: (mainColors: {
     [x: string]: string;
 }, reverseNeutralRange: boolean, colors?: WidgetColors) => {

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

@@ -1 +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;;CAmC9D,CAAC;AACF,eAAO,MAAM,cAAc;;wBAEJ,OAAO,WACnB,YAAY;;CAyCtB,CAAC"}
+{"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,wBAAgB,cAAc,CAC5B,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,OAAO,GAChB;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAyC3B;AAED,wBAAgB,aAAa,CAC3B,SAAS,EAAE,MAAM,EACjB,eAAe,EAAE,MAAM,GACtB,MAAM,CAKR;AAED,wBAAgB,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,CAoBxD;AAcD,wBAAgB,QAAQ,CAAC,SAAS,EAAE,MAAM,WAezC;AAED,eAAO,MAAM,cAAc;;wBAEJ,OAAO,WACnB,YAAY;;CA2BtB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.23.1-next.16",
+  "version": "0.23.1-next.17",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,7 +25,7 @@
     "@rango-dev/queue-manager-core": "^0.26.0",
     "@rango-dev/queue-manager-rango-preset": "^0.28.1-next.3",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/ui": "^0.29.1-next.11",
+    "@rango-dev/ui": "^0.29.1-next.13",
     "@rango-dev/wallets-react": "^0.14.1-next.1",
     "@rango-dev/wallets-shared": "^0.28.1-next.1",
     "bignumber.js": "^9.1.1",
@@ -48,4 +48,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/Quote/Quote.styles.ts

@@ -55,19 +55,6 @@ export const QuoteContainer = styled(Collapsible.Root, {
         backgroundColor: '$$color',
       },
     },
-    {
-      listItem: true,
-      selected: false,
-      css: {
-        cursor: 'pointer',
-        '&:hover': {
-          backgroundColor: '$neutral300',
-          [`.${darkTheme} &`]: {
-            backgroundColor: '$neutral400',
-          },
-        },
-      },
-    },
   ],
 });
 
@@ -107,6 +94,18 @@ export const SummaryContainer = styled('div', {
         },
         backgroundColor: '$$color',
         '&:hover': {
+          '& .quote_container': {
+            '& button': {
+              backgroundColor: '$neutral500',
+              [`.${darkTheme} &`]: {
+                backgroundColor: '$neutral200',
+              },
+            },
+            backgroundColor: '$neutral500',
+            [`.${darkTheme} &`]: {
+              backgroundColor: '$neutral200',
+            },
+          },
           backgroundColor: '$neutral300',
           [`.${darkTheme} &`]: {
             backgroundColor: '$neutral400',
@@ -376,6 +375,6 @@ export const Line = styled('div', {
   borderTopColor: '$neutral',
   margin: '$5 0',
   [`.${darkTheme} &`]: {
-    borderTopColor: '$neutral400',
+    borderTopColor: '$neutral800',
   },
 });

package/src/components/Quote/Quote.tsx

@@ -438,6 +438,7 @@ export function Quote(props: QuoteProps) {
         selected={selected}
         listItem={type === 'list-item'}
         open={expanded}
+        className="quote_container"
         onOpenChange={setExpanded}>
         <QuoteTrigger
           type={type}

package/src/components/QuoteSkeleton/QuoteSkeleton.styles.ts

@@ -27,7 +27,7 @@ export const Steps = styled('div', {
 });
 
 export const StepSeparator = styled('div', {
-  borderLeft: '1px dashed black',
+  borderLeft: '1px dashed $foreground',
   minHeight: ' 0',
   margin: '0px 11.5px',
   alignSelf: 'stretch',

package/src/components/Quotes/SelectStrategy.tsx

@@ -1,5 +1,3 @@
-import type { PreferenceType } from 'rango-sdk';
-
 import { Select } from '@rango-dev/ui';
 import React from 'react';
 
@@ -16,17 +14,11 @@ export function SelectStrategy(props: { container: HTMLElement }) {
       <Select
         container={props.container}
         options={ROUTE_STRATEGY}
-        value={
-          ROUTE_STRATEGY.find(
-            (strategy) => strategy.value === sortStrategy
-          ) as {
-            value: PreferenceType;
-            label: string;
-          }
-        }
+        value={sortStrategy}
         handleItemClick={(item) => {
-          updateQuotePartialState('sortStrategy', item.value as PreferenceType);
+          updateQuotePartialState('sortStrategy', item.value);
         }}
+        variant="filled"
       />
     </SelectContainer>
   );

package/src/components/TokenList/TokenList.tsx

@@ -19,7 +19,7 @@ import React, { useEffect, useState } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
 import { useWalletsStore } from '../../store/wallets';
-import { generateRangeColors } from '../../utils/colors';
+import { generateShade, isBright } from '../../utils/colors';
 import { formatBalance } from '../../utils/wallets';
 
 import { LoadingTokenList } from './LoadingTokenList';
@@ -133,23 +133,24 @@ export function TokenList(props: PropTypes) {
           const blockchain = blockchains.find(
             (blockchain) => blockchain.name === token.blockchain
           );
-          const color = generateRangeColors(
-            token.symbol,
-            blockchain?.color || ''
+          const lightShade = generateShade(
+            blockchain?.color || '',
+            isBright(blockchain?.color || '') ? 5 : 125
           );
+          const darkShade = generateShade(blockchain?.color || '', -100);
 
           const customCssForTag = {
-            $$color: color[`${token.symbol}100`],
+            $$color: lightShade,
             [`.${darkTheme} &`]: {
-              $$color: color[`${token.symbol}900`],
+              $$color: darkShade,
             },
             backgroundColor: '$$color',
           };
 
           const customCssForTagTitle = {
-            $$color: color[`${token.symbol}700`],
+            $$color: darkShade,
             [`.${darkTheme} &`]: {
-              $$color: color[`${token.symbol}100`],
+              $$color: lightShade,
             },
             color: '$$color',
           };

package/src/hooks/useSwapInput.ts

@@ -46,7 +46,8 @@ export function useSwapInput({
   refetchQuote,
 }: UseSwapInputProps): UseSwapInput {
   const { fetch: fetchQuote, cancelFetch } = useFetchAllQuotes();
-  const { enableNewLiquiditySources, features } = useAppStore().config;
+  const { excludeLiquiditySources: configExcludeLiquiditySources, features } =
+    useAppStore().config;
   const connectedWallets = useWalletsStore.use.connectedWallets();
 
   const tokens = useAppStore().tokens();
@@ -223,7 +224,7 @@ export function useSwapInput({
     toToken?.blockchain,
     shouldSkipRequest,
     liquiditySources?.length,
-    enableNewLiquiditySources,
+    configExcludeLiquiditySources,
     disabledLiquiditySources.length,
     userSlippage,
     affiliateRef,

package/src/pages/ConfirmSwapPage.tsx

@@ -378,8 +378,6 @@ export function ConfirmSwapPage() {
           quote={selectedQuote}
           type="swap-preview"
           expanded={true}
-          selected
-          tagHidden
           error={confirmSwapResult.error}
           loading={fetchingConfirmationQuote}
           warning={confirmSwapResult.warnings?.quote ?? null}

package/src/store/slices/config.ts

@@ -6,7 +6,7 @@ export const DEFAULT_CONFIG: WidgetConfig = {
   apiKey: '',
   title: undefined,
   multiWallets: true,
-  enableNewLiquiditySources: true,
+  excludeLiquiditySources: true,
   customDestination: true,
 };
 
@@ -72,7 +72,7 @@ export const createConfigSlice: StateCreatorWithInitialData<
       const { config, campaignMode } = get();
       return campaignMode.liquiditySources?.length
         ? false
-        : !!config.enableNewLiquiditySources;
+        : !!config.excludeLiquiditySources;
     },
     isInCampaignMode: () => {
       const { campaignMode } = get();

package/src/store/slices/data.ts

@@ -177,12 +177,12 @@ export const createDataSlice: StateCreator<
     const liquiditySources =
       campaignModeLiquiditySource ?? config.liquiditySources;
 
-    const enableNewLiquiditySources = campaignModeLiquiditySource
+    const excludeLiquiditySources = campaignModeLiquiditySource
       ? false
-      : config.enableNewLiquiditySources;
+      : config.excludeLiquiditySources;
 
     /*
-     * If the enableNewLiquiditySources flag is set to true, we return all swappers that are not included in the config.
+     * If the excludeLiquiditySources flag is set to true, we return all swappers that are not included in the config.
      * Otherwise, we return all swappers that are included in the config.
      */
     const swappers = get()._swappers.filter((swapper) => {
@@ -191,7 +191,7 @@ export const createDataSlice: StateCreator<
       );
 
       const shouldExcludeLiquiditySources =
-        enableNewLiquiditySources ||
+        excludeLiquiditySources ||
         !liquiditySources ||
         liquiditySources.length === 0;
 

package/src/types/config.ts

@@ -171,8 +171,8 @@ export type Features = Partial<
  * that defines the various properties of the theme, such as colors, fonts, and others.
  * @property {boolean} externalWallets
  * If `externalWallets` is `true`, you should add `WidgetWallets` to your app.
- * @property {boolean} enableNewLiquiditySources - The `enableNewLiquiditySources` property is a boolean value that when you
- * set it to true, whenever a new liquidity source is added, it will be added to your list as well.
+ * @property {boolean} excludeLiquiditySources - The `excludeLiquiditySources` property is a boolean value that when you
+ * set it to true, the list of liquidity sources provided in `liquiditySources` will be excluded; otherwise, they will be included.
  * @property {Features} features - An optional object for configuring the visibility or enablement of various features.
  *   Keys include:
  *   - 'notification': Visibility state for the notification icon.
@@ -203,7 +203,7 @@ export type WidgetConfig = {
   language?: Language;
   theme?: WidgetTheme;
   externalWallets?: boolean;
-  enableNewLiquiditySources?: boolean;
+  excludeLiquiditySources?: boolean;
   features?: Features;
   variant?: WidgetVariant;
 };

package/src/utils/colors.ts

@@ -1,68 +1,113 @@
 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 function generateShades(
+  baseColor: string,
+  prefix: string,
+  reverse?: boolean
+): { [key: string]: string } {
+  const BASE_SHADE_INDEX = 100;
+  const NUMBER_OF_COLORS = 9;
+  const SHADING_INCREMENT_MAX = 10; // For bright colors
+  const SHADING_INCREMENT_MIN = 6; // For dark colors
 
-export const generateRangeColors = (name: string, color: string) => {
-  const NUMBER_OF_COLORS = 10;
-  const HALF_NUMBER_OF_COLORS = 5;
-  const COLOR_SUFFIX = 100;
-  const AMT = 25;
-
-  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)
-        ),
-      };
+  const HALF_NUMBER_OF_COLORS = 4;
+
+  const shadeIncrements: number[] = [];
+  let increment = 90;
+  for (let i = 0; i < NUMBER_OF_COLORS; i++) {
+    shadeIncrements.push(increment);
+    if (i + 1 === HALF_NUMBER_OF_COLORS) {
+      increment = 0;
+    } else {
+      increment -=
+        i >= HALF_NUMBER_OF_COLORS
+          ? SHADING_INCREMENT_MIN
+          : SHADING_INCREMENT_MAX;
     }
   }
 
-  return colors;
-};
+  // If 'reverse' is true, that means the color should be from dark to light
+  const decrementAmounts = reverse
+    ? shadeIncrements.slice().reverse()
+    : shadeIncrements;
+
+  const shades: { [key: string]: string } = {};
+
+  // Generate shades
+  for (let i = 0; i < NUMBER_OF_COLORS; i++) {
+    const shadeIndex = BASE_SHADE_INDEX + i * BASE_SHADE_INDEX;
+    const decrementAmount = decrementAmounts[i];
+
+    const shade: { [key: string]: string } = {
+      [`${prefix}${shadeIndex}`]: generateShade(baseColor, decrementAmount),
+    };
+    Object.assign(shades, shade);
+  }
+
+  return { ...shades, [prefix]: baseColor };
+}
+
+export function generateShade(
+  baseColor: string,
+  decrementAmount: number
+): string {
+  const [r, g, b] = convertToRGB(baseColor);
+  return `#${clamp(r + decrementAmount)}${clamp(g + decrementAmount)}${clamp(
+    b + decrementAmount
+  )}`;
+}
+
+export function convertToRGB(baseColor: string): number[] {
+  const COLOR_SLICE_START = 1;
+  const COLOR_SLICE_END = 3;
+  const BASE_COLOR_LENGTH = 7;
+
+  // Convert the base color to RGB components
+  const r: number = parseInt(
+    baseColor.slice(COLOR_SLICE_START, COLOR_SLICE_END),
+    16
+  );
+  const g: number = parseInt(
+    baseColor.slice(COLOR_SLICE_END, COLOR_SLICE_END + 2),
+    16
+  );
+  const b: number = parseInt(
+    baseColor.slice(COLOR_SLICE_END + 2, BASE_COLOR_LENGTH),
+    16
+  );
+
+  return [r, g, b];
+}
+
+// Function to clamp color component to valid range [0, 255] and convert to hex
+function clamp(color: number): string {
+  const MAX_COLOR_VALUE = 255;
+  const HEX_BASE = 16;
+  const HEX_LENGTH = -2;
+  return (
+    '0' + Math.max(0, Math.min(MAX_COLOR_VALUE, color)).toString(HEX_BASE)
+  )
+    .slice(HEX_LENGTH)
+    .toUpperCase();
+}
+
+export function isBright(baseColor: string) {
+  const BRIGHTNESS_THRESHOLD = 188;
+  const RED_COEFFICIENT = 299;
+  const GREEN_COEFFICIENT = 587;
+  const BLUE_COEFFICIENT = 114;
+  const BRIGHTNESS_DIVISOR = 1000;
+
+  const [r, g, b] = convertToRGB(baseColor);
+  const brightness =
+    (r * RED_COEFFICIENT + g * GREEN_COEFFICIENT + b * BLUE_COEFFICIENT) /
+    BRIGHTNESS_DIVISOR;
+  if (brightness > BRIGHTNESS_THRESHOLD) {
+    return true;
+  }
+  return false;
+}
+
 export const generateColors = (
   mainColors: { [x: string]: string },
   reverseNeutralRange: boolean,
@@ -83,25 +128,11 @@ export const generateColors = (
           ...listOfColors,
           [colorKey]: color,
         };
-      } else if (colorKey === 'neutral' && reverseNeutralRange) {
-        const range = generateRangeColors(colorKey, color);
-        listOfColors = {
-          ...listOfColors,
-          // Reverse the neutral shade
-          [`${colorKey}100`]: range[`${colorKey}900`],
-          [`${colorKey}200`]: range[`${colorKey}800`],
-          [`${colorKey}300`]: range[`${colorKey}700`],
-          [`${colorKey}400`]: range[`${colorKey}600`],
-          [`${colorKey}500`]: range[`${colorKey}500`],
-          [`${colorKey}600`]: range[`${colorKey}400`],
-          [`${colorKey}700`]: range[`${colorKey}300`],
-          [`${colorKey}800`]: range[`${colorKey}200`],
-          [`${colorKey}900`]: range[`${colorKey}100`],
-        };
       } else {
+        const reverse = colorKey === 'neutral' && reverseNeutralRange;
         listOfColors = {
           ...listOfColors,
-          ...generateRangeColors(colorKey, color),
+          ...generateShades(color, colorKey, reverse),
         };
       }
     }