forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {useEffect} from 'react'
2import {ScrollView, View} from 'react-native'
3import {useSafeAreaInsets} from 'react-native-safe-area-context'
4import {msg, Trans} from '@lingui/macro'
5import {useLingui} from '@lingui/react'
6
7import {logger} from '#/logger'
8import {useDeviceGeolocationApi} from '#/geolocation'
9import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
10import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
11import {Button, ButtonIcon, ButtonText} from '#/components/Button'
12import * as Dialog from '#/components/Dialog'
13import {DeviceLocationRequestDialog} from '#/components/dialogs/DeviceLocationRequestDialog'
14import {Divider} from '#/components/Divider'
15import {Full as Logo, Mark} from '#/components/icons/Logo'
16import {PinLocation_Stroke2_Corner0_Rounded as LocationIcon} from '#/components/icons/PinLocation'
17import {SimpleInlineLinkText as InlineLinkText} from '#/components/Link'
18import {Outlet as PortalOutlet} from '#/components/Portal'
19import * as Toast from '#/components/Toast'
20import {Text} from '#/components/Typography'
21import {BottomSheetOutlet} from '#/../modules/bottom-sheet'
22import {IS_WEB} from '#/env'
23
24export function BlockedGeoOverlay() {
25 const t = useTheme()
26 const {_} = useLingui()
27 const {gtPhone} = useBreakpoints()
28 const insets = useSafeAreaInsets()
29 const geoDialog = Dialog.useDialogControl()
30 const {setDeviceGeolocation} = useDeviceGeolocationApi()
31
32 const enableSquareButtons = useEnableSquareButtons()
33
34 useEffect(() => {
35 // just counting overall hits here
36 logger.metric(`blockedGeoOverlay:shown`, {})
37 }, [])
38
39 const textStyles = [a.text_md, a.leading_normal]
40 const links = {
41 blog: {
42 to: `https://bsky.social/about/blog/08-22-2025-mississippi-hb1126`,
43 label: _(msg`Read our blog post`),
44 overridePresentation: false,
45 disableMismatchWarning: true,
46 style: textStyles,
47 },
48 }
49
50 const blocks = [
51 _(msg`Unfortunately, Bluesky is unavailable in Mississippi right now.`),
52 _(
53 msg`A new Mississippi law requires us to implement age verification for all users before they can access Bluesky. We think this law creates challenges that go beyond its child safety goals, and creates significant barriers that limit free speech and disproportionately harm smaller platforms and emerging technologies.`,
54 ),
55 _(
56 msg`As a small team, we cannot justify building the expensive infrastructure this requirement demands while legal challenges to this law are pending.`,
57 ),
58 _(
59 msg`For now, we have made the difficult decision to block access to Bluesky in the state of Mississippi.`,
60 ),
61 <>
62 To learn more, read our{' '}
63 <InlineLinkText {...links.blog}>blog post</InlineLinkText>.
64 </>,
65 ]
66
67 return (
68 <>
69 <ScrollView
70 contentContainerStyle={[
71 a.px_2xl,
72 {
73 paddingTop: IS_WEB ? a.p_5xl.padding : insets.top + a.p_2xl.padding,
74 paddingBottom: 100,
75 },
76 ]}>
77 <View
78 style={[
79 a.mx_auto,
80 web({
81 maxWidth: 380,
82 paddingTop: gtPhone ? '8vh' : undefined,
83 }),
84 ]}>
85 <View style={[a.align_start]}>
86 <View
87 style={[
88 a.pl_md,
89 a.pr_lg,
90 a.py_sm,
91 enableSquareButtons ? a.rounded_sm : a.rounded_full,
92 a.flex_row,
93 a.align_center,
94 a.gap_xs,
95 {
96 backgroundColor: t.palette.primary_25,
97 },
98 ]}>
99 <Mark fill={t.palette.primary_600} width={14} />
100 <Text
101 style={[
102 a.font_semi_bold,
103 {
104 color: t.palette.primary_600,
105 },
106 ]}>
107 <Trans>Announcement</Trans>
108 </Text>
109 </View>
110 </View>
111
112 <View style={[a.gap_lg, {paddingTop: 32}]}>
113 {blocks.map((block, index) => (
114 <Text key={index} style={[textStyles]}>
115 {block}
116 </Text>
117 ))}
118 </View>
119
120 {!IS_WEB && (
121 <>
122 <View style={[a.pt_2xl]}>
123 <Divider />
124 </View>
125
126 <View style={[a.mt_xl, a.align_start]}>
127 <Text style={[a.text_lg, a.font_bold, a.leading_snug, a.pb_xs]}>
128 <Trans>Not in Mississippi?</Trans>
129 </Text>
130 <Text
131 style={[
132 a.text_sm,
133 a.leading_snug,
134 t.atoms.text_contrast_medium,
135 a.pb_md,
136 ]}>
137 <Trans>
138 Confirm your location with GPS. Your location data is not
139 tracked and does not leave your device.
140 </Trans>
141 </Text>
142 <Button
143 label={_(msg`Confirm your location`)}
144 onPress={() => geoDialog.open()}
145 size="small"
146 color="primary_subtle">
147 <ButtonIcon icon={LocationIcon} />
148 <ButtonText>
149 <Trans>Confirm your location</Trans>
150 </ButtonText>
151 </Button>
152 </View>
153
154 <DeviceLocationRequestDialog
155 control={geoDialog}
156 onLocationAcquired={props => {
157 if (props.geolocationStatus.isAgeBlockedGeo) {
158 props.disableDialogAction()
159 props.setDialogError(
160 _(
161 msg`We're sorry, but based on your device's location, you are currently located in a region where we cannot provide access at this time.`,
162 ),
163 )
164 } else {
165 props.closeDialog(() => {
166 // set this after close!
167 setDeviceGeolocation({
168 countryCode: props.geolocationStatus.countryCode,
169 regionCode: props.geolocationStatus.regionCode,
170 })
171 Toast.show(_(msg`Thanks! You're all set.`), {
172 type: 'success',
173 })
174 })
175 }
176 }}
177 />
178 </>
179 )}
180
181 <View style={[{paddingTop: 48}]}>
182 <Logo width={120} textFill={t.atoms.text.color} />
183 </View>
184 </View>
185 </ScrollView>
186
187 {/*
188 * While this blocking overlay is up, other dialogs in the shell
189 * are not mounted, so it _should_ be safe to use these here
190 * without fear of other modals showing up.
191 */}
192 <BottomSheetOutlet />
193 <PortalOutlet />
194 </>
195 )
196}