From 926b1cd61d5bca6e6e9fd3420681d0829341a1e0 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Sat, 30 Jul 2022 12:59:47 -0600
Subject: add loading splash, start adding toast messages, qr code skeleton

---
 src/components/index.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/components/index.js')

diff --git a/src/components/index.js b/src/components/index.js
index febf8dac..e41c3d4c 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -7,3 +7,4 @@ export { default as Icon } from './Icon.svelte';
 export { default as Image } from './Image.svelte';
 export { default as RegisterOrLogin } from './RegisterOrLogin.svelte';
 export { default as AppHeader } from './AppHeader.svelte';
+export { default as LoadingSplash } from './LoadingSplash.svelte';
-- 
cgit v1.2.3


From dd4f645ba8839de54418b59f36119254338a447c Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Sat, 30 Jul 2022 14:00:08 -0600
Subject: add 404 component, remove duplicate redirects, loading splash, fix
 lgout

---
 src/components/404.svelte            |  16 ++
 src/components/index.js              |   1 +
 src/routes/[username]/index.svelte   |   4 +-
 src/routes/[username]/receive.svelte |  16 +-
 src/routes/__layout.svelte           |   3 +
 src/routes/invoice/[amount].svelte   | 336 -----------------------------------
 src/routes/invoice/[id].svelte       |  17 +-
 src/routes/logout/done.svelte        |   2 +-
 8 files changed, 36 insertions(+), 359 deletions(-)
 create mode 100644 src/components/404.svelte
 delete mode 100644 src/routes/invoice/[amount].svelte

(limited to 'src/components/index.js')

diff --git a/src/components/404.svelte b/src/components/404.svelte
new file mode 100644
index 00000000..503316bb
--- /dev/null
+++ b/src/components/404.svelte
@@ -0,0 +1,16 @@
+<script>
+	import { Icon } from '$comp';
+</script>
+
+<div class="flex justify-center items-center mt-20">
+	<div class="space-y-5 text-center">
+		<a href="/">
+			<Icon icon="logo" />
+		</a>
+
+		<Icon icon="question" style="mx-auto w-full" />
+
+		<h1 class="font-bold text-5xl">404</h1>
+		<p>Page not found.</p>
+	</div>
+</div>
diff --git a/src/components/index.js b/src/components/index.js
index e41c3d4c..53f0fe99 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -8,3 +8,4 @@ export { default as Image } from './Image.svelte';
 export { default as RegisterOrLogin } from './RegisterOrLogin.svelte';
 export { default as AppHeader } from './AppHeader.svelte';
 export { default as LoadingSplash } from './LoadingSplash.svelte';
+export { default as PageNotFound } from './404.svelte';
diff --git a/src/routes/[username]/index.svelte b/src/routes/[username]/index.svelte
index 91744aa3..90d0c04a 100644
--- a/src/routes/[username]/index.svelte
+++ b/src/routes/[username]/index.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { AppHeader, Icon } from '$comp';
+	import { AppHeader, Icon, PageNotFound } from '$comp';
 	import { user } from '$lib/store';
 	export let username;
 </script>
@@ -22,4 +22,6 @@
 			</div>
 		</div>
 	</div>
+{:else}
+	<PageNotFound />
 {/if}
diff --git a/src/routes/[username]/receive.svelte b/src/routes/[username]/receive.svelte
index 5865d5e5..50fddbed 100644
--- a/src/routes/[username]/receive.svelte
+++ b/src/routes/[username]/receive.svelte
@@ -1,23 +1,11 @@
 <script>
 	// in the future we will want to allow users to set their fiat currency in the settings
-	import { onMount } from 'svelte';
-	import { AppHeader, Icon, LoadingSplash } from '$comp';
+	import { AppHeader, Icon } from '$comp';
 	import { goto } from '$app/navigation';
 	import { invoiceAmount, invoiceAmountFiat, rate, user } from '$lib/store';
 	import { post } from '$lib/utils';
 	import { page } from '$app/stores';
 
-	onMount(async () => {
-		if (browser) {
-			let { default: toast } = await import('@zerodevx/svelte-toast');
-
-			if (!$user && typeof window !== 'undefined') {
-				window.location = '/login';
-				toast.push('Please login to continue.');
-			}
-		}
-	});
-
 	let useFiat = true;
 	let amountFiat = 0;
 	let amountSats = 0;
@@ -196,6 +184,4 @@
 			/>
 		{/if}
 	</div>
