@rango-dev/widget-embedded 0.31.1-next.3 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.31.1-next.3",
+  "version": "0.32.0",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,12 +25,12 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.6.0",
-    "@rango-dev/provider-all": "^0.36.1-next.0",
+    "@rango-dev/provider-all": "^0.36.0",
     "@rango-dev/queue-manager-core": "^0.27.0",
     "@rango-dev/queue-manager-rango-preset": "^0.36.0",
     "@rango-dev/queue-manager-react": "^0.27.0",
-    "@rango-dev/signer-solana": "^0.31.1-next.0",
-    "@rango-dev/ui": "^0.37.1-next.1",
+    "@rango-dev/signer-solana": "^0.31.0",
+    "@rango-dev/ui": "^0.38.0",
     "@rango-dev/wallets-react": "^0.22.0",
     "@rango-dev/wallets-shared": "^0.36.0",
     "bignumber.js": "^9.1.1",

package/src/components/AppRoutes.tsx

@@ -4,7 +4,9 @@ import { useRoutes } from 'react-router-dom';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useSyncStoresWithConfig } from '../hooks/useSyncStoresWithConfig';
 import { useSyncUrlAndStore } from '../hooks/useSyncUrlAndStore';
+import { AddCustomTokenPage } from '../pages/AddCustomTokenPage';
 import { ConfirmSwapPage } from '../pages/ConfirmSwapPage';
+import { CustomTokensPage } from '../pages/CustomTokensPage';
 import { HistoryPage } from '../pages/HistoryPage';
 import { Home } from '../pages/Home';
 import { LanguagePage } from '../pages/LanguagePage';
@@ -80,8 +82,36 @@ export function AppRoutes() {
           path: navigationRoutes.bridges,
           element: <LiquiditySourcePage sourceType="Bridges" />,
         },
+        {
+          path: navigationRoutes.customTokens,
+          children: [
+            {
+              index: true,
+              element: <CustomTokensPage />,
+            },
+            {
+              path: navigationRoutes.addCustomTokens,
+              children: [
+                {
+                  index: true,
+                  element: <AddCustomTokenPage />,
+                },
+                {
+                  path: navigationRoutes.blockchains,
+                  element: (
+                    <SelectBlockchainPage
+                      hideCategory={true}
+                      type="custom-token"
+                    />
+                  ),
+                },
+              ],
+            },
+          ],
+        },
       ],
     },
+
     {
       path: navigationRoutes.swaps,
       children: [

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

@@ -2,10 +2,12 @@ import { ImageContainer, styled } from '@rango-dev/ui';
 
 import { ScrollableArea } from '../Layout';
 
-export const Container = styled('div', {
+export const BlockchainListContainer = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   overflow: 'hidden',
+  height: '100%',
+  justifyContent: 'center',
 });
 
 export const List = styled(ScrollableArea, {

package/src/components/BlockchainList/BlockchainList.tsx

@@ -14,11 +14,17 @@ import React, { useEffect, useState } from 'react';
 import { useAppStore } from '../../store/AppStore';
 
 import { filterBlockchains } from './BlockchainList.helpers';
-import { Container, List } from './BlockchainList.styles';
+import { BlockchainListContainer, List } from './BlockchainList.styles';
 import { LoadingBlockchainList } from './LoadingBlockchainList';
 
 export function BlockchainList(props: PropTypes) {
-  const { list, searchedFor, onChange, blockchainCategory } = props;
+  const {
+    list,
+    searchedFor,
+    onChange,
+    blockchainCategory,
+    showTitle = true,
+  } = props;
   const [blockchains, setBlockchains] = useState<BlockchainMeta[]>(list);
   const { fetchStatus } = useAppStore();
 
@@ -31,13 +37,10 @@ export function BlockchainList(props: PropTypes) {
   const renderList = () => {
     if (!blockchains.length && !!searchedFor) {
       return (
-        <>
-          <Divider size={32} />
-          <NotFound
-            title={i18n.t('No results found')}
-            description={i18n.t('Try using different keywords')}
-          />
-        </>
+        <NotFound
+          title={i18n.t('No results found')}
+          description={i18n.t('Try using different keywords')}
+        />
       );
     }
     return (
@@ -61,13 +64,19 @@ export function BlockchainList(props: PropTypes) {
   };
 
   return (
-    <Container>
-      <Typography variant="label" size="large">
-        {i18n.t('Select Blockchain')}
-      </Typography>
-      <Divider size={4} />
-      {fetchStatus === 'loading' && <LoadingBlockchainList />}
-      {fetchStatus === 'success' && renderList()}
-    </Container>
+    <>
+      {showTitle && (
+        <>
+          <Typography variant="label" size="large">
+            {i18n.t('Select Blockchain')}
+          </Typography>
+          <Divider size={4} />
+        </>
+      )}
+      <BlockchainListContainer>
+        {fetchStatus === 'loading' && <LoadingBlockchainList />}
+        {fetchStatus === 'success' && renderList()}
+      </BlockchainListContainer>
+    </>
   );
 }

package/src/components/BlockchainList/BlockchainList.types.ts

@@ -5,4 +5,5 @@ export interface PropTypes {
   searchedFor: string;
   blockchainCategory: string;
   onChange: (blockchain: BlockchainMeta) => void;
+  showTitle?: boolean;
 }

package/src/components/BlockchainSelectorButton/BlockchainSelectorButton.styles.ts

@@ -0,0 +1,49 @@
+import { darkTheme, styled } from '@rango-dev/ui';
+
+export const InputContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '100%',
+  height: '$40',
+  padding: '$4 $10',
+  borderRadius: '$sm',
+  cursor: 'pointer',
+  alignItems: 'center',
+  backgroundColor: '$neutral300',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral400',
+  },
+
+  '&:hover': {
+    backgroundColor: '$secondary100',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral500',
+    },
+  },
+  variants: {
+    disabled: {
+      true: {
+        cursor: 'default',
+        '&:hover': {
+          borderColor: '$neutral300',
+          '& svg': {
+            color: '$neutral700',
+          },
+        },
+      },
+    },
+  },
+});
+
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  '.title_typography': {
+    textTransform: 'capitalize',
+  },
+});
+
+export const FlexContainer = styled('div', {
+  display: 'flex',
+});

package/src/components/BlockchainSelectorButton/BlockchainSelectorButton.tsx

@@ -0,0 +1,47 @@
+import type { PropTypes } from './BlockchainSelectorButton.types';
+
+import { ChevronRightIcon, Divider, Image, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import {
+  Container,
+  FlexContainer,
+  InputContainer,
+} from './BlockchainSelectorButton.styles';
+
+export function BlockchainSelectorButton(props: PropTypes) {
+  const { onClick, value, title, hasLogo, placeholder, disabled } = props;
+
+  return (
+    <Container>
+      <Typography size="large" variant="label">
+        {title}
+      </Typography>
+      <Divider size={10} />
+      <InputContainer
+        onClick={disabled ? undefined : onClick}
+        disabled={disabled}>
+        <FlexContainer>
+          {hasLogo && (
+            <>
+              <Image
+                src={value?.logo}
+                size={16}
+                useAsPlaceholder={!value?.logo}
+                type="circular"
+              />
+              <Divider size={4} direction="horizontal" />
+            </>
+          )}
+          <Typography
+            className="title_typography"
+            size="medium"
+            variant="label">
+            {value?.name || placeholder}
+          </Typography>
+        </FlexContainer>
+        <ChevronRightIcon size={12} color="black" />
+      </InputContainer>
+    </Container>
+  );
+}

package/src/components/BlockchainSelectorButton/BlockchainSelectorButton.types.ts

@@ -0,0 +1,11 @@
+export interface PropTypes {
+  onClick: () => void;
+  value?: {
+    name: string;
+    logo: string;
+  };
+  title: string;
+  placeholder: string;
+  hasLogo?: boolean;
+  disabled?: boolean;
+}

package/src/components/BlockchainSelectorButton/index.ts

@@ -0,0 +1 @@
+export { BlockchainSelectorButton } from './BlockchainSelectorButton';

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -1,10 +1,13 @@
 import type { PropTypes } from './WalletList.type';
 import type { Wallet, WalletInfoWithExtra } from '../../types';
+import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
-import { warn } from '@rango-dev/logging-core';
 import {
+  Button,
   Divider,
+  Image,
+  MessageBox,
   SelectableWallet,
   Typography,
   WalletState,
@@ -13,11 +16,11 @@ import React, { useEffect, useState } from 'react';
 
 import { useWallets } from '../..';
 import { WIDGET_UI_ID } from '../../constants';
-import {
-  ResultStatus,
-  useStatefulConnect,
-} from '../../hooks/useStatefulConnect';
 import { useWalletList } from '../../hooks/useWalletList';
+import {
+  TIME_TO_CLOSE_MODAL,
+  TIME_TO_IGNORE_MODAL,
+} from '../../pages/WalletsPage';
 import { useAppStore } from '../../store/AppStore';
 import { useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
@@ -28,35 +31,77 @@ import {
   isExperimentalChain,
 } from '../../utils/wallets';
 import { WatermarkedModal } from '../common/WatermarkedModal';
-import { StatefulConnectModal } from '../StatefulConnectModal';
-import { ExperimentalChain } from '../WalletStatefulConnect';
-import { ExperimentalChainStatus } from '../WalletStatefulConnect/ExperimentalChainStatus';
+import { WalletDerivationPathModal } from '../WalletDerivationPathModal';
+import { WalletModal } from '../WalletModal';
+import { WalletNamespacesModal } from '../WalletNamespacesModal';
 
 import { ShowMoreWallets } from './ConfirmWallets.styles';
+import {
+  LogoContainer,
+  Spinner,
+  WalletImageContainer,
+} from './WalletList.styles';
 
-const ACCOUNT_ADDRESS_MAX_CHARACTERS = 7;
-const TIME_TO_CLOSE_MODAL = 3_000;
+interface WalletNamespacesModalState {
+  open: boolean;
+  providerType: string;
+  providerImage: string;
+  availableNamespaces?: Namespace[];
+  singleNamespace?: boolean;
+}
 
+interface DerivationPathModalState {
+  open: boolean;
+  providerType: string;
+  providerImage: string;
+  namespace: Namespace;
+}
+
+const ACCOUNT_ADDRESS_MAX_CHARACTERS = 7;
 export function WalletList(props: PropTypes) {
-  const { chain, isSelected, selectWallet, limit, onShowMore } = props;
+  const { chain, isSelected, selectWallet, limit, onShowMore, onConnect } =
+    props;
   const isActiveTab = useUiStore.use.isActiveTab();
 
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const { blockchains } = useAppStore();
-  const [selectedWalletToConnect, setSelectedWalletToConnect] =
-    useState<WalletInfoWithExtra>();
+  const [openWalletStateModal, setOpenWalletStateModal] =
+    useState<WalletType>('');
   const [experimentalChainWallet, setExperimentalChainWallet] =
     useState<Wallet | null>(null);
   const [showExperimentalChainModal, setShowExperimentalChainModal] =
     useState(false);
   const [addingExperimentalChainStatus, setAddingExperimentalChainStatus] =
     useState<'in-progress' | 'completed' | 'rejected' | null>(null);
+  const [namespacesModalState, setNamespacesModalState] =
+    useState<WalletNamespacesModalState | null>(null);
+  const [derivationPathModalState, setDerivationPathModalState] =
+    useState<DerivationPathModalState | null>(null);
   const { suggestAndConnect } = useWallets();
-  const { handleDisconnect } = useStatefulConnect();
-  const { list } = useWalletList({
+  let modalTimerId: ReturnType<typeof setTimeout> | null = null;
+  const {
+    list,
+    error,
+    handleClick,
+    disconnectWallet,
+    disconnectConnectingWallets,
+  } = useWalletList({
     chain,
+    onBeforeConnect: (type) => {
+      modalTimerId = setTimeout(() => {
+        setOpenWalletStateModal(type);
+      }, TIME_TO_IGNORE_MODAL);
+    },
+    onConnect: (type) => {
+      onConnect?.(type);
+      if (modalTimerId) {
+        clearTimeout(modalTimerId);
+      }
+      setTimeout(() => {
+        setOpenWalletStateModal('');
+      }, TIME_TO_CLOSE_MODAL);
+    },
   });
-
   const [sortedList, setSortedList] = useState<WalletInfoWithExtra[]>(list);
   const numberOfSupportedWallets = list.length;
   const shouldShowMoreWallets = limit && numberOfSupportedWallets - limit > 0;
@@ -72,6 +117,70 @@ export function WalletList(props: PropTypes) {
     }
   };
 
+  const handleCloseNamespaceModal = () => {
+    if (namespacesModalState) {
+      setNamespacesModalState({
+        ...namespacesModalState,
+        open: false,
+      });
+    }
+  };
+
+  const handleCloseDerivationPathModal = () => {
+    if (derivationPathModalState) {
+      setDerivationPathModalState({
+        ...derivationPathModalState,
+        open: false,
+      });
+    }
+  };
+
+  const handleOpenNamespacesModal = (wallet: WalletInfoWithExtra) => {
+    setNamespacesModalState({
+      open: true,
+      providerType: wallet.type,
+      providerImage: wallet.image,
+      availableNamespaces: wallet.namespaces,
+      singleNamespace: wallet.singleNamespace,
+    });
+  };
+
+  const handleConfirmNamespaces = (selectedNamespaces: Namespace[]) => {
+    const wallet = sortedList.find(
+      (wallet) => wallet.type === namespacesModalState?.providerType
+    );
+    if (
+      wallet?.singleNamespace && // Currently we support derivation path only for single namespace wallets
+      wallet?.needsDerivationPath &&
+      selectedNamespaces[0]
+    ) {
+      setDerivationPathModalState({
+        open: true,
+        providerType: wallet.type,
+        providerImage: wallet.image,
+        namespace: selectedNamespaces[0],
+      });
+    } else {
+      void handleClick(
+        namespacesModalState?.providerType as string,
+        selectedNamespaces.map((namespace) => ({
+          namespace,
+        }))
+      );
+    }
+    handleCloseNamespaceModal();
+  };
+
+  const handleDerivationPathConfirm = (derivationPath: string) => {
+    if (derivationPath && derivationPathModalState?.namespace) {
+      void handleClick(derivationPathModalState.providerType, [
+        { namespace: derivationPathModalState.namespace, derivationPath },
+      ]);
+    }
+
+    handleCloseDerivationPathModal();
+  };
+
   useEffect(() => {
     setSortedList((sortedList) => {
       const selectedWalletIndex = list.findIndex((wallet) =>
@@ -114,6 +223,11 @@ export function WalletList(props: PropTypes) {
     };
   }, [addingExperimentalChainStatus]);
 
+  const handleCloseWalletModal = () => {
+    disconnectConnectingWallets();
+    setOpenWalletStateModal('');
+  };
+
   return (
     <>
       {sortedList.slice(0, limit).map((wallet) => {
@@ -147,14 +261,27 @@ export function WalletList(props: PropTypes) {
           : conciseAddress;
 
         const onSelectableWalletClick = async () => {
-          const isDisconnected = wallet.state === WalletState.DISCONNECTED;
-          if (isDisconnected) {
-            setSelectedWalletToConnect(wallet);
+          if (wallet.state === WalletState.DISCONNECTED) {
+            if (!!wallet.namespaces?.length) {
+              if (wallet.namespaces.length > 1) {
+                handleOpenNamespacesModal(wallet);
+              } else if (wallet.needsDerivationPath) {
+                setDerivationPathModalState({
+                  open: true,
+                  providerType: wallet.type,
+                  providerImage: wallet.image,
+                  namespace: wallet.namespaces[0],
+                });
+              } else {
+                void handleClick(wallet.type);
+              }
+            } else {
+              void handleClick(wallet.type);
+            }
           } else if (!!wallet.namespaces && !conciseAddress) {
             // wallet is connected on a different namespace
-            await handleDisconnect(wallet.type);
-
-            setSelectedWalletToConnect(wallet);
+            await disconnectWallet(wallet.type);
+            handleOpenNamespacesModal(wallet);
           } else if (couldAddExperimentalChain) {
             setExperimentalChainWallet({
               walletType: wallet.type,
@@ -180,6 +307,29 @@ export function WalletList(props: PropTypes) {
             : undefined;
         return (
           <React.Fragment key={`${wallet.title}_${blockchainDisplayName}`}>
+            <WalletModal
+              open={openWalletStateModal === wallet.type}
+              onClose={handleCloseWalletModal}
+              image={wallet.image}
+              state={wallet.state}
+              error={error}
+            />
+            <WalletNamespacesModal
+              open={!!namespacesModalState?.open}
+              onClose={handleCloseNamespaceModal}
+              onConfirm={handleConfirmNamespaces}
+              image={namespacesModalState?.providerImage}
+              availableNamespaces={namespacesModalState?.availableNamespaces}
+              singleNamespace={namespacesModalState?.singleNamespace}
+            />
+            <WalletDerivationPathModal
+              open={!!derivationPathModalState?.open}
+              selectedNamespace={derivationPathModalState?.namespace}
+              type={derivationPathModalState?.providerType}
+              image={derivationPathModalState?.providerImage}
+              onClose={handleCloseDerivationPathModal}
+              onConfirm={handleDerivationPathConfirm}
+            />
             {!!experimentalChainWallet && (
               <WatermarkedModal
                 open={!!experimentalChainWallet && showExperimentalChainModal}
@@ -187,12 +337,30 @@ export function WalletList(props: PropTypes) {
                 onClose={() => {
                   setExperimentalChainWallet(null);
                 }}>
-                <ExperimentalChain
-                  displayName={blockchainDisplayName}
-                  onConfirm={() => {
-                    void addExperimentalChain(experimentalChainWallet);
-                  }}
-                />
+                <MessageBox
+                  title={i18n.t({
+                    id: 'Add {blockchainDisplayName} Chain',
+                    values: { blockchainDisplayName },
+                  })}
+                  type="warning"
+                  description={i18n.t({
+                    id: 'You should connect a {blockchainDisplayName} supported wallet or choose a different {blockchainDisplayName} address',
+                    values: { blockchainDisplayName },
+                  })}>
+                  <Divider size={18} />
+                  <Divider size={32} />
+                  <Button
+                    onClick={addExperimentalChain.bind(
+                      null,
+                      experimentalChainWallet
+                    )}
+                    variant="outlined"
+                    type="primary"
+                    fullWidth
+                    size="large">
+                    {i18n.t('Confirm')}
+                  </Button>
+                </MessageBox>
               </WatermarkedModal>
             )}
             {addingExperimentalChainStatus && (
@@ -200,11 +368,53 @@ export function WalletList(props: PropTypes) {
                 open={!!addingExperimentalChainStatus}
                 onClose={setAddingExperimentalChainStatus.bind(null, null)}
                 container={modalContainer}>
-                <ExperimentalChainStatus
-                  status={addingExperimentalChainStatus}
-                  displayName={blockchainDisplayName}
-                  image={wallet.image}
-                />
+                {addingExperimentalChainStatus === 'in-progress' && (
+                  <MessageBox
+                    type="loading"
+                    title={i18n.t({
+                      id: 'Add {blockchainDisplayName} Chain',
+                      values: { blockchainDisplayName },
+                    })}
+                    description={i18n.t({
+                      id: 'You should connect a {blockchainDisplayName} supported wallet or choose a different {blockchainDisplayName} address',
+                      values: { blockchainDisplayName },
+                    })}
+                    icon={
+                      <LogoContainer>
+                        <WalletImageContainer>
+                          <Image src={wallet.image} size={45} />
+                        </WalletImageContainer>
+                        <Spinner />
+                      </LogoContainer>
+                    }
+                  />
+                )}
+
+                {addingExperimentalChainStatus === 'completed' && (
+                  <MessageBox
+                    type="success"
+                    title={i18n.t({
+                      id: '{blockchainDisplayName} Chain Added',
+                      values: { blockchainDisplayName },
+                    })}
+                    description={i18n.t({
+                      id: '{blockchainDisplayName} is added to your wallet, you can use it to swap.',
+                      values: { blockchainDisplayName },
+                    })}
+                  />
+                )}
+
+                {addingExperimentalChainStatus === 'rejected' && (
+                  <MessageBox
+                    type="error"
+                    title={i18n.t('Request Rejected')}
+                    description={i18n.t({
+                      id: "You've rejected adding {blockchainDisplayName} chain to your wallet.",
+                      values: { blockchainDisplayName },
+                    })}
+                  />
+                )}
+
                 <Divider direction="vertical" size={32} />
               </WatermarkedModal>
             )}
@@ -219,25 +429,6 @@ export function WalletList(props: PropTypes) {
           </React.Fragment>
         );
       })}
-      <StatefulConnectModal
-        wallet={selectedWalletToConnect}
-        onClose={() => {
-          setSelectedWalletToConnect(undefined);
-        }}
-        onConnect={(result) => {
-          if (props.onConnect && result.status === ResultStatus.Connected) {
-            if (selectedWalletToConnect?.type) {
-              props.onConnect(selectedWalletToConnect.type);
-            } else {
-              warn(
-                new Error(
-                  "The selected wallet hasn't been detected after the connection process finished. It usually shouldn't happen."
-                )
-              );
-            }
-          }
-        }}
-      />
       {shouldShowMoreWallets && (
         <ShowMoreWallets selected={false} onClick={onShowMore}>
           <Typography variant="label" size="medium">

package/src/components/CustomDestination/CustomDestination.tsx

@@ -16,8 +16,10 @@ import React, { useEffect, useRef } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
-import { getBlockchainDisplayNameFor } from '../../utils/meta';
-import { isValidAddress } from '../ConfirmWalletsModal/ConfirmWallets.helpers';
+import {
+  getBlockchainDisplayNameFor,
+  isValidTokenAddress,
+} from '../../utils/meta';
 import { CustomCollapsible } from '../CustomCollapsible/CustomCollapsible';
 import { ExpandedIcon } from '../CustomCollapsible/CustomCollapsible.styles';
 
@@ -44,7 +46,7 @@ export function CustomDestination(props: PropTypes) {
   const isFirefox = navigator?.userAgent.includes('Firefox');
   const isAddressChecked = open && !!customDestination && blockchain;
   const isAddressInvalid =
-    isAddressChecked && !isValidAddress(blockchain, customDestination);
+    isAddressChecked && !isValidTokenAddress(blockchain, customDestination);
   const handleClear = () => {
     setCustomDestination('');
   };