(E2 Solution): Migrate dApp to dApp Kit React with SDK v2

[alilloig]

Summary

• Migrates E2 dApp solution from Sui SDK v1 (@mysten/dapp-kit + JSON-RPC) to SDK v2 (@mysten/dapp-kit-react + gRPC)
• Replaces the old three-provider setup (QueryClientProvider + SuiClientProvider + WalletProvider) with a single DAppKitProvider powered by createDAppKit() factory
• Replaces SuiClient (JSON-RPC) with SuiGrpcClient (gRPC/protobuf) for node communication
• Retains @tanstack/react-query for data fetching — useQuery wraps the gRPC client, and invalidateQueries handles real-time UI refresh after mutations (consistent with create-dapp boilerplate)
• Replaces removed hooks: useSuiClientQuery → useQuery + useCurrentClient(), useSignAndExecuteTransaction → useDAppKit().signAndExecuteTransaction()
• Adds TypeScript module augmentation (declare module "@mysten/dapp-kit-react") for type-safe hook returns
• Replaces @mysten/dapp-kit/dist/index.css with Tailwind CSS v4 for styling
• Rewrites E2/README.md as a step-by-step educational guide covering the new dApp Kit API
• Updates .gitignore to exclude build artifacts and .pnpm directory

Key migration patterns demonstrated

Before (SDK v1)	After (SDK v2)
@mysten/dapp-kit	@mysten/dapp-kit-react
SuiClient from @mysten/sui/client	SuiGrpcClient from @mysten/sui/grpc
createNetworkConfig()	createDAppKit() with declare module augmentation
SuiClientProvider + WalletProvider + QueryClientProvider	QueryClientProvider + DAppKitProvider
useSuiClientQuery("getOwnedObjects", ...)	useQuery() + useCurrentClient().listOwnedObjects()
useSignAndExecuteTransaction() hook	useDAppKit().signAndExecuteTransaction()
getFullnodeUrl("testnet")	Explicit gRPC URLs with baseUrl: param
@mysten/dapp-kit/dist/index.css	Tailwind CSS v4
Automatic query invalidation via dapp-kit hooks	Manual queryClient.invalidateQueries() with predicate matching

Data fetching approach

Since @mysten/dapp-kit-react v1.x does not export useSuiClientQuery, TanStack Query is added as a standalone dependency. Each data-fetching component uses useQuery with semantic query keys ([network, "getOwnedObjects", address]), and mutations trigger invalidateQueries with a predicate matcher — keeping the same caching and auto-refresh pattern used in create-dapp.

Test plan

• pnpm install succeeds in E2/my-first-sui-dapp/
• pnpm run build compiles without errors
• No deprecated SDK v1 patterns remain (verified via sui-2-migration-audit skill — 19 PASS, 0 FAIL, 13 N/A)
• App loads, wallet connects, minting works, object list auto-refreshes after mint via invalidateQueries

🤖 Generated with Claude Code

[domenicodev]

Note:
To be closed and recreated starting from:
#104

Pointing to solution folder

[alilloig]

okay all good, I updated this for using tailwind and not the old css components, ready to review and merge

[domenicodev]

Not a bad idea to showcase different refreshing logics, but for this module it wouldn't be needed and would add complexity, as we'll also explain it the "tanstack way" and "invalidateQueries" way (also included in quizzes).

We might consider alternatives in the future but not for the moment, so please take a look at the comments carefully to switch back to the default way

[alilloig]

I'm rather confused with the tanstack query thing https://sdk.mystenlabs.com/sui/migrations/sui-2.0/dapp-kit#removing-tanstack-query

[domenicodev]

It says "if you were using it only for dapp-kit and nothing else, you can remove"
If you were only using @tanstack/react-query for dApp Kit and don't need it for other parts of your application, you can now remove it
Meaning the dappKit logic was tied to tanstack (e.g. useSuiClientQuery used tanstack under the hood).

But still they're using it in the boilerplate from create-dapp, possibly for helping migrating quickly, so if you remove it you still have to edit "OwnedObjects.tsx" anyway, and remove useQuery logic;
So in the end the new dapp-kit is not tied anymore to tanstack, it's just there for simplicity/migration/best practice.

The alternative would be doing something like you(or claude?) did, with ad-hoc refreshing, but still tanstack is the good way to go, and included in the main boilerplate

[alilloig]

@domenicodev it was team work actually, claude didn't touch the tanstack query part but since I didn't really understand how it worked and saw the migration bit about this, I insisted claude on getting rid of tanstack for good :/