Merge pull request #242 from dominant-strategies/fix/qp-241/pfp-setup…

…-with-blockie

fix: setup of pfp with blockie on context

src/main/home/receive/ReceiveScreen.tsx

@@ -25,6 +25,7 @@ import { Theme } from 'src/shared/types';
 import { useThemedStyle } from 'src/shared/hooks/useThemedStyle';
 import { abbreviateAddress } from 'src/shared/services/quais';
 import { useSnackBar } from 'src/shared/context/snackBarContext';
+import { useWalletContext } from 'src/shared/context/walletContext';
 
 import ShareControl from './ShareControl';
 
@@ -34,7 +35,8 @@ export const ReceiveScreen = () => {
   const { showSnackBar } = useSnackBar();
   const isDarkMode = useColorScheme() === 'dark';
   const navigation = useNavigation<RootStackNavigationProps<'Main'>>();
-  const profilePicture = useProfilePicture();
+  const { profilePicture } = useWalletContext(); // get bare profile picture state
+  useProfilePicture(); // fetch profilePicture
   const username = useUsername();
   const wallet = useWallet();
 

src/onboarding/screens/SetupNameAndPFPScreen.tsx

@@ -66,7 +66,7 @@ export const SetupNameAndPFPScreen: React.FC<
       if (!profilePicture) {
         await storeItem({
           key: keychainKeys.profilePicture,
-          value: walletBlockie,
+          value: indexedZones[currentWalletIndex],
         });
       }
       navigation.navigate('SetupLocation');

src/shared/components/QuaiPayCamera/QuaiPayCamera.hooks.ts

@@ -16,6 +16,8 @@ import {
 } from 'src/shared/utils/seedPhrase';
 
 import { ScannerType } from './QuaiPayCamera.types';
+import { Zone } from 'src/shared/types';
+import makeBlockie from 'ethereum-blockies-base64';
 
 interface HookOutput {
   frameProcessor: (frame: Frame) => void;
@@ -50,7 +52,10 @@ const useSendAmountScannerCamera = () => {
           params: {
             amount: amount || 0,
             receiverAddress: address,
-            receiverPFP: profilePicture,
+            // TODO: replace address to generate blockie with walletObject[zone] when setup
+            receiverPFP: Zone?.[profilePicture as keyof typeof Zone]
+              ? makeBlockie(address)
+              : profilePicture,
             receiverUsername: username,
             sender: sender!,
           },

src/shared/hooks/useProfilePicture.ts

@@ -1,5 +1,8 @@
-import { useWalletContext } from 'src/shared/context/walletContext';
 import { useEffect } from 'react';
+import makeBlockie from 'ethereum-blockies-base64';
+
+import { useWalletContext } from 'src/shared/context/walletContext';
+import { Zone } from '../types';
 
 export const useProfilePicture = (): string | undefined => {
   const { profilePicture, getProfilePicture } = useWalletContext();
@@ -8,5 +11,11 @@ export const useProfilePicture = (): string | undefined => {
       getProfilePicture();
     }
   }, [profilePicture]);
-  return profilePicture;
+  return profilePicture && checkProfilePictureStringIsZone(profilePicture)
+    ? makeBlockie(profilePicture)
+    : profilePicture;
 };
+
+// Check by indexing Zone enum. If valid, it will be true
+const checkProfilePictureStringIsZone = (s: string) =>
+  !!Zone?.[s as keyof typeof Zone];