From 2af4c049c830dc4b72a8efd305821af9717fa67b Mon Sep 17 00:00:00 2001
From: minibits-cash <mail@minibits.cash>
Date: Tue, 1 Apr 2025 22:20:25 +0200
Subject: [PATCH] iOS images and navi icon

---
 ios/Podfile.lock                              | 32 +++++++++++++
 ios/minibits_wallet.xcodeproj/project.pbxproj | 10 +++-
 package.json                                  |  1 +
 src/components/AvatarHeader.tsx               |  6 ++-
 src/components/Header.tsx                     |  5 +-
 src/components/Icon.tsx                       |  3 +-
 src/models/NwcStore.ts                        | 11 +++--
 src/screens/ContactDetailScreen.tsx           |  3 +-
 src/screens/Contacts/ContactListItem.tsx      |  7 +--
 src/screens/Contacts/PublicContacts.tsx       |  5 +-
 src/screens/ContactsScreen.tsx                |  3 +-
 src/screens/MintInfoScreen.tsx                | 27 ++++++-----
 src/screens/OwnKeysScreen.tsx                 |  3 +-
 .../PaymentRequestListItem.tsx                | 47 ++++++++-----------
 src/screens/PictureScreen.tsx                 | 10 ++--
 src/screens/SendScreen.tsx                    |  9 ++--
 src/screens/TopupScreen.tsx                   | 21 ++++-----
 src/screens/TranDetailScreen.tsx              |  5 +-
 .../Transactions/TransactionListItem.tsx      |  5 +-
 src/screens/WalletScreen.tsx                  |  3 +-
 src/services/walletService.ts                 |  9 ++--
 tsconfig.json                                 |  2 +-
 yarn.lock                                     | 11 +++++
 23 files changed, 151 insertions(+), 87 deletions(-)

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 09117c07..4307fba6 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -62,6 +62,18 @@ PODS:
   - hermes-engine (0.79.0-rc.3):
     - hermes-engine/Pre-built (= 0.79.0-rc.3)
   - hermes-engine/Pre-built (0.79.0-rc.3)
+  - libwebp (1.5.0):
+    - libwebp/demux (= 1.5.0)
+    - libwebp/mux (= 1.5.0)
+    - libwebp/sharpyuv (= 1.5.0)
+    - libwebp/webp (= 1.5.0)
+  - libwebp/demux (1.5.0):
+    - libwebp/webp
+  - libwebp/mux (1.5.0):
+    - libwebp/demux
+  - libwebp/sharpyuv (1.5.0)
+  - libwebp/webp (1.5.0):
+    - libwebp/sharpyuv
   - nanopb (3.30910.0):
     - nanopb/decode (= 3.30910.0)
     - nanopb/encode (= 3.30910.0)
@@ -1971,6 +1983,10 @@ PODS:
     - React-Core
     - React-RCTFabric
     - ReactCommon/turbomodule/core
+  - RNFastImage (8.6.3):
+    - React-Core
+    - SDWebImage (~> 5.11.1)
+    - SDWebImageWebPCoder (~> 0.8.4)
   - RNFBApp (21.12.3):
     - Firebase/CoreOnly (= 11.10.0)
     - React-Core
@@ -2282,6 +2298,12 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - SDWebImage (5.11.1):
+    - SDWebImage/Core (= 5.11.1)
+  - SDWebImage/Core (5.11.1)
+  - SDWebImageWebPCoder (0.8.5):
+    - libwebp (~> 1.0)
+    - SDWebImage/Core (~> 5.10)
   - Sentry/HybridSDK (8.48.0)
   - SocketRocket (0.7.1)
   - Yoga (0.0.0)
@@ -2368,6 +2390,7 @@ DEPENDENCIES:
   - ReactNativeCameraKit (from `../node_modules/react-native-camera-kit`)
   - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
   - RNExitApp (from `../node_modules/react-native-exit-app`)
+  - RNFastImage (from `../node_modules/react-native-fast-image`)
   - "RNFBApp (from `../node_modules/@react-native-firebase/app`)"
   - "RNFBMessaging (from `../node_modules/@react-native-firebase/messaging`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
@@ -2389,10 +2412,13 @@ SPEC REPOS:
     - FirebaseMessaging
     - GoogleDataTransport
     - GoogleUtilities
+    - libwebp
     - nanopb
     - OpenSSL-Universal
     - PromisesObjC
     - React-Codegen
+    - SDWebImage
+    - SDWebImageWebPCoder
     - Sentry
     - SocketRocket
 
@@ -2556,6 +2582,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-clipboard/clipboard"
   RNExitApp:
     :path: "../node_modules/react-native-exit-app"
+  RNFastImage:
+    :path: "../node_modules/react-native-fast-image"
   RNFBApp:
     :path: "../node_modules/@react-native-firebase/app"
   RNFBMessaging:
@@ -2593,6 +2621,7 @@ SPEC CHECKSUMS:
   GoogleDataTransport: aae35b7ea0c09004c3797d53c8c41f66f219d6a7
   GoogleUtilities: 26a3abef001b6533cf678d3eb38fd3f614b7872d
   hermes-engine: 222573b97e0c0023ee02f5a8480d6aa3080ceb3f