-{:else}
-	<LoadingSplash />
 {/if}
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 85f5a817..0b9a9a64 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -7,6 +7,7 @@
 	import { page, session } from '$app/stores';
 	import { browser } from '$app/env';
 	import { goto } from '$app/navigation';
+	import { LoadingSplash } from '$comp';
 
 	browser && ($token ||= $session.token);
 	let protectedRoutes = [/receive/];
@@ -27,4 +28,6 @@
 {#if ready}
 	<SvelteToast />
 	<slot />
+{:else}
+	<LoadingSplash />
 {/if}
diff --git a/src/routes/invoice/[amount].svelte b/src/routes/invoice/[amount].svelte
deleted file mode 100644
index 27140519..00000000
--- a/src/routes/invoice/[amount].svelte
+++ /dev/null
@@ -1,336 +0,0 @@
-<script>
-	import { browser } from '$app/env';
-	import { rate, user, invoiceAmount, invoiceAmountFiat } from '$lib/store';
-	import { Icon, LoadingSplash } from '$comp';
-	import { goto } from '$app/navigation';
-	import { onMount } from 'svelte';
-
-	export let text;
-	export let amount;
-
-	let tipPercent = 0;
-	const setRate = ($invoiceAmountFiat / $invoiceAmount) * 100000000;
-
-	$: tipAmount = customTipAmount
-		? customTipAmount < 0
-			? (customTipAmount = 0)
-			: customTipAmount
-		: ($invoiceAmountFiat / 100) * tipPercent;
-
-	$: tipAmountFormatted = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD'
-	}).format(tipAmount);
-
-	$: tipAmountSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
-		tipAmount / (setRate / 100000000)
-	);
-
-	$: totalAmountSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
-		$invoiceAmount + parseFloat(tipAmountSats.replace(/,/g, ''))
-	);
-
-	$: totalAmountFormatted = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD'
-	}).format($invoiceAmountFiat + tipAmount);
-
-	const invoiceAmountFormatted = new Intl.NumberFormat('en-US', {
-		maximumFractionDigits: 0
-	}).format($invoiceAmount);
-
-	const invoiceAmountFiatFormatted = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD'
-	}).format($invoiceAmountFiat);
-
-	let customTipAmount;
-
-	const tipAmounts = ['None', '10%', '15%', '20%'];
-
-	const handleTipButtonClick = (amount) => {
-		customTipAmount = '';
-		if (amount === 'None') {
-			tipPercent = 0;
-		} else {
-			tipPercent = amount.slice(0, 2);
-		}
-	};
-
-	const handleCustomTipAmount = (e) => {
-		tipPercent = 0;
-		customTipAmount = e.target.value;
-	};
-
-	onMount(async () => {
-		if (browser) {
-			let { default: QRCodeStyling } = await import('qr-code-styling');
-			let { default: toast } = await import('@zerodevx/svelte-toast');
-
-			if (!$user && typeof window !== 'undefined') {
-				toast.push('Please login to continue.');
-				window.location = '/login';
-			}
-
-			const qrCode = new QRCodeStyling({
-				width: window.screen.width < 640 ? 250 : 300,
-				type: 'svg',
-				data: text,
-				image: '/images/invoice.svg',
-				backgroundOptions: {
-					color: 'rgba(0, 0, 0, 0)'
-				},
-				dotsOptions: {
-					type: 'rounded'
-				},
-				imageOptions: {
-					hideBackgroundDots: false
-				}
-			});
-
-			qrCode.append(document.getElementById('qr'));
-		}
-	});
-
-	let showMobileTip = false;
-
-	const handleBackButton = () => {
-		if (showMobileTip) {
-			tipPercent = 0;
-			customInput.value = '';
-			customTipAmount = 0;
-			tipAmount = 0;
-			showMobileTip = false;
-		} else {
-			goto('/receive');
-		}
-	};
-
-	let customInput;
-
-	let qrSkeleton = true;
-	setTimeout(() => (qrSkeleton = false), 1000);
-</script>
-
-{#if $user}
-	<div class:full-shadow={showMobileTip}>
-		<button class="ml-5 md:ml-20 mt-5 md:mt-10" on:click={handleBackButton}>
-			<Icon icon="arrow-left" style="w-10" />
-		</button>
-
-		<div class="flex justify-center items-center mb-20 md:mt-[20px] px-3">
-			<div
-				class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24"
-			>
-				{#if $invoiceAmount && $invoiceAmountFiat && $rate && text}
-					<!-- tipping section  -->
-					<div
-						class="absolute {showMobileTip
-							? 'bottom-0'
-							: '-bottom-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 left-0 md:static text-center space-y-5"
-					>
-						<h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
-
-						<div>
-							<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
-								class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
-							>
-							<span class="block text-secondary text-sm">{tipPercent}%</span>
-						</div>
-
-						<input
-							id="slider"
-							type="range"
-							min="0"
-							max="100"
-							value={tipPercent}
-							class="px-2"
-							on:input={(e) => {
-								customTipAmount = '';
-								tipPercent = e.target.value;
-							}}
-						/>
-
-						<div>
-							{#each tipAmounts as amount}
-								<button
-									class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent ===
-										amount.slice(0, 2) ||
-									((tipPercent === 0 || tipPercent === '0') && amount === 'None')
-										? '!bg-black text-white'
-										: ''}"
-									on:click={() => handleTipButtonClick(amount)}>{amount}</button
-								>
-							{/each}
-
-							<div class="relative">
-								<span
-									class="absolute top-[20px] left-5 font-semibold {!customTipAmount
-										? 'opacity-50'
-										: 'opacity-100'}">$</span
-								>
-								<input
-									bind:this={customInput}
-									type="number"
-									min="0"
-									on:input={(e) => handleCustomTipAmount(e)}
-									class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
-									placeholder="Other"
-								/>
-								<button
-									class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
-										? !customTipAmount && !tipAmount
-											? 'opacity-50'
-											: 'opacity-100'
-										: !customTipAmount
-										? 'opacity-50'
-										: 'opacity-100'}"
-									disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
-									>Done</button
-								>
-							</div>
-						</div>
-					</div>
-
-					<div
-						class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
-						id="section-divider"
-					/>
-
-					<!-- invoice section -->
-					<div class="text-center space-y-5">
-						<button
-							class="block md:hidden bg-black {showMobileTip
-								? 'text-white/50'
-								: 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
-							on:click={() => (showMobileTip = true)}
-							disabled={showMobileTip}
-						>
-							<svg
-								width="24"
-								height="24"
-								class="mr-1"
-								viewBox="0 0 24 24"
-								fill="none"
-								xmlns="http://www.w3.org/2000/svg"
-							>
-								<path
-									d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
-									stroke="currentColor"
-									stroke-width="2"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-								/>
-							</svg> Add a tip
-						</button>
-
-						<span class="text-secondary block"
-							>Scan to pay <span class="text-black font-semibold">{$user.username}</span></span
-						>
-
-						<div
-							id="qr"
-							class="border {showMobileTip
-								? 'border-gray-400'
-								: 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center h-[300px] w-[250px] md:w-[300px] relative"
-						>
-							<div
-								class="z-100 h-[300px] w-[250px] md:w-[300px] animate-pulse absolute top-0 left-0 bg-gray-400 rounded-3xl {qrSkeleton
-									? 'block'
-									: 'hidden'}"
-							/>
-						</div>
-
-						<div class="px-5 space-y-3">
-							<div class="flex justify-between">
-								<span class="font-semibold text-sm">Invoice</span>
-								<span class="font-semibold text-sm"
-									>{invoiceAmountFiatFormatted}
-									<span class="text-secondary font-normal"
-										>{`(${invoiceAmountFormatted} SATS)`}</span
-									></span
-								>
-							</div>
-
-							<div class="flex justify-between">
-								<span class="font-semibold text-sm">Tip</span>
-								<span class="font-semibold text-sm"
-									>{tipAmountFormatted}
-									<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
-								>
-							</div>
-
-							<div class="flex justify-between">
-								<span class="font-bold">Total</span>
-								<span class="font-bold"
-									>{totalAmountFormatted}
-									<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span
-									></span
-								>
-							</div>
-						</div>
-					</div>
-				{:else}
-					<div
-						class="w-[94vw] md:w-[375px] h-[381px] md:h-[269px] animate-pulse bg-gray-400 rounded-xl"
-					/>
-					<div
-						class="h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
-						id="section-divider"
-					/>
-					<div
-						class="w-full md:w-[342px] h-[454px] md:h-[494px] animate-pulse bg-gray-400 rounded-xl"
-					/>
-				{/if}
-			</div>
-		</div>
-	</div>
-{:else}
-	<LoadingSplash />
-{/if}
-
-<style>
-	#slider {
-		-webkit-appearance: none;
-		width: 100%;
-		height: 6px;
-		border-radius: 5px;
-		background: #eaecef;
-		outline: none;
-	}
-
-	#slider:active {
-		background-color: black;
-	}
-
-	#slider::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		appearance: none;
-		width: 25px;
-		height: 25px;
-		border-radius: 50%;
-		background: black;
-		cursor: pointer;
-	}
-
-	#slider::-moz-range-thumb {
-		width: 25px;
-		height: 25px;
-		border-radius: 50%;
-		background: black;
-		cursor: pointer;
-	}
-
-	input[type='number']::-webkit-inner-spin-button,
-	input[type='number']::-webkit-outer-spin-button {
-		-webkit-appearance: none;
-	}
-
-	input[type='number'] {
-		-moz-appearance: textfield;
-	}
-
-	.full-shadow {
-		box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.25);
-	}
-</style>
diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
index a9f3cefb..2ed1ba67 100644
--- a/src/routes/invoice/[id].svelte
+++ b/src/routes/invoice/[id].svelte
@@ -7,10 +7,6 @@
 
 	export let amount, rate, text;
 
