feat: opensats

src/components/Donation/PlatinumSponsors.tsx

@@ -0,0 +1,27 @@
+import { useTranslation } from 'react-i18next'
+import Image from '../Image'
+import OpenSatsLogo from './open-sats-logo.svg'
+
+export default function PlatinumSponsors() {
+  const { t } = useTranslation()
+
+  return (
+    <div className="space-y-2">
+      <div className="font-semibold text-center">{t('Platinum Sponsors')}</div>
+      <div className="flex flex-col gap-2 items-center">
+        <div
+          className="flex items-center gap-4 cursor-pointer"
+          onClick={() => window.open('https://opensats.org/', '_blank')}
+        >
+          <Image
+            image={{
+              url: OpenSatsLogo
+            }}
+            className="h-11"
+          />
+          <div className="text-2xl font-semibold">OpenSats</div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/Donation/RecentSupporters.tsx

@@ -1,9 +1,9 @@
 import { formatAmount } from '@/lib/lightning'
 import lightning, { TRecentSupporter } from '@/services/lightning.service'
 import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import UserAvatar from '../UserAvatar'
 import Username from '../Username'
-import { useTranslation } from 'react-i18next'
 
 export default function RecentSupporters() {
   const { t } = useTranslation()
@@ -32,7 +32,9 @@ export default function RecentSupporters() {
               <UserAvatar userId={item.pubkey} />
               <div className="flex-1 w-0">
                 <Username className="font-semibold w-fit" userId={item.pubkey} />
-                <div className="text-xs text-muted-foreground line-clamp-3">{item.comment}</div>
+                <div className="text-xs text-muted-foreground line-clamp-3 select-text">
+                  {item.comment}
+                </div>
               </div>
             </div>
             <div className="font-semibold text-yellow-400 shrink-0">

src/components/Donation/index.tsx

@@ -5,6 +5,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ZapDialog from '../ZapDialog'
 import RecentSupporters from './RecentSupporters'
+import PlatinumSponsors from './PlatinumSponsors'
 
 export default function Donation({ className }: { className?: string }) {
   const { t } = useTranslation()
@@ -39,6 +40,7 @@ export default function Donation({ className }: { className?: string }) {
           )
         })}
       </div>
+      <PlatinumSponsors />
       <RecentSupporters />
       <ZapDialog
         open={open}

src/components/Donation/open-sats-logo.svg

@@ -0,0 +1 @@
+<svg viewBox="344.564 330.278 111.737 91.218" width="53.87" height="43.61" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><radialGradient xlink:href="#logo_svg__a" id="logo_svg__b" cx="31.833" cy="29.662" fx="31.833" fy="29.662" r="42.553" gradientTransform="matrix(2 0 0 1.99696 -74.45 12.982)" gradientUnits="userSpaceOnUse"></radialGradient><radialGradient xlink:href="#logo_svg__a" id="logo_svg__c" cx="31.833" cy="29.662" fx="31.833" fy="29.662" r="42.553" gradientTransform="matrix(2 0 0 1.99696 -74.45 12.982)" gradientUnits="userSpaceOnUse"></radialGradient><linearGradient id="logo_svg__a"><stop style="stop-color:#ffb200;stop-opacity:1" offset="0"></stop><stop style="stop-color:#ff6b01;stop-opacity:1" offset="0.493"></stop></linearGradient></defs><path style="font-variation-settings:'wght' 700;opacity:1;fill:url(#logo_svg__b);fill-opacity:1;stroke-width:10.5833;stroke-linecap:round;stroke-linejoin:round" d="M32.574 39.319v3.81h16.11v-3.81z" transform="translate(324.22 304.883) scale(2.39915)"></path><path style="font-variation-settings:'wght' 700;fill:url(#logo_svg__c);fill-opacity:1;stroke-width:10.5833;stroke-linecap:round;stroke-linejoin:round" d="M14.85 16.062v4.551l8.944 5.681v.137l-8.945 5.68v4.551l13.029-8.555v-3.49Z" transform="translate(324.22 304.883) scale(2.39915)"></path></svg>