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

package/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -1,36 +1,16 @@
 import type { PropTypes } from './QuoteInfo.types';
 
-import { Divider } from '@rango-dev/ui';
 import React from 'react';
 
 import { Quote } from '../../components/Quote';
 import { QuoteSkeleton } from '../../components/QuoteSkeleton';
-import { QuoteWarningsAndErrors } from '../../components/QuoteWarningsAndErrors';
 import { useQuoteStore } from '../../store/quote';
 import { QuoteErrorType } from '../../types';
 
-import {
-  PositionTopAlerts,
-  QuoteContainer,
-  SkeletonContainer,
-} from './QuoteInfo.styles';
+import { QuoteContainer } from './QuoteInfo.styles';
 
 export function QuoteInfo(props: PropTypes) {
-  const {
-    quote,
-    type,
-    loading,
-    error,
-    warning,
-    refetchQuote,
-    showWarningModal,
-    onOpenWarningModal,
-    onCloseWarningModal,
-    onConfirmWarningModal,
-    onChangeSettings,
-    expanded = false,
-    alertPosition = 'bottom',
-  } = props;
+  const { quote, type, loading, error, warning, expanded = false } = props;
   const { inputAmount, inputUsdValue, outputUsdValue, outputAmount } =
     useQuoteStore();
 
@@ -41,59 +21,32 @@ export function QuoteInfo(props: PropTypes) {
 
   const showQuote = !noResult && quote && quote.result && !loading;
 
-  const quoteWarningsAndErrors = (warning || error) && (
-    <QuoteWarningsAndErrors
-      warning={warning}
-      error={error}
-      loading={loading}
-      refetchQuote={refetchQuote}
-      showWarningModal={showWarningModal}
-      onOpenWarningModal={onOpenWarningModal}
-      onCloseWarningModal={onCloseWarningModal}
-      onConfirmWarningModal={onConfirmWarningModal}
-      onChangeSettings={onChangeSettings}
-    />
-  );
-  return (
-    <>
-      {loading && (
-        <QuoteContainer>
-          <SkeletonContainer paddingTop={alertPosition === 'top'}>
-            <QuoteSkeleton type={type} expanded={expanded} />
-          </SkeletonContainer>
-        </QuoteContainer>
-      )}
-
-      {alertPosition === 'top' && (
-        <PositionTopAlerts>{quoteWarningsAndErrors}</PositionTopAlerts>
-      )}
-      {showQuote ? (
-        <QuoteContainer>
-          <Quote
-            quote={quote}
-            error={error}
-            warning={warning}
-            type={type}
-            expanded={expanded}
-            recommended={true}
-            input={{
-              value: inputAmount,
-              usdValue: inputUsdValue?.toString() ?? '',
-            }}
-            output={{
-              value: outputAmount?.toString() ?? '',
-              usdValue: outputUsdValue?.toString() ?? '',
-            }}
-          />
-        </QuoteContainer>
-      ) : null}
-
-      {alertPosition === 'bottom' && (
-        <>
-          {!warning && !error && <Divider size={16} />}
-          {quoteWarningsAndErrors}
-        </>
-      )}
-    </>
-  );
+  if (loading) {
+    return (
+      <QuoteContainer>
+        <QuoteSkeleton type={type} expanded={expanded} />
+      </QuoteContainer>
+    );
+  }
+
+  return showQuote ? (
+    <QuoteContainer>
+      <Quote
+        quote={quote}
+        error={error}
+        warning={warning}
+        type={type}
+        expanded={expanded}
+        recommended={true}
+        input={{
+          value: inputAmount,
+          usdValue: inputUsdValue?.toString() ?? '',
+        }}
+        output={{
+          value: outputAmount?.toString() ?? '',
+          usdValue: outputUsdValue?.toString() ?? '',
+        }}
+      />
+    </QuoteContainer>
+  ) : null;
 }

package/src/containers/QuoteInfo/QuoteInfo.types.ts

@@ -10,11 +10,4 @@ export type PropTypes = {
   warning: QuoteWarning | null;
   autoScrollOnExpanding?: boolean;
   expanded?: boolean;
-  alertPosition?: 'top' | 'bottom';
-  refetchQuote: () => void;
-  showWarningModal: boolean;
-  onOpenWarningModal: () => void;
-  onCloseWarningModal: () => void;
-  onConfirmWarningModal: () => void;
-  onChangeSettings: () => void;
 };

package/src/pages/ConfirmSwapPage.tsx

@@ -26,7 +26,8 @@ import { getRequiredWallets } from '../components/ConfirmWalletsModal/ConfirmWal
 import { ConfirmWalletsModal } from '../components/ConfirmWalletsModal/ConfirmWalletsModal';
 import { HeaderButton } from '../components/HeaderButtons/HeaderButtons.styles';
 import { RefreshButton } from '../components/HeaderButtons/RefreshButton';
-import { Layout } from '../components/Layout';
+import { Layout, PageContainer } from '../components/Layout';
+import { QuoteWarningsAndErrors } from '../components/QuoteWarningsAndErrors';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { getQuoteUpdateWarningMessage } from '../constants/warnings';
 import { QuoteInfo } from '../containers/QuoteInfo';
@@ -37,15 +38,7 @@ import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
 import { QuoteWarningType } from '../types';
 import { getContainer } from '../utils/common';
-
-const Container = styled('div', {
-  position: 'relative',
-  width: '100%',
-
-  '& .quote-update__alert': {
-    paddingTop: '$10',
-  },
-});
+import { joinList } from '../utils/ui';
 
 const Buttons = styled('div', {
   width: '100%',
@@ -263,6 +256,45 @@ export function ConfirmSwapPage() {
     }
   }, []);
 
+  const quoteWarning = confirmSwapResult.warnings?.quote ?? null;
+  const quoteError = confirmSwapResult.error;
+  const alerts = [];
+  if (dbErrorMessage) {
+    alerts.push(<Alert type="error" variant="alarm" title={dbErrorMessage} />);
+  }
+
+  if (confirmSwapResult.warnings?.quoteUpdate) {
+    alerts.push(
+      <Alert
+        variant="alarm"
+        type="warning"
+        title={
+          confirmSwapResult.warnings.quoteUpdate &&
+          getQuoteUpdateWarningMessage(confirmSwapResult.warnings.quoteUpdate)
+        }
+      />
+    );
+  }
+
+  if (quoteWarning || quoteError) {
+    alerts.push(
+      <QuoteWarningsAndErrors
+        warning={quoteWarning}
+        error={quoteError}
+        loading={fetchingConfirmationQuote}
+        refetchQuote={onRefresh}
+        showWarningModal={showQuoteWarningModal}
+        onOpenWarningModal={() => setShowQuoteWarningModal(true)}
+        onCloseWarningModal={() => setShowQuoteWarningModal(false)}
+        onConfirmWarningModal={async () => {
+          setShowQuoteWarningModal(false);
+          await addNewSwap();
+        }}
+        onChangeSettings={() => navigate(navigationRoutes.settings)}
+      />
+    );
+  }
+
   return (
     <Layout
       header={{
@@ -319,7 +351,7 @@ export function ConfirmSwapPage() {
         />
       )}
 
-      <Container>
+      <PageContainer>
         <div className={descriptionStyles()}>
           <Typography variant="title" size="small">
             {i18n.t('You get')}
@@ -336,45 +368,20 @@ export function ConfirmSwapPage() {
             />
           </div>
         </div>
-        {dbErrorMessage && (
-          <>
-            <Alert type="error" variant="alarm" title={dbErrorMessage} />
-            <Divider size={12} />
-          </>
-        )}
-        {confirmSwapResult.warnings?.quoteUpdate && (
-          <div className="quote-update__alert">
-            <Alert
-              variant="alarm"
-              type="warning"
-              title={
-                confirmSwapResult.warnings.quoteUpdate &&
-                getQuoteUpdateWarningMessage(
-                  confirmSwapResult.warnings.quoteUpdate
-                )
-              }
-            />
-          </div>
-        )}
+        <Divider size="12" />
+
+        {joinList(alerts, <Divider size={10} />)}
+        {alerts.length > 0 ? <Divider size={10} /> : null}
+
         <QuoteInfo
           quote={quote}
           type="swap-preview"
           expanded={true}
-          alertPosition="top"
           error={confirmSwapResult.error}
           loading={fetchingConfirmationQuote}
           warning={confirmSwapResult.warnings?.quote ?? null}
-          refetchQuote={onRefresh}
-          showWarningModal={showQuoteWarningModal}
-          onOpenWarningModal={() => setShowQuoteWarningModal(true)}
-          onCloseWarningModal={() => setShowQuoteWarningModal(false)}
-          onConfirmWarningModal={async () => {
-            setShowQuoteWarningModal(false);
-            await addNewSwap();
-          }}
-          onChangeSettings={() => navigate('../' + navigationRoutes.settings)}
         />
-      </Container>
+      </PageContainer>
     </Layout>
   );
 }

package/src/pages/HistoryPage.tsx

@@ -6,7 +6,7 @@ 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';
@@ -15,14 +15,6 @@ 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%',
@@ -76,7 +68,7 @@ export function HistoryPage() {
       header={{
         title: i18n.t('History'),
       }}>
-      <Container>
+      <PageContainer>
         <SearchInput
           setValue={setSearchedFor}
           fullWidth
@@ -86,6 +78,7 @@ export function HistoryPage() {
           onChange={searchHandler}
           value={searchedFor}
         />
+        <Divider size="16" />
         <SwapsGroupContainer>
           {isEmpty && (
             <NotFoundContainer>
@@ -110,7 +103,7 @@ export function HistoryPage() {
             />
           )}
         </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';
@@ -28,15 +29,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',
 });
@@ -75,7 +67,6 @@ export function Home() {
   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);
@@ -128,8 +119,7 @@ export function Home() {
 
   return (
     <Layout
-      ref={layoutRef}
-      fixedHeight={false}
+      height="auto"
       hasLogo
       footer={
         <Button
@@ -160,7 +150,6 @@ export function Home() {
         title: i18n.t('Swap'),
         suffix: (
           <HomeButtons
-            layoutRef={layoutRef.current}
             onClickRefresh={
               (!!quote || quoteError) && !showQuoteWarningModal
                 ? fetchQuote
@@ -171,7 +160,7 @@ export function Home() {
           />
         ),
       }}>
-      <Container>
+      <PageContainer>
         <InputsContainer>
           <FromContainer>
             <SwapInput
@@ -262,26 +251,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>
   );
 }