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 0000000000..9c8d47afd0
--- /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 (
+
+ )
+}
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 0000000000..1f9467e442
--- /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 (
+
+ )
+}
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 0000000000..4197be8357
--- /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 (
+
+ )
+}
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 0000000000..0d37971410
--- /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 (
+
+ )
+}
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 5aa45f2141..fdac91f4fe 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 (
{
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() {
@@ -246,16 +265,22 @@ export function TenMillion() {
{' '}
🎉
-
+
#
@@ -275,6 +300,26 @@ export function TenMillion() {
{i18n.number(userNumber)}
+
+ {Badge && (
+
+
+
+ )}
{/* End centered content */}
@@ -398,15 +443,23 @@ export function TenMillion() {
You're part of the next wave of the internet.
-
- Online culture is too important to be controlled by a few
- corporations.{' '}
+
+
+ Online culture is too important to be controlled by a few
+ corporations.
+ {' '}
- We’re dedicated to building an open foundation for the social
- internet so that we can all shape its future.
+
+ We’re dedicated to building an open foundation for the social
+ internet so that we can all shape its future.
+
+
+ Congratulations. We're glad you're here.
+
+