Init repo & Analytics (#180)

* init art peace indexer

* add web analytics

apps/mobile/.env.example

@@ -21,3 +21,5 @@ EXPO_PUBLIC_DYNAMIC_API_KEY="DYNAMIC_API_KEY"
 
 EXPO_PUBLIC_LAYERSWAP_CLIENT_ID=""
 EXPO_PUBLIC_LAYERSWAP_API_KEY="API_KEY_LAYER_SWAP"
+
+EXPO_PUBLIC_GOOGLE_TAG_ID=

apps/mobile/src/app/App.tsx

@@ -4,11 +4,12 @@ import {starknetChainId, useAccount} from '@starknet-react/core';
 import * as Font from 'expo-font';
 import * as SplashScreen from 'expo-splash-screen';
 import {useCallback, useEffect, useState} from 'react';
-import {View} from 'react-native';
-
+import {View, Platform} from 'react-native';
+import { useNavigationContainerRef } from '@react-navigation/native';
 import {useTips} from '../hooks';
 import {useDialog, useToast} from '../hooks/modals';
 import {Router} from './Router';
+import { initGoogleAnalytics } from '../utils/analytics';
 
 SplashScreen.preventAutoHideAsync();
 

apps/mobile/src/app/Router.tsx

@@ -1,6 +1,6 @@
 // Hooks
-import { useMemo } from 'react';
-import { useWindowDimensions } from 'react-native';
+import { useEffect, useMemo, useRef } from 'react';
+import { useWindowDimensions, View, Platform } from 'react-native';
 import { useStyles, useTheme } from '../hooks';
 
 // Navigation Components
@@ -18,7 +18,6 @@ import Sidebar from '../modules/Layout/sidebar';
 // import RightSidebar from '../modules/Layout/RightSideBar';
 
 // Components
-import { View } from 'react-native';
 import { Icon } from '../components';
 import { Navbar } from '../components/Navbar';
 
@@ -53,12 +52,14 @@ import { ThemedStyleSheet } from '../styles';
 
 // Utilities
 import { AuthStackParams, HomeBottomStackParams, MainStackParams, RootStackParams } from '../types';
+import { useNavigationContainerRef } from '@react-navigation/native';
 // import { retrievePublicKey } from '../utils/storage';
 
 // Icons
 import { IconNames } from '../components/Icon';
 import { useAuth } from 'afk_nostr_sdk';
 import { Onboarding } from '../screens/Onboarding';
+import { initGoogleAnalytics, logPageView } from '../utils/analytics';
 
 type TabBarIconProps = {
   focused: boolean;
@@ -334,8 +335,34 @@ const RootNavigator: React.FC = () => {
 };
 
 export const Router = () => {
+  const navigationRef = useNavigationContainerRef();
+  const routeNameRef = useRef<string>();
+
+  const GA_TRACKING_ID = process.env.EXPO_PUBLIC_GOOGLE_TAG_ID; // Replace with your Google Analytics Tracking ID
+
+  useEffect(() => {
+    if (Platform.OS === 'web' && GA_TRACKING_ID) {
+      initGoogleAnalytics(GA_TRACKING_ID);
+      logPageView(); // Log the initial page view
+
+      const unsubscribe = navigationRef.addListener('state', () => {
+        const currentRouteName = navigationRef.getCurrentRoute()?.name;
+        if (currentRouteName !== routeNameRef.current) {
+          routeNameRef.current = currentRouteName;
+          logPageView(); // Log new page view on route change
+        }
+      });
+
+      return () => {
+        if (unsubscribe) {
+          unsubscribe();
+        }
+      };
+    }
+  }, [navigationRef]);
   return (
-    <NavigationContainer linking={linking}>
+    <NavigationContainer linking={linking}
+      ref={navigationRef}>
       <RootNavigator />
     </NavigationContainer>
   );
@@ -389,7 +416,7 @@ const linking = {
           //   path: '',
           // },
           Login: 'login',
-          Onboarding:"onboarding",
+          Onboarding: "onboarding",
           CreateAccount: 'create-account',
           SaveKeys: 'save-keys',
           ImportKeys: 'import-keys',

apps/mobile/src/utils/analytics.ts

@@ -0,0 +1,39 @@
+// src/analytics.ts
+export const initGoogleAnalytics = (trackingId: string) => {
+    if (typeof window !== 'undefined') {
+        const script1 = document.createElement('script');
+        script1.async = true;
+        script1.src = `https://www.googletagmanager.com/gtag/js?id=${trackingId}`;
+        document.head.appendChild(script1);
+
+        // Add the gtag initialization script
+        const script2 = document.createElement('script');
+        script2.innerHTML = `
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', '${trackingId}');
+        `;
+        document.head.appendChild(script2);
+
+        //   const script = document.createElement('script');
+        //   script.src = `https://www.googletagmanager.com/gtag/js?id=${trackingId}`;
+        //   script.async = true;
+        //   document.head.appendChild(script);
+
+        //   window?.dataLayer = window.dataLayer || [];
+        //   function gtag() {
+        //     window.dataLayer.push(arguments);
+        //   }
+        //   gtag('js', new Date());
+        //   gtag('config', trackingId);
+    }
+};
+
+export const logPageView = () => {
+    if (typeof window !== 'undefined') {
+        window.gtag('event', 'page_view', {
+            page_path: window.location.pathname,
+        });
+    }
+};

backend/.env.example

@@ -15,4 +15,12 @@ CONSUMER_PORT=8081
 
 PRODUCTION=false
 
-BACKEND_URL=https://backend-pixel.onrender.com/
+BACKEND_URL=https://backend-pixel.onrender.com/
+
+
+# INDEXER env
+APIBARA_STREAM_URL=
+ART_PEACE_CONTRACT_ADDRESS=
+# Webhook since option
+# TODO verify backend golang webhook
+CONSUMER_TARGET_URL=

backend/indexer/Dockerfile

@@ -0,0 +1,6 @@
+FROM quay.io/apibara/sink-webhook:0.6.0 as sink-webhook
+
+WORKDIR /indexer
+COPY ./indexer/script.js .
+
+CMD ["run", "script.js", "--allow-env", "/configs/configs.env", "--allow-env-from-env", "CONSUMER_TARGET_URL,APIBARA_STREAM_URL,PERSIST_TO_REDIS,INDEXER_ID", "--allow-net", "--sink-id", "art-peace-sink-id"]

backend/indexer/Dockerfile.prod

@@ -0,0 +1,7 @@
+FROM quay.io/apibara/sink-webhook:0.6.0 as sink-webhook
+
+WORKDIR /indexer
+COPY ./indexer/prod-script.js .
+
+# TODO: Allow net only on the required domains
+CMD ["run", "prod-script.js", "--allow-env-from-env", "CONSUMER_TARGET_URL,APIBARA_STREAM_URL,PERSIST_TO_REDIS,INDEXER_ID,ART_PEACE_CONTRACT_ADDRESS,NFT_CONTRACT_ADDRESS,USERNAME_STORE_ADDRESS", "--allow-net", "--sink-id", "art-peace-sink-id"]

backend/indexer/README.md

@@ -0,0 +1,14 @@
+# art/peace Indexer
+
+This directory contains the Apibara indexer setup for `art/peace`, which indexes and relays `art/peace` state change information to be stored in the Redis and Postgres DBs.
+
+## Running
+
+```
+# Setup Indexer/DNA w/ docker compose or other options
+# Create an indexer.env file with the following : 
+#  ART_PEACE_CONTRACT_ADDRESS=... # Example: 0x78223f7ab13216727ed426380079c169578cafad83a3178c7b33ba7ca307713
+#  APIBARA_STREAM_URL=... # Example: http://localhost:7171
+#  CONSUMER_TARGET_URL=... # Example: http://localhost:8081/consume-indexer-msg
+apibara run scripts.js --allow-env indexer.env
+```

backend/indexer/docker-compose.yml

@@ -0,0 +1,36 @@
+version: "3"
+
+services:
+  devnet:
+    image: shardlabs/starknet-devnet-rs:0.0.3
+    command:
+      - --dump-on=transaction
+      - --dump-path=/data/dump
+      - --seed=42
+    volumes:
+      - devnet:/data
+    ports:
+      - 5050:5050
+
+  dna:
+    image: quay.io/apibara/starknet:1.5.0
+    command:
+      - start
+      - --rpc=http://devnet:5050/rpc
+      - --name=devnet
+      - --head-refresh-interval-ms=1000
+      - --wait-for-rpc
+      - --address=0.0.0.0:7171
+    environment:
+      - XDG_DATA_HOME=/data
+    volumes:
+      - dna:/data
+    ports:
+      - 7171:7171
+    depends_on:
+      devnet:
+        condition: service_started
+
+volumes:
+  devnet:
+  dna: