Problem: it's not easy for users to figure out how many Merits they should request

src/components/CalculateSats.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import { Button, buttonVariants } from '$lib/components/ui/button/index.js';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { getCuckPrice } from '@/helpers';
+	import { CalculatorSolid } from 'svelte-awesome-icons';
+
+	const dispatch = createEventDispatcher();
+
+	let hourly_rate: string = '';
+	let spent_minutes: string = '';
+
+	let cuckPrice: number | undefined = undefined;
+
+	let open = false;
+
+	$: calcSats = cuckPrice
+		? (((parseFloat(hourly_rate) * 100000000) / cuckPrice) * parseFloat(spent_minutes)) / 60
+		: undefined;
+
+	$: if (!cuckPrice) {
+		getCuckPrice().then((data) => {
+			if (data instanceof Error) {
+				console.error(data);
+			} else {
+				cuckPrice = data;
+			}
+		});
+	}
+
+	function sendResult() {
+		if (calcSats) {
+			dispatch('result', calcSats.toFixed(0));
+			open = false;
+		}
+	}
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Trigger class={buttonVariants({ variant: 'default', size: 'icon' })}
+		><CalculatorSolid /></Dialog.Trigger
+	>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>Calculate the sats</Dialog.Title>
+			<Dialog.Description
+				>Calculate the sats of the request according to your hour rate.</Dialog.Description
+			>
+		</Dialog.Header>
+		<Label for="hourly_rate">Hour rate</Label>
+		<Input bind:value={hourly_rate} id="hourly_rate" placeholder="? USD / hour" />
+		<Label for="spent_minutes">Working hours</Label>
+		<Input bind:value={spent_minutes} id="spent_minutes" placeholder="? minutes" />
+		{#if calcSats}
+			<div>Result: {calcSats.toFixed(0)} sats</div>
+		{/if}
+		<Button disabled={!calcSats} on:click={sendResult}>OK</Button>
+	</Dialog.Content>
+</Dialog.Root>

src/components/CreateMeritRequest.svelte

@@ -13,6 +13,7 @@
 	import { Terminal } from 'lucide-svelte';
 	import Todo from './Todo.svelte';
 	import { isValidUrl } from '@/event_helpers/rockets';
+	import CalculateSats from './CalculateSats.svelte';
 
 	export let rocketEvent: NDKEvent;
 
@@ -127,6 +128,7 @@
 				/>
 				{#if parseInt(sats, 10) > 0}<Label class="text-left">({merits.toString()} Merits)</Label>
 				{/if}
+				<CalculateSats on:result={(event) => (sats = event.detail)} />
 			</div>
 
 			<div class="flex items-center space-x-2">