Add fallback

src/components/Prompt.tsx

@@ -59,7 +59,9 @@ export function Outer({
 export function TitleText({children}: React.PropsWithChildren<{}>) {
   const {titleId} = React.useContext(Context)
   return (
-    <Text nativeID={titleId} style={[a.text_2xl, a.font_bold, a.pb_sm]}>
+    <Text
+      nativeID={titleId}
+      style={[a.text_2xl, a.font_bold, a.pb_sm, a.leading_snug]}>
       {children}
     </Text>
   )

src/components/dialogs/nuxs/TenMillion/Trigger.tsx

@@ -1,34 +1,86 @@
 import React from 'react'
+import {View} from 'react-native'
 import Svg, {Circle, Path} from 'react-native-svg'
-import {msg} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {Nux, useUpsertNuxMutation} from '#/state/queries/nuxs'
-import {ViewStyleProp} from '#/alf'
+import {atoms as a, ViewStyleProp} from '#/alf'
 import {Button, ButtonProps} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {InlineLinkText} from '#/components/Link'
+import * as Prompt from '#/components/Prompt'
 import {TenMillion} from './'
 
 export function Trigger({children}: {children: ButtonProps['children']}) {
   const {_} = useLingui()
   const {mutate: upsertNux} = useUpsertNuxMutation()
   const [show, setShow] = React.useState(false)
+  const [fallback, setFallback] = React.useState(false)
+  const control = Prompt.usePromptControl()
 
   const handleOnPress = () => {
-    setShow(true)
-    upsertNux({
-      id: Nux.TenMillionDialog,
-      completed: true,
-      data: undefined,
-    })
+    if (!fallback) {
+      setShow(true)
+      upsertNux({
+        id: Nux.TenMillionDialog,
+        completed: true,
+        data: undefined,
+      })
+    } else {
+      control.open()
+    }
+  }
+
+  const onHandleFallback = () => {
+    setFallback(true)
+    control.open()
   }
 
   return (
     <>
-      <Button label={_(msg`Celebrating 10M users!`)} onPress={handleOnPress}>
+      <Button
+        label={_(msg`Bluesky is celebrating 10 million users!`)}
+        onPress={handleOnPress}>
         {children}
       </Button>
 
-      {show && <TenMillion showTimeout={0} onClose={() => setShow(false)} />}
+      {show && !fallback && (
+        <TenMillion
+          showTimeout={0}
+          onClose={() => setShow(false)}
+          onFallback={onHandleFallback}
+        />
+      )}
+
+      <Prompt.Outer control={control}>
+        <View style={{maxWidth: 300}}>
+          <Prompt.TitleText>
+            <Trans>Bluesky is celebrating 10 million users!</Trans>
+          </Prompt.TitleText>
+        </View>
+        <Prompt.DescriptionText>
+          <Trans>
+            Together, we're rebuilding the social internet. We're glad you're
+            here.
+          </Trans>
+        </Prompt.DescriptionText>
+        <Prompt.DescriptionText>
+          <Trans>
+            To learn more,{' '}
+            <InlineLinkText
+              label={_(msg`View our post`)}
+              to="/profile/bsky.app/post/3l47prg3wgy23"
+              onPress={() => {
+                control.close()
+              }}
+              style={[a.text_md, a.leading_snug]}>
+              <Trans>check out our post.</Trans>
+            </InlineLinkText>
+          </Trans>
+        </Prompt.DescriptionText>
+        <Dialog.Close />
+      </Prompt.Outer>
     </>
   )
 }

src/components/dialogs/nuxs/TenMillion/index.tsx

@@ -90,9 +90,11 @@ function Frame({children}: {children: React.ReactNode}) {
 export function TenMillion({
   showTimeout,
   onClose,
+  onFallback,
 }: {
   showTimeout?: number
   onClose?: () => void
+  onFallback?: () => void
 }) {
   const agent = useAgent()
   const nuxDialogs = useNuxDialogContext()
@@ -126,6 +128,7 @@ export function TenMillion({
         } else {
           // should be rare
           nuxDialogs.dismissActiveNux()
+          onFallback?.()
         }
       }
     }
@@ -134,6 +137,7 @@ export function TenMillion({
       fetching.current = true
       networkRetry(3, fetchUserNumber).catch(() => {
         nuxDialogs.dismissActiveNux()
+        onFallback?.()
       })
     }
   }, [
@@ -142,6 +146,7 @@ export function TenMillion({
     setUserNumber,
     nuxDialogs.dismissActiveNux,
     nuxDialogs,
+    onFallback,
   ])
 
   return userNumber ? (