CP-9706: DeFi list and detail (#2315)

Author: onghwan

packages/core-mobile/app/components/Row.tsx

@@ -1,6 +1,5 @@
-import { View } from '@avalabs/k2-mobile'
 import React, { FC } from 'react'
-import { ViewProps } from 'react-native'
+import { ViewProps, View } from 'react-native'
 
 export const Row: FC<ViewProps> = ({ style, children, testID }) => {
   return (

packages/core-mobile/app/hooks/defi/useDeFiProtocol.ts

@@ -7,7 +7,7 @@ import { refetchIntervals } from 'services/defi/constants'
 import { ReactQueryKeys } from 'consts/reactQueryKeys'
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export const useDeFiProtocol = (protocolId: string) => {
+export const useDeFiProtocol = (protocolId: string | undefined = '') => {
   const addressC = useSelector(selectActiveAccount)?.addressC ?? ''
 
   return useRefreshableQuery({

packages/core-mobile/app/new/assets/icons/bar_chart_emoji.png

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Image, SxProp } from '@avalabs/k2-alpine'
+import { Placeholder } from './Placeholder'
+
+export const ErrorState = ({
+  sx,
+  icon = (
+    <Image
+      source={require('../../assets/icons/error_state_emoji.png')}
+      sx={{ width: 42, height: 42 }}
+    />
+  ),
+  title = 'Oops! Something went wrong',
+  description = 'Please try again later',
+  button
+}: {
+  sx?: SxProp
+  icon?: JSX.Element
+  title?: string
+  description?: string
+  button?: {
+    title: string
+    onPress: () => void
+  }
+}): JSX.Element => {
+  return (
+    <Placeholder
+      sx={sx}
+      icon={icon}
+      title={title}
+      description={description}
+      button={button}
+    />
+  )
+}

packages/core-mobile/app/new/common/components/ErrorState.tsx

@@ -0,0 +1,37 @@
+import { alpha, useTheme } from '@avalabs/k2-alpine'
+import { LinearGradient } from 'expo-linear-gradient'
+import React from 'react'
+import { View } from 'react-native'
+import { BlurViewWithFallback } from './BlurViewWithFallback'
+
+export const LinearGradientBottomWrapper = ({
+  children
+}: {
+  children: React.ReactNode
+}): React.JSX.Element => {
+  const { theme } = useTheme()
+
+  return (
+    <View
+      style={{
+        marginBottom: -1
+      }}>
+      <LinearGradient
+        colors={[
+          alpha(theme.colors.$surfacePrimary, 0),
+          alpha(theme.colors.$surfacePrimary, 0.9)
+        ]}
+        style={{
+          position: 'absolute',
+          top: -44,
+          left: 0,
+          right: 0,
+          height: 60
+        }}
+        start={{ x: 0.5, y: 0 }}
+        end={{ x: 0.5, y: 0.5 }}
+      />
+      <BlurViewWithFallback>{children}</BlurViewWithFallback>
+    </View>
+  )
+}

packages/core-mobile/app/new/common/components/LinearGradientBottomWrapper.tsx

@@ -0,0 +1,15 @@
+import { ActivityIndicator, SxProp, View } from '@avalabs/k2-alpine'
+import React from 'react'
+
+export const LoadingState = ({ sx }: { sx?: SxProp }): React.JSX.Element => {
+  return (
+    <View
+      sx={{
+        justifyContent: 'center',
+        alignItems: 'center',
+        ...sx
+      }}>
+      <ActivityIndicator size={'large'} />
+    </View>
+  )
+}

packages/core-mobile/app/new/common/components/LoadingState.tsx

@@ -0,0 +1,60 @@
+import { Button, SxProp, Text, View } from '@avalabs/k2-alpine'
+import React from 'react'
+
+export const Placeholder = ({
+  icon,
+  title,
+  description,
+  button,
+  sx
+}: {
+  icon: JSX.Element
+  title: string
+  description?: string
+  button?: {
+    title: string
+    onPress: () => void
+  }
+  sx?: SxProp
+}): React.JSX.Element => {
+  return (
+    <View
+      sx={{
+        justifyContent: 'center',
+        alignItems: 'center',
+        ...sx
+      }}>
+      <View sx={{ maxWidth: 300, alignItems: 'center' }}>
+        {icon}
+        <Text
+          variant="heading6"
+          sx={{ color: '$textPrimary', marginTop: 32, textAlign: 'center' }}>
+          {title}
+        </Text>
+        {description && (
+          <Text
+            variant="body2"
+            sx={{
+              color: '$textSecondary',
+              fontSize: 12,
+              lineHeight: 16,
+              marginTop: 8,
+              textAlign: 'center',
+              marginHorizontal: 55
+            }}>
+            {description}
+          </Text>
+        )}
+        {button && (
+          <Button
+            size="medium"
+            type="secondary"
+            style={{ marginTop: 16 }}
+            onPress={button.onPress}>
+            {button.title}
+          </Button>
+        )}
+      </View>
+    </View>
+  )
+}

packages/core-mobile/app/new/common/components/Placeholder.tsx

@@ -1,17 +1,5 @@
 import { Easing, FadeInRight, FadeInUp } from 'react-native-reanimated'
 
-export enum ActionButtonTitle {
-  Send = 'Send',
-  Swap = 'Swap',
-  Buy = 'Buy',
-  Stake = 'Stake',
-  Bridge = 'Bridge',
-  Connect = 'Connect'
-}
-
-export const LIST_ITEM_HEIGHT = 60
-export const GRID_ITEM_HEIGHT = 170
-
 export const getItemEnteringAnimation = (index: number): FadeInRight =>
   FadeInRight.duration(100)
     .delay(index * 50)
@@ -23,5 +11,3 @@ export const getListItemEnteringAnimation = (index: number): FadeInRight =>
     .delay(index * 50)
     .easing(Easing.bezierFn(0.25, 1, 0.5, 1))
     .springify()
-
-export const SEGMENT_CONTROL_HEIGHT = 40

packages/core-mobile/app/new/features/portfolio/components/assets/useOnPressAnimation.ts renamed to packages/core-mobile/app/new/common/hooks/useOnPressAnimation.ts

@@ -1,8 +1,9 @@
 import React from 'react'
 import Animated, { LinearTransition } from 'react-native-reanimated'
 import { SquareButton, SquareButtonIconType } from '@avalabs/k2-alpine'
-import { useOnPressAnimation } from './assets/useOnPressAnimation'
-import { ActionButtonTitle, getItemEnteringAnimation } from './assets/consts'
+import { getItemEnteringAnimation } from 'common/utils/animations'
+import { useOnPressAnimation } from 'common/hooks/useOnPressAnimation'
+import { ActionButtonTitle } from '../consts'
 
 export const ActionButtons = ({
   buttons