@orderly.network/wallet-connector-privy 2.2.0 → 2.3.0

package/README.md

@@ -1,27 +1,38 @@
 # wallet connector privy
 
 The new wallet connector consists of three parts:
+
 - Privy: Privy provides social login, featuring an injected wallet, EVM wallets, and Solana wallets.
 - Wagmi: Wagmi offers connectivity for EVM wallets, such as MetaMask and WalletConnect.
 - Solana: Solana provides connectivity for Solana wallets, such as Phantom and Ledger.
 
-``` javascript
+other configure:
+
+- `network` require, mainnet or testnet, For example, Solana and Abstract will use this network to determine what network it is.
+- `customChains` optional, Brokers can define which chains to display
+- `termsOfUse` optional
+
+```javascript
 interface WalletConnectorPrivyProps{
   network: Network;
   customChains?: Chains;
-  termsOfUse: string;
+  termsOfUse?: string;
   privyConfig?: InitPrivy;
   wagmiConfig?: InitWagmi;
   solanaConfig?: InitSolana;
 }
 ```
 
+if termsOfUse is not configured, will not show terms part.
+
 If privyConfig is not configured, the Privy connector will be disabled.
 
 If wagmiConfig is not configured, the Wagmi connector will be disabled.
 
 If solanaConfig is not configured, the Solana connector will be disabled.
 
+If abstractConfig is not configured, the Abstract Global Wallet connector will be disabled.
+
 At least one of privyConfig, wagmiConfig, or solanaConfig must be provided.
 
 If customChains only includes a Solana chain, then Privy will only display the Solana injected wallet, and the Wagmi connector will be disabled.
@@ -29,13 +40,14 @@ If customChains only includes a Solana chain, then Privy will only display the S
 If customChains only includes EVM chains, then Privy will only display the EVM injected wallet, and the Solana connector will be disabled.
 
 eg:
-``` javascript
+
+```javascript
 <WalletConnectorPrivyProvider
       termsOfUse="https://learn.woo.org/legal/terms-of-use"
       network={Network.testnet}
       // customChains={customChains}
       privyConfig={{
-        appid: "cm50h5kjc011111gdn7i8cd2k",
+        appid: "you privy appid",
         config: {
           appearance: {
             theme: "dark",
@@ -48,7 +60,7 @@ eg:
         connectors: [
           wagmiConnectors.injected(),
           wagmiConnectors.walletConnect({
-            projectId: "93dba83e8d9915dc6a65ffd3ecfd19fd",
+            projectId: "you project id",
             showQrModal: true,
             storageOptions: {},
             metadata: {
@@ -68,14 +80,12 @@ eg:
           console.log("-- error", error, adapter);
         },
       }}
+      abstractConfig={{}}
     >
       <OrderlyAppProvider
-        configStore={configStore}
-        appIcons={config.orderlyAppProvider.appIcons}
-        restrictedInfo={config.orderlyAppProvider.restrictedInfo}
-        // customChains={customChains}
+        // ...orderAppConfig
       >
         {props.children}
       </OrderlyAppProvider>
     </WalletConnectorPrivyProvider>
-```
+```

package/dist/index.js

@@ -13,6 +13,7 @@ var utils = require('@orderly.network/utils');
 var walletAdapterBase = require('@solana/wallet-adapter-base');
 var reactAuth = require('@privy-io/react-auth');
 var walletAdapterReact = require('@solana/wallet-adapter-react');
+var zustand = require('zustand');
 var reactDom = require('react-dom');
 var uiConnector = require('@orderly.network/ui-connector');
 var walletAdapterWallets = require('@solana/wallet-adapter-wallets');
@@ -45,10 +46,10 @@ var WagmiExport__namespace = /*#__PURE__*/_interopNamespace(WagmiExport);
 var WagmiConnectorsExport__namespace = /*#__PURE__*/_interopNamespace(WagmiConnectorsExport);
 
 // src/provider.tsx
-var Network = /* @__PURE__ */ ((Network2) => {
-  Network2["mainnet"] = "mainnet";
-  Network2["testnet"] = "testnet";
-  return Network2;
+var Network = /* @__PURE__ */ ((Network3) => {
+  Network3["mainnet"] = "mainnet";
+  Network3["testnet"] = "testnet";
+  return Network3;
 })(Network || {});
 var WalletType = /* @__PURE__ */ ((WalletType5) => {
   WalletType5["EVM"] = "EVM";
@@ -412,6 +413,112 @@ function usePrivyWallet() {
   }
   return context;
 }
+var useSolanaWalletStore = zustand.create((set, get) => ({
+  wallet: null,
+  isConnecting: false,
+  error: null,
+  isManual: false,
+  walletMethods: null,
+  pendingWalletName: null,
+  connect: async (walletName) => {
+    const { setIsManual, walletMethods } = get();
+    if (!walletMethods) {
+      throw new Error("Wallet methods not initialized");
+    }
+    setIsManual(true);
+    set({ pendingWalletName: walletName });
+    try {
+      set({ isConnecting: true, error: null });
+      const { walletSolana, select } = walletMethods;
+      if (!walletSolana) {
+        select(walletName);
+        await new Promise((resolve) => {
+          const checkWallet = () => {
+            const currentWallet = get().walletMethods?.walletSolana;
+            if (currentWallet) {
+              resolve();
+            } else {
+              setTimeout(checkWallet, 500);
+            }
+          };
+          checkWallet();
+        });
+      }
+      const updatedWalletMethods = get().walletMethods;
+      if (!updatedWalletMethods) {
+        throw new Error("Wallet methods not initialized");
+      }
+      if (!updatedWalletMethods.publicKey) {
+        await updatedWalletMethods.connectSolana();
+      }
+      const lastestWalletMethods = get().walletMethods;
+      if (!lastestWalletMethods) {
+        throw new Error("Wallet methods not initialized");
+      }
+      const wallet = {
+        label: updatedWalletMethods.walletSolana.adapter.name,
+        icon: "",
+        provider: {
+          rpcUrl: lastestWalletMethods.solanaInfo?.rpcUrl ?? null,
+          network: lastestWalletMethods.solanaInfo?.network ?? walletAdapterBase.WalletAdapterNetwork.Devnet,
+          signMessage: lastestWalletMethods.signMessage,
+          signTransaction: lastestWalletMethods.signTransaction,
+          sendTransaction: lastestWalletMethods.sendTransaction
+        },
+        accounts: [
+          {
+            address: updatedWalletMethods.publicKey.toBase58()
+          }
+        ],
+        chains: [
+          {
+            id: SolanaChainsMap.get(lastestWalletMethods.network),
+            namespace: types.ChainNamespace.solana
+          }
+        ],
+        chain: {
+          id: SolanaChainsMap.get(lastestWalletMethods.network),
+          namespace: types.ChainNamespace.solana
+        }
+      };
+      set({
+        wallet,
+        isConnecting: false,
+        isManual: false,
+        pendingWalletName: null
+      });
+      return wallet;
+    } catch (error) {
+      set({
+        error,
+        isConnecting: false,
+        isManual: false,
+        pendingWalletName: null
+      });
+      throw error;
+    }
+  },
+  disconnect: async () => {
+    const { walletMethods } = get();
+    if (!walletMethods) {
+      throw new Error("Wallet methods not initialized");
+    }
+    try {
+      await walletMethods.disconnectSolana();
+      set({ wallet: null, error: null });
+    } catch (error) {
+      set({ error });
+      throw error;
+    }
+  },
+  setWallet: (wallet) => set({ wallet }),
+  setError: (error) => set({ error }),
+  setIsManual: (isManual) => set({ isManual }),
+  setWalletMethods: (methods) => set({ walletMethods: methods }),
+  setPendingWalletName: (name) => set({ pendingWalletName: name })
+}));
+
+// src/providers/solana/solanaWalletProvider.tsx
 var SolanaWalletContext = React19.createContext(
   null
 );
@@ -419,7 +526,6 @@ var SolanaWalletProvider = ({
   children
 }) => {
   const { setLedgerAddress } = hooks.useStorageLedgerAddress();
-  const [wallet, setWallet] = React19.useState();
   const { network, solanaInfo, connectorWalletType } = useWalletConnectorPrivy();
   const {
     wallets,
@@ -442,146 +548,22 @@ var SolanaWalletProvider = ({
     sendTransaction: () => Promise.resolve(),
     disconnect: () => Promise.resolve()
   } : walletAdapterReact.useWallet();
-  const solanaPromiseRef = React19.useRef({
-    walletSelect: null,
-    connect: null,
-    walletSelectResolve: () => {
-    },
-    walletSelectReject: () => {
-    },
-    connectReject: () => {
-    },
-    connectResolve: () => {
-    }
-  });
-  const isManual = React19.useRef(false);
-  const initPromiseRef = () => {
-    solanaPromiseRef.current.walletSelectResolve = () => {
-    };
-    solanaPromiseRef.current.walletSelectReject = () => {
-    };
-    solanaPromiseRef.current.connectReject = () => {
-    };
-    solanaPromiseRef.current.connectReject = () => {
-    };
-    solanaPromiseRef.current.connect = null;
-    solanaPromiseRef.current.walletSelect = null;
-    solanaPromiseRef.current.walletSelect = new Promise((resolve, reject) => {
-      solanaPromiseRef.current.walletSelectResolve = resolve;
-      solanaPromiseRef.current.walletSelectReject = reject;
-    });
-    solanaPromiseRef.current.connect = new Promise((resolve, reject) => {
-      solanaPromiseRef.current.connectResolve = resolve;
-      solanaPromiseRef.current.connectReject = reject;
-    });
-  };
-  const disconnect = () => {
-    disconnectSolana().then(() => {
-      setWallet(void 0);
-    });
-  };
-  const connect = async (walletName) => {
-    initPromiseRef();
-    isManual.current = true;
-    if (!solanaPromiseRef.current) {
-      return;
-    }
-    if (!walletSolana) {
-      select(walletName);
-    } else {
-      solanaPromiseRef.current.walletSelectResolve(walletSolana);
-      if (!publicKey) {
-        try {
-          await connectSolana();
-        } catch (e) {
-          solanaPromiseRef.current.connectReject(e);
-        }
-      } else {
-        solanaPromiseRef.current.connectResolve({
-          userAddress: publicKey.toBase58(),
-          signMessage,
-          sendTransaction,
-          signTransaction
-        });
-      }
-    }
-    return Promise.all([
-      solanaPromiseRef.current.walletSelect,
-      solanaPromiseRef.current.connect
-    ]).then(
-      ([
-        connectedWallet,
-        { userAddress, signMessage: signMessage2, signTransaction: signTransaction2, sendTransaction: sendTransaction2 }
-      ]) => {
-        const tempWallet = {
-          label: connectedWallet.adapter.name,
-          icon: "",
-          provider: {
-            rpcUrl: solanaInfo?.rpcUrl ?? null,
-            network: solanaInfo?.network ?? walletAdapterBase.WalletAdapterNetwork.Devnet,
-            signMessage: signMessage2,
-            signTransaction: signTransaction2,
-            sendTransaction: sendTransaction2
-          },
-          accounts: [
-            {
-              address: userAddress
-            }
-          ],
-          chains: [
-            {
-              id: SolanaChainsMap.get(network),
-              namespace: types.ChainNamespace.solana
-            }
-          ],
-          chain: {
-            id: SolanaChainsMap.get(network),
-            namespace: types.ChainNamespace.solana
-          }
-        };
-        if (connectedWallet.adapter.name === "Ledger") {
-          setLedgerAddress(userAddress);
-        }
-        isManual.current = false;
-        setWallet(tempWallet);
-      }
-    ).catch((e) => {
-      return Promise.reject(e);
-    });
-  };
-  const connectedChain = React19.useMemo(() => {
-    if (!publicKey) {
-      return null;
-    }
-    return {
-      id: SolanaChainsMap.get(network),
-      namespace: types.ChainNamespace.solana
-    };
-  }, [publicKey]);
-  const isConnected = React19.useMemo(() => {
-    return !!publicKey;
-  }, [publicKey]);
+  const {
+    wallet,
+    connect,
+    disconnect: disconnectWallet,
+    setWallet,
+    setWalletMethods,
+    isManual
+  } = useSolanaWalletStore();
   React19.useEffect(() => {
-    if (!walletSolana) {
+    if (!walletSolana || isManual)
       return;
-    }
-    if (isManual.current && solanaPromiseRef.current) {
-      solanaPromiseRef.current.walletSelectResolve(walletSolana);
-      connectSolana().then();
-    }
     if (!publicKey) {
-      connectSolana().then();
+      connectSolana();
       return;
     }
-    if (isManual.current && solanaPromiseRef.current) {
-      solanaPromiseRef.current.connectResolve({
-        userAddress: publicKey?.toBase58(),
-        signMessage,
-        sendTransaction
-      });
-      return;
-    }
-    setWallet({
+    const newWallet = {
       label: walletSolana.adapter.name,
       icon: "",
       provider: {
@@ -606,25 +588,58 @@ var SolanaWalletProvider = ({
         id: SolanaChainsMap.get(network),
         namespace: types.ChainNamespace.solana
       }
-    });
+    };
+    if (walletSolana.adapter.name === "Ledger") {
+      setLedgerAddress(publicKey.toBase58());
+    }
+    setWallet(newWallet);
   }, [
     publicKey,
     walletSolana,
     signMessage,
     signTransaction,
     sendTransaction,
+    solanaInfo,
+    isManual
+  ]);
+  React19.useEffect(() => {
+    setWalletMethods({
+      select,
+      connectSolana,
+      walletSolana,
+      publicKey,
+      signMessage,
+      signTransaction,
+      sendTransaction,
+      disconnectSolana,
+      network,
+      solanaInfo
+    });
+  }, [
+    select,
+    connectSolana,
+    walletSolana,
+    publicKey,
+    signMessage,
+    signTransaction,
+    sendTransaction,
+    disconnectSolana,
+    network,
     solanaInfo
   ]);
   const value = React19.useMemo(
     () => ({
       wallets,
-      connectedChain,
+      connectedChain: publicKey ? {
+        id: SolanaChainsMap.get(network),
+        namespace: types.ChainNamespace.solana
+      } : null,
       connect,
       wallet,
-      disconnect,
-      isConnected
+      disconnect: disconnectWallet,
+      isConnected: !!publicKey
     }),
-    [wallets, connectedChain, wallet, isConnected]
+    [wallets, publicKey, wallet, network]
   );
   return /* @__PURE__ */ React19__default.default.createElement(SolanaWalletContext.Provider, { value }, children);
 };
@@ -765,7 +780,6 @@ function Drawer({ children, isOpen, onClose }) {
       {
         style: { height: `${drawerHeight}px` },
         className: ui.cn(
-          "oui-overflow-hidden",
           "oui-fixed oui-top-0 oui-right-0",
           "oui-bg-[#131519] oui-shadow-lg",
           "oui-border oui-border-line-12",
@@ -1409,7 +1423,7 @@ function RenderConnector() {
       }
     );
   };
-  return /* @__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());
+  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()));
 }
 function SwitchNetworkTips({
   tipsContent
@@ -2331,13 +2345,13 @@ function ConnectDrawer(props) {
         filter: "blur(50px)"
       }
     }
-  ), /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-relative oui-z-10" }, /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-mb-4 oui-flex oui-items-center oui-justify-between md:oui-mb-5" }, renderHeader(), /* @__PURE__ */ React19__default.default.createElement(
+  ), /* @__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(
     ui.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__default.default.createElement(MyWallet, null) : /* @__PURE__ */ React19__default.default.createElement(RenderConnector, null)), !isConnected && termsOfUse && /* @__PURE__ */ React19__default.default.createElement("div", { className: "oui-relative oui-z-10 oui-text-center oui-text-2xs oui-font-semibold  oui-text-base-contrast-80" }, /* @__PURE__ */ React19__default.default.createElement(
+  )), 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(
     i18n.Trans,
     {
       i18nKey: "connector.privy.termsOfUse",
@@ -2354,7 +2368,7 @@ function ConnectDrawer(props) {
         )
       ]
     }
-  )));
+  ))));
 }
 function UserCenter(props) {
   const { accountState: state } = props;