chore: Pretty POC (#7)

Pretty version of a POC based on this desing
https://www.figma.com/design/6SuccJpe6dEPrxWUfnenvk/Gopher-Wallet-PoC

CI/CD included

+ Closes #9

web/package.json

@@ -9,8 +9,7 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"test": "vitest",
-		"lint": "echo TODO",
-		"lint:temp": "prettier --check . && eslint .",
+		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
@@ -44,7 +43,7 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@floating-ui/dom": "1.6.5",
+		"@floating-ui/dom": "^1.6.5",
 		"date-fns": "^3.6.0",
 		"highlight.js": "11.9.0",
 		"mipd": "^0.0.7",

web/src/app.postcss

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

web/src/lib/components/Account.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { selectedProvider } from '$lib/stores/wallet';
+	import { type DrawerSettings, getDrawerStore } from '@skeletonlabs/skeleton';
+
+	$: address = $selectedProvider.provider.request({ method: 'eth_requestAccounts', params: [] });
+
+	export let promise: Promise<object>;
+
+	const drawerStore = getDrawerStore();
+
+	async function openSendDrawer() {
+		const data = await promise;
+
+		const drawerSettings: DrawerSettings = {
+			id: 'SendTokens',
+			width: 'w-[518px]',
+			position: 'right',
+			meta: {
+				...data.raw,
+				title: 'Send Tokens'
+			}
+		};
+		drawerStore.open(drawerSettings);
+	}
+</script>
+
+<div class="w-[1024px] h-full py-[15px] flex-col justify-start items-center gap-2.5 inline-flex">
+	<div
+		class="self-stretch h-[152px] px-[22px] py-[23px] bg-gray-200 dark:bg-gray-700 rounded-xl flex-col justify-start items-center gap-[34px] flex"
+	>
+		<div class="self-stretch justify-start items-start gap-2.5 inline-flex">
+			<div class="text-black dark:text-white text-xl font-medium font-['Inter'] leading-7">
+				Hello
+				{#await address}
+					0x....
+				{:then result}
+					{result[0]}
+				{:catch error}
+					- {JSON.stringify(error)}
+				{/await}
+			</div>
+		</div>
+		<div class="self-stretch justify-end items-start gap-2 inline-flex">
+			<div
+				class="p-2.5 bg-black dark:bg-gray-200 rounded-full justify-center items-center gap-2 flex"
+			>
+				<button
+					type="button"
+					class="text-white dark:text-black text-base font-medium font-['Inter'] leading-normal"
+					on:click={openSendDrawer}
+				>
+					Send
+				</button>
+			</div>
+		</div>
+	</div>
+</div>

web/src/lib/components/DrawerManager.svelte

@@ -0,0 +1,44 @@
+<script>
+	import { Drawer, getDrawerStore } from '@skeletonlabs/skeleton';
+	import SendTokensDrawer from '$lib/components/SendTokensDrawer.svelte';
+	import SubmitTokensDrawer from '$lib/components/SubmitTokensDrawer.svelte';
+
+	const drawerStore = getDrawerStore();
+	const close = () => {
+		drawerStore.close();
+	};
+
+	$: console.log($drawerStore);
+</script>
+
+<Drawer>
+	<div
+		class="w-full h-full bg-white dark:bg-gray-800 rounded-xl shadow border border-gray-300 dark:border-gray-600 flex-col justify-start items-start inline-flex"
+	>
+		<div
+			class="w-full h-16 p-5 bg-white dark:bg-gray-700 justify-start items-center gap-3 inline-flex"
+		>
+			<div class="grow shrink basis-0 flex-col justify-center items-start gap-1 inline-flex">
+				<div class="self-stretch justify-start items-center gap-2 inline-flex">
+					<div
+						class="text-neutral-900 dark:text-neutral-200 text-lg font-medium font-['Inter'] leading-normal"
+					>
+						{$drawerStore.meta.title || '(missing title)'}
+					</div>
+				</div>
+			</div>
+			<div class="p-0.5 rounded-md justify-center items-center gap-0.5 flex">
+				<button class="w-5 h-5 relative text-neutral-900 dark:text-neutral-200" on:click={close}
+					>x</button
+				>
+			</div>
+		</div>
+		{#if $drawerStore.id === 'SendTokens'}
+			<SendTokensDrawer />
+		{:else if $drawerStore.id === 'SubmitQuota'}
+			<SubmitTokensDrawer />
+		{:else}
+			<!-- (fallback contents) -->
+		{/if}
+	</div>
+</Drawer>

web/src/lib/components/Facepile.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	export let balances;
+	export let networks;
+
+	$: list = balances.reduce((previousValue, { balance, chainId }) => {
+		if (balance != '0') {
+			const network = networks.get(chainId); // not having types yet! { name, logoURI }
+			previousValue.push({
+				balance: BigInt(balance),
+				chainId,
+				name: network.name,
+				logo: network.logoURI
+			});
+		}
+		return previousValue;
+	}, []);
+</script>
+
+<div class="flex -space-x-2">
+	{#each list as item}
+		<img
+			class="inline-block size-8 rounded-full ring-white dark:ring-neutral-900"
+			src={item.logo}
+			alt={item.name}
+		/>
+	{/each}
+</div>

web/src/lib/components/Header.svelte

@@ -0,0 +1,32 @@
+<script>
+	import { AppBar, LightSwitch } from '@skeletonlabs/skeleton';
+</script>
+
+<AppBar class="bg-white dark:bg-gray-800">
+	<svelte:fragment slot="lead">
+		<div class="h-10 px-2.5 justify-start items-center gap-2.5 flex">
+			<div
+				class="w-10 h-10 relative bg-slate-200 dark:bg-slate-700 rounded-[500px] overflow-hidden"
+			>
+				<img
+					src="https://media1.tenor.com/m/zfhl02Fs4ZwAAAAC/raccoon-dancing-in-a-circle-raccoon-dancing.gif"
+					alt="Joke Logo"
+				/>
+			</div>
+			<div class="text-black dark:text-white text-xl font-medium font-['Inter'] leading-7">
+				Gopher Demo
+			</div>
+		</div>
+	</svelte:fragment>
+	<svelte:fragment slot="trail">
+		<LightSwitch />
+		<a
+			class="btn btn-sm variant-ghost-surface dark:text-white"
+			href="https://github.com/ChainSafe/gopher-ts"
+			target="_blank"
+			rel="noreferrer"
+		>
+			GitHub
+		</a>
+	</svelte:fragment>
+</AppBar>

web/src/lib/components/Portfolio.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import { fromWei } from 'web3-utils';
+	import Facepile from '$lib/components/Facepile.svelte';
+	import { getModalStore, type ModalSettings } from '@skeletonlabs/skeleton';
+	import TokenModal from '$lib/components/TokenModal.svelte';
+
+	export let promise: Promise<object>;
+
+	$: total = promise.then(({ tokens }) =>
+		tokens.reduce((p, c) => p + Number(fromWei(c.total, c.decimals)), 0)
+	);
+
+	const modalStore = getModalStore();
+
+	async function handleListClick(index: number) {
+		const data = await promise;
+		const token = data.tokens[index];
+
+		const modal: ModalSettings = {
+			type: 'component',
+			component: { ref: TokenModal },
+			title: token.name,
+			buttonTextCancel: 'close',
+			value: { networks: data.raw.networks, balances: token.balances },
+			meta: { icon: token.logoURI, sybol: token.symbol, decimals: token.decimals }
+		};
+		modalStore.trigger(modal);
+	}
+</script>
+
+<div class="w-[1024px] bg-gray-200 dark:bg-gray-800 flex flex-col items-center gap-4 rounded-xl">
+	<!-- Balance Section -->
+	<div class="w-full p-6 rounded-xl flex justify-between items-center relative py-9">
+		<div>
+			<div class="text-slate-800 dark:text-slate-200 text-lg font-normal text-left">Balance</div>
+			<div class="text-slate-800 dark:text-slate-200 text-4xl font-semibold">
+				{#await total}
+					<div class="placeholder h-11 w-40" />
+				{:then result}
+					${result.toFixed(2)}
+				{:catch error}
+					- {JSON.stringify(error)}
+				{/await}
+			</div>
+		</div>
+		<div
+			class="absolute right-0 top-0 bottom-0 w-[80%] bg-gradient-to-r from-transparent via-indigo-600 to-fuchsia-800 rounded-xl"
+		></div>
+	</div>
+	<!-- Portfolio Section -->
+	<div class="w-full flex flex-col gap-4 p-6 pt-3">
+		<div class="text-slate-800 dark:text-slate-200 text-2xl font-semibold text-left">Portfolio</div>
+		<div class="table-container">
+			<!-- Native Table Element -->
+			<table
+				class="table table-hover bg-white dark:bg-gray-800 text-slate-800 dark:text-slate-200 rounded-lg overflow-hidden"
+			>
+				<thead>
+					<tr class="bg-gray-100 dark:bg-gray-700 font-medium">
+						<th class="p-2">ASSET</th>
+						<th class="p-2">BALANCE</th>
+						<th class="p-2">DISTRIBUTION</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#await promise}
+						<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
+						{#each { length: 3 } as _}
+							<tr class="pt-2">
+								<td><div class="placeholder h-8" /></td>
+								<td><div class="placeholder h-8" /></td>
+								<td><div class="placeholder h-8" /></td>
+							</tr>
+						{/each}
+					{:then data}
+						{#each data.tokens as token, i}
+							<tr
+								class="pt-2 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
+								on:click={() => handleListClick(i)}
+							>
+								<td class="flex items-center gap-2 py-2">
+									<div
+										class="relative w-6 h-6 bg-gradient-to-b from-amber-500 to-amber-300 rounded-full overflow-hidden"
+									>
+										<img class="size-6" src={token.logoURI} alt={`${token.logoURI}-LOGO`} />
+									</div>
+									<div class="flex">
+										<div class="text-slate-800 dark:text-slate-200 text-base">{token.name}</div>
+									</div>
+								</td>
+								<td class="text-slate-700 dark:text-slate-300 text-base text-left">
+									{fromWei(token.total, token.decimals)}
+									{token.symbol}
+								</td>
+								<td class="text-slate-700 dark:text-slate-300 text-base">
+									<Facepile balances={token.balances} networks={data.raw.networks} />
+								</td>
+							</tr>
+						{/each}
+					{:catch error}
+						<p style="color: red">{error.message}</p>
+					{/await}
+				</tbody>
+			</table>
+		</div>
+	</div>
+</div>