@rango-dev/widget-embedded 0.19.0 → 0.19.1-next.0

package/dist/utils/wallets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/utils/wallets.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/utils/wallets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,KAAK,EACV,KAAK,EACL,OAAO,EACP,UAAU,EACV,WAAW,EACX,UAAU,EAEX,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EACV,iBAAiB,EACjB,cAAc,EACd,KAAK,EACL,YAAY,EACb,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,WAAW,IAAI,YAAY,EAAE,MAAM,eAAe,CAAC;AAuB5D,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,WAAW,GAAG,YAAY,CAWvE;AAED,wBAAgB,0BAA0B,CACxC,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,WAAW,EAC3C,aAAa,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,UAAU,EAC/C,IAAI,EAAE,UAAU,EAAE,EAClB,KAAK,CAAC,EAAE,MAAM,GACb,eAAe,EAAE,CA6BnB;AAED,wBAAgB,6BAA6B,CAC3C,oBAAoB,EAAE,cAAc,EAAE,GACrC,OAAO,EAAE,GAAG,IAAI,CAUlB;AAED,wBAAgB,6BAA6B,CAC3C,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,MAAM,EAAE,EAClB,cAAc,EAAE,MAAM,EAAE,EACxB,mBAAmB,EAAE,OAAO,EAAE,GAAG,IAAI,EACrC,gBAAgB,EAAE,OAAO,GACxB,MAAM,EAAE,CAkFV;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,YA4BhE;AAID,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,MAAM,EACf,eAAe,EAAE,eAAe,WAOjC;AAED,wBAAgB,cAAc,CAC5B,gBAAgB,EAAE,YAAY,EAC9B,MAAM,EAAE,KAAK,EAAE,GACd,YAAY,EAAE,CAuBhB;AAED,wBAAgB,yBAAyB,CACvC,eAAe,EAAE,eAAe,GAC/B,eAAe,CAEjB;AAED,eAAO,MAAM,uBAAuB,oBAAqB,eAAe,EAAE,WAwCzE,CAAC;AAQF,eAAO,MAAM,WAAW,eACV,MAAM,UACV,MAAM,WACL,MAAM,GAAG,IAAI,aACX,KAAK,EAAE,KACjB,MAAM,GAAG,IAQX,CAAC;AACF,eAAO,MAAM,mBAAmB,gBACjB,cAAc,EAAE,UACrB,MAAM,KACb,OAUF,CAAC;AAEF,eAAO,MAAM,kCAAkC,sBAC1B,MAAM,EAAE,KAC1B,UAAU,EAUZ,CAAC;AAEF,wBAAgB,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,OAAO,GAAG,IAAI,CAkBrE;AA8CD,wBAAgB,UAAU,CACxB,MAAM,EAAE,KAAK,EAAE,EACf,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,GAAG,IAAI,EAC/C,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,WAczC;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG,IAAI,EAC/D,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG,IAAI,WAOhE;AAED,wBAAgB,iCAAiC,CAC/C,OAAO,EAAE,eAAe,EAAE,GACzB,eAAe,EAAE,CAcnB;AAED,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,MAAM,EAEf,QAAQ,SAAI,EAEZ,cAAc,SAAI,GACjB,MAAM,CAOR;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,gBAAgB,EAChB,UAAU,GACX,EAAE;IACD,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,MAAM,GAAG,SAAS,CAMrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,CAEvD;AAED,wBAAgB,iBAAiB,CAAC,gBAAgB,EAAE,eAAe,EAAE,iBAmCpE;AAED,eAAO,MAAM,iBAAiB,qBACV,eAAe,EAAE,cACvB,MAAM,YAIjB,CAAC"}

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.19.0",
+  "version": "0.19.1-next.0",
   "license": "MIT",
   "type": "module",
