Skip to content

feat: Add NFTs full page #21647

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 17 commits into
base: main
Choose a base branch
from
Open

feat: Add NFTs full page #21647

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
7622334
Added NFTsFullView page
brianacnguyen Oct 24, 2025
96875e5
Removed unnecessary additions
brianacnguyen Oct 24, 2025
4a5167a
Added maxitems to nftgrid
brianacnguyen Oct 26, 2025
83a52a9
Reorgs nft folder structures
brianacnguyen Oct 26, 2025
b34b57f
Updated tests
brianacnguyen Oct 27, 2025
391dd20
Updated snapshots
brianacnguyen Oct 27, 2025
42ac14a
Reorg Nft structure
brianacnguyen Oct 27, 2025
170be7e
Added test ids to nftgrid
brianacnguyen Oct 27, 2025
08039c9
Reverted unnecessary changes
brianacnguyen Oct 27, 2025
28f2ad3
Removed more unnecessary changes
brianacnguyen Oct 27, 2025
fa8cbbb
Reverted more unnecessary changes
brianacnguyen Oct 27, 2025
19d5b4c
Removed double padding
brianacnguyen Oct 27, 2025
28a2808
Merge branch 'main' of https://github.com/MetaMask/metamask-mobile in…
brianacnguyen Oct 27, 2025
fc3572e
Updated AddAsset tests
brianacnguyen Oct 27, 2025
baf5396
Updated addasset tests
brianacnguyen Oct 27, 2025
549e2fa
Updated NftGrid tests
brianacnguyen Oct 27, 2025
92ee691
Merge branch 'main' into feat/nfts-full-page
brianacnguyen Oct 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 11 additions & 5 deletions app/components/Nav/Main/MainNavigator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import Asset from '../../Views/Asset';
import AssetDetails from '../../Views/AssetDetails';
import AddAsset from '../../Views/AddAsset';
import Collectible from '../../Views/Collectible';
import NftsFullView from '../../Views/NftsFullView';
import SendLegacy from '../../Views/confirmations/legacy/Send';
import SendTo from '../../Views/confirmations/legacy/SendFlow/SendTo';
import { RevealPrivateCredential } from '../../Views/RevealPrivateCredential';
Expand Down Expand Up @@ -196,11 +197,6 @@ const WalletTabStackFlow = () => (
component={WalletModalFlow}
options={{ headerShown: false }}
/>
<Stack.Screen
name="AddAsset"
component={AddAsset}
options={AddAsset.navigationOptions}
/>
<Stack.Screen
name="Collectible"
component={Collectible}
Expand Down Expand Up @@ -943,6 +939,11 @@ const MainNavigator = () => {
}}
/>
<Stack.Screen name="Home" component={HomeTabs} />
<Stack.Screen
name="AddAsset"
component={AddAsset}
options={{ headerShown: false }}
/>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needs to be moved out to the main stack to work with the new asset full pages. Additionally, it should not have the bottom nav

