Skip to content

Commit

Permalink
Revert "Collectibles enhancements (#2735)" (#3005)
Browse files Browse the repository at this point in the history 
This reverts commit 93c1296.
  • Loading branch information
@sethkfman @rickycodes
sethkfman authored and rickycodes committed Aug 12, 2021
1 parent 86ca6a7 commit 57e5b16
Show file tree
Hide file tree
Showing 9 changed files with 110 additions and 127 deletions.
131 changes: 73 additions & 58 deletions app/components/UI/CollectibleContracts/__snapshots__/index.test.js.snap
View file
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
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
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

0 comments on commit 57e5b16

Please sign in to comment.