Merge pull request #161 from Crossbell-Box/develop

Develop

.changeset/cold-olives-clap.md

@@ -0,0 +1,5 @@
+---
+"xlog": patch
+---
+
+Fixed style issues in comment box.

.changeset/cuddly-boats-tell.md

@@ -0,0 +1,5 @@
+---
+"xlog": minor
+---
+
+Support Android FCM notification.

.changeset/curvy-cooks-camp.md

@@ -0,0 +1,5 @@
+---
+"xlog": minor
+---
+
+Display notifications separately

.changeset/fluffy-lies-cheer.md

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

.changeset/hip-foxes-clean.md

@@ -0,0 +1,5 @@
+---
+"xlog": patch
+---
+
+Fixed styles issue in ImageGallery component.

.changeset/silver-ears-tickle.md

@@ -0,0 +1,5 @@
+---
+"xlog": patch
+---
+
+Fixed styles issue in PostDetails page on Android device.

.changeset/strange-mirrors-tell.md

@@ -0,0 +1,5 @@
+---
+"xlog": patch
+---
+
+Fixed compatibility issues with wc2

.changeset/witty-moons-act.md

@@ -0,0 +1,5 @@
+---
+"xlog": patch
+---
+
+Navigate to home page after disconnected.

.github/workflows/release.yml

@@ -41,8 +41,11 @@ jobs:
         run: |
           echo "${{ secrets.ENV_FILE_COMMON }}" > .env.common
           echo "${{ secrets.ENV_FILE_DEVELOPMENT }}" > .env.development
-          echo "${{ secrets.ENV_FILE_PRODUCTION }}" > .env.productiona
+          echo "${{ secrets.ENV_FILE_PRODUCTION }}" > .env.production
           echo "${{ secrets.ENV_FILE_STAGING }}" > .env.staging
+          echo "${{ secrets.GOOGLE_SERVICES_DEVELOPMENT }}" > GOOGLE_SERVICES_DEVELOPMENT
+          echo "${{ secrets.GOOGLE_SERVICES_STAGING }}" > GOOGLE_SERVICES_STAGING
+          echo "${{ secrets.GOOGLE_SERVICES_PRODUCTION }}" > GOOGLE_SERVICES_PRODUCTION
 
       - name: Install Dependencies
         run: yarn

.github/workflows/submit.yml

@@ -49,8 +49,11 @@ jobs:
         run: |
           echo "${{ secrets.ENV_FILE_COMMON }}" > .env.common
           echo "${{ secrets.ENV_FILE_DEVELOPMENT }}" > .env.development
-          echo "${{ secrets.ENV_FILE_PRODUCTION }}" > .env.productiona
+          echo "${{ secrets.ENV_FILE_PRODUCTION }}" > .env.production
           echo "${{ secrets.ENV_FILE_STAGING }}" > .env.staging
+          echo "${{ secrets.GOOGLE_SERVICES_DEVELOPMENT }}" > GOOGLE_SERVICES_DEVELOPMENT
+          echo "${{ secrets.GOOGLE_SERVICES_STAGING }}" > GOOGLE_SERVICES_STAGING
+          echo "${{ secrets.GOOGLE_SERVICES_PRODUCTION }}" > GOOGLE_SERVICES_PRODUCTION
 
       - name: Install dependencies
         run: yarn install

.github/workflows/update.yml

@@ -38,8 +38,11 @@ jobs:
         run: |
           echo "${{ secrets.ENV_FILE_COMMON }}" > .env.common
           echo "${{ secrets.ENV_FILE_DEVELOPMENT }}" > .env.development
-          echo "${{ secrets.ENV_FILE_PRODUCTION }}" > .env.productiona
+          echo "${{ secrets.ENV_FILE_PRODUCTION }}" > .env.production
           echo "${{ secrets.ENV_FILE_STAGING }}" > .env.staging
