Merge pull request #323 from greymass/dev

Release

messages/en.json

@@ -148,5 +148,29 @@
 	"staking_network_title": "{network} Network Staking",
 	"staking_withdraw_timeframe": "Withdrawable in 21 days",
 	"test_locale_string": "This is a test",
-	"total_proceeds": "Total Proceeds"
+	"total_proceeds": "Total Proceeds",
+	"_500_per_day": "$500/day",
+	"buy_eos_with_coinbase": "Buy EOS with Coinbase",
+	"buy_or_transfer_crypto": "Buy or transfer EOS",
+	"coinbase_service_unavailable": "Coinbase service is currently unavailable.",
+	"debit_and_credit_cards_supported": "Debit and credit cards supported",
+	"details": "Details",
+	"exchanges": "Exchanges",
+	"fund_account": "Fund Account",
+	"fund_account_description": "Purchase EOS tokens to fund your account",
+	"limits": "Limits",
+	"must_be_logged_in_for_feature": "You must be logged in with an account to use this feature.",
+	"no_supported_funding_methods": "No supported funding methods for this blockchain.",
+	"processing_fees": "Processing fees",
+	"select_provider": "Select provider",
+	"tokens_purchase_providers": "Tokens can be purchased directly through the following providers:",
+	"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",
+	"common_must_be_logged_in": "You must be logged in with an account to use this feature.",
+	"common_exchanges": "Exchanges",
+	"fund_direct_purchase": "Purchase Directly",
+	"fund_direct_purchase_description": "Purchase EOS and have it directly send to your account using one of the platforms below.",
+	"fund_token_to_purchase": "Token to Purchase",
+	"fund_exchange_description": "EOS can be purchased through a number of platforms, depending on the users needs and location.\n\t\t\tBelow are some of the most popular options available."
 }

package.json

@@ -51,6 +51,7 @@
 		"@accuser/svelte-plausible-analytics": "^1.0.0",
 		"@coinbase/cbpay-js": "^2.4.0",
 		"@fontsource/jetbrains-mono": "^5.1.0",
+		"@sveltejs/enhanced-img": "^0.4.4",
 		"@tailwindcss/container-queries": "^0.1.1",
 		"@wharfkit/account": "^1.3.0",
 		"@wharfkit/account-creation-plugin-greymass": "^1.2.0",

src/app.html

@@ -12,6 +12,40 @@
 		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
 		<meta name="apple-mobile-web-app-title" content="Unicove" />
 		<link rel="manifest" href="/site.webmanifest" />
+		<style>
+			@font-face {
+				font-family: 'Inter';
+				font-style: normal;
+				font-weight: 400;
+				font-display: swap;
+				src: url('/fonts/inter/web-latin/Inter-Regular-subset.woff2?v=4.0') format('woff2');
+			}
+
+			@font-face {
+				font-family: 'Inter';
+				font-style: normal;
+				font-weight: 500;
+				font-display: swap;
+				src: url('/fonts/inter/web-latin/Inter-Medium-subset.woff2?v=4.0') format('woff2');
+			}
+
+			@font-face {
+				font-family: 'Inter';
+				font-style: normal;
+				font-weight: 600;
+				font-display: swap;
+				src: url('/fonts/inter/web-latin/Inter-SemiBold-subset.woff2?v=4.0') format('woff2');
+			}
+
+			@font-face {
+				font-family: 'Inter';
+				font-style: normal;
+				font-weight: 700;
+				font-display: swap;
+				src: url('/fonts/inter/web-latin/Inter-Bold-subset.woff2?v=4.0') format('woff2');
+			}
+		</style>
+		<link rel="preconnect" href="https://assets.wharfkit.com" />
 		%sveltekit.head%
 	</head>
 

src/lib/assets/unicove-wordmark.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	let props = $props();
+</script>
+
+<svg
+	class={props.class}
+	viewBox="0 0 256 44"
+	xmlns="http://www.w3.org/2000/svg"
+	width="256"
+	height="44"
+	fill="none"
+	><path
+		fill="#fff"
+		d="M43.803.732h5.688c8.429 0 16.12 3.195 21.95 8.452V.732h11.036V44H71.442V33.91c-.07-10.318-7.113-18.963-16.604-21.363V44H43.803V.732ZM11.035 24.098V.732H0v23.366C0 35.09 8.817 44 19.694 44c10.877 0 19.695-8.91 19.695-19.902V.732H28.353v23.366c0 4.833-3.876 8.75-8.659 8.75-4.782 0-8.659-3.917-8.659-8.75ZM186.597 44h-5.687V.732h11.035V32.18c9.416-2.409 16.384-11.028 16.384-21.292V.732h11.035v10.155c0 18.288-14.671 33.113-32.767 33.113ZM97.926.732V44H86.891V.732h11.035ZM256 .732h-32.222V44H256V32.849h-21.187v-4.907h14.634V16.79h-14.634v-4.907H256V.732Z"
+	/><path
+		fill="#fff"
+		fill-rule="evenodd"
+		d="M133.68 22.366c0-11.948 9.585-21.634 21.408-21.634s21.408 9.686 21.408 21.634S166.911 44 155.088 44s-21.408-9.686-21.408-21.634Zm21.408-10.482c-5.729 0-10.373 4.693-10.373 10.482 0 5.79 4.644 10.483 10.373 10.483 5.729 0 10.373-4.693 10.373-10.483 0-5.789-4.644-10.482-10.373-10.482Z"
+		clip-rule="evenodd"
+	/><path
+		fill="#fff"
+		d="M113.375 22.366c0-5.789 4.645-10.482 10.373-10.482h5.518V.732h-5.518c-11.823 0-21.408 9.686-21.408 21.634S111.925 44 123.748 44h5.518V32.849h-5.518c-5.728 0-10.373-4.693-10.373-10.483Z"
+	/></svg
+>

