UNPKG

@orderly.network/react-app

Version:

Create React App with Orderly Network components

14 lines (12 loc) 15.3 kB
import { useTrack, OrderlyConfigProvider, useAccount, useTrackingInstance, useRestrictedInfo, useEventEmitter, useSymbolsInfo, useOrderlyContext, useLocalStorage, useAudioPlayer, useDebouncedCallback, useStorageChain, useChains, useConfig, useWalletConnector, useKeyStore, useSessionStorage, useWalletSubscription, useSettleSubscription, useWS, useStorageLedgerAddress, parseJSON } from '@orderly.network/hooks'; import { OrderlyThemeProvider, LocaleProvider, TooltipProvider, ModalProvider, Toaster, toast, useScreen, modal, parseNumber } from '@orderly.network/ui'; import { createContext, useContext, useCallback, useEffect, useMemo, useState, useRef } from 'react'; import { OrderStatus, SDKError, AccountStatusEnum, ABSTRACT_CHAIN_ID_MAP, ChainNamespace, TrackerEventName, AlgoOrderRootType } from '@orderly.network/types'; import { useTranslation, useLocaleCode, LocaleEnum, i18n } from '@orderly.network/i18n'; import { parseChainIdToNumber, windowGuard, praseChainIdToNumber, capitalizeString, getTimestamp, transSymbolformString } from '@orderly.network/utils'; import { jsx, jsxs } from 'react/jsx-runtime'; import { zhCN, enUS } from 'date-fns/locale'; var q=()=>{useEffect(()=>{let e=new URLSearchParams(window.location.search).get("ref");e&&localStorage.setItem("referral_code",e);},[]);};function ye(r){return r==="BUY"?i18n.t("common.buy"):r==="SELL"?i18n.t("common.sell"):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=transSymbolformString(i),p="algo_type"in r&&r.algo_type===AlgoOrderRootType.POSITIONAL_TP_SL?i18n.t("tpsl.entirePosition"):n===void 0?a:parseNumber(a,{dp:n}),m="",g="";switch(l){case OrderStatus.NEW:c?.startsWith("scaled_")?(m=i18n.t("orders.status.scaledSubOrderOpened.toast.title"),g=`${u} ${f} ${p}`):(m=i18n.t("orders.status.opened.toast.title"),g=`${u} ${f} ${p}`);break;case OrderStatus.FILLED:case OrderStatus.PARTIAL_FILLED:let w=n===void 0?t:parseNumber(t,{dp:n});m=i18n.t("orders.status.filled.toast.title"),g=`${u} ${f} ${w} / ${p}`;break;case OrderStatus.CANCELLED:m=i18n.t("orders.status.canceled.toast.title"),g=`${u} ${f} ${p}`;break;case OrderStatus.REJECTED:m=i18n.t("orders.status.rejected.toast.title"),g=`${u} ${f} ${p}`;break;case OrderStatus.REPLACED:let{algo_type:I,activated_price:E}=r;if(I===AlgoOrderRootType.TRAILING_STOP){let b=d?.[AlgoOrderRootType.TRAILING_STOP]||{};b.is_activated&&b.extreme_price&&E?(m=i18n.t("orders.trailingStop.activated"),g=`${f} @${E}`):b.extreme_price&&(m="",g="");}else m=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=useEventEmitter(),e=useSymbolsInfo(),i=useRef({}),{notification:o}=useOrderlyContext();useEffect(()=>{i.current=e;},[e]);let a=o?.orderFilled?.media??"",[c]=useLocalStorage(be,o?.orderFilled?.defaultOpen??false),[d]=useAudioPlayer(a,{autoPlay:c,volume:1}),t=useDebouncedCallback(l=>{(n=>{let{title:h,msg:u,status:f}=F(n,i.current),p=f===OrderStatus.FILLED||f===OrderStatus.PARTIAL_FILLED,m=n.algo_type||n.type;h&&u&&toast.success(jsxs("div",{children:[h,jsx("br",{}),jsx("div",{className:"orderly-text-white/[0.54] orderly-text-xs",children:u}),p&&d]}),{id:m});})(l);},100);useEffect(()=>(r.on("orders:changed",t),()=>{r.off("orders:changed",t),t.cancel();}),[r,t]);};function Q(){let{t:r}=useTranslation(),e=useLocaleCode();return useMemo(()=>{let i={[LocaleEnum.en]:enUS,[LocaleEnum.zh]: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 _=createContext({}),De=()=>useContext(_);var z=r=>jsx(_.Provider,{value:r,children:r.children});var B=()=>{let r=useWS(),{t:e}=useTranslation();useEffect(()=>{let i=r.privateSubscribe({id:"assetconvert",event:"subscribe",topic:"assetconvert",ts:getTimestamp()},{onMessage(o){o.convertId&&toast.success(e("transfer.convert.completed"));}});return ()=>i()},[]);};function J(r){let{storageChain:e,setStorageChain:i}=useStorageChain(),[o,a]=useState(),[c]=useChains(),d=useConfig("networkId"),{connectedChain:t}=useWalletConnector();return 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}=useWalletConnector(),[i,o]=useLocalStorage("orderly_link_device",{}),{account:a}=useAccount(),{isMobile:c}=useScreen(),d=useConfig(),t=async n=>{localStorage.removeItem(Y),await a.disconnect(),await e({label:n});};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);};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 useEffect(()=>{s();},[a,c,r]),{linkDevice:l}}function Ze(){try{let r=localStorage.getItem("orderly_link_device");return r?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}=useTranslation();useSettleSubscription({onMessage:e=>{let{status:i}=e;switch(i){case "COMPLETED":toast.success(r("settle.settlement.completed"));break;case "FAILED":toast.error(r("settle.settlement.failed"));break;}}});}function ee(){let{t:r}=useTranslation(),e=useEventEmitter(),{setLedgerAddress:i}=useStorageLedgerAddress();return useEffect(()=>{e.on("wallet:connect-error",o=>{toast.error(o.message);}),e.on("wallet:sign-message-with-ledger-error",o=>{window.setTimeout(()=>{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()=>(toast.error(o.message),Promise.resolve()),cancelLabel:r("common.no")}).then(a=>{});});});},[e,r]),{}}function oe(){let{t:r}=useTranslation(),e=useEventEmitter(),i=useRef({}),[o,a]=useSessionStorage("orderly_wallet_change_id",{});i.current=o,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=`${capitalizeString(t)} completed`;t==="DEPOSIT"?n=r("transfer.deposit.completed"):t==="WITHDRAW"&&(n=r("transfer.withdraw.completed")),toast.success(n);}else if(l==="FAILED"&&s){let n=`${capitalizeString(t)} failed`;t==="DEPOSIT"?n=r("transfer.deposit.failed"):t==="WITHDRAW"&&(n=r("transfer.withdraw.failed")),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}=useWalletConnector();if(typeof i!="function")throw new SDKError("Please provide a wallet connector provider");useEventEmitter();let t=useRef(false);useConfig("brokerId");let {account:s,state:n}=useAccount(),h=useKeyStore(),u=useConfig("networkId"),[f,{checkChainSupport:p}]=useChains(),[m,g]=useState(false),{track:x,setTrackUserId:w}=useTrack(),I=useMemo(()=>e?.accounts?.[0]?.address,[e]),E=useMemo(()=>{let y=e?.chains?.[0]?.id,C=e?.chains?.[0]?.namespace;if(!(typeof y>"u"))return {id:parseChainIdToNumber(y),namespace:C}},[e]);return useEffect(()=>{n.status>=AccountStatusEnum.EnableTrading&&s.accountId&&w(s.accountId);},[s,n]),useEffect(()=>{if(!o){g(false);return}let y=p(o.id,u);ABSTRACT_CHAIN_ID_MAP.has(parseInt(o.id))&&e?.label!=="AGW"&&(y=false),g(!y);},[o,f,p,u,e]),useEffect(()=>{windowGuard(()=>{let y=h.getAddress(),C=JSON.parse(localStorage.getItem(ce)??"{}");o?.namespace!==ChainNamespace.solana&&y&&s.address!==y&&C.label&&i({autoSelect:{label:C.label,disableModals:true}}).then(T=>{},T=>{});});},[e,s.address]),useEffect(()=>{if(e===null&&n.status>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:praseChainIdToNumber(E.id),namespace:E.namespace.toUpperCase()},wallet:{name:e?.label??""},additionalInfo:e?.additionalInfo??{}}),x(TrackerEventName.walletConnect,{wallet:e?.label??"",network:E.namespace.toUpperCase()}),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=praseChainIdToNumber(C.chains[0].id);if(!p(T,u))return {wrongNetwork:true};if(!s)throw new Error("account is not initialized");n.status===AccountStatusEnum.EnableTradingWithoutConnected&&(localStorage.removeItem("orderly_link_device"),await s.disconnect());let pe=await s.setAddress(C.accounts[0].address,{provider:C.provider,chain:{id:praseChainIdToNumber(C.chains[0].id),namespace:C.chains[0].namespace.toUpperCase()},wallet:{name:C.label}});return x(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=createContext({setCurrentChainId:r=>{},restrictedInfo:{},setShowAnnouncement:r=>{}}),W=()=>useContext(N);var le=r=>{let[e,i]=useState(false),[o,a]=J(r.defaultChain);G(),useTrackingInstance();let{connectWallet:c,wrongNetwork:d}=de({currentChainId:o});oe(),X(),B(),ee();let t=useRestrictedInfo(r.restrictedInfo),l=t.restrictedOpen,s=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 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;useTrack(),q();let t=Q();return jsx(z,{appIcons:i,brokerName:r.brokerName,children:jsx(OrderlyThemeProvider,{components:e,overrides:r.overrides,children:jsxs(OrderlyConfigProvider,{...d,children:[jsx(Fr,{}),jsx(le,{onChainChanged:o,defaultChain:a,restrictedInfo:r.restrictedInfo,onRouteChange:r.onRouteChange,widgetConfigs:c,children:jsx(LocaleProvider,{locale:t,children:jsx(TooltipProvider,{delayDuration:300,children:jsx(ModalProvider,{children:r.children})})})}),jsx(Toaster,{})]})})})};process.env.NODE_ENV!=="production"&&(ue.displayName="OrderlyAppProvider");var Kr=(r,e)=>{let{wrongNetwork:i,disabledConnect:o}=W(),{state:a}=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}=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: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])}} export { ue as OrderlyAppProvider, De as useAppConfig, W as useAppContext, Kr as useDataTap, Qr as useOrderEntryFormErrorMsg }; //# sourceMappingURL=out.js.map //# sourceMappingURL=index.mjs.map