aea66d11e2
- useDirectMessages: correct nip44 getConversationKey (Uint8Array) + finalizeEvent EventTemplate (remove pubkey/unused ephemeralPubkey/bytesToHex)
- Access current-user metadata via useCurrentUser() spread instead of user.metadata across ~10 files (rename to userMetadata where author metadata already bound)
- useCrewGoal: explicit UseQueryResult<CrewGoal|null> return type (fixes CrewForm/CrewTreasuryCard {} inference)
- New useCommentCounts hook; fix EventsPage/MapPage misuse of useComments(string[])
- CoachDetailPage: typed pget/pbool accessors for craft-specific union fields
- MapPage: shop entries include tags/category to satisfy SkateSpot
- SkateGlobe: read event.tags; LabPage: remove duplicate serviceType; LabCrewsStrip: add 'judging'
- Icon prop widened to accept style; ReportDialog subtype guard; SecuritySettings/TourCard/EventsPage comparisons; CashuWallet onClick; ConversationPage recipients; useLoggedInAccounts NLoginType import; LicensePage icon; TourDetailPage ZapButton target + real npub link; TestApp useSkateRelay
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
229 lines
11 KiB
TypeScript
229 lines
11 KiB
TypeScript
import { useSeoMeta } from '@unhead/react';
|
|
import { Layout } from '@/components/Layout';
|
|
import { Link } from 'react-router-dom';
|
|
import {
|
|
Shield,
|
|
MapPin,
|
|
Globe,
|
|
Eye,
|
|
Lock,
|
|
Wifi,
|
|
Key,
|
|
CheckCircle2,
|
|
AlertTriangle,
|
|
} from 'lucide-react';
|
|
|
|
// ─── Small building blocks ────────────────────────────────────────────────────
|
|
|
|
function Section({
|
|
icon: Icon,
|
|
color,
|
|
title,
|
|
children,
|
|
}: {
|
|
icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
|
|
color: string;
|
|
title: string;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<section className="rounded-2xl border border-white/8 bg-white/3 p-5">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<div
|
|
className="w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0"
|
|
style={{ background: `${color}1a`, border: `1px solid ${color}40` }}
|
|
>
|
|
<Icon className="h-5 w-5" style={{ color }} />
|
|
</div>
|
|
<h2 className="font-black text-white uppercase tracking-wide text-lg">{title}</h2>
|
|
</div>
|
|
<div className="text-sm text-gray-400 leading-relaxed space-y-3">{children}</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function GoodPoint({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<div className="flex items-start gap-2.5">
|
|
<CheckCircle2 className="h-4 w-4 text-green-400 flex-shrink-0 mt-0.5" />
|
|
<span>{children}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Caveat({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<div className="flex items-start gap-2.5">
|
|
<AlertTriangle className="h-4 w-4 text-amber-400 flex-shrink-0 mt-0.5" />
|
|
<span>{children}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function PrivacyPage() {
|
|
useSeoMeta({
|
|
title: 'Privacy — SkateSpots',
|
|
description:
|
|
'How SkateSpots handles your data: your GPS stays on your device, spots you publish are public, and how to hide your IP with a VPN or Tor if you want to.',
|
|
});
|
|
|
|
return (
|
|
<Layout>
|
|
<div className="container max-w-2xl px-4 py-10 md:py-16">
|
|
{/* Hero */}
|
|
<div className="text-center mb-10">
|
|
<div
|
|
className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-[#ccff00]/10 border-2 border-[#ccff00]/40 mb-5"
|
|
>
|
|
<Shield className="h-8 w-8 text-[#ccff00]" />
|
|
</div>
|
|
<h1 className="text-4xl md:text-5xl font-black uppercase leading-none mb-4">
|
|
<span className="text-white">Your </span>
|
|
<span style={{ color: '#ccff00' }}>Privacy</span>
|
|
</h1>
|
|
<p className="text-gray-400 text-base max-w-lg mx-auto leading-relaxed">
|
|
No tracking, no ads, no data selling. Here's exactly what stays on your device,
|
|
what's public, and how to lock things down further if you want to.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{/* Location stays local */}
|
|
<Section icon={MapPin} color="#ff0040" title="Your location stays on your device">
|
|
<p>
|
|
When you tap <strong className="text-white">"Near Me,"</strong> your GPS location is
|
|
read on your device and used only to center the map and sort nearby spots.
|
|
</p>
|
|
<GoodPoint>It is <strong className="text-white">never</strong> published to Nostr.</GoodPoint>
|
|
<GoodPoint>It is <strong className="text-white">never</strong> sent to SkateSpots — there is no SkateSpots server collecting it.</GoodPoint>
|
|
<GoodPoint>It is <strong className="text-white">never</strong> shared with any third party.</GoodPoint>
|
|
<GoodPoint>
|
|
On the native app we use your phone's own location system directly and skip Google
|
|
Play Services — so it works on de-Googled phones (GrapheneOS, /e/OS) and Google
|
|
never sees it.
|
|
</GoodPoint>
|
|
<p className="text-xs text-gray-500">
|
|
Weather is off by default. When you turn it on, it looks up conditions for the
|
|
<em> spot's </em> public location — not yours.
|
|
</p>
|
|
</Section>
|
|
|
|
{/* Public by design */}
|
|
<Section icon={Eye} color="#ff6600" title="What's public by design">
|
|
<p>
|
|
SkateSpots is a shared map, so some things are meant to be seen by everyone. When you
|
|
choose to publish them, these are public on the Nostr network:
|
|
</p>
|
|
<Caveat>
|
|
<strong className="text-white">Spots you add</strong> — including their coordinates.
|
|
If you add a spot at your exact location, that location becomes public. Think before
|
|
you drop a pin on your own driveway.
|
|
</Caveat>
|
|
<Caveat><strong className="text-white">Reviews, comments, and your public profile</strong> (name, picture).</Caveat>
|
|
<Caveat>Who you follow, and public reactions/zaps.</Caveat>
|
|
<p className="text-xs text-gray-500">
|
|
A VPN or Tor does <strong>not</strong> hide the content of what you publish — a spot's
|
|
coordinates are public regardless. Privacy tools hide your network identity (your IP),
|
|
not the things you choose to post.
|
|
</p>
|
|
</Section>
|
|
|
|
{/* Encrypted */}
|
|
<Section icon={Lock} color="#14b8a6" title="What's private & encrypted">
|
|
<GoodPoint><strong className="text-white">Direct messages</strong> and <strong className="text-white">crew chats</strong> are end-to-end encrypted (NIP-17). Only the participants can read them.</GoodPoint>
|
|
<GoodPoint><strong className="text-white">My Stash</strong> — your private gear inventory — is encrypted to your own key.</GoodPoint>
|
|
<GoodPoint><strong className="text-white">Crew-only members</strong> can choose to be visible only to their crew-mates.</GoodPoint>
|
|
</Section>
|
|
|
|
{/* IP / network */}
|
|
<Section icon={Wifi} color="#a855f7" title="What leaves your device: your IP">
|
|
<p>
|
|
Like every website, the servers SkateSpots talks to can see your{' '}
|
|
<strong className="text-white">IP address</strong> (a rough indicator of your region).
|
|
This is normal for any web or map app and isn't unique to us. Those servers are:
|
|
</p>
|
|
<ul className="list-disc pl-5 space-y-1 text-gray-400">
|
|
<li><strong className="text-white">Map tiles</strong> (OpenStreetMap) — sees your IP and which area of the map you look at.</li>
|
|
<li><strong className="text-white">Nostr relays</strong> — see your IP when the app reads/publishes.</li>
|
|
<li><strong className="text-white">Weather</strong> (Open-Meteo, opt-in) and <strong className="text-white">image uploads</strong> (Blossom), when you use them.</li>
|
|
</ul>
|
|
<p>
|
|
None of these receive your GPS location — but they do see your IP. If you'd rather hide
|
|
that too, read the next part.
|
|
</p>
|
|
</Section>
|
|
|
|
{/* VPN / Tor */}
|
|
<Section icon={Globe} color="#06b6d4" title="Want more privacy? VPN or Tor (optional)">
|
|
<p>
|
|
For most skaters this isn't necessary — but if you want to hide your IP and rough
|
|
location from the servers above, you have two free options:
|
|
</p>
|
|
<div className="grid sm:grid-cols-2 gap-3 my-1">
|
|
<div className="p-3.5 rounded-xl bg-white/4 border border-white/8">
|
|
<p className="font-bold text-white text-sm mb-1">🛡️ A reputable VPN</p>
|
|
<p className="text-xs text-gray-500">
|
|
Hides your IP behind the VPN's servers. Easy, fast, works everywhere. Pick a
|
|
no-logs provider you trust (e.g. Mullvad). Avoid sketchy "free" VPNs.
|
|
</p>
|
|
</div>
|
|
<div className="p-3.5 rounded-xl bg-white/4 border border-white/8">
|
|
<p className="font-bold text-white text-sm mb-1">🧅 Tor Browser</p>
|
|
<p className="text-xs text-gray-500">
|
|
Free, maximum IP privacy, routes through multiple relays. Slower — maps and some
|
|
Nostr relays may lag or block Tor exit nodes. Great for the extra-cautious.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="rounded-xl bg-amber-500/8 border border-amber-500/20 p-3.5 space-y-2">
|
|
<p className="text-xs font-black uppercase tracking-wide text-amber-400 flex items-center gap-1.5">
|
|
<AlertTriangle className="h-3.5 w-3.5" /> Read this so you're not fooled
|
|
</p>
|
|
<Caveat>
|
|
A VPN/Tor hides your <strong className="text-white">IP</strong> — not the spots you
|
|
publish. A pin at your home is public whether or not you use a VPN.
|
|
</Caveat>
|
|
<Caveat>
|
|
Don't enable <strong className="text-white">"Near Me" / browser GPS</strong> if your
|
|
goal is to stay anonymous — precise GPS overrides any IP hiding.
|
|
</Caveat>
|
|
<Caveat>
|
|
No tool makes you fully "anonymous." These reduce what servers can infer about your
|
|
network location — that's it.
|
|
</Caveat>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Keys */}
|
|
<Section icon={Key} color="#facc15" title="Your keys, your account">
|
|
<p>
|
|
Your account is a cryptographic key pair that you own. The safest way to log in is a{' '}
|
|
<strong className="text-white">signer</strong> (Alby, nos2x, or Amber on Android) so
|
|
your secret key never gets pasted into the app.
|
|
</p>
|
|
<Caveat>
|
|
If you paste your <code className="text-[#ccff00] text-xs bg-white/5 px-1 py-0.5 rounded">nsec</code>{' '}
|
|
directly, it's stored in your browser. Use a signer extension instead when you can, and
|
|
keep your nsec backup somewhere safe offline.
|
|
</Caveat>
|
|
</Section>
|
|
|
|
{/* Footer */}
|
|
<div className="text-center pt-4 pb-2">
|
|
<p className="text-xs text-gray-600">
|
|
Questions? Ask{' '}
|
|
<span className="text-[#ccff00]">The Sasquatch</span> in-app, or read the{' '}
|
|
<Link to="/onboarding" className="text-[#ccff00]/80 hover:text-[#ccff00] underline">
|
|
getting started guide
|
|
</Link>
|
|
{' '}·{' '}
|
|
<Link to="/about" className="text-[#ccff00]/80 hover:text-[#ccff00] underline">
|
|
About
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|