@rango-dev/widget-embedded 0.0.0-experimental-936229e8-20251208

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.styles.ts

@@ -0,0 +1,31 @@
+import { styled } from '@rango-dev/ui';
+
+export const Alerts = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '$10',
+});
+
+export const ActionIcon = styled('div', {
+  transition: 'transform 0.3s ease-in-out',
+  variants: {
+    rotated: {
+      true: {
+        transform: 'rotate(180deg)',
+      },
+    },
+  },
+});
+
+export const AlertFooter = styled('div', {
+  transition: 'max-height 0.3s ease-in-out',
+  maxHeight: '0px',
+  overflow: 'hidden',
+  variants: {
+    open: {
+      true: {
+        maxHeight: '200px',
+      },
+    },
+  },
+});

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.tsx

@@ -0,0 +1,90 @@
+import type { SwapAlertsProps } from './SwapDetailsAlerts.types';
+
+import { i18n } from '@lingui/core';
+import { Alert, IconButton, LinkIcon } from '@rango-dev/ui';
+import React, { Fragment } from 'react';
+
+import { isNetworkStatusInWarningState } from '../../utils/swap';
+
+import { FailedAlert } from './SwapDetailsAlerts.Failed';
+import { Alerts } from './SwapDetailsAlerts.styles';
+import { WarningAlert } from './SwapDetailsAlerts.Warning';
+
+export function SwapDetailsAlerts(props: SwapAlertsProps) {
+  const {
+    switchNetworkIsAvailable,
+    handleSwitchNetworkClick,
+    showNetworkModal,
+    setNetworkModal,
+    message,
+    step,
+    hasAlreadyProceededToSign,
+  } = props;
+
+  const hasWarning = isNetworkStatusInWarningState(step);
+  const waitingForApproval =
+    step.status === 'waitingForApproval' && !hasWarning;
+  const inProgress = step.status === 'running' && !hasWarning;
+  const waitingProgress =
+    (inProgress && !hasAlreadyProceededToSign) ||
+    (waitingForApproval && !step.explorerUrl?.length);
+
+  return (
+    <Alerts>
+      {step.explorerUrl?.map((explorerUrl, index, urls) => {
+        const key = index + explorerUrl.url;
+        const lastUrl = index === urls.length - 1;
+        const loading =
+          ((lastUrl && inProgress) || waitingForApproval) && !waitingProgress;
+        const error = lastUrl && step.status === 'failed';
+
+        return (
+          <Fragment key={key}>
+            <Alert
+              id="widget-swap-details-tx-alert"
+              type={
+                lastUrl
+                  ? (loading && 'loading') || (error && 'error') || 'success'
+                  : 'success'
+              }
+              title={
+                !explorerUrl.description
+                  ? i18n.t('View transaction')
+                  : `${explorerUrl.description} Tx`
+              }
+              action={
+                explorerUrl.url && (
+                  <IconButton
+                    id="widget-swap-details-tx-link-icon-btn"
+                    variant="ghost"
+                    size="xsmall"
+                    onClick={() => window.open(explorerUrl.url, '_blank')}>
+                    <LinkIcon size={12} />
+                  </IconButton>
+                )
+              }
+            />
+          </Fragment>
+        );
+      })}
+      {waitingProgress && (
+        <Alert
+          id="widget-swap-details-loading-alert"
+          type="loading"
+          title={message.shortMessage}
+        />
+      )}
+      {step.status !== 'failed' && hasWarning && (
+        <WarningAlert
+          switchNetworkIsAvailable={switchNetworkIsAvailable}
+          handleSwitchNetworkClick={handleSwitchNetworkClick}
+          showNetworkModal={showNetworkModal}
+          setNetworkModal={setNetworkModal}
+          message={message}
+        />
+      )}
+
+      {step.status === 'failed' && <FailedAlert message={message} />}
+    </Alerts>
+  );
+}

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.types.ts

@@ -0,0 +1,31 @@
+import type { getSwapMessages } from '../../utils/swap';
+import type { ModalState } from '../SwapDetailsModal';
+import type { SwapperMeta } from 'rango-sdk';
+import type {
+  BlockchainMeta,
+  PendingSwap,
+  PendingSwapNetworkStatus,
+  PendingSwapStep,
+} from 'rango-types';
+
+export interface SwapAlertsProps extends WaningAlertsProps {
+  step: PendingSwapStep;
+  hasAlreadyProceededToSign?: boolean;
+}
+
+export interface WaningAlertsProps extends FailedAlertsProps {
+  switchNetworkIsAvailable: boolean;
+  handleSwitchNetworkClick: () => void;
+  showNetworkModal: PendingSwapNetworkStatus | null | undefined;
+  setNetworkModal: (network: ModalState) => void;
+}
+
+export interface FailedAlertsProps {
+  message: ReturnType<typeof getSwapMessages>;
+}
+
+export type GetStep = {
+  swap: PendingSwap;
+  blockchains: BlockchainMeta[];
+  swappers: SwapperMeta[];
+} & Omit<SwapAlertsProps, 'step' | 'hasAlreadyProceededToSign'>;

