Hugging Face's logo

Spaces:
Gurripulli
/
defi-yield-explorer
Running

App Files Community
Gurripulli commited on
Commit
b7222cb
·
verified ·
1 Parent(s): 62f8e1b

crea una web que muestre los rendimientos defi para usd y usdt en las 5 principales plataformas defi por volumen

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +368 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Defi Yield Explorer
3
- emoji: 🐠
4
- colorFrom: yellow
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: DeFi Yield Explorer 🚀
3
+ colorFrom: blue
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,369 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DeFi Yield Explorer</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
13
+ <style>
14
+ .glass-card {
15
+ background: rgba(255, 255, 255, 0.1);
16
+ backdrop-filter: blur(10px);
17
+ -webkit-backdrop-filter: blur(10px);
18
+ border-radius: 16px;
19
+ border: 1px solid rgba(255, 255, 255, 0.2);
20
+ }
21
+ .animated-gradient {
22
+ animation: gradient 15s ease infinite;
23
+ background-size: 400% 400%;
24
+ }
25
+ @keyframes gradient {
26
+ 0% { background-position: 0% 50%; }
27
+ 50% { background-position: 100% 50%; }
28
+ 100% { background-position: 0% 50%; }
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="bg-gradient-to-br from-blue-900 via-purple-900 to-indigo-900 text-gray-100 min-h-screen">
33
+ <div id="vanta-bg" class="absolute w-full h-full"></div>
34
+ <div class="relative z-10 container mx-auto px-4 py-8">
35
+ <!-- Header -->
36
+ <header class="mb-12">
37
+ <div class="flex flex-col items-center justify-center text-center py-8">
38
+ <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 via-pink-500 to-purple-500">
39
+ DeFi Yield Explorer
40
+ </h1>
41
+ <p class="text-lg md:text-xl opacity-80 max-w-2xl">
42
+ Real-time APY comparison for USD & USDT across top DeFi platforms
43
+ </p>
44
+ <div class="mt-6 flex space-x-4">
45
+ <button id="refresh-btn" class="flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg transition">
46
+ <i data-feather="refresh-cw" class="mr-2"></i>
47
+ Refresh Data
48
+ </button>
49
+ <button class="flex items-center px-4 py-2 bg-pink-600 hover:bg-pink-700 rounded-lg transition">
50
+ <i data-feather="alert-circle" class="mr-2"></i>
51
+ Risk Info
52
+ </button>
53
+ </div>
54
+ </div>
55
+ </header>
56
+
57
+ <!-- Main Content -->
58
+ <main>
59
+ <!-- Yield Comparison Cards -->
60
+ <section class="mb-12">
61
+ <h2 class="text-2xl font-semibold mb-6 flex items-center">
62
+ <i data-feather="trending-up" class="mr-2"></i>
63
+ Top Platform Yields
64
+ </h2>
65
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
66
+ <!-- Card 1 - Aave -->
67
+ <div class="glass-card p-6 hover:shadow-lg transition duration-300">
68
+ <div class="flex justify-between items-start mb-4">
69
+ <div>
70
+ <img src="https://cryptologos.cc/logos/aave-aave-logo.png" alt="Aave Logo" class="h-10 w-10 rounded-full">
71
+ </div>
72
+ <span class="px-3 py-1 bg-green-900/30 text-green-400 rounded-full text-xs font-medium">Low Risk</span>
73
+ </div>
74
+ <h3 class="text-xl font-bold mb-2">Aave v3</h3>
75
+ <div class="space-y-3">
76
+ <div class="flex justify-between items-center">
77
+ <span class="opacity-80">USDT APY</span>
78
+ <span class="font-bold text-green-400">8.42%</span>
79
+ </div>
80
+ <div class="flex justify-between items-center">
81
+ <span class="opacity-80">USD APY</span>
82
+ <span class="font-bold text-green-400">7.89%</span>
83
+ </div>
84
+ <div class="flex justify-between items-center">
85
+ <span class="opacity-80">TVL</span>
86
+ <span class="font-medium">$5.2B</span>
87
+ </div>
88
+ </div>
89
+ <button class="w-full mt-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition">
90
+ View Details
91
+ </button>
92
+ </div>
93
+
94
+ <!-- Card 2 - Compound -->
95
+ <div class="glass-card p-6 hover:shadow-lg transition duration-300">
96
+ <div class="flex justify-between items-start mb-4">
97
+ <div>
98
+ <img src="https://cryptologos.cc/logos/compound-comp-logo.png" alt="Compound Logo" class="h-10 w-10 rounded-full">
99
+ </div>
100
+ <span class="px-3 py-1 bg-green-900/30 text-green-400 rounded-full text-xs font-medium">Low Risk</span>
101
+ </div>
102
+ <h3 class="text-xl font-bold mb-2">Compound v3</h3>
103
+ <div class="space-y-3">
104
+ <div class="flex justify-between items-center">
105
+ <span class="opacity-80">USDT APY</span>
106
+ <span class="font-bold text-green-400">6.15%</span>
107
+ </div>
108
+ <div class="flex justify-between items-center">
109
+ <span class="opacity-80">USD APY</span>
110
+ <span class="font-bold text-green-400">5.89%</span>
111
+ </div>
112
+ <div class="flex justify-between items-center">
113
+ <span class="opacity-80">TVL</span>
114
+ <span class="font-medium">$3.8B</span>
115
+ </div>
116
+ </div>
117
+ <button class="w-full mt-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition">
118
+ View Details
119
+ </button>
120
+ </div>
121
+
122
+ <!-- Card 3 - Curve -->
123
+ <div class="glass-card p-6 hover:shadow-lg transition duration-300">
124
+ <div class="flex justify-between items-start mb-4">
125
+ <div>
126
+ <img src="https://cryptologos.cc/logos/curve-dao-token-crv-logo.png" alt="Curve Logo" class="h-10 w-10 rounded-full">
127
+ </div>
128
+ <span class="px-3 py-1 bg-yellow-900/30 text-yellow-400 rounded-full text-xs font-medium">Medium Risk</span>
129
+ </div>
130
+ <h3 class="text-xl font-bold mb-2">Curve Finance</h3>
131
+ <div class="space-y-3">
132
+ <div class="flex justify-between items-center">
133
+ <span class="opacity-80">USDT APY</span>
134
+ <span class="font-bold text-green-400">11.24%</span>
135
+ </div>
136
+ <div class="flex justify-between items-center">
137
+ <span class="opacity-80">USD APY</span>
138
+ <span class="font-bold text-green-400">10.75%</span>
139
+ </div>
140
+ <div class="flex justify-between items-center">
141
+ <span class="opacity-80">TVL</span>
142
+ <span class="font-medium">$4.1B</span>
143
+ </div>
144
+ </div>
145
+ <button class="w-full mt-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition">
146
+ View Details
147
+ </button>
148
+ </div>
149
+
150
+ <!-- Card 4 - Yearn -->
151
+ <div class="glass-card p-6 hover:shadow-lg transition duration-300">
152
+ <div class="flex justify-between items-start mb-4">
153
+ <div>
154
+ <img src="https://cryptologos.cc/logos/yearn-finance-yfi-logo.png" alt="Yearn Logo" class="h-10 w-10 rounded-full">
155
+ </div>
156
+ <span class="px-3 py-1 bg-yellow-900/30 text-yellow-400 rounded-full text-xs font-medium">Medium Risk</span>
157
+ </div>
158
+ <h3 class="text-xl font-bold mb-2">Yearn Finance</h3>
159
+ <div class="space-y-3">
160
+ <div class="flex justify-between items-center">
161
+ <span class="opacity-80">USDT APY</span>
162
+ <span class="font-bold text-green-400">9.87%</span>
163
+ </div>
164
+ <div class="flex justify-between items-center">
165
+ <span class="opacity-80">USD APY</span>
166
+ <span class="font-bold text-green-400">8.92%</span>
167
+ </div>
168
+ <div class="flex justify-between items-center">
169
+ <span class="opacity-80">TVL</span>
170
+ <span class="font-medium">$2.9B</span>
171
+ </div>
172
+ </div>
173
+ <button class="w-full mt-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition">
174
+ View Details
175
+ </button>
176
+ </div>
177
+
178
+ <!-- Card 5 - Uniswap -->
179
+ <div class="glass-card p-6 hover:shadow-lg transition duration-300">
180
+ <div class="flex justify-between items-start mb-4">
181
+ <div>
182
+ <img src="https://cryptologos.cc/logos/uniswap-uni-logo.png" alt="Uniswap Logo" class="h-10 w-10 rounded-full">
183
+ </div>
184
+ <span class="px-3 py-1 bg-red-900/30 text-red-400 rounded-full text-xs font-medium">High Risk</span>
185
+ </div>
186
+ <h3 class="text-xl font-bold mb-2">Uniswap v3</h3>
187
+ <div class="space-y-3">
188
+ <div class="flex justify-between items-center">
189
+ <span class="opacity-80">USDT APY</span>
190
+ <span class="font-bold text-green-400">15.32%</span>
191
+ </div>
192
+ <div class="flex justify-between items-center">
193
+ <span class="opacity-80">USD APY</span>
194
+ <span class="font-bold text-green-400">14.87%</span>
195
+ </div>
196
+ <div class="flex justify-between items-center">
197
+ <span class="opacity-80">TVL</span>
198
+ <span class="font-medium">$6.5B</span>
199
+ </div>
200
+ </div>
201
+ <button class="w-full mt-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition">
202
+ View Details
203
+ </button>
204
+ </div>
205
+ </div>
206
+ </section>
207
+
208
+ <!-- Yield Comparison Chart -->
209
+ <section class="mb-12">
210
+ <h2 class="text-2xl font-semibold mb-6 flex items-center">
211
+ <i data-feather="bar-chart-2" class="mr-2"></i>
212
+ Yield Comparison
213
+ </h2>
214
+ <div class="glass-card p-6">
215
+ <div class="h-80">
216
+ <canvas id="yieldChart"></canvas>
217
+ </div>
218
+ </div>
219
+ </section>
220
+
221
+ <!-- Risk Info -->
222
+ <section class="mb-12">
223
+ <h2 class="text-2xl font-semibold mb-6 flex items-center">
224
+ <i data-feather="shield" class="mr-2"></i>
225
+ Risk Assessment
226
+ </h2>
227
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
228
+ <div class="glass-card p-6">
229
+ <div class="flex items-center mb-4">
230
+ <div class="p-2 rounded-full bg-green-900/20 mr-3">
231
+ <i data-feather="check-circle" class="text-green-400"></i>
232
+ </div>
233
+ <h3 class="text-lg font-semibold">Low Risk</h3>
234
+ </div>
235
+ <p class="opacity-80">
236
+ Platforms with established security audits, battle-tested smart contracts, and lower volatility.
237
+ </p>
238
+ </div>
239
+ <div class="glass-card p-6">
240
+ <div class="flex items-center mb-4">
241
+ <div class="p-2 rounded-full bg-yellow-900/20 mr-3">
242
+ <i data-feather="alert-triangle" class="text-yellow-400"></i>
243
+ </div>
244
+ <h3 class="text-lg font-semibold">Medium Risk</h3>
245
+ </div>
246
+ <p class="opacity-80">
247
+ Platforms with some security audits but higher complexity or newer protocols that haven't been fully tested.
248
+ </p>
249
+ </div>
250
+ <div class="glass-card p-6">
251
+ <div class="flex items-center mb-4">
252
+ <div class="p-2 rounded-full bg-red-900/20 mr-3">
253
+ <i data-feather="alert-octagon" class="text-red-400"></i>
254
+ </div>
255
+ <h3 class="text-lg font-semibold">High Risk</h3>
256
+ </div>
257
+ <p class="opacity-80">
258
+ Newer platforms, unaudited contracts, or those with complex strategies that could be vulnerable to exploits.
259
+ </p>
260
+ </div>
261
+ </div>
262
+ </section>
263
+ </main>
264
+
265
+ <!-- Footer -->
266
+ <footer class="py-8 border-t border-gray-800 mt-12">
267
+ <div class="flex flex-col md:flex-row justify-between items-center">
268
+ <div class="mb-4 md:mb-0">
269
+ <p class="opacity-70">© 2023 DeFi Yield Explorer. All yields are estimates.</p>
270
+ </div>
271
+ <div class="flex space-x-6">
272
+ <a href="#" class="opacity-70 hover:opacity-100 transition">
273
+ <i data-feather="twitter"></i>
274
+ </a>
275
+ <a href="#" class="opacity-70 hover:opacity-100 transition">
276
+ <i data-feather="github"></i>
277
+ </a>
278
+ <a href="#" class="opacity-70 hover:opacity-100 transition">
279
+ <i data-feather="discord"></i>
280
+ </a>
281
+ <a href="#" class="opacity-70 hover:opacity-100 transition">
282
+ <i data-feather="book"></i>
283
+ </a>
284
+ </div>
285
+ </div>
286
+ </footer>
287
+ </div>
288
+
289
+ <script>
290
+ // Initialize Vanta.js background
291
+ VANTA.NET({
292
+ el: "#vanta-bg",
293
+ mouseControls: true,
294
+ touchControls: true,
295
+ gyroControls: false,
296
+ minHeight: 200.00,
297
+ minWidth: 200.00,
298
+ scale: 1.00,
299
+ scaleMobile: 1.00,
300
+ color: 0x5f47ff,
301
+ backgroundColor: 0x10101a,
302
+ points: 10.00,
303
+ spacing: 16.00
304
+ });
305
+
306
+ // Initialize Chart.js
307
+ document.addEventListener('DOMContentLoaded', function() {
308
+ const ctx = document.getElementById('yieldChart').getContext('2d');
309
+ const yieldChart = new Chart(ctx, {
310
+ type: 'bar',
311
+ data: {
312
+ labels: ['Aave v3', 'Compound v3', 'Curve Finance', 'Yearn Finance', 'Uniswap v3'],
313
+ datasets: [
314
+ {
315
+ label: 'USDT APY',
316
+ data: [8.42, 6.15, 11.24, 9.87, 15.32],
317
+ backgroundColor: 'rgba(99, 102, 241, 0.7)',
318
+ borderColor: 'rgba(99, 102, 241, 1)',
319
+ borderWidth: 1
320
+ },
321
+ {
322
+ label: 'USD APY',
323
+ data: [7.89, 5.89, 10.75, 8.92, 14.87],
324
+ backgroundColor: 'rgba(236, 72, 153, 0.7)',
325
+ borderColor: 'rgba(236, 72, 153, 1)',
326
+ borderWidth: 1
327
+ }
328
+ ]
329
+ },
330
+ options: {
331
+ responsive: true,
332
+ maintainAspectRatio: false,
333
+ scales: {
334
+ y: {
335
+ beginAtZero: true,
336
+ title: {
337
+ display: true,
338
+ text: 'Annual Percentage Yield (%)'
339
+ }
340
+ }
341
+ },
342
+ plugins: {
343
+ legend: {
344
+ position: 'top',
345
+ },
346
+ title: {
347
+ display: true,
348
+ text: 'Stablecoin Yields Across DeFi Platforms'
349
+ }
350
+ }
351
+ }
352
+ });
353
+
354
+ // Refresh button functionality
355
+ document.getElementById('refresh-btn').addEventListener('click', function() {
356
+ // Would call API to refresh data in a real app
357
+ this.innerHTML = '<i data-feather="refresh-cw" class="animate-spin mr-2"></i> Refreshing...';
358
+ setTimeout(() => {
359
+ this.innerHTML = '<i data-feather="refresh-cw" class="mr-2"></i> Refresh Data';
360
+ feather.replace();
361
+ }, 1500);
362
+ });
363
+
364
+ // Replace icons
365
+ feather.replace();
366
+ });
367
+ </script>
368
+ </body>
369
  </html>