@orderly.network/ui-connector 2.0.3 → 2.0.4

package/dist/index.js

@@ -8,7 +8,7 @@ var hooks = require('@orderly.network/hooks');
 var reactApp = require('@orderly.network/react-app');
 var uiChainSelector = require('@orderly.network/ui-chain-selector');
 
-var V=e=>{let{title:t,description:n}=e;return jsxRuntime.jsxs(ui.Box,{position:"relative",className:"oui-pl-8",children:[jsxRuntime.jsxs(ui.Box,{children:[jsxRuntime.jsx(ui.Text,{as:"div",intensity:98,size:"sm",children:t}),jsxRuntime.jsx(ui.Text,{as:"div",intensity:54,size:"2xs",children:n})]}),jsxRuntime.jsx(me,{...e})]})},me=e=>{let{active:t,isLoading:n,isCompleted:i}=e;return jsxRuntime.jsx(ui.Match,{className:"oui-absolute oui-left-0 oui-top-1 oui-z-10",value:()=>i?"completed":n?"loading":t?"active":"normal",case:{loading:jsxRuntime.jsx("div",{children:jsxRuntime.jsx(ui.Spinner,{size:"sm",className:"oui-ml-1"})}),completed:jsxRuntime.jsx("div",{children:jsxRuntime.jsx(ui.CheckedCircleFillIcon,{opacity:1,className:"oui-text-primary"})})},default:jsxRuntime.jsx(fe,{active:!!t})})},fe=({active:e,className:t})=>jsxRuntime.jsx("div",{className:ui.cn("oui-w-[8.3px] oui-h-[8.3px] oui-rounded-full oui-ml-2 oui-mt-1",t,e?"oui-bg-primary-light":"oui-bg-base-2")});var B=e=>{let{initAccountState:t=types.AccountStatusEnum.NotConnected}=e,[n,i]=react.useState(!0),o=hooks.useEventEmitter(),{state:d,account:g}=hooks.useAccount(),[l,u]=react.useState(t),[s,m]=react.useState(0),[a,f]=react.useState(!1),[A]=hooks.useLocalStorage("orderly-first-show-wallet-connector-dialog",void 0);react.useEffect(()=>()=>{localStorage.setItem("orderly-first-show-wallet-connector-dialog","1");},[]),react.useEffect(()=>{u(d.status);},[d]);let T=react.useMemo(()=>{let r=[];return t<types.AccountStatusEnum.SignedIn&&r.push({key:"signIn",title:"Sign In",description:"Confirm you are the owner of this wallet"}),t<types.AccountStatusEnum.EnableTrading&&r.push({key:"enableTrading",title:"Enable Trading",description:"Enable secure access to our API for lightning fast trading"}),r},[t]),x=()=>(f(!0),e.enableTrading(n).then(async r=>{f(!1),m(C=>C+1);try{await e.enableTradingComplted?.();}catch{}typeof e.onCompleted=="function"?e.onCompleted():typeof e.close=="function"&&e.close();},r=>{if(f(!1),r!==-1){if(r.message.indexOf("Signing off chain messages with Ledger is not yet supported")!==-1){o.emit("wallet:sign-message-with-ledger-error",{message:r.message,userAddress:g.address});return}ui.toast.error(Y(r));}}).catch(r=>{f(!1);})),I=()=>(f(!0),e.signIn().then(r=>{m(C=>C+1),x();},r=>{if(f(!1),r!==-1){if(r.message.indexOf("Signing off chain messages with Ledger is not yet supported")!==-1){o.emit("wallet:sign-message-with-ledger-error",{message:r.message,userAddress:g.address});return}ui.toast.error(Y(r));}}).catch(r=>{f(!1);}));return jsxRuntime.jsxs(ui.Box,{id:"oui-wallet-connect-dialog-content",className:"oui-font-semibold",children:[jsxRuntime.jsx(ui.Text,{intensity:54,size:"xs",children:"Your previous access has expired, you will receive a signature request to enable trading. Signing is free and will not send a transaction."}),jsxRuntime.jsxs(ui.Box,{p:4,my:6,intensity:600,r:"lg",className:"oui-space-y-5",position:"relative",children:[T.map((r,C)=>jsxRuntime.jsx(V,{title:r.title,description:r.description,isCompleted:s>C,active:s===C,isLoading:a&&s===C},r.key)),T.length>1&&jsxRuntime.jsx(ui.Box,{position:"absolute",height:"38px",left:28,top:18,zIndex:0,children:jsxRuntime.jsx(ui.Divider,{lineStyle:"dashed",direction:"vertical",intensity:16,className:"oui-h-full"})})]}),e.showRefCodeInput&&T.length==2&&jsxRuntime.jsx(Ae,{...e}),A&&jsxRuntime.jsxs(ui.Flex,{justify:"between",itemAlign:"center",children:[jsxRuntime.jsx(Ne,{}),jsxRuntime.jsx(ui.Switch,{color:"primary",checked:n,onCheckedChange:i,disabled:a,className:"data-[state=checked]:oui-bg-primary-darken"})]}),jsxRuntime.jsx(ui.Flex,{justify:"center",mt:8,children:jsxRuntime.jsx(ui.Box,{width:"45%",children:jsxRuntime.jsx(Ee,{state:l,signIn:I,enableTrading:x,loading:a,disabled:l>=types.AccountStatusEnum.EnableTrading})})})]})},Ee=({state:e,signIn:t,enableTrading:n,loading:i,disabled:o})=>jsxRuntime.jsx(ui.Match,{value:()=>e<=types.AccountStatusEnum.NotSignedIn?"signIn":"enableTrading",case:{signIn:jsxRuntime.jsx(ui.Button,{fullWidth:!0,onClick:()=>t(),loading:i,disabled:o,children:"Sign In"}),enableTrading:jsxRuntime.jsx(ui.Button,{fullWidth:!0,onClick:()=>n(),loading:i,disabled:o,children:"Enable Trading"})}}),Ae=e=>jsxRuntime.jsx(ui.TextField,{placeholder:"Referral code (Optional)",fullWidth:!0,label:"",value:e.refCode,onChange:t=>{e.setRefCode(t.target.value);},classNames:{label:"oui-text-base-contrast-54 oui-text-xs",input:"placeholder:oui-text-base-contrast-20 placeholder:oui-text-sm"},formatters:[ui.inputFormatter.createRegexInputFormatter(/[^A-Z0-9]/g)],onClear:()=>{e.setRefCode("");},autoComplete:"off",helpText:e.helpText,className:"oui-mb-4",color:e.helpText?"danger":void 0}),Ne=()=>jsxRuntime.jsx(ui.Tooltip,{content:"Toggle this option to skip these steps next time you want to trade.",className:"oui-max-w-[300px]",children:jsxRuntime.jsx("button",{onClick:()=>{window.innerWidth>768||ui.modal.alert({title:"Remember me",message:jsxRuntime.jsx("span",{className:"oui-text-2xs oui-text-base-contrast/60",children:"Toggle this option to skip these steps next time you want to trade."})});},children:jsxRuntime.jsx(ui.Text,{intensity:54,size:"xs",className:"oui-underline oui-underline-offset-4 oui-decoration-dashed oui-decoration-base-contrast-36",children:"Remember me"})})});function Y(e){Object.keys(e).forEach(n=>{});let t="Something went wrong";return e.toString().includes("rejected")&&(t="User rejected the request."),ui.capitalizeFirstLetter(t)??t}var O=()=>{let{account:e,state:t,createOrderlyKey:n,createAccount:i}=hooks.useAccount(),[o,d]=react.useState(""),[g,l]=react.useState(""),{trigger:u}=hooks.useLazyQuery(`/v1/public/referral/verify_ref_code?referral_code=${o}`);react.useEffect(()=>{let w=localStorage.getItem("referral_code");w!=null&&d(w);},[]);let{referral_code:s,isLoading:m}=hooks.useGetReferralCode(e.accountId),[a,{error:f,isMutating:A}]=hooks.useMutation("/v1/referral/bind","POST");react.useEffect(()=>{o.length===0&&l("");},[o]);let T=()=>{ui.toast.success("Wallet connected"),o.length>=4&&o.length<=10&&a({referral_code:o}).finally(()=>{localStorage.removeItem("referral_code");});},x=async()=>{if(o.length===0)return Promise.resolve(void 0);if(o.length>0&&(o.length<4||o.length>10))return Promise.resolve("The referral_code must be 4 to 10 characters long, only accept upper case roman characters and numbers");let{exist:w}=await u();return w===!1?Promise.resolve("This referral code does not exist."):Promise.resolve(void 0)},I=(s?.length||0)===0&&!m,r=async()=>{if(I){let w=await x();if(typeof w<"u")return l(w),Promise.reject(-1)}return l(""),i()};return {enableTrading:async w=>{if(I){let F=await x();if(typeof F<"u")return l(F),Promise.reject(-1)}return l(""),n(w)},initAccountState:t.status,signIn:r,enableTradingComplted:T,refCode:o,setRefCode:d,helpText:g,showRefCodeInput:I}};var v="walletConnector",R="walletConnectorSheet",G=e=>{let t=O();return jsxRuntime.jsx(B,{...t,...e})};ui.registerSimpleDialog(v,G,{size:"sm",title:"Connect wallet"});ui.registerSimpleSheet(R,G,{title:"Connect wallet"});var X={connectWallet:"Connect wallet",switchChain:"Wrong network",enableTrading:"Enable trading",signin:"Sign in"},j={connectWallet:"Please Connect wallet before starting to trade",switchChain:"Please switch to a supported network to continue",enableTrading:"Please Enable trading before starting to trade",signin:"Please sign in before starting to trade"};var S=e=>{let{status:t,buttonProps:n,fallback:i,descriptions:o,classNames:d,networkId:g,id:l,bridgeLessOnly:u}=e,{state:s}=hooks.useAccount(),{wrongNetwork:m}=reactApp.useAppContext(),a=react.useMemo(()=>t===void 0?s.status===types.AccountStatusEnum.EnableTradingWithoutConnected?types.AccountStatusEnum.EnableTradingWithoutConnected:types.AccountStatusEnum.EnableTrading:t,[t,s.status]),f={...X,...e.labels},A=react.useMemo(()=>typeof i<"u"?i({validating:s.validating,status:s.status,wrongNetwork:m}):s.validating?jsxRuntime.jsx(k,{angle:45,disabled:!0,loading:!0,description:o?.connectWallet,id:l,type:"button",...n,children:f.connectWallet}):jsxRuntime.jsx(Ze,{bridgeLessOnly:u,status:s.status,buttonProps:{...n,id:l,type:"button"},wrongNetwork:m,networkId:e.networkId,labels:f,descriptions:o}),[s.status,s.validating,n,m]);return jsxRuntime.jsx(ui.Either,{value:s.status>=a&&!m,left:A,children:e.children})},Ze=e=>{let{buttonProps:t,labels:n,descriptions:i}=e,{connectWallet:o}=reactApp.useAppContext(),{account:d}=hooks.useAccount(),{isMobile:g}=ui.useScreen(),l=hooks.useMediaQuery(types.MEDIA_TABLET),u=()=>{ui.modal.show(l?R:v).then(a=>{},a=>{});},s=async()=>{let a=await o();a&&(a.wrongNetwork?m():(a?.status??types.AccountStatusEnum.NotConnected)<types.AccountStatusEnum.EnableTrading&&u());},m=()=>{d.once("validate:end",a=>{a<types.AccountStatusEnum.EnableTrading?u():ui.toast.success("Wallet connected");}),ui.modal.show(g?uiChainSelector.ChainSelectorSheetId:uiChainSelector.ChainSelectorDialogId,{networkId:e.networkId,bridgeLessOnly:e.bridgeLessOnly}).then(a=>{a.wrongNetwork||e.status>=types.AccountStatusEnum.Connected&&(e.status<types.AccountStatusEnum.EnableTrading?u():ui.toast.success("Wallet connected"));},a=>{});};return e.wrongNetwork?jsxRuntime.jsx(k,{color:"warning",onClick:()=>{m();},description:i?.switchChain,...t,children:n.switchChain}):jsxRuntime.jsx(ui.Match,{value:e.status,case:a=>{if(a<=types.AccountStatusEnum.NotConnected)return jsxRuntime.jsx(k,{size:"lg",onClick:()=>{s();},variant:"gradient",angle:45,description:i?.connectWallet,...t,children:n.connectWallet});if(a<=types.AccountStatusEnum.NotSignedIn)return jsxRuntime.jsx(k,{size:"lg",onClick:()=>{u();},angle:45,description:i?.signin,...t,children:n.signin})},default:jsxRuntime.jsx(k,{size:"lg",description:i?.enableTrading,...t,onClick:()=>u(),children:n.enableTrading})})};S.displayName="AuthGuard";var k=e=>{let{description:t,...n}=e;return jsxRuntime.jsxs(ui.Flex,{direction:"column",children:[jsxRuntime.jsx(ui.Button,{...n}),!!t&&jsxRuntime.jsx(ui.Box,{mt:4,className:"oui-leading-none",style:{lineHeight:0},children:jsxRuntime.jsx(ui.Text,{size:"2xs",intensity:36,children:t})})]})};var st=e=>{let{status:t,labels:n,description:i,dataSource:o,...d}=e,{state:g}=hooks.useAccount(),l=react.useMemo(()=>t===void 0?g.status===types.AccountStatusEnum.EnableTradingWithoutConnected?types.AccountStatusEnum.EnableTradingWithoutConnected:types.AccountStatusEnum.EnableTrading:t,[t,g.status]),u=reactApp.useDataTap(o,{accountStatus:l}),{wrongNetwork:s}=reactApp.useAppContext();return jsxRuntime.jsx(ui.DataTable,{dataSource:u,ignoreLoadingCheck:s||g.status<l||e.ignoreLoadingCheck,emptyView:jsxRuntime.jsx(at,{status:l,description:i,labels:n,className:e.classNames?.authGuardDescription,visible:!g.validating}),manualPagination:!0,...d})},at=e=>{let t={...j,...e.description};return e.visible?jsxRuntime.jsx(ui.Flex,{py:8,children:jsxRuntime.jsx(S,{status:e.status,labels:e.labels,descriptions:t,buttonProps:{size:"md"},children:jsxRuntime.jsx(ui.ExtensionSlot,{position:ui.ExtensionPositionEnum.EmptyDataIdentifier})})}):null};var se=e=>{let{hint:t={connectWallet:"Please connect wallet before starting to trade",signIn:"Please sign in before starting to trade",enableTrading:"Please sign in before starting to trade",wrongNetwork:"Please switch to a supported network to continue."},status:n}=e;return jsxRuntime.jsx(ui.Box,{my:8,children:jsxRuntime.jsx(S,{status:n,descriptions:{...t,switchChain:t.wrongNetwork},children:e.children||jsxRuntime.jsx(ui.EmptyDataState,{})})})};se.displayName="AuthGuardEmpty";var le=e=>{let{opactiy:t=90,tooltip:n={connectWallet:"Please connect wallet before set up",signIn:"Please sign in before set up",enableTrading:"Please enable trading before set up",wrongNetwork:"Please switch to a supported network to set up"}}=e,[i,o]=react.useState(!1),{state:d}=hooks.useAccount(),g=!0,{wrongNetwork:l}=reactApp.useAppContext(),u=react.useMemo(()=>{if(l)return n?.wrongNetwork;switch(d.status){case types.AccountStatusEnum.NotConnected:return n?.connectWallet;case types.AccountStatusEnum.NotSignedIn:return n?.signIn;case types.AccountStatusEnum.DisabledTrading:return n?.enableTrading;case types.AccountStatusEnum.EnableTrading:return "";default:return e.content}},[e.content,d,g,n]),s=react.useMemo(()=>{switch(d.status){case types.AccountStatusEnum.NotConnected:case types.AccountStatusEnum.NotSignedIn:return t;case types.AccountStatusEnum.EnableTrading:return;default:return}},[e.opactiy,d,g]);return jsxRuntime.jsx(ui.Tooltip,{open:u?i:!1,onOpenChange:o,content:u,className:"oui-text-2xs",align:e.align,alignOffset:e.alignOffset,side:e.side,sideOffset:e.sideOffset,children:jsxRuntime.jsx("div",{style:{opacity:s},children:e.children})})};le.displayName="AuthGuardTooltip";
+var V=e=>{let{title:t,description:n}=e;return jsxRuntime.jsxs(ui.Box,{position:"relative",className:"oui-pl-8",children:[jsxRuntime.jsxs(ui.Box,{children:[jsxRuntime.jsx(ui.Text,{as:"div",intensity:98,size:"sm",children:t}),jsxRuntime.jsx(ui.Text,{as:"div",intensity:54,size:"2xs",children:n})]}),jsxRuntime.jsx(me,{...e})]})},me=e=>{let{active:t,isLoading:n,isCompleted:i}=e;return jsxRuntime.jsx(ui.Match,{className:"oui-absolute oui-left-0 oui-top-1 oui-z-10",value:()=>i?"completed":n?"loading":t?"active":"normal",case:{loading:jsxRuntime.jsx("div",{children:jsxRuntime.jsx(ui.Spinner,{size:"sm",className:"oui-ml-1"})}),completed:jsxRuntime.jsx("div",{children:jsxRuntime.jsx(ui.CheckedCircleFillIcon,{opacity:1,className:"oui-text-primary"})})},default:jsxRuntime.jsx(fe,{active:!!t})})},fe=({active:e,className:t})=>jsxRuntime.jsx("div",{className:ui.cn("oui-w-[8.3px] oui-h-[8.3px] oui-rounded-full oui-ml-2 oui-mt-1",t,e?"oui-bg-primary-light":"oui-bg-base-2")});var B=e=>{let{initAccountState:t=types.AccountStatusEnum.NotConnected}=e,[n,i]=react.useState(true),o=hooks.useEventEmitter(),{state:d,account:g}=hooks.useAccount(),[l,u]=react.useState(t),[s,m]=react.useState(0),[a,f]=react.useState(false),[A]=hooks.useLocalStorage("orderly-first-show-wallet-connector-dialog",void 0);react.useEffect(()=>()=>{localStorage.setItem("orderly-first-show-wallet-connector-dialog","1");},[]),react.useEffect(()=>{u(d.status);},[d]);let T=react.useMemo(()=>{let r=[];return t<types.AccountStatusEnum.SignedIn&&r.push({key:"signIn",title:"Sign In",description:"Confirm you are the owner of this wallet"}),t<types.AccountStatusEnum.EnableTrading&&r.push({key:"enableTrading",title:"Enable Trading",description:"Enable secure access to our API for lightning fast trading"}),r},[t]),x=()=>(f(true),e.enableTrading(n).then(async r=>{f(false),m(C=>C+1);try{await e.enableTradingComplted?.();}catch{}typeof e.onCompleted=="function"?e.onCompleted():typeof e.close=="function"&&e.close();},r=>{if(f(false),r!==-1){if(r.message.indexOf("Signing off chain messages with Ledger is not yet supported")!==-1){o.emit("wallet:sign-message-with-ledger-error",{message:r.message,userAddress:g.address});return}ui.toast.error(Y(r));}}).catch(r=>{f(false);})),I=()=>(f(true),e.signIn().then(r=>{m(C=>C+1),x();},r=>{if(f(false),r!==-1){if(r.message.indexOf("Signing off chain messages with Ledger is not yet supported")!==-1){o.emit("wallet:sign-message-with-ledger-error",{message:r.message,userAddress:g.address});return}ui.toast.error(Y(r));}}).catch(r=>{f(false);}));return jsxRuntime.jsxs(ui.Box,{id:"oui-wallet-connect-dialog-content",className:"oui-font-semibold",children:[jsxRuntime.jsx(ui.Text,{intensity:54,size:"xs",children:"Your previous access has expired, you will receive a signature request to enable trading. Signing is free and will not send a transaction."}),jsxRuntime.jsxs(ui.Box,{p:4,my:6,intensity:600,r:"lg",className:"oui-space-y-5",position:"relative",children:[T.map((r,C)=>jsxRuntime.jsx(V,{title:r.title,description:r.description,isCompleted:s>C,active:s===C,isLoading:a&&s===C},r.key)),T.length>1&&jsxRuntime.jsx(ui.Box,{position:"absolute",height:"38px",left:28,top:18,zIndex:0,children:jsxRuntime.jsx(ui.Divider,{lineStyle:"dashed",direction:"vertical",intensity:16,className:"oui-h-full"})})]}),e.showRefCodeInput&&T.length==2&&jsxRuntime.jsx(Ae,{...e}),A&&jsxRuntime.jsxs(ui.Flex,{justify:"between",itemAlign:"center",children:[jsxRuntime.jsx(Ne,{}),jsxRuntime.jsx(ui.Switch,{color:"primary",checked:n,onCheckedChange:i,disabled:a,className:"data-[state=checked]:oui-bg-primary-darken"})]}),jsxRuntime.jsx(ui.Flex,{justify:"center",mt:8,children:jsxRuntime.jsx(ui.Box,{width:"45%",children:jsxRuntime.jsx(Ee,{state:l,signIn:I,enableTrading:x,loading:a,disabled:l>=types.AccountStatusEnum.EnableTrading})})})]})},Ee=({state:e,signIn:t,enableTrading:n,loading:i,disabled:o})=>jsxRuntime.jsx(ui.Match,{value:()=>e<=types.AccountStatusEnum.NotSignedIn?"signIn":"enableTrading",case:{signIn:jsxRuntime.jsx(ui.Button,{fullWidth:true,onClick:()=>t(),loading:i,disabled:o,children:"Sign In"}),enableTrading:jsxRuntime.jsx(ui.Button,{fullWidth:true,onClick:()=>n(),loading:i,disabled:o,children:"Enable Trading"})}}),Ae=e=>jsxRuntime.jsx(ui.TextField,{placeholder:"Referral code (Optional)",fullWidth:true,label:"",value:e.refCode,onChange:t=>{e.setRefCode(t.target.value);},classNames:{label:"oui-text-base-contrast-54 oui-text-xs",input:"placeholder:oui-text-base-contrast-20 placeholder:oui-text-sm"},formatters:[ui.inputFormatter.createRegexInputFormatter(/[^A-Z0-9]/g)],onClear:()=>{e.setRefCode("");},autoComplete:"off",helpText:e.helpText,className:"oui-mb-4",color:e.helpText?"danger":void 0}),Ne=()=>jsxRuntime.jsx(ui.Tooltip,{content:"Toggle this option to skip these steps next time you want to trade.",className:"oui-max-w-[300px]",children:jsxRuntime.jsx("button",{onClick:()=>{window.innerWidth>768||ui.modal.alert({title:"Remember me",message:jsxRuntime.jsx("span",{className:"oui-text-2xs oui-text-base-contrast/60",children:"Toggle this option to skip these steps next time you want to trade."})});},children:jsxRuntime.jsx(ui.Text,{intensity:54,size:"xs",className:"oui-underline oui-underline-offset-4 oui-decoration-dashed oui-decoration-base-contrast-36",children:"Remember me"})})});function Y(e){Object.keys(e).forEach(n=>{});let t="Something went wrong";return e.toString().includes("rejected")&&(t="User rejected the request."),ui.capitalizeFirstLetter(t)??t}var O=()=>{let{account:e,state:t,createOrderlyKey:n,createAccount:i}=hooks.useAccount(),[o,d]=react.useState(""),[g,l]=react.useState(""),{trigger:u}=hooks.useLazyQuery(`/v1/public/referral/verify_ref_code?referral_code=${o}`);react.useEffect(()=>{let w=localStorage.getItem("referral_code");w!=null&&d(w);},[]);let{referral_code:s,isLoading:m}=hooks.useGetReferralCode(e.accountId),[a,{error:f,isMutating:A}]=hooks.useMutation("/v1/referral/bind","POST");react.useEffect(()=>{o.length===0&&l("");},[o]);let T=()=>{ui.toast.success("Wallet connected"),o.length>=4&&o.length<=10&&a({referral_code:o}).finally(()=>{localStorage.removeItem("referral_code");});},x=async()=>{if(o.length===0)return Promise.resolve(void 0);if(o.length>0&&(o.length<4||o.length>10))return Promise.resolve("The referral_code must be 4 to 10 characters long, only accept upper case roman characters and numbers");let{exist:w}=await u();return w===false?Promise.resolve("This referral code does not exist."):Promise.resolve(void 0)},I=(s?.length||0)===0&&!m,r=async()=>{if(I){let w=await x();if(typeof w<"u")return l(w),Promise.reject(-1)}return l(""),i()};return {enableTrading:async w=>{if(I){let F=await x();if(typeof F<"u")return l(F),Promise.reject(-1)}return l(""),n(w)},initAccountState:t.status,signIn:r,enableTradingComplted:T,refCode:o,setRefCode:d,helpText:g,showRefCodeInput:I}};var v="walletConnector",R="walletConnectorSheet",G=e=>{let t=O();return jsxRuntime.jsx(B,{...t,...e})};ui.registerSimpleDialog(v,G,{size:"sm",title:"Connect wallet"});ui.registerSimpleSheet(R,G,{title:"Connect wallet"});var X={connectWallet:"Connect wallet",switchChain:"Wrong network",enableTrading:"Enable trading",signin:"Sign in"},j={connectWallet:"Please Connect wallet before starting to trade",switchChain:"Please switch to a supported network to continue",enableTrading:"Please Enable trading before starting to trade",signin:"Please sign in before starting to trade"};var S=e=>{let{status:t,buttonProps:n,fallback:i,descriptions:o,classNames:d,networkId:g,id:l,bridgeLessOnly:u}=e,{state:s}=hooks.useAccount(),{wrongNetwork:m}=reactApp.useAppContext(),a=react.useMemo(()=>t===void 0?s.status===types.AccountStatusEnum.EnableTradingWithoutConnected?types.AccountStatusEnum.EnableTradingWithoutConnected:types.AccountStatusEnum.EnableTrading:t,[t,s.status]),f={...X,...e.labels},A=react.useMemo(()=>typeof i<"u"?i({validating:s.validating,status:s.status,wrongNetwork:m}):s.validating?jsxRuntime.jsx(k,{angle:45,disabled:true,loading:true,description:o?.connectWallet,id:l,type:"button",...n,children:f.connectWallet}):jsxRuntime.jsx(Ze,{bridgeLessOnly:u,status:s.status,buttonProps:{...n,id:l,type:"button"},wrongNetwork:m,networkId:e.networkId,labels:f,descriptions:o}),[s.status,s.validating,n,m]);return jsxRuntime.jsx(ui.Either,{value:s.status>=a&&!m,left:A,children:e.children})},Ze=e=>{let{buttonProps:t,labels:n,descriptions:i}=e,{connectWallet:o}=reactApp.useAppContext(),{account:d}=hooks.useAccount(),{isMobile:g}=ui.useScreen(),l=hooks.useMediaQuery(types.MEDIA_TABLET),u=()=>{ui.modal.show(l?R:v).then(a=>{},a=>{});},s=async()=>{let a=await o();a&&(a.wrongNetwork?m():(a?.status??types.AccountStatusEnum.NotConnected)<types.AccountStatusEnum.EnableTrading&&u());},m=()=>{d.once("validate:end",a=>{a<types.AccountStatusEnum.EnableTrading?u():ui.toast.success("Wallet connected");}),ui.modal.show(g?uiChainSelector.ChainSelectorSheetId:uiChainSelector.ChainSelectorDialogId,{networkId:e.networkId,bridgeLessOnly:e.bridgeLessOnly}).then(a=>{a.wrongNetwork||e.status>=types.AccountStatusEnum.Connected&&(e.status<types.AccountStatusEnum.EnableTrading?u():ui.toast.success("Wallet connected"));},a=>{});};return e.wrongNetwork?jsxRuntime.jsx(k,{color:"warning",onClick:()=>{m();},description:i?.switchChain,...t,children:n.switchChain}):jsxRuntime.jsx(ui.Match,{value:e.status,case:a=>{if(a<=types.AccountStatusEnum.NotConnected)return jsxRuntime.jsx(k,{size:"lg",onClick:()=>{s();},variant:"gradient",angle:45,description:i?.connectWallet,...t,children:n.connectWallet});if(a<=types.AccountStatusEnum.NotSignedIn)return jsxRuntime.jsx(k,{size:"lg",onClick:()=>{u();},angle:45,description:i?.signin,...t,children:n.signin})},default:jsxRuntime.jsx(k,{size:"lg",description:i?.enableTrading,...t,onClick:()=>u(),children:n.enableTrading})})};S.displayName="AuthGuard";var k=e=>{let{description:t,...n}=e;return jsxRuntime.jsxs(ui.Flex,{direction:"column",children:[jsxRuntime.jsx(ui.Button,{...n}),!!t&&jsxRuntime.jsx(ui.Box,{mt:4,className:"oui-leading-none",style:{lineHeight:0},children:jsxRuntime.jsx(ui.Text,{size:"2xs",intensity:36,children:t})})]})};var st=e=>{let{status:t,labels:n,description:i,dataSource:o,...d}=e,{state:g}=hooks.useAccount(),l=react.useMemo(()=>t===void 0?g.status===types.AccountStatusEnum.EnableTradingWithoutConnected?types.AccountStatusEnum.EnableTradingWithoutConnected:types.AccountStatusEnum.EnableTrading:t,[t,g.status]),u=reactApp.useDataTap(o,{accountStatus:l}),{wrongNetwork:s}=reactApp.useAppContext();return jsxRuntime.jsx(ui.DataTable,{dataSource:u,ignoreLoadingCheck:s||g.status<l||e.ignoreLoadingCheck,emptyView:jsxRuntime.jsx(at,{status:l,description:i,labels:n,className:e.classNames?.authGuardDescription,visible:!g.validating}),manualPagination:true,...d})},at=e=>{let t={...j,...e.description};return e.visible?jsxRuntime.jsx(ui.Flex,{py:8,children:jsxRuntime.jsx(S,{status:e.status,labels:e.labels,descriptions:t,buttonProps:{size:"md"},children:jsxRuntime.jsx(ui.ExtensionSlot,{position:ui.ExtensionPositionEnum.EmptyDataIdentifier})})}):null};var se=e=>{let{hint:t={connectWallet:"Please connect wallet before starting to trade",signIn:"Please sign in before starting to trade",enableTrading:"Please sign in before starting to trade",wrongNetwork:"Please switch to a supported network to continue."},status:n}=e;return jsxRuntime.jsx(ui.Box,{my:8,children:jsxRuntime.jsx(S,{status:n,descriptions:{...t,switchChain:t.wrongNetwork},children:e.children||jsxRuntime.jsx(ui.EmptyDataState,{})})})};se.displayName="AuthGuardEmpty";var le=e=>{let{opactiy:t=90,tooltip:n={connectWallet:"Please connect wallet before set up",signIn:"Please sign in before set up",enableTrading:"Please enable trading before set up",wrongNetwork:"Please switch to a supported network to set up"}}=e,[i,o]=react.useState(false),{state:d}=hooks.useAccount(),g=true,{wrongNetwork:l}=reactApp.useAppContext(),u=react.useMemo(()=>{if(l)return n?.wrongNetwork;switch(d.status){case types.AccountStatusEnum.NotConnected:return n?.connectWallet;case types.AccountStatusEnum.NotSignedIn:return n?.signIn;case types.AccountStatusEnum.DisabledTrading:return n?.enableTrading;case types.AccountStatusEnum.EnableTrading:return "";default:return e.content}},[e.content,d,g,n]),s=react.useMemo(()=>{switch(d.status){case types.AccountStatusEnum.NotConnected:case types.AccountStatusEnum.NotSignedIn:return t;case types.AccountStatusEnum.EnableTrading:return;default:return}},[e.opactiy,d,g]);return jsxRuntime.jsx(ui.Tooltip,{open:u?i:false,onOpenChange:o,content:u,className:"oui-text-2xs",align:e.align,alignOffset:e.alignOffset,side:e.side,sideOffset:e.sideOffset,children:jsxRuntime.jsx("div",{style:{opacity:s},children:e.children})})};le.displayName="AuthGuardTooltip";
 
 exports.AuthGuard = S;
 exports.AuthGuardDataTable = st;