-	if (!$user && typeof window !== 'undefined') {
-		window.location = '/login';
-	}
-
 	$: amountFiat = parseFloat(((amount * rate) / 100000000).toFixed(2));
 
 	let tipPercent = 0;
@@ -104,6 +100,9 @@
 	};
 
 	let customInput;
+
+	let qrSkeleton = true;
+	setTimeout(() => (qrSkeleton = false), 1000);
 </script>
 
 {#if $user}
@@ -225,8 +224,14 @@
 						id="qr"
 						class="border {showMobileTip
 							? 'border-gray-400'
-							: 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center"
-					/>
+							: 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center h-[300px] w-[250px] md:w-[300px] relative"
+					>
+						<div
+							class="z-100 h-[300px] w-[250px] md:w-[300px] animate-pulse absolute top-0 left-0 bg-gray-400 rounded-3xl {qrSkeleton
+								? 'block'
+								: 'hidden'}"
+						/>
+					</div>
 
 					<div class="px-5 space-y-3">
 						<div class="flex justify-between">
diff --git a/src/routes/logout/done.svelte b/src/routes/logout/done.svelte
index 50fb766e..fe526357 100644
--- a/src/routes/logout/done.svelte
+++ b/src/routes/logout/done.svelte
@@ -8,6 +8,6 @@
 		$token = null;
 		$user = null;
 		close();
