@rango-dev/widget-embedded 0.12.1-next.2 → 0.12.1-next.21

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.tsx

@@ -0,0 +1,74 @@
+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 {
+    switchNetwork,
+    showNetworkModal,
+    setNetworkModal,
+    message,
+    step,
+    hasAlreadyProceededToSign,
+  } = props;
+
+  const hasWarning = isNetworkStatusInWarningState(step);
+  const waitingForApproval =
+    step.status === 'waitingForApproval' && !hasWarning;
+  const inProgress = step.status === 'running' && !hasWarning;
+  return (
+    <Alerts>
+      {step.explorerUrl?.map((explorerUrl, index, urls) => {
+        const key = index + explorerUrl.url;
+        const lastUrl = index === urls.length - 1;
+        const loading = (lastUrl && inProgress) || waitingForApproval;
+        const error = lastUrl && step.status === 'failed';
+
+        return (
+          <Fragment key={key}>
+            <Alert
+              type={(loading && 'loading') || (error && 'error') || 'success'}
+              title={
+                !explorerUrl.description
+                  ? i18n.t('View transaction')
+                  : `${explorerUrl.description} Tx`
+              }
+              action={
+                explorerUrl.url && (
+                  <IconButton
+                    variant="ghost"
+                    size="xsmall"
+                    onClick={() => window.open(explorerUrl.url, '_blank')}>
+                    <LinkIcon size={16} />
+                  </IconButton>
+                )
+              }
+            />
+          </Fragment>
+        );
+      })}
+      {((inProgress && !hasAlreadyProceededToSign) ||
+        (waitingForApproval && !step.explorerUrl?.length)) && (
+        <Alert type="loading" title={message.shortMessage} />
+      )}
+      {step.status !== 'failed' && hasWarning && (
+        <WarningAlert
+          switchNetwork={switchNetwork}
+          showNetworkModal={showNetworkModal}
+          setNetworkModal={setNetworkModal}
+          message={message}
+        />
+      )}
+
+      {step.status === 'failed' && <FailedAlert message={message} />}
+    </Alerts>
+  );
+}

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

@@ -0,0 +1,28 @@
+import type { getSwapMessages } from '../../utils/swap';
+import type { ModalState } from '../SwapDetailsModal';
+import type { ConnectResult } from '@rango-dev/wallets-react';
+import type {
+  PendingSwap,
+  PendingSwapNetworkStatus,
+  PendingSwapStep,
+} from 'rango-types';
+
+export interface SwapAlertsProps extends WaningAlertsProps {
+  step: PendingSwapStep;
+  hasAlreadyProceededToSign?: boolean;
+}
+
+export interface WaningAlertsProps extends FailedAlertsProps {
+  switchNetwork: (() => Promise<ConnectResult>) | undefined;
+  showNetworkModal: PendingSwapNetworkStatus | null | undefined;
+  setNetworkModal: (network: ModalState) => void;
+}
+
+export interface FailedAlertsProps {
+  message: ReturnType<typeof getSwapMessages>;
+}
+
+export type GetStep = { swap: PendingSwap } & 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,101 @@
+import type { CompleteModalPropTypes } from './SwapDetailsModal.types';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  Divider,
+  MessageBox,
+  Modal,
+  TokenAmount,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { navigationRoutes } from '../../constants/navigationRoutes';
+
+export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
+  const {
+    open,
+    onClose,
+    status,
+    priceValue,
+    usdValue,
+    token,
+    chain,
+    percentageChange,
+    description,
+    diagnosisUrl,
+  } = props;
+  const navigate = useNavigate();
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      container={document.getElementById('swap-box') || document.body}>
+      {status === 'success' ? (
+        <MessageBox type="success" title={i18n.t('Swap Successful')}>
+          <TokenAmount
+            direction="vertical"
+            type="output"
+            centerAlign={true}
+            price={{
+              value: priceValue,
+              usdValue,
+            }}
+            token={token}
+            chain={chain}
+            percentageChange={percentageChange}
+          />
+          <Divider size={12} />
+          <Typography
+            variant="body"
+            size="medium"
+            color="neutral900"
+            align="center">
+            {description}
+          </Typography>
+        </MessageBox>
+      ) : (
+        <MessageBox
+          type="error"
+          title={i18n.t('Transaction Failed')}
+          description={description}
+        />
+      )}
+      <Divider size={32} />
+      {status === 'success' && (
+        <Button
+          variant="contained"
+          type="primary"
+          size="large"
+          onClick={() => navigate(navigationRoutes.home)}>
+          <Typography variant="title" size="medium" color="neutral100">
+            {i18n.t('Done')}
+          </Typography>
+        </Button>
+      )}
+      <Divider size={12} />
+      {diagnosisUrl && (
+        <>
+          <Button
+            variant="contained"
+            type="primary"
+            size="large"
+            onClick={() => window.open(diagnosisUrl, '_blank')}>
+            <Typography variant="title" size="medium" color="primary">
+              {i18n.t('Diagnosis')}
+            </Typography>
+          </Button>
+          <Divider size={12} />
+        </>
+      )}
+      <Button variant="outlined" type="primary" size="large" onClick={onClose}>
+        <Typography variant="title" size="medium" color="primary">
+          {i18n.t('See Details')}
+        </Typography>
+      </Button>
+    </Modal>
+  );
+}

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

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

