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

package/src/pages/ConfirmSwapPage.tsx

@@ -12,7 +12,6 @@ import {
   css,
   Divider,
   IconButton,
-  RefreshIcon,
   SettingsIcon,
   styled,
   Tooltip,
@@ -26,7 +25,9 @@ import { useNavigate } from 'react-router-dom';
 import { getRequiredWallets } from '../components/ConfirmWalletsModal/ConfirmWallets.helpers';
 import { ConfirmWalletsModal } from '../components/ConfirmWalletsModal/ConfirmWalletsModal';
 import { HeaderButton } from '../components/HeaderButtons/HeaderButtons.styles';
-import { Layout } from '../components/Layout';
+import { RefreshButton } from '../components/HeaderButtons/RefreshButton';
+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,60 +351,37 @@ export function ConfirmSwapPage() {
         />
       )}
 
-      <Container>
+      <PageContainer>
         <div className={descriptionStyles()}>
           <Typography variant="title" size="small">
             {i18n.t('You get')}
           </Typography>
-          <Button
-            style={{ padding: '0' }}
-            variant="ghost"
-            disabled={fetchingConfirmationQuote}
-            onClick={onRefresh}>
-            <div className={iconStyles()}>
-              <RefreshIcon size={16} />
-            </div>
-          </Button>
-        </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 className={iconStyles()}>
+            <RefreshButton
+              onClick={
+                !fetchingConfirmationQuote &&
+                !showWallets &&
+                !showQuoteWarningModal
+                  ? onRefresh
+                  : undefined
               }
             />
           </div>
-        )}
+        </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,14 +150,17 @@ export function Home() {
         title: i18n.t('Swap'),
         suffix: (
           <HomeButtons
-            layoutRef={layoutRef.current}
-            onClickRefresh={!!quote || quoteError ? fetchQuote : undefined}
+            onClickRefresh={
+              (!!quote || quoteError) && !showQuoteWarningModal
+                ? fetchQuote
+                : undefined
+            }
             onClickHistory={() => navigate(navigationRoutes.swaps)}
             onClickSettings={() => navigate(navigationRoutes.settings)}
           />
         ),
       }}>
-      <Container>
+      <PageContainer>
         <InputsContainer>
           <FromContainer>
             <SwapInput
@@ -258,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';
@@ -40,6 +39,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
   const supportedUniqueSwappersGroups: Array<UniqueSwappersGroupType> =
     getUniqueSwappersGroups(swappers, disabledLiquiditySources);
 
+  const types = { Exchanges: i18n.t('Exchanges'), Bridges: i18n.t('Bridges') };
   const validTypes: Array<LiquiditySourceType> = [];
   if (sourceType === 'Exchanges') {
     validTypes.push('DEX');
@@ -103,19 +103,21 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
         suffix: (
           <LiquiditySourceSuffix>
             <Button variant="ghost" size="xsmall" onClick={toggleAllSources}>
-              {i18n.t(hasSelectAll ? 'Deselect all' : 'Select all')}
+              {hasSelectAll ? i18n.t('Deselect all') : i18n.t('Select all')}
             </Button>
           </LiquiditySourceSuffix>
         ),
       }}>
-      <SettingsContainer>
+      <PageContainer view>
         <SearchInput
           value={searchedFor}
           setValue={setSearchedFor}
           fullWidth
           color="light"
           variant="contained"
-          placeholder={i18n.t('Search {sourceType}', { sourceType })}
+          placeholder={i18n.t('Search {sourceType}', {
+            sourceType: types[sourceType],
+          })}
           onChange={searchHandler}
         />
         {fetchStatus === 'loading' && <LoadingLiquiditySourceList />}
@@ -145,7 +147,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
             </LiquiditySourceList>
           )
         )}
-      </SettingsContainer>
+      </PageContainer>
     </Layout>
   );
 }

package/src/pages/SelectBlockchainPage.tsx

@@ -2,12 +2,12 @@ import { i18n } from '@lingui/core';
 import {
   Divider,
   getCountCategories,
-  SelectableCategoryList
+  SelectableCategoryList,
 } from '@rango-dev/ui';
 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';
@@ -27,7 +27,7 @@ export function SelectBlockchainPage(props: PropTypes) {
   const fetchStatus = useAppStore().fetchStatus;
 
   const blockchains = useAppStore().blockchains({
-    type: type
+    type,
   });
 
   const countActiveCategories = getCountCategories(blockchains);
@@ -37,47 +37,47 @@ export function SelectBlockchainPage(props: PropTypes) {
   return (
     <Layout
       header={{
-        title: i18n.t(`Select Blockchain`)
+        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';
@@ -68,51 +68,57 @@ export function SelectSwapItemsPage(props: PropTypes) {
       setToToken({ token, meta: { blockchains, tokens } });
     }
   };
+  const types = {
+    source: i18n.t('Source'),
+    destination: i18n.t('Destination'),
+  };
 
   return (
     <Layout
       header={{
-        title: i18n.t('Swap {type}', { type }),
+        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>
   );
 }