Funding page

messages/en.json

@@ -1,10 +1,14 @@
 {
 	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"_500_per_day": "$500/day",
 	"account_page": "Account Page",
 	"accounts_using_public_key": "Associated Accounts",
 	"active_session": "Active Session",
 	"block_height_numbered": "Block #{height}",
 	"block_height_numbered_description": "Block #{height} was produced by {producer} on {timestamp}, which included {transactions} transactions performing {actions} actions.",
+	"buy_eos_with_coinbase": "Buy EOS with Coinbase",
+	"buy_or_transfer_crypto": "Buy or transfer EOS",
+	"coinbase_service_unavailable": "Coinbase service is currently unavailable.",
 	"common_about_something": "About {thing}",
 	"common_action": "Action",
 	"common_amount_exceeds_balance": "Amount exceeds available balance.",
@@ -90,17 +94,26 @@
 	"contract_tables_view_title": "Table: {table}",
 	"contract_view_description": "An overview of the {contract} smart contract on the {network} network. This contract contains {actions} actions, {tables} tables, and {structs} structs.",
 	"contract_view_title": "Contract: {contract} | {network}",
+	"debit_and_credit_cards_supported": "Debit and credit cards supported",
 	"delegation_metadata_refund_description": "Claim previously delegated {network} tokens.",
 	"delegation_metadata_refund_title": "Refund Delegated {network} Tokens",
+	"details": "Details",
 	"error_loading_accounts": "Error loading accounts: {error}",
+	"exchanges": "Exchanges",
 	"form_validation_insufficient_balance": "Insufficient {unit} balance. Please enter a smaller amount.",
 	"form_validation_invalid_number_decimals": "Invalid number, too many decimal places.",
+	"fund_account": "Fund Account",
+	"fund_account_description": "Purchase EOS tokens to fund your account",
 	"key_page_description": "A public key associated with {accounts} account(s) on the {network} network.",
 	"key_page_subtitle": "The {accounts} account(s) associated with this public key",
 	"key_page_title": "Public Key",
 	"legacy_key": "Legacy Key",
+	"limits": "Limits",
 	"loading_accounts": "Loading accounts...",
+	"must_be_logged_in_for_feature": "You must be logged in with an account to use this feature.",
 	"no_accounts_found": "No accounts found",
+	"no_supported_funding_methods": "No supported funding methods for this blockchain.",
+	"processing_fees": "Processing fees",
 	"ram_available_balance": "RAM Available",
 	"ram_form_buy_amount": "Amount of RAM to buy:",
 	"ram_metadata_buy_description": "Exchange {token} for RAM on the {network} network using an {network} compatible wallet.",
@@ -114,6 +127,7 @@
 	"ram_to_purchase": "RAM to be bought",
 	"ram_to_sell": "RAM to be sold",
 	"search_view_type": "View {type}",
+	"select_provider": "Select provider",
 	"send_amount_to_send": "Amount to send",
 	"send_enter_amount": "Enter the amount of {token} to send",
 	"send_memo_placeholder": "Specify a public memo for this transfer (optional)",
@@ -148,5 +162,9 @@
 	"staking_network_title": "{network} Network Staking",
 	"staking_withdraw_timeframe": "Withdrawable in 21 days",
 	"test_locale_string": "This is a test",
-	"total_proceeds": "Total Proceeds"
+	"tokens_purchase_providers": "Tokens can be purchased directly through the following providers:",
+	"total_proceeds": "Total Proceeds",
+	"where_eos_can_be_purchased": "EOS can be purchased through a number of platforms, depending on the users needs and location.\n\tBelow are some of the most popular options available.",
+	"fund_account_seo_description": "Learn how to fund your account with EOS tokens through various methods including cryptocurrency exchanges and on-ramp providers.",
+	"token_purchase_providers": "Token Purchase Providers"
 }

src/lib/components/descriptionlist/dd.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
+	import { cn } from '$lib/utils/style';
+
 	let props = $props();
 </script>
 
-<dd class="grow text-balance break-all text-right tabular-nums">{@render props.children()}</dd>
+<dd class={cn('grow text-balance break-all text-right tabular-nums', props.class)}>
+	{@render props.children()}
+</dd>

src/lib/components/layout/page/multicard.svelte

@@ -4,6 +4,7 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
+		tag?: string;
 		children: Snippet;
 		class?: string;
 	}
@@ -13,8 +14,9 @@
 
 <!-- What we really need here is `grid-template-rows: masonry` which is still in draft spec -->
 <!-- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout -->
-<div
+<svelte:element
+	this={props.tag || 'div'}
 	class={cn('gap-6 *:mb-6 *:w-full *:break-inside-avoid last:*:mb-0 @2xl:columns-2', props.class)}
 >
 	{@render props.children()}
