From 481697ea120e9415a084160eea7fd8eff252cf75 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 25 Aug 2024 16:38:13 +0600
Subject: [PATCH] web/donate: add crypto donation options

---
 web/i18n/en/donate.json                     |  4 +-
 web/src/components/donate/WalletItem.svelte | 92 +++++++++++++++++++++
 web/src/routes/donate/+page.svelte          | 60 +++++++++++---
 3 files changed, 145 insertions(+), 11 deletions(-)
 create mode 100644 web/src/components/donate/WalletItem.svelte

diff --git a/web/i18n/en/donate.json b/web/i18n/en/donate.json
index ef4c6033..72464c3b 100644
--- a/web/i18n/en/donate.json
+++ b/web/i18n/en/donate.json
@@ -19,5 +19,7 @@
 
     "card.custom.submit": "donate custom amount",
 
-    "share.title": "share cobalt with a friend"
+    "share.title": "share cobalt with a friend",
+
+    "alternative.title": "alternative ways to donate"
 }
diff --git a/web/src/components/donate/WalletItem.svelte b/web/src/components/donate/WalletItem.svelte
new file mode 100644
index 00000000..1b93648d
--- /dev/null
+++ b/web/src/components/donate/WalletItem.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+    import { copyURL } from "$lib/download";
+    import CopyIcon from "$components/misc/CopyIcon.svelte";
+
+    export let name: string;
+    export let address: string;
+
+    let copied = false;
+
+    $: if (copied) {
+        setTimeout(() => {
+            copied = false;
+        }, 1500);
+    }
+</script>
+
+<div class="wallet-holder">
+    <button
+        class="wallet"
+        on:click={() => {
+            copied = true;
+            copyURL(address);
+        }}
+    >
+        <div class="wallet-copy">
+            <CopyIcon regularIcon={true} check={copied} />
+        </div>
+
+        <div class="wallet-text">
+            <div class="wallet-name">{name}</div>
+            <span class="wallet-address">{address}</span>
+        </div>
+    </button>
+</div>
+
+<style>
+    .wallet-holder {
+        display: flex;
+        gap: 6px;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .wallet-name {
+        font-size: 13px;
+        color: var(--gray);
+        font-weight: 400;
+    }
+
+    .wallet {
+        overflow: clip;
+        justify-content: flex-start;
+        align-items: center;
+        text-align: left;
+        line-break: anywhere;
+        padding: 0;
+        gap: 10px;
+    }
+
+    .wallet-copy {
+        min-width: 42px;
+        max-width: 42px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-right: 1.5px var(--button-stroke) solid;
+        margin-left: 3px;
+    }
+
+    .wallet-text {
+        display: flex;
+        flex-direction: column;
+        padding: 6px 0;
+    }
+
+    .wallet-copy :global(svg) {
+        width: 18px;
+        height: 18px;
+    }
+
+    .wallet-text,
+    .wallet-address {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .wallet-address {
+        font-size: 14px;
+    }
+</style>
diff --git a/web/src/routes/donate/+page.svelte b/web/src/routes/donate/+page.svelte
index 73a34a98..b7efce7f 100644
--- a/web/src/routes/donate/+page.svelte
+++ b/web/src/routes/donate/+page.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
     import "@fontsource/redaction-10/400.css";
 
+    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 DonateShareCard from "$components/donate/DonateShareCard.svelte";
+
+    import IconDiamond from "@tabler/icons-svelte/IconDiamond.svelte";
 </script>
 
 <svelte:head>
@@ -16,17 +20,27 @@
 
 <main id="donate-page">
     <DonateBanner />
+
     <section id="support-options">
         <DonateOptionsCard />
         <DonateShareCard />
     </section>
-    <section id="donate-text" class="long-text-noto">
-        <p>
-            {$t("donate.body.motivation")}
-        </p>
-        <p>
-            {$t("donate.body.keep_going")}
-        </p>
+
+    <section id="motivation" class="long-text-noto">
+        <p>{$t("donate.body.motivation")}</p>
+        <p>{$t("donate.body.keep_going")}</p>
+    </section>
+
+    <section id="crypto">
+        <div id="crypto-section-header">
+            <IconDiamond />
+            <h3 id="crypto-title">{$t("donate.alternative.title")}</h3>
+        </div>
+        <div id="wallet-grid">
+            {#each Object.entries(donate.crypto) as [name, address]}
+                <WalletItem {name} {address} />
+            {/each}
+        </div>
     </section>
 </main>
 
@@ -61,8 +75,29 @@
         width: 100%;
     }
 
-    #donate-text {
-        padding: 0 24px;
+    #motivation,
+    #crypto {
+        padding: 0 12px;
+    }
+
+    #crypto-section-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 14px;
+    }
+
+    #crypto-section-header :global(svg) {
+        width: 22px;
+        height: 22px;
+        stroke-width: 1.8px;
+    }
+
+    #wallet-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 10px;
+        margin-bottom: 2em;
     }
 
     @media screen and (max-width: 760px) {
@@ -70,7 +105,12 @@
             flex-direction: column;
         }
 
-        #donate-text {
+        #wallet-grid {
+            grid-template-columns: 1fr;
+        }
+
+        #motivation,
+        #crypto {
             padding: 0 6px;
         }
     }