@atproto/api@next integration

package.json

@@ -54,7 +54,7 @@
     "icons:optimize": "svgo -f ./assets/icons"
   },
   "dependencies": {
-    "@atproto/api": "^0.13.21",
+    "@atproto/api": "0.14.0-next.2",
     "@braintree/sanitize-url": "^6.0.2",
     "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
     "@emoji-mart/react": "^1.1.1",

src/components/FeedCard.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import {GestureResponderEvent, View} from 'react-native'
 import {
-  AppBskyActorDefs,
   AppBskyFeedDefs,
   AppBskyGraphDefs,
   AtUri,
@@ -32,6 +31,7 @@ import {Loader} from '#/components/Loader'
 import * as Prompt from '#/components/Prompt'
 import {RichText, RichTextProps} from '#/components/RichText'
 import {Text} from '#/components/Typography'
+import * as atp from '#/types/atproto'
 
 type Props = {
   view: AppBskyFeedDefs.GeneratorView
@@ -115,7 +115,7 @@ export function TitleAndByline({
   creator,
 }: {
   title: string
-  creator?: AppBskyActorDefs.ProfileViewBasic
+  creator?: atp.profile.AnyProfileView
 }) {
   const t = useTheme()
 

src/components/FeedInterstitials.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {View} from 'react-native'
 import {ScrollView} from 'react-native-gesture-handler'
-import {AppBskyActorDefs, AppBskyFeedDefs, AtUri} from '@atproto/api'
+import {AppBskyFeedDefs, AtUri} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
@@ -26,6 +26,7 @@ import {PersonPlus_Stroke2_Corner0_Rounded as Person} from '#/components/icons/P
 import {InlineLinkText} from '#/components/Link'
 import * as ProfileCard from '#/components/ProfileCard'
 import {Text} from '#/components/Typography'
+import * as atp from '#/types/atproto'
 import {ProgressGuideList} from './ProgressGuide/List'
 
 const MOBILE_CARD_WIDTH = 300
@@ -225,7 +226,7 @@ export function ProfileGrid({
   viewContext = 'feed',
 }: {
   isSuggestionsLoading: boolean
-  profiles: AppBskyActorDefs.ProfileViewDetailed[]
+  profiles: atp.profile.AnyProfileView[]
   error: Error | null
   viewContext: 'profile' | 'feed'
 }) {

src/components/ListCard.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import {View} from 'react-native'
 import {
-  AppBskyActorDefs,
   AppBskyGraphDefs,
   AtUri,
   moderateUserList,
@@ -26,6 +25,7 @@ import {
 import {Link as InternalLink, LinkProps} from '#/components/Link'
 import * as Hider from '#/components/moderation/Hider'
 import {Text} from '#/components/Typography'
+import * as atp from '#/types/atproto'
 
 /*
  * This component is based on `FeedCard` and is tightly coupled with that
@@ -107,7 +107,7 @@ export function TitleAndByline({
   modUi,
 }: {
   title: string
-  creator?: AppBskyActorDefs.ProfileViewBasic
+  creator?: atp.profile.AnyProfileView
   purpose?: AppBskyGraphDefs.ListView['purpose']
   modUi?: ModerationUI
 }) {

src/components/MediaPreview.tsx

@@ -1,19 +1,15 @@
 import React from 'react'
 import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
 import {Image} from 'expo-image'
-import {
-  AppBskyEmbedExternal,
-  AppBskyEmbedImages,
-  AppBskyEmbedRecordWithMedia,
-  AppBskyEmbedVideo,
-} from '@atproto/api'
+import {AppBskyFeedDefs} from '@atproto/api'
 import {Trans} from '@lingui/macro'
 
-import {parseTenorGif} from '#/lib/strings/embed-player'
+import {isTenorGifUri} from '#/lib/strings/embed-player'
 import {atoms as a, useTheme} from '#/alf'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import {Text} from '#/components/Typography'
 import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
+import {parseEmbed} from '#/types/atproto/post'
 
 /**
  * Streamlined MediaPreview component which just handles images, gifs, and videos
@@ -22,20 +18,17 @@ export function Embed({
   embed,
   style,
 }: {
-  embed?:
-    | AppBskyEmbedImages.View
-    | AppBskyEmbedRecordWithMedia.View
-    | AppBskyEmbedExternal.View
-    | AppBskyEmbedVideo.View
-    | {[k: string]: unknown}
+  embed: AppBskyFeedDefs.PostView['embed']
   style?: StyleProp<ViewStyle>
 }) {
-  let media = AppBskyEmbedRecordWithMedia.isView(embed) ? embed.media : embed
+  const e = parseEmbed(embed)
 
-  if (AppBskyEmbedImages.isView(media)) {
+  if (!e) return null
+
+  if (e.type === 'images') {
     return (
       <Outer style={style}>
-        {media.images.map(image => (
+        {e.view.images.map(image => (
           <ImageItem
             key={image.thumb}
             thumbnail={image.thumb}
@@ -44,28 +37,21 @@ export function Embed({
         ))}
       </Outer>
     )
-  } else if (AppBskyEmbedExternal.isView(media) && media.external.thumb) {
-    let url: URL | undefined
-    try {
-      url = new URL(media.external.uri)
-    } catch {}
-    if (url) {
-      const {success} = parseTenorGif(url)
-      if (success) {
-        return (
-          <Outer style={style}>
-            <GifItem
-              thumbnail={media.external.thumb}
-              alt={media.external.title}
-            />
-          </Outer>
-        )
-      }
-    }
-  } else if (AppBskyEmbedVideo.isView(media)) {
+  } else if (e.type === 'link') {
+    if (!e.view.external.thumb) return null
+    if (!isTenorGifUri(e.view.external.uri)) return null
+    return (
+      <Outer style={style}>
+        <GifItem
+          thumbnail={e.view.external.thumb}
+          alt={e.view.external.title}
+        />
+      </Outer>
+    )
+  } else if (e.type === 'video') {
     return (
       <Outer style={style}>
-        <VideoItem thumbnail={media.thumbnail} alt={media.alt} />
+        <VideoItem thumbnail={e.view.thumbnail} alt={e.view.alt} />
       </Outer>
     )
   }

src/components/ProfileCard.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import {GestureResponderEvent, View} from 'react-native'
 import {
-  AppBskyActorDefs,
   moderateProfile,
   ModerationOpts,
   RichText as RichTextApi,
@@ -25,13 +24,14 @@ import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus
 import {Link as InternalLink, LinkProps} from '#/components/Link'
 import {RichText} from '#/components/RichText'
 import {Text} from '#/components/Typography'
+import * as atp from '#/types/atproto'
 
 export function Default({
   profile,
   moderationOpts,
   logContext = 'ProfileCard',
 }: {
-  profile: AppBskyActorDefs.ProfileViewDetailed
+  profile: atp.profile.AnyProfileView
   moderationOpts: ModerationOpts
   logContext?: 'ProfileCard' | 'StarterPackProfilesList'
 }) {
@@ -51,7 +51,7 @@ export function Card({
   moderationOpts,
   logContext = 'ProfileCard',
 }: {
-  profile: AppBskyActorDefs.ProfileViewDetailed
+  profile: atp.profile.AnyProfileView
   moderationOpts: ModerationOpts
   logContext?: 'ProfileCard' | 'StarterPackProfilesList'
 }) {
@@ -101,7 +101,7 @@ export function Link({
   style,
   ...rest
 }: {
-  profile: AppBskyActorDefs.ProfileViewDetailed
+  profile: atp.profile.AnyProfileView
 } & Omit<LinkProps, 'to' | 'label'>) {
   const {_} = useLingui()
   return (
@@ -126,7 +126,7 @@ export function Avatar({
   profile,
   moderationOpts,
 }: {
-  profile: AppBskyActorDefs.ProfileViewDetailed
+  profile: atp.profile.AnyProfileView
   moderationOpts: ModerationOpts
 }) {
   const moderation = moderateProfile(profile, moderationOpts)
@@ -161,7 +161,7 @@ export function NameAndHandle({
   profile,
   moderationOpts,
 }: {
-  profile: AppBskyActorDefs.ProfileViewDetailed
+  profile: atp.profile.AnyProfileView
   moderationOpts: ModerationOpts
 }) {
   const t = useTheme()
@@ -224,17 +224,16 @@ export function Description({
   profile: profileUnshadowed,
   numberOfLines = 3,
 }: {
-  profile: AppBskyActorDefs.ProfileViewDetailed
+  profile: atp.profile.AnyProfileView
   numberOfLines?: number
 }) {
   const profile = useProfileShadow(profileUnshadowed)
-  const {description} = profile
   const rt = React.useMemo(() => {
-    if (!description) return
-    const rt = new RichTextApi({text: description || ''})
+    if (!('description' in profile)) return
+    const rt = new RichTextApi({text: profile.description || ''})
     rt.detectFacetsWithoutResolution()
     return rt
-  }, [description])
+  }, [profile])
   if (!rt) return null
   if (
     profile.viewer &&
@@ -281,7 +280,7 @@ export function DescriptionPlaceholder({
 }
 
 export type FollowButtonProps = {
-  profile: AppBskyActorDefs.ProfileViewBasic
+  profile: atp.profile.AnyProfileView
   moderationOpts: ModerationOpts
   logContext: LogEvents['profile:follow']['logContext'] &
     LogEvents['profile:unfollow']['logContext']

src/components/StarterPack/QrCode.tsx

@@ -13,6 +13,7 @@ import {useTheme} from '#/alf'
 import {atoms as a} from '#/alf'
 import {LinearGradientBackground} from '#/components/LinearGradientBackground'
 import {Text} from '#/components/Typography'
+import * as atp from '#/types/atproto'
 
 const LazyViewShot = React.lazy(
   // @ts-expect-error dynamic import
@@ -30,7 +31,12 @@ export const QrCode = React.forwardRef<ViewShot, Props>(function QrCode(
 ) {
   const {record} = starterPack
 
-  if (!AppBskyGraphStarterpack.isRecord(record)) {
+  if (
+    !atp.dangerousIsType<AppBskyGraphStarterpack.Record>(
+      record,
+      AppBskyGraphStarterpack.isRecord,
+    )
+  ) {
     return null
   }
 

src/components/StarterPack/QrCodeDialog.tsx

@@ -77,7 +77,7 @@ export function QrCodeDialog({
       } else {
         setIsProcessing(true)
 
-        if (!AppBskyGraphStarterpack.isRecord(starterPack.record)) {
+        if (!AppBskyGraphStarterpack.isValidRecord(starterPack.record)) {
           return
         }
 

src/components/StarterPack/StarterPackCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {View} from 'react-native'
 import {Image} from 'expo-image'
-import {AppBskyGraphDefs, AppBskyGraphStarterpack, AtUri} from '@atproto/api'
+import {AppBskyGraphStarterpack, AtUri} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
@@ -15,11 +15,12 @@ import {atoms as a, useTheme} from '#/alf'
 import {StarterPack} from '#/components/icons/StarterPack'
 import {Link as BaseLink, LinkProps as BaseLinkProps} from '#/components/Link'
 import {Text} from '#/components/Typography'
+import * as atp from '#/types/atproto'
 
 export function Default({
   starterPack,
 }: {
-  starterPack?: AppBskyGraphDefs.StarterPackViewBasic
+  starterPack?: atp.starterPack.AnyStarterPackView
 }) {
   if (!starterPack) return null
   return (
@@ -32,7 +33,7 @@ export function Default({
 export function Notification({
   starterPack,
 }: {
-  starterPack?: AppBskyGraphDefs.StarterPackViewBasic
+  starterPack?: atp.starterPack.AnyStarterPackView
 }) {
   if (!starterPack) return null
   return (
@@ -47,7 +48,7 @@ export function Card({
   noIcon,
   noDescription,
 }: {
-  starterPack: AppBskyGraphDefs.StarterPackViewBasic
+  starterPack: atp.starterPack.AnyStarterPackView
   noIcon?: boolean
   noDescription?: boolean
 }) {
@@ -57,7 +58,12 @@ export function Card({
   const t = useTheme()
   const {currentAccount} = useSession()
 
-  if (!AppBskyGraphStarterpack.isRecord(record)) {
+  if (
+    !atp.dangerousIsType<AppBskyGraphStarterpack.Record>(
+      record,
+      AppBskyGraphStarterpack.isRecord,
+    )
+  ) {
     return null
   }
 
@@ -100,7 +106,7 @@ export function Link({
   starterPack,
   children,
 }: {
-  starterPack: AppBskyGraphDefs.StarterPackViewBasic
+  starterPack: atp.starterPack.AnyStarterPackView
   onPress?: () => void
   children: BaseLinkProps['children']
 }) {
@@ -139,7 +145,7 @@ export function Link({
 export function Embed({
   starterPack,
 }: {
-  starterPack: AppBskyGraphDefs.StarterPackViewBasic
+  starterPack: atp.starterPack.AnyStarterPackView
 }) {
   const t = useTheme()
   const imageUri = getStarterPackOgCard(starterPack)

src/components/StarterPack/Wizard/WizardEditListDialog.tsx

@@ -38,7 +38,7 @@ export function WizardEditListDialog({
   state: WizardState
   dispatch: (action: WizardAction) => void
   moderationOpts: ModerationOpts
-  profile: AppBskyActorDefs.ProfileViewBasic
+  profile: AppBskyActorDefs.ProfileViewDetailed
 }) {
   const {_} = useLingui()
   const t = useTheme()

src/components/StarterPack/Wizard/WizardListCard.tsx

@@ -22,6 +22,7 @@ import {Button, ButtonText} from '#/components/Button'
 import * as Toggle from '#/components/forms/Toggle'
 import {Checkbox} from '#/components/forms/Toggle'
 import {Text} from '#/components/Typography'
+import * as atp from '#/types/atproto'
 
 function WizardListCard({
   type,
@@ -123,7 +124,7 @@ export function WizardProfileCard({
   btnType: 'checkbox' | 'remove'
   state: WizardState
   dispatch: (action: WizardAction) => void
-  profile: AppBskyActorDefs.ProfileViewBasic
+  profile: atp.profile.AnyProfileView
   moderationOpts: ModerationOpts
 }) {
   const {currentAccount} = useSession()