Skip to content

Commit 2e883cf

Browse files
MatteoMermaxgttph
MatteoMer
authored and
maxgttph
committed
using hooks + updating front
1 parent 7394e7e commit 2e883cf

21 files changed

+5219
-1268
lines changed

‎front/src/App.tsx

+62-120
Original file line numberDiff line numberDiff line change
@@ -1,141 +1,83 @@
1-
import { useState, useEffect } from 'react';
2-
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
1+
import { useState } from 'react';
2+
import { BrowserRouter, Routes, Route, useNavigate, useRoutes } from 'react-router-dom';
33
import './App.css';
4-
import { Balance } from './components/wallet/Balance';
5-
import { Send } from './components/wallet/Send';
6-
import { History } from './components/wallet/History';
7-
import { SessionKeys } from './components/wallet/SessionKeys';
8-
import { WalletLayout } from './components/layout/WalletLayout';
9-
import { Wallet, Transaction } from './types/wallet';
10-
import { indexerService } from './services/IndexerService';
4+
import { LoadingErrorState } from './components/common/LoadingErrorState';
5+
import { WalletShowcase } from './components/WalletShowcase';
116
import { useConfig } from './hooks/useConfig';
12-
import { AppEvent, webSocketService } from './services/WebSocketService';
13-
import { ConnectWallet } from './components/connect/ConnectWallet';
14-
import { ConnectWalletExamples } from './components/connect/ConnectWalletExamples';
7+
import { useWalletBalance } from './hooks/useWalletBalance';
8+
import { useWalletTransactions } from './hooks/useWalletTransactions';
9+
import { useWebSocketConnection } from './hooks/useWebSocketConnection';
10+
import { getPublicRoutes, getProtectedRoutes, ROUTES } from './routes/routes';
11+
import { WalletProvider, useWallet } from '../../hyle-wallet/src';
1512

