@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 i18n = require('@orderly.network/i18n');
var reactApp = require('@orderly.network/react-app');
var uiChainSelector = require('@orderly.network/ui-chain-selector');

var Q=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(he,{...e})]})},he=e=>{let{active:t,isLoading:n,isCompleted:o}=e;return jsxRuntime.jsx(ui.Match,{className:"oui-absolute oui-left-0 oui-top-1 oui-z-10",value:()=>o?"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(be,{active:!!t})})},be=({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 O=e=>{let{initAccountState:t=types.AccountStatusEnum.NotConnected}=e,[n,o]=react.useState(true),r=hooks.useEventEmitter(),{t:c}=i18n.useTranslation(),{state:g,account:d}=hooks.useAccount(),[m,a]=react.useState(t),[l,f]=react.useState(0),[s,h]=react.useState(false),[I]=hooks.useLocalStorage("orderly-first-show-wallet-connector-dialog",void 0);react.useEffect(()=>()=>{localStorage.setItem("orderly-first-show-wallet-connector-dialog","1");},[]),react.useEffect(()=>{a(g.status);},[g]);let T=react.useMemo(()=>{let i=[];return t<types.AccountStatusEnum.SignedIn&&i.push({key:"signIn",title:c("connector.signIn"),description:c("connector.signIn.description")}),t<types.AccountStatusEnum.EnableTrading&&i.push({key:"enableTrading",title:c("connector.enableTrading"),description:c("connector.enableTrading.description")}),i},[t,c]),k=()=>(h(true),e.enableTrading(n).then(async i=>{h(false),f(w=>w+1);try{await e.enableTradingComplted?.();}catch{}typeof e.onCompleted=="function"?e.onCompleted():typeof e.close=="function"&&e.close();},i=>{if(h(false),i!==-1){if(i.message.indexOf("Signing off chain messages with Ledger is not yet supported")!==-1){r.emit("wallet:sign-message-with-ledger-error",{message:i.message,userAddress:d.address});return}ui.toast.error(X(i));}}).catch(i=>{h(false);})),W=()=>(h(true),e.signIn().then(i=>{f(w=>w+1),k();},i=>{if(h(false),i!==-1){if(i.message.indexOf("Signing off chain messages with Ledger is not yet supported")!==-1){r.emit("wallet:sign-message-with-ledger-error",{message:i.message,userAddress:d.address});return}ui.toast.error(X(i));}}).catch(i=>{h(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:c("connector.expired")}),jsxRuntime.jsxs(ui.Box,{p:4,my:6,intensity:600,r:"lg",className:"oui-space-y-5",position:"relative",children:[T.map((i,w)=>jsxRuntime.jsx(Q,{title:i.title,description:i.description,isCompleted:l>w,active:l===w,isLoading:s&&l===w},i.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(ve,{...e}),I&&jsxRuntime.jsxs(ui.Flex,{justify:"between",itemAlign:"center",children:[jsxRuntime.jsx(Me,{}),jsxRuntime.jsx(ui.Switch,{color:"primary",checked:n,onCheckedChange:o,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:m,signIn:W,enableTrading:k,loading:s,disabled:m>=types.AccountStatusEnum.EnableTrading})})})]})},Ee=({state:e,signIn:t,enableTrading:n,loading:o,disabled:r})=>{let{t:c}=i18n.useTranslation();return jsxRuntime.jsx(ui.Match,{value:()=>e<=types.AccountStatusEnum.NotSignedIn?"signIn":"enableTrading",case:{signIn:jsxRuntime.jsx(ui.Button,{fullWidth:true,onClick:()=>t(),loading:o,disabled:r,children:c("connector.signIn")}),enableTrading:jsxRuntime.jsx(ui.Button,{fullWidth:true,onClick:()=>n(),loading:o,disabled:r,children:c("connector.enableTrading")})}})},ve=e=>{let{t}=i18n.useTranslation();return jsxRuntime.jsx(ui.TextField,{placeholder:t("connector.referralCode.placeholder"),fullWidth:true,label:"",value:e.refCode,onChange:n=>{e.setRefCode(n.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})},Me=()=>{let{t:e}=i18n.useTranslation(),t=()=>{window.innerWidth>768||ui.modal.alert({title:e("connector.rememberMe"),message:jsxRuntime.jsx("span",{className:"oui-text-2xs oui-text-base-contrast/60",children:e("connector.rememberMe.description")})});};return jsxRuntime.jsx(ui.Tooltip,{content:e("connector.rememberMe.description"),className:"oui-max-w-[300px]",children:jsxRuntime.jsx("button",{onClick:t,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:e("connector.rememberMe")})})})};function X(e){Object.keys(e).forEach(n=>{});let t=i18n.i18n.t("connector.somethingWentWrong");return e.toString().includes("rejected")&&(t=i18n.i18n.t("connector.userRejected")),ui.capitalizeFirstLetter(t)??t}var L=()=>{let{account:e,state:t,createOrderlyKey:n,createAccount:o}=hooks.useAccount(),[r,c]=react.useState(""),[g,d]=react.useState(""),{t:m}=i18n.useTranslation(),{trigger:a}=hooks.useLazyQuery(`/v1/public/referral/verify_ref_code?referral_code=${r}`);react.useEffect(()=>{let y=localStorage.getItem("referral_code");y!=null&&c(y);},[]);let{referral_code:l,isLoading:f}=hooks.useGetReferralCode(e.accountId),[s,{error:h,isMutating:I}]=hooks.useMutation("/v1/referral/bind","POST");react.useEffect(()=>{r.length===0&&d("");},[r]);let T=()=>{ui.toast.success(m("connector.walletConnected")),r.length>=4&&r.length<=10&&s({referral_code:r}).finally(()=>{localStorage.removeItem("referral_code");});},k=async()=>{if(r.length===0)return Promise.resolve(void 0);if(r.length>0&&(r.length<4||r.length>10))return Promise.resolve(m("connector.referralCode.invalid"));let{exist:y}=await a();return y===false?Promise.resolve(m("connector.referralCode.notExist")):Promise.resolve(void 0)},W=(l?.length||0)===0&&!f,i=async()=>{if(W){let y=await k();if(typeof y<"u")return d(y),Promise.reject(-1)}return d(""),o()};return {enableTrading:async y=>{if(W){let _=await k();if(typeof _<"u")return d(_),Promise.reject(-1)}return d(""),n(y)},initAccountState:t.status,signIn:i,enableTradingComplted:T,refCode:r,setRefCode:c,helpText:g,showRefCodeInput:W}};var B="walletConnector",G="walletConnectorSheet",D=e=>{let t=L();return jsxRuntime.jsx(O,{...t,...e})};ui.registerSimpleDialog(B,D,{size:"sm",title:()=>i18n.i18n.t("connector.connectWallet")});ui.registerSimpleSheet(G,D,{title:()=>i18n.i18n.t("connector.connectWallet")});var S=e=>{let{status:t,buttonProps:n,fallback:o,descriptions:r,classNames:c,networkId:g,id:d,bridgeLessOnly:m}=e,{t:a}=i18n.useTranslation(),{state:l}=hooks.useAccount(),{wrongNetwork:f,disabledConnect:s}=reactApp.useAppContext(),h=react.useMemo(()=>t===void 0?l.status===types.AccountStatusEnum.EnableTradingWithoutConnected?types.AccountStatusEnum.EnableTradingWithoutConnected:types.AccountStatusEnum.EnableTrading:t,[t,l.status]),I={connectWallet:a("connector.connectWallet"),switchChain:a("connector.wrongNetwork"),enableTrading:a("connector.enableTrading"),signin:a("connector.signIn"),...e.labels},T=react.useMemo(()=>typeof o<"u"?o({validating:l.validating,status:l.status,wrongNetwork:f}):l.validating&&!s?jsxRuntime.jsx(A,{angle:45,disabled:true,loading:true,description:r?.connectWallet,id:d,type:"button",...n,children:I.connectWallet}):jsxRuntime.jsx(je,{bridgeLessOnly:m,status:l.status,buttonProps:{...n,id:d,type:"button"},wrongNetwork:f,networkId:e.networkId,labels:I,descriptions:r,disabledConnect:s}),[l.status,l.validating,n,f]);return jsxRuntime.jsx(ui.Either,{value:l.status>=h&&!f&&!s,left:T,children:e.children})},je=e=>{let{buttonProps:t,labels:n,descriptions:o}=e,{t:r}=i18n.useTranslation(),{connectWallet:c}=reactApp.useAppContext(),{account:g}=hooks.useAccount(),{isMobile:d}=ui.useScreen(),m=hooks.useMediaQuery(types.MEDIA_TABLET),a=()=>{ui.modal.show(m?G:B).then(s=>{},s=>{});},l=async()=>{let s=await c();s&&(s.wrongNetwork?f():(s?.status??types.AccountStatusEnum.NotConnected)<types.AccountStatusEnum.EnableTrading&&a());},f=()=>{g.once("validate:end",s=>{s<types.AccountStatusEnum.EnableTrading?a():ui.toast.success(r("connector.walletConnected"));}),ui.modal.show(d?uiChainSelector.ChainSelectorSheetId:uiChainSelector.ChainSelectorDialogId,{networkId:e.networkId,bridgeLessOnly:e.bridgeLessOnly}).then(s=>{s.wrongNetwork||e.status>=types.AccountStatusEnum.Connected&&(e.status<types.AccountStatusEnum.EnableTrading?a():ui.toast.success(r("connector.walletConnected")));},s=>{});};return e.wrongNetwork&&!e.disabledConnect?jsxRuntime.jsx(A,{color:"warning",onClick:()=>{f();},description:o?.switchChain,...t,children:n.switchChain}):jsxRuntime.jsx(ui.Match,{value:e.status,case:s=>{if(s<=types.AccountStatusEnum.NotConnected||e.disabledConnect)return jsxRuntime.jsx(A,{size:"lg",onClick:()=>{l();},variant:e.disabledConnect?void 0:"gradient",angle:45,description:o?.connectWallet,disabled:e.disabledConnect,...t,children:n.connectWallet});if(s<=types.AccountStatusEnum.NotSignedIn)return jsxRuntime.jsx(A,{size:"lg",onClick:()=>{a();},angle:45,description:o?.signin,...t,children:n.signin})},default:jsxRuntime.jsx(A,{size:"lg",description:o?.enableTrading,...t,onClick:()=>a(),children:n.enableTrading})})};S.displayName="AuthGuard";var A=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 dt=e=>{let{status:t,labels:n,description:o,dataSource:r,...c}=e,{state:g}=hooks.useAccount(),{wrongNetwork:d,disabledConnect:m}=reactApp.useAppContext(),a=react.useMemo(()=>t===void 0?g.status===types.AccountStatusEnum.EnableTradingWithoutConnected?types.AccountStatusEnum.EnableTradingWithoutConnected:types.AccountStatusEnum.EnableTrading:t,[t,g.status]),l=reactApp.useDataTap(r,{accountStatus:a}),f=d||m||g.status<a||e.ignoreLoadingCheck;return jsxRuntime.jsx(ui.DataTable,{dataSource:l,ignoreLoadingCheck:f,emptyView:jsxRuntime.jsx(ut,{status:a,description:o,labels:n,className:e.classNames?.authGuardDescription,visible:!g.validating}),manualPagination:true,...c})},ut=e=>{let{t}=i18n.useTranslation(),o={...{connectWallet:t("connector.connectWallet"),switchChain:t("connector.wrongNetwork"),enableTrading:t("connector.enableTrading"),signin:t("connector.signIn")},...e.description};return e.visible?jsxRuntime.jsx(ui.Flex,{py:8,children:jsxRuntime.jsx(S,{status:e.status,labels:e.labels,descriptions:o,buttonProps:{size:"md"},children:jsxRuntime.jsx(ui.ExtensionSlot,{position:ui.ExtensionPositionEnum.EmptyDataIdentifier})})}):null};var le=e=>{let{t}=i18n.useTranslation(),{hint:n={connectWallet:t("connector.trade.connectWallet.tooltip"),signIn:t("connector.trade.signIn.tooltip"),enableTrading:t("connector.trade.enableTrading.tooltip"),wrongNetwork:t("connector.wrongNetwork.tooltip")},status:o}=e;return jsxRuntime.jsx(ui.Box,{my:8,children:jsxRuntime.jsx(S,{status:o,descriptions:{...n,switchChain:n.wrongNetwork},children:e.children||jsxRuntime.jsx(ui.EmptyDataState,{})})})};le.displayName="AuthGuardEmpty";var ue=e=>{let{t}=i18n.useTranslation(),{opactiy:n=90,tooltip:o={connectWallet:t("connector.setUp.connectWallet.tooltip"),signIn:t("connector.setUp.signIn.tooltip"),enableTrading:t("connector.setUp.enableTrading.tooltip"),wrongNetwork:t("connector.wrongNetwork.tooltip")}}=e,[r,c]=react.useState(false),{state:g}=hooks.useAccount(),d=true,{wrongNetwork:m}=reactApp.useAppContext(),a=react.useMemo(()=>{if(m)return o?.wrongNetwork;switch(g.status){case types.AccountStatusEnum.NotConnected:return o?.connectWallet;case types.AccountStatusEnum.NotSignedIn:return o?.signIn;case types.AccountStatusEnum.DisabledTrading:return o?.enableTrading;case types.AccountStatusEnum.EnableTrading:return "";default:return e.content}},[e.content,g,d,o]),l=react.useMemo(()=>{switch(g.status){case types.AccountStatusEnum.NotConnected:case types.AccountStatusEnum.NotSignedIn:return n;case types.AccountStatusEnum.EnableTrading:return;default:return}},[e.opactiy,g,d]);return jsxRuntime.jsx(ui.Tooltip,{open:a?r:false,onOpenChange:c,content:a,className:"oui-text-2xs",align:e.align,alignOffset:e.alignOffset,side:e.side,sideOffset:e.sideOffset,children:jsxRuntime.jsx("div",{style:{opacity:l},children:e.children})})};ue.displayName="AuthGuardTooltip";

exports.AuthGuard = S;
exports.AuthGuardDataTable = dt;
exports.AuthGuardEmpty = le;
exports.AuthGuardTooltip = ue;
exports.WalletConnectContent = O;
exports.WalletConnectorModalId = B;
exports.WalletConnectorSheetId = G;
exports.WalletConnectorWidget = D;
exports.useWalletConnectorBuilder = L;
//# sourceMappingURL=out.js.map
//# sourceMappingURL=index.js.map