Merge pull request #535 from oasisprotocol/mz/icons

Create transaction icons

.changelog/535.feature.md

@@ -0,0 +1 @@
+Create transaction icons

src/app/components/CustomIcons/ContractCall.tsx

@@ -0,0 +1,21 @@
+import { FC } from 'react'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+
+export const ContractCallIcon: FC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <rect width="24" height="24" rx="12" fill="#E8F5FF" />
+      <g clipPath="url(#clip0_5784_204611)">
+        <path
+          d="M18.4276 9.42664L14.8051 5.80414C14.5276 5.52664 14.1451 5.36914 13.7476 5.36914L6.87012 5.36914C6.04512 5.36914 5.37012 6.04414 5.37012 6.86914L5.37012 17.3691C5.37012 18.1941 6.04512 18.8691 6.87012 18.8691H17.3701C18.1951 18.8691 18.8701 18.1941 18.8701 17.3691V10.4916C18.8701 10.0941 18.7126 9.71164 18.4276 9.42664ZM8.37012 8.36914L13.6201 8.36914V9.86914H8.37012V8.36914ZM15.8701 15.8691L8.37012 15.8691V14.3691L15.8701 14.3691V15.8691ZM15.8701 12.8691L8.37012 12.8691L8.37012 11.3691L15.8701 11.3691V12.8691Z"
+          fill="#0092F6"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5784_204611">
+          <rect width="18" height="18" fill="white" transform="translate(3.12012 3.11914)" />
+        </clipPath>
+      </defs>
+    </SvgIcon>
+  )
+}

src/app/components/CustomIcons/ContractCreation.tsx

@@ -0,0 +1,21 @@
+import { FC } from 'react'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+
+export const ContractCreationIcon: FC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <rect width="24" height="24" rx="12" fill="#E8F5FF" />
+      <g clipPath="url(#clip0_5784_204609)">
+        <path
+          d="M15.3604 3.86914L6.36035 3.86914C5.53535 3.86914 4.86035 4.54414 4.86035 5.36914L4.86035 15.8691H6.36035L6.36035 5.36914L15.3604 5.36914V3.86914ZM14.6104 6.86914L19.1104 11.3691V18.8691C19.1104 19.6941 18.4354 20.3691 17.6104 20.3691L9.35285 20.3691C8.52785 20.3691 7.86035 19.6941 7.86035 18.8691L7.86785 8.36914C7.86785 7.54414 8.53535 6.86914 9.36035 6.86914L14.6104 6.86914ZM13.8604 12.1191H17.9854L13.8604 7.99414L13.8604 12.1191Z"
+          fill="#0092F6"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5784_204609">
+          <rect width="18" height="18" fill="white" transform="translate(3.36035 3.11914)" />
+        </clipPath>
+      </defs>
+    </SvgIcon>
+  )
+}

src/app/components/CustomIcons/Deposit.tsx

@@ -0,0 +1,21 @@
+import { FC } from 'react'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+
+export const DepositIcon: FC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <rect width="24" height="24" rx="12" fill="#E8FAF3" />
+      <g clipPath="url(#clip0_5784_204607)">
+        <path
+          d="M18.1201 12.1191L17.0626 11.0616L12.8701 15.2466L12.8701 6.11914L11.3701 6.11914L11.3701 15.2466L7.17762 11.0616L6.12012 12.1191L12.1201 18.1191L18.1201 12.1191Z"
+          fill="#4CD4A9"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5784_204607">
+          <rect width="18" height="18" fill="white" transform="translate(21.1201 3.11914) rotate(90)" />
+        </clipPath>
+      </defs>
+    </SvgIcon>
+  )
+}

src/app/components/CustomIcons/Transfer.tsx

@@ -0,0 +1,21 @@
+import { FC } from 'react'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+
+export const TransferIcon: FC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <rect x="0.5" y="0.5" width="24" height="24" rx="12" fill="#E8FAF3" />
+      <g clipPath="url(#clip0_5784_204605)">
+        <path
+          d="M12.1152 6.36523L11.1018 7.37867L15.1124 11.3965H6.36523V12.834H15.1124L11.1018 16.8518L12.1152 17.8652L17.8652 12.1152L12.1152 6.36523Z"
+          fill="#4CD4A9"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5784_204605">
+          <rect width="17.25" height="17.25" fill="white" transform="translate(3.49023 3.49023)" />
+        </clipPath>
+      </defs>
+    </SvgIcon>
+  )
+}

src/app/components/CustomIcons/Unknown.tsx

@@ -0,0 +1,14 @@
+import { FC } from 'react'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+
+export const UnknownIcon: FC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <rect width="24" height="24" rx="12" fill="#E3E8ED" />
+      <path
+        d="M11.4233 12.768C12.0009 11.7242 13.111 11.1084 13.7561 10.1847C14.4387 9.21601 14.0562 7.40619 12.1209 7.40619C10.8533 7.40619 10.2307 8.36742 9.96814 9.16344L8.02539 8.34489C8.55796 6.74535 10.0056 5.37109 12.1134 5.37109C13.8761 5.37109 15.0838 6.17462 15.6989 7.18091C16.2239 8.04451 16.5315 9.65907 15.7214 10.8606C14.8213 12.1898 13.9587 12.5953 13.4936 13.4514C13.3061 13.7969 13.2311 14.0221 13.2311 15.1336H11.0633C11.0558 14.5478 10.9658 13.5941 11.4233 12.768ZM13.6211 18.1374C13.6211 18.9635 12.946 19.6393 12.1209 19.6393C11.2958 19.6393 10.6207 18.9635 10.6207 18.1374C10.6207 17.3114 11.2958 16.6355 12.1209 16.6355C12.946 16.6355 13.6211 17.3114 13.6211 18.1374Z"
+        fill="#565B61"
+      />
+    </SvgIcon>
+  )
+}

