address balance and name

lib/socket/types.ts

@@ -7,6 +7,8 @@ SocketMessage.BlocksIndexStatus |
 SocketMessage.TxStatusUpdate |
 SocketMessage.NewTx |
 SocketMessage.NewPendingTx |
+SocketMessage.AddressBalanceUpdate |
+SocketMessage.AddressCoinBalanceUpdate |
 SocketMessage.Unknown;
 
 interface SocketMessageParamsGeneric<Event extends string | undefined, Payload extends object | unknown> {
@@ -22,5 +24,8 @@ export namespace SocketMessage {
   export type TxStatusUpdate = SocketMessageParamsGeneric<'collated', NewBlockSocketResponse>;
   export type NewTx = SocketMessageParamsGeneric<'transaction', { transaction: number }>;
   export type NewPendingTx = SocketMessageParamsGeneric<'pending_transaction', { pending_transaction: number }>;
+  export type AddressBalanceUpdate = SocketMessageParamsGeneric<'balance', { balance: string; block_number: number; exchange_rate: string }>;
+  export type AddressCoinBalanceUpdate =
+  SocketMessageParamsGeneric<'current_coin_balance', { coin_balance: string; block_number: number; exchange_rate: string }>;
   export type Unknown = SocketMessageParamsGeneric<undefined, unknown>;
 }

types/api/address.ts

@@ -15,7 +15,7 @@ export interface Address {
   name: string | null;
   private_tags: Array<AddressTag> | null;
   public_tags: Array<AddressTag> | null;
-  tokenInfo: TokenInfo | null;
+  token: TokenInfo | null;
   watchlist_names: Array<WatchlistName> | null;
 }
 

ui/address/AddressDetails.tsx

@@ -21,6 +21,9 @@ import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import ExternalLink from 'ui/shared/ExternalLink';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 
+import AddressBalance from './details/AddressBalance';
+import AddressNameInfo from './details/AddressNameInfo';
+
 interface Props {
   addressQuery: UseQueryResult<TAddress>;
 }
@@ -87,6 +90,8 @@ const AddressDetails = ({ addressQuery }: Props) => {
         rowGap={{ base: 3, lg: 3 }}
         templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden"
       >
+        <AddressNameInfo data={ addressQuery.data }/>
+        <AddressBalance data={ addressQuery.data }/>
         <DetailsInfoItem
           title="Tokens"
           hint="All tokens in the account and total value."

ui/address/details/AddressBalance.tsx

+import { useQueryClient } from '@tanstack/react-query';
+import React from 'react';
+
+import type { SocketMessage } from 'lib/socket/types';
+import type { Address } from 'types/api/address';
+import { QueryKeys } from 'types/client/queries';
+
+import appConfig from 'configs/app/config';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
+import CurrencyValue from 'ui/shared/CurrencyValue';
+import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import TokenLogo from 'ui/shared/TokenLogo';
+
+interface Props {
+  data: Address;
+}
+
+const AddressBalance = ({ data }: Props) => {
+  const [ lastBlockNumber, setLastBlockNumber ] = React.useState<number>(data.block_number_balance_updated_at || 0);
+  const queryClient = useQueryClient();
+
+  const updateData = React.useCallback((balance: string, exchangeRate: string, blockNumber: number) => {
+    if (blockNumber < lastBlockNumber) {
+      return;
+    }
+
+    setLastBlockNumber(blockNumber);
+    queryClient.setQueryData([ QueryKeys.address, data.hash ], (prevData: Address | undefined) => {
+      if (!prevData) {
+        return;
+      }
+      return {
+        ...prevData,
+        coin_balance: balance,
+        exchange_rate: exchangeRate,
+      };
+    });
+  }, [ data.hash, lastBlockNumber, queryClient ]);
+
+  const handleNewBalanceMessage: SocketMessage.AddressBalanceUpdate['handler'] = React.useCallback((payload) => {
+    updateData(payload.balance, payload.exchange_rate, payload.block_number);
+  }, [ updateData ]);
+
+  const handleNewCoinBalanceMessage: SocketMessage.AddressCoinBalanceUpdate['handler'] = React.useCallback((payload) => {
+    updateData(payload.coin_balance, payload.exchange_rate, payload.block_number);
+  }, [ updateData ]);
+
+  const channel = useSocketChannel({
+    topic: `addresses:${ data.hash.toLowerCase() }`,
+    isDisabled: !data.coin_balance,
+  });
+  useSocketMessage({
+    channel,
+    event: 'balance',
+    handler: handleNewBalanceMessage,
+  });
+  useSocketMessage({
+    channel,
+    event: 'current_coin_balance',
+    handler: handleNewCoinBalanceMessage,
+  });
+
+  if (!data.coin_balance) {
+    return null;
+  }
+
+  return (
+    <DetailsInfoItem
+      title="Balance"
+      hint={ `Address balance in ${ appConfig.network.currency.symbol }. Doesn't include ERC20, ERC721 and ERC1155 tokens.` }
+    >
+      <TokenLogo
+        hash={ appConfig.network.currency.address }
+        name={ appConfig.network.currency.name }
+        boxSize={ 5 }
+        mr={ 2 }
+        fontSize="sm"
+      />
+      <CurrencyValue
+        value={ data.coin_balance }
+        exchangeRate={ data.exchange_rate }
+        decimals={ String(appConfig.network.currency.decimals) }
+        currency={ appConfig.network.currency.symbol }
+        accuracyUsd={ 2 }
+        accuracy={ 8 }
+      />
+    </DetailsInfoItem>
+  );
+};
+
+export default React.memo(AddressBalance);

ui/address/details/AddressNameInfo.tsx

+import { Link } from '@chakra-ui/react';
+import React from 'react';
+
+import type { Address } from 'types/api/address';
+
+import link from 'lib/link/link';
+import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+
+interface Props {
+  data: Address;
+}
+
+const AddressNameInfo = ({ data }: Props) => {
+  if (data.token) {
+    return (
+      <DetailsInfoItem
+        title="Token name"
+        hint="Token name and symbol"
+      >
+        <Link href={ link('token_index', { hash: data.token.address }) }>
+          { data.token.name } ({ data.token.symbol })
+        </Link>
+      </DetailsInfoItem>
+    );
+  }
+
+  if (data.is_contract && data.name) {
+    return (
+      <DetailsInfoItem
+        title="Contract name"
+        hint="The name found in the source code of the Contract"
+      >
+        { data.name }
+      </DetailsInfoItem>
+    );
+  }
+
+  if (data.name) {
+    return (
+      <DetailsInfoItem
+        title="Validator name"
+        hint="The name of the validator"
+      >
+        { data.name }
+      </DetailsInfoItem>
+    );
+  }
+
+  return null;
+};
+
+export default React.memo(AddressNameInfo);

ui/shared/TokenLogo.tsx

@@ -21,13 +21,13 @@ const EmptyElement = ({ className, letter }: { className?: string; letter: strin
 };
 
 interface Props {
-  hash: string;
+  hash?: string;
   name?: string | null;
   className?: string;
 }
 
 const TokenLogo = ({ hash, name, className }: Props) => {
-  const logoSrc = appConfig.network.assetsPathname ? [
+  const logoSrc = appConfig.network.assetsPathname && hash ? [
     'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/',
     appConfig.network.assetsPathname,
     '/assets/',