docs: updat frontend guide to show new libraries

[GuiBibeau]

Updates frontend docs to use the newer @solana/react-hooks package.

Part of a bigger revamp of frontend documentation.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
solana-com	Ready	Preview	Comment	Dec 4, 2025 1:42pm

2 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
solana-com-media	Skipped			Dec 4, 2025 1:42pm
templates	Skipped			Dec 4, 2025 1:42pm

[ZYJLiu]

need a step before running app to update layout.tsx to use the provider

[ZYJLiu]

getting BigInt literals are not available when targeting lower than ES2020. lint when creating app from npx create-next-app@latest

[GuiBibeau]

as an error or warning? I'm surprise they still show up that warning es2020 is 6 years ago soon

[ZYJLiu]

[ZYJLiu]

General question, do you want to include all these in as a "Frontend" subsection or have a dedicated secondary nav section for all these packages? These pages are pretty light right now, but not sure if you're going to need more pages to fully document the packages in the future.

You can also add the new packages on these pages:

• https://solana.com/docs#official-sdks
• https://solana.com/docs/clients/official/javascript

[GuiBibeau]

@ZYJLiu Thanks for the review, most was addressed.
In regard to this adding it with it's own page, I want to see it in a few more places before having a full on page on the top nav.

I implement it in templates and once there's good traction in downloads and more feedback i would do a follow up PR. I also want to replace all tutorials that use front-end to use this.

I want to dog food gradually to also fix issues as we find them

[ZYJLiu]

Using latest version of Kit (5.1.0) currently throws this error, but changing to 4.0 or lower fixes

[ZYJLiu]

Looks like this section is still missing a step to update layout.tsx to use Providers from provider.tsx

Also, if I just add Providers to the default layout.tsx from nextjs template, I'm getting dark mode. The connect wallet and transfer components work as expected.

[resourcefulmind]

Thanks for the update. This is a solid direction and clearly part of a broader frontend docs revamp.

I did a DX-focused pass (docs/content + light technical validation) and left structured notes below, mainly around clarity, audience targeting, and making examples more immediately usable for first-time builders.

[resourcefulmind]

DX Review Notes — client.mdx

---

Section: Introduction / Top of page

My Observation

• No clear target audience. The callout suggests React developers should skip this page, but it does not state who should use it (CLI tools, scripts, server-side apps, non-React UIs, etc.).

DX Impact

• Developers may not know whether this page applies to them, leading to confusion or choosing the wrong approach.

Recommendation

• Add a short “Who is this for?” section at the top, e.g.:

  Use @solana/client when building CLI tools, Node.js scripts, server-side applications, or non-React UIs.
  If you're building a React app, start with @solana/react-hooks instead.

---

Section: Install

My Observation

• Installation command uses npm install @solana/client without a version, while other guides use @latest or pinned versions.

DX Impact

• Inconsistent with other docs. Developers may install outdated versions or encounter version mismatches.

My Recommendation

• Update to:

  npm install @solana/client@latest 

  or pin a version (e.g. @solana/client@1.1.0) with a note about staying current.

[resourcefulmind]

Section: Install

My Observation

• No prerequisites section. Missing Node.js version, TypeScript expectations, or Wallet Standard familiarity.

DX Impact

• First-time builders may hit runtime errors or lack required background knowledge.

My Recommendation

• • Node.js version

  • TypeScript basics

  • Wallet Standard familiarity (with link)

[resourcefulmind]

Section: Create a client once

My Observation

• Code uses "Fke...address" as a string placeholder, but the API likely expects a typed address or PublicKey.

• Mentions “Wallet Standard” without explanation.

DX Impact

• Developers may pass incorrect types, causing runtime errors.

• Unexplained jargon adds friction.

My Recommendation

• Use a proper address type, for example:

address("Fke...") or new PublicKey("...").

• Add a brief explanation or link for Wallet Standard (e.g., "Wallet Standard connectors (see Wallet Standard spec)").

[resourcefulmind]

Section: Create a client once

My Observation

• autoDiscover() is described as “the fastest way to start” without explaining what it discovers.

DX Impact

• Developers don’t understand what auto-discovery does or when to prefer manual setup.

My Recommendation

• autoDiscover() detects and registers Wallet Standard–compatible wallets installed in the environment.

