From 882ae4087f7015758d68e4633c795f6628dc1f20 Mon Sep 17 00:00:00 2001
From: Gabriel Cozma <me@gxbs.dev>
Date: Mon, 2 Mar 2026 19:16:30 +0200
Subject: [PATCH] feat: crypto modal

in the founding page, remove coinbase and add a modal like the one in usebottles.com
---
 src/components/ConditionalLink.vue |   4 +-
 src/components/CryptoModal.vue     | 120 ++++++++++++++++
 src/components/loader.ts           |   2 +
 src/views/get-involved/Funding.vue | 213 ++++++++++++++++-------------
 4 files changed, 241 insertions(+), 98 deletions(-)
 create mode 100644 src/components/CryptoModal.vue

diff --git a/src/components/ConditionalLink.vue b/src/components/ConditionalLink.vue
index eeb7e1ec..50dbb064 100644
--- a/src/components/ConditionalLink.vue
+++ b/src/components/ConditionalLink.vue
@@ -1,7 +1,7 @@
 <template>
     <a v-if="link?.extLink" :href="link.to" target="_blank"><slot></slot></a>
     <router-link v-else-if="link?.to" :to="link.to"><slot></slot></router-link>
-    <div v-else><slot></slot></div>
+    <div v-else @click="link.action ? link.action() : null"><slot></slot></div>
 </template>
 
 <script setup lang="ts">
@@ -22,7 +22,7 @@ interface LinkOptional {
     extLink?: never;
 }
 
-export type LinkProps = LinkInternal | LinkExternal | LinkOptional;
+export type LinkProps = (LinkInternal | LinkExternal | LinkOptional) & { action?: () => void };
 
 defineProps<{ link: LinkProps }>();
 </script>
diff --git a/src/components/CryptoModal.vue b/src/components/CryptoModal.vue
new file mode 100644
index 00000000..eb407c4e
--- /dev/null
+++ b/src/components/CryptoModal.vue
@@ -0,0 +1,120 @@
+<template>
+  <div v-if="isOpen" class="modal anim--fadeIn modal--large-height">
+    <div class="overlay" @click="closeModal"></div>
+    <div class="modal-wrapper card">
+      <div class="card-header">
+        <h3>Crypto Addresses</h3>
+        <p>Use any of the crypto addresses below for donating</p>
+      </div>
+      <div class="flexList flexList--center">
+        <div
+          v-for="crypto in cryptoAddresses"
+          :key="crypto.symbol"
+          class="card card--min flexGrid-item"
+        >
+          <div class="card-header">
+            <h3>
+              <span>
+                {{ crypto.name }}
+              </span>
+              <small class="text--sm">
+                (<code>{{ crypto.symbol }}</code
+                >)
+              </small>
+            </h3>
+          </div>
+          <div class="card-content flexList">
+            <div class="text text--rich">
+              <pre><code>{{ crypto.address }}</code></pre>
+            </div>
+            <button
+              class="btn btn--secondary btn--small"
+              @click="copyAddress(crypto.address)"
+            >
+              <span class="material-symbols-outlined">content_copy</span>
+              <span>{{
+                copiedAddress === crypto.address ? "Copied!" : "Copy"
+              }}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="btn btn--link btn--circle btn--close" @click="closeModal">
+      <span class="material-symbols-outlined">close</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "CryptoModal",
+  props: {
+    isOpen: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      copiedAddress: null as string | null,
+      cryptoAddresses: [
+        {
+          symbol: "ETH",
+          name: "Ethereum",
+          address: "0x34281Ba05705BC360138c4181D52C1dbcC82E828",
+        },
+        {
+          symbol: "POL",
+          name: "Polygon",
+          address: "0x34281Ba05705BC360138c4181D52C1dbcC82E828",
+        },
+        {
+          symbol: "SOL",
+          name: "Solana",
+          address: "Hznx7nZKJcj5Uqt2czHMFwb4EMKnkw4yYPs25E7JtLTp",
+        },
+      ],
+    };
+  },
+  methods: {
+    async copyAddress(address: string) {
+      try {
+        await navigator.clipboard.writeText(address);
+        this.copiedAddress = address;
+        setTimeout(() => {
+          this.copiedAddress = null;
+        }, 2000);
+      } catch (err) {
+        console.error("Failed to copy address: ", err);
+        const el = document.createElement("textarea");
+        el.value = address;
+        document.body.appendChild(el);
+        el.select();
+        document.execCommand("copy");
+        document.body.removeChild(el);
+        this.copiedAddress = address;
+        setTimeout(() => {
+          this.copiedAddress = null;
+        }, 2000);
+      }
+    },
+    closeModal() {
+      this.$emit("close");
+    },
+    handleKeyboardEvent(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        this.closeModal();
+      }
+    },
+  },
+  mounted() {
+    window.addEventListener("keydown", this.handleKeyboardEvent);
+  },
+  unmounted() {
+    window.removeEventListener("keydown", this.handleKeyboardEvent);
+  },
+});
+</script>
diff --git a/src/components/loader.ts b/src/components/loader.ts
index 7278676e..1d7282be 100644
--- a/src/components/loader.ts
+++ b/src/components/loader.ts
@@ -24,6 +24,7 @@ import BeforeAfterSlider from "./BeforeAfterSlider.vue";
 
 import DynamicPanelOrchidRelease from "./DynamicPanelOrchidRelease.vue";
 import BentoOrchidRelease from "./BentoOrchidRelease.vue";
