Merge pull request #39 from thebrandonlucas/master

Wallet Adoption Bubbles

src/components/LinkTag.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	export let href: string;
+	export let bad = false;
+	export let text: string;
+</script>
+
+<a
+	{href}
+	class={`${
+		bad ? 'bg-red-100' : 'bg-green-100'
+	} no-underline rounded-xl p-2 hover:scale-105 transition-all duration-200 ease-in-out`}
+	target="_blank"
+	rel="noreferrer noopener"
+>
+	<span class="text-black">{text}</span>
+</a>

src/features/WalletCard.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { AcceptedWallet } from '$lib/types';
+	import LinkTag from '../components/LinkTag.svelte';
+
+	export let bad = false;
+	export let wallets: AcceptedWallet[] = [];
+</script>
+
+<div class="flex-1">
+	<div
+		class={`flex  gap-4 p-4 items-end rounded-3xl flex-wrap ${bad ? 'bg-red-400' : 'bg-green-300'}`}
+	>
+		{#each wallets as { name, href }}
+			<LinkTag {href} {bad} text={name} />
+		{/each}
+	</div>
+</div>

src/lib/constants.ts

@@ -1,211 +1,255 @@
-export const WALLET_ADOPTION = [
+import type { AcceptedWallet } from './types';
+
+export const WALLET_ADOPTION: AcceptedWallet[] = [
 	{
 		name: 'Armory',
+		href: 'https://www.bitcoinarmory.com/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'bcoin',
+		href: 'https://bcoin.io/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'BDK-CLI',
+		href: 'https://github.com/bitcoindevkit/bdk-cli/pull/156',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Bitcoin Core',
+		href: 'https://bitcoin.org/en/bitcoin-core/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Bitcoin Knots',
+		href: 'https://bitcoinknots.org/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Bitcoin Wallet for Android',
+		href: 'https://play.google.com/store/apps/details?id=de.schildbach.wallet',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'BitMask',
+		href: 'https://segwit.bitmask.app/',
 		sending: true,
 		receiving: false
 	},
 	{
 		name: 'Blink (Bitcoin Beach Wallet)',
+		href: 'https://www.blink.sv/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Blixt Wallet',
+		href: 'https://blixtwallet.github.io/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Blockstream Green',
+		href: 'https://blockstream.com/green/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'BlueWallet',
+		href: 'https://bluewallet.io/',
 		sending: true,
 		receiving: false
 	},
 	{
 		name: 'Brainbow',
+		href: 'https://github.com/Bitcoin-Brainbow/Brainbow',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Breadwallet',
+		href: 'https://play.google.com/store/apps/details?id=com.breadwallet',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'BTC.com',
+		href: 'https://btc.com/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'BTCPay Server',
+		href: 'https://btcpayserver.org/',
 		sending: true,
 		receiving: true
 	},
 	{
 		name: 'Casa',
+		href: 'https://casa.io/',
 		sending: false,
 		receiving: false
 	},
 	{
-		name: 'CLN',
+		name: 'Core Lightning',
+		href: 'https://corelightning.org/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Coinomi',
+		href: 'https://www.coinomi.com/en/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Eclair',
+		href: 'https://electrum.org/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Electrum',
+		href: 'https://electrum.org/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Envoy',
+		href: 'https://foundationdevices.com/envoy/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Fedimint',
+		href: 'https://fedimint.org/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'FireBolt',
+		href: 'https://github.com/AreaLayer/FireBolt',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Fully Noded',
+		href: 'https://fullynoded.app/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Gordian Wallet',
+		href: 'https://github.com/BlockchainCommons/GordianWallet-iOS',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Guarda Wallet',
+		href: 'https://guarda.com/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'JAM',
+		href: 'https://jamapp.org/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'JoinMarket',
+		href: 'https://joinmarket.net/',
 		sending: true,
 		receiving: true
 	},
 	{
 		name: 'Liana',
+		href: 'https://wizardsardine.com/liana/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'LND',
+		href: 'https://docs.lightning.engineering/lightning-network-tools/lnd',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Mutiny Wallet',
+		href: 'https://www.mutinywallet.com/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Mycelium',
+		href: 'https://wallet.mycelium.com/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Nunchuk',
+		href: 'https://nunchuk.io/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Phoenix',
+		href: 'https://phoenix.acinq.co/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Samourai Wallet',
+		href: 'https://samouraiwallet.com/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Sparrow Wallet',
+		href: 'https://www.sparrowwallet.com/',
 		sending: true,
 		receiving: false
 	},
 	{
 		name: 'Stack Wallet',
+		href: 'https://stackwallet.com/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Trezor Suite',
+		href: 'https://trezor.io/trezor-suite',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Trust Wallet',
+		href: 'https://trustwallet.com/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Vortex',
+		href: 'https://lnvortex.com/',
 		sending: false,
 		receiving: false
 	},
 	{
 		name: 'Wasabi Wallet',
+		href: 'https://wasabiwallet.app/',
 		sending: true,
 		receiving: false
 	},
 	{
 		name: 'Zeus',
+		href: 'https://zeusln.app/',
 		sending: false,
 		receiving: false
 	}

src/lib/types.ts

@@ -0,0 +1,6 @@
+export type AcceptedWallet = {
+	name: string;
+	href: string;
+	sending: boolean;
+	receiving: boolean;
+};

src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script>
+	import { WALLET_ADOPTION } from '$lib/constants';
 	import Button from '../components/Button.svelte';
 	import Capsule from '../components/Capsule.svelte';
 	import H1 from '../components/Header/H1.svelte';
@@ -7,7 +8,12 @@
 	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';
+	import WalletCard from '../features/WalletCard.svelte';
+
+	const privateWallets = WALLET_ADOPTION.filter((wallet) => wallet.sending || wallet.sending);
+	const surveillableWallets = WALLET_ADOPTION.filter(
+		(wallet) => !wallet.sending && !wallet.sending
+	);
 </script>
 
 <div class="w-4/5 flex flex-col">
@@ -19,12 +25,15 @@
 				how you use it.</H3
 			>
 			<H5 colorClass="">
-				Help improve Bitcoin by <Link
+				Help improve Bitcoin by
+				<Link
 					href="https://en.bitcoin.it/wiki/PayJoin_adoption"
 					target="_blank"
-					icon="externalLink">asking your wallet to implement payjoin!</Link
-				></H5
-			>
+					icon="externalLink"
+				>
+					asking your wallet to implement payjoin!
+				</Link>
+			</H5>
 		</div>
 
 		<a href="#why" class="flex flex-col gap-4 justify-center animate-smooth-bounce">
@@ -275,11 +284,16 @@
 	</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 />
+		<div class="mb-4">
+			<H3
+				>A list of wallets that support sending or receiving payjoin. We need your help growing this
+				list!</H3
+			>
+		</div>
+		<div class="flex gap-12 max-md:flex-col">
+			<WalletCard wallets={privateWallets} />
+			<WalletCard bad wallets={surveillableWallets} />
+		</div>
 	</section>
 	<section id="future-plans" class="flex flex-col pt-24">
 		<H2>Future Plans</H2>