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 ? (
-
-
-
-
-
- ) : (
- addCurrencySymbol(price, currentCurrency, true)
- )}
-
+ {!isNaN(price) && (
+
+ {isLoading ? (
+
+
+
+
+
+ ) : (
+ 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 && (