@rango-dev/widget-embedded 0.45.1-next.3 → 0.45.1-next.4

package/src/components/SwapDetailsModal/SwapDetailsModal.ConnectWallet.tsx

@@ -0,0 +1,177 @@
+import type { ConnectWalletContentProps } from './SwapDetailsModal.types';
+
+import { i18n } from '@lingui/core';
+import {
+  Alert,
+  Button,
+  Checkbox,
+  Divider,
+  Image,
+  MessageBox,
+  Spinner,
+  WarningIcon,
+} from '@rango-dev/ui';
+import { useWallets } from '@rango-dev/wallets-react';
+import React, { useState } from 'react';
+
+import { useWalletList } from '../../hooks/useWalletList';
+import { useUiStore } from '../../store/ui';
+import { getConciseAddress } from '../../utils/wallets';
+import { NamespaceItem } from '../NamespaceItem';
+
+import {
+  WalletIcon,
+  WalletIconBadgeContainer,
+} from './SwapDetailsModal.styles';
+
+export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
+  const { wallet: currentStepWallet, namespace, onClose } = props;
+
+  const [error, setError] = useState<Error | null>(null);
+  const { list } = useWalletList();
+  const isActiveTab = useUiStore.use.isActiveTab();
+  const { state, connect } = useWallets();
+
+  const wallet = list.find(
+    (wallet) => wallet.type === currentStepWallet.walletType
+  );
+  const namespaceData = wallet?.needsNamespace?.data.find(
+    (namespaceData) => namespaceData.value === namespace?.namespace
+  );
+
+  if (!wallet) {
+    return null;
+  }
+
+  const walletState = state(currentStepWallet.walletType);
+  const namespaceState =
+    wallet.isHub && namespace?.namespace
+      ? walletState.namespaces?.get(namespace.namespace)
+      : null;
+
+  const connecting = walletState.connecting || namespaceState?.connecting;
+  const connected = wallet.isHub
+    ? namespaceState?.connected
+    : walletState.connected;
+
+  const getButtonTitle = () => {
+    if (connected) {
+      return i18n.t('Done');
+    }
+    if (error) {
+      return i18n.t('Try again');
+    }
+    return i18n.t('Connect');
+  };
+
+  const getNamespaceSuffix = () => {
+    if (connecting) {
+      return <Spinner color="info" />;
+    } else if (error || connected) {
+      return null;
+    }
+    return <Checkbox checked disabled />;
+  };
+
+  const handleConnect = async () => {
+    try {
+      setError(null);
+      await connect(
+        wallet.type,
+        namespace?.namespace
+          ? [
+              {
+                namespace: namespace?.namespace,
+                network: undefined,
+                derivationPath: currentStepWallet.derivationPath,
+              },
+            ]
+          : undefined
+      );
+    } catch (error) {
+      setError(error as Error);
+    }
+  };
+
+  const handleClickButton = async () => {
+    if (connected) {
+      onClose();
+      return;
+    }
+
+    void handleConnect();
+  };
+
+  const getAddress = () => {
+    if (!connected) {
+      return null;
+    }
+    const firstAccountArray = wallet?.isHub
+      ? namespaceState?.accounts?.[0]?.split(':')
+      : walletState?.accounts?.[0]?.split(':');
+    const address = firstAccountArray?.[firstAccountArray?.length - 1];
+
+    if (!address) {
+      return null;
+    }
+
+    return getConciseAddress(address);
+  };
+
+  return (
+    <>
+      <MessageBox
+        type="warning"
+        title={i18n.t('Connect {wallet}', { wallet: wallet.title })}
+        description={i18n.t(
+          'The connection of your wallet or some networks has been disconnected. Connect to continue the swap'
+        )}
+        icon={
+          <WalletIcon>
+            <Image src={wallet.image} size={45} />
+            <WalletIconBadgeContainer>
+              <WarningIcon color="warning" size={10} />
+            </WalletIconBadgeContainer>
+          </WalletIcon>
+        }
+      />
+      {connected && !namespaceData && (
+        <>
+          <Divider size={10} />
+          <Alert
+            type="success"
+            variant="alarm"
+            title={i18n.t('Wallet connected successfully.')}
+          />
+        </>
+      )}
+      {error && !namespaceData && (
+        <>
+          <Divider size={10} />
+          <Alert type="error" title={error?.message} variant="alarm" />
+        </>
+      )}
+      {namespaceData && (
+        <>
+          <Divider size={30} />
+          <NamespaceItem
+            namespace={namespaceData}
+            suffix={getNamespaceSuffix()}
+            error={error?.message}
+            connected={connected}
+            address={getAddress()}
+          />
+        </>
+      )}
+      <Divider size="40" />
+      <Button
+        loading={connecting}
+        type="primary"
+        id="widget-connect-wallet-btn"
+        onClick={handleClickButton}
+        disabled={!isActiveTab}>
+        {getButtonTitle()}
+      </Button>
+    </>
+  );
+};

