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

package/src/store/slices/data.ts

@@ -0,0 +1,203 @@
+// We keep all the received data from server in this slice
+
+import type { ConfigSlice } from './config';
+import type { BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
+import type { StateCreator } from 'zustand';
+
+import { httpService as sdk } from '../../services/httpService';
+import { containsText } from '../../utils/common';
+import { tokensAreEqual } from '../../utils/wallets';
+
+type BlockchainOptions = {
+  type?: 'source' | 'destination';
+};
+
+type TokenOptions = {
+  type?: 'source' | 'destination';
+  // filter by an specific blockchain
+  blockchain?: string;
+  searchFor?: string;
+};
+
+export interface DataSlice {
+  _blockchains: BlockchainMeta[];
+  _tokens: Token[];
+  _popularTokens: Token[];
+  _swappers: SwapperMeta[];
+
+  blockchains: (options?: BlockchainOptions) => BlockchainMeta[];
+  tokens: (options?: TokenOptions) => Token[];
+  isTokenPinned: (token: Token) => boolean;
+
+  fetch: () => Promise<void>;
+}
+
+export const createDataSlice: StateCreator<
+  DataSlice & ConfigSlice,
+  [],
+  [],
+  DataSlice
+> = (set, get) => ({
+  // State
+  _blockchains: [],
+  _tokens: [],
+  _popularTokens: [],
+  _swappers: [],
+
+  // Selectors
+  blockchains: (options) => {
+    const blockchainsFromState = get()._blockchains;
+
+    if (!options || !options?.type) {
+      return blockchainsFromState;
+    }
+
+    const config = get().config;
+    const supportedBlockchainsFromConfig =
+      (options.type === 'source'
+        ? config.from?.blockchains
+        : config.to?.blockchains) ?? [];
+
+    const list = blockchainsFromState.filter((blockchain) => {
+      if (
+        supportedBlockchainsFromConfig.length > 0 &&
+        !supportedBlockchainsFromConfig.includes(blockchain.name)
+      ) {
+        return false;
+      }
+
+      return true;
+    });
+
+    return list;
+  },
+  tokens: (options) => {
+    const tokensFromState = get()._tokens;
+
+    if (!options || !options?.type) {
+      return tokensFromState;
+    }
+
+    const config = get().config;
+    const supportedTokensFromConfig =
+      (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);
+          })
+        ) {
+          return false;
+        }
+
+        // If a specific blockchain has passed, we only keep that blockchain's tokens.
+        if (!!options.blockchain && token.blockchain !== options.blockchain) {
+          return false;
+        }
+
+        // Check only available blockchains
+        if (
+          !blockchains.some((blockchain) => {
+            return blockchain.name === token.blockchain;
+          })
+        ) {
+          return false;
+        }
+
+        // Search functionality
+        if (options.searchFor) {
+          if (
+            containsText(token.symbol, options.searchFor) ||
+            containsText(token.address || '', options.searchFor) ||
+            containsText(token.name || '', options.searchFor)
+          ) {
+            return true;
+          }
+
+          return false;
+        }
+
+        return true;
+      })
+      .sort((a, b) => {
+        // Check pinned tokens
+        if (get().isTokenPinned(a)) {
+          return -1;
+        }
+        if (get().isTokenPinned(b)) {
+          return 1;
+        }
+
+        // Check secondary coins
+        if (a.isSecondaryCoin) {
+          return 1;
+        }
+        if (b.isSecondaryCoin) {
+          return -1;
+        }
+
+        // Check it has an address or not.
+        if (!a.address && b.address) {
+          return -1;
+        }
+        if (a.address && !b.address) {
+          return 1;
+        }
+
+        return 0;
+      });
+
+    return list;
+  },
+  isTokenPinned: (token) => {
+    const pinned = !!get().config.pinnedTokens?.some((pinnedToken) =>
+      tokensAreEqual(pinnedToken, token)
+    );
+    return pinned;
+  },
+
+  // Actions
+  fetch: async () => {
+    const response = await sdk().getAllMetadata();
+
+    const blockchains: BlockchainMeta[] = [];
+    const tokens: Token[] = [];
+    const popularTokens: Token[] = response.popularTokens;
+    const swappers: SwapperMeta[] = response.swappers;
+
+    const blockchainsWithAtLeastOneToken = new Set();
+
+    response.tokens.forEach((token) => {
+      blockchainsWithAtLeastOneToken.add(token.blockchain);
+
+      tokens.push(token);
+    });
+
+    response.blockchains.forEach((blockchain) => {
+      if (
+        blockchain.enabled &&
+        blockchainsWithAtLeastOneToken.has(blockchain.name)
+      ) {
+        blockchains.push(blockchain);
+      }
+    });
+
+    // Sort
+    blockchains.sort((a, b) => a.sort - b.sort);
+
+    set({
+      _blockchains: blockchains,
+      _tokens: tokens,
+      _popularTokens: popularTokens,
+      _swappers: swappers,
+    });
+  },
+});

package/src/store/wallets.ts

@@ -3,18 +3,14 @@ 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 {
-  getTokensWithBalance,
   isAccountAndWalletMatched,
   makeBalanceFor,
   resetConnectedWalletState,
-  sortTokens,
 } from '../utils/wallets';
 
-import { useBestRouteStore } from './bestRoute';
 import { useMetaStore } from './meta';
 import createSelectors from './selectors';
 
@@ -212,28 +208,5 @@ export const useWalletsStore = createSelectors(
   )
 );
 
