docs: update the docs sidebar to treat RN as a first class citizen

.eslintignore

@@ -14,3 +14,5 @@ account-kit/rn-signer/lib/*
 **/ios/generated/*
 **/build/*
 **/.cxx/*
+
+**/vendor/*

account-kit/rn-signer/package.json

@@ -42,6 +42,7 @@
     "typecheck": "tsc",
     "build": "yarn typecheck",
     "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "docs:gen": "node ../../doc-gen/dist/esm/cli.js generate --in ./src/index.ts --out ../../site/pages/reference/account-kit/react-native",
     "prepare": "bob build"
   },
   "keywords": [

account-kit/rn-signer/src/client.ts

@@ -1,5 +1,3 @@
-/* eslint-disable import/extensions */
-import "./utils/mmkv-localstorage-polyfill";
 import { type ConnectionConfig } from "@aa-sdk/core";
 import {
   BaseSignerClient,
@@ -14,8 +12,9 @@ import {
   type SignupResponse,
   type User,
 } from "@account-kit/signer";
-import NativeTEKStamper from "./NativeTEKStamper";
 import { z } from "zod";
+import NativeTEKStamper from "./NativeTEKStamper.js";
+import "./utils/mmkv-localstorage-polyfill.js";
 
 export const RNSignerClientParamsSchema = z.object({
   connection: z.custom<ConnectionConfig>(),

account-kit/rn-signer/src/index.ts

@@ -0,0 +1 @@
+export { RNAlchemySigner } from "./signer.js";

account-kit/rn-signer/src/signer.ts

@@ -1,10 +1,9 @@
-import { z } from "zod";
 import {
   BaseAlchemySigner,
   SessionManagerParamsSchema,
 } from "@account-kit/signer";
-// eslint-disable-next-line import/extensions
-import { RNSignerClient, RNSignerClientParamsSchema } from "./client";
+import { z } from "zod";
+import { RNSignerClient, RNSignerClientParamsSchema } from "./client.js";
 
 const RNAlchemySignerParamsSchema = z
   .object({
@@ -51,6 +50,27 @@ class RNAlchemySignerSingleton extends BaseAlchemySigner<RNSignerClient> {
   }
 }
 
+/**
+ * Factory function to create or retrieve a singleton instance of RNAlchemySigner.
+ *
+ * @example
+ * ```ts twoslash
+ * import { RNAlchemySigner } from "@account-kit/react-native";
+ *
+ * const signer = RNAlchemySigner({
+ *  client: {
+ *    apiKey: "YOUR_API_KEY"
+ *  },
+ *  // optional config to override default session manager configs
+ *  sessionConfig: {
+ *    expirationTimeMs: 1000 * 60 * 60 // 60 minutes
+ *  }
+ * });
+ * ```
+ *
+ * @param {RNAlchemySignerParams} params The parameters required to configure the RNAlchemySigner instance.
+ * @returns {RNAlchemySignerSingleton} The singleton instance of RNAlchemySigner configured with the provided parameters.
+ */
 export function RNAlchemySigner(params: RNAlchemySignerParams) {
   const instance = RNAlchemySignerSingleton.getInstance(params);
 

site/pages/index.mdx

@@ -11,6 +11,7 @@ import { DotsIcon } from "../components/icons/DotsIcon";
 import { InfraIcon } from "../components/icons/InfraIcon";
 import { SmartContractIcon } from "../components/icons/SmartContractIcon";
 import { SignerIcon } from "../components/icons/SignerIcon";
+import { ReactNativeIcon } from "../components/icons/ReactNativeIcon";
 
 # Get started with Account Kit
 
@@ -49,6 +50,12 @@ Account Kit is also published as a set of lower level packages that can be used
 utlimate control over your application.
 
 <div className="grid grid-cols-2 gap-8">
+  <SmallTileRow
+    icon={<ReactNativeIcon height={20} width={20} />}
+    title="React Native"
+    description="Mobile apps with React Native"
+    href="/react-native/overview"
+  />
   <SmallTileRow
     icon={<DotsIcon />}
     title="Other JS Frameworks"

site/pages/react-native/overview.mdx

@@ -1,17 +1,15 @@
-import { ExpoIcon } from "../../components/icons/ExpoIcon";
-import { ReactNativeIcon } from "../../components/icons/ReactNativeIcon";
-import { TileButton } from "../../components/TileButton";
-
 ---
-
 title: Using within React Native applications
 description: A guide on integrating Account Kit within a React Native application
-
 ---
 
+import { ExpoIcon } from "../../components/icons/ExpoIcon";
+import { ReactNativeIcon } from "../../components/icons/ReactNativeIcon";
+import { TileButton } from "../../components/TileButton";
+
 # Using within React Native applications
 
-We've built a simple example using expo [here](https://github.com/alchemyplatform/aa-sdk-rn-expo/tree/main). This guide assumes you're using Expo, but the same principles should apply to a bare React Native app as well.
+We've built a simple example using expo [here](https://github.com/alchemyplatform/aa-sdk/tree/main/examples/react-native-expo-example). This guide assumes you're using Expo, but the same principles should apply to a bare React Native app as well.
 
 :::warning
 The Alchemy Signer is currently in Alpha and only supported on Android devices. To get started using the Alchemy Signer in your React Native app, refer to the [React Native Signer](/react-native/signer/overview) documentation. For 3rd party signer support in React Native, refer to your signer provider's documentation.

site/pages/react-native/signer/authenticating-users/authenticating-with-magic-link.mdx

@@ -17,12 +17,8 @@ For example code on how to use the Signer in your project, please checkout our e
 
 ## Create a Signer Instance
 
-```tsx
-import { RNAlchemySigner } from "@account-kit/react-native-signer";
-
-const signer = RNAlchemySigner({
-  client: { connection: { apiKey: API_KEY } },
-});
+```ts twoslash
+// [!include ~/shared/react-native/signer.ts]
 ```
 
 ## Authenticate a User
@@ -33,7 +29,9 @@ Next, you'll need to authenticate your user before you can use the Signer as an
 
 To send an email magic link to a user, you can use the `signer.authenticate()` method.
 
-```tsx
+:::code-group
+
+```ts twoslash [example.ts]
 signer
   .authenticate({
     email: "[email protected]",
@@ -45,6 +43,12 @@ signer
   });
 ```
 
+```ts twoslash [signer.ts] filename="signer.ts"
+// [!include ~/shared/react-native/signer.ts]
+```
+
+:::
+
 ### Authenticate User via Deep Link
 
 When a user clicks on the magic link in their email, it should deep link to your app if this has been setup correctly.

site/pages/react-native/signer/authenticating-users/authenticating-with-otp.mdx

@@ -17,12 +17,8 @@ For example code on how to use the Signer in your project, please checkout our e
 
 ## Create a Signer Instance
 
-```tsx
-import { RNAlchemySigner } from "@account-kit/react-native-signer";
-
-const signer = RNAlchemySigner({
-  client: { connection: { apiKey: API_KEY } },
-});
+```ts twoslash
+// [!include ~/shared/react-native/signer.ts]
 ```
 
 ## Authenticate a User
@@ -33,7 +29,9 @@ Next, you'll need to authenticate your user before you can use the Signer as an
 
 To send an OTP to a user's email, use the `signer.authenticate()` method with the `emailMode` set to `otp`.
 
-```tsx
+:::code-group
+
+```ts twoslash [example.ts]
 signer
   .authenticate({
     email: "[email protected]",
@@ -45,6 +43,12 @@ signer
   });
 ```
 
+```ts twoslash [signer.ts] filename="signer.ts"
+// [!include ~/shared/react-native/signer.ts]
+```
+
+:::
+
 ### Prompt the User to enter the One-Time Password to complete authentication
 
 The user will receive an email with a one-time password (OTP) to enter into your app.

site/pages/react-native/signer/setup-guide.mdx

@@ -4,19 +4,19 @@ description: Setup the React Native Signer Package in your React Native Project
 ---
 
 :::warning
-**CAUTION:** The Alchemy Signer is currently in Alpha and only supported on Android devices.
+**CAUTION:** The Alchemy Signer is currently in Alpha.
 :::
 
 For more information on what a Signer is, refer to the [concepts](/concepts/smart-account-signer) page.
 
-# Setting up your project to use the React Native Signer
-
-Setting up the React Native Signer is similar to setting up the [React Signer](/signer/quickstart) with a few extra steps.
+# React Native Signer setup guide
 
 :::info
-Only the Email Auth method is supported for the React Native Signer at this time.
+The React Native Signer package is only supported on React Native's new architecture, and requires your project to be on React Native version 0.76 or newer.
 :::
 
+Setting up the React Native Signer is similar to setting up the [React Signer](/signer/quickstart) with a few extra steps.
+
 1.  Get your **API key** by creating a new app in your [Alchemy Dashboard](https://dashboard.alchemy.com/apps)
     :::warning
     Make sure **Ethereum** is enabled for your app under the Networks tab

site/scripts/prebuild.ts

@@ -11,6 +11,7 @@ const referencePackages = [
   "@account-kit/react",
   "@account-kit/signer",
   "@account-kit/smart-contracts",
+  "@account-kit/react-native",
   "@aa-sdk/core",
   "@aa-sdk/ethers",
 ];

site/shared/react-native/signer.ts

@@ -0,0 +1,10 @@
+import { RNAlchemySigner } from "@account-kit/react-native-signer";
+
+export const signer = RNAlchemySigner({
+  client: { connection: { apiKey: "API_KEY" } },
+  // optional param to override session settings
+  sessionConfig: {
+    // sets the expiration to 60 minutes
+    expirationTimeMs: 1000 * 60 * 60,
+  },
+});