Android app setup SNS-35

.gitignore

@@ -14,4 +14,7 @@ xnft-bundle.zip
 
 # macOS
 .DS_Store
-.env
+.env
+
+# Android
+*.apk

app.json

@@ -2,6 +2,13 @@
   "expo": {
     "name": "SNS Manager",
     "slug": "sns-manager",
-    "entryPoint": "./src/App"
+    "extra": {
+      "eas": {
+        "projectId": "6a58dd40-2599-4f45-befe-c1ebe9766c1e"
+      }
+    },
+    "android": {
+      "package": "bonfida.sns_manager"
+    }
   }
 }

babel.config.js

@@ -4,6 +4,7 @@ module.exports = function (api) {
     presets: ["babel-preset-expo"],
     plugins: [
       "transform-inline-environment-variables",
+      "react-native-reanimated/plugin",
       "macros",
       [
         "module-resolver",

eas.json

@@ -0,0 +1,15 @@
+{
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal",
+      "android": {
+        "buildType": "apk"
+      }
+    },
+    "production": {}
+  }
+}

metro.config.js

@@ -0,0 +1,4 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require('expo/metro-config');
+
+module.exports = getDefaultConfig(__dirname);

package.json

@@ -4,16 +4,20 @@
   "scripts": {
     "build:xnft": "XNFT=true expo export:web",
     "build:web": "WEB=true expo export:web && cp _headers web-build/",
+    "build:mobile-apk": "eas build -p android --profile preview --local",
     "start": "yarn build:xnt && npx xnft web",
     "bundle": "yarn build:xnft && npx xnft bundle",
     "dev": "GENERATE_SOURCEMAP=false expo start --clear --web & npx xnft --iframe http://localhost:19006",
     "dev:xnft": "XNFT=true yarn dev",
     "dev:web": "WEB=true yarn dev",
+    "dev:mobile": "expo start --dev-client --clear",
+    "dev:mobile:build": "eas build --profile development --platform android --local",
     "extract": "lingui extract",
     "compile": "lingui compile",
     "format": "npx prettier --write src/**/*.{ts,tsx}",
     "prepare": "husky install"
   },
+  "main": "./src/App",
   "dependencies": {
     "@adraffy/ens-normalize": "^1.9.0",
     "@bonfida/name-offers": "^0.0.10",
@@ -29,32 +33,39 @@
     "@lingui/macro": "^4.2.0",
     "@lingui/react": "^4.2.0",
     "@pythnetwork/client": "^2.17.0",
+    "@react-native-async-storage/async-storage": "1.17.11",
     "@react-native-clipboard/clipboard": "^1.11.2",
     "@react-navigation/bottom-tabs": "6.3.1",
     "@react-navigation/native": "6.0.10",
     "@react-navigation/native-stack": "6.6.1",
     "@react-navigation/stack": "6.2.1",
+    "@solana-mobile/mobile-wallet-adapter-protocol": "^2.0.1",
+    "@solana-mobile/mobile-wallet-adapter-protocol-web3js": "^2.0.1",
     "@solana/buffer-layout": "^4.0.1",
     "@solana/spl-token": "^0.3.7",
     "@solana/wallet-adapter-react": "^0.15.32",
     "@solana/wallet-adapter-react-ui": "^0.9.31",
     "@solana/web3.js": "^1.75.0",
     "axios": "^1.4.0",
     "buffer": "^6.0.3",
-    "expo": "~48.0.7",
+    "expo": "~48.0.18",
     "expo-blur": "~12.2.2",
     "expo-constants": "~14.2.1",
+    "expo-dev-client": "~2.2.1",
     "expo-image-picker": "~14.1.1",
     "expo-linear-gradient": "~12.1.2",
+    "expo-splash-screen": "~0.18.2",
     "expo-status-bar": "~1.4.4",
     "react": "18.2.0",
     "react-async-hook": "^4.0.0",
     "react-dom": "18.2.0",
     "react-error-overlay": "6.0.11",
     "react-native": "0.71.8",
     "react-native-gesture-handler": "~2.9.0",
+    "react-native-get-random-values": "~1.9.0",
     "react-native-heroicons": "^3.2.0",
     "react-native-modalfy": "^3.4.0",
+    "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",
     "react-native-skeleton-content": "^1.0.28",
@@ -82,6 +93,9 @@
     "xnft": "latest"
   },
   "resolutions": {
-    "react-error-overlay": "6.0.11"
-  }
+    "react-error-overlay": "6.0.11",
+    "react-native-reanimated": "2.14.4"
+  },
+  "name": "sns-manager",
+  "version": "0.0.1"
 }

