https://productionassets.rollercoin.com/main-app/869dd4ae5d20081c0…/assets/js/X3zhbNok7mfmG6ZuevSVU.js

1var H=Object.defineProperty;var Z=(r,i,e)=>i in r?H(r,i,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[i]=e;var p=(r,i,e)=>Z(r,typeof i!="symbol"?i+"":i,e);import{R as t,a as N}from"./Cpo7LSnPX51fRfiaCdf9_.js";import{c as b,u as L}from"./CcNLo8muAjavwYCk5RfNr.js";import{R as v,N as K,g as Y,C as d,T as X,h as ee,i as te,j as x,k as ae,l as re,m as se,n as ie,f as oe}from"./C9pnZlNvi6MebMQyjvM3k.js";import{P as s}from"./Cb1l3GgkFRwu-3EpElk3A.js";import{w as $,L as A,S as ne,R as q}from"./BjjpQfVNCXJ9Mfr5s53Ea.js";import{u as y,w}from"./Gi8ebtHAQvFVC7ddX8BhI.js";import{b as f}from"./CWaPmus0yqMhCviCxKejZ.js";import{p as _,q as M,h as E,g as h,m as ce,l as le}from"../app-BXv4Vr0P.js";import"./xH9dPpYo7onm13A4CRsnP.js";import"./DlXqh1Blr0uJAYFVx0iNH.js";import{Q as me}from"./C84NrNzdyT8JPoicj8IYL.js";import{e as pe,C as de,N as ge}from"./CB78EcU8aLEc6_Dq3Z7oN.js";import"./XxXc1Iumml2-g-fL2ZyuH.js";import"./DXgiQH1_LmSww6GMBBuzS.js";import"./Bu1eMGkq2XZHOiHJ-ZCEZ.js";import"./DyVfR5NhdWQh3wZG5a0wm.js";import"./ATwE_2o36v4b2_oKTieb5.js";import"./B6lzjZv5ybUvlGygiASBz.js";import"./BbhooSS1lC4C1fBHMGQ9s.js";import"./_XZswhv4pz3ARZDTT7p8a.js";import"./DDQ_hq57ojafTbRsk4qxn.js";import"./0PPjSyTxJqPSr297RcU2M.js";import"./CySAGvJ4LviXl92eI7m1g.js";import"./DxJbsXyrnqwSMrhXVuC-f.js";import"./CQ-2O6FOJxzRveXIdQR3T.js";import"./BR76m4z7g0hY0pCKwh61G.js";import"./CxTyLFAOyAxVB4CGQDfqQ.js";import"./DP1tGiabCK-6KlUts1T_z.js";import"./C1kSnFez7OypRXIIbFC3o.js";import"./DJO3Rq2QcmopZqfeSqGqJ.js";import"./FqSXKw2WmLLtlIiASNBFD.js";import"./BO89hcaCvNNsXzfODKJCb.js";import"./BPa2jV79hwUceKD9RlpnB.js";import"./CHqF18-c1yCO8K9RoCsN0.js";import"./DLJIVHX5BgZ9qutePde7c.js";import"./2HkVfdlC8Vkn6mYBNAeZA.js";import"./DH5W5TV3EjQ2KvZi2G5xI.js";import"./C6PE7MlJiZlDvaT5rCWUG.js";import"./DhZwQ_xJyIKVFIv5U-I6C.js";import"./CzQfFwUNNyP0nHq8dRQtW.js";import"./DweuEE1VPqRFyM4ncUSCn.js";import"./CE1SvSPfJ3s5-zGhOUdu5.js";import"./DC5XH7pBPMDsiFYuAaiGj.js";import"./Dv5iHtOOm3KOE0isY2gDv.js";import"./V93JBYlfMrw7MXX7d-3ag.js";import"./DN97whDVbYiQZIa2OGyu_.js";import"./B1WjBRBlwPyPQiEeO3DXg.js";import"./C_Knd9QWhTjQ2nIkYfQ0y.js";import"./Cfqmvv-5x09rDXT9rMM4d.js";import"./DioucThws1NEzUblbCoyF.js";import"./zQWuUK3G12rxMkLTaLZAF.js";import"./jroIKPnOjq6k3OFX-9jLy.js";import"./DUBXrW26WLdcpxAt11Beq.js";import"./Dv3kfqrBa94xBITcZLyrG.js";import"./CFiQL_PLncWLxF2yw7vew.js";import"./DnDvGQVmiWETQd0t9y2DD.js";import"./DHbFL8LVRLFMgNBR8ymDk.js";import"./CnrqBnUvqEhTCY2U7f0Jq.js";import"./epUc6GCkmO7TSOB7OXiJW.js";import"./BaFNuDhBJ2zsskL5wuT2j.js";import"./BaV57KE4CCsc7MakZceLj.js";import"./DJTpsMnqgPUWhoxOCmtQD.js";import"./DWnJMnTeMp56rA3WyttG1.js";import"./CixsTccWkqHPEmuNsKsJa.js";import"./Dhq4gfbQwTx0gZ5CB9a0y.js";import"./CKGsiE8BwJeM7YIIQCoRJ.js";import"./45RsMWdU7GiwSY-3MCvZU.js";import"./CJl_siB0OZ80VSAqfXhp4.js";import"./Bw0Gp1EUV0-uYoRZDEEXi.js";import"./BbfoNoF5wbP1RAghJ7vb6.js";import"./DrHtbvh2Wo6M2-ILIebYS.js";import"./D7Su9vsP70_QNLUCkzi4Q.js";import"./DZQS2yqksjYO0poGVgwEH.js";import"./D7WDDOuXp496t-2DRuL-N.js";import"./BPBWOZZRxKmd1AL9XIFD3.js";import"./BZT5baY3bTrTp9bg6fFVw.js";import"./BJjMKqWEgRRwc9SrdwwYe.js";import"./Cpu_On9z79F8ro4RehmFZ.js";import"./BdBF27lvR5LxLTWSEZr0Y.js";import"./Dvm35CRmEf6roMjgSyq8V.js";import"./YP6A-WQwCECKTllHfB-fO.js";import"./CvTzFik9KaM_WosdOowjP.js";import"./BVV3OHQdi-14LzpYFvr5z.js";import"./CkKfWUUKa9l2hswbeUzPw.js";import"./B4_-Iwy_zHcy2GPrAf4Af.js";import"./Cq-sqhLYM6Xr1RMe1AmLr.js";import"./C3VqKnDZeXwfWkIfae-yb.js";import"./BlcKtro_X6-W0R6Rkz6LO.js";import"./BziI0nS-NhyvBQRMQPwxh.js";import"./C0edDUO7yT6hvakkJ406-.js";import"./DpEU0dXx-DVtdWz2cynw1.js";import"./CJav9ev6lk6CG7OBpYdFx.js";import"./CAYjW215yzVgovWtGctuZ.js";import"./BCMnOM8oxg60RGVLSQfwr.js";import"./BaL08e01oaO-HkOq9nc1o.js";import"./CQ8Lz49elTJt_oTOPaxAr.js";import"./DPXHcEwGL4vZwShtpqC2J.js";import"./DagUxO3McxnjnLMr-YG8r.js";import"./DuyDThgrgNh0M7B38ntmj.js";import"./C9s6Lb6NcynBKQ8yvisLz.js";import"./D99JlDO_6pRCpN8hiwCle.js";import"./CAH6_37PKs6WYGgzH54Qh.js";import"./CEpELaEcne1ywvi8UH-Hr.js";import"./BHeFHm3v7rN260jwXYTJw.js";import"./B1937iaX_pl0LJLpaCRuH.js";import"./DYdRfxlqJ4rtRwNIq2G35.js";import"./Bt9Z4Oy9xizk1wC_dv7t0.js";import"./JD8m9dG1CyS9K0oNAjMy9.js";import"./x5IvBceTvb3waLohoIRyN.js";import"./3S_6p140B8Hkypc9BE_-N.js";import"./CYS7TB5L9OU9nPJLE3Ph7.js";import"./QrRNjuu7mGdYPDOWch-pv.js";import"./D5WzthzHgV0BpcW7f4xjO.js";import"./CWAZaHAYX-orHOl-EZHKu.js";import"./DTqE02cR-L-sFXeYnhW-S.js";import"./S46pjX55SUuyVAopxbiMX.js";import"./BrfAIJk6QVLdyNSMEFyDt.js";import"./DnKASxKsAW8WJRYw3HwjX.js";import"./DGa8lynz4qjTdjwe5zj7e.js";import"./BnHQEs-5UepWlfTHeVDkq.js";import"./BlQ_uJS7vN2OQS_dbrDzs.js";import"./OJ6RP1HAAUtBW_Xaku6lX.js";import"./rbpcJO3pW-tZlBEn9UDkN.js";import"./CEZ9C0-SinEp9eO8c-rQr.js";import"./DLAroc04qt0nLMs0wh1eM.js";import"./CLu0we_c3lPItWOATDSjq.js";import"./DyBxHFoJH9NUdAgpXyctD.js";import"./BUbzzSKiZv7eDKUSDgSd0.js";import"./P2AOgq_qjrvnygyOUkahG.js";import"./B5nXWxmqH6WAl19Rzsw-y.js";import"./ClUVK4D9pZCRJP3g0hVHd.js";import"./CnCBHSQfTsV5gQPIDoH4P.js";import"./CISPNnsYBNA3zkeKqJMrg.js";import"./hwGXQScRQJb9MAyV4ZnSl.js";import"./DDOhLJ21ydTBrlJt91Xkh.js";

1import"./iy12kVVIaDaET-GA7B7oP.js";import"./DEFiIOTj2BVWiXkmISGIl.js";import"./TDtrdbi37hy-Z63mQGUlD.js";import"./eKpeEE5T_65_cbbkoZLlq.js";import"./B1feuItMUog5YH4YVwpW6.js";import"./CPI_T6LGabxADdx4UOGy5.js";import"./24Xhufix6rfmfqP6PQ2ap.js";import"./D4w-oRCMQ-Pm2Cd6EH_Iu.js";import"./BJnNu2dEJn9p2dPkjAA5l.js";import"./DYjNImB0JeMXbfg2zhmjy.js";import"./DV5CPCxDgAUVufpQLZl-P.js";import"./BtLGXTfSGlTNMki8UwfJ8.js";import"./BnnmM08YUQtXp0wv5p0p5.js";import"./Dlgn11pu5qB1DXV5AIHJI.js";import"./BfPLTxYjCn0n_u9IUlqux.js";import"./DLy7plynwTLLmH8XEO7bP.js";import"./__hyaZVu35r5CngAFyc5Y.js";import"./Byc7SUuiTznHQY_sJeMye.js";import"./Bd8j13OQDKipTDlX3tgQq.js";import"./BvdoK66kRKkqyxC0kg7Be.js";import"./Cp9FJloqx4dEAwAApNV3w.js";import"./D_baahxMlbnb89E7PwqLJ.js";import"./CFL-otjv_VnC92prA-AyT.js";import"./BNG0mP4ePJbJ-_XhMYWFr.js";import"./CDIQmqUzH83Dx6XYZ8t3a.js";import"./gPXMICaaWaWzNa-JW6mV5.js";import"./D35O9kdyfsoa2S6mt-tkB.js";import"./fBLDGxT5H6rMnnJ3UdhN6.js";import"./CR6i6wGZE6BTMMts_Duso.js";import"./CAh_X8M0S905_nQHNxm3n.js";import"./BA_tA6EttvTAIL02RJa_U.js";import"./C1DMq6EObN1bUdO3eh1bu.js";import"./CBSD2oNTEvnzyuWbXBeeG.js";import"./C00ieaqjStRJu6mCV-RIt.js";import"./B9oIv0yHfSofExHREzOlP.js";import"./lSK_FP25nmkNGrrDDv39W.js";

1import"./By4Z9UP0akFUAfMmDvW5O.js";import"./CDEo9rgefq0mEawjtmitq.js";import"./Becj8ysC6zLcsJ0AL0rLC.js";import"./o9gf0eYSdDIMmy_MNBTYs.js";import"./C1OfJr4wQoLPYiA0WBKjE.js";import"./CXBb1oYHKpkC9566jwPJa.js";import"./DN9QJbym9Mmh23cqXrFl2.js";import"./C_btoWFN2xn2UbTDlrG54.js";import"./DZreG86elyinJnUSjdRoI.js";import"./iR_yTZEnOeXhyUaJkKnJI.js";import"./DSNx8G3AjmBJ-yhELZ2qe.js";import"./CDwUflg9Qyg2FWciw1LG6.js";import"./0XFRxvEwS0I9gNjN-mSuz.js";import"./CuOZ50F1i4bCTjKIBbA3h.js";import"./Bu_sqVUwc0fd_bSQkYKkx.js";const R=({title:r,children:i})=>t.createElement("div",{className:"avatar-card-wrapper"},t.createElement("h2",{className:"page-title mt-5 mb-3"},r),t.createElement("div",{className:"card-wrapper"},t.createElement(v,null,i)));R.propTypes={title:s.string.isRequired,children:s.node.isRequired};const z=({type:r,image:i,isActive:e,setActive:a,name:o})=>{const{t:n}=y("Avatar"),c=()=>a(r);return t.createElement(K,{key:r,active:e,onClick:c},t.createElement(Y,{className:"d-flex align-items-center"},t.createElement("div",{className:"component-icon-wrapper"},t.createElement("img",{className:"component-icon",src:i,alt:"".concat(r," icon")})),t.createElement("p",{className:"mb-0"},n(o))))};z.propTypes={type:s.string.isRequired,image:s.string.isRequired,isActive:s.bool.isRequired,setActive:s.func.isRequired,name:s.string.isRequired};const O=({gender:r,type:i,code:e,isSelected:a,updateAvatarConfig:o})=>{const n=()=>o({[i]:e});return t.createElement(d,{xs:"4",md:"3",xl:"2"},t.createElement("div",{className:"img-for-select ".concat(a?"selected-item":""),onClick:n},t.createElement(f.LazyLoadImage,{wrapperClassName:"",src:"https://avatars.rollercoin.com/static/images/components/".concat(r,"/empty.png?v=1.0.1"),alt:"".concat(r,"/empty"),threshold:100,className:"component-img"}),t.createElement(f.LazyLoadImage,{wrapperClassName:"",src:"https://avatars.rollercoin.com/static/images/components/".concat(r,"/").concat(i,"/").concat(e,".png?v=1.0.1"),alt:"".concat(i,"/").concat(e),threshold:100,className:"component-img"})))};O.propTypes={gender:s.string.isRequired,type:s.string.isRequired,code:s.number.isRequired,isSelected:s.bool.isRequired,updateAvatarConfig:s.func.isRequired};const D=({type:r,gender:i,currentTypeComponents:e,codeInAvatarConfig:a,updateAvatarConfig:o})=>t.createElement(X,{tabId:r},t.createElement(v,{className:"mobile-slider"},e.map(n=>t.createElement(O,{key:n,code:n,gender:i,type:r,isSelected:a===n,updateAvatarConfig:o}))));D.propTypes={type:s.string.isRequired,gender:s.string.isRequired,currentTypeComponents:s.array.isRequired,codeInAvatarConfig:s.number.isRequired,updateAvatarConfig:s.func.isRequired};const ue="https://productionassets.rollercoin.com/main-app/869dd4ae5d20081c0d0ae88a08108afc/assets/img/wcuOmvEP_k49ffaZLGgMR.svg",he="https://productionassets.rollercoin.com/main-app/869dd4ae5d20081c0d0ae88a08108afc/assets/img/DNg8u0xDpePJftS5g-Ixx.svg",ve="https://productionassets.rollercoin.com/main-app/869dd4ae5d20081c0d0ae88a08108afc/assets/img/C-lJ1xB_puS8wza99Ttlv.svg",fe="https://productionassets.rollercoin.com/main-app/869dd4ae5d20081c0d0ae88a08108afc/assets/img/Bixtdw8fmuv_unl_3ROsu.svg",Ee="https://productionassets.rollercoin.com/main-app/869dd4ae5d20081c0d0ae88a08108afc/assets/img/Sku0Z1Y0KYfjNjBDZ9d33.svg",C=[{type:"face",name:"skin",image:Ee},{type:"clothes",name:"clothes",image:ue},{type:"mouth",name:"face",image:he},{type:"hair",name:"hair",image:fe},{type:"eyes",name:"glasses",image:ve}],j=({avatarComponents:r,avatarConfig:i,updateAvatarConfig:e,gender:a})=>{const[o,n]=N.useState(C[0].type);return i?t.createElement("div",{className:"avatar-components-list-wrapper"},t.createElement(ee,{tabs:!0},C.map(({type:c,image:l,name:m})=>t.createElement(z,{key:c,isActive:c===o,image:l,type:c,name:m,setActive:n}))),t.createElement(te,{activeTab:o},C.map(({type:c})=>t.createElement(D,{key:c,type:c,gender:a,currentTypeComponents:r[c],codeInAvatarConfig:i[c],updateAvatarConfig:e})))):!1};j.propTypes={avatarConfig:s.object,avatarComponents:s.object.isRequired,updateAvatarConfig:s.func.isRequired,gender:s.string.isRequired};class F extends N.Component{constructor(e){super(e);p(this,"componentDidMount",async()=>{const{disableRender:e}=this.props;if(e)return!0;await this.renderCanvas()});p(this,"componentDidUpdate",async e=>

1{const{avatarConfig:a,gender:o}=this.props;(JSON.stringify(a)!==JSON.stringify(e.avatarConfig)||JSON.stringify(o)!==JSON.stringify(e.gender))&&await this.renderCanvas()});p(this,"loadImage",(e,a)=>{const{gender:o}=this.props;return new Promise((n,c)=>{const l=new Image;l.addEventListener("load",()=>n(l)),l.addEventListener("error",()=>c(new Error("Failed to load image's URL: ".concat(e)))),l.src="/static/images/components/".concat(o,"/").concat(e,"/").concat(a,".png"),l.src="https://avatars.rollercoin.com/static/images/components/".concat(o,"/").concat(e,"/").concat(a,".png")})});p(this,"renderCanvas",async()=>{const{avatarConfig:e}=this.props;if(!e)return!1;const a=this.canvasElementRef.current.getContext("2d");a.clearRect(0,0,this.canvasElementRef.current.width,this.canvasElementRef.current.height);try{const o={face:await this.loadImage("face",e.face),clothes:await this.loadImage("clothes",e.clothes),mouth:await this.loadImage("mouth",e.mouth),eye:await this.loadImage("eyes",e.eyes),hair:await this.loadImage("hair",e.hair)};Object.values(o).forEach(n=>{a.drawImage(n,0,0,this.canvasElementRef.current.width,this.canvasElementRef.current.height)})}catch(o){console.error(o)}});this.canvasElementRef=t.createRef()}render(){return t.createElement("canvas",{ref:this.canvasElementRef,width:29,height:29,style:{width:"100%",height:"100%"}})}}F.propTypes={gender:s.string.isRequired,avatarConfig:s.object.isRequired,disableRender:s.bool};const k=r=>Object.keys(r).reduce((i,e)=>(i[e]=r[e][Math.floor(Math.random()*r[e].length)],i),{}),T=({className:r})=>{const{t:i}=y("SingleComponents");return t.createElement("div",{className:"wrapper-block ".concat(r)},t.createElement(v,{noGutters:!0,className:"align-items-center justify-content-between"},t.createElement(d,{xs:"5",className:"line"}),t.createElement("p",{className:"default-text col-2 text-center mgb-0"},i("or")),t.createElement(d,{xs:"5",className:"line"})))};T.propTypes={className:s.string};const P="https://productionassets.rollercoin.com/main-app/869dd4ae5d20081c0d0ae88a08108afc/assets/img/COxRxaIVWZpD2WMcnsEv4.svg",Ne="https://productionassets.rollercoin.com/main-app/869dd4ae5d20081c0d0ae88a08108afc/assets/img/CP_brI5Iicn46lLNwcunQ.svg",Ce="https://productionassets.rollercoin.com/main-app/869dd4ae5d20081c0d0ae88a08108afc/assets/img/CxVKjdGd8EFJVQ3KBJB6u.svg",Ae=r=>({language:r.game.language,isMobile:r.game.isMobile}),be=r=>({updateAvatarVersion:i=>r(M(i)),updateAvatarType:i=>r(_(i))});class V extends t.Component{constructor(e){super(e);p(this,"createSignalAndController",e=>{this.controllers[e]&&this.controllers[e].abort(),this.controllers[e]=new AbortController,this.signals[e]=this.controllers[e].signal});p(this,"getAvatarComponents",async e=>{this.createSignalAndController("getComponents"),this.setState({disableRender:!0});try{const a=await E("/api/avatars/avatar-components?gender=".concat(e),{method:"GET",signal:this.signals.getComponents});if(!a.success)return console.error(a.error),!1;const o=k(a.data);this.setState({disableRender:!1,avatarComponents:a.data,avatarConfig:o,gender:e})}catch(a){this.setState({disableRender:!1}),console.error(a)}});p(this,"setGender",e=>this.getAvatarComponents(e.target.value));p(this,"setRandomAvatar",()=>{const{avatarComponents:e}=this.state,a=k(e);this.setState({avatarConfig:a})});p(this,"saveAvatar",async()=>{const{language:e,history:a,updateAvatarVersion:o,updateAvatarType:n}=this.props,{gender:c,avatarConfig:l,avatarType:m}=this.state;this.createSignalAndController("saveAvatar"),this.setState({isLoading:!0});try{const g=await E("/api/profile/customize-user-avatar",{method:"POST",signal:this.signals.saveAvatar,body:JSON.stringify({gender:c,avatar_config:l,avatar_type:m})});if(this.setState({isLoading:!1}),!g.success)return console.error(g.error);o(g.data.new_avatar_version),n("default");const u=this.props.isMobile?"".concat(h(e),"/profile/personal-profile"):"".concat(h(e),"/profile");a.push(u)}catch(g){console.error(g)}});p(this,"updateAvatarConfig",e=>this.setState({avatarConfig:{...this.state.avatarConfig,...e}}));this.state={gender:"male",avatarConfig:null,avatarComponents:{mouth:[],eyes:[],face:[],hair:[],clothes:[]},avatarType:"default",disableRender:!1,isLoading:!1},this.controllers={},this.signals={}}componentDidMount(){const{gender:e}=this.state;this.getAvatarComponents(e)}

1componentWillUnmount(){Object.keys(this.controllers).forEach(e=>{this.controllers[e]&&this.controllers[e].abort()})}render(){const{gender:e,avatarConfig:a,disableRender:o,avatarComponents:n,isLoading:c}=this.state,{t:l,language:m}=this.props;return t.createElement(R,{title:l("customizeAvatar")},t.createElement(d,{xs:12,lg:4},t.createElement("div",{className:"avatar-img"},t.createElement(F,{gender:e,avatarConfig:a,disableRender:o})),t.createElement("div",{className:"inline-radio-group mt-3"},t.createElement(x,{type:"radio",id:"gender_male",name:"gender",value:"male",label:l("male"),checked:e==="male",onChange:this.setGender}),t.createElement(x,{type:"radio",id:"gender_female",name:"gender",value:"female",label:l("female"),checked:e==="female",onChange:this.setGender})),t.createElement(v,{noGutters:!0,className:"mt-4 avatar-btn-group"},t.createElement(d,{lg:12,xs:6,className:"save-btn"},t.createElement("button",{type:"button",className:"tree-dimensional-button btn-cyan w-100",onClick:this.saveAvatar,disabled:c},t.createElement("span",{className:"text-wrapper flex-row w-100"},t.createElement("div",{className:"mr-2"},t.createElement("img",{src:P,alt:"Floppy disk icon"})),l("saveChanges")))),t.createElement(d,{lg:12,xs:6,className:"random-btn"},t.createElement("button",{type:"button",className:"tree-dimensional-button btn-default w-100",onClick:this.setRandomAvatar},t.createElement("span",{className:"text-wrapper flex-row w-100"},t.createElement("div",{className:"mr-2"},t.createElement("img",{src:Ce,alt:"Refresh icon"})),l("randomAvatar"))))),t.createElement(T,{className:"mt-4"}),t.createElement("div",{className:"mt-3"},t.createElement(A,{to:"".concat(h(m),"/customize-avatar/nft"),className:"tree-dimensional-button btn-default w-100"},t.createElement("span",{className:"text-wrapper flex-row w-100"},t.createElement("div",{className:"mr-2"},t.createElement("img",{src:Ne,alt:"NFT coin icon"})),l("chooseNft"))))),t.createElement(d,{xs:12,lg:8},t.createElement(j,{gender:e,avatarConfig:a,avatarComponents:n,updateAvatarConfig:this.updateAvatarConfig})))}}p(V,"propTypes",{t:s.func.isRequired,language:s.string.isRequired,history:s.object.isRequired,updateAvatarVersion:s.func.isRequired,updateAvatarType:s.func.isRequired,isMobile:s.bool.isRequired});const ye=w("Avatar")(b(Ae,be)($(V))),we="https://productionassets.rollercoin.com/main-app/869dd4ae5d20081c0d0ae88a08108afc/assets/img/Db072MRFnxiYMIbPFQZ6R.svg",W=({tokenId:r,selectAvatar:i,selectedAvatar:e,nftContractId:a,imagesUrl:o,isUsedAsAvatar:n})=>{const c="".concat(a,"_").concat(r),l=e===c,m=()=>{if(n)return!1;i(l?null:{id:c,pathToAvatar:"".concat(o,"/transparent/").concat(r,".png")})};return t.createElement(d,{key:r,xs:6,lg:3,className:"mb-4"},t.createElement("div",{className:"nft-avatar-img-wrapper",onClick:m},t.createElement(f.LazyLoadImage,{width:150,height:150,src:"".concat(o,"/").concat(r,".png"),alt:"nft-avatar",threshold:100,wrapperClassName:"d-block",className:"nft-avatar-img ".concat(!n&&l?"is-selected":""," ").concat(n?"is-used-as-avatar":"")}),!!n&&t.createElement("img",{width:32,height:32,src:we,alt:"green check",className:"green-check"})))};W.propTypes={nftContractId:s.string.isRequired,tokenId:s.string.isRequired,imagesUrl:s.string.isRequired,isUsedAsAvatar:s.bool.isRequired,selectAvatar:s.func.isRequired,selectedAvatar:s.string.isRequired};const Re="https://productionassets.rollercoin.com/main-app/869dd4ae5d20081c0d0ae88a08108afc/assets/img/BbFb_FQj6n1pp0uOk343S.svg",Te="https://productionassets.rollercoin.com/main-app/869dd4ae5d20081c0d0ae88a08108afc/assets/img/D9owo6kLVQ4C_rMhtcqzI.svg",Se={"8biticon":pe},G=({accordionItems:r,selectedAvatar:i,selectAvatar:e})=>{const{t:a}=y("Avatar"),o=L(m=>m.game.language),[n,c]=N.useState(),l=m=>c(n===m?null:m);return t.createElement("div",{className:"accordion-wrapper mt-4"},r.map(({nft_contracts_id:m,title:g,code:u,images_url:U,user_tokens:S})=>t.createElement(ae,{key:m},t.createElement(re,{onClick:()=>l(m)},t.createElement("div",{className:"token-preview"},t.createElement("div",{className:"d-flex"},t.createElement("div",{className:"mr-3"},t.createElement("img",{className:"nft-service-cover",src:Se[u],alt:"Nft service avatar"})),t.createElement("div",{className:"nft-info-wrapper"},t.createElement("p",{className:"nft-service-name"},g[o]),t.createElement("p",{className:"item-count"},S.length," ",a("items")))),t.createElement("div",null,t.createElement("img",{src:n===m?Te:Re,alt:"toggle"})))),t.createElement(se,{isOpen:n===m,className:"card-content"},t.createElement(ie,null,t.createElement(v,null,S.map(({token_id:I,is_used_as_avatar:Q})=>

1t.createElement(W,{key:I,imagesUrl:U,isUsedAsAvatar:Q,nftContractId:m,selectAvatar:e,selectedAvatar:i,tokenId:I}))))))))};G.propTypes={accordionItems:s.array.isRequired,selectedAvatar:s.string.isRequired,selectAvatar:s.func.isRequired};const Ie="https://productionassets.rollercoin.com/main-app/869dd4ae5d20081c0d0ae88a08108afc/assets/img/DSNtmrFt6mgM_lOxQ3glM.svg",xe=r=>({language:r.game.language,avatarVersion:r.user.avatarVersion,userId:r.user.uid}),qe=r=>({updateAvatarVersion:i=>r(M(i)),updateAvatarType:i=>r(_(i))});class J extends t.Component{constructor(e){super(e);p(this,"createSignalAndController",e=>{this.controllers[e]&&this.controllers[e].abort(),this.controllers[e]=new AbortController,this.signals[e]=this.controllers[e].signal});p(this,"selectAvatar",e=>this.setState({selectedAvatar:e?e.id:null,pathToNFTAvatar:e?e.pathToAvatar:null}));p(this,"saveAvatar",async()=>{const{selectedAvatar:e}=this.state,{t:a,language:o,history:n,updateAvatarVersion:c,updateAvatarType:l}=this.props;this.createSignalAndController("saveAvatar"),this.setState({isLoading:!0});try{const[m,g]=e.split("_"),u=await E("/api/profile/customize-user-avatar",{method:"POST",signal:this.signals.saveAvatar,body:JSON.stringify({token_id:g,nft_contract_id:m,avatar_type:"nft"})});if(!u.success)return me(this.constructor.renderToast(a("setAvatarError"),ce),{position:"top-left",autoClose:3e3,hideProgressBar:!0,closeOnClick:!0,pauseOnHover:!0,draggable:!0}),this.setState({isLoading:!1});c(u.data.new_avatar_version),l("nft"),n.push("".concat(h(o),"/profile"))}catch(m){console.error(m),this.setState({isLoading:!1})}});this.state={isLoading:!1,selectedAvatar:null,pathToNFTAvatar:null},this.controllers={},this.signals={}}static renderToast(e,a){return t.createElement("div",{className:"content-with-image"},t.createElement("img",{src:a,alt:"market notification"}),t.createElement("span",null,e))}componentWillUnmount(){Object.keys(this.controllers).forEach(e=>{this.controllers[e]&&this.controllers[e].abort()})}render(){const{t:e,language:a,userId:o,nftAvatarsData:n,avatarVersion:c}=this.props,{selectedAvatar:l,isLoading:m,pathToNFTAvatar:g}=this.state,u=l?g:"https://avatars.rollercoin.com/static/avatars/".concat(o,".png?v=").concat(c);return t.createElement(R,{title:e("nftAvatar")},t.createElement(d,{xs:12,lg:4},t.createElement("div",{className:"avatar-img"},t.createElement(f.LazyLoadImage,{width:272,height:272,src:u,alt:"avatar",threshold:100})),t.createElement("div",{className:"mt-4"},t.createElement("button",{type:"button",className:"tree-dimensional-button btn-cyan w-100",disabled:!l||m,onClick:this.saveAvatar},t.createElement("span",{className:"text-wrapper flex-row w-100"},t.createElement("div",{className:"mr-2"},t.createElement("img",{src:P,alt:"Floppy disk icon"})),e("saveChanges")))),t.createElement(T,{className:"mt-4"}),t.createElement("div",{className:"mt-3 pb-3"},t.createElement(A,{to:"".concat(h(a),"/customize-avatar"),className:"tree-dimensional-button btn-default w-100"},t.createElement("span",{className:"text-wrapper flex-row w-100"},t.createElement("div",{className:"mr-2"},t.createElement("img",{src:Ie,alt:"Default avatar icon"})),e("defaultAvatar"))))),t.createElement(d,{xs:12,lg:8},t.createElement(v,{className:"available-nft-wrapper align-items-center"},t.createElement(d,{xs:12,lg:5},t.createElement("p",{className:"available-nft"},e("availableNFt"))),t.createElement(d,{xs:12,lg:{size:5,offset:2}},t.createElement(A,{to:"".concat(h(a),"/profile/nft-collection"),className:"tree-dimensional-button btn-default w-100"},t.createElement("span",{className:"text-wrapper-without-img w-100"},e("allNftCollection"))))),t.createElement(G,{accordionItems:n,selectedAvatar:l,selectAvatar:this.selectAvatar})))}}p(J,"propTypes",{t:s.func.isRequired,language:s.string.isRequired,userId:s.string.isRequired,nftAvatarsData:s.array.isRequired,history:s.object.isRequired,avatarVersion:s.number.isRequired,updateAvatarVersion:s.func.isRequired,updateAvatarType:s.func.isRequired});const ke=w("Avatar")(b(xe,qe)($(J))),Le=r=>({connectedWallets:r.user.connectedWallets,isAuthorizedMetaMask:r.user.isAuthorizedMetaMask,wsNode:r.webSocket.wsNode});class B extends t.Component{constructor(e){super(e);p(this,"createSignalAndController",e=>{this.controllers[e]&&this.controllers[e].abort(),this.controllers[e]=new AbortController,this.signals[e]=this.controllers[e].signal});p(this,"onWSNodeMessage",async e=>{const a=JSON.parse(e.data),{cmd:o}=a;switch(o){case"wallet_initially_sync_updated":await this.getUserTokens();break}});p(this,"getNFTAvatars",async()=>{var e;this.setState({isLoading:!0}),this.createSignalAndController("getNFTAvatars");try{const a=await E("/api/profile/nft-user-avatars",{method:"GET",signal:this.signals.getNFTAvatars});if(!a.success)return!1;if(a.data.is_initially_synced)return(e=a.data)!=null&&e.items.length?this.setState({nftAvatarsData:a.data.items,isSyncInitialization:!1}):(await this.getContractsList(),!1);this.setState({isSyncInitialization:!0})}catch(a){console.error(a)}finally{this.setState({isLoading:!1})}});p(this,"getContractsList",async()=>{this.createSignalAndController("getContractsList");try{const e=await E("/api/profile/nft-contracts-list",{method:"GET",signal:this.signals.getContractsList});return e.success?(this.setState({contractsList:e.data}),!0):!1}catch(e){console.error(e)}});this.state={isLoading:!1,isSyncInitialization:!1,nftAvatarsData:null,contractsList:null},this.controllers={},this.signals={}}async componentDidMount(){const{isAuthorizedMetaMask:e,wsNode:a}=this.props;e&&await this.getNFTAvatars(),a&&!a.messageListeners.promoUpdates&&a.setListenersMessage({promoUpdates:this.onWSNodeMessage})}async componentDidUpdate(e){e.isAuthorizedMetaMask!==this.props.isAuthorizedMetaMask&&this.props.isAuthorizedMetaMask&&await this.getNFTAvatars()}componentWillUnmount(){const{wsNode:e}=this.props;

1Object.keys(this.controllers).forEach(a=>{this.controllers[a]&&this.controllers[a].abort()}),e&&e.removeListenersMessage("promoUpdates")}render(){const{isLoading:e,nftAvatarsData:a,contractsList:o,isSyncInitialization:n}=this.state,{t:c}=this.props;return t.createElement(N.Fragment,null,e&&t.createElement("div",{className:"profile-preloader"},t.createElement(f.LazyLoadImage,{className:"loader-img",alt:"preloader",src:le,height:126,width:126,threshold:100})),!a&&!o&&t.createElement("div",{className:"mb-5 header-text"},t.createElement("h2",{className:"page-title mt-5 mb-3"},c("nftAvatar")),t.createElement(de,{isSyncInitialization:n,isLoading:e})),!a&&!!o&&t.createElement("div",{className:"mb-5 header-text"},t.createElement("h2",{className:"page-title mt-5 mb-3"},c("nftAvatar")),t.createElement(ge,{contractsList:o})),a&&t.createElement(ke,{nftAvatarsData:a}))}}p(B,"propTypes",{connectedWallets:s.array.isRequired,isAuthorizedMetaMask:s.bool.isRequired,wsNode:s.object.isRequired,t:s.func.isRequired});const $e=w("Avatar")(b(Le,null)(B)),is=()=>{const r=L(i=>i.game.language);return t.createElement(oe,{className:"customize-avatar-page-wrapper"},t.createElement(v,{className:"justify-content-center"},t.createElement(d,{xs:"12",lg:"10"},t.createElement(ne,null,t.createElement(q,{exact:!0,path:"".concat(h(r),"/customize-avatar"),render:()=>t.createElement(ye,null)}),t.createElement(q,{exact:!0,path:"".concat(h(r),"/customize-avatar/nft"),render:()=>t.createElement($e,null)})))))};export{is as default};