@rango-dev/widget-embedded 0.24.2-next.5 → 0.24.2-next.7

package/dist/pages/WalletsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAuBxC,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBA0E1B"}
+{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAsBxC,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBA0E1B"}

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

@@ -1 +1 @@
-{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/utils/wallets.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/utils/wallets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,KAAK,EACV,OAAO,EACP,aAAa,EACb,SAAS,EACT,aAAa,EACb,MAAM,EACP,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,KAAK,EACV,KAAK,EACL,OAAO,EACP,UAAU,EACV,WAAW,EACX,UAAU,EAEX,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAErE,OAAO,EAAE,WAAW,IAAI,YAAY,EAAE,MAAM,eAAe,CAAC;AAuB5D,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,WAAW,GAAG,YAAY,CAWvE;AAED,wBAAgB,0BAA0B,CACxC,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,WAAW,EAC3C,aAAa,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,UAAU,EAC/C,IAAI,EAAE,UAAU,EAAE,EAClB,KAAK,CAAC,EAAE,MAAM,GACb,eAAe,EAAE,CAmCnB;AAED,wBAAgB,6BAA6B,CAC3C,oBAAoB,EAAE,cAAc,EAAE,GACrC,OAAO,EAAE,GAAG,IAAI,CAUlB;AAED,wBAAgB,6BAA6B,CAC3C,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,MAAM,EAAE,EAClB,cAAc,EAAE,MAAM,EAAE,EACxB,mBAAmB,EAAE,OAAO,EAAE,GAAG,IAAI,EACrC,gBAAgB,EAAE,OAAO,GACxB,MAAM,EAAE,CAkFV;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,YA4B5D;AAID,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,MAAM,EACf,eAAe,EAAE,eAAe,WAOjC;AAED,wBAAgB,cAAc,CAC5B,gBAAgB,EAAE,YAAY,EAC9B,MAAM,EAAE,KAAK,EAAE,GACd,YAAY,EAAE,CAuBhB;AAED,wBAAgB,yBAAyB,CACvC,eAAe,EAAE,eAAe,GAC/B,eAAe,CAEjB;AAED,eAAO,MAAM,uBAAuB,oBAAqB,eAAe,EAAE,WAwCzE,CAAC;AAQF,eAAO,MAAM,WAAW,eACV,MAAM,UACV,MAAM,WACL,MAAM,GAAG,IAAI,aACX,KAAK,EAAE,KACjB,MAAM,GAAG,IAQX,CAAC;AACF,eAAO,MAAM,mBAAmB,gBACjB,cAAc,EAAE,UACrB,MAAM,KACb,OAUF,CAAC;AAEF,eAAO,MAAM,kCAAkC,sBAC1B,MAAM,EAAE,KAC1B,UAAU,EAUZ,CAAC;AAEF,wBAAgB,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,OAAO,GAAG,IAAI,CAkBrE;AAED,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,OAAO,GAAG,IAAI,EAC7B,aAAa,EAAE,OAAO,GAAG,IAAI,GAC5B,MAAM,CAgBR;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG,IAAI,EAC/D,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG,IAAI,WAOhE;AAED,wBAAgB,iCAAiC,CAC/C,OAAO,EAAE,eAAe,EAAE,GACzB,eAAe,EAAE,CAcnB;AAED,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,MAAM,EAEf,QAAQ,SAAI,EAEZ,cAAc,SAAI,GACjB,MAAM,CAOR;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,gBAAgB,EAChB,UAAU,GACX,EAAE;IACD,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,MAAM,GAAG,SAAS,CAMrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,CAEvD;AAED,wBAAgB,iBAAiB,CAAC,gBAAgB,EAAE,eAAe,EAAE,iBAmCpE;AAED,eAAO,MAAM,iBAAiB,qBACV,eAAe,EAAE,cACvB,MAAM,YAIjB,CAAC;AAEJ,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,eAAe,EAAE,UAE9D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.24.2-next.5",
+  "version": "0.24.2-next.7",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -26,7 +26,7 @@
     "@rango-dev/queue-manager-core": "^0.26.0",
     "@rango-dev/queue-manager-rango-preset": "^0.29.2-next.1",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/ui": "^0.30.1-next.1",
+    "@rango-dev/ui": "^0.30.1-next.3",
     "@rango-dev/wallets-react": "^0.15.1-next.0",
     "@rango-dev/wallets-shared": "^0.29.1-next.0",
     "bignumber.js": "^9.1.1",

package/src/components/HeaderButtons/HeaderButtons.tsx

@@ -26,6 +26,7 @@ export function HeaderButtons(props: HeaderButtonsPropTypes) {
     onClickHistory,
     onClickSettings,
     hidden = [],
+    container,
   } = props;
 
   const {
@@ -40,7 +41,7 @@ export function HeaderButtons(props: HeaderButtonsPropTypes) {
     <>
       {!hidden.includes('refresh') && (
         <Tooltip
-          container={getContainer()}
+          container={container || getContainer()}
           side="top"
           content={i18n.t('Refresh')}>
           <RefreshButton onClick={onClickRefresh} />

package/src/components/HeaderButtons/HeaderButtons.types.ts

@@ -8,4 +8,5 @@ export interface HeaderButtonsPropTypes {
   onClickRefresh?: () => void;
   onClickHistory?: () => void;
   hidden?: ('settings' | 'refresh' | 'history' | 'notifications')[];
+  container?: HTMLElement;
 }

package/src/components/Quote/Quote.tsx

@@ -50,7 +50,7 @@ import {
   getPriceImpactLevel,
   sortTags,
 } from '../../utils/quote';
-import { getTotalFeeInUsd } from '../../utils/swap';
+import { getTotalFeeInUsd, getUsdFeeOfStep } from '../../utils/swap';
 
 import {
   AllRoutesButton,
@@ -85,6 +85,7 @@ export function Quote(props: QuoteProps) {
     showModalFee = true,
     onClickAllRoutes,
     fullExpandedMode = false,
+    container: propContainer,
   } = props;
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
@@ -116,18 +117,27 @@ export function Quote(props: QuoteProps) {
   );
   const priceImpactWarningLevel = getPriceImpactLevel(priceImpact ?? 0);
 
-  const getQuoteSteps = (swaps: SwapResult[]): Step[] => {
+  const getQuoteSteps = (
+    swaps: SwapResult[],
+    internalSwap?: boolean
+  ): Step[] => {
     return swaps.map((swap, index) => {
       let stepState: 'error' | 'warning' | undefined = undefined;
-      const stepHasError =
-        (error?.type === QuoteErrorType.BRIDGE_LIMIT &&
-          error.swap.swapperId === swap.swapperId) ||
-        (error?.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE &&
-          error.recommendedSlippages?.has(index));
-      const stepHasWarning =
+      const hasBridgeLimitError =
+        error?.type === QuoteErrorType.BRIDGE_LIMIT &&
+        error.swap.swapperId === swap.swapperId;
+
+      const hasSlippageError =
+        error?.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE &&
+        error.recommendedSlippages?.has(index);
+
+      const hasSlippageWarning =
         warning?.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE &&
         warning.recommendedSlippages?.has(index);
 
+      const stepHasError = hasBridgeLimitError || hasSlippageError;
+      const stepHasWarning = hasSlippageWarning;
+
       if (stepHasError) {
         stepState = 'error';
       } else if (stepHasWarning) {
@@ -138,7 +148,7 @@ export function Quote(props: QuoteProps) {
         ? i18n.t('Slippage Error')
         : i18n.t('Slippage Warning');
 
-      if (error?.type === QuoteErrorType.BRIDGE_LIMIT) {
+      if (hasBridgeLimitError) {
         alertTitle = error?.recommendation;
       }
 
@@ -158,7 +168,7 @@ export function Quote(props: QuoteProps) {
           },
           price: {
             value:
-              index === 0
+              index === 0 && !internalSwap
                 ? numberToString(
                     input.value,
                     TOKEN_AMOUNT_MIN_DECIMALS,
@@ -213,83 +223,93 @@ export function Quote(props: QuoteProps) {
         state: stepState,
         alerts:
           stepHasError || stepHasWarning ? (
-            <FooterStepAlarm>
+            <FooterStepAlarm dense={fullExpandedMode}>
               <Alert
                 variant="alarm"
                 type={stepHasError ? 'error' : 'warning'}
                 title={alertTitle}
                 footer={
-                  <FooterAlert>
-                    {error?.type === QuoteErrorType.BRIDGE_LIMIT && (
-                      <>
-                        <Typography
-                          size="xsmall"
-                          variant="body"
-                          color="neutral900">
-                          {error.fromAmountRangeError}
-                        </Typography>
-                        <Divider direction="horizontal" size={8} />
-                        <Typography
-                          size="xsmall"
-                          variant="body"
-                          color="neutral900">
-                          |
-                        </Typography>
-                        <Divider direction="horizontal" size={8} />
-                        <Typography
-                          size="xsmall"
-                          variant="body"
-                          color="neutral900">
-                          {i18n.t({
-                            id: 'Yours: {amount} {symbol}',
-                            values: {
-                              amount: numberToString(
-                                swap.fromAmount,
-                                TOKEN_AMOUNT_MIN_DECIMALS,
-                                TOKEN_AMOUNT_MAX_DECIMALS
-                              ),
-                              symbol: swap?.from.symbol,
-                            },
-                          })}
-                        </Typography>
-                      </>
-                    )}
-                    {(error?.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE ||
-                      warning?.type ===
-                        QuoteWarningType.INSUFFICIENT_SLIPPAGE) && (
-                      <Typography
-                        size="xsmall"
-                        variant="body"
-                        color="neutral900">
-                        {i18n.t({
-                          id: 'Minimum required slippage is {minRequiredSlippage}',
-                          values: {
-                            ...(error?.type ===
-                              QuoteErrorType.INSUFFICIENT_SLIPPAGE && {
-                              minRequiredSlippage:
-                                error.recommendedSlippages?.get(index),
-                            }),
-                            ...(warning?.type ===
-                              QuoteWarningType.INSUFFICIENT_SLIPPAGE && {
-                              minRequiredSlippage:
-                                warning.recommendedSlippages?.get(index),
-                            }),
-                          },
-                        })}
-                      </Typography>
-                    )}
-                  </FooterAlert>
+                  !fullExpandedMode ? (
+                    <FooterAlert>
+                      {hasBridgeLimitError && (
+                        <>
+                          <Typography
+                            size="xsmall"
+                            variant="body"
+                            color="neutral900">
+                            {error.fromAmountRangeError}
+                          </Typography>
+                          <Divider direction="horizontal" size={8} />
+                          <Typography
+                            size="xsmall"
+                            variant="body"
+                            color="neutral900">
+                            |
+                          </Typography>
+                          <Divider direction="horizontal" size={8} />
+                          <Typography
+                            size="xsmall"
+                            variant="body"
+                            color="neutral900">
+                            {i18n.t({
+                              id: 'Yours: {amount} {symbol}',
+                              values: {
+                                amount: numberToString(
+                                  swap.fromAmount,
+                                  TOKEN_AMOUNT_MIN_DECIMALS,
+                                  TOKEN_AMOUNT_MAX_DECIMALS
+                                ),
+                                symbol: swap?.from.symbol,
+                              },
+                            })}
+                          </Typography>
+                        </>
+                      )}
+                      {(hasSlippageError || hasSlippageWarning) &&
+                        !hasBridgeLimitError && (
+                          <Typography
+                            size="xsmall"
+                            variant="body"
+                            color="neutral900">
+                            {i18n.t({
+                              id: 'Minimum required slippage is {minRequiredSlippage}',
+                              values: {
+                                ...(error?.type ===
+                                  QuoteErrorType.INSUFFICIENT_SLIPPAGE && {
+                                  minRequiredSlippage:
+                                    error.recommendedSlippages?.get(index),
+                                }),
+                                ...(warning?.type ===
+                                  QuoteWarningType.INSUFFICIENT_SLIPPAGE && {
+                                  minRequiredSlippage:
+                                    warning.recommendedSlippages?.get(index),
+                                }),
+                              },
+                            })}
+                          </Typography>
+                        )}
+                    </FooterAlert>
+                  ) : null
                 }
               />
             </FooterStepAlarm>
           ) : undefined,
+        time: roundedSecondsToString(swap.estimatedTimeInSeconds),
+        fee: numberToString(
+          getUsdFeeOfStep(swap, tokens),
+          GAS_FEE_MIN_DECIMALS,
+          GAS_FEE_MAX_DECIMALS
+        ),
+        internalSwaps: swap.internalSwaps
+          ? getQuoteSteps(swap.internalSwaps)
+          : undefined,
       };
     });
   };
   const steps = getQuoteSteps(quote?.swaps ?? []);
 
   const numberOfSteps = steps.length;
-  const container = getContainer();
+  const container = propContainer || getContainer();
   const sortedQuoteTags = sortTags(props.quote.tags || []);
   const showAllRoutesButton = !!onClickAllRoutes;
   const totalTime = roundedSecondsToString(totalArrivalTime(quote?.swaps));
@@ -392,8 +412,8 @@ export function Quote(props: QuoteProps) {
             <Tooltip
               content={formatTooltipNumbers(output.usdValue)}
               container={container}
-              style={{
-                display: 'flex',
+              styles={{
+                root: { display: 'flex' },
               }}>
               <Typography
                 color="$neutral600"
@@ -448,6 +468,7 @@ export function Quote(props: QuoteProps) {
           quoteRef={quoteRef}
           selected={selected}
           setExpanded={setExpanded}
+          container={container}
           expanded={expanded}
           steps={steps}
         />

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

@@ -15,6 +15,7 @@ export type QuoteProps = {
   showModalFee?: boolean;
   onClickAllRoutes?: () => void;
   fullExpandedMode?: boolean;
+  container?: HTMLElement;
 };
 
 export type optionProps = {
@@ -29,6 +30,7 @@ export type QuoteTriggerProps = {
   setExpanded: React.Dispatch<React.SetStateAction<boolean | undefined>>;
   steps: Step[];
   expanded?: boolean;
+  container?: HTMLElement;
 };
 
 export type QuoteTriggerImagesProps = {
@@ -37,6 +39,7 @@ export type QuoteTriggerImagesProps = {
   src: string;
   open?: boolean;
   className?: string;
+  container?: HTMLElement;
 };
 
 export type QuoteCostDetailsProps = {

package/src/components/Quote/QuoteTrigger.tsx

@@ -27,8 +27,8 @@ const MAX_STEPS = 4;
 const MAX_BLOCKCHAINS = 6;
 
 const ImageComponent = (props: QuoteTriggerImagesProps) => {
-  const tooltipContainer = getContainer();
-  const { content, src, className, open, state } = props;
+  const { content, src, className, open, state, container } = props;
+  const tooltipContainer = container || getContainer();
   return (
     <Tooltip
       container={tooltipContainer}
@@ -44,8 +44,9 @@ const ImageComponent = (props: QuoteTriggerImagesProps) => {
 };
 
 export function QuoteTrigger(props: QuoteTriggerProps) {
-  const { quoteRef, selected, setExpanded, steps, expanded, type } = props;
-  const tooltipContainer = getContainer();
+  const { quoteRef, selected, setExpanded, steps, expanded, type, container } =
+    props;
+  const tooltipContainer = container || getContainer();
   const numberOfSteps = steps.length;
   const blockchains = getUniqueBlockchains(steps);
   const { isTablet, isMobile } = useScreenDetect();
@@ -78,6 +79,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
                 content={step.swapper.displayName}
                 src={step.swapper.image}
                 state={step.state}
+                container={container}
               />
               {index !== numberOfSteps - 1 && <>{arrow}</>}
             </React.Fragment>
@@ -90,6 +92,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
                     content={step.swapper.displayName}
                     src={step.swapper.image}
                     state={step.state}
+                    container={container}
                   />
                   {index !== numberOfSteps - 1 && <>{arrow}</>}
                 </>
@@ -98,7 +101,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
                   <Tooltip
                     container={tooltipContainer}
                     side="bottom"
-                    align="right"
+                    align="end"
                     sideOffset={4}
                     content={
                       <div className={rowStyles()}>
@@ -169,7 +172,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
                     <Tooltip
                       container={tooltipContainer}
                       side="bottom"
-                      align="right"
+                      align="end"
                       sideOffset={4}
                       content={
                         <div className={rowStyles()}>
@@ -182,6 +185,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
                                   src={chain.image}
                                   open={false}
                                   className={i > index ? 'blockchainImage' : ''}
+                                  container={container}
                                 />
                               )
                           )}

package/src/components/Quotes/Quotes.tsx

@@ -27,6 +27,7 @@ export function Quotes(props: PropTypes) {
     showModalFee,
     hasSort = true,
     fullExpandedMode = false,
+    container: propContainer,
   } = props;
   const {
     selectedQuote,
@@ -39,6 +40,7 @@ export function Quotes(props: PropTypes) {
   } = useQuoteStore();
   const { slippage, customSlippage } = useAppStore();
   const tokens = useAppStore().tokens();
+  const container = propContainer || getContainer();
   const hasQuotes = !!quotes && quotes.results.length;
   const userSlippage = customSlippage ?? slippage;
   const getQuoteWarning = (quote: MultiRouteSimulationResult) => {
@@ -73,7 +75,7 @@ export function Quotes(props: PropTypes) {
             <Typography size="xmedium" variant="title">
               {i18n.t('Sort by')}
             </Typography>
-            <SelectStrategy container={getContainer()} />
+            <SelectStrategy container={container} />
           </StrategyContent>
           <Divider size="10" />
         </>
@@ -107,6 +109,7 @@ export function Quotes(props: PropTypes) {
                   <React.Fragment key={quote.requestId}>
                     <QuoteInfo
                       showModalFee={showModalFee}
+                      container={container}
                       selected={selectedQuote?.requestId === quote.requestId}
                       tagHidden={false}
                       quote={{ ...quote, requestAmount: quotes.requestAmount }}

package/src/components/Quotes/Quotes.types.ts

@@ -7,4 +7,5 @@ export type PropTypes = {
   showModalFee?: boolean;
   hasSort?: boolean;
   fullExpandedMode?: boolean;
+  container?: HTMLElement;
 };

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

@@ -75,18 +75,24 @@ export const getSteps = ({
         ? step.internalSwaps.map((internalSwap) => {
             return {
               from: {
-                blockchain:
-                  getBlockchainShortNameFor(
-                    internalSwap.fromBlockchain,
-                    blockchains
-                  ) ?? '',
+                chain: {
+                  displayName:
+                    getBlockchainShortNameFor(
+                      internalSwap.fromBlockchain,
+                      blockchains
+                    ) ?? '',
+                  image: internalSwap.fromBlockchainLogo ?? '',
+                },
               },
               to: {
-                blockchain:
-                  getBlockchainShortNameFor(
-                    internalSwap.toBlockchain,
-                    blockchains
-                  ) ?? '',
+                chain: {
+                  displayName:
+                    getBlockchainShortNameFor(
+                      internalSwap.toBlockchain,
+                      blockchains
+                    ) ?? '',
+                  image: internalSwap.toBlockchainLogo ?? '',
+                },
               },
               swapper: {
                 displayName: getSwapperDisplayName(

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

@@ -1,4 +1,4 @@
-import { css, darkTheme, styled } from '@rango-dev/ui';
+import { css, darkTheme, styled, Typography } from '@rango-dev/ui';
 
 import { ScrollableArea } from '../Layout';
 
@@ -85,3 +85,12 @@ export const StyledLink = styled('a', {
   alignItems: 'center',
   justifyContent: 'center',
 });
+
+export const ErrorMessages = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '$5',
+});
+export const MessageText = styled(Typography, {
+  wordBreak: 'break-all',
+});

package/src/components/SwapDetails/SwapDetails.tsx

@@ -64,7 +64,9 @@ import {
 
 import { getSteps, getStepState, RESET_INTERVAL } from './SwapDetails.helpers';
 import {
+  ErrorMessages,
   HeaderDetails,
+  MessageText,
   outputStyles,
   requestIdStyles,
   rowStyles,
@@ -211,36 +213,55 @@ export function SwapDetails(props: SwapDetailsProps) {
 
   const percentageChange = getPriceImpact(inputUsdValue, outputUsdValue);
 
+  const stepDetailMessage =
+    stepMessage.detailedMessage.content || stepMessage.shortMessage;
+
   const completeModalDesc =
-    swap.status === 'success'
-      ? i18n.t({
-          id: 'You have received {amount} {token} in {conciseAddress} wallet on {chain} chain.',
-          values: {
-            amount: numberToString(
-              outputAmount,
-              TOKEN_AMOUNT_MIN_DECIMALS,
-              TOKEN_AMOUNT_MAX_DECIMALS
-            ),
-            token: steps[numberOfSteps - 1].to.token.displayName,
-            conciseAddress: getConciseAddress(
-              swap.wallets[steps[numberOfSteps - 1].to.chain.displayName]
-                ?.address || ''
-            ),
-            chain: steps[numberOfSteps - 1].to.chain.displayName,
-          },
-        })
-      : `${i18n.t('Transaction was not sent.')} ${
-          lastConvertedTokenInFailedSwap
-            ? i18n.t({
+    swap.status === 'success' ? (
+      i18n.t({
+        id: 'You have received {amount} {token} in {conciseAddress} wallet on {chain} chain.',
+        values: {
+          amount: numberToString(
+            outputAmount,
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
+          ),
+          token: steps[numberOfSteps - 1].to.token.displayName,
+          conciseAddress: getConciseAddress(
+            swap.wallets[steps[numberOfSteps - 1].to.chain.displayName]
+              ?.address || ''
+          ),
+          chain: steps[numberOfSteps - 1].to.chain.displayName,
+        },
+      })
+    ) : (
+      <ErrorMessages>
+        <Typography
+          variant="body"
+          size="medium"
+          color="neutral700"
+          align="center">
+          {!stepDetailMessage ? i18n.t('Transaction was not sent.') : ''}
+          {lastConvertedTokenInFailedSwap
+            ? `${i18n.t({
                 id: '{amount} {symbol} on {blockchain} remain in your wallet',
                 values: {
                   amount: lastConvertedTokenInFailedSwap.outputAmount,
                   symbol: lastConvertedTokenInFailedSwap.symbol,
                   blockchain: lastConvertedTokenInFailedSwap.blockchain,
                 },
-              })
-            : ''
-        }`;
+              })}`
+            : ''}
+        </Typography>
+        <MessageText
+          align="center"
+          variant="body"
+          size="medium"
+          color="neutral700">
+          {stepDetailMessage}
+        </MessageText>
+      </ErrorMessages>
+    );
 
   return (
     <Layout

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.Failed.tsx

@@ -1,13 +1,12 @@
 import type { FailedAlertsProps } from './SwapDetailsAlerts.types';
 
-import {
-  Alert,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  IconButton,
-} from '@rango-dev/ui';
+import { Alert, ChevronDownIcon, IconButton } from '@rango-dev/ui';
 import React, { useState } from 'react';
 
+import { MessageText } from '../SwapDetails/SwapDetails.styles';
+
+import { ActionIcon, AlertFooter } from './SwapDetailsAlerts.styles';
+
 export function FailedAlert(props: FailedAlertsProps) {
   const { message } = props;
   const [showContentError, setShowContentError] = useState(false);
@@ -16,21 +15,30 @@ export function FailedAlert(props: FailedAlertsProps) {
     <Alert
       type="error"
       title={message.shortMessage}
+      containerStyles={{
+        '& .footer': {
+          paddingTop: '$0',
+        },
+      }}
       action={
         message.detailedMessage.content && (
           <IconButton
             onClick={() => setShowContentError((prev) => !prev)}
             variant="ghost"
             size="xsmall">
-            {showContentError ? (
-              <ChevronUpIcon size={12} color="gray" />
-            ) : (
+            <ActionIcon rotated={showContentError}>
               <ChevronDownIcon size={12} color="gray" />
-            )}
+            </ActionIcon>
           </IconButton>
         )
       }
-      footer={showContentError ? message.detailedMessage.content : undefined}
+      footer={
+        <AlertFooter open={showContentError}>
+          <MessageText variant="body" size="xsmall" color="neutral700">
+            {message.detailedMessage.content}
+          </MessageText>
+        </AlertFooter>
+      }
     />
   );
 }

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.styles.ts

@@ -5,3 +5,27 @@ export const Alerts = styled('div', {
   flexDirection: 'column',
   gap: '$10',
 });
+
+export const ActionIcon = styled('div', {
+  transition: 'transform 0.3s ease-in-out',
+  variants: {
+    rotated: {
+      true: {
+        transform: 'rotate(180deg)',
+      },
+    },
+  },
+});
+
+export const AlertFooter = styled('div', {
+  transition: 'max-height 0.3s ease-in-out',
+  maxHeight: '0px',
+  overflow: 'hidden',
+  variants: {
+    open: {
+      true: {
+        maxHeight: '200px',
+      },
+    },
+  },
+});