Tria SDK Integration Guide for Next.js

This guide covers the installation and usage of the Tria SDK in a Next.js application.

Installation

Install the package:

npm install @tria-sdk/authenticate-react @wagmi/[email protected] @wagmi/[email protected] axios

Setup and Usage

1. Wrap Your App with TriaProvider

In your pages/_app.js or pages/_app.tsx:

import { TriaProvider } from '@tria-sdk/authenticate-react'

function MyApp({ Component, pageProps }) {
  const triaConfig = {
    analyticsKeys: {
      clientId: 'YOUR_CLIENT_ID',
      projectId: 'YOUR_PROJECT_ID',
    },
    chain: 'FUSE',
    // Other config options
  }

  const triaUIConfig = {
    modalMode: true, // Set to false for non-modal mode
    // Other UI config options
  }

  const triaWalletUIConfig = {
    darkMode: true,
    // Other wallet UI config options
  }

  return (
    <TriaProvider
      initialConfig={triaConfig}
      initialUIConfig={triaUIConfig}
      initialWalletUIConfig={triaWalletUIConfig}
    >
      <Component {...pageProps} />
    </TriaProvider>
  )
}

export default MyApp

Webpack Configuration

To ensure compatibility with the Tria SDK and its dependencies, you need to modify your Next.js webpack configuration. Create or update your next.config.js file with the following content:

const webpack = require('webpack')

module.exports = {
  reactStrictMode: false,
  webpack: (config, { isServer, webpack }) => {
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve('stream-browserify'),
        buffer: require.resolve('buffer/'),
        http: require.resolve('stream-http'),
        https: require.resolve('https-browserify'),
        zlib: require.resolve('browserify-zlib'),
        os: require.resolve('os-browserify/browser'),
        path: require.resolve('path-browserify'),
        fs: false,
        net: false,
        tls: false,
      }

      config.plugins.push(
        new webpack.ProvidePlugin({
          Buffer: ['buffer', 'Buffer'],
        }),
      )
    }

    return config
  },
}

This configuration does the following:

Provides browser-compatible versions of Node.js core modules.
Explicitly marks certain Node.js modules as unavailable in the browser environment.
Makes the Buffer object globally available.

2. Using Tria SDK in Components

Modal Mode

import { useTriaAuth } from '@tria-sdk/authenticate-react'

export default function AuthComponent() {
  const { showAuthModal, logout, isReady, userState } = useTriaAuth()

  if (!isReady) return <div>Loading...</div>

  return (
    <div>
      <TriaAuthModal />
      {userState.authenticationStatus ===
          AuthenticationStatus.AUTHENTICATED && ? (
        <button onClick={logout}>Logout</button>
      ) : (
        <button onClick={showAuthModal}>Login</button>
      )}
    </div>
  )
}

Non-Modal Mode

import { TriaAuthModal, useTriaAuth } from '@tria-sdk/authenticate-react'

export default function AuthComponent() {
  const { userState, logout } = useTriaAuth()

  if (!isReady) return <div>Loading...</div>

  return (
    <div>
      {userState.authenticationStatus ===
          AuthenticationStatus.AUTHENTICATED && ? (
        <button onClick={logout}>Logout</button>
      ) : (
        <TriaAuthModal />
      )}
    </div>
  )
}

3. Using Wallet Functions

import { useTriaWallet } from '@tria-sdk/authenticate-react'

export default function WalletComponent() {
  const { isReady, send, signMessage } = useTriaWallet()

  const handleSendTransaction = async () => {
    if (!isReady) return
    try {
      const result = await send(0.001, '0x1234...', 'ETH')
      console.log('Transaction sent:', result)
    } catch (error) {
      console.error('Transaction failed:', error)
    }
  }

  return (
    <div>
      <button onClick={handleSendTransaction}>Send Transaction</button>
    </div>
  )
}

4. Handling Server-Side Rendering (SSR)

For components that use browser-only features, use dynamic imports:

import dynamic from 'next/dynamic'

const DynamicAuthComponent = dynamic(
  () => import('../components/AuthComponent'),
  { ssr: false },
)

export default function Home() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <DynamicAuthComponent />
    </div>
  )
}

5. Telegram Apps

To use Telegram apps, you need to add the following script to your App:

<Script
          src=“https://telegram.org/js/telegram-web-app.js”
          strategy=“beforeInteractive”
        />

Important Notes

Ensure TriaProvider wraps your entire app in _app.js.
Use environment variables for sensitive information like API keys.
The difference between modal and non-modal modes is controlled by the modalMode option in triaUIConfig.
In modal mode, use showAuthModal() to display the auth modal.
In non-modal mode, render the <TriaAuthModal /> component directly in your JSX.
For components using browser-only features, use dynamic imports with { ssr: false }.

By following this guide, you should be able to integrate and use the Tria SDK in your Next.js application effectively, taking into account the specifics of server-side rendering and client-side functionality.