diff --git a/app/components/UI/AssetOverview/Price/Price.tsx b/app/components/UI/AssetOverview/Price/Price.tsx index 12b9be87c4f..e8dead6af61 100644 --- a/app/components/UI/AssetOverview/Price/Price.tsx +++ b/app/components/UI/AssetOverview/Price/Price.tsx @@ -78,21 +78,23 @@ const Price = ({ {asset.symbol} {asset.name && {asset.name}} - - {isLoading ? ( - <View style={styles.loadingPrice}> - <SkeletonPlaceholder> - <SkeletonPlaceholder.Item - width={100} - height={32} - borderRadius={6} - /> - </SkeletonPlaceholder> - </View> - ) : ( - addCurrencySymbol(price, currentCurrency, true) - )} - + {!isNaN(price) && ( + + {isLoading ? ( + <View style={styles.loadingPrice}> + <SkeletonPlaceholder> + <SkeletonPlaceholder.Item + width={100} + height={32} + borderRadius={6} + /> + </SkeletonPlaceholder> + </View> + ) : ( + addCurrencySymbol(price, currentCurrency, true) + )} + + )} {isLoading ? ( diff --git a/app/components/UI/AssetOverview/PriceChart/PriceChart.styles.tsx b/app/components/UI/AssetOverview/PriceChart/PriceChart.styles.tsx index 4393bee1e1d..023c85fad7d 100644 --- a/app/components/UI/AssetOverview/PriceChart/PriceChart.styles.tsx +++ b/app/components/UI/AssetOverview/PriceChart/PriceChart.styles.tsx @@ -1,7 +1,7 @@ import { Theme } from '@metamask/design-tokens'; import { Dimensions, StyleSheet, TextStyle } from 'react-native'; -export const CHART_HEIGHT = Dimensions.get('screen').height * 0.35; +export const CHART_HEIGHT = Dimensions.get('screen').height * 0.44; const styleSheet = (params: { theme: Theme }) => { const { theme } = params; diff --git a/app/components/UI/AssetOverview/PriceChart/PriceChart.tsx b/app/components/UI/AssetOverview/PriceChart/PriceChart.tsx index 21a91b568fb..79b8613a22c 100644 --- a/app/components/UI/AssetOverview/PriceChart/PriceChart.tsx +++ b/app/components/UI/AssetOverview/PriceChart/PriceChart.tsx @@ -104,6 +104,7 @@ const PriceChart = ({ onActiveIndexChange(value); }; + const prevTouch = useRef({ x: 0, y: 0 }); const panResponder = useRef( PanResponder.create({ onStartShouldSetPanResponder: () => true, @@ -112,13 +113,28 @@ const PriceChart = ({ onMoveShouldSetPanResponderCapture: () => true, onPanResponderTerminationRequest: () => true, onPanResponderGrant: (evt: GestureResponderEvent) => { - setIsChartBeingTouched(true); + // save current touch for the next move + prevTouch.current = { + x: evt.nativeEvent.locationX, + y: evt.nativeEvent.locationY, + }; updatePosition(evt.nativeEvent.locationX); }, onPanResponderMove: (evt: GestureResponderEvent) => { - setIsChartBeingTouched(true); - updatePosition(evt.nativeEvent.locationX); + const deltaX = evt.nativeEvent.locationX - prevTouch.current.x; + const deltaY = evt.nativeEvent.locationY - prevTouch.current.y; + const isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY); + + setIsChartBeingTouched(isHorizontalSwipe); + updatePosition(isHorizontalSwipe ? evt.nativeEvent.locationX : -1); + + // save current touch for the next move + prevTouch.current = { + x: evt.nativeEvent.locationX, + y: evt.nativeEvent.locationY, + }; }, + onPanResponderRelease: () => { setIsChartBeingTouched(false); updatePosition(-1); @@ -140,6 +156,21 @@ const PriceChart = ({ ); }; + const DataGradient = () => ( + + + + + + + ); + const NoDataGradient = () => { // gradient with transparent center and grey edges const gradient = ( @@ -245,9 +276,11 @@ const PriceChart = ({ style={styles.chartArea} data={chartHasData ? priceList : placeholderData} contentInset={{ top: apx(40), bottom: apx(40) }} + svg={chartHasData ? { fill: `url(#dataGradient)` } : undefined} > {chartHasData ? : } + {chartHasData && } diff --git a/app/components/Views/Asset/index.js b/app/components/Views/Asset/index.js index a32f0debdbc..e2e4f6b34c1 100644 --- a/app/components/Views/Asset/index.js +++ b/app/components/Views/Asset/index.js @@ -49,6 +49,7 @@ import Transactions from '../../UI/Transactions'; import ActivityHeader from './ActivityHeader'; import { isNetworkBuyNativeTokenSupported } from '../../UI/FiatOnRampAggregator/utils'; import { getRampNetworks } from '../../../reducers/fiatOrders'; +import Device from '../../../util/device'; const createStyles = (colors) => StyleSheet.create({ @@ -72,12 +73,19 @@ const createStyles = (colors) => paddingBottom: 32, elevation: 2, paddingTop: 16, - paddingHorizontal: 12, - shadowColor: colors.overlay.default, - shadowOpacity: 1, - shadowOffset: { height: 4, width: 0 }, - shadowRadius: 8, + paddingHorizontal: 16, }, + footerBorder: Device.isAndroid() + ? { + borderTopWidth: 1, + borderColor: colors.border.muted, + } + : { + shadowColor: colors.overlay.default, + shadowOpacity: 0.3, + shadowOffset: { height: 4, width: 0 }, + shadowRadius: 8, + }, footerButton: { flexGrow: 1, flexShrink: 1, @@ -506,7 +514,7 @@ class Asset extends PureComponent { /> )} {!asset.balanceError && (displayBuyButton || displaySwapsButton) && ( - + {displayBuyButton && (