fix lp badge gradient overflow and android shadows (#6296)

rainbow-me · Dec 6, 2024 · 9991c9c · 9991c9c
1 parent ffff418
commit 9991c9c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 19 deletions.
diff --git a/src/screens/positions/LpPositionListItem.tsx b/src/screens/positions/LpPositionListItem.tsx
@@ -127,7 +127,7 @@ export const LpPositionListItem: React.FC<Props> = ({ assets, totalAssetsValue,
                     borderColor={{ custom: 'rgba(0,0,0,0.02)' }}
                     backgroundColor={rangeStatus === 'in_range' || rangeStatus === 'full_range' ? colors.green : colors.red}
                     shadowColor={rangeStatus === 'in_range' || rangeStatus === 'full_range' ? colors.green : colors.red}
-                    elevation={12}
+                    elevation={2}
                     shadowOpacity={IS_IOS ? 0.2 : 1}
                     shadowRadius={6}
                     style={{
@@ -140,13 +140,11 @@ export const LpPositionListItem: React.FC<Props> = ({ assets, totalAssetsValue,
                     </Text>
                   </Box>
                   <LpRangeBadge
-                    assets={assets
-                      .filter(asset => asset.quantity !== '0')
-                      .map((underlying, index) => ({
-                        id: underlying.asset.asset_code,
-                        color: underlying.asset.colors?.primary ?? underlying.asset.colors?.fallback ?? colors.black,
-                        allocationPercentage: assetAllocations[index],
-                      }))}
+                    assets={assets.map((underlying, index) => ({
+                      id: underlying.asset.asset_code,
+                      color: underlying.asset.colors?.primary ?? underlying.asset.colors?.fallback ?? colors.black,
+                      allocationPercentage: assetAllocations[index],
+                    }))}
                   />
                 </Inline>
               </Column>

diff --git a/src/screens/positions/LpRangeBadge.tsx b/src/screens/positions/LpRangeBadge.tsx
@@ -13,6 +13,7 @@ const MAX_ALLOCATION_PERCENTAGE = 0.75;
 
 type LpRangeBadgeProps = {
   assets: {
+    id: string;
     color: string;
     allocationPercentage: number;
   }[];
@@ -54,7 +55,7 @@ export const LpRangeBadge = ({ assets }: LpRangeBadgeProps) => {
 
         return (
           <Box
-            key={`${asset.color}-${asset.allocationPercentage}`}
+            key={asset.id}
             borderTopLeftRadius={borderTopLeftRadius}
             borderBottomLeftRadius={borderBottomLeftRadius}
             borderTopRightRadius={borderTopRightRadius}
@@ -65,21 +66,34 @@ export const LpRangeBadge = ({ assets }: LpRangeBadgeProps) => {
             shadowColor={asset.color}
             shadowOpacity={IS_IOS ? 0.2 : 1}
             shadowRadius={9}
+            elevation={3}
             style={{
               shadowOffset: { width: 0, height: 3 },
               borderCurve: 'continuous',
             }}
           >
-            <LinearGradient
-              colors={
-                isMiddle
-                  ? ['rgba(255, 255, 255, 0.1)', 'rgba(255, 255, 255, 0.0)', 'rgba(255, 255, 255, 0.1)']
-                  : ['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 0.3)']
-              }
-              start={{ x: isFirst ? 0 : 1, y: 0.5 }}
-              end={{ x: isFirst ? 1 : 0, y: 0.5 }}
-              style={StyleSheet.absoluteFillObject}
-            />
+            <Box
+              height={'full'}
+              borderTopLeftRadius={borderTopLeftRadius}
+              borderBottomLeftRadius={borderBottomLeftRadius}
+              borderTopRightRadius={borderTopRightRadius}
+              borderBottomRightRadius={borderBottomRightRadius}
+              style={{
+                overflow: 'hidden',
+                borderCurve: 'continuous',
+              }}
+            >
+              <LinearGradient
+                colors={
+                  isMiddle
+                    ? ['rgba(255, 255, 255, 0.1)', 'rgba(255, 255, 255, 0.0)', 'rgba(255, 255, 255, 0.1)']
+                    : ['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 0.3)']
+                }
+                start={{ x: isFirst ? 0 : 1, y: 0.5 }}
+                end={{ x: isFirst ? 1 : 0, y: 0.5 }}
+                style={StyleSheet.absoluteFillObject}
+              />
+            </Box>
           </Box>
         );
       })}