show fee explanation even for single sat

src/components/Amount.tsx

@@ -41,7 +41,9 @@ export function AmountSmall(props: {
   return (
     <span class="font-light">
       {prettyPrintAmount(props.amountSats)}&nbsp;
-      <span class="text-sm">SATS</span>
+      <span class="text-sm">
+        {props.amountSats === 1 || props.amountSats === 1n ? "SAT" : "SATS"}
+      </span>
     </span>
-  )
+  );
 }

src/routes/Receive.tsx

@@ -98,12 +98,20 @@ function FeeWarning(props: { fee: bigint; flavor: ReceiveFlavor }) {
 function FeeExplanation(props: { fee: bigint }) {
   return (
     // TODO: probably won't always be a fixed 2500?
-    <Show when={props.fee > 1000n}>
-      <InfoBox accent="green">
-        A lightning setup fee of <AmountSmall amountSats={props.fee} /> was charged for this
-        receive.
-      </InfoBox>
-    </Show>
+    <Switch>
+      <Match when={props.fee > 1000n}>
+        <InfoBox accent="green">
+          A lightning setup fee of <AmountSmall amountSats={props.fee} /> was charged for this
+          receive.
+        </InfoBox>
+      </Match>
+      <Match when={props.fee > 0n}>
+        <InfoBox accent="green">
+          A lightning service fee of <AmountSmall amountSats={props.fee} /> was charged for this
+          receive.
+        </InfoBox>
+      </Match>
+    </Switch>
   );
 }