@rango-dev/widget-embedded 0.18.0 → 0.19.0

package/src/pages/LiquiditySourcePage.tsx

@@ -23,22 +23,32 @@ import {
   NotFoundContainer,
   SettingsContainer,
 } from '../components/SettingsContainer';
-import { useAppStore } from '../store/AppStore';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useMetaStore } from '../store/meta';
+import { useSettingsStore } from '../store/settings';
 import { containsText } from '../utils/numbers';
-import { getUniqueSwappersGroups } from '../utils/settings';
+import {
+  getUniqueSwappersGroups,
+  sortLiquiditySourcesByGroupTitle,
+} from '../utils/settings';
 
 interface PropTypes {
+  supportedSwappers?: string[];
   sourceType: 'Exchanges' | 'Bridges';
 }
 
-export function LiquiditySourcePage({ sourceType }: PropTypes) {
-  const fetchStatus = useAppStore().fetchStatus;
-  const swappers = useAppStore().swappers();
-  const disabledLiquiditySources = useAppStore().disabledLiquiditySources;
+export function LiquiditySourcePage({
+  supportedSwappers,
+  sourceType,
+}: PropTypes) {
   const [searchedFor, setSearchedFor] = useState<string>('');
-  const toggleLiquiditySource = useAppStore().toggleLiquiditySource;
+  const toggleLiquiditySource = useSettingsStore.use.toggleLiquiditySource();
+  const { navigateBackFrom } = useNavigateBack();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+
   const supportedUniqueSwappersGroups: Array<UniqueSwappersGroupType> =
-    getUniqueSwappersGroups(swappers, disabledLiquiditySources);
+    getUniqueSwappersGroups(supportedSwappers);
 
   const validTypes: Array<LiquiditySourceType> = [];
   if (sourceType === 'Exchanges') {
@@ -69,20 +79,22 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
     });
   };
 
-  const list = liquiditySources.map((sourceItem) => {
-    const { selected, groupTitle, logo } = sourceItem;
-    return {
-      start: <Image src={logo} size={22} type="circular" />,
-      onClick: () => toggleLiquiditySource(groupTitle),
-      end: <Checkbox checked={selected} />,
-      title: (
-        <Typography variant="title" size="xmedium">
-          {i18n.t(groupTitle)}
-        </Typography>
-      ),
-      ...sourceItem,
-    };
-  });
+  const list = liquiditySources
+    .sort(sortLiquiditySourcesByGroupTitle)
+    .map((sourceItem) => {
+      const { selected, groupTitle, logo } = sourceItem;
+      return {
+        start: <Image src={logo} size={22} type="circular" />,
+        onClick: () => toggleLiquiditySource(groupTitle),
+        end: <Checkbox checked={selected} />,
+        title: (
+          <Typography variant="title" size="xmedium">
+            {i18n.t(groupTitle)}
+          </Typography>
+        ),
+        ...sourceItem,
+      };
+    });
 
   const searchHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
