From 09907d00f67fe7fea5f63799d0d081c97959b029 Mon Sep 17 00:00:00 2001 From: Tangem Date: Thu, 1 Jun 2023 23:35:17 +0300 Subject: [PATCH] Updated on 2026-08-14 --- .../features/home/compose/StoriesScreen.kt | 107 ++++++++---------- .../home/compose/views/StoriesProgressBar.kt | 9 +- .../tap/features/home/redux/HomeState.kt | 30 +++++ .../presentation/ui/OneInchStoriesScreen.kt | 105 +++++++++++++++++ .../presentation/ui/component/Gradient.kt | 38 +++++++ 5 files changed, 220 insertions(+), 69 deletions(-) create mode 100644 features/learn2earn/impl/src/main/java/com/tangem/feature/learn2earn/presentation/ui/OneInchStoriesScreen.kt create mode 100644 features/learn2earn/impl/src/main/java/com/tangem/feature/learn2earn/presentation/ui/component/Gradient.kt diff --git a/app/src/main/java/com/tangem/tap/features/home/compose/StoriesScreen.kt b/app/src/main/java/com/tangem/tap/features/home/compose/StoriesScreen.kt index ef40d850f6..2d453259c4 100644 --- a/app/src/main/java/com/tangem/tap/features/home/compose/StoriesScreen.kt +++ b/app/src/main/java/com/tangem/tap/features/home/compose/StoriesScreen.kt @@ -5,29 +5,11 @@ package com.tangem.tap.features.home.compose import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.gestures.detectTapGestures -import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.WindowInsets -import androidx.compose.foundation.layout.fillMaxHeight -import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height -import androidx.compose.foundation.layout.heightIn -import androidx.compose.foundation.layout.navigationBarsPadding -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.statusBars -import androidx.compose.foundation.layout.union -import androidx.compose.foundation.layout.windowInsetsPadding +import androidx.compose.foundation.layout.* import androidx.compose.material.Button import androidx.compose.material.ButtonDefaults import androidx.compose.material.Text -import androidx.compose.runtime.Composable -import androidx.compose.runtime.LaunchedEffect -import androidx.compose.runtime.MutableState -import androidx.compose.runtime.mutableStateOf -import androidx.compose.runtime.remember +import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.alpha @@ -43,20 +25,16 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.google.accompanist.systemuicontroller.rememberSystemUiController -import com.tangem.tap.features.home.compose.content.FirstStoriesContent -import com.tangem.tap.features.home.compose.content.StoriesCurrencies -import com.tangem.tap.features.home.compose.content.StoriesRevolutionaryWallet -import com.tangem.tap.features.home.compose.content.StoriesUltraSecureBackup -import com.tangem.tap.features.home.compose.content.StoriesWalletForEveryone -import com.tangem.tap.features.home.compose.content.StoriesWeb3 +import com.tangem.core.ui.res.TangemTheme +import com.tangem.feature.learn2earn.presentation.ui.OneInchStoriesContent +import com.tangem.tap.features.home.compose.content.* import com.tangem.tap.features.home.compose.views.HomeButtons import com.tangem.tap.features.home.compose.views.StoriesProgressBar import com.tangem.tap.features.home.redux.HomeState +import com.tangem.tap.features.home.redux.Stories import com.tangem.wallet.R import kotlin.math.max -private const val STEPS = 6 - @Suppress("LongMethod", "ComplexMethod") @Composable fun StoriesScreen( @@ -65,16 +43,18 @@ fun StoriesScreen( onShopButtonClick: () -> Unit, onSearchTokensClick: () -> Unit, ) { - val currentStep = remember { mutableStateOf(1) } val systemUiController = rememberSystemUiController() + val state = homeState.value - val isDarkBackground = currentStep.value !in 3..5 + var currentStory by remember { mutableStateOf(state.firstStory) } + val currentStep = { state.stepOf(currentStory) } val goToPreviousScreen = { - currentStep.value = max(1, currentStep.value - 1) + currentStory = state.stories[max(0, currentStep() - 1)] } val goToNextScreen = { - currentStep.value = if (currentStep.value < STEPS) currentStep.value + 1 else 1 + currentStory = + if (currentStep() < state.stories.lastIndex) state.stories[currentStep() + 1] else state.firstStory } val isPressed = remember { mutableStateOf(false) } @@ -82,10 +62,10 @@ fun StoriesScreen( val hideContent = remember { mutableStateOf(true) } - LaunchedEffect(key1 = isDarkBackground) { + LaunchedEffect(key1 = currentStory.isDarkBackground) { systemUiController.setSystemBarsColor( color = Color.Transparent, - darkIcons = !isDarkBackground, + darkIcons = !currentStory.isDarkBackground, ) } @@ -134,7 +114,7 @@ fun StoriesScreen( }, ) } - if (!isDarkBackground) { + if (!currentStory.isDarkBackground) { Image( modifier = Modifier.fillMaxSize(), painter = painterResource(id = R.drawable.ic_overlay), @@ -154,9 +134,9 @@ fun StoriesScreen( verticalArrangement = Arrangement.Center, ) { StoriesProgressBar( - steps = STEPS, - currentStep = currentStep.value, - stepDuration = currentStep.duration(), + steps = state.stories.lastIndex, + currentStep = currentStep(), + stepDuration = currentStory.duration, paused = isPaused, onStepFinish = goToNextScreen, ) @@ -169,15 +149,21 @@ fun StoriesScreen( .height(17.dp) .alpha(if (hideContent.value) 0f else 1f) .align(Alignment.Start), - colorFilter = if (isDarkBackground) null else ColorFilter.tint(Color.Black), + colorFilter = if (currentStory.isDarkBackground) null else ColorFilter.tint(Color.Black), ) - when (currentStep.value) { - 1 -> FirstStoriesContent(isPaused, currentStep.duration()) { hideContent.value = it } - 2 -> StoriesRevolutionaryWallet(currentStep.duration()) - 3 -> StoriesUltraSecureBackup(isPaused, currentStep.duration()) - 4 -> StoriesCurrencies(isPaused, currentStep.duration()) - 5 -> StoriesWeb3(isPaused, currentStep.duration()) - 6 -> StoriesWalletForEveryone(currentStep.duration()) + when (currentStory) { + Stories.OneInchPromo -> { + // TODO: fixme + TangemTheme { + OneInchStoriesContent({}) + } + } + Stories.TangemIntro -> FirstStoriesContent(isPaused, currentStory.duration) { hideContent.value = it } + Stories.RevolutionaryWallet -> StoriesRevolutionaryWallet(currentStory.duration) + Stories.UltraSecureBackup -> StoriesUltraSecureBackup(isPaused, currentStory.duration) + Stories.Currencies -> StoriesCurrencies(isPaused, currentStory.duration) + Stories.Web3 -> StoriesWeb3(isPaused, currentStory.duration) + Stories.WalletForEveryone -> StoriesWalletForEveryone(currentStory.duration) } } Column( @@ -186,7 +172,7 @@ fun StoriesScreen( .align(Alignment.BottomCenter) .fillMaxWidth(), ) { - if (currentStep.value == 4) { + if (currentStory == Stories.Currencies) { Button( onClick = onSearchTokensClick, modifier = Modifier @@ -210,25 +196,22 @@ fun StoriesScreen( ) } } - HomeButtons( - modifier = Modifier - .padding(start = 16.dp, top = 0.dp, end = 16.dp, bottom = 37.dp) - .fillMaxWidth(), - isDarkBackground = isDarkBackground, - btnScanStateInProgress = homeState.value.btnScanStateInProgress, - onScanButtonClick = onScanButtonClick, - onShopButtonClick = onShopButtonClick, - ) + + if (currentStory != Stories.OneInchPromo) { + HomeButtons( + modifier = Modifier + .padding(start = 16.dp, top = 0.dp, end = 16.dp, bottom = 37.dp) + .fillMaxWidth(), + isDarkBackground = currentStory.isDarkBackground, + btnScanStateInProgress = homeState.value.btnScanStateInProgress, + onScanButtonClick = onScanButtonClick, + onShopButtonClick = onShopButtonClick, + ) + } } } } -@Suppress("MagicNumber") -private fun MutableState.duration(): Int = when (this.value) { - 1 -> 8000 - else -> 6000 -} - @Preview @Composable private fun StoriesScreenPreview() { diff --git a/app/src/main/java/com/tangem/tap/features/home/compose/views/StoriesProgressBar.kt b/app/src/main/java/com/tangem/tap/features/home/compose/views/StoriesProgressBar.kt index f92adcf9d1..2774f0f683 100644 --- a/app/src/main/java/com/tangem/tap/features/home/compose/views/StoriesProgressBar.kt +++ b/app/src/main/java/com/tangem/tap/features/home/compose/views/StoriesProgressBar.kt @@ -4,12 +4,7 @@ import androidx.compose.animation.core.Animatable import androidx.compose.animation.core.LinearEasing import androidx.compose.animation.core.tween import androidx.compose.foundation.background -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.fillMaxHeight -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height -import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.* import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.remember @@ -52,7 +47,7 @@ fun StoriesProgressBar( // .height() .padding(start = 9.dp, end = 9.dp, top = 16.dp), ) { - for (index in 1..steps) { + for (index in 0..steps) { Row( modifier = Modifier .height(2.dp) diff --git a/app/src/main/java/com/tangem/tap/features/home/redux/HomeState.kt b/app/src/main/java/com/tangem/tap/features/home/redux/HomeState.kt index 618e432dec..9342420e6b 100644 --- a/app/src/main/java/com/tangem/tap/features/home/redux/HomeState.kt +++ b/app/src/main/java/com/tangem/tap/features/home/redux/HomeState.kt @@ -8,8 +8,38 @@ import org.rekotlin.StateType data class HomeState( val scanInProgress: Boolean = false, val btnScanState: IndeterminateProgressButton = IndeterminateProgressButton(ButtonState.ENABLED), + val stories: List = initDefaultStories(), ) : StateType { + val firstStory: Stories = stories[0] + val btnScanStateInProgress: Boolean get() = btnScanState.progressState == ProgressState.Loading + + fun stepOf(story: Stories): Int = stories.indexOf(story) + + companion object { + fun initDefaultStories(): List = listOf( + Stories.OneInchPromo, + Stories.TangemIntro, + Stories.RevolutionaryWallet, + Stories.UltraSecureBackup, + Stories.Currencies, + Stories.Web3, + Stories.WalletForEveryone, + ) + } +} + +sealed class Stories( + val isDarkBackground: Boolean, + val duration: Int, +) { + object OneInchPromo : Stories(true, duration = 8000) + object TangemIntro : Stories(true, duration = 8000) + object RevolutionaryWallet : Stories(true, duration = 6000) + object UltraSecureBackup : Stories(false, duration = 6000) + object Currencies : Stories(false, duration = 6000) + object Web3 : Stories(false, duration = 6000) + object WalletForEveryone : Stories(true, duration = 6000) } \ No newline at end of file diff --git a/features/learn2earn/impl/src/main/java/com/tangem/feature/learn2earn/presentation/ui/OneInchStoriesScreen.kt b/features/learn2earn/impl/src/main/java/com/tangem/feature/learn2earn/presentation/ui/OneInchStoriesScreen.kt new file mode 100644 index 0000000000..4d7c7ee283 --- /dev/null +++ b/features/learn2earn/impl/src/main/java/com/tangem/feature/learn2earn/presentation/ui/OneInchStoriesScreen.kt @@ -0,0 +1,105 @@ +package com.tangem.feature.learn2earn.presentation.ui + +import androidx.compose.foundation.Image +import androidx.compose.foundation.layout.* +import androidx.compose.material.Text +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.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.dp +import com.tangem.core.ui.components.SecondaryButton +import com.tangem.core.ui.components.SpacerH16 +import com.tangem.core.ui.components.SpacerH32 +import com.tangem.core.ui.res.TangemTheme +import com.tangem.core.ui.res.TangemTypography +import com.tangem.feature.learn2earn.impl.R +import com.tangem.feature.learn2earn.presentation.ui.component.GradientCircle + +/** +[REDACTED_AUTHOR] + */ +@Suppress("ReusedModifierInstance") +@Composable +fun OneInchStoriesContent(onLearnClick: () -> Unit, modifier: Modifier = Modifier) { + Box(modifier = modifier.fillMaxSize()) { + ContentBackground( + modifier = modifier + .fillMaxSize() + .align(Alignment.Center), + ) + StoryDescription( + headerText = stringResource(id = R.string.story_learn_title), + bodyText = stringResource(id = R.string.story_learn_description), + ) + Image( + modifier = Modifier + .padding(bottom = TangemTheme.dimens.size68) + .align(Alignment.BottomCenter), + painter = painterResource(id = R.drawable.img_1inch_logo_401_378), + contentDescription = null, + ) + SecondaryButton( + modifier = Modifier + .padding(horizontal = TangemTheme.dimens.size16) + .padding(bottom = TangemTheme.dimens.size84) + .fillMaxWidth() + .align(Alignment.BottomCenter), + text = stringResource(id = R.string.story_learn_learn), + onClick = onLearnClick, + ) + } +} + +@Suppress("MagicNumber") +@Composable +private fun ContentBackground(modifier: Modifier = Modifier) { + Box(modifier = modifier) { + GradientCircle( + size = 800.dp, + offsetX = (-220).dp, + offsetY = (-200).dp, + startColor = Color(0xCE164594), + endColor = Color(0x000B173D), + ) + GradientCircle( + size = 800.dp, + offsetX = 200.dp, + offsetY = 290.dp, + startColor = Color(0xFF3D0230), + endColor = Color(0x000B0E17), + ) + } +} + +@Composable +private fun StoryDescription(headerText: String, bodyText: String) { + Column( + modifier = Modifier + .padding(horizontal = TangemTheme.dimens.size40) + .fillMaxSize(), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Top, + ) { + SpacerH32() + Text( + text = headerText, + textAlign = TextAlign.Center, + style = TangemTheme.typography.h1.copy( + fontWeight = FontWeight.Bold, + ), + color = TangemTheme.colors.text.primary2, + ) + SpacerH16() + Text( + text = bodyText, + textAlign = TextAlign.Center, + style = TangemTypography.subtitle1, + color = TangemTheme.colors.text.tertiary, + ) + } +} \ No newline at end of file diff --git a/features/learn2earn/impl/src/main/java/com/tangem/feature/learn2earn/presentation/ui/component/Gradient.kt b/features/learn2earn/impl/src/main/java/com/tangem/feature/learn2earn/presentation/ui/component/Gradient.kt new file mode 100644 index 0000000000..e54a15c863 --- /dev/null +++ b/features/learn2earn/impl/src/main/java/com/tangem/feature/learn2earn/presentation/ui/component/Gradient.kt @@ -0,0 +1,38 @@ +package com.tangem.feature.learn2earn.presentation.ui.component + +import androidx.compose.foundation.Canvas +import androidx.compose.foundation.layout.offset +import androidx.compose.foundation.layout.size +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Brush +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.Dp + +/** +[REDACTED_AUTHOR] + */ +@Composable +internal fun GradientCircle( + size: Dp, + offsetX: Dp, + offsetY: Dp, + startColor: Color, + endColor: Color, + radius: Dp = size / 2, +) { + Canvas( + modifier = Modifier + .size(size) + .offset(x = offsetX, y = offsetY), + onDraw = { + drawCircle( + radius = radius.toPx(), + brush = Brush.radialGradient( + radius = radius.toPx(), + colors = listOf(startColor, endColor), + ), + ) + }, + ) +} \ No newline at end of file