Homescreen UI revamp

App.tsx

@@ -1,32 +1,40 @@
 import { NavigationContainer } from '@react-navigation/native';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { SizeClassProvider } from './components/Context/SizeClassProvider';
 import { SettingsProvider } from './components/Context/SettingsProvider';
-import { BlueDefaultTheme } from './components/themes';
+import { BlueCurrentTheme, BlueDarkTheme, BlueDefaultTheme } from './components/themes';
 import MasterView from './navigation/MasterView';
 import { navigationRef } from './NavigationService';
 import { useLogger } from '@react-navigation/devtools';
 import { StorageProvider } from './components/Context/StorageProvider';
 import { initializeIndexer } from './modules/SilentPaymentIndexer';
 import { initializeRustJsiBridge } from './modules/RustJsiBridge';
 import { INDEXER_BASE_URL } from '@env';
+import { useColorScheme } from 'react-native';
+
+if (!INDEXER_BASE_URL) throw new Error('INDEXER_BASE_URL is not set');
 
 const App = () => {
-  initializeRustJsiBridge();
+  const colorScheme = useColorScheme();
 
-  if (!INDEXER_BASE_URL) throw new Error('INDEXER_BASE_URL is not set');
+  useEffect(() => {
+    initializeRustJsiBridge();
+    initializeIndexer({
+      baseUrl: INDEXER_BASE_URL,
+      timeout: 100000,
+    });
+  }, []);
 
-  initializeIndexer({
-    baseUrl: INDEXER_BASE_URL,
-    timeout: 100000, // 100 seconds for blockchain scanning operations (increased for slower connections)
-  });
+  useEffect(() => {
+    BlueCurrentTheme.updateColorScheme();
+  }, [colorScheme]);
 
   useLogger(navigationRef);
 
   return (
     <SizeClassProvider>
-      <NavigationContainer ref={navigationRef} theme={BlueDefaultTheme}>
+      <NavigationContainer ref={navigationRef} theme={colorScheme === 'dark' ? BlueDarkTheme : BlueDefaultTheme}>
         <SafeAreaProvider>
           <StorageProvider>
             <SettingsProvider>

android/link-assets-manifest.json

@@ -0,0 +1,25 @@
+{
+  "migIndex": 1,
+  "data": [
+    {
+      "path": "assets/fonts/ClashGrotesk-Bold.otf",
+      "sha1": "7e0a4dfecaf6dc11b831bcff9dfdca4815ff6bd3"
+    },
+    {
+      "path": "assets/fonts/ClashGrotesk-Medium.otf",
+      "sha1": "dacc45a62aeb471bf95e4b7ed5eb3c409f1829e3"
+    },
+    {
+      "path": "assets/fonts/ClashGrotesk-Regular.otf",
+      "sha1": "6025c9ee7fc14cdb0544a00ad9a224da38abfe98"
+    },
+    {
+      "path": "assets/fonts/ClashGrotesk-Semibold.otf",
+      "sha1": "d43b8e6d6ac119d9806f16ad7d62bf93caba82d5"
+    },
+    {
+      "path": "assets/fonts/ClashGrotesk-Variable.ttf",
+      "sha1": "b4bc066de0bbd47f84baf5f90d9739e13819c4ac"
+    }
+  ]
+}

components/icons/PayArrowIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface PayArrowIconProps {
+  color?: string;
+  size?: number;
+}
+
+const PayArrowIcon: React.FC<PayArrowIconProps> = ({ color = 'white', size = 20 }) => (
+  <Svg width={size} height={size} viewBox="0 0 29 29" fill="none">
+    <Path d="M10.0139 10.0138H18.2605V18.2605" stroke={color} strokeWidth="1.66607" strokeLinecap="round" strokeLinejoin="round" />
+    <Path d="M10.0141 18.2604L18.2607 10.0138" stroke={color} strokeWidth="1.66607" strokeLinecap="round" strokeLinejoin="round" />
+  </Svg>
+);
+
+export default PayArrowIcon;

components/icons/QRScanIcon.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface QRScanIconProps {
+  color?: string;
+  size?: number;
+}
+
+const QRScanIcon: React.FC<QRScanIconProps> = ({ color = '#754CE8', size = 24 }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M7 3H4C3.44772 3 3 3.44772 3 4V7C3 7.55228 3.44772 8 4 8H7C7.55228 8 8 7.55228 8 7V4C8 3.44772 7.55228 3 7 3Z"
+      stroke={color}
+      strokeWidth="1.99985"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M19.999 2.99976H16.999C16.4467 2.99976 15.999 3.44747 15.999 3.99976V6.99976C15.999 7.55204 16.4467 7.99976 16.999 7.99976H19.999C20.5513 7.99976 20.999 7.55204 20.999 6.99976V3.99976C20.999 3.44747 20.5513 2.99976 19.999 2.99976Z"
+      stroke={color}
+      strokeWidth="1.99985"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M7 15.9988H4C3.44772 15.9988 3 16.4465 3 16.9988V19.9988C3 20.5511 3.44772 20.9988 4 20.9988H7C7.55228 20.9988 8 20.5511 8 19.9988V16.9988C8 16.4465 7.55228 15.9988 7 15.9988Z"
+      stroke={color}
+      strokeWidth="1.99985"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M20.999 15.9988H17.999C17.4686 15.9988 16.9599 16.2095 16.5848 16.5846C16.2097 16.9596 15.999 17.4683 15.999 17.9988V20.9988"
+      stroke={color}
+      strokeWidth="1.99985"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path d="M20.9985 20.9984V21.0084" stroke={color} strokeWidth="1.99985" strokeLinecap="round" strokeLinejoin="round" />
+    <Path
+      d="M11.9995 6.99951V9.99951C11.9995 10.5299 11.7888 11.0387 11.4137 11.4137C11.0387 11.7888 10.5299 11.9995 9.99951 11.9995H6.99951"
+      stroke={color}
+      strokeWidth="1.99985"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path d="M3 11.9991H3.01" stroke={color} strokeWidth="1.99985" strokeLinecap="round" strokeLinejoin="round" />
+    <Path d="M11.999 2.99976H12.009" stroke={color} strokeWidth="1.99985" strokeLinecap="round" strokeLinejoin="round" />
+    <Path d="M11.999 15.9988V16.0088" stroke={color} strokeWidth="1.99985" strokeLinecap="round" strokeLinejoin="round" />
+    <Path d="M15.999 11.9991H16.999" stroke={color} strokeWidth="1.99985" strokeLinecap="round" strokeLinejoin="round" />
+    <Path d="M20.9985 11.9991V12.0091" stroke={color} strokeWidth="1.99985" strokeLinecap="round" strokeLinejoin="round" />
+    <Path d="M11.999 20.9985V19.9985" stroke={color} strokeWidth="1.99985" strokeLinecap="round" strokeLinejoin="round" />
+  </Svg>
+);
+
+export default QRScanIcon;

components/icons/ReceiveArrowIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface ReceiveArrowIconProps {
+  color?: string;
+  size?: number;
+}
+
+const ReceiveArrowIcon: React.FC<ReceiveArrowIconProps> = ({ color = '#754CE8', size = 20 }) => (
+  <Svg width={size} height={size} viewBox="0 0 29 29" fill="none">
+    <Path d="M18.2607 10.0138L10.0141 18.2604" stroke={color} strokeWidth="1.66607" strokeLinecap="round" strokeLinejoin="round" />
+    <Path d="M18.2603 18.2604H10.0137V10.0138" stroke={color} strokeWidth="1.66607" strokeLinecap="round" strokeLinejoin="round" />
+  </Svg>
+);
+
+export default ReceiveArrowIcon;

components/icons/SearchIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import Svg, { Path, Rect } from 'react-native-svg';
+
+interface SearchIconProps {
+  size?: number;
+  background?: string;
+  stroke?: string;
+}
+
+const SearchIcon: React.FC<SearchIconProps> = ({ size = 48, background = '#ffffff', stroke = '#754CE8' }) => (
+  <Svg width={size} height={size} viewBox="0 0 48 48" fill="none">
+    <Rect width="47.9965" height="47.9965" rx="23.9982" fill={background} />
+    <Path
+      d="M23.1609 29.8295C26.8415 29.8295 29.8252 26.8457 29.8252 23.1652C29.8252 19.4846 26.8415 16.5009 23.1609 16.5009C19.4803 16.5009 16.4966 19.4846 16.4966 23.1652C16.4966 26.8457 19.4803 29.8295 23.1609 29.8295Z"
+      stroke={stroke}
+      strokeWidth="1.66607"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path d="M31.4912 31.4955L27.9092 27.9135" stroke={stroke} strokeWidth="1.66607" strokeLinecap="round" strokeLinejoin="round" />
+  </Svg>
+);
+
+export default SearchIcon;

components/icons/SettingsButton.tsx

@@ -1,38 +1,40 @@
 import React from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
-import { Icon } from '@rneui/themed';
-import { useTheme } from '../themes';
+import Svg, { Circle, Path } from 'react-native-svg';
 import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';
 import loc from '../../loc';
 
-const SettingsButton = () => {
-  const { colors } = useTheme();
+interface SettingsButtonProps {
+  background?: string;
+  iconColor?: string;
+}
+
+const SettingsButton: React.FC<SettingsButtonProps> = ({ background = '#F6F7F9', iconColor = '#545454' }) => {
   const { navigate } = useExtendedNavigation();
-  const onPress = () => {
-    navigate('Settings');
-  };
 
   return (
     <TouchableOpacity
       accessibilityRole="button"
       accessibilityLabel={loc.settings.default_title}
       testID="SettingsButton"
-      style={[style.buttonStyle, { backgroundColor: colors.lightButton }]}
-      onPress={onPress}
+      onPress={() => navigate('Settings')}
+      style={styles.button}
     >
-      <Icon size={22} name="more-horiz" type="material" color={colors.foregroundColor} />
+      <Svg width={52} height={52} viewBox="0 0 52 52" fill="none">
+        <Circle cx="25.7349" cy="25.7349" r="25.7349" fill={background} />
+        <Path
+          d="M24.6664 18C24.6664 17.8146 24.6664 17.7213 24.6771 17.644C24.7112 17.4 24.8239 17.1738 24.9981 16.9996C25.1723 16.8255 25.3985 16.7128 25.6424 16.6786C25.7211 16.668 25.8131 16.668 25.9984 16.668C26.1838 16.668 26.2784 16.668 26.3544 16.6786C26.5984 16.7128 26.8246 16.8255 26.9988 16.9996C27.1729 17.1738 27.2856 17.4 27.3198 17.644C27.3304 17.7213 27.3304 17.8146 27.3304 18C27.3304 18.1853 27.3304 18.2786 27.3198 18.356C27.2856 18.5999 27.1729 18.8261 26.9988 19.0003C26.8246 19.1745 26.5984 19.2872 26.3544 19.3213C26.2771 19.332 26.1838 19.332 25.9984 19.332C25.8131 19.332 25.7198 19.332 25.6424 19.3213C25.3985 19.2872 25.1723 19.1745 24.9981 19.0003C24.8239 18.8261 24.7112 18.5999 24.6771 18.356C24.6664 18.2786 24.6664 18.1853 24.6664 18ZM24.6664 26C24.6664 25.8146 24.6664 25.7213 24.6771 25.644C24.7112 25.4 24.8239 25.1738 24.9981 24.9996C25.1723 24.8255 25.3985 24.7128 25.6424 24.6786C25.7211 24.668 25.8131 24.668 25.9984 24.668C26.1838 24.668 26.2784 24.668 26.3544 24.6786C26.5984 24.7128 26.8246 24.8255 26.9988 24.9996C27.1729 25.1738 27.2856 25.4 27.3198 25.644C27.3304 25.7213 27.3304 25.8146 27.3304 26C27.3304 26.1853 27.3304 26.2786 27.3198 26.356C27.2856 26.5999 27.1729 26.8261 26.9988 27.0003C26.8246 27.1745 26.5984 27.2872 26.3544 27.3213C26.2771 27.332 26.1838 27.332 25.9984 27.332C25.8131 27.332 25.7198 27.332 25.6424 27.3213C25.3985 27.2872 25.1723 27.1745 24.9981 27.0003C24.8239 26.8261 24.7112 26.5999 24.6771 26.356C24.6664 26.2786 24.6664 26.1853 24.6664 26ZM24.6664 33.6C24.6558 33.6773 24.6558 33.7706 24.6558 33.956C24.6558 34.1413 24.6558 34.2346 24.6664 34.312C24.7006 34.5559 24.8133 34.7821 24.9874 34.9563C25.1616 35.1305 25.3878 35.2432 25.6318 35.2773C25.7091 35.288 25.8024 35.288 25.9878 35.288C26.1731 35.288 26.2664 35.288 26.3438 35.2773C26.5877 35.2432 26.8139 35.1305 26.9881 34.9563C27.1623 34.7821 27.275 34.5559 27.3091 34.312C27.3198 34.2346 27.3198 34.1413 27.3198 33.956C27.3198 33.7706 27.3198 33.6773 27.3091 33.6C27.275 33.356 27.1623 33.1298 26.9881 32.9556C26.8139 32.7815 26.5877 32.6688 26.3438 32.6346C26.2664 32.624 26.1731 32.624 25.9878 32.624C25.8024 32.624 25.7091 32.624 25.6318 32.6346C25.3878 32.6688 25.1616 32.7815 24.9874 32.9556C24.8133 33.1298 24.7006 33.356 24.6664 33.6Z"
+          fill={iconColor}
+        />
+      </Svg>
     </TouchableOpacity>
   );
 };
 
 export default SettingsButton;
 
-const style = StyleSheet.create({
-  buttonStyle: {
-    width: 30,
-    height: 30,
-    borderRadius: 15,
-    justifyContent: 'center',
-    alignContent: 'center',
+const styles = StyleSheet.create({
+  button: {
+    marginTop: 8,
   },
 });

components/icons/ShieldReceiveIcon.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface ShieldReceiveIconProps {
+  size?: number;
+  background?: string;
+  borderColor?: string;
+  accent?: string;
+}
+
+const ShieldReceiveIcon: React.FC<ShieldReceiveIconProps> = ({
+  size = 94,
+  background = '#FAF5FF',
+  borderColor = '#F3E8FF',
+  accent = '#754CE8',
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 94 94" fill="none">
+    <Path
+      d="M45.5771 0.5C70.4727 0.5 90.655 20.6817 90.6553 45.5771C90.6553 70.4728 70.4728 90.6553 45.5771 90.6553C20.6817 90.655 0.5 70.4727 0.5 45.5771C0.500252 20.6818 20.6818 0.500252 45.5771 0.5Z"
+      fill={background}
+    />
+    <Path
+      d="M45.5771 0.5C70.4727 0.5 90.655 20.6817 90.6553 45.5771C90.6553 70.4728 70.4728 90.6553 45.5771 90.6553C20.6817 90.655 0.5 70.4727 0.5 45.5771C0.500252 20.6818 20.6818 0.500252 45.5771 0.5Z"
+      stroke={borderColor}
+    />
+    <Path
+      d="M60.7693 47.4765C60.7693 56.9712 54.123 61.7186 46.2234 64.4721C45.8098 64.6122 45.3604 64.6055 44.9511 64.4531C37.0325 61.7186 30.3862 56.9712 30.3862 47.4765V34.1839C30.3862 33.6803 30.5863 33.1973 30.9424 32.8412C31.2985 32.485 31.7815 32.285 32.2852 32.285C36.0831 32.285 40.8304 30.0062 44.1346 27.1198C44.5369 26.7761 45.0486 26.5873 45.5778 26.5873C46.1069 26.5873 46.6187 26.7761 47.021 27.1198C50.3441 30.0252 55.0725 32.285 58.8704 32.285C59.374 32.285 59.857 32.485 60.2131 32.8412C60.5693 33.1973 60.7693 33.6803 60.7693 34.1839V47.4765Z"
+      stroke={accent}
+      strokeWidth="3.79789"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M59.8193 76.9106C59.8193 67.4713 67.4713 59.8193 76.9106 59.8193C86.3498 59.8193 94.0018 67.4713 94.0018 76.9106C94.0018 86.3498 86.3498 94.0018 76.9106 94.0018C67.4713 94.0018 59.8193 86.3498 59.8193 76.9106Z"
+      fill={accent}
+    />
+    <Path d="M76.9111 71.9257V81.8955" stroke="white" strokeWidth="1.42427" strokeLinecap="round" strokeLinejoin="round" />
+    <Path
+      d="M81.8957 76.9106L76.9107 81.8956L71.9258 76.9106"
+      stroke="white"
+      strokeWidth="1.42427"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export default ShieldReceiveIcon;

components/themes.ts

@@ -73,25 +73,42 @@ export const BlueDefaultTheme = {
     androidRippleColor: '#CCCCCC',
     primary: '#754CE8',
     secondary: '#472EBF',
+    receiveBtnBackground: '#754CE812',
+    bannerBackground: '#754CE80D',
+    payBtnDisabledBackground: '#00000052',
+    requestBtnTextColor: '#754CE8',
+    requestBtnBorderColor: '#754CE8',
+    payBtnTextColor: '#ffffff',
+    bannerBorderColor: '#E6E2FA',
+    scanBtnBorderColor: '#E6E2FA',
+    settingsBtnBackground: '#F6F7F9',
+    settingsBtnIconColor: '#545454',
+    searchIconBackground: '#ffffff',
+    searchIconStroke: '#754CE8',
+    shieldIconBackground: '#FAF5FF',
+    shieldIconBorder: '#F3E8FF',
+    shieldIconAccent: '#754CE8',
+    shareAddrBorderColor: '#E6E2FA',
+    shareAddrBackground: 'transparent',
   },
 };
 
 export type Theme = typeof BlueDefaultTheme;
 
-const BlueDarkTheme: Theme = {
+export const BlueDarkTheme: Theme = {
   ...DarkTheme,
   closeImage: require('../img/close-white.png'),
   barStyle: 'light-content',
   colors: {
     ...BlueDefaultTheme.colors,
     ...DarkTheme.colors,
-    customHeader: '#000000',
+    customHeader: '#121212',
     brandingColor: '#000000',
     borderTopColor: '#9aa0aa',
-    background: '#000000',
+    background: '#121212',
     foregroundColor: '#ffffff',
     buttonDisabledBackgroundColor: '#3A3A3C',
-    buttonBackgroundColor: '#FF9500',
+    buttonBackgroundColor: '#754CE8',
     buttonTextColor: '#ffffff',
     lightButton: 'rgba(255,255,255,.1)',
     buttonAlternativeTextColor: '#ffffff',
@@ -130,6 +147,23 @@ const BlueDarkTheme: Theme = {
     receiveText: '#37C0A1',
     navigationBarColor: '#3A3A3C',
     androidRippleColor: '#444444',
+    receiveBtnBackground: '#110732',
+    bannerBackground: '#1D1A2B',
+    payBtnDisabledBackground: '#FFFFFF52',
+    requestBtnTextColor: '#8763EB',
+    requestBtnBorderColor: '#8763EB8F',
+    payBtnTextColor: '#0D0D0D',
+    bannerBorderColor: '#2D264F',
+    scanBtnBorderColor: '#241F3B',
+    settingsBtnBackground: '#141414',
+    settingsBtnIconColor: '#AAAAAA',
+    searchIconBackground: '#0D0D0D',
+    searchIconStroke: '#8763EB',
+    shieldIconBackground: '#1D1A2B',
+    shieldIconBorder: '#181818',
+    shieldIconAccent: '#8763EB',
+    shareAddrBorderColor: '#8763EB8F',
+    shareAddrBackground: '#1D1A2B',
   },
 };
 

constants/fonts.ts

@@ -0,0 +1,14 @@
+/**
+ * Clash Grotesk font family names, as registered by the native font assets
+ * (see assets/fonts and react-native.config.js). On both iOS and Android the
+ * family name resolves to the font's PostScript name, so reference a specific
+ * weight via `fontFamily` and avoid relying on `fontWeight`.
+ */
+export const ClashFont = {
+  regular: 'ClashGrotesk-Regular',
+  medium: 'ClashGrotesk-Medium',
+  semibold: 'ClashGrotesk-Semibold',
+  bold: 'ClashGrotesk-Bold',
+} as const;
+
+export type ClashFontWeight = keyof typeof ClashFont;