From 76c584d981f195a580e132b786e101b3d0d32380 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Mon, 9 Sep 2024 20:57:32 -0500
Subject: [PATCH 01/24] WIP

---
 src/App.native.tsx                           |   2 +
 src/App.web.tsx                              |   2 +
 src/components/dialogs/nudges/TenMillion.tsx | 100 +++++++++++++++++++
 src/components/dialogs/nudges/index.tsx      |  53 ++++++++++
 src/lib/hooks/useIntentHandler.ts            |   6 +-
 src/view/shell/Composer.web.tsx              |   1 +
 6 files changed, 163 insertions(+), 1 deletion(-)
 create mode 100644 src/components/dialogs/nudges/TenMillion.tsx
 create mode 100644 src/components/dialogs/nudges/index.tsx

diff --git a/src/App.native.tsx b/src/App.native.tsx
index 780d4058f90..95625bdff54 100644
--- a/src/App.native.tsx
+++ b/src/App.native.tsx
@@ -63,6 +63,7 @@ import {Provider as PortalProvider} from '#/components/Portal'
 import {Splash} from '#/Splash'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
 import {AudioCategory, PlatformInfo} from '../modules/expo-bluesky-swiss-army'
+import {NudgeDialogs} from '#/components/dialogs/nudges'
 
 SplashScreen.preventAutoHideAsync()
 
