​
Vanilla Client vs React Wrapper

The Sage SDK provides two ways to integrate Sage Protocol functionality into your applications. Both approaches offer identical capabilities—the React wrapper is simply a convenience layer built on top of the vanilla client.

​
Vanilla Client

The vanilla client provides direct access to all Sage Protocol methods. It’s framework-agnostic and suitable for any JavaScript / TypeScript environment.

Setup:

import { SageClient } from '@sageprotocol/sdk/client';

const sageClient = new SageClient({
  appId: '0x123...',
  channelRegistryId: '0x456...',
  network: 'testnet'
});

Usage Pattern:

const result = await sageClient.createUser({
  amounts: [0, 0],
  name: "alice",
  description: "Developer",
  self: walletAddress
});

if (result.ok) {
  await signAndExecuteTransaction({ transaction: result.transaction });
}

When to Use

  • Non-React applications: Vue, Angular, Svelte, or vanilla JavaScript
  • Server-side operations: Node.js backends or serverless functions
  • Library integration: Building your own wrapper or abstraction layer
  • Multiple clients: Applications that need multiple Sage client instances

​
React Wrapper

The React wrapper provides the same functionality through React hooks and context. It’s a thin convenience layer that makes integration cleaner in React applications.

Setup:

import { SageProvider } from '@sageprotocol/sdk/react';

function App() {
  return (
    <SageProvider
      appId="0x123..."
      channelRegistryId="0x456..."
      network="testnet"
    >
      <YourApp />
    </SageProvider>
  );
}

Usage Pattern:

import { useUser } from '@sageprotocol/sdk/react';

function UserCreation() {
  const { create } = useUser();

  const handleCreate = async () => {
    const result = await create({
      amounts: [0, 0],
      name: "alice",
      description: "Developer", 
      self: walletAddress
    });

    if (result.ok) {
      await signAndExecuteTransaction({ transaction: result.transaction });
    }
  };

  ...
}

When to Use

  • React applications

​
Key Differences

AspectVanilla ClientReact Wrapper
Import@sageprotocol/sdk/client@sageprotocol/sdk/react
SetupDirect instantiationProvider + hooks
MethodssageClient.methodName()const { methodName } = useHook()
DependenciesNone (beyond Sui)React required

​
Available Hooks

The React wrapper provides three hooks that correspond to the main functional areas:

import { useChannel, usePost, useUser } from '@sageprotocol/sdk/react';

function MyComponent() {
  // Channel operations
  const {
    addModerator,
    create,
    follow,
    post,
    removeModerator,
    unfollow,
    update
  } = useChannel();
  
  // Post operations  
  const { like, commentOnPost } = usePost();
  
  // User operations
  const {
    addFavoriteChannel,
    addFavoritePost,
    addFavoriteUser,
    claimReward,
    create,
    follow,
    friend,
    post,
    removeFavoriteChannel,
    removeFavoritePost,
    removeFavoriteUser,
    removeFriendRequest,
    unfollow,
    unfriend,
    update
  } = useUser();
}

​
Identical Functionality

Both approaches:

  • Use the same transaction result pattern ({ ok, err?, transaction? })
  • Require manual wallet integration for transaction signing
  • Support the same networks (testnet/mainnet)
  • Provide identical error handling and validation
  • Offer the same performance characteristics

​
Implementation Notes

The React wrapper is a direct mapping—each hook method calls the corresponding vanilla client method with no additional processing, state management, or side effects. Choose based on your framework preference and application architecture.