code review

ava-labs · Dec 2, 2024 · cf3e3e6 · cf3e3e6
1 parent 2b68919
commit cf3e3e6
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 9 deletions.
diff --git a/packages/k2-alpine/package.json b/packages/k2-alpine/package.json
@@ -22,6 +22,7 @@
     "expo": "50.0.21",
     "expo-blur": "12.9.2",
     "expo-font": "11.10.3",
+    "expo-image": "1.10.6",
     "expo-linear-gradient": "12.7.2",
     "expo-splash-screen": "0.27.6",
     "expo-status-bar": "1.12.1",

diff --git a/packages/k2-alpine/src/components/Avatar/Avatar.stories.tsx b/packages/k2-alpine/src/components/Avatar/Avatar.stories.tsx
@@ -35,6 +35,9 @@ export const All = (): JSX.Element => {
     },
     {
       uri: 'https://i.seadn.io/gcs/files/441e674e79460fc975d976465bb3634d.png?auto=format&dpr=1&w=1000'
+    },
+    {
+      uri: 'https://www.svgrepo.com/show/19461/url-link.svg'
     }
   ].map((avatar, index) => {
     return { id: index.toString(), source: avatar }
@@ -48,11 +51,13 @@ export const All = (): JSX.Element => {
     setSelectedAvatarId(id)
   }
 
+  const backgroundColor = theme.colors.$surfacePrimary
+
   return (
     <ScrollView
       style={{
         width: '100%',
-        backgroundColor: theme.colors.$surfacePrimary
+        backgroundColor
       }}>
       <View sx={{ alignItems: 'flex-end', padding: 12 }}>
         <View
@@ -67,6 +72,7 @@ export const All = (): JSX.Element => {
       </View>
       <View sx={{ alignItems: 'center', padding: 100 }}>
         <Avatar
+          backgroundColor={backgroundColor}
           source={
             AVATARS.find(avatar => avatar.id === selectedAvatarId)?.source
           }
@@ -75,6 +81,7 @@ export const All = (): JSX.Element => {
         />
       </View>
       <AvatarSelector
+        backgroundColor={backgroundColor}
         selectedId={selectedAvatarId}
         avatars={AVATARS}
         onSelect={handleSelect}

diff --git a/packages/k2-alpine/src/components/Avatar/Avatar.tsx b/packages/k2-alpine/src/components/Avatar/Avatar.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { ImageSourcePropType, ViewStyle } from 'react-native'
+import { ImageSourcePropType, Platform, ViewStyle } from 'react-native'
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -17,10 +17,12 @@ export const Avatar = ({
   isSelected,
   isPressed,
   hasBlur,
-  style
+  style,
+  backgroundColor
 }: {
   source: ImageSourcePropType
   size: number | 'small' | 'large'
+  backgroundColor: string
   isSelected?: boolean
   isPressed?: boolean
   hasBlur?: boolean
@@ -34,7 +36,22 @@ export const Avatar = ({
   const pressedAnimatedStyle = useAnimatedStyle(() => ({
     transform: [{ scale: pressedAnimation.value }]
   }))
-  const surfacePrimaryBlurBg = theme.isDark ? '#050506' : undefined // to cancel out the blur effect on the $surfacePrimary, we need to use a darker background color for the blur view, only for dark mode
+  // to cancel out the blur effect on the backgroundColor, we need to use a darker background color for the blur view
+  const surfacePrimaryBlurBgMap = theme.isDark
+    ? {
+        [theme.colors.$surfacePrimary]:
+          Platform.OS === 'ios' ? '#050506' : '#0a0a0b',
+        [theme.colors.$surfaceSecondary]:
+          Platform.OS === 'ios' ? '#37373f' : '#373743',
+        [theme.colors.$surfaceTertiary]:
+          Platform.OS === 'ios' ? '#1A1A1C' : '#1C1C1F'
+      }
+    : {
+        [theme.colors.$surfacePrimary]: undefined,
+        [theme.colors.$surfaceSecondary]: undefined,
+        [theme.colors.$surfaceTertiary]:
+          Platform.OS === 'ios' ? '#8b8b8c' : '#79797c'
+      }
 
   useEffect(() => {
     pressedAnimation.value = withTiming(isPressed ? 0.95 : 1, {
@@ -53,7 +70,7 @@ export const Avatar = ({
       {hasBlur === true && (
         <View
           sx={{
-            backgroundColor: surfacePrimaryBlurBg,
+            backgroundColor: surfacePrimaryBlurBgMap[backgroundColor],
             position: 'absolute',
             top: -BLURAREA_INSET + 10,
             left: -BLURAREA_INSET,
@@ -83,6 +100,7 @@ export const Avatar = ({
         source={source}
         height={height}
         isSelected={isSelected}
+        hasLoading={true}
       />
       <HexagonBorder height={height} />
     </Animated.View>

diff --git a/packages/k2-alpine/src/components/Avatar/AvatarSelector.tsx b/packages/k2-alpine/src/components/Avatar/AvatarSelector.tsx
@@ -7,11 +7,13 @@ import { Avatar } from './Avatar'
 const AvatarSelector = ({
   avatars,
   selectedId,
-  onSelect
+  onSelect,
+  backgroundColor
 }: {
   avatars: { id: string; source: ImageSourcePropType }[]
   selectedId?: string
   onSelect?: (id: string) => void
+  backgroundColor: string
 }): JSX.Element => {
   const data = useMemo(() => {
     // we should always have an even number of avatars, due to infinite scrolling + two avatars per column
@@ -60,6 +62,7 @@ const AvatarSelector = ({
           size={configuration.avatarWidth}
           isSelected={data[index]?.id === selectedId}
           isPressed={pressedIndex === index}
+          backgroundColor={backgroundColor}
         />
       </Pressable>
     )

diff --git a/packages/k2-alpine/src/components/Avatar/HexagonImageView.tsx b/packages/k2-alpine/src/components/Avatar/HexagonImageView.tsx
@@ -1,14 +1,18 @@
 import MaskedView from '@react-native-masked-view/masked-view'
-import React, { useEffect } from 'react'
-import { ImageSourcePropType, Image, Platform } from 'react-native'
+import React, { useEffect, useState } from 'react'
+import { ImageSourcePropType, Platform, ViewStyle } from 'react-native'
 import Animated, {
   Easing,
+  interpolateColor,
   useAnimatedProps,
   useAnimatedStyle,
   useSharedValue,
+  withDelay,
+  withRepeat,
   withTiming
 } from 'react-native-reanimated'
 import Svg, { Path } from 'react-native-svg'
+import { Image } from 'expo-image'
 import { alpha } from '../../utils'
 import {
   colors,
@@ -20,17 +24,20 @@ import { useTheme } from '../..'
 export const HexagonImageView = ({
   source,
   height,
-  isSelected
+  isSelected,
+  hasLoading = false
 }: {
   source: ImageSourcePropType
   height: number
   isSelected?: boolean
+  hasLoading?: boolean
 }): JSX.Element => {
   const { theme } = useTheme()
   const selectedAnimation = useSharedValue(0)
   const selectedAnimatedStyle = useAnimatedStyle(() => ({
     opacity: selectedAnimation.value
   }))
+  const [isLoading, setIsLoading] = useState(false)
 
   useEffect(() => {
     selectedAnimation.value = withTiming(isSelected ? 1 : 0, {
@@ -51,7 +58,24 @@ export const HexagonImageView = ({
         resizeMode="cover"
         source={source}
         style={{ width: height, height: height }}
+        onLoadStart={() => {
+          if (hasLoading) setIsLoading(true)
+        }}
+        onLoadEnd={() => {
+          if (hasLoading) setIsLoading(false)
+        }}
       />
+      {isLoading && (
+        <LoadingView
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0
+          }}
+        />
+      )}
       <Animated.View
         style={[
           {
@@ -155,3 +179,29 @@ const hexagonPath = {
 `,
   viewBox: '0 0 130 144'
 }
+
+const LoadingView = ({ style }: { style: ViewStyle }): JSX.Element => {
+  const backgroundAnimation = useSharedValue(0)
+  const { theme } = useTheme()
+
+  useEffect(() => {
+    backgroundAnimation.value = withDelay(
+      Math.random() * 1000,
+      withRepeat(withTiming(1, { duration: 1000 }), -1, true)
+    )
+  }, [backgroundAnimation])
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      backgroundAnimation.value,
+      [0, 1],
+      [theme.colors.$surfacePrimary, theme.colors.$surfaceSecondary]
+    )
+
+    return {
+      backgroundColor
+    }
+  })
+
+  return <Animated.View style={[style, animatedStyle]} />
+}
diff --git a/yarn.lock b/yarn.lock
@@ -535,6 +535,7 @@ __metadata:
     expo: 50.0.21
     expo-blur: 12.9.2
     expo-font: 11.10.3
+    expo-image: 1.10.6
     expo-linear-gradient: 12.7.2
     expo-splash-screen: 0.27.6
     expo-status-bar: 1.12.1
@@ -17608,6 +17609,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expo-image@npm:1.10.6":
+  version: 1.10.6
+  resolution: "expo-image@npm:1.10.6"
+  dependencies:
+    "@react-native/assets-registry": ~0.73.1
+  peerDependencies:
+    expo: "*"
+  checksum: c847caf52e507d75a8d66a2f1f56d0c05669fe565510a9c24e4a5644e521a638e7171cfa67a4af89cc2db20f6d6a9cb25ee75471a9b2a4e167b91eb48d8eed35
+  languageName: node
+  linkType: hard
+
 "expo-keep-awake@npm:~12.8.2":
   version: 12.8.2
   resolution: "expo-keep-awake@npm:12.8.2"