chore: wip - show transaction

src/App.routes.tsx

@@ -2,6 +2,8 @@ import { Outlet } from 'react-router-dom'
 import { LayoutPage } from './features/layout/pages/layout-page'
 import { Urls } from './routes/urls'
 import { evalTemplates } from './routes/templated-route'
+import { TransactionPage } from './features/transactions/pages/transaction-page'
+import { ExplorePage } from './features/explore/pages/explore-page'
 
 export const routes = evalTemplates([
   {
@@ -22,7 +24,16 @@ export const routes = evalTemplates([
       },
       {
         template: Urls.Explore,
-        element: <div>Explore</div>,
+        children: [
+          {
+            template: Urls.Explore,
+            element: <ExplorePage />,
+          },
+          {
+            template: Urls.Explore.Transaction.ById,
+            element: <TransactionPage />,
+          },
+        ],
       },
       {
         template: Urls.AppStudio,

src/features/common/components/card.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+
+import { cn } from '@/features/common/utils'
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)} {...props} />
+))
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex flex-col', className)} {...props} />
+))
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
+  <h3 ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />
+))
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+)
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn(className)} {...props} />
+))
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex items-center', className)} {...props} />
+))
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/features/explore/pages/explore-page.tsx

@@ -0,0 +1,15 @@
+import { TemplatedNavLink } from '@/features/routing/components/templated-nav-link/templated-nav-link'
+import { Urls } from '@/routes/urls'
+
+export function ExplorePage() {
+  return (
+    <div>
+      <TemplatedNavLink
+        urlTemplate={Urls.Explore.Transaction.ById}
+        urlParams={{ transactionId: 'QOOBRVQMX4HW5QZ2EGLQDQCQTKRF3UP3JKDGKYPCXMI6AVV35KQA' }}
+      >
+        View sample transaction
+      </TemplatedNavLink>
+    </div>
+  )
+}

src/features/layout/pages/layout-page.tsx

@@ -13,7 +13,7 @@ export function LayoutPage({ children }: LayoutPageProps) {
       <Header className={cn('mb-1')} />
       <div className={cn('flex h-full flex-shrink flex-row')}>
         <LeftSideBarMenu />
-        <div className={cn('grow p-4')}> {children}</div>
+        <div className={cn('grow pl-4 pt-4')}> {children}</div>
       </div>
     </>
   )

src/features/transactions/components/transaction.tsx

@@ -1,7 +1,49 @@
-import { UrlParams } from '../../../routes/urls'
-import { useRequiredParam } from '../../common/hooks/use-required-param'
+import { Card, CardContent } from '@/features/common/components/card'
+import { cn } from '@/features/common/utils'
 
-export function TransactionPage() {
-  const { transactionId } = useRequiredParam(UrlParams.TransactionId)
-  return <div>Transaction Id {transactionId}</div>
+type Props = {
+  transaction: TransactionModel
+}
+
+export function Transaction({ transaction }: Props) {
+  const transactionCardItems = [
+    {
+      dt: 'Transaction ID',
+      dd: transaction.id,
+    },
+    {
+      dt: 'Type',
+      dd: transaction.type,
+    },
+  ]
+  return (
+    <div>
+      <h1 className={cn('text-2xl text-primary font-bold')}>Transaction</h1>
+      <div className={cn('space-y-6 pt-7')}>
+        <Card className={cn('p-4')}>
+          <CardContent className={cn('text-sm space-y-2')}>
+            {transactionCardItems.map((item, index) => (
+              <dl className={cn('grid grid-cols-8')} key={index}>
+                <dt>{item.dt}</dt>
+                <dd className={cn('col-span-7')}>{item.dd}</dd>
+              </dl>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
+
+export enum TransactionType {
+  Payment = 'Payment',
+}
+
+export type TransactionModel = {
+  id: string
+  type: TransactionType
+  confirmedRound: number
+  roundTime: number
+  group: string
+  fee: number
 }

src/features/transactions/pages/transaction-page.tsx

@@ -0,0 +1,21 @@
+import { UrlParams } from '../../../routes/urls'
+import { useRequiredParam } from '../../common/hooks/use-required-param'
+import { Transaction, TransactionModel, TransactionType } from '../components/transaction'
+
+export function TransactionPage() {
+  const { transactionId } = useRequiredParam(UrlParams.TransactionId)
+  const sampleTransaction = getSampleTransaction(transactionId)
+
+  return <Transaction transaction={sampleTransaction} />
+}
+
+const getSampleTransaction = (transactionId: string): TransactionModel => {
+  return {
+    id: transactionId,
+    type: TransactionType.Payment,
+    confirmedRound: 36570178,
+    roundTime: 1709189521,
+    group: 'a7Qnfai3DEKS8JI5ZPl149O9P7RztrBqRvBwRebx/Ao=',
+    fee: 1000,
+  }
+}

src/routes/urls.ts

@@ -8,6 +8,10 @@ export const UrlParams = {
 
 export const Urls = {
   Index: UrlTemplate`/`,
-  Explore: UrlTemplate`/explore`,
+  Explore: UrlTemplate`/explore`.extend({
+    Transaction: UrlTemplate`/transaction`.extend({
+      ById: UrlTemplate`/${UrlParams.TransactionId}`,
+    }),
+  }),
   AppStudio: UrlTemplate`/app-studio`,
 }