diff --git a/src/components/NewskieDialog.tsx b/src/components/NewskieDialog.tsx
index 0644ba704..30f70f549 100644
--- a/src/components/NewskieDialog.tsx
+++ b/src/components/NewskieDialog.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo, useState} from 'react'
import {View} from 'react-native'
import {type AppBskyActorDefs, moderateProfile} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
@@ -27,30 +27,12 @@ export function NewskieDialog({
disabled?: boolean
}) {
const {_} = useLingui()
- const t = useTheme()
- const moderationOpts = useModerationOpts()
- const {currentAccount} = useSession()
- const timeAgo = useGetTimeAgo()
const control = useDialogControl()
- const isMe = profile.did === currentAccount?.did
const createdAt = profile.createdAt as string | undefined
- const profileName = React.useMemo(() => {
- const name = profile.displayName || profile.handle
-
- if (isMe) {
- return _(msg`You`)
- }
-
- if (!moderationOpts) return name
- const moderation = moderateProfile(profile, moderationOpts)
-
- return sanitizeDisplayName(name, moderation.ui('displayName'))
- }, [_, isMe, moderationOpts, profile])
-
- const [now] = React.useState(() => Date.now())
- const daysOld = React.useMemo(() => {
+ const [now] = useState(() => Date.now())
+ const daysOld = useMemo(() => {
if (!createdAt) return Infinity
return differenceInSeconds(now, new Date(createdAt)) / 86400
}, [createdAt, now])
@@ -77,88 +59,116 @@ export function NewskieDialog({
)}
-
+
-
-
-
-
-
-
-
- {isMe ? (
- Welcome, friend!
- ) : (
- Say hello!
- )}
-
-
-
- {profile.joinedViaStarterPack ? (
-
- {profileName} joined Bluesky using a starter pack{' '}
- {timeAgo(createdAt, now, {format: 'long'})} ago
-
- ) : (
-
- {profileName} joined Bluesky{' '}
- {timeAgo(createdAt, now, {format: 'long'})} ago
-
- )}
-
- {profile.joinedViaStarterPack ? (
- {
- control.close()
- }}>
-
-
-
-
- ) : null}
+
+
+
+ )
+}
- {isNative && (
-
- )}
+function DialogInner({
+ profile,
+ createdAt,
+ now,
+}: {
+ profile: AppBskyActorDefs.ProfileViewDetailed
+ createdAt: string
+ now: number
+}) {
+ const control = Dialog.useDialogContext()
+ const {_} = useLingui()
+ const t = useTheme()
+ const moderationOpts = useModerationOpts()
+ const {currentAccount} = useSession()
+ const timeAgo = useGetTimeAgo()
+ const isMe = profile.did === currentAccount?.did
+
+ const profileName = useMemo(() => {
+ const name = profile.displayName || profile.handle
+
+ if (isMe) {
+ return _(msg`You`)
+ }
+
+ if (!moderationOpts) return name
+ const moderation = moderateProfile(profile, moderationOpts)
+
+ return sanitizeDisplayName(name, moderation.ui('displayName'))
+ }, [_, isMe, moderationOpts, profile])
+
+ return (
+
+
+
+
+
+
+ {isMe ? Welcome, friend! : Say hello!}
+
+
+
+ {profile.joinedViaStarterPack ? (
+
+ {profileName} joined Bluesky using a starter pack{' '}
+ {timeAgo(createdAt, now, {format: 'long'})} ago
+
+ ) : (
+
+ {profileName} joined Bluesky{' '}
+ {timeAgo(createdAt, now, {format: 'long'})} ago
+
+ )}
+
+ {profile.joinedViaStarterPack ? (
+ control.close()}>
+
+
+
+
+ ) : null}
-
-
-
-
+ {isNative && (
+
+ )}
+
+
+
+
)
}
diff --git a/src/components/StarterPack/QrCode.tsx b/src/components/StarterPack/QrCode.tsx
index 86f1aa1e6..4c28a41c5 100644
--- a/src/components/StarterPack/QrCode.tsx
+++ b/src/components/StarterPack/QrCode.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {lazy} from 'react'
import {View} from 'react-native'
// @ts-expect-error missing types
import QRCode from 'react-native-qrcode-styled'
@@ -15,20 +15,20 @@ import {LinearGradientBackground} from '#/components/LinearGradientBackground'
import {Text} from '#/components/Typography'
import * as bsky from '#/types/bsky'
-const LazyViewShot = React.lazy(
+const LazyViewShot = lazy(
// @ts-expect-error dynamic import
() => import('react-native-view-shot/src/index'),
)
-interface Props {
+export function QrCode({
+ starterPack,
+ link,
+ ref,
+}: {
starterPack: AppBskyGraphDefs.StarterPackView
link: string
-}
-
-export const QrCode = React.forwardRef(function QrCode(
- {starterPack, link},
- ref,
-) {
+ ref: React.Ref
+}) {
const {record} = starterPack
if (
@@ -93,7 +93,7 @@ export const QrCode = React.forwardRef(function QrCode(
)
-})
+}
export function QrCodeInner({link}: {link: string}) {
const t = useTheme()
diff --git a/src/components/StarterPack/QrCodeDialog.tsx b/src/components/StarterPack/QrCodeDialog.tsx
index 6a66e92bd..4c40ccb10 100644
--- a/src/components/StarterPack/QrCodeDialog.tsx
+++ b/src/components/StarterPack/QrCodeDialog.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {Suspense, useRef, useState} from 'react'
import {View} from 'react-native'
import type ViewShot from 'react-native-view-shot'
import {requestMediaLibraryPermissionsAsync} from 'expo-image-picker'
@@ -8,16 +8,18 @@ import {type AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
-import {logEvent} from '#/lib/statsig/statsig'
import {logger} from '#/logger'
import {isNative, isWeb} from '#/platform/detection'
-import * as Toast from '#/view/com/util/Toast'
-import {atoms as a} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {atoms as a, useBreakpoints} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {type DialogControlProps} from '#/components/Dialog'
+import {ArrowOutOfBoxModified_Stroke2_Corner2_Rounded as ShareIcon} from '#/components/icons/ArrowOutOfBox'
+import {ChainLink_Stroke2_Corner0_Rounded as ChainLinkIcon} from '#/components/icons/ChainLink'
+import {FloppyDisk_Stroke2_Corner0_Rounded as FloppyDiskIcon} from '#/components/icons/FloppyDisk'
import {Loader} from '#/components/Loader'
import {QrCode} from '#/components/StarterPack/QrCode'
+import * as Toast from '#/components/Toast'
import * as bsky from '#/types/bsky'
export function QrCodeDialog({
@@ -30,9 +32,11 @@ export function QrCodeDialog({
control: DialogControlProps
}) {
const {_} = useLingui()
- const [isProcessing, setIsProcessing] = React.useState(false)
+ const {gtMobile} = useBreakpoints()
+ const [isSaveProcessing, setIsSaveProcessing] = useState(false)
+ const [isCopyProcessing, setIsCopyProcessing] = useState(false)
- const ref = React.useRef(null)
+ const ref = useRef(null)
const getCanvas = (base64: string): Promise => {
return new Promise(resolve => {
@@ -68,15 +72,14 @@ export function QrCodeDialog({
try {
await createAssetAsync(`file://${uri}`)
} catch (e: unknown) {
- Toast.show(
- _(msg`An error occurred while saving the QR code!`),
- 'xmark',
- )
+ Toast.show(_(msg`An error occurred while saving the QR code!`), {
+ type: 'error',
+ })
logger.error('Failed to save QR code', {error: e})
return
}
} else {
- setIsProcessing(true)
+ setIsSaveProcessing(true)
if (
!bsky.validate(
@@ -101,12 +104,12 @@ export function QrCodeDialog({
link.click()
}
- logEvent('starterPack:share', {
+ logger.metric('starterPack:share', {
starterPack: starterPack.uri,
shareType: 'qrcode',
qrShareType: 'save',
})
- setIsProcessing(false)
+ setIsSaveProcessing(false)
Toast.show(
isWeb
? _(msg`QR code has been downloaded!`)
@@ -117,7 +120,7 @@ export function QrCodeDialog({
}
const onCopyPress = async () => {
- setIsProcessing(true)
+ setIsCopyProcessing(true)
ref.current?.capture?.().then(async (uri: string) => {
const canvas = await getCanvas(uri)
// @ts-expect-error web only
@@ -126,13 +129,13 @@ export function QrCodeDialog({
navigator.clipboard.write([item])
})
- logEvent('starterPack:share', {
+ logger.metric('starterPack:share', {
starterPack: starterPack.uri,
shareType: 'qrcode',
qrShareType: 'copy',
})
Toast.show(_(msg`QR code copied to your clipboard!`))
- setIsProcessing(false)
+ setIsCopyProcessing(false)
control.close()
})
}
@@ -142,7 +145,7 @@ export function QrCodeDialog({
control.close(() => {
Sharing.shareAsync(uri, {mimeType: 'image/png', UTI: 'image/png'}).then(
() => {
- logEvent('starterPack:share', {
+ logger.metric('starterPack:share', {
starterPack: starterPack.uri,
shareType: 'qrcode',
qrShareType: 'share',
@@ -154,49 +157,57 @@ export function QrCodeDialog({
}
return (
-
+
- }>
+ }>
{!link ? (
) : (
<>
- {isProcessing ? (
-
-
-
- ) : (
-
-
-
-
- )}
+
+
+
+
>
)}
-
+
@@ -206,7 +217,7 @@ export function QrCodeDialog({
function Loading() {
return (
-
+
)
diff --git a/src/components/StarterPack/ShareDialog.tsx b/src/components/StarterPack/ShareDialog.tsx
index c159b42dd..32932fe2d 100644
--- a/src/components/StarterPack/ShareDialog.tsx
+++ b/src/components/StarterPack/ShareDialog.tsx
@@ -4,16 +4,18 @@ import {type AppBskyGraphDefs} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {useSaveImageToMediaLibrary} from '#/lib/media/save-image'
import {shareUrl} from '#/lib/sharing'
-import {logEvent} from '#/lib/statsig/statsig'
import {getStarterPackOgCard} from '#/lib/strings/starter-pack'
+import {logger} from '#/logger'
import {isNative, isWeb} from '#/platform/detection'
-import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {type DialogControlProps} from '#/components/Dialog'
import * as Dialog from '#/components/Dialog'
+import {ChainLink_Stroke2_Corner0_Rounded as ChainLinkIcon} from '#/components/icons/ChainLink'
+import {Download_Stroke2_Corner0_Rounded as DownloadIcon} from '#/components/icons/Download'
+import {QrCode_Stroke2_Corner0_Rounded as QrCodeIcon} from '#/components/icons/QrCode'
import {Loader} from '#/components/Loader'
import {Text} from '#/components/Typography'
@@ -27,7 +29,9 @@ interface Props {
export function ShareDialog(props: Props) {
return (
-
+
@@ -43,14 +47,14 @@ function ShareDialogInner({
}: Props) {
const {_} = useLingui()
const t = useTheme()
- const {isTabletOrDesktop} = useWebMediaQueries()
+ const {gtMobile} = useBreakpoints()
const imageUrl = getStarterPackOgCard(starterPack)
const onShareLink = async () => {
if (!link) return
shareUrl(link)
- logEvent('starterPack:share', {
+ logger.metric('starterPack:share', {
starterPack: starterPack.uri,
shareType: 'link',
})
@@ -67,12 +71,12 @@ function ShareDialogInner({
<>
{!imageLoaded || !link ? (
-
+
) : (
-
-
+
+
Invite people to this starter pack!
@@ -89,8 +93,8 @@ function ShareDialogInner({
a.rounded_sm,
{
aspectRatio: 1200 / 630,
- transform: [{scale: isTabletOrDesktop ? 0.85 : 1}],
- marginTop: isTabletOrDesktop ? -20 : 0,
+ transform: [{scale: gtMobile ? 0.85 : 1}],
+ marginTop: gtMobile ? -20 : 0,
},
]}
accessibilityIgnoresInvertColors={true}
@@ -98,30 +102,33 @@ function ShareDialogInner({