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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +585 -251
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +585 -251
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +9 -9
package/dist/index.js CHANGED
@@ -14,7 +14,6 @@ var walletAdapterBase = require('@solana/wallet-adapter-base');
14
14
  var reactAuth = require('@privy-io/react-auth');
15
15
  var walletAdapterReact = require('@solana/wallet-adapter-react');
16
16
  var zustand = require('zustand');
17
- var reactDom = require('react-dom');
18
17
  var uiConnector = require('@orderly.network/ui-connector');
19
18
  var walletAdapterWallets = require('@solana/wallet-adapter-wallets');
20
19
  var reactQuery = require('@tanstack/react-query');
@@ -749,60 +748,227 @@ function useWagmiWallet() {
749
748
  }
750
749
  return context;
751
750
  }
752
- function Drawer({ children, isOpen, onClose }) {
753
- const [windowHeight, setWindowHeight] = React19.useState(0);
754
- const { isMobile } = ui.useScreen();
751
+ var MoreIcon = (props) => /* @__PURE__ */ React19__default.default.createElement(
752
+ "svg",
753
+ {
754
+ xmlns: "http://www.w3.org/2000/svg",
755
+ width: "16",
756
+ height: "16",
757
+ viewBox: "0 0 16 16",
758
+ fill: "currentColor",
759
+ ...props
760
+ },
761
+ /* @__PURE__ */ React19__default.default.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" }),
762
+ /* @__PURE__ */ React19__default.default.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" }),
763
+ /* @__PURE__ */ React19__default.default.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" })
764
+ );
765
+ var DisconnectIcon = (props) => /* @__PURE__ */ React19__default.default.createElement(
766
+ "svg",
767
+ {
768
+ width: "16",
769
+ height: "16",
770
+ viewBox: "0 0 16 16",
771
+ xmlns: "http://www.w3.org/2000/svg",
772
+ fill: "currentColor",
773
+ ...props
774
+ },
775
+ /* @__PURE__ */ React19__default.default.createElement("g", { id: "box-arrow-right" }, /* @__PURE__ */ React19__default.default.createElement(
776
+ "path",
777
+ {
778
+ id: "Vector",
779
+ 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"
780
+ }
781
+ ))
782
+ );
783
+ var ArrowRightIcon = ({ size, ...props }) => /* @__PURE__ */ React19__default.default.createElement(
784
+ "svg",
785
+ {
786
+ width: size,
787
+ height: size,
788
+ viewBox: "0 0 14 14",
789
+ fill: "currentColor",
790
+ xmlns: "http://www.w3.org/2000/svg",
791
+ ...props
792
+ },
793
+ /* @__PURE__ */ React19__default.default.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" })
794
+ );
795
+ var ArrowRightLinearGradientIcon = ({
796
+ size,
797
+ ...props
798
+ }) => /* @__PURE__ */ React19__default.default.createElement(
799
+ "svg",
800
+ {
801
+ xmlns: "http://www.w3.org/2000/svg",
802
+ width: size,
803
+ height: size,
804
+ viewBox: "0 0 20 20",
805
+ fill: "none"
806
+ },
807
+ /* @__PURE__ */ React19__default.default.createElement(
808
+ "path",
809
+ {
810
+ 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",
811
+ fill: "url(#paint0_linear_2269_12077)"
812
+ }
813
+ ),
814
+ /* @__PURE__ */ React19__default.default.createElement("defs", null, /* @__PURE__ */ React19__default.default.createElement(
815
+ "linearGradient",
816
+ {
817
+ id: "paint0_linear_2269_12077",
818
+ x1: "15.01",
819
+ y1: "9.994",
820
+ x2: "5.01001",
821
+ y2: "9.994",
822
+ gradientUnits: "userSpaceOnUse"
823
+ },
824
+ /* @__PURE__ */ React19__default.default.createElement("stop", { stopColor: "#59B0FE" }),
825
+ /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "1", stopColor: "#26FEFE" })
826
+ ))
827
+ );
828
+ var PwaDialog = ui.modal.create((props) => {
829
+ const { visible, hide, resolve, reject, onOpenChange } = ui.useModal();
830
+ const [domain, setDomain] = React19.useState("");
831
+ const { t } = i18n.useTranslation();
755
832
  React19.useEffect(() => {
756
- setWindowHeight(window.innerHeight);
757
- const handleResize = () => {
758
- setWindowHeight(window.innerHeight);
759
- };
760
- window.addEventListener("resize", handleResize);
761
- if (isOpen) {
762
- document.body.style.overflow = "hidden";
763
- } else {
764
- document.body.style.overflow = "auto";
833
+ setDomain(window.location.hostname);
834
+ }, []);
835
+ return /* @__PURE__ */ React19__default.default.createElement(ui.SimpleSheet, { open: visible, onOpenChange }, /* @__PURE__ */ React19__default.default.createElement(ui.SheetHeader, null, /* @__PURE__ */ React19__default.default.createElement(ui.Text, { className: "oui-text-base-contrast-80 oui-text " }, t("connector.privy.pwa.sheetTitle"))), /* @__PURE__ */ React19__default.default.createElement(ui.Flex, { direction: "column", gap: 3, className: "oui-w-full" }, /* @__PURE__ */ React19__default.default.createElement(ui.Text, { className: "oui-text-base-contrast-80 oui-text " }, t("connector.privy.pwa.description")), /* @__PURE__ */ React19__default.default.createElement(ui.Flex, { direction: "column", gap: 4, className: "oui-w-full" }, /* @__PURE__ */ React19__default.default.createElement(
836
+ StepItem,
837
+ {
838
+ index: 1,
839
+ title: t("connector.privy.pwa.step1"),
840
+ content: /* @__PURE__ */ React19__default.default.createElement(ui.Flex, { className: "oui-w-full oui-bg-dark-8" }, /* @__PURE__ */ React19__default.default.createElement(
841
+ ui.Grid,
842
+ {
843
+ rows: 1,
844
+ cols: 3,
845
+ className: "oui-bg-black/[0.08] oui-p-2 oui-h-[52px] oui-rounded-[44px] oui-w-full oui-px-4"
846
+ },
847
+ /* @__PURE__ */ React19__default.default.createElement("div", null),
848
+ /* @__PURE__ */ React19__default.default.createElement(ui.Text, { className: "oui-text-black/[0.88] oui-text-[20px] oui-leading-[36px] oui-flex-1" }, domain),
849
+ /* @__PURE__ */ React19__default.default.createElement(ui.Flex, { itemAlign: "center", justify: "end" }, /* @__PURE__ */ React19__default.default.createElement(ShareIcon, null))
850
+ ))
765
851
  }
766
- return () => {
767
- document.body.style.overflow = "auto";
768
- window.removeEventListener("resize", handleResize);
769
- };
770
- }, [isOpen, isMobile]);
771
- if (!isOpen)
772
- return null;
773
- const drawerHeight = isMobile ? windowHeight : windowHeight - 72 - 24;
774
- return reactDom.createPortal(
775
- /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-fixed oui-inset-0 oui-z-[60]" }, /* @__PURE__ */ React19__default.default.createElement(
776
- "div",
852
+ ), /* @__PURE__ */ React19__default.default.createElement(
853
+ StepItem,
854
+ {
855
+ index: 2,
856
+ title: t("connector.privy.pwa.step2"),
857
+ classNames: {
858
+ content: "oui-bg-[#e9e9eb]"
859
+ },
860
+ content: /* @__PURE__ */ React19__default.default.createElement(
861
+ ui.Flex,
862
+ {
863
+ className: "oui-w-full oui-bg-base-contrast oui-rounded-[12px]",
864
+ direction: "column"
865
+ },
866
+ /* @__PURE__ */ React19__default.default.createElement(
867
+ ui.Flex,
868
+ {
869
+ className: "oui-w-full oui-px-4 oui-py-3",
870
+ justify: "start",
871
+ itemAlign: "center"
872
+ },
873
+ /* @__PURE__ */ React19__default.default.createElement(ui.Text, { className: "oui-text-black/[0.2] oui-text-[18px]" }, t("connector.privy.pwa.findOnPage"))
874
+ ),
875
+ /* @__PURE__ */ React19__default.default.createElement(ui.Divider, { className: "oui-bg-black/[0.15] oui-w-full" }),
876
+ /* @__PURE__ */ React19__default.default.createElement(ui.Grid, { cols: 3, className: "oui-w-full oui-px-4 oui-py-3" }, /* @__PURE__ */ React19__default.default.createElement(ui.Text, { className: "oui-text-black/[0.88] oui-text-[18px] oui-col-span-2" }, t("connector.privy.pwa.addToHomeScreen")), /* @__PURE__ */ React19__default.default.createElement(ui.Flex, { itemAlign: "center", justify: "end" }, /* @__PURE__ */ React19__default.default.createElement(AddIcon, null)))
877
+ )
878
+ }
879
+ ))));
880
+ });
881
+ var ShareIcon = () => {
882
+ return /* @__PURE__ */ React19__default.default.createElement(
883
+ "svg",
884
+ {
885
+ xmlns: "http://www.w3.org/2000/svg",
886
+ width: "28",
887
+ height: "28",
888
+ viewBox: "0 0 28 28",
889
+ fill: "none"
890
+ },
891
+ /* @__PURE__ */ React19__default.default.createElement(
892
+ "path",
777
893
  {
778
- className: "oui-absolute oui-inset-0 oui-bg-[rgba(0,0,0,0.48)] oui-transition-opacity",
779
- onClick: onClose
894
+ 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",
895
+ fill: "black",
896
+ fillOpacity: "0.48"
780
897
  }
781
- ), /* @__PURE__ */ React19__default.default.createElement(
782
- "div",
898
+ ),
899
+ /* @__PURE__ */ React19__default.default.createElement(
900
+ "path",
901
+ {
902
+ 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",
903
+ fill: "black",
904
+ fillOpacity: "0.48"
905
+ }
906
+ )
907
+ );
908
+ };
909
+ var AddIcon = () => {
910
+ return /* @__PURE__ */ React19__default.default.createElement(
911
+ "svg",
912
+ {
913
+ xmlns: "http://www.w3.org/2000/svg",
914
+ width: "24",
915
+ height: "24",
916
+ viewBox: "0 0 24 24",
917
+ fill: "none"
918
+ },
919
+ /* @__PURE__ */ React19__default.default.createElement(
920
+ "path",
921
+ {
922
+ 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",
923
+ stroke: "black",
924
+ strokeOpacity: "0.88",
925
+ strokeWidth: "2"
926
+ }
927
+ ),
928
+ /* @__PURE__ */ React19__default.default.createElement(
929
+ "path",
930
+ {
931
+ d: "M8 12L16 12",
932
+ stroke: "black",
933
+ strokeOpacity: "0.88",
934
+ strokeWidth: "2",
935
+ strokeLinecap: "round"
936
+ }
937
+ ),
938
+ /* @__PURE__ */ React19__default.default.createElement(
939
+ "path",
940
+ {
941
+ d: "M12 8L12 16",
942
+ stroke: "black",
943
+ strokeOpacity: "0.88",
944
+ strokeWidth: "2",
945
+ strokeLinecap: "round"
946
+ }
947
+ )
948
+ );
949
+ };
950
+ var StepItem = (props) => {
951
+ return /* @__PURE__ */ React19__default.default.createElement(
952
+ ui.Flex,
953
+ {
954
+ className: " oui-rounded-[12px] oui-w-full oui-overflow-hidden",
955
+ direction: "column"
956
+ },
957
+ /* @__PURE__ */ React19__default.default.createElement(ui.Flex, { className: "oui-bg-base-4 oui-w-full oui-px-3 oui-py-3 oui-gap-[6px]" }, /* @__PURE__ */ React19__default.default.createElement(ui.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__default.default.createElement(ui.Text, { className: "oui-text-base-contrast-80 oui-text-xs" }, props.title)),
958
+ /* @__PURE__ */ React19__default.default.createElement(
959
+ ui.Flex,
783
960
  {
784
- style: { height: `${drawerHeight}px` },
785
961
  className: ui.cn(
786
- "oui-fixed oui-top-0 oui-right-0",
787
- "oui-bg-[#131519] oui-shadow-lg",
788
- "oui-border oui-border-line-12",
789
- "oui-w-[276px]",
790
- "md:oui-w-[300px]",
791
- "md:oui-top-1/2 md:oui-translate-y-[-50%]",
792
- "oui-rounded-0 md:oui-rounded-2xl",
793
- "md:oui-rounded-0",
794
- "oui-p-4",
795
- "oui-transform oui-transition-transform oui-duration-300 oui-ease-in-out",
796
- "oui-flex oui-flex-col oui-justify-between",
797
- "oui-m-0 md:oui-m-3",
798
- isOpen ? "oui-translate-x-0" : "oui--translate-x-full"
799
- )
962
+ "oui-bg-base-contrast oui-h-[120px] oui-w-full oui-px-6",
963
+ props.classNames?.content
964
+ ),
965
+ justify: "center",
966
+ itemAlign: "center"
800
967
  },
801
- children
802
- )),
803
- document.body
968
+ props.content
969
+ )
804
970
  );
