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

package/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx

@@ -1,33 +1,18 @@
 import type { WalletStateContentProps } from './SwapDetailsModal.types';
-import type { Namespace } from '@rango-dev/wallets-shared';
+import type { WalletInfoWithExtra } from '../../types';
 
-import { debug } from '@rango-dev/logging-core';
+import { warn } from '@rango-dev/logging-core';
 import { MessageBox, Wallet } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import React, { useState } from 'react';
 
+import { useWalletList } from '../../hooks/useWalletList';
 import { getContainer } from '../../utils/common';
 import { mapStatusToWalletState } from '../../utils/wallets';
-import { WalletDerivationPathModal } from '../WalletDerivationPathModal';
-import { WalletNamespacesModal } from '../WalletNamespacesModal';
+import { StatefulConnectModal } from '../StatefulConnectModal';
 
 import { WalletContainer } from './SwapDetailsModal.styles';
 
-interface NamespacesModalState {
-  open: boolean;
-  providerType: string;
-  providerImage: string;
-  availableNamespaces?: Namespace[];
-  singleNamespace?: boolean;
-}
-
-interface DerivationPathModalState {
-  open: boolean;
-  providerType: string;
-  providerImage: string;
-  namespace: Namespace;
-}
-
 export const WalletStateContent = (props: WalletStateContentProps) => {
   const {
     type,
@@ -37,11 +22,9 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
     showWalletButton,
     walletButtonDisabled,
   } = props;
-  const { connect, getWalletInfo, state } = useWallets();
-  const [namespacesModalState, setNamespacesModalState] =
-    useState<NamespacesModalState | null>(null);
-  const [derivationPathModalState, setDerivationPathModalState] =
-    useState<DerivationPathModalState | null>(null);
+  const [selectedWalletToConnect, setSelectedWalletToConnect] =
+    useState<WalletInfoWithExtra>();
+  const { getWalletInfo, state } = useWallets();
   const walletType = currentStepWallet?.walletType;
   const walletState = walletType
     ? mapStatusToWalletState(state(walletType))
@@ -49,87 +32,24 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
   const walletInfo = walletType ? getWalletInfo(walletType) : null;
   const shouldShowWallet =
     showWalletButton && !!walletType && !!walletState && !!walletInfo;
-
-  const handleCloseNamespaceModal = () => {
-    if (namespacesModalState) {
-      setNamespacesModalState({
-        ...namespacesModalState,
-        open: false,
-      });
-    }
-  };
-
-  const handleCloseDerivationPathModal = () => {
-    if (derivationPathModalState) {
-      setDerivationPathModalState({
-        ...derivationPathModalState,
-        open: false,
-      });
-    }
-  };
+  const { list } = useWalletList();
 
   const handleWalletItemClick = () => {
-    if (!!walletType && !!walletInfo) {
-      if (!!walletInfo.namespaces?.length) {
-        if (walletInfo.namespaces.length > 1) {
-          setNamespacesModalState({
-            open: true,
-            providerType: walletType,
-            providerImage: walletInfo.img,
-            availableNamespaces: walletInfo.namespaces,
-            singleNamespace: walletInfo.singleNamespace,
-          });
-        } else if (walletInfo.needsDerivationPath) {
-          setDerivationPathModalState({
-            open: true,
-            providerType: walletType,
-            providerImage: walletInfo.img,
-            namespace: walletInfo.namespaces[0],
-          });
-        } else {
-          connect(walletType).catch((error) => debug(error));
-        }
+    if (!!walletType) {
+      const wallet = list.find((wallet) => wallet.type === walletType);
+
+      if (wallet) {
+        setSelectedWalletToConnect(wallet);
       } else {
-        connect(walletType).catch((error) => debug(error));
+        warn(
+          new Error(
+            `It seems requested wallet to be connected is not available in the list. requested wallet: ${wallet}`
+          )
+        );
       }
     }
   };
 
-  const handleConfirmNamespaces = (selectedNamespaces: Namespace[]) => {
-    if (
-      !!walletInfo?.needsDerivationPath &&
-      walletInfo?.singleNamespace &&
-      selectedNamespaces[0] &&
-      walletType
-    ) {
-      setDerivationPathModalState({
-        open: true,
-        providerType: walletType,
-        providerImage: walletInfo.img,
-        namespace: selectedNamespaces[0],
-      });
-    } else {
-      connect(
-        namespacesModalState?.providerType as string,
-        undefined,
-        selectedNamespaces.map((namespace) => ({
-          namespace,
-        }))
-      ).catch((error) => debug(error));
-    }
-    handleCloseNamespaceModal();
-  };
-
-  const handleDerivationPathConfirm = (derivationPath: string) => {
-    if (derivationPath && derivationPathModalState?.namespace) {
-      connect(derivationPathModalState?.providerType, undefined, [
-        { namespace: derivationPathModalState.namespace, derivationPath },
-      ]).catch((error) => debug(error));
-    }
-
-    handleCloseDerivationPathModal();
-  };
-
   return (
     <>
       <MessageBox type={type} title={title} description={message} />
@@ -148,21 +68,11 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
           />
         </WalletContainer>
       )}
-      <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}
+      <StatefulConnectModal
+        wallet={selectedWalletToConnect}
+        onClose={() => {
+          setSelectedWalletToConnect(undefined);
+        }}
       />
     </>
   );

