@rango-dev/widget-embedded 0.1.11-next.9 → 0.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.11-next.9",
+  "version": "0.1.11",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -11,7 +11,7 @@
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "scripts": {
     "watch-tsc": "tsc --watch --noEmit",
-    "dev": "parcel public/index.html -p 3001 --cache-dir=.parcel-cache",
+    "dev": "parcel public/index.html -p 3001 --no-cache",
     "dev-tsc": "npm-run-all --parallel watch-tsc dev",
     "build:app": "parcel build --cache-dir=.parcel-cache",
     "build": "tsdx build --entry ./src/lib.tsx"
@@ -30,9 +30,9 @@
   "dependencies": {
     "@rango-dev/provider-all": "^0.1.11-next.84",
     "@rango-dev/queue-manager-core": "^0.1.11-next.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.1.11-next.3",
+    "@rango-dev/queue-manager-rango-preset": "^0.1.11-next.7",
     "@rango-dev/queue-manager-react": "^0.1.10-next.76",
-    "@rango-dev/ui": "^0.1.11-next.4",
+    "@rango-dev/ui": "^0.1.11-next.12",
     "@rango-dev/wallets-core": "^0.1.11-next.88",
     "@rango-dev/wallets-shared": "^0.1.11-next.84",
     "bignumber.js": "^9.1.1",

package/src/App.tsx

@@ -1,5 +1,5 @@
 import { SwapContainer } from '@rango-dev/ui';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { AppRouter } from './components/AppRouter';
 import { useMetaStore } from './store/meta';
 import './app.css';
@@ -21,6 +21,7 @@ import { WidgetConfig } from './types';
 import './i18n';
 import { useUiStore } from './store/ui';
 import { navigationRoutes } from './constants/navigationRoutes';
+import { initConfig } from './utils/configs';
 
 const providers = allProviders();
 
@@ -32,6 +33,13 @@ export function App({ config }: WidgetProps) {
   globalStyles();
   globalFont(config?.theme?.fontFamily || 'Roboto');
   const { activeTheme } = useTheme({ ...config?.theme });
+  useMemo(() => {
+    if (config?.apiKey) {
+      initConfig({
+        API_KEY: config?.apiKey,
+      });
+    }
+  }, [config]);
 
   const { blockchains } = useMetaStore.use.meta();
   const disconnectWallet = useWalletsStore.use.disconnectWallet();
@@ -98,21 +106,7 @@ export function App({ config }: WidgetProps) {
     >
       <div id="pageContainer" className={activeTheme}>
         <QueueManager>
-          <SwapContainer
-            // style={
-            //   currentPage !== navigationRoutes.home && config?.theme?.height
-            //     ? {
-            //         height: config?.theme?.height,
-            //         width: config?.theme?.width || 'auto',
-            //       }
-            //     : config?.theme?.width
-            //     ? {
-            //         width: config?.theme?.width || 'auto',
-            //       }
-            //     : undefined
-            // }
-            fixedHeight={currentPage !== navigationRoutes.home}
-          >
+          <SwapContainer fixedHeight={currentPage !== navigationRoutes.home}>
             <AppRouter
               lastConnectedWallet={lastConnectedWalletWithNetwork}
               disconnectedWallet={disconnectedWallet}

package/src/QueueManager.tsx

@@ -1,7 +1,7 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, useMemo } from 'react';
 import { Provider as ManagerProvider } from '@rango-dev/queue-manager-react';
 import {
-  swapQueueDef,
+  makeQueueDefinition,
   SwapQueueContext,
   checkWaitingForNetworkChange,
 } from '@rango-dev/queue-manager-rango-preset';
@@ -15,6 +15,7 @@ import { useMetaStore } from './store/meta';
 import { useWalletsStore } from './store/wallets';
 import { walletAndSupportedChainsNames } from './utils/wallets';
 import { isEvmBlockchain } from 'rango-sdk';
+import { getConfig } from './utils/configs';
 
 function QueueManager(props: PropsWithChildren<{}>) {
   const {
@@ -26,6 +27,11 @@ function QueueManager(props: PropsWithChildren<{}>) {
     getWalletInfo,
   } = useWallets();
 
+  const swapQueueDef = useMemo(() => {
+    return makeQueueDefinition({
+      API_KEY: getConfig('API_KEY'),
+    });
+  }, []);
   const { blockchains } = useMetaStore.use.meta();
   const balances = useWalletsStore.use.balances();
 
@@ -63,7 +69,7 @@ function QueueManager(props: PropsWithChildren<{}>) {
       blockchains: allBlockchains,
       evmBasedChains: evmBasedChains,
       evmNetworkChainInfo:
-      convertEvmBlockchainMetaToEvmChainInfo(evmBasedChains),
+        convertEvmBlockchainMetaToEvmChainInfo(evmBasedChains),
       getSupportedChainNames,
     },
     getSigners,

package/src/app.css

@@ -1,19 +1,4 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-}
-
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-input[type='number'] {
-  -moz-appearance: textfield;
-}
 
 #app {
   height: 100vh;

package/src/components/ConfirmSwapErrors.tsx

@@ -1,36 +1,28 @@
 import React from 'react';
-import { Typography } from '@rango-dev/ui';
 import { ConfirmSwapError, ConfirmSwapErrorTypes } from '../types';
 import { MinRequiredSlippage } from './warnings/MinRequiredSlippage';
+import { BalanceErrors } from './warnings/BalanceErrors';
 
 export function ConfirmSwapErrors(errors: ConfirmSwapError[]) {
   return errors.flatMap((error) => {
     switch (error.type) {
       case ConfirmSwapErrorTypes.NO_ROUTE:
-        return (
-          <Typography variant="body2">
-            No routes found. Please try again later.
-          </Typography>
-        );
+        return 'No routes found. Please try again later.';
       case ConfirmSwapErrorTypes.REQUEST_FAILED:
-        return (
-          <Typography variant="body2">{`Failed to confirm swap ${
-            error.status ? `'status': ${error.status})` : ''
-          }, please try again.`}</Typography>
-        );
+        return `Failed to confirm swap ${
+          error.status ? `'status': ${error.status})` : ''
+        }, please try again.`;
 
       case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
-        return (
-          <Typography variant="body2">
-            Route updated and price impact is too high, try again later!
-          </Typography>
-        );
+        return 'Route updated and price impact is too high, try again later!';
       case ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE:
         return (
           <MinRequiredSlippage
             minRequiredSlippage={error.minRequiredSlippage}
           />
         );
+      case ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE:
+        return <BalanceErrors messages={error.messages} />;
       default:
         return [];
     }

package/src/components/ConfirmSwapWarnings.tsx

@@ -1,35 +1,25 @@
-import React from 'react';
-import { Typography } from '@rango-dev/ui';
 import { ConfirmSwapWarningTypes, ConfirmSwapWarnings } from '../types';
-import { BalanceWarnings } from './warnings/BalanceWarnings';
 
 export function ConfirmSwapWarnings(warnings: ConfirmSwapWarnings[]) {
   return warnings.flatMap((warning) => {
     switch (warning.type) {
       case ConfirmSwapWarningTypes.ROUTE_UPDATED:
-        return <Typography variant="body2">Route has been updated.</Typography>;
+        return "Route has been updated.";
       case ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED:
         return (
-          <Typography variant="body2">{`Output amount changed to ${warning.newOutputAmount} 
-      (${warning.percentageChange}% change).`}</Typography>
+          `Output amount changed to ${warning.newOutputAmount} (${warning.percentageChange}% change).`
         );
 
       case ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED:
         return (
-          <Typography variant="body2">
-            Route swappers has been updated.
-          </Typography>
+          "Route swappers has been updated."
         );
       case ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED:
         return (
-          <Typography variant="body2">
-            Route internal coins has been updated.
-          </Typography>
+          "Route internal coins has been updated."
         );
-      case ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE:
-        return <BalanceWarnings messages={warning.messages} />;
       default:
         return [];
     }
   });
-}
+}

package/src/components/SwapDetailsPlaceholder.tsx

@@ -1,9 +1,16 @@
 import React from 'react';
 import { SecondaryPage, Spinner, Alert, styled } from '@rango-dev/ui';
-import { LoaderContainer } from '../pages/WalletsPage';
 
 const PlaceholderContainer = styled('div', { height: '450px' });
 
+export const LoaderContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  paddingTop: '33%',
+  flex: 1,
+});
+
 interface PropTypes {
   requestId: string;
   loading: boolean;

package/src/components/TokenInfo.tsx

@@ -132,6 +132,7 @@ export function TokenInfo(props: PropTypes) {
   const bestRoute = useBestRouteStore.use.bestRoute();
   const inputAmount = useBestRouteStore.use.inputAmount();
   const balances = useWalletsStore.use.balances();
+  const fetchingBestRoute = useBestRouteStore.use.loading();
   const navigate = useNavigate();
   const { t } = useTranslation();
 
@@ -296,6 +297,7 @@ export function TokenInfo(props: PropTypes) {
                   </span>
                 }
                 value={props.inputAmount || ''}
+                min={0}
                 onChange={
                   props.type === 'From'
                     ? (event) => {
@@ -307,11 +309,10 @@ export function TokenInfo(props: PropTypes) {
             ) : (
               <OutputContainer>
                 <Typography variant="h4">
-                  {bestRoute
-                    ? `≈ ${numberToString(props.outputAmount)}`
-                    : inputAmount
-                    ? '?'
-                    : '0'}
+                  {fetchingBestRoute && '?'}
+                  {!!bestRoute?.result &&
+                    `≈ ${numberToString(props.outputAmount)}`}
+                  {(!inputAmount || inputAmount === '0') && '0'}
                 </Typography>
               </OutputContainer>
             )}

package/src/components/warnings/BalanceErrors.tsx

@@ -0,0 +1,45 @@
+import { Spacer, styled, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+interface PropTypes {
+  messages: string[];
+}
+
+const List = styled('ul', {
+  variants: {
+    showListStyle: {
+      true: { paddingLeft: '$24' },
+    },
+  },
+});
+
+const ListItem = styled('li', {
+  variants: {
+    showListStyle: {
+      true: { listStyleType: 'disc', listStylePosition: 'outside' },
+    },
+  },
+});
+
+const Message = styled(Typography, {
+  display: 'block',
+});
+
+export function BalanceErrors({ messages }: PropTypes) {
+  const showListStyle = messages.length > 1;
+  return (
+    <>
+      <Typography className="title" variant="title" color={'error'}>
+        Insufficent Balance:
+      </Typography>
+      <Spacer size={8} direction="vertical" />
+      <List showListStyle={showListStyle}>
+        {messages.map((warning) => (
+          <ListItem showListStyle={showListStyle}>
+            <Message variant="body2">{warning}</Message>
+          </ListItem>
+        ))}
+      </List>
+    </>
+  );
+}

package/src/globalStyles.ts

@@ -2,6 +2,10 @@ import { globalCss } from '@rango-dev/ui';
 
 export const globalStyles = globalCss({
   '*': {
+    boxSizing: 'border-box',
+    margin: 0,
+    padding: 0,
+    listStyleType: 'none',
     '&::-webkit-scrollbar': { width: '$8', height: '$8' },
     '&::-webkit-scrollbar-thumb': {
       backgroundColor: '$neutrals400',

package/src/hooks/useConfirmSwap.ts

@@ -112,12 +112,12 @@ export function useConfirmSwap(): ConfirmSwap {
       selectedWallets,
       disabledLiquiditySources,
       userSlippage,
-      true,
-      affiliateRef
+      affiliateRef,
+      initialRoute
     );
 
     try {
-      const confiremedRoute = await httpService.getBestRoute(requestBody, {
+      const confiremedRoute = await httpService().getBestRoute(requestBody, {
         signal: abortControllerRef.current?.signal,
       });
 
@@ -198,8 +198,8 @@ export function useConfirmSwap(): ConfirmSwap {
       const enoughBalance = balanceWarnings.length === 0;
 
       if (!enoughBalance)
-        confirmSwapState.warnings.push({
-          type: ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE,
+        confirmSwapState.errors.push({
+          type: ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE,
           messages: balanceWarnings,
         });
 

package/src/hooks/useTheme.ts

@@ -2,7 +2,7 @@ import { createTheme } from '@rango-dev/ui';
 import { useState, useEffect, useLayoutEffect } from 'react';
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
-import { Theme } from '../types';
+import { WidgetTheme } from '../types';
 import { shadeColor } from '../utils/common';
 import usePrevious from './usePrevious';
 
@@ -11,7 +11,7 @@ export function useTheme({
   fontFamily = 'Robot',
   borderRadius = 8,
   mode = 'auto',
-}: Theme) {
+}: WidgetTheme) {
   const theme = useSettingsStore.use.theme();
   const fetchMeta = useMetaStore.use.fetchMeta();
   const setTheme = useSettingsStore.use.setTheme();

package/src/index.tsx

@@ -11,4 +11,4 @@ root.render(
   </BrowserRouter>
 );
 
-export { SwapBox } from './lib';
+export { Widget } from './lib';

package/src/lib.tsx

@@ -1,5 +1,5 @@
 import { SwapContainer } from '@rango-dev/ui';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { AppRouter } from './components/AppRouter';
 import { useMetaStore } from './store/meta';
 import { Events, Provider } from '@rango-dev/wallets-core';
@@ -15,18 +15,22 @@ import { Layout } from './components/Layout';
 import { globalFont, globalStyles } from './globalStyles';
 import { useTheme } from './hooks/useTheme';
 import { isEvmBlockchain } from 'rango-sdk';
-import { WidgetConfig } from './types';
+import { WidgetTheme, WidgetConfig, WidgetColors, BlockchainAndTokenConfig } from './types';
 import useSelectLanguage from './hooks/useSelectLanguage';
 import './i18n';
 import QueueManager from './QueueManager';
 import { useUiStore } from './store/ui';
 import { navigationRoutes } from './constants/navigationRoutes';
+import { initConfig } from './utils/configs';
+
+
+export {WidgetConfig, WalletType, WidgetTheme, WidgetColors,  BlockchainAndTokenConfig}
 
 export type WidgetProps = {
   config?: WidgetConfig;
 };
 
-export const SwapBox: React.FC<WidgetProps> = ({ config }) => {
+export const Widget: React.FC<WidgetProps> = ({ config }) => {
   globalStyles();
   globalFont(config?.theme?.fontFamily || 'Roboto');
 
@@ -45,6 +49,14 @@ export const SwapBox: React.FC<WidgetProps> = ({ config }) => {
     .filter(isEvmBlockchain)
     .map((chain) => chain.name);
 
+  useMemo(() => {
+    if (config?.apiKey) {
+      initConfig({
+        API_KEY: config?.apiKey,
+      });
+    }
+  }, [config]);
+
   const onUpdateState: EventHandler = (
     type,
     event,
@@ -106,18 +118,7 @@ export const SwapBox: React.FC<WidgetProps> = ({ config }) => {
       <div id="pageContainer" className={activeTheme}>
         <QueueManager>
           <SwapContainer
-            fixedHeight={currentPage !== navigationRoutes.home}
-            // style={
-            //   currentPage !== navigationRoutes.home && config?.theme?.height
-            //     ? {
-            //         height: config?.theme?.height,
-            //         width: config?.theme?.width || 'auto',
-            //       }
-            //     : {
-            //         width: config?.theme?.width || 'auto',
-            //       }
-            // }
-          >
+            fixedHeight={currentPage !== navigationRoutes.home}>
             <AppRouter
               lastConnectedWallet={lastConnectedWalletWithNetwork}
               disconnectedWallet={disconnectedWallet}

package/src/pages/ConfirmSwapPage.tsx

@@ -47,6 +47,7 @@ export function ConfirmSwapPage() {
   const customSlippage = useSettingsStore.use.customSlippage();
   const inputUsdValue = useBestRouteStore.use.inputUsdValue();
   const outputUsdValue = useBestRouteStore.use.outputUsdValue();
+  const setInputAmount = useBestRouteStore.use.setInputAmount();
 
   const bestRouteloadingStatus = getBestRouteStatus(
     fetchingBestRoute,
@@ -96,7 +97,6 @@ export function ConfirmSwapPage() {
 
   return (
     <ConfirmSwap
-    // @ts-ignore
       requiredWallets={getRequiredChains(bestRoute)}
       selectableWallets={selectableWallets}
       onBack={navigateBackFrom.bind(null, navigationRoutes.confirmSwap)}
@@ -106,13 +106,15 @@ export function ConfirmSwapPage() {
             manager?.create(
               'swap',
               { swapDetails: swap },
-              // @ts-ignore
               { id: swap.requestId }
             );
             setSelectedSwap(swap.requestId);
             navigate(navigationRoutes.swaps + `/${swap.requestId}`, {
               replace: true,
             });
+            setTimeout(() => {
+              setInputAmount('');
+            }, 0);
           }
         });
       }}

package/src/pages/HistoryPage.tsx

@@ -15,11 +15,14 @@ export function HistoryPage() {
   const { manager } = useManager();
   const pendingSwaps = getPendingSwaps(manager).map(({ swap }) => swap);
 
+  const loading = !manager?.isLoaded();
+
   return (
     <History
       list={pendingSwaps}
       groupBy={groupSwapsByDate}
-      onSwapClick={requestId => {
+      loading={loading}
+      onSwapClick={(requestId) => {
         setSelectedSwap(requestId);
         navigate(navigationRoutes.swaps + `/${requestId}`, { replace: true });
       }}

package/src/pages/Home.tsx

@@ -36,6 +36,7 @@ import {
 import BigNumber from 'bignumber.js';
 import { HeaderButtons } from '../components/HeaderButtons';
 import { useUiStore } from '../store/ui';
+import { getFormatedBestRoute } from '../utils/routing';
 
 const Container = styled('div', {
   display: 'flex',
@@ -110,7 +111,6 @@ export function Home() {
     outputUsdValue
   );
 
-  const inputIsZero = inputAmount === '0';
   const swapButtonState = getSwapButtonState(
     loadingMetaStatus,
     accounts,
@@ -120,7 +120,7 @@ export function Home() {
     highValueLoss,
     priceImpactCanNotBeComputed,
     needsToWarnEthOnPath,
-    inputIsZero
+    inputAmount
   );
 
   const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
@@ -178,7 +178,7 @@ export function Home() {
           <BestRoute
             error={bestRouteError}
             loading={fetchingBestRoute}
-            data={bestRoute}
+            data={getFormatedBestRoute(bestRoute)}
             totalFee={numberToString(totalFeeInUsd, 0, 2)}
             feeWarning={highFee}
             totalTime={secondsToString(totalArrivalTime(bestRoute))}
@@ -191,13 +191,11 @@ export function Home() {
           {hasLimitError(bestRoute) && (
             <Alert type="error" title={`${swap?.swapperId} Limit`}>
               <>
-                <Typography variant="body2">{fromAmountRangeError}</Typography>
-                <br />
                 <Typography variant="body2">
-                  Yours: {numberToString(swap?.fromAmount || null)}
-                  {swap?.from.symbol}
+                  {`${fromAmountRangeError}, Yours: ${numberToString(
+                    swap?.fromAmount || null
+                  )} ${swap?.from.symbol}`}
                 </Typography>
-                <br />
                 <Typography variant="body2">{recommendation}</Typography>
               </>
             </Alert>

package/src/pages/SwapDetailsPage.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import useCopyToClipboard from '../hooks/useCopyToClipboard';
 import { useManager } from '@rango-dev/queue-manager-react';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { getPendingSwaps } from '../utils/queue';
-import { SwapHistory, Spacer } from '@rango-dev/ui';
+import { SwapHistory } from '@rango-dev/ui';
 import { useUiStore } from '../store/ui';
 import {
   cancelSwap,
@@ -25,11 +25,10 @@ import {
   isNetworkStatusInWarningState,
   shouldRetrySwap,
 } from '../utils/swap';
-import { TokenPreview } from '../components/TokenPreview';
-import { numberToString } from '../utils/numbers';
 //@ts-ignore
 import { t } from 'i18next';
 import { SwapDetailsPlaceholder } from '../components/SwapDetailsPlaceholder';
+import { getFormatedPendingSwap } from '../utils/routing';
 
 export function SwapDetailsPage() {
   const selectedSwapRequestId = useUiStore.use.selectedSwapRequestId();
@@ -40,14 +39,6 @@ export function SwapDetailsPage() {
   const [isCopied, handleCopy] = useCopyToClipboard(2000);
   const { manager } = useManager();
 
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-    }, 5000);
-  }, []);
-
   const pendingSwaps = getPendingSwaps(manager);
   const selectedSwap = pendingSwaps.find(
     ({ swap }) => swap.requestId === selectedSwapRequestId
@@ -58,6 +49,7 @@ export function SwapDetailsPage() {
     if (swap) cancelSwap(swap);
   };
   const swap = selectedSwap?.swap;
+  const loading = !manager?.isLoaded();
 
   if (!swap)
     return (
@@ -68,11 +60,6 @@ export function SwapDetailsPage() {
       />
     );
 
-  const firstStep = swap.steps[0];
-  const lastStep = swap.steps[swap.steps.length - 1];
-  const fromAmount = numberToString(swap.inputAmount);
-  const toAmount = numberToString(swap.simulationResult.outputAmount);
-
   const currentStep = getCurrentStep(swap);
 
   const currentStepBlockchain = currentStep
@@ -106,12 +93,13 @@ export function SwapDetailsPage() {
   return (
     <SwapHistory
       onBack={navigateBackFrom.bind(null, navigationRoutes.swapDetails)}
+      /* TODO: It was temporarily removed to find a better solution*/
+      /*
       previewInputs={
         <>
           <TokenPreview
             chain={{
               displayName: firstStep?.fromBlockchain || '',
-              // @ts-ignore
               logo: firstStep?.fromBlockchainLogo || '',
             }}
             token={{
@@ -126,7 +114,6 @@ export function SwapDetailsPage() {
           <TokenPreview
             chain={{
               displayName: lastStep?.toBlockchain || '',
-              //@ts-ignore
               logo: lastStep?.toBlockchainLogo || '',
             }}
             token={{
@@ -139,8 +126,8 @@ export function SwapDetailsPage() {
           />
         </>
       }
-      //todo: move PendingSwap type to rango-types
-      pendingSwap={swap}
+      */
+      pendingSwap={getFormatedPendingSwap(swap)}
       onCopy={handleCopy}
       isCopied={isCopied}
       onCancel={onCancel}

package/src/pages/WalletsPage.tsx

@@ -33,7 +33,7 @@ const ListContainer = styled('div', {
   overflowY: 'auto',
 });
 
-export const LoaderContainer = styled('div', {
+const LoaderContainer = styled('div', {
   display: 'flex',
   justifyContent: 'center',
   width: '100%',
@@ -113,7 +113,7 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
       <>
         {walletErrorMessage && (
           <AlertContainer>
-            <Alert type="error">{walletErrorMessage}</Alert>
+            <Alert type="error" title={walletErrorMessage} />
           </AlertContainer>
         )}
         {loadingMetaStatus === 'loading' && (