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

package/src/pages/ThemePage.tsx

@@ -11,8 +11,7 @@ import {
 } from '@rango-dev/ui';
 import React from 'react';
 
-import { Layout } from '../components/Layout';
-import { SettingsContainer } from '../components/SettingsContainer';
+import { Layout, PageContainer } from '../components/Layout';
 import { useAppStore } from '../store/AppStore';
 
 type Theme = 'dark' | 'light' | 'auto';
@@ -70,7 +69,7 @@ export function ThemePage() {
       header={{
         title: i18n.t('Theme'),
       }}>
-      <SettingsContainer>
+      <PageContainer>
         <RadioRoot
           onValueChange={(value) => setTheme(value as Theme)}
           value={theme}>
@@ -85,7 +84,7 @@ export function ThemePage() {
             items={themesList}
           />
         </RadioRoot>
-      </SettingsContainer>
+      </PageContainer>
     </Layout>
   );
 }

package/src/pages/WalletsPage.tsx

@@ -2,9 +2,9 @@ import type { WalletType } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
 import { styled, Typography, Wallet, WalletState } from '@rango-dev/ui';
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 
-import { Layout } from '../components/Layout';
+import { Layout, PageContainer } from '../components/Layout';
 import { WalletModal } from '../components/WalletModal';
 import { useWalletList } from '../hooks/useWalletList';
 import { useAppStore } from '../store/AppStore';
@@ -20,7 +20,7 @@ const ListContainer = styled('div', {
   height: '100%',
 });
 
