WIP, tx history broken

package.json

@@ -39,8 +39,8 @@
     "@coral-xyz/anchor": "0.26.0",
     "@gorhom/bottom-sheet": "4.4.6",
     "@gorhom/portal": "1.0.14",
-    "@helium/account-fetch-cache": "^0.2.16",
-    "@helium/account-fetch-cache-hooks": "^0.2.16",
+    "@helium/account-fetch-cache": "file:.yalc/@helium/account-fetch-cache",
+    "@helium/account-fetch-cache-hooks": "file:.yalc/@helium/account-fetch-cache-hooks",
     "@helium/address": "4.6.2",
     "@helium/circuit-breaker-sdk": "^0.2.16",
     "@helium/crypto-react-native": "4.8.0",
@@ -50,7 +50,7 @@
     "@helium/distributor-oracle": "^0.2.16",
     "@helium/fanout-sdk": "^0.2.16",
     "@helium/helium-entity-manager-sdk": "^0.2.16",
-    "@helium/helium-react-hooks": "^0.2.16",
+    "@helium/helium-react-hooks": "file:.yalc/@helium/helium-react-hooks",
     "@helium/helium-sub-daos-sdk": "0.2.16",
     "@helium/http": "4.7.5",
     "@helium/idls": "^0.2.16",

src/components/HNTKeyboard.tsx

@@ -186,7 +186,7 @@ const HNTKeyboardSelector = forwardRef(
       if (!valueAsBalance || !networkFee) return
 
       const currentAmount = getNextPayments()
-        .filter((_v, index) => index !== paymentIndex || 0) // Remove the payment being updated
+        .filter((_v, index) => index !== (paymentIndex || 0)) // Remove the payment being updated
         .reduce((prev, current) => {
           if (!current.amount) {
             return prev

src/components/TokenSelector.tsx

@@ -5,7 +5,6 @@ import {
   BottomSheetModal,
   BottomSheetModalProvider,
 } from '@gorhom/bottom-sheet'
-import { Ticker } from '@helium/currency'
 import useBackHandler from '@hooks/useBackHandler'
 import { useMetaplexMetadata } from '@hooks/useMetaplexMetadata'
 import { BoxProps } from '@shopify/restyle'
@@ -91,21 +90,22 @@ const TokenSelector = forwardRef(
     )
 
     const handleTokenPress = useCallback(
-      (token: string) => () => {
+      (token: PublicKey) => {
         bottomSheetModalRef.current?.dismiss()
-        onTokenSelected(token as Ticker)
+        onTokenSelected(token)
       },
       [onTokenSelected],
     )
 
     const keyExtractor = useCallback((item: TokenListItem) => {
-      return item.mint
+      return item.mint.toBase58()
     }, [])
 
     const renderFlatlistItem = useCallback(
       ({ item }: { item: TokenListItem; index: number }) => {
         return (
           <ProvidedListItem
+            key={item.mint.toBase58()}
             selected={item.selected}
             onPress={() => handleTokenPress(item.mint)}
             mint={item.mint}

src/features/account/TransactionDetail.tsx

@@ -1,4 +1,16 @@
 /* eslint-disable react/no-array-index-key */
+import BlurBox from '@components/BlurBox'
+import HandleBasic from '@components/HandleBasic'
+import SafeAreaBox from '@components/SafeAreaBox'
+import {
+  BottomSheetBackdrop,
+  BottomSheetModal,
+  BottomSheetModalProvider,
+  BottomSheetScrollView,
+} from '@gorhom/bottom-sheet'
+import useBackHandler from '@hooks/useBackHandler'
+import animalName from 'angry-purple-tiger'
+import { groupBy } from 'lodash'
 import React, {
   createContext,
   FC,
@@ -9,27 +21,14 @@ import React, {
   useRef,
   useState,
 } from 'react'
-import {
-  BottomSheetBackdrop,
-  BottomSheetModal,
-  BottomSheetModalProvider,
-  BottomSheetScrollView,
-} from '@gorhom/bottom-sheet'
-import { Edge } from 'react-native-safe-area-context'
 import { useTranslation } from 'react-i18next'
-import { groupBy } from 'lodash'
-import animalName from 'angry-purple-tiger'
 import { LayoutChangeEvent } from 'react-native'
-import SafeAreaBox from '@components/SafeAreaBox'
-import HandleBasic from '@components/HandleBasic'
-import useBackHandler from '@hooks/useBackHandler'
-import BlurBox from '@components/BlurBox'
-import TransactionLineItem from './TransactionLineItem'
-import { useTxnDetails } from './useTxn'
-import { useBalance } from '../../utils/Balance'
+import { Edge } from 'react-native-safe-area-context'
 import { useCreateExplorerUrl } from '../../constants/urls'
-import { ellipsizeAddress } from '../../utils/accountUtils'
 import { Activity } from '../../types/activity'
+import { ellipsizeAddress } from '../../utils/accountUtils'
+import TransactionLineItem from './TransactionLineItem'
+import { useTxnDetails } from './useTxn'
 
 const initialState = {
   show: () => undefined,
@@ -50,7 +49,6 @@ const TransactionDetailSelector = ({ children }: { children: ReactNode }) => {
   const [contentHeight, setContentHeight] = useState(0)
   const { handleDismiss, setIsShowing } = useBackHandler(bottomSheetModalRef)
 
-  const { intToBalance } = useBalance()
   const { item: txn } = detailData || {}
 
   const {
@@ -131,7 +129,6 @@ const TransactionDetailSelector = ({ children }: { children: ReactNode }) => {
     return Object.keys(grouped).map((key) => {
       const group = grouped[key]
       const totalAmount = group.reduce((sum, { amount: amt }) => sum + amt, 0)
-      const balance = intToBalance({ intValue: totalAmount })
       const typeName = t(`transactions.rewardTypes.${group[0].type}`)
       let name = ''
       if (group[0].gateway) {
@@ -141,11 +138,11 @@ const TransactionDetailSelector = ({ children }: { children: ReactNode }) => {
       }
       return {
         name,
-        amount: balance,
+        amount: totalAmount,
         type: typeName,
       }
     })
-  }, [intToBalance, t, txn])
+  }, [t, txn])
 
   const handleContentLayout = useCallback((e: LayoutChangeEvent) => {
     setContentHeight(e.nativeEvent.layout.height)

src/features/account/TxnListItem.tsx

@@ -1,10 +1,10 @@
-import React, { memo, useCallback, useMemo } from 'react'
 import Pending from '@assets/images/pending.svg'
 import Box from '@components/Box'
 import Text from '@components/Text'
 import TouchableOpacityBox from '@components/TouchableOpacityBox'
-import useTxn from './useTxn'
+import React, { memo, useCallback, useMemo } from 'react'
 import { Activity } from '../../types/activity'
+import useTxn from './useTxn'
 
 type Props = {
   item: Activity