+import cryptoModal from "@/components/CryptoModal.vue";
 
 export default {
   install(app: App) {
@@ -38,6 +39,7 @@ export default {
     app.component("topbar", Topbar);
     app.component("site-footer", SiteFooter);
     app.component("share-modal", ShareModal);
+    app.component("crypto-modal", cryptoModal);
     app.component("image-showcase", ImageShowcase);
     app.component("card-header", CardHeader);
     app.component("card-footer", CardFooter);
diff --git a/src/views/get-involved/Funding.vue b/src/views/get-involved/Funding.vue
index 56516e0b..abefdef6 100644
--- a/src/views/get-involved/Funding.vue
+++ b/src/views/get-involved/Funding.vue
@@ -1,106 +1,127 @@
 <template>
-    <div class="flexList">
-        <div class="flexGrid anim--fadeIn">
-            <card v-for="(item, index) in getInvolvedItems" :key="index" :item="item" :class="item.extraClasses">
-                <div v-if="item.bankTransferDetails" class="text text--rich">
-                    <pre><code>{{ item.bankTransferDetails.join('\n') }}</code></pre>
-                </div>
-                <badges :items="item.badges" />
-            </card>
-        </div>
-        <div class="spacer"></div>
-        <div class="text text--rich">
-            <p>* This platform optionally allows you to make your donation anonymous. If you choose to do so, we will not
-                receive your name or any other information about you.</p>
-            <p>Once you have made a donation, <a href="https://fabricators.ltd/en/contacts" target="_blank">contact us</a> to
-                give you the role of sponsor on our Discord server.</p>
+  <div class="flexList">
+    <div class="flexGrid anim--fadeIn">
+      <card
+        v-for="(item, index) in getInvolvedItems"
+        :key="index"
+        :item="item"
+        :class="item.extraClasses"
+        @click="item.action ? item.action() : null"
+      >
+        <div v-if="item.bankTransferDetails" class="text text--rich">
+          <pre><code>{{ item.bankTransferDetails.join('\n') }}</code></pre>
         </div>
+        <badges :items="item.badges" />
+      </card>
+    </div>
+    <div class="spacer"></div>
+    <div class="text text--rich">
+      <p>
+        * This platform optionally allows you to make your donation anonymous.
+        If you choose to do so, we will not receive your name or any other
+        information about you.
+      </p>
+      <p>
+        Once you have made a donation,
+        <a href="https://fabricators.ltd/contacts" target="_blank"
+          >contact us</a
+        >
+        to give you the role of sponsor on our Discord server.
+      </p>
     </div>
+  </div>
+  <crypto-modal :isOpen="cryptoModalOpen" @close="cryptoModalOpen = false" />
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 
 export default defineComponent({
-    name: 'get-involved-funding',
-    data() {
-        return {
-            getInvolvedItems: [
-                {
-                    icon: 'account_balance',
-                    iconPack: 'mdi',
-                    title: 'Bank Transfer',
-                    description: 'Bank Transfer is the most direct and least taxed way to support Vanilla OS. You can make a one-time donation of any amount.',
-                    bankTransferDetails: [
-                        'Account Name: FABRICATORS S.R.L.',
-                        'IBAN: IT30S0326811200052945656640',
-                        'BIC/SWIFT: SELBIT2BXXX',
-                    ],
-                    extraClasses: ['flexGrid-item--2'],
-                    badges: [
-                        {
-                            text: 'Recommended for European users',
-                            color: 'green',
-                        }
-                    ]
-                },
-                {
-                    to: "https://commerce.coinbase.com/checkout/298fbe03-5b48-4202-8371-5345463c7963",
-                    extLink: true,
-                    type: 'clickable',
-                    icon: 'fa-solid fa-bitcoin-sign',
-                    iconPack: 'fa',
-                    title: 'Cryptocurrencies',
-                    description: 'Cryptocurrencies allows for anonymous and less-taxed donations. You can make a one-time donation of any amount. The exchange rate is subject to change according to the market.',
-                    badges: [
-                        {
-                            text: 'Anonymous',
-                        }
-                    ]
-                },
-                {
-                    to: "https://liberapay.com/fabricators",
-                    extLink: true,
-                    type: 'clickable',
-                    icon: 'fa-solid fa-coins',
-                    iconPack: 'fa',
-                    title: 'Liberapay',
-                    description: 'Liberapay is a convenient way to make recurring donations.',
-                    badges: [
-                        {
-                            text: 'Recommended for European users',
-                            color: 'green',
-                        },
-                        {
-                            text: 'Anonymous*',
-                        }
-                    ]
-                },
-                {
-                    to: "https://github.com/sponsors/Vanilla-OS",
-                    extLink: true,
-                    type: 'clickable',
-                    icon: 'fa-brands fa-github',
-                    iconPack: 'fa',
-                    title: 'GitHub Sponsors',
-                    description: 'GitHub Sponsors is a convenient way to make one-time or recurring donations.',
-                    badges: [
-                        {
-                            text: 'Anonymous*',
-                        }
-                    ]
-                },
-                {
-                    to: "https://fabricators.ltd/en/contacts",
-                    extLink: true,
-                    type: 'clickable',
-                    icon: 'handshake',
-                    iconPack: 'mdi',
-                    title: 'Custom',
-                    description: 'Contact us to discuss a custom donation method or a different sponsorship arrangement.',
-                },
-            ],
-        };
-    },
+  name: "get-involved-funding",
+  data() {
+    return {
+      cryptoModalOpen: false,
+      getInvolvedItems: [
+        {
+          icon: "account_balance",
+          iconPack: "mdi",
+          title: "Bank Transfer",
+          description:
+            "Bank Transfer is the most direct and least taxed way to support Vanilla OS. You can make a one-time donation of any amount.",
+          bankTransferDetails: [
+            "Account Name: FABRICATORS S.R.L.",
+            "IBAN: IT30S0326811200052945656640",
+            "BIC/SWIFT: SELBIT2BXXX",
+          ],
+          extraClasses: ["flexGrid-item--2"],
+          badges: [
+            {
+              text: "Recommended for European users",
+              color: "green",
+            },
+          ],
+        },
+        {
+          action: () => (this.cryptoModalOpen = true),
+          extLink: false,
+          type: "clickable",
+          icon: "fa-solid fa-bitcoin-sign",
+          iconPack: "fa",
+          title: "Cryptocurrencies",
+          description:
+            "Cryptocurrencies allows for anonymous and less-taxed donations. You can make a one-time donation of any amount. The exchange rate is subject to change according to the market.",
+          badges: [
+            {
+              text: "Anonymous",
+            },
+          ],
+        },
+        {
+          to: "https://liberapay.com/fabricators",
+          extLink: true,
+          type: "clickable",
+          icon: "fa-solid fa-coins",
+          iconPack: "fa",
+          title: "Liberapay",
+          description:
+            "Liberapay is a convenient way to make recurring donations.",
+          badges: [
+            {
+              text: "Recommended for European users",
+              color: "green",
+            },
+            {
+              text: "Anonymous*",
+            },
+          ],
+        },
+        {
+          to: "https://github.com/sponsors/Vanilla-OS",
+          extLink: true,
+          type: "clickable",
+          icon: "fa-brands fa-github",
+          iconPack: "fa",
+          title: "GitHub Sponsors",
+          description:
+            "GitHub Sponsors is a convenient way to make one-time or recurring donations.",
+          badges: [
+            {
+              text: "Anonymous*",
+            },
+          ],
+        },
+        {
+          to: "https://fabricators.ltd/contacts",
+          extLink: true,
+          type: "clickable",
+          icon: "handshake",
+          iconPack: "mdi",
+          title: "Custom",
+          description:
+            "Contact us to discuss a custom donation method or a different sponsorship arrangement.",
+        },
+      ],
+    };
+  },
 });
 </script>