base address identification

Author: Quint-S

src/components/extrinsics/EthereumTransfer.tsx

@@ -0,0 +1,38 @@
+import { gql, useQuery } from '@apollo/client'
+import React from "react";
+import {TerminalLoading} from "../TerminalLoading.tsx";
+import {DetailLabel, DetailRow, DetailValue} from "../../pages/AccountDetails.tsx";
+
+interface ExtrinsicEventsProps {
+  extrinsicId: string;
+}
+export const GET_LAST_EVM_EVENT = gql`
+  query GetLastEVMEvent($blockNumber: BigFloat!, $extrinsicId: Int!) {
+    events(last: 1, filter: {and: {blockNumber: {equalTo: $blockNumber}, extrinsicId: {equalTo: $extrinsicId}}}) {
+      nodes{
+        data
+      }
+    }
+  }
+`
+
+export const EthereumTransfer: React.FC<ExtrinsicEventsProps> = ({ extrinsicId }) => {
+  const { loading, error, data } = useQuery(GET_LAST_EVM_EVENT, {
+    variables: {
+      blockNumber: extrinsicId.split('-')[0],
+      extrinsicId: parseInt(extrinsicId.split('-')[1] || '0')
+    }});
+
+  return (<>
+      {loading && <DetailRow><TerminalLoading /></DetailRow>}
+      {error && <div>Error: {error.message}</div>}
+
+      {data && (
+          <DetailRow>
+            <DetailLabel>Transfer to Base:</DetailLabel>
+            <DetailValue><a target={'_blank'} href={`https://basescan.org/address/${JSON.parse(data.events.nodes[0].data)[0]}`}>{JSON.parse(data.events.nodes[0].data)[0]}</a></DetailValue>
+          </DetailRow>
+      )}
+      </>
+  )
+}

src/pages/AccountTransfers.tsx

@@ -53,6 +53,7 @@ export const AccountTransfers = () => {
   if (!address) {
     return <div>Error: No address provided</div>
   }
+  const formattedNumber = (num: number) => num < 10 ? `000${num}` : num < 100 ? `00${num}` : num < 1000 ? `0${num}` : `${num}`;
 
   return (
       <TerminalWindow title={`account_transfers`} footer={pageControls}>
@@ -63,11 +64,13 @@ export const AccountTransfers = () => {
         {(data?.transfers?.totalCount ?? 0) > 0 && (
             <div style={{padding: '8px 0',
               borderTop: '1px solid #0050a1'}}>
-            <DataTable names={['Amount', 'From', 'To', 'Height', 'Timestamp']} records={data.transfers.nodes.map((transfer: { id: string; amount: number; from: string; to: string; blockNumber: string; timestamp: string | number | Date }) => {
+            <DataTable names={['Amount', 'From', 'To', 'Height', 'Timestamp']} records={data.transfers.nodes.map((transfer: {
+              extrinsicId: number;
+              id: string; amount: number; from: string; to: string; blockNumber: string; timestamp: string | number | Date }) => {
               const formattedFrom = <ResponsiveAddress address={transfer.from}/>;
               const formattedTo = <ResponsiveAddress address={transfer.to}/>;
 
-              return {id: transfer.id, data: [formatTORUS(transfer.amount), transfer.from === address ? formattedFrom : <Link to={`/account/${transfer.from}`}>{formattedFrom}</Link>, transfer.to === address ? formattedTo : <Link to={`/account/${transfer.to}`}><ResponsiveAddress address={transfer.to}/></Link>, <Link to={`/block/${transfer.blockNumber}`}>{transfer.blockNumber}</Link>, new Date(transfer.timestamp).toLocaleString()
+              return {id: transfer.id, data: [formatTORUS(transfer.amount), transfer.from === address ? formattedFrom : <Link to={`/account/${transfer.from}`}>{formattedFrom}</Link>, transfer.to === address ? formattedTo : <Link to={`/account/${transfer.to}`}><ResponsiveAddress address={transfer.to}/></Link>, <Link to={`/extrinsic/${transfer.blockNumber}-${formattedNumber(transfer.extrinsicId)}`}>{transfer.blockNumber}-{transfer.extrinsicId}</Link>, new Date(transfer.timestamp).toLocaleString()
                 ]}
             })} /></div>
         )}

src/pages/ExtrinsicDetails.tsx

@@ -9,6 +9,7 @@ import { DetailLabel } from './AccountDetails.tsx'
 import { DetailRow } from './AccountDetails.tsx'
 import { ExtrinsicEvents } from './ExtrinsicEvents.tsx';
 import { Helmet } from 'react-helmet-async';
+import {EthereumTransfer} from "../components/extrinsics/EthereumTransfer.tsx";
 
 export const GET_EXTRINSIC = gql`
   query GetExtrinsic($id: String!) {
@@ -31,24 +32,26 @@ export const GET_EXTRINSIC = gql`
 export const GET_EXTRINSIC_BY_HASH = gql`
   query GetExtrinsic($id: String!) {
     extrinsics(first: 1, filter: {hash: {equalTo: $id}}) {
-    nodes{
-      id
-      module
-      method
-      blockNumber
-      extrinsicId
-      tip
-      version
-      signer
-      success
-      hash
-      args
+      nodes{
+        id
+        module
+        method
+        blockNumber
+        extrinsicId
+        tip
+        version
+        signer
+        success
+        hash
+        args
       }
     }
   }
 `
 
 
+
+
 export const ExtrinsicDetails = () => {
   const { id } = useParams()
   const { loading, error, data } = useQuery(id?.startsWith('0x') ? GET_EXTRINSIC_BY_HASH : GET_EXTRINSIC, {
@@ -107,6 +110,7 @@ export const ExtrinsicDetails = () => {
             <DetailLabel>Method:</DetailLabel>
             <DetailValue>{extrinsic.method}</DetailValue>
           </DetailRow>
+          {extrinsic.module === 'ethereum' && <EthereumTransfer extrinsicId={extrinsic.id} />}
           <DetailRow>
             <DetailLabel>Signer:</DetailLabel>
             <DetailValue>{extrinsic.signer} <CopyButton textToCopy={extrinsic.signer}/></DetailValue>
@@ -123,6 +127,7 @@ export const ExtrinsicDetails = () => {
             <DetailLabel>Arguments:</DetailLabel>
             <DetailValue>{extrinsic.args}</DetailValue>
           </DetailRow>
+
             <TerminalTabs
                 tabs={[
                     {