Merge pull request #184 from Crossbell-Box/develop

Develop

.changeset/large-actors-play.md

@@ -0,0 +1,5 @@
+---
+"xlog": minor
+---
+
+Using expo-web-browser instead of webview.

.env.example

@@ -1,11 +1,11 @@
+OWNER=crossbell
+CSB_XCHAR=https://xchar.app
 APP_SCHEME=com.crossbell.xlog
+CSB_SCAN=https://scan.crossbell.io
+INFURA_ID=8748e6d55ddd48f09824fbac1f6e5e39
 WALLET_PROJECT_ID=23fa8f71967c502a588df6193ae8bbbe
 EXPO_PROJECT_ID=39844d09-fa09-4fe7-af02-8a8ac78100e6
-CSB_SCAN=https://scan.crossbell.io
-CSB_XCHAR=https://xchar.app
-OWNER=crossbell
 UPDATES_URL=https://u.expo.dev/39844d09-fa09-4fe7-af02-8a8ac78100e6
-INFURA_ID=8748e6d55ddd48f09824fbac1f6e5e39
 SENTRY_DSN=
 SENTRY_ORG=
 SENTRY_PROJECT=

CONTRIBUTING.md

@@ -1,8 +1,65 @@
 # Contributing
-> We will publish the preview version of the app for testing, and once the PR is merged into the main branch, we will release it to the app store. 🚀
 
