feat(explorer/ui): push xmsg page (#993)

Added xmsg view and page still need to manage the mobile view.

task: https://app.asana.com/0/1206208509925075/1206970544933858

<!--
PR title and body follows conventional commit;
https://www.conventionalcommits.org/en/v1.0.0
  Title template: `type(app/pkg): concise description`
See allowed types:
https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional#type-enum
Description must be concise: lower case, no punctuation, no more than 50
characters.
Scope must be concise: only a one or two folders; e.g. 'halo/cmd' or
'github' or '*'
-->

explorer/ui/app/components/details/From.tsx

@@ -0,0 +1,43 @@
+import { Link } from '@remix-run/react'
+import React from 'react'
+
+export const From = () => {
+  return (
+    <>
+      <h5 className="text-default my-5">From</h5>
+      {/* Offset */}
+      <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+        <p className="w-48">Source Chain</p>
+        <p>
+          <span className="text-default">Arbitrum </span> (36)
+        </p>
+      </div>
+      {/* Offset */}
+      <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+        <p className="w-48">Source Address</p>
+        <Link to="/" className="underline text-indigo-400">
+          0x109f40f806567158aaad05e43afe240cf394608cacd0016466dfb24dce2927d4
+        </Link>
+      </div>
+      {/* Offset */}
+      <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+        <p className="w-48">Tx Hash</p>
+        <Link to="/" className="underline text-indigo-400">
+          0x109f40f806567158aaad05e43afe240cf394608cacd0016466dfb24dce2927d4
+        </Link>
+      </div>
+      {/* Offset */}
+      <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+        <p className="w-48">Offset</p>
+        <p className="text-default">2345</p>
+      </div>
+      {/* Offset */}
+      <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+        <p className="w-48">Offset</p>
+        <Link to="/" className="underline text-indigo-400">
+          0xfc39076
+        </Link>
+      </div>
+    </>
+  )
+}

explorer/ui/app/components/details/TabList.tsx

@@ -0,0 +1,80 @@
+import { Link } from '@remix-run/react'
+import React, { useEffect } from 'react'
+import Tag from '../shared/tag'
+
+export const TabList = () => {
+  const ReceiptList = [1, 2, 3]
+  const activeReceiptIndex = 0
+
+  const checkActiveCss = (index) => {
+    if (index === activeReceiptIndex) {
+
+    }
+    return 'active inline-flex active items-center justify-center p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 group'
+  }
+
+  useEffect(() => {}, [activeReceiptIndex])
+
+  return (
+    <>
+      <h5 className="text-default my-5 mt-5">XReceipt</h5>
+      <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+        <p className="w-48">Block Timestamp</p>
+        <p>
+          <span className="text-default">16 mins ago </span> (Apr 25 2024 00:05:23 AM +UTC)
+        </p>
+      </div>
+      {/* Offset */}
+      <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+        <p className="w-48">Source Address</p>
+        <Link to="/" className="underline text-indigo-400">
+          0x109f40f806567158aaad05e43afe240cf394608cacd0016466dfb24dce2927d4
+        </Link>
+      </div>
+      {/* Offset */}
+      <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+        <p className="w-48">Relayer Address</p>
+        <Link to="/" className="underline text-indigo-400">
+          0x109f40f806567158aaad05e43afe240cf394608cacd0016466dfb24dce2927d4
+        </Link>
+      </div>
+      {/* Offset */}
+      <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+        <p className="w-48">Stream Offset Address</p>
+        <p className="text-default">345</p>
+      </div>
+      {/* Offset */}
+      <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+        <p className="w-48">Gas Used</p>
+        <p className="text-default">28,909</p>
+      </div>
+      {/* Offset */}
+      <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+        <p className="w-48">Gas Used</p>
+        <p className="text-default">30,000</p>
+      </div>
+      {/* Offset */}
+      <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+        <p className="w-48">Source Chain ID</p>
+        <p className="text-default">34</p>
+      </div>
+      <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+        <p className="w-48">Destination Chain ID</p>
+        <p className="text-default">3567</p>
+      </div>
+      {/* Offset */}
+      <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+        <p className="w-48">Tx Hash</p>
+        <Link to="/" className="underline text-indigo-400">
+          0x109f40f806567158aaad05e43afe240cf394608cacd0016466dfb24dce2927d4
+        </Link>
+      </div>
+      {/* Status */}
+      <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+        <p className="w-48">Status</p>
+        <Tag status="FAILURE" />
+        <p className="ml-5">"Reason for status"</p>
+      </div>
+    </>
+  )
+}

explorer/ui/app/components/details/To.tsx

@@ -0,0 +1,45 @@
+import { Link } from '@remix-run/react'
+import React from 'react'
+
+export const To = () => {
+  return (
+    <>
+    <h5 className="text-default my-5">To</h5>
+    {/* Offset */}
+    <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+        <p className="w-48">Destination Chain</p>
+        <p>
+          <span className="text-default">Optimism </span> (356)
+        </p>
+      </div>
+      {/* Offset */}
+      <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+        <p className="w-48">Block Timestamp</p>
+        <p>
+          <span className="text-default">16 mins ago </span> (Apr 25 2024 00:05:23 AM +UTC)
+        </p>
+      </div>
+       {/* Offset */}
+       <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+        <p className="w-48">Source Address</p>
+        <Link to="/" className="underline text-indigo-400">
+          0x109f40f806567158aaad05e43afe240cf394608cacd0016466dfb24dce2927d4
+        </Link>
+      </div>
+      {/* Offset */}
+      <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+        <p className="w-48">Tx Hash</p>
+        <Link to="/" className="underline text-indigo-400">
+          0x109f40f806567158aaad05e43afe240cf394608cacd0016466dfb24dce2927d4
+        </Link>
+      </div>
+      {/* Offset */}
+      <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+        <p className="w-48">Gas Limit</p>
+        <p className="text-default">
+          30,009
+        </p>
+      </div>
+    </>
+  )
+}

explorer/ui/app/routes/xmsg.$id/route.tsx

@@ -0,0 +1,66 @@
+import { Footer } from '~/components/shared/footer'
+import Navbar from '~/components/shared/navbar'
+import { GetXBlock } from '../../components/queries/block'
+import { Link, useNavigate, useParams, useSearchParams } from '@remix-run/react'
+import { BackBtn } from '~/components/details/BackBtn'
+import Tag from '~/components/shared/tag'
+import { From } from '~/components/details/From'
+import { To } from '~/components/details/To'
+import { TabList } from '~/components/details/TabList'
+import { GetXMsg } from '~/components/queries/messages'
+
+export default function Index() {
+  const params = useParams()
+  const [searchParams] = useSearchParams()
+
+  // const data = GetXMsg("0x40b1", "0xc8", "0x3c5c")
+
+//   console.log(data);
+
+    const navigate = useNavigate();
+
+    const onBackClickHandler = () => {
+      navigate("/");
+    }
+
+
+  return (
+    <div className="px-8 md:px-20">
+      <div className="flex h-full w-full flex-col">
+        {/* <Overview /> */}
+        <div className={'h-5'}></div>
+
+        <div className="w-full">
+          <BackBtn onBackClickHandler={onBackClickHandler}/>
+
+          <h3 className="mt-5">
+            XMsg <span className="p-2">/</span> <span className="text-default">34-3567-345</span>
+          </h3>
+
+          <div className="mt-5 p-4 w-full bg-raised rounded-lg">
+            {/* Offset */}
+            <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+              <p className="w-24 sm:w-48">Offset</p>
+              <p className="text-default">345</p>
+            </div>
+            {/* Status */}
+            <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+              <p className="w-24 sm:w-48">Status</p>
+              <div className='flex flex-col sm:flex-row'>
+              <Tag status="FAILURE" />
+              <p className="ml-5">"Reason for status"</p>
+              </div>
+            </div>
+            {/* Data */}
+            <div className="flex mt-5 pb-2 border-b-2 border-gray-500 border-solid">
+              <p className="w-24 sm:w-48">Data</p>
+            </div>
+            <From />
+            <To />
+            <TabList />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}