{isRewardsEnabled && (
<Stack.Screen
name={Routes.SETTINGS_VIEW}
Expand Down Expand Up @@ -992,6 +993,11 @@ const MainNavigator = () => {
name="NftDetailsFullImage"
component={NftDetailsFullImageModeView}
/>
<Stack.Screen
name={Routes.WALLET.NFTS_FULL_VIEW}
component={NftsFullView}
options={{ headerShown: false }}
/>
<Stack.Screen name="PaymentRequestView" component={PaymentRequestView} />
<Stack.Screen name={Routes.RAMP.BUY}>
{() => <RampRoutes rampType={RampType.BUY} />}
Expand Down
229 changes: 133 additions & 96 deletions app/components/UI/AddCustomCollectible/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,17 @@ import {
Text,
TextInput,
View,
StyleSheet,
TouchableOpacity,
StyleSheet,
} from 'react-native';
import { fontStyles } from '../../../styles/common';
import Engine from '../../../core/Engine';
import { strings } from '../../../../locales/i18n';
import { isValidAddress } from 'ethereumjs-util';
import ActionView from '../ActionView';
import Button, {
ButtonVariants,
ButtonSize,
} from '../../../component-library/components/Buttons/Button';
import { isSmartContractAddress } from '../../../util/transactions';
import Device from '../../../util/device';
import { MetaMetricsEvents } from '../../../core/Analytics';
Expand Down Expand Up @@ -51,7 +54,7 @@ const createStyles = (colors: any) =>
flex: 1,
},
rowWrapper: {
padding: 20,
marginBottom: 20,
},
rowTitleText: {
paddingBottom: 3,
Expand Down Expand Up @@ -100,6 +103,25 @@ const createStyles = (colors: any) =>
buttonIcon: {
marginLeft: 16,
},
contentContainer: {
flex: 1,
},
scrollView: {
flex: 1,
padding: 20,
},
buttonContainer: {
flexDirection: 'row',
paddingVertical: 16,
paddingHorizontal: 16,
gap: 16,
backgroundColor: colors.background.default,
borderTopWidth: 1,
borderTopColor: colors.border.muted,
},
button: {
flex: 1,
},
});

interface AddCustomCollectibleProps {
Expand Down Expand Up @@ -292,105 +314,120 @@ const AddCustomCollectible = ({

return (
<View style={styles.wrapper} testID={NFTImportScreenSelectorsIDs.CONTAINER}>
<ActionView
cancelText={strings('add_asset.collectibles.cancel_add_collectible')}
confirmText={strings('add_asset.collectibles.add_collectible')}
onCancelPress={cancelAddCollectible}
onConfirmPress={addNft}
confirmDisabled={!address || !tokenId || !selectedNetwork}
loading={loading}
confirmTestID={'add-collectible-button'}
>
<View>
<View style={styles.rowWrapper}>
<TouchableOpacity
style={styles.networkSelectorContainer}
onPress={() => setOpenNetworkSelector(true)}
onLongPress={() => setOpenNetworkSelector(true)}
>
<Text style={styles.networkSelectorText}>
{selectedNetwork || strings('networks.select_network')}
</Text>
<View style={styles.contentContainer}>
<View style={styles.scrollView}>
<View>
<View style={styles.rowWrapper}>
<TouchableOpacity
style={styles.networkSelectorContainer}
onPress={() => setOpenNetworkSelector(true)}
onLongPress={() => setOpenNetworkSelector(true)}
>
<Text style={styles.networkSelectorText}>
{selectedNetwork || strings('networks.select_network')}
</Text>

<View style={styles.overlappingAvatarsContainer}>
{selectedNetwork ? (
<Avatar
variant={AvatarVariant.Network}
size={AvatarSize.Sm}
name={selectedNetwork}
imageSource={getNetworkImageSource({
networkType: 'evm',
chainId: networkId,
})}
<View style={styles.overlappingAvatarsContainer}>
{selectedNetwork ? (
<Avatar
variant={AvatarVariant.Network}
size={AvatarSize.Sm}
name={selectedNetwork}
imageSource={getNetworkImageSource({
networkType: 'evm',
chainId: networkId,
})}
testID={ImportTokenViewSelectorsIDs.SELECT_NETWORK_BUTTON}
/>
) : null}

<ButtonIcon
iconName={IconName.ArrowDown}
iconColor={IconColor.Default}
testID={ImportTokenViewSelectorsIDs.SELECT_NETWORK_BUTTON}
onPress={() => setOpenNetworkSelector(true)}
accessibilityRole="button"
style={styles.buttonIcon}
/>
) : null}

<ButtonIcon
iconName={IconName.ArrowDown}
iconColor={IconColor.Default}
testID={ImportTokenViewSelectorsIDs.SELECT_NETWORK_BUTTON}
onPress={() => setOpenNetworkSelector(true)}
accessibilityRole="button"
style={styles.buttonIcon}
/>
</View>
</TouchableOpacity>
</View>
</TouchableOpacity>

<Text style={styles.rowTitleText}>
{strings('collectible.collectible_address')}
</Text>
<TextInput
style={[
styles.textInput,
inputWidth ? { width: inputWidth } : {},
]}
placeholder={'0x...'}
placeholderTextColor={colors.text.muted}
value={address}
onChangeText={onAddressChange}
onBlur={validateCustomCollectibleAddress}
testID={NFTImportScreenSelectorsIDs.ADDRESS_INPUT_BOX}
onSubmitEditing={jumpToAssetTokenId}
keyboardAppearance={themeAppearance}
/>
<Text
style={styles.warningText}
testID={NFTImportScreenSelectorsIDs.ADDRESS_WARNING_MESSAGE}
>
{warningAddress}
</Text>
</View>
<View style={styles.rowWrapper}>
<Text style={styles.rowTitleText}>
{strings('collectible.collectible_token_id')}
</Text>
<TextInput
style={[
styles.textInput,
inputWidth ? { width: inputWidth } : {},
]}
value={tokenId}
keyboardType="numeric"
onChangeText={onTokenIdChange}
onBlur={validateCustomCollectibleTokenId}
testID={NFTImportScreenSelectorsIDs.IDENTIFIER_INPUT_BOX}
ref={assetTokenIdInput}
onSubmitEditing={addNft}
returnKeyType={'done'}
placeholder={strings('collectible.id_placeholder')}
placeholderTextColor={colors.text.muted}
keyboardAppearance={themeAppearance}
/>
<Text
style={styles.warningText}
testID={NFTImportScreenSelectorsIDs.IDENTIFIER_WARNING_MESSAGE}
>
{warningTokenId}
</Text>
<Text style={styles.rowTitleText}>
{strings('collectible.collectible_address')}
</Text>
<TextInput
style={[
styles.textInput,
inputWidth ? { width: inputWidth } : {},
]}
placeholder={'0x...'}
placeholderTextColor={colors.text.muted}
value={address}
onChangeText={onAddressChange}
onBlur={validateCustomCollectibleAddress}
testID={NFTImportScreenSelectorsIDs.ADDRESS_INPUT_BOX}
onSubmitEditing={jumpToAssetTokenId}
keyboardAppearance={themeAppearance}
/>
<Text
style={styles.warningText}
testID={NFTImportScreenSelectorsIDs.ADDRESS_WARNING_MESSAGE}
>
{warningAddress}
</Text>
</View>
<View style={styles.rowWrapper}>
<Text style={styles.rowTitleText}>
{strings('collectible.collectible_token_id')}
</Text>
<TextInput
style={[
styles.textInput,
inputWidth ? { width: inputWidth } : {},
]}
value={tokenId}
keyboardType="numeric"
onChangeText={onTokenIdChange}
onBlur={validateCustomCollectibleTokenId}
testID={NFTImportScreenSelectorsIDs.IDENTIFIER_INPUT_BOX}
ref={assetTokenIdInput}
onSubmitEditing={addNft}
returnKeyType={'done'}
placeholder={strings('collectible.id_placeholder')}
placeholderTextColor={colors.text.muted}
keyboardAppearance={themeAppearance}
/>
<Text
style={styles.warningText}
testID={NFTImportScreenSelectorsIDs.IDENTIFIER_WARNING_MESSAGE}
>
{warningTokenId}
</Text>
</View>
</View>
</View>
</ActionView>
</View>

{/* CTA Buttons at bottom */}
<View style={styles.buttonContainer}>
<Button
variant={ButtonVariants.Secondary}
size={ButtonSize.Lg}
label={strings('add_asset.collectibles.cancel_add_collectible')}
onPress={cancelAddCollectible}
style={styles.button}
/>
<Button
variant={ButtonVariants.Primary}
size={ButtonSize.Lg}
label={strings('add_asset.collectibles.add_collectible')}
onPress={addNft}
isDisabled={!address || !tokenId || !selectedNetwork}
loading={loading}
testID={'add-collectible-button'}
style={styles.button}
/>
</View>
</View>
);
};
Expand Down
2 changes: 1 addition & 1 deletion app/components/UI/CollectibleMedia/CollectibleMedia.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const styleSheet = (params: {
textContainer: {
alignItems: 'center',
justifyContent: 'flex-start',
backgroundColor: colors.background.alternative,
backgroundColor: colors.background.section,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated based on design

borderRadius: 8,
},
textWrapper: {
Expand Down
Loading
Loading