packages/synapse-interface/slices/portfolio/hooks.ts
import { useCallback } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { createAsyncThunk } from '@reduxjs/toolkit'
import { getAccount } from '@wagmi/core'
import { AppDispatch, RootState } from '@/store/store'
import { FetchState, typeSearchInput, resetSearchState } from './actions'
import { useAppDispatch, useAppSelector } from '@/store/hooks'
import {
fetchPortfolioBalances,
NetworkTokenBalances,
} from '@/utils/actions/fetchPortfolioBalances'
import { initialState } from './reducer'
import { wagmiConfig } from '@/wagmiConfig'
export const usePortfolioState = (): RootState['portfolio'] => {
return useAppSelector((state) => state.portfolio)
}
export const usePortfolioBalances = (): NetworkTokenBalances => {
return useAppSelector((state) => state.portfolio.balances)
}
export const usePortfolioActionHandlers = (): {
onSearchInput: (searchInput: string) => void
clearSearchInput: () => void
clearSearchResults: () => void
} => {
const dispatch = useAppDispatch()
const onSearchInput = useCallback(
(searchInput: string) => {
dispatch(typeSearchInput({ searchInput }))
},
[dispatch]
)
const clearSearchInput = useCallback(() => {
dispatch(typeSearchInput({ searchInput: initialState.searchInput }))
}, [dispatch])
const clearSearchResults = useCallback(() => {
dispatch(resetSearchState())
}, [dispatch])
return {
onSearchInput,
clearSearchInput,
clearSearchResults,
}
}
export const fetchAndStorePortfolioBalances = createAsyncThunk(
'portfolio/fetchAndStorePortfolioBalances',
async (address: string) => {
const portfolioData = await fetchPortfolioBalances(address)
return portfolioData
}
)
export const fetchAndStoreSearchInputPortfolioBalances = createAsyncThunk(
'portfolio/fetchAndStoreSearchInputPortfolioBalances',
async (address: string) => {
const portfolioData = await fetchPortfolioBalances(address)
return { ...portfolioData, address }
}
)
export const fetchAndStoreSingleNetworkPortfolioBalances = createAsyncThunk(
'portfolio/fetchAndStoreSingleNetworkPortfolioBalances',
async ({ address, chainId }: { address: string; chainId: number }) => {
const portfolioData = await fetchPortfolioBalances(address, chainId)
return portfolioData
}
)
export const useFetchPortfolioBalances = (): {
balances: NetworkTokenBalances
fetchPortfolioBalances: () => void
status: FetchState
error: string
} => {
const dispatch: AppDispatch = useDispatch()
const { address } = getAccount(wagmiConfig)
const { balances, status, error } = useSelector(
(state: RootState) => state.portfolio
)
const fetch = () => {
if (address) {
dispatch(fetchAndStorePortfolioBalances(address))
}
}
return { balances, fetchPortfolioBalances: fetch, status, error }
}