@rango-dev/widget-embedded 0.51.1-next.8 → 0.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.51.1-next.8",
+  "version": "0.52.0",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,15 +25,15 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.11.0",
-    "@rango-dev/provider-all": "^0.53.1-next.2",
-    "@rango-dev/queue-manager-core": "^0.32.1-next.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.53.1-next.2",
-    "@rango-dev/queue-manager-react": "^0.32.1-next.0",
+    "@rango-dev/provider-all": "^0.54.0",
+    "@rango-dev/queue-manager-core": "^0.33.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.54.0",
+    "@rango-dev/queue-manager-react": "^0.33.0",
     "@rango-dev/signer-solana": "^0.44.0",
-    "@rango-dev/ui": "^0.54.1-next.3",
-    "@rango-dev/wallets-core": "^0.50.1-next.1",
-    "@rango-dev/wallets-react": "^0.37.1-next.2",
-    "@rango-dev/wallets-shared": "^0.51.1-next.1",
+    "@rango-dev/ui": "^0.55.0",
+    "@rango-dev/wallets-core": "^0.51.0",
+    "@rango-dev/wallets-react": "^0.38.0",
+    "@rango-dev/wallets-shared": "^0.52.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
@@ -54,4 +54,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/HistoryGroupedList/HistoryGroupedList.tsx