+  "source": "./src/index.ts",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [
@@ -12,6 +13,7 @@
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "scripts": {
     "build": "node ../../scripts/build/command.mjs --path widget/embedded",
+    "ts-check": "tsc --declaration --emitDeclarationOnly -p ./tsconfig.json",
     "clean": "rimraf dist",
     "format": "prettier --write '{.,src}/**/*.{ts,tsx}'",
     "lint": "eslint \"**/*.{ts,tsx}\" --ignore-path ../../.eslintignore"
@@ -19,20 +21,20 @@
   "dependencies": {
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
-    "@rango-dev/provider-all": "^0.24.0",
-    "@rango-dev/queue-manager-core": "^0.23.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.24.0",
-    "@rango-dev/queue-manager-react": "^0.23.0",
-    "@rango-dev/ui": "^0.24.0",
-    "@rango-dev/wallets-react": "^0.10.0",
-    "@rango-dev/wallets-shared": "^0.23.0",
+    "@rango-dev/provider-all": "^0.24.1-next.0",
+    "@rango-dev/queue-manager-core": "^0.23.1-next.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.24.1-next.0",
+    "@rango-dev/queue-manager-react": "^0.23.1-next.0",
+    "@rango-dev/ui": "^0.24.1-next.0",
+    "@rango-dev/wallets-react": "^0.10.1-next.0",
+    "@rango-dev/wallets-shared": "^0.23.1-next.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
     "immer": "^9.0.19",
     "mitt": "^3.0.0",
-    "rango-sdk": "^0.1.35",
-    "rango-types": "^0.1.46",
+    "rango-sdk": "^0.1.44",
+    "rango-types": "^0.1.57",
     "react-i18next": "^12.2.0",
     "react-router-dom": "^6.8.0",
     "values.js": "2.1.1",
@@ -45,4 +47,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/QueueManager.tsx

@@ -1,23 +1,23 @@
-import React, { PropsWithChildren, useMemo } from 'react';
-import { Provider as ManagerProvider } from '@rango-dev/queue-manager-react';
+import type { SwapQueueContext } from '@rango-dev/queue-manager-rango-preset';
+import type { Network, WalletType } from '@rango-dev/wallets-shared';
+import type { PropsWithChildren } from 'react';
+
 import {
-  makeQueueDefinition,
-  SwapQueueContext,
   checkWaitingForNetworkChange,
+  makeQueueDefinition,
 } from '@rango-dev/queue-manager-rango-preset';
+import { Provider as ManagerProvider } from '@rango-dev/queue-manager-react';
 import { useWallets } from '@rango-dev/wallets-react';
-import {
-  convertEvmBlockchainMetaToEvmChainInfo,
-  Network,
-  WalletType,
-} from '@rango-dev/wallets-shared';
-import { useMetaStore } from './store/meta';
+import { convertEvmBlockchainMetaToEvmChainInfo } from '@rango-dev/wallets-shared';
+import { isEvmBlockchain } from 'rango-types';
+import React, { useMemo } from 'react';
+
+import { useAppStore } from './store/AppStore';
 import { useWalletsStore } from './store/wallets';
-import { walletAndSupportedChainsNames } from './utils/wallets';
 import { getConfig } from './utils/configs';
-import { isEvmBlockchain } from 'rango-types';
+import { walletAndSupportedChainsNames } from './utils/wallets';
 
-function QueueManager(props: PropsWithChildren) {
+function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
   const {
     providers,
     getSigners,
@@ -29,11 +29,12 @@ function QueueManager(props: PropsWithChildren) {
 
   const swapQueueDef = useMemo(() => {
     return makeQueueDefinition({
-      API_KEY: getConfig('API_KEY'),
+      API_KEY: props.apiKey || getConfig('API_KEY'),
+      BASE_URL: getConfig('BASE_URL'),
     });
-  }, []);
+  }, [props.apiKey]);
 
-  const { blockchains } = useMetaStore.use.meta();
+  const blockchains = useAppStore().blockchains();
   const connectedWallets = useWalletsStore.use.connectedWallets();
 
   const wallets = {
@@ -43,7 +44,7 @@ function QueueManager(props: PropsWithChildren) {
     })),
   };
 
-  const switchNetwork = (wallet: WalletType, network: Network) => {
+  const switchNetwork = async (wallet: WalletType, network: Network) => {
     if (!canSwitchNetworkTo(wallet, network)) {
       return undefined;
     }

package/src/components/AppRouter.tsx

@@ -1,42 +1,17 @@
-import type { WidgetConfig } from '../types';
 import type { WalletType } from '@rango-dev/wallets-shared';
 import type { PropsWithChildren } from 'react';
 
 import { useQueueManager } from '@rango-dev/queue-manager-rango-preset';
 import { useWallets } from '@rango-dev/wallets-react';
 import { isEvmBlockchain } from 'rango-types';
-import React, { useEffect, useRef } from 'react';
+import React, { Fragment } from 'react';
 import { MemoryRouter, useInRouterContext } from 'react-router';
-import { useLocation, useNavigate } from 'react-router-dom';
 
-import { navigationRoutes } from '../constants/navigationRoutes';
-import { Home } from '../pages/Home';
-import { useMetaStore } from '../store/meta';
+import { useForceAutoConnect } from '../hooks/useForceAutoConnect';
+import { useAppStore } from '../store/AppStore';
 
 import { UpdateUrl } from './UpdateUrl';
 
-function Route(props: PropsWithChildren) {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const firstRender = useRef(true);
-  const paths = location.pathname.split('/');
-  const pathMatched = paths[paths.length - 1] === navigationRoutes.confirmSwap;
-  const shouldRedirectToMainPage = pathMatched && firstRender.current;
-
-  useEffect(() => {
-    if (shouldRedirectToMainPage) {
-      navigate('.');
-    }
-    firstRender.current = false;
-  }, []);
-
-  if (shouldRedirectToMainPage) {
-    return <Home />;
-  }
-
-  return <> {props.children}</>;
-}
-
 export function AppRouter({
   children,
   ...props
@@ -44,13 +19,14 @@ 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 Router = isRouterInContext ? Fragment : MemoryRouter;
+  const blockchains = useAppStore().blockchains();
   const { canSwitchNetworkTo } = useWallets();
 
+  useForceAutoConnect();
+
   const evmChains = blockchains.filter(isEvmBlockchain);
 
   useQueueManager({
@@ -64,7 +40,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';
 
@@ -16,15 +14,7 @@ import { SwapDetailsPage } from '../pages/SwapDetailsPage';
 import { ThemePage } from '../pages/ThemePage';
 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,
@@ -32,77 +22,75 @@ export function AppRoutes(props: PropTypes) {
     },
     {
       path: navigationRoutes.fromSwap,
-      element: <SelectSwapItemsPage type="source" />,
+      children: [
+        {
+          index: true,
+          element: <SelectSwapItemsPage type="source" />,
+        },
+        {
+          path: navigationRoutes.blockchains,
+          element: <SelectBlockchainPage type="source" />,
+        },
+      ],
     },
     {
       path: navigationRoutes.toSwap,
-      element: <SelectSwapItemsPage type="destination" />,
-    },
-    {
-      path: navigationRoutes.fromBlockchain,
-      element: <SelectBlockchainPage type="source" />,
-    },
-    {
-      path: navigationRoutes.toBlockchain,
-      element: <SelectBlockchainPage type="destination" />,
+      children: [
+        {
+          index: true,
+          element: <SelectSwapItemsPage type="destination" />,
+        },
+        {
+          path: navigationRoutes.blockchains,
+          element: <SelectBlockchainPage type="destination" />,
+        },
+      ],
     },
     {
       path: navigationRoutes.settings,
-      element: (
-        <SettingsPage
-          singleTheme={config?.theme?.singleTheme}
-          supportedSwappers={config?.liquiditySources}
-        />
-      ),
-    },
-    {
-      path: navigationRoutes.themes,
-      element: <ThemePage />,
-    },
-    {
-      path: navigationRoutes.languages,
-      element: <LanguagePage />,
-    },
-    {
-      path: navigationRoutes.exchanges,
-      element: (
-        <LiquiditySourcePage
-          sourceType="Exchanges"
-          supportedSwappers={config?.liquiditySources}
-        />
-      ),
-    },
-    {
-      path: navigationRoutes.bridges,
-      element: (
-        <LiquiditySourcePage
-          sourceType="Bridges"
-          supportedSwappers={config?.liquiditySources}
-        />
-      ),
+      children: [
+        {
+          index: true,
+          element: <SettingsPage />,
+        },
+        {
+          path: navigationRoutes.themes,
+          element: <ThemePage />,
+        },
+        {
+          path: navigationRoutes.languages,
+          element: <LanguagePage />,
+        },
+        {
+          path: navigationRoutes.exchanges,
+          element: <LiquiditySourcePage sourceType="Exchanges" />,
+        },
+        {
+          path: navigationRoutes.bridges,
+          element: <LiquiditySourcePage sourceType="Bridges" />,
+        },
+      ],
     },
-    { path: navigationRoutes.swaps, element: <HistoryPage /> },
     {
-      path: navigationRoutes.swapDetails,
-      element: <SwapDetailsPage />,
+      path: navigationRoutes.swaps,
+      children: [
+        {
+          index: true,
+          element: <HistoryPage />,
+        },
+        {
+          path: navigationRoutes.swapDetails,
+          element: <SwapDetailsPage />,
+        },
+      ],
     },
     {
       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} />,
+      path: navigationRoutes.confirmSwap,
+      element: <ConfirmSwapPage />,
     },
   ]);
 }

package/src/components/BlockchainList/BlockchainList.styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '@rango-dev/ui';
+import { ImageContainer, styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   display: 'flex',
@@ -12,7 +12,7 @@ export const List = styled('ul', {
   listStyle: 'none',
   overflowY: 'auto',
   paddingRight: '$5',
-  '.image-container': {
+  [`& ${ImageContainer}`]: {
     borderRadius: '$xm',
     overflow: 'hidden',
   },

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.styles.ts

@@ -1,6 +1,6 @@
 import { styled } from '@rango-dev/ui';
 
-export const Container = styled('div', {
+export const Blockchains = styled('div', {
   display: 'grid',
   gap: '$10',
   gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',

package/src/components/BlockchainsSection/BlockchainsSection.tsx

@@ -7,16 +7,18 @@ import {
   Divider,
   Image,
   Skeleton,
+  Tooltip,
   Typography,
 } from '@rango-dev/ui';
 import React from 'react';
 
 import { BLOCKCHAIN_LIST_SIZE } from '../../constants/configs';
 import { usePrepareBlockchainList } from '../../hooks/usePrepareBlockchainList';
-import { useBestRouteStore } from '../../store/bestRoute';
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
+import { getContainer } from '../../utils/common';
 
-import { Container } from './BlockchainsSection.styles';
+import { Blockchains } from './BlockchainsSection.styles';
 
 const NUMBER_OF_LOADING = 12;
 
@@ -27,9 +29,9 @@ export function BlockchainsSection(props: PropTypes) {
     selected: blockchain?.name,
   });
 
-  const loadingStatus = useMetaStore.use.loadingStatus();
-  const resetToBlockchain = useBestRouteStore.use.resetToBlockchain();
-  const resetFromBlockchain = useBestRouteStore.use.resetFromBlockchain();
+  const { fetchStatus } = useAppStore();
+  const resetToBlockchain = useQuoteStore.use.resetToBlockchain();
+  const resetFromBlockchain = useQuoteStore.use.resetFromBlockchain();
   const hasMoreItemsInList = blockchainsList.more.length > 0;
   /**
    * When only one item is left on list, we will not show the `More` button and will show the item itself instead.
@@ -38,18 +40,18 @@ export function BlockchainsSection(props: PropTypes) {
   const showMoreButton = !onlyOneItemInList && hasMoreItemsInList;
 
   return (
-    <div>
+    <>
       <Divider size={12} />
       <Typography variant="label" size="large">
         {i18n.t('Select Blockchain')}
       </Typography>
       <Divider size={12} />
-      <Container>
-        {loadingStatus === 'loading' &&
+      <Blockchains>
+        {fetchStatus === 'loading' &&
           Array.from(Array(NUMBER_OF_LOADING), (e) => (
             <Skeleton key={e} variant="rounded" height={50} />
           ))}
-        {loadingStatus === 'success' && (
+        {fetchStatus === 'success' && (
           <>
             <BlockchainsChip
               selected={!blockchain}
@@ -65,12 +67,19 @@ export function BlockchainsSection(props: PropTypes) {
               </Typography>
             </BlockchainsChip>
             {blockchainsList.list.map((item) => (
-              <BlockchainsChip
+              <Tooltip
                 key={item.name}
-                selected={!!blockchain && blockchain.name === item.name}
-                onClick={() => onChange(item)}>
-                <Image src={item.logo} size={30} />
-              </BlockchainsChip>
+                content={item.shortName}
+                side="bottom"
+                sideOffset={2}
+                container={getContainer()}>
+                <BlockchainsChip
+                  key={item.name}
+                  selected={!!blockchain && blockchain.name === item.name}
+                  onClick={() => onChange(item)}>
+                  <Image src={item.logo} size={30} />
+                </BlockchainsChip>
+              </Tooltip>
             ))}
 
             {onlyOneItemInList ? (
@@ -96,7 +105,7 @@ export function BlockchainsSection(props: PropTypes) {
             ) : null}
           </>
         )}
-      </Container>
-    </div>
+      </Blockchains>
+    </>
   );
 }

package/src/components/ConfirmWalletsModal/ConfirmWallets.helpers.ts

@@ -1,71 +1,9 @@
-/* eslint-disable @typescript-eslint/no-magic-numbers */
-import type { Step } from '@rango-dev/ui/dist/widget/ui/src/components/BestRoute/BestRoute.types';
 import type { BestRouteResponse, BlockchainMeta } from 'rango-sdk';
 
-import {
-  TOKEN_AMOUNT_MAX_DECIMALS,
-  TOKEN_AMOUNT_MIN_DECIMALS,
-  USD_VALUE_MAX_DECIMALS,
-  USD_VALUE_MIN_DECIMALS,
-} from '../../constants/routing';
-import { getBlockchainShortNameFor } from '../../utils/meta';
-import { numberToString } from '../../utils/numbers';
-
-export function formatBestRoute(
-  bestRoute: BestRouteResponse,
-  blockchains: BlockchainMeta[]
-): Step[] | undefined {
-  return bestRoute.result?.swaps.map((swap) => {
-    return {
-      swapper: { displayName: swap.swapperId, image: swap.swapperLogo },
-      from: {
-        token: { displayName: swap.from.symbol, image: swap.from.logo },
-        chain: {
-          displayName:
-            getBlockchainShortNameFor(swap.from.blockchain, blockchains) ?? '',
-          image: swap.from.blockchainLogo,
-        },
-        price: {
-          value: numberToString(
-            swap.fromAmount,
-            TOKEN_AMOUNT_MIN_DECIMALS,
-            TOKEN_AMOUNT_MAX_DECIMALS
-          ),
-          usdValue: numberToString(
-            swap.from.usdPrice?.toString(),
-            USD_VALUE_MIN_DECIMALS,
-            USD_VALUE_MAX_DECIMALS
-          ),
-        },
-      },
-      to: {
-        token: { displayName: swap.to.symbol, image: swap.to.logo },
-        chain: {
-          displayName:
-            getBlockchainShortNameFor(swap.to.blockchain, blockchains) ?? '',
-          image: swap.to.blockchainLogo,
-        },
-        price: {
-          value: numberToString(
-            swap.toAmount,
-            TOKEN_AMOUNT_MIN_DECIMALS,
-            TOKEN_AMOUNT_MAX_DECIMALS
-          ),
-          usdValue: numberToString(
-            swap.to.usdPrice?.toString(),
-            USD_VALUE_MIN_DECIMALS,
-            USD_VALUE_MAX_DECIMALS
-          ),
-        },
-      },
-    };
-  });
-}
-
-export function getRequiredWallets(route: BestRouteResponse | null): string[] {
+export function getRequiredWallets(quote: BestRouteResponse | null): string[] {
   const wallets: string[] = [];
 
-  route?.result?.swaps.forEach((swap) => {
+  quote?.result?.swaps.forEach((swap) => {
     const currentStepFromBlockchain = swap.from.blockchain;
     const currentStepToBlockchain = swap.to.blockchain;
     let lastAddedWallet = wallets[wallets.length - 1];

package/src/components/ConfirmWalletsModal/ConfirmWallets.styles.ts

@@ -1,6 +1,7 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
 import {
   Button,
+  css,
   darkTheme,
   IconButton,
   keyframes,
@@ -36,10 +37,13 @@ export const Title = styled('div', {
 });
 
 export const ListContainer = styled('div', {
-  display: 'grid',
+  display: 'flex',
+  justifyContent: 'space-evenly',
+  alignItems: 'center',
   gap: '$10',
-  gridTemplateColumns: ' repeat(3, minmax(0, 1fr))',
-  alignContent: 'baseline',
+  flexWrap: 'wrap',
+  paddingTop: '$5',
+  height: '100%',
 });
 
 export const WalletButton = styled('button', {
@@ -84,6 +88,12 @@ export const WalletButton = styled('button', {
     },
   },
 });
+
+export const ShowMoreWallets = styled(WalletButton, {
+  alignSelf: 'stretch',
+  minHeight: '93px',
+});
+
 export const Trigger = styled(Collapsible.Trigger, {
   padding: '$0',
   border: 'none',
@@ -110,12 +120,16 @@ export const NavigateBack = styled(IconButton, {
 
 export const WalletsContainer = styled('div', {
   paddingTop: '$20',
-  '& .wallets-list': {
-    display: 'grid',
-    gap: '$10',
-    gridTemplateColumns: ' repeat(3, minmax(0, 1fr))',
-    alignContent: 'baseline',
-  },
+});
+
+export const walletsListStyles = css({
+  display: 'flex',
+  justifyContent: 'space-evenly',
+  alignItems: 'center',
+  gap: '$10',
+  flexWrap: 'wrap',
+  paddingTop: '$5',
+  height: '100%',
 });
 
 export const CollapsibleRoot = styled(Collapsible.Root, {
@@ -165,12 +179,15 @@ export const CustomDestination = styled('div', {
   padding: '$10 $0',
   '& .button__content': {
     display: 'flex',
-    justifyContent: 'center',
     alignItems: 'center',
   },
   '& .alarms': { paddingTop: '5px' },
 });
 
+export const alarmsStyles = css({
+  paddingTop: '5px',
+});
+
 export const ExpandedIcon = styled('div', {
   transition: `all ${EXPANDABLE_TRANSITION_DURATION}ms ease`,
   variants: {
@@ -190,10 +207,12 @@ export const ConfirmButton = styled('div', {
 });
 
 export const StyledTextField = styled(TextField, {
+  backgroundColor: '$neutral100',
   padding: '$0 $15 $15 $15',
 });
 
 export const CollapsibleContent = styled(Collapsible.Content, {
+  backgroundColor: '$neutral100',
   overflow: 'hidden',
   variants: {
     open: {