@rango-dev/widget-embedded 0.14.1-next.9 → 0.16.0

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/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

@@ -18,6 +18,7 @@ export type WidgetColors = {
   neutral?: string;
   primary?: string;
   secondary?: string;
+  info?: string;
 };
 
 /**
@@ -26,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
@@ -41,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;
@@ -120,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;
@@ -136,4 +139,5 @@ export type WidgetConfig = {
   theme?: WidgetTheme;
   externalWallets?: boolean;
   pinnedTokens?: Asset[];
+  includeNewLiquiditySources?: boolean;
 };

package/src/utils/colors.ts

@@ -64,6 +64,7 @@ export const generateRangeColors = (name: string, color: string) => {
 };
 export const generateColors = (
   mainColors: { [x: string]: string },
+  reverseNeutralRange: boolean,
   colors?: WidgetColors
 ) => {
   if (!colors || !Object.entries(colors).length) {
@@ -81,6 +82,21 @@ 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 {
         listOfColors = {
           ...listOfColors,

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

package/src/utils/swap.ts

@@ -120,8 +120,7 @@ export function LimitErrorMessage(bestRoute: BestRouteResponse | null): {
   let recommendation = '';
   if (!isExclusive && !!minimum && minimum.gt(swap.fromAmount)) {
     fromAmountRangeError = i18n.t({
-      id: 'requiredEqualMin',
-      message: 'Required: >= {min} {symbol}',
+      id: 'Required: >= {min} {symbol}',
       values: {
         min: numberToString(
           minimum,
@@ -131,11 +130,10 @@ export function LimitErrorMessage(bestRoute: BestRouteResponse | null): {
         symbol: swap.from.symbol,
       },
     });
-    recommendation = errorMessages.bridgeLimitErrors.increaseAmount;
+    recommendation = errorMessages().bridgeLimitErrors.increaseAmount;
   } else if (isExclusive && !!minimum && minimum.gte(swap.fromAmount)) {
     fromAmountRangeError = i18n.t({
-      id: 'requiredMin',
-      message: 'Required: > {min} {symbol}',
+      id: 'Required: > {min} {symbol}',
       values: {
         min: numberToString(
           minimum,
@@ -145,13 +143,12 @@ export function LimitErrorMessage(bestRoute: BestRouteResponse | null): {
         symbol: swap.from.symbol,
       },
     });
-    recommendation = errorMessages.bridgeLimitErrors.increaseAmount;
+    recommendation = errorMessages().bridgeLimitErrors.increaseAmount;
   }
 
   if (!isExclusive && !!maximum && maximum.lt(swap.fromAmount)) {
     fromAmountRangeError = i18n.t({
-      id: 'requiredEqualMax',
-      message: 'Required: <= {max} {symbol}',
+      id: 'Required: <= {max} {symbol}',
       values: {
         max: numberToString(
           maximum,
@@ -161,11 +158,10 @@ export function LimitErrorMessage(bestRoute: BestRouteResponse | null): {
         symbol: swap.from.symbol,
       },
     });
-    recommendation = errorMessages.bridgeLimitErrors.decreaseAmount;
+    recommendation = errorMessages().bridgeLimitErrors.decreaseAmount;
   } else if (isExclusive && !!maximum && maximum.lte(swap.fromAmount)) {
     fromAmountRangeError = i18n.t({
-      id: 'requiredMax',
-      message: 'Required: < {max} {symbol}',
+      id: 'Required: < {max} {symbol}',
       values: {
         max: numberToString(
           maximum,
@@ -175,7 +171,7 @@ export function LimitErrorMessage(bestRoute: BestRouteResponse | null): {
         symbol: swap.from.symbol,
       },
     });
-    recommendation = errorMessages.bridgeLimitErrors.decreaseAmount;
+    recommendation = errorMessages().bridgeLimitErrors.decreaseAmount;
   }
 
   return { swap, fromAmountRangeError, recommendation };
@@ -194,14 +190,14 @@ export function getSwapButtonState(
 ): SwapButtonState {
   if (loadingMetaStatus !== 'success') {
     return {
-      title: swapButtonTitles.connectWallet,
+      title: swapButtonTitles().connectWallet,
       state: ButtonState.WAITFORCONNECTING,
       disabled: true,
     };
   }
   if (connectedWallets.length == 0) {
     return {
-      title: swapButtonTitles.connectWallet,
+      title: swapButtonTitles().connectWallet,
       state: ButtonState.WAITFORCONNECTING,
       disabled: false,
     };
@@ -215,27 +211,27 @@ export function getSwapButtonState(
     inputAmount === '0'
   ) {
     return {
-      title: swapButtonTitles.swap,
+      title: swapButtonTitles().swap,
       disabled: true,
       state: ButtonState.SWAP,
     };
   } else if (highValueLoss || priceImpactCanNotBeComputed) {
     return {
-      title: swapButtonTitles.swapAnyway,
+      title: swapButtonTitles().swapAnyway,
       disabled: false,
       hasWarning: true,
       state: ButtonState.NEEDTOCONFIRM,
     };
   } else if (needsToWarnEthOnPath) {
     return {
-      title: swapButtonTitles.ethRouteWarning,
+      title: swapButtonTitles().ethRouteWarning,
       disabled: false,
       hasWarning: true,
       state: ButtonState.WARNING,
     };
   }
   return {
-    title: swapButtonTitles.swap,
+    title: swapButtonTitles().swap,
     disabled: false,
     state: ButtonState.SWAP,
   };
@@ -608,8 +604,7 @@ export function getBalanceWarnings(
         reason = i18n.t(' for input and network fee');
       }
       const warningMessage = i18n.t({
-        id: 'balanceWarningMessage',
-        message: `Needs ≈ {requiredAmount} {symbol}{reason}, but you have {currentAmount} {symbol} in your {blockchain} wallet.`,
+        id: `Needs ≈ {requiredAmount} {symbol}{reason}, but you have {currentAmount} {symbol} in your {blockchain} wallet.`,
         values: {
           requiredAmount,
           symbol,

package/src/utils/time.ts

@@ -67,13 +67,11 @@ export function timeSince(millisecond: number): string {
 export function getSwapDate(pendingSwap: PendingSwap) {
   return pendingSwap.finishTime
     ? i18n.t({
-        id: 'timeAgo',
-        message: '{time} ago',
+        id: '{time} ago',
         values: { time: timeSince(parseInt(pendingSwap.finishTime)) },
       })
     : i18n.t({
-        id: 'timeAgo',
-        message: '{time} ago',
+        id: '{time} ago',
         values: { time: timeSince(parseInt(pendingSwap.creationTime)) },
       });
 }

package/src/utils/ui.ts

@@ -0,0 +1,72 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { WidgetTheme } from '../types';
+import type { createTheme } from '@rango-dev/ui';
+
+import {
+  theme as baseThemeTokens,
+  darkColors as defaultDarkColors,
+} from '@rango-dev/ui';
+
+import { generateColors } from '../utils/colors';
+import { toHash } from '../utils/hash';
+
+import { THEME_CLASS_NAME_PREFIX } from './configs';
+
+interface CustomizedThemeValues {
+  id: string;
+  tokens: Parameters<typeof createTheme>[0];
+}
+
+interface CustomizedTheme {
+  light: undefined | CustomizedThemeValues;
+  dark: undefined | CustomizedThemeValues;
+}
+
+export function customizedThemeTokens(
+  colors: WidgetTheme['colors']
+): CustomizedTheme {
+  const baseColors = baseThemeTokens.colors;
+
+  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 };
+    const id = `${THEME_CLASS_NAME_PREFIX}-light-${toHash(tokens)}`;
+    light = {
+      id,
+      tokens,
+    };
+  }
+  if (hasDefaultDarkColors) {
+    const tokens = {
+      colors: darkColorsWithDefaults,
+    };
+    const id = `${THEME_CLASS_NAME_PREFIX}-dark-${toHash(tokens)}`;
+    dark = {
+      id,
+      tokens,
+    };
+  }
+
+  return {
+    light,
+    dark,
+  };
+}

package/src/utils/wallets.ts

@@ -55,8 +55,11 @@ export function mapWalletTypesToWalletInfo(
   return list
     .filter((wallet) => !EXCLUDED_WALLETS.includes(wallet as WalletTypes))
     .filter((wallet) => {
+      const { supportedChains, hideWhenNotInstalled } = getWalletInfo(wallet);
+      if (hideWhenNotInstalled && !getState(wallet).installed) {
+        return false;
+      }
       if (chain) {
-        const { supportedChains } = getWalletInfo(wallet);
         return !!supportedChains.find(
           (supportedChain) => supportedChain.name === chain
         );
@@ -203,30 +206,6 @@ export function getRequiredChains(route: BestRouteResponse | null) {
 
 type Blockchain = { name: string; accounts: ConnectedWallet[] };
 
-export function getSelectableWallets(
-  connectedWallets: ConnectedWallet[],
-  getWalletInfo: (type: WalletType) => WalletInfo,
-  destinationChain?: string
-): Wallet[] {
-  const selectableWallets = connectedWallets.map(
-    (connectedWallet: ConnectedWallet) => {
-      return {
-        address: connectedWallet.address,
-        walletType: connectedWallet.walletType,
-        chain: connectedWallet.chain,
-        image: getWalletInfo(connectedWallet.walletType).img,
-        name: getWalletInfo(connectedWallet.walletType).name,
-        selected:
-          destinationChain === connectedWallet.chain
-            ? false
-            : connectedWallet.selected,
-      };
-    }
-  );
-
-  return selectableWallets;
-}
-
 export function getBalanceFromWallet(
   connectedWallets: ConnectedWallet[],
   chain: string,

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

@@ -1 +0,0 @@
-{"version":3,"file":"usePrepareBlockchainList.d.ts","sourceRoot":"","sources":["../../src/hooks/usePrepareBlockchainList.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAIhD,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,iBAAiB;IACzB,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,IAAI,EAAE,cAAc,EAAE,CAAC;CACxB;AAED;;;;;GAKG;AACH,wBAAgB,wBAAwB,CACtC,WAAW,EAAE,cAAc,EAAE,EAC7B,OAAO,CAAC,EAAE,kBAAkB,GAC3B,iBAAiB,CAgEnB"}