@rango-dev/widget-embedded 0.12.1-next.7 → 0.12.1-next.9

package/src/components/SwapDetails/SwapDetails.tsx

@@ -0,0 +1,387 @@
+import type { SwapDetailsProps } from './SwapDetails.types';
+import type { ModalState } from '../SwapDetailsModal';
+
+import { i18n } from '@lingui/core';
+import {
+  getCurrentBlockchainOfOrNull,
+  getCurrentStep,
+  getRelatedWalletOrNull,
+  PendingSwapNetworkStatus,
+} from '@rango-dev/queue-manager-rango-preset';
+import {
+  Button,
+  CopyIcon,
+  Divider,
+  IconButton,
+  RouteCost,
+  StepDetails,
+  TokenAmount,
+  Typography,
+  useCopyToClipboard,
+} from '@rango-dev/ui';
+import { useWallets } from '@rango-dev/wallets-react';
+import React, { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import { useNavigateBack } from '../../hooks/useNavigateBack';
+import { useBestRouteStore } from '../../store/bestRoute';
+import { useMetaStore } from '../../store/meta';
+import { numberToString } from '../../utils/numbers';
+import {
+  getLastConvertedTokenInFailedSwap,
+  getPercentageChange,
+  getSwapMessages,
+  shouldRetrySwap,
+} from '../../utils/swap';
+import { getSwapDate } from '../../utils/time';
+import { getConciseAddress, getUsdPrice } from '../../utils/wallets';
+import { SuffixContainer } from '../HeaderButtons/HeaderButtons.styles';
+import { Layout } from '../Layout';
+import {
+  SwapDetailsCompleteModal,
+  SwapDetailsModal,
+} from '../SwapDetailsModal';
+
+import {
+  AMOUNT_DECIMALS,
+  getPriceImpactWarningLevel,
+  getSteps,
+  getStepState,
+  MIN_DECIMALS,
+  PERCENT_DECIMALS,
+  RESET_INTERVAL,
+  SECONDS,
+} from './SwapDetails.helpers';
+import {
+  Container,
+  HeaderDetails,
+  Separator,
+  StepsList,
+} from './SwapDetails.styles';
+
+export function SwapDetails(props: SwapDetailsProps) {
+  const { swap, requestId, onDelete, onCancel: onCancelProps } = props;
+  const { tokens } = useMetaStore.use.meta();
+  const { canSwitchNetworkTo, connect, getWalletInfo } = useWallets();
+  const retry = useBestRouteStore.use.retry();
+  const navigate = useNavigate();
+  const { navigateBackFrom } = useNavigateBack();
+  const listRef = useRef(null);
+  const [_, handleCopy] = useCopyToClipboard(RESET_INTERVAL);
+  const [modalState, setModalState] = useState<ModalState>(null);
+  const [showCompletedModal, setShowCompletedModal] = useState<
+    'success' | 'failed' | null
+  >(null);
+
+  const onCancel = () => {
+    onCancelProps();
+    setModalState(null);
+  };
+
+  const currentStep = getCurrentStep(swap);
+  const currentStepNetworkStatus = currentStep?.networkStatus;
+
+  useEffect(() => {
+    if (swap.status === 'success' || swap.status === 'failed') {
+      setShowCompletedModal(swap.status);
+    }
+  }, [swap.status]);
+
+  useEffect(() => {
+    if (showSwitchNetwork) {
+      setModalState(PendingSwapNetworkStatus.WaitingForNetworkChange);
+    } else if (
+      currentStepNetworkStatus ===
+        PendingSwapNetworkStatus.WaitingForConnectingWallet ||
+      currentStepNetworkStatus === PendingSwapNetworkStatus.NetworkChanged
+    ) {
+      setModalState(currentStepNetworkStatus);
+    } else {
+      setModalState(null);
+    }
+  }, [currentStepNetworkStatus]);
+
+  const lastConvertedTokenInFailedSwap =
+    getLastConvertedTokenInFailedSwap(swap);
+
+  const currentStepBlockchain = currentStep
+    ? getCurrentBlockchainOfOrNull(swap, currentStep)
+    : null;
+  const currentStepWallet = currentStep
+    ? getRelatedWalletOrNull(swap, currentStep)
+    : null;
+
+  const swapDate = getSwapDate(swap);
+  const shouldRetry = shouldRetrySwap(swap);
+
+  const isMobileWallet = (walletType: string): boolean =>
+    !!getWalletInfo(walletType)?.mobileWallet;
+
+  const showSwitchNetwork =
+    currentStepNetworkStatus ===
+      PendingSwapNetworkStatus.WaitingForNetworkChange &&
+    !!currentStepBlockchain &&
+    !!currentStepWallet?.walletType &&
+    (isMobileWallet(currentStepWallet.walletType) ||
+      canSwitchNetworkTo(currentStepWallet.walletType, currentStepBlockchain));
+
+  const switchNetwork = showSwitchNetwork
+    ? connect.bind(null, currentStepWallet.walletType, currentStepBlockchain)
+    : undefined;
+
+  const stepMessage = getSwapMessages(swap, currentStep);
+  const steps = getSteps({
+    swap,
+    switchNetwork,
+    showNetworkModal: currentStepNetworkStatus,
+    setNetworkModal: setModalState,
+    message: stepMessage,
+  });
+  const numberOfSteps = steps.length;
+  const [firstStep, lastStep] = [swap.steps[0], swap.steps[numberOfSteps - 1]];
+  const outputAmount =
+    lastStep.outputAmount || lastStep.expectedOutputAmountHumanReadable;
+  const percentageChange =
+    swap.inputAmount && outputAmount
+      ? getPercentageChange(swap.inputAmount, outputAmount)
+      : null;
+
+  const totalFee = swap.steps.reduce(
+    (totalFee, steps) => totalFee + parseFloat(steps.feeInUsd || ''),
+    0
+  );
+
+  const totalTime = swap.steps.reduce(
+    (totalTime, step) => totalTime + (step.estimatedTimeInSeconds || 0),
+    0
+  );
+
+  const minutes = Math.floor(totalTime / SECONDS);
+
+  const diagnosisUrl = swap.steps.find(
+    (step) => step.diagnosisUrl
+  )?.diagnosisUrl;
+
+  const outputUsdValue = numberToString(
+    String(
+      parseFloat(numberToString(outputAmount, MIN_DECIMALS, AMOUNT_DECIMALS)) *
+        (getUsdPrice(
+          lastStep.toBlockchain,
+          lastStep.toSymbol,
+          lastStep.toSymbolAddress,
+          tokens
+        ) || 0)
+    ),
+    MIN_DECIMALS,
+    AMOUNT_DECIMALS
+  );
+
+  const completeModalDesc =
+    showCompletedModal === 'success'
+      ? `You have recieved ${numberToString(
+          outputAmount,
+          MIN_DECIMALS,
+          AMOUNT_DECIMALS
+        )} ${
+          steps[numberOfSteps - 1].to.token.displayName
+        } in ${getConciseAddress(
+          swap.wallets[steps[numberOfSteps - 1].to.chain.displayName]
+            ?.address || ''
+        )} wallet on ${steps[numberOfSteps - 1].to.chain.displayName} chain.`
+      : `${i18n.t('Transaction was not sent.')} ${
+          lastConvertedTokenInFailedSwap
+            ? `${lastConvertedTokenInFailedSwap.outputAmount}  ${lastConvertedTokenInFailedSwap.symbol} on ${lastConvertedTokenInFailedSwap.blockchain} remain in your wallet`
+            : ''
+        }`;
+
+  return (
+    <Layout
+      noPadding
+      header={{
+        title: i18n.t('Swap and Bridge'),
+        onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
+        onCancel:
+          swap.status === 'running' ? () => setModalState('cancel') : undefined,
+        suffix: swap.status !== 'running' && (
+          <SuffixContainer>
+            <Button
+              variant="ghost"
+              type="error"
+              size="xsmall"
+              onClick={() => setModalState('delete')}>
+              <Typography size="medium" variant="label" color="error">
+                {i18n.t('Delete')}
+              </Typography>
+            </Button>
+          </SuffixContainer>
+        ),
+      }}
+      footer={
+        shouldRetry &&
+        !showCompletedModal && (
+          <Button
+            fullWidth
+            variant="contained"
+            type="primary"
+            size="large"
+            onClick={() => {
+              retry(swap);
+              setTimeout(() => {
+                navigate(navigationRoutes.home);
+              }, 0);
+            }}>
+            {i18n.t('Try again')}
+          </Button>
+        )
+      }>
+      <Container>
+        <HeaderDetails>
+          <div className="row">
+            <Typography variant="label" size="large" color="neutral900">
+              {`${i18n.t('Request ID')}:`}
+            </Typography>
+            <div className="request-id">
+              <Typography variant="label" size="small" color="neutral900">
+                {requestId}
+              </Typography>
+              <IconButton
+                variant="ghost"
+                onClick={handleCopy.bind(null, requestId || '')}>
+                <CopyIcon size={16} color="gray" />
+              </IconButton>
+            </div>
+          </div>
+          <div className="row">
+            <Typography variant="label" size="large" color="neutral900">
+              {`${i18n.t('Created at')}:`}
+            </Typography>
+            <Typography variant="label" size="small" color="neutral900">
+              {swapDate}
+            </Typography>
+          </div>
+        </HeaderDetails>
+        <div className="output">
+          <RouteCost
+            fee={numberToString(
+              String(totalFee),
+              AMOUNT_DECIMALS,
+              AMOUNT_DECIMALS
+            )}
+            time={minutes}
+            steps={numberOfSteps}
+          />
+          <TokenAmount
+            direction="horizontal"
+            type="input"
+            price={{
+              value: numberToString(
+                swap.inputAmount,
+                AMOUNT_DECIMALS,
+                AMOUNT_DECIMALS
+              ),
+              usdValue: numberToString(
+                String(
+                  parseFloat(swap.inputAmount) *
+                    (getUsdPrice(
+                      firstStep.fromBlockchain,
+                      firstStep.fromSymbol,
+                      firstStep.fromSymbolAddress,
+                      tokens
+                    ) || 0)
+                ),
+                MIN_DECIMALS,
+                AMOUNT_DECIMALS
+              ),
+            }}
+            token={{
+              displayName: steps[0].from.token.displayName,
+              image: steps[0].from.token.image,
+            }}
+            chain={{ image: steps[0].from.chain.image }}
+          />
+          <Separator />
+          <TokenAmount
+            direction="horizontal"
+            type="output"
+            price={{
+              value: numberToString(
+                outputAmount,
+                MIN_DECIMALS,
+                AMOUNT_DECIMALS
+              ),
+              usdValue: outputUsdValue,
+            }}
+            token={{
+              displayName: steps[numberOfSteps - 1].to.token.displayName,
+              image: steps[numberOfSteps - 1].to.token.image,
+            }}
+            chain={{ image: steps[numberOfSteps - 1].to.chain.image }}
+            percentageChange={numberToString(
+              percentageChange,
+              PERCENT_DECIMALS,
+              PERCENT_DECIMALS
+            )}
+            warningLevel={getPriceImpactWarningLevel(percentageChange)}
+          />
+        </div>
+        <div className="title-steps">
+          <Typography variant="title" size="small">
+            {i18n.t('Swaps steps')}
+          </Typography>
+        </div>
+        <Divider size={8} />
+        <StepsList ref={listRef}>
+          {steps.map((step, index) => {
+            const key = index;
+            const state = getStepState(swap.steps[index]);
+            const isFocused =
+              state === 'error' ||
+              state === 'in-progress' ||
+              state === 'warning' ||
+              (state === 'completed' && index === steps.length - 1);
+            return (
+              <StepDetails
+                key={key}
+                step={step}
+                type="route-progress"
+                ref={listRef}
+                state={state}
+                hasSeparator={index !== 0}
+                tabIndex={key}
+                isFocused={isFocused}
+              />
+            );
+          })}
+        </StepsList>
+      </Container>
+      <SwapDetailsModal
+        state={modalState}
+        onClose={() => setModalState(null)}
+        onCancel={onCancel}
+        onDelete={onDelete}
+        message={stepMessage.detailedMessage.content}
+        currentStepWallet={currentStepWallet}
+      />
+      <SwapDetailsCompleteModal
+        open={!!showCompletedModal}
+        diagnosisUrl={diagnosisUrl}
+        onClose={() => setShowCompletedModal(null)}
+        status={showCompletedModal}
+        priceValue={numberToString(outputAmount, MIN_DECIMALS, AMOUNT_DECIMALS)}
+        usdValue={outputUsdValue}
+        percentageChange={numberToString(
+          percentageChange,
+          PERCENT_DECIMALS,
+          PERCENT_DECIMALS
+        )}
+        token={{
+          displayName: steps[numberOfSteps - 1].to.token.displayName,
+          image: steps[numberOfSteps - 1].to.token.image,
+        }}
+        chain={{ image: steps[numberOfSteps - 1].to.chain.image }}
+        description={completeModalDesc}
+      />
+    </Layout>
+  );
+}

package/src/components/SwapDetails/SwapDetails.types.ts

@@ -0,0 +1,12 @@
+import type { PendingSwap } from 'rango-types';
+
+export interface SwapDetailsProps {
+  swap: PendingSwap;
+  requestId: string;
+  onDelete: () => void;
+  onCancel: () => void;
+}
+export interface SwapDetailsPlaceholderPropTypes {
+  requestId: string;
+  loading: boolean;
+}

package/src/components/SwapDetails/index.ts

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

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.Failed.tsx

@@ -0,0 +1,36 @@
+import type { FailedAlertsProps } from './SwapDetailsAlerts.types';
+
+import {
+  Alert,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  IconButton,
+} from '@rango-dev/ui';
+import React, { useState } from 'react';
+
+export function FailedAlert(props: FailedAlertsProps) {
+  const { message } = props;
+  const [showContentError, setShowContentError] = useState(false);
+
+  return (
+    <Alert
+      type="error"
+      title={message.shortMessage}
+      action={
+        message.detailedMessage.content && (
+          <IconButton
+            onClick={() => setShowContentError((prev) => !prev)}
+            variant="ghost"
+            size="xsmall">
+            {showContentError ? (
+              <ChevronUpIcon size={12} color="gray" />
+            ) : (
+              <ChevronDownIcon size={12} color="gray" />
+            )}
+          </IconButton>
+        )
+      }
+      footer={showContentError ? message.detailedMessage.content : undefined}
+    />
+  );
+}

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.Warning.tsx

@@ -0,0 +1,55 @@
+import type { WaningAlertsProps } from './SwapDetailsAlerts.types';
+
+import { i18n } from '@lingui/core';
+import { PendingSwapNetworkStatus } from '@rango-dev/queue-manager-rango-preset';
+import { Alert, Button } from '@rango-dev/ui';
+import React from 'react';
+
+export function WarningAlert(props: WaningAlertsProps) {
+  const { switchNetwork, setNetworkModal, message, showNetworkModal } = props;
+  if (!!switchNetwork) {
+    return (
+      <Alert
+        type="warning"
+        title={message.shortMessage}
+        action={
+          <Button
+            size="xxsmall"
+            type="warning"
+            onClick={() => {
+              setNetworkModal(PendingSwapNetworkStatus.WaitingForNetworkChange);
+              switchNetwork().catch((e) => {
+                console.log(e);
+              });
+            }}>
+            {i18n.t('Change')}
+          </Button>
+        }
+      />
+    );
+  }
+  if (
+    showNetworkModal === PendingSwapNetworkStatus.WaitingForConnectingWallet
+  ) {
+    return (
+      <Alert
+        type="warning"
+        title={message.shortMessage}
+        action={
+          <Button
+            size="xxsmall"
+            type="warning"
+            onClick={() => {
+              setNetworkModal(
+                PendingSwapNetworkStatus.WaitingForConnectingWallet
+              );
+            }}>
+            {i18n.t('Connect')}
+          </Button>
+        }
+      />
+    );
+  }
+
+  return <Alert type="warning" title={message.shortMessage} />;
+}

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

@@ -0,0 +1,7 @@
+import { styled } from '@rango-dev/ui';
+
+export const Alerts = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '$10',
+});

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';