-useWalletsStore.subscribe(
-  (state) => state.connectedWallets,
-  (connectedWallets) => {
-    useBestRouteStore.setState(({ sourceTokens, destinationTokens }) => {
-      const sourceTokensWithBalance = getTokensWithBalance(
-        sourceTokens,
-        connectedWallets
-      );
-      const destinationTokensWithBalance = getTokensWithBalance(
-        destinationTokens,
-        connectedWallets
-      );
-      return {
-        sourceTokens: sortTokens(sourceTokensWithBalance),
-        destinationTokens: sortTokens(destinationTokensWithBalance),
-      };
-    });
-  },
-  {
-    equalityFn: shallow,
-  }
-);
-
 export const fetchingBalanceSelector = (state: WalletsStore) =>
   !!state.connectedWallets.find((wallet) => wallet.loading);

package/src/utils/configs.ts

@@ -1,9 +1,9 @@
+import { RANGO_PUBLIC_API_KEY } from '../constants';
+
 export interface Configs {
   API_KEY: string;
 }
 
-const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
-
 let configs: Configs = {
   API_KEY: RANGO_PUBLIC_API_KEY,
 };
@@ -18,6 +18,9 @@ export function setConfig(name: keyof Configs, value: any) {
   return value;
 }
 
+/**
+ * Getting new configs from params and reset the value of global `configs` with provided param.
+ */
 export function initConfig(nextConfigs: Configs) {
   let clonedConfigs;
   if (typeof structuredClone === 'function') {

package/src/utils/wallets.ts

@@ -428,7 +428,6 @@ export function getTokensWithBalance(
   tokens: TokenWithBalance[],
   connectedWallets: ConnectedWallet[]
 ): TokenWithBalance[] {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   return tokens.map(({ balance, ...otherProps }) => {
     const tokenAmount = numberToString(
       new BigNumber(
@@ -464,6 +463,43 @@ export function getTokensWithBalance(
   });
 }
 
+export function getTokensBalanceFromWalletAndSort(
+  tokens: TokenWithBalance[],
+  connectedWallets: ConnectedWallet[]
+) {
+  const list =
+    connectedWallets.length > 0
+      ? getTokensWithBalance(tokens, connectedWallets)
+      : tokens;
+  list.sort((tokenA, tokenB) => {
+    if (tokenA.balance?.usdValue && tokenB.balance?.usdValue) {
+      return (
+        parseFloat(tokenB.balance.usdValue) -
+        parseFloat(tokenA.balance.usdValue)
+      );
+    }
+
+    if (!tokenA.balance?.usdValue && tokenB.balance?.usdValue) {
+      return 1;
+    }
+
+    if (tokenA.balance?.usdValue && !tokenB.balance?.usdValue) {
+      return -1;
+    }
+
+    if (!tokenA.balance?.usdValue && !tokenB.balance?.usdValue) {
+      return (
+        parseFloat(tokenB.balance?.amount || '0') -
+        parseFloat(tokenA.balance?.amount || '0')
+      );
+    }
+
+    return 0;
+  });
+
+  return list;
+}
+
 export function getSortedTokens(
   chain: BlockchainMeta | null,
   tokens: Token[],
@@ -475,6 +511,7 @@ export function getSortedTokens(
   if (fromChainEqualsToToBlockchain) {
     return otherChainTokens;
   }
+
   const filteredTokens = tokens.filter(
     (token) => token.blockchain === chain?.name
   );
@@ -492,23 +529,6 @@ export function tokensAreEqual(
   );
 }
 
-export function getDefaultToken(
-  sortedTokens: TokenWithBalance[],
-  otherToken: TokenWithBalance | null
-): TokenWithBalance {
-  let selectedToken: TokenWithBalance;
-  const firstToken = sortedTokens[0];
-  const secondToken = sortedTokens[1];
-  if (sortedTokens.length === 1) {
-    selectedToken = firstToken;
-  } else if (tokensAreEqual(firstToken, otherToken)) {
-    selectedToken = secondToken;
-  } else {
-    selectedToken = firstToken;
-  }
-  return selectedToken;
-}
-
 export function sortWalletsBasedOnConnectionState(
   wallets: ModalWalletInfo[]
 ): ModalWalletInfo[] {

package/dist/components/BlockchainsSection/BlockchainSection.helpers.d.ts

@@ -1,3 +0,0 @@
-import type { BlockchainMeta } from 'rango-sdk';
-export declare const sortBlockchains: (blockchains: BlockchainMeta[]) => BlockchainMeta[];
-//# sourceMappingURL=BlockchainSection.helpers.d.ts.map

package/dist/components/BlockchainsSection/BlockchainSection.helpers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BlockchainSection.helpers.d.ts","sourceRoot":"","sources":["../../../src/components/BlockchainsSection/BlockchainSection.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAEhD,eAAO,MAAM,eAAe,gBAAiB,cAAc,EAAE,qBAiB5D,CAAC"}

package/src/components/BlockchainsSection/BlockchainSection.helpers.ts

@@ -1,20 +0,0 @@
-import type { BlockchainMeta } from 'rango-sdk';
-
-export const sortBlockchains = (blockchains: BlockchainMeta[]) => {
-  const importantBlockchains: BlockchainMeta[] = [];
-  const otherBlockchains: BlockchainMeta[] = [];
-
-  for (const blockchain of blockchains) {
-    if (
-      blockchain.name === 'ETH' ||
-      blockchain.name === 'COSMOS' ||
-      blockchain.name === 'OSMOSIS'
-    ) {
-      importantBlockchains.push(blockchain);
-    } else {
-      otherBlockchains.push(blockchain);
-    }
-  }
-
-  return importantBlockchains.concat(otherBlockchains);
-};