Merge pull request #358 from cnguyen812/fix/invoice-crash

Fix/invoice crash
bitpay · Aug 17, 2022 · 99af78a · 99af78a
2 parents b68aa6c + 0d0119a
commit 99af78a
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 87 deletions.
diff --git a/src/components/currency-image/CurrencyImage.tsx b/src/components/currency-image/CurrencyImage.tsx
@@ -35,13 +35,13 @@ const styles = StyleSheet.create({
   },
 });
 
-export const CurrencyImage = ({
+export const CurrencyImage: React.VFC<CurrencyImageProps> = ({
   img,
   imgSrc,
   badgeUri,
   badgeSrc,
   size = 40,
-}: CurrencyImageProps) => {
+}) => {
   const style = {width: size, height: size};
 
   const badge = useMemo(

diff --git a/src/navigation/wallet/screens/send/confirm/Shared.tsx b/src/navigation/wallet/screens/send/confirm/Shared.tsx
@@ -113,15 +113,17 @@ export const Header = ({
   }
 };
 
-export const SendingTo = ({
-  recipient,
-  recipientList,
-  hr,
-}: {
+interface SendingToProps {
   recipient: TxDetailsSendingTo | undefined;
   recipientList?: TxDetailsSendingTo[];
   hr?: boolean;
-}): JSX.Element | null => {
+}
+
+export const SendingTo: React.VFC<SendingToProps> = ({
+  recipient,
+  recipientList,
+  hr,
+}) => {
   const {t} = useTranslation();
   const [copied, setCopied] = useState(false);
   const [showRecipientCards, setShowRecipientCards] = useState(true);
@@ -137,62 +139,62 @@ export const SendingTo = ({
     return () => clearTimeout(timer);
   }, [copied]);
 
-  if (recipient) {
-    const {recipientName, recipientAddress, img, recipientFullAddress} =
-      recipient;
+  if (!recipient) {
+    return null;
+  }
 
-    const copyText = (text: string) => {
-      if (!copied && !!text) {
-        Clipboard.setString(text);
-        setCopied(true);
-      }
-    };
-
-    let description;
-    if (recipientList) {
-      description =
-        recipientList.length +
-        ' ' +
-        (recipientList.length === 1 ? t('Recipient') : t('Recipients'));
-    } else {
-      description = recipientName || recipientAddress || '';
-    }
+  const {recipientName, recipientAddress, img, recipientFullAddress} =
+    recipient;
 
-    return (
-      <>
-        <DetailContainer height={83}>
-          <DetailRow>
-            <H7>{t('Sending to')}</H7>
-            <SendToPill
-              onPress={() =>
-                !recipientList
-                  ? copyText(recipientFullAddress || '')
-                  : setShowRecipientCards(!showRecipientCards)
-              }
-              icon={
-                copied ? (
-                  <CopiedSvg width={18} />
-                ) : (
-                  <CurrencyImage img={img} size={18} />
-                )
-              }
-              description={description}
-              dropDown={!!recipientList}
-            />
-          </DetailRow>
-        </DetailContainer>
-        {hr && <Hr />}
-        {showRecipientCards && recipientList
-          ? recipientList.map((r, i) => (
-              <AddressCard key={i.toString()} recipient={r} />
-            ))
-          : null}
-        {showRecipientCards && recipientList && <Hr />}
-      </>
-    );
+  const copyText = (text: string) => {
+    if (!copied && !!text) {
+      Clipboard.setString(text);
+      setCopied(true);
+    }
+  };
+
+  let description;
+  if (recipientList) {
+    description =
+      recipientList.length +
+      ' ' +
+      (recipientList.length === 1 ? t('Recipient') : t('Recipients'));
   } else {
-    return null;
+    description = recipientName || recipientAddress || '';
   }
+
+  return (
+    <>
+      <DetailContainer height={83}>
+        <DetailRow>
+          <H7>{t('Sending to')}</H7>
+          <SendToPill
+            onPress={() =>
+              !recipientList
+                ? copyText(recipientFullAddress || '')
+                : setShowRecipientCards(!showRecipientCards)
+            }
+            icon={
+              copied ? (
+                <CopiedSvg width={18} />
+              ) : (
+                <CurrencyImage img={img} size={18} />
+              )
+            }
+            description={description}
+            dropDown={!!recipientList}
+          />
+        </DetailRow>
+      </DetailContainer>
+      {hr && <Hr />}
+      {showRecipientCards && recipientList
+        ? recipientList.map((r, i) => (
+            <AddressCard key={i.toString()} recipient={r} />
+          ))
+        : null}
+      {showRecipientCards && recipientList && <Hr />}
+    </>
+  );
 };
 
 export const Fee = ({
@@ -245,36 +247,37 @@ export const Fee = ({
   }
 };
 
-export const SendingFrom = ({
+interface SendingFromProps {
+  onPress?: () => void;
+  sender: TxDetailsSendingFrom | undefined;
+  hr?: boolean;
+}
+
+export const SendingFrom: React.VFC<SendingFromProps> = ({
   sender,
   onPress,
   hr,
-}: {
-  sender: TxDetailsSendingFrom | undefined;
-  onPress?: () => void;
-  hr?: boolean;
-}): JSX.Element | null => {
+}) => {
   const {t} = useTranslation();
-  if (sender) {
-    const {walletName, img} = sender;
-    return (
-      <>
-        <DetailContainer height={83}>
-          <DetailRow>
-            <H7>{t('Sending from')}</H7>
-            <SendToPill
-              onPress={onPress}
-              icon={CurrencyImage({img, size: 18})}
-              description={walletName}
-            />
-          </DetailRow>
-        </DetailContainer>
-        {hr && <Hr />}
-      </>
-    );
-  } else {
+
+  if (!sender) {
     return null;
   }
+
+  const {walletName, img} = sender;
+  const icon = <CurrencyImage img={img} size={18} />;
+
+  return (
+    <>
+      <DetailContainer height={83}>
+        <DetailRow>
+          <H7>{t('Sending from')}</H7>
+          <SendToPill onPress={onPress} icon={icon} description={walletName} />
+        </DetailRow>
+      </DetailContainer>
+      {hr && <Hr />}
+    </>
+  );
 };
 
 export const Amount = ({

diff --git a/src/utils/hooks/useMount.ts b/src/utils/hooks/useMount.ts
@@ -1,10 +1,13 @@
-import {EffectCallback, useEffect} from 'react';
+import {EffectCallback, useEffect, useRef} from 'react';
 
 /**
  * Accepts a useEffect function that only runs on mount.
  * @param effect A function that can return a useEffect cleanup function.
  */
-export const useMount = (effect: EffectCallback) =>
-  useEffect(() => effect(), []);
+export const useMount = (effect: EffectCallback) => {
+  const effectRef = useRef(effect);
+
+  useEffect(() => effectRef.current(), []);
+};
 
 export default useMount;