@rango-dev/widget-embedded 0.20.1-next.16 → 0.20.1-next.18

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/dist/utils/swap.d.ts

@@ -1,7 +1,8 @@
+import type { FeesGroup } from '../constants/quote';
 import type { FetchStatus } from '../store/slices/data';
 import type { ConvertedToken, QuoteError, QuoteWarning, RecommendedSlippages, SwapButtonState, Wallet } from '../types';
 import type { WalletType } from '@rango-dev/wallets-shared';
-import type { BestRouteRequest, BestRouteResponse, BlockchainMeta, RecommendedSlippage, SwapResult, Token } from 'rango-sdk';
+import type { BestRouteRequest, BestRouteResponse, BlockchainMeta, RecommendedSlippage, SwapFee, SwapResult, Token } from 'rango-sdk';
 import type { PendingSwap, PendingSwapStep } from 'rango-types';
 import BigNumber from 'bignumber.js';
 export declare function getOutputRatio(inputUsdValue: BigNumber | null, outputUsdValue: BigNumber | null): number;
@@ -27,6 +28,9 @@ export declare function requiredWallets(quote: BestRouteResponse | null): string
 export declare const getUsdPrice: (blockchain: string, symbol: string, address: string | null, allTokens: Token[]) => number | null;
 export declare function getUsdFeeOfStep(step: SwapResult, allTokens: Token[]): BigNumber;
 export declare function getTotalFeeInUsd(swaps: SwapResult[], allTokens: Token[]): BigNumber;
+export declare function getUsdFee(fee: SwapFee): BigNumber;
+export declare function getTotalFeesInUsd(fees: SwapFee[]): BigNumber;
+export declare function getFeesGroup(swaps: SwapResult[]): FeesGroup;
 export declare function hasHighFee(totalFeeInUsd: BigNumber | null): boolean;
 export declare function hasSlippageError(slippages: (RecommendedSlippage | null)[] | undefined): boolean;
 export declare function checkSlippageErrors(quote: BestRouteResponse): RecommendedSlippages | null;

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

