feat: add keplr and okx extensions

Author: bluecco

package.json

@@ -32,7 +32,7 @@
     "starknet-react-chains-next": "npm:@starknet-react/[email protected]",
     "starknet-react-core-next": "npm:@starknet-react/[email protected]",
     "starknetkit-latest": "npm:starknetkit@^1.1.9",
-    "starknetkit-next": "npm:starknetkit@^2.3.2"
+    "starknetkit-next": "npm:starknetkit@^2.3.3"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",

pnpm-lock.yaml

@@ -8,7 +8,11 @@ import { starknetkitVersionAtom } from "@/state/versionState"
 import { Button, Flex } from "@chakra-ui/react"
 import { useSetAtom } from "jotai"
 import { useRouter } from "next/navigation"
+import { useState } from "react"
 import { connect } from "starknetkit-next"
+import { ArgentMobileBaseConnector } from "starknetkit-next/argentMobile"
+import { InjectedConnector } from "starknetkit-next/injected"
+import { WebWalletConnector } from "starknetkit-next/webwallet"
 
 const ConnectButtonStarknetkitNext = () => {
   const setWallet = useSetAtom(walletStarknetkitNextAtom)
@@ -17,17 +21,38 @@ const ConnectButtonStarknetkitNext = () => {
   const setStarknetkitVersion = useSetAtom(starknetkitVersionAtom)
   const navigate = useRouter()
 
+  const [withAdditionalWallets, setWithAdditionalWallets] = useState(false)
+
   const connectFn = async () => {
-    const res = await connect({
-      modalMode: "alwaysAsk",
-      webWalletUrl: ARGENT_WEBWALLET_URL,
-      argentMobileOptions: {
-        dappName: "Starknetkit example dapp",
-        url: window.location.hostname,
-        chainId: CHAIN_ID,
-        icons: [],
-      },
-    })
+    const res = await connect(
+      withAdditionalWallets
+        ? {
+            modalMode: "alwaysAsk",
+            connectors: [
+              new InjectedConnector({ options: { id: "argentX" } }),
+              new InjectedConnector({ options: { id: "braavos" } }),
+              new InjectedConnector({ options: { id: "keplr" } }),
+              new InjectedConnector({ options: { id: "okxwallet" } }),
+              new ArgentMobileBaseConnector({
+                dappName: "Starknetkit example dapp",
+                url: window.location.hostname,
+                chainId: CHAIN_ID,
+                icons: [],
+              }),
+              new WebWalletConnector({ url: ARGENT_WEBWALLET_URL }),
+            ],
+          }
+        : {
+            modalMode: "alwaysAsk",
+            webWalletUrl: ARGENT_WEBWALLET_URL,
+            argentMobileOptions: {
+              dappName: "Starknetkit example dapp",
+              url: window.location.hostname,
+              chainId: CHAIN_ID,
+              icons: [],
+            },
+          },
+    )
 
     const { wallet, connectorData, connector } = res
     setWallet(wallet)
@@ -40,19 +65,30 @@ const ConnectButtonStarknetkitNext = () => {
   }
 
   return (
-    <Flex flexDirection="column" alignItems="center">
-      <Button
-        p="4"
-        rounded="lg"
-        colorScheme="primary"
-        onClick={connectFn}
-        h="20"
-        w="full"
-      >
-        starknetkit@next ({process.env.starknetkitNextVersion})
-      </Button>
-      <strong>(with session keys)</strong> {/* TODO: will be removed */}
-    </Flex>
+    <>
+      <Flex flexDirection="column" alignItems="center">
+        <Button
+          p="4"
+          rounded="lg"
+          colorScheme="primary"
+          onClick={connectFn}
+          h="20"
+          w="full"
+        >
+          starknetkit@next ({process.env.starknetkitNextVersion}) +
+          <strong>(with session keys)</strong> {/* TODO: will be removed */}
+        </Button>
+      </Flex>
+      <Flex gap="1">
+        <input
+          type="checkbox"
+          checked={withAdditionalWallets}
+          onChange={() => setWithAdditionalWallets(!withAdditionalWallets)}
+        />
+        Include Keplr and OKX wallets with starknetkit@next (
+        {process.env.starknetkitNextVersion})
+      </Flex>
+    </>
   )
 }