@rango-dev/widget-embedded 0.12.1-next.9 → 0.13.0

package/src/pages/SettingsPage.tsx

@@ -2,10 +2,12 @@ import { i18n } from '@lingui/core';
 import {
   ChevronRightIcon,
   Divider,
+  InfoIcon,
   List,
   ListItemButton,
   Skeleton,
   Switch,
+  Tooltip,
   Typography,
 } from '@rango-dev/ui';
 import React from 'react';
@@ -14,10 +16,12 @@ import { useNavigate } from 'react-router-dom';
 import { Layout } from '../components/Layout';
 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 { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
+import { getContainer } from '../utils/common';
 import { getUniqueSwappersGroups } from '../utils/settings';
 
 interface PropTypes {
@@ -60,7 +64,7 @@ export function SettingsPage({ supportedSwappers, singleTheme }: PropTypes) {
       case 'failed':
         return (
           <Typography variant="body" size="medium" color="$error500">
-            Loading failed
+            {i18n.t('Loading failed')}
           </Typography>
         );
       default:
@@ -106,16 +110,18 @@ export function SettingsPage({ supportedSwappers, singleTheme }: PropTypes) {
     onClick: () => navigate(navigationRoutes.exchanges),
   };
 
-  const languageItem = {
-    id: 'language-item',
-    title: (
-      <Typography variant="title" size="xmedium">
-        {i18n.t('Language')}
-      </Typography>
-    ),
-    end: <ChevronRightIcon color="gray" />,
-    onClick: () => navigate(navigationRoutes.languages),
-  };
+  /*
+   * const languageItem = {
+   *   id: 'language-item',
+   *   title: (
+   *     <Typography variant="title" size="xmedium">
+   *       {i18n.t('Language')}
+   *     </Typography>
+   *   ),
+   *   end: <ChevronRightIcon color="gray" />,
+   *   onClick: () => navigate(navigationRoutes.languages),
+   * };
+   */
 
   const themeItem = {
     id: 'theme-item',
@@ -131,15 +137,36 @@ export function SettingsPage({ supportedSwappers, singleTheme }: PropTypes) {
   const infiniteApprovalItem = {
     id: 'infinite-approval-item',
     title: (
-      <Typography variant="title" size="xmedium">
-        {i18n.t('Infinite Approval')}
-      </Typography>
+      <>
+        <Typography variant="title" size="xmedium">
+          {i18n.t('Infinite Approval')}
+        </Typography>
+        <Divider direction="horizontal" size={4} />
+        <Tooltip
+          side="top"
+          container={getContainer()}
+          content={
+            <TooltipContainer>
+              <Typography variant="label" size="medium" color="neutral900">
+                {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."
+                )}
+              </Typography>
+            </TooltipContainer>
+          }>
+          <InfoIcon color="gray" />
+        </Tooltip>
+      </>
     ),
     end: <Switch checked={infiniteApprove} />,
     onClick: toggleInfiniteApprove,
   };
 
-  const settingItems = [bridgeItem, exchangeItem, languageItem];
+  const settingItems = [
+    bridgeItem,
+    exchangeItem,
+    // languageItem
+  ];
   if (!singleTheme) {
     settingItems.push(themeItem);
   }

package/src/pages/SwapDetailsPage.tsx

@@ -6,6 +6,7 @@ import { SwapDetails } from '../components/SwapDetails';
 import { SwapDetailsPlaceholder } from '../components/SwapDetails/SwapDetails.Placeholder';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useMetaStore } from '../store/meta';
 import { useUiStore } from '../store/ui';
 import { getPendingSwaps } from '../utils/queue';
 
@@ -15,6 +16,9 @@ export function SwapDetailsPage() {
   const pendingSwaps = getPendingSwaps(manager);
   const requestId = useUiStore.use.selectedSwapRequestId();
   const { navigateBackFrom } = useNavigateBack();
+  const { loadingStatus } = useMetaStore();
+
+  const showSkeleton = loading || loadingStatus === 'loading';
 
   const selectedSwap = pendingSwaps.find(
     ({ swap }) => swap.requestId === requestId
@@ -41,9 +45,12 @@ export function SwapDetailsPage() {
   };
   const swap = selectedSwap?.swap;
 
-  if (!swap) {
+  if (!swap || showSkeleton) {
     return (
-      <SwapDetailsPlaceholder requestId={requestId || ''} loading={loading} />
+      <SwapDetailsPlaceholder
+        requestId={requestId || ''}
+        showSkeleton={showSkeleton}
+      />
     );
   }
 

package/src/pages/ThemePage.tsx

@@ -82,7 +82,7 @@ export function ThemePage() {
           <List
             type={
               <ListItemButton
-                title="Theme"
+                title={i18n.t('Theme')}
                 id="_"
                 onClick={() => console.log()}
               />

package/src/pages/WalletsPage.tsx

@@ -11,6 +11,7 @@ import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useWalletList } from '../hooks/useWalletList';
 import { useMetaStore } from '../store/meta';
+import { getContainer } from '../utils/common';
 
 interface PropTypes {
   supportedWallets: WidgetConfig['wallets'];
@@ -36,14 +37,16 @@ export const TIME_TO_IGNORE_MODAL = 300;
 
 export function WalletsPage({ config }: PropTypes) {
   const { navigateBackFrom } = useNavigateBack();
-  const [openModal, setOpenModal] = useState<WalletType>('');
+  const [openModal, setOpenModal] = useState(false);
+  const [selectedWalletType, setSelectedWalletType] = useState<WalletType>('');
   let modalTimerId: ReturnType<typeof setTimeout> | null = null;
 
   const { list, handleClick, error } = useWalletList({
     config,
     onBeforeConnect: (type) => {
       modalTimerId = setTimeout(() => {
-        setOpenModal(type);
+        setOpenModal(true);
+        setSelectedWalletType(type);
       }, TIME_TO_IGNORE_MODAL);
     },
     onConnect: () => {
@@ -51,13 +54,15 @@ export function WalletsPage({ config }: PropTypes) {
         clearTimeout(modalTimerId);
       }
       setTimeout(() => {
-        setOpenModal('');
+        setOpenModal(false);
       }, TIME_TO_CLOSE_MODAL);
     },
   });
 
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
-  const selectedWallet = list.find((wallet) => wallet.type === openModal);
+  const selectedWallet = list.find(
+    (wallet) => wallet.type === selectedWalletType
+  );
   const selectedWalletImage = selectedWallet?.image || '';
   const selectedWalletState =
     selectedWallet?.state || WalletState.NOT_INSTALLED;
@@ -79,6 +84,7 @@ export function WalletsPage({ config }: PropTypes) {
               <Fragment key={key}>
                 <Wallet
                   {...wallet}
+                  container={getContainer()}
                   onClick={(type) => {
                     void handleClick(type);
                   }}
@@ -89,7 +95,7 @@ export function WalletsPage({ config }: PropTypes) {
           })}
           <WalletModal
             open={!!openModal}
-            onClose={() => setOpenModal('')}
+            onClose={() => setOpenModal(false)}
             image={selectedWalletImage}
             state={selectedWalletState}
             error={error}

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,
+      },
+    });
+  },
+});