UNPKG

@orderly.network/react-app

Version:

Create React App with Orderly Network components

20 lines (17 loc) 15.4 kB
'use strict'; var hooks = require('@orderly.network/hooks'); var ui = require('@orderly.network/ui'); var react = require('react'); var types = require('@orderly.network/types'); var i18n = require('@orderly.network/i18n'); var utils = require('@orderly.network/utils'); var jsxRuntime = require('react/jsx-runtime'); var locale = require('date-fns/locale'); var q=()=>{react.useEffect(()=>{let e=new URLSearchParams(window.location.search).get("ref");e&&localStorage.setItem("referral_code",e);},[]);};function ye(r){return r==="BUY"?i18n.i18n.t("common.buy"):r==="SELL"?i18n.i18n.t("common.sell"):utils.capitalizeString(r)}function F(r,e){let {symbol:i,side:o,quantity:a,client_order_id:c,fieldChanges:d}=r,t="total_executed_quantity"in r?r.total_executed_quantity:0,l="status"in r?r.status:r.algo_status,s=e[i],n=s("base_dp");s("quote_dp");let u=ye(o),f=utils.transSymbolformString(i),p="algo_type"in r&&r.algo_type===types.AlgoOrderRootType.POSITIONAL_TP_SL?i18n.i18n.t("tpsl.entirePosition"):n===void 0?a:ui.parseNumber(a,{dp:n}),m="",g="";switch(l){case types.OrderStatus.NEW:c?.startsWith("scaled_")?(m=i18n.i18n.t("orders.status.scaledSubOrderOpened.toast.title"),g=`${u} ${f} ${p}`):(m=i18n.i18n.t("orders.status.opened.toast.title"),g=`${u} ${f} ${p}`);break;case types.OrderStatus.FILLED:case types.OrderStatus.PARTIAL_FILLED:let w=n===void 0?t:ui.parseNumber(t,{dp:n});m=i18n.i18n.t("orders.status.filled.toast.title"),g=`${u} ${f} ${w} / ${p}`;break;case types.OrderStatus.CANCELLED:m=i18n.i18n.t("orders.status.canceled.toast.title"),g=`${u} ${f} ${p}`;break;case types.OrderStatus.REJECTED:m=i18n.i18n.t("orders.status.rejected.toast.title"),g=`${u} ${f} ${p}`;break;case types.OrderStatus.REPLACED:let{algo_type:I,activated_price:E}=r;if(I===types.AlgoOrderRootType.TRAILING_STOP){let b=d?.[types.AlgoOrderRootType.TRAILING_STOP]||{};b.is_activated&&b.extreme_price&&E?(m=i18n.i18n.t("orders.trailingStop.activated"),g=`${f} @${E}`):b.extreme_price&&(m="",g="");}else m=i18n.i18n.t("orders.status.replaced.toast.title"),g=`${o} ${f} ${t} / ${p}`;break;}return {title:m,msg:g,status:l}}var be="orderly_order_sound_alert",V=()=>{let r=hooks.useEventEmitter(),e=hooks.useSymbolsInfo(),i=react.useRef({}),{notification:o}=hooks.useOrderlyContext();react.useEffect(()=>{i.current=e;},[e]);let a=o?.orderFilled?.media??"",[c]=hooks.useLocalStorage(be,o?.orderFilled?.defaultOpen??false),[d]=hooks.useAudioPlayer(a,{autoPlay:c,volume:1}),t=hooks.useDebouncedCallback(l=>{(n=>{let{title:h,msg:u,status:f}=F(n,i.current),p=f===types.OrderStatus.FILLED||f===types.OrderStatus.PARTIAL_FILLED,m=n.algo_type||n.type;h&&u&&ui.toast.success(jsxRuntime.jsxs("div",{children:[h,jsxRuntime.jsx("br",{}),jsxRuntime.jsx("div",{className:"orderly-text-white/[0.54] orderly-text-xs",children:u}),p&&d]}),{id:m});})(l);},100);react.useEffect(()=>(r.on("orders:changed",t),()=>{r.off("orders:changed",t),t.cancel();}),[r,t]);};function Q(){let{t:r}=i18n.useTranslation(),e=i18n.useLocaleCode();return react.useMemo(()=>{let i={[i18n.LocaleEnum.en]:locale.enUS,[i18n.LocaleEnum.zh]:locale.zhCN};return {locale:e,dialog:{ok:r("common.ok"),cancel:r("common.cancel")},modal:{confirm:r("common.confirm"),cancel:r("common.cancel")},pagination:{morePages:r("ui.pagination.morePages"),rowsPerPage:r("ui.pagination.rowsPerPage")},picker:{selectDate:r("ui.picker.selectDate"),dayPicker:i[e]},empty:{description:r("ui.empty.description")}}},[r,e])}var _=react.createContext({}),De=()=>react.useContext(_);var z=r=>jsxRuntime.jsx(_.Provider,{value:r,children:r.children});var B=()=>{let r=hooks.useWS(),{t:e}=i18n.useTranslation();react.useEffect(()=>{let i=r.privateSubscribe({id:"assetconvert",event:"subscribe",topic:"assetconvert",ts:utils.getTimestamp()},{onMessage(o){o.convertId&&ui.toast.success(e("transfer.convert.completed"));}});return ()=>i()},[]);};function J(r){let{storageChain:e,setStorageChain:i}=hooks.useStorageChain(),[o,a]=react.useState(),[c]=hooks.useChains(),d=hooks.useConfig("networkId"),{connectedChain:t}=hooks.useWalletConnector();return react.useEffect(()=>{if(t)a?.(typeof t.id=="number"?t.id:parseInt(t.id));else {if(o)return;let l,s=d==="mainnet"?c.mainnet?.[0]:c.testnet?.[0];typeof r=="function"?l=r(d,c):typeof r=="object"&&(l=d==="mainnet"?r?.mainnet:r?.testnet);let n=l?.id||s?.network_infos?.chain_id;if(!n)return;e?a?.(e.chainId):(i(n),a?.(n));}},[t,c,o,d,a,r]),[o,a]}var Y="orderly:wallet-info";function G(){let{connectedChain:r,disconnect:e}=hooks.useWalletConnector(),[i,o]=hooks.useLocalStorage("orderly_link_device",{}),{account:a}=hooks.useAccount(),{isMobile:c}=ui.useScreen(),d=hooks.useConfig(),t=async n=>{localStorage.removeItem(Y),await a.disconnect(),await e({label:n});};react.useEffect(()=>{let n=k(),h=JSON.parse(localStorage.getItem(Y)??"{}");n&&h&&t(h.label);},[]);let l=async()=>{let n=k();if(!n)return;let{address:h,secretKey:u,chainId:f,chainNamespace:p}=n;if(!await a.importOrderlyKey({address:h,secretKey:u,chainNamespace:p}))return;o({chainId:f,chainNamespace:p});let g=new URL(window.location.href);g.searchParams.delete("link"),g.searchParams.set("utm_medium","qrcode");let x=decodeURIComponent(g.toString());history.replaceState(null,"",x);};react.useEffect(()=>{c&&!r&&l();},[a,r,c]);let s=async()=>{let{chainId:n,chainNamespace:h}=Ze()||{};if(c&&!r&&n&&h){let u=a.keyStore.getAddress(),f=a.keyStore.getOrderlyKey(),p=a.keyStore.getAccountId(u);await a.checkOrderlyKey(u,f,p)&&d.set("chainNamespace",h);}};return react.useEffect(()=>{s();},[a,c,r]),{linkDevice:l}}function Ze(){try{let r=localStorage.getItem("orderly_link_device");return r?hooks.parseJSON(r):null}catch{}}function k(){let e=new URL(window.location.href).searchParams.get("link");if(!e)return;let{a:i,k:o,i:a,n:c}=er(e)||{};if(i&&o&&a&&c)return {address:i,secretKey:o,chainId:a,chainNamespace:c}}function er(r){try{let e=JSON.parse(window.atob(r)),i=Math.floor(Date.now()/1e3),o=e.t;return !o||i>o?void 0:e}catch{}}function X(){let{t:r}=i18n.useTranslation();hooks.useSettleSubscription({onMessage:e=>{let{status:i}=e;switch(i){case "COMPLETED":ui.toast.success(r("settle.settlement.completed"));break;case "FAILED":ui.toast.error(r("settle.settlement.failed"));break;}}});}function ee(){let{t:r}=i18n.useTranslation(),e=hooks.useEventEmitter(),{setLedgerAddress:i}=hooks.useStorageLedgerAddress();return react.useEffect(()=>{e.on("wallet:connect-error",o=>{ui.toast.error(o.message);}),e.on("wallet:sign-message-with-ledger-error",o=>{window.setTimeout(()=>{ui.modal.confirm({title:r("connector.ledger.signMessageFailed"),content:r("connector.ledger.signMessageFailed.description"),size:"sm",onOk:async()=>(i(o.userAddress),Promise.resolve()),okLabel:r("common.ok"),onCancel:async()=>(ui.toast.error(o.message),Promise.resolve()),cancelLabel:r("common.no")}).then(a=>{});});});},[e,r]),{}}function oe(){let{t:r}=i18n.useTranslation(),e=hooks.useEventEmitter(),i=react.useRef({}),[o,a]=hooks.useSessionStorage("orderly_wallet_change_id",{});i.current=o,hooks.useWalletSubscription({onMessage:c=>{let{id:d,side:t,transStatus:l}=c,s=true;if(["DEPOSIT","WITHDRAW"].includes(t)&&["COMPLETED","FAILED"].includes(l)){let n=!!i.current[d];n||(i.current[d]=true,a(h=>({...h,[d]:true}))),s=!n;}if(l==="COMPLETED"&&s){let n=`${utils.capitalizeString(t)} completed`;t==="DEPOSIT"?n=r("transfer.deposit.completed"):t==="WITHDRAW"&&(n=r("transfer.withdraw.completed")),ui.toast.success(n);}else if(l==="FAILED"&&s){let n=`${utils.capitalizeString(t)} failed`;t==="DEPOSIT"?n=r("transfer.deposit.failed"):t==="WITHDRAW"&&(n=r("transfer.withdraw.failed")),ui.toast.error(n);}e.emit("wallet:changed",c);}});}var ce="orderly:wallet-info";var de=r=>{let{wallet:e,connect:i,connectedChain:o,disconnect:a,namespace:c}=hooks.useWalletConnector();if(typeof i!="function")throw new types.SDKError("Please provide a wallet connector provider");hooks.useEventEmitter();let t=react.useRef(false);hooks.useConfig("brokerId");let {account:s,state:n}=hooks.useAccount(),h=hooks.useKeyStore(),u=hooks.useConfig("networkId"),[f,{checkChainSupport:p}]=hooks.useChains(),[m,g]=react.useState(false),{track:x,setTrackUserId:w}=hooks.useTrack(),I=react.useMemo(()=>e?.accounts?.[0]?.address,[e]),E=react.useMemo(()=>{let y=e?.chains?.[0]?.id,C=e?.chains?.[0]?.namespace;if(!(typeof y>"u"))return {id:utils.parseChainIdToNumber(y),namespace:C}},[e]);return react.useEffect(()=>{n.status>=types.AccountStatusEnum.EnableTrading&&s.accountId&&w(s.accountId);},[s,n]),react.useEffect(()=>{if(!o){g(false);return}let y=p(o.id,u);types.ABSTRACT_CHAIN_ID_MAP.has(parseInt(o.id))&&e?.label!=="AGW"&&(y=false),g(!y);},[o,f,p,u,e]),react.useEffect(()=>{utils.windowGuard(()=>{let y=h.getAddress(),C=JSON.parse(localStorage.getItem(ce)??"{}");o?.namespace!==types.ChainNamespace.solana&&y&&s.address!==y&&C.label&&i({autoSelect:{label:C.label,disableModals:true}}).then(T=>{},T=>{});});},[e,s.address]),react.useEffect(()=>{if(e===null&&n.status>types.AccountStatusEnum.NotConnected&&!n.validating){s.disconnect();return}if(m||!o||t.current)return;let y=k();I&&I!==s.address&&!y&&(s.setAddress(I,{provider:e?.provider,chain:{id:utils.praseChainIdToNumber(E.id),namespace:E.namespace.toUpperCase()},wallet:{name:e?.label??""},additionalInfo:e?.additionalInfo??{}}),x(types.TrackerEventName.walletConnect,{wallet:e?.label??"",network:E.namespace.toUpperCase()}),utils.windowGuard(()=>{localStorage.setItem(ce,JSON.stringify({label:e?.label??""}));})),E?.id!==s.chainId&&s.switchChainId(E?.id);},[e,o,I,E,s.address,n,s.chainId,m]),{connectWallet:async()=>(t.current=true,i({chainId:r.currentChainId}).then(async y=>{if(Array.isArray(y)&&y.length>0&&y[0]&&y[0].accounts.length>0){let C=y[0],T=utils.praseChainIdToNumber(C.chains[0].id);if(!p(T,u))return {wrongNetwork:true};if(!s)throw new Error("account is not initialized");n.status===types.AccountStatusEnum.EnableTradingWithoutConnected&&(localStorage.removeItem("orderly_link_device"),await s.disconnect());let pe=await s.setAddress(C.accounts[0].address,{provider:C.provider,chain:{id:utils.praseChainIdToNumber(C.chains[0].id),namespace:C.chains[0].namespace.toUpperCase()},wallet:{name:C.label}});return x(types.TrackerEventName.walletConnect,{wallet:C.label,network:C.chains[0].namespace.toUpperCase()}),{wallet:C,status:pe,wrongNetwork:false}}return null}).finally(()=>{t.current=false;})),wrongNetwork:m}};var N=react.createContext({setCurrentChainId:r=>{},restrictedInfo:{},setShowAnnouncement:r=>{}}),W=()=>react.useContext(N);var le=r=>{let[e,i]=react.useState(false),[o,a]=J(r.defaultChain);G(),hooks.useTrackingInstance();let{connectWallet:c,wrongNetwork:d}=de({currentChainId:o});oe(),X(),B(),ee();let t=hooks.useRestrictedInfo(r.restrictedInfo),l=t.restrictedOpen,s=react.useMemo(()=>({connectWallet:c,wrongNetwork:d,currentChainId:o,setCurrentChainId:a,onChainChanged:r.onChainChanged,disabledConnect:l,restrictedInfo:t,showAnnouncement:e,setShowAnnouncement:i,onRouteChange:r.onRouteChange,widgetConfigs:r.widgetConfigs}),[c,o,l,r.onChainChanged,t,a,e,d,r.onRouteChange,r.widgetConfigs]);return jsxRuntime.jsx(N.Provider,{value:s,children:r.children})};var Fr=()=>(V(),null),ue=r=>{let{components:e,appIcons:i,onChainChanged:o,defaultChain:a,widgetConfigs:c,...d}=r;hooks.useTrack(),q();let t=Q();return jsxRuntime.jsx(z,{appIcons:i,brokerName:r.brokerName,children:jsxRuntime.jsx(ui.OrderlyThemeProvider,{components:e,overrides:r.overrides,children:jsxRuntime.jsxs(hooks.OrderlyConfigProvider,{...d,children:[jsxRuntime.jsx(Fr,{}),jsxRuntime.jsx(le,{onChainChanged:o,defaultChain:a,restrictedInfo:r.restrictedInfo,onRouteChange:r.onRouteChange,widgetConfigs:c,children:jsxRuntime.jsx(ui.LocaleProvider,{locale:t,children:jsxRuntime.jsx(ui.TooltipProvider,{delayDuration:300,children:jsxRuntime.jsx(ui.ModalProvider,{children:r.children})})})}),jsxRuntime.jsx(ui.Toaster,{})]})})})};process.env.NODE_ENV!=="production"&&(ue.displayName="OrderlyAppProvider");var Kr=(r,e)=>{let{wrongNetwork:i,disabledConnect:o}=W(),{state:a}=hooks.useAccount();return e?.skip?r:i||o||typeof e?.accountStatus<"u"&&a.status<e.accountStatus?typeof e?.fallbackData<"u"?e.fallbackData:null:r};function Qr(r){let{t:e}=i18n.useTranslation(),i=(a,c,d)=>{let{value:t,min:l,max:s}=d||{};return {quantity:{required:e("orderEntry.orderQuantity.error.required"),min:e("orderEntry.orderQuantity.error.min",{value:t}),max:e("orderEntry.orderQuantity.error.max",{value:t})},order_quantity:{required:e("orderEntry.orderQuantity.error.required"),min:e("orderEntry.orderQuantity.error.min",{value:t}),max:e("orderEntry.orderQuantity.error.max",{value:t})},order_price:{required:e("orderEntry.orderPrice.error.required"),min:e("orderEntry.orderPrice.error.min",{value:t}),max:e("orderEntry.orderPrice.error.max",{value:t})},trigger_price:{required:e("orderEntry.triggerPrice.error.required"),min:e("orderEntry.triggerPrice.error.min",{value:t}),max:e("orderEntry.triggerPrice.error.max",{value:t})},tp_trigger_price:{required:e("tpsl.validate.tpTriggerPrice.error.required"),min:e("orderEntry.tpTriggerPrice.error.min",{value:t}),max:e("orderEntry.tpTriggerPrice.error.max",{value:t}),priceErrorMin:e("tpsl.validate.tpTriggerPrice.error.priceErrorMin"),priceErrorMax:e("tpsl.validate.tpTriggerPrice.error.priceErrorMax")},sl_trigger_price:{required:e("tpsl.validate.slTriggerPrice.error.required"),min:e("orderEntry.slTriggerPrice.error.min",{value:t}),max:e("orderEntry.slTriggerPrice.error.max",{value:t}),priceErrorMin:e("tpsl.validate.slTriggerPrice.error.priceErrorMin"),priceErrorMax:e("tpsl.validate.slTriggerPrice.error.priceErrorMax")},tp_order_price:{required:e("tpsl.validate.tpOrderPrice.error.required"),min:e("tpsl.validate.tpOrderPrice.error.min",{value:t}),max:e("tpsl.validate.tpOrderPrice.error.max",{value:t})},sl_order_price:{required:e("tpsl.validate.slOrderPrice.error.required"),min:e("tpsl.validate.slOrderPrice.error.min",{value:t}),max:e("tpsl.validate.slOrderPrice.error.max",{value:t})},total:{min:e("orderEntry.total.error.min",{value:t})},start_price:{required:e("orderEntry.startPrice.error.required"),min:e("orderEntry.startPrice.error.min",{value:t}),max:e("orderEntry.startPrice.error.max",{value:t})},end_price:{required:e("orderEntry.endPrice.error.required"),min:e("orderEntry.endPrice.error.min",{value:t}),max:e("orderEntry.endPrice.error.max",{value:t})},total_orders:{required:e("orderEntry.totalOrders.error.required"),range:e("orderEntry.totalOrders.error.range")},skew:{required:e("orderEntry.skew.error.required"),min:e("orderEntry.skew.error.min",{value:t}),max:e("orderEntry.skew.error.max",{value:t})},activated_price:{min:e("orderEntry.triggerPrice.error.min",{value:t}),max:e("orderEntry.triggerPrice.error.max",{value:t})},callback_value:{required:e("orderEntry.callbackValue.error.required"),min:e("orderEntry.callbackValue.error.min",{value:t}),range:e("orderEntry.callbackValue.error.range",{min:l,max:s})},callback_rate:{required:e("orderEntry.callbackRate.error.required"),range:e("orderEntry.callbackRate.error.range",{min:l,max:s})}}[a]?.[c]||""};return {getErrorMsg:react.useCallback((a,c)=>{let{type:d,value:t,min:l,max:s}=r?.[a]||{};return d?i(a,d,{value:c||t,min:l,max:s}):""},[r])}} exports.OrderlyAppProvider = ue; exports.useAppConfig = De; exports.useAppContext = W; exports.useDataTap = Kr; exports.useOrderEntryFormErrorMsg = Qr; //# sourceMappingURL=out.js.map //# sourceMappingURL=index.js.map