-		goto('/');
 	});
+	goto('/');
 </script>
-- 
cgit v1.2.3


From c5f0e9838ea1fc6d66026f139b955ea2ac181ef9 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Sat, 30 Jul 2022 23:48:55 -0600
Subject: add about section to landing page

---
 src/components/About.svelte |  82 ++++++++++++++++++++++++++++++++++++++++++++
 src/components/index.js     |   1 +
 src/routes/index.svelte     |  15 ++++++--
 static/icons/github.svg     |   3 ++
 static/icons/twitter.svg    |   3 ++
 static/images/swoosh.png    | Bin 0 -> 4382 bytes
 6 files changed, 102 insertions(+), 2 deletions(-)
 create mode 100644 src/components/About.svelte
 create mode 100644 static/icons/github.svg
 create mode 100644 static/icons/twitter.svg
 create mode 100644 static/images/swoosh.png

(limited to 'src/components/index.js')

diff --git a/src/components/About.svelte b/src/components/About.svelte
new file mode 100644
index 00000000..eb8e9a82
--- /dev/null
+++ b/src/components/About.svelte
@@ -0,0 +1,82 @@
+<script>
+	import { Image, Icon } from '$comp';
+</script>
+
+<div>
+	<h3 class="text-5xl font-medium mb-10 text-center">About</h3>
+	<div
+		class="md:px-10 lg:px-0 block lg:flex justify-center text-secondary text-xl lg:space-x-20 mx-auto max-w-7xl relative"
+	>
+		<p class="w-full lg:w-5/12">
+			Coinos is an open source bitcoin web wallet, point of sale, ecommerce marketplace and exchange
+			platform. Development started in Vancouver in September 2012 as a way to provide local
+			merchants with a convenient way to accept bitcoin payments.
+			<br /><br />
+			The feature set has grown over the years to accomodate a wide variety of use cases with the goal
+			of making it as easy as possible for anyone to get started using Bitcoin quickly, cheaply, and
+			securely.
+			<br /><br />
+			Anyone can download the source code and host their own instance of the platform backed by their
+			own bitcoin, liquid or lightning nodes, or reach out and we'll gladly set this up for you.
+			<Image
+				image="swoosh"
+				style="w-32 absolute -bottom-20 left-28 md:left-72 xl:left-96 lg:bottom-0"
+			/>
+		</p>
+		<p class="w-full lg:w-5/12">
+			Once signed in, you can create both custodial and non-custodial wallets within your account.
+			The default custodial wallet allows funds to be deposited on any of the bitcoin, liquid or
+			lightning networks and seamlessly withdrawn over any other network without any conversion
+			process or fee.
+			<br /><br />
+			Using a non-custodial wallet means keys are generated client-side in your browser so we never have
+			access to the funds. Transactions from these accounts are subject to on-chain transaction fees
+			and Lightning Network payments are not supported but we advise using this account type or a paper
+			wallet for storing larger amounts.
+			<br /><br />
+			Intra-account transfers between custodial wallets of different users on our server are completely
+			free, instant, and unlimited.
+		</p>
+	</div>
+
+	<div class="px-5 block lg:flex justify-center lg:space-x-32 items-center mt-40 lg:mt-20">
+		<div class="space-y-5 mb-5 lg:mb-0">
+			<h3 class="text-5xl font-medium mb-10 text-center lg:text-right">The Founder</h3>
+
+			<Image image="adam" style="rounded-full mx-auto lg:mx-0 lg:ml-auto w-40" />
+
+			<div class="space-y-2">
+				<span class="text-2xl text-center font-semibold block lg:text-right">Adam Soltys</span>
+				<span class="text-xl text-center text-secondary block lg:text-right"
+					>Chief Technical Officer</span
+				>
+			</div>
+
+			<div class="flex justify-center lg:justify-end items-center space-x-5">
+				<a
+					href="https://twitter.com/adamsoltys"
+					target="_blank"
+					rel="noreferrer"
+					class="rounded-full p-2 bg-[#1D9BF0]"><Icon icon="twitter" style="w-6" /></a
+				>
+				<a
+					href="https://github.com/asoltys"
+					target="_blank"
+					rel="noreferrer"
+					class="rounded-full p-2 bg-gray-800"><Icon icon="github" style="w-6" /></a
+				>
+			</div>
+		</div>
+
+		<ul
+			class="w-full mx-auto md:w-[700px] lg:w-[500px] xl:w-auto text-secondary px-1 md:px-10 text-xl list-disc space-y-5"
+		>
+			<li>Running Bitcoin since 2011</li>
+			<li>20+ years web development experience in government and industry</li>
+			<li>Early Bitcoin Vancouver meetup organizer</li>
+			<li>Founder of The Bitcoin Co-op and early supporter of Decentral Vancouver</li>
+			<li>Yogi, permaculturist, anarchist, decentralist</li>
+			<li>Husband, father, brother, son</li>
+		</ul>
+	</div>
+</div>
diff --git a/src/components/index.js b/src/components/index.js
index 53f0fe99..afa4790c 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -9,3 +9,4 @@ export { default as RegisterOrLogin } from './RegisterOrLogin.svelte';
 export { default as AppHeader } from './AppHeader.svelte';
 export { default as LoadingSplash } from './LoadingSplash.svelte';
 export { default as PageNotFound } from './404.svelte';
