chore: pending review feedback for token details related changes

app/components/UI/AssetOverview/Price/Price.tsx

@@ -78,21 +78,23 @@ const Price = ({
       <View style={styles.wrapper}>
         <Text style={styles.symbol}>{asset.symbol}</Text>
         {asset.name && <Text style={styles.name}>{asset.name}</Text>}
-        <Title style={styles.price}>
-          {isLoading ? (
-            <View style={styles.loadingPrice}>
-              <SkeletonPlaceholder>
-                <SkeletonPlaceholder.Item
-                  width={100}
-                  height={32}
-                  borderRadius={6}
-                />
-              </SkeletonPlaceholder>
-            </View>
-          ) : (
-            addCurrencySymbol(price, currentCurrency, true)
-          )}
-        </Title>
+        {!isNaN(price) && (
+          <Title style={styles.price}>
+            {isLoading ? (
+              <View style={styles.loadingPrice}>
+                <SkeletonPlaceholder>
+                  <SkeletonPlaceholder.Item
+                    width={100}
+                    height={32}
+                    borderRadius={6}
+                  />
+                </SkeletonPlaceholder>
+              </View>
+            ) : (
+              addCurrencySymbol(price, currentCurrency, true)
+            )}
+          </Title>
+        )}
         <Text>
           {isLoading ? (
             <View style={styles.loadingPriceDiff}>

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;

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 = () => (
+    <Defs key="dataGradient">
+      <LinearGradient
+        id="dataGradient"
+        x1="0"
+        y1="0%"
+        x2="0%"
+        y2={`${CHART_HEIGHT}px`}
+      >
+        <Stop offset="0%" stopColor={chartColor} stopOpacity={0.25} />
+        <Stop offset="90%" stopColor={chartColor} stopOpacity={0} />
+      </LinearGradient>
+    </Defs>
+  );
+
   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}
         >
           <Line chartHasData={chartHasData} />
           {chartHasData ? <Tooltip /> : <NoDataGradient />}
+          {chartHasData && <DataGradient />}
         </AreaChart>
       </View>
     </View>

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,
@@ -497,7 +505,7 @@ class Asset extends PureComponent {
           />
         )}
         {!asset.balanceError && (
-          <View style={styles.footer}>
+          <View style={{ ...styles.footer, ...styles.footerBorder }}>
             {asset.isETH && this.props.isNetworkBuyNativeTokenSupported && (
               <Button
                 variant={ButtonVariants.Secondary}

app/components/Views/Wallet/index.tsx

@@ -255,7 +255,7 @@ const Wallet = ({ navigation }: any) => {
 
       assets = [
         {
-          name: getTicker(ticker) === 'ETH' ? 'ETHER' : ticker,
+          name: getTicker(ticker) === 'ETH' ? 'Ethereum' : ticker,
           symbol: getTicker(ticker),
           isETH: true,
           balance,