Merge pull request #849 from oasisprotocol/ysz/paratimes

Show list of ParaTime transactions

cypress/integration/api-transaction-methods.ts

@@ -1,5 +1,9 @@
 import * as monitor from 'vendors/monitor'
 import * as oasisscan from 'vendors/oasisscan'
+import {
+  OperationsRowMethodEnum,
+} from 'vendors/oasisscan/index'
+
 
 function ignoreTimeoutError() {
   // Note: This is strongly discouraged. If it stops working, we converted to
@@ -35,16 +39,17 @@ describe('check all transaction methods from API are mapped in transactionMethod
     ignoreTimeoutError() // Ignore if API is not responding
 
     cy.request({
-      url: 'https://api.oasisscan.com/mainnet/chain/methods',
+      url: 'https://api.oasisscan.com/mainnet/chain/methods', // does not include consensus methods
       retryOnNetworkFailure: false,
       failOnStatusCode: false,
       timeout: 5000,
     }).should(response => {
       if (!response.isOkStatusCode) return // Ignore if API is broken
 
       const allApiMethods = response.body.data.list
-      expect(allApiMethods).to.have.length(Object.keys(oasisscan.transactionMethodMap).length)
-      expect(oasisscan.transactionMethodMap).to.have.keys(allApiMethods)
+
+      expect(allApiMethods).to.have.length(Object.keys(OperationsRowMethodEnum).length)
+      expect(oasisscan.transactionMethodMap).to.include.keys(allApiMethods)
     })
   })
 })

src/app/components/Transaction/__tests__/index.test.tsx

@@ -103,6 +103,9 @@ describe('<Transaction  />', () => {
         fee: undefined,
         level: undefined,
         status: true,
+        runtimeName: undefined,
+        runtimeId: undefined,
+        round: undefined,
       },
       network,
     )
@@ -123,6 +126,9 @@ describe('<Transaction  />', () => {
         fee: undefined,
         level: undefined,
         status: true,
+        runtimeName: undefined,
+        runtimeId: undefined,
+        round: undefined,
       },
       network,
     )
@@ -156,4 +162,29 @@ describe('<Transaction  />', () => {
       'https://testnet.oasismonitor.com/operation/ff1234',
     )
   })
+
+  it('should render paratime transaction row', () => {
+    const runtimeId = '123'
+
+    renderComponent(
+      store,
+      'source',
+      {
+        ...transaction,
+        runtimeId,
+        runtimeName: 'Name',
+        round: 951933,
+        type: transactionTypes.TransactionType.ConsensusDeposit,
+      },
+      network,
+    )
+
+    expect(screen.getByText('common.round')).toBeInTheDocument()
+    expect(screen.queryByText('common.block')).not.toBeInTheDocument()
+    expect(screen.getByTestId('explorer-link')).toHaveAttribute(
+      'href',
+      `https://oasisscan.com/paratimes/transactions/ff1234?runtime=${runtimeId}`,
+    )
+    expect(screen.getByLabelText('Inherit')).toHaveStyleRule('stroke', '#FFCA58')
+  })
 })

src/app/components/Transaction/index.tsx