+export { default as About } from './About.svelte';
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index cda885a3..5a9a0275 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,5 +1,13 @@
 <script>
-	import { LandingHeader, LandingHero, LandingInfoCard, HowItWorksCard, FaqCard } from '$comp';
+	import {
+		LandingHeader,
+		LandingHero,
+		LandingInfoCard,
+		HowItWorksCard,
+		FaqCard,
+		Image,
+		About
+	} from '$comp';
 
 	let howItWorks;
 	let faq;
@@ -81,7 +89,7 @@
 
 	<!-- how it works -->
 	<div bind:this={howItWorks}>
-		<h3 class="text-5xl font-medium mb-20 text-center">How it works</h3>
+		<h3 class="text-5xl font-medium mb-10 text-center">How it works</h3>
 		<div
 			class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 lg:space-x-10 text-center"
 		>
@@ -98,4 +106,7 @@
 			<FaqCard question={question.question} answer={question.answer} />
 		{/each}
 	</div>
+
+	<!-- about -->
+	<About />
 </main>
diff --git a/static/icons/github.svg b/static/icons/github.svg
new file mode 100644
index 00000000..039f4d21
--- /dev/null
+++ b/static/icons/github.svg
@@ -0,0 +1,3 @@
+<svg width="480" height="512" viewBox="0 0 480 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M186.1 328.7C186.1 349.6 175.2 383.8 149.4 383.8C123.6 383.8 112.7 349.6 112.7 328.7C112.7 307.8 123.6 273.6 149.4 273.6C175.2 273.6 186.1 307.8 186.1 328.7V328.7ZM480 278.2C480 310.1 476.8 343.9 462.5 373.2C424.6 449.8 320.4 448 245.8 448C170 448 59.6 450.7 20.2 373.2C5.6 344.2 0 310.1 0 278.2C0 236.3 13.9 196.7 41.5 164.6C36.3 148.8 33.8 132.2 33.8 115.8C33.8 94.3 38.7 83.5 48.4 64C93.7 64 122.7 73 157.2 100C186.2 93.1 216 90 245.9 90C272.9 90 300.1 92.9 326.3 99.2C360.3 72.5 389.3 64 434.1 64C443.9 83.5 448.7 94.3 448.7 115.8C448.7 132.2 446.1 148.5 441 164C468.5 196.4 480 236.3 480 278.2V278.2ZM415.7 328.7C415.7 284.8 389 246.1 342.2 246.1C323.3 246.1 305.2 249.5 286.2 252.1C271.3 254.4 256.4 255.3 241.1 255.3C225.9 255.3 211 254.4 196 252.1C177.3 249.5 159 246.1 140 246.1C93.2 246.1 66.5 284.8 66.5 328.7C66.5 416.5 146.9 430 216.9 430H265.1C335.4 430 415.7 416.6 415.7 328.7V328.7ZM333.1 273.6C307.3 273.6 296.4 307.8 296.4 328.7C296.4 349.6 307.3 383.8 333.1 383.8C358.9 383.8 369.8 349.6 369.8 328.7C369.8 307.8 358.9 273.6 333.1 273.6Z" fill="white"/>
+</svg>
diff --git a/static/icons/twitter.svg b/static/icons/twitter.svg
new file mode 100644
index 00000000..e43e5f2a
--- /dev/null
+++ b/static/icons/twitter.svg
@@ -0,0 +1,3 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M459.37 151.716C459.695 156.264 459.695 160.813 459.695 165.361C459.695 304.081 354.112 463.919 161.137 463.919C101.685 463.919 46.457 446.7 0 416.813C8.447 417.787 16.568 418.112 25.34 418.112C74.395 418.112 119.553 401.544 155.614 373.28C109.482 372.305 70.822 342.092 57.502 300.508C64 301.482 70.497 302.132 77.32 302.132C86.741 302.132 96.163 300.832 104.934 298.559C56.853 288.812 20.791 246.579 20.791 195.574V194.275C34.76 202.072 51.005 206.945 68.222 207.594C39.958 188.751 21.441 156.589 21.441 120.203C21.441 100.711 26.638 82.843 35.735 67.249C87.39 130.924 165.035 172.507 252.1 177.056C250.476 169.259 249.501 161.138 249.501 153.016C249.501 95.188 296.283 48.082 354.435 48.082C384.648 48.082 411.937 60.752 431.105 81.219C454.82 76.671 477.561 67.899 497.704 55.879C489.906 80.245 473.338 100.712 451.572 113.706C472.689 111.433 493.156 105.584 511.998 97.463C497.706 118.254 479.837 136.771 459.37 151.716V151.716Z" fill="white"/>
+</svg>
diff --git a/static/images/swoosh.png b/static/images/swoosh.png
new file mode 100644
index 00000000..b97bf475
Binary files /dev/null and b/static/images/swoosh.png differ
-- 
cgit v1.2.3