src/app/components/CustomIcons/Withdraw.tsx

@@ -0,0 +1,21 @@
+import { FC } from 'react'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+
+export const WithdrawIcon: FC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <rect width="24" height="24" rx="12" fill="#FFF0E4" />
+      <g clipPath="url(#clip0_5784_204617)">
+        <path
+          d="M6.12012 12.1191L7.17762 13.1766L11.3701 8.99164L11.3701 18.1191L12.8701 18.1191L12.8701 8.99164L17.0626 13.1766L18.1201 12.1191L12.1201 6.11914L6.12012 12.1191Z"
+          fill="#ED6C02"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5784_204617">
+          <rect width="18" height="18" fill="white" transform="translate(3.12012 21.1191) rotate(-90)" />
+        </clipPath>
+      </defs>
+    </SvgIcon>
+  )
+}

src/app/components/RuntimeTransactionLabel/index.tsx

@@ -1,6 +1,14 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { TFunction } from 'i18next'
+import Tooltip from '@mui/material/Tooltip'
+import { tooltipDelay } from '../../../styles/theme'
+import { UnknownIcon } from './../CustomIcons/Unknown'
+import { ContractCreationIcon } from './../CustomIcons/ContractCreation'
+import { ContractCallIcon } from './../CustomIcons/ContractCall'
+import { DepositIcon } from './../CustomIcons/Deposit'
+import { WithdrawIcon } from './../CustomIcons/Withdraw'
+import { TransferIcon } from './../CustomIcons/Transfer'
 
 const getRuntimeTransactionLabel = (t: TFunction, method: string | undefined) => {
   switch (method) {
@@ -22,6 +30,27 @@ const getRuntimeTransactionLabel = (t: TFunction, method: string | undefined) =>
   }
 }
 
+const iconStyles = { fontSize: '40px' }
+const getRuntimeTransactionIcon = (method: string | undefined) => {
+  switch (method) {
+    case undefined:
+      // Method may be undefined if the transaction was malformed.
+      return <UnknownIcon sx={iconStyles} />
+    case 'evm.Call':
+      return <ContractCallIcon sx={iconStyles} />
+    case 'evm.Create':
+      return <ContractCreationIcon sx={iconStyles} />
+    case 'consensus.Deposit':
+      return <DepositIcon sx={iconStyles} />
+    case 'consensus.Withdraw':
+      return <WithdrawIcon sx={iconStyles} />
+    case 'accounts.Transfer':
+      return <TransferIcon sx={iconStyles} />
+    default:
+      return <UnknownIcon sx={iconStyles} />
+  }
+}
+
 type RuntimeTransactionLabelProps = {
   /**
    * The method call body. Defined by the runtime.
@@ -44,3 +73,19 @@ export const RuntimeTransactionLabel: FC<RuntimeTransactionLabelProps> = ({ meth
 
   return <>{getRuntimeTransactionLabel(t, method)}</>
 }
+
+export const RuntimeTransactionIcon: FC<RuntimeTransactionLabelProps> = ({ method }) => {
+  const { t } = useTranslation()
+
+  return (
+    <Tooltip
+      arrow
+      placement="top"
+      title={getRuntimeTransactionLabel(t, method)}
+      enterDelay={tooltipDelay}
+      enterNextDelay={tooltipDelay}
+    >
+      <span>{getRuntimeTransactionIcon(method)}</span>
+    </Tooltip>
+  )
+}

src/app/components/Table/index.tsx

@@ -42,6 +42,7 @@ const StyledTableRow = styled(TableRow, {
 }))
 
 export enum TableCellAlign {
+  Center = 'center',
   Left = 'left',
   Right = 'right',
 }

src/app/components/Transactions/index.tsx

@@ -6,7 +6,7 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
 import LockIcon from '@mui/icons-material/Lock'
 import { Table, TableCellAlign } from '../../components/Table'
 import { TransactionStatusIcon } from '../../components/TransactionStatusIcon'
-import { RuntimeTransactionLabel } from '../../components/RuntimeTransactionLabel'
+import { RuntimeTransactionIcon } from '../../components/RuntimeTransactionLabel'
 import { RoundedBalance } from '../../components/RoundedBalance'
 import { RuntimeTransaction } from '../../../oasis-indexer/api'
 import { COLORS } from '../../../styles/theme/colors'
@@ -75,7 +75,7 @@ export const Transactions: FC<TransactionsProps> = ({
     { content: t('common.hash') },
     ...(verbose ? [{ content: t('common.block') }] : []),
     { content: t('common.age'), align: TableCellAlign.Right },
-    { content: t('common.type') },
+    { content: t('common.type'), align: TableCellAlign.Center },
     { content: t('common.from'), width: '150px' },
     { content: t('common.to'), width: '150px' },
     { content: t('common.txnFee'), align: TableCellAlign.Right, width: '250px' },
@@ -120,7 +120,8 @@ export const Transactions: FC<TransactionsProps> = ({
         key: 'timestamp',
       },
       {
-        content: <RuntimeTransactionLabel method={transaction.method} />,
+        align: TableCellAlign.Center,
+        content: <RuntimeTransactionIcon method={transaction.method} />,
         key: 'type',
       },
       {