Merge pull request #301 from greymass/dev

Next Release

package.json

@@ -52,7 +52,7 @@
 		"@coinbase/cbpay-js": "^2.4.0",
 		"@fontsource/jetbrains-mono": "^5.1.0",
 		"@tailwindcss/container-queries": "^0.1.1",
-		"@wharfkit/account": "^1.2.0",
+		"@wharfkit/account": "^1.3.0",
 		"@wharfkit/account-creation-plugin-greymass": "^1.2.0",
 		"@wharfkit/account-creation-plugin-metamask": "^1.1.1",
 		"@wharfkit/antelope": "^1.0.11",
@@ -63,6 +63,7 @@
 		"@wharfkit/session": "^1.4.0",
 		"@wharfkit/transact-plugin-resource-provider": "^1.1.1",
 		"@wharfkit/wallet-plugin-anchor": "^1.4.0",
+		"@wharfkit/wallet-plugin-cleos": "^1.2.0",
 		"@wharfkit/wallet-plugin-metamask": "^1.1.1",
 		"@wharfkit/wallet-plugin-privatekey": "^1.1.0",
 		"@wharfkit/wallet-plugin-scatter": "^1.5.1",

src/hooks.server.ts

@@ -37,6 +37,22 @@ function isNetwork(value: string) {
 	return isNetworkShortName(value);
 }
 
