feat: enable tip on github user page

README.md

@@ -4,13 +4,15 @@ A powerful Chrome extension that seamlessly integrates Builder Score metrics int
 
 ## Features
 
-- **Real-time Score Display**: Automatically displays Builder Scores on Twitter and Warpcast profiles
+- **Real-time Score Display**: Automatically displays Builder Scores on Twitter and Farcaster profiles
 - **Interactive Badges**: Clickable badges showing detailed builder metrics
 - **Score Verification**: Visual indication of verified builder accounts
 - **Profile Analytics**: Comprehensive view of builder activity, identity, and skills scores
-- **Social Integration**: Support for multiple platforms (Twitter, Warpcast) with platform-specific UI adaptations
+- **Social Integration**: Support for multiple platforms (Twitter, Farcaster) with platform-specific UI adaptations
 - **Caching System**: Efficient data management with 24-hour cache duration
 - **Rate Limiting**: Smart request handling with automatic retries and rate limit management
+- **WalletConnect Integration**: Secure wallet connection via WalletConnect AppKit
+- **One-Click Tipping**: Simple and intuitive tipping interface
 
 ## Installation
 
@@ -59,7 +61,7 @@ The extension uses several configuration objects that can be modified in the sou
 
 ```typescript
 const CONFIG = {
-  DEBUG: true,
+DEBUG: true,
   MUTATION_DEBOUNCE: 500,
   BADGE_UPDATE_COOLDOWN: 2000,
   // ... other configurations
@@ -110,6 +112,7 @@ This project is licensed under the MIT License - see the LICENSE file for detail
 
 - [codingsh](https://twitter.com/codingsh)
 
+
 ## Acknowledgments
 
 - Built with React and TypeScript

package.json

@@ -1,25 +1,31 @@
 {
   "name": "builder-score-extension",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "author": "codingsh",
-  "description": "Chrome extension to replace addresses with Farcaster names on DexScreener",
+  "description": "Chrome extension to display Builder Scores and enable tipping on GitHub",
   "scripts": {
     "build": "webpack --config webpack.config.js",
     "dev": "webpack --config webpack.config.js --watch"
   },
   "dependencies": {
     "@radix-ui/react-switch": "^1.1.1",
+    "@reown/appkit": "1.8.10",
+    "@reown/appkit-adapter-wagmi": "1.8.10",
     "@supabase/supabase-js": "^2.48.1",
+    "@tanstack/react-query": "^5.17.0",
     "autoprefix": "^1.0.1",
     "class-variance-authority": "^0.7.1",
     "dotenv": "^16.0.3",
     "framer-motion": "^12.4.2",
     "html-webpack-plugin": "^5.6.3",
     "lucide-react": "^0.475.0",
     "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
     "terser-webpack-plugin": "^5.3.10",
+    "viem": "^2.21.0",
+    "wagmi": "^2.12.0",
     "zustand": "^5.0.3"
   },
   "devDependencies": {
@@ -40,4 +46,4 @@
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4"
   }
-}
+}

src/components/Leaderboard.tsx

@@ -0,0 +1,143 @@
+import React, { useEffect, useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+interface LeaderboardUser {
+  fid: number;
+  username: string;
+  display_name: string;
+  pfp_url: string;
+  builder_score: number;
+  percentile: number;
+  rank: number;
+}
+
+interface LeaderboardResponse {
+  data: LeaderboardUser[];
+  pagination: {
+    page: number;
+    per_page: number;
+    total: number;
+    total_pages: number;
+  };
+}
+
+const Leaderboard: React.FC = () => {
+  const [users, setUsers] = useState<LeaderboardUser[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchLeaderboard();
+  }, []);
+
+  const fetchLeaderboard = async () => {
+    try {
+      const response = await fetch(
+        'https://www.builderscore.xyz/api/leaderboards?per_page=5&page=1'
+      );
+
+      if (!response.ok) {
+        throw new Error(`API error: ${response.status}`);
+      }
+
+      const data: LeaderboardResponse = await response.json();
+      setUsers(data.data);
+      setLoading(false);
+    } catch (err) {
+      console.error('Error fetching leaderboard:', err);
+      setError('Failed to load leaderboard');
+      setLoading(false);
+    }
+  };
+
+  const getMedalEmoji = (rank: number): string => {
+    switch (rank) {
+      case 1: return '🥇';
+      case 2: return '🥈';
+      case 3: return '🥉';
+      default: return `#${rank}`;
+    }
+  };
+
+  if (loading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm">Top Builders</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-center py-4">
+            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-purple-600"></div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm">Top Builders</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-red-600">{error}</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-sm">🏆 Top Builders</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {users.map((user) => (
+          <a
+            key={user.fid}
+            href={`https://warpcast.com/${user.username}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center space-x-3 p-2 rounded-lg hover:bg-purple-50 transition-colors cursor-pointer"
+          >
+            <div className="flex-shrink-0 w-8 text-center">
+              <span className="text-sm font-bold">
+                {getMedalEmoji(user.rank)}
+              </span>
+            </div>
+            <img
+              src={user.pfp_url}
+              alt={user.display_name}
+              className="w-8 h-8 rounded-full"
+            />
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium truncate">
+                {user.display_name}
+              </p>
+              <p className="text-xs text-gray-500">@{user.username}</p>
+            </div>
+            <div className="flex-shrink-0 text-right">
+              <p className="text-sm font-bold text-purple-600">
+                {user.builder_score}
+              </p>
+              <p className="text-xs text-gray-400">
+                Top {user.percentile.toFixed(1)}%
+              </p>
+            </div>
+          </a>
+        ))}
+        <a
+          href="https://www.builderscore.xyz/leaderboard"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block text-center text-xs text-purple-600 hover:text-purple-700 pt-2 border-t"
+        >
+          View Full Leaderboard →
+        </a>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default Leaderboard;