Updated Tria SDK Integration Guide for React.js

This guide covers the installation, configuration, and usage of the Tria SDK in a React.js application.

Installation

Install the Tria SDK and its peer dependencies:

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

Install additional development dependencies for polyfills:

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

Configuration

For Create React App (CRA)

  1. Create a config-overrides.js file in your project root:
const webpack = require('webpack')

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {}
  Object.assign(fallback, {
    crypto: require.resolve('crypto-browserify'),
    stream: require.resolve('stream-browserify'),
    assert: require.resolve('assert'),
    http: require.resolve('stream-http'),
    https: require.resolve('https-browserify'),
    os: require.resolve('os-browserify'),
    url: require.resolve('url'),
  })
  config.resolve.fallback = fallback

  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer'],
    }),
  ])

  return config
}
  1. Modify package.json scripts:
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

For Custom Webpack Configuration

Update your webpack configuration file (usually webpack.config.js):

const webpack = require('webpack')

module.exports = {
  // ... other configurations
  resolve: {
    fallback: {
      crypto: require.resolve('crypto-browserify'),
      stream: require.resolve('stream-browserify'),
      assert: require.resolve('assert'),
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      os: require.resolve('os-browserify'),
      url: require.resolve('url'),
    },
  },
  plugins: [
    // ... other plugins
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer'],
    }),
  ],
}

Additional Configuration

In your main entry file (usually src/index.js or src/index.ts), add these imports:

import 'react-app-polyfill/stable'
import 'react-app-polyfill/ie11'
import 'core-js/features/array/find'
import 'core-js/features/array/includes'
import 'core-js/features/number/is-nan'

Setup and Usage

1. Wrap Your App with TriaProvider

In your main App component:

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

function App() {
  const triaConfig = {
    analyticsKeys: {
      clientId: process.env.REACT_APP_TRIA_CLIENT_ID,
      projectId: process.env.REACT_APP_TRIA_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}
    >
      <YourAppContent />
    </TriaProvider>
  )
}

export default App

2. Using Tria SDK in Components

Modal Mode

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

function AuthComponent() {
  const { showAuthModal, userState, logout } = 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 React from 'react'
import { TriaAuthModal, useTriaAuth } from '@tria-sdk/authenticate-react'

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 React from 'react'
import { useTriaWallet } from '@tria-sdk/authenticate-react'

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>
  )
}

Important Notes

  • Ensure TriaProvider wraps your entire app or the part needing Tria SDK functionality.
  • Use environment variables for sensitive information like API keys. For CRA, create a .env file in your project root: 
    REACT_APP_TRIA_CLIENT_ID=your_client_id
REACT_APP_TRIA_PROJECT_ID=your_project_id
  • The difference between modal and non-modal modes is controlled by the modalMode option in triaUIConfig.
  • Ensure that the component <TriaAuthModal /> is added to the dom .
  • In modal mode, use showAuthModal() to display the auth modal, however the <TriaAuthModal /> must still be added to the dom.
  • In non-modal mode, render the <TriaAuthModal /> component directly in your JSX.
  • The webpack and polyfill configurations are crucial for ensuring compatibility with browser environments.
  • Always test thoroughly after making configuration changes to ensure all features work correctly.

By following this updated guide, you should be able to successfully integrate and use the Tria SDK in your React.js application, addressing common issues related to Node.js core modules in a browser environment.

Was this page helpful?