@@ -1 +1 @@
-{"version":3,"file":"swap.d.ts","sourceRoot":"","sources":["../../src/utils/swap.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"swap.d.ts","sourceRoot":"","sources":["../../src/utils/swap.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.20.1-next.16",
+  "version": "0.20.1-next.18",
   "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.8",
+    "@rango-dev/ui": "^0.26.1-next.10",
     "@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/ConfirmWalletsModal/ConfirmWallets.styles.ts

@@ -1,34 +1,12 @@
-import * as Collapsible from '@radix-ui/react-collapsible';
 import {
   Button,
   css,
   darkTheme,
   IconButton,
-  keyframes,
   styled,
   TextField,
 } from '@rango-dev/ui';
 
-export const EXPANDABLE_TRANSITION_DURATION = 300;
-
-const slideDown = keyframes({
-  from: {
-    height: 0,
-  },
-  to: {
-    height: 'var(--radix-collapsible-content-height)',
-  },
-});
-
-const slideUp = keyframes({
-  from: {
-    height: 'var(--radix-collapsible-content-height)',
-  },
-  to: {
-    height: 0,
-  },
-});
-
 export const Title = styled('div', {
   display: 'flex',
   flexDirection: 'column',
@@ -93,16 +71,6 @@ export const ShowMoreWallets = styled(WalletButton, {
   alignSelf: 'stretch',
   minHeight: '93px',
 });
-
-export const Trigger = styled(Collapsible.Trigger, {
-  padding: '$0',
-  border: 'none',
-  outline: 'none',
-  width: '100%',
-  backgroundColor: 'transparent',
-  fontFamily: 'inherit',
-});
-
 export const ShowMoreHeader = styled('div', {
   padding: '$20',
   display: 'flex',
@@ -132,20 +100,36 @@ export const walletsListStyles = css({
   height: '100%',
 });
 
-export const CollapsibleRoot = styled(Collapsible.Root, {
-  backgroundColor: '$neutral200',
-  borderRadius: '$sm',
-  variants: {
-    selected: {
-      true: {
-        outlineWidth: 1,
-        outlineColor: '$secondary500',
-        outlineStyle: 'solid',
-      },
-    },
+export const CustomDestination = styled('div', {
+  padding: '$10 $0',
+  '& .button__content': {
+    display: 'flex',
+    alignItems: 'center',
   },
+  '& .alarms': { paddingTop: '$5' },
+  '& .collapsible_content': {
+    backgroundColor: '$neutral100',
+  },
+  '& .collapsible_root': {
+    backgroundColor: '$neutral200',
+  },
+});
+
+export const alarmsStyles = css({
+  paddingTop: '$5',
+});
+
+export const ConfirmButton = styled('div', {
+  display: 'flex',
+});
+
+export const StyledTextField = styled(TextField, {
+  backgroundColor: '$neutral100',
+  padding: '$0 $15 $15 $15',
 });
 
+export const Wallets = styled('div', { overflow: 'visible', width: '100%' });
+
 export const CustomDestinationButton = styled(Button, {
   width: '100%',
   borderRadius: '$sm !important',
@@ -174,56 +158,3 @@ export const CustomDestinationButton = styled(Button, {
     outline: 0,
   },
 });
-
-export const CustomDestination = styled('div', {
-  padding: '$10 $0',
-  '& .button__content': {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '& .alarms': { paddingTop: '5px' },
-});
-
-export const alarmsStyles = css({
-  paddingTop: '5px',
-});
-
-export const ExpandedIcon = styled('div', {
-  transition: `all ${EXPANDABLE_TRANSITION_DURATION}ms ease`,
-  variants: {
-    orientation: {
-      down: {
-        transform: 'rotate(0)',
-      },
-      up: {
-        transform: 'rotate(180deg)',
-      },
-    },
-  },
-});
-
-export const ConfirmButton = styled('div', {
-  display: 'flex',
-});
-
-export const StyledTextField = styled(TextField, {
-  backgroundColor: '$neutral100',
-  padding: '$0 $15 $15 $15',
-});
-
-export const CollapsibleContent = styled(Collapsible.Content, {
-  backgroundColor: '$neutral100',
-  overflow: 'hidden',
-  variants: {
-    open: {
-      true: {
-        animation: `${slideDown} ${EXPANDABLE_TRANSITION_DURATION}ms ease-out`,
-      },
-      false: {
-        animation: `${slideUp} ${EXPANDABLE_TRANSITION_DURATION}ms ease-out`,
-      },
-    },
-  },
-});
-
-export const Wallets = styled('div', { overflow: 'visible', width: '100%' });

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -15,7 +15,7 @@ import {
   Typography,
   WalletIcon,
 } from '@rango-dev/ui';
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { RANGO_SWAP_BOX_ID } from '../../constants';
@@ -26,23 +26,20 @@ import { useQuoteStore } from '../../store/quote';
 import { useWalletsStore } from '../../store/wallets';
 import { getBlockchainShortNameFor } from '../../utils/meta';
 import { confirmSwapDisabled } from '../../utils/swap';
+import { CustomCollapsible } from '../CustomCollapsible/CustomCollapsible';
+import { ExpandedIcon } from '../CustomCollapsible/CustomCollapsible.styles';
 
 import { getRequiredWallets, isValidAddress } from './ConfirmWallets.helpers';
 import {
   alarmsStyles,
-  CollapsibleContent,
-  CollapsibleRoot,
   ConfirmButton,
   CustomDestination,
   CustomDestinationButton,
-  EXPANDABLE_TRANSITION_DURATION,
-  ExpandedIcon,
   ListContainer,
   NavigateBack,
   ShowMoreHeader,
   StyledTextField,
   Title,
-  Trigger,
   Wallets,
   WalletsContainer,
   walletsListStyles,
@@ -76,7 +73,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const [showCustomDestination, setShowCustomDestination] = useState(
     !!customDestination
   );
-  const customDestinationRef = useRef<HTMLDivElement | null>(null);
 
   const requiredWallets = getRequiredWallets(quote);
 
@@ -231,14 +227,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
     );
   }, [connectedWallets.length]);
 
-  useLayoutEffect(() => {
-    if (showCustomDestination && customDestinationRef.current) {
-      setTimeout(() => {
-        customDestinationRef?.current?.scrollIntoView({ behavior: 'smooth' });
-      }, EXPANDABLE_TRANSITION_DURATION);
-    }
-  }, [showCustomDestination]);
-
   const modalContainer = document.getElementById(
     RANGO_SWAP_BOX_ID
   ) as HTMLDivElement;
@@ -394,10 +382,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                   {!isLastWallet && <Divider size={32} />}
                   {isLastWallet && config?.customDestination && (
                     <CustomDestination>
-                      <CollapsibleRoot
-                        ref={customDestinationRef}
-                        selected={showCustomDestination}
-                        open={showCustomDestination}
+                      <CustomCollapsible
                         onOpenChange={(checked) => {
                           if (!checked) {
                             resetCustomDestination();
@@ -423,11 +408,11 @@ export function ConfirmWalletsModal(props: PropTypes) {
                               );
                             }
                           }
-                        }}>
-                        <Trigger
-                          onClick={() =>
-                            setShowCustomDestination((prevState) => !prevState)
-                          }>
+                        }}
+                        hasSelected
+                        open={showCustomDestination}
+                        triggerAnchor="top"
+                        trigger={
                           <CustomDestinationButton
                             fullWidth
                             variant="default"
@@ -447,21 +432,21 @@ export function ConfirmWalletsModal(props: PropTypes) {
                               </Typography>
                             </div>
                           </CustomDestinationButton>
-                        </Trigger>
-                        <CollapsibleContent open={showCustomDestination}>
-                          <>
-                            <Divider size={4} />
-                            <StyledTextField
-                              autoFocus
-                              placeholder={i18n.t('Your destination address')}
-                              value={destination}
-                              onChange={(e) => {
-                                setDestination(e.target.value);
-                              }}
-                            />
-                          </>
-                        </CollapsibleContent>
-                      </CollapsibleRoot>
+                        }
+                        onClickTrigger={() =>
+                          setShowCustomDestination((prev) => !prev)
+                        }>
+                        <Divider size={4} />
+                        <StyledTextField
+                          autoFocus
+                          placeholder={i18n.t('Your destination address')}
+                          value={destination}
+                          onChange={(e) => {
+                            setDestination(e.target.value);
+                          }}
+                        />
+                      </CustomCollapsible>
+
                       {isAddressMatched && (
                         <div className={alarmsStyles()}>
                           <Alert

package/src/components/CustomCollapsible/CustomCollapsible.styles.ts

@@ -0,0 +1,75 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { keyframes, styled } from '@rango-dev/ui';
+
+export const EXPANDABLE_TRANSITION_DURATION = 300;
+
+const slideDown = keyframes({
+  from: {
+    height: 0,
+  },
+  to: {
+    height: 'var(--radix-collapsible-content-height)',
+  },
+});
+
+const slideUp = keyframes({
+  from: {
+    height: 'var(--radix-collapsible-content-height)',
+  },
+  to: {
+    height: 0,
+  },
+});
+
+export const CollapsibleRoot = styled(Collapsible.Root, {
+  borderRadius: '$sm',
+  variants: {
+    selected: {
+      true: {
+        outlineWidth: 1,
+        outlineColor: '$secondary500',
+        outlineStyle: 'solid',
+      },
+    },
+  },
+});
+
+export const Trigger = styled(Collapsible.Trigger, {
+  padding: '$0',
+  border: 'none',
+  outline: 'none',
+  width: '100%',
+  backgroundColor: 'transparent',
+  fontFamily: 'inherit',
+  cursor: 'pointer',
+});
+
+export const CollapsibleContent = styled(Collapsible.Content, {
+  overflow: 'hidden',
+  variants: {
+    open: {
+      true: {
+        animation: `${slideDown} ${EXPANDABLE_TRANSITION_DURATION}ms ease-out`,
+      },
+      false: {
+        animation: `${slideUp} ${EXPANDABLE_TRANSITION_DURATION}ms ease-out`,
+      },
+    },
+  },
+});
+
+export const ExpandedIcon = styled('div', {
+  transition: `all ${EXPANDABLE_TRANSITION_DURATION}ms ease`,
+  display: 'flex',
+  alignItems: 'center',
+  variants: {
+    orientation: {
+      down: {
+        transform: 'rotate(0)',
+      },
+      up: {
+        transform: 'rotate(180deg)',
+      },
+    },
+  },
+});

package/src/components/CustomCollapsible/CustomCollapsible.tsx

@@ -0,0 +1,55 @@
+import type { PropTypes } from './CustomCollapsible.types';
+import type { PropsWithChildren } from 'react';
+
+import React, { useLayoutEffect, useRef } from 'react';
+
+import {
+  CollapsibleContent,
+  CollapsibleRoot,
+  EXPANDABLE_TRANSITION_DURATION,
+  Trigger,
+} from './CustomCollapsible.styles';
+
+export function CustomCollapsible(props: PropsWithChildren<PropTypes>) {
+  const {
+    open,
+    hasSelected,
+    onOpenChange,
+    children,
+    onClickTrigger,
+    trigger,
+    triggerAnchor,
+  } = props;
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useLayoutEffect(() => {
+    if (open && ref.current) {
+      setTimeout(() => {
+        ref?.current?.scrollIntoView({ behavior: 'smooth' });
+      }, EXPANDABLE_TRANSITION_DURATION);
+    }
+  }, [open]);
+
+  return (
+    <CollapsibleRoot
+      ref={ref}
+      className="collapsible_root"
+      selected={hasSelected && open}
+      open={open}
+      onOpenChange={onOpenChange}>
+      {triggerAnchor === 'top' && (
+        <Trigger className="collapsible_trigger" onClick={onClickTrigger}>
+          {trigger}
+        </Trigger>
+      )}
+      <CollapsibleContent className="collapsible_content" open={open}>
+        {children}
+      </CollapsibleContent>
+      {triggerAnchor === 'bottom' && (
+        <Trigger className="collapsible_trigger" onClick={onClickTrigger}>
+          {trigger}
+        </Trigger>
+      )}
+    </CollapsibleRoot>
+  );
+}

package/src/components/CustomCollapsible/CustomCollapsible.types.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+export type PropTypes = {
+  open: boolean;
+  hasSelected?: boolean;
+  onOpenChange?: (checked: boolean) => void;
+  onClickTrigger: () => void;
+  trigger: ReactNode;
+  triggerAnchor: 'top' | 'bottom';
+};

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

@@ -1,7 +1,7 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
 import { css, darkTheme, Image, styled, Typography } from '@rango-dev/ui';
 
-import { CollapsibleContent } from '../ConfirmWalletsModal/ConfirmWallets.styles';
+import { CollapsibleContent } from '../CustomCollapsible/CustomCollapsible.styles';
 
 export const EXPANDABLE_QUOTE_TRANSITION_DURATION = 300;
 
@@ -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' },
+    },
+  },
+});