# Integration Examples This document provides code examples for common integration scenarios with the Pact Protocol. These examples demonstrate how to use the API, smart contracts, webhooks, and SDK to integrate with the protocol. ## Table of Contents - [Activity Submission](#activity-submission) - [User Authentication](#user-authentication) - [Token Management](#token-management) - [Analytics Integration](#analytics-integration) - [Mobile App Integration](#mobile-app-integration) - [Web App Integration](#web-app-integration) ## Activity Submission ### Using the API ```javascript const axios = require('axios'); const crypto = require('crypto'); const apiKey = 'your_api_key_here'; const privateKey = 'your_private_key_here'; // Keep this secure! // Function to sign activity data function signActivity(user, activityType, timestamp, nonce, privateKey) { // Create message hash const message = `${user}:${activityType}:${timestamp}:${nonce}`; const messageHash = crypto.createHash('sha256').update(message).digest('hex'); // Sign message hash const signer = crypto.createSign('RSA-SHA256'); signer.update(messageHash); const signature = signer.sign(privateKey, 'hex'); return signature; } // Function to submit activity async function submitActivity(user, activityType) { try { // Generate timestamp and nonce const timestamp = Math.floor(Date.now() / 1000); const nonce = crypto.randomBytes(16).toString('hex'); // Sign activity data const signature = signActivity(user, activityType, timestamp, nonce, privateKey); // Submit activity const response = await axios.post( 'https://api.pactprotocol.io/v1/oracle/submit', { user, activityType, timestamp, nonce, signature }, { headers: { 'Content-Type': 'application/json', 'X-API-Key': apiKey } } ); console.log('Activity submitted:', response.data); return response.data; } catch (error) { console.error('Error submitting activity:', error.response?.data || error.message); throw error; } } // Example usage submitActivity('0x742d35Cc6634C0532925a3b8D4C9db96C4b4d8b', 'DAILY_EXERCISE') .then(data => console.log('Success:', data)) .catch(error => console.error('Error:', error)); ``` ### Using Smart Contracts ```javascript const ethers = require('ethers'); const crypto = require('crypto'); const oracleSubmissionABI = require('./abis/OracleSubmission.json'); const oracleSubmissionAddress = '0xabcdef1234567890abcdef1234567890abcdef12'; const privateKey = 'your_private_key_here'; // Keep this secure! // Function to sign activity data function signActivity(user, activityType, timestamp, nonce, privateKey) { // Create message hash const message = `${user}:${activityType}:${timestamp}:${nonce}`; const messageHash = crypto.createHash('sha256').update(message).digest('hex'); // Sign message hash const signer = crypto.createSign('RSA-SHA256'); signer.update(messageHash); const signature = signer.sign(privateKey, 'hex'); return signature; } // Function to submit activity async function submitActivity(user, activityType) { try { // Set up provider and signer const provider = new ethers.providers.Web3Provider(window.ethereum); await window.ethereum.request({ method: 'eth_requestAccounts' }); const signer = provider.getSigner(); // Create contract instance const oracleSubmissionContract = new ethers.Contract( oracleSubmissionAddress, oracleSubmissionABI, signer ); // Generate timestamp and nonce const timestamp = Math.floor(Date.now() / 1000); const nonce = crypto.randomBytes(16).toString('hex'); // Sign activity data const signature = signActivity(user, activityType, timestamp, nonce, privateKey); // Submit activity const tx = await oracleSubmissionContract.submitActivity( user, activityType, timestamp, nonce, signature ); // Wait for transaction to be mined const receipt = await tx.wait(); console.log('Activity submitted:', receipt); return { tx, receipt }; } catch (error) { console.error('Error submitting activity:', error); throw error; } } // Example usage submitActivity('0x742d35Cc6634C0532925a3b8D4C9db96C4b4d8b', 'DAILY_EXERCISE') .then(data => console.log('Success:', data)) .catch(error => console.error('Error:', error)); ``` ### Using the SDK ```javascript const { PactSDK } = require('@pactprotocol/sdk'); // Initialize the SDK const pact = new PactSDK({ apiKey: 'your_api_key_here', environment: 'production' }); // Function to submit activity async function submitActivity(user, activityType) { try { const activity = await pact.activities.submit({ user, activityType, timestamp: Math.floor(Date.now() / 1000) }); console.log('Activity submitted:', activity); return activity; } catch (error) { console.error('Error submitting activity:', error.message); throw error; } } // Example usage submitActivity('0x742d35Cc6634C0532925a3b8D4C9db96C4b4d8b', 'DAILY_EXERCISE') .then(data => console.log('Success:', data)) .catch(error => console.error('Error:', error)); ``` ## User Authentication ### Web3 Authentication ```javascript const ethers = require('ethers'); // Function to authenticate user with Web3 async function authenticateWithWeb3() { try { // Check if MetaMask is installed if (!window.ethereum) { throw new Error('MetaMask or similar Ethereum wallet not detected'); } // Request account access await window.ethereum.request({ method: 'eth_requestAccounts' }); // Get provider and signer const provider = new ethers.providers.Web3Provider(window.ethereum); const signer = provider.getSigner(); // Get user address const address = await signer.getAddress(); // Generate a random nonce const nonce = Math.floor(Math.random() * 1000000).toString(); // Create message to sign const message = `Sign this message to authenticate with Pact Protocol. Nonce: ${nonce}`; // Sign message const signature = await signer.signMessage(message); // Verify signature on the server const response = await fetch('https://api.pactprotocol.io/v1/auth/verify', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ address, nonce, signature, message }) }); const data = await response.json(); if (data.valid) { console.log('Authentication successful'); return { address, token: data.token }; } else { throw new Error('Authentication failed'); } } catch (error) { console.error('Error authenticating with Web3:', error); throw error; } } // Example usage authenticateWithWeb3() .then(data => { console.log('Authenticated as:', data.address); console.log('Token:', data.token); // Store token in localStorage localStorage.setItem('authToken', data.token); }) .catch(error => console.error('Error:', error)); ``` ### API Key Authentication ```javascript const axios = require('axios'); const apiKey = 'your_api_key_here'; // Function to create an authenticated API client function createAuthenticatedClient() { return axios.create({ baseURL: 'https://api.pactprotocol.io/v1', headers: { 'Content-Type': 'application/json', 'X-API-Key': apiKey } }); } // Example usage const client = createAuthenticatedClient(); // Use the authenticated client client.get('/xHBF/balance/0x742d35Cc6634C0532925a3b8D4C9db96C4b4d8b') .then(response => console.log('Balance:', response.data)) .catch(error => console.error('Error:', error.response?.data || error.message)); ``` ## Token Management ### Transfer Tokens ```javascript const ethers = require('ethers'); const xHBFABI = require('./abis/xHBF.json'); const xHBFAddress = '0x742d35Cc6634C0532925a3b8D4C9db96C4b4d8b'; // Function to transfer tokens async function transferTokens(to, amount) { try { // Set up provider and signer const provider = new ethers.providers.Web3Provider(window.ethereum); await window.ethereum.request({ method: 'eth_requestAccounts' }); const signer = provider.getSigner(); // Create contract instance const xHBFContract = new ethers.Contract( xHBFAddress, xHBFABI, signer ); // Convert amount to wei const amountWei = ethers.utils.parseEther(amount); // Transfer tokens const tx = await xHBFContract.transfer(to, amountWei); // Wait for transaction to be mined const receipt = await tx.wait(); console.log('Tokens transferred:', receipt); return { tx, receipt }; } catch (error) { console.error('Error transferring tokens:', error); throw error; } } // Example usage transferTokens('0xdef...', '1.0') .then(data => console.log('Success:', data)) .catch(error => console.error('Error:', error)); ``` ### Stake Tokens ```javascript const ethers = require('ethers'); const xHBFABI = require('./abis/xHBF.json'); const stakingABI = require('./abis/Staking.json'); const xHBFAddress = '0x742d35Cc6634C0532925a3b8D4C9db96C4b4d8b'; const stakingAddress = '0x1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0'; // Function to stake tokens async function stakeTokens(amount) { try { // Set up provider and signer const provider = new ethers.providers.Web3Provider(window.ethereum); await window.ethereum.request({ method: 'eth_requestAccounts' }); const signer = provider.getSigner(); // Create contract instances const xHBFContract = new ethers.Contract( xHBFAddress, xHBFABI, signer ); const stakingContract = new ethers.Contract( stakingAddress, stakingABI, signer ); // Convert amount to wei const amountWei = ethers.utils.parseEther(amount); // Approve tokens for staking const approveTx = await xHBFContract.approve(stakingAddress, amountWei); await approveTx.wait(); // Stake tokens const tx = await stakingContract.stake(amountWei); // Wait for transaction to be mined const receipt = await tx.wait(); console.log('Tokens staked:', receipt); return { tx, receipt }; } catch (error) { console.error('Error staking tokens:', error); throw error; } } // Example usage stakeTokens('1.0') .then(data => console.log('Success:', data)) .catch(error => console.error('Error:', error)); ``` ### Request API Access ```javascript const ethers = require('ethers'); const xHBFABI = require('./abis/xHBF.json'); const apiAccessABI = require('./abis/APIAccess.json'); const xHBFAddress = '0x742d35Cc6634C0532925a3b8D4C9db96C4b4d8b'; const apiAccessAddress = '0x9cd24553d0460CfD4c65d18af4e1aA0C7C5e4e8'; // Function to request API access async function requestAPIAccess(amount) { try { // Set up provider and signer const provider = new ethers.providers.Web3Provider(window.ethereum); await window.ethereum.request({ method: 'eth_requestAccounts' }); const signer = provider.getSigner(); // Create contract instances const xHBFContract = new ethers.Contract( xHBFAddress, xHBFABI, signer ); const apiAccessContract = new ethers.Contract( apiAccessAddress, apiAccessABI, signer ); // Convert amount to wei const amountWei = ethers.utils.parseEther(amount); // Approve tokens for burning const approveTx = await xHBFContract.approve(apiAccessAddress, amountWei); await approveTx.wait(); // Request API access const tx = await apiAccessContract.requestAccess(amountWei); // Wait for transaction to be mined const receipt = await tx.wait(); // Get API key from event logs const event = receipt.events?.find( (e) => e.event === 'AccessGranted' ); if (event && event.args) { const apiKey = event.args.apiKey; console.log('API key:', apiKey); return { tx, receipt, apiKey }; } else { throw new Error('Failed to get API key from transaction'); } } catch (error) { console.error('Error requesting API access:', error); throw error; } } // Example usage requestAPIAccess('1.0') .then(data => console.log('Success:', data)) .catch(error => console.error('Error:', error)); ``` ## Analytics Integration ### User Analytics Dashboard ```jsx import React, { useState, useEffect } from 'react'; import axios from 'axios'; import { Line, Bar } from 'react-chartjs-2'; const apiKey = 'your_api_key_here'; function UserAnalyticsDashboard({ address }) { const [analytics, setAnalytics] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { async function fetchAnalytics() { try { const response = await axios.get( `https://api.pactprotocol.io/v1/analytics/user/${address}`, { headers: { 'X-API-Key': apiKey } } ); setAnalytics(response.data); setLoading(false); } catch (error) { setError(error.response?.data || error.message); setLoading(false); } } fetchAnalytics(); }, [address]); if (loading) { return