package/src/components/SwapDetailsAlerts/index.ts

@@ -0,0 +1,2 @@
+export { SwapDetailsAlerts } from './SwapDetailsAlerts';
+export type { GetStep } from './SwapDetailsAlerts.types';

package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

@@ -0,0 +1,140 @@
+import type { CompleteModalPropTypes } from './SwapDetailsModal.types';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  Divider,
+  MessageBox,
+  TokenAmount,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+
+import { WIDGET_UI_ID } from '../../constants';
+import {
+  PROFILE_BANNER_IMAGE_SOURCE,
+  PROFILE_BANNER_NAVIGATION_LINK,
+} from '../../constants/profileBanner';
+import { useUiStore } from '../../store/ui';
+import { getContainer } from '../../utils/common';
+import { WatermarkedModal } from '../common/WatermarkedModal';
+
+import { ProfileBanner, wordWrap } from './SwapDetailsModal.styles';
+
+export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
+  const {
+    open,
+    onClose,
+    status,
+    priceValue,
+    usdValue,
+    realUsdValue,
+    realValue,
+    token,
+    chain,
+    percentageChange,
+    description,
+    diagnosisUrl,
+  } = props;
+  const navigate = useNavigate();
+  const { showProfileBanner } = useUiStore();
+
+  return (
+    <WatermarkedModal
+      open={open}
+      onClose={onClose}
+      id="widget-swap-details-complete-modal"
+      container={
+        document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
+      }>
+      {status === 'success' ? (
+        <MessageBox type="success" title={i18n.t('Swap Successful')}>
+          <TokenAmount
+            direction="vertical"
+            tooltipContainer={getContainer()}
+            id="widget-swap-details-complete-modal-success-token-amount-container"
+            type="output"
+            centerAlign={true}
+            price={{
+              value: priceValue,
+              usdValue,
+              realUsdValue,
+              realValue,
+            }}
+            token={token}
+            chain={chain}
+            percentageChange={percentageChange}
+          />
+          <Divider size={12} />
+          <Typography
+            className={wordWrap()}
+            variant="body"
+            size="medium"
+            color="neutral700"
+            align="center">
+            {description}
+          </Typography>
+        </MessageBox>
+      ) : (
+        <MessageBox
+          type="error"
+          title={i18n.t('Transaction Failed')}
+          description={description}
+        />
+      )}
+      <Divider size={30} />
+      {status === 'success' && (
+        <>
+          {showProfileBanner && (
+            <>
+              <Link to={PROFILE_BANNER_NAVIGATION_LINK}>
+                <ProfileBanner
+                  src={PROFILE_BANNER_IMAGE_SOURCE}
+                  alt="Profile Banner"
+                />
+              </Link>
+
+              <Divider size={30} />
+            </>
+          )}
+          <Button
+            id="widget-swap-details-modal-done-btn"
+            variant="contained"
+            type="primary"
+            size="large"
+            onClick={() => {
+              const home = '../../';
+              navigate(home);
+            }}>
+            {i18n.t('Done')}
+          </Button>
+        </>
+      )}
+      <Divider size={12} />
+      {diagnosisUrl && (
+        <>
+          <Button
+            variant="contained"
+            id="widget-swap-detail-modal-diagnosis-btn"
+            type="primary"
+            size="large"
+            onClick={() => window.open(diagnosisUrl, '_blank')}>
+            {i18n.t('Diagnosis')}
+          </Button>
+          <Divider size={12} />
+        </>
+      )}
+      <Button
+        id="widget-swap-details-modal-see-details-btn"
+        variant="outlined"
+        type="primary"
+        size="large"
+        onClick={onClose}>
+        <Typography variant="title" size="medium" color="primary">
+          {i18n.t('See Details')}
+        </Typography>
+      </Button>
+    </WatermarkedModal>
+  );
+}

package/src/components/SwapDetailsModal/SwapDetailsModal.Cancel.tsx