-const Container = styled('div', {
+const Container = styled(PageContainer, {
   textAlign: 'center',
 });
 
@@ -71,16 +71,15 @@ export function WalletsPage() {
           {list.map((wallet, index) => {
             const key = `wallet-${index}-${wallet.type}`;
             return (
-              <Fragment key={key}>
-                <Wallet
-                  {...wallet}
-                  container={getContainer()}
-                  onClick={(type) => {
-                    void handleClick(type);
-                  }}
-                  isLoading={fetchMetaStatus === 'loading'}
-                />
-              </Fragment>
+              <Wallet
+                key={key}
+                {...wallet}
+                container={getContainer()}
+                onClick={(type) => {
+                  void handleClick(type);
+                }}
+                isLoading={fetchMetaStatus === 'loading'}
+              />
             );
           })}
           <WalletModal

package/src/store/slices/data.ts

@@ -6,6 +6,7 @@ import type { StateCreator } from 'zustand';
 
 import { httpService as sdk } from '../../services/httpService';
 import { containsText } from '../../utils/common';
+import { isTokenExcludedInConfig } from '../../utils/configs';
 import { sortLiquiditySourcesByGroupTitle } from '../../utils/settings';
 import { tokensAreEqual } from '../../utils/wallets';
 
@@ -81,21 +82,18 @@ export const createDataSlice: StateCreator<
     }
 
     const config = get().config;
-    const supportedTokensFromConfig =
+    const supportedTokensConfig =
       (options.type === 'source' ? config.from?.tokens : config.to?.tokens) ??
-      [];
+      {};
     const blockchains = get().blockchains({
       type: options.type,
     });
 
     const list = tokensFromState
       .filter((token) => {
-        // If there is a list of tokens in config, we only keep them.
         if (
-          supportedTokensFromConfig.length > 0 &&
-          !supportedTokensFromConfig.some((asset) => {
-            return tokensAreEqual(asset, token);
-          })
+          supportedTokensConfig &&
+          isTokenExcludedInConfig(token, supportedTokensConfig)
         ) {
           return false;
         }

package/src/store/slices/settings.ts

@@ -15,7 +15,7 @@ export type ThemeMode = 'auto' | 'dark' | 'light';
 
 export interface SettingsSlice {
   theme: ThemeMode;
-  language: Language;
+  language: Language | null;
   disabledLiquiditySources: string[];
   /** Keeping a history of blockchains that user has selected (in Swap process) */
   preferredBlockchains: string[];
@@ -31,7 +31,7 @@ export interface SettingsSlice {
   toggleInfiniteApprove: () => void;
   toggleLiquiditySource: (name: string) => void;
   setTheme: (theme: ThemeMode) => void;
-  setLanguage: (language: Language) => void;
+  setLanguage: (language: Language | null) => void;
   toggleAllLiquiditySources: (
     swappers: SwapperMeta[],
     shouldReset?: boolean
@@ -53,7 +53,7 @@ export const createSettingsSlice: StateCreator<
 > = (set, get) => ({
   disabledLiquiditySources: [],
   theme: 'auto',
-  language: DEFAULT_LANGUAGE,
+  language: null,
   preferredBlockchains: [],
   slippage: DEFAULT_SLIPPAGE,
   customSlippage: null,

package/src/types/config.ts

@@ -67,6 +67,19 @@ export type WidgetAffiliate = {
   wallets?: { [key: string]: string };
 };
 
+/**
+ * `Tokens`
+ *
+ * @property {boolean} isExcluded - This is a boolean property capable of removing tokens from all or a blockchain.
+ * @property {Asset[]} tokens - The `tokens` property is an array of `Asset` objects that
+ * you could use that to limit tokens to some limited ones.
+ */
+
+export type Tokens = {
+  isExcluded: boolean;
+  tokens: Asset[];
+};
+
 /**
  * `BlockchainAndTokenConfig`
  *
@@ -75,8 +88,8 @@ export type WidgetAffiliate = {
  * which is selected. e.g. {blockchain: 'BSC', symbol: 'BNB', address: null}
  * @property {string[]} blockchains - An optional array of strings representing the supported
  * blockchains. e.g. ['BSC','ETHEREUM']
- * @property {Asset[]} tokens - The `tokens` property is an optional array of `Asset` objects that
- * you could use that to limit tokens to some limited ones.
+ * @property {Asset[] |{ [blockchain: string]: Tokens }} tokens - The `tokens` property is an optional object of `blockchain` objects or array of `Asset` objects
+ * that you could use that to limit tokens to some limited ones.
  * @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.
  */
@@ -84,8 +97,8 @@ export type BlockchainAndTokenConfig = {
   blockchain?: string;
   token?: Asset;
   blockchains?: string[];
-  tokens?: Asset[];
   pinnedTokens?: Asset[];
+  tokens?: Asset[] | { [blockchain: string]: Tokens };
 };
 
 /**

package/src/types/notification.ts

@@ -3,7 +3,6 @@ import {
   type RouteEvent,
   type Step,
   type StepEvent,
-  StepExecutionBlockedEventStatus,
 } from '@rango-dev/queue-manager-rango-preset';
 
 type NotificationRoute = {
@@ -25,9 +24,3 @@ export type Notification = Pick<Route, 'requestId'> & {
   read: boolean;
   route: NotificationRoute;
 };
-
-export const validBlockedStatuses: StepExecutionBlockedEventStatus[] = [
-  StepExecutionBlockedEventStatus.WAITING_FOR_CHANGE_WALLET_ACCOUNT,
-  StepExecutionBlockedEventStatus.WAITING_FOR_NETWORK_CHANGE,
-  StepExecutionBlockedEventStatus.WAITING_FOR_WALLET_CONNECT,
-];

package/src/utils/configs.ts

@@ -1,10 +1,21 @@
+import type { Tokens } from '../types';
+import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
+
 import { RANGO_PUBLIC_API_KEY } from '../constants';
 
+import { tokensAreEqual } from './wallets';
+
 export interface Configs {
   API_KEY: string;
   BASE_URL?: string;
 }
 
+type TokensConfig =
+  | Asset[]
+  | {
+      [blockchain: string]: Tokens;
+    };
+
 let configs: Configs = {
   API_KEY: RANGO_PUBLIC_API_KEY,
 };
@@ -38,3 +49,33 @@ export const DEFAULT_SECONDARY_RADIUS = 25;
 export const DEFAULT_FONT_FAMILY = 'Roboto';
 
 export const THEME_CLASS_NAME_PREFIX = `theme-widget`;
+
+export const isTokenExcludedInConfig = (
+  token: Token | null,
+  tokensConfig?: TokensConfig
+) => {
+  let result = false;
+  if (tokensConfig && token) {
+    if (Array.isArray(tokensConfig)) {
+      result = !tokensConfig.some((asset) => tokensAreEqual(asset, token));
+    } else if (!Array.isArray(tokensConfig) && tokensConfig[token.blockchain]) {
+      result = tokensConfig[token.blockchain].tokens.some((asset) =>
+        tokensAreEqual(asset, token)
+      );
+      const isExcluded = tokensConfig[token.blockchain].isExcluded;
+      return (!isExcluded && !result) || (isExcluded && result);
+    }
+  }
+  return result;
+};
+
+export const isBlockchainExcludedInConfig = (
+  blockchain: BlockchainMeta | null,
+  blockchainsConfig?: string[]
+) => {
+  return (
+    blockchain &&
+    blockchainsConfig &&
+    !blockchainsConfig.includes(blockchain.name)
+  );
+};

package/src/utils/date.ts

@@ -1,6 +1,7 @@
 import type { GroupBy } from '../components/SwapsGroup/SwapsGroup.types';
 import type { PendingSwap } from 'rango-types';
 
+import { i18n } from '@lingui/core';
 import dayjs from 'dayjs';
 
 export const groupSwapsByDate: GroupBy = (swaps) => {
@@ -14,28 +15,28 @@ export const groupSwapsByDate: GroupBy = (swaps) => {
     [
       'today',
       {
-        title: 'Today',
+        title: i18n.t('Today'),
         swaps: [],
       },
     ],
     [
       'week',
       {
-        title: 'This week',
+        title: i18n.t('This week'),
         swaps: [],
       },
     ],
     [
       'month',
       {
-        title: 'This month',
+        title: i18n.t('This month'),
         swaps: [],
       },
     ],
     [
       'year',
       {
-        title: 'This year',
+        title: i18n.t('This year'),
         swaps: [],
       },
     ],

package/src/utils/quote.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { QuoteError, QuoteWarning, Wallet } from '../types';
-import type { PriceImpactWarningLevel } from '@rango-dev/ui';
+import type { PriceImpactWarningLevel, Step } from '@rango-dev/ui';
 import type {
   SimulationAssetAndAmount,
   SimulationValidationStatus,
@@ -336,3 +336,20 @@ export function getPriceImpact(
 
   return percentageChange && percentageChange < 0 ? percentageChange : null;
 }
+
+export const getUniqueBlockchains = (steps: Step[]) => {
+  const set = new Set();
+  const result: { displayName: string; image: string }[] = [];
+  steps.forEach((step) => {
+    if (!set.has(step.from.chain.displayName)) {
+      set.add(step.from.chain.displayName);
+      result.push(step.from.chain);
+    }
+    if (!set.has(step.to.chain.displayName)) {
+      set.add(step.to.chain.displayName);
+      result.push(step.to.chain);
+    }
+  });
+
+  return result;
+};

package/src/utils/swap.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { FeesGroup, NameOfFees } from '../constants/quote';
 import type { FetchStatus } from '../store/slices/data';
 import type {
   ConvertedToken,
@@ -14,6 +15,7 @@ import type {
   BestRouteResponse,
   BlockchainMeta,
   RecommendedSlippage,
+  SwapFee,
   SwapResult,
   Token,
 } from 'rango-sdk';
@@ -328,6 +330,39 @@ export function getTotalFeeInUsd(
   );
 }
 
+export function getUsdFee(fee: SwapFee): BigNumber {
+  let totalFeeInUsd = ZERO;
+  totalFeeInUsd = totalFeeInUsd.plus(
+    new BigNumber(fee.amount).multipliedBy(fee.price || 0)
+  );
+
+  return totalFeeInUsd;
+}
+
+export function getTotalFeesInUsd(fees: SwapFee[]): BigNumber {
+  return fees.reduce(
+    (totalFee: BigNumber, fee) => totalFee.plus(getUsdFee(fee)),
+    ZERO
+  );
+}
+export function getFeesGroup(swaps: SwapResult[]): FeesGroup {
+  return swaps.reduce(
+    (result, swap) => {
+      for (const fee of swap.fee) {
+        const name = fee.name as NameOfFees;
+        const feeGroup =
+          fee.expenseType !== 'DECREASE_FROM_OUTPUT'
+            ? result.payable
+            : result.nonePayable;
+
+        feeGroup[name] = [...(feeGroup[name] || []), fee];
+      }
+      return result;
+    },
+    { payable: {}, nonePayable: {} } as FeesGroup
+  );
+}
+
 export function hasHighFee(totalFeeInUsd: BigNumber | null) {
   if (!totalFeeInUsd) {
     return false;

package/src/utils/ui.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { WidgetTheme } from '../types';
 import type { createTheme } from '@rango-dev/ui';
+import type React from 'react';
 
 import {
   theme as baseThemeTokens,
@@ -70,3 +71,22 @@ export function customizedThemeTokens(
     dark,
   };
 }
+
+export function joinList(
+  list: React.JSX.Element[],
+  divider: React.JSX.Element
+) {
+  if (list.length <= 1) {
+    return list;
+  }
+
+  const output: React.JSX.Element[] = [];
+  list.forEach((item, index) => {
+    output.push(item);
+    if (index < list.length - 1) {
+      output.push(divider);
+    }
+  });
+
+  return output;
+}