+const redirects: Record<string, string> = {
+	'/earn': '/staking',
+	'/resources/ram/buy': '/ram/buy',
+	'/resources/ram/sell': '/ram/sell'
+};
+
+function getManualRedirectPath(pathMore: string[]): string {
+	const pathname = '/' + pathMore.join('/');
+	return redirects[pathname];
+}
+
+function isManualRedirectPath(pathMore: string[]): boolean {
+	const pathname = '/' + pathMore.join('/');
+	return pathname in redirects;
+}
+
 export async function redirectHandle({ event, resolve }: HandleParams): Promise<Response> {
 	const { pathname, search } = new URL(event.request.url);
 
@@ -79,10 +95,15 @@ export async function redirectHandle({ event, resolve }: HandleParams): Promise<
 		url += `/${network}`;
 	}
 	if (pathMore.length > 0) {
-		url += `/${pathMore.join('/')}`;
+		if (isManualRedirectPath(pathMore)) {
+			url += getManualRedirectPath(pathMore);
+		} else {
+			url += `/${pathMore.join('/')}`;
+		}
 	}
 
 	if (pathname !== url) {
+		console.log('redirecting to', url + search);
 		return new Response(undefined, {
 			headers: { Location: url + search },
 			status: 301

src/lib/components/button/button.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { cn } from '$lib/utils';
 	import { emptyMeltElement, melt, type AnyMeltElement } from '@melt-ui/svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes, HTMLLinkAttributes } from 'svelte/elements';
@@ -7,7 +8,7 @@
 
 	interface ButtonProps extends HTMLAttributes {
 		href?: string;
-		variant?: 'primary' | 'secondary' | 'pill' | 'outline';
+		variant?: 'primary' | 'secondary' | 'pill';
 		disabled?: boolean;
 		active?: boolean;
 		blank?: boolean;
@@ -22,6 +23,7 @@
 		onclick,
 		variant = 'primary',
 		active,
+		class: className,
 		disabled = false,
 		...props
 	}: ButtonProps = $props();
@@ -41,37 +43,33 @@
 				}
 			: {}
 	);
+
+	const primaryStyles =
+		'relative inline-flex h-12 grow items-center justify-center text-nowrap rounded-lg bg-skyBlue-700 px-8 text-center text-base font-medium text-skyBlue-50 transition-all focus:outline-transparent focus-visible:outline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-solar-500 hover:active:bg-skyBlue-800 disabled:cursor-not-allowed disabled:bg-mineShaft-900 disabled:text-white/60 disabled:opacity-30 disabled:hover:bg-mineShaft-900 [@media(any-hover:hover)]:hover:bg-skyBlue-600';
+
+	const secondaryStyles =
+		'relative flex h-12 grow items-center justify-center text-nowrap rounded-lg px-8 text-center text-base font-medium text-skyBlue-400 ring-2 ring-inset ring-mineShaft-600 transition-all hover:ring-transparent focus-visible:outline-none focus-visible:ring-solar-500 hover:active:bg-mineShaft-950 hover:active:ring-mineShaft-900 disabled:cursor-not-allowed disabled:text-mineShaft-400 disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:ring-mineShaft-600 disabled:active:ring-mineShaft-600 [@media(any-hover:hover)]:hover:bg-mineShaft-900';
+
+	const pillStyles =
+		'relative inline-flex h-10 items-center justify-center text-nowrap rounded-full border-2 border-transparent px-5 text-center text-base font-medium leading-4 transition-all focus-visible:outline focus-visible:outline-2 focus-visible:outline-solar-500 hover:active:bg-mineShaft-950 aria-[current]:border-mineShaft-200/30 [@media(any-hover:hover)]:hover:bg-mineShaft-900 [@media(any-hover:hover)]:hover:text-mineShaft-100';
+
+	let styles = {
+		primary: primaryStyles,
+		secondary: secondaryStyles,
+		pill: pillStyles
+	};
 </script>
 
 <svelte:element
 	this={tag}
 	use:melt={$meltElement}
-	data-variant={variant}
-	class={props.class || ''}
+	class={cn(styles[variant], className)}
 	role={ariaRole}
 	aria-current={ariaCurrent}
 	{disabled}
 	{onclick}
 	{...props}
 	{...linkProps}
 >
-	<span>{@render props.children()}</span>
+	<span class="pointer-events-none relative text-inherit">{@render props.children()}</span>
 </svelte:element>
-
-<style lang="postcss">
-	[data-variant='primary'] {
-		@apply relative inline-flex h-12 grow items-center justify-center text-nowrap rounded-lg bg-skyBlue-700 px-8 text-center text-base font-medium text-skyBlue-50 transition-all focus:outline-transparent focus-visible:outline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-solar-500 hover:active:bg-skyBlue-800 disabled:cursor-not-allowed disabled:bg-mineShaft-900 disabled:text-white/60 disabled:opacity-30 disabled:hover:bg-mineShaft-900 [@media(any-hover:hover)]:hover:bg-skyBlue-600;
-	}
-
-	[data-variant='secondary'] {
-		@apply relative flex h-12 grow items-center justify-center text-nowrap rounded-lg px-8 text-center text-base font-medium text-skyBlue-400 ring-2 ring-inset ring-mineShaft-600 transition-all hover:ring-transparent focus-visible:outline-none focus-visible:ring-solar-500 hover:active:bg-mineShaft-950 hover:active:ring-mineShaft-900 disabled:cursor-not-allowed disabled:text-mineShaft-400 disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:ring-mineShaft-600 disabled:active:ring-mineShaft-600 [@media(any-hover:hover)]:hover:bg-mineShaft-900;
-	}
-
-	[data-variant='pill'] {
-		@apply relative inline-flex h-10 items-center justify-center text-nowrap rounded-full border-2 border-transparent px-5 text-center text-base font-medium leading-4 transition-all focus-visible:outline focus-visible:outline-2 focus-visible:outline-solar-500 hover:active:bg-mineShaft-950 aria-[current]:border-mineShaft-200/30 [@media(any-hover:hover)]:hover:bg-mineShaft-900 [@media(any-hover:hover)]:hover:text-mineShaft-100;
-	}
-
-	span {
-		@apply pointer-events-none relative text-inherit;
-	}
-</style>

src/lib/components/button/copy.svelte

@@ -5,14 +5,16 @@
 	import { browser } from '$app/environment';
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import { getContext } from 'svelte';
+	import { cn } from '$lib/utils';
 
 	const context = getContext<UnicoveContext>('state');
 
 	interface Props {
 		data: string;
+		slop?: boolean;
 	}
 
-	let props: Props = $props();
+	let { slop = true, ...props }: Props = $props();
 
 	let hint = $state(false);
 
@@ -26,6 +28,8 @@
 			if (context.settings.data.debugMode) console.error('Failed to copy text: ', err);
 		}
 	}
+
+	let buttonSize = $derived(slop ? 'size-12' : 'size-4');
 </script>
 
 <!-- Styled as a trailing element. Will need to change it if we want to use it inline with other elements following it.  -->
@@ -35,7 +39,10 @@
 	>
 		<button
 			onclick={copyToClipboard}
-			class="peer absolute left-1/2 top-1/2 size-12 -translate-x-1/2 -translate-y-1/2 focus-visible:outline-none"
+			class={cn(
+				'peer absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 focus-visible:outline-none',
+				buttonSize
+			)}
 			aria-label="Copy"
 		>
 			<!-- Button is done this way with absolute positioning so we can maintain a decent hit slop on mobile without affecting layout -->

src/lib/components/descriptionlist/dd.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	let props = $props();
+</script>
+
+<dd class="grow text-balance break-all text-right tabular-nums">{@render props.children()}</dd>

src/lib/components/descriptionlist/dl.svelte

