feat: Add real-time trust score to wallet dashboard

- Fetch trust score from pallet_trust via API
- Display score in WalletModal with Award icon
- Shows user's current trust score from blockchain
- Gradient styling (purple to cyan) for visual appeal
- Fallback to '-' when API not ready or score unavailable

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-01 10:44:17 +03:00
parent e9809ebc99
commit 96d6277a0f
+42 -8
View File
@@ -1,5 +1,5 @@
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import { Wallet, Chrome, ExternalLink, Copy, Check, LogOut } from 'lucide-react'; import { Wallet, Chrome, ExternalLink, Copy, Check, LogOut, Award } from 'lucide-react';
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@@ -17,16 +17,19 @@ interface WalletModalProps {
} }
export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) => { export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) => {
const { const {
accounts, accounts,
selectedAccount, selectedAccount,
setSelectedAccount, setSelectedAccount,
connectWallet, connectWallet,
disconnectWallet, disconnectWallet,
error api,
isApiReady,
error
} = usePolkadot(); } = usePolkadot();
const [copied, setCopied] = useState(false); const [copied, setCopied] = useState(false);
const [trustScore, setTrustScore] = useState<string>('-');
const handleCopyAddress = () => { const handleCopyAddress = () => {
if (selectedAccount?.address) { if (selectedAccount?.address) {
@@ -50,6 +53,27 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
onClose(); onClose();
}; };
// Fetch trust score from blockchain
useEffect(() => {
const fetchTrustScore = async () => {
if (!api || !isApiReady || !selectedAccount?.address) {
setTrustScore('-');
return;
}
try {
const score = await api.query.trust.trustScoreOf(selectedAccount.address);
setTrustScore(score.toString());
console.log('✅ Trust score fetched:', score.toString());
} catch (err) {
console.warn('Failed to fetch trust score:', err);
setTrustScore('-');
}
};
fetchTrustScore();
}, [api, isApiReady, selectedAccount]);
return ( return (
<Dialog open={isOpen} onOpenChange={onClose}> <Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="sm:max-w-md"> <DialogContent className="sm:max-w-md">
@@ -125,6 +149,16 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
</div> </div>
</div> </div>
<div>
<div className="text-xs text-gray-400 mb-1">Trust Score</div>
<div className="flex items-center gap-2">
<Award className="h-4 w-4 text-purple-400" />
<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> <div>
<div className="text-xs text-gray-400 mb-1">Source</div> <div className="text-xs text-gray-400 mb-1">Source</div>
<div className="text-sm text-gray-300"> <div className="text-sm text-gray-300">