@rango-dev/widget-embedded 0.20.1-next.12 → 0.20.1-next.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.20.1-next.12",
+  "version": "0.20.1-next.13",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,7 +25,7 @@
     "@rango-dev/queue-manager-core": "^0.25.0",
     "@rango-dev/queue-manager-rango-preset": "^0.25.1-next.1",
     "@rango-dev/queue-manager-react": "^0.24.0",
-    "@rango-dev/ui": "^0.26.1-next.6",
+    "@rango-dev/ui": "^0.26.1-next.7",
     "@rango-dev/wallets-react": "^0.11.1-next.1",
     "@rango-dev/wallets-shared": "^0.25.1-next.1",
     "bignumber.js": "^9.1.1",

package/src/components/SwapDetails/SwapDetails.Placeholder.tsx

@@ -1,13 +1,7 @@
 import type { SwapDetailsPlaceholderPropTypes } from './SwapDetails.types';
 
 import { i18n } from '@lingui/core';
-import {
-  CopyIcon,
-  IconButton,
-  NotFound,
-  Skeleton,
-  Typography,
-} from '@rango-dev/ui';
+import { Divider, NotFound, Skeleton, Typography } from '@rango-dev/ui';
 import React from 'react';
 
 import { SuffixContainer } from '../HeaderButtons/HeaderButtons.styles';