-</div>
+</svelte:element>

src/routes/[network]/(account)/fund/+page.svelte

@@ -1,15 +1,91 @@
 <script lang="ts">
+	import { getContext } from 'svelte';
+	import Card from '$lib/components/layout/box/card.svelte';
 	import Code from '$lib/components/code.svelte';
+	import binanceLogo from '$lib/assets/exchanges/binance.webp?enhanced';
+	import coinbaseIconLogo from '$lib/assets/exchanges/coinbase-icon.webp?enhanced';
+	import krakenLogo from '$lib/assets/exchanges/kraken.webp?enhanced';
+	import okxLogo from '$lib/assets/exchanges/okx.webp?enhanced';
+	import huobiLogo from '$lib/assets/exchanges/huobi.webp?enhanced';
+	import gateioLogo from '$lib/assets/exchanges/gate-io.webp?enhanced';
+	import upbitLogo from '$lib/assets/exchanges/upbit.webp?enhanced';
+	import kucoinLogo from '$lib/assets/exchanges/kucoin.webp?enhanced';
 	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';
+	import Grid from '$lib/components/layout/grid.svelte';
+	import { DL, DLRow, DD } from '$lib/components/descriptionlist';
+	import coinbaseLogo from '$lib/assets/exchanges/coinbase.svg';
+	import Stack from '$lib/components/layout/stack.svelte';
+	import MultiCard from '$lib/components/layout/page/multicard.svelte';
+	import Cluster from '$lib/components/layout/cluster.svelte';
+
+	const ON_RAMP_PROVIDERS = [
+		{
+			id: 'coinbase',
+			logo: coinbaseLogo,
+			fees: {
+				range: '1.49% - 3.99%'
+			},
+			limits: {
+				daily: m._500_per_day()
+			},
+			details: [m.buy_or_transfer_crypto(), m.debit_and_credit_cards_supported()],
+			action: {
+				text: m.buy_eos_with_coinbase(),
+				handler: 'coinbase'
+			}
+		}
+	] as const;
+
+	const EXCHANGES = [
+		{
+			name: 'Binance',
+			logo: binanceLogo,
+			url: 'https://www.binance.com'
+		},
+		{
+			name: 'Coinbase',
+			logo: coinbaseIconLogo,
+			url: 'https://www.coinbase.com'
+		},
+		{
+			name: 'Kraken',
+			logo: krakenLogo,
+			url: 'https://www.kraken.com'
+		},
+		{
+			name: 'OKX',
+			logo: okxLogo,
+			url: 'https://www.okx.com'
+		},
+		{
+			name: 'Huobi Global',
+			logo: huobiLogo,
+			url: 'https://global-aws.huobi.com'
+		},
+		{
+			name: 'Gate.io',
+			logo: gateioLogo,
+			url: 'https://www.gate.io'
+		},
+		{
+			name: 'Upbit',
+			logo: upbitLogo,
+			url: 'https://upbit.com'
+		},
+		{
+			name: 'Kucoin',
+			logo: kucoinLogo,
+			url: 'https://kucoin.com'
+		}
+	] as const;
 
 	const context = getContext<UnicoveContext>('state');
 