805
- }
971
+ };
806
972
  var OrderlyOSS = "https://oss.orderly.network";
807
973
  var PrivyConnectorImagePath = `${OrderlyOSS}/static/sdk/privy`;
808
974
  var WALLET_ICONS = {
@@ -867,6 +1033,7 @@ function useWallet2() {
867
1033
  } = useAbstractWallet();
868
1034
  const [wallet, setWallet] = React19.useState(null);
869
1035
  const [namespace, setNamespace] = React19.useState(null);
1036
+ const [walletType, setWalletType] = React19.useState(null);
870
1037
  const { storageChain, setStorageChain } = hooks.useStorageChain();
871
1038
  const { setOpenConnectDrawer, targetWalletType, setTargetWalletType } = useWalletConnectorPrivy();
872
1039
  const isManual = React19.useRef(false);
@@ -973,11 +1140,11 @@ function useWallet2() {
973
1140
  }
974
1141
  }
975
1142
  };
976
- const switchWallet = (walletType) => {
1143
+ const switchWallet = (walletType2) => {
977
1144
  const fromWallet = wallet?.accounts[0].address;
978
1145
  let toWallet;
979
1146
  if (isPrivy) {
980
- switch (walletType) {
1147
+ switch (walletType2) {
981
1148
  case "EVM" /* EVM */:
982
1149
  if (privyWalletEVM) {
983
1150
  setStorageChain(privyWalletEVM.chain.id);
@@ -992,7 +1159,7 @@ function useWallet2() {
992
1159
  break;
993
1160
  }
994
1161
  } else {
995
- switch (walletType) {
1162
+ switch (walletType2) {
996
1163
  case "EVM" /* EVM */:
997
1164
  if (walletEVM) {
998
1165
  setStorageChain(walletEVM.chain.id);
@@ -1018,8 +1185,8 @@ function useWallet2() {
1018
1185
  toWallet
1019
1186
  });
1020
1187
  };
1021
- const disconnect = async (walletType) => {
1022
- switch (walletType) {
1188
+ const disconnect = async (walletType2) => {
1189
+ switch (walletType2) {
1023
1190
  case "privy" /* PRIVY */:
1024
1191
  return await disconnectPrivy();
1025
1192
  case "EVM" /* EVM */:
@@ -1030,8 +1197,21 @@ function useWallet2() {
1030
1197
  return disconnectAbstract();
1031
1198
  }
1032
1199
  };
1200
+ const onDisconnect = (parmas) => {
1201
+ if (!walletType) {
1202
+ throw new Error("No wallet type found");
1203
+ }
1204
+ return new Promise((resolve, reject) => {
1205
+ disconnect(walletType).then(() => {
1206
+ resolve(true);
1207
+ }).catch((e) => {
1208
+ reject(e);
1209
+ });
1210
+ });
1211
+ };
1033
1212
  const setNullWalletStatus = () => {
1034
1213
  setWallet(null);
1214
+ setWalletType(null);
1035
1215
  setConnectedChain(null);
1036
1216
  setNamespace(null);
1037
1217
  };
@@ -1045,6 +1225,7 @@ function useWallet2() {
1045
1225
  }
1046
1226
  if (privyWalletEVM) {
1047
1227
  setWallet(privyWalletEVM);
1228
+ setWalletType("privy" /* PRIVY */);
1048
1229
  setConnectedChain(privyWalletEVM.chain);
1049
1230
  setNamespace(types.ChainNamespace.evm);
1050
1231
  } else {
@@ -1054,6 +1235,7 @@ function useWallet2() {
1054
1235
  if (storageChain?.namespace === types.ChainNamespace.solana) {
1055
1236
  if (privyWalletSOL) {
1056
1237
  setWallet(privyWalletSOL);
1238
+ setWalletType("privy" /* PRIVY */);
1057
1239
  setConnectedChain(privyWalletSOL.chain);
1058
1240
  setNamespace(types.ChainNamespace.solana);
1059
1241
  } else {
@@ -1069,6 +1251,7 @@ function useWallet2() {
1069
1251
  if (types.AbstractChains.has(storageChain.chainId)) {
1070
1252
  if (isConnectedAbstract && walletAbstract) {
1071
1253
  setWallet(walletAbstract);
1254
+ setWalletType("Abstract" /* ABSTRACT */);
1072
1255
  setConnectedChain(connectedChainAbstract);
1073
1256
  setNamespace(types.ChainNamespace.evm);
1074
1257
  } else {
@@ -1077,6 +1260,7 @@ function useWallet2() {
1077
1260
  } else {
1078
1261
  if (isConnectedEVM && walletEVM) {
1079
1262
  setWallet(walletEVM);
1263
+ setWalletType("EVM" /* EVM */);
1080
1264
  setConnectedChain(connectedChainEvm);
1081
1265
  setNamespace(types.ChainNamespace.evm);
1082
1266
  } else {
@@ -1087,6 +1271,7 @@ function useWallet2() {
1087
1271
  if (storageChain?.namespace === types.ChainNamespace.solana) {
1088
1272
  if (isConnectedSOL && walletSOL) {
1089
1273
  setWallet(walletSOL);
1274
+ setWalletType("SOL" /* SOL */);
1090
1275
  setConnectedChain(connectedChainSOL);
1091
1276
  setNamespace(types.ChainNamespace.solana);
1092
1277
  } else {
@@ -1111,14 +1296,19 @@ function useWallet2() {
1111
1296
  setChain,
1112
1297
  namespace,
1113
1298
  switchWallet,
1114
- disconnect
1299
+ disconnect,
1300
+ onDisconnect
1115
1301
  };
1116
1302
  }
1117
1303
  function AbstractConnectArea({ connect }) {
1304
+ const { isMobile } = ui.useScreen();
1118
1305
  return /* @__PURE__ */ React19__default.default.createElement("div", null, /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-mb-2 oui-text-sm oui-font-semibold oui-text-base-contrast-80" }, "Abstract"), /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-grid oui-grid-cols-2 oui-gap-2" }, /* @__PURE__ */ React19__default.default.createElement(
1119
1306
  "div",
1120
1307
  {
1121
- 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]",
1308
+ className: ui.cn(
1309
+ " 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]",
1310
+ isMobile ? "oui-bg-base-5" : "oui-bg-[#07080A]"
1311
+ ),
1122
1312
  onClick: () => connect()
1123
1313
  },
1124
1314
  /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-flex oui-size-[18px] oui-items-center oui-justify-center" }, /* @__PURE__ */ React19__default.default.createElement(
@@ -1132,109 +1322,123 @@ function AbstractConnectArea({ connect }) {
1132
1322
  /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-text-2xs oui-text-base-contrast" }, "Abstract")
1133
1323
  )));
1134
1324
  }
1135
- function PrivyConnectArea({
1136
- connect
1137
- }) {
1325
+ var RenderLoginMethodsDom = ({
1326
+ connect,
1327
+ loginMethods
1328
+ }) => {
1138
1329
  const { t } = i18n.useTranslation();
1139
- const { isMobile, isDesktop } = ui.useScreen();
1140
- const { connectorWalletType, privyConfig } = useWalletConnectorPrivy();
1141
- const loginMethods = privyConfig.loginMethods;
1142
- const renderLoginMethodsDom = () => {
1143
- const arr = [];
1144
- if (loginMethods?.includes("email")) {
1145
- arr.push(
1330
+ const { isDesktop } = ui.useScreen();
1331
+ const arr = [];
1332
+ if (loginMethods?.includes("email")) {
1333
+ arr.push(
1334
+ /* @__PURE__ */ React19__default.default.createElement(
1335
+ "div",
1336
+ {
1337
+ className: ui.cn(
1338
+ "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]",
1339
+ isDesktop && "oui-border-none oui-bg-[#333948]"
1340
+ ),
1341
+ onClick: () => connect({ walletType: "privy", extraType: "email" })
1342
+ },
1146
1343
  /* @__PURE__ */ React19__default.default.createElement(
1147
- "div",
1344
+ "img",
1148
1345
  {
1149
- 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]",
1150
- onClick: () => connect({ walletType: "privy", extraType: "email" })
1151
- },
1152
- /* @__PURE__ */ React19__default.default.createElement(
1153
- "img",
1154
- {
1155
- src: "https://oss.orderly.network/static/sdk/privy/email.svg",
1156
- className: "oui-size-[18px]"
1157
- }
1346
+ src: "https://oss.orderly.network/static/sdk/privy/email.svg",
1347
+ className: "oui-size-[18px]"
1348
+ }
1349
+ ),
1350
+ isDesktop && /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-text-2xs oui-text-base-contrast" }, t("connector.privy.email"))
1351
+ )
1352
+ );
1353
+ }
1354
+ if (loginMethods?.includes("google")) {
1355
+ arr.push(
1356
+ /* @__PURE__ */ React19__default.default.createElement(
1357
+ "div",
1358
+ {
1359
+ className: ui.cn(
1360
+ "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]",
1361
+ isDesktop && "oui-border-none oui-bg-[#335FFC]"
1158
1362
  ),
1159
- /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-text-2xs oui-text-base-contrast" }, t("connector.privy.email"))
1160
- )
1161
- );
1162
- }
1163
- if (loginMethods?.includes("google")) {
1164
- arr.push(
1363
+ onClick: () => connect({ walletType: "privy", extraType: "google" })
1364
+ },
1165
1365
  /* @__PURE__ */ React19__default.default.createElement(
1166
- "div",
1366
+ "img",
1167
1367
  {
1168
- 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]",
1169
- onClick: () => connect({ walletType: "privy", extraType: "google" })
1170
- },
1171
- /* @__PURE__ */ React19__default.default.createElement(
1172
- "img",
1173
- {
1174
- src: "https://oss.orderly.network/static/sdk/privy/google.svg",
1175
- className: "oui-size-[18px]"
1176
- }
1368
+ src: "https://oss.orderly.network/static/sdk/privy/google.svg",
1369
+ className: "oui-size-[18px]"
1370
+ }
1371
+ ),
1372
+ isDesktop && /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-text-2xs oui-text-base-contrast" }, t("connector.privy.google"))
1373
+ )
1374
+ );
1375
+ }
1376
+ if (loginMethods?.includes("twitter")) {
1377
+ arr.push(
1378
+ /* @__PURE__ */ React19__default.default.createElement(
1379
+ "div",
1380
+ {
1381
+ className: ui.cn(
1382
+ "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]",
1383
+ isDesktop && "oui-border-none oui-bg-[#07080A]"
1177
1384
  ),
1178
- /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-text-2xs oui-text-base-contrast" }, t("connector.privy.google"))
1179
- )
1180
- );
1181
- }
1182
- if (loginMethods?.includes("twitter")) {
1183
- arr.push(
1385
+ onClick: () => connect({ walletType: "privy", extraType: "twitter" })
1386
+ },
1184
1387
  /* @__PURE__ */ React19__default.default.createElement(
1185
- "div",
1388
+ "img",
1186
1389
  {
1187
- 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]",
1188
- onClick: () => connect({ walletType: "privy", extraType: "twitter" })
1189
- },
1190
- /* @__PURE__ */ React19__default.default.createElement(
1191
- "img",
1192
- {
1193
- src: "https://oss.orderly.network/static/sdk/privy/twitter.svg",
1194
- className: "oui-size-[18px]"
1195
- }
1196
- ),
1197
- /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-text-2xs oui-text-base-contrast" }, t("connector.privy.twitter"))
1198
- )
1199
- );
1200
- }
1201
- return arr.map((item, index) => {
1202
- return /* @__PURE__ */ React19__default.default.createElement("div", { key: index }, item);
1203
- });
1204
- };
1205
- return /* @__PURE__ */ React19__default.default.createElement("div", { className: "" }, /* @__PURE__ */ React19__default.default.createElement(
1206
- "div",
1207
- {
1208
- className: ui.cn(
1209
- "oui-flex oui-items-center oui-justify-between",
1210
- "oui-mb-3 oui-text-sm oui-font-semibold oui-text-base-contrast-80",
1211
- "md:oui-mb-2"
1390
+ src: "https://oss.orderly.network/static/sdk/privy/twitter.svg",
1391
+ className: "oui-size-[18px]"
1392
+ }
1393
+ ),
1394
+ isDesktop && /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-text-2xs oui-text-base-contrast" }, t("connector.privy.twitter"))
1212
1395
  )
1213
- },
1214
- t("connector.privy.loginIn"),
1215
- isMobile && /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-flex oui-h-3 oui-justify-center" }, /* @__PURE__ */ React19__default.default.createElement(
1216
- "img",
1217
- {
1218
- src: "https://oss.orderly.network/static/sdk/privy/privy-logo.png",
1219
- className: " oui-h-[10px]"
1220
- }
1221
- ))
1222
- ), /* @__PURE__ */ React19__default.default.createElement(
1396
+ );
1397
+ }
1398
+ return arr.map((item, index) => {
1399
+ return /* @__PURE__ */ React19__default.default.createElement("div", { key: index }, item);
1400
+ });
1401
+ };
1402
+ var PrivyConnectAreaMobile = ({
1403
+ connect
1404
+ }) => {
1405
+ const { t } = i18n.useTranslation();
1406
+ const { isMobile, isDesktop } = ui.useScreen();
1407
+ const { connectorWalletType, privyConfig } = useWalletConnectorPrivy();
1408
+ const loginMethods = privyConfig.loginMethods;
1409
+ return /* @__PURE__ */ React19__default.default.createElement(ui.Flex, { direction: "column", className: "oui-w-full" }, /* @__PURE__ */ React19__default.default.createElement(ui.Grid, { cols: 3, rows: 1, className: "oui-w-full", gap: 2 }, /* @__PURE__ */ React19__default.default.createElement(RenderLoginMethodsDom, { connect, loginMethods })), (!connectorWalletType.disableWagmi || !connectorWalletType.disableSolana) && /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-mt-4 oui-h-px oui-w-full oui-bg-line md:oui-mt-5" }));
1410
+ };
1411
+ var PrivyConnectAreaDesktop = ({
1412
+ connect
1413
+ }) => {
1414
+ const { t } = i18n.useTranslation();
1415
+ const { connectorWalletType, privyConfig } = useWalletConnectorPrivy();
1416
+ const loginMethods = privyConfig.loginMethods;
1417
+ return /* @__PURE__ */ React19__default.default.createElement(ui.Flex, { direction: "column", gap: 2, itemAlign: "start", className: "oui-w-full" }, /* @__PURE__ */ React19__default.default.createElement(
1223
1418
  "div",
1224
1419
  {
1225
1420
  className: ui.cn(
1226
- "oui-grid oui-grid-cols-2 oui-gap-2",
1227
- "md:oui-flex md:oui-flex-col md:oui-gap-2"
1421
+ "oui-flex oui-items-center oui-justify-between",
1422
+ "oui-mb-3 oui-text-sm oui-font-semibold oui-text-base-contrast-80"
1228
1423
  )
1229
1424
  },
1230
- renderLoginMethodsDom()
1231
- ), isDesktop && /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-mt-4 oui-flex oui-h-3 oui-justify-center" }, /* @__PURE__ */ React19__default.default.createElement(
1425
+ t("connector.privy.loginIn")
1426
+ ), /* @__PURE__ */ React19__default.default.createElement(ui.Grid, { cols: 1, gap: 2, className: "oui-w-full" }, /* @__PURE__ */ React19__default.default.createElement(RenderLoginMethodsDom, { connect, loginMethods })), /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-mt-4 oui-flex oui-h-3 oui-justify-center" }, /* @__PURE__ */ React19__default.default.createElement(
1232
1427
  "img",
1233
1428
  {
1234
1429
  src: "https://oss.orderly.network/static/sdk/privy/privy-logo.png",
1235
1430
  className: " oui-h-[10px]"
1236
1431
  }
1237
1432
  )), (!connectorWalletType.disableWagmi || !connectorWalletType.disableSolana) && /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-mt-4 oui-h-px oui-w-full oui-bg-line md:oui-mt-5" }));
1433
+ };
1434
+ function PrivyConnectArea({
1435
+ connect
1436
+ }) {
1437
+ const { isDesktop } = ui.useScreen();
1438
+ if (isDesktop) {
1439
+ return /* @__PURE__ */ React19__default.default.createElement(PrivyConnectAreaDesktop, { connect });
1440
+ }
1441
+ return /* @__PURE__ */ React19__default.default.createElement(PrivyConnectAreaMobile, { connect });
1238
1442
  }
1239
1443
  function RenderPrivyTypeIcon({
1240
1444
  type,
@@ -1349,11 +1553,15 @@ function SOLConnectArea({
1349
1553
  connect
1350
1554
  }) {
1351
1555
  const { wallets } = useSolanaWallet();
1556
+ const { isMobile } = ui.useScreen();
1352
1557
  return /* @__PURE__ */ React19__default.default.createElement("div", null, /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-mb-2 oui-text-sm oui-font-semibold oui-text-base-contrast-80" }, "Solana"), /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-grid oui-grid-cols-2 oui-gap-2" }, wallets.map((item, key) => /* @__PURE__ */ React19__default.default.createElement(
1353
1558
  "div",
1354
1559
  {
1355
1560
  key,
1356
- 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]",
1561
+ className: ui.cn(
1562
+ " 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]",
1563
+ isMobile ? "oui-bg-base-5" : "oui-bg-[#07080A]"
1564
+ ),
1357
1565
  onClick: () => connect(item.adapter)
1358
1566
  },
1359
1567
  /* @__PURE__ */ React19__default.default.createElement(RenderWalletIcon, { connector: item.adapter }),
@@ -1362,11 +1570,15 @@ function SOLConnectArea({
1362
1570
  }
1363
1571
  function EVMConnectArea({ connect }) {
1364
1572
  const { connectors } = useWagmiWallet();
1573
+ const { isMobile } = ui.useScreen();
1365
1574
  return /* @__PURE__ */ React19__default.default.createElement("div", { className: "" }, /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-mb-2 oui-text-sm oui-font-semibold oui-text-base-contrast-80" }, "EVM"), /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-grid oui-grid-cols-2 oui-gap-2" }, connectors.map((item, key) => /* @__PURE__ */ React19__default.default.createElement(
1366
1575
  "div",
1367
1576
  {
1368
1577
  key,
1369
- 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]",
1578
+ className: ui.cn(
1579
+ " 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]",
1580
+ isMobile ? "oui-bg-base-5" : "oui-bg-[#07080A]"
1581
+ ),
1370
1582
  onClick: () => connect(item)
1371
1583
  },
1372
1584
  /* @__PURE__ */ React19__default.default.createElement(RenderWalletIcon, { connector: item }),
@@ -1446,60 +1658,8 @@ function RenderConnector() {
1446
1658
  }
1447
1659
  );
1448
1660
  };
1449
- return /* @__PURE__ */ React19__default.default.createElement(ui.ScrollArea, { className: "oui-flex oui-grow oui-shrik oui-basis-auto" }, /* @__PURE__ */ React19__default.default.createElement("div", { className: ui.cn("oui-flex oui-flex-col oui-gap-4", "md:oui-gap-5") }, renderPrivyConnectArea(), renderWagmiConnectArea(), renderSolanaConnectArea(), renderAbstractConnectArea()));
1661
+ return /* @__PURE__ */ React19__default.default.createElement(ui.ScrollArea, { className: "oui-flex oui-grow oui-shrik oui-basis-auto oui-custom-scrollbar" }, /* @__PURE__ */ React19__default.default.createElement("div", { className: ui.cn("oui-flex oui-flex-col oui-gap-4", "md:oui-gap-5") }, renderPrivyConnectArea(), renderWagmiConnectArea(), renderSolanaConnectArea(), renderAbstractConnectArea()));
1450
1662
  }
1451
- var MoreIcon = (props) => /* @__PURE__ */ React19__default.default.createElement(
1452
- "svg",
1453
- {
1454
- xmlns: "http://www.w3.org/2000/svg",
1455
- width: "16",
1456
- height: "16",
1457
- viewBox: "0 0 16 16",
1458
- fill: "currentColor",
1459
- ...props
1460
- },
1461
- /* @__PURE__ */ React19__default.default.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" }),
1462
- /* @__PURE__ */ React19__default.default.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" }),
1463
- /* @__PURE__ */ React19__default.default.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" })
1464
- );
1465
- var DisconnectIcon = (props) => /* @__PURE__ */ React19__default.default.createElement(
1466
- "svg",
1467
- {
1468
- width: "16",
1469
- height: "16",
1470
- viewBox: "0 0 16 16",
1471
- xmlns: "http://www.w3.org/2000/svg",
1472
- fill: "currentColor",
1473
- ...props
1474
- },
1475
- /* @__PURE__ */ React19__default.default.createElement("g", { id: "box-arrow-right" }, /* @__PURE__ */ React19__default.default.createElement(
1476
- "path",
1477
- {
1478
- id: "Vector",
1479
- 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"
1480
- }
1481
- ))
1482
- );
1483
- var ArrowRightIcon = (props) => /* @__PURE__ */ React19__default.default.createElement(
1484
- "svg",
1485
- {
1486
- width: "16",
1487
- height: "16",
1488
- viewBox: "0 0 14 14",
1489
- fill: "currentColor",
1490
- xmlns: "http://www.w3.org/2000/svg",
1491
- ...props
1492
- },
1493
- /* @__PURE__ */ React19__default.default.createElement(
1494
- "path",
1495
- {
1496
- 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",
1497
- fill: "#FF7D00"
1498
- }
1499
- )
1500
- );
1501
-
1502
- // src/components/switchNetworkTips.tsx
1503
1663
  function SwitchNetworkTips({
1504
1664
  tipsContent
1505
1665
  }) {
@@ -1535,7 +1695,7 @@ function SwitchNetworkTips({
1535
1695
  ), /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-text-2xs oui-text-warning-darken" }, t("connector.privy.switchNetwork.tips", {
1536
1696
  chainName: tipsContent
1537
1697
  }))),
1538
- /* @__PURE__ */ React19__default.default.createElement(ArrowRightIcon, null)
1698
+ /* @__PURE__ */ React19__default.default.createElement(ArrowRightIcon, { className: "oui-text-[#FF7D00]" })
1539
1699
  );
1540
1700
  }
1541
1701
  var StorageChainNotCurrentWalletType = ({
@@ -2382,56 +2542,237 @@ function ConnectDrawer(props) {
2382
2542
  connectorKey
2383
2543
  ]);
2384
2544
  const { isMobile } = ui.useScreen();
2545
+ const showPwaDialog = () => {
2546
+ ui.modal.show(PwaDialog);
2547
+ };
2385
2548
  const renderHeader = React19.useCallback(() => {
2386
- if (isMobile && props.headerProps?.mobile) {
2387
- return props.headerProps?.mobile;
2388
- }
2389
2549
  return /* @__PURE__ */ React19__default.default.createElement(
2390
2550
  "div",
2391
2551
  {
2392
2552
  className: ui.cn(
2393
2553
  "oui-font-semibold oui-text-base-contrast-80 ",
2394
- "oui-py-2 oui-text-[20px]",
2554
+ "oui-pb-2 oui-text-[20px]",
2395
2555
  "md:oui-py-0 md:oui-text-base"
2396
2556
  )
2397
2557
  },
2398
2558
  isConnected ? t("connector.privy.myWallet") : t("connector.connectWallet")
2399
2559
  );
2400
- }, [isMobile, props.headerProps?.mobile, isConnected]);
2401
- return /* @__PURE__ */ React19__default.default.createElement(Drawer, { isOpen: props.open, onClose: () => props.onChangeOpen(false) }, !isMobile && /* @__PURE__ */ React19__default.default.createElement(
2402
- "div",
2560
+ }, [isConnected]);
2561
+ return /* @__PURE__ */ React19__default.default.createElement(
2562
+ ui.SimpleSheet,
2403
2563
  {
2404
- className: "oui-absolute oui-inset-x-[50px] -oui-top-[calc(100vh/2)] oui-z-0 oui-h-screen",
2405
- style: {
2406
- 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)",
2407
- filter: "blur(50px)"
2564
+ open: props.open,
2565
+ onOpenChange: props.onChangeOpen,
2566
+ classNames: {
2567
+ body: "oui-h-full oui-py-0 oui-border-none oui-relative",
2568
+ // overlay: "!oui-bg-base-10/60",
2569
+ content: ui.cn(
2570
+ "!oui-p-4 !oui-bg-[#131519] !oui-border !oui-border-solid !oui-border-line-12",
2571
+ 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] "
2572
+ )
2573
+ },
2574
+ contentProps: { side: "right", closeable: false }
2575
+ },
2576
+ !isMobile && /* @__PURE__ */ React19__default.default.createElement(
2577
+ "div",
2578
+ {
2579
+ className: "oui-absolute oui-inset-x-[50px] -oui-top-[calc(100vh/2)] oui-z-0 oui-h-screen",
2580
+ style: {
2581
+ 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)",
2582
+ filter: "blur(50px)"
2583
+ }
2408
2584
  }
2409
- }
2410
- ), /* @__PURE__ */ React19__default.default.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__default.default.createElement("div", { className: "oui-flex oui-flex-none oui-items-center oui-justify-between" }, renderHeader(), /* @__PURE__ */ React19__default.default.createElement(
2411
- ui.CloseIcon,
2585
+ ),
2586
+ /* @__PURE__ */ React19__default.default.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__default.default.createElement("div", { className: "oui-flex oui-flex-none oui-items-center oui-justify-between" }, renderHeader(), /* @__PURE__ */ React19__default.default.createElement(
2587
+ ui.CloseIcon,
2588
+ {
2589
+ className: "oui-size-5 oui-cursor-pointer oui-text-base-contrast-20 hover:oui-text-base-contrast-80",
2590
+ onClick: () => props.onChangeOpen(false)
2591
+ }
2592
+ )), isConnected ? /* @__PURE__ */ React19__default.default.createElement(MyWallet, null) : /* @__PURE__ */ React19__default.default.createElement(RenderConnector, null), !isConnected && /* @__PURE__ */ React19__default.default.createElement(ui.Flex, { gap: 4, direction: "column" }, isMobile && /* @__PURE__ */ React19__default.default.createElement(
2593
+ ui.Flex,
2594
+ {
2595
+ itemAlign: "center",
2596
+ justify: "between",
2597
+ gap: 4,
2598
+ 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",
2599
+ onClick: () => showPwaDialog()
2600
+ },
2601
+ /* @__PURE__ */ React19__default.default.createElement(ui.Text, { className: "oui-bg-[linear-gradient(270deg,#59B0FE_0%,#26FEFE_100%)] oui-bg-clip-text oui-text-transparent" }, t("connector.privy.pwa.title")),
2602
+ /* @__PURE__ */ React19__default.default.createElement(
2603
+ ArrowRightLinearGradientIcon,
2604
+ {
2605
+ size: 20,
2606
+ className: "oui-flex-shrink-0"
2607
+ }
2608
+ )
2609
+ ), termsOfUse && /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-flex-none oui-text-center oui-text-2xs oui-font-semibold oui-text-base-contrast-80" }, /* @__PURE__ */ React19__default.default.createElement(
2610
+ i18n.Trans,
2611
+ {
2612
+ i18nKey: "connector.privy.termsOfUse",
2613
+ components: [
2614
+ /* @__PURE__ */ React19__default.default.createElement(
2615
+ "a",
2616
+ {
2617
+ key: "termsOfUse",
2618
+ href: termsOfUse,
2619
+ className: "oui-cursor-pointer oui-text-primary oui-underline",
2620
+ target: "_blank",
2621
+ rel: "noreferrer"
2622
+ }
2623
+ )
2624
+ ]
2625
+ }
2626
+ ))))
2627
+ );
2628
+ }
2629
+ var LinkDeviceMobile = (props) => {
2630
+ const [open, setOpen] = React19.useState(false);
2631
+ const { account } = hooks.useAccount();
2632
+ const { t } = i18n.useTranslation();
2633
+ const onDisconnect = async () => {
2634
+ localStorage.removeItem("orderly_link_device");
2635
+ await account.disconnect();
2636
+ };
2637
+ const showDialog = () => {
2638
+ setOpen(true);
2639
+ };
2640
+ const hideDialog = () => {
2641
+ setOpen(false);
2642
+ };
2643
+ return /* @__PURE__ */ React19__default.default.createElement(React19__default.default.Fragment, null, /* @__PURE__ */ React19__default.default.createElement(
2644
+ ui.SimpleDialog,
2412
2645
  {
2413
- className: "oui-size-5 oui-cursor-pointer oui-text-base-contrast-20 hover:oui-text-base-contrast-80",
2414
- onClick: () => props.onChangeOpen(false)
2415
- }
2416
- )), isConnected ? /* @__PURE__ */ React19__default.default.createElement(MyWallet, null) : /* @__PURE__ */ React19__default.default.createElement(RenderConnector, null), !isConnected && termsOfUse && /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-flex-none oui-text-center oui-text-2xs oui-font-semibold oui-text-base-contrast-80" }, /* @__PURE__ */ React19__default.default.createElement(
2417
- i18n.Trans,
2646
+ open,
2647
+ onOpenChange: setOpen,
2648
+ title: t("common.tips"),
2649
+ size: "xs",
2650
+ actions: {
2651
+ secondary: {
2652
+ label: t("common.cancel"),
2653
+ onClick: hideDialog,
2654
+ size: "md",
2655
+ fullWidth: true
2656
+ },
2657
+ primary: {
2658
+ label: t("connector.disconnect"),
2659
+ onClick: async () => {
2660
+ await onDisconnect();
2661
+ hideDialog();
2662
+ },
2663
+ size: "md",
2664
+ variant: "outlined",
2665
+ color: "danger"
2666
+ }
2667
+ }
2668
+ },
2669
+ /* @__PURE__ */ React19__default.default.createElement(ui.Text, { intensity: 54, size: "sm" }, t("linkDevice.scanQRCode.connected.description"))
2670
+ ), /* @__PURE__ */ React19__default.default.createElement(ui.Flex, { className: "oui-gap-[6px]", itemAlign: "center", onClick: showDialog }, /* @__PURE__ */ React19__default.default.createElement(
2671
+ ui.Flex,
2418
2672
  {
2419
- i18nKey: "connector.privy.termsOfUse",
2420
- components: [
2421
- /* @__PURE__ */ React19__default.default.createElement(
2422
- "a",
2423
- {
2424
- key: "termsOfUse",
2425
- href: termsOfUse,
2426
- className: "oui-cursor-pointer oui-text-primary oui-underline",
2427
- target: "_blank",
2428
- rel: "noreferrer"
2429
- }
2430
- )
2431
- ]
2673
+ className: "oui-text-base-contrast",
2674
+ intensity: 500,
2675
+ height: 28,
2676
+ r: "md"
2677
+ },
2678
+ /* @__PURE__ */ React19__default.default.createElement(DesktopIcon, null),
2679
+ /* @__PURE__ */ React19__default.default.createElement(Dot, null),
2680
+ /* @__PURE__ */ React19__default.default.createElement(LinkIcon, null),
2681
+ /* @__PURE__ */ React19__default.default.createElement(Dot, null),
2682
+ /* @__PURE__ */ React19__default.default.createElement(MobileIcon, null)
2683
+ ), props.children));
2684
+ };
2685
+ var Dot = () => {
2686
+ return /* @__PURE__ */ React19__default.default.createElement(ui.Flex, { className: "oui-gap-x-[1px] oui-px-[1px]" }, /* @__PURE__ */ React19__default.default.createElement(DotIcon, null), /* @__PURE__ */ React19__default.default.createElement(DotIcon, null), /* @__PURE__ */ React19__default.default.createElement(DotIcon, null));
2687
+ };
2688
+ var DesktopIcon = (props) => /* @__PURE__ */ React19__default.default.createElement(
2689
+ "svg",
2690
+ {
2691
+ width: "18",
2692
+ height: "18",
2693
+ viewBox: "0 0 18 18",
2694
+ fill: "currentColor",
2695
+ xmlns: "http://www.w3.org/2000/svg",
2696
+ ...props
2697
+ },
2698
+ /* @__PURE__ */ React19__default.default.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" })
2699
+ );
2700
+ var MobileIcon = (props) => /* @__PURE__ */ React19__default.default.createElement(
2701
+ "svg",
2702
+ {
2703
+ width: "18",
2704
+ height: "18",
2705
+ viewBox: "0 0 18 18",
2706
+ fill: "currentColor",
2707
+ xmlns: "http://www.w3.org/2000/svg",
2708
+ ...props
2709
+ },
2710
+ /* @__PURE__ */ React19__default.default.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" })
2711
+ );
2712
+ var LinkIcon = (props) => /* @__PURE__ */ React19__default.default.createElement(
2713
+ "svg",
2714
+ {
2715
+ width: "12",
2716
+ height: "12",
2717
+ viewBox: "0 0 12 12",
2718
+ fill: "none",
2719
+ xmlns: "http://www.w3.org/2000/svg"
2720
+ },
2721
+ /* @__PURE__ */ React19__default.default.createElement(
2722
+ "path",
2723
+ {
2724
+ fillRule: "evenodd",
2725
+ clipRule: "evenodd",
2726
+ 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",
2727
+ fill: "url(#a)"
2728
+ }
2729
+ ),
2730
+ /* @__PURE__ */ React19__default.default.createElement("defs", null, /* @__PURE__ */ React19__default.default.createElement(
2731
+ "linearGradient",
2732
+ {
2733
+ id: "a",
2734
+ x1: "11.007",
2735
+ y1: "5.999",
2736
+ x2: "1.007",
2737
+ y2: "5.999",
2738
+ gradientUnits: "userSpaceOnUse"
2739
+ },
2740
+ /* @__PURE__ */ React19__default.default.createElement("stop", { stopColor: "rgb(var(--oui-gradient-brand-end))" }),
2741
+ /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "1", stopColor: "rgb(var(--oui-gradient-brand-start))" })
2742
+ ))
2743
+ );
2744
+ var DotIcon = (props) => /* @__PURE__ */ React19__default.default.createElement(
2745
+ "svg",
2746
+ {
2747
+ width: "2",
2748
+ height: "2",
2749
+ viewBox: "0 0 2 2",
2750
+ fill: "none",
2751
+ xmlns: "http://www.w3.org/2000/svg"
2752
+ },
2753
+ /* @__PURE__ */ React19__default.default.createElement(
2754
+ "path",
2755
+ {
2756
+ d: "M.667.334a.667.667 0 1 1 0 1.333.667.667 0 0 1 0-1.333",
2757
+ fill: "url(#a)"
2432
2758
  }
2433
- ))));
2434
- }
2759
+ ),
2760
+ /* @__PURE__ */ React19__default.default.createElement("defs", null, /* @__PURE__ */ React19__default.default.createElement(
2761
+ "linearGradient",
2762
+ {
2763
+ id: "a",
2764
+ x1: "1.333",
2765
+ y1: "1.001",
2766
+ x2: "0",
2767
+ y2: "1.001",
2768
+ gradientUnits: "userSpaceOnUse"
2769
+ },
2770
+ /* @__PURE__ */ React19__default.default.createElement("stop", { stopColor: "rgb(var(--oui-gradient-brand-end))" }),
2771
+ /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "1", stopColor: "rgb(var(--oui-gradient-brand-start))" })
2772
+ ))
2773
+ );
2774
+
2775
+ // src/components/userCenter.tsx
2435
2776
  function UserCenter(props) {
2436
2777
  const { accountState: state } = props;
2437
2778
  return /* @__PURE__ */ React19__default.default.createElement(RenderUserCenter, { state, disabledConnect: props.disabledConnect });
@@ -2456,17 +2797,14 @@ var RenderUserCenter = (props) => {
2456
2797
  return account.address;
2457
2798
  }, [account, connectedChain, accountState]);