[resourcefulmind]

Section: Wallet orchestration

My Observation

• Mentions phantom(), solflare(), backpack() helpers, and createWalletStandardConnector without examples or links.

DX Impact

• Developers won’t know how to use or customize these connectors.

My Recommendation

• • phantom()

  • solflare()

  • backpack()

  • createWalletStandardConnector

[resourcefulmind]

Section: Actions, watchers, and helpers

My Observation

• Uses { address: "Fke...address" } as a string.

• Mentions “abort handles” without explanation.

DX Impact

• Likely runtime/type errors.

• Unclear lifecycle management.

My Recommendation

• Use a typed address helper.

• Calling abort() stops the watcher and cleans up the subscription.

[resourcefulmind]

Section: Transaction helper pattern

My Observation

• References instructionA and instructionB without showing how to create them.

• Uses non-null assertion wallet.session! without explaining when it may be null.

DX Impact

• Code will not run as-is.

• Developers may misuse wallet session state.

My Recommendation

• Show how to create instructions (via @solana/kit or @solana/web3.js).

• Replace non-null assertion with explicit checks:
  if (!session) throw new Error("Wallet not connected");

[resourcefulmind]

Section: Transaction helper pattern

My Observation

• Mentions prepareAndSend, sign, and toWire without examples or links.

DX Impact

• Developers don’t know when or how to use these methods.

My Recommendation

• Add examples for prepareAndSend.

• Briefly explain when sign / toWire are appropriate (manual signing, offline flows).

[resourcefulmind]

Section: Common patterns for Solana devs

My Observation

• Mentions “Zustand store” and “wire format” without explanation.

DX Impact

• Unnecessary jargon increases cognitive load.

My Recommendation

• • Zustand: state management library (link to docs)

  • Wire format: binary transaction format sent to the network

[resourcefulmind]

I reviewed this file from a DX / first-time builder perspective. Overall direction is strong. Left structured notes per page highlighting clarity gaps, consistency issues, and small correctness risks that could trip up new developers. Addressing them would significantly improve onboarding quality.

[resourcefulmind]

DX Review Notes: react-hooks.mdx

Section	My Observation	DX Impact	My Recommendation
Introduction	No prerequisites section. Missing React version, Next.js version, TypeScript knowledge, or Node.js version requirements.	Developers may start without required versions or knowledge, leading to runtime errors or confusion.	Add a Prerequisites section listing: React 18+, TypeScript basics, Node.js 20+, and familiarity with React hooks.
Install	Installation command uses npm install @solana/client @solana/react-hooks without version specification, while nextjs-solana.mdx uses @latest or pinned versions.	Inconsistent with other documentation. Developers may install outdated versions or encounter version mismatch issues.	Update to npm install @solana/client@latest @solana/react-hooks@latest, or pin versions with a note explaining when to use @latest.
Wrap your tree once	Code example creates a client with createClient() and passes it to SolanaProvider, but nextjs-solana.mdx shows a simpler SolanaProvider config-based pattern.	Two setup patterns without explanation can confuse developers and make it unclear which approach to follow.	Either align this page with the config-based pattern or explicitly document both approaches with guidance on when to use each.
Wrap your tree once	Code example includes "use client" but doesn’t explain where this file should live or why it’s required.	Next.js App Router users may not understand placement or the server/client component boundary.	Add context: “Place this in app/providers.tsx or your root layout. The "use client" directive is required because SolanaProvider uses hooks.”
Hooks mirror the client runtime	Hooks are listed but their responsibilities and differences are not explained.	Developers may misuse hooks or choose the wrong abstraction.	Add brief descriptions (e.g., useWallet: wallet state only; useWalletConnection: wallet state + connect/disconnect helpers).
Hooks mirror the client runtime	Example uses useWalletConnection() and useBalance() without showing imports; useBalance isn’t listed above.	Missing imports cause compile errors and reduce trust in examples.	Add explicit imports and ensure useBalance appears in the hook list.
Hooks mirror the client runtime	Uses wallet?.account.address without explaining wallet object shape or nullability.	Developers may not understand when wallet is undefined or how to safely access fields.	Add a short note explaining wallet shape and when it may be null, or link to type definitions.
Query + caching patterns	Introduces SolanaQueryProvider and “React Query-compatible” behavior without explanation.	Developers unfamiliar with React Query won’t understand the benefits or usage.	Add a short explanation of caching, refetching, and how this differs from basic hooks.
Query + caching patterns	Uses useProgramAccounts(program) without explaining the expected program format.	Developers may pass incorrect values and encounter runtime errors.	Clarify that program should be a PublicKey string or Address type.
Transaction flows	Example sends lamports to destination from props without validation; uses void which may hide errors.	Risky copy-paste behavior and harder debugging for beginners.	Add address validation and show proper async/await error handling.
Transaction flows	Mentions useSendTransaction for raw instructions without an example or instruction creation context.	Developers won’t know how to use the hook or construct instructions.	Add an example using useSendTransaction, or link to an instruction-building guide.
Common patterns	Mentions “Server components aware” and "use client" without explaining App Router context.	Non–Next.js users may be confused; Next.js users may misunderstand server/client boundaries.	Add a short explanation of server vs client components in the App Router.
Overall structure	No complete end-to-end example; all snippets are partial.	Developers can’t validate that their setup works holistically.	Add a Quick Start with a minimal working flow or link prominently to nextjs-solana.mdx.
Overall structure	No success-state or “what you should see” section.	Developers can’t confirm correctness or debug effectively.	Add a success-state section describing expected UI/output after setup.

