@rango-dev/widget-embedded 0.12.1-next.3 → 0.12.1-next.30

package/src/store/wallets.ts

@@ -1,21 +1,22 @@
-import { SelectableWallet } from '@rango-dev/ui';
-import { WalletType } from '@rango-dev/wallets-shared';
+import type { Wallet } from '../types';
+import type { WalletType } from '@rango-dev/wallets-shared';
+
 import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
 import { shallow } from 'zustand/shallow';
+
 import { httpService } from '../services/httpService';
 import {
-  getRequiredChains,
   getTokensWithBalance,
   isAccountAndWalletMatched,
   makeBalanceFor,
   resetConnectedWalletState,
   sortTokens,
 } from '../utils/wallets';
+
 import { useBestRouteStore } from './bestRoute';
 import { useMetaStore } from './meta';
 import createSelectors from './selectors';
-import { Wallet } from '../types';
 
 export type TokenBalance = {
   chain: string;
@@ -31,100 +32,107 @@ export type TokenBalance = {
 
 export interface ConnectedWallet extends Wallet {
   balances: TokenBalance[] | null;
+  explorerUrl: string | null;
+  selected: boolean;
   loading: boolean;
   error: boolean;
-  explorerUrl: string | null;
 }
 
 interface WalletsStore {
   connectedWallets: ConnectedWallet[];
-  selectedWallets: Wallet[];
   customDestination: string;
+  loading: boolean;
   connectWallet: (accounts: Wallet[]) => void;
   disconnectWallet: (walletType: WalletType) => void;
-  initSelectedWallets: () => void;
-  setSelectedWallet: (wallet: SelectableWallet) => void;
+  selectWallets: (wallets: { walletType: string; chain: string }[]) => void;
   clearConnectedWallet: () => void;
   getWalletsDetails: (accounts: Wallet[], shouldRetry?: boolean) => void;
-  setCustomDestination: (customDestination: string) => void;
 }
 
 export const useWalletsStore = createSelectors(
   create<WalletsStore>()(
     subscribeWithSelector((set, get) => ({
       connectedWallets: [],
-      selectedWallets: [],
       customDestination: '',
+      loading: false,
       connectWallet: (accounts) => {
         const getWalletsDetails = get().getWalletsDetails;
         set((state) => ({
+          loading: true,
           connectedWallets: state.connectedWallets
             .filter((wallet) => wallet.walletType !== accounts[0].walletType)
             .concat(
-              accounts.map((account) => ({
-                balances: [],
-                address: account.address,
-                chain: account.chain,
-                loading: true,
-                walletType: account.walletType,
-                error: false,
-                explorerUrl: null,
-              }))
+              accounts.map((account) => {
+                const shouldMarkWalletAsSelected = !state.connectedWallets.find(
+                  (connectedWallet) =>
+                    connectedWallet.chain === account.chain &&
+                    connectedWallet.selected
+                );
+                return {
+                  balances: [],
+                  address: account.address,
+                  chain: account.chain,
+                  explorerUrl: null,
+                  walletType: account.walletType,
+                  selected: shouldMarkWalletAsSelected,
+                  loading: true,
+                  error: false,
+                };
+              })
             ),
         }));
         getWalletsDetails(accounts);
       },
       disconnectWallet: (walletType) => {
-        set((state) => ({
-          connectedWallets: state.connectedWallets.filter(
-            (balance) => balance.walletType !== walletType
-          ),
-          selectedWallets: state.selectedWallets.filter(
-            (wallet) => wallet.walletType != walletType
-          ),
-        }));
-      },
-      initSelectedWallets: () =>
         set((state) => {
-          const requiredChains = getRequiredChains(
-            useBestRouteStore.getState().bestRoute
-          );
-          const connectedWallets = state.connectedWallets;
-          const selectedWallets: Wallet[] = [];
-          requiredChains.forEach((chain) => {
-            const anyWalletSelected = !!state.selectedWallets.find(
-              (wallet) => wallet.chain === chain
-            );
-
-            if (!anyWalletSelected) {
-              const firstWalletWithMatchedChain = connectedWallets.find(
-                (wallet) => wallet.chain === chain
-              );
-              if (!!firstWalletWithMatchedChain)
-                selectedWallets.push({
-                  address: firstWalletWithMatchedChain.address,
-                  chain: firstWalletWithMatchedChain.chain,
-                  walletType: firstWalletWithMatchedChain.walletType,
-                });
-            }
-          });
+          const selectedWallets = state.connectedWallets
+            .filter(
+              (connectedWallet) =>
+                connectedWallet.selected &&
+                connectedWallet.walletType !== walletType
+            )
+            .map((selectedWallet) => selectedWallet.chain);
           return {
-            selectedWallets: state.selectedWallets.concat(selectedWallets),
+            connectedWallets: state.connectedWallets
+              .filter(
+                (connectedWallet) => connectedWallet.walletType !== walletType
+              )
+              .map((connectedWallet) => {
+                const anyWalletSelectedForBlockchain = selectedWallets.includes(
+                  connectedWallet.chain
+                );
+                if (anyWalletSelectedForBlockchain) {
+                  return connectedWallet;
+                }
+                selectedWallets.push(connectedWallet.chain);
+                return { ...connectedWallet, selected: true };
+              }),
           };
-        }),
-      setSelectedWallet: (wallet) =>
+        });
+      },
+      selectWallets: (wallets) =>
         set((state) => ({
-          selectedWallets: state.selectedWallets
-            .filter((selectedWallet) => selectedWallet.chain !== wallet.chain)
-            .concat({
-              chain: wallet.chain,
-              address: wallet.address,
-              walletType: wallet.walletType,
-            }),
-        })),
-      setCustomDestination: (customDestination) =>
-        set(() => ({
-          customDestination,
+          connectedWallets: state.connectedWallets.map((connectedWallet) => {
+            const walletSelected = !!wallets.find(
+              (wallet) =>
+                wallet.chain === connectedWallet.chain &&
+                wallet.walletType !== connectedWallet.walletType &&
+                connectedWallet.selected
+            );
+            const walletNotSelected = !!wallets.find(
+              (wallet) =>
+                wallet.chain === connectedWallet.chain &&
+                wallet.walletType === connectedWallet.walletType &&
+                !connectedWallet.selected
+            );
+            if (walletSelected) {
+              return { ...connectedWallet, selected: false };
+            } else if (walletNotSelected) {
+              return { ...connectedWallet, selected: true };
+            }
+
+            return connectedWallet;
+          }),
         })),
       clearConnectedWallet: () =>
         set(() => ({
@@ -135,6 +143,7 @@ export const useWalletsStore = createSelectors(
         const getWalletsDetails = get().getWalletsDetails;
         const { tokens } = useMetaStore.getState().meta;
         set((state) => ({
+          loading: true,
           connectedWallets: state.connectedWallets.map((wallet) => {
             return accounts.find((account) =>
               isAccountAndWalletMatched(account, wallet)
@@ -149,39 +158,46 @@ export const useWalletsStore = createSelectors(
             blockchain: chain,
           }));
           const response = await httpService().getWalletsDetails(data);
-          const retrivedBalance = response.wallets;
-          if (retrivedBalance) {
+          const retrievedBalance = response.wallets;
+          if (retrievedBalance) {
             set((state) => ({
+              loading: false,
               connectedWallets: state.connectedWallets.map(
                 (connectedWallet) => {
                   const matchedAccount = accounts.find((account) =>
                     isAccountAndWalletMatched(account, connectedWallet)
                   );
-                  const retrivedBalanceAccount = retrivedBalance.find(
+                  const retrievedBalanceAccount = retrievedBalance.find(
                     (balance) =>
                       balance.address === connectedWallet.address &&
                       balance.blockChain === connectedWallet.chain
                   );
                   if (
-                    retrivedBalanceAccount?.failed &&
+                    retrievedBalanceAccount?.failed &&
                     matchedAccount &&
                     shouldRetry
                   ) {
                     getWalletsDetails([matchedAccount], false);
                   }
-                  return matchedAccount && retrivedBalanceAccount
-                    ? makeBalanceFor(
-                        matchedAccount,
-                        retrivedBalanceAccount,
-                        tokens
-                      )
+                  return matchedAccount && retrievedBalanceAccount
+                    ? {
+                        ...connectedWallet,
+                        explorerUrl: retrievedBalanceAccount.explorerUrl,
+                        balances: makeBalanceFor(
+                          retrievedBalanceAccount,
+                          tokens
+                        ),
+                      }
                     : connectedWallet;
                 }
               ),
             }));
-          } else throw new Error('Wallet not found');
+          } else {
+            throw new Error('Wallet not found');
+          }
         } catch (error) {
           set((state) => ({
+            loading: false,
             connectedWallets: state.connectedWallets.map((balance) => {
               return accounts.find((account) =>
                 isAccountAndWalletMatched(account, balance)

package/src/types/config.ts

@@ -1,7 +1,7 @@
-import { Asset } from 'rango-sdk';
-import { WalletType } from '@rango-dev/wallets-shared';
-import { ProviderInterface } from '@rango-dev/wallets-react';
-import { Language } from '@rango-dev/ui';
+import type { Language } from '@rango-dev/ui';
+import type { ProviderInterface } from '@rango-dev/wallets-react';
+import type { WalletType } from '@rango-dev/wallets-shared';
+import type { Asset } from 'rango-sdk';
 
 /**
  * The above type defines a set of optional color properties for a widget.
@@ -13,7 +13,7 @@ import { Language } from '@rango-dev/ui';
  * @property {string} warning
  * @property {string} surface
  * @property {string} neutral
-
+ *
  */
 export type WidgetColors = {
   background?: string;
@@ -38,6 +38,8 @@ export type WidgetColors = {
  * border color
  * @property {number} borderRadius - `borderRadius` is a property of the `WidgetTheme` type that
  * specifies the radius of the corners of a widget.
+ * @property {number} secondaryBorderRadius - `secondaryBorderRadius` is a property of the `WidgetTheme` type that
+ * specifies the radius of the buttons of a widget.
  * @property {number} width - The `width` property is a number that represents the width of the widget.
  * @property {number} height - The `height` property is a number that specifies the height of the widget.
  * @property {boolean} singleTheme - The `singleTheme` property is a boolean that specifies the theme is support dark and light or only light.
@@ -47,6 +49,7 @@ export type WidgetTheme = {
   fontFamily?: string;
   colors?: { light: WidgetColors; dark: WidgetColors };
   borderRadius?: number;
+  secondaryBorderRadius?: number;
   width?: number;
   height?: number;
   singleTheme?: boolean;
@@ -93,7 +96,7 @@ export type BlockchainAndTokenConfig = {
  * and theme.
  *
  * @property {string} apiKey - The API key used to communicate with Rango API
- * @property {WidgeAffiliate} affiliate - If you want to charge users fee per transaction, you should 
+ * @property {WidgeAffiliate} affiliate - If you want to charge users fee per transaction, you should
  * pass `WidgetAffiliate` including affiliateRef, affiliatePercent, and affiliateWallets.
  * @property {number} amount - The default input amount.
  * @property {BlockchainAndTokenConfig} from - The `from` property is an optional property of type
@@ -121,7 +124,8 @@ export type BlockchainAndTokenConfig = {
  * that defines the various properties of the theme, such as colors, fonts, and others.
  * @property {boolean} externalWallets
  * 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.
  */
 export type WidgetConfig = {
   apiKey: string;
@@ -137,4 +141,5 @@ export type WidgetConfig = {
   language?: Language;
   theme?: WidgetTheme;
   externalWallets?: boolean;
+  pinnedTokens?: Asset[];
 };

package/src/types/notification.ts

@@ -0,0 +1,33 @@
+import {
+  type Route,
+  type RouteEvent,
+  type Step,
+  type StepEvent,
+  StepExecutionBlockedEventStatus,
+} from '@rango-dev/queue-manager-rango-preset';
+
+type NotificationRoute = {
+  from: {
+    blockchain: Step['fromBlockchain'];
+    tokenSymbol: Step['fromSymbol'];
+    tokenAddress: Step['fromSymbolAddress'];
+  };
+  to: {
+    blockchain: Step['toBlockchain'];
+    tokenSymbol: Step['toSymbol'];
+    tokenAddress: Step['toSymbolAddress'];
+  };
+};
+
+export type Notification = Pick<Route, 'requestId'> & {
+  event: RouteEvent | StepEvent;
+  creationTime: number;
+  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/types/routing.ts

@@ -1,9 +1,10 @@
-import { RouteState } from '../store/bestRoute';
-import { SettingsState } from '../store/settings';
+/* eslint-disable @typescript-eslint/prefer-enum-initializers */
+import type { RouteState } from '../store/bestRoute';
+import type { SettingsState } from '../store/settings';
 
 interface BestRouteStoreParams {
-  fromChain?: RouteState['fromChain'];
-  toChain?: RouteState['toChain'];
+  fromBlockchain?: RouteState['fromBlockchain'];
+  toBlockchain?: RouteState['toBlockchain'];
   fromToken?: RouteState['fromToken'];
   toToken?: RouteState['toToken'];
   inputAmount?: RouteState['inputAmount'];
@@ -32,45 +33,45 @@ export enum ConfirmSwapErrorTypes {
   NO_ROUTE,
   ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS,
   REQUEST_FAILED,
-  INSUFFICIENT_SLIPPAGE,
-  INSUFFICIENT_BALANCE,
+  REQUEST_CANCELED,
 }
 
 export type ConfirmSwapError =
   | {
-      type: ConfirmSwapErrorTypes.REQUEST_FAILED;
-      status?: number;
-    }
-  | {
-      type: ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE;
-      minRequiredSlippage: string | null;
+      type: ConfirmSwapErrorTypes.NO_ROUTE;
+      diagnosisMessage?: string;
     }
-  | { type: ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE; messages: string[] }
   | {
-      type: Exclude<
-        ConfirmSwapErrorTypes,
-        | ConfirmSwapErrorTypes.REQUEST_FAILED
-        | ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE
-        | ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE
-      >;
+      type: Exclude<ConfirmSwapErrorTypes, ConfirmSwapErrorTypes.NO_ROUTE>;
     };
 
-export type ConfirmSwapWarnings =
+export enum RouteWarningType {
+  ROUTE_UPDATED,
+  ROUTE_SWAPPERS_UPDATED,
+  ROUTE_COINS_UPDATED,
+  ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
+}
+
+export type RouteWarning =
   | {
-      type: ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED;
+      type: RouteWarningType.ROUTE_AND_OUTPUT_AMOUNT_UPDATED;
       newOutputAmount: string;
       percentageChange: string;
     }
   | {
       type: Exclude<
-        ConfirmSwapWarningTypes,
-        ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED
+        RouteWarningType,
+        RouteWarningType.ROUTE_AND_OUTPUT_AMOUNT_UPDATED
       >;
     };
 
-export enum ConfirmSwapWarningTypes {
-  ROUTE_UPDATED,
-  ROUTE_SWAPPERS_UPDATED,
-  ROUTE_COINS_UPDATED,
-  ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
+export enum SlippageWarningType {
+  INSUFFICIENT_SLIPPAGE,
+  HIGH_SLIPPAGE,
 }
+
+export type ConfirmSwapWarnings = {
+  route: RouteWarning | null;
+  balance: { messages: string[] } | null;
+  slippage: { type: SlippageWarningType; slippage: string | null } | null;
+};

package/src/types/swap.ts

@@ -1,15 +1,23 @@
-import { SwapSavedSettings } from 'rango-types/lib';
+import type { SwapSavedSettings } from 'rango-types/lib';
 
 export type PendingSwapSettings = Omit<
   SwapSavedSettings,
   'disabledSwappersIds'
 >;
 
+export enum ButtonState {
+  WAITFORCONNECTING = 'waitForConnecting',
+  SWAP = 'swap',
+  NEEDTOCONFIRM = 'needToConfirm',
+  WARNING = 'warning',
+}
+
 export type SwapButtonState = (
   | { disabled: true }
   | { disabled: false; hasWarning?: boolean }
 ) & {
   title: string;
+  state: ButtonState;
 };
 
 export type ConvertedToken = {

package/src/utils/common.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
 export function removeDuplicateFrom<T>(array: T[]): T[] {
   return Array.from(new Set(array));
 }
@@ -10,9 +11,7 @@ export function areEqual(
     array1.length === array2.length && array1.every((v, i) => v === array2[i])
   );
 }
-
-
-
+// eslint-disable-next-line @typescript-eslint/ban-types
 export function debounce(fn: Function, time: number) {
   let timeoutId: ReturnType<typeof setTimeout> | null;
   return wrapper;
@@ -27,4 +26,58 @@ export function debounce(fn: Function, time: number) {
   }
 }
 
+export function containsText(text: string, searchText: string): boolean {
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  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

@@ -28,3 +28,6 @@ export function initConfig(nextConfigs: Configs) {
   configs = clonedConfigs;
   return configs;
 }
+
+export const DEFAULT_PRIMARY_RADIUS = 20;
+export const DEFAULT_SECONDARY_RADIUS = 25;

package/src/utils/date.ts

@@ -1,8 +1,9 @@
-import { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+import type { GroupBy } from '../components/SwapsGroup/SwapsGroup.types';
+import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+
 import dayjs from 'dayjs';
-import { GroupBy } from '@rango-dev/ui';
 
-export const groupSwapsByDate: GroupBy = swaps => {
+export const groupSwapsByDate: GroupBy = (swaps) => {
   const output: Map<
     string,
     {
@@ -17,24 +18,17 @@ export const groupSwapsByDate: GroupBy = swaps => {
         swaps: [],
       },
     ],
-    [
-      'week',
-      {
-        title: 'This week',
-        swaps: [],
-      },
-    ],
     [
       'month',
       {
-        title: 'This month',
+        title: 'Last month',
         swaps: [],
       },
     ],
     [
       'year',
       {
-        title: 'This year',
+        title: 'Last year',
         swaps: [],
       },
     ],
@@ -48,14 +42,17 @@ export const groupSwapsByDate: GroupBy = swaps => {
   ]);
 
   const now = dayjs();
-  swaps.forEach(swap => {
+  swaps.forEach((swap) => {
     const swapDate = dayjs(Number(swap.creationTime));
-    if (now.isSame(swapDate, 'day')) output.get('today')?.swaps.push(swap);
-    else if (now.isSame(swapDate, 'week')) output.get('week')?.swaps.push(swap);
-    else if (now.isSame(swapDate, 'month'))
+    if (now.isSame(swapDate, 'day')) {
+      output.get('today')?.swaps.push(swap);
+    } else if (now.isSame(swapDate, 'month')) {
       output.get('month')?.swaps.push(swap);
-    else if (now.isSame(swapDate, 'year')) output.get('year')?.swaps.push(swap);
-    else output.get('history')?.swaps.push(swap);
+    } else if (now.isSame(swapDate, 'year')) {
+      output.get('year')?.swaps.push(swap);
+    } else {
+      output.get('history')?.swaps.push(swap);
+    }
   });
 
   return Array.from(output.values());

package/src/utils/meta.ts

@@ -0,0 +1,9 @@
+import type { BlockchainMeta } from 'rango-sdk';
+
+export function getBlockchainDisplayNameFor(
+  blockchainName: string,
+  blockchains: BlockchainMeta[]
+): string | undefined {
+  return blockchains.find((blockchain) => blockchain.name === blockchainName)
+    ?.displayName;
+}