chore: update to use metamask

Author: bluecco

package.json

@@ -16,6 +16,7 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@starknet-io/get-starknet-core": "^4.0.4",
     "@starknet-io/types-js": "^0.7.7",
     "@starknet-react/chains": "^0.1.7",
     "@starknet-react/core": "^2.8.2",
@@ -32,7 +33,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.6.0"
+    "starknetkit-next": "npm:starknetkit@^2.6.1"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",

pnpm-lock.yaml

@@ -32,6 +32,7 @@ const ConnectButtonStarknetkitNext = () => {
               new InjectedConnector({ options: { id: "argentX" } }),
               new InjectedConnector({ options: { id: "braavos" } }),
               new InjectedConnector({ options: { id: "keplr" } }),
+              new InjectedConnector({ options: { id: "metamask" } }),
               new InjectedConnector({ options: { id: "okxwallet" } }),
               new ArgentMobileBaseConnector({
                 dappName: "Starknetkit example dapp",
@@ -85,7 +86,7 @@ const ConnectButtonStarknetkitNext = () => {
           checked={withAdditionalWallets}
           onChange={() => setWithAdditionalWallets(!withAdditionalWallets)}
         />
-        Include Keplr and OKX wallets with starknetkit@next (
+        Include Metamask, Keplr and OKX wallets with starknetkit@next (
         {process.env.starknetkitNextVersion})
       </Flex>
     </>

src/components/connect/ConnectButtonStarknetkitNext.tsx

@@ -1,30 +1,38 @@
 import { ARGENT_WEBWALLET_URL, CHAIN_ID } from "@/constants"
+import { getStarknet } from "@starknet-io/get-starknet-core"
 import {
   isInArgentMobileAppBrowser,
   ArgentMobileConnector,
 } from "starknetkit-next/argentMobile"
 import { InjectedConnector } from "starknetkit-next/injected"
 import { WebWalletConnector } from "starknetkit-next/webwallet"
 
-export const availableConnectors = isInArgentMobileAppBrowser()
-  ? [
-      ArgentMobileConnector.init({
-        options: {
-          url: typeof window !== "undefined" ? window.location.href : "",
-          dappName: "Example dapp",
-          chainId: CHAIN_ID,
-        },
-      }),
-    ]
-  : [
-      new InjectedConnector({ options: { id: "argentX" } }),
-      new InjectedConnector({ options: { id: "braavos" } }),
-      ArgentMobileConnector.init({
-        options: {
-          url: typeof window !== "undefined" ? window.location.href : "",
-          dappName: "Example dapp",
-          chainId: CHAIN_ID,
-        },
-      }),
-      new WebWalletConnector({ url: ARGENT_WEBWALLET_URL }),
-    ]
+export const availableConnectors = () => {
+  if (typeof window !== "undefined") {
+    getStarknet()
+  }
+  return isInArgentMobileAppBrowser()
+    ? [
+        ArgentMobileConnector.init({
+          options: {
+            url: typeof window !== "undefined" ? window.location.href : "",
+            dappName: "Example dapp",
+            chainId: CHAIN_ID,
+          },
+        }),
+      ]
+    : [
+        new InjectedConnector({ options: { id: "argentX" } }),
+        new InjectedConnector({ options: { id: "braavos" } }),
+        ArgentMobileConnector.init({
+          options: {
+            url: typeof window !== "undefined" ? window.location.href : "",
+            dappName: "Example dapp",
+            chainId: CHAIN_ID,
+          },
+        }),
+        new WebWalletConnector({ url: ARGENT_WEBWALLET_URL }),
+      ]
+}
+
+export const connectors = availableConnectors()