diff --git a/src/App.css b/src/App.css index 2e4dc00..85d4f74 100644 --- a/src/App.css +++ b/src/App.css @@ -192,6 +192,38 @@ color: #fff; } +.fee-toggle { + display: inline-flex; + border: 1px solid var(--border); + border-radius: 8px; + overflow: hidden; +} + +.fee-btn { + border: none; + background: none; + padding: 6px 16px; + font-size: 13px; + font-family: var(--sans); + font-weight: 500; + cursor: pointer; + color: var(--text); + transition: background 0.15s, color 0.15s; + + &:not(:last-child) { + border-right: 1px solid var(--border); + } + + &:hover:not(.fee-btn--active) { + background: var(--code-bg); + } +} + +.fee-btn--active { + background: var(--accent); + color: #fff; +} + .records-list { list-style: none; padding: 0; @@ -219,6 +251,14 @@ white-space: nowrap; } +.record-number-label { + font-weight: 700; + color: var(--text); + white-space: nowrap; + text-decoration: underline; + font-size: 14px; +} + .record-value { font-family: var(--mono); color: var(--text-h); diff --git a/src/App.tsx b/src/App.tsx index a15ba5d..633841c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -35,6 +35,7 @@ function App() { const [aleoClient, setAleoClient] = useState>(testnetAleoClient); const [network, setNetwork] = useState<'testnet' | 'mainnet'>('testnet'); const [joinStrategy, setJoinStrategy] = useState("basic"); + const [feePrivate, setFeePrivate] = useState(false); const [aleoAutoJoin, setAutoJoinClient] = useState(); const [privateKeyInput, setPrivateKeyInput] = useState(import.meta.env.VITE_DEFAULT_PKEY || ''); @@ -121,8 +122,8 @@ function App() { setError(null); setJoinLoading(true); try { - const newRecord = await aleoAutoJoin.joinRecords(records); - setRecords([newRecord]); + const newRecords = await aleoAutoJoin.joinRecords(records, feePrivate); + setRecords(newRecords); } catch (e: unknown) { if (e instanceof Error) { setError(`Join operation failed: ${e}`); @@ -233,7 +234,7 @@ function App() { onClick={() => { setLoading(true); setJoinStrategy("basic"); - setAutoJoinClient(new AutoJoinClient(aleoClient, aleoAccount!, BasicAutoJoinStrategy)); + setAutoJoinClient(new AutoJoinClient(aleoClient, aleoAccount!, getJoinStrategyClass("basic"))); setLoading(false); }} > @@ -245,13 +246,43 @@ function App() { onClick={() => { setLoading(true); setJoinStrategy("batch"); - setAutoJoinClient(new AutoJoinClient(aleoClient, aleoAccount!, BatchAutoJoinStrategy)); + setAutoJoinClient(new AutoJoinClient(aleoClient, aleoAccount!, getJoinStrategyClass("batch"))); setLoading(false); }} > Batch + +
+ + +
+ {/* {feePrivate && ( +
+ +
+ setPrivateFeeRecord(e.target.value)}/> +
+
+ )} */} +