Skip to main content
1

Install the Trust Engine SDK

Add the Trust Engine SDK to your React project
npm install @trust-engine/sdk@latest
2

Set Up Your React Component

Initialize the SDK and set up your React component structure
📝 IMPORTANT: You will be building ONE COMPONENT throughout this guide. Each step adds new functions to the same React component. DO NOT replace previous code - just keep adding to it!
Create or update your React component:
import React, { useState } from 'react';
import { TrustEngineSDK } from '@trust-engine/sdk';

const sdk = new TrustEngineSDK();

function TrustEngineDemo() {
  const [userID, setUserID] = useState('');
  const [walletAddress, setWalletAddress] = useState('');
  const [selectedFile, setSelectedFile] = useState(null);

  return (
    <div>
      <h2>Trust Engine File Registration</h2>
      {/* UI will go here */}
    </div>
  );
}

export default TrustEngineDemo;
3

Create a Wallet for Your User

Let users enter their ID and create a walletAdd this function to your React component:
const createWallet = async () => {
  if (!userID.trim()) {
    alert('Please enter a user ID first');
    return;
  }

  try {
    const wallet = await sdk.createWallet({
      userID: userID.trim() // Must be unique across your entire application
    });
    
    console.log('Wallet created:', wallet.details.walletAddress);
    setWalletAddress(wallet.details.walletAddress);
    
  } catch (error) {
    console.error('Error creating wallet:', error);
    alert('Error creating wallet: ' + error.message);
  }
};

// Add this to your component's JSX
<div>
  <input 
    type="text"
    placeholder="Enter your user ID (e.g., john.doe@company.com)"
    value={userID}
    onChange={(e) => setUserID(e.target.value)}
    disabled={walletAddress}
  />
  <button onClick={createWallet} disabled={walletAddress || !userID.trim()}>
    {walletAddress ? 'Wallet Created ✓' : 'Create Wallet'}
  </button>
</div>

{walletAddress && (
  <div>
    <strong>Wallet Address:</strong> {walletAddress}
  </div>
)}
4

Add File Upload and Registration

Now let users select and register files using the wallet from Step 3Add these functions to your React component (below the createWallet function):
const handleFileSelect = (event) => {
  const file = event.target.files[0];
  setSelectedFile(file);
};

const registerFile = async () => {
  if (!selectedFile) {
    alert('Please select a file first');
    return;
  }
  
  if (!walletAddress) {
    alert('Please create a wallet first');
    return;
  }

  try {
    const registration = await sdk.registerFile({
      file: selectedFile,
      contentTitle: selectedFile.name,
      walletAddress: walletAddress, // Using wallet from Step 3
      walletType: 'managed',
      metadata: 'Registered via React app'
    });

    console.log('File registered!', registration);
    alert('File registered successfully!');
    
  } catch (error) {
    console.error('Error registering file:', error);
    alert('Error registering file: ' + error.message);
  }
};

// Add this to your component's JSX (below the wallet section)
<div>
  <input 
    type="file" 
    onChange={handleFileSelect}
    disabled={!walletAddress}
  />
  
  {selectedFile && (
    <div>
      <strong>Selected:</strong> {selectedFile.name}
    </div>
  )}
  
  <button 
    onClick={registerFile} 
    disabled={!selectedFile || !walletAddress}
  >
    Register File
  </button>
</div>
5

Verify File Registration

Check if the file from Step 4 was successfully registeredAdd this function to your React component (below the registerFile function):
// Add this state variable with your other useState declarations at the top
const [searchResults, setSearchResults] = useState(null);

const verifyFile = async () => {
  if (!selectedFile) {
    alert('Please register a file first');
    return;
  }

  try {
    const results = await sdk.searchFile({ file: selectedFile }); // Using same file from Step 4
    setSearchResults(results);
    console.log('Search results:', results);
    
    if (results.totalResults > 0) {
      alert('✅ File found on blockchain!');
    } else {
      alert('❌ File not found - make sure you registered it first');
    }
    
  } catch (error) {
    console.error('Error searching file:', error);
    alert('Error searching file: ' + error.message);
  }
};

// Add this to your component's JSX (below the registration section)
<div>
  <button 
    onClick={verifyFile} 
    disabled={!selectedFile}
  >
    Verify Registration
  </button>
  
  {searchResults && searchResults.totalResults > 0 && (
    <div>
      <strong>✅ Found {searchResults.totalResults} registration(s)</strong>
    </div>
  )}
</div>
6

Test Your Complete React App

Now that you have all the functions in your component, let’s test them together!Your component should now have all the functions working together:
  1. User Input: Enter a unique user ID
  2. Wallet Creation: Click “Create Wallet” to generate a managed wallet
  3. File Selection: Choose any file from your computer
  4. File Registration: Click “Register File” to record it on blockchain
  5. Verification: Click “Verify Registration” to confirm it’s recorded
