General fixes

ios/Podfile.lock

@@ -427,7 +427,7 @@ PODS:
     - React-Core
   - RNCAsyncStorage (1.17.10):
     - React-Core
-  - RNCClipboard (1.5.1):
+  - RNCClipboard (1.11.1):
     - React-Core
   - RNCMaskedView (0.2.7):
     - React-Core
@@ -572,7 +572,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - RNBootSplash (from `../node_modules/react-native-bootsplash`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
-  - "RNCClipboard (from `../node_modules/@react-native-community/clipboard`)"
+  - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
   - "RNCMaskedView (from `../node_modules/@react-native-masked-view/masked-view`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNFastImage (from `../node_modules/react-native-fast-image`)
@@ -713,7 +713,7 @@ EXTERNAL SOURCES:
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-async-storage/async-storage"
   RNCClipboard:
-    :path: "../node_modules/@react-native-community/clipboard"
+    :path: "../node_modules/@react-native-clipboard/clipboard"
   RNCMaskedView:
     :path: "../node_modules/@react-native-masked-view/masked-view"
   RNDeviceInfo:
@@ -816,7 +816,7 @@ SPEC CHECKSUMS:
   ReactCommon: 01064177e66d652192c661de899b1076da962fd9
   RNBootSplash: 5f346163977573d6b2aeba1b25df9d2245c0d73c
   RNCAsyncStorage: 0c357f3156fcb16c8589ede67cc036330b6698ca
-  RNCClipboard: 41d8d918092ae8e676f18adada19104fa3e68495
+  RNCClipboard: 2834e1c4af68697089cdd455ee4a4cdd198fa7dd
   RNCMaskedView: cb9670ea9239998340eaab21df13fa12a1f9de15
   RNDeviceInfo: 4701f0bf2a06b34654745053db0ce4cb0c53ada7
   RNFastImage: 3207b9eb17c2425d574ca40db35185db6e324f4e

src/components/buttons/Button/index.tsx

@@ -41,15 +41,14 @@ const Button = ({
   disableAnimation = false,
   loading = false,
   iconProps,
-  ...props
 }: Props) => {
   return (
     <Touchable
       scale={animationScales.medium}
       disabled={disabled || disableAnimation}
       onPress={onPress}
       onLongPress={onLongPress || onPress}>
-      <View style={[styles.button, buttonStyle]} {...props}>
+      <View style={[styles.button, buttonStyle]}>
         {loading ? (
           <ActivityIndicator style={StyleSheet.absoluteFill} color="white" />
         ) : (

src/components/buttons/RainbowButton/index.tsx

@@ -26,7 +26,6 @@ const RainbowButton = ({
   disabled,
   onLongPress,
   loading = false,
-  ...props
 }: Props) => {
   const disabledOrLoading = disabled || loading;
   return (
@@ -36,8 +35,7 @@ const RainbowButton = ({
       disabled={disabledOrLoading}>
       <LinearGradient
         style={[styles.button, buttonStyle]}
-        {...(disabledOrLoading ? DisabledRainbow : Rainbow)}
-        {...props}>
+        {...(disabledOrLoading ? DisabledRainbow : Rainbow)}>
         <Button
           onPress={onPress}
           buttonStyle={[styles.buttonRainbow]}
@@ -46,7 +44,6 @@ const RainbowButton = ({
           disabled={disabledOrLoading}
           loading={loading}
           disableAnimation
-          {...props}
         />
       </LinearGradient>
     </Touchable>

src/components/common/NftDisplayer/components/ICNSDisplayer/index.tsx

@@ -15,7 +15,7 @@ function ICNSDisplayer({ ICNSName, size = 'small' }: Props) {
   const isBigSize = size === 'big';
 
   return (
-    <View style={styles.ICNSContainer}>
+    <View style={[styles.ICNSContainer, isBigSize && styles.bigContainer]}>
       <Image
         url={ICNS_LOGO}
         resizeMode="contain"

src/components/common/NftDisplayer/components/ICNSDisplayer/styles.ts

@@ -3,13 +3,16 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   ICNSContainer: {
     position: 'absolute',
-    paddingHorizontal: 20,
-    paddingTop: 20,
-    paddingBottom: 12,
+    paddingLeft: 16,
+    paddingVertical: 20,
     height: '100%',
     width: '100%',
     justifyContent: 'space-between',
   },
+  bigContainer: {
+    paddingLeft: 30,
+    paddingTop: 30,
+  },
   ICNSLogo: {
     height: 20,
     width: 60,

src/config/logs.ts

@@ -1,6 +1,8 @@
 // Disable console.log in prod apps
 if (!__DEV__) {
   console.log = () => {};
+  console.error = () => {};
+  console.warn = () => {};
 }
 
 export default {};

src/screens/tabs/NFTs/screens/NftDetail/index.tsx

@@ -11,6 +11,7 @@ import RainbowButton from '@/components/buttons/RainbowButton';
 import { ActionSheet, Badge, NftDisplayer, Text } from '@/components/common';
 import ModalHeader from '@/components/navigation/ModalHeader';
 import { FontStyles } from '@/constants/theme';
+import { ICNS_URL } from '@/constants/urls';
 import useGetType from '@/hooks/useGetType';
 import DownloadIcon from '@/icons/material/Download.svg';
 import ViewIcon from '@/icons/material/View.svg';
@@ -62,6 +63,15 @@ function NftDetail({ route, navigation }: ModalScreenProps<Routes.NFT_DETAIL>) {
     return () => setNFTDetails(undefined);
   }, [selectedNFT]);
 
+  const handleMore = () => {
+    if (isICNS) {
+      const name = selectedNFT?.name?.split('.')[0];
+      Linking.openURL(`${ICNS_URL}/domains/${name}/detail`);
+    } else {
+      actionSheetRef.current?.open();
+    }
+  };
+
   const handleSend = () => {
     navigation.navigate(Routes.SEND, { nft: selectedNFT });
   };
@@ -119,8 +129,8 @@ function NftDetail({ route, navigation }: ModalScreenProps<Routes.NFT_DETAIL>) {
         <View style={styles.buttonContainer}>
           <View style={styles.buttonWraperLeft}>
             <Button
-              text={t('common.more')}
-              onPress={actionSheetRef.current?.open!}
+              text={isICNS ? t('nftDetail.manage') : t('common.more')}
+              onPress={handleMore}
               loading={isDownloading}
               disabled={!type}
             />
@@ -129,7 +139,7 @@ function NftDetail({ route, navigation }: ModalScreenProps<Routes.NFT_DETAIL>) {
             <RainbowButton
               text={t('common.send')}
               onPress={handleSend}
-              disabled={isDownloading}
+              disabled={isDownloading || isICNS}
             />
           </View>
         </View>

src/screens/tabs/NFTs/screens/NftList/index.tsx

@@ -31,17 +31,15 @@ function NftList({ route, navigation }: ModalScreenProps<Routes.NFT_LIST>) {
 
   const renderItem = ({ item }: { item: CollectionToken }) => {
     const isICNS = isICNSCanister(collection?.canisterId);
-    const title = isICNS
-      ? collection?.name
-      : `${collection?.name} #${item.index}`;
+    const title = isICNS ? item?.name : `${collection?.name} #${item.index}`;
 
     return (
       <NftItem
-        title={title}
+        title={isICNS ? undefined : title}
+        ICNSName={isICNS ? title : undefined}
         url={item.url}
         onPress={() => handleItemPress(item)}
         containerStyle={styles.itemContainer}
-        itemStyle={styles.itemStyle}
         canisterId={item.canister}
         itemId={item.index}
       />

src/screens/tabs/NFTs/screens/NftList/styles.ts

@@ -1,14 +1,8 @@
 import { StyleSheet } from 'react-native';
 
-import { Colors } from '@/constants/theme';
-
 export default StyleSheet.create({
   itemContainer: {
     marginVertical: 10,
     marginHorizontal: 15,
   },
-  itemStyle: {
-    borderColor: Colors.Gray.Primary,
-    borderWidth: 1,
-  },
 });

src/screens/tabs/Profile/index.tsx

@@ -18,7 +18,7 @@ import {
 import Icon from '@/components/icons';
 import { ERROR_TYPES } from '@/constants/general';
 import { Colors } from '@/constants/theme';
-import { ScreenProps } from '@/interfaces/navigation';
+import { RootScreenProps } from '@/interfaces/navigation';
 import { Transaction } from '@/interfaces/redux';
 import { Container, Separator } from '@/layout';
 import Routes from '@/navigation/Routes';
@@ -33,7 +33,7 @@ import Accounts from './modals/Accounts';
 import ActivityDetail from './modals/ActivityDetail';
 import styles from './styles';
 
-function Profile({ navigation }: ScreenProps<Routes.PROFILE>) {
+function Profile({ navigation }: RootScreenProps<Routes.PROFILE>) {
   const accountsModalRef = useRef<Modalize>(null);
   const activityDetailModalRef = useRef<Modalize>(null);
   const transactionListRef = useRef(null);

src/screens/tabs/Profile/modals/Accounts/index.tsx

@@ -20,7 +20,6 @@ import EditIcon from '@/icons/material/Edit.svg';
 import TrashCan from '@/icons/material/TrashCan.svg';
 import AddGray from '@/icons/svg/AddGray.svg';
 import CheckedBlueCircle from '@/icons/svg/CheckedBlueCircle.svg';
-import { Nullable } from '@/interfaces/general';
 import { Wallet } from '@/interfaces/redux';
 import { Row } from '@/layout';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
@@ -44,9 +43,8 @@ function Accounts({ modalRef }: Props) {
   const dispatch = useAppDispatch();
 
   const [loading, setLoading] = useState(false);
-  const [actionSheetData, setActionSheetData] = useState<any>(undefined);
-  const [selectedAccount, setSelectedAccount] =
-    useState<Nullable<Wallet>>(null);
+  const [actionSheetData, setActionSheetData] = useState<any>();
+  const [selectedAccount, setSelectedAccount] = useState<Wallet>();
 
   const addICNSRef = useRef<Modalize>(null);
   const actionSheetRef = useRef<Modalize>(null);
@@ -60,7 +58,7 @@ function Accounts({ modalRef }: Props) {
   }, []);
 
   const onCreateImportAccount = () => {
-    setSelectedAccount(null);
+    setSelectedAccount(undefined);
     createImportAccountRef.current?.open();
   };
 
@@ -199,10 +197,22 @@ function Accounts({ modalRef }: Props) {
     );
   };
 
+  const resetState = () => {
+    setSelectedAccount(undefined);
+    setActionSheetData(undefined);
+  };
+
   return (
     <>
-      <Modal adjustToContentHeight modalRef={modalRef}>
-        <Header center={<Text type="subtitle2">{t('accounts.title')}</Text>} />
+      <Modal
+        adjustToContentHeight
+        modalRef={modalRef}
+        onClosed={resetState}
+        HeaderComponent={
+          <Header
+            center={<Text type="subtitle2">{t('accounts.title')}</Text>}
+          />
+        }>
         <View style={styles.content}>
           {loading && (
             <View style={styles.loading}>
@@ -226,13 +236,9 @@ function Accounts({ modalRef }: Props) {
           </Touchable>
           <CreateEditAccount
             modalRef={createEditAccountRef}
-            accountsModalRef={modalRef}
             account={selectedAccount!}
           />
-          <CreateImportAccount
-            modalRef={createImportAccountRef}
-            accountsModalRef={modalRef}
-          />
+          <CreateImportAccount modalRef={createImportAccountRef} />
         </View>
       </Modal>
       <ActionSheet

src/screens/tabs/Profile/modals/Accounts/styles.ts

@@ -6,7 +6,6 @@ export default StyleSheet.create({
   content: {
     paddingHorizontal: 12,
     paddingBottom: 20,
-    paddingTop: 10,
     zIndex: 0,
   },
   loading: {

src/screens/tabs/Profile/modals/ActivityDetail/index.tsx

@@ -4,13 +4,7 @@ import React, { RefObject } from 'react';
 import { View } from 'react-native';
 import { Modalize } from 'react-native-modalize';
 
-import {
-  ActionButton,
-  Header,
-  Modal,
-  Text,
-  Touchable,
-} from '@/components/common';
+import { Header, Modal, Text, Touchable } from '@/components/common';
 import useCustomToast from '@/hooks/useCustomToast';
 import { Contact, Transaction } from '@/interfaces/redux';
 import { useAppSelector } from '@/redux/hooks';
@@ -51,7 +45,6 @@ function ActivityDetail({ modalRef, activity, onClosed }: Props) {
   const { contacts } = useAppSelector(state => state.user);
   const { showInfo } = useCustomToast();
 
-  const closeModal = () => modalRef?.current?.close();
   const handleOnCopy = (address: string) => () => {
     Clipboard.setString(address);
     showInfo(t('activity.details.copied'));
@@ -116,9 +109,6 @@ function ActivityDetail({ modalRef, activity, onClosed }: Props) {
       onClosed={onClosed}
       HeaderComponent={
         <Header
-          right={
-            <ActionButton onPress={closeModal} label={t('common.close')} />
-          }
           center={<Text type="subtitle2">{t('activity.details.title')}</Text>}
         />
       }>

src/screens/tabs/Profile/modals/CreateEditAccount/index.tsx

@@ -25,7 +25,6 @@ import styles from './styles';
 
 interface Props {
   modalRef: RefObject<Modalize>;
-  accountsModalRef?: RefObject<Modalize>;
   account?: Wallet;
   pem?: string;
   createImportModalRef?: RefObject<Modalize>;
@@ -34,7 +33,6 @@ interface Props {
 const CreateEditAccount = ({
   modalRef,
   account,
-  accountsModalRef,
   pem,
   createImportModalRef,
 }: Props) => {
@@ -78,7 +76,7 @@ const CreateEditAccount = ({
     if (createImportModalRef) {
       createImportModalRef.current?.close();
     }
-    modalRef.current?.close();
+    handleBack();
   };
 
   const resetState = () => {
@@ -101,27 +99,23 @@ const CreateEditAccount = ({
     }
   }, [account]);
 
-  const closeModal = () => {
-    accountsModalRef?.current?.close();
-  };
-
   const handleBack = () => {
+    Keyboard.dismiss();
     modalRef?.current?.close();
   };
 
-  const handleClose = () => {
-    if (!account) {
-      resetState();
-    }
-  };
-
   return (
-    <Modal adjustToContentHeight modalRef={modalRef} onClose={handleClose}>
-      <Header
-        right={<ActionButton onPress={closeModal} label={t('common.close')} />}
-        left={<ActionButton onPress={handleBack} label={t('common.back')} />}
-        center={<Text type="subtitle2">{title}</Text>}
-      />
+    <Modal
+      adjustToContentHeight
+      modalRef={modalRef}
+      onClose={Keyboard.dismiss}
+      onClosed={resetState}
+      HeaderComponent={
+        <Header
+          left={<ActionButton onPress={handleBack} label={t('common.back')} />}
+          center={<Text type="subtitle2">{title}</Text>}
+        />
+      }>
       <View style={styles.content}>
         <View>
           <UserIcon