feat(nft-meta-data-pointer): migrate frontend to @solana/kit (#673)

* feat(nft-meta-data-pointer): migrate frontend to @solana/kit

Follow-up to #657, where dev-jodee asked for web3.js to be dropped in favor of
kit. Replaces @anchor-lang/core with a Codama-generated @solana/kit client
(from a real anchor-build-extracted IDL, not the hand-maintained one), and
@solana/wallet-adapter-react with @solana/connector for wallet connection.

@magicblock-labs/gum-react-sdk (the session-key feature) is pinned to
@solana/web3.js and @solana/wallet-adapter-react in its own published API and
predates kit, so full removal isn't possible while keeping that feature. That
stays as a single, documented legacy boundary (utils/legacyBridge.ts,
contexts/SessionProvider.tsx) bridging the one connected wallet into the shape
gum-sdk needs, rather than running two separately-connected wallet instances.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* fix: commit refilled energy back to player state

Greptile caught this on review: the refill-tick loop computed incremented
energy/lastLogin into local variables but never wrote them back to
playerState, so the displayed energy counter stayed stale between real
account-change notifications. The previous BN-based version got away with
mutating playerState.energy in place and relying on the same effects
setTimePassed/setEnergyNextIn calls to force a re-render - that trick got
dropped when the local let variables were introduced. Now commits the
computed values via setPlayerState explicitly, only when something changed.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* fix: clear energy countdown once max energy is reached

Greptile flagged this on review. Pre-existing behavior (the same early
return existed before this migration) surfaced by having Greptile look
closely at code already being touched here: once playerState.energy hits
MAX_ENERGY, the interval returned early without ever calling
setEnergyNextIn(0), so the last computed countdown stayed on screen next
to a full energy bar indefinitely. Splits the guard so the max-energy
case explicitly clears the countdown before returning.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* fix(nft-meta-data-pointer): consolidate RPC config and replace DAS client with kit

Point declare_id! and Anchor.toml at the program actually deployed on devnet,
so a fresh anchor build reproduces the checked-in IDL.

Route the wallet connector and the session-key Connection through the same
RPC_URL the kit client uses, so NEXT_PUBLIC_RPC moves every cluster
connection together instead of leaving two endpoints hardcoded.

Reset playerDataPDA and check the abort signal when the signer changes, so a
click during the async PDA derivation cannot pair a new signer with the
previous wallet's player account.

Replace the axios-based WrappedConnection with a DAS client built on kit's
createJsonRpcApi, following the pattern in solana-foundation/templates
kit/nextjs-das-nfts. The DAS endpoint carries a provider credential, so it now
comes from NEXT_PUBLIC_DAS_RPC with no default and the NFT list reports when
it is unset.

Move the remaining web3.js conversions behind legacyBridge and add a
typecheck script, which needs generate-client to have run.

---------

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
Co-authored-by: amilz <85324096+amilz@users.noreply.github.com>

Author: 3 people

tokens/token-2022/nft-meta-data-pointer/README.md

@@ -34,6 +34,12 @@ yarn install
 yarn dev
 ```
 
+Copy `app/.env.example` to `app/.env.local` first. Listing the NFTs a wallet
+owns goes through the Metaplex Digital Asset Standard API, which is a separate
+service from the base Solana RPC and requires an endpoint from a provider such
+as Helius, Shyft, QuickNode, or Triton. Without `NEXT_PUBLIC_DAS_RPC` set, the
+app runs but the NFT list stays empty.
+
 # Minting the NFT
 
 For the creating of the NFT we perform the following steps:

tokens/token-2022/nft-meta-data-pointer/anchor/Anchor.toml

@@ -7,7 +7,7 @@ resolution = true
 skip-lint = false
 
 [programs.localnet]
-extension_nft = "4nSA2i5bEiBWLLDuZfqTYKwTAwakLEbW2KJXH9cZtDU3"
+extension_nft = "H31ofLpWqeAzF2Pg54HSPQGYifJad843tTJg8vCYVoh3"
 
 [provider]
 cluster = "localnet"

tokens/token-2022/nft-meta-data-pointer/anchor/programs/extension_nft/src/lib.rs

@@ -7,7 +7,7 @@ pub mod instructions;
 pub mod state;
 use instructions::*;
 
-declare_id!("4nSA2i5bEiBWLLDuZfqTYKwTAwakLEbW2KJXH9cZtDU3");
+declare_id!("H31ofLpWqeAzF2Pg54HSPQGYifJad843tTJg8vCYVoh3");
 
 #[program]
 pub mod extension_nft {

tokens/token-2022/nft-meta-data-pointer/app/.env.example

@@ -0,0 +1,12 @@
+# Cluster endpoint used for account reads, transaction sending, the wallet
+# connector, and the session-key Connection.
+NEXT_PUBLIC_RPC=https://rpc.magicblock.app/devnet
+NEXT_PUBLIC_WSS_RPC=wss://rpc.magicblock.app/devnet
+
+# Metaplex Digital Asset Standard endpoint, used to list the NFTs a wallet owns.
+# DAS is a separate service from the base Solana JSON-RPC, so this is not the
+# same URL as NEXT_PUBLIC_RPC. Providers embed auth differently: Helius and
+# Shyft take an API key as a query param, QuickNode and Triton as a path
+# segment. Copy this file to .env.local and fill in your own endpoint - the NFT
+# list stays empty until you do.
+NEXT_PUBLIC_DAS_RPC=

tokens/token-2022/nft-meta-data-pointer/app/.gitignore

@@ -33,3 +33,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# codama-generated kit client
+/generated

tokens/token-2022/nft-meta-data-pointer/app/README.md

@@ -1,5 +1,11 @@
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
+## Solana client stack
+
+The on-chain client is [`@solana/kit`](https://github.com/anza-xyz/kit), generated from `idl/extension_nft.json` via [Codama](https://github.com/codama-idl/codama) (`pnpm generate-client`, wired as a `predev`/`prebuild` step) into a gitignored `generated/` directory — see `scripts/generate-client.ts`. Wallet connection is [`@solana/connector`](https://www.npmjs.com/package/@solana/connector) (wallet-standard, no per-wallet adapter packages).
+
+One legacy pocket remains: the session-key feature (`@magicblock-labs/gum-react-sdk`) is pinned to `@solana/web3.js` and `@solana/wallet-adapter-react` in its own published API and predates kit. Rather than run a second, separately-connected wallet-adapter-react instance alongside the kit-native wallet connection, `contexts/SessionProvider.tsx` and `utils/legacyBridge.ts` bridge the single kit-connected wallet into the `AnchorWallet` shape gum-sdk needs. `@solana/web3.js` and `@solana/wallet-adapter-react` stay in `package.json`, but only for that one boundary — nothing else in the app touches them.
+
 ## Getting Started
 
 First, run the development server:

tokens/token-2022/nft-meta-data-pointer/app/components/ChopTreeButton.tsx

@@ -1,17 +1,20 @@
 import { Button, HStack, VStack } from '@chakra-ui/react';
 import { useSessionWallet } from '@magicblock-labs/gum-react-sdk';
-import { TOKEN_2022_PROGRAM_ID } from '@solana/spl-token';
-import { useConnection, useWallet } from '@solana/wallet-adapter-react';
-import { PublicKey, SystemProgram } from '@solana/web3.js';
+import { useKitTransactionSigner } from '@solana/connector/react';
+import { createNoopSigner, type Address } from '@solana/kit';
 import Image from 'next/image';
 import { useCallback, useState } from 'react';
 import { useGameState } from '@/contexts/GameStateProvider';
 import { useNftState } from '@/contexts/NftProvider';
-import { GAME_DATA_SEED, gameDataPDA, program } from '@/utils/anchor';
+import { getChopTreeInstructionAsync } from '@/generated/instructions';
+import { findNftAuthorityPda } from '@/generated/pdas';
+import { useSendInstruction } from '@/hooks/useSendInstruction';
+import { GAME_DATA_SEED } from '@/utils/anchor';
+import { kitInstructionToLegacyTransaction } from '@/utils/legacyBridge';
 
 const ChopTreeButton = () => {
-    const { publicKey, sendTransaction } = useWallet();
-    const { connection } = useConnection();
+    const { signer } = useKitTransactionSigner();
+    const sendInstruction = useSendInstruction();
     const sessionWallet = useSessionWallet();
     const { gameState, playerDataPDA } = useGameState();
     const [isLoadingSession, setIsLoadingSession] = useState(false);
@@ -27,7 +30,7 @@ const ChopTreeButton = () => {
         }
         setTransactionCounter(transactionCounter + 1);
 
-        const nftAuthority = await PublicKey.findProgramAddress([Buffer.from('nft_authority')], program.programId);
+        const [nftAuthority] = await findNftAuthorityPda();
 
         if (nftState == null) {
             window.alert('Load NFT state first');
@@ -36,11 +39,10 @@ const ChopTreeButton = () => {
         }
 
         let nft = null;
-
         for (let i = 0; i < nftState.items.length; i++) {
             try {
                 const nftData = nftState.items[i];
-                if (nftData.authorities[0] === nftAuthority[0].toBase58()) {
+                if (nftData.authorities[0] === nftAuthority) {
                     nft = nftData;
                 }
                 console.log('NFT data', nftData);
@@ -57,19 +59,17 @@ const ChopTreeButton = () => {
         }
 
         try {
-            const transaction = await program.methods
-                .chopTree(GAME_DATA_SEED, transactionCounter)
-                .accounts({
-                    player: playerDataPDA,
-                    gameData: gameDataPDA,
-                    signer: sessionWallet.publicKey,
-                    sessionToken: sessionWallet.sessionToken,
-                    nftAuthority: nftAuthority[0],
-                    mint: nft.id,
-                    systemProgram: SystemProgram.programId,
-                    tokenProgram: TOKEN_2022_PROGRAM_ID,
-                })
-                .transaction();
+            const instruction = await getChopTreeInstructionAsync({
+                sessionToken: sessionWallet.sessionToken as Address,
+                player: playerDataPDA,
+                signer: createNoopSigner(sessionWallet.publicKey.toBase58() as Address),
+                mint: nft.id as Address,
+                nftAuthority,
+                levelSeed: GAME_DATA_SEED,
+                counter: transactionCounter,
+            });
+
+            const transaction = kitInstructionToLegacyTransaction(instruction);
 
             const txids = await sessionWallet.signAndSendTransaction?.(transaction);
 
@@ -86,10 +86,10 @@ const ChopTreeButton = () => {
     }, [sessionWallet, nftState, playerDataPDA, transactionCounter]);
 
     const onChopMainWalletClick = useCallback(async () => {
-        if (!publicKey || !playerDataPDA) return;
+        if (!signer || !playerDataPDA) return;
 
         setIsLoadingMainWallet(true);
-        const nftAuthority = await PublicKey.findProgramAddress([Buffer.from('nft_authority')], program.programId);
+        const [nftAuthority] = await findNftAuthorityPda();
 
         if (nftState == null) {
             window.alert('Load NFT state first');
@@ -104,9 +104,9 @@ const ChopTreeButton = () => {
                 const nftData = nftState.items[i];
                 const authority = nftData.authorities[0];
                 const authorityAddress = typeof authority === 'string' ? authority : authority.address;
-                console.log(`${authorityAddress} == ${nftAuthority[0].toBase58()}`);
+                console.log(`${authorityAddress} == ${nftAuthority}`);
 
-                if (authorityAddress === nftAuthority[0].toBase58()) {
+                if (authorityAddress === nftAuthority) {
                     nft = nftData;
                 }
                 console.log('NFT data', nftData);
@@ -125,34 +125,28 @@ const ChopTreeButton = () => {
             const nftAuthorityAddress =
                 typeof nft.authorities[0] === 'string' ? nft.authorities[0] : nft.authorities[0].address;
             console.log('NFTid', nft.id, 'NFT authority', nftAuthorityAddress);
-            const transaction = await program.methods
-                .chopTree(GAME_DATA_SEED, transactionCounter)
-                .accounts({
-                    player: playerDataPDA,
-                    gameData: gameDataPDA,
-                    signer: publicKey,
-                    sessionToken: null,
-                    nftAuthority: nftAuthority[0].toBase58(),
-                    mint: nft.id,
-                    systemProgram: SystemProgram.programId,
-                    tokenProgram: TOKEN_2022_PROGRAM_ID,
-                })
-                .transaction();
-
-            const txSig = await sendTransaction(transaction, connection, {
-                skipPreflight: true,
+
+            const instruction = await getChopTreeInstructionAsync({
+                player: playerDataPDA,
+                signer,
+                mint: nft.id as Address,
+                nftAuthority: nftAuthorityAddress as Address,
+                levelSeed: GAME_DATA_SEED,
+                counter: transactionCounter,
             });
+
+            const txSig = await sendInstruction(instruction, signer);
             console.log(`https://explorer.solana.com/tx/${txSig}?cluster=devnet`);
         } catch (error) {
             console.log('error', `Chopping failed! ${error instanceof Error ? error.message : String(error)}`);
         } finally {
             setIsLoadingMainWallet(false);
         }