Your React component should now have: imports → state → createWallet → handleFileSelect → registerFile → verifyFile functions, all working together in one component!
7

Complete React Component

📋 This is for reference only - if you followed the previous steps, your component should already be working! This shows the complete component structure in one place.
Here’s the complete working React component that combines all the steps
import React, { useState } from 'react';
import { TrustEngineSDK } from '@trust-engine/sdk';

const sdk = new TrustEngineSDK();

function TrustEngineDemo() {
  const [userID, setUserID] = useState('');
  const [walletAddress, setWalletAddress] = useState('');
  const [selectedFile, setSelectedFile] = useState(null);
  const [searchResults, setSearchResults] = useState(null);

  // Step 3: Create wallet
  const createWallet = async () => {
    if (!userID.trim()) {
      alert('Please enter a user ID first');
      return;
    }

    try {
      const wallet = await sdk.createWallet({
        userID: userID.trim() // Must be unique across your entire application
      });
      
      console.log('Wallet created:', wallet.details.walletAddress);
      setWalletAddress(wallet.details.walletAddress);
      
    } catch (error) {
      console.error('Error creating wallet:', error);
      alert('Error creating wallet: ' + error.message);
    }
  };

  // Step 4: Handle file selection
  const handleFileSelect = (event) => {
    const file = event.target.files[0];
    setSelectedFile(file);
  };

  // Step 4: Register file
  const registerFile = async () => {
    if (!selectedFile) {
      alert('Please select a file first');
      return;
    }
    
    if (!walletAddress) {
      alert('Please create a wallet first');
      return;
    }

    try {
      const registration = await sdk.registerFile({
        file: selectedFile,
        contentTitle: selectedFile.name,
        walletAddress: walletAddress,
        walletType: 'managed',
        metadata: 'Registered via React app'
      });

      console.log('File registered!', registration);
      alert('File registered successfully!');
      
    } catch (error) {
      console.error('Error registering file:', error);
      alert('Error registering file: ' + error.message);
    }
  };

  // Step 5: Verify file
  const verifyFile = async () => {
    if (!selectedFile) {
      alert('Please register a file first');
      return;
    }

    try {
      const results = await sdk.searchFile({ file: selectedFile });
      setSearchResults(results);
      console.log('Search results:', results);
      
      if (results.totalResults > 0) {
        alert('✅ File found on blockchain!');
      } else {
        alert('❌ File not found - make sure you registered it first');
      }
      
    } catch (error) {
      console.error('Error searching file:', error);
      alert('Error searching file: ' + error.message);
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '500px' }}>
      <h2>Trust Engine File Registration</h2>
      
      {/* Step 3: Wallet Creation */}
      <div style={{ marginBottom: '20px' }}>
        <h3>Create Wallet</h3>
        <input 
          type="text"
          placeholder="Enter your user ID (e.g., john.doe@company.com)"
          value={userID}
          onChange={(e) => setUserID(e.target.value)}
          disabled={walletAddress}
          style={{ width: '300px', marginRight: '10px' }}
        />
        <button onClick={createWallet} disabled={walletAddress || !userID.trim()}>
          {walletAddress ? 'Wallet Created ✓' : 'Create Wallet'}
        </button>
        
        {walletAddress && (
          <div style={{ marginTop: '10px', fontSize: '14px' }}>
            <strong>Wallet:</strong> {walletAddress.substring(0, 20)}...
          </div>
        )}
      </div>

      {/* Step 4: File Selection & Registration */}
      <div style={{ marginBottom: '20px' }}>
        <h3>Register File</h3>
        <input 
          type="file" 
          onChange={handleFileSelect}
          disabled={!walletAddress}
          style={{ marginBottom: '10px' }}
        />
        
        {selectedFile && (
          <div style={{ marginBottom: '10px' }}>
            <strong>Selected:</strong> {selectedFile.name}
          </div>
        )}
        
        <button 
          onClick={registerFile} 
          disabled={!selectedFile || !walletAddress}
        >
          Register File
        </button>
      </div>

      {/* Step 5: Verification */}
      <div style={{ marginBottom: '20px' }}>
        <h3>Verify Registration</h3>
        <button 
          onClick={verifyFile} 
          disabled={!selectedFile}
        >
          Verify Registration
        </button>
        
        {searchResults && searchResults.totalResults > 0 && (
          <div style={{ marginTop: '10px' }}>
            <strong>✅ Found {searchResults.totalResults} registration(s)</strong>
          </div>
        )}
      </div>
    </div>
  );
}

export default TrustEngineDemo;

​
What’s Next?

SDK Documentation

Explore all available SDK methods and options

TRUST Stamp Widget

Add automatic verification badges to your React app

Node.js Guide

Server-side file registration with Node.js

REST API Guide

Direct API integration for any language
⌘I