@orderly.network/ui-connector 2.8.1-alpha.0 → 2.8.2-alpha.0

package/dist/index.js

@@ -9,18 +9,912 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactApp = require('@orderly.network/react-app');
 var uiChainSelector = require('@orderly.network/ui-chain-selector');
 
-var ne=e=>{let{title:t,description:n,showDivider:r}=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("div",{className:"oui-absolute oui-left-0 oui-top-1 oui-z-10",children:jsxRuntime.jsx(Ee,{...e})}),r&&jsxRuntime.jsx(ui.Box,{position:"absolute",left:12,top:23,bottom:-21,zIndex:0,children:jsxRuntime.jsx(ui.Divider,{lineStyle:"dashed",direction:"vertical",intensity:16,className:"oui-h-full"})})]})},Ee=e=>{let{active:t,isLoading:n,isCompleted:r}=e;return n?jsxRuntime.jsx(ui.Spinner,{size:"sm",className:"oui-ml-1"}):r?jsxRuntime.jsx(ui.CheckedCircleFillIcon,{opacity:1,className:"oui-text-primary"}):jsxRuntime.jsx(Pe,{active:!!t})},Pe=({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 Z=e=>{let{initAccountState:t=types.AccountStatusEnum.NotConnected}=e,[n,r]=react.useState(true),o=hooks.useEventEmitter(),{t:i}=i18n.useTranslation(),{disconnect:g,namespace:u}=hooks.useWalletConnector(),{state:m,account:s}=hooks.useAccount(),[a,p]=react.useState(t),[l,k]=react.useState(0),[x,h]=react.useState(false),[B,T]=react.useState(false),{ledgerWallet:N,setLedgerAddress:xe}=hooks.useStorageLedgerAddress(),C=react.useRef(0),[M]=hooks.useLocalStorage("orderly-first-show-wallet-connector-dialog",void 0);react.useEffect(()=>()=>{localStorage.setItem("orderly-first-show-wallet-connector-dialog","1");},[]),react.useEffect(()=>{p(m.status);},[m]);let O=react.useMemo(()=>{let d=[];return t<types.AccountStatusEnum.SignedIn&&d.push({key:"signIn",title:i("connector.createAccount"),description:i("connector.createAccount.description")}),t<types.AccountStatusEnum.EnableTrading&&d.push({key:"enableTrading",title:i("connector.enableTrading"),description:i("connector.enableTrading.description")}),d},[t,i]);react.useEffect(()=>{if(u!=types.ChainNamespace.solana){T(false);return}if(!N){T(true);return}if(N&&s.address&&!N.includes(s.address)){T(true);return}T(false);},[u,s.address,N]);let j=()=>(h(true),e.enableTrading(n).then(async d=>{C.current++,h(false),k(y=>y+1);try{await e.enableTradingComplted?.();}catch{}typeof e.onCompleted=="function"?e.onCompleted():typeof e.close=="function"&&e.close();},d=>{if(h(false),d!==-1){if(d.message.indexOf("Signing off chain messages with Ledger is not yet supported")!==-1){o.emit("wallet:sign-message-with-ledger-error",{message:d.message,userAddress:s.address});return}ui.toast.error(ie(d));}}).catch(d=>{h(false);})),Se=async()=>{localStorage.removeItem("orderly_link_device"),g({label:a.connectWallet?.name}).then(()=>{s.disconnect(),typeof e.close=="function"&&e.close();});},Ne=()=>(h(true),e.signIn().then(d=>{k(y=>y+1),j();},d=>{if(h(false),d!==-1){if(d.message.indexOf("Signing off chain messages with Ledger is not yet supported")!==-1){o.emit("wallet:sign-message-with-ledger-error",{message:d.message,userAddress:s.address});return}ui.toast.error(ie(d));}}).catch(d=>{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:i("connector.expired")}),jsxRuntime.jsx(ui.Box,{p:4,my:6,intensity:600,r:"lg",className:"oui-space-y-5",position:"relative",children:O.map((d,y)=>{let We=y===O.length-1;return jsxRuntime.jsx(ne,{title:d.title,description:d.description,isCompleted:l>y,active:l===y,isLoading:x&&l===y,showDivider:!We},d.key)})}),e.showRefCodeInput&&O.length==2&&jsxRuntime.jsx(Ze,{...e}),M&&jsxRuntime.jsxs(ui.Flex,{justify:"between",itemAlign:"center",children:[jsxRuntime.jsx(Ke,{}),jsxRuntime.jsx(ui.Switch,{color:"primary",checked:n,onCheckedChange:r,disabled:x,className:"data-[state=checked]:oui-bg-primary-darken"})]}),jsxRuntime.jsx(ui.Flex,{justify:"center",mt:8,className:"oui-w-full",children:jsxRuntime.jsx(ui.Box,{className:"oui-w-full",children:jsxRuntime.jsx(Ue,{state:a,signIn:Ne,enableTrading:j,loading:x,disabled:a>=types.AccountStatusEnum.EnableTrading,showLedgerButton:B})})}),a>types.AccountStatusEnum.NotConnected&&jsxRuntime.jsxs(ui.Flex,{justify:"center",mt:4,gap:1,className:"oui-w-full oui-cursor-pointer",onClick:Se,children:[jsxRuntime.jsx(Ve,{}),jsxRuntime.jsx(ui.Text,{className:"oui-text-base-contrast-80 oui-text-sm",children:i("connector.disconnectWallet")})]})]})},Ve=()=>jsxRuntime.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:jsxRuntime.jsx("path",{d:"M2.24219 5.24316C2.24219 3.58641 3.58536 2.24316 5.24219 2.24316H8.24219C9.89894 2.24316 11.2422 3.58641 11.2422 5.24316C11.2422 5.65716 10.9062 5.99316 10.4922 5.99316C10.0782 5.99316 9.74219 5.65716 9.74219 5.24316C9.74219 4.41441 9.07094 3.74316 8.24219 3.74316H5.24219C4.41374 3.74316 3.74219 4.41441 3.74219 5.24316V12.7432C3.74219 13.5719 4.41374 14.2432 5.24219 14.2432H8.24219C9.07094 14.2432 9.74219 13.5719 9.74219 12.7432C9.74219 12.3292 10.0782 11.9932 10.4922 11.9932C10.9062 11.9932 11.2422 12.3292 11.2422 12.7432C11.2422 14.3999 9.89894 15.7432 8.24219 15.7432H5.24219C3.58536 15.7432 2.24219 14.3999 2.24219 12.7432V5.24316ZM7.49219 8.99316C7.49219 8.57916 7.82819 8.24316 8.24219 8.24316H13.9144L12.4377 6.74316L13.4922 5.68866L16.2814 8.45391C16.5739 8.74716 16.5739 9.23915 16.2814 9.5324L13.4922 12.2977L12.4377 11.2432L13.9144 9.74316H8.24219C7.82819 9.74316 7.49219 9.40716 7.49219 8.99316Z",fill:"white",fillOpacity:"0.8"})}),Ue=({state:e,signIn:t,enableTrading:n,loading:r,disabled:o,showLedgerButton:i})=>{let{t:g}=i18n.useTranslation();return e<=types.AccountStatusEnum.NotSignedIn?jsxRuntime.jsxs(ui.Flex,{direction:"column",gap:3,className:"oui-w-full",children:[jsxRuntime.jsx(ui.Button,{fullWidth:true,onClick:()=>t(),loading:r,disabled:o,children:g("connector.createAccount")}),i&&jsxRuntime.jsx(ae,{onClick:()=>t(),content:g("connector.createAccountWithLedger")})]}):jsxRuntime.jsxs(ui.Flex,{direction:"column",gap:3,className:"oui-w-full",children:[jsxRuntime.jsx(ui.Button,{fullWidth:true,onClick:()=>n(),loading:r,disabled:o,children:g("connector.enableTrading")}),i&&jsxRuntime.jsx(ae,{onClick:()=>n(),disabled:o,content:g("connector.enableTradingWithLedger")})]})},ae=({onClick:e,disabled:t,content:n})=>{let{t:r}=i18n.useTranslation(),{state:o}=hooks.useAccount(),i=o.address,{setLedgerAddress:g}=hooks.useStorageLedgerAddress();return i?jsxRuntime.jsx(ui.Button,{variant:"outlined",color:"primary",fullWidth:true,onClick:()=>{g(i),e();},disabled:t,className:"oui-w-full",children:n}):null},Ze=e=>{let{t}=i18n.useTranslation();return jsxRuntime.jsx(ui.TextField,{placeholder:t("connector.referralCode.placeholder"),fullWidth:true,label:"",value:e.refCode,onChange:n=>{let r=n.target.value.toUpperCase().replace(/[^A-Z0-9]/g,"");e.setRefCode(r);},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(n=>String(n).replace(/[a-z]/g,r=>r.toUpperCase())),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})},Ke=()=>{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 ie(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 K=()=>{let{account:e,state:t,createOrderlyKey:n,createAccount:r}=hooks.useAccount(),[o,i]=react.useState(""),[g,u]=react.useState(""),{t:m}=i18n.useTranslation(),{trigger:s}=hooks.useLazyQuery(`/v1/public/referral/verify_ref_code?referral_code=${o}`);react.useEffect(()=>{let C=localStorage.getItem("referral_code");C!=null&&i(C);},[]);let{referral_code:a,isLoading:p}=hooks.useGetReferralCode(e.accountId),[l,{error:k,isMutating:x}]=hooks.useMutation("/v1/referral/bind","POST");react.useEffect(()=>{o.length===0&&u("");},[o]);let h=()=>{ui.toast.success(m("connector.walletConnected")),o.length>=4&&o.length<=10&&l({referral_code:o}).finally(()=>{localStorage.removeItem("referral_code");});},B=async()=>{if(o.length===0)return Promise.resolve(void 0);if(o.length>0&&(o.length<4||o.length>10))return Promise.resolve(m("connector.referralCode.invalid"));let{exist:C}=await s();return C===false?Promise.resolve(m("connector.referralCode.notExist")):Promise.resolve(void 0)},T=(a?.length||0)===0&&!p,N=async()=>{if(T){let C=await B();if(typeof C<"u")return u(C),Promise.reject(-1)}return u(""),r()};return {enableTrading:async C=>{if(T){let M=await B();if(typeof M<"u")return u(M),Promise.reject(-1)}return u(""),n(C)},initAccountState:t.status,signIn:N,enableTradingComplted:h,refCode:o,setRefCode:i,helpText:g,showRefCodeInput:T}};var D="walletConnector",F="walletConnectorSheet",Q=e=>{let t=K();return jsxRuntime.jsx(Z,{...t,...e})};ui.registerSimpleDialog(D,Q,{size:"sm",title:()=>i18n.i18n.t("connector.connectWallet")});ui.registerSimpleSheet(F,Q,{title:()=>i18n.i18n.t("connector.connectWallet")});var A=e=>{let{status:t,buttonProps:n,fallback:r,descriptions:o,classNames:i,networkId:g,id:u,bridgeLessOnly:m}=e,{t:s}=i18n.useTranslation(),{state:a}=hooks.useAccount(),{wrongNetwork:p,disabledConnect:l}=reactApp.useAppContext(),k=react.useMemo(()=>t===void 0?a.status===types.AccountStatusEnum.EnableTradingWithoutConnected?types.AccountStatusEnum.EnableTradingWithoutConnected:types.AccountStatusEnum.EnableTrading:t,[t,a.status]),x={connectWallet:s("connector.connectWallet"),switchChain:s("connector.wrongNetwork"),enableTrading:s("connector.enableTrading"),signin:s("connector.createAccount"),...e.labels},h=react.useMemo(()=>typeof r<"u"?r({validating:a.validating,status:a.status,wrongNetwork:p}):a.validating&&!l?jsxRuntime.jsx(R,{angle:45,disabled:true,loading:true,description:o?.connectWallet,id:u,type:"button",...n,children:x.connectWallet}):jsxRuntime.jsx(gt,{bridgeLessOnly:m,status:a.status,buttonProps:{...n,id:u,type:"button"},wrongNetwork:p,networkId:e.networkId,labels:x,descriptions:o,disabledConnect:l}),[a.status,a.validating,n,p]);return jsxRuntime.jsx(ui.Either,{value:a.status>=k&&!p&&!l,left:h,children:e.children})},dt=()=>{let{t:e}=i18n.useTranslation(),{state:t}=hooks.useAccount();return t.status<types.AccountStatusEnum.SignedIn?jsxRuntime.jsx(ui.Text,{children:e("connector.createAccount")}):t.status<types.AccountStatusEnum.EnableTrading?jsxRuntime.jsx(ui.Text,{children:e("connector.enableTrading")}):jsxRuntime.jsx(ui.Text,{children:e("connector.connectWallet")})},gt=e=>{let{buttonProps:t,labels:n,descriptions:r}=e,{t:o}=i18n.useTranslation(),{connectWallet:i}=reactApp.useAppContext(),{account:g}=hooks.useAccount(),{isMobile:u}=ui.useScreen(),m=hooks.useMediaQuery(types.MEDIA_TABLET),s=()=>{ui.modal.show(m?F:D,{title:jsxRuntime.jsx(dt,{})}).then(l=>{},l=>{});},a=async()=>{let l=await i();l&&(l.wrongNetwork?p():(l?.status??types.AccountStatusEnum.NotConnected)<types.AccountStatusEnum.EnableTrading&&s());},p=()=>{g.once("validate:end",l=>{l<types.AccountStatusEnum.EnableTrading?s():ui.toast.success(o("connector.walletConnected"));}),ui.modal.show(u?uiChainSelector.ChainSelectorSheetId:uiChainSelector.ChainSelectorDialogId,{networkId:e.networkId,bridgeLessOnly:e.bridgeLessOnly}).then(l=>{l.wrongNetwork||e.status>=types.AccountStatusEnum.Connected&&(e.status<types.AccountStatusEnum.EnableTrading?s():ui.toast.success(o("connector.walletConnected")));},l=>{});};return e.wrongNetwork&&!e.disabledConnect?jsxRuntime.jsx(R,{color:"warning",onClick:()=>{p();},description:r?.switchChain,...t,children:n.switchChain}):e.status<=types.AccountStatusEnum.NotConnected||e.disabledConnect?jsxRuntime.jsx(R,{size:"lg",onClick:()=>{a();},variant:e.disabledConnect?void 0:"gradient",angle:45,description:r?.connectWallet,disabled:e.disabledConnect,...t,children:n.connectWallet}):e.status<=types.AccountStatusEnum.NotSignedIn?jsxRuntime.jsx(R,{size:"lg",onClick:()=>{s();},angle:45,description:r?.signin,...t,children:n.signin}):jsxRuntime.jsx(R,{size:"lg",description:r?.enableTrading,...t,onClick:()=>s(),children:n.enableTrading})};A.displayName="AuthGuard";var R=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:r,dataSource:o,children:i,...g}=e,{state:u}=hooks.useAccount(),{wrongNetwork:m,disabledConnect:s}=reactApp.useAppContext(),a=react.useMemo(()=>t===void 0?u.status===types.AccountStatusEnum.EnableTradingWithoutConnected?types.AccountStatusEnum.EnableTradingWithoutConnected:types.AccountStatusEnum.EnableTrading:t,[t,u.status]),p=reactApp.useDataTap(o,{accountStatus:a}),l=m||s||u.status<a||e.ignoreLoadingCheck;return jsxRuntime.jsx(ui.DataTable,{dataSource:p,ignoreLoadingCheck:l,emptyView:jsxRuntime.jsx(Nt,{status:a,description:r,labels:n,className:e.classNames?.authGuardDescription,visible:!u.validating}),manualPagination:true,...g,children:i})},Nt=e=>{let{t}=i18n.useTranslation(),r={...{connectWallet:t("connector.trade.connectWallet.tooltip"),switchChain:t("connector.wrongNetwork.tooltip"),enableTrading:t("connector.trade.enableTrading.tooltip"),signin:t("connector.trade.createAccount.tooltip")},...e.description};return e.visible?jsxRuntime.jsx(ui.Flex,{py:8,children:jsxRuntime.jsx(A,{status:e.status,labels:e.labels,descriptions:r,buttonProps:{size:"md"},children:jsxRuntime.jsx(ui.ExtensionSlot,{position:ui.ExtensionPositionEnum.EmptyDataIdentifier})})}):null};var he=e=>{let{t}=i18n.useTranslation(),{hint:n={connectWallet:t("connector.trade.connectWallet.tooltip"),signIn:t("connector.trade.createAccount.tooltip"),enableTrading:t("connector.trade.enableTrading.tooltip"),wrongNetwork:t("connector.wrongNetwork.tooltip")},status:r}=e;return jsxRuntime.jsx(ui.Box,{my:8,children:jsxRuntime.jsx(A,{status:r,descriptions:{...n,switchChain:n.wrongNetwork},buttonProps:{size:"md"},children:e.children||jsxRuntime.jsx(ui.EmptyDataState,{})})})};he.displayName="AuthGuardEmpty";var ye=e=>{let{t}=i18n.useTranslation(),{opactiy:n=90,tooltip:r={connectWallet:t("connector.setUp.connectWallet.tooltip"),signIn:t("connector.setUp.createAccount.tooltip"),enableTrading:t("connector.setUp.enableTrading.tooltip"),wrongNetwork:t("connector.wrongNetwork.tooltip")}}=e,[o,i]=react.useState(false),{state:g}=hooks.useAccount(),u=true,{wrongNetwork:m}=reactApp.useAppContext(),s=react.useMemo(()=>{if(m)return r?.wrongNetwork;switch(g.status){case types.AccountStatusEnum.NotConnected:return r?.connectWallet;case types.AccountStatusEnum.NotSignedIn:return r?.signIn;case types.AccountStatusEnum.DisabledTrading:return r?.enableTrading;case types.AccountStatusEnum.EnableTrading:return "";default:return e.content}},[e.content,g,u,r]),a=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,u]);return jsxRuntime.jsx(ui.Tooltip,{open:s?o:false,onOpenChange:i,content:s,className:"oui-text-2xs",align:e.align,alignOffset:e.alignOffset,side:e.side,sideOffset:e.sideOffset,children:jsxRuntime.jsx("div",{style:{opacity:a},children:e.children})})};ye.displayName="AuthGuardTooltip";var Te=(o=>(o[o.WrongNetwork=0]="WrongNetwork",o[o.ConnectWallet=1]="ConnectWallet",o[o.CreateAccount=2]="CreateAccount",o[o.EnableTrading=3]="EnableTrading",o))(Te||{}),Dt=()=>{let{state:e}=hooks.useAccount(),{wrongNetwork:t,disabledConnect:n}=reactApp.useAppContext();return react.useMemo(()=>t&&!n?0:e.status===types.AccountStatusEnum.EnableTradingWithoutConnected?3:e.status<=types.AccountStatusEnum.NotConnected||n?1:e.status<=types.AccountStatusEnum.NotSignedIn?2:3,[e.status,t,n])};
+// src/component/walletConnectorContent.tsx
+var StepItem = (props) => {
+  const { title, description, showDivider } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { position: "relative", className: "oui-pl-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "div", intensity: 98, size: "sm", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "div", intensity: 54, size: "2xs", children: description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-absolute oui-left-0 oui-top-1 oui-z-10", children: /* @__PURE__ */ jsxRuntime.jsx(Identifier, { ...props }) }),
+    showDivider && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { position: "absolute", left: 12, top: 23, bottom: -21, zIndex: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Divider,
+      {
+        lineStyle: "dashed",
+        direction: "vertical",
+        intensity: 16,
+        className: "oui-h-full"
+      }
+    ) })
+  ] });
+};
+var Identifier = (props) => {
+  const { active, isLoading, isCompleted } = props;
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, { size: "sm", className: "oui-ml-1" });
+  }
+  if (isCompleted) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.CheckedCircleFillIcon, { opacity: 1, className: "oui-text-primary" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Dot, { active: !!active });
+};
+var Dot = ({
+  active,
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: ui.cn(
+        "oui-w-[8.3px] oui-h-[8.3px] oui-rounded-full oui-ml-2 oui-mt-1",
+        className,
+        active ? "oui-bg-primary-light" : "oui-bg-base-2"
+      )
+    }
+  );
+};
+var WalletConnectContent = (props) => {
+  const { initAccountState = types.AccountStatusEnum.NotConnected } = props;
+  const [remember, setRemember] = react.useState(true);
+  const ee = hooks.useEventEmitter();
+  const { t } = i18n.useTranslation();
+  const { disconnect, namespace } = hooks.useWalletConnector();
+  const { state: accountState, account } = hooks.useAccount();
+  const [state, setState] = react.useState(initAccountState);
+  const [activeStep, setActiveStep] = react.useState(0);
+  const [loading, setLoading] = react.useState(false);
+  const [showLedgerButton, setShowLedgerButton] = react.useState(false);
+  const { ledgerWallet, setLedgerAddress } = hooks.useStorageLedgerAddress();
+  const handleRef = react.useRef(0);
+  const [firstShowDialog] = hooks.useLocalStorage(
+    "orderly-first-show-wallet-connector-dialog",
+    void 0
+  );
+  react.useEffect(() => {
+    return () => {
+      localStorage.setItem("orderly-first-show-wallet-connector-dialog", "1");
+    };
+  }, []);
+  react.useEffect(() => {
+    setState(accountState.status);
+  }, [accountState]);
+  const steps = react.useMemo(() => {
+    const steps2 = [];
+    if (initAccountState < types.AccountStatusEnum.SignedIn) {
+      steps2.push({
+        key: "signIn",
+        title: t("connector.createAccount"),
+        description: t("connector.createAccount.description")
+      });
+    }
+    if (initAccountState < types.AccountStatusEnum.EnableTrading) {
+      steps2.push({
+        key: "enableTrading",
+        title: t("connector.enableTrading"),
+        description: t("connector.enableTrading.description")
+      });
+    }
+    return steps2;
+  }, [initAccountState, t]);
+  react.useEffect(() => {
+    if (namespace != types.ChainNamespace.solana) {
+      setShowLedgerButton(false);
+      return;
+    }
+    if (!ledgerWallet) {
+      setShowLedgerButton(true);
+      return;
+    }
+    if (ledgerWallet && account.address) {
+      if (!ledgerWallet.includes(account.address)) {
+        setShowLedgerButton(true);
+        return;
+      }
+    }
+    setShowLedgerButton(false);
+  }, [namespace, account.address, ledgerWallet]);
+  const onEnableTrading = () => {
+    setLoading(true);
+    return props.enableTrading(remember).then(
+      async (res) => {
+        handleRef.current++;
+        setLoading(false);
+        setActiveStep((step) => step + 1);
+        try {
+          await props.enableTradingComplted?.();
+        } catch (e) {
+        }
+        if (typeof props.onCompleted === "function") {
+          props.onCompleted();
+        } else if (typeof props.close === "function") {
+          props.close();
+        }
+      },
+      (reject) => {
+        setLoading(false);
+        if (reject === -1) {
+          return;
+        }
+        if (reject.message.indexOf(
+          "Signing off chain messages with Ledger is not yet supported"
+        ) !== -1) {
+          ee.emit("wallet:sign-message-with-ledger-error", {
+            message: reject.message,
+            userAddress: account.address
+          });
+          return;
+        }
+        ui.toast.error(paseErrorMsg(reject));
+      }
+    ).catch((e) => {
+      setLoading(false);
+    });
+  };
+  const onDisconnect = async () => {
+    localStorage.removeItem("orderly_link_device");
+    disconnect({
+      label: state.connectWallet?.name
+    }).then(() => {
+      account.disconnect();
+      if (typeof props.close === "function") {
+        props.close();
+      }
+    });
+  };
+  const onSignIn = () => {
+    setLoading(true);
+    return props.signIn().then(
+      (res) => {
+        setActiveStep((step) => step + 1);
+        onEnableTrading();
+      },
+      (reject) => {
+        setLoading(false);
+        if (reject === -1) {
+          return;
+        }
+        if (reject.message.indexOf(
+          "Signing off chain messages with Ledger is not yet supported"
+        ) !== -1) {
+          ee.emit("wallet:sign-message-with-ledger-error", {
+            message: reject.message,
+            userAddress: account.address
+          });
+          return;
+        }
+        ui.toast.error(paseErrorMsg(reject));
+      }
+    ).catch((e) => {
+      setLoading(false);
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { id: "oui-wallet-connect-dialog-content", className: "oui-font-semibold", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 54, size: "xs", children: t("connector.expired") }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Box,
+      {
+        p: 4,
+        my: 6,
+        intensity: 600,
+        r: "lg",
+        className: "oui-space-y-5",
+        position: "relative",
+        children: steps.map((step, index) => {
+          const isLast = index === steps.length - 1;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            StepItem,
+            {
+              title: step.title,
+              description: step.description,
+              isCompleted: activeStep > index,
+              active: activeStep === index,
+              isLoading: loading && activeStep === index,
+              showDivider: !isLast
+            },
+            step.key
+          );
+        })
+      }
+    ),
+    props.showRefCodeInput && steps.length == 2 && /* @__PURE__ */ jsxRuntime.jsx(ReferralCode, { ...props }),
+    firstShowDialog && /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", itemAlign: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RememberMe, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Switch,
+        {
+          color: "primary",
+          checked: remember,
+          onCheckedChange: setRemember,
+          disabled: loading,
+          className: "data-[state=checked]:oui-bg-primary-darken"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { justify: "center", mt: 8, className: "oui-w-full", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ActionButton,
+      {
+        state,
+        signIn: onSignIn,
+        enableTrading: onEnableTrading,
+        loading,
+        disabled: state >= types.AccountStatusEnum.EnableTrading,
+        showLedgerButton
+      }
+    ) }) }),
+    state > types.AccountStatusEnum.NotConnected && /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Flex,
+      {
+        justify: "center",
+        mt: 4,
+        gap: 1,
+        className: "oui-w-full oui-cursor-pointer",
+        onClick: onDisconnect,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DisconnectIcon, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-80 oui-text-sm", children: t("connector.disconnectWallet") })
+        ]
+      }
+    )
+  ] });
+};
+var DisconnectIcon = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 18 18",
+      fill: "none",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M2.24219 5.24316C2.24219 3.58641 3.58536 2.24316 5.24219 2.24316H8.24219C9.89894 2.24316 11.2422 3.58641 11.2422 5.24316C11.2422 5.65716 10.9062 5.99316 10.4922 5.99316C10.0782 5.99316 9.74219 5.65716 9.74219 5.24316C9.74219 4.41441 9.07094 3.74316 8.24219 3.74316H5.24219C4.41374 3.74316 3.74219 4.41441 3.74219 5.24316V12.7432C3.74219 13.5719 4.41374 14.2432 5.24219 14.2432H8.24219C9.07094 14.2432 9.74219 13.5719 9.74219 12.7432C9.74219 12.3292 10.0782 11.9932 10.4922 11.9932C10.9062 11.9932 11.2422 12.3292 11.2422 12.7432C11.2422 14.3999 9.89894 15.7432 8.24219 15.7432H5.24219C3.58536 15.7432 2.24219 14.3999 2.24219 12.7432V5.24316ZM7.49219 8.99316C7.49219 8.57916 7.82819 8.24316 8.24219 8.24316H13.9144L12.4377 6.74316L13.4922 5.68866L16.2814 8.45391C16.5739 8.74716 16.5739 9.23915 16.2814 9.5324L13.4922 12.2977L12.4377 11.2432L13.9144 9.74316H8.24219C7.82819 9.74316 7.49219 9.40716 7.49219 8.99316Z",
+          fill: "white",
+          fillOpacity: "0.8"
+        }
+      )
+    }
+  );
+};
+var ActionButton = ({
+  state,
+  signIn,
+  enableTrading,
+  loading,
+  disabled,
+  showLedgerButton
+}) => {
+  const { t } = i18n.useTranslation();
+  if (state <= types.AccountStatusEnum.NotSignedIn) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 3, className: "oui-w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          fullWidth: true,
+          onClick: () => signIn(),
+          loading,
+          disabled,
+          children: t("connector.createAccount")
+        }
+      ),
+      showLedgerButton && /* @__PURE__ */ jsxRuntime.jsx(
+        WithLedgerButton,
+        {
+          onClick: () => signIn(),
+          content: t("connector.createAccountWithLedger")
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 3, className: "oui-w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        fullWidth: true,
+        onClick: () => enableTrading(),
+        loading,
+        disabled,
+        children: t("connector.enableTrading")
+      }
+    ),
+    showLedgerButton && /* @__PURE__ */ jsxRuntime.jsx(
+      WithLedgerButton,
+      {
+        onClick: () => enableTrading(),
+        disabled,
+        content: t("connector.enableTradingWithLedger")
+      }
+    )
+  ] });
+};
+var WithLedgerButton = ({
+  onClick,
+  disabled,
+  content
+}) => {
+  const { t } = i18n.useTranslation();
+  const { state } = hooks.useAccount();
+  const address = state.address;
+  const { setLedgerAddress } = hooks.useStorageLedgerAddress();
+  if (!address) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Button,
+    {
+      variant: "outlined",
+      color: "primary",
+      fullWidth: true,
+      onClick: () => {
+        setLedgerAddress(address);
+        onClick();
+      },
+      disabled,
+      className: "oui-w-full",
+      children: content
+    }
+  );
+};
+var ReferralCode = (props) => {
+  const { t } = i18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.TextField,
+    {
+      placeholder: t("connector.referralCode.placeholder"),
+      fullWidth: true,
+      label: "",
+      value: props.refCode,
+      onChange: (e) => {
+        const _value = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "");
+        props.setRefCode(_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((value) => {
+          return String(value).replace(
+            /[a-z]/g,
+            (char) => char.toUpperCase()
+          );
+        }),
+        ui.inputFormatter.createRegexInputFormatter(/[^A-Z0-9]/g)
+      ],
+      onClear: () => {
+        props.setRefCode("");
+      },
+      autoComplete: "off",
+      helpText: props.helpText,
+      className: "oui-mb-4",
+      color: props.helpText ? "danger" : void 0
+    }
+  );
+};
+var RememberMe = () => {
+  const { t } = i18n.useTranslation();
+  const showRememberHint = () => {
+    if (window.innerWidth > 768) {
+      return;
+    }
+    ui.modal.alert({
+      title: t("connector.rememberMe"),
+      message: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-text-2xs oui-text-base-contrast/60", children: t("connector.rememberMe.description") })
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Tooltip,
+    {
+      content: t("connector.rememberMe.description"),
+      className: "oui-max-w-[300px]",
+      children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: showRememberHint, children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Text,
+        {
+          intensity: 54,
+          size: "xs",
+          className: "oui-underline oui-underline-offset-4 oui-decoration-dashed oui-decoration-base-contrast-36",
+          children: t("connector.rememberMe")
+        }
+      ) })
+    }
+  );
+};
+function paseErrorMsg(reject) {
+  Object.keys(reject).forEach((key) => {
+  });
+  let msg = i18n.i18n.t("connector.somethingWentWrong");
+  if (reject.toString().includes("rejected")) {
+    msg = i18n.i18n.t("connector.userRejected");
+  }
+  return ui.capitalizeFirstLetter(msg) ?? msg;
+}
+var useWalletConnectorBuilder = () => {
+  const { account, state, createOrderlyKey, createAccount } = hooks.useAccount();
+  const [refCode, setRefCode] = react.useState("");
+  const [helpText, setHelpText] = react.useState("");
+  const { t } = i18n.useTranslation();
+  const { trigger: verifyRefCode } = hooks.useLazyQuery(
+    `/v1/public/referral/verify_ref_code?referral_code=${refCode}`
+  );
+  react.useEffect(() => {
+    const refCode2 = localStorage.getItem("referral_code");
+    if (refCode2 != null) {
+      setRefCode(refCode2);
+    }
+  }, []);
+  const { referral_code, isLoading } = hooks.useGetReferralCode(account.accountId);
+  const [bindRefCode, { error: updateOrderError, isMutating: updateMutating }] = hooks.useMutation("/v1/referral/bind", "POST");
+  react.useEffect(() => {
+    if (refCode.length === 0) {
+      setHelpText("");
+    }
+  }, [refCode]);
+  const enableTradingComplted = () => {
+    ui.toast.success(t("connector.walletConnected"));
+    if (refCode.length >= 4 && refCode.length <= 10)
+      bindRefCode({ referral_code: refCode }).finally(() => {
+        localStorage.removeItem("referral_code");
+      });
+  };
+  const checkRefCode = async () => {
+    if (refCode.length === 0) {
+      return Promise.resolve(void 0);
+    }
+    if (refCode.length > 0 && (refCode.length < 4 || refCode.length > 10)) {
+      return Promise.resolve(t("connector.referralCode.invalid"));
+    }
+    const { exist } = await verifyRefCode();
+    if (exist === false) {
+      return Promise.resolve(t("connector.referralCode.notExist"));
+    }
+    return Promise.resolve(void 0);
+  };
+  const showRefCodeInput = (referral_code?.length || 0) === 0 && !isLoading;
+  const signIn = async () => {
+    if (showRefCodeInput) {
+      const info = await checkRefCode();
+      if (typeof info !== "undefined") {
+        setHelpText(info);
+        return Promise.reject(-1);
+      }
+    }
+    setHelpText("");
+    return createAccount();
+  };
+  const enableTrading = async (remember) => {
+    if (showRefCodeInput) {
+      const info = await checkRefCode();
+      if (typeof info !== "undefined") {
+        setHelpText(info);
+        return Promise.reject(-1);
+      }
+    }
+    setHelpText("");
+    return createOrderlyKey(remember);
+  };
+  return {
+    enableTrading,
+    initAccountState: state.status,
+    signIn,
+    enableTradingComplted,
+    refCode,
+    setRefCode,
+    helpText,
+    showRefCodeInput
+  };
+};
+var WalletConnectorModalId = "walletConnector";
+var WalletConnectorSheetId = "walletConnectorSheet";
+var WalletConnectorWidget = (props) => {
+  const state = useWalletConnectorBuilder();
+  return /* @__PURE__ */ jsxRuntime.jsx(WalletConnectContent, { ...state, ...props });
+};
+ui.registerSimpleDialog(WalletConnectorModalId, WalletConnectorWidget, {
+  size: "sm",
+  title: () => i18n.i18n.t("connector.connectWallet")
+});
+ui.registerSimpleSheet(WalletConnectorSheetId, WalletConnectorWidget, {
+  title: () => i18n.i18n.t("connector.connectWallet")
+});
+var AuthGuard = (props) => {
+  const {
+    status,
+    buttonProps,
+    fallback,
+    descriptions,
+    classNames,
+    networkId,
+    id,
+    bridgeLessOnly
+    // ...rest
+  } = props;
+  const { t } = i18n.useTranslation();
+  const { state } = hooks.useAccount();
+  const { wrongNetwork, disabledConnect } = reactApp.useAppContext();
+  const _status = react.useMemo(() => {
+    if (status === void 0) {
+      return state.status === types.AccountStatusEnum.EnableTradingWithoutConnected ? types.AccountStatusEnum.EnableTradingWithoutConnected : types.AccountStatusEnum.EnableTrading;
+    }
+    return status;
+  }, [status, state.status]);
+  const labels = {
+    connectWallet: t("connector.connectWallet"),
+    switchChain: t("connector.wrongNetwork"),
+    enableTrading: t("connector.enableTrading"),
+    signin: t("connector.createAccount"),
+    ...props.labels
+  };
+  const Left = react.useMemo(() => {
+    if (typeof fallback !== "undefined") {
+      return fallback({
+        validating: state.validating,
+        status: state.status,
+        wrongNetwork
+      });
+    }
+    if (state.validating && !disabledConnect) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        StatusInfo,
+        {
+          angle: 45,
+          disabled: true,
+          loading: true,
+          description: descriptions?.connectWallet,
+          id,
+          type: "button",
+          ...buttonProps,
+          children: labels.connectWallet
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DefaultFallback,
+      {
+        bridgeLessOnly,
+        status: state.status,
+        buttonProps: { ...buttonProps, id, type: "button" },
+        wrongNetwork,
+        networkId: props.networkId,
+        labels,
+        descriptions,
+        disabledConnect
+      }
+    );
+  }, [state.status, state.validating, buttonProps, wrongNetwork]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Either,
+    {
+      value: state.status >= _status && !wrongNetwork && !disabledConnect,
+      left: Left,
+      children: props.children
+    }
+  );
+};
+var ModalTitle = () => {
+  const { t } = i18n.useTranslation();
+  const { state } = hooks.useAccount();
+  if (state.status < types.AccountStatusEnum.SignedIn) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("connector.createAccount") });
+  }
+  if (state.status < types.AccountStatusEnum.EnableTrading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("connector.enableTrading") });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("connector.connectWallet") });
+};
+var DefaultFallback = (props) => {
+  const { buttonProps, labels, descriptions } = props;
+  const { t } = i18n.useTranslation();
+  const { connectWallet } = reactApp.useAppContext();
+  const { account } = hooks.useAccount();
+  const { isMobile } = ui.useScreen();
+  const matches = hooks.useMediaQuery(types.MEDIA_TABLET);
+  const onConnectOrderly = () => {
+    ui.modal.show(matches ? WalletConnectorSheetId : WalletConnectorModalId, {
+      title: /* @__PURE__ */ jsxRuntime.jsx(ModalTitle, {})
+    }).then(
+      (r) => void 0,
+      (error) => void 0
+    );
+  };
+  const onConnectWallet = async () => {
+    const res = await connectWallet();
+    if (!res) {
+      return;
+    }
+    if (res.wrongNetwork) {
+      switchChain();
+    } else {
+      if ((res?.status ?? types.AccountStatusEnum.NotConnected) < types.AccountStatusEnum.EnableTrading) {
+        onConnectOrderly();
+      }
+    }
+  };
+  const switchChain = () => {
+    account.once("validate:end", (status) => {
+      if (status < types.AccountStatusEnum.EnableTrading) {
+        onConnectOrderly();
+      } else {
+        ui.toast.success(t("connector.walletConnected"));
+      }
+    });
+    ui.modal.show(
+      isMobile ? uiChainSelector.ChainSelectorSheetId : uiChainSelector.ChainSelectorDialogId,
+      {
+        networkId: props.networkId,
+        bridgeLessOnly: props.bridgeLessOnly
+      }
+    ).then(
+      (r) => {
+        if (!r.wrongNetwork) {
+          if (props.status >= types.AccountStatusEnum.Connected) {
+            if (props.status < types.AccountStatusEnum.EnableTrading) {
+              onConnectOrderly();
+            } else {
+              ui.toast.success(t("connector.walletConnected"));
+            }
+          }
+        }
+      },
+      (error) => void 0
+    );
+  };
+  if (props.wrongNetwork && !props.disabledConnect) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StatusInfo,
+      {
+        color: "warning",
+        onClick: () => {
+          switchChain();
+        },
+        description: descriptions?.switchChain,
+        ...buttonProps,
+        children: labels.switchChain
+      }
+    );
+  }
+  if (props.status <= types.AccountStatusEnum.NotConnected || props.disabledConnect) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StatusInfo,
+      {
+        size: "lg",
+        onClick: () => {
+          onConnectWallet();
+        },
+        variant: props.disabledConnect ? void 0 : "gradient",
+        angle: 45,
+        description: descriptions?.connectWallet,
+        disabled: props.disabledConnect,
+        ...buttonProps,
+        children: labels.connectWallet
+      }
+    );
+  }
+  if (props.status <= types.AccountStatusEnum.NotSignedIn) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StatusInfo,
+      {
+        size: "lg",
+        onClick: () => {
+          onConnectOrderly();
+        },
+        angle: 45,
+        description: descriptions?.signin,
+        ...buttonProps,
+        children: labels.signin
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StatusInfo,
+    {
+      size: "lg",
+      description: descriptions?.enableTrading,
+      ...buttonProps,
+      onClick: () => onConnectOrderly(),
+      children: labels.enableTrading
+    }
+  );
+};
+AuthGuard.displayName = "AuthGuard";
+var StatusInfo = (props) => {
+  const { description, ...buttonProps } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { ...buttonProps }),
+    !!description && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { mt: 4, className: "oui-leading-none", style: { lineHeight: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 36, children: description }) })
+  ] });
+};
+var AuthGuardDataTable = (props) => {
+  const {
+    status,
+    // message,
+    labels,
+    description,
+    dataSource,
+    children,
+    ...rest
+  } = props;
+  const { state } = hooks.useAccount();
+  const { wrongNetwork, disabledConnect } = reactApp.useAppContext();
+  const _status = react.useMemo(() => {
+    if (status === void 0) {
+      return state.status === types.AccountStatusEnum.EnableTradingWithoutConnected ? types.AccountStatusEnum.EnableTradingWithoutConnected : types.AccountStatusEnum.EnableTrading;
+    }
+    return status;
+  }, [status, state.status]);
+  const data = reactApp.useDataTap(dataSource, {
+    accountStatus: _status
+  });
+  const ignoreLoadingCheck = wrongNetwork || disabledConnect || state.status < _status || props.ignoreLoadingCheck;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.DataTable,
+    {
+      dataSource: data,
+      ignoreLoadingCheck,
+      emptyView: /* @__PURE__ */ jsxRuntime.jsx(
+        GuardView,
+        {
+          status: _status,
+          description,
+          labels,
+          className: props.classNames?.authGuardDescription,
+          visible: !state.validating
+        }
+      ),
+      manualPagination: true,
+      ...rest,
+      children
+    }
+  );
+};
+var GuardView = (props) => {
+  const { t } = i18n.useTranslation();
+  const DESCRIPTIONS = {
+    connectWallet: t("connector.trade.connectWallet.tooltip"),
+    switchChain: t("connector.wrongNetwork.tooltip"),
+    enableTrading: t("connector.trade.enableTrading.tooltip"),
+    signin: t("connector.trade.createAccount.tooltip")
+  };
+  const descriptions = { ...DESCRIPTIONS, ...props.description };
+  if (!props.visible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { py: 8, children: /* @__PURE__ */ jsxRuntime.jsx(
+    AuthGuard,
+    {
+      status: props.status,
+      labels: props.labels,
+      descriptions,
+      buttonProps: {
+        size: "md"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(ui.ExtensionSlot, { position: ui.ExtensionPositionEnum.EmptyDataIdentifier })
+    }
+  ) });
+};
+var AuthGuardEmpty = (props) => {
+  const { t } = i18n.useTranslation();
+  const {
+    hint = {
+      connectWallet: t("connector.trade.connectWallet.tooltip"),
+      signIn: t("connector.trade.createAccount.tooltip"),
+      enableTrading: t("connector.trade.enableTrading.tooltip"),
+      wrongNetwork: t("connector.wrongNetwork.tooltip")
+    },
+    status
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { my: 8, children: /* @__PURE__ */ jsxRuntime.jsx(
+    AuthGuard,
+    {
+      status,
+      descriptions: { ...hint, switchChain: hint.wrongNetwork },
+      buttonProps: {
+        size: "md"
+      },
+      children: props.children || /* @__PURE__ */ jsxRuntime.jsx(ui.EmptyDataState, {})
+    }
+  ) });
+};
+AuthGuardEmpty.displayName = "AuthGuardEmpty";
+var AuthGuardTooltip = (props) => {
+  const { t } = i18n.useTranslation();
+  const {
+    opactiy = 90,
+    tooltip = {
+      connectWallet: t("connector.setUp.connectWallet.tooltip"),
+      signIn: t("connector.setUp.createAccount.tooltip"),
+      enableTrading: t("connector.setUp.enableTrading.tooltip"),
+      wrongNetwork: t("connector.wrongNetwork.tooltip")
+    }
+  } = props;
+  const [open, setOpen] = react.useState(false);
+  const { state } = hooks.useAccount();
+  const isSupport = true;
+  const { wrongNetwork } = reactApp.useAppContext();
+  const hint = react.useMemo(() => {
+    if (wrongNetwork) {
+      return tooltip?.wrongNetwork;
+    }
+    switch (state.status) {
+      case types.AccountStatusEnum.NotConnected:
+        return tooltip?.connectWallet;
+      case types.AccountStatusEnum.NotSignedIn:
+        return tooltip?.signIn;
+      case types.AccountStatusEnum.DisabledTrading:
+        return tooltip?.enableTrading;
+      case types.AccountStatusEnum.EnableTrading: {
+        return "";
+      }
+      default:
+        return props.content;
+    }
+  }, [props.content, state, isSupport, tooltip]);
+  const newOpacity = react.useMemo(() => {
+    switch (state.status) {
+      case types.AccountStatusEnum.NotConnected:
+      case types.AccountStatusEnum.NotSignedIn:
+        return opactiy;
+      case types.AccountStatusEnum.EnableTrading: {
+        return void 0;
+      }
+      default:
+        return void 0;
+    }
+  }, [props.opactiy, state, isSupport]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Tooltip,
+    {
+      open: hint ? open : false,
+      onOpenChange: setOpen,
+      content: hint,
+      className: "oui-text-2xs",
+      align: props.align,
+      alignOffset: props.alignOffset,
+      side: props.side,
+      sideOffset: props.sideOffset,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { opacity: newOpacity }, children: props.children })
+    }
+  );
+};
+AuthGuardTooltip.displayName = "AuthGuardTooltip";
+var AuthStatusEnum = /* @__PURE__ */ ((AuthStatusEnum2) => {
+  AuthStatusEnum2[AuthStatusEnum2["WrongNetwork"] = 0] = "WrongNetwork";
+  AuthStatusEnum2[AuthStatusEnum2["ConnectWallet"] = 1] = "ConnectWallet";
+  AuthStatusEnum2[AuthStatusEnum2["CreateAccount"] = 2] = "CreateAccount";
+  AuthStatusEnum2[AuthStatusEnum2["EnableTrading"] = 3] = "EnableTrading";
+  return AuthStatusEnum2;
+})(AuthStatusEnum || {});
+var useAuthStatus = () => {
+  const { state } = hooks.useAccount();
+  const { wrongNetwork, disabledConnect } = reactApp.useAppContext();
+  return react.useMemo(() => {
+    if (wrongNetwork && !disabledConnect) {
+      return 0 /* WrongNetwork */;
+    }
+    if (state.status === types.AccountStatusEnum.EnableTradingWithoutConnected) {
+      return 3 /* EnableTrading */;
+    }
+    if (state.status <= types.AccountStatusEnum.NotConnected || disabledConnect) {
+      return 1 /* ConnectWallet */;
+    }
+    if (state.status <= types.AccountStatusEnum.NotSignedIn) {
+      return 2 /* CreateAccount */;
+    }
+    return 3 /* EnableTrading */;
+  }, [state.status, wrongNetwork, disabledConnect]);
+};
 
-exports.AuthGuard = A;
-exports.AuthGuardDataTable = St;
-exports.AuthGuardEmpty = he;
-exports.AuthGuardTooltip = ye;
-exports.AuthStatusEnum = Te;
-exports.WalletConnectContent = Z;
-exports.WalletConnectorModalId = D;
-exports.WalletConnectorSheetId = F;
-exports.WalletConnectorWidget = Q;
-exports.useAuthStatus = Dt;
-exports.useWalletConnectorBuilder = K;
+exports.AuthGuard = AuthGuard;
+exports.AuthGuardDataTable = AuthGuardDataTable;
+exports.AuthGuardEmpty = AuthGuardEmpty;
+exports.AuthGuardTooltip = AuthGuardTooltip;
+exports.AuthStatusEnum = AuthStatusEnum;
+exports.WalletConnectContent = WalletConnectContent;
+exports.WalletConnectorModalId = WalletConnectorModalId;
+exports.WalletConnectorSheetId = WalletConnectorSheetId;
+exports.WalletConnectorWidget = WalletConnectorWidget;
+exports.useAuthStatus = useAuthStatus;
+exports.useWalletConnectorBuilder = useWalletConnectorBuilder;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map