@@ -16,6 +10,7 @@ import { LoadingSwapDetails } from '../LoadingSwapDetails';
 
 import {
   Container,
+  datePlaceholderStyles,
   HeaderDetails,
   PlaceholderContainer,
   requestIdStyles,
@@ -42,14 +37,19 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
                 <Typography variant="label" size="small" color="neutral700">
                   <Skeleton width={60} height={10} variant="rounded" />
                 </Typography>
-                <IconButton variant="ghost">
-                  <CopyIcon size={16} color="gray" />
-                </IconButton>
+                <Divider direction="horizontal" size={4} />
+                <Skeleton width={16} height={16} variant="rectangular" />
+                <Divider direction="horizontal" size={4} />
+                <Skeleton width={16} height={16} variant="rectangular" />
               </div>
             </div>
             <div className={rowStyles()}>
-              <Typography variant="label" size="large" color="neutral700">
-                {`${i18n.t('Created at')}:`}
+              <Typography
+                className={datePlaceholderStyles()}
+                variant="label"
+                size="large"
+                color="neutral700">
+                <Skeleton width={60} height={10} variant="rounded" />
               </Typography>
               <Typography variant="label" size="small" color="neutral700">
                 <Skeleton width={60} height={10} variant="rounded" />

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

@@ -8,7 +8,10 @@ import {
   TOKEN_AMOUNT_MAX_DECIMALS,
   TOKEN_AMOUNT_MIN_DECIMALS,
 } from '../../constants/routing';
-import { getBlockchainShortNameFor } from '../../utils/meta';
+import {
+  getBlockchainShortNameFor,
+  getSwapperDisplayName,
+} from '../../utils/meta';
 import { numberToString } from '../../utils/numbers';
 import { isNetworkStatusInWarningState } from '../../utils/swap';
 import { SwapDetailsAlerts } from '../SwapDetailsAlerts';
@@ -16,7 +19,12 @@ import { SwapDetailsAlerts } from '../SwapDetailsAlerts';
 export const RESET_INTERVAL = 2_000;
 export const SECONDS = 60;
 
-export const getSteps = ({ swap, blockchains, ...args }: GetStep): Step[] => {
+export const getSteps = ({
+  swap,
+  blockchains,
+  swappers,
+  ...args
+}: GetStep): Step[] => {
   const hasAlreadyProceededToSign = swap.hasAlreadyProceededToSign !== false;
   return swap.steps.map((step, index) => {
     const amountToConvert =
@@ -58,7 +66,39 @@ export const getSteps = ({ swap, blockchains, ...args }: GetStep): Step[] => {
             step.outputAmount || step.expectedOutputAmountHumanReadable,
         },
       },
-      swapper: { displayName: step.swapperId, image: step.swapperLogo ?? '' },
+      swapper: {
+        displayName: getSwapperDisplayName(step.swapperId, swappers),
+        image: step.swapperLogo ?? '',
+        type: step.swapperType,
+      },
+      internalSwaps: step.internalSwaps
+        ? step.internalSwaps.map((internalSwap) => {
+            return {
+              from: {
+                blockchain:
+                  getBlockchainShortNameFor(
+                    internalSwap.fromBlockchain,
+                    blockchains
+                  ) ?? '',
+              },
+              to: {
+                blockchain:
+                  getBlockchainShortNameFor(
+                    internalSwap.toBlockchain,
+                    blockchains
+                  ) ?? '',
+              },
+              swapper: {
+                displayName: getSwapperDisplayName(
+                  internalSwap.swapperId,
+                  swappers
+                ),
+                image: internalSwap.swapperLogo ?? '',
+                type: internalSwap.swapperType,
+              },
+            };
+          })
+        : [],
       alerts: (
         <SwapDetailsAlerts
           step={step}

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

@@ -54,6 +54,10 @@ export const rowStyles = css({
   color: '$neutral500',
 });
 
+export const datePlaceholderStyles = css({
+  padding: '$5 0',
+});
+
 export const requestIdStyles = css({
   display: 'flex',
   justifyContent: 'center',
@@ -73,3 +77,12 @@ 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',
+});

package/src/components/SwapDetails/SwapDetails.tsx

@@ -12,6 +12,7 @@ import {
   CopyIcon,
   Divider,
   IconButton,
+  LinkIcon,
   QuoteCost,
   StepDetails,
   Typography,
@@ -23,6 +24,7 @@ import { PendingSwapNetworkStatus } from 'rango-types';
 import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { SCANNER_BASE_URL } from '../../constants';
 import {
   GAS_FEE_MAX_DECIMALS,
   GAS_FEE_MIN_DECIMALS,
@@ -67,6 +69,7 @@ import {
   requestIdStyles,
   rowStyles,
   StepsList,
+  StyledLink,
   titleStepsStyles,
 } from './SwapDetails.styles';
 
@@ -74,6 +77,7 @@ export function SwapDetails(props: SwapDetailsProps) {
   const { swap, requestId, onDelete, onCancel: onCancelProps } = props;
   const { canSwitchNetworkTo, connect, getWalletInfo } = useWallets();
   const blockchains = useAppStore().blockchains();
+  const swappers = useAppStore().swappers();
   const tokens = useAppStore().tokens();
   const retry = useQuoteStore.use.retry();
   const navigate = useNavigate();
@@ -158,6 +162,7 @@ export function SwapDetails(props: SwapDetailsProps) {
     setNetworkModal: setModalState,
     message: stepMessage,
     blockchains: blockchains,
+    swappers: swappers,
   });
   const numberOfSteps = steps.length;
   const [firstStep, lastStep] = [swap.steps[0], swap.steps[numberOfSteps - 1]];
@@ -289,6 +294,11 @@ export function SwapDetails(props: SwapDetailsProps) {
                 onClick={handleCopy.bind(null, requestId || '')}>
                 <CopyIcon size={16} color="gray" />
               </IconButton>
+              <StyledLink
+                target="_blank"
+                href={`${SCANNER_BASE_URL}/swap/${requestId}`}>
+                <LinkIcon size={16} />
+              </StyledLink>
             </div>
           </div>
           <div className={rowStyles()}>

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.tsx

@@ -24,18 +24,27 @@ export function SwapDetailsAlerts(props: SwapAlertsProps) {
   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;
+        const loading =
+          ((lastUrl && inProgress) || waitingForApproval) && !waitingProgress;
         const error = lastUrl && step.status === 'failed';
 
         return (
           <Fragment key={key}>
             <Alert
-              type={(loading && 'loading') || (error && 'error') || 'success'}
+              type={
+                lastUrl
+                  ? (loading && 'loading') || (error && 'error') || 'success'
+                  : 'success'
+              }
               title={
                 !explorerUrl.description
                   ? i18n.t('View transaction')
@@ -47,7 +56,7 @@ export function SwapDetailsAlerts(props: SwapAlertsProps) {
                     variant="ghost"
                     size="xsmall"
                     onClick={() => window.open(explorerUrl.url, '_blank')}>
-                    <LinkIcon size={16} />
+                    <LinkIcon size={12} />
                   </IconButton>
                 )
               }
@@ -55,10 +64,7 @@ export function SwapDetailsAlerts(props: SwapAlertsProps) {
           </Fragment>
         );
       })}
-      {((inProgress && !hasAlreadyProceededToSign) ||
-        (waitingForApproval && !step.explorerUrl?.length)) && (
-        <Alert type="loading" title={message.shortMessage} />
-      )}
+      {waitingProgress && <Alert type="loading" title={message.shortMessage} />}
       {step.status !== 'failed' && hasWarning && (
         <WarningAlert
           switchNetwork={switchNetwork}

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

@@ -6,6 +6,7 @@ import type {
   PendingSwap,
   PendingSwapNetworkStatus,
   PendingSwapStep,
+  SwapperMeta,
 } from 'rango-types';
 
 export interface SwapAlertsProps extends WaningAlertsProps {
@@ -26,4 +27,5 @@ export interface FailedAlertsProps {
 export type GetStep = {
   swap: PendingSwap;
   blockchains: BlockchainMeta[];
+  swappers: SwapperMeta[];
 } & Omit<SwapAlertsProps, 'step' | 'hasAlreadyProceededToSign'>;

package/src/constants/index.ts

@@ -1,3 +1,4 @@
 export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
 export const DEFAULT_BASE_URL = 'https://api.rango.exchange';
 export const RANGO_SWAP_BOX_ID = 'rango-swap-box';
+export const SCANNER_BASE_URL = 'https://scan.rango.exchange';