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

package/src/pages/SelectSwapItemsPage.tsx

@@ -1,43 +1,30 @@
-/* eslint-disable @typescript-eslint/no-magic-numbers */
-import type { Asset, Token } from 'rango-sdk';
+import type { BlockchainMeta, Token } from 'rango-sdk';
 
 import { i18n } from '@lingui/core';
 import { Divider } from '@rango-dev/ui';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { BlockchainsSection } from '../components/BlockchainsSection';
 import { Layout } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
 import { TokenList } from '../components/TokenList/TokenList';
-import { filterTokens } from '../components/TokenList/TokenList.helpers';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useAppStore } from '../store/app';
 import { useBestRouteStore } from '../store/bestRoute';
-import { useMetaStore } from '../store/meta';
 import { useWalletsStore } from '../store/wallets';
-import { findCommonTokens } from '../utils/routing';
-import { tokensAreEqual } from '../utils/wallets';
+import { getTokensBalanceFromWalletAndSort } from '../utils/wallets';
 
 interface PropTypes {
-  type: 'from' | 'to';
-  supportedBlockchains?: string[];
-  supportedTokens?: Asset[];
-  pinnedTokens?: Asset[];
+  type: 'source' | 'destination';
 }
 
 export function SelectSwapItemsPage(props: PropTypes) {
-  const { type, supportedBlockchains, supportedTokens, pinnedTokens } = props;
-  const [selectedBlockchain, setSelectedBlockchain] = useState('');
+  const { type } = props;
   const navigate = useNavigate();
   const { navigateBackFrom } = useNavigateBack();
   const {
-    meta: { tokens },
-    setTokensWithBalance,
-  } = useMetaStore();
-  const {
-    sourceTokens,
-    destinationTokens,
     fromBlockchain,
     toBlockchain,
     setFromToken,
@@ -45,89 +32,69 @@ export function SelectSwapItemsPage(props: PropTypes) {
     setFromBlockchain,
     setToBlockchain,
   } = useBestRouteStore();
-  const { connectedWallets, loading: loadingWallet } = useWalletsStore();
+  const { connectedWallets } = useWalletsStore();
   const [searchedFor, setSearchedFor] = useState<string>('');
 
-  const blockchains = supportedBlockchains
-    ? useMetaStore.use
-        .meta()
-        .blockchains.filter((chain) =>
-          supportedBlockchains.includes(chain.name)
-        )
-    : useMetaStore.use.meta().blockchains;
-
-  const allTokens = supportedTokens
-    ? findCommonTokens(supportedTokens, tokens)
-    : tokens.filter((token) =>
-        new Set(blockchains.map((blockchain) => blockchain.name)).has(
-          token.blockchain
-        )
-      );
-
-  const supportedSourceTokens = supportedTokens
-    ? findCommonTokens(supportedTokens, sourceTokens)
-    : sourceTokens;
-
-  const supportedDestinationTokens = supportedTokens
-    ? findCommonTokens(supportedTokens, destinationTokens)
-    : destinationTokens;
-
-  const tokensByType =
-    type === 'from' ? supportedSourceTokens : supportedDestinationTokens;
-
-  let tokenList: Token[] = [];
+  const selectedBlockchain = type === 'source' ? fromBlockchain : toBlockchain;
+  const selectedBlockchainName = selectedBlockchain?.name ?? '';
 
-  const noBlockchainSelected =
-    (type === 'from' && !fromBlockchain) || (type === 'to' && !toBlockchain);
+  // Tokens & Blockchains list
+  const blockchains = useAppStore().blockchains({
+    type: type,
+  });
+  const tokens = useAppStore().tokens({
+    type,
+    blockchain: selectedBlockchainName,
+    searchFor: searchedFor,
+  });
+  const tokensList = getTokensBalanceFromWalletAndSort(
+    tokens,
+    connectedWallets
+  );
 
-  if (noBlockchainSelected) {
-    tokenList = allTokens;
-  } else if (tokensByType.length) {
-    tokenList = tokensByType.map((token) => ({
-      ...token,
-      pin: pinnedTokens?.some((pinnedToken) =>
-        tokensAreEqual(pinnedToken, token)
-      ),
-    }));
-  }
+  // Actions
+  const updateBlockchain = (blockchain: BlockchainMeta) => {
+    if (type === 'source') {
+      setFromBlockchain(blockchain);
+    } else {
+      setToBlockchain(blockchain);
+    }
+  };
 
-  useEffect(() => {
-    if (connectedWallets.length && !loadingWallet) {
-      setTokensWithBalance();
+  const updateToken = (token: Token) => {
+    if (type === 'source') {
+      setFromToken(token);
+    } else {
+      setToToken(token);
     }
-  }, [connectedWallets, loadingWallet]);
+  };
 
   return (
     <Layout
       header={{
         onBack: () =>
           navigateBackFrom(
-            type === 'from'
+            type === 'source'
               ? navigationRoutes.fromSwap
               : navigationRoutes.toSwap
           ),
-        title: i18n.t('Swap {type}', { type }),
+        title: i18n.t('Swap {type}', {
+          type: type === 'source' ? 'from' : 'to',
+        }),
       }}>
       <BlockchainsSection
         blockchains={blockchains}
-        type={type}
-        blockchain={type === 'from' ? fromBlockchain : toBlockchain}
+        type={type == 'source' ? 'from' : 'to'}
+        blockchain={type === 'source' ? fromBlockchain : toBlockchain}
         onMoreClick={() =>
           navigate(
-            type === 'from'
+            type === 'source'
               ? navigationRoutes.fromBlockchain
               : navigationRoutes.toBlockchain
           )
         }
         onChange={(blockchain) => {
-          {
-            if (type === 'from') {
-              setFromBlockchain(blockchain, true);
-            } else {
-              setToBlockchain(blockchain, true);
-            }
-            setSelectedBlockchain(blockchain.name);
-          }
+          updateBlockchain(blockchain);
         }}
       />
       <Divider size={24} />
@@ -143,24 +110,19 @@ export function SelectSwapItemsPage(props: PropTypes) {
       />
       <Divider size={16} />
       <TokenList
-        list={filterTokens(tokenList, searchedFor)}
-        selectedBlockchain={selectedBlockchain}
+        list={tokensList}
+        selectedBlockchain={selectedBlockchainName}
         searchedFor={searchedFor}
         onChange={(token) => {
-          const blockchain = blockchains.find(
+          updateToken(token);
+
+          const tokenBlockchain = blockchains.find(
             (chain) => token.blockchain === chain.name
           );
-          if (type === 'from') {
-            setFromToken(token);
-            if (!!blockchain) {
-              setFromBlockchain(blockchain, true);
-            }
-          } else {
-            setToToken(token);
-            if (!!blockchain) {
-              setToBlockchain(blockchain, true);
-            }
+          if (tokenBlockchain) {
+            updateBlockchain(tokenBlockchain);
           }
+
           navigateBackFrom(navigationRoutes.fromSwap);
         }}
       />

package/src/services/httpService.ts

@@ -1,14 +1,13 @@
 import { RangoClient } from 'rango-sdk';
-import { getConfig } from '../utils/configs';
 
-// this API key is limited and
-// it is only for test purpose
-export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
+import { getConfig } from '../utils/configs';
 
 let rango: RangoClient | undefined = undefined;
 
 export const httpService = () => {
-  if (rango) return rango;
+  if (rango) {
+    return rango;
+  }
   rango = new RangoClient(getConfig('API_KEY'));
   return rango;
 };

package/src/store/app.ts

@@ -0,0 +1,15 @@
+import type { ConfigSlice } from './slices/config';
+import type { DataSlice } from './slices/data';
+
+import { create } from 'zustand';
+
+import createSelectors from './selectors';
+import { createConfigSlice } from './slices/config';
+import { createDataSlice } from './slices/data';
+
+const store = create<DataSlice & ConfigSlice>()((...a) => ({
+  ...createDataSlice(...a),
+  ...createConfigSlice(...a),
+}));
+
+export const useAppStore = createSelectors(store);

package/src/store/bestRoute.ts

@@ -11,15 +11,10 @@ import { ZERO } from '../constants/numbers';
 import { isPositiveNumber } from '../utils/numbers';
 import { getBestRouteToTokenUsdPrice } from '../utils/routing';
 import { calcOutputUsdValue } from '../utils/swap';
-import {
-  getDefaultToken,
-  getSortedTokens,
-  tokensAreEqual,
-} from '../utils/wallets';
+import { tokensAreEqual } from '../utils/wallets';
 
 import { useMetaStore } from './meta';
 import createSelectors from './selectors';
-import { useWalletsStore } from './wallets';
 
 const getUsdValue = (token: Token | null, amount: string): BigNumber | null =>
   token?.usdPrice
@@ -36,20 +31,12 @@ export interface RouteState {
   fromToken: TokenWithBalance | null;
   toToken: TokenWithBalance | null;
   routeWalletsConfirmed: boolean;
-  sourceTokens: Token[];
-  destinationTokens: Token[];
   selectedWallets: Wallet[];
   resetRoute: () => void;
   resetToBlockchain: () => void;
   resetFromBlockchain: () => void;
-  setFromBlockchain: (
-    chain: BlockchainMeta | null,
-    setDefaultToken?: boolean
-  ) => void;
-  setToBlockchain: (
-    chian: BlockchainMeta | null,
-    setDefaultToken?: boolean
-  ) => void;
+  setFromBlockchain: (chain: BlockchainMeta | null) => void;
+  setToBlockchain: (chian: BlockchainMeta | null) => void;
 
   setFromToken: (token: Token | null) => void;
   setToToken: (token: Token | null) => void;
@@ -78,8 +65,6 @@ export const useBestRouteStore = createSelectors(
       toToken: null,
       bestRoute: null,
       routeWalletsConfirmed: false,
-      sourceTokens: [],
-      destinationTokens: [],
       selectedWallets: [],
       customDestination: '',
       setRoute: (bestRoute) =>
@@ -112,66 +97,65 @@ export const useBestRouteStore = createSelectors(
           outputAmount: null,
           outputUsdValue: new BigNumber(0),
         })),
-      setFromBlockchain: (chain, setDefaultToken) => {
+      setFromBlockchain: (chain) => {
         set((state) => {
           if (state.fromBlockchain?.name === chain?.name) {
             return {};
           }
-          const tokens = useMetaStore.getState().meta.tokens;
-          const connectedWallets = useWalletsStore.getState().connectedWallets;
-          const sortedTokens = getSortedTokens(
-            chain,
-            tokens,
-            connectedWallets,
-            state.destinationTokens
-          );
-          const fromToken = getDefaultToken(sortedTokens, state.toToken);
+
           return {
             fromBlockchain: chain,
-            sourceTokens: sortedTokens,
-            ...(setDefaultToken && {
-              fromToken,
-            }),
-            ...(!!state.inputAmount && {
-              inputUsdValue: getUsdValue(fromToken, state.inputAmount),
+            ...(state.fromToken && {
+              bestRoute: null,
+              fromToken: null,
+              outputAmount: null,
+              outputUsdValue: null,
             }),
           };
         });
       },
-      setFromToken: (token) =>
-        set((state) => ({
+      setFromToken: (token) => {
+        const { blockchains } = useMetaStore.getState().meta;
+        const fromBlockchain =
+          blockchains.find(
+            (blockchain) => blockchain.name === token?.blockchain
+          ) ?? null;
+        return set((state) => ({
           fromToken: token,
+          fromBlockchain,
           ...(!!state.inputAmount && {
             inputUsdValue: getUsdValue(token, state.inputAmount),
           }),
-        })),
-      setToBlockchain: (chain, setDefaultToken) => {
+        }));
+      },
+      setToBlockchain: (chain) => {
         set((state) => {
           if (state.toBlockchain?.name === chain?.name) {
             return {};
           }
-          const tokens = useMetaStore.getState().meta.tokens;
-          const connectedWallets = useWalletsStore.getState().connectedWallets;
-          const sortedTokens = getSortedTokens(
-            chain,
-            tokens,
-            connectedWallets,
-            state.destinationTokens
-          );
 
           return {
             toBlockchain: chain,
-            destinationTokens: sortedTokens,
-            ...(setDefaultToken && {
-              toToken: getDefaultToken(sortedTokens, state.fromToken),
+            ...(state.toToken && {
+              bestRoute: null,
+              toToken: null,
+              outputAmount: null,
+              outputUsdValue: null,
             }),
           };
         });
       },
-      setToToken: (token) =>
-        set(() => ({
+      setToToken: (token) => {
+        const { blockchains } = useMetaStore.getState().meta;
+        const toBlockchain =
+          blockchains.find(
+            (blockchain) => blockchain.name === token?.blockchain
+          ) ?? null;
+        return set(() => ({
           toToken: token,
-        })),
+          toBlockchain,
+        }));
+      },
       setInputAmount: (amount) => {
         set((state) => ({
           inputAmount: amount,
@@ -187,7 +171,6 @@ export const useBestRouteStore = createSelectors(
       },
       retry: (pendingSwap) => {
         const { tokens, blockchains } = useMetaStore.getState().meta;
-        const connectedWallets = useWalletsStore.getState().connectedWallets;
         const failedIndex =
           pendingSwap.status === 'failed'
             ? pendingSwap.steps.findIndex((s) => s.status === 'failed')
@@ -223,18 +206,7 @@ export const useBestRouteStore = createSelectors(
             address: lastStep.toSymbolAddress,
           })
         );
-        const sortedSourceTokens = getSortedTokens(
-          fromBlockchain,
-          tokens,
-          connectedWallets,
-          []
-        );
-        const sortedDestinationTokens = getSortedTokens(
-          toBlockchain,
-          tokens,
-          connectedWallets,
-          []
-        );
+
         const inputAmount = pendingSwap.inputAmount;
         set({
           fromBlockchain,
@@ -246,8 +218,6 @@ export const useBestRouteStore = createSelectors(
           toBlockchain,
           toToken,
           bestRoute: null,
-          sourceTokens: sortedSourceTokens,
-          destinationTokens: sortedDestinationTokens,
         });
       },
       switchFromAndTo: () =>
@@ -256,8 +226,6 @@ export const useBestRouteStore = createSelectors(
           fromToken: state.toToken,
           toBlockchain: state.fromBlockchain,
           toToken: state.fromToken,
-          sourceTokens: state.destinationTokens,
-          destinationTokens: state.sourceTokens,
           inputAmount: state.outputAmount?.toString() || '',
           inputUsdValue: getUsdValue(
             state.toToken,
@@ -267,13 +235,19 @@ export const useBestRouteStore = createSelectors(
 
       resetFromBlockchain: () =>
         set(() => ({
+          fromToken: null,
           fromBlockchain: null,
-          sourceTokens: [],
+          outputAmount: null,
+          outputUsdValue: null,
+          bestRoute: null,
         })),
       resetToBlockchain: () =>
         set(() => ({
+          toToken: null,
           toBlockchain: null,
-          destinationTokens: [],
+          outputAmount: null,
+          outputUsdValue: null,
+          bestRoute: null,
         })),
       setRouteWalletConfirmed: (flag) =>
         set({

package/src/store/meta.ts

@@ -3,12 +3,8 @@ import type { MetaResponse } from 'rango-sdk';
 
 import { create } from 'zustand';
 
-import { httpService } from '../services/httpService';
-import { removeDuplicateFrom } from '../utils/common';
-import { getTokensWithBalance, sortTokens } from '../utils/wallets';
-
+import { useAppStore } from './app';
 import createSelectors from './selectors';
-import { useWalletsStore } from './wallets';
 
 export type LoadingStatus = 'loading' | 'success' | 'failed';
 
@@ -16,38 +12,24 @@ export interface MetaState {
   meta: MetaResponse & { tokens: TokenWithBalance[] };
   loadingStatus: LoadingStatus;
   fetchMeta: () => Promise<void>;
-  setTokensWithBalance: () => void;
 }
 
 export const useMetaStore = createSelectors(
   create<MetaState>()((set) => ({
     meta: { blockchains: [], popularTokens: [], swappers: [], tokens: [] },
     loadingStatus: 'loading',
-    setTokensWithBalance: () => {
-      const connectedWallets = useWalletsStore.getState().connectedWallets;
-
-      set((state) => ({
-        ...state,
-        meta: {
-          ...state.meta,
-          tokens: sortTokens(
-            getTokensWithBalance(state.meta.tokens, connectedWallets)
-          ),
-        },
-      }));
-    },
     fetchMeta: async () => {
       try {
-        const response = await httpService().getAllMetadata();
-        const chainThatHasTokenInMetaResponse = removeDuplicateFrom(
-          response.tokens.map((t) => t.blockchain)
-        );
-        const enabledChains = response.blockchains.filter(
-          (chain) =>
-            chain.enabled &&
-            chainThatHasTokenInMetaResponse.includes(chain.name)
-        );
-        response.blockchains = enabledChains.sort((a, b) => a.sort - b.sort);
+        await useAppStore.getState().fetch();
+
+        const state = useAppStore.getState();
+        const response: MetaResponse = {
+          blockchains: state.blockchains(),
+          tokens: state.tokens(),
+          popularTokens: state._popularTokens,
+          swappers: state._swappers,
+        };
+
         set({ meta: response, loadingStatus: 'success' });
       } catch (error) {
         set({ loadingStatus: 'failed' });

package/src/store/slices/config.ts

@@ -0,0 +1,26 @@
+import type { WidgetConfig } from '../../types';
+import type { StateCreator } from 'zustand';
+
+const initConfig: WidgetConfig = { apiKey: '' };
+
+export type ConfigSlice = {
+  config: WidgetConfig;
+
+  updateConfig: (config: WidgetConfig) => void;
+};
+
+export const createConfigSlice: StateCreator<ConfigSlice> = (set, get) => ({
+  config: initConfig,
+
+  // Actions
+  updateConfig: (nextConfig: WidgetConfig) => {
+    const currentConfig = get().config;
+
+    set({
+      config: {
+        ...currentConfig,
+        ...nextConfig,
+      },
+    });
+  },
+});