handle error message

Author: onghwan

packages/k2-alpine/src/assets/icons/alert_error.svg

@@ -2,16 +2,19 @@ import React from 'react'
 import { LayoutChangeEvent } from 'react-native'
 import { Text, View } from '../Primitives'
 import { PriceChangeIndicator } from '../PriceChangeIndicator/PriceChangeIndicator'
+import { Icons } from '../../theme/tokens/Icons'
 
 export const BalanceHeader = ({
   accountName,
   formattedBalance,
   currency,
+  errorMessage,
   onLayout
 }: {
   accountName: string
   formattedBalance: string
   currency: string
+  errorMessage?: string
   onLayout?: (event: LayoutChangeEvent) => void
 }): JSX.Element => {
   return (
@@ -32,12 +35,23 @@ export const BalanceHeader = ({
           </Text>
         </View>
       </View>
-      <PriceChangeIndicator
-        formattedPrice="$12.7"
-        status="up"
-        formattedPercent="3.7%"
-        textVariant="buttonMedium"
-      />
+      {errorMessage ? (
+        <View sx={{ gap: 4, alignItems: 'center', flexDirection: 'row' }}>
+          <Icons.Alert.Error width={16} height={16} color={ERROR_COLOR} />
+          <Text variant="buttonMedium" sx={{ color: ERROR_COLOR }}>
+            {errorMessage}
+          </Text>
+        </View>
+      ) : (
+        <PriceChangeIndicator
+          formattedPrice="$12.7"
+          status="up"
+          formattedPercent="3.7%"
+          textVariant="buttonMedium"
+        />
+      )}
     </View>
   )
 }
+
+const ERROR_COLOR = '#F5643B'

packages/k2-alpine/src/components/Header/BalanceHeader.tsx

@@ -20,6 +20,12 @@ export const All = (): JSX.Element => {
           formattedBalance="$7,377.37"
           currency="USD"
         />
+        <BalanceHeader
+          accountName="Account 1"
+          formattedBalance="$7,377.37"
+          errorMessage="Unable to load all balances"
+          currency="USD"
+        />
         <NavigationTitleHeader title="Account 1" subtitle="$51.72 USD" />
       </View>
     </ScrollView>

packages/k2-alpine/src/components/Header/Header.stories.tsx

@@ -32,6 +32,7 @@ import IconTrendingArrowUp from '../../assets/icons/trending_arrow_up.svg'
 import IconTrendingArrowDown from '../../assets/icons/trending_arrow_down.svg'
 import IconQRCode2 from '../../assets/icons/qr_code_2.svg'
 import IconNotifications from '../../assets/icons/notifications.svg'
+import IconAlertError from '../../assets/icons/alert_error.svg'
 
 export const Icons = {
   Action: {
@@ -40,7 +41,8 @@ export const Icons = {
     Clear: IconClear
   },
   Alert: {
-    IconErrorOutline: IconErrorOutline
+    IconErrorOutline: IconErrorOutline,
+    Error: IconAlertError
   },
   Device: {
     IconGPPMaybe: IconGPPMaybe