Fix minor UI issues and broken profile image uploading

src/App.tsx

@@ -10,6 +10,7 @@ global.Buffer = global.Buffer || require("buffer").Buffer;
 import { registerRootComponent } from "expo";
 import { RecoilRoot, useRecoilState } from "recoil";
 import { ActivityIndicator, View, Text } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { ReactNode, useEffect } from "react";
 import { NavigationContainer } from "@react-navigation/native";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
@@ -195,19 +196,25 @@ function App() {
 
   return (
     <ErrorBoundary FallbackComponent={CustomFallback}>
-      <SolanaProvider>
-        <RecoilRoot>
-          <NavigationContainer>
-            <LanguageProvider i18n={i18n}>
-              <StatusModalProvider>
-                <ModalProvider stack={stackModal}>
-                  <TabNavigator />
-                </ModalProvider>
-              </StatusModalProvider>
-            </LanguageProvider>
-          </NavigationContainer>
-        </RecoilRoot>
-      </SolanaProvider>
+      {/*
+        GestureHandlerRootView wrapper because of this
+        https://github.com/gorhom/react-native-bottom-sheet/issues/1389
+      */}
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <SolanaProvider>
+          <RecoilRoot>
+            <NavigationContainer>
+              <LanguageProvider i18n={i18n}>
+                <StatusModalProvider>
+                  <ModalProvider stack={stackModal}>
+                    <TabNavigator />
+                  </ModalProvider>
+                </StatusModalProvider>
+              </LanguageProvider>
+            </NavigationContainer>
+          </RecoilRoot>
+        </SolanaProvider>
+      </GestureHandlerRootView>
     </ErrorBoundary>
   );
 }

src/components/EditPicture.tsx

@@ -16,31 +16,35 @@ import { isTokenized } from "@bonfida/name-tokenizer";
 import { t } from "@lingui/macro";
 import { PublicKey, TransactionInstruction } from "@solana/web3.js";
 import { useStatusModalContext } from "@src/contexts/StatusModalContext";
-import { useSolanaConnection } from "@src/hooks/xnft-hooks";
 import { sendTx } from "@src/utils/send-tx";
 import { WrapModal } from "./WrapModal";
 import { unwrap } from "@src/utils/unwrap";
-import { useWallet } from "@src/hooks/useWallet";
+import {
+  useWallet,
+  usePictureRecordValidation,
+  useSolanaConnection,
+  useHandleError,
+} from "@src/hooks";
 import { uploadToIPFS } from "@src/utils/ipfs";
 import { UiButton } from "@src/components/UiButton";
 import { CustomTextInput } from "@src/components/CustomTextInput";
