@orderly.network/ui-share
Version:
13 lines (11 loc) • 25.5 kB
JavaScript
import { cn, Button, registerSimpleDialog, registerSimpleSheet, Box, Flex, Text, Divider, ScrollArea, Input, CloseCircleFillIcon, toast } from '@orderly.network/ui';
import d, { forwardRef, useImperativeHandle, useMemo, useState, useEffect, useRef, useCallback } from 'react';
import { usePoster, useSymbolsInfo, useReferralInfo } from '@orderly.network/hooks';
import { i18n, useTranslation } from '@orderly.network/i18n';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { Decimal } from '@orderly.network/utils';
import st from 'embla-carousel-react';
var X=e=>{let{pnl:t,hide:o}=e,r=t?.entity,n=useSymbolsInfo(),{getFirstRefCode:i}=useReferralInfo(),s=useMemo(()=>{let a=i()?.code;return {code:t?.refCode??a,slogan:t?.refSlogan,link:t?.refLink}},[i,t]),c=useMemo(()=>{if(r)return n[r?.symbol]("base_dp")},[r,n]),l=useMemo(()=>{if(r)return n[r?.symbol]("quote_dp")},[r,n]);return {entity:r,leverage:t?.leverage,baseDp:c,quoteDp:l,referralInfo:s,shareOptions:t,hide:o}};var V=forwardRef((e,t)=>{let{width:o,height:r,className:n,data:i,style:s}=e,{ref:c,download:l,toDataURL:a,copy:u,toBlob:x}=usePoster(i,{ratio:e.ratio});return useImperativeHandle(t,()=>({download:l,toDataURL:a,toBlob:x,copy:u})),jsx("canvas",{ref:c,width:o,height:r,className:n,style:s})});function j(e,t,o,r,n,i,s,c,l){let{t:a}=useTranslation(),{symbol:u,currency:x}=tt(e.symbol),f={symbol:u,currency:x,side:e.side};switch(n){case "pnl":{e.pnl!=null&&(f.pnl=new Decimal(e.pnl).toFixed(2,Decimal.ROUND_DOWN));break}case "roi":{e.roi!=null&&(f.ROI=new Decimal(e.roi).toFixed(2,Decimal.ROUND_DOWN));break}case "roi_pnl":{e.pnl!=null&&(f.pnl=new Decimal(e.pnl).toFixed(2,Decimal.ROUND_DOWN)),e.roi!=null&&(f.ROI=new Decimal(e.roi).toFixed(2,Decimal.ROUND_DOWN));break}}let y=[];i.has("leverage")&&(f.leverage=t),["openPrice","closePrice","openTime","closeTime","markPrice","quantity"].forEach(P=>{if(i.has(P))switch(P){case "leverage":break;case "openPrice":{e.openPrice!=null&&y.push({title:a("share.pnl.optionalInfo.openPrice"),value:Y(e.openPrice,c||2)});break}case "closePrice":{e.closePrice!=null&&y.push({title:a("share.pnl.optionalInfo.closePrice"),value:Y(e.closePrice,c||2)});break}case "openTime":{e.openTime!=null&&y.push({title:a("share.pnl.optionalInfo.openTime"),value:Pe(e.openTime)});break}case "closeTime":{e.closeTime!=null&&y.push({title:a("share.pnl.optionalInfo.closeTime"),value:Pe(e.closeTime)});break}case "markPrice":{e.markPrice!=null&&y.push({title:a("common.markPrice"),value:Y(e.markPrice,c||2)});break}case "quantity":e.quantity!=null&&y.push({title:a("common.quantity"),value:Y(e.quantity,s||2)});}}),f.informations=y;let w={position:f,updateTime:ot(new Date),domain:r};return o.length>0&&(w.message=o),typeof l<"u"&&l.code!==void 0&&(w.referral=l),w}function tt(e){let t=e.split("_");if(t.length!==3)return {symbol:e,currency:"USDC"};let[o,r,n]=t;return {symbol:`${r}-${o}`,currency:n||"USDC"}}function ot(e){let t=e instanceof Date?e:new Date(e),o={year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",hourCycle:"h23"},n=new Intl.DateTimeFormat("en-US",o).formatToParts(t),i=n.find(u=>u.type==="year"?u.value:"")?.value,s=n.find(u=>u.type==="month"?u.value:"")?.value,c=n.find(u=>u.type==="day"?u.value:"")?.value,l=n.find(u=>u.type==="hour"?u.value:"")?.value,a=n.find(u=>u.type==="minute"?u.value:"")?.value;return `${i}-${s}-${c} ${l}:${a}`}function Pe(e){let t=e instanceof Date?e:new Date(e),o={year:"numeric",month:"short",day:"2-digit",hour:"2-digit",minute:"2-digit",hourCycle:"h23"},n=new Intl.DateTimeFormat("en-US",o).formatToParts(t),i=n.find(a=>a.type==="month"?a.value:"")?.value,s=n.find(a=>a.type==="day"?a.value:"")?.value,c=n.find(a=>a.type==="hour"?a.value:"")?.value,l=n.find(a=>a.type==="minute"?a.value:"")?.value;return `${i}-${s} ${c}:${l}`}function Y(e,t){return new Decimal(e).toFixed(t,Decimal.ROUND_DOWN)}function ee(e,t,o,r){localStorage.setItem("pnl_config_key",JSON.stringify({bgIndex:o,pnlFormat:e,options:Array.from(t),message:r}));}function te(){let e=localStorage.getItem("pnl_config_key");if(e&&e.length>0)try{return JSON.parse(e)}catch{}return {bgIndex:0,pnlFormat:"roi_pnl",options:["openPrice","closePrice","openTime","closeTime","markPrice","quantity","leverage"],message:""}}var be=e=>{let{onClickDownload:t,onClickCopy:o}=e,{t:r}=useTranslation();return jsxs(Flex,{px:8,gap:3,mt:3,itemAlign:"center",children:[jsxs(Button,{color:"secondary",className:"oui-flex-1 oui-flex oui-gap-1",onClick:t,children:[jsx("span",{children:jsx(at,{})}),r("common.download")]}),jsxs(Button,{className:"oui-flex-1 oui-flex oui-gap-1",onClick:o,children:[jsx("span",{children:jsx(it,{})}),r("common.copy")]})]})},at=()=>jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsx("path",{d:"M4.66 1.994A2.667 2.667 0 0 0 1.995 4.66v6.666a2.667 2.667 0 0 0 2.667 2.667h6.666a2.667 2.667 0 0 0 2.667-2.667V4.661a2.667 2.667 0 0 0-2.667-2.667zM7.995 4.66c.368 0 .667.298.667.666V8.66h2l-2.667 2.666L5.328 8.66h2V5.327c0-.368.299-.667.667-.667",fill:"#fff",fillOpacity:".98"})}),it=()=>jsx("svg",{width:"17",height:"16",viewBox:"0 0 17 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsx("path",{d:"M5.166 1.994A2.667 2.667 0 0 0 2.499 4.66v4a2.667 2.667 0 0 0 2.667 2.667 2.667 2.667 0 0 0 2.666 2.667h4a2.667 2.667 0 0 0 2.667-2.667v-4a2.667 2.667 0 0 0-2.667-2.667 2.667 2.667 0 0 0-2.666-2.666zm6.666 4c.737 0 1.334.596 1.334 1.333v4c0 .737-.597 1.334-1.334 1.334h-4A1.333 1.333 0 0 1 6.5 11.327h2.667a2.667 2.667 0 0 0 2.666-2.667z",fill:"#fff",fillOpacity:".98"})});var we=e=>{let{children:t,...o}=e;return jsx("button",{...o,children:jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[jsx("rect",{width:"20",height:"20",rx:"10",fill:"#333948"}),jsx("path",{d:"M11.186 5.348a.67.67 0 0 0-.436.27l-2.657 4a.69.69 0 0 0 0 .75l2.657 4a.68.68 0 0 0 .934.188.685.685 0 0 0 .187-.937L9.463 9.993 11.87 6.37a.685.685 0 0 0-.187-.938.65.65 0 0 0-.498-.083",fill:"#fff",fillOpacity:".54"})]})})},Ne=e=>{let{children:t,...o}=e;return jsx("button",{...o,children:jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[jsx("rect",{width:"20",height:"20",rx:"10",fill:"#333948"}),jsx("path",{d:"M8.777 5.348a.65.65 0 0 0-.498.083.685.685 0 0 0-.187.938L10.5 9.993 8.092 13.62a.685.685 0 0 0 .187.937.68.68 0 0 0 .934-.187l2.657-4a.69.69 0 0 0 0-.75l-2.657-4a.67.67 0 0 0-.436-.271",fill:"#fff",fillOpacity:".54"})]})})};var Te=e=>{let{backgroundImages:t,selectedSnap:o,setSelectedSnap:r}=e,[n,i]=st({containScroll:"keepSnaps",dragFree:true}),s=useCallback(()=>{i&&(i?.canScrollPrev()?i.scrollPrev():o-1>=0&&r(o-1));},[i,o]),c=useCallback(()=>{i&&(i?.canScrollNext()?i.scrollNext():o+1<t.length&&r(o+1));},[i,o]),l=useCallback(a=>{r(a.selectedScrollSnap());},[]);return useEffect(()=>{i&&(l(i),i.on("reInit",l),i.on("select",l),i?.scrollTo(o));},[i,l]),jsxs(Flex,{mt:4,px:2,children:[jsx(we,{onClick:s}),jsx("div",{ref:n,className:"oui-w-full oui-overflow oui-overflow-x-auto oui-scrollbar-hidden oui-hide-scrollbar oui-mx-0",children:jsx(Flex,{children:t.map((a,u)=>jsx(Box,{onClick:()=>{i?.canScrollPrev()||i?.canScrollNext()?i?.scrollTo(u):r(u);},mx:2,my:1,mr:6,r:"base",className:cn("oui-shrink-0 oui-w-[162px]",o===u&&"oui-outline oui-outline-1 oui-outline-primary-darken"),children:jsx("img",{src:a,className:"oui-rounded-sm"})},a))})}),jsx(Ne,{onClick:c})]})};var oe=e=>{let{size:t=16,className:o}=e;return jsx("button",{type:"button",onClick:r=>{e.onCheckedChange(!e.checked);},className:o,children:e.checked?jsx("svg",{width:t,height:t,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M4.66 1.953A2.667 2.667 0 0 0 1.995 4.62v6.667a2.667 2.667 0 0 0 2.667 2.666h6.666a2.667 2.667 0 0 0 2.667-2.666V4.62a2.667 2.667 0 0 0-2.667-2.667zm6.664 2.922a.8.8 0 0 1 .557-.208c.2 0 .406.063.558.208a.734.734 0 0 1 0 1.063l-5.434 5.179a.826.826 0 0 1-1.115 0l-2.33-2.22a.736.736 0 0 1 0-1.063.827.827 0 0 1 1.117 0l1.77 1.687z",fill:"#fff",fillOpacity:".8"})}):jsx("svg",{width:t,height:t,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsx("path",{d:"M4.66 1.953A2.667 2.667 0 0 0 1.995 4.62v6.667a2.667 2.667 0 0 0 2.667 2.666h6.666a2.667 2.667 0 0 0 2.667-2.666V4.62a2.667 2.667 0 0 0-2.667-2.667zm0 1.334h6.667c.737 0 1.334.596 1.334 1.333v6.667c0 .736-.597 1.333-1.334 1.333H4.661a1.333 1.333 0 0 1-1.334-1.333V4.62c0-.737.597-1.333 1.334-1.333",fill:"#fff",fillOpacity:".8"})})})};var De=e=>{let{message:t,setMessage:o,check:r,setCheck:n}=e,[i,s]=useState(false),c=useRef(null),{t:l}=useTranslation();return jsxs("div",{className:"oui-mt-3 oui-mb-6 oui-flex oui-items-center",children:[jsx(oe,{className:"oui-mt-[2px]",checked:r,onCheckedChange:a=>{n(a);}}),jsx("div",{className:"oui-text-xs oui-text-base-contrast-54 oui-ml-1 hover:oui-cursor-pointer",onClick:()=>{n(!e.check);},children:l("share.pnl.optionalInfo.message")}),jsx("div",{className:"oui-bg-base-900 oui-mx-2 oui-rounded-sm",children:jsx(Input,{ref:c,placeholder:l("share.pnl.optionalInfo.message.placeholder"),classNames:{root:"oui-w-[320px]"},size:"sm",value:t,autoFocus:false,suffix:i&&jsx("button",{className:"oui-mr-3 oui-cursor-pointer",onMouseDown:a=>{o(""),setTimeout(()=>{c.current?.focus();},50),a.stopPropagation();},children:jsx(CloseCircleFillIcon,{size:18,color:"white"})}),onFocus:()=>s(true),onBlur:()=>s(false),onChange:a=>{if(a.target.value.length>25){toast.error(l("share.pnl.optionalInfo.message.maxLength"));return}n(a.target.value.length>0),o(a.target.value);}})})]})};var Fe=e=>{let{type:t,curType:o,setShareOption:r}=e,{t:n}=useTranslation(),i=useMemo(()=>{switch(t){case "openPrice":return n("share.pnl.optionalInfo.openPrice");case "closePrice":return n("share.pnl.optionalInfo.closePrice");case "openTime":return n("share.pnl.optionalInfo.openTime");case "closeTime":return n("share.pnl.optionalInfo.closeTime");case "markPrice":return n("common.markPrice");case "quantity":return n("common.quantity");case "leverage":return n("common.leverage")}},[t,n]),s=o.has(t);return jsxs(Flex,{itemAlign:"center",gap:1,className:cn("hover:oui-cursor-pointer"),onClick:()=>{r(c=>{let l=new Set(c);return s?l.delete(t):l.add(t),l});},children:[jsx(oe,{size:16,checked:s,className:"oui-pt-[2px]",onCheckedChange:c=>{r(l=>{let a=new Set(l);return s?a.delete(t):a.add(t),a});}}),jsx(Text,{size:"xs",intensity:54,children:i})]})};var Le=e=>{let{type:t,curType:o,setPnlFormat:r}=e,{t:n}=useTranslation(),i=useMemo(()=>{switch(t){case "roi_pnl":return n("share.pnl.displayFormat.roi&Pnl");case "roi":return n("share.pnl.displayFormat.roi");case "pnl":return n("share.pnl.displayFormat.pnl")}},[t,n]),s=t===o,c="oui-flex oui-items-center oui-gap-1 oui-cursor-pointer";return s?c+=" oui-text-base-contrast":c+="",jsxs("div",{className:c,onClick:()=>{r(t);},children:[jsx(Dt,{sel:s}),jsx(Text,{size:"xs",intensity:54,className:cn("oui-ml-2 "),children:i})]})},Dt=e=>jsx("button",{type:"button",children:e.sel===true?jsx(Ot,{}):jsx(Ft,{})}),Ot=()=>jsxs("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",className:"oui-fill-primary-darken",children:[jsx("path",{d:"M8.01 1.333a6.667 6.667 0 1 0 0 13.333 6.667 6.667 0 0 0 0-13.333m0 1.333a5.334 5.334 0 1 1-.001 10.667 5.334 5.334 0 0 1 0-10.667",fill:"#fff",fillOpacity:".36"}),jsx("circle",{cx:"8",cy:"8",r:"3.333"})]}),Ft=()=>jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsx("path",{d:"M8.01 1.333a6.667 6.667 0 1 0 0 13.333 6.667 6.667 0 0 0 0-13.333m0 1.333a5.334 5.334 0 1 1-.001 10.667 5.334 5.334 0 0 1 0-10.667",fill:"#fff",fillOpacity:".54"})});var Ee=e=>{let{shareOptions:t}=e,{t:o}=useTranslation(),r=te(),i=e.entity.roi!=null&&e.entity.pnl!=null?["roi_pnl","roi","pnl"]:e.entity.roi!=null?["roi"]:e.entity.pnl!=null?["pnl"]:[],[s,c]=useState(i.length==1?i[0]:r.pnlFormat),[l,a]=useState(new Set(r.options)),[u,x]=useState(r.bgIndex),[f,y]=useState(r.message),[E,w]=useState(false),{backgroundImages:P,...W}=t??{backgroundImages:[]},[S,F]=useState(""),v=useRef(null);useEffect(()=>{let k=window.location.hostname;F(k);},[]);let $=useMemo(()=>t?.backgroundImages?.[u],[t?.backgroundImages,u]),h=j(e.entity,e.leverage,E?f:"",S,s,l,e.baseDp,e.quoteDp,e.referral),re=()=>{v.current?.copy().then(()=>{e.hide?.(),toast.success(o("share.pnl.image.copied"));}).catch(k=>{toast.error(()=>jsxs("div",{children:[jsx("div",{children:o("common.copy.failed")}),jsx("div",{className:"oui-mt-2 oui-max-w-[396px] oui-text-2xs oui-text-base-contrast-54",children:o("share.pnl.copy.failed.description")})]}));});},Q=()=>{v.current?.download("Poster.png"),e.hide?.();},ae=[...e.entity.openPrice?["openPrice"]:[],...e.entity.closePrice?["closePrice"]:[],...e.entity.markPrice?["markPrice"]:[],...e.entity.openTime?["openTime"]:[],...e.entity.closeTime?["closeTime"]:[],...e.leverage?["leverage"]:[],...e.entity.quantity?["quantity"]:[]];return ee(s,l,u,f),jsxs("div",{className:"oui-relative oui-flex oui-size-full oui-flex-col",children:[jsxs("div",{className:"oui-h-full oui-flex-1 oui-overflow-y-auto",children:[jsxs(Box,{mt:9,height:422,children:[jsx(Flex,{itemAlign:"center",justify:"center",children:jsx(V,{width:552,height:310,data:{backgroundImg:$,...W,data:h},ratio:3,ref:v})}),jsx(Te,{backgroundImages:t?.backgroundImages??[],selectedSnap:u,setSelectedSnap:x})]}),jsxs(Flex,{direction:"column",px:10,mt:6,justify:"start",itemAlign:"start",width:"100%",children:[jsx(Text,{size:"sm",intensity:80,children:o("share.pnl.displayFormat")}),jsx(Flex,{pt:3,gap:3,itemAlign:"center",children:i.map((k,A)=>jsx(Le,{setPnlFormat:c,type:k,curType:s},A))}),jsx(Divider,{className:"oui-w-full oui-border-white/10 oui-pt-6"}),jsxs(Flex,{mt:6,direction:"column",justify:"start",itemAlign:"start",children:[jsx(Text,{size:"sm",intensity:80,children:o("share.pnl.optionalInfo")}),jsx(Flex,{mt:3,gap:4,className:"oui-flex-wrap",children:ae.map((k,A)=>jsx(Fe,{setShareOption:a,type:k,curType:l},A))})]}),jsx(De,{message:f,setMessage:y,check:E,setCheck:w})]})]}),jsx(be,{onClickCopy:re,onClickDownload:Q})]})};var ze=d.createContext(null);function R(){let e=d.useContext(ze);if(!e)throw new Error("useCarousel must be used within a <Carousel />");return e}var ce=d.forwardRef(({orientation:e="horizontal",opts:t,setApi:o,plugins:r,className:n,children:i,...s},c)=>{let[l,a]=st({...t,axis:e==="horizontal"?"x":"y"},r),[u,x]=d.useState(false),[f,y]=d.useState(false),[E,w]=d.useState(s.initIndex||0),[P,W]=d.useState([]),S=d.useCallback(h=>{h&&(P.length===0&&W(h.scrollSnapList()),w(h.selectedScrollSnap()),x(h.canScrollPrev()),y(h.canScrollNext()));},[P]),F=d.useCallback(()=>{a?.scrollPrev();},[a]),v=d.useCallback(()=>{a?.scrollNext();},[a]),$=d.useCallback(h=>{h.key==="ArrowLeft"?(h.preventDefault(),F()):h.key==="ArrowRight"&&(h.preventDefault(),v());},[F,v]);return d.useEffect(()=>{!a||!o||o(a);},[a,o]),d.useEffect(()=>{if(a)return S(a),a.on("reInit",S),a.on("select",S),s.initIndex&&a.scrollTo(s.initIndex),()=>{a?.off("select",S);}},[a,S]),jsx(ze.Provider,{value:{carouselRef:l,api:a,opts:t,orientation:e||(t?.axis==="y"?"vertical":"horizontal"),scrollPrev:F,scrollNext:v,canScrollPrev:u,canScrollNext:f,selectedIndex:E,scrollSnaps:P},children:jsx("div",{ref:c,onKeyDownCapture:$,className:cn("oui-relative",n),role:"region","aria-roledescription":"carousel",...s,children:i})})});ce.displayName="Carousel";var Z=d.forwardRef(({className:e,...t},o)=>{let{carouselRef:r,orientation:n}=R();return jsx("div",{ref:r,className:"oui-overflow-hidden",children:jsx("div",{ref:o,className:cn("oui-flex",n==="horizontal"?"oui--ml-4":"oui--mt-4 oui-flex-col",e),...t})})});Z.displayName="CarouselContent";var G=d.forwardRef(({className:e,...t},o)=>{let{orientation:r}=R();return jsx("div",{ref:o,role:"group","aria-roledescription":"slide",className:cn("oui-min-w-0 oui-shrink-0 oui-grow-0 oui-basis-full",r==="horizontal"?"oui-pl-4":"oui-pt-4",e),...t})});G.displayName="CarouselItem";var ue=d.forwardRef(({className:e,variant:t="contained",size:o="icon",...r},n)=>{let{orientation:i,scrollPrev:s,canScrollPrev:c}=R();return jsxs(Button,{ref:n,variant:t,className:cn("oui-absolute oui-h-8 oui-w-8 oui-rounded-full",i==="horizontal"?"oui--left-12 oui-top-1/2 oui--translate-y-1/2":"oui--top-12 oui-left-1/2 oui--translate-x-1/2 oui-rotate-90",e),disabled:!c,onClick:s,...r,children:[jsx(ChevronLeft,{size:20}),jsx("span",{className:"oui-sr-only",children:"Previous slide"})]})});ue.displayName="CarouselPrevious";var me=d.forwardRef(({className:e,variant:t="contained",size:o="icon",...r},n)=>{let{orientation:i,scrollNext:s,canScrollNext:c}=R();return jsxs(Button,{ref:n,variant:t,className:cn("oui-absolute oui-h-8 oui-w-8 oui-rounded-full",i==="horizontal"?"oui--right-12 oui-top-1/2 oui--translate-y-1/2":"oui--bottom-12 oui-left-1/2 oui--translate-x-1/2 oui-rotate-90",e),disabled:!c,onClick:s,...r,children:[jsx(ChevronRight,{size:20}),jsx("span",{className:"oui-sr-only",children:"Next slide"})]})});me.displayName="CarouselNext";var pe=e=>{let{scrollSnaps:t,selectedIndex:o}=R();return jsx("div",{className:cn("oui-flex oui-gap-1",e.className),children:t.map((r,n)=>jsx(fe,{index:n,active:n===o,onClick:e.onClick,className:e.dotClassName,activeClassName:e.dotActiveClassName},n))})};pe.displayName="CarouselIdentifier";var fe=({index:e,active:t,onClick:o,className:r,activeClassName:n})=>jsx("button",{onClick:()=>o?.(e),className:cn("oui-w-2 oui-h-2 oui-rounded-full oui-bg-white/30",r,t&&`active ${n||"oui-bg-primary-darken"}`)});var B=ce;B.Content=Z;B.Item=G;B.Next=me;B.Previous=ue;B.indentify=pe;var _e=e=>{let{shareOptions:t}=e,{t:o}=useTranslation(),r=te(),i=e.entity.roi!=null&&e.entity.pnl!=null?["roi_pnl","roi","pnl"]:e.entity.roi!=null?["roi"]:e.entity.pnl!=null?["pnl"]:[],[s,c]=useState(i.length==1?i[0]:r.pnlFormat),[l,a]=useState(new Set(r.options)),[u,x]=useState(r.message),[f,y]=useState(r.bgIndex),{backgroundImages:E,...w}=t??{backgroundImages:[]},[P,W]=useState(""),S=t?.backgroundImages?.map(()=>useRef(null));useEffect(()=>{let p=window.location.hostname;W(p);},[]);let F=j(e.entity,e.leverage,u,P,s,l,e.baseDp,e.quoteDp,e.referral),v=useRef(),$=552/310,[h,re]=useState(1),[Q,ae]=useState(0),[k,A]=useState(false),xe=useRef(null);useEffect(()=>{if(v.current){let p=v.current.offsetWidth,I=p/$;ae(I),re(p/552);}},[v,P]);let Ke=async p=>{if(!p.current)return;let I=p.current?.toDataURL(),Je=Vt(I);try{navigator.share&&await navigator.share({text:u,files:[new File([Je],"image.png",{type:"image/png"})]}),e.hide?.();}catch{}};return ee(s,l,f,u),jsxs("div",{className:"oui-w-full",children:[jsx("div",{ref:v,className:"oui-mt-4 oui-w-full oui-overflow-hidden",style:{height:`${Q+20}px`},children:jsxs(B,{className:"oui-w-full oui-overflow-hidden",opts:{align:"start"},initIndex:f,children:[jsx(Z,{style:{height:`${Q}px`},children:t?.backgroundImages?.map((p,I)=>jsx(G,{children:jsx(V,{className:"oui-origin-top-left oui-transform",style:{scale:`${h}`},width:552,height:310,data:{backgroundImg:p,...w,data:F},ratio:3,ref:S?.[I]})},I))}),jsx("div",{className:"oui-mb-1 oui-mt-2 oui-flex oui-justify-center",children:jsx(Kt,{dotClassName:"oui-w-[16px] oui-h-[4px] oui-bg-base-300",dotActiveClassName:"!oui-bg-primary-darken oui-w-[20px]",setSelectIndex:y})})]})}),jsxs(ScrollArea,{className:"oui-custom-scrollbar oui-max-h-[200px] oui-overflow-y-auto",children:[jsxs("div",{className:"oui-mt-4",children:[jsx("div",{className:"oui-text-3xs oui-text-base-contrast-54",children:o("share.pnl.displayFormat")}),jsx("div",{className:"oui-row-span-1 oui-grid oui-grid-cols-3 oui-justify-between oui-gap-3 oui-px-1 oui-pt-3",children:i.map((p,I)=>jsx($t,{setPnlFormat:c,type:p,curType:s},I))})]}),jsxs("div",{className:"oui-mt-3",children:[jsx("div",{className:"oui-h-[18px] oui-text-3xs oui-text-base-contrast-54",children:o("share.pnl.optionalInfo")}),jsxs("div",{className:"oui-mt-3 oui-flex oui-flex-wrap oui-gap-3",children:[e.entity.openPrice&&jsx(M,{setShareOption:a,type:"openPrice",curType:l}),e.entity.closePrice&&jsx(M,{setShareOption:a,type:"closePrice",curType:l}),e.entity.openTime&&jsx(M,{setShareOption:a,type:"openTime",curType:l}),e.entity.closeTime&&jsx(M,{setShareOption:a,type:"closeTime",curType:l}),e.leverage&&jsx(M,{setShareOption:a,type:"leverage",curType:l}),e.entity.markPrice&&jsx(M,{setShareOption:a,type:"markPrice",curType:l}),e.entity.quantity&&jsx(M,{setShareOption:a,type:"quantity",curType:l})]})]}),jsxs("div",{className:"oui-mb-8 oui-mt-3",children:[jsx("div",{className:"oui-h-[18px] oui-text-3xs oui-text-base-contrast-54",children:o("share.pnl.optionalInfo.message")}),jsx("div",{className:"oui-bg-base-600 oui-mx-1 oui-mt-3 oui-h-[48px]",children:jsx(Input,{placeholder:o("share.pnl.optionalInfo.message.placeholder"),containerClassName:"oui-bg-transparent oui-h-[48px]",value:u,autoFocus:false,onChange:p=>{if(p.target.value.length>25){toast.error(o("share.pnl.optionalInfo.message.maxLength"));return}x(p.target.value);},ref:xe,onFocus:()=>A(true),onBlur:()=>A(false),suffix:k&&jsx("button",{className:"oui-mr-3 oui-cursor-pointer",onMouseDown:p=>{x(""),setTimeout(()=>{xe.current?.focus();},50),p.stopPropagation();},children:jsx(CloseCircleFillIcon,{size:18,color:"white"})})})})]})]}),jsx("div",{className:"oui-pt-2",children:jsx(Button,{fullWidth:true,className:"oui-h-[40px] oui-text-[16px]",onClick:()=>{let p=S?.[f];p&&Ke(p);},children:o("common.share")})})]})},$t=e=>{let{type:t,curType:o,setPnlFormat:r}=e,{t:n}=useTranslation(),i=useMemo(()=>{switch(t){case "roi_pnl":return n("share.pnl.displayFormat.roi&Pnl");case "roi":return n("share.pnl.displayFormat.roi");case "pnl":return n("share.pnl.displayFormat.pnl")}},[t]);return jsx("div",{className:cn("oui-referral-shadow oui-flex oui-h-[46px] oui-flex-1 oui-items-center oui-rounded-lg oui-bg-base-4 oui-px-3 oui-shadow-lg hover:oui-cursor-pointer",t===o&&"oui-dot-sel oui-bg-primary-darken"),onClick:()=>{r(t);},children:jsx("div",{className:"oui-text-sm oui-text-base-contrast",children:i})})},M=e=>{let{type:t,curType:o,setShareOption:r}=e,{t:n}=useTranslation(),i=useMemo(()=>{switch(t){case "openPrice":return n("share.pnl.optionalInfo.openPrice");case "closePrice":return n("share.pnl.optionalInfo.closePrice");case "openTime":return n("share.pnl.optionalInfo.openTime");case "closeTime":return n("share.pnl.optionalInfo.closeTime");case "markPrice":return n("common.markPrice");case "quantity":return n("common.quantity");case "leverage":return n("common.leverage")}},[t,n]),s=o.has(t);return jsxs("div",{className:cn("oui-referral-shadow oui-mt-0 oui-flex oui-h-[46px] oui-w-[calc(50%-6px)] oui-items-center oui-rounded-lg oui-bg-base-4 oui-p-3 oui-shadow-lg hover:oui-cursor-pointer"),onClick:()=>{r(c=>{let l=new Set(c);return s?l.delete(t):l.add(t),l});},children:[jsx("div",{className:"oui-flex-1 oui-text-sm oui-text-base-contrast",children:i}),s&&jsx(Jt,{})]})};function Vt(e){let t=atob(e.split(",")[1]),o=e.split(",")[0].split(":")[1].split(";")[0],r=new ArrayBuffer(t.length),n=new Uint8Array(r);for(let i=0;i<t.length;i++)n[i]=t.charCodeAt(i);return new Blob([r],{type:o})}var Kt=e=>{let{scrollSnaps:t,selectedIndex:o}=R();return useEffect(()=>{e.setSelectIndex(o);},[o]),jsx("div",{className:cn("oui-flex oui-gap-1"),children:t.map((r,n)=>jsx(fe,{index:n,active:n===o,onClick:e.onClick,className:e.dotClassName,activeClassName:e.dotActiveClassName},n))})},Jt=()=>jsx("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M2.01416 11.9989C2.01416 6.47589 6.49136 1.9989 12.0142 1.9989C17.5372 1.9989 22.0142 6.47589 22.0142 11.9989C22.0142 17.5219 17.5372 21.9989 12.0142 21.9989C6.49136 21.9989 2.01416 17.5219 2.01416 11.9989ZM16.9853 7.31211C17.2125 7.09537 17.5236 7 17.8218 7C18.1201 7 18.4312 7.09537 18.6583 7.31211C19.1139 7.74546 19.1139 8.47384 18.6583 8.9072L10.5077 16.675C10.0534 17.1083 9.28909 17.1083 8.83472 16.675L5.34077 13.3459C4.88641 12.9126 4.88641 12.1841 5.34077 11.7508C5.79631 11.3175 6.56057 11.3175 7.01493 11.7508L9.67122 14.2822L16.9853 7.31211Z",fill:"white",fillOpacity:"1"})});var Ue=e=>{let{leverage:t,entity:o,baseDp:r,quoteDp:n,referralInfo:i,shareOptions:s,hide:c}=e,[l,a]=useState(window.innerHeight<900?660:807);return useEffect(()=>{let u=()=>{a(window.innerHeight<900?660:807);};return window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u);}},[]),s==null||o==null?jsx(Fragment,{}):jsx(Ee,{entity:o,leverage:t,hide:c,baseDp:r,quoteDp:n,referral:i,shareOptions:s})},We=e=>{let{leverage:t,entity:o,baseDp:r,quoteDp:n,referralInfo:i,shareOptions:s,hide:c}=e;return s==null||o==null?jsx(Fragment,{}):jsx(_e,{entity:o,leverage:t,hide:c,baseDp:r,quoteDp:n,referral:i,shareOptions:s})};var ve=e=>{let t=X({hide:e.hide,pnl:e.pnl});return jsx(We,{...t})},Ce=e=>{let t=X({hide:e.hide,pnl:e.pnl});return jsx(Ue,{...t})};var jt="sharePnLDialog",eo="sharePnLBottomSheet";registerSimpleDialog(jt,Ce,{classNames:{content:"!oui-max-w-[624px] oui-p-0"}});registerSimpleSheet(eo,ve,{title:i18n.t("share.pnl.sharePnl"),classNames:{body:"oui-pb-4 oui-pt-0"}});
export { eo as SharePnLBottomSheetId, ve as SharePnLBottomSheetWidget, jt as SharePnLDialogId, Ce as SharePnLDialogWidget, X as useSharePnLScript };
//# sourceMappingURL=out.js.map
//# sourceMappingURL=index.mjs.map