@orderly.network/wallet-connector-privy 2.5.2 → 2.5.3-alpha.1

package/dist/index.mjs

@@ -1,10 +1,10 @@
-import React19, { createContext, useMemo, useContext, useState, useRef, useEffect, useCallback } from 'react';
+import React19, { createContext, useState, useEffect, useMemo, useContext, useRef, useCallback } from 'react';
 import * as viemExport from 'viem';
 import { defineChain } from 'viem';
 import { mainnet, abstract, abstractTestnet } from 'viem/chains';
-import { useWalletConnector, useAccount, useSWR, WalletConnectorContext, useTrack, useStorageLedgerAddress, useLocalStorage, useStorageChain } from '@orderly.network/hooks';
+import { useWalletConnector, useAccount, useSWR, fetcher, WalletConnectorContext, useTrack, useStorageLedgerAddress, useLocalStorage, useStorageChain } from '@orderly.network/hooks';
 import { SOLANA_TESTNET_CHAINID, SOLANA_MAINNET_CHAINID, ChainNamespace, ABSTRACT_CHAIN_ID_MAP, AccountStatusEnum, ABSTRACT_TESTNET_CHAINID, ABSTRACT_MAINNET_CHAINID, SolanaChains as SolanaChains$1, AbstractChains, AbstractTestnetChainInfo, ArbitrumSepoliaChainInfo, SolanaDevnetChainInfo, TrackerEventName, ConnectorKey } from '@orderly.network/types';
-import { installExtension, ExtensionPositionEnum, useScreen, Button, Text, formatAddress, cn, TooltipProvider, CloseIcon, ScrollArea, ExclamationFillIcon, Tooltip, CopyIcon, Checkbox, toast, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, DropdownMenuItem, Flex, ChevronDownIcon, ChevronUpIcon, SimpleDialog, ChainIcon, Popover, modal } from '@orderly.network/ui';
+import { modal, useModal, SimpleSheet, SheetHeader, Text, Flex, Grid, Divider, cn, installExtension, ExtensionPositionEnum, useScreen, formatAddress, Button, SimpleDialog, TooltipProvider, CloseIcon, ScrollArea, ExclamationFillIcon, Tooltip, CopyIcon, Checkbox, toast, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, DropdownMenuItem, ChevronDownIcon, ChevronUpIcon, ChainIcon, Popover } from '@orderly.network/ui';
 import { useTranslation, Trans } from '@orderly.network/i18n';
 import { AbstractWalletProvider as AbstractWalletProvider$1, useLoginWithAbstract, useAbstractClient, useGlobalWalletSignerAccount } from '@abstract-foundation/agw-react';
 import * as WagmiExport from 'wagmi';
@@ -14,7 +14,6 @@ import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
 import { PrivyProvider, usePrivy, useWallets, useSolanaWallets } from '@privy-io/react-auth';
 import { WalletProvider, useWallet } from '@solana/wallet-adapter-react';
 import { create } from 'zustand';
-import { createPortal } from 'react-dom';
 import { AuthGuard } from '@orderly.network/ui-connector';
 import { PhantomWalletAdapter } from '@solana/wallet-adapter-wallets';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -724,60 +723,227 @@ function useWagmiWallet() {
   }
   return context;
 }
