@rango-dev/ui 0.1.10-next.70 → 0.1.10-next.71

package/dist/components/BlockchainSelector/BlockchainSelector.d.ts

@@ -4,11 +4,13 @@ export declare type LoadingStatus = 'loading' | 'success' | 'failed';
 export interface PropTypes {
     type?: 'Source' | 'Destination';
     list: BlockchainMeta[];
-    selected: BlockchainMeta | null;
+    selected?: BlockchainMeta | null;
     onChange: (blockchain: BlockchainMeta) => void;
     onBack?: () => void;
     loadingStatus: LoadingStatus;
     hasHeader?: boolean;
     listContainerStyle?: CSSProperties;
+    multiSelect?: boolean;
+    selectedList?: BlockchainMeta[] | 'all';
 }
 export declare function BlockchainSelector(props: PropTypes): JSX.Element;

package/dist/components/BlockchainsList/BlockchainsList.d.ts

@@ -1,7 +1,9 @@
 import { BlockchainMeta } from 'rango-sdk';
 export interface PropTypes {
     list: BlockchainMeta[];
-    selected: BlockchainMeta | null;
+    selected?: BlockchainMeta | null;
     onChange: (blockchain: BlockchainMeta) => void;
+    multiSelect?: boolean;
+    selectedList?: BlockchainMeta[] | 'all';
 }
 export declare function BlockchainsList(props: PropTypes): JSX.Element;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -4,7 +4,7 @@ export interface PropTypes {
     defaultChecked?: boolean;
     label: string;
     checked?: boolean;
-    onCheckedChange?: (checked: boolean | 'indeterminate') => void;
+    onCheckedChange?: (checked: boolean) => void;
     disabled?: boolean;
     name?: string;
 }

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ColorResult } from 'react-color';
+export interface PropTypes {
+    color: string;
+    place: 'top' | 'bottom' | 'left' | 'right';
+    onChangeColor: (color: ColorResult, event: React.ChangeEvent<HTMLInputElement>) => void;
+    label?: string;
+}
+export declare function ColorPicker({ color, onChangeColor, label, place }: PropTypes): JSX.Element;

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

@@ -0,0 +1,4 @@
+import { PropTypes } from './ColorPicker';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, PropTypes>;
+export default _default;
+export declare const Main: (args: PropTypes) => JSX.Element;

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

@@ -0,0 +1 @@
+export { ColorPicker } from './ColorPicker';

package/dist/components/SecondaryPage/SecondaryPage.d.ts

