public nonces request, public nonces success

src/components/PublicNoncesRequest/PublicNoncesRequest.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, ActivityIndicator } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { useTranslation } from 'react-i18next';
+import { useTheme } from '../../hooks';
+import Authentication from '../Authentication/Authentication';
+
+const PublicNoncesRequest = (props: {
+  activityStatus: boolean;
+  actionStatus: (status: boolean) => void;
+}) => {
+  // so we need our xpubkey, then generate address and show user the address. If not the same, tell user to restore or create wallet from scratch.
+  const { t } = useTranslation(['home', 'common']);
+  const { Fonts, Gutters, Layout, Colors, Common } = useTheme();
+  const [authenticationOpen, setAuthenticationOpen] = useState(false);
+
+  const approve = () => {
+    console.log('Approve');
+    props.actionStatus(true);
+  };
+  const openAuthentication = () => {
+    console.log('Open Authentication');
+    setAuthenticationOpen(true);
+  };
+  const reject = () => {
+    console.log('Reject');
+    props.actionStatus(false);
+  };
+
+  const handleAuthenticationOpen = (status: boolean) => {
+    console.log(status);
+    console.log('authentication modal close.');
+    setAuthenticationOpen(false);
+    if (status === true) {
+      approve();
+    }
+  };
+
+  return (
+    <>
+      <View
+        style={[
+          Layout.fill,
+          Layout.relative,
+          Layout.fullWidth,
+          Layout.justifyContentCenter,
+          Layout.alignItemsCenter,
+        ]}
+      >
+        <Icon name="link" size={60} color={Colors.textGray400} />
+        <Text style={[Fonts.textBold, Fonts.textRegular, Gutters.smallMargin]}>
+          {t('home:public_nonces_request')}
+        </Text>
+        <Text
+          style={[
+            Fonts.textSmall,
+            Fonts.textCenter,
+            Gutters.smallLMargin,
+            Gutters.smallRMargin,
+          ]}
+        >
+          {t('home:ssp_public_nonces_request')}
+        </Text>
+      </View>
+      <View style={[Layout.justifyContentEnd]}>
+        <TouchableOpacity
+          style={[
+            Common.button.rounded,
+            Common.button.bluePrimary,
+            Gutters.regularBMargin,
+            Gutters.smallTMargin,
+          ]}
+          disabled={authenticationOpen || props.activityStatus}
+          onPressIn={() => openAuthentication()}
+        >
+          {(authenticationOpen || props.activityStatus) && (
+            <ActivityIndicator
+              size={'large'}
+              style={[{ position: 'absolute' }]}
+            />
+          )}
+          <Text style={[Fonts.textRegular, Fonts.textWhite]}>
+            {t('home:approve_request')}
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          disabled={authenticationOpen || props.activityStatus}
+          onPressIn={() => reject()}
+        >
+          <Text
+            style={[
+              Fonts.textSmall,
+              Fonts.textBluePrimary,
+              Gutters.regularBMargin,
+              Fonts.textCenter,
+            ]}
+          >
+            {t('home:reject')}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      {authenticationOpen && (
+        <Authentication actionStatus={handleAuthenticationOpen} type="sync" />
+      )}
+    </>
+  );
+};
+
+export default PublicNoncesRequest;

