@rango-dev/widget-embedded 0.20.1-next.20 → 0.20.1-next.22

package/src/pages/HistoryPage.tsx

@@ -6,23 +6,14 @@ import { Divider, NotFound, styled } from '@rango-dev/ui';
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { Layout } from '../components/Layout';
+import { Layout, PageContainer } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
 import { SwapsGroup } from '../components/SwapsGroup';
 import { NotFoundContainer } from '../components/SwapsGroup/SwapsGroup.styles';
-import { useUiStore } from '../store/ui';
 import { groupSwapsByDate } from '../utils/date';
 import { containsText } from '../utils/numbers';
 import { getPendingSwaps } from '../utils/queue';
 
-const Container = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'flex-start',
-  height: '100%',
-  gap: 15,
-});
-
 const SwapsGroupContainer = styled('div', {
   overflowY: 'visible',
   width: '100%',
@@ -46,7 +37,6 @@ const isStepContainsText = (steps: PendingSwapStep[], value: string) => {
 };
 
 export function HistoryPage() {
-  const setSelectedSwap = useUiStore.use.setSelectedSwap();
   const navigate = useNavigate();
   const { manager, state } = useManager();
   const list: PendingSwap[] = getPendingSwaps(manager).map(({ swap }) => swap);
@@ -76,7 +66,7 @@ export function HistoryPage() {
       header={{
         title: i18n.t('History'),
       }}>
-      <Container>
+      <PageContainer>
         <SearchInput
           setValue={setSearchedFor}
           fullWidth
@@ -86,6 +76,7 @@ export function HistoryPage() {
           onChange={searchHandler}
           value={searchedFor}
         />
+        <Divider size="16" />
         <SwapsGroupContainer>
           {isEmpty && (
             <NotFoundContainer>
@@ -101,16 +92,13 @@ export function HistoryPage() {
           {!isEmpty && (
             <SwapsGroup
               list={filteredList}
-              onSwapClick={(requestId) => {
-                setSelectedSwap(requestId);
-                navigate(requestId);
-              }}
+              onSwapClick={navigate}
               groupBy={groupSwapsByDate}
               isLoading={loading}
             />
           )}
         </SwapsGroupContainer>
-      </Container>
+      </PageContainer>
     </Layout>
   );
 }

package/src/pages/Home.tsx

@@ -1,10 +1,11 @@
 import { i18n } from '@lingui/core';
-import { Button, styled, SwapInput, WarningIcon } from '@rango-dev/ui';
-import React, { useEffect, useRef, useState } from 'react';
+import { Button, Divider, styled, SwapInput, WarningIcon } from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { HomeButtons } from '../components/HeaderButtons';
-import { Layout } from '../components/Layout';
+import { Layout, PageContainer } from '../components/Layout';
+import { QuoteWarningsAndErrors } from '../components/QuoteWarningsAndErrors';
 import { SwitchFromAndToButton } from '../components/SwitchFromAndTo';
 import { errorMessages } from '../constants/errors';
 import { navigationRoutes } from '../constants/navigationRoutes';
@@ -20,7 +21,6 @@ import { QuoteInfo } from '../containers/QuoteInfo';
 import { useSwapInput } from '../hooks/useSwapInput';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
-import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
 import { getContainer } from '../utils/common';
 import { formatTooltipNumbers, numberToString } from '../utils/numbers';
@@ -28,15 +28,6 @@ import { getPriceImpact, getPriceImpactLevel } from '../utils/quote';
 import { canComputePriceImpact, getSwapButtonState } from '../utils/swap';
 import { formatBalance, isFetchingBalance } from '../utils/wallets';
 
-const Container = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  overflowY: 'visible',
-  '& .quote__container': {
-    paddingTop: '$2',
-  },
-});
-
 const FromContainer = styled('div', {
   position: 'relative',
 });
@@ -51,7 +42,7 @@ export function Home() {
   const navigate = useNavigate();
   const {
     fetch: fetchQuote,
-    loading: fetchingQuote,
+    loading,
     error: quoteError,
     warning: quoteWarning,
   } = useSwapInput();
@@ -73,9 +64,7 @@ export function Home() {
   const fetchMetaStatus = useAppStore().fetchStatus;
 
   const { connectedWallets, getBalanceFor } = useWalletsStore();
-  const setCurrentPage = useUiStore.use.setCurrentPage();
   const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);
-  const layoutRef = useRef<HTMLDivElement>(null);
   const fetchingBalance =
     !!fromBlockchain &&
     isFetchingBalance(connectedWallets, fromBlockchain.name);
@@ -96,7 +85,7 @@ export function Home() {
 
   const swapButtonState = getSwapButtonState({
     fetchMetaStatus,
-    fetchingQuote,
+    fetchingQuote: loading,
     inputAmount,
     quote,
     anyWalletConnected: connectedWallets.length > 0,
@@ -115,10 +104,15 @@ export function Home() {
       ? numberToString(fromTokenBalance?.amount, fromTokenBalance?.decimals)
       : '0';
 
+  const fetchingQuote =
+    fetchMetaStatus === 'success' &&
+    !!inputAmount &&
+    !!fromToken &&
+    !!toToken &&
+    loading;
+
   useEffect(() => {
-    setCurrentPage(navigationRoutes.home);
     resetQuoteWallets();
-    return setCurrentPage.bind(null, '');
   }, []);
 
   const percentageChange =
@@ -128,8 +122,7 @@ export function Home() {
 
   return (
     <Layout
-      ref={layoutRef}
-      fixedHeight={false}
+      height="auto"
       hasLogo
       footer={
         <Button
@@ -160,7 +153,6 @@ export function Home() {
         title: i18n.t('Swap'),
         suffix: (
           <HomeButtons
-            layoutRef={layoutRef.current}
             onClickRefresh={
               (!!quote || quoteError) && !showQuoteWarningModal
                 ? fetchQuote
@@ -171,7 +163,7 @@ export function Home() {
           />
         ),
       }}>
-      <Container>
+      <PageContainer>
         <InputsContainer>
           <FromContainer>
             <SwapInput
@@ -262,26 +254,35 @@ export function Home() {
             tooltipContainer={getContainer()}
           />
         </InputsContainer>
-        <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>
+        <Divider size="2" />
+        <QuoteInfo
+          quote={quote}
+          loading={fetchingQuote}
+          error={quoteError}
+          warning={quoteWarning}
+          type="basic"
+        />
+        {quoteWarning || quoteError ? (
+          <>
+            <Divider size="10" />
+            <QuoteWarningsAndErrors
+              warning={quoteWarning}
+              error={quoteError}
+              loading={fetchingQuote}
+              refetchQuote={fetchQuote}
+              showWarningModal={showQuoteWarningModal}
+              onOpenWarningModal={() => setShowQuoteWarningModal(true)}
+              onCloseWarningModal={() => setShowQuoteWarningModal(false)}
+              onConfirmWarningModal={() => {
+                setShowQuoteWarningModal(false);
+                setQuoteWarningsConfirmed(true);
+                navigate(navigationRoutes.confirmSwap);
+              }}
+              onChangeSettings={() => navigate(navigationRoutes.settings)}
+            />
+          </>
+        ) : null}
+      </PageContainer>
     </Layout>
   );
 }

package/src/pages/LanguagePage.tsx

@@ -8,8 +8,7 @@ import {
 } from '@rango-dev/ui';
 import React from 'react';
 
-import { Layout } from '../components/Layout';
-import { SettingsContainer } from '../components/SettingsContainer';
+import { Layout, PageContainer } from '../components/Layout';
 import { useLanguage } from '../hooks/useLanguage';
 
 export function LanguagePage() {
@@ -36,7 +35,7 @@ export function LanguagePage() {
       header={{
         title: i18n.t('Language'),
       }}>
-      <SettingsContainer>
+      <PageContainer>
         <RadioRoot value={activeLanguage}>
           <List
             type={
@@ -49,7 +48,7 @@ export function LanguagePage() {
             items={languageList}
           />
         </RadioRoot>
-      </SettingsContainer>
+      </PageContainer>
     </Layout>
   );
 }

package/src/pages/LiquiditySourcePage.tsx

@@ -14,14 +14,13 @@ import {
 } from '@rango-dev/ui';
 import React, { useState } from 'react';
 
-import { Layout } from '../components/Layout';
+import { Layout, PageContainer } from '../components/Layout';
 import { LoadingLiquiditySourceList } from '../components/LoadingLiquiditySourceList';
 import { SearchInput } from '../components/SearchInput';
 import {
   LiquiditySourceList,
   LiquiditySourceSuffix,
   NotFoundContainer,
-  SettingsContainer,
 } from '../components/SettingsContainer';
 import { useAppStore } from '../store/AppStore';
 import { containsText } from '../utils/numbers';
@@ -109,7 +108,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
           </LiquiditySourceSuffix>
         ),
       }}>
-      <SettingsContainer>
+      <PageContainer view>
         <SearchInput
           value={searchedFor}
           setValue={setSearchedFor}
@@ -148,7 +147,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
             </LiquiditySourceList>
           )
         )}
-      </SettingsContainer>
+      </PageContainer>
     </Layout>
   );
 }

package/src/pages/SelectBlockchainPage.tsx

@@ -7,7 +7,7 @@ import {
 import React, { useState } from 'react';
 
 import { BlockchainList } from '../components/BlockchainList';
-import { Layout } from '../components/Layout';
+import { Layout, PageContainer } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
@@ -39,45 +39,45 @@ export function SelectBlockchainPage(props: PropTypes) {
       header={{
         title: i18n.t(`Select Blockchain`),
       }}>
-      <Divider size={12} />
+      <PageContainer view>
+        {showCategory && (
+          <>
+            <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
+          placeholder={i18n.t('Search Blockchain')}
+          color="light"
+          variant="contained"
+          size="large"
+          setValue={() => setSearchedFor('')}
+          onChange={(event) => setSearchedFor(event.target.value)}
+        />
+        <Divider size={16} />
 
-      <SearchInput
-        value={searchedFor}
-        autoFocus
-        placeholder={i18n.t('Search Blockchain')}
-        color="light"
-        variant="contained"
-        size="large"
-        setValue={() => setSearchedFor('')}
-        onChange={(event) => setSearchedFor(event.target.value)}
-      />
-      <Divider size={16} />
-
-      <BlockchainList
-        list={blockchains}
-        searchedFor={searchedFor}
-        blockchainCategory={blockchainCategory}
-        onChange={(blockchain) => {
-          if (type === 'source') {
-            setFromBlockchain(blockchain);
-          } else {
-            setToBlockchain(blockchain);
-          }
-          navigateBack();
-        }}
-      />
+        <BlockchainList
+          list={blockchains}
+          searchedFor={searchedFor}
+          blockchainCategory={blockchainCategory}
+          onChange={(blockchain) => {
+            if (type === 'source') {
+              setFromBlockchain(blockchain);
+            } else {
+              setToBlockchain(blockchain);
+            }
+            navigateBack();
+          }}
+        />
+      </PageContainer>
     </Layout>
   );
 }

package/src/pages/SelectSwapItemsPage.tsx

@@ -6,7 +6,7 @@ import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { BlockchainsSection } from '../components/BlockchainsSection';
-import { Layout } from '../components/Layout';
+import { Layout, PageContainer } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
 import { TokenList } from '../components/TokenList/TokenList';
 import { navigationRoutes } from '../constants/navigationRoutes';
@@ -78,45 +78,47 @@ export function SelectSwapItemsPage(props: PropTypes) {
       header={{
         title: i18n.t('Swap {type}', { type: types[type] }),
       }}>
-      <BlockchainsSection
-        blockchains={blockchains}
-        type={type == 'source' ? 'from' : 'to'}
-        blockchain={type === 'source' ? fromBlockchain : toBlockchain}
-        onMoreClick={() => navigate(navigationRoutes.blockchains)}
-        onChange={(blockchain) => {
-          updateBlockchain(blockchain);
-        }}
-      />
-      <Divider size={24} />
-      <SearchInput
-        value={searchedFor}
-        autoFocus
-        placeholder={i18n.t('Search Token')}
-        color="light"
-        variant="contained"
-        size="large"
-        setValue={() => setSearchedFor('')}
-        onChange={(event) => setSearchedFor(event.target.value)}
-      />
-      <Divider size={16} />
-      <TokenList
-        list={tokensList}
-        selectedBlockchain={selectedBlockchainName}
-        searchedFor={searchedFor}
-        type={type}
-        onChange={(token) => {
-          updateToken(token);
+      <PageContainer>
+        <BlockchainsSection
+          blockchains={blockchains}
+          type={type == 'source' ? 'from' : 'to'}
+          blockchain={type === 'source' ? fromBlockchain : toBlockchain}
+          onMoreClick={() => navigate(navigationRoutes.blockchains)}
+          onChange={(blockchain) => {
+            updateBlockchain(blockchain);
+          }}
+        />
+        <Divider size={24} />
+        <SearchInput
+          value={searchedFor}
+          autoFocus
+          placeholder={i18n.t('Search Token')}
+          color="light"
+          variant="contained"
+          size="large"
+          setValue={() => setSearchedFor('')}
+          onChange={(event) => setSearchedFor(event.target.value)}
+        />
+        <Divider size={16} />
+        <TokenList
+          list={tokensList}
+          selectedBlockchain={selectedBlockchainName}
+          searchedFor={searchedFor}
+          type={type}
+          onChange={(token) => {
+            updateToken(token);
 
-          const tokenBlockchain = blockchains.find(
-            (chain) => token.blockchain === chain.name
-          );
-          if (tokenBlockchain) {
-            updateBlockchain(tokenBlockchain);
-          }
+            const tokenBlockchain = blockchains.find(
+              (chain) => token.blockchain === chain.name
+            );
+            if (tokenBlockchain) {
+              updateBlockchain(tokenBlockchain);
+            }
 
-          navigateBack();
-        }}
-      />
+            navigateBack();
+          }}
+        />
+      </PageContainer>
     </Layout>
   );
 }

package/src/pages/SettingsPage.tsx

@@ -13,8 +13,7 @@ import {
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { Layout } from '../components/Layout';
-import { SettingsContainer } from '../components/SettingsContainer';
+import { Layout, PageContainer } from '../components/Layout';
 import { Slippage } from '../components/Slippage';
 import { SlippageTooltipContainer as TooltipContainer } from '../components/Slippage/Slippage.styles';
 import { navigationRoutes } from '../constants/navigationRoutes';
@@ -183,7 +182,7 @@ export function SettingsPage() {
       header={{
         title: i18n.t('Settings'),
       }}>
-      <SettingsContainer>
+      <PageContainer>
         <Slippage />
         <List
           type={
@@ -191,7 +190,7 @@ export function SettingsPage() {
           }
           items={settingItems}
         />
-      </SettingsContainer>
+      </PageContainer>
     </Layout>
   );
 }

package/src/pages/SwapDetailsPage.tsx

@@ -1,27 +1,41 @@
+import { i18n } from '@lingui/core';
 import { cancelSwap } from '@rango-dev/queue-manager-rango-preset';
 import { useManager } from '@rango-dev/queue-manager-react';
+import { Alert } from '@rango-dev/ui';
 import React from 'react';
+import { useParams } from 'react-router-dom';
 
 import { SwapDetails } from '../components/SwapDetails';
 import { SwapDetailsPlaceholder } from '../components/SwapDetails/SwapDetails.Placeholder';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
-import { useUiStore } from '../store/ui';
 import { getPendingSwaps } from '../utils/queue';
 
 export function SwapDetailsPage() {
   const { manager, state } = useManager();
   const loading = !state.loadedFromPersistor;
   const pendingSwaps = getPendingSwaps(manager);
-  const requestId = useUiStore.use.selectedSwapRequestId();
+  const { requestId } = useParams<{ requestId: string }>();
   const navigateBack = useNavigateBack();
   const { fetchStatus: fetchMetaStatus } = useAppStore();
 
+  if (!requestId) {
+    return (
+      <Alert
+        containerStyles={{ margin: '20px' }}
+        type="error"
+        title={i18n.t(
+          'The request ID is necessary to display the swap details.'
+        )}
+      />
+    );
+  }
+
   const showSkeleton = loading || fetchMetaStatus === 'loading';
 
-  const selectedSwap = pendingSwaps.find(
-    ({ swap }) => swap.requestId === requestId
-  );
+  const selectedSwap = requestId
+    ? pendingSwaps.find(({ swap }) => swap.requestId === requestId)
+    : undefined;
 
   const onCancel = () => {
     if (selectedSwap?.id) {
@@ -47,7 +61,7 @@ export function SwapDetailsPage() {
   if (!swap || showSkeleton) {
     return (
       <SwapDetailsPlaceholder
-        requestId={requestId || ''}
+        requestId={requestId}
         showSkeleton={showSkeleton}
       />
     );
@@ -56,7 +70,7 @@ export function SwapDetailsPage() {
   return (
     <SwapDetails
       swap={swap}
-      requestId={requestId || ''}
+      requestId={requestId}
       onCancel={onCancel}
       onDelete={onDelete}
     />

package/src/pages/ThemePage.tsx

@@ -11,8 +11,7 @@ import {
 } from '@rango-dev/ui';
 import React from 'react';
 
-import { Layout } from '../components/Layout';
-import { SettingsContainer } from '../components/SettingsContainer';
+import { Layout, PageContainer } from '../components/Layout';
 import { useAppStore } from '../store/AppStore';
 
 type Theme = 'dark' | 'light' | 'auto';
@@ -70,7 +69,7 @@ export function ThemePage() {
       header={{
         title: i18n.t('Theme'),
       }}>
-      <SettingsContainer>
+      <PageContainer>
         <RadioRoot
           onValueChange={(value) => setTheme(value as Theme)}
           value={theme}>
@@ -85,7 +84,7 @@ export function ThemePage() {
             items={themesList}
           />
         </RadioRoot>
-      </SettingsContainer>
+      </PageContainer>
     </Layout>
   );
 }

package/src/pages/WalletsPage.tsx

@@ -2,9 +2,9 @@ import type { WalletType } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
 import { styled, Typography, Wallet, WalletState } from '@rango-dev/ui';
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 
-import { Layout } from '../components/Layout';
+import { Layout, PageContainer } from '../components/Layout';
 import { WalletModal } from '../components/WalletModal';
 import { useWalletList } from '../hooks/useWalletList';
 import { useAppStore } from '../store/AppStore';
@@ -20,7 +20,7 @@ const ListContainer = styled('div', {
   height: '100%',
 });
 
-const Container = styled('div', {
+const Container = styled(PageContainer, {
   textAlign: 'center',
 });
 
@@ -71,16 +71,15 @@ export function WalletsPage() {
           {list.map((wallet, index) => {
             const key = `wallet-${index}-${wallet.type}`;
             return (
-              <Fragment key={key}>
-                <Wallet
-                  {...wallet}
-                  container={getContainer()}
-                  onClick={(type) => {
-                    void handleClick(type);
-                  }}
-                  isLoading={fetchMetaStatus === 'loading'}
-                />
-              </Fragment>
+              <Wallet
+                key={key}
+                {...wallet}
+                container={getContainer()}
+                onClick={(type) => {
+                  void handleClick(type);
+                }}
+                isLoading={fetchMetaStatus === 'loading'}
+              />
             );
           })}
           <WalletModal