package/src/components/SwapDetailsModal/SwapDetailsModal.Delete.tsx

@@ -0,0 +1,34 @@
+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
+        variant="contained"
+        type="primary"
+        size="large"
+        onClick={onDelete}>
+        <Typography variant="title" size="medium" color="neutral100">
+          {i18n.t('Yes, Delete it')}
+        </Typography>
+      </Button>
+      <Divider size={12} />
+      <Button 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.WalletState.tsx

@@ -0,0 +1,31 @@
+import type { WalletStateContentProps } from './SwapDetailsModal.types';
+
+import { MessageBox, Wallet, WalletState } from '@rango-dev/ui';
+import { useWallets } from '@rango-dev/wallets-react';
+import React from 'react';
+
+import { WalletContainer } from './SwapDetailsModal.styles';
+
+export const WalletStateContent = (props: WalletStateContentProps) => {
+  const { type, title, currentStepWallet, message, showWalletButton } = props;
+  const { connect, getWalletInfo, state: walletState } = useWallets();
+  const walletType = currentStepWallet?.walletType;
+  const isConnected = walletType && walletState(walletType).connected;
+  const state = isConnected ? WalletState.CONNECTED : WalletState.DISCONNECTED;
+  return (
+    <>
+      <MessageBox type={type} title={title} description={message} />
+      {showWalletButton && walletType && (
+        <WalletContainer>
+          <Wallet
+            title={getWalletInfo(walletType).name}
+            image={getWalletInfo(walletType).img}
+            type={walletType}
+            state={state}
+            onClick={async () => connect(walletType)}
+          />
+        </WalletContainer>
+      )}
+    </>
+  );
+};

package/src/components/SwapDetailsModal/SwapDetailsModal.helpers.tsx

@@ -0,0 +1,22 @@
+import type { ModalNetworkValueTypes } from './SwapDetailsModal.types';
+
+import { i18n } from '@lingui/core';
+import { PendingSwapNetworkStatus } from '@rango-dev/queue-manager-rango-preset';
+
+export const modalNetworkValues: Record<
+  Exclude<PendingSwapNetworkStatus, PendingSwapNetworkStatus.WaitingForQueue>,
+  ModalNetworkValueTypes
+> = {
+  [PendingSwapNetworkStatus.WaitingForNetworkChange]: {
+    type: 'loading',
+    title: i18n.t('Change Network'),
+  },
+  [PendingSwapNetworkStatus.WaitingForConnectingWallet]: {
+    type: 'warning',
+    title: i18n.t('Connect Wallet'),
+  },
+  [PendingSwapNetworkStatus.NetworkChanged]: {
+    type: 'success',
+    title: i18n.t('Network Changed'),
+  },
+};

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

@@ -0,0 +1,6 @@
+import { styled } from '@rango-dev/ui';
+
+export const WalletContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+});

package/src/components/SwapDetailsModal/SwapDetailsModal.tsx

