@rango-dev/widget-embedded 0.28.0 → 0.28.1-next.1

package/dist/pages/WalletsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA8BxC,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBAqG1B"}
+{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAkCxC,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBAyH1B"}

package/dist/utils/common.d.ts

@@ -1,4 +1,5 @@
 import type { Token } from 'rango-sdk';
+import { TransactionType } from 'rango-sdk';
 export declare function removeDuplicateFrom<T>(array: T[]): T[];
 export declare function areEqual(array1: (number | string)[], array2: (number | string)[]): boolean;
 export declare function debounce(fn: Function, time: number): (...args: any) => void;
@@ -8,4 +9,5 @@ export declare function startWithText(text: string, searchText: string): boolean
 export declare const getContainer: () => HTMLElement;
 export declare const getExpanded: () => HTMLElement;
 export declare function compareWithSearchFor(tokenA: Token, tokenB: Token, searchFor?: string): number;
+export declare const isBlockchainTypeInCategory: (blockchainType: TransactionType, category: string) => boolean;
 //# sourceMappingURL=common.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAWvC,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAEtD;AAED,wBAAgB,QAAQ,CACtB,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAC3B,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,WAK5B;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,aAGvB,GAAG,UAS9B;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAGtE;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAEnE;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAEvE;AAED,eAAO,MAAM,YAAY,mBACyC,CAAC;AAEnE,eAAO,MAAM,WAAW,mBAC8C,CAAC;AAsDvE,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,KAAK,EACb,MAAM,EAAE,KAAK,EACb,SAAS,CAAC,EAAE,MAAM,GACjB,MAAM,CA0GR"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAGvC,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAW5C,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAEtD;AAED,wBAAgB,QAAQ,CACtB,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAC3B,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,WAK5B;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,aAGvB,GAAG,UAS9B;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAGtE;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAEnE;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAEvE;AAED,eAAO,MAAM,YAAY,mBACyC,CAAC;AAEnE,eAAO,MAAM,WAAW,mBAC8C,CAAC;AAsDvE,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,KAAK,EACb,MAAM,EAAE,KAAK,EACb,SAAS,CAAC,EAAE,MAAM,GACjB,MAAM,CA0GR;AAED,eAAO,MAAM,0BAA0B,mBACrB,eAAe,YACrB,MAAM,KACf,OAeF,CAAC"}

package/dist/utils/wallets.d.ts

@@ -33,4 +33,6 @@ export declare function createTokenHash(token: Asset): TokenHash;
 export declare function makeTokensBalance(connectedWallets: ConnectedWallet[]): TokensBalance;
 export declare const isFetchingBalance: (connectedWallets: ConnectedWallet[], blockchain: string) => boolean;
 export declare function hashWalletsState(walletsInfo: ModalWalletInfo[]): string;
+export declare function filterBlockchainsByWalletTypes(wallets: ModalWalletInfo[], blockchains: BlockchainMeta[]): BlockchainMeta[];
+export declare function filterWalletsByCategory(wallets: WalletInfoWithNamespaces[], category: string): WalletInfoWithNamespaces[];
 //# sourceMappingURL=wallets.d.ts.map

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":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.28.0",
+  "version": "0.28.1-next.1",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -29,7 +29,7 @@
     "@rango-dev/queue-manager-core": "^0.26.0",
     "@rango-dev/queue-manager-rango-preset": "^0.33.0",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/ui": "^0.34.0",
+    "@rango-dev/ui": "^0.34.1-next.1",
     "@rango-dev/wallets-react": "^0.19.0",
     "@rango-dev/wallets-shared": "^0.33.0",
     "bignumber.js": "^9.1.1",

package/src/components/BlockchainList/BlockchainList.helpers.ts

@@ -1,35 +1,16 @@
-import { BlockchainCategories } from '@rango-dev/ui';
-import { type BlockchainMeta, TransactionType } from 'rango-sdk';
+import { type BlockchainMeta } from 'rango-sdk';
 
-import { containsText } from '../../utils/common';
-
-export const filterByType = (
-  blockchain: BlockchainMeta,
-  type: string
-): boolean => {
-  switch (type) {
-    case BlockchainCategories.ALL:
-      return true;
-    case BlockchainCategories.UTXO:
-      return blockchain.type === TransactionType.TRANSFER;
-    case BlockchainCategories.OTHER:
-      return (
-        blockchain.type !== TransactionType.TRANSFER &&
-        blockchain.type !== TransactionType.COSMOS &&
-        blockchain.type !== TransactionType.EVM
-      );
-    default:
-      return blockchain.type === type;
-  }
-};
+import { containsText, isBlockchainTypeInCategory } from '../../utils/common';
 
 export const filterBlockchains = (
   list: BlockchainMeta[],
   searchedFor: string,
-  blockchainType: string
+  blockchainCategory: string
 ) =>
   list
-    .filter((blockchain) => filterByType(blockchain, blockchainType))
+    .filter((blockchain) =>
+      isBlockchainTypeInCategory(blockchain.type, blockchainCategory)
+    )
     .filter(
       (blockchain) =>
         containsText(blockchain.name, searchedFor) ||

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

@@ -34,7 +34,7 @@ export const WalletButton = styled('button', {
   position: 'relative',
 
   '&:hover': {
-    $$color: '$colors$info100',
+    $$color: '$colors$secondary100',
     [`.${darkTheme} &`]: {
       $$color: '$colors$neutral100',
     },
@@ -42,7 +42,7 @@ export const WalletButton = styled('button', {
   },
 
   '&:focus-visible': {
-    $$color: '$colors$info100',
+    $$color: '$colors$secondary100',
     [`.${darkTheme} &`]: {
       $$color: '$colors$info700',
     },
@@ -138,14 +138,14 @@ export const CustomDestinationButton = styled('div', {
   borderBottomRightRadius: '0',
   borderBottomLeftRadius: '0',
   '&:hover': {
-    $$color: '$colors$info100',
+    $$color: '$colors$secondary100',
     [`.${darkTheme} &`]: {
       $$color: '$colors$neutral100',
     },
     backgroundColor: '$$color',
   },
   '&:focus-visible': {
-    $$background: '$colors$info100',
+    $$background: '$colors$secondary100',
     [`.${darkTheme} &`]: {
       $$background: '$colors$info700',
     },

package/src/components/HeaderButtons/HeaderButtons.styles.ts

@@ -6,7 +6,7 @@ export const HeaderButton = styled(IconButton, {
   padding: '0',
   overflow: 'unset',
   '&:hover': {
-    backgroundColor: '$info100',
+    backgroundColor: '$secondary100',
     [`.${darkTheme} &`]: {
       backgroundColor: '$neutral',
     },

package/src/components/Quote/Quote.styles.ts

@@ -147,7 +147,7 @@ export const SummaryContainer = styled('div', {
       listItem: false,
       selected: true,
       css: {
-        $$color: '$colors$info100',
+        $$color: '$colors$secondary100',
         [`.${darkTheme} &`]: {
           $$color: '$colors$secondary600',
         },

package/src/pages/SelectBlockchainPage.tsx

@@ -1,7 +1,7 @@
 import { i18n } from '@lingui/core';
 import {
   Divider,
-  getCountCategories,
+  getCategoriesCount,
   SelectableCategoryList,
 } from '@rango-dev/ui';
 import React, { useState } from 'react';
@@ -30,9 +30,9 @@ export function SelectBlockchainPage(props: PropTypes) {
     type,
   });
 
-  const countActiveCategories = getCountCategories(blockchains);
+  const activeCategoriesCount = getCategoriesCount(blockchains);
 
-  const showCategory = countActiveCategories !== 1;
+  const showCategory = activeCategoriesCount !== 1;
 
   return (
     <Layout

package/src/pages/WalletsPage.tsx

@@ -1,7 +1,15 @@
 import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
-import { styled, Typography, Wallet, WalletState } from '@rango-dev/ui';
+import {
+  Divider,
+  getCategoriesCount,
+  SelectableCategoryList,
+  styled,
+  Typography,
+  Wallet,
+  WalletState,
+} from '@rango-dev/ui';
 import React, { useState } from 'react';
 
 import { Layout, PageContainer } from '../components/Layout';
@@ -11,6 +19,10 @@ import { useWalletList } from '../hooks/useWalletList';
 import { useAppStore } from '../store/AppStore';
 import { useUiStore } from '../store/ui';
 import { getContainer } from '../utils/common';
+import {
+  filterBlockchainsByWalletTypes,
+  filterWalletsByCategory,
+} from '../utils/wallets';
 
 interface NamespacesModalState {
   providerType: string;
@@ -37,6 +49,9 @@ export const TIME_TO_IGNORE_MODAL = 300;
 
 export function WalletsPage() {
   const { fetchStatus: fetchMetaStatus } = useAppStore();
+  const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
+  const blockchains = useAppStore().blockchains();
+
   const [openModal, setOpenModal] = useState(false);
   const [namespacesModalState, setNamespacesModalState] =
     useState<NamespacesModalState | null>(null);
@@ -74,17 +89,34 @@ export function WalletsPage() {
   const selectedWalletState =
     selectedWallet?.state || WalletState.NOT_INSTALLED;
 
+  const filteredBlockchains = filterBlockchainsByWalletTypes(list, blockchains);
+  const activeCategoriesCount = getCategoriesCount(filteredBlockchains);
+  const showCategory = activeCategoriesCount !== 1;
+
+  const filteredWallets = filterWalletsByCategory(list, blockchainCategory);
+
   return (
     <Layout
       header={{
         title: i18n.t('Connect Wallets'),
       }}>
       <Container>
+        {showCategory && (
+          <>
+            <SelectableCategoryList
+              setCategory={setBlockchainCategory}
+              category={blockchainCategory}
+              blockchains={filteredBlockchains}
+              isLoading={fetchMetaStatus === 'loading'}
+            />
+            <Divider size={24} />
+          </>
+        )}
         <Typography variant="title" size="xmedium" align="center">
           {i18n.t('Choose a wallet to connect.')}
         </Typography>
         <ListContainer>
-          {list.map((wallet, index) => {
+          {filteredWallets.map((wallet, index) => {
             const key = `wallet-${index}-${wallet.type}`;
             return (
               <Wallet

package/src/utils/common.ts

@@ -1,5 +1,8 @@
 import type { Token } from 'rango-sdk';
 
+import { BlockchainCategories } from '@rango-dev/ui';
+import { TransactionType } from 'rango-sdk';
+
 import { WIDGET_UI_ID } from '../constants';
 import {
   MIN_LENGTH_SYMBOL_CONTAINS,
@@ -218,3 +221,23 @@ export function compareWithSearchFor(
 
   return 0;
 }
+
+export const isBlockchainTypeInCategory = (
+  blockchainType: TransactionType,
+  category: string
+): boolean => {
+  switch (category) {
+    case BlockchainCategories.ALL:
+      return true;
+    case BlockchainCategories.UTXO:
+      return blockchainType === TransactionType.TRANSFER;
+    case BlockchainCategories.OTHER:
+      return (
+        blockchainType !== TransactionType.TRANSFER &&
+        blockchainType !== TransactionType.COSMOS &&
+        blockchainType !== TransactionType.EVM
+      );
+    default:
+      return blockchainType === category;
+  }
+};

package/src/utils/wallets.ts

@@ -16,9 +16,17 @@ import type {
   WalletType,
   WalletTypes,
 } from '@rango-dev/wallets-shared';
-import type { BlockchainMeta, Token, WalletDetail } from 'rango-sdk';
+import type {
+  BlockchainMeta,
+  Token,
+  TransactionType,
+  WalletDetail,
+} from 'rango-sdk';
 
-import { WalletState as WalletStatus } from '@rango-dev/ui';
+import {
+  BlockchainCategories,
+  WalletState as WalletStatus,
+} from '@rango-dev/ui';
 import { readAccountAddress } from '@rango-dev/wallets-react';
 import {
   detectInstallLink,
@@ -39,6 +47,7 @@ import {
 } from '../constants/routing';
 import { EXCLUDED_WALLETS } from '../constants/wallets';
 
+import { isBlockchainTypeInCategory, removeDuplicateFrom } from './common';
 import { numberToString } from './numbers';
 
 export function mapStatusToWalletState(state: WalletState): WalletStatus {
@@ -64,6 +73,7 @@ export function mapWalletTypesToWalletInfo(
     .filter((wallet) => !EXCLUDED_WALLETS.includes(wallet as WalletTypes))
     .filter((wallet) => {
       const { supportedChains, isContractWallet } = getWalletInfo(wallet);
+
       const { installed, network } = getState(wallet);
       const filterContractWallets =
         isContractWallet && (!installed || (!!chain && network !== chain));
@@ -85,7 +95,12 @@ export function mapWalletTypesToWalletInfo(
         showOnMobile,
         namespaces,
         singleNamespace,
+        supportedChains,
       } = getWalletInfo(type);
+      const blockchainTypes = removeDuplicateFrom(
+        supportedChains.map((item) => item.type)
+      );
+
       const state = mapStatusToWalletState(getState(type));
       return {
         title: name,
@@ -96,6 +111,7 @@ export function mapWalletTypesToWalletInfo(
         showOnMobile,
         namespaces,
         singleNamespace,
+        blockchainTypes,
       };
     });
 }
@@ -538,3 +554,38 @@ export const isFetchingBalance = (
 export function hashWalletsState(walletsInfo: ModalWalletInfo[]) {
   return walletsInfo.map((w) => w.state).join('-');
 }
+
+export function filterBlockchainsByWalletTypes(
+  wallets: ModalWalletInfo[],
+  blockchains: BlockchainMeta[]
+) {
+  const uniqueBlockchainTypes = new Set<TransactionType>();
+  wallets.forEach((wallet) => {
+    wallet.blockchainTypes.forEach((type) => {
+      uniqueBlockchainTypes.add(type);
+    });
+  });
+  const filteredBlockchains = blockchains.filter((blockchain) =>
+    uniqueBlockchainTypes.has(blockchain.type)
+  );
+
+  return filteredBlockchains;
+}
+
+export function filterWalletsByCategory(
+  wallets: WalletInfoWithNamespaces[],
+  category: string
+) {
+  if (category === BlockchainCategories.ALL) {
+    return wallets;
+  }
+
+  return wallets.filter((wallet) => {
+    for (const type of wallet.blockchainTypes) {
+      if (isBlockchainTypeInCategory(type, category)) {
+        return true;
+      }
+    }
+    return false;
+  });
+}