Merge pull request #1153 from rainlanguage/01/13/25-add-sidebar-to-we…

…bapp Add Sidebar and Homepage to webapp
rainlanguage · Jan 20, 2025 · 60f6a45 · 60f6a45
2 parents 2bbc4f2 + 6ce0837
commit 60f6a45
Show file tree

Hide file tree

Showing 13 changed files with 191 additions and 32 deletions.
diff --git a/tauri-app/static/logo-dark.svg → ...i-components/src/lib/assets/logo-dark.svg b/tauri-app/static/logo-dark.svg → ...i-components/src/lib/assets/logo-dark.svg
diff --git a/tauri-app/static/logo-light.svg → ...-components/src/lib/assets/logo-light.svg b/tauri-app/static/logo-light.svg → ...-components/src/lib/assets/logo-light.svg
diff --git a/packages/ui-components/src/lib/components/License.svelte b/packages/ui-components/src/lib/components/License.svelte
@@ -0,0 +1,29 @@
+<script>
+	import { Heading, Text, BlockQuote } from '@rainlanguage/ui-components';
+	import Markdown from 'svelte-markdown';
+	import { onMount } from 'svelte';
+
+	let source = '';
+
+	onMount(async () => {
+		try {
+			const response = await fetch(
+				'https://raw.githubusercontent.com/rainlanguage/decentralicense/refs/heads/master/README.md'
+			);
+			if (response.ok) {
+				source = await response.text();
+			}
+		} catch {
+			source = '';
+		}
+	});
+</script>
+
+<Markdown
+	{source}
+	renderers={{
+		text: Text,
+		heading: Heading,
+		blockquote: BlockQuote
+	}}
+/>
diff --git a/packages/ui-components/src/lib/components/icon/RainLogo.svelte b/packages/ui-components/src/lib/components/icon/RainLogo.svelte
@@ -0,0 +1,54 @@
+<svg width="577" height="139" viewBox="0 0 577 139" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M514.246 38.408H531.526L575.942 101H558.79L514.246 38.408ZM557.382 38.408H574.406L529.99 101H512.966L557.382 38.408Z"
+		fill="#181818"
+	/>
+	<path
+		d="M485.035 102.28C479.062 102.28 473.558 100.829 468.523 97.9279C463.574 95.0266 459.649 91.1013 456.747 86.1519C453.931 81.1173 452.523 75.5706 452.523 69.5119C452.523 63.5386 453.931 58.0773 456.747 53.1279C459.649 48.1786 463.574 44.2959 468.523 41.4799C473.473 38.5786 478.891 37.1279 484.779 37.1279C490.326 37.1279 495.403 38.4933 500.011 41.2239C504.705 43.8693 508.417 47.5386 511.147 52.2319C513.878 56.8399 515.243 62.0026 515.243 67.7199C515.243 69.5973 515.158 71.3893 514.987 73.0959H459.947V62.7279H500.139C499.969 60.1679 499.115 57.8639 497.579 55.8159C496.129 53.6826 494.209 52.0613 491.819 50.9519C489.515 49.7573 486.998 49.1599 484.267 49.1599C480.683 49.1599 477.483 50.0133 474.667 51.7199C471.851 53.3413 469.675 55.7306 468.139 58.8879C466.603 61.9599 465.835 65.6719 465.835 70.0239C465.835 73.9493 466.646 77.4479 468.267 80.5199C469.889 83.5066 472.107 85.8533 474.923 87.5599C477.825 89.2666 481.153 90.1199 484.907 90.1199C488.918 90.1199 492.331 89.2666 495.147 87.5599C497.963 85.7679 499.713 83.3786 500.395 80.3919H514.475C513.451 87.0479 510.209 92.3813 504.747 96.3919C499.286 100.317 492.715 102.28 485.035 102.28Z"
+		fill="#181818"
+	/>
+	<path
+		d="M407.815 102.28C402.354 102.28 397.319 100.829 392.711 97.9282C388.103 95.0268 384.477 91.0588 381.831 86.0242C379.186 80.9895 377.863 75.5282 377.863 69.6402C377.863 63.7522 379.186 58.3335 381.831 53.3842C384.477 48.3495 388.103 44.3815 392.711 41.4801C397.319 38.5788 402.354 37.1282 407.815 37.1282C413.362 37.1282 418.141 38.4508 422.151 41.0961C426.247 43.7415 429.362 47.5388 431.495 52.4882C433.629 57.3521 434.695 63.0695 434.695 69.6402C434.695 76.2962 433.629 82.0988 431.495 87.0481C429.362 91.9121 426.247 95.6668 422.151 98.3121C418.141 100.957 413.362 102.28 407.815 102.28ZM410.887 88.7122C414.471 88.7122 417.714 87.9015 420.615 86.2802C423.517 84.5735 425.778 82.2695 427.399 79.3681C429.106 76.4668 429.959 73.2242 429.959 69.6402C429.959 66.0562 429.106 62.8562 427.399 60.0401C425.778 57.1388 423.517 54.8775 420.615 53.2561C417.714 51.5495 414.471 50.6962 410.887 50.6962C407.389 50.6962 404.189 51.5495 401.287 53.2561C398.386 54.9628 396.082 57.2668 394.375 60.1682C392.754 63.0695 391.943 66.2268 391.943 69.6402C391.943 73.1388 392.754 76.3388 394.375 79.2402C396.082 82.1415 398.386 84.4455 401.287 86.1522C404.189 87.8588 407.389 88.7122 410.887 88.7122ZM429.959 11.4001H444.295V101H429.959V11.4001Z"
+		fill="#181818"
+	/>
+	<path
+		d="M325.624 101H311.416V38.4079H325.624V101ZM356.216 67.0799C356.216 62.1306 354.808 58.2053 351.992 55.3039C349.261 52.3173 345.635 50.8239 341.112 50.8239C336.419 50.8239 332.664 52.3173 329.848 55.3039C327.032 58.2053 325.624 62.1306 325.624 67.0799H321.272C321.272 61.1066 322.211 55.8586 324.088 51.3359C326.051 46.7279 328.781 43.2293 332.28 40.8399C335.864 38.3653 339.96 37.1279 344.568 37.1279C349.859 37.1279 354.467 38.2799 358.392 40.5839C362.317 42.8026 365.304 46.0453 367.352 50.3119C369.485 54.5786 370.552 59.5706 370.552 65.2879V101H356.216V67.0799Z"
+		fill="#181818"
+	/>
+	<path
+		d="M299.339 38.4081V101H285.131V38.4081H299.339ZM292.299 27.6561C289.739 27.6561 287.563 26.7601 285.771 24.968C283.979 23.1761 283.083 21.0427 283.083 18.568C283.083 16.0934 283.979 13.96 285.771 12.1681C287.563 10.2907 289.739 9.35205 292.299 9.35205C294.859 9.35205 297.035 10.2907 298.827 12.1681C300.619 13.96 301.515 16.0934 301.515 18.568C301.515 21.0427 300.619 23.1761 298.827 24.968C297.035 26.7601 294.859 27.6561 292.299 27.6561Z"
+		fill="#181818"
+	/>
+	<path
+		d="M273.191 101H258.855V38.4079H273.191V101ZM236.711 102.28C231.249 102.28 226.215 100.829 221.607 97.9279C216.999 95.0266 213.372 91.0586 210.727 86.0239C208.081 80.9893 206.759 75.5279 206.759 69.6399C206.759 63.7519 208.081 58.3333 210.727 53.3839C213.372 48.3493 216.999 44.3813 221.607 41.4799C226.215 38.5786 231.249 37.1279 236.711 37.1279C242.257 37.1279 247.036 38.4506 251.047 41.0959C255.143 43.7413 258.257 47.5386 260.391 52.4879C262.524 57.3519 263.591 63.0693 263.591 69.6399C263.591 76.2959 262.524 82.0986 260.391 87.0479C258.257 91.9119 255.143 95.6666 251.047 98.3119C247.036 100.957 242.257 102.28 236.711 102.28ZM239.783 88.7119C243.367 88.7119 246.609 87.9013 249.511 86.2799C252.412 84.5733 254.673 82.2693 256.295 79.3679C258.001 76.4666 258.855 73.2239 258.855 69.6399C258.855 66.0559 258.001 62.8559 256.295 60.0399C254.673 57.1386 252.412 54.8773 249.511 53.2559C246.609 51.5493 243.367 50.6959 239.783 50.6959C236.284 50.6959 233.084 51.5493 230.183 53.2559C227.281 54.9626 224.977 57.2666 223.271 60.1679C221.649 63.0693 220.839 66.2266 220.839 69.6399C220.839 73.1386 221.649 76.3386 223.271 79.2399C224.977 82.1413 227.281 84.4453 230.183 86.1519C233.084 87.8586 236.284 88.7119 239.783 88.7119Z"
+		fill="#181818"
+	/>
+	<path
+		d="M169.936 38.4079H184.144V47.1119C185.936 44.0399 188.282 41.6079 191.184 39.8159C194.17 38.0239 197.456 37.1279 201.04 37.1279C202.832 37.1279 204.794 37.3839 206.928 37.8959V50.9519C204.453 50.3546 202.362 50.0559 200.656 50.0559C197.498 50.0559 194.682 50.7386 192.208 52.1039C189.733 53.4693 187.77 55.4746 186.32 58.1199C184.869 60.7653 184.144 63.9226 184.144 67.5919V101H169.936V38.4079Z"
+		fill="#181818"
+	/>
+	<path
+		d="M83.1001 115.265C83.1001 131.025 73.8772 138.105 62.5002 138.105C51.1231 138.105 41.9002 131.025 41.9002 115.265C41.9002 108.552 45.9116 99.031 50.4687 90.6148C56.7107 79.0871 62.5002 69.0512 62.5002 69.0512C62.5002 69.0512 68.2897 79.0871 74.5316 90.6148C79.0887 99.031 83.1001 108.552 83.1001 115.265Z"
+		fill="#0038C9"
+	/>
+	<path
+		d="M41.9002 22.8396C41.9002 7.07977 51.1231 1.00185e-06 62.5002 0C73.8772 -1.00185e-06 83.1001 7.07977 83.1001 22.8396C83.1001 29.5532 79.0887 39.0738 74.5316 47.49C68.2897 59.0178 62.5002 69.0537 62.5002 69.0537C62.5002 69.0537 56.7107 59.0177 50.4687 47.49C45.9116 39.0738 41.9002 29.5532 41.9002 22.8396Z"
+		fill="#6E95F9"
+	/>
+	<path
+		d="M33.0668 110.129C19.517 118.009 8.81865 113.503 3.13014 103.579C-2.55838 93.6544 -1.08289 82.0691 12.4668 74.1892C18.239 70.8324 28.4302 69.5713 37.9447 69.3385C50.9768 69.0197 62.5001 69.0521 62.5001 69.0521C62.5001 69.0521 56.7663 79.1205 49.9761 90.3293C45.0187 98.5127 38.8389 106.772 33.0668 110.129Z"
+		fill="#164CD6"
+	/>
+	<path
+		d="M91.9333 27.9759C105.483 20.096 116.181 24.6015 121.87 34.5261C127.558 44.4506 126.083 56.0359 112.533 63.9158C106.761 67.2726 96.5699 68.5337 87.0554 68.7665C74.0233 69.0853 62.5 69.0529 62.5 69.0529C62.5 69.0529 68.2337 58.9846 75.0239 47.7757C79.9813 39.5923 86.1612 31.3327 91.9333 27.9759Z"
+		fill="#8BABFF"
+	/>
+	<path
+		d="M12.4668 63.9145C-1.08294 56.0346 -2.55843 44.4493 3.13009 34.5247C8.8186 24.6002 19.517 20.0946 33.0667 27.9745C38.8388 31.3313 45.0187 39.5909 49.9761 47.7743C56.7663 58.9832 62.5 69.0515 62.5 69.0515C62.5 69.0515 50.9767 69.084 37.9446 68.7651C28.4301 68.5323 18.2389 67.2713 12.4668 63.9145Z"
+		fill="#3D6BE1"
+	/>
+	<path
+		d="M112.533 74.1892C126.083 82.0691 127.558 93.6544 121.87 103.579C116.181 113.503 105.483 118.009 91.9333 110.129C86.1612 106.772 79.9813 98.5127 75.0239 90.3293C68.2337 79.1205 62.5001 69.0521 62.5001 69.0521C62.5001 69.0521 74.0233 69.0197 87.0554 69.3385C96.5699 69.5713 106.761 70.8324 112.533 74.1892Z"
+		fill="#AEC4FF"
+	/>
+</svg>
diff --git a/packages/ui-components/src/lib/index.ts b/packages/ui-components/src/lib/index.ts
@@ -58,6 +58,8 @@ export { default as VaultBalanceChart } from './components/charts/VaultBalanceCh
 export { default as VaultDetail } from './components/detail/VaultDetail.svelte';
 export { default as InputToken } from './components/input/InputToken.svelte';
 export { default as CodeMirrorDotrain } from './components/CodeMirrorDotrain.svelte';
