jollywhoppers.com
shi.gg
on top of https://tangled.org/jollywhoppers.com/witchsky.app/pulls/39
-196
src/components/BlockedGeoOverlay.tsx
-196
src/components/BlockedGeoOverlay.tsx
···
1
-
import {useEffect} from 'react'
2
-
import {ScrollView, View} from 'react-native'
3
-
import {useSafeAreaInsets} from 'react-native-safe-area-context'
4
-
import {msg, Trans} from '@lingui/macro'
5
-
import {useLingui} from '@lingui/react'
6
-
7
-
import {logger} from '#/logger'
8
-
import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
9
-
import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
10
-
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
11
-
import * as Dialog from '#/components/Dialog'
12
-
import {DeviceLocationRequestDialog} from '#/components/dialogs/DeviceLocationRequestDialog'
13
-
import {Divider} from '#/components/Divider'
14
-
import {Full as Logo, Mark} from '#/components/icons/Logo'
15
-
import {PinLocation_Stroke2_Corner0_Rounded as LocationIcon} from '#/components/icons/PinLocation'
16
-
import {SimpleInlineLinkText as InlineLinkText} from '#/components/Link'
17
-
import {Outlet as PortalOutlet} from '#/components/Portal'
18
-
import * as Toast from '#/components/Toast'
19
-
import {Text} from '#/components/Typography'
20
-
import {BottomSheetOutlet} from '#/../modules/bottom-sheet'
21
-
import {IS_WEB} from '#/env'
22
-
import {useDeviceGeolocationApi} from '#/geolocation'
23
-
24
-
export 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
-
}
-47
src/state/preferences/country-code.tsx
-47
src/state/preferences/country-code.tsx
···
1
-
import React from 'react'
2
-
3
-
import * as persisted from '#/state/persisted'
4
-
5
-
type StateContext = persisted.Schema['countryCode']
6
-
type SetContext = (v: persisted.Schema['countryCode']) => void
7
-
8
-
const stateContext = React.createContext<StateContext>(
9
-
persisted.defaults.countryCode,
10
-
)
11
-
const setContext = React.createContext<SetContext>(
12
-
(_: persisted.Schema['countryCode']) => {},
13
-
)
14
-
15
-
export function Provider({children}: React.PropsWithChildren<{}>) {
16
-
const [state, setState] = React.useState(persisted.get('countryCode'))
17
-
18
-
const setStateWrapped = React.useCallback(
19
-
(countryCode: persisted.Schema['countryCode']) => {
20
-
setState(countryCode)
21
-
persisted.write('countryCode', countryCode)
22
-
},
23
-
[setState],
24
-
)
25
-
26
-
React.useEffect(() => {
27
-
return persisted.onUpdate('countryCode', nextCountryCode => {
28
-
setState(nextCountryCode)
29
-
})
30
-
}, [setStateWrapped])
31
-
32
-
return (
33
-
<stateContext.Provider value={state}>
34
-
<setContext.Provider value={setStateWrapped}>
35
-
{children}
36
-
</setContext.Provider>
37
-
</stateContext.Provider>
38
-
)
39
-
}
40
-
41
-
export function useCountryCode() {
42
-
return React.useContext(stateContext)
43
-
}
44
-
45
-
export function useSetCountryCode() {
46
-
return React.useContext(setContext)
47
-
}
+3
-10
src/view/shell/index.tsx
+3
-10
src/view/shell/index.tsx
···
39
39
usePolicyUpdateContext,
40
40
} from '#/components/PolicyUpdateOverlay'
41
41
import {Outlet as PortalOutlet} from '#/components/Portal'
42
-
import {useAgeAssurance} from '#/ageAssurance'
43
-
import {NoAccessScreen} from '#/ageAssurance/components/NoAccessScreen'
44
42
import {RedirectOverlay} from '#/ageAssurance/components/RedirectOverlay'
45
43
import {IS_ANDROID, IS_IOS} from '#/env'
46
44
import {RoutesContainer, TabsNavigator} from '#/Navigation'
···
207
205
208
206
export function Shell() {
209
207
const t = useTheme()
210
-
const aa = useAgeAssurance()
211
208
const {currentAccount} = useSession()
212
209
const fullyExpandedCount = useDialogFullyExpandedCountContext()
213
210
···
234
231
<Deactivated />
235
232
) : (
236
233
<>
237
-
{aa.state.access === aa.Access.None ? (
238
-
<NoAccessScreen />
239
-
) : (
240
-
<RoutesContainer>
241
-
<ShellInner />
242
-
</RoutesContainer>
243
-
)}
234
+
<RoutesContainer>
235
+
<ShellInner />
236
+
</RoutesContainer>
244
237
245
238
<RedirectOverlay />
246
239
</>
+3
-10
src/view/shell/index.web.tsx
+3
-10
src/view/shell/index.web.tsx
···
31
31
} from '#/components/PolicyUpdateOverlay'
32
32
import {Outlet as PortalOutlet} from '#/components/Portal'
33
33
import {WelcomeModal} from '#/components/WelcomeModal'
34
-
import {useAgeAssurance} from '#/ageAssurance'
35
-
import {NoAccessScreen} from '#/ageAssurance/components/NoAccessScreen'
36
34
import {RedirectOverlay} from '#/ageAssurance/components/RedirectOverlay'
37
35
import {FlatNavigator, RoutesContainer} from '#/Navigation'
38
36
import {Composer} from './Composer.web'
···
160
158
161
159
export function Shell() {
162
160
const t = useTheme()
163
-
const aa = useAgeAssurance()
164
161
const {currentAccount} = useSession()
165
162
return (
166
163
<View style={[a.util_screen_outer, t.atoms.bg]}>
···
170
167
<Deactivated />
171
168
) : (
172
169
<>
173
-
{aa.state.access === aa.Access.None ? (
174
-
<NoAccessScreen />
175
-
) : (
176
-
<RoutesContainer>
177
-
<ShellInner />
178
-
</RoutesContainer>
179
-
)}
170
+
<RoutesContainer>
171
+
<ShellInner />
172
+
</RoutesContainer>
180
173
181
174
<RedirectOverlay />
182
175
</>