Merge pull request #257 from Crossbell-Box/develop

Develop

.changeset/new-islands-dress.md

@@ -0,0 +1,5 @@
+---
+"xlog": patch
+---
+
+Added skeleton for carousel and optimized the display performance of details page.

.changeset/sour-waves-sniff.md

@@ -0,0 +1,5 @@
+---
+"xlog": minor
+---
+
+Update app configuration with new host information

.changeset/tall-years-matter.md

@@ -0,0 +1,5 @@
+---
+"xlog": patch
+---
+
+Refactor logo animation size in SplashProvider

.changeset/yellow-books-draw.md

@@ -0,0 +1,5 @@
+---
+"xlog": minor
+---
+
+Update host names in app configuration

CONTRIBUTING.md

@@ -31,7 +31,11 @@
 
 - Create `.env.development`, `.env.test` and `.env.production` files and fill the `APP_HOST` variable for various environments.  
     ```
+    NAKED_APP_HOST=xlog.app
     APP_HOST=https://xlog.app
+    NAKED_OIA_HOST=oia.xlog.app
+    OIA_HOST=https://oia.xlog.app
+
     ```
 ### Run the app
 

app.config.ts

@@ -110,8 +110,8 @@ export default (_: ConfigContext): ExpoConfig => {
         ],
       },
       associatedDomains: [
-        `applinks:${config.host}`,
-        `applinks:oia.${config.host}`,
+        `applinks:${config.nakedAppHost}`,
+        `applinks:${config.nakedOIAHost}`,
       ],
       googleServicesFile: config.iosGoogleServicesFile,
     },
