Skip to content

Commit 23ecf90

Browse files
JunirezzJunirezz
authored
Merge branch 'main' into feature/badge-timeline-components
2 parents 50842ba + bf29cf0 commit 23ecf90

17 files changed

Lines changed: 603 additions & 197 deletions

File tree

‎UIDesign‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
https://www.figma.com/design/bhHlIX6xxmzhwcGga6ocmR/-149-UI-UX--Define-visual-identity--brand-palette--type--icon-style-?node-id=0-1&t=4PYMaTp0wnicXQ9w-1
2+
https://www.figma.com/design/L0nBXSxxxmMM5hf8QXNGxn/-150-UI-UX--Design-dashboard-layout-and-key-metrics-hierarchy?node-id=0-1&t=oVSoWrNiZIhog1L5-1
3+
https://www.figma.com/design/iBT5Grs20gZxUFsm3NBuVu/-152-UI-UX--Design-transaction-flow--confirm--pending--success--failure-?node-id=0-1&t=G2w3nPAc1qMnAcSF-1
4+
https://www.figma.com/design/x2PFPR9PMXJBQ0HlUFkBf8/-153-UI-UX--Audit-spacing-alignment-and-create-layout-grid-guidelines?node-id=0-1&t=3V5aZxZ1SqgROwp6-1

‎frontend/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);
2121
const Home = lazy(() => import("./pages/Home"));
2222
const Portfolio = lazy(() => import("./pages/Portfolio"));
2323
const Analytics = lazy(() => import("./pages/Analytics"));
24+
const UIPreview = lazy(() => import("./pages/UIPreview"));
2425

