@rango-dev/widget-embedded 0.17.1-next.9 → 0.18.0

package/src/pages/SelectBlockchainPage.tsx

@@ -1,11 +1,14 @@
 import { i18n } from '@lingui/core';
-import { Divider, SelectableCategoryList } from '@rango-dev/ui';
+import {
+  Divider,
+  getCountCategories,
+  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';
@@ -16,7 +19,7 @@ interface PropTypes {
 
 export function SelectBlockchainPage(props: PropTypes) {
   const { type } = props;
-  const { navigateBackFrom } = useNavigateBack();
+  const navigateBack = useNavigateBack();
   const [searchedFor, setSearchedFor] = useState<string>('');
   const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
   const setToBlockchain = useQuoteStore.use.setToBlockchain();
@@ -24,26 +27,32 @@ export function SelectBlockchainPage(props: PropTypes) {
   const fetchStatus = useAppStore().fetchStatus;
 
   const blockchains = useAppStore().blockchains({
-    type: type,
+    type: type
   });
-  const routeKey = type === 'source' ? 'fromBlockchain' : 'toBlockchain';
+
+  const countActiveCategories = getCountCategories(blockchains);
+
+  const showCategory = countActiveCategories !== 1;
 
   return (
     <Layout
       header={{
-        onBack: () => {
-          navigateBackFrom(navigationRoutes[routeKey]);
-        },
-        title: i18n.t(`Select Blockchain`),
+        title: i18n.t(`Select Blockchain`)
       }}>
       <Divider size={12} />
-      <SelectableCategoryList
-        setCategory={setBlockchainCategory}
-        category={blockchainCategory}
-        blockchains={blockchains}
-        isLoading={fetchStatus === 'loading'}
-      />
-      <Divider size={24} />
+
+      {showCategory && (
+        <>
+          <SelectableCategoryList
+            setCategory={setBlockchainCategory}
+            category={blockchainCategory}
+            blockchains={blockchains}
+            isLoading={fetchStatus === 'loading'}
+          />
+          <Divider size={24} />
+        </>
+      )}
+
       <SearchInput
         value={searchedFor}
         autoFocus
@@ -66,8 +75,7 @@ export function SelectBlockchainPage(props: PropTypes) {
           } else {
             setToBlockchain(blockchain);
           }
-
-          navigateBackFrom(navigationRoutes[routeKey]);
+          navigateBack();
         }}
       />
     </Layout>

package/src/pages/SelectSwapItemsPage.tsx

@@ -14,7 +14,7 @@ import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useWalletsStore } from '../store/wallets';
-import { getTokensBalanceFromWalletAndSort } from '../utils/wallets';
+import { sortTokens } 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 { navigateBackFrom } = useNavigateBack();
+  const navigateBack = useNavigateBack();
   const {
     fromBlockchain,
     toBlockchain,
@@ -32,27 +32,27 @@ export function SelectSwapItemsPage(props: PropTypes) {
     setFromBlockchain,
     setToBlockchain,
   } = useQuoteStore();
-  const { connectedWallets } = useWalletsStore();
+  const getBalanceFor = useWalletsStore.use.getBalanceFor();
   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
-  );
 
-  // Actions
+  const checkIsTokenPinned = (token: Token) => isTokenPinned(token, type);
+
+  const tokensList = sortTokens(tokens, getBalanceFor, checkIsTokenPinned);
+
   const updateBlockchain = (blockchain: BlockchainMeta) => {
     if (type === 'source') {
       setFromBlockchain(blockchain);
@@ -72,27 +72,13 @@ export function SelectSwapItemsPage(props: PropTypes) {
   return (
     <Layout
       header={{
-        onBack: () =>
-          navigateBackFrom(
-            type === 'source'
-              ? navigationRoutes.fromSwap
-              : navigationRoutes.toSwap
-          ),
-        title: i18n.t('Swap {type}', {
-          type: type === 'source' ? 'from' : 'to',
-        }),
+        title: i18n.t('Swap {type}', { type }),
       }}>
       <BlockchainsSection
         blockchains={blockchains}
         type={type == 'source' ? 'from' : 'to'}
         blockchain={type === 'source' ? fromBlockchain : toBlockchain}
-        onMoreClick={() =>
-          navigate(
-            type === 'source'
-              ? navigationRoutes.fromBlockchain
-              : navigationRoutes.toBlockchain
-          )
-        }
+        onMoreClick={() => navigate(navigationRoutes.blockchains)}
         onChange={(blockchain) => {
           updateBlockchain(blockchain);
         }}
@@ -113,6 +99,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
         list={tokensList}
         selectedBlockchain={selectedBlockchainName}
         searchedFor={searchedFor}
+        type={type}
         onChange={(token) => {
           updateToken(token);
 
@@ -123,7 +110,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
             updateBlockchain(tokenBlockchain);
           }
 
-          navigateBackFrom(navigationRoutes.fromSwap);
+          navigateBack();
         }}
       />
     </Layout>

package/src/pages/SettingsPage.tsx

@@ -18,23 +18,32 @@ 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 { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
-import { useSettingsStore } from '../store/settings';
 import { getContainer } from '../utils/common';
-import { getUniqueSwappersGroups } from '../utils/settings';
+import { getUniqueSwappersGroups, isFeatureHidden } from '../utils/settings';
 
 export function SettingsPage() {
   const navigate = useNavigate();
   const { theme } = useAppStore().config;
   const fetchStatus = useAppStore().fetchStatus;
   const swappers = useAppStore().swappers();
-  const { navigateBackFrom } = useNavigateBack();
+  const disabledLiquiditySources = useAppStore().disabledLiquiditySources;
+  const {
+    config: { features },
+  } = useAppStore();
+  const isThemeHidden = isFeatureHidden('theme', features);
 
-  const infiniteApprove = useSettingsStore.use.infiniteApprove();
-  const toggleInfiniteApprove = useSettingsStore.use.toggleInfiniteApprove();
+  const isLiquidityHidden = isFeatureHidden('liquiditySource', features);
 
-  const supportedUniqueSwappersGroups = getUniqueSwappersGroups(swappers);
+  const isLanguageHidden = isFeatureHidden('language', features);
+
+  const infiniteApprove = useAppStore().infiniteApprove;
+  const toggleInfiniteApprove = useAppStore().toggleInfiniteApprove;
+
+  const supportedUniqueSwappersGroups = getUniqueSwappersGroups(
+    swappers,
+    disabledLiquiditySources
+  );
 
   const bridgeSources = supportedUniqueSwappersGroups.filter(
     (uniqueItem) =>
@@ -135,17 +144,18 @@ 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>
@@ -158,12 +168,12 @@ export function SettingsPage() {
     onClick: toggleInfiniteApprove,
   };
 
-  const settingItems = [
-    bridgeItem,
-    exchangeItem,
-    // languageItem
-  ];
-  if (!theme?.singleTheme) {
+  const settingItems = isLiquidityHidden ? [] : [bridgeItem, exchangeItem];
+
+  if (!isLanguageHidden) {
+    // settingItems.push(languageItem);
+  }
+  if (!theme?.singleTheme && !isThemeHidden) {
     settingItems.push(themeItem);
   }
   settingItems.push(infiniteApprovalItem);
@@ -171,8 +181,7 @@ export function SettingsPage() {
   return (
     <Layout
       header={{
-        onBack: () => navigateBackFrom(navigationRoutes.settings),
-        title: i18n.t('Setting'),
+        title: i18n.t('Settings'),
       }}>
       <SettingsContainer>
         <Slippage />

package/src/pages/SwapDetailsPage.tsx

@@ -4,7 +4,6 @@ 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 { useUiStore } from '../store/ui';
@@ -15,7 +14,7 @@ export function SwapDetailsPage() {
   const loading = !state.loadedFromPersistor;
   const pendingSwaps = getPendingSwaps(manager);
   const requestId = useUiStore.use.selectedSwapRequestId();
-  const { navigateBackFrom } = useNavigateBack();
+  const navigateBack = useNavigateBack();
   const { fetchStatus: fetchMetaStatus } = useAppStore();
 
   const showSkeleton = loading || fetchMetaStatus === 'loading';
@@ -36,8 +35,8 @@ export function SwapDetailsPage() {
   const onDelete = async () => {
     if (selectedSwap?.id) {
       try {
-        await manager?.deleteQueue(selectedSwap.id);
-        navigateBackFrom(navigationRoutes.swapDetails);
+        manager?.deleteQueue(selectedSwap.id);
+        navigateBack();
       } catch (e) {
         console.log(e);
       }

package/src/pages/ThemePage.tsx

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

package/src/pages/WalletsPage.tsx

@@ -6,18 +6,17 @@ 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 { getContainer } from '../utils/common';
 
 const ListContainer = styled('div', {
-  display: 'grid',
+  display: 'flex',
+  justifyContent: 'space-evenly',
+  alignItems: 'center',
   gap: '$10',
-  gridTemplateColumns: ' repeat(3, minmax(0, 1fr))',
-  alignContent: 'baseline',
-  paddingTop: '$15',
+  flexWrap: 'wrap',
+  paddingTop: '$5',
   height: '100%',
 });
 
@@ -30,7 +29,6 @@ export const TIME_TO_IGNORE_MODAL = 300;
 
 export function WalletsPage() {
   const { config, fetchStatus: fetchMetaStatus } = useAppStore();
-  const { navigateBackFrom } = useNavigateBack();
   const [openModal, setOpenModal] = useState(false);
   const [selectedWalletType, setSelectedWalletType] = useState<WalletType>('');
   let modalTimerId: ReturnType<typeof setTimeout> | null = null;
@@ -64,7 +62,6 @@ export function WalletsPage() {
     <Layout
       header={{
         title: i18n.t('Connect Wallets'),
-        onBack: () => navigateBackFrom(navigationRoutes.wallets),
       }}>
       <Container>
         <Typography variant="title" size="xmedium" align="center">

package/src/services/httpService.ts

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

package/src/store/AppStore.tsx

@@ -1,7 +1,7 @@
 import type { WidgetConfig } from '../types';
 import type { PropsWithChildren } from 'react';
 
-import React, { createContext, useContext, useRef } from 'react';
+import React, { createContext, useContext, useEffect, useRef } from 'react';
 
 import { createAppStore } from './app';
 
@@ -13,6 +13,12 @@ export const AppStoreContext = createContext<AppStore | null>(null);
 export function useAppStore() {
   const store = useContext(AppStoreContext);
 
+  useEffect(() => {
+    if (store && !store.persist.hasHydrated()) {
+      void store.persist.rehydrate();
+    }
+  }, []);
+
   if (!store) {
     throw new Error('Missing AppStoreContext.Provider in the tree');
   }

package/src/store/app.ts

@@ -1,12 +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 { createConfigSlice } from './slices/config';
 import { createDataSlice } from './slices/data';
+import { createSettingsSlice } from './slices/settings';
 
 export type StateCreatorWithInitialData<
   T extends Partial<WidgetConfig>,
@@ -17,11 +20,34 @@ export type StateCreatorWithInitialData<
   ...rest: Parameters<StateCreator<R, [], [], V>>
 ) => ReturnType<StateCreator<R, [], [], V>>;
 
-export type AppStoreState = DataSlice & ConfigSlice;
+export type AppStoreState = DataSlice & ConfigSlice & SettingsSlice;
 
 export function createAppStore(initialData?: WidgetConfig) {
-  return create<AppStoreState>()((...a) => ({
-    ...createDataSlice(...a),
-    ...createConfigSlice(initialData, ...a),
-  }));
+  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,
+          };
+        },
+      }
+    )
+  );
 }

package/src/store/quote.ts

@@ -1,12 +1,11 @@
-import type { TokenWithBalance } from '../components/TokenList';
 import type { Wallet } from '../types';
-import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset/dist/shared';
 import type {
   BestRouteResponse,
   BlockchainMeta,
   MetaResponse,
   Token,
 } from 'rango-sdk';
+import type { PendingSwap } from 'rango-types';
 
 import BigNumber from 'bignumber.js';
 import { create } from 'zustand';
@@ -38,8 +37,8 @@ export interface QuoteState {
   inputUsdValue: BigNumber | null;
   outputAmount: BigNumber | null;
   outputUsdValue: BigNumber | null;
-  fromToken: TokenWithBalance | null;
-  toToken: TokenWithBalance | null;
+  fromToken: Token | null;
+  toToken: Token | null;
   quoteWalletsConfirmed: boolean;
   selectedWallets: Wallet[];
   quoteWarningsConfirmed: boolean;

package/src/store/slices/config.ts

@@ -5,6 +5,7 @@ export const DEFAULT_CONFIG: WidgetConfig = {
   apiKey: '',
   multiWallets: true,
   enableNewLiquiditySources: true,
+  customDestination: true,
 };
 
 export type ConfigSlice = {

package/src/store/slices/data.ts

@@ -14,7 +14,7 @@ type BlockchainOptions = {
 };
 
 type TokenOptions = {
-  type?: 'source' | 'destination';
+  type: 'source' | 'destination';
   // filter by an specific blockchain
   blockchain?: string;
   searchFor?: string;
@@ -29,7 +29,7 @@ export interface DataSlice {
   blockchains: (options?: BlockchainOptions) => BlockchainMeta[];
   tokens: (options?: TokenOptions) => Token[];
   swappers: () => SwapperMeta[];
-  isTokenPinned: (token: Token) => boolean;
+  isTokenPinned: (token: Token, type: 'source' | 'destination') => boolean;
 
   fetch: () => Promise<void>;
 }
@@ -131,10 +131,10 @@ export const createDataSlice: StateCreator<
       })
       .sort((a, b) => {
         // Check pinned tokens
-        if (get().isTokenPinned(a)) {
+        if (get().isTokenPinned(a, options.type)) {
           return -1;
         }
-        if (get().isTokenPinned(b)) {
+        if (get().isTokenPinned(b, options.type)) {
           return 1;
         }
 
@@ -159,8 +159,12 @@ export const createDataSlice: StateCreator<
 
     return list;
   },
-  isTokenPinned: (token) => {
-    const pinned = !!get().config.pinnedTokens?.some((pinnedToken) =>
+  isTokenPinned: (token, type) => {
+    const pinnedTokens =
+      type === 'source'
+        ? get().config.from?.pinnedTokens
+        : get().config.to?.pinnedTokens;
+    const pinned = !!pinnedTokens?.some((pinnedToken) =>
       tokensAreEqual(pinnedToken, token)
     );
     return pinned;