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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.28.3-next.5",
+  "version": "0.28.3-next.7",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -30,7 +30,7 @@
     "@rango-dev/queue-manager-rango-preset": "^0.33.3-next.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/ui": "^0.34.1-next.5",
     "@rango-dev/wallets-react": "^0.19.1-next.1",
     "@rango-dev/wallets-shared": "^0.33.1-next.1",
     "bignumber.js": "^9.1.1",

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -18,7 +18,7 @@ import {
   Typography,
   WalletIcon,
 } from '@rango-dev/ui';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { WIDGET_UI_ID } from '../../constants';
@@ -59,6 +59,7 @@ const NUMBER_OF_WALLETS_TO_DISPLAY = 2;
 export function ConfirmWalletsModal(props: PropTypes) {
   //TODO: move component's logics to a custom hook
   const { open, onClose, onCancel, onCheckBalance, loading } = props;
+  const navigate = useNavigate();
   const config = useAppStore().config;
 
   const customDestinationInputRef = useRef<HTMLInputElement | null>(null);
@@ -104,16 +105,34 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const isWalletRequiredFor = (blockchain: string) =>
     requiredWallets.includes(blockchain);
 
-  const getInitialSelectableWallets = () =>
-    connectedWallets.filter((connectedWallet) => {
-      return (
-        connectedWallet.selected && quoteWallets.includes(connectedWallet.chain)
-      );
-    });
+  const getInitialSelectableWallets = useCallback(
+    () =>
+      connectedWallets.filter((connectedWallet) => {
+        return (
+          connectedWallet.selected &&
+          quoteWallets.includes(connectedWallet.chain)
+        );
+      }),
+    [connectedWallets.length, quoteWallets.length]
+  );
 
   const [selectableWallets, setSelectableWallets] = useState<ConnectedWallet[]>(
     getInitialSelectableWallets()
   );
+  const [nextSelectedWallets, setNextSelectedWallets] = useState<
+    {
+      blockchain: string;
+      walletType: string;
+    }[]
+  >([]);
+
+  const addNextSelectedWallets = (blockchain: string, walletType: string) =>
+    setNextSelectedWallets((prevState) =>
+      prevState.concat({
+        blockchain,
+        walletType,
+      })
+    );
 
   const isInsufficientBalanceModalOpen = balanceWarnings.length > 0;
 
@@ -206,7 +225,11 @@ export function ConfirmWalletsModal(props: PropTypes) {
     }
 
     onCancel();
-    if (wallet.chain === lastStepToBlockchain?.name && showCustomDestination) {
+    if (
+      wallet.chain === lastStepToBlockchain?.name &&
+      showCustomDestination &&
+      !isWalletRequiredFor(lastStepToBlockchain.name)
+    ) {
       setShowCustomDestination(false);
       setCustomDestination(null);
     }
@@ -273,10 +296,30 @@ export function ConfirmWalletsModal(props: PropTypes) {
   };
 
   useEffect(() => {
-    setSelectableWallets((selectableWallets) =>
-      selectableWallets.concat(
+    setSelectableWallets((selectableWallets) => {
+      let nextState: typeof selectableWallets = [];
+
+      //if wallet disconnected we should unselect the wallet from the list
+      selectableWallets.forEach((selectableWallet) => {
+        const walletDisconnected = !connectedWallets.some(
+          (connectedWallet) =>
+            connectedWallet.chain === selectableWallet.chain &&
+            connectedWallet.walletType === selectableWallet.walletType &&
+            connectedWallet.address === selectableWallet.address
+        );
+        if (!walletDisconnected) {
+          nextState.push(selectableWallet);
+        }
+      });
+
+      /**
+       * We confirm if a newly connected wallet for a blockchain is marked as selected in the store,
+       * but there are no selected wallets for that blockchain in our list.
+       * If this condition is met, we include the wallet in our list as selected.
+       */
+      nextState = nextState.concat(
         connectedWallets.filter((connectedWallet) => {
-          const anyWalletSelected = !!selectableWallets.find(
+          const anyWalletSelected = !!nextState.find(
             (selectableWallet) =>
               selectableWallet.chain === connectedWallet.chain
           );
@@ -287,16 +330,35 @@ export function ConfirmWalletsModal(props: PropTypes) {
             quoteWallets.includes(connectedWallet.chain)
           );
         })
-      )
-    );
-  }, [connectedWallets.length]);
+      );
+      return nextState;
+    });
+  }, [connectedWallets.length, quoteWallets.length]);
+
+  useEffect(() => {
+    const nextState: typeof nextSelectedWallets = [];
+
+    if (nextSelectedWallets.length > 0) {
+      nextSelectedWallets.forEach((selectedWallet) => {
+        const wallet = connectedWallets.find(
+          (wallet) =>
+            wallet.chain === selectedWallet.blockchain &&
+            wallet.walletType === selectedWallet.walletType
+        );
+        if (wallet) {
+          onChange(wallet);
+        } else {
+          nextState.push(selectedWallet);
+        }
+      });
+      setNextSelectedWallets(nextState);
+    }
+  }, [connectedWallets.length, nextSelectedWallets.length]);
 
   const modalContainer = document.getElementById(
     WIDGET_UI_ID.SWAP_BOX_ID
   ) as HTMLDivElement;
 
-  const navigate = useNavigate();
-
   return (
     <WatermarkedModal
       open={open}
@@ -381,7 +443,10 @@ export function ConfirmWalletsModal(props: PropTypes) {
               chain={showMoreWalletFor}
               isSelected={isSelected}
               selectWallet={onChange}
-              onShowMore={setShowMoreWalletFor.bind(null, showMoreWalletFor)}
+              onShowMore={() => setShowMoreWalletFor(showMoreWalletFor)}
+              onConnect={(walletType) => {
+                addNextSelectedWallets(showMoreWalletFor, walletType);
+              }}
             />
           </div>
         </WalletsContainer>
@@ -442,6 +507,9 @@ export function ConfirmWalletsModal(props: PropTypes) {
                       onShowMore={() =>
                         setShowMoreWalletFor(blockchain?.name ?? '')
                       }
+                      onConnect={(walletType) => {
+                        addNextSelectedWallets(requiredWallet, walletType);
+                      }}
                     />
                   </ListContainer>
                   {!isLastWallet && <Divider size={32} />}
@@ -501,12 +569,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                           suffix={renderCustomDestinationSuffix()}
                           onChange={(e) => {
                             const value = e.target.value;
-                            if (!value.length) {
-                              setShowCustomDestination(false);
-                              setCustomDestination(null);
-                            } else {
-                              setCustomDestination(value.length ? value : null);
-                            }
+                            setCustomDestination(value);
                           }}
                           {...(!customDestination && { autoFocus: true })}
                         />

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -50,7 +50,8 @@ interface WalletNamespacesModalState {
 
 const ACCOUNT_ADDRESS_MAX_CHARACTERS = 7;
 export function WalletList(props: PropTypes) {
-  const { chain, isSelected, selectWallet, limit, onShowMore } = props;
+  const { chain, isSelected, selectWallet, limit, onShowMore, onConnect } =
+    props;
   const isActiveTab = useUiStore.use.isActiveTab();
 
   const connectedWallets = useWalletsStore.use.connectedWallets();
@@ -80,7 +81,8 @@ export function WalletList(props: PropTypes) {
         setOpenWalletStateModal(type);
       }, TIME_TO_IGNORE_MODAL);
     },
-    onConnect: () => {
+    onConnect: (type) => {
+      onConnect?.(type);
       if (modalTimerId) {
         clearTimeout(modalTimerId);
       }

package/src/components/ConfirmWalletsModal/WalletList.type.ts

@@ -6,4 +6,5 @@ export type PropTypes = {
   selectWallet: (wallet: Wallet) => void;
   limit?: number;
   onShowMore: () => void;
+  onConnect?: (walletType: string) => void;
 };

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/store/wallets.ts

@@ -65,10 +65,15 @@ export const useWalletsStore = createSelectors(
             .filter((wallet) => wallet.walletType !== accounts[0].walletType)
             .concat(
               accounts.map((account) => {
-                const shouldMarkWalletAsSelected = !state.connectedWallets.find(
+                const shouldMarkWalletAsSelected = !state.connectedWallets.some(
                   (connectedWallet) =>
                     connectedWallet.chain === account.chain &&
-                    connectedWallet.selected
+                    connectedWallet.selected &&
+                    /**
+                     * Sometimes, the connect function can be called multiple times for a particular wallet type when using the auto-connect feature.
+                     * This check is there to make sure the chosen wallet doesn't end up unselected.
+                     */
+                    connectedWallet.walletType !== account.walletType
                 );
                 return {
                   balances: [],

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 };
+}