Verify events and support recovation with merkle tree proofs to verify events

Author: markharding

.gitlab/ci/build_rs_core.yml

@@ -48,6 +48,30 @@ rs-core-clippy:
     - cd packages/rs-core
     - just clippy
 
+rs-core-tests:
+  extends: .rust-check
+  script:
+    - cd packages/rs-core
+    - just test
+
+rs-common-format-check:
+  extends: .rust-check
+  script:
+    - cd packages/rs-core
+    - cargo fmt --check
+
+rs-common-clippy:
+  extends: .rust-check
+  script:
+    - cd packages/rs-common
+    - cargo clippy
+
+rs-common-tests:
+  extends: .rust-check
+  script:
+    - cd packages/rs-common
+    - cargo test
+
 # rs-core-build:
 #   extends: .rs-core-workflow
 #   stage: build

Cargo.lock

@@ -159,13 +159,14 @@ function WebFeedViewer<T>({
   data,
   renderItem,
   keyExtractor,
+  HeaderComponent,
   ListHeaderComponent,
   ListFooterComponent,
   ListEmptyComponent,
   onEndReached,
   contentContainerStyle,
   stickyHeaderIndices,
-}: FlashListProps<T>) {
+}: ListProps<T>) {
   const sentinelRef = useRef<View>(null);
   const items = (data as readonly T[] | null | undefined) ?? [];
   const [visibleCount, setVisibleCount] = useState(WEB_INITIAL_VISIBLE);
@@ -203,6 +204,7 @@ function WebFeedViewer<T>({
 
   return (
     <View style={contentContainerStyle}>
+      {renderNode(HeaderComponent)}
       {renderNode(ListHeaderComponent)}
       {isEmpty
         ? renderNode(ListEmptyComponent)

apps/polycentric/src/common/components/List/List.tsx

@@ -10,6 +10,7 @@ import { isWeb } from '@/src/common/util/platform';
 import { Text } from '@/src/common/components/primitives';
 import { Atoms, useTheme } from '@/src/common/theme';
 import { Post } from '../post/Post';
+import { PostSkeletonList } from '../post/PostSkeleton';
 
 export type FeedListProps = Omit<ListProps<PostData>, 'data' | 'renderItem'> & {
   feed: FeedHookResult;
@@ -38,7 +39,9 @@ export default function FeedList({
       keyExtractor={keyExtractor}
       data={feed.items}
       ListEmptyComponent={
-        !feed.isLoading ? (
+        feed.isLoading ? (
+          <PostSkeletonList />
+        ) : (
           <View
             style={[
               Atoms.flex_1,
@@ -49,7 +52,7 @@ export default function FeedList({
           >
             <Text color="neutral_500">{emptyMessage}</Text>
           </View>
-        ) : null
+        )
       }
       ListFooterComponent={
         feed.hasMore && feed.items.length > 0 ? (

apps/polycentric/src/features/feed/FeedList.tsx

@@ -22,6 +22,8 @@ export function useExploreFeed(options?: {
     new Query.GetExploreFeed({
       identity: identity === '' ? undefined : identity,
     }),
+    undefined,
+    enabled,
   );
 
   const items = useMemo(() => {

apps/polycentric/src/features/feed/hooks/useExploreFeed.ts

@@ -20,6 +20,8 @@ export function useFollowingFeed(options?: {
   const query = useQuery(
     feedQueryKeys.following(),
     new Query.GetFollowingFeed({ followerIdentity }),
+    undefined,
+    enabled,
   );
 
   const items = useMemo(() => {

apps/polycentric/src/features/feed/hooks/useFollowingFeed.ts

@@ -20,13 +20,17 @@ export default function OnboardingWelcomeScreen() {
               Atoms.inset_0,
               Atoms.justify_center,
               Atoms.items_center,
-              Atoms.p_2xl,
+              Atoms.gap_2xl,
+              Atoms.p_3xl,
             ]}
           >
             <Image
               source={LOGO_WITH_TEXT}
               contentFit="contain"
-              style={{ width: '100%', height: '100%' }}
+              style={{
+                width: '100%',
+                aspectRatio: 1,
+              }}
             />
           </View>
           <View style={[Atoms.gap_md, Atoms.w_full, Atoms.mt_auto]}>

apps/polycentric/src/features/onboarding/OnboardingWelcomeScreen.tsx

@@ -0,0 +1,101 @@
+import { Atoms, useTheme, withHexOpacity } from '@/src/common/theme';
+import { useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+
+const AVATAR_SIZE = 40;
+const PULSE_MS = 900;
+
+function useShimmerOpacity() {
+  const opacity = useSharedValue(0.5);
+  useEffect(() => {
+    opacity.value = withRepeat(
+      withTiming(1, { duration: PULSE_MS, easing: Easing.inOut(Easing.ease) }),
+      -1,
+      true,
+    );
+  }, [opacity]);
+  return useAnimatedStyle(() => ({ opacity: opacity.value }));
+}
+
+function Bar({
+  width,
+  height = 12,
+}: {
+  width: number | `${number}%`;
+  height?: number;
+}) {
+  const { theme } = useTheme();
+  return (
+    <View
+      style={{
+        width,
+        height,
+        borderRadius: height / 2,
+        backgroundColor: withHexOpacity(theme.palette.neutral_500, '20'),
+      }}
+    />
+  );
+}
+
+export function PostSkeleton() {
+  const { theme } = useTheme();
+  const animatedStyle = useShimmerOpacity();
+
+  return (
+    <Animated.View
+      style={[
+        Atoms.w_full,
+        Atoms.px_md,
+        Atoms.pt_md,
+        Atoms.pb_md,
+        Atoms.flex_row,
+        Atoms.gap_md,
+        animatedStyle,
+        {
+          borderBottomWidth: 1,
+          borderBottomColor: withHexOpacity(theme.palette.neutral_500, '20'),
+        },
+      ]}
+    >
+      <View
+        style={{
+          width: AVATAR_SIZE,
+          height: AVATAR_SIZE,
+          borderRadius: AVATAR_SIZE / 2,
+          backgroundColor: withHexOpacity(theme.palette.neutral_500, '20'),
+        }}
+      />
+      <View style={[Atoms.flex_1, Atoms.gap_sm]}>
+        <View style={[Atoms.flex_row, Atoms.gap_sm, Atoms.align_center]}>
+          <Bar width={120} />
+          <Bar width={60} />
+          <Bar width={40} />
+        </View>
+        <Bar width="100%" />
+        <Bar width="80%" />
+        <View style={[Atoms.flex_row, Atoms.gap_lg, Atoms.mt_sm]}>
+          <Bar width={28} height={14} />
+          <Bar width={28} height={14} />
+          <Bar width={28} height={14} />
+        </View>
+      </View>
+    </Animated.View>
+  );
+}
+
+export function PostSkeletonList({ count = 6 }: { count?: number }) {
+  return (
+    <View>
+      {Array.from({ length: count }).map((_, i) => (
+        <PostSkeleton key={i} />
+      ))}
+    </View>
+  );
+}

apps/polycentric/src/features/post/PostSkeleton.tsx

@@ -34,6 +34,7 @@ function ProfileHeaderInner({ bannerColors, onBack }: ProfileHeaderProps) {
 
   const fallbackUsername = useUsername(identityKey);
   const profile = useProfile(identityKey, { fetchMode: FetchMode.Default });
+
   const username = profile.name ?? fallbackUsername;
 
   const short = identityKey ? shortenIdentityId(identityKey) : '...';
@@ -42,6 +43,8 @@ function ProfileHeaderInner({ bannerColors, onBack }: ProfileHeaderProps) {
     if (identityKey) router.push(Routes.tabs.editProfile(identityKey));
   }, [identityKey]);
 
+  if (profile.isLoading && !profile.name) return undefined;
+
   return (
     <>
       <View style={{ position: 'relative' }}>

apps/polycentric/src/features/profile/ProfileHeader.tsx

@@ -276,8 +276,29 @@ export class PolycentricClient {
 
     const sequence = this.core.nextSequence(this.activeIdentityKey, collection);
 
+    // identity_sequence must reference an identity event signed by the
+    // current keypair.
     const identitySequence =
-      this.core.nextSequence(this.activeIdentityKey, COLLECTION.IDENTITY) - 1n;
+      collection === COLLECTION.IDENTITY
+        ? sequence
+        : this.core.getIdentitySequence(
+            this.activeIdentityKey,
+            Proto.PublicKey.toBinary(this.currentKeyPair.publicKey)
+              .buffer as ArrayBuffer,
+          );
+
+    if (!identitySequence) {
+      throw new Error(
+        'Cannot build event: current keypair has no identity event for the active identity (broken pairing?)',
+      );
+    }
+
+    const previousSignature = new Uint8Array(
+      this.core.previousSignature(this.activeIdentityKey, collection),
+    );
+    const previousRoot = new Uint8Array(
+      this.core.previousRoot(this.activeIdentityKey, collection),
+    );
 
     const event = Proto.Event.create({
       key: Proto.EventKey.create({
@@ -287,7 +308,8 @@ export class PolycentricClient {
         sequence,
       }),
       identitySequence,
-      previousSignature: new Uint8Array(0),
+      previousSignature,
+      previousRoot,
       contentDigest: this.contentManager.buildDigest(content),
       createdAt: BigInt(Date.now()),
     });
@@ -575,18 +597,17 @@ export class PolycentricClient {
    */
   async push(): Promise<void> {
     if (!this.currentKeyPair) throw new Error('No active key pair');
+    if (!this.activeIdentityKey) throw new Error('No active identity');
 
     const localEvents = await this.storage.events.getAll();
-    const publicKey = this.currentKeyPair.publicKey.key;
 
-    // Build event bundles with content for events matching the active key
+    // Build event bundles with content for events matching the active identity
     const bundles: Proto.EventBundle[] = [];
     for (const signedEvent of localEvents) {
       const event = Proto.Event.fromBinary(signedEvent.eventBytes);
 
-      // Only push events signed by the active key
-      const signedBy = event.key?.signedBy;
-      if (!signedBy || !this.bytesEqual(signedBy.key, publicKey)) continue;
+      // Only push events belonging to the active identity
+      if (event.key?.identity !== this.activeIdentityKey) continue;
 
       // Look up content by digest
       let serializedContent: Proto.SerializedContent | undefined;
@@ -746,14 +767,6 @@ export class PolycentricClient {
     this.events.emitError(error);
   }
 
-  private bytesEqual(a: Uint8Array, b: Uint8Array): boolean {
-    if (a.length !== b.length) return false;
-    for (let i = 0; i < a.length; i++) {
-      if (a[i] !== b[i]) return false;
-    }
-    return true;
-  }
-
   get currentSystem(): Proto.PublicKey {
     return this.currentKeyPair!.publicKey;
   }