Merge pull request #7 from algorandfoundation/feat/passkey-store-liquid-auth

feat: passkey store with liquid auth

Author: PhearZero

__tests__/CollectionScreens-test.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import AccountsScreen from '../app/accounts';
+import PasskeysScreen from '../app/passkeys';
+import IdentitiesScreen from '../app/identities';
+import ConnectionsScreen from '../app/connections';
+
+// Mock expo-router
+jest.mock('expo-router', () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    back: jest.fn(),
+  }),
+  Stack: {
+    Screen: () => null,
+  },
+}));
+
+// Mock useProvider hook
+jest.mock('@/hooks/useProvider', () => ({
+  useProvider: () => ({
+    identities: [{ did: 'did:key:123' }],
+    accounts: [{ address: 'ADDR123', balance: BigInt(100) }],
+    passkeys: [{ id: 'cred123', name: 'Test Passkey', createdAt: new Date().getTime() }],
+    sessions: [{ id: 'sess123', origin: 'example.com' }],
+    passkey: {
+      store: {
+        removePasskey: jest.fn(),
+      },
+    },
+  }),
+}));
+
+// Mock MaterialIcons
+jest.mock('@expo/vector-icons', () => ({
+  MaterialIcons: 'MaterialIcons',
+}));
+
+describe('Collection Screens', () => {
+  it('renders AccountsScreen correctly', () => {
+    const { getByText, getAllByText } = render(<AccountsScreen />);
+    expect(getByText('ADDR123')).toBeTruthy();
+    expect(getAllByText('$100').length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('renders PasskeysScreen correctly', () => {
+    const { getByText } = render(<PasskeysScreen />);
+    expect(getByText('Test Passkey')).toBeTruthy();
+    expect(getByText('ID: cred123')).toBeTruthy();
+  });
+
+  it('renders IdentitiesScreen correctly', () => {
+    const { getByText } = render(<IdentitiesScreen />);
+    expect(getByText('did:key:123')).toBeTruthy();
+  });
+
+  it('renders ConnectionsScreen correctly', () => {
+    const { getByText } = render(<ConnectionsScreen />);
+    expect(getByText('example.com')).toBeTruthy();
+  });
+});

__tests__/LandingScreen-test.tsx

@@ -20,10 +20,11 @@ jest.mock('expo-constants', () => ({
         primaryColor: '#3B82F6',
         secondaryColor: '#E1EFFF',
         accentColor: '#10B981',
-        welcomeMessage: 'Your identity, rewarded.',
-        showRewards: true,
-        showFeeDelegation: true,
-        showIdentityManagement: true,
+        welcomeMessage: 'Your identity, connected.',
+        showAccounts: true,
+        showPasskeys: true,
+        showIdentities: true,
+        showConnections: true,
       },
     },
   },
@@ -32,11 +33,14 @@ jest.mock('expo-constants', () => ({
 // Mock useProvider hook
 jest.mock('@/hooks/useProvider', () => ({
   useProvider: () => ({
-    key: null,
-    identity: null,
-    account: null,
+    key: { store: { clear: jest.fn() } },
+    identity: { store: { clear: jest.fn() } },
+    account: { store: { clear: jest.fn() } },
+    passkey: { store: { clear: jest.fn() } },
     identities: [{ did: 'did:key:z6Mkh...' }],
     accounts: [{ address: 'ADDR123...', balance: 100 }],
+    passkeys: [],
+    sessions: [],
   }),
 }));
 
@@ -50,7 +54,7 @@ describe('<LandingScreen />', () => {
     const { getByText } = render(<LandingScreen />);
 
     // Check for welcome message
-    expect(getByText('Your identity, rewarded.')).toBeTruthy();
+    expect(getByText('Your identity, connected.')).toBeTruthy();
 
     // Check for balance (mocked as 100)
     expect(getByText('$100')).toBeTruthy();
@@ -61,10 +65,12 @@ describe('<LandingScreen />', () => {
   });
 
   it('renders provider services when enabled', () => {
-    const { getByText } = render(<LandingScreen />);
+    const { getByText, getAllByText } = render(<LandingScreen />);
 
-    expect(getByText('Rewards')).toBeTruthy();
-    expect(getByText('Free Fees')).toBeTruthy();
-    expect(getByText('Security')).toBeTruthy();
+    expect(getByText('Accounts')).toBeTruthy();
+    expect(getByText('Passkeys')).toBeTruthy();
+    expect(getByText('Identities')).toBeTruthy();
+    expect(getByText('Connections')).toBeTruthy();
+    expect(getAllByText('0 Total').length).toBeGreaterThanOrEqual(1);
   });
 });

__tests__/OnboardingScreen-test.tsx

@@ -48,6 +48,12 @@ jest.mock('@scure/bip39', () => ({
   wordlist: { english: [] },
 }));
 
+// Mock react-native-passkey-autofill
+jest.mock('@algorandfoundation/react-native-passkey-autofill', () => ({
+  setHdRootKeyId: jest.fn().mockResolvedValue(undefined),
+  setMasterKey: jest.fn().mockResolvedValue(undefined),
+}));
+
 // Mock Reanimated
 jest.mock('react-native-reanimated', () => {
   const Reanimated = require('react-native-reanimated/mock');

__tests__/SeedPhrase-test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react-native';
+import { render, fireEvent, act } from '@testing-library/react-native';
 import SeedPhrase from '../components/SeedPhrase';
 
 // Mocking Reanimated because it often has issues in Jest environments
@@ -9,6 +9,10 @@ jest.mock('react-native-reanimated', () => {
   return Reanimated;
 });
 
+jest.mock('@expo/vector-icons', () => ({
+  MaterialIcons: 'MaterialIcons',
+}));
+
 describe('<SeedPhrase />', () => {
   const mockPhrase = ['apple', 'banana', 'cherry', 'date', 'elderberry', 'fig', 'grape', 'honeydew', 'iceberg', 'jackfruit', 'kiwi', 'lemon'];
   const primaryColor = '#3B82F6';
@@ -71,7 +75,9 @@ describe('<SeedPhrase />', () => {
     );
 
     const input = getByPlaceholderText('Word #1');
-    fireEvent.changeText(input, 'test');
+    act(() => {
+      fireEvent.changeText(input, 'test');
+    });
 
     expect(onInputChange).toHaveBeenCalledWith(0, 'test');
   });

app.json

@@ -4,30 +4,34 @@
     "slug": "rocca",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/images/icon.png",
     "scheme": "rocca",
     "userInterfaceStyle": "automatic",
     "newArchEnabled": true,
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "com.anonymous.rocca"
     },
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
     "android": {
       "adaptiveIcon": {
-        "backgroundColor": "#E6F4FE",
-        "foregroundImage": "./assets/images/android-icon-foreground.png",
-        "backgroundImage": "./assets/images/android-icon-background.png",
-        "monochromeImage": "./assets/images/android-icon-monochrome.png"
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
       },
       "edgeToEdgeEnabled": true,
       "predictiveBackGestureEnabled": false,
       "package": "com.anonymous.rocca"
     },
     "web": {
       "output": "static",
-      "favicon": "./assets/images/favicon.png"
+      "favicon": "./assets/favicon.png"
     },
     "plugins": [
+      "./plugins/expo-rocca-plugin",
       "expo-router",
       [
         "expo-splash-screen",
@@ -40,6 +44,22 @@
             "backgroundColor": "#000000"
           }
         }
+      ],
+      [
+        "expo-build-properties",
+        {
+          "android": {
+            "compileSdkVersion": 35
+          }
+        }
+      ],
+      "@config-plugins/react-native-webrtc",
+      [
+        "@algorandfoundation/react-native-passkey-autofill",
+        {
+          "site": "https://fido.shore-tech.net",
+          "label": "Rocca Wallet"
+        }
       ]
     ],
     "experiments": {
@@ -52,11 +72,12 @@
         "primaryColor": "#3B82F6",
         "secondaryColor": "#E1EFFF",
         "accentColor": "#10B981",
-        "welcomeMessage": "Your identity, rewarded.",
+        "welcomeMessage": "Your identity, connected.",
         "logo": "",
-        "showRewards": true,
-        "showFeeDelegation": true,
-        "showIdentityManagement": true
+        "showAccounts": true,
+        "showPasskeys": true,
+        "showIdentities": true,
+        "showConnections": true
       },
       "router": {},
       "eas": {