@@ -0,0 +1,45 @@
+import type { ModalPropTypes } from './SwapDetailsModal.types';
+
+import { PendingSwapNetworkStatus } from '@rango-dev/queue-manager-rango-preset';
+import { Modal } from '@rango-dev/ui';
+import React from 'react';
+
+import { CancelContent } from './SwapDetailsModal.Cancel';
+import { DeleteContent } from './SwapDetailsModal.Delete';
+import { modalNetworkValues } from './SwapDetailsModal.helpers';
+import { WalletStateContent } from './SwapDetailsModal.WalletState';
+
+export function SwapDetailsModal(props: ModalPropTypes) {
+  const { state, onClose, onDelete, onCancel, currentStepWallet, message } =
+    props;
+
+  const showWalletStateContent =
+    state === PendingSwapNetworkStatus.WaitingForNetworkChange ||
+    state === PendingSwapNetworkStatus.WaitingForConnectingWallet ||
+    state === PendingSwapNetworkStatus.NetworkChanged;
+
+  return (
+    <Modal
+      open={!!state}
+      onClose={onClose}
+      container={document.getElementById('swap-box') || document.body}>
+      {showWalletStateContent && (
+        <WalletStateContent
+          type={modalNetworkValues[state].type}
+          title={modalNetworkValues[state].title}
+          currentStepWallet={currentStepWallet}
+          message={message}
+          showWalletButton={
+            state !== PendingSwapNetworkStatus.WaitingForNetworkChange
+          }
+        />
+      )}
+      {state === 'delete' && (
+        <DeleteContent onClose={onClose} onDelete={onDelete} />
+      )}
+      {state === 'cancel' && (
+        <CancelContent onClose={onClose} onCancel={onCancel} />
+      )}
+    </Modal>
+  );
+}

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

@@ -0,0 +1,54 @@
+import type { PendingSwapNetworkStatus } from '@rango-dev/queue-manager-rango-preset';
+import type { WalletType } from '@rango-dev/wallets-shared';
+
+export type ModalState =
+  | Exclude<PendingSwapNetworkStatus, PendingSwapNetworkStatus.WaitingForQueue>
+  | 'delete'
+  | 'cancel'
+  | null;
+type WalletTypeAndAddress = {
+  walletType: WalletType;
+  address: string;
+};
+export interface ModalPropTypes {
+  onClose: () => void;
+  onCancel: () => void;
+  onDelete: () => void;
+  state: ModalState;
+  currentStepWallet: WalletTypeAndAddress | null;
+  message: string;
+}
+
+export interface CompleteModalPropTypes {
+  open: boolean;
+  onClose: () => void;
+  status: 'success' | 'failed';
+  priceValue: string;
+  usdValue: string;
+  percentageChange: string;
+  chain: {
+    displayName?: string;
+    image: string;
+  };
+  token: {
+    displayName: string;
+    image: string;
+  };
+  description?: string;
+  diagnosisUrl?: string | null;
+}
+
+export interface ModalNetworkValueTypes {
+  type: 'loading' | 'warning' | 'success';
+  title: string;
+}
+
+export interface WalletStateContentProps extends ModalNetworkValueTypes {
+  currentStepWallet: WalletTypeAndAddress | null;
+  message: string;
+  showWalletButton: boolean;
+}
+
+export type CancelContentProps = Pick<ModalPropTypes, 'onClose' | 'onCancel'>;
+
+export type DeleteContentProps = Pick<ModalPropTypes, 'onClose' | 'onDelete'>;

package/src/components/SwapDetailsModal/index.ts

@@ -0,0 +1,3 @@
+export { SwapDetailsModal } from './SwapDetailsModal';
+export { SwapDetailsCompleteModal } from './SwapDetailsCompleteModal';
+export type { ModalState } from './SwapDetailsModal.types';

package/src/components/SwapsGroup/SwapsGroup.styles.ts

