@rango-dev/ui 0.1.10-next.83 → 0.1.10-next.86

package/dist/components/BestRoute/BestRoute.d.ts

@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { BestRouteResponse } from 'rango-sdk';
+export declare const pulse: any;
 export interface PropTypes {
     data: BestRouteResponse | null;
     totalFee: string;

package/dist/components/Drawer/Drawer.d.ts

@@ -8,5 +8,6 @@ export interface PropTypes {
     anchor?: 'bottom' | 'left' | 'right' | 'top';
     showClose?: boolean;
     footer?: React.ReactNode;
+    container: Element | null;
 }
 export declare function Drawer(props: PropTypes): JSX.Element;

package/dist/components/Icon/CopyIcon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconProps } from './types';
+export declare const CopyIcon: React.FC<IconProps>;

package/dist/components/Icon/index.d.ts

@@ -34,3 +34,4 @@ export { BagIcon } from './BagIcon';
 export { TimeIcon } from './TimeIcon';
 export { CloseIcon } from './CloseIcon';
 export { SignatureIcon } from './SignatureIcon';
+export { CopyIcon } from './CopyIcon';

package/dist/components/Icon/types.d.ts

@@ -3,4 +3,4 @@ export interface IconProps extends React.SVGAttributes<SVGElement> {
     size?: 16 | 18 | 20 | 24 | 28 | 32 | 36 | 40;
     color?: 'primary' | 'error' | 'warning' | 'success' | 'black' | 'white';
 }
-export declare type Icon = 'DeleteCircleIcon' | 'CheckSquareIcon' | 'AddIcon' | 'InfoCircleIcon' | 'AddCircleIcon' | 'MinusCircleIcon' | 'CheckCircleIcon' | 'CheckIcon' | 'BanIcon' | 'WarningIcon' | 'HistoryIcon' | 'GasIcon' | 'SettingsIcon' | 'TrashIcon' | 'SearchMinusIcon' | 'SearchIcon' | 'AngleRightIcon' | 'AngleUpIcon' | 'AngleDownIcon' | 'AngleLeftIcon' | 'DownloadIcon' | 'RetryRightIcon' | 'RetryLeftIcon' | 'TryAgainIcon' | 'VerticalSwapIcon' | 'HorizontalSwapIcon' | 'RetryIcon' | 'WalletIcon' | 'AddWalletIcon' | 'DeleteWalletIcon' | 'CheckWalletIcon' | 'SwapWalletIcon' | 'BagIcon' | 'TimeIcon' | 'CloseIcon' | 'SignatureIcon';
+export declare type Icon = 'DeleteCircleIcon' | 'CheckSquareIcon' | 'AddIcon' | 'InfoCircleIcon' | 'AddCircleIcon' | 'MinusCircleIcon' | 'CheckCircleIcon' | 'CheckIcon' | 'BanIcon' | 'WarningIcon' | 'HistoryIcon' | 'GasIcon' | 'SettingsIcon' | 'TrashIcon' | 'SearchMinusIcon' | 'SearchIcon' | 'AngleRightIcon' | 'AngleUpIcon' | 'AngleDownIcon' | 'AngleLeftIcon' | 'DownloadIcon' | 'RetryRightIcon' | 'RetryLeftIcon' | 'TryAgainIcon' | 'VerticalSwapIcon' | 'HorizontalSwapIcon' | 'RetryIcon' | 'WalletIcon' | 'AddWalletIcon' | 'DeleteWalletIcon' | 'CheckWalletIcon' | 'SwapWalletIcon' | 'BagIcon' | 'TimeIcon' | 'CloseIcon' | 'SignatureIcon' | 'CopyIcon';

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" | "height" | "translate" | "width" | "label" | "prefix" | "size" | "accept" | "alt" | "autoComplete" | "autoFocus" | "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" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "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" | "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>>;

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" | "height" | "translate" | "width" | "className" | "lang" | "max" | "min" | "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" | "step" | "defaultValue" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "maxLength" | "minLength" | "multiple" | "placeholder" | "readOnly" | "required" | "src" | "value" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "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" | "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>>;
 export default _default;
 export declare const Main: (args: PropTypes) => JSX.Element;
 export declare const WithPrefix: (args: PropTypes) => JSX.Element;

