@rango-dev/widget-embedded 0.32.1 → 0.32.2-next.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.32.1",
+  "version": "0.32.2-next.1",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,14 +25,15 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.6.0",
-    "@rango-dev/provider-all": "^0.36.0",
+    "@rango-dev/provider-all": "^0.36.1-next.5",
     "@rango-dev/queue-manager-core": "^0.27.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.36.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.36.1-next.1",
     "@rango-dev/queue-manager-react": "^0.27.0",
-    "@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",
+    "@rango-dev/signer-solana": "^0.31.1-next.1",
+    "@rango-dev/ui": "^0.38.1-next.0",
+    "@rango-dev/wallets-core": "^0.37.1-next.1",
+    "@rango-dev/wallets-react": "^0.22.1-next.1",
+    "@rango-dev/wallets-shared": "^0.36.1-next.1",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -1,13 +1,10 @@
 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,
@@ -16,11 +13,11 @@ import React, { useEffect, useState } from 'react';
 
 import { useWallets } from '../..';
 import { WIDGET_UI_ID } from '../../constants';
-import { useWalletList } from '../../hooks/useWalletList';
 import {
-  TIME_TO_CLOSE_MODAL,
-  TIME_TO_IGNORE_MODAL,
-} from '../../pages/WalletsPage';
+  ResultStatus,
+  useStatefulConnect,
+} from '../../hooks/useStatefulConnect';
+import { useWalletList } from '../../hooks/useWalletList';
 import { useAppStore } from '../../store/AppStore';
 import { useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
@@ -31,77 +28,35 @@ import {
   isExperimentalChain,
 } from '../../utils/wallets';
 import { WatermarkedModal } from '../common/WatermarkedModal';
-import { WalletDerivationPathModal } from '../WalletDerivationPathModal';
-import { WalletModal } from '../WalletModal';
-import { WalletNamespacesModal } from '../WalletNamespacesModal';
+import { StatefulConnectModal } from '../StatefulConnectModal';
+import { ExperimentalChain } from '../WalletStatefulConnect';
+import { ExperimentalChainStatus } from '../WalletStatefulConnect/ExperimentalChainStatus';
 
 import { ShowMoreWallets } from './ConfirmWallets.styles';
-import {
-  LogoContainer,
-  Spinner,
-  WalletImageContainer,
-} from './WalletList.styles';
-
-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;
+const TIME_TO_CLOSE_MODAL = 3_000;
+
 export function WalletList(props: PropTypes) {
-  const { chain, isSelected, selectWallet, limit, onShowMore, onConnect } =
-    props;
+  const { chain, isSelected, selectWallet, limit, onShowMore } = props;
   const isActiveTab = useUiStore.use.isActiveTab();
 
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const { blockchains } = useAppStore();
-  const [openWalletStateModal, setOpenWalletStateModal] =
-    useState<WalletType>('');
+  const [selectedWalletToConnect, setSelectedWalletToConnect] =
+    useState<WalletInfoWithExtra>();
   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();
-  let modalTimerId: ReturnType<typeof setTimeout> | null = null;
-  const {
-    list,
-    error,
-    handleClick,
-    disconnectWallet,
-    disconnectConnectingWallets,
-  } = useWalletList({
+  const { handleDisconnect } = useStatefulConnect();
+  const { list } = 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;
@@ -117,70 +72,6 @@ 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) =>
@@ -223,11 +114,6 @@ export function WalletList(props: PropTypes) {
     };
   }, [addingExperimentalChainStatus]);
 
-  const handleCloseWalletModal = () => {
-    disconnectConnectingWallets();
-    setOpenWalletStateModal('');
-  };
-
   return (
     <>
       {sortedList.slice(0, limit).map((wallet) => {
@@ -261,27 +147,14 @@ export function WalletList(props: PropTypes) {
           : conciseAddress;
 
         const onSelectableWalletClick = async () => {
-          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);
-            }
+          const isDisconnected = wallet.state === WalletState.DISCONNECTED;
+          if (isDisconnected) {
+            setSelectedWalletToConnect(wallet);
           } else if (!!wallet.namespaces && !conciseAddress) {
             // wallet is connected on a different namespace
-            await disconnectWallet(wallet.type);
-            handleOpenNamespacesModal(wallet);
+            await handleDisconnect(wallet.type);
+
+            setSelectedWalletToConnect(wallet);
           } else if (couldAddExperimentalChain) {
             setExperimentalChainWallet({
               walletType: wallet.type,
@@ -307,29 +180,6 @@ 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}
@@ -337,30 +187,12 @@ export function WalletList(props: PropTypes) {
                 onClose={() => {
                   setExperimentalChainWallet(null);
                 }}>
-                <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>
+                <ExperimentalChain
+                  displayName={blockchainDisplayName}
+                  onConfirm={() => {
+                    void addExperimentalChain(experimentalChainWallet);
+                  }}
+                />
               </WatermarkedModal>
             )}
             {addingExperimentalChainStatus && (
@@ -368,53 +200,11 @@ export function WalletList(props: PropTypes) {
                 open={!!addingExperimentalChainStatus}
                 onClose={setAddingExperimentalChainStatus.bind(null, null)}
                 container={modalContainer}>
-                {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 },
-                    })}
-                  />
-                )}
-
+                <ExperimentalChainStatus
+                  status={addingExperimentalChainStatus}
+                  displayName={blockchainDisplayName}
+                  image={wallet.image}
+                />
                 <Divider direction="vertical" size={32} />
               </WatermarkedModal>
             )}
@@ -429,6 +219,25 @@ 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/HeaderButtons/WalletButton.tsx

@@ -14,7 +14,7 @@ import {
 } from './HeaderButtons.styles';
 
 function WalletButton(props: PropTypes) {
-  const { list } = useWalletList({});
+  const { list } = useWalletList();
   const connectedWallets = list.filter(
     (wallet) => wallet.state === 'connected'
   );

package/src/components/Slippage/Slippage.tsx

@@ -2,6 +2,7 @@ import { i18n } from '@lingui/core';
 import {
   Divider,
   InfoIcon,
+  SlippageIcon,
   TextField,
   Tooltip,
   Typography,
@@ -31,6 +32,8 @@ export function Slippage() {
   return (
     <BaseContainer>
       <Head>
+        <SlippageIcon size={16} color="gray" />
+        <Divider direction="horizontal" size={4} />
         <Typography variant="title" size="xmedium">
           {i18n.t('Slippage tolerance per swap')}
         </Typography>

package/src/components/StatefulConnectModal/StatefulConnectModal.tsx

@@ -0,0 +1,176 @@
+import type { Result } from '../../hooks/useStatefulConnect';
+import type { WalletInfoWithExtra } from '../../types';
+import type { Namespace } from '@rango-dev/wallets-shared';
+
+import { Divider } from '@rango-dev/ui';
+import React, { useEffect, useRef, useState } from 'react';
+
+import {
+  ResultStatus,
+  useStatefulConnect,
+} from '../../hooks/useStatefulConnect';
+import { useWalletList } from '../../hooks/useWalletList';
+import { getContainer } from '../../utils/common';
+import { WatermarkedModal } from '../common/WatermarkedModal';
+import {
+  ConnectStatus,
+  DerivationPath,
+  Namespaces,
+} from '../WalletStatefulConnect';
+
+import { isOnDerivationPath, isOnNamespace, isOnStatus } from './helpers';
+
+const KEEP_SUCCESS_MODAL_FOR = 3_000;
+const DELAY_SHOWING_MODAL_FOR = 300;
+
+interface PropTypes {
+  wallet: WalletInfoWithExtra | undefined;
+  onClose: () => void;
+  // When `handleConnect` runs **successfully**, this will be called afterwards.
+  onConnect?: (result: Result) => void;
+}
+
+export function StatefulConnectModal(props: PropTypes) {
+  const successModalTimerId = useRef<ReturnType<typeof setTimeout>>();
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [error, setError] = useState<string>();
+  const catchErrorOnHandle = (error: Error) => {
+    setError(error.message);
+  };
+  const { terminateConnectingWallets } = useWalletList();
+
+  const {
+    handleConnect,
+    handleDerivationPath,
+    handleNamespace,
+    getState,
+    resetState,
+  } = useStatefulConnect();
+
+  const handleConfirmNamespaces = (selectedNamespaces: Namespace[]) => {
+    handleNamespace(props.wallet!, selectedNamespaces).catch(
+      catchErrorOnHandle
+    );
+  };
+
+  const handleDerivationPathConfirm = (derivationPath: string) => {
+    if (!derivationPath) {
+      throw new Error(
+        "Derivation path is empty. Please make sure you've filled the field correctly."
+      );
+    }
+
+    handleDerivationPath(derivationPath).catch(catchErrorOnHandle);
+  };
+
+  const handleClosingModal = () => {
+    setIsConnecting(false);
+  };
+
+  const resetModalState = () => {
+    setError(undefined);
+    resetState();
+    setIsConnecting(false);
+
+    if (successModalTimerId.current) {
+      clearTimeout(successModalTimerId.current);
+    }
+  };
+
+  useEffect(() => {
+    if (props.wallet) {
+      resetModalState();
+      let isConnected = false;
+      /*
+       * If connecting to wallet is happening quickly, we shouldn't show a modal.
+       * by default we are assuming we can connect quickly, but if it passes an certain amount of time
+       * We set his flag as false which means we a modal has been opened (showing a connection status or Namespace/Derivation path modal)
+       */
+      let isImmediatelyConnected = true;
+
+      const beforeConnecting = () => {
+        setTimeout(() => {
+          isImmediatelyConnected = false;
+          if (!isConnected) {
+            setIsConnecting(true);
+          }
+        }, DELAY_SHOWING_MODAL_FOR);
+      };
+
+      const afterConnected = (result: Result) => {
+        const resultIsConnected = result.status === ResultStatus.Connected;
+        const resultIsDisconnected = [
+          ResultStatus.Disconnected,
+          ResultStatus.DisconnectedUnhandled,
+        ].includes(result.status);
+        const resultIsNeedMoreStepsToConnect = [
+          ResultStatus.Namespace,
+          ResultStatus.DerivationPath,
+        ].includes(result.status);
+
+        if (!resultIsNeedMoreStepsToConnect) {
+          isConnected = true;
+        }
+
+        if (resultIsConnected && !isImmediatelyConnected) {
+          successModalTimerId.current = setTimeout(
+            handleClosingModal,
+            KEEP_SUCCESS_MODAL_FOR
+          );
+        } else if (resultIsDisconnected) {
+          handleClosingModal();
+        }
+
+        if (props.onConnect) {
+          props.onConnect(result);
+        }
+      };
+
+      beforeConnecting();
+      handleConnect(props.wallet, {
+        disconnectIfConnected: true,
+      })
+        .then(afterConnected)
+        .catch(catchErrorOnHandle);
+    }
+  }, [props.wallet]);
+
+  return (
+    <WatermarkedModal
+      open={isConnecting}
+      onClose={handleClosingModal}
+      onExit={() => {
+        resetModalState();
+        terminateConnectingWallets();
+        if (props.onClose) {
+          props.onClose();
+        }
+      }}
+      container={getContainer()}>
+      {isOnStatus(getState, props.wallet) && (
+        <>
+          <ConnectStatus
+            wallet={{
+              type: props.wallet.type,
+              image: props.wallet.image,
+            }}
+            error={error}
+          />
+          <Divider direction="vertical" size={32} />
+        </>
+      )}
+      {isOnNamespace(getState) && (
+        <Namespaces
+          onConfirm={handleConfirmNamespaces}
+          value={getState().namespace}
+        />
+      )}
+      {isOnDerivationPath(getState) && (
+        <DerivationPath
+          onConfirm={handleDerivationPathConfirm}
+          value={getState().derivationPath}
+        />
+      )}
+    </WatermarkedModal>
+  );
+}

package/src/components/StatefulConnectModal/helpers.ts

@@ -0,0 +1,23 @@
+import type { State } from '../../hooks/useStatefulConnect';
+import type { WalletInfoWithExtra } from '../../types';
+
+export function isOnStatus(
+  getState: () => State,
+  wallet?: WalletInfoWithExtra
+): wallet is WalletInfoWithExtra {
+  return getState().status === 'init' && !!wallet;
+}
+
+export function isOnNamespace(
+  getState: () => State
+): getState is () => State & { namespace: NonNullable<State['namespace']> } {
+  return getState().status === 'namespace';
+}
+
+export function isOnDerivationPath(
+  getState: () => State
+): getState is () => State & {
+  derivationPath: NonNullable<State['derivationPath']>;
+} {
+  return getState().status === 'derivationPath';
+}

package/src/components/StatefulConnectModal/index.ts

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