feat: Add MetricsScreen component (#759)

* feat: Add MetricsScreen component (feat/burn-stats-page) Add the MetricsScreen component to display metrics related to the burning of $Tori tokens. This includes a video animation, total burned $Tori tokens, estimated halving date, and block information. The MetricsScreen component also includes a link to view specific blocks on mintscan.io. * feat(metrics): update burn stats on home screen (feat/burn-stats-page) * fix: replace video bugged on chrome by svg Signed-off-by: Norman Meier <[email protected]> * feat: add block values Signed-off-by: Norman Meier <[email protected]> * feat: improve date text Signed-off-by: Norman Meier <[email protected]> * feat: improve metrics screen responsiveness Signed-off-by: Norman Meier <[email protected]> --------- Signed-off-by: Norman Meier <[email protected]> Co-authored-by: Norman Meier <[email protected]>
TERITORI · Nov 22, 2023 · 497298e · 497298e
1 parent 3814aa7
commit 497298e
Show file tree

Hide file tree

Showing 6 changed files with 694 additions and 0 deletions.
diff --git a/assets/logos/stats.svg b/assets/logos/stats.svg
diff --git a/declarations.d.ts b/declarations.d.ts
@@ -17,4 +17,9 @@ declare module "*.jpg" {
   export = value;
 }
 
+declare module "*.mp4" {
+  const src: string;
+  export default src;
+}
+
 declare module "react-native-smooth-slider";
diff --git a/packages/components/gradientText/GradientText.tsx b/packages/components/gradientText/GradientText.tsx
@@ -39,6 +39,7 @@ export interface GradientTextProps {
       | "letterSpacing"
       | "lineHeight"
       | "textDecorationLine"
+      | "textTransform"
     >
   >;
   gradientType: GradientType;

diff --git a/packages/components/navigation/Navigator.tsx b/packages/components/navigation/Navigator.tsx
@@ -19,6 +19,7 @@ import { CollectionScreen } from "../../screens/Marketplace/CollectionScreen";
 import { CollectionToolsScreen } from "../../screens/Marketplace/CollectionToolsScreen";
 import { MarketplaceScreen } from "../../screens/Marketplace/MarketplaceScreen";
 import { NFTDetailScreen } from "../../screens/Marketplace/NFTDetailScreen";
+import { MetricsScreen } from "../../screens/Metrics/MetricsScreen";
 import { MultisigCreateScreen } from "../../screens/Multisig/MultisigCreateScreen";
 import { MultisigScreen } from "../../screens/Multisig/MultisigScreen";
 import { MultisigWalletDashboardScreen } from "../../screens/Multisig/MultisigWalletDashboardScreen";
@@ -315,6 +316,11 @@ export const Navigator: React.FC = () => {
         component={CoreDAOScreen}
         options={{ header: () => null, title: screenTitle("Core DAO") }}
       />
+      <Stack.Screen
+        name="Metrics"
+        component={MetricsScreen}
+        options={{ header: () => null, title: screenTitle("Metrics") }}
+      />
     </Stack.Navigator>
   );
 };
diff --git a/packages/screens/Metrics/MetricsScreen.tsx b/packages/screens/Metrics/MetricsScreen.tsx
@@ -0,0 +1,173 @@
+import { useQuery } from "@tanstack/react-query";
+import React from "react";
+import { Linking, Pressable, View, useWindowDimensions } from "react-native";
+
+import statsLogo from "../../../assets/logos/stats.svg";
+import { BrandText } from "../../components/BrandText";
+import { SVG } from "../../components/SVG";
+import { ScreenContainer } from "../../components/ScreenContainer";
+import { GradientText } from "../../components/gradientText";
+import { TopLogo } from "../../components/navigation/components/TopLogo";
+import { SpacerColumn } from "../../components/spacer";
+import { useIsMobile } from "../../hooks/useIsMobile";
+import { getNonSigningStargateClient } from "../../networks";
+import { teritoriNetwork } from "../../networks/teritori";
+import { ScreenFC } from "../../utils/navigation";
+import { errorColor, secondaryColor } from "../../utils/style/colors";
+import { fontBold16, fontSemibold28 } from "../../utils/style/fonts";
+import { layout } from "../../utils/style/layout";
+
+const targetBlock = 6307200;
+
+export const MetricsScreen: ScreenFC<"Metrics"> = () => {
+  const { data: currentHeight } = useCosmosHeight(teritoriNetwork.id);
+  const { width: windowWidth } = useWindowDimensions();
+  const mobileMode = useIsMobile();
+
+  const blocksValues = [
+    {
+      label: "Target Block",
+      blockNumber: `#${targetBlock}`,
+    },
+    {
+      label: "Current Block",
+      blockNumber: currentHeight ? `#${currentHeight}` : "?",
+    },
+    {
+      label: "Remaining Blocks",
+      blockNumber: currentHeight ? `${targetBlock - currentHeight}` : "?",
+    },
+  ];
+
+  let imageSize = 800;
+  if (mobileMode) {
+    imageSize = windowWidth;
+  }
+
+  return (
+    <ScreenContainer
+      fullWidth
+      headerChildren={<TopLogo />}
+      footerChildren={<div />}
+      forceNetworkId="teritori"
+    >
+      <View
+        style={{
+          justifyContent: "center",
+          alignItems: "center",
+          flexWrap: "wrap",
+          height: "100%",
+        }}
+      >
+        {mobileMode && <SpacerColumn size={3} />}
+        <SVG
+          source={statsLogo}
+          width={imageSize}
+          height={imageSize}
+          style={{ margin: -(imageSize / 4) }}
+        />
+        {mobileMode && <SpacerColumn size={3} />}
+        <View
+          style={{
+            justifyContent: "space-evenly",
+            alignItems: mobileMode ? "flex-start" : "center",
+            paddingHorizontal: layout.spacing_x3,
+          }}
+        >
+          <BrandText style={[fontSemibold28, { textTransform: "uppercase" }]}>
+            Total Burned $Tori tokens:
+          </BrandText>
+          {mobileMode && <SpacerColumn size={2} />}
+          <BrandText
+            style={[
+              fontSemibold28,
+              { textTransform: "uppercase", color: errorColor },
+            ]}
+          >
+            🔥 118.55K $TORI 🔥
+          </BrandText>
+          {mobileMode && <SpacerColumn size={2} />}
+          <BrandText
+            style={[
+              fontSemibold28,
+              { textTransform: "uppercase", color: secondaryColor },
+            ]}
+          >
+            ESTIMATED HALVING DATE:
+          </BrandText>
+          {mobileMode && <SpacerColumn size={2} />}
+          <BrandText style={fontSemibold28}>
+            📅{"  "}
+            <GradientText
+              style={[
+                fontSemibold28,
+                { textTransform: "uppercase", color: secondaryColor },
+              ]}
+              gradientType="blueExtended"
+            >
+              Nov 30th, 2023, 15:51:00 UTC
+            </GradientText>
+          </BrandText>
+        </View>
+        <View
+          style={{
+            flexDirection: "row",
+            flexWrap: "wrap",
+          }}
+        >
+          {blocksValues.map((item, index) => {
+            const blockNumberText = (
+              <BrandText style={[fontBold16, { color: secondaryColor }]}>
+                {item.blockNumber}
+              </BrandText>
+            );
+            let blockNumber;
+            if (item.blockNumber.startsWith("#")) {
+              blockNumber = (
+                <Pressable
+                  onPress={() =>
+                    Linking.openURL(
+                      "https://www.mintscan.io/teritori/blocks/" +
+                        item.blockNumber.substring(1),
+                    )
+                  }
+                >
+                  {blockNumberText}
+                </Pressable>
+              );
+            } else {
+              blockNumber = blockNumberText;
+            }
+            return (
+              <View
+                key={index}
+                style={{
+                  padding: layout.spacing_x3,
+                  alignContent: "center",
+                  justifyContent: "space-between",
+                  height: 110,
+                }}
+              >
+                <BrandText style={[fontBold16, { color: secondaryColor }]}>
+                  {item.label}
+                </BrandText>
+                {blockNumber}
+              </View>
+            );
+          })}
+        </View>
+      </View>
+    </ScreenContainer>
+  );
+};
+
+function useCosmosHeight(networkId: string) {
+  return useQuery(
+    ["cosmosStatus", networkId],
+    async () => {
+      const client = await getNonSigningStargateClient(networkId);
+      return await client.getHeight();
+    },
+    { staleTime: Infinity, refetchInterval: 7000 },
+  );
+}
diff --git a/packages/utils/navigation.ts b/packages/utils/navigation.ts
@@ -65,6 +65,7 @@ export type RootStackParamList = {
 
   DAppStore: undefined;
   ToriPunks: { route: string };
+  Metrics: undefined;
 };
 
 export type AppNavigationProp = NativeStackNavigationProp<RootStackParamList>;
@@ -149,6 +150,8 @@ const navConfig: {
     DAppStore: "dapp-store",
     // === DApps
     ToriPunks: "dapp/tori-punks/:route?",
+    // === Metrics
+    Metrics: "stats",
   },
 };