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

package/src/Wallets.tsx

@@ -6,10 +6,10 @@ import type { PropsWithChildren } from 'react';
 
 import { Events, Provider } from '@rango-dev/wallets-react';
 import { isEvmBlockchain } from 'rango-sdk';
-import React, { createContext, useRef } from 'react';
+import React, { createContext, useEffect, useRef } from 'react';
 
 import { useWalletProviders } from './hooks/useWalletProviders';
-import { useMetaStore } from './store/meta';
+import { AppStoreProvider, useAppStore } from './store/AppStore';
 import { useWalletsStore } from './store/wallets';
 import {
   prepareAccountsForWalletStore,
@@ -27,19 +27,28 @@ export const WidgetContext = createContext<WidgetContextInterface>({
   },
 });
 
-export function WidgetWallets(
+function Main(
   props: PropsWithChildren<{
     providers: WidgetConfig['wallets'];
     options?: ProvidersOptions;
     onUpdateState?: EventHandler;
+    config: WidgetConfig;
   }>
 ) {
-  const { blockchains } = useMetaStore.use.meta();
+  const updateConfig = useAppStore().use.updateConfig();
+  const blockchains = useAppStore().use.blockchains()();
+  const tokens = useAppStore().use.tokens()();
   const { providers } = useWalletProviders(props.providers, props?.options);
   const disconnectWallet = useWalletsStore.use.disconnectWallet();
   const connectWallet = useWalletsStore.use.connectWallet();
   const onConnectWalletHandler = useRef<OnConnectHandler>();
 
+  useEffect(() => {
+    if (props.config) {
+      updateConfig(props.config);
+    }
+  }, [props.config]);
+
   const evmBasedChainNames = blockchains
     .filter(isEvmBlockchain)
     .map((chain) => chain.name);
@@ -61,7 +70,7 @@ export function WidgetWallets(
           evmBasedChainNames,
           supportedChainNames
         );
-        connectWallet(data);
+        connectWallet(data, tokens);
       } else {
         disconnectWallet(type);
       }
@@ -112,3 +121,19 @@ export function WidgetWallets(
     </WidgetContext.Provider>
   );
 }
+
+export function WidgetWallets(
+  props: PropsWithChildren<{
+    providers: WidgetConfig['wallets'];
+    options?: ProvidersOptions;
+    onUpdateState?: EventHandler;
+    config: WidgetConfig;
+  }>
+) {
+  const { config, ...otherProps } = props;
+  return (
+    <AppStoreProvider config={config}>
+      <Main {...otherProps} config={config} />
+    </AppStoreProvider>
+  );
+}

package/src/Widget.tsx

@@ -12,10 +12,10 @@ import { globalFont } from './globalStyles';
 import { useLanguage } from './hooks/useLanguage';
 import { useTheme } from './hooks/useTheme';
 import QueueManager from './QueueManager';
-import { useAppStore } from './store/app';
-import { useMetaStore } from './store/meta';
+import { useAppStore } from './store/AppStore';
 import { useNotificationStore } from './store/notification';
 import { useSettingsStore } from './store/settings';
+import { DEFAULT_CONFIG } from './store/slices/config';
 import { initConfig } from './utils/configs';
 import { WidgetContext, WidgetWallets } from './Wallets';
 
@@ -40,18 +40,16 @@ export type WidgetProps = {
   config?: WidgetConfig;
 };
 
