ui: move streak stats out of wallet button, add share

Author: Adrijan-Petek

app/ClientPage.tsx

@@ -99,6 +99,25 @@ export default function ClientPage() {
     ? `${address.slice(0, 6)}...${address.slice(-4)}`
     : "Not connected";
 
+  const shareApp = async () => {
+    try {
+      const url = window.location.href;
+      const title = "StackUp";
+      const text = "Daily streaks on Stacks.";
+
+      if (navigator.share) {
+        await navigator.share({ title, text, url });
+        setStatus("Share sheet opened");
+        return;
+      }
+
+      await navigator.clipboard.writeText(url);
+      setStatus("Link copied");
+    } catch {
+      setStatus("Share failed");
+    }
+  };
+
   const stacksApiBase =
     STACKS_NETWORK === "mainnet"
       ? "https://api.mainnet.hiro.so"
@@ -630,9 +649,7 @@ export default function ClientPage() {
                   type="button"
                 >
                   <span className={styles.walletMain}>{shortAddress}</span>
-                  <span className={styles.walletSub}>
-                    Streak {streak ?? "-"} {" | "}Day {lastClaimDay ?? "-"}
-                  </span>
+                  <span className={styles.walletSub}>View on-chain</span>
                 </button>
                 <button
                   className={`${styles.button} ${styles.ghostButton}`}
@@ -657,8 +674,8 @@ export default function ClientPage() {
               <span> Claim daily.</span>
             </div>
             <p className={styles.lede}>
-              StackUp tracks your daily claim on Stacks {STACKS_NETWORK}. Claim
-              once per day to build momentum and unlock NFT badges.
+              Track one claim per day on Stacks {STACKS_NETWORK}. Earn streak badges
+              automatically as you hit milestones.
             </p>
             <div className={styles.heroMeta}>
               <div className={styles.metaItem}>
@@ -681,6 +698,27 @@ export default function ClientPage() {
                 {isLoading ? "Refreshing..." : "Refresh On-Chain"}
               </button>
             </div>
+            <div className={styles.statsRow}>
+              <div className={styles.statChip}>
+                <div className={styles.statLabel}>Streak</div>
+                <div className={styles.statValue}>
+                  {streak === null ? "—" : streak}
+                </div>
+              </div>
+              <div className={styles.statChip}>
+                <div className={styles.statLabel}>Last claim day</div>
+                <div className={styles.statValue}>
+                  {lastClaimDay === null ? "—" : lastClaimDay}
+                </div>
+              </div>
+              <button
+                className={`${styles.button} ${styles.ghostButton} ${styles.shareButton}`}
+                onClick={shareApp}
+                type="button"
+              >
+                Share
+              </button>
+            </div>
             <div className={styles.statusLine}>
               Status: <span>{status}</span>
             </div>
@@ -815,6 +853,21 @@ export default function ClientPage() {
           </div>
         </section>
 
+        <footer className={styles.footer}>
+          <div className={styles.footerInner}>
+            <div className={styles.footerText}>
+              StackUp is a lightweight streak tracker on Stacks.
+            </div>
+            <button
+              className={`${styles.button} ${styles.ghostButton} ${styles.shareButton}`}
+              onClick={shareApp}
+              type="button"
+            >
+              Share
+            </button>
+          </div>
+        </footer>
+
         {adminUnlocked && adminOpen ? (
           <div
             className={styles.modalBackdrop}

app/page.module.css

@@ -50,7 +50,7 @@
 }
 
 .headline {
-  font-size: clamp(36px, 4.2vw, 56px);
+  font-size: clamp(30px, 3.2vw, 46px);
   font-weight: 700;
   line-height: 1.05;
   letter-spacing: -0.02em;
@@ -63,9 +63,9 @@
 .lede {
   margin-top: 16px;
   color: var(--muted);
-  font-size: 16px;
+  font-size: 15px;
   line-height: 1.6;
-  max-width: 520px;
+  max-width: 56ch;
 }
 
 .heroMeta {
@@ -104,6 +104,45 @@
   margin-top: 20px;
 }
 
+.statsRow {
+  margin-top: 14px;
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.statChip {
+  padding: 10px 12px;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.06);
+  min-width: 128px;
+}
+
+[data-theme="light"] .statChip {
+  border-color: rgba(0, 0, 0, 0.12);
+  background: rgba(255, 255, 255, 0.6);
+}
+
+.statLabel {
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.statValue {
+  margin-top: 4px;
+  font-size: 16px;
+  font-weight: 800;
+  color: var(--text);
+}
+
+.shareButton {
+  white-space: nowrap;
+}
+
 .panelGrid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -511,6 +550,29 @@
   color: var(--muted);
 }
 
+.footer {
+  margin-top: 8px;
+  padding-top: 10px;
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+[data-theme="light"] .footer {
+  border-top-color: rgba(0, 0, 0, 0.12);
+}
+
+.footerInner {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.footerText {
+  font-size: 12px;
+  color: var(--muted);
+}
+
 @media (max-width: 720px) {
   .header {
     align-items: flex-start;
@@ -519,4 +581,9 @@
   .badgeGrid {
     grid-template-columns: 1fr;
   }
+
+  .statChip {
+    min-width: 0;
+    flex: 1 1 140px;
+  }
 }