Merge pull request #1696 from synonymdev/feat/design

feat: update design

__tests__/todos.ts

@@ -17,6 +17,10 @@ import {
 	slashtagsProfileTodo,
 	transferPendingTodo,
 	transferClosingChannelTodo,
+	supportTodo,
+	inviteTodo,
+	// fastpayTodo,
+	// discountTodo,
 } from '../src/store/shapes/todos';
 import { createNewWallet } from '../src/utils/startup';
 import { EAvailableNetwork } from '../src/utils/networks';
@@ -40,8 +44,12 @@ describe('Todos selector', () => {
 			backupSeedPhraseTodo,
 			lightningTodo,
 			pinTodo,
-			slashtagsProfileTodo,
 			buyBitcoinTodo,
+			supportTodo,
+			inviteTodo,
+			// fastpayTodo,
+			slashtagsProfileTodo,
+			// discountTodo,
 		]);
 	});
 
@@ -90,9 +98,11 @@ describe('Todos selector', () => {
 			backupSeedPhrase: +new Date(),
 			btFailed: +new Date(),
 			buyBitcoin: +new Date(),
+			invite: +new Date(),
 			lightning: +new Date(),
 			pin: +new Date(),
 			slashtagsProfile: +new Date(),
+			support: +new Date(),
 		};
 
 		assert.deepEqual(todosFullSelector(state), []);
@@ -128,7 +138,7 @@ describe('Todos selector', () => {
 		);
 	});
 
