@orderly.network/react-app
Version:
Create React App with Orderly Network components
14 lines (12 loc) • 14.4 kB
JavaScript
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, 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 _=()=>{useEffect(()=>{let e=new URLSearchParams(window.location.search).get("ref");e&&localStorage.setItem("referral_code",e);},[]);};function ge(r){return r==="BUY"?i18n.t("common.buy"):r==="SELL"?i18n.t("common.sell"):capitalizeString(r)}function W(r,e){let{symbol:a,side:o,quantity:i,client_order_id:d}=r,t="total_executed_quantity"in r?r.total_executed_quantity:0,s="status"in r?r.status:r.algo_status,p=e[a],c=p("base_dp"),n=ge(o),l=transSymbolformString(a),u="algo_type"in r&&r.algo_type===AlgoOrderRootType.POSITIONAL_TP_SL?i18n.t("tpsl.entirePosition"):c===void 0?i:parseNumber(i,{dp:c}),f="",m="";switch(s){case OrderStatus.NEW:d?.startsWith("scaled_")?(f=i18n.t("orders.status.scaledSubOrderOpened.toast.title"),m=`${n} ${l} ${u}`):(f=i18n.t("orders.status.opened.toast.title"),m=`${n} ${l} ${u}`);break;case OrderStatus.FILLED:case OrderStatus.PARTIAL_FILLED:let P=c===void 0?t:parseNumber(t,{dp:c});f=i18n.t("orders.status.filled.toast.title"),m=`${n} ${l} ${P} / ${u}`;break;case OrderStatus.CANCELLED:f=i18n.t("orders.status.canceled.toast.title"),m=`${n} ${l} ${u}`;break;case OrderStatus.REJECTED:f=i18n.t("orders.status.rejected.toast.title"),m=`${n} ${l} ${u}`;break;case OrderStatus.REPLACED:f=i18n.t("orders.status.replaced.toast.title"),m=`${o} ${l} ${t} / ${u}`;break;}return {title:f,msg:m,status:s}}var xe="orderly_order_sound_alert",$=()=>{let r=useEventEmitter(),e=useSymbolsInfo(),a=useRef({}),{notification:o}=useOrderlyContext();useEffect(()=>{a.current=e;},[e]);let i=o?.orderFilled?.media??"",[d]=useLocalStorage(xe,o?.orderFilled?.defaultOpen??false),[t]=useAudioPlayer(i,{autoPlay:d,volume:1}),s=useDebouncedCallback(p=>{(n=>{let{title:l,msg:u,status:f}=W(n,a.current),m=f===OrderStatus.FILLED||f===OrderStatus.PARTIAL_FILLED,C=n.algo_type||n.type;l&&u&&toast.success(jsxs("div",{children:[l,jsx("br",{}),jsx("div",{className:"orderly-text-white/[0.54] orderly-text-xs",children:u}),m&&t]}),{id:C});})(p);},100);useEffect(()=>(r.on("orders:changed",s),()=>{r.off("orders:changed",s),s.cancel();}),[r,s]);};function K(){let{t:r}=useTranslation(),e=useLocaleCode();return useMemo(()=>{let a={[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:a[e]},empty:{description:r("ui.empty.description")}}},[r,e])}var v=createContext({}),De=()=>useContext(v);var H=r=>jsx(v.Provider,{value:r,children:r.children});var Q=()=>{let r=useWS(),{t:e}=useTranslation();useEffect(()=>{let a=r.privateSubscribe({id:"assetconvert",event:"subscribe",topic:"assetconvert",ts:getTimestamp()},{onMessage(o){o.convertId&&toast.success(e("transfer.convert.completed"));}});return ()=>a()},[]);};function V(r){let{storageChain:e,setStorageChain:a}=useStorageChain(),[o,i]=useState(),[d]=useChains(),t=useConfig("networkId"),{connectedChain:s}=useWalletConnector();return useEffect(()=>{if(s)i?.(typeof s.id=="number"?s.id:parseInt(s.id));else {if(o)return;let p,c=t==="mainnet"?d.mainnet?.[0]:d.testnet?.[0];typeof r=="function"?p=r(t,d):typeof r=="object"&&(p=t==="mainnet"?r?.mainnet:r?.testnet);let n=p?.id||c?.network_infos?.chain_id;if(!n)return;e?i?.(e.chainId):(a(n),i?.(n));}},[s,d,o,t,i,r]),[o,i]}var z="orderly:wallet-info";function B(){let{connectedChain:r,disconnect:e}=useWalletConnector(),[a,o]=useLocalStorage("orderly_link_device",{}),{account:i}=useAccount(),{isMobile:d}=useScreen(),t=useConfig(),s=async n=>{localStorage.removeItem(z),await i.disconnect(),await e({label:n});};useEffect(()=>{let n=k(),l=JSON.parse(localStorage.getItem(z)??"{}");n&&l&&s(l.label);},[]);let p=async()=>{let n=k();if(!n)return;let{address:l,secretKey:u,chainId:f,chainNamespace:m}=n;if(!await i.importOrderlyKey({address:l,secretKey:u,chainNamespace:m}))return;o({chainId:f,chainNamespace:m});let P=new URL(window.location.href);P.searchParams.delete("link"),P.searchParams.set("utm_medium","qrcode");let w=decodeURIComponent(P.toString());history.replaceState(null,"",w);};useEffect(()=>{d&&!r&&p();},[i,r,d]);let c=async()=>{let{chainId:n,chainNamespace:l}=Xe()||{};if(d&&!r&&n&&l){let u=i.keyStore.getAddress(),f=i.keyStore.getOrderlyKey(),m=i.keyStore.getAccountId(u);await i.checkOrderlyKey(u,f,m)&&t.set("chainNamespace",l);}};return useEffect(()=>{c();},[i,d,r]),{linkDevice:p}}function Xe(){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,k:o,i,n:d}=Ze(e)||{};if(a&&o&&i&&d)return {address:a,secretKey:o,chainId:i,chainNamespace:d}}function Ze(r){try{let e=JSON.parse(window.atob(r)),a=Math.floor(Date.now()/1e3),o=e.t;return !o||a>o?void 0:e}catch{}}function Y(){let{t:r}=useTranslation();useSettleSubscription({onMessage:e=>{let{status:a}=e;switch(a){case "COMPLETED":toast.success(r("settle.settlement.completed"));break;case "FAILED":toast.error(r("settle.settlement.failed"));break;}}});}function j(){let{t:r}=useTranslation(),e=useEventEmitter(),{setLedgerAddress:a}=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()=>(a(o.userAddress),Promise.resolve()),okLabel:r("common.ok"),onCancel:async()=>(toast.error(o.message),Promise.resolve()),cancelLabel:r("common.no")}).then(i=>{});});});},[e,r]),{}}function ee(){let{t:r}=useTranslation(),e=useEventEmitter(),a=useRef({}),[o,i]=useSessionStorage("orderly_wallet_change_id",{});a.current=o,useWalletSubscription({onMessage:d=>{let{id:t,side:s,transStatus:p}=d,c=true;if(["DEPOSIT","WITHDRAW"].includes(s)&&["COMPLETED","FAILED"].includes(p)){let n=!!a.current[t];n||(a.current[t]=true,i(l=>({...l,[t]:true}))),c=!n;}if(p==="COMPLETED"&&c){let n=`${capitalizeString(s)} completed`;s==="DEPOSIT"?n=r("transfer.deposit.completed"):s==="WITHDRAW"&&(n=r("transfer.withdraw.completed")),toast.success(n);}else if(p==="FAILED"&&c){let n=`${capitalizeString(s)} failed`;s==="DEPOSIT"?n=r("transfer.deposit.failed"):s==="WITHDRAW"&&(n=r("transfer.withdraw.failed")),toast.error(n);}e.emit("wallet:changed",d);}});}var ie="orderly:wallet-info";var ae=r=>{let{wallet:e,connect:a,connectedChain:o,disconnect:i,namespace:d}=useWalletConnector();if(typeof a!="function")throw new SDKError("Please provide a wallet connector provider");useEventEmitter();let s=useRef(false);useConfig("brokerId");let {account:c,state:n}=useAccount(),l=useKeyStore(),u=useConfig("networkId"),[f,{checkChainSupport:m}]=useChains(),[C,P]=useState(false),{track:w,setTrackUserId:de}=useTrack(),x=useMemo(()=>e?.accounts?.[0]?.address,[e]),I=useMemo(()=>{let g=e?.chains?.[0]?.id,h=e?.chains?.[0]?.namespace;if(!(typeof g>"u"))return {id:parseChainIdToNumber(g),namespace:h}},[e]);return useEffect(()=>{n.status>=AccountStatusEnum.EnableTrading&&c.accountId&&de(c.accountId);},[c,n]),useEffect(()=>{if(!o){P(false);return}let g=m(o.id,u);ABSTRACT_CHAIN_ID_MAP.has(parseInt(o.id))&&e?.label!=="AGW"&&(g=false),P(!g);},[o,f,m,u,e]),useEffect(()=>{windowGuard(()=>{let g=l.getAddress(),h=JSON.parse(localStorage.getItem(ie)??"{}");o?.namespace!==ChainNamespace.solana&&g&&c.address!==g&&h.label&&a({autoSelect:{label:h.label,disableModals:true}}).then(b=>{},b=>{});});},[e,c.address]),useEffect(()=>{if(e===null&&n.status>AccountStatusEnum.NotConnected&&!n.validating){c.disconnect();return}if(C||!o||s.current)return;let g=k();x&&x!==c.address&&!g&&(c.setAddress(x,{provider:e?.provider,chain:{id:praseChainIdToNumber(I.id),namespace:I.namespace.toUpperCase()},wallet:{name:e?.label??""},additionalInfo:e?.additionalInfo??{}}),w(TrackerEventName.walletConnect,{wallet:e?.label??"",network:I.namespace.toUpperCase()}),windowGuard(()=>{localStorage.setItem(ie,JSON.stringify({label:e?.label??""}));})),I?.id!==c.chainId&&c.switchChainId(I?.id);},[e,o,x,I,c.address,n,c.chainId,C]),{connectWallet:async()=>(s.current=true,a({chainId:r.currentChainId}).then(async g=>{if(Array.isArray(g)&&g.length>0&&g[0]&&g[0].accounts.length>0){let h=g[0],b=praseChainIdToNumber(h.chains[0].id);if(!m(b,u))return {wrongNetwork:true};if(!c)throw new Error("account is not initialized");n.status===AccountStatusEnum.EnableTradingWithoutConnected&&(localStorage.removeItem("orderly_link_device"),await c.disconnect());let le=await c.setAddress(h.accounts[0].address,{provider:h.provider,chain:{id:praseChainIdToNumber(h.chains[0].id),namespace:h.chains[0].namespace.toUpperCase()},wallet:{name:h.label}});return w(TrackerEventName.walletConnect,{wallet:h.label,network:h.chains[0].namespace.toUpperCase()}),{wallet:h,status:le,wrongNetwork:false}}return null}).finally(()=>{s.current=false;})),wrongNetwork:C}};var L=createContext({setCurrentChainId:r=>{},restrictedInfo:{},setShowAnnouncement:r=>{}}),D=()=>useContext(L);var se=r=>{let[e,a]=useState(false),[o,i]=V(r.defaultChain);B(),useTrackingInstance();let{connectWallet:d,wrongNetwork:t}=ae({currentChainId:o});ee(),Y(),Q(),j();let s=useRestrictedInfo(r.restrictedInfo),p=s.restrictedOpen,c=useMemo(()=>({connectWallet:d,wrongNetwork:t,currentChainId:o,setCurrentChainId:i,onChainChanged:r.onChainChanged,disabledConnect:p,restrictedInfo:s,showAnnouncement:e,setShowAnnouncement:a,onRouteChange:r.onRouteChange,widgetConfigs:r.widgetConfigs}),[d,o,p,r.onChainChanged,s,i,e,t,r.onRouteChange,r.widgetConfigs]);return jsx(L.Provider,{value:c,children:r.children})};var qr=()=>($(),null),ce=r=>{let{components:e,appIcons:a,onChainChanged:o,defaultChain:i,widgetConfigs:d,...t}=r;useTrack(),_();let s=K();return jsx(H,{appIcons:a,brokerName:r.brokerName,children:jsx(OrderlyThemeProvider,{components:e,overrides:r.overrides,children:jsxs(OrderlyConfigProvider,{...t,children:[jsx(qr,{}),jsx(se,{onChainChanged:o,defaultChain:i,restrictedInfo:r.restrictedInfo,onRouteChange:r.onRouteChange,widgetConfigs:d,children:jsx(LocaleProvider,{locale:s,children:jsx(TooltipProvider,{delayDuration:300,children:jsx(ModalProvider,{children:r.children})})})}),jsx(Toaster,{})]})})})};process.env.NODE_ENV!=="production"&&(ce.displayName="OrderlyAppProvider");var Ur=(r,e)=>{let{wrongNetwork:a,disabledConnect:o}=D(),{state:i}=useAccount();return e?.skip?r:a||o||typeof e?.accountStatus<"u"&&i.status<e.accountStatus?typeof e?.fallbackData<"u"?e.fallbackData:null:r};function Hr(r){let{t:e}=useTranslation(),a=(i,d,t)=>({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})},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})}})[i]?.[d]||"";return {parseErrorMsg:(i,d)=>{let{type:t,value:s}=r?.[i]||{};return t?a(i,t,d||s):""}}}
export { ce as OrderlyAppProvider, De as useAppConfig, D as useAppContext, Ur as useDataTap, Hr as useOrderEntryFormErrorMsg };
//# sourceMappingURL=out.js.map
//# sourceMappingURL=index.mjs.map