@@ -125,12 +125,12 @@ export default (_: ConfigContext): ExpoConfig => {
           data: [
             {
               scheme: "https",
-              host: `${config.host}`,
+              host: config.nakedAppHost,
               pathPrefix: "/",
             },
             {
               scheme: "https",
-              host: `oia.${config.host}`,
+              host: config.nakedOIAHost,
               pathPrefix: "/",
             },
           ],
@@ -145,7 +145,10 @@ export default (_: ConfigContext): ExpoConfig => {
       CSB_SCAN: process.env.CSB_SCAN,
       CSB_XCHAR: process.env.CSB_XCHAR,
       SENTRY_DSN: process.env.SENTRY_DSN,
-      APP_HOST: config.host,
+      APP_HOST: config.appHost,
+      NAKED_APP_HOST: config.nakedAppHost,
+      OIA_HOST: config.oiaHost,
+      NAKED_OIA_HOST: config.nakedOIAHost,
       ENV: environment,
       eas: {
         projectId: process.env.EXPO_PROJECT_ID,

scripts/set-app-config-env.js

@@ -15,14 +15,29 @@ function setAppConfigEnv() {
     dotenv.config({ path: `.env.${ENV}` });
   }
 
-  const SCHEME = process.env.APP_SCHEME;
-  const HOST = process.env.APP_HOST ?? "https://xlog.app";
+  const APP_SCHEME = process.env.APP_SCHEME;
+  if (!APP_SCHEME) throw new Error("APP_SCHEME is not defined");
+
+  const NAKED_APP_HOST = process.env.NAKED_APP_HOST;
+  if (!NAKED_APP_HOST) throw new Error("NAKED_APP_HOST is not defined");
+
+  const APP_HOST = process.env.APP_HOST;
+  if (!APP_HOST) throw new Error("APP_HOST is not defined");
+
+  const NAKED_OIA_HOST = process.env.NAKED_OIA_HOST;
+  if (!NAKED_OIA_HOST) throw new Error("NAKED_OIA_HOST is not defined");
+
+  const OIA_HOST = process.env.OIA_HOST;
+  if (!OIA_HOST) throw new Error("OIA_HOST is not defined");
 
   const envConfig = {
     development: {
       name: "xLog",
-      host: HOST,
-      scheme: `${SCHEME}.development`,
+      nakedAppHost: NAKED_APP_HOST,
+      appHost: APP_HOST,
+      nakedOIAHost: NAKED_OIA_HOST,
+      oiaHost: OIA_HOST,
+      scheme: `${APP_SCHEME}.development`,
       icon: "./assets/icon.development.png",
       androidGoogleServicesFile: IS_EAS_CI
         ? process.env.ANDROID_GOOGLE_SERVICES_DEVELOPMENT
@@ -33,8 +48,11 @@ function setAppConfigEnv() {
     },
     test: {
       name: "xLog",
-      host: HOST,
-      scheme: `${SCHEME}.test`,
+      nakedAppHost: NAKED_APP_HOST,
+      appHost: APP_HOST,
+      nakedOIAHost: NAKED_OIA_HOST,
+      oiaHost: OIA_HOST,
+      scheme: `${APP_SCHEME}.test`,
       icon: "./assets/icon.test.png",
       androidGoogleServicesFile: IS_EAS_CI
         ? process.env.ANDROID_GOOGLE_SERVICES_TEST
@@ -45,8 +63,11 @@ function setAppConfigEnv() {
     },
     production: {
       name: "xLog",
-      host: HOST,
-      scheme: SCHEME,
+      nakedAppHost: NAKED_APP_HOST,
+      appHost: APP_HOST,
+      nakedOIAHost: NAKED_OIA_HOST,
+      oiaHost: OIA_HOST,
+      scheme: APP_SCHEME,
       icon: "./assets/icon.png",
       androidGoogleServicesFile: IS_EAS_CI
         ? process.env.ANDROID_GOOGLE_SERVICES_PRODUCTION

src/components/FeedList/FeedListItem/index.tsx

@@ -1,14 +1,14 @@
 import type { FC } from "react";
-import React, { useEffect, useMemo } from "react";
+import React from "react";
 import type { ViewStyle } from "react-native";
-import { Image as RNImage, StyleSheet } from "react-native";
+import { StyleSheet } from "react-native";
 import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 import Animated, { FadeInDown } from "react-native-reanimated";
 
 import { Eye } from "@tamagui/lucide-icons";
 import { BlurView } from "expo-blur";
 import { Image } from "expo-image";
-import { SizableText, Spacer, Stack, Text, XStack } from "tamagui";
+import { SizableText, Stack, Text, XStack } from "tamagui";
 
 import { Avatar } from "@/components/Avatar";
 import { Center } from "@/components/Base/Center";
@@ -17,7 +17,6 @@ import { useCoverImage } from "@/hooks/use-cover-image";
 import { useImageSize } from "@/hooks/use-image-size";
 import { useRootNavigation } from "@/hooks/use-navigation";
 import type { ExpandedNote } from "@/types/crossbell";
-import { cacheStorage } from "@/utils/cache-storage";
 import { computedBgIdx } from "@/utils/computed-bg-idx";
 import { withCompressedImage } from "@/utils/get-compressed-image-url";
 import { toGateway } from "@/utils/ipfs-parser";

src/constants/env.ts

@@ -9,7 +9,15 @@ export const WALLET_RELAY_URL = "wss://relay.walletconnect.com";
 export const CSB_SCAN = Constants.expoConfig.extra?.CSB_SCAN || "https://scan.crossbell.io";
 export const CSB_XCHAR = Constants.expoConfig.extra?.CSB_XCHAR || "https://xchar.app";
 export const ENV = Constants.expoConfig.extra?.ENV || "production";
+export const NAKED_APP_HOST = Constants.expoConfig.extra?.NAKED_APP_HOST || "xlog.app";
 export const APP_HOST = Constants.expoConfig.extra?.APP_HOST || "https://xlog.app";
-console.log("Current HOST: ", APP_HOST);
+export const NAKED_OIA_HOST = Constants.expoConfig.extra?.NAKED_OIA_HOST || "oia.xlog.app";
+export const OIA_HOST = Constants.expoConfig.extra?.OIA_HOST || "https://oia.xlog.app";
+console.log("HOST LIST: ", {
+  APP_HOST,
+  NAKED_APP_HOST,
+  OIA_HOST,
+  NAKED_OIA_HOST,
+});
 console.log("Current ENV: ", ENV);
 export const EXPO_PROJECT_ID = Constants.expoConfig.extra?.eas?.projectId;

src/constants/index.ts

@@ -2,15 +2,14 @@ import { Platform } from "react-native";
 
 import Constants from "expo-constants";
 
-import { APP_HOST, ENV } from "./env";
+import { ENV } from "./env";
 
 import packageJson from "../../package.json";
 
 export const IS_WEB = typeof window !== "undefined";
 export const IS_PROD = ENV === "production";
 export const IS_DEV = ENV === "development";
 export const IS_TEST = ENV === "test";
-export const DOMAIN = APP_HOST.replace(/https?:\/\//, "");
 export const VERSION = packageJson.version;
 export const APP_SCHEME = Constants.expoConfig.scheme;
 export const IS_IOS = Platform.OS === "ios";

src/pages/Feed/ShortsExplorerBanner.tsx

@@ -21,6 +21,8 @@ import { computedBgIdx } from "@/utils/computed-bg-idx";
 import { withCompressedImage } from "@/utils/get-compressed-image-url";
 import { toGateway } from "@/utils/ipfs-parser";
 
+import { Skeleton } from "./Skeleton";
+
 interface Props { }
 
 const { width } = Dimensions.get("window");
@@ -70,6 +72,7 @@ export const ShortsExplorerBanner: FC<Props> = () => {
         panGestureHandlerProps={{ activeOffsetX: [-10, 10] }}
         vertical={false}
       />
+      {shorts.isLoading && <Skeleton height={200}/>}
     </YStack>
   );
 };

src/pages/Feed/Skeleton.tsx

@@ -0,0 +1,43 @@
+import type { FC } from "react";
+import React from "react";
+import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+
+import ContentLoader, { Rect } from "react-content-loader/native";
+import { useWindowDimensions, YStack } from "tamagui";
+
+export const Skeleton: FC<{
+  height: number
+}> = ({
+  height,
+}) => {
+  const { width } = useWindowDimensions();
+
+  const top = 50;
+  const itemHeight = height - 40;
+  const itemWidth = width / 1.3;
+
+  return (
+    <Animated.View
+      style={[{
+        height,
+        top,
+        position: "absolute",
+        width: "100%",
+      }]}
+      entering={FadeIn.duration(300)}
+      exiting={FadeOut.duration(1000)}
+    >
+      <YStack height={height} alignItems={"flex-start"} justifyContent={"flex-start"}>
+        <ContentLoader
+          viewBox={`0 0 ${width} ${height}`}
+          backgroundColor={"gray"}
+          opacity="0.3"
+        >
+          <Rect x={-itemWidth * 0.4 / 1.4} y={itemHeight / 2 - itemHeight * 0.85 / 2} rx="15" ry="15" width={itemWidth * 0.4} height={itemHeight * 0.85} />
+          <Rect x={width / 2 - itemWidth / 2} y={0} rx="15" ry="15" width={itemWidth} height={itemHeight} />
+          <Rect x={width - itemWidth * 0.4 / 3.4} y={itemHeight / 2 - itemHeight * 0.85 / 2} rx="15" ry="15" width={itemWidth * 0.4} height={itemHeight * 0.85} />
+        </ContentLoader>
+      </YStack>
+    </Animated.View>
+  );
+};

src/pages/PostDetails/Header.tsx

@@ -65,7 +65,7 @@ export const Header: FC<Props> = (props) => {
 
   const data = isShort
     ? attachments.map(attachment => withCompressedImage(toGateway(attachment.address), "high")).filter(Boolean)
-    : [withCompressedImage(coverImage, "high")];
+    : [coverImage];
 
   const userinfoEle = (
     <Stack minHeight={28}>

src/providers/navigation-provider.tsx

@@ -5,7 +5,7 @@ import type { LinkingOptions, NavigationState } from "@react-navigation/native";
 import { DefaultTheme, NavigationContainer } from "@react-navigation/native";
 import * as Linking from "expo-linking";
 
-import { APP_HOST } from "@/constants/env";
+import { OIA_HOST, APP_HOST } from "@/constants/env";
 import { useColors } from "@/hooks/use-colors";
 import { GA } from "@/utils/GA";
 import { getActiveRoute } from "@/utils/get-active-route";
@@ -17,8 +17,8 @@ export const NavigationProvider: FC<React.PropsWithChildren<{}>> = ({ children }
   const linking: LinkingOptions<ReactNavigation.RootParamList> = {
     prefixes: [
       prefix,
-      `https://${APP_HOST}`,
-      `https://oia.${APP_HOST}`,
+      APP_HOST,
+      OIA_HOST,
     ],
     config: {
       screens: {

src/providers/splash-provider.tsx

@@ -35,8 +35,8 @@ export const SplashProvider: FC<PropsWithChildren> = ({ children }) => {
 
   const logoAnimStyles = useAnimatedStyle(() => {
     return {
-      width: interpolate(logoAnimVal.value, [0, 1], [0, size]),
-      height: interpolate(logoAnimVal.value, [0, 1], [0, size]),
+      width: size,
+      height: size,
       opacity: interpolate(logoAnimVal.value, [0, 1], [0, 1]),
     };
   }, []);

src/utils/get-site-link.ts

@@ -1,4 +1,5 @@
-import { DOMAIN, IS_DEV } from "@/constants/index";
+import { NAKED_APP_HOST } from "@/constants/env";
+import { IS_DEV } from "@/constants/index";
 
 export const getSiteLink = ({
   domain,
@@ -15,8 +16,8 @@ export const getSiteLink = ({
     return `${protocol}${domain}`;
   }
   if (noProtocol) {
-    return `${subdomain}.${DOMAIN}`;
+    return `${subdomain}.${NAKED_APP_HOST}`;
   }
 
-  return `${protocol}${subdomain}.${DOMAIN}`;
+  return `${protocol}${subdomain}.${NAKED_APP_HOST}`;
 };