Add testnet warning (#880)

* Add testnet warning

* Add watermarks to posts

* Call the test environment the Sandbox

src/lib/constants.ts

@@ -10,6 +10,22 @@ export const MAX_GRAPHEME_LENGTH = 300
 // but increasing limit per user feedback
 export const MAX_ALT_TEXT = 1000
 
+export function IS_LOCAL_DEV(url: string) {
+  return url.includes('localhost')
+}
+
+export function IS_STAGING(url: string) {
+  return !IS_LOCAL_DEV(url) && !IS_PROD(url)
+}
+
+export function IS_PROD(url: string) {
+  // NOTE
+  // until open federation, "production" is defined as the main server
+  // this definition will not work once federation is enabled!
+  // -prf
+  return url.startsWith('https://bsky.social')
+}
+
 export const PROD_TEAM_HANDLES = [
   'jay.bsky.social',
   'pfrazee.com',
@@ -43,14 +59,14 @@ export async function DEFAULT_FEEDS(
   serviceUrl: string,
   resolveHandle: (name: string) => Promise<string>,
 ) {
-  if (serviceUrl.includes('localhost')) {
+  if (IS_LOCAL_DEV(serviceUrl)) {
     // local dev
     const aliceDid = await resolveHandle('alice.test')
     return {
       pinned: [`at://${aliceDid}/app.bsky.feed.generator/alice-favs`],
       saved: [`at://${aliceDid}/app.bsky.feed.generator/alice-favs`],
     }
-  } else if (serviceUrl.includes('staging')) {
+  } else if (IS_STAGING(serviceUrl)) {
     // staging
     return {
       pinned: [STAGING_DEFAULT_FEED('whats-hot')],
@@ -90,9 +106,9 @@ export const STAGING_LINK_META_PROXY =
 export const PROD_LINK_META_PROXY = 'https://cardyb.bsky.app/v1/extract?url='
 
 export function LINK_META_PROXY(serviceUrl: string) {
-  if (serviceUrl.includes('localhost')) {
+  if (IS_LOCAL_DEV(serviceUrl)) {
     return STAGING_LINK_META_PROXY
-  } else if (serviceUrl.includes('staging')) {
+  } else if (IS_STAGING(serviceUrl)) {
     return STAGING_LINK_META_PROXY
   } else {
     return PROD_LINK_META_PROXY

src/state/models/session.ts

@@ -10,6 +10,7 @@ import {isObj, hasProp} from 'lib/type-guards'
 import {networkRetry} from 'lib/async/retry'
 import {z} from 'zod'
 import {RootStoreModel} from './root-store'
+import {IS_PROD} from 'lib/constants'
 
 export type ServiceDescription = DescribeServer.OutputSchema
 
@@ -104,6 +105,13 @@ export class SessionModel {
     return this.accounts.filter(acct => acct.did !== this.data?.did)
   }
 
+  get isSandbox() {
+    if (!this.data) {
+      return false
+    }
+    return !IS_PROD(this.data.service)
+  }
+
   serialize(): unknown {
     return {
       data: this.data,

src/view/com/pager/FeedsTabBarMobile.tsx

@@ -62,7 +62,9 @@ export const FeedsTabBar = observer(
               />
             </TouchableOpacity>
           </View>
-          <Text style={[brandBlue, s.bold, styles.title]}>Bluesky</Text>
+          <Text style={[brandBlue, s.bold, styles.title]}>
+            {store.session.isSandbox ? 'SANDBOX' : 'Bluesky'}
+          </Text>
           <View style={[pal.view]}>
             <Link
               href="/settings/saved-feeds"

src/view/com/post-thread/PostThreadItem.tsx

@@ -25,6 +25,7 @@ import {PostCtrls} from '../util/post-ctrls/PostCtrls'
 import {PostHider} from '../util/moderation/PostHider'
 import {ContentHider} from '../util/moderation/ContentHider'
 import {ImageHider} from '../util/moderation/ImageHider'
+import {PostSandboxWarning} from '../util/PostSandboxWarning'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {usePalette} from 'lib/hooks/usePalette'
 import {formatCount} from '../util/numeric/format'
@@ -193,6 +194,7 @@ export const PostThreadItem = observer(function PostThreadItem({
         moderation={item.moderation.thread}
         accessibilityActions={accessibilityActions}
         onAccessibilityAction={onAccessibilityAction}>
+        <PostSandboxWarning />
         <View style={styles.layout}>
           <View style={styles.layoutAvi}>
             <Link
@@ -381,6 +383,7 @@ export const PostThreadItem = observer(function PostThreadItem({
               ]}
             />
           )}
+          <PostSandboxWarning />
           <View style={styles.layout}>
             <View style={styles.layoutAvi}>
               <Link href={authorHref} title={authorTitle} asAnchor>

src/view/com/posts/FeedItem.tsx

@@ -19,6 +19,7 @@ import {PostHider} from '../util/moderation/PostHider'
 import {ContentHider} from '../util/moderation/ContentHider'
 import {ImageHider} from '../util/moderation/ImageHider'
 import {RichText} from '../util/text/RichText'
+import {PostSandboxWarning} from '../util/PostSandboxWarning'
 import * as Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'
 import {s} from 'lib/styles'
@@ -245,6 +246,7 @@ export const FeedItem = observer(function ({
           </Text>
         </Link>
       )}
+      <PostSandboxWarning />
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>
           <Link href={authorHref} title={item.post.author.handle} asAnchor>

src/view/com/util/PostSandboxWarning.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {Text} from './text/Text'
+import {useStores} from 'state/index'
+import {usePalette} from 'lib/hooks/usePalette'
+
+export function PostSandboxWarning() {
+  const store = useStores()
+  const pal = usePalette('default')
+  if (store.session.isSandbox) {
+    return (
+      <View style={styles.container}>
+        <Text type="title-2xl" style={[pal.text, styles.text]}>
+          SANDBOX
+        </Text>
+      </View>
+    )
+  }
+  return null
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 6,
+    right: 10,
+  },
+  text: {
+    fontWeight: 'bold',
+    opacity: 0.07,
+  },
+})

src/view/shell/desktop/RightNav.tsx

@@ -15,15 +15,24 @@ import {formatCount} from 'view/com/util/numeric/format'
 export const DesktopRightNav = observer(function DesktopRightNav() {
   const store = useStores()
   const pal = usePalette('default')
+  const palError = usePalette('error')
 
   return (
     <View style={[styles.rightNav, pal.view]}>
       {store.session.hasSession && <DesktopSearch />}
       <View style={styles.message}>
-        <Text type="md" style={[pal.textLight, styles.messageLine]}>
+        {store.session.isSandbox ? (
-          Welcome to Bluesky! This is a beta application that's still in
+          <View style={[palError.view, styles.messageLine, s.p10]}>
-          development.
+            <Text type="md" style={[palError.text, s.bold]}>
-        </Text>
+              SANDBOX. Posts and accounts are not permanent.
+            </Text>
+          </View>
+        ) : (
+          <Text type="md" style={[pal.textLight, styles.messageLine]}>
+            Welcome to Bluesky! This is a beta application that's still in
+            development.
+          </Text>
+        )}
         <View style={[s.flexRow]}>
           <TextLink
             type="md"