; } if (error) { return

Error: {error}

; } // Prepare data for activity count by type chart const activityTypeData = { labels: Object.keys(analytics.activityCountByType), datasets: [ { label: 'Activity Count by Type', data: Object.values(analytics.activityCountByType), backgroundColor: [ 'rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)', 'rgba(75, 192, 192, 0.6)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)' ], borderWidth: 1 } ] }; // Prepare data for activity count by day chart const activityDayData = { labels: Object.keys(analytics.activityCountByDay), datasets: [ { label: 'Activity Count by Day', data: Object.values(analytics.activityCountByDay), fill: false, backgroundColor: 'rgba(75, 192, 192, 0.6)', borderColor: 'rgba(75, 192, 192, 1)', tension: 0.1 } ] }; return (

User Analytics

Address: {address}

Total Activity Count: {analytics.activityCount}

Current Streak: {analytics.streakDays} days

Longest Streak: {analytics.longestStreak} days

Activity Count by Type

Activity Count by Day

); } export default UserAnalyticsDashboard; ``` ### Network Analytics Dashboard ```jsx import React, { useState, useEffect } from 'react'; import axios from 'axios'; import { Line, Bar, Pie } from 'react-chartjs-2'; const apiKey = 'your_api_key_here'; function NetworkAnalyticsDashboard() { const [analytics, setAnalytics] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { async function fetchAnalytics() { try { const response = await axios.get( 'https://api.pactprotocol.io/v1/analytics/network', { headers: { 'X-API-Key': apiKey } } ); setAnalytics(response.data); setLoading(false); } catch (error) { setError(error.response?.data || error.message); setLoading(false); } } fetchAnalytics(); }, []); if (loading) { return

; } if (error) { return

Error: {error}

; } // Prepare data for activities by type chart const activitiesTypeData = { labels: Object.keys(analytics.activitiesByType), datasets: [ { label: 'Activities by Type', data: Object.values(analytics.activitiesByType), backgroundColor: [ 'rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)', 'rgba(75, 192, 192, 0.6)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)' ], borderWidth: 1 } ] }; // Prepare data for activities by day chart const activitiesDayData = { labels: Object.keys(analytics.activitiesByDay), datasets: [ { label: 'Activities by Day', data: Object.values(analytics.activitiesByDay), fill: false, backgroundColor: 'rgba(75, 192, 192, 0.6)', borderColor: 'rgba(75, 192, 192, 1)', tension: 0.1 } ] }; // Prepare data for active users by day chart const activeUsersDayData = { labels: Object.keys(analytics.activeUsersByDay), datasets: [ { label: 'Active Users by Day', data: Object.values(analytics.activeUsersByDay), fill: false, backgroundColor: 'rgba(54, 162, 235, 0.6)', borderColor: 'rgba(54, 162, 235, 1)', tension: 0.1 } ] }; return (

