https://www.xstable.ai/_next/static/chunks/6637-f68de5481aafcaf5.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6637],{10018:(t,e,i)=>{i.d(e,{Q:()=>f,GuideProvider:()=>g});var n,s=i(80069),o=i(20801),l=i(66926),r=i(49500),a=i(68);function d(){return(d=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var n in i)({}).hasOwnProperty.call(i,n)&&(t[n]=i[n])}return t}).apply(null,arguments)}let c=function(t){return o.createElement("svg",d({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none"},t),n||(n=o.createElement("path",{fill:"#6C757D",fillOpacity:.8,d:"M9.138 8.195a.667.667 0 1 0-.943.943L11.057 12l-2.862 2.862a.667.667 0 1 0 .943.943L12 12.943l2.862 2.862a.667.667 0 1 0 .943-.943L12.943 12l2.862-2.862a.667.667 0 1 0-.943-.943L12 11.057z"})))};var u=i(33872),p=i(98503);let h=()=>{let{currentStep:t,steps:e,elementsRef:i,next:n,finish:d}=(0,u.Z)(),{t:h}=(0,l.Bd)(),x=()=>{if(null===t)return;let e=t+1;(0,p.$s)("trade_guide_step".concat(e,"_skip_click")),d()},[f,g]=(0,o.useState)(null),[m,w]=(0,o.useState)(null),[b,v]=(0,o.useState)({top:0,left:0,opacity:0}),k=(0,o.useRef)(null);if((0,o.useEffect)(()=>{if(null===t)return;let e=t+1;(0,p.$s)("trade_guide_step".concat(e,"_popup_show"))},[t]),(0,o.useEffect)(()=>{let n;if(null===t){g(null),w(null);return}g(null),w(null),v({top:0,left:0,opacity:0});let s=e[t],o=!1,l=0,r=()=>{if(o)return;l++;let t=i.current[s.id];if(t){let e=t.getBoundingClientRect();if(t.isConnected&&e.width>0&&e.height>0)return void g(t)}l<100&&(n=window.setTimeout(r,50))};return r(),()=>{o=!0,void 0!==n&&window.clearTimeout(n)}},[t]),(0,o.useEffect)(()=>{if(!f)return;let i=()=>{let t=f.getBoundingClientRect();f.isConnected&&t.width>0&&t.height>0&&w(t)},s=requestAnimationFrame(i),o=new ResizeObserver(i);o.observe(f);let l=new MutationObserver(i);l.observe(f,{attributes:!0,childList:!0,subtree:!0});let r=i=>{if(i.target.closest(".guide-click-area")){if(0===t&&(i.preventDefault(),i.stopPropagation()),null!==t){let i=t+1;if((0,p.$s)("trade_guide_step".concat(i,"_next_click")),t===e.length-1)return void d()}n()}};return window.addEventListener("click",r,!0),window.addEventListener("resize",i),window.addEventListener("scroll",i,!0),()=>{cancelAnimationFrame(s),o.disconnect(),l.disconnect(),window.removeEventListener("click",r,!0),window.removeEventListener("resize",i),window.removeEventListener("scroll",i,!0)}},[f,t,n,d,e]),(0,o.useLayoutEffect)(()=>{let i,n;if(!m||!k.current||null===t)return;let s=k.current,o=e[t],{width:l,height:r}=s.getBoundingClientRect(),a=o.tooltipPosition||"auto";switch(window.innerWidth<768&&("step1"===o.id&&"right"===a?a="bottom":"step2"===o.id&&"left"===a?a="top":"step3"===o.id&&"left"===a?a="bottom":"step4"===o.id&&"left"===a&&(a="top")),a){case"top":i=m.top-r-8-15,n=m.left+m.width/2-l/2;break;case"bottom":i=m.bottom+8+15,n=m.left+m.width/2-l/2;break;case"left":i=m.top+m.height/2-r/2,n=m.left-l-8-15;break;case"right":i=m.top+m.height/2-r/2,n=m.right+8+12;break;default:i=m.bottom+8,n=m.left+m.width/2-l/2}n=Math.max(8,Math.min(n,window.innerWidth-l-8)),v({top:i=Math.max(8,Math.min(i,window.innerHeight-r-8)),left:n,opacity:1})},[m,t,e]),null===t||!f||!m)return null;let _=e[t],j=window.innerWidth<768,y=_.tooltipPosition||"top";j&&("step1"===_.id&&"right"===y?y="bottom":"step2"===_.id&&"left"===y?y="top":"step3"===_.id&&"left"===y?y="bottom":"step4"===_.id&&"left"===y&&(y="top"));let N=((t,e,i,n)=>{let s=e/2,o={position:"absolute",width:e,height:e,background:n,transform:"rotate(45deg)",boxSizing:"border-box"};switch(t){case"top":o.bottom=-s,o.left="50%",o.transform+=" translateX(-50%)",o.borderRight="1px solid ".concat(i),o.borderBottom="1px solid ".concat(i);break;case"bottom":o.top=-s+4,o.left="50%",o.transform+=" translateX(-50%)",o.borderLeft="1px solid ".concat(i),o.borderTop="1px solid ".concat(i);break;case"left":o.right=-s+4,o.top="50%",o.transform+=" translateY(-50%)",o.borderRight="1px solid ".concat(i),o.borderTop="1px solid ".concat(i);break;case"right":o.left=-s,o.top="50%",o.transform+=" translateY(-50%)",o.borderLeft="1px solid ".concat(i),o.borderBottom="1px solid ".concat(i)}return o}

