CP-9622: Show borders for token logos in watchlist (#2163)

ava-labs · Dec 17, 2024 · 3c6511d · 3c6511d
1 parent 7b2a7e5
commit 3c6511d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/packages/core-mobile/app/components/Avatar.tsx b/packages/core-mobile/app/components/Avatar.tsx
@@ -90,14 +90,19 @@ const AvatarBase: FC<AvatarBaseProps> = ({
     )
   }
 
+  const borderWidth = showBorder ? 0.5 : 0
+  const borderColor = showBorder ? '$neutral800' : 'unset'
+
   return logoUri?.endsWith('svg') && !isContentfulImageUri(logoUri) ? (
     <SvgUri
       uri={logoUri}
       width={size}
       height={size}
       style={{
         borderRadius: size,
-        backgroundColor: backgroundColor
+        backgroundColor: backgroundColor,
+        borderWidth,
+        borderColor
       }}
       onLoad={() => setFailedToLoad(false)}
       onError={() => setFailedToLoad(true)}
@@ -109,7 +114,9 @@ const AvatarBase: FC<AvatarBaseProps> = ({
         borderRadius: size,
         width: size,
         height: size,
-        backgroundColor: backgroundColor
+        backgroundColor: backgroundColor,
+        borderWidth,
+        borderColor
       }}
       source={{
         uri: isContentfulImageUri(logoUri)
@@ -131,6 +138,7 @@ interface TokenAvatarProps {
   size?: number
   testID?: string
   backgroundColor?: string
+  showBorder?: boolean
 }
 
 const TokenAvatar: FC<TokenAvatarProps> = props => {
@@ -141,6 +149,7 @@ const TokenAvatar: FC<TokenAvatarProps> = props => {
       tokenSymbol={props.symbol}
       testID={props.symbol}
       backgroundColor={props.backgroundColor}
+      showBorder={props.showBorder}
     />
   )
 }

diff --git a/packages/core-mobile/app/screens/watchlist/components/WatchListItem.tsx b/packages/core-mobile/app/screens/watchlist/components/WatchListItem.tsx
@@ -98,6 +98,7 @@ const LeftComponent = ({
         size={32}
         testID={`${name}`}
         backgroundColor="white"
+        showBorder
       />
     </View>
   )