feat: Add real-time trust score display in Wallet Dashboard

- Fetch trust score from blockchain via api.query.trust.trustScores
- Display trust score in AccountBalance component (Account Info card)
- Show between Address and Source fields with Award icon
- Use purple-cyan gradient styling for visual consistency

Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-01 11:30:58 +03:00
parent 675a21d214
commit 63027314f6
+29 -1
View File
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import { usePolkadot } from '@/contexts/PolkadotContext';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Wallet, TrendingUp, ArrowUpRight, ArrowDownRight, RefreshCw } from 'lucide-react';
import { Wallet, TrendingUp, ArrowUpRight, ArrowDownRight, RefreshCw, Award } from 'lucide-react';
import { Button } from '@/components/ui/button';
export const AccountBalance: React.FC = () => {
@@ -16,6 +16,7 @@ export const AccountBalance: React.FC = () => {
total: '0',
});
const [pezBalance, setPezBalance] = useState<string>('0');
const [trustScore, setTrustScore] = useState<string>('-');
const [isLoading, setIsLoading] = useState(false);
const fetchBalance = async () => {
@@ -69,6 +70,24 @@ export const AccountBalance: React.FC = () => {
useEffect(() => {
fetchBalance();
// Fetch Trust Score
const fetchTrustScore = async () => {
if (!api || !isApiReady || !selectedAccount?.address) {
setTrustScore('-');
return;
}
try {
const score = await api.query.trust.trustScores(selectedAccount.address);
setTrustScore(score.toString());
} catch (err) {
console.error('Failed to fetch trust score:', err);
setTrustScore('-');
}
};
fetchTrustScore();
// Subscribe to HEZ balance updates
let unsubscribeHez: () => void;
let unsubscribePez: () => void;
@@ -235,6 +254,15 @@ export const AccountBalance: React.FC = () => {
{selectedAccount.address.slice(0, 8)}...{selectedAccount.address.slice(-8)}
</span>
</div>
<div className="flex items-center justify-between text-sm">
<span className="text-gray-400 flex items-center gap-1">
<Award className="w-3 h-3 text-purple-400" />
Trust Score
</span>
<span className="text-lg font-bold bg-gradient-to-r from-purple-400 to-cyan-400 bg-clip-text text-transparent">
{trustScore}
</span>
</div>
</div>
</CardContent>
</Card>