Update donate

src/components/DonateModal.svelte

@@ -1,7 +1,15 @@
 <script>
-import { t } from 'svelte-i18n';
+  import { mdiCircleMultiple } from '@mdi/js';
+  import { t } from 'svelte-i18n';
 
   import Button from './Button.svelte';
+  import Icon from './Icon.svelte';
+
+  let showCrypto = false;
+
+  function showCryptoContent() {
+    showCrypto = true;
+  }
 </script>
 
 <div class="text-white ">
@@ -9,33 +17,74 @@ import { t } from 'svelte-i18n';
   <p class="mt-2">{$t('donate.message.1')}</p>
   <p class="mt-1">{$t('donate.message.2')}</p>
   <p class="mt-1">
-    {$t('donate.message.3')} <a
+    {$t('donate.message.3')}
-      target="_blank"
+    <a target="_blank" class="text-primary hover:underline" href="https://github.com/MadeBaruna/paimon-moe" alt="github"
-      class="text-primary hover:underline"
+      >Github</a
-      href="https://github.com/MadeBaruna/paimon-moe"
-      alt="github">Github</a
     >
   </p>
-  <div class="flex flex-col md:flex-row mt-2">
+  <div class="flex flex-col mt-2 gap-1">
-    <a class="flex-1 mb-1 md:mb-0 md:mr-1" href="https://ko-fi.com/baruna" target="_blank">
+    <div class="flex flex-col md:flex-row gap-1">
-      <Button className="w-full flex-1 flex flex-col items-center">
+      <a class="flex-1" href="https://ko-fi.com/baruna" target="_blank">
-        <div class="flex h-8 mb-1 items-center">
+        <Button className="w-full flex-1 flex flex-col items-center">
-          <img class="h-6 mr-1" src="/images/donation/ko-fi.png" alt="Ko-fi" />
+          <div class="flex h-8 mb-1 items-center">
-          <img class="h-6" src="/images/donation/paypal.png" alt="PayPal" />
+            <img class="h-6 mr-1" src="/images/donation/ko-fi.png" alt="Ko-fi" />
+            <img class="h-6" src="/images/donation/paypal.png" alt="PayPal" />
+          </div>
+          <span class="font-semibold">{$t('donate.kofi')}</span>
+        </Button>
+      </a>
+      <a class="flex-1" href="https://trakteer.id/baruna" target="_blank">
+        <Button className="w-full flex flex-col items-center">
+          <div class="flex mb-1 items-center">
+            <img class="h-8 mr-1" src="/images/donation/trakteer.png" alt="Trakteer" />
+            <img class="h-4 mr-1" src="/images/donation/gopay.png" alt="gopay" />
+            <img class="h-4 mr-1" src="/images/donation/ovo.png" alt="gopay" />
+            <img class="h-4" src="/images/donation/dana.png" alt="gopay" />
+          </div>
+          <span class="font-semibold">{$t('donate.trakteer')}</span>
+        </Button>
+      </a>
+    </div>
+    <div class="flex-1" href="https://trakteer.id/baruna" target="_blank">
+      {#if showCrypto}
+        <div
+          style="font-family: monospace;"
+          class="bg-background border-2 border-white border-opacity-25 p-2 rounded-xl flex flex-col whitespace-pre-wrap"
+        >
+          <table>
+            <tr>
+              <td class="pr-1 align-top">BTC</td>
+              <td class="align-top break-all">bc1qdaz2893tprp2dsce2mclhcjq5xdk4mzapvnm8r</td>
+            </tr>
+            <tr>
+              <td class="pr-1 align-top">ETH</td>
+              <td class="align-top break-all">0xD326831DFEf991F241B373F1Bc2966cf3Df140C6</td>
+            </tr>
+            <tr>
+              <td class="pr-1 align-top">DOGE</td>
+              <td class="align-top break-all">DDDJbGi9QUTNJrRKzHbDV4tS2iRuPZuGcR</td>
+            </tr>
+            <tr>
+              <td class="pr-1 align-top">LTC</td>
+              <td class="align-top break-all">ltc1q5ycw4dfqc9uekgenp4u9ctrp286yguqvfskprj</td>
+            </tr>
+            <tr>
+              <td class="pr-1 align-top">BCH</td>
+              <td class="align-top break-all">qqgn5pplwl4jr2eewgkc7y7vkxs7r4fgkyrvndtwc2</td>
+            </tr>
+            <tr>
+              <td class="pr-1 align-top">XMR</td>
+              <td class="align-top break-all">4AVX6AV2XaGZL6a69krzUALe2d6ZSZvDnNi3SuXE3zaMbT6fQyAnjMBRSH9rKn587QWcnvT6xtcdya5Fbexi45La1ZKdrA5
+              </td>
+            </tr>
+          </table>
         </div>
-        <span class="font-semibold">{$t('donate.kofi')}</span>
+      {:else}
-      </Button>
+        <Button className="w-full flex justify-center items-center" on:click={showCryptoContent}>
-    </a>
+          <Icon path={mdiCircleMultiple} className="mr-1" />
-    <a class="flex-1 md:ml-1" href="https://trakteer.id/baruna" target="_blank">
+          <span class="font-semibold">{$t('donate.crypto')}</span>
-      <Button className="w-full flex flex-col items-center">
+        </Button>
-        <div class="flex mb-1 items-center">
+      {/if}
-          <img class="h-8 mr-1" src="/images/donation/trakteer.png" alt="Trakteer" />
+    </div>
-          <img class="h-4 mr-1" src="/images/donation/gopay.png" alt="gopay" />
-          <img class="h-4 mr-1" src="/images/donation/ovo.png" alt="gopay" />
-          <img class="h-4" src="/images/donation/dana.png" alt="gopay" />
-        </div>
-        <span class="font-semibold">{$t('donate.trakteer')}</span>
-      </Button>
-    </a>
   </div>
 </div>

src/locales/en.json

@@ -492,7 +492,8 @@
       "If you like coding, you can also contributing to the project on"
     ],
     "kofi": "Support me on Ko-fi",
-    "trakteer": "Support me on Trakteer"
+    "trakteer": "Support me on Trakteer",
+    "crypto": "Support me with Crypto"
   },
   "reminder": {
     "notSupported": "Your browser does not support push notification, please try other browser!",

src/locales/id.json

@@ -491,8 +491,9 @@
       "Jika kamu ingin donasi, donasimu akan sangat membantu dalam meningkatkan webnya dan memotivasi saya untuk terus menambahkan hal-hal baru ke paimon.moe! Terimakasih banyak dan have fun, semoga kamu menyukainya!",
       "Jika kamu suka ngoding, kamu juga berkontribusi dalam projek ini di "
     ],
-    "kofi": "Support me on Ko-fi",
+    "kofi": "Support di Ko-fi",
-    "trakteer": "Support me on Trakteer"
+    "trakteer": "Support di Trakteer",
+    "crypto": "Support dengan Crypto"
   },
   "reminder": {
     "notSupported": "Browser mu tidak mensupport notifikasi, silahkan coba browser lain!",

src/locales/ru.json

@@ -489,7 +489,8 @@
       "Если вы любите программировать, вы также можете внести свой вклад в проект в"
     ],
     "kofi": "Поддержать через Ko-fi",
-    "trakteer": "Поддержать через Trakteer"
+    "trakteer": "Поддержать через Trakteer",
+    "crypto": "Поддержать с Crypto"
   },
   "reminder": {
     "notSupported": "Ваш браузер не поддерживает push-уведомления, попробуйте другой браузер!",