Common Recipes for Tria SDK

Below are some common code recipes and patterns for integrating the Tria SDK into your application. These recipes demonstrate best practices for authentication flows, wallet interactions, and UI customization to help you quickly implement key functionality. Whether you're building a new dApp or adding web3 capabilities to an existing application, these examples will help you get started with common use cases.

1. Telegram authentication on button click

This recipe shows how to authenticate users in Telegram. It will authenticate existing user and trigger wallet creation for new user.

Initialize the TriaProvider:

<TriaProvider
  initialConfig={...}
  initialUIConfig={...}
  initialWalletUIConfig={...}
>
  {/* Your app components */}
</TriaProvider>

Here's how to implement user authentication on Telegram triggered by a button click: When triggered, this code will either authenticate an existing user or automatically create and set up a new wallet for first-time users

import {
  AuthenticationStatus,
  useTelegramAutoAuth,
  useTelegramMiniApp,
  useTriaAuth,
} from '@tria-sdk/authenticate-react'

function TelegramLoginComponent() {
  const { handleTelegramAutoAuth } = useTelegramAutoAuth({
    enableAutoDidCreation: true, // setting this to true will enable wallet creation for new user, otherwise this will only perform login for existing users
  })
  const { userState, isReady, showAuthModal } = useTriaAuth()

  const handleClick = () => {
    if (!isReady) {
      return
    }
    if (userState.authenticationStatus !== AuthenticationStatus.AUTHENTICATED) {
      handleTelegramAutoAuth() // trigger authentication using telegram. If new user, wallet creation will be triggered
      showAuthModal() // show auth modal, else authentication will happen in background
    } else {
      // You can show wallet or message the user is already logged in
    }
  }

  if (!isReady) {
    return <div>Connecting to Tria...</div>
  }

  return (
    <button onClick={handleClick}>
      Login Status: {userState.authenticationStatus}
    </button>
  )
}