Skip to content

Commit 5af487e

Browse files
ovitrifovitrif
committed
fix: match hw transfer figma visuals
1 parent 4dad88c commit 5af487e

3 files changed

Lines changed: 82 additions & 43 deletions

File tree

‎app/src/main/java/to/bitkit/ui/screens/transfer/hardware/HardwareTransferIllustration.kt‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
package to.bitkit.ui.screens.transfer.hardware
2+
3+
import androidx.annotation.DrawableRes
4+
import androidx.compose.foundation.Image
5+
import androidx.compose.foundation.layout.BoxScope
6+
import androidx.compose.foundation.layout.BoxWithConstraints
7+
import androidx.compose.foundation.layout.offset
8+
import androidx.compose.foundation.layout.size
9+
import androidx.compose.runtime.Composable
10+
import androidx.compose.ui.Alignment
11+
import androidx.compose.ui.Modifier
12+
import androidx.compose.ui.layout.ContentScale
13+
import androidx.compose.ui.res.painterResource
14+
15+
/** Figma illustration width ratio from a 256px asset in a 375px frame. */
16+
private const val HARDWARE_VISUAL_WIDTH_RATIO = 256f / 375f
17+
18+
/** Figma top ratio for the signed check visual within the content area below navigation. */
19+
internal const val SIGNED_VISUAL_TOP_RATIO = (481f - 92f) / (812f - 92f - 34f)
20+
21+
/** Figma top ratio for the Trezor visual within the content area below navigation. */
22+
internal const val SIGN_VISUAL_TOP_RATIO = (488f - 92f) / (812f - 92f - 34f)
23+
24+
@Composable
25+
internal fun BoxScope.HardwareTransferIllustration(
26+
modifier: Modifier = Modifier,
27+
@DrawableRes drawableRes: Int,
28+
topRatio: Float,
29+
) {
30+
BoxWithConstraints(modifier = Modifier.matchParentSize()) {
31+
val visualSize = maxWidth * HARDWARE_VISUAL_WIDTH_RATIO
32+
val topOffset = maxHeight * topRatio
33+
34+
Image(
35+
painter = painterResource(id = drawableRes),
36+
contentDescription = null,
37+
contentScale = ContentScale.Fit,
38+
modifier = Modifier
39+
.align(Alignment.TopCenter)
40+
.offset(y = topOffset)
41+
.size(visualSize)
42+
.then(modifier)
43+
)
44+
}
45+
}

‎app/src/main/java/to/bitkit/ui/screens/transfer/hardware/SpendingHwSignScreen.kt‎

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,18 @@
11
package to.bitkit.ui.screens.transfer.hardware
22

3-
import androidx.compose.foundation.Image
43
import androidx.compose.foundation.layout.Arrangement
54
import androidx.compose.foundation.layout.Box
65
import androidx.compose.foundation.layout.Column
76
import androidx.compose.foundation.layout.IntrinsicSize
87
import androidx.compose.foundation.layout.Row
98
import androidx.compose.foundation.layout.fillMaxSize
10-
import androidx.compose.foundation.layout.fillMaxWidth
119
import androidx.compose.foundation.layout.height
1210
import androidx.compose.foundation.layout.padding
1311
import androidx.compose.runtime.Composable
1412
import androidx.compose.runtime.LaunchedEffect
1513
import androidx.compose.runtime.getValue
16-
import androidx.compose.ui.Alignment
1714
import androidx.compose.ui.Modifier
18-
import androidx.compose.ui.layout.ContentScale
1915
import androidx.compose.ui.platform.testTag
20-
import androidx.compose.ui.res.painterResource
2116
import androidx.compose.ui.res.stringResource
2217
import androidx.compose.ui.tooling.preview.Preview
2318
import androidx.compose.ui.unit.dp
@@ -78,13 +73,13 @@ fun SpendingHwSignScreen(
7873
@Composable
7974
private fun Content(
8075
order: IBtOrder,
81-
isAdvanced: Boolean,
82-
isSigning: Boolean,
83-
onBackClick: () -> Unit,
84-
onLearnMoreClick: () -> Unit,
85-
onAdvancedClick: () -> Unit,
86-
onUseDefaultLspBalanceClick: () -> Unit,
87-
onOpenConnect: () -> Unit,
76+
isAdvanced: Boolean = false,
77+
isSigning: Boolean = false,
78+
onBackClick: () -> Unit = {},
79+
onLearnMoreClick: () -> Unit = {},
80+
onAdvancedClick: () -> Unit = {},
81+
onUseDefaultLspBalanceClick: () -> Unit = {},
82+
onOpenConnect: () -> Unit = {},
8883
) {
8984
ScreenColumn {
9085
AppTopBar(
@@ -93,15 +88,9 @@ private fun Content(
9388
actions = { DrawerNavIcon() },
9489
)
9590
Box(modifier = Modifier.fillMaxSize()) {
96-
Image(
97-
painter = painterResource(id = R.drawable.trezor),
98-
contentDescription = null,
99-
contentScale = ContentScale.Fit,
100-
modifier = Modifier
101-
.fillMaxWidth()
102-
.padding(horizontal = 48.dp)
103-
.align(Alignment.BottomCenter)
104-
.padding(bottom = 96.dp)
91+
HardwareTransferIllustration(
92+
drawableRes = R.drawable.trezor,
93+
topRatio = SIGN_VISUAL_TOP_RATIO,
10594
)
10695

10796
Column(
@@ -198,13 +187,28 @@ private fun Preview() {
198187
AppThemeSurface {
199188
Content(
200189
order = previewBtOrder(),
201-
isAdvanced = false,
202-
isSigning = false,
203-
onBackClick = {},
204-
onLearnMoreClick = {},
205-
onAdvancedClick = {},
206-
onUseDefaultLspBalanceClick = {},
207-
onOpenConnect = {},
190+
)
191+
}
192+
}
193+
194+
@Preview(showSystemUi = true)
195+
@Composable
196+
private fun PreviewAdvanced() {
197+
AppThemeSurface {
198+
Content(
199+
order = previewBtOrder(),
200+
isAdvanced = true,
201+
)
202+
}
203+
}
204+
205+
@Preview(showSystemUi = true)
206+
@Composable
207+
private fun PreviewSigning() {
208+
AppThemeSurface {
209+
Content(
210+
order = previewBtOrder(),
211+
isSigning = true,
208212
)
209213
}
210214
}

‎app/src/main/java/to/bitkit/ui/screens/transfer/hardware/SpendingHwSignedScreen.kt‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,14 @@
11
package to.bitkit.ui.screens.transfer.hardware
22

3-
import androidx.compose.foundation.Image
43
import androidx.compose.foundation.layout.Box
54
import androidx.compose.foundation.layout.Column
65
import androidx.compose.foundation.layout.fillMaxSize
76
import androidx.compose.foundation.layout.padding
8-
import androidx.compose.foundation.layout.size
97
import androidx.compose.runtime.Composable
108
import androidx.compose.runtime.LaunchedEffect
119
import androidx.compose.runtime.getValue
12-
import androidx.compose.ui.Alignment
1310
import androidx.compose.ui.Modifier
14-
import androidx.compose.ui.layout.ContentScale
1511
import androidx.compose.ui.platform.testTag
16-
import androidx.compose.ui.res.painterResource
1712
import androidx.compose.ui.res.stringResource
1813
import androidx.compose.ui.tooling.preview.Preview
1914
import androidx.compose.ui.unit.dp
@@ -32,8 +27,8 @@ import to.bitkit.ui.theme.Colors
3227
import to.bitkit.ui.utils.withAccent
3328
import to.bitkit.viewmodels.TransferViewModel
3429

35-
/** Dwell on the signed confirmation before forwarding, matching the transfer flow's checkmark beat. */
36-
private const val SIGNED_AUTO_NAV_DELAY_MS = 2500L
30+
/** Figma handoff delay before forwarding from signed confirmation. */
31+
private const val SIGNED_AUTO_NAV_DELAY_MS = 1_000L
3732

3833
@Composable
3934
fun SpendingHwSignedScreen(
@@ -68,14 +63,9 @@ private fun Content(
6863
actions = { DrawerNavIcon() },
6964
)
7065
Box(modifier = Modifier.fillMaxSize()) {
71-
Image(
72-
painter = painterResource(id = R.drawable.check),
73-
contentDescription = null,
74-
contentScale = ContentScale.Fit,
75-
modifier = Modifier
76-
.align(Alignment.Center)
77-
.padding(top = 120.dp)
78-
.size(220.dp)
66+
HardwareTransferIllustration(
67+
drawableRes = R.drawable.check,
68+
topRatio = SIGNED_VISUAL_TOP_RATIO,
7969
)
8070

8171
Column(

0 commit comments

Comments
 (0)