ota helper in dev mode (#7911)

src/screens/Settings/AboutSettings.tsx

@@ -17,6 +17,7 @@ import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Glo
 import {Newspaper_Stroke2_Corner2_Rounded as NewspaperIcon} from '#/components/icons/Newspaper'
 import {Wrench_Stroke2_Corner2_Rounded as WrenchIcon} from '#/components/icons/Wrench'
 import * as Layout from '#/components/Layout'
+import {OTAInfo} from './components/OTAInfo'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'AboutSettings'>
 export function AboutSettingsScreen({}: Props) {
@@ -92,6 +93,7 @@ export function AboutSettingsScreen({}: Props) {
             </SettingsList.ItemText>
             <SettingsList.BadgeText>{bundleInfo}</SettingsList.BadgeText>
           </SettingsList.PressableItem>
+          {devModeEnabled && <OTAInfo />}
         </SettingsList.Container>
       </Layout.Content>
     </Layout.Screen>

src/screens/Settings/components/OTAInfo.tsx

@@ -0,0 +1,82 @@
+import * as Updates from 'expo-updates'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useMutation, useQuery} from '@tanstack/react-query'
+
+import * as Toast from '#/view/com/util/Toast'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as RetryIcon} from '#/components/icons/ArrowRotateCounterClockwise'
+import {Shapes_Stroke2_Corner0_Rounded as ShapesIcon} from '#/components/icons/Shapes'
+import {Loader} from '#/components/Loader'
+import * as SettingsList from '../components/SettingsList'
+
+export function OTAInfo() {
+  const {_} = useLingui()
+  const {
+    data: isAvailable,
+    isPending: isPendingInfo,
+    isFetching: isFetchingInfo,
+    isError: isErrorInfo,
+    refetch,
+  } = useQuery({
+    queryKey: ['ota-info'],
+    queryFn: async () => {
+      const status = await Updates.checkForUpdateAsync()
+      return status.isAvailable
+    },
+  })
+
+  const {mutate: fetchAndLaunchUpdate, isPending: isPendingUpdate} =
+    useMutation({
+      mutationFn: async () => {
+        await Updates.fetchUpdateAsync()
+        await Updates.reloadAsync()
+      },
+      onError: error =>
+        Toast.show(`Failed to update: ${error.message}`, 'xmark'),
+    })
+
+  if (!Updates.isEnabled || __DEV__) {
+    return null
+  }
+
+  return (
+    <SettingsList.Item>
+      <SettingsList.ItemIcon icon={ShapesIcon} />
+      <SettingsList.ItemText>
+        {isAvailable ? (
+          <Trans>OTA status: Available!</Trans>
+        ) : isErrorInfo ? (
+          <Trans>OTA status: Error fetching update</Trans>
+        ) : isPendingInfo ? (
+          <Trans>OTA status: ...</Trans>
+        ) : (
+          <Trans>OTA status: None available</Trans>
+        )}
+      </SettingsList.ItemText>
+      <Button
+        label={isAvailable ? _(msg`Update`) : _(msg`Fetch update`)}
+        disabled={isFetchingInfo || isPendingUpdate}
+        variant="solid"
+        size="small"
+        color={isAvailable ? 'primary' : 'secondary_inverted'}
+        onPress={() => {
+          if (isFetchingInfo || isPendingUpdate) return
+
+          if (isAvailable) {
+            fetchAndLaunchUpdate()
+          } else {
+            refetch()
+          }
+        }}>
+        {isAvailable ? (
+          <ButtonText>
+            <Trans>Update</Trans>
+          </ButtonText>
+        ) : (
+          <ButtonIcon icon={isFetchingInfo ? Loader : RetryIcon} />
+        )}
+      </Button>
+    </SettingsList.Item>
+  )
+}

src/screens/Settings/components/OTAInfo.web.tsx

@@ -0,0 +1,3 @@
+export function OTAInfo() {
+  return null
+}