feat: support new accounts and loading modal

push-protocol · Feb 20, 2024 · fd1cc13 · fd1cc13
1 parent 61c687d
commit fd1cc13
Show file tree

Hide file tree

Showing 5 changed files with 173 additions and 76 deletions.
diff --git a/ios/epns.xcodeproj/project.pbxproj b/ios/epns.xcodeproj/project.pbxproj
@@ -1143,7 +1143,7 @@
 				CODE_SIGN_ENTITLEMENTS = epns/epns.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 99;
+				CURRENT_PROJECT_VERSION = 102;
 				DEVELOPMENT_TEAM = 62B7287GF5;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = "push.prod-Info.plist";
@@ -1179,7 +1179,7 @@
 				CODE_SIGN_ENTITLEMENTS = epns/epns.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 99;
+				CURRENT_PROJECT_VERSION = 102;
 				DEVELOPMENT_TEAM = 62B7287GF5;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = "push.prod-Info.plist";

diff --git a/src/apis/w2w.ts b/src/apis/w2w.ts
@@ -50,6 +50,61 @@ export type MessageReciver = {ethAddress: string; pgpAddress: string};
 
 const BASE_URL = envConfig.EPNS_SERVER;
 
+export const createUser = async ({
+  caip10,
+  did,
+  publicKey,
+  encryptedPrivateKey,
+  encryptionType,
+  signature,
+  sigType,
+}: {
+  caip10: string;
+  did: string;
+  publicKey: string;
+  encryptedPrivateKey: string;
+  encryptionType: string;
+  signature: string;
+  sigType: string;
+}): Promise<User> => {
+  const url = BASE_URL + '/v1/users';
+  const body = JSON.stringify({
+    caip10,
+    did,
+    publicKey,
+    encryptedPrivateKey,
+    encryptionType,
+    signature,
+    sigType,
+  });
+
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'content-Type': 'application/json',
+    },
+    body: body,
+  }).catch(e => {
+    console.log(e);
+    throw new Error(e);
+  });
+
+  const data: User = await response.json();
+  return data;
+};
+
+export const createEmptyUser = async (address: string) => {
+  return await createUser({
+    caip10: address,
+    did: address,
+    publicKey: '',
+    encryptedPrivateKey: '',
+    encryptionType: '',
+    signature: 'pgp',
+    sigType: 'pgp',
+  });
+};
+
 export const getUser = async (caip10: string): Promise<User | undefined> => {
   let retry = 0;
 

diff --git a/src/contexts/PushApiContext.tsx b/src/contexts/PushApiContext.tsx
@@ -30,7 +30,7 @@ type PushApiContextType = {
   userInfo: IUser | null;
   setUserPushSDKInstance: React.Dispatch<React.SetStateAction<PushAPI | null>>;
   refreshUserPushSDKInstance: () => Promise<void>;
-  getReadWriteInstance: () => Promise<void>;
+  getReadWriteInstance: (overrideAccount?: string) => Promise<void>;
   readOnlyMode: boolean;
   isLoading: boolean;
   showUnlockProfileModal: () => void;

diff --git a/src/navigation/screens/SetupCompleteScreen.tsx b/src/navigation/screens/SetupCompleteScreen.tsx
@@ -1,6 +1,7 @@
 import {useNavigation} from '@react-navigation/native';
+import {useRoute} from '@react-navigation/native';
 import React, {useState} from 'react';
-import {ActivityIndicator, Image, StyleSheet, Text, View} from 'react-native';
+import {Image, StyleSheet, Text, View} from 'react-native';
 import {useSelector} from 'react-redux';
 import GLOBALS from 'src/Globals';
 import OnboardingWrapper from 'src/components/misc/OnboardingWrapper';
@@ -12,9 +13,12 @@ import {getTrimmedAddress} from './chats/helpers/chatAddressFormatter';
 
 const SetupCompleteScreen = () => {
   const [loading, setLoading] = useState<boolean>(false);
-  const {userInfo, getReadWriteInstance} = usePushApi();
+  const {getReadWriteInstance} = usePushApi();
   const domain = useSelector(selectUserDomain);
   const navigation = useNavigation();
+  const route = useRoute();
+  // @ts-ignore
+  const {user} = route.params;
 
   const decryptPushProfile = async () => {
     setLoading(true);
@@ -30,49 +34,37 @@ const SetupCompleteScreen = () => {
 
   return (
     <OnboardingWrapper
-      title="Your Push profile has been successfully linked."
+      title="Your Push Profile has been successfully linked."
       footerTopLabel="Skipping will let you browse with limited features. You can unlock your profile for full features later."
       footerButtons={[
         {
           title: 'Unlock Profile',
           bgColor: GLOBALS.COLORS.PINK,
           fontColor: GLOBALS.COLORS.WHITE,
           onPress: decryptPushProfile,
-          disabled: !userInfo,
           loading: loading,
         },
         {
           title: 'Skip for now',
           bgColor: GLOBALS.COLORS.TRANSPARENT,
           fontColor: GLOBALS.COLORS.BLACK,
           onPress: loadNextScreen,
-          disabled: !userInfo,
         },
       ]}>
-      {userInfo ? (
-        <>
-          <Image
-            source={{
-              uri:
-                userInfo.profile.picture ||
-                GLOBALS.CONSTANTS.DEFAULT_PROFILE_PICTURE,
-            }}
-            style={styles.profilePic}
-          />
-          <View style={styles.addressContainer}>
-            <Text style={styles.address}>
-              {domain ||
-                getTrimmedAddress(caip10ToWallet(userInfo?.wallets || ''))}
-            </Text>
-          </View>
-        </>
-      ) : (
-        <ActivityIndicator
-          size={'large'}
-          color={GLOBALS.COLORS.BLACK}
-          style={styles.loader}
-        />
-      )}
+      <Image
+        source={{
+          uri:
+            user?.profile?.picture ||
+            user?.profilePicture ||
+            GLOBALS.CONSTANTS.DEFAULT_PROFILE_PICTURE,
+        }}
+        style={styles.profilePic}
+      />
+      <View style={styles.addressContainer}>
+        <Text style={styles.address}>
+          {domain || getTrimmedAddress(caip10ToWallet(user?.wallets || ''))}
+        </Text>
+      </View>
     </OnboardingWrapper>
   );
 };

diff --git a/src/navigation/screens/SignInScreen.tsx b/src/navigation/screens/SignInScreen.tsx
@@ -1,18 +1,31 @@
+import {user as pushUser} from '@pushprotocol/restapi';
+import {ENV} from '@pushprotocol/restapi/src/lib/constants';
 import {useNavigation} from '@react-navigation/native';
 import {useWalletConnectModal} from '@walletconnect/modal-react-native';
 import React, {useEffect} from 'react';
-import {Image, StyleSheet, View} from 'react-native';
+import {Image, StyleSheet, Text, View} from 'react-native';
 import {useDispatch} from 'react-redux';
 import GLOBALS from 'src/Globals';
+import {createEmptyUser} from 'src/apis';
+import LoadingSpinner from 'src/components/loaders/LoadingSpinner';
 import OnboardingWrapper from 'src/components/misc/OnboardingWrapper';
+import envConfig from 'src/env.config';
+import {walletToCAIP10} from 'src/helpers/CAIPHelper';
 import Web3Helper from 'src/helpers/Web3Helper';
+import useModalBlur from 'src/hooks/ui/useModalBlur';
 import {setAuthType, setInitialSignin} from 'src/redux/authSlice';
 
 const SingInScreen = () => {
   const navigation = useNavigation();
   const {provider, isConnected, open, address} = useWalletConnectModal();
   const dispatch = useDispatch();
 
+  const {
+    ModalComponent: SigningInModal,
+    showModal: showSigningInModal,
+    hideModal: hideSigningInModal,
+  } = useModalBlur();
+
   const walletConnectHandler = async () => {
     if (isConnected) provider?.disconnect();
     else await open();
@@ -35,7 +48,16 @@ const SingInScreen = () => {
 
   useEffect(() => {
     (async () => {
-      if (isConnected) {
+      if (isConnected && address && provider) {
+        showSigningInModal();
+        let user;
+        user = await pushUser.get({
+          account: address,
+          env: envConfig.ENV as ENV,
+        });
+        if (user === null) {
+          user = await createEmptyUser(walletToCAIP10(address));
+        }
         const {cns, ens} = await Web3Helper.reverseResolveWalletBoth(address);
         dispatch(setAuthType(GLOBALS.AUTH_TYPE.WALLET_CONNECT));
         dispatch(
@@ -48,54 +70,68 @@ const SingInScreen = () => {
             index: 0,
           }),
         );
+        hideSigningInModal();
         // @ts-ignore
-        navigation.navigate(GLOBALS.SCREENS.SETUPCOMPLETE);
+        navigation.navigate(GLOBALS.SCREENS.SETUPCOMPLETE, {user});
       }
     })();
   }, [isConnected]);
 
   return (
-    <OnboardingWrapper
-      title="Connect your wallet to enable important features in Push."
-      footerLabel="By signing in, you agree to Push's [Terms & Conditions](https://push.org/tos/) and [Privacy Policy](https://push.org/privacy/)."
-      footerButtons={[
-        {
-          iconFactory: 'Image',
-          icon: require('assets/ui/walletConnect.png'),
-          iconSize: 24,
-          iconFirst: true,
-          title: 'Sign in with Wallet',
-          fontColor: GLOBALS.COLORS.WHITE,
-          bgColor: GLOBALS.COLORS.BLACK,
-          onPress: walletConnectHandler,
-        },
-        {
-          iconFactory: 'Image',
-          icon: require('assets/ui/pencil_logo.png'),
-          iconSize: 24,
-          iconFirst: true,
-          title: 'Enter wallet address',
-          fontColor: GLOBALS.COLORS.BLACK,
-          bgColor: GLOBALS.COLORS.WHITE,
-          borderColor: GLOBALS.COLORS.MID_GRAY,
-          onPress: loadWalletScreen,
-        },
-        {
-          iconFactory: 'Image',
-          icon: require('assets/ui/walletadv.png'),
-          iconSize: 24,
-          iconFirst: true,
-          title: 'Advanced',
-          fontColor: GLOBALS.COLORS.BLACK,
-          bgColor: GLOBALS.COLORS.WHITE,
-          borderColor: GLOBALS.COLORS.MID_GRAY,
-          onPress: loadAdvanceScreen,
-        },
-      ]}>
-      <View style={styles.container}>
-        <Image source={require('assets/ui/wallet.png')} style={styles.image} />
-      </View>
-    </OnboardingWrapper>
+    <>
+      <OnboardingWrapper
+        title="Connect your wallet to enable important features in Push."
+        footerLabel="By signing in, you agree to Push's [Terms & Conditions](https://push.org/tos/) and [Privacy Policy](https://push.org/privacy/)."
+        footerButtons={[
+          {
+            iconFactory: 'Image',
+            icon: require('assets/ui/walletConnect.png'),
+            iconSize: 24,
+            iconFirst: true,
+            title: 'Sign in with Wallet',
+            fontColor: GLOBALS.COLORS.WHITE,
+            bgColor: GLOBALS.COLORS.BLACK,
+            onPress: walletConnectHandler,
+          },
+          {
+            iconFactory: 'Image',
+            icon: require('assets/ui/pencil_logo.png'),
+            iconSize: 24,
+            iconFirst: true,
+            title: 'Enter wallet address',
+            fontColor: GLOBALS.COLORS.BLACK,
+            bgColor: GLOBALS.COLORS.WHITE,
+            borderColor: GLOBALS.COLORS.MID_GRAY,
+            onPress: loadWalletScreen,
+          },
+          {
+            iconFactory: 'Image',
+            icon: require('assets/ui/walletadv.png'),
+            iconSize: 24,
+            iconFirst: true,
+            title: 'Advanced',
+            fontColor: GLOBALS.COLORS.BLACK,
+            bgColor: GLOBALS.COLORS.WHITE,
+            borderColor: GLOBALS.COLORS.MID_GRAY,
+            onPress: loadAdvanceScreen,
+          },
+        ]}>
+        <View style={styles.container}>
+          <Image
+            source={require('assets/ui/wallet.png')}
+            style={styles.image}
+          />
+        </View>
+      </OnboardingWrapper>
+      <SigningInModal
+        InnerComponent={() => (
+          <View style={styles.signingInModalContainer}>
+            <Text style={styles.signingInModalText}>Signing you in...</Text>
+            <LoadingSpinner />
+          </View>
+        )}
+      />
+    </>
   );
 };
 
@@ -113,4 +149,18 @@ const styles = StyleSheet.create({
     aspectRatio: 1,
     resizeMode: 'contain',
   },
+  signingInModalContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column',
+  },
+  signingInModalText: {
+    color: GLOBALS.COLORS.BLACK,
+    textAlign: 'center',
+    fontSize: 16,
+    fontWeight: '700',
+    lineHeight: 22,
+    letterSpacing: -0.43,
+    marginBottom: 16,
+  },
 });