Add consensus.Delegate and consensus.Undelegate icons

oasisprotocol · Sep 28, 2023 · 1401614 · 1401614
1 parent f38a707
commit 1401614
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 0 deletions.
diff --git a/src/app/components/CustomIcons/Delegate.tsx b/src/app/components/CustomIcons/Delegate.tsx
@@ -0,0 +1,21 @@
+import { FC } from 'react'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+
+export const DelegateIcon: FC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <defs>
+        <clipPath id="clippath">
+          <rect fill="none" x="4.2" y="4.2" width="15.6" height="15.6" />
+        </clipPath>
+      </defs>
+      <circle fill="#E8F6FF" cx="12" cy="12" r="12" />
+      <g clipPath="url(#clippath)">
+        <path
+          fill="#6665D8"
+          d="M11.46,17.36H7.18v-3.75h1.61v-2.14h2.68v-1.07h-1.61v-3.75h4.29v3.75h-1.61v1.07h2.68v2.14h1.61v3.75h-4.29v-3.75h1.61v-1.07h-4.29v1.07h1.61v3.75Z"
+        />
+      </g>
+    </SvgIcon>
+  )
+}
diff --git a/src/app/components/CustomIcons/Undelegate.tsx b/src/app/components/CustomIcons/Undelegate.tsx
@@ -0,0 +1,26 @@
+import { FC } from 'react'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+
+export const UndelegateIcon: FC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <defs>
+        <clipPath id="clippath">
+          <rect fill="none" x="4.2" y="4.2" width="15.6" height="15.6" />
+        </clipPath>
+      </defs>
+      <circle fill="#E8F6FF" cx="12" cy="12" r="12" />
+      <g clipPath="url(#clippath)">
+        <g>
+          <path
+            fill="#6665D8"
+            d="M7.05,6.83l-.22-.22-.76,.76,4.09,4.09h-1.39v2.16h-1.62v3.77h4.31v-3.77h-1.62v-1.08h1.39l1.3,1.3v3.55h3.55l.65,.65,.76-.76-.57-.57h0S7.05,6.83,7.05,6.83h0Z"
+          />
+          <path fill="#6665D8" d="M16.85,15.11v-1.49h-1.49l1.49,1.49Z" />
+          <path fill="#6665D8" d="M15.23,13.49v-2.03h-2.03l2.03,2.03Z" />
+          <path fill="#6665D8" d="M12.54,10.8v-.42h1.62v-3.77h-4.31v1.49l2.7,2.7Z" />
+        </g>
+      </g>
+    </SvgIcon>
+  )
+}
diff --git a/src/app/components/RuntimeTransactionLabel/index.tsx b/src/app/components/RuntimeTransactionLabel/index.tsx
@@ -9,6 +9,8 @@ import { ContractCallIcon } from './../CustomIcons/ContractCall'
 import { DepositIcon } from './../CustomIcons/Deposit'
 import { WithdrawIcon } from './../CustomIcons/Withdraw'
 import { TransferIcon } from './../CustomIcons/Transfer'
+import { DelegateIcon } from '../CustomIcons/Delegate'
+import { UndelegateIcon } from '../CustomIcons/Undelegate'
 
 const getRuntimeTransactionLabel = (t: TFunction, method: string | undefined) => {
   switch (method) {
@@ -25,6 +27,10 @@ const getRuntimeTransactionLabel = (t: TFunction, method: string | undefined) =>
       return t('transactions.method.consensus.withdraw')
     case 'accounts.Transfer':
       return t('transactions.method.accounts.transfer')
+    case 'consensus.Delegate':
+      return t('transactions.method.consensus.delegate')
+    case 'consensus.Undelegate':
+      return t('transactions.method.consensus.undelegate')
     default:
       return t('transactions.method.unknown', { method })
   }
@@ -44,6 +50,10 @@ const getRuntimeTransactionIcon = (method: string | undefined) => {
       return <DepositIcon sx={iconStyles} />
     case 'consensus.Withdraw':
       return <WithdrawIcon sx={iconStyles} />
+    case 'consensus.Delegate':
+      return <DelegateIcon sx={iconStyles} />
+    case 'consensus.Undelegate':
+      return <UndelegateIcon sx={iconStyles} />
     case 'accounts.Transfer':
       return <TransferIcon sx={iconStyles} />
     default:
@@ -62,6 +72,8 @@ type RuntimeTransactionLabelProps = {
    *   - "accounts.Transfer"
    *   - "consensus.Deposit"
    *   - "consensus.Withdraw"
+   *   - "consensus.Delegate"
+   *   - "consensus.Undelegate"
    *   - "evm.Create"
    *   - "evm.Call"
    */

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -256,6 +256,8 @@
       },
       "consensus": {
         "deposit": "Consensus Deposit",
+        "delegate": "Consensus Delegate",
+        "undelegate": "Consensus Undelegate",
         "withdraw": "Consensus Withdraw"
       },
       "evm": {