Skip to content

Commit e960b48

Browse files
vdappdev2vdappdev2
committed
Add pagination and UI improvements for v0.1.0-beta.2
- Add pagination to marketplace search results - Add pagination to user active offers section - Add VerusIDX onboarding flow with conversion modals - Improve marketplace offer display and controls - Add chart controls and enhancements - Update component exports and layout improvements
1 parent 576935e commit e960b48

12 files changed

Lines changed: 2729 additions & 130 deletions

File tree

‎src-tauri/src/commands/mod.rs‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -604,7 +604,7 @@ pub async fn convert_currency(
604604
.map_err(|e| e.to_string())
605605
}
606606

607-
// Simplified conversion specifically for agents funding
607+
// Simplified conversion specifically for VerusIDX funding
608608
#[tauri::command]
609609
pub async fn convert_to_verusidx(
610610
from_address: String,
@@ -615,12 +615,9 @@ pub async fn convert_to_verusidx(
615615
) -> Result<Value, String> {
616616
let client_guard = state.active_client.read().await;
617617
let client = client_guard.as_ref().ok_or("No active RPC connection")?;
618-
619-
// Fixed target currency for agents funding
620-
// Testing configuration
621-
client.convert_currency(&from_address, &source_currency, amount, "agents", &to_address)
622-
// Production configuration
623-
// client.convert_currency(&from_address, &source_currency, amount, "VerusIDX", &to_address)
618+
619+
// Production configuration - convert to VerusIDX
620+
client.convert_currency(&from_address, &source_currency, amount, "VerusIDX", &to_address)
624621
.await
625622
.map(|opid| serde_json::Value::String(opid))
626623
.map_err(|e| e.to_string())

‎src/lib/components/EstimateConversionModal.svelte‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
<script lang="ts">
2+
import { invoke } from "@tauri-apps/api/core";
3+
import { Modal } from './cards';
4+
import { connectionStore, getChainParam } from "$lib/stores/connection";
5+
6+
interface Props {
7+
isOpen: boolean;
8+
onClose: () => void;
9+
}
10+
11+
let { isOpen = false, onClose }: Props = $props();
12+
13+
// Form state
14+
let currency = $state('');
15+
let amount = $state('');
16+
let estimateResult = $state<any>(null);
17+
let isEstimating = $state(false);
18+
let error = $state<string | null>(null);
19+
20+
// Connection state
21+
let connectionState = $state<any>(null);
22+
23+
connectionStore.subscribe(state => {
24+
connectionState = state;
25+
});
26+
27+
// Reset form when modal closes
28+
$effect(() => {
29+
if (!isOpen) {
30+
resetForm();
31+
}
32+
});
33+
34+
function resetForm() {
35+
currency = '';
36+
amount = '';
37+
estimateResult = null;
38+
error = null;
39+
}
40+
41+
async function handleEstimate(event: SubmitEvent) {
42+
event.preventDefault();
43+
44+
if (!currency || !amount || parseFloat(amount) <= 0) {
45+
error = 'Please select a currency and enter a valid amount';
46+
return;
47+
}
48+
49+
isEstimating = true;
50+
error = null;
51+
estimateResult = null;
52+
53+
try {
54+
const chainParam = getChainParam(connectionState?.selectedChain);
55+
const result = await invoke('estimate_conversion', {
56+
currency: currency,
57+
amount: parseFloat(amount),
58+
convertto: 'VerusIDX',
59+
via: null,
60+
chain: chainParam
61+
});
62+
63+
estimateResult = result;
64+
console.log('Estimate result:', result);
65+
66+
} catch (err) {
67+
error = typeof err === 'string' ? err : 'Failed to estimate conversion';
68+
console.error('Estimation error:', err);
69+
} finally {
70+
isEstimating = false;
71+
}
72+
}
73+
</script>
74+
75+
<Modal {isOpen} onclose={onClose} title="Estimate Conversion" size="md">
76+
<div class="p-6">
77+
<div class="mb-6">
78+
<p class="text-verusidx-mountain-grey dark:text-verusidx-mountain-mist">
79+
Calculate how much VerusIDX you'll receive for your VRSC or vUSDC.vETH
80+
</p>
81+
</div>
82+
83+
<!-- Error Display -->
84+
{#if error}
85+
<div class="mb-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
86+
<p class="text-red-700 dark:text-red-300">{error}</p>
87+
</div>
88+
{/if}
89+
90+
<!-- Form -->
91+
<form onsubmit={handleEstimate} class="space-y-4">
92+
<!-- Currency Selection -->
93+
<div>
94+
<label class="block text-sm font-medium text-verusidx-stone-dark dark:text-white mb-2">
95+
Currency to Convert *
96+
</label>
97+
<select
98+
bind:value={currency}
99+
required
100+
class="w-full p-3 border border-verusidx-mountain-mist dark:border-verusidx-stone-medium rounded-lg bg-white dark:bg-verusidx-stone-dark text-verusidx-stone-dark dark:text-white"
101+
>
102+
<option value="">Select currency...</option>
103+
<option value="VRSC">VRSC</option>
104+
<option value="vUSDC.vETH">vUSDC.vETH</option>
105+
</select>
106+
</div>
107+
108+
<!-- Amount Input -->
109+
<div>
110+
<label class="block text-sm font-medium text-verusidx-stone-dark dark:text-white mb-2">
111+
Amount *
112+
</label>
113+
<input
114+
type="number"
115+
step="any"
116+
bind:value={amount}
117+
required
118+
placeholder="Enter amount"
119+
class="w-full p-3 border border-verusidx-mountain-mist dark:border-verusidx-stone-medium rounded-lg bg-white dark:bg-verusidx-stone-dark text-verusidx-stone-dark dark:text-white"
120+
/>
121+
</div>
122+
123+
<!-- Convert To (info) -->
124+
<div class="bg-verusidx-sky-soft dark:bg-verusidx-stone-medium p-3 rounded-lg">
125+
<div class="text-sm text-verusidx-mountain-grey dark:text-verusidx-mountain-mist">
126+
<div class="flex justify-between">
127+
<span>Converting to:</span>
128+
<span class="font-semibold text-verusidx-stone-dark dark:text-white">VerusIDX</span>
129+
</div>
130+
</div>
131+
</div>
132+
133+
<!-- Estimate Button -->
134+
<button
135+
type="submit"
136+
disabled={isEstimating}
137+
class="w-full px-6 py-3 bg-verusidx-mountain-blue dark:bg-verusidx-turquoise-deep text-white rounded-lg hover:bg-verusidx-lake-blue dark:hover:bg-verusidx-turquoise-bright transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
138+
>
139+
{isEstimating ? 'Estimating...' : 'Estimate'}
140+
</button>
141+
</form>
142+
143+
<!-- Estimate Result -->
144+
{#if estimateResult}
145+
<div class="mt-6 p-4 bg-verusidx-forest-deep/10 dark:bg-verusidx-turquoise-deep/20 border border-verusidx-turquoise-light dark:border-verusidx-turquoise-bright rounded-lg">
146+
<h4 class="text-sm font-semibold text-verusidx-forest-deep dark:text-verusidx-turquoise-light mb-3">
147+
Estimated Result
148+
</h4>
149+
<div class="space-y-2 text-sm">
150+
<div class="flex justify-between items-center">
151+
<span class="text-verusidx-mountain-grey dark:text-verusidx-mountain-mist">You send:</span>
152+
<span class="font-mono text-verusidx-stone-dark dark:text-white">
153+
{parseFloat(amount).toFixed(8)} {currency}
154+
</span>
155+
</div>
156+
<div class="flex justify-between items-center">
157+
<span class="text-verusidx-mountain-grey dark:text-verusidx-mountain-mist">You receive (estimated):</span>
158+
<span class="font-mono font-semibold text-verusidx-forest-deep dark:text-verusidx-turquoise-light">
159+
~{estimateResult.estimatedcurrencyout?.toFixed(8) || '0.00000000'} VerusIDX
160+
</span>
161+
</div>
162+
{#if estimateResult.conversionfees}
163+
<div class="flex justify-between items-center pt-2 border-t border-verusidx-turquoise-light dark:border-verusidx-turquoise-deep">
164+
<span class="text-verusidx-mountain-grey dark:text-verusidx-mountain-mist text-xs">Conversion fees:</span>
165+
<span class="font-mono text-verusidx-mountain-grey dark:text-verusidx-mountain-mist text-xs">
166+
{estimateResult.conversionfees.toFixed(8)} VRSC
167+
</span>
168+
</div>
169+
{/if}
170+
</div>
171+
<p class="mt-3 text-xs text-verusidx-mountain-grey dark:text-verusidx-mountain-mist">
172+
This is an estimate. Actual amount may vary slightly based on blockchain conditions.
173+
</p>
174+
</div>
175+
{/if}
176+
177+
<!-- Close Button -->
178+
<button
179+
onclick={onClose}
180+
class="mt-6 w-full px-4 py-2 bg-verusidx-mountain-mist dark:bg-verusidx-stone-medium text-verusidx-stone-medium dark:text-verusidx-mountain-mist rounded-lg hover:bg-verusidx-mountain-grey dark:hover:bg-verusidx-stone-light transition-colors"
181+
>
182+
Close
183+
</button>
184+
</div>
185+
</Modal>

0 commit comments

Comments
 (0)