@rango-dev/widget-embedded 0.51.1-next.9 → 0.52.1-next.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.51.1-next.9",
+  "version": "0.52.1-next.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/signer-solana": "^0.44.0",
-    "@rango-dev/ui": "^0.54.1-next.4",
-    "@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/provider-all": "^0.54.1-next.0",
+    "@rango-dev/queue-manager-core": "^0.33.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.54.1-next.0",
+    "@rango-dev/queue-manager-react": "^0.33.0",
+    "@rango-dev/signer-solana": "^0.44.1-next.0",
+    "@rango-dev/ui": "^0.55.1-next.0",
+    "@rango-dev/wallets-core": "^0.51.1-next.0",
+    "@rango-dev/wallets-react": "^0.38.1-next.0",
+    "@rango-dev/wallets-shared": "^0.52.1-next.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

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/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)
+  );
+}