[wallets, react] Add OKX wallet

.changeset/pretty-papayas-occur.md

@@ -0,0 +1,6 @@
+---
+"@thirdweb-dev/wallets": patch
+"@thirdweb-dev/react": patch
+---
+
+Add OKX wallet

packages/react-core/src/core/hooks/wallet-hooks.ts

@@ -8,6 +8,7 @@ import type {
   LocalWallet,
   MagicLink,
   MetaMaskWallet,
+  OKXWallet,
   PaperWallet,
   PhantomWallet,
   RainbowWallet,
@@ -37,6 +38,7 @@ type WalletIdToWalletTypeMap = {
   walletConnect: WalletConnect;
   phantom: PhantomWallet;
   walletConnectV1: WalletConnect;
+  okx: OKXWallet;
 };
 
 /**

packages/react/src/evm/index.ts

@@ -56,6 +56,7 @@ export {
   PhantomWallet,
   RainbowWallet,
   MetaMaskWallet,
+  OKXWallet,
   TrustWallet,
   CoinbaseWallet,
   BloctoWallet,

packages/react/src/index.ts

@@ -18,6 +18,7 @@ export { trustWallet } from "./wallet/wallets/trustWallet/TrustWallet";
 export { walletConnect } from "./wallet/wallets/walletConnect/walletConnect";
 export { walletConnectV1 } from "./wallet/wallets/walletConnectV1";
 export { zerionWallet } from "./wallet/wallets/zerion/zerionWallet";
+export { okxWallet } from "./wallet/wallets/okx/okxWallet";
 
 export { darkTheme, lightTheme } from "./design-system/index";
 export type { Theme, ThemeOverrides } from "./design-system/index";

packages/react/src/wallet/wallets/okx/OKXConnectUI.tsx

@@ -0,0 +1,109 @@
+import { ConnectUIProps, useConnect } from "@thirdweb-dev/react-core";
+import { ConnectingScreen } from "../../ConnectWallet/screens/ConnectingScreen";
+import { isMobile } from "../../../evm/utils/isMobile";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { OKXScan } from "./OKXScan";
+import { GetStartedScreen } from "../../ConnectWallet/screens/GetStartedScreen";
+import type { OKXWallet } from "@thirdweb-dev/wallets";
+import { wait } from "../../../utils/wait";
+
+export const OKXConnectUI = (props: ConnectUIProps<OKXWallet>) => {
+  const [screen, setScreen] = useState<
+    "connecting" | "scanning" | "get-started"
+  >("connecting");
+  const { walletConfig, connected } = props;
+  const connect = useConnect();
+  const [errorConnecting, setErrorConnecting] = useState(false);
+
+  const hideBackButton = props.supportedWallets.length === 1;
+
+  const connectToExtension = useCallback(async () => {
+    try {
+      connectPrompted.current = true;
+      setErrorConnecting(false);
+      setScreen("connecting");
+      await wait(1000);
+      await connect(walletConfig);
+      connected();
+    } catch (e) {
+      setErrorConnecting(true);
+      console.error(e);
+    }
+  }, [connected, connect, walletConfig]);
+
+  const connectPrompted = useRef(false);
+  useEffect(() => {
+    if (connectPrompted.current) {
+      return;
+    }
+
+    const isInstalled = walletConfig.isInstalled
+      ? walletConfig.isInstalled()
+      : false;
+
+    // if loading
+    (async () => {
+      if (isInstalled) {
+        connectToExtension();
+      }
+
+      // if wallet is not injected
+      else {
+        // on mobile, deep link to the okx app
+        if (isMobile()) {
+          window.open(
+            `okx://wallet/dapp/details?dappUrl=${window.location.toString()}`,
+          );
+        } else {
+          // on desktop, show the OKX scan qr code
+          setScreen("scanning");
+        }
+      }
+    })();
+  }, [connectToExtension, walletConfig]);
+
+  if (screen === "connecting") {
+    return (
+      <ConnectingScreen
+        errorConnecting={errorConnecting}
+        onGetStarted={() => {
+          setScreen("get-started");
+        }}
+        onRetry={connectToExtension}
+        hideBackButton={hideBackButton}
+        onBack={props.goBack}
+        walletName={walletConfig.meta.name}
+        walletIconURL={walletConfig.meta.iconURL}
+      />
+    );
+  }
+
+  if (screen === "get-started") {
+    return (
+      <GetStartedScreen
+        walletIconURL={walletConfig.meta.iconURL}
+        walletName={walletConfig.meta.name}
+        chromeExtensionLink={walletConfig.meta.urls?.chrome}
+        googlePlayStoreLink={walletConfig.meta.urls?.android}
+        appleStoreLink={walletConfig.meta.urls?.ios}
+        onBack={props.goBack}
+      />
+    );
+  }
+
+  if (screen === "scanning") {
+    return (
+      <OKXScan
+        onBack={props.goBack}
+        onConnected={props.connected}
+        onGetStarted={() => {
+          setScreen("get-started");
+        }}
+        hideBackButton={hideBackButton}
+        walletConfig={walletConfig}
+      />
+    );
+  }
+
+  return null;
+};

packages/react/src/wallet/wallets/okx/OKXScan.tsx

@@ -0,0 +1,61 @@
+import { ScanScreen } from "../../ConnectWallet/screens/ScanScreen";
+import {
+  useCreateWalletInstance,
+  useWalletContext,
+} from "@thirdweb-dev/react-core";
+import { useEffect, useRef, useState } from "react";
+import type { OKXWallet } from "@thirdweb-dev/wallets";
+import type { WalletConfig } from "@thirdweb-dev/react-core";
+
+export const OKXScan: React.FC<{
+  onBack: () => void;
+  onGetStarted: () => void;
+  onConnected: () => void;
+  walletConfig: WalletConfig<OKXWallet>;
+  hideBackButton: boolean;
+}> = ({ onBack, onConnected, onGetStarted, walletConfig, hideBackButton }) => {
+  const createInstance = useCreateWalletInstance();
+  const [qrCodeUri, setQrCodeUri] = useState<string | undefined>();
+  const { setConnectedWallet, chainToConnect, setConnectionStatus } =
+    useWalletContext();
+
+  const scanStarted = useRef(false);
+  useEffect(() => {
+    if (scanStarted.current) {
+      return;
+    }
+    scanStarted.current = true;
+
+    const wallet = createInstance(walletConfig);
+
+    setConnectionStatus("connecting");
+    wallet.connectWithQrCode({
+      chainId: chainToConnect?.chainId,
+      onQrCodeUri(uri) {
+        setQrCodeUri(uri);
+      },
+      onConnected() {
+        setConnectedWallet(wallet);
+        onConnected();
+      },
+    });
+  }, [
+    createInstance,
+    setConnectedWallet,
+    chainToConnect,
+    onConnected,
+    walletConfig,
+    setConnectionStatus,
+  ]);
+
+  return (
+    <ScanScreen
+      onBack={onBack}
+      onGetStarted={onGetStarted}
+      qrCodeUri={qrCodeUri}
+      walletName={walletConfig.meta.name}
+      walletIconURL={walletConfig.meta.iconURL}
+      hideBackButton={hideBackButton}
+    />
+  );
+};

packages/react/src/wallet/wallets/okx/okxWallet.tsx

@@ -0,0 +1,52 @@
+import type { WalletOptions, WalletConfig } from "@thirdweb-dev/react-core";
+import { OKXWallet, getInjectedOKXProvider } from "@thirdweb-dev/wallets";
+import { OKXConnectUI } from "./OKXConnectUI";
+
+type OKXWalletOptions = {
+  /**
+   * When connecting OKX using the QR Code - Wallet Connect connector is used which requires a project id.
+   * This project id is Your project’s unique identifier for wallet connect that can be obtained at cloud.walletconnect.com.
+   *
+   * https://docs.walletconnect.com/2.0/web3modal/options#projectid-required
+   */
+  projectId?: string;
+
+  /**
+   * If true, the wallet will be tagged as "reccomended" in ConnectWallet Modal
+   */
+  recommended?: boolean;
+};
+
+export const okxWallet = (
+  options?: OKXWalletOptions,
+): WalletConfig<OKXWallet> => {
+  return {
+    id: OKXWallet.id,
+    recommended: options?.recommended,
+    meta: {
+      name: "OKX Wallet",
+      urls: {
+        chrome:
+          "https://chrome.google.com/webstore/detail/okx-wallet/mcohilncbfahbmgdjkbpemcciiolgcge",
+        android:
+          "https://play.google.com/store/apps/details?id=com.okinc.okex.gp&pli=1",
+        ios: "https://apps.apple.com/us/app/okx-buy-bitcoin-eth-crypto/id1327268470",
+      },
+      iconURL:
+        "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiByeD0iMTIiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik00Ni4wMjg0IDMyLjk2NjhIMzMuMDE5OUMzMi40Njc3IDMyLjk2NjggMzIuMDE1IDMzLjQxOTUgMzIuMDE1IDMzLjk3MTZWNDYuOTgwMUMzMi4wMTUgNDcuNTMyMyAzMi40Njc3IDQ3Ljk4NSAzMy4wMTk5IDQ3Ljk4NUg0Ni4wMjg0QzQ2LjU4MDUgNDcuOTg1IDQ3LjAzMzIgNDcuNTMyMyA0Ny4wMzMyIDQ2Ljk4MDFWMzMuOTcxNkM0Ny4wMzMyIDMzLjQxOTUgNDYuNTgwNSAzMi45NjY4IDQ2LjAyODQgMzIuOTY2OFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMS4wMTMzIDE4SDE4LjAwNDlDMTcuNDUyNyAxOCAxNyAxOC40NTI3IDE3IDE5LjAwNDlWMzIuMDEzM0MxNyAzMi41NjU1IDE3LjQ1MjcgMzMuMDE4MiAxOC4wMDQ5IDMzLjAxODJIMzEuMDEzM0MzMS41NjU1IDMzLjAxODIgMzIuMDE4MiAzMi41NjU1IDMyLjAxODIgMzIuMDEzM1YxOS4wMDQ5QzMyLjAxNSAxOC40NTI3IDMxLjU2NTUgMTggMzEuMDEzMyAxOFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik02MC45OTUyIDE4SDQ3Ljk4NjdDNDcuNDM0NSAxOCA0Ni45ODE4IDE4LjQ1MjcgNDYuOTgxOCAxOS4wMDQ5VjMyLjAxMzNDNDYuOTgxOCAzMi41NjU1IDQ3LjQzNDUgMzMuMDE4MiA0Ny45ODY3IDMzLjAxODJINjAuOTk1MkM2MS41NDczIDMzLjAxODIgNjIgMzIuNTY1NSA2MiAzMi4wMTMzVjE5LjAwNDlDNjIgMTguNDUyNyA2MS41NDczIDE4IDYwLjk5NTIgMThaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMzEuMDEzMyA0Ny45MzM3SDE4LjAwNDlDMTcuNDUyNyA0Ny45MzM3IDE3IDQ4LjM4NjQgMTcgNDguOTM4NlY2MS45NDcxQzE3IDYyLjQ5OTIgMTcuNDUyNyA2Mi45NTE5IDE4LjAwNDkgNjIuOTUxOUgzMS4wMTMzQzMxLjU2NTUgNjIuOTUxOSAzMi4wMTgyIDYyLjQ5OTIgMzIuMDE4MiA2MS45NDcxVjQ4LjkzODZDMzIuMDE1IDQ4LjM4NjQgMzEuNTY1NSA0Ny45MzM3IDMxLjAxMzMgNDcuOTMzN1oiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik02MC45OTUyIDQ3LjkzMzdINDcuOTg2N0M0Ny40MzQ1IDQ3LjkzMzcgNDYuOTgxOCA0OC4zODY0IDQ2Ljk4MTggNDguOTM4NlY2MS45NDcxQzQ2Ljk4MTggNjIuNDk5MiA0Ny40MzQ1IDYyLjk1MTkgNDcuOTg2NyA2Mi45NTE5SDYwLjk5NTJDNjEuNTQ3MyA2Mi45NTE5IDYyIDYyLjQ5OTIgNjIgNjEuOTQ3MVY0OC45Mzg2QzYyIDQ4LjM4NjQgNjEuNTQ3MyA0Ny45MzM3IDYwLjk5NTIgNDcuOTMzN1oiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=",
+    },
+    create: (walletOptions: WalletOptions) => {
+      const wallet = new OKXWallet({
+        ...walletOptions,
+        projectId: options?.projectId,
+        qrcode: false,
+      });
+
+      return wallet;
+    },
+    connectUI: OKXConnectUI,
+    isInstalled() {
+      return !!getInjectedOKXProvider();
+    },
+  };
+};

