[native] Render SIWE restore panel

Summary:
Show a panel where users can restore their account using SIWE.

https://linear.app/comm/issue/ENG-8203/implement-navigation-flow-for-new-siwe-log-in

{F3414807}

Depends on D14084

Test Plan: Click the restore with SIWE button and check if the panel is shown correctly.

Reviewers: kamil, angelika, bartek, ashoat

Reviewed By: ashoat

Differential Revision: https://phab.comm.dev/D14085

native/account/prompt-button.react.js

@@ -48,7 +48,7 @@ const unboundStyles = {
     backgroundColor: 'siweButton',
     flexDirection: 'row',
     justifyContent: 'center',
-    padding: 12,
+    padding: 10,
   },
   siweIcon: {
     paddingRight: 10,

native/account/restore-prompt-screen.react.js

@@ -8,6 +8,8 @@ import RegistrationButtonContainer from './registration/registration-button-cont
 import RegistrationContainer from './registration/registration-container.react.js';
 import RegistrationContentContainer from './registration/registration-content-container.react.js';
 import type { SignInNavigationProp } from './sign-in-navigator.react';
+import { useSIWEPanelState } from './siwe-hooks.js';
+import SIWEPanel from './siwe-panel.react.js';
 import type { NavigationRoute } from '../navigation/route-names';
 import { RestorePasswordAccountScreenRouteName } from '../navigation/route-names.js';
 import { useColors, useStyles } from '../themes/colors.js';
@@ -18,51 +20,79 @@ type Props = {
   +route: NavigationRoute<'RestorePromptScreen'>,
 };
 
+const siweSignatureRequestData = {
+  messageType: 'msg_auth',
+};
+
 function RestorePromptScreen(props: Props): React.Node {
   const styles = useStyles(unboundStyles);
 
   const openPasswordRestoreScreen = React.useCallback(() => {
     props.navigation.navigate(RestorePasswordAccountScreenRouteName);
   }, [props.navigation]);
 
+  const {
+    panelState,
+    openPanel,
+    onPanelClosed,
+    onPanelClosing,
+    siwePanelSetLoading,
+  } = useSIWEPanelState();
+  let siwePanel;
+  if (panelState !== 'closed') {
+    siwePanel = (
+      <SIWEPanel
+        onClosing={onPanelClosing}
+        onClosed={onPanelClosed}
+        closing={panelState === 'closing'}
+        onSuccessfulWalletSignature={() => {}}
+        siweSignatureRequestData={siweSignatureRequestData}
+        setLoading={siwePanelSetLoading}
+      />
+    );
+  }
+
   const colors = useColors();
   return (
-    <RegistrationContainer>
-      <RegistrationContentContainer style={styles.scrollViewContentContainer}>
-        <Text style={styles.header}>Restore account</Text>
-        <Text style={styles.section}>
-          If you’ve lost access to your primary device, you can try recovering
-          your Comm account.
-        </Text>
-        <Text style={styles.section}>
-          To proceed, select the same login method that you used during
-          registration.
-        </Text>
-        <Text style={styles.section}>
-          Note that after completing the recovery flow, you will be logged out
-          from all of your other devices.
-        </Text>
-        <View style={styles.iconContainer}>
-          <RestoreIcon color={colors.panelForegroundIcon} />
-        </View>
-      </RegistrationContentContainer>
-      <RegistrationButtonContainer>
-        <View style={styles.buttonContainer}>
-          <PromptButton
-            text="Restore with Ethereum"
-            onPress={() => {}}
-            variant="siwe"
-          />
-        </View>
-        <View style={styles.buttonContainer}>
-          <PromptButton
-            text="Restore with password"
-            onPress={openPasswordRestoreScreen}
-            variant="enabled"
-          />
-        </View>
-      </RegistrationButtonContainer>
-    </RegistrationContainer>
+    <>
+      <RegistrationContainer>
+        <RegistrationContentContainer style={styles.scrollViewContentContainer}>
+          <Text style={styles.header}>Restore account</Text>
+          <Text style={styles.section}>
+            If you’ve lost access to your primary device, you can try recovering
+            your Comm account.
+          </Text>
+          <Text style={styles.section}>
+            To proceed, select the same login method that you used during
+            registration.
+          </Text>
+          <Text style={styles.section}>
+            Note that after completing the recovery flow, you will be logged out
+            from all of your other devices.
+          </Text>
+          <View style={styles.iconContainer}>
+            <RestoreIcon color={colors.panelForegroundIcon} />
+          </View>
+        </RegistrationContentContainer>
+        <RegistrationButtonContainer>
+          <View style={styles.buttonContainer}>
+            <PromptButton
+              text="Restore with Ethereum"
+              onPress={openPanel}
+              variant={panelState === 'opening' ? 'loading' : 'siwe'}
+            />
+          </View>
+          <View style={styles.buttonContainer}>
+            <PromptButton
+              text="Restore with password"
+              onPress={openPasswordRestoreScreen}
+              variant="enabled"
+            />
+          </View>
+        </RegistrationButtonContainer>
+      </RegistrationContainer>
+      {siwePanel}
+    </>
   );
 }