-- Fork it.
-- Submit PR to `develop` branch.
+
+## Development
+
+### Prerequisites
+
+- Fork this repository and clone it to your local machine.
+
+    ```sh
+    git clone https://github.com/Crossbell-Box/xLog-mobile.git
+    ```
+- We recommend installing [ni](https://github.com/antfu/ni) to help switching between repos using different package managers.
+
+    ```sh
+    npm install @antfu/ni --global
+    ```
+
+
+- Duplicate `.env.example` and rename it to `.env.common`.  
+
+    ```sh
+    cp .env.example .env.common
+    ```
+
+    Generate types for environment variables.
+
+    ```sh
+    nr generate-env-types
+    ```
+
+- Create `.env.development`, `.env.staging` and `.env.production` files and fill the `APP_HOST` variable for various environments.  
+    ```
+    APP_HOST=xlog.app
+    ```
+### Run the app
+
+- Install dependencies
+
+    ```sh
+    ni
+    ```
+
+- Prebuild the project
+
+    ```sh
+    nr prebuild:dev
+    ```
+
+- Start the app
+
+    ```sh
+    # If you want to run on your real device, you need to add `-d` flag.
+    nr ios 
+    nr android
+    ```
+
+## Creating Pull Requests
+> `xLog-preview` will be released with preview version when PR merged to `main` branch and `xLog` will be submit to App Store when we think it's ready.
+
+- Create a new changeset via `npx changeset`.
+- PR to `develop` branch.
 
 ## Changeset
 

README.md

@@ -1,75 +1,46 @@
 # xLog-mobile  
 
-> Mobile app for the first on-chain and open-source blogging platform for everyone. 
+> The best on-chain and open-source blogging community for everyone. Now, Carry your blockchain creativity world in your pocket and access it anywhere, anytime!
 
-[![Discord](https://img.shields.io/badge/chat-Discord-5865F2.svg?logo=discord&style=flat-square)](https://discord.gg/46VJMMVCuF)  [![Twitter](https://img.shields.io/badge/Twitter-@_xLog-1d9bf0.svg?logo=twitter&style=flat-square)](https://twitter.com/_xLog)  [![build](https://img.shields.io/github/actions/workflow/status/Crossbell-Box/xLog/docker-build-push-prod.yml?logo=github&style=flat-square)](https://github.com/Crossbell-Box/xLog/actions/workflows/docker-build-push.yml)  [![iOS Download](https://img.shields.io/badge/iOS-Download-000000?style=flat-square&logo=apple)](https://apps.apple.com/cn/app/xlog-on-chain-blogging/id6449499296)  [![Android Download](https://img.shields.io/badge/Android-Download-3DDC84?style=flat-square&logo=android)](https://play.google.com/store/apps/details?id=com.crossbell.xlog)
+[![Discord](https://img.shields.io/badge/chat-Discord-5865F2.svg?logo=discord&style=flat-square)](https://discord.gg/46VJMMVCuF)  [![Twitter](https://img.shields.io/badge/Twitter-@_xLog-1d9bf0.svg?logo=twitter&style=flat-square)](https://twitter.com/_xLog)  [![build](https://img.shields.io/github/actions/workflow/status/Crossbell-Box/xLog-mobile/release.yml?logo=github&style=flat-square)](https://github.com/Crossbell-Box/xLog-mobile/actions/workflows/release.yml)  [![iOS Download](https://img.shields.io/badge/iOS-Download-000000?style=flat-square&logo=apple)](https://apps.apple.com/cn/app/xlog-on-chain-blogging/id6449499296)  [![Android Download](https://img.shields.io/badge/Android-Download-3DDC84?style=flat-square&logo=android)](https://play.google.com/store/apps/details?id=com.crossbell.xlog)
 
+<br/>
 <p align="center">
     <img src="./assets/download-qrcode.png" width="20%" />
 </p>
 
 
-## Development
-### Prerequisites
-
-- We recommend installing [ni](https://github.com/antfu/ni) to help switching between repos using different package managers.
-
-    ```sh
-    npm install @antfu/ni --global
-    ```
-
-
-- Duplicate `.env.example` and rename it to `.env.common`.  
-
-    ```sh
-    cp .env.example .env.common
-    ```
-
-    Generate types for environment variables.
-
-    ```sh
-    nr generate-env-types
-    ```
-
-- Create `.env.development`, `.env.staging` and `.env.production` files and fill the `APP_HOST` variable for various environments.  
-    ```
-    APP_HOST=xlog.app
-    ```
-
-
-### Usage
-
-- Fork this repository and clone it to your local machine.
-
-    ```sh
-    git clone https://github.com/Crossbell-Box/xLog-mobile.git
-    ```
+<p align="center">
+<img src="assets/screenshots/ios/IMG_9327-8249_iphone13progold_portrait.png" width="45%" /> 
+<img src="assets/screenshots/ios/IMG_9328-8247_iphone13progold_portrait.png" width="45%" />
+</p>
 
-- Install dependencies
+<p align="center">
+<img src="assets/screenshots/ios/IMG_9329-8245_iphone13progold_portrait.png" width="45%" /> 
+<img src="assets/screenshots/ios/IMG_9330-8243_iphone13progold_portrait.png" width="45%" />
+</p>
 
-    ```sh
-    ni
-    ```
+<p align="center">
+<img src="assets/screenshots/ios/IMG_9332-8241_iphone13progold_portrait.png" width="45%" /> 
+<img src="assets/screenshots/ios/IMG_9333-8239_iphone13progold_portrait.png" width="45%" />
+</p>
 
-- Prebuild the project
+<p align="center">
+<img src="assets/screenshots/ios/IMG_9334-8237_iphone13progold_portrait.png" width="45%" /> 
+<img src="assets/screenshots/ios/IMG_9335-8235_iphone13progold_portrait.png" width="45%" />
+</p>
 
-    ```sh
-    nr prebuild:dev
-    ```
+<p align="center">
+<img src="assets/screenshots/ios/IMG_9336-8233_iphone13progold_portrait.png" width="45%" /> 
+<img src="assets/screenshots/ios/IMG_9354-9872_iphone13progold_portrait.png" width="45%" />
+</p>
 
-- Start the app
-
-    ```sh
-    # If you want to run on your real device, you need to add `-d` flag.
-    nr ios 
-    nr android
-    ```
+<p align="center">
+<img src="assets/screenshots/ios/IMG_9355-9869_iphone13progold_portrait.png" width="45%" /> 
+<img src="assets/screenshots/ios/IMG_9356-9866_iphone13progold_portrait.png" width="45%" />
+</p>
 
-### Publishing
-Refer to this [document](https://docs.expo.dev/build/setup/) and check scripts in the [package.json](./package.json) file.
 
-### Continuous Integration
-Refer to this [document](https://docs.expo.dev/eas-update/how-eas-update-works/) and check CI configuration files in the [.github/workflows](./.github/workflows) directory.
 
 ## Contributing
 [More details](./CONTRIBUTING.md)

app.config.ts

@@ -3,7 +3,7 @@ import type { ExpoConfig, ConfigContext } from "expo/config";
 
 import setAppConfigEnv from "./scripts/set-app-config-env.js";
 
-const { appConfig, environment, decreasedVersion } = setAppConfigEnv();
+const { appConfig, environment, decreasedVersion, IS_PROD } = setAppConfigEnv();
 
 const config = appConfig;
 
@@ -62,7 +62,7 @@ export default (_: ConfigContext): ExpoConfig => {
       ],
       "expo-localization",
       "sentry-expo",
-      "@react-native-firebase/app",
+      ...IS_PROD ? ["@react-native-firebase/app"] : [],
       "./plugins/with-react-native-firebase.js",
     ],
     splash: {
@@ -82,15 +82,14 @@ export default (_: ConfigContext): ExpoConfig => {
     ios: {
       supportsTablet: true,
       bundleIdentifier: config.scheme,
-      googleServicesFile: config.iosGoogleServicesFile,
       associatedDomains: [
         `applinks:${config.host}`,
         `applinks:oia.${config.host}`,
       ],
+      googleServicesFile: config.iosGoogleServicesFile,
     },
     android: {
       package: config.scheme,
-      googleServicesFile: config.androidGoogleServicesFile,
       intentFilters: [
         {
           action: "VIEW",
@@ -110,6 +109,7 @@ export default (_: ConfigContext): ExpoConfig => {
           category: ["BROWSABLE", "DEFAULT"],
         },
       ],
+      googleServicesFile: config.androidGoogleServicesFile,
     },
     extra: {
       WALLET_PROJECT_ID: process.env.WALLET_PROJECT_ID,

babel.config.js

@@ -4,6 +4,9 @@ const fs = require("fs");
 const path = require("path");
 const srcDir = path.resolve(__dirname, "src");
 const dirs = fs.readdirSync(srcDir).filter(file => fs.statSync(path.join(srcDir, file)).isDirectory());
+const { resolve } = require("path");
+
+const isProd = process.env.NODE_ENV === "production";
 
 module.exports = function (api) {
   api.cache(true);
@@ -24,6 +27,7 @@ module.exports = function (api) {
           }, {
             "crossbell/network": path.resolve(__dirname, "node_modules/crossbell/dist/network.js"),
             "crossbell/ipfs": path.resolve(__dirname, "node_modules/crossbell/dist/ipfs.js"),
+            ...(isProd ? {} : { "@react-native-firebase/analytics": resolve(__dirname, "./mocks/analytics.js") }),
           }),
         },
       ],

metro.config.js

@@ -6,5 +6,6 @@ module.exports = (async () => {
     ...(config.resolver.extraNodeModules || {}),
     ...(require("node-libs-expo")),
   };
+
   return config;
 })();

mocks/analytics.js

@@ -0,0 +1,13 @@
+const fakerFn = fnName => (...args) => {
+  // eslint-disable-next-line no-console
+  console.log(`[GA-${fnName}]: ${args.map(arg => JSON.stringify(arg)).join(", ")}`);
+  return Promise.resolve();
+};
+
+export default () => new Proxy({}, {
+  get: (target, name) => {
+    if (typeof name === "string") {
+      return fakerFn(name);
+    }
+  },
+});

package.json

@@ -127,6 +127,7 @@
     "expo-status-bar": "~1.4.4",
     "expo-system-ui": "~2.2.1",
     "expo-updates": "~0.16.4",
+    "expo-web-browser": "~12.1.1",
     "graphql": "^16.7.1",
     "hardhat": "2.0.6",
     "https-browserify": "^0.0.1",

scripts/set-app-config-env.js

@@ -1,13 +1,22 @@
+const fs = require("fs");
+const { join } = require("path");
+
 const dotenv = require("dotenv");
 
 const { version } = require("../package.json");
 
+function checkFileExists(path) {
+  if (fs.existsSync(join(__dirname, "..", path))) {
+    return path;
+  }
+
+  return undefined;
+}
+
 function setAppConfigEnv() {
   const ENV = process.env.NODE_ENV ?? "production";
   const IS_EAS_CI = process.env.EAS_BUILD === "true";
 
-  console.log("ENV:", process.env);
-
   if (IS_EAS_CI) {
     dotenv.config({ path: process.env.ENV_FILE_COMMON });
     dotenv.config({ path: process.env[`ENV_FILE_${ENV.toUpperCase()}`] });
@@ -28,24 +37,36 @@ function setAppConfigEnv() {
       host: HOST,
       scheme: `${SCHEME}.development`,
       icon: "./assets/icon.development.png",
-      androidGoogleServicesFile: IS_EAS_CI ? process.env.ANDROID_GOOGLE_SERVICES_DEVELOPMENT : "./google-services.development.json",
-      iosGoogleServicesFile: IS_EAS_CI ? process.env.IOS_GOOGLE_SERVICES_DEVELOPMENT : "./GoogleService-Info.development.plist",
+      androidGoogleServicesFile: IS_EAS_CI
+        ? process.env.ANDROID_GOOGLE_SERVICES_DEVELOPMENT
+        : checkFileExists("./google-services.development.json"),
+      iosGoogleServicesFile: IS_EAS_CI
+        ? process.env.IOS_GOOGLE_SERVICES_DEVELOPMENT
+        : checkFileExists("./GoogleService-Info.development.plist"),
     },
     staging: {
       name: "xLog-preview",
       host: HOST,
       scheme: `${SCHEME}.staging`,
       icon: "./assets/icon.staging.png",
-      androidGoogleServicesFile: IS_EAS_CI ? process.env.ANDROID_GOOGLE_SERVICES_STAGING : "./google-services.staging.json",
-      iosGoogleServicesFile: IS_EAS_CI ? process.env.IOS_GOOGLE_SERVICES_STAGING : "./GoogleService-Info.staging.plist",
+      androidGoogleServicesFile: IS_EAS_CI
+        ? process.env.ANDROID_GOOGLE_SERVICES_STAGING
+        : checkFileExists("./google-services.staging.json"),
+      iosGoogleServicesFile: IS_EAS_CI
+        ? process.env.IOS_GOOGLE_SERVICES_STAGING
+        : checkFileExists("./GoogleService-Info.staging.plist"),
     },
     production: {
       name: "xLog",
       host: HOST,
       scheme: SCHEME,
       icon: "./assets/icon.png",
-      androidGoogleServicesFile: IS_EAS_CI ? process.env.ANDROID_GOOGLE_SERVICES_PRODUCTION : "./google-services.production.json",
-      iosGoogleServicesFile: IS_EAS_CI ? process.env.IOS_GOOGLE_SERVICES_PRODUCTION : "./GoogleService-Info.production.plist",
+      androidGoogleServicesFile: IS_EAS_CI
+        ? process.env.ANDROID_GOOGLE_SERVICES_PRODUCTION
+        : checkFileExists("./google-services.production.json"),
+      iosGoogleServicesFile: IS_EAS_CI
+        ? process.env.IOS_GOOGLE_SERVICES_PRODUCTION
+        : checkFileExists("./GoogleService-Info.production.plist"),
     },
   };
 
@@ -64,6 +85,9 @@ function setAppConfigEnv() {
     appConfig: envConfig[ENV],
     decreasedVersion: decrementVersion(version),
     environment: ENV,
+    IS_DEV: ENV === "development",
+    IS_STAGING: ENV === "staging",
+    IS_PROD: ENV === "production",
   };
 }
 

shim.js

@@ -5,7 +5,6 @@ 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 {

src/components/ConnectEmailButton/index.tsx

@@ -19,6 +19,16 @@ export const ConnectEmailButton = (props: ButtonProps) => {
     navigation.navigate("EmailLogin");
   };
 
+  // const openWebPage = async () => {
+  //   const redirectUrl = `${APP_SCHEME}://auth`;
+  //   const requestUrl = new URL("http://192.168.1.190:9080");
+  //   requestUrl.searchParams.set("redirect_uri", redirectUrl);
+  //   const result = await WebBrowser.openAuthSessionAsync(
+  //     requestUrl.toString(),
+  //     redirectUrl,
+  //   );
+  // };
+
   if (account) return null;
 
   return (

src/utils/GA.ts

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