feat: stats rework (#192)

Co-authored-by: ice-hector <[email protected]>

src/api/auth/getConfig.ts

@@ -1,12 +1,17 @@
 // SPDX-License-Identifier: ice License 1.0
 
-import {AuthConfig} from '@api/auth/types';
+import {FeatureToggleConfig} from '@api/auth/types';
 import {get} from '@api/client';
 import {NO_CACHE_HEADERS} from '@api/client/getHeaders';
 import {ENV} from '@constants/env';
 
 export function getConfig() {
-  return get<AuthConfig>(ENV.AUTH_CONFIG_URL ?? '', undefined, undefined, {
-    headers: NO_CACHE_HEADERS,
-  });
+  return get<FeatureToggleConfig>(
+    ENV.AUTH_CONFIG_URL ?? '',
+    undefined,
+    undefined,
+    {
+      headers: NO_CACHE_HEADERS,
+    },
+  );
 }

src/api/auth/types.ts

@@ -27,7 +27,7 @@ type EthDistributionKyc = {
   };
 };
 
-export type AuthConfig = AuthCodeConfig &
+export type FeatureToggleConfig = AuthCodeConfig &
   FaceAuthConfig &
   TeamConfig &
   AchievementsConfig &

src/api/statistics/types.ts

@@ -15,10 +15,10 @@ export type Miner = {
 export type UserGrowth = {
   active: number; //  0,
   total: number; // 20
-  timeSeries: TimeSeries[];
+  timeSeries: UserGrowthTimeSeries[];
 };
 
-export type TimeSeries = {
+export type UserGrowthTimeSeries = {
   date: string; // "2022-11-30T16:35:02.996090946Z",
   active: number; // 0,
   total: number; // 20
@@ -36,3 +36,9 @@ export type Adoption = {
   milestones: AdoptionMilestone[];
   totalActiveUsers: number;
 };
+
+export type TotalCoinsFilter =
+  | 'total'
+  | 'on-app'
+  | 'pre-staked'
+  | 'on-blockchain';

src/api/tokenomics/getTotalCoins.ts

@@ -0,0 +1,16 @@
+// SPDX-License-Identifier: ice License 1.0
+
+import {get} from '@api/client';
+import {TotalCoins} from '@api/tokenomics/types';
+
+type Params = {
+  days: number;
+  tz: string;
+};
+
+export function getTotalCoins({days, tz}: Params) {
+  return get<TotalCoins>('/tokenomics-statistics/total-coins', {
+    days,
+    tz,
+  });
+}

src/api/tokenomics/index.ts

@@ -6,6 +6,7 @@ import {getBalanceSummary} from './getBalanceSummary';
 import {getMiningSummary} from './getMiningSummary';
 import {getPreStakingSummary} from './getPreStakingSummary';
 import {getRankingSummary} from './getRankingSummary';
+import {getTotalCoins} from './getTotalCoins';
 import {startMiningSession} from './startMiningSession';
 import {startOrUpdatePreStaking} from './startOrUpdatePreStaking';
 
@@ -18,4 +19,5 @@ export const tokenomics = Object.freeze({
   getBalanceHistory,
   startOrUpdatePreStaking,
   claimExtraBonus,
+  getTotalCoins,
 });

src/api/tokenomics/types.ts

@@ -82,3 +82,19 @@ export type EthDistributionKycStep = 5;
 export type SocialKycStepNumber =
   | VerifySocialAccountKycStep
   | EthDistributionKycStep;
+
+export type TotalCoins = {
+  blockchain: number;
+  preStaking: number;
+  standard: number;
+  total: number;
+  timeSeries: TotalCoinsTimeSeries[];
+};
+
+export type TotalCoinsTimeSeries = {
+  date: string; // "2022-11-30T16:35:02.996090946Z",
+  blockchain: number;
+  preStaking: number;
+  standard: number;
+  total: number;
+};

src/assets/svg/CoinsStackSmallIcon.tsx

@@ -0,0 +1,23 @@
+// SPDX-License-Identifier: ice License 1.0
+
+import {COLORS} from '@constants/colors';
+import * as React from 'react';
+import Svg, {Path, SvgProps} from 'react-native-svg';
+import {rem} from 'rn-units';
+
+export const CoinsStackSmallIcon = ({
+  color = COLORS.white,
+  width = rem(28),
+  height = rem(28),
+  ...props
+}: SvgProps) => (
+  <Svg width={width} height={height} fill="none" viewBox="0 0 28 28" {...props}>
+    <Path
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M24.5 9.333c0-1.933-3.656-3.5-8.167-3.5-4.51 0-8.166 1.567-8.166 3.5m16.333 0V14c0 1.19-1.384 2.24-3.5 2.872-1.323.397-2.932.628-4.667.628-1.734 0-3.343-.233-4.666-.628-2.115-.632-3.5-1.682-3.5-2.872V9.333m16.333 0c0 1.19-1.384 2.24-3.5 2.872-1.323.397-2.932.628-4.667.628-1.734 0-3.343-.232-4.666-.628-2.115-.632-3.5-1.682-3.5-2.872M3.5 14v4.666c0 1.19 1.385 2.24 3.5 2.873 1.323.396 2.932.627 4.667.627 1.735 0 3.343-.232 4.666-.627 2.116-.633 3.5-1.683 3.5-2.873V17.5M3.5 14c0-1.397 1.907-2.602 4.667-3.163M3.5 14c0 1.19 1.385 2.24 3.5 2.872 1.323.397 2.932.628 4.667.628.81 0 1.593-.05 2.333-.145"
+    />
+  </Svg>
+);

src/components/BarGraph/components/BarLabel.tsx

@@ -1,26 +1,43 @@
 // SPDX-License-Identifier: ice License 1.0
 
+import {CoinsStackSmallIcon} from '@svg/CoinsStackSmallIcon';
 import {TierOneIcon} from '@svg/TierOneIcon';
 import {font} from '@utils/styles';
 import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {rem} from 'rn-units';
 
+export type StatsType = 'active_users' | 'total_coins';
+
 type Props = {
   value: string;
   color: string;
+  type?: StatsType;
 };
 
-export const BarLabel = ({value, color}: Props) => {
+export const BarLabel = ({value, color, type = 'active_users'}: Props) => {
   return (
     <View style={styles.container}>
-      <TierOneIcon
-        color={color}
-        width={rem(18)}
-        height={rem(18)}
-        style={styles.icon}
-      />
-      <Text style={[styles.dot, {color}]}>●</Text>
+      {type === 'total_coins' && (
+        <CoinsStackSmallIcon
+          width={rem(14)}
+          height={rem(14)}
+          color={color}
+          style={styles.icon}
+        />
+      )}
+      {type === 'active_users' && (
+        <>
+          <TierOneIcon
+            color={color}
+            width={rem(18)}
+            height={rem(18)}
+            style={styles.icon}
+          />
+          <Text style={[styles.dot, {color}]}>●</Text>
+        </>
+      )}
+
       <Text style={[styles.valueText, {color}]}>{value}</Text>
     </View>
   );

src/components/BarGraph/components/HorizontalBar.tsx

@@ -1,6 +1,6 @@
 // SPDX-License-Identifier: ice License 1.0
 
-import {BarLabel} from '@components/BarGraph/components/BarLabel';
+import {BarLabel, StatsType} from '@components/BarGraph/components/BarLabel';
 import {COLORS} from '@constants/colors';
 import {isRTL} from '@translations/i18n';
 import {formatNumber} from '@utils/numbers';
@@ -19,6 +19,7 @@ type Props = {
   maxWidth: number;
   sharedValue: SharedValue<number>;
   doAnimate: boolean;
+  type?: StatsType;
 };
 
 export const HorizontalBar = ({
@@ -27,6 +28,7 @@ export const HorizontalBar = ({
   value,
   sharedValue,
   doAnimate,
+  type,
 }: Props) => {
   const isLabelOutside = value / maxValue < 0.2;
   const width = useMemo(
@@ -74,10 +76,12 @@ export const HorizontalBar = ({
           doAnimate && animatedStyle,
           {width},
         ]}>
-        {!isLabelOutside && <BarLabel value={barLabel} color={COLORS.white} />}
+        {!isLabelOutside && (
+          <BarLabel value={barLabel} color={COLORS.white} type={type} />
+        )}
       </Animated.View>
       {isLabelOutside && (
-        <BarLabel value={barLabel} color={COLORS.primaryLight} />
+        <BarLabel value={barLabel} color={COLORS.primaryLight} type={type} />
       )}
     </View>
   );

src/components/BarGraph/hooks/useGetTotalCoinsBarGraphDataForStatsPeriod.ts

@@ -0,0 +1,34 @@
+// SPDX-License-Identifier: ice License 1.0
+
+import {totalCoinsToGraphData} from '@components/BarGraph/utils/totalCoinsToGraphData';
+import {isSplashHiddenSelector} from '@store/modules/AppCommon/selectors';
+import {StatsPeriod} from '@store/modules/Stats/types';
+import {TokenomicsActions} from '@store/modules/Tokenomics/actions';
+import {getTotalCoinsStatsSelector} from '@store/modules/Tokenomics/selectors';
+import {TotalCoinsBarGraphData} from '@store/modules/Tokenomics/types';
+import {useEffect, useMemo} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+
+export function useGetTotalCoinsBarGraphDataForStatsPeriod(
+  statsPeriod: StatsPeriod,
+): TotalCoinsBarGraphData {
+  const timeSeries = useSelector(getTotalCoinsStatsSelector(statsPeriod));
+  const isSplashHidden = useSelector(isSplashHiddenSelector);
+
+  const totalCoinsBarGraphData: TotalCoinsBarGraphData = useMemo(() => {
+    return totalCoinsToGraphData({
+      timeSeries,
+    });
+  }, [timeSeries]);
+
+  const dispatch = useDispatch();
+  useEffect(() => {
+    if (isSplashHidden) {
+      dispatch(
+        TokenomicsActions.GET_TOTAL_COINS_STATS.START.create(statsPeriod),
+      );
+    }
+  }, [dispatch, statsPeriod, isSplashHidden]);
+
+  return totalCoinsBarGraphData;
+}

src/components/BarGraph/hooks/useGetBarGraphDataForStatsPeriod.ts → src/components/BarGraph/hooks/useGetUserGrowthBarGraphDataForStatsPeriod.ts

@@ -1,21 +1,21 @@
 // SPDX-License-Identifier: ice License 1.0
 
-import {timeSeriesToUsersData} from '@components/BarGraph/utils/timeSeriesToGraphData';
+import {timeSeriesToUsersGraphData} from '@components/BarGraph/utils/timeSeriesToUsersGraphData';
 import {isSplashHiddenSelector} from '@store/modules/AppCommon/selectors';
 import {StatsActions} from '@store/modules/Stats/actions';
 import {getUserGrowthStatsSelector} from '@store/modules/Stats/selectors';
 import {StatsPeriod, UsersBarGraphData} from '@store/modules/Stats/types';
 import {useEffect, useMemo} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 
-export function useGetBarGraphDataForStatsPeriod(
+export function useGetUserGrowthBarGraphDataForStatsPeriod(
   statsPeriod: StatsPeriod,
 ): UsersBarGraphData {
   const timeSeries = useSelector(getUserGrowthStatsSelector(statsPeriod));
   const isSplashHidden = useSelector(isSplashHiddenSelector);
 
   const usersBarGraphData: UsersBarGraphData = useMemo(() => {
-    return timeSeriesToUsersData({
+    return timeSeriesToUsersGraphData({
       timeSeries,
     });
   }, [timeSeries]);

src/components/BarGraph/index.tsx

@@ -1,5 +1,6 @@
 // SPDX-License-Identifier: ice License 1.0
 
+import {StatsType} from '@components/BarGraph/components/BarLabel';
 import {HorizontalBar} from '@components/BarGraph/components/HorizontalBar';
 import {BarGraphData} from '@components/BarGraph/types';
 import {useScreenTransitionEnd} from '@navigation/hooks/useScreenTransitionEnd';
@@ -64,6 +65,7 @@ type BarItemProps = {
   maxValue: number;
   sharedValue: SharedValue<number>;
   doAnimate: boolean;
+  type?: StatsType;
 };
 
 export const BarItem = memo(
@@ -73,6 +75,7 @@ export const BarItem = memo(
     sharedValue,
     maxValue,
     doAnimate,
+    type,
   }: BarItemProps) => {
     return (
       <View style={styles.row} key={`${label}${value}`}>
@@ -83,6 +86,7 @@ export const BarItem = memo(
           value={value}
           sharedValue={sharedValue}
           doAnimate={doAnimate}
+          type={type}
         />
       </View>
     );

src/components/BarGraph/utils/timeSeriesToGraphData.ts → src/components/BarGraph/utils/timeSeriesToUsersGraphData.ts

@@ -1,14 +1,14 @@
 // SPDX-License-Identifier: ice License 1.0
 
-import {TimeSeries} from '@api/statistics/types';
+import {UserGrowthTimeSeries} from '@api/statistics/types';
 import {BarGraphData} from '@components/BarGraph/types';
 import {dayjs} from '@services/dayjs';
 import {UsersBarGraphData} from '@store/modules/Stats/types';
 
-export function timeSeriesToUsersData({
+export function timeSeriesToUsersGraphData({
   timeSeries,
 }: {
-  timeSeries: TimeSeries[];
+  timeSeries: UserGrowthTimeSeries[];
 }): UsersBarGraphData {
   if (!timeSeries?.length) {
     return {

src/components/BarGraph/utils/totalCoinsToGraphData.ts

@@ -0,0 +1,60 @@
+// SPDX-License-Identifier: ice License 1.0
+
+import {TotalCoinsTimeSeries} from '@api/tokenomics/types';
+import {BarGraphData} from '@components/BarGraph/types';
+import {dayjs} from '@services/dayjs';
+import {TotalCoinsBarGraphData} from '@store/modules/Tokenomics/types';
+
+export function totalCoinsToGraphData({
+  timeSeries,
+}: {
+  timeSeries: TotalCoinsTimeSeries[];
+}): TotalCoinsBarGraphData {
+  if (!timeSeries?.length) {
+    return {
+      blockchainData: [],
+      preStakingData: [],
+      standardData: [],
+      totalData: [],
+    };
+  }
+
+  const blockchainData: BarGraphData[] = timeSeries.map(
+    ({date, blockchain}) => {
+      return {
+        label: dayjs(date).format('MM/DD'),
+        value: blockchain,
+      };
+    },
+  );
+
+  const preStakingData: BarGraphData[] = timeSeries.map(
+    ({date, preStaking}) => {
+      return {
+        label: dayjs(date).format('MM/DD'),
+        value: preStaking,
+      };
+    },
+  );
+
+  const standardData: BarGraphData[] = timeSeries.map(({date, standard}) => {
+    return {
+      label: dayjs(date).format('MM/DD'),
+      value: standard,
+    };
+  });
+
+  const totalData: BarGraphData[] = timeSeries.map(({date, total}) => {
+    return {
+      label: dayjs(date).format('MM/DD'),
+      value: total,
+    };
+  });
+
+  return {
+    blockchainData,
+    preStakingData,
+    standardData,
+    totalData,
+  };
+}

src/screens/HomeFlow/Stats/components/UsersGrowthGraph/components/PeriodSelect/index.tsx → src/components/Menu/DropDownMenu/index.tsx

@@ -19,7 +19,7 @@ type Props = {
   onChange: (index: number) => void;
 };
 
-export const PeriodSelect = ({selectedIndex, options, onChange}: Props) => {
+export const DropDownMenu = ({selectedIndex, options, onChange}: Props) => {
   const navigation =
     useNavigation<NativeStackNavigationProp<MainStackParamList>>();
   const buttonRef = useRef<TouchableOpacity>(null);