package/dist/index.mjs

@@ -1,12 +1,12 @@
 import { useState, useEffect, useMemo } from 'react';
-import { registerSimpleDialog, registerSimpleSheet, Box, Text, Divider, Flex, Switch, Match, Button, TextField, inputFormatter, Tooltip, modal, Either, useScreen, DataTable, ExtensionSlot, ExtensionPositionEnum, EmptyDataState, Spinner, CheckedCircleFillIcon, cn, toast, capitalizeFirstLetter } from '@orderly.network/ui';
+import { registerSimpleDialog, registerSimpleSheet, Box, Text, Divider, Flex, Switch, toast, TextField, inputFormatter, Tooltip, modal, Match, Button, CheckedCircleFillIcon, Spinner, capitalizeFirstLetter, cn, Either, useScreen, DataTable, ExtensionSlot, ExtensionPositionEnum, EmptyDataState } from '@orderly.network/ui';
 import { AccountStatusEnum, MEDIA_TABLET } from '@orderly.network/types';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useEventEmitter, useAccount, useLocalStorage, useLazyQuery, useGetReferralCode, useMutation, useMediaQuery } from '@orderly.network/hooks';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useAccount, useLazyQuery, useGetReferralCode, useMutation, useEventEmitter, useLocalStorage, useMediaQuery } from '@orderly.network/hooks';
 import { useAppContext, useDataTap } from '@orderly.network/react-app';
 import { ChainSelectorSheetId, ChainSelectorDialogId } from '@orderly.network/ui-chain-selector';
 
