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

package/src/pages/LanguagePage.tsx

@@ -6,57 +6,34 @@ import {
   RadioRoot,
   Typography,
 } from '@rango-dev/ui';
-import React, { useState } from 'react';
+import React from 'react';
 
 import { Layout } from '../components/Layout';
 import { SettingsContainer } from '../components/SettingsContainer';
 import { navigationRoutes } from '../constants/navigationRoutes';
+import { useLanguage } from '../hooks/useLanguage';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 
-enum Languages {
-  ENGLISH = 'english',
-  FRENCH = 'french',
-  SPANISH = 'spanish',
-}
 export function LanguagePage() {
   const { navigateBackFrom } = useNavigateBack();
-  const [language, setLanguage] = useState(Languages.ENGLISH);
 
-  const languageList = [
-    {
-      id: Languages.ENGLISH,
-      value: Languages.ENGLISH,
-      title: (
-        <Typography variant="title" size="xmedium">
-          {i18n.t('English')}
-        </Typography>
-      ),
-      onClick: () => setLanguage(Languages.ENGLISH),
-      end: <Radio value={Languages.ENGLISH} />,
-    },
-    {
-      id: Languages.FRENCH,
-      value: Languages.FRENCH,
-      title: (
-        <Typography variant="title" size="xmedium">
-          {i18n.t('French')}
-        </Typography>
-      ),
-      onClick: () => setLanguage(Languages.FRENCH),
-      end: <Radio value={Languages.FRENCH} />,
-    },
-    {
-      id: Languages.SPANISH,
-      value: Languages.SPANISH,
+  const { activeLanguage, changeLanguage, languages } = useLanguage();
+
+  const languageList = languages.map((languageItem) => {
+    const { local, label, SVGFlag } = languageItem;
+    return {
+      id: local,
+      value: local,
       title: (
         <Typography variant="title" size="xmedium">
-          {i18n.t('Spanish')}
+          {label}
         </Typography>
       ),
-      onClick: () => setLanguage(Languages.SPANISH),
-      end: <Radio value={Languages.SPANISH} />,
-    },
-  ];
+      onClick: () => changeLanguage(languageItem.local),
+      end: <Radio value={local} />,
+      start: <SVGFlag />,
+    };
+  });
 
   return (
     <Layout
@@ -65,7 +42,7 @@ export function LanguagePage() {
         title: i18n.t('Language'),
       }}>
       <SettingsContainer>
-        <RadioRoot value={language}>
+        <RadioRoot value={activeLanguage}>
           <List
             type={
               <ListItemButton

package/src/pages/SettingsPage.tsx

@@ -147,7 +147,7 @@ export function SettingsPage({ supportedSwappers, singleTheme }: PropTypes) {
           container={getContainer()}
           content={
             <TooltipContainer>
-              <Typography variant="label" size="medium" color="neutral900">
+              <Typography variant="label" size="medium" color="neutral700">
                 {i18n.t(
                   "Enabling the 'Infinite Approval' mode grants unrestricted access to smart contracts of DEXes/Bridges, allowing them to utilize the approved token amount without limitations."
                 )}

package/src/store/bestRoute.ts

@@ -9,9 +9,11 @@ import { subscribeWithSelector } from 'zustand/middleware';
 
 import { ZERO } from '../constants/numbers';
 import { isPositiveNumber } from '../utils/numbers';
-import { getBestRouteToTokenUsdPrice } from '../utils/routing';
+import {
+  createRetryRoute,
+  getBestRouteToTokenUsdPrice,
+} from '../utils/routing';
 import { calcOutputUsdValue } from '../utils/swap';
-import { tokensAreEqual } from '../utils/wallets';
 
 import { useMetaStore } from './meta';
 import createSelectors from './selectors';
@@ -173,49 +175,21 @@ export const useBestRouteStore = createSelectors(
       },
       retry: (pendingSwap) => {
         const { tokens, blockchains } = useMetaStore.getState().meta;
-        const failedIndex =
-          pendingSwap.status === 'failed'
-            ? pendingSwap.steps.findIndex((s) => s.status === 'failed')
-            : null;
 
-        if (failedIndex === null || failedIndex < 0) {
-          return;
-        }
-
-        const firstStep = pendingSwap.steps[0];
-        const lastStep = pendingSwap.steps[pendingSwap.steps.length - 1];
-        const fromBlockchain =
-          blockchains.find(
-            (blockchain) => blockchain.name === firstStep.fromBlockchain
-          ) || null;
-        const toBlockchain =
-          blockchains.find(
-            (blockchain) => blockchain.name === lastStep.toBlockchain
-          ) || null;
-
-        const fromToken = tokens.find((token) =>
-          tokensAreEqual(token, {
-            blockchain: firstStep.fromBlockchain,
-            symbol: firstStep.fromSymbol,
-            address: firstStep.fromSymbolAddress,
-          })
-        );
-
-        const toToken = tokens.find((token) =>
-          tokensAreEqual(token, {
-            blockchain: lastStep.toBlockchain,
-            symbol: lastStep.toSymbol,
-            address: lastStep.toSymbolAddress,
-          })
-        );
+        const {
+          fromBlockchain,
+          fromToken,
+          toBlockchain,
+          toToken,
+          inputAmount,
+        } = createRetryRoute(pendingSwap, blockchains, tokens);
 
-        const inputAmount = pendingSwap.inputAmount;
         set({
           fromBlockchain,
           fromToken,
           inputAmount,
           outputAmount: null,
-          inputUsdValue: getUsdValue(fromToken || null, inputAmount),
+          inputUsdValue: getUsdValue(fromToken ?? null, inputAmount),
           outputUsdValue: new BigNumber(0),
           toBlockchain,
           toToken,

package/src/store/settings.ts

@@ -1,40 +1,50 @@
+import { type Language } from '@rango-dev/ui';
 import { create } from 'zustand';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
 
+import { BLOCKCHAIN_LIST_SIZE } from '../constants/configs';
+import { DEFAULT_LANGUAGE } from '../constants/languages';
 import { DEFAULT_SLIPPAGE } from '../constants/swapSettings';
 import { removeDuplicateFrom } from '../utils/common';
 
 import { useMetaStore } from './meta';
 import createSelectors from './selectors';
 
-type Theme = 'auto' | 'dark' | 'light';
+export type ThemeMode = 'auto' | 'dark' | 'light';
 
 export interface SettingsState {
+  /** Keeping a history of blockchains that user has selected (in Swap process) */
+  preferredBlockchains: string[];
   slippage: number;
   customSlippage: number | null;
   infiniteApprove: boolean;
   disabledLiquiditySources: string[];
-  theme: Theme;
+  theme: ThemeMode;
+  language: Language;
   affiliateRef: string | null;
   affiliatePercent: number | null;
   affiliateWallets: { [key: string]: string } | null;
+
   setSlippage: (slippage: number) => void;
   setCustomSlippage: (customSlippage: number | null) => void;
   toggleInfiniteApprove: () => void;
   toggleLiquiditySource: (name: string) => void;
-  setTheme: (theme: Theme) => void;
+  setTheme: (theme: ThemeMode) => void;
+  setLanguage: (language: Language) => void;
   toggleAllLiquiditySources: (shouldReset?: boolean) => void;
   setAffiliateRef: (affiliateRef: string | null) => void;
   setAffiliatePercent: (affiliatePercent: number | null) => void;
   setAffiliateWallets: (
     affiliateWallets: { [key: string]: string } | null
   ) => void;
+  addPreferredBlockchain: (blockchain: string) => void;
 }
 
 export const useSettingsStore = createSelectors(
   create<SettingsState>()(
     persist(
-      subscribeWithSelector((set) => ({
+      subscribeWithSelector((set, get) => ({
+        preferredBlockchains: [],
         slippage: DEFAULT_SLIPPAGE,
         customSlippage: null,
         infiniteApprove: false,
@@ -43,6 +53,34 @@ export const useSettingsStore = createSelectors(
         affiliateWallets: null,
         disabledLiquiditySources: [],
         theme: 'auto',
+        language: DEFAULT_LANGUAGE,
+        addPreferredBlockchain: (blockchain) => {
+          const currentPreferredBlockchains = get().preferredBlockchains;
+
+          const noNeedToDoAnything = currentPreferredBlockchains.find(
+            (preferredBlockchain, index) => {
+              const isSameBlockchain = preferredBlockchain === blockchain;
+              const isInVisibleList = index <= BLOCKCHAIN_LIST_SIZE - 1;
+
+              return isSameBlockchain && isInVisibleList;
+            }
+          );
+
+          if (noNeedToDoAnything) {
+            return;
+          }
+
+          const nextPreferredBlockchains: string[] =
+            currentPreferredBlockchains.filter((preferredBlockchain) => {
+              const isSameBlockchain = preferredBlockchain === blockchain;
+
+              return !isSameBlockchain;
+            });
+
+          set(() => ({
+            preferredBlockchains: [blockchain, ...nextPreferredBlockchains],
+          }));
+        },
         setSlippage: (slippage) =>
           set(() => ({
             slippage: slippage,
@@ -106,6 +144,10 @@ export const useSettingsStore = createSelectors(
           set(() => ({
             theme,
           })),
+        setLanguage: (language) =>
+          set(() => ({
+            language,
+          })),
       })),
       {
         name: 'user-settings',

package/src/types/config.ts

@@ -8,22 +8,17 @@ 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;
+  info?: string;
 };
 
 /**
@@ -32,7 +27,7 @@ export type WidgetColors = {
  * @property {'auto' | 'light' | 'dark'} mode - The mode property is used to specify the default theme for
  * the widget.
  * @property {string} fontFamily - The font family to be used in the widget.
- * @property {Colors} colors - The `colors` property is a sub-property of the `WidgetTheme` object that
+ * @property {{ light?: WidgetColors; dark?: WidgetColors }} colors - The `colors` property is a sub-property of the `WidgetTheme` object that
  * defines the color scheme for the widget. It is of type `Colors`, which is likely another object that
  * contains specific color values for various parts of the widget (e.g. background color, text color,
  * border color
@@ -47,7 +42,7 @@ export type WidgetColors = {
 export type WidgetTheme = {
   mode?: 'auto' | 'light' | 'dark';
   fontFamily?: string;
-  colors?: { light: WidgetColors; dark: WidgetColors };
+  colors?: { light?: WidgetColors; dark?: WidgetColors };
   borderRadius?: number;
   secondaryBorderRadius?: number;
   width?: number;
@@ -126,6 +121,8 @@ export type BlockchainAndTokenConfig = {
  * If `externalWallets` is `true`, you should add `WidgetWallets` to your app.
  * @property {Asset} pinnedTokens - The `pinnedTokens` property is an optional array of `Asset` objects that
  * you could use to pin tokens of your choice to the top of the token list.
+ * @property {boolean} includeNewLiquiditySources - The `includeNewLiquiditySources` 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.
  */
 export type WidgetConfig = {
   apiKey: string;
@@ -142,4 +139,5 @@ export type WidgetConfig = {
   theme?: WidgetTheme;
   externalWallets?: boolean;
   pinnedTokens?: Asset[];
+  includeNewLiquiditySources?: boolean;
 };

package/src/utils/colors.ts

@@ -0,0 +1,109 @@
+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 },
+  reverseNeutralRange: boolean,
+  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 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 {
+        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/src/utils/configs.ts

@@ -34,3 +34,6 @@ export function initConfig(nextConfigs: Configs) {
 
 export const DEFAULT_PRIMARY_RADIUS = 20;
 export const DEFAULT_SECONDARY_RADIUS = 25;
+export const DEFAULT_FONT_FAMILY = 'Roboto';
+
+export const THEME_CLASS_NAME_PREFIX = `theme-widget`;

package/src/utils/hash.ts

@@ -0,0 +1,27 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+// Original Code: https://github.com/stitchesjs/stitches/blob/canary/packages/core/src/convert/toHash.js
+
+const toAlphabeticChar = (code: number) =>
+  String.fromCharCode(code + (code > 25 ? 39 : 97));
+
+const toAlphabeticName = (code: number) => {
+  let name = '';
+  let x;
+
+  for (x = Math.abs(code); x > 52; x = (x / 52) | 0) {
+    name = toAlphabeticChar(x % 52) + name;
+  }
+
+  return toAlphabeticChar(x % 52) + name;
+};
+
+const toPhash = (h: number, x: string) => {
+  let i = x.length;
+  while (i) {
+    h = (h * 33) ^ x.charCodeAt(--i);
+  }
+  return h;
+};
+
+export const toHash = (value: object) =>
+  toAlphabeticName(toPhash(5381, JSON.stringify(value)) >>> 0);

package/src/utils/meta.ts

@@ -1,4 +1,6 @@
-import type { BlockchainMeta } from 'rango-sdk';
+import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
+
+import { tokensAreEqual } from './wallets';
 
 export function getBlockchainDisplayNameFor(
   blockchainName: string,
@@ -14,3 +16,11 @@ export function getBlockchainShortNameFor(
   return blockchains.find((blockchain) => blockchain.name === blockchainName)
     ?.shortName;
 }
+
+export function findToken(t: Asset, tokens: Token[]) {
+  return tokens.find((token) => tokensAreEqual(token, t)) ?? null;
+}
+
+export function findBlockchain(name: string, blockchains: BlockchainMeta[]) {
+  return blockchains.find((blockchain) => blockchain.name === name) ?? null;
+}

package/src/utils/routing.ts

@@ -13,6 +13,7 @@ import type {
   Token,
 } from 'rango-sdk';
 
+import { getLastSuccessfulStep } from '@rango-dev/queue-manager-rango-preset';
 import BigNumber from 'bignumber.js';
 
 import {
@@ -25,6 +26,7 @@ import {
 } from '../constants/routing';
 
 import { areEqual } from './common';
+import { findBlockchain, findToken } from './meta';
 import { numberToString } from './numbers';
 
 export function searchParamsToToken(
@@ -261,3 +263,59 @@ export function findCommonTokens<T extends Asset[], R extends Asset[]>(
 
   return listB.filter((token) => set.has(tokenToString(token))) as R;
 }
+
+export function createRetryRoute(
+  pendingSwap: PendingSwap,
+  blockchains: BlockchainMeta[],
+  tokens: Token[]
+): {
+  fromBlockchain: BlockchainMeta | null;
+  fromToken: Token | null;
+  toBlockchain: BlockchainMeta | null;
+  toToken: Token | null;
+  inputAmount: string;
+} {
+  const firstStep = pendingSwap.steps[0];
+  const lastStep = pendingSwap.steps[pendingSwap.steps.length - 1];
+  const lastSuccessfulStep = getLastSuccessfulStep(pendingSwap.steps);
+
+  const toToken = {
+    blockchain: lastStep.toBlockchain,
+    symbol: lastStep.toSymbol,
+    address: lastStep.toSymbolAddress,
+  };
+
+  const fromBlockchainMeta = findBlockchain(
+    lastSuccessfulStep
+      ? lastSuccessfulStep.toBlockchain
+      : firstStep.fromBlockchain,
+    blockchains
+  );
+  const toBlockchainMeta = findBlockchain(lastStep.toBlockchain, blockchains);
+  const fromTokenMeta = findToken(
+    lastSuccessfulStep
+      ? {
+          blockchain: fromBlockchainMeta?.name ?? '',
+          symbol: lastSuccessfulStep.toSymbol,
+          address: lastSuccessfulStep.toSymbolAddress,
+        }
+      : {
+          blockchain: fromBlockchainMeta?.name ?? '',
+          symbol: firstStep.fromSymbol,
+          address: firstStep.fromSymbolAddress,
+        },
+    tokens
+  );
+  const toTokenMeta = findToken(toToken, tokens);
+  const inputAmount = lastSuccessfulStep
+    ? lastSuccessfulStep.outputAmount ?? ''
+    : pendingSwap.inputAmount;
+
+  return {
+    fromBlockchain: fromBlockchainMeta,
+    fromToken: fromTokenMeta,
+    toBlockchain: toBlockchainMeta,
+    toToken: toTokenMeta,
+    inputAmount,
+  };
+}

package/src/utils/settings.ts

@@ -33,7 +33,7 @@ export function getUniqueSwappersGroups(
       let isSupportedSwapper = true;
       if (supportedSwappers) {
         isSupportedSwapper = supportedSwappers.some(
-          (supportedItem) => supportedItem === swapperItem.title
+          (supportedItem) => supportedItem === swapperItem.swapperGroup
         );
       }