@@ -0,0 +1,26 @@
+import { styled } from '@rango-dev/ui';
+
+export const Group = styled('div', {
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const Time = styled('div', {
+  display: 'flex',
+  justifyContent: 'flex-start',
+  padding: '$2',
+});
+
+export const SwapList = styled('div', {
+  gap: '$10',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const NotFoundContainer = styled('div', {
+  height: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});

package/src/components/SwapsGroup/SwapsGroup.tsx

@@ -0,0 +1,125 @@
+import type { PropTypes } from './SwapsGroup.types';
+
+import { Divider, SwapListItem, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { limitDecimalPlaces } from '../../utils/numbers';
+
+import { Group, SwapList, Time } from './SwapsGroup.styles';
+
+export function SwapsGroup(props: PropTypes) {
+  const { list, onSwapClick, groupBy, isLoading } = props;
+  const groups = groupBy ? groupBy(list) : [{ title: 'History', swaps: list }];
+
+  if (isLoading) {
+    const swaps = [{}, {}];
+
+    const loadingGroups = [
+      {
+        title: 'Today',
+        swaps,
+      },
+      {
+        title: 'Last month',
+        swaps,
+      },
+    ];
+    return (
+      <>
+        {loadingGroups.map((group) => (
+          <React.Fragment key={group.title}>
+            <Group>
+              <Time>
+                <Typography
+                  variant="label"
+                  size="medium"
+                  color="neutral800"
+                  className="group-title">
+                  {group.title}
+                </Typography>
+              </Time>
+              <Divider size={4} />
+              <SwapList>
+                {group.swaps.map((_, index) => {
+                  const key = index + group.title;
+                  return (
+                    <React.Fragment key={key}>
+                      <SwapListItem isLoading={true} />
+                    </React.Fragment>
+                  );
+                })}
+              </SwapList>
+            </Group>
+          </React.Fragment>
+        ))}
+      </>
+    );
+  }
+
+  return (
+    <>
+      {groups
+        .filter((group) => group.swaps.length > 0)
+        .map((group) => (
+          <React.Fragment key={group.title}>
+            <Group>
+              <Time>
+                <Typography
+                  variant="label"
+                  size="medium"
+                  color="neutral800"
+                  className="group-title">
+                  {group.title}
+                </Typography>
+              </Time>
+              <Divider size={4} />
+              <SwapList>
+                {group.swaps.map((swap) => {
+                  const firstStep = swap.steps[0];
+                  const lastStep = swap.steps[swap.steps.length - 1];
+                  return (
+                    <React.Fragment key={swap.requestId}>
+                      <SwapListItem
+                        requestId={swap.requestId}
+                        creationTime={swap.creationTime}
+                        status={swap.status}
+                        onClick={onSwapClick}
+                        onlyShowTime={group.title === 'Today'}
+                        swapTokenData={{
+                          from: {
+                            token: {
+                              image: firstStep.fromLogo,
+                              displayName: firstStep.fromSymbol,
+                            },
+                            blockchain: {
+                              image: firstStep.fromBlockchainLogo || '',
+                            },
+                            amount: limitDecimalPlaces(swap.inputAmount),
+                          },
+                          to: {
+                            token: {
+                              image: lastStep.toLogo,
+                              displayName: lastStep.toSymbol,
+                            },
+                            blockchain: {
+                              image: lastStep.toBlockchainLogo || '',
+                            },
+                            amount: limitDecimalPlaces(
+                              lastStep.outputAmount || ''
+                            ),
+                            estimatedAmount: limitDecimalPlaces(
+                              lastStep.expectedOutputAmountHumanReadable || ''
+                            ),
+                          },
+                        }}
+                      />
+                    </React.Fragment>
+                  );
+                })}
+              </SwapList>
+            </Group>
+          </React.Fragment>
+        ))}
+    </>
+  );
+}

package/src/components/SwapsGroup/SwapsGroup.types.ts

@@ -0,0 +1,13 @@
+import type { PendingSwap } from 'rango-types';
+
+export type GroupBy = (list: PendingSwap[]) => {
+  title: string;
+  swaps: PendingSwap[];
+}[];
+
+export interface PropTypes {
+  list: PendingSwap[];
+  onSwapClick: (requestId: string) => void;
+  groupBy?: GroupBy;
+  isLoading: boolean;
+}

package/src/components/SwapsGroup/index.ts

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