@@ -9,7 +9,7 @@ export declare type PropTypes = ({
     textField: false;
     Content: React.ReactNode;
 }) & {
-    title: string;
+    title?: string;
     onBack?: () => void;
     TopButton?: React.ReactNode;
     Footer?: React.ReactNode;

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>, "style" | "size" | "form" | "label" | "slot" | "title" | "pattern" | "children" | "className" | "nonce" | "onResize" | "width" | "height" | "onScroll" | "hidden" | "color" | "type" | "list" | "onChange" | "onClick" | "prefix" | "suffix" | "disabled" | "id" | "lang" | "max" | "min" | "name" | "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" | "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" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "checked" | "translate" | "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" | "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>, "color" | "height" | "translate" | "width" | "list" | "onChange" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "hidden" | "size" | "type" | "onClick" | "prefix" | "suffix" | "disabled" | "children" | "className" | "id" | "lang" | "max" | "min" | "name" | "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" | "defaultChecked" | "checked" | "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" | "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>>;
 export default _default;
 export declare const Main: (args: PropTypes) => JSX.Element;
 export declare const WithPrefix: (args: PropTypes) => JSX.Element;

package/dist/components/TokenList/TokenList.d.ts

@@ -7,8 +7,10 @@ export interface TokenWithAmount extends Token {
 }
 export interface PropTypes {
     list: TokenWithAmount[];
-    selected: TokenWithAmount | null;
+    selected?: TokenWithAmount | null;
     searchedText: string;
     onChange: (token: TokenWithAmount) => void;
+    multiSelect?: boolean;
+    selectedList?: TokenWithAmount[] | 'all';
 }
 export declare function TokenList(props: PropTypes): JSX.Element;

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

@@ -2,9 +2,11 @@ import { TokenWithAmount } from '../TokenList/TokenList';
 export interface PropTypes {
     list: TokenWithAmount[];
     type?: 'Source' | 'Destination';
-    selected: TokenWithAmount | null;
+    selected?: TokenWithAmount;
     onChange: (token: TokenWithAmount) => void;
-    onBack?: () => void;
     hasHeader?: boolean;
+    multiSelect?: boolean;
+    onBack?: () => void;
+    selectedList?: TokenWithAmount[] | 'all';
 }
 export declare function TokenSelector(props: PropTypes): JSX.Element;

package/dist/components/index.d.ts

@@ -22,3 +22,7 @@ export * from './Tooltip';
 export * from './Typography';
 export * from './Wallet';
 export * from './Alert';
+export * from './ColorPicker';
+export * from './Radio';
+export * from './TokenList';
+export * from './common';

package/dist/ui.cjs.development.js

@@ -15,6 +15,7 @@ var reactWindow = require('react-window');
 var InfiniteLoader = _interopDefault(require('react-window-infinite-loader'));
 var AutoSizer = _interopDefault(require('react-virtualized-auto-sizer'));
 var RadixTooltip = require('@radix-ui/react-tooltip');
+var reactColor = require('react-color');
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -1575,7 +1576,7 @@ var decimalNumber = function decimalNumber(number, toFixed) {
   return parseFloat(number).toFixed(toFixed);
 };
 var containsText = function containsText(text, searchText) {
-  return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+  return text.toLowerCase().includes(searchText.toLowerCase());
 };
 
 var waveSquares = /*#__PURE__*/keyframes({
@@ -1850,10 +1851,6 @@ function BestRoute(_ref) {
   }, "No routes found")));
 }
 