package/src/components/{WalletModal/WalletModalContent.tsx → WalletStatefulConnect/ConnectStatus.tsx}

@@ -1,18 +1,26 @@
-import type { ModalContentProps } from './WalletModal.types';
+import type { ConnectStatusProps } from './ConnectStatus.types';
 
 import { i18n } from '@lingui/core';
 import { Image, MessageBox, WalletState } from '@rango-dev/ui';
+import { useWallets } from '@rango-dev/wallets-react';
 import React from 'react';
 
+import { mapStatusToWalletState } from '../../utils/wallets';
+
 import {
   LogoContainer,
   Spinner,
   WalletImageContainer,
-} from './WalletModalContent.styles';
+} from './ConnectStatus.styles';
+
+export function ConnectStatus(props: ConnectStatusProps) {
+  // See `wallet` notes on its type definition
+  const { wallet, error } = props;
+  const { type, image } = wallet;
+  const { state } = useWallets();
+  const walletState = mapStatusToWalletState(state(type));
 
-export function ModalContent(props: ModalContentProps) {
-  const { state, image, error } = props;
-  if (state === WalletState.CONNECTED) {
+  if (walletState === WalletState.CONNECTED) {
     return (
       <MessageBox
         type="success"

package/src/components/WalletStatefulConnect/ConnectStatus.types.ts

@@ -0,0 +1,11 @@
+export interface ConnectStatusProps {
+  /*
+   * We can not use `WalletInfoWithExtra` because the inside state will be stale in some cases.
+   * We should directly use `useWallets` to make sure we have a correct state.
+   */
+  wallet: {
+    type: string;
+    image: string;
+  };
+  error?: string;
+}

package/src/components/WalletStatefulConnect/DerivationPath.helpers.ts

@@ -0,0 +1,23 @@
+import type { DerivationPath, Namespace } from '@rango-dev/wallets-shared';
+
+import { namespaces } from '@rango-dev/wallets-shared';
+
+export const CUSTOM_DERIVATION_PATH: DerivationPath = {
+  id: 'custom',
+  label: 'Custom',
+  generateDerivationPath: (index: string) => index,
+};
+
+export function getDerivationPaths(
+  selectedNamespace?: Namespace
+): DerivationPath[] {
+  const selectedNamespaceDerivationPaths = selectedNamespace
+    ? namespaces[selectedNamespace].derivationPaths
+    : null;
+
+  const derivationPaths: DerivationPath[] = !!selectedNamespaceDerivationPaths
+    ? [...selectedNamespaceDerivationPaths, CUSTOM_DERIVATION_PATH]
+    : [];
+
+  return derivationPaths;
+}

package/src/components/{WalletDerivationPathModal/WalletDerivationPathModal.tsx → WalletStatefulConnect/DerivationPath.tsx}

@@ -1,5 +1,5 @@
-import type { PropTypes } from './WalletDerivationPathModal.types';
-import type { DerivationPath, Namespace } from '@rango-dev/wallets-shared';
+import type { PropTypes } from './DerivationPath.types';
+import type { DerivationPath } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
 import {
@@ -10,43 +10,30 @@ import {
   Select,
   TextField,
 } from '@rango-dev/ui';
-import { namespaces } from '@rango-dev/wallets-shared';
 import React, { useEffect, useState } from 'react';
 
-import { WIDGET_UI_ID } from '../../constants';
-import { WatermarkedModal } from '../common/WatermarkedModal';
 import {
   LogoContainer,
   Spinner,
   WalletImageContainer,
-} from '../WalletModal/WalletModalContent.styles';
-
+} from './ConnectStatus.styles';
+import {
+  CUSTOM_DERIVATION_PATH,
+  getDerivationPaths,
+} from './DerivationPath.helpers';
 import {
   derivationPathInputStyles,
   InputLabel,
   InputsContainer,
-} from './WalletDerivationPathModal.styles';
-
-const customDerivationPath: DerivationPath = {
-  id: 'custom',
-  label: 'Custom',
-  generateDerivationPath: (index: string) => index,
-};
-
-function getDerivationPaths(selectedNamespace?: Namespace) {
-  const selectedNamespaceDerivationPaths = selectedNamespace
-    ? namespaces[selectedNamespace].derivationPaths
-    : null;
-
-  const derivationPaths: DerivationPath[] = !!selectedNamespaceDerivationPaths
-    ? [...selectedNamespaceDerivationPaths, customDerivationPath]
-    : [];
-
-  return derivationPaths;
-}
+} from './DerivationPath.styles';
 
-export function WalletDerivationPathModal(props: PropTypes) {
-  const { onClose, onConfirm, selectedNamespace, image, type, open } = props;
+export function DerivationPath(props: PropTypes) {
+  const { onConfirm } = props;
+  const {
+    namespace: selectedNamespace,
+    providerImage: image,
+    providerType: type,
+  } = props.value;
 
   const [selectedDerivationPathId, setSelectedDerivationPathId] = useState<
     string | null
@@ -54,7 +41,7 @@ export function WalletDerivationPathModal(props: PropTypes) {
   const [derivationPathIndex, setDerivationPathIndex] = useState('0');
 
   const isCustomOptionSelected =
-    selectedDerivationPathId === customDerivationPath.id;
+    selectedDerivationPathId === CUSTOM_DERIVATION_PATH.id;
 
   const derivationPaths = getDerivationPaths(selectedNamespace);
 
@@ -89,12 +76,7 @@ export function WalletDerivationPathModal(props: PropTypes) {
   }, [selectedNamespace]);
 
   return (
-    <WatermarkedModal
-      open={open}
-      onClose={onClose}
-      container={
-        document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
-      }>
+    <>
       <Divider size={20} />
       <MessageBox
         type="info"
@@ -149,6 +131,6 @@ export function WalletDerivationPathModal(props: PropTypes) {
         }>
         {i18n.t('Confirm')}
       </Button>
-    </WatermarkedModal>
+    </>
   );
 }

package/src/components/WalletStatefulConnect/DerivationPath.types.ts

@@ -0,0 +1,6 @@
+import type { NeedsDerivationPathState } from '../../hooks/useStatefulConnect';
+
+export interface PropTypes {
+  value: NeedsDerivationPathState;
+  onConfirm: (path: string) => void;
+}

package/src/components/WalletStatefulConnect/ExperimentalChain.tsx

@@ -0,0 +1,36 @@
+import { i18n } from '@lingui/core';
+import { Button, Divider, MessageBox } from '@rango-dev/ui';
+import React from 'react';
+
+interface PropTypes {
+  displayName?: string;
+  onConfirm: () => void;
+}
+
+export function ExperimentalChain(props: PropTypes) {
+  const { displayName, onConfirm } = props;
+
+  return (
+    <MessageBox
+      title={i18n.t({
+        id: 'Add {blockchainDisplayName} Chain',
+        values: { blockchainDisplayName: displayName },
+      })}
+      type="warning"
+      description={i18n.t({
+        id: 'You should connect a {blockchainDisplayName} supported wallet or choose a different {blockchainDisplayName} address',
+        values: { blockchainDisplayName: displayName },
+      })}>
+      <Divider size={18} />
+      <Divider size={32} />
+      <Button
+        onClick={onConfirm}
+        variant="outlined"
+        type="primary"
+        fullWidth
+        size="large">
+        {i18n.t('Confirm')}
+      </Button>
+    </MessageBox>
+  );
+}

package/src/components/WalletStatefulConnect/ExperimentalChainStatus.helpers.ts

@@ -0,0 +1,53 @@
+import type { PropTypes } from './ExperimentalChainStatus.types';
+import type { MessageType } from '@rango-dev/ui';
+
+import { i18n } from '@lingui/core';
+
+export function generateMessageByStatus(
+  status: PropTypes['status'],
+  blockchainDisplayName: string | undefined
+): {
+  type: MessageType;
+  title: string;
+  description: string;
+} {
+  switch (status) {
+    case 'in-progress':
+      return {
+        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 },
+        }),
+      };
+    case 'completed':
+      return {
+        type: 'success',
+        title: i18n.t({
+          id: '{blockchainDisplayName} Chain Added',
+          values: { blockchainDisplayName },
+        }),
+        description: i18n.t({
+          id: 'You should connect a {blockchainDisplayName} supported wallet or choose a different {blockchainDisplayName} address',
+          values: { blockchainDisplayName },
+        }),
+      };
+    case 'rejected':
+      return {
+        type: 'error',
+        title: i18n.t('Request Rejected'),
+        description: i18n.t({
+          id: "You've rejected adding {blockchainDisplayName} chain to your wallet.",
+          values: { blockchainDisplayName },
+        }),
+      };
+    default:
+      throw new Error(
+        `Showing information about an experimentation chain status needs to be defined first. status: ${status}`
+      );
+  }
+}

package/src/components/WalletStatefulConnect/ExperimentalChainStatus.tsx

@@ -0,0 +1,35 @@
+import type { PropTypes } from './ExperimentalChainStatus.types';
+
+import { Image, MessageBox, Spinner } from '@rango-dev/ui';
+import React from 'react';
+
+import {
+  LogoContainer,
+  WalletImageContainer,
+} from '../ConfirmWalletsModal/WalletList.styles';
+
+import { generateMessageByStatus } from './ExperimentalChainStatus.helpers';
+
+export function ExperimentalChainStatus(props: PropTypes) {
+  const { status, displayName, image } = props;
+  const data = generateMessageByStatus(status, displayName);
+  const hasImage = status == 'in-progress';
+
+  return (
+    <MessageBox
+      type={data.type}
+      title={data.title}
+      description={data.description}
+      icon={
+        hasImage ? (
+          <LogoContainer>
+            <WalletImageContainer>
+              <Image src={image} size={45} />
+            </WalletImageContainer>
+            <Spinner />
+          </LogoContainer>
+        ) : undefined
+      }
+    />
+  );
+}

package/src/components/WalletStatefulConnect/ExperimentalChainStatus.types.ts

@@ -0,0 +1,5 @@
+export interface PropTypes {
+  displayName?: string;
+  status: 'in-progress' | 'completed' | 'rejected';
+  image: string;
+}

package/src/components/WalletStatefulConnect/Namespaces.helpers.ts

@@ -0,0 +1,9 @@
+import type { BlockchainMeta } from 'rango-types';
+
+export function getBlockchainLogo(
+  blockchains: BlockchainMeta[],
+  blockchainName: string
+) {
+  return blockchains.find((blockchain) => blockchain.name === blockchainName)
+    ?.logo;
+}

package/src/components/{WalletNamespacesModal/WalletNamespacesModal.tsx → WalletStatefulConnect/Namespaces.tsx}

@@ -1,6 +1,5 @@
-import type { PropTypes } from './WalletNamespacesModal.types';
+import type { PropTypes } from './Namespaces.types';
 import type { Namespace } from '@rango-dev/wallets-shared';
-import type { BlockchainMeta } from 'rango-sdk';
 
 import { i18n } from '@lingui/core';
 import {
@@ -16,27 +15,15 @@ import {
 import { namespaces } from '@rango-dev/wallets-shared';
 import React, { useMemo, useState } from 'react';
 
-import { WIDGET_UI_ID } from '../../constants';
 import { useAppStore } from '../../store/AppStore';
-import { WatermarkedModal } from '../common/WatermarkedModal';
 import { WalletImageContainer } from '../HeaderButtons/HeaderButtons.styles';
-import {
-  LogoContainer,
-  Spinner,
-} from '../WalletModal/WalletModalContent.styles';
-
-import { NamespaceList } from './WalletNamespacesModal.styles';
 
-const getBlockchainLogo = (
-  blockchains: BlockchainMeta[],
-  blockchainName: string
-) => {
-  return blockchains.find((blockchain) => blockchain.name === blockchainName)
-    ?.logo;
-};
+import { LogoContainer, Spinner } from './ConnectStatus.styles';
+import { getBlockchainLogo } from './Namespaces.helpers';
+import { NamespaceList } from './Namespaces.styles';
 
-export function WalletNamespacesModal(props: PropTypes) {
-  const { singleNamespace, availableNamespaces } = props;
+export function Namespaces(props: PropTypes) {
+  const { singleNamespace, availableNamespaces, providerImage } = props.value;
 
   const [selectedNamespaces, setSelectedNamespaces] = useState<Namespace[]>([]);
 
@@ -76,12 +63,7 @@ export function WalletNamespacesModal(props: PropTypes) {
   };
 
   return (
-    <WatermarkedModal
-      open={props.open}
-      onClose={props.onClose}
-      container={
-        document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
-      }>
+    <>
       <Divider size={20} />
       <MessageBox
         type="info"
@@ -92,7 +74,7 @@ export function WalletNamespacesModal(props: PropTypes) {
         icon={
           <LogoContainer>
             <WalletImageContainer>
-              <Image src={props.image} size={45} />
+              <Image src={providerImage} size={45} />
             </WalletImageContainer>
             <Spinner />
           </LogoContainer>
@@ -132,6 +114,6 @@ export function WalletNamespacesModal(props: PropTypes) {
         onClick={() => props.onConfirm(selectedNamespaces)}>
         {i18n.t('Confirm')}
       </Button>
-    </WatermarkedModal>
+    </>
   );
 }

package/src/components/{WalletNamespacesModal/WalletNamespacesModal.types.tsx → WalletStatefulConnect/Namespaces.types.tsx}

@@ -1,10 +1,7 @@
+import type { NeedsNamespacesState } from '../../hooks/useStatefulConnect';
 import type { Namespace } from '@rango-dev/wallets-shared';
 
 export interface PropTypes {
-  open: boolean;
-  image?: string;
-  onClose: () => void;
   onConfirm: (namespaces: Namespace[]) => void;
-  availableNamespaces?: Namespace[];
-  singleNamespace?: boolean;
+  value: NeedsNamespacesState;
 }

package/src/components/WalletStatefulConnect/index.ts

@@ -0,0 +1,4 @@
+export { Namespaces } from './Namespaces';
+export { DerivationPath } from './DerivationPath';
+export { ConnectStatus } from './ConnectStatus';
+export { ExperimentalChain } from './ExperimentalChain';

package/src/hooks/useStatefulConnect/index.ts

@@ -0,0 +1,9 @@
+export { useStatefulConnect } from './useStatefulConnect';
+export { ResultStatus } from './useStatefulConnect.types';
+export type {
+  NeedsNamespacesState,
+  NeedsDerivationPathState,
+  Result,
+} from './useStatefulConnect.types';
+
+export type { State } from './useStatefulConnect.state';

package/src/hooks/useStatefulConnect/useStatefulConnect.helpers.ts

@@ -0,0 +1,13 @@
+import type { State } from './useStatefulConnect.state';
+
+export function isStateOnDerivationPathStep(
+  state: State
+): state is State & { derivationPath: NonNullable<State['derivationPath']> } {
+  return !!state.derivationPath;
+}
+
+export function isStateOnNamespace(
+  state: State
+): state is State & { namespace: NonNullable<State['namespace']> } {
+  return !!state.namespace;
+}

package/src/hooks/useStatefulConnect/useStatefulConnect.state.ts

@@ -0,0 +1,45 @@
+import type {
+  Actions,
+  NeedsDerivationPathState,
+  NeedsNamespacesState,
+} from './useStatefulConnect.types';
+
+export interface State {
+  status: 'init' | 'namespace' | 'derivationPath';
+  namespace: NeedsNamespacesState | null;
+  derivationPath: NeedsDerivationPathState | null;
+}
+
+export const initState: State = {
+  status: 'init',
+  namespace: null,
+  derivationPath: null,
+};
+
+export function reducer(state: State, action: Actions): State {
+  switch (action.type) {
+    case 'needsNamespace':
+      return {
+        ...state,
+        status: 'namespace',
+        namespace: action.payload,
+        derivationPath: null,
+      };
+    case 'needsDerivationPath':
+      return {
+        ...state,
+        status: 'derivationPath',
+        derivationPath: action.payload,
+      };
+    case 'reset':
+      return initState;
+    case 'resetDerivation':
+      return {
+        ...state,
+        derivationPath: null,
+        status: 'namespace',
+      };
+    default:
+      throw new Error(`Action hasn't been defined.`);
+  }
+}