@@ -99,6 +111,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
   return (
     <Layout
       header={{
+        onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
         title: i18n.t(sourceType),
         suffix: (
           <LiquiditySourceSuffix>
@@ -118,7 +131,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
           placeholder={i18n.t('Search {sourceType}', { sourceType })}
           onChange={searchHandler}
         />
-        {fetchStatus === 'loading' && <LoadingLiquiditySourceList />}
+        {loadingMetaStatus === 'loading' && <LoadingLiquiditySourceList />}
 
         {!filteredList.length && !!searchedFor ? (
           <NotFoundContainer>
@@ -128,7 +141,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
             />
           </NotFoundContainer>
         ) : (
-          fetchStatus === 'success' && (
+          loadingMetaStatus === 'success' && (
             <LiquiditySourceList>
               {filteredList.map((sourceItem) => {
                 return (

package/src/pages/SelectBlockchainPage.tsx

@@ -1,17 +1,15 @@
 import { i18n } from '@lingui/core';
-import {
-  Divider,
-  getCountCategories,
-  SelectableCategoryList
-} from '@rango-dev/ui';
+import { Divider, SelectableCategoryList } from '@rango-dev/ui';
 import React, { useState } from 'react';
 
 import { BlockchainList } from '../components/BlockchainList';
 import { Layout } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
+import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
-import { useAppStore } from '../store/AppStore';
-import { useQuoteStore } from '../store/quote';
+import { useAppStore } from '../store/app';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useMetaStore } from '../store/meta';
 
 interface PropTypes {
   type: 'source' | 'destination';
@@ -19,40 +17,34 @@ interface PropTypes {
 
 export function SelectBlockchainPage(props: PropTypes) {
   const { type } = props;
-  const navigateBack = useNavigateBack();
+  const { navigateBackFrom } = useNavigateBack();
   const [searchedFor, setSearchedFor] = useState<string>('');
   const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
-  const setToBlockchain = useQuoteStore.use.setToBlockchain();
-  const setFromBlockchain = useQuoteStore.use.setFromBlockchain();
-  const fetchStatus = useAppStore().fetchStatus;
+  const setToBlockchain = useBestRouteStore.use.setToBlockchain();
+  const setFromBlockchain = useBestRouteStore.use.setFromBlockchain();
+  const { loadingStatus } = useMetaStore();
 
   const blockchains = useAppStore().blockchains({
-    type: type
+    type: type,
   });
-
-  const countActiveCategories = getCountCategories(blockchains);
-
-  const showCategory = countActiveCategories !== 1;
+  const routeKey = type === 'source' ? 'fromBlockchain' : 'toBlockchain';
 
   return (
     <Layout
       header={{
-        title: i18n.t(`Select Blockchain`)
+        onBack: () => {
+          navigateBackFrom(navigationRoutes[routeKey]);
+        },
+        title: i18n.t(`Select Blockchain`),
       }}>
       <Divider size={12} />
-
-      {showCategory && (
-        <>
-          <SelectableCategoryList
-            setCategory={setBlockchainCategory}
-            category={blockchainCategory}
-            blockchains={blockchains}
-            isLoading={fetchStatus === 'loading'}
-          />
-          <Divider size={24} />
-        </>
-      )}
-
+      <SelectableCategoryList
+        setCategory={setBlockchainCategory}
+        category={blockchainCategory}
+        blockchains={blockchains}
+        isLoading={loadingStatus === 'loading'}
+      />
+      <Divider size={24} />
       <SearchInput
         value={searchedFor}
         autoFocus
@@ -75,7 +67,8 @@ export function SelectBlockchainPage(props: PropTypes) {
           } else {
             setToBlockchain(blockchain);
           }
-          navigateBack();
+
+          navigateBackFrom(navigationRoutes[routeKey]);
         }}
       />
     </Layout>

package/src/pages/SelectSwapItemsPage.tsx

@@ -11,10 +11,10 @@ import { SearchInput } from '../components/SearchInput';
 import { TokenList } from '../components/TokenList/TokenList';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
-import { useAppStore } from '../store/AppStore';
-import { useQuoteStore } from '../store/quote';
+import { useAppStore } from '../store/app';
+import { useBestRouteStore } from '../store/bestRoute';
 import { useWalletsStore } from '../store/wallets';
-import { sortTokens } from '../utils/wallets';
+import { getTokensBalanceFromWalletAndSort } from '../utils/wallets';
 
 interface PropTypes {
   type: 'source' | 'destination';
@@ -23,7 +23,7 @@ interface PropTypes {
 export function SelectSwapItemsPage(props: PropTypes) {
   const { type } = props;
   const navigate = useNavigate();
-  const navigateBack = useNavigateBack();
+  const { navigateBackFrom } = useNavigateBack();
   const {
     fromBlockchain,
     toBlockchain,
@@ -31,28 +31,28 @@ export function SelectSwapItemsPage(props: PropTypes) {
     setToToken,
     setFromBlockchain,
     setToBlockchain,
-  } = useQuoteStore();
-  const getBalanceFor = useWalletsStore.use.getBalanceFor();
+  } = useBestRouteStore();
+  const { connectedWallets } = useWalletsStore();
   const [searchedFor, setSearchedFor] = useState<string>('');
-  const { isTokenPinned } = useAppStore();
 
   const selectedBlockchain = type === 'source' ? fromBlockchain : toBlockchain;
   const selectedBlockchainName = selectedBlockchain?.name ?? '';
 
   // Tokens & Blockchains list
   const blockchains = useAppStore().blockchains({
-    type,
+    type: type,
   });
   const tokens = useAppStore().tokens({
     type,
     blockchain: selectedBlockchainName,
     searchFor: searchedFor,
   });
+  const tokensList = getTokensBalanceFromWalletAndSort(
+    tokens,
+    connectedWallets
+  );
 
-  const checkIsTokenPinned = (token: Token) => isTokenPinned(token, type);
-
-  const tokensList = sortTokens(tokens, getBalanceFor, checkIsTokenPinned);
-
+  // Actions
   const updateBlockchain = (blockchain: BlockchainMeta) => {
     if (type === 'source') {
       setFromBlockchain(blockchain);
@@ -63,22 +63,36 @@ export function SelectSwapItemsPage(props: PropTypes) {
 
   const updateToken = (token: Token) => {
     if (type === 'source') {
-      setFromToken({ token, meta: { blockchains, tokens } });
+      setFromToken(token);
     } else {
-      setToToken({ token, meta: { blockchains, tokens } });
+      setToToken(token);
     }
   };
 
   return (
     <Layout
       header={{
-        title: i18n.t('Swap {type}', { type }),
+        onBack: () =>
+          navigateBackFrom(
+            type === 'source'
+              ? navigationRoutes.fromSwap
+              : navigationRoutes.toSwap
+          ),
+        title: i18n.t('Swap {type}', {
+          type: type === 'source' ? 'from' : 'to',
+        }),
       }}>
       <BlockchainsSection
         blockchains={blockchains}
         type={type == 'source' ? 'from' : 'to'}
         blockchain={type === 'source' ? fromBlockchain : toBlockchain}
-        onMoreClick={() => navigate(navigationRoutes.blockchains)}
+        onMoreClick={() =>
+          navigate(
+            type === 'source'
+              ? navigationRoutes.fromBlockchain
+              : navigationRoutes.toBlockchain
+          )
+        }
         onChange={(blockchain) => {
           updateBlockchain(blockchain);
         }}
@@ -99,7 +113,6 @@ export function SelectSwapItemsPage(props: PropTypes) {
         list={tokensList}
         selectedBlockchain={selectedBlockchainName}
         searchedFor={searchedFor}
-        type={type}
         onChange={(token) => {
           updateToken(token);
 
@@ -110,7 +123,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
             updateBlockchain(tokenBlockchain);
           }
 
-          navigateBack();
+          navigateBackFrom(navigationRoutes.fromSwap);
         }}
       />
     </Layout>

package/src/pages/SettingsPage.tsx

@@ -18,32 +18,27 @@ import { SettingsContainer } from '../components/SettingsContainer';
 import { Slippage } from '../components/Slippage';
 import { SlippageTooltipContainer as TooltipContainer } from '../components/Slippage/Slippage.styles';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import { useAppStore } from '../store/AppStore';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useMetaStore } from '../store/meta';
+import { useSettingsStore } from '../store/settings';
 import { getContainer } from '../utils/common';
-import { getUniqueSwappersGroups, isFeatureHidden } from '../utils/settings';
+import { getUniqueSwappersGroups } from '../utils/settings';
 
-export function SettingsPage() {
-  const navigate = useNavigate();
-  const { theme } = useAppStore().config;
-  const fetchStatus = useAppStore().fetchStatus;
-  const swappers = useAppStore().swappers();
-  const disabledLiquiditySources = useAppStore().disabledLiquiditySources;
-  const {
-    config: { features },
-  } = useAppStore();
-  const isThemeHidden = isFeatureHidden('theme', features);
+interface PropTypes {
+  supportedSwappers?: string[];
+  singleTheme?: boolean;
+}
 
-  const isLiquidityHidden = isFeatureHidden('liquiditySource', features);
+export function SettingsPage({ supportedSwappers, singleTheme }: PropTypes) {
+  const navigate = useNavigate();
+  const { navigateBackFrom } = useNavigateBack();
 
-  const isLanguageHidden = isFeatureHidden('language', features);
+  const infiniteApprove = useSettingsStore.use.infiniteApprove();
+  const toggleInfiniteApprove = useSettingsStore.use.toggleInfiniteApprove();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
 
-  const infiniteApprove = useAppStore().infiniteApprove;
-  const toggleInfiniteApprove = useAppStore().toggleInfiniteApprove;
-
-  const supportedUniqueSwappersGroups = getUniqueSwappersGroups(
-    swappers,
-    disabledLiquiditySources
-  );
+  const supportedUniqueSwappersGroups =
+    getUniqueSwappersGroups(supportedSwappers);
 
   const bridgeSources = supportedUniqueSwappersGroups.filter(
     (uniqueItem) =>
@@ -63,7 +58,7 @@ export function SettingsPage() {
   ).length;
 
   const handleEndItem = (totalSelected: number, total: number) => {
-    switch (fetchStatus) {
+    switch (loadingMetaStatus) {
       case 'loading':
         return <Skeleton variant="text" size="medium" width={50} />;
       case 'failed':
@@ -144,18 +139,17 @@ export function SettingsPage() {
     title: (
       <>
         <Typography variant="title" size="xmedium">
-          {i18n.t('Infinite approval')}
+          {i18n.t('Infinite Approval')}
         </Typography>
         <Divider direction="horizontal" size={4} />
         <Tooltip
           side="top"
-          sideOffset={4}
           container={getContainer()}
           content={
             <TooltipContainer>
               <Typography variant="label" size="medium" color="neutral700">
                 {i18n.t(
-                  "Enabling the 'Infinite approval' mode grants unrestricted access to smart contracts of DEXes/Bridges, allowing them to utilize the approved token amount without limitations."
+                  "Enabling the 'Infinite Approval' mode grants unrestricted access to smart contracts of DEXes/Bridges, allowing them to utilize the approved token amount without limitations."
                 )}
               </Typography>
             </TooltipContainer>
@@ -168,12 +162,12 @@ export function SettingsPage() {
     onClick: toggleInfiniteApprove,
   };
 
-  const settingItems = isLiquidityHidden ? [] : [bridgeItem, exchangeItem];
-
-  if (!isLanguageHidden) {
-    // settingItems.push(languageItem);
-  }
-  if (!theme?.singleTheme && !isThemeHidden) {
+  const settingItems = [
+    bridgeItem,
+    exchangeItem,
+    // languageItem
+  ];
+  if (!singleTheme) {
     settingItems.push(themeItem);
   }
   settingItems.push(infiniteApprovalItem);
@@ -181,7 +175,8 @@ export function SettingsPage() {
   return (
     <Layout
       header={{
-        title: i18n.t('Settings'),
+        onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
+        title: i18n.t('Setting'),
       }}>
       <SettingsContainer>
         <Slippage />

package/src/pages/SwapDetailsPage.tsx

@@ -4,8 +4,9 @@ import React from 'react';
 
 import { SwapDetails } from '../components/SwapDetails';
 import { SwapDetailsPlaceholder } from '../components/SwapDetails/SwapDetails.Placeholder';
+import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
-import { useAppStore } from '../store/AppStore';
+import { useMetaStore } from '../store/meta';
 import { useUiStore } from '../store/ui';
 import { getPendingSwaps } from '../utils/queue';
 
@@ -14,10 +15,10 @@ export function SwapDetailsPage() {
   const loading = !state.loadedFromPersistor;
   const pendingSwaps = getPendingSwaps(manager);
   const requestId = useUiStore.use.selectedSwapRequestId();
-  const navigateBack = useNavigateBack();
-  const { fetchStatus: fetchMetaStatus } = useAppStore();
+  const { navigateBackFrom } = useNavigateBack();
+  const { loadingStatus } = useMetaStore();
 
-  const showSkeleton = loading || fetchMetaStatus === 'loading';
+  const showSkeleton = loading || loadingStatus === 'loading';
 
   const selectedSwap = pendingSwaps.find(
     ({ swap }) => swap.requestId === requestId
@@ -35,8 +36,8 @@ export function SwapDetailsPage() {
   const onDelete = async () => {
     if (selectedSwap?.id) {
       try {
-        manager?.deleteQueue(selectedSwap.id);
-        navigateBack();
+        await manager?.deleteQueue(selectedSwap.id);
+        navigateBackFrom(navigationRoutes.swapDetails);
       } catch (e) {
         console.log(e);
       }

package/src/pages/ThemePage.tsx

@@ -13,7 +13,9 @@ import React from 'react';
 
 import { Layout } from '../components/Layout';
 import { SettingsContainer } from '../components/SettingsContainer';
-import { useAppStore } from '../store/AppStore';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useSettingsStore } from '../store/settings';
 
 type Theme = 'dark' | 'light' | 'auto';
 
@@ -24,7 +26,9 @@ enum Mode {
 }
 
 export function ThemePage() {
-  const { setTheme, theme } = useAppStore();
+  const { navigateBackFrom } = useNavigateBack();
+  const theme = useSettingsStore.use.theme();
+  const setTheme = useSettingsStore.use.setTheme();
 
   const themesList = [
     {
@@ -68,6 +72,7 @@ export function ThemePage() {
   return (
     <Layout
       header={{
+        onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
         title: i18n.t('Theme'),
       }}>
       <SettingsContainer>

package/src/pages/WalletsPage.tsx

@@ -1,3 +1,4 @@
+import type { WidgetConfig } from '../types';
 import type { WalletType } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
@@ -6,17 +7,24 @@ import React, { Fragment, useState } from 'react';
 
 import { Layout } from '../components/Layout';
 import { WalletModal } from '../components/WalletModal';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useWalletList } from '../hooks/useWalletList';
-import { useAppStore } from '../store/AppStore';
+import { useMetaStore } from '../store/meta';
 import { getContainer } from '../utils/common';
 
+interface PropTypes {
+  supportedWallets: WidgetConfig['wallets'];
+  multiWallets: boolean;
+  config?: WidgetConfig;
+}
+
 const ListContainer = styled('div', {
-  display: 'flex',
-  justifyContent: 'space-evenly',
-  alignItems: 'center',
+  display: 'grid',
   gap: '$10',
-  flexWrap: 'wrap',
-  paddingTop: '$5',
+  gridTemplateColumns: ' repeat(3, minmax(0, 1fr))',
+  alignContent: 'baseline',
+  paddingTop: '$15',
   height: '100%',
 });
 
@@ -27,8 +35,8 @@ const Container = styled('div', {
 export const TIME_TO_CLOSE_MODAL = 3_000;
 export const TIME_TO_IGNORE_MODAL = 300;
 
-export function WalletsPage() {
-  const { config, fetchStatus: fetchMetaStatus } = useAppStore();
+export function WalletsPage({ config }: PropTypes) {
+  const { navigateBackFrom } = useNavigateBack();
   const [openModal, setOpenModal] = useState(false);
   const [selectedWalletType, setSelectedWalletType] = useState<WalletType>('');
   let modalTimerId: ReturnType<typeof setTimeout> | null = null;
@@ -51,6 +59,7 @@ export function WalletsPage() {
     },
   });
 
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const selectedWallet = list.find(
     (wallet) => wallet.type === selectedWalletType
   );
@@ -62,6 +71,7 @@ export function WalletsPage() {
     <Layout
       header={{
         title: i18n.t('Connect Wallets'),
+        onBack: navigateBackFrom.bind(null, navigationRoutes.wallets),
       }}>
       <Container>
         <Typography variant="title" size="xmedium" align="center">
@@ -78,7 +88,7 @@ export function WalletsPage() {
                   onClick={(type) => {
                     void handleClick(type);
                   }}
-                  isLoading={fetchMetaStatus === 'loading'}
+                  isLoading={loadingMetaStatus === 'loading'}
                 />
               </Fragment>
             );

package/src/services/httpService.ts

@@ -8,6 +8,6 @@ export const httpService = () => {
   if (rango) {
     return rango;
   }
-  rango = new RangoClient(getConfig('API_KEY'), getConfig('BASE_URL'));
+  rango = new RangoClient(getConfig('API_KEY'));
   return rango;
 };

package/src/store/app.ts

@@ -1,53 +1,15 @@
 import type { ConfigSlice } from './slices/config';
 import type { DataSlice } from './slices/data';
-import type { SettingsSlice } from './slices/settings';
-import type { WidgetConfig } from '../types';
-import type { StateCreator } from 'zustand';
 
 import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
 
+import createSelectors from './selectors';
 import { createConfigSlice } from './slices/config';
 import { createDataSlice } from './slices/data';
-import { createSettingsSlice } from './slices/settings';
 
-export type StateCreatorWithInitialData<
-  T extends Partial<WidgetConfig>,
-  R extends Record<string, unknown>,
-  V extends Record<string, unknown>
-> = (
-  initialData: T | undefined,
-  ...rest: Parameters<StateCreator<R, [], [], V>>
-) => ReturnType<StateCreator<R, [], [], V>>;
+const store = create<DataSlice & ConfigSlice>()((...a) => ({
+  ...createDataSlice(...a),
+  ...createConfigSlice(...a),
+}));
 
-export type AppStoreState = DataSlice & ConfigSlice & SettingsSlice;
-
-export function createAppStore(initialData?: WidgetConfig) {
-  return create<AppStoreState>()(
-    persist(
-      (...a) => ({
-        ...createDataSlice(...a),
-        ...createSettingsSlice(...a),
-        ...createConfigSlice(initialData, ...a),
-      }),
-      {
-        name: 'user-settings',
-        skipHydration: true,
-        partialize: (state) => {
-          return {
-            theme: state.theme,
-            language: state.language,
-            affiliatePercent: state.affiliatePercent,
-            affiliateRef: state.affiliateRef,
-            affiliateWallets: state.affiliateWallets,
-            slippage: state.slippage,
-            customSlippage: state.customSlippage,
-            infiniteApprove: state.infiniteApprove,
-            preferredBlockchains: state.preferredBlockchains,
-            disabledLiquiditySources: state.disabledLiquiditySources,
-          };
-        },
-      }
-    )
-  );
-}
+export const useAppStore = createSelectors(store);