packages/wallets/evm/connectors/okx/package.json

@@ -0,0 +1,7 @@
+{
+  "main": "dist/thirdweb-dev-wallets-evm-connectors-okx.cjs.js",
+  "module": "dist/thirdweb-dev-wallets-evm-connectors-okx.esm.js",
+  "browser": {
+    "./dist/thirdweb-dev-wallets-evm-connectors-okx.esm.js": "./dist/thirdweb-dev-wallets-evm-connectors-okx.browser.esm.js"
+  }
+}

packages/wallets/evm/wallets/okx/package.json

@@ -0,0 +1,7 @@
+{
+  "main": "dist/thirdweb-dev-wallets-evm-wallets-okx.cjs.js",
+  "module": "dist/thirdweb-dev-wallets-evm-wallets-okx.esm.js",
+  "browser": {
+    "./dist/thirdweb-dev-wallets-evm-wallets-okx.esm.js": "./dist/thirdweb-dev-wallets-evm-wallets-okx.browser.esm.js"
+  }
+}

packages/wallets/package.json

@@ -22,6 +22,13 @@
       },
       "default": "./evm/dist/thirdweb-dev-wallets-evm.cjs.js"
     },
+    "./evm/wallets/okx": {
+      "module": {
+        "browser": "./evm/wallets/okx/dist/thirdweb-dev-wallets-evm-wallets-okx.browser.esm.js",
+        "default": "./evm/wallets/okx/dist/thirdweb-dev-wallets-evm-wallets-okx.esm.js"
+      },
+      "default": "./evm/wallets/okx/dist/thirdweb-dev-wallets-evm-wallets-okx.cjs.js"
+    },
     "./evm/wallets/base": {
       "module": {
         "browser": "./evm/wallets/base/dist/thirdweb-dev-wallets-evm-wallets-base.browser.esm.js",
@@ -141,6 +148,13 @@
       },
       "default": "./evm/wallets/private-key/dist/thirdweb-dev-wallets-evm-wallets-private-key.cjs.js"
     },