package/src/components/SwapDetailsModal/SwapDetailsModal.InstallWallet.tsx

@@ -0,0 +1,52 @@
+import type { InstallWalletContentProps } from './SwapDetailsModal.types';
+
+import { i18n } from '@lingui/core';
+import { Button, Divider, Image, MessageBox, WarningIcon } from '@rango-dev/ui';
+import { useWallets } from '@rango-dev/wallets-react';
+import { detectInstallLink } from '@rango-dev/wallets-shared';
+import React from 'react';
+
+import {
+  WalletIcon,
+  WalletIconBadgeContainer,
+} from './SwapDetailsModal.styles';
+
+export const InstallWalletContent = (props: InstallWalletContentProps) => {
+  const { walletType } = props;
+
+  const { getWalletInfo } = useWallets();
+
+  const walletInfo = walletType ? getWalletInfo(walletType) : null;
+
+  if (!walletInfo) {
+    return null;
+  }
+
+  const handleButtonClick = () =>
+    window.open(detectInstallLink(walletInfo.installLink), '_blank');
+
+  return (
+    <>
+      <MessageBox
+        type="warning"
+        title={i18n.t('Install {wallet}', { wallet: walletInfo.name })}
+        description="Your wallet is not installed. Please install it to continue the swap.  "
+        icon={
+          <WalletIcon>
+            <Image src={walletInfo.img} size={45} />
+            <WalletIconBadgeContainer>
+              <WarningIcon color="warning" size={10} />
+            </WalletIconBadgeContainer>
+          </WalletIcon>
+        }
+      />
+      <Divider size="40" />
+      <Button
+        type="primary"
+        id="widget-install-wallet-btn"
+        onClick={handleButtonClick}>
+        {i18n.t('Install')}
+      </Button>
+    </>
+  );
+};

package/src/components/SwapDetailsModal/SwapDetailsModal.NetworkState.tsx

@@ -0,0 +1,17 @@
+import type { NetworkStateContentProps } from './SwapDetailsModal.types';
+
+import { i18n } from '@lingui/core';
+import { MessageBox } from '@rango-dev/ui';
+import React from 'react';
+
+export const NetworkStateContent = (props: NetworkStateContentProps) => {
+  const { status, message } = props;
+
+  const type = status === 'waitingForNetworkChange' ? 'loading' : 'success';
+  const title =
+    status === 'waitingForNetworkChange'
+      ? i18n.t('Change Network')
+      : i18n.t('Network Changed');
+
+  return <MessageBox type={type} title={title} description={message} />;
+};

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

@@ -1,89 +1,49 @@
 import type { WalletStateContentProps } from './SwapDetailsModal.types';
-import type { WalletInfoWithExtra } from '../../types';
 
-import { warn } from '@rango-dev/logging-core';
 import {
+  getCurrentNamespaceOfOrNull,
   getCurrentStep,
   getRelatedWalletOrNull,
 } from '@rango-dev/queue-manager-rango-preset';
-import { MessageBox, Wallet } from '@rango-dev/ui';
+import { WalletState } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
-import React, { useState } from 'react';
+import React from 'react';
 
-import { useWalletList } from '../../hooks/useWalletList';
-import { getContainer } from '../../utils/common';
 import { mapStatusToWalletState } from '../../utils/wallets';
-import { StatefulConnectModal } from '../StatefulConnectModal';
 