-var V=e=>{let{title:t,description:n}=e;return jsxs(Box,{position:"relative",className:"oui-pl-8",children:[jsxs(Box,{children:[jsx(Text,{as:"div",intensity:98,size:"sm",children:t}),jsx(Text,{as:"div",intensity:54,size:"2xs",children:n})]}),jsx(me,{...e})]})},me=e=>{let{active:t,isLoading:n,isCompleted:i}=e;return jsx(Match,{className:"oui-absolute oui-left-0 oui-top-1 oui-z-10",value:()=>i?"completed":n?"loading":t?"active":"normal",case:{loading:jsx("div",{children:jsx(Spinner,{size:"sm",className:"oui-ml-1"})}),completed:jsx("div",{children:jsx(CheckedCircleFillIcon,{opacity:1,className:"oui-text-primary"})})},default:jsx(fe,{active:!!t})})},fe=({active:e,className:t})=>jsx("div",{className:cn("oui-w-[8.3px] oui-h-[8.3px] oui-rounded-full oui-ml-2 oui-mt-1",t,e?"oui-bg-primary-light":"oui-bg-base-2")});var B=e=>{let{initAccountState:t=AccountStatusEnum.NotConnected}=e,[n,i]=useState(!0),o=useEventEmitter(),{state:d,account:g}=useAccount(),[l,u]=useState(t),[s,m]=useState(0),[a,f]=useState(!1),[A]=useLocalStorage("orderly-first-show-wallet-connector-dialog",void 0);useEffect(()=>()=>{localStorage.setItem("orderly-first-show-wallet-connector-dialog","1");},[]),useEffect(()=>{u(d.status);},[d]);let T=useMemo(()=>{let r=[];return t<AccountStatusEnum.SignedIn&&r.push({key:"signIn",title:"Sign In",description:"Confirm you are the owner of this wallet"}),t<AccountStatusEnum.EnableTrading&&r.push({key:"enableTrading",title:"Enable Trading",description:"Enable secure access to our API for lightning fast trading"}),r},[t]),x=()=>(f(!0),e.enableTrading(n).then(async r=>{f(!1),m(C=>C+1);try{await e.enableTradingComplted?.();}catch{}typeof e.onCompleted=="function"?e.onCompleted():typeof e.close=="function"&&e.close();},r=>{if(f(!1),r!==-1){if(r.message.indexOf("Signing off chain messages with Ledger is not yet supported")!==-1){o.emit("wallet:sign-message-with-ledger-error",{message:r.message,userAddress:g.address});return}toast.error(Y(r));}}).catch(r=>{f(!1);})),I=()=>(f(!0),e.signIn().then(r=>{m(C=>C+1),x();},r=>{if(f(!1),r!==-1){if(r.message.indexOf("Signing off chain messages with Ledger is not yet supported")!==-1){o.emit("wallet:sign-message-with-ledger-error",{message:r.message,userAddress:g.address});return}toast.error(Y(r));}}).catch(r=>{f(!1);}));return jsxs(Box,{id:"oui-wallet-connect-dialog-content",className:"oui-font-semibold",children:[jsx(Text,{intensity:54,size:"xs",children:"Your previous access has expired, you will receive a signature request to enable trading. Signing is free and will not send a transaction."}),jsxs(Box,{p:4,my:6,intensity:600,r:"lg",className:"oui-space-y-5",position:"relative",children:[T.map((r,C)=>jsx(V,{title:r.title,description:r.description,isCompleted:s>C,active:s===C,isLoading:a&&s===C},r.key)),T.length>1&&jsx(Box,{position:"absolute",height:"38px",left:28,top:18,zIndex:0,children:jsx(Divider,{lineStyle:"dashed",direction:"vertical",intensity:16,className:"oui-h-full"})})]}),e.showRefCodeInput&&T.length==2&&jsx(Ae,{...e}),A&&jsxs(Flex,{justify:"between",itemAlign:"center",children:[jsx(Ne,{}),jsx(Switch,{color:"primary",checked:n,onCheckedChange:i,disabled:a,className:"data-[state=checked]:oui-bg-primary-darken"})]}),jsx(Flex,{justify:"center",mt:8,children:jsx(Box,{width:"45%",children:jsx(Ee,{state:l,signIn:I,enableTrading:x,loading:a,disabled:l>=AccountStatusEnum.EnableTrading})})})]})},Ee=({state:e,signIn:t,enableTrading:n,loading:i,disabled:o})=>jsx(Match,{value:()=>e<=AccountStatusEnum.NotSignedIn?"signIn":"enableTrading",case:{signIn:jsx(Button,{fullWidth:!0,onClick:()=>t(),loading:i,disabled:o,children:"Sign In"}),enableTrading:jsx(Button,{fullWidth:!0,onClick:()=>n(),loading:i,disabled:o,children:"Enable Trading"})}}),Ae=e=>jsx(TextField,{placeholder:"Referral code (Optional)",fullWidth:!0,label:"",value:e.refCode,onChange:t=>{e.setRefCode(t.target.value);},classNames:{label:"oui-text-base-contrast-54 oui-text-xs",input:"placeholder:oui-text-base-contrast-20 placeholder:oui-text-sm"},formatters:[inputFormatter.createRegexInputFormatter(/[^A-Z0-9]/g)],onClear:()=>{e.setRefCode("");},autoComplete:"off",helpText:e.helpText,className:"oui-mb-4",color:e.helpText?"danger":void 0}),Ne=()=>jsx(Tooltip,{content:"Toggle this option to skip these steps next time you want to trade.",className:"oui-max-w-[300px]",children:jsx("button",{onClick:()=>{window.innerWidth>768||modal.alert({title:"Remember me",message:jsx("span",{className:"oui-text-2xs oui-text-base-contrast/60",children:"Toggle this option to skip these steps next time you want to trade."})});},children:jsx(Text,{intensity:54,size:"xs",className:"oui-underline oui-underline-offset-4 oui-decoration-dashed oui-decoration-base-contrast-36",children:"Remember me"})})});function Y(e){Object.keys(e).forEach(n=>{});let t="Something went wrong";return e.toString().includes("rejected")&&(t="User rejected the request."),capitalizeFirstLetter(t)??t}var O=()=>{let{account:e,state:t,createOrderlyKey:n,createAccount:i}=useAccount(),[o,d]=useState(""),[g,l]=useState(""),{trigger:u}=useLazyQuery(`/v1/public/referral/verify_ref_code?referral_code=${o}`);useEffect(()=>{let w=localStorage.getItem("referral_code");w!=null&&d(w);},[]);let{referral_code:s,isLoading:m}=useGetReferralCode(e.accountId),[a,{error:f,isMutating:A}]=useMutation("/v1/referral/bind","POST");useEffect(()=>{o.length===0&&l("");},[o]);let T=()=>{toast.success("Wallet connected"),o.length>=4&&o.length<=10&&a({referral_code:o}).finally(()=>{localStorage.removeItem("referral_code");});},x=async()=>{if(o.length===0)return Promise.resolve(void 0);if(o.length>0&&(o.length<4||o.length>10))return Promise.resolve("The referral_code must be 4 to 10 characters long, only accept upper case roman characters and numbers");let{exist:w}=await u();return w===!1?Promise.resolve("This referral code does not exist."):Promise.resolve(void 0)},I=(s?.length||0)===0&&!m,r=async()=>{if(I){let w=await x();if(typeof w<"u")return l(w),Promise.reject(-1)}return l(""),i()};return {enableTrading:async w=>{if(I){let F=await x();if(typeof F<"u")return l(F),Promise.reject(-1)}return l(""),n(w)},initAccountState:t.status,signIn:r,enableTradingComplted:T,refCode:o,setRefCode:d,helpText:g,showRefCodeInput:I}};var v="walletConnector",R="walletConnectorSheet",G=e=>{let t=O();return jsx(B,{...t,...e})};registerSimpleDialog(v,G,{size:"sm",title:"Connect wallet"});registerSimpleSheet(R,G,{title:"Connect wallet"});var X={connectWallet:"Connect wallet",switchChain:"Wrong network",enableTrading:"Enable trading",signin:"Sign in"},j={connectWallet:"Please Connect wallet before starting to trade",switchChain:"Please switch to a supported network to continue",enableTrading:"Please Enable trading before starting to trade",signin:"Please sign in before starting to trade"};var S=e=>{let{status:t,buttonProps:n,fallback:i,descriptions:o,classNames:d,networkId:g,id:l,bridgeLessOnly:u}=e,{state:s}=useAccount(),{wrongNetwork:m}=useAppContext(),a=useMemo(()=>t===void 0?s.status===AccountStatusEnum.EnableTradingWithoutConnected?AccountStatusEnum.EnableTradingWithoutConnected:AccountStatusEnum.EnableTrading:t,[t,s.status]),f={...X,...e.labels},A=useMemo(()=>typeof i<"u"?i({validating:s.validating,status:s.status,wrongNetwork:m}):s.validating?jsx(k,{angle:45,disabled:!0,loading:!0,description:o?.connectWallet,id:l,type:"button",...n,children:f.connectWallet}):jsx(Ze,{bridgeLessOnly:u,status:s.status,buttonProps:{...n,id:l,type:"button"},wrongNetwork:m,networkId:e.networkId,labels:f,descriptions:o}),[s.status,s.validating,n,m]);return jsx(Either,{value:s.status>=a&&!m,left:A,children:e.children})},Ze=e=>{let{buttonProps:t,labels:n,descriptions:i}=e,{connectWallet:o}=useAppContext(),{account:d}=useAccount(),{isMobile:g}=useScreen(),l=useMediaQuery(MEDIA_TABLET),u=()=>{modal.show(l?R:v).then(a=>{},a=>{});},s=async()=>{let a=await o();a&&(a.wrongNetwork?m():(a?.status??AccountStatusEnum.NotConnected)<AccountStatusEnum.EnableTrading&&u());},m=()=>{d.once("validate:end",a=>{a<AccountStatusEnum.EnableTrading?u():toast.success("Wallet connected");}),modal.show(g?ChainSelectorSheetId:ChainSelectorDialogId,{networkId:e.networkId,bridgeLessOnly:e.bridgeLessOnly}).then(a=>{a.wrongNetwork||e.status>=AccountStatusEnum.Connected&&(e.status<AccountStatusEnum.EnableTrading?u():toast.success("Wallet connected"));},a=>{});};return e.wrongNetwork?jsx(k,{color:"warning",onClick:()=>{m();},description:i?.switchChain,...t,children:n.switchChain}):jsx(Match,{value:e.status,case:a=>{if(a<=AccountStatusEnum.NotConnected)return jsx(k,{size:"lg",onClick:()=>{s();},variant:"gradient",angle:45,description:i?.connectWallet,...t,children:n.connectWallet});if(a<=AccountStatusEnum.NotSignedIn)return jsx(k,{size:"lg",onClick:()=>{u();},angle:45,description:i?.signin,...t,children:n.signin})},default:jsx(k,{size:"lg",description:i?.enableTrading,...t,onClick:()=>u(),children:n.enableTrading})})};S.displayName="AuthGuard";var k=e=>{let{description:t,...n}=e;return jsxs(Flex,{direction:"column",children:[jsx(Button,{...n}),!!t&&jsx(Box,{mt:4,className:"oui-leading-none",style:{lineHeight:0},children:jsx(Text,{size:"2xs",intensity:36,children:t})})]})};var st=e=>{let{status:t,labels:n,description:i,dataSource:o,...d}=e,{state:g}=useAccount(),l=useMemo(()=>t===void 0?g.status===AccountStatusEnum.EnableTradingWithoutConnected?AccountStatusEnum.EnableTradingWithoutConnected:AccountStatusEnum.EnableTrading:t,[t,g.status]),u=useDataTap(o,{accountStatus:l}),{wrongNetwork:s}=useAppContext();return jsx(DataTable,{dataSource:u,ignoreLoadingCheck:s||g.status<l||e.ignoreLoadingCheck,emptyView:jsx(at,{status:l,description:i,labels:n,className:e.classNames?.authGuardDescription,visible:!g.validating}),manualPagination:!0,...d})},at=e=>{let t={...j,...e.description};return e.visible?jsx(Flex,{py:8,children:jsx(S,{status:e.status,labels:e.labels,descriptions:t,buttonProps:{size:"md"},children:jsx(ExtensionSlot,{position:ExtensionPositionEnum.EmptyDataIdentifier})})}):null};var se=e=>{let{hint:t={connectWallet:"Please connect wallet before starting to trade",signIn:"Please sign in before starting to trade",enableTrading:"Please sign in before starting to trade",wrongNetwork:"Please switch to a supported network to continue."},status:n}=e;return jsx(Box,{my:8,children:jsx(S,{status:n,descriptions:{...t,switchChain:t.wrongNetwork},children:e.children||jsx(EmptyDataState,{})})})};se.displayName="AuthGuardEmpty";var le=e=>{let{opactiy:t=90,tooltip:n={connectWallet:"Please connect wallet before set up",signIn:"Please sign in before set up",enableTrading:"Please enable trading before set up",wrongNetwork:"Please switch to a supported network to set up"}}=e,[i,o]=useState(!1),{state:d}=useAccount(),g=!0,{wrongNetwork:l}=useAppContext(),u=useMemo(()=>{if(l)return n?.wrongNetwork;switch(d.status){case AccountStatusEnum.NotConnected:return n?.connectWallet;case AccountStatusEnum.NotSignedIn:return n?.signIn;case AccountStatusEnum.DisabledTrading:return n?.enableTrading;case AccountStatusEnum.EnableTrading:return "";default:return e.content}},[e.content,d,g,n]),s=useMemo(()=>{switch(d.status){case AccountStatusEnum.NotConnected:case AccountStatusEnum.NotSignedIn:return t;case AccountStatusEnum.EnableTrading:return;default:return}},[e.opactiy,d,g]);return jsx(Tooltip,{open:u?i:!1,onOpenChange:o,content:u,className:"oui-text-2xs",align:e.align,alignOffset:e.alignOffset,side:e.side,sideOffset:e.sideOffset,children:jsx("div",{style:{opacity:s},children:e.children})})};le.displayName="AuthGuardTooltip";
+var V=e=>{let{title:t,description:n}=e;return jsxs(Box,{position:"relative",className:"oui-pl-8",children:[jsxs(Box,{children:[jsx(Text,{as:"div",intensity:98,size:"sm",children:t}),jsx(Text,{as:"div",intensity:54,size:"2xs",children:n})]}),jsx(me,{...e})]})},me=e=>{let{active:t,isLoading:n,isCompleted:i}=e;return jsx(Match,{className:"oui-absolute oui-left-0 oui-top-1 oui-z-10",value:()=>i?"completed":n?"loading":t?"active":"normal",case:{loading:jsx("div",{children:jsx(Spinner,{size:"sm",className:"oui-ml-1"})}),completed:jsx("div",{children:jsx(CheckedCircleFillIcon,{opacity:1,className:"oui-text-primary"})})},default:jsx(fe,{active:!!t})})},fe=({active:e,className:t})=>jsx("div",{className:cn("oui-w-[8.3px] oui-h-[8.3px] oui-rounded-full oui-ml-2 oui-mt-1",t,e?"oui-bg-primary-light":"oui-bg-base-2")});var B=e=>{let{initAccountState:t=AccountStatusEnum.NotConnected}=e,[n,i]=useState(true),o=useEventEmitter(),{state:d,account:g}=useAccount(),[l,u]=useState(t),[s,m]=useState(0),[a,f]=useState(false),[A]=useLocalStorage("orderly-first-show-wallet-connector-dialog",void 0);useEffect(()=>()=>{localStorage.setItem("orderly-first-show-wallet-connector-dialog","1");},[]),useEffect(()=>{u(d.status);},[d]);let T=useMemo(()=>{let r=[];return t<AccountStatusEnum.SignedIn&&r.push({key:"signIn",title:"Sign In",description:"Confirm you are the owner of this wallet"}),t<AccountStatusEnum.EnableTrading&&r.push({key:"enableTrading",title:"Enable Trading",description:"Enable secure access to our API for lightning fast trading"}),r},[t]),x=()=>(f(true),e.enableTrading(n).then(async r=>{f(false),m(C=>C+1);try{await e.enableTradingComplted?.();}catch{}typeof e.onCompleted=="function"?e.onCompleted():typeof e.close=="function"&&e.close();},r=>{if(f(false),r!==-1){if(r.message.indexOf("Signing off chain messages with Ledger is not yet supported")!==-1){o.emit("wallet:sign-message-with-ledger-error",{message:r.message,userAddress:g.address});return}toast.error(Y(r));}}).catch(r=>{f(false);})),I=()=>(f(true),e.signIn().then(r=>{m(C=>C+1),x();},r=>{if(f(false),r!==-1){if(r.message.indexOf("Signing off chain messages with Ledger is not yet supported")!==-1){o.emit("wallet:sign-message-with-ledger-error",{message:r.message,userAddress:g.address});return}toast.error(Y(r));}}).catch(r=>{f(false);}));return jsxs(Box,{id:"oui-wallet-connect-dialog-content",className:"oui-font-semibold",children:[jsx(Text,{intensity:54,size:"xs",children:"Your previous access has expired, you will receive a signature request to enable trading. Signing is free and will not send a transaction."}),jsxs(Box,{p:4,my:6,intensity:600,r:"lg",className:"oui-space-y-5",position:"relative",children:[T.map((r,C)=>jsx(V,{title:r.title,description:r.description,isCompleted:s>C,active:s===C,isLoading:a&&s===C},r.key)),T.length>1&&jsx(Box,{position:"absolute",height:"38px",left:28,top:18,zIndex:0,children:jsx(Divider,{lineStyle:"dashed",direction:"vertical",intensity:16,className:"oui-h-full"})})]}),e.showRefCodeInput&&T.length==2&&jsx(Ae,{...e}),A&&jsxs(Flex,{justify:"between",itemAlign:"center",children:[jsx(Ne,{}),jsx(Switch,{color:"primary",checked:n,onCheckedChange:i,disabled:a,className:"data-[state=checked]:oui-bg-primary-darken"})]}),jsx(Flex,{justify:"center",mt:8,children:jsx(Box,{width:"45%",children:jsx(Ee,{state:l,signIn:I,enableTrading:x,loading:a,disabled:l>=AccountStatusEnum.EnableTrading})})})]})},Ee=({state:e,signIn:t,enableTrading:n,loading:i,disabled:o})=>jsx(Match,{value:()=>e<=AccountStatusEnum.NotSignedIn?"signIn":"enableTrading",case:{signIn:jsx(Button,{fullWidth:true,onClick:()=>t(),loading:i,disabled:o,children:"Sign In"}),enableTrading:jsx(Button,{fullWidth:true,onClick:()=>n(),loading:i,disabled:o,children:"Enable Trading"})}}),Ae=e=>jsx(TextField,{placeholder:"Referral code (Optional)",fullWidth:true,label:"",value:e.refCode,onChange:t=>{e.setRefCode(t.target.value);},classNames:{label:"oui-text-base-contrast-54 oui-text-xs",input:"placeholder:oui-text-base-contrast-20 placeholder:oui-text-sm"},formatters:[inputFormatter.createRegexInputFormatter(/[^A-Z0-9]/g)],onClear:()=>{e.setRefCode("");},autoComplete:"off",helpText:e.helpText,className:"oui-mb-4",color:e.helpText?"danger":void 0}),Ne=()=>jsx(Tooltip,{content:"Toggle this option to skip these steps next time you want to trade.",className:"oui-max-w-[300px]",children:jsx("button",{onClick:()=>{window.innerWidth>768||modal.alert({title:"Remember me",message:jsx("span",{className:"oui-text-2xs oui-text-base-contrast/60",children:"Toggle this option to skip these steps next time you want to trade."})});},children:jsx(Text,{intensity:54,size:"xs",className:"oui-underline oui-underline-offset-4 oui-decoration-dashed oui-decoration-base-contrast-36",children:"Remember me"})})});function Y(e){Object.keys(e).forEach(n=>{});let t="Something went wrong";return e.toString().includes("rejected")&&(t="User rejected the request."),capitalizeFirstLetter(t)??t}var O=()=>{let{account:e,state:t,createOrderlyKey:n,createAccount:i}=useAccount(),[o,d]=useState(""),[g,l]=useState(""),{trigger:u}=useLazyQuery(`/v1/public/referral/verify_ref_code?referral_code=${o}`);useEffect(()=>{let w=localStorage.getItem("referral_code");w!=null&&d(w);},[]);let{referral_code:s,isLoading:m}=useGetReferralCode(e.accountId),[a,{error:f,isMutating:A}]=useMutation("/v1/referral/bind","POST");useEffect(()=>{o.length===0&&l("");},[o]);let T=()=>{toast.success("Wallet connected"),o.length>=4&&o.length<=10&&a({referral_code:o}).finally(()=>{localStorage.removeItem("referral_code");});},x=async()=>{if(o.length===0)return Promise.resolve(void 0);if(o.length>0&&(o.length<4||o.length>10))return Promise.resolve("The referral_code must be 4 to 10 characters long, only accept upper case roman characters and numbers");let{exist:w}=await u();return w===false?Promise.resolve("This referral code does not exist."):Promise.resolve(void 0)},I=(s?.length||0)===0&&!m,r=async()=>{if(I){let w=await x();if(typeof w<"u")return l(w),Promise.reject(-1)}return l(""),i()};return {enableTrading:async w=>{if(I){let F=await x();if(typeof F<"u")return l(F),Promise.reject(-1)}return l(""),n(w)},initAccountState:t.status,signIn:r,enableTradingComplted:T,refCode:o,setRefCode:d,helpText:g,showRefCodeInput:I}};var v="walletConnector",R="walletConnectorSheet",G=e=>{let t=O();return jsx(B,{...t,...e})};registerSimpleDialog(v,G,{size:"sm",title:"Connect wallet"});registerSimpleSheet(R,G,{title:"Connect wallet"});var X={connectWallet:"Connect wallet",switchChain:"Wrong network",enableTrading:"Enable trading",signin:"Sign in"},j={connectWallet:"Please Connect wallet before starting to trade",switchChain:"Please switch to a supported network to continue",enableTrading:"Please Enable trading before starting to trade",signin:"Please sign in before starting to trade"};var S=e=>{let{status:t,buttonProps:n,fallback:i,descriptions:o,classNames:d,networkId:g,id:l,bridgeLessOnly:u}=e,{state:s}=useAccount(),{wrongNetwork:m}=useAppContext(),a=useMemo(()=>t===void 0?s.status===AccountStatusEnum.EnableTradingWithoutConnected?AccountStatusEnum.EnableTradingWithoutConnected:AccountStatusEnum.EnableTrading:t,[t,s.status]),f={...X,...e.labels},A=useMemo(()=>typeof i<"u"?i({validating:s.validating,status:s.status,wrongNetwork:m}):s.validating?jsx(k,{angle:45,disabled:true,loading:true,description:o?.connectWallet,id:l,type:"button",...n,children:f.connectWallet}):jsx(Ze,{bridgeLessOnly:u,status:s.status,buttonProps:{...n,id:l,type:"button"},wrongNetwork:m,networkId:e.networkId,labels:f,descriptions:o}),[s.status,s.validating,n,m]);return jsx(Either,{value:s.status>=a&&!m,left:A,children:e.children})},Ze=e=>{let{buttonProps:t,labels:n,descriptions:i}=e,{connectWallet:o}=useAppContext(),{account:d}=useAccount(),{isMobile:g}=useScreen(),l=useMediaQuery(MEDIA_TABLET),u=()=>{modal.show(l?R:v).then(a=>{},a=>{});},s=async()=>{let a=await o();a&&(a.wrongNetwork?m():(a?.status??AccountStatusEnum.NotConnected)<AccountStatusEnum.EnableTrading&&u());},m=()=>{d.once("validate:end",a=>{a<AccountStatusEnum.EnableTrading?u():toast.success("Wallet connected");}),modal.show(g?ChainSelectorSheetId:ChainSelectorDialogId,{networkId:e.networkId,bridgeLessOnly:e.bridgeLessOnly}).then(a=>{a.wrongNetwork||e.status>=AccountStatusEnum.Connected&&(e.status<AccountStatusEnum.EnableTrading?u():toast.success("Wallet connected"));},a=>{});};return e.wrongNetwork?jsx(k,{color:"warning",onClick:()=>{m();},description:i?.switchChain,...t,children:n.switchChain}):jsx(Match,{value:e.status,case:a=>{if(a<=AccountStatusEnum.NotConnected)return jsx(k,{size:"lg",onClick:()=>{s();},variant:"gradient",angle:45,description:i?.connectWallet,...t,children:n.connectWallet});if(a<=AccountStatusEnum.NotSignedIn)return jsx(k,{size:"lg",onClick:()=>{u();},angle:45,description:i?.signin,...t,children:n.signin})},default:jsx(k,{size:"lg",description:i?.enableTrading,...t,onClick:()=>u(),children:n.enableTrading})})};S.displayName="AuthGuard";var k=e=>{let{description:t,...n}=e;return jsxs(Flex,{direction:"column",children:[jsx(Button,{...n}),!!t&&jsx(Box,{mt:4,className:"oui-leading-none",style:{lineHeight:0},children:jsx(Text,{size:"2xs",intensity:36,children:t})})]})};var st=e=>{let{status:t,labels:n,description:i,dataSource:o,...d}=e,{state:g}=useAccount(),l=useMemo(()=>t===void 0?g.status===AccountStatusEnum.EnableTradingWithoutConnected?AccountStatusEnum.EnableTradingWithoutConnected:AccountStatusEnum.EnableTrading:t,[t,g.status]),u=useDataTap(o,{accountStatus:l}),{wrongNetwork:s}=useAppContext();return jsx(DataTable,{dataSource:u,ignoreLoadingCheck:s||g.status<l||e.ignoreLoadingCheck,emptyView:jsx(at,{status:l,description:i,labels:n,className:e.classNames?.authGuardDescription,visible:!g.validating}),manualPagination:true,...d})},at=e=>{let t={...j,...e.description};return e.visible?jsx(Flex,{py:8,children:jsx(S,{status:e.status,labels:e.labels,descriptions:t,buttonProps:{size:"md"},children:jsx(ExtensionSlot,{position:ExtensionPositionEnum.EmptyDataIdentifier})})}):null};var se=e=>{let{hint:t={connectWallet:"Please connect wallet before starting to trade",signIn:"Please sign in before starting to trade",enableTrading:"Please sign in before starting to trade",wrongNetwork:"Please switch to a supported network to continue."},status:n}=e;return jsx(Box,{my:8,children:jsx(S,{status:n,descriptions:{...t,switchChain:t.wrongNetwork},children:e.children||jsx(EmptyDataState,{})})})};se.displayName="AuthGuardEmpty";var le=e=>{let{opactiy:t=90,tooltip:n={connectWallet:"Please connect wallet before set up",signIn:"Please sign in before set up",enableTrading:"Please enable trading before set up",wrongNetwork:"Please switch to a supported network to set up"}}=e,[i,o]=useState(false),{state:d}=useAccount(),g=true,{wrongNetwork:l}=useAppContext(),u=useMemo(()=>{if(l)return n?.wrongNetwork;switch(d.status){case AccountStatusEnum.NotConnected:return n?.connectWallet;case AccountStatusEnum.NotSignedIn:return n?.signIn;case AccountStatusEnum.DisabledTrading:return n?.enableTrading;case AccountStatusEnum.EnableTrading:return "";default:return e.content}},[e.content,d,g,n]),s=useMemo(()=>{switch(d.status){case AccountStatusEnum.NotConnected:case AccountStatusEnum.NotSignedIn:return t;case AccountStatusEnum.EnableTrading:return;default:return}},[e.opactiy,d,g]);return jsx(Tooltip,{open:u?i:false,onOpenChange:o,content:u,className:"oui-text-2xs",align:e.align,alignOffset:e.alignOffset,side:e.side,sideOffset:e.sideOffset,children:jsx("div",{style:{opacity:s},children:e.children})})};le.displayName="AuthGuardTooltip";
 
 export { S as AuthGuard, st as AuthGuardDataTable, se as AuthGuardEmpty, le as AuthGuardTooltip, B as WalletConnectContent, v as WalletConnectorModalId, R as WalletConnectorSheetId, G as WalletConnectorWidget, O as useWalletConnectorBuilder };
 //# sourceMappingURL=out.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orderly.network/ui-connector",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -17,11 +17,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@orderly.network/hooks": "2.0.3",
-    "@orderly.network/ui": "2.0.3",
-    "@orderly.network/types": "2.0.3",
-    "@orderly.network/ui-chain-selector": "2.0.3",
-    "@orderly.network/react-app": "2.0.3"
+    "@orderly.network/types": "2.0.4",
+    "@orderly.network/ui-chain-selector": "2.0.4",
+    "@orderly.network/ui": "2.0.4",
+    "@orderly.network/hooks": "2.0.4",
+    "@orderly.network/react-app": "2.0.4"
   },
   "devDependencies": {
     "@types/react": "^18.3.2",
@@ -30,7 +30,7 @@
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.4.4",
     "tsup": "^7.3.0",
-    "tsconfig": "0.3.19"
+    "tsconfig": "0.3.20"
   },
   "peerDependencies": {
     "react": ">=18",