-	const options: InitOnRampParams | undefined = $derived.by(() => {
+	const coinbaseOptions: InitOnRampParams | undefined = $derived.by(() => {
 		let appId = '';
 		let asset = '';
 		switch (String(context.network)) {
@@ -20,7 +96,6 @@
 				}
 				break;
 			default:
-				// return undefined for an unsupported network
 				return;
 		}
 		return {
@@ -44,8 +119,8 @@
 	let coinbaseInstance: CBPayInstanceType | null = $state(null);
 
 	$effect(() => {
-		if (options && context.account?.name) {
-			initOnRamp(options, (error, instance) => {
+		if (coinbaseOptions && context.account?.name) {
+			initOnRamp(coinbaseOptions, (error, instance) => {
 				if (error) {
 					console.error(error);
 					return;
@@ -59,50 +134,105 @@
 		}
 	});
 
-	function coinbase() {
+	function handleCoinbaseOnRamp() {
 		if (coinbaseInstance) {
 			coinbaseInstance.open();
+		} else {
+			console.error('Coinbase instance not found');
+			alert(m.coinbase_service_unavailable());
 		}
 	}
+
+	function handleOnRamp(service: (typeof ON_RAMP_PROVIDERS)[number]['id']) {
+		if (!context.account) {
+			return;
+		}
+		if (service === 'coinbase') {
+			return handleCoinbaseOnRamp();
+		}
+		throw new Error(`${service} on-ramp has not been implemented`);
+	}
 </script>
 
-<h2 class="h2">Onramps</h2>
-<p>
-	After logging in with your EOS account, EOS tokens can be purchased directly from the following
-	platforms and the tokens will immediately be sent to your on-chain account.
-</p>
-{#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}
+<Stack class="gap-12">
+	<Stack>
+		<h2 class="h4">{m.token_purchase_providers()}</h2>
+
+		<Cluster tag="ul">
+			{#each ON_RAMP_PROVIDERS as service}
+				<Card tag="li" class="max-w-sm p-6">
+					<div>
+						<div class="mb-4 flex items-center justify-center">
+							<img src={service.logo} alt={service.id} class="h-24 w-3/5 object-contain" />
+						</div>
+						<DL>
+							<DLRow title={m.processing_fees()}>
+								<DD>
+									<p class="text-white">{service.fees.range}</p>
+								</DD>
+							</DLRow>
+							<DLRow title={m.limits()}>
+								<DD>
+									<p class="text-white">{service.limits.daily}</p>
+								</DD>
+							</DLRow>
+							<DLRow title={m.details()}>
+								{#each service.details as detail}
+									<DD class="text-white">{detail}</DD>
+								{/each}
+							</DLRow>
+						</DL>
+					</div>
+
+					<div class="mt-6">
+						{#if !context.account}
+							<p class="text-sm">{m.must_be_logged_in_for_feature()}</p>
+						{:else}
+							<Button variant="secondary" class="w-full" onclick={() => handleOnRamp(service.id)}
+								>{service.action.text}</Button
+							>
+						{/if}
+					</div>
+				</Card>
+			{/each}
+		</Cluster>
+	</Stack>
 
-<h2 class="h2">Exchanges</h2>
-<p>
-	EOS can be purchased through a number of platforms, depending on the users needs and location.
-	Below are some of the most popular options available.
-</p>
-<ul>
-	<li><a href="https://www.binance.com">https://www.binance.com</a></li>
-	<li><a href="https://www.coinbase.com">https://www.coinbase.com</a></li>
-	<li><a href="https://www.kraken.com">https://www.kraken.com</a></li>
-	<li><a href="https://www.okx.com">https://www.okx.com</a></li>
-	<li><a href="https://global-aws.huobi.com">https://global-aws.huobi.com</a></li>
-	<li><a href="https://www.gate.io">https://www.gate.io</a></li>
-	<li><a href="https://upbit.com">https://upbit.com</a></li>
-	<li><a href="https://kucoin.com">https://kucoin.com</a></li>
-</ul>
+	<Stack class="gap-4">
+		<h2 class="h4">{m.exchanges()}</h2>
 
-{#if context.settings.data.debugMode}
-	<h3 class="h3">{m.common_debugging()}</h3>
+		<p>{m.where_eos_can_be_purchased()}</p>
 
-	<Code>
-		{JSON.stringify(options, null, 2)}
-	</Code>
+		<Grid tag="ul" itemWidth="10rem" class="">
+			{#each EXCHANGES as exchange}
+				<Card tag="li" class="">
+					<a
+						href={exchange.url}
+						target="_blank"
+						rel="noopener noreferrer"
+						class="block h-full transition-all hover:scale-105"
+					>
+						<div class="mb-4 grid aspect-square rounded-lg bg-mineShaft-900 p-4">
+							<enhanced:img
+								src={exchange.logo}
+								alt="{exchange.name} logo"
+								class="h-full object-cover"
+							/>
+						</div>
+						<h3 class="text-center text-lg font-medium">{exchange.name}</h3>
+					</a>
+				</Card>
+			{/each}
+		</Grid>
+	</Stack>
 
-	<Code>
-		{JSON.stringify(coinbaseInstance, null, 2)}
-	</Code>
-{/if}
+	{#if context.settings.data.debugMode}
+		<h3 class="h3">{m.common_debugging()}</h3>
+		<Code>
+			{JSON.stringify(coinbaseOptions, null, 2)}
+		</Code>
+		<Code>
+			{JSON.stringify(coinbaseInstance, null, 2)}
+		</Code>
+	{/if}
+</Stack>

src/routes/[network]/(account)/fund/+page.ts

@@ -1,12 +1,13 @@
 import type { PageLoad } from './$types';
+import * as m from '$lib/paraglide/messages';
 
 export const load: PageLoad = async () => {
 	return {
-		title: 'Fund Account',
-		subtitle: 'Purchase EOS tokens to fund your account',
+		title: m.fund_account(),
+		subtitle: m.fund_account_description(),
 		pageMetaTags: {
-			title: 'Fund Account',
-			description: 'Purchase EOS tokens to fund your account'
+			title: m.fund_account(),
+			description: m.fund_account_seo_description()
 		}
 	};
 };