feat: connect donation sats api, build donation sat skeleton, build donation sats mock api

src/features/Donations/components/DonateCard/DonateCard.tsx

@@ -57,7 +57,7 @@ export default function DonateCard() {
             <form onSubmit={requestPayment} className="mt-32 ">
                 <div className="input-wrapper">
                     <input
-                        className={` input-text input-removed-arrows`}
+                        className={`input-text input-removed-arrows`}
                         value={donationAmount} onChange={onChangeInput}
                         type="number"
                         placeholder="1,000"

src/features/Donations/pages/DonatePage/DonatePage.tsx

@@ -18,7 +18,7 @@ export default function DonatePage() {
                         items={[
                             {
                                 heading: "How are donations spent?",
-                                content: <p className="whitespace-pre-line">
+                                content: <p className=" whitespace-pre-line">
                                     Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there.
                                     <br />
                                     Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.
@@ -26,7 +26,7 @@ export default function DonatePage() {
                             },
                             {
                                 heading: "Who is working on BOLT🔩FUN?",
-                                content: <p className="whitespace-pre-line">
+                                content: <p className=" whitespace-pre-line">
                                     Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there.
                                     <br />
                                     Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.
@@ -34,7 +34,7 @@ export default function DonatePage() {
                             },
                             {
                                 heading: "How can makers win prizes?",
-                                content: <p className="whitespace-pre-line">
+                                content: <p className=" whitespace-pre-line">
                                     Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there.
                                     <br />
                                     Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.
@@ -42,7 +42,7 @@ export default function DonatePage() {
                             },
                             {
                                 heading: "How can I donate?",
-                                content: <p className="whitespace-pre-line">
+                                content: <p className=" whitespace-pre-line">
                                     Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there.
                                     <br />
                                     Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.

src/features/Donations/pages/DonatePage/DonationStats/DonationStats.tsx

@@ -1,32 +1,47 @@
 import { BiCoinStack } from "react-icons/bi";
 import { FiGrid } from "react-icons/fi";
 import { IoMedalOutline, IoRocketOutline } from "react-icons/io5";
+import { useDonationsStatsQuery } from "src/graphql";
+import { generateList } from "src/utils/helperFunctions";
 import StatCard from "../StatCard/StatCard";
+import StatCardSkeleton from "../StatCard/StatCard.Skeleton";
 
 
 export default function DonationStats() {
+
+    const donationsStatQuery = useDonationsStatsQuery();
+
+
+
     return (
-        <div className="grid sm:grid-cols-2 md:grid-cols-4 gap-16">
-            <StatCard
-                color="#8B5CF6"
-                label={<><BiCoinStack className='scale-125 mr-8' /> <span className="align-middle">Donations</span></>}
-                value='$2.6k'
-            />
-            <StatCard
-                color="#F59E0B"
-                label={<><IoRocketOutline className='scale-125 mr-8' /> <span className="align-middle">Tournaments</span></>}
-                value='1'
-            />
-            <StatCard
-                color="#22C55E"
-                label={<><IoMedalOutline className='scale-125 mr-8' /> <span className="align-middle">Prizes</span></>}
-                value='$2.5k'
-            />
-            <StatCard
-                color="#3B82F6"
-                label={<><FiGrid className='scale-125 mr-8' /> <span className="align-middle">Applications</span></>}
-                value='36'
-            />
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-16">
+
+            {donationsStatQuery.loading && generateList(<StatCardSkeleton />, 4)}
+
+            {!donationsStatQuery.loading &&
+                <>
+                    <StatCard
+                        color="#8B5CF6"
+                        label={<><BiCoinStack className='w-full lg:w-auto scale-125 mr-8' /> <span className="align-middle">Donations</span></>}
+                        value={donationsStatQuery.data?.getDonationsStats.donations}
+                    />
+                    <StatCard
+                        color="#F59E0B"
+                        label={<><IoRocketOutline className='w-full lg:w-auto scale-125 mr-8' /> <span className="align-middle">Tournaments</span></>}
+                        value={donationsStatQuery.data?.getDonationsStats.touranments}
+                    />
+                    <StatCard
+                        color="#22C55E"
+                        label={<><IoMedalOutline className='w-full lg:w-auto scale-125 mr-8' /> <span className="align-middle">Prizes</span></>}
+                        value={donationsStatQuery.data?.getDonationsStats.prizes}
+                    />
+                    <StatCard
+                        color="#3B82F6"
+                        label={<><FiGrid className='w-full lg:w-auto scale-125 mr-8' /> <span className="align-middle">Applications</span></>}
+                        value={donationsStatQuery.data?.getDonationsStats.applications}
+                    />
+                </>
+            }
         </div>
     )
 }

src/features/Donations/pages/DonatePage/DonationStats/donationStats.graphql

@@ -0,0 +1,8 @@
+query DonationsStats {
+  getDonationsStats {
+    prizes
+    touranments
+    donations
+    applications
+  }
+}

src/features/Donations/pages/DonatePage/Header/Header.tsx

@@ -6,7 +6,7 @@ import styles from './styles.module.scss'
 export default function Header() {
     return (
         <div className={`${styles.header}`}>
-            <div>
+            <div className='min-w-0'>
                 <div className="flex items-center gap-24 flex-col md:flex-row">
                     <div>
                         <h1 className="text-[54px] font-bolder">

src/features/Donations/pages/DonatePage/Header/styles.module.scss

@@ -4,8 +4,10 @@
   padding: 56px 0;
   min-height: calc(min(1080px, 90vh));
   background: #ffecf9;
-  background: linear-gradient(40deg, white -5%, #ffb7d963 74%, #e3faff61 100%);
+  background: linear-gradient(40deg, white 7%, #ffdadaa3 62%, #d0f6ff5c 96%);
+  background-size: 120% 120%;
 
+  animation: Animation 3s ease infinite;
   display: grid;
   grid-template-areas: ". content .";
   grid-template-columns: minmax(16px, 1fr) minmax(auto, 910px) minmax(16px, 1fr);
@@ -14,3 +16,15 @@
     grid-area: content;
   }
 }
+
+@keyframes Animation {
+  0% {
+    background-position: 0% 20%;
+  }
+  50% {
+    background-position: 20% 0%;
+  }
+  100% {
+    background-position: 0% 20%;
+  }
+}

src/features/Donations/pages/DonatePage/StatCard/StatCard.Skeleton.tsx

@@ -0,0 +1,15 @@
+import Skeleton from 'react-loading-skeleton'
+
+
+export default function StatCardSkeleton() {
+    return (
+        <div className="bg-white p-24 rounded-16 text-center" >
+            <p className="text-body4">
+                <Skeleton width={'10ch'} />
+            </p>
+            <p className="text-h2 mt-8">
+                <Skeleton width={'4ch'} />
+            </p>
+        </div>
+    )
+}

src/features/Donations/pages/DonatePage/StatCard/StatCard.stories.tsx

@@ -1,6 +1,7 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { FiGrid } from 'react-icons/fi'
 import StatCard from './StatCard';
+import StatCardSkeleton from './StatCard.Skeleton';
 
 export default {
     title: 'Donations/Donate Page/StatCard',
@@ -20,4 +21,9 @@ Default.args = {
     value: '36'
 }
 
+const LoadingTemplate: ComponentStory<typeof StatCard> = (args) => <div className="max-w-[220px]"><StatCardSkeleton ></StatCardSkeleton></div>
+
+export const Loading = LoadingTemplate.bind({});
+Loading.args = {
+}
 

src/features/Donations/pages/DonatePage/StatCard/StatCard.tsx

@@ -16,7 +16,7 @@ export default function StatCard(props: Props) {
             <p className="text-body4">
                 {props.label}
             </p>
-            <p className="text-h2 mt-8 font-bolder">
+            <p className="text-h3 sm:text-h2 mt-8 font-bolder">
                 {props.value}
             </p>
         </div>