draft: All messages status table

alm/.env.bsc.example

@@ -1,19 +1,34 @@
-COMMON_HOME_BRIDGE_ADDRESS=0x1ee6E3E3d2DE779858728E157B3B9C488bA7b706
-COMMON_FOREIGN_BRIDGE_ADDRESS=0x3A5A320a2f98a3Fe39c9040e7e3E9caA7F0D5bd6
+COMMON_HOME_BRIDGE_ADDRESS=0x2CA5411c4bf447Cc27CD6E6d1d046f922A27C399
+COMMON_FOREIGN_BRIDGE_ADDRESS=0x63C47c296B63bE888e9af376bd927C835014039f
 
 COMMON_HOME_RPC_URL=https://rpc.fuse.io
-COMMON_FOREIGN_RPC_URL=https://bsc-dataseed.binance.org/
-
-# Keep subgraph url empty if not available, the alm would automatically work on web3
-HOME_SUBGRAPH_URL=https://api.thegraph.com/subgraphs/name/mul53/fuse-bscfuse-fuse-amb-bridge
-FOREIGN_SUBGRAPH_URL=https://api.thegraph.com/subgraphs/name/mul53/fuse-bscfuse-bsc-amb-bridge
+COMMON_FOREIGN_RPC_URL=https://mainnet.infura.io/v3/
 
 ALM_HOME_NETWORK_NAME=Fuse
-ALM_FOREIGN_NETWORK_NAME=BSC
+ALM_FOREIGN_NETWORK_NAME=Ethereum
 
 ALM_HOME_EXPLORER_TX_TEMPLATE=https://explorer.fuse.io/tx/%s
-ALM_FOREIGN_EXPLORER_TX_TEMPLATE=https://bscscan.io/tx/%s
+ALM_FOREIGN_EXPLORER_TX_TEMPLATE=https://etherscan.io/tx/%s
 
 ALM_HOME_EXPLORER_API=https://explorer.fuse.io/api
-ALM_FOREIGN_EXPLORER_API=https://bscscan.io/api?apikey=DMVN9TSF99IVZRGYM6WYDJPGE7N72JCGG7
+ALM_FOREIGN_EXPLORER_API=https://etherscan.io/api?apikey=HFXDYDZ385WC8UZM6KJTRHUY5IBNAKX99J
 PORT=8080
+# COMMON_HOME_BRIDGE_ADDRESS=0x1ee6E3E3d2DE779858728E157B3B9C488bA7b706
+# COMMON_FOREIGN_BRIDGE_ADDRESS=0x3A5A320a2f98a3Fe39c9040e7e3E9caA7F0D5bd6
+# 
+# COMMON_HOME_RPC_URL=https://rpc.fuse.io
+# COMMON_FOREIGN_RPC_URL=https://bsc-dataseed.binance.org/
+# 
+# Keep subgraph url empty if not available, the alm would automatically work on web3
+HOME_SUBGRAPH_URL=https://api.thegraph.com/subgraphs/name/t0mcr8se/fuse-ethereum-home-v1
+FOREIGN_SUBGRAPH_URL=https://api.thegraph.com/subgraphs/name/t0mcr8se/fuse-ethereum-foreign-v1
+
+# ALM_HOME_NETWORK_NAME=Fuse
+# ALM_FOREIGN_NETWORK_NAME=BSC
+# 
+# ALM_HOME_EXPLORER_TX_TEMPLATE=https://explorer.fuse.io/tx/%s
+# ALM_FOREIGN_EXPLORER_TX_TEMPLATE=https://bscscan.io/tx/%s
+# 
+# ALM_HOME_EXPLORER_API=https://explorer.fuse.io/api
+# ALM_FOREIGN_EXPLORER_API=https://bscscan.io/api?apikey=DMVN9TSF99IVZRGYM6WYDJPGE7N72JCGG7
+# PORT=8080

alm/package.json

@@ -15,6 +15,7 @@
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
     "@types/react-router-dom": "^5.1.5",
+    "@types/react-table": "^7.7.4",
     "@types/styled-components": "^5.1.0",
     "@use-it/interval": "^0.1.3",
     "@web3-react/core": "^6.1.1",
