@rango-dev/ui 0.26.1-next.6 → 0.26.1-next.8

package/dist/translations/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../translations/en.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAozX,CAAC"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../translations/en.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAm3X,CAAC"}

package/dist/translations/es.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"es.d.ts","sourceRoot":"","sources":["../../../../translations/es.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAA+nZ,CAAC"}
+{"version":3,"file":"es.d.ts","sourceRoot":"","sources":["../../../../translations/es.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAA+rZ,CAAC"}

package/dist/translations/fr.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fr.d.ts","sourceRoot":"","sources":["../../../../translations/fr.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAqwZ,CAAC"}
+{"version":3,"file":"fr.d.ts","sourceRoot":"","sources":["../../../../translations/fr.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAu0Z,CAAC"}

package/dist/translations/ja.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ja.d.ts","sourceRoot":"","sources":["../../../../translations/ja.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAkkU,CAAC"}
+{"version":3,"file":"ja.d.ts","sourceRoot":"","sources":["../../../../translations/ja.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAuoU,CAAC"}

package/dist/widget/ui/src/components/StepDetails/StepDetails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepDetails.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetails/StepDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG5D,OAAO,KAA8C,MAAM,OAAO,CAAC;AAyHnE,eAAO,MAAM,WAAW,oHAA6B,CAAC"}
+{"version":3,"file":"StepDetails.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetails/StepDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG1E,OAAO,KAAwD,MAAM,OAAO,CAAC;AA2K7E,eAAO,MAAM,WAAW,oHAA6B,CAAC"}

package/dist/widget/ui/src/components/StepDetails/StepDetails.styles.d.ts

@@ -643,6 +643,167 @@ export declare const DashedLine: import("@stitches/react/types/styled-component"
     zIndices: {};
     transitions: {};
 }, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
+export declare const SwapperSeparator: import("@stitches/react/types/styled-component").StyledComponent<"div", {
+    state?: "warning" | "error" | "default" | "in-progress" | "completed" | undefined;
+}, {
+    sm: string;
+    md: string;
+    lg: string;
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+}, {
+    colors: {
+        primary: string;
+        primary500: string;
+        primary600: string;
+        secondary: string;
+        secondary100: string;
+        secondary200: string;
+        secondary300: string;
+        secondary400: string;
+        secondary500: string;
+        secondary600: string;
+        secondary700: string;
+        secondary800: string;
+        secondary900: string;
+        neutral: string;
+        neutral100: string;
+        neutral200: string;
+        neutral300: string;
+        neutral400: string;
+        neutral500: string;
+        neutral600: string;
+        neutral700: string;
+        neutral800: string;
+        neutral900: string;
+        error100: string;
+        error300: string;
+        error500: string;
+        error600: string;
+        error700: string;
+        warning100: string;
+        warning300: string;
+        warning500: string;
+        warning600: string;
+        warning700: string;
+        info: string;
+        info100: string;
+        info300: string;
+        info500: string;
+        info600: string;
+        info700: string;
+        success100: string;
+        success300: string;
+        success500: string;
+        success600: string;
+        success700: string;
+        background: string;
+        foreground: string;
+    };
+    space: {
+        0: string;
+        5: string;
+        10: string;
+        15: string;
+        20: string;
+        25: string;
+        30: string;
+        40: string;
+        46: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+        2: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+        28: string;
+        32: string;
+    };
+    radii: {
+        xs: string;
+        sm: string;
+        xm: string;
+        md: string;
+        xl: string;
+        lg: string;
+        primary: string;
+        secondary: string;
+    };
+    fontSizes: {
+        10: string;
+        12: string;
+        14: string;
+        16: string;
+        18: string;
+        20: string;
+        22: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        48: string;
+    };
+    fonts: {
+        primary: string;
+        widget: string;
+    };
+    fontWeights: {
+        regular: number;
+        medium: number;
+        semiBold: number;
+        bold: number;
+    };
+    lineHeights: {
+        12: string;
+        16: string;
+        20: string;
+        24: string;
+        26: string;
+        28: string;
+        30: string;
+        36: string;
+        40: string;
+        44: string;
+        52: string;
+        64: string;
+    };
+    letterSpacings: {};
+    sizes: {
+        4: string;
+        6: string;
+        8: string;
+        10: string;
+        12: string;
+        16: string;
+        18: string;
+        20: string;
+        24: string;
+        28: string;
+        30: string;
+        32: string;
+        36: string;
+        40: string;
+        45: string;
+        48: string;
+    };
+    borderWidths: {};
+    borderStyles: {};
+    shadows: {
+        s: string;
+    };
+    zIndices: {};
+    transitions: {};
+}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
 export declare const StepSeparator: import("@stitches/react/types/styled-component").StyledComponent<"div", {
     state?: "warning" | "error" | "default" | "in-progress" | "completed" | undefined;
 }, {
@@ -805,7 +966,8 @@ export declare const StepSeparator: import("@stitches/react/types/styled-compone
     transitions: {};
 }, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
 export declare const tokensContainerStyles: import("@stitches/react/types/styled-component").CssComponent<never, {}, {}, import("@stitches/react/types/css-util").CSS<{}, {}, {}, {}>>;
-export declare const swapperStyles: import("@stitches/react/types/styled-component").CssComponent<never, {}, {}, import("@stitches/react/types/css-util").CSS<{}, {}, {}, {}>>;
+export declare const swappersStyles: import("@stitches/react/types/styled-component").CssComponent<never, {}, {}, import("@stitches/react/types/css-util").CSS<{}, {}, {}, {}>>;
+export declare const swapperItemStyles: import("@stitches/react/types/styled-component").CssComponent<never, {}, {}, import("@stitches/react/types/css-util").CSS<{}, {}, {}, {}>>;
 export declare const stepInfoStyles: import("@stitches/react/types/styled-component").CssComponent<never, {
     tx?: boolean | "true" | undefined;
 }, {}, import("@stitches/react/types/css-util").CSS<{}, {}, {}, {}>>;

package/dist/widget/ui/src/components/StepDetails/StepDetails.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepDetails.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetails/StepDetails.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAmCpB,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAmBvB,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DASjB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAarB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAsBxB,CAAC;AAEH,eAAO,MAAM,qBAAqB,4IAEhC,CAAC;AAEH,eAAO,MAAM,aAAa,4IAGxB,CAAC;AAEH,eAAO,MAAM,cAAc;;oEAYzB,CAAC;AAEH,eAAO,MAAM,YAAY,4IAKvB,CAAC"}
+{"version":3,"file":"StepDetails.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetails/StepDetails.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAgCpB,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAmBvB,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DASjB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAarB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAkB3B,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAsBxB,CAAC;AAEH,eAAO,MAAM,qBAAqB,4IAEhC,CAAC;AAEH,eAAO,MAAM,cAAc,4IAIzB,CAAC;AAEH,eAAO,MAAM,iBAAiB,4IAG5B,CAAC;AAEH,eAAO,MAAM,cAAc;;oEAYzB,CAAC;AAEH,eAAO,MAAM,YAAY,4IAKvB,CAAC"}

package/dist/widget/ui/src/components/StepDetails/StepDetails.types.d.ts

@@ -1,8 +1,21 @@
+import type { SwapperType } from 'rango-sdk';
 import type { ReactNode } from 'react';
 import type { SwapInputProps } from 'src/containers/SwapInput/SwapInput.types';
 type BaseStep = Pick<SwapInputProps, 'chain' | 'token' | 'price'>;
+type SwapperInfo = SwapInputProps['chain'] & {
+    type?: SwapperType;
+};
+export type InternalSwap = {
+    swapper: SwapperInfo;
+    from: {
+        blockchain: string;
+    };
+    to: {
+        blockchain: string;
+    };
+};
 export type Step = {
-    swapper: SwapInputProps['chain'];
+    swapper: SwapperInfo;
     from: BaseStep;
     to: BaseStep;
     error?: {
@@ -11,6 +24,7 @@ export type Step = {
     };
     alerts?: ReactNode;
     state?: 'error' | 'warning';
+    internalSwaps?: InternalSwap[];
 };
 export type StepDetailsProps = {
     step: Step;

package/dist/widget/ui/src/components/StepDetails/StepDetails.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepDetails.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetails/StepDetails.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAE/E,KAAK,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC;AAElE,MAAM,MAAM,IAAI,GAAG;IACjB,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,QAAQ,CAAC;IACf,EAAE,EAAE,QAAQ,CAAC;IACb,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,IAAI,CAAC;IACX,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,EAAE,eAAe,GAAG,eAAe,CAAC;IACxC,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,WAAW,CAAC;CAChC,CAAC"}
+{"version":3,"file":"StepDetails.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetails/StepDetails.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAE/E,KAAK,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC;AAElE,KAAK,WAAW,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG;IAC3C,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE;QACJ,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,EAAE,EAAE;QACF,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,IAAI,GAAG;IACjB,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,QAAQ,CAAC;IACf,EAAE,EAAE,QAAQ,CAAC;IACb,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,IAAI,CAAC;IACX,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,EAAE,eAAe,GAAG,eAAe,CAAC;IACxC,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,WAAW,CAAC;CAChC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.26.1-next.6",
+  "version": "0.26.1-next.8",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",

package/src/components/RefreshProgressButton/RefreshProgressButton.styles.ts

@@ -1,10 +1,10 @@
 import { styled } from '../../theme';
 
 export const StyledEllipse = styled('ellipse', {
-  cx: 12.5,
-  cy: 12.5,
-  rx: 7.7,
-  ry: 7.7,
+  cx: '12.5px',
+  cy: '12.5px',
+  rx: '7.7px',
+  ry: '7.7px',
   strokeLinecap: 'round',
   fill: 'none',
   strokeDasharray: 100,

package/src/components/StepDetails/StepDetails.styles.ts

@@ -12,6 +12,7 @@ export const Container = styled('div', {
     type: {
       'quote-details': { border: 'none' },
       'swap-progress': {
+        backgroundColor: '$neutral100',
         $$color: '$colors$neutral100',
         [`.${darkTheme} &`]: {
           $$color: '$colors$neutral300',
@@ -33,10 +34,6 @@ export const Container = styled('div', {
       error: { borderColor: '$error500' },
     },
   },
-  '& .swapper__description': {
-    fontWeight: '$medium',
-  },
-  '& div:nth-child(3)': { display: 'flex', flexDirection: 'column', flex: 1 },
 });
 
 export const SwapperImage = styled('div', {
@@ -86,6 +83,26 @@ export const DashedLine = styled('div', {
   },
 });
 
+export const SwapperSeparator = styled('div', {
+  borderLeft: '1px solid transparent',
+  margin: '0 $12',
+  display: 'block',
+  height: '8px',
+  variants: {
+    state: {
+      default: {
+        borderColor: 'transparent',
+      },
+      'in-progress': { borderColor: '$info500' },
+      completed: {
+        borderColor: '$success500',
+      },
+      warning: { borderColor: '$warning500' },
+      error: { borderColor: '$error500' },
+    },
+  },
+});
+
 export const StepSeparator = styled('div', {
   borderLeft: '1px dashed transparent',
   margin: '0 $10',
@@ -114,7 +131,13 @@ export const tokensContainerStyles = css({
   width: '100%',
 });
 
-export const swapperStyles = css({
+export const swappersStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+});
+
+export const swapperItemStyles = css({
   display: 'flex',
   alignItems: 'center',
 });

package/src/components/StepDetails/StepDetails.tsx

@@ -1,7 +1,7 @@
-import type { StepDetailsProps } from './StepDetails.types';
+import type { InternalSwap, StepDetailsProps } from './StepDetails.types';
 
 import { i18n } from '@lingui/core';
-import React, { forwardRef, memo, useEffect, useRef } from 'react';
+import React, { forwardRef, Fragment, memo, useEffect, useRef } from 'react';
 
 import { ChainToken } from '../../components/ChainToken/ChainToken';
 import { NextIcon } from '../../icons';
@@ -17,7 +17,9 @@ import {
   stepInfoStyles,
   StepSeparator,
   SwapperImage,
-  swapperStyles,
+  swapperItemStyles,
+  SwapperSeparator,
+  swappersStyles,
   tokensContainerStyles,
   tokensStyles,
 } from './StepDetails.styles';
@@ -33,8 +35,20 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
       tabIndex,
       tooltipContainer,
     } = props;
+
+    const { from, to, swapper } = step;
     const containerRef = useRef<HTMLDivElement>(null);
     const isCompleted = state === 'completed' || state === 'error';
+    const swappers: InternalSwap[] = step.internalSwaps?.length
+      ? step.internalSwaps
+      : [
+          {
+            from: { blockchain: from.chain.displayName },
+            to: { blockchain: to.chain.displayName },
+            swapper,
+          },
+        ];
+
     useEffect(() => {
       const parentElement = (parentRef as React.RefObject<HTMLDivElement>)
         ?.current;
@@ -51,27 +65,63 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
         state={state}
         ref={containerRef}
         tabIndex={tabIndex}>
-        <div className={swapperStyles()}>
-          {type === 'swap-progress' && hasSeparator && (
-            <StepSeparator state={state} />
-          )}
-          <SwapperImage state={state}>
-            <Image size={22} src={step.swapper.image} />
-          </SwapperImage>
-          <Typography
-            className="swapper__description"
-            ml={8}
-            size="small"
-            variant="body">
-            {i18n.t({
-              id: 'Swap on {fromChain} via {swapper}',
-              values: {
-                fromChain: step.from.chain.displayName,
-                swapper: step.swapper.displayName,
-              },
+        {type === 'quote-details' && (
+          <div className={swapperItemStyles()}>
+            <SwapperImage state={state}>
+              <Image size={22} src={step.swapper.image} />
+            </SwapperImage>
+            <Typography ml={8} size="medium" variant="label">
+              {i18n.t({
+                id: 'Swap on {fromChain} via {swapper}',
+                values: {
+                  fromChain: step.from.chain.displayName,
+                  swapper: step.swapper.displayName,
+                },
+              })}
+            </Typography>
+          </div>
+        )}
+
+        {type === 'swap-progress' && (
+          <div className={swappersStyles()}>
+            {hasSeparator && <StepSeparator state={state} />}
+            {swappers.map((swapperItem, index) => {
+              const key = `${swapperItem.swapper.displayName}-${index}`;
+              return (
+                <Fragment key={key}>
+                  <div
+                    id={swapperItem.swapper.displayName}
+                    className={swapperItemStyles()}>
+                    <SwapperImage state={state}>
+                      <Image size={22} src={swapperItem.swapper.image} />
+                    </SwapperImage>
+                    <Typography ml={8} size="medium" variant="label">
+                      {swapperItem?.swapper.type === 'DEX'
+                        ? i18n.t({
+                            id: 'Swap on {fromChain} via {swapper}',
+                            values: {
+                              fromChain: swapperItem.from.blockchain,
+                              swapper: swapperItem.swapper.displayName,
+                            },
+                          })
+                        : i18n.t({
+                            id: 'Bridge to {toChain} via {swapper}',
+                            values: {
+                              toChain: swapperItem.to.blockchain,
+                              swapper: swapperItem.swapper.displayName,
+                            },
+                          })}
+                    </Typography>
+                  </div>
+                  {index !== swappers.length - 1 && (
+                    <SwapperSeparator state={state} />
+                  )}
+                </Fragment>
+              );
             })}
-          </Typography>
-        </div>
+          </div>
+        )}
+
         <div className={stepInfoStyles()}>
           <DashedLine invisible={!hasSeparator || type === 'swap-progress'} />
           <div className={tokensContainerStyles()}>

package/src/components/StepDetails/StepDetails.types.ts

@@ -1,10 +1,25 @@
+import type { SwapperType } from 'rango-sdk';
 import type { ReactNode } from 'react';
 import type { SwapInputProps } from 'src/containers/SwapInput/SwapInput.types';
 
 type BaseStep = Pick<SwapInputProps, 'chain' | 'token' | 'price'>;
 
+type SwapperInfo = SwapInputProps['chain'] & {
+  type?: SwapperType;
+};
+
+export type InternalSwap = {
+  swapper: SwapperInfo;
+  from: {
+    blockchain: string;
+  };
+  to: {
+    blockchain: string;
+  };
+};
+
 export type Step = {
-  swapper: SwapInputProps['chain'];
+  swapper: SwapperInfo;
   from: BaseStep;
   to: BaseStep;
   error?: {
@@ -13,6 +28,7 @@ export type Step = {
   };
   alerts?: ReactNode;
   state?: 'error' | 'warning';
+  internalSwaps?: InternalSwap[];
 };
 
 export type StepDetailsProps = {