added popover for details

src/components/points/view/pointsStyles.js

@@ -56,7 +56,6 @@ export default EStyleSheet.create({
     backgroundColor: '$primaryBlue',
     justifyContent: 'center',
     alignItems: 'center',
-    zIndex: 99,
     padding: 2,
     height: 12,
     minWidth: 18,
@@ -101,5 +100,24 @@ export default EStyleSheet.create({
   scrollContainer: {
     flex: 1,
   },
-
+  popoverDetails: {
+    flexDirection: 'row',
+    height: 130,
+    width: '$deviceWidth /2',
+    borderRadius: 20,
+    paddingHorizontal: 26,
+    backgroundColor: '$primaryBackgroundColor',
+  },
+  arrow: {
+    borderTopColor: '$primaryBackgroundColor',
+  },
+  popoverWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  overlay: {
+    backgroundColor: '#403c4449',
+  },
 });

src/components/points/view/pointsView.js

@@ -1,8 +1,9 @@
 import React, { Component, Fragment } from 'react';
 import {
-  Text, View, FlatList, ScrollView, RefreshControl,
+  Text, View, FlatList, ScrollView, RefreshControl, TouchableOpacity,
 } from 'react-native';
 import { injectIntl } from 'react-intl';
+import { Popover, PopoverController } from 'react-native-modal-popover';
 
 // Components
 import { LineBreak, WalletLineItem } from '../../basicUIElements';
@@ -57,6 +58,7 @@ class PointsView extends Component {
      const isActiveIcon = false;
 
      return (
+
        <Fragment>
          <LineBreak height={12} />
          <ScrollView
@@ -65,7 +67,6 @@ class PointsView extends Component {
          >
            <Text style={styles.pointText}>{userPoints.points}</Text>
            <Text style={styles.subText}>eSteem Points</Text>
-
            {userPoints.unclaimed_points > 0
            && (
            <MainButton
@@ -91,21 +92,48 @@ class PointsView extends Component {
                data={POINTS_KEYS}
                horizontal
                renderItem={({ item }) => (
-                 <View styles={styles.iconWrapper}>
+                 <PopoverController key={item.type}>
-                   <View style={styles.iconWrapper}>
+                   {({
-                     <IconButton
+                     openPopover, closePopover, popoverVisible, setPopoverAnchor, popoverAnchorRect,
-                       disabled
+                   }) => (
-                       iconStyle={styles.icon}
+                     <View styles={styles.iconWrapper} key={item.type}>
-                       style={styles.iconButton}
+                       <View style={styles.iconWrapper}>
-                       iconType={POINTS[item.type].iconType}
+                         <TouchableOpacity
-                       name={POINTS[item.type].icon}
+                           ref={setPopoverAnchor}
-                       badgeCount={POINTS[item.type].point}
+                           onPress={openPopover}
-                       badgeStyle={styles.badge}
+                         >
-                       badgeTextStyle={styles.badgeText}
+                           <IconButton
-                     />
+                             iconStyle={styles.icon}
-                   </View>
+                             style={styles.iconButton}
-                   <Text style={styles.subText}>{intl.formatMessage({ id: POINTS[item.type].nameKey })}</Text>
+                             iconType={POINTS[item.type].iconType}
-                 </View>
+                             name={POINTS[item.type].icon}
+                             badgeCount={POINTS[item.type].point}
+                             badgeStyle={styles.badge}
+                             badgeTextStyle={styles.badgeText}
+                             disabled
+                           />
+                         </TouchableOpacity>
+                       </View>
+                       <Text style={styles.subText}>{intl.formatMessage({ id: POINTS[item.type].nameKey })}</Text>
+                       <Popover
+                         backgroundStyle={styles.overlay}
+                         contentStyle={styles.popoverDetails}
+                         arrowStyle={styles.arrow}
+                         visible={popoverVisible}
+                         onClose={() => {
+                           closePopover();
+                         }}
+                         fromRect={popoverAnchorRect}
+                         placement="top"
+                         supportedOrientations={['portrait', 'landscape']}
+                       >
+                         <View style={styles.popoverWrapper}>
+                           <Text>{intl.formatMessage({ id: POINTS[item.type].descriptionKey })}</Text>
+                         </View>
+                       </Popover>
+                     </View>
+                   )}
+                 </PopoverController>
                )}
              />
            </View>
@@ -134,8 +162,11 @@ class PointsView extends Component {
                )
                   }
            </View>
+
          </ScrollView>
        </Fragment>
+
+
      );
    }
 }

yarn.lock

@@ -2341,10 +2341,10 @@ commander@^2.11.0, commander@^2.14.1, commander@^2.9.0, commander@~2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
   integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
 
-commander@~2.19.0:
+commander@~2.13.0:
-  version "2.19.0"
+  version "2.13.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
-  integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
+  integrity sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA==
 
 commander@~2.8.1:
   version "2.8.1"
@@ -2603,7 +2603,7 @@ date-fns@^1.27.2:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
 
-debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
+debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -2892,10 +2892,10 @@ drbg.js@^1.0.1:
     create-hash "^1.1.2"
     create-hmac "^1.1.4"
 
-dsteem@^0.11.2:
+dsteem@^0.10.1:
-  version "0.11.2"
+  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/dsteem/-/dsteem-0.11.2.tgz#1c3b4185999c804a234475738e00a49b55112fed"
+  resolved "https://registry.yarnpkg.com/dsteem/-/dsteem-0.10.1.tgz#1921d9f662f138c0b52f8fa77c7abc37ceab42f4"
-  integrity sha512-hd/JObnTvOnSbqkCTqtj4k0vufB48+TpdylmrquXZNL79Q3fijcwga0Uk4vlb9rcYPZQbDI6z6kt5mEg9RATqA==
+  integrity sha512-IF8yMagK+id3qHABEmQSrn7FjNiCTZzbohzig8jE09TBUpwePBxx+1UUedms/EY4oUlziaDa6h7Znb/Pp2dXgQ==
   dependencies:
     bs58 "^4.0.1"
     bytebuffer "^5.0.1"
@@ -6117,7 +6117,7 @@ mkdirp@^0.5.0, mkdirp@^0.5.1:
   dependencies:
     minimist "0.0.8"
 
-moment@^2.22.2:
+moment@^2.22.0, moment@^2.22.2:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
   integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
@@ -7997,7 +7997,7 @@ scheduler@^0.13.6:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-secp256k1@^3.5.2:
+secp256k1@^3.3.1:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/secp256k1/-/secp256k1-3.6.2.tgz#da835061c833c74a12f75c73d2ec2e980f00dc1f"
   integrity sha512-90nYt7yb0LmI4A2jJs1grglkTAXrBwxYAjP9bpeKjvJKOjG2fOeH/YI/lchDMIvjrOasd5QXwvV2jwN168xNng==
@@ -8844,9 +8844,11 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
+type-fest@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.3.1.tgz#63d00d204e059474fe5e1b7c011112bbd1dc29e1"
   integrity sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"