Frontend

A frontend project is expected to use exposed functions that directly interact with the Sage contracts. These include creating a user, following/unfollowing another user, creating/joining/leaving channels, and creating/liking post content.

React

To make this easier for most projects a React Provider is available to expose only these function interactions:

import { createNetworkConfig, SuiClientProvider, WalletProvider } from '@mysten/dapp-kit';
import { getFullnodeUrl } from '@mysten/sui/client';
import { SageProvider } from '@sage-app/sdk/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

...

const App = ({ children } ) => {
  const appId = 'YOUR_APP_ID';
  const network = 'mainnet' | 'testnet';
  
  const { networkConfig } = createNetworkConfig({
    testnet: { url: getFullnodeUrl('testnet') },
    mainnet: { url: getFullnodeUrl('mainnet') }
  });
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      <SuiClientProvider
        appId={appId}
        defaultNetwork={network}
        networks={networkConfig}
      >
        <WalletProvider autoConnect>
          <SageProvider appId={appId} network={network}>
            {...children}
          </SageProvider>
        </WalletProvider>
      </SuiClientProvider>
    </QueryClientProvider>
  );
};

Within the SageProvider context access the functions that interact with the contracts:

import {
    useChannel,
    usePost,
    useUser
} from '@sage-app/sdk/react';

...

const Component = () => {
    const {
        addModerator
        create,
        join,
        leave,
        post,
        removeModerator,
        update
    } = useChannel();
    
    const {
        commentOnPost
        like
    } = usePost();
    
    const {
        create,
        join,
        leave,
        post,
        update
    } = useUser();
    
    ...
};

Vanilla JS (or non-React framework)

To access the contract functions initialize the client directly:

import { SageClient } from '@sage-app/sdk/client';

...

const network = 'testnet' | 'mainnet';
const sageClient = new SageClient({ network });

...

sageClient.addModerator({ ... });
sageClient.createChannel({ ... });
sageClient.joinChannel({ ... });
sageClient.leaveChannel({ ... });
sageClient.postToChannel({ ... });
sageClient.removeModerator({ ... });
sageClient.updateChannel({ ... });

sageClient.commentOnPost({ ... });
sageClient.likePost({ ... });

sageClient.createUser({ ... });
sageClient.joinUser({ ... });
sageClient.leaveUser({ ... });
sageClient.postToUser({ ... });
sageClient.updateUser({ ... });