diff --git a/apps/mobile-wallet/src/components/AddressFlatListScreen.tsx b/apps/mobile-wallet/src/components/AddressFlatListScreen.tsx index fce0ab9d3..a87a3311d 100644 --- a/apps/mobile-wallet/src/components/AddressFlatListScreen.tsx +++ b/apps/mobile-wallet/src/components/AddressFlatListScreen.tsx @@ -31,12 +31,7 @@ export interface AddressFlatListScreenProps extends Partial { +const AddressFlatListScreen = ({ onAddressPress, selectedAddress, ...props }: AddressFlatListScreenProps) => { const addresses = useAppSelector(selectAllAddresses) return ( diff --git a/apps/mobile-wallet/src/components/NFTsGrid.tsx b/apps/mobile-wallet/src/components/NFTsGrid.tsx index 6f34c5015..c1779c956 100644 --- a/apps/mobile-wallet/src/components/NFTsGrid.tsx +++ b/apps/mobile-wallet/src/components/NFTsGrid.tsx @@ -72,7 +72,6 @@ const NFTsGrid = forwardRef( contentContainerStyle={{ paddingHorizontal: containerHorizontalPadding, paddingBottom: 70 }} numColumns={columns} estimatedItemSize={props.estimatedItemSize || 64} - scrollEnabled={scrollEnabled} ListEmptyComponent={ {isLoadingNfts ? ( diff --git a/apps/mobile-wallet/src/components/Row.tsx b/apps/mobile-wallet/src/components/Row.tsx index ae86dc140..9b3f35b3c 100644 --- a/apps/mobile-wallet/src/components/Row.tsx +++ b/apps/mobile-wallet/src/components/Row.tsx @@ -27,13 +27,11 @@ import { INPUTS_HEIGHT, INPUTS_PADDING } from '~/style/globalStyle' export interface RowProps { children?: ReactNode - isInput?: boolean isSecondary?: boolean title?: string titleColor?: AppTextProps['color'] subtitle?: string onPress?: () => void - hasRightContent?: boolean truncate?: boolean noMaxWidth?: boolean transparent?: boolean @@ -103,37 +101,19 @@ const Row = ({ } export default styled(Row)` - ${({ theme, isInput, isSecondary, transparent, isLast, isVertical }) => - isInput - ? css` - justify-content: center; - min-height: ${INPUTS_HEIGHT}px; - height: ${INPUTS_HEIGHT}px; - padding: 0 ${INPUTS_PADDING}px; - background-color: ${transparent ? 'transparent' : isSecondary ? theme.bg.accent : theme.bg.highlight}; - ` - : css` - min-height: ${INPUTS_HEIGHT}px; - padding: 16px 0; - border-bottom-width: ${isLast ? 0 : 1}px; - border-bottom-color: ${theme.border.secondary}; - - ${!isVertical && - css` - flex-direction: row; - align-items: center; - justify-content: space-between; - `} - `} + ${({ theme, isLast, isVertical }) => css` + min-height: ${INPUTS_HEIGHT}px; + padding: 16px 0; + border-bottom-width: ${isLast ? 0 : 1}px; + border-bottom-color: ${theme.border.secondary}; - ${({ isInput, hasRightContent }) => - isInput && - hasRightContent && + ${!isVertical && css` flex-direction: row; align-items: center; justify-content: space-between; `} + `} ` const Subtitle = styled(AppText)` diff --git a/apps/mobile-wallet/src/components/inputs/Input.tsx b/apps/mobile-wallet/src/components/inputs/Input.tsx index 351feceb2..ff4b0b68e 100644 --- a/apps/mobile-wallet/src/components/inputs/Input.tsx +++ b/apps/mobile-wallet/src/components/inputs/Input.tsx @@ -21,22 +21,12 @@ import { getStringAsync } from 'expo-clipboard' import { LinearGradient } from 'expo-linear-gradient' import { ReactNode, RefObject, useEffect, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' -import { - NativeSyntheticEvent, - StyleProp, - TextInput, - TextInputFocusEventData, - TextInputProps, - ViewProps, - ViewStyle -} from 'react-native' -import Animated, { AnimatedProps, FadeIn, FadeOut, useAnimatedStyle, withSpring } from 'react-native-reanimated' +import { StyleProp, TextInput, TextInputProps, ViewProps, ViewStyle } from 'react-native' +import Animated, { AnimatedProps, FadeIn, FadeOut } from 'react-native-reanimated' import styled, { css, useTheme } from 'styled-components/native' -import { fastSpringConfiguration } from '~/animations/reanimated/reanimatedAnimations' import AppText from '~/components/AppText' import Button from '~/components/buttons/Button' -import Row from '~/components/Row' import { BORDER_RADIUS } from '~/style/globalStyle' export type InputValue = string | number | undefined | unknown @@ -74,7 +64,6 @@ const Input = ({ }: InputProps) => { const { t } = useTranslation() const theme = useTheme() - const [isActive, setIsActive] = useState(false) const [copiedText, setCopiedText] = useState('') const localInputRef = useRef(null) const usedInputRef = inputRef || localInputRef @@ -82,14 +71,6 @@ const Input = ({ const renderedValue = renderValue ? renderValue(value) : value ? (value as object).toString() : '' const showCustomValueRendering = typeof renderedValue !== 'string' && renderedValue !== undefined - const labelStyle = useAnimatedStyle(() => ({ - bottom: withSpring(!isActive ? 0 : 30, fastSpringConfiguration) - })) - - const labelTextStyle = useAnimatedStyle(() => ({ - fontSize: withSpring(!isActive ? 15 : 11, fastSpringConfiguration) - })) - useEffect(() => { const fetchCopiedText = async () => { const text = await getStringAsync() @@ -99,53 +80,21 @@ const Input = ({ fetchCopiedText() }) - useEffect(() => { - if (renderedValue) { - setIsActive(true) - } - }, [renderedValue]) - - const handleFocus = (e: NativeSyntheticEvent) => { - setIsActive(true) - onFocus && onFocus(e) - } - - const handleBlur = (e: NativeSyntheticEvent) => { - !renderedValue && setIsActive(false) - onBlur && onBlur(e) - } - const handlePasteButtonPress = () => { usedInputRef.current?.setNativeProps({ text: copiedText }) } return ( - + - {showCustomValueRendering && {renderedValue}} ({ {error} )} - + ) } -export default styled(Input)` - background-color: ${({ theme }) => theme.bg.highlight}; +export default Input + +const InputStyled = styled.Pressable` + background-color: ${({ theme }) => theme.bg.primary}; border-radius: ${BORDER_RADIUS}px; + padding: 18px; ` const InputContainer = styled.View` @@ -191,7 +143,6 @@ const InputContainer = styled.View` const TextInputStyled = styled.TextInput<{ hide?: boolean }>` height: 100%; - padding-top: 12px; color: ${({ theme }) => theme.font.primary}; font-size: 15px; @@ -202,18 +153,6 @@ const TextInputStyled = styled.TextInput<{ hide?: boolean }>` `} ` -const Label = styled(Animated.View)` - position: absolute; - top: 0; - bottom: 0; - left: 0; - justify-content: center; -` - -const LabelText = styled(Animated.Text)` - color: ${({ theme }) => theme.font.secondary}; -` - const CustomRenderedValue = styled.View` position: absolute; top: 0; diff --git a/apps/mobile-wallet/src/components/layout/Screen.tsx b/apps/mobile-wallet/src/components/layout/Screen.tsx index 78f201190..083759221 100644 --- a/apps/mobile-wallet/src/components/layout/Screen.tsx +++ b/apps/mobile-wallet/src/components/layout/Screen.tsx @@ -102,7 +102,7 @@ export const ModalScreenTitle = styled(AppText)` ` export const ScreenSectionTitle = styled(AppText)` - font-size: 14px; + font-size: 13px; font-weight: 700; color: ${({ theme }) => theme.font.tertiary}; margin-bottom: 16px; diff --git a/apps/mobile-wallet/src/components/layout/ScrollScreen.tsx b/apps/mobile-wallet/src/components/layout/ScrollScreen.tsx index 527c368d7..97facdf77 100644 --- a/apps/mobile-wallet/src/components/layout/ScrollScreen.tsx +++ b/apps/mobile-wallet/src/components/layout/ScrollScreen.tsx @@ -114,7 +114,7 @@ const ScrollScreen = ({ contentContainerStyle={[ { flexGrow: fill ? 1 : undefined, - paddingTop: typeof contentPaddingTop === 'boolean' ? 120 : contentPaddingTop + paddingTop: typeof contentPaddingTop === 'boolean' ? 110 : contentPaddingTop }, contentContainerStyle ]} diff --git a/apps/mobile-wallet/src/features/nftsDisplay/NftModal.tsx b/apps/mobile-wallet/src/features/nftsDisplay/NftModal.tsx index 845b37a2d..5aa58a957 100644 --- a/apps/mobile-wallet/src/features/nftsDisplay/NftModal.tsx +++ b/apps/mobile-wallet/src/features/nftsDisplay/NftModal.tsx @@ -24,8 +24,9 @@ import styled from 'styled-components/native' import AppText from '~/components/AppText' import Button from '~/components/buttons/Button' -import { ScreenSection } from '~/components/layout/Screen' +import Surface from '~/components/layout/Surface' import NFTImage, { NFTImageProps } from '~/components/NFTImage' +import Row from '~/components/Row' import BottomModal from '~/features/modals/BottomModal' import withModal from '~/features/modals/withModal' import { useAppSelector } from '~/hooks/redux' @@ -33,10 +34,8 @@ import { BORDER_RADIUS_SMALL, DEFAULT_MARGIN } from '~/style/globalStyle' type NftModalProps = Pick -const attributeGap = 12 const windowWidth = Dimensions.get('window').width const nftFullSize = windowWidth - DEFAULT_MARGIN * 4 -const attributeWidth = (nftFullSize - attributeGap) / 2 const NftModal = withModal(({ id, nftId }) => { const nft = useAppSelector((s) => selectNFTById(s, nftId)) @@ -44,38 +43,33 @@ const NftModal = withModal(({ id, nftId }) => { if (!nft) return null + const attributes = nft.attributes + return ( - - - - - - {nft.description && ( - - - {nft.description} - - - )} - {nft.attributes && nft.attributes.length > 0 && ( - - {nft.attributes.map((attribute) => ( - - - {attribute.trait_type} - - {attribute.value} - - ))} - - )} - + + + + + {nft.description && ( + + + {nft.description} + + + )} + {attributes && attributes.length > 0 && ( + + {attributes.map((attribute, i) => ( + + {attribute.value} + + ))} + + )} {!nft.image.startsWith('data:image/') && ( - -