+  libwebp: 02b23773aedb6ff1fd38cec7a77b81414c6842a8
   nanopb: fad817b59e0457d11a5dfbde799381cd727c1275
   OpenSSL-Universal: d776ce24dab24323e6995dfb17c64d598885d05c
   PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47
@@ -2669,6 +2698,7 @@ SPEC CHECKSUMS:
   ReactNativeCameraKit: 7bbc43ee30850444b6086bf5aa3b10e085a38446
   RNCClipboard: 055cd8f50702b9ebc5a58f7622e0cda073878d21
   RNExitApp: 2f85821d19ae680d29aa2aa27aaba6a2fee5f0e1
+  RNFastImage: 462a183c4b0b6b26fdfd639e1ed6ba37536c3b87
   RNFBApp: 11d842b835d7e484a306e66e6fd02a13c0478fdc
   RNFBMessaging: fbb4b994cdd8fbf90d4310008893520628c0ba2d
   RNGestureHandler: 8ff2b1434b0ff8bab28c8242a656fb842990bbc8
@@ -2678,6 +2708,8 @@ SPEC CHECKSUMS:
   RNScreens: a25b818417609cbd805474dffd2d28b229704cfc
   RNSentry: 12d6285a94b3a4fe74d2678ee8cfbbfdba2a3b6c
   RNSVG: 4470464e129f6bc58b78b961850b054dbbea8ef7
+  SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
+  SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   Sentry: 1ca8405451040482877dcd344dfa3ef80b646631
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: c6ca19219fc9fa053e4c87451b673bc389dcc133
diff --git a/ios/minibits_wallet.xcodeproj/project.pbxproj b/ios/minibits_wallet.xcodeproj/project.pbxproj
index 787f25f6..f421b32f 100644
--- a/ios/minibits_wallet.xcodeproj/project.pbxproj
+++ b/ios/minibits_wallet.xcodeproj/project.pbxproj
@@ -441,7 +441,10 @@
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG";
@@ -522,7 +525,10 @@
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				SWIFT_COMPILATION_MODE = wholemodule;
diff --git a/package.json b/package.json
index ac88ab70..41445a67 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "react-native-camera-kit": "14.2.0",
     "react-native-dotenv": "^3.4.11",
     "react-native-exit-app": "^2.0.0",
+    "react-native-fast-image": "^8.6.3",
     "react-native-flash-message": "^0.4.2",
     "react-native-gesture-handler": "^2.24.0",
     "react-native-json-tree": "^1.5.0",
diff --git a/src/components/AvatarHeader.tsx b/src/components/AvatarHeader.tsx
index a3d747b9..7004edb1 100644
--- a/src/components/AvatarHeader.tsx
+++ b/src/components/AvatarHeader.tsx
@@ -5,6 +5,8 @@ import { Icon, Text } from "."
 import { spacing, useThemeColor } from "../theme"
 import { getImageSource } from '../utils/utils'
 import { iconRegistry } from '.'
