Implement token type tabs

oasisprotocol · Jul 7, 2023 · f923562 · f923562
1 parent 09bc23c
commit f923562
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 7 deletions.
diff --git a/src/app/components/Tokens/TokenDetails.tsx b/src/app/components/Tokens/TokenDetails.tsx
@@ -11,7 +11,7 @@ import { DashboardLink } from '../../pages/ParatimeDashboardPage/DashboardLink'
 import { DelayedContractVerificationIcon } from '../ContractVerificationIcon'
 import Box from '@mui/material/Box'
 import { COLORS } from '../../../styles/theme/colors'
-import { getTokenTypeName } from '../../../types/tokens'
+import { TokenTypeTag } from './TokenList'
 
 export const TokenDetails: FC<{
   isLoading?: boolean
@@ -42,7 +42,9 @@ export const TokenDetails: FC<{
       </dd>
 
       <dt>{t('common.type')}</dt>
-      <dd>{getTokenTypeName(t, token.type)}</dd>
+      <dd>
+        <TokenTypeTag tokenType={token.type} />
+      </dd>
 
       <dt>{t(isMobile ? 'common.smartContract_short' : 'common.smartContract')}</dt>
       <dd>

diff --git a/src/app/components/Tokens/TokenList.tsx b/src/app/components/Tokens/TokenList.tsx
@@ -1,13 +1,21 @@
 import { useTranslation } from 'react-i18next'
-import { EvmToken } from '../../../oasis-nexus/api'
+import { EvmToken, EvmTokenType } from '../../../oasis-nexus/api'
 import { Table, TableCellAlign, TableColProps } from '../../components/Table'
 import { TablePaginationProps } from '../Table/TablePagination'
 import { AccountLink } from '../Account/AccountLink'
 import { TokenLink } from './TokenLink'
 import { CopyToClipboard } from '../CopyToClipboard'
 import { DelayedContractVerificationIcon } from '../ContractVerificationIcon'
 import Box from '@mui/material/Box'
-import { getTokenTypeName } from '../../../types/tokens'
+import {
+  getTokenTypeDescription,
+  getTokenTypeStrictName,
+  tokenBackgroundColor,
+  tokenBorderColor,
+} from '../../../types/tokens'
+import { FC } from 'react'
+import Typography from '@mui/material/Typography'
+import { COLORS } from '../../../styles/theme/colors'
 
 type TokensProps = {
   tokens?: EvmToken[]
@@ -16,6 +24,29 @@ type TokensProps = {
   pagination: false | TablePaginationProps
 }
 
+export const TokenTypeTag: FC<{ tokenType: EvmTokenType }> = ({ tokenType }) => {
+  const { t } = useTranslation()
+  return (
+    <Box
+      sx={{
+        background: tokenBackgroundColor[tokenType],
+        border: `2px solid ${tokenBorderColor[tokenType]}`,
+        display: 'inline',
+        borderRadius: 4,
+        p: 3,
+      }}
+    >
+      <Typography component="span" fontWeight={700}>
+        {getTokenTypeDescription(t, tokenType)}
+      </Typography>
+      &nbsp;
+      <Typography component="span" fontWeight={400} color={COLORS.grayMedium}>
+        {t('common.parentheses', { subject: getTokenTypeStrictName(t, tokenType) })}
+      </Typography>
+    </Box>
+  )
+}
+
 export const TokenList = (props: TokensProps) => {
   const { isLoading, tokens, pagination, limit } = props
   const { t } = useTranslation()
@@ -58,7 +89,7 @@ export const TokenList = (props: TokensProps) => {
         },
         {
           key: 'type',
-          content: getTokenTypeName(t, token.type),
+          content: <TokenTypeTag tokenType={token.type} />,
         },
         {
           content: (

diff --git a/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx b/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx
@@ -14,7 +14,7 @@ import { DelayedContractVerificationIcon } from '../../components/ContractVerifi
 import { getNameForTicker, Ticker } from '../../../types/ticker'
 import { DelayedContractCreatorInfo } from '../../components/Account/ContractCreatorInfo'
 import CardContent from '@mui/material/CardContent'
-import { getTokenTypeName } from '../../../types/tokens'
+import { TokenTypeTag } from '../../components/Tokens/TokenList'
 
 export const TokenDetailsCard: FC = () => {
   const { t } = useTranslation()
@@ -57,7 +57,9 @@ export const TokenDetailsCard: FC = () => {
             </dd>
 
             <dt>{t('common.type')} </dt>
-            <dd>{getTokenTypeName(t, token.type)} </dd>
+            <dd>
+              <TokenTypeTag tokenType={token.type} />
+            </dd>
 
             <dt>{t('contract.creator')}</dt>
             <dd>

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -68,6 +68,7 @@
     "nfts": "NFTs",
     "oasis": "Oasis",
     "paratime": "Paratime",
+    "parentheses":"({{subject}})",
     "percentage": "Percentage",
     "rank": "Rank",
     "select": "Select",