chore: use slashed zero and sensitive (#708)

Adds slashed-zeros everywhere we use amounts and sensitive where we reveal balances (onchain and lightning) and invoice amounts (i.e. only in transactions list)
getAlby · Oct 8, 2024 · 622a5e8 · 622a5e8
2 parents f2670bd + ea9e817
commit 622a5e8
Show file tree

Hide file tree

Showing 19 changed files with 27 additions and 27 deletions.
diff --git a/frontend/src/components/BalanceCard.tsx b/frontend/src/components/BalanceCard.tsx
@@ -33,7 +33,7 @@ function BalanceCard({
         <BalanceCardIcon className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
-        <div className="text-2xl font-bold balance sensitive">
+        <div className="text-2xl font-bold balance sensitive slashed-zero">
           {new Intl.NumberFormat().format(Math.floor(balance / 1000))} sats
         </div>
       </CardContent>

diff --git a/frontend/src/components/BudgetAmountSelect.tsx b/frontend/src/components/BudgetAmountSelect.tsx
@@ -26,7 +26,7 @@ function BudgetAmountSelect({
                 onChange(budgetOptions[budget]);
               }}
               className={cn(
-                "cursor-pointer rounded text-nowrap border-2 text-center p-4",
+                "cursor-pointer rounded text-nowrap border-2 text-center p-4 slashed-zero",
                 !customBudget && value == budgetOptions[budget]
                   ? "border-primary"
                   : "border-muted"

diff --git a/frontend/src/components/Permissions.tsx b/frontend/src/components/Permissions.tsx
@@ -170,7 +170,7 @@ const Permissions: React.FC<PermissionsProps> = ({
                   </span>{" "}
                   {permissions.budgetRenewal || "Never"}
                 </p>
-                <p>
+                <p className="slashed-zero">
                   <span className="text-primary font-medium">
                     Budget Amount:
                   </span>{" "}

diff --git a/frontend/src/components/PodcastingInfo.tsx b/frontend/src/components/PodcastingInfo.tsx
@@ -36,7 +36,7 @@ function PodcastingInfo({ boost }: { boost: Boostagram }) {
       {boost.valueMsatTotal && (
         <div className="mt-6">
           <p>Total amount</p>
-          <p className="text-muted-foreground break-all">
+          <p className="text-muted-foreground break-all sensitive">
             {new Intl.NumberFormat().format(
               Math.floor(boost.valueMsatTotal / 1000)
             )}{" "}

diff --git a/frontend/src/components/TransactionItem.tsx b/frontend/src/components/TransactionItem.tsx
@@ -175,7 +175,7 @@ function TransactionItem({ tx }: Props) {
             >
               {typeStateIcon}
               <div className="ml-4">
-                <p className="text-xl md:text-2xl font-semibold">
+                <p className="text-xl md:text-2xl font-semibold sensitive">
                   {new Intl.NumberFormat().format(Math.floor(tx.amount / 1000))}{" "}
                   {Math.floor(tx.amount / 1000) == 1 ? "sat" : "sats"}
                 </p>

diff --git a/frontend/src/components/channels/ChannelsCards.tsx b/frontend/src/components/channels/ChannelsCards.tsx
@@ -33,7 +33,7 @@ export function ChannelsCards({ channels, nodes }: ChannelsCardsProps) {
   return (
     <>
       <p className="font-semibold text-lg mt-4">Channels</p>
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4 slashed-zero">
         {channels
           .sort((a, b) =>
             a.localBalance + a.remoteBalance > b.localBalance + b.remoteBalance

diff --git a/frontend/src/components/channels/ChannelsTable.tsx b/frontend/src/components/channels/ChannelsTable.tsx
@@ -32,7 +32,7 @@ export function ChannelsTable({ channels, nodes }: ChannelsTableProps) {
   }
 
   return (
-    <div className="border rounded-lg max-w-full overflow-y-auto">
+    <div className="border rounded-lg max-w-full overflow-y-auto slashed-zero">
       <Table>
         <TableHeader>
           <TableRow>

diff --git a/frontend/src/components/connections/AlbyConnectionCard.tsx b/frontend/src/components/connections/AlbyConnectionCard.tsx
@@ -151,7 +151,7 @@ function AlbyConnectionCard({ connection }: { connection?: App }) {
             </div>
           </div>
           {connection && (
-            <div>
+            <div className="slashed-zero">
               <Link
                 to={`/apps/${connection.nostrPubkey}?edit=true`}
                 className="absolute top-0 right-0"

diff --git a/frontend/src/components/connections/AppCard.tsx b/frontend/src/components/connections/AppCard.tsx
@@ -37,7 +37,7 @@ export default function AppCard({ app }: Props) {
           </div>
         </CardTitle>
       </CardHeader>
-      <CardContent className="flex-1 flex flex-col">
+      <CardContent className="flex-1 flex flex-col slashed-zero">
         <AppCardConnectionInfo connection={app} />
       </CardContent>
     </Card>

diff --git a/frontend/src/screens/apps/ShowApp.tsx b/frontend/src/screens/apps/ShowApp.tsx
@@ -222,7 +222,7 @@ function AppInternal({ app, refetchApp, capabilities }: AppInternalProps) {
             <CardHeader>
               <CardTitle>Info</CardTitle>
             </CardHeader>
-            <CardContent>
+            <CardContent className="slashed-zero">
               <Table>
                 <TableBody>
                   <TableRow>

diff --git a/frontend/src/screens/channels/Channels.tsx b/frontend/src/screens/channels/Channels.tsx
@@ -248,7 +248,7 @@ export default function Channels() {
 
       <div
         className={cn(
-          "grid grid-cols-1 gap-3",
+          "grid grid-cols-1 gap-3 slashed-zero",
           showHostedBalance ? "xl:grid-cols-4" : "lg:grid-cols-3"
         )}
       >

diff --git a/frontend/src/screens/channels/CurrentChannelOrder.tsx b/frontend/src/screens/channels/CurrentChannelOrder.tsx
@@ -301,9 +301,9 @@ function PayBitcoinChannelOrderTopup({ order }: { order: NewChannelOrder }) {
       <div className="grid gap-5 max-w-lg">
         <div className="grid gap-1.5">
           <Label htmlFor="text">On-Chain Address</Label>
-          <p className="text-xs">
+          <p className="text-xs slashed-zero">
             You currently have{" "}
-            <span className="font-semibold">
+            <span className="font-semibold sensitive">
               {new Intl.NumberFormat().format(balances.onchain.total)}
             </span>{" "}
             sats. We recommend depositing{" "}
@@ -382,7 +382,7 @@ function PayBitcoinChannelOrderTopup({ order }: { order: NewChannelOrder }) {
             </CardDescription>
           </CardHeader>
           {unspentAmount > 0 && (
-            <CardContent>
+            <CardContent className="slashed-zero">
               {new Intl.NumberFormat().format(unspentAmount)} sats deposited
             </CardContent>
           )}
@@ -687,7 +687,7 @@ function PayLightningChannelOrder({ order }: { order: NewChannelOrder }) {
       {lspOrderResponse && (
         <>
           <div className="max-w-md flex flex-col gap-5">
-            <div className="border rounded-lg">
+            <div className="border rounded-lg slashed-zero">
               <Table>
                 <TableBody>
                   {lspOrderResponse.outgoingLiquidity > 0 && (

diff --git a/frontend/src/screens/channels/IncreaseIncomingCapacity.tsx b/frontend/src/screens/channels/IncreaseIncomingCapacity.tsx
@@ -299,7 +299,7 @@ function NewChannelInternal({
                                   )}
                                   <div>
                                     {peer.name}
-                                    <span className="ml-4 text-xs text-muted-foreground">
+                                    <span className="ml-4 text-xs text-muted-foreground slashed-zero">
                                       Min.{" "}
                                       {new Intl.NumberFormat().format(
                                         peer.minimumChannelSize

diff --git a/frontend/src/screens/channels/IncreaseOutgoingCapacity.tsx b/frontend/src/screens/channels/IncreaseOutgoingCapacity.tsx
@@ -269,7 +269,7 @@ function NewChannelInternal({ network }: { network: Network }) {
                 setAmount(e.target.value.trim());
               }}
             />
-            <div className="text-muted-foreground text-sm">
+            <div className="text-muted-foreground text-sm sensitive slashed-zero">
               Current savings balance:{" "}
               {new Intl.NumberFormat().format(balances.onchain.spendable)} sats
             </div>
@@ -333,7 +333,7 @@ function NewChannelInternal({ network }: { network: Network }) {
                                     <div>
                                       {peer.name}
                                       {peer.minimumChannelSize > 0 && (
-                                        <span className="ml-4 text-xs text-muted-foreground">
+                                        <span className="ml-4 text-xs text-muted-foreground slashed-zero">
                                           Min.{" "}
                                           {new Intl.NumberFormat().format(
                                             peer.minimumChannelSize

diff --git a/frontend/src/screens/channels/auto/AutoChannel.tsx b/frontend/src/screens/channels/auto/AutoChannel.tsx
@@ -105,7 +105,7 @@ export function AutoChannel() {
       <MempoolAlert />
       {invoice && channelSize && (
         <div className="flex flex-col gap-4 items-center justify-center max-w-md">
-          <p className="text-muted-foreground">
+          <p className="text-muted-foreground slashed-zero">
             Please pay the lightning invoice below which will cover the costs of
             opening your channel. You will receive a channel with{" "}
             {new Intl.NumberFormat().format(channelSize)} sats of incoming

diff --git a/frontend/src/screens/channels/first/FirstChannel.tsx b/frontend/src/screens/channels/first/FirstChannel.tsx
@@ -104,7 +104,7 @@ export function FirstChannel() {
       <MempoolAlert />
       {invoice && channelSize && (
         <div className="flex flex-col gap-4 items-center justify-center max-w-md">
-          <p className="text-muted-foreground">
+          <p className="text-muted-foreground slashed-zero">
             Please pay the lightning invoice below which will cover the costs of
             opening your first channel. You will receive a channel with{" "}
             {new Intl.NumberFormat().format(channelSize)} sats of incoming
@@ -143,7 +143,7 @@ export function FirstChannel() {
               <>
                 <p>
                   Your Alby hosted balance currently holds{" "}
-                  <span className="font-medium text-foreground">
+                  <span className="font-medium text-foreground sensitive slashed-zero">
                     {new Intl.NumberFormat().format(albyBalance?.sats)} sats
                   </span>
                   .

diff --git a/frontend/src/screens/wallet/WithdrawOnchainFunds.tsx b/frontend/src/screens/wallet/WithdrawOnchainFunds.tsx
@@ -154,7 +154,7 @@ export default function WithdrawOnchainFunds() {
           <div className="">
             <Label htmlFor="amount">Amount</Label>
             <div className="flex justify-between items-center mb-1">
-              <p className="text-sm text-muted-foreground">
+              <p className="text-sm text-muted-foreground sensitive slashed-zero">
                 Current onchain balance:{" "}
                 {new Intl.NumberFormat().format(balances.onchain.spendable)}{" "}
                 sats
@@ -187,14 +187,14 @@ export default function WithdrawOnchainFunds() {
                 <AlertDescription>
                   Your entire wallet balance
                   {balances.onchain.reserved > 0 && (
-                    <>
+                    <span className="sensitive slashed-zero">
                       {" "}
                       including reserves (
                       {new Intl.NumberFormat().format(
                         balances.onchain.reserved
                       )}{" "}
                       sats)
-                    </>
+                    </span>
                   )}{" "}
                   will be sent minus onchain transaction fees. The exact amount
                   cannot be determined until the payment is made.
@@ -264,7 +264,7 @@ export default function WithdrawOnchainFunds() {
                     </p>
                     <p className="mt-4">
                       Amount:{" "}
-                      <span className="font-bold">
+                      <span className="font-bold slashed-zero">
                         {sendAll ? (
                           "entire savings balance"
                         ) : (

diff --git a/frontend/src/screens/wallet/index.tsx b/frontend/src/screens/wallet/index.tsx
@@ -49,7 +49,7 @@ function Wallet() {
             <ArrowLeftRight className="w-10 h-10 text-primary-background" />
             <h3 className="mt-4 text-lg font-semibold">
               You still have{" "}
-              <span className="font-bold">
+              <span className="font-bold slashed-zero sensitive">
                 {new Intl.NumberFormat().format(albyBalance.sats)}
               </span>{" "}
               sats in your Alby shared wallet

diff --git a/frontend/src/screens/wallet/send/ConfirmPayment.tsx b/frontend/src/screens/wallet/send/ConfirmPayment.tsx
@@ -70,7 +70,7 @@ export default function ConfirmPayment() {
         <p className="font-medium text-lg mb-2">Payment Details</p>
         <div>
           <Label>Amount</Label>
-          <p className="font-bold">
+          <p className="font-bold slashed-zero">
             {new Intl.NumberFormat().format(invoice.satoshi)} sats
           </p>
         </div>