Merge pull request #1659 from oasisprotocol/mz/rofl

Support ROFL transactions
oasisprotocol · Dec 17, 2024 · 62d8d79 · 62d8d79
2 parents 6c925cf + d62c6ed
commit 62d8d79
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 15 deletions.
diff --git a/.changelog/1659.feature.md b/.changelog/1659.feature.md
@@ -0,0 +1 @@
+Support ROFL transactions
diff --git a/src/app/components/CodeDisplay/index.tsx b/src/app/components/CodeDisplay/index.tsx
@@ -11,11 +11,18 @@ import { base64ToHex } from '../../utils/helpers'
 type CodeDisplayProps = {
   code: ReactNode
   copyToClipboardValue: string
-  label: string
+  label?: string
   extraTopPadding?: boolean
+  withCopyButton?: boolean
 }
 
-const CodeDisplay: FC<CodeDisplayProps> = ({ code, copyToClipboardValue, label, extraTopPadding }) => {
+const CodeDisplay: FC<CodeDisplayProps> = ({
+  code,
+  copyToClipboardValue,
+  label,
+  extraTopPadding,
+  withCopyButton = true,
+}) => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
 
@@ -34,13 +41,17 @@ const CodeDisplay: FC<CodeDisplayProps> = ({ code, copyToClipboardValue, label,
           pt: extraTopPadding ? 4 : 0,
         }}
       >
-        <Typography variant="h4" component="h4">
-          {label}
-        </Typography>
-        <CopyToClipboard
-          value={copyToClipboardValue}
-          label={isMobile ? t('common.copy') : t('contract.copyButton', { subject: label })}
-        />
+        {label && (
+          <Typography variant="h4" component="h4">
+            {label}
+          </Typography>
+        )}
+        {withCopyButton && (
+          <CopyToClipboard
+            value={copyToClipboardValue}
+            label={isMobile ? t('common.copy') : t('contract.copyButton', { subject: label })}
+          />
+        )}
       </Box>
 
       <ScrollableDataDisplay data={code} />
@@ -66,21 +77,24 @@ export const RawDataDisplay: FC<RawDataDisplayProps> = ({ data, label, extraTopP
 
 const StyledPre = styled('pre')({
   margin: 0,
+  whiteSpace: 'break-spaces',
 })
 
 type JsonCodeDisplayProps = {
   data: Record<string, any>
-  label: string
+  label?: string
+  withCopyButton?: boolean
 }
 
-export const JsonCodeDisplay: FC<JsonCodeDisplayProps> = ({ data, label }) => {
+export const JsonCodeDisplay: FC<JsonCodeDisplayProps> = ({ data, label, withCopyButton = true }) => {
   const formattedJson = JSON.stringify(data, null, 2)
 
   return (
     <CodeDisplay
       code={<StyledPre>{formattedJson}</StyledPre>}
       copyToClipboardValue={formattedJson}
       label={label}
+      withCopyButton={withCopyButton}
     />
   )
 }
diff --git a/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx b/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx
@@ -26,6 +26,7 @@ import { MaybeEventErrorLine } from './EventError'
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
+import MemoryIcon from '@mui/icons-material/Memory'
 import LanIcon from '@mui/icons-material/Lan'
 import LanOutlinedIcon from '@mui/icons-material/LanOutlined'
 import { MethodIcon } from '../ConsensusTransactionMethod'
@@ -53,6 +54,12 @@ const getRuntimeEventMethodLabel = (t: TFunction, method: string | undefined) =>
       return t('runtimeEvent.accountsmint')
     case RuntimeEventType.accountsburn:
       return t('runtimeEvent.accountsburn')
+    case RuntimeEventType.roflapp_created:
+      return t('runtimeEvent.roflAppCreated')
+    case RuntimeEventType.roflapp_updated:
+      return t('runtimeEvent.roflAppUpdated')
+    case RuntimeEventType.roflapp_removed:
+      return t('runtimeEvent.roflAppRemoved')
     default:
       return method || t('common.unknown')
   }
@@ -88,6 +95,9 @@ export const EventTypeIcon: FC<{
     [RuntimeEventType.accountsburn]: (
       <MethodIcon color="orange" icon={<LocalFireDepartmentIcon />} {...props} />
     ),
+    [RuntimeEventType.roflapp_created]: <MethodIcon color="green" icon={<MemoryIcon />} {...props} />,
+    [RuntimeEventType.roflapp_removed]: <MethodIcon color="orange" icon={<MemoryIcon />} {...props} />,
+    [RuntimeEventType.roflapp_updated]: <MethodIcon color="green" icon={<MemoryIcon />} {...props} />,
   }
 
   return (
@@ -362,6 +372,19 @@ const RuntimeEventDetailsInner: FC<{
           </StyledDescriptionList>
         </div>
       )
+    case RuntimeEventType.roflapp_created:
+    case RuntimeEventType.roflapp_removed:
+    case RuntimeEventType.roflapp_updated:
+      return (
+        <div>
+          <EventTypeIcon eventType={event.type} />
+          <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
+            <MaybeEventErrorLine event={event} />
+            <dt>{t('common.id')}</dt>
+            <dd>{event.body.id}</dd>
+          </StyledDescriptionList>
+        </div>
+      )
     default:
       exhaustedTypeWarning('Unexpected event type', event.type)
       return (

diff --git a/src/app/components/RuntimeTransactionMethod/index.tsx b/src/app/components/RuntimeTransactionMethod/index.tsx
@@ -6,6 +6,7 @@ import FileCopyIcon from '@mui/icons-material/FileCopy'
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
+import MemoryIcon from '@mui/icons-material/Memory'
 import QuestionMarkIcon from '@mui/icons-material/QuestionMark'
 import LanIcon from '@mui/icons-material/Lan'
 import LanOutlinedIcon from '@mui/icons-material/LanOutlined'
@@ -31,6 +32,14 @@ const getRuntimeTransactionLabel = (t: TFunction, method: string | undefined) =>
       return t('transactions.method.consensus.delegate')
     case 'consensus.Undelegate':
       return t('transactions.method.consensus.undelegate')
+    case 'rofl.Create':
+      return t('transactions.method.rofl.create')
+    case 'rofl.Register':
+      return t('transactions.method.rofl.register')
+    case 'rofl.Remove':
+      return t('transactions.method.rofl.remove')
+    case 'rofl.Update':
+      return t('transactions.method.rofl.update')
     default:
       return method || t('common.unknown')
   }
@@ -50,6 +59,10 @@ const getRuntimeTransactionLabel = (t: TFunction, method: string | undefined) =>
  *   - "consensus.Undelegate"
  *   - "evm.Create"
  *   - "evm.Call"
+ *   - "rofl.Create"
+ *   - "rofl.Update"
+ *   - "rofl.Remove"
+ *   - "rofl.Register"
  */
 const getRuntimeTransactionIcon = (method: string | undefined, label: string, truncate?: boolean) => {
   const props = {
@@ -73,6 +86,14 @@ const getRuntimeTransactionIcon = (method: string | undefined, label: string, tr
       return <MethodIcon icon={<LanOutlinedIcon />} {...props} />
     case 'accounts.Transfer':
       return <MethodIcon color="green" icon={<ArrowForwardIcon />} {...props} />
+    case 'rofl.Create':
+      return <MethodIcon color="green" icon={<MemoryIcon />} {...props} />
+    case 'rofl.Register':
+      return <MethodIcon icon={<MemoryIcon />} {...props} />
+    case 'rofl.Remove':
+      return <MethodIcon color="orange" icon={<MemoryIcon />} {...props} />
+    case 'rofl.Update':
+      return <MethodIcon color="green" icon={<MemoryIcon />} {...props} />
     default:
       return <MethodIcon color="gray" icon={<QuestionMarkIcon />} {...props} />
   }

diff --git a/src/app/pages/RuntimeTransactionDetailPage/index.tsx b/src/app/pages/RuntimeTransactionDetailPage/index.tsx
@@ -30,6 +30,8 @@ import { getFiatCurrencyForScope, showFiatValues } from '../../../config'
 import { convertToNano, getGasPrice } from '../../utils/number-utils'
 import { useWantedTransaction } from '../../hooks/useWantedTransaction'
 import { MultipleTransactionsWarning } from '../../components/Transactions/MultipleTransactionsWarning'
+import { JsonCodeDisplay } from '../..//components/CodeDisplay'
+import { isRoflTransaction } from '../../utils/transaction'
 
 export const RuntimeTransactionDetailPage: FC = () => {
   const { t } = useTranslation()
@@ -242,6 +244,15 @@ export const RuntimeTransactionDetailView: FC<{
             </>
           )}
 
+          {isRoflTransaction(transaction.method) && !!transaction.body && (
+            <>
+              <dt>{t('transaction.rawData')}</dt>
+              <dd>
+                <JsonCodeDisplay data={transaction.body} withCopyButton={false} />
+              </dd>
+            </>
+          )}
+
           {!transaction.encryption_envelope && transaction.body?.init_code && (
             <>
               <dt>{t('transaction.rawData')}</dt>

diff --git a/src/app/utils/transaction.ts b/src/app/utils/transaction.ts
@@ -28,3 +28,7 @@ export const getConsensusTransactionAmount = (transaction: Transaction) => {
       return undefined
   }
 }
+export const isRoflTransaction = (method: string | undefined): boolean => {
+  const roflMethods = ['rofl.Create', 'rofl.Update', 'rofl.Remove', 'rofl.Register']
+  return method ? roflMethods.includes(method) : false
+}
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -449,6 +449,12 @@
       "evm": {
         "call": "Contract Call",
         "create": "Contract Creation"
+      },
+      "rofl": {
+        "create": "ROFL Create",
+        "register": "ROFL Register",
+        "remove": "ROFL Remove",
+        "update": "ROFL Update"
       }
     }
   },
@@ -478,6 +484,9 @@
     "consensusDelegate": "Delegate to consensus",
     "consensusUndelegateStart": "Start to undelegate from consensus",
     "consensusUndelegateDone": "Undelegate from consensus finished",
+    "roflAppCreated": "ROFL App Created",
+    "roflAppUpdated": "ROFL App Updated",
+    "roflAppRemoved": "ROFL App Removed",
     "evmLog": "EVM log message",
     "filter": {
       "all": "All events",

diff --git a/src/oasis-nexus/generated/api.ts b/src/oasis-nexus/generated/api.ts
diff --git a/src/stories/Icons.stories.tsx b/src/stories/Icons.stories.tsx
@@ -14,7 +14,7 @@ export default {
 
 const Template: StoryFn = () => {
   return (
-    <Box>
+    <Box sx={{ background: COLORS.white, p: 5 }}>
       {Object.values(ConsensusTxMethod).map(method => (
         <Box
           key={method}
@@ -42,11 +42,15 @@ const storyRuntimeMethods = [
   'consensus.Undelegate',
   'evm.Create',
   'evm.Call',
+  'rofl.Register',
+  'rofl.Create',
+  'rofl.Update',
+  'rofl.Remove',
 ]
 
 const RuntimeTemplate: StoryFn = () => {
   return (
-    <Box>
+    <Box sx={{ background: COLORS.white, p: 5 }}>
       {storyRuntimeMethods.map(method => (
         <Box
           key={method}
@@ -70,7 +74,7 @@ const storyTokensMethods = ['Transfer', 'Approval', 'Minting', 'Burning']
 
 const TokensTemplate: StoryFn = () => {
   return (
-    <Box>
+    <Box sx={{ background: COLORS.white, p: 5 }}>
       {storyTokensMethods.map(method => (
         <Box
           key={method}
@@ -92,7 +96,7 @@ export const TokenTransactionIcons: StoryObj = {
 
 const EventsTemplate: StoryFn = () => {
   return (
-    <Box>
+    <Box sx={{ background: COLORS.white, p: 5 }}>
       {Object.values(RuntimeEventType).map(method => (
         <Box
           key={method}