@rango-dev/widget-embedded 0.17.1-next.3 → 0.17.1-next.30

package/src/pages/HistoryPage.tsx

@@ -1,5 +1,4 @@
-import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
-import type { PendingSwapStep } from 'rango-types';
+import type { PendingSwap, PendingSwapStep } from 'rango-types';
 
 import { i18n } from '@lingui/core';
 import { useManager } from '@rango-dev/queue-manager-react';
@@ -11,8 +10,6 @@ import { Layout } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
 import { SwapsGroup } from '../components/SwapsGroup';
 import { NotFoundContainer } from '../components/SwapsGroup/SwapsGroup.styles';
-import { navigationRoutes } from '../constants/navigationRoutes';
-import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useUiStore } from '../store/ui';
 import { groupSwapsByDate } from '../utils/date';
 import { containsText } from '../utils/numbers';
@@ -51,7 +48,6 @@ const isStepContainsText = (steps: PendingSwapStep[], value: string) => {
 export function HistoryPage() {
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
   const navigate = useNavigate();
-  const { navigateBackFrom } = useNavigateBack();
   const { manager, state } = useManager();
   const list: PendingSwap[] = getPendingSwaps(manager).map(({ swap }) => swap);
   const [searchedFor, setSearchedFor] = useState<string>('');
@@ -78,7 +74,6 @@ export function HistoryPage() {
   return (
     <Layout
       header={{
-        onBack: () => navigateBackFrom(navigationRoutes.swaps),
         title: i18n.t('History'),
       }}>
       <Container>
@@ -108,7 +103,7 @@ export function HistoryPage() {
               list={filteredList}
               onSwapClick={(requestId) => {
                 setSelectedSwap(requestId);
-                navigate(`${requestId}`, { replace: true });
+                navigate(requestId);
               }}
               groupBy={groupSwapsByDate}
               isLoading={loading}

package/src/pages/Home.tsx

@@ -9,8 +9,6 @@ import { SwitchFromAndToButton } from '../components/SwitchFromAndTo';
 import { errorMessages } from '../constants/errors';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import {
-  BALANCE_MAX_DECIMALS,
-  BALANCE_MIN_DECIMALS,
   PERCENTAGE_CHANGE_MAX_DECIMALS,
   PERCENTAGE_CHANGE_MIN_DECIMALS,
   TOKEN_AMOUNT_MAX_DECIMALS,
@@ -20,27 +18,22 @@ import {
 } from '../constants/routing';
 import { QuoteInfo } from '../containers/QuoteInfo';
 import { useSwapInput } from '../hooks/useSwapInput';
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
-import { ButtonState } from '../types';
 import { numberToString } from '../utils/numbers';
 import { getPriceImpact, getPriceImpactLevel } from '../utils/quote';
-import {
-  canComputePriceImpact,
-  getOutputRatio,
-  getPercentageChange,
-  getSwapButtonState,
-  hasHighValueLoss,
-  hasLimitError,
-} from '../utils/swap';
-import { getBalanceFromWallet } from '../utils/wallets';
+import { canComputePriceImpact, getSwapButtonState } from '../utils/swap';
+import { formatBalance } from '../utils/wallets';
 
 const Container = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   overflowY: 'visible',
+  '& .quote__container': {
+    paddingTop: '$2',
+  },
 });
 
 const FromContainer = styled('div', {
@@ -76,18 +69,15 @@ export function Home() {
     setQuoteWarningsConfirmed,
   } = useQuoteStore();
 
-  const { loadingStatus: loadingMetaStatus } = useMetaStore();
+  const fetchMetaStatus = useAppStore().fetchStatus;
 
-  const connectedWallets = useWalletsStore.use.connectedWallets();
+  const { connectedWallets, getBalanceFor } = useWalletsStore();
   const setCurrentPage = useUiStore.use.setCurrentPage();
   const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);
   const layoutRef = useRef<HTMLDivElement>(null);
 
   const needsToWarnEthOnPath = false;
 
-  const outToInRatio = getOutputRatio(inputUsdValue, outputUsdValue);
-  const highValueLoss = hasHighValueLoss(inputUsdValue, outToInRatio);
-
   const priceImpactInputCanNotBeComputed = !canComputePriceImpact(
     quote,
     inputAmount,
@@ -99,48 +89,26 @@ export function Home() {
     inputAmount,
     outputUsdValue
   );
-  const swapButtonState = getSwapButtonState(
-    loadingMetaStatus,
-    connectedWallets,
+
+  const swapButtonState = getSwapButtonState({
+    fetchMetaStatus,
     fetchingQuote,
+    inputAmount,
     quote,
-    hasLimitError(quote),
-    highValueLoss,
-    priceImpactInputCanNotBeComputed || priceImpactOutputCanNotBeComputed,
+    anyWalletConnected: connectedWallets.length > 0,
+    error: quoteError,
+    warning: quoteWarning,
     needsToWarnEthOnPath,
-    inputAmount
-  );
+  });
 
-  const tokenBalance =
-    !!fromBlockchain && !!fromToken
-      ? numberToString(
-          getBalanceFromWallet(
-            connectedWallets,
-            fromBlockchain?.name,
-            fromToken?.symbol,
-            fromToken?.address
-          )?.amount || '0',
-          BALANCE_MIN_DECIMALS,
-          BALANCE_MAX_DECIMALS
-        )
-      : '0';
+  const fromTokenBalance = fromToken ? getBalanceFor(fromToken) : null;
+
+  const fromTokenFormattedBalance =
+    formatBalance(fromTokenBalance)?.amount ?? '0';
 
   const tokenBalanceReal =
     !!fromBlockchain && !!fromToken
-      ? numberToString(
-          getBalanceFromWallet(
-            connectedWallets,
-            fromBlockchain?.name,
-            fromToken?.symbol,
-            fromToken?.address
-          )?.amount || '0',
-          getBalanceFromWallet(
-            connectedWallets,
-            fromBlockchain?.name,
-            fromToken?.symbol,
-            fromToken?.address
-          )?.decimal
-        )
+      ? numberToString(fromTokenBalance?.amount, fromTokenBalance?.decimals)
       : '0';
 
   useEffect(() => {
@@ -152,10 +120,8 @@ export function Home() {
   const percentageChange =
     !inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)
       ? null
-      : getPercentageChange(
-          inputUsdValue.toString(),
-          outputUsdValue.toString()
-        );
+      : getPriceImpact(inputUsdValue.toString(), outputUsdValue.toString());
+
   return (
     <Layout
       ref={layoutRef}
@@ -167,14 +133,13 @@ export function Home() {
           size="large"
           disabled={swapButtonState.disabled}
           prefix={
-            !swapButtonState.disabled &&
-            swapButtonState.hasWarning && <WarningIcon />
+            swapButtonState.action === 'confirm-warning' && <WarningIcon />
           }
           fullWidth
           onClick={() => {
-            if (swapButtonState.state === ButtonState.WAITFORCONNECTING) {
+            if (swapButtonState.action === 'connect-wallet') {
               navigate(navigationRoutes.wallets);
-            } else if (quoteWarning) {
+            } else if (swapButtonState.action === 'confirm-warning') {
               setShowQuoteWarningModal(true);
             } else {
               navigate(navigationRoutes.confirmSwap);
@@ -184,7 +149,10 @@ export function Home() {
         </Button>
       }
       header={{
-        hasConnectWallet: true,
+        onWallet: () => {
+          navigate(navigationRoutes.wallets);
+        },
+        hasBackButton: false,
         title: i18n.t('Swap'),
         suffix: (
           <HomeButtons
@@ -200,11 +168,9 @@ export function Home() {
           <FromContainer>
             <SwapInput
               label={i18n.t('From')}
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              //@ts-ignore
               mode="From"
               onInputChange={setInputAmount}
-              balance={tokenBalance}
+              balance={fromTokenFormattedBalance}
               chain={{
                 displayName: fromBlockchain?.displayName || '',
                 image: fromBlockchain?.logo || '',
@@ -213,7 +179,7 @@ export function Home() {
                 displayName: fromToken?.symbol || '',
                 image: fromToken?.image || '',
               }}
-              onClickToken={() => navigate('from-swap')}
+              onClickToken={() => navigate(navigationRoutes.fromSwap)}
               price={{
                 value: inputAmount,
                 usdValue: priceImpactInputCanNotBeComputed
@@ -227,10 +193,10 @@ export function Home() {
                   ? errorMessages().unknownPriceError.impactTitle
                   : undefined,
               }}
-              disabled={loadingMetaStatus === 'failed'}
-              loading={loadingMetaStatus === 'loading'}
+              disabled={fetchMetaStatus === 'failed'}
+              loading={fetchMetaStatus === 'loading'}
               onSelectMaxBalance={() => {
-                if (tokenBalance !== '0') {
+                if (fromTokenFormattedBalance !== '0') {
                   setInputAmount(tokenBalanceReal.split(',').join(''));
                 }
               }}
@@ -241,6 +207,7 @@ export function Home() {
             sharpBottomStyle={!!quote?.result || fetchingQuote}
             label={i18n.t('To')}
             mode="To"
+            fetchingQuote={fetchingQuote}
             chain={{
               displayName: toBlockchain?.displayName || '',
               image: toBlockchain?.logo || '',
@@ -272,27 +239,30 @@ export function Home() {
                 ? errorMessages().unknownPriceError.impactTitle
                 : undefined,
             }}
-            onClickToken={() => navigate('to-swap')}
-            disabled={loadingMetaStatus === 'failed'}
-            loading={loadingMetaStatus === 'loading'}
+            onClickToken={() => navigate(navigationRoutes.toSwap)}
+            disabled={fetchMetaStatus === 'failed'}
+            loading={fetchMetaStatus === 'loading'}
           />
         </InputsContainer>
-        <QuoteInfo
-          quote={quote}
-          loading={fetchingQuote}
-          error={quoteError}
-          warning={quoteWarning}
-          type="basic"
-          refetchQuote={fetchQuote}
-          showWarningModal={showQuoteWarningModal}
-          onOpenWarningModal={() => setShowQuoteWarningModal(true)}
-          onCloseWarningModal={() => setShowQuoteWarningModal(false)}
-          onConfirmWarningModal={() => {
-            setShowQuoteWarningModal(false);
-            setQuoteWarningsConfirmed(true);
-            navigate(navigationRoutes.confirmSwap);
-          }}
-        />
+        <div className="quote__container">
+          <QuoteInfo
+            quote={quote}
+            loading={fetchingQuote}
+            error={quoteError}
+            warning={quoteWarning}
+            type="basic"
+            refetchQuote={fetchQuote}
+            showWarningModal={showQuoteWarningModal}
+            onOpenWarningModal={() => setShowQuoteWarningModal(true)}
+            onCloseWarningModal={() => setShowQuoteWarningModal(false)}
+            onConfirmWarningModal={() => {
+              setShowQuoteWarningModal(false);
+              setQuoteWarningsConfirmed(true);
+              navigate(navigationRoutes.confirmSwap);
+            }}
+            onChangeSettings={() => navigate(navigationRoutes.settings)}
+          />
+        </div>
       </Container>
     </Layout>
   );

package/src/pages/LanguagePage.tsx

@@ -10,13 +10,9 @@ import React from 'react';
 
 import { Layout } from '../components/Layout';
 import { SettingsContainer } from '../components/SettingsContainer';
-import { navigationRoutes } from '../constants/navigationRoutes';
 import { useLanguage } from '../hooks/useLanguage';
-import { useNavigateBack } from '../hooks/useNavigateBack';
 
 export function LanguagePage() {
-  const { navigateBackFrom } = useNavigateBack();
-
   const { activeLanguage, changeLanguage, languages } = useLanguage();
 
   const languageList = languages.map((languageItem) => {
@@ -38,7 +34,6 @@ export function LanguagePage() {
   return (
     <Layout
       header={{
-        onBack: () => navigateBackFrom(navigationRoutes.settings),
         title: i18n.t('Language'),
       }}>
       <SettingsContainer>

package/src/pages/LiquiditySourcePage.tsx

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

package/src/pages/SelectBlockchainPage.tsx

@@ -1,14 +1,16 @@
 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/app';
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 
 interface PropTypes {
@@ -17,34 +19,40 @@ 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();
   const setFromBlockchain = useQuoteStore.use.setFromBlockchain();
-  const { loadingStatus } = useMetaStore();
+  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={loadingStatus === 'loading'}
-      />
-      <Divider size={24} />
+
+      {showCategory && (
+        <>
+          <SelectableCategoryList
+            setCategory={setBlockchainCategory}
+            category={blockchainCategory}
+            blockchains={blockchains}
+            isLoading={fetchStatus === 'loading'}
+          />
+          <Divider size={24} />
+        </>
+      )}
+
       <SearchInput
         value={searchedFor}
         autoFocus
@@ -67,8 +75,7 @@ export function SelectBlockchainPage(props: PropTypes) {
           } else {
             setToBlockchain(blockchain);
           }
-
-          navigateBackFrom(navigationRoutes[routeKey]);
+          navigateBack();
         }}
       />
     </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/app';
+import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useWalletsStore } from '../store/wallets';
-import { getTokensBalanceFromWalletAndSort } from '../utils/wallets';
+import { sortTokensByBalance } 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,7 +32,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
     setFromBlockchain,
     setToBlockchain,
   } = useQuoteStore();
-  const { connectedWallets } = useWalletsStore();
+  const getBalanceFor = useWalletsStore.use.getBalanceFor();
   const [searchedFor, setSearchedFor] = useState<string>('');
 
   const selectedBlockchain = type === 'source' ? fromBlockchain : toBlockchain;
@@ -47,10 +47,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
     blockchain: selectedBlockchainName,
     searchFor: searchedFor,
   });
-  const tokensList = getTokensBalanceFromWalletAndSort(
-    tokens,
-    connectedWallets
-  );
+  const tokensList = sortTokensByBalance(tokens, getBalanceFor);
 
   // Actions
   const updateBlockchain = (blockchain: BlockchainMeta) => {
@@ -63,36 +60,22 @@ export function SelectSwapItemsPage(props: PropTypes) {
 
   const updateToken = (token: Token) => {
     if (type === 'source') {
-      setFromToken(token);
+      setFromToken({ token, meta: { blockchains, tokens } });
     } else {
-      setToToken(token);
+      setToToken({ token, meta: { blockchains, tokens } });
     }
   };
 
   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);
         }}
@@ -123,7 +106,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
             updateBlockchain(tokenBlockchain);
           }
 
-          navigateBackFrom(navigationRoutes.fromSwap);
+          navigateBack();
         }}
       />
     </Layout>