Skip to content
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

Jump to bottom

Revert "Collectibles enhancements" #3005

Merged
merged 2 commits into from
Aug 12, 2021
Merged

Revert "Collectibles enhancements" #3005

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c773ff6
Revert "Collectibles enhancements (#2735)"
sethkfman Aug 12, 2021
09fb6ef
Merge branch 'develop' into revert-2735-collectibles-enhancements
sethkfman Aug 12, 2021
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
131 changes: 73 additions & 58 deletions app/components/UI/CollectibleContracts/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ exports[`CollectibleContracts should render correctly 1`] = `
"flex": 1,
"justifyContent": "center",
"marginBottom": 42,
"marginHorizontal": 56,
}
}
>
Expand All @@ -41,15 +40,16 @@ exports[`CollectibleContracts should render correctly 1`] = `
}
style={
Object {
"height": 47,
"width": 47,
"height": 76,
"marginBottom": 12,
"width": 76,
}
}
/>
<Text
black={false}
blue={false}
bold={false}
bold={true}
center={true}
centered={false}
disclaimer={false}
Expand All @@ -63,91 +63,103 @@ exports[`CollectibleContracts should render correctly 1`] = `
small={false}
strikethrough={false}
style={
Array [
Object {
"color": "#bbc0c5",
"fontSize": 24,
},
Object {
"marginVertical": 8,
},
]
Object {
"color": "#bbc0c5",
"fontSize": 24,
}
}
underline={false}
upper={false}
>
No NFTs to show
No NFTs yet
</Text>
<Text
big={true}
black={false}
blue={false}
bold={false}
center={true}
centered={false}
disclaimer={false}
green={false}
link={false}
link={true}
modal={false}
onPress={[Function]}
primary={false}
red={false}
reset={false}
right={false}
small={false}
strikethrough={false}
style={
Array [
Object {
"color": "#bbc0c5",
"textAlign": "center",
},
Object {
"marginVertical": 8,
},
]
}
underline={false}
upper={false}
>
Your NFTs will show up here. If you don’t see your NFT, try importing manually.
Learn more
</Text>
<StyledButton
containerStyle={
Array [
Object {
"flex": 1,
},
Object {
"marginVertical": 8,
},
]
}
disabledContainerStyle={
Object {
"opacity": 0.6,
}
</View>
<Text
big={true}
black={false}
blue={false}
bold={false}
centered={false}
disclaimer={false}
green={false}
link={false}
modal={false}
primary={false}
red={false}
reset={false}
right={false}
small={false}
strikethrough={false}
style={
Object {
"color": "#bbc0c5",
"marginBottom": 8,
}
onPress={[Function]}
styleDisabled={
Object {
"opacity": 0.6,
}
}
underline={false}
upper={false}
>
Don’t see your NFT?
</Text>
</View>
<View
key="collectible-contracts-footer"
style={
Object {
"flex": 1,
"paddingBottom": 30,
}
}
>
<TouchableOpacity
onPress={[Function]}
style={
Object {
"alignItems": "center",
"flexDirection": "row",
"justifyContent": "center",
}
type="blue"
>
Import manually
</StyledButton>
}
testID="add-collectible-button"
>
<Icon
allowFontScaling={false}
color="#037dd6"
name="plus"
size={16}
/>
<Text
big={true}
black={false}
blue={false}
bold={false}
center={true}
centered={false}
disclaimer={false}
green={false}
link={true}
link={false}
modal={false}
onPress={[Function]}
primary={false}
red={false}
reset={false}
Expand All @@ -156,15 +168,18 @@ exports[`CollectibleContracts should render correctly 1`] = `
strikethrough={false}
style={
Object {
"marginVertical": 8,
"color": "#037dd6",
"fontFamily": "EuclidCircularB-Regular",
"fontSize": 15,
"fontWeight": "400",
}
}
underline={false}
upper={false}
>
Learn more
ADD NFTs
</Text>
</View>
</TouchableOpacity>
</View>
</View>
`;
59 changes: 22 additions & 37 deletions app/components/UI/CollectibleContracts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,14 @@ import PropTypes from 'prop-types';
import { TouchableOpacity, StyleSheet, View, InteractionManager, Image } from 'react-native';
import { connect } from 'react-redux';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { baseStyles, colors, fontStyles } from '../../../styles/common';
import { colors, fontStyles } from '../../../styles/common';
import { strings } from '../../../../locales/i18n';
import CollectibleContractElement from '../CollectibleContractElement';
import Analytics from '../../../core/Analytics';
import { ANALYTICS_EVENT_OPTS } from '../../../util/analytics';
import { favoritesCollectiblesObjectSelector } from '../../../reducers/collectibles';
import Text from '../../Base/Text';
import AppConstants from '../../../core/AppConstants';
import StyledButton from '../StyledButton';
import { toLowerCaseEquals } from '../../../util/general';

const styles = StyleSheet.create({
Expand Down Expand Up @@ -43,24 +42,21 @@ const styles = StyleSheet.create({
emptyContainer: {
flex: 1,
marginBottom: 42,
marginHorizontal: 56,
justifyContent: 'center',
alignItems: 'center'
},
emptyImageContainer: {
width: 47,
height: 47
width: 76,
height: 76,
marginBottom: 12
},
emptyTitleText: {
fontSize: 24,
color: colors.grey200
},
emptyText: {
color: colors.grey200,
textAlign: 'center'
},
emptySectionText: {
marginVertical: 8
marginBottom: 8
}
});

Expand All @@ -76,23 +72,20 @@ const CollectibleContracts = ({ collectibleContracts, collectibles, navigation,
[navigation]
);

const goToAddCollectible = useCallback(() => {
const goToAddCollectible = () => {
navigation.push('AddAsset', { assetType: 'collectible' });
InteractionManager.runAfterInteractions(() => {
Analytics.trackEvent(ANALYTICS_EVENT_OPTS.WALLET_ADD_COLLECTIBLES);
});
}, [navigation]);
};

const renderFooter = useCallback(
() => (
<View style={styles.footer} key={'collectible-contracts-footer'}>
<TouchableOpacity style={styles.add} onPress={goToAddCollectible} testID={'add-collectible-button'}>
<Icon name="plus" size={16} color={colors.blue} />
<Text style={styles.addText}>{strings('wallet.add_collectibles')}</Text>
</TouchableOpacity>
</View>
),
[goToAddCollectible]
const renderFooter = () => (
<View style={styles.footer} key={'collectible-contracts-footer'}>
<TouchableOpacity style={styles.add} onPress={goToAddCollectible} testID={'add-collectible-button'}>
<Icon name="plus" size={16} color={colors.blue} />
<Text style={styles.addText}>{strings('wallet.add_collectibles')}</Text>
</TouchableOpacity>
</View>
);

const renderCollectibleContract = useCallback(
Expand Down Expand Up @@ -137,10 +130,9 @@ const CollectibleContracts = ({ collectibleContracts, collectibles, navigation,
<View>
{renderFavoriteCollectibles()}
<View>{collectibleContracts?.map((item, index) => renderCollectibleContract(item, index))}</View>
{renderFooter()}
</View>
),
[collectibleContracts, renderFavoriteCollectibles, renderCollectibleContract, renderFooter]
[collectibleContracts, renderFavoriteCollectibles, renderCollectibleContract]
);

const goToLearnMore = () =>
Expand All @@ -154,30 +146,23 @@ const CollectibleContracts = ({ collectibleContracts, collectibles, navigation,
source={require('../../../images/no-nfts-placeholder.png')}
resizeMode={'contain'}
/>
<Text center style={[styles.emptyTitleText, styles.emptySectionText]}>
{strings('wallet.no_nfts_to_show')}
</Text>

<Text center style={[styles.emptyText, styles.emptySectionText]}>
{strings('wallet.no_collectibles')}
<Text center style={styles.emptyTitleText} bold>
{strings('wallet.no_nfts_yet')}
</Text>
<StyledButton
type={'blue'}
onPress={goToAddCollectible}
containerStyle={[baseStyles.flexGrow, styles.emptySectionText]}
>
{strings('wallet.manually_import_nfts')}
</StyledButton>
<Text center big link style={styles.emptySectionText} onPress={goToLearnMore}>
<Text center big link onPress={goToLearnMore}>
{strings('wallet.learn_more')}
</Text>
</View>
<Text big style={styles.emptyText}>
{strings('wallet.no_collectibles')}
</Text>
</View>
);

return (
<View style={styles.wrapper} testID={'collectible-contracts'}>
{collectibles.length ? renderList() : renderEmpty()}
{renderFooter()}
</View>
);
};
Expand Down
24 changes: 5 additions & 19 deletions app/components/UI/CollectibleMedia/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,17 +53,7 @@ const styles = StyleSheet.create({
/**
* View that renders an ERC-721 Token image
*/
export default function CollectibleMedia({
collectible,
renderAnimation,
resizeMode,
style,
tiny,
small,
big,
cover,
onClose
}) {
export default function CollectibleMedia({ collectible, renderAnimation, style, tiny, small, big, cover, onClose }) {
const [sourceUri, setSourceUri] = useState(null);

const fallback = () => setSourceUri(null);
Expand All @@ -75,7 +65,7 @@ export default function CollectibleMedia({
}, [collectible, small, big, setSourceUri]);

const renderMedia = useCallback(() => {
if (renderAnimation && collectible.animation?.includes('.mp4')) {
if (renderAnimation && collectible.animation && collectible.animation.includes('.mp4')) {
return (
<MediaPlayer
onClose={onClose}
Expand All @@ -87,7 +77,7 @@ export default function CollectibleMedia({
return (
<RemoteImage
fadeIn
resizeMode={resizeMode || 'cover'}
resizeMode={'contain'}
source={{ uri: sourceUri }}
style={[
styles.image,
Expand Down Expand Up @@ -117,7 +107,7 @@ export default function CollectibleMedia({
}`}</Text>
</View>
);
}, [collectible, sourceUri, onClose, renderAnimation, style, tiny, small, big, cover, resizeMode]);
}, [collectible, sourceUri, onClose, renderAnimation, style, tiny, small, big, cover]);

return <View style={styles.container(collectible.backgroundColor)}>{renderMedia()}</View>;
}
Expand Down Expand Up @@ -154,9 +144,5 @@ CollectibleMedia.propTypes = {
/**
* On close callback
*/
onClose: PropTypes.func,
/**
* Image resize mode
*/
resizeMode: PropTypes.string
onClose: PropTypes.func
};
Loading