@rango-dev/widget-embedded 0.23.1-next.2 → 0.23.1-next.21

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),
         };
       }
     }

package/src/utils/configs.ts

@@ -1,4 +1,4 @@
-import type { Tokens } from '../types';
+import type { Tokens, WidgetVariant } from '../types';
 import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
 
 import { RANGO_PUBLIC_API_KEY } from '../constants';
@@ -79,3 +79,14 @@ export const isBlockchainExcludedInConfig = (
     !blockchainsConfig.includes(blockchain.name)
   );
 };
+
+export const isVariantExpandable = (
+  isLargeScreen: boolean,
+  isExtraLargeScreen: boolean,
+  variant?: WidgetVariant
+) => {
+  return (
+    (variant === 'expanded' && (isLargeScreen || isExtraLargeScreen)) ||
+    (variant === 'full-expanded' && isExtraLargeScreen)
+  );
+};

package/src/utils/swap.ts

@@ -478,6 +478,7 @@ export function createQuoteRequestBody(params: {
   affiliatePercent: number | null;
   affiliateWallets: { [key: string]: string } | null;
   destination?: string;
+  enableCentralizedSwappers?: boolean;
 }): BestRouteRequest {
   const {
     fromToken,
@@ -493,6 +494,7 @@ export function createQuoteRequestBody(params: {
     affiliatePercent,
     affiliateWallets,
     destination,
+    enableCentralizedSwappers,
   } = params;
   const selectedWalletsMap = selectedWallets?.reduce(
     (
@@ -544,6 +546,7 @@ export function createQuoteRequestBody(params: {
       ),
       swappersGroupsExclude: false,
     }),
+    enableCentralizedSwappers,
   };
   return requestBody;
 }
@@ -775,3 +778,11 @@ export function confirmSwapDisabled(
       !isValidAddress(lastStepToBlockchain, customDestination))
   );
 }
+
+export function isTokensIdentical(tokenA: Token, tokenB: Token) {
+  return (
+    tokenA.blockchain === tokenB.blockchain &&
+    tokenA.symbol === tokenB.symbol &&
+    tokenA.address === tokenB.address
+  );
+}

package/src/utils/ui.ts

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { WidgetTheme } from '../types';
 import type { createTheme } from '@rango-dev/ui';
-import type React from 'react';
 
 import {
   theme as baseThemeTokens,
   darkColors as defaultDarkColors,
 } from '@rango-dev/ui';
+import React from 'react';
 
 import { generateColors } from '../utils/colors';
 import { toHash } from '../utils/hash';
@@ -73,18 +73,20 @@ export function customizedThemeTokens(
 }
 
 export function joinList(
-  list: React.JSX.Element[],
+  list: { element: React.JSX.Element; key: string }[],
   divider: React.JSX.Element
 ) {
   if (list.length <= 1) {
-    return list;
+    return list.map(({ element, key }) => React.cloneElement(element, { key }));
   }
 
   const output: React.JSX.Element[] = [];
   list.forEach((item, index) => {
-    output.push(item);
+    const { element, key } = item;
+    output.push(React.cloneElement(element, { key }));
     if (index < list.length - 1) {
-      output.push(divider);
+      const key = `divider-${index}`;
+      output.push(React.cloneElement(divider, { key }));
     }
   });
 

package/dist/hooks/useMobileDetect.d.ts

@@ -1,3 +0,0 @@
-declare const useMobileDetect: () => boolean;
-export default useMobileDetect;
-//# sourceMappingURL=useMobileDetect.d.ts.map

package/dist/hooks/useMobileDetect.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMobileDetect.d.ts","sourceRoot":"","sources":["../../src/hooks/useMobileDetect.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,eAAe,eAcpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/pages/ThemePage.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare function ThemePage(): React.JSX.Element;
-//# sourceMappingURL=ThemePage.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ThemePage.d.ts","sourceRoot":"","sources":["../../src/pages/ThemePage.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,wBAAgB,SAAS,sBAiExB"}

package/src/hooks/useMobileDetect.ts

@@ -1,21 +0,0 @@
-import { useEffect, useState } from 'react';
-
-const MIN_WIDTH_WINDOW = 768;
-
-const useMobileDetect = () => {
-  const [isMobile, setIsMobile] = useState(false);
-
-  const handleResize = () => {
-    setIsMobile(window.innerWidth < MIN_WIDTH_WINDOW);
-  };
-
-  useEffect(() => {
-    handleResize(); // Initial check
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  return isMobile;
-};
-
-export default useMobileDetect;

package/src/pages/ThemePage.tsx

@@ -1,90 +0,0 @@
-import { i18n } from '@lingui/core';
-import {
-  AutoThemeIcon,
-  DarkModeIcon,
-  LightModeIcon,
-  List,
-  ListItemButton,
-  Radio,
-  RadioRoot,
-  Typography,
-} from '@rango-dev/ui';
-import React from 'react';
-
-import { Layout, PageContainer } from '../components/Layout';
-import { useAppStore } from '../store/AppStore';
-
-type Theme = 'dark' | 'light' | 'auto';
-
-enum Mode {
-  DARK = 'dark',
-  LIGHT = 'light',
-  AUTO = 'auto',
-}
-
-export function ThemePage() {
-  const { setTheme, theme } = useAppStore();
-
-  const themesList = [
-    {
-      id: Mode.LIGHT,
-      value: Mode.LIGHT,
-      title: (
-        <Typography variant="title" size="xmedium">
-          {i18n.t('Light')}
-        </Typography>
-      ),
-      onClick: () => setTheme(Mode.LIGHT as Theme),
-      start: <LightModeIcon color="gray" />,
-      end: <Radio value={Mode.LIGHT} />,
-    },
-    {
-      id: Mode.DARK,
-      value: Mode.DARK,
-      title: (
-        <Typography variant="title" size="xmedium">
-          {i18n.t('Dark')}
-        </Typography>
-      ),
-      onClick: () => setTheme(Mode.DARK as Theme),
-      start: <DarkModeIcon color="gray" />,
-      end: <Radio value={Mode.DARK} />,
-    },
-    {
-      id: Mode.AUTO,
-      value: Mode.AUTO,
-      title: (
-        <Typography variant="title" size="xmedium">
-          {i18n.t('Auto')}
-        </Typography>
-      ),
-      onClick: () => setTheme(Mode.AUTO as Theme),
-      start: <AutoThemeIcon color="gray" />,
-      end: <Radio value={Mode.AUTO} />,
-    },
-  ];
-
-  return (
-    <Layout
-      header={{
-        title: i18n.t('Theme'),
-      }}>
-      <PageContainer>
-        <RadioRoot
-          onValueChange={(value) => setTheme(value as Theme)}
-          value={theme}>
-          <List
-            type={
-              <ListItemButton
-                title={i18n.t('Theme')}
-                id="_"
-                onClick={() => console.log()}
-              />
-            }
-            items={themesList}
-          />
-        </RadioRoot>
-      </PageContainer>
-    </Layout>
-  );
-}