package/dist/components/index.d.ts

@@ -26,3 +26,4 @@ export * from './ColorPicker';
 export * from './Radio';
 export * from './TokenList';
 export * from './common';
+export * from './Drawer';

package/dist/containers/SwapHistory/SwapHistory.d.ts

@@ -3,6 +3,9 @@ import { PendingSwap } from '../History/types';
 export declare const Line: any;
 export interface PropTypes {
     pendingSwap: PendingSwap;
+    onCopy: (requestId: string) => void;
     onBack: () => void;
+    isCopied: boolean;
+    onCancel: (requestId: string) => void;
 }
 export declare function SwapHistory(props: PropTypes): JSX.Element;

package/dist/ui.cjs.development.js

@@ -1283,7 +1283,38 @@ SignatureIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$z = ["children"];
+var _excluded$z = ["size", "color"];
+var CopyIcon = function CopyIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+  return React.createElement(SvgWithFillColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 64 64",
+    color: color,
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), React.createElement("g", {
+    id: "Text-files"
+  }, React.createElement("path", {
+    d: "M53.9791489,9.1429005H50.010849c-0.0826988,0-0.1562004,0.0283995-0.2331009,0.0469999V5.0228\n\t\tC49.7777481,2.253,47.4731483,0,44.6398468,0h-34.422596C7.3839517,0,5.0793519,2.253,5.0793519,5.0228v46.8432999\n\t\tc0,2.7697983,2.3045998,5.0228004,5.1378999,5.0228004h6.0367002v2.2678986C16.253952,61.8274002,18.4702511,64,21.1954517,64\n\t\th32.783699c2.7252007,0,4.9414978-2.1725998,4.9414978-4.8432007V13.9861002\n\t\tC58.9206467,11.3155003,56.7043495,9.1429005,53.9791489,9.1429005z M7.1110516,51.8661003V5.0228\n\t\tc0-1.6487999,1.3938999-2.9909999,3.1062002-2.9909999h34.422596c1.7123032,0,3.1062012,1.3422,3.1062012,2.9909999v46.8432999\n\t\tc0,1.6487999-1.393898,2.9911003-3.1062012,2.9911003h-34.422596C8.5049515,54.8572006,7.1110516,53.5149002,7.1110516,51.8661003z\n\t\t M56.8888474,59.1567993c0,1.550602-1.3055,2.8115005-2.9096985,2.8115005h-32.783699\n\t\tc-1.6042004,0-2.9097996-1.2608986-2.9097996-2.8115005v-2.2678986h26.3541946\n\t\tc2.8333015,0,5.1379013-2.2530022,5.1379013-5.0228004V11.1275997c0.0769005,0.0186005,0.1504021,0.0469999,0.2331009,0.0469999\n\t\th3.9682999c1.6041985,0,2.9096985,1.2609005,2.9096985,2.8115005V59.1567993z"
+  }), React.createElement("path", {
+    d: "M38.6031494,13.2063999H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0158005\n\t\tc0,0.5615997,0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4542999,1.0158997-1.0158997\n\t\tC39.6190491,13.6606998,39.16465,13.2063999,38.6031494,13.2063999z"
+  }), React.createElement("path", {
+    d: "M38.6031494,21.3334007H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0157986\n\t\tc0,0.5615005,0.4544001,1.0159016,1.0159006,1.0159016h22.3491974c0.5615005,0,1.0158997-0.454401,1.0158997-1.0159016\n\t\tC39.6190491,21.7877007,39.16465,21.3334007,38.6031494,21.3334007z"
+  }), React.createElement("path", {
+    d: "M38.6031494,29.4603004H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997\n\t\ts0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4543991,1.0158997-1.0158997\n\t\tS39.16465,29.4603004,38.6031494,29.4603004z"
+  }), React.createElement("path", {
+    d: "M28.4444485,37.5872993H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997\n\t\ts0.4544001,1.0158997,1.0159006,1.0158997h12.1904964c0.5615025,0,1.0158005-0.4543991,1.0158005-1.0158997\n\t\tS29.0059509,37.5872993,28.4444485,37.5872993z"
+  })));
+};
+CopyIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$A = ["children"];
 var TypographyContainer = /*#__PURE__*/styled('span', {
   margin: 0,
   color: '$foreground',
@@ -1451,7 +1482,7 @@ var TypographyContainer = /*#__PURE__*/styled('span', {
 });
 function Typography(_ref) {
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   return React__default.createElement(TypographyContainer, Object.assign({
     className: "_typography"
   }, props), children);
@@ -1541,7 +1572,7 @@ function StepDetail(_ref) {
   }, React__default.createElement(Typography, {
     noWrap: true,
     variant: direction === 'vertical' ? 'body2' : 'h6'
-  }, parseFloat(amount).toFixed(2), " ", symbol), React__default.createElement(SubTitle, {
+  }, amount ? parseFloat(amount).toFixed(2) : '?', " ", symbol), React__default.createElement(SubTitle, {
     noWrap: true,
     variant: "caption"
   }, "on ", blockchain)));
@@ -1854,7 +1885,7 @@ function BestRoute(props) {
   }, "No routes found")));
 }
 