+export { default as License } from './components/License.svelte';
+export { default as ButtonDarkMode } from './components/ButtonDarkMode.svelte';
 
 //Types
 export type { AppStoresInterface } from './types/appStores.ts';
@@ -95,3 +97,7 @@ export { lightCodeMirrorTheme, darkCodeMirrorTheme } from './utils/codeMirrorThe
 // Stores
 export { mockConfigSource } from './__mocks__/settings';
 export { mockSettingsStore } from './__mocks__/settings';
+
+// Assets
+export { default as logoLight } from './assets/logo-light.svg';
+export { default as logoDark } from './assets/logo-dark.svg';
diff --git a/packages/ui-components/test-setup.ts b/packages/ui-components/test-setup.ts
@@ -1 +1,7 @@
 import '@testing-library/jest-dom/vitest';
+import { vi } from 'vitest';
+
+vi.mock('codemirror-rainlang', () => ({
+	RainlangLR: vi.fn()
+}));
+
diff --git a/packages/webapp/src/lib/components/Sidebar.svelte b/packages/webapp/src/lib/components/Sidebar.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+	import {
+		Sidebar,
+		SidebarGroup,
+		SidebarItem,
+		SidebarWrapper,
+		SidebarBrand
+	} from 'flowbite-svelte';
+	import { WalletSolid, ReceiptSolid, FileLinesSolid, PlusOutline } from 'flowbite-svelte-icons';
+	import { page } from '$app/stores';
+	import {
+		ButtonDarkMode,
+		IconTelegram,
+		IconExternalLink,
+		logoDark,
+		logoLight
+	} from '@rainlanguage/ui-components';
+
+	export let colorTheme;
+</script>
+
+<Sidebar activeUrl={$page.url.pathname} asideClass="w-64 fixed z-10">
+	<SidebarWrapper divClass="overflow-y-auto py-11 px-3 bg-gray-100 dark:bg-gray-800 min-h-screen">
+		<SidebarGroup ulClass="">
+			<SidebarBrand
+				site={{
+					name: '',
+					href: '/',
+					img: $colorTheme == 'light' ? logoLight : logoDark
+				}}
+				imgClass="m-auto"
+			></SidebarBrand>
+		</SidebarGroup>
+		<SidebarGroup border>
+			<SidebarItem label="Deploy" href="/deploy">
+				<svelte:fragment slot="icon">
+					<PlusOutline class="h-5 w-5" />
+					<span data-testid="sidebar-deploy"></span>
+				</svelte:fragment>
+			</SidebarItem>
+		</SidebarGroup>
+		<SidebarGroup border>
+			<SidebarItem label="Orders" href="/orders">
+				<svelte:fragment slot="icon">
+					<ReceiptSolid class="h-5 w-5" />
+					<span data-testid="sidebar-orders"></span>
+				</svelte:fragment>
+			</SidebarItem>
+			<SidebarItem label="Vaults" href="/vaults">
+				<svelte:fragment slot="icon">
+					<WalletSolid class="h-5 w-5" />
+					<span data-testid="sidebar-vaults"></span>
+				</svelte:fragment>
+			</SidebarItem>
+		</SidebarGroup>
+		<SidebarGroup border>
+			<SidebarItem
+				label="Documentation"
+				target="_blank"
+				href="https://docs.rainlang.xyz/raindex/overview"
+			>
+				<svelte:fragment slot="icon">
+					<IconExternalLink />
+					<span data-testid="sidebar-documentation"></span>
+				</svelte:fragment>
+			</SidebarItem>
+			<SidebarItem label="Ask for help" target="_blank" href="https://t.me/+W0aQ36ptN_E2MjZk">
+				<svelte:fragment slot="icon">
+					<IconTelegram />
+					<span data-testid="sidebar-telegram"></span>
+				</svelte:fragment>
+			</SidebarItem>
+			<SidebarItem label="License" href="/license">
+				<svelte:fragment slot="icon">
+					<FileLinesSolid />
+					<span data-testid="sidebar-license"></span>
+				</svelte:fragment>
+			</SidebarItem>
+		</SidebarGroup>
+		<SidebarGroup border class="flex justify-start">
+			<ButtonDarkMode {colorTheme} />
+		</SidebarGroup>
+	</SidebarWrapper>
+</Sidebar>
diff --git a/packages/webapp/src/routes/+layout.svelte b/packages/webapp/src/routes/+layout.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import '../app.css';
 	import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
