Added instructions for .well-known method (supersedes #887) (#979)

* Added instructions for .well-known method

* Factor out SelectableBtn

* Rework the ChangeHandle modal to be a little clearer

* Fix lint

* Fix desktop layout

---------

Co-authored-by: Haider Ali Punjabi <haiderali@cyberservices.com>
Co-authored-by: Haider Ali Punjabi <haideralipunjabi@hackesta.org>

3 files changed, 168 insertions, 105 deletions

diff --git a/src/view/com/modals/ChangeHandle.tsx b/src/view/com/modals/ChangeHandle.tsx
index 961efc08c..a6010906c 100644
--- a/src/view/com/modals/ChangeHandle.tsx
+++ b/src/view/com/modals/ChangeHandle.tsx
@@ -11,11 +11,12 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {ScrollView, TextInput} from './util'
 import {Text} from '../util/text/Text'
 import {Button} from '../util/forms/Button'
+import {SelectableBtn} from '../util/forms/SelectableBtn'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {useStores} from 'state/index'
 import {ServiceDescription} from 'state/models/session'
 import {s} from 'lib/styles'
-import {makeValidHandle, createFullHandle} from 'lib/strings/handles'
+import {createFullHandle, makeValidHandle} from 'lib/strings/handles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useTheme} from 'lib/ThemeContext'
 import {useAnalytics} from 'lib/analytics/analytics'
@@ -311,7 +312,7 @@ function CustomHandleForm({
   const theme = useTheme()
   const [isVerifying, setIsVerifying] = React.useState(false)
   const [error, setError] = React.useState<string>('')
-
+  const [isDNSForm, setDNSForm] = React.useState<boolean>(true)
   // events
   // =
   const onPressCopy = React.useCallback(() => {
@@ -332,7 +333,9 @@ function CustomHandleForm({
     try {
       setIsVerifying(true)
       setError('')
-      const res = await store.agent.com.atproto.identity.resolveHandle({handle})
+      const res = await store.agent.com.atproto.identity.resolveHandle({
+        handle,
+      })
       if (res.data.did === store.me.did) {
         setCanSave(true)
       } else {
@@ -384,39 +387,88 @@ function CustomHandleForm({
         />
       </View>
       <View style={styles.spacer} />
-      <Text type="md" style={[pal.text, s.pb5, s.pl5]}>
-        Add the following record to your domain:
-      </Text>
-      <View style={[styles.dnsTable, pal.btn]}>
-        <Text type="md-medium" style={[styles.dnsLabel, pal.text]}>
-          Domain:
-        </Text>
-        <View style={[styles.dnsValue]}>
-          <Text type="mono" style={[styles.monoText, pal.text]}>
-            _atproto.{handle}
+
+      <View style={[styles.selectableBtns]}>
+        <SelectableBtn
+          selected={isDNSForm}
+          label="DNS Panel"
+          left
+          onSelect={() => setDNSForm(true)}
+          accessibilityHint="Use the DNS panel"
+          style={s.flex1}
+        />
+        <SelectableBtn
+          selected={!isDNSForm}
+          label="No DNS Panel"
+          right
+          onSelect={() => setDNSForm(false)}
+          accessibilityHint="Use a file on your server"
+          style={s.flex1}
+        />
+      </View>
+      <View style={styles.spacer} />
+      {isDNSForm ? (
+        <>
+          <Text type="md" style={[pal.text, s.pb5, s.pl5]}>
+            Add the following record to your domain:
           </Text>
-        </View>
-        <Text type="md-medium" style={[styles.dnsLabel, pal.text]}>
-          Type:
-        </Text>
-        <View style={[styles.dnsValue]}>
-          <Text type="mono" style={[styles.monoText, pal.text]}>
-            TXT
+          <View style={[styles.dnsTable, pal.btn]}>
+            <Text type="md-medium" style={[styles.dnsLabel, pal.text]}>
+              Domain:
+            </Text>
+            <View style={[styles.dnsValue]}>
+              <Text type="mono" style={[styles.monoText, pal.text]}>
+                _atproto.
+              </Text>
+            </View>
+            <Text type="md-medium" style={[styles.dnsLabel, pal.text]}>
+              Type:
+            </Text>
+            <View style={[styles.dnsValue]}>
+              <Text type="mono" style={[styles.monoText, pal.text]}>
+                TXT
+              </Text>
+            </View>
+            <Text type="md-medium" style={[styles.dnsLabel, pal.text]}>
+              Value:
+            </Text>
+            <View style={[styles.dnsValue]}>
+              <Text type="mono" style={[styles.monoText, pal.text]}>
+                did={store.me.did}
+              </Text>
+            </View>
+          </View>
+        </>
+      ) : (
+        <>
+          <Text type="md" style={[pal.text, s.pb5, s.pl5]}>
+            Upload a text file to:
           </Text>
-        </View>
-        <Text type="md-medium" style={[styles.dnsLabel, pal.text]}>
-          Value:
-        </Text>
-        <View style={[styles.dnsValue]}>
-          <Text type="mono" style={[styles.monoText, pal.text]}>
-            did={store.me.did}
+          <View style={[styles.valueContainer, pal.btn]}>
+            <View style={[styles.dnsValue]}>
+              <Text type="mono" style={[styles.monoText, pal.text]}>
+                https://{handle}/.well-known/atproto-did
+              </Text>
+            </View>
+          </View>
+          <View style={styles.spacer} />
+          <Text type="md" style={[pal.text, s.pb5, s.pl5]}>
+            That contains the following:
           </Text>
-        </View>
-      </View>
+          <View style={[styles.valueContainer, pal.btn]}>
+            <View style={[styles.dnsValue]}>
+              <Text type="mono" style={[styles.monoText, pal.text]}>
+                {store.me.did}
+              </Text>
+            </View>
+          </View>
+        </>
+      )}
+
       <View style={styles.spacer} />
       <Button type="default" style={[s.p20, s.mb10]} onPress={onPressCopy}>
         <Text type="xl" style={[pal.link, s.textCenter]}>
-          Copy Domain Value
+          Copy {isDNSForm ? 'Domain Value' : 'File Contents'}
         </Text>
       </Button>
       {canSave === true && (
@@ -472,6 +524,10 @@ const styles = StyleSheet.create({
     opacity: 0.7,
   },
 
+  selectableBtns: {
+    flexDirection: 'row',
+  },
+
   title: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -513,6 +569,11 @@ const styles = StyleSheet.create({
     borderRadius: 10,
   },
 
+  valueContainer: {
+    borderRadius: 4,
+    paddingVertical: 16,
+  },
+
   dnsTable: {
     borderRadius: 4,
     paddingTop: 2,
diff --git a/src/view/com/util/forms/SelectableBtn.tsx b/src/view/com/util/forms/SelectableBtn.tsx
new file mode 100644
index 000000000..503c49b2f
--- /dev/null
+++ b/src/view/com/util/forms/SelectableBtn.tsx
@@ -0,0 +1,67 @@
+import React from 'react'
+import {Pressable, ViewStyle, StyleProp, StyleSheet} from 'react-native'
+import {Text} from '../text/Text'
+import {usePalette} from 'lib/hooks/usePalette'
+import {isDesktopWeb} from 'platform/detection'
+
+interface SelectableBtnProps {
+  selected: boolean
+  label: string
+  left?: boolean
+  right?: boolean
+  onSelect: () => void
+  accessibilityHint?: string
+  style?: StyleProp<ViewStyle>
+}
+
+export function SelectableBtn({
+  selected,
+  label,
+  left,
+  right,
+  onSelect,
+  accessibilityHint,
+  style,
+}: SelectableBtnProps) {
+  const pal = usePalette('default')
+  const palPrimary = usePalette('inverted')
+  return (
+    <Pressable
+      style={[
+        styles.selectableBtn,
+        left && styles.selectableBtnLeft,
+        right && styles.selectableBtnRight,
+        pal.border,
+        selected ? palPrimary.view : pal.view,
+        style,
+      ]}
+      onPress={onSelect}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      accessibilityHint={accessibilityHint}>
+      <Text style={selected ? palPrimary.text : pal.text}>{label}</Text>
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  selectableBtn: {
+    flex: isDesktopWeb ? undefined : 1,
+    width: isDesktopWeb ? 100 : undefined,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderLeftWidth: 0,
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+  },
+  selectableBtnLeft: {
+    borderTopLeftRadius: 8,
+    borderBottomLeftRadius: 8,
+    borderLeftWidth: 1,
+  },
+  selectableBtnRight: {
+    borderTopRightRadius: 8,
+    borderBottomRightRadius: 8,
+  },
+})
diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx
index 0057841b2..7a8c25c81 100644
--- a/src/view/screens/Settings.tsx
+++ b/src/view/screens/Settings.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 import {
   ActivityIndicator,
   Platform,
-  Pressable,
   StyleSheet,
   TextStyle,
   TouchableOpacity,
@@ -32,6 +31,7 @@ import * as Toast from '../com/util/Toast'
 import {UserAvatar} from '../com/util/UserAvatar'
 import {DropdownButton} from 'view/com/util/forms/DropdownButton'
 import {ToggleButton} from 'view/com/util/forms/ToggleButton'
+import {SelectableBtn} from 'view/com/util/forms/SelectableBtn'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useCustomPalette} from 'lib/hooks/useCustomPalette'
 import {AccountData} from 'state/models/session'
@@ -40,7 +40,6 @@ import {NavigationProp} from 'lib/routes/types'
 import {isDesktopWeb} from 'platform/detection'
 import {pluralize} from 'lib/strings/helpers'
 import {formatCount} from 'view/com/util/numeric/format'
-import {isColorMode} from 'state/models/ui/shell'
 import Clipboard from '@react-native-clipboard/clipboard'
 import {reset as resetNavigation} from '../../Navigation'
 
@@ -352,30 +351,24 @@ export const SettingsScreen = withAuthRequired(
           <View>
             <View style={[styles.linkCard, pal.view, styles.selectableBtns]}>
               <SelectableBtn
-                current={store.shell.colorMode}
-                value="system"
+                selected={store.shell.colorMode === 'system'}
                 label="System"
                 left
-                onChange={(v: string) =>
-                  store.shell.setColorMode(isColorMode(v) ? v : 'system')
-                }
+                onSelect={() => store.shell.setColorMode('system')}
+                accessibilityHint="Set color theme to system setting"
               />
               <SelectableBtn
-                current={store.shell.colorMode}
-                value="light"
+                selected={store.shell.colorMode === 'light'}
                 label="Light"
-                onChange={(v: string) =>
-                  store.shell.setColorMode(isColorMode(v) ? v : 'system')
-                }
+                onSelect={() => store.shell.setColorMode('light')}
+                accessibilityHint="Set color theme to light"
               />
               <SelectableBtn
-                current={store.shell.colorMode}
-                value="dark"
+                selected={store.shell.colorMode === 'dark'}
                 label="Dark"
                 right
-                onChange={(v: string) =>
-                  store.shell.setColorMode(isColorMode(v) ? v : 'system')
-                }
+                onSelect={() => store.shell.setColorMode('dark')}
+                accessibilityHint="Set color theme to dark"
               />
             </View>
           </View>
@@ -574,45 +567,6 @@ function AccountDropdownBtn({handle}: {handle: string}) {
   )
 }
 
-interface SelectableBtnProps {
-  current: string
-  value: string
-  label: string
-  left?: boolean
-  right?: boolean
-  onChange: (v: string) => void
-}
-
-function SelectableBtn({
-  current,
-  value,
-  label,
-  left,
-  right,
-  onChange,
-}: SelectableBtnProps) {
-  const pal = usePalette('default')
-  const palPrimary = usePalette('inverted')
-  return (
-    <Pressable
-      style={[
-        styles.selectableBtn,
-        left && styles.selectableBtnLeft,
-        right && styles.selectableBtnRight,
-        pal.border,
-        current === value ? palPrimary.view : pal.view,
-      ]}
-      onPress={() => onChange(value)}
-      accessibilityRole="button"
-      accessibilityLabel={value}
-      accessibilityHint={`Set color theme to  ${value}`}>
-      <Text style={current === value ? palPrimary.text : pal.text}>
-        {label}
-      </Text>
-    </Pressable>
-  )
-}
-
 const styles = StyleSheet.create({
   dimmed: {
     opacity: 0.5,
@@ -678,25 +632,6 @@ const styles = StyleSheet.create({
   selectableBtns: {
     flexDirection: 'row',
   },
-  selectableBtn: {
-    flex: isDesktopWeb ? undefined : 1,
-    width: isDesktopWeb ? 100 : undefined,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    borderWidth: 1,
-    borderLeftWidth: 0,
-    paddingHorizontal: 10,
-    paddingVertical: 10,
-  },
-  selectableBtnLeft: {
-    borderTopLeftRadius: 8,
-    borderBottomLeftRadius: 8,
-    borderLeftWidth: 1,
-  },
-  selectableBtnRight: {
-    borderTopRightRadius: 8,
-    borderBottomRightRadius: 8,
-  },
 
   btn: {
     flexDirection: 'row',