In-Depth Tria SDK Usage Guide for React

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

import { TriaProvider } from '@tria-sdk/authenticate-react'
import '@tria-sdk/authenticate-react/dist/style.css'
function App() {
  return (
    <TriaProvider
      initialConfig={{
        analyticsKeys: {
          clientId: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
          projectId: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
        },
        chain: 'FUSE',
      }}
      initialUIConfig={{
        modalMode: true,
        darkMode: true,
        dappName: 'Tria Demo',
      }}
      initialWalletUIConfig={{
        darkMode: true,
      }}
    >
      {/* Your app components */}
    </TriaProvider>
  )
}

function AuthComponent() {
  return (
    <div>
      <TriaAuthModal />
    </div>
  )
}

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

export default function AuthComponent() {
  const {
    showAuthModal,
    closeAuthModal,
    logout,
    getAccount,
    userState,
    checkForTelegramMiniApp,
    configure,
    configureUI,
    configureWalletUI,
    isReady,
  } = 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>
  )
}

import React, { useEffect, useState } from "react";
import { useTriaAuth, useTriaWallet } from "../src";
import SocialAuthComponent from "./headless/SocialAuthComponent";

const TriaComponent: React.FC = () => {

  // authentication functions
  const {
    userState,
    logout,
    getAccount,
  } = useTriaAuth();

  // wallet functions
  const {
    signMessage,
    send,
    isReady
  } = useTriaWallet();

  // local component state
  const [message, setMessage] = useState("");

  // handle logout
  const handleDisconnect = async () => {
    try {
      await logout();
    } catch (error) {
      console.error("Logout failed", error);
    }
  };

  // get user account details
  const handleGetAccount = () => {
    console.log(getAccount());
  };

  // send transaction
  const handleSend = () => {
    const amount = 0.01;
    const recipientAddress = "0x59f7843B267E79ea51B687a04Ef497bA240E7B26";
    send(amount, recipientAddress).then((result) => {
      console.log("Transaction sent:", result);
    });
  };

  const handleSignMessage = () => {
    signMessage(message).then((result) => {
      console.log("Message signed:", result);
    });
  };

  // upon login. a login response is updated to the user state. initially it will be null until after login
  useEffect(() => {
    console.log("login:", userState);
  }, [userState]);


  return (
    <div >
      <h2>Tria Interface</h2>

      <button onClick={showAuthModal}>
        Show Auth Modal
      </button>

      <button
        onClick={handleDisconnect}
      >
        Disconnect
      </button>

      <input
        style={inputStyle}
        value={message}
        onChange={(e) => {
          console.log(e.target.value);
          setMessage(e.target.value);
        }}
        placeholder="Enter message to sign"
      />

      <button style={buttonStyle} onClick={handleSignMessage}>
        Sign Message
      </button>

      <button
        style={{ ...buttonStyle, backgroundColor: "#2196F3" }}
        onClick={handleGetAccount}
      >
        Get Account
      </button>

      <button
        style={{ ...buttonStyle, backgroundColor: "#FF9800" }}
        onClick={handleSend}
      >
        Send Transaction
      </button>

    </div>
  );
};

export default TriaComponent;

useEffect(() => {
  if (isReady) {
    // Now you can safely call writeContract
    writeContract(someContractDetails).catch(console.error)
  }
}, [isReady, writeContract])

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

function AuthComponent() {
  return (
    <div>
      <TriaAuthModal />
    </div>
  )
}

const triaConfig = {
  // ... other config options
  aa: {
    pimlicoApiKey: 'YOUR_PIMLICO_API_KEY',
    isSponsored: true,
    sponsorshipPolicyIds: {
      FUSE: 'sp_cheerful_thing',
      POLYGON: 'sp_slim_namor',
    },
    accountType: 'Etherspot',
    supportAa: true,
  },
}

const triaConfig = {
  // ... other config options
  customChain: {
    type: 'EVM',
    chainId: 42161,
    rpcUrl: 'https://arbitrum.llamarpc.com',
    currencySymbol: 'ARB',
    currencyName: 'ARB',
    chainName: 'Arbitrum One',
  },
}

const { configure, configureUI, configureWalletUI } = useTriaAuth()

// Update SDK configuration
configure({
  chain: 'POLYGON',
  environment: 'mainnet',
})

// Update UI configuration
configureUI({
  darkMode: false,
  showPoweredByTria: false,
})

// Update wallet UI configuration
configureWalletUI({
  darkMode: false,
  primaryColor: '#FF5733',
})