make service url gate friendlier (#3841)

src/screens/Messages/List/index.tsx

@@ -6,6 +6,7 @@ import {ChatBskyConvoDefs} from '@atproto-labs/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
+import {sha256} from 'js-sha256'
 
 import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
 import {MessagesTabNavigatorParams} from '#/lib/routes/types'
@@ -25,6 +26,7 @@ import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {DialogControlProps, useDialogControl} from '#/components/Dialog'
 import {ConvoMenu} from '#/components/dms/ConvoMenu'
 import {NewChat} from '#/components/dms/NewChat'
+import * as TextField from '#/components/forms/TextField'
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider'
 import {Link} from '#/components/Link'
@@ -32,6 +34,7 @@ import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
 import {useMenuControl} from '#/components/Menu'
 import {Text} from '#/components/Typography'
 import {ClipClopGate} from '../gate'
+import {useDmServiceUrlStorage} from '../Temp/useDmServiceUrlStorage'
 
 type Props = NativeStackScreenProps<MessagesTabNavigatorParams, 'Messages'>
 export function MessagesScreen({navigation}: Props) {
@@ -40,6 +43,16 @@ export function MessagesScreen({navigation}: Props) {
   const newChatControl = useDialogControl()
   const {gtMobile} = useBreakpoints()
 
+  // TEMP
+  const {serviceUrl, setServiceUrl} = useDmServiceUrlStorage()
+  const hasValidServiceUrl = useMemo(() => {
+    const hash = sha256(serviceUrl)
+    return (
+      hash ===
+      'a32318b49dd3fe6aa6a35c66c13fcc4c1cb6202b24f5a852d9a2279acee4169f'
+    )
+  }, [serviceUrl])
+
   const renderButton = useCallback(() => {
     return (
       <Link
@@ -112,6 +125,25 @@ export function MessagesScreen({navigation}: Props) {
   const gate = useGate()
   if (!gate('dms')) return <ClipClopGate />
 
+  if (!hasValidServiceUrl) {
+    return (
+      <CenteredView sideBorders style={[a.flex_1, a.p_md]}>
+        <View>
+          <TextField.LabelText>Service URL</TextField.LabelText>
+          <TextField.Root>
+            <TextField.Input
+              value={serviceUrl}
+              onChangeText={text => setServiceUrl(text)}
+              autoCapitalize="none"
+              keyboardType="url"
+              label="https://"
+            />
+          </TextField.Root>
+        </View>
+      </CenteredView>
+    )
+  }
+
   if (conversations.length < 1) {
     return (
       <View style={a.flex_1}>

src/view/screens/Settings/index.tsx

@@ -50,7 +50,6 @@ import {HandIcon, HashtagIcon} from 'lib/icons'
 import {makeProfileLink} from 'lib/routes/links'
 import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
 import {NavigationProp} from 'lib/routes/types'
-import {useGate} from 'lib/statsig/statsig'
 import {colors, s} from 'lib/styles'
 import {AccountDropdownBtn} from 'view/com/util/AccountDropdownBtn'
 import {SelectableBtn} from 'view/com/util/forms/SelectableBtn'
@@ -61,11 +60,9 @@ import {Text} from 'view/com/util/text/Text'
 import * as Toast from 'view/com/util/Toast'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {ScrollView} from 'view/com/util/Views'
-import {useDmServiceUrlStorage} from '#/screens/Messages/Temp/useDmServiceUrlStorage'
 import {useTheme} from '#/alf'
 import {useDialogControl} from '#/components/Dialog'
 import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings'
-import * as TextField from '#/components/forms/TextField'
 import {navigate, resetToTab} from '#/Navigation'
 import {Email2FAToggle} from './Email2FAToggle'
 import {ExportCarDialog} from './ExportCarDialog'
@@ -190,11 +187,6 @@ export function SettingsScreen({}: Props) {
   const {pendingDid, onPressSwitchAccount} = useAccountSwitcher()
   const isSwitchingAccounts = !!pendingDid
 
-  // TODO: TEMP REMOVE WHEN CLOPS ARE RELEASED
-  const gate = useGate()
-  const {serviceUrl: dmServiceUrl, setServiceUrl: setDmServiceUrl} =
-    useDmServiceUrlStorage()
-
   // const primaryBg = useCustomPalette<ViewStyle>({
   //   light: {backgroundColor: colors.blue0},
   //   dark: {backgroundColor: colors.blue6},
@@ -807,22 +799,6 @@ export function SettingsScreen({}: Props) {
             <Trans>System log</Trans>
           </Text>
         </TouchableOpacity>
-        {gate('dms') && (
-          <TextField.Root>
-            <TextField.Input
-              value={dmServiceUrl}
-              onChangeText={(text: string) => {
-                if (text.length > 9 && text.endsWith('/')) {
-                  text = text.slice(0, -1)
-                }
-                setDmServiceUrl(text)
-              }}
-              autoCapitalize="none"
-              keyboardType="url"
-              label="🐴"
-            />
-          </TextField.Root>
-        )}
         {__DEV__ ? (
           <>
             <TouchableOpacity