@rango-dev/ui 0.1.10-next.87 → 0.1.10-next.90

package/dist/components/Radio/Radio.d.ts

@@ -5,7 +5,7 @@ export interface PropTypes {
         label: string;
         value: string;
     }[];
-    defaultValue: string;
+    value: string;
     onChange: (value: string) => void;
     direction?: 'vertical' | 'horizontal';
     style?: CSSProperties;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PropTypes } from './TextField';
-declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, Pick<React.PropsWithChildren<PropTypes>, "form" | "label" | "slot" | "style" | "title" | "pattern" | "type" | "children" | "list" | "onChange" | "onClick" | "size" | "prefix" | "suffix" | "disabled" | "id" | "defaultChecked" | "checked" | "name" | "color" | "content" | "className" | "height" | "lang" | "max" | "min" | "width" | "role" | "tabIndex" | "crossOrigin" | "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" | "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" | "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" | "translate" | "step" | "defaultValue" | "accept" | "alt" | "autoComplete" | "capture" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "maxLength" | "minLength" | "multiple" | "placeholder" | "readOnly" | "required" | "src" | "value" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is"> & React.RefAttributes<HTMLInputElement>>;
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, Pick<React.PropsWithChildren<PropTypes>, "form" | "label" | "slot" | "style" | "title" | "pattern" | "type" | "children" | "list" | "onChange" | "onClick" | "size" | "prefix" | "suffix" | "disabled" | "id" | "defaultChecked" | "checked" | "name" | "color" | "content" | "className" | "height" | "lang" | "max" | "min" | "width" | "role" | "tabIndex" | "crossOrigin" | "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" | "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" | "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" | "translate" | "step" | "value" | "accept" | "alt" | "autoComplete" | "capture" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "maxLength" | "minLength" | "multiple" | "placeholder" | "readOnly" | "required" | "src" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is"> & React.RefAttributes<HTMLInputElement>>;
 export default _default;
 export declare const Main: (args: PropTypes) => JSX.Element;
 export declare const WithPrefix: (args: PropTypes) => JSX.Element;

package/dist/components/TokenSelector/TokenSelector.d.ts

