37553.287e576a.iframe.bundle.js

"use strict";(globalThis.webpackChunkmetamask_crx=globalThis.webpackChunkmetamask_crx||[]).push([[37553],{"./ui/components/ui/chip/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>Chip});var react=__webpack_require__("./node_modules/react/index.js"),prop_types=__webpack_require__("./node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),lodash=__webpack_require__("./node_modules/lodash/lodash.js"),component_library=__webpack_require__("./ui/components/component-library/index.ts"),url_icon=__webpack_require__("./ui/components/ui/url-icon/index.js"),design_system=__webpack_require__("./ui/helpers/constants/design-system.ts");function _define_property(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{},ownKeys=Object.keys(source);"function"==typeof Object.getOwnPropertySymbols&&(ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))),ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function Chip(param){var _obj,dataTestId=param.dataTestId,className=param.className,children=param.children,_param_borderColor=param.borderColor,borderColor=void 0===_param_borderColor?design_system.cG.borderDefault:_param_borderColor,backgroundColor=param.backgroundColor,label=param.label,_param_labelProps=param.labelProps,leftIcon=param.leftIcon,_param_leftIconUrl=param.leftIconUrl,leftIconUrl=void 0===_param_leftIconUrl?"":_param_leftIconUrl,rightIcon=param.rightIcon,onClick=param.onClick,_param_maxContent=param.maxContent,_param_displayInlineBlock=param.displayInlineBlock,isInteractive="function"==typeof onClick;return react.createElement("div",{"data-testid":dataTestId,onClick:onClick,onKeyPress:function(event){"Enter"===event.key&&onClick&&onClick(event)},className:classnames_default()(className,"chip",(_define_property(_obj={"chip--with-left-icon":!!leftIcon,"chip--with-right-icon":!!rightIcon},"chip--border-color-".concat(borderColor),!0),_define_property(_obj,"chip--background-color-".concat(backgroundColor),!0),_define_property(_obj,"chip--max-content",void 0===_param_maxContent||_param_maxContent),_define_property(_obj,"chip--display-inline-block",void 0!==_param_displayInlineBlock&&_param_displayInlineBlock),_obj)),role:isInteractive?"button":void 0,tabIndex:isInteractive?0:void 0},leftIcon&&!leftIconUrl?react.createElement("div",{className:"chip__left-icon"},leftIcon):null,leftIconUrl?react.createElement(url_icon.A,{className:"chip__left-url-icon",url:leftIconUrl}):null,null!=children?children:react.createElement(component_library.EY,_object_spread({className:"chip__label",variant:design_system.J3.bodySm,as:"span",color:design_system.r7.textAlternative},void 0===_param_labelProps?{}:_param_labelProps),label),rightIcon?react.createElement("div",{className:"chip__right-icon"},rightIcon):null)}Chip.propTypes={dataTestId:prop_types_default().string,borderColor:prop_types_default().oneOf(Object.values(design_system.cG)),backgroundColor:prop_types_default().oneOf(Object.values(design_system.i0)),label:prop_types_default().string,labelProps:prop_types_default().shape(_object_spread({},(0,lodash.omit)(design_system.J3.propTypes,["children","className"]))),children:prop_types_default().node,leftIcon:prop_types_default().node,rightIcon:prop_types_default().node,className:prop_types_default().string,onClick:prop_types_default().func,maxContent:prop_types_default().bool,leftIconUrl:prop_types_default().string,displayInlineBlock:prop_types_default().bool},Chip.__docgenInfo={description:"@deprecated The `<Chip />` component has been deprecated in favor of the new `<Tag>` component from the component-library.\nPlease update your code to use the new `<Tag>` component instead, which can be found at ui/components/component-library/tag/tag.tsx.\nYou can find documentation for the new `Tag` component in the MetaMask Storybook:\n{@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-tag--docs}\nIf you would like to help with the replacement of the old `Chip` component, please submit a pull request against this GitHub issue:\n{@link https://github.com/MetaMask/metamask-extension/issues/20487}",methods:[],displayName:"Chip",props:{borderColor:{defaultValue:{value:"BorderColor.borderDefault",computed:!0},description:"The border color of the Chip",type:{name:"enum",computed:!0,value:"Object.values(BorderColor)"},required:!1},labelProps:{defaultValue:{value:"{}",computed:!1},description:"The label props of the component. Most Typography props can be used",type:{name:"shape",value:{}},required:!1},leftIconUrl:{defaultValue:{value:"''",computed:!1},description:"Icon location",type:{name:"string"},required:!1},maxContent:{defaultValue:{value:"true",computed:!1},description:"If the width: max-content; is used in css.\nmax-content can overflow the parent's width and break designs",type:{name:"bool"},required:!1},displayInlineBlock:{defaultValue:{value:"false",computed:!1},description:"Display or not the inline block",type:{name:"bool"},required:!1},dataTestId:{description:"Data test id used for testing of the Chip component",type:{name:"string"},required:!1},backgroundColor:{description:"The background color of the Chip component",type:{name:"enum",computed:!0,value:"Object.values(BackgroundColor)"},required:!1},label:{description:"The label of the Chip component has a default typography variant of h6 and is a span html element",type:{name:"string"},required:!1},children:{description:"Children will replace the label of the Chip component.",type:{name:"node"},required:!1},leftIcon:{description:"An icon component that can be passed to appear on the left of the label",type:{name:"node"},required:!1},rightIcon:{description:"An icon component that can be passed to appear on the right of the label",type:{name:"node"},required:!1},className:{description:"The className of the Chip",type:{name:"string"},required:!1},onClick:{description:"The onClick handler to be passed to the Chip component",type:{name:"func"},required:!1}}}},"./ui/components/ui/icon-with-fallback/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>icon_with_fallback_component});var react=__webpack_require__("./node_modules/react/index.js"),prop_types=__webpack_require__("./node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames);function _array_like_to_array(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _array_with_holes(arr){if(Array.isArray(arr))return arr}function _define_property(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _iterable_to_array_limit(arr,i){var _s,_e,_i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null!=_i){var _arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}}function _non_iterable_rest(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{},ownKeys=Object.keys(source);"function"==typeof Object.getOwnPropertySymbols&&(ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))),ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function _object_without_properties(source,excluded){if(null==source)return{};var key,i,target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function _object_without_properties_loose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}function _sliced_to_array(arr,i){return _array_with_holes(arr)||_iterable_to_array_limit(arr,i)||_unsupported_iterable_to_array(arr,i)||_non_iterable_rest()}function _unsupported_iterable_to_array(o,minLen){if(o){if("string"==typeof o)return _array_like_to_array(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if("Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _array_like_to_array(o,minLen)}}var IconWithFallback=function(_param){var _param_name=_param.name,name=void 0===_param_name?"":_param_name,_param_icon=_param.icon,icon=void 0===_param_icon?null:_param_icon,size=_param.size,className=_param.className,fallbackClassName=_param.fallbackClassName,wrapperClassName=_param.wrapperClassName,props=_object_without_properties(_param,["name","icon","size","className","fallbackClassName","wrapperClassName"]),_useState=_sliced_to_array((0,react.useState)(!1),2),iconError=_useState[0],setIconError=_useState[1],style=size?{height:"".concat(size,"px"),width:"".concat(size,"px")}:{};return react.createElement("div",{className:classnames_default()(wrapperClassName),style:style},!iconError&&icon?react.createElement("img",_object_spread({onError:function(){setIconError(!0)},src:icon,style:style,className:className,alt:name||"icon"},props)):react.createElement("span",{className:classnames_default()("icon-with-fallback__fallback",fallbackClassName)},(null==name?void 0:name.charAt(0).toUpperCase())||""))};IconWithFallback.propTypes={icon:prop_types_default().string,name:prop_types_default().string,size:prop_types_default().number,className:prop_types_default().string,wrapperClassName:prop_types_default().string,fallbackClassName:prop_types_default().string};let icon_with_fallback_component=IconWithFallback;IconWithFallback.__docgenInfo={description:"@deprecated The `<IconWithFallback />` component has been deprecated in favor of the new `<AvatarNetwork />` or `<AvatarFavicon />` component from the component-library.\nPlease update your code to use the new `<AvatarNetwork />` or `<AvatarFavicon />` component instead, which can be found at ui/components/component-library.\nYou can find documentation for the new `AvatarNetwork` or `AvatarFavicon` component in the MetaMask Storybook:\n{@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-avatarnetwork--docs}\n{@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-avatarfavicon--docs}\nIf you would like to help with the replacement of the old `IconWithFallback` component, please submit a pull request",methods:[],displayName:"IconWithFallback",props:{name:{defaultValue:{value:"''",computed:!1},description:"The name of the icon also used for the alt attribute of the image",type:{name:"string"},required:!1},icon:{defaultValue:{value:"null",computed:!1},description:"The img src of the icon",type:{name:"string"},required:!1},size:{description:"The size of the icon. Recommended sizes adhere to 8px grid: 16, 24, 32, 40",type:{name:"number"},required:!1},className:{description:"className to apply to the image tag",type:{name:"string"},required:!1},wrapperClassName:{description:"className to apply to the div that wraps the icon",type:{name:"string"},required:!1},fallbackClassName:{description:"Additional className to apply to the fallback span tag",type:{name:"string"},required:!1}}}},"./ui/components/ui/url-icon/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>_url_icon__WEBPACK_IMPORTED_MODULE_0__.A});var _url_icon__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./ui/components/ui/url-icon/url-icon.js")},"./ui/components/ui/url-icon/url-icon.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>UrlIcon});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__),classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),_icon_with_fallback__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./ui/components/ui/icon-with-fallback/index.js");function UrlIcon(param){var url=param.url,className=param.className,name=param.name,fallbackClassName=param.fallbackClassName;return react__WEBPACK_IMPORTED_MODULE_0__.createElement(_icon_with_fallback__WEBPACK_IMPORTED_MODULE_2__.A,{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()("url-icon",className),icon:url,name:name,fallbackClassName:classnames__WEBPACK_IMPORTED_MODULE_1___default()("url-icon__fallback",fallbackClassName)})}UrlIcon.propTypes={url:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string,className:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string,name:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string,fallbackClassName:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string},UrlIcon.__docgenInfo={description:"@deprecated `<UrlIcon />` has been deprecated in favor of one of the avatar components `<AvatarNetwork />`, `<AvatarToken/>` or `<AvatarFavicon/>`\ncomponent in ./ui/components/component-library/avatar-token/\nSee storybook documentation for BannerAlert here:\n{@see {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-avatartoken--docs}}\n\nHelp to replace `UrlIcon` with `AvatarToken` by submitting a PR",methods:[],displayName:"UrlIcon",props:{url:{description:"",type:{name:"string"},required:!1},className:{description:"",type:{name:"string"},required:!1},name:{description:"",type:{name:"string"},required:!1},fallbackClassName:{description:"",type:{name:"string"},required:!1}}}}}]);