Add lack of sol warning, make collapsable swap link (#506)

* Add lack of sol warning, make collapsable swap link

* Change text

src/features/account/AccountTokenScreen.tsx

@@ -13,12 +13,15 @@ import BottomSheet, {
   BottomSheetFlatList,
   WINDOW_HEIGHT,
 } from '@gorhom/bottom-sheet'
+import { useOwnedAmount } from '@helium/helium-react-hooks'
 import { DC_MINT, HNT_MINT, IOT_MINT, MOBILE_MINT } from '@helium/spl-utils'
+import { useCurrentWallet } from '@hooks/useCurrentWallet'
 import useLayoutHeight from '@hooks/useLayoutHeight'
 import { useMetaplexMetadata } from '@hooks/useMetaplexMetadata'
 import { usePublicKey } from '@hooks/usePublicKey'
 import { RouteProp, useRoute } from '@react-navigation/native'
 import { NATIVE_MINT } from '@solana/spl-token'
+import { LAMPORTS_PER_SOL } from '@solana/web3.js'
 import globalStyles from '@theme/globalStyles'
 import { useColors } from '@theme/themeHooks'
 import React, { useCallback, useMemo, useRef, useState } from 'react'
@@ -135,6 +138,8 @@ const AccountTokenScreen = () => {
     topHeaderHeight,
     topHeaderYPos,
   ])
+  const wallet = useCurrentWallet()
+  const { amount } = useOwnedAmount(wallet, mint)
 
   const canShowList = useMemo(() => snapPoints?.length === 2, [snapPoints])
 
@@ -490,7 +495,16 @@ const AccountTokenScreen = () => {
               />
             </Box>
           </Animated.View>
-          <Box height={topHeaderHeight} />
+          {mint.equals(NATIVE_MINT) &&
+          (amount || 0) < 0.02 * LAMPORTS_PER_SOL ? (
+            <Box mb="l" backgroundColor="warning" borderRadius="s" p="s">
+              <Text variant="body2" color="black700">
+                {t('accountsScreen.solWarning')}
+              </Text>
+            </Box>
+          ) : (
+            <Box height={topHeaderHeight} />
+          )}
         </Box>
       </BackScreen>
       {!!canShowList && (

src/features/account/AccountsScreen.tsx

@@ -275,7 +275,7 @@ const AccountsScreen = () => {
         <Box flex={1}>
           <AccountTokenCurrencyBalance ticker="ALL" variant="h2Medium" />
         </Box>
-        <AccountActionBar mint={HNT_MINT} maxCompact />
+        <AccountActionBar mint={HNT_MINT} maxCompact hasSwaps />
       </ReAnimatedBox>
     )
   }, [handleTopHeaderLayout, headerAnimatedStyle])

src/features/account/TokenListItem.tsx

@@ -1,4 +1,5 @@
 import Arrow from '@assets/images/listItemRight.svg'
+import InfoWarning from '@assets/images/warning.svg'
 import Box from '@components/Box'
 import FadeInOut from '@components/FadeInOut'
 import Text from '@components/Text'
@@ -9,7 +10,8 @@ import { useCurrentWallet } from '@hooks/useCurrentWallet'
 import useHaptic from '@hooks/useHaptic'
 import { useMetaplexMetadata } from '@hooks/useMetaplexMetadata'
 import { useNavigation } from '@react-navigation/native'
-import { PublicKey } from '@solana/web3.js'
+import { NATIVE_MINT } from '@solana/spl-token'
+import { LAMPORTS_PER_SOL, PublicKey } from '@solana/web3.js'
 import { humanReadable } from '@utils/solanaUtils'
 import BN from 'bn.js'
 import React, { useCallback, useMemo } from 'react'
@@ -105,6 +107,11 @@ const TokenListItem = ({ mint }: Props) => {
             />
           )}
         </Box>
+        {mint.equals(NATIVE_MINT) && (amount || 0) < 0.02 * LAMPORTS_PER_SOL && (
+          <Box mr="m">
+            <InfoWarning width={28} height={28} />
+          </Box>
+        )}
         <Arrow />
       </TouchableContainer>
     </FadeInOut>

src/locales/en.ts

@@ -169,6 +169,8 @@ export default {
       delegate: 'Delegated',
       mint: 'Received',
     },
+    solWarning:
+      'Your balance may not have enough SOL to cover all transactions. Solana wallets require a minimum of 0.00089088 SOL. We recommend keeping greater than 0.02 sol in your wallet for the best experience',
     hideFilters: 'Hide Filters',
     myTransactions: 'My Transactions',
     showFilters: 'Show Filters',

src/theme/theme.ts

@@ -149,6 +149,7 @@ const palette = {
   offWhite: '#F9FAFC',
 
   orange500: '#FFB156',
+  warning: '#FFE5C7',
 
   persianRose: '#FF2DB7',