Support different payment methods

res/include/style/layout.css

@@ -44,6 +44,14 @@
 	text-rendering: optimizeLegibility;
 	vertical-align: middle;
 }
+.icon_unicode {
+	font-size: 1.5em;
+	display: inline-block;
+	font-weight: normal;
+	font-style: normal;
+	vertical-align: middle;
+	line-height: 1;
+}
 .icon.small { font-size: 1.2em; }
 a > svg { vertical-align: middle; }
 
@@ -440,6 +448,7 @@ select {
 	line-height: 1em;
 	overflow: hidden;
 	font-size: 1em; /* Sometimes user-agents have different font sizes for buttons and links */
+	font-weight: normal;
 	text-decoration: none;
 	text-shadow: none;
 	color: #bfbfbf; /* Fallback */

svelte/src/file_viewer/AdLeaderboard.svelte

@@ -27,21 +27,20 @@ onMount(() => {
 	}
 
 	let now = new Date().getTime()
-	switch (now % 6) {
+	switch (now % 5) {
 		case 0:
-		case 1:
 			set_ad_type("aads")
 			break
-		case 2:
+		case 1:
 			set_ad_type("brave")
 			break
-		case 3:
+		case 2:
 			set_ad_type("ads.plus")
 			break
-		case 4:
+		case 3:
 			set_ad_type("adaround")
 			break
-		case 5:
+		case 4:
 			set_ad_type("flyingsquare")
 			break
 	}

svelte/src/user_home/Transactions.svelte

@@ -64,10 +64,11 @@ const load_transactions = async () => {
 
 let credit_amount = 10
 
-const checkout = async () => {
+const checkout = async (network) => {
 	loading = true
 	const form = new FormData()
 	form.set("amount", credit_amount*1e6)
+	form.set("network", network)
 
 	try {
 		const resp = await fetch(
@@ -125,28 +126,33 @@ onMount(() => {
 		</div>
 	{/if}
 	<div class="limit_width">
-		<h2>Deposit Bitcoin</h2>
+		<h2>Deposit credits</h2>
 		<p>
-			You can deposit credit on your pixeldrain account with Bitcoin. We
+			You can deposit credit on your pixeldrain account with Bitcoin,
-			support regular Bitcoin transactions and Lightning transactions (if
+			Lightning network (<a
-			you open a
+			href="https://btcpay.pixeldrain.com/embed/uS2mbWjXUuaAqMh8XLjkjwi8oehFuxeBZxekMxv68LN/BTC/ln"
-			<a href="https://btcpay.pixeldrain.com/embed/uS2mbWjXUuaAqMh8XLjkjwi8oehFuxeBZxekMxv68LN/BTC/ln" target="_blank">channel</a>
+			target="_blank">node info</a>) and Dogecoin. You must pay the full
-			). You must pay the full amount as stated on the invoice, else your
+			amount as stated on the invoice, else your payment will fail.
-			payment will fail.
 		</p>
 		<p>
-			Do note that it is not possible to withdraw Bitcoin from your
+			Do note that it is not possible to withdraw coins from your
 			pixeldrain account. It's not a wallet. Any amount of money you
 			deposit has to be used up.
 		</p>
 		<div class="indent" style="text-align: center;">
-			<img src="/res/img/btcpay.svg" alt="BTCPay server logo"/>
+			<form on:submit|preventDefault={() => {checkout("")}} class="checkout_form">
-			<br/>
+				Deposit amount €
-			<form on:submit|preventDefault={checkout} class="checkout_form">
-				<div style="margin: 0.5em;">€</div>
 				<input type="number" bind:value={credit_amount} min="1"/>
-				<button type="submit">
+				<br/>
-					<i class="icon">paid</i> Checkout
+				Pay with:<br/>
+				<button on:click={() => {checkout("btc")}}>
+					<span class="icon_unicode">₿</span> Bitcoin
+				</button>
+				<button on:click={() => {checkout("btc_lightning")}}>
+					<i class="icon">bolt</i> Lightning network
+				</button>
+				<button on:click={() => {checkout("doge")}}>
+					<span class="icon_unicode">Ð</span> Dogecoin
 				</button>
 			</form>
 		</div>
@@ -272,10 +278,4 @@ onMount(() => {
 	width: 100px;
 	z-index: 1000;
 }
-.checkout_form {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-}
 </style>