-function Drawer({ children, isOpen, onClose }) {
-  const [windowHeight, setWindowHeight] = useState(0);
-  const { isMobile } = useScreen();
+var MoreIcon = (props) => /* @__PURE__ */ React19.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    ...props
+  },
+  /* @__PURE__ */ React19.createElement("path", { d: "M8.00521 6.66797C8.74161 6.66797 9.33854 7.26464 9.33854 8.0013C9.33854 8.73797 8.74161 9.33464 8.00521 9.33464C7.26881 9.33464 6.67188 8.73797 6.67188 8.0013C6.67188 7.26464 7.26881 6.66797 8.00521 6.66797Z" }),
+  /* @__PURE__ */ React19.createElement("path", { d: "M3.33333 6.66797C4.06973 6.66797 4.66667 7.26464 4.66667 8.0013C4.66667 8.73797 4.06973 9.33464 3.33333 9.33464C2.59693 9.33464 2 8.73797 2 8.0013C2 7.26464 2.59693 6.66797 3.33333 6.66797Z" }),
+  /* @__PURE__ */ React19.createElement("path", { d: "M12.6666 6.66797C13.403 6.66797 14 7.26464 14 8.0013C14 8.73797 13.403 9.33464 12.6666 9.33464C11.9302 9.33464 11.3333 8.73797 11.3333 8.0013C11.3333 7.26464 11.9302 6.66797 12.6666 6.66797Z" })
+);
+var DisconnectIcon = (props) => /* @__PURE__ */ React19.createElement(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    ...props
+  },
+  /* @__PURE__ */ React19.createElement("g", { id: "box-arrow-right" }, /* @__PURE__ */ React19.createElement(
+    "path",
+    {
+      id: "Vector",
+      d: "M1.99365 4.66056C1.99365 3.1879 3.18759 1.9939 4.66032 1.9939H7.32698C8.79965 1.9939 9.99365 3.1879 9.99365 4.66056C9.99365 5.02856 9.69498 5.32723 9.32698 5.32723C8.95898 5.32723 8.66032 5.02856 8.66032 4.66056C8.66032 3.92389 8.06365 3.32723 7.32698 3.32723H4.66032C3.92392 3.32723 3.32699 3.92389 3.32699 4.66056V11.3272C3.32699 12.0639 3.92392 12.6606 4.66032 12.6606H7.32698C8.06365 12.6606 8.66032 12.0639 8.66032 11.3272C8.66032 10.9592 8.95898 10.6606 9.32698 10.6606C9.69498 10.6606 9.99365 10.9592 9.99365 11.3272C9.99365 12.7999 8.79965 13.9939 7.32698 13.9939H4.66032C3.18759 13.9939 1.99365 12.7999 1.99365 11.3272V4.66056ZM6.66032 7.99389C6.66032 7.62589 6.95898 7.32722 7.32698 7.32722H12.369L11.0563 5.99389L11.9937 5.05656L14.473 7.51456C14.733 7.77523 14.733 8.21255 14.473 8.47322L11.9937 10.9312L11.0563 9.99389L12.369 8.66056H7.32698C6.95898 8.66056 6.66032 8.36189 6.66032 7.99389Z"
+    }
+  ))
+);
+var ArrowRightIcon = ({ size, ...props }) => /* @__PURE__ */ React19.createElement(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 14 14",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React19.createElement("path", { d: "M3.50696 6.9958C3.50696 6.6738 3.76788 6.41305 4.08971 6.41305C4.36842 6.41305 7.62762 6.41305 8.49679 6.41305L6.76662 4.6648L7.58621 3.84521L10.336 6.57697C10.4504 6.69072 10.507 6.84355 10.507 6.99639C10.507 7.14864 10.4498 7.30089 10.336 7.41464L7.58621 10.1464L6.76662 9.3268L8.49679 7.57854C7.62762 7.57854 4.36842 7.57854 4.08971 7.57854C3.76788 7.57854 3.50696 7.3178 3.50696 6.9958Z" })
+);
+var ArrowRightLinearGradientIcon = ({
+  size,
+  ...props
+}) => /* @__PURE__ */ React19.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 20 20",
+    fill: "none"
+  },
+  /* @__PURE__ */ React19.createElement(
+    "path",
+    {
+      d: "M5.01001 9.994C5.01001 9.534 5.38276 9.1615 5.84251 9.1615C6.24068 9.1615 10.8967 9.1615 12.1383 9.1615L9.66667 6.664L10.8375 5.49316L14.7658 9.39568C14.9292 9.55818 15.01 9.7765 15.01 9.99484C15.01 10.2123 14.9283 10.4298 14.7658 10.5923L10.8375 14.4948L9.66667 13.324L12.1383 10.8265C10.8967 10.8265 6.24068 10.8265 5.84251 10.8265C5.38276 10.8265 5.01001 10.454 5.01001 9.994Z",
+      fill: "url(#paint0_linear_2269_12077)"
+    }
+  ),
+  /* @__PURE__ */ React19.createElement("defs", null, /* @__PURE__ */ React19.createElement(
+    "linearGradient",
+    {
+      id: "paint0_linear_2269_12077",
+      x1: "15.01",
+      y1: "9.994",
+      x2: "5.01001",
+      y2: "9.994",
+      gradientUnits: "userSpaceOnUse"
+    },
+    /* @__PURE__ */ React19.createElement("stop", { stopColor: "#59B0FE" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "1", stopColor: "#26FEFE" })
+  ))
+);
+var PwaDialog = modal.create((props) => {
+  const { visible, hide, resolve, reject, onOpenChange } = useModal();
+  const [domain, setDomain] = useState("");
+  const { t } = useTranslation();
   useEffect(() => {
-    setWindowHeight(window.innerHeight);
-    const handleResize = () => {
-      setWindowHeight(window.innerHeight);
-    };
-    window.addEventListener("resize", handleResize);
-    if (isOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "auto";
+    setDomain(window.location.hostname);
+  }, []);
+  return /* @__PURE__ */ React19.createElement(SimpleSheet, { open: visible, onOpenChange }, /* @__PURE__ */ React19.createElement(SheetHeader, null, /* @__PURE__ */ React19.createElement(Text, { className: "oui-text-base-contrast-80 oui-text " }, t("connector.privy.pwa.sheetTitle"))), /* @__PURE__ */ React19.createElement(Flex, { direction: "column", gap: 3, className: "oui-w-full" }, /* @__PURE__ */ React19.createElement(Text, { className: "oui-text-base-contrast-80 oui-text " }, t("connector.privy.pwa.description")), /* @__PURE__ */ React19.createElement(Flex, { direction: "column", gap: 4, className: "oui-w-full" }, /* @__PURE__ */ React19.createElement(
+    StepItem,
+    {
+      index: 1,
+      title: t("connector.privy.pwa.step1"),
+      content: /* @__PURE__ */ React19.createElement(Flex, { className: "oui-w-full oui-bg-dark-8" }, /* @__PURE__ */ React19.createElement(
+        Grid,
+        {
+          rows: 1,
+          cols: 3,
+          className: "oui-bg-black/[0.08] oui-p-2 oui-h-[52px] oui-rounded-[44px] oui-w-full oui-px-4"
+        },
+        /* @__PURE__ */ React19.createElement("div", null),
+        /* @__PURE__ */ React19.createElement(Text, { className: "oui-text-black/[0.88] oui-text-[20px] oui-leading-[36px] oui-flex-1" }, domain),
+        /* @__PURE__ */ React19.createElement(Flex, { itemAlign: "center", justify: "end" }, /* @__PURE__ */ React19.createElement(ShareIcon, null))
+      ))
     }
-    return () => {
-      document.body.style.overflow = "auto";
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [isOpen, isMobile]);
-  if (!isOpen)
-    return null;
-  const drawerHeight = isMobile ? windowHeight : windowHeight - 72 - 24;
-  return createPortal(
-    /* @__PURE__ */ React19.createElement("div", { className: "oui-fixed oui-inset-0 oui-z-[60]" }, /* @__PURE__ */ React19.createElement(
-      "div",
+  ), /* @__PURE__ */ React19.createElement(
+    StepItem,
+    {
+      index: 2,
+      title: t("connector.privy.pwa.step2"),
+      classNames: {
+        content: "oui-bg-[#e9e9eb]"
+      },
+      content: /* @__PURE__ */ React19.createElement(
+        Flex,
+        {
+          className: "oui-w-full oui-bg-base-contrast oui-rounded-[12px]",
+          direction: "column"
+        },
+        /* @__PURE__ */ React19.createElement(
+          Flex,
+          {
+            className: "oui-w-full oui-px-4 oui-py-3",
+            justify: "start",
+            itemAlign: "center"
+          },
+          /* @__PURE__ */ React19.createElement(Text, { className: "oui-text-black/[0.2] oui-text-[18px]" }, t("connector.privy.pwa.findOnPage"))
+        ),
+        /* @__PURE__ */ React19.createElement(Divider, { className: "oui-bg-black/[0.15] oui-w-full" }),
+        /* @__PURE__ */ React19.createElement(Grid, { cols: 3, className: "oui-w-full oui-px-4 oui-py-3" }, /* @__PURE__ */ React19.createElement(Text, { className: "oui-text-black/[0.88] oui-text-[18px] oui-col-span-2" }, t("connector.privy.pwa.addToHomeScreen")), /* @__PURE__ */ React19.createElement(Flex, { itemAlign: "center", justify: "end" }, /* @__PURE__ */ React19.createElement(AddIcon, null)))
+      )
+    }
+  ))));
+});
+var ShareIcon = () => {
+  return /* @__PURE__ */ React19.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "28",
+      height: "28",
+      viewBox: "0 0 28 28",
+      fill: "none"
+    },
+    /* @__PURE__ */ React19.createElement(
+      "path",
       {
-        className: "oui-absolute oui-inset-0 oui-bg-[rgba(0,0,0,0.48)] oui-transition-opacity",
-        onClick: onClose
+        d: "M5 23.3333V13.6667C5 12.1939 6.15127 11 7.57143 11H10.6744V12.7778H7.57143C7.09804 12.7778 6.71429 13.1757 6.71429 13.6667V23.3333C6.71429 23.8243 7.09804 24.2222 7.57143 24.2222H20.4286C20.902 24.2222 21.2857 23.8243 21.2857 23.3333V13.6667C21.2857 13.1757 20.902 12.7778 20.4286 12.7778H17.555V11H20.4286C21.8487 11 23 12.1939 23 13.6667V23.3333C23 24.8061 21.8487 26 20.4286 26H7.57143C6.15127 26 5 24.8061 5 23.3333Z",
+        fill: "black",
+        fillOpacity: "0.48"
       }
-    ), /* @__PURE__ */ React19.createElement(
-      "div",
+    ),
+    /* @__PURE__ */ React19.createElement(
+      "path",
+      {
+        d: "M13.3759 2.25933C13.7206 1.91356 14.2794 1.91356 14.6241 2.25933L20.2416 7.89432C20.586 8.24011 20.5862 8.80066 20.2416 9.14634C19.897 9.49203 19.3382 9.49185 18.9935 9.14634L14.8827 5.02278V19H13.1173V5.02278L9.00654 9.14634C8.66182 9.49185 8.10301 9.49203 7.7584 9.14634C7.41378 8.80066 7.41396 8.24011 7.7584 7.89432L13.3759 2.25933Z",
+        fill: "black",
+        fillOpacity: "0.48"
+      }
+    )
+  );
+};
+var AddIcon = () => {
+  return /* @__PURE__ */ React19.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none"
+    },
+    /* @__PURE__ */ React19.createElement(
+      "path",
+      {
+        d: "M7.00598 3.92969H17.006C18.6627 3.92969 20.006 5.27297 20.006 6.92969V16.9297C20.006 18.5864 18.6627 19.9297 17.006 19.9297H7.00598C5.34927 19.9297 4.00598 18.5864 4.00598 16.9297V6.92969C4.00598 5.27297 5.34927 3.92969 7.00598 3.92969Z",
+        stroke: "black",
+        strokeOpacity: "0.88",
+        strokeWidth: "2"
+      }
+    ),
+    /* @__PURE__ */ React19.createElement(
+      "path",
+      {
+        d: "M8 12L16 12",
+        stroke: "black",
+        strokeOpacity: "0.88",
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ React19.createElement(
+      "path",
+      {
+        d: "M12 8L12 16",
+        stroke: "black",
+        strokeOpacity: "0.88",
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      }
+    )
+  );
+};
+var StepItem = (props) => {
+  return /* @__PURE__ */ React19.createElement(
+    Flex,
+    {
+      className: " oui-rounded-[12px] oui-w-full oui-overflow-hidden",
+      direction: "column"
+    },
+    /* @__PURE__ */ React19.createElement(Flex, { className: "oui-bg-base-4 oui-w-full oui-px-3 oui-py-3 oui-gap-[6px]" }, /* @__PURE__ */ React19.createElement(Text, { className: "oui-text-base-contrast-80 oui-text-xs oui-w-[18px] oui-h-[18px] oui-rounded-[100%] oui-bg-[linear-gradient(270deg,#59B0FE_0%,#26FEFE_100%)] oui-text-center oui-text-black " }, props.index), /* @__PURE__ */ React19.createElement(Text, { className: "oui-text-base-contrast-80 oui-text-xs" }, props.title)),
+    /* @__PURE__ */ React19.createElement(
+      Flex,
       {
-        style: { height: `${drawerHeight}px` },
         className: cn(
-          "oui-fixed oui-top-0 oui-right-0",
-          "oui-bg-[#131519] oui-shadow-lg",
-          "oui-border oui-border-line-12",
-          "oui-w-[276px]",
-          "md:oui-w-[300px]",
-          "md:oui-top-1/2 md:oui-translate-y-[-50%]",
-          "oui-rounded-0 md:oui-rounded-2xl",
-          "md:oui-rounded-0",
-          "oui-p-4",
-          "oui-transform oui-transition-transform oui-duration-300 oui-ease-in-out",
-          "oui-flex oui-flex-col oui-justify-between",
-          "oui-m-0 md:oui-m-3",
-          isOpen ? "oui-translate-x-0" : "oui--translate-x-full"
-        )
+          "oui-bg-base-contrast oui-h-[120px] oui-w-full oui-px-6",
+          props.classNames?.content
+        ),
+        justify: "center",
+        itemAlign: "center"
       },
-      children
-    )),
-    document.body
+      props.content
+    )
   );
