Chore: Remove Truncation ✂️

packages/features/src/common/components/MinaIcon.tsx

@@ -0,0 +1,16 @@
+export const MinaIcon = ({ stroke = '2', size = '20', className = '' }) => (
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 180 180"
+    width={size}
+    height={size}
+    className={className}
+  >
+    <path
+      stroke="currentColor"
+      stroke-width={stroke}
+      d="M90,152.74a9.1,9.1,0,0,1-9.34-8.31l-1-8.23c-10-2.85-15.86-10.25-17.37-22l-9-69.34a33.52,33.52,0,0,0-5.85-.42,31.56,31.56,0,0,0-8.56,1.11V150.71H21.18V66.18c0-11.47,5.14-19.57,14.53-22.94V37.79c0-6.3,3.82-10.53,9.51-10.53s9.26,3.54,10.18,10l.7,5.05c10.25,2.9,16.32,11.15,18.06,24.54l8.31,66.84a39.74,39.74,0,0,0,15.06,0l8.31-66.83c1.74-13.4,7.81-21.65,18.06-24.55l.7-5.05c.92-6.43,4.53-10,10.18-10s9.51,4.23,9.51,10.53v5.45c9.39,3.37,14.53,11.47,14.53,22.94v84.53H141.14V45.54a31.62,31.62,0,0,0-8.56-1.11,33.52,33.52,0,0,0-5.85.42l-9,69.35c-1.48,11.54-7.48,19.12-17.37,22l-1,8.25A8.89,8.89,0,0,1,90,152.74ZM82.89,137l.9,7.09A5.92,5.92,0,0,0,90,149.59a5.8,5.8,0,0,0,6.21-5.54l.9-7.1a43.87,43.87,0,0,1-14.22,0Zm61.4,10.61h11.38V66.18c0-9.72-3.92-16.43-11.38-19.56Zm-120,0H35.71V46.62c-7.46,3.13-11.38,9.84-11.38,19.56ZM56.56,45.72l8.81,68.07c1.27,9.85,5.91,16.22,13.82,19L71,67.21C69.53,55.65,64.79,48.59,56.56,45.72Zm66.88,0c-8.23,2.87-13,9.93-14.47,21.5l-8.15,65.53c7.9-2.78,12.55-9.15,13.81-19ZM38.86,42.24v0a35.31,35.31,0,0,1,8.56-1,39,39,0,0,1,5.41.32l-.55-3.93c-.69-4.82-3.06-7.26-7.06-7.26s-6.36,2.83-6.36,7.38Zm93.72-1a35.31,35.31,0,0,1,8.56,1V37.79c0-4.55-2.44-7.38-6.36-7.38s-6.37,2.44-7.06,7.26l-.55,3.93A39,39,0,0,1,132.58,41.28Z"
+    />
+  </svg>
+)

packages/features/src/common/types.ts

@@ -21,6 +21,7 @@ export type StructurizedTransaction = Mina.TransactionBody & {
   date: string
   time: string
   minaAmount: number
+  minaFee: number
 }
 
 type StakingAccount = {

packages/features/src/overview/components/AssetList.tsx

@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom'
 import { Avatar, AvatarFallback } from '@/components/ui/avatar'
 import { Skeleton } from '@/components/ui/skeleton'
 
-import MinaLogo from '../../common/assets/mina.svg'
+import { MinaIcon } from '../../common/components/MinaIcon'
 import { ViewHeading } from '../../common/components/ViewHeading'
 import { useAccount } from '../../common/hooks/useAccount'
 
@@ -27,8 +27,8 @@ export const AssetList = () => {
       ) : (
         <div className="flex items-center gap-4">
           <Avatar>
-            <AvatarFallback className="p-2">
-              <MinaLogo />
+            <AvatarFallback className="p-2 text-blue-charcoal-950 dark:text-white">
+              <MinaIcon stroke="8" />
             </AvatarFallback>
           </Avatar>
           <p className="flex-1 font-semibold">MINA</p>

packages/features/src/send/components/ConfirmTransactionForm.tsx

@@ -46,7 +46,7 @@
   const kind = useTransactionStore((state) => state.kind)
   const { addPendingTransaction } = usePendingTransactionStore()
   if (!outgoingTransaction) return null
-  const rawAmount = parseInt(outgoingTransaction.amount || '0')
+  const rawAmount = parseFloat(outgoingTransaction.amount || '0.00')
   const rawFee = parseFloat(outgoingTransaction.fee || '0.01')
   const amount = BigInt(rawAmount * 1_000_000_000).toString()
   const fee = BigInt(rawFee * 1_000_000_000).toString()
@@ -68,7 +68,7 @@
         : Mina.TransactionKind.PAYMENT
     )
     const getPassphrase = async () => Buffer.from(data.spendingPassword)
     const signedTx = await sign(constructedTx as any, getPassphrase)
     if (!signedTx) return
     const submitTxArgs = {
       signedTransaction: signedTx as unknown as SignedLegacy<Payment>,
@@ -88,7 +88,7 @@
     }
     try {
       setSubmitting(true)
       const submittedTx = (await submitTx(submitTxArgs as any)) as any
       const hash =
         submittedTx?.sendPayment?.payment?.hash ??
         submittedTx?.sendDelegation?.delegation?.hash

packages/features/src/transactions/components/TxTile.tsx

@@ -1,5 +1,7 @@
 import { useNavigate } from 'react-router-dom'
 
+import { MinaIcon } from '@/common/components/MinaIcon'
+
 import { StructurizedTransaction, TxKind, TxSide } from '../../common/types'
 import { TxIndicator } from './TxIndicator'
 
@@ -31,7 +33,17 @@ export const TxTile = ({ tx }: TxTileProps) => {
         <div className="flex-1 font-semibold">{getTransactionLabel(tx)}</div>
         <div className="flex-1 text-sm">{tx.time}</div>
       </div>
-      <div className="font-semibold">{tx.minaAmount} MINA</div>
+      <div className="flex flex-col items-end gap-2">
+        <div className="flex items-center font-semibold">
+          <span>{tx.minaAmount}</span>
+          <MinaIcon stroke="8" size="18" />
+        </div>
+        <div className="flex items-center text-xs">
+          <span>{tx.minaFee}</span>
+          <MinaIcon stroke="8" size="12" />
+          <span className="ml-1">Fee</span>
+        </div>
+      </div>
     </div>
   )
 }

packages/features/src/transactions/utils/structurizeTransactions.ts

@@ -19,7 +19,8 @@ export const structurizeTransaction = ({
   ...tx,
   date: dateFromNow({ dateTime: tx.dateTime! }),
   time: dayjs(tx.dateTime).format('HH:mm'),
-  minaAmount: tx.amount / 1_000_000_000,
+  minaAmount: (Number(tx.amount) / 1_000_000_000).toFixed(3),
+  minaFee: (Number(tx.fee) / 1_000_000_000).toFixed(3),
   side: tx.from === walletPublicKey ? TxSide.OUTGOING : TxSide.INCOMING
 })