From 813d304c4a67909ac306dcaf6fe5e5c9625ea949 Mon Sep 17 00:00:00 2001
From: Brandon Lucas <38222767+thebrandonlucas@users.noreply.github.com>
Date: Tue, 31 Oct 2023 09:42:23 -0400
Subject: [PATCH] feat: add adoption table

---
 package.json                      |   2 +-
 src/features/AdoptionTable.svelte |  54 ++++++++
 src/features/Nav.svelte           |   1 +
 src/lib/constants.ts              | 212 ++++++++++++++++++++++++++++++
 src/routes/+page.svelte           |  19 ++-
 src/theme.json                    |   3 +-
 6 files changed, 284 insertions(+), 7 deletions(-)
 create mode 100644 src/features/AdoptionTable.svelte
 create mode 100644 src/lib/constants.ts

diff --git a/package.json b/package.json
index 4e4d8ac..dc437e8 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
 		"*.{js,ts,svelte,css,md,json}": [
 			"prettier --write",
 			"eslint --fix",
-			"tsc --noEmit"
+			"bash -c 'yarn run check'"
 		]
 	}
 }
diff --git a/src/features/AdoptionTable.svelte b/src/features/AdoptionTable.svelte
new file mode 100644
index 0000000..1e9780f
--- /dev/null
+++ b/src/features/AdoptionTable.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { WALLET_ADOPTION } from '$lib/constants';
+</script>
+
+<table>
+	<thead>
+		<tr>
+			<th>Wallet</th>
+			<th>Sending</th>
+			<th>Receiving</th>
+		</tr>
+	</thead>
+	<tbody>
+		{#each WALLET_ADOPTION as { name, sending, receiving }}
+			<tr>
+				<td>{name}</td>
+				<td class={`${sending ? 'yes' : 'no'} text-black`}>{sending ? 'Yes' : 'No'}</td>
+				<td class={`${receiving ? 'yes' : 'no'} text-black`}>{receiving ? 'Yes' : 'No'}</td>
+			</tr>
+		{/each}
+	</tbody>
+</table>
+
+<style lang="postcss">
+	table {
+		@apply bg-gray-600 table-fixed border-collapse w-full;
+	}
+	thead th:nth-child(1) {
+		@apply w-1/3;
+	}
+	thead th:nth-child(2) {
+		@apply w-1/3;
+	}
+	thead th:nth-child(3) {
+		@apply w-1/3;
+	}
+	th,
+	td {
+		@apply text-left px-4 py-2;
+	}
+	th,
+	td {
+		@apply border border-gray-500;
+	}
+	tbody tr:nth-child(odd) {
+		@apply bg-gray-700;
+	}
+	.no {
+		@apply bg-red-300;
+	}
+	.yes {
+		@apply bg-green-400;
+	}
+</style>
diff --git a/src/features/Nav.svelte b/src/features/Nav.svelte
index 29adf0b..254a832 100644
--- a/src/features/Nav.svelte
+++ b/src/features/Nav.svelte
@@ -51,6 +51,7 @@
 		<li><Link href="#ux">Demo</Link></li>
 		<li><Link href="#privacy">Privacy</Link></li>
 		<li><Link href="#how-to">How to</Link></li>
+		<li><Link href="#adoption">Supporting Wallets</Link></li>
 		<li><Link href="#future-plans">Future Plans</Link></li>
 		<li><Link href="#get-involved">Get Involved</Link></li>
 		<!-- TODO: light mode styling -->
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
new file mode 100644
index 0000000..e75ad71
--- /dev/null
+++ b/src/lib/constants.ts
@@ -0,0 +1,212 @@
+export const WALLET_ADOPTION = [
+	{
+		name: 'Armory',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'bcoin',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'BDK-CLI',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Bitcoin Core',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Bitcoin Knots',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Bitcoin Wallet for Android',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'BitMask',
+		sending: true,
+		receiving: false
+	},
+	{
+		name: 'Blink (Bitcoin Beach Wallet)',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Blixt Wallet',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Blockstream Green',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'BlueWallet',
+		sending: true,
+		receiving: false
+	},
+	{
+		name: 'Brainbow',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Breadwallet',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'BTC.com',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'BTCPay Server',
+		sending: true,
+		receiving: true
+	},
+	{
+		name: 'Casa',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'CLN',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Coinomi',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Eclair',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Electrum',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Envoy',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Fedimint',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'FireBolt',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Fully Noded',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Gordian Wallet',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Guarda Wallet',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'JAM',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'JoinMarket',
+		sending: true,
+		receiving: true
+	},
+	{
+		name: 'Liana',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'LND',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Mutiny Wallet',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Mycelium',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Nunchuk',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Phoenix',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Samourai Wallet',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Sparrow Wallet',
+		sending: true,
+		receiving: false
+	},
+	{
+		name: 'Stack Wallet',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Trezor Suite',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Trust Wallet',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Vortex',
+		sending: false,
+		receiving: false
+	},
+	{
+		name: 'Wasabi Wallet',
+		sending: true,
+		receiving: false
+	},
+	{
+		name: 'Zeus',
+		sending: false,
+		receiving: false
+	}
+];
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8b921a4..f77d34f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,6 +7,7 @@
 	import H5 from '../components/Header/H5.svelte';
 	import Icon from '../components/Icon/Icon.svelte';
 	import Link from '../components/Link.svelte';
+	import AdoptionTable from '../features/AdoptionTable.svelte';
 </script>
 
 <div class="w-4/5 flex flex-col">
@@ -14,7 +15,7 @@
 		<div class="w-4/5">
 			<H1>Better Bitcoin Transactions</H1>
 			<H3 colorClass=""
-				>A simple protocol that can scale Bitcoin, save fees, and preserve privacy, without changing
+				>A simple protocol that can preserve privacy, scale Bitcoin, and save fees, without changing
 				how you use it.</H3
 			>
 			<H5 colorClass="">
@@ -94,14 +95,15 @@
 				<div>
 					<H3 colorClass="text-primary">Scaling Upgraded</H3>
 					<p>
-						Payjoin settles many transfers together in one transaction, saving time spent waiting for block
-						confirmations and enabling higher throughput.
+						Payjoin settles many transfers together in one transaction, saving time spent waiting
+						for block confirmations and enabling higher throughput.
 					</p>
 				</div>
 				<div>
 					<H3 colorClass="text-primary">Fees Saved</H3>
 					<p>
-						As a byproduct of the scaling improvements, the many transfers inside each payjoin share the fees of a single transaction.
+						As a byproduct of the scaling improvements, the many transfers inside each payjoin share
+						the fees of a single transaction.
 					</p>
 				</div>
 			</div>
@@ -271,6 +273,14 @@
 			><Button secondary>Read the SDK docs</Button></Link
 		>
 	</section>
+	<section id="adoption" class="flex flex-col pt-24">
+		<H2>Supporting Wallets</H2>
+		<H3
+			>A list of wallets that support sending or receiving payjoin. We need your help growing this
+			list!</H3
+		>
+		<AdoptionTable />
+	</section>
 	<section id="future-plans" class="flex flex-col pt-24">
 		<H2>Future Plans</H2>
 		<div class="flex flex-col lg:flex-row">
@@ -299,7 +309,6 @@
 	>
 		<div class="self-start flex-1">
 			<H2>We need your help!</H2>
-			<H3>Pay it forward. Join the movement.</H3>
 			<p>
 				Payjoin has many benefits for Bitcoin and doesn't require much, we need your help to get
 				wallets to support it!
diff --git a/src/theme.json b/src/theme.json
index ae706fa..dabc6eb 100644
--- a/src/theme.json
+++ b/src/theme.json
@@ -5,7 +5,8 @@
 			"current": "currentColor",
 			"primary": {
 				"DEFAULT": "#f75394"
-			}
+			},
+			"background": "#0f0f0f"
 		}
 	}
 }