@rango-dev/ui 0.1.11-next.5 → 0.1.11-next.8

package/dist/components/SwapDetail/Token.d.ts

@@ -10,6 +10,7 @@ interface PropTypes {
             name: string;
         };
         amount: string;
+        estimatedAmount?: string;
     };
 }
 export declare function Token(props: PropTypes): JSX.Element;

package/dist/components/TextField/TextField.d.ts

@@ -7,4 +7,4 @@ export declare type PropTypes = {
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'size'> & {
     ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
 };
-export declare const TextField: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<PropTypes>, "color" | "content" | "height" | "translate" | "width" | "label" | "prefix" | "size" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "src" | "step" | "type" | "value" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "suffix"> & React.RefAttributes<HTMLInputElement>>;
+export declare const TextField: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<PropTypes>, "color" | "content" | "height" | "translate" | "width" | "hidden" | "label" | "prefix" | "size" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "src" | "step" | "type" | "value" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "suffix"> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Typography/Typography.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from '@stitches/react';
 import { PropsWithChildren } from 'react';
 export interface PropTypes {
-    variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body1' | 'body2' | 'body3' | 'caption';
+    variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'title' | 'body1' | 'body2' | 'body3' | 'caption';
     align?: 'center' | 'left' | 'right';
     noWrap?: boolean;
     mt?: 2 | 4 | 8 | 12;

package/dist/containers/ConfirmSwap/ConfirmSwap.d.ts

@@ -1,5 +1,6 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
 import { SelectableWallet } from '../../types';
+declare type Message = string | ReactNode;
 export interface PropTypes {
     onBack: () => void;
     onConfirm?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
@@ -13,8 +14,9 @@ export interface PropTypes {
     previewInputs?: ReactNode;
     previewRoutes?: ReactNode;
     confirmButtonTitle: string;
-    errors?: ReactNode[];
-    warnings?: ReactNode[];
+    errors?: Message[];
+    warnings?: Message[];
     extraMessages?: ReactNode;
 }
 export declare function ConfirmSwap(props: PropsWithChildren<PropTypes>): JSX.Element;
+export {};

package/dist/ui.cjs.development.js

@@ -1492,6 +1492,13 @@ var TypographyContainer = /*#__PURE__*/styled('span', {
           fontSize: '$18'
         }
       },
+      title: {
+        fontSize: '$14',
+        fontWeight: '$500',
+        '@md': {
+          fontSize: '$15'
+        }
+      },
       body1: {
         fontSize: '$14',
         fontWeight: '$400',
@@ -1716,13 +1723,13 @@ function StepDetail(props) {
     pl: direction === 'horizontal'
   }, amount && React__default.createElement(Typography, {
     noWrap: true,
-    variant: direction === 'vertical' ? 'body2' : 'h6'
+    variant: direction === 'vertical' ? 'body2' : 'title'
   }, amount), !amount && estimatedAmount && React__default.createElement(Typography, {
     noWrap: true,
-    variant: direction === 'vertical' ? 'body2' : 'h6',
-    color: '$neutrals500'
+    variant: direction === 'vertical' ? 'body2' : 'title',
+    color: '$neutrals600'
   }, estimatedAmount), "\xA0", React__default.createElement(Typography, {
-    variant: direction === 'vertical' ? 'body2' : 'h6',
+    variant: direction === 'vertical' ? 'body2' : 'title',
     noWrap: true
   }, symbol), React__default.createElement(SubTitle, {
     noWrap: true,
@@ -2651,6 +2658,7 @@ var InputContainer = /*#__PURE__*/styled('div', {
   position: 'relative',
   alignItems: 'center',
   color: '$foreground',
+  overflowX: 'hidden',
   transition: 'border-color ease .3s',
   '&:focus-within': {
     borderColor: '$success',
@@ -3001,7 +3009,7 @@ function Alert(props) {
     }
   }, title && React__default.createElement(React__default.Fragment, null, React__default.createElement(Typography, {
     className: "title",
-    variant: "h6",
+    variant: "title",
     color: type
   }, title), !!children && React__default.createElement(Spacer, {
     size: 8,
@@ -3232,7 +3240,8 @@ function TokenSelector(props) {
 }
 
 var ListContainer$1 = /*#__PURE__*/styled('div', {
-  overflowY: 'auto'
+  overflowY: 'auto',
+  padding: '0 $4'
 });
 var filterBlockchains = function filterBlockchains(list, searchedFor) {
   return list.filter(function (blockchain) {
@@ -3574,7 +3583,8 @@ var MainContainer$1 = /*#__PURE__*/styled('div', {
   variants: {
     loaded: {
       "true": {
-        overflowY: 'auto'
+        overflowY: 'auto',
+        padding: '0 $4'
       }
     }
   }
@@ -3946,13 +3956,13 @@ var SlippageChipsContainer = /*#__PURE__*/styled('div', {
 var LiquiditySourceContainer = /*#__PURE__*/styled(BaseContainer, {
   display: 'flex',
   justifyContent: 'space-between',
-  marginTop: '$32',
+  marginTop: '$16',
   cursor: 'pointer'
 });
 var InfiniteContainer = /*#__PURE__*/styled(BaseContainer, {
   display: 'flex',
   justifyContent: 'space-between',
-  marginTop: '$32'
+  marginTop: '$16'
 });
 var StyledAngleRight = /*#__PURE__*/styled(AngleRightIcon, {
   marginLeft: '$8'
@@ -3963,7 +3973,7 @@ var LiquiditySourceNumber = /*#__PURE__*/styled('div', {
   justifyContent: 'center'
 });
 var ThemesContainer = /*#__PURE__*/styled(BaseContainer, {
-  marginTop: '$32'
+  marginTop: '$16'
 });
 var Head = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -4085,14 +4095,14 @@ var MainContainer$2 = /*#__PURE__*/styled('div', {
   width: '100%',
   minWidth: '375px',
   maxWidth: '512px',
-  maxHeight: '595px',
   padding: '$16',
   boxSizing: 'border-box',
   backgroundColor: '$background',
   variants: {
     fixedHeight: {
       "true": {
-        height: '595px'
+        height: '595px',
+        maxHeight: '595px'
       },
       "false": {
         height: 'auto'
@@ -4118,6 +4128,9 @@ var TokenContainer = /*#__PURE__*/styled('div', {
   width: '160px',
   '& .amount': {
     fontWeight: 'bold'
+  },
+  '& .estimated': {
+    color: '$neutrals600'
   }
 });
 var TokenImage = /*#__PURE__*/styled('div', {
@@ -4138,23 +4151,30 @@ var TokenImage = /*#__PURE__*/styled('div', {
   }
 });
 function Token(props) {
+  var _props$data = props.data,
+    token = _props$data.token,
+    blockchain = _props$data.blockchain,
+    amount = _props$data.amount,
+    estimatedAmount = _props$data.estimatedAmount;
   return React__default.createElement(TokenContainer, null, React__default.createElement(TokenImage, null, React__default.createElement(Image, {
-    src: props.data.token.logo,
+    src: token.logo,
     alt: "",
     size: 24
   }), React__default.createElement("div", {
     className: "overlay"
   }, React__default.createElement(Image, {
-    src: props.data.blockchain.logo,
-    alt: props.data.blockchain.name,
+    src: blockchain.logo,
+    alt: blockchain.name,
     size: 12
   }))), React__default.createElement(Spacer, {
     size: 8
-  }), React__default.createElement("span", {
+  }), !!amount && React__default.createElement("span", {
     className: "amount"
-  }, props.data.amount), React__default.createElement(Spacer, {
+  }, props.data.amount), !amount && estimatedAmount && React__default.createElement("span", {
+    className: "amount estimated"
+  }, props.data.estimatedAmount), React__default.createElement(Spacer, {
     size: 4
-  }), props.data.token.symbol);
+  }), token.symbol);
 }
 
 var Container$3 = /*#__PURE__*/styled('div', {
@@ -4173,12 +4193,6 @@ var Container$3 = /*#__PURE__*/styled('div', {
     fontWeight: 'bold',
     fontSize: '$12'
   },
-  '&.running': {
-    color: '$foreground'
-  },
-  '&.failed,&.success': {
-    color: '$neutrals600'
-  },
   '&.failed .status': {
     color: '$error'
   },
@@ -4208,7 +4222,6 @@ function SwapDetail(_ref) {
         symbol: firstStep.fromSymbol
       },
       blockchain: {
-        // @ts-ignore
         logo: firstStep.fromBlockchainLogo || '',
         name: firstStep.fromBlockchain
       },
@@ -4227,11 +4240,11 @@ function SwapDetail(_ref) {
         symbol: lastStep.toSymbol
       },
       blockchain: {
-        // @ts-ignore
-        logo: lastStep.toBlockchainLogo,
+        logo: lastStep.toBlockchainLogo || '',
         name: lastStep.toBlockchain
       },
-      amount: limitDecimalPlaces(lastStep.outputAmount || lastStep.expectedOutputAmountHumanReadable || '')
+      amount: limitDecimalPlaces(lastStep.outputAmount || ''),
+      estimatedAmount: limitDecimalPlaces(lastStep.expectedOutputAmountHumanReadable || '')
     }
   })), React__default.createElement("div", {
     className: "status"
@@ -4405,7 +4418,7 @@ function Drawer(props) {
     anchor: anchor,
     style: containerStyle
   }, React__default.createElement(DrawerHeader, null, React__default.createElement(Typography, {
-    variant: "h4"
+    variant: "h6"
   }, title), showClose && React__default.createElement(CloseIcon, {
     size: 24,
     onClick: onClose
@@ -4482,17 +4495,25 @@ function ConfirmSwap(props) {
   }, React__default.createElement(MainContainer$3, null, React__default.createElement("div", null, extraMessages || null, React__default.createElement(Alerts, null, errors == null ? void 0 : errors.map(function (error, index) {
     return React__default.createElement(React__default.Fragment, null, React__default.createElement(Spacer, {
       direction: "vertical"
-    }), React__default.createElement(Alert, {
+    }), React__default.createElement(Alert, Object.assign({
       type: "error",
       key: index
-    }, error));
+    }, typeof error === 'string' ? {
+      title: error
+    } : {
+      children: error
+    })));
   }), warnings == null ? void 0 : warnings.map(function (warning, index) {
     return React__default.createElement(React__default.Fragment, null, React__default.createElement(Spacer, {
       direction: "vertical"
-    }), React__default.createElement(Alert, {
+    }), React__default.createElement(Alert, Object.assign({
       type: "warning",
       key: index
-    }, warning));
+    }, typeof warning === 'string' ? {
+      title: warning
+    } : {
+      children: warning
+    })));
   }))), props.previewInputs || props.previewRoutes ? React__default.createElement(Section, null, props.previewInputs, !!props.previewRoutes ? React__default.createElement(Spacer, {
     size: 16,
     direction: "vertical"
@@ -4512,7 +4533,7 @@ function ConfirmSwap(props) {
       variant: "body2"
     }, "Your ", wallet, " Wallet")), list.length === 0 && React__default.createElement(React__default.Fragment, null, React__default.createElement(AlertContainer, null, React__default.createElement(Alert, {
       type: "error"
-    }, "You need to connect a compatible wallet with ", wallet)), (isExperimentalChain == null ? void 0 : isExperimentalChain(wallet)) && React__default.createElement(Button, {
+    }, "You need to connect a compatible wallet with ", wallet, ".")), (isExperimentalChain == null ? void 0 : isExperimentalChain(wallet)) && React__default.createElement(Button, {
       variant: "contained",
       type: "primary",
       align: "grow",
@@ -4556,7 +4577,6 @@ var SwapsGroup = function SwapsGroup(props) {
       key: index
     }, React__default.createElement(Typography, {
       variant: "body2",
-      color: "neutrals600",
       className: "group-title"
     }, group.title), group.swaps.map(function (swap, index) {
       return React__default.createElement(React__default.Fragment, null, React__default.createElement(SwapDetail, {
@@ -4581,7 +4601,7 @@ function History(_ref) {
   return React__default.createElement(SecondaryPage, {
     onBack: onBack,
     textField: true,
-    textFieldPlaceholder: "Search by Blockchain/Token/Request Id",
+    textFieldPlaceholder: "Search by Network, Token or Request ID",
     title: "Swaps"
   }, function (searchedFor) {
     var filterSwaps = filteredHistory(list, searchedFor);
@@ -4635,21 +4655,21 @@ var SwapMessages = function SwapMessages(props) {
       onClick: props.switchNetwork
     }, "Change network to ", currentStepBlockchain)
   }), !!detailedMessage.content ? React__default.createElement(DetailedMessage, null, React__default.createElement(Typography, {
-    variant: "body2"
+    variant: "body3"
   }, shouldShowMoreDetailsButton && !expandedMessage ? detailedMessage.content.substring(0, allowedNumberOfChars) + (allowedNumberOfChars > 0 ? '...' : '') : detailedMessage.content)) : null, !!lastConvertedTokenInFailedSwap && React__default.createElement(React__default.Fragment, null, React__default.createElement("p", null, React__default.createElement(Typography, {
-    variant: "body2"
+    variant: "body3"
   }, "Don't worry, your fund is\xA0"), React__default.createElement(SuccessText, {
-    variant: "body2"
+    variant: "body3"
   }, React__default.createElement("b", null, "Safe"))), React__default.createElement("p", null, React__default.createElement(Typography, {
-    variant: "body2"
+    variant: "body3"
   }, "It is converted to \xA0", React__default.createElement("u", null, lastConvertedTokenInFailedSwap.outputAmount), "\xA0"), React__default.createElement(SuccessText, {
-    variant: "body2"
+    variant: "body3"
   }, React__default.createElement("b", null, lastConvertedTokenInFailedSwap.symbol, "\xA0")), React__default.createElement(Typography, {
-    variant: "body2"
+    variant: "body3"
   }, "on your\xA0"), React__default.createElement(SuccessText, {
-    variant: "body2"
+    variant: "body3"
   }, React__default.createElement("b", null, lastConvertedTokenInFailedSwap.blockchain, "\xA0")), React__default.createElement(Typography, {
-    variant: "body2"
+    variant: "body3"
   }, "wallet"))));
 };
 
@@ -4672,7 +4692,7 @@ var SwapperContainer$1 = /*#__PURE__*/styled('div', {
   }
 });
 var FeeContainer = /*#__PURE__*/styled('div', {
-  paddingLeft: '$4'
+  paddingLeft: '$16'
 });
 var Fee = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -4698,8 +4718,7 @@ var ArrowDown = /*#__PURE__*/styled('div', {
 });
 var StyledAnchor = /*#__PURE__*/styled('a', {
   color: '$primary',
-  fontWeight: '$600',
-  marginLeft: '$12'
+  fontWeight: '$600'
 });
 var SwapInfoContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -4708,11 +4727,14 @@ var SwapInfoContainer = /*#__PURE__*/styled('div', {
   borderBottom: '1px solid $neutrals300'
 });
 var InternalDetailsContainer = /*#__PURE__*/styled('div', {
-  display: 'flex'
+  display: 'flex',
+  '.details': {
+    padding: '$8 0'
+  }
 });
 var InternalDetail = /*#__PURE__*/styled('div', {
   display: 'flex',
-  padding: '$10'
+  margin: '$12 0 $12 $20'
 });
 var DescriptionContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -4720,7 +4742,7 @@ var DescriptionContainer = /*#__PURE__*/styled('div', {
 });
 var Description = /*#__PURE__*/styled(Typography, {
   color: '$success',
-  marginLeft: '$8'
+  paddingLeft: '$4'
 });
 var Line$1 = /*#__PURE__*/styled('div', {
   width: '0',
@@ -4741,7 +4763,8 @@ var Row$2 = /*#__PURE__*/styled('div', {
   '.value': {
     display: 'flex',
     alignItems: 'center',
-    color: '$neutrals800'
+    color: '$neutrals800',
+    justifyContent: 'flex-end'
   },
   '.status': {
     fontWeight: 'bold',
@@ -4755,7 +4778,6 @@ var Row$2 = /*#__PURE__*/styled('div', {
   }
 });
 var RequestId = /*#__PURE__*/styled('div', {
-  width: '150px',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -4764,13 +4786,13 @@ var RequestId = /*#__PURE__*/styled('div', {
   }
 });
 var ExtraDetails = /*#__PURE__*/styled('div', {
-  padding: '$8 0',
+  padding: '0',
   color: '$neutrals600',
-  fontSize: '$12'
+  fontSize: '$10'
 });
 var SwapFlowContainer = /*#__PURE__*/styled('div', {
   overflowY: 'auto',
-  paddingTop: '$8'
+  padding: '$8 $4 $2 $4'
 });
 function SwapHistory(props) {
   var pendingSwap = props.pendingSwap,
@@ -4801,7 +4823,7 @@ function SwapHistory(props) {
     }, "Try again"))
   }, React__default.createElement("div", null, React__default.createElement(SwapInfoContainer, null, React__default.createElement(Row$2, null, React__default.createElement("div", {
     className: "name"
-  }, "Request ID:"), React__default.createElement("div", {
+  }, "Request Id:", React__default.createElement("span", {
     className: "value requestId",
     onClick: onCopy.bind(null, pendingSwap == null ? void 0 : pendingSwap.requestId)
   }, React__default.createElement(RequestId, null, pendingSwap == null ? void 0 : pendingSwap.requestId), React__default.createElement(Spacer, {
@@ -4810,15 +4832,15 @@ function SwapHistory(props) {
     type: "primary",
     variant: "ghost",
     size: "compact"
-  }, isCopied ? 'Copied!' : 'Copy'))), React__default.createElement(Row$2, null, React__default.createElement("div", {
+  }, isCopied ? 'Copied!' : 'Copy'))), React__default.createElement("div", {
     className: "name"
-  }, "Status:"), React__default.createElement("div", {
+  }, React__default.createElement("span", {
     className: "value status " + ((pendingSwap == null ? void 0 : pendingSwap.status) || '')
   }, pendingSwap == null ? void 0 : pendingSwap.status, (pendingSwap == null ? void 0 : pendingSwap.status) === 'running' && React__default.createElement(Spinner, {
     size: 16,
     color: "primary"
-  }))), React__default.createElement(ExtraDetails, null, date))), React__default.createElement(SwapFlowContainer, null, extraMessageProps.shortMessage && React__default.createElement(SwapMessages, Object.assign({}, extraMessageProps)), React__default.createElement(Divider, {
-    size: 32
+  })), React__default.createElement(ExtraDetails, null, date))))), React__default.createElement(SwapFlowContainer, null, extraMessageProps.shortMessage && React__default.createElement(SwapMessages, Object.assign({}, extraMessageProps)), React__default.createElement(Divider, {
+    size: 16
   }), pendingSwap == null ? void 0 : pendingSwap.steps.map(function (step, index) {
     return React__default.createElement("div", {
       key: index
@@ -4837,29 +4859,33 @@ function SwapHistory(props) {
       size: 20
     }), React__default.createElement(FeeContainer, null, React__default.createElement(Typography, {
       variant: "caption"
-    }, step.swapperType, " from ", step.fromSymbol, " to ", step.toSymbol, "\xA0 via ", step.swapperId), React__default.createElement(Fee, null, React__default.createElement(GasIcon, null), React__default.createElement(Typography, {
+    }, step.swapperType === 'DEX' ? 'Swap' : 'Bridge', " via", ' ', step.swapperId), React__default.createElement(Fee, null, React__default.createElement(GasIcon, null), React__default.createElement(Typography, {
       variant: "caption"
     }, "\xA0 $", step.feeInUsd, " estimated gas fee")))), React__default.createElement("div", {
       style: {
         display: 'flex'
       }
-    }, React__default.createElement(InternalDetailsContainer, null, React__default.createElement(Line$1, null), React__default.createElement("div", null, !!step.explorerUrl && React__default.createElement("div", null, step.explorerUrl.map(function (item, index) {
+    }, React__default.createElement(InternalDetailsContainer, null, React__default.createElement(Line$1, null), React__default.createElement("div", {
+      className: "details"
+    }, !!step.explorerUrl && React__default.createElement("div", null, step.explorerUrl.map(function (item, index) {
       return React__default.createElement(InternalDetail, {
         key: index
-      }, React__default.createElement(DescriptionContainer, null, React__default.createElement(CheckCircleIcon, {
-        color: "success"
+      }, React__default.createElement(DescriptionContainer, null, React__default.createElement(Divider, {
+        size: 4
+      }), React__default.createElement(CheckCircleIcon, {
+        color: "primary"
       }), React__default.createElement(Description, {
-        variant: "body2"
-      }, !item.description ? React__default.createElement("b", null, "View transaction") : React__default.createElement("b", null, item.description.substring(0, 1).toUpperCase(), item.description.substring(1)))), React__default.createElement(StyledAnchor, {
+        variant: "body3"
+      }, React__default.createElement(StyledAnchor, {
         href: item.url,
         target: "_blank",
         rel: "noreferrer",
         key: index
-      }, "TX-Link"));
+      }, !item.description ? React__default.createElement("b", null, "View transaction") : React__default.createElement("b", null, item.description.substring(0, 1).toUpperCase(), item.description.substring(1), " Tx")))));
     })), step.status === 'failed' && React__default.createElement(InternalDetail, null, React__default.createElement(DescriptionContainer, null, React__default.createElement(InfoCircleIcon, {
       color: "error"
     }), React__default.createElement(Description, {
-      variant: "body2",
+      variant: "body3",
       color: "$error500"
     }, "Step failed")))))), index + 1 === pendingSwap.steps.length && React__default.createElement(ArrowDown, null), React__default.createElement(StepDetail, {
       logo: step.toLogo,
@@ -4880,10 +4906,9 @@ function SwapHistory(props) {
     title: "Cancel Progress",
     content: React__default.createElement(Alert, {
       type: "warning"
-    }, React__default.createElement("p", null, "Warning: Rango ", React__default.createElement("u", null, "neither reverts"), " your transaction\xA0", React__default.createElement("u", null, "nor refunds"), " you if you've already signed and sent a transaction to the blockchain since it's out of Rango's control. Beware that \"Cancel\" only stops next steps from being executed."), React__default.createElement(Spacer, {
-      size: 12,
-      direction: "vertical"
-    }), React__default.createElement("p", null, "If you have already signed your transaction to blockchain, you should wait for that to complete or rollback")),
+    }, React__default.createElement(Typography, {
+      variant: "body2"
+    }, "Warning: Cancel ", React__default.createElement("u", null, "doesn't revert"), " your transaction if you've already signed and sent a transaction to the blockchain. It only stops next steps from being executed.")),
     footer: React__default.createElement("div", {
       style: {
         display: 'flex',