2458
2799
  if (state.status === types.AccountStatusEnum.EnableTradingWithoutConnected) {
2459
- return /* @__PURE__ */ React19__default.default.createElement(
2460
- ui.Button,
2800
+ return /* @__PURE__ */ React19__default.default.createElement(ui.Flex, { className: "oui-bg-base-5 oui-px-[7px] oui-rounded-[6px] oui-gap-[6px]" }, /* @__PURE__ */ React19__default.default.createElement(LinkDeviceMobile, null, /* @__PURE__ */ React19__default.default.createElement(
2801
+ ui.Text.formatted,
2461
2802
  {
2462
- size: "md",
2463
- variant: "gradient",
2464
- angle: 45,
2465
- "data-testid": "oui-testid-nav-bar-address-btn",
2466
- className: "oui-flex oui-items-center oui-justify-center oui-gap-2"
2803
+ rule: "address",
2804
+ className: "oui-text-base-contrast oui-text-xs"
2467
2805
  },
2468
- /* @__PURE__ */ React19__default.default.createElement(ui.Text.formatted, { rule: "address", className: "oui-text-[rgba(0,0,0,.88)]" }, ui.formatAddress(userAddress))
2469
- );
2806
+ ui.formatAddress(userAddress)
2807
+ )));
2470
2808
  }