@@ -3,8 +3,8 @@
 	import Dlrow from './dlrow.svelte';
 
 	type DescriptionItem = {
-		key: string;
-		value: string;
+		title: string;
+		description: string;
 	};
 
 	interface Props {
@@ -17,10 +17,8 @@
 
 <dl class="@container">
 	{#if props.items}
-		{#each props.items as item}
-			<Dlrow title={item.key}>
-				{item.value}
-			</Dlrow>
+		{#each props.items as { title, description }}
+			<Dlrow {title} {description} />
 		{/each}
 	{:else if props.children}
 		{@render props.children()}

src/lib/components/descriptionlist/dlrow.svelte

@@ -1,16 +1,29 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import DT from './dt.svelte';
+	import DD from './dd.svelte';
 
 	interface Props {
 		title: string;
-		children: Snippet;
+		description?: string;
+		children?: Snippet;
 	}
-	let { title, children }: Props = $props();
+
+	let { title = '', description, children }: Props = $props();
 </script>
 
 <div
 	class="flex flex-wrap items-center justify-between gap-x-4 border-b border-mineShaft-900 py-3 last:border-none @xs:flex-nowrap"
 >
-	<dt class="caption self-start text-nowrap">{title}</dt>
-	<dd class="grow text-balance break-all text-right tabular-nums">{@render children()}</dd>
+	<DT>{title}</DT>
+	<div
+		class="grow bg-red-500 before:content-['ERROR_Missing_DD_element_'] has-[dd]:bg-transparent has-[dd]:before:hidden"
+	>
+		{#if description}
+			<DD>{description}</DD>
+		{/if}
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
 </div>

src/lib/components/descriptionlist/dt.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	let props = $props();
+</script>
+
+<dt class="caption self-start text-nowrap">{@render props.children()}</dt>

src/lib/components/descriptionlist/index.ts

@@ -1,2 +1,4 @@
 export { default as DL } from './dl.svelte';
 export { default as DLRow } from './dlrow.svelte';
+export { default as DD } from './dd.svelte';
+export { default as DT } from './dt.svelte';

src/lib/components/elements/account.svelte

@@ -4,7 +4,7 @@
 	import type { HTMLAnchorAttributes } from 'svelte/elements';
 	import { createLinkPreview, melt, type CreateLinkPreviewProps } from '@melt-ui/svelte';
 	import { fly } from 'svelte/transition';
-	import { User } from 'lucide-svelte';
+	import { User, UserIcon } from 'lucide-svelte';
 	import { Name } from '@wharfkit/antelope';
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import { AccountState } from '$lib/state/client/account.svelte';
@@ -15,6 +15,7 @@
 		contract?: boolean;
 		children?: Snippet;
 		preview?: boolean;
+		icon?: boolean;
 	}
 
 	let { name, contract = false, preview = false, children, ...props }: Props = $props();
@@ -51,11 +52,14 @@
 <a
 	href={path}
 	class={cn(
-		'text-skyBlue-500 hover:text-skyBlue-400 focus-visible:outline focus-visible:outline-solar-500 ',
+		'inline-flex items-center gap-2 text-skyBlue-500 hover:text-skyBlue-400 focus-visible:outline focus-visible:outline-solar-500 ',
 		props.class
 	)}
 	use:melt={$trigger}
 >
+	{#if props.icon}
+		<UserIcon class="size-4" />
+	{/if}
 	{#if children}
 		{@render children()}
 	{:else}

src/lib/components/elements/action.svelte

@@ -1,13 +1,39 @@
 <script lang="ts">
+	import { type Action } from '@wharfkit/antelope';
 	import Code from '../code.svelte';
+	import { DL, DLRow, DD } from '../descriptionlist';
+	import { Stack } from '../layout';
+	import Account from './account.svelte';
 
 	interface Props {
-		data: Record<string, unknown>;
+		action: Action;
 	}
 
-	let props: Props = $props();
+	let { action }: Props = $props();
+
+	// const arr = action.authorization.map((auth) => [Account, auth]);
+	// let test = [Account];
 </script>
 
-{#if props.data}
-	<Code>{JSON.stringify(props.data, null, 2)}</Code>
+{#if action}
+	<div class="grid grid-cols-2 items-start gap-6">
+		<Code>{JSON.stringify(action.data, null, 2)}</Code>
+		<Stack class="gap-2">
+			<h3 class="h4">{String(action.name)}</h3>
+			<DL>
+				<DLRow title="Contract">
+					<DD>
+						<Account name={action.account} contract />
+					</DD>
+				</DLRow>
+				<DLRow title="Authorization">
+					{#each action.authorization as auth}
+						<DD>
+							<Account name={auth.actor}>{auth}</Account>
+						</DD>
+					{/each}
+				</DLRow>
+			</DL>
+		</Stack>
+	</div>
 {/if}