1)(y,12,"white","white"),C=window.innerWidth,E=window.innerHeight,B={top:m.top-7,left:m.left-7,width:m.width+14,height:m.height+14};return a.createPortal((0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{style:{position:"fixed",top:0,left:0,width:"100%",height:m.top,background:"transparent",pointerEvents:"auto",zIndex:9998}}),(0,s.jsx)("div",{style:{position:"fixed",top:m.bottom,left:0,width:"100%",height:E-m.bottom,background:"transparent",pointerEvents:"auto",zIndex:9998}}),(0,s.jsx)("div",{style:{position:"fixed",top:m.top,left:0,width:m.left,height:m.height,background:"transparent",pointerEvents:"auto",zIndex:9998}}),(0,s.jsx)("div",{style:{position:"fixed",top:m.top,left:m.right,width:C-m.right,height:m.height,background:"transparent",pointerEvents:"auto",zIndex:9998}}),(0,s.jsxs)("svg",{width:C,height:E,style:{position:"fixed",left:0,top:0,zIndex:9997,pointerEvents:"none"},children:[(0,s.jsx)("defs",{children:(0,s.jsxs)("mask",{id:"hole-mask",children:[(0,s.jsx)("rect",{width:"100%",height:"100%",fill:"white"}),(0,s.jsx)(r.P.rect,{initial:{y:-60,opacity:0},animate:{y:0,opacity:1},transition:{duration:.45,ease:"easeOut"},x:B.left,y:B.top,width:B.width,height:B.height,rx:12,ry:12,fill:"black"},"mask-hole-".concat(t))]})}),(0,s.jsx)("rect",{width:"100%",height:"100%",fill:"rgba(0,0,0,0.6)",mask:"url(#hole-mask)"})]}),(0,s.jsx)(r.P.div,{initial:{opacity:0,y:-60},animate:{opacity:1,y:0},transition:{duration:.45,ease:"easeOut"},className:"",style:{position:"fixed",top:B.top,left:B.left,width:B.width,height:B.height,borderRadius:12,zIndex:1e4,pointerEvents:"none"}},t),(0,s.jsxs)(r.P.div,{ref:k,initial:{opacity:0,y:-40},animate:{opacity:1,y:0},transition:{duration:.45,ease:"easeOut"},style:{position:"fixed",top:b.top,left:b.left,background:"white",border:"1px solid white",padding:"12px",borderRadius:8,boxShadow:"0 4px 10px rgba(0,0,0,0.3)",zIndex:10001,maxWidth:280},children:[_.showCloseButton&&(0,s.jsx)(c,{className:"absolute right-2 top-2 cursor-pointer",onClick:x}),(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,s.jsx)("span",{className:"text-sm font-semibold text-[#212529]",children:_.title}),_.subtitle&&(0,s.jsx)("span",{className:"text-xs text-[#6c757d]",children:_.subtitle})]}),(0,s.jsx)("div",{style:{...N}}),_.showButtons?(0,s.jsxs)("div",{className:"flex items-center justify-between mt-3",children:[(0,s.jsxs)("span",{className:"text-sm",children:[(0,s.jsx)("span",{className:"text-main-color",children:t+1}),(0,s.jsxs)("span",{className:"text-black",children:["/",e.length]})]}),(0,s.jsxs)("div",{className:"flex items-center gap-2",children:[(0,s.jsx)("span",{className:"text-xs px-4 py-1.5 text-[#6c757d] cursor-pointer hover:text-[#212529]",onClick:x,children:h("trade.guide_skip")}),(0,s.jsx)("span",{className:"text-xs px-4 py-1.5 bg-main-color text-white rounded-lg cursor-pointer",onClick:()=>{if(null===t)return;let s=e[t];if("step2"===s.id&&window.innerWidth<768){var o;let t=null==(o=i.current[s.id])?void 0:o.querySelector(".guide-click-area");if(t)return void t.click()}let l=t+1;(0,p.$s)("trade_guide_step".concat(l,"_next_click")),n()},children:h("trade.guide_next")})]})]}):(0,s.jsxs)("div",{className:"flex items-center justify-between mt-3",children:[(0,s.jsxs)("span",{className:"text-sm",children:[(0,s.jsx)("span",{className:"text-main-color",children:t+1}),(0,s.jsxs)("span",{className:"text-black",children:["/",e.length]})]}),(0,s.jsxs)("div",{className:"flex items-center gap-2",children:[_.showSkipButton&&(0,s.jsx)("span",{className:"text-xs px-4 py-1.5 text-[#6c757d] cursor-pointer hover:text-[#212529]",onClick:x,children:h("trade.guide_skip")}),(0,s.jsx)("span",{className:"text-xs px-4 py-1.5 bg-main-color text-white rounded-lg cursor-pointer",onClick:()=>{(0,p.$s)("trade_guide_step4_open_click"),d()},children:h("trade.guide_done")})]})]})]},"tooltip-".concat(t))]}),document.body)};var x=i(42351);i(98872);let f=(0,o.createContext)(null),g=t=>{let{children:e}=t,[i,n]=(0,o.useState)(null),r=(0,o.useRef)({}),[a,d]=(0,o.useState)(!1),{t:c}=(0,l.Bd)(),u=[{id:"step1",title:c("trade.guide_step1_title"),subtitle:c("trade.guide_step1_subtitle"),showButtons:!0,tooltipPosition:"right"},{id:"step2",title:c("trade.guide_step2_title"),subtitle:c("trade.guide_step2_subtitle"),showButtons:!0,tooltipPosition:"left"},{id:"step3",title:c("trade.guide_step3_title"),subtitle:c("trade.guide_step3_subtitle"),showButtons:!0,tooltipPosition:"left"},{id:"step4",title:c("trade.guide_step4_title"),showButtons:!1,showSkipButton:!0,tooltipPosition:"left"}],p=(0,o.useCallback)((t,e)=>{r.current[t]=e},[]);return(0,s.jsxs)(f,{value:{steps:u,currentStep:i,elementsRef:r,registerStep:p,next:()=>{if(null===i)return;let t=i+1;t>=u.length?n(null):(n(t),requestAnimationFrame(()=>{let e=r.current[u[t].id];e&&e.getBoundingClientRect()}))},finish:()=>{n(null),localStorage.setItem(x._X,"true")},start:()=>{if("true"===localStorage.getItem(x._X))return;let t=0,e=()=>{t++;let i=r.current[u[0].id],s=null==i?void 0:i.getBoundingClientRect();(null==i?void 0:i.isConnected)&&s&&s.width>0&&s.height>0?(n(0),d(!0)):t<100&&window.setTimeout(e,50)};e()}},children:[e,a&&(0,s.jsx)(h,{})]})}},33872:(t,e,i)=>{i.d(e,{Z:()=>o});var n=i(20801),s=i(10018);let o=()=>{let t=(0,n.use)(s.Q);if(!t)throw Error("useGuideContext must be used within GuideProvider");return t}},98872:(t,e,i)=>{i.r(e),i.d(e,{default:()=>a});var n=i(30481),s=i(79646),o=i(66926),l=i(13201),r=i(57454);n.Ay.use(o.r9).use((0,s.A)((t,e)=>i(67311)("./".concat((0,l.QC)(t),"/").concat(e,".json")))).init({lng:(0,r.Hg)(),fallbackLng:"en-US",interpolation:{escapeValue:!1},ns:["home"],defaultNS:"home"});let a=n.Ay}}]);