Network Analytics

Total Users: {analytics.totalUsers}

Total Activities: {analytics.totalActivities}

Active Users: {analytics.activeUsers}

Activities by Type

Activities by Day

Active Users by Day

); } export default NetworkAnalyticsDashboard; ``` ## Mobile App Integration ### React Native Example ```jsx import React, { useState, useEffect } from 'react'; import { View, Text, Button, StyleSheet, ActivityIndicator } from 'react-native'; import axios from 'axios'; const apiKey = 'your_api_key_here'; function UserProfile({ address }) { const [balance, setBalance] = useState(null); const [activities, setActivities] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { async function fetchData() { try { // Fetch balance const balanceResponse = await axios.get( `https://api.pactprotocol.io/v1/xHBF/balance/${address}`, { headers: { 'X-API-Key': apiKey } } ); // Fetch activities const activitiesResponse = await axios.get( `https://api.pactprotocol.io/v1/activity/history/${address}`, { headers: { 'X-API-Key': apiKey }, params: { limit: 10, offset: 0 } } ); setBalance(balanceResponse.data); setActivities(activitiesResponse.data.activities); setLoading(false); } catch (error) { setError(error.response?.data || error.message); setLoading(false); } } fetchData(); }, [address]); async function submitActivity() { try { setLoading(true); const response = await axios.post( 'https://api.pactprotocol.io/v1/oracle/submit', { user: address, activityType: 'DAILY_EXERCISE', timestamp: Math.floor(Date.now() / 1000), nonce: Math.random().toString(36).substring(2, 15), signature: 'signature_here' // In a real app, you would sign the data }, { headers: { 'Content-Type': 'application/json', 'X-API-Key': apiKey } } ); // Refresh activities const activitiesResponse = await axios.get( `https://api.pactprotocol.io/v1/activity/history/${address}`, { headers: { 'X-API-Key': apiKey }, params: { limit: 10, offset: 0 } } ); setActivities(activitiesResponse.data.activities); setLoading(false); } catch (error) { setError(error.response?.data || error.message); setLoading(false); } } if (loading) { return ( ); } if (error) { return ( Error: {error} ); } return ( User Profile Address: {address} Balance: {balance.balanceFormatted} xHBF Recent Activities {activities.map((activity, index) => ( Type: {activity.activityType} Date: {new Date(activity.timestamp * 1000).toLocaleString()} ))} {error &&

{error}

} ) : (

User Profile

Address: {address}

{balance &&

Balance: {balance.balanceFormatted} xHBF

} {analytics && ( <>

Total Activities: {analytics.activityCount}

Current Streak: {analytics.streakDays} days

Longest Streak: {analytics.longestStreak} days

)}

{chartData && (

Activity History

)}

Recent Activities

{activities.length === 0 ? (

No activities found.

) : (

{activities.map((activity, index) => (

{activity.activityType}

{new Date(activity.timestamp * 1000).toLocaleString()}

))}

)}

{error &&

{error}

}

)} ); } ``` ### Vue.js Example ```vue ``` ## Next Steps Now that you've seen examples of how to integrate with the Pact Protocol, you can: - Explore the [API Integration](api-integration.md) guide for more information about the API - Learn about [Smart Contract Integration](smart-contract-integration.md) for direct blockchain interaction - Set up [Webhooks](webhooks.md) for real-time notifications - Check out the [SDK](sdk.md) for a higher-level integration ## Support If you need help with your integration, you can: - Join our [Discord server](https://discord.gg/pactprotocol) - Email us at developers@pactprotocol.io - Check our [GitHub repository](https://github.com/pactprotocol/pact-protocol) for code examples and issues

User Analytics

Activity Count by Type

Activity Count by Day

Network Analytics

Activities by Type

Activities by Day

Active Users by Day

Pact Protocol Dashboard

User Profile

Activity History

Recent Activities

Pact Protocol Dashboard

User Profile

Activity History

Recent Activities