src/App.tsx

@@ -1,17 +1,23 @@
+// Required to fix the issue with "crypto.getRandomValues() not supported"
+// https://github.com/uuidjs/uuid#getrandomvalues-not-supported
+// https://github.com/uuidjs/uuid/issues/416
+// TODO: load only for Android separately using .android.tsx suffix
+import "react-native-get-random-values";
+
 window.Buffer = window.Buffer || require("buffer").Buffer;
 global.Buffer = global.Buffer || require("buffer").Buffer;
 
 import { registerRootComponent } from "expo";
 import { RecoilRoot, useRecoilState } from "recoil";
-import { ActivityIndicator, View } from "react-native";
+import { ActivityIndicator, View, Text } from "react-native";
+import { ReactNode, useEffect } from "react";
 import { NavigationContainer } from "@react-navigation/native";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { useFonts, AzeretMono_400Regular } from "@expo-google-fonts/dev";
 import { HomeScreen } from "./screens/HomeScreen";
 import { ProfileScreen } from "./screens/Profile";
 import { Feather } from "@expo/vector-icons";
 import { cartState } from "./atoms/cart";
-import { Text } from "react-native";
 import tw from "./utils/tailwind";
 import { Cart } from "./screens/Cart";
 import { ModalProvider, createModalStack } from "react-native-modalfy";
@@ -21,15 +27,8 @@ import { EditPicture } from "./components/EditPicture";
 import { ProgressExplainerModal } from "./components/ProgressExplainerModal";
 import { SearchModal } from "./components/SearchModal";
 import { DiscountExplainerModal } from "./components/DiscountExplainerModal";
-import { isXnft, isMobile, isWeb } from "./utils/platform";
-import { ReactNode, useEffect, useMemo } from "react";
-import {
-  ConnectionProvider,
-  WalletProvider,
-} from "@solana/wallet-adapter-react";
-import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
+import { isXnft, isMobile, isWeb } from "@src/utils/platform";
 import { useWallet } from "./hooks/useWallet";
-import { URL } from "./utils/rpc";
 import { useReferrer } from "./hooks/useReferrer";
 import { DomainSizeModal } from "./components/DomainSizeModal";
 import { DeleteModal } from "./components/DeleteModal";
@@ -46,6 +45,7 @@ import { LanguageModal } from "./components/LanguageModal";
 import { TokenizeModal } from "./components/TokenizeModal";
 import { NavigatorTabsParamList } from "@src/types";
 import { LanguageHeader } from "@src/components/Header";
+import { SolanaProvider } from "@src/providers/SolanaProvider";
 
 const xnftjson = require("../xnft.json");
 
