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

package/src/components/SwapDetails/SwapDetails.helpers.tsx

@@ -0,0 +1,138 @@
+import type { GetStep } from '../SwapDetailsAlerts';
+import type { Step, StepDetailsProps } from '@rango-dev/ui';
+import type { PendingSwapStep, SwapperType } from 'rango-types';
+
+import React from 'react';
+
+import {
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+} from '../../constants/routing';
+import {
+  getBlockchainShortNameFor,
+  getSwapperDisplayName,
+} from '../../utils/meta';
+import { numberToString } from '../../utils/numbers';
+import { isNetworkStatusInWarningState } from '../../utils/swap';
+import { SwapDetailsAlerts } from '../SwapDetailsAlerts';
+
+export const RESET_INTERVAL = 2_000;
+export const SECONDS = 60;
+
+export const getSteps = ({
+  swap,
+  blockchains,
+  swappers,
+  ...args
+}: GetStep): Step[] => {
+  const hasAlreadyProceededToSign = swap.hasAlreadyProceededToSign !== false;
+  return swap.steps.map((step, index) => {
+    const amountToConvert =
+      index === 0
+        ? swap.inputAmount
+        : swap.steps[index - 1]?.outputAmount ||
+          swap.steps[index - 1]?.expectedOutputAmountHumanReadable;
+    return {
+      from: {
+        token: { displayName: step.fromSymbol, image: step.fromLogo ?? '' },
+        chain: {
+          displayName:
+            getBlockchainShortNameFor(step.fromBlockchain, blockchains) ?? '',
+          image: step.fromBlockchainLogo ?? '',
+        },
+        price: {
+          value: numberToString(
+            amountToConvert,
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
+          ),
+          realValue: amountToConvert ?? '',
+        },
+      },
+      to: {
+        token: { displayName: step.toSymbol, image: step.toLogo },
+        chain: {
+          displayName:
+            getBlockchainShortNameFor(step.toBlockchain, blockchains) ?? '',
+          image: step.toBlockchainLogo ?? '',
+        },
+        price: {
+          value: numberToString(
+            step.outputAmount || step.expectedOutputAmountHumanReadable,
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
+          ),
+          realValue:
+            step.outputAmount || step.expectedOutputAmountHumanReadable || '',
+        },
+      },
+      swapper: {
+        displayName: getSwapperDisplayName(step.swapperId, swappers) ?? '',
+        image: step.swapperLogo ?? '',
+        type: step.swapperType as SwapperType,
+      },
+      internalSwaps: step.internalSwaps
+        ? step.internalSwaps.map((internalSwap) => {
+            return {
+              from: {
+                chain: {
+                  displayName:
+                    getBlockchainShortNameFor(
+                      internalSwap.fromBlockchain,
+                      blockchains
+                    ) ?? '',
+                  image: internalSwap.fromBlockchainLogo ?? '',
+                },
+              },
+              to: {
+                chain: {
+                  displayName:
+                    getBlockchainShortNameFor(
+                      internalSwap.toBlockchain,
+                      blockchains
+                    ) ?? '',
+                  image: internalSwap.toBlockchainLogo ?? '',
+                },
+              },
+              swapper: {
+                displayName:
+                  getSwapperDisplayName(internalSwap.swapperId, swappers) ?? '',
+                image: internalSwap.swapperLogo ?? '',
+                type: internalSwap.swapperType as SwapperType,
+              },
+            };
+          })
+        : [],
+      alerts: (
+        <SwapDetailsAlerts
+          step={step}
+          hasAlreadyProceededToSign={hasAlreadyProceededToSign}
+          {...args}
+        />
+      ),
+    };
+  });
+};
+
+export function getStepState(step: PendingSwapStep): StepDetailsProps['state'] {
+  if (
+    isNetworkStatusInWarningState(step) &&
+    step.status !== 'failed' &&
+    step.status !== 'success'
+  ) {
+    return 'warning';
+  }
+
+  switch (step.status) {
+    case 'created':
+      return 'default';
+    case 'approved':
+    case 'waitingForApproval':
+    case 'running':
+      return 'in-progress';
+    case 'failed':
+      return 'error';
+    case 'success':
+      return 'completed';
+  }
+}

package/src/components/SwapDetails/SwapDetails.styles.ts

@@ -0,0 +1,115 @@
+import { css, darkTheme, styled, Typography } from '@rango-dev/ui';
+
+import { PageContainer } from '../Layout';
+
+export const Container = styled(PageContainer, {
+  overflowY: 'auto',
+
+  '& ._icon-button': {
+    '&:hover': {
+      '& svg': {
+        color: '$secondary550',
+        [`.${darkTheme} &`]: {
+          color: '$secondary500',
+        },
+      },
+    },
+  },
+});
+
+export const SkeletonContainer = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1,
+  overflow: 'hidden',
+});
+
+export const RequestIdContainer = styled('div', {
+  position: 'sticky',
+  top: 0,
+  zIndex: 10,
+  backgroundColor: '$background',
+});
+
+export const StepsList = styled('div', {
+  padding: '$0 $20 $20 $20',
+});
+
+export const Alerts = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '$10',
+});
+
+export const PlaceholderContainer = styled('div', {
+  height: '450px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const LoaderContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  paddingTop: '33%',
+  flex: 1,
+});
+
+export const rowStyles = css({
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '$10 $20',
+  borderBottom: '1px solid',
+  $$color: '$colors$neutral300',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral400',
+  },
+  borderColor: '$$color',
+  color: '$neutral500',
+});
+
+export const datePlaceholderStyles = css({
+  padding: '$5 0',
+});
+
+export const requestIdStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '$24',
+});
+
+export const outputStyles = css({
+  display: 'flex',
+  width: '100%',
+  padding: '$15 $20 $20',
+  flexDirection: 'column',
+  alignItems: 'start',
+});
+
+export const titleStepsStyles = css({
+  width: '100%',
+  padding: '0 $20 $10',
+});
+
+export const StyledLink = styled('a', {
+  fontSize: '$16',
+  fontWeight: '$400',
+  color: '$neutral700',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const ErrorMessages = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '$5',
+});
+
+export const MessageText = styled(Typography, {
+  wordBreak: 'break-word',
+});