From f81e273613e95e89087badcc0cb5a9bd007e6d47 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Sun, 31 Jul 2022 01:02:39 -0600
Subject: add footer and other refactoring

---
 src/components/About.svelte  | 18 ++++++++++++------
 src/components/Footer.svelte | 39 +++++++++++++++++++++++++++++++++++++++
 src/components/index.js      |  1 +
 src/routes/community.svelte  |  0
 src/routes/index.svelte      |  5 ++++-
 src/routes/jobs.svelte       |  0
 static/icons/shield.svg      | 15 +++++++++++++++
 7 files changed, 71 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Footer.svelte
 create mode 100644 src/routes/community.svelte
 create mode 100644 src/routes/jobs.svelte
 create mode 100644 static/icons/shield.svg

(limited to 'src/components/index.js')

diff --git a/src/components/About.svelte b/src/components/About.svelte
index 0fdf5200..a5f4c274 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -1,5 +1,14 @@
 <script>
 	import { Image, Icon } from '$comp';
+
+	const aboutAdam = [
+		'Running Bitcoin since 2011',
+		'20+ years web development experience in government and industry',
+		'Early Bitcoin Vancouver meetup organizer',
+		'Founder of The Bitcoin Co-op and early supporter of Decentral Vancouver',
+		'Yogi, permaculturist, anarchist, decentralist',
+		'Husband, father, brother, son'
+	];
 </script>
 
 <h3 class="text-5xl font-medium mb-10 text-center">About</h3>
