Merge pull request #294 from greymass/onramp

Initial onramp prototype

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",

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}

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'
+		}
+	};
+};

yarn.lock

@@ -1,6 +1,6 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
-# bun ./bun.lockb --hash: 9BBDEEEB6CB69D4A-550e21dc354bd49a-08ED7B8E89A3A5DC-082e3d5751a68393
+# bun ./bun.lockb --hash: 02680FA43BE52E3F-9e1c2b0460f4d634-DFFAE5B7F63C2D78-c85325782d6f62bd
 
 
 "@accuser/svelte-plausible-analytics@^1.0.0":
@@ -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/[email protected]":
   version "0.8.1"
   resolved "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz"