feat: new design (#23)

* fix: some progress

* feat: more progress

* fix: fonts & more progress

* fix: darkmode

* fix: ui improvements

* fix: ui cleanup

* fix: ui

* fix: main buttons on iOS

* feat: gradient on main buttons

* chore: add prettier

* fix: make transactions link easier to click

* feat: nice transactions page routing

* feat: subtle animation on main button press

* chore: format

* feat: replace main button icons

* fix: click outside inputs to close

* fix: invert scale transitions, text colors

* fix: autofocus

* fix: loading states & button icons

* fix: use system theme

* fix: cleanup

* fix: fonts

* fix: cleanup & transaction detail

* fix: wallet selection

* feat: balance state switcher

* fix: unify scales

* fix: notification capability

* fix: unify elevation

* fix: cleanup

---------

Co-authored-by: Roland Bewick <roland.bewick@gmail.com>

.prettierignore

@@ -0,0 +1,4 @@
+# Ignore artifacts:
+build
+coverage
+node_modules

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "tabWidth": 2
+}

animations/Paid.tsx

@@ -1,4 +1,5 @@
 import LottieView from "lottie-react-native";
+import { View } from "react-native";
 
 export function Paid() {
   return (

app.json

@@ -3,16 +3,22 @@
     "name": "Alby Mobile",
     "slug": "alby-mobile",
     "version": "1.2.1",
-    "scheme": ["bitcoin", "lightning", "alby"],
+    "scheme": [
+      "bitcoin",
+      "lightning",
+      "alby"
+    ],
     "orientation": "portrait",
     "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
+    "userInterfaceStyle": "automatic",
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "cover",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "plugins": [
       [
         "expo-camera",
@@ -24,7 +30,12 @@
       [
         "expo-font",
         {
-          "fonts": ["./assets/fonts/Inter-Regular.otf"]
+          "fonts": [
+            "./assets/fonts/OpenRunde-Regular.otf",
+            "./assets/fonts/OpenRunde-Medium.otf",
+            "./assets/fonts/OpenRunde-Semibold.otf",
+            "./assets/fonts/OpenRunde-Bold.otf"
+          ]
         }
       ],
       "expo-router",
@@ -43,7 +54,9 @@
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
-      "permissions": ["android.permission.CAMERA"]
+      "permissions": [
+        "android.permission.CAMERA"
+      ]
     },
     "extra": {
       "eas": {
@@ -52,4 +65,4 @@
     },
     "owner": "roland_alby"
   }
-}
+}

app/_layout.tsx

@@ -1,16 +1,12 @@
 import "../lib/applyGlobalPolyfills";
 
-// Import your global CSS file
-import "../global.css";
-
 import "~/global.css";
 
-import AsyncStorage from "@react-native-async-storage/async-storage";
 import { Theme, ThemeProvider } from "@react-navigation/native";
 import { SplashScreen, Stack } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import * as React from "react";
-import { Platform, SafeAreaView } from "react-native";
+import { SafeAreaView } from "react-native";
 import { NAV_THEME } from "~/lib/constants";
 import { useColorScheme } from "~/lib/useColorScheme";
 import PolyfillCrypto from "react-native-webview-crypto";
@@ -43,37 +39,27 @@ SplashScreen.preventAutoHideAsync();
 // };
 
 export default function RootLayout() {
-  const { colorScheme, setColorScheme, isDarkColorScheme } = useColorScheme();
-  const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);
+  const { isDarkColorScheme } = useColorScheme();
+  const [fontsLoaded, setFontsLoaded] = React.useState(false);
   useConnectionChecker();
 
   React.useEffect(() => {
     (async () => {
-      await Font.loadAsync(
-        "Inter",
-        require("./../assets/fonts/Inter-Regular.otf")
-      );
+      await Font.loadAsync({
+        "OpenRunde": require("./../assets/fonts/OpenRunde-Regular.otf"),
+        "OpenRunde-Medium": require("./../assets/fonts/OpenRunde-Medium.otf"),
+        "OpenRunde-Semibold": require("./../assets/fonts/OpenRunde-Semibold.otf"),
+        "OpenRunde-Bold": require("./../assets/fonts/OpenRunde-Bold.otf")
+      });
 
-      const theme = await AsyncStorage.getItem("theme");
-      if (!theme) {
-        AsyncStorage.setItem("theme", colorScheme);
-        setIsColorSchemeLoaded(true);
-        return;
-      }
-      const colorTheme = theme === "dark" ? "dark" : "light";
-      if (colorTheme !== colorScheme) {
-        setColorScheme(colorTheme);
+      setFontsLoaded(true);
 
-        setIsColorSchemeLoaded(true);
-        return;
-      }
-      setIsColorSchemeLoaded(true);
     })().finally(() => {
       SplashScreen.hideAsync();
     });
   }, []);
 
-  if (!isColorSchemeLoaded) {
+  if (!fontsLoaded) {
     return null;
   }
 
@@ -84,7 +70,7 @@ export default function RootLayout() {
         <PolyfillCrypto />
         <SafeAreaView className="w-full h-full">
           <Stack />
-          <Toast config={toastConfig} position="top" />
+          <Toast config={toastConfig} position="bottom" />
         </SafeAreaView>
       </ThemeProvider>
     </SWRConfig>

app/transactions.js

@@ -0,0 +1,5 @@
+import { Transactions } from "../pages/Transactions";
+
+export default function Page() {
+  return <Transactions />;
+}

components/DualCurrencyInput.tsx

@@ -5,17 +5,19 @@ import { Label } from "./ui/label";
 import { Text } from "./ui/text";
 import React from "react";
 import { useAppStore } from "~/lib/state/appStore";
-import { ArrowLeftRight } from "./Icons";
-import { DEFAULT_CURRENCY } from "~/lib/constants";
+import { ArrowLeftRight, RefreshCw } from "./Icons";
+import { CURSOR_COLOR, DEFAULT_CURRENCY } from "~/lib/constants";
 
 type DualCurrencyInputProps = {
   amount: string;
   setAmount(amount: string): void;
+  autoFocus?: boolean;
 };
 
 export function DualCurrencyInput({
   amount,
   setAmount,
+  autoFocus = false,
 }: DualCurrencyInputProps) {
   const getFiatAmount = useGetFiatAmount();
   const getSatsAmount = useGetSatsAmount();
@@ -47,25 +49,27 @@ export function DualCurrencyInput({
   return (
     <View className="w-full flex flex-col items-center justify-center gap-5">
       <Input
-        className="w-full border-transparent text-center bg-muted mt-3"
+        className="w-full border-transparent text-center mt-3"
         placeholder="0"
         keyboardType="number-pad"
         value={inputMode === "sats" ? amount : fiatAmount}
+        cursorColor={CURSOR_COLOR}
         onChangeText={onChangeText}
         aria-labelledbyledBy="amount"
         style={styles.amountInput}
-        // aria-errormessage="inputError"
+        autoFocus={autoFocus}
+      // aria-errormessage="inputError"
       />
       <Pressable onPress={toggleInputMode}>
         <View className="flex flex-row gap-2 items-center justify-center">
-          <Label nativeID="amount" className="self-start justify-self-start">
+          <Text className="font-semibold2 text-2xl text-muted-foreground">
             {inputMode === "fiat" ? fiatCurrency : "sats"}
-          </Label>
-          <ArrowLeftRight className="text-primary" width={16} height={16} />
+          </Text>
+          <RefreshCw className="text-muted-foreground" width={16} height={16} />
         </View>
       </Pressable>
       {
-        <Text>
+        <Text className="text-muted-foreground text-2xl font-semibold2">
           {inputMode === "fiat"
             ? new Intl.NumberFormat().format(+amount) + " sats"
             : getFiatAmount?.(+amount) || ""}
@@ -78,6 +82,6 @@ export function DualCurrencyInput({
 const styles = StyleSheet.create({
   amountInput: {
     fontSize: 80,
-    height: 100,
+    height: 90,
   },
 });

components/Icons.tsx

@@ -6,6 +6,8 @@ import {
   MoveUpRight,
   MoveDownRight,
   MoveDownLeft,
+  MoveUp,
+  MoveDown,
   Camera,
   Menu,
   ZapIcon,
@@ -19,6 +21,14 @@ import {
   ClipboardPaste,
   Keyboard,
   BookUser,
+  Wallet2,
+  ArrowDown,
+  ChevronDown,
+  Bitcoin,
+  Share2,
+  RefreshCw,
+  ChevronUp,
+  X
 } from "lucide-react-native";
 import { cssInterop } from "nativewind";
 
@@ -35,8 +45,14 @@ function interopIcon(icon: LucideIcon) {
 }
 
 interopIcon(AlertCircle);
+interopIcon(ArrowDown);
 interopIcon(CheckCircle);
+interopIcon(Bitcoin);
 interopIcon(XCircle);
+interopIcon(MoveUp);
+interopIcon(MoveDown);
+interopIcon(ChevronDown);
+interopIcon(ChevronUp);
 interopIcon(MoveDownRight);
 interopIcon(MoveUpRight);
 interopIcon(MoveDownLeft);
@@ -53,12 +69,22 @@ interopIcon(Cog);
 interopIcon(ClipboardPaste);
 interopIcon(Keyboard);
 interopIcon(BookUser);
+interopIcon(Wallet2);
+interopIcon(Share2);
+interopIcon(RefreshCw);
+interopIcon(X);
 
 export {
   AlertCircle,
+  ArrowDown,
+  Bitcoin,
   Camera,
   CheckCircle,
   XCircle,
+  ChevronDown,
+  ChevronUp,
+  MoveDown,
+  MoveUp,
   MoveDownRight,
   MoveUpRight,
   MoveDownLeft,
@@ -74,4 +100,8 @@ export {
   ClipboardPaste,
   Keyboard,
   BookUser,
+  Wallet2,
+  Share2,
+  RefreshCw,
+  X,
 };

components/QRCode.tsx

@@ -0,0 +1,22 @@
+import { LinearGradient } from "expo-linear-gradient";
+import { View } from "react-native";
+import QRCodeLibrary from "react-native-qrcode-svg";
+
+
+function QRCode({ value }: { value: string }) {
+    return (
+        <LinearGradient
+            className="p-2 rounded-2xl flex items-center justify-center"
+            colors={['#FFC453', '#FFE951']}
+            start={[0, 1]}
+            end={[1, 0]}
+            style={{ borderRadius: 28, elevation: 2 }}
+        >
+            <View className="flex items-center justify-center p-3 rounded-3xl bg-white w-96 h-96">
+                <QRCodeLibrary value={value} size={300} />
+            </View>
+        </LinearGradient>
+    );
+}
+
+export default QRCode;