@@ -131,6 +132,7 @@ function InnerApp() {
                                           style={s.h100pct}>
                                           <TestCtrls />
                                           <Shell />
+                                          <NudgeDialogs />
                                         </GestureHandlerRootView>
                                       </ProgressGuideProvider>
                                     </MutedThreadsProvider>
diff --git a/src/App.web.tsx b/src/App.web.tsx
index 3017a3a264f..79120ffdbf7 100644
--- a/src/App.web.tsx
+++ b/src/App.web.tsx
@@ -50,6 +50,7 @@ import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
 import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
 import {Provider as PortalProvider} from '#/components/Portal'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
+import {NudgeDialogs} from '#/components/dialogs/nudges'
 
 function InnerApp() {
   const [isReady, setIsReady] = React.useState(false)
@@ -113,6 +114,7 @@ function InnerApp() {
                                       <SafeAreaProvider>
                                         <ProgressGuideProvider>
                                           <Shell />
+                                          <NudgeDialogs />
                                         </ProgressGuideProvider>
                                       </SafeAreaProvider>
                                     </MutedThreadsProvider>
diff --git a/src/components/dialogs/nudges/TenMillion.tsx b/src/components/dialogs/nudges/TenMillion.tsx
new file mode 100644
index 00000000000..9b5d5eae628
--- /dev/null
+++ b/src/components/dialogs/nudges/TenMillion.tsx
@@ -0,0 +1,100 @@
+import React from 'react'
+import {useLingui} from '@lingui/react'
+import {msg} from '@lingui/macro'
+import {View} from 'react-native'
+import ViewShot from 'react-native-view-shot'
+
+import {atoms as a, useBreakpoints, tokens} from '#/alf'
+import * as Dialog from '#/components/Dialog'
+import {Text} from '#/components/Typography'
+import {GradientFill} from '#/components/GradientFill'
+import {Button, ButtonText} from '#/components/Button'
+import {useComposerControls} from 'state/shell'
+
+import {useContext} from '#/components/dialogs/nudges'
+
+export function TenMillion() {
+  const {_} = useLingui()
+  const {controls} = useContext()
+  const {gtMobile} = useBreakpoints()
+  const {openComposer} = useComposerControls()
+
+  const imageRef = React.useRef<ViewShot>(null)
+
+  const share = () => {
+    if (imageRef.current && imageRef.current.capture) {
+      imageRef.current.capture().then(uri => {
+        controls.tenMillion.close(() => {
+          setTimeout(() => {
+            openComposer({
+              text: '10 milly, babyyy',
+              imageUris: [
+                {
+                  uri,
+                  width: 1000,
+                  height: 1000,
+                },
+              ],
+            })
+          }, 1e3)
+        })
+      })
+    }
+  }
+
+  return (
+    <Dialog.Outer control={controls.tenMillion}>
+      <Dialog.Handle />
+
+      <Dialog.ScrollableInner
+        label={_(msg`Ten Million`)}
+        style={
+          [
+            // gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
+          ]
+        }>
+        <View
+          style={[
+            a.relative,
+            a.w_full,
+            a.overflow_hidden,
+            {
+              paddingTop: '100%',
+            },
+          ]}>
+          <ViewShot
+            ref={imageRef}
+            options={{width: 2e3, height: 2e3}}
+            style={[a.absolute, a.inset_0]}>
+            <View
+              style={[
+                a.absolute,
+                a.inset_0,
+                a.align_center,
+                a.justify_center,
+                {
+                  top: -1,
+                  bottom: -1,
+                  left: -1,
+                  right: -1,
+                },
+              ]}>
+              <GradientFill gradient={tokens.gradients.midnight} />
+
+              <Text>10 milly, babyyy</Text>
+            </View>
+          </ViewShot>
+        </View>
+
+        <Button
+          label={_(msg`Generate`)}
+          size="medium"
+          variant="solid"
+          color="primary"
+          onPress={share}>
+          <ButtonText>{_(msg`Generate`)}</ButtonText>
+        </Button>
+      </Dialog.ScrollableInner>
+    </Dialog.Outer>
+  )
+}
diff --git a/src/components/dialogs/nudges/index.tsx b/src/components/dialogs/nudges/index.tsx
new file mode 100644
index 00000000000..357d4e2b402
--- /dev/null
+++ b/src/components/dialogs/nudges/index.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+
+import * as Dialog from '#/components/Dialog'
+
+import {TenMillion} from '#/components/dialogs/nudges/TenMillion'
+
+type Context = {
+  controls: {
+    tenMillion: Dialog.DialogOuterProps['control']
+  }
+}
+
+const Context = React.createContext<Context>({
+  // @ts-ignore
+  controls: {}
+})
+
+export function useContext() {
+  return React.useContext(Context)
+}
+
+let SHOWN = false
+
+export function NudgeDialogs() {
+  const tenMillion = Dialog.useDialogControl()
+
+  const ctx = React.useMemo(() => {
+    return {
+      controls: {
+        tenMillion
+      }
+    }
+  }, [tenMillion])
+
+  React.useEffect(() => {
+    const t = setTimeout(() => {
+      if (!SHOWN) {
+        SHOWN = true
+        ctx.controls.tenMillion.open()
+      }
+    }, 2e3)
+
+    return () => {
+      clearTimeout(t)
+    }
+  }, [ctx])
+
+  return (
+    <Context.Provider value={ctx}>
+      <TenMillion />
+    </Context.Provider>
+  )
+}
diff --git a/src/lib/hooks/useIntentHandler.ts b/src/lib/hooks/useIntentHandler.ts
index 8cccda48fbc..67f1c2c386a 100644
--- a/src/lib/hooks/useIntentHandler.ts
+++ b/src/lib/hooks/useIntentHandler.ts
@@ -71,7 +71,7 @@ export function useIntentHandler() {
   }, [incomingUrl, composeIntent, verifyEmailIntent])
 }
 
-function useComposeIntent() {
+export function useComposeIntent() {
   const closeAllActiveElements = useCloseAllActiveElements()
   const {openComposer} = useComposerControls()
   const {hasSession} = useSession()
@@ -97,6 +97,10 @@ function useComposeIntent() {
           if (part.includes('https://') || part.includes('http://')) {
             return false
           }
+          console.log({
+            part,
+            text: VALID_IMAGE_REGEX.test(part),
+          })
           // We also should just filter out cases that don't have all the info we need
           return VALID_IMAGE_REGEX.test(part)
         })
diff --git a/src/view/shell/Composer.web.tsx b/src/view/shell/Composer.web.tsx
index 42696139e0a..ee1ed66226d 100644
--- a/src/view/shell/Composer.web.tsx
+++ b/src/view/shell/Composer.web.tsx
@@ -63,6 +63,7 @@ export function Composer({}: {winHeight: number}) {
           mention={state.mention}
           openEmojiPicker={onOpenPicker}
           text={state.text}
+          imageUris={state.imageUris}
         />
       </View>
       <EmojiPicker state={pickerState} close={onClosePicker} />

From 3c8b3b47823475b93a92dcf82a4cabbda625c323 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 10 Sep 2024 14:23:30 -0500
Subject: [PATCH 02/24] Progress on desktoip

---
 src/alf/index.tsx                            |  18 +-
 src/components/dialogs/nudges/TenMillion.tsx | 330 ++++++++++++++++---
 src/view/icons/Logomark.tsx                  |  29 ++
 3 files changed, 331 insertions(+), 46 deletions(-)
 create mode 100644 src/view/icons/Logomark.tsx

diff --git a/src/alf/index.tsx b/src/alf/index.tsx
index 5fa7d3b1a17..d699de6a5bb 100644
--- a/src/alf/index.tsx
+++ b/src/alf/index.tsx
@@ -18,9 +18,17 @@ export * from '#/alf/util/themeSelector'
 export const Context = React.createContext<{
   themeName: ThemeName
   theme: Theme
+  themes: ReturnType<typeof createThemes>
 }>({
   themeName: 'light',
   theme: defaultTheme,
+  themes: createThemes({
+    hues: {
+      primary: BLUE_HUE,
+      negative: RED_HUE,
+      positive: GREEN_HUE,
+    },
+  }),
 })
 
 export function ThemeProvider({
@@ -42,18 +50,22 @@ export function ThemeProvider({
     <Context.Provider
       value={React.useMemo(
         () => ({
+          themes,
           themeName: themeName,
           theme: theme,
         }),
-        [theme, themeName],
+        [theme, themeName, themes],
       )}>
       {children}
     </Context.Provider>
   )
 }
 
-export function useTheme() {
-  return React.useContext(Context).theme
+export function useTheme(theme?: ThemeName) {
+  const ctx = React.useContext(Context)
+  return React.useMemo(() => {
+    return theme ? ctx.themes[theme] : ctx.theme
+  }, [theme, ctx])
 }
 
 export function useBreakpoints() {
diff --git a/src/components/dialogs/nudges/TenMillion.tsx b/src/components/dialogs/nudges/TenMillion.tsx
index 9b5d5eae628..869056977bb 100644
--- a/src/components/dialogs/nudges/TenMillion.tsx
+++ b/src/components/dialogs/nudges/TenMillion.tsx
@@ -1,25 +1,74 @@
 import React from 'react'
-import {useLingui} from '@lingui/react'
-import {msg} from '@lingui/macro'
 import {View} from 'react-native'
 import ViewShot from 'react-native-view-shot'
+import {moderateProfile} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
-import {atoms as a, useBreakpoints, tokens} from '#/alf'
+import {sanitizeDisplayName} from '#/lib/strings/display-names'
+import {sanitizeHandle} from '#/lib/strings/handles'
+import {isNative} from '#/platform/detection'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {useProfileQuery} from '#/state/queries/profile'
+import {useSession} from '#/state/session'
+import {useComposerControls} from 'state/shell'
+import {formatCount} from '#/view/com/util/numeric/format'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
+import {Logomark} from '#/view/icons/Logomark'
+import {
+  atoms as a,
+  ThemeProvider,
+  tokens,
+  useBreakpoints,
+  useTheme,
+} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
-import {Text} from '#/components/Typography'
+import {useContext} from '#/components/dialogs/nudges'
+import {Divider} from '#/components/Divider'
 import {GradientFill} from '#/components/GradientFill'
-import {Button, ButtonText} from '#/components/Button'
-import {useComposerControls} from 'state/shell'
+import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox'
+import {Image_Stroke2_Corner0_Rounded as ImageIcon} from '#/components/icons/Image'
+import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
 
-import {useContext} from '#/components/dialogs/nudges'
+const RATIO = 8 / 10
+const WIDTH = 2000
+const HEIGHT = WIDTH * RATIO
+
+function getFontSize(count: number) {
+  const length = count.toString().length
+  if (length < 7) {
+    return 80
+  } else if (length < 5) {
+    return 100
+  } else {
+    return 70
+  }
+}
 
 export function TenMillion() {
-  const {_} = useLingui()
+  const t = useTheme()
+  const lightTheme = useTheme('light')
+  const {_, i18n} = useLingui()
   const {controls} = useContext()
   const {gtMobile} = useBreakpoints()
   const {openComposer} = useComposerControls()
-
   const imageRef = React.useRef<ViewShot>(null)
+  const {currentAccount} = useSession()
+  const {isLoading: isProfileLoading, data: profile} = useProfileQuery({
+    did: currentAccount!.did,
+  }) // TODO PWI
+  const moderationOpts = useModerationOpts()
+  const moderation = React.useMemo(() => {
+    return profile && moderationOpts
+      ? moderateProfile(profile, moderationOpts)
+      : undefined
+  }, [profile, moderationOpts])
+
+  const isLoading = isProfileLoading || !moderation || !profile
+
+  const userNumber = 56738
 
   const share = () => {
     if (imageRef.current && imageRef.current.capture) {
@@ -31,8 +80,8 @@ export function TenMillion() {
               imageUris: [
                 {
                   uri,
-                  width: 1000,
-                  height: 1000,
+                  width: WIDTH,
+                  height: HEIGHT,
                 },
               ],
             })
@@ -48,52 +97,247 @@ export function TenMillion() {
 
       <Dialog.ScrollableInner
         label={_(msg`Ten Million`)}
-        style={
-          [
-            // gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
-          ]
-        }>
+        style={[
+          {
+            padding: 0,
+          },
+          // gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
+        ]}>
         <View
           style={[
-            a.relative,
-            a.w_full,
+            a.rounded_md,
             a.overflow_hidden,
-            {
-              paddingTop: '100%',
+            isNative && {
+              borderTopLeftRadius: 40,
+              borderTopRightRadius: 40,
             },
           ]}>
-          <ViewShot
-            ref={imageRef}
-            options={{width: 2e3, height: 2e3}}
-            style={[a.absolute, a.inset_0]}>
+          <ThemeProvider theme="light">
             <View
               style={[
-                a.absolute,
-                a.inset_0,
-                a.align_center,
-                a.justify_center,
+                a.relative,
+                a.w_full,
+                a.overflow_hidden,
+                {
+                  paddingTop: '80%',
+                },
+              ]}>
+              <ViewShot
+                ref={imageRef}
+                options={{width: WIDTH, height: HEIGHT}}
+                style={[a.absolute, a.inset_0]}>
+                <View
+                  style={[
+                    a.absolute,
+                    a.inset_0,
+                    a.align_center,
+                    a.justify_center,
+                    {
+                      top: -1,
+                      bottom: -1,
+                      left: -1,
+                      right: -1,
+                      paddingVertical: 32,
+                      paddingHorizontal: 48,
+                    },
+                  ]}>
+                  <GradientFill gradient={tokens.gradients.bonfire} />
+
+                  {isLoading ? (
+                    <Loader size="xl" fill="white" />
+                  ) : (
+                    <View
+                      style={[
+                        a.flex_1,
+                        a.w_full,
+                        a.align_center,
+                        a.justify_center,
+                        a.rounded_md,
+                        {
+                          backgroundColor: 'white',
+                          shadowRadius: 32,
+                          shadowOpacity: 0.1,
+                          elevation: 24,
+                          shadowColor: tokens.gradients.bonfire.values[0][1],
+                        },
+                      ]}>
+                      <View
+                        style={[
+                          a.absolute,
+                          a.px_xl,
+                          a.py_xl,
+                          {
+                            top: 0,
+                            left: 0,
+                          },
+                        ]}>
+                        <Logomark fill={t.palette.primary_500} width={36} />
+                      </View>
+
+                      {/* Centered content */}
+                      <View
+                        style={[
+                          {
+                            paddingBottom: 48,
+                          },
+                        ]}>
+                        <Text
+                          style={[
+                            a.text_md,
+                            a.font_bold,
+                            a.text_center,
+                            a.pb_xs,
+                            lightTheme.atoms.text_contrast_medium,
+                          ]}>
+                          <Trans>
+                            Celebrating {formatCount(i18n, 10000000)} users
+                          </Trans>{' '}
+                          🎉
+                        </Text>
+                        <Text
+                          style={[
+                            a.relative,
+                            a.text_center,
+                            {
+                              fontStyle: 'italic',
+                              fontSize: getFontSize(userNumber),
+                              fontWeight: '900',
+                              letterSpacing: -2,
+                            },
+                          ]}>
+                          <Text
+                            style={[
+                              a.absolute,
+                              {
+                                color: t.palette.primary_500,
+                                fontSize: 32,
+                                left: -18,
+                                top: 8,
+                              },
+                            ]}>
+                            #
+                          </Text>
+                          {i18n.number(userNumber)}
+                        </Text>
+                      </View>
+                      {/* End centered content */}
+
+                      <View
+                        style={[
+                          a.absolute,
+                          a.px_xl,
+                          a.py_xl,
+                          {
+                            bottom: 0,
+                            left: 0,
+                            right: 0,
+                          },
+                        ]}>
+                        <View style={[a.flex_row, a.align_center, a.gap_sm]}>
+                          <UserAvatar
+                            size={36}
+                            avatar={profile.avatar}
+                            moderation={moderation.ui('avatar')}
+                          />
+                          <View style={[a.gap_2xs, a.flex_1]}>
+                            <Text style={[a.text_sm, a.font_bold]}>
+                              {sanitizeDisplayName(
+                                profile.displayName ||
+                                  sanitizeHandle(profile.handle),
+                                moderation.ui('displayName'),
+                              )}
+                            </Text>
+                            <View style={[a.flex_row, a.justify_between]}>
+                              <Text
+                                style={[
+                                  a.text_sm,
+                                  a.font_semibold,
+                                  lightTheme.atoms.text_contrast_medium,
+                                ]}>
+                                {sanitizeHandle(profile.handle, '@')}
+                              </Text>
+
+                              {profile.createdAt && (
+                                <Text
+                                  style={[
+                                    a.text_sm,
+                                    a.font_semibold,
+                                    lightTheme.atoms.text_contrast_low,
+                                  ]}>
+                                  {i18n.date(profile.createdAt, {
+                                    dateStyle: 'long',
+                                  })}
+                                </Text>
+                              )}
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  )}
+                </View>
+              </ViewShot>
+            </View>
+          </ThemeProvider>
+
+          <View style={[gtMobile ? a.p_2xl : a.p_xl]}>
+            <Text
+              style={[
+                a.text_5xl,
+                a.pb_lg,
                 {
-                  top: -1,
-                  bottom: -1,
-                  left: -1,
-                  right: -1,
+                  fontWeight: '900',
                 },
               ]}>
-              <GradientFill gradient={tokens.gradients.midnight} />
+              You're part of the next wave of the internet.
+            </Text>
+
+            <Text style={[a.leading_snug, a.text_lg, a.pb_xl]}>
+              Online culture is too important to be controlled by a few
+              corporations.{' '}
+              <Text style={[a.leading_snug, a.text_lg, a.italic]}>
+                We’re dedicated to building an open foundation for the social
+                internet so that we can all shape its future.
+              </Text>
+            </Text>
+
+            <Divider />
+
+            <View
+              style={[
+                a.flex_row,
+                a.align_center,
+                a.justify_end,
+                a.gap_md,
+                a.pt_xl,
+              ]}>
+              <Text style={[a.text_md, a.italic, t.atoms.text_contrast_medium]}>
+                Brag a little ;)
+              </Text>
 
-              <Text>10 milly, babyyy</Text>
+              <Button
+                label={_(msg`Share image externally`)}
+                size="large"
+                variant="solid"
+                color="secondary"
+                shape="square"
+                onPress={share}>
+                <ButtonIcon icon={Share} />
+              </Button>
+              <Button
+                label={_(msg`Share image in post`)}
+                size="large"
+                variant="solid"
+                color="primary"
+                onPress={share}>
+                <ButtonText>{_(msg`Share post`)}</ButtonText>
+                <ButtonIcon position="right" icon={ImageIcon} />
+              </Button>
             </View>
-          </ViewShot>
+          </View>
         </View>
 
-        <Button
-          label={_(msg`Generate`)}
-          size="medium"
-          variant="solid"
-          color="primary"
-          onPress={share}>
-          <ButtonText>{_(msg`Generate`)}</ButtonText>
-        </Button>
+        <Dialog.Close />
       </Dialog.ScrollableInner>
     </Dialog.Outer>
   )
diff --git a/src/view/icons/Logomark.tsx b/src/view/icons/Logomark.tsx
new file mode 100644
index 00000000000..5715a1a404b
--- /dev/null
+++ b/src/view/icons/Logomark.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import Svg, {Path, PathProps, SvgProps} from 'react-native-svg'
+
+import {usePalette} from '#/lib/hooks/usePalette'
+
+const ratio = 54 / 61
+
+export function Logomark({
+  fill,
+  ...rest
+}: {fill?: PathProps['fill']} & SvgProps) {
+  const pal = usePalette('default')
+  // @ts-ignore it's fiiiiine
+  const size = parseInt(rest.width || 32)
+
+  return (
+    <Svg
+      fill="none"
+      viewBox="0 0 61 54"
+      {...rest}
+      width={size}
+      height={Number(size) * ratio}>
+      <Path
+        fill={fill || pal.text.color}
+        d="M13.223 3.602C20.215 8.832 27.738 19.439 30.5 25.13c2.762-5.691 10.284-16.297 17.278-21.528C52.824-.172 61-3.093 61 6.2c0 1.856-1.068 15.59-1.694 17.82-2.178 7.752-10.112 9.73-17.17 8.532 12.337 2.092 15.475 9.021 8.697 15.95-12.872 13.159-18.5-3.302-19.943-7.52-.264-.773-.388-1.135-.39-.827-.002-.308-.126.054-.39.827-1.442 4.218-7.071 20.679-19.943 7.52-6.778-6.929-3.64-13.858 8.697-15.95-7.058 1.197-14.992-.78-17.17-8.532C1.068 21.79 0 8.056 0 6.2 0-3.093 8.176-.172 13.223 3.602Z"
+      />
+    </Svg>
+  )
+}

From eaf0081623154df995e81f2ae430a723539df800 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 10 Sep 2024 16:20:19 -0500
Subject: [PATCH 03/24] WIP, avi not working on web

---
 src/components/dialogs/nudges/TenMillion.tsx | 423 +++++++++++--------
 src/lib/canvas.ts                            |  15 +
 src/view/com/util/UserAvatar.tsx             |   4 +
 3 files changed, 266 insertions(+), 176 deletions(-)
 create mode 100644 src/lib/canvas.ts

diff --git a/src/components/dialogs/nudges/TenMillion.tsx b/src/components/dialogs/nudges/TenMillion.tsx
index 869056977bb..2be5e3491c0 100644
--- a/src/components/dialogs/nudges/TenMillion.tsx
+++ b/src/components/dialogs/nudges/TenMillion.tsx
@@ -1,10 +1,12 @@
 import React from 'react'
 import {View} from 'react-native'
 import ViewShot from 'react-native-view-shot'
+import {Image} from 'expo-image'
 import {moderateProfile} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {getCanvas} from '#/lib/canvas'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {isNative} from '#/platform/detection'
@@ -32,6 +34,7 @@ import {Image_Stroke2_Corner0_Rounded as ImageIcon} from '#/components/icons/Ima
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 
+const DEBUG = false
 const RATIO = 8 / 10
 const WIDTH = 2000
 const HEIGHT = WIDTH * RATIO
@@ -47,6 +50,22 @@ function getFontSize(count: number) {
   }
 }
 
+function Frame({children}: {children: React.ReactNode}) {
+  return (
+    <View
+      style={[
+        a.relative,
+        a.w_full,
+        a.overflow_hidden,
+        {
+          paddingTop: '80%',
+        },
+      ]}>
+      {children}
+    </View>
+  )
+}
+
 export function TenMillion() {
   const t = useTheme()
   const lightTheme = useTheme('light')
@@ -54,7 +73,6 @@ export function TenMillion() {
   const {controls} = useContext()
   const {gtMobile} = useBreakpoints()
   const {openComposer} = useComposerControls()
-  const imageRef = React.useRef<ViewShot>(null)
   const {currentAccount} = useSession()
   const {isLoading: isProfileLoading, data: profile} = useProfileQuery({
     did: currentAccount!.did,
@@ -65,220 +83,273 @@ export function TenMillion() {
       ? moderateProfile(profile, moderationOpts)
       : undefined
   }, [profile, moderationOpts])
+  const [uri, setUri] = React.useState<string | null>(null)
 
-  const isLoading = isProfileLoading || !moderation || !profile
+  const isLoadingData = isProfileLoading || !moderation || !profile
+  const isLoadingImage = !uri
 
-  const userNumber = 56738
+  const userNumber = 56738 // TODO
+
+  const captureInProgress = React.useRef(false)
+  const imageRef = React.useRef<ViewShot>(null)
 
   const share = () => {
-    if (imageRef.current && imageRef.current.capture) {
-      imageRef.current.capture().then(uri => {
-        controls.tenMillion.close(() => {
-          setTimeout(() => {
-            openComposer({
-              text: '10 milly, babyyy',
-              imageUris: [
-                {
-                  uri,
-                  width: WIDTH,
-                  height: HEIGHT,
-                },
-              ],
-            })
-          }, 1e3)
-        })
+    if (uri) {
+      controls.tenMillion.close(() => {
+        setTimeout(() => {
+          openComposer({
+            text: '10 milly, babyyy',
+            imageUris: [
+              {
+                uri,
+                width: WIDTH,
+                height: HEIGHT,
+              },
+            ],
+          })
+        }, 1e3)
       })
     }
   }
 
-  return (
-    <Dialog.Outer control={controls.tenMillion}>
-      <Dialog.Handle />
+  const onCanvasReady = async () => {
+    if (
+      imageRef.current &&
+      imageRef.current.capture &&
+      !captureInProgress.current
+    ) {
+      captureInProgress.current = true
+      const uri = await imageRef.current.capture()
+      setUri(uri)
+    }
+  }
 
-      <Dialog.ScrollableInner
-        label={_(msg`Ten Million`)}
-        style={[
-          {
-            padding: 0,
-          },
-          // gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
-        ]}>
-        <View
-          style={[
-            a.rounded_md,
-            a.overflow_hidden,
-            isNative && {
-              borderTopLeftRadius: 40,
-              borderTopRightRadius: 40,
+  const download = async () => {
+    if (uri) {
+      const canvas = await getCanvas(uri)
+      const imgHref = canvas
+        .toDataURL('image/png')
+        .replace('image/png', 'image/octet-stream')
+      const link = document.createElement('a')
+      link.setAttribute('download', `Bluesky 10M Users.png`)
+      link.setAttribute('href', imgHref)
+      link.click()
+    }
+  }
+
+  const canvas = isLoadingData ? null : (
+    <View
+      style={[
+        a.absolute,
+        a.overflow_hidden,
+        DEBUG
+          ? {
+              width: 600,
+              height: 600 * RATIO,
+            }
+          : {
+              width: 1,
+              height: 1,
             },
-          ]}>
-          <ThemeProvider theme="light">
-            <View
-              style={[
-                a.relative,
-                a.w_full,
-                a.overflow_hidden,
-                {
-                  paddingTop: '80%',
-                },
-              ]}>
-              <ViewShot
-                ref={imageRef}
-                options={{width: WIDTH, height: HEIGHT}}
-                style={[a.absolute, a.inset_0]}>
+      ]}>
+      <View style={{width: 600}}>
+        <ThemeProvider theme="light">
+          <Frame>
+            <ViewShot
+              ref={imageRef}
+              options={{width: WIDTH, height: HEIGHT}}
+              style={[a.absolute, a.inset_0]}>
+              <View
+                style={[
+                  a.absolute,
+                  a.inset_0,
+                  a.align_center,
+                  a.justify_center,
+                  {
+                    top: -1,
+                    bottom: -1,
+                    left: -1,
+                    right: -1,
+                    paddingVertical: 32,
+                    paddingHorizontal: 48,
+                  },
+                ]}>
+                <GradientFill gradient={tokens.gradients.bonfire} />
+
                 <View
                   style={[
-                    a.absolute,
-                    a.inset_0,
+                    a.flex_1,
+                    a.w_full,
                     a.align_center,
                     a.justify_center,
+                    a.rounded_md,
                     {
-                      top: -1,
-                      bottom: -1,
-                      left: -1,
-                      right: -1,
-                      paddingVertical: 32,
-                      paddingHorizontal: 48,
+                      backgroundColor: 'white',
+                      shadowRadius: 32,
+                      shadowOpacity: 0.1,
+                      elevation: 24,
+                      shadowColor: tokens.gradients.bonfire.values[0][1],
                     },
                   ]}>
-                  <GradientFill gradient={tokens.gradients.bonfire} />
+                  <View
+                    style={[
+                      a.absolute,
+                      a.px_xl,
+                      a.py_xl,
+                      {
+                        top: 0,
+                        left: 0,
+                      },
+                    ]}>
+                    <Logomark fill={t.palette.primary_500} width={36} />
+                  </View>
 
-                  {isLoading ? (
-                    <Loader size="xl" fill="white" />
-                  ) : (
-                    <View
+                  {/* Centered content */}
+                  <View
+                    style={[
+                      {
+                        paddingBottom: 48,
+                      },
+                    ]}>
+                    <Text
+                      style={[
+                        a.text_md,
+                        a.font_bold,
+                        a.text_center,
+                        a.pb_xs,
+                        lightTheme.atoms.text_contrast_medium,
+                      ]}>
+                      <Trans>
+                        Celebrating {formatCount(i18n, 10000000)} users
+                      </Trans>{' '}
+                      🎉
+                    </Text>
+                    <Text
                       style={[
-                        a.flex_1,
-                        a.w_full,
-                        a.align_center,
-                        a.justify_center,
-                        a.rounded_md,
+                        a.relative,
+                        a.text_center,
                         {
-                          backgroundColor: 'white',
-                          shadowRadius: 32,
-                          shadowOpacity: 0.1,
-                          elevation: 24,
-                          shadowColor: tokens.gradients.bonfire.values[0][1],
+                          fontStyle: 'italic',
+                          fontSize: getFontSize(userNumber),
+                          fontWeight: '900',
+                          letterSpacing: -2,
                         },
                       ]}>
-                      <View
+                      <Text
                         style={[
                           a.absolute,
-                          a.px_xl,
-                          a.py_xl,
                           {
-                            top: 0,
-                            left: 0,
+                            color: t.palette.primary_500,
+                            fontSize: 32,
+                            left: -18,
+                            top: 8,
                           },
                         ]}>
-                        <Logomark fill={t.palette.primary_500} width={36} />
-                      </View>
+                        #
+                      </Text>
+                      {i18n.number(userNumber)}
+                    </Text>
+                  </View>
+                  {/* End centered content */}
 
-                      {/* Centered content */}
-                      <View
-                        style={[
-                          {
-                            paddingBottom: 48,
-                          },
-                        ]}>
-                        <Text
-                          style={[
-                            a.text_md,
-                            a.font_bold,
-                            a.text_center,
-                            a.pb_xs,
-                            lightTheme.atoms.text_contrast_medium,
-                          ]}>
-                          <Trans>
-                            Celebrating {formatCount(i18n, 10000000)} users
-                          </Trans>{' '}
-                          🎉
+                  <View
+                    style={[
+                      a.absolute,
+                      a.px_xl,
+                      a.py_xl,
+                      {
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                      },
+                    ]}>
+                    <View style={[a.flex_row, a.align_center, a.gap_sm]}>
+                      <UserAvatar
+                        size={36}
+                        avatar={profile.avatar}
+                        moderation={moderation.ui('avatar')}
+                        onLoad={onCanvasReady}
+                      />
+                      <View style={[a.gap_2xs, a.flex_1]}>
+                        <Text style={[a.text_sm, a.font_bold]}>
+                          {sanitizeDisplayName(
+                            profile.displayName ||
+                              sanitizeHandle(profile.handle),
+                            moderation.ui('displayName'),
+                          )}
                         </Text>
-                        <Text
-                          style={[
-                            a.relative,
-                            a.text_center,
-                            {
-                              fontStyle: 'italic',
-                              fontSize: getFontSize(userNumber),
-                              fontWeight: '900',
-                              letterSpacing: -2,
-                            },
-                          ]}>
+                        <View style={[a.flex_row, a.justify_between]}>
                           <Text
                             style={[
-                              a.absolute,
-                              {
-                                color: t.palette.primary_500,
-                                fontSize: 32,
-                                left: -18,
-                                top: 8,
-                              },
+                              a.text_sm,
+                              a.font_semibold,
+                              lightTheme.atoms.text_contrast_medium,
                             ]}>
-                            #
+                            {sanitizeHandle(profile.handle, '@')}
                           </Text>
-                          {i18n.number(userNumber)}
-                        </Text>
-                      </View>
-                      {/* End centered content */}
 
-                      <View
-                        style={[
-                          a.absolute,
-                          a.px_xl,
-                          a.py_xl,
-                          {
-                            bottom: 0,
-                            left: 0,
-                            right: 0,
-                          },
-                        ]}>
-                        <View style={[a.flex_row, a.align_center, a.gap_sm]}>
-                          <UserAvatar
-                            size={36}
-                            avatar={profile.avatar}
-                            moderation={moderation.ui('avatar')}
-                          />
-                          <View style={[a.gap_2xs, a.flex_1]}>
-                            <Text style={[a.text_sm, a.font_bold]}>
-                              {sanitizeDisplayName(
-                                profile.displayName ||
-                                  sanitizeHandle(profile.handle),
-                                moderation.ui('displayName'),
-                              )}
+                          {profile.createdAt && (
+                            <Text
+                              style={[
+                                a.text_sm,
+                                a.font_semibold,
+                                lightTheme.atoms.text_contrast_low,
+                              ]}>
+                              {i18n.date(profile.createdAt, {
+                                dateStyle: 'long',
+                              })}
                             </Text>
-                            <View style={[a.flex_row, a.justify_between]}>
-                              <Text
-                                style={[
-                                  a.text_sm,
-                                  a.font_semibold,
-                                  lightTheme.atoms.text_contrast_medium,
-                                ]}>
-                                {sanitizeHandle(profile.handle, '@')}
-                              </Text>
-
-                              {profile.createdAt && (
-                                <Text
-                                  style={[
-                                    a.text_sm,
-                                    a.font_semibold,
-                                    lightTheme.atoms.text_contrast_low,
-                                  ]}>
-                                  {i18n.date(profile.createdAt, {
-                                    dateStyle: 'long',
-                                  })}
-                                </Text>
-                              )}
-                            </View>
-                          </View>
+                          )}
                         </View>
                       </View>
                     </View>
-                  )}
+                  </View>
                 </View>
-              </ViewShot>
+              </View>
+            </ViewShot>
+          </Frame>
+        </ThemeProvider>
+      </View>
+    </View>
+  )
+
+  return (
+    <Dialog.Outer control={controls.tenMillion}>
+      <Dialog.Handle />
+
+      <Dialog.ScrollableInner
+        label={_(msg`Ten Million`)}
+        style={[
+          {
+            padding: 0,
+          },
+        ]}>
+        <View
+          style={[
+            a.rounded_md,
+            a.overflow_hidden,
+            isNative && {
+              borderTopLeftRadius: 40,
+              borderTopRightRadius: 40,
+            },
+          ]}>
+          <Frame>
+            <View
+              style={[a.absolute, a.inset_0, a.align_center, a.justify_center]}>
+              <GradientFill gradient={tokens.gradients.bonfire} />
+              {isLoadingData || isLoadingImage ? (
+                <Loader size="xl" fill="white" />
+              ) : (
+                <Image
+                  accessibilityIgnoresInvertColors
+                  source={{uri}}
+                  style={[a.w_full, a.h_full]}
+                />
+              )}
             </View>
-          </ThemeProvider>
+          </Frame>
+
+          {canvas}
 
           <View style={[gtMobile ? a.p_2xl : a.p_xl]}>
             <Text
@@ -321,7 +392,7 @@ export function TenMillion() {
                 variant="solid"
                 color="secondary"
                 shape="square"
-                onPress={share}>
+                onPress={download}>
                 <ButtonIcon icon={Share} />
               </Button>
               <Button
diff --git a/src/lib/canvas.ts b/src/lib/canvas.ts
new file mode 100644
index 00000000000..760c0e67f3f
--- /dev/null
+++ b/src/lib/canvas.ts
@@ -0,0 +1,15 @@
+export const getCanvas = (base64: string): Promise<HTMLCanvasElement> => {
+  return new Promise(resolve => {
+    const image = new Image()
+    image.onload = () => {
+      const canvas = document.createElement('canvas')
+      canvas.width = image.width
+      canvas.height = image.height
+
+      const ctx = canvas.getContext('2d')
+      ctx?.drawImage(image, 0, 0)
+      resolve(canvas)
+    }
+    image.src = base64
+  })
+}
diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index 66c9708bfc3..eb46a8bdb4d 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -43,6 +43,7 @@ interface BaseUserAvatarProps {
 interface UserAvatarProps extends BaseUserAvatarProps {
   moderation?: ModerationUI
   usePlainRNImage?: boolean
+  onLoad?: () => void
 }
 
 interface EditableUserAvatarProps extends BaseUserAvatarProps {
@@ -174,6 +175,7 @@ let UserAvatar = ({
   avatar,
   moderation,
   usePlainRNImage = false,
+  onLoad,
 }: UserAvatarProps): React.ReactNode => {
   const pal = usePalette('default')
   const backgroundColor = pal.colors.backgroundLight
@@ -224,6 +226,7 @@ let UserAvatar = ({
             uri: hackModifyThumbnailPath(avatar, size < 90),
           }}
           blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
+          onLoad={onLoad}
         />
       ) : (
         <HighPriorityImage
@@ -234,6 +237,7 @@ let UserAvatar = ({
             uri: hackModifyThumbnailPath(avatar, size < 90),
           }}
           blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
+          onLoad={onLoad}
         />
       )}
       {alert}

From f7db14f32fb1349d7b569c222567306ddabef2b6 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 10 Sep 2024 18:02:54 -0500
Subject: [PATCH 04/24] Disable avi

---
 .../download_stroke2_corner0_rounded.svg      |   1 +
 src/components/Dialog/index.tsx               |   2 +-
 src/components/dialogs/nudges/TenMillion.tsx  | 127 ++++++++++++------
 src/components/icons/Download.tsx             |   5 +
 4 files changed, 91 insertions(+), 44 deletions(-)
 create mode 100644 assets/icons/download_stroke2_corner0_rounded.svg
 create mode 100644 src/components/icons/Download.tsx

diff --git a/assets/icons/download_stroke2_corner0_rounded.svg b/assets/icons/download_stroke2_corner0_rounded.svg
new file mode 100644
index 00000000000..899fef3e5ec
--- /dev/null
+++ b/assets/icons/download_stroke2_corner0_rounded.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 3a1 1 0 0 1 1 1v8.086l1.793-1.793a1 1 0 1 1 1.414 1.414l-3.5 3.5a1 1 0 0 1-1.414 0l-3.5-3.5a1 1 0 1 1 1.414-1.414L11 12.086V4a1 1 0 0 1 1-1ZM4 14a1 1 0 0 1 1 1v4h14v-4a1 1 0 1 1 2 0v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 158244c8e96..cdce3765f01 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -256,7 +256,7 @@ export const ScrollableInner = React.forwardRef<
           borderTopLeftRadius: 40,
           borderTopRightRadius: 40,
         },
-        flatten(style),
+        style,
       ]}
       contentContainerStyle={a.pb_4xl}
       ref={ref}>
diff --git a/src/components/dialogs/nudges/TenMillion.tsx b/src/components/dialogs/nudges/TenMillion.tsx
index 2be5e3491c0..5aa45f21419 100644
--- a/src/components/dialogs/nudges/TenMillion.tsx
+++ b/src/components/dialogs/nudges/TenMillion.tsx
@@ -7,15 +7,16 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {getCanvas} from '#/lib/canvas'
+import {shareUrl} from '#/lib/sharing'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
-import {isNative} from '#/platform/detection'
+import {isAndroid, isNative, isWeb} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import {useComposerControls} from 'state/shell'
 import {formatCount} from '#/view/com/util/numeric/format'
-import {UserAvatar} from '#/view/com/util/UserAvatar'
+// import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {Logomark} from '#/view/icons/Logomark'
 import {
   atoms as a,
@@ -30,6 +31,7 @@ import {useContext} from '#/components/dialogs/nudges'
 import {Divider} from '#/components/Divider'
 import {GradientFill} from '#/components/GradientFill'
 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox'
+import {Download_Stroke2_Corner0_Rounded as Download} from '#/components/icons/Download'
 import {Image_Stroke2_Corner0_Rounded as ImageIcon} from '#/components/icons/Image'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
@@ -88,12 +90,9 @@ export function TenMillion() {
   const isLoadingData = isProfileLoading || !moderation || !profile
   const isLoadingImage = !uri
 
-  const userNumber = 56738 // TODO
+  const userNumber = 10_000_000 // TODO
 
-  const captureInProgress = React.useRef(false)
-  const imageRef = React.useRef<ViewShot>(null)
-
-  const share = () => {
+  const sharePost = () => {
     if (uri) {
       controls.tenMillion.close(() => {
         setTimeout(() => {
@@ -112,15 +111,11 @@ export function TenMillion() {
     }
   }
 
-  const onCanvasReady = async () => {
-    if (
-      imageRef.current &&
-      imageRef.current.capture &&
-      !captureInProgress.current
-    ) {
-      captureInProgress.current = true
-      const uri = await imageRef.current.capture()
-      setUri(uri)
+  const onNativeShare = () => {
+    if (uri) {
+      controls.tenMillion.close(() => {
+        shareUrl(uri)
+      })
     }
   }
 
@@ -137,6 +132,31 @@ export function TenMillion() {
     }
   }
 
+  const imageRef = React.useRef<ViewShot>(null)
+  // const captureInProgress = React.useRef(false)
+  // const [cavasRelayout, setCanvasRelayout] = React.useState('key')
+  // const onCanvasReady = async () => {
+  //   if (
+  //     imageRef.current &&
+  //     imageRef.current.capture &&
+  //     !captureInProgress.current
+  //   ) {
+  //     captureInProgress.current = true
+  //     setCanvasRelayout('updated')
+  //   }
+  // }
+  const onCanvasLayout = async () => {
+    if (
+      imageRef.current &&
+      imageRef.current.capture // &&
+      // cavasRelayout === 'updated'
+    ) {
+      console.log('LAYOUT')
+      const uri = await imageRef.current.capture()
+      setUri(uri)
+    }
+  }
+
   const canvas = isLoadingData ? null : (
     <View
       style={[
@@ -160,6 +180,8 @@ export function TenMillion() {
               options={{width: WIDTH, height: HEIGHT}}
               style={[a.absolute, a.inset_0]}>
               <View
+                // key={cavasRelayout}
+                onLayout={onCanvasLayout}
                 style={[
                   a.absolute,
                   a.inset_0,
@@ -170,7 +192,7 @@ export function TenMillion() {
                     bottom: -1,
                     left: -1,
                     right: -1,
-                    paddingVertical: 32,
+                    paddingVertical: 48,
                     paddingHorizontal: 48,
                   },
                 ]}>
@@ -208,7 +230,7 @@ export function TenMillion() {
                   <View
                     style={[
                       {
-                        paddingBottom: 48,
+                        paddingBottom: 32,
                       },
                     ]}>
                     <Text
@@ -216,7 +238,7 @@ export function TenMillion() {
                         a.text_md,
                         a.font_bold,
                         a.text_center,
-                        a.pb_xs,
+                        a.pb_md,
                         lightTheme.atoms.text_contrast_medium,
                       ]}>
                       <Trans>
@@ -224,17 +246,7 @@ export function TenMillion() {
                       </Trans>{' '}
                       🎉
                     </Text>
-                    <Text
-                      style={[
-                        a.relative,
-                        a.text_center,
-                        {
-                          fontStyle: 'italic',
-                          fontSize: getFontSize(userNumber),
-                          fontWeight: '900',
-                          letterSpacing: -2,
-                        },
-                      ]}>
+                    <View>
                       <Text
                         style={[
                           a.absolute,
@@ -242,13 +254,27 @@ export function TenMillion() {
                             color: t.palette.primary_500,
                             fontSize: 32,
                             left: -18,
-                            top: 8,
+                            top: isAndroid ? -8 : isWeb ? 5 : -5,
+                            fontWeight: '900',
                           },
                         ]}>
                         #
                       </Text>
-                      {i18n.number(userNumber)}
-                    </Text>
+                      <Text
+                        style={[
+                          a.relative,
+                          a.text_center,
+                          {
+                            fontStyle: 'italic',
+                            fontSize: getFontSize(userNumber),
+                            lineHeight: getFontSize(userNumber),
+                            fontWeight: '900',
+                            letterSpacing: -2,
+                          },
+                        ]}>
+                        {i18n.number(userNumber)}
+                      </Text>
+                    </View>
                   </View>
                   {/* End centered content */}
 
@@ -264,14 +290,16 @@ export function TenMillion() {
                       },
                     ]}>
                     <View style={[a.flex_row, a.align_center, a.gap_sm]}>
+                      {/*
                       <UserAvatar
                         size={36}
                         avatar={profile.avatar}
                         moderation={moderation.ui('avatar')}
                         onLoad={onCanvasReady}
                       />
+                        */}
                       <View style={[a.gap_2xs, a.flex_1]}>
-                        <Text style={[a.text_sm, a.font_bold]}>
+                        <Text style={[a.text_sm, a.font_bold, a.leading_tight]}>
                           {sanitizeDisplayName(
                             profile.displayName ||
                               sanitizeHandle(profile.handle),
@@ -283,6 +311,8 @@ export function TenMillion() {
                             style={[
                               a.text_sm,
                               a.font_semibold,
+                              ,
+                              a.leading_tight,
                               lightTheme.atoms.text_contrast_medium,
                             ]}>
                             {sanitizeHandle(profile.handle, '@')}
@@ -293,11 +323,16 @@ export function TenMillion() {
                               style={[
                                 a.text_sm,
                                 a.font_semibold,
+                                ,
+                                a.leading_tight,
                                 lightTheme.atoms.text_contrast_low,
                               ]}>
-                              {i18n.date(profile.createdAt, {
-                                dateStyle: 'long',
-                              })}
+                              <Trans>
+                                Joined{' '}
+                                {i18n.date(profile.createdAt, {
+                                  dateStyle: 'long',
+                                })}
+                              </Trans>
                             </Text>
                           )}
                         </View>
@@ -315,13 +350,12 @@ export function TenMillion() {
 
   return (
     <Dialog.Outer control={controls.tenMillion}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner
         label={_(msg`Ten Million`)}
         style={[
           {
             padding: 0,
+            paddingTop: 0,
           },
         ]}>
         <View
@@ -355,6 +389,7 @@ export function TenMillion() {
             <Text
               style={[
                 a.text_5xl,
+                a.leading_tight,
                 a.pb_lg,
                 {
                   fontWeight: '900',
@@ -387,20 +422,26 @@ export function TenMillion() {
               </Text>
 
               <Button
-                label={_(msg`Share image externally`)}
+                disabled={isLoadingImage}
+                label={
+                  isNative
+                    ? _(msg`Share image externally`)
+                    : _(msg`Download image`)
+                }
                 size="large"
                 variant="solid"
                 color="secondary"
                 shape="square"
-                onPress={download}>
-                <ButtonIcon icon={Share} />
+                onPress={isNative ? onNativeShare : download}>
+                <ButtonIcon icon={isNative ? Share : Download} />
               </Button>
               <Button
+                disabled={isLoadingImage}
                 label={_(msg`Share image in post`)}
                 size="large"
                 variant="solid"
                 color="primary"
-                onPress={share}>
+                onPress={sharePost}>
                 <ButtonText>{_(msg`Share post`)}</ButtonText>
                 <ButtonIcon position="right" icon={ImageIcon} />
               </Button>
diff --git a/src/components/icons/Download.tsx b/src/components/icons/Download.tsx
new file mode 100644
index 00000000000..86b4942864e
--- /dev/null
+++ b/src/components/icons/Download.tsx
@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Download_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M12 3a1 1 0 0 1 1 1v8.086l1.793-1.793a1 1 0 1 1 1.414 1.414l-3.5 3.5a1 1 0 0 1-1.414 0l-3.5-3.5a1 1 0 1 1 1.414-1.414L11 12.086V4a1 1 0 0 1 1-1ZM4 14a1 1 0 0 1 1 1v4h14v-4a1 1 0 1 1 2 0v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1Z',
+})

From 11ecea22d422138b8346dccded7dcdd70191fae4 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 10 Sep 2024 18:45:08 -0500
Subject: [PATCH 05/24] Add badges, clean up spacing

---
 .../nudges/TenMillion/icons/OnePercent.tsx    | 15 ++++
 .../TenMillion/icons/PointOnePercent.tsx      | 15 ++++
 .../nudges/TenMillion/icons/TenPercent.tsx    | 15 ++++
 .../TenMillion/icons/TwentyFivePercent.tsx    | 15 ++++
 .../{TenMillion.tsx => TenMillion/index.tsx}  | 79 ++++++++++++++++---
 5 files changed, 126 insertions(+), 13 deletions(-)
 create mode 100644 src/components/dialogs/nudges/TenMillion/icons/OnePercent.tsx
 create mode 100644 src/components/dialogs/nudges/TenMillion/icons/PointOnePercent.tsx
 create mode 100644 src/components/dialogs/nudges/TenMillion/icons/TenPercent.tsx
 create mode 100644 src/components/dialogs/nudges/TenMillion/icons/TwentyFivePercent.tsx
 rename src/components/dialogs/nudges/{TenMillion.tsx => TenMillion/index.tsx} (84%)

diff --git a/src/components/dialogs/nudges/TenMillion/icons/OnePercent.tsx b/src/components/dialogs/nudges/TenMillion/icons/OnePercent.tsx
new file mode 100644
index 00000000000..9c8d47afd03
--- /dev/null
+++ b/src/components/dialogs/nudges/TenMillion/icons/OnePercent.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import Svg, {Path} from 'react-native-svg'
+
+export function OnePercent({fill}: {fill?: string}) {
+  return (
+    <Svg fill="none" viewBox="0 0 101 101">
+      <Path
+        fill={fill}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m60.366 5.567 3.002.49c.053-.687-.01-1.314-.19-1.883a4.129 4.129 0 0 0-.837-1.497 4.633 4.633 0 0 0-1.387-1.074 6.196 6.196 0 0 0-1.854-.592c-.98-.16-1.901-.09-2.766.209-.865.296-1.599.822-2.204 1.58-.604.753-1.005 1.737-1.203 2.95-.197 1.206-.135 2.264.187 3.172.325.91.848 1.643 1.569 2.202.724.559 1.587.92 2.587 1.084.798.13 1.52.122 2.162-.024a4.662 4.662 0 0 0 1.675-.72 4.648 4.648 0 0 0 1.169-1.165 4.12 4.12 0 0 0 .618-1.347l-2.997-.511a1.926 1.926 0 0 1-.312.599c-.13.168-.284.305-.465.41a1.746 1.746 0 0 1-.614.211 2.5 2.5 0 0 1-.751-.019c-.479-.078-.87-.257-1.175-.536-.303-.282-.509-.662-.617-1.139-.104-.48-.1-1.053.008-1.72.103-.631.279-1.158.526-1.58.251-.422.567-.725.947-.91.383-.186.823-.238 1.32-.157.284.047.53.129.741.247.21.115.382.26.514.434.136.171.232.365.287.582.06.217.08.452.06.704Zm8.975-1.753-4.92 9.887 7.105 3.537 1.077-2.163-4.422-2.2.846-1.7 4.074 2.028 1.076-2.163-4.074-2.028.846-1.7 4.44 2.211 1.077-2.163-7.125-3.546Zm4.447 14.833 7.456-8.146 3.516 3.218c.605.553 1.033 1.148 1.285 1.783s.315 1.275.188 1.919c-.127.644-.455 1.256-.984 1.834-.534.583-1.114.956-1.74 1.119a3.216 3.216 0 0 1-1.786-.046l-1.125 4.552-2.403-2.199 1.03-3.998-.765-.7L76 20.672l-2.212-2.025Zm7.025-1.67-.78-.713 1.806-1.973.78.714c.26.237.448.476.566.715.122.239.165.478.127.716-.033.238-.156.474-.37.707-.21.23-.432.372-.664.422-.23.054-.467.029-.714-.075a2.758 2.758 0 0 1-.751-.512Zm10.376 3.54-2.07 1.245 1.713 2.846-7.393 4.448 1.524 2.532 7.392-4.448 1.713 2.846 2.07-1.246-4.95-8.224Zm7.375 14.937-10.45 3.575-.97-2.836 10.449-3.576.97 2.837Zm1.311 4.357-10.952 1.422.386 2.973 4.278-.555.553 4.256 2.395-.31-.552-4.257 1.882-.245.614 4.728 2.395-.311-.999-7.7Zm.737 15.417-11.016-.776.21-2.991 11.017.776-.211 2.99Zm-.483 4.547-10.636-2.972-2.136 7.644 2.326.65 1.33-4.757 1.828.511-1.225 4.383 2.326.65 1.226-4.383 1.828.511-1.336 4.778 2.327.65 2.142-7.665ZM84.151 70.583l2.293-3.578 9.298 5.96-2.27 3.54c-.613.957-1.328 1.664-2.147 2.121a4.568 4.568 0 0 1-2.634.592c-.937-.062-1.89-.404-2.859-1.025-.968-.62-1.68-1.343-2.133-2.168-.45-.822-.64-1.7-.568-2.631.075-.93.415-1.867 1.02-2.811Zm2.818.32-.617.962c-.295.46-.472.9-.531 1.319-.061.422.035.834.29 1.236.253.405.703.816 1.35 1.23.648.416 1.21.652 1.686.71.474.06.892-.03 1.256-.272.361-.238.697-.599 1.008-1.083l.57-.89-5.012-3.212Zm-5.738 19.42-5.842-9.373-4.411 2.75c-.68.424-1.195.903-1.544 1.438-.348.535-.53 1.085-.547 1.65-.02.568.13 1.107.45 1.62.276.442.613.766 1.012.97.4.208.823.302 1.269.283a2.77 2.77 0 0 0 1.29-.378l.056.092c-.317.3-.552.628-.706.987a2.38 2.38 0 0 0-.187 1.107c.025.379.144.74.36 1.086.296.475.678.81 1.147 1.006.466.197 1.003.239 1.61.127.606-.11 1.265-.388 1.98-.833l4.063-2.533Zm-8.31-5.013 1.19-.742 1.232 1.977-1.226.764c-.26.162-.505.26-.738.295a1.11 1.11 0 0 1-.647-.08 1.168 1.168 0 0 1-.499-.464c-.196-.314-.237-.619-.124-.913.114-.292.385-.571.812-.837Zm2.36 3.46 1.044-.65 1.118 1.793-1.08.673c-.317.198-.628.284-.933.257-.302-.023-.544-.18-.725-.47a.955.955 0 0 1-.158-.58c.012-.19.082-.374.21-.55.127-.177.301-.335.524-.474Zm-9.737-2.132 3.067 10.61-2.88.832-2.396-8.288-4.29 1.24-.67-2.321 7.17-2.073Zm-19.456 13.615 2.998.037.084-6.816c.004-.341.083-.646.237-.913.155-.265.366-.47.634-.618.268-.148.574-.22.92-.215.34.004.645.083.913.237.264.154.47.366.618.633.147.272.22.578.215.92l-.084 6.815 2.998.037.087-7.074c.01-.841-.178-1.572-.566-2.191-.392-.616-.943-1.096-1.654-1.439-.712-.34-1.544-.515-2.496-.527-.945-.011-1.778.144-2.497.466-.72.325-1.283.791-1.69 1.397-.41.61-.62 1.335-.63 2.177l-.087 7.074Zm-3.141-11.57-3.408 10.504-7.57-2.456.745-2.298 4.719 1.531.585-1.805-4.329-1.405.746-2.298 4.329 1.405.586-1.806-4.699-1.524.746-2.298 7.55 2.45Zm-19.303.375c-.087-.302-.042-.61.136-.923l-2.378-1.606c-.401.601-.605 1.224-.612 1.87-.012.647.168 1.277.54 1.888.373.612.928 1.167 1.667 1.666.724.489 1.449.8 2.174.934.722.132 1.389.085 2-.14.607-.223 1.105-.626 1.494-1.21.486-.712.636-1.433.451-2.16-.19-.728-.63-1.453-1.322-2.176l-.78-.812a5.515 5.515 0 0 1-.645-.787c-.143-.219-.222-.41-.236-.576a.682.682 0 0 1 .109-.46.776.776 0 0 1 .412-.301c.17-.054.367-.053.59.002.223.055.467.172.733.351.315.213.555.447.718.7.16.251.238.514.234.79-.003.274-.092.557-.266.847l2.359 1.594c.514-.768.775-1.507.782-2.218.002-.71-.212-1.382-.643-2.016-.434-.635-1.049-1.222-1.844-1.759-.775-.523-1.511-.862-2.21-1.017-.7-.156-1.34-.127-1.92.09-.58.215-1.074.623-1.484 1.223-.232.35-.392.71-.482 1.08a2.676 2.676 0 0 0-.032 1.136c.069.393.224.8.466 1.219.241.419.58.853 1.013 1.302l.643.668c.187.192.34.37.46.533.12.163.207.313.262.45.053.14.074.269.063.388a.708.708 0 0 1-.144.338.733.733 0 0 1-.362.276.915.915 0 0 1-.523.005c-.206-.049-.437-.159-.694-.332-.402-.272-.645-.557-.729-.857Zm.158-10.414-8.56 6.979-1.894-2.324 3.46-2.822-.095-.117-5.56.247L8.945 77.9l6.17-.215 2.335-6.83 2.263 2.775-1.643 4.54 1.63-.05 2.207-1.799 1.895 2.324ZM5.312 70.78l1.245 3.103 5.516-6.583 3.223-1.294-1.109-2.762-3.223 1.293-8.536-.943 1.245 3.102 4.967.331.032.08-3.36 3.673Zm6.595-17.898-11.033-.49.354-7.951 2.413.107-.22 4.956 1.896.084.202-4.546 2.414.107-.202 4.547 1.896.084.22-4.935 2.412.108-.352 7.93ZM2.16 39.01l10.522 3.355 2.267-7.11-2.302-.734-1.356 4.254-8.22-2.621-.91 2.856Zm16.115-9.721L15.88 32.8l-9.126-6.22 2.368-3.475c.64-.939 1.376-1.625 2.207-2.06a4.567 4.567 0 0 1 2.65-.517c.935.09 1.878.458 2.828 1.106.95.648 1.641 1.39 2.071 2.227.428.835.592 1.717.494 2.647-.101.927-.468 1.854-1.1 2.78Zm-2.808-.4.644-.944c.307-.452.497-.886.568-1.303.073-.42-.012-.835-.255-1.244-.241-.413-.68-.835-1.315-1.269-.636-.433-1.191-.685-1.665-.755-.472-.074-.893.005-1.263.235-.368.228-.714.579-1.038 1.054l-.596.874 4.92 3.352Zm.873-14.72 6.926 8.603 6.182-4.978-1.515-1.882-3.847 3.098-1.19-1.479 3.545-2.854-1.515-1.882-3.545 2.854-1.19-1.478 3.864-3.111-1.515-1.882-6.2 4.991Zm15.342 2.15L27.406 6.136l4.395-1.845c.756-.317 1.475-.457 2.157-.42.683.037 1.29.248 1.822.633s.95.938 1.253 1.66c.306.73.402 1.413.287 2.05a3.216 3.216 0 0 1-.789 1.603l3.662 2.928-3.003 1.26-3.199-2.61-.957.402 1.412 3.361-2.765 1.16Zm-.584-9.136 1.036 2.466.974-.409c.325-.136.585-.292.78-.468.198-.18.32-.385.367-.616.051-.232.016-.492-.105-.78-.122-.292-.285-.503-.487-.632a1.145 1.145 0 0 0-.704-.184 2.475 2.475 0 0 0-.886.214l-.975.41ZM64.39 27.996v2.67h3.672v9.539h3.267v-9.539H75v-2.67H64.39Zm-4.266 3.815c-.032-.398-.18-.708-.447-.93-.262-.223-.662-.334-1.198-.334-.342 0-.622.042-.84.125-.215.08-.374.189-.478.328a.81.81 0 0 0-.16.477.783.783 0 0 0 .077.4c.064.115.163.22.298.315.135.092.308.175.519.25.21.076.46.144.75.203l1.002.215c.676.143 1.254.332 1.735.566.48.235.874.511 1.18.83.306.313.531.667.674 1.06.147.394.223.823.227 1.288-.004.803-.205 1.482-.603 2.039-.397.556-.965.98-1.705 1.27-.735.29-1.619.435-2.652.435-1.062 0-1.988-.157-2.778-.471-.787-.314-1.4-.797-1.836-1.449-.434-.656-.652-1.494-.656-2.516h3.147c.02.374.114.688.28.942.168.255.402.447.704.578.306.132.67.197 1.091.197.354 0 .65-.043.888-.13.239-.088.42-.21.543-.364a.859.859 0 0 0 .19-.531.754.754 0 0 0-.184-.489c-.116-.143-.306-.27-.573-.382a6.098 6.098 0 0 0-1.079-.321l-1.216-.263c-1.08-.234-1.933-.626-2.557-1.174-.62-.553-.928-1.306-.924-2.26-.004-.774.202-1.452.62-2.032.421-.585 1.003-1.04 1.746-1.366.748-.325 1.604-.488 2.57-.488.986 0 1.838.165 2.557.494.72.33 1.274.795 1.664 1.395.393.596.592 1.294.596 2.093h-3.172Zm-17.795-3.816v12.21h3.315v-4.03h1.147l2.144 4.03h3.6l-2.48-4.552a3.556 3.556 0 0 0 1.49-1.297c.39-.6.585-1.337.585-2.211 0-.867-.189-1.61-.566-2.23a3.705 3.705 0 0 0-1.586-1.425c-.68-.33-1.473-.494-2.379-.494h-5.27Zm3.315 5.604h1.168c.39 0 .721-.047.996-.143.278-.1.49-.256.638-.47.15-.215.226-.496.226-.841 0-.35-.075-.634-.226-.853a1.266 1.266 0 0 0-.638-.489c-.275-.107-.606-.16-.996-.16h-1.168v2.956Zm-4.886-5.603v12.209h-3.314v-12.21h3.314Zm-13.118 0v12.209h3.315v-4.77h4.745v-2.67h-4.745v-2.099h5.27v-2.67h-8.585Zm33.322 38.79v-1.392c0-1.117.24-2.148.722-3.093a5.77 5.77 0 0 1 2.126-2.281c.928-.576 2.058-.864 3.39-.864 1.366 0 2.513.284 3.441.85a5.565 5.565 0 0 1 2.127 2.27c.481.944.722 1.984.722 3.118v1.392a6.622 6.622 0 0 1-.735 3.093 5.651 5.651 0 0 1-2.127 2.282c-.936.576-2.079.863-3.428.863-1.349 0-2.487-.287-3.416-.863a5.678 5.678 0 0 1-2.113-2.282c-.473-.945-.71-1.976-.71-3.093Zm4.485-1.392v1.392c0 .49.12.975.361 1.457.25.472.713.709 1.392.709.713 0 1.181-.232 1.405-.696.232-.464.348-.954.348-1.47v-1.392a3.63 3.63 0 0 0-.322-1.495c-.215-.481-.692-.722-1.431-.722-.679 0-1.143.241-1.392.722-.24.481-.36.98-.36 1.495ZM47.144 51.681v-1.392c0-1.135.245-2.174.735-3.12a5.774 5.774 0 0 1 2.14-2.268c.927-.567 2.049-.85 3.363-.85 1.367 0 2.514.283 3.442.85a5.565 5.565 0 0 1 2.126 2.269c.481.945.722 1.984.722 3.119v1.392c0 1.134-.245 2.17-.735 3.106a5.502 5.502 0 0 1-2.126 2.242c-.937.559-2.08.838-3.429.838-1.349 0-2.487-.283-3.415-.85a5.613 5.613 0 0 1-2.114-2.256c-.473-.937-.709-1.963-.709-3.08Zm4.537-1.392v1.392c0 .515.12 1.005.36 1.469.242.464.688.696 1.341.696.714 0 1.182-.232 1.405-.696.232-.464.348-.954.348-1.47V50.29a3.63 3.63 0 0 0-.322-1.495c-.215-.482-.692-.722-1.43-.722-.68 0-1.135.249-1.367.747-.223.49-.335.98-.335 1.47Zm-2.346 21.447 18.148-26.397h3.66L52.996 71.736h-3.66Zm-8.9 0V45.339h-6.599l-6.495 3.97v6.084l5.774-3.455h.154v19.798h7.166Z"
+      />
+    </Svg>
+  )
+}
diff --git a/src/components/dialogs/nudges/TenMillion/icons/PointOnePercent.tsx b/src/components/dialogs/nudges/TenMillion/icons/PointOnePercent.tsx
new file mode 100644
index 00000000000..1f9467e4423
--- /dev/null
+++ b/src/components/dialogs/nudges/TenMillion/icons/PointOnePercent.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import Svg, {Path} from 'react-native-svg'
+
+export function PointOnePercent({fill}: {fill?: string}) {
+  return (
+    <Svg fill="none" viewBox="0 0 101 101">
+      <Path
+        fill={fill}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m62.493 6.057-3.001-.49c.019-.252-.001-.487-.06-.704a1.545 1.545 0 0 0-.288-.582 1.573 1.573 0 0 0-.513-.434c-.21-.118-.458-.2-.741-.247-.497-.08-.937-.029-1.32.156-.38.186-.696.49-.947.91-.248.423-.423.95-.526 1.581-.11.667-.112 1.24-.008 1.72.108.477.313.857.617 1.14.304.278.695.457 1.174.535a2.5 2.5 0 0 0 .751.02c.228-.036.433-.107.614-.212s.337-.242.466-.41c.134-.171.237-.371.311-.6l2.998.512c-.11.456-.317.905-.619 1.347-.301.439-.69.827-1.168 1.164a4.663 4.663 0 0 1-1.675.721c-.643.146-1.364.154-2.162.024-1-.164-1.863-.525-2.588-1.084-.72-.559-1.244-1.293-1.569-2.202-.321-.908-.383-1.966-.186-3.172.198-1.213.599-2.197 1.203-2.95.605-.758 1.339-1.284 2.203-1.58.865-.3 1.787-.37 2.766-.21.689.113 1.307.31 1.854.593a4.63 4.63 0 0 1 1.387 1.074c.378.43.657.928.838 1.497.18.569.243 1.196.19 1.883Zm1.053 7.644 4.92-9.887 7.126 3.546-1.076 2.163-4.442-2.21-.846 1.7 4.075 2.027-1.076 2.163-4.075-2.028-.846 1.7 4.422 2.2-1.076 2.163-7.106-3.537Zm16.823-3.2-7.456 8.146 2.212 2.025 2.46-2.69.766.701-1.03 3.998 2.402 2.2 1.126-4.553c.608.185 1.203.2 1.785.046.627-.163 1.207-.536 1.741-1.12.53-.578.857-1.189.984-1.833a3.35 3.35 0 0 0-.188-1.92c-.252-.634-.68-1.229-1.285-1.782l-3.517-3.218Zm-1.21 5.763.78.714c.26.237.51.408.751.512.246.104.484.129.713.076.232-.051.454-.192.665-.423.213-.233.337-.47.37-.707a1.146 1.146 0 0 0-.128-.716 2.476 2.476 0 0 0-.566-.715l-.78-.714-1.805 1.973Zm9.085 5.498 2.07-1.246 4.95 8.224-2.07 1.246-1.713-2.846-7.393 4.448-1.523-2.532 7.392-4.448-1.713-2.846ZM87.24 39.029l10.45-3.575-.972-2.837-10.448 3.576.97 2.836Zm.809 2.203L99 39.813l.999 7.7-2.396.31-.613-4.727-1.882.245.552 4.256-2.396.311-.552-4.256-4.278.555-.386-2.974Zm.672 13.22 11.017.776.21-2.991-11.016-.776-.21 2.99Zm-.102 2.35 10.636 2.973-2.142 7.666-2.327-.65 1.335-4.779-1.828-.51-1.225 4.383-2.327-.65 1.225-4.384-1.828-.51-1.33 4.756-2.326-.65 2.137-7.645Zm-3.05 10.203-2.292 3.578c-.606.944-.946 1.881-1.02 2.81a4.625 4.625 0 0 0 .567 2.632c.454.825 1.165 1.547 2.134 2.168.968.62 1.921.963 2.859 1.025a4.568 4.568 0 0 0 2.634-.592c.818-.457 1.534-1.164 2.147-2.12l2.27-3.542-9.299-5.959Zm-.091 4.86.617-.962 5.012 3.212-.57.89c-.311.484-.647.845-1.009 1.083-.363.241-.782.331-1.256.271-.476-.057-1.037-.293-1.685-.708-.648-.415-1.098-.826-1.35-1.231-.255-.402-.352-.814-.29-1.236.059-.42.236-.859.53-1.319ZM74.515 80.95l5.841 9.372-4.063 2.533c-.714.445-1.374.723-1.979.833-.607.112-1.144.07-1.61-.127-.469-.195-.852-.53-1.148-1.007a2.308 2.308 0 0 1-.36-1.085 2.381 2.381 0 0 1 .187-1.107 2.96 2.96 0 0 1 .707-.987l-.057-.092a2.77 2.77 0 0 1-1.29.378 2.48 2.48 0 0 1-1.269-.282c-.398-.205-.736-.529-1.011-.971a2.824 2.824 0 0 1-.45-1.62c.016-.565.198-1.115.547-1.65.348-.535.863-1.014 1.543-1.438l4.412-2.75Zm-1.278 3.618-1.19.742c-.427.266-.698.545-.813.837-.112.294-.071.599.125.913.137.22.303.374.499.464.196.09.411.117.647.08.232-.035.478-.133.738-.295l1.226-.764-1.232-1.977Zm2.213 3.551-1.043.65a1.82 1.82 0 0 0-.525.474c-.127.176-.197.36-.21.55a.954.954 0 0 0 .159.58c.18.29.422.447.725.47.304.027.615-.059.932-.257l1.08-.673-1.118-1.794Zm-7.713 9.129-3.067-10.61-7.17 2.073.671 2.32 4.29-1.24 2.396 8.29 2.88-.834ZM48.21 100.29l-2.998-.037.087-7.074c.01-.841.221-1.567.631-2.177.407-.606.97-1.072 1.69-1.397.719-.322 1.551-.477 2.496-.466.953.012 1.785.188 2.496.527.712.343 1.263.823 1.654 1.439.388.62.577 1.35.567 2.19l-.088 7.075-2.998-.037.084-6.815a1.844 1.844 0 0 0-.215-.92 1.634 1.634 0 0 0-.617-.633 1.844 1.844 0 0 0-.914-.237 1.825 1.825 0 0 0-.92.215 1.634 1.634 0 0 0-.633.618 1.843 1.843 0 0 0-.238.913l-.084 6.816Zm-9.547-1.103 3.409-10.504-7.55-2.45-.746 2.298 4.698 1.524-.586 1.806-4.329-1.405-.745 2.298 4.329 1.405-.586 1.805-4.719-1.53-.745 2.297 7.57 2.456ZM22.905 88.135c-.177.314-.222.621-.135.923.084.3.327.585.729.857.256.173.487.283.693.332.201.049.376.047.524-.005a.733.733 0 0 0 .362-.276.709.709 0 0 0 .144-.338.874.874 0 0 0-.063-.388 2.115 2.115 0 0 0-.262-.45 5.056 5.056 0 0 0-.46-.533l-.643-.668a6.809 6.809 0 0 1-1.014-1.302 3.733 3.733 0 0 1-.465-1.219c-.07-.39-.06-.769.032-1.136.089-.37.25-.73.482-1.08.41-.6.904-1.008 1.484-1.224.58-.216 1.22-.245 1.92-.089.698.155 1.435.494 2.21 1.017.795.537 1.41 1.124 1.843 1.76.431.633.646 1.305.644 2.015-.008.71-.268 1.45-.782 2.218l-2.36-1.594c.174-.29.263-.573.267-.848a1.41 1.41 0 0 0-.235-.79 2.494 2.494 0 0 0-.718-.699 2.352 2.352 0 0 0-.732-.351 1.085 1.085 0 0 0-.591-.002.777.777 0 0 0-.412.3.681.681 0 0 0-.108.46c.014.166.092.358.235.576.142.222.357.484.646.788l.78.812c.69.723 1.132 1.448 1.322 2.175.185.728.034 1.449-.451 2.162-.39.583-.888.986-1.494 1.21-.612.225-1.279.27-2 .139-.726-.134-1.45-.445-2.174-.934-.74-.5-1.295-1.054-1.667-1.666-.372-.611-.552-1.24-.54-1.888.006-.646.21-1.269.612-1.87l2.377 1.606Zm-8.537-2.512 8.56-6.979-1.895-2.324-2.207 1.8-1.63.048 1.642-4.54-2.262-2.774-2.336 6.83-6.17.215 2.209 2.708 5.56-.246.095.117-3.46 2.82 1.894 2.325Zm-8.685-11.74L4.437 70.78l3.36-3.673-.032-.08-4.967-.33-1.245-3.103 8.537.943 3.223-1.293 1.108 2.762-3.223 1.294-5.515 6.583ZM0 52.393l11.033.49.352-7.93-2.413-.108-.22 4.935-1.896-.084.202-4.547-2.413-.107-.202 4.546-1.897-.084.22-4.956-2.413-.107L0 52.392Zm11.806-10.028L1.285 39.01l.91-2.856 8.22 2.62 1.357-4.253 2.301.734-2.267 7.11Zm3.2-9.565L17.4 29.29c.632-.927.998-1.854 1.1-2.781a4.625 4.625 0 0 0-.494-2.647c-.43-.837-1.12-1.58-2.071-2.227-.95-.648-1.894-1.016-2.83-1.106a4.567 4.567 0 0 0-2.649.518c-.83.434-1.566 1.12-2.206 2.06L5.88 26.58l9.126 6.22Zm.23-4.855-.645.944-4.919-3.352.595-.874c.324-.475.67-.826 1.038-1.054.37-.23.792-.309 1.264-.235.474.07 1.028.322 1.664.756.636.433 1.074.855 1.315 1.268.243.409.329.824.255 1.244-.07.417-.26.851-.568 1.303Zm7.154-5.173-6.926-8.603 6.2-4.99 1.515 1.88-3.864 3.112 1.19 1.479 3.545-2.855 1.515 1.882-3.545 2.854 1.19 1.479 3.848-3.098 1.515 1.882-6.183 4.978Zm4.142-16.636 4.275 10.183 2.764-1.16-1.411-3.362.957-.402 3.199 2.61 3.003-1.26-3.662-2.928c.422-.475.685-1.01.789-1.603.114-.637.019-1.32-.288-2.05-.303-.722-.72-1.275-1.253-1.66a3.351 3.351 0 0 0-1.821-.633c-.683-.037-1.402.103-2.157.42l-4.395 1.845Zm4.726 3.513-1.035-2.466.974-.409c.325-.136.62-.208.887-.214.268-.012.503.05.703.184.203.13.365.34.488.632.12.288.156.548.105.78-.047.23-.17.436-.367.616a2.756 2.756 0 0 1-.78.468l-.975.41Zm32.256 21.017v-2.67h10.612v2.67h-3.673v9.539h-3.267v-9.539h-3.672Zm-4.712.215c.266.223.415.532.447.93h3.171c-.004-.799-.203-1.496-.596-2.093-.39-.6-.944-1.065-1.663-1.395-.72-.33-1.572-.494-2.558-.494-.965 0-1.822.163-2.569.488-.743.326-1.325.781-1.747 1.366-.417.58-.624 1.258-.62 2.032-.004.954.304 1.707.924 2.26.624.548 1.477.94 2.558 1.174l1.216.263c.453.099.813.206 1.079.322.266.11.457.238.572.381.12.14.181.302.185.489a.858.858 0 0 1-.19.53 1.2 1.2 0 0 1-.543.364c-.239.088-.535.131-.889.131-.42 0-.784-.065-1.09-.197a1.56 1.56 0 0 1-.704-.578c-.167-.254-.26-.568-.28-.942h-3.148c.004 1.022.223 1.86.656 2.516.437.652 1.05 1.135 1.836 1.449.791.314 1.717.47 2.778.47 1.033 0 1.918-.144 2.653-.434.74-.29 1.308-.714 1.705-1.27.398-.557.598-1.236.602-2.04a3.743 3.743 0 0 0-.226-1.287 2.957 2.957 0 0 0-.674-1.06 4.128 4.128 0 0 0-1.18-.83c-.481-.234-1.06-.423-1.735-.566l-1.002-.215a5.58 5.58 0 0 1-.75-.202 2.339 2.339 0 0 1-.52-.25.968.968 0 0 1-.298-.316.784.784 0 0 1-.077-.4.81.81 0 0 1 .16-.477c.104-.139.263-.248.478-.328.218-.083.499-.125.84-.125.537 0 .936.111 1.199.334Zm-17.348 9.324v-12.21h5.27c.906 0 1.699.165 2.378.495.68.33 1.209.805 1.586 1.425.378.62.566 1.363.566 2.23 0 .874-.194 1.611-.584 2.211-.36.56-.856.993-1.49 1.297l2.48 4.552h-3.601l-2.144-4.03h-1.147v4.03h-3.314Zm4.483-6.606h-1.169v-2.957h1.169c.39 0 .721.054.995.161.279.104.491.267.638.49.151.218.227.502.227.852 0 .345-.076.626-.227.84-.147.215-.36.372-.638.471a3.047 3.047 0 0 1-.995.143Zm-6.054 6.606v-12.21h-3.315v12.21h3.315Zm-13.118 0v-12.21h8.584v2.671h-5.27v2.099h4.746v2.67h-4.746v4.77h-3.314Zm33.871 25.421v1.346c0 1.079.233 2.075.7 2.989a5.535 5.535 0 0 0 2.086 2.204c.916.557 2.04.835 3.37.835 1.332 0 2.46-.278 3.384-.835.924-.556 1.624-1.29 2.099-2.204.483-.914.725-1.91.725-2.99v-1.345c0-1.096-.237-2.1-.712-3.014-.475-.913-1.175-1.644-2.1-2.192-.915-.548-2.047-.822-3.395-.822-1.315 0-2.43.278-3.346.834a5.625 5.625 0 0 0-2.099 2.205 6.384 6.384 0 0 0-.712 2.99Zm4.427 1.346v-1.346c0-.498.118-.98.356-1.445.246-.464.704-.697 1.374-.697.729 0 1.2.233 1.411.697.213.466.319.947.319 1.445v1.346c0 .498-.115.971-.344 1.42-.22.448-.683.672-1.386.672-.67 0-1.128-.228-1.374-.685a3.067 3.067 0 0 1-.356-1.407ZM47 51.029v1.345c0 1.08.233 2.071.7 2.976.474.906 1.17 1.632 2.086 2.18.916.548 2.04.822 3.37.822 1.332 0 2.46-.27 3.384-.81.924-.54 1.624-1.261 2.099-2.167.483-.905.725-1.905.725-3.001v-1.346c0-1.096-.237-2.1-.712-3.014-.475-.913-1.175-1.644-2.1-2.192-.915-.548-2.047-.822-3.395-.822-1.298 0-2.405.274-3.32.822a5.631 5.631 0 0 0-2.112 2.192c-.483.914-.725 1.918-.725 3.014Zm4.477 1.345v-1.346c0-.473.11-.946.331-1.42.23-.481.679-.722 1.349-.722.729 0 1.2.233 1.412.698.212.465.317.946.317 1.444v1.346c0 .498-.114.971-.343 1.42-.22.448-.683.672-1.386.672-.645 0-1.086-.224-1.323-.672a2.991 2.991 0 0 1-.357-1.42Zm15.595-6.129-17.91 25.51h3.613l17.91-25.51h-3.613Zm-23.51-.905v26.396h-7.167V51.938h-.155l-5.774 3.455v-6.084l6.496-3.97h6.6ZM29.5 72a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z"
+      />
+    </Svg>
+  )
+}
diff --git a/src/components/dialogs/nudges/TenMillion/icons/TenPercent.tsx b/src/components/dialogs/nudges/TenMillion/icons/TenPercent.tsx
new file mode 100644
index 00000000000..4197be83572
--- /dev/null
+++ b/src/components/dialogs/nudges/TenMillion/icons/TenPercent.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import Svg, {Path} from 'react-native-svg'
+
+export function TenPercent({fill}: {fill?: string}) {
+  return (
+    <Svg fill="none" viewBox="0 0 101 101">
+      <Path
+        fill={fill}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m62.493 5.13-3.001-.49c.019-.252-.001-.487-.06-.704a1.547 1.547 0 0 0-.288-.582 1.574 1.574 0 0 0-.513-.434c-.21-.118-.458-.2-.741-.247-.497-.08-.937-.029-1.32.156-.38.186-.696.49-.947.91-.248.423-.423.95-.526 1.581-.11.667-.112 1.24-.008 1.72.108.477.313.857.617 1.14.304.278.695.457 1.174.535a2.5 2.5 0 0 0 .751.02c.228-.036.433-.107.614-.212s.337-.242.466-.41c.134-.171.237-.371.311-.6l2.998.512c-.11.456-.317.905-.619 1.347-.301.439-.69.827-1.168 1.164a4.666 4.666 0 0 1-1.675.721c-.643.146-1.364.154-2.162.024-1-.164-1.863-.525-2.588-1.084-.72-.559-1.244-1.293-1.569-2.202-.321-.908-.383-1.966-.186-3.172.198-1.213.599-2.197 1.203-2.95.605-.758 1.339-1.284 2.203-1.58.865-.3 1.787-.37 2.766-.21.689.113 1.307.31 1.854.593a4.63 4.63 0 0 1 1.387 1.074c.378.43.657.928.838 1.497.18.569.243 1.196.19 1.883Zm1.053 7.644 4.92-9.887 7.126 3.546-1.076 2.163-4.442-2.21-.846 1.7 4.075 2.027-1.076 2.163-4.075-2.028-.846 1.7 4.422 2.2-1.076 2.163-7.106-3.537Zm16.823-3.2-7.456 8.146 2.212 2.024 2.461-2.689.765.701-1.03 3.998 2.402 2.2 1.126-4.552a3.216 3.216 0 0 0 1.785.045c.627-.163 1.207-.536 1.741-1.12.53-.578.857-1.189.984-1.833a3.352 3.352 0 0 0-.188-1.92c-.252-.634-.68-1.229-1.285-1.782l-3.517-3.218Zm-1.21 5.763.78.714c.26.238.51.408.751.512.246.104.484.129.713.076.232-.051.454-.192.665-.423.213-.233.337-.47.37-.707a1.145 1.145 0 0 0-.128-.716 2.474 2.474 0 0 0-.566-.715l-.78-.714-1.805 1.973Zm9.085 5.498 2.07-1.246 4.95 8.224-2.07 1.246-1.713-2.846-7.393 4.448-1.523-2.531 7.392-4.45-1.713-2.845ZM87.24 38.102l10.45-3.575-.971-2.837-10.45 3.576.971 2.836Zm.809 2.203L99 38.885l.999 7.7-2.396.31-.613-4.727-1.882.245.552 4.256-2.396.311-.552-4.256-4.278.555-.386-2.974Zm.672 13.22 11.017.776.21-2.991-11.016-.776-.21 2.99Zm-.102 2.35 10.636 2.973-2.142 7.665-2.327-.65 1.335-4.778-1.828-.51-1.225 4.383-2.326-.65 1.224-4.384-1.828-.51-1.33 4.756-2.326-.65 2.137-7.645Zm-3.05 10.203-2.292 3.578c-.606.944-.946 1.881-1.02 2.81a4.625 4.625 0 0 0 .567 2.632c.454.825 1.165 1.547 2.134 2.168.968.62 1.921.963 2.859 1.025a4.568 4.568 0 0 0 2.634-.592c.818-.457 1.534-1.164 2.147-2.12l2.27-3.542-9.299-5.959Zm-.091 4.86.617-.962 5.012 3.212-.57.89c-.31.484-.647.845-1.009 1.083-.363.241-.782.331-1.256.271-.476-.057-1.037-.293-1.685-.708-.648-.416-1.098-.826-1.35-1.231-.255-.402-.352-.814-.29-1.236.059-.42.236-.859.53-1.319Zm-10.963 9.085 5.841 9.372-4.063 2.533c-.714.445-1.374.723-1.979.833-.607.112-1.144.07-1.61-.127-.469-.195-.852-.53-1.148-1.007a2.308 2.308 0 0 1-.36-1.085 2.38 2.38 0 0 1 .187-1.107 2.96 2.96 0 0 1 .707-.987l-.057-.092a2.77 2.77 0 0 1-1.29.378 2.48 2.48 0 0 1-1.269-.282c-.398-.205-.736-.529-1.011-.971a2.824 2.824 0 0 1-.45-1.62c.016-.565.198-1.115.547-1.65.348-.535.863-1.014 1.543-1.438l4.412-2.75Zm-1.278 3.618-1.19.742c-.427.266-.698.545-.813.837-.113.294-.071.599.125.913.137.22.303.374.499.464.196.09.411.117.647.08.232-.035.478-.133.738-.295l1.226-.764-1.232-1.977Zm2.213 3.551-1.043.65a1.822 1.822 0 0 0-.525.474c-.127.176-.197.36-.21.55a.954.954 0 0 0 .159.58c.18.29.422.447.725.47.304.027.615-.059.932-.257l1.08-.673-1.118-1.794Zm-7.713 9.129L64.67 85.71l-7.17 2.073.671 2.32 4.29-1.24 2.396 8.29 2.88-.834Zm-19.526 3.042-2.997-.037.087-7.074c.01-.842.22-1.567.63-2.177.407-.606.97-1.072 1.69-1.397.719-.322 1.551-.477 2.496-.466.953.012 1.785.188 2.496.527.712.343 1.263.823 1.654 1.439.388.62.577 1.35.567 2.19l-.088 7.075-2.997-.037.084-6.815a1.845 1.845 0 0 0-.216-.92 1.634 1.634 0 0 0-.617-.633 1.843 1.843 0 0 0-.914-.237 1.824 1.824 0 0 0-.92.215 1.633 1.633 0 0 0-.633.617 1.843 1.843 0 0 0-.238.914l-.084 6.816Zm-9.547-1.103 3.409-10.504-7.55-2.45-.746 2.298 4.698 1.524-.586 1.806-4.329-1.405-.745 2.298 4.329 1.405-.586 1.805-4.719-1.53-.745 2.297 7.57 2.456ZM22.905 87.208c-.177.314-.222.621-.135.923.084.3.327.585.729.857.256.173.487.284.693.332.201.049.376.047.524-.005a.733.733 0 0 0 .362-.276.709.709 0 0 0 .144-.338.874.874 0 0 0-.063-.388 2.117 2.117 0 0 0-.262-.45 5.056 5.056 0 0 0-.46-.533l-.643-.668a6.812 6.812 0 0 1-1.014-1.302 3.734 3.734 0 0 1-.465-1.219c-.07-.39-.06-.769.032-1.136.089-.37.25-.73.482-1.08.41-.6.904-1.008 1.484-1.224.58-.216 1.22-.245 1.92-.089.698.155 1.435.494 2.21 1.017.795.537 1.41 1.124 1.843 1.76.431.633.646 1.305.644 2.015-.008.71-.268 1.45-.782 2.218l-2.36-1.594c.174-.29.263-.573.267-.848a1.41 1.41 0 0 0-.235-.79 2.495 2.495 0 0 0-.718-.699 2.35 2.35 0 0 0-.732-.351 1.085 1.085 0 0 0-.591-.002.777.777 0 0 0-.412.3.681.681 0 0 0-.108.46c.014.166.092.358.235.576.142.222.357.484.646.788l.78.812c.69.723 1.132 1.448 1.322 2.175.185.728.034 1.449-.451 2.162-.39.583-.888.986-1.494 1.21-.612.225-1.279.27-2 .139-.726-.134-1.45-.445-2.174-.934-.739-.5-1.295-1.054-1.667-1.666-.372-.611-.552-1.24-.54-1.888.006-.646.21-1.269.612-1.87l2.377 1.606Zm-8.537-2.512 8.56-6.979-1.895-2.323-2.207 1.799-1.63.048 1.642-4.54-2.262-2.774-2.336 6.83-6.17.215 2.209 2.708 5.56-.247.095.117-3.46 2.822 1.894 2.324Zm-8.685-11.74-1.246-3.103 3.36-3.673-.031-.08-4.968-.33-1.245-3.103 8.537.943 3.223-1.293 1.108 2.762-3.223 1.294-5.515 6.583ZM0 51.466l11.033.49.352-7.93-2.413-.108-.22 4.935-1.896-.084.202-4.547-2.413-.107-.202 4.546-1.897-.084.22-4.956-2.413-.107L0 51.465Zm11.806-10.028L1.285 38.083l.91-2.856 8.22 2.62 1.357-4.253 2.301.734-2.267 7.11Zm3.2-9.565 2.393-3.511c.632-.927.998-1.854 1.1-2.781a4.625 4.625 0 0 0-.494-2.647c-.43-.837-1.12-1.58-2.071-2.227-.95-.648-1.894-1.016-2.83-1.106a4.567 4.567 0 0 0-2.649.518c-.83.434-1.566 1.12-2.206 2.06L5.88 25.653l9.126 6.22Zm.23-4.855-.645.944-4.919-3.352.595-.874c.324-.475.67-.826 1.039-1.054.37-.23.79-.309 1.263-.235.474.07 1.028.322 1.664.755.636.434 1.074.856 1.315 1.269.243.409.329.824.255 1.244-.07.417-.26.851-.568 1.303Zm7.154-5.173-6.926-8.603 6.2-4.99 1.515 1.88-3.864 3.112 1.19 1.478 3.545-2.854 1.515 1.882-3.545 2.854 1.19 1.479 3.848-3.098 1.515 1.882-6.183 4.978Zm4.142-16.636 4.275 10.183 2.764-1.16-1.411-3.362.957-.401 3.199 2.61 3.003-1.26-3.662-2.93c.422-.474.685-1.009.789-1.602.114-.637.019-1.32-.288-2.05-.303-.722-.72-1.275-1.253-1.66a3.351 3.351 0 0 0-1.821-.633c-.683-.037-1.402.103-2.157.42l-4.395 1.845Zm4.726 3.513-1.035-2.466.974-.409c.325-.136.62-.208.887-.214.268-.012.503.05.703.184.203.13.365.34.488.632.12.288.156.548.105.78-.047.23-.17.436-.367.616a2.756 2.756 0 0 1-.78.468l-.975.41Zm33.428 24.42v-2.957h11.748v2.957H72.37v10.56h-3.617v-10.56h-4.066Zm-5.217.237c.294.247.46.59.495 1.03h3.51c-.003-.884-.223-1.657-.66-2.316-.43-.665-1.044-1.18-1.84-1.545-.797-.365-1.74-.548-2.832-.548-1.07 0-2.017.18-2.845.541-.822.361-1.467.865-1.933 1.512-.462.642-.691 1.393-.687 2.25-.004 1.056.337 1.89 1.023 2.502.691.607 1.635 1.04 2.832 1.3l1.346.29c.502.11.9.23 1.195.357.294.123.506.264.633.422.132.154.2.335.205.541a.95.95 0 0 1-.211.588c-.137.172-.337.306-.6.403-.265.096-.593.145-.984.145-.467 0-.87-.073-1.208-.218a1.728 1.728 0 0 1-.779-.64c-.185-.282-.288-.63-.31-1.043h-3.485c.004 1.13.246 2.06.726 2.785.484.722 1.162 1.256 2.033 1.604.875.348 1.9.521 3.075.521 1.145 0 2.123-.16 2.938-.481.818-.322 1.447-.79 1.887-1.406.44-.616.662-1.369.667-2.258a4.144 4.144 0 0 0-.251-1.425 3.273 3.273 0 0 0-.746-1.175c-.339-.352-.774-.658-1.307-.917-.532-.26-1.172-.469-1.92-.627l-1.11-.238a6.172 6.172 0 0 1-.83-.224 2.59 2.59 0 0 1-.575-.278 1.07 1.07 0 0 1-.33-.35.867.867 0 0 1-.086-.442.897.897 0 0 1 .178-.528c.115-.154.29-.275.529-.363.241-.092.552-.138.93-.138.594 0 1.036.123 1.327.37ZM40.263 43.703V30.185h5.834c1.003 0 1.881.183 2.633.548a4.102 4.102 0 0 1 1.756 1.577c.418.687.627 1.51.627 2.469 0 .968-.216 1.784-.647 2.448a3.936 3.936 0 0 1-1.65 1.435l2.746 5.04h-3.987l-2.373-4.462h-1.27v4.462h-3.67Zm3.67-10.587v3.274h1.293c.431 0 .798-.053 1.102-.158.308-.11.543-.284.706-.522.167-.237.251-.547.251-.93 0-.388-.084-.702-.25-.944a1.402 1.402 0 0 0-.707-.541c-.304-.12-.671-.178-1.102-.178h-1.294Zm-5.41 10.587V30.185h-3.67v13.517h3.67Zm-14.523 0V30.185h9.504v2.957H27.67v2.323h5.253v2.957H27.67v5.28H24Zm42.585 19.812v1.063c0 .853.18 1.64.541 2.362a4.335 4.335 0 0 0 1.614 1.742c.709.44 1.578.659 2.608.659s1.903-.22 2.618-.66a4.314 4.314 0 0 0 1.623-1.741c.374-.722.561-1.509.561-2.362v-1.063c0-.866-.184-1.66-.55-2.381a4.25 4.25 0 0 0-1.625-1.732c-.708-.433-1.584-.65-2.627-.65-1.017 0-1.88.22-2.588.66a4.407 4.407 0 0 0-1.624 1.742 5.13 5.13 0 0 0-.55 2.361Zm3.425 1.063v-1.063c0-.393.092-.774.275-1.141.19-.367.545-.551 1.063-.551.564 0 .928.183 1.092.55.164.368.246.749.246 1.142v1.063c0 .394-.088.768-.265 1.122-.17.354-.529.531-1.073.531-.518 0-.873-.18-1.063-.54a2.464 2.464 0 0 1-.275-1.113ZM56.036 51.981v1.063c0 .853.18 1.637.541 2.352.368.715.906 1.29 1.614 1.722.709.433 1.578.65 2.608.65s1.903-.214 2.618-.64a4.2 4.2 0 0 0 1.623-1.712c.374-.715.561-1.506.561-2.372v-1.063c0-.866-.183-1.66-.55-2.381a4.25 4.25 0 0 0-1.625-1.732c-.708-.433-1.584-.65-2.627-.65-1.004 0-1.86.217-2.568.65a4.409 4.409 0 0 0-1.634 1.732 5.098 5.098 0 0 0-.56 2.381Zm3.464 1.063v-1.063c0-.373.085-.748.256-1.121.177-.38.525-.571 1.043-.571.564 0 .928.183 1.092.55.164.368.246.749.246 1.142v1.063c0 .394-.088.768-.265 1.122-.17.354-.528.531-1.073.531-.498 0-.84-.177-1.023-.531a2.404 2.404 0 0 1-.276-1.122Zm12.064-4.841L57.71 68.356h2.795l13.855-20.153h-2.794ZM45.251 68.907c-1.83-.006-3.411-.43-4.743-1.27-1.332-.839-2.359-2.05-3.08-3.63-.722-1.582-1.08-3.477-1.073-5.688.007-2.218.367-4.1 1.083-5.649.721-1.548 1.745-2.725 3.07-3.532 1.331-.807 2.912-1.21 4.743-1.21 1.83 0 3.411.406 4.743 1.22 1.332.806 2.358 1.984 3.08 3.532s1.08 3.428 1.073 5.639c0 2.224-.361 4.126-1.083 5.707-.721 1.581-1.748 2.792-3.08 3.631-1.325.834-2.903 1.25-4.733 1.25Zm0-4.448c.945 0 1.719-.492 2.322-1.476.61-.99.912-2.545.905-4.664 0-1.384-.137-2.516-.413-3.395-.275-.88-.656-1.529-1.141-1.949a2.46 2.46 0 0 0-1.673-.64c-.945 0-1.716.48-2.313 1.438-.597.957-.902 2.473-.915 4.546-.006 1.41.128 2.571.404 3.483.275.906.656 1.575 1.141 2.008.492.433 1.053.65 1.683.65Zm-11.253 3.897V48.203H28.96L24 51.233v4.646l4.409-2.638h.118v15.115h5.47Z"
+      />
+    </Svg>
+  )
+}
diff --git a/src/components/dialogs/nudges/TenMillion/icons/TwentyFivePercent.tsx b/src/components/dialogs/nudges/TenMillion/icons/TwentyFivePercent.tsx
new file mode 100644
index 00000000000..0d379714107
--- /dev/null
+++ b/src/components/dialogs/nudges/TenMillion/icons/TwentyFivePercent.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import Svg, {Path} from 'react-native-svg'
+
+export function TwentyFivePercent({fill}: {fill?: string}) {
+  return (
+    <Svg fill="none" viewBox="0 0 101 101">
+      <Path
+        fill={fill}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m63.145 6.112-3.002-.49c.02-.252 0-.487-.06-.704a1.548 1.548 0 0 0-.287-.583 1.576 1.576 0 0 0-.514-.433 2.24 2.24 0 0 0-.74-.247c-.498-.081-.938-.03-1.321.156-.38.185-.696.489-.947.91-.247.423-.422.95-.526 1.581-.109.667-.111 1.24-.008 1.72.108.477.314.856.617 1.139.305.28.696.458 1.175.536a2.5 2.5 0 0 0 .751.019c.228-.036.433-.106.614-.211.18-.105.336-.242.466-.41.133-.172.237-.371.31-.6l2.999.512c-.111.455-.317.904-.62 1.347-.3.439-.69.827-1.167 1.164a4.665 4.665 0 0 1-1.675.72c-.644.147-1.364.155-2.163.024-1-.163-1.863-.524-2.587-1.084-.721-.558-1.244-1.292-1.57-2.201-.32-.909-.383-1.966-.186-3.172.199-1.214.6-2.197 1.204-2.95.604-.758 1.339-1.285 2.203-1.58.865-.3 1.787-.37 2.766-.21.688.113 1.306.31 1.854.593a4.63 4.63 0 0 1 1.387 1.073c.378.43.657.93.837 1.498.18.568.244 1.196.19 1.883Zm1.052 7.644 4.921-9.887 7.126 3.546-1.077 2.163-4.441-2.21-.846 1.699 4.075 2.028-1.077 2.162-4.074-2.027-.846 1.699 4.422 2.2-1.076 2.163-7.107-3.536Zm16.824-3.2-7.456 8.146 2.211 2.024 2.462-2.689.765.7-1.03 3.999 2.402 2.199 1.125-4.552a3.216 3.216 0 0 0 1.786.045c.626-.162 1.207-.535 1.74-1.119.53-.578.858-1.189.984-1.833a3.35 3.35 0 0 0-.188-1.92c-.252-.634-.68-1.229-1.285-1.782l-3.516-3.219Zm-1.21 5.763.779.713c.26.238.51.41.752.513.246.103.484.129.713.075.232-.05.453-.192.664-.422.214-.234.337-.47.37-.707a1.145 1.145 0 0 0-.127-.716 2.473 2.473 0 0 0-.566-.716l-.78-.713-1.806 1.973Zm9.085 5.498 2.07-1.246 4.949 8.224-2.07 1.246-1.713-2.846-7.392 4.448-1.524-2.532 7.393-4.448-1.713-2.846Zm-1.004 17.267L98.34 35.51l-.97-2.837-10.45 3.575.97 2.837Zm.809 2.203 10.951-1.421 1 7.7-2.396.311-.614-4.727-1.882.244.552 4.257-2.395.31-.553-4.256-4.278.555-.385-2.973Zm.672 13.22 11.016.776.211-2.991-11.016-.776-.211 2.99Zm-.103 2.35 10.636 2.973-2.142 7.665-2.326-.65 1.335-4.778-1.828-.51-1.225 4.382-2.327-.65 1.225-4.383-1.828-.511-1.33 4.757-2.326-.65 2.136-7.645ZM86.221 67.06l-2.293 3.577c-.605.945-.945 1.882-1.02 2.811a4.626 4.626 0 0 0 .568 2.632c.454.824 1.165 1.547 2.133 2.168.969.62 1.922.962 2.86 1.025a4.568 4.568 0 0 0 2.633-.592c.819-.457 1.534-1.165 2.147-2.12l2.27-3.542-9.298-5.96Zm-.092 4.86.617-.963 5.012 3.213-.57.89c-.31.484-.646.845-1.008 1.083-.364.24-.782.331-1.256.27-.476-.056-1.038-.293-1.685-.708-.648-.415-1.098-.825-1.35-1.23-.255-.403-.352-.815-.29-1.237.058-.418.235-.858.53-1.318Zm-10.963 9.085 5.842 9.372-4.064 2.533c-.714.445-1.373.722-1.978.833-.608.112-1.145.07-1.61-.127-.47-.195-.852-.53-1.149-1.007a2.308 2.308 0 0 1-.359-1.085 2.381 2.381 0 0 1 .187-1.108 2.96 2.96 0 0 1 .707-.986l-.058-.092a2.77 2.77 0 0 1-1.289.378 2.48 2.48 0 0 1-1.27-.283c-.398-.205-.735-.528-1.01-.97a2.824 2.824 0 0 1-.45-1.62c.015-.565.198-1.115.546-1.65.349-.535.864-1.014 1.544-1.438l4.411-2.75Zm-1.278 3.618-1.19.741c-.427.266-.697.545-.812.837-.113.295-.071.6.124.914.137.22.304.374.5.464.195.09.41.116.646.08.233-.035.479-.133.738-.295l1.227-.764-1.233-1.977Zm2.214 3.55-1.044.651a1.819 1.819 0 0 0-.524.473c-.128.177-.197.36-.21.55a.954.954 0 0 0 .159.582c.18.29.422.446.724.47.305.025.616-.06.933-.258l1.08-.673-1.118-1.794Zm-7.713 9.13-3.068-10.61-7.17 2.073.672 2.32 4.29-1.24 2.395 8.289 2.88-.833Zm-19.526 3.041-2.998-.036.087-7.075c.01-.84.22-1.566.63-2.176.407-.606.97-1.072 1.69-1.398.72-.322 1.552-.477 2.497-.465.953.012 1.785.187 2.496.527.711.343 1.263.822 1.654 1.439.388.62.577 1.35.566 2.19l-.087 7.075-2.998-.037.084-6.816a1.843 1.843 0 0 0-.215-.919 1.634 1.634 0 0 0-.618-.633 1.843 1.843 0 0 0-.914-.238 1.824 1.824 0 0 0-.92.215 1.634 1.634 0 0 0-.632.618 1.844 1.844 0 0 0-.238.914l-.084 6.815Zm-9.547-1.102 3.408-10.505-7.55-2.45-.746 2.299 4.699 1.524-.586 1.806-4.329-1.405-.746 2.298 4.33 1.404-.586 1.806-4.72-1.531-.745 2.298 7.571 2.456ZM23.556 88.19c-.176.314-.222.622-.135.924.084.3.327.585.73.857.256.173.487.283.693.331.201.05.376.048.523-.004a.732.732 0 0 0 .363-.276.708.708 0 0 0 .144-.339.874.874 0 0 0-.064-.388 2.113 2.113 0 0 0-.262-.45 5.045 5.045 0 0 0-.46-.532l-.642-.668a6.812 6.812 0 0 1-1.014-1.303 3.736 3.736 0 0 1-.465-1.218c-.071-.39-.06-.77.032-1.137.089-.37.25-.73.482-1.08.41-.6.904-1.007 1.483-1.223.58-.216 1.22-.246 1.921-.089.698.155 1.434.494 2.209 1.017.796.537 1.41 1.123 1.844 1.76.431.633.645 1.305.643 2.014-.007.711-.268 1.45-.782 2.218l-2.36-1.593c.175-.29.264-.573.267-.848a1.41 1.41 0 0 0-.234-.79 2.495 2.495 0 0 0-.718-.7 2.35 2.35 0 0 0-.733-.35 1.085 1.085 0 0 0-.59-.003.777.777 0 0 0-.412.302.682.682 0 0 0-.109.46c.014.165.093.357.236.575.141.221.357.484.646.788l.779.812c.691.723 1.132 1.448 1.322 2.175.185.728.035 1.448-.45 2.162-.39.582-.888.986-1.495 1.21-.611.224-1.278.27-2 .139-.725-.134-1.45-.446-2.174-.935-.738-.499-1.294-1.054-1.666-1.665-.373-.612-.553-1.24-.54-1.888.006-.646.21-1.27.611-1.87l2.378 1.605Zm-8.537-2.512 8.56-6.978-1.895-2.324-2.206 1.8-1.63.048 1.642-4.54-2.262-2.775-2.336 6.83-6.17.216 2.208 2.708 5.56-.247.095.117-3.46 2.822 1.894 2.323Zm-8.685-11.74L5.09 70.836l3.36-3.673-.032-.08-4.967-.33-1.245-3.103 8.536.943 3.223-1.294 1.109 2.763-3.223 1.293-5.516 6.584ZM.652 52.448l11.032.49.353-7.93-2.414-.107-.219 4.934-1.896-.084.202-4.546-2.414-.108-.202 4.547-1.896-.084.22-4.956-2.413-.108-.353 7.952ZM12.458 42.42 1.936 39.065l.911-2.856 8.22 2.62 1.357-4.254 2.301.734-2.267 7.11Zm3.2-9.565 2.393-3.511c.632-.927.998-1.854 1.1-2.782a4.625 4.625 0 0 0-.494-2.646c-.43-.837-1.121-1.58-2.072-2.227-.95-.648-1.893-1.017-2.829-1.106a4.568 4.568 0 0 0-2.65.517c-.83.435-1.566 1.121-2.205 2.06l-2.37 3.476 9.127 6.219Zm.229-4.856-.644.945-4.92-3.353.596-.873c.324-.475.67-.827 1.038-1.054.37-.23.791-.31 1.263-.236.474.07 1.029.323 1.665.756.636.433 1.074.856 1.315 1.268.243.41.328.824.255 1.244-.071.417-.26.852-.568 1.303Zm7.155-5.173-6.926-8.602 6.2-4.991 1.515 1.881-3.865 3.112 1.19 1.478 3.546-2.854 1.515 1.882-3.545 2.854 1.19 1.478 3.848-3.097 1.514 1.882-6.182 4.977Zm4.141-16.635 4.275 10.183 2.765-1.161-1.411-3.361.956-.402 3.2 2.61 3.002-1.26L36.31 9.87c.421-.475.684-1.009.788-1.602.115-.637.02-1.32-.287-2.05-.303-.722-.721-1.276-1.253-1.66a3.351 3.351 0 0 0-1.822-.634c-.682-.037-1.4.103-2.157.42l-4.395 1.846Zm4.727 3.513-1.036-2.466.975-.41c.325-.136.62-.207.887-.214.268-.01.502.05.703.185.202.13.365.34.487.631.121.289.156.549.106.78-.048.231-.17.437-.367.617a2.755 2.755 0 0 1-.78.468l-.975.409Zm35.849 55.521v-1.027c0-.824.177-1.584.532-2.281a4.257 4.257 0 0 1 1.569-1.683c.684-.425 1.518-.637 2.5-.637 1.008 0 1.854.209 2.539.627.69.419 1.214.976 1.569 1.674.355.697.532 1.464.532 2.3v1.027c0 .824-.18 1.585-.542 2.282a4.17 4.17 0 0 1-1.569 1.683c-.69.424-1.533.637-2.529.637-.995 0-1.835-.213-2.52-.637a4.188 4.188 0 0 1-1.558-1.683 5.03 5.03 0 0 1-.523-2.282Zm3.308-1.027v1.027c0 .361.09.72.267 1.074.183.349.526.523 1.026.523.526 0 .872-.17 1.037-.513.17-.342.256-.704.256-1.084v-1.027c0-.38-.079-.748-.237-1.103-.159-.355-.51-.532-1.056-.532-.5 0-.843.177-1.026.532a2.437 2.437 0 0 0-.267 1.103Zm-13.5-10.116v-1.026c0-.837.18-1.604.542-2.301a4.259 4.259 0 0 1 1.578-1.674c.684-.418 1.512-.627 2.481-.627 1.008 0 1.854.21 2.539.627.69.419 1.214.976 1.569 1.674.355.697.532 1.464.532 2.3v1.027c0 .837-.18 1.6-.542 2.292a4.058 4.058 0 0 1-1.569 1.654c-.69.412-1.534.618-2.529.618-.995 0-1.835-.21-2.52-.628a4.14 4.14 0 0 1-1.558-1.663 4.972 4.972 0 0 1-.523-2.273Zm3.346-1.026v1.026c0 .38.09.742.267 1.084.177.342.507.514.988.514.526 0 .872-.172 1.037-.514.17-.342.256-.703.256-1.084v-1.026c0-.38-.079-.748-.237-1.103-.159-.355-.51-.533-1.056-.533-.5 0-.836.184-1.007.552a2.592 2.592 0 0 0-.248 1.084Zm-1.73 15.82L72.57 49.405h2.7L61.883 68.876h-2.7Zm-15.058-.523c1.16.526 2.488.789 3.984.789 1.584 0 2.963-.295 4.136-.884 1.172-.596 2.082-1.417 2.728-2.463.653-1.052.976-2.256.97-3.613.006-1.235-.257-2.326-.79-3.27a5.806 5.806 0 0 0-2.157-2.234c-.907-.54-1.94-.808-3.1-.808-.989 0-1.857.196-2.605.589-.748.387-1.274.875-1.578 1.464h-.114l.38-4.297h8.747v-4.221H41.644l-.76 10.724 4.639.913a2.443 2.443 0 0 1 1.036-1.113 3.062 3.062 0 0 1 1.55-.409c.538 0 1.014.118 1.426.352.412.228.735.555.97.98.234.418.348.912.342 1.483.006.564-.108 1.058-.342 1.483a2.509 2.509 0 0 1-.97.989c-.412.228-.887.342-1.426.342-.698 0-1.3-.2-1.807-.6-.5-.398-.76-.934-.78-1.606H40.39c.012 1.21.348 2.282 1.008 3.214.665.931 1.575 1.663 2.728 2.196Zm-19.514.523v-3.803l7.263-6.009c.482-.399.894-.773 1.236-1.122.349-.355.615-.719.799-1.093.19-.374.285-.789.285-1.245 0-.501-.108-.929-.323-1.284-.21-.355-.5-.627-.875-.818-.374-.196-.805-.294-1.293-.294-.488 0-.919.098-1.293.294a2.05 2.05 0 0 0-.855.866c-.203.38-.305.843-.305 1.388h-5.02c0-1.37.308-2.548.923-3.537.614-.989 1.483-1.75 2.605-2.282 1.122-.532 2.437-.798 3.945-.798 1.56 0 2.91.25 4.05.75 1.148.495 2.032 1.192 2.653 2.092.627.9.941 1.956.941 3.166 0 .748-.155 1.493-.466 2.235-.31.735-.868 1.55-1.673 2.443-.805.894-1.949 1.958-3.432 3.194l-1.826 1.522v.114h7.606v4.221H24.611ZM65.1 31.107v2.97h4.084v10.609h3.633V34.078h4.084v-2.97H65.101Zm-4.744 4.243c-.035-.442-.201-.786-.497-1.034-.292-.247-.736-.371-1.333-.371-.38 0-.692.046-.935.14-.238.088-.415.21-.53.364a.901.901 0 0 0-.18.53.87.87 0 0 0 .087.444c.07.129.181.246.332.352.15.102.342.194.576.278.235.084.513.16.836.226l1.114.238c.751.16 1.394.37 1.929.63.535.261.972.568 1.313.922.34.349.59.742.749 1.18.163.438.247.915.252 1.432-.005.893-.228 1.649-.67 2.267-.442.62-1.074 1.09-1.896 1.413-.818.322-1.801.484-2.95.484-1.18 0-2.21-.175-3.09-.524-.875-.35-1.556-.886-2.042-1.611-.482-.73-.725-1.662-.73-2.798h3.501c.023.415.126.765.312 1.047.186.283.446.498.782.644.34.145.745.218 1.214.218.393 0 .722-.048.988-.145.265-.098.466-.233.603-.405a.955.955 0 0 0 .212-.59.838.838 0 0 0-.206-.544c-.128-.159-.34-.3-.636-.424-.296-.128-.696-.248-1.2-.358l-1.353-.292c-1.202-.26-2.15-.696-2.844-1.306-.69-.614-1.032-1.452-1.027-2.513-.005-.861.225-1.615.689-2.26.469-.65 1.116-1.156 1.943-1.519.83-.362 1.783-.543 2.857-.543 1.096 0 2.044.183 2.844.55.8.367 1.417.884 1.85 1.551.438.663.659 1.44.663 2.327h-3.527Zm-19.79-4.242v13.578h3.686v-4.482h1.276l2.383 4.482h4.005l-2.758-5.063a3.953 3.953 0 0 0 1.657-1.441c.434-.668.65-1.488.65-2.46 0-.964-.21-1.79-.63-2.48a4.12 4.12 0 0 0-1.763-1.584c-.756-.367-1.638-.55-2.646-.55h-5.86Zm3.686 6.232V34.05h1.3c.432 0 .802.06 1.107.18.309.114.545.295.709.543.168.243.252.559.252.948 0 .384-.084.696-.252.935a1.4 1.4 0 0 1-.71.524c-.304.106-.674.159-1.107.159h-1.3Zm-5.433-6.233v13.579h-3.687V31.108h3.687Zm-14.59 0v13.579h3.686v-5.304h5.278v-2.97h-5.278v-2.334h5.861v-2.97H24.23Z"
+      />
+    </Svg>
+  )
+}
diff --git a/src/components/dialogs/nudges/TenMillion.tsx b/src/components/dialogs/nudges/TenMillion/index.tsx
similarity index 84%
rename from src/components/dialogs/nudges/TenMillion.tsx
rename to src/components/dialogs/nudges/TenMillion/index.tsx
index 5aa45f21419..fdac91f4fee 100644
--- a/src/components/dialogs/nudges/TenMillion.tsx
+++ b/src/components/dialogs/nudges/TenMillion/index.tsx
@@ -10,7 +10,7 @@ import {getCanvas} from '#/lib/canvas'
 import {shareUrl} from '#/lib/sharing'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
-import {isAndroid, isNative, isWeb} from '#/platform/detection'
+import {isNative} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
@@ -28,6 +28,9 @@ import {
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useContext} from '#/components/dialogs/nudges'
+import {OnePercent} from '#/components/dialogs/nudges/TenMillion/icons/OnePercent'
+import {PointOnePercent} from '#/components/dialogs/nudges/TenMillion/icons/PointOnePercent'
+import {TenPercent} from '#/components/dialogs/nudges/TenMillion/icons/TenPercent'
 import {Divider} from '#/components/Divider'
 import {GradientFill} from '#/components/GradientFill'
 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox'
@@ -35,6 +38,7 @@ import {Download_Stroke2_Corner0_Rounded as Download} from '#/components/icons/D
 import {Image_Stroke2_Corner0_Rounded as ImageIcon} from '#/components/icons/Image'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
+// import {TwentyFivePercent} from '#/components/dialogs/nudges/TenMillion/icons/TwentyFivePercent'
 
 const DEBUG = false
 const RATIO = 8 / 10
@@ -52,6 +56,20 @@ function getFontSize(count: number) {
   }
 }
 
+function getPercentBadge(percent: number) {
+  if (percent <= 0.001) {
+    return PointOnePercent
+  } else if (percent <= 0.01) {
+    return OnePercent
+  } else if (percent <= 0.1) {
+    return TenPercent
+  }
+  // else if (percent <= 0.25) {
+  //   return TwentyFivePercent
+  // }
+  return null
+}
+
 function Frame({children}: {children: React.ReactNode}) {
   return (
     <View
@@ -90,7 +108,9 @@ export function TenMillion() {
   const isLoadingData = isProfileLoading || !moderation || !profile
   const isLoadingImage = !uri
 
-  const userNumber = 10_000_000 // TODO
+  const userNumber = 56_738 // TODO
+  const percent = userNumber / 10_000_000
+  const Badge = getPercentBadge(percent)
 
   const sharePost = () => {
     if (uri) {
@@ -151,7 +171,6 @@ export function TenMillion() {
       imageRef.current.capture // &&
       // cavasRelayout === 'updated'
     ) {
-      console.log('LAYOUT')
       const uri = await imageRef.current.capture()
       setUri(uri)
     }
@@ -230,7 +249,7 @@ export function TenMillion() {
                   <View
                     style={[
                       {
-                        paddingBottom: 32,
+                        paddingBottom: isNative ? 0 : 24,
                       },
                     ]}>
                     <Text
@@ -238,7 +257,7 @@ export function TenMillion() {
                         a.text_md,
                         a.font_bold,
                         a.text_center,
-                        a.pb_md,
+                        a.pb_sm,
                         lightTheme.atoms.text_contrast_medium,
                       ]}>
                       <Trans>
@@ -246,16 +265,22 @@ export function TenMillion() {
                       </Trans>{' '}
                       🎉
                     </Text>
-                    <View>
+                    <View style={[a.flex_row, a.align_start]}>
                       <Text
                         style={[
                           a.absolute,
                           {
                             color: t.palette.primary_500,
                             fontSize: 32,
-                            left: -18,
-                            top: isAndroid ? -8 : isWeb ? 5 : -5,
                             fontWeight: '900',
+                            width: 32,
+                            top: isNative ? -10 : 0,
+                            left: 0,
+                            transform: [
+                              {
+                                translateX: -16,
+                              },
+                            ],
                           },
                         ]}>
                         #
@@ -275,6 +300,26 @@ export function TenMillion() {
                         {i18n.number(userNumber)}
                       </Text>
                     </View>
+
+                    {Badge && (
+                      <View
+                        style={[
+                          a.absolute,
+                          {
+                            width: 64,
+                            height: 64,
+                            top: isNative ? 75 : 85,
+                            right: '5%',
+                            transform: [
+                              {
+                                rotate: '8deg',
+                              },
+                            ],
+                          },
+                        ]}>
+                        <Badge fill={t.palette.primary_500} />
+                      </View>
+                    )}
                   </View>
                   {/* End centered content */}
 
@@ -398,15 +443,23 @@ export function TenMillion() {
               You're part of the next wave of the internet.
             </Text>
 
-            <Text style={[a.leading_snug, a.text_lg, a.pb_xl]}>
-              Online culture is too important to be controlled by a few
-              corporations.{' '}
+            <Text style={[a.leading_snug, a.text_lg, a.pb_md]}>
+              <Trans>
+                Online culture is too important to be controlled by a few
+                corporations.
+              </Trans>{' '}
               <Text style={[a.leading_snug, a.text_lg, a.italic]}>
-                We’re dedicated to building an open foundation for the social
-                internet so that we can all shape its future.
+                <Trans>
+                  We’re dedicated to building an open foundation for the social
+                  internet so that we can all shape its future.
+                </Trans>
               </Text>
             </Text>
 
+            <Text style={[a.leading_snug, a.text_lg, a.font_bold, a.pb_xl]}>
+              <Trans>Congratulations. We're glad you're here.</Trans>
+            </Text>
+
             <Divider />
 
             <View

From 2ee68e4f4d36414591c080329c80b3b11802948b Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 11 Sep 2024 09:51:40 -0500
Subject: [PATCH 06/24] Copy

---
 .../dialogs/nudges/TenMillion/index.tsx       | 22 +++++--------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/src/components/dialogs/nudges/TenMillion/index.tsx b/src/components/dialogs/nudges/TenMillion/index.tsx
index fdac91f4fee..f42cd2282b6 100644
--- a/src/components/dialogs/nudges/TenMillion/index.tsx
+++ b/src/components/dialogs/nudges/TenMillion/index.tsx
@@ -440,24 +440,14 @@ export function TenMillion() {
                   fontWeight: '900',
                 },
               ]}>
-              You're part of the next wave of the internet.
+              Thanks for being an early part of Bluesky.
             </Text>
 
-            <Text style={[a.leading_snug, a.text_lg, a.pb_md]}>
+            <Text style={[a.leading_snug, a.text_lg, a.pb_xl]}>
               <Trans>
-                Online culture is too important to be controlled by a few
-                corporations.
+                We're rebuilding the social internet together. Congratulations,
+                we're glad you're here.
               </Trans>{' '}
-              <Text style={[a.leading_snug, a.text_lg, a.italic]}>
-                <Trans>
-                  We’re dedicated to building an open foundation for the social
-                  internet so that we can all shape its future.
-                </Trans>
-              </Text>
-            </Text>
-
-            <Text style={[a.leading_snug, a.text_lg, a.font_bold, a.pb_xl]}>
-              <Trans>Congratulations. We're glad you're here.</Trans>
             </Text>
 
             <Divider />
@@ -471,7 +461,7 @@ export function TenMillion() {
                 a.pt_xl,
               ]}>
               <Text style={[a.text_md, a.italic, t.atoms.text_contrast_medium]}>
-                Brag a little ;)
+                Brag a little!
               </Text>
 
               <Button
@@ -495,7 +485,7 @@ export function TenMillion() {
                 variant="solid"
                 color="primary"
                 onPress={sharePost}>
-                <ButtonText>{_(msg`Share post`)}</ButtonText>
+                <ButtonText>{_(msg`Share`)}</ButtonText>
                 <ButtonIcon position="right" icon={ImageIcon} />
               </Button>
             </View>

From f8edd11bc5788666e0e6d55c1082971c901f089e Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 11 Sep 2024 09:57:37 -0500
Subject: [PATCH 07/24] Don't open for logged out users

---
 src/components/dialogs/nudges/TenMillion/index.tsx |  7 ++++++-
 src/components/dialogs/nudges/index.tsx            | 13 ++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/dialogs/nudges/TenMillion/index.tsx b/src/components/dialogs/nudges/TenMillion/index.tsx
index f42cd2282b6..c2c6926f780 100644
--- a/src/components/dialogs/nudges/TenMillion/index.tsx
+++ b/src/components/dialogs/nudges/TenMillion/index.tsx
@@ -87,6 +87,11 @@ function Frame({children}: {children: React.ReactNode}) {
 }
 
 export function TenMillion() {
+  const {hasSession} = useSession()
+  return hasSession ? <TenMillionInner /> : null
+}
+
+export function TenMillionInner() {
   const t = useTheme()
   const lightTheme = useTheme('light')
   const {_, i18n} = useLingui()
@@ -96,7 +101,7 @@ export function TenMillion() {
   const {currentAccount} = useSession()
   const {isLoading: isProfileLoading, data: profile} = useProfileQuery({
     did: currentAccount!.did,
-  }) // TODO PWI
+  })
   const moderationOpts = useModerationOpts()
   const moderation = React.useMemo(() => {
     return profile && moderationOpts
diff --git a/src/components/dialogs/nudges/index.tsx b/src/components/dialogs/nudges/index.tsx
index 357d4e2b402..eabe60c1765 100644
--- a/src/components/dialogs/nudges/index.tsx
+++ b/src/components/dialogs/nudges/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
+import {useSession} from '#/state/session'
 import * as Dialog from '#/components/Dialog'
-
 import {TenMillion} from '#/components/dialogs/nudges/TenMillion'
 
 type Context = {
@@ -12,7 +12,7 @@ type Context = {
 
 const Context = React.createContext<Context>({
   // @ts-ignore
-  controls: {}
+  controls: {},
 })
 
 export function useContext() {
@@ -22,17 +22,20 @@ export function useContext() {
 let SHOWN = false
 
 export function NudgeDialogs() {
+  const {hasSession} = useSession()
   const tenMillion = Dialog.useDialogControl()
 
   const ctx = React.useMemo(() => {
     return {
       controls: {
-        tenMillion
-      }
+        tenMillion,
+      },
     }
   }, [tenMillion])
 
   React.useEffect(() => {
+    if (!hasSession) return
+
     const t = setTimeout(() => {
       if (!SHOWN) {
         SHOWN = true
@@ -43,7 +46,7 @@ export function NudgeDialogs() {
     return () => {
       clearTimeout(t)
     }
-  }, [ctx])
+  }, [ctx, hasSession])
 
   return (
     <Context.Provider value={ctx}>

From 77d60a5b8047c2a4b18206e99d89d25222b4601c Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 11 Sep 2024 18:18:04 -0500
Subject: [PATCH 08/24] Hook up data

---
 .../dialogs/nudges/TenMillion/index.tsx       | 78 ++++++++++++++++++-
 1 file changed, 74 insertions(+), 4 deletions(-)

diff --git a/src/components/dialogs/nudges/TenMillion/index.tsx b/src/components/dialogs/nudges/TenMillion/index.tsx
index c2c6926f780..e110ed1ffb5 100644
--- a/src/components/dialogs/nudges/TenMillion/index.tsx
+++ b/src/components/dialogs/nudges/TenMillion/index.tsx
@@ -6,6 +6,7 @@ import {moderateProfile} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {networkRetry} from '#/lib/async/retry'
 import {getCanvas} from '#/lib/canvas'
 import {shareUrl} from '#/lib/sharing'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
@@ -13,7 +14,7 @@ import {sanitizeHandle} from '#/lib/strings/handles'
 import {isNative} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useProfileQuery} from '#/state/queries/profile'
-import {useSession} from '#/state/session'
+import {useAgent, useSession} from '#/state/session'
 import {useComposerControls} from 'state/shell'
 import {formatCount} from '#/view/com/util/numeric/format'
 // import {UserAvatar} from '#/view/com/util/UserAvatar'
@@ -109,14 +110,56 @@ export function TenMillionInner() {
       : undefined
   }, [profile, moderationOpts])
   const [uri, setUri] = React.useState<string | null>(null)
+  const [userNumber, setUserNumber] = React.useState<number>(0)
+  const [error, setError] = React.useState('')
 
-  const isLoadingData = isProfileLoading || !moderation || !profile
+  const isLoadingData =
+    isProfileLoading || !moderation || !profile || !userNumber
   const isLoadingImage = !uri
 
-  const userNumber = 56_738 // TODO
   const percent = userNumber / 10_000_000
   const Badge = getPercentBadge(percent)
 
+  const agent = useAgent()
+  React.useEffect(() => {
+    async function fetchUserNumber() {
+      if (agent.session?.accessJwt) {
+        const res = await fetch(
+          `https://bsky.social/xrpc/com.atproto.temp.getSignupNumber`,
+          {
+            headers: {
+              Authorization: `Bearer ${agent.session.accessJwt}`,
+            },
+          },
+        )
+
+        if (!res.ok) {
+          throw new Error('Network request failed')
+        }
+
+        const data = await res.json()
+
+        if (data.number) {
+          setUserNumber(data.number)
+        }
+      }
+    }
+
+    networkRetry(3, fetchUserNumber).catch(() => {
+      setError(
+        _(
+          msg`Oh no! We couldn't fetch your user number. Rest assured, we're glad you're here ❤️`,
+        ),
+      )
+    })
+  }, [
+    _,
+    agent.session?.accessJwt,
+    setUserNumber,
+    controls.tenMillion,
+    setError,
+  ])
+
   const sharePost = () => {
     if (uri) {
       controls.tenMillion.close(() => {
@@ -421,7 +464,34 @@ export function TenMillionInner() {
             <View
               style={[a.absolute, a.inset_0, a.align_center, a.justify_center]}>
               <GradientFill gradient={tokens.gradients.bonfire} />
-              {isLoadingData || isLoadingImage ? (
+              {error ? (
+                <View>
+                  <Text
+                    style={[
+                      a.text_md,
+                      a.leading_snug,
+                      a.text_center,
+                      a.pb_md,
+                      {
+                        maxWidth: 300,
+                      },
+                    ]}>
+                    (╯°□°)╯︵ ┻━┻
+                  </Text>
+                  <Text
+                    style={[
+                      a.text_xl,
+                      a.font_bold,
+                      a.leading_snug,
+                      a.text_center,
+                      {
+                        maxWidth: 300,
+                      },
+                    ]}>
+                    {error}
+                  </Text>
+                </View>
+              ) : isLoadingData || isLoadingImage ? (
                 <Loader size="xl" fill="white" />
               ) : (
                 <Image

From 63444052e8db9d2333b887a5ba5fd261e7df52db Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 11 Sep 2024 20:01:27 -0500
Subject: [PATCH 09/24] Rename

---
 src/App.native.tsx                                     |  4 ++--
 src/App.web.tsx                                        |  4 ++--
 .../{nudges => nuxs}/TenMillion/icons/OnePercent.tsx   |  0
 .../TenMillion/icons/PointOnePercent.tsx               |  0
 .../{nudges => nuxs}/TenMillion/icons/TenPercent.tsx   |  0
 .../TenMillion/icons/TwentyFivePercent.tsx             |  0
 .../dialogs/{nudges => nuxs}/TenMillion/index.tsx      | 10 +++++-----
 src/components/dialogs/{nudges => nuxs}/index.tsx      |  4 ++--
 8 files changed, 11 insertions(+), 11 deletions(-)
 rename src/components/dialogs/{nudges => nuxs}/TenMillion/icons/OnePercent.tsx (100%)
 rename src/components/dialogs/{nudges => nuxs}/TenMillion/icons/PointOnePercent.tsx (100%)
 rename src/components/dialogs/{nudges => nuxs}/TenMillion/icons/TenPercent.tsx (100%)
 rename src/components/dialogs/{nudges => nuxs}/TenMillion/icons/TwentyFivePercent.tsx (100%)
 rename src/components/dialogs/{nudges => nuxs}/TenMillion/index.tsx (97%)
 rename src/components/dialogs/{nudges => nuxs}/index.tsx (90%)

diff --git a/src/App.native.tsx b/src/App.native.tsx
index 95625bdff54..83f133e9901 100644
--- a/src/App.native.tsx
+++ b/src/App.native.tsx
@@ -57,13 +57,13 @@ import * as Toast from '#/view/com/util/Toast'
 import {Shell} from '#/view/shell'
 import {ThemeProvider as Alf} from '#/alf'
 import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
+import {NuxDialogs} from '#/components/dialogs/nuxs'
 import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
 import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
 import {Provider as PortalProvider} from '#/components/Portal'
 import {Splash} from '#/Splash'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
 import {AudioCategory, PlatformInfo} from '../modules/expo-bluesky-swiss-army'
-import {NudgeDialogs} from '#/components/dialogs/nudges'
 
 SplashScreen.preventAutoHideAsync()
 
@@ -132,7 +132,7 @@ function InnerApp() {
                                           style={s.h100pct}>
                                           <TestCtrls />
                                           <Shell />
-                                          <NudgeDialogs />
+                                          <NuxDialogs />
                                         </GestureHandlerRootView>
                                       </ProgressGuideProvider>
                                     </MutedThreadsProvider>
diff --git a/src/App.web.tsx b/src/App.web.tsx
index 79120ffdbf7..ff9944fa4a0 100644
--- a/src/App.web.tsx
+++ b/src/App.web.tsx
@@ -46,11 +46,11 @@ import {ToastContainer} from '#/view/com/util/Toast.web'
 import {Shell} from '#/view/shell/index'
 import {ThemeProvider as Alf} from '#/alf'
 import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
+import {NuxDialogs} from '#/components/dialogs/nuxs'
 import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
 import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
 import {Provider as PortalProvider} from '#/components/Portal'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
-import {NudgeDialogs} from '#/components/dialogs/nudges'
 
 function InnerApp() {
   const [isReady, setIsReady] = React.useState(false)
@@ -114,7 +114,7 @@ function InnerApp() {
                                       <SafeAreaProvider>
                                         <ProgressGuideProvider>
                                           <Shell />
-                                          <NudgeDialogs />
+                                          <NuxDialogs />
                                         </ProgressGuideProvider>
                                       </SafeAreaProvider>
                                     </MutedThreadsProvider>
diff --git a/src/components/dialogs/nudges/TenMillion/icons/OnePercent.tsx b/src/components/dialogs/nuxs/TenMillion/icons/OnePercent.tsx
similarity index 100%
rename from src/components/dialogs/nudges/TenMillion/icons/OnePercent.tsx
rename to src/components/dialogs/nuxs/TenMillion/icons/OnePercent.tsx
diff --git a/src/components/dialogs/nudges/TenMillion/icons/PointOnePercent.tsx b/src/components/dialogs/nuxs/TenMillion/icons/PointOnePercent.tsx
similarity index 100%
rename from src/components/dialogs/nudges/TenMillion/icons/PointOnePercent.tsx
rename to src/components/dialogs/nuxs/TenMillion/icons/PointOnePercent.tsx
diff --git a/src/components/dialogs/nudges/TenMillion/icons/TenPercent.tsx b/src/components/dialogs/nuxs/TenMillion/icons/TenPercent.tsx
similarity index 100%
rename from src/components/dialogs/nudges/TenMillion/icons/TenPercent.tsx
rename to src/components/dialogs/nuxs/TenMillion/icons/TenPercent.tsx
diff --git a/src/components/dialogs/nudges/TenMillion/icons/TwentyFivePercent.tsx b/src/components/dialogs/nuxs/TenMillion/icons/TwentyFivePercent.tsx
similarity index 100%
rename from src/components/dialogs/nudges/TenMillion/icons/TwentyFivePercent.tsx
rename to src/components/dialogs/nuxs/TenMillion/icons/TwentyFivePercent.tsx
diff --git a/src/components/dialogs/nudges/TenMillion/index.tsx b/src/components/dialogs/nuxs/TenMillion/index.tsx
similarity index 97%
rename from src/components/dialogs/nudges/TenMillion/index.tsx
rename to src/components/dialogs/nuxs/TenMillion/index.tsx
index e110ed1ffb5..663c0956070 100644
--- a/src/components/dialogs/nudges/TenMillion/index.tsx
+++ b/src/components/dialogs/nuxs/TenMillion/index.tsx
@@ -28,10 +28,10 @@ import {
 } from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
-import {useContext} from '#/components/dialogs/nudges'
-import {OnePercent} from '#/components/dialogs/nudges/TenMillion/icons/OnePercent'
-import {PointOnePercent} from '#/components/dialogs/nudges/TenMillion/icons/PointOnePercent'
-import {TenPercent} from '#/components/dialogs/nudges/TenMillion/icons/TenPercent'
+import {useContext} from '#/components/dialogs/nuxs'
+import {OnePercent} from '#/components/dialogs/nuxs/TenMillion/icons/OnePercent'
+import {PointOnePercent} from '#/components/dialogs/nuxs/TenMillion/icons/PointOnePercent'
+import {TenPercent} from '#/components/dialogs/nuxs/TenMillion/icons/TenPercent'
 import {Divider} from '#/components/Divider'
 import {GradientFill} from '#/components/GradientFill'
 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox'
@@ -39,7 +39,7 @@ import {Download_Stroke2_Corner0_Rounded as Download} from '#/components/icons/D
 import {Image_Stroke2_Corner0_Rounded as ImageIcon} from '#/components/icons/Image'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
-// import {TwentyFivePercent} from '#/components/dialogs/nudges/TenMillion/icons/TwentyFivePercent'
+// import {TwentyFivePercent} from '#/components/dialogs/nuxs/TenMillion/icons/TwentyFivePercent'
 
 const DEBUG = false
 const RATIO = 8 / 10
diff --git a/src/components/dialogs/nudges/index.tsx b/src/components/dialogs/nuxs/index.tsx
similarity index 90%
rename from src/components/dialogs/nudges/index.tsx
rename to src/components/dialogs/nuxs/index.tsx
index eabe60c1765..401dd3e669b 100644
--- a/src/components/dialogs/nudges/index.tsx
+++ b/src/components/dialogs/nuxs/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 import {useSession} from '#/state/session'
 import * as Dialog from '#/components/Dialog'
-import {TenMillion} from '#/components/dialogs/nudges/TenMillion'
+import {TenMillion} from '#/components/dialogs/nuxs/TenMillion'
 
 type Context = {
   controls: {
@@ -21,7 +21,7 @@ export function useContext() {
 
 let SHOWN = false
 
-export function NudgeDialogs() {
+export function NuxDialogs() {
   const {hasSession} = useSession()
   const tenMillion = Dialog.useDialogControl()
 

From 9bb385a4dd54aca2b21533b7dd919ac8d0b4aeef Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 11 Sep 2024 21:20:39 -0500
Subject: [PATCH 10/24] Refactor, integrate nux, snoozing

---
 .../dialogs/nuxs/TenMillion/index.tsx         | 180 ++++++++++--------
 src/components/dialogs/nuxs/index.tsx         |  80 +++++---
 src/components/dialogs/nuxs/snoozing.ts       |  18 ++
 src/state/queries/nuxs/definitions.ts         |  25 +--
 src/storage/schema.ts                         |   4 +-
 5 files changed, 179 insertions(+), 128 deletions(-)
 create mode 100644 src/components/dialogs/nuxs/snoozing.ts

diff --git a/src/components/dialogs/nuxs/TenMillion/index.tsx b/src/components/dialogs/nuxs/TenMillion/index.tsx
index 663c0956070..d96456d4729 100644
--- a/src/components/dialogs/nuxs/TenMillion/index.tsx
+++ b/src/components/dialogs/nuxs/TenMillion/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import {View} from 'react-native'
+import Animated, {FadeIn} from 'react-native-reanimated'
 import ViewShot from 'react-native-view-shot'
 import {Image} from 'expo-image'
 import {moderateProfile} from '@atproto/api'
@@ -17,7 +18,6 @@ import {useProfileQuery} from '#/state/queries/profile'
 import {useAgent, useSession} from '#/state/session'
 import {useComposerControls} from 'state/shell'
 import {formatCount} from '#/view/com/util/numeric/format'
-// import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {Logomark} from '#/view/icons/Logomark'
 import {
   atoms as a,
@@ -28,7 +28,7 @@ import {
 } from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
-import {useContext} from '#/components/dialogs/nuxs'
+import {useNuxDialogContext} from '#/components/dialogs/nuxs'
 import {OnePercent} from '#/components/dialogs/nuxs/TenMillion/icons/OnePercent'
 import {PointOnePercent} from '#/components/dialogs/nuxs/TenMillion/icons/PointOnePercent'
 import {TenPercent} from '#/components/dialogs/nuxs/TenMillion/icons/TenPercent'
@@ -39,7 +39,6 @@ import {Download_Stroke2_Corner0_Rounded as Download} from '#/components/icons/D
 import {Image_Stroke2_Corner0_Rounded as ImageIcon} from '#/components/icons/Image'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
-// import {TwentyFivePercent} from '#/components/dialogs/nuxs/TenMillion/icons/TwentyFivePercent'
 
 const DEBUG = false
 const RATIO = 8 / 10
@@ -65,9 +64,6 @@ function getPercentBadge(percent: number) {
   } else if (percent <= 0.1) {
     return TenPercent
   }
-  // else if (percent <= 0.25) {
-  //   return TwentyFivePercent
-  // }
   return null
 }
 
@@ -88,41 +84,13 @@ function Frame({children}: {children: React.ReactNode}) {
 }
 
 export function TenMillion() {
-  const {hasSession} = useSession()
-  return hasSession ? <TenMillionInner /> : null
-}
-
-export function TenMillionInner() {
-  const t = useTheme()
-  const lightTheme = useTheme('light')
-  const {_, i18n} = useLingui()
-  const {controls} = useContext()
-  const {gtMobile} = useBreakpoints()
-  const {openComposer} = useComposerControls()
-  const {currentAccount} = useSession()
-  const {isLoading: isProfileLoading, data: profile} = useProfileQuery({
-    did: currentAccount!.did,
-  })
-  const moderationOpts = useModerationOpts()
-  const moderation = React.useMemo(() => {
-    return profile && moderationOpts
-      ? moderateProfile(profile, moderationOpts)
-      : undefined
-  }, [profile, moderationOpts])
-  const [uri, setUri] = React.useState<string | null>(null)
+  const agent = useAgent()
+  const nuxDialogs = useNuxDialogContext()
   const [userNumber, setUserNumber] = React.useState<number>(0)
-  const [error, setError] = React.useState('')
-
-  const isLoadingData =
-    isProfileLoading || !moderation || !profile || !userNumber
-  const isLoadingImage = !uri
-
-  const percent = userNumber / 10_000_000
-  const Badge = getPercentBadge(percent)
 
-  const agent = useAgent()
   React.useEffect(() => {
     async function fetchUserNumber() {
+      // TODO check for 3p PDS
       if (agent.session?.accessJwt) {
         const res = await fetch(
           `https://bsky.social/xrpc/com.atproto.temp.getSignupNumber`,
@@ -146,26 +114,83 @@ export function TenMillionInner() {
     }
 
     networkRetry(3, fetchUserNumber).catch(() => {
-      setError(
-        _(
-          msg`Oh no! We couldn't fetch your user number. Rest assured, we're glad you're here ❤️`,
-        ),
-      )
+      nuxDialogs.dismissActiveNux()
     })
   }, [
-    _,
     agent.session?.accessJwt,
     setUserNumber,
-    controls.tenMillion,
-    setError,
+    nuxDialogs.dismissActiveNux,
+    nuxDialogs,
   ])
 
-  const sharePost = () => {
+  return userNumber ? <TenMillionInner userNumber={userNumber} /> : null
+}
+
+export function TenMillionInner({userNumber}: {userNumber: number}) {
+  const t = useTheme()
+  const lightTheme = useTheme('light')
+  const {_, i18n} = useLingui()
+  const control = Dialog.useDialogControl()
+  const {gtMobile} = useBreakpoints()
+  const {openComposer} = useComposerControls()
+  const {currentAccount} = useSession()
+  const {
+    isLoading: isProfileLoading,
+    data: profile,
+    error: profileError,
+  } = useProfileQuery({
+    did: currentAccount!.did,
+  })
+  const moderationOpts = useModerationOpts()
+  const nuxDialogs = useNuxDialogContext()
+  const moderation = React.useMemo(() => {
+    return profile && moderationOpts
+      ? moderateProfile(profile, moderationOpts)
+      : undefined
+  }, [profile, moderationOpts])
+  const [uri, setUri] = React.useState<string | null>(null)
+  const percent = userNumber / 10_000_000
+  const Badge = getPercentBadge(percent)
+  const isLoadingData = isProfileLoading || !moderation || !profile
+  const isLoadingImage = !uri
+
+  const error: string = React.useMemo(() => {
+    if (profileError) {
+      return _(
+        msg`Oh no! We weren't able to generate an image for you to share. Rest assured, we're glad you're here 🦋`,
+      )
+    }
+    return ''
+  }, [_, profileError])
+
+  /*
+   * Opening and closing
+   */
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      control.open()
+    }, 3e3)
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [control])
+  const onClose = React.useCallback(() => {
+    nuxDialogs.dismissActiveNux()
+  }, [nuxDialogs])
+
+  /*
+   * Actions
+   */
+  const sharePost = React.useCallback(() => {
     if (uri) {
-      controls.tenMillion.close(() => {
+      control.close(() => {
         setTimeout(() => {
           openComposer({
-            text: '10 milly, babyyy',
+            text: _(
+              msg`I'm user #${i18n.number(
+                userNumber,
+              )} out of 10M. What a ride 😎`,
+            ), // TODO
             imageUris: [
               {
                 uri,
@@ -177,17 +202,15 @@ export function TenMillionInner() {
         }, 1e3)
       })
     }
-  }
-
-  const onNativeShare = () => {
+  }, [_, i18n, control, openComposer, uri, userNumber])
+  const onNativeShare = React.useCallback(() => {
     if (uri) {
-      controls.tenMillion.close(() => {
+      control.close(() => {
         shareUrl(uri)
       })
     }
-  }
-
-  const download = async () => {
+  }, [uri, control])
+  const download = React.useCallback(async () => {
     if (uri) {
       const canvas = await getCanvas(uri)
       const imgHref = canvas
@@ -198,32 +221,24 @@ export function TenMillionInner() {
       link.setAttribute('href', imgHref)
       link.click()
     }
-  }
+  }, [uri])
 
+  /*
+   * Canvas stuff
+   */
   const imageRef = React.useRef<ViewShot>(null)
-  // const captureInProgress = React.useRef(false)
-  // const [cavasRelayout, setCanvasRelayout] = React.useState('key')
-  // const onCanvasReady = async () => {
-  //   if (
-  //     imageRef.current &&
-  //     imageRef.current.capture &&
-  //     !captureInProgress.current
-  //   ) {
-  //     captureInProgress.current = true
-  //     setCanvasRelayout('updated')
-  //   }
-  // }
-  const onCanvasLayout = async () => {
+  const captureInProgress = React.useRef(false)
+  const onCanvasReady = React.useCallback(async () => {
     if (
       imageRef.current &&
-      imageRef.current.capture // &&
-      // cavasRelayout === 'updated'
+      imageRef.current.capture &&
+      !captureInProgress.current
     ) {
+      captureInProgress.current = true
       const uri = await imageRef.current.capture()
       setUri(uri)
     }
-  }
-
+  }, [setUri])
   const canvas = isLoadingData ? null : (
     <View
       style={[
@@ -247,8 +262,7 @@ export function TenMillionInner() {
               options={{width: WIDTH, height: HEIGHT}}
               style={[a.absolute, a.inset_0]}>
               <View
-                // key={cavasRelayout}
-                onLayout={onCanvasLayout}
+                onLayout={onCanvasReady}
                 style={[
                   a.absolute,
                   a.inset_0,
@@ -442,7 +456,7 @@ export function TenMillionInner() {
   )
 
   return (
-    <Dialog.Outer control={controls.tenMillion}>
+    <Dialog.Outer control={control} onClose={onClose}>
       <Dialog.ScrollableInner
         label={_(msg`Ten Million`)}
         style={[
@@ -494,11 +508,15 @@ export function TenMillionInner() {
               ) : isLoadingData || isLoadingImage ? (
                 <Loader size="xl" fill="white" />
               ) : (
-                <Image
-                  accessibilityIgnoresInvertColors
-                  source={{uri}}
-                  style={[a.w_full, a.h_full]}
-                />
+                <Animated.View
+                  entering={FadeIn.duration(150)}
+                  style={[a.w_full, a.h_full]}>
+                  <Image
+                    accessibilityIgnoresInvertColors
+                    source={{uri}}
+                    style={[a.w_full, a.h_full]}
+                  />
+                </Animated.View>
               )}
             </View>
           </Frame>
diff --git a/src/components/dialogs/nuxs/index.tsx b/src/components/dialogs/nuxs/index.tsx
index 401dd3e669b..6c4598cdb12 100644
--- a/src/components/dialogs/nuxs/index.tsx
+++ b/src/components/dialogs/nuxs/index.tsx
@@ -1,56 +1,80 @@
 import React from 'react'
 
+import {Nux, useNuxs, useUpsertNuxMutation} from '#/state/queries/nuxs'
 import {useSession} from '#/state/session'
-import * as Dialog from '#/components/Dialog'
+import {isSnoozed, snooze} from '#/components/dialogs/nuxs/snoozing'
 import {TenMillion} from '#/components/dialogs/nuxs/TenMillion'
 
 type Context = {
-  controls: {
-    tenMillion: Dialog.DialogOuterProps['control']
-  }
+  activeNux: Nux | undefined
+  dismissActiveNux: () => void
 }
 
+const queuedNuxs = [Nux.TenMillionDialog]
+
 const Context = React.createContext<Context>({
-  // @ts-ignore
-  controls: {},
+  activeNux: undefined,
+  dismissActiveNux: () => {},
 })
 
-export function useContext() {
+export function useNuxDialogContext() {
   return React.useContext(Context)
 }
 
-let SHOWN = false
-
 export function NuxDialogs() {
   const {hasSession} = useSession()
-  const tenMillion = Dialog.useDialogControl()
+  return hasSession ? <Inner /> : null
+}
 
-  const ctx = React.useMemo(() => {
-    return {
-      controls: {
-        tenMillion,
-      },
-    }
-  }, [tenMillion])
+function Inner() {
+  const {nuxs} = useNuxs()
+  const [snoozed, setSnoozed] = React.useState(() => {
+    return isSnoozed()
+  })
+  const [activeNux, setActiveNux] = React.useState<Nux | undefined>()
+  const {mutate: upsertNux} = useUpsertNuxMutation()
+
+  const snoozeNuxDialog = React.useCallback(() => {
+    snooze()
+    setSnoozed(true)
+  }, [setSnoozed])
+
+  const dismissActiveNux = React.useCallback(() => {
+    setActiveNux(undefined)
+    upsertNux({
+      id: activeNux!,
+      completed: true,
+      data: undefined,
+    })
+  }, [activeNux, setActiveNux, upsertNux])
 
   React.useEffect(() => {
-    if (!hasSession) return
+    if (snoozed) return
+    if (!nuxs) return
+
+    for (const id of queuedNuxs) {
+      const nux = nuxs.find(nux => nux.id === id)
 
-    const t = setTimeout(() => {
-      if (!SHOWN) {
-        SHOWN = true
-        ctx.controls.tenMillion.open()
-      }
-    }, 2e3)
+      if (nux && nux.completed) continue
 
-    return () => {
-      clearTimeout(t)
+      setActiveNux(id)
+      // snooze immediately upon enabling
+      snoozeNuxDialog()
+
+      break
+    }
+  }, [nuxs, snoozed, snoozeNuxDialog])
+
+  const ctx = React.useMemo(() => {
+    return {
+      activeNux,
+      dismissActiveNux,
     }
-  }, [ctx, hasSession])
+  }, [activeNux, dismissActiveNux])
 
   return (
     <Context.Provider value={ctx}>
-      <TenMillion />
+      {activeNux === Nux.TenMillionDialog && <TenMillion />}
     </Context.Provider>
   )
 }
diff --git a/src/components/dialogs/nuxs/snoozing.ts b/src/components/dialogs/nuxs/snoozing.ts
new file mode 100644
index 00000000000..a36efd8edcb
--- /dev/null
+++ b/src/components/dialogs/nuxs/snoozing.ts
@@ -0,0 +1,18 @@
+import {simpleAreDatesEqual} from '#/lib/strings/time'
+import {device} from '#/storage'
+
+export function snooze() {
+  device.set(['lastNuxDialog'], new Date().toISOString())
+}
+
+export function isSnoozed() {
+  const lastNuxDialog = device.get(['lastNuxDialog'])
+  if (!lastNuxDialog) return false
+  const last = new Date(lastNuxDialog)
+  const now = new Date()
+  // already snoozed today
+  if (simpleAreDatesEqual(last, now)) {
+    return true
+  }
+  return false
+}
diff --git a/src/state/queries/nuxs/definitions.ts b/src/state/queries/nuxs/definitions.ts
index c5cb1e9d9bc..865967d37ad 100644
--- a/src/state/queries/nuxs/definitions.ts
+++ b/src/state/queries/nuxs/definitions.ts
@@ -3,27 +3,16 @@ import zod from 'zod'
 import {BaseNux} from '#/state/queries/nuxs/types'
 
 export enum Nux {
-  One = 'one',
-  Two = 'two',
+  TenMillionDialog = 'TenMillionDialog',
 }
 
 export const nuxNames = new Set(Object.values(Nux))
 
-export type AppNux =
-  | BaseNux<{
-      id: Nux.One
-      data: {
-        likes: number
-      }
-    }>
-  | BaseNux<{
-      id: Nux.Two
-      data: undefined
-    }>
+export type AppNux = BaseNux<{
+  id: Nux.TenMillionDialog
+  data: undefined
+}>
 
-export const NuxSchemas = {
-  [Nux.One]: zod.object({
-    likes: zod.number(),
-  }),
-  [Nux.Two]: undefined,
+export const NuxSchemas: Record<Nux, zod.ZodObject<any> | undefined> = {
+  [Nux.TenMillionDialog]: undefined,
 }
diff --git a/src/storage/schema.ts b/src/storage/schema.ts
index 6522d75a363..be074db430d 100644
--- a/src/storage/schema.ts
+++ b/src/storage/schema.ts
@@ -1,4 +1,6 @@
 /**
  * Device data that's specific to the device and does not vary based account
  */
-export type Device = {}
+export type Device = {
+  lastNuxDialog: string
+}

From c8b133863df5c6b417562f71f8a3c6feef280139 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 11 Sep 2024 21:28:34 -0500
Subject: [PATCH 11/24] Fix some nux types

---
 src/components/dialogs/nuxs/index.tsx | 9 ++++++---
 src/state/queries/nuxs/types.ts       | 4 +---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/dialogs/nuxs/index.tsx b/src/components/dialogs/nuxs/index.tsx
index 6c4598cdb12..36db7764d33 100644
--- a/src/components/dialogs/nuxs/index.tsx
+++ b/src/components/dialogs/nuxs/index.tsx
@@ -40,13 +40,16 @@ function Inner() {
   }, [setSnoozed])
 
   const dismissActiveNux = React.useCallback(() => {
+    if (!activeNux) return
     setActiveNux(undefined)
+    const nux = nuxs?.find(nux => nux.id === activeNux)
     upsertNux({
-      id: activeNux!,
+      id: activeNux,
       completed: true,
-      data: undefined,
+      data: nux?.data,
+      expiresAt: nux?.expiresAt,
     })
-  }, [activeNux, setActiveNux, upsertNux])
+  }, [activeNux, setActiveNux, upsertNux, nuxs])
 
   React.useEffect(() => {
     if (snoozed) return
diff --git a/src/state/queries/nuxs/types.ts b/src/state/queries/nuxs/types.ts
index 5b791847042..2331582a1d9 100644
--- a/src/state/queries/nuxs/types.ts
+++ b/src/state/queries/nuxs/types.ts
@@ -4,6 +4,4 @@ export type Data = Record<string, unknown> | undefined
 
 export type BaseNux<
   T extends Pick<AppBskyActorDefs.Nux, 'id' | 'expiresAt'> & {data: Data},
-> = T & {
-  completed: boolean
-}
+> = Pick<AppBskyActorDefs.Nux, 'id' | 'completed' | 'expiresAt'> & T

From 6e78ce53d74e79e2349ab357c7270e30742d33a5 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 11 Sep 2024 21:47:25 -0500
Subject: [PATCH 12/24] Dev helpers, string cleanup

---
 .../dialogs/nuxs/TenMillion/index.tsx         |  9 ++++-----
 src/components/dialogs/nuxs/index.tsx         | 20 +++++++++++++++++--
 src/components/dialogs/nuxs/snoozing.ts       |  4 ++++
 src/storage/schema.ts                         |  2 +-
 4 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/components/dialogs/nuxs/TenMillion/index.tsx b/src/components/dialogs/nuxs/TenMillion/index.tsx
index d96456d4729..5da295ab604 100644
--- a/src/components/dialogs/nuxs/TenMillion/index.tsx
+++ b/src/components/dialogs/nuxs/TenMillion/index.tsx
@@ -430,7 +430,6 @@ export function TenMillionInner({userNumber}: {userNumber: number}) {
                               style={[
                                 a.text_sm,
                                 a.font_semibold,
-                                ,
                                 a.leading_tight,
                                 lightTheme.atoms.text_contrast_low,
                               ]}>
@@ -533,13 +532,13 @@ export function TenMillionInner({userNumber}: {userNumber: number}) {
                   fontWeight: '900',
                 },
               ]}>
-              Thanks for being an early part of Bluesky.
+              <Trans>You're part of the next wave of the internet.</Trans>
             </Text>
 
             <Text style={[a.leading_snug, a.text_lg, a.pb_xl]}>
               <Trans>
-                We're rebuilding the social internet together. Congratulations,
-                we're glad you're here.
+                Thanks for being part of our first 10 million users. We're glad
+                you're here.
               </Trans>{' '}
             </Text>
 
@@ -554,7 +553,7 @@ export function TenMillionInner({userNumber}: {userNumber: number}) {
                 a.pt_xl,
               ]}>
               <Text style={[a.text_md, a.italic, t.atoms.text_contrast_medium]}>
-                Brag a little!
+                <Trans>Brag a little!</Trans>
               </Text>
 
               <Button
diff --git a/src/components/dialogs/nuxs/index.tsx b/src/components/dialogs/nuxs/index.tsx
index 36db7764d33..c02af59fcc3 100644
--- a/src/components/dialogs/nuxs/index.tsx
+++ b/src/components/dialogs/nuxs/index.tsx
@@ -1,9 +1,15 @@
 import React from 'react'
 
-import {Nux, useNuxs, useUpsertNuxMutation} from '#/state/queries/nuxs'
+import {
+  Nux,
+  useNuxs,
+  useRemoveNuxsMutation,
+  useUpsertNuxMutation,
+} from '#/state/queries/nuxs'
 import {useSession} from '#/state/session'
-import {isSnoozed, snooze} from '#/components/dialogs/nuxs/snoozing'
+import {isSnoozed, snooze, unsnooze} from '#/components/dialogs/nuxs/snoozing'
 import {TenMillion} from '#/components/dialogs/nuxs/TenMillion'
+import {IS_DEV} from '#/env'
 
 type Context = {
   activeNux: Nux | undefined
@@ -33,6 +39,7 @@ function Inner() {
   })
   const [activeNux, setActiveNux] = React.useState<Nux | undefined>()
   const {mutate: upsertNux} = useUpsertNuxMutation()
+  const {mutate: removeNuxs} = useRemoveNuxsMutation()
 
   const snoozeNuxDialog = React.useCallback(() => {
     snooze()
@@ -51,6 +58,15 @@ function Inner() {
     })
   }, [activeNux, setActiveNux, upsertNux, nuxs])
 
+  if (IS_DEV && typeof window !== 'undefined') {
+    // @ts-ignore
+    window.clearNuxDialog = (id: Nux) => {
+      if (!IS_DEV || !id) return
+      removeNuxs([id])
+      unsnooze()
+    }
+  }
+
   React.useEffect(() => {
     if (snoozed) return
     if (!nuxs) return
diff --git a/src/components/dialogs/nuxs/snoozing.ts b/src/components/dialogs/nuxs/snoozing.ts
index a36efd8edcb..91effd05016 100644
--- a/src/components/dialogs/nuxs/snoozing.ts
+++ b/src/components/dialogs/nuxs/snoozing.ts
@@ -5,6 +5,10 @@ export function snooze() {
   device.set(['lastNuxDialog'], new Date().toISOString())
 }
 
+export function unsnooze() {
+  device.set(['lastNuxDialog'], undefined)
+}
+
 export function isSnoozed() {
   const lastNuxDialog = device.get(['lastNuxDialog'])
   if (!lastNuxDialog) return false
diff --git a/src/storage/schema.ts b/src/storage/schema.ts
index be074db430d..bc41fd3edfc 100644
--- a/src/storage/schema.ts
+++ b/src/storage/schema.ts
@@ -2,5 +2,5 @@
  * Device data that's specific to the device and does not vary based account
  */
 export type Device = {
-  lastNuxDialog: string
+  lastNuxDialog: string | undefined
 }

From 45c8d89d9212bf7160317185f8418bdebbf3b617 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 11 Sep 2024 21:52:26 -0500
Subject: [PATCH 13/24] Protect against 3p PDSs and bad responses

---
 src/components/dialogs/nuxs/TenMillion/index.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/dialogs/nuxs/TenMillion/index.tsx b/src/components/dialogs/nuxs/TenMillion/index.tsx
index 5da295ab604..f5c8435deac 100644
--- a/src/components/dialogs/nuxs/TenMillion/index.tsx
+++ b/src/components/dialogs/nuxs/TenMillion/index.tsx
@@ -90,8 +90,11 @@ export function TenMillion() {
 
   React.useEffect(() => {
     async function fetchUserNumber() {
-      // TODO check for 3p PDS
-      if (agent.session?.accessJwt) {
+      const isBlueskyHosted = agent.sessionManager.pdsUrl
+        ?.toString()
+        .includes('bsky.network')
+
+      if (isBlueskyHosted && agent.session?.accessJwt) {
         const res = await fetch(
           `https://bsky.social/xrpc/com.atproto.temp.getSignupNumber`,
           {
@@ -109,6 +112,9 @@ export function TenMillion() {
 
         if (data.number) {
           setUserNumber(data.number)
+        } else {
+          // should be rare
+          nuxDialogs.dismissActiveNux()
         }
       }
     }
@@ -117,6 +123,7 @@ export function TenMillion() {
       nuxDialogs.dismissActiveNux()
     })
   }, [
+    agent.sessionManager.pdsUrl,
     agent.session?.accessJwt,
     setUserNumber,
     nuxDialogs.dismissActiveNux,
@@ -187,9 +194,9 @@ export function TenMillionInner({userNumber}: {userNumber: number}) {
         setTimeout(() => {
           openComposer({
             text: _(
-              msg`I'm user #${i18n.number(
+              msg`Bluesky now has over 10 million users, and I was #${i18n.number(
                 userNumber,
-              )} out of 10M. What a ride 😎`,
+              )}!`,
             ), // TODO
             imageUris: [
               {

From c99e43d6c625ed7d0bb4f1d25026512460445bef Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 11 Sep 2024 21:56:20 -0500
Subject: [PATCH 14/24] Protect against other exit methods, protect against
 multiple fetches

---
 .../dialogs/nuxs/TenMillion/index.tsx         | 10 +++++++---
 src/components/dialogs/nuxs/index.tsx         | 19 +++++++++----------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/components/dialogs/nuxs/TenMillion/index.tsx b/src/components/dialogs/nuxs/TenMillion/index.tsx
index f5c8435deac..c777551457d 100644
--- a/src/components/dialogs/nuxs/TenMillion/index.tsx
+++ b/src/components/dialogs/nuxs/TenMillion/index.tsx
@@ -87,6 +87,7 @@ export function TenMillion() {
   const agent = useAgent()
   const nuxDialogs = useNuxDialogContext()
   const [userNumber, setUserNumber] = React.useState<number>(0)
+  const fetching = React.useRef(false)
 
   React.useEffect(() => {
     async function fetchUserNumber() {
@@ -119,9 +120,12 @@ export function TenMillion() {
       }
     }
 
-    networkRetry(3, fetchUserNumber).catch(() => {
-      nuxDialogs.dismissActiveNux()
-    })
+    if (!fetching.current) {
+      fetching.current = true
+      networkRetry(3, fetchUserNumber).catch(() => {
+        nuxDialogs.dismissActiveNux()
+      })
+    }
   }, [
     agent.sessionManager.pdsUrl,
     agent.session?.accessJwt,
diff --git a/src/components/dialogs/nuxs/index.tsx b/src/components/dialogs/nuxs/index.tsx
index c02af59fcc3..f60c9e8d02f 100644
--- a/src/components/dialogs/nuxs/index.tsx
+++ b/src/components/dialogs/nuxs/index.tsx
@@ -49,14 +49,7 @@ function Inner() {
   const dismissActiveNux = React.useCallback(() => {
     if (!activeNux) return
     setActiveNux(undefined)
-    const nux = nuxs?.find(nux => nux.id === activeNux)
-    upsertNux({
-      id: activeNux,
-      completed: true,
-      data: nux?.data,
-      expiresAt: nux?.expiresAt,
-    })
-  }, [activeNux, setActiveNux, upsertNux, nuxs])
+  }, [activeNux, setActiveNux])
 
   if (IS_DEV && typeof window !== 'undefined') {
     // @ts-ignore
@@ -77,12 +70,18 @@ function Inner() {
       if (nux && nux.completed) continue
 
       setActiveNux(id)
-      // snooze immediately upon enabling
+      // immediately snooze (in memory)
       snoozeNuxDialog()
+      // immediately update remote data
+      upsertNux({
+        id,
+        completed: true,
+        data: undefined,
+      })
 
       break
     }
-  }, [nuxs, snoozed, snoozeNuxDialog])
+  }, [nuxs, snoozed, snoozeNuxDialog, upsertNux])
 
   const ctx = React.useMemo(() => {
     return {

From 63f85f649392a834f81a629902b971e72bea0eb8 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 12 Sep 2024 08:03:58 -0500
Subject: [PATCH 15/24] Copy

---
 src/components/dialogs/nuxs/TenMillion/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/dialogs/nuxs/TenMillion/index.tsx b/src/components/dialogs/nuxs/TenMillion/index.tsx
index c777551457d..db5e19da7ff 100644
--- a/src/components/dialogs/nuxs/TenMillion/index.tsx
+++ b/src/components/dialogs/nuxs/TenMillion/index.tsx
@@ -543,14 +543,14 @@ export function TenMillionInner({userNumber}: {userNumber: number}) {
                   fontWeight: '900',
                 },
               ]}>
-              <Trans>You're part of the next wave of the internet.</Trans>
+              <Trans>Thanks for being one of our first 10 million users.</Trans>
             </Text>
 
             <Text style={[a.leading_snug, a.text_lg, a.pb_xl]}>
               <Trans>
-                Thanks for being part of our first 10 million users. We're glad
+                Together, we're rebuilding the social internet. We're glad
                 you're here.
-              </Trans>{' '}
+              </Trans>
             </Text>
 
             <Divider />

From 46402fd01074764d49c1cc52b25ecf6dc5b274b2 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 12 Sep 2024 13:14:51 -0500
Subject: [PATCH 16/24] Add gate

---
 src/components/dialogs/nuxs/index.tsx | 24 ++++++++++++++++++++----
 src/lib/statsig/gates.ts              |  5 ++++-
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/dialogs/nuxs/index.tsx b/src/components/dialogs/nuxs/index.tsx
index f60c9e8d02f..a0063ce7605 100644
--- a/src/components/dialogs/nuxs/index.tsx
+++ b/src/components/dialogs/nuxs/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import {useGate} from '#/lib/statsig/statsig'
 import {
   Nux,
   useNuxs,
@@ -16,7 +17,17 @@ type Context = {
   dismissActiveNux: () => void
 }
 
-const queuedNuxs = [Nux.TenMillionDialog]
+const queuedNuxs: {
+  id: Nux
+  enabled(props: {gate: ReturnType<typeof useGate>}): boolean
+}[] = [
+  {
+    id: Nux.TenMillionDialog,
+    enabled({gate}) {
+      return gate('ten_million_dialog')
+    },
+  },
+]
 
 const Context = React.createContext<Context>({
   activeNux: undefined,
@@ -33,6 +44,7 @@ export function NuxDialogs() {
 }
 
 function Inner() {
+  const gate = useGate()
   const {nuxs} = useNuxs()
   const [snoozed, setSnoozed] = React.useState(() => {
     return isSnoozed()
@@ -64,15 +76,19 @@ function Inner() {
     if (snoozed) return
     if (!nuxs) return
 
-    for (const id of queuedNuxs) {
+    for (const {id, enabled} of queuedNuxs) {
       const nux = nuxs.find(nux => nux.id === id)
 
+      // check if completed first
       if (nux && nux.completed) continue
+      // then check gate (track exposure)
+      if (!enabled({gate})) continue
 
+      // we have a winner
       setActiveNux(id)
       // immediately snooze (in memory)
       snoozeNuxDialog()
-      // immediately update remote data
+      // immediately update remote data (affects next reload)
       upsertNux({
         id,
         completed: true,
@@ -81,7 +97,7 @@ function Inner() {
 
       break
     }
-  }, [nuxs, snoozed, snoozeNuxDialog, upsertNux])
+  }, [nuxs, snoozed, snoozeNuxDialog, upsertNux, gate])
 
   const ctx = React.useMemo(() => {
     return {
diff --git a/src/lib/statsig/gates.ts b/src/lib/statsig/gates.ts
index df9daab4476..9b6c036b9fe 100644
--- a/src/lib/statsig/gates.ts
+++ b/src/lib/statsig/gates.ts
@@ -1,3 +1,6 @@
 export type Gate =
   // Keep this alphabetic please.
-  'debug_show_feedcontext' | 'suggested_feeds_interstitial' | 'video_upload' // upload videos
+  | 'debug_show_feedcontext'
+  | 'suggested_feeds_interstitial'
+  | 'ten_million_dialog'
+  | 'video_upload' // upload videos

From bd79ce7ea00602db5914e54f8191b9429c024777 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 12 Sep 2024 13:45:06 -0500
Subject: [PATCH 17/24] Ensure dialog shows for all accounts without snoozing

---
 src/components/dialogs/nuxs/index.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/dialogs/nuxs/index.tsx b/src/components/dialogs/nuxs/index.tsx
index a0063ce7605..ba693329f5d 100644
--- a/src/components/dialogs/nuxs/index.tsx
+++ b/src/components/dialogs/nuxs/index.tsx
@@ -20,12 +20,18 @@ type Context = {
 const queuedNuxs: {
   id: Nux
   enabled(props: {gate: ReturnType<typeof useGate>}): boolean
+  /**
+   * TEMP only intended for use with the 10Milly dialog rn, since there are no
+   * other NUX dialogs configured
+   */
+  unsafe_disableSnooze: boolean
 }[] = [
   {
     id: Nux.TenMillionDialog,
     enabled({gate}) {
       return gate('ten_million_dialog')
     },
+    unsafe_disableSnooze: true,
   },
 ]
 
@@ -76,18 +82,27 @@ function Inner() {
     if (snoozed) return
     if (!nuxs) return
 
-    for (const {id, enabled} of queuedNuxs) {
+    for (const {id, enabled, unsafe_disableSnooze} of queuedNuxs) {
       const nux = nuxs.find(nux => nux.id === id)
 
       // check if completed first
       if (nux && nux.completed) continue
+
       // then check gate (track exposure)
       if (!enabled({gate})) continue
 
       // we have a winner
       setActiveNux(id)
-      // immediately snooze (in memory)
-      snoozeNuxDialog()
+
+      /**
+       * TEMP only intended for use with the 10Milly dialog rn, since there are no
+       * other NUX dialogs configured
+       */
+      if (!unsafe_disableSnooze) {
+        // immediately snooze (in memory)
+        snoozeNuxDialog()
+      }
+
       // immediately update remote data (affects next reload)
       upsertNux({
         id,

From 7bba213e1ac791a3284a48dc0e0f493f54d9c933 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 12 Sep 2024 13:45:58 -0500
Subject: [PATCH 18/24] Add retry

---
 src/state/queries/nuxs/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/state/queries/nuxs/index.ts b/src/state/queries/nuxs/index.ts
index 2945e67eb24..e183bcfad09 100644
--- a/src/state/queries/nuxs/index.ts
+++ b/src/state/queries/nuxs/index.ts
@@ -57,6 +57,7 @@ export function useUpsertNuxMutation() {
   const agent = useAgent()
 
   return useMutation({
+    retry: 3,
     mutationFn: async (nux: AppNux) => {
       await agent.bskyAppUpsertNux(serializeAppNux(nux))
       // triggers a refetch
@@ -72,6 +73,7 @@ export function useRemoveNuxsMutation() {
   const agent = useAgent()
 
   return useMutation({
+    retry: 3,
     mutationFn: async (ids: string[]) => {
       await agent.bskyAppRemoveNuxs(ids)
       // triggers a refetch

From 1f2e4b26c0e6a01bf6a297b333ba7c7f96149006 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 12 Sep 2024 13:54:20 -0500
Subject: [PATCH 19/24] Handle overflow of bottom text

---
 .../dialogs/nuxs/TenMillion/index.tsx          | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/dialogs/nuxs/TenMillion/index.tsx b/src/components/dialogs/nuxs/TenMillion/index.tsx
index db5e19da7ff..786c635c1df 100644
--- a/src/components/dialogs/nuxs/TenMillion/index.tsx
+++ b/src/components/dialogs/nuxs/TenMillion/index.tsx
@@ -424,13 +424,15 @@ export function TenMillionInner({userNumber}: {userNumber: number}) {
                             moderation.ui('displayName'),
                           )}
                         </Text>
-                        <View style={[a.flex_row, a.justify_between]}>
+                        <View
+                          style={[a.flex_row, a.justify_between, a.gap_4xl]}>
                           <Text
+                            numberOfLines={1}
                             style={[
+                              a.flex_1,
                               a.text_sm,
                               a.font_semibold,
-                              ,
-                              a.leading_tight,
+                              a.leading_snug,
                               lightTheme.atoms.text_contrast_medium,
                             ]}>
                             {sanitizeHandle(profile.handle, '@')}
@@ -438,16 +440,22 @@ export function TenMillionInner({userNumber}: {userNumber: number}) {
 
                           {profile.createdAt && (
                             <Text
+                              numberOfLines={1}
+                              ellipsizeMode="head"
                               style={[
+                                a.flex_1,
                                 a.text_sm,
                                 a.font_semibold,
-                                a.leading_tight,
+                                a.leading_snug,
+                                a.text_right,
                                 lightTheme.atoms.text_contrast_low,
                               ]}>
                               <Trans>
                                 Joined{' '}
                                 {i18n.date(profile.createdAt, {
-                                  dateStyle: 'long',
+                                  month: 'short',
+                                  day: 'numeric',
+                                  year: 'numeric',
                                 })}
                               </Trans>
                             </Text>

From cc8e7b5ae5686cfc51ee015d94cd726997d3c01a Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 12 Sep 2024 13:56:25 -0500
Subject: [PATCH 20/24] Handle display name

---
 src/components/dialogs/nuxs/TenMillion/index.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/dialogs/nuxs/TenMillion/index.tsx b/src/components/dialogs/nuxs/TenMillion/index.tsx
index 786c635c1df..6d80dd12a52 100644
--- a/src/components/dialogs/nuxs/TenMillion/index.tsx
+++ b/src/components/dialogs/nuxs/TenMillion/index.tsx
@@ -417,7 +417,15 @@ export function TenMillionInner({userNumber}: {userNumber: number}) {
                       />
                         */}
                       <View style={[a.gap_2xs, a.flex_1]}>
-                        <Text style={[a.text_sm, a.font_bold, a.leading_tight]}>
+                        <Text
+                          numberOfLines={1}
+                          style={[
+                            a.flex_1,
+                            a.text_sm,
+                            a.font_bold,
+                            a.leading_snug,
+                            {maxWidth: '60%'},
+                          ]}>
                           {sanitizeDisplayName(
                             profile.displayName ||
                               sanitizeHandle(profile.handle),

From 7acf0e1284be7ca5a5e7a55e1823ec0be1255308 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Thu, 12 Sep 2024 12:57:08 -0700
Subject: [PATCH 21/24] On android, change ten milly nux secondary action to
 save instead of share

---
 .../dialogs/nuxs/TenMillion/index.tsx         | 43 ++++++++++++++++---
 1 file changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/components/dialogs/nuxs/TenMillion/index.tsx b/src/components/dialogs/nuxs/TenMillion/index.tsx
index 6d80dd12a52..29256502db5 100644
--- a/src/components/dialogs/nuxs/TenMillion/index.tsx
+++ b/src/components/dialogs/nuxs/TenMillion/index.tsx
@@ -3,6 +3,8 @@ import {View} from 'react-native'
 import Animated, {FadeIn} from 'react-native-reanimated'
 import ViewShot from 'react-native-view-shot'
 import {Image} from 'expo-image'
+import {requestMediaLibraryPermissionsAsync} from 'expo-image-picker'
+import * as MediaLibrary from 'expo-media-library'
 import {moderateProfile} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -12,13 +14,14 @@ import {getCanvas} from '#/lib/canvas'
 import {shareUrl} from '#/lib/sharing'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
-import {isNative} from '#/platform/detection'
+import {isIOS, isNative} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useAgent, useSession} from '#/state/session'
 import {useComposerControls} from 'state/shell'
 import {formatCount} from '#/view/com/util/numeric/format'
 import {Logomark} from '#/view/icons/Logomark'
+import * as Toast from 'view/com/util/Toast'
 import {
   atoms as a,
   ThemeProvider,
@@ -221,7 +224,31 @@ export function TenMillionInner({userNumber}: {userNumber: number}) {
       })
     }
   }, [uri, control])
-  const download = React.useCallback(async () => {
+  const onNativeDownload = React.useCallback(async () => {
+    if (uri) {
+      const res = await requestMediaLibraryPermissionsAsync()
+
+      if (!res) {
+        Toast.show(
+          _(
+            msg`You must grant access to your photo library to save the image.`,
+          ),
+          'xmark',
+        )
+        return
+      }
+
+      try {
+        await MediaLibrary.createAssetAsync(uri)
+        Toast.show(_(msg`Image saved to your camera roll!`))
+      } catch (e: unknown) {
+        console.log(e)
+        Toast.show(_(msg`An error occurred while saving the image!`), 'xmark')
+        return
+      }
+    }
+  }, [_, uri])
+  const onWebDownload = React.useCallback(async () => {
     if (uri) {
       const canvas = await getCanvas(uri)
       const imgHref = canvas
@@ -586,7 +613,7 @@ export function TenMillionInner({userNumber}: {userNumber: number}) {
               <Button
                 disabled={isLoadingImage}
                 label={
-                  isNative
+                  isNative && isIOS
                     ? _(msg`Share image externally`)
                     : _(msg`Download image`)
                 }
@@ -594,8 +621,14 @@ export function TenMillionInner({userNumber}: {userNumber: number}) {
                 variant="solid"
                 color="secondary"
                 shape="square"
-                onPress={isNative ? onNativeShare : download}>
-                <ButtonIcon icon={isNative ? Share : Download} />
+                onPress={
+                  isNative
+                    ? isIOS
+                      ? onNativeShare
+                      : onNativeDownload
+                    : onWebDownload
+                }>
+                <ButtonIcon icon={isNative && isIOS ? Share : Download} />
               </Button>
               <Button
                 disabled={isLoadingImage}

From 36ac5513471d5764ec2a1449e19fff77b050d549 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Thu, 12 Sep 2024 13:11:30 -0700
Subject: [PATCH 22/24] Add ja and pt-BR translations

---
 src/locale/locales/ja/messages.po    | 224 +++++++++++++++++----------
 src/locale/locales/pt-BR/messages.po |  77 +++++++--
 2 files changed, 204 insertions(+), 97 deletions(-)

diff --git a/src/locale/locales/ja/messages.po b/src/locale/locales/ja/messages.po
index 61dc1394dd1..b1c03b59e37 100644
--- a/src/locale/locales/ja/messages.po
+++ b/src/locale/locales/ja/messages.po
@@ -115,7 +115,7 @@ msgstr "<0><1>テキストとタグ</1>中の</0>{0}"
 msgid "{0} joined this week"
 msgstr "今週、{0}人が参加しました"
 
-#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:593
+#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:637
 msgid "{0} of {1}"
 msgstr "{0} / {1}"
 
@@ -123,7 +123,7 @@ msgstr "{0} / {1}"
 msgid "{0} people have used this starter pack!"
 msgstr "{0}人がこのスターターパックを使用しました！"
 
-#: src/view/com/util/UserAvatar.tsx:419
+#: src/view/com/util/UserAvatar.tsx:423
 msgid "{0}'s avatar"
 msgstr "{0}のアバター"
 
@@ -372,7 +372,7 @@ msgstr "アカウントを追加"
 msgid "Add alt text"
 msgstr "ALTテキストを追加"
 
-#: src/view/com/composer/videos/SubtitleDialog.tsx:107
+#: src/view/com/composer/videos/SubtitleDialog.tsx:109
 msgid "Add alt text (optional)"
 msgstr "ALTテキストを追加（オプション）"
 
@@ -493,9 +493,9 @@ msgid "ALT"
 msgstr "ALT"
 
 #: src/view/com/composer/GifAltText.tsx:144
-#: src/view/com/composer/videos/SubtitleDialog.tsx:54
-#: src/view/com/composer/videos/SubtitleDialog.tsx:102
-#: src/view/com/composer/videos/SubtitleDialog.tsx:106
+#: src/view/com/composer/videos/SubtitleDialog.tsx:56
+#: src/view/com/composer/videos/SubtitleDialog.tsx:104
+#: src/view/com/composer/videos/SubtitleDialog.tsx:108
 #: src/view/com/modals/EditImage.tsx:316
 #: src/view/screens/AccessibilitySettings.tsx:87
 msgid "Alt text"
@@ -522,11 +522,11 @@ msgstr "以前のメールアドレス{0}にメールが送信されました。
 msgid "An error has occurred"
 msgstr "エラーが発生しました"
 
-#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:369
+#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:413
 msgid "An error occurred"
 msgstr "エラーが発生しました"
 
-#: src/state/queries/video/video.ts:227
+#: src/state/queries/video/video.ts:232
 msgid "An error occurred while compressing the video."
 msgstr "ビデオの圧縮中にエラーが発生しました。"
 
@@ -534,11 +534,11 @@ msgstr "ビデオの圧縮中にエラーが発生しました。"
 msgid "An error occurred while generating your starter pack. Want to try again?"
 msgstr "スターターパックの生成中にエラーが発生しました。再度試しますか？"
 
-#: src/view/com/util/post-embeds/VideoEmbed.tsx:213
+#: src/view/com/util/post-embeds/VideoEmbed.tsx:215
 msgid "An error occurred while loading the video. Please try again later."
 msgstr "ビデオの読み込み時にエラーが発生しました。時間をおいてもう一度お試しください。"
 
-#: src/view/com/util/post-embeds/VideoEmbed.web.tsx:170
+#: src/view/com/util/post-embeds/VideoEmbed.web.tsx:174
 msgid "An error occurred while loading the video. Please try again."
 msgstr "ビデオの読み込み時にエラーが発生しました。もう一度お試しください。"
 
@@ -547,7 +547,7 @@ msgstr "ビデオの読み込み時にエラーが発生しました。もう一
 msgid "An error occurred while saving the QR code!"
 msgstr "QRコードの保存中にエラーが発生しました！"
 
-#: src/view/com/composer/videos/SelectVideoBtn.tsx:61
+#: src/view/com/composer/videos/SelectVideoBtn.tsx:68
 msgid "An error occurred while selecting the video"
 msgstr "ビデオの選択中にエラーが発生しました"
 
@@ -556,7 +556,7 @@ msgstr "ビデオの選択中にエラーが発生しました"
 msgid "An error occurred while trying to follow all"
 msgstr "すべてフォローしようとしたらエラーが発生しました"
 
-#: src/state/queries/video/video.ts:194
+#: src/state/queries/video/video.ts:199
 msgid "An error occurred while uploading the video."
 msgstr "ビデオのアップロード中にエラーが発生しました。"
 
@@ -702,7 +702,7 @@ msgstr "あなたのフィードから{0}を削除してもよろしいですか
 msgid "Are you sure you want to remove this from your feeds?"
 msgstr "本当にこのフィードをあなたのフィードから削除したいですか？"
 
-#: src/view/com/composer/Composer.tsx:837
+#: src/view/com/composer/Composer.tsx:841
 msgid "Are you sure you'd like to discard this draft?"
 msgstr "本当にこの下書きを破棄しますか？"
 
@@ -844,6 +844,10 @@ msgstr "Bluesky は、ホスティング プロバイダーを選択できるオ
 msgid "Bluesky is better with friends!"
 msgstr "Blueskyは友達と一緒のほうが楽しい！"
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:201
+msgid "Bluesky now has over 10 million users, and I was #{0}!"
+msgstr "Bluesky のユーザー数は現在 1,000 万人を超えており、私は #{0} でした。"
+
 #: src/components/StarterPack/ProfileStarterPacks.tsx:282
 msgid "Bluesky will choose a set of recommended accounts from people in your network."
 msgstr "Blueskyはあなたのつながっているユーザーからおすすめのアカウントを選びます。"
@@ -865,6 +869,10 @@ msgstr "画像のぼかしとフィードからのフィルタリング"
 msgid "Books"
 msgstr "書籍"
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:583
+msgid "Brag a little!"
+msgstr "ちょっと自慢してみよう！"
+
 #: src/components/FeedInterstitials.tsx:346
 msgid "Browse more accounts on the Explore page"
 msgstr "検索ページでさらにアカウントを見る"
@@ -927,8 +935,8 @@ msgstr "英数字、スペース、ハイフン、アンダースコアのみが
 #: src/components/Prompt.tsx:124
 #: src/components/TagMenu/index.tsx:282
 #: src/screens/Deactivated.tsx:161
-#: src/view/com/composer/Composer.tsx:590
-#: src/view/com/composer/Composer.tsx:605
+#: src/view/com/composer/Composer.tsx:595
+#: src/view/com/composer/Composer.tsx:610
 #: src/view/com/modals/ChangeEmail.tsx:213
 #: src/view/com/modals/ChangeEmail.tsx:215
 #: src/view/com/modals/ChangeHandle.tsx:148
@@ -996,14 +1004,18 @@ msgstr "リンク先のウェブサイトを開くことをキャンセル"
 msgid "Cannot interact with a blocked user"
 msgstr "ブロックしたユーザーとはやりとりできません"
 
-#: src/view/com/composer/videos/SubtitleDialog.tsx:133
+#: src/view/com/composer/videos/SubtitleDialog.tsx:135
 msgid "Captions (.vtt)"
 msgstr "キャプション（.vtt）"
 
-#: src/view/com/composer/videos/SubtitleDialog.tsx:54
+#: src/view/com/composer/videos/SubtitleDialog.tsx:56
 msgid "Captions & alt text"
 msgstr "キャプション＆ALTテキスト"
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:336
+msgid "Celebrating {0} users"
+msgstr "{0} 人のユーザーを祝福"
+
 #: src/view/com/modals/VerifyEmail.tsx:160
 msgid "Change"
 msgstr "変更"
@@ -1238,7 +1250,7 @@ msgstr "下部のナビゲーションバーを閉じる"
 msgid "Closes password update alert"
 msgstr "パスワード更新アラートを閉じる"
 
-#: src/view/com/composer/Composer.tsx:602
+#: src/view/com/composer/Composer.tsx:607
 msgid "Closes post composer and discards post draft"
 msgstr "投稿の編集画面を閉じて下書きを削除する"
 
@@ -1277,7 +1289,7 @@ msgstr "初期設定を完了してアカウントを使い始める"
 msgid "Complete the challenge"
 msgstr "テストをクリアしてください"
 
-#: src/view/com/composer/Composer.tsx:710
+#: src/view/com/composer/Composer.tsx:715
 msgid "Compose posts up to {MAX_GRAPHEME_LENGTH} characters in length"
 msgstr "{MAX_GRAPHEME_LENGTH}文字までの投稿を作成"
 
@@ -1495,7 +1507,7 @@ msgstr "リストの読み込みに失敗しました"
 msgid "Could not mute chat"
 msgstr "チャットのミュートに失敗しました"
 
-#: src/view/com/composer/videos/VideoPreview.web.tsx:45
+#: src/view/com/composer/videos/VideoPreview.web.tsx:56
 msgid "Could not process your video"
 msgstr "ビデオを処理できませんでした"
 
@@ -1604,7 +1616,7 @@ msgstr "ダークモード"
 msgid "Dark theme"
 msgstr "ダークテーマ"
 
-#: src/screens/Signup/StepInfo/index.tsx:191
+#: src/screens/Signup/StepInfo/index.tsx:192
 msgid "Date of birth"
 msgstr "生年月日"
 
@@ -1738,7 +1750,7 @@ msgstr "引用投稿を切り離しますか？"
 msgid "Dialog: adjust who can interact with this post"
 msgstr "ダイアログ：この投稿に誰が反応できるか調整"
 
-#: src/view/com/composer/Composer.tsx:351
+#: src/view/com/composer/Composer.tsx:356
 msgid "Did you want to say anything?"
 msgstr "なにか言いたいことはあった？"
 
@@ -1763,7 +1775,7 @@ msgstr "メールでの２要素認証を無効化"
 msgid "Disable haptic feedback"
 msgstr "触覚フィードバックを無効化"
 
-#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:335
+#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:379
 msgid "Disable subtitles"
 msgstr "サブタイトル（字幕）を無効にする"
 
@@ -1776,11 +1788,11 @@ msgstr "サブタイトル（字幕）を無効にする"
 msgid "Disabled"
 msgstr "無効"
 
-#: src/view/com/composer/Composer.tsx:839
+#: src/view/com/composer/Composer.tsx:843
 msgid "Discard"
 msgstr "破棄"
 
-#: src/view/com/composer/Composer.tsx:836
+#: src/view/com/composer/Composer.tsx:840
 msgid "Discard draft?"
 msgstr "下書きを削除しますか？"
 
@@ -1806,7 +1818,7 @@ msgstr "新しいフィードを探す"
 #~ msgid "Dismiss"
 #~ msgstr "消す"
 
-#: src/view/com/composer/Composer.tsx:1106
+#: src/view/com/composer/Composer.tsx:1110
 msgid "Dismiss error"
 msgstr "エラーを消す"
 
@@ -1858,8 +1870,8 @@ msgstr "ドメインを確認しました！"
 #: src/screens/Onboarding/StepProfile/index.tsx:325
 #: src/view/com/auth/server-input/index.tsx:169
 #: src/view/com/auth/server-input/index.tsx:170
-#: src/view/com/composer/videos/SubtitleDialog.tsx:167
-#: src/view/com/composer/videos/SubtitleDialog.tsx:177
+#: src/view/com/composer/videos/SubtitleDialog.tsx:171
+#: src/view/com/composer/videos/SubtitleDialog.tsx:181
 #: src/view/com/modals/AddAppPasswords.tsx:243
 #: src/view/com/modals/AltImage.tsx:141
 #: src/view/com/modals/crop-image/CropImage.web.tsx:177
@@ -1891,6 +1903,10 @@ msgstr "Blueskyをダウンロード"
 msgid "Download CAR file"
 msgstr "CARファイルをダウンロード"
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:591
+msgid "Download image"
+msgstr "画像をダウンロード"
+
 #: src/view/com/composer/text-input/TextInput.web.tsx:269
 msgid "Drop to add images"
 msgstr "ドロップして画像を追加する"
@@ -1952,7 +1968,7 @@ msgctxt "action"
 msgid "Edit"
 msgstr "編集"
 
-#: src/view/com/util/UserAvatar.tsx:328
+#: src/view/com/util/UserAvatar.tsx:332
 #: src/view/com/util/UserBanner.tsx:92
 msgid "Edit avatar"
 msgstr "アバターを編集"
@@ -2112,7 +2128,7 @@ msgstr "有効にするメディアプレイヤー"
 msgid "Enable priority notifications"
 msgstr "優先通知を有効にする"
 
-#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:336
+#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:380
 msgid "Enable subtitles"
 msgstr "サブタイトル（字幕）を有効にする"
 
@@ -2130,7 +2146,7 @@ msgstr "有効"
 msgid "End of feed"
 msgstr "フィードの終わり"
 
-#: src/view/com/composer/videos/SubtitleDialog.tsx:157
+#: src/view/com/composer/videos/SubtitleDialog.tsx:161
 msgid "Ensure you have selected a language for each subtitle file."
 msgstr "各字幕ファイルに言語が選択されてることを確認してください。"
 
@@ -2232,7 +2248,7 @@ msgstr "フォローしているユーザーは除外"
 msgid "Excludes users you follow"
 msgstr "フォローしているユーザーは除外"
 
-#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:353
+#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:397
 msgid "Exit fullscreen"
 msgstr "全画面表示を終了"
 
@@ -2667,7 +2683,7 @@ msgctxt "from-feed"
 msgid "From <0/>"
 msgstr "<0/>から"
 
-#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:354
+#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:398
 msgid "Fullscreen"
 msgstr "全画面表示"
 
@@ -2696,7 +2712,7 @@ msgstr "開始"
 msgid "Getting started"
 msgstr "入門"
 
-#: src/components/MediaPreview.tsx:119
+#: src/components/MediaPreview.tsx:120
 msgid "GIF"
 msgstr "GIF"
 
@@ -3098,7 +3114,7 @@ msgstr "招待、ただし個人的なもの"
 msgid "It's just you right now! Add more people to your starter pack by searching above."
 msgstr "今はあなただけ！上で検索してスターターパックにより多くのユーザーを追加してください。"
 
-#: src/view/com/composer/Composer.tsx:1125
+#: src/view/com/composer/Composer.tsx:1129
 msgid "Job ID: {0}"
 msgstr "ジョブID：{0}"
 
@@ -3117,6 +3133,10 @@ msgstr "Blueskyに参加"
 msgid "Join the conversation"
 msgstr "会話に参加"
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:461
+msgid "Joined {0}"
+msgstr "{0} 参加"
+
 #: src/screens/Onboarding/index.tsx:21
 #: src/screens/Onboarding/state.ts:89
 msgid "Journalism"
@@ -3580,8 +3600,12 @@ msgstr "映画"
 msgid "Music"
 msgstr "音楽"
 
+#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:389
+msgctxt "video"
+msgid "Mute"
+msgstr ""
+
 #: src/components/TagMenu/index.tsx:263
-#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:345
 msgid "Mute"
 msgstr "ミュート"
 
@@ -4042,6 +4066,10 @@ msgstr "ちょっと！"
 msgid "Oh no! Something went wrong."
 msgstr "ちょっと！何らかの問題が発生したようです。"
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:171
+msgid "Oh no! We weren't able to generate an image for you to share. Rest assured, we're glad you're here 🦋"
+msgstr "ああ、残念！共有するための画像を生成できませんでした。ご安心ください、ここに来てくれて嬉しいです🦋"
+
 #: src/screens/Profile/Header/ProfileHeaderLabeler.tsx:339
 msgid "OK"
 msgstr "OK"
@@ -4062,7 +4090,7 @@ msgstr "<0><1/><2><3/></2></0>"
 msgid "Onboarding reset"
 msgstr "オンボーディングのリセット"
 
-#: src/view/com/composer/Composer.tsx:667
+#: src/view/com/composer/Composer.tsx:672
 msgid "One or more images is missing alt text."
 msgstr "１つもしくは複数の画像にALTテキストがありません。"
 
@@ -4113,8 +4141,8 @@ msgid "Open conversation options"
 msgstr "会話のオプションを開く"
 
 #: src/screens/Messages/Conversation/MessageInput.web.tsx:165
-#: src/view/com/composer/Composer.tsx:819
-#: src/view/com/composer/Composer.tsx:820
+#: src/view/com/composer/Composer.tsx:823
+#: src/view/com/composer/Composer.tsx:824
 msgid "Open emoji picker"
 msgstr "絵文字を入力"
 
@@ -4283,11 +4311,11 @@ msgid "Opens the threads preferences"
 msgstr "スレッドの設定を開く"
 
 #: src/view/com/notifications/FeedItem.tsx:551
-#: src/view/com/util/UserAvatar.tsx:420
+#: src/view/com/util/UserAvatar.tsx:424
 msgid "Opens this profile"
 msgstr "プロフィールを開く"
 
-#: src/view/com/composer/videos/SelectVideoBtn.tsx:81
+#: src/view/com/composer/videos/SelectVideoBtn.tsx:88
 msgid "Opens video picker"
 msgstr "ビデオの選択画面を開く"
 
@@ -4365,11 +4393,11 @@ msgid "Password updated!"
 msgstr "パスワードが更新されました！"
 
 #: src/view/com/util/post-embeds/GifEmbed.tsx:44
-#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:322
+#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:366
 msgid "Pause"
 msgstr "一時停止"
 
-#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:275
+#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:319
 msgid "Pause video"
 msgstr "ビデオを一時停止"
 
@@ -4429,7 +4457,7 @@ msgid "Pinned to your feeds"
 msgstr "フィードにピン留めしました"
 
 #: src/view/com/util/post-embeds/GifEmbed.tsx:44
-#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:323
+#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:367
 msgid "Play"
 msgstr "再生"
 
@@ -4441,8 +4469,8 @@ msgstr "{0}を再生"
 msgid "Play or pause the GIF"
 msgstr "GIFの再生や一時停止"
 
-#: src/view/com/util/post-embeds/VideoEmbed.tsx:187
-#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:276
+#: src/view/com/util/post-embeds/VideoEmbed.tsx:189
+#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:320
 msgid "Play video"
 msgstr "ビデオを再生"
 
@@ -4514,7 +4542,7 @@ msgstr "@{0}としてサインインしてください"
 msgid "Please Verify Your Email"
 msgstr "メールアドレスを確認してください"
 
-#: src/view/com/composer/Composer.tsx:355
+#: src/view/com/composer/Composer.tsx:360
 msgid "Please wait for your link card to finish loading"
 msgstr "リンクカードが読み込まれるまでお待ちください"
 
@@ -4527,8 +4555,8 @@ msgstr "政治"
 msgid "Porn"
 msgstr "ポルノ"
 
-#: src/view/com/composer/Composer.tsx:642
-#: src/view/com/composer/Composer.tsx:649
+#: src/view/com/composer/Composer.tsx:647
+#: src/view/com/composer/Composer.tsx:654
 msgctxt "action"
 msgid "Post"
 msgstr "投稿"
@@ -4698,11 +4726,11 @@ msgstr "ユーザーを一括でミュートまたはブロックする、公開
 msgid "Public, shareable lists which can drive feeds."
 msgstr "フィードとして利用できる、公開された共有可能なリスト。"
 
-#: src/view/com/composer/Composer.tsx:627
+#: src/view/com/composer/Composer.tsx:632
 msgid "Publish post"
 msgstr "投稿を公開"
 
-#: src/view/com/composer/Composer.tsx:627
+#: src/view/com/composer/Composer.tsx:632
 msgid "Publish reply"
 msgstr "返信を公開"
 
@@ -4832,7 +4860,7 @@ msgstr "アカウントを削除"
 msgid "Remove attachment"
 msgstr "添付を削除"
 
-#: src/view/com/util/UserAvatar.tsx:387
+#: src/view/com/util/UserAvatar.tsx:391
 msgid "Remove Avatar"
 msgstr "アバターを削除"
 
@@ -4900,7 +4928,7 @@ msgstr "引用を削除"
 msgid "Remove repost"
 msgstr "リポストを削除"
 
-#: src/view/com/composer/videos/SubtitleDialog.tsx:260
+#: src/view/com/composer/videos/SubtitleDialog.tsx:264
 msgid "Remove subtitle file"
 msgstr "字幕ファイルを削除"
 
@@ -4961,7 +4989,7 @@ msgstr "返信できません"
 msgid "Replies to this post are disabled."
 msgstr "この投稿への返信は無効化されています。"
 
-#: src/view/com/composer/Composer.tsx:640
+#: src/view/com/composer/Composer.tsx:645
 msgctxt "action"
 msgid "Reply"
 msgstr "返信"
@@ -5415,7 +5443,7 @@ msgstr "Blueskyの求人を見る"
 msgid "See this guide"
 msgstr "ガイドを見る"
 
-#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:587
+#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:631
 msgid "Seek slider"
 msgstr "シークバー"
 
@@ -5455,7 +5483,7 @@ msgstr "GIF「{0}」を選ぶ"
 msgid "Select how long to mute this word for."
 msgstr "このワードをどのくらいの間ミュートするのかを選択。"
 
-#: src/view/com/composer/videos/SubtitleDialog.tsx:245
+#: src/view/com/composer/videos/SubtitleDialog.tsx:249
 msgid "Select language..."
 msgstr "言語を選択…"
 
@@ -5487,7 +5515,7 @@ msgstr "報告先のモデレーションサービスを選んでください"
 msgid "Select the service that hosts your data."
 msgstr "データをホストするサービスを選択します。"
 
-#: src/view/com/composer/videos/SelectVideoBtn.tsx:80
+#: src/view/com/composer/videos/SelectVideoBtn.tsx:87
 msgid "Select video"
 msgstr "ビデオを選択"
 
@@ -5503,7 +5531,7 @@ msgstr "登録されたフィードに含める言語を選択します。選択
 msgid "Select your app language for the default text to display in the app."
 msgstr "アプリに表示されるデフォルトのテキストの言語を選択"
 
-#: src/screens/Signup/StepInfo/index.tsx:192
+#: src/screens/Signup/StepInfo/index.tsx:193
 msgid "Select your date of birth"
 msgstr "生年月日を選択"
 
@@ -5643,6 +5671,7 @@ msgstr "性的行為または性的なヌード。"
 msgid "Sexually Suggestive"
 msgstr "性的にきわどい"
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:607
 #: src/components/StarterPack/QrCodeDialog.tsx:177
 #: src/screens/StarterPack/StarterPackScreen.tsx:411
 #: src/screens/StarterPack/StarterPackScreen.tsx:582
@@ -5679,6 +5708,14 @@ msgstr "とにかく共有"
 msgid "Share feed"
 msgstr "フィードを共有"
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:590
+msgid "Share image externally"
+msgstr "画像を外部に共有する"
+
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:602
+msgid "Share image in post"
+msgstr "投稿で画像を共有"
+
 #: src/components/StarterPack/ShareDialog.tsx:124
 #: src/components/StarterPack/ShareDialog.tsx:131
 #: src/screens/StarterPack/StarterPackScreen.tsx:586
@@ -5950,8 +5987,8 @@ msgstr "何らかの問題が発生したようなので、もう一度お試し
 msgid "Something went wrong!"
 msgstr "何らかの問題が発生したようです！"
 
-#: src/App.native.tsx:102
-#: src/App.web.tsx:83
+#: src/App.native.tsx:103
+#: src/App.web.tsx:84
 msgid "Sorry! Your session expired. Please log in again."
 msgstr "大変申し訳ありません！セッションの有効期限が切れました。もう一度ログインしてください。"
 
@@ -6153,6 +6190,10 @@ msgstr "ジョークを言って！"
 msgid "Tell us a little more"
 msgstr "もう少し教えて"
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:487
+msgid "Ten Million"
+msgstr "1000万"
+
 #: src/view/shell/desktop/RightNav.tsx:90
 msgid "Terms"
 msgstr "条件"
@@ -6186,6 +6227,10 @@ msgstr "テキストの入力フィールド"
 msgid "Thank you. Your report has been sent."
 msgstr "ありがとうございます。あなたの報告は送信されました。"
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:562
+msgid "Thanks for being one of our first 10 million users."
+msgstr "最初の 1,000 万人のユーザーの 1 人になっていただきありがとうございます。"
+
 #: src/components/intents/VerifyEmailIntentDialog.tsx:74
 msgid "Thanks, you have successfully verified your email address."
 msgstr ""
@@ -6271,7 +6316,7 @@ msgstr "投稿が削除された可能性があります。"
 msgid "The Privacy Policy has been moved to <0/>"
 msgstr "プライバシーポリシーは<0/>に移動しました"
 
-#: src/state/queries/video/video.ts:222
+#: src/state/queries/video/video.ts:227
 msgid "The selected video is larger than 50MB."
 msgstr "選択したビデオのサイズが50MBを超えています。"
 
@@ -6608,7 +6653,7 @@ msgstr "メールでの２要素認証を無効にするには、メールアド
 msgid "To report a conversation, please report one of its messages via the conversation screen. This lets our moderators understand the context of your issue."
 msgstr "会話を報告するには、会話の画面からメッセージのうちの一つを報告してください。それによって問題の文脈をモデレーターが理解できるようになります。"
 
-#: src/view/com/composer/videos/SelectVideoBtn.tsx:106
+#: src/view/com/composer/videos/SelectVideoBtn.tsx:113
 msgid "To upload videos to Bluesky, you must first verify your email."
 msgstr "Blueskyにビデオをアップロードするには、まずメールアドレスを確認しなくてはなりません。"
 
@@ -6616,6 +6661,10 @@ msgstr "Blueskyにビデオをアップロードするには、まずメール
 msgid "To whom would you like to send this report?"
 msgstr "この報告を誰に送りたいですか？"
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:566
+msgid "Together, we're rebuilding the social internet. We're glad you're here."
+msgstr "私たちは一緒にソーシャル インターネットを再構築しています。ご参加いただきありがとうございます。"
+
 #: src/view/com/util/forms/DropdownButton.tsx:255
 msgid "Toggle dropdown"
 msgstr "ドロップダウンを切り替え"
@@ -6739,8 +6788,12 @@ msgstr "アカウントのフォローを解除"
 msgid "Unlike this feed"
 msgstr "このフィードからいいねを外す"
 
+#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:388
+msgctxt "video"
+msgid "Unmute"
+msgstr ""
+
 #: src/components/TagMenu/index.tsx:263
-#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:344
 #: src/view/screens/ProfileList.tsx:689
 msgid "Unmute"
 msgstr "ミュートを解除"
@@ -6767,7 +6820,7 @@ msgstr "会話のミュートを解除"
 msgid "Unmute thread"
 msgstr "スレッドのミュートを解除"
 
-#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:273
+#: src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx:317
 msgid "Unmute video"
 msgstr "ビデオのミュートを解除"
 
@@ -6809,7 +6862,7 @@ msgstr "このラベラーの登録を解除"
 msgid "Unsubscribed from list"
 msgstr "リストの登録を解除しました"
 
-#: src/state/queries/video/video.ts:240
+#: src/state/queries/video/video.ts:245
 msgid "Unsupported video type: {mimeType}"
 msgstr "サポートしていないビデオ形式：{mimeType}"
 
@@ -6846,20 +6899,20 @@ msgstr "代わりに写真をアップロード"
 msgid "Upload a text file to:"
 msgstr "テキストファイルのアップロード先："
 
-#: src/view/com/util/UserAvatar.tsx:355
-#: src/view/com/util/UserAvatar.tsx:358
+#: src/view/com/util/UserAvatar.tsx:359
+#: src/view/com/util/UserAvatar.tsx:362
 #: src/view/com/util/UserBanner.tsx:123
 #: src/view/com/util/UserBanner.tsx:126
 msgid "Upload from Camera"
 msgstr "カメラからアップロード"
 
-#: src/view/com/util/UserAvatar.tsx:372
+#: src/view/com/util/UserAvatar.tsx:376
 #: src/view/com/util/UserBanner.tsx:140
 msgid "Upload from Files"
 msgstr "ファイルからアップロード"
 
-#: src/view/com/util/UserAvatar.tsx:366
 #: src/view/com/util/UserAvatar.tsx:370
+#: src/view/com/util/UserAvatar.tsx:374
 #: src/view/com/util/UserBanner.tsx:134
 #: src/view/com/util/UserBanner.tsx:138
 msgid "Upload from Library"
@@ -6988,7 +7041,7 @@ msgstr "このコンテンツやプロフィールにいいねをしているユ
 msgid "Value:"
 msgstr "値："
 
-#: src/view/com/composer/videos/SelectVideoBtn.tsx:104
+#: src/view/com/composer/videos/SelectVideoBtn.tsx:111
 msgid "Verified email required"
 msgstr "メールアドレスの確認が必要"
 
@@ -7017,7 +7070,7 @@ msgstr "メールアドレスを確認"
 msgid "Verify New Email"
 msgstr "新しいメールアドレスを確認"
 
-#: src/view/com/composer/videos/SelectVideoBtn.tsx:108
+#: src/view/com/composer/videos/SelectVideoBtn.tsx:115
 msgid "Verify now"
 msgstr "確認する"
 
@@ -7047,11 +7100,11 @@ msgstr "ビデオの処理に失敗"
 msgid "Video Games"
 msgstr "ビデオゲーム"
 
-#: src/view/com/util/post-embeds/VideoEmbed.web.tsx:163
+#: src/view/com/util/post-embeds/VideoEmbed.web.tsx:167
 msgid "Video not found."
 msgstr "ビデオが見つかりません。"
 
-#: src/view/com/composer/videos/SubtitleDialog.tsx:99
+#: src/view/com/composer/videos/SubtitleDialog.tsx:101
 msgid "Video settings"
 msgstr "ビデオの設定"
 
@@ -7059,6 +7112,11 @@ msgstr "ビデオの設定"
 msgid "Video: {0}"
 msgstr "ビデオ：{0}"
 
+#: src/view/com/composer/videos/SelectVideoBtn.tsx:58
+#: src/view/com/composer/videos/VideoPreview.web.tsx:44
+msgid "Videos must be less than 60 seconds long"
+msgstr ""
+
 #: src/screens/Profile/Header/Shell.tsx:113
 msgid "View {0}'s avatar"
 msgstr "{0}のアバターを表示"
@@ -7224,7 +7282,7 @@ msgstr "大変申し訳ありませんが、現在ミュートされたワード
 msgid "We're sorry, but your search could not be completed. Please try again in a few minutes."
 msgstr "大変申し訳ありませんが、検索を完了できませんでした。数分後に再試行してください。"
 
-#: src/view/com/composer/Composer.tsx:417
+#: src/view/com/composer/Composer.tsx:422
 msgid "We're sorry! The post you are replying to has been deleted."
 msgstr "大変申し訳ありません！返信しようとしている投稿は削除されました。"
 
@@ -7255,7 +7313,7 @@ msgstr "あなたのスターターパックを何と呼びたいですか？"
 
 #: src/view/com/auth/SplashScreen.tsx:40
 #: src/view/com/auth/SplashScreen.web.tsx:86
-#: src/view/com/composer/Composer.tsx:512
+#: src/view/com/composer/Composer.tsx:517
 msgid "What's up?"
 msgstr "最近どう？"
 
@@ -7322,11 +7380,11 @@ msgstr "ワイド"
 msgid "Write a message"
 msgstr "メッセージを書く"
 
-#: src/view/com/composer/Composer.tsx:708
+#: src/view/com/composer/Composer.tsx:713
 msgid "Write post"
 msgstr "投稿を書く"
 
-#: src/view/com/composer/Composer.tsx:511
+#: src/view/com/composer/Composer.tsx:516
 #: src/view/com/post-thread/PostThreadComposePrompt.tsx:42
 msgid "Write your reply"
 msgstr "返信を書く"
@@ -7646,15 +7704,19 @@ msgstr "あなたのアカウント"
 msgid "Your account has been deleted"
 msgstr "あなたのアカウントは削除されました"
 
+#: src/state/queries/video/video.ts:185
+msgid "Your account is not yet old enough to upload videos. Please try again later."
+msgstr ""
+
 #: src/view/screens/Settings/ExportCarDialog.tsx:65
 msgid "Your account repository, containing all public data records, can be downloaded as a \"CAR\" file. This file does not include media embeds, such as images, or your private data, which must be fetched separately."
 msgstr "あなたのアカウントの公開データの全記録を含むリポジトリは、「CAR」ファイルとしてダウンロードできます。このファイルには、画像などのメディア埋め込み、また非公開のデータは含まれていないため、それらは個別に取得する必要があります。"
 
-#: src/screens/Signup/StepInfo/index.tsx:180
+#: src/screens/Signup/StepInfo/index.tsx:181
 msgid "Your birth date"
 msgstr "生年月日"
 
-#: src/view/com/util/post-embeds/VideoEmbed.web.tsx:167
+#: src/view/com/util/post-embeds/VideoEmbed.web.tsx:171
 msgid "Your browser does not support the video format. Please try a different browser."
 msgstr "利用中のブラウザがこのビデオ形式をサポートしていません。他のブラウザをお試しください。"
 
@@ -7705,7 +7767,7 @@ msgstr "ミュートしたワード"
 msgid "Your password has been changed successfully!"
 msgstr "パスワードの変更が完了しました！"
 
-#: src/view/com/composer/Composer.tsx:463
+#: src/view/com/composer/Composer.tsx:468
 msgid "Your post has been published"
 msgstr "投稿を公開しました"
 
@@ -7721,7 +7783,7 @@ msgstr "あなたのプロフィール"
 msgid "Your profile, posts, feeds, and lists will no longer be visible to other Bluesky users. You can reactivate your account at any time by logging in."
 msgstr "あなたのプロフィール、投稿、フィード、そしてリストは他のBlueskyユーザーに見えなくなります。ログインすることでいつでもアカウントを再有効化できます。"
 
-#: src/view/com/composer/Composer.tsx:462
+#: src/view/com/composer/Composer.tsx:467
 msgid "Your reply has been published"
 msgstr "返信を公開しました"
 
diff --git a/src/locale/locales/pt-BR/messages.po b/src/locale/locales/pt-BR/messages.po
index c51e3e82666..d49528e9b5b 100644
--- a/src/locale/locales/pt-BR/messages.po
+++ b/src/locale/locales/pt-BR/messages.po
@@ -139,7 +139,7 @@ msgstr "{0} pessoas já usaram este pacote inicial!"
 #~ msgid "{0} your feeds"
 #~ msgstr "{0} seus feeds"
 
-#: src/view/com/util/UserAvatar.tsx:419
+#: src/view/com/util/UserAvatar.tsx:423
 msgid "{0}'s avatar"
 msgstr "Avatar de {0}"
 
@@ -656,7 +656,7 @@ msgstr "Ocorreu um erro ao gerar seu pacote inicial. Quer tentar novamente?"
 msgid "An error occurred while loading the video. Please try again later."
 msgstr "Ocorreu um erro ao carregar o vídeo. Tente novamente mais tarde."
 
-#: src/view/com/util/post-embeds/VideoEmbed.web.tsx:171
+#: src/view/com/util/post-embeds/VideoEmbed.web.tsx:174
 msgid "An error occurred while loading the video. Please try again."
 msgstr "Ocorreu um erro ao carregar o vídeo. Tente novamente."
 
@@ -1005,6 +1005,10 @@ msgstr "Bluesky é melhor com amigos!"
 #~ msgid "Bluesky is public."
 #~ msgstr "Bluesky é público."
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:201
+msgid "Bluesky now has over 10 million users, and I was #{0}!"
+msgstr "O Bluesky agora tem mais de 10 milhões de usuários, e eu tinha #{0}!"
+
 #: src/components/StarterPack/ProfileStarterPacks.tsx:282
 msgid "Bluesky will choose a set of recommended accounts from people in your network."
 msgstr "O Bluesky escolherá um conjunto de contas recomendadas dentre as pessoas em sua rede."
@@ -1026,6 +1030,10 @@ msgstr "Desfocar imagens e filtrar dos feeds"
 msgid "Books"
 msgstr "Livros"
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:583
+msgid "Brag a little!"
+msgstr "Gabe-se um pouco!"
+
 #: src/components/FeedInterstitials.tsx:346
 msgid "Browse more accounts on the Explore page"
 msgstr "Navegue por mais contas na página Explorar"
@@ -1173,6 +1181,10 @@ msgstr "Legendas (.vtt)"
 msgid "Captions & alt text"
 msgstr "Legendas e texto alt"
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:336
+msgid "Celebrating {0} users"
+msgstr "Comemorando {0} usuários"
+
 #: src/view/com/modals/VerifyEmail.tsx:160
 msgid "Change"
 msgstr "Alterar"
@@ -1867,7 +1879,7 @@ msgstr "Tema escuro"
 #~ msgid "Dark Theme"
 #~ msgstr "Modo Escuro"
 
-#: src/screens/Signup/StepInfo/index.tsx:191
+#: src/screens/Signup/StepInfo/index.tsx:192
 msgid "Date of birth"
 msgstr "Data de nascimento"
 
@@ -2174,6 +2186,10 @@ msgstr "Baixe o Bluesky"
 msgid "Download CAR file"
 msgstr "Baixar arquivo CAR"
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:591
+msgid "Download image"
+msgstr "Baixar imagem"
+
 #: src/view/com/composer/text-input/TextInput.web.tsx:269
 msgid "Drop to add images"
 msgstr "Solte para adicionar imagens"
@@ -2239,7 +2255,7 @@ msgctxt "action"
 msgid "Edit"
 msgstr "Editar"
 
-#: src/view/com/util/UserAvatar.tsx:328
+#: src/view/com/util/UserAvatar.tsx:332
 #: src/view/com/util/UserBanner.tsx:92
 msgid "Edit avatar"
 msgstr "Editar avatar"
@@ -3545,6 +3561,10 @@ msgstr "Crie uma conta no Bluesky"
 msgid "Join the conversation"
 msgstr "Participe da conversa"
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:461
+msgid "Joined {0}"
+msgstr "Juntou-se {0}"
+
 #: src/screens/Onboarding/index.tsx:21
 #: src/screens/Onboarding/state.ts:89
 msgid "Journalism"
@@ -4551,6 +4571,10 @@ msgstr "Opa!"
 msgid "Oh no! Something went wrong."
 msgstr "Opa! Algo deu errado."
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:171
+msgid "Oh no! We weren't able to generate an image for you to share. Rest assured, we're glad you're here 🦋"
+msgstr "Ah, não! Não conseguimos gerar uma imagem para você compartilhar. Fique tranquilo, estamos felizes que você esteja aqui 🦋"
+
 #: src/screens/Profile/Header/ProfileHeaderLabeler.tsx:339
 msgid "OK"
 msgstr "OK"
@@ -4821,7 +4845,7 @@ msgid "Opens the threads preferences"
 msgstr "Abre as preferências de threads"
 
 #: src/view/com/notifications/FeedItem.tsx:551
-#: src/view/com/util/UserAvatar.tsx:420
+#: src/view/com/util/UserAvatar.tsx:424
 msgid "Opens this profile"
 msgstr "Abre este perfil"
 
@@ -5410,7 +5434,7 @@ msgstr "Remover conta"
 msgid "Remove attachment"
 msgstr ""
 
-#: src/view/com/util/UserAvatar.tsx:387
+#: src/view/com/util/UserAvatar.tsx:391
 msgid "Remove Avatar"
 msgstr "Remover avatar"
 
@@ -6153,7 +6177,7 @@ msgstr "Selecione quais idiomas você deseja ver nos seus feeds. Se nenhum for s
 msgid "Select your app language for the default text to display in the app."
 msgstr "Selecione o idioma do seu aplicativo"
 
-#: src/screens/Signup/StepInfo/index.tsx:192
+#: src/screens/Signup/StepInfo/index.tsx:193
 msgid "Select your date of birth"
 msgstr "Selecione sua data de nascimento"
 
@@ -6321,6 +6345,7 @@ msgstr "Atividade sexual ou nudez erótica."
 msgid "Sexually Suggestive"
 msgstr "Sexualmente Sugestivo"
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:607
 #: src/components/StarterPack/QrCodeDialog.tsx:177
 #: src/screens/StarterPack/StarterPackScreen.tsx:411
 #: src/screens/StarterPack/StarterPackScreen.tsx:582
@@ -6357,6 +6382,14 @@ msgstr "Compartilhar assim"
 msgid "Share feed"
 msgstr "Compartilhar feed"
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:590
+msgid "Share image externally"
+msgstr "Compartilhar imagem externamente"
+
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:602
+msgid "Share image in post"
+msgstr "Compartilhe a imagem na postagem"
+
 #: src/components/StarterPack/ShareDialog.tsx:124
 #: src/components/StarterPack/ShareDialog.tsx:131
 #: src/screens/StarterPack/StarterPackScreen.tsx:586
@@ -6668,8 +6701,8 @@ msgstr "Algo deu errado. Por favor, tente novamente."
 msgid "Something went wrong!"
 msgstr "Algo deu errado!"
 
-#: src/App.native.tsx:102
-#: src/App.web.tsx:83
+#: src/App.native.tsx:103
+#: src/App.web.tsx:84
 msgid "Sorry! Your session expired. Please log in again."
 msgstr "Opa! Sua sessão expirou. Por favor, entre novamente."
 
@@ -6912,6 +6945,10 @@ msgstr "Conte uma piada!"
 msgid "Tell us a little more"
 msgstr "Conte-nos um pouco mais"
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:487
+msgid "Ten Million"
+msgstr "Dez milhões"
+
 #: src/view/shell/desktop/RightNav.tsx:90
 msgid "Terms"
 msgstr "Termos"
@@ -6949,6 +6986,10 @@ msgstr "Campo de entrada de texto"
 msgid "Thank you. Your report has been sent."
 msgstr "Obrigado. Sua denúncia foi enviada."
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:562
+msgid "Thanks for being one of our first 10 million users."
+msgstr "Obrigado por ser um dos nossos primeiros 10 milhões de usuários."
+
 #: src/components/intents/VerifyEmailIntentDialog.tsx:74
 msgid "Thanks, you have successfully verified your email address."
 msgstr ""
@@ -7437,6 +7478,10 @@ msgstr "Para enviar vídeos para o Bluesky, você deve primeiro verificar seu e-
 msgid "To whom would you like to send this report?"
 msgstr "Para quem você gostaria de enviar esta denúncia?"
 
+#: src/components/dialogs/nuxs/TenMillion/index.tsx:566
+msgid "Together, we're rebuilding the social internet. We're glad you're here."
+msgstr "Juntos, estamos reconstruindo a internet social. Estamos felizes que você esteja aqui."
+
 #: src/components/dialogs/MutedWords.tsx:112
 #~ msgid "Toggle between muted word options."
 #~ msgstr "Alternar entre opções de uma palavra silenciada"
@@ -7691,20 +7736,20 @@ msgstr "Enviar uma foto"
 msgid "Upload a text file to:"
 msgstr "Carregar um arquivo de texto para:"
 
-#: src/view/com/util/UserAvatar.tsx:355
-#: src/view/com/util/UserAvatar.tsx:358
+#: src/view/com/util/UserAvatar.tsx:359
+#: src/view/com/util/UserAvatar.tsx:362
 #: src/view/com/util/UserBanner.tsx:123
 #: src/view/com/util/UserBanner.tsx:126
 msgid "Upload from Camera"
 msgstr "Tirar uma foto"
 
-#: src/view/com/util/UserAvatar.tsx:372
+#: src/view/com/util/UserAvatar.tsx:376
 #: src/view/com/util/UserBanner.tsx:140
 msgid "Upload from Files"
 msgstr "Carregar um arquivo"
 
-#: src/view/com/util/UserAvatar.tsx:366
 #: src/view/com/util/UserAvatar.tsx:370
+#: src/view/com/util/UserAvatar.tsx:374
 #: src/view/com/util/UserBanner.tsx:134
 #: src/view/com/util/UserBanner.tsx:138
 msgid "Upload from Library"
@@ -7904,7 +7949,7 @@ msgstr "Falha no processamento do vídeo"
 msgid "Video Games"
 msgstr "Games"
 
-#: src/view/com/util/post-embeds/VideoEmbed.web.tsx:164
+#: src/view/com/util/post-embeds/VideoEmbed.web.tsx:167
 msgid "Video not found."
 msgstr "Vídeo não encontrado."
 
@@ -8572,11 +8617,11 @@ msgstr "Sua conta ainda não tem idade suficiente para enviar vídeos. Por favor
 msgid "Your account repository, containing all public data records, can be downloaded as a \"CAR\" file. This file does not include media embeds, such as images, or your private data, which must be fetched separately."
 msgstr "O repositório da sua conta, contendo todos os seus dados públicos, pode ser baixado como um arquivo \"CAR\". Este arquivo não inclui imagens ou dados privados, estes devem ser exportados separadamente."
 
-#: src/screens/Signup/StepInfo/index.tsx:180
+#: src/screens/Signup/StepInfo/index.tsx:181
 msgid "Your birth date"
 msgstr "Sua data de nascimento"
 
-#: src/view/com/util/post-embeds/VideoEmbed.web.tsx:168
+#: src/view/com/util/post-embeds/VideoEmbed.web.tsx:171
 msgid "Your browser does not support the video format. Please try a different browser."
 msgstr "Seu navegador não suporta o formato de vídeo. Por favor, tente um navegador diferente."
 

From 003f9e06d40cebac812e4d0200b305727b5621e4 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 12 Sep 2024 21:18:11 -0500
Subject: [PATCH 23/24] Fallback snoozing

---
 src/components/dialogs/nuxs/index.tsx | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/dialogs/nuxs/index.tsx b/src/components/dialogs/nuxs/index.tsx
index ba693329f5d..78169607077 100644
--- a/src/components/dialogs/nuxs/index.tsx
+++ b/src/components/dialogs/nuxs/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 
 import {useGate} from '#/lib/statsig/statsig'
+import {logger} from '#/logger'
 import {
   Nux,
   useNuxs,
@@ -17,6 +18,16 @@ type Context = {
   dismissActiveNux: () => void
 }
 
+/**
+ * If we fail to complete a NUX here, it may show again on next reload,
+ * or if prefs state updates. If `true`, this fallback ensures that the last
+ * shown NUX won't show again, at least for this session.
+ *
+ * This is temporary, and only needed for the 10Milly dialog rn, since we
+ * aren't snoozing that one in device storage.
+ */
+let __isSnoozedFallback = false
+
 const queuedNuxs: {
   id: Nux
   enabled(props: {gate: ReturnType<typeof useGate>}): boolean
@@ -56,7 +67,7 @@ function Inner() {
     return isSnoozed()
   })
   const [activeNux, setActiveNux] = React.useState<Nux | undefined>()
-  const {mutate: upsertNux} = useUpsertNuxMutation()
+  const {mutateAsync: upsertNux} = useUpsertNuxMutation()
   const {mutate: removeNuxs} = useRemoveNuxsMutation()
 
   const snoozeNuxDialog = React.useCallback(() => {
@@ -79,6 +90,7 @@ function Inner() {
   }
 
   React.useEffect(() => {
+    if (__isSnoozedFallback) return
     if (snoozed) return
     if (!nuxs) return
 
@@ -99,7 +111,7 @@ function Inner() {
        * other NUX dialogs configured
        */
       if (!unsafe_disableSnooze) {
-        // immediately snooze (in memory)
+        // immediately snooze for a day
         snoozeNuxDialog()
       }
 
@@ -108,6 +120,16 @@ function Inner() {
         id,
         completed: true,
         data: undefined,
+      }).catch(e => {
+        logger.error(`NUX dialogs: failed to upsert '${id}' NUX`, {
+          safeMessage: e.message,
+        })
+        /*
+         * TEMP only intended for use with the 10Milly dialog rn
+         */
+        if (unsafe_disableSnooze) {
+          __isSnoozedFallback = true
+        }
       })
 
       break

From 4637c66390193a50628ae23a7891381da92abd24 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 12 Sep 2024 21:23:18 -0500
Subject: [PATCH 24/24] Let display name wrap

---
 src/components/dialogs/nuxs/TenMillion/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/dialogs/nuxs/TenMillion/index.tsx b/src/components/dialogs/nuxs/TenMillion/index.tsx
index 6d80dd12a52..28384c3c068 100644
--- a/src/components/dialogs/nuxs/TenMillion/index.tsx
+++ b/src/components/dialogs/nuxs/TenMillion/index.tsx
@@ -418,12 +418,11 @@ export function TenMillionInner({userNumber}: {userNumber: number}) {
                         */}
                       <View style={[a.gap_2xs, a.flex_1]}>
                         <Text
-                          numberOfLines={1}
                           style={[
                             a.flex_1,
                             a.text_sm,
                             a.font_bold,
-                            a.leading_snug,
+                            a.leading_tight,
                             {maxWidth: '60%'},
                           ]}>
                           {sanitizeDisplayName(