Rewrite Explorer in TS/Add Analytics (#933)

Co-authored-by: Trajan0x <[email protected]>
Co-authored-by: Simon <[email protected]>

.eslintrc.js

@@ -23,7 +23,7 @@ module.exports = {
   ],
   overrides: [
     {
-      files: ['**/*.ts'],
+      files: ['**/*.ts', '**/*.tsx'],
       parser: '@typescript-eslint/parser',
       parserOptions: {
         project: './packages/**/tsconfig.json',
@@ -163,7 +163,7 @@ module.exports = {
         allowSingleLineBlocks: true,
       },
     ],
-    'prefer-arrow/prefer-arrow-functions': 'error',
+    'prefer-arrow/prefer-arrow-functions': 'warn',
     'prefer-const': 'error',
     'prefer-object-spread': 'error',
     'quote-props': 'off',

package.json

@@ -72,7 +72,8 @@
     "typescript": "^4.9.3"
   },
   "dependencies": {
-    "@changesets/cli": "2.22.0"
+    "@changesets/cli": "2.22.0",
+    "eslint-plugin-jsx": "^0.1.0"
   },
   "packageManager": "[email protected]"
 }

packages/explorer-ui/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: '../../.eslintrc.js',
+}

packages/explorer-ui/apollo-client.js → packages/explorer-ui/apollo-client.ts

@@ -9,10 +9,6 @@ const link = new HttpLink({
 const client = new ApolloClient({
   link,
   cache: new InMemoryCache(),
-  fetchPolicy: 'network-only',
-  fetchOptions: {
-    mode: 'no-cors',
-  },
 })
 
 export default client

packages/explorer-ui/components/BridgeTransaction/BridgeTransactionTable.tsx

@@ -0,0 +1,107 @@
+import _ from 'lodash'
+import { Table } from '@components/TransactionTable/Table'
+import { StyleAddress } from '@components/misc/StyleAddress'
+import { IconAndAmount } from '@components/misc/IconAndAmount'
+import { ChainInfo } from '@components/misc/ChainInfo'
+import { timeAgo } from '@utils/timeAgo'
+import { getBridgeTransactionUrl } from '@urls'
+import { ellipsizeString } from '@utils/ellipsizeString'
+
+export function BridgeTransactionTable({ queryResult }) {
+  const handlePending = (date) => {
+    const now = new Date().getTime()
+    const timeDiff = now - date * 1000
+    if (timeDiff > 86400000) {
+      return <p>Indexing</p>
+    } else {
+      return <p>Pending</p>
+    }
+  }
+  const headers = [
+    'Initial',
+    'Final',
+    'Origin',
+    'Destination',
+    'From',
+    'To',
+    'Age',
+    'TXID',
+  ]
+
+  const tableRows = []
+  queryResult?.map((txn) => {
+    const { kappa, pending, fromInfo, toInfo } = txn
+
+    const items = [
+      <IconAndAmount
+        formattedValue={fromInfo.formattedValue}
+        tokenAddress={fromInfo.tokenAddress}
+        chainId={fromInfo.chainID}
+        tokenSymbol={fromInfo.tokenSymbol}
+        iconSize="w-4 h-4"
+        textSize="text-sm"
+        styledCoin={true}
+      />,
+      pending ? (
+        handlePending(fromInfo.time)
+      ) : (
+        <IconAndAmount
+          formattedValue={toInfo.formattedValue}
+          tokenAddress={toInfo.tokenAddress}
+          chainId={toInfo.chainID}
+          tokenSymbol={toInfo.tokenSymbol}
+          iconSize="w-4 h-4"
+          textSize="text-sm"
+          styledCoin={true}
+        />
+      ),
+      <ChainInfo
+        chainId={fromInfo.chainID}
+        imgClassName="w-6 h-6 rounded-full"
+        txHash={fromInfo.hash}
+        useExplorerLink={false}
+      />,
+      pending ? (
+        <ChainInfo
+          chainId={fromInfo.destinationChainID}
+          imgClassName="w-6 h-6 rounded-full"
+          txHash={''}
+          useExplorerLink={false}
+        />
+      ) : (
+        <ChainInfo
+          chainId={toInfo.chainID}
+          imgClassName="w-6 h-6 rounded-full"
+          txHash={toInfo.hash}
+          useExplorerLink={false}
+        />
+      ),
+      <StyleAddress sourceInfo={fromInfo} />,
+      pending ? (
+        handlePending(fromInfo.time)
+      ) : (
+        <StyleAddress sourceInfo={toInfo} />
+      ),
+      fromInfo.time
+        ? timeAgo({ timestamp: fromInfo.time })
+        : timeAgo({ timestamp: toInfo?.time }),
+      <a
+        className="underline transition ease-out hover:text-[#8FEBFF]"
+        href={getBridgeTransactionUrl({
+          hash: txn.kappa,
+          chainIdFrom: txn.fromInfo.chainID,
+          chainIdTo: txn.toInfo?.chainID,
+        })}
+      >
+        {ellipsizeString({ string: txn.kappa, limiter: 4 })}
+      </a>,
+    ]
+
+    const row = {
+      items,
+      key: kappa,
+    }
+    tableRows.push(row)
+  })
+  return <Table header={headers} body={tableRows} />
+}