diff --git a/app/src/main/java/com/goldenraven/padawanwallet/PadawanActivity.kt b/app/src/main/java/com/goldenraven/padawanwallet/PadawanActivity.kt index a447ebb3..2286fab5 100644 --- a/app/src/main/java/com/goldenraven/padawanwallet/PadawanActivity.kt +++ b/app/src/main/java/com/goldenraven/padawanwallet/PadawanActivity.kt @@ -31,7 +31,7 @@ class PadawanActivity : AppCompatActivity() { setContent { PadawanTheme { - HomeNavigation() + HomeNavigation() } } } else { diff --git a/app/src/main/java/com/goldenraven/padawanwallet/ui/chapters/ChaptersRootScreen.kt b/app/src/main/java/com/goldenraven/padawanwallet/ui/chapters/ChaptersRootScreen.kt index 089cb4e9..7bcbfff3 100644 --- a/app/src/main/java/com/goldenraven/padawanwallet/ui/chapters/ChaptersRootScreen.kt +++ b/app/src/main/java/com/goldenraven/padawanwallet/ui/chapters/ChaptersRootScreen.kt @@ -200,7 +200,7 @@ fun LessonCircle(lessonNumber: Int, completed: Boolean, selected: Boolean, selec style = Stroke(width = 10f) ) } - .clickable { + .noRippleClickable { selectedChapter.value = lessonNumber Log.i(TAG, "Clicked on chapter $lessonNumber") }, diff --git a/app/src/main/java/com/goldenraven/padawanwallet/ui/intro/IntroNavigation.kt b/app/src/main/java/com/goldenraven/padawanwallet/ui/intro/IntroNavigation.kt index 4730d1d3..f6370f6d 100644 --- a/app/src/main/java/com/goldenraven/padawanwallet/ui/intro/IntroNavigation.kt +++ b/app/src/main/java/com/goldenraven/padawanwallet/ui/intro/IntroNavigation.kt @@ -42,22 +42,6 @@ fun IntroNavigation(onBuildWalletButtonClicked: (WalletCreateType) -> Unit) { }, ) { OnboardingScreen(navController = navController, onBuildWalletButtonClicked) } - composable( - route = Screen.WalletChoiceScreen.route, - enterTransition = { - slideIntoContainer(AnimatedContentScope.SlideDirection.Start, animationSpec = tween(animationDuration)) - }, - exitTransition = { - slideOutOfContainer(AnimatedContentScope.SlideDirection.Start, animationSpec = tween(animationDuration)) - }, - popEnterTransition = { - slideIntoContainer(AnimatedContentScope.SlideDirection.End, animationSpec = tween(animationDuration)) - }, - popExitTransition = { - slideOutOfContainer(AnimatedContentScope.SlideDirection.End, animationSpec = tween(animationDuration)) - } - ) { WalletChoiceScreen(navController = navController, onBuildWalletButtonClicked) } - composable( route = Screen.WalletRecoveryScreen.route, enterTransition = { diff --git a/app/src/main/java/com/goldenraven/padawanwallet/ui/intro/OnboardingScreen.kt b/app/src/main/java/com/goldenraven/padawanwallet/ui/intro/OnboardingScreen.kt index 163a0e01..fd4d5281 100644 --- a/app/src/main/java/com/goldenraven/padawanwallet/ui/intro/OnboardingScreen.kt +++ b/app/src/main/java/com/goldenraven/padawanwallet/ui/intro/OnboardingScreen.kt @@ -7,14 +7,18 @@ package com.goldenraven.padawanwallet.ui.intro import android.util.Log import androidx.compose.foundation.Image +import androidx.compose.foundation.ScrollState import androidx.compose.foundation.background import androidx.compose.foundation.layout.* +import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.verticalScroll import androidx.compose.material3.* import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color +import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.TextStyle @@ -30,6 +34,8 @@ import com.goldenraven.padawanwallet.theme.* import com.goldenraven.padawanwallet.ui.Screen import com.goldenraven.padawanwallet.ui.ShowBars import com.goldenraven.padawanwallet.ui.standardBorder +import com.goldenraven.padawanwallet.utils.ScreenSizeHeight +import com.goldenraven.padawanwallet.utils.getScreenSizeHeight private const val TAG = "OnboardingScreen" @@ -38,9 +44,130 @@ internal fun OnboardingScreen( navController: NavController, onBuildWalletButtonClicked: (WalletCreateType) -> Unit ) { + val screenSizeHeight: ScreenSizeHeight = getScreenSizeHeight(LocalConfiguration.current.screenHeightDp) + val pageScrollState: ScrollState = rememberScrollState() ShowBars() + if (screenSizeHeight == ScreenSizeHeight.Small) { + SmallOnboarding( + pageScrollState = pageScrollState, + navController = navController, + onBuildWalletButtonClicked = onBuildWalletButtonClicked + ) + } else { + PhoneOnboarding( + navController = navController, + onBuildWalletButtonClicked = onBuildWalletButtonClicked + ) + } +} + +@Composable +internal fun SmallOnboarding( + pageScrollState: ScrollState, + navController: NavController, + onBuildWalletButtonClicked: (WalletCreateType) -> Unit +) { + Column( + verticalArrangement = Arrangement.Center, + horizontalAlignment = Alignment.CenterHorizontally, + modifier = Modifier + .fillMaxWidth() + .fillMaxSize() + .background(Color(0xffffffff)) + // .padding(top = 70.dp) + .verticalScroll(pageScrollState) + ) { + Image( + painter = painterResource(id = R.drawable.ic_padawan_colour_foreground), + contentDescription = "Padawan Logo", + Modifier.size(140.dp) + ) + Text( + text = "Padawan Wallet", + style = PadawanTypography.headlineLarge, + fontSize = 34.sp, + color = Color(0xff1f0208), + modifier = Modifier + .padding(start = 24.dp, end = 24.dp, bottom = 8.dp) + ) + + Text( + stringResource(R.string.welcome_statement), + style = PadawanTypography.bodyMedium, + fontSize = 16.sp, + color = Color(0xff787878), + modifier = Modifier + .padding(start = 24.dp, end = 24.dp, bottom = 12.dp) + ) + + Button( + onClick = { + Log.i(TAG, "Creating a wallet") + onBuildWalletButtonClicked(WalletCreateType.FROMSCRATCH) + }, + colors = ButtonDefaults.buttonColors(containerColor = Color(0xfff6cf47)), + shape = RoundedCornerShape(20.dp), + border = standardBorder, + modifier = Modifier + .padding(top = 4.dp, start = 4.dp, end = 4.dp, bottom = 4.dp) + .standardShadow(20.dp) + .height(70.dp) + .width(240.dp) + .align(Alignment.CenterHorizontally) + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier.padding(vertical = 4.dp) + ) { + Text( + text = "Create a wallet", + // style = GargoyleTypography.labelLarge, + color = Color(0xff000000) + ) + // Spacer(modifier = Modifier.width(8.dp)) + } + } + + Row( + horizontalArrangement = Arrangement.Center, + verticalAlignment = Alignment.Bottom, + modifier = Modifier + .padding(bottom = 24.dp) + ) { + Text( + text = "Already have a wallet?", + color = Color(0xff787878), + modifier = Modifier + .padding(start = 24.dp, bottom = 8.dp) + .height(40.dp) + ) + TextButton( + onClick = { + Log.i("OnboardScreen", "Recovering a wallet") + navController.navigate(Screen.WalletRecoveryScreen.route) + }, + modifier = Modifier + .width(120.dp) + .padding(0.dp) + .height(70.dp) + ) { + Text( + text = "Recover it here", + color = Color(0xff787878), + style = TextStyle(textDecoration = TextDecoration.Underline) + ) + } + } + } +} + +@Composable +internal fun PhoneOnboarding( + navController: NavController, + onBuildWalletButtonClicked: (WalletCreateType) -> Unit +) { ConstraintLayout( modifier = Modifier .fillMaxSize() diff --git a/app/src/main/java/com/goldenraven/padawanwallet/ui/intro/WalletChoiceScreen.kt b/app/src/main/java/com/goldenraven/padawanwallet/ui/intro/WalletChoiceScreen.kt deleted file mode 100644 index c4e3035e..00000000 --- a/app/src/main/java/com/goldenraven/padawanwallet/ui/intro/WalletChoiceScreen.kt +++ /dev/null @@ -1,119 +0,0 @@ -/* - * Copyright 2020-2022 thunderbiscuit and contributors. - * Use of this source code is governed by the Apache 2.0 license that can be found in the ./LICENSE file. - */ - -package com.goldenraven.padawanwallet.ui.intro - -import androidx.compose.foundation.background -import androidx.compose.foundation.layout.* -import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material3.* -import androidx.compose.runtime.Composable -import androidx.compose.ui.Alignment -import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.shadow -import androidx.compose.ui.res.stringResource -import androidx.compose.ui.text.font.FontStyle -import androidx.compose.ui.text.font.FontWeight -import androidx.compose.ui.text.style.TextAlign -import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp -import androidx.constraintlayout.compose.ConstraintLayout -import androidx.navigation.NavController -import com.goldenraven.padawanwallet.R -import com.goldenraven.padawanwallet.WalletCreateType -import com.goldenraven.padawanwallet.theme.* -import com.goldenraven.padawanwallet.ui.Screen - -@Composable -internal fun WalletChoiceScreen( - navController: NavController, - onBuildWalletButtonClicked: (WalletCreateType) -> Unit -) { - ConstraintLayout { - val (create, alreadyHave) = createRefs() - - Column( - horizontalAlignment = Alignment.CenterHorizontally, - modifier = Modifier - .fillMaxSize(1f) - .background(MaterialTheme.colorScheme.background) - ) { - Column { - Text( - text = stringResource(R.string.padawan), - color = padawan_theme_text_headline, - fontSize = 70.sp, - fontFamily = ShareTechMono, - modifier = Modifier - .padding(top = 70.dp) - .align(Alignment.CenterHorizontally) - ) - Text( - stringResource(R.string.elevator_pitch), - color = md_theme_dark_onBackground, - style = PadawanTypography.headlineMedium, - fontStyle = FontStyle.Italic, - fontWeight = FontWeight.Light, - modifier = Modifier.align(Alignment.End) - ) - } - } - - Button( - onClick = { onBuildWalletButtonClicked(WalletCreateType.FROMSCRATCH) }, - colors = ButtonDefaults.buttonColors(md_theme_dark_surfaceLight), - shape = RoundedCornerShape(16.dp), - modifier = Modifier - .size(width = 300.dp, height = 170.dp) - .padding(vertical = 8.dp, horizontal = 8.dp) - .shadow(elevation = 8.dp, shape = RoundedCornerShape(16.dp)) - .constrainAs(create) { - bottom.linkTo(alreadyHave.top) - start.linkTo(parent.start) - end.linkTo(parent.end) - } - ) { - Text( - stringResource(R.string.create_new_wallet), - style = PadawanTypography.labelLarge, - fontSize = 21.sp, - lineHeight = 28.sp, - textAlign = TextAlign.Center - ) - } - - Button( - onClick = { navController.navigate(Screen.WalletRecoveryScreen.route) }, - colors = ButtonDefaults.buttonColors(md_theme_dark_surface), - shape = RoundedCornerShape(16.dp), - modifier = Modifier - .size(width = 300.dp, height = 170.dp) - .padding(vertical = 8.dp, horizontal = 8.dp) - .shadow(elevation = 8.dp, shape = RoundedCornerShape(16.dp)) - .constrainAs(alreadyHave) { - bottom.linkTo(parent.bottom, margin = 100.dp) - start.linkTo(parent.start) - end.linkTo(parent.end) - } - ) { - Text( - stringResource(R.string.already_have_a_wallet), - style = PadawanTypography.labelLarge, - fontSize = 21.sp, - lineHeight = 28.sp, - textAlign = TextAlign.Center, - ) - } - } -} - - -// @Preview(device = Devices.PIXEL_4, showBackground = true) -// @Composable -// internal fun PreviewWalletChoiceScreen() { -// PadawanTheme { -// WalletChoiceScreen(rememberNavController(), { } ) -// } -// } diff --git a/app/src/main/java/com/goldenraven/padawanwallet/ui/wallet/WalletRootScreen.kt b/app/src/main/java/com/goldenraven/padawanwallet/ui/wallet/WalletRootScreen.kt index 32911830..a8a9c141 100644 --- a/app/src/main/java/com/goldenraven/padawanwallet/ui/wallet/WalletRootScreen.kt +++ b/app/src/main/java/com/goldenraven/padawanwallet/ui/wallet/WalletRootScreen.kt @@ -24,22 +24,29 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.rotate import androidx.compose.ui.draw.scale import androidx.compose.ui.graphics.Color +import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.tooling.preview.Devices +import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import androidx.constraintlayout.compose.ConstraintLayout import androidx.navigation.NavController import androidx.navigation.NavHostController +import androidx.navigation.compose.rememberNavController import com.goldenraven.padawanwallet.R import com.goldenraven.padawanwallet.data.tx.Tx import com.goldenraven.padawanwallet.theme.* import com.goldenraven.padawanwallet.ui.FadedVerticalDivider import com.goldenraven.padawanwallet.ui.Screen import com.goldenraven.padawanwallet.ui.standardBorder +import com.goldenraven.padawanwallet.utils.ScreenSizeWidth +import com.goldenraven.padawanwallet.utils.formatCurrency import com.goldenraven.padawanwallet.utils.formatInBtc +import com.goldenraven.padawanwallet.utils.getScreenSizeWidth import io.ktor.http.* // TODO Think about reintroducing refreshing @@ -48,6 +55,8 @@ import io.ktor.http.* // TODO Handle old faucet dialog // TODO Finish up send & receive screen +private const val TAG = "WalletRootScreen" + @Composable internal fun WalletRootScreen( navController: NavHostController, @@ -110,7 +119,6 @@ fun BalanceBox( Card( border = standardBorder, shape = RoundedCornerShape(20.dp), - // containerColor = padawan_theme_onBackground_secondary, colors = CardDefaults.cardColors(padawan_theme_onBackground_secondary), modifier = Modifier .standardShadow(20.dp) @@ -254,23 +262,14 @@ fun BalanceBox( } } -fun formatCurrency(amount: String): String { - val regex = "(\\d)(?=(\\d{3})+\$)".toRegex() - val dotIdx = amount.indexOf('.') - return if (dotIdx == -1) { - amount.replace(regex, "\$1,") - } else { - val num = amount.substring(0, dotIdx).replace(regex, "\$1,") - val dec = amount.substring(dotIdx+1).replace(regex, "\$1 ") - "$num.$dec" - } -} - @Composable fun SendReceive(navController: NavHostController) { + val screenSizeWidth: ScreenSizeWidth = getScreenSizeWidth(LocalConfiguration.current.screenWidthDp) + Row( modifier = Modifier .padding(top = 4.dp) + .height(70.dp) ) { Button( onClick = { navController.navigate(Screen.ReceiveScreen.route) }, @@ -281,13 +280,16 @@ fun SendReceive(navController: NavHostController) { .padding(all = 4.dp) .standardShadow(20.dp) .weight(weight = 0.5f) + .fillMaxHeight() ) { Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier.padding(vertical = 8.dp)) { Text( text = "Receive", style = PadawanTypography.labelLarge, ) - Icon(painter = painterResource(id = R.drawable.ic_receive), contentDescription = "Receive Icon") + if (screenSizeWidth == ScreenSizeWidth.Phone) { + Icon(painter = painterResource(id = R.drawable.ic_receive), contentDescription = "Receive Icon") + } } } Button( @@ -298,20 +300,22 @@ fun SendReceive(navController: NavHostController) { modifier = Modifier .padding(all = 4.dp) .standardShadow(20.dp) - .weight(weight = 0.5f), + .weight(weight = 0.5f) + .fillMaxHeight(), ) { Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier.padding(vertical = 8.dp)) { Text( text = "Send", style = PadawanTypography.labelLarge, ) - Icon(painter = painterResource(id = R.drawable.ic_send), contentDescription = "Send Icon") + if (screenSizeWidth == ScreenSizeWidth.Phone) { + Icon(painter = painterResource(id = R.drawable.ic_send), contentDescription = "Send Icon") + } } } } } -@OptIn(ExperimentalMaterial3Api::class) @Composable fun TransactionListBox( tempOpenFaucetDialog: MutableState, @@ -566,3 +570,14 @@ private fun FaucetDialog(walletViewModel: WalletViewModel) { private fun viewTransaction(navController: NavController, txid: String) { navController.navigate("${Screen.TransactionScreen.route}/txid=$txid") } + +@Preview(name = "PIXEL 4", device = Devices.PIXEL_4, showBackground = true) +@Preview(name = "PIXEL 2, 270 Wide", device = Devices.PIXEL_2, widthDp = 270) +@Composable +internal fun PreviewSendReceiveRow() { + PadawanTheme { + SendReceive( + rememberNavController(), + ) + } +} diff --git a/app/src/main/java/com/goldenraven/padawanwallet/utils/FormatBalance.kt b/app/src/main/java/com/goldenraven/padawanwallet/utils/FormatBalance.kt index 68748329..40393244 100644 --- a/app/src/main/java/com/goldenraven/padawanwallet/utils/FormatBalance.kt +++ b/app/src/main/java/com/goldenraven/padawanwallet/utils/FormatBalance.kt @@ -10,3 +10,15 @@ fun ULong?.formatInBtc(): String { } return DecimalFormat("0.00000000").format(balanceInSats) } + +fun formatCurrency(amount: String): String { + val regex = "(\\d)(?=(\\d{3})+\$)".toRegex() + val dotIdx = amount.indexOf('.') + return if (dotIdx == -1) { + amount.replace(regex, "\$1,") + } else { + val num = amount.substring(0, dotIdx).replace(regex, "\$1,") + val dec = amount.substring(dotIdx+1).replace(regex, "\$1 ") + "$num.$dec" + } +} diff --git a/app/src/main/java/com/goldenraven/padawanwallet/utils/ScreenSize.kt b/app/src/main/java/com/goldenraven/padawanwallet/utils/ScreenSize.kt new file mode 100644 index 00000000..3c7b733b --- /dev/null +++ b/app/src/main/java/com/goldenraven/padawanwallet/utils/ScreenSize.kt @@ -0,0 +1,34 @@ +/* + * Copyright 2020-2023 thunderbiscuit and contributors. + * Use of this source code is governed by the Apache 2.0 license that can be found in the ./LICENSE file. + */ + +package com.goldenraven.padawanwallet.utils + +enum class ScreenSizeWidth { + Small, + Phone, + // Tablet, +} + +enum class ScreenSizeHeight { + Small, + Phone, + // Tablet, +} + +fun getScreenSizeWidth(width: Int): ScreenSizeWidth { + return when { + width < 340 -> ScreenSizeWidth.Small + else -> ScreenSizeWidth.Phone + // else -> ScreenSize.Tablet + } +} + +fun getScreenSizeHeight(height: Int): ScreenSizeHeight { + return when { + height < 700 -> ScreenSizeHeight.Small + else -> ScreenSizeHeight.Phone + // else -> ScreenSize.Tablet + } +}