fix: Pic loading + modals issue

Bonfida · Jan 24, 2024 · f00c6aa · f00c6aa
1 parent adeb04d
commit f00c6aa
Show file tree

Hide file tree

Showing 12 changed files with 219 additions and 173 deletions.
diff --git a/src/App.tsx b/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>
   );
 }

diff --git a/src/components/EditPicture.tsx b/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;
@@ -172,14 +176,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")
           }
         />

diff --git a/src/components/ProfileBlock.tsx b/src/components/ProfileBlock.tsx
@@ -16,8 +16,9 @@ interface ProfileBlockProps {
   children?: ReactNode;
   owner: string;
   domain: string;
-  picRecord: ReturnType<typeof useProfilePic>;
+  picRecord: string | undefined;
   isPicValid: boolean;
+  onNewPicUploaded: () => void;
 }
 
 export const ProfileBlock = ({
@@ -26,6 +27,7 @@ export const ProfileBlock = ({
   children,
   picRecord,
   isPicValid,
+  onNewPicUploaded,
 }: ProfileBlockProps) => {
   const { publicKey } = useWallet();
   const { setStatus } = useStatusModalContext();
@@ -54,20 +56,18 @@ export const ProfileBlock = ({
       >
         <Image
           source={
-            isPicValid
-              ? { 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`}

diff --git a/src/hooks/index.ts b/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";
diff --git a/src/hooks/usePictureRecordValidation.tsx b/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,
+  };
+};
diff --git a/src/locales/en/messages.po b/src/locales/en/messages.po
@@ -123,21 +123,21 @@ msgstr ""
 
 #: src/components/CreateSubdomainModal.tsx:92
 #: src/components/DeleteModal.tsx:92
-#: src/components/EditPicture.tsx:210
+#: src/components/EditPicture.tsx:217
 #: src/components/TransferModal.tsx:109
 msgid "Cancel"
 msgstr ""
 
-#: src/App.tsx:149
-#: src/App.tsx:165
+#: src/App.tsx:150
+#: src/App.tsx:166
 msgid "Cart"
 msgstr ""
 
 #: src/components/LanguageModal.tsx:22
 msgid "Change language"
 msgstr ""
 
-#: src/components/EditPicture.tsx:176
+#: src/components/EditPicture.tsx:181
 msgid "Change profile picture"
 msgstr ""
 
@@ -149,7 +149,7 @@ msgstr ""
 msgid "Clear all"
 msgstr ""
 
-#: src/screens/Profile/index.tsx:283
+#: src/screens/Profile/index.tsx:286
 msgid "Clear search"
 msgstr ""
 
@@ -257,8 +257,8 @@ msgstr ""
 msgid "Domain name tokenization (wrapping), involves converting a domain name into an NFT. To reveal the original domain name, the token can be redeemed (unwrapped)."
 msgstr ""
 
-#: src/App.tsx:139
-#: src/screens/Profile/index.tsx:225
+#: src/App.tsx:140
+#: src/screens/Profile/index.tsx:228
 msgid "Domains"
 msgstr ""
 
@@ -410,7 +410,7 @@ msgstr ""
 #~ msgid "Invalid IPFS record - Must start with ipfs://"
 #~ msgstr ""
 
-#: src/components/EditPicture.tsx:57
+#: src/components/EditPicture.tsx:61
 #: src/screens/DomainView.tsx:291
 msgid "Invalid URL"
 msgstr ""
@@ -428,11 +428,11 @@ msgstr ""
 msgid "Learn more in our docs"
 msgstr ""
 
-#: src/screens/Profile/index.tsx:225
+#: src/screens/Profile/index.tsx:228
 msgid "My domains"
 msgstr ""
 
-#: src/screens/Profile/index.tsx:295
+#: src/screens/Profile/index.tsx:298
 msgid "My sub domains"
 msgstr ""
 
@@ -444,7 +444,7 @@ msgstr ""
 msgid "New {domain}.sol owner"
 msgstr ""
 
-#: src/components/EditPicture.tsx:199
+#: src/components/EditPicture.tsx:206
 msgid "New picture URL"
 msgstr ""
 
@@ -457,7 +457,7 @@ msgid "No changes to save"
 msgstr ""
 
 #: src/components/SearchModal.tsx:74
-#: src/screens/Profile/index.tsx:273
+#: src/screens/Profile/index.tsx:276
 msgid "No domain found"
 msgstr ""
 
@@ -493,15 +493,15 @@ msgstr ""
 msgid "Payment"
 msgstr ""
 
-#: src/components/EditPicture.tsx:134
+#: src/components/EditPicture.tsx:138
 msgid "Permission to access photo album is required"
 msgstr ""
 
 #: src/utils/record/place-holder.tsx:65
 msgid "Pic"
 msgstr ""
 
-#: src/components/EditPicture.tsx:197
+#: src/components/EditPicture.tsx:204
 msgid "Picture URL"
 msgstr ""
 
@@ -517,15 +517,15 @@ msgstr ""
 msgid "Privacy Policy"
 msgstr ""
 
-#: src/App.tsx:128
+#: src/App.tsx:129
 msgid "Profile"
 msgstr ""
 
 #: src/screens/Profile.tsx:177
 #~ msgid "Profile completed: {percentage}%"
 #~ msgstr ""
 
-#: src/screens/Profile/index.tsx:198
+#: src/screens/Profile/index.tsx:201
 msgid "Profile completion: {percentage}%"
 msgstr ""
 
@@ -564,7 +564,7 @@ msgstr ""
 msgid "Revert"
 msgstr ""
 
-#: src/components/EditPicture.tsx:217
+#: src/components/EditPicture.tsx:224
 #: src/screens/DomainView.tsx:689
 msgid "Save"
 msgstr ""
@@ -584,7 +584,7 @@ msgid "Search domains"
 msgstr ""
 
 #: src/screens/HomeScreen.tsx:95
-#: src/screens/Profile/index.tsx:232
+#: src/screens/Profile/index.tsx:235
 #: src/screens/SearchResult.tsx:77
 msgid "Search for a domain"
 msgstr ""
@@ -653,7 +653,7 @@ msgstr ""
 msgid "Storage:"
 msgstr ""
 
-#: src/screens/Profile/index.tsx:295
+#: src/screens/Profile/index.tsx:298
 msgid "Sub domains"
 msgstr ""
 
@@ -764,7 +764,7 @@ msgstr ""
 msgid "Unwrap your domain from NFT"
 msgstr ""
 
-#: src/components/EditPicture.tsx:191
+#: src/components/EditPicture.tsx:198
 msgid "Upload a picture..."
 msgstr ""