Merge pull request #182 from Crossbell-Box/develop

Develop

.changeset/afraid-poets-attack.md

@@ -0,0 +1,5 @@
+---
+"xlog": patch
+---
+
+Fixed the wrong events key of GA.

.changeset/breezy-beers-impress.md

@@ -0,0 +1,5 @@
+---
+"xlog": patch
+---
+
+Only enable GA in production envrionment.

.changeset/eight-rice-retire.md

@@ -0,0 +1,5 @@
+---
+"xlog": patch
+---
+
+Typo fixes.

.changeset/gorgeous-vans-type.md

@@ -0,0 +1,5 @@
+---
+"xlog": patch
+---
+
+Fixed the problem of inaccurate recording of reading time.

.changeset/smart-knives-add.md

@@ -0,0 +1,5 @@
+---
+"xlog": minor
+---
+
+Fixed crush error when go back on iOS.

.changeset/sour-numbers-serve.md

@@ -0,0 +1,5 @@
+---
+"xlog": minor
+---
+
+Support network checking.

App.tsx

@@ -17,17 +17,16 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
 import { enableFreeze, enableScreens } from "react-native-screens";
 
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
-import AsyncStorage from "@react-native-async-storage/async-storage";
 import { QueryClient } from "@tanstack/react-query";
 import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
-import WalletConnectProvider from "@walletconnect/react-native-dapp";
-import { resolveScheme } from "expo-linking";
 import * as SplashScreen from "expo-splash-screen";
 import * as Sentry from "sentry-expo";
 import type { SentryExpoNativeOptions } from "sentry-expo";
 import { TamaguiProvider } from "tamagui";
 
 import { ErrorBoundary } from "@/components/ErrorBoundary";
+import { NetworkChecker } from "@/components/NetworkChecker";
+import { NetworkSafeView } from "@/components/NetworkSafeView";
 import ProviderComposer from "@/components/ProviderComposer";
 import { StatusBar } from "@/components/StatusBar";
 import { WalletConnectModal } from "@/components/WalletConnectModal";
@@ -120,9 +119,10 @@ export default () => {
       <NotificationProvider key={"NotificationProvider"} />,
       <ApolloProvider key={"ApolloProvider"} />,
     ]}>
+      <NetworkChecker/>
       <StatusBar />
       <RootNavigator />
-      <WalletConnectModal />
+      <NetworkSafeView ifReachable={<WalletConnectModal />}/>
     </ProviderComposer>
   );
 };

app.config.ts

@@ -49,7 +49,6 @@ export default (_: ConfigContext): ExpoConfig => {
           },
           ios: {
             deploymentTarget: "13.0",
-            useFrameworks: "static",
           },
         },
       ],