+          echo "${{ secrets.GOOGLE_SERVICES_DEVELOPMENT }}" > GOOGLE_SERVICES_DEVELOPMENT
+          echo "${{ secrets.GOOGLE_SERVICES_STAGING }}" > GOOGLE_SERVICES_STAGING
+          echo "${{ secrets.GOOGLE_SERVICES_PRODUCTION }}" > GOOGLE_SERVICES_PRODUCTION
 
       - name: Install dependencies
         run: yarn install

.gitignore

@@ -21,6 +21,7 @@ dist
 # Envrioment
 .env
 .env.*
+google-services.*
 !.env.example
 
 # Node

app.config.ts

@@ -87,6 +87,7 @@ export default (_: ConfigContext): ExpoConfig => {
     },
     android: {
       package: config.scheme,
+      googleServicesFile: config.googleServicesFile,
       intentFilters: [
         {
           action: "VIEW",

package.json

@@ -41,10 +41,10 @@
     "@changesets/config": "^2.3.0",
     "@changesets/get-release-plan": "^3.0.16",
     "@changesets/types": "^5.2.1",
-    "@crossbell/contract": "^1.2.5",
-    "@crossbell/indexer": "^1.2.3",
-    "@crossbell/react-account": "^1.2.5",
-    "@crossbell/util-hooks": "1.2.0",
+    "@crossbell/contract": "1.4.6",
+    "@crossbell/indexer": "1.4.6",
+    "@crossbell/react-account": "1.4.6",
+    "@crossbell/util-hooks": "1.4.4",
     "@dohooo/eslint-config": "^0.0.7",
     "@ethersproject/providers": "^5.7.2",
     "@ethersproject/shims": "^5.7.0",
@@ -76,6 +76,7 @@
     "@tradle/react-native-http": "^2.0.1",
     "@types/node": "^20.2.3",
     "@types/react": "~18.0.27",
+    "@walletconnect/modal-react-native": "^1.0.0-rc.2",
     "@walletconnect/randombytes": "^1.0.3",
     "@walletconnect/react-native-compat": "^2.7.6",
     "@walletconnect/react-native-dapp": "^1.8.0",
@@ -89,7 +90,7 @@
     "browserify-zlib": "^0.1.4",
     "buffer": "^6.0.3",
     "burnt": "^0.11.4",
-    "crossbell": "^1.3.0",
+    "crossbell": "1.4.0",
     "crypto-js": "^4.1.1",
     "dayjs": "1.11.7",
     "dns.js": "^1.0.1",

scripts/set-app-config-env.js

@@ -4,8 +4,9 @@ const { version } = require("../package.json");
 
 function setAppConfigEnv() {
   const ENV = process.env.NODE_ENV ?? "production";
+  const IS_EAS_CI = process.env.EAS_BUILD === "true";
 
-  if (process.env.EAS_BUILD === "true") {
+  if (IS_EAS_CI) {
     dotenv.config({ path: process.env.ENV_FILE_COMMON });
     dotenv.config({ path: process.env[`ENV_FILE_${ENV.toUpperCase()}`] });
   }
@@ -25,18 +26,21 @@ function setAppConfigEnv() {
       host: HOST,
       scheme: `${SCHEME}.development`,
       icon: "./assets/icon.development.png",
+      googleServicesFile: IS_EAS_CI ? "./GOOGLE_SERVICES_DEVELOPMENT" : "./google-services.development.json",
     },
     staging: {
       name: "xLog-preview",
       host: HOST,
       scheme: `${SCHEME}.staging`,
       icon: "./assets/icon.staging.png",
+      googleServicesFile: IS_EAS_CI ? "./GOOGLE_SERVICES_STAGING" : "./google-services.staging.json",
     },
     production: {
       name: "xLog",
       host: HOST,
       scheme: SCHEME,
       icon: "./assets/icon.png",
+      googleServicesFile: IS_EAS_CI ? "./GOOGLE_SERVICES_PRODUCTION" : "./google-services.production.json",
     },
   };
 

shim.js

@@ -2,6 +2,28 @@ import "node-libs-expo/globals";
 import { Platform } from "react-native";
 import { btoa, atob, toByteArray } from "react-native-quick-base64";
 
+// https://github.com/expo/expo/issues/17270#issuecomment-1445149952
+// Polyfill for expo-crypto until issue with react-native-get-random-values is solved
+// Apply only with Expo SDK >= 48
+
+import { getRandomValues as expoCryptoGetRandomValues } from "expo-crypto";
+
+class Crypto {
+  getRandomValues = expoCryptoGetRandomValues;
+}
+
+const webCrypto = typeof crypto !== "undefined" ? crypto : new Crypto();
+
+(() => {
+  if (typeof crypto === "undefined") {
+    Object.defineProperty(window, "crypto", {
+      configurable: true,
+      enumerable: true,
+      get: () => webCrypto,
+    });
+  }
+})();
+
 if (typeof BigInt === "undefined")
   global.BigInt = require("big-integer");
 

src/components/AchievementItem/index.tsx

@@ -28,6 +28,7 @@ const animDuration = 300;
 export const AchievementItem: React.FC<AchievementItemProps> = (props) => {
   const { group, isOwner, size = 100 } = props;
   const window = useWindowDimensions();
+  const finalSize = Math.min(window.width * 0.8, window.height * 0.8);
   const safeAreaInsets = useSafeAreaInsets();
   const date = useDate();
   const { t } = useTranslation("common");
@@ -57,17 +58,17 @@ export const AchievementItem: React.FC<AchievementItemProps> = (props) => {
 
   const topAnimValue = useDerivedValue(() => {
     const { top, bottom } = safeAreaInsets;
-    const centerTop = (window.height - top - bottom) / 2 - initialStatus.value.height * 1.5;
+    const centerTop = (window.height - top - bottom) / 2 - finalSize / 2;
 
     return interpolate(openedAnimValue.value, [0, 0.1, 1], [initialStatus.value.y, initialStatus.value.y, centerTop]);
-  }, [window, safeAreaInsets]);
+  }, [window, safeAreaInsets, finalSize]);
 
   const leftAnimValue = useDerivedValue(() => {
     const { left, right } = safeAreaInsets;
-    const centerLeft = (window.width - left - right) / 2 - initialStatus.value.width * 1.5;
+    const centerLeft = (window.width - left - right) / 2 - finalSize / 2;
 
     return interpolate(openedAnimValue.value, [0, 0.1, 1], [initialStatus.value.x, initialStatus.value.x, centerLeft]);
-  }, [window, safeAreaInsets]);
+  }, [window, safeAreaInsets, finalSize]);
 
   const imgPosAnimStyles = useAnimatedStyle(() => {
     return {
@@ -79,28 +80,27 @@ export const AchievementItem: React.FC<AchievementItemProps> = (props) => {
 
   const imgSizeAnimStyles = useAnimatedStyle(() => {
     return {
-      width: interpolate(openedAnimValue.value, [0, 0.1, 1], [initialStatus.value.width, initialStatus.value.width, window.width * 0.8]),
-      height: interpolate(openedAnimValue.value, [0, 0.1, 1], [initialStatus.value.height, initialStatus.value.height, window.width * 0.8]),
+      width: interpolate(openedAnimValue.value, [0, 0.1, 1], [initialStatus.value.width, initialStatus.value.width, finalSize]),
+      height: interpolate(openedAnimValue.value, [0, 0.1, 1], [initialStatus.value.height, initialStatus.value.height, finalSize]),
     };
-  }, [window]);
+  }, [finalSize]);
 
   const descriptionAnimStyles = useAnimatedStyle(() => {
     const { top, bottom } = safeAreaInsets;
-    const centerTop = (window.height - top - bottom) / 2 - initialStatus.value.height * 1.5;
+    const centerTop = (window.height - top - bottom) / 2 + finalSize / 2 + 28; // 28 is an offset
 
     const { left, right } = safeAreaInsets;
-    const centerLeft = (window.width - left - right) / 2 - initialStatus.value.width * 1.5;
+    const centerLeft = (window.width - left - right) / 2 - finalSize / 2;
 
     const width = window.width * 0.8;
-    const height = window.width * 0.8;
 
     return {
-      top: interpolate(openedAnimValue.value, [0, 0.1, 1], [initialStatus.value.y, initialStatus.value.y, centerTop]) + height + 28,
-      left: interpolate(openedAnimValue.value, [0, 0.1, 1], [initialStatus.value.x, initialStatus.value.x, centerLeft]),
+      top: interpolate(openedAnimValue.value, [0, 0.1, 1], [initialStatus.value.y, centerTop - 30, centerTop]),
+      left: centerLeft,
       width,
       opacity: interpolate(openedAnimValue.value, [0, 0.1, 1], [0, 0, 1]),
     };
-  }, []);
+  }, [finalSize]);
 
   const backdropAnimStyles = useAnimatedStyle(() => {
     return {
@@ -162,7 +162,6 @@ export const AchievementItem: React.FC<AchievementItemProps> = (props) => {
             )
             : (
               <Animated.View ref={originalImgRef} style={originalImgAnimStyles}>
-                {/* <Animated.Image source={AchievementItemBg} style={[imgSizeAnimStyles]} /> */}
                 <Grayscale style={{ width: size, height: size }}>
                   <Animated.Image onLoad={() => setLoaded(true)} source={{ uri: toGateway(media) }} style={{ width: size, height: size }} />
                 </Grayscale>

src/components/CommentButton/index.tsx

@@ -127,6 +127,18 @@ export const CommentButton: React.FC<Props> = ({ characterId, noteId, iconSize =
     }
   });
 
+  const data = comments.data?.pages.length
+    ? [
+      { type: "header", data: null } as ItemData,
+      ...comments.data?.pages.flatMap(page =>
+        (page?.list || []).map(data => ({
+          type: "data",
+          data,
+        })),
+      ) as Array<ItemData>,
+    ]
+    : [];
+
   return (
     <>
       <XTouch enableHaptics hitSlopSize={44} touchableComponent={TouchableWithoutFeedback} onPress={openBottomSheet} delayLongPress={150}>
@@ -158,19 +170,7 @@ export const CommentButton: React.FC<Props> = ({ characterId, noteId, iconSize =
                 contentContainerStyle={{
                   paddingBottom: bottom + 16,
                 }}
-                data={
-                  comments.data?.pages.length
-                    ? [
-                      { type: "header", data: null } as ItemData,
-                      ...comments.data?.pages.flatMap(page =>
-                        (page?.list || []).map(data => ({
-                          type: "data",
-                          data,
-                        })),
-                      ) as Array<ItemData>,
-                    ]
-                    : []
-                }
+                data={data}
                 showsVerticalScrollIndicator={false}
                 stickyHeaderIndices={[0]}
                 onEndReachedThreshold={0.5}
@@ -185,7 +185,7 @@ export const CommentButton: React.FC<Props> = ({ characterId, noteId, iconSize =
                   Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
                   comments?.fetchNextPage?.();
                 }}
-                ListFooterComponent={comments.isFetchingNextPage && <Spinner paddingBottom="$5" />}
+                ListFooterComponent={(comments.isFetchingNextPage || (comments.isFetching && data.length === 0)) && <Spinner paddingBottom="$5" />}
                 keyExtractor={(item) => {
                   if (item.type === "header") {
                     return "header";
@@ -288,7 +288,7 @@ export const CommentButton: React.FC<Props> = ({ characterId, noteId, iconSize =
                         space="$2"
                         flex={1}
                         onPress={onPressInput}>
-                        <Text fontSize={"$6"} flex={1} borderWidth={1} borderRadius={10} color={"$colorSubtitle"}>
+                        <Text fontSize={"$6"} flex={1} borderRadius={10} color={"$colorSubtitle"}>
                           {t("Write a comment on the blockchain")}
                         </Text>
                       </XStack>