@kodiak-finance/orderly-wallet-connector-privy 2.8.18 → 2.8.19

package/README.md

@@ -35,6 +35,13 @@ If abstractConfig is not configured, the Abstract Global Wallet connector will b
 
 At least one of privyConfig, wagmiConfig, or solanaConfig must be provided.
 
+**Available Login Methods for Privy:**
+
+- `email` - Email/password login
+- `google` - Google OAuth login
+- `twitter` - Twitter OAuth login
+- `telegram` - Telegram login (optional)
+
 If customChains only includes a Solana chain, then Privy will only display the Solana injected wallet, and the Wagmi connector will be disabled.
 
 If customChains only includes EVM chains, then Privy will only display the EVM injected wallet, and the Solana connector will be disabled.
@@ -54,6 +61,7 @@ eg:
             accentColor: "#181C23",
             logo: "/orderly-logo.svg",
           },
+          loginMethods: ["email", "google", "twitter", "telegram"],
         },
       }}
       wagmiConfig={{

package/dist/index.js

@@ -50,11 +50,11 @@ var Network = /* @__PURE__ */ ((Network3) => {
   Network3["testnet"] = "testnet";
   return Network3;
 })(Network || {});
-var WalletType = /* @__PURE__ */ ((WalletType5) => {
-  WalletType5["EVM"] = "EVM";
-  WalletType5["SOL"] = "SOL";
-  WalletType5["ABSTRACT"] = "Abstract";
-  return WalletType5;
+var WalletType = /* @__PURE__ */ ((WalletType4) => {
+  WalletType4["EVM"] = "EVM";
+  WalletType4["SOL"] = "SOL";
+  WalletType4["ABSTRACT"] = "Abstract";
+  return WalletType4;
 })(WalletType || {});
 var WalletConnectType = /* @__PURE__ */ ((WalletConnectType2) => {
   WalletConnectType2["EVM"] = "EVM";
@@ -232,6 +232,8 @@ var PrivyWalletProvider = ({
         address = `@${account.username}`;
       } else if (account.type === "google_oauth") {
         address = `@${account.name}`;
+      } else if (account.type === "telegram") {
+        address = `@${account.username}`;
       }
       return {
         type: account.type,
@@ -1131,6 +1133,7 @@ function useWallet2() {
       if (chainType === "SOL" /* SOL */) {
         if (isConnectedSOL && walletSOL) {
           setStorageChain(parseInt(chain.chainId));
+          return Promise.resolve(true);
         } else {
           setOpenConnectDrawer(true);
           setTargetWalletType("SOL" /* SOL */);
@@ -1345,7 +1348,7 @@ var RenderLoginMethodsDom = ({
         {
           className: orderlyUi.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]"
+            "oui-border-none oui-bg-[#333948]"
           ),
           onClick: () => connect({ walletType: "privy", extraType: "email" })
         },
@@ -1356,7 +1359,7 @@ var RenderLoginMethodsDom = ({
             className: "oui-size-[18px]"
           }
         ),
-        isDesktop && /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-text-2xs oui-text-base-contrast" }, t("connector.privy.email"))
+        /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-text-2xs oui-text-base-contrast" }, t("connector.privy.email"))
       )
     );
   }
@@ -1367,7 +1370,7 @@ var RenderLoginMethodsDom = ({
         {
           className: orderlyUi.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]"
+            "oui-border-none oui-bg-[#335FFC]"
           ),
           onClick: () => connect({ walletType: "privy", extraType: "google" })
         },
@@ -1378,7 +1381,7 @@ var RenderLoginMethodsDom = ({
             className: "oui-size-[18px]"
           }
         ),
-        isDesktop && /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-text-2xs oui-text-base-contrast" }, t("connector.privy.google"))
+        /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-text-2xs oui-text-base-contrast" }, t("connector.privy.google"))
       )
     );
   }
@@ -1389,7 +1392,7 @@ var RenderLoginMethodsDom = ({
         {
           className: orderlyUi.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]"
+            "oui-border-none oui-bg-[#07080A]"
           ),
           onClick: () => connect({ walletType: "privy", extraType: "twitter" })
         },
@@ -1400,7 +1403,39 @@ var RenderLoginMethodsDom = ({
             className: "oui-size-[18px]"
           }
         ),
-        isDesktop && /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-text-2xs oui-text-base-contrast" }, t("connector.privy.twitter"))
+        /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-text-2xs oui-text-base-contrast" }, t("connector.privy.twitter"))
+      )
+    );
+  }
+  if (loginMethods?.includes("telegram")) {
+    arr.push(
+      /* @__PURE__ */ React19__default.default.createElement(
+        "div",
+        {
+          className: orderlyUi.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]",
+            "oui-border-none oui-bg-[#3D79A9]"
+          ),
+          onClick: () => connect({ walletType: "privy", extraType: "telegram" })
+        },
+        /* @__PURE__ */ React19__default.default.createElement(
+          "svg",
+          {
+            width: "18",
+            height: "18",
+            viewBox: "0 0 18 18",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg"
+          },
+          /* @__PURE__ */ React19__default.default.createElement(
+            "path",
+            {
+              d: "M2.652 8.12916L15.0683 4.04929C15.6468 3.87358 16.1499 4.16929 15.9587 4.91069L13.8458 13.3962C13.6898 13.9961 13.2672 14.1461 12.6836 13.859L9.46384 11.8362L7.90929 13.109C7.73824 13.2547 7.59234 13.379 7.2603 13.379L7.4867 10.5891L13.4584 5.99923C13.72 5.80638 13.398 5.69495 13.0559 5.8878L5.68061 9.8434L2.50107 8.99914C1.81687 8.81058 1.80178 8.41201 2.652 8.12916Z",
+              fill: "white"
+            }
+          )
+        ),
+        /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-text-2xs oui-text-base-contrast" }, t("connector.privy.telegram"))
       )
     );
   }
