Updated on 2026-08-14

This commit is contained in:
Tangem 2024-08-15 16:41:14 +05:00
commit ff16399ed5
13 changed files with 640 additions and 584 deletions

View file

@ -1,39 +1,68 @@
package com.tangem.core.ui.components.inputrow
import android.content.res.Configuration
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.rememberVectorPainter
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.tooling.preview.Preview
import com.tangem.core.ui.R
import com.tangem.core.ui.components.SpacerW12
import com.tangem.core.ui.components.SpacerWMax
import com.tangem.core.ui.components.inputrow.inner.InputRowAsyncImage
import com.tangem.core.ui.extensions.TextReference
import com.tangem.core.ui.extensions.resolveAnnotatedReference
import com.tangem.core.ui.extensions.resolveReference
import com.tangem.core.ui.res.TangemTheme
import com.tangem.core.ui.res.TangemThemePreview
/**
* Input row component with selector
* [Input Row Image](https://www.figma.com/design/14ISV23YB1yVW1uNVwqrKv/Android?node-id=2841-1589&t=u6pOF6lsdpvWLELb-4)
*
* @param subtitle subtitle text
* @param caption caption text
* @param modifier modifier
* @param imageUrl icon to load
* @param subtitleColor subtitle text color
* @param captionColor caption text color
* @param isGrayscaleImage whether to display grayscale image
* @param iconEndRes icon to end of row
* @param extraContent extra content
*/
@Composable
internal fun InputRowImageBase(
subtitle: TextReference,
caption: TextReference?,
imageUrl: String,
modifier: Modifier = Modifier,
caption: TextReference? = null,
subtitleColor: Color = TangemTheme.colors.text.primary1,
captionColor: Color = TangemTheme.colors.text.tertiary,
isGrayscaleImage: Boolean = false,
extraContent: @Composable RowScope.() -> Unit = {},
iconEndRes: Int? = null,
extraContent: (@Composable RowScope.() -> Unit)? = null,
) {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing12),
modifier = modifier,
) {
InputRowAsyncImage(
imageUrl = imageUrl,
isGrayscale = isGrayscaleImage,
modifier = Modifier
.size(TangemTheme.dimens.spacing36),
.size(TangemTheme.dimens.spacing36)
.clip(TangemTheme.shapes.roundedCornersXLarge),
)
SpacerW12()
Column {
Text(
text = subtitle.resolveReference(),
@ -49,6 +78,44 @@ internal fun InputRowImageBase(
)
}
}
extraContent()
SpacerW12()
if (extraContent != null) {
extraContent()
} else {
SpacerWMax()
}
InputRowEndIcon(iconEndRes)
}
}
}
@Composable
private fun RowScope.InputRowEndIcon(iconRes: Int?) {
AnimatedVisibility(
visible = iconRes != null,
label = "Icon visibility animation",
) {
val icon = remember(this) { requireNotNull(iconRes) }
Icon(
painter = rememberVectorPainter(image = ImageVector.vectorResource(id = icon)),
tint = TangemTheme.colors.icon.informative,
contentDescription = null,
modifier = Modifier.padding(start = TangemTheme.dimens.spacing6),
)
}
}
// region Preview
@Preview(showBackground = true, widthDp = 360)
@Preview(showBackground = true, widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
private fun InputRowImageBase_Preview() {
TangemThemePreview {
InputRowImageBase(
subtitle = TextReference.Str("Binance"),
caption = TextReference.Str("APR 3,54%"),
imageUrl = "",
iconEndRes = R.drawable.ic_chevron_right_24,
)
}
}
// endregion

View file

@ -1,82 +0,0 @@
package com.tangem.core.ui.components.inputrow
import android.content.res.Configuration
import androidx.compose.material3.Icon
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import com.tangem.core.ui.R
import com.tangem.core.ui.components.SpacerWMax
import com.tangem.core.ui.extensions.*
import com.tangem.core.ui.res.TangemTheme
import com.tangem.core.ui.res.TangemThemePreview
/**
* Input row component with selector
* [Input Row Image](https://www.figma.com/design/14ISV23YB1yVW1uNVwqrKv/Android?node-id=2100-842&t=hoBXmDX8NeLrp4p6-4)
*
* @param subtitle subtitle text
* @param caption caption text
* @param imageUrl icon to load
* @param modifier modifier
* @param subtitleColor subtitle text color
* @param captionColor caption text color
*/
@Composable
fun InputRowImageChevron(
subtitle: TextReference,
caption: TextReference,
imageUrl: String,
modifier: Modifier = Modifier,
subtitleColor: Color = TangemTheme.colors.text.primary1,
captionColor: Color = TangemTheme.colors.text.tertiary,
showChevron: Boolean = true,
) {
InputRowImageBase(
subtitle = subtitle,
caption = caption,
imageUrl = imageUrl,
modifier = modifier,
subtitleColor = subtitleColor,
captionColor = captionColor,
) {
SpacerWMax()
if (showChevron) {
Icon(
painter = painterResource(id = R.drawable.ic_chevron_right_24),
tint = TangemTheme.colors.icon.informative,
contentDescription = null,
)
}
}
}
// region Preview
@Preview(showBackground = true, widthDp = 360)
@Preview(showBackground = true, widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
private fun InputRowImageChevron_Preview() {
TangemThemePreview {
InputRowImageChevron(
subtitle = stringReference("Binance"),
caption = combinedReference(
resourceReference(R.string.staking_details_apr),
annotatedReference(
buildAnnotatedString {
append(" ")
withStyle(SpanStyle(TangemTheme.colors.text.accent)) {
stringReference("3,54%")
}
},
),
),
imageUrl = "",
)
}
}
// endregion

View file

@ -9,10 +9,10 @@ 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.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import com.tangem.core.ui.R
import com.tangem.core.ui.components.atoms.text.EllipsisText
import com.tangem.core.ui.extensions.*
@ -33,20 +33,22 @@ import com.tangem.core.ui.res.TangemThemePreview
* @param subtitleColor subtitle text color
* @param captionColor caption text color
* @param isGrayscaleImage whether to display grayscale image
* @param iconEndRes icon to end of row
*/
@Suppress("LongParameterList")
@Composable
fun InputRowImageInfo(
subtitle: TextReference,
caption: TextReference,
infoTitle: TextReference,
infoSubtitle: TextReference,
imageUrl: String,
modifier: Modifier = Modifier,
title: TextReference? = null,
caption: TextReference? = null,
infoSubtitle: TextReference? = null,
subtitleColor: Color = TangemTheme.colors.text.primary1,
captionColor: Color = TangemTheme.colors.text.tertiary,
isGrayscaleImage: Boolean = false,
iconEndRes: Int? = null,
) {
Column(
verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing6),
@ -67,22 +69,41 @@ fun InputRowImageInfo(
subtitleColor = subtitleColor,
captionColor = captionColor,
isGrayscaleImage = isGrayscaleImage,
iconEndRes = iconEndRes,
) {
Column(
verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing2),
horizontalAlignment = Alignment.End,
modifier = Modifier.weight(1f),
) {
EllipsisText(
text = infoTitle.resolveReference(),
style = TangemTheme.typography.body2,
color = TangemTheme.colors.text.primary1,
)
EllipsisText(
text = infoSubtitle.resolveReference(),
style = TangemTheme.typography.caption2,
color = TangemTheme.colors.text.tertiary,
)
if (infoTitle is TextReference.Annotated) {
Text(
text = infoTitle.resolveAnnotatedReference(),
style = TangemTheme.typography.body2,
color = TangemTheme.colors.text.primary1,
)
} else {
EllipsisText(
text = infoTitle.resolveReference(),
style = TangemTheme.typography.body2,
color = TangemTheme.colors.text.primary1,
)
}
infoSubtitle?.let {
if (infoSubtitle is TextReference.Annotated) {
Text(
text = infoSubtitle.resolveAnnotatedReference(),
style = TangemTheme.typography.caption2,
color = TangemTheme.colors.text.tertiary,
)
} else {
EllipsisText(
text = infoSubtitle.resolveReference(),
style = TangemTheme.typography.caption2,
color = TangemTheme.colors.text.tertiary,
)
}
}
}
}
}
@ -92,26 +113,55 @@ fun InputRowImageInfo(
@Preview(showBackground = true, widthDp = 360)
@Preview(showBackground = true, widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
private fun InputRowImageInfo_Preview() {
private fun InputRowImageInfo_Preview(
@PreviewParameter(InputRowImageInfoPreviewDataProvider::class) data: InputRowImageInfoPreviewData,
) {
TangemThemePreview {
InputRowImageInfo(
title = stringReference("Active"),
subtitle = stringReference("Binance"),
caption = combinedReference(
resourceReference(R.string.staking_details_apr),
annotatedReference(
buildAnnotatedString {
append(" ")
withStyle(SpanStyle(TangemTheme.colors.text.accent)) {
stringReference("3,54%")
}
},
),
),
infoTitle = stringReference("5431231231231231231231232 USD"),
infoSubtitle = stringReference("5 SOL"),
title = data.title,
subtitle = data.subtitle,
caption = data.caption,
infoTitle = data.infoTitle,
infoSubtitle = data.infoSubtitle,
imageUrl = "",
iconEndRes = R.drawable.ic_chevron_right_24,
)
}
}
private class InputRowImageInfoPreviewDataProvider : PreviewParameterProvider<InputRowImageInfoPreviewData> {
override val values: Sequence<InputRowImageInfoPreviewData>
get() = sequenceOf(
InputRowImageInfoPreviewData(
title = stringReference("Validator"),
subtitle = stringReference("Binance"),
caption = combinedReference(
resourceReference(R.string.staking_details_apr),
annotatedReference(
buildAnnotatedString {
append(" ")
append("3,54%")
},
),
),
infoTitle = stringReference("5431231231231231231231232 USD"),
infoSubtitle = stringReference("5 SOL"),
),
InputRowImageInfoPreviewData(
title = null,
subtitle = stringReference("Binance"),
caption = null,
infoTitle = stringReference("5431231231231231231231232 USD"),
infoSubtitle = null,
),
)
}
private data class InputRowImageInfoPreviewData(
val title: TextReference?,
val subtitle: TextReference,
val caption: TextReference?,
val infoTitle: TextReference,
val infoSubtitle: TextReference?,
)
// endregion

View file

@ -40,6 +40,7 @@ import java.math.BigDecimal
* @param subtitleColor subtitle text color
* @param captionColor caption text color
* @param isSelected true if selected
* @param selectorContent selector content
*/
@Composable
fun InputRowImageSelector(
@ -51,6 +52,7 @@ fun InputRowImageSelector(
subtitleColor: Color = TangemTheme.colors.text.primary1,
captionColor: Color = TangemTheme.colors.text.tertiary,
isSelected: Boolean = false,
selectorContent: @Composable ((isSelected: Boolean, isEnabled: Boolean, onSelect: () -> Unit) -> Unit),
) {
InputRowImageBase(
subtitle = subtitle,
@ -67,7 +69,7 @@ fun InputRowImageSelector(
.padding(TangemTheme.dimens.spacing12),
) {
SpacerWMax()
TangemRadioButton(isSelected = isSelected, isEnabled = false, onClick = onSelect)
selectorContent(isSelected, false, onSelect)
}
}
@ -98,6 +100,9 @@ private fun InputRowImageSelectorPreview(
imageUrl = "",
isSelected = false,
onSelect = {},
selectorContent = { isSelected, isEnabled, onSelect ->
TangemRadioButton(isSelected = isSelected, isEnabled = isEnabled, onClick = onSelect)
},
)
}
}

View file

@ -2,15 +2,19 @@ package com.tangem.core.ui.decorations
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.Dp
import com.tangem.core.ui.res.TangemTheme
@Composable
fun Modifier.roundedShapeItemDecoration(
currentIndex: Int,
lastIndex: Int,
addDefaultPadding: Boolean = true,
radius: Dp = TangemTheme.dimens.radius16,
): Modifier = composed {
val modifier = if (addDefaultPadding) this.padding(horizontal = TangemTheme.dimens.spacing16) else this
val isSingleItem = currentIndex == 0 && lastIndex == 0
@ -24,7 +28,7 @@ fun Modifier.roundedShapeItemDecoration(
Modifier
},
)
.clip(shape = TangemTheme.shapes.roundedCornersXMedium)
.clip(shape = RoundedCornerShape(radius))
}
currentIndex == 0 -> {
modifier
@ -37,8 +41,8 @@ fun Modifier.roundedShapeItemDecoration(
)
.clip(
shape = RoundedCornerShape(
topStart = TangemTheme.dimens.radius16,
topEnd = TangemTheme.dimens.radius16,
topStart = radius,
topEnd = radius,
),
)
}
@ -46,8 +50,8 @@ fun Modifier.roundedShapeItemDecoration(
modifier
.clip(
shape = RoundedCornerShape(
bottomStart = TangemTheme.dimens.radius16,
bottomEnd = TangemTheme.dimens.radius16,
bottomStart = radius,
bottomEnd = radius,
),
)
}

View file

@ -1,10 +1,5 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:autoMirrored="true"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#000000"
android:pathData="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:autoMirrored="true" android:height="24dp" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp">
<path android:fillColor="#1E1E1E" android:pathData="M12.59,16.58L17.17,12L12.59,7.41L14,6L20,12L14,18L12.59,16.58Z"/>
</vector>

View file

@ -1,345 +1,359 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="328dp"
android:height="78dp"
android:viewportWidth="328"
android:viewportHeight="78">
<group>
<clip-path
android:pathData="M14,0L314,0A14,14 0,0 1,328 14L328,64A14,14 0,0 1,314 78L14,78A14,14 0,0 1,0 64L0,14A14,14 0,0 1,14 0z"/>
<path
android:pathData="M14,0L314,0A14,14 0,0 1,328 14L328,64A14,14 0,0 1,314 78L14,78A14,14 0,0 1,0 64L0,14A14,14 0,0 1,14 0z"
android:fillColor="#010101"/>
<path
android:pathData="M0,0h328v78h-328z">
<aapt:attr name="android:fillColor">
<gradient
android:startX="0"
android:startY="0"
android:endX="40.3"
android:endY="159.38"
android:type="linear">
<item android:offset="0" android:color="#FF0099FF"/>
<item android:offset="0.45" android:color="#00000000"/>
<item android:offset="0.6" android:color="#00000000"/>
<item android:offset="1" android:color="#FF0099FF"/>
</gradient>
</aapt:attr>
</path>
<vector xmlns:aapt="http://schemas.android.com/aapt" xmlns:android="http://schemas.android.com/apk/res/android" android:autoMirrored="true" android:height="78dp" android:viewportHeight="78" android:viewportWidth="328" android:width="328dp">
<group>
<clip-path
android:pathData="M255.81,48.61h38.44v17.39h-38.44z"/>
<path
android:pathData="M294.04,55.66C294.04,52.02 285.53,49.07 275.03,49.07C264.54,49.07 256.03,52.02 256.03,55.66V59.19C256.03,62.83 264.54,65.78 275.03,65.78C285.53,65.78 294.04,62.83 294.04,59.19V55.66Z">
<aapt:attr name="android:fillColor">
<gradient
android:startX="255.89"
android:startY="57.42"
android:endX="294.04"
android:endY="57.42"
android:type="linear">
<item android:offset="0" android:color="#FF8F929E"/>
<item android:offset="0.26" android:color="#FF6A6D7A"/>
<item android:offset="0.5" android:color="#FF5E616D"/>
<item android:offset="0.74" android:color="#FF80828F"/>
<item android:offset="1" android:color="#FF9295A1"/>
</gradient>
</aapt:attr>
</path>
<path
android:pathData="M275.03,66C264.26,66 255.81,63.01 255.81,59.19V55.66C255.81,51.84 264.26,48.85 275.03,48.85C285.81,48.85 294.25,51.84 294.25,55.66V59.19C294.25,63.01 285.81,66 275.03,66ZM275.03,49.29C264.67,49.29 256.25,52.15 256.25,55.66V59.19C256.25,62.7 264.67,65.56 275.03,65.56C285.39,65.56 293.82,62.7 293.82,59.19V55.66C293.82,52.15 285.39,49.29 275.03,49.29V49.29Z"
android:fillColor="#727481"/>
<path
android:pathData="M275.03,62.25C285.53,62.25 294.04,59.3 294.04,55.66C294.04,52.02 285.53,49.07 275.03,49.07C264.54,49.07 256.03,52.02 256.03,55.66C256.03,59.3 264.54,62.25 275.03,62.25Z">
<aapt:attr name="android:fillColor">
<gradient
android:startX="273.96"
android:startY="49.68"
android:endX="275.63"
android:endY="58.7"
android:type="linear">
<item android:offset="0" android:color="#FFE1E3F0"/>
<item android:offset="1" android:color="#FFA8AAB7"/>
</gradient>
</aapt:attr>
</path>
<path
android:pathData="M275.03,62.48C264.26,62.48 255.81,59.49 255.81,55.66C255.81,51.84 264.26,48.85 275.03,48.85C285.81,48.85 294.25,51.84 294.25,55.66C294.25,59.48 285.81,62.47 275.03,62.47V62.48ZM275.03,49.29C264.67,49.29 256.25,52.15 256.25,55.66C256.25,59.17 264.67,62.03 275.03,62.03C285.39,62.03 293.82,59.18 293.82,55.66C293.82,52.15 285.39,49.29 275.03,49.29Z"
android:fillColor="#F3F6FF"/>
<path
android:pathData="M293.95,55.02C293.01,51.68 284.9,49.07 275.03,49.07C265.17,49.07 257.06,51.68 256.12,55.02H293.95Z">
<aapt:attr name="android:fillColor">
<gradient
android:startX="271.42"
android:startY="41.66"
android:endX="276.67"
android:endY="60.45"
android:type="linear">
<item android:offset="0.2" android:color="#FFFFFFFF"/>
<item android:offset="1" android:color="#FFFFFFFF"/>
</gradient>
</aapt:attr>
</path>
<path
android:pathData="M275.03,49.95C266.17,49.95 258.99,52.48 258.99,55.59C258.99,56.77 260.02,57.86 261.77,58.76C260.47,57.98 259.72,57.07 259.72,56.11C259.72,53.17 266.58,50.79 275.03,50.79C283.49,50.79 290.35,53.17 290.35,56.11C290.35,57.08 289.6,57.98 288.29,58.76C290.04,57.86 291.07,56.77 291.07,55.59C291.07,52.48 283.89,49.96 275.03,49.96V49.95Z"
android:fillColor="#8D909C"/>
<path
android:pathData="M259.1,55.66C259.1,55.66 259.1,55.81 259.15,56.06C259.21,56.32 259.35,56.69 259.66,57.07C260.27,57.84 261.48,58.59 263.04,59.18C264.58,59.79 266.49,60.23 268.54,60.54C270.59,60.86 272.81,61.01 275.03,61C277.25,61 279.46,60.85 281.52,60.54C283.58,60.23 285.48,59.79 287.03,59.18C288.58,58.59 289.79,57.84 290.4,57.07C290.71,56.69 290.85,56.32 290.91,56.06C290.95,55.94 290.95,55.84 290.95,55.76C290.96,55.69 290.96,55.66 290.96,55.66C290.96,55.66 290.96,55.7 290.96,55.76C290.95,55.84 290.96,55.94 290.92,56.06C290.88,56.32 290.75,56.7 290.45,57.1C289.86,57.91 288.67,58.75 287.1,59.38C285.54,60.02 283.64,60.53 281.57,60.86C279.5,61.19 277.27,61.37 275.03,61.37C272.8,61.37 270.56,61.19 268.49,60.86C266.42,60.53 264.51,60.02 262.96,59.38C261.4,58.75 260.21,57.91 259.61,57.1C259.32,56.71 259.18,56.32 259.14,56.06C259.11,55.93 259.11,55.83 259.11,55.76C259.11,55.69 259.1,55.66 259.1,55.66Z"
android:fillColor="#D4D6E3"/>
<path
android:pathData="M275.4,48.77C275.3,48.67 275.18,48.62 275.03,48.62C274.3,48.57 274.28,49.67 275.01,49.62C275.08,49.62 275.16,49.61 275.23,49.58C275.23,49.58 275.57,49.38 275.39,49.46C275.67,49.33 275.71,48.91 275.4,48.77Z"
android:fillColor="#ffffff"/>
<clip-path android:pathData="M0,0h328v78h-328z"/>
<path android:fillColor="#010101" android:pathData="M0,0h328v78h-328z"/>
<path android:pathData="M0,0h328v78h-328z">
<aapt:attr name="android:fillColor">
<gradient android:endX="40.3" android:endY="159.38" android:startX="0" android:startY="0" android:type="linear">
<item android:color="#FF0099FF" android:offset="0"/>
<item android:color="#00000000" android:offset="0.45"/>
<item android:color="#00000000" android:offset="0.6"/>
<item android:color="#FF0099FF" android:offset="1"/>
</gradient>
</aapt:attr>
</path>
<group>
<clip-path android:pathData="M255.81,48.61h38.44v17.39h-38.44z"/>
<path android:pathData="M294.04,55.66C294.04,52.02 285.53,49.07 275.03,49.07C264.54,49.07 256.03,52.02 256.03,55.66V59.19C256.03,62.83 264.54,65.78 275.03,65.78C285.53,65.78 294.04,62.83 294.04,59.19V55.66Z">
<aapt:attr name="android:fillColor">
<gradient android:endX="294.04" android:endY="57.42" android:startX="255.89" android:startY="57.42" android:type="linear">
<item android:color="#FF8F929E" android:offset="0"/>
<item android:color="#FF6A6D7A" android:offset="0.26"/>
<item android:color="#FF5E616D" android:offset="0.5"/>
<item android:color="#FF80828F" android:offset="0.74"/>
<item android:color="#FF9295A1" android:offset="1"/>
</gradient>
</aapt:attr>
</path>
<path android:fillColor="#727481" android:pathData="M275.03,66C264.26,66 255.81,63.01 255.81,59.19V55.66C255.81,51.84 264.26,48.85 275.03,48.85C285.81,48.85 294.25,51.84 294.25,55.66V59.19C294.25,63.01 285.81,66 275.03,66ZM275.03,49.29C264.67,49.29 256.25,52.15 256.25,55.66V59.19C256.25,62.7 264.67,65.56 275.03,65.56C285.39,65.56 293.82,62.7 293.82,59.19V55.66C293.82,52.15 285.39,49.29 275.03,49.29V49.29Z"/>
<path android:pathData="M275.03,62.25C285.53,62.25 294.04,59.3 294.04,55.66C294.04,52.02 285.53,49.07 275.03,49.07C264.54,49.07 256.03,52.02 256.03,55.66C256.03,59.3 264.54,62.25 275.03,62.25Z">
<aapt:attr name="android:fillColor">
<gradient android:endX="275.63" android:endY="58.7" android:startX="273.96" android:startY="49.68" android:type="linear">
<item android:color="#FFE1E3F0" android:offset="0"/>
<item android:color="#FFA8AAB7" android:offset="1"/>
</gradient>
</aapt:attr>
</path>
<path android:fillColor="#F3F6FF" android:pathData="M275.03,62.48C264.26,62.48 255.81,59.49 255.81,55.66C255.81,51.84 264.26,48.85 275.03,48.85C285.81,48.85 294.25,51.84 294.25,55.66C294.25,59.48 285.81,62.47 275.03,62.47V62.48ZM275.03,49.29C264.67,49.29 256.25,52.15 256.25,55.66C256.25,59.17 264.67,62.03 275.03,62.03C285.39,62.03 293.82,59.18 293.82,55.66C293.82,52.15 285.39,49.29 275.03,49.29Z"/>
<path android:pathData="M293.95,55.02C293.01,51.68 284.9,49.07 275.03,49.07C265.17,49.07 257.06,51.68 256.12,55.02H293.95Z">
<aapt:attr name="android:fillColor">
<gradient android:endX="276.67" android:endY="60.45" android:startX="271.42" android:startY="41.66" android:type="linear">
<item android:color="#FFFFFFFF" android:offset="0.2"/>
<item android:color="#FFFFFFFF" android:offset="1"/>
</gradient>
</aapt:attr>
</path>
<path android:fillColor="#8D909C" android:pathData="M275.03,49.95C266.17,49.95 258.99,52.48 258.99,55.59C258.99,56.77 260.02,57.86 261.77,58.76C260.47,57.98 259.72,57.07 259.72,56.11C259.72,53.17 266.58,50.79 275.03,50.79C283.49,50.79 290.35,53.17 290.35,56.11C290.35,57.08 289.6,57.98 288.29,58.76C290.04,57.86 291.07,56.77 291.07,55.59C291.07,52.48 283.89,49.96 275.03,49.96V49.95Z"/>
<path android:fillColor="#D4D6E3" android:pathData="M259.1,55.66C259.1,55.66 259.1,55.81 259.15,56.06C259.21,56.32 259.35,56.69 259.66,57.07C260.27,57.84 261.48,58.59 263.04,59.18C264.58,59.79 266.49,60.23 268.54,60.54C270.59,60.86 272.81,61.01 275.03,61C277.25,61 279.46,60.85 281.52,60.54C283.58,60.23 285.48,59.79 287.03,59.18C288.58,58.59 289.79,57.84 290.4,57.07C290.71,56.69 290.85,56.32 290.91,56.06C290.95,55.94 290.95,55.84 290.95,55.76C290.96,55.69 290.96,55.66 290.96,55.66C290.96,55.66 290.96,55.7 290.96,55.76C290.95,55.84 290.96,55.94 290.92,56.06C290.88,56.32 290.75,56.7 290.45,57.1C289.86,57.91 288.67,58.75 287.1,59.38C285.54,60.02 283.64,60.53 281.57,60.86C279.5,61.19 277.27,61.37 275.03,61.37C272.8,61.37 270.56,61.19 268.49,60.86C266.42,60.53 264.51,60.02 262.96,59.38C261.4,58.75 260.21,57.91 259.61,57.1C259.32,56.71 259.18,56.32 259.14,56.06C259.11,55.93 259.11,55.83 259.11,55.76C259.11,55.69 259.1,55.66 259.1,55.66Z"/>
<path android:fillColor="#ffffff" android:pathData="M275.4,48.77C275.3,48.67 275.18,48.62 275.03,48.62C274.3,48.57 274.28,49.67 275.01,49.62C275.08,49.62 275.16,49.61 275.23,49.58C275.23,49.58 275.57,49.38 275.39,49.46C275.67,49.33 275.71,48.91 275.4,48.77Z"/>
</group>
<group>
<clip-path android:pathData="M254.9,44.03h38.44v17.39h-38.44z"/>
<path android:pathData="M293.12,51.09C293.12,47.45 284.61,44.49 274.12,44.49C263.63,44.49 255.12,47.45 255.12,51.09V54.61C255.12,58.25 263.63,61.2 274.12,61.2C284.61,61.2 293.12,58.25 293.12,54.61V51.09Z">
<aapt:attr name="android:fillColor">
<gradient android:endX="293.13" android:endY="52.85" android:startX="254.97" android:startY="52.85" android:type="linear">
<item android:color="#FF8F929E" android:offset="0"/>
<item android:color="#FF6A6D7A" android:offset="0.26"/>
<item android:color="#FF5E616D" android:offset="0.5"/>
<item android:color="#FF80828F" android:offset="0.74"/>
<item android:color="#FF9295A1" android:offset="1"/>
</gradient>
</aapt:attr>
</path>
<path android:fillColor="#727481" android:pathData="M274.12,61.42C263.34,61.42 254.9,58.43 254.9,54.61V51.09C254.9,47.27 263.34,44.27 274.12,44.27C284.89,44.27 293.34,47.27 293.34,51.09V54.61C293.34,58.43 284.89,61.42 274.12,61.42ZM274.12,44.72C263.76,44.72 255.33,47.58 255.33,51.09V54.61C255.33,58.13 263.76,60.98 274.12,60.98C284.48,60.98 292.91,58.13 292.91,54.61V51.09C292.91,47.57 284.48,44.71 274.12,44.71V44.72Z"/>
<path android:pathData="M274.12,57.68C284.61,57.68 293.12,54.72 293.12,51.09C293.12,47.45 284.61,44.49 274.12,44.49C263.62,44.49 255.12,47.45 255.12,51.09C255.12,54.72 263.62,57.68 274.12,57.68Z">
<aapt:attr name="android:fillColor">
<gradient android:endX="274.72" android:endY="54.12" android:startX="273.04" android:startY="45.1" android:type="linear">
<item android:color="#FFE1E3F0" android:offset="0"/>
<item android:color="#FFA8AAB7" android:offset="1"/>
</gradient>
</aapt:attr>
</path>
<path android:fillColor="#F3F6FF" android:pathData="M274.12,57.9C263.34,57.9 254.9,54.91 254.9,51.09C254.9,47.26 263.34,44.27 274.12,44.27C284.89,44.27 293.34,47.27 293.34,51.09C293.34,54.9 284.89,57.9 274.12,57.9V57.9ZM274.12,44.72C263.76,44.72 255.33,47.58 255.33,51.09C255.33,54.59 263.76,57.46 274.12,57.46C284.48,57.46 292.91,54.6 292.91,51.09C292.91,47.57 284.48,44.72 274.12,44.72Z"/>
<path android:pathData="M293.03,50.45C292.1,47.1 283.99,44.49 274.12,44.49C264.25,44.49 256.14,47.1 255.21,50.45H293.03Z">
<aapt:attr name="android:fillColor">
<gradient android:endX="275.75" android:endY="55.87" android:startX="270.5" android:startY="37.09" android:type="linear">
<item android:color="#FFFFFFFF" android:offset="0.2"/>
<item android:color="#FFFFFFFF" android:offset="1"/>
</gradient>
</aapt:attr>
</path>
<path android:fillColor="#8D909C" android:pathData="M274.12,45.37C265.26,45.37 258.08,47.9 258.08,51.01C258.08,52.19 259.1,53.28 260.86,54.19C259.55,53.41 258.8,52.5 258.8,51.53C258.8,48.6 265.66,46.21 274.12,46.21C282.57,46.21 289.43,48.6 289.43,51.53C289.43,52.5 288.68,53.41 287.37,54.19C289.13,53.28 290.16,52.19 290.16,51.01C290.16,47.9 282.98,45.38 274.12,45.38V45.37Z"/>
<path android:fillColor="#D4D6E3" android:pathData="M258.19,51.09C258.19,51.09 258.19,51.23 258.24,51.49C258.29,51.74 258.44,52.11 258.75,52.49C259.36,53.27 260.57,54.01 262.12,54.61C263.67,55.21 265.57,55.66 267.62,55.97C269.68,56.28 271.9,56.43 274.11,56.42C276.33,56.43 278.55,56.28 280.61,55.97C282.66,55.65 284.56,55.21 286.11,54.61C287.66,54.01 288.88,53.27 289.48,52.49C289.8,52.11 289.94,51.74 289.99,51.49C290.03,51.36 290.03,51.26 290.04,51.19C290.04,51.12 290.05,51.09 290.05,51.09C290.05,51.09 290.05,51.12 290.04,51.19C290.04,51.26 290.04,51.36 290.01,51.49C289.97,51.75 289.83,52.13 289.53,52.53C288.94,53.34 287.75,54.17 286.19,54.8C284.63,55.44 282.73,55.96 280.66,56.29C278.59,56.62 276.35,56.79 274.12,56.8C271.88,56.79 269.65,56.62 267.58,56.29C265.5,55.96 263.6,55.44 262.05,54.8C260.49,54.17 259.29,53.34 258.7,52.53C258.4,52.13 258.27,51.75 258.22,51.49C258.19,51.36 258.2,51.25 258.19,51.19C258.19,51.12 258.19,51.09 258.19,51.09Z"/>
<path android:fillColor="#ffffff" android:pathData="M274.49,44.2C274.39,44.09 274.27,44.04 274.11,44.04C273.38,43.99 273.37,45.09 274.09,45.04C274.17,45.04 274.24,45.03 274.32,45C274.32,45 274.65,44.8 274.47,44.89C274.75,44.76 274.79,44.33 274.49,44.2Z"/>
</group>
<group>
<clip-path android:pathData="M255.81,39.46h38.44v18.31h-38.44z"/>
<path android:pathData="M294.04,46.88C294.04,43.05 285.53,39.94 275.03,39.94C264.54,39.94 256.03,43.05 256.03,46.88V50.59C256.03,54.42 264.54,57.53 275.03,57.53C285.53,57.53 294.04,54.42 294.04,50.59V46.88Z">
<aapt:attr name="android:fillColor">
<gradient android:endX="294.04" android:endY="48.74" android:startX="255.89" android:startY="48.74" android:type="linear">
<item android:color="#FF8F929E" android:offset="0"/>
<item android:color="#FF6A6D7A" android:offset="0.26"/>
<item android:color="#FF5E616D" android:offset="0.5"/>
<item android:color="#FF80828F" android:offset="0.74"/>
<item android:color="#FF9295A1" android:offset="1"/>
</gradient>
</aapt:attr>
</path>
<path android:fillColor="#727481" android:pathData="M275.03,57.76C264.26,57.76 255.81,54.62 255.81,50.59V46.88C255.81,42.86 264.26,39.71 275.03,39.71C285.81,39.71 294.25,42.86 294.25,46.88V50.59C294.25,54.61 285.81,57.76 275.03,57.76ZM275.03,40.18C264.67,40.18 256.25,43.19 256.25,46.88V50.59C256.25,54.29 264.67,57.3 275.03,57.3C285.39,57.3 293.82,54.29 293.82,50.59V46.88C293.82,43.18 285.39,40.17 275.03,40.17V40.18Z"/>
<path android:pathData="M275.03,53.82C285.53,53.82 294.04,50.71 294.04,46.88C294.04,43.05 285.53,39.94 275.03,39.94C264.54,39.94 256.03,43.05 256.03,46.88C256.03,50.71 264.54,53.82 275.03,53.82Z">
<aapt:attr name="android:fillColor">
<gradient android:endX="275.81" android:endY="50.04" android:startX="273.96" android:startY="40.58" android:type="linear">
<item android:color="#FFE1E3F0" android:offset="0"/>
<item android:color="#FFA8AAB7" android:offset="1"/>
</gradient>
</aapt:attr>
</path>
<path android:fillColor="#F3F6FF" android:pathData="M275.03,54.06C264.26,54.06 255.81,50.91 255.81,46.88C255.81,42.86 264.26,39.71 275.03,39.71C285.81,39.71 294.25,42.86 294.25,46.88C294.25,50.9 285.81,54.05 275.03,54.05V54.06ZM275.03,40.18C264.67,40.18 256.25,43.19 256.25,46.88C256.25,50.57 264.67,53.59 275.03,53.59C285.39,53.59 293.82,50.58 293.82,46.88C293.82,43.18 285.39,40.18 275.03,40.18Z"/>
<path android:pathData="M293.95,46.21C293.01,42.69 284.9,39.94 275.03,39.94C265.17,39.94 257.06,42.69 256.12,46.21H293.95Z">
<aapt:attr name="android:fillColor">
<gradient android:endX="277.19" android:endY="51.77" android:startX="271.42" android:startY="32.14" android:type="linear">
<item android:color="#FFFFFFFF" android:offset="0.2"/>
<item android:color="#FFFFFFFF" android:offset="1"/>
</gradient>
</aapt:attr>
</path>
<path android:fillColor="#8D909C" android:pathData="M275.03,40.87C266.17,40.87 258.99,43.53 258.99,46.81C258.99,48.05 260.02,49.19 261.77,50.15C260.47,49.32 259.72,48.36 259.72,47.35C259.72,44.26 266.58,41.75 275.03,41.75C283.49,41.75 290.35,44.26 290.35,47.35C290.35,48.37 289.6,49.32 288.29,50.15C290.04,49.19 291.07,48.05 291.07,46.81C291.07,43.53 283.89,40.87 275.03,40.87V40.87Z"/>
<path android:fillColor="#D4D6E3" android:pathData="M259.1,46.88C259.1,46.88 259.1,47.03 259.15,47.3C259.21,47.57 259.35,47.96 259.66,48.36C260.27,49.18 261.48,49.96 263.04,50.59C264.58,51.23 266.49,51.69 268.54,52.02C270.59,52.35 272.81,52.51 275.03,52.5C277.25,52.5 279.46,52.34 281.52,52.02C283.58,51.69 285.48,51.23 287.03,50.59C288.58,49.96 289.79,49.18 290.4,48.36C290.71,47.96 290.85,47.57 290.91,47.3C290.95,47.17 290.95,47.06 290.95,46.99C290.96,46.91 290.96,46.88 290.96,46.88C290.96,46.88 290.96,46.92 290.96,46.99C290.95,47.06 290.96,47.17 290.92,47.3C290.88,47.58 290.75,47.98 290.45,48.4C289.86,49.25 288.67,50.13 287.1,50.79C285.54,51.47 283.64,52.01 281.57,52.36C279.5,52.7 277.27,52.89 275.03,52.89C272.8,52.89 270.56,52.7 268.49,52.36C266.42,52.01 264.51,51.47 262.96,50.79C261.4,50.13 260.21,49.25 259.61,48.4C259.32,47.98 259.18,47.58 259.14,47.3C259.11,47.17 259.11,47.06 259.11,46.99C259.11,46.91 259.1,46.88 259.1,46.88Z"/>
</group>
<group>
<clip-path android:pathData="M248.49,25.73h37.53v22.88h-37.53z"/>
<path android:fillAlpha="0.5" android:pathData="M284.27,28.12C282.88,24.76 273.83,25.37 264.06,29.47C254.29,33.57 247.5,39.62 248.89,42.97C249.12,43.53 250,45.66 250.24,46.22C251.63,49.58 260.67,48.97 270.45,44.87C280.22,40.77 287.01,34.72 285.62,31.37C285.39,30.81 284.5,28.68 284.27,28.12Z" android:strokeAlpha="0.5">
<aapt:attr name="android:fillColor">
<gradient android:endX="281.28" android:endY="31.45" android:startX="251.72" android:startY="43.7" android:type="linear">
<item android:color="#FF8F929E" android:offset="0"/>
<item android:color="#FF767885" android:offset="0.26"/>
<item android:color="#FF6C6F7C" android:offset="0.5"/>
<item android:color="#FF767986" android:offset="0.76"/>
<item android:color="#FF858794" android:offset="0.77"/>
<item android:color="#FF9295A1" android:offset="1"/>
</gradient>
</aapt:attr>
</path>
<path android:fillAlpha="0.5" android:fillColor="#727481" android:pathData="M255.83,48.61C252.66,48.61 250.67,47.81 250.04,46.3L248.69,43.06C247.98,41.34 249.21,38.95 252.15,36.33C255.03,33.76 259.23,31.26 263.98,29.26C269.33,27.02 274.69,25.73 278.68,25.73C281.85,25.73 283.85,26.53 284.48,28.04L285.82,31.29C286.53,33.01 285.31,35.39 282.37,38.01C279.48,40.58 275.28,43.09 270.53,45.08C265.18,47.33 259.82,48.62 255.83,48.62V48.61ZM278.68,26.17C274.75,26.17 269.45,27.45 264.15,29.67C259.44,31.64 255.29,34.13 252.44,36.66C249.69,39.11 248.47,41.38 249.1,42.88L250.44,46.13C250.99,47.45 252.9,48.17 255.83,48.17C259.77,48.17 265.06,46.9 270.37,44.67C275.07,42.7 279.23,40.21 282.08,37.68C284.83,35.23 286.04,32.96 285.42,31.45L284.07,28.2C283.53,26.89 281.62,26.16 278.68,26.16V26.17Z" android:strokeAlpha="0.5"/>
<path android:fillAlpha="0.5" android:pathData="M248.89,42.97C250.28,46.33 259.33,45.72 269.1,41.62C278.87,37.52 285.66,31.47 284.27,28.12C282.88,24.76 273.83,25.37 264.06,29.47C254.29,33.57 247.5,39.62 248.89,42.97Z" android:strokeAlpha="0.5">
<aapt:attr name="android:fillColor">
<gradient android:endX="263.22" android:endY="27.6" android:startX="268.95" android:startY="41.25" android:type="linear">
<item android:color="#FFE1E3F0" android:offset="0"/>
<item android:color="#FFA8AAB7" android:offset="1"/>
</gradient>
</aapt:attr>
</path>
<path android:fillAlpha="0.5" android:fillColor="#F3F6FF" android:pathData="M254.48,45.36C251.31,45.36 249.32,44.56 248.68,43.05C247.97,41.33 249.2,38.94 252.14,36.33C255.02,33.76 259.23,31.25 263.98,29.26C269.33,27.02 274.69,25.73 278.68,25.73C281.85,25.73 283.85,26.53 284.48,28.04C285.19,29.75 283.96,32.14 281.02,34.76C278.14,37.33 273.93,39.84 269.19,41.83C263.83,44.08 258.47,45.36 254.48,45.36L254.48,45.36ZM278.68,26.17C274.75,26.17 269.45,27.45 264.15,29.67C259.44,31.64 255.29,34.13 252.44,36.66C249.69,39.11 248.47,41.38 249.09,42.88C249.64,44.19 251.55,44.92 254.48,44.92C258.42,44.92 263.72,43.65 269.02,41.42C273.73,39.45 277.88,36.96 280.73,34.42C283.48,31.98 284.7,29.71 284.07,28.2C283.53,26.89 281.62,26.16 278.68,26.16V26.17Z" android:strokeAlpha="0.5"/>
<path android:fillAlpha="0.5" android:pathData="M258.69,44.75C261.81,44.23 265.4,43.18 269.1,41.63C278.76,37.57 285.5,31.62 284.31,28.24C264.01,31.71 254,36.96 258.69,44.75Z" android:strokeAlpha="0.5">
<aapt:attr name="android:fillColor">
<gradient android:endX="268.53" android:endY="29.66" android:startX="274.55" android:startY="43.99" android:type="linear">
<item android:color="#FFFFFFFF" android:offset="0.2"/>
<item android:color="#FFFFFFFF" android:offset="1"/>
</gradient>
</aapt:attr>
</path>
<path android:fillAlpha="0.5" android:fillColor="#8D909C" android:pathData="M264.4,30.28C256.15,33.74 250.43,38.87 251.62,41.75C252.07,42.83 253.45,43.44 255.42,43.58C253.91,43.37 252.86,42.83 252.49,41.93C251.37,39.23 256.85,34.35 264.72,31.05C272.6,27.74 279.89,27.26 281.01,29.97C281.38,30.86 281.02,31.99 280.11,33.22C281.39,31.7 281.94,30.29 281.48,29.21C280.29,26.34 272.64,26.82 264.4,30.27L264.4,30.28Z" android:strokeAlpha="0.5"/>
</group>
<group>
<clip-path android:pathData="M243,12h30.2v32.95h-30.2z"/>
<path android:fillAlpha="0.25" android:pathData="M269.73,12.97C267.2,10.4 259.39,14.69 252.29,22.57C245.19,30.45 241.49,38.91 244.01,41.49C244.44,41.92 246.04,43.55 246.46,43.98C249,46.55 256.81,42.25 263.91,34.38C271.02,26.51 274.72,18.04 272.18,15.47C271.76,15.03 270.16,13.4 269.73,12.98V12.97Z" android:strokeAlpha="0.25">
<aapt:attr name="android:fillColor">
<gradient android:endX="269.6" android:endY="18.59" android:startX="246.82" android:startY="41.01" android:type="linear">
<item android:color="#FFA6A8B5" android:offset="0"/>
<item android:color="#FFD2D5E2" android:offset="0.16"/>
<item android:color="#FFDEE1ED" android:offset="0.17"/>
<item android:color="#FFFFFFFF" android:offset="0.48"/>
<item android:color="#FFD6D9E6" android:offset="0.8"/>
<item android:color="#FFA3A6B3" android:offset="1"/>
</gradient>
</aapt:attr>
</path>
<path android:fillAlpha="0.25" android:fillColor="#9EA0AD" android:pathData="M248.53,44.95C247.59,44.95 246.85,44.68 246.32,44.14L243.87,41.65C241.21,38.95 244.85,30.5 252.14,22.41C257.76,16.19 264,12 267.68,12C268.61,12 269.35,12.27 269.88,12.81L272.33,15.3C274.99,18 271.36,26.45 264.06,34.54C258.44,40.76 252.2,44.95 248.52,44.95H248.53ZM267.68,12.45C264.11,12.45 257.99,16.58 252.45,22.72C245.43,30.5 241.72,38.84 244.16,41.32L246.61,43.81C247.05,44.27 247.7,44.49 248.52,44.49C252.09,44.49 258.21,40.36 263.75,34.22C270.76,26.45 274.48,18.1 272.03,15.62L269.58,13.13C269.14,12.68 268.49,12.45 267.67,12.45H267.68Z" android:strokeAlpha="0.25"/>
<path android:fillAlpha="0.25" android:pathData="M244.01,41.49C246.55,44.06 254.36,39.77 261.46,31.89C268.57,24.01 272.27,15.54 269.73,12.97C267.2,10.4 259.39,14.69 252.29,22.57C245.19,30.45 241.49,38.91 244.01,41.49Z" android:strokeAlpha="0.25">
<aapt:attr name="android:fillColor">
<gradient android:endX="259.77" android:endY="29.49" android:startX="253.84" android:startY="24.14" android:type="linear">
<item android:color="#FF8A8C99" android:offset="0"/>
<item android:color="#FFA8AAB7" android:offset="1"/>
</gradient>
</aapt:attr>
</path>
<path android:fillAlpha="0.25" android:fillColor="#F3F6FF" android:pathData="M246.08,42.46C245.14,42.46 244.4,42.19 243.87,41.65C241.21,38.95 244.85,30.5 252.14,22.41C257.76,16.19 264,12 267.68,12C268.61,12 269.35,12.27 269.88,12.81C271.18,14.12 271.01,16.87 269.41,20.54C267.83,24.13 265.07,28.22 261.62,32.05C256,38.27 249.76,42.46 246.08,42.46ZM267.68,12.45C264.11,12.45 257.99,16.58 252.45,22.72C245.43,30.5 241.72,38.84 244.16,41.32C244.6,41.78 245.25,42.01 246.07,42.01C249.64,42.01 255.76,37.87 261.3,31.73C264.73,27.94 267.46,23.9 269.01,20.34C270.51,16.92 270.72,14.28 269.58,13.13C269.14,12.68 268.49,12.45 267.67,12.45H267.68Z" android:strokeAlpha="0.25"/>
<path android:fillAlpha="0.25" android:fillColor="#D7DAE6" android:pathData="M252.9,23.19C246.91,29.84 243.8,37.01 245.97,39.21C246.79,40.04 248.24,40.04 250.06,39.37C248.64,39.79 247.49,39.72 246.82,39.03C244.78,36.95 247.76,30.13 253.49,23.78C259.21,17.44 265.51,13.97 267.55,16.05C268.22,16.73 268.35,17.94 268,19.47C268.56,17.52 268.5,15.98 267.68,15.14C265.51,12.94 258.9,16.55 252.9,23.19H252.9Z" android:strokeAlpha="0.25"/>
</group>
</group>
<group>
<clip-path
android:pathData="M254.9,44.03h38.44v17.39h-38.44z"/>
<path
android:pathData="M293.12,51.09C293.12,47.45 284.61,44.49 274.12,44.49C263.63,44.49 255.12,47.45 255.12,51.09V54.61C255.12,58.25 263.63,61.2 274.12,61.2C284.61,61.2 293.12,58.25 293.12,54.61V51.09Z">
<aapt:attr name="android:fillColor">
<gradient
android:startX="254.97"
android:startY="52.85"
android:endX="293.13"
android:endY="52.85"
android:type="linear">
<item android:offset="0" android:color="#FF8F929E"/>
<item android:offset="0.26" android:color="#FF6A6D7A"/>
<item android:offset="0.5" android:color="#FF5E616D"/>
<item android:offset="0.74" android:color="#FF80828F"/>
<item android:offset="1" android:color="#FF9295A1"/>
</gradient>
</aapt:attr>
</path>
<path
android:pathData="M274.12,61.42C263.34,61.42 254.9,58.43 254.9,54.61V51.09C254.9,47.27 263.34,44.27 274.12,44.27C284.89,44.27 293.34,47.27 293.34,51.09V54.61C293.34,58.43 284.89,61.42 274.12,61.42ZM274.12,44.72C263.76,44.72 255.33,47.58 255.33,51.09V54.61C255.33,58.13 263.76,60.98 274.12,60.98C284.48,60.98 292.91,58.13 292.91,54.61V51.09C292.91,47.57 284.48,44.71 274.12,44.71V44.72Z"
android:fillColor="#727481"/>
<path
android:pathData="M274.12,57.68C284.61,57.68 293.12,54.72 293.12,51.09C293.12,47.45 284.61,44.49 274.12,44.49C263.62,44.49 255.12,47.45 255.12,51.09C255.12,54.72 263.62,57.68 274.12,57.68Z">
<aapt:attr name="android:fillColor">
<gradient
android:startX="273.04"
android:startY="45.1"
android:endX="274.72"
android:endY="54.12"
android:type="linear">
<item android:offset="0" android:color="#FFE1E3F0"/>
<item android:offset="1" android:color="#FFA8AAB7"/>
</gradient>
</aapt:attr>
</path>
<path
android:pathData="M274.12,57.9C263.34,57.9 254.9,54.91 254.9,51.09C254.9,47.26 263.34,44.27 274.12,44.27C284.89,44.27 293.34,47.27 293.34,51.09C293.34,54.9 284.89,57.9 274.12,57.9V57.9ZM274.12,44.72C263.76,44.72 255.33,47.58 255.33,51.09C255.33,54.59 263.76,57.46 274.12,57.46C284.48,57.46 292.91,54.6 292.91,51.09C292.91,47.57 284.48,44.72 274.12,44.72Z"
android:fillColor="#F3F6FF"/>
<path
android:pathData="M293.03,50.45C292.1,47.1 283.99,44.49 274.12,44.49C264.25,44.49 256.14,47.1 255.21,50.45H293.03Z">
<aapt:attr name="android:fillColor">
<gradient
android:startX="270.5"
android:startY="37.09"
android:endX="275.75"
android:endY="55.87"
android:type="linear">
<item android:offset="0.2" android:color="#FFFFFFFF"/>
<item android:offset="1" android:color="#FFFFFFFF"/>
</gradient>
</aapt:attr>
</path>
<path
android:pathData="M274.12,45.37C265.26,45.37 258.08,47.9 258.08,51.01C258.08,52.19 259.1,53.28 260.86,54.19C259.55,53.41 258.8,52.5 258.8,51.53C258.8,48.6 265.66,46.21 274.12,46.21C282.57,46.21 289.43,48.6 289.43,51.53C289.43,52.5 288.68,53.41 287.37,54.19C289.13,53.28 290.16,52.19 290.16,51.01C290.16,47.9 282.98,45.38 274.12,45.38V45.37Z"
android:fillColor="#8D909C"/>
<path
android:pathData="M258.19,51.09C258.19,51.09 258.19,51.23 258.24,51.49C258.29,51.74 258.44,52.11 258.75,52.49C259.36,53.27 260.57,54.01 262.12,54.61C263.67,55.21 265.57,55.66 267.62,55.97C269.68,56.28 271.9,56.43 274.11,56.42C276.33,56.43 278.55,56.28 280.61,55.97C282.66,55.65 284.56,55.21 286.11,54.61C287.66,54.01 288.88,53.27 289.48,52.49C289.8,52.11 289.94,51.74 289.99,51.49C290.03,51.36 290.03,51.26 290.04,51.19C290.04,51.12 290.05,51.09 290.05,51.09C290.05,51.09 290.05,51.12 290.04,51.19C290.04,51.26 290.04,51.36 290.01,51.49C289.97,51.75 289.83,52.13 289.53,52.53C288.94,53.34 287.75,54.17 286.19,54.8C284.63,55.44 282.73,55.96 280.66,56.29C278.59,56.62 276.35,56.79 274.12,56.8C271.88,56.79 269.65,56.62 267.58,56.29C265.5,55.96 263.6,55.44 262.05,54.8C260.49,54.17 259.29,53.34 258.7,52.53C258.4,52.13 258.27,51.75 258.22,51.49C258.19,51.36 258.2,51.25 258.19,51.19C258.19,51.12 258.19,51.09 258.19,51.09Z"
android:fillColor="#D4D6E3"/>
<path
android:pathData="M274.49,44.2C274.39,44.09 274.27,44.04 274.11,44.04C273.38,43.99 273.37,45.09 274.09,45.04C274.17,45.04 274.24,45.03 274.32,45C274.32,45 274.65,44.8 274.47,44.89C274.75,44.76 274.79,44.33 274.49,44.2Z"
android:fillColor="#ffffff"/>
</group>
<group>
<clip-path
android:pathData="M255.81,39.46h38.44v18.31h-38.44z"/>
<path
android:pathData="M294.04,46.88C294.04,43.05 285.53,39.94 275.03,39.94C264.54,39.94 256.03,43.05 256.03,46.88V50.59C256.03,54.42 264.54,57.53 275.03,57.53C285.53,57.53 294.04,54.42 294.04,50.59V46.88Z">
<aapt:attr name="android:fillColor">
<gradient
android:startX="255.89"
android:startY="48.74"
android:endX="294.04"
android:endY="48.74"
android:type="linear">
<item android:offset="0" android:color="#FF8F929E"/>
<item android:offset="0.26" android:color="#FF6A6D7A"/>
<item android:offset="0.5" android:color="#FF5E616D"/>
<item android:offset="0.74" android:color="#FF80828F"/>
<item android:offset="1" android:color="#FF9295A1"/>
</gradient>
</aapt:attr>
</path>
<path
android:pathData="M275.03,57.76C264.26,57.76 255.81,54.62 255.81,50.59V46.88C255.81,42.86 264.26,39.71 275.03,39.71C285.81,39.71 294.25,42.86 294.25,46.88V50.59C294.25,54.61 285.81,57.76 275.03,57.76ZM275.03,40.18C264.67,40.18 256.25,43.19 256.25,46.88V50.59C256.25,54.29 264.67,57.3 275.03,57.3C285.39,57.3 293.82,54.29 293.82,50.59V46.88C293.82,43.18 285.39,40.17 275.03,40.17V40.18Z"
android:fillColor="#727481"/>
<path
android:pathData="M275.03,53.82C285.53,53.82 294.04,50.71 294.04,46.88C294.04,43.05 285.53,39.94 275.03,39.94C264.54,39.94 256.03,43.05 256.03,46.88C256.03,50.71 264.54,53.82 275.03,53.82Z">
<aapt:attr name="android:fillColor">
<gradient
android:startX="273.96"
android:startY="40.58"
android:endX="275.81"
android:endY="50.04"
android:type="linear">
<item android:offset="0" android:color="#FFE1E3F0"/>
<item android:offset="1" android:color="#FFA8AAB7"/>
</gradient>
</aapt:attr>
</path>
<path
android:pathData="M275.03,54.06C264.26,54.06 255.81,50.91 255.81,46.88C255.81,42.86 264.26,39.71 275.03,39.71C285.81,39.71 294.25,42.86 294.25,46.88C294.25,50.9 285.81,54.05 275.03,54.05V54.06ZM275.03,40.18C264.67,40.18 256.25,43.19 256.25,46.88C256.25,50.57 264.67,53.59 275.03,53.59C285.39,53.59 293.82,50.58 293.82,46.88C293.82,43.18 285.39,40.18 275.03,40.18Z"
android:fillColor="#F3F6FF"/>
<path
android:pathData="M293.95,46.21C293.01,42.69 284.9,39.94 275.03,39.94C265.17,39.94 257.06,42.69 256.12,46.21H293.95Z">
<aapt:attr name="android:fillColor">
<gradient
android:startX="271.42"
android:startY="32.14"
android:endX="277.19"
android:endY="51.77"
android:type="linear">
<item android:offset="0.2" android:color="#FFFFFFFF"/>
<item android:offset="1" android:color="#FFFFFFFF"/>
</gradient>
</aapt:attr>
</path>
<path
android:pathData="M275.03,40.87C266.17,40.87 258.99,43.53 258.99,46.81C258.99,48.05 260.02,49.19 261.77,50.15C260.47,49.32 259.72,48.36 259.72,47.35C259.72,44.26 266.58,41.75 275.03,41.75C283.49,41.75 290.35,44.26 290.35,47.35C290.35,48.37 289.6,49.32 288.29,50.15C290.04,49.19 291.07,48.05 291.07,46.81C291.07,43.53 283.89,40.87 275.03,40.87V40.87Z"
android:fillColor="#8D909C"/>
<path
android:pathData="M259.1,46.88C259.1,46.88 259.1,47.03 259.15,47.3C259.21,47.57 259.35,47.96 259.66,48.36C260.27,49.18 261.48,49.96 263.04,50.59C264.58,51.23 266.49,51.69 268.54,52.02C270.59,52.35 272.81,52.51 275.03,52.5C277.25,52.5 279.46,52.34 281.52,52.02C283.58,51.69 285.48,51.23 287.03,50.59C288.58,49.96 289.79,49.18 290.4,48.36C290.71,47.96 290.85,47.57 290.91,47.3C290.95,47.17 290.95,47.06 290.95,46.99C290.96,46.91 290.96,46.88 290.96,46.88C290.96,46.88 290.96,46.92 290.96,46.99C290.95,47.06 290.96,47.17 290.92,47.3C290.88,47.58 290.75,47.98 290.45,48.4C289.86,49.25 288.67,50.13 287.1,50.79C285.54,51.47 283.64,52.01 281.57,52.36C279.5,52.7 277.27,52.89 275.03,52.89C272.8,52.89 270.56,52.7 268.49,52.36C266.42,52.01 264.51,51.47 262.96,50.79C261.4,50.13 260.21,49.25 259.61,48.4C259.32,47.98 259.18,47.58 259.14,47.3C259.11,47.17 259.11,47.06 259.11,46.99C259.11,46.91 259.1,46.88 259.1,46.88Z"
android:fillColor="#D4D6E3"/>
</group>
<group>
<clip-path
android:pathData="M248.49,25.73h37.53v22.88h-37.53z"/>
<path
android:pathData="M284.27,28.12C282.88,24.76 273.83,25.37 264.06,29.47C254.29,33.57 247.5,39.62 248.89,42.97C249.12,43.53 250,45.66 250.24,46.22C251.63,49.58 260.67,48.97 270.45,44.87C280.22,40.77 287.01,34.72 285.62,31.37C285.39,30.81 284.5,28.68 284.27,28.12Z"
android:strokeAlpha="0.5"
android:fillAlpha="0.5">
<aapt:attr name="android:fillColor">
<gradient
android:startX="251.72"
android:startY="43.7"
android:endX="281.28"
android:endY="31.45"
android:type="linear">
<item android:offset="0" android:color="#FF8F929E"/>
<item android:offset="0.26" android:color="#FF767885"/>
<item android:offset="0.5" android:color="#FF6C6F7C"/>
<item android:offset="0.76" android:color="#FF767986"/>
<item android:offset="0.77" android:color="#FF858794"/>
<item android:offset="1" android:color="#FF9295A1"/>
</gradient>
</aapt:attr>
</path>
<path
android:pathData="M255.83,48.61C252.66,48.61 250.67,47.81 250.04,46.3L248.69,43.06C247.98,41.34 249.21,38.95 252.15,36.33C255.03,33.76 259.23,31.26 263.98,29.26C269.33,27.02 274.69,25.73 278.68,25.73C281.85,25.73 283.85,26.53 284.48,28.04L285.82,31.29C286.53,33.01 285.31,35.39 282.37,38.01C279.48,40.58 275.28,43.09 270.53,45.08C265.18,47.33 259.82,48.62 255.83,48.62V48.61ZM278.68,26.17C274.75,26.17 269.45,27.45 264.15,29.67C259.44,31.64 255.29,34.13 252.44,36.66C249.69,39.11 248.47,41.38 249.1,42.88L250.44,46.13C250.99,47.45 252.9,48.17 255.83,48.17C259.77,48.17 265.06,46.9 270.37,44.67C275.07,42.7 279.23,40.21 282.08,37.68C284.83,35.23 286.04,32.96 285.42,31.45L284.07,28.2C283.53,26.89 281.62,26.16 278.68,26.16V26.17Z"
android:strokeAlpha="0.5"
android:fillColor="#727481"
android:fillAlpha="0.5"/>
<path
android:pathData="M248.89,42.97C250.28,46.33 259.33,45.72 269.1,41.62C278.87,37.52 285.66,31.47 284.27,28.12C282.88,24.76 273.83,25.37 264.06,29.47C254.29,33.57 247.5,39.62 248.89,42.97Z"
android:strokeAlpha="0.5"
android:fillAlpha="0.5">
<aapt:attr name="android:fillColor">
<gradient
android:startX="268.95"
android:startY="41.25"
android:endX="263.22"
android:endY="27.6"
android:type="linear">
<item android:offset="0" android:color="#FFE1E3F0"/>
<item android:offset="1" android:color="#FFA8AAB7"/>
</gradient>
</aapt:attr>
</path>
<path
android:pathData="M254.48,45.36C251.31,45.36 249.32,44.56 248.68,43.05C247.97,41.33 249.2,38.94 252.14,36.33C255.02,33.76 259.23,31.25 263.98,29.26C269.33,27.02 274.69,25.73 278.68,25.73C281.85,25.73 283.85,26.53 284.48,28.04C285.19,29.75 283.96,32.14 281.02,34.76C278.14,37.33 273.93,39.84 269.19,41.83C263.83,44.08 258.47,45.36 254.48,45.36L254.48,45.36ZM278.68,26.17C274.75,26.17 269.45,27.45 264.15,29.67C259.44,31.64 255.29,34.13 252.44,36.66C249.69,39.11 248.47,41.38 249.09,42.88C249.64,44.19 251.55,44.92 254.48,44.92C258.42,44.92 263.72,43.65 269.02,41.42C273.73,39.45 277.88,36.96 280.73,34.42C283.48,31.98 284.7,29.71 284.07,28.2C283.53,26.89 281.62,26.16 278.68,26.16V26.17Z"
android:strokeAlpha="0.5"
android:fillColor="#F3F6FF"
android:fillAlpha="0.5"/>
<path
android:pathData="M258.69,44.75C261.81,44.23 265.4,43.18 269.1,41.63C278.76,37.57 285.5,31.62 284.31,28.24C264.01,31.71 254,36.96 258.69,44.75Z"
android:strokeAlpha="0.5"
android:fillAlpha="0.5">
<aapt:attr name="android:fillColor">
<gradient
android:startX="274.55"
android:startY="43.99"
android:endX="268.53"
android:endY="29.66"
android:type="linear">
<item android:offset="0.2" android:color="#FFFFFFFF"/>
<item android:offset="1" android:color="#FFFFFFFF"/>
</gradient>
</aapt:attr>
</path>
<path
android:pathData="M264.4,30.28C256.15,33.74 250.43,38.87 251.62,41.75C252.07,42.83 253.45,43.44 255.42,43.58C253.91,43.37 252.86,42.83 252.49,41.93C251.37,39.23 256.85,34.35 264.72,31.05C272.6,27.74 279.89,27.26 281.01,29.97C281.38,30.86 281.02,31.99 280.11,33.22C281.39,31.7 281.94,30.29 281.48,29.21C280.29,26.34 272.64,26.82 264.4,30.27L264.4,30.28Z"
android:strokeAlpha="0.5"
android:fillColor="#8D909C"
android:fillAlpha="0.5"/>
</group>
<group>
<clip-path
android:pathData="M243,12h30.2v32.95h-30.2z"/>
<path
android:pathData="M269.73,12.97C267.2,10.4 259.39,14.69 252.29,22.57C245.19,30.45 241.49,38.91 244.01,41.49C244.44,41.92 246.04,43.55 246.46,43.98C249,46.55 256.81,42.25 263.91,34.38C271.02,26.51 274.72,18.04 272.18,15.47C271.76,15.03 270.16,13.4 269.73,12.98V12.97Z"
android:strokeAlpha="0.25"
android:fillAlpha="0.25">
<aapt:attr name="android:fillColor">
<gradient
android:startX="246.82"
android:startY="41.01"
android:endX="269.6"
android:endY="18.59"
android:type="linear">
<item android:offset="0" android:color="#FFA6A8B5"/>
<item android:offset="0.16" android:color="#FFD2D5E2"/>
<item android:offset="0.17" android:color="#FFDEE1ED"/>
<item android:offset="0.48" android:color="#FFFFFFFF"/>
<item android:offset="0.8" android:color="#FFD6D9E6"/>
<item android:offset="1" android:color="#FFA3A6B3"/>
</gradient>
</aapt:attr>
</path>
<path
android:pathData="M248.53,44.95C247.59,44.95 246.85,44.68 246.32,44.14L243.87,41.65C241.21,38.95 244.85,30.5 252.14,22.41C257.76,16.19 264,12 267.68,12C268.61,12 269.35,12.27 269.88,12.81L272.33,15.3C274.99,18 271.36,26.45 264.06,34.54C258.44,40.76 252.2,44.95 248.52,44.95H248.53ZM267.68,12.45C264.11,12.45 257.99,16.58 252.45,22.72C245.43,30.5 241.72,38.84 244.16,41.32L246.61,43.81C247.05,44.27 247.7,44.49 248.52,44.49C252.09,44.49 258.21,40.36 263.75,34.22C270.76,26.45 274.48,18.1 272.03,15.62L269.58,13.13C269.14,12.68 268.49,12.45 267.67,12.45H267.68Z"
android:strokeAlpha="0.25"
android:fillColor="#9EA0AD"
android:fillAlpha="0.25"/>
<path
android:pathData="M244.01,41.49C246.55,44.06 254.36,39.77 261.46,31.89C268.57,24.01 272.27,15.54 269.73,12.97C267.2,10.4 259.39,14.69 252.29,22.57C245.19,30.45 241.49,38.91 244.01,41.49Z"
android:strokeAlpha="0.25"
android:fillAlpha="0.25">
<aapt:attr name="android:fillColor">
<gradient
android:startX="253.84"
android:startY="24.14"
android:endX="259.77"
android:endY="29.49"
android:type="linear">
<item android:offset="0" android:color="#FF8A8C99"/>
<item android:offset="1" android:color="#FFA8AAB7"/>
</gradient>
</aapt:attr>
</path>
<path
android:pathData="M246.08,42.46C245.14,42.46 244.4,42.19 243.87,41.65C241.21,38.95 244.85,30.5 252.14,22.41C257.76,16.19 264,12 267.68,12C268.61,12 269.35,12.27 269.88,12.81C271.18,14.12 271.01,16.87 269.41,20.54C267.83,24.13 265.07,28.22 261.62,32.05C256,38.27 249.76,42.46 246.08,42.46ZM267.68,12.45C264.11,12.45 257.99,16.58 252.45,22.72C245.43,30.5 241.72,38.84 244.16,41.32C244.6,41.78 245.25,42.01 246.07,42.01C249.64,42.01 255.76,37.87 261.3,31.73C264.73,27.94 267.46,23.9 269.01,20.34C270.51,16.92 270.72,14.28 269.58,13.13C269.14,12.68 268.49,12.45 267.67,12.45H267.68Z"
android:strokeAlpha="0.25"
android:fillColor="#F3F6FF"
android:fillAlpha="0.25"/>
<path
android:pathData="M252.9,23.19C246.91,29.84 243.8,37.01 245.97,39.21C246.79,40.04 248.24,40.04 250.06,39.37C248.64,39.79 247.49,39.72 246.82,39.03C244.78,36.95 247.76,30.13 253.49,23.78C259.21,17.44 265.51,13.97 267.55,16.05C268.22,16.73 268.35,17.94 268,19.47C268.56,17.52 268.5,15.98 267.68,15.14C265.51,12.94 258.9,16.55 252.9,23.19H252.9Z"
android:strokeAlpha="0.25"
android:fillColor="#D7DAE6"
android:fillAlpha="0.25"/>
</group>
</group>
</vector>

View file

@ -131,7 +131,7 @@ internal class SetButtonsStateTransformer : Transformer<StakingUiState> {
if (initialState?.yieldBalance is InnerYieldBalanceState.Data) {
resourceReference(R.string.staking_stake_more)
} else {
resourceReference(R.string.common_next)
resourceReference(R.string.common_stake)
}
}

View file

@ -9,9 +9,6 @@ import androidx.compose.foundation.verticalScroll
import androidx.compose.runtime.Composable
import androidx.compose.runtime.key
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.withStyle
import com.tangem.core.ui.components.inputrow.InputRowImageInfo
import com.tangem.core.ui.decorations.roundedShapeItemDecoration
import com.tangem.core.ui.extensions.*
@ -41,19 +38,16 @@ internal fun StakingClaimRewardsValidatorContent(
subtitle = stringReference(item.validator.name),
caption = combinedReference(
resourceReference(R.string.staking_details_apr),
annotatedReference(
buildAnnotatedString {
appendSpace()
withStyle(SpanStyle(color = TangemTheme.colors.text.accent)) {
append(
BigDecimalFormatter.formatPercent(
percent = item.validator.apr.orZero(),
useAbsoluteValue = true,
),
)
}
},
),
annotatedReference {
appendSpace()
appendColored(
text = BigDecimalFormatter.formatPercent(
percent = item.validator.apr.orZero(),
useAbsoluteValue = true,
),
color = TangemTheme.colors.text.accent,
)
},
),
infoTitle = item.fiatAmount,
infoSubtitle = item.cryptoAmount,

View file

@ -8,6 +8,7 @@ import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@ -16,7 +17,8 @@ import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.*
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
@ -109,6 +111,7 @@ internal fun StakingInitialInfoContent(state: StakingStates.InitialInfoState, cl
private fun BannerBlock(onClick: () -> Unit) {
Box(
modifier = Modifier
.clip(RoundedCornerShape(size = TangemTheme.dimens.radius14))
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = rememberRipple(),
@ -189,42 +192,26 @@ private fun ActiveStakingBlock(groups: ImmutableList<BalanceGroupedState>, onCli
.clip(TangemTheme.shapes.roundedCornersXMedium)
.background(TangemTheme.colors.background.action),
) {
group.items.forEachIndexed { index, balance ->
Text(
text = group.title.resolveReference(),
style = TangemTheme.typography.subtitle2,
color = TangemTheme.colors.text.tertiary,
modifier = Modifier.padding(
top = TangemTheme.dimens.spacing12,
start = TangemTheme.dimens.spacing12,
end = TangemTheme.dimens.spacing12,
),
)
group.items.forEach { balance ->
key(balance.validator.address) {
val caption = if (group.type == BalanceType.UNSTAKING) {
combinedReference(
resourceReference(R.string.staking_details_unbonding_period),
annotatedReference {
appendSpace()
appendColored(
text = balance.unbondingPeriod.resolveReference(),
color = TangemTheme.colors.text.accent,
)
},
)
} else {
combinedReference(
resourceReference(R.string.app_name),
annotatedReference {
appendSpace()
appendColored(
text = BigDecimalFormatter.formatPercent(
percent = balance.validator.apr.orZero(),
useAbsoluteValue = true,
),
color = TangemTheme.colors.text.accent,
)
},
)
}
InputRowImageInfo(
title = group.title.takeIf { index == 0 },
subtitle = stringReference(balance.validator.name),
caption = caption,
caption = getCaption(group.type, balance),
isGrayscaleImage = group.type == BalanceType.UNSTAKING,
infoTitle = balance.fiatAmount,
infoSubtitle = balance.cryptoAmount,
imageUrl = balance.validator.image.orEmpty(),
iconEndRes = R.drawable.ic_chevron_right_24.takeIf { group.isClickable },
modifier = Modifier.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = rememberRipple(),
@ -241,6 +228,36 @@ private fun ActiveStakingBlock(groups: ImmutableList<BalanceGroupedState>, onCli
}
}
@Composable
private fun getCaption(balanceType: BalanceType, balance: BalanceState): TextReference {
return if (balanceType == BalanceType.UNSTAKING) {
combinedReference(
resourceReference(R.string.staking_details_unbonding_period),
annotatedReference {
appendSpace()
appendColored(
text = balance.unbondingPeriod.resolveReference(),
color = TangemTheme.colors.text.accent,
)
},
)
} else {
combinedReference(
resourceReference(R.string.app_name),
annotatedReference {
appendSpace()
appendColored(
text = BigDecimalFormatter.formatPercent(
percent = balance.validator.apr.orZero(),
useAbsoluteValue = true,
),
color = TangemTheme.colors.text.accent,
)
},
)
}
}
private val textGradientColors = listOf(
TangemColorPalette.White,
Color(0xff8fb4df),

View file

@ -1,25 +1,26 @@
package com.tangem.features.staking.impl.presentation.ui
import android.content.res.Configuration
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.Icon
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.rememberVectorPainter
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import com.tangem.core.ui.components.inputrow.InputRowImageSelector
import com.tangem.core.ui.components.rows.CornersToRound
import com.tangem.core.ui.extensions.annotatedReference
import com.tangem.core.ui.extensions.combinedReference
import com.tangem.core.ui.extensions.resourceReference
import com.tangem.core.ui.extensions.stringReference
import com.tangem.core.ui.decorations.roundedShapeItemDecoration
import com.tangem.core.ui.extensions.*
import com.tangem.core.ui.res.TangemTheme
import com.tangem.core.ui.res.TangemThemePreview
import com.tangem.core.ui.utils.BigDecimalFormatter
@ -28,7 +29,7 @@ import com.tangem.features.staking.impl.presentation.state.ValidatorState
import com.tangem.features.staking.impl.presentation.state.previewdata.ConfirmationStatePreviewData
import com.tangem.features.staking.impl.presentation.state.stub.StakingClickIntentsStub
import com.tangem.features.staking.impl.presentation.viewmodel.StakingClickIntents
import java.math.BigDecimal
import com.tangem.utils.extensions.orZero
/**
* Staking screen with validators
@ -58,29 +59,40 @@ internal fun StakingValidatorListContent(
subtitle = stringReference(item.name),
caption = combinedReference(
resourceReference(R.string.staking_details_apr),
annotatedReference(
buildAnnotatedString {
append(" ")
withStyle(style = SpanStyle(color = TangemTheme.colors.text.accent)) {
append(
BigDecimalFormatter.formatPercent(item.apr ?: BigDecimal.ZERO, true),
)
}
},
),
annotatedReference {
appendSpace()
appendColored(
text = BigDecimalFormatter.formatPercent(item.apr.orZero(), true),
color = TangemTheme.colors.text.accent,
)
},
),
imageUrl = item.image.orEmpty(),
isSelected = item == state.chosenValidator,
onSelect = { clickIntents.onValidatorSelect(item) },
modifier = Modifier
.clip(
when (index) {
0 -> CornersToRound.TOP_2
validators.lastIndex -> CornersToRound.BOTTOM_2
else -> CornersToRound.ZERO
}.getShape(),
.roundedShapeItemDecoration(
currentIndex = index,
lastIndex = validators.lastIndex,
radius = TangemTheme.dimens.radius12,
addDefaultPadding =
false,
)
.background(TangemTheme.colors.background.action),
selectorContent = { checked, _, _ ->
AnimatedVisibility(
modifier = Modifier,
visible = checked,
) {
Icon(
painter = rememberVectorPainter(
image = ImageVector.vectorResource(id = R.drawable.ic_check_24),
),
tint = TangemTheme.colors.icon.accent,
contentDescription = null,
)
}
},
)
}
}

View file

@ -40,7 +40,7 @@ internal fun StakingFeeBlock(feeState: FeeState) {
Text(
text = stringResource(R.string.common_network_fee_title),
style = TangemTheme.typography.subtitle2,
color = TangemTheme.colors.text.secondary,
color = TangemTheme.colors.text.tertiary,
)
Box(

View file

@ -5,27 +5,18 @@ import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.withStyle
import com.tangem.core.ui.components.inputrow.InputRowImageChevron
import com.tangem.core.ui.extensions.annotatedReference
import com.tangem.core.ui.extensions.combinedReference
import com.tangem.core.ui.extensions.resourceReference
import com.tangem.core.ui.extensions.stringReference
import com.tangem.core.ui.components.inputrow.InputRowImageInfo
import com.tangem.core.ui.extensions.*
import com.tangem.core.ui.res.TangemTheme
import com.tangem.core.ui.utils.BigDecimalFormatter
import com.tangem.features.staking.impl.R
import com.tangem.features.staking.impl.presentation.state.ValidatorState
import java.math.BigDecimal
import com.tangem.utils.extensions.orZero
@Composable
internal fun ValidatorBlock(validatorState: ValidatorState, onClick: () -> Unit) {
@ -39,32 +30,21 @@ internal fun ValidatorBlock(validatorState: ValidatorState, onClick: () -> Unit)
interactionSource = remember { MutableInteractionSource() },
indication = rememberRipple(),
onClick = onClick,
)
.padding(TangemTheme.dimens.spacing12),
),
) {
Text(
text = stringResource(R.string.staking_validator),
style = TangemTheme.typography.subtitle2,
color = TangemTheme.colors.text.tertiary,
modifier = Modifier.padding(bottom = TangemTheme.dimens.spacing6),
)
if (validatorState is ValidatorState.Content) {
InputRowImageChevron(
InputRowImageInfo(
title = resourceReference(R.string.staking_validator),
subtitle = stringReference(validatorState.chosenValidator.name),
caption = combinedReference(
resourceReference(R.string.staking_details_apr),
annotatedReference(
buildAnnotatedString {
append(" ")
withStyle(SpanStyle(color = TangemTheme.colors.text.accent)) {
val apr = validatorState.chosenValidator.apr ?: BigDecimal.ZERO
append(BigDecimalFormatter.formatPercent(apr, true))
}
},
),
),
infoTitle = annotatedReference {
append(resourceReference(R.string.staking_details_apr).resolveReference())
appendSpace()
appendColored(
text = BigDecimalFormatter.formatPercent(validatorState.chosenValidator.apr.orZero(), true),
color = TangemTheme.colors.text.accent,
)
},
imageUrl = validatorState.chosenValidator.image.orEmpty(),
showChevron = validatorState.isClickable,
)
}
}