16-
function App() {
17-
const [wallet, setWallet] = useState<Wallet | null>(null);
18-
const [balance, setBalance] = useState<number>(0);
19-
const [transactions, setTransactions] = useState<Transaction[]>([]);
13+
function AppContent() {
2014
const { isLoading: isLoadingConfig, error: configError } = useConfig();
21-
22-
// Function to fetch balance
23-
const fetchBalance = async () => {
24-
if (wallet) {
25-
const balance = await indexerService.getBalance(wallet.address);
26-
setBalance(balance);
27-
}
28-
};
29-
30-
// Function to fetch transaction history
31-
const fetchTransactions = async () => {
32-
if (wallet) {
33-
const transactions = await indexerService.getTransactionHistory(wallet.address);
34-
setTransactions(transactions);
35-
}
36-
};
37-
38-
// Initialize WebSocket connection when wallet is set
39-
useEffect(() => {
40-
if (wallet) {
41-
webSocketService.connect(wallet.address);
42-
43-
const handleTxEvent = async (event: AppEvent['TxEvent']) => {
44-
console.log('Received transaction event:', event);
45-
if (event.tx.status === 'Success') {
46-
// Update balance
47-
await fetchBalance();
48-
}
49-
50-
// Update transactions
51-
const newTransaction: Transaction = event.tx;
52-
53-
setTransactions(prevTransactions => {
54-
const existingIndex = prevTransactions.findIndex(tx => tx.id === newTransaction.id);
55-
if (existingIndex !== -1) {
56-
console.log('Updating existing transaction');
57-
// Update existing transaction in-place
58-
const updatedTransactions = [...prevTransactions];
59-
updatedTransactions[existingIndex] = newTransaction;
60-
return updatedTransactions;
61-
} else {
62-
console.log('Adding new transaction');
63-
// Add new transaction at the beginning of the list
64-
return [newTransaction, ...prevTransactions];
65-
}
66-
});
67-
};
68-
69-
const unsubscribeTxEvents = webSocketService.subscribeToTxEvents(handleTxEvent);
70-
71-
// Initial data fetch
15+
const { wallet, logout } = useWallet();
16+
const navigate = useNavigate();
17+
18+
// Use custom hooks
19+
const { balance, fetchBalance } = useWalletBalance(wallet?.address);
20+
const {
21+
transactions,
22+
handleTxEvent
23+
} = useWalletTransactions(wallet?.address);
24+
25+
// Setup WebSocket connection
26+
useWebSocketConnection(wallet?.address, event => {
27+
handleTxEvent(event);
28+
// If transaction was successful, update balance
29+
if (event.tx.status === 'Success') {
7230
fetchBalance();
73-
fetchTransactions();
74-
75-
return () => {
76-
unsubscribeTxEvents();
77-
webSocketService.disconnect();
78-
};
7931
}
80-
}, [wallet]);
81-
82-
const handleWalletLoggedIn = (loggedInWallet: Wallet) => {
83-
setWallet(loggedInWallet);
84-
localStorage.setItem('wallet', JSON.stringify(loggedInWallet));
85-
};
32+
});
8633

8734
const handleLogout = () => {
88-
setWallet(null);
89-
localStorage.removeItem('wallet');
35+
logout();
36+
navigate(ROUTES.ROOT);
9037
};
9138

92-
// Check if wallet exists in localStorage on component mount
93-
useEffect(() => {
94-
const storedWallet = localStorage.getItem('wallet');
95-
if (storedWallet) {
96-
setWallet(JSON.parse(storedWallet));
97-
}
98-
}, []);
99-
10039
if (isLoadingConfig) {
101-
return <div>Loading configuration...</div>;
40+
return <LoadingErrorState isLoading={true} error={null} loadingMessage="Loading configuration..." />;
10241
}
10342

10443
if (configError) {
105-
return <div>Error loading configuration: {configError}</div>;
44+
return <LoadingErrorState isLoading={false} error={`Error loading configuration: ${configError}`} />;
10645
}
10746

108-
return (
109-
<BrowserRouter>
110-
{/* Global connect wallet modal (renders its own button) */}
111-
{!wallet && (
112-
<div className="showcase-container">
113-
<div className="showcase-header">
114-
<h1>Wallet Integration</h1>
115-
<p>Connect to your wallet using a fully customizable modal component.</p>
116-
</div>
117-
<ConnectWalletExamples onWalletConnected={handleWalletLoggedIn} />
118-
</div>
119-
)}
120-
<Routes>
121-
<Route path="/" element={
122-
wallet ? <Navigate to="/wallet/balance" replace /> : <div />
123-
} />
47+
// If wallet is not connected, show the showcase screen
48+
if (!wallet) {
49+
return <WalletShowcase providers={['password', 'google', 'github']} />;
50+
}
12451

125-
{wallet && (
126-
<Route path="/wallet" element={<WalletLayout wallet={wallet} onLogout={handleLogout} />}>
127-
<Route path="balance" element={<Balance wallet={wallet} balance={balance} />} />
128-
<Route path="send" element={<Send wallet={wallet} />} />
129-
<Route path="history" element={<History transactions={transactions} />} />
130-
<Route path="session-keys" element={<SessionKeys wallet={wallet} />} />
131-
<Route index element={<Navigate to="balance" replace />} />
132-
</Route>
133-
)}
52+
// Generate routes based on authentication state
53+
const publicRoutes = getPublicRoutes();
54+
const protectedRoutes = getProtectedRoutes(wallet, balance, transactions, handleLogout);
55+
const allRoutes = [...publicRoutes, ...protectedRoutes];
56+
57+
return <Routes>{allRoutes.map(route =>
58+
<Route
59+
key={route.path}
60+
path={route.path}
61+
element={route.element}
62+
>
63+
{route.children?.map(childRoute => (
64+
<Route
65+
key={childRoute.path}
66+
path={childRoute.path}
67+
element={childRoute.element}
68+
index={childRoute.index}
69+
/>
70+
))}
71+
</Route>
72+
)}</Routes>;
73+
}
13474

135-
<Route path="*" element={<Navigate to="/" replace />} />
136-
</Routes>
75+
export default function App() {
76+
return (
77+
<BrowserRouter>
78+
<WalletProvider>
79+
<AppContent />
80+
</WalletProvider>
13781
</BrowserRouter>
13882
);
13983
}
140-
141-
export default App;

‎front/src/components/WalletShowcase.tsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import { HyleWallet } from '../../../hyle-wallet/src';
3+
4+
type ProviderOption = 'password' | 'google' | 'github';
5+
6+
interface WalletShowcaseProps {
7+
providers: ProviderOption[];
8+
}
9+
10+
export const WalletShowcase: React.FC<WalletShowcaseProps> = ({ providers }) => {
11+
return (
12+
<div className="showcase-container">
13+
<div className="showcase-header">
14+
<h1>Wallet Integration</h1>
15+
<p>Connect to your wallet using the default modal or your own custom UI.</p>
16+
</div>
17+
<HyleWallet providers={providers} />
18+
</div>
19+
);
20+
};

‎front/src/components/common/LoadingErrorState.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
3+
interface LoadingErrorStateProps {
4+
isLoading: boolean;
5+
error: string | null;
6+
loadingMessage?: string;
7+
}
8+
9+
export const LoadingErrorState: React.FC<LoadingErrorStateProps> = ({
10+
isLoading,
11+
error,
12+
loadingMessage = 'Loading...'
13+
}) => {
14+
if (isLoading) {
15+
return <div className="loading-state">{loadingMessage}</div>;
16+
}
17+
18+
if (error) {
19+
return <div className="error-state">Error: {error}</div>;
20+
}
21+
22+
return null;
23+
};

0 commit comments

Comments
 (0)