Skip to content

Commit 1b19bd4

Browse files
seriouscatsoseriousseriouscatsoserious
authored
Merge pull request #56 from LayerTwo-Labs/ui-overhaul
UI overhaul
2 parents e978e75 + beda920 commit 1b19bd4

15 files changed

+338
-470
lines changed

‎public/chain_config.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"version": "",
88
"display_name": "Bitcoin (Patched)",
99
"description": "Bitcoin Core with additional patches",
10+
"released": "yes",
1011
"repo_url": "https://github.com/LayerTwo-Labs/bitcoin",
1112
"directories": {
1213
"base": {
@@ -55,6 +56,7 @@
5556
"version": "",
5657
"display_name": "BIP 300/301 Enforcer",
5758
"description": "Enforcer for BIP 300/301 functionality",
59+
"released": "yes",
5860
"repo_url": "https://github.com/LayerTwo-Labs/mainchain",
5961
"directories": {
6062
"base": {
@@ -70,8 +72,6 @@
7072
"win32": "Drivechain-Launcher-Downloads/enforcer"
7173
},
7274
"download": {
73-
"urls": {
74-
"linux": "https://releases.drivechain.info/bip300301-enforcer-latest-x86_64-unknown-linux-gnu.zip",
7575
"darwin": "https://releases.drivechain.info/bip300301-enforcer-latest-x86_64-apple-darwin.zip",
7676
"win32": "https://releases.drivechain.info/bip300301-enforcer-latest-x86_64-pc-windows-gnu.zip"
7777
},

‎src/App.css

+1-4
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ body {
7272
align-items: center;
7373
justify-content: flex-start;
7474
color: var(--text-color);
75-
padding-top: 30px;
75+
padding-top: 36px;
7676
}
7777

7878
.App-header {
@@ -261,9 +261,6 @@ body {
261261
box-sizing: border-box;
262262
}
263263

264-
.chain-section {
265-
margin-bottom: 2rem;
266-
}
267264

268265
.chain-heading-row {
269266
display: flex;

‎src/components/Card.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,9 @@ const Card = ({
5656
} else if (chain.status === 'not_downloaded' ||
5757
chain.status === 'downloaded' ||
5858
chain.status === 'stopped' ||
59-
chain.status === 'stopping') {
59+
chain.status === 'stopping' ||
60+
chain.status === 'downloading' ||
61+
chain.status === 'extracting') {
6062
setProcessHealth('offline');
6163
} else if (chain.status === 'running' ||
6264
chain.status === 'starting' ||

‎src/components/ChainSettingsModal.module.css

+11-3
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@
1212
}
1313

1414
.dangerOverlay {
15-
background-color: rgba(220, 53, 69, 0.2);
15+
background-color: rgba(220, 53, 69, 0.55);
16+
backdrop-filter: blur(15px);
17+
-webkit-backdrop-filter: blur(15px); /* For Safari support */
1618
}
1719

1820
.modalContent {
@@ -197,8 +199,14 @@
197199

198200
.modalBody ul {
199201
list-style: disc;
200-
padding-left: 20px;
201-
margin: 10px 0;
202+
padding-left: 24px;
203+
margin: 15px 0;
204+
}
205+
206+
.modalBody ul li {
207+
margin: 8px 0;
208+
color: var(--text-color);
209+
line-height: 1.4;
202210
}
203211

204212
.warningText {

‎src/components/DownloadModal.js

+5-8
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,9 @@ const DownloadModal = memo(() => {
3939
const activeDownloads = useMemo(() => {
4040
return Object.entries(downloads).filter(
4141
([_, download]) =>
42-
download.status === 'downloading' ||
43-
download.status === 'extracting' ||
44-
download.status === 'syncing' ||
45-
(download.type === 'ibd' && download.progress < 100)
42+
(download.status === 'downloading' ||
43+
download.status === 'extracting') &&
44+
download.type !== 'ibd'
4645
);
4746
}, [downloads]);
4847

@@ -111,12 +110,10 @@ const DownloadModal = memo(() => {
111110
resetTimer();
112111
};
113112

114-
const unsubscribeDownload = electronAPI.onDownloadStarted(handleDownloadStarted);
115-
const unsubscribeSync = electronAPI.onBitcoinSyncStarted(handleDownloadStarted);
113+
const unsubscribe = electronAPI.onDownloadStarted(handleDownloadStarted);
116114

117115
return () => {
118-
unsubscribeDownload();
119-
unsubscribeSync();
116+
unsubscribe();
120117
};
121118
}, [dispatch, resetTimer, isVisible]);
122119

‎src/components/FastWithdrawalModal.js

+70-53
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
import { useState } from 'react';
3131
import { useDispatch, useSelector } from 'react-redux';
3232
import { hideFastWithdrawalModal } from '../store/fastWithdrawalModalSlice';
33+
import { X, Clipboard } from 'lucide-react';
3334
import styles from './FastWithdrawalModal.module.css';
3435

3536
const FastWithdrawalModal = () => {
@@ -131,8 +132,14 @@ const FastWithdrawalModal = () => {
131132

132133
if (!isVisible) return null;
133134

135+
const handleOverlayClick = e => {
136+
if (e.target === e.currentTarget) {
137+
handleClose();
138+
}
139+
};
140+
134141
return (
135-
<div className={styles.modalOverlay}>
142+
<div className={styles.modalOverlay} onClick={handleOverlayClick}>
136143
<div className={styles.modalContent}>
137144
<div className={styles.modalHeader}>
138145
<h2>Fast Withdrawal</h2>
@@ -141,7 +148,7 @@ const FastWithdrawalModal = () => {
141148
onClick={handleClose}
142149
className={styles.closeButton}
143150
>
144-
×
151+
<X size={20} />
145152
</button>
146153
</div>
147154
<div className={styles.modalDescription}>
@@ -169,8 +176,9 @@ const FastWithdrawalModal = () => {
169176
type="button"
170177
onClick={() => handlePaste(setAmount)}
171178
className={styles.pasteButton}
179+
title="Paste from clipboard"
172180
>
173-
Paste
181+
<Clipboard size={18} />
174182
</button>
175183
</div>
176184
</div>
@@ -188,38 +196,41 @@ const FastWithdrawalModal = () => {
188196
type="button"
189197
onClick={() => handlePaste(setAddress)}
190198
className={styles.pasteButton}
199+
title="Paste from clipboard"
191200
>
192-
Paste
201+
<Clipboard size={18} />
193202
</button>
194203
</div>
195204
</div>
196-
<div className={styles.horizontalInputs}>
197-
<div className={styles.inputGroup}>
198-
<label className={styles.inputLabel}>
199-
Select fast withdrawal server
200-
</label>
201-
<select
202-
value={selectedServer}
203-
onChange={(e) => setSelectedServer(e.target.value)}
204-
className={styles.input}
205-
>
206-
<option value="localhost">Localhost</option>
207-
<option value="192.168.1.100">192.168.1.100</option>
208-
<option value="192.168.1.101">192.168.1.101</option>
209-
</select>
210-
</div>
211-
<div className={styles.inputGroup}>
212-
<label className={styles.inputLabel}>
213-
Select L2 to withdraw from
214-
</label>
215-
<select
216-
value={layer2Chain}
217-
onChange={(e) => setLayer2Chain(e.target.value)}
218-
className={styles.input}
219-
>
220-
<option value="Thunder">Thunder</option>
221-
<option value="BitNames">BitNames</option>
222-
</select>
205+
<div className={styles.formGroup}>
206+
<div className={styles.horizontalInputs}>
207+
<div className={styles.inputGroup}>
208+
<label className={styles.inputLabel}>
209+
Select fast withdrawal server
210+
</label>
211+
<select
212+
value={selectedServer}
213+
onChange={(e) => setSelectedServer(e.target.value)}
214+
className={styles.input}
215+
>
216+
<option value="localhost">Localhost</option>
217+
<option value="192.168.1.100">192.168.1.100</option>
218+
<option value="192.168.1.101">192.168.1.101</option>
219+
</select>
220+
</div>
221+
<div className={styles.inputGroup}>
222+
<label className={styles.inputLabel}>
223+
Select L2 to withdraw from
224+
</label>
225+
<select
226+
value={layer2Chain}
227+
onChange={(e) => setLayer2Chain(e.target.value)}
228+
className={styles.input}
229+
>
230+
<option value="Thunder">Thunder</option>
231+
<option value="BitNames">BitNames</option>
232+
</select>
233+
</div>
223234
</div>
224235
</div>
225236
<div className={styles.buttonGroup}>
@@ -264,33 +275,39 @@ const FastWithdrawalModal = () => {
264275
)}
265276
{!isCompleted && (
266277
<form onSubmit={handleComplete}>
267-
<div className={styles.inputGroup}>
268-
<div className={styles.inputWithPaste}>
269-
<input
270-
type="text"
271-
value={paymentTxid}
272-
onChange={(e) => setPaymentTxid(e.target.value)}
273-
placeholder="Enter payment transaction ID"
274-
className={styles.input}
275-
required
276-
/>
278+
<div className={styles.formGroup}>
279+
<div className={styles.inputGroup}>
280+
<label className={styles.inputLabel}>
281+
Payment Transaction ID
282+
</label>
283+
<div className={styles.inputWithPaste}>
284+
<input
285+
type="text"
286+
value={paymentTxid}
287+
onChange={(e) => setPaymentTxid(e.target.value)}
288+
placeholder="Enter payment transaction ID"
289+
className={styles.input}
290+
required
291+
/>
292+
<button
293+
type="button"
294+
onClick={() => handlePaste(setPaymentTxid)}
295+
className={styles.pasteButton}
296+
title="Paste from clipboard"
297+
>
298+
<Clipboard size={18} />
299+
</button>
300+
</div>
301+
</div>
302+
<div className={styles.buttonGroup}>
277303
<button
278-
type="button"
279-
onClick={() => handlePaste(setPaymentTxid)}
280-
className={styles.pasteButton}
304+
type="submit"
305+
className={styles.submitButton}
281306
>
282-
Paste
307+
Complete Withdrawal
283308
</button>
284309
</div>
285310
</div>
286-
<div className={styles.buttonGroup}>
287-
<button
288-
type="submit"
289-
className={styles.submitButton}
290-
>
291-
Complete Withdrawal
292-
</button>
293-
</div>
294311
</form>
295312
)}
296313
{successMessage && (

0 commit comments

Comments
 (0)