From 9567a46fcfacb118fc60fdc86b8ca304b12aefbc Mon Sep 17 00:00:00 2001
From: Aaron Cox <aaron@greymass.com>
Date: Mon, 2 Dec 2024 17:29:26 -0800
Subject: [PATCH] Initial onramp prototype

---
 package.json                                  |  1 +
 .../[network]/(account)/fund/+page.svelte     | 87 +++++++++++++++++++
 src/routes/[network]/(account)/fund/+page.ts  | 12 +++
 yarn.lock                                     |  5 ++
 4 files changed, 105 insertions(+)
 create mode 100644 src/routes/[network]/(account)/fund/+page.svelte
 create mode 100644 src/routes/[network]/(account)/fund/+page.ts

diff --git a/package.json b/package.json
index 038dd73f..04ed151c 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
 	"type": "module",
 	"dependencies": {
 		"@accuser/svelte-plausible-analytics": "^1.0.0",
+		"@coinbase/cbpay-js": "^2.4.0",
 		"@fontsource/jetbrains-mono": "^5.1.0",
 		"@tailwindcss/container-queries": "^0.1.1",
 		"@wharfkit/account": "^1.2.0",
diff --git a/src/routes/[network]/(account)/fund/+page.svelte b/src/routes/[network]/(account)/fund/+page.svelte
new file mode 100644
index 00000000..34036176
--- /dev/null
+++ b/src/routes/[network]/(account)/fund/+page.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+	import Code from '$lib/components/code.svelte';
+	import type { UnicoveContext } from '$lib/state/client.svelte';
+	import { getContext } from 'svelte';
+	import { initOnRamp, type CBPayInstanceType, type InitOnRampParams } from '@coinbase/cbpay-js';
+	import Button from '$lib/components/button/button.svelte';
+	import { env } from '$env/dynamic/public';
+	import * as m from '$lib/paraglide/messages';
+
+	const context = getContext<UnicoveContext>('state');
+
+	const options: InitOnRampParams | undefined = $derived.by(() => {
+		let appId = '';
+		let asset = '';
+		switch (String(context.network)) {
+			case 'eos':
+				if (env.PUBLIC_EOS_COINBASE_APPID && env.PUBLIC_EOS_COINBASE_ASSET) {
+					appId = env.PUBLIC_EOS_COINBASE_APPID;
+					asset = env.PUBLIC_EOS_COINBASE_ASSET;
+				}
+				break;
+			default:
+				// return undefined for an unsupported network
+				return;
+		}
+		return {
+			appId,
+			widgetParameters: {
+				addresses: {
+					[String(context.account?.name)]: ['eosio']
+				},
+				assets: [asset]
+			},
+			onSuccess: () => {
+				console.log('success');
+			},
+			experienceLoggedIn: 'popup',
+			experienceLoggedOut: 'popup',
+			closeOnExit: true,
+			closeOnSuccess: true
+		};
+	});
+
+	let coinbaseInstance: CBPayInstanceType | null = $state(null);
+
+	$effect(() => {
+		if (options && context.account?.name) {
+			initOnRamp(options, (error, instance) => {
+				if (error) {
+					console.error(error);
+					return;
+				}
+				if (instance) {
+					coinbaseInstance = instance;
+				}
+			});
+		} else {
+			coinbaseInstance = null;
+		}
+	});
+
+	function coinbase() {
+		if (coinbaseInstance) {
+			coinbaseInstance.open();
+		}
+	}
+</script>
+
+{#if !context.account}
+	<p>You must be logged in with an account to use this feature.</p>
+{:else if !coinbaseInstance}
+	<p>No supported funding methods for this blockchain.</p>
+{:else}
+	<Button onclick={coinbase}>Buy EOS with Coinbase</Button>
+{/if}
+
+{#if context.settings.data.debugMode}
+	<h3 class="h3">{m.common_debugging()}</h3>
+
+	<Code>
+		{JSON.stringify(options, null, 2)}
+	</Code>
+
+	<Code>
+		{JSON.stringify(coinbaseInstance, null, 2)}
+	</Code>
+{/if}
diff --git a/src/routes/[network]/(account)/fund/+page.ts b/src/routes/[network]/(account)/fund/+page.ts
new file mode 100644
index 00000000..1b17aa8c
--- /dev/null
+++ b/src/routes/[network]/(account)/fund/+page.ts
@@ -0,0 +1,12 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+	return {
+		title: 'Fund Account',
+		subtitle: 'Purchase EOS tokens to fund your account',
+		pageMetaTags: {
+			title: 'Fund Account',
+			description: 'Purchase EOS tokens to fund your account'
+		}
+	};
+};
diff --git a/yarn.lock b/yarn.lock
index 730d1150..ae26d9f9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -58,6 +58,11 @@
   resolved "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-4.20240725.0.tgz"
   integrity sha512-L6T/Bg50zm9IIACQVQ0CdVcQL+2nLkRXdPz6BsXF3SlzgjyWR5ndVctAbfr/HLV7aKYxWnnEZsIORsTWb+FssA==
 
+"@coinbase/cbpay-js@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.npmjs.org/@coinbase/cbpay-js/-/cbpay-js-2.4.0.tgz"
+  integrity sha512-7Zy1P6v5CTaBuFYowFmvKJ4KyBngVjsPpLkjSi4DWJhVHMgLIkDUINSloRU0Idgt2rFA/PLIm2gXneR3OoQbrA==
+
 "@cspotcode/source-map-support@0.8.1":
   version "0.8.1"
   resolved "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz"