Add empty placeholder in addresses screen

alephium · Dec 19, 2024 · 389c5b3 · 389c5b3
1 parent 092128c
commit 389c5b3
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/apps/mobile-wallet/locales/en-US/translation.json b/apps/mobile-wallet/locales/en-US/translation.json
@@ -397,5 +397,6 @@
   "I'll do it later": "I'll do it later",
   "Save fund password": "Save fund password",
   "Decrypt": "Decrypt",
-  "Warning": "Warning"
+  "Warning": "Warning",
+  "No assets there, yet.": "No assets there, yet."
 }
diff --git a/apps/mobile-wallet/src/components/AddressCard.tsx b/apps/mobile-wallet/src/components/AddressCard.tsx
@@ -70,8 +70,6 @@ const AddressCard = ({ style, addressHash, onSettingsPress }: AddressCardProps)
   const isDark = colord(bgColor).isDark()
   const textColor = isDark ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.8)'
   const outterBorderColor = colord(bgColor).lighten(0.3).toHex()
-  const innerBorderColor = isDark ? colord(bgColor).lighten(0.1).toHex() : colord(bgColor).darken(0.05).toHex()
-  const buttonsBackground = isDark ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.1)'
 
   const handleSendPress = () => {
     sendAnalytics({ event: 'Address card: Selected address to send funds from' })

diff --git a/apps/mobile-wallet/src/components/AddressesTokensList.tsx b/apps/mobile-wallet/src/components/AddressesTokensList.tsx
@@ -19,10 +19,13 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 import { AddressHash, Asset } from '@alephium/shared'
 import { Skeleton } from 'moti/skeleton'
 import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { ActivityIndicator, StyleProp, ViewStyle } from 'react-native'
 import Animated, { CurvedTransition } from 'react-native-reanimated'
 import styled, { useTheme } from 'styled-components/native'
 
+import AppText from '~/components/AppText'
+import EmptyPlaceholder from '~/components/EmptyPlaceholder'
 import UnknownTokensListItem, { UnknownTokensEntry } from '~/components/UnknownTokensListItem'
 import { useAppSelector } from '~/hooks/redux'
 import { makeSelectAddressesCheckedUnknownTokens, makeSelectAddressesKnownFungibleTokens } from '~/store/addressesSlice'
@@ -52,6 +55,7 @@ const AddressesTokensList = ({ addressHash, isRefreshing, style }: AddressesToke
   const isLoadingVerified = useAppSelector((s) => s.fungibleTokens.loadingVerified)
   const isLoadingTokenTypes = useAppSelector((s) => s.fungibleTokens.loadingTokenTypes)
   const theme = useTheme()
+  const { t } = useTranslation()
 
   const showTokensSkeleton = isLoadingTokenBalances || isLoadingUnverified || isLoadingVerified || isLoadingTokenTypes
 
@@ -74,8 +78,6 @@ const AddressesTokensList = ({ addressHash, isRefreshing, style }: AddressesToke
     setTokenRows(entries)
   }, [addressHash, showTokensSkeleton, knownFungibleTokens, unknownTokens.length])
 
-  if (tokenRows.length === 0 && !isRefreshing) return null
-
   return (
     <ListContainer style={style} layout={CurvedTransition}>
       {tokenRows.map((entry, index) =>
@@ -94,6 +96,12 @@ const AddressesTokensList = ({ addressHash, isRefreshing, style }: AddressesToke
           </LoadingRow>
         )
       )}
+      {!isRefreshing && tokenRows.length === 0 && (
+        <EmptyPlaceholder>
+          <AppText size={28}>👀</AppText>
+          <AppText>{t('No assets there, yet.')}</AppText>
+        </EmptyPlaceholder>
+      )}
       {isRefreshing && (
         <>
           <LoadingOverlay />