Global redesign (#24)

* fix: Expo missmatched dependencies

* feat: Define new colors in the palette

* feat: Redesign bottom navigation bar

* feat: Add src path alias to babel and tsconfig

* feat: reorganize Home view and types.tsx location

* chore: Add a new alias for assets directory

* feat: Add content-border global color

* feat: Add generic TextInput and Button components

* feat: Redesign HomeScreen

* chore: Code cleanup

* feat: Improve custom UI components

* feat: Improve CustomTextInput to autohandle Esc

* (feat|fix): Homescreen

* fix: CustomTextInput clear icon color

* feat: Add helper to poopular-tokens

* feat: Redesign domain search result page

* chore: Increate domain search result arrow icon size

* feat: Change profile page layout padding

* feat: Redesign language modal

* fix: lang icon color on homescreen

* fix: Home icon in navbar

* feat: Improve profile empty state design

* feat: Show user's address on empty profile page

* feat: Improve abbreviate util

* feat: Improve domain row design

* feat: Partially improve profile page design

* feat: Redesign profile progress bar

* feat: Add user profile pic to domain row

* feat: Redesign subdomains on profile page

* chore: small design improvements

* chore: Improve loading state

* feat: Move ProfileBlock to a separate component

* feat: Improve empty search result for profile filter

* feat: Load top sales on search page when prompt is empty

* feat: Improve modal wrapper component style

* feat: Improve button component style

* feat: Add pages dynamic header

* feat: Partially redesign Domain page

* feat: Improve InputText label

* feat: Intermediate DomainView update

* chore: Design improvements

* feat: Improve ErrorModal

* feat: Add domains displaying on domain view

* feat: Improve CustomTextInput disabled state

* feat: Improve DomainView for non-owner

* feat: Update dependencies

* chore: Update content-error palette color

* feat: Improve success modals

* feat: Add empty cart design

* feat: Split cart into separate components

* feat: Redesign first step of the Cart page

* feat: Cart redesign

* chore: Cleanup imports

* fix: Navigation icons on desktop

* chore: fix tw watning

* chore: Code fixes and improvements

* feat: Add copy to clipboard on domain view

* chore: Cleanup dead code

* feat: Add domain metadata editing functionality

* feat: Implement single sign the domain data form

* feat: Implement sticky bars and buttons for domain view

* feat: Show active tab on domain page

* fix `checkEnoughFunds`

* fix: properly fix `checkEnoughFunds` in SOL case

* fix: use `Trans` instead of `t` for `domainProsTranslations`

* fix: Progress explainer modal

* feat: Upgrade `twrnc` package

* fix: Success state after domain purchase

* feat: Improve cart steps UI

* feat: Upgrade `@bonfida/sns-react` package

* feat: Improve error/success messages displaying

* feat: Improve errors handling

* fix: "Not subdomains" message for non-own profiles

* feat: Improve DomainView's skeleton

* fix: search by pubkey

* add formatting script

* chore: Prettify codebase with default prettier options

* feat: Update README app screenshots

* feat: Automatically close domain size selector on value select

* fix xnft.json screenshots

* run prettier

* feat: Add more informative messages to actions

* feat: Add notice that NFT domain cannot add subdomains

* feat: Improve long domain names displaying

* chore: prettier run

* feat: Add onboarding modal

* feat: Add prettier config

* fix: TS warnings

* feat: Add warning message about storage size cose

* feat: Improve tabs highlighting

* chore: Remove useless nullish check

* spanish translation

* French translation

* Adds Korean Translation + Fix Translation Rendering Issue (#25)

* fix: extract new translations

* feat: added more translations

* fix: function call text in a mapped record

* fix French translation

* fix Spanish translation

* fix Turkish translation

* compile translations

* fix: complete TR translation

* feat: Add missing translation function

* chinese translation + fix missing key

---------

Co-authored-by: Dmytro Svyrydenko <[email protected]>
Co-authored-by: DR497 <[email protected]>
Co-authored-by: MJ Lee <[email protected]>

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+# Run prettier on all staged files that match patter, automatically fix them
+# and add to staged files, so they will be automatically commited
+npx pretty-quick --staged --pattern "src/**/*.{ts,tsx}"

.prettierrc

@@ -0,0 +1 @@
+{}

README.md

@@ -18,7 +18,7 @@ Hello, Solana lovers! Welcome to the official repository for SNS Manager, your a
 
 <br />
 <center>
-<img src="./assets/illustration.png" />
+<img src="./assets/readme/app-screenshots.png" alt="App Screenshots" />
 </center>
 <br />
 

babel.config.js

@@ -2,6 +2,19 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: ["babel-preset-expo"],
-    plugins: ["transform-inline-environment-variables", "macros"],
+    plugins: [
+      "transform-inline-environment-variables",
+      "macros",
+      [
+        "module-resolver",
+        {
+          alias: {
+            "@src": "./src/",
+            "@assets": "./assets/",
+          },
+          extensions: [".js", ".jsx", ".ts", ".tsx"],
+        },
+      ],
+    ],
   };
 };

