Merge pull request #180 from code-payments/fix/bill-wave-render

fix(bill): tweak wave rendering to fade out and not be condensed

Author: bmc08gt

app/src/main/java/com/getcode/ui/utils/Modifier.kt

@@ -9,17 +9,24 @@ import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
 import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.draw.drawWithContent
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.BlendMode
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.CompositingStrategy
 import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.drawscope.ContentDrawScope
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.input.pointer.pointerInteropFilter
 import androidx.compose.ui.layout.layout
 import androidx.compose.ui.layout.onPlaced
@@ -184,4 +191,37 @@ fun Modifier.punchCircle(color: Color) = this.drawWithContent {
     )
 
     drawContent()
+}
+
+fun Modifier.drawWithGradient(
+    color: Color,
+    startY: ContentDrawScope.(Float) -> Float,
+    endY: ContentDrawScope.(Float) -> Float = { Float.POSITIVE_INFINITY },
+    blendMode: BlendMode = BlendMode.SrcOver
+) = this.composed {
+    var height by remember {
+        mutableStateOf(0.dp)
+    }
+
+    val density = LocalDensity.current
+
+    Modifier
+        .onPlaced {
+            height = with(density) { it.size.height.toDp() }
+        }
+        .graphicsLayer {
+            compositingStrategy = CompositingStrategy.Offscreen
+        }
+        .drawWithContent {
+            val colors = listOf(Color.Transparent, color)
+            drawContent()
+            drawRect(
+                brush = Brush.verticalGradient(
+                    startY = startY(height.toPx()),
+                    endY = endY(height.toPx()).takeIf { it != Float.POSITIVE_INFINITY } ?: height.toPx(),
+                    colors = colors,
+                ),
+                blendMode = blendMode
+            )
+        }
 }

app/src/main/java/com/getcode/view/main/bill/CashBill.kt

@@ -25,7 +25,6 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBarsIgnoringVisibility
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.windowInsetsPadding
-import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -45,7 +44,6 @@ import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.graphics.drawscope.DrawScope
 import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.imageResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.Dp
@@ -61,11 +59,11 @@ import com.getcode.model.KinAmount
 import com.getcode.solana.keys.Key32.Companion.kinMint
 import com.getcode.solana.keys.base58
 import com.getcode.theme.CodeTheme
-import com.getcode.ui.utils.debugBounds
-import com.getcode.util.formattedRaw
+import com.getcode.ui.utils.drawWithGradient
 import com.getcode.ui.utils.nonScaledSp
 import com.getcode.ui.utils.punchCircle
 import com.getcode.ui.utils.punchRectangle
+import com.getcode.util.formattedRaw
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
@@ -212,7 +210,7 @@ private class CashBillGeometry(width: Dp, height: Dp) {
     val wavesPosition: Offset
         get() = Offset(
             x = (size.width.value * 0.5f),
-            y = (size.height.value * 0.5f)
+            y = (size.height.value * 0.9f)
         )
 
     init {
@@ -256,6 +254,7 @@ internal fun CashBill(
                 blendMode = BlendMode.Multiply,
                 alpha = 0.6f,
             )
+
             // Grid pattern
             CashBillAssets.grid?.let {
                 Image(
@@ -293,14 +292,13 @@ internal fun CashBill(
             Image(
                 modifier = Modifier
                     .requiredWidth(geometry.globeWidth)
-                    .align(Alignment.BottomCenter)
-                    .height(geometry.wavesPosition.y.dp)
-                    .offset {
-                        IntOffset(
-                            x = geometry.wavesPosition.x.toInt(),
-                            y = 0
-                        )
-                    },
+                    .fillMaxHeight()
+                    .offset { IntOffset(x = geometry.wavesPosition.x.toInt(), y = 0) }
+                    .drawWithGradient(
+                        color = CashBillDefaults.BillColor.copy(CashBillDefaults.CodeBackgroundOpacity),
+                        startY = { it / 2f },
+                        blendMode = BlendMode.DstIn
+                    ),
                 contentDescription = null,
                 contentScale = ContentScale.FillBounds,
                 bitmap = ImageBitmap.imageResource(R.drawable.ic_bill_waves),