translation pass 1

src/components/Activity.tsx

@@ -141,7 +141,9 @@ export function CombinedActivity(props: { limit?: number }) {
                 <Match when={activity.latest.length === 0}>
                     <div class="w-full text-center pb-4">
                         <NiceP>
-                            {i18n.t("receive_some_sats_to_get_started")}
+                            {i18n.t(
+                                "activity.receive_some_sats_to_get_started"
+                            )}
                         </NiceP>
                     </div>
                 </Match>
@@ -173,7 +175,7 @@ export function CombinedActivity(props: { limit?: number }) {
                     href="/activity"
                     class="text-m-red active:text-m-red/80 font-semibold no-underline self-center"
                 >
-                    {i18n.t("view_all")}
+                    {i18n.t("activity.view_all")}
                 </A>
             </Show>
         </Show>

src/components/ActivityItem.tsx

@@ -10,6 +10,7 @@ import { generateGradient } from "~/utils/gradientHash";
 import { useMegaStore } from "~/state/megaStore";
 import { Contact } from "@mutinywallet/mutiny-wasm";
 import { Amount } from "~/components/Amount";
+import { useI18n } from "~/i18n/context";
 
 export const ActivityAmount: ParentComponent<{
     amount: string;
@@ -93,6 +94,7 @@ export function ActivityItem(props: {
     onClick?: () => void;
 }) {
     const [state, _actions] = useMegaStore();
+    const i18n = useI18n();
 
     const firstContact = () =>
         props.contacts?.length ? props.contacts[0] : null;
@@ -135,12 +137,12 @@ export function ActivityItem(props: {
                 <Switch>
                     <Match when={props.kind === "ChannelClose"}>
                         <span class="text-base font-semibold text-neutral-500">
-                            Channel Close
+                            {i18n.t("activity.channel_close")}
                         </span>
                     </Match>
                     <Match when={props.kind === "ChannelOpen"}>
                         <span class="text-base font-semibold text-neutral-500">
-                            Channel Open
+                            {i18n.t("activity.channel_open")}
                         </span>{" "}
                     </Match>
                     <Match when={firstContact()?.name}>
@@ -155,13 +157,13 @@ export function ActivityItem(props: {
                     </Match>
                     <Match when={props.positive}>
                         <span class="text-base font-semibold text-neutral-500">
-                            Unknown
+                            {i18n.t("activity.unknown")}
                         </span>
                     </Match>
 
                     <Match when={!props.positive}>
                         <span class="text-base font-semibold text-neutral-500">
-                            Unknown
+                            {i18n.t("activity.unknown")}
                         </span>
                     </Match>
                 </Switch>

src/components/Amount.tsx

@@ -3,6 +3,7 @@ import { useMegaStore } from "~/state/megaStore";
 import { satsToUsd } from "~/utils/conversions";
 import bolt from "~/assets/icons/bolt.svg";
 import chain from "~/assets/icons/chain.svg";
+import { useI18n } from "~/i18n/context";
 
 function prettyPrintAmount(n?: number | bigint): string {
     if (!n || n.valueOf() === 0) {
@@ -22,6 +23,7 @@ export function Amount(props: {
     green?: boolean;
 }) {
     const [state, _] = useMegaStore();
+    const i18n = useI18n();
 
     const amountInUsd = () =>
         satsToUsd(state.price, Number(props.amountSats) || 0, true);
@@ -76,7 +78,7 @@ export function Amount(props: {
                                 Number(props.amountSats) === 0
                             }
                         >
-                            SATS
+                            {i18n.t("common.sats")}
                         </Show>
                         <Show
                             when={
@@ -84,7 +86,7 @@ export function Amount(props: {
                                 Number(props.amountSats) === 1
                             }
                         >
-                            SAT
+                            {i18n.t("common.sat")}
                         </Show>
                     </span>
                 </h1>
@@ -113,7 +115,7 @@ export function Amount(props: {
                             "text-base": props.size === "large"
                         }}
                     >
-                        &nbsp;USD
+                        &nbsp;{i18n.t("common.usd")}
                     </span>
                 </h2>
             </Show>
@@ -124,13 +126,14 @@ export function Amount(props: {
 export function AmountSmall(props: {
     amountSats: bigint | number | undefined;
 }) {
+    const i18n = useI18n();
     return (
         <span class="font-light">
             {prettyPrintAmount(props.amountSats)}&nbsp;
             <span class="text-sm">
                 {props.amountSats === 1 || props.amountSats === 1n
-                    ? "SAT"
-                    : "SATS"}
+                    ? `${i18n.t("common.sat")}`
+                    : `${i18n.t("common.sats")}`}
             </span>
         </span>
     );

src/components/AmountEditable.tsx

@@ -24,21 +24,6 @@ import { FeesModal } from "./MoreInfoModal";
 import { useNavigate } from "@solidjs/router";
 import { useI18n } from "~/i18n/context";
 
-const CHARACTERS = [
-    "1",
-    "2",
-    "3",
-    "4",
-    "5",
-    "6",
-    "7",
-    "8",
-    "9",
-    ".",
-    "0",
-    "DEL"
-];
-
 const FIXED_AMOUNTS_SATS = [
     { label: "10k", amount: "10000" },
     { label: "100k", amount: "100000" },
@@ -128,6 +113,7 @@ function SingleDigitButton(props: {
 
 function BigScalingText(props: { text: string; fiat: boolean }) {
     const chars = () => props.text.length;
+    const i18n = useI18n();
 
     return (
         <h1
@@ -143,16 +129,21 @@ function BigScalingText(props: { text: string; fiat: boolean }) {
             }}
         >
             {props.text}&nbsp;
-            <span class="text-xl">{props.fiat ? "USD" : "SATS"}</span>
+            <span class="text-xl">
+                {props.fiat ? "USD" : `${i18n.t("common.sats")}`}
+            </span>
         </h1>
     );
 }
 
 function SmallSubtleAmount(props: { text: string; fiat: boolean }) {
+    const i18n = useI18n();
     return (
         <h2 class="flex flex-row items-end text-xl font-light text-neutral-400">
             ~{props.text}&nbsp;
-            <span class="text-base">{props.fiat ? "USD" : "SATS"}</span>
+            <span class="text-base">
+                {props.fiat ? "USD" : `${i18n.t("common.sats")}`}
+            </span>
             <img
                 class={"pl-[4px] pb-[4px] hover:cursor-pointer"}
                 src={currencySwap}
@@ -211,6 +202,20 @@ export const AmountEditable: ParentComponent<{
             false
         )
     );
+    const CHARACTERS = [
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "8",
+        "9",
+        ".",
+        "0",
+        `${i18n.t("char.del")}`
+    ];
 
     const displaySats = () => toDisplayHandleNaN(localSats(), false);
     const displayFiat = () => `$${toDisplayHandleNaN(localFiat(), true)}`;

src/components/BalanceBox.tsx

@@ -4,6 +4,7 @@ import { useMegaStore } from "~/state/megaStore";
 import { Amount } from "./Amount";
 import { A, useNavigate } from "solid-start";
 import shuffle from "~/assets/icons/shuffle.svg";
+import { useI18n } from "~/i18n/context";
 
 export function LoadingShimmer() {
     return (
@@ -23,6 +24,7 @@ const STYLE =
 
 export default function BalanceBox(props: { loading?: boolean }) {
     const [state, _actions] = useMegaStore();
+    const i18n = useI18n();
 
     const emptyBalance = () =>
         (state.balance?.confirmed || 0n) === 0n &&
@@ -85,14 +87,14 @@ export default function BalanceBox(props: { loading?: boolean }) {
                     disabled={emptyBalance() || props.loading}
                     intent="green"
                 >
-                    Send
+                    {i18n.t("common.send")}
                 </Button>
                 <Button
                     onClick={() => navigate("/receive")}
                     disabled={props.loading}
                     intent="blue"
                 >
-                    Receive
+                    {i18n.t("common.receive")}
                 </Button>
             </div>
         </>

src/components/successfail/SuccessModal.tsx

@@ -2,6 +2,7 @@ import { Dialog } from "@kobalte/core";
 import { JSX } from "solid-js";
 import { Button } from "~/components/layout";
 import { DIALOG_CONTENT, DIALOG_POSITIONER } from "~/styles/dialogs";
+import { useI18n } from "~/i18n/context";
 
 type SuccessModalProps = {
     open: boolean;
@@ -12,6 +13,7 @@ type SuccessModalProps = {
 };
 
 export function SuccessModal(props: SuccessModalProps) {
+    const i18n = useI18n();
     const onNice = () => {
         props.onConfirm ? props.onConfirm() : props.setOpen(false);
     };
@@ -27,7 +29,8 @@ export function SuccessModal(props: SuccessModalProps) {
                         </Dialog.Description>
                         <div class="w-full flex max-w-[300px] mx-auto">
                             <Button onClick={onNice} intent="inactive">
-                                {props.confirmText ?? "Nice"}
+                                {props.confirmText ??
+                                    `${i18n.t("common.nice")}`}
                             </Button>
                         </div>
                     </Dialog.Content>