Add undelegate_done and undelegate_start events

oasisprotocol · Jan 5, 2024 · 5ca0586 · 5ca0586
1 parent d9c0ee7
commit 5ca0586
Show file tree

Hide file tree

Showing 7 changed files with 194 additions and 60 deletions.
diff --git a/src/app/components/CustomIcons/Delegate.tsx b/src/app/components/CustomIcons/Delegate.tsx
@@ -4,18 +4,20 @@ 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>
+      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect width="40" height="40" rx="20" fill="#E8F5FF" />
+        <g clipPath="url(#clip0_7391_89888)">
+          <path
+            d="M18.75 32.5L8.75 32.5L8.75 23.75L12.5 23.75L12.5 18.75L18.75 18.75L18.75 16.25L15 16.25L15 7.5L25 7.5L25 16.25L21.25 16.25L21.25 18.75L27.5 18.75L27.5 23.75L31.25 23.75L31.25 32.5L21.25 32.5L21.25 23.75L25 23.75L25 21.25L15 21.25L15 23.75L18.75 23.75L18.75 32.5Z"
+            fill="#6665D8"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_7391_89888">
+            <rect width="30" height="30" fill="white" transform="translate(5 5)" />
+          </clipPath>
+        </defs>
+      </svg>
     </SvgIcon>
   )
 }
diff --git a/src/app/components/CustomIcons/Undelegate.tsx b/src/app/components/CustomIcons/Undelegate.tsx
diff --git a/src/app/components/CustomIcons/UndelegateFinish.tsx b/src/app/components/CustomIcons/UndelegateFinish.tsx
@@ -0,0 +1,24 @@
+import { FC } from 'react'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+
+export const UndelegateFinishIcon: FC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect width="40" height="40" rx="20" fill="#E8F5FF" />
+        <g clipPath="url(#clip0_7597_54392)">
+          <path
+            d="M29.4822 31.5H22.2499V24.2677V23.8534L21.957 23.5605L18.9393 20.5429L18.6464 20.25H18.2322H14.9999H13.9999V21.25V23.75V24.75H14.9999H17.7499V31.5H9.74988L9.74988 24.75H12.4999H13.4999V23.75V19.75H15.7322H18.1464L16.4393 18.0429L7.66421 9.26777L8.00985 8.92213L30.7285 31.6408L31.3444 32.2566L30.9987 32.6023L30.1893 31.7929L29.8964 31.5H29.4822ZM21.2499 15.25L20.7017 15.25L15.9999 10.5482V8.5H23.9999V15.25L21.2499 15.25ZM26.4999 19.75V21.0482L25.2017 19.75H26.4999ZM30.2499 24.7982L30.2017 24.75H30.2499V24.7982Z"
+            stroke="#6665D8"
+            strokeWidth="2"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_7597_54392">
+            <rect width="30" height="30" fill="white" transform="translate(5 5)" />
+          </clipPath>
+        </defs>
+      </svg>
+    </SvgIcon>
+  )
+}
diff --git a/src/app/components/CustomIcons/UndelegateStart.tsx b/src/app/components/CustomIcons/UndelegateStart.tsx
@@ -0,0 +1,27 @@
+import { FC } from 'react'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+
+export const UndelegateStartIcon: FC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect width="40" height="40" rx="20" fill="#E8F5FF" />
+        <g clipPath="url(#clip0_7489_49493)">
+          <path
+            d="M12.5 18.75L12.5 21.2L27.5 21.2L27.5 18.75L21.25 18.75L21.25 16.25L25 16.25L25 7.5L15 7.5L15 16.25L18.75 16.25L18.75 18.75L12.5 18.75Z"
+            fill="#6665D8"
+          />
+          <path
+            d="M13 23.75L13 24.25L12.5 24.25L9.25 24.25L9.25 32L18.25 32L18.25 24.25L15 24.25L14.5 24.25L14.5 23.75L14.5 21.25L14.5 20.75L15 20.75L25 20.75L25.5 20.75L25.5 21.25L25.5 23.75L25.5 24.25L25 24.25L21.75 24.25L21.75 32L30.75 32L30.75 24.25L27.5 24.25L27 24.25L27 23.75L27 19.25L21.25 19.25L18.75 19.25L13 19.25L13 23.75Z"
+            stroke="#6665D8"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_7489_49493">
+            <rect width="30" height="30" fill="white" transform="translate(5 5)" />
+          </clipPath>
+        </defs>
+      </svg>
+    </SvgIcon>
+  )
+}
diff --git a/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx b/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx
@@ -25,7 +25,9 @@ import { COLORS } from '../../../styles/theme/colors'
 import StreamIcon from '@mui/icons-material/Stream'
 import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment'
 import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