@@ -30,6 +31,8 @@
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.0.1",
+    "react-table": "^7.7.0",
+    "react-tables": "^1.0.2",
     "styled-components": "^5.1.1",
     "typescript": "^3.5.2",
     "web3": "1.2.11",
@@ -38,6 +41,7 @@
   },
   "scripts": {
     "start": "yarn createSnapshots && ./load-env.sh react-app-rewired start",
+    "start:no-snapshots": "./load-env.sh react-app-rewired start",
     "build": "yarn createSnapshots && ./load-env.sh react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-app-rewired eject",

alm/src/components/FullStatusPage.tsx

@@ -0,0 +1,179 @@
+import React, { useState, useMemo, useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import { getSubgraphMessages } from '../utils/subgraph'
+import Table from './Table'
+import { getExplorerTxUrl, formatTxHash } from '../utils/networks'
+import { HOME_NETWORK_NAME, FOREIGN_NETWORK_NAME } from '../config/constants'
+import { ExplorerTxLink } from './commons/ExplorerTxLink'
+import { UserRejectedRequestError } from '@web3-react/injected-connector'
+import { from } from '@apollo/client'
+// import { HOME_SUBGRAPH_URL, FOREIGN_SUBGRAPH_URL, ALL_MESSAGES_QUERY } from '../config/constants'
+
+export const FullStatusPage = () => {
+  // const { bridge } = useParams()
+  const [messages, setMessages] = useState<Maybe<any>>(null)
+  const [orphans, setOrphans] = useState<Maybe<any>>(null)
+  const [loading, setLoading] = useState(false)
+  const [data, setData] = useState<any[]>([])
+
+  const getExplorerTxLinkComponent = (fromHome: boolean, txHash: any) => {
+    if (txHash === undefined) return '-'
+    return <ExplorerTxLink href={getExplorerTxUrl(txHash, fromHome)}>{formatTxHash(txHash)}</ExplorerTxLink>
+  }
+
+  const formatMessageId = (messageId: string) => {
+    return `${messageId.substr(0, 6)}...${messageId.substr(62)}`
+  }
+
+  const subgraphMessageToTableMessage = (message: any) => {
+    let fromHome = message.userRequestForSignature !== null
+    let isDelivered = (fromHome ? message.relayedMessage : message.affirmationCompleted) !== null
+
+    let messageId = formatMessageId(message.id)
+    let txHash = getExplorerTxLinkComponent(fromHome, message.txHash)
+    let direction = fromHome
+      ? HOME_NETWORK_NAME + ' => ' + FOREIGN_NETWORK_NAME
+      : FOREIGN_NETWORK_NAME + ' => ' + HOME_NETWORK_NAME
+    let userRequestForSignature = fromHome
+      ? getExplorerTxLinkComponent(fromHome, message.userRequestForSignature.txHash)
+      : '-'
+    let collectedSignatures = fromHome ? getExplorerTxLinkComponent(true, message.collectedSignature.txHash) : '-'
+    let relayedMessage = fromHome ? getExplorerTxLinkComponent(false, message.relayedMessage?.txHash) : '-'
+    let userRequestForAffirmation = !fromHome
+      ? getExplorerTxLinkComponent(false, message.userRequestForAffirmation.txHash)
+      : '-'
+    let affirmationCompleted = !fromHome ? getExplorerTxLinkComponent(true, message.affirmationCompleted.txHash) : '-'
+
+    // The following vars will be used for filtering and sorting the table
+    let fullTxHash = message.txHash
+    let creationTimestamp = parseInt(
+      fromHome ? message.userRequestForSignature.timestamp : message.userRequestForAffirmation.timestamp
+    )
+    let deliveryTimestamp = isDelivered
+      ? fromHome
+        ? message.relayedMessage.timestamp
+        : message.affirmationCompleted.timestamp
+      : 'not delivered'
+    let deliveryStatus = isDelivered ? 'delivered' : 'not delivered'
+    let bridge = fromHome? 'home' : 'foreign'
+
+    let ret = {
+      messageId,
+      txHash,
+      direction,
+      userRequestForSignature,
+      collectedSignatures,
+      relayedMessage,
+      userRequestForAffirmation,
+      affirmationCompleted,
+      fullTxHash,
+      creationTimestamp,
+      deliveryTimestamp,
+      deliveryStatus,
+      bridge
+    }
+    return ret
+  }
+
+  const columns = useMemo(
+    () => [
+      {
+        Header: 'Hidden Columns',
+        columns: [
+          {
+            Header: 'fullTxHash',
+            accessor: 'fullTxHash',
+          },
+          {
+            Header: 'creationTimestamp',
+            accessor: 'creationTimestamp',
+          },
+          {
+            Header: 'deliveryTimestamp',
+            accessor: 'deliveryTimestamp',
+          },
+          {
+            Header: 'deliveryStatus',
+            accessor: 'deliveryStatus'
+          },{
+            Header: 'bridge',
+            accessor: 'bridge'
+          }
+        ],
+      },
+      {
+        Header: 'Message Details',
+        columns: [
+          {
+            Header: 'Message ID',
+            accessor: 'messageId',
+          },
+          {
+            Header: 'Direction',
+            accessor: 'direction',
+          },
+          {
+            Header: 'Transaction Hash',
+            accessor: 'txHash',
+          },
+        ],
+      },
+      {
+        Header: 'Home Events',
+        columns: [
+          {
+            Header: 'UserRequestForSignature',
+            accessor: 'userRequestForSignature',
+          },
+          {
+            Header: 'CollectedSignatures',
+            accessor: 'collectedSignatures',
+          },
+          {
+            Header: 'RelayedMessage',
+            accessor: 'relayedMessage',
+          },
+        ],
+      },
+      {
+        Header: 'Foreign events',
+        columns: [
+          {
+            Header: 'UserRequestForAffirmation',
+            accessor: 'userRequestForAffirmation',
+          },
+          {
+            Header: 'AffirmationCompleted',
+            accessor: 'affirmationCompleted',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  useEffect(() => {
+    if (loading || messages !== null) return
+    setLoading(true)
+    getSubgraphMessages()
+      .then(({ messages, orphans }) => {
+        setMessages(messages)
+        setOrphans(orphans)
+        let ret: any[] = []
+        messages.forEach((message) => {
+          ret.push(subgraphMessageToTableMessage(message))
+        })
+        setData(ret)
+        setLoading(false)
+      })
+      .catch(console.error)
+  }, [loading, messages])
+
+
+
+  return (
+    <div className="MessagesTable">
+      <Table columns={columns} data={data} />
+    </div>
+  )
+}

alm/src/components/MainPage.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useCallback } from 'react'
 import styled from 'styled-components'
-import { Route, useHistory } from 'react-router-dom'
+import { Route, Switch, useHistory } from 'react-router-dom'
 import { Form } from './Form'
 import { StatusContainer } from './StatusContainer'
 import { useStateProvider } from '../state/StateProvider'
@@ -9,6 +9,7 @@ import { InfoAlert } from './commons/InfoAlert'
 import { ExplorerTxLink } from './commons/ExplorerTxLink'
 import { FOREIGN_NETWORK_NAME, HOME_NETWORK_NAME } from '../config/constants'
 import { ErrorAlert } from './commons/ErrorAlert'
+import { FullStatusPage } from './FullStatusPage'
 
 const StyledMainPage = styled.div`
   text-align: center;
@@ -133,17 +134,20 @@ export const MainPage = () => {
           </InfoAlert>
         )}
         {error && <ErrorAlert onClick={() => setError('')} error={error} />}
-        <Route exact path={['/']} children={<Form onSubmit={onFormSubmit} />} />
-        <Route
-          path={['/:chainId/:txHash/:messageIdParam', '/:chainId/:txHash']}
-          children={
-            <StatusContainer
-              onBackToMain={resetNetworkHeader}
-              setNetworkFromParams={setNetworkFromParams}
-              receiptParam={receipt}
-            />
-          }
-        />
+        <Switch>
+          <Route exact path={['/']} children={<Form onSubmit={onFormSubmit} />} />
+          <Route path={['/status', '/status/:bridge']} children={<FullStatusPage />} />
+          <Route
+            path={['/:chainId/:txHash/:messageIdParam', '/:chainId/:txHash']}
+            children={
+              <StatusContainer
+                onBackToMain={resetNetworkHeader}
+                setNetworkFromParams={setNetworkFromParams}
+                receiptParam={receipt}
+              />
+            }
+          />
+        </Switch>
       </div>
     </StyledMainPage>
   )