Add shortcut buttons and address list to Token Details Modal

apps/desktop-wallet/electron/electron-env.ts

@@ -33,7 +33,7 @@ declare global {
         getSystemRegion: () => Promise<string>
         setProxySettings: (proxySettings: ProxySettings) => Promise<void>
         openOnRampServiceWindow: ({ url, targetLocation }: { url: string; targetLocation: string }) => void
-        onOnRampTargetLocationReached: (callback: () => void) => () => Electron.IpcRenderer
+        onOnRampTargetLocationReached: (callback: () => void) => () => void
         restart: () => void
       }
       window: {

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

@@ -9,7 +9,6 @@
   "Address NFTs": "Address NFTs",
   "Address options": "Address options",
   "Address tokens": "Address tokens",
-  "Address transactions": "Address transactions",
   "Addresses": "Addresses",
   "Addresses & contacts": "Addresses & contacts",
   "Advanced feature": "Advanced feature",
@@ -495,7 +494,7 @@
   "You can now complete your purchase in the dedicated window!": "You can now complete your purchase in the dedicated window!",
   "Token": "Token",
   "Price": "Price",
-  "Value": "Value",
+  "Worth": "Worth",
   "Invalid mnemonic. Please double check your words.": "Invalid mnemonic. Please double check your words.",
   "Incorrect word. Please try again.": "Incorrect word. Please try again.",
   "Select the correct word for word number <1>{{ number }} of 24</1>.": "Select the correct word for word number <1>{{ number }} of 24</1>.",
@@ -533,5 +532,6 @@
   "nb_of_hidden_assets_one": "{{ count }} hidden asset",
   "nb_of_hidden_assets_other": "{{ count }} hidden assets",
   "Close hidden assets list": "Close hidden assets list",
-  "Unhide asset": "Unhide asset"
+  "Unhide asset": "Unhide asset",
+  "No transactions before {{ date }}": "No transactions before {{ date }}"
 }

apps/desktop-wallet/package.json

@@ -131,6 +131,7 @@
     "react-confetti": "^6.0.1",
     "react-detect-click-outside": "^1.1.2",
     "react-dom": "^18.2.0",
+    "react-freeze": "^1.0.4",
     "react-hook-form": "^7.42.1",
     "react-i18next": "^13.2.1",
     "react-idle-timer": "^5.7.2",

apps/desktop-wallet/src/App.tsx

@@ -39,7 +39,6 @@ import { migrateGeneralSettings, migrateNetworkSettings, migrateWalletData } fro
 
 const App = memo(() => {
   const theme = useAppSelector((s) => s.global.theme)
-  const { isWalletUnlocked } = useWalletLock()
 
   useAutoLock()
 
@@ -61,14 +60,7 @@ const App = memo(() => {
       <WalletConnectContextProvider>
         <AppContainer>
           <CenteredSection>
-            {!isWalletUnlocked && (
-              <AnimatedBackground
-                anchorPosition="bottom"
-                opacity={theme === 'dark' ? 0.6 : 0.8}
-                verticalOffset={-100}
-                hiddenOverflow
-              />
-            )}
+            <LoginAnimatedBackground />
             <Router />
           </CenteredSection>
         </AppContainer>
@@ -253,3 +245,19 @@ const AppContainerStyled = styled.div<{ showDevIndication: boolean }>`
       border: 5px solid ${theme.global.valid};
     `};
 `
+
+const LoginAnimatedBackground = () => {
+  const theme = useAppSelector((s) => s.global.theme)
+  const { isWalletUnlocked } = useWalletLock()
+
+  if (isWalletUnlocked) return null
+
+  return (
+    <AnimatedBackground
+      anchorPosition="bottom"
+      opacity={theme === 'dark' ? 0.6 : 0.8}
+      verticalOffset={-100}
+      hiddenOverflow
+    />
+  )
+}

apps/desktop-wallet/src/api/apiDataHooks/address/useFetchAddressSingleTokenBalances.ts

@@ -33,11 +33,7 @@ const useFetchAddressSingleTokenBalances = ({
   })
 
   return {
-    data: (isALPH ? alphBalances : addressTokenBalances) || {
-      availableBalance: '0',
-      lockedBalance: '0',
-      totalBalance: '0'
-    },
+    data: isALPH ? alphBalances : addressTokenBalances,
     isLoading: isALPH ? isLoadingAlphBalances : isLoadingTokenBalances
   }
 }

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

@@ -32,7 +32,7 @@ const combineBalancesToArray = (results: UseQueryResult<AddressTokensBalancesQue
   }
 }
 
-const { useData, DataContextProvider } = createDataContext<AddressTokensBalancesQueryFnData, TokenApiBalances[]>({
+const { useData, DataContextProvider } = createDataContext<AddressTokensBalancesQueryFnData, Array<TokenApiBalances>>({
   useDataHook: useFetchWalletBalancesTokens,
   combineFn: combineBalancesToArray,
   defaultValue: []

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

@@ -25,14 +25,17 @@ const combineBalancesByAddress = (
   ...combineIsLoading(results)
 })
 
-const {
-  useData: useFetchWalletBalancesTokensByAddress,
-  DataContextProvider: UseFetchWalletBalancesTokensByAddressContextProvider
-} = createDataContext<AddressTokensBalancesQueryFnData, AddressesTokensBalances['data']>({
+const { useData, DataContextProvider } = createDataContext<
+  AddressTokensBalancesQueryFnData,
+  AddressesTokensBalances['data']
+>({
   useDataHook: useFetchWalletBalancesTokens,
   combineFn: combineBalancesByAddress,
   defaultValue: {}
 })
 
+const useFetchWalletBalancesTokensByAddress = useData
+const UseFetchWalletBalancesTokensByAddressContextProvider = DataContextProvider
+
 export default useFetchWalletBalancesTokensByAddress
 export { UseFetchWalletBalancesTokensByAddressContextProvider }

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

@@ -1,69 +1,28 @@
 import { ALPH } from '@alephium/token-list'
-import { useQueries, UseQueryResult } from '@tanstack/react-query'
 import { useMemo } from 'react'
 
 import { SkipProp } from '@/api/apiDataHooks/apiDataHooksTypes'
-import { combineIsLoading } from '@/api/apiDataHooks/apiDataHooksUtils'
 import useFetchWalletBalancesAlph from '@/api/apiDataHooks/wallet/useFetchWalletBalancesAlph'
-import { addressTokensBalancesQuery, AddressTokensBalancesQueryFnData } from '@/api/queries/addressQueries'
-import { useAppSelector } from '@/hooks/redux'
-import { useUnsortedAddressesHashes } from '@/hooks/useUnsortedAddresses'
-import { selectCurrentlyOnlineNetworkId } from '@/storage/network/networkSelectors'
-import { ApiBalances, TokenId } from '@/types/tokens'
+import useFetchWalletBalancesTokensArray from '@/api/apiDataHooks/wallet/useFetchWalletBalancesTokensArray'
+import { TokenId } from '@/types/tokens'
 
 interface UseFetchWalletSingleTokenBalancesProps extends SkipProp {
   tokenId: TokenId
 }
 
-const useFetchWalletSingleTokenBalances = ({ tokenId, skip }: UseFetchWalletSingleTokenBalancesProps) => {
-  const networkId = useAppSelector(selectCurrentlyOnlineNetworkId)
-  const allAddressHashes = useUnsortedAddressesHashes()
-
+const useFetchWalletSingleTokenBalances = ({ tokenId }: UseFetchWalletSingleTokenBalancesProps) => {
   const isALPH = tokenId === ALPH.id
 
   const { data: alphBalances, isLoading: isLoadingAlphBalances } = useFetchWalletBalancesAlph()
-
-  const { data: tokenBalances, isLoading: isLoadingTokenBalances } = useQueries({
-    queries:
-      !isALPH && !skip
-        ? allAddressHashes.map((addressHash) => addressTokensBalancesQuery({ addressHash, networkId }))
-        : [],
-    combine: useMemo(
-      () => (results: UseQueryResult<AddressTokensBalancesQueryFnData>[]) => combineTokenBalances(tokenId, results),
-      [tokenId]
-    )
-  })
+  const { data: tokensBalances, isLoading: isLoadingTokensBalances } = useFetchWalletBalancesTokensArray()
 
   return {
-    data: isALPH ? alphBalances : tokenBalances,
-    isLoading: isALPH ? isLoadingAlphBalances : isLoadingTokenBalances
+    data: useMemo(
+      () => (isALPH ? alphBalances : tokensBalances.find(({ id }) => id === tokenId)),
+      [alphBalances, isALPH, tokenId, tokensBalances]
+    ),
+    isLoading: isALPH ? isLoadingAlphBalances : isLoadingTokensBalances
   }
 }
 
 export default useFetchWalletSingleTokenBalances
-
-const combineTokenBalances = (tokenId: string, results: UseQueryResult<AddressTokensBalancesQueryFnData>[]) => ({
-  data: results.reduce(
-    (totalBalances, { data }) => {
-      const balances = data?.balances.find(({ id }) => id === tokenId)
-
-      totalBalances.totalBalance = (
-        BigInt(totalBalances.totalBalance) + BigInt(balances ? balances.totalBalance : 0)
-      ).toString()
-      totalBalances.lockedBalance = (
-        BigInt(totalBalances.lockedBalance) + BigInt(balances ? balances.lockedBalance : 0)
-      ).toString()
-      totalBalances.availableBalance = (
-        BigInt(totalBalances.availableBalance) + BigInt(balances ? balances.availableBalance : 0)
-      ).toString()
-
-      return totalBalances
-    },
-    {
-      totalBalance: '0',
-      lockedBalance: '0',
-      availableBalance: '0'
-    } as ApiBalances
-  ),
-  ...combineIsLoading(results)
-})

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

@@ -4,17 +4,30 @@ import { UseFetchWalletBalancesAlphArrayContextProvider } from '@/api/apiDataHoo
 import { UseFetchWalletBalancesAlphByAddressContextProvider } from '@/api/apiDataHooks/wallet/useFetchWalletBalancesAlphByAddress'
 import { UseFetchWalletBalancesTokensArrayContextProvider } from '@/api/apiDataHooks/wallet/useFetchWalletBalancesTokensArray'
 import { UseFetchWalletBalancesTokensByAddressContextProvider } from '@/api/apiDataHooks/wallet/useFetchWalletBalancesTokensByAddress'
-import { UseFetchWalletTransactionsLimitedContextProvider } from '@/api/apiDataHooks/wallet/useFetchWalletTransactionsLimited'
-import { composeProviders } from '@/api/context/apiContextUtils'
 
-const Providers = composeProviders([
+type ProviderProps = { children: ReactNode }
+type ProviderComponent = FC<ProviderProps>
+
+const providers: Array<ProviderComponent> = [
   UseFetchWalletBalancesTokensArrayContextProvider,
   UseFetchWalletBalancesTokensByAddressContextProvider,
   UseFetchWalletBalancesAlphArrayContextProvider,
-  UseFetchWalletBalancesAlphByAddressContextProvider,
-  UseFetchWalletTransactionsLimitedContextProvider
-])
+  UseFetchWalletBalancesAlphByAddressContextProvider
+]
+
+const ComposedProviders = providers.reduce<ProviderComponent>(
+  (AccumulatedProviders, CurrentProvider) => {
+    const CombinedProvider: ProviderComponent = ({ children }) => (
+      <AccumulatedProviders>
+        <CurrentProvider>{children}</CurrentProvider>
+      </AccumulatedProviders>
+    )
+
+    return CombinedProvider
+  },
+  ({ children }) => children
+)
 
-const ApiContextProvider = ({ children }: { children: ReactNode }) => <Providers>{children}</Providers>
+const ApiContextProvider = ({ children }: ProviderProps) => <ComposedProviders>{children}</ComposedProviders>
 
 export default ApiContextProvider

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

@@ -1,7 +1,7 @@
 import { motion } from 'framer-motion'
 import styled from 'styled-components'
 
-const Box = styled(motion.div)<{ secondary?: boolean }>`
+const Box = styled(motion.div)`
   border-radius: var(--radius-huge);
   width: 100%;
 `