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

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/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

package/src/utils/ui.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { WidgetTheme } from '../types';
 import type { createTheme } from '@rango-dev/ui';
+import type React from 'react';
 
 import {
   theme as baseThemeTokens,
@@ -70,3 +71,22 @@ export function customizedThemeTokens(
     dark,
   };
 }
+
+export function joinList(
+  list: React.JSX.Element[],
+  divider: React.JSX.Element
+) {
+  if (list.length <= 1) {
+    return list;
+  }
+
+  const output: React.JSX.Element[] = [];
+  list.forEach((item, index) => {
+    output.push(item);
+    if (index < list.length - 1) {
+      output.push(divider);
+    }
+  });
+
+  return output;
+}