@orderly.network/wallet-connector 2.0.0 → 2.0.1-alpha.1

package/dist/index.d.mts

@@ -1,15 +1,20 @@
 import React, { PropsWithChildren } from 'react';
-import { WalletAdapterNetwork, Adapter } from '@solana/wallet-adapter-base';
+import { WalletAdapterNetwork, Adapter, WalletError } from '@solana/wallet-adapter-base';
+import { Optional } from '@orderly.network/types';
+import { InitOptions } from '@web3-onboard/core';
 
-interface SolanaInitialProps extends PropsWithChildren {
+type ConnectorInitOptions = Optional<InitOptions, "apiKey" | "connect" | "wallets" | "chains" | "appMetadata" | "accountCenter" | "theme">;
+type SolanaInitialProps = PropsWithChildren<{
     network?: WalletAdapterNetwork;
     endPoint?: string;
     wallets?: Adapter[];
-}
-interface EvmInitialProps extends PropsWithChildren {
+    onError?: (error: WalletError, adapter?: Adapter) => void;
+}>;
+type EvmInitialProps = PropsWithChildren<{
     apiKey?: string;
+    options?: ConnectorInitOptions;
     skipInit?: boolean;
-}
+}>;
 
 interface WalletConnectorProviderProps {
     solanaInitial?: SolanaInitialProps;

package/dist/index.d.ts

@@ -1,15 +1,20 @@
 import React, { PropsWithChildren } from 'react';
-import { WalletAdapterNetwork, Adapter } from '@solana/wallet-adapter-base';
+import { WalletAdapterNetwork, Adapter, WalletError } from '@solana/wallet-adapter-base';
+import { Optional } from '@orderly.network/types';
+import { InitOptions } from '@web3-onboard/core';
 
-interface SolanaInitialProps extends PropsWithChildren {
+type ConnectorInitOptions = Optional<InitOptions, "apiKey" | "connect" | "wallets" | "chains" | "appMetadata" | "accountCenter" | "theme">;
+type SolanaInitialProps = PropsWithChildren<{
     network?: WalletAdapterNetwork;
     endPoint?: string;
     wallets?: Adapter[];
-}
-interface EvmInitialProps extends PropsWithChildren {
+    onError?: (error: WalletError, adapter?: Adapter) => void;
+}>;
+type EvmInitialProps = PropsWithChildren<{
     apiKey?: string;
+    options?: ConnectorInitOptions;
     skipInit?: boolean;
-}
+}>;
 
 interface WalletConnectorProviderProps {
     solanaInitial?: SolanaInitialProps;

package/dist/index.js

@@ -6,12 +6,22 @@ var walletAdapterBase = require('@solana/wallet-adapter-base');
 var walletAdapterReactUi = require('@solana/wallet-adapter-react-ui');
 var web3_js = require('@solana/web3.js');
 require('@solana/wallet-adapter-react-ui/styles.css');
+var walletAdapterMobile = require('@solana-mobile/wallet-adapter-mobile');
+var walletAdapterWallets = require('@solana/wallet-adapter-wallets');
+var utils = require('@orderly.network/utils');
 var hooks = require('@orderly.network/hooks');
 var types = require('@orderly.network/types');
+var ui = require('@orderly.network/ui');
+var injectedModule = require('@web3-onboard/injected-wallets');
+var react = require('@web3-onboard/react');
+var binanceModule = require('@binance/w3w-blocknative-connector');
+var lodash = require('lodash');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
+var injectedModule__default = /*#__PURE__*/_interopDefault(injectedModule);
+var binanceModule__default = /*#__PURE__*/_interopDefault(binanceModule);
 
 // src/initSolana.tsx
 function InitSolana({ children, ...props }) {
@@ -19,81 +29,464 @@ function InitSolana({ children, ...props }) {
   const endPoint = React.useMemo(() => {
     return props.endPoint ?? web3_js.clusterApiUrl(network);
   }, [network]);
+  const mobileWalletNotFoundHanlder = (adapter) => {
+    console.log("-- mobile wallet adapter", adapter);
+    return Promise.reject(new walletAdapterBase.WalletNotReadyError("wallet not ready"));
+  };
+  const handleSolanaError = (error, adapter) => {
+    console.log("-- solanan error", error);
+    console.log("-- solana adapter", adapter);
+  };
   const wallets = React.useMemo(() => {
-    return props.wallets ?? [];
-  }, []);
-  return /* @__PURE__ */ React__default.default.createElement(walletAdapterReact.ConnectionProvider, { endpoint: endPoint }, /* @__PURE__ */ React__default.default.createElement(walletAdapterReact.WalletProvider, { wallets }, /* @__PURE__ */ React__default.default.createElement(walletAdapterReactUi.WalletModalProvider, null, children)));
+    let uri = "";
+    if (typeof window !== "undefined") {
+      const location = utils.getGlobalObject().location;
+      uri = `${location.protocol}//${location.host}`;
+    }
+    return props.wallets ?? [
+      new walletAdapterWallets.PhantomWalletAdapter(),
+      new walletAdapterMobile.SolanaMobileWalletAdapter({
+        addressSelector: walletAdapterMobile.createDefaultAddressSelector(),
+        appIdentity: {
+          uri
+        },
+        authorizationResultCache: walletAdapterMobile.createDefaultAuthorizationResultCache(),
+        chain: network,
+        onWalletNotFound: mobileWalletNotFoundHanlder
+      })
+    ];
+  }, [props.wallets, network]);
+  return /* @__PURE__ */ React__default.default.createElement(walletAdapterReact.ConnectionProvider, { endpoint: endPoint }, /* @__PURE__ */ React__default.default.createElement(walletAdapterReact.WalletProvider, { wallets, onError: props.onError ?? handleSolanaError }, /* @__PURE__ */ React__default.default.createElement(walletAdapterReactUi.WalletModalProvider, { className: "oui-pointer-events-auto" }, children)));
 }
-function Main(props) {
-  const { setVisible, visible } = walletAdapterReactUi.useWalletModal();
+var getChainsArray = () => {
+  return Array.from(types.chainsInfoMap.values()).map((chain) => {
+    return {
+      id: chain.chainInfo.chainId,
+      token: chain.chainInfo.nativeCurrency.symbol,
+      label: chain.chainInfo.chainName,
+      rpcUrl: chain.chainInfo.rpcUrls[0],
+      blockExplorerUrl: chain.chainInfo.blockExplorerUrls[0]
+    };
+  });
+};
+var binance = binanceModule__default.default({ options: { lng: "en" } });
+var initConfig = (apiKey, options) => {
+  const defaultOptions = {
+    apiKey,
+    connect: {
+      // autoConnectAllPreviousWallet: true,
+      autoConnectLastWallet: true
+    },
+    wallets: [injectedModule__default.default(), binance],
+    chains: getChainsArray(),
+    appMetadata: {
+      name: "Orderly",
+      // icon: blocknativeIcon,
+      description: "Orderly",
+      recommendedInjectedWallets: [
+        { name: "Coinbase", url: "https://wallet.coinbase.com/" },
+        { name: "MetaMask", url: "https://metamask.io" },
+        { name: "Trezor", url: "https://trezor.io/" },
+        { name: "Walletconnect", url: "https://walletconnect.com/" },
+        { name: "Ledger", url: "https://www.ledger.com/" }
+      ],
+      agreement: {
+        version: "1.0.0",
+        termsUrl: "https://www.blocknative.com/terms-conditions",
+        privacyUrl: "https://www.blocknative.com/privacy-policy"
+      },
+      gettingStartedGuide: "https://blocknative.com",
+      explore: "https://blocknative.com"
+    },
+    accountCenter: {
+      desktop: {
+        enabled: false
+      },
+      mobile: {
+        enabled: false
+      }
+    },
+    theme: "dark"
+  };
+  const mergedOptions = lodash.merge(defaultOptions, options);
+  return react.init(mergedOptions);
+};
+var SolanaChains = /* @__PURE__ */ new Map([[walletAdapterBase.WalletAdapterNetwork.Devnet, 901901901], [walletAdapterBase.WalletAdapterNetwork.Mainnet, 900900900]]);
+
+// src/useSOL.tsx
+function useSOL({ network }) {
+  const [wallet, setWallet] = React.useState(null);
+  const { isMobile } = ui.useScreen();
+  const { connection } = walletAdapterReact.useConnection();
+  const { setVisible: setModalVisible, visible } = walletAdapterReactUi.useWalletModal();
   const {
-    connect: connectSolanaWallet,
-    wallet: selectedSolanaWallet,
-    connecting: solanaConnecting,
-    disconnect: solanaDisconnect,
     signMessage,
     sendTransaction,
-    publicKey
+    publicKey,
+    wallet: solanaWallet,
+    connect: solanaConnect,
+    disconnect: solanaDisconnect,
+    connecting
   } = walletAdapterReact.useWallet();
-  const { connection } = walletAdapterReact.useConnection();
+  const selectModalVisibleRef = React.useRef(false);
+  const [connected, setConnected] = React.useState(false);
+  const isManual = React.useRef(false);
+  const solanaPromiseRef = React.useRef({
+    walletSelect: null,
+    connect: null,
+    walletSelectResolve: () => {
+    },
+    walletSelectReject: () => {
+    },
+    connectReject: () => {
+    },
+    connectResolve: () => {
+    }
+  });
+  const ee = hooks.useEventEmitter();
+  const initPromiseRef = () => {
+    console.log("-- init solana promise");
+    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 handleSolanaError = (e) => {
+    console.log("solan connect error", e);
+    if (e instanceof walletAdapterBase.WalletNotReadyError) {
+      console.log("-- need toast wallet not ready");
+      ee.emit("wallet:connect-error", { message: "Please open the wallet app and use the in-app browser." });
+    }
+    solanaDisconnect().then();
+  };
   const connect = async () => {
-    console.log("-- connect solana");
-    if (!selectedSolanaWallet) {
-      setVisible(true);
-    }
-    connectSolanaWallet().then((res) => {
-      console.log("-- publickey", publicKey);
-      console.log("-- publick", publicKey?.toBase58());
-      console.log("-- res", res);
-    }).catch((err) => {
-      console.log("-- error", err);
+    initPromiseRef();
+    isManual.current = true;
+    if (!solanaPromiseRef.current) {
+      return;
+    }
+    if (!solanaWallet) {
+      setModalVisible(true);
+      selectModalVisibleRef.current = true;
+    } else {
+      solanaPromiseRef.current.walletSelectResolve(solanaWallet);
+      if (!publicKey) {
+        try {
+          await solanaConnect();
+        } catch (e) {
+          solanaPromiseRef.current.connectReject(e);
+        }
+      } else {
+        solanaPromiseRef.current.connectResolve({
+          userAddress: publicKey.toBase58(),
+          signMessage,
+          sendTransaction
+        });
+      }
+    }
+    console.log("-- connect fn", solanaWallet, publicKey);
+    return Promise.all([
+      solanaPromiseRef.current.walletSelect,
+      solanaPromiseRef.current.connect
+    ]).then(([wallet2, { userAddress, signMessage: signMessage2, sendTransaction: sendTransaction2 }]) => {
+      const tempWallet = {
+        label: wallet2.adapter.name,
+        icon: "",
+        provider: {
+          signMessage: signMessage2,
+          connection,
+          sendTransaction: sendTransaction2
+        },
+        accounts: [
+          {
+            address: userAddress
+          }
+        ],
+        chains: [
+          {
+            id: SolanaChains.get(network),
+            namespace: types.ChainNamespace.solana
+          }
+        ]
+      };
+      setWallet(tempWallet);
+      setConnected(true);
+      return [tempWallet];
+    }).catch((e) => {
+      console.log("connect solana error", e);
+      handleSolanaError(e);
+      return Promise.reject(e);
+    }).finally(() => {
+      isManual.current = false;
     });
-    return [];
   };
   const disconnect = async () => {
+    console.log("--- discconnect sol");
     await solanaDisconnect();
+    setWallet(null);
+    setConnected(false);
     return [];
   };
-  React.useEffect(() => {
-    if (!selectedSolanaWallet)
-      return;
-    if (visible)
-      return;
-    console.log("-- selectedSolanaWallet", selectedSolanaWallet, visible);
-    connectSolanaWallet().then((res) => {
-      console.log("-- publick", publicKey?.toBase58());
-      console.log("-- res", res);
-    }).catch((err) => {
-      console.log("-- error", err);
-    });
-  }, [selectedSolanaWallet, visible]);
-  const connecting = false;
-  const wallet = React.useMemo(() => {
-    console.log("-- publiKey", publicKey);
+  const connectedChain = React.useMemo(() => {
     if (!publicKey) {
       return null;
     }
     return {
-      label: "",
+      id: 901901901,
+      namespace: types.ChainNamespace.solana
+    };
+  }, [publicKey]);
+  React.useEffect(() => {
+    if (selectModalVisibleRef.current) {
+      if (!visible && !solanaWallet && solanaPromiseRef.current) {
+        console.log("-- select modal visible ref", selectModalVisibleRef.current);
+        console.log("-- use reject solana select modal");
+        solanaPromiseRef.current.walletSelectReject("user reject");
+        selectModalVisibleRef.current = false;
+      } else if (solanaWallet) {
+        selectModalVisibleRef.current = false;
+      }
+    }
+  }, [visible, solanaWallet, solanaPromiseRef.current, selectModalVisibleRef.current]);
+  React.useEffect(() => {
+    if (!solanaWallet || !publicKey) {
+      console.log("--- not connect sol", solanaWallet, publicKey);
+      setConnected(false);
+      return;
+    }
+    console.log("-- publick", {
+      publicKey: publicKey.toBase58(),
+      isManual: isManual.current
+    });
+    if (isManual.current) {
+      if (solanaPromiseRef.current) {
+        solanaPromiseRef.current.connectResolve({
+          userAddress: publicKey?.toBase58(),
+          signMessage,
+          sendTransaction
+        });
+      }
+      return;
+    }
+    console.log("-- tt");
+    setWallet({
+      label: solanaWallet.adapter.name,
       icon: "",
       provider: {
         signMessage,
         connection,
         sendTransaction
       },
-      accounts: [{
-        address: publicKey.toBase58()
-      }],
+      accounts: [
+        {
+          address: publicKey.toBase58()
+        }
+      ],
       chains: [
         {
-          id: 901901901,
+          id: SolanaChains.get(network),
           namespace: types.ChainNamespace.solana
         }
       ]
+    });
+    setConnected(true);
+  }, [publicKey, solanaWallet, signMessage, isManual, connection, sendTransaction, network]);
+  React.useEffect(() => {
+    if (!publicKey) {
+      return;
+    }
+    const id = connection.onAccountChange(publicKey, (updatedAccountInfo, context) => {
+      console.log("--- account change", updatedAccountInfo, context);
+    }, { commitment: "confirmed" });
+    return () => {
+      if (id) {
+        connection.removeAccountChangeListener(id).then();
+      }
     };
-  }, [publicKey, signMessage, connection]);
-  const setChanin = () => {
+  }, [connection, publicKey]);
+  React.useEffect(() => {
+    if (!solanaWallet) {
+      return;
+    }
+    console.log("-- public key", publicKey, { isMobile });
+    if (isMobile && solanaWallet.readyState === walletAdapterBase.WalletReadyState.Loadable && !isManual.current) {
+      solanaDisconnect().then();
+      return;
+    }
+    console.log("-- solana refresh auto connect", solanaWallet);
+    if (solanaPromiseRef.current) {
+      solanaPromiseRef.current.walletSelectResolve(solanaWallet);
+    }
+    solanaConnect().then((res) => {
+      console.log("-- connect res", res);
+    }).catch((e) => {
+      solanaPromiseRef.current.connectReject(e);
+      handleSolanaError(e);
+    });
+  }, [solanaWallet, solanaConnect, publicKey, solanaDisconnect, handleSolanaError, isMobile]);
+  return {
+    connected,
+    connect,
+    disconnect,
+    connecting,
+    wallet,
+    connectedChain
   };
+}
+function useEvm() {
+  const [
+    {
+      wallet,
+      // the wallet that has been connected or null if not yet connected
+      connecting
+      // boolean indicating if connection is in progress
+    },
+    connect,
+    // function to call to initiate user to connect wallet
+    evmDisconnect,
+    // function to call with wallet<DisconnectOptions> to disconnect wallet
+    updateBalances,
+    // function to be called with an optional array of wallet addresses connected through Onboard to update balance or empty/no params to update all connected wallets
+    setWalletModules,
+    // function to be called with an array of wallet modules to conditionally allow connection of wallet types i.e. setWalletModules([ledger, trezor, injected])
+    setPrimaryWallet
+    // function that can set the primary wallet and/or primary account within that wallet. The wallet that is set needs to be passed in for the first parameter and if you would like to set the primary account, the address of that account also needs to be passed in
+  ] = react.useConnectWallet();
+  const [
+    {
+      chains,
+      // the list of chains that web3-onboard was initialized with
+      connectedChain: evmConnectChain,
+      // the current chain the user's wallet is connected to
+      settingChain
+      // boolean indicating if the chain is in the process of being set
+    },
+    setChain
+    // function to call to initiate user to switch chains in their wallet
+  ] = react.useSetChain();
+  const connected = React.useMemo(() => {
+    return !!(wallet && wallet.accounts && wallet.accounts[0] && wallet.accounts[0].address);
+  }, [wallet]);
+  const disconnect = async () => {
+    console.log("-- disconnect evm xxxxxxxxxxxx");
+    if (!wallet) {
+      return;
+    }
+    return evmDisconnect({
+      label: wallet.label
+    });
+  };
+  const connectedChain = React.useMemo(() => {
+    return evmConnectChain ? { ...evmConnectChain, id: parseInt(evmConnectChain.id) } : null;
+  }, [evmConnectChain]);
+  const changeChain = (chain) => {
+    return setChain(chain);
+  };
+  return {
+    connect,
+    connected,
+    disconnect,
+    connecting,
+    wallet,
+    connectedChain,
+    changeChain
+  };
+}
+
+// src/main.tsx
+function Main(props) {
+  const sol = useSOL({ network: props.solanaNetwork });
+  const evm = useEvm();
+  const [namespace, setNamespace] = React.useState(null);
+  const newNamespace = React.useRef();
+  const connect = async (options) => {
+    if (Array.from(SolanaChains.values()).includes(options.chainId)) {
+      newNamespace.current = types.ChainNamespace.solana;
+      return sol.connect().then((res) => {
+        console.log("-- connect sol", res);
+        if (res) {
+          return res;
+        }
+      });
+    }
+    newNamespace.current = types.ChainNamespace.evm;
+    const evmOption = options.autoSelect ? {
+      autoSelect: options.autoSelect
+    } : void 0;
+    return evm.connect(evmOption).then((res) => {
+      console.log("-- connect evm", res);
+      if (!res.length) {
+        return Promise.reject({ message: "user reject" });
+      }
+      return res;
+    }).catch((e) => {
+      console.log("-- connect evm error", e);
+      return Promise.reject(e);
+    });
+  };
+  const disconnect = async () => {
+    if (namespace === types.ChainNamespace.evm) {
+      return evm.disconnect();
+    }
+    if (namespace === types.ChainNamespace.solana) {
+      return sol.disconnect();
+    }
+  };
+  const connecting = newNamespace.current == types.ChainNamespace.solana ? sol.connecting : evm.connecting;
+  const wallet = namespace === types.ChainNamespace.solana && sol.connected ? sol.wallet : namespace === types.ChainNamespace.evm && evm.connected ? evm.wallet : null;
+  const connectedChain = namespace === types.ChainNamespace.solana ? sol.connectedChain : evm.connectedChain;
+  const setChain = (chain) => {
+    const chainId = typeof chain.chainId === "number" ? chain.chainId : utils.hex2int(chain.chainId);
+    let tempNamespace = types.ChainNamespace.evm;
+    if (Array.from(SolanaChains.values()).includes(chainId)) {
+      tempNamespace = types.ChainNamespace.solana;
+    }
+    console.log("--- namespace", {
+      namespace,
+      tempNamespace
+    });
+    if (namespace === tempNamespace && namespace === types.ChainNamespace.evm) {
+      return evm.changeChain(chain);
+    }
+    if (namespace !== tempNamespace) {
+      return connect({ chainId }).then();
+    }
+  };
+  React.useEffect(() => {
+    if (sol.connected && evm.connected) {
+      if (newNamespace.current === types.ChainNamespace.solana) {
+        evm.disconnect().then();
+        setNamespace(types.ChainNamespace.solana);
+        return;
+      } else {
+        setNamespace(types.ChainNamespace.evm);
+        sol.disconnect().then();
+        return;
+      }
+    }
+    if (sol.connected) {
+      setNamespace(types.ChainNamespace.solana);
+      return;
+    }
+    if (evm.connected) {
+      setNamespace(types.ChainNamespace.evm);
+      return;
+    }
+  }, [newNamespace.current, sol.connected, evm.connected]);
   return /* @__PURE__ */ React__default.default.createElement(
     hooks.WalletConnectorContext.Provider,
     {
@@ -102,18 +495,40 @@ function Main(props) {
         disconnect,
         connecting,
         wallet,
-        setChanin,
-        connectedChain: {
-          id: 901901901,
-          namespace: types.ChainNamespace.solana
-        }
+        setChain,
+        connectedChain,
+        namespace
       }
     },
     props.children
   );
 }
+function InitEvm(props) {
+  const [initialized, setInitialized] = React.useState(!!props.skipInit);
+  const { get, register } = hooks.useSimpleDI();
+  React.useEffect(() => {
+    document.body.style.setProperty("--onboard-modal-z-index", "88");
+  }, []);
+  React.useEffect(() => {
+    if (props.skipInit) {
+      return;
+    }
+    let onboardAPI = get("onboardAPI");
+    if (onboardAPI) {
+      console.log("[Orderly SDK]:onboardAPI already initialized");
+      setInitialized(true);
+      return;
+    }
+    onboardAPI = initConfig(props.apiKey, props.options);
+    register("onboardAPI", onboardAPI);
+    setInitialized(true);
+  }, []);
+  if (!initialized)
+    return null;
+  return props.children;
+}
 function WalletConnectorProvider(props) {
-  return /* @__PURE__ */ React__default.default.createElement(InitSolana, { ...props.solanaInitial ?? {} }, /* @__PURE__ */ React__default.default.createElement(Main, null, props.children));
+  return /* @__PURE__ */ React__default.default.createElement(InitSolana, { ...props.solanaInitial ?? {} }, /* @__PURE__ */ React__default.default.createElement(InitEvm, { ...props.evmInitial ?? {} }, /* @__PURE__ */ React__default.default.createElement(Main, { solanaNetwork: props.solanaInitial?.network ?? walletAdapterBase.WalletAdapterNetwork.Devnet }, props.children)));
 }
 
 exports.WalletConnectorProvider = WalletConnectorProvider;