Token page

apps/explorer/locales/en-US/translation.json

@@ -1,4 +1,5 @@
 {
+  "Balance": "Balance",
   "ALPH balance": "ALPH balance",
   "Address group": "Address group",
   "Address": "Address",
@@ -34,6 +35,7 @@
   "Latest activity": "Latest activity",
   "Locked": "Locked",
   "NFTs": "NFTs",
+  "NFT": "NFT",
   "Nb. of assets": "Nb. of assets",
   "Nb. of transactions": "Nb. of transactions",
   "Next": "Next",
@@ -58,6 +60,7 @@
   "Supply": "Supply",
   "Timestamp": "Timestamp",
   "Tokens": "Tokens",
+  "Token": "Token",
   "Total Amount": "Total Amount",
   "Total Amounts": "Total Amounts",
   "Total": "Total",

apps/explorer/locales/fr-FR/translation.json

@@ -1,4 +1,5 @@
 {
+  "Balance": "Montant",
   "ALPH balance": "Montant ALPH",
   "Address group": "Groupe de l'adresse",
   "Address": "Adresse",
@@ -34,6 +35,7 @@
   "Latest activity": "Dernière activité",
   "Locked": "Vérouillés",
   "NFTs": "NFTs",
+  "NFT": "NFT",
   "Nb. of assets": "Nb d'actifs",
   "Nb. of transactions": "Nb. de transactions",
   "Next": "Suivant",
@@ -58,6 +60,7 @@
   "Supply": "Emission",
   "Timestamp": "Date",
   "Tokens": "Jetons",
+  "Token": "Jeton",
   "Total Amount": "Montant Total",
   "Total Amounts": "Montants Totaux",
   "Total": "Totale",

apps/explorer/src/App.tsx

@@ -36,6 +36,7 @@ import PageNotFound from '@/pages/404'
 import AddressInfoSection from '@/pages/AddressInfoPage'
 import BlockInfoSection from '@/pages/BlockInfoPage'
 import HomeSection from '@/pages/HomePage/HomePage'
+import TokenInfoSection from '@/pages/TokenInfoPage'
 import TransactionInfoSection from '@/pages/TransactionInfoPage'
 import GlobalStyle, { deviceBreakPoints } from '@/styles/globalStyles'
 import { darkTheme, lightTheme } from '@/styles/themes'
@@ -110,6 +111,7 @@ const App = () => {
                       <Route path="/" element={<HomeSection />} />
                       <Route path="/blocks/:id" element={<BlockInfoSection />} />
                       <Route path="/addresses/:id" element={<AddressInfoSection />} />
+                      <Route path="/tokens/:id" element={<TokenInfoSection />} />
                       <Route path="/transactions/:id" element={<TransactionInfoSection />} />
                       <Route path="*" element={<PageNotFound />} />
                     </Routes>

apps/explorer/src/api/index.ts

@@ -20,11 +20,13 @@ import { addressQueries } from '@/api/addresses/addressApi'
 import { assetsQueries } from '@/api/assets/assetsApi'
 import { blocksQueries } from '@/api/blocks/blocksApi'
 import { infosQueries } from '@/api/infos/infosApi'
+import { tokensQueries } from '@/api/tokens/tokensApi'
 import { transactionsQueries } from '@/api/transactions/transactionsApi'
 
 export const queries = {
   assets: assetsQueries,
   address: addressQueries,
+  tokens: tokensQueries,
   transactions: transactionsQueries,
   blocks: blocksQueries,
   infos: infosQueries

apps/explorer/src/api/tokens/tokensApi.ts

@@ -0,0 +1,43 @@
+/*
+Copyright 2018 - 2022 The Alephium Authors
+This file is part of the alephium project.
+
+The library is free software: you can redistribute it and/or modify
+it under the terms of the GNU Lesser General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+The library is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Lesser General Public License for more details.
+
+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 client from '@/api/client'
+import { createQueriesCollection } from '@/utils/api'
+
+export const tokensQueries = createQueriesCollection({
+  transactions: {
+    confirmed: (tokenId: string, pageNumber: number, limit = 10) => ({
+      queryKey: ['tokenTransactions', tokenId, pageNumber, limit],
+      queryFn: () =>
+        client.explorer.tokens.getTokensTokenIdTransactions(tokenId, {
+          page: pageNumber,
+          limit
+        })
+    }),
+    total: (tokenId: string) => ({
+      queryKey: ['tokenTotalTransactions', tokenId],
+      queryFn: () => client.explorer.tokens.getTokensTokenIdTotalTransactions(tokenId)
+    })
+  },
+  balance:{
+    details: (tokenId: string) => ({
+      queryKey: ['tokenBalance', tokenId],
+      queryFn: () => client.explorer.tokens.getTokensTokenIdBalance(tokenId)
+    })
+  }
+})

apps/explorer/src/pages/AddressInfoPage/TokenList.tsx

@@ -17,7 +17,7 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { ALPH, TokenInfo } from '@alephium/token-list'
-import { addressFromTokenId, Optional } from '@alephium/web3'
+import { Optional } from '@alephium/web3'
 import { motion } from 'framer-motion'
 import { useTranslation } from 'react-i18next'
 import { RiErrorWarningFill } from 'react-icons/ri'
@@ -48,8 +48,7 @@ const TokenList = ({ tokens, limit, isLoading, className }: TokenListProps) => {
 
   const handleTokenNameClick = (tokenId: string) => {
     try {
-      const tokenAddress = addressFromTokenId(tokenId)
-      navigate(`/addresses/${tokenAddress}`)
+      navigate(`/tokens/${tokenId}`)
     } catch (e) {
       console.error(e)
     }