Release

package.json

@@ -31,7 +31,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.2.17"
+    "starknetkit-next": "npm:starknetkit@^2.2.18"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",

src/app/page.tsx

@@ -37,6 +37,7 @@ export default function Home() {
     >
       <Heading as="h1">Starknetkit</Heading>
       <ConnectButtonStarknetkitLatest />
+      {/* manually hidden */}
       <ConnectButtonStarknetkitNext />
       <Heading as="h1">Starknetkit + Starknet-react</Heading>
       <Button
@@ -55,6 +56,7 @@ export default function Home() {
           <span>starknet-react ({process.env.starknetReactVersion})</span>
         </Flex>
       </Button>
+      {/* manually hidden */}
       <Flex flexDirection="column">
         <Button
           as="a"
@@ -65,9 +67,7 @@ export default function Home() {
           h="20"
         >
           <Flex flexDirection="column" alignItems="center">
-            <span>
-              starknetkit@next ({process.env.starknetkitLatestVersion})
-            </span>
+            <span>starknetkit@next ({process.env.starknetkitNextVersion})</span>
             <span>+</span>
             <span>starknet-react ({process.env.starknetReactNextVersion})</span>
           </Flex>

src/components/AccountSection.tsx

@@ -33,9 +33,11 @@ const AccountSection: FC<AccountSectionProps> = ({ address, chainId }) => {
 
   return (
     <>
-      <Flex alignItems="center" justifyContent="space-between">
-        <Heading>{starknetkitVersion}</Heading>
-        {starknetReactVersion && <Heading>{starknetReactVersion}</Heading>}
+      <Flex flexDirection="column" gap="2">
+        <Heading size="sm">{starknetkitVersion}</Heading>
+        {starknetReactVersion && (
+          <Heading size="sm">{starknetReactVersion}</Heading>
+        )}
       </Flex>
       <Section>
         <Box

src/components/Actions/SignMessageWithStarknetReact.tsx

@@ -54,7 +54,7 @@ const SignMessageWithStarknetReact: FC<SignMessageWithStarknetReactProps> = ({
   }
 
   return (
-    <Flex flex={1} width="full">
+    <Flex flexDirection={{ base: "column", sm: "row" }} flex={1} width="full">
       <Flex
         as="form"
         onSubmit={(e) => {
@@ -79,7 +79,11 @@ const SignMessageWithStarknetReact: FC<SignMessageWithStarknetReactProps> = ({
           onChange={(e) => setShortText(e.target.value)}
         />
 
-        <div style={{ display: "flex", alignItems: "center", gap: "1em" }}>
+        <Flex
+          flexDirection={{ base: "column", sm: "row" }}
+          alignItems="center"
+          gap="1em"
+        >
           <Button colorScheme="primary" type="submit" w="full">
             Sign
           </Button>
@@ -93,7 +97,7 @@ const SignMessageWithStarknetReact: FC<SignMessageWithStarknetReactProps> = ({
           >
             Sign without deploy
           </Button>
-        </div>
+        </Flex>
       </Flex>
       <Flex
         as="form"

src/components/Actions/SignMessageWithStarknetReactNext.tsx

@@ -60,7 +60,7 @@ const SignMessageWithStarknetReactNext: FC<
   }
 
   return (
-    <Flex flex={1} width="full">
+    <Flex flexDirection={{ base: "column", sm: "row" }} flex={1} width="full">
       <Flex
         as="form"
         onSubmit={(e) => {
@@ -85,7 +85,11 @@ const SignMessageWithStarknetReactNext: FC<
           onChange={(e) => setShortText(e.target.value)}
         />
 
-        <div style={{ display: "flex", alignItems: "center", gap: "1em" }}>
+        <Flex
+          flexDirection={{ base: "column", sm: "row" }}
+          alignItems="center"
+          gap="1em"
+        >
           <Button colorScheme="primary" type="submit" w="full">
             Sign
           </Button>
@@ -99,7 +103,7 @@ const SignMessageWithStarknetReactNext: FC<
           >
             Sign without deploy
           </Button>
-        </div>
+        </Flex>
       </Flex>
       <Flex
         as="form"

src/components/connect/ConnectStarknetReactNext.tsx

@@ -1,23 +1,25 @@
+import { availableConnectors } from "@/helpers/connectorsNext"
 import {
   starknetReactVersionAtom,
   starknetkitVersionAtom,
 } from "@/state/versionState"
 import { Button, Flex, Heading, Image } from "@chakra-ui/react"
-import { useConnect } from "starknet-react-core-next"
 import { useSetAtom } from "jotai"
 import React, { useEffect, useState } from "react"
-import { Connector, useStarknetkitConnectModal } from "starknetkit-next"
-import { isInArgentMobileAppBrowser } from "starknetkit-next/argentMobile"
-import { availableConnectors } from "@/helpers/connectorsNext"
+import { useConnect } from "starknet-react-core-next"
+import {
+  StarknetkitConnector,
+  useStarknetkitConnectModal,
+} from "starknetkit-next"
 
 const ConnectStarknetReactNext = () => {
-  const { connectAsync, connectors, status } = useConnect()
+  const { connectAsync, connectors } = useConnect()
   const [isClient, setIsClient] = useState(false)
   const setStarknetkitVersion = useSetAtom(starknetkitVersionAtom)
   const setStarknetReactVersion = useSetAtom(starknetReactVersionAtom)
 
   const { starknetkitConnectModal } = useStarknetkitConnectModal({
-    connectors: availableConnectors,
+    connectors: availableConnectors as StarknetkitConnector[],
   })
 
   // https://nextjs.org/docs/messages/react-hydration-error#solution-1-using-useeffect-to-run-on-the-client-only
@@ -32,24 +34,17 @@ const ConnectStarknetReactNext = () => {
     return <></>
   }
 
-  const inAppBrowserFilter = (c: any) => {
-    if (isInArgentMobileAppBrowser()) {
-      return c.id === "argentX"
-    }
-    return c
-  }
-
   return (
     <Flex direction="column" gap="3" p="5">
       <Flex direction="column" gap="3">
-        {connectors.filter(inAppBrowserFilter).map((connector) => {
+        {connectors.map((connector) => {
           if (!connector.available()) {
             return <React.Fragment key={connector.id} />
           }
           const icon =
             typeof connector.icon === "string"
               ? connector.icon
-              : connector.icon.dark ?? ""
+              : (connector.icon.dark ?? "")
           const isSvg = icon?.startsWith("<svg")
 
           return (

src/helpers/connectorsNext.ts

@@ -1,14 +1,28 @@
-import { InjectedConnector } from "starknetkit-next/injected"
+import { ARGENT_WEBWALLET_URL, CHAIN_ID } from "@/constants"
+import { isInArgentMobileAppBrowser } from "starknetkit-next/argentMobile"
 import { ArgentMobileConnector } from "starknetkit-next/argentMobile"
+import { InjectedConnector } from "starknetkit-next/injected"
 import { WebWalletConnector } from "starknetkit-next/webwallet"
-import { ARGENT_WEBWALLET_URL, CHAIN_ID } from "@/constants"
 
-export const availableConnectors = [
-  new InjectedConnector({ options: { id: "argentX" } }),
-  new InjectedConnector({ options: { id: "braavos" } }),
-  new ArgentMobileConnector({
-    dappName: "Example dapp",
-    chainId: CHAIN_ID,
-  }),
-  new WebWalletConnector({ url: ARGENT_WEBWALLET_URL }),
-]
+export const availableConnectors = isInArgentMobileAppBrowser()
+  ? [
+      ArgentMobileConnector.init({
+        options: {
+          dappName: "Example dapp",
+          chainId: CHAIN_ID,
+        },
+        inAppBrowserOptions: {},
+      }),
+    ]
+  : [
+      new InjectedConnector({ options: { id: "argentX" } }),
+      new InjectedConnector({ options: { id: "braavos" } }),
+      ArgentMobileConnector.init({
+        options: {
+          dappName: "Example dapp",
+          chainId: CHAIN_ID,
+        },
+        inAppBrowserOptions: {},
+      }),
+      new WebWalletConnector({ url: ARGENT_WEBWALLET_URL }),
+    ]