@rango-dev/widget-embedded 0.28.3-next.6 → 0.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.28.3-next.6",
+  "version": "0.29.0",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -24,15 +24,15 @@
   "dependencies": {
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
-    "@rango-dev/logging-core": "^0.3.1-next.1",
-    "@rango-dev/provider-all": "^0.33.3-next.2",
+    "@rango-dev/logging-core": "^0.4.0",
+    "@rango-dev/provider-all": "^0.34.0",
     "@rango-dev/queue-manager-core": "^0.26.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.33.3-next.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.34.0",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/signer-solana": "^0.28.1-next.2",
-    "@rango-dev/ui": "^0.34.1-next.4",
-    "@rango-dev/wallets-react": "^0.19.1-next.1",
-    "@rango-dev/wallets-shared": "^0.33.1-next.1",
+    "@rango-dev/signer-solana": "^0.29.0",
+    "@rango-dev/ui": "^0.35.0",
+    "@rango-dev/wallets-react": "^0.20.0",
+    "@rango-dev/wallets-shared": "^0.34.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
@@ -53,4 +53,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/HeaderButtons/HeaderButtons.styles.ts

@@ -17,7 +17,7 @@ export const ConnectedIcon = styled('div', {
   position: 'absolute',
   background: '$secondary500',
   [`.${darkTheme} &`]: {
-    $$color: '$colors$secondary400',
+    $$color: '$colors$secondary250',
   },
   width: '$6',
   height: '$6',

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

@@ -48,7 +48,7 @@ export const QuoteContainer = styled(Collapsible.Root, {
       listItem: false,
       selected: true,
       css: {
-        $$color: '$colors$info300',
+        $$color: '$colors$secondary200',
         [`.${darkTheme} &`]: {
           $$color: '$colors$secondary800',
         },
@@ -63,13 +63,13 @@ export const stepsDetailsStyles = css({
 });
 export const AllRoutesButton = styled(Button, {
   backgroundColor: 'transparent',
-  border: '1px solid $secondary600',
+  border: '1px solid $secondary550',
   [`.${darkTheme} &`]: {
     border: '1px solid $secondary',
   },
   transition: 'background-color 0.3s ease',
   '&:hover': {
-    backgroundColor: '$secondary600',
+    backgroundColor: '$secondary550',
     [`.${darkTheme} &`]: {
       backgroundColor: '$secondary',
     },
@@ -149,7 +149,7 @@ export const SummaryContainer = styled('div', {
       css: {
         $$color: '$colors$secondary100',
         [`.${darkTheme} &`]: {
-          $$color: '$colors$secondary600',
+          $$color: '$colors$secondary550',
         },
         backgroundColor: '$$color',
         '&:hover': {
@@ -262,7 +262,7 @@ export const Trigger = styled(Collapsible.Trigger, {
       listItem: false,
       selected: true,
       css: {
-        $$color: '$colors$info300',
+        $$color: '$colors$secondary200',
         [`.${darkTheme} &`]: {
           $$color: '$colors$secondary800',
         },

package/src/components/TokenList/TokenList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { PropTypes, RenderDescProps } from './TokenList.types';
-import type { Token } from 'rango-sdk';
+import type { BlockchainMeta, Token } from 'rango-sdk';
 
 import { i18n } from '@lingui/core';
 import {
@@ -19,7 +19,7 @@ import React, { useEffect, useState } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
 import { useWalletsStore } from '../../store/wallets';
-import { generateShade, isBright } from '../../utils/colors';
+import { createTintsAndShades } from '../../utils/colors';
 import { formatBalance } from '../../utils/wallets';
 
 import { LoadingTokenList } from './LoadingTokenList';
@@ -133,25 +133,20 @@ export function TokenList(props: PropTypes) {
           const address = token.address || '';
           const blockchain = blockchains.find(
             (blockchain) => blockchain.name === token.blockchain
-          );
-          const lightShade = generateShade(
-            blockchain?.color || '',
-            isBright(blockchain?.color || '') ? 5 : 125
-          );
-          const darkShade = generateShade(blockchain?.color || '', -100);
-
+          ) as BlockchainMeta;
+          const colors = createTintsAndShades(blockchain.color, 'main');
           const customCssForTag = {
-            $$color: lightShade,
+            $$color: colors.main250,
             [`.${darkTheme} &`]: {
-              $$color: darkShade,
+              $$color: colors.main850,
             },
             backgroundColor: '$$color',
           };
 
           const customCssForTagTitle = {
-            $$color: darkShade,
+            $$color: colors.main600,
             [`.${darkTheme} &`]: {
-              $$color: lightShade,
+              $$color: colors.main200,
             },
             color: '$$color',
           };

package/src/types/config.ts

@@ -14,14 +14,18 @@ export type WidgetVariant = 'default' | 'expanded' | 'full-expanded';
  *
  */
 export type WidgetColorsKeys = keyof WidgetColors;
-export type WidgetColors = {
+
+export type ThemeColors = {
+  [key in string]?: string;
+};
+
+export interface WidgetColors extends ThemeColors {
   background?: string;
   foreground?: string;
   neutral?: string;
   primary?: string;
   secondary?: string;
-  info?: string;
-};
+}
 
 /**
  * The `WidgetTheme` defines the properties of a widget theme, including mode, font family, colors, border

package/src/utils/colors.ts

@@ -1,141 +1,184 @@
-import type { WidgetColors, WidgetColorsKeys } from '../types';
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+// Types
+import type { ThemeColors, WidgetColors, WidgetColorsKeys } from '../types';
+
+type RGB = {
+  red: number;
+  green: number;
+  blue: number;
+};
 
-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
-
-  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;
-    }
-  }
+type ShadeOrTintFunction = (rgb: RGB, step: number) => RGB;
 
-  // If 'reverse' is true, that means the color should be from dark to light
-  const decrementAmounts = reverse
-    ? shadeIncrements.slice().reverse()
-    : shadeIncrements;
+const HEX_BASE = 16;
+const MAX_COLOR_VALUE = 255;
+const PERCENT = 0.11;
 
-  const shades: { [key: string]: string } = {};
+// Utility Functions
 
-  // Generate shades
-  for (let i = 0; i < NUMBER_OF_COLORS; i++) {
-    const shadeIndex = BASE_SHADE_INDEX + i * BASE_SHADE_INDEX;
-    const decrementAmount = decrementAmounts[i];
+function expandShortHexColor(hexColor: string) {
+  // Remove '#' if it exists
+  if (hexColor.startsWith('#')) {
+    hexColor = hexColor.slice(1);
+  }
+
+  // Check if the hexColor has a length of 3
+  if (hexColor.length === 3) {
+    // Convert the string to an array of characters
+    const characters = hexColor.split('');
 
-    const shade: { [key: string]: string } = {
-      [`${prefix}${shadeIndex}`]: generateShade(baseColor, decrementAmount),
-    };
-    Object.assign(shades, shade);
+    // Duplicate each character and combine them into a single string
+    const expandedHex = characters.reduce(function (acc, char) {
+      return acc + char + char;
+    }, '');
+
+    // Return the resulting 6-character hex color
+    return `#${expandedHex}`;
   }
 
-  return { ...shades, [prefix]: baseColor };
+  // Return the original hexColor if it's not 3 characters
+  return `#${hexColor}`;
 }
 
-export function generateShade(
-  baseColor: string,
-  decrementAmount: number
-): string {
-  const [r, g, b] = convertToRGB(baseColor);
-  return `#${clamp(r + decrementAmount)}${clamp(g + decrementAmount)}${clamp(
-    b + decrementAmount
-  )}`;
+/*
+ * We letting users to override some specific colors (e.g. `primary550`, `secondary100`).
+ * So we are generating a range of colors if `primary` (or other keys) has passed but if user is passing a specific color,
+ * we will override the user color to generated range.
+ */
+function isOverridingColor(colorKey: string): boolean {
+  return /[0-9]+$/.test(colorKey);
 }
 
-export function convertToRGB(baseColor: string): number[] {
-  const COLOR_SLICE_START = 1;
-  const COLOR_SLICE_END = 3;
-  const BASE_COLOR_LENGTH = 7;
+// pad a hexadecimal string with zeros if it needs it
+function pad(number: string, length: number) {
+  return number.padStart(length, '0');
+}
 
-  // 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
+// Convert an integer to a 2-character hex string
+function intToHex(value: number) {
+  const clampedValue = Math.min(
+    Math.max(Math.round(value), 0),
+    MAX_COLOR_VALUE
   );
+  return pad(clampedValue.toString(HEX_BASE), 2);
+}
+
+// convert one of our rgb color objects to a full hex color string
+function rgbToHex(rgb: RGB) {
+  return `#${intToHex(rgb.red)}${intToHex(rgb.green)}${intToHex(rgb.blue)}`;
+}
+
+// Convert a hex color string to an RGB object
+function hexToRGB(hex: string): RGB {
+  const red = parseInt(hex.slice(1, 3), HEX_BASE);
+  const green = parseInt(hex.slice(3, 5), HEX_BASE);
+  const blue = parseInt(hex.slice(5, 7), HEX_BASE);
+
+  return { red, green, blue };
+}
 
-  return [r, g, b];
+// Generate a shade of a given RGB color
+function generateShade(rgb: RGB, step: number): RGB {
+  const factor = 1 - PERCENT * step;
+  return {
+    red: rgb.red * factor,
+    green: rgb.green * factor,
+    blue: rgb.blue * factor,
+  };
 }
 
-// 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();
+// Generate a tint of a given RGB color
+function generateTint(rgb: RGB, step: number): RGB {
+  const factor = PERCENT * step;
+  return {
+    red: rgb.red + (MAX_COLOR_VALUE - rgb.red) * factor,
+    green: rgb.green + (MAX_COLOR_VALUE - rgb.green) * factor,
+    blue: rgb.blue + (MAX_COLOR_VALUE - rgb.blue) * factor,
+  };
 }
 
-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;
+// Main Functions
+
+// Calculate an array of shades from a hex color string
+export function calculateShades(hex: string): string[] {
+  return calculateColors(hex, generateShade);
+}
+
+// Calculate an array of tints from a hex color string
+export function calculateTints(hex: string): string[] {
+  return calculateColors(hex, generateTint);
+}
+
+// General function to calculate shades or tints
+function calculateColors(
+  hex: string,
+  generateColor: ShadeOrTintFunction
+): string[] {
+  const rgb = hexToRGB(hex);
+  const colors: string[] = [];
+  for (let i = 1; i < 9; i++) {
+    colors.push(rgbToHex(generateColor(rgb, i)));
   }
-  return false;
+  return colors;
 }
 
-export const generateColors = (
-  mainColors: { [x: string]: string },
-  reverseNeutralRange: boolean,
-  colors?: WidgetColors
-) => {
-  if (!colors || !Object.entries(colors).length) {
-    return {};
+// Create tints and shades for a given color
+export function createTintsAndShades(
+  hex: string,
+  colorKey: string,
+  isReversed?: boolean
+): { [key: string]: string } {
+  const BASE_INDEX = 100;
+  const STEP = 50;
+
+  const tints = calculateTints(hex).reverse().concat(hex);
+  const shades = calculateShades(hex);
+  const combinedColors = tints.concat(shades);
+
+  const colorMap: { [key: string]: string } = {};
+  const length = combinedColors.length;
+
+  for (let i = 0; i < length; i++) {
+    const index = BASE_INDEX + (isReversed ? length - 1 - i : i) * STEP;
+    colorMap[`${colorKey}${index}`] = combinedColors[i];
   }
-  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 {
-        const reverse = colorKey === 'neutral' && reverseNeutralRange;
-        listOfColors = {
-          ...listOfColors,
-          ...generateShades(color, colorKey, reverse),
-        };
-      }
+
+  return colorMap;
+}
+
+// Generate a color palette based on base colors and "Expand Colors"
+export function expandToGenerateThemeColors(
+  baseColors: ThemeColors,
+  expandColors: WidgetColors,
+  options?: { reverseNeutralRange?: boolean }
+): ThemeColors {
+  const output = { ...baseColors };
+
+  for (const colorKey in expandColors) {
+    const expandColor = expandColors[colorKey as WidgetColorsKeys] as string;
+    const isNeutralReversed =
+      colorKey === 'neutral' && !!options?.reverseNeutralRange;
+    /*
+     *Most of the colors are range but there are some colors that should be a single value e.g.
+     *{
+     *  // single value
+     *   background: "#fff",
+     *   // range
+     *   primary: '#1C3CF1',
+     *    primary500: '#1C3CF1',
+     *    primary550: '#0B27C4',
+     *}
+     */
+    const isSingleColor = ['background', 'foreground'].includes(colorKey);
+
+    if (!isSingleColor && !isOverridingColor(colorKey)) {
+      const expandedHexColor = expandShortHexColor(expandColor);
+      Object.assign(
+        output,
+        createTintsAndShades(expandedHexColor, colorKey, isNeutralReversed)
+      );
     }
   }
-  return changeColors ? listOfColors : {};
-};
+
+  return { ...output, ...expandColors };
+}

package/src/utils/ui.ts

@@ -8,14 +8,15 @@ import {
 } from '@rango-dev/ui';
 import React from 'react';
 
-import { generateColors } from '../utils/colors';
+import { expandToGenerateThemeColors } from '../utils/colors';
 import { toHash } from '../utils/hash';
 
 import { THEME_CLASS_NAME_PREFIX } from './configs';
 
+type Tokens = Parameters<typeof createTheme>[0];
 interface CustomizedThemeValues {
   id: string;
-  tokens: Parameters<typeof createTheme>[0];
+  tokens: Tokens;
 }
 
 interface CustomizedTheme {
@@ -27,48 +28,42 @@ export function customizedThemeTokens(
   colors: WidgetTheme['colors']
 ): CustomizedTheme {
   const baseColors = baseThemeTokens.colors;
+  const baseDarkColors = {
+    ...baseColors,
+    ...defaultDarkColors,
+  };
+  let lightTheme: CustomizedTheme['light'] = undefined;
+  let darkTheme: CustomizedTheme['dark'] = undefined;
 
-  const darkColorsWithDefaults = generateColors(
-    {
-      ...baseColors,
-      ...defaultDarkColors,
-    },
-    true,
-    colors?.dark
-  );
-  const lightColorsWithDefaults = generateColors(
-    baseColors,
-    false,
-    colors?.light
-  );
-  const hasDefaultDarkColors = Object.keys(darkColorsWithDefaults).length > 0;
-  const hasDefaultLightColors = Object.keys(lightColorsWithDefaults).length > 0;
-
-  let light: CustomizedTheme['light'] = undefined;
-  let dark: CustomizedTheme['dark'] = undefined;
-
-  if (hasDefaultLightColors) {
-    const tokens = { colors: lightColorsWithDefaults };
+  if (colors?.light) {
+    const lightColors = expandToGenerateThemeColors(baseColors, colors.light);
+    const tokens = { colors: lightColors };
     const id = `${THEME_CLASS_NAME_PREFIX}-light-${toHash(tokens)}`;
-    light = {
+    lightTheme = {
       id,
-      tokens,
+      tokens: tokens as Tokens,
     };
   }
-  if (hasDefaultDarkColors) {
-    const tokens = {
-      colors: darkColorsWithDefaults,
-    };
+
+  if (colors?.dark) {
+    const darkColors = expandToGenerateThemeColors(
+      baseDarkColors,
+      colors.dark,
+      {
+        reverseNeutralRange: true,
+      }
+    );
+    const tokens = { colors: darkColors };
     const id = `${THEME_CLASS_NAME_PREFIX}-dark-${toHash(tokens)}`;
-    dark = {
+    darkTheme = {
       id,
-      tokens,
+      tokens: tokens as Tokens,
     };
   }
 
   return {
-    light,
-    dark,
+    light: lightTheme,
+    dark: darkTheme,
   };
 }