-    }, [publicKey, playerDataPDA, connection, nftState, transactionCounter, sendTransaction]);
+    }, [signer, playerDataPDA, nftState, transactionCounter, sendInstruction]);
 
     return (
         <>
-            {publicKey && gameState && (
+            {signer && gameState && (
                 <VStack>
                     <Image src="/Beaver.png" alt="Energy Icon" width={64} height={64} />
                     <HStack>

tokens/token-2022/nft-meta-data-pointer/app/components/DisplayGameState.tsx

@@ -1,16 +1,16 @@
 import { HStack, Text, VStack } from '@chakra-ui/react';
-import { useWallet } from '@solana/wallet-adapter-react';
+import { useKitTransactionSigner } from '@solana/connector/react';
 import Image from 'next/image';
 import { useGameState } from '@/contexts/GameStateProvider';
 import { TOTAL_WOOD_AVAILABLE } from '@/utils/anchor';
 
 const DisplayPlayerData = () => {
-    const { publicKey } = useWallet();
+    const { signer } = useKitTransactionSigner();
     const { gameState, nextEnergyIn, totalWoodAvailable } = useGameState();
 
     return (
         <>
-            {gameState && publicKey && (
+            {gameState && signer && (
                 <HStack justifyContent="center" spacing={4}>
                     <HStack>
                         <Image src="/Wood.png" alt="Wood Icon" width={64} height={64} />

tokens/token-2022/nft-meta-data-pointer/app/components/DisplayNfts.tsx

@@ -1,4 +1,4 @@
-import { useWallet } from '@solana/wallet-adapter-react';
+import { useKitTransactionSigner } from '@solana/connector/react';
 import Image from 'next/image';
 import { useState } from 'react';
 import { useNftState } from '@/contexts/NftProvider';
@@ -14,7 +14,7 @@ export class Nft {
 }
 
 const DisplayNfts = () => {
-    const { publicKey } = useWallet();
+    const { signer } = useKitTransactionSigner();
     const { nftState } = useNftState();
     const [showItems, setShowItems] = useState(false);
 
@@ -46,7 +46,7 @@ const DisplayNfts = () => {
 
     return (
         <>
-            {nftState && publicKey && (
+            {nftState && signer && (
                 <div>
                     <button type="button" onClick={handleButtonClick}>
                         Show NFTs

tokens/token-2022/nft-meta-data-pointer/app/components/InitPlayerButton.tsx

@@ -1,48 +1,43 @@
 import { Button } from '@chakra-ui/react';
-import { useConnection, useWallet } from '@solana/wallet-adapter-react';
-import { SystemProgram } from '@solana/web3.js';
+import { useKitTransactionSigner } from '@solana/connector/react';
 import { useCallback, useState } from 'react';
 import { useGameState } from '@/contexts/GameStateProvider';
-import { GAME_DATA_SEED, gameDataPDA, program } from '@/utils/anchor';
+import { getInitPlayerInstructionAsync } from '@/generated/instructions';
+import { useSendInstruction } from '@/hooks/useSendInstruction';
+import { GAME_DATA_SEED } from '@/utils/anchor';
 
 const InitPlayerButton = () => {
-    const { publicKey, sendTransaction } = useWallet();
-    const { connection } = useConnection();
+    const { signer } = useKitTransactionSigner();
+    const sendInstruction = useSendInstruction();
     const [isLoading, setIsLoading] = useState(false);
     const { gameState, playerDataPDA } = useGameState();
 
     // Init player button click handler
     const handleClick = useCallback(async () => {
-        if (!publicKey || !playerDataPDA) return;
+        if (!signer || !playerDataPDA) return;
 
         setIsLoading(true);
 
         try {
-            const transaction = await program.methods
-                .initPlayer(GAME_DATA_SEED)
-                .accounts({
-                    player: playerDataPDA,
-                    gameData: gameDataPDA,
-                    signer: publicKey,
-                    systemProgram: SystemProgram.programId,
-                })
-                .transaction();
-
-            const txSig = await sendTransaction(transaction, connection, {
-                skipPreflight: true,
+            const instruction = await getInitPlayerInstructionAsync({
+                player: playerDataPDA,
+                signer,
+                levelSeed: GAME_DATA_SEED,
             });
 
+            const txSig = await sendInstruction(instruction, signer);
+
             console.log(`https://explorer.solana.com/tx/${txSig}?cluster=devnet`);
         } catch (error) {
             console.log(error);
         } finally {
             setIsLoading(false); // set loading state back to false
         }
-    }, [publicKey, playerDataPDA, connection, sendTransaction]);
+    }, [signer, playerDataPDA, sendInstruction]);
 
     return (
         <>
-            {!gameState && publicKey && (
+            {!gameState && signer && (
                 <Button onClick={handleClick} isLoading={isLoading}>
                     Init Player
                 </Button>