Merge pull request #1233 from alephium/redesign-dw

Basic tokens details modal

apps/desktop-wallet/locales/en-US/translation.json

@@ -527,5 +527,6 @@
   "Unlock a wallet to connect to the dApp.": "Unlock a wallet to connect to the dApp.",
   "Activity": "Activity",
   "Passphrase warning": "Passphrase warning",
-  "Don't use passphrase": "Don't use passphrase"
+  "Don't use passphrase": "Don't use passphrase",
+  "Token balance": "Token balance"
 }

apps/desktop-wallet/src/api/apiDataHooks/utils/useFetchWalletBalancesAlph.ts → apps/desktop-wallet/src/api/apiDataHooks/utils/useFetchWalletBalancesAlphBase.ts

@@ -5,7 +5,7 @@ import { useAppSelector } from '@/hooks/redux'
 import { useUnsortedAddressesHashes } from '@/hooks/useUnsortedAddresses'
 import { selectCurrentlyOnlineNetworkId } from '@/storage/network/networkSelectors'
 
-const useFetchWalletBalancesAlph = <T>(
+const useFetchWalletBalancesAlphBase = <T>(
   combine: (results: UseQueryResult<AddressAlphBalancesQueryFnData>[]) => {
     data: T
     isLoading: boolean
@@ -29,4 +29,4 @@ const useFetchWalletBalancesAlph = <T>(
   }
 }
 
-export default useFetchWalletBalancesAlph
+export default useFetchWalletBalancesAlphBase

apps/desktop-wallet/src/api/apiDataHooks/wallet/useFetchWalletBalances.ts

@@ -1,5 +1,5 @@
 import useMergeAllTokensBalances from '@/api/apiDataHooks/utils/useMergeAllTokensBalances'
-import useFetchWalletBalancesAlphArray from '@/api/apiDataHooks/wallet/useFetchWalletBalancesAlphArray'
+import useFetchWalletBalancesAlph from '@/api/apiDataHooks/wallet/useFetchWalletBalancesAlph'
 import useFetchWalletBalancesTokensArray from '@/api/apiDataHooks/wallet/useFetchWalletBalancesTokensArray'
 
 interface UseFetchWalletBalancesProps {
@@ -9,7 +9,7 @@ interface UseFetchWalletBalancesProps {
 const useFetchWalletBalances = (props?: UseFetchWalletBalancesProps) => {
   const includeAlph = props?.includeAlph ?? true
 
-  const { data: alphBalances, isLoading: isLoadingAlphBalances } = useFetchWalletBalancesAlphArray()
+  const { data: alphBalances, isLoading: isLoadingAlphBalances } = useFetchWalletBalancesAlph()
   const { data: tokensBalances, isLoading: isLoadingTokensBalances } = useFetchWalletBalancesTokensArray()
   const allTokensBalances = useMergeAllTokensBalances({
     includeAlph,

apps/desktop-wallet/src/api/apiDataHooks/wallet/useFetchWalletBalancesAlphArray.ts → apps/desktop-wallet/src/api/apiDataHooks/wallet/useFetchWalletBalancesAlph.ts

@@ -1,7 +1,7 @@
 import { UseQueryResult } from '@tanstack/react-query'
 
 import { combineError, combineIsFetching, combineIsLoading } from '@/api/apiDataHooks/apiDataHooksUtils'
-import useFetchWalletBalancesAlph from '@/api/apiDataHooks/utils/useFetchWalletBalancesAlph'
+import useFetchWalletBalancesAlphBase from '@/api/apiDataHooks/utils/useFetchWalletBalancesAlphBase'
 import { ApiContextProps } from '@/api/apiTypes'
 import { createDataContext } from '@/api/context/createDataContext'
 import { AddressAlphBalancesQueryFnData } from '@/api/queries/addressQueries'
@@ -33,18 +33,16 @@ const combineBalances = (results: UseQueryResult<AddressAlphBalancesQueryFnData>
   ...combineError(results)
 })
 
-const {
-  useData: useFetchWalletBalancesAlphArray,
-  DataContextProvider: UseFetchWalletBalancesAlphArrayContextProvider
-} = createDataContext<AddressAlphBalancesQueryFnData, ApiBalances>({
-  useDataHook: useFetchWalletBalancesAlph,
-  combineFn: combineBalances,
-  defaultValue: {
-    totalBalance: '0',
-    lockedBalance: '0',
-    availableBalance: '0'
-  }
-})
+const { useData: useFetchWalletBalancesAlph, DataContextProvider: UseFetchWalletBalancesAlphArrayContextProvider } =
+  createDataContext<AddressAlphBalancesQueryFnData, ApiBalances>({
+    useDataHook: useFetchWalletBalancesAlphBase,
+    combineFn: combineBalances,
+    defaultValue: {
+      totalBalance: '0',
+      lockedBalance: '0',
+      availableBalance: '0'
+    }
+  })
 
-export default useFetchWalletBalancesAlphArray
+export default useFetchWalletBalancesAlph
 export { UseFetchWalletBalancesAlphArrayContextProvider }

apps/desktop-wallet/src/api/apiDataHooks/wallet/useFetchWalletBalancesAlphByAddress.ts

@@ -2,7 +2,7 @@ import { AddressHash } from '@alephium/shared'
 import { UseQueryResult } from '@tanstack/react-query'
 
 import { combineIsLoading } from '@/api/apiDataHooks/apiDataHooksUtils'
-import useFetchWalletBalancesAlph from '@/api/apiDataHooks/utils/useFetchWalletBalancesAlph'
+import useFetchWalletBalancesAlphBase from '@/api/apiDataHooks/utils/useFetchWalletBalancesAlphBase'
 import { ApiContextProps } from '@/api/apiTypes'
 import { createDataContext } from '@/api/context/createDataContext'
 import { AddressAlphBalancesQueryFnData } from '@/api/queries/addressQueries'
@@ -31,7 +31,7 @@ const {
   useData: useFetchWalletBalancesAlphByAddress,
   DataContextProvider: UseFetchWalletBalancesAlphByAddressContextProvider
 } = createDataContext<AddressAlphBalancesQueryFnData, AddressesAlphBalances['data']>({
-  useDataHook: useFetchWalletBalancesAlph,
+  useDataHook: useFetchWalletBalancesAlphBase,
   combineFn: combineBalancesByAddress,
   defaultValue: {}
 })

apps/desktop-wallet/src/api/apiDataHooks/wallet/useFetchWalletSingleTokenBalances.ts

@@ -4,7 +4,7 @@ import { useMemo } from 'react'
 
 import { SkipProp } from '@/api/apiDataHooks/apiDataHooksTypes'
 import { combineIsLoading } from '@/api/apiDataHooks/apiDataHooksUtils'
-import useFetchWalletBalancesAlphArray from '@/api/apiDataHooks/wallet/useFetchWalletBalancesAlphArray'
+import useFetchWalletBalancesAlph from '@/api/apiDataHooks/wallet/useFetchWalletBalancesAlph'
 import { addressTokensBalancesQuery, AddressTokensBalancesQueryFnData } from '@/api/queries/addressQueries'
 import { useAppSelector } from '@/hooks/redux'
 import { useUnsortedAddressesHashes } from '@/hooks/useUnsortedAddresses'
@@ -21,7 +21,7 @@ const useFetchWalletSingleTokenBalances = ({ tokenId, skip }: UseFetchWalletSing
 
   const isALPH = tokenId === ALPH.id
 
-  const { data: alphBalances, isLoading: isLoadingAlphBalances } = useFetchWalletBalancesAlphArray()
+  const { data: alphBalances, isLoading: isLoadingAlphBalances } = useFetchWalletBalancesAlph()
 
   const { data: tokenBalances, isLoading: isLoadingTokenBalances } = useQueries({
     queries:

apps/desktop-wallet/src/api/apiDataHooks/wallet/useFetchWalletTokensByType.ts

@@ -1,14 +1,14 @@
 import useFetchTokensSeparatedByType from '@/api/apiDataHooks/utils/useFetchTokensSeparatedByType'
 import useMergeAllTokensBalances from '@/api/apiDataHooks/utils/useMergeAllTokensBalances'
-import useFetchWalletBalancesAlphArray from '@/api/apiDataHooks/wallet/useFetchWalletBalancesAlphArray'
+import useFetchWalletBalancesAlph from '@/api/apiDataHooks/wallet/useFetchWalletBalancesAlph'
 import useFetchWalletBalancesTokensArray from '@/api/apiDataHooks/wallet/useFetchWalletBalancesTokensArray'
 
 interface UseFetchWalletTokensByType {
   includeAlph: boolean
 }
 
 const useFetchWalletTokensByType = ({ includeAlph }: UseFetchWalletTokensByType) => {
-  const { data: alphBalances, isLoading: isLoadingAlphBalances } = useFetchWalletBalancesAlphArray()
+  const { data: alphBalances, isLoading: isLoadingAlphBalances } = useFetchWalletBalancesAlph()
   const { data: tokensBalances, isLoading: isLoadingTokensBalances } = useFetchWalletBalancesTokensArray()
   const allTokensBalances = useMergeAllTokensBalances({
     includeAlph,

apps/desktop-wallet/src/api/apiDataHooks/wallet/useFetchWalletWorth.ts

@@ -1,7 +1,7 @@
 import useFetchListedFtsWorth from '@/api/apiDataHooks/utils/useFetchListedFtsWorth'
 import useFetchTokensSeparatedByListing from '@/api/apiDataHooks/utils/useFetchTokensSeparatedByListing'
 import useMergeAllTokensBalances from '@/api/apiDataHooks/utils/useMergeAllTokensBalances'
-import useFetchWalletBalancesAlphArray from '@/api/apiDataHooks/wallet/useFetchWalletBalancesAlphArray'
+import useFetchWalletBalancesAlph from '@/api/apiDataHooks/wallet/useFetchWalletBalancesAlph'
 import useFetchWalletBalancesTokensArray from '@/api/apiDataHooks/wallet/useFetchWalletBalancesTokensArray'
 
 const useFetchWalletWorth = () => {
@@ -10,7 +10,7 @@ const useFetchWalletWorth = () => {
     isLoading: isLoadingAlphBalances,
     isFetching: isFetchingAlphBalances,
     error: errorAlphBalances
-  } = useFetchWalletBalancesAlphArray()
+  } = useFetchWalletBalancesAlph()
   const {
     data: tokensBalances,
     isLoading: isLoadingTokensBalances,

apps/desktop-wallet/src/api/apiDataHooks/wallet/useFetchWalletWorthAlph.ts

@@ -3,10 +3,10 @@ import { ALPH } from '@alephium/token-list'
 import { useMemo } from 'react'
 
 import { useFetchTokenPrice } from '@/api/apiDataHooks/market/useFetchTokenPrices'
-import useFetchWalletBalancesAlphArray from '@/api/apiDataHooks/wallet/useFetchWalletBalancesAlphArray'
+import useFetchWalletBalancesAlph from '@/api/apiDataHooks/wallet/useFetchWalletBalancesAlph'
 
 const useFetchWalletWorthAlph = () => {
-  const { data: alphBalances, isLoading: isLoadingAlphBalances } = useFetchWalletBalancesAlphArray()
+  const { data: alphBalances, isLoading: isLoadingAlphBalances } = useFetchWalletBalancesAlph()
   const { data: alphPrice, isLoading: isLoadingAlphPrice } = useFetchTokenPrice(ALPH.symbol)
 
   return {

apps/desktop-wallet/src/api/context/apiContext.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
 
-import { UseFetchWalletBalancesAlphArrayContextProvider } from '@/api/apiDataHooks/wallet/useFetchWalletBalancesAlphArray'
+import { UseFetchWalletBalancesAlphArrayContextProvider } from '@/api/apiDataHooks/wallet/useFetchWalletBalancesAlph'
 import { UseFetchWalletBalancesAlphByAddressContextProvider } from '@/api/apiDataHooks/wallet/useFetchWalletBalancesAlphByAddress'
 import { UseFetchWalletBalancesTokensArrayContextProvider } from '@/api/apiDataHooks/wallet/useFetchWalletBalancesTokensArray'
 import { UseFetchWalletBalancesTokensByAddressContextProvider } from '@/api/apiDataHooks/wallet/useFetchWalletBalancesTokensByAddress'

apps/desktop-wallet/src/components/Amount.tsx

@@ -21,14 +21,14 @@ interface AmountBaseProps {
   useTinyAmountShorthand?: boolean
 }
 
-interface TokenAmountProps extends AmountBaseProps {
+export interface TokenAmountProps extends AmountBaseProps {
   tokenId: TokenId
   value: bigint
   fullPrecision?: boolean
   nbOfDecimalsToShow?: number
 }
 
-interface FiatAmountProps extends AmountBaseProps {
+export interface FiatAmountProps extends AmountBaseProps {
   isFiat: true
   value: number
 }

apps/desktop-wallet/src/components/LabeledWorthOverview.tsx

@@ -16,34 +16,27 @@ You should have received a copy of the GNU Lesser General Public License
 along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { useTranslation } from 'react-i18next'
+import { ReactNode } from 'react'
 import styled from 'styled-components'
 
 import NetworkSwitch from '@/components/NetworkSwitch'
-import AddressWorth from '@/modals/AddressDetailsModal/AddressWorth'
-import WalletWorth from '@/pages/UnlockedWallet/OverviewPage/WalletWorth'
 
 interface LabeledWorthOverviewProps {
-  addressHash?: string
-  isLoading?: boolean
+  label: string
+  children: ReactNode
   className?: string
 }
 
-const LabeledWorthOverview = ({ className, addressHash }: LabeledWorthOverviewProps) => {
-  const { t } = useTranslation()
+const LabeledWorthOverview = ({ label, children, className }: LabeledWorthOverviewProps) => (
+  <LabeledWorthOverviewStyled className={className}>
+    <Surtitle>
+      <Label>{label}</Label>
+      <NetworkSwitch />
+    </Surtitle>
 
-  const singleAddress = !!addressHash
-
-  return (
-    <LabeledWorthOverviewStyled className={className}>
-      <Surtitle>
-        <Worth>{t(singleAddress ? 'Address worth' : 'Wallet worth')}</Worth>
-        <NetworkSwitch />
-      </Surtitle>
-      {singleAddress ? <AddressWorth addressHash={addressHash} /> : <WalletWorth />}
-    </LabeledWorthOverviewStyled>
-  )
-}
+    {children}
+  </LabeledWorthOverviewStyled>
+)
 
 export default LabeledWorthOverview
 
@@ -63,7 +56,7 @@ const Surtitle = styled.div`
   height: 20px;
 `
 
-const Worth = styled.span`
+const Label = styled.span`
   flex: 1;
   white-space: nowrap;
   color: ${({ theme }) => theme.font.secondary};

apps/desktop-wallet/src/components/WorthOverview.tsx

@@ -4,12 +4,11 @@ import Amount, { AmountLoaderProps } from '@/components/Amount'
 
 interface WorthOverviewProps extends AmountLoaderProps {
   worth: number
-  overrideWorth?: number
   className?: string
 }
 
-const WorthOverview = ({ overrideWorth, worth, ...props }: WorthOverviewProps) => (
-  <WorthOverviewStyled value={overrideWorth ?? worth} isFiat loaderHeight={32} tabIndex={0} semiBold {...props} />
+const WorthOverview = ({ worth, ...props }: WorthOverviewProps) => (
+  <WorthOverviewStyled value={worth} isFiat loaderHeight={32} tabIndex={0} semiBold {...props} />
 )
 
 export default WorthOverview

apps/desktop-wallet/src/components/amounts/FTAmounts.tsx

@@ -0,0 +1,34 @@
+import { useTranslation } from 'react-i18next'
+import styled, { useTheme } from 'styled-components'
+
+import useFetchWalletSingleTokenBalances from '@/api/apiDataHooks/wallet/useFetchWalletSingleTokenBalances'
+import Amount, { TokenAmountProps } from '@/components/Amount'
+
+const FTAmounts = (props: Omit<TokenAmountProps, 'value'>) => {
+  const { data: balances, isLoading } = useFetchWalletSingleTokenBalances({ tokenId: props.tokenId })
+  const { t } = useTranslation()
+  const theme = useTheme()
+
+  const totalBalance = BigInt(balances.totalBalance)
+  const availableBalance = BigInt(balances.availableBalance)
+
+  return (
+    <>
+      {totalBalance && <Amount value={totalBalance} semiBold isLoading={isLoading} {...props} />}
+
+      {availableBalance !== totalBalance && availableBalance !== undefined && (
+        <AmountSubtitle>
+          {`${t('Available')}: `}
+          <Amount tokenId={props.tokenId} value={availableBalance} color={theme.font.tertiary} overrideSuffixColor />
+        </AmountSubtitle>
+      )}
+    </>
+  )
+}
+
+export default FTAmounts
+
+const AmountSubtitle = styled.div`
+  color: ${({ theme }) => theme.font.tertiary};
+  font-size: 10px;
+`

apps/desktop-wallet/src/components/amounts/FTWorthAmount.tsx

@@ -0,0 +1,27 @@
+import { calculateAmountWorth } from '@alephium/shared'
+import { isNumber } from 'lodash'
+
+import { useFetchTokenPrice } from '@/api/apiDataHooks/market/useFetchTokenPrices'
+import Amount, { AmountLoaderProps, FiatAmountProps } from '@/components/Amount'
+
+type FTWorthAmountProps = Omit<FiatAmountProps, 'value' | 'isFiat'> &
+  AmountLoaderProps & {
+    symbol: string
+    decimals: number
+    totalBalance?: bigint
+  }
+
+const FTWorthAmount = ({ symbol, totalBalance, decimals, ...props }: FTWorthAmountProps) => {
+  const { data: tokenPrice } = useFetchTokenPrice(symbol)
+
+  const worth =
+    totalBalance !== undefined && isNumber(tokenPrice)
+      ? calculateAmountWorth(totalBalance, tokenPrice, decimals)
+      : undefined
+
+  if (worth === undefined) return '-'
+
+  return <Amount value={worth} isFiat semiBold {...props} />
+}
+
+export default FTWorthAmount

apps/desktop-wallet/src/features/assetsLists/tokenBalanceRow/AddressTokenBalancesRow.tsx

@@ -1,27 +1,28 @@
 import styled from 'styled-components'
 
-import { TableCell, TableRow } from '@/components/Table'
+import { TableCell } from '@/components/Table'
 import { FTAddressAmountCell } from '@/features/assetsLists/tokenBalanceRow/FTAmountCells'
 import FTPriceCell from '@/features/assetsLists/tokenBalanceRow/FTPriceCell'
 import FTWorth from '@/features/assetsLists/tokenBalanceRow/FTWorthCell'
 import { FTNameCell, NSTNameCell } from '@/features/assetsLists/tokenBalanceRow/NameCells'
+import TokenBalancesRow from '@/features/assetsLists/tokenBalanceRow/TokenBalancesRow'
 import TokenLogo from '@/features/assetsLists/tokenBalanceRow/TokenLogo'
 import { AddressTokenBalancesRowProps } from '@/features/assetsLists/tokenBalanceRow/types'
 
 export const AddressFTBalancesRow = ({ tokenId, addressHash }: AddressTokenBalancesRowProps) => (
-  <TableRow key={tokenId} role="row">
+  <TokenBalancesRow tokenId={tokenId}>
     <TokenRow>
       <TokenLogo tokenId={tokenId} />
       <FTNameCell tokenId={tokenId} />
       <FTPriceCell tokenId={tokenId} />
       <FTAddressAmountCell tokenId={tokenId} addressHash={addressHash} />
       <FTWorth tokenId={tokenId} />
     </TokenRow>
-  </TableRow>
+  </TokenBalancesRow>
 )
 
 export const AddressNSTBalancesRow = ({ tokenId, addressHash }: AddressTokenBalancesRowProps) => (
-  <TableRow key={tokenId} role="row">
+  <TokenBalancesRow tokenId={tokenId}>
     <TableCell fixedWidth={50}>
       <TokenLogo tokenId={tokenId} />
     </TableCell>
@@ -31,7 +32,7 @@ export const AddressNSTBalancesRow = ({ tokenId, addressHash }: AddressTokenBala
       <FTAddressAmountCell addressHash={addressHash} tokenId={tokenId} />
     </TableCell>
     <TableCell align="right">-</TableCell>
-  </TableRow>
+  </TokenBalancesRow>
 )
 
 const TokenRow = styled.div`