@@ -81,6 +81,11 @@ export function HistoryGroupedList(props: PropTypes) {
 
   return (
     <GroupedVirtualizedList
+      style={{
+        // See note on https://github.com/rango-exchange/rango-client/pull/1284
+        flexGrow: 1,
+        minHeight: 0,
+      }}
       endReached={() => {
         if (loadedItems.current < list.length) {
           loadMore();

package/src/components/TokenList/TokenList.styles.ts

@@ -69,8 +69,12 @@ export const Title = styled('div', {
 });
 export const List = styled('ul', {
   flexGrow: 1,
+  height: '100%',
   padding: 0,
   margin: 0,
+  // See note on https://github.com/rango-exchange/rango-client/pull/1284
+  display: 'flex',
+  flexDirection: 'column',
   listStyle: 'none',
 
   '& li': {

package/src/components/TokenList/TokenList.tsx

@@ -195,6 +195,11 @@ export function TokenList(props: PropTypes) {
   const renderList = () => {
     return (
       <VirtualizedList
+        style={{
+          // See note on https://github.com/rango-exchange/rango-client/pull/1284
+          flexGrow: 1,
+          minHeight: 0,
+        }}
         itemContent={(index) => {
           const token = tokens[index];
           if (token === 'skeleton') {

package/src/components/WalletStatefulConnect/Detached.tsx

@@ -75,7 +75,10 @@ export function Detached(props: PropTypes) {
     if (!!singleSelection) {
       return (
         <>
-          <Divider size={20} />
+          <Divider
+            size={20}
+            className="_detached_namespace_list_header_alert_top_divider"
+          />
           <Alert
             id="widget-wallet-stateful-connect-alert"
             variant="alarm"
@@ -84,13 +87,19 @@ export function Detached(props: PropTypes) {
               'This wallet can only connect to one chain at a time.'
             )}
           />
-          <Divider size={30} />
+          <Divider
+            size={30}
+            className="_detached_namespace_list_header_alert_bottom_divider"
+          />
         </>
       );
     }
     return (
       <>
-        <Divider size={30} />
+        <Divider
+          size={30}
+          className="_detached_namespace_list_header_button_top_divider"
+        />
         <NamespacesHeader>
           <Button
             id="widget-detached-disconnect-wallet-btn"
@@ -102,7 +111,10 @@ export function Detached(props: PropTypes) {
             {i18n.t('Disconnect wallet')}
           </Button>
         </NamespacesHeader>
-        <Divider size={16} />
+        <Divider
+          size={16}
+          className="_detached_namespace_list_header_button_bottom_divider"
+        />
       </>
     );
   };

package/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -120,7 +120,10 @@ export function Namespaces(props: PropTypes) {
       />
       {singleNamespace ? (
         <>
-          <Divider size={20} />
+          <Divider
+            size={20}
+            className="_initial_namespace_list_header_alert_top_divider"
+          />
           <Alert
             id="widget-wallet-stateful-connect-alert"
             variant="alarm"
@@ -129,11 +132,17 @@ export function Namespaces(props: PropTypes) {
               'This wallet can only connect to one chain at a time. '
             )}
           />
-          <Divider size={30} />
+          <Divider
+            size={30}
+            className="_initial_namespace_list_header_alert_bottom_divider"
+          />
         </>
       ) : (
         <>
-          <Divider size={30} />
+          <Divider
+            size={30}
+            className="_initial_namespace_list_header_button_top_divider"
+          />
           <Button
             style={{ marginLeft: 'auto' }}
             id="widget-name-space-select-all-btn"
@@ -145,7 +154,10 @@ export function Namespaces(props: PropTypes) {
               ? i18n.t('Deselect all')
               : i18n.t('Select all')}
           </Button>
-          <Divider size={10} />
+          <Divider
+            size={10}
+            className="_initial_namespace_list_header_button_bottom_divider"
+          />
         </>
       )}
       <NamespaceList>

package/src/pages/HistoryPage.tsx

@@ -40,6 +40,9 @@ const HistoryGroupedListContainer = styled('div', {
   flexDirection: 'column',
   gap: 15,
   height: '100%',
+  // See note on https://github.com/rango-exchange/rango-client/pull/1284
+  minHeight: 0,
+  flexGrow: 1,
 });
 
 const SearchAndFilterBar = styled('div', {

package/src/pages/SelectBlockchainPage.tsx

@@ -6,7 +6,7 @@ import {
   getCategoriesCount,
   SelectableCategoryList,
 } from '@rango-dev/ui';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { BlockchainList } from '../components/BlockchainList';
@@ -16,6 +16,7 @@ import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useSwapMode } from '../hooks/useSwapMode';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
+import { filterBlockchainsWithAtLeastOneToken } from '../utils/common';
 
 interface PropTypes {
   type: 'source' | 'destination' | 'custom-token';
@@ -37,7 +38,12 @@ export function SelectBlockchainPage(props: PropTypes) {
   const blockchains = useAppStore().blockchains({
     type,
   });
-  const activeCategoriesCount = getCategoriesCount(blockchains);
+  const tokens = useAppStore().tokens();
+  const filteredBlockchains = useMemo(
+    () => filterBlockchainsWithAtLeastOneToken(blockchains, tokens),
+    [blockchains.length, tokens.length]
+  );
+  const activeCategoriesCount = getCategoriesCount(filteredBlockchains);
 
   const showCategory = !props.hideCategory && activeCategoriesCount !== 1;
 
@@ -53,7 +59,10 @@ export function SelectBlockchainPage(props: PropTypes) {
         } else {
           const blockchainNativeToken = findNativeToken(blockchain);
           if (blockchainNativeToken) {
-            setToToken({ token: blockchainNativeToken, meta: { blockchains } });
+            setToToken({
+              token: blockchainNativeToken,
+              meta: { blockchains },
+            });
           }
         }
       }
@@ -72,7 +81,7 @@ export function SelectBlockchainPage(props: PropTypes) {
             <SelectableCategoryList
               setCategory={setBlockchainCategory}
               category={blockchainCategory}
-              blockchains={blockchains}
+              blockchains={filteredBlockchains}
               isLoading={fetchStatus === 'loading'}
             />
             <Divider size={24} />
@@ -93,7 +102,7 @@ export function SelectBlockchainPage(props: PropTypes) {
         <Divider size={16} />
 
         <BlockchainList
-          list={blockchains}
+          list={filteredBlockchains}
           showTitle={type !== 'custom-token'}
           searchedFor={searchedFor}
           blockchainCategory={blockchainCategory}

package/src/store/slices/data.ts

@@ -355,33 +355,22 @@ export const createDataSlice: StateCreator<
       >();
       const tokensMapByBlockchainName: DataSlice['_tokensMapByBlockchainName'] =
         {};
-      const tokens: Token[] = [];
       const popularTokens: Token[] = response.popularTokens;
       const swappers: SwapperMeta[] = response.swappers.filter(
         (swapper) => swapper.enabled
       );
-      const blockchainsWithAtLeastOneToken = new Set();
-
-      response.tokens.forEach((token) => {
-        blockchainsWithAtLeastOneToken.add(token.blockchain);
-
-        tokens.push(token);
-      });
 
       const sortedBlockchain = response.blockchains.sort(
         (a, b) => a.sort - b.sort
       );
 
       sortedBlockchain.forEach((blockchain) => {
-        if (
-          blockchain.enabled &&
-          blockchainsWithAtLeastOneToken.has(blockchain.name)
-        ) {
+        if (blockchain.enabled) {
           blockchainsMapByName.set(blockchain.name, blockchain);
         }
       });
 
-      tokens.forEach((token) => {
+      response.tokens.forEach((token) => {
         const tokenHash = createTokenHash(token);
         if (!tokensMapByBlockchainName[token.blockchain]) {
           tokensMapByBlockchainName[token.blockchain] = [];

package/src/utils/common.ts

@@ -1,5 +1,5 @@
 import type { WalletInfoWithExtra } from '../types';
-import type { Token } from 'rango-sdk';
+import type { BlockchainMeta, Token } from 'rango-sdk';
 
 import { BlockchainCategories, WalletState } from '@rango-dev/ui';
 import { TransactionType } from 'rango-sdk';
@@ -280,3 +280,18 @@ export function memoizedResult(): <R>(fn: () => R, key: number | string) => R {
     return result;
   };
 }
+
+export function filterBlockchainsWithAtLeastOneToken(
+  blockchains: BlockchainMeta[],
+  tokens: Token[]
+) {
+  const blockchainsWithAtLeastOneToken = new Set<string>();
+
+  tokens.forEach((token) => {
+    blockchainsWithAtLeastOneToken.add(token.blockchain);
+  });
+
+  return blockchains.filter((blockchain) =>
+    blockchainsWithAtLeastOneToken.has(blockchain.name)
+  );
+}