@rango-dev/widget-embedded 0.14.1-next.15 → 0.14.1-next.17

package/dist/store/settings.d.ts

@@ -1,6 +1,8 @@
 import { type Language } from '@rango-dev/ui';
 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;
@@ -24,6 +26,7 @@ export interface SettingsState {
     setAffiliateWallets: (affiliateWallets: {
         [key: string]: string;
     } | null) => void;
+    addPreferredBlockchain: (blockchain: string) => void;
 }
 export declare const useSettingsStore: {
     (): SettingsState;
@@ -48,6 +51,7 @@ export declare const useSettingsStore: {
     };
 } & {
     use: {
+        preferredBlockchains: () => string[];
         slippage: () => number;
         customSlippage: () => number | null;
         infiniteApprove: () => boolean;
@@ -71,6 +75,7 @@ export declare const useSettingsStore: {
         setAffiliateWallets: () => (affiliateWallets: {
             [key: string]: string;
         } | null) => void;
+        addPreferredBlockchain: () => (blockchain: string) => void;
     };
 };
 //# sourceMappingURL=settings.d.ts.map

package/dist/store/settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../src/store/settings.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAW9C,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,OAAO,CAAC;IACzB,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,gBAAgB,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACnD,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iBAAiB,EAAE,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,qBAAqB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,WAAW,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,yBAAyB,EAAE,CAAC,WAAW,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,mBAAmB,EAAE,CAAC,gBAAgB,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/D,mBAAmB,EAAE,CACnB,gBAAgB,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,KAC/C,IAAI,CAAC;CACX;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sCAdH,MAAM,KAAK,IAAI;kDACH,MAAM,GAAG,IAAI,KAAK,IAAI;2CAC7B,IAAI;4CACH,MAAM,KAAK,IAAI;gCAC3B,SAAS,KAAK,IAAI;sCACZ,QAAQ,KAAK,IAAI;wDACC,OAAO,KAAK,IAAI;8CAC1B,MAAM,GAAG,IAAI,KAAK,IAAI;sDACd,MAAM,GAAG,IAAI,KAAK,IAAI;;;qBAGzD,IAAI;;CA0FV,CAAC"}
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../src/store/settings.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAY9C,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,gFAAgF;IAChF,oBAAoB,EAAE,MAAM,EAAE,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,OAAO,CAAC;IACzB,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,gBAAgB,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAEnD,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iBAAiB,EAAE,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,qBAAqB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,WAAW,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,yBAAyB,EAAE,CAAC,WAAW,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,mBAAmB,EAAE,CAAC,gBAAgB,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/D,mBAAmB,EAAE,CACnB,gBAAgB,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,KAC/C,IAAI,CAAC;IACV,sBAAsB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACtD;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sCAfH,MAAM,KAAK,IAAI;kDACH,MAAM,GAAG,IAAI,KAAK,IAAI;2CAC7B,IAAI;4CACH,MAAM,KAAK,IAAI;gCAC3B,SAAS,KAAK,IAAI;sCACZ,QAAQ,KAAK,IAAI;wDACC,OAAO,KAAK,IAAI;8CAC1B,MAAM,GAAG,IAAI,KAAK,IAAI;sDACd,MAAM,GAAG,IAAI,KAAK,IAAI;;;qBAGzD,IAAI;mDAC4B,MAAM,KAAK,IAAI;;CAsHrD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.14.1-next.15",
+  "version": "0.14.1-next.17",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",

package/src/components/BlockchainsSection/BlockchainsSection.tsx

@@ -11,28 +11,31 @@ import {
 } from '@rango-dev/ui';
 import React from 'react';
 
+import { BLOCKCHAIN_LIST_SIZE } from '../../constants/configs';
 import { usePrepareBlockchainList } from '../../hooks/usePrepareBlockchainList';
 import { useBestRouteStore } from '../../store/bestRoute';
 import { useMetaStore } from '../../store/meta';
 
 import { Container } from './BlockchainsSection.styles';
 
-const LIST_SIZE = 10;
-const MAX_ITEMS = LIST_SIZE + 1;
 const NUMBER_OF_LOADING = 12;
 
 export function BlockchainsSection(props: PropTypes) {
   const { blockchains, type, blockchain, onChange, onMoreClick } = props;
   const blockchainsList = usePrepareBlockchainList(blockchains, {
-    limit: blockchains.length === MAX_ITEMS ? MAX_ITEMS : LIST_SIZE,
+    limit: BLOCKCHAIN_LIST_SIZE,
     selected: blockchain?.name,
   });
 
   const loadingStatus = useMetaStore.use.loadingStatus();
   const resetToBlockchain = useBestRouteStore.use.resetToBlockchain();
   const resetFromBlockchain = useBestRouteStore.use.resetFromBlockchain();
-  const showMoreButton =
-    blockchains.length !== MAX_ITEMS && blockchainsList.more.length;
+  const hasMoreItemsInList = blockchainsList.more.length > 0;
+  /**
+   * When only one item is left on list, we will not show the `More` button and will show the item itself instead.
+   */
+  const onlyOneItemInList = blockchainsList.more.length === 1;
+  const showMoreButton = !onlyOneItemInList && hasMoreItemsInList;
 
   return (
     <div>
@@ -70,8 +73,20 @@ export function BlockchainsSection(props: PropTypes) {
               </BlockchainsChip>
             ))}
 
+            {onlyOneItemInList ? (
+              <BlockchainsChip
+                key={blockchainsList.more[0].name}
+                selected={
+                  !!blockchain &&
+                  blockchain.name === blockchainsList.more[0].name
+                }
+                onClick={() => onChange(blockchainsList.more[0])}>
+                <Image src={blockchainsList.more[0].logo} size={30} />
+              </BlockchainsChip>
+            ) : null}
+
             {showMoreButton ? (
-              <BlockchainsChip onClick={onMoreClick}>
+              <BlockchainsChip onClick={onMoreClick} key="more-blockchains">
                 <Typography variant="body" size="xsmall" color="secondary500">
                   {i18n._('More +{count}', {
                     count: blockchainsList.more.length,

package/src/constants/configs.ts

@@ -0,0 +1 @@
+export const BLOCKCHAIN_LIST_SIZE = 10;

package/src/hooks/usePrepareBlockchainList/index.ts

@@ -0,0 +1 @@
+export { usePrepareBlockchainList } from './usePrepareBlockchainList';

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.constants.ts

@@ -0,0 +1 @@
+export const MOST_USED_BLOCKChAINS = ['ETH', 'COSMOS', 'OSMOSIS'];

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.helpers.ts

@@ -0,0 +1,108 @@
+import type { PrepareListOptions } from './usePrepareBlockchainList.types';
+import type { BlockchainMeta } from 'rango-sdk';
+
+import { MOST_USED_BLOCKChAINS } from './usePrepareBlockchainList.constants';
+
+export function prepare(
+  blockchains: BlockchainMeta[],
+  preferredBlockchains: string[],
+  options?: PrepareListOptions
+) {
+  /*
+   * TODO:
+   * We copying the `blockchains` which can causes performance penalties but we should because we are mutating the original object.
+   * A better way to solve the problem maybe is using new JS features like Use toSpliced() but
+   * we can not use it right now because we need to upgrade our toolings first.
+   */
+  const list: BlockchainMeta[] = JSON.parse(JSON.stringify(blockchains));
+  let more: BlockchainMeta[] = [];
+
+  list.sort(sortByMostUsedBlockchains);
+
+  // 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;
+    let preferredBlockchainsWithoutMainList = preferredBlockchains;
+
+    if (preferredBlockchains.length <= options.limit) {
+      /*
+       * For first X (limit) numbers, we need to remove them from preferred if exists.
+       */
+      for (let i = 0; i < options.limit; i++) {
+        const blockchain = list[i];
+        preferredBlockchainsWithoutMainList =
+          preferredBlockchainsWithoutMainList.filter((preferredBlockchain) => {
+            return blockchain.name !== preferredBlockchain;
+          });
+      }
+    }
+    list.sort(
+      generateSortByPreferredBlockchainsFor(preferredBlockchainsWithoutMainList)
+    );
+
+    /*
+     * Splice will modify the original list and returns the deleted items
+     * We use the deleted items as `more`
+     */
+    more = list.splice(start);
+  }
+  return {
+    list,
+    more,
+  };
+}
+
+/** There is a hardcoded list of blockchains that we want to show them first in the list. */
+export function sortByMostUsedBlockchains(
+  a: BlockchainMeta,
+  b: BlockchainMeta
+) {
+  const mostUsed = MOST_USED_BLOCKChAINS;
+  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;
+}
+
+export function generateSortByPreferredBlockchainsFor(
+  preferredBlockchains: string[]
+) {
+  return function sortByPreferred(a: BlockchainMeta, b: BlockchainMeta) {
+    const aIndexInPreferred = preferredBlockchains.findIndex(
+      (blockchain) => blockchain === a.name
+    );
+    const bIndexInPreferred = preferredBlockchains.findIndex(
+      (blockchain) => blockchain === b.name
+    );
+
+    const aIsPreferred = aIndexInPreferred > -1;
+    const bIsPreferred = bIndexInPreferred > -1;
+
+    if (aIsPreferred && bIsPreferred) {
+      return aIndexInPreferred > bIndexInPreferred ? 1 : -1;
+    }
+
+    if (preferredBlockchains.includes(a.name)) {
+      return -1;
+    }
+    if (preferredBlockchains.includes(b.name)) {
+      return 1;
+    }
+
+    return 0;
+  };
+}