@@ -68,11 +77,8 @@
 	<ul
 		class="w-full mx-auto md:w-[700px] lg:w-[500px] xl:w-auto text-secondary px-1 md:px-10 text-xl list-disc space-y-5"
 	>
-		<li>Running Bitcoin since 2011</li>
-		<li>20+ years web development experience in government and industry</li>
-		<li>Early Bitcoin Vancouver meetup organizer</li>
-		<li>Founder of The Bitcoin Co-op and early supporter of Decentral Vancouver</li>
-		<li>Yogi, permaculturist, anarchist, decentralist</li>
-		<li>Husband, father, brother, son</li>
+		{#each aboutAdam as about}
+			<li>{about}</li>
+		{/each}
 	</ul>
 </div>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
new file mode 100644
index 00000000..0c682179
--- /dev/null
+++ b/src/components/Footer.svelte
@@ -0,0 +1,39 @@
+<script>
+	import { Icon } from '$comp';
+
+	const followLinks = [
+		{ url: 'https://twitter.com/coinoswallet', title: 'Twitter' },
+		{ url: 'https://github.com/coinos', title: 'GitHub' },
+		{ url: 'https://t.me/coinos', title: 'Telegram' }
+	];
+
+	const companyLinks = [
+		{ url: 'mailto:support@coinos.io', title: 'Support' },
+		{ url: '/community', title: 'Community' },
+		{ url: '/jobs', title: 'Jobs' }
+	];
+</script>
+
+<footer class="space-y-10 md:space-y-0 text-xl block md:flex justify-around items-center mb-20">
+	<Icon icon="logo" style="w-48 mx-auto md:mx-0" />
+
+	<div class="text-center md:text-left">
+		<p class="font-semibold">Follow Us</p>
+		<ul class="mt-5 text-secondary space-y-3 font-medium">
+			{#each followLinks as link}
+				<li><a href={link.url} target="_blank" rel="noreferrer">{link.title}</a></li>
+			{/each}
+		</ul>
+	</div>
+
+	<div class="text-center md:text-left">
+		<p class="font-semibold">Company</p>
+		<ul class="mt-5 text-secondary space-y-3">
+			{#each companyLinks as link}
+				<li><a href={link.url}>{link.title}</a></li>
+			{/each}
+		</ul>
+	</div>
+
+	<Icon icon="shield" style="mx-auto md:mx-0" />
+</footer>
diff --git a/src/components/index.js b/src/components/index.js
index afa4790c..dade4c2c 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -10,3 +10,4 @@ export { default as AppHeader } from './AppHeader.svelte';
 export { default as LoadingSplash } from './LoadingSplash.svelte';
 export { default as PageNotFound } from './404.svelte';
 export { default as About } from './About.svelte';
+export { default as Footer } from './Footer.svelte';
diff --git a/src/routes/community.svelte b/src/routes/community.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 2164c58b..c823f668 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -6,7 +6,8 @@
 		HowItWorksCard,
 		FaqCard,
 		Image,
-		About
+		About,
+		Footer
 	} from '$comp';
 
 	let howItWorks;
@@ -112,3 +113,5 @@
 		<About />
 	</div>
 </main>
+
+<Footer />
diff --git a/src/routes/jobs.svelte b/src/routes/jobs.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/static/icons/shield.svg b/static/icons/shield.svg
new file mode 100644
index 00000000..feda9661
--- /dev/null
+++ b/static/icons/shield.svg
@@ -0,0 +1,15 @@
+<svg width="96" height="122" viewBox="0 0 96 122" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.9721 93.8449C34.3435 92.6292 33.6075 92.6292 33.187 93.7392C32.6087 95.272 38.2338 99.1835 41.1252 99.1835C44.0167 99.1835 41.4932 95.9063 36.9721 93.8449Z" fill="black"/>
+<path d="M20.5703 79.9963C19.3086 80.472 19.8869 81.6348 22.6732 84.172C27.2469 88.3477 29.8755 88.7177 27.8777 84.912C26.248 81.8991 22.3577 79.2563 20.5703 79.9963Z" fill="black"/>
+<path d="M15.523 67.6268C14.6818 70.7454 15.8384 73.8116 17.8361 73.8116C19.6761 73.8116 20.2544 69.054 18.7298 67.0983C17.8361 65.9354 15.8384 66.3054 15.523 67.6268Z" fill="black"/>
+<path d="M16.4172 25.3949C17.9943 21.272 15.6286 14.3478 13.4206 16.5678C12.7898 17.2021 13.0526 24.3377 13.7886 25.342C14.6298 26.452 15.9966 26.5049 16.4172 25.3949Z" fill="black"/>
+<path d="M17.5732 58.2712C18.7298 57.8484 18.5726 52.5627 17.3634 51.4527C15.3657 49.6027 14.6292 50.2898 14.6292 53.9898C14.6292 57.5312 15.6281 58.9584 17.5732 58.2712Z" fill="black"/>
+<path d="M16.8898 41.1987C17.5207 37.8158 16.2589 33.6406 14.6292 33.6406C13.7355 33.6406 13.6304 34.0101 13.6304 36.9701C13.5778 41.6215 16.1538 44.9515 16.8898 41.1987Z" fill="black"/>
+<path d="M77.5572 35.5959C76.8738 36.2831 77.1892 40.9874 78.0304 41.7802C82.4989 46.1674 80.7641 32.3188 77.5572 35.5959Z" fill="black"/>
+<path d="M81.395 67.2044C81.395 65.3016 78.9241 64.1387 77.8201 65.513C76.979 66.5173 77.347 69.6887 76.243 71.8559C75.4544 73.4416 75.7173 74.023 77.5047 74.5516C78.8716 74.9216 81.395 73.5473 81.395 67.2044Z" fill="black"/>
+<path d="M79.555 26.7684C81.3424 26.7684 81.6052 26.1341 81.1847 22.2227C80.659 17.0958 77.8201 15.2455 76.7161 19.2627C75.4544 23.7027 76.611 26.7684 79.555 26.7684Z" fill="black"/>
+<path d="M94.2229 8.84999C93.8023 2.08427 87.3355 0.12898 80.659 0.0232653C62.9949 -0.293878 67.6218 2.71898 5.90264 3.72327C2.59064 3.77612 1.43386 3.51173 0.960713 7.05316C0.802999 8.32173 2.22232 55.417 2.69546 69.107C3.01089 78.6213 3.79941 77.0356 8.11027 82.427C12.6841 88.1356 22.0944 100.028 38.6018 117.048C49.2738 128.043 58.2635 118.212 93.0658 77.459C93.9595 76.4018 94.4852 75.1333 94.5378 73.759C95.3264 59.4876 95.5898 30.3627 94.2229 8.84999ZM90.3321 73.019C90.2795 73.0718 52.376 116.943 49.0115 116.943C47.8023 116.943 33.6601 104.68 25.4064 95.219C18.9401 87.819 13.8407 82.7447 9.8978 78.7804C8.89895 77.7761 8.32092 76.4542 8.26835 75.027C7.90035 63.9799 6.27027 15.0343 6.27027 14.9286C5.42913 8.47999 5.11365 8.5858 27.0361 8.69152C58.8418 8.90295 66.5698 5.67877 89.5961 5.8902C89.5435 49.709 91.9618 72.0676 90.3321 73.019Z" fill="black"/>
+<path d="M70.1447 80.2073C68.7252 81.3702 66.1492 85.0174 66.1492 85.9159C66.1492 87.8188 70.9858 85.3345 72.7207 82.5859C74.8235 79.1502 73.2464 77.6702 70.1447 80.2073Z" fill="black"/>
+<path d="M54.6361 96.0114C51.7446 99.5 51.64 99.7114 52.5863 100.663C54.1109 102.196 61.2601 96.4877 60.7869 94.1091C60.3664 91.6777 57.5275 92.5228 54.6361 96.0114Z" fill="black"/>
+<path d="M78.8715 59.1699C80.6064 59.8042 81.6058 55.1004 80.2915 52.6161C79.5029 51.189 77.347 51.2941 76.979 52.827C76.1904 55.9984 76.9264 58.4299 78.8715 59.1699Z" fill="black"/>
+</svg>
-- 
cgit v1.2.3