@orderly.network/ui-connector/dist/index.js

'use strict';

var react = require('react');
var ui = require('@orderly.network/ui');
var types = require('@orderly.network/types');
var jsxRuntime = require('react/jsx-runtime');
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(true),o=hooks.useEventEmitter(),{state:u,account:g}=hooks.useAccount(),[c,d]=react.useState(t),[r,m]=react.useState(0),[s,p]=react.useState(false),[x]=hooks.useLocalStorage("orderly-first-show-wallet-connector-dialog",void 0);react.useEffect(()=>()=>{localStorage.setItem("orderly-first-show-wallet-connector-dialog","1");},[]),react.useEffect(()=>{d(u.status);},[u]);let y=react.useMemo(()=>{let a=[];return t<types.AccountStatusEnum.SignedIn&&a.push({key:"signIn",title:"Sign In",description:"Confirm you are the owner of this wallet"}),t<types.AccountStatusEnum.EnableTrading&&a.push({key:"enableTrading",title:"Enable Trading",description:"Enable secure access to our API for lightning fast trading"}),a},[t]),I=()=>(p(true),e.enableTrading(n).then(async a=>{p(false),m(C=>C+1);try{await e.enableTradingComplted?.();}catch{}typeof e.onCompleted=="function"?e.onCompleted():typeof e.close=="function"&&e.close();},a=>{if(p(false),a!==-1){if(a.message.indexOf("Signing off chain messages with Ledger is not yet supported")!==-1){o.emit("wallet:sign-message-with-ledger-error",{message:a.message,userAddress:g.address});return}ui.toast.error(Y(a));}}).catch(a=>{p(false);})),P=()=>(p(true),e.signIn().then(a=>{m(C=>C+1),I();},a=>{if(p(false),a!==-1){if(a.message.indexOf("Signing off chain messages with Ledger is not yet supported")!==-1){o.emit("wallet:sign-message-with-ledger-error",{message:a.message,userAddress:g.address});return}ui.toast.error(Y(a));}}).catch(a=>{p(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:[y.map((a,C)=>jsxRuntime.jsx(V,{title:a.title,description:a.description,isCompleted:r>C,active:r===C,isLoading:s&&r===C},a.key)),y.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&&y.length==2&&jsxRuntime.jsx(Ae,{...e}),x&&jsxRuntime.jsxs(ui.Flex,{justify:"between",itemAlign:"center",children:[jsxRuntime.jsx(Ne,{}),jsxRuntime.jsx(ui.Switch,{color:"primary",checked:n,onCheckedChange:i,disabled:s,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:c,signIn:P,enableTrading:I,loading:s,disabled:c>=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 L=()=>{let{account:e,state:t,createOrderlyKey:n,createAccount:i}=hooks.useAccount(),[o,u]=react.useState(""),[g,c]=react.useState(""),{trigger:d}=hooks.useLazyQuery(`/v1/public/referral/verify_ref_code?referral_code=${o}`);react.useEffect(()=>{let w=localStorage.getItem("referral_code");w!=null&&u(w);},[]);let{referral_code:r,isLoading:m}=hooks.useGetReferralCode(e.accountId),[s,{error:p,isMutating:x}]=hooks.useMutation("/v1/referral/bind","POST");react.useEffect(()=>{o.length===0&&c("");},[o]);let y=()=>{ui.toast.success("Wallet connected"),o.length>=4&&o.length<=10&&s({referral_code:o}).finally(()=>{localStorage.removeItem("referral_code");});},I=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 d();return w===false?Promise.resolve("This referral code does not exist."):Promise.resolve(void 0)},P=(r?.length||0)===0&&!m,a=async()=>{if(P){let w=await I();if(typeof w<"u")return c(w),Promise.reject(-1)}return c(""),i()};return {enableTrading:async w=>{if(P){let F=await I();if(typeof F<"u")return c(F),Promise.reject(-1)}return c(""),n(w)},initAccountState:t.status,signIn:a,enableTradingComplted:y,refCode:o,setRefCode:u,helpText:g,showRefCodeInput:P}};var v="walletConnector",R="walletConnectorSheet",O=e=>{let t=L();return jsxRuntime.jsx(B,{...t,...e})};ui.registerSimpleDialog(v,O,{size:"sm",title:"Connect wallet"});ui.registerSimpleSheet(R,O,{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 T=e=>{let{status:t,buttonProps:n,fallback:i,descriptions:o,classNames:u,networkId:g,id:c,bridgeLessOnly:d}=e,{state:r}=hooks.useAccount(),{wrongNetwork:m,disabledConnect:s}=reactApp.useAppContext(),p=react.useMemo(()=>t===void 0?r.status===types.AccountStatusEnum.EnableTradingWithoutConnected?types.AccountStatusEnum.EnableTradingWithoutConnected:types.AccountStatusEnum.EnableTrading:t,[t,r.status]),x={...X,...e.labels},y=react.useMemo(()=>typeof i<"u"?i({validating:r.validating,status:r.status,wrongNetwork:m}):r.validating&&!s?jsxRuntime.jsx(E,{angle:45,disabled:true,loading:true,description:o?.connectWallet,id:c,type:"button",...n,children:x.connectWallet}):jsxRuntime.jsx(Ze,{bridgeLessOnly:d,status:r.status,buttonProps:{...n,id:c,type:"button"},wrongNetwork:m,networkId:e.networkId,labels:x,descriptions:o,disabledConnect:s}),[r.status,r.validating,n,m]);return jsxRuntime.jsx(ui.Either,{value:r.status>=p&&!m&&!s,left:y,children:e.children})},Ze=e=>{let{buttonProps:t,labels:n,descriptions:i}=e,{connectWallet:o}=reactApp.useAppContext(),{account:u}=hooks.useAccount(),{isMobile:g}=ui.useScreen(),c=hooks.useMediaQuery(types.MEDIA_TABLET),d=()=>{ui.modal.show(c?R:v).then(s=>{},s=>{});},r=async()=>{let s=await o();s&&(s.wrongNetwork?m():(s?.status??types.AccountStatusEnum.NotConnected)<types.AccountStatusEnum.EnableTrading&&d());},m=()=>{u.once("validate:end",s=>{s<types.AccountStatusEnum.EnableTrading?d():ui.toast.success("Wallet connected");}),ui.modal.show(g?uiChainSelector.ChainSelectorSheetId:uiChainSelector.ChainSelectorDialogId,{networkId:e.networkId,bridgeLessOnly:e.bridgeLessOnly}).then(s=>{s.wrongNetwork||e.status>=types.AccountStatusEnum.Connected&&(e.status<types.AccountStatusEnum.EnableTrading?d():ui.toast.success("Wallet connected"));},s=>{});};return e.wrongNetwork&&!e.disabledConnect?jsxRuntime.jsx(E,{color:"warning",onClick:()=>{m();},description:i?.switchChain,...t,children:n.switchChain}):jsxRuntime.jsx(ui.Match,{value:e.status,case:s=>{if(s<=types.AccountStatusEnum.NotConnected||e.disabledConnect)return jsxRuntime.jsx(E,{size:"lg",onClick:()=>{r();},variant:e.disabledConnect?void 0:"gradient",angle:45,description:i?.connectWallet,disabled:e.disabledConnect,...t,children:n.connectWallet});if(s<=types.AccountStatusEnum.NotSignedIn)return jsxRuntime.jsx(E,{size:"lg",onClick:()=>{d();},angle:45,description:i?.signin,...t,children:n.signin})},default:jsxRuntime.jsx(E,{size:"lg",description:i?.enableTrading,...t,onClick:()=>d(),children:n.enableTrading})})};T.displayName="AuthGuard";var E=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 rt=e=>{let{status:t,labels:n,description:i,dataSource:o,...u}=e,{state:g}=hooks.useAccount(),{wrongNetwork:c,disabledConnect:d}=reactApp.useAppContext(),r=react.useMemo(()=>t===void 0?g.status===types.AccountStatusEnum.EnableTradingWithoutConnected?types.AccountStatusEnum.EnableTradingWithoutConnected:types.AccountStatusEnum.EnableTrading:t,[t,g.status]),m=reactApp.useDataTap(o,{accountStatus:r}),s=c||d||g.status<r||e.ignoreLoadingCheck;return jsxRuntime.jsx(ui.DataTable,{dataSource:m,ignoreLoadingCheck:s,emptyView:jsxRuntime.jsx(at,{status:r,description:i,labels:n,className:e.classNames?.authGuardDescription,visible:!g.validating}),manualPagination:true,...u})},at=e=>{let t={...j,...e.description};return e.visible?jsxRuntime.jsx(ui.Flex,{py:8,children:jsxRuntime.jsx(T,{status:e.status,labels:e.labels,descriptions:t,buttonProps:{size:"md"},children:jsxRuntime.jsx(ui.ExtensionSlot,{position:ui.ExtensionPositionEnum.EmptyDataIdentifier})})}):null};var re=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(T,{status:n,descriptions:{...t,switchChain:t.wrongNetwork},children:e.children||jsxRuntime.jsx(ui.EmptyDataState,{})})})};re.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:u}=hooks.useAccount(),g=true,{wrongNetwork:c}=reactApp.useAppContext(),d=react.useMemo(()=>{if(c)return n?.wrongNetwork;switch(u.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,u,g,n]),r=react.useMemo(()=>{switch(u.status){case types.AccountStatusEnum.NotConnected:case types.AccountStatusEnum.NotSignedIn:return t;case types.AccountStatusEnum.EnableTrading:return;default:return}},[e.opactiy,u,g]);return jsxRuntime.jsx(ui.Tooltip,{open:d?i:false,onOpenChange:o,content:d,className:"oui-text-2xs",align:e.align,alignOffset:e.alignOffset,side:e.side,sideOffset:e.sideOffset,children:jsxRuntime.jsx("div",{style:{opacity:r},children:e.children})})};le.displayName="AuthGuardTooltip";

exports.AuthGuard = T;
exports.AuthGuardDataTable = rt;
exports.AuthGuardEmpty = re;
exports.AuthGuardTooltip = le;
exports.WalletConnectContent = B;
exports.WalletConnectorModalId = v;
exports.WalletConnectorSheetId = R;
exports.WalletConnectorWidget = O;
exports.useWalletConnectorBuilder = L;
//# sourceMappingURL=out.js.map
//# sourceMappingURL=index.js.map