-import { useHandleError } from "@src/hooks/useHandleError";
 
 export const EditPicture = ({
   modal: { closeModal, getParam },
 }: {
   modal: { closeModal: () => void; getParam: <T>(a: string, b?: string) => T };
 }) => {
+  const connection = useSolanaConnection();
   const currentPic = getParam<string | undefined>("currentPic");
   const domain = getParam<string>("domain");
   const setAsFav = getParam<string>("domain");
   const refresh = getParam<() => Promise<void>>("refresh");
   const { setStatus } = useStatusModalContext();
   const [loading, setLoading] = useState(false);
   const [pic, setPic] = useState<string | undefined>("");
-  const connection = useSolanaConnection();
   const { handleError } = useHandleError();
   const { publicKey, signTransaction, setVisible, connected } = useWallet();
+  const { isValid: isCurrentPicValid } = usePictureRecordValidation(currentPic);
 
   const handle = async () => {
     if (!pic) return;
@@ -140,6 +144,7 @@ export const EditPicture = ({
         allowsEditing: true,
         aspect: [1, 1],
         quality: 0.5,
+        base64: true,
         exif: false,
       });
 
@@ -149,10 +154,11 @@ export const EditPicture = ({
         if (!asset) {
           throw new Error("Failed to get image asset");
         }
-        const filename = `${domain}-${+Date.now()}.jpg`;
+
         const image = asset.uri.startsWith("data:image")
           ? asset.uri
           : asset.base64 || undefined;
+
         if (!image) {
           throw new Error("Failed to get image");
         }
@@ -172,14 +178,17 @@ export const EditPicture = ({
       setLoading(false);
     }
   };
+
   return (
     <WrapModal closeModal={closeModal} title={t`Change profile picture`}>
       <View style={tw`flex items-center justify-center my-6`}>
         <Image
           style={tw`w-[100px] rounded-full h-[100px]`}
           source={
-            pic || currentPic
-              ? { uri: pic || currentPic }
+            pic
+              ? { uri: pic }
+              : isCurrentPicValid
+              ? { uri: currentPic }
               : require("@assets/default-pic.png")
           }
         />

src/components/ProfileBlock.tsx

@@ -16,14 +16,18 @@ interface ProfileBlockProps {
   children?: ReactNode;
   owner: string;
   domain: string;
-  picRecord: ReturnType<typeof useProfilePic>;
+  picRecord: string | undefined;
+  isPicValid: boolean;
+  onNewPicUploaded: () => void;
 }
 
 export const ProfileBlock = ({
   owner,
   domain,
   children,
   picRecord,
+  isPicValid,
+  onNewPicUploaded,
 }: ProfileBlockProps) => {
   const { publicKey } = useWallet();
   const { setStatus } = useStatusModalContext();
@@ -52,22 +56,18 @@ export const ProfileBlock = ({
       >
         <Image
           source={
-            picRecord.result
-              ? {
-                  uri: picRecord.result,
-                }
-              : require("@assets/default-pic.png")
+            isPicValid ? { uri: picRecord } : require("@assets/default-pic.png")
           }
           style={tw`w-full h-full rounded-full`}
         />
         {isOwner && (
           <TouchableOpacity
             onPress={() =>
               openModal("EditPicture", {
-                currentPic: picRecord.result,
+                currentPic: picRecord,
                 domain: domain,
                 setAsFav: !favorite.result?.reverse,
-                refresh: picRecord.execute,
+                refresh: onNewPicUploaded,
               })
             }
             style={tw`h-[24px] w-[24px] rounded-full flex items-center justify-center absolute bottom-0 right-0 bg-brand-accent`}

src/components/SearchModal.tsx

@@ -4,7 +4,6 @@ import {
   TouchableOpacity,
   TextInput,
   Platform,
-  TouchableWithoutFeedback,
   FlatList,
 } from "react-native";
 import tw from "../utils/tailwind";

src/contexts/StatusModalContext.tsx

@@ -65,7 +65,7 @@ const StatusModalProvider = ({ children }: { children: React.ReactNode }) => {
       {children}
       {currentStatus && (
         <View
-          style={tw`absolute flex flex-row items-start gap-2 px-4 py-3 overflow-hidden rounded-lg shadow-lg  top-3 right-3 left-3 bg-background-secondary`}
+          style={tw`absolute flex flex-row items-start gap-2 px-4 py-3 overflow-hidden rounded-lg shadow-lg top-3 right-3 left-3 bg-background-secondary`}
           onLayout={(event) =>
             setContainerWidth(event.nativeEvent.layout.width)
           }
@@ -87,21 +87,23 @@ const StatusModalProvider = ({ children }: { children: React.ReactNode }) => {
               name="error"
               size={20}
               color={tw.color("content-error")}
+              style={tw`top-0.5`}
             />
           )}
           {currentStatus.status === "success" && (
             <Ionicons
               name="checkmark-circle"
               size={20}
               color={tw.color("content-success")}
+              style={tw`top-0.5`}
             />
           )}
 
-          <Text style={tw`text-base font-medium text-content-primary`}>
+          <Text style={tw`pr-4 text-base font-medium text-content-primary`}>
             {currentStatus.message}
           </Text>
           <TouchableOpacity
-            style={tw`absolute top-1 right-0.5 w-5 h-5`}
+            style={tw`absolute w-5 h-5 top-1 right-3`}
             onPress={closeStatus}
           >
             <Ionicons

src/hooks/index.ts

@@ -0,0 +1,8 @@
+export * from "./usePictureRecordValidation";
+export * from "./useWallet";
+export * from "./xnft-hooks";
+export * from "./useHandleError";
+export * from "./useDomains";
+export * from "./useFavoriteDomain";
+export * from "./useUserProgress";
+export * from "./useSubdomains";

src/hooks/usePictureRecordValidation.tsx

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+import axios from "axios";
+
+export const usePictureRecordValidation = (pic: string | null | undefined) => {
+  const [isValid, setValidStatus] = useState(false);
+  const checkValidity = async () => {
+    try {
+      setValidStatus(false);
+      if (!pic) return;
+      await axios.get(pic);
+      setValidStatus(true);
+    } catch {}
+  };
+  useEffect(() => {
+    checkValidity();
+  }, [pic]);
+
+  return {
+    isValid,
+  };
+};