@@ -1415,7 +1450,7 @@ var PrivyConnectAreaMobile = ({
   const { isMobile, isDesktop } = orderlyUi.useScreen();
   const { connectorWalletType, privyConfig } = useWalletConnectorPrivy();
   const loginMethods = privyConfig.loginMethods;
-  return /* @__PURE__ */ React19__default.default.createElement(orderlyUi.Flex, { direction: "column", className: "oui-w-full" }, /* @__PURE__ */ React19__default.default.createElement(orderlyUi.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" }));
+  return /* @__PURE__ */ React19__default.default.createElement(orderlyUi.Flex, { direction: "column", className: "oui-w-full" }, /* @__PURE__ */ React19__default.default.createElement(orderlyUi.Grid, { cols: 2, rows: 2, 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" }));
 };
 var PrivyConnectAreaDesktop = ({
   connect
@@ -1466,6 +1501,25 @@ function RenderPrivyTypeIcon({
       }
     );
   }
+  if (type === "telegram") {
+    return /* @__PURE__ */ React19__default.default.createElement(
+      "svg",
+      {
+        width: size,
+        height: size,
+        viewBox: "0 0 18 18",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      /* @__PURE__ */ React19__default.default.createElement(
+        "path",
+        {
+          d: "M2.652 8.12916L15.0683 4.04929C15.6468 3.87358 16.1499 4.16929 15.9587 4.91069L13.8458 13.3962C13.6898 13.9961 13.2672 14.1461 12.6836 13.859L9.46384 11.8362L7.90929 13.109C7.73824 13.2547 7.59234 13.379 7.2603 13.379L7.4867 10.5891L13.4584 5.99923C13.72 5.80638 13.398 5.69495 13.0559 5.8878L5.68061 9.8434L2.50107 8.99914C1.81687 8.81058 1.80178 8.41201 2.652 8.12916Z",
+          fill: black ? "black" : "white"
+        }
+      )
+    );
+  }
   return /* @__PURE__ */ React19__default.default.createElement(
     "img",
     {
@@ -1594,7 +1648,24 @@ function EVMConnectArea({
 // src/components/renderConnector/index.tsx
 function RenderConnector() {
   const { connect } = useWallet2();
-  const { setOpenConnectDrawer, connectorWalletType, walletChainTypeConfig } = useWalletConnectorPrivy();
+  const {
+    setOpenConnectDrawer,
+    connectorWalletType,
+    walletChainTypeConfig,
+    targetWalletType
+  } = useWalletConnectorPrivy();
+  const { storageChain } = orderlyHooks.useStorageChain();
+  const selectedWalletType = (() => {
+    if (targetWalletType)
+      return targetWalletType;
+    if (!storageChain?.chainId)
+      return void 0;
+    try {
+      return getChainType(parseInt(storageChain.chainId));
+    } catch {
+      return void 0;
+    }
+  })();
   const handleConnect = (params) => {
     connect(params);
     if (params.walletType === "privy" /* PRIVY */) {
@@ -1663,7 +1734,30 @@ function RenderConnector() {
       }
     );
   };
-  return /* @__PURE__ */ React19__default.default.createElement(orderlyUi.ScrollArea, { className: "oui-flex oui-grow oui-shrik oui-basis-auto oui-custom-scrollbar" }, /* @__PURE__ */ React19__default.default.createElement("div", { className: orderlyUi.cn("oui-flex oui-flex-col oui-gap-4", "md:oui-gap-5") }, renderPrivyConnectArea(), renderWagmiConnectArea(), renderSolanaConnectArea(), renderAbstractConnectArea()));
+  const walletOrder = ["evm", "sol", "abstract"];
+  const typeToKey = {
+    ["EVM" /* EVM */]: "evm",
+    ["SOL" /* SOL */]: "sol",
+    ["Abstract" /* ABSTRACT */]: "abstract"
+  };
+  const prioritizedKey = selectedWalletType ? typeToKey[selectedWalletType] : void 0;
+  const orderedWalletKeys = prioritizedKey ? [
+    prioritizedKey,
+    ...walletOrder.filter((k) => k !== prioritizedKey)
+  ] : walletOrder;
+  const renderByKey = (key) => {
+    switch (key) {
+      case "evm":
+        return renderWagmiConnectArea();
+      case "sol":
+        return renderSolanaConnectArea();
+      case "abstract":
+        return renderAbstractConnectArea();
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ React19__default.default.createElement(orderlyUi.ScrollArea, { className: "oui-flex oui-grow oui-shrik oui-basis-auto oui-custom-scrollbar" }, /* @__PURE__ */ React19__default.default.createElement("div", { className: orderlyUi.cn("oui-flex oui-flex-col oui-gap-4", "md:oui-gap-5") }, renderPrivyConnectArea(), orderedWalletKeys.map((key) => /* @__PURE__ */ React19__default.default.createElement(React19__default.default.Fragment, { key }, renderByKey(key)))));
 }
 function SwitchNetworkTips({
   tipsContent
@@ -2589,7 +2683,7 @@ function ConnectDrawer(props) {
       }
     ),
     /* @__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(
-      orderlyUi.CloseIcon,
+      orderlyUi.CloseSquareFillIcon,
       {
         className: "oui-size-5 oui-cursor-pointer oui-text-base-contrast-20 hover:oui-text-base-contrast-80",
         onClick: () => props.onChangeOpen(false)
@@ -3095,19 +3189,6 @@ var WagmiWallet = (props) => {
 };
 
 // src/provider.tsx
-var commonSwrOpts = {
-  revalidateIfStale: false,
-  revalidateOnFocus: false,
-  revalidateOnReconnect: false,
-  // If false, undefined data gets cached against the key.
-  revalidateOnMount: true,
-  // don't duplicate a request with the same key for 1hr
-  dedupingInterval: 36e5
-};
-orderlyTypes.TesntTokenFallback([
-  orderlyTypes.ArbitrumSepoliaTokenInfo,
-  orderlyTypes.SolanaDevnetTokenInfo
-]);
 var testnetChainFallback = [orderlyTypes.ArbitrumSepoliaChainInfo, orderlyTypes.SolanaDevnetChainInfo];
 var formatSwapChainInfo = (data = {}) => {
   return Object.keys(data).map((key) => {
@@ -3192,7 +3273,22 @@ function WalletConnectorPrivyProvider(props) {
   const [initChains, setInitChains] = React19.useState([]);
   const [mainnetChains, setMainnetChains] = React19.useState([]);
   const [testnetChains, setTestnetChains] = React19.useState([]);
-  const initRef = React19.useRef(false);
+  const [mainnetChainInfos, setMainnetChainInfos] = React19.useState(null);
+  const [testChainInfos, setTestChainInfos] = React19.useState(
+    null
+  );
+  const fetchMainChains = orderlyHooks.useMainnetChainsStore((state) => state.fetchData);
+  const fetchTestChains = orderlyHooks.useTestnetChainsStore((state) => state.fetchData);
+  const mainnetChainsHydrated = orderlyHooks.useMainnetChainsStore(
+    (state) => state.hydrated
+  );
+  const testChainsHydrated = orderlyHooks.useTestnetChainsStore((state) => state.hydrated);
+  const mainnetChainInfosFromStore = orderlyHooks.useMainnetChainsStore(
+    (state) => state.data
+  );
+  const testChainInfosFromStore = orderlyHooks.useTestnetChainsStore((state) => state.data);
+  const hasCustomChains = Array.isArray(props.customChains) && props.customChains.length > 0;
+  const initRef = React19.useRef(hasCustomChains);
   const [openConnectDrawer, setOpenConnectDrawer] = React19.useState(false);
   const [targetWalletType, setTargetWalletType] = React19.useState();
   const [privyConfig, setPrivyConfig] = React19.useState({
@@ -3237,24 +3333,29 @@ function WalletConnectorPrivyProvider(props) {
     });
     return chainTypeObj;
   }, [initChains]);
-  const { data: swapChainInfoRes, isLoading: swapLoading } = orderlyHooks.useSWR(
-    !props.customChains && props.enableSwapDeposit ? "https://fi-api.woo.org/swap_support" : null,
-    orderlyHooks.fetcher,
-    commonSwrOpts
-  );
-  const { data: mainnetChainInfos } = orderlyHooks.useSWR(
-    !props.customChains ? "https://api.orderly.org/v1/public/chain_info" : null,
-    orderlyHooks.fetcher,
-    commonSwrOpts
-  );
-  const { data: testChainInfos } = orderlyHooks.useSWR(
-    !props.customChains ? "https://testnet-api.orderly.org/v1/public/chain_info" : null,
-    orderlyHooks.fetcher,
-    {
-      ...commonSwrOpts,
-      fallbackData: testnetChainFallback
+  const {
+    data: swapChainInfoRes,
+    // loading: swapLoading,
+    fetchData: fetchSwapData
+  } = orderlyHooks.useSwapSupportStore();
+  React19.useEffect(() => {
+    if (!props.enableSwapDeposit || !!props.customChains)
+      return;
+    fetchSwapData();
+  }, [props.enableSwapDeposit, props.customChains]);
+  React19.useEffect(() => {
+    if (!mainnetChainsHydrated || !testChainsHydrated)
+      return;
+    if (Array.isArray(orderlyHooks.useMainnetChainsStore.getState().data) && orderlyHooks.useTestnetChainsStore.getState().data) {
+      return;
     }
-  );
+    fetchMainChains().then((data) => {
+      setMainnetChainInfos(data);
+    });
+    fetchTestChains().then((data) => {
+      setTestChainInfos(data);
+    });
+  }, [mainnetChainsHydrated, testChainsHydrated]);
   const handleCustomerChains = () => {
     const testChains = processChainInfo(
       props.customChains.testnet?.map((item) => item.network_infos)
@@ -3337,21 +3438,33 @@ function WalletConnectorPrivyProvider(props) {
     ]
   );
   React19.useEffect(() => {
-    if (props.customChains) {
+    if (initRef.current)
+      return;
+    if (hasCustomChains) {
       return;
     }
-    if (!mainnetChainInfos || !testChainInfos || swapLoading) {
+    const hasStoreData = mainnetChainInfosFromStore && testChainInfosFromStore;
+    const hasApiData = mainnetChainInfos && testChainInfos;
+    if (!hasStoreData && !hasApiData) {
+      return;
+    }
+    if (props.enableSwapDeposit && !swapChainInfoRes) {
       return;
     }
     let testChainsList = [];
     let mainnetChainsList = [];
     try {
-      testChainsList = testChainInfos;
-      mainnetChainsList = mainnetChainInfos;
+      if (hasStoreData) {
+        testChainsList = testChainInfosFromStore;
+        mainnetChainsList = mainnetChainInfosFromStore;
+      } else {
+        testChainsList = testChainInfos || testnetChainFallback;
+        mainnetChainsList = mainnetChainInfos || [];
+      }
       const testChains = processChainInfo(testChainsList);
       const mainnetChains2 = processChainInfo(mainnetChainsList);
       const swapChains = processChainInfo(
-        formatSwapChainInfo(swapChainInfoRes?.data || {})
+        formatSwapChainInfo(swapChainInfoRes || {})
       );
       const chains = [...testChains, ...mainnetChains2];
       const filterSwapChains = swapChains.filter(
@@ -3369,8 +3482,11 @@ function WalletConnectorPrivyProvider(props) {
     props.customChains,
     mainnetChainInfos,
     testChainInfos,
+    mainnetChainInfosFromStore,
+    testChainInfosFromStore,
     swapChainInfoRes,
-    swapLoading
+    props.enableSwapDeposit
+    // swapLoading,
   ]);
   React19.useEffect(() => {
     if (props.customChains) {