2526
const LoadingPage = () => {
2627
const { t } = useTranslation();
@@ -108,6 +109,7 @@ function AppContent() {
108109
element={<Portfolio walletAddress={walletAddress} />}
109110
/>
110111
<Route path="/analytics" element={<Analytics />} />
112+
<Route path="/ui-kit" element={<UIPreview />} />
111113
<Route path="*" element={<Navigate to="/" replace />} />
112114
</SentryRoutes>
113115
</Suspense>

‎frontend/src/components/DataTable.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,8 @@ export function DataTable<T>({
186186
{t("dataTable.next")}
187187
</button>
188188
</div>
189+
</div>
190+
)}
189191
{pagination && (
190192
<div className="data-table-pagination" style={{ padding: 0 }}>
191193
<Pagination

‎frontend/src/components/Navbar.tsx‎

Lines changed: 1 addition & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import { NavLink } from 'react-router-dom';
22
import WalletConnect from './WalletConnect';
33
import ThemeToggle from './ThemeToggle';
44
import { Layers } from './icons';
@@ -110,95 +110,6 @@ const Navbar: React.FC<NavbarProps> = ({
110110
</NavLink>
111111
</div>
112112
</div>
113-
const navLinkStyle = (isActive: boolean): React.CSSProperties => ({
114-
color: isActive ? '#fff' : 'var(--text-secondary)',
115-
fontWeight: isActive ? 600 : 500,
116-
padding: '8px 12px',
117-
borderRadius: '9999px',
118-
background: isActive ? 'rgba(255, 255, 255, 0.08)' : 'transparent',
119-
border: isActive ? '1px solid rgba(255, 255, 255, 0.08)' : '1px solid transparent',
120-
transition: 'all 0.2s ease'
121-
});
122-
123-
const Navbar: React.FC<NavbarProps> = ({ currentPath, onNavigate, walletAddress, onConnect, onDisconnect }) => {
124-
return (
125-
<nav style={{
126-
position: 'fixed',
127-
top: 0,
128-
left: 0,
129-
right: 0,
130-
zIndex: 100,
131-
background: 'var(--bg-surface)',
132-
backdropFilter: 'blur(20px)',
133-
WebkitBackdropFilter: 'blur(20px)',
134-
borderBottom: '1px solid var(--border-glass)',
135-
padding: '16px 0'
136-
}}>
137-
<div className="container flex justify-between items-center">
138-
<div className="flex items-center gap-sm">
139-
<div style={{
140-
background: 'linear-gradient(135deg, var(--accent-cyan), var(--accent-purple))',
141-
padding: '8px',
142-
borderRadius: '12px',
143-
boxShadow: '0 0 15px rgba(0, 240, 255, 0.2)'
144-
}}>
145-
<Layers size={24} color="#000" />
146-
</div>
147-
<span style={{
148-
fontFamily: 'var(--font-display)',
149-
fontWeight: 700,
150-
fontSize: '1.25rem',
151-
letterSpacing: '-0.02em',
152-
background: 'linear-gradient(90deg, #fff, #94a3b8)',
153-
WebkitBackgroundClip: 'text',
154-
WebkitTextFillColor: 'transparent',
155-
marginLeft: '8px'
156-
}}>
157-
YieldVault <span style={{ color: 'var(--accent-cyan)' }}>RWA</span>
158-
</span>
159-
</div>
160-
161-
<div className="flex items-center gap-sm" style={{ marginLeft: 'auto', marginRight: '24px' }}>
162-
<a
163-
href="/"
164-
style={navLinkStyle(currentPath === '/')}
165-
onClick={(event) => {
166-
event.preventDefault();
167-
onNavigate('/');
168-
}}
169-
>
170-
Vaults
171-
</a>
172-
<a
173-
href="/analytics"
174-
style={navLinkStyle(currentPath === '/analytics')}
175-
onClick={(event) => {
176-
event.preventDefault();
177-
onNavigate('/analytics');
178-
}}
179-
>
180-
Analytics
181-
</a>
182-
<a
183-
href="/portfolio"
184-
style={navLinkStyle(currentPath === '/portfolio')}
185-
onClick={(event) => {
186-
event.preventDefault();
187-
onNavigate('/portfolio');
188-
}}
189-
>
190-
Portfolio
191-
</a>
192-
</div>
193-
194-
<div className="flex items-center gap-md">
195-
<ThemeToggle />
196-
<WalletConnect
197-
walletAddress={walletAddress}
198-
onConnect={onConnect}
199-
onDisconnect={onDisconnect}
200-
/>
201-
</div>
202113
</div>
203114
</nav>
204115
);

‎frontend/src/components/VaultDashboard.tsx‎

Lines changed: 0 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -13,66 +13,7 @@ interface VaultDashboardProps {
1313
usdcBalance?: number;
1414
}
1515

16-
const VaultDashboard: React.FC<VaultDashboardProps> = ({ walletAddress, usdcBalance = 0 }) => {
17-
const { formattedTvl, formattedApy, summary, error, isLoading } = useVault();
18-
const toast = useToast();
19-
const [activeTab, setActiveTab] = useState<"deposit" | "withdraw">("deposit");
20-
const [amount, setAmount] = useState("");
21-
const [isProcessing, setIsProcessing] = useState(false);
22-
const [pendingBalanceChange, setPendingBalanceChange] = useState(0);
2316

24-
const yieldRate = formattedApy;
25-
const tvl = formattedTvl;
26-
const strategy = summary.strategy;
27-
const availableBalance = Math.max(0, usdcBalance + pendingBalanceChange);
28-
const estimatedUsdcFee = (() => {
29-
const feeMatch = summary.networkFeeEstimate.match(/([0-9]*\.?[0-9]+)\s*USDC/i);
30-
return feeMatch ? Number(feeMatch[1]) : 0;
31-
})();
32-
const maxDepositAmount = Math.max(0, availableBalance - estimatedUsdcFee);
33-
const maxWithdrawAmount = availableBalance;
34-
const maxAllowableAmount = activeTab === "deposit" ? maxDepositAmount : maxWithdrawAmount;
35-
36-
const handleTransaction = () => {
37-
const value = Number(amount);
38-
if (!walletAddress || !amount || isNaN(value)) {
39-
toast.warning({
40-
title: "Enter a valid amount",
41-
description: "Choose a wallet and amount before submitting the transaction.",
42-
});
43-
return;
44-
}
45-
if (value > maxAllowableAmount) {
46-
toast.warning({
47-
title: "Amount exceeds maximum",
48-
description:
49-
activeTab === "deposit"
50-
? `You can deposit up to ${maxDepositAmount.toFixed(2)} USDC based on your available balance and fees.`
51-
: `You can withdraw up to ${maxWithdrawAmount.toFixed(2)} USDC.`,
52-
});
53-
return;
54-
}
55-
setIsProcessing(true);
56-
57-
// Simulate transaction delay
58-
setTimeout(() => {
59-
if (activeTab === "deposit") {
60-
setPendingBalanceChange((prev) => prev + value);
61-
}
62-
if (activeTab === "withdraw") {
63-
setPendingBalanceChange((prev) => prev - value);
64-
}
65-
setAmount("");
66-
setIsProcessing(false);
67-
toast.success({
68-
title: activeTab === "deposit" ? "Deposit queued" : "Withdrawal queued",
69-
description:
70-
activeTab === "deposit"
71-
? `${value.toFixed(2)} USDC has been added to your pending vault activity.`
72-
: `${value.toFixed(2)} USDC has been added to your pending withdrawal activity.`,
73-
});
74-
}, 2000);
75-
};
7617
const VaultDashboard: React.FC<VaultDashboardProps> = ({
7718
walletAddress,
7819
usdcBalance = 0,
@@ -107,8 +48,6 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
10748
return;
10849
}
10950

110-
<div className="glass-panel panel-padding-mobile" style={{ padding: '32px' }}>
111-
{error && <ApiStatusBanner error={error} />}
11251
if (actionType === "withdraw" && value > availableBalance) {
11352
toast.warning({
11453
title: "Insufficient balance",
@@ -138,9 +77,6 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
13877
return (
13978
<div className="vault-dashboard gap-lg">
14079
<div className="vault-dashboard-stats">
141-
<div className="glass-panel" style={{ padding: "32px" }}>
142-
{error && <ApiStatusBanner error={error} />}
143-
14480
<div
14581
className="vault-stats-header flex justify-between items-center"
14682
style={{ marginBottom: "24px" }}
@@ -176,9 +112,6 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
176112
</div>
177113
</div>
178114

179-
{/* Right Column - User Interaction */}
180-
<div style={{ flex: '1 1 400px' }}>
181-
<div className="glass-panel panel-padding-mobile" style={{ padding: '32px', position: 'relative', overflow: 'hidden' }}>
182115
<div
183116
style={{
184117
height: "1px",
@@ -279,7 +212,6 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
279212
<div style={{ marginTop: "8px", color: "var(--text-secondary)", fontSize: "0.78rem" }}>
280213
RPC: {hasCustomRpcConfig ? "Custom" : "Default"} - {networkConfig.rpcUrl}
281214
</div>
282-
</div>
283215
</div>
284216
</div>
285217

@@ -308,44 +240,6 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
308240
pointerEvents: "none",
309241
}}
310242
/>
311-
312-
<div className="flex justify-between items-center" style={{ marginBottom: '16px' }}>
313-
<div style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
314-
{activeTab === 'deposit' ? 'Amount to deposit' : 'Amount to withdraw'}
315-
</div>
316-
<div style={{ color: 'var(--text-secondary)', fontSize: '0.85rem' }}>
317-
Balance: <span style={{ color: 'var(--text-primary)', fontWeight: 600 }}>{walletAddress ? availableBalance.toFixed(2) : '0.00'}</span>
318-
</div>
319-
</div>
320-
321-
<div className="input-group" style={{ marginBottom: '24px' }}>
322-
<div className="input-wrapper">
323-
<span style={{ color: 'var(--text-secondary)', paddingRight: '12px', borderRight: '1px solid var(--border-glass)', marginRight: '16px' }}>USDC</span>
324-
<input
325-
className="input-field"
326-
type="number"
327-
placeholder="0.00"
328-
value={amount}
329-
onChange={(e) => setAmount(e.target.value)}
330-
/>
331-
<button
332-
style={{
333-
color: 'var(--accent-cyan)',
334-
fontSize: '0.8rem',
335-
fontWeight: 600,
336-
background: 'var(--accent-cyan-dim)',
337-
padding: '4px 10px',
338-
borderRadius: '6px'
339-
}}
340-
onClick={() =>
341-
setAmount(maxAllowableAmount.toFixed(2))
342-
}
343-
disabled={!walletAddress || maxAllowableAmount <= 0}
344-
>
345-
MAX
346-
</button>
347-
</div>
348-
</div>
349243
{!walletAddress && (
350244
<div
351245
style={{

‎frontend/src/components/WalletConnect.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useEffect } from "react";
2-
import { setAllowed } from "@stellar/freighter-api";
2+
import { setAllowed, isAllowed, getAddress } from "@stellar/freighter-api";
33
import { Loader2, LogOut, Wallet } from './icons';
44
import { hasCustomRpcConfig, networkConfig } from '../config/network';
55
import { useToast } from '../context/ToastContext';
@@ -62,6 +62,7 @@ const WalletConnect: React.FC<WalletConnectProps> = ({ walletAddress, onConnect,
6262
description: t('toast.walletConnected.description'),
6363
});
6464
}
65+
}
6566
const discoveredAddress = await discoverConnectedAddress();
6667
if (discoveredAddress) {
6768
onConnect(discoveredAddress);

0 commit comments

Comments
 (0)