add changeset and documentation

.changeset/tiny-apes-give.md

@@ -0,0 +1,5 @@
+---
+"@starknet-react/core": patch
+---
+
+Fix wallet connection when wallet not authorized

.changeset/tough-timers-rescue.md

@@ -0,0 +1,5 @@
+---
+"@starknet-react/core": patch
+---
+
+Add hook to detect injected connectors

website/app/docs/layout.tsx

@@ -17,4 +17,3 @@ export default function DocLayout({ children }: { children: React.ReactNode }) {
   );
 }
 
-

website/app/hooks/[[...slug]]/page.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+
+import { notFound, redirect } from "next/navigation";
+
+import { allHooks } from "@/.contentlayer/generated";
+import { Mdx } from "@/components/mdx";
+import { DocContainer } from "@/components/container";
+
+type DocPageProps = {
+  params: {
+    slug: string[];
+  };
+};
+
+async function getDocFromParams({ params }: DocPageProps) {
+  const slug = params.slug?.join("/") || "";
+
+  if (slug === "") {
+    const redirectTo = allHooks[0]?.slugAsParams;
+    return { doc: null, redirectTo };
+  }
+
+  const doc = allHooks.find((doc) => doc.slugAsParams === slug);
+
+  if (!doc) {
+    return { doc: null, redirectTo: null };
+  }
+
+  return { doc, redirectTo: null };
+}
+
+export async function generateStaticParams(): Promise<
+  DocPageProps["params"][]
+> {
+  return allHooks.map((doc) => ({
+    slug: doc.slugAsParams.split("/"),
+  }));
+}
+
+export default async function DocPage({ params }: DocPageProps) {
+  const { doc, redirectTo } = await getDocFromParams({ params });
+
+  if (!doc) {
+    if (redirectTo) {
+      redirect(`/hooks/${redirectTo}`);
+    } else {
+      notFound();
+    }
+  }
+
+  return (
+    <DocContainer title={doc.title} section="Hooks">
+      <Mdx code={doc.body.code} />
+    </DocContainer>
+  );
+}
+
+

website/app/hooks/layout.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+import { Sidebar } from "@/components/sidebar";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { docsSidebar } from "@/lib/sidebar";
+
+export default function HookLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
+      <aside className="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
+        <ScrollArea className="h-full py-6 pl-8 pr-6 lg:py-8">
+          <Sidebar items={docsSidebar} />
+        </ScrollArea>
+      </aside>
+      {children}
+    </div >
+  );
+}
+

website/components/starknet/provider.tsx

@@ -7,8 +7,8 @@ import {
   publicProvider,
   argent,
   braavos,
+  useInjectedConnectors,
 } from "@starknet-react/core";
