onramper widget

2 files changed, 38 insertions, 157 deletions

diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 7b81b797..02f5f9ea 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -84,54 +84,41 @@
 			<div class="flex justify-center lg:justify-start mb-8">
 				<Balance {user} />
 			</div>
-
+				<div class="space-y-8 mt-8">
 			{#if !user.balance}
-				<div class="mb-8">
 					<p class="text-secondary text-lg">
           {$t("user.welcome")}
 					</p>
-				</div>
-			{/if}
+      {/if}
 
-			<div class="flex gap-4 justify-center w-full">
-				<a href={`/${user.username}/receive`}>
-					<button
-						class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"
-					>
-						<div class="mx-auto flex">
-							<Icon icon="numpad" style="my-auto h-6 mr-2" />
-              <div class="my-auto mt-1">{$t("user.requestPayment")}</div>
-						</div>
-					</button>
-				</a>
-				<a href={`/scan`}>
-					<button
-						class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"
-					>
-						<div class="mx-auto flex">
-							<Icon icon="scan" style="my-auto h-6 mr-2" />
-              <div class="my-auto mt-1">{$t("user.send.scan")}</div>
-						</div>
-					</button>
-				</a>
+					<div class="flex gap-4 justify-center w-full">
+						<a href={`/${user.username}/receive`}>
+							<button
+								class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60 bg-black text-white"
+							>
+								<div class="mx-auto flex">
+									<Icon icon="numpad" style="my-auto h-6 mr-2 invert" />
+									<div class="my-auto mt-1">Request Payment</div>
+								</div>
+							</button>
+						</a>
 
-				{#if user.eligible}
-					<a href={`/buy`}>
-						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
-							<div class="mx-auto flex">
-								<!-- <Icon icon="plus" style="my-auto h-6 mr-2" /> -->
+							<a href={`/buy`}>
+								<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
+									<div class="mx-auto flex">
+										<!-- <Icon icon="plus" style="my-auto h-6 mr-2" /> -->
 
-								<img
-									src="/images/bitcoin.svg"
-									class="w-8 border-4 border-transparent mr-2"
-									alt="Bitcoin"
-								/>
-								<div class="my-auto mt-1">Buy Bitcoin</div>
-							</div>
-						</button>
-					</a>
-				{/if}
-			</div>
+										<img
+											src="/images/bitcoin.svg"
+											class="w-8 border-4 border-transparent mr-2"
+											alt="Bitcoin"
+										/>
+										<div class="my-auto mt-1">Buy Bitcoin</div>
+									</div>
+								</button>
+							</a>
+					</div>
+				</div>
 		</div>
 	{/if}
 
diff --git a/src/routes/(app)/buy/+page.svelte b/src/routes/(app)/buy/+page.svelte
index 22e7e9ec..05e003df 100644
--- a/src/routes/(app)/buy/+page.svelte
+++ b/src/routes/(app)/buy/+page.svelte
@@ -1,15 +1,6 @@
 <script>
-	import { enhance } from '$app/forms';
-	import { Icon, Lock, Card, Calendar, Spinner } from '$comp';
-	import { animatedRate } from '$lib/store';
-	import { f } from '$lib/utils';
-
-	export let data, form;
-
-	let { username, currency } = data.user;
-	let loading;
-
-	let amount, n, d, cvc;
+	import { Icon } from '$comp';
+  import { ONRAMPER } from '$env/static/private';
 </script>
 
 <div class="container px-4 max-w-xl mx-auto mt-10 space-y-5">
@@ -21,111 +12,14 @@
 
 	<div class="flex justify-center items-center">
 		<div class="shadow-xl rounded-3xl px-10 pt-5 pb-10 space-y-5 w-full mx-5">
-			<div class="relative">
-				<h1 class="text-2xl md:text-3xl font-semibold text-center">Buy Bitcoin</h1>
-			</div>
-			<p class="text-secondary text-center">Purchase up to $500 worth of Bitcoin</p>
-
-			{#if form?.message}
-				<div class="text-red-600 text-center">
-					{form.message}
-				</div>
-			{/if}
-
-			<form
-				method="POST"
-				class="flex flex-wrap gap-5 w-full p-5 mt-20"
-				use:enhance={() => {
-					loading = true;
-					return ({ update }) => update() && (loading = false);
-				}}
-			>
-				<input type="hidden" name="username" value={username} />
-
-				<label class="relative w-full flex flex-col">
-					<span class="font-bold mb-3">Amount</span>
-					<input
-						class="rounded-md peer pl-12 pr-2 py-2 border-2 border-gray-200 placeholder-gray-300"
-						type="text"
-						name="amount"
-						placeholder="&bull;&bull;&bull;"
-						bind:value={amount}
-					/>
-					<span
-						class="absolute bottom-[9px] left-0 translate-x-1/2 w-6 text-black peer-placeholder-shown:text-gray-300 
-          ">$</span
-					>
-				</label>
-
-				<label class="relative w-full flex flex-col">
-					<span class="font-bold mb-3">Card number</span>
-					<input
-						class="rounded-md peer pl-12 pr-2 py-2 border-2 border-gray-200 placeholder-gray-300"
-						type="text"
-						name="number"
-						placeholder="0000 0000 0000 0000"
-						bind:value={n}
-					/>
-					<Card />
-				</label>
-
-				<label class="relative flex-1 flex flex-col">
-					<span class="font-bold mb-3">Expire date</span>
-					<input
-						class="rounded-md peer pl-12 pr-2 py-2 border-2 border-gray-200 placeholder-gray-300"
-						type="text"
-						name="expiry"
-						placeholder="MM/YY"
-						bind:value={d}
-					/>
-					<Calendar />
-				</label>
-
-				<label class="relative flex-1 flex flex-col">
-					<span class="font-bold flex items-center gap-3 mb-3">
-						CVC/CVV
-						<span class="relative group">
-							<span
-								class="hidden group-hover:flex justify-center items-center px-2 py-1 text-xs absolute -right-2 transform translate-x-full -translate-y-1/2 w-max top-1/2 bg-black text-white"
-							>
-								3-digit number on the back of your card</span
-							>
-						</span>
-					</span>
-					<input
-						class="rounded-md peer pl-12 pr-2 py-2 border-2 border-gray-200 placeholder-gray-300"
-						type="text"
-						name="cvc"
-						placeholder="&bull;&bull;&bull;"
-						bind:value={cvc}
-					/>
-					<Lock />
-				</label>
-
-				<div class="w-full flex mt-8">
-					<button
-						class="bg-black text-white border rounded-full px-8 py-4 font-bold hover:opacity-80 mx-auto text-xl"
-						type="submit"
-						disabled={loading}
-					>
-						{#if loading}
-							<Spinner />
-						{:else}
-							Submit
-						{/if}
-					</button>
-				</div>
-			</form>
-
-			<div class="flex">
-				<div class="text-secondary flex mr-auto">
-					<div class="flex mr-1">
-						<div class="my-auto mr-1">1</div>
-						<img src="/images/bitcoin.svg" class="w-5 my-auto" alt="Bitcoin" />
-					</div>
-				</div>
-				<p class="text-secondary">3% credit card fee applies</p>
-			</div>
+			<iframe
+				style="border-radius: 4px; border: 1px solid #58585f; margin: auto;max-width: 420px"
+      src={`https://buy.onramper.com/?apiKey=${ONRAMPER}`}
+				height="630px"
+				width="420px"
+				title="Onramper widget"
+				allow="accelerometer; autoplay; camera; gyroscope; payment"
+			/>
 		</div>
 	</div>
 </div>