@@ -64,6 +63,7 @@ export default (_: ConfigContext): ExpoConfig => {
       "expo-localization",
       "sentry-expo",
       "@react-native-firebase/app",
+      "./plugins/with-react-native-firebase.js",
     ],
     splash: {
       image: "./assets/splash.png",

package.json

@@ -55,6 +55,7 @@
     "@nomiclabs/hardhat-waffle": "^2.0.6",
     "@openzeppelin/contracts": "^4.8.3",
     "@react-native-async-storage/async-storage": "1.17.11",
+    "@react-native-community/netinfo": "9.3.7",
     "@react-native-firebase/analytics": "^18.1.0",
     "@react-native-firebase/app": "^18.1.0",
     "@react-navigation/bottom-tabs": "^6.5.7",

plugins/with-react-native-firebase.js

@@ -0,0 +1,50 @@
+const fs = require("fs");
+const path = require("path");
+
+const generateCode = require("@expo/config-plugins/build/utils/generateCode");
+const configPlugins = require("expo/config-plugins");
+
+const code = `  pod 'Firebase', :modular_headers => true
+  pod 'nanopb', :modular_headers => true
+  pod 'FirebaseSessions', :modular_headers => true
+  pod 'FirebaseCore', :modular_headers => true
+  pod 'FirebaseCoreExtension', :modular_headers => true
+  pod 'FirebaseInstallations', :modular_headers => true
+  pod 'GoogleDataTransport', :modular_headers => true
+  pod 'GoogleUtilities', :modular_headers => true
+  $RNFirebaseAsStaticFramework = true`;
+
+const withReactNativeFirebase = (config) => {
+  return configPlugins.withDangerousMod(config, [
+    "ios",
+    async (config) => {
+      const filePath = path.join(
+        config.modRequest.platformProjectRoot,
+        "Podfile",
+      );
+      const contents = fs.readFileSync(filePath, "utf-8");
+
+      const addCode = generateCode.mergeContents({
+        tag: "withReactNativeFirebase",
+        src: contents,
+        newSrc: code,
+        anchor: /\s*get_default_flags\(\)/i,
+        offset: 2,
+        comment: "#",
+      });
+
+      if (!addCode.didMerge) {
+        console.error(
+          "ERROR: Cannot add withReactNativeFirebase to the project's ios/Podfile because it's malformed.",
+        );
+        return config;
+      }
+
+      fs.writeFileSync(filePath, addCode.contents);
+
+      return config;
+    },
+  ]);
+};
+
+module.exports = withReactNativeFirebase;

src/components/ConnectionButton/index.tsx

@@ -99,7 +99,7 @@ function OPSignToggleBtn() {
 
   const OPSign = () => {
     signIn();
-    GA.logEvent("Operator Sign");
+    GA.logEvent("operator_sign");
     closePermanently();
   };
 

src/components/NetworkChecker/index.tsx

@@ -0,0 +1,10 @@
+import type React from "react";
+
+import { useNetworkChecker } from "@/hooks/use-network-checker";
+
+interface Props {}
+
+export const NetworkChecker: React.FC<Props> = (props) => {
+  useNetworkChecker();
+  return null;
+};

src/components/NetworkSafeView/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { useNetInfo } from "@react-native-community/netinfo";
+
+interface Props {
+  ifConnected?: React.ReactNode
+  ifReachable?: React.ReactNode
+  ifNotConnected?: React.ReactNode
+  ifNotReachable?: React.ReactNode
+}
+
+export const NetworkSafeView: React.FC<Props> = (props) => {
+  const { ifConnected, ifReachable, ifNotConnected, ifNotReachable } = props;
+  const { isConnected, isInternetReachable } = useNetInfo();
+
+  return (
+    <>
+      {isConnected && ifConnected}
+      {isInternetReachable && ifReachable}
+      {!isConnected && ifNotConnected}
+      {!isInternetReachable && ifNotReachable}
+    </>
+  );
+};

src/hooks/ga/use-ga-with-page-stay-time.ts

@@ -1,4 +1,5 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
+import { Platform } from "react-native";
 
 import { GA } from "@/utils/GA";
 
@@ -13,7 +14,7 @@ interface Time {
 }
 
 const useGAWithPageStayTime = (event: Event) => {
-  const startTime = Date.now();
+  const startTime = useRef(Date.now());
 
   const formatTime = (ms: number): string => {
     const seconds = Math.floor(ms / 1000);
@@ -29,7 +30,7 @@ const useGAWithPageStayTime = (event: Event) => {
 
   useEffect(() => {
     return () => {
-      const stayTime = Date.now() - startTime;
+      const stayTime = Date.now() - startTime.current;
       const { page_name, params } = event;
       const formattedTime = formatTime(stayTime);
       GA.logEvent("page_stay_time", {
@@ -39,9 +40,7 @@ const useGAWithPageStayTime = (event: Event) => {
         stay_time_formatted: formattedTime,
       });
     };
-  }, [event, startTime]);
-
-  return { milliseconds: Date.now() - startTime, formatted: formatTime(Date.now() - startTime) };
+  }, []);
 };
 
 export default useGAWithPageStayTime;

src/hooks/use-network-checker.ts

@@ -0,0 +1,36 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+
+import NetInfo from "@react-native-community/netinfo";
+import { useToastController } from "@tamagui/toast";
+
+import { debounce } from "@/utils/debounce";
+
+export const useNetworkChecker = () => {
+  const toast = useToastController();
+  const i18n = useTranslation("common");
+  const disposer = useRef<() => void>();
+
+  const onNetworkError = useCallback(debounce(() => {
+    toast.show(i18n.t("Network Error"), {
+      burntOptions: {
+        preset: "error",
+        haptic: "warning",
+      },
+    });
+  }, 5 * 1000), []);
+
+  useEffect(() => {
+    if (disposer.current) {
+      disposer.current();
+    }
+
+    disposer.current = NetInfo.addEventListener((state) => {
+      if (state.isConnected === false || state.isInternetReachable === false) {
+        onNetworkError();
+      }
+    });
+
+    return () => disposer.current();
+  }, [toast]);
+};

src/hooks/use-notification-setup.ts

@@ -126,7 +126,7 @@ export function useNotificationSetup() {
 
 async function registerForPushNotificationsAsync() {
   if (!Device.isDevice) {
-    throw new Error("Must use physical device for Push Notifications.");
+    return;
   }
 
   const { status: existingStatus } = await Notifications.getPermissionsAsync();

src/i18n/zh/common.json

@@ -116,6 +116,7 @@
   "Link": "复制链接",
   "Image": "生成图片",
   "Save": "保存",
+  "Network Error": "网络错误",
   "delete account alert": "您确定要删除您的账户吗？此操作无法撤销。请键入 <T> {{name}} </T> 以确认。",
   "By signing, you can interact without clicking to agree the smart contracts every time. We are in Beta, and new users who try it out will be rewarded with 0.01 $CSB.": "通过签署授权，你可以在每次互动时无需点击同意智能合约。我们正在测试阶段，新用户试用将获得0.01 $CSB的奖励。"
 }

src/pages/Feed/Header.tsx

@@ -109,7 +109,7 @@ export const Header: FC<Props> = (props) => {
                 fontWeight={fontWeight}
                 fontSize={"$5"}
               >
-                {i18n.t("Hot")}
+                {i18n.t("Hottest")}
               </Text>
             </Stack>
             {currentFeedType === feedType.HOTTEST && (

src/pages/PostDetails/Header.tsx

@@ -205,7 +205,7 @@ export const Header: FC<Props> = (props) => {
         position: "absolute",
         zIndex: 2,
       }, headerBgAnimStyles]}>
-        <TouchableWithoutFeedback onPress={goBack} containerStyle={{
+        <TouchableWithoutFeedback onPress={() => goBack()} containerStyle={{
           position: "absolute",
           left: 8,
           top: top + 5,

src/pages/Search/index.tsx

@@ -45,7 +45,7 @@ export const SearchPage: FC<NativeStackScreenProps<RootStackParamList, "Search">
             <Search color="$colorSubtitle" size={"$1"}/>
             <TextInput ref={ref} style={{ color, flex: 1 }} autoFocus onChangeText={setSearch}/>
           </XStack>
-          <Button onPress={navigation.goBack}>{i18n.t("Cancel")}</Button>
+          <Button onPress={() => navigation.goBack()}>{i18n.t("Cancel")}</Button>
         </XStack>
       </Animated.View>
       <FeedList

src/utils/GA.ts

@@ -1,3 +1,9 @@
 import analytics from "@react-native-firebase/analytics";
 
-export const GA = analytics();
+import { IS_PROD } from "@/constants";
+
+const analyticsInstance = analytics();
+
+analyticsInstance.setAnalyticsCollectionEnabled(IS_PROD);
+
+export const GA = analyticsInstance;

yarn.lock

@@ -3038,6 +3038,11 @@
     prompts "^2.4.0"
     semver "^6.3.0"
 
+"@react-native-community/[email protected]":
+  version "9.3.7"
+  resolved "https://registry.npmjs.org/@react-native-community/netinfo/-/netinfo-9.3.7.tgz#92407f679f00bae005c785a9284e61d63e292b34"
+  integrity sha512-+taWmE5WpBp0uS6kf+bouCx/sn89G9EpR4s2M/ReLvctVIFL2Qh8WnWfBxqK9qwgmFha/uqjSr2Gq03OOtiDcw==
+
 "@react-native-firebase/analytics@^18.1.0":
   version "18.1.0"
   resolved "https://registry.npmjs.org/@react-native-firebase/analytics/-/analytics-18.1.0.tgz#3f647b4fe7bbe2434fd87919c7e5e88e6f156e44"