@@ -0,0 +1,36 @@
+import type { CancelContentProps } from './SwapDetailsModal.types';
+
+import { i18n } from '@lingui/core';
+import { Button, Divider, MessageBox } from '@rango-dev/ui';
+import React from 'react';
+
+export const CancelContent = ({ onCancel, onClose }: CancelContentProps) => {
+  return (
+    <>
+      <Divider size={20} />
+      <MessageBox
+        type="error"
+        title={i18n.t('Cancel Swap')}
+        description={i18n.t('Are you sure you want to cancel this swap?')}
+      />
+      <Divider size={32} />
+      <Button
+        variant="contained"
+        id="widget-swap-details-modal-cancel-swap-yes-btn"
+        type="primary"
+        size="large"
+        onClick={onCancel}>
+        {i18n.t('Yes, Cancel it')}
+      </Button>
+      <Divider size={12} />
+      <Button
+        id="widget-swap-details-modal-cancel-swap-no-btn"
+        variant="outlined"
+        type="primary"
+        size="large"
+        onClick={onClose}>
+        {i18n.t('No, Continue')}
+      </Button>
+    </>
+  );
+};

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.Delete.tsx

@@ -0,0 +1,38 @@
+import type { DeleteContentProps } from './SwapDetailsModal.types';
+
+import { i18n } from '@lingui/core';
+import { Button, Divider, MessageBox, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+export const DeleteContent = ({ onDelete, onClose }: DeleteContentProps) => {
+  return (
+    <>
+      <Divider size={20} />
+      <MessageBox
+        type="error"
+        title={i18n.t('Delete Transaction')}
+        description={i18n.t('Are you sure you want to delete this swap?')}
+      />
+      <Divider size={32} />
+      <Button
+        id="widget-swap-details-modal-delete-swap-yes-btn"
+        variant="contained"
+        type="primary"
+        size="large"
+        onClick={onDelete}>
+        {i18n.t('Yes, Delete it')}
+      </Button>
+      <Divider size={12} />
+      <Button
+        id="widget-swap-details-modal-delete-swap-no-btn"
+        variant="outlined"
+        type="primary"
+        size="large"
+        onClick={onClose}>
+        <Typography variant="title" size="medium" color="primary">
+          {i18n.t('No, Cancel')}
+        </Typography>
+      </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,31 @@
+import type { NetworkStateContentProps } from './SwapDetailsModal.types';
+
+import { i18n } from '@lingui/core';
+import { Button, Divider, MessageBox } from '@rango-dev/ui';
+import React from 'react';
+
+export const NetworkStateContent = (props: NetworkStateContentProps) => {
+  const { switchNetworkModalState, handleSwitchNetwork } = props;
+
+  return (
+    <>
+      <MessageBox
+        type={switchNetworkModalState.type}
+        title={switchNetworkModalState.title}
+        description={switchNetworkModalState.description}
+      />
+      {switchNetworkModalState.type === 'error' && (
+        <>
+          <Divider size="30" />
+          <Button
+            id="widget-switch-network-try-again"
+            type="primary"
+            size="large"
+            onClick={handleSwitchNetwork}>
+            {i18n.t('Try Again')}
+          </Button>
+        </>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,49 @@
+import type { WalletStateContentProps } from './SwapDetailsModal.types';
+
+import {
+  getCurrentNamespaceOfOrNull,
+  getCurrentStep,
+  getRelatedWalletOrNull,
+} from '@rango-dev/queue-manager-rango-preset';
+import { WalletState } from '@rango-dev/ui';
+import { useWallets } from '@rango-dev/wallets-react';
+import React from 'react';
+
+import { getWalletConnectionStatus } from '../../utils/wallets';
+
+import { ConnectWalletContent } from './SwapDetailsModal.ConnectWallet';
+import { InstallWalletContent } from './SwapDetailsModal.InstallWallet';
+
+export const WalletStateContent = (props: WalletStateContentProps) => {
+  const { swap, onClose } = props;
+  const { state, getWalletInfo } = useWallets();
+
+  const currentStep = getCurrentStep(swap);
+  const currentStepWallet = currentStep
+    ? getRelatedWalletOrNull(swap, currentStep)
+    : null;
+
+  const walletType = currentStepWallet?.walletType;
+  const walletState = walletType
+    ? getWalletConnectionStatus(getWalletInfo(walletType), state(walletType))
+    : null;
+  const currentNamespace = currentStep
+    ? getCurrentNamespaceOfOrNull(swap, currentStep)
+    : null;
+
+  if (!walletType) {
+    return null;
+  }
+
+  if (walletState === WalletState.NOT_INSTALLED) {
+    return <InstallWalletContent walletType={walletType} />;
+  }
+
+  return (
+    <ConnectWalletContent
+      wallet={currentStepWallet}
+      namespace={currentNamespace}
+      onClose={onClose}
+    />
+  );
+};