src/lib/components/accountswitch.svelte

@@ -17,6 +17,7 @@
 	import PlusIcon from 'lucide-svelte/icons/plus';
 	import { goto } from '$app/navigation';
 	import { languageTag } from '$lib/paraglide/runtime';
+	import { cn } from '$lib/utils/style';
 
 	const context = getContext<UnicoveContext>('state');
 
@@ -74,27 +75,12 @@
 	let logo = $derived(chainLogos.get(String(context.wharf.session?.chain.id)) || '');
 </script>
 
-<!-- [@media(any-hover:hover)]:hover:opacity-80 -->
-
 <!-- Trigger Button -->
 <button
-	class="
-	relative
-	z-50
-	h-10
-	text-nowrap
-	rounded-lg
-	border
-	border-mineShaft-600
-	text-base
-	font-medium
-	focus:outline-transparent
-	focus-visible:outline
-	focus-visible:ring-2
-	focus-visible:ring-inset
-	focus-visible:ring-solar-500
-	{className}
-	"
+	class={cn(
+		'relative z-50 h-10 text-nowrap rounded-lg border border-mineShaft-600 text-base font-medium focus:outline-transparent focus-visible:outline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-solar-500',
+		className
+	)}
 	use:melt={$trigger}
 	aria-label="account-switcher-label"
 	id="account-switcher"
@@ -107,6 +93,8 @@
 					src={String(logo)}
 					alt={context.wharf.session.chain.name}
 					class="size-full object-contain"
+					height="20"
+					width="20"
 				/>
 			</picture>
 			<span class="pointer-events-none z-10 text-base text-white/90"

src/lib/components/chart/chart-container.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	import Card from '../layout/box/card.svelte';
+	import Select from '../select/select.svelte';
+	import type { ExtendedSelectOption } from '../select/types';
+
+	interface Props {
+		pair: string;
+		currentPrice: string;
+		percentChange: string;
+		range: ExtendedSelectOption[];
+		selectedRange: ExtendedSelectOption;
+		children: Snippet;
+		startDate: string;
+		endDate?: string;
+	}
+
+	let {
+		pair,
+		currentPrice,
+		percentChange,
+		range,
+		selectedRange = $bindable(),
+		children,
+		startDate,
+		endDate = 'Today'
+	}: Props = $props();
+</script>
+
+<Card class="relative">
+	<header class="flex justify-between">
+		<div>
+			<p class="text-muted">{pair}</p>
+			<p class="text-xl font-semibold text-white">{currentPrice}</p>
+			<p class="text-muted">{percentChange}</p>
+		</div>
+		<Select id="range-select" options={range} bind:selected={selectedRange} />
+	</header>
+	<!-- w-99 is a hack to get responsive charts, w-full doesn't work -->
+	<div class="canvas-container relative h-auto w-[99%]">
+		{@render children()}
+	</div>
+	<hr class="h-px border-0 bg-shark-200/50" />
+	<div class="flex items-center justify-between font-medium">
+		<span class="text-muted">{startDate}</span>
+		<div class="flex gap-4">
+			<div class="flex items-center gap-1">
+				<div class="size-4 rounded bg-[#00ED97]"></div>
+				<span class="text-[#00ED97]">{pair}</span>
+			</div>
+		</div>
+		<span class="text-muted">{endDate}</span>
+	</div>
+</Card>

src/lib/components/chart/eospricehistory.svelte

@@ -1,15 +1,11 @@
-<!-- TODO: Make a generic line chart component that can be reused for different data sets -->
-<!-- Then this component would be a wrapper around that generic line chart component -->
-
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import dayjs from 'dayjs';
 	import { Chart } from 'chart.js';
 	import 'chart.js/auto';
-	import { Card, Stack } from '$lib/components/layout';
 	import { Asset } from '@wharfkit/antelope';
-	import Select from '../select/select.svelte';
 	import type { ExtendedSelectOption } from '../select/types';