+    "./evm/connectors/okx": {
+      "module": {
+        "browser": "./evm/connectors/okx/dist/thirdweb-dev-wallets-evm-connectors-okx.browser.esm.js",
+        "default": "./evm/connectors/okx/dist/thirdweb-dev-wallets-evm-connectors-okx.esm.js"
+      },
+      "default": "./evm/connectors/okx/dist/thirdweb-dev-wallets-evm-connectors-okx.cjs.js"
+    },
     "./evm/wallets/local-wallet": {
       "module": {
         "browser": "./evm/wallets/local-wallet/dist/thirdweb-dev-wallets-evm-wallets-local-wallet.browser.esm.js",

packages/wallets/src/evm/connectors/injected/types.ts

@@ -50,6 +50,7 @@ type InjectedProviderFlags = {
   isTrustWallet?: true;
   isXDEFI?: true;
   isZerion?: true;
+  isOkxWallet?: true;
 };
 type InjectedProviders = InjectedProviderFlags & {
   isMetaMask: true;

packages/wallets/src/evm/connectors/okx/getInjectedOKXProvider.ts

@@ -0,0 +1,20 @@
+import { Ethereum } from "../injected/types";
+import { assertWindowEthereum } from "../../utils/assertWindowEthereum";
+
+declare global {
+  interface Window {
+    okxwallet?: Ethereum;
+  }
+}
+
+export function getInjectedOKXProvider(): Ethereum | undefined {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  if (assertWindowEthereum(globalThis.window)) {
+    if (globalThis.window.ethereum && window.okxwallet) {
+      return window.okxwallet;
+    }
+  }
+}