@@ -82,11 +82,13 @@ function TabNavigator() {
   useReferrer();
   const [cart] = useRecoilState(cartState);
   const { publicKey, setVisible, connected } = useWallet();
+
   const { currentLanguage } = useLanguageContext();
 
   useEffect(() => {
     console.table(isMobile, isXnft, isWeb);
-    if (isXnft) return;
+    // Do not authorize automatically
+    if (isXnft || isMobile) return;
     if (!connected) {
       setVisible(true);
     }
@@ -181,7 +183,7 @@ function App() {
   }
 
   return (
-    <Wrap>
+    <SolanaProvider>
       <RecoilRoot>
         <NavigationContainer>
           <LanguageProvider i18n={i18n}>
@@ -193,34 +195,8 @@ function App() {
           </LanguageProvider>
         </NavigationContainer>
       </RecoilRoot>
-    </Wrap>
+    </SolanaProvider>
   );
 }
 
-const Wrap = ({ children }: { children: ReactNode }) => {
-  const wallets = useMemo(() => [], []);
-  if (isXnft) {
-    return <>{children}</>;
-  }
-  if (isWeb) {
-    return (
-      <ConnectionProvider endpoint={URL}>
-        <WalletProvider autoConnect wallets={wallets}>
-          <WalletModalProvider>{children}</WalletModalProvider>
-        </WalletProvider>
-      </ConnectionProvider>
-    );
-  }
-  if (isMobile) {
-    return (
-      <ConnectionProvider endpoint={URL}>
-        <WalletProvider autoConnect wallets={wallets}>
-          <WalletModalProvider>{children}</WalletModalProvider>
-        </WalletProvider>
-      </ConnectionProvider>
-    );
-  }
-  return <>{children}</>;
-};
-
-export default registerRootComponent(App);
+registerRootComponent(App);

src/components/DomainSearchResultRow.tsx

@@ -76,7 +76,7 @@ export const DomainSearchResultRow = ({
               : () => navigation.navigate("domain-view", { domain })
           }
           style={[
-            tw`p-2 h-[32px] w-[32px] flex items-center justify-center`,
+            tw`h-[32px] w-[32px] flex items-center justify-center`,
             available && tw`border rounded-md border-brand-primary`,
             available && !inCart && tw`bg-brand-primary`,
           ]}

src/components/DomainSizeModal.tsx

@@ -53,17 +53,18 @@ export const DomainSizeModal = ({
           store on your domain.
         </Trans>
       </Text>
-      <Text style={tw`mt-2 text-xs`}>
+      <View style={tw`flex flex-row gap-1 mt-2`}>
         <MaterialCommunityIcons
           name="information-outline"
           size={16}
-          style={tw`mr-1`}
           color={tw.color("content-warning")}
         />
-        <Trans>
-          Each additional kb of memory costs around 0.007 SOL (0.001 USDC)
-        </Trans>
-      </Text>
+        <Text style={tw`text-xs`}>
+          <Trans>
+            Each additional kb of memory costs around 0.007 SOL (0.001 USDC)
+          </Trans>
+        </Text>
+      </View>
 
       <View style={tw`flex flex-row flex-wrap items-center gap-3 mt-3`}>
         {LIST.map((e) => {

src/components/EditPicture.tsx

@@ -224,7 +224,6 @@ export const EditPicture = ({
       <UiButton
         disabled={loading}
         onPress={connected ? handlePickImage : () => setVisible(true)}
-        style={tw`flex flex-row items-center justify-center`}
         content={t`Upload a picture...`}
         loading={loading}
       />

src/components/OrderSummary.tsx

@@ -32,7 +32,7 @@ export const OrderSummary = ({
 
       <Row
         value={
-          <Text style={tw`flex flex-col items-end`}>
+          <View style={tw`flex flex-col items-end`}>
             <Text>
               {isFida && (
                 <>
@@ -50,7 +50,7 @@ export const OrderSummary = ({
             <Text style={tw`text-xs font-medium text-content-tertiary`}>
               {format(totalUsd)}
             </Text>
-          </Text>
+          </View>
         }
         label={t`Total`}
       />
@@ -59,10 +59,11 @@ export const OrderSummary = ({
       <Row
         value={isFida ? "5%" : "0%"}
         label={
-          <>
-            <Trans>Discount</Trans>
+          <View style={tw`flex flex-row items-center gap-1`}>
+            <Text>
+              <Trans>Discount</Trans>
+            </Text>
             <TouchableOpacity
-              style={tw`ml-1`}
               onPress={() => openModal("DiscountExplainerModal")}
             >
               <MaterialCommunityIcons
@@ -71,7 +72,7 @@ export const OrderSummary = ({
                 color={tw.color("brand-primary")}
               />
             </TouchableOpacity>
-          </>
+          </View>
         }
       />
     </View>

src/components/ProfileBlock.tsx

@@ -1,5 +1,5 @@
 import { Text, View, TouchableOpacity, Image } from "react-native";
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
 import Clipboard from "@react-native-clipboard/clipboard";
 import { t } from "@lingui/macro";
 import { LinearGradient } from "expo-linear-gradient";
@@ -30,6 +30,7 @@ export const ProfileBlock = ({
   const isOwner = owner === publicKey?.toBase58();
   const favorite = useFavoriteDomain(owner);
   const { openModal } = useModal();
+  const [containerWidth, setContainerWidth] = useState(0);
 
   return (
     <LinearGradient
@@ -38,18 +39,21 @@ export const ProfileBlock = ({
         tw.color("brand-accent") as string,
       ]}
       style={tw`mt-15 p-3 pt-[50px] rounded-[20px] relative`}
+      onLayout={(event) => {
+        setContainerWidth(event.nativeEvent.layout.width);
+      }}
     >
       <View
         style={[
           tw`w-[100px] h-[100px] absolute top-[-60px]`,
-          // for some reason tailwild properties doesn't work with calc
-          { left: "calc(50% - 50px)" },
+          // We cannot use calc(50% - 50px) because of react-native limitations
+          { left: containerWidth / 2 - 50 },
         ]}
       >
         <Image
           source={
             picRecord.result
-              ? picRecord.result
+              ? { uri: picRecord.result }
               : require("@assets/default-pic.png")
           }
           style={tw`w-full h-full rounded-full`}