mirror of
https://github.com/pezkuwichain/pwap.git
synced 2026-06-19 15:21:02 +00:00
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:
@@ -1,7 +1,7 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { usePolkadot } from '@/contexts/PolkadotContext';
|
import { usePolkadot } from '@/contexts/PolkadotContext';
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
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';
|
import { Button } from '@/components/ui/button';
|
||||||
|
|
||||||
export const AccountBalance: React.FC = () => {
|
export const AccountBalance: React.FC = () => {
|
||||||
@@ -16,6 +16,7 @@ export const AccountBalance: React.FC = () => {
|
|||||||
total: '0',
|
total: '0',
|
||||||
});
|
});
|
||||||
const [pezBalance, setPezBalance] = useState<string>('0');
|
const [pezBalance, setPezBalance] = useState<string>('0');
|
||||||
|
const [trustScore, setTrustScore] = useState<string>('-');
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
const fetchBalance = async () => {
|
const fetchBalance = async () => {
|
||||||
@@ -69,6 +70,24 @@ export const AccountBalance: React.FC = () => {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchBalance();
|
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
|
// Subscribe to HEZ balance updates
|
||||||
let unsubscribeHez: () => void;
|
let unsubscribeHez: () => void;
|
||||||
let unsubscribePez: () => void;
|
let unsubscribePez: () => void;
|
||||||
@@ -235,6 +254,15 @@ export const AccountBalance: React.FC = () => {
|
|||||||
{selectedAccount.address.slice(0, 8)}...{selectedAccount.address.slice(-8)}
|
{selectedAccount.address.slice(0, 8)}...{selectedAccount.address.slice(-8)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
Reference in New Issue
Block a user