@rango-dev/widget-embedded 0.60.1-next.0 → 0.60.2-next.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.60.1-next.0",
+  "version": "0.60.2-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.12.1",
-    "@rango-dev/provider-all": "^0.62.1-next.0",
+    "@rango-dev/provider-all": "^0.62.2-next.0",
     "@rango-dev/queue-manager-core": "^0.33.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.62.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.62.1-next.0",
     "@rango-dev/queue-manager-react": "^0.33.0",
     "@rango-dev/signer-solana": "^0.48.0",
-    "@rango-dev/ui": "^0.63.0",
-    "@rango-dev/wallets-core": "^0.59.0",
-    "@rango-dev/wallets-react": "^0.46.0",
-    "@rango-dev/wallets-shared": "^0.60.0",
+    "@rango-dev/ui": "^0.63.1-next.0",
+    "@rango-dev/wallets-core": "^0.59.1-next.0",
+    "@rango-dev/wallets-react": "^0.46.1-next.0",
+    "@rango-dev/wallets-shared": "^0.60.1-next.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "crypto-browserify": "^3.12.1",

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -1,11 +1,9 @@
 import type { PropTypes } from './WalletList.type';
-import type { Wallet } from '../../types';
 import type { ExtendedModalWalletInfo } from '../../utils/wallets';
 
 import { i18n } from '@lingui/core';
 import { warn } from '@rango-dev/logging-core';
 import {
-  Divider,
   makeInfo,
   SelectableWallet,
   Typography,
@@ -13,42 +11,24 @@ import {
 } from '@rango-dev/ui';
 import React, { useEffect, useState } from 'react';
 
-import { useWallets } from '../..';
-import { WIDGET_UI_ID } from '../../constants';
 import { useWalletList } from '../../hooks/useWalletList';
 import { useAppStore } from '../../store/AppStore';
 import { useUiStore } from '../../store/ui';
-import { getBlockchainDisplayNameFor } from '../../utils/meta';
-import {
-  getAddress,
-  getConciseAddress,
-  isExperimentalChain,
-} from '../../utils/wallets';
-import { WatermarkedModal } from '../common/WatermarkedModal';
+import { getAddress, getConciseAddress } from '../../utils/wallets';
 import { StatefulConnectModal } from '../StatefulConnectModal';
-import { ExperimentalChain } from '../WalletStatefulConnect';
-import { ExperimentalChainStatus } from '../WalletStatefulConnect/ExperimentalChainStatus';
 
 import { ShowMoreWallets } from './ConfirmWallets.styles';
 
 const ACCOUNT_ADDRESS_MAX_CHARACTERS = 7;
-const TIME_TO_CLOSE_MODAL = 3_000;
 
 export function WalletList(props: PropTypes) {
   const { chain, quoteChains, isSelected, selectWallet, limit, onShowMore } =
     props;
   const isActiveTab = useUiStore.use.isActiveTab();
 
-  const { blockchains, connectedWallets } = useAppStore();
+  const { connectedWallets } = useAppStore();
   const [selectedWalletToConnect, setSelectedWalletToConnect] =
     useState<ExtendedModalWalletInfo>();
-  const [experimentalChainWallet, setExperimentalChainWallet] =
-    useState<Wallet | null>(null);
-  const [showExperimentalChainModal, setShowExperimentalChainModal] =
-    useState(false);
-  const [addingExperimentalChainStatus, setAddingExperimentalChainStatus] =
-    useState<'in-progress' | 'completed' | 'rejected' | null>(null);
-  const { suggestAndConnect } = useWallets();
   const { list } = useWalletList({
     chain,
   });
@@ -57,45 +37,6 @@ export function WalletList(props: PropTypes) {
   const numberOfSupportedWallets = list.length;
   const shouldShowMoreWallets = limit && numberOfSupportedWallets - limit > 0;
 
-  const addExperimentalChain = async (wallet: Wallet) => {
-    setShowExperimentalChainModal(false);
-    setAddingExperimentalChainStatus('in-progress');
-    try {
-      // 1. Finding wallet with namespaces info.
-      const walletWithNamespace = list.find(
-        (wallet) => wallet.type === wallet.type
-      );
-
-      /*
-       * 2. Getting namespaces info.
-       * Legacy and hub have different structure to handle each situation.
-       */
-      const needsNamespace = walletWithNamespace?.isHub
-        ? walletWithNamespace.properties?.find(
-            (item) => item.name === 'namespaces'
-          )?.value
-        : walletWithNamespace?.needsNamespace;
-
-      // 3. Finding target namespace.
-      const allBlockChains = blockchains();
-      const namespace = needsNamespace?.data.find((ns) =>
-        ns
-          .getSupportedChains(allBlockChains)
-          .some((chain) => chain.name === wallet.chain)
-      );
-      if (!namespace) {
-        throw new Error('Requested chain is not supported');
-      }
-      await suggestAndConnect(wallet.walletType, {
-        namespace: namespace.value,
-        network: wallet.chain,
-      });
-      setAddingExperimentalChainStatus('completed');
-    } catch {
-      setAddingExperimentalChainStatus('rejected');
-    }
-  };
-
   useEffect(() => {
     setSortedList((sortedList) => {
       const selectedWalletIndex = list.findIndex((wallet) =>
@@ -115,29 +56,6 @@ export function WalletList(props: PropTypes) {
     });
   }, [JSON.stringify(list)]);
 
-  const modalContainer = document.getElementById(
-    WIDGET_UI_ID.SWAP_BOX_ID
-  ) as HTMLDivElement;
-
-  useEffect(() => {
-    let timeout: ReturnType<typeof setTimeout> | null = null;
-    if (
-      addingExperimentalChainStatus === 'completed' ||
-      addingExperimentalChainStatus === 'rejected'
-    ) {
-      timeout = setTimeout(
-        () => setAddingExperimentalChainStatus(null),
-        TIME_TO_CLOSE_MODAL
-      );
-    }
-
-    return () => {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [addingExperimentalChainStatus]);
-
   return (
     <>
       {sortedList.slice(0, limit).map((wallet) => {
@@ -155,35 +73,11 @@ export function WalletList(props: PropTypes) {
         const isConnectedButDifferentThanTargetNamespace =
           isConnected && !!wallet.needsNamespace && !conciseAddress;
 
-        const experimentalChain = isExperimentalChain(blockchains(), chain);
-
-        const experimentalChainNotAdded = !connectedWallets.find(
-          (connectedWallet) =>
-            connectedWallet.walletType === wallet.type &&
-            connectedWallet.chain === chain
-        );
-
-        const couldAddExperimentalChain =
-          experimentalChain &&
-          experimentalChainNotAdded &&
-          wallet.state === WalletState.CONNECTED;
-
         const onSelectableWalletClick = async () => {
           const isDisconnected = wallet.state === WalletState.DISCONNECTED;
 
-          if (
-            isDisconnected ||
-            (isConnectedButDifferentThanTargetNamespace &&
-              !couldAddExperimentalChain)
-          ) {
+          if (isDisconnected || isConnectedButDifferentThanTargetNamespace) {
             setSelectedWalletToConnect(wallet);
-          } else if (couldAddExperimentalChain) {
-            setExperimentalChainWallet({
-              walletType: wallet.type,
-              chain,
-              address: address ?? '',
-            });
-            setShowExperimentalChainModal(true);
           } else {
             selectWallet({
               walletType: wallet.type,
@@ -196,12 +90,7 @@ export function WalletList(props: PropTypes) {
         const info = makeInfo(wallet.state);
 
         const getWalletDescription = () => {
-          if (couldAddExperimentalChain) {
-            return i18n.t({
-              id: 'Add {chain} chain',
-              values: { chain },
-            });
-          } else if (isConnectedButDifferentThanTargetNamespace) {
+          if (isConnectedButDifferentThanTargetNamespace) {
             return i18n.t('Chain not connected');
           } else if (conciseAddress) {
             return conciseAddress;
@@ -223,57 +112,17 @@ export function WalletList(props: PropTypes) {
           return info.color;
         };
 
-        const blockchainDisplayName: string | undefined =
-          experimentalChainWallet?.chain
-            ? getBlockchainDisplayNameFor(
-                experimentalChainWallet.chain,
-                blockchains()
-              )
-            : undefined;
         return (
-          <React.Fragment key={`${wallet.title}_${blockchainDisplayName}`}>
-            {!!experimentalChainWallet && (
-              <WatermarkedModal
-                id="widget-wallets-list-watermarked-modal"
-                open={!!experimentalChainWallet && showExperimentalChainModal}
-                container={modalContainer}
-                onClose={() => {
-                  setExperimentalChainWallet(null);
-                }}>
-                <ExperimentalChain
-                  id="widget-wallets-list-experimental-chain-container"
-                  displayName={blockchainDisplayName}
-                  onConfirm={() => {
-                    void addExperimentalChain(experimentalChainWallet);
-                  }}
-                />
-              </WatermarkedModal>
-            )}
-            {addingExperimentalChainStatus && (
-              <WatermarkedModal
-                id="widget-wallets-list-experimental-chain-watermarked-modal"
-                open={!!addingExperimentalChainStatus}
-                onClose={setAddingExperimentalChainStatus.bind(null, null)}
-                container={modalContainer}>
-                <ExperimentalChainStatus
-                  status={addingExperimentalChainStatus}
-                  displayName={blockchainDisplayName}
-                  image={wallet.image}
-                />
-                <Divider direction="vertical" size={32} />
-              </WatermarkedModal>
-            )}
-            <SelectableWallet
-              key={wallet.type}
-              id="widget-wallets-list-selectable-wallet-btn"
-              description={getWalletDescription()}
-              descriptionColor={getWalletDescriptionColor()}
-              onClick={onSelectableWalletClick}
-              selected={isSelected(wallet.type, chain)}
-              disabled={!isActiveTab}
-              {...wallet}
-            />
-          </React.Fragment>
+          <SelectableWallet
+            key={wallet.type}
+            id="widget-wallets-list-selectable-wallet-btn"
+            description={getWalletDescription()}
+            descriptionColor={getWalletDescriptionColor()}
+            onClick={onSelectableWalletClick}
+            selected={isSelected(wallet.type, chain)}
+            disabled={!isActiveTab}
+            {...wallet}
+          />
         );
       })}
       <StatefulConnectModal
@@ -301,7 +150,8 @@ export function WalletList(props: PropTypes) {
         <ShowMoreWallets
           selected={false}
           onClick={onShowMore}
-          id="widget-wallets-list-show-more-wallets-btn">
+          id="widget-wallets-list-show-more-wallets-btn"
+        >
           <Typography variant="label" size="medium">
             {i18n.t('Show more wallets')}
             <Typography variant="label" size="medium" color="$primary">

package/src/components/CustomTokenModal/CustomTokenModal.helpers.ts

@@ -4,11 +4,6 @@ export function generateExplorerLink(
   address: string | null,
   blockchain: BlockchainMeta
 ): string {
-  // We don't have Cosmos explorer url in API.
-  if (blockchain.type === 'COSMOS') {
-    return '';
-  }
-
   const explorerLinkPattern = blockchain.info?.addressUrl;
 
   if (!explorerLinkPattern || !address) {

package/src/components/TokenList/TokenList.tsx

@@ -81,7 +81,8 @@ const renderDesc = (props: RenderDescProps) => {
         <div
           className={`${tokenAddressStyles()} ${
             !name && tokenWithoutNameStyles()
-          }`}>
+          }`}
+        >
           {length > 10
             ? `${address.slice(0, 5)}...${address.slice(length - 6, length)}`
             : address}{' '}
@@ -90,7 +91,8 @@ const renderDesc = (props: RenderDescProps) => {
             href={url}
             target="_blank"
             rel="nofollow noreferrer"
-            onClick={(e) => e.stopPropagation()}>
+            onClick={(e) => e.stopPropagation()}
+          >
             <ExternalLinkIcon size={12} />
           </StyledLink>
         </div>
@@ -151,7 +153,8 @@ export function TokenList(props: PropTypes) {
           type="primary"
           size="small"
           className="widget-token-list-item-import-btn"
-          onClick={handleClick}>
+          onClick={handleClick}
+        >
           <Typography variant="body" size="xsmall" color="background">
             {t('import')}
           </Typography>
@@ -184,7 +187,8 @@ export function TokenList(props: PropTypes) {
             <Typography
               variant="body"
               className={usdValueStyles()}
-              size="xsmall">
+              size="xsmall"
+            >
               {`$${tokenBalance.usdValue}`}
             </Typography>
           )}
@@ -292,9 +296,7 @@ export function TokenList(props: PropTypes) {
                   </ImageSection>
                 }
                 title={
-                  blockchain.type === 'COSMOS' ||
-                  !!token.name ||
-                  (!token.name && !address) ? (
+                  !!token.name || (!token.name && !address) ? (
                     <Title>
                       <Typography variant="title" size="xmedium">
                         {token.symbol}
@@ -304,7 +306,8 @@ export function TokenList(props: PropTypes) {
                         <TagTitle
                           variant="body"
                           size="xsmall"
-                          css={customCssForTagTitle}>
+                          css={customCssForTagTitle}
+                        >
                           {token.blockchain}
                         </TagTitle>
                       </Tag>
@@ -318,10 +321,7 @@ export function TokenList(props: PropTypes) {
                   ) : undefined
                 }
                 description={
-                  typeof token !== 'string' &&
-                  !!blockchain.info &&
-                  !!address &&
-                  blockchain.type !== 'COSMOS'
+                  typeof token !== 'string' && !!blockchain.info && !!address
                     ? renderDesc({
                         address,
                         token,

package/src/components/WalletStatefulConnect/index.ts

@@ -2,4 +2,3 @@ export { Namespaces } from './Namespaces';
 export { Detached } from './Detached';
 export { DerivationPath } from './DerivationPath';
 export { ConnectStatus } from './ConnectStatus';
-export { ExperimentalChain } from './ExperimentalChain';

package/src/constants/wallets.ts

@@ -1,5 +1,3 @@
-import { WalletTypes } from '@rango-dev/wallets-shared';
-
 export const BALANCE_SEPARATOR = '~';
 
-export const EXCLUDED_WALLETS = [WalletTypes.LEAP];
+export const EXCLUDED_WALLETS: string[] = [];

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.constants.ts

@@ -1 +1 @@
-export const MOST_USED_BLOCKCHAINS = ['ETH', 'COSMOS', 'OSMOSIS'];
+export const MOST_USED_BLOCKCHAINS = ['ETH'];