-var containsText$1 = function containsText(text, searchText) {
-  return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
-};
-
 var _excluded$A = ["children", "loading", "disabled", "prefix", "suffix", "align", "flexContent"];
 var _ghost, _css, _css2, _css3, _css4;
 var ButtonContainer = /*#__PURE__*/styled('button', {
@@ -2223,7 +2220,9 @@ var Image = /*#__PURE__*/styled('img', {
 });
 function BlockchainsList(props) {
   var list = props.list,
-    onChange = props.onChange;
+    onChange = props.onChange,
+    multiSelect = props.multiSelect,
+    selectedList = props.selectedList;
   var _useState = React.useState(props.selected),
     selected = _useState[0],
     setSelected = _useState[1];
@@ -2231,15 +2230,23 @@ function BlockchainsList(props) {
     setSelected(blockchain);
     onChange(blockchain);
   };
+  var isSelect = function isSelect(name) {
+    if (multiSelect && selectedList) {
+      return selectedList === 'all' || selectedList.findIndex(function (item) {
+        return name === item.name;
+      }) > -1;
+    }
+    return name === (selected == null ? void 0 : selected.name);
+  };
   return React__default.createElement(ListContainer, null, list.map(function (blockchain, index) {
     return React__default.createElement(Button, {
-      type: blockchain.name === (selected == null ? void 0 : selected.name) ? 'primary' : undefined,
+      type: isSelect(blockchain.name) ? 'primary' : undefined,
       variant: "outlined",
       size: "large",
       prefix: React__default.createElement(Image, {
         src: blockchain.logo
       }),
-      suffix: blockchain.name === (selected == null ? void 0 : selected.name) ? React__default.createElement(FilledCircle, null) : undefined,
+      suffix: isSelect(blockchain.name) ? React__default.createElement(FilledCircle, null) : undefined,
       align: "start",
       onClick: changeSelectedBlockchain.bind(null, blockchain),
       key: index
@@ -2324,7 +2331,7 @@ var Input = /*#__PURE__*/styled('input', {
 });
 var Label = /*#__PURE__*/styled('label', {
   display: 'inline-block',
-  fontSize: '$16',
+  fontSize: '$14',
   marginBottom: '$4'
 });
 var TextField = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
@@ -2475,7 +2482,7 @@ var ListContainer$1 = /*#__PURE__*/styled('div', {
 });
 var filterBlockchains = function filterBlockchains(list, searchedFor) {
   return list.filter(function (blockchain) {
-    return containsText$1(blockchain.name, searchedFor) || containsText$1(blockchain.displayName, searchedFor);
+    return containsText(blockchain.name, searchedFor) || containsText(blockchain.displayName, searchedFor);
   });
 };
 function BlockchainSelector(props) {
@@ -2486,12 +2493,14 @@ function BlockchainSelector(props) {
     onBack = props.onBack,
     loadingStatus = props.loadingStatus,
     hasHeader = props.hasHeader,
-    listContainerStyle = props.listContainerStyle;
+    listContainerStyle = props.listContainerStyle,
+    multiSelect = props.multiSelect,
+    selectedList = props.selectedList;
   return React__default.createElement(SecondaryPage, {
     textField: true,
+    hasHeader: hasHeader,
     textFieldPlaceholder: "Search Blockchain By Name",
     title: "Select " + type + " Network",
-    hasHeader: hasHeader,
     onBack: onBack,
     Content: function Content(_ref) {
       var searchedFor = _ref.searchedFor;
@@ -2506,6 +2515,8 @@ function BlockchainSelector(props) {
       }), loadingStatus === 'success' && React__default.createElement(React__default.Fragment, null, filteredBlockchains.length > 0 ? React__default.createElement(BlockchainsList, {
         list: filteredBlockchains,
         selected: selected,
+        multiSelect: multiSelect,
+        selectedList: selectedList,
         onChange: onChange
       }) : React__default.createElement(Alert, {
         type: "secondary",
@@ -2620,9 +2631,7 @@ var ModalHeader = /*#__PURE__*/styled('div', {
   position: 'relative',
   marginBottom: '$16'
 });
-var ContentContainer$2 = /*#__PURE__*/styled('div', {
-  overflowY: 'scroll'
-});
+var ContentContainer$2 = /*#__PURE__*/styled('div', {});
 function Modal(props) {
   var title = props.title,
     content = props.content,
@@ -2968,7 +2977,7 @@ function LiquiditySourceList(props) {
 
 var filterLiquiditySources = function filterLiquiditySources(liquiditySources, searchedFor) {
   return liquiditySources.filter(function (liquiditySource) {
-    return containsText$1(liquiditySource.title, searchedFor || '');
+    return containsText(liquiditySource.title, searchedFor || '');
   });
 };
 var ActionButton = /*#__PURE__*/styled(Button, {
@@ -3129,7 +3138,7 @@ var StyledRoot = /*#__PURE__*/styled(RadioGroup.Root, {
 var ItemContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
   alignItems: 'center',
-  marginRight: '$24'
+  marginRight: '$8'
 });
 var StyledItem = /*#__PURE__*/styled(RadioGroup.Item, {
   backgroundColor: '$neutrals300',
@@ -3142,6 +3151,9 @@ var StyledItem = /*#__PURE__*/styled(RadioGroup.Item, {
     backgroundColor: '$neutrals400'
   }
 });
+var Container$3 = /*#__PURE__*/styled('div', {
+  display: 'flex'
+});
 var StyledIndicator = /*#__PURE__*/styled(RadioGroup.Indicator, {
   display: 'flex',
   alignItems: 'center',
@@ -3159,7 +3171,7 @@ var StyledIndicator = /*#__PURE__*/styled(RadioGroup.Indicator, {
   }
 });
 var Label$2 = /*#__PURE__*/styled('label', {
-  paddingLeft: '$16',
+  paddingLeft: '$8',
   cursor: 'pointer'
 });
 function Radio(props) {
@@ -3168,7 +3180,7 @@ function Radio(props) {
     _props$direction = props.direction,
     direction = _props$direction === void 0 ? 'vertical' : _props$direction,
     style = props.style;
-  return React__default.createElement("form", null, React__default.createElement(StyledRoot, {
+  return React__default.createElement(Container$3, null, React__default.createElement(StyledRoot, {
     onValueChange: onChange,
     defaultValue: defaultValue,
     direction: direction,
@@ -3309,6 +3321,7 @@ var MainContainer$1 = /*#__PURE__*/styled('div', {
   minWidth: '375px',
   width: '100%',
   backgroundColor: '$background',
+  height: 'fit-content',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'end',
@@ -3325,7 +3338,7 @@ function SwapContainer(props) {
   }, React__default.createElement(ContentContainer$3, null, children));
 }
 
-var Container$3 = /*#__PURE__*/styled('div', {
+var Container$4 = /*#__PURE__*/styled('div', {
   position: 'relative'
 });
 var ButtonContainer$1 = /*#__PURE__*/styled('div', {
@@ -3407,7 +3420,7 @@ function SwapDetail(_ref) {
     onClick = _ref.onClick;
   var firstStep = swap.steps[0];
   var lastStep = swap.steps[swap.steps.length - 1];
-  return React__default.createElement(Container$3, {
+  return React__default.createElement(Container$4, {
     onClick: onClick.bind(null, swap.requestId)
   }, React__default.createElement(ButtonContainer$1, null, React__default.createElement(Button, {
     variant: "outlined",
@@ -3501,13 +3514,15 @@ var TokenAmountContainer = /*#__PURE__*/styled('div', {
 });
 var filterTokens = function filterTokens(list, searchedText, outputCount) {
   if (searchedText) return list.filter(function (token) {
-    return containsText$1(token.symbol, searchedText) || containsText$1(token.address || '', searchedText) || containsText$1(token.name || '', searchedText);
+    return containsText(token.symbol, searchedText) || containsText(token.address || '', searchedText) || containsText(token.name || '', searchedText);
   }).slice(0, outputCount);else return list.slice(0, outputCount);
 };
 function TokenList(props) {
   var list = props.list,
     searchedText = props.searchedText,
-    onChange = props.onChange;
+    onChange = props.onChange,
+    multiSelect = props.multiSelect,
+    selectedList = props.selectedList;
   var _useState = React.useState(props.selected),
     selected = _useState[0],
     setSelected = _useState[1];
@@ -3515,6 +3530,14 @@ function TokenList(props) {
     setSelected(token);
     onChange(token);
   };
+  var isSelect = function isSelect(token) {
+    if (multiSelect && selectedList) {
+      return selectedList === 'all' || selectedList.map(function (item) {
+        return item.symbol + item.address;
+      }).indexOf(token.symbol + token.address) > -1;
+    }
+    return (selected == null ? void 0 : selected.symbol) === token.symbol && (selected == null ? void 0 : selected.address) === token.address;
+  };
   var Token = function Token(_ref) {
     var _currentToken$balance;
     var filteredTokens = _ref.filteredTokens,
@@ -3535,7 +3558,7 @@ function TokenList(props) {
       size: "large",
       align: "start",
       onClick: changeSelected.bind(null, currentToken),
-      type: (selected == null ? void 0 : selected.symbol) === currentToken.symbol && (selected == null ? void 0 : selected.address) === currentToken.address ? 'primary' : undefined,
+      type: isSelect(currentToken) ? 'primary' : undefined,
       prefix: React__default.createElement(TokenImage, {
         src: currentToken.image
       }),
@@ -3612,8 +3635,10 @@ function TokenSelector(props) {
     type = props.type,
     selected = props.selected,
     onChange = props.onChange,
-    onBack = props.onBack,
-    hasHeader = props.hasHeader;
+    hasHeader = props.hasHeader,
+    multiSelect = props.multiSelect,
+    selectedList = props.selectedList,
+    onBack = props.onBack;
   return React__default.createElement(SecondaryPage, {
     textField: true,
     textFieldPlaceholder: "Search Blockchain By Name",
@@ -3626,6 +3651,8 @@ function TokenSelector(props) {
         searchedText: searchedFor,
         list: list,
         selected: selected,
+        selectedList: selectedList,
+        multiSelect: multiSelect,
         onChange: onChange
       });
     }
@@ -3720,6 +3747,80 @@ function Tooltip(_ref) {
   })))));
 }
 
+var Container$5 = /*#__PURE__*/styled('div', {
+  position: 'relative'
+});
+var Color = /*#__PURE__*/styled('div', {
+  border: '1px solid $neutrals300',
+  borderRadius: '$5',
+  width: '$32',
+  height: '$32'
+});
+var Cover = /*#__PURE__*/styled('div', {
+  position: 'fixed',
+  top: '0px',
+  right: '0px',
+  bottom: '0px',
+  left: '0px'
+});
+var Popover = /*#__PURE__*/styled('div', {
+  position: 'absolute',
+  zIndex: '2',
+  variants: {
+    place: {
+      top: {
+        top: '-241px'
+      },
+      bottom: {},
+      left: {
+        top: '-50%',
+        left: '-225px'
+      },
+      right: {
+        top: '-50%',
+        right: '-225px'
+      }
+    }
+  }
+});
+function ColorPicker(_ref) {
+  var color = _ref.color,
+    onChangeColor = _ref.onChangeColor,
+    label = _ref.label,
+    place = _ref.place;
+  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"
+  }, label), React__default.createElement(Button, {
+    variant: "outlined",
+    prefix: React__default.createElement(Color, {
+      style: {
+        backgroundColor: color
+      }
+    }),
+    fullWidth: true,
+    align: "start",
+    size: "large",
+    onClick: function onClick() {
+      return setDisplayColorPicker(function (prev) {
+        return !prev;
+      });
+    }
+  }, color), displayColorPicker && React__default.createElement(Popover, {
+    place: place
+  }, React__default.createElement(Cover, {
+    onClick: function onClick() {
+      return setDisplayColorPicker(false);
+    }
+  }), React__default.createElement(reactColor.ChromePicker, {
+    color: color,
+    onChange: onChangeColor
+  })));
+}
+
 var Line$2 = /*#__PURE__*/styled('div', {
   width: '0',
   marginLeft: '$12',
@@ -4056,12 +4157,14 @@ exports.CheckWalletIcon = CheckWalletIcon;
 exports.Checkbox = Checkbox;
 exports.Chip = Chip;
 exports.CloseIcon = CloseIcon;
+exports.ColorPicker = ColorPicker;
 exports.ConfirmSwap = ConfirmSwap;
 exports.ConfirmWallets = ConfirmWallets;
 exports.ConnectWalletsModal = ConnectWalletsModal;
 exports.DeleteCircleIcon = DeleteCircleIcon;
 exports.DeleteWalletIcon = DeleteWalletIcon;
 exports.DownloadIcon = DownloadIcon;
+exports.FilledCircle = FilledCircle;
 exports.GasIcon = GasIcon;
 exports.History = History;
 exports.HistoryIcon = HistoryIcon;
@@ -4070,6 +4173,7 @@ exports.InfoCircleIcon = InfoCircleIcon;
 exports.LiquiditySourcesSelector = LiquiditySourcesSelector;
 exports.MinusCircleIcon = MinusCircleIcon;
 exports.Modal = Modal;
+exports.Radio = Radio;
 exports.RetryIcon = RetryIcon;
 exports.RetryLeftIcon = RetryLeftIcon;
 exports.RetryRightIcon = RetryRightIcon;
@@ -4090,6 +4194,7 @@ exports.SwapWalletIcon = SwapWalletIcon;
 exports.Switch = Switch;
 exports.TextField = TextField;
 exports.TimeIcon = TimeIcon;
+exports.TokenList = TokenList;
 exports.TokenSelector = TokenSelector;
 exports.Tooltip = Tooltip;
 exports.TrashIcon = TrashIcon;