mirror of
https://github.com/pezkuwichain/pwap.git
synced 2026-06-17 20:31:01 +00:00
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:
@@ -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,
|
||||||
@@ -23,10 +23,13 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
|
|||||||
setSelectedAccount,
|
setSelectedAccount,
|
||||||
connectWallet,
|
connectWallet,
|
||||||
disconnectWallet,
|
disconnectWallet,
|
||||||
|
api,
|
||||||
|
isApiReady,
|
||||||
error
|
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">
|
||||||
|
|||||||
Reference in New Issue
Block a user