@@ -3,7 +3,7 @@ import { TokenWithAmount } from '../TokenList/TokenList';
 export interface PropTypes {
     list: TokenWithAmount[];
     type?: 'Source' | 'Destination';
-    selected?: TokenWithAmount;
+    selected: TokenWithAmount | null;
     onChange: (token: TokenWithAmount) => void;
     hasHeader?: boolean;
     multiSelect?: boolean;

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

@@ -1,3 +1,4 @@
+import { CSSProperties } from '@stitches/react';
 import { PropsWithChildren } from 'react';
 export interface PropTypes {
     variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body1' | 'body2' | 'caption';
@@ -7,8 +8,10 @@ export interface PropTypes {
     mb?: 2 | 4 | 8 | 12;
     ml?: 2 | 4 | 8 | 12;
     mr?: 2 | 4 | 8 | 12;
+    className?: string;
+    style?: CSSProperties;
 }
-export declare function Typography({ children, ...props }: PropsWithChildren<PropTypes>): JSX.Element;
+export declare function Typography({ children, className, ...props }: PropsWithChildren<PropTypes>): JSX.Element;
 export declare namespace Typography {
     var toString: () => string;
 }

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

@@ -1,5 +1,5 @@
-import { BestRouteResponse } from 'rango-sdk';
 import React, { PropsWithChildren, ReactNode } from 'react';
+import { BestRouteWithFee } from '../../types/swaps';
 export declare const Line: any;
 export declare const SwapperContainer: any;
 export declare const BodyError: any;
@@ -13,7 +13,7 @@ export declare const ArrowDown: any;
 export declare const UpdateIcon: any;
 export declare const StyledUpdateIcon: any;
 export interface PropTypes {
-    bestRoute: BestRouteResponse | null;
+    bestRoute: BestRouteWithFee | null;
     onRefresh?: React.MouseEventHandler<SVGElement>;
     confirmButtonTitle: string;
     confirmButtonDisabled: boolean;

package/dist/containers/ConfirmWallets/ConfirmWallets.d.ts

@@ -2,7 +2,7 @@ import { BestRouteResponse } from 'rango-sdk';
 import React, { PropsWithChildren } from 'react';
 import { SelectableWallet } from '../../types';
 export interface PropTypes {
-    swap: BestRouteResponse;
+    swap: BestRouteResponse | null;
     fromAmount: string;
     toAmount: string;
     onBack: () => void;

package/dist/types/index.d.ts

@@ -1 +1,2 @@
 export * from './wallet';
+export { BestRouteWithFee } from './swaps';

package/dist/types/swaps.d.ts

@@ -1,4 +1,4 @@
-import { BestRouteResponse, BlockchainValidationStatus, WalletRequiredAssets } from 'rango-sdk';
+import { BestRouteResponse, BlockchainValidationStatus, SimulationResult, SwapResult, WalletRequiredAssets } from 'rango-sdk';
 export declare type SwapStatus = 'running' | 'failed' | 'success';
 export declare type MessageSeverity = 'error' | 'warning' | 'info' | 'success';
 export declare type StepStatus = 'created' | 'running' | 'failed' | 'success' | 'waitingForApproval' | 'approved';
@@ -20,3 +20,10 @@ export declare type SwapSavedSettings = {
 export declare type SimulationAssetAndAmount = WalletRequiredAssets;
 export declare type SimulationValidationStatus = BlockchainValidationStatus;
 export declare type BestRouteType = BestRouteResponse;
+export declare type BestRouteWithFee = Omit<BestRouteResponse, 'result'> & {
+    result: Omit<SimulationResult, 'swaps'> & {
+        swaps: (SwapResult & {
+            feeInUsd?: string;
+        })[];
+    };
+};

package/dist/types/wallet.d.ts

@@ -11,6 +11,7 @@ export declare type WalletInfo = {
     name: string;
     image: string;
     type: WalletType;
+    showOnMobile: boolean;
 };
 export interface SelectableWallet {
     chain: string;

package/dist/ui.cjs.development.js

@@ -1314,7 +1314,7 @@ CopyIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$A = ["children"];
+var _excluded$A = ["children", "className"];
 var TypographyContainer = /*#__PURE__*/styled('span', {
   margin: 0,
   color: '$foreground',
@@ -1482,9 +1482,10 @@ var TypographyContainer = /*#__PURE__*/styled('span', {
 });
 function Typography(_ref) {
   var children = _ref.children,
+    className = _ref.className,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   return React__default.createElement(TypographyContainer, Object.assign({
-    className: "_typography"
+    className: "_typography _text " + className
   }, props), children);
 }
 Typography.toString = function () {
@@ -2225,7 +2226,8 @@ function Button(_ref) {
     align: align,
     ml: !!prefix,
     mr: !!suffix && !loading,
-    flexContent: flexContent
+    flexContent: flexContent,
+    className: "_text"
   }, children), loading && React__default.createElement(Spinner, {
     size: 16,
     color: props.type
@@ -2235,7 +2237,7 @@ function Button(_ref) {
 var FilledCircle = /*#__PURE__*/styled('span', {
   width: '10px',
   height: '10px',
-  backgroundColor: '$primary500',
+  backgroundColor: '$primary',
   borderRadius: '99999px'
 });
 
@@ -2304,7 +2306,7 @@ var InputContainer = /*#__PURE__*/styled('div', {
   color: '$foreground',
   transition: 'border-color ease .3s',
   '&:focus-within': {
-    borderColor: '$primary500'
+    borderColor: '$primary'
   },
   variants: {
     size: {
@@ -2347,7 +2349,7 @@ var InputContainer = /*#__PURE__*/styled('div', {
   }
 });
 var Input = /*#__PURE__*/styled('input', {
-  color: '$text',
+  color: '$foreground',
   paddingLeft: '$16',
   paddingRight: '$16',
   flexGrow: 1,
@@ -2366,6 +2368,7 @@ var Input = /*#__PURE__*/styled('input', {
 var Label = /*#__PURE__*/styled('label', {
   display: 'inline-block',
   fontSize: '$14',
+  color: '$foreground',
   marginBottom: '$4'
 });
 var TextField = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
@@ -2375,15 +2378,20 @@ var TextField = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     size = props.size,
     style = props.style,
     inputAttributes = _objectWithoutPropertiesLoose(props, _excluded$C);
-  return React__default.createElement(React__default.Fragment, null, label && React__default.createElement(Label, Object.assign({}, inputAttributes.id && {
+  return React__default.createElement(React__default.Fragment, null, label && React__default.createElement(Label, Object.assign({
+    className: "_text"
+  }, inputAttributes.id && {
     htmlFor: inputAttributes.id
   }), label), React__default.createElement(InputContainer, {
     disabled: inputAttributes.disabled,
     prefix: !!prefix,
     suffix: !!suffix,
     size: size,
-    style: style
-  }, prefix || null, React__default.createElement(Input, Object.assign({}, inputAttributes, {
+    style: style,
+    className: "_text"
+  }, prefix || null, React__default.createElement(Input, Object.assign({
+    className: "_text"
+  }, inputAttributes, {
     spellCheck: false,
     ref: ref
   })), suffix || null));
@@ -2573,7 +2581,7 @@ var CheckboxRoot = /*#__PURE__*/styled(RadixCheckbox.Root, {
   width: 20,
   padding: 0,
   height: 20,
-  border: '1px solid',
+  border: '1px solid $foreground',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -2581,7 +2589,7 @@ var CheckboxRoot = /*#__PURE__*/styled(RadixCheckbox.Root, {
   backgroundColor: '$neutral-100'
 });
 var Label$1 = /*#__PURE__*/styled('label', {
-  color: '$text',
+  color: '$foreground',
   fontSize: '$m',
   marginLeft: '$8'
 });
@@ -2594,8 +2602,9 @@ function Checkbox(_ref) {
   }, props), React__default.createElement(RadixCheckbox.Indicator, null, React__default.createElement(CheckIcon, {
     size: 20
   }))), React__default.createElement(Label$1, {
+    className: "_text",
     htmlFor: id
-  }, label, " "));
+  }, label));
 }
 
 var ChipCointainer = /*#__PURE__*/styled('div', {
@@ -2680,6 +2689,9 @@ function Modal(props) {
   var handleBackDropClick = function handleBackDropClick(event) {
     if (event.target === event.currentTarget) onClose();
   };
+  React.useEffect(function () {
+    if (open) document.body.style.overflow = 'hidden';else document.body.style.overflow = 'unset';
+  }, [open]);
   return React__default.createElement(React__default.Fragment, null, open && reactDom.createPortal(React__default.createElement(BackDrop, {
     onClick: handleBackDropClick
   }, React__default.createElement(ModalContainer, {
@@ -2702,7 +2714,6 @@ function Modal(props) {
 })(exports.WalletState || (exports.WalletState = {}));
 
 var StateIconContainer = /*#__PURE__*/styled('span', {
-  width: '$28',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center'
@@ -2901,7 +2912,7 @@ var StyledSwitchThumb = /*#__PURE__*/styled(RadixSwitch.Thumb, {
   willChange: 'transform',
   '&[data-state="checked"]': {
     transform: 'translateX(20px)',
-    backgroundColor: '$primary500'
+    backgroundColor: '$primary'
   }
 });
 function Switch(props) {
@@ -3219,17 +3230,18 @@ var StyledIndicator = /*#__PURE__*/styled(RadioGroup.Indicator, {
 });
 var Label$2 = /*#__PURE__*/styled('label', {
   paddingLeft: '$8',
-  cursor: 'pointer'
+  cursor: 'pointer',
+  color: '$foreground'
 });
 function Radio(props) {
-  var defaultValue = props.defaultValue,
+  var value = props.value,
     onChange = props.onChange,
     _props$direction = props.direction,
     direction = _props$direction === void 0 ? 'vertical' : _props$direction,
     style = props.style;
   return React__default.createElement(Container$3, null, React__default.createElement(StyledRoot, {
     onValueChange: onChange,
-    defaultValue: defaultValue,
+    value: value,
     direction: direction,
     style: style
   }, props.options.map(function (option, index) {
@@ -3239,6 +3251,7 @@ function Radio(props) {
       value: option.value,
       id: option.value
     }, React__default.createElement(StyledIndicator, null)), React__default.createElement(Label$2, {
+      className: "_text",
       htmlFor: option.value
     }, React__default.createElement(Typography, {
       variant: "body2"
@@ -3338,7 +3351,7 @@ function Settings(props) {
   }))), React__default.createElement(ThemesContainer, null, React__default.createElement(Title, {
     variant: "body2"
   }, "Theme"), React__default.createElement(Radio, {
-    defaultValue: selectedTheme,
+    value: selectedTheme,
     options: [{
       value: 'dark',
       label: 'Dark'
@@ -3840,6 +3853,12 @@ var Popover = /*#__PURE__*/styled('div', {
     }
   }
 });
+var Label$3 = /*#__PURE__*/styled('label', {
+  display: 'inline-block',
+  fontSize: '$14',
+  marginBottom: '$4',
+  color: '$foreground'
+});
 function ColorPicker(_ref) {
   var color = _ref.color,
     onChangeColor = _ref.onChangeColor,
@@ -3848,9 +3867,8 @@ function ColorPicker(_ref) {
   var _useState = React.useState(false),
     displayColorPicker = _useState[0],
     setDisplayColorPicker = _useState[1];
-  return React__default.createElement(Container$5, null, React__default.createElement(Typography, {
-    mb: 4,
-    variant: "body2"
+  return React__default.createElement(Container$5, null, React__default.createElement(Label$3, {
+    className: "_text"
   }, label), React__default.createElement(Button, {
     variant: "outlined",
     prefix: React__default.createElement(Color, {
@@ -4057,15 +4075,19 @@ function ConfirmSwap(props) {
       onClick: onRefresh
     })
   }, React__default.createElement(MainContainer$2, 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(Alert, {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement(Spacer, {
+      direction: "vertical"
+    }), React__default.createElement(Alert, {
       type: "error",
       key: index
-    }, error);
+    }, error));
   }), warnings == null ? void 0 : warnings.map(function (warning, index) {
-    return React__default.createElement(Alert, {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement(Spacer, {
+      direction: "vertical"
+    }), React__default.createElement(Alert, {
       type: "warning",
       key: index
-    }, warning);
+    }, warning));
   }))), React__default.createElement(BestRouteContainer$1, null, bestRoute == null ? void 0 : (_bestRoute$result = bestRoute.result) == null ? void 0 : _bestRoute$result.swaps.map(function (swap, index) {
     var _bestRoute$result2;
     return React__default.createElement(React.Fragment, {
@@ -4085,7 +4107,7 @@ function ConfirmSwap(props) {
     }, swap.swapperType, " from ", swap.from.symbol, " to", ' ', swap.to.symbol, " via ", swap.swapperId, ' '), React__default.createElement(Fee, null, React__default.createElement(GasIcon, null), React__default.createElement(Typography, {
       ml: 4,
       variant: "caption"
-    }, parseFloat(swap.fee[0].amount).toFixed(6), " estimated gas fee")))), React__default.createElement(Line$2, null), index + 1 === ((_bestRoute$result2 = bestRoute.result) == null ? void 0 : _bestRoute$result2.swaps.length) && React__default.createElement(ArrowDown, null), React__default.createElement(StepDetail, {
+    }, "$", swap.feeInUsd, " estimated gas fee")))), React__default.createElement(Line$2, null), index + 1 === ((_bestRoute$result2 = bestRoute.result) == null ? void 0 : _bestRoute$result2.swaps.length) && React__default.createElement(ArrowDown, null), React__default.createElement(StepDetail, {
       logo: swap.to.logo,
       symbol: swap.to.symbol,
       chainLogo: swap.to.blockchainLogo,
@@ -4119,8 +4141,8 @@ function ConfirmWallets(props) {
     handleConnectChain = props.handleConnectChain,
     fromAmount = props.fromAmount,
     toAmount = props.toAmount;
-  var firstStep = (_swap$result = swap.result) == null ? void 0 : _swap$result.swaps[0];
-  var lastStep = (_swap$result2 = swap.result) == null ? void 0 : _swap$result2.swaps[((_swap$result3 = swap.result) == null ? void 0 : _swap$result3.swaps.length) - 1];
+  var firstStep = swap == null ? void 0 : (_swap$result = swap.result) == null ? void 0 : _swap$result.swaps[0];
+  var lastStep = swap == null ? void 0 : (_swap$result2 = swap.result) == null ? void 0 : _swap$result2.swaps[((_swap$result3 = swap.result) == null ? void 0 : _swap$result3.swaps.length) - 1];
   return React__default.createElement(SecondaryPage, {
     textField: false,
     title: "Confirm Swap",
@@ -4363,7 +4385,7 @@ function SwapHistory(props) {
     }, step.swapperType, " from ", step.fromSymbol, " to ", step.toSymbol, "via ", step.swapperId), React__default.createElement(Fee, null, React__default.createElement(GasIcon, null), React__default.createElement(Typography, {
       ml: 4,
       variant: "caption"
-    }, step.feeInUsd, " estimated gas fee")))), React__default.createElement("div", {
+    }, "$", step.feeInUsd, " estimated gas fee")))), React__default.createElement("div", {
       style: {
         display: 'flex'
       }