-import { UnknownIcon } from '../CustomIcons/Unknown'
+import { UndelegateStartIcon } from '../CustomIcons/UndelegateStart'
+import { UndelegateFinishIcon } from '../CustomIcons/UndelegateFinish'
+import { DelegateIcon } from '../CustomIcons/Delegate'
 
 export const EventTypeIcon: FC<{
   eventType: RuntimeEventType
@@ -37,9 +39,9 @@ export const EventTypeIcon: FC<{
     [RuntimeEventType.coregas_used]: <></>,
     [RuntimeEventType.consensus_accountswithdraw]: <WithdrawIcon fontSize="inherit" />,
     [RuntimeEventType.consensus_accountsdeposit]: <DepositIcon fontSize="inherit" />,
-    [RuntimeEventType.consensus_accountsdelegate]: <UnknownIcon fontSize="inherit" />, // TODO: use correct icon
-    [RuntimeEventType.consensus_accountsundelegate_start]: <UnknownIcon fontSize="inherit" />, // TODO: use correct icon
-    [RuntimeEventType.consensus_accountsundelegate_done]: <UnknownIcon fontSize="inherit" />, // TODO: use correct icon
+    [RuntimeEventType.consensus_accountsdelegate]: <DelegateIcon fontSize="inherit" />,
+    [RuntimeEventType.consensus_accountsundelegate_start]: <UndelegateStartIcon fontSize="inherit" />,
+    [RuntimeEventType.consensus_accountsundelegate_done]: <UndelegateFinishIcon fontSize="inherit" />,
     [RuntimeEventType.accountsmint]: <StreamIcon fontSize="inherit" htmlColor={COLORS.eucalyptus} />,
     [RuntimeEventType.accountsburn]: (
       <LocalFireDepartmentIcon fontSize="inherit" htmlColor={COLORS.eucalyptus} />
@@ -147,6 +149,7 @@ export const RuntimeEventDetails: FC<{
     [RuntimeEventType.accountsmint]: t('runtimeEvent.accountsmint'),
     [RuntimeEventType.accountsburn]: t('runtimeEvent.accountsburn'),
   }
+
   const eventName = eventTypeNames[event.type]
   switch (event.type) {
     case RuntimeEventType.coregas_used:
@@ -237,9 +240,6 @@ export const RuntimeEventDetails: FC<{
     case RuntimeEventType.accountstransfer:
     case RuntimeEventType.consensus_accountsdeposit:
     case RuntimeEventType.consensus_accountswithdraw:
-    case RuntimeEventType.consensus_accountsdelegate: // TODO show this properly
-    case RuntimeEventType.consensus_accountsundelegate_start: // TODO show this properly
-    case RuntimeEventType.consensus_accountsundelegate_done: // TODO show this properly
       return (
         <div>
           <EventTypeIcon eventType={event.type} eventName={eventName} />
@@ -264,18 +264,123 @@ export const RuntimeEventDetails: FC<{
               />
               {addressSwitchOption === AddressSwitchOption.Oasis && <CopyToClipboard value={event.body.to} />}
             </dd>
-            {/* TODO check is needed because some consensus events temporarily use this for rendering */}
-            {event.body.amount?.Amount && event.body.amount?.Denomination && (
-              <>
-                <dt>{t('runtimeEvent.fields.amount')}</dt>
-                <dd>
-                  {t('common.valueInToken', {
-                    ...getPreciseNumberFormat(event.body.amount.Amount),
-                    ticker: event.body.amount.Denomination,
-                  })}
-                </dd>
-              </>
-            )}
+            <dt>{t('runtimeEvent.fields.amount')}</dt>
+            <dd>
+              {t('common.valueInToken', {
+                ...getPreciseNumberFormat(event.body.amount.Amount),
+                ticker: event.body.amount?.Denomination,
+              })}
+            </dd>
+          </StyledDescriptionList>
+        </div>
+      )
+    case RuntimeEventType.consensus_accountsdelegate:
+      return (
+        <div>
+          <EventTypeIcon eventType={event.type} eventName={eventName} />
+          <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
+            <dt>{t('common.from')}</dt>
+            <dd>
+              <AccountLink
+                address={event.body.from}
+                scope={scope}
+                plain={addressSwitchOption !== AddressSwitchOption.Oasis}
+              />
+              {addressSwitchOption === AddressSwitchOption.Oasis && (
+                <CopyToClipboard value={event.body.from} />
+              )}
+            </dd>
+            <dt>{t('common.to')}</dt>
+            <dd>
+              <AccountLink
+                address={event.body.to}
+                scope={scope}
+                plain={addressSwitchOption !== AddressSwitchOption.Oasis}
+              />
+              {addressSwitchOption === AddressSwitchOption.Oasis && <CopyToClipboard value={event.body.to} />}
+            </dd>
+            <dt>{t('runtimeEvent.fields.amount')}</dt>
+            <dd>
+              {t('common.valueInToken', {
+                ...getPreciseNumberFormat(event.body.amount.Amount),
+                ticker: event.body.amount.Denomination,
+              })}
+            </dd>
+          </StyledDescriptionList>
+        </div>
+      )
+    case RuntimeEventType.consensus_accountsundelegate_start:
+      return (
+        <div>
+          <EventTypeIcon eventType={event.type} eventName={eventName} />
+          <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
+            <dt>{t('common.from')}</dt>
+            <dd>
+              <AccountLink
+                address={event.body.from}
+                scope={scope}
+                plain={addressSwitchOption !== AddressSwitchOption.Oasis}
+              />
+              {addressSwitchOption === AddressSwitchOption.Oasis && (
+                <CopyToClipboard value={event.body.from} />
+              )}
+            </dd>
+            <dt>{t('common.to')}</dt>
+            <dd>
+              <AccountLink
+                address={event.body.to}
+                scope={scope}
+                plain={addressSwitchOption !== AddressSwitchOption.Oasis}
+              />
+              {addressSwitchOption === AddressSwitchOption.Oasis && <CopyToClipboard value={event.body.to} />}
+            </dd>
+            <dt>{t('runtimeEvent.fields.activeShares')}</dt>
+            <dd>
+              {t('common.valueLong', {
+                ...getPreciseNumberFormat(event.body.shares),
+              })}
+            </dd>
+          </StyledDescriptionList>
+        </div>
+      )
+    case RuntimeEventType.consensus_accountsundelegate_done:
+      return (
+        <div>
+          <EventTypeIcon eventType={event.type} eventName={eventName} />
+          <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
+            <dt>{t('common.from')}</dt>
+            <dd>
+              <AccountLink
+                address={event.body.from}
+                scope={scope}
+                plain={addressSwitchOption !== AddressSwitchOption.Oasis}
+              />
+              {addressSwitchOption === AddressSwitchOption.Oasis && (
+                <CopyToClipboard value={event.body.from} />
+              )}
+            </dd>
+            <dt>{t('common.to')}</dt>
+            <dd>
+              <AccountLink
+                address={event.body.to}
+                scope={scope}
+                plain={addressSwitchOption !== AddressSwitchOption.Oasis}
+              />
+              {addressSwitchOption === AddressSwitchOption.Oasis && <CopyToClipboard value={event.body.to} />}
+            </dd>
+            <dt>{t('runtimeEvent.fields.amount')}</dt>
+            <dd>
+              {t('common.valueInToken', {
+                ...getPreciseNumberFormat(event.body.amount.Amount),
+                ticker: event.body.amount.Denomination,
+              })}
+            </dd>
+            <dt>{t('runtimeEvent.fields.debondingShares')}</dt>
+            <dd>
+              {t('common.valueLong', {
+                ...getPreciseNumberFormat(event.body.shares),
+              })}
+            </dd>
           </StyledDescriptionList>
         </div>
       )

diff --git a/src/app/components/RuntimeTransactionLabel/index.tsx b/src/app/components/RuntimeTransactionLabel/index.tsx
@@ -10,7 +10,7 @@ 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'
+import { UndelegateStartIcon } from '../CustomIcons/UndelegateStart'
 
 const getRuntimeTransactionLabel = (t: TFunction, method: string | undefined) => {
   switch (method) {
@@ -53,7 +53,7 @@ const getRuntimeTransactionIcon = (method: string | undefined) => {
     case 'consensus.Delegate':
       return <DelegateIcon sx={iconStyles} />
     case 'consensus.Undelegate':
-      return <UndelegateIcon sx={iconStyles} />
+      return <UndelegateStartIcon sx={iconStyles} />
     case 'accounts.Transfer':
       return <TransferIcon sx={iconStyles} />
     default:

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -330,7 +330,9 @@
     "gasUsed": "Gas used",
     "fields": {
       "amount": "Amount",
-      "owner": "Owner"
+      "owner": "Owner",
+      "activeShares": "Active Shares",
+      "debondingShares": "Debonding Shares"
     }
   },
   "transactionStats": {