[resourcefulmind]

Review: nextjs-solana.mdx

Section	Issue	Impact	Suggestion
Prerequisites	Only lists Node 20+ and npm. Missing: wallet requirement (Phantom/Solflare/Backpack), devnet SOL, and basic React/Next.js knowledge.	Someone might start without a wallet installed or devnet SOL, then get stuck at the transfer step.	Add: "A Wallet Standard wallet (Phantom, Solflare, or Backpack) with devnet SOL. Get test SOL from faucet.solana.com."
Install step	Installs @solana/kit but doesn't explain why it's needed.	People might wonder if it's optional or what it does.	Add a quick note: "@solana/kit provides the address() helper we'll use for address validation."
Install step	Version pinning shows 1.1.0 for both packages, but npm currently has 1.2.0 and 1.1.5.	Outdated versions might confuse people or cause issues.	Either update the pinned versions or remove them if @latest is the recommendation.
Step 1	Says "simplified SolanaProvider props" but doesn't explain what makes it simplified or compared to what.	Unclear what "simplified" means.	Either remove "simplified" or add a quick note about what it's simplified compared to.
Step 1 - CRITICAL	Creates the Providers component but never shows how to actually use it. No layout.tsx file is shown that wraps the app with <Providers>.	The tutorial won't work. Without wrapping the app, all the hooks will fail.	Need to add a step (maybe 1.5) showing app/layout.tsx that imports and wraps children with <Providers>. This is a blocker.
Step 2	Uses wallet.session.account.address but doesn't explain the wallet object structure.	People might not understand why it's session.account vs just account.	Add a quick comment or link to the wallet object type docs.
Step 2	autoConnect: true option is used but never explained.	People don't know what it does.	Add a quick comment: "autoConnect: true remembers the wallet for future visits."
Step 2	Uses CSS classes like card, btn, btn-secondary, input that aren't defined anywhere in the tutorial.	When people copy-paste, the styling will be broken.	Either provide a globals.css snippet with these classes, or add a note that these come from the starter template, or switch to inline Tailwind classes.
Step 3	Uses send({ destination, amount: lamports }) with amount property.	This looks correct, but worth double-checking the API.	Verify this matches the actual useSolTransfer API.
Step 4	Says "(no Suspense needed)" but doesn't explain why or when you would need it.	The comment doesn't help people understand.	Either remove it or explain: "Suspense is only needed when using SolanaQueryProvider for data fetching."
Step 5	Says "connect a Devnet wallet" but doesn't explain how to switch your wallet to devnet or get devnet SOL.	First-time users might have mainnet selected and wonder why things fail.	Add: "Make sure your wallet is set to Devnet. Get test SOL from faucet.solana.com."
Overall	No troubleshooting section.	If something breaks, people have no guidance.	Add a quick troubleshooting section for common issues (wallet not installed, wrong network, RPC errors, etc.).

Critical Issue

