diff --git a/widget/embedded/src/components/Quote/Quote.types.ts b/widget/embedded/src/components/Quote/Quote.types.ts
index 3d4cc3ce58..1ff1233553 100644
--- a/widget/embedded/src/components/Quote/Quote.types.ts
+++ b/widget/embedded/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
;
+ recommended: boolean;
+ setExpanded: React.Dispatch>;
+ steps: Step[];
+ expanded?: boolean;
+};
+
+export type QuoteTriggerImagesProps = {
+ content: ReactNode;
+ state?: 'error' | 'warning' | undefined;
+ src: string;
+ open?: boolean;
+ className?: string;
+};
diff --git a/widget/embedded/src/components/Quote/QuoteTrigger .tsx b/widget/embedded/src/components/Quote/QuoteTrigger .tsx
new file mode 100644
index 0000000000..c1c832457e
--- /dev/null
+++ b/widget/embedded/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 (
+
+
+
+
+
+ );
+};
+
+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 (
+ (quoteRef.current = ref)}
+ recommended={recommended}
+ onClick={() => setExpanded((prevState) => !prevState)}>
+
+
+ {i18n.t('Via:')}
+
+
+ {steps.map((step, index) => {
+ const key = `item-${index}`;
+ const arrow = (
+
+
+
+ );
+
+ return isMobile ? (
+ <>
+
+ {index !== numberOfSteps - 1 && <>{arrow}}
+
+ ) : (
+
+ {numberOfSteps <= MAX_STEPS ||
+ (numberOfSteps > MAX_STEPS && index < MAX_STEPS - 1) ? (
+ <>
+
+ {index !== numberOfSteps - 1 && <>{arrow}}
+
+ ) : (
+ index === MAX_STEPS - 1 && (
+
+ {arrow}
+ {steps.map((step, i) => {
+ const key = `image-${i}`;
+ return (
+ i >= index && (
+
+
+ {i !== numberOfSteps - 1 && <>{arrow}}
+
+ )
+ );
+ })}
+