-var _excluded$A = ["children", "loading", "disabled", "prefix", "suffix", "align", "flexContent"];
+var _excluded$B = ["children", "loading", "disabled", "prefix", "suffix", "align", "flexContent"];
 var _ghost, _css, _css2, _css3, _css4;
 var ButtonContainer = /*#__PURE__*/styled('button', {
   borderRadius: '$5',
@@ -2184,7 +2215,7 @@ function Button(_ref) {
     suffix = _ref.suffix,
     align = _ref.align,
     flexContent = _ref.flexContent,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
   var isDisabled = loading || disabled;
   return React__default.createElement(ButtonContainer, Object.assign({
     disabled: isDisabled
@@ -2259,7 +2290,7 @@ function BlockchainsList(props) {
   }));
 }
 
-var _excluded$B = ["label", "prefix", "suffix", "children", "size", "style"];
+var _excluded$C = ["label", "prefix", "suffix", "children", "size", "style"];
 var InputContainer = /*#__PURE__*/styled('div', {
   backgroundColor: '$background',
   boxSizing: 'border-box',
@@ -2343,7 +2374,7 @@ var TextField = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     suffix = props.suffix,
     size = props.size,
     style = props.style,
-    inputAttributes = _objectWithoutPropertiesLoose(props, _excluded$B);
+    inputAttributes = _objectWithoutPropertiesLoose(props, _excluded$C);
   return React__default.createElement(React__default.Fragment, null, label && React__default.createElement(Label, Object.assign({}, inputAttributes.id && {
     htmlFor: inputAttributes.id
   }), label), React__default.createElement(InputContainer, {
@@ -2364,6 +2395,7 @@ var Container$1 = /*#__PURE__*/styled('div', {
   height: '100%',
   width: '100%',
   padding: '$12 0',
+  position: 'relative',
   '@lg': {
     padding: '$16 0'
   }
@@ -2531,7 +2563,7 @@ function BlockchainSelector(props) {
   });
 }
 
-var _excluded$C = ["label", "id"];
+var _excluded$D = ["label", "id"];
 var CheckboxContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
   alignItems: 'center'
@@ -2556,7 +2588,7 @@ var Label$1 = /*#__PURE__*/styled('label', {
 function Checkbox(_ref) {
   var label = _ref.label,
     id = _ref.id,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
   return React__default.createElement(CheckboxContainer, null, React__default.createElement(CheckboxRoot, Object.assign({
     id: id
   }, props), React__default.createElement(RadixCheckbox.Indicator, null, React__default.createElement(CheckIcon, {
@@ -3355,7 +3387,8 @@ var MainContainer$1 = /*#__PURE__*/styled('div', {
   flexDirection: 'column',
   alignItems: 'end',
   padding: '$16 $24',
-  boxSizing: 'border-box'
+  boxSizing: 'border-box',
+  position: 'relative'
 });
 var ContentContainer$3 = /*#__PURE__*/styled('div', {
   width: '100%'
@@ -3364,7 +3397,8 @@ function SwapContainer(props) {
   var children = props.children,
     style = props.style;
   return React__default.createElement(MainContainer$1, {
-    style: style
+    style: style,
+    id: "swap-box"
   }, React__default.createElement(ContentContainer$3, null, children));
 }
 
@@ -3464,10 +3498,10 @@ function SwapDetail(_ref) {
     blockchain: firstStep.fromBlockchain,
     amount: swap.inputAmount
   }), React__default.createElement(Arrow, null, React__default.createElement(Dot$1, null), React__default.createElement(Line$1, null), React__default.createElement(ArrowRight$1, null)), React__default.createElement(StepDetail, {
-    logo: lastStep.fromLogo,
-    symbol: lastStep.fromSymbol,
-    chainLogo: lastStep.fromBlockchainLogo,
-    blockchain: lastStep.fromBlockchain,
+    logo: lastStep.toLogo,
+    symbol: lastStep.toSymbol,
+    chainLogo: lastStep.toBlockchainLogo,
+    blockchain: lastStep.toBlockchain,
     amount: lastStep.outputAmount
   })))), React__default.createElement(StatusContainer, null, status === 'running' ? React__default.createElement(TryAgainIcon, {
     size: 16
@@ -3508,8 +3542,8 @@ function VirtualizedList(props) {
           return size;
         },
         itemCount: itemCount,
-        height: height,
-        width: width,
+        height: height || 0,
+        width: width || 0,
         onItemsRendered: onItemsRendered
       }, function (_ref3) {
         var index = _ref3.index,
@@ -3573,7 +3607,7 @@ function TokenItem(props) {
   }, token.name))));
 }
 
-var _excluded$D = ["style"];
+var _excluded$E = ["style"];
 var PAGE_SIZE = 20;
 function TokenList(props) {
   var list = props.list,
@@ -3613,7 +3647,7 @@ function TokenList(props) {
   }, [tokens.length]);
   var innerElementType = React.forwardRef(function (_ref, ref) {
     var style = _ref.style,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$E);
     return React__default.createElement("div", Object.assign({
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ref: ref,
@@ -3844,6 +3878,98 @@ function ColorPicker(_ref) {
   })));
 }
 
+var BackDrop$1 = /*#__PURE__*/styled('div', {
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  width: '100%',
+  height: '100%',
+  zIndex: 9999999,
+  backgroundColor: 'rgba(0,0,0,.1)',
+  borderRadius: '$10'
+});
+var DrawerContainer = /*#__PURE__*/styled('div', {
+  position: 'absolute',
+  boxShadow: '$s',
+  background: '$background',
+  padding: '$20',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  zIndex: 9999999,
+  borderRadius: '$10',
+  variants: {
+    anchor: {
+      left: {
+        top: 0,
+        left: 0,
+        height: '100%',
+        minWidth: '300px',
+        maxWidth: '90%'
+      },
+      right: {
+        top: 0,
+        right: 0,
+        height: '100%',
+        minWidth: '300px',
+        maxWidth: '90%'
+      },
+      bottom: {
+        bottom: 0,
+        width: '100%',
+        maxHeight: '90%'
+      },
+      top: {
+        top: 0,
+        width: '100%',
+        maxHeight: '90%'
+      }
+    }
+  }
+});
+var DrawerHeader = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  position: 'relative',
+  marginBottom: '$16'
+});
+var Body = /*#__PURE__*/styled('div', {
+  overflowY: 'auto',
+  height: '100%'
+});
+var Footer = /*#__PURE__*/styled('footer', {
+  width: '100%',
+  marginTop: '$28'
+});
+function Drawer(props) {
+  var title = props.title,
+    content = props.content,
+    open = props.open,
+    onClose = props.onClose,
+    containerStyle = props.containerStyle,
+    _props$anchor = props.anchor,
+    anchor = _props$anchor === void 0 ? 'bottom' : _props$anchor,
+    _props$showClose = props.showClose,
+    showClose = _props$showClose === void 0 ? false : _props$showClose,
+    footer = props.footer,
+    container = props.container;
+  var handleBackDropClick = function handleBackDropClick(event) {
+    if (event.target === event.currentTarget) onClose();
+  };
+  return React__default.createElement(React__default.Fragment, null, open && container && reactDom.createPortal(React__default.createElement(BackDrop$1, {
+    onClick: handleBackDropClick
+  }, React__default.createElement(DrawerContainer, {
+    anchor: anchor,
+    style: containerStyle
+  }, React__default.createElement(DrawerHeader, null, React__default.createElement(Typography, {
+    variant: "h4"
+  }, title), showClose && React__default.createElement(CloseIcon, {
+    size: 24,
+    onClick: onClose
+  })), React__default.createElement(Body, null, content), React__default.createElement(Footer, null, footer))), container));
+}
+
 var MainContainer$2 = /*#__PURE__*/styled('div', {
   overflow: 'hidden'
 });
@@ -3870,7 +3996,7 @@ var SwapperLogo$1 = /*#__PURE__*/styled('img', {
 var RelativeContainer$1 = /*#__PURE__*/styled('div', {
   position: 'relative'
 });
-var Footer = /*#__PURE__*/styled('div', {
+var Footer$1 = /*#__PURE__*/styled('div', {
   display: 'flex',
   alignItems: 'center'
 });
@@ -3918,7 +4044,7 @@ function ConfirmSwap(props) {
     textField: false,
     title: "Swap",
     onBack: onBack,
-    Footer: React__default.createElement(Footer, null, React__default.createElement(Button, {
+    Footer: React__default.createElement(Footer$1, null, React__default.createElement(Button, {
       type: "primary",
       fullWidth: true,
       loading: loading,
@@ -3969,7 +4095,7 @@ function ConfirmSwap(props) {
   }))));
 }
 
-var Footer$1 = /*#__PURE__*/styled('div', {
+var Footer$2 = /*#__PURE__*/styled('div', {
   display: 'flex',
   alignItems: 'center'
 });
@@ -3999,7 +4125,7 @@ function ConfirmWallets(props) {
     textField: false,
     title: "Confirm Swap",
     onBack: onBack,
-    Footer: React__default.createElement(Footer$1, null, React__default.createElement(ConfirmButton, {
+    Footer: React__default.createElement(Footer$2, null, React__default.createElement(ConfirmButton, {
       fullWidth: true,
       loading: loading,
       type: "primary",
@@ -4073,7 +4199,8 @@ var filteredHistory = function filteredHistory(list, searchedFor) {
 };
 var Group = /*#__PURE__*/styled('div', {
   marginBottom: '$24',
-  paddingRight: '$8'
+  paddingRight: '$8',
+  maxHeight: '600px'
 });
 var GroupTitle = /*#__PURE__*/styled(Typography, {
   color: '$neutrals500'
@@ -4106,7 +4233,7 @@ function History(_ref) {
     onBack: onBack,
     textField: true,
     textFieldPlaceholder: "Search By Blockchain Or Token",
-    title: "History"
+    title: "Swaps"
   }, function (searchedFor) {
     var filterSwaps = filteredHistory(list, searchedFor);
     return filterSwaps.length ? React__default.createElement(SwapsGroup, {
@@ -4143,20 +4270,84 @@ var Error = /*#__PURE__*/styled(Description, {
 });
 var Line$3 = /*#__PURE__*/styled('div', {
   width: '0',
+  minHeight: '$16',
   marginLeft: '$12',
   border: '1px dashed $foreground',
   borderRadius: 'inherit'
 });
+var RequestIdContainer = /*#__PURE__*/styled('div', {
+  cursor: 'pointer',
+  backgroundColor: '$neutrals200',
+  padding: '$4',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '$5',
+  marginBottom: '$16'
+});
+var RequestId = /*#__PURE__*/styled(Typography, {
+  color: '$warning500'
+});
+var CancelButtonContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+var StepContainer$1 = /*#__PURE__*/styled('div', {
+  variants: {
+    hasNotStarted: {
+      "true": {
+        filter: 'grayscale(100%)'
+      }
+    },
+    isRunning: {
+      "true": {
+        animation: pulse + " 2s ease-in-out infinite"
+      }
+    }
+  }
+});
 function SwapHistory(props) {
   var pendingSwap = props.pendingSwap,
-    onBack = props.onBack;
+    onBack = props.onBack,
+    onCopy = props.onCopy,
+    isCopied = props.isCopied,
+    onCancel = props.onCancel;
+  var _useState = React.useState(false),
+    showDrawer = _useState[0],
+    setShowDrawer = _useState[1];
   return React__default.createElement(SecondaryPage, {
-    title: "History",
+    title: "Swap Details",
     textField: false,
     onBack: onBack
-  }, React__default.createElement(React__default.Fragment, null, pendingSwap == null ? void 0 : pendingSwap.steps.map(function (step, index) {
-    return React__default.createElement(React.Fragment, {
-      key: index
+  }, React__default.createElement("div", {
+    style: {
+      overflow: 'hidden'
+    }
+  }, React__default.createElement("div", null, React__default.createElement(Typography, {
+    variant: "body1"
+  }, " request ID :"), React__default.createElement(RequestIdContainer, {
+    onClick: onCopy.bind(null, pendingSwap == null ? void 0 : pendingSwap.requestId)
+  }, React__default.createElement(RequestId, {
+    variant: "body1"
+  }, pendingSwap == null ? void 0 : pendingSwap.requestId), React__default.createElement(Spacer, {
+    size: 12
+  }), isCopied ? React__default.createElement(CheckSquareIcon, {
+    color: "success",
+    size: 18
+  }) : React__default.createElement(CopyIcon, {
+    color: "warning",
+    size: 18
+  }))), React__default.createElement("div", {
+    style: {
+      overflow: 'auto',
+      position: 'relative'
+    }
+  }, pendingSwap == null ? void 0 : pendingSwap.steps.map(function (step, index) {
+    return React__default.createElement(StepContainer$1, {
+      key: index,
+      hasNotStarted: step.status === 'created',
+      isRunning: step.status != 'failed' && step.status != 'success' && step.status != 'created'
     }, index === 0 && React__default.createElement(RelativeContainer$1, null, React__default.createElement(StepDetail, {
       logo: step.fromLogo,
       symbol: step.fromSymbol,
@@ -4200,7 +4391,46 @@ function SwapHistory(props) {
       blockchain: step.toBlockchain,
       amount: step.outputAmount
     }));
-  })));
+  }), (pendingSwap == null ? void 0 : pendingSwap.status) === 'running' && React__default.createElement(CancelButtonContainer, null, React__default.createElement(Button, {
+    variant: "contained",
+    type: "error",
+    onClick: setShowDrawer.bind(null, true)
+  }, "Cancel")))), React__default.createElement(Drawer, {
+    onClose: setShowDrawer.bind(null, false),
+    open: showDrawer,
+    showClose: true,
+    anchor: "bottom",
+    title: "Cancel Progress",
+    content: React__default.createElement(React__default.Fragment, null, React__default.createElement(Alert, {
+      type: "warning"
+    }, React__default.createElement(Typography, {
+      variant: "body2"
+    }, React__default.createElement("p", null, "Warning: Rango ", React__default.createElement("u", null, "neither reverts"), " your transaction", 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")))),
+    footer: React__default.createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }
+    }, React__default.createElement(Button, {
+      variant: "contained",
+      type: "success",
+      onClick: setShowDrawer.bind(null, false)
+    }, "Skip"), React__default.createElement(Spacer, {
+      size: 16
+    }), React__default.createElement(Button, {
+      variant: "contained",
+      type: "error",
+      onClick: function onClick() {
+        onCancel(pendingSwap.requestId);
+        setShowDrawer(false);
+      }
+    }, "Cancel progress")),
+    container: document.getElementById('swap-box')
+  }));
 }
 
 exports.AddCircleIcon = AddCircleIcon;
@@ -4227,9 +4457,11 @@ exports.ColorPicker = ColorPicker;
 exports.ConfirmSwap = ConfirmSwap;
 exports.ConfirmWallets = ConfirmWallets;
 exports.ConnectWalletsModal = ConnectWalletsModal;
+exports.CopyIcon = CopyIcon;
 exports.DeleteCircleIcon = DeleteCircleIcon;
 exports.DeleteWalletIcon = DeleteWalletIcon;
 exports.DownloadIcon = DownloadIcon;
+exports.Drawer = Drawer;
 exports.FilledCircle = FilledCircle;
 exports.GasIcon = GasIcon;
 exports.History = History;