format.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+
+# Get current branch
+currentBranch=$(git rev-parse --abbrev-ref HEAD)
+
+# Find files that differ from master
+files=$(git diff --name-only master..$currentBranch | grep -E '\.(js|jsx|ts|tsx)$')
+
+# Check if there are any differing files
+if [ -z "$files" ]
+then
+    exit 0
+fi
+
+# Run prettier on these files
+for file in $files
+do
+    if [ -f $file ]
+    then
+        prettier --write $file
+    else
+        echo "$file does not exist anymore."
+    fi
+done
+
+echo "Prettier has finished running."

package.json

@@ -10,17 +10,20 @@
     "dev:xnft": "XNFT=true yarn dev",
     "dev:web": "WEB=true yarn dev",
     "extract": "lingui extract",
-    "compile": "lingui compile"
+    "compile": "lingui compile",
+    "format": "npx prettier --write src/**/*.{ts,tsx}",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@adraffy/ens-normalize": "^1.9.0",
     "@bonfida/name-offers": "^0.0.10",
     "@bonfida/name-tokenizer": "^0.0.11",
     "@bonfida/sns-emitter": "^0.1.7",
-    "@bonfida/sns-react": "^1.1.1",
-    "@bonfida/spl-name-service": "1.0.4",
+    "@bonfida/sns-react": "^1.1.2",
+    "@bonfida/spl-name-service": "^1.0.7",
     "@coral-xyz/common-public": "^0.2.0-latest.3375",
     "@expo-google-fonts/dev": "*",
+    "@expo/html-elements": "^0.5.1",
     "@expo/vector-icons": "^13.0.0",
     "@lingui/cli": "^4.2.0",
     "@lingui/macro": "^4.2.0",
@@ -39,15 +42,16 @@
     "axios": "^1.4.0",
     "buffer": "^6.0.3",
     "expo": "~48.0.7",
-    "expo-blur": "^12.3.0",
+    "expo-blur": "~12.2.2",
     "expo-constants": "~14.2.1",
     "expo-image-picker": "~14.1.1",
+    "expo-linear-gradient": "~12.1.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.3",
+    "react-native": "0.71.8",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-heroicons": "^3.2.0",
     "react-native-modalfy": "^3.4.0",
@@ -69,7 +73,10 @@
     "commander": "^9.4.1",
     "fast-glob": "^3.2.12",
     "glob": "^8.0.3",
+    "husky": "^6.0.0",
     "jszip": "^3.10.1",
+    "prettier": "2.8.8",
+    "pretty-quick": "^3.1.3",
     "typescript": "^4.9.5",
     "uuid": "*",
     "xnft": "latest"

palette-02.json

