load rate server side

3 files changed, 57 insertions, 61 deletions

diff --git a/src/components/Left.svelte b/src/components/Left.svelte
new file mode 100644
index 00000000..24ab927f
--- /dev/null
+++ b/src/components/Left.svelte
@@ -0,0 +1,16 @@
+<svg
+	class="w-5"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M15 19L8 12L15 5"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index 7b467105..3555688c 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { Icon } from '$comp';
+	import { Left, Icon } from '$comp';
 	import { selectedRate, user } from '$lib/store';
 	import { f, s, post, warning, sats } from '$lib/utils';
 	import { t } from '$lib/translations';
@@ -86,68 +86,47 @@
 </script>
 
 <div class="flex justify-center items-center mb-3 px-3">
-	{#if $selectedRate}
-		<div class="space-y-5">
-			<!-- amounts -->
-			<div class="text-center">
-				<div class="text-5xl md:text-6xl font-semibold tracking-widest mb-1">
-					{useFiat ? `${symbol}${amountFiat}` : amountSatsFormatted}<span
-						class="tracking-normal text-base font-normal">{useFiat ? $user.currency : 'SAT'}</span
-					>
-				</div>
-				<span class="text-secondary mr-1"
-					>{useFiat ? `${amountSatsConverted} SAT` : amountFiatConverted}</span
-				>
-				<button
-					on:click={() => {
-						if (useFiat) {
-							amountSats = parseInt((amountFiat / ($selectedRate / sats)).toFixed(0));
-						} else {
-							amountFiat =
-								(amountSats * ($selectedRate / sats)).toFixed(2) > 0.0
-									? (amountSats * ($selectedRate / sats)).toFixed(2)
-									: 0;
-						}
-						useFiat = !useFiat;
-					}}><Icon icon="swap" style="inline hover:opacity-80" /></button
+	<div class="space-y-5">
+		<div class="text-center">
+			<div class="text-5xl md:text-6xl font-semibold tracking-widest mb-1">
+				{useFiat ? `${symbol}${amountFiat}` : amountSatsFormatted}<span
+					class="tracking-normal text-base font-normal">{useFiat ? $user.currency : 'SAT'}</span
 				>
 			</div>
+			<span class="text-secondary mr-1"
+				>{useFiat ? `${amountSatsConverted} SAT` : amountFiatConverted}</span
+			>
+			<button
+				on:click={() => {
+					if (useFiat) {
+						amountSats = parseInt((amountFiat / ($selectedRate / sats)).toFixed(0));
+					} else {
+						amountFiat =
+							(amountSats * ($selectedRate / sats)).toFixed(2) > 0.0
+								? (amountSats * ($selectedRate / sats)).toFixed(2)
+								: 0;
+					}
+					useFiat = !useFiat;
+				}}><Icon icon="swap" style="inline hover:opacity-80" /></button
+			>
+		</div>
 
-			<!-- numpad -->
-			<div class="grid grid-cols-3 gap-2 w-full md:w-[300px] mx-auto">
-				{#each numPad as value}
-					{#if value === '<'}
-						<button
-							class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center hover:opacity-80"
-							on:click={() => handleInput(value)}
-						>
-							<svg
-								class="w-5"
-								width="24"
-								height="24"
-								viewBox="0 0 24 24"
-								fill="none"
-								xmlns="http://www.w3.org/2000/svg"
-							>
-								<path
-									d="M15 19L8 12L15 5"
-									stroke="currentColor"
-									stroke-width="2"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-								/>
-							</svg>
-						</button>
-					{:else}
-						<button
-							class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80"
-							on:click={() => handleInput(value)}>{value}</button
-						>
-					{/if}
-				{/each}
-			</div>
+		<div class="grid grid-cols-3 gap-2 w-full md:w-[300px] mx-auto">
+			{#each numPad as value}
+				{#if value === '<'}
+					<button
+						class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center hover:opacity-80"
+						on:click={() => handleInput(value)}
+					>
+          <Left />
+					</button>
+				{:else}
+					<button
+						class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80"
+						on:click={() => handleInput(value)}>{value}</button
+					>
+				{/if}
+			{/each}
 		</div>
-	{:else}
-		<div class="w-full md:w-[300px] h-[475px] md:h-[485px] animate-pulse bg-gray-400 rounded-xl" />
-	{/if}
+	</div>
 </div>
diff --git a/src/components/index.js b/src/components/index.js
index 48d5ecd0..59ee6f14 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,3 +1,4 @@
+export { default as Left } from './Left.svelte';
 export { default as Numpad } from './Numpad.svelte';
 export { default as Spinner } from './Spinner.svelte';
 export { default as Check } from './Check.svelte';