-	it('should return transferPendingTodo for addtional pending transfers to spending', () => {
+	it('should return lightningSettingUpTodo for addtional pending transfers to spending', () => {
 		const state = cloneDeep(s);
 		const channel1 = {
 			channel_id: 'channel1',
@@ -144,7 +154,7 @@ describe('Todos selector', () => {
 			orderId: 'order1',
 		});
 		expect(todosFullSelector(state)).toEqual(
-			expect.arrayContaining([{ ...transferPendingTodo, duration: 10 }]),
+			expect.arrayContaining([lightningSettingUpTodo]),
 		);
 	});
 

android/app/src/main/AndroidManifest.xml

@@ -23,8 +23,8 @@
   <application
     android:name=".MainApplication"
     android:label="@string/app_name"
-    android:icon="@mipmap/ic_launcher"
-    android:roundIcon="@mipmap/ic_launcher_round"
+    android:icon="@mipmap/ic_launcher_orange"
+    android:roundIcon="@mipmap/ic_launcher_orange_round"
     android:allowBackup="false"
     android:usesCleartextTraffic="true"
     android:theme="@style/AppTheme">
@@ -35,7 +35,8 @@
       android:launchMode="singleTask"
       android:screenOrientation="portrait"
       android:windowSoftInputMode="adjustPan"
-      android:exported="true">
+      android:exported="true"
+      android:theme="@style/SplashTheme">
       <intent-filter>
         <action android:name="android.intent.action.MAIN" />
         <category android:name="android.intent.category.LAUNCHER" />

android/app/src/main/res/drawable/ic_launcher_monochrome.xml

@@ -0,0 +1,14 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportWidth="192"
+    android:viewportHeight="176">
+  <group android:scaleX="0.43"
+      android:scaleY="0.39416668"
+      android:translateX="54.72"
+      android:translateY="53.31333">
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M182.7,74.8c0.7,-0.9 1.3,-1.8 1.9,-2.8c5.4,-8.7 7.2,-18.7 7.2,-28.1c0,-25.3 -22.1,-43.9 -46.5,-43.9H79.7L69,39.6c-0.3,0 -0.6,0 -0.8,0c-37.6,0 -68.1,30.5 -68.1,68.1c0,37.6 30.5,68.1 68.1,68.1c21.2,0 40.1,-9.7 52.6,-24.8h21c13.3,0 25.2,-4.3 34,-12.6c8.7,-8.2 13.3,-19.1 14.4,-30.4c1,-10.1 -0.1,-20.6 -5.3,-29.9C184.1,76.9 183.4,75.8 182.7,74.8zM155.1,74.3C155.1,74.3 155.1,74.3 155.1,74.3C155.1,74.3 155.1,74.3 155.1,74.3c0.1,0 0.2,0.1 0.2,0.1l0,0c5.8,1.8 10.2,4.7 13.3,8.5c0.7,0.8 1.3,1.7 1.8,2.6c3.4,5.5 4.5,12.6 3.7,21c-1.5,15.7 -12.2,27.9 -31,28.4c-0.4,0 -0.8,0 -1.3,0h-15.5c1.5,-5.1 2.4,-10.5 2.5,-16.1c0,-0.3 0,-0.7 0,-1c0,-30.4 -19.2,-53.2 -46.8,-59.7c21.8,6 37.7,26 37.7,49.7c0,12.7 -4.6,24.3 -12.1,33.2c-9.5,11.2 -23.6,18.3 -39.4,18.3c-28.5,0 -51.6,-23.1 -51.6,-51.6c0,-27.2 21.1,-49.5 47.9,-51.4c1.2,-0.1 2.4,-0.1 3.7,-0.1c4.4,0 8.6,0.6 12.7,1.6l11.2,-41.6h53.2c16.8,0 30.4,12.6 30.4,27.8c0,7.7 -1.5,14.6 -4.9,19.8c-0.5,0.8 -1.1,1.6 -1.8,2.4c-3.2,3.8 -7.7,6.5 -13.8,7.9l0,0l0,0c0,0 0,0 0,0c0,0 -0.1,0 -0.1,0c0,0 0,0.1 0,0.1C155,74.3 155,74.3 155.1,74.3z"/>
+  </group>
+</vector>

android/app/src/main/res/drawable/launch_screen.xml → android/app/src/main/res/drawable/splash_screen.xml

@@ -2,8 +2,8 @@
 <layer-list
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:opacity="opaque">
-    <item android:drawable="@color/black" />
+    <item android:drawable="@color/brand" />
     <item>
-        <bitmap android:src="@drawable/splash" android:gravity="center|clip_horizontal" />
+        <bitmap android:src="@drawable/splash_logo" android:gravity="center|clip_horizontal" />
     </item>
 </layer-list>

android/app/src/main/res/layout/splash_screen.xml

@@ -4,4 +4,4 @@
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
-  android:background="@drawable/launch_screen"/>
+  android:background="@drawable/splash_screen"/>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml → android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_black.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
     <background android:drawable="@color/black" />
-    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground" />
+    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
 </adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml → android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_black_round.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
     <background android:drawable="@color/black" />
-    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground" />
+    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
 </adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_orange.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/brand" />
+    <foreground android:drawable="@mipmap/ic_launcher_foreground" />
+    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
+</adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_orange_round.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/brand" />
+    <foreground android:drawable="@mipmap/ic_launcher_foreground" />
+    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
+</adaptive-icon>

android/app/src/main/res/values/colors.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="black">#000</color>
-    <color name="white">#fff</color>
-</resources>
+    <color name="black">#000000</color>
+    <color name="brand">#FF4400</color>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -1,14 +1,15 @@
-<resources>
-    <!-- Base application theme. -->
+<resources xmlns:tools="http://schemas.android.com/tools">
     <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
-        <!-- Customize your theme here. -->
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
         <item name="android:windowBackground">@color/black</item>
-        <item name="android:navigationBarColor">@color/black</item>
+        <item name="android:navigationBarColor">@color/brand</item>
     </style>
-
-    <style name="AppTheme.Launcher">
-        <item name="android:windowBackground">@drawable/launch_screen</item>
+
+    <style name="SplashTheme" parent="AppTheme">
+        <item name="android:windowBackground">@drawable/splash_screen</item>
+        <item name="android:statusBarColor" tools:targetApi="m">@color/brand</item>
+        <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
+        <item name="android:navigationBarColor">@color/black</item>
     </style>
 
     <style name="WindowExitFadeOut">

commitlint.config.js

@@ -7,7 +7,6 @@ module.exports = {
 			[
 				'accounts',
 				'activity',
-				'assets',
 				'backup',
 				'boost',
 				'contacts',

e2e/backup.e2e.js

@@ -57,7 +57,6 @@ d('Backup', () => {
 		}
 		// recieve bitcoin
 		await element(by.id('Receive')).tap();
-		await element(by.id('UnderstoodButton')).tap();
 		await sleep(1000); // animation
 		// get address from qrcode
 		await waitFor(element(by.id('QRCode'))).toBeVisible();
@@ -77,7 +76,7 @@ d('Backup', () => {
 
 		// set tag to new tx
 		const tag = 'testtag';
-		await element(by.id('BitcoinAsset')).tap();
+		await element(by.id('ActivitySavings')).tap();
 		await element(by.id('Activity-1')).tap();
 		await element(by.id('ActivityTag')).tap();
 		await element(by.id('TagInput')).replaceText(tag);
@@ -110,7 +109,7 @@ d('Backup', () => {
 		}
 
 		await sleep(1000); // animation
-		await element(by.id('AssetsTitle')).swipe('up');
+		await element(by.id('TransferButton')).swipe('up');
 
 		// add headlines widget
 		await element(by.id('WidgetsAdd')).tap();
@@ -158,7 +157,7 @@ d('Backup', () => {
 		await waitFor(element(by.id('SkipIntro'))).toBeVisible();
 		await element(by.id('SkipIntro')).tap();
 		await element(by.id('RestoreWallet')).tap();
-		await element(by.id('MultipleButton')).tap();
+		await element(by.id('MultipleDevices-button')).tap();
 		await element(by.id('Word-0')).replaceText(seed);
 		await element(by.id('WordIndex-4')).swipe('up');
 		await element(by.id('RestoreButton')).tap();
@@ -168,11 +167,11 @@ d('Backup', () => {
 			.withTimeout(300000); // 5 min
 		await element(by.id('GetStartedButton')).tap();
 
-		// wait for AssetsTitle to appear and be accessible
+		// wait for SuggestionsLabel to appear and be accessible
 		for (let i = 0; i < 60; i++) {
 			await sleep(1000);
 			try {
-				await element(by.id('AssetsTitle')).tap();
+				await element(by.id('SuggestionsLabel')).tap();
 				break;
 			} catch (e) {}
 		}
@@ -183,7 +182,7 @@ d('Backup', () => {
 		).toHaveText('£');
 
 		// check metadata
-		await element(by.id('BitcoinAsset')).tap();
+		await element(by.id('ActivitySavings')).tap();
 		await element(by.id('Activity-1')).tap();
 		await expect(
 			element(by.id(`Tag-${tag}`).withAncestor(by.id('ActivityTags'))),

e2e/channels.e2e.js

@@ -68,7 +68,6 @@ d('LN Channel Onboarding', () => {
 
 			// receive BTC
 			await element(by.id('Receive')).tap();
-			await element(by.id('UnderstoodButton')).tap();
 			// get address from qrcode
 			await waitFor(element(by.id('QRCode'))).toBeVisible();
 			await sleep(100); // wait for qr code to render
@@ -85,7 +84,8 @@ d('LN Channel Onboarding', () => {
 			await element(by.id('NewTxPrompt')).swipe('down'); // close Receive screen
 
 			await element(by.id('Suggestion-lightning')).tap();
-			await element(by.id('QuickSetupButton')).tap();
+			await element(by.id('LnIntroduction-button')).tap();
+			await element(by.id('FundTransfer')).tap();
 			// set spending balance to zero
 			await element(by.id('SliderHandle')).swipe('left');
 			const button = element(by.id('QuickSetupContinue'));
@@ -142,9 +142,8 @@ d('LN Channel Onboarding', () => {
 			await waitFor(element(by.id('Suggestion-lightningSettingUp')))
 				.toBeVisible()
 				.withTimeout(10000);
-			await element(by.id('BitcoinAsset')).tap();
 			await element(by.id('TransferButton')).tap();
-			await element(by.id('CustomSetupButton')).tap();
+			await element(by.id('QuickSetupAdvanced')).tap();
 
 			// NumberPad
 			await element(by.id('CustomSetupCustomAmount')).tap();

e2e/helpers.js

@@ -74,20 +74,20 @@ export const completeOnboarding = async () => {
 	await element(by.id('NewWallet')).tap();
 
 	// wait for wallet to be created
-	await waitFor(element(by.id('ToGetStartedClose'))).toBeVisible();
+	await waitFor(element(by.id('WalletOnboardingClose'))).toBeVisible();
 	await sleep(1000); // take app some time to load
 
 	// try for 3min before fail
 	for (let i = 0; i < 180; i++) {
 		await sleep(1000);
 		try {
-			await element(by.id('ToGetStartedClose')).tap();
+			await element(by.id('WalletOnboardingClose')).tap();
 			await sleep(3000); // wait for redux-persist to save state
 			return;
 		} catch (e) {}
 	}
 
-	throw new Error('Tapping "ToGetStartedClose" timeout');
+	throw new Error('Tapping "WalletOnboardingClose" timeout');
 };
 
 export const launchAndWait = async () => {
@@ -97,13 +97,13 @@ export const launchAndWait = async () => {
 		permissions: { faceid: 'YES', camera: 'YES' },
 	});
 
-	// wait for AssetsTitle to appear and be accessible
-	await waitFor(element(by.id('AssetsTitle')))
+	// wait for SuggestionsLabel to appear and be accessible
+	await waitFor(element(by.id('SuggestionsLabel')))
 		.toBeVisible()
 		.withTimeout(300000); // 5 min
 	for (let i = 0; i < 60; i++) {
 		try {
-			await element(by.id('AssetsTitle')).tap();
+			await element(by.id('SuggestionsLabel')).tap();
 			await sleep(1000);
 			break;
 		} catch (e) {

e2e/lightning.e2e.js

@@ -153,9 +153,6 @@ d('Lightning', () => {
 
 			// send funds to LDK, 0 invoice
 			await element(by.id('Receive')).tap();
-			try {
-				await element(by.id('UnderstoodButton')).tap();
-			} catch (e) {}
 			let { label: invoice1 } = await element(by.id('QRCode')).getAttributes();
 			invoice1 = invoice1.replaceAll(/bitcoin.*=/gi, '').toLowerCase();
 			await lnd.sendPaymentSync({ paymentRequest: invoice1, amt: 50000 });
@@ -253,7 +250,7 @@ d('Lightning', () => {
 				.withTimeout(10000);
 
 			// check tx history
-			await element(by.id('AssetsTitle')).swipe('up');
+			await element(by.id('TransferButton')).swipe('up');
 			await expect(
 				element(by.text('1 000').withAncestor(by.id('ActivityShort-1'))),
 			).toBeVisible();
@@ -360,7 +357,7 @@ d('Lightning', () => {
 			await waitFor(element(by.id('SkipIntro'))).toBeVisible();
 			await element(by.id('SkipIntro')).tap();
 			await element(by.id('RestoreWallet')).tap();
-			await element(by.id('MultipleButton')).tap();
+			await element(by.id('MultipleDevices-button')).tap();
 			await element(by.id('Word-0')).replaceText(seed);
 			await element(by.id('WordIndex-4')).swipe('up');
 			await element(by.id('RestoreButton')).tap();
@@ -370,11 +367,11 @@ d('Lightning', () => {
 				.withTimeout(300000); // 5 min
 			await element(by.id('GetStartedButton')).tap();
 
-			// wait for AssetsTitle to appear and be accessible
+			// wait for SuggestionsLabel to appear and be accessible
 			for (let i = 0; i < 60; i++) {
 				await sleep(1000);
 				try {
-					await element(by.id('AssetsTitle')).tap();
+					await element(by.id('SuggestionsLabel')).tap();
 					break;
 				} catch (e) {}
 			}
@@ -387,7 +384,7 @@ d('Lightning', () => {
 				.withTimeout(10000);
 
 			// check tx history
-			await element(by.id('AssetsTitle')).swipe('up');
+			await element(by.id('TransferButton')).swipe('up');
 			await expect(
 				element(by.text('111').withAncestor(by.id('ActivityShort-2'))),
 			).toBeVisible();