From 59308ed09f492c128c6c20e7ca256dfa6789e783 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 25 Aug 2024 17:10:17 +0600
Subject: [PATCH] web/about: add the link type of alternative donation method

---
 ...WalletItem.svelte => DonateAltItem.svelte} | 36 ++++++++++++++-----
 web/src/routes/donate/+page.svelte            |  9 +++--
 2 files changed, 33 insertions(+), 12 deletions(-)
 rename web/src/components/donate/{WalletItem.svelte => DonateAltItem.svelte} (64%)

diff --git a/web/src/components/donate/WalletItem.svelte b/web/src/components/donate/DonateAltItem.svelte
similarity index 64%
rename from web/src/components/donate/WalletItem.svelte
rename to web/src/components/donate/DonateAltItem.svelte
index 1b93648d..1c8b4dda 100644
--- a/web/src/components/donate/WalletItem.svelte
+++ b/web/src/components/donate/DonateAltItem.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
-    import { copyURL } from "$lib/download";
-    import CopyIcon from "$components/misc/CopyIcon.svelte";
+    import { copyURL, openURL } from "$lib/download";
 
+    import CopyIcon from "$components/misc/CopyIcon.svelte";
+    import IconExternalLink from "@tabler/icons-svelte/IconExternalLink.svelte";
+
+    export let type: "copy" | "open";
     export let name: string;
     export let address: string;
 
@@ -18,17 +21,31 @@
     <button
         class="wallet"
         on:click={() => {
-            copied = true;
-            copyURL(address);
+            if (type === "copy") {
+                copied = true;
+                copyURL(address);
+            } else {
+                openURL(address);
+            }
         }}
     >
-        <div class="wallet-copy">
-            <CopyIcon regularIcon={true} check={copied} />
+        <div class="wallet-icon">
+            {#if type === "copy"}
+                <CopyIcon regularIcon={true} check={copied} />
+            {:else}
+                <IconExternalLink />
+            {/if}
         </div>
 
         <div class="wallet-text">
             <div class="wallet-name">{name}</div>
-            <span class="wallet-address">{address}</span>
+            <span class="wallet-address">
+                {#if type === "copy"}
+                    {address}
+                {:else}
+                    {address.split("//", 2)[1]}
+                {/if}
+            </span>
         </div>
     </button>
 </div>
@@ -57,7 +74,7 @@
         gap: 10px;
     }
 
-    .wallet-copy {
+    .wallet-icon {
         min-width: 42px;
         max-width: 42px;
         height: 100%;
@@ -74,9 +91,10 @@
         padding: 6px 0;
     }
 
-    .wallet-copy :global(svg) {
+    .wallet-icon :global(svg) {
         width: 18px;
         height: 18px;
+        color: var(--secondary);
     }
 
     .wallet-text,
diff --git a/web/src/routes/donate/+page.svelte b/web/src/routes/donate/+page.svelte
index f1b69d6e..51ea798f 100644
--- a/web/src/routes/donate/+page.svelte
+++ b/web/src/routes/donate/+page.svelte
@@ -4,10 +4,10 @@
     import { donate } from "$lib/env";
     import { t } from "$lib/i18n/translations";
 
-    import WalletItem from "$components/donate/WalletItem.svelte";
     import DonateBanner from "$components/donate/DonateBanner.svelte";
-    import DonateOptionsCard from "$components/donate/DonateOptionsCard.svelte";
+    import DonateAltItem from "$components/donate/DonateAltItem.svelte";
     import DonateShareCard from "$components/donate/DonateShareCard.svelte";
+    import DonateOptionsCard from "$components/donate/DonateOptionsCard.svelte";
 
     import IconDiamond from "@tabler/icons-svelte/IconDiamond.svelte";
 </script>
@@ -38,7 +38,10 @@
         </div>
         <div id="wallet-grid">
             {#each Object.entries(donate.crypto) as [name, address]}
-                <WalletItem {name} {address} />
+                <DonateAltItem type="copy" {name} {address} />
+            {/each}
+            {#each Object.entries(donate.other) as [name, address]}
+                <DonateAltItem type="open" {name} {address} />
             {/each}
         </div>
     </section>