src/components/PublicNoncesSuccess/PublicNoncesSuccess.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, Modal, ScrollView } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { useTranslation } from 'react-i18next';
+import { useTheme } from '../../hooks';
+
+const PublicNoncesSuccess = (props: {
+  actionStatus: (status: boolean) => void;
+}) => {
+  // so we need our xpubkey, then generate address and show user the address. If not the same, tell user to restore or create wallet from scratch.
+  const { t } = useTranslation(['home', 'common']);
+  const { Fonts, Gutters, Layout, Colors, Common } = useTheme();
+
+  const close = () => {
+    console.log('Close');
+    props.actionStatus(false);
+  };
+
+  return (
+    <Modal
+      animationType="fade"
+      transparent={true}
+      visible={true}
+      onRequestClose={() => close()}
+    >
+      <ScrollView
+        keyboardShouldPersistTaps="always"
+        style={[Layout.fill, Common.modalBackdrop]}
+        contentInset={{ bottom: 80 }}
+        contentContainerStyle={[
+          Gutters.smallBPadding,
+          Layout.scrollSpaceBetween,
+        ]}
+      >
+        <View style={[Layout.fill, Common.modalView]}>
+          <View
+            style={[
+              Layout.fill,
+              Layout.relative,
+              Layout.fullWidth,
+              Layout.justifyContentCenter,
+              Layout.alignItemsCenter,
+            ]}
+          >
+            <Icon name="check-circle" size={60} color={Colors.textGray400} />
+            <Text
+              style={[
+                Fonts.textBold,
+                Fonts.textRegular,
+                Gutters.smallMargin,
+                Fonts.textCenter,
+              ]}
+            >
+              {t('home:public_nonces_request_approved')}
+            </Text>
+            <Text style={[Fonts.textTiny, Fonts.textCenter]}>
+              {t('home:public_nonces_request_approved_info')}
+            </Text>
+          </View>
+          <View style={[Layout.justifyContentEnd]}>
+            <TouchableOpacity
+              style={[
+                Common.button.rounded,
+                Common.button.bluePrimary,
+                Gutters.regularBMargin,
+                Gutters.smallTMargin,
+              ]}
+              onPress={() => close()}
+            >
+              <Text style={[Fonts.textRegular, Fonts.textWhite]}>
+                {t('home:close')}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </ScrollView>
+    </Modal>
+  );
+};
+
+export default PublicNoncesSuccess;

src/screens/Home/Home.tsx

@@ -20,6 +20,8 @@ import ManualInput from '../../components/ManualInput/ManualInput';
 import MenuModal from '../../components/MenuModal/MenuModal';
 import Scanner from '../../components/Scanner/Scanner';
 import Navbar from '../../components/Navbar/Navbar';
+import PublicNoncesRequest from '../..//components/PublicNoncesRequest/PublicNoncesRequest';
+import PublicNoncesSuccess from '../../components/PublicNoncesSuccess/PublicNoncesSuccess';
 import { getUniqueId } from 'react-native-device-info';
 import EncryptedStorage from 'react-native-encrypted-storage';
 import Toast from 'react-native-toast-message';
@@ -1113,16 +1115,13 @@ function Home({ navigation }: Props) {
             />
           )}
           {publicNoncesReq && (
-            <SyncRequest
-              chain={activeChain}
+            <PublicNoncesRequest
               activityStatus={activityStatus}
               actionStatus={handlePublicNoncesRequestAction}
             />
           )}
           {publicNoncesShared && (
-            <SyncRequest
-              chain={activeChain}
-              activityStatus={activityStatus}
+            <PublicNoncesSuccess
               actionStatus={handlePublicNoncesSharedModalAction}
             />
           )}

src/translations/resources/en/home.json

@@ -77,5 +77,10 @@
   "selected_chain_wallet": "Selected Chain and Wallet",
   "chain_not_synced_scan": "Chain Not Synced with SSP Wallet. Scan SSP Wallet QR Code to Sync it.",
   "submitting_transaction": "Submitting Transaction...",
-  "err_generate_address": "Error while generating address."
+  "err_generate_address": "Error while generating address.",
+  "public_nonces_request": "Public Nonces Request",
+  "ssp_public_nonces_request": "SSP Wallet would like request Public Nonces. Public Nonces are used to construct blockchain transcations that use Schnorr signatures.",
+  "approve_request": "Approve Request",
+  "public_nonces_request_approved": "Public Nonces Synced!",
+  "public_nonces_request_approved_info": "Public Nonces were generated and sent for syncing with SSP Wallet."
 }