-import { useInjectedConnectors } from "@/../packages/core/dist";
 
 export function StarknetProvider({ children }: { children: React.ReactNode }) {
   const chains = [goerli, mainnet];

website/content/docs/getting-started.mdx

@@ -52,6 +52,9 @@ following:
  - _connectors_: the wallet connectors supported by your dapp. See
  the [wallets](/docs/wallets) page for more information.
 
+Starknet React provides the `useInjectedConnectors` hook to merge a static list
+of recommended connectors with a dynamic list of injected connectors.
+
 ```tsx components/starknet-provider.tsx
 "use client";
 import React from "react";
@@ -62,12 +65,23 @@ import {
   publicProvider,
   argent,
   braavos,
+  useInjectedConnectors,
 } from "@starknet-react/core";
 
 export function StarknetProvider({ children }: { children: React.ReactNode }) {
   const chains = [goerli];
   const providers = [publicProvider()];
-  const connectors = [braavos(), argent()];
+  const { connectors } = useInjectedConnectors({
+    // Show these connectors if the user has no connector installed.
+    recommended: [
+      argent(),
+      braavos(),
+    ],
+    // Hide recommended connectors if the user has any connector installed.
+    includeRecommended: "onlyIfNoConnectors",
+    // Randomize the order of the connectors.
+    order: "random"
+  });
 
   return (
     <StarknetConfig

website/content/docs/wallets.mdx

@@ -18,12 +18,18 @@ type of wallets are also known as _"browser wallets"_.
 
 Configure a new injected wallet with the following properties:
 
- - `id`: unique wallet id, used when injecting the wallet in the web page.
- - `name`: human friendly name.
- - `icon`: wallet icons, for both light and dark mode. Icons should be base 64
+ - `id` (required): unique wallet id, used when injecting the wallet in the web page.
+ - `name` (optional): human friendly name.
+ - `icon` (optional): wallet icons, for both light and dark mode. Icons should be base 64
    encoded svg images that developers can use as `src` properties on an `img`
    HTML tag.
 
+### `useInjectedConnectors`
+
+Starknet React provides the `useInjectedConnectors` hook to discover injected
+wallets automatically. You can read more about this hook [in the
+documentation](/hooks/useInjectedConnectors).
+
 ### Argent X
 
 The Argent X wallet is supported out of the box.

website/content/hooks/useInjectedConnectors.mdx

@@ -0,0 +1,65 @@
+---
+title: useInjectedConnectors
+priority: 100
+---
+
+Hook for discovering injected connectors.
+
+## Usage
+
+```ts
+import {
+  StarknetConfig,
+  publicProvider,
+  argent,
+  braavos,
+  useInjectedConnectors,
+} from "@starknet-react/core";
+
+export default function App({ children }) {
+  const chains = [goerli, mainnet];
+  const providers = [publicProvider()];
+  const { connectors } = useInjectedConnectors({
+    // Show these connectors if the user has no connector installed.
+    recommended: [
+      argent(),
+      braavos(),
+    ],
+    // Hide recommended connectors if the user has any connector installed.
+    includeRecommended: "onlyIfNoConnectors",
+    // Randomize the order of the connectors.
+    order: "random"
+  });
+
+  return (
+    <StarknetConfig
+      chains={chains}
+      providers={providers}
+      connectors={connectors}
+    >
+      {children}
+    </StarknetConfig>
+  );
+}
+```
+
+## Options
+
+ * `recommended?: Connector[]`
+   - List of recommended connectors.
+
+ * `includeRecommended?: "always" | "onlyIfNoConnectors"`
+   - If `"always"`, the hook always returns the recommended connectors.
+   - If `"onlyIfNoConnectors"`, the recommended connectors are included only if
+     no other connector is installed.
+
+ * `order?: "random" | "alphabetical"`
+   - Control the order in which connectors are returned.
+   - If `"random"`, connectors are shuffled.
+   - If `"alphabetical"`, connectors are alphabetically sorted by their id.
+
+## Returns
+
+ * `connectors: Connector[]`
+   - Contains the list of injected connectors installed by the user.
+   - All connectors are unique and sorted.

website/contentlayer.config.ts

@@ -35,6 +35,23 @@ export const Doc = defineDocumentType(() => ({
   },
 }));
 
+export const Hook = defineDocumentType(() => ({
+  name: "Hook",
+  filePathPattern: "hooks/**/*.mdx",
+  contentType: "mdx",
+  computedFields,
+  fields: {
+    title: {
+      required: true,
+      type: "string",
+    },
+    priority: {
+      required: true,
+      type: "number",
+    },
+  },
+}));
+
 export const Demo = defineDocumentType(() => ({
   name: "Demo",
   filePathPattern: "demos/**/*.mdx",
@@ -54,7 +71,7 @@ export const Demo = defineDocumentType(() => ({
 
 export default makeSource({
   contentDirPath: "content",
-  documentTypes: [Doc, Demo],
+  documentTypes: [Doc, Hook, Demo],
   mdx: {
     remarkPlugins: [
       [

website/lib/sidebar.ts

@@ -1,8 +1,9 @@
-import { allDemos, allDocs } from "@/.contentlayer/generated";
+import { allDemos, allDocs, allHooks } from "@/.contentlayer/generated";
 
 import type { NavItemWithChildren } from "@/components/sidebar";
 
 const sortedDemos = allDemos.sort((a, b) => b.priority - a.priority);
+const sortedHooks = allHooks.sort((a, b) => b.priority - a.priority);
 
 export const demoSidebar: NavItemWithChildren[] = [
   {
@@ -26,4 +27,12 @@ export const docsSidebar: NavItemWithChildren[] = [
       items: [],
     })),
   },
+  {
+    title: "Hooks",
+    items: sortedHooks.map(({ title, slugAsParams }) => ({
+      title,
+      href: `/hooks/${slugAsParams}`,
+      items: [],
+    })),
+  }
 ];

website/styles/globals.css

@@ -90,3 +90,7 @@
   @apply leading-6 font-mono;
   font-size: 15px;
 }
+
+.mdx :where(ul ul, ul ol, ol ul, ol ol) {
+  margin-top: 0;
+}