chore: wip show transaction

also fix screen height

package.json

@@ -29,6 +29,8 @@
     "@tauri-apps/api": "^1.5.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "date-fns": "^3.5.0",
+    "decimal.js": "^10.4.3",
     "jotai": "^2.7.0",
     "lucide-react": "^0.356.0",
     "react": "^18.2.0",

src/features/common/components/display-algo.tsx

@@ -0,0 +1,16 @@
+import { algoFormatter } from '@/utils/format'
+import SvgAlgorand from './icons/algorand'
+import { cn } from '../utils'
+
+export type Props = {
+  microAlgo: number
+}
+
+export function DisplayAlgo({ microAlgo }: Props) {
+  return (
+    <div className={cn('flex items-center')}>
+      {algoFormatter.asAlgo(microAlgo)}
+      <SvgAlgorand />
+    </div>
+  )
+}

src/features/common/components/icons/algorand.tsx

@@ -0,0 +1,4 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgAlgorand = (props: SVGProps<SVGSVGElement>) => <svg xmlnsXlink="http://www.w3.org/1999/xlink" width="1em" height="1em" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" {...props}><g transform="matrix(1 0 0 1 -446 -347 )"><path d="M 1.7460317460317463 10  L 3.192239858906526 7.495590828924162  L 4.638447971781305 5  L 6.075837742504408 2.495590828924162  L 6.313932980599648 2.0987654320987654  L 6.419753086419753 2.495590828924162  L 6.860670194003527 4.144620811287478  L 6.3668430335097 5  L 4.920634920634921 7.495590828924162  L 3.4832451499118164 10  L 5.211640211640212 10  L 6.657848324514991 7.495590828924162  L 7.4074074074074066 6.1992945326278655  L 7.760141093474426 7.495590828924162  L 8.430335097001764 10  L 9.982363315696649 10  L 9.312169312169312 7.495590828924162  L 8.641975308641975 5  L 8.465608465608465 4.356261022927689  L 9.541446208112875 2.495590828924162  L 7.971781305114638 2.495590828924162  L 7.9188712522045845 2.310405643738977  L 7.372134038800706 0.26455026455026454  L 7.301587301587301 0  L 5.793650793650793 0  L 5.758377425044091 0.05291005291005291  L 4.347442680776014 2.495590828924162  L 2.901234567901235 5  L 1.4638447971781305 7.495590828924162  L 0.017636684303351177 10  L 1.7460317460317463 10  Z " fillRule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 446 347 )" /></g></svg>;
+export default SvgAlgorand;

src/features/layout/components/left-side-bar-menu.tsx

@@ -29,7 +29,7 @@ export function LeftSideBarMenu({ className }: Props) {
   )
 
   return (
-    <NavigationMenu className={cn('bg-card', className, 'transition-all duration-300', isLeftSideBarExpanded ? 'w-52' : 'w-10')}>
+    <NavigationMenu className={cn('bg-card transition-all duration-300 min-h-screen', className, isLeftSideBarExpanded ? 'w-52' : 'w-10')}>
       <NavigationMenuList className={cn('flex-col items-start')}>
         <NavigationMenuItem className={cn('flex justify-end')}>
           <Button variant="outline" size="icon" className={cn('text-primary')} onClick={toggleLeftSideBar}>

src/features/routing/components/templated-nav-link/templated-nav-link.tsx

@@ -1,7 +1,7 @@
 import { type ReactNode } from 'react'
 import { NavLink, useParams } from 'react-router-dom'
 import { UrlTemplateObj } from '../../../../routes/url-template'
-import { fixedForwardRef } from '@/util/fixed-forward-ref'
+import { fixedForwardRef } from '@/utils/fixed-forward-ref'
 
 export interface TemplatedNavLinkProps<TTemplateParams> {
   className?: string

src/features/transactions/components/transaction.tsx

@@ -1,5 +1,7 @@
 import { Card, CardContent } from '@/features/common/components/card'
+import { DisplayAlgo } from '@/features/common/components/display-algo'
 import { cn } from '@/features/common/utils'
+import { dateFormatter } from '@/utils/format'
 
 type Props = {
   transaction: TransactionModel
@@ -15,6 +17,31 @@ export function Transaction({ transaction }: Props) {
       dt: 'Type',
       dd: transaction.type,
     },
+    {
+      dt: 'Timestamp',
+      // TODO: check timezone
+      dd: dateFormatter.asLongDateTime(transaction.roundTime),
+    },
+    {
+      dt: 'Block',
+      dd: (
+        <a href="#" className={cn('text-primary underline')}>
+          {transaction.confirmedRound}
+        </a>
+      ),
+    },
+    {
+      dt: 'Group',
+      dd: (
+        <a href="#" className={cn('text-primary underline')}>
+          {transaction.group}
+        </a>
+      ),
+    },
+    {
+      dt: 'Fee',
+      dd: <DisplayAlgo microAlgo={transaction.fee} />,
+    },
   ]
   return (
     <div>
@@ -43,7 +70,8 @@ export type TransactionModel = {
   id: string
   type: TransactionType
   confirmedRound: number
-  roundTime: number
+  roundTime: Date
   group: string
+  // The fee in micro Algo
   fee: number
 }

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

@@ -14,7 +14,7 @@ const getSampleTransaction = (transactionId: string): TransactionModel => {
     id: transactionId,
     type: TransactionType.Payment,
     confirmedRound: 36570178,
-    roundTime: 1709189521,
+    roundTime: new Date(1709189521),
     group: 'a7Qnfai3DEKS8JI5ZPl149O9P7RztrBqRvBwRebx/Ao=',
     fee: 1000,
   }

src/index.css

@@ -37,9 +37,6 @@
     --ring: 153 153 153;
 
     --radius: 0.25rem;
-
-    height: 100%;
-    overflow: hidden;
   }
 
   .dark {
@@ -81,12 +78,12 @@
   }
   body {
     @apply bg-background text-foreground;
-    height: 100%;
-    overflow: hidden;
+    /* min-height: 100vh; */
+    /* height: 100vh; */
+    /* overflow-y: scroll; */
   }
   #root {
-    height: 100%;
-    overflow: hidden;
+    /* min-height: 100vh; */
     max-width: 1400px;
     margin: 0 auto;
   }

src/utils/format.ts

@@ -0,0 +1,10 @@
+import { format as dateFnsFormat } from 'date-fns'
+import Decimal from 'decimal.js'
+
+export const dateFormatter = {
+  asLongDateTime: (date: Date) => dateFnsFormat(date, 'EEEE, dd MMMM yyyy HH:mm:ss'),
+}
+
+export const algoFormatter = {
+  asAlgo: (microAlgo: number) => new Decimal(microAlgo).dividedBy(1_000_000).toFixed(),
+}