+	import ChartContainer from './chart-container.svelte';
 
 	interface Props {
 		data: { date: Date; value: Asset }[];
@@ -81,8 +77,9 @@
 			options: {
 				normalized: true,
 				responsive: true,
+				maintainAspectRatio: false,
 				interaction: {
-					mode: 'x',
+					mode: 'nearest',
 					intersect: false
 				},
 				scales: {
@@ -121,27 +118,17 @@
 		chart.data.datasets[0].data = values;
 		chart.update();
 	});
+
+	let startDate = $derived(dataRange[dataRange.length - 1].date.toLocaleDateString());
 </script>
 
-<Card>
-	<header class="flex justify-between">
-		<Stack class="gap-0">
-			<p class="h4 font-semibold text-white/50">EOS/USD</p>
-			<p class="h3 font-semibold">{currentPrice}</p>
-			<p class="h4 font-semibold text-white/50">{percentChange}</p>
-		</Stack>
-		<Select id="range-select" options={range} bind:selected={selectedRange} />
-	</header>
+<ChartContainer
+	pair="EOS/USD"
+	{currentPrice}
+	{percentChange}
+	{startDate}
+	{range}
+	bind:selectedRange
+>
 	<canvas bind:this={ctx}></canvas>
-	<hr class="h-px border-0 bg-shark-200/50" />
-	<div class="flex items-center justify-between font-medium">
-		<span class="text-shark-200/70">{data[data.length - 1].date.toLocaleDateString()}</span>
-		<div class="flex gap-4">
-			<div class="flex items-center gap-1">
-				<div class="size-4 rounded bg-[#00ED97]"></div>
-				<span class="text-[#00ED97]">EOS/USD</span>
-			</div>
-		</div>
-		<span class="text-shark-200/70">Today</span>
-	</div>
-</Card>
+</ChartContainer>

src/lib/components/chart/rampricehistory.svelte

@@ -3,10 +3,9 @@
 	import dayjs from 'dayjs';
 	import { Chart } from 'chart.js';
 	import 'chart.js/auto';
-	import { Card } from '$lib/components/layout';
 	import { Asset } from '@wharfkit/antelope';
-	import Select from '../select/select.svelte';
 	import type { ExtendedSelectOption } from '../select/types';
+	import ChartContainer from './chart-container.svelte';
 
 	interface Props {
 		data: { date: Date; value: Asset }[];
@@ -78,8 +77,9 @@
 			options: {
 				normalized: true,
 				responsive: true,
+				maintainAspectRatio: false,
 				interaction: {
-					mode: 'x',
+					mode: 'nearest',
 					intersect: false
 				},
 				scales: {
@@ -118,27 +118,17 @@
 		chart.data.datasets[0].data = values;
 		chart.update();
 	});
+
+	let startDate = $derived(dataRange[dataRange.length - 1].date.toLocaleDateString());
 </script>
 
-<Card>
-	<header class="flex justify-between">
-		<div>
-			<p class="text-muted">EOS/RAM</p>
-			<p class="text-xl font-semibold text-white">{currentPrice}</p>
-			<p class="text-muted">{percentChange}</p>
-		</div>
-		<Select id="range-select" options={range} bind:selected={selectedRange} />
-	</header>
+<ChartContainer
+	pair="EOS/RAM"
+	{currentPrice}
+	{percentChange}
+	{startDate}
+	{range}
+	bind:selectedRange
+>
 	<canvas bind:this={ctx}></canvas>
-	<hr class="h-px border-0 bg-shark-200/50" />
-	<div class="flex items-center justify-between font-medium">
-		<span class="text-muted">{data[data.length - 1].date.toLocaleDateString()}</span>
-		<div class="flex gap-4">
-			<div class="flex items-center gap-1">
-				<div class="size-4 rounded bg-[#00ED97]"></div>
-				<span class="text-[#00ED97]">EOS/RAM</span>
-			</div>
-		</div>
-		<span class="text-muted">Today</span>
-	</div>
-</Card>
+</ChartContainer>

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/box/card.svelte

@@ -8,22 +8,24 @@
 		title?: string;
 		titleTag?: string;
 		children: Snippet;
+		tag?: string;
 	}
 
 	const {
 		class: className = '',
 		title = '',
 		titleTag = 'h3',
+		tag = 'div',
 		children,
 		...props
 	}: Props = $props();
 </script>
 
-<div class={cn('card', className)} {...props}>
+<svelte:element this={tag} class={cn('card', className)} {...props}>
 	{#if title}
 		<svelte:element this={titleTag} class="card-title h4">
 			{title}
 		</svelte:element>
 	{/if}
 	{@render children()}
-</div>
+</svelte:element>

src/lib/components/layout/grid.svelte

@@ -11,7 +11,7 @@
 		itemWidth?: string;
 	}
 
-	const { tag, children, itemWidth = '20ch', class: className, ...props }: Props = $props();
+	const { tag = 'div', children, itemWidth = '20ch', class: className, ...props }: Props = $props();
 </script>
 
 <svelte:element