-}
+};
 var OrderlyOSS = "https://oss.orderly.network";
 var PrivyConnectorImagePath = `${OrderlyOSS}/static/sdk/privy`;
 var WALLET_ICONS = {
@@ -842,6 +1008,7 @@ function useWallet2() {
   } = useAbstractWallet();
   const [wallet, setWallet] = useState(null);
   const [namespace, setNamespace] = useState(null);
+  const [walletType, setWalletType] = useState(null);
   const { storageChain, setStorageChain } = useStorageChain();
   const { setOpenConnectDrawer, targetWalletType, setTargetWalletType } = useWalletConnectorPrivy();
   const isManual = useRef(false);
@@ -948,11 +1115,11 @@ function useWallet2() {
       }
     }
   };
-  const switchWallet = (walletType) => {
+  const switchWallet = (walletType2) => {
     const fromWallet = wallet?.accounts[0].address;
     let toWallet;
     if (isPrivy) {
-      switch (walletType) {
+      switch (walletType2) {
         case "EVM" /* EVM */:
           if (privyWalletEVM) {
             setStorageChain(privyWalletEVM.chain.id);
@@ -967,7 +1134,7 @@ function useWallet2() {
           break;
       }
     } else {
-      switch (walletType) {
+      switch (walletType2) {
         case "EVM" /* EVM */:
           if (walletEVM) {
             setStorageChain(walletEVM.chain.id);
@@ -993,8 +1160,8 @@ function useWallet2() {
       toWallet
     });
   };
-  const disconnect = async (walletType) => {
-    switch (walletType) {
+  const disconnect = async (walletType2) => {
+    switch (walletType2) {
       case "privy" /* PRIVY */:
         return await disconnectPrivy();
       case "EVM" /* EVM */:
@@ -1005,8 +1172,21 @@ function useWallet2() {
         return disconnectAbstract();
     }
   };
+  const onDisconnect = (parmas) => {
+    if (!walletType) {
+      throw new Error("No wallet type found");
+    }
+    return new Promise((resolve, reject) => {
+      disconnect(walletType).then(() => {
+        resolve(true);
+      }).catch((e) => {
+        reject(e);
+      });
+    });
+  };
   const setNullWalletStatus = () => {
     setWallet(null);
+    setWalletType(null);
     setConnectedChain(null);
     setNamespace(null);
   };
@@ -1020,6 +1200,7 @@ function useWallet2() {
       }
       if (privyWalletEVM) {
         setWallet(privyWalletEVM);
+        setWalletType("privy" /* PRIVY */);
         setConnectedChain(privyWalletEVM.chain);
         setNamespace(ChainNamespace.evm);
       } else {
@@ -1029,6 +1210,7 @@ function useWallet2() {
     if (storageChain?.namespace === ChainNamespace.solana) {
       if (privyWalletSOL) {
         setWallet(privyWalletSOL);
+        setWalletType("privy" /* PRIVY */);
         setConnectedChain(privyWalletSOL.chain);
         setNamespace(ChainNamespace.solana);
       } else {
@@ -1044,6 +1226,7 @@ function useWallet2() {
       if (AbstractChains.has(storageChain.chainId)) {
         if (isConnectedAbstract && walletAbstract) {
           setWallet(walletAbstract);
+          setWalletType("Abstract" /* ABSTRACT */);
           setConnectedChain(connectedChainAbstract);
           setNamespace(ChainNamespace.evm);
         } else {
@@ -1052,6 +1235,7 @@ function useWallet2() {
       } else {
         if (isConnectedEVM && walletEVM) {
           setWallet(walletEVM);
+          setWalletType("EVM" /* EVM */);
           setConnectedChain(connectedChainEvm);
           setNamespace(ChainNamespace.evm);
         } else {
@@ -1062,6 +1246,7 @@ function useWallet2() {
     if (storageChain?.namespace === ChainNamespace.solana) {
       if (isConnectedSOL && walletSOL) {
         setWallet(walletSOL);
+        setWalletType("SOL" /* SOL */);
         setConnectedChain(connectedChainSOL);
         setNamespace(ChainNamespace.solana);
       } else {
@@ -1086,14 +1271,19 @@ function useWallet2() {
     setChain,
     namespace,
     switchWallet,
-    disconnect
+    disconnect,
+    onDisconnect
   };
 }
 function AbstractConnectArea({ connect }) {
+  const { isMobile } = useScreen();
   return /* @__PURE__ */ React19.createElement("div", null, /* @__PURE__ */ React19.createElement("div", { className: "oui-mb-2 oui-text-sm oui-font-semibold oui-text-base-contrast-80" }, "Abstract"), /* @__PURE__ */ React19.createElement("div", { className: "oui-grid oui-grid-cols-2 oui-gap-2" }, /* @__PURE__ */ React19.createElement(
     "div",
     {
-      className: " oui-flex oui-flex-1 oui-cursor-pointer oui-items-center oui-justify-start oui-gap-1 oui-rounded-[6px] oui-bg-[#07080A] oui-px-2 oui-py-[11px]",
+      className: cn(
+        " oui-flex oui-flex-1 oui-cursor-pointer oui-items-center oui-justify-start oui-gap-1 oui-rounded-[6px]  oui-px-2 oui-py-[11px]",
+        isMobile ? "oui-bg-base-5" : "oui-bg-[#07080A]"
+      ),
       onClick: () => connect()
     },
     /* @__PURE__ */ React19.createElement("div", { className: "oui-flex oui-size-[18px] oui-items-center oui-justify-center" }, /* @__PURE__ */ React19.createElement(
@@ -1107,109 +1297,123 @@ function AbstractConnectArea({ connect }) {
     /* @__PURE__ */ React19.createElement("div", { className: "oui-text-2xs oui-text-base-contrast" }, "Abstract")
   )));
 }
-function PrivyConnectArea({
-  connect
-}) {
+var RenderLoginMethodsDom = ({
+  connect,
+  loginMethods
+}) => {
   const { t } = useTranslation();
-  const { isMobile, isDesktop } = useScreen();
-  const { connectorWalletType, privyConfig } = useWalletConnectorPrivy();
-  const loginMethods = privyConfig.loginMethods;
-  const renderLoginMethodsDom = () => {
-    const arr = [];
-    if (loginMethods?.includes("email")) {
-      arr.push(
+  const { isDesktop } = useScreen();
+  const arr = [];
+  if (loginMethods?.includes("email")) {
+    arr.push(
+      /* @__PURE__ */ React19.createElement(
+        "div",
+        {
+          className: cn(
+            "oui-flex oui-cursor-pointer oui-items-center oui-justify-center oui-gap-1 oui-rounded-[6px]  oui-border oui-border-base-contrast-12 oui-px-2 oui-py-[11px]",
+            isDesktop && "oui-border-none oui-bg-[#333948]"
+          ),
+          onClick: () => connect({ walletType: "privy", extraType: "email" })
+        },
         /* @__PURE__ */ React19.createElement(
-          "div",
+          "img",
           {
-            className: "oui-flex oui-cursor-pointer oui-items-center oui-justify-center oui-gap-1 oui-rounded-[6px] oui-bg-[#333948] oui-px-2 oui-py-[11px]",
-            onClick: () => connect({ walletType: "privy", extraType: "email" })
-          },
-          /* @__PURE__ */ React19.createElement(
-            "img",
-            {
-              src: "https://oss.orderly.network/static/sdk/privy/email.svg",
-              className: "oui-size-[18px]"
-            }
+            src: "https://oss.orderly.network/static/sdk/privy/email.svg",
+            className: "oui-size-[18px]"
+          }
+        ),
+        isDesktop && /* @__PURE__ */ React19.createElement("div", { className: "oui-text-2xs oui-text-base-contrast" }, t("connector.privy.email"))
+      )
+    );
+  }
+  if (loginMethods?.includes("google")) {
+    arr.push(
+      /* @__PURE__ */ React19.createElement(
+        "div",
+        {
+          className: cn(
+            "oui-flex oui-cursor-pointer oui-items-center oui-justify-center oui-gap-1 oui-rounded-[6px]  oui-border oui-border-base-contrast-12 oui-px-2 oui-py-[11px]",
+            isDesktop && "oui-border-none oui-bg-[#335FFC]"
           ),
-          /* @__PURE__ */ React19.createElement("div", { className: "oui-text-2xs oui-text-base-contrast" }, t("connector.privy.email"))
-        )
-      );
-    }
-    if (loginMethods?.includes("google")) {
-      arr.push(
+          onClick: () => connect({ walletType: "privy", extraType: "google" })
+        },
         /* @__PURE__ */ React19.createElement(
-          "div",
+          "img",
           {
-            className: "oui-flex oui-cursor-pointer oui-items-center oui-justify-center oui-gap-1 oui-rounded-[6px] oui-bg-[#335FFC] oui-px-2 oui-py-[11px]",
-            onClick: () => connect({ walletType: "privy", extraType: "google" })
-          },
-          /* @__PURE__ */ React19.createElement(
-            "img",
-            {
-              src: "https://oss.orderly.network/static/sdk/privy/google.svg",
-              className: "oui-size-[18px]"
-            }
+            src: "https://oss.orderly.network/static/sdk/privy/google.svg",
+            className: "oui-size-[18px]"
+          }
+        ),
+        isDesktop && /* @__PURE__ */ React19.createElement("div", { className: "oui-text-2xs oui-text-base-contrast" }, t("connector.privy.google"))
+      )
+    );
+  }
+  if (loginMethods?.includes("twitter")) {
+    arr.push(
+      /* @__PURE__ */ React19.createElement(
+        "div",
+        {
+          className: cn(
+            "oui-flex oui-cursor-pointer oui-items-center oui-justify-center oui-gap-1 oui-rounded-[6px]  oui-border oui-border-base-contrast-12 oui-px-2 oui-py-[11px]",
+            isDesktop && "oui-border-none oui-bg-[#07080A]"
           ),
-          /* @__PURE__ */ React19.createElement("div", { className: "oui-text-2xs oui-text-base-contrast" }, t("connector.privy.google"))
-        )
-      );
-    }
-    if (loginMethods?.includes("twitter")) {
-      arr.push(
+          onClick: () => connect({ walletType: "privy", extraType: "twitter" })
+        },
         /* @__PURE__ */ React19.createElement(
-          "div",
+          "img",
           {
-            className: "oui-flex oui-cursor-pointer oui-items-center oui-justify-center oui-gap-1 oui-rounded-[6px] oui-bg-[#07080A] oui-px-2 oui-py-[11px]",
-            onClick: () => connect({ walletType: "privy", extraType: "twitter" })
-          },
-          /* @__PURE__ */ React19.createElement(
-            "img",
-            {
-              src: "https://oss.orderly.network/static/sdk/privy/twitter.svg",
-              className: "oui-size-[18px]"
-            }
-          ),
-          /* @__PURE__ */ React19.createElement("div", { className: "oui-text-2xs oui-text-base-contrast" }, t("connector.privy.twitter"))
-        )
-      );
-    }
-    return arr.map((item, index) => {
-      return /* @__PURE__ */ React19.createElement("div", { key: index }, item);
-    });
-  };
-  return /* @__PURE__ */ React19.createElement("div", { className: "" }, /* @__PURE__ */ React19.createElement(
-    "div",
-    {
-      className: cn(
-        "oui-flex oui-items-center oui-justify-between",
-        "oui-mb-3 oui-text-sm oui-font-semibold oui-text-base-contrast-80",
-        "md:oui-mb-2"
+            src: "https://oss.orderly.network/static/sdk/privy/twitter.svg",
+            className: "oui-size-[18px]"
+          }
+        ),
+        isDesktop && /* @__PURE__ */ React19.createElement("div", { className: "oui-text-2xs oui-text-base-contrast" }, t("connector.privy.twitter"))
       )
-    },
-    t("connector.privy.loginIn"),
-    isMobile && /* @__PURE__ */ React19.createElement("div", { className: "oui-flex oui-h-3 oui-justify-center" }, /* @__PURE__ */ React19.createElement(
-      "img",
-      {
-        src: "https://oss.orderly.network/static/sdk/privy/privy-logo.png",
-        className: " oui-h-[10px]"
-      }
-    ))
-  ), /* @__PURE__ */ React19.createElement(
+    );
+  }
+  return arr.map((item, index) => {
+    return /* @__PURE__ */ React19.createElement("div", { key: index }, item);
+  });
+};
+var PrivyConnectAreaMobile = ({
+  connect
+}) => {
+  const { t } = useTranslation();
+  const { isMobile, isDesktop } = useScreen();
+  const { connectorWalletType, privyConfig } = useWalletConnectorPrivy();
+  const loginMethods = privyConfig.loginMethods;
+  return /* @__PURE__ */ React19.createElement(Flex, { direction: "column", className: "oui-w-full" }, /* @__PURE__ */ React19.createElement(Grid, { cols: 3, rows: 1, className: "oui-w-full", gap: 2 }, /* @__PURE__ */ React19.createElement(RenderLoginMethodsDom, { connect, loginMethods })), (!connectorWalletType.disableWagmi || !connectorWalletType.disableSolana) && /* @__PURE__ */ React19.createElement("div", { className: "oui-mt-4 oui-h-px oui-w-full oui-bg-line md:oui-mt-5" }));
+};
+var PrivyConnectAreaDesktop = ({
+  connect
+}) => {
+  const { t } = useTranslation();
+  const { connectorWalletType, privyConfig } = useWalletConnectorPrivy();
+  const loginMethods = privyConfig.loginMethods;
+  return /* @__PURE__ */ React19.createElement(Flex, { direction: "column", gap: 2, itemAlign: "start", className: "oui-w-full" }, /* @__PURE__ */ React19.createElement(
     "div",
     {
       className: cn(
-        "oui-grid oui-grid-cols-2 oui-gap-2",
-        "md:oui-flex md:oui-flex-col md:oui-gap-2"
+        "oui-flex oui-items-center oui-justify-between",
+        "oui-mb-3 oui-text-sm oui-font-semibold oui-text-base-contrast-80"
       )
     },
-    renderLoginMethodsDom()
-  ), isDesktop && /* @__PURE__ */ React19.createElement("div", { className: "oui-mt-4 oui-flex oui-h-3 oui-justify-center" }, /* @__PURE__ */ React19.createElement(
+    t("connector.privy.loginIn")
+  ), /* @__PURE__ */ React19.createElement(Grid, { cols: 1, gap: 2, className: "oui-w-full" }, /* @__PURE__ */ React19.createElement(RenderLoginMethodsDom, { connect, loginMethods })), /* @__PURE__ */ React19.createElement("div", { className: "oui-mt-4 oui-flex oui-h-3 oui-justify-center" }, /* @__PURE__ */ React19.createElement(
     "img",
     {
       src: "https://oss.orderly.network/static/sdk/privy/privy-logo.png",
       className: " oui-h-[10px]"
     }
   )), (!connectorWalletType.disableWagmi || !connectorWalletType.disableSolana) && /* @__PURE__ */ React19.createElement("div", { className: "oui-mt-4 oui-h-px oui-w-full oui-bg-line md:oui-mt-5" }));
+};
+function PrivyConnectArea({
+  connect
+}) {
+  const { isDesktop } = useScreen();
+  if (isDesktop) {
+    return /* @__PURE__ */ React19.createElement(PrivyConnectAreaDesktop, { connect });
+  }
+  return /* @__PURE__ */ React19.createElement(PrivyConnectAreaMobile, { connect });
 }
 function RenderPrivyTypeIcon({
   type,
@@ -1324,11 +1528,15 @@ function SOLConnectArea({
   connect
 }) {
   const { wallets } = useSolanaWallet();
+  const { isMobile } = useScreen();
   return /* @__PURE__ */ React19.createElement("div", null, /* @__PURE__ */ React19.createElement("div", { className: "oui-mb-2 oui-text-sm oui-font-semibold oui-text-base-contrast-80" }, "Solana"), /* @__PURE__ */ React19.createElement("div", { className: "oui-grid oui-grid-cols-2 oui-gap-2" }, wallets.map((item, key) => /* @__PURE__ */ React19.createElement(
     "div",
     {
       key,
-      className: " oui-flex oui-flex-1 oui-cursor-pointer oui-items-center oui-justify-start oui-gap-1 oui-rounded-[6px] oui-bg-[#07080A] oui-px-2 oui-py-[11px]",
+      className: cn(
+        " oui-flex oui-flex-1 oui-cursor-pointer oui-items-center oui-justify-start oui-gap-1 oui-rounded-[6px]  oui-px-2 oui-py-[11px]",
+        isMobile ? "oui-bg-base-5" : "oui-bg-[#07080A]"
+      ),
       onClick: () => connect(item.adapter)
     },
     /* @__PURE__ */ React19.createElement(RenderWalletIcon, { connector: item.adapter }),
@@ -1337,11 +1545,15 @@ function SOLConnectArea({
 }
 function EVMConnectArea({ connect }) {
   const { connectors } = useWagmiWallet();
+  const { isMobile } = useScreen();
   return /* @__PURE__ */ React19.createElement("div", { className: "" }, /* @__PURE__ */ React19.createElement("div", { className: "oui-mb-2 oui-text-sm oui-font-semibold oui-text-base-contrast-80" }, "EVM"), /* @__PURE__ */ React19.createElement("div", { className: "oui-grid oui-grid-cols-2 oui-gap-2" }, connectors.map((item, key) => /* @__PURE__ */ React19.createElement(
     "div",
     {
       key,
-      className: " oui-flex oui-flex-1 oui-cursor-pointer oui-items-center oui-justify-start oui-gap-1 oui-rounded-[6px] oui-bg-[#07080A] oui-px-2 oui-py-[11px]",
+      className: cn(
+        " oui-flex oui-flex-1 oui-cursor-pointer oui-items-center oui-justify-start oui-gap-1 oui-rounded-[6px]  oui-px-2 oui-py-[11px]",
+        isMobile ? "oui-bg-base-5" : "oui-bg-[#07080A]"
+      ),
       onClick: () => connect(item)
     },
     /* @__PURE__ */ React19.createElement(RenderWalletIcon, { connector: item }),
@@ -1421,60 +1633,8 @@ function RenderConnector() {
       }
     );
   };
-  return /* @__PURE__ */ React19.createElement(ScrollArea, { className: "oui-flex oui-grow oui-shrik oui-basis-auto" }, /* @__PURE__ */ React19.createElement("div", { className: cn("oui-flex oui-flex-col oui-gap-4", "md:oui-gap-5") }, renderPrivyConnectArea(), renderWagmiConnectArea(), renderSolanaConnectArea(), renderAbstractConnectArea()));
+  return /* @__PURE__ */ React19.createElement(ScrollArea, { className: "oui-flex oui-grow oui-shrik oui-basis-auto oui-custom-scrollbar" }, /* @__PURE__ */ React19.createElement("div", { className: cn("oui-flex oui-flex-col oui-gap-4", "md:oui-gap-5") }, renderPrivyConnectArea(), renderWagmiConnectArea(), renderSolanaConnectArea(), renderAbstractConnectArea()));
 }
-var MoreIcon = (props) => /* @__PURE__ */ React19.createElement(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "currentColor",
-    ...props
-  },
-  /* @__PURE__ */ React19.createElement("path", { d: "M8.00521 6.66797C8.74161 6.66797 9.33854 7.26464 9.33854 8.0013C9.33854 8.73797 8.74161 9.33464 8.00521 9.33464C7.26881 9.33464 6.67188 8.73797 6.67188 8.0013C6.67188 7.26464 7.26881 6.66797 8.00521 6.66797Z" }),
-  /* @__PURE__ */ React19.createElement("path", { d: "M3.33333 6.66797C4.06973 6.66797 4.66667 7.26464 4.66667 8.0013C4.66667 8.73797 4.06973 9.33464 3.33333 9.33464C2.59693 9.33464 2 8.73797 2 8.0013C2 7.26464 2.59693 6.66797 3.33333 6.66797Z" }),
-  /* @__PURE__ */ React19.createElement("path", { d: "M12.6666 6.66797C13.403 6.66797 14 7.26464 14 8.0013C14 8.73797 13.403 9.33464 12.6666 9.33464C11.9302 9.33464 11.3333 8.73797 11.3333 8.0013C11.3333 7.26464 11.9302 6.66797 12.6666 6.66797Z" })
-);
-var DisconnectIcon = (props) => /* @__PURE__ */ React19.createElement(
-  "svg",
-  {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "currentColor",
-    ...props
-  },
-  /* @__PURE__ */ React19.createElement("g", { id: "box-arrow-right" }, /* @__PURE__ */ React19.createElement(
-    "path",
-    {
-      id: "Vector",
-      d: "M1.99365 4.66056C1.99365 3.1879 3.18759 1.9939 4.66032 1.9939H7.32698C8.79965 1.9939 9.99365 3.1879 9.99365 4.66056C9.99365 5.02856 9.69498 5.32723 9.32698 5.32723C8.95898 5.32723 8.66032 5.02856 8.66032 4.66056C8.66032 3.92389 8.06365 3.32723 7.32698 3.32723H4.66032C3.92392 3.32723 3.32699 3.92389 3.32699 4.66056V11.3272C3.32699 12.0639 3.92392 12.6606 4.66032 12.6606H7.32698C8.06365 12.6606 8.66032 12.0639 8.66032 11.3272C8.66032 10.9592 8.95898 10.6606 9.32698 10.6606C9.69498 10.6606 9.99365 10.9592 9.99365 11.3272C9.99365 12.7999 8.79965 13.9939 7.32698 13.9939H4.66032C3.18759 13.9939 1.99365 12.7999 1.99365 11.3272V4.66056ZM6.66032 7.99389C6.66032 7.62589 6.95898 7.32722 7.32698 7.32722H12.369L11.0563 5.99389L11.9937 5.05656L14.473 7.51456C14.733 7.77523 14.733 8.21255 14.473 8.47322L11.9937 10.9312L11.0563 9.99389L12.369 8.66056H7.32698C6.95898 8.66056 6.66032 8.36189 6.66032 7.99389Z"
-    }
-  ))
-);
-var ArrowRightIcon = (props) => /* @__PURE__ */ React19.createElement(
-  "svg",
-  {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 14 14",
-    fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props
-  },
-  /* @__PURE__ */ React19.createElement(
-    "path",
-    {
-      d: "M3.50696 6.9958C3.50696 6.6738 3.76788 6.41305 4.08971 6.41305C4.36842 6.41305 7.62762 6.41305 8.49679 6.41305L6.76662 4.6648L7.58621 3.84521L10.336 6.57697C10.4504 6.69072 10.507 6.84355 10.507 6.99639C10.507 7.14864 10.4498 7.30089 10.336 7.41464L7.58621 10.1464L6.76662 9.3268L8.49679 7.57854C7.62762 7.57854 4.36842 7.57854 4.08971 7.57854C3.76788 7.57854 3.50696 7.3178 3.50696 6.9958Z",
-      fill: "#FF7D00"
-    }
-  )
-);
-
-// src/components/switchNetworkTips.tsx
 function SwitchNetworkTips({
   tipsContent
 }) {
@@ -1510,7 +1670,7 @@ function SwitchNetworkTips({
     ), /* @__PURE__ */ React19.createElement("div", { className: "oui-text-2xs oui-text-warning-darken" }, t("connector.privy.switchNetwork.tips", {
       chainName: tipsContent
     }))),
-    /* @__PURE__ */ React19.createElement(ArrowRightIcon, null)
+    /* @__PURE__ */ React19.createElement(ArrowRightIcon, { className: "oui-text-[#FF7D00]" })
   );
 }
 var StorageChainNotCurrentWalletType = ({
@@ -2357,56 +2517,237 @@ function ConnectDrawer(props) {
     connectorKey
   ]);
   const { isMobile } = useScreen();
+  const showPwaDialog = () => {
+    modal.show(PwaDialog);
+  };
   const renderHeader = useCallback(() => {
-    if (isMobile && props.headerProps?.mobile) {
-      return props.headerProps?.mobile;
-    }
     return /* @__PURE__ */ React19.createElement(
       "div",
       {
         className: cn(
           "oui-font-semibold oui-text-base-contrast-80 ",
-          "oui-py-2 oui-text-[20px]",
+          "oui-pb-2 oui-text-[20px]",
           "md:oui-py-0 md:oui-text-base"
         )
       },
       isConnected ? t("connector.privy.myWallet") : t("connector.connectWallet")
     );
-  }, [isMobile, props.headerProps?.mobile, isConnected]);
-  return /* @__PURE__ */ React19.createElement(Drawer, { isOpen: props.open, onClose: () => props.onChangeOpen(false) }, !isMobile && /* @__PURE__ */ React19.createElement(
-    "div",
+  }, [isConnected]);
+  return /* @__PURE__ */ React19.createElement(
+    SimpleSheet,
     {
-      className: "oui-absolute oui-inset-x-[50px] -oui-top-[calc(100vh/2)] oui-z-0 oui-h-screen",
-      style: {
-        background: "conic-gradient(from -41deg at 40.63% 50.41%, rgba(242, 98, 181, 0.00) 125.17920970916748deg, rgba(95, 197, 255, 0.20) 193.4119462966919deg, rgba(255, 172, 137, 0.20) 216.0206937789917deg, rgba(129, 85, 255, 0.20) 236.0708713531494deg, rgba(120, 157, 255, 0.20) 259.95326042175293deg, rgba(159, 115, 241, 0.00) 311.0780096054077deg)",
-        filter: "blur(50px)"
+      open: props.open,
+      onOpenChange: props.onChangeOpen,
+      classNames: {
+        body: "oui-h-full oui-py-0  oui-border-none oui-relative",
+        // overlay: "!oui-bg-base-10/60",
+        content: cn(
+          "!oui-p-4  !oui-bg-[#131519] !oui-border !oui-border-solid !oui-border-line-12",
+          isMobile ? "oui-inset-y-0 oui-right-0 oui-w-[280px] oui-rounded-none !oui-bg-[#181C23]" : "!oui-bottom-[30px] oui-right-3 oui-top-[48px] !oui-h-auto oui-w-[300px] oui-overflow-hidden oui-rounded-[16px] !oui-bg-[#131519] "
+        )
+      },
+      contentProps: { side: "right", closeable: false }
+    },
+    !isMobile && /* @__PURE__ */ React19.createElement(
+      "div",
+      {
+        className: "oui-absolute oui-inset-x-[50px] -oui-top-[calc(100vh/2)] oui-z-0 oui-h-screen",
+        style: {
+          background: "conic-gradient(from -41deg at 40.63% 50.41%, rgba(242, 98, 181, 0.00) 125.17920970916748deg, rgba(95, 197, 255, 0.20) 193.4119462966919deg, rgba(255, 172, 137, 0.20) 216.0206937789917deg, rgba(129, 85, 255, 0.20) 236.0708713531494deg, rgba(120, 157, 255, 0.20) 259.95326042175293deg, rgba(159, 115, 241, 0.00) 311.0780096054077deg)",
+          filter: "blur(50px)"
+        }
       }
-    }
-  ), /* @__PURE__ */ React19.createElement("div", { className: "oui-relative oui-z-10 oui-flex oui-h-full oui-flex-col oui-gap-4 md:oui-gap-5" }, /* @__PURE__ */ React19.createElement("div", { className: "oui-flex oui-flex-none oui-items-center oui-justify-between" }, renderHeader(), /* @__PURE__ */ React19.createElement(
-    CloseIcon,
+    ),
+    /* @__PURE__ */ React19.createElement("div", { className: "oui-relative oui-z-10 oui-flex oui-h-full oui-flex-col oui-gap-4 md:oui-gap-5" }, /* @__PURE__ */ React19.createElement("div", { className: "oui-flex oui-flex-none oui-items-center oui-justify-between" }, renderHeader(), /* @__PURE__ */ React19.createElement(
+      CloseIcon,
+      {
+        className: "oui-size-5 oui-cursor-pointer oui-text-base-contrast-20 hover:oui-text-base-contrast-80",
+        onClick: () => props.onChangeOpen(false)
+      }
+    )), isConnected ? /* @__PURE__ */ React19.createElement(MyWallet, null) : /* @__PURE__ */ React19.createElement(RenderConnector, null), !isConnected && /* @__PURE__ */ React19.createElement(Flex, { gap: 4, direction: "column" }, isMobile && /* @__PURE__ */ React19.createElement(
+      Flex,
+      {
+        itemAlign: "center",
+        justify: "between",
+        gap: 4,
+        className: "oui-rounded-[8px] oui-px-3 oui-py-2 oui-text-2xs oui-bg-[linear-gradient(270deg,rgba(89,176,254,0.10)_0%,rgba(38,254,254,0.10)_100%)] oui-w-full",
+        onClick: () => showPwaDialog()
+      },
+      /* @__PURE__ */ React19.createElement(Text, { className: "oui-bg-[linear-gradient(270deg,#59B0FE_0%,#26FEFE_100%)] oui-bg-clip-text oui-text-transparent" }, t("connector.privy.pwa.title")),
+      /* @__PURE__ */ React19.createElement(
+        ArrowRightLinearGradientIcon,
+        {
+          size: 20,
+          className: "oui-flex-shrink-0"
+        }
+      )
+    ), termsOfUse && /* @__PURE__ */ React19.createElement("div", { className: "oui-flex-none oui-text-center oui-text-2xs oui-font-semibold  oui-text-base-contrast-80" }, /* @__PURE__ */ React19.createElement(
+      Trans,
+      {
+        i18nKey: "connector.privy.termsOfUse",
+        components: [
+          /* @__PURE__ */ React19.createElement(
+            "a",
+            {
+              key: "termsOfUse",
+              href: termsOfUse,
+              className: "oui-cursor-pointer oui-text-primary oui-underline",
+              target: "_blank",
+              rel: "noreferrer"
+            }
+          )
+        ]
+      }
+    ))))
+  );
+}
+var LinkDeviceMobile = (props) => {
+  const [open, setOpen] = useState(false);
+  const { account } = useAccount();
+  const { t } = useTranslation();
+  const onDisconnect = async () => {
+    localStorage.removeItem("orderly_link_device");
+    await account.disconnect();
+  };
+  const showDialog = () => {
+    setOpen(true);
+  };
+  const hideDialog = () => {
+    setOpen(false);
+  };
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+    SimpleDialog,
     {
-      className: "oui-size-5 oui-cursor-pointer oui-text-base-contrast-20 hover:oui-text-base-contrast-80",
-      onClick: () => props.onChangeOpen(false)
-    }
-  )), isConnected ? /* @__PURE__ */ React19.createElement(MyWallet, null) : /* @__PURE__ */ React19.createElement(RenderConnector, null), !isConnected && termsOfUse && /* @__PURE__ */ React19.createElement("div", { className: "oui-flex-none oui-text-center oui-text-2xs oui-font-semibold  oui-text-base-contrast-80" }, /* @__PURE__ */ React19.createElement(
-    Trans,
+      open,
+      onOpenChange: setOpen,
+      title: t("common.tips"),
+      size: "xs",
+      actions: {
+        secondary: {
+          label: t("common.cancel"),
+          onClick: hideDialog,
+          size: "md",
+          fullWidth: true
+        },
+        primary: {
+          label: t("connector.disconnect"),
+          onClick: async () => {
+            await onDisconnect();
+            hideDialog();
+          },
+          size: "md",
+          variant: "outlined",
+          color: "danger"
+        }
+      }
+    },
+    /* @__PURE__ */ React19.createElement(Text, { intensity: 54, size: "sm" }, t("linkDevice.scanQRCode.connected.description"))
+  ), /* @__PURE__ */ React19.createElement(Flex, { className: "oui-gap-[6px]", itemAlign: "center", onClick: showDialog }, /* @__PURE__ */ React19.createElement(
+    Flex,
     {
-      i18nKey: "connector.privy.termsOfUse",
-      components: [
-        /* @__PURE__ */ React19.createElement(
-          "a",
-          {
-            key: "termsOfUse",
-            href: termsOfUse,
-            className: "oui-cursor-pointer oui-text-primary oui-underline",
-            target: "_blank",
-            rel: "noreferrer"
-          }
-        )
-      ]
+      className: "oui-text-base-contrast",
+      intensity: 500,
+      height: 28,
+      r: "md"
+    },
+    /* @__PURE__ */ React19.createElement(DesktopIcon, null),
+    /* @__PURE__ */ React19.createElement(Dot, null),
+    /* @__PURE__ */ React19.createElement(LinkIcon, null),
+    /* @__PURE__ */ React19.createElement(Dot, null),
+    /* @__PURE__ */ React19.createElement(MobileIcon, null)
+  ), props.children));
+};
+var Dot = () => {
+  return /* @__PURE__ */ React19.createElement(Flex, { className: "oui-gap-x-[1px] oui-px-[1px]" }, /* @__PURE__ */ React19.createElement(DotIcon, null), /* @__PURE__ */ React19.createElement(DotIcon, null), /* @__PURE__ */ React19.createElement(DotIcon, null));
+};
+var DesktopIcon = (props) => /* @__PURE__ */ React19.createElement(
+  "svg",
+  {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React19.createElement("path", { d: "M4.5 2.93a2.25 2.25 0 0 0-2.25 2.25v5.25a.75.75 0 0 0-.75.75v1.5c0 1.272.93 2.25 2.25 2.25h10.5c1.318 0 2.25-.978 2.25-2.25v-1.5a.75.75 0 0 0-.75-.75V5.18a2.25 2.25 0 0 0-2.25-2.25zm0 1.5h9a.75.75 0 0 1 .75.75v5.25H3.75V5.18a.75.75 0 0 1 .75-.75M3 11.93h12v.75c0 .46-.277.75-.75.75H3.75c-.474 0-.75-.29-.75-.75z" })
+);
+var MobileIcon = (props) => /* @__PURE__ */ React19.createElement(
+  "svg",
+  {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React19.createElement("path", { d: "M13.498 3.715a2.25 2.25 0 0 0-2.25-2.25h-4.5a2.25 2.25 0 0 0-2.25 2.25v10.5a2.25 2.25 0 0 0 2.25 2.25h4.5a2.25 2.25 0 0 0 2.25-2.25zm-1.5 0v9.75h-6v-9.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 .75.75m-2.25 11.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0" })
+);
+var LinkIcon = (props) => /* @__PURE__ */ React19.createElement(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  },
+  /* @__PURE__ */ React19.createElement(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M1.007 6a5 5 0 1 1 10 0 5 5 0 0 1-10 0m7.486-2.344A.6.6 0 0 1 8.91 3.5c.15 0 .305.048.418.156a.55.55 0 0 1 0 .798L5.254 8.337a.62.62 0 0 1-.837 0L2.67 6.673a.55.55 0 0 1 0-.798.62.62 0 0 1 .837 0l1.329 1.266z",
+      fill: "url(#a)"
+    }
+  ),
+  /* @__PURE__ */ React19.createElement("defs", null, /* @__PURE__ */ React19.createElement(
+    "linearGradient",
+    {
+      id: "a",
+      x1: "11.007",
+      y1: "5.999",
+      x2: "1.007",
+      y2: "5.999",
+      gradientUnits: "userSpaceOnUse"
+    },
+    /* @__PURE__ */ React19.createElement("stop", { stopColor: "rgb(var(--oui-gradient-brand-end))" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "1", stopColor: "rgb(var(--oui-gradient-brand-start))" })
+  ))
+);
+var DotIcon = (props) => /* @__PURE__ */ React19.createElement(
+  "svg",
+  {
+    width: "2",
+    height: "2",
+    viewBox: "0 0 2 2",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  },
+  /* @__PURE__ */ React19.createElement(
+    "path",
+    {
+      d: "M.667.334a.667.667 0 1 1 0 1.333.667.667 0 0 1 0-1.333",
+      fill: "url(#a)"
     }
-  ))));
-}
+  ),
+  /* @__PURE__ */ React19.createElement("defs", null, /* @__PURE__ */ React19.createElement(
+    "linearGradient",
+    {
+      id: "a",
+      x1: "1.333",
+      y1: "1.001",
+      x2: "0",
+      y2: "1.001",
+      gradientUnits: "userSpaceOnUse"
+    },
+    /* @__PURE__ */ React19.createElement("stop", { stopColor: "rgb(var(--oui-gradient-brand-end))" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "1", stopColor: "rgb(var(--oui-gradient-brand-start))" })
+  ))
+);
+
+// src/components/userCenter.tsx
 function UserCenter(props) {
   const { accountState: state } = props;
   return /* @__PURE__ */ React19.createElement(RenderUserCenter, { state, disabledConnect: props.disabledConnect });
@@ -2431,17 +2772,14 @@ var RenderUserCenter = (props) => {
     return account.address;
   }, [account, connectedChain, accountState]);
   if (state.status === AccountStatusEnum.EnableTradingWithoutConnected) {
-    return /* @__PURE__ */ React19.createElement(
-      Button,
+    return /* @__PURE__ */ React19.createElement(Flex, { className: "oui-bg-base-5 oui-px-[7px] oui-rounded-[6px] oui-gap-[6px]" }, /* @__PURE__ */ React19.createElement(LinkDeviceMobile, null, /* @__PURE__ */ React19.createElement(
+      Text.formatted,
       {
-        size: "md",
-        variant: "gradient",
-        angle: 45,
-        "data-testid": "oui-testid-nav-bar-address-btn",
-        className: "oui-flex oui-items-center oui-justify-center oui-gap-2"
+        rule: "address",
+        className: "oui-text-base-contrast oui-text-xs"
       },
-      /* @__PURE__ */ React19.createElement(Text.formatted, { rule: "address", className: "oui-text-[rgba(0,0,0,.88)]" }, formatAddress(userAddress))
-    );
+      formatAddress(userAddress)
+    )));
   }
   if (state.status <= AccountStatusEnum.NotConnected || disabled) {
     return /* @__PURE__ */ React19.createElement(
@@ -2541,7 +2879,7 @@ installExtension({
 
 // src/main.tsx
 function Main(props) {
-  const { wallet, connectedChain, setChain, namespace } = useWallet2();
+  const { wallet, connectedChain, setChain, namespace, onDisconnect } = useWallet2();
   const { openConnectDrawer, setOpenConnectDrawer, setTargetWalletType } = useWalletConnectorPrivy();
   const connect = (props2) => {
     if (props2 && props2.autoSelect) {
@@ -2553,13 +2891,10 @@ function Main(props) {
       resolve([]);
     });
   };
-  const disconnect = useCallback(async () => {
-    return Promise.resolve([]);
-  }, [wallet]);
   const value = useMemo(
     () => ({
       connect,
-      disconnect,
+      disconnect: onDisconnect,
       connecting: false,
       wallet,
       setChain,
@@ -2733,7 +3068,6 @@ var commonSwrOpts = {
   // don't duplicate a request with the same key for 1hr
   dedupingInterval: 36e5
 };
-var fetcher = (url) => fetch(url).then((res) => res.json());
 var formatSwapChainInfo = (data = {}) => {
   return Object.keys(data).map((key) => {
     const chain = data[key];
@@ -2867,12 +3201,12 @@ function WalletConnectorPrivyProvider(props) {
     fetcher,
     commonSwrOpts
   );
-  const { data: mainnetChainInfoRes } = useSWR(
+  const { data: mainnetChainInfos } = useSWR(
     !props.customChains ? "https://api.orderly.org/v1/public/chain_info" : null,
     fetcher,
     commonSwrOpts
   );
-  const { data: testChainInfoRes } = useSWR(
+  const { data: testChainInfos } = useSWR(
     !props.customChains ? "https://testnet-api.orderly.org/v1/public/chain_info" : null,
     fetcher,
     commonSwrOpts
@@ -2962,15 +3296,15 @@ function WalletConnectorPrivyProvider(props) {
     if (props.customChains) {
       return;
     }
-    if (!mainnetChainInfoRes || !testChainInfoRes || swapLoading) {
+    if (!mainnetChainInfos || !testChainInfos || swapLoading) {
       return;
     }
     let testChainsList = [];
     let mainnetChainsList = [];
     try {
-      testChainsList = testChainInfoRes?.data?.rows;
+      testChainsList = testChainInfos;
       testChainsList.push(AbstractTestnetChainInfo);
-      mainnetChainsList = mainnetChainInfoRes?.data?.rows;
+      mainnetChainsList = mainnetChainInfos;
       const testChains = processChainInfo(testChainsList);
       const mainnetChains2 = processChainInfo(mainnetChainsList);
       const swapChains = processChainInfo(
@@ -2990,8 +3324,8 @@ function WalletConnectorPrivyProvider(props) {
     initRef.current = true;
   }, [
     props.customChains,
-    mainnetChainInfoRes,
-    testChainInfoRes,
+    mainnetChainInfos,
+    testChainInfos,
     swapChainInfoRes,
     swapLoading
   ]);