Make N3 Gas Claims look like Gas Claims on the Activity Page (#2470)

* add changes and test

* fix linting

* fix test

* trim N3ClaimAbstract

__tests__/actions/transactionHistoryActions.test.js

@@ -0,0 +1,90 @@
+import React from 'react'
+import { computeN3Activity } from '../../app/actions/transactionHistoryActions'
+
+describe('N3ClaimTest', () => {
+    const addr = 'NdFBzZVMUXjdwnaDfeMK4zEVYEzjiVhFBt'
+    const netwrk = 'MainNet'
+    const transactions = {
+        items: [{
+            block: 3080890,
+            hash: "0xe634006ad06edeab24160c2fb6e42f623a1e3163eea952fdfc0df186f86b50b7",
+            invocations: [{
+                block: 3080890,
+                hash: "0xe634006ad06edeab24160c2fb6e42f623a1e3163eea952fdfc0df186f86b50b7",
+                metadata: {
+                    amount: 0,
+                    contract_name: "NeoToken",
+                    data: "",
+                    from: "NdFBzZVMUXjdwnaDfeMK4zEVYEzjiVhFBt",
+                    image: "http://localhost:3000/dist1ac81dc19335d81d593ebec5757d5a71.png",
+                    scripthash: "0xef4073a0f2b305a38ec4050e4d3d28bc40ea63f5",
+                    summary: "NeoToken transfer to NdFBzZVMUXjdwnaDfeMK4zEVYEzjiVhFBt",
+                    symbol: "NEO",
+                    to: "NdFBzZVMUXjdwnaDfeMK4zEVYEzjiVhFBt"},
+                netfee: "122752",
+                sender: "NdFBzZVMUXjdwnaDfeMK4zEVYEzjiVhFBt",
+                sysfee: "997775",
+                time: "1678191213.077000",
+                type: "nep17_transfer",
+                vmstate: "HALT"}],
+            netfee: "122752",
+            notifications: [{
+                contract: "0xef4073a0f2b305a38ec4050e4d3d28bc40ea63f5",
+                event_name: "Transfer",
+                state: [{
+                    type: "ByteString",
+                    value: "vhy7ee8QtmaZ7MtM2XIJ+vhZg44="
+                }, {
+                    type: "ByteString",
+                    value: "vhy7ee8QtmaZ7MtM2XIJ+vhZg44="
+                }, {
+                    type: "Integer",
+                    value: "0"
+                }]
+                }, {
+                contract: "0xd2a4cff31913016155e38e474a2c06d08be276cf",
+                event_name: "Transfer",
+                state: [{
+                    type: "Any"
+                }, {
+                    type: "ByteString",
+                    value: "vhy7ee8QtmaZ7MtM2XIJ+vhZg44="
+                }, {
+                    type: "Integer",
+                    value: "233475354"
+                }]
+            }],
+            sender: "NdFBzZVMUXjdwnaDfeMK4zEVYEzjiVhFBt",
+            sysfee: "997775",
+            time: "1678191213.077000",
+            transfers: [{
+                amount: "0",
+                block: 3080890,
+                from: "NdFBzZVMUXjdwnaDfeMK4zEVYEzjiVhFBt",
+                scripthash: "0xef4073a0f2b305a38ec4050e4d3d28bc40ea63f5",
+                time: "1678191213.077000",
+                to: "NdFBzZVMUXjdwnaDfeMK4zEVYEzjiVhFBt",
+                transferindex: "3080890.2",
+                txid: "0xe634006ad06edeab24160c2fb6e42f623a1e3163eea952fdfc0df186f86b50b7"
+                }, {
+                amount: "233475354",
+                block: 3080890,
+                from: "mint",
+                scripthash: "0xd2a4cff31913016155e38e474a2c06d08be276cf",
+                time: "1678191213.077000",
+                to: "NdFBzZVMUXjdwnaDfeMK4zEVYEzjiVhFBt",
+                transferindex: "3080890.3",
+                txid: "0xe634006ad06edeab24160c2fb6e42f623a1e3163eea952fdfc0df186f86b50b7"
+            }],
+            vmstate: "HALT"
+        }]
+    }
+
+    test('should update the tx so it appears to be a Gas claim', async () => {
+        const wrapper = await computeN3Activity(transactions, addr, netwrk)
+        expect(wrapper[0].type).toEqual("CLAIM")
+        expect(wrapper[0].metadata.summary).toEqual("GAS Claim to NdFBzZVMUXjdwnaDfeMK4zEVYEzjiVhFBt")
+        expect(wrapper[0].metadata.symbol).toEqual('GAS')
+        expect(wrapper[0].metadata.amount).toEqual(2.33475354)
+    })
+})

app/actions/transactionHistoryActions.js

@@ -147,6 +147,19 @@ export async function computeN3Activity(
           default:
             break
         }
+        // check for gas claim
+        if (
+          invocation.metadata.scripthash ===
+            '0xef4073a0f2b305a38ec4050e4d3d28bc40ea63f5' &&
+          invocation.metadata.amount === 0
+        ) {
+          invocation.type = 'CLAIM'
+          invocation.metadata.summary = `GAS Claim to ${invocation.metadata.to}`
+          invocation.metadata.symbol = 'GAS'
+          image = getImageBySymbol(invocation.metadata.symbol)
+          invocation.metadata.amount =
+            Number(item.transfers[1]?.amount) / 10 ** 8
+        }
         // flatten the invocations into individual events to support existing components
         invocation.metadata.image = image
         invocation.hash = item.hash

app/components/Blockchain/Transaction/N3ClaimAbstract.jsx

@@ -0,0 +1,45 @@
+// @flow
+import React from 'react'
+import classNames from 'classnames'
+import { injectIntl } from 'react-intl'
+import styles from './Transaction.scss'
+import ClaimIcon from '../../../assets/icons/claim.svg'
+
+type Props = {
+  amount: number,
+  image: string,
+  isPending: boolean,
+  symbol: string,
+  txDate: React$Node,
+}
+
+class N3ClaimAbstract extends React.Component<Props> {
+  render = () => {
+    const { amount, image, isPending, symbol, txDate } = this.props
+    return (
+      <div className={classNames(styles.transactionContainerN3)}>
+        <div className={styles.abstractContainerN3}>
+          <div className={styles.txTypeIconContainerN3}>
+            <div className={styles.sendIconContainer}>
+              <ClaimIcon />
+            </div>
+          </div>
+          {isPending ? 'Pending' : txDate}
+          <div className={styles.txLabelContainerN3}>GAS Claim</div>
+        </div>
+
+        <div className={styles.txToContainerN3}>
+          <div className={styles.txTransferContainerN3}>
+            <div className={styles.txTokenContainerN3}>
+              <img src={image} />
+              {symbol}
+            </div>
+            <div className={styles.txAmountContainerN3}>{amount}</div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default injectIntl(N3ClaimAbstract)

app/components/Blockchain/Transaction/Transaction.jsx

@@ -16,6 +16,7 @@ import N3VoteAbstract from './N3VoteAbstract'
 import N3NEP17SendAbstract from './N3NEP17SendAbstract'
 import N3NEP17ReceiveAbstract from './N3NEP17ReceiveAbstract'
 import N3ContractInvocationAbstract from './N3ContractInvocationAbstract'
+import N3ClaimAbstract from './N3ClaimAbstract'
 import InfoIcon from '../../../assets/icons/info.svg'
 import { openExplorerTx } from '../../../core/explorer'
 import Tooltip from '../../Tooltip'
@@ -216,6 +217,8 @@ export default class Transaction extends React.Component<Props> {
         return <N3NEP11SendAbstract {...metadata} />
       case TX_TYPES.N3VOTE:
         return <N3VoteAbstract {...metadata} />
+      case TX_TYPES.CLAIM:
+        return <N3ClaimAbstract {...metadata} />
       default:
         console.warn('renderTxTypeIcon() invoked with an invalid argument!', {
           type,