diff --git a/src/components/ageAssurance/AgeAssuranceAccountCard.tsx b/src/components/ageAssurance/AgeAssuranceAccountCard.tsx
new file mode 100644
index 0000000000..97670ccb7d
--- /dev/null
+++ b/src/components/ageAssurance/AgeAssuranceAccountCard.tsx
@@ -0,0 +1,102 @@
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
+import {useAgeAssuranceContext} from '#/state/age-assurance'
+import {atoms as a, useTheme, type ViewStyleProp} from '#/alf'
+import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
+import {
+ AgeAssuranceInitDialog,
+ useDialogControl,
+} from '#/components/ageAssurance/AgeAssuranceInitDialog'
+import {IsAgeRestricted} from '#/components/ageAssurance/IsAgeRestricted'
+import {Button, ButtonText} from '#/components/Button'
+import {Text} from '#/components/Typography'
+
+export function AgeAssuranceAccountCard({style}: ViewStyleProp & {}) {
+ return (
+
+
+
+ )
+}
+
+function Inner({style}: ViewStyleProp & {}) {
+ const t = useTheme()
+ const {_, i18n} = useLingui()
+ const {isAgeRestricted, hasInitiated, lastInitiatedAt} =
+ useAgeAssuranceContext()
+ const control = useDialogControl()
+ const getTimeAgo = useGetTimeAgo()
+ const timeAgo = lastInitiatedAt
+ ? getTimeAgo(lastInitiatedAt, new Date())
+ : null
+
+ if (!isAgeRestricted) return null
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ {lastInitiatedAt && (
+
+ {timeAgo === 'now' ? (
+ Last initiated just {timeAgo}
+ ) : (
+ Last initiated {timeAgo} ago
+ )}
+
+ )}
+
+
+
+
+
+ You're accessing Bluesky from a region that requires you to
+ verify your age prior to accessing certain content and features.
+
+
+
+
+
+
+
+ >
+ )
+}
diff --git a/src/components/ageAssurance/AgeAssuranceInitDialog.tsx b/src/components/ageAssurance/AgeAssuranceInitDialog.tsx
index da7a236efc..b27db906da 100644
--- a/src/components/ageAssurance/AgeAssuranceInitDialog.tsx
+++ b/src/components/ageAssurance/AgeAssuranceInitDialog.tsx
@@ -5,6 +5,8 @@ import {useLingui} from '@lingui/react'
import {validate as validateEmail} from 'email-validator'
import {useCleanError} from '#/lib/hooks/useCleanError'
+import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
+import {useAgeAssuranceContext} from '#/state/age-assurance'
import {useLanguagePrefs} from '#/state/preferences'
import {useSession} from '#/state/session'
import {atoms as a, useTheme, web} from '#/alf'
@@ -57,6 +59,12 @@ function Inner() {
const langPrefs = useLanguagePrefs()
const cleanError = useCleanError()
const {close} = Dialog.useDialogContext()
+ const {lastInitiatedAt} = useAgeAssuranceContext()
+ const getTimeAgo = useGetTimeAgo()
+
+ const wasRecentlyInitiated =
+ lastInitiatedAt &&
+ new Date(lastInitiatedAt).getTime() > Date.now() - 5 * 60 * 1000 // 5 minutes
const [success, setSuccess] = useState(false)
const [email, setEmail] = useState(currentAccount?.email || '')
@@ -146,6 +154,17 @@ function Inner() {
+ {wasRecentlyInitiated && (
+
+
+ You initiated this flow already,{' '}
+ {getTimeAgo(lastInitiatedAt, new Date(), {format: 'long'})}{' '}
+ ago. It may take up to 5 minutes for emails to reach your
+ inbox. Consider waiting a few minutes before trying again.
+
+
+ )}
+
Your email
diff --git a/src/screens/Settings/AccountSettings.tsx b/src/screens/Settings/AccountSettings.tsx
index 393bad2f86..befbcce232 100644
--- a/src/screens/Settings/AccountSettings.tsx
+++ b/src/screens/Settings/AccountSettings.tsx
@@ -1,3 +1,4 @@
+import {View} from 'react-native'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {type NativeStackScreenProps} from '@react-navigation/native-stack'
@@ -7,6 +8,7 @@ import {useModalControls} from '#/state/modals'
import {useSession} from '#/state/session'
import * as SettingsList from '#/screens/Settings/components/SettingsList'
import {atoms as a, useTheme} from '#/alf'
+import {AgeAssuranceAccountCard} from '#/components/AgeAssurance/AgeAssuranceAccountCard'
import {useDialogControl} from '#/components/Dialog'
import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings'
import {
@@ -113,7 +115,6 @@ export function AccountSettingsScreen({}: Props) {
-
@@ -124,6 +125,12 @@ export function AccountSettingsScreen({}: Props) {
onPress={() => birthdayControl.open()}
/>
+
+
+
+
+
+
openModal({name: 'change-password'})}>
diff --git a/src/state/age-assurance/index.tsx b/src/state/age-assurance/index.tsx
index 730788996e..9bf0f41dc5 100644
--- a/src/state/age-assurance/index.tsx
+++ b/src/state/age-assurance/index.tsx
@@ -1,4 +1,5 @@
import {createContext, useContext, useMemo} from 'react'
+import {type AppBskyUnspeccedDefs} from '@atproto/api'
import {useQuery, useQueryClient} from '@tanstack/react-query'
import {wait} from '#/lib/async/wait'
@@ -7,7 +8,6 @@ import {Logger} from '#/logger'
import {
type AgeAssuranceAPIContextType,
type AgeAssuranceContextType,
- type AppBskyUnspeccedDefs,
} from '#/state/age-assurance/types'
import {useGeolocation} from '#/state/geolocation'
import {preferencesQueryKey} from '#/state/queries/preferences'
@@ -21,6 +21,7 @@ const DEFAULT_AGE_ASSURANCE_STATE: AppBskyUnspeccedDefs.AgeAssuranceState = {
status: 'unknown',
}
const AgeAssuranceContext = createContext({
+ status: 'unknown',
isLoaded: false,
isAgeRestricted: false,
isExempt: false,
@@ -67,6 +68,7 @@ export function Provider({children}: {children: React.ReactNode}) {
const isAgeRestrictedGeo = !!geolocation?.isAgeRestrictedGeo
const {status, lastInitiatedAt} = data || DEFAULT_AGE_ASSURANCE_STATE
const ctx: AgeAssuranceContextType = {
+ status,
isLoaded: isFetched,
lastInitiatedAt,
hasInitiated: !!lastInitiatedAt,
diff --git a/src/state/age-assurance/types.ts b/src/state/age-assurance/types.ts
index de468f434d..04af7cef4c 100644
--- a/src/state/age-assurance/types.ts
+++ b/src/state/age-assurance/types.ts
@@ -1,14 +1,9 @@
+import {type AppBskyUnspeccedDefs} from '@atproto/api'
import {type QueryObserverBaseResult} from '@tanstack/react-query'
-export namespace AppBskyUnspeccedDefs {
- export type AgeAssuranceState = {
- lastInitiatedAt?: string
- status: 'unknown' | 'pending' | 'assured'
- }
-}
-
export type AgeAssuranceContextType = {
isLoaded: boolean
+ status: AppBskyUnspeccedDefs.AgeAssuranceState['status']
/**
* Whether the current user is age-restricted based on their geolocation and
* age assurance state retrieved from the server.