From db26f60c854b3c9c4cfa6527daad505213224ad2 Mon Sep 17 00:00:00 2001
From: Kristof Csillag <kristof@oasisprotocol.org>
Date: Thu, 29 Jun 2023 15:44:56 +0200
Subject: [PATCH] When displaying the contract of a token, link to the token
 dashboard

---
 .changelog/623.3.feature.md                |  1 +
 src/app/components/Account/index.tsx       | 19 +++++++++++++++++--
 src/app/pages/AccountDetailsPage/index.tsx | 16 +++++++++++++---
 3 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 .changelog/623.3.feature.md

diff --git a/.changelog/623.3.feature.md b/.changelog/623.3.feature.md
new file mode 100644
index 0000000000..f5538303b3
--- /dev/null
+++ b/.changelog/623.3.feature.md
@@ -0,0 +1 @@
+When displaying a contract that describes a token, link to the token dashboard
diff --git a/src/app/components/Account/index.tsx b/src/app/components/Account/index.tsx
index dbdf694e87..34a91313d9 100644
--- a/src/app/components/Account/index.tsx
+++ b/src/app/components/Account/index.tsx
@@ -10,7 +10,7 @@ import { CopyToClipboard } from '../../components/CopyToClipboard'
 import { JazzIcon } from '../../components/JazzIcon'
 import { CoinGeckoReferral } from '../../components/CoinGeckoReferral'
 import { TextSkeleton } from '../../components/Skeleton'
-import { type RuntimeAccount } from '../../../oasis-indexer/api'
+import { EvmToken, type RuntimeAccount } from '../../../oasis-indexer/api'
 import { TokenPills } from './TokenPills'
 import { AccountLink } from './AccountLink'
 import { RouteUtils } from '../../utils/route-utils'
@@ -21,6 +21,7 @@ import { getNameForTicker, Ticker } from '../../../types/ticker'
 import { TokenPriceInfo } from '../../../coin-gecko/api'
 import { TransactionLink } from '../Transactions/TransactionLink'
 import { ContractVerificationIcon } from '../ContractVerificationIcon'
+import { TokenLink } from '../Tokens/TokenLink'
 
 export const StyledAvatarContainer = styled('dt')(({ theme }) => ({
   '&&': {
@@ -50,12 +51,13 @@ export const FiatMoneyAmountBox = styled(Box)(() => ({
 
 type AccountProps = {
   account?: RuntimeAccount
+  token?: EvmToken
   isLoading: boolean
   tokenPriceInfo: TokenPriceInfo
   showLayer?: boolean
 }
 
-export const Account: FC<AccountProps> = ({ account, isLoading, tokenPriceInfo, showLayer }) => {
+export const Account: FC<AccountProps> = ({ account, token, isLoading, tokenPriceInfo, showLayer }) => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
   const balance = account?.balances[0]?.balance ?? '0'
@@ -100,6 +102,19 @@ export const Account: FC<AccountProps> = ({ account, isLoading, tokenPriceInfo,
             <CopyToClipboard value={address!} />
           </dd>
 
+          {token && (
+            <>
+              <dt>{t('common.token')}</dt>
+              <dd>
+                <TokenLink
+                  scope={account}
+                  address={token.eth_contract_addr || token.contract_addr}
+                  name={token.name}
+                />
+              </dd>
+            </>
+          )}
+
           {account?.evm_contract && (
             <>
               <dt>{t('contract.verification.title')}</dt>
diff --git a/src/app/pages/AccountDetailsPage/index.tsx b/src/app/pages/AccountDetailsPage/index.tsx
index e58fcf91c3..e3ff30cf97 100644
--- a/src/app/pages/AccountDetailsPage/index.tsx
+++ b/src/app/pages/AccountDetailsPage/index.tsx
@@ -8,13 +8,14 @@ import { RouterTabs } from '../../components/RouterTabs'
 import { TokenPriceInfo, useTokenPrice } from '../../../coin-gecko/api'
 import { Ticker } from '../../../types/ticker'
 
-import { EvmTokenType, RuntimeAccount } from '../../../oasis-indexer/api'
+import { EvmToken, EvmTokenType, RuntimeAccount } from '../../../oasis-indexer/api'
 import { accountTokenContainerId } from './AccountTokensCard'
 import { useAccount } from './hook'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { showEmptyAccountDetails } from '../../../config'
 import { CardEmptyState } from './CardEmptyState'
 import { contractCodeContainerId } from './ContractCodeCard'
+import { useTokenInfo } from '../TokenDashboardPage/hook'
 
 export const AccountDetailsPage: FC = () => {
   const { t } = useTranslation()
@@ -22,6 +23,7 @@ export const AccountDetailsPage: FC = () => {
   const scope = useRequiredScopeParam()
   const address = useLoaderData() as string
   const { account, isLoading, isError } = useAccount(scope, address)
+  const { token } = useTokenInfo(scope, address)
 
   const tokenPriceInfo = useTokenPrice(account?.ticker || Ticker.ROSE)
   const isContract = !!account?.evm_contract
@@ -46,6 +48,7 @@ export const AccountDetailsPage: FC = () => {
           isLoading={isLoading}
           isError={isError}
           account={account}
+          token={token}
           tokenPriceInfo={tokenPriceInfo}
         />
       </SubPageCard>
@@ -66,13 +69,20 @@ export const AccountDetailsView: FC<{
   isLoading: boolean
   isError: boolean
   account: RuntimeAccount | undefined
+  token?: EvmToken
   tokenPriceInfo: TokenPriceInfo
   showLayer?: boolean
-}> = ({ isLoading, isError, account, tokenPriceInfo, showLayer }) => {
+}> = ({ isLoading, isError, account, token, tokenPriceInfo, showLayer }) => {
   const { t } = useTranslation()
   return isError ? (
     <CardEmptyState label={t('account.cantLoadDetails')} />
   ) : (
-    <Account account={account} isLoading={isLoading} tokenPriceInfo={tokenPriceInfo} showLayer={showLayer} />
+    <Account
+      account={account}
+      token={token}
+      isLoading={isLoading}
+      tokenPriceInfo={tokenPriceInfo}
+      showLayer={showLayer}
+    />
   )
 }