-import { WalletContainer } from './SwapDetailsModal.styles';
+import { ConnectWalletContent } from './SwapDetailsModal.ConnectWallet';
+import { InstallWalletContent } from './SwapDetailsModal.InstallWallet';
 
 export const WalletStateContent = (props: WalletStateContentProps) => {
-  const { type, title, swap, message, showWalletButton, walletButtonDisabled } =
-    props;
-  const [selectedWalletToConnect, setSelectedWalletToConnect] =
-    useState<WalletInfoWithExtra>();
-  const { getWalletInfo, state } = useWallets();
+  const { swap, onClose } = props;
+  const { state } = useWallets();
 
   const currentStep = getCurrentStep(swap);
   const currentStepWallet = currentStep
     ? getRelatedWalletOrNull(swap, currentStep)
     : null;
-  const currentStepFromBlockchain = currentStep?.fromBlockchain;
+
   const walletType = currentStepWallet?.walletType;
   const walletState = walletType
     ? mapStatusToWalletState(state(walletType))
     : null;
-  const walletInfo = walletType ? getWalletInfo(walletType) : null;
-  const shouldShowWallet =
-    showWalletButton && !!walletType && !!walletState && !!walletInfo;
-  const { list } = useWalletList();
+  const currentNamespace = currentStep
+    ? getCurrentNamespaceOfOrNull(swap, currentStep)
+    : null;
 
-  const handleWalletItemClick = () => {
-    if (!!walletType) {
-      const wallet = list.find((wallet) => wallet.type === walletType);
+  if (!walletType) {
+    return null;
+  }
 
-      if (wallet) {
-        setSelectedWalletToConnect(wallet);
-      } else {
-        warn(
-          new Error(
-            `It seems requested wallet to be connected is not available in the list. requested wallet: ${wallet}`
-          )
-        );
-      }
-    }
-  };
+  if (walletState === WalletState.NOT_INSTALLED) {
+    return <InstallWalletContent walletType={walletType} />;
+  }
 
   return (
-    <>
-      <MessageBox type={type} title={title} description={message} />
-      {shouldShowWallet && (
-        <WalletContainer>
-          <Wallet
-            container={getContainer()}
-            title={walletInfo.name}
-            image={walletInfo.img}
-            type={walletType}
-            state={walletState}
-            link={walletInfo.installLink}
-            disabled={walletButtonDisabled}
-            // TODO we need to show an error modal when user reject the connection
-            onClick={handleWalletItemClick}
-          />
-        </WalletContainer>
-      )}
-      <StatefulConnectModal
-        id="widget-swap-details-modal"
-        wallet={selectedWalletToConnect}
-        onClose={() => {
-          setSelectedWalletToConnect(undefined);
-        }}
-        options={{
-          defaultSelectedChains: currentStepFromBlockchain
-            ? [currentStepFromBlockchain]
-            : undefined,
-        }}
-      />
-    </>
+    <ConnectWalletContent
+      wallet={currentStepWallet}
+      namespace={currentNamespace}
+      onClose={onClose}
+    />
   );
 };

package/src/components/SwapDetailsModal/SwapDetailsModal.styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '@rango-dev/ui';
+import { darkTheme, styled } from '@rango-dev/ui';
 
 export const WalletContainer = styled('div', {
   display: 'flex',
@@ -16,3 +16,22 @@ export const TooltipErrorContent = styled('div', {
 export const ProfileBanner = styled('img', {
   width: '100%',
 });
+
+export const WalletIcon = styled('div', {
+  position: 'relative',
+});
+
+export const WalletIconBadgeContainer = styled('span', {
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  borderRadius: '50%',
+  width: '14px',
+  height: '14px',
+  display: 'flex',
+  padding: '$2',
+  backgroundColor: '$warning300',
+  [`.${darkTheme} &`]: {
+    $$color: '$warning600',
+  },
+});

package/src/components/SwapDetailsModal/SwapDetailsModal.tsx

@@ -1,57 +1,46 @@
 import type { ModalPropTypes } from './SwapDetailsModal.types';
 
-import { PendingSwapNetworkStatus } from 'rango-types';
 import React from 'react';
 
-import { WIDGET_UI_ID } from '../../constants';
+import { getContainer } from '../../utils/common';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 
 import { CancelContent } from './SwapDetailsModal.Cancel';
 import { DeleteContent } from './SwapDetailsModal.Delete';
-import { modalNetworkValues } from './SwapDetailsModal.helpers';
+import { NetworkStateContent } from './SwapDetailsModal.NetworkState';
 import { WalletStateContent } from './SwapDetailsModal.WalletState';
 
 export function SwapDetailsModal(props: ModalPropTypes) {
-  const {
-    state,
-    onClose,
-    onDelete,
-    onCancel,
-    swap,
-    message,
-    walletButtonDisabled,
-  } = props;
-
-  const showWalletStateContent =
-    state === PendingSwapNetworkStatus.WaitingForNetworkChange ||
-    state === PendingSwapNetworkStatus.WaitingForConnectingWallet ||
-    state === PendingSwapNetworkStatus.NetworkChanged;
+  const { isOpen, state, onClose, onDelete, onCancel, swap, message } = props;
 
   return (
     <WatermarkedModal
-      id="widget-swap-details-modal"
-      open={!!state}
+      open={isOpen}
       onClose={onClose}
-      container={
-        document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
-      }>
-      {showWalletStateContent && (
-        <WalletStateContent
-          type={modalNetworkValues[state].type}
-          title={modalNetworkValues[state].title}
-          swap={swap}
-          message={message}
-          walletButtonDisabled={walletButtonDisabled}
-          showWalletButton={
-            state !== PendingSwapNetworkStatus.WaitingForNetworkChange
-          }
-        />
+      container={getContainer()}>
+      {state === 'waitingForConnectingWallet' && (
+        <WalletStateContent swap={swap} message={message} onClose={onClose} />
+      )}
+      {(state === 'waitingForNetworkChange' || state === 'networkChanged') && (
+        <NetworkStateContent message={message} status={state} />
       )}
       {state === 'delete' && (
-        <DeleteContent onClose={onClose} onDelete={onDelete} />
+        <DeleteContent
+          onClose={onClose}
+          onDelete={() => {
+            onClose();
+            onDelete();
+          }}
+        />
       )}
       {state === 'cancel' && (
-        <CancelContent onClose={onClose} onCancel={onCancel} />
+        <CancelContent
+          onClose={onClose}
+          onCancel={() => {
+            onClose();
+            onCancel();
+          }}
+        />
       )}
     </WatermarkedModal>
   );

package/src/components/SwapDetailsModal/SwapDetailsModal.types.ts

@@ -1,3 +1,5 @@
+import type { TargetNamespace } from '@rango-dev/queue-manager-rango-preset';
+import type { LegacyWalletType } from '@rango-dev/wallets-core/legacy';
 import type { PendingSwap, PendingSwapNetworkStatus } from 'rango-types';
 
 export type ModalState =
@@ -6,13 +8,13 @@ export type ModalState =
   | 'cancel'
   | null;
 export interface ModalPropTypes {
+  isOpen: boolean;
   onClose: () => void;
   onCancel: () => void;
   onDelete: () => void;
   state: ModalState;
   swap: PendingSwap;
   message: string;
-  walletButtonDisabled: boolean;
 }
 
 export interface CompleteModalPropTypes {
@@ -36,18 +38,37 @@ export interface CompleteModalPropTypes {
   diagnosisUrl?: string | null;
 }
 
-export interface ModalNetworkValueTypes {
-  type: 'loading' | 'warning' | 'success';
-  title: string;
+export interface WalletStateContentProps {
+  swap: PendingSwap;
+  message: string;
+  onClose: () => void;
 }
 
-export interface WalletStateContentProps extends ModalNetworkValueTypes {
-  swap: PendingSwap;
+export interface NetworkStateContentProps {
   message: string;
-  showWalletButton: boolean;
-  walletButtonDisabled: boolean;
+  status: 'networkChanged' | 'waitingForNetworkChange';
+}
+
+export interface InstallWalletContentProps {
+  walletType: LegacyWalletType;
+}
+
+export interface ConnectWalletContentProps {
+  wallet: {
+    walletType: LegacyWalletType;
+    address: string;
+    derivationPath?: string;
+  };
+  namespace: TargetNamespace | null;
+  onClose: () => void;
 }
 
-export type CancelContentProps = Pick<ModalPropTypes, 'onClose' | 'onCancel'>;
+export interface CancelContentProps {
+  onCancel: () => void;
+  onClose: () => void;
+}
 
-export type DeleteContentProps = Pick<ModalPropTypes, 'onClose' | 'onDelete'>;
+export interface DeleteContentProps {
+  onDelete: () => void;
+  onClose: () => void;
+}

package/src/components/WalletStatefulConnect/Detached.tsx

@@ -4,9 +4,10 @@ import { i18n } from '@lingui/core';
 import { Divider, Image, MessageBox } from '@rango-dev/ui';
 import React from 'react';
 
+import { NamespaceUnsupportedItem } from '../NamespaceItem/NamespaceUnsupportedItem';
+
 import { NamespaceDetachedItem } from './NamespaceDetachedItem';
 import { NamespaceList, StyledButton } from './Namespaces.styles';
-import { NamespaceUnsupportedItem } from './NamespaceUnsupportedItem';
 
 export function Detached(props: PropTypes) {
   const { selectedNamespaces, value } = props;