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

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/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,yCAAyC,CAAC"}

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"}

package/src/hooks/usePrepareBlockchainList.ts

@@ -1,125 +0,0 @@
-import type { BlockchainMeta } from 'rango-sdk';
-
-import { useMemo, useRef } from 'react';
-
-interface PrepareListOptions {
-  limit?: number;
-  selected?: string;
-}
-
-interface PrepareListOutput {
-  list: BlockchainMeta[];
-  more: BlockchainMeta[];
-}
-
-/**
- *
- * UI needs some specific logics like limiting the list and sorting,
- * this function is getting the raw blockchains list and return a list for showing in UI.
- *
- */
-export function usePrepareBlockchainList(
-  blockchains: BlockchainMeta[],
-  options?: PrepareListOptions
-): PrepareListOutput {
-  const prevSelectedBlockchain = useRef({ index: -1, name: '' });
-
-  blockchains.sort(sortByMostUsedBlockchains);
-
-  const blockchainsHash = blockchains
-    .map((blockchain) => blockchain.name)
-    .join('-');
-
-  return useMemo(() => {
-    const list: BlockchainMeta[] = blockchains;
-    let more: BlockchainMeta[] = [];
-
-    // Checking `limit` has set and it should be more than of the list items.
-    if (options?.limit && blockchains.length > options.limit) {
-      const start = options.limit;
-      /** Try find the blockchain and returns the index. */
-      const selectedIndex = options.selected
-        ? blockchains.findIndex(
-            (blockchains) => blockchains.name === options.selected
-          )
-        : -1;
-
-      const prevSelectedBlockchainWasInMoreSection =
-        prevSelectedBlockchain.current.index > options.limit - 1 &&
-        !!blockchains.find(
-          (blockchains) =>
-            blockchains.name === prevSelectedBlockchain.current.name
-        );
-
-      /*
-       * If the selected blockchain is in `more` section, we should move it to front of the list
-       */
-      if (
-        options.selected &&
-        ((prevSelectedBlockchainWasInMoreSection &&
-          selectedIndex < options.limit - 1) ||
-          selectedIndex > options.limit - 1)
-      ) {
-        blockchains.sort(
-          generateSortBySelectedFor(
-            prevSelectedBlockchainWasInMoreSection
-              ? prevSelectedBlockchain.current.name
-              : options.selected
-          )
-        );
-      }
-
-      /*
-       * Splice will modify the original list and returns the deleted items
-       * We use the deleted items as `more`
-       */
-      more = list.splice(start);
-      prevSelectedBlockchain.current = {
-        index: selectedIndex,
-        name: options.selected ?? '',
-      };
-    }
-
-    return {
-      list,
-      more,
-    };
-  }, [blockchainsHash]);
-}
-
-function generateSortBySelectedFor(selected: string) {
-  /** Move `selected` blockchain to the front of list. */
-  return function sortBySelected(a: BlockchainMeta, b: BlockchainMeta) {
-    if (a.name === selected) {
-      return -1;
-    }
-    if (b.name === selected) {
-      return 1;
-    }
-
-    return 0;
-  };
-}
-
-/** There is a hardcoded list of blockchains that we want to show them first in the list. */
-function sortByMostUsedBlockchains(a: BlockchainMeta, b: BlockchainMeta) {
-  const mostUsed = ['ETH', 'COSMOS', 'OSMOSIS'];
-  const aIndexInMostUsed = mostUsed.findIndex((token) => token === a.name);
-  const bIndexInMostUsed = mostUsed.findIndex((token) => token === b.name);
-  const aIsMostUsed = aIndexInMostUsed > -1;
-  const bIsMostUsed = bIndexInMostUsed > -1;
-
-  if (aIsMostUsed && bIsMostUsed) {
-    return aIndexInMostUsed > bIndexInMostUsed ? 1 : -1;
-  }
-
-  if (aIsMostUsed) {
-    return -1;
-  }
-
-  if (bIsMostUsed) {
-    return 1;
-  }
-
-  return 0;
-}