-export function Main(props: PropsWithChildren<WidgetProps>) {
-  const { config } = props;
+export function Main() {
   globalFont();
 
+  const { fetch: fetchMeta, config } = useAppStore()();
   const { activeTheme } = useTheme(config?.theme || {});
   const { activeLanguage, changeLanguage } = useLanguage();
-
   const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
     useState<string>('');
   const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
   const widgetContext = useContext(WidgetContext);
-  const fetchMeta = useMetaStore.use.fetchMeta();
 
   useMemo(() => {
     if (config?.apiKey) {
@@ -60,33 +58,29 @@ export function Main(props: PropsWithChildren<WidgetProps>) {
       });
     }
   }, [config]);
-
   useEffect(() => {
-    void fetchMeta();
+    void fetchMeta().catch();
     void useSettingsStore.persist.rehydrate();
     void useNotificationStore.persist.rehydrate();
     widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
   }, []);
-
   useEffect(() => {
     if (config?.language) {
       changeLanguage(config.language);
     }
   }, [config?.language]);
-
   return (
     <I18nManager language={activeLanguage}>
       <MainContainer id="swap-container" className={activeTheme()}>
         <QueueManager>
           <WidgetEvents />
           <AppRouter
-            config={config}
             lastConnectedWallet={lastConnectedWalletWithNetwork}
             disconnectedWallet={disconnectedWallet}
             clearDisconnectedWallet={() => {
               setDisconnectedWallet(undefined);
             }}>
-            <AppRoutes config={config} />
+            <AppRoutes />
           </AppRouter>
         </QueueManager>
       </MainContainer>
@@ -95,25 +89,17 @@ export function Main(props: PropsWithChildren<WidgetProps>) {
 }
 
 export function Widget(props: PropsWithChildren<WidgetProps>) {
-  const { updateConfig, config } = useAppStore();
-  useEffect(() => {
-    if (props.config) {
-      updateConfig(props.config);
-    }
-  }, [props.config]);
-
   if (!props.config?.externalWallets) {
     return (
       <WidgetWallets
-        providers={config?.wallets}
+        config={props.config ?? DEFAULT_CONFIG}
+        providers={props.config?.wallets}
         options={{
-          walletConnectProjectId:
-            config?.walletConnectProjectId ||
-            props.config?.walletConnectProjectId,
+          walletConnectProjectId: props.config?.walletConnectProjectId,
         }}>
-        <Main {...props} />
+        <Main />
       </WidgetWallets>
     );
   }
-  return <Main {...props} />;
+  return <Main />;
 }

package/src/components/AppRouter.tsx

@@ -1,4 +1,3 @@
-import type { WidgetConfig } from '../types';
 import type { WalletType } from '@rango-dev/wallets-shared';
 import type { PropsWithChildren } from 'react';
 
@@ -11,7 +10,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { Home } from '../pages/Home';
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
 
 import { UpdateUrl } from './UpdateUrl';
 
@@ -44,11 +43,10 @@ export function AppRouter({
   lastConnectedWallet: string;
   disconnectedWallet: WalletType | undefined;
   clearDisconnectedWallet: () => void;
-  config: WidgetConfig | undefined;
 }) {
   const isRouterInContext = useInRouterContext();
   const Router = isRouterInContext ? Route : MemoryRouter;
-  const { blockchains } = useMetaStore.use.meta();
+  const blockchains = useAppStore().use.blockchains()();
   const { canSwitchNetworkTo } = useWallets();
 
   const evmChains = blockchains.filter(isEvmBlockchain);
@@ -64,7 +62,7 @@ export function AppRouter({
   return (
     <>
       <Router>{children}</Router>
-      {isRouterInContext && <UpdateUrl config={props.config} />}
+      {isRouterInContext && <UpdateUrl />}
     </>
   );
 }

package/src/components/AppRoutes.tsx

@@ -1,5 +1,3 @@
-import type { WidgetConfig } from '../types';
-
 import React from 'react';
 import { useRoutes } from 'react-router-dom';
 
@@ -18,13 +16,7 @@ import { WalletsPage } from '../pages/WalletsPage';
 
 const getAbsolutePath = (path: string) => path.replace('/', '');
 
-interface PropTypes {
-  config?: WidgetConfig;
-}
-
-export function AppRoutes(props: PropTypes) {
-  const { config } = props;
-
+export function AppRoutes() {
   return useRoutes([
     {
       path: navigationRoutes.home,
@@ -48,12 +40,7 @@ export function AppRoutes(props: PropTypes) {
     },
     {
       path: navigationRoutes.settings,
-      element: (
-        <SettingsPage
-          singleTheme={config?.theme?.singleTheme}
-          supportedSwappers={config?.liquiditySources}
-        />
-      ),
+      element: <SettingsPage />,
     },
     {
       path: navigationRoutes.themes,
@@ -65,21 +52,11 @@ export function AppRoutes(props: PropTypes) {
     },
     {
       path: navigationRoutes.exchanges,
-      element: (
-        <LiquiditySourcePage
-          sourceType="Exchanges"
-          supportedSwappers={config?.liquiditySources}
-        />
-      ),
+      element: <LiquiditySourcePage sourceType="Exchanges" />,
     },
     {
       path: navigationRoutes.bridges,
-      element: (
-        <LiquiditySourcePage
-          sourceType="Bridges"
-          supportedSwappers={config?.liquiditySources}
-        />
-      ),
+      element: <LiquiditySourcePage sourceType="Bridges" />,
     },
     { path: navigationRoutes.swaps, element: <HistoryPage /> },
     {
@@ -88,21 +65,11 @@ export function AppRoutes(props: PropTypes) {
     },
     {
       path: navigationRoutes.wallets,
-      element: (
-        <WalletsPage
-          supportedWallets={config?.wallets}
-          multiWallets={
-            typeof config?.multiWallets === 'undefined'
-              ? true
-              : config.multiWallets
-          }
-          config={config}
-        />
-      ),
+      element: <WalletsPage />,
     },
     {
       path: getAbsolutePath(navigationRoutes.confirmSwap),
-      element: <ConfirmSwapPage config={config} />,
+      element: <ConfirmSwapPage />,
     },
   ]);
 }

package/src/components/BlockchainList/BlockchainList.tsx

@@ -11,7 +11,7 @@ import {
 } from '@rango-dev/ui';
 import React, { useEffect, useState } from 'react';
 
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 
 import { filterBlockchains } from './BlockchainList.helpers';
 import { Container, List } from './BlockchainList.styles';
@@ -20,7 +20,7 @@ import { LoadingBlockchainList } from './LoadingBlockchainList';
 export function BlockchainList(props: PropTypes) {
   const { list, searchedFor, onChange, blockchainCategory } = props;
   const [blockchains, setBlockchains] = useState<BlockchainMeta[]>(list);
-  const loadingStatus = useMetaStore.use.loadingStatus();
+  const { fetchStatus } = useAppStore()();
 
   useEffect(() => {
     setBlockchains([
@@ -66,8 +66,8 @@ export function BlockchainList(props: PropTypes) {
         {i18n.t('Select Blockchain')}
       </Typography>
       <Divider size={4} />
-      {loadingStatus === 'loading' && <LoadingBlockchainList />}
-      {loadingStatus === 'success' && renderList()}
+      {fetchStatus === 'loading' && <LoadingBlockchainList />}
+      {fetchStatus === 'success' && renderList()}
     </Container>
   );
 }

package/src/components/BlockchainsSection/BlockchainsSection.tsx

@@ -13,7 +13,7 @@ import React from 'react';
 
 import { BLOCKCHAIN_LIST_SIZE } from '../../constants/configs';
 import { usePrepareBlockchainList } from '../../hooks/usePrepareBlockchainList';
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
 
 import { Container } from './BlockchainsSection.styles';
@@ -27,7 +27,7 @@ export function BlockchainsSection(props: PropTypes) {
     selected: blockchain?.name,
   });
 
-  const loadingStatus = useMetaStore.use.loadingStatus();
+  const { fetchStatus } = useAppStore()();
   const resetToBlockchain = useQuoteStore.use.resetToBlockchain();
   const resetFromBlockchain = useQuoteStore.use.resetFromBlockchain();
   const hasMoreItemsInList = blockchainsList.more.length > 0;
@@ -45,11 +45,11 @@ export function BlockchainsSection(props: PropTypes) {
       </Typography>
       <Divider size={12} />
       <Container>
-        {loadingStatus === 'loading' &&
+        {fetchStatus === 'loading' &&
           Array.from(Array(NUMBER_OF_LOADING), (e) => (
             <Skeleton key={e} variant="rounded" height={50} />
           ))}
-        {loadingStatus === 'success' && (
+        {fetchStatus === 'success' && (
           <>
             <BlockchainsChip
               selected={!blockchain}

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -21,7 +21,7 @@ import { useNavigate } from 'react-router-dom';
 import { getQuoteErrorMessage } from '../../constants/errors';
 import { navigationRoutes } from '../../constants/navigationRoutes';
 import { getQuoteUpdateWarningMessage } from '../../constants/warnings';
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
 import { useWalletsStore } from '../../store/wallets';
 import { confirmSwapDisabled } from '../../utils/swap';
@@ -50,8 +50,9 @@ const NUMBER_OF_WALLETS_TO_DISPLAY = 2;
 
 export function ConfirmWalletsModal(props: PropTypes) {
   //TODO: move component's logics to a custom hook
-  const { open, onClose, onCancel, onCheckBalance, config, loading } = props;
-  const { blockchains } = useMetaStore.use.meta();
+  const { open, onClose, onCancel, onCheckBalance, loading } = props;
+  const config = useAppStore().use.config();
+  const blockchains = useAppStore().use.blockchains()();
   const {
     quote,
     setSelectedWallets: selectQuoteWallets,
@@ -75,10 +76,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const customDestinationRef = useRef<HTMLDivElement | null>(null);
 
   const requiredWallets = getRequiredWallets(quote);
-  const customDestinationEnabled =
-    typeof config?.customDestination === 'undefined'
-      ? true
-      : config.customDestination;
 
   const lastStepToBlockchain = blockchains.find(
     (blockchain) =>
@@ -320,9 +317,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
               chain={showMoreWalletFor}
               isSelected={isSelected}
               selectWallet={onChange}
-              multiWallets={config?.multiWallets ?? true}
-              supportedWallets={config?.wallets ?? []}
-              config={config}
               onShowMore={setShowMoreWalletFor.bind(null, showMoreWalletFor)}
             />
           </div>
@@ -380,9 +374,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
                       chain={requiredWallet}
                       isSelected={isSelected}
                       selectWallet={onChange}
-                      multiWallets={config?.multiWallets ?? true}
-                      supportedWallets={config?.wallets ?? []}
-                      config={config}
                       limit={NUMBER_OF_WALLETS_TO_DISPLAY}
                       onShowMore={() =>
                         setShowMoreWalletFor(blockchain?.name ?? '')
@@ -390,7 +381,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                     />
                   </ListContainer>
                   {!isLastWallet && <Divider size={32} />}
-                  {isLastWallet && customDestinationEnabled && (
+                  {isLastWallet && config?.customDestination && (
                     <CustomDestination>
                       <CollapsibleRoot
                         ref={customDestinationRef}

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.types.ts

@@ -1,4 +1,3 @@
-import type { WidgetConfig } from '../..';
 import type { ConfirmSwap } from '../../hooks/useConfirmSwap/useConfirmSwap.types';
 
 export type PropTypes = {
@@ -6,6 +5,5 @@ export type PropTypes = {
   onClose: () => void;
   onCancel: () => void;
   onCheckBalance: ConfirmSwap['fetch'];
-  config?: WidgetConfig;
   loading: boolean;
 };

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -23,7 +23,7 @@ import {
   TIME_TO_CLOSE_MODAL,
   TIME_TO_IGNORE_MODAL,
 } from '../../pages/WalletsPage';
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 import { useWalletsStore } from '../../store/wallets';
 import { getBlockchainDisplayNameFor } from '../../utils/meta';
 import {
@@ -41,10 +41,11 @@ import {
 } from './WalletList.styles';
 
 export function WalletList(props: PropTypes) {
-  const { config, chain, isSelected, selectWallet, limit, onShowMore } = props;
+  const { chain, isSelected, selectWallet, limit, onShowMore } = props;
+  const { config } = useAppStore()();
 
   const connectedWallets = useWalletsStore.use.connectedWallets();
-  const { blockchains } = useMetaStore.use.meta();
+  const { blockchains } = useAppStore()();
   const [openWalletStateModal, setOpenWalletStateModal] =
     useState<WalletType>('');
   const [experimentalChainWallet, setExperimentalChainWallet] =
@@ -137,7 +138,7 @@ export function WalletList(props: PropTypes) {
         });
         const conciseAddress = address ? getConciseAddress(address) : '';
 
-        const experimentalChain = isExperimentalChain(blockchains, chain);
+        const experimentalChain = isExperimentalChain(blockchains(), chain);
 
         const experimentalChainNotAdded = !connectedWallets.find(
           (connectedWallet) =>
@@ -180,7 +181,7 @@ export function WalletList(props: PropTypes) {
           experimentalChainWallet?.chain
             ? getBlockchainDisplayNameFor(
                 experimentalChainWallet.chain,
-                blockchains
+                blockchains()
               )
             : undefined;
         return (

package/src/components/ConfirmWalletsModal/WalletList.type.ts

@@ -1,12 +1,9 @@
-import type { Wallet, WidgetConfig } from '../../types';
+import type { Wallet } from '../../types';
 
 export type PropTypes = {
   chain: string;
-  supportedWallets: WidgetConfig['wallets'];
   isSelected: (walletType: string, chain: string) => boolean;
   selectWallet: (wallet: Wallet) => void;
-  multiWallets: boolean;
-  config?: WidgetConfig;
   limit?: number;
   onShowMore: () => void;
 };

package/src/components/NoResult/NoResult.tsx

@@ -11,6 +11,7 @@ import {
 import React from 'react';
 
 import { errorMessages } from '../../constants/errors';
+import { useAppStore } from '../../store/AppStore';
 import { useSettingsStore } from '../../store/settings';
 
 import { makeInfo } from './NoResult.helpers';
@@ -23,10 +24,12 @@ export function NoResult(props: PropTypes) {
   const toggleAllLiquiditySources =
     useSettingsStore.use.toggleAllLiquiditySources();
 
+  const swappers = useAppStore().use.swappers()();
+
   const info = makeInfo(
     error,
     disabledLiquiditySources,
-    toggleAllLiquiditySources,
+    () => toggleAllLiquiditySources(swappers, true),
     fetch
   );
 

package/src/components/NotificationContent/NotificationContent.tsx

@@ -10,7 +10,7 @@ import {
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useUiStore } from '../../store/ui';
 
@@ -26,7 +26,8 @@ export function NotificationContent() {
   const { getUnreadNotifications } = useNotificationStore();
 
   const notifications: Notification[] = getUnreadNotifications();
-  const { tokens, blockchains } = useMetaStore.use.meta();
+  const blockchains = useAppStore().use.blockchains()();
+  const tokens = useAppStore().use.tokens()();
   const sortedNotification = notifications
     .sort((a, b) => b.creationTime - a.creationTime)
     .slice(0, MAX_NOTIFICATIONS_DISPLAYED);

package/src/components/Quote/Quote.tsx

@@ -30,7 +30,7 @@ import {
   FooterAlert,
   FooterStepAlarm,
 } from '../../containers/QuoteInfo/QuoteInfo.styles';
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 import { QuoteErrorType, QuoteWarningType } from '../../types';
 import {
   numberToString,
@@ -53,9 +53,6 @@ import {
 import { QuoteSummary } from './QuoteSummary';
 
 export function Quote(props: QuoteProps) {
-  const {
-    meta: { tokens },
-  } = useMetaStore();
   const {
     quote,
     input,
@@ -65,6 +62,7 @@ export function Quote(props: QuoteProps) {
     type,
     recommended = true,
   } = props;
+  const tokens = useAppStore().use.tokens()();
 
   const [expanded, setExpanded] = useState(props.expanded);
   const quoteRef = useRef<HTMLButtonElement | null>(null);

package/src/components/SwapDetails/SwapDetails.tsx

@@ -34,7 +34,7 @@ import {
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useQuoteStore } from '../../store/quote';
 import {
@@ -64,6 +64,8 @@ import { Container, HeaderDetails, StepsList } from './SwapDetails.styles';
 export function SwapDetails(props: SwapDetailsProps) {
   const { swap, requestId, onDelete, onCancel: onCancelProps } = props;
   const { canSwitchNetworkTo, connect, getWalletInfo } = useWallets();
+  const blockchains = useAppStore().use.blockchains()();
+  const tokens = useAppStore().use.tokens()();
   const retry = useQuoteStore.use.retry();
   const navigate = useNavigate();
   const { navigateBackFrom } = useNavigateBack();
@@ -73,9 +75,6 @@ export function SwapDetails(props: SwapDetailsProps) {
   const [showCompletedModal, setShowCompletedModal] = useState<
     'success' | 'failed' | null
   >(null);
-  const {
-    meta: { tokens, blockchains },
-  } = useMetaStore();
 
   const onCancel = () => {
     onCancelProps();
@@ -150,7 +149,7 @@ export function SwapDetails(props: SwapDetailsProps) {
     showNetworkModal: currentStepNetworkStatus,
     setNetworkModal: setModalState,
     message: stepMessage,
-    blockchains,
+    blockchains: blockchains,
   });
   const numberOfSteps = steps.length;
   const [firstStep, lastStep] = [swap.steps[0], swap.steps[numberOfSteps - 1]];
@@ -264,7 +263,7 @@ export function SwapDetails(props: SwapDetailsProps) {
             type="primary"
             size="large"
             onClick={() => {
-              retry(swap);
+              retry(swap, { blockchains: blockchains, tokens: tokens });
               setTimeout(() => {
                 navigate(navigationRoutes.home);
               }, 0);

package/src/components/TokenList/TokenList.tsx

@@ -21,8 +21,7 @@ import {
 } from '@rango-dev/ui';
 import React, { forwardRef, useEffect, useState } from 'react';
 
-import { useAppStore } from '../../store/app';
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 import { useWalletsStore } from '../../store/wallets';
 import { generateRangeColors } from '../../utils/colors';
 
@@ -87,11 +86,11 @@ export function TokenList(props: PropTypes) {
   const { list, searchedFor = '', onChange, selectedBlockchain } = props;
 
   const [tokens, setTokens] = useState<TokenWithBalance[]>(list);
-  const loadingStatus = useMetaStore.use.loadingStatus();
+  const fetchStatus = useAppStore().use.fetchStatus();
+  const blockchains = useAppStore().use.blockchains()();
   const [hasNextPage, setHasNextPage] = useState<boolean>(true);
   const loadingWallet = useWalletsStore.use.loading();
-  const { blockchains } = useMetaStore.use.meta();
-  const { isTokenPinned } = useAppStore();
+  const { isTokenPinned } = useAppStore()();
 
   // eslint-disable-next-line react/display-name
   const innerElementType: React.FC<CommonProps> = forwardRef((render, ref) => {
@@ -268,8 +267,8 @@ export function TokenList(props: PropTypes) {
         {i18n.t('Select Token')}
       </Typography>
       <Divider size={4} />
-      {loadingStatus === 'loading' && <LoadingTokenList size={PAGE_SIZE} />}
-      {loadingStatus === 'success' && <List>{renderList()}</List>}
+      {fetchStatus === 'loading' && <LoadingTokenList size={PAGE_SIZE} />}
+      {fetchStatus === 'success' && <List>{renderList()}</List>}
     </Container>
   );
 }