From db4be1c435a67765e2e05b7f38896941728a8113 Mon Sep 17 00:00:00 2001 From: nachosan Date: Wed, 16 Nov 2022 12:26:35 -0300 Subject: [PATCH 1/4] Catching error when user closes file picker, some ui changes in import modals, clearing state of modals when closed --- ios/Podfile.lock | 8 +-- src/screens/tabs/Profile/index.tsx | 4 +- .../tabs/Profile/modals/Accounts/index.tsx | 30 ++++++---- .../tabs/Profile/modals/Accounts/styles.ts | 1 - .../Profile/modals/ActivityDetail/index.tsx | 12 +--- .../modals/CreateEditAccount/index.tsx | 32 ++++------ .../modals/CreateImportAccount/index.tsx | 59 ++++++++----------- .../tabs/Profile/modals/ImportKey/index.tsx | 24 ++++---- .../tabs/Profile/modals/ImportKey/styles.ts | 3 +- 9 files changed, 74 insertions(+), 99 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 8da32629..559b9a20 100644 --- a/ios/Podfile.lock +++ b/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 diff --git a/src/screens/tabs/Profile/index.tsx b/src/screens/tabs/Profile/index.tsx index 2e494d76..ba8f84ca 100644 --- a/src/screens/tabs/Profile/index.tsx +++ b/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) { +function Profile({ navigation }: RootScreenProps) { const accountsModalRef = useRef(null); const activityDetailModalRef = useRef(null); const transactionListRef = useRef(null); diff --git a/src/screens/tabs/Profile/modals/Accounts/index.tsx b/src/screens/tabs/Profile/modals/Accounts/index.tsx index 282f5859..5bdfdd8a 100644 --- a/src/screens/tabs/Profile/modals/Accounts/index.tsx +++ b/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(undefined); - const [selectedAccount, setSelectedAccount] = - useState>(null); + const [actionSheetData, setActionSheetData] = useState(); + const [selectedAccount, setSelectedAccount] = useState(); const addICNSRef = useRef(null); const actionSheetRef = useRef(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 ( <> - -
{t('accounts.title')}} /> + {t('accounts.title')}} + /> + }> {loading && ( @@ -226,13 +236,9 @@ function Accounts({ modalRef }: Props) { - + 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={
- } center={{t('activity.details.title')}} /> }> diff --git a/src/screens/tabs/Profile/modals/CreateEditAccount/index.tsx b/src/screens/tabs/Profile/modals/CreateEditAccount/index.tsx index 2a049d0c..33d99ea1 100644 --- a/src/screens/tabs/Profile/modals/CreateEditAccount/index.tsx +++ b/src/screens/tabs/Profile/modals/CreateEditAccount/index.tsx @@ -25,7 +25,6 @@ import styles from './styles'; interface Props { modalRef: RefObject; - accountsModalRef?: RefObject; account?: Wallet; pem?: string; createImportModalRef?: RefObject; @@ -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 ( - -
} - left={} - center={{title}} - /> + } + center={{title}} + /> + }> ; - accountsModalRef: RefObject; } -function CreateImportAccount({ accountsModalRef, modalRef }: Props) { +function CreateImportAccount({ modalRef }: Props) { const [pemFile, setPemFile] = useStateWithCallback(''); const createAccountRef = useRef(null); const importKeyRef = useRef(null); - const closeModal = () => { - accountsModalRef?.current?.close(); - }; - - const handleBack = () => { - modalRef?.current?.close(); - }; - const openCreateAccountModal = () => { createAccountRef?.current?.open(); }; @@ -50,10 +35,12 @@ function CreateImportAccount({ accountsModalRef, modalRef }: Props) { const type = isIos ? 'public.x509-certificate' : ['.pem', 'application/x-pem-file']; - const res = await DocumentPicker.pickSingle({ type }); - - const stringifyPEM = await FileSystem.readFile(res.uri); - setPemFile(stringifyPEM, openCreateAccountModal); + DocumentPicker.pickSingle({ type }) + .then(async res => { + const stringifyPEM = await FileSystem.readFile(res.uri); + setPemFile(stringifyPEM, openCreateAccountModal); + }) + .catch(() => {}); }; const renderButton = ({ id, title, onPress, icon, colors }: Button) => ( @@ -71,27 +58,29 @@ function CreateImportAccount({ accountsModalRef, modalRef }: Props) { openImportKeyModal, }); + const resetState = () => { + setPemFile(''); + }; + return ( - -
} - left={} - center={ - {t('accounts.createImportAccount')} - } - /> + {t('accounts.createImportAccount')} + } + /> + }> {buttons.map(renderButton)} - + ); } diff --git a/src/screens/tabs/Profile/modals/ImportKey/index.tsx b/src/screens/tabs/Profile/modals/ImportKey/index.tsx index 791f9b68..445f3977 100644 --- a/src/screens/tabs/Profile/modals/ImportKey/index.tsx +++ b/src/screens/tabs/Profile/modals/ImportKey/index.tsx @@ -21,7 +21,6 @@ import styles from './styles'; interface Props { modalRef: RefObject; createImportRef: RefObject; - accountsModalRef: RefObject; } const getErrorMessage = (errorType: string) => { @@ -33,7 +32,7 @@ const getErrorMessage = (errorType: string) => { } }; -function ImportKey({ createImportRef, modalRef, accountsModalRef }: Props) { +function ImportKey({ createImportRef, modalRef }: Props) { const dispatch = useAppDispatch(); const createEditAccount = useRef(null); @@ -50,11 +49,6 @@ function ImportKey({ createImportRef, modalRef, accountsModalRef }: Props) { setKey(value); }; - const closeModal = () => { - createImportRef?.current?.close(); - accountsModalRef?.current?.close(); - }; - const handleBack = () => { modalRef?.current?.close(); }; @@ -77,12 +71,15 @@ function ImportKey({ createImportRef, modalRef, accountsModalRef }: Props) { }; return ( - -
} - left={} - center={{t('common.importWallet')}} - /> + } + center={{t('common.importWallet')}} + /> + }> diff --git a/src/screens/tabs/Profile/modals/ImportKey/styles.ts b/src/screens/tabs/Profile/modals/ImportKey/styles.ts index 9972aef0..4fa446f7 100644 --- a/src/screens/tabs/Profile/modals/ImportKey/styles.ts +++ b/src/screens/tabs/Profile/modals/ImportKey/styles.ts @@ -6,7 +6,8 @@ export default StyleSheet.create({ container: { flex: 1, paddingHorizontal: 24, - paddingVertical: 32, + paddingBottom: 32, + paddingTop: 8, }, inputStyle: { width: '100%', From 5a059a1113e222aa32c3bf7e8c4e052dfbf3d916 Mon Sep 17 00:00:00 2001 From: nachosan Date: Thu, 17 Nov 2022 11:19:54 -0300 Subject: [PATCH 2/4] Solved ui issues with ICNS nfts --- .../NftDisplayer/components/ICNSDisplayer/index.tsx | 2 +- .../NftDisplayer/components/ICNSDisplayer/styles.ts | 9 ++++++--- src/config/logs.ts | 2 ++ src/screens/tabs/NFTs/screens/NftDetail/index.tsx | 2 +- src/screens/tabs/NFTs/screens/NftList/index.tsx | 8 +++----- src/screens/tabs/NFTs/screens/NftList/styles.ts | 6 ------ src/screens/tabs/components/NftItem/index.tsx | 3 +++ 7 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/components/common/NftDisplayer/components/ICNSDisplayer/index.tsx b/src/components/common/NftDisplayer/components/ICNSDisplayer/index.tsx index 05f00ebe..3cf59487 100644 --- a/src/components/common/NftDisplayer/components/ICNSDisplayer/index.tsx +++ b/src/components/common/NftDisplayer/components/ICNSDisplayer/index.tsx @@ -15,7 +15,7 @@ function ICNSDisplayer({ ICNSName, size = 'small' }: Props) { const isBigSize = size === 'big'; return ( - + {}; + console.error = () => {}; + console.warn = () => {}; } export default {}; diff --git a/src/screens/tabs/NFTs/screens/NftDetail/index.tsx b/src/screens/tabs/NFTs/screens/NftDetail/index.tsx index fd6fb5a0..38964a5c 100644 --- a/src/screens/tabs/NFTs/screens/NftDetail/index.tsx +++ b/src/screens/tabs/NFTs/screens/NftDetail/index.tsx @@ -129,7 +129,7 @@ function NftDetail({ route, navigation }: ModalScreenProps) { diff --git a/src/screens/tabs/NFTs/screens/NftList/index.tsx b/src/screens/tabs/NFTs/screens/NftList/index.tsx index 327d3557..22b520a6 100644 --- a/src/screens/tabs/NFTs/screens/NftList/index.tsx +++ b/src/screens/tabs/NFTs/screens/NftList/index.tsx @@ -31,17 +31,15 @@ function NftList({ route, navigation }: ModalScreenProps) { 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 ( handleItemPress(item)} containerStyle={styles.itemContainer} - itemStyle={styles.itemStyle} canisterId={item.canister} itemId={item.index} /> diff --git a/src/screens/tabs/NFTs/screens/NftList/styles.ts b/src/screens/tabs/NFTs/screens/NftList/styles.ts index 61a8989d..92819078 100644 --- a/src/screens/tabs/NFTs/screens/NftList/styles.ts +++ b/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, - }, }); diff --git a/src/screens/tabs/components/NftItem/index.tsx b/src/screens/tabs/components/NftItem/index.tsx index ea431ac7..9a45f93c 100644 --- a/src/screens/tabs/components/NftItem/index.tsx +++ b/src/screens/tabs/components/NftItem/index.tsx @@ -18,6 +18,7 @@ interface Props { itemStyle?: StyleProp; title?: string; subtitle?: string; + ICNSName?: string; } function NftItem({ @@ -30,6 +31,7 @@ function NftItem({ itemStyle, canisterId, itemId, + ICNSName, }: Props) { const type = useGetType(url); return ( @@ -42,6 +44,7 @@ function NftItem({ paused canisterId={canisterId} itemId={itemId} + ICNSName={ICNSName} /> {title && ( Date: Thu, 17 Nov 2022 15:43:59 -0300 Subject: [PATCH 3/4] Solved more button disabled issue, added manage button for icns token --- src/components/buttons/Button/index.tsx | 3 +-- src/components/buttons/RainbowButton/index.tsx | 5 +---- src/screens/tabs/NFTs/screens/NftDetail/index.tsx | 14 ++++++++++++-- src/translations/en/index.js | 1 + 4 files changed, 15 insertions(+), 8 deletions(-) diff --git a/src/components/buttons/Button/index.tsx b/src/components/buttons/Button/index.tsx index bf1cacbe..9762c9d5 100644 --- a/src/components/buttons/Button/index.tsx +++ b/src/components/buttons/Button/index.tsx @@ -41,7 +41,6 @@ const Button = ({ disableAnimation = false, loading = false, iconProps, - ...props }: Props) => { return ( - + {loading ? ( ) : ( diff --git a/src/components/buttons/RainbowButton/index.tsx b/src/components/buttons/RainbowButton/index.tsx index b88db528..030a57ed 100644 --- a/src/components/buttons/RainbowButton/index.tsx +++ b/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}> + {...(disabledOrLoading ? DisabledRainbow : Rainbow)}>