2471
2809
  if (state.status <= types.AccountStatusEnum.NotConnected || disabled) {
2472
2810
  return /* @__PURE__ */ React19__default.default.createElement(
@@ -2566,7 +2904,7 @@ ui.installExtension({
2566
2904
 
2567
2905
  // src/main.tsx
2568
2906
  function Main(props) {
2569
- const { wallet, connectedChain, setChain, namespace } = useWallet2();
2907
+ const { wallet, connectedChain, setChain, namespace, onDisconnect } = useWallet2();
2570
2908
  const { openConnectDrawer, setOpenConnectDrawer, setTargetWalletType } = useWalletConnectorPrivy();
2571
2909
  const connect = (props2) => {
2572
2910
  if (props2 && props2.autoSelect) {
@@ -2578,13 +2916,10 @@ function Main(props) {
2578
2916
  resolve([]);
2579
2917
  });
2580
2918
  };
2581
- const disconnect = React19.useCallback(async () => {
2582
- return Promise.resolve([]);
2583
- }, [wallet]);
2584
2919
  const value = React19.useMemo(
2585
2920
  () => ({
2586
2921
  connect,
2587
- disconnect,
2922
+ disconnect: onDisconnect,
2588
2923
  connecting: false,
2589
2924
  wallet,
2590
2925
  setChain,
@@ -2758,7 +3093,6 @@ var commonSwrOpts = {
2758
3093
  // don't duplicate a request with the same key for 1hr
2759
3094
  dedupingInterval: 36e5
2760
3095
  };
2761
- var fetcher = (url) => fetch(url).then((res) => res.json());
2762
3096
  var formatSwapChainInfo = (data = {}) => {
2763
3097
  return Object.keys(data).map((key) => {
2764
3098
  const chain = data[key];
@@ -2889,17 +3223,17 @@ function WalletConnectorPrivyProvider(props) {
2889
3223
  }, [initChains]);
2890
3224
  const { data: swapChainInfoRes, isLoading: swapLoading } = hooks.useSWR(
2891
3225
  !props.customChains && props.enableSwapDeposit ? "https://fi-api.woo.org/swap_support" : null,
2892
- fetcher,
3226
+ hooks.fetcher,
2893
3227
  commonSwrOpts
2894
3228
  );
2895
- const { data: mainnetChainInfoRes } = hooks.useSWR(
3229
+ const { data: mainnetChainInfos } = hooks.useSWR(
2896
3230
  !props.customChains ? "https://api.orderly.org/v1/public/chain_info" : null,
2897
- fetcher,
3231
+ hooks.fetcher,
2898
3232
  commonSwrOpts
2899
3233
  );
2900
- const { data: testChainInfoRes } = hooks.useSWR(
3234
+ const { data: testChainInfos } = hooks.useSWR(
2901
3235
  !props.customChains ? "https://testnet-api.orderly.org/v1/public/chain_info" : null,
2902
- fetcher,
3236
+ hooks.fetcher,
2903
3237
  commonSwrOpts
2904
3238
  );
2905
3239
  const handleCustomerChains = () => {
@@ -2987,15 +3321,15 @@ function WalletConnectorPrivyProvider(props) {
2987
3321
  if (props.customChains) {
2988
3322
  return;
2989
3323
  }
2990
- if (!mainnetChainInfoRes || !testChainInfoRes || swapLoading) {
3324
+ if (!mainnetChainInfos || !testChainInfos || swapLoading) {
2991
3325
  return;
2992
3326
  }
2993
3327
  let testChainsList = [];
2994
3328
  let mainnetChainsList = [];
2995
3329
  try {
2996
- testChainsList = testChainInfoRes?.data?.rows;
3330
+ testChainsList = testChainInfos;
2997
3331
  testChainsList.push(types.AbstractTestnetChainInfo);
2998
- mainnetChainsList = mainnetChainInfoRes?.data?.rows;
3332
+ mainnetChainsList = mainnetChainInfos;
2999
3333
  const testChains = processChainInfo(testChainsList);
3000
3334
  const mainnetChains2 = processChainInfo(mainnetChainsList);
3001
3335
  const swapChains = processChainInfo(
@@ -3015,8 +3349,8 @@ function WalletConnectorPrivyProvider(props) {
3015
3349
  initRef.current = true;
3016
3350
  }, [
3017
3351
  props.customChains,
3018
- mainnetChainInfoRes,
3019
- testChainInfoRes,
3352
+ mainnetChainInfos,
3353
+ testChainInfos,
3020
3354
  swapChainInfoRes,
3021
3355
  swapLoading
3022
3356
  ]);