SELF-1680: Starfall mobile push notifications (#1548)

* move to personal mcp

* add new nova pin screen

* rename screen

* update nova route

* unblock local dev building

* rename nova to starfall

* move to dev dependency

* move to dependencies

* add correct package

* save wip

* save wip

* save wip fixes

* rename self logo

* fix screen logos

* fix order

* add starfall api to fetch push notification code

* agent feedback

* fix tests, minor agent feedback

* abstract component

* rename topic

* re-add button props

* fix linting

app/src/components/starfall/StarfallLogoHeader.tsx

@@ -0,0 +1,40 @@
+// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
+// SPDX-License-Identifier: BUSL-1.1
+// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
+
+import React from 'react';
+import { View, XStack } from 'tamagui';
+
+import { black, zinc800 } from '@selfxyz/mobile-sdk-alpha/constants/colors';
+
+import CheckmarkIcon from '@/assets/icons/checkmark_white.svg';
+import OperaLogo from '@/assets/logos/opera_minipay.svg';
+import SelfLogo from '@/assets/logos/self.svg';
+
+export const StarfallLogoHeader: React.FC = () => (
+  <XStack gap={10} alignItems="center" marginBottom={20}>
+    {/* Opera MiniPay logo */}
+    <View width={46} height={46} borderRadius={3} overflow="hidden">
+      <OperaLogo width={46} height={46} />
+    </View>
+
+    {/* Checkmark icon */}
+    <View width={32} height={32}>
+      <CheckmarkIcon width={32} height={32} />
+    </View>
+
+    {/* Self logo */}
+    <View
+      width={46}
+      height={46}
+      backgroundColor={black}
+      borderRadius={3}
+      borderWidth={1}
+      borderColor={zinc800}
+      alignItems="center"
+      justifyContent="center"
+    >
+      <SelfLogo width={28} height={28} />
+    </View>
+  </XStack>
+);

app/src/components/starfall/StarfallPIN.tsx

@@ -0,0 +1,62 @@
+// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
+// SPDX-License-Identifier: BUSL-1.1
+// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
+
+import React from 'react';
+import { Text, XStack, YStack } from 'tamagui';
+
+import { white } from '@selfxyz/mobile-sdk-alpha/constants/colors';
+import { dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
+
+export interface StarfallPINProps {
+  code: string;
+}
+
+export const StarfallPIN: React.FC<StarfallPINProps> = ({ code }) => {
+  // Split the code into individual digits (expects 4 digits)
+  const digits = code.split('').slice(0, 4);
+
+  // Pad with empty strings if less than 4 digits
+  while (digits.length < 4) {
+    digits.push('');
+  }
+
+  return (
+    <XStack
+      gap={6}
+      alignItems="center"
+      justifyContent="center"
+      padding={4}
+      borderRadius={12}
+      borderWidth={1}
+      borderColor="#52525b"
+      backgroundColor="rgba(0, 0, 0, 0.4)"
+      width="100%"
+    >
+      {digits.map((digit, index) => (
+        <YStack
+          key={index}
+          flex={1}
+          height={80}
+          alignItems="center"
+          justifyContent="center"
+          borderRadius={8}
+          borderWidth={1}
+          borderColor="rgba(255, 255, 255, 0.2)"
+          paddingHorizontal={12}
+        >
+          <Text
+            fontFamily={dinot}
+            fontSize={32}
+            fontWeight="500"
+            color={white}
+            letterSpacing={-1}
+            lineHeight={32}
+          >
+            {digit}
+          </Text>
+        </YStack>
+      ))}
+    </XStack>
+  );
+};