Vault Polishing (#255)

[Add UDSC position](2836871) [Add info button](f15ab63) [Move buttons and, fixing position item layout, and withdrawal roundin…](0e1ed3d) ![Screenshot_1729551617](https://github.com/user-attachments/assets/a0277fa8-badc-4695-82d6-a506c53f5ded)
dydxprotocol · Oct 23, 2024 · 0eecc11 · 0eecc11
1 parent dc85be3
commit 0eecc11
Show file tree

Hide file tree

Showing 11 changed files with 141 additions and 68 deletions.
diff --git a/v4/build.gradle b/v4/build.gradle
@@ -88,7 +88,7 @@ ext {
     compileSdkVersion = 34
 
     // App dependencies
-    abacusVersion = '1.13.2'
+    abacusVersion = '1.13.5'
     carteraVersion = '0.1.15'
     kollectionsVersion = '2.0.16'
 

diff --git a/v4/feature/shared/src/main/res/drawable/icon_info.xml b/v4/feature/shared/src/main/res/drawable/icon_info.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="18dp"
+    android:height="18dp"
+    android:viewportWidth="18"
+    android:viewportHeight="18">
+  <path
+      android:pathData="M8.313,8.313L8.35,8.294C8.468,8.235 8.6,8.212 8.73,8.226C8.861,8.239 8.985,8.291 9.087,8.373C9.19,8.455 9.267,8.565 9.309,8.689C9.351,8.814 9.356,8.948 9.325,9.075L8.675,11.675C8.644,11.802 8.649,11.936 8.691,12.061C8.733,12.186 8.81,12.296 8.912,12.378C9.015,12.46 9.139,12.512 9.269,12.526C9.4,12.539 9.532,12.516 9.65,12.457L9.688,12.438M17.25,9C17.25,10.083 17.037,11.156 16.622,12.157C16.207,13.158 15.6,14.068 14.834,14.834C14.068,15.6 13.158,16.207 12.157,16.622C11.156,17.037 10.083,17.25 9,17.25C7.917,17.25 6.844,17.037 5.843,16.622C4.842,16.207 3.932,15.6 3.166,14.834C2.4,14.068 1.793,13.158 1.378,12.157C0.963,11.156 0.75,10.083 0.75,9C0.75,6.812 1.619,4.714 3.166,3.166C4.714,1.619 6.812,0.75 9,0.75C11.188,0.75 13.286,1.619 14.834,3.166C16.381,4.714 17.25,6.812 17.25,9ZM9,5.563H9.007V5.57H9V5.563Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#807E98"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/v4/feature/vault/src/main/java/exchange/dydx/trading/feature/vault/DydxVaultView.kt b/v4/feature/vault/src/main/java/exchange/dydx/trading/feature/vault/DydxVaultView.kt
@@ -20,7 +20,6 @@ import exchange.dydx.platformui.theme.DydxThemedPreviewSurface
 import exchange.dydx.platformui.theme.MockLocalizer
 import exchange.dydx.trading.common.component.DydxComponent
 import exchange.dydx.trading.feature.shared.bottombar.DydxBottomBarScaffold
-import exchange.dydx.trading.feature.vault.components.DydxVaultButtonsView
 import exchange.dydx.trading.feature.vault.components.DydxVaultChartView
 import exchange.dydx.trading.feature.vault.components.DydxVaultHeaderView
 import exchange.dydx.trading.feature.vault.components.DydxVaultInfoView
@@ -75,8 +74,6 @@ object DydxVaultView : DydxComponent {
             DydxVaultHeaderView.Content(modifier = Modifier)
 
             ScrollingContent(modifier = Modifier.weight(1f), state = state)
-
-            DydxVaultButtonsView.Content(modifier = Modifier)
         }
     }
 

diff --git a/v4/feature/vault/src/main/java/exchange/dydx/trading/feature/vault/DydxVaultViewModel.kt b/v4/feature/vault/src/main/java/exchange/dydx/trading/feature/vault/DydxVaultViewModel.kt
@@ -16,6 +16,7 @@ import exchange.dydx.platformui.components.charts.view.LineChartDataSet
 import exchange.dydx.trading.common.DydxViewModel
 import exchange.dydx.trading.common.formatter.DydxFormatter
 import exchange.dydx.trading.feature.shared.views.SideTextView
+import exchange.dydx.trading.feature.shared.views.SideTextView.Side
 import exchange.dydx.trading.feature.shared.views.SignedAmountView
 import exchange.dydx.trading.feature.shared.views.SparklineView
 import exchange.dydx.trading.feature.shared.views.TokenTextView
@@ -48,8 +49,11 @@ class DydxVaultViewModel @Inject constructor(
         marketMap: Map<String, PerpetualMarket>?,
         assetMap: Map<String, Asset>?,
     ): DydxVaultView.ViewState {
-        val items: List<DydxVaultPositionItemView.ViewState> = vault?.positions?.sortedBySize?.mapNotNull { position ->
+        val items: List<DydxVaultPositionItemView.ViewState> = vault?.positions?.sortedByEquity?.mapNotNull { position ->
             val marketId = position.marketId ?: return@mapNotNull null
+            if (marketId == "USDC-USD") {
+                return@mapNotNull createUsdcItem(position)
+            }
             val market = marketMap?.get(marketId) ?: return@mapNotNull null
             val asset = assetMap?.get(market.assetId) ?: return@mapNotNull null
             createPositionItem(position, asset)
@@ -60,6 +64,36 @@ class DydxVaultViewModel @Inject constructor(
         )
     }
 
+    private fun createUsdcItem(
+        position: VaultPosition,
+    ): DydxVaultPositionItemView.ViewState? {
+        val marketId = position.marketId ?: return null
+        return DydxVaultPositionItemView.ViewState(
+            localizer = localizer,
+            id = marketId,
+            logoUrl = null,
+            assetName = "USDC",
+            market = marketId,
+            side = SideTextView.ViewState(
+                localizer = localizer,
+                side = Side.Long,
+            ),
+            leverage = "1.00x",
+            notionalValue = formatter.dollarVolume((position.currentPosition?.usdc?.absoluteValue ?: 0.0), digits = 2),
+            equity = formatter.dollarVolume((position.marginUsdc?.absoluteValue ?: 0.0), digits = 2),
+            positionSize = formatter.condensed((position.currentPosition?.asset?.absoluteValue ?: 0.0), digits = 2),
+            token = TokenTextView.ViewState(
+                symbol = "USDC",
+            ),
+            pnlAmount = SignedAmountView.ViewState(
+                sign = position.pnlSign,
+                text = formatter.dollarVolume(0.0, digits = 2) ?: "-",
+            ),
+            pnlPercentage = formatter.percent(0.0, digits = 2),
+            sparkline = createSparkline(position.thirtyDayPnl),
+        )
+    }
+
     private fun createPositionItem(
         position: VaultPosition,
         asset: Asset
@@ -75,16 +109,19 @@ class DydxVaultViewModel @Inject constructor(
                 localizer = localizer,
                 side = position.side,
             ),
-            leverage = formatter.raw(position.currentLeverageMultiple?.absoluteValue, digits = 2),
-            notionalValue = formatter.dollar((position.currentPosition?.usdc?.absoluteValue ?: 0.0), digits = 0),
-            positionSize = formatter.raw((position.currentPosition?.asset?.absoluteValue ?: 0.0), digits = 2),
+            leverage = formatter.raw(position.currentLeverageMultiple?.absoluteValue, digits = 2)?.let {
+                "${it}x"
+            },
+            notionalValue = formatter.dollarVolume((position.currentPosition?.usdc?.absoluteValue ?: 0.0), digits = 2),
+            equity = formatter.dollarVolume((position.marginUsdc?.absoluteValue ?: 0.0), digits = 2),
+            positionSize = formatter.condensed((position.currentPosition?.asset?.absoluteValue ?: 0.0), digits = 2),
             token = TokenTextView.ViewState(
                 symbol = asset.id,
             ),
             pnlAmount = if (position.thirtyDayPnl?.absolute != null) {
                 SignedAmountView.ViewState(
                     sign = position.pnlSign,
-                    text = formatter.dollar(position.thirtyDayPnl?.absolute?.absoluteValue, digits = 0) ?: "-",
+                    text = formatter.dollarVolume(position.thirtyDayPnl?.absolute?.absoluteValue, digits = 2) ?: "-",
                 )
             } else {
                 SignedAmountView.ViewState(
@@ -150,3 +187,14 @@ private val VaultPositions.sortedBySize: List<VaultPosition>?
             size2.compareTo(size1)
         }
     }
+
+private val VaultPositions.sortedByEquity: List<VaultPosition>?
+    get() = this.positions?.sortedWith { p1, p2 ->
+        val size1 = p1.marginUsdc ?: 0.0
+        val size2 = p2.marginUsdc ?: 0.0
+        if (size1 == size2) {
+            p2.thirtyDayPnl?.absolute?.compareTo(p1.thirtyDayPnl?.absolute ?: 0.0) ?: 0
+        } else {
+            size2.compareTo(size1)
+        }
+    }
diff --git a/...ault/src/main/java/exchange/dydx/trading/feature/vault/components/DydxVaultButtonsView.kt b/...ault/src/main/java/exchange/dydx/trading/feature/vault/components/DydxVaultButtonsView.kt
@@ -75,9 +75,6 @@ object DydxVaultButtonsView : DydxComponent {
                     ButtonType.WITHDRAW -> {
                         PlatformButton(
                             modifier = Modifier.weight(1f)
-                                .padding(
-                                    vertical = ThemeShapes.VerticalPadding,
-                                )
                                 .size(44.dp),
                             text = state.localizer.localize("APP.GENERAL.WITHDRAW"),
                             leadingContent = {
@@ -95,9 +92,6 @@ object DydxVaultButtonsView : DydxComponent {
                     ButtonType.DEPOSIT -> {
                         PlatformButton(
                             modifier = Modifier.weight(1f)
-                                .padding(
-                                    vertical = ThemeShapes.VerticalPadding,
-                                )
                                 .size(44.dp),
                             text = state.localizer.localize("APP.GENERAL.DEPOSIT"),
                             leadingContent = {

diff --git a/...vault/src/main/java/exchange/dydx/trading/feature/vault/components/DydxVaultHeaderView.kt b/...vault/src/main/java/exchange/dydx/trading/feature/vault/components/DydxVaultHeaderView.kt
@@ -1,25 +1,27 @@
 package exchange.dydx.trading.feature.vault.components
 
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.Icon
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import exchange.dydx.abacus.protocols.LocalizerProtocol
+import exchange.dydx.platformui.components.buttons.PlatformIconButton
 import exchange.dydx.platformui.components.icons.PlatformImage
 import exchange.dydx.platformui.compose.collectAsStateWithLifecycle
 import exchange.dydx.platformui.designSystem.theme.ThemeColor
@@ -96,27 +98,18 @@ object DydxVaultHeaderView : DydxComponent {
 
             Spacer(modifier = Modifier.weight(1f))
 
-            Row(
-                modifier = Modifier.align(Alignment.CenterVertically)
-                    .clickable {
-                        state.learnMoreAction()
-                    },
-                horizontalArrangement = Arrangement.spacedBy(8.dp),
-            ) {
-                Text(
-                    text = state.localizer.localize("APP.GENERAL.LEARN_MORE"),
-                    style = TextStyle.dydxDefault
-                        .themeFont(
-                            fontSize = ThemeFont.FontSize.medium,
-                        )
-                        .themeColor(ThemeColor.SemanticColor.text_secondary),
-                )
-
-                PlatformImage(
-                    modifier = Modifier.size(18.dp).align(Alignment.CenterVertically),
-                    icon = R.drawable.icon_external_link,
-                    colorFilter = ColorFilter.tint(ThemeColor.SemanticColor.text_secondary.color),
-                )
+            Column(modifier = Modifier.align(Alignment.CenterVertically)) {
+                PlatformIconButton(
+                    action = state.learnMoreAction,
+                    size = 42.dp,
+                ) {
+                    Icon(
+                        painter = painterResource(id = R.drawable.icon_info),
+                        contentDescription = state.localizer.localize("APP.GENERAL.LEARN_MORE"),
+                        modifier = Modifier.size(24.dp),
+                        tint = ThemeColor.SemanticColor.text_secondary.color,
+                    )
+                }
             }
         }
     }

diff --git a/...e/vault/src/main/java/exchange/dydx/trading/feature/vault/components/DydxVaultInfoView.kt b/...e/vault/src/main/java/exchange/dydx/trading/feature/vault/components/DydxVaultInfoView.kt
@@ -76,10 +76,11 @@ object DydxVaultInfoView : DydxComponent {
 
         Column(
             modifier = modifier,
+            verticalArrangement = Arrangement.spacedBy(12.dp),
         ) {
             Row(
                 modifier = Modifier
-                    .padding(16.dp)
+                    .padding(horizontal = 16.dp)
                     .fillMaxWidth(),
                 horizontalArrangement = Arrangement.spacedBy(16.dp),
             ) {
@@ -111,15 +112,15 @@ object DydxVaultInfoView : DydxComponent {
             }
 
             DydxVaultTransferButtonView.Content(
-                modifier = Modifier
-                    .padding(horizontal = 16.dp)
-                    .padding(bottom = 16.dp),
+                modifier = Modifier.padding(horizontal = 16.dp),
             )
 
-            PlatformDivider()
+            DydxVaultButtonsView.Content(modifier = Modifier)
+
+            PlatformDivider(modifier = Modifier)
 
             Row(
-                modifier = Modifier.height(96.dp).padding(16.dp),
+                modifier = Modifier.height(72.dp).padding(horizontal = 16.dp),
                 verticalAlignment = Alignment.CenterVertically,
             ) {
                 if (state.chartEntrySelected) {

diff --git a/...src/main/java/exchange/dydx/trading/feature/vault/components/DydxVaultPositionItemView.kt b/...src/main/java/exchange/dydx/trading/feature/vault/components/DydxVaultPositionItemView.kt
@@ -3,7 +3,6 @@ package exchange.dydx.trading.feature.vault.components
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
@@ -29,6 +28,7 @@ import exchange.dydx.platformui.designSystem.theme.themeFont
 import exchange.dydx.platformui.theme.DydxThemedPreviewSurface
 import exchange.dydx.platformui.theme.MockLocalizer
 import exchange.dydx.trading.common.component.DydxComponent
+import exchange.dydx.trading.feature.shared.R
 import exchange.dydx.trading.feature.shared.views.SideTextView
 import exchange.dydx.trading.feature.shared.views.SignedAmountView
 import exchange.dydx.trading.feature.shared.views.SparklineView
@@ -57,6 +57,7 @@ object DydxVaultPositionItemView : DydxComponent {
         val leverage: String? = null,
         val notionalValue: String? = null,
         val positionSize: String? = null,
+        val equity: String? = null,
         val token: TokenTextView.ViewState? = null,
         val pnlAmount: SignedAmountView.ViewState? = null,
         val pnlPercentage: String? = null,
@@ -113,12 +114,10 @@ object DydxVaultPositionItemView : DydxComponent {
             )
 
             SizeColumnContent(
-                modifier = Modifier,
+                modifier = Modifier.weight(1f),
                 state = state,
             )
 
-            Spacer(modifier = Modifier.weight(1f))
-
             PnLColumnContent(
                 modifier = Modifier,
                 state = state,
@@ -143,7 +142,7 @@ object DydxVaultPositionItemView : DydxComponent {
             horizontalArrangement = Arrangement.spacedBy(8.dp),
         ) {
             PlatformRoundImage(
-                icon = state.logoUrl,
+                icon = if (state.assetName == "USDC") R.drawable.vault_usdc_token else state.logoUrl,
                 size = 24.dp,
             )
 
@@ -190,11 +189,28 @@ object DydxVaultPositionItemView : DydxComponent {
             modifier = modifier,
             verticalArrangement = Arrangement.spacedBy(4.dp),
         ) {
-            Text(
-                text = state.notionalValue ?: "-",
-                style = TextStyle.dydxDefault
-                    .themeFont(fontSize = ThemeFont.FontSize.small),
-            )
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(4.dp),
+            ) {
+                Text(
+                    text = state.notionalValue ?: "-",
+                    style = TextStyle.dydxDefault
+                        .themeFont(fontSize = ThemeFont.FontSize.small),
+                )
+
+                Text(
+                    text = "/",
+                    style = TextStyle.dydxDefault
+                        .themeFont(fontSize = ThemeFont.FontSize.small),
+                )
+
+                Text(
+                    text = state.equity ?: "-",
+                    style = TextStyle.dydxDefault
+                        .themeFont(fontSize = ThemeFont.FontSize.small),
+                )
+            }
 
             Row(
                 verticalAlignment = Alignment.CenterVertically,