@@ -1,4 +1,21 @@
 {
+  "brand-primary": "#5A5DDC",
+  "brand-accent": "#F7A1CC",
+
+  "content-primary": "#090A21",
+  "content-secondary": "#4C4D5E",
+  "content-tertiary": "#8289A3",
+  "content-border": "#ECE9FF",
+  "content-active-border": "#DED9FF",
+  "content-inactive-border": "#F4F2FF",
+  "content-success": "#0F7420",
+  "content-error": "#D64545",
+  "content-warning": "#F4A051",
+  "content-progress": "#8D99FF",
+
+  "background-primary": "#F5F7FF",
+  "background-secondary": "#FFFFFF",
+
   "blue-050": "#DCEEFB",
   "blue-100": "#B6E0FE",
   "blue-200": "#84C5F4",

src/App.tsx

@@ -3,25 +3,21 @@ global.Buffer = global.Buffer || require("buffer").Buffer;
 
 import { registerRootComponent } from "expo";
 import { RecoilRoot, useRecoilState } from "recoil";
-import { ActivityIndicator, View } from "react-native";
+import { TouchableOpacity, ActivityIndicator, View } from "react-native";
 import { NavigationContainer } from "@react-navigation/native";
-import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import {
+  createBottomTabNavigator,
+  BottomTabBarButtonProps,
+} 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 { SearchResult } from "./screens/SearchResult";
 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";
-import { createStackNavigator } from "@react-navigation/stack";
-import { DomainView } from "./screens/DomainView";
-import { SuccessCheckoutModal } from "./components/SuccessCheckoutModal";
-import { EditRecordModal } from "./components/EditRecordModal";
-import { ErrorModal } from "./components/ErrorModal";
-import { SuccessModal } from "./components/SuccessModal";
 import { TransferModal } from "./components/TransferModal";
 import { WormholeExplainerModal } from "./components/WormholeExplainerModal";
 import { EditPicture } from "./components/EditPicture";
@@ -48,20 +44,17 @@ import {
   LanguageProvider,
   useLanguageContext,
 } from "./contexts/LanguageContext";
+import { StatusModalProvider } from "@src/contexts/StatusModalContext";
 import { LanguageModal } from "./components/LanguageModal";
 import { TokenizeModal } from "./components/TokenizeModal";
+import { NavigatorTabsParamList } from "@src/types";
+import { LanguageHeader } from "@src/components/Header";
 
 const xnftjson = require("../xnft.json");
 
 console.log(`Version: ${xnftjson.version}`);
 
-const Stack = createStackNavigator<RootBottomTabParamList>();
-
 const modalConfig = {
-  SuccessCheckout: SuccessCheckoutModal,
-  EditRecordModal,
-  Error: ErrorModal,
-  Success: SuccessModal,
   Transfer: TransferModal,
   Delete: DeleteModal,
   CreateSubdomain: CreateSubdomainModal,
@@ -78,35 +71,14 @@ const modalConfig = {
 
 const stackModal = createModalStack(modalConfig);
 
-export type RootBottomTabParamList = {
-  Home: undefined;
-  Profile: { owner?: string };
-  Cart: undefined;
-  "Search Result": { domain: string };
-  "Domain View": { domain: string };
-  Search: { screen: string; params: Object };
-  "Search Profile": { owner: string };
-};
+const Tab = createBottomTabNavigator<NavigatorTabsParamList>();
 
-const Tab = createBottomTabNavigator<RootBottomTabParamList>();
+const TabBarLabel = ({ focused }: { focused: boolean }, label: ReactNode) => {
+  const style = focused
+    ? tw`mt-1 text-sm font-bold`
+    : tw`mt-1 text-sm text-content-tertiary`;
 
-const SearchNavigator = () => {
-  return (
-    <Stack.Navigator screenOptions={{ header: () => null }}>
-      <Stack.Screen
-        name="Search Result"
-        children={({ route }) => <SearchResult domain={route.params?.domain} />}
-      />
-      <Stack.Screen
-        name="Domain View"
-        children={({ route }) => <DomainView domain={route.params?.domain} />}
-      />
-      <Stack.Screen
-        name="Search Profile"
-        children={({ route }) => <ProfileScreen owner={route.params.owner} />}
-      />
-    </Stack.Navigator>
-  );
+  return <Text style={style}>{label}</Text>;
 };
 
 function TabNavigator() {
@@ -128,7 +100,12 @@ function TabNavigator() {
       initialRouteName="Home"
       screenOptions={{
         header: () => null,
-        tabBarActiveTintColor: "#186FAF",
+        tabBarActiveTintColor: tw.color("content-primary"),
+        tabBarInactiveTintColor: tw.color("content-tertiary"),
+        tabBarStyle: tw`h-[60px] bg-background-primary border-t-0 pt-2 pb-1 px-3`,
+        tabBarIconStyle: {
+          aspectRatio: "1/1",
+        },
       }}
       key={currentLanguage} // trigger tab re-render when translation is toggled
     >
@@ -146,58 +123,47 @@ function TabNavigator() {
           },
         })}
         options={{
-          tabBarLabel: t`Profile`,
+          tabBarLabel: (props) => TabBarLabel(props, t`Profile`),
           tabBarIcon: ({ color, size }) => (
             <Feather name="user" size={size} color={color} />
           ),
+          header: () => <LanguageHeader />,
         }}
       />
       <Tab.Screen
         name="Home"
         component={HomeScreen}
         options={{
-          tabBarLabel: t`Home`,
-          tabBarIcon: ({ color, size }) => (
-            <Feather name="home" size={size} color={color} />
-          ),
-        }}
-      />
-      <Tab.Screen
-        name="Search"
-        component={SearchNavigator}
-        listeners={({ navigation }) => ({
-          tabPress: () => {
-            navigation.navigate("Search", {
-              screen: "Search Result",
-              domain: "",
-            });
-          },
-        })}
-        options={{
-          headerShown: false,
-          tabBarLabel: t`Search`,
+          tabBarLabel: (props) => TabBarLabel(props, t`Domains`),
           tabBarIcon: ({ color, size }) => (
-            <Feather name="search" size={size} color={color} />
+            <Feather name="globe" size={size} color={color} />
           ),
         }}
       />
       <Tab.Screen
         name="Cart"
         component={Cart}
         options={{
-          tabBarLabel: t`Cart`,
+          tabBarLabel: (props) => TabBarLabel(props, t`Cart`),
           tabBarIcon: ({ color, size }) => (
             <View style={tw`relative`}>
               <Feather name="shopping-cart" size={size} color={color} />
               {cart.length !== 0 ? (
                 <Text
-                  style={tw`absolute -top-1 text-white -right-2 bg-red-400 rounded-full font-bold h-[15px] text-center text-xs w-[16px]`}
+                  style={tw`absolute -top-1 text-white -right-2 bg-brand-primary rounded-full font-bold h-[15px] text-center text-xs w-[16px]`}
                 >
                   {cart.length}
                 </Text>
               ) : null}
             </View>
           ),
+          header: () => (
+            <View style={tw`px-3 py-4 bg-background-primary`}>
+              <Text style={tw`text-lg font-semibold text-content-primary`}>
+                {t`Cart`}
+              </Text>
+            </View>
+          ),
         }}
       />
     </Tab.Navigator>
@@ -222,9 +188,11 @@ function App() {
       <RecoilRoot>
         <NavigationContainer>
           <LanguageProvider i18n={i18n}>
-            <ModalProvider stack={stackModal}>
-              <TabNavigator />
-            </ModalProvider>
+            <StatusModalProvider>
+              <ModalProvider stack={stackModal}>
+                <TabNavigator />
+              </ModalProvider>
+            </StatusModalProvider>
           </LanguageProvider>
         </NavigationContainer>
       </RecoilRoot>

src/components/ActionWarning.tsx

@@ -0,0 +1,21 @@
+import { Text } from "react-native";
+import { Trans } from "@lingui/macro";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import tw from "@src/utils/tailwind";
+
+export const ActionWarning = ({ actionName }: { actionName: string }) => {
+  return (
+    <Text style={tw`mt-4 text-xs`}>
+      <MaterialCommunityIcons
+        name="information-outline"
+        size={16}
+        style={tw`mr-1`}
+        color={tw.color("content-warning")}
+      />
+      <Trans>
+        By clicking "{actionName}" you will be asked for a confirmation by your
+        wallet
+      </Trans>
+    </Text>
+  );
+};