@@ -11,6 +11,7 @@ import {
   Cube,
   FormNext,
   Money,
+  Inherit,
   LineChart,
   New,
   LinkPrevious,
@@ -72,7 +73,6 @@ export function Transaction(props: TransactionProps) {
   const transaction = props.transaction
   const referenceAddress = props.referenceAddress
   const amount = <AmountFormatter amount={transaction.amount!} size={isMobile ? '16px' : 'medium'} />
-
   let side: TransactionSide
   let otherAddress = ''
 
@@ -183,6 +183,32 @@ export function Transaction(props: TransactionProps) {
       [TransactionSide.Received]: unrecognizedTransaction,
       [TransactionSide.Sent]: unrecognizedTransaction,
     },
+    [transactionTypes.TransactionType.ConsensusDeposit]: {
+      [TransactionSide.Received]: {
+        destination: t('common.from', 'From'),
+        icon: () => <Inherit color="#FFCA58" />,
+        header: () => (
+          <Trans
+            i18nKey="account.transaction.consensus.received"
+            t={t}
+            values={{ runtimeName: transaction.runtimeName }}
+            defaults="{{runtimeName}} ParaTime transfer"
+          />
+        ),
+      },
+      [TransactionSide.Sent]: {
+        destination: t('common.to', 'To'),
+        icon: () => <Inherit color="#FFCA58" />,
+        header: () => (
+          <Trans
+            i18nKey="account.transaction.consensus.sent"
+            t={t}
+            values={{ runtimeName: transaction.runtimeName }}
+            defaults="{{runtimeName}} ParaTime deposit"
+          />
+        ),
+      },
+    },
     [transactionTypes.TransactionType.StakingAllow]: {
       [TransactionSide.Received]: unrecognizedTransaction,
       [TransactionSide.Sent]: unrecognizedTransaction,
@@ -231,6 +257,22 @@ export function Transaction(props: TransactionProps) {
       [TransactionSide.Received]: unrecognizedTransaction,
       [TransactionSide.Sent]: unrecognizedTransaction,
     },
+    [transactionTypes.TransactionType.ConsensusWithdraw]: {
+      [TransactionSide.Received]: unrecognizedTransaction,
+      [TransactionSide.Sent]: unrecognizedTransaction,
+    },
+    [transactionTypes.TransactionType.ConsensusAccountsParameters]: {
+      [TransactionSide.Received]: unrecognizedTransaction,
+      [TransactionSide.Sent]: unrecognizedTransaction,
+    },
+    [transactionTypes.TransactionType.ConsensusBalance]: {
+      [TransactionSide.Received]: unrecognizedTransaction,
+      [TransactionSide.Sent]: unrecognizedTransaction,
+    },
+    [transactionTypes.TransactionType.ConsensusAccount]: {
+      [TransactionSide.Received]: unrecognizedTransaction,
+      [TransactionSide.Sent]: unrecognizedTransaction,
+    },
   }
 
   const isTypeRecognized = (type: string | undefined): type is transactionTypes.TransactionType =>
@@ -243,7 +285,12 @@ export function Transaction(props: TransactionProps) {
   const Icon = matchingConfiguration.icon
   const header = matchingConfiguration.header()
   const destination = matchingConfiguration.destination
-  const blockExplorerLink = config[props.network][backend()]?.blockExplorer
+  const backendLinks = config[props.network][backend()]
+  const externalExplorerLink = transaction.runtimeId
+    ? backendLinks.blockExplorerParatimes
+        ?.replace('{{txHash}}', encodeURIComponent(transaction.hash))
+        .replace('{{runtimeId}}', encodeURIComponent(transaction.runtimeId))
+    : backendLinks.blockExplorer.replace('{{txHash}}', encodeURIComponent(transaction.hash))
 
   return (
     <Card
@@ -303,13 +350,21 @@ export function Transaction(props: TransactionProps) {
                   value={intlDateTimeFormat(transaction.timestamp!)}
                 />
 
-                {transaction.level && (
+                {!transaction.runtimeId && transaction.level && (
                   <InfoBox
                     icon={Cube}
                     label={t('common.block', 'Block')}
                     value={transaction.level.toString()}
                   />
                 )}
+
+                {transaction.runtimeId && transaction.round && (
+                  <InfoBox
+                    icon={Cube}
+                    label={t('common.round', 'Round')}
+                    value={transaction.round.toString()}
+                  />
+                )}
               </Box>
             </Grid>
           )}
@@ -331,7 +386,7 @@ export function Transaction(props: TransactionProps) {
       </StyledCardBody>
       <CardFooter justify="center" fill="horizontal">
         <Anchor
-          href={blockExplorerLink.replace('{{txHash}}', encodeURIComponent(transaction.hash))}
+          href={externalExplorerLink}
           target="_blank"
           rel="noopener"
           data-testid="explorer-link"

src/app/state/transaction/types.ts

@@ -17,6 +17,11 @@ export enum TransactionType {
   BeaconPvssCommit = 'beacon.PVSSCommit',
   BeaconPvssReveal = 'beacon.PVSSReveal',
   BeaconVrfProve = 'beacon.VRFProve',
+  ConsensusDeposit = 'consensus.Deposit',
+  ConsensusWithdraw = 'consensus.Withdraw',
+  ConsensusAccountsParameters = 'consensus.Parameters',
+  ConsensusBalance = 'consensus.Balance',
+  ConsensusAccount = 'consensus.Account',
 }
 
 export interface Transaction {
@@ -29,6 +34,11 @@ export interface Transaction {
   timestamp: number | undefined
   to: string | undefined
   type: TransactionType
+  // These are undefined on consensus transaction
+  // Only appear on ParaTime transaction
+  runtimeName: string | undefined
+  runtimeId: string | undefined
+  round: number | undefined
 }
 
 /* --- STATE --- */

src/config.ts

@@ -1,6 +1,23 @@
 import { BackendAPIs } from 'vendors/backend'
+import { NetworkType } from 'app/state/network/types'
 
-export const config = {
+type BackendApiUrls = {
+  explorer: string
+  blockExplorer: string
+  blockExplorerParatimes?: string
+}
+
+type BackendProviders = {
+  grpc: string
+  [BackendAPIs.OasisMonitor]: BackendApiUrls
+  [BackendAPIs.OasisScan]: BackendApiUrls
+}
+
+type BackendConfig = {
+  [key in NetworkType]: BackendProviders
+}
+
+export const config: BackendConfig = {
   mainnet: {
     [BackendAPIs.OasisMonitor]: {
       explorer: 'https://monitor.oasis.dev',
@@ -9,6 +26,7 @@ export const config = {
     [BackendAPIs.OasisScan]: {
       explorer: 'https://api.oasisscan.com/mainnet',
       blockExplorer: 'https://oasisscan.com/transactions/{{txHash}}',
+      blockExplorerParatimes: 'https://oasisscan.com/paratimes/transactions/{{txHash}}?runtime={{runtimeId}}',
     },
     grpc: 'https://grpc.oasis.dev',
   },
@@ -21,6 +39,8 @@ export const config = {
     [BackendAPIs.OasisScan]: {
       explorer: 'https://api.oasisscan.com/testnet',
       blockExplorer: 'https://testnet.oasisscan.com/transactions/{{txHash}}',
+      blockExplorerParatimes:
+        'https://testnet.oasisscan.com/paratimes/transactions/{{txHash}}?runtime={{runtimeId}}',
     },
   },
   local: {
@@ -32,6 +52,8 @@ export const config = {
     [BackendAPIs.OasisScan]: {
       explorer: 'http://localhost:9001',
       blockExplorer: 'http://localhost:9001/data/transactions?operation_id={{txHash}}',
+      blockExplorerParatimes:
+        'http://localhost:9001/data/paratimes/transactions/{{txHash}}?runtime={{runtimeId}}',
     },
   },
 }

src/locales/en/translation.json

@@ -56,6 +56,10 @@
         "received": "Received <0></0> delegation in escrow",
         "sent": "Delegated <0></0> to validator"
       },
+      "consensus": {
+        "received": "{{runtimeName}} ParaTime transfer",
+        "sent": "{{runtimeName}} ParaTime deposit"
+      },
       "explorerLink": "View transaction records through explorer",
       "failed": "Failed",
       "loadingError": "Couldn't load transactions.",
@@ -88,6 +92,7 @@
     "delegator": "Delegator",
     "from": "From",
     "hash": "Tx Hash",
+    "round": "Round",
     "time": "Time",
     "to": "To",
     "unavailable": "Unavailable",