chore: descriptive class names and mark sensitive content

frontend/src/components/MnemonicInputs.tsx

@@ -40,7 +40,7 @@ export default function MnemonicInputs({
           <CardTitle>Recovery phrase to your wallet</CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-8 gap-y-5 justify-center">
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-8 gap-y-5 justify-center backup sensitive ph-no-capture">
             {words.map((word, i) => {
               const isRevealed = revealedIndex === i;
               const inputId = `mnemonic-word-${i}`;

frontend/src/components/TransactionsList.tsx

@@ -13,7 +13,7 @@ function TransactionsList() {
   }
 
   return (
-    <div>
+    <div className="transaction-list">
       {!transactions?.length ? (
         <EmptyState
           icon={Drum}
@@ -30,7 +30,7 @@ function TransactionsList() {
             return (
               <div
                 key={`tx-${i}`}
-                className="p-3 mb-4 rounded-md"
+                className="p-3 mb-4 rounded-md transaction sensitive ph-no-capture"
                 // TODO: Add modal onclick to show payment details
               >
                 <div className="flex gap-3">
@@ -103,7 +103,7 @@ function TransactionsList() {
           )} */}
         </>
       )}
-    </div>
+    </div >
   );
 }
 

frontend/src/components/connections/AppCard.tsx

@@ -22,7 +22,7 @@ type Props = {
 export default function AppCard({ app }: Props) {
   return (
     <>
-      <Link className="h-full" to={`/apps/${app.nostrPubkey}`}>
+      <Link className="h-fulli app" to={`/apps/${app.nostrPubkey}`}>
         <Card className="h-full flex flex-col group">
           <CardHeader>
             <CardTitle className="relative">

frontend/src/screens/apps/AppCreated.tsx

@@ -89,7 +89,7 @@ export default function AppCreated() {
         title={`Connect to ${createAppResponse.name}`}
         description="Configure wallet permissions for the app and follow instructions to finalise the connection"
       />
-      <div className="flex flex-col gap-3 ph-no-capture">
+      <div className="flex flex-col gap-3 ph-no-capture sensitive">
         <div>
           <p>
             1. Open{" "}

frontend/src/screens/apps/AppList.tsx

@@ -52,7 +52,7 @@ function AppList() {
       )}
 
       {otherApps.length > 0 && (
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch app-list">
           {otherApps.map((app, index) => (
             <AppCard key={index} app={app} />
           ))}

frontend/src/screens/channels/Channels.tsx

@@ -506,7 +506,7 @@ export default function Channels() {
                 </div>
               </div>
             )}
-            <div className="text-2xl font-bold">
+            <div className="text-2xl font-bold balance sensitive ph-no-capture">
               {balances && (
                 <>
                   {new Intl.NumberFormat().format(balances.onchain.spendable)}{" "}
@@ -550,7 +550,7 @@ export default function Channels() {
               </div>
             )}
             {balances && (
-              <div className="text-2xl font-bold">
+              <div className="text-2xl font-bold balance sensitive ph-no-capture">
                 {new Intl.NumberFormat(undefined, {}).format(
                   Math.floor(balances.lightning.totalSpendable / 1000)
                 )}{" "}
@@ -572,7 +572,7 @@ export default function Channels() {
             <ArrowDown className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent className="flex-grow">
-            <div className="text-2xl font-bold">
+            <div className="text-2xl font-bold balance sensitive ph-no-capture">
               {balances &&
                 new Intl.NumberFormat().format(
                   Math.floor(balances.lightning.totalReceivable / 1000)
@@ -600,7 +600,7 @@ export default function Channels() {
 
       {!channels ||
         (channels.length > 0 && (
-          <Table>
+          <Table className="channel-list">
             <TableHeader>
               <TableRow>
                 <TableHead className="w-[80px]">Status</TableHead>
@@ -663,7 +663,7 @@ export default function Channels() {
                       }
 
                       return (
-                        <TableRow key={channel.id}>
+                        <TableRow key={channel.id} className="channel">
                           <TableCell>
                             {channel.active ? (
                               <Badge variant="positive">Online</Badge>
@@ -807,7 +807,7 @@ export default function Channels() {
                 </TableRow>
               )}
             </TableBody>
-          </Table>
+          </Table >
         ))}
     </>
   );

frontend/src/screens/wallet/Send.tsx

@@ -228,7 +228,7 @@ export default function Send() {
               </div>
             )}
             {balances && (
-              <div className="text-2xl font-bold">
+              <div className="text-2xl font-bold balance sensitive ph-no-capture">
                 {new Intl.NumberFormat(undefined, {}).format(
                   Math.floor(balances.lightning.totalSpendable / 1000)
                 )}{" "}

frontend/src/screens/wallet/index.tsx

@@ -22,7 +22,7 @@ function Wallet() {
       <AppHeader title="Wallet" description="" />
       <BreezRedeem />
       <div className="flex flex-col lg:flex-row justify-between lg:items-center gap-5">
-        <div className="text-5xl font-semibold">
+        <div className="text-5xl font-semibold balance sensitive ph-no-capture">
           {new Intl.NumberFormat().format(
             Math.floor(balances.lightning.totalSpendable / 1000)
           )}{" "}