+import { log } from "../services"
+import FastImage from "react-native-fast-image"
 
 
 export interface AvatarHeaderProps {
@@ -26,11 +28,13 @@ export const AvatarHeader = observer(function (props: AvatarHeaderProps) {
   const headerBg = useThemeColor('header')
   const borderColor = useThemeColor('border')
 
+  // log.trace('AvatarHeader', 'render', { props })
+
   return (
     <View style={[$headerContainer(props.headerHeightModifier ?? 0.2), { backgroundColor: props.headerBgColor || headerBg }]}>
       <View style={{ marginBottom: spacing.small }}>
         {props.picture ? (
-          <Image
+          <FastImage
             style={{
               width: 90,
               height: props.pictureHeight ?? 96,
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 000fc4a1..24a2a23d 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -8,7 +8,8 @@ import {
   ViewStyle,  
   StatusBar,
   StatusBarProps,
-  ColorValue
+  ColorValue,
+  Platform
 } from "react-native"
 import { useIsFocused } from '@react-navigation/native'
 import useIsInternetReachable from '../utils/useIsInternetReachable'
@@ -213,7 +214,7 @@ export function Header(props: HeaderProps) {
         <HeaderAction
           tx={leftTx}
           text={leftText}
-          icon={leftIcon}
+          icon={leftIcon === "faArrowLeft" ? Platform.OS === 'ios' ? 'faChevronLeft' : leftIcon : leftIcon}
           iconColor={leftIconColor as string}
           onPress={onLeftPress}
           txOptions={leftTxOptions}
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index ae345adb..fd23b177 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -97,13 +97,14 @@ import { faClock } from "@fortawesome/free-regular-svg-icons/faClock"
 import { faArrowRotateLeft } from "@fortawesome/free-solid-svg-icons/faArrowRotateLeft"
 import { faHeartPulse } from "@fortawesome/free-solid-svg-icons/faHeartPulse"
 import { faSeedling } from "@fortawesome/free-solid-svg-icons/faSeedling"
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft'
 
 
 export type IconTypes = keyof typeof iconRegistry
 
 // TODO remove need for manual iconregistry? 
 // would be best to just import all of them, i guess, or figure out something smart
-export const iconRegistry = { faAddressCard, faAddressBook, faWallet, faQrcode, faClipboard, faSliders, faCoins, faEllipsisVertical, faEllipsis, faArrowUp, faArrowDown, faArrowLeft, faXmark, faInfoCircle, faBug, faCheckCircle, faArrowTurnUp, faArrowTurnDown, faPencil, faTags, faShareFromSquare, faRotate, faCode, faBan, faCircle, faPaperPlane, faBolt, faArrowUpFromBracket, faArrowRightToBracket, faPlus, faShieldHalved, faCloudArrowUp, faPaintbrush, faCopy, faBurst, faUserShield, faLock, faLockOpen, faTriangleExclamation, faDownload, faUpload, faRecycle, faListUl, faExpand, faFingerprint, faWandMagicSparkles, faCircleUser, faComment, faKey, faCircleNodes, faBullseye, faEyeSlash, faUpRightFromSquare, faShareNodes, faPaste, faKeyboard, faMoneyBill1, faGears, faTag, faBank, faChevronDown, faChevronUp, faCircleExclamation, faCircleQuestion, faEnvelope, faTwitter, faTelegramPlane, faDiscord, faGithub, faReddit, faCircleArrowUp, faCircleArrowDown, faGlobe, faCubes, faClock, faArrowRotateLeft, faHeartPulse, faSeedling }
+export const iconRegistry = { faAddressCard, faAddressBook, faWallet, faQrcode, faClipboard, faSliders, faCoins, faEllipsisVertical, faEllipsis, faArrowUp, faArrowDown, faArrowLeft, faXmark, faInfoCircle, faBug, faCheckCircle, faArrowTurnUp, faArrowTurnDown, faPencil, faTags, faShareFromSquare, faRotate, faCode, faBan, faCircle, faPaperPlane, faBolt, faArrowUpFromBracket, faArrowRightToBracket, faPlus, faShieldHalved, faCloudArrowUp, faPaintbrush, faCopy, faBurst, faUserShield, faLock, faLockOpen, faTriangleExclamation, faDownload, faUpload, faRecycle, faListUl, faExpand, faFingerprint, faWandMagicSparkles, faCircleUser, faComment, faKey, faCircleNodes, faBullseye, faEyeSlash, faUpRightFromSquare, faShareNodes, faPaste, faKeyboard, faMoneyBill1, faGears, faTag, faBank, faChevronDown, faChevronUp, faCircleExclamation, faCircleQuestion, faEnvelope, faTwitter, faTelegramPlane, faDiscord, faGithub, faReddit, faCircleArrowUp, faCircleArrowDown, faGlobe, faCubes, faClock, faArrowRotateLeft, faHeartPulse, faSeedling, faChevronLeft}
 
 
 interface IconProps extends TouchableOpacityProps {
diff --git a/src/models/NwcStore.ts b/src/models/NwcStore.ts
index efe15c16..2dfa1b37 100644
--- a/src/models/NwcStore.ts
+++ b/src/models/NwcStore.ts
@@ -38,6 +38,7 @@ import { MintBalance } from './Mint'
 import { transferTask } from '../services/wallet/transferTask'
 import { topupTask } from '../services/wallet/topupTask'
 import { WalletProfileStore } from './WalletProfileStore'
+import { Platform } from 'react-native'
 
 type NwcError = {
     result_type: string,
@@ -203,7 +204,7 @@ export const NwcConnectionModel = types.model('NwcConnection', {
             }            
             
             yield NotificationService.createLocalNotification(
-                `<b>${self.name}</b> - Nostr Wallet Connect`,
+                Platform.OS === 'android' ? `<b>${self.name}</b> - Nostr Wallet Connect` : `${self.name} - Nostr Wallet Connect`,
                 body + (nwcResponse as NwcError).error.message,
                 nwcPngUrl
             )            
@@ -308,7 +309,7 @@ export const NwcConnectionModel = types.model('NwcConnection', {
                 self.setRemainingDailyLimit(updatedLimit)            
     
                 yield NotificationService.createLocalNotification(
-                    `<b>${self.name}</b> - Nostr Wallet Connect`,
+                    Platform.OS === 'android' ? `<b>${self.name}</b> - Nostr Wallet Connect` : `${self.name} - Nostr Wallet Connect`,
                     `Paid ${result.transaction.amount} SAT${result.transaction.fee > 0 ? ', fee ' + result.transaction.fee + ' SAT' : ''}. Remaining today's limit is ${self.remainingDailyLimit} SAT`,
                     nwcPngUrl
                 )
@@ -458,7 +459,7 @@ export const NwcConnectionModel = types.model('NwcConnection', {
             } as NwcResponse
 
             yield NotificationService.createLocalNotification(
-                `<b>${self.name}</b> - Nostr Wallet Connect`,
+                Platform.OS === 'android' ? `<b>${self.name}</b> - Nostr Wallet Connect` : `${self.name} - Nostr Wallet Connect`,
                 `Invoice for ${result.paymentRequest.invoicedAmount} SATS has been created.`,
                 nwcPngUrl
             )
@@ -790,7 +791,7 @@ export const NwcStoreModel = types
                 
                 //yield NotificationService.stopForegroundService()
                 yield NotificationService.createLocalNotification(
-                    `<b>Nostr Wallet Connect</b> error`,
+                    Platform.OS === 'android' ? `<b>Nostr Wallet Connect<b> error` : `Nostr Wallet Connect error`,
                     message,
                     nwcPngUrl
                 )
@@ -808,7 +809,7 @@ export const NwcStoreModel = types
                 
                 //yield NotificationService.stopForegroundService()
                 yield NotificationService.createLocalNotification(
-                    `<b>Nostr Wallet Connect</b> error`,
+                    Platform.OS === 'android' ? `<b>Nostr Wallet Connect<b> error` : `Nostr Wallet Connect error`,
                     message,
                     nwcPngUrl
                 )
diff --git a/src/screens/ContactDetailScreen.tsx b/src/screens/ContactDetailScreen.tsx
index d24de3ee..2fdeb18a 100644
--- a/src/screens/ContactDetailScreen.tsx
+++ b/src/screens/ContactDetailScreen.tsx
@@ -17,6 +17,7 @@ import { IncomingDataType, IncomingParser } from '../services/incomingParser'
 import { translate } from '../i18n'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import { toJS } from 'mobx'
+import FastImage from 'react-native-fast-image'
 
 type Props = StaticScreenProps<{
     contact: Contact
@@ -187,7 +188,7 @@ export const ContactDetailScreen = observer(function ({ route }: Props) {
         <View style={[$headerContainer, {backgroundColor: headerBg}]}>            
             {picture ? (
                 <View style={{borderRadius: 48, overflow: 'hidden'}}>
-                    <Image style={{width: 96, height: 96}} source={{uri: getImageSource(picture)}} />
+                    <FastImage style={{width: 96, height: 96}} source={{uri: getImageSource(picture)}} />
                 </View>
             ) : (
                 <Icon
diff --git a/src/screens/Contacts/ContactListItem.tsx b/src/screens/Contacts/ContactListItem.tsx
index 9c4e9814..27a157d5 100644
--- a/src/screens/Contacts/ContactListItem.tsx
+++ b/src/screens/Contacts/ContactListItem.tsx
@@ -6,6 +6,7 @@ import { ListItem } from "../../components"
 import { Contact } from "../../models/Contact"
 import { spacing } from "../../theme"
 import { getImageSource } from '../../utils/utils'
+import FastImage from 'react-native-fast-image'
 
 
 export interface ContactListProps {
@@ -26,12 +27,12 @@ export const ContactListItem = observer(function (props: ContactListProps) {
         subText={contact.nip05}        
         LeftComponent={
             <View style={{}}>
-                <Image 
+                <FastImage 
                     style={[$iconContainer, {
                         width: 40, 
                         height: contact.isExternalDomain ? 40 :  43,
                         borderRadius: 20,
-                    }]}
+                    }] as import("react-native-fast-image").ImageStyle}
                     source={{uri: getImageSource(contact.picture as string)}} 
                 />
                 {/*contact.lud16 && (
@@ -63,7 +64,7 @@ export const ContactListItem = observer(function (props: ContactListProps) {
 
   const $iconContainer: ImageStyle = {
     padding: spacing.extraSmall,
-    alignSelf: "center",
+    alignSelf: 'center',
     marginRight: spacing.medium,
   }
   
diff --git a/src/screens/Contacts/PublicContacts.tsx b/src/screens/Contacts/PublicContacts.tsx
index 82847833..e4a31579 100644
--- a/src/screens/Contacts/PublicContacts.tsx
+++ b/src/screens/Contacts/PublicContacts.tsx
@@ -18,6 +18,7 @@ import { IncomingDataType, IncomingParser } from '../../services/incomingParser'
 import { translate } from '../../i18n'
 import { useNavigation } from '@react-navigation/native'
 import { toJS } from 'mobx'
+import FastImage from 'react-native-fast-image'
 
 
 // const defaultPublicNpub = 'npub14n7frsyufzqsxlvkx8vje22cjah3pcwnnyqncxkuj2243jvt9kmqsdgs52'
@@ -456,7 +457,7 @@ export const PublicContacts = observer(function (props: {
                         LeftComponent={
                             <View style={{marginRight: spacing.medium, borderRadius: 20, overflow: 'hidden' }}>
                                 {ownProfile.picture ? (
-                                    <Image 
+                                    <FastImage 
                                         source={{uri: ownProfile.picture}}
                                         style={{width: 40, height: 40}}
                                     />
@@ -488,7 +489,7 @@ export const PublicContacts = observer(function (props: {
                                     LeftComponent={
                                         <View style={{marginRight: spacing.medium, borderRadius: 20, overflow: 'hidden'}}>
                                             {item.picture ? (
-                                                <Image 
+                                                <FastImage 
                                                     source={{uri: item.picture}}
                                                     style={{width: 40, height: 40}}
                                                 />
diff --git a/src/screens/ContactsScreen.tsx b/src/screens/ContactsScreen.tsx
index 0bc9ee9e..dd4eeed9 100644
--- a/src/screens/ContactsScreen.tsx
+++ b/src/screens/ContactsScreen.tsx
@@ -13,6 +13,7 @@ import { ReceiveOption } from './ReceiveScreen'
 import { SendOption } from './SendScreen'
 import { verticalScale } from '@gocodingnow/rn-size-matters'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+import FastImage from 'react-native-fast-image'
 
 type Props = StaticScreenProps<{
     paymentOption?: ReceiveOption | SendOption
@@ -94,7 +95,7 @@ export const LeftProfileHeader = observer(function (props: {
     return (        
         <Pressable style={{marginHorizontal: spacing.small}} onPress={props.gotoProfile}>                
             {walletProfileStore.picture && props.isAvatarVisible ? (                    
-                <Image 
+                <FastImage 
                     style={
                         {
                             width: 40, 
diff --git a/src/screens/MintInfoScreen.tsx b/src/screens/MintInfoScreen.tsx
index 199a2000..a1758f6d 100644
--- a/src/screens/MintInfoScreen.tsx
+++ b/src/screens/MintInfoScreen.tsx
@@ -35,6 +35,7 @@ import { SvgXml } from 'react-native-svg'
 import { CurrencyCode, formatCurrency } from '../services/wallet/currency'
 import { QRShareModal } from '../components/QRShareModal'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+import FastImage from 'react-native-fast-image'
 
 interface DetailedNutInfo {
   methods: Array<SwapMethod>;
@@ -159,7 +160,7 @@ export const MintInfoScreen = observer(function MintInfoScreen({ route }: Props)
     <Screen contentContainerStyle={$screen} preset="scroll">
       <View style={[$headerContainer, {backgroundColor: headerBg, justifyContent: 'space-around', paddingBottom: spacing.huge}]}>
       {mintInfo && mintInfo.icon_url ? (
-              <Image 
+              <FastImage 
                 style={
                   {
                     width: spacing.extraLarge,
@@ -195,6 +196,7 @@ export const MintInfoScreen = observer(function MintInfoScreen({ route }: Props)
                 //containerStyle={{marginTop: spacing.small}}
                 key={unit}
                 mintUnit={unit}
+                textStyle={{color: 'white'}}
               />
             ))}
           </View>
@@ -222,16 +224,19 @@ export const MintInfoScreen = observer(function MintInfoScreen({ route }: Props)
         }
         />
         {mintInfo && mintLimitInfo?.any && <MintLimitsCard info={mintInfo} limitInfo={mintLimitInfo}/>}
-        {mintInfo && <ContactCard info={mintInfo} popupMessage={setInfo} />}
-        <Card
-          labelTx={mintInfo && "mintInfo.keyValueInfoCardHeading"}
-          // HeadingTextProps={{style: [$sizeStyles.sm, {color: textDim}]}}
-          ContentComponent={
-            <>
-              {mintInfo && <MintInfoDetails info={mintInfo} popupMessage={setInfo} />}
-            </>
-          }
-        />
+        {mintInfo && 
+          <>
+            <ContactCard info={mintInfo} popupMessage={setInfo} />
+            <Card
+              labelTx={"mintInfo.keyValueInfoCardHeading"}            
+              ContentComponent={
+                <>
+                  {mintInfo && <MintInfoDetails info={mintInfo} popupMessage={setInfo} />}
+                </>
+              }
+            />
+          </>
+        }
         {mintInfo && <NutsCard info={mintInfo} />}
         <Card
           ContentComponent={
diff --git a/src/screens/OwnKeysScreen.tsx b/src/screens/OwnKeysScreen.tsx
index 81914359..c31cb370 100644
--- a/src/screens/OwnKeysScreen.tsx
+++ b/src/screens/OwnKeysScreen.tsx
@@ -15,6 +15,7 @@ import { MINIBITS_NIP05_DOMAIN } from '@env'
 import { ProfileHeader } from '../components/ProfileHeader'
 import { translate } from '../i18n'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+import FastImage from 'react-native-fast-image'
 
 
 type Props = StaticScreenProps<{}>
@@ -277,7 +278,7 @@ export const OwnKeysScreen = observer(function OwnKeysScreen({ route }: Props) {
                                 LeftComponent={
                                     <View style={{marginRight: spacing.medium, borderRadius: 20, overflow: 'hidden'}}>
                                         {ownProfile.picture ? (
-                                            <Image 
+                                            <FastImage 
                                                 source={{uri: ownProfile.picture}}
                                                 style={{width: 40, height: 40}}
                                             />
diff --git a/src/screens/PaymentRequests/PaymentRequestListItem.tsx b/src/screens/PaymentRequests/PaymentRequestListItem.tsx
index de5e9ac8..8bf46599 100644
--- a/src/screens/PaymentRequests/PaymentRequestListItem.tsx
+++ b/src/screens/PaymentRequests/PaymentRequestListItem.tsx
@@ -25,6 +25,7 @@ import { CurrencyAmount } from '../Wallet/CurrencyAmount'
 import { useNavigation } from '@react-navigation/native'
 import { MintUnit } from '../../services/wallet/currency'
 import { toJS } from 'mobx'
+import FastImage from 'react-native-fast-image'
 
 export interface PaymentRequestListProps {
   pr: PaymentRequest
@@ -116,19 +117,16 @@ export const PaymentRequestListItem = observer(function PaymentRequestListItem(
                   alignItems: 'center',
                   width: 100,
                 }}>
-                <Image
-                  style={[
-                    $profileIcon,
-                    {
-                      width: 40,
-                      height: pr.contactTo?.isExternalDomain ? 40 : 43,
-                      borderRadius: pr.contactTo?.isExternalDomain ? 20 : 0,
-                    },
-                  ]}
-                  source={{
-                    uri: getImageSource(pr.contactTo?.picture as string),
-                  }}
-                />
+                    <FastImage style={[                            
+                        $profileIcon, {
+                            width: 40, 
+                            height: pr.contactTo.isExternalDomain ? 40 :  43,
+                            borderRadius: pr.contactTo.isExternalDomain ? 20 :  0,
+                        }] as import("react-native-fast-image").ImageStyle}
+                        source={{
+                            uri: getImageSource(pr.contactTo.picture as string) 
+                        }} 
+                    />
                 <Text
                   size="xxs"
                   style={{color: dim}}
@@ -171,20 +169,15 @@ export const PaymentRequestListItem = observer(function PaymentRequestListItem(
                 }}>
                 {pr.contactFrom.picture ? (
                   <View style={{borderRadius: 20, overflow: 'hidden'}}>
-                    <Image
-                      style={[
-                        $profileIcon,
-                        {
-                          width: 40,
-                          height: pr.contactFrom.isExternalDomain ? 40 : 43,
-                          borderRadius: pr.contactFrom.isExternalDomain
-                            ? 20
-                            : 0,
-                        },
-                      ]}
-                      source={{
-                        uri: getImageSource(pr.contactFrom.picture as string),
-                      }}
+                    <FastImage style={[                            
+                        $profileIcon, {
+                            width: 40, 
+                            height: pr.contactFrom.isExternalDomain ? 40 :  43,
+                            borderRadius: pr.contactFrom.isExternalDomain ? 20 :  0,
+                        }] as import("react-native-fast-image").ImageStyle}
+                        source={{
+                            uri: getImageSource(pr.contactFrom.picture as string) 
+                        }} 
                     />
                   </View>
                 ) : (
diff --git a/src/screens/PictureScreen.tsx b/src/screens/PictureScreen.tsx
index d9d06e07..56385493 100644
--- a/src/screens/PictureScreen.tsx
+++ b/src/screens/PictureScreen.tsx
@@ -1,16 +1,17 @@
-import {observer} from 'mobx-react-lite'
 import React, {FC, useEffect, useState} from 'react'
-import {Image, Pressable, TextStyle, View, ViewStyle} from 'react-native'
+import {Pressable, TextStyle, View, ViewStyle} from 'react-native'
+import FastImage from 'react-native-fast-image'
 import {colors, spacing, useThemeColor} from '../theme'
 import {Button, Card, ErrorModal, Header, InfoModal, ListItem, Loading, Screen, Text} from '../components'
 import {useStores} from '../models'
-import { MinibitsClient} from '../services'
+import { log, MinibitsClient} from '../services'
 import AppError from '../utils/AppError'
 import { ProfileHeader } from '../components/ProfileHeader'
 import { scale } from '@gocodingnow/rn-size-matters'
 import { getImageSource } from '../utils/utils'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 
+
 type Props = StaticScreenProps<undefined>
 
 export const PictureScreen = (function PictureScreen({ route }: Props) {    
@@ -75,13 +76,14 @@ export const PictureScreen = (function PictureScreen({ route }: Props) {
         <View style={$contentContainer}>
             <View style={$picturesContainer}>
                 {pictures.map((png, index) => {
+                    // log.trace('PictureScreen', 'png', png)
                     return (
                         <Pressable
                             key={index}
                             onPress={() => onPictureSelect(png)}
                             style={(png === selectedPicture) ? [$unselected, {borderColor: selectedColor}] : $unselected}
                         >
-                            <Image style={{width: scale(80), height: scale(85)}} source={{uri: getImageSource(png)}} />
+                            <FastImage style={{width: scale(80), height: scale(85)}} source={{uri: getImageSource(png)}} />
                         </Pressable>
                     )
                 })}
diff --git a/src/screens/SendScreen.tsx b/src/screens/SendScreen.tsx
index b5874814..fb128a0b 100644
--- a/src/screens/SendScreen.tsx
+++ b/src/screens/SendScreen.tsx
@@ -60,6 +60,7 @@ import { PaymentRequest as CashuPaymentRequest, PaymentRequestTransport, Payment
 import { ProfilePointer } from 'nostr-tools/nip19'
 import { MINIBITS_NIP05_DOMAIN } from '@env'
 import { SEND_TASK } from '../services/wallet/sendTask'
+import FastImage from 'react-native-fast-image'
 
 export enum SendOption {
     SEND_TOKEN = 'SEND_TOKEN',
@@ -1284,12 +1285,12 @@ const NostDMInfoBlock = observer(function (props: {
     return(
         <View style={{flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', marginBottom: spacing.medium}}>
             <View style={{flexDirection: 'column', alignItems: 'center', width: 100}}>
-                    <Image style={[
+                    <FastImage style={[
                         $profileIcon, {
                             width: 40, 
                             height: walletProfileStore.isOwnProfile ? 40 :  43,
                             borderRadius: walletProfileStore.isOwnProfile ? 20 :  0,
-                        }]} 
+                        }] as import("react-native-fast-image").ImageStyle}
                         source={{
                             uri: getImageSource(props.contactToSendFrom.picture as string)
                         }} 
@@ -1309,12 +1310,12 @@ const NostDMInfoBlock = observer(function (props: {
             <View style={{flexDirection: 'column', alignItems: 'center', width: 100}}>
                 {props.contactToSendTo.picture ? (
                     <View style={{borderRadius: 20, overflow: 'hidden'}}>
-                        <Image style={[
+                        <FastImage style={[                            
                             $profileIcon, {
                                 width: 40, 
                                 height: props.contactToSendTo.isExternalDomain ? 40 :  43,
                                 borderRadius: props.contactToSendTo.isExternalDomain ? 20 :  0,
-                            }]} 
+                            }] as import("react-native-fast-image").ImageStyle}
                             source={{
                                 uri: getImageSource(props.contactToSendTo.picture as string) 
                             }} 
diff --git a/src/screens/TopupScreen.tsx b/src/screens/TopupScreen.tsx
index 701c6fba..15980e8e 100644
--- a/src/screens/TopupScreen.tsx
+++ b/src/screens/TopupScreen.tsx
@@ -63,6 +63,7 @@ import numbro from 'numbro'
 import {TranItem} from './TranDetailScreen'
 import {translate} from '../i18n'
 import { TOPUP_TASK } from '../services/wallet/topupTask'
+import FastImage from 'react-native-fast-image'
 
 type Props = StaticScreenProps<{
   unit: MintUnit,
@@ -1080,15 +1081,13 @@ const NostrDMInfoBlock = observer(function (props: {
         marginBottom: spacing.medium,
       }}>
       <View style={{flexDirection: 'column', alignItems: 'center', width: 100}}>
-        <Image
+        <FastImage
           style={[
-            $profileIcon,
-            {
+            $profileIcon, {
               width: 40,
               height: walletProfileStore.isOwnProfile ? 40 : 43,
-              borderRadius: walletProfileStore.isOwnProfile ? 20 : 0,
-            },
-          ]}
+              borderRadius: walletProfileStore.isOwnProfile ? 20 : 0,            
+          }] as import("react-native-fast-image").ImageStyle}
           source={{
             uri: getImageSource(props.contactToSendFrom.picture as string),
           }}
@@ -1139,14 +1138,12 @@ const NostrDMInfoBlock = observer(function (props: {
       <View style={{flexDirection: 'column', alignItems: 'center', width: 100}}>
         {props.contactToSendTo.picture ? (
           <View style={{borderRadius: 20, overflow: 'hidden'}}>
-            <Image
+            <FastImage
               style={[
-                $profileIcon,
-                {
+                $profileIcon, {
                   width: 40,
-                  height: 40,
-                },
-              ]}
+                  height: 40,                
+              }] as import("react-native-fast-image").ImageStyle}
               source={{
                 uri: getImageSource(props.contactToSendTo.picture as string),
               }}
diff --git a/src/screens/TranDetailScreen.tsx b/src/screens/TranDetailScreen.tsx
index d9969916..c3b3ad21 100644
--- a/src/screens/TranDetailScreen.tsx
+++ b/src/screens/TranDetailScreen.tsx
@@ -58,6 +58,7 @@ import { MintListItem } from './Mints/MintListItem'
 import { Token, getDecodedToken } from '@cashu/cashu-ts'
 import { RECEIVE_OFFLINE_COMPLETE_TASK, RECEIVE_TASK } from '../services/wallet/receiveTask'
 import { REVERT_TASK } from '../services/wallet/revertTask'
+import FastImage from 'react-native-fast-image'
 
 type ProofsByStatus = {
   isSpent: Proof[]
@@ -714,7 +715,7 @@ const ReceiveInfoBlock = function (props: {
                           />
                           <View style={$pictureContainer}>
                           {profilePicture ? (
-                            <Image 
+                            <FastImage 
                               style={
                                 {
                                   width: verticalScale(40),
@@ -726,7 +727,7 @@ const ReceiveInfoBlock = function (props: {
                               // defaultSource={require('../../assets/icons/nostr.png')}
                             /> 
                           ):(
-                            <Image 
+                            <FastImage 
                               style={
                                 {
                                   width: verticalScale(40),
diff --git a/src/screens/Transactions/TransactionListItem.tsx b/src/screens/Transactions/TransactionListItem.tsx
index f6b7cfda..39bb5bd3 100644
--- a/src/screens/Transactions/TransactionListItem.tsx
+++ b/src/screens/Transactions/TransactionListItem.tsx
@@ -16,6 +16,7 @@ import { NostrProfile, log } from '../../services'
 import { moderateScale, verticalScale } from '@gocodingnow/rn-size-matters'
 import { useNavigation } from '@react-navigation/native'
 import { getActiveRouteName } from '../../navigation'
+import FastImage from 'react-native-fast-image'
 
 export interface TransactionListProps {
   transaction: Transaction
@@ -172,7 +173,7 @@ export const TransactionListItem = observer(function (props: TransactionListProp
           return (
             <View style={$pictureContainer}>
               {profile.picture ? (
-                <Image 
+                <FastImage 
                   style={
                     {
                       width: verticalScale(34),
@@ -184,7 +185,7 @@ export const TransactionListItem = observer(function (props: TransactionListProp
                   // defaultSource={require('../../../assets/icons/nostr.png')}
                 /> 
               ) : (
-                <Image 
+                <FastImage 
                   style={
                     {
                       width: verticalScale(34),
diff --git a/src/screens/WalletScreen.tsx b/src/screens/WalletScreen.tsx
index d58d4bfb..b1c6ac13 100644
--- a/src/screens/WalletScreen.tsx
+++ b/src/screens/WalletScreen.tsx
@@ -57,6 +57,7 @@ import { CurrencyCode, MintUnit, MintUnitCurrencyPairs, convertToFromSats, getCu
 import { CurrencyAmount } from './Wallet/CurrencyAmount'
 import { LeftProfileHeader } from './ContactsScreen'
 import { getUnixTime } from 'date-fns/getUnixTime'
+import FastImage from 'react-native-fast-image'
 
 
 const MINT_CHECK_INTERVAL = 60
@@ -735,7 +736,7 @@ export const WalletScreen = observer(function WalletScreen({ route }: Props) {
             <ListItem
                 LeftComponent={
                     <View style={{marginRight: spacing.medium}}>                        
-                        <Image 
+                        <FastImage 
                             source={{uri: 'https://www.minibits.cash/img/minibits_icon-192.png'}}
                             style={{width: 40, height: 40}}
                         />
diff --git a/src/services/walletService.ts b/src/services/walletService.ts
index 63ae9f37..772ca1a3 100644
--- a/src/services/walletService.ts
+++ b/src/services/walletService.ts
@@ -35,6 +35,7 @@ import { MintUnit, formatCurrency, getCurrency } from './wallet/currency'
 import { MinibitsClient } from './minibitsService'
 import { KeyChain } from './keyChain'
 import { UnsignedEvent } from 'nostr-tools'
+import { Platform } from 'react-native'
 
 /**
  * The default number of proofs per denomination to keep in a wallet.
@@ -2030,7 +2031,7 @@ const receiveEventsFromRelaysQueue = async function (): Promise<void> {
                 log.trace('[receiveEventsFromRelays]', `Eose: Got ${eventsBatch.length} receive events`)
                 
                 const connections = pool.listConnectionStatus()                
-                for (const conn of connections) {
+                for (const conn of Array.from(connections)) {
                     const relayInstance = relaysStore.findByUrl(conn[0])
                     if(conn[1] === true) {
                         log.trace('[receiveEventsFromRelays] Connection is OPEN', {conn: conn[0]})             
@@ -2287,8 +2288,8 @@ const _sendReceiveNotification = async function (
     const currencyCode = getCurrency(unit).code
     if(receivedAmount && receivedAmount > 0) {
         await NotificationService.createLocalNotification(
-            `<b>⚡${formatCurrency(receivedAmount, currencyCode)} ${currencyCode}</b> received!`,
-            `${isZap ? 'Zap' : 'Ecash'} from <b>${sentFrom || 'unknown payer'}</b> is now in your wallet.`,
+            Platform.OS === 'android' ? `<b>⚡${formatCurrency(receivedAmount, currencyCode)} ${currencyCode}</b> received!` : `⚡${formatCurrency(receivedAmount, currencyCode)} ${currencyCode} received!`,
+            Platform.OS === 'android' ? `${isZap ? 'Zap' : 'Ecash'} from <b>${sentFrom || 'unknown payer'}</b> is now in your wallet.` : `${isZap ? 'Zap' : 'Ecash'} from ${sentFrom || 'unknown payer'} is now in your wallet.`,
             sentFromPicture       
         ) 
     }
@@ -2299,7 +2300,7 @@ const _sendReceiveNotification = async function (
 
 const _sendPaymentRequestNotification = async function (pr: PaymentRequest) {    
     await NotificationService.createLocalNotification(
-        `⚡ Please pay <b>${formatCurrency(pr.invoicedAmount, getCurrency(pr.invoicedUnit!).code)} ${getCurrency(pr.invoicedUnit!).code}</b>!`,
+        Platform.OS === 'android' ? `⚡ Please pay <b>${formatCurrency(pr.invoicedAmount, getCurrency(pr.invoicedUnit!).code)} ${getCurrency(pr.invoicedUnit!).code}</b>!` : `⚡ Please pay ${formatCurrency(pr.invoicedAmount, getCurrency(pr.invoicedUnit!).code)} ${getCurrency(pr.invoicedUnit!).code}!`,
         `${pr.contactFrom.nip05 || 'Unknown'} has sent you a request to pay an invoice.`,
         pr.contactFrom.picture,
     )
diff --git a/tsconfig.json b/tsconfig.json
index 01f20ed5..0ed282f9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,7 @@
   "compilerOptions": {
     "jsx": "react",
     "typeRoots": ["./src/utils/envtypes"],
-    "lib": ["ES2015"],
+    "lib": ["ES2017"],
     "paths": {
         "nostr-tools/*": ["./node_modules/nostr-tools/lib/types/*"]
     },
diff --git a/yarn.lock b/yarn.lock
index 2404f987..7e6111fc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9239,6 +9239,7 @@ __metadata:
     react-native-clean-project: ^4.0.3
     react-native-dotenv: ^3.4.11
     react-native-exit-app: ^2.0.0
+    react-native-fast-image: ^8.6.3
     react-native-flash-message: ^0.4.2
     react-native-gesture-handler: ^2.24.0
     react-native-json-tree: ^1.5.0
@@ -10438,6 +10439,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-fast-image@npm:^8.6.3":
+  version: 8.6.3
+  resolution: "react-native-fast-image@npm:8.6.3"
+  peerDependencies:
+    react: ^17 || ^18
+    react-native: ">=0.60.0"
+  checksum: 29289cb6b2eae0983c8922b22e2d9de3be07322bb7991c5def19f95eadefaedb0e308ff0b38cc1d0444e8bd4fe94a7621a99a2d3d9298100bcb60b3144677234
+  languageName: node
+  linkType: hard
+
 "react-native-flash-message@npm:^0.4.2":
   version: 0.4.2
   resolution: "react-native-flash-message@npm:0.4.2"