diff --git a/.changeset/new-islands-dress.md b/.changeset/new-islands-dress.md new file mode 100644 index 00000000..93edcacf --- /dev/null +++ b/.changeset/new-islands-dress.md @@ -0,0 +1,5 @@ +--- +"xlog": patch +--- + +Added skeleton for carousel and optimized the display performance of details page. diff --git a/.changeset/sour-waves-sniff.md b/.changeset/sour-waves-sniff.md new file mode 100644 index 00000000..513d7cd7 --- /dev/null +++ b/.changeset/sour-waves-sniff.md @@ -0,0 +1,5 @@ +--- +"xlog": minor +--- + +Update app configuration with new host information diff --git a/.changeset/tall-years-matter.md b/.changeset/tall-years-matter.md new file mode 100644 index 00000000..362606cd --- /dev/null +++ b/.changeset/tall-years-matter.md @@ -0,0 +1,5 @@ +--- +"xlog": patch +--- + +Refactor logo animation size in SplashProvider diff --git a/.changeset/yellow-books-draw.md b/.changeset/yellow-books-draw.md new file mode 100644 index 00000000..c800b98b --- /dev/null +++ b/.changeset/yellow-books-draw.md @@ -0,0 +1,5 @@ +--- +"xlog": minor +--- + +Update host names in app configuration diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 891b0ca9..6a1f61b6 100644 --- a/CONTRIBUTING.md +++ b/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 diff --git a/app.config.ts b/app.config.ts index 13a65391..2f85dfeb 100644 --- a/app.config.ts +++ b/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, diff --git a/scripts/set-app-config-env.js b/scripts/set-app-config-env.js index c9287d5e..09effef1 100644 --- a/scripts/set-app-config-env.js +++ b/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 diff --git a/src/components/FeedList/FeedListItem/index.tsx b/src/components/FeedList/FeedListItem/index.tsx index 41dba339..966e7bd6 100644 --- a/src/components/FeedList/FeedListItem/index.tsx +++ b/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"; diff --git a/src/constants/env.ts b/src/constants/env.ts index 367e33c6..de4e15bd 100644 --- a/src/constants/env.ts +++ b/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; diff --git a/src/constants/index.ts b/src/constants/index.ts index 189708b2..d872c4f1 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -2,7 +2,7 @@ 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"; @@ -10,7 +10,6 @@ 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"; diff --git a/src/pages/Feed/ShortsExplorerBanner.tsx b/src/pages/Feed/ShortsExplorerBanner.tsx index 138478a0..bd0d6ee2 100644 --- a/src/pages/Feed/ShortsExplorerBanner.tsx +++ b/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 = () => { panGestureHandlerProps={{ activeOffsetX: [-10, 10] }} vertical={false} /> + {shorts.isLoading && } ); }; diff --git a/src/pages/Feed/Skeleton.tsx b/src/pages/Feed/Skeleton.tsx new file mode 100644 index 00000000..21c248c0 --- /dev/null +++ b/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 ( + + + + + + + + + + ); +}; diff --git a/src/pages/PostDetails/Header.tsx b/src/pages/PostDetails/Header.tsx index 4b8d510a..9d81b09c 100644 --- a/src/pages/PostDetails/Header.tsx +++ b/src/pages/PostDetails/Header.tsx @@ -65,7 +65,7 @@ export const Header: FC = (props) => { const data = isShort ? attachments.map(attachment => withCompressedImage(toGateway(attachment.address), "high")).filter(Boolean) - : [withCompressedImage(coverImage, "high")]; + : [coverImage]; const userinfoEle = ( diff --git a/src/providers/navigation-provider.tsx b/src/providers/navigation-provider.tsx index cc08a70d..958aa18a 100644 --- a/src/providers/navigation-provider.tsx +++ b/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> = ({ children } const linking: LinkingOptions = { prefixes: [ prefix, - `https://${APP_HOST}`, - `https://oia.${APP_HOST}`, + APP_HOST, + OIA_HOST, ], config: { screens: { diff --git a/src/providers/splash-provider.tsx b/src/providers/splash-provider.tsx index 00227fb8..06776a7a 100644 --- a/src/providers/splash-provider.tsx +++ b/src/providers/splash-provider.tsx @@ -35,8 +35,8 @@ export const SplashProvider: FC = ({ 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]), }; }, []); diff --git a/src/utils/get-site-link.ts b/src/utils/get-site-link.ts index c2628f98..4bfaa20c 100644 --- a/src/utils/get-site-link.ts +++ b/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}`; };