Step 1 is missing the layout.tsx integration. The Providers component is created but never actually used. Without wrapping the app in <Providers>, none of the hooks will work. This needs to be fixed before the tutorial can work.

Cross-file Note

There's an API inconsistency between this file and react-hooks.mdx:

• This file uses SolanaProvider with a config prop
• react-hooks.mdx uses createClient() and passes client={client}

Both might be valid, but it's confusing. Consider documenting both patterns or aligning them.

[resourcefulmind]

Review: web3-compat.mdx

Section	What I noticed	Why it matters	Suggestion
Intro	The term "Kit" is used throughout (lines 6, 8, 17, etc.) but never explained.	Someone new to the ecosystem won't know what "Kit runtime" or "Kit primitives" means.	Add a quick clarification like "...the newer Kit runtime (@solana/kit packages)..." or link to an overview.
Install	Three packages are installed but there's no explanation why all three are needed.	People might wonder if they really need all of them.	A one-liner would help: "@solana/kit and @solana/client are peer dependencies that power the compat layer."
Install	No version specifiers (unlike nextjs-solana.mdx which uses @latest).	Minor inconsistency across the docs.	Could add @latest for consistency, or note current versions.
Bridge helpers (lines 49-60)	The code uses new PublicKey(...) on line 57, but PublicKey isn't in the import statement above it.	This code won't compile if someone copies it.	Add PublicKey to the import list.
"Phase 0" (line 76)	It says "What ships in Phase 0" but doesn't explain what that means or what's coming later.	Leaves people wondering about the roadmap.	Either explain briefly ("Phase 0 covers core functionality") or link to a roadmap if one exists.
Callout (lines 84-88)	Says to "keep the old dependency around" but doesn't say how.	People might not realize they should have both packages installed during migration.	Add something like: "Keep @solana/web3.js in your dependencies alongside @solana/web3-compat until all the methods you need are covered."
Prerequisites	None listed.	People don't know this assumes an existing @solana/web3.js project.	A short note at the top would help: "This guide assumes you have an existing project using @solana/web3.js."
Success state	No way to verify the migration worked.	People finish and wonder "did it work?"	Could add: "After swapping imports, your existing tests should still pass."

---

The import bug

Line 57 uses new PublicKey(...) but it's not imported. Here's the fix:

Current (won't compile):
import {
toAddress,
toPublicKey,
toWeb3Instruction,
toKitSigner,
} from "@solana/web3-compat";

const legacyKey = new PublicKey("..."); // PublicKey not importedFixed:
import {
PublicKey, // add this
toAddress,
toPublicKey,
toWeb3Instruction,
toKitSigner,
} from "@solana/web3-compat";

const legacyKey = new PublicKey("...");

Quick notes

• The package (@solana/web3-compat) is at v0.0.13, published very recently. Pretty early. It might be worth mentioning stability expectations in the Callout.

[resourcefulmind]

Review: clients/official/javascript.mdx

This is a reference page listing the JS/TS SDKs. Quick review focused on links and accuracy.

Line	What I noticed	Why it matters	Suggestion
43	Links to /docs/frontend/kit but that file was removed in this PR.	This link will break.	Change to /docs/frontend/nextjs-solana or remove it.
45-54	The Web3.js section doesn't mention @solana/web3-compat as the migration path.	Someone reading this won't know how to migrate.	Add a note pointing to the web3-compat guide.
47	Says web3.js is "legacy" but the frontend index page says "deprecated".	Different words, different meanings. Should be consistent.	Pick one term and use it everywhere.
29-43	The Kit section doesn't explain how Kit relates to the other packages.	People might not realize Kit powers client and react-hooks.	A short note would help clarify the relationship.
—	The Next.js tutorial (nextjs-solana.mdx) isn't linked here.	People won't find the hands-on tutorial from this page.	Could add it under the React Hooks section.

---

Broken link on line 43

The link /docs/frontend/kit points to a file that was removed in this PR. Needs to be updated or removed before merge.

Current:

• Example: Connect a wallet with Next.js

Suggested fix:

• Tutorial: Next.js + React Hooks

Links I checked

• /docs/frontend/client — exists
• /docs/frontend/react-hooks — exists
• /docs/frontend/kit — removed in this PR (broken)
• /developers/cookbook/wallets/connect-wallet-react — exists