diff --git a/assets/logos/stats.svg b/assets/logos/stats.svg
new file mode 100644
index 0000000000..88a2e6bba9
--- /dev/null
+++ b/assets/logos/stats.svg
@@ -0,0 +1,506 @@
+
diff --git a/declarations.d.ts b/declarations.d.ts
index 96e1ed39ea..8b38b2d288 100644
--- 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
index 5155fb44b6..4b6dc64aaa 100644
--- 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
index 2b4f987fbc..43054b84bf 100644
--- 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") }}
/>
+ null, title: screenTitle("Metrics") }}
+ />
);
};
diff --git a/packages/screens/Metrics/MetricsScreen.tsx b/packages/screens/Metrics/MetricsScreen.tsx
new file mode 100644
index 0000000000..ca3561b1c2
--- /dev/null
+++ 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 (
+ }
+ footerChildren={}
+ forceNetworkId="teritori"
+ >
+
+ {mobileMode && }
+
+ {mobileMode && }
+
+
+ Total Burned $Tori tokens:
+
+ {mobileMode && }
+
+ 🔥 118.55K $TORI 🔥
+
+ {mobileMode && }
+
+ ESTIMATED HALVING DATE:
+
+ {mobileMode && }
+
+ 📅{" "}
+
+ Nov 30th, 2023, 15:51:00 UTC
+
+
+
+
+ {blocksValues.map((item, index) => {
+ const blockNumberText = (
+
+ {item.blockNumber}
+
+ );
+ let blockNumber;
+ if (item.blockNumber.startsWith("#")) {
+ blockNumber = (
+
+ Linking.openURL(
+ "https://www.mintscan.io/teritori/blocks/" +
+ item.blockNumber.substring(1),
+ )
+ }
+ >
+ {blockNumberText}
+
+ );
+ } else {
+ blockNumber = blockNumberText;
+ }
+ return (
+
+
+ {item.label}
+
+ {blockNumber}
+
+ );
+ })}
+
+
+
+ );
+};
+
+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
index 185ed388d5..ab712b3899 100644
--- 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;
@@ -149,6 +150,8 @@ const navConfig: {
DAppStore: "dapp-store",
// === DApps
ToriPunks: "dapp/tori-punks/:route?",
+ // === Metrics
+ Metrics: "stats",
},
};