@rango-dev/widget-embedded 0.20.1-next.15 → 0.20.1-next.17

package/dist/utils/quote.d.ts

@@ -1,5 +1,5 @@
 import type { QuoteError, QuoteWarning, Wallet } from '../types';
-import type { PriceImpactWarningLevel } from '@rango-dev/ui';
+import type { PriceImpactWarningLevel, Step } from '@rango-dev/ui';
 import type { SimulationAssetAndAmount, SimulationValidationStatus } from '@rango-dev/ui/dist/widget/ui/src/types/swaps';
 import type { Asset, BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
 import type { PendingSwap } from 'rango-types';
@@ -29,4 +29,8 @@ export declare function generateQuoteWarnings(quote: BestRouteResponse, params:
 }): QuoteWarning | null;
 export declare function generateQuoteErrors(quote: BestRouteResponse): QuoteError | null;
 export declare function getPriceImpact(inputUsdValue: BigNumber | string | null, outputUsdValue: BigNumber | string | null): number | null;
+export declare const getUniqueBlockchains: (steps: Step[]) => {
+    displayName: string;
+    image: string;
+}[];
 //# sourceMappingURL=quote.d.ts.map

package/dist/utils/quote.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../src/utils/quote.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACjE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EACV,KAAK,EACL,iBAAiB,EACjB,cAAc,EACd,KAAK,EACN,MAAM,WAAW,CAAC;AACnB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,SAAS,MAAM,cAAc,CAAC;AAqBrC,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,KAAK,EAAE,EACf,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,KAAK,EAAE,cAAc,GAAG,IAAI,GAC3B,KAAK,GAAG,IAAI,CAqBd;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,iBAAiB,GAAG,IAAI,GAC9B,MAAM,GAAG,IAAI,GAAG,SAAS,CAE3B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAK1B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,GACxB,OAAO,CAMT;AAED,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,SAAS,GAAG,IAAI,EAC9B,YAAY,EAAE,SAAS,GAAG,CAAC,WAQ5B;AAED,wBAAgB,0BAA0B,CACxC,cAAc,EAAE,MAAM,EACtB,GAAG,EAAE,0BAA0B,EAAE,GAAG,IAAI,GACvC,wBAAwB,EAAE,GAAG,IAAI,CAcnC;AAED,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,MAAM,GAClB,uBAAuB,CASzB;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,KAAK,EAAE,EAAE,CAAC,SAAS,KAAK,EAAE,EACnE,KAAK,EAAE,CAAC,EACR,KAAK,EAAE,CAAC,KAUT;AAED,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,cAAc,EAAE,EAC7B,MAAM,EAAE,KAAK,EAAE,GACd;IACD,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,SAAS,EAAE,KAAK,GAAG,IAAI,CAAC;IACxB,YAAY,EAAE,cAAc,GAAG,IAAI,CAAC;IACpC,OAAO,EAAE,KAAK,GAAG,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;CACrB,CA4CA;AAED,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,iBAAiB,EACxB,MAAM,EAAE;IACN,SAAS,EAAE,KAAK,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB,GACA,YAAY,GAAG,IAAI,CAiDrB;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,iBAAiB,GACvB,UAAU,GAAG,IAAI,CA+BnB;AAED,wBAAgB,cAAc,CAC5B,aAAa,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,EACxC,cAAc,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,GACxC,MAAM,GAAG,IAAI,CAcf"}
+{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../src/utils/quote.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACjE,OAAO,KAAK,EAAE,uBAAuB,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,KAAK,EACV,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EACV,KAAK,EACL,iBAAiB,EACjB,cAAc,EACd,KAAK,EACN,MAAM,WAAW,CAAC;AACnB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,SAAS,MAAM,cAAc,CAAC;AAqBrC,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,KAAK,EAAE,EACf,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,KAAK,EAAE,cAAc,GAAG,IAAI,GAC3B,KAAK,GAAG,IAAI,CAqBd;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,iBAAiB,GAAG,IAAI,GAC9B,MAAM,GAAG,IAAI,GAAG,SAAS,CAE3B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAK1B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,GACxB,OAAO,CAMT;AAED,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,SAAS,GAAG,IAAI,EAC9B,YAAY,EAAE,SAAS,GAAG,CAAC,WAQ5B;AAED,wBAAgB,0BAA0B,CACxC,cAAc,EAAE,MAAM,EACtB,GAAG,EAAE,0BAA0B,EAAE,GAAG,IAAI,GACvC,wBAAwB,EAAE,GAAG,IAAI,CAcnC;AAED,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,MAAM,GAClB,uBAAuB,CASzB;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,KAAK,EAAE,EAAE,CAAC,SAAS,KAAK,EAAE,EACnE,KAAK,EAAE,CAAC,EACR,KAAK,EAAE,CAAC,KAUT;AAED,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,cAAc,EAAE,EAC7B,MAAM,EAAE,KAAK,EAAE,GACd;IACD,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,SAAS,EAAE,KAAK,GAAG,IAAI,CAAC;IACxB,YAAY,EAAE,cAAc,GAAG,IAAI,CAAC;IACpC,OAAO,EAAE,KAAK,GAAG,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;CACrB,CA4CA;AAED,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,iBAAiB,EACxB,MAAM,EAAE;IACN,SAAS,EAAE,KAAK,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB,GACA,YAAY,GAAG,IAAI,CAiDrB;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,iBAAiB,GACvB,UAAU,GAAG,IAAI,CA+BnB;AAED,wBAAgB,cAAc,CAC5B,aAAa,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,EACxC,cAAc,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,GACxC,MAAM,GAAG,IAAI,CAcf;AAED,eAAO,MAAM,oBAAoB,UAAW,IAAI,EAAE;iBAEnB,MAAM;WAAS,MAAM;GAanD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.20.1-next.15",
+  "version": "0.20.1-next.17",
   "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.7",
+    "@rango-dev/ui": "^0.26.1-next.9",
     "@rango-dev/wallets-react": "^0.11.1-next.1",
     "@rango-dev/wallets-shared": "^0.25.1-next.1",
     "bignumber.js": "^9.1.1",
@@ -47,4 +47,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/Quote/Quote.styles.ts

@@ -114,6 +114,15 @@ export const summaryStyles = css({
   cursor: 'default',
 });
 
+export const rowStyles = css({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+  '.blockchainImage': {
+    marginLeft: '-$8',
+  },
+});
 export const basicInfoStyles = css({
   paddingTop: '$10',
   display: 'flex',
@@ -127,7 +136,7 @@ export const basicInfoStyles = css({
   },
 });
 
-export const Chains = styled(Collapsible.Trigger, {
+export const Trigger = styled(Collapsible.Trigger, {
   display: 'flex',
   width: '100%',
   justifyContent: 'space-between',
@@ -171,17 +180,27 @@ export const Chains = styled(Collapsible.Trigger, {
       },
     },
   },
-  '& div:nth-child(1)': { display: 'flex' },
+  '.blockchains_section': {
+    display: 'none',
+  },
+  '@xs': {
+    '.blockchains_section': {
+      display: 'block',
+    },
+  },
 });
 
-export const ChainImageContainer = styled('div', {
+export const ImageContainer = styled('div', {
   width: '18px',
   height: '18px',
   borderRadius: '100%',
-  border: '1.5px transparent solid',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
+  border: '1.5px transparent solid',
+  img: {
+    borderRadius: '100%',
+  },
   variants: {
     state: {
       error: {
@@ -252,3 +271,23 @@ export const ContainerInfoOutput = styled('div', {
   display: 'flex',
   flexWrap: 'wrap',
 });
+
+export const MoreStep = styled('div', {
+  width: '18px',
+  height: '18px',
+  borderRadius: '100%',
+  backgroundColor: '$background',
+  cursor: 'default',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  border: '1.5px transparent solid',
+  variants: {
+    state: {
+      error: {
+        borderColor: '$error500',
+      },
+      warning: { borderColor: '$warning500' },
+    },
+  },
+});

package/src/components/Quote/Quote.tsx

@@ -5,10 +5,7 @@ import type { SwapResult } from 'rango-sdk';
 import { i18n } from '@lingui/core';
 import {
   Alert,
-  ChevronDownIcon,
-  ChevronRightIcon,
   Divider,
-  Image,
   InfoIcon,
   QuoteCost,
   StepDetails,
@@ -52,20 +49,18 @@ import { getTotalFeeInUsd } from '../../utils/swap';
 import {
   BasicInfoOutput,
   basicInfoStyles,
-  ChainImageContainer,
-  Chains,
   ContainerInfoOutput,
   Content,
   EXPANDABLE_QUOTE_TRANSITION_DURATION,
   FrameIcon,
   HorizontalSeparator,
-  IconContainer,
   QuoteContainer,
   stepsDetailsStyles,
   SummaryContainer,
   summaryStyles,
 } from './Quote.styles';
 import { QuoteSummary } from './QuoteSummary';
+import { QuoteTrigger } from './QuoteTrigger ';
 
 export function Quote(props: QuoteProps) {
   const {
@@ -374,59 +369,13 @@ export function Quote(props: QuoteProps) {
           recommended={recommended}
           open={expanded}
           onOpenChange={setExpanded}>
-          <Chains
-            ref={(ref) => (quoteRef.current = ref)}
+          <QuoteTrigger
+            quoteRef={quoteRef}
             recommended={recommended}
-            onClick={() => setExpanded((prevState) => !prevState)}>
-            <div>
-              {steps.map((step, index) => {
-                const key = `item-${index}`;
-                const arrow = (
-                  <IconContainer>
-                    <ChevronRightIcon
-                      size={12}
-                      color="black"
-                      {...(step.state && {
-                        color: step.state === 'error' ? 'error' : 'warning',
-                      })}
-                    />
-                  </IconContainer>
-                );
-                return (
-                  <React.Fragment key={key}>
-                    <Tooltip
-                      container={tooltipContainer}
-                      side="bottom"
-                      sideOffset={4}
-                      content={step.from.chain.displayName}>
-                      <ChainImageContainer
-                        state={step.state || steps[index - 1]?.state}>
-                        <Image src={step.from.chain.image} size={16} />
-                      </ChainImageContainer>
-                    </Tooltip>
-                    {index === numberOfSteps - 1 && (
-                      <>
-                        {arrow}
-                        <Tooltip
-                          container={tooltipContainer}
-                          side="bottom"
-                          sideOffset={4}
-                          content={step.to.chain.displayName}>
-                          <ChainImageContainer state={step.state}>
-                            <Image src={step.to.chain.image} size={16} />
-                          </ChainImageContainer>
-                        </Tooltip>
-                      </>
-                    )}
-                    {index !== numberOfSteps - 1 && <>{arrow}</>}
-                  </React.Fragment>
-                );
-              })}
-            </div>
-            <IconContainer orientation={expanded ? 'up' : 'down'}>
-              <ChevronDownIcon size={12} color="black" />
-            </IconContainer>
-          </Chains>
+            setExpanded={setExpanded}
+            expanded={expanded}
+            steps={steps}
+          />
           <Content open={expanded}>
             <HorizontalSeparator />
             <div className={stepsDetailsStyles()}>

package/src/components/Quote/Quote.types.ts

@@ -1,4 +1,5 @@
 import type { QuoteError, QuoteWarning } from '../../types';
+import type { Step } from '@rango-dev/ui';
 import type { BestRouteResponse } from 'rango-sdk';
 import type { ReactNode } from 'react';
 
@@ -13,3 +14,19 @@ export type QuoteProps = {
   output: { value: string; usdValue?: string };
   expanded?: boolean;
 };
+
+export type QuoteTriggerProps = {
+  quoteRef: React.MutableRefObject<HTMLButtonElement | null>;
+  recommended: boolean;
+  setExpanded: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+  steps: Step[];
+  expanded?: boolean;
+};
+
+export type QuoteTriggerImagesProps = {
+  content: ReactNode;
+  state?: 'error' | 'warning' | undefined;
+  src: string;
+  open?: boolean;
+  className?: string;
+};

package/src/components/Quote/QuoteTrigger .tsx

@@ -0,0 +1,215 @@
+import type { QuoteTriggerImagesProps, QuoteTriggerProps } from './Quote.types';
+
+import { i18n } from '@lingui/core';
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  Divider,
+  Image,
+  Tooltip,
+  Typography,
+} from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import { getContainer } from '../../utils/common';
+import { getUniqueBlockchains } from '../../utils/quote';
+
+import {
+  IconContainer,
+  ImageContainer,
+  MoreStep,
+  rowStyles,
+  Trigger,
+} from './Quote.styles';
+
+const MAX_STEPS = 4;
+const MAX_BLOCKCHAINS = 6;
+const MIN_WIDTH_WINDOW = 375;
+
+const ImageComponent = (props: QuoteTriggerImagesProps) => {
+  const tooltipContainer = getContainer();
+  const { content, src, className, open, state } = props;
+  return (
+    <Tooltip
+      container={tooltipContainer}
+      side="bottom"
+      sideOffset={4}
+      open={open}
+      content={content}>
+      <ImageContainer className={className} state={state}>
+        <Image src={src} size={16} />
+      </ImageContainer>
+    </Tooltip>
+  );
+};
+
+export function QuoteTrigger(props: QuoteTriggerProps) {
+  const { quoteRef, recommended, setExpanded, steps, expanded } = props;
+  const tooltipContainer = getContainer();
+  const numberOfSteps = steps.length;
+  const blockchains = getUniqueBlockchains(steps);
+  const [isMobile, setIsMobile] = useState(false);
+
+  //choose the screen size
+  const handleResize = () => {
+    if (window.innerWidth < MIN_WIDTH_WINDOW) {
+      setIsMobile(true);
+    } else {
+      setIsMobile(false);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+  });
+
+  return (
+    <Trigger
+      ref={(ref) => (quoteRef.current = ref)}
+      recommended={recommended}
+      onClick={() => setExpanded((prevState) => !prevState)}>
+      <div className={rowStyles()}>
+        <Typography variant="body" size="xsmall">
+          {i18n.t('Via:')}
+        </Typography>
+        <Divider direction="horizontal" size={4} />
+        {steps.map((step, index) => {
+          const key = `item-${index}`;
+          const arrow = (
+            <IconContainer>
+              <ChevronRightIcon size={12} color="black" />
+            </IconContainer>
+          );
+
+          return isMobile ? (
+            <>
+              <ImageComponent
+                content={step.swapper.displayName}
+                src={step.swapper.image}
+                state={step.state}
+              />
+              {index !== numberOfSteps - 1 && <>{arrow}</>}
+            </>
+          ) : (
+            <React.Fragment key={key}>
+              {numberOfSteps <= MAX_STEPS ||
+              (numberOfSteps > MAX_STEPS && index < MAX_STEPS - 1) ? (
+                <>
+                  <ImageComponent
+                    content={step.swapper.displayName}
+                    src={step.swapper.image}
+                    state={step.state}
+                  />
+                  {index !== numberOfSteps - 1 && <>{arrow}</>}
+                </>
+              ) : (
+                index === MAX_STEPS - 1 && (
+                  <Tooltip
+                    container={tooltipContainer}
+                    side="bottom"
+                    align="right"
+                    sideOffset={4}
+                    content={
+                      <div className={rowStyles()}>
+                        {arrow}
+                        {steps.map((step, i) => {
+                          const key = `image-${i}`;
+                          return (
+                            i >= index && (
+                              <React.Fragment key={key}>
+                                <ImageComponent
+                                  content={step.swapper.displayName}
+                                  src={step.swapper.image}
+                                  state={step.state}
+                                  open={false}
+                                />
+                                {i !== numberOfSteps - 1 && <>{arrow}</>}
+                              </React.Fragment>
+                            )
+                          );
+                        })}
+                      </div>
+                    }>
+                    <MoreStep
+                      state={
+                        steps.find(
+                          (step, i) =>
+                            i >= index &&
+                            (step.state === 'error' || step.state === 'warning')
+                        )?.state
+                      }>
+                      <Typography size="xsmall" variant="body">
+                        +{numberOfSteps - index}
+                      </Typography>
+                    </MoreStep>
+                  </Tooltip>
+                )
+              )}
+            </React.Fragment>
+          );
+        })}
+      </div>
+      <div className={rowStyles()}>
+        <div className="blockchains_section">
+          <div className={rowStyles()}>
+            <Typography variant="body" size="xsmall">
+              {i18n.t('Chains:')}
+            </Typography>
+            <Divider direction="horizontal" size={4} />
+            {blockchains.map((blockchain, index) => (
+              <>
+                {blockchains.length <= MAX_BLOCKCHAINS ||
+                (blockchains.length > MAX_BLOCKCHAINS &&
+                  index < MAX_BLOCKCHAINS - 1) ? (
+                  <ImageComponent
+                    key={blockchain.displayName}
+                    content={''}
+                    src={blockchain.image}
+                    open={false}
+                    className={index !== 0 ? 'blockchainImage' : ''}
+                  />
+                ) : (
+                  index === MAX_BLOCKCHAINS - 1 && (
+                    <Tooltip
+                      container={tooltipContainer}
+                      side="bottom"
+                      align="right"
+                      sideOffset={4}
+                      content={
+                        <div className={rowStyles()}>
+                          {blockchains.map(
+                            (chain, i) =>
+                              i >= index && (
+                                <ImageComponent
+                                  key={chain.displayName}
+                                  content={''}
+                                  src={chain.image}
+                                  open={false}
+                                  className={i > index ? 'blockchainImage' : ''}
+                                />
+                              )
+                          )}
+                        </div>
+                      }>
+                      <MoreStep className={'blockchainImage'}>
+                        <Typography size="xsmall" variant="body">
+                          +{blockchains.length - index}
+                        </Typography>
+                      </MoreStep>
+                    </Tooltip>
+                  )
+                )}
+              </>
+            ))}
+
+            <Divider direction="horizontal" size={32} />
+          </div>
+        </div>
+
+        <IconContainer orientation={expanded ? 'up' : 'down'}>
+          <ChevronDownIcon size={12} color="black" />
+        </IconContainer>
+      </div>
+    </Trigger>
+  );
+}

package/src/utils/quote.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { QuoteError, QuoteWarning, Wallet } from '../types';
-import type { PriceImpactWarningLevel } from '@rango-dev/ui';
+import type { PriceImpactWarningLevel, Step } from '@rango-dev/ui';
 import type {
   SimulationAssetAndAmount,
   SimulationValidationStatus,
@@ -336,3 +336,20 @@ export function getPriceImpact(
 
   return percentageChange && percentageChange < 0 ? percentageChange : null;
 }
+
+export const getUniqueBlockchains = (steps: Step[]) => {
+  const set = new Set();
+  const result: { displayName: string; image: string }[] = [];
+  steps.forEach((step) => {
+    if (!set.has(step.from.chain.displayName)) {
+      set.add(step.from.chain.displayName);
+      result.push(step.from.chain);
+    }
+    if (!set.has(step.to.chain.displayName)) {
+      set.add(step.to.chain.displayName);
+      result.push(step.to.chain);
+    }
+  });
+
+  return result;
+};