chore: enhance the transaction visual UI (#104)

Author: PatrickDinh

src/assets/svg/circle.svg

@@ -9,7 +9,7 @@ export type Props = {
 
 export function DisplayAlgo({ className, amount }: Props) {
   return (
-    <div className={cn(className, 'inline-flex gap-0.5')}>
+    <div className={cn('inline-flex gap-0.5', className)}>
       {amount.algos}
       <SvgAlgorand className="h-auto w-2.5" />
     </div>

src/assets/svg/pointer-left.svg

@@ -11,9 +11,16 @@ type Props = {
   asset: AssetSummary | AsyncMaybeAtom<AssetSummary>
   isFrozen?: boolean
   className?: string
+  linkClassName?: string
 }
 
-const Amount = ({ asset, amount, isFrozen }: { asset: AssetSummary; amount: number | bigint; isFrozen?: boolean }) => {
+type AmountProps = {
+  asset: AssetSummary
+  amount: number | bigint
+  isFrozen?: boolean
+  linkClassName?: string
+}
+const Amount = ({ asset, amount, isFrozen, linkClassName }: AmountProps) => {
   // asset decimals value must be from 0 to 19 so it is safe to use .toString() here
   // the amount is uint64, should be safe to be .toString()
   const amountToDisplay = new Decimal(amount.toString()).div(new Decimal(10).pow(asset.decimals)).toString()
@@ -22,7 +29,7 @@ const Amount = ({ asset, amount, isFrozen }: { asset: AssetSummary; amount: numb
     <div className="flex items-center gap-1">
       <span>{amountToDisplay}</span>
       {asset.unitName ? (
-        <AssetIdLink assetId={asset.id} className={cn('text-primary underline')}>
+        <AssetIdLink assetId={asset.id} className={cn('underline', linkClassName ?? 'text-primary')}>
           {asset.unitName}
         </AssetIdLink>
       ) : undefined}
@@ -31,15 +38,15 @@ const Amount = ({ asset, amount, isFrozen }: { asset: AssetSummary; amount: numb
   )
 }
 
-export const DisplayAssetAmount = ({ amount, asset, isFrozen, className }: Props) => {
+export const DisplayAssetAmount = ({ amount, asset, isFrozen, className, linkClassName }: Props) => {
   return (
     <div className={cn(className)}>
       {'read' in asset ? (
         <RenderInlineAsyncAtom atom={asset}>
-          {(asset) => <Amount asset={asset} amount={amount} isFrozen={isFrozen} />}
+          {(asset) => <Amount asset={asset} amount={amount} isFrozen={isFrozen} linkClassName={linkClassName} />}
         </RenderInlineAsyncAtom>
       ) : (
-        <Amount asset={asset} amount={amount} isFrozen={isFrozen} />
+        <Amount asset={asset} amount={amount} isFrozen={isFrozen} linkClassName={linkClassName} />
       )}
     </div>
   )

src/assets/svg/pointer-right.svg

@@ -2,18 +2,19 @@ import type { SVGProps } from 'react'
 const SvgPointerLeft = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlnsXlink="http://www.w3.org/1999/xlink"
-    width="11px"
-    height="19px"
+    width="20px"
+    height="20px"
     preserveAspectRatio="xMinYMid meet"
-    viewBox="159 229 7 10"
+    viewBox="0 0 20 20"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
     <path
-      d="M 165.8 228.1 L 159.1 234.1 L 165.8 240.1 L 163.5 234.1 L 165.8 228.1 Z"
+      d="M 14 15 L 20 10 L 14 5 L 14 10 L 14 16 Z"
       fillRule="nonzero"
       fill="currentColor"
       stroke="none"
+      transform="scale(-1, 1) translate(-20, 0)"
     />
   </svg>
 )

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

@@ -2,14 +2,14 @@ import type { SVGProps } from 'react'
 const SvgPointerRight = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlnsXlink="http://www.w3.org/1999/xlink"
-    width="11px"
-    height="19px"
+    width="20px"
+    height="20px"
     preserveAspectRatio="xMinYMid meet"
-    viewBox="340 139 1 13"
+    viewBox="0 0 20 20"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <path d="M 340.3 151.3 L 347 145.3 L 340.3 139.3 L 342.6 145.3 L 340.3 151.3 Z" fillRule="nonzero" fill="currentColor" stroke="none" />
+    <path d="M 14 15 L 20 10 L 14 5 L 14 10 L 14 16 Z" fillRule="nonzero" fill="currentColor" stroke="none" />
   </svg>
 )
 export default SvgPointerRight