-
+	import Sidebar from '$lib/components/Sidebar.svelte';
+	import { colorTheme } from '$lib/darkMode';
 	const queryClient = new QueryClient({
 		defaultOptions: {
 			queries: {
@@ -13,7 +14,8 @@
 
 <QueryClientProvider client={queryClient}>
 	<div class="flex min-h-screen w-full justify-start bg-white dark:bg-gray-900 dark:text-gray-400">
-		<main class="h-full w-full grow overflow-x-auto p-8">
+		<Sidebar {colorTheme} />
+		<main class="ml-64 h-full w-full grow overflow-x-auto p-8">
 			<slot />
 		</main>
 	</div>

diff --git a/...webapp/src/routes/deployment/+page.svelte → ...ges/webapp/src/routes/deploy/+page.svelte b/...webapp/src/routes/deployment/+page.svelte → ...ges/webapp/src/routes/deploy/+page.svelte
diff --git a/packages/webapp/src/routes/license/+page.svelte b/packages/webapp/src/routes/license/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { License } from '@rainlanguage/ui-components';
+</script>
+
+<License />
diff --git a/packages/webapp/tailwind.config.ts b/packages/webapp/tailwind.config.ts
@@ -9,6 +9,8 @@ export default {
 		'../ui-components/**/*.{html,js,svelte,ts}'
 	],
 
+	darkMode: 'class',
+
 	theme: {
 		extend: {
 			fontFamily: {

diff --git a/tauri-app/src/routes/license/+page.svelte b/tauri-app/src/routes/license/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-  import License from './License.svelte';
+  import { License } from '@rainlanguage/ui-components';
 </script>
 
 <License />
diff --git a/tauri-app/src/routes/license/License.svelte b/tauri-app/src/routes/license/License.svelte