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"
+                    ? `${i18n.t("common.sat")}`
-                    : "SATS"}
+                    : `${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>

src/i18n/en/translations.ts

@@ -1,7 +1,41 @@
 export default {
+    common: {
+        nice: "Nice",
+        home: "Home",
+        sats: "SATS",
+        sat: "SAT",
+        usd: "USD",
+        fee: "Fee",
+        send: "Send",
+        receive: "Receive"
+    },
+    char: {
+        del: "DEL"
+    },
+    receive: {
+        receive_bitcoin: "Receive Bitcoin",
+        edit: "Edit",
+        checking: "Checking",
+        choose_format: "Choose format",
+        payment_received: "Payment Received",
+        payment_initiated: "Payment Initiated",
+        receive_add_the_sender: "Add the sender for your records"
+    },
+    send: {
+        sending: "Sending...",
+        confirm_send: "Confirm Send",
+        contact_placeholder: "Add the receiver for your records",
+        start_over: "Start Over"
+    },
+    activity: {
+        view_all: "View all",
+        receive_some_sats_to_get_started: "Receive some sats to get started",
+        channel_open: "Channel Open",
+        channel_close: "Channel Close",
+        unknown: "Unknown"
+    },
     create_an_issue: "Create an issue",
-    view_all: "View all",
+    feedback: "Bugs? Feedback?",
-    receive_some_sats_to_get_started: "Receive some sats to get started",
     send_bitcoin: "Send Bitcoin",
     view_transaction: "View Transaction",
     amount_editable_first_payment_10k_or_greater:
@@ -15,9 +49,7 @@ export default {
     set_amount: "Set amount",
     whats_with_the_fees: "What's with the fees?",
     private_tags: "Private tags",
-    receive_add_the_sender: "Add the sender for your records",
     continue: "Continue",
-    receive_bitcoin: "Receive Bitcoin",
     keep_mutiny_open: "Keep Mutiny open to complete the payment.",
     too_big_for_beta:
         "That's a lot of sats. You do know Mutiny Wallet is still in beta, yeah?"

src/routes/Receive.tsx

@@ -344,18 +344,20 @@ export default function Receive() {
                     >
                         <BackButton
                             onClick={() => setReceiveState("edit")}
-                            title="Edit"
+                            title={`${i18n.t("receive.edit")}`}
                             showOnDesktop
                         />
                     </Show>
                     <LargeHeader
                         action={
                             receiveState() === "show" && (
-                                <Indicator>Checking</Indicator>
+                                <Indicator>
+                                    {i18n.t("receive.checking")}
+                                </Indicator>
                             )
                         }
                     >
-                        {i18n.t("receive_bitcoin")}
+                        {i18n.t("receive.receive_bitcoin")}
                     </LargeHeader>
                     <Switch>
                         <Match when={!unified() || receiveState() === "edit"}>
@@ -373,7 +375,7 @@ export default function Receive() {
                                         selectedValues={selectedValues()}
                                         setSelectedValues={setSelectedValues}
                                         placeholder={i18n.t(
-                                            "receive_add_the_sender"
+                                            "receive.receive_add_the_sender"
                                         )}
                                     />
                                 </Card>
@@ -406,7 +408,9 @@ export default function Receive() {
                                     class="font-bold text-m-grey-400 flex gap-2 p-2 items-center mx-auto"
                                     onClick={() => setMethodChooserOpen(true)}
                                 >
-                                    <span>Choose format</span>
+                                    <span>
+                                        {i18n.t("receive.choose_format")}
+                                    </span>
                                     <img class="w-4 h-4" src={side2side} />
                                 </button>
                                 <SimpleDialog
@@ -441,8 +445,8 @@ export default function Receive() {
                                 <h1 class="w-full mt-4 mb-2 text-2xl font-semibold text-center md:text-3xl">
                                     {receiveState() === "paid" &&
                                     paidState() === "lightning_paid"
-                                        ? "Payment Received"
+                                        ? i18n.t("receive.payment_received")
-                                        : "Payment Initiated"}
+                                        : i18n.t("receive.payment_initiated")}
                                 </h1>
                                 <Amount
                                     amountSats={
@@ -465,7 +469,7 @@ export default function Receive() {
                                 >
                                     <div class="flex flex-row items-start gap-3">
                                         <p class="text-m-grey-400 text-sm leading-[17px] items-center">
-                                            Fee
+                                            {i18n.t("common.fee")}
                                         </p>
                                         <div class="flex items-start gap-1">
                                             <Amount
@@ -495,7 +499,7 @@ export default function Receive() {
                                             network
                                         )}
                                     >
-                                        View payment details
+                                        {i18n.t("view_transaction")}
                                     </ExternalLink>
                                 </Show>
                             </SuccessModal>

src/routes/Send.tsx

@@ -574,12 +574,16 @@ export default function Send() {
                     >
                         <BackButton
                             onClick={() => clearAll()}
-                            title="Start Over"
+                            title={`${i18n.t("send.start_over")}`}
                         />
                     </Show>
                     <LargeHeader>{i18n.t("send_bitcoin")}</LargeHeader>
                     <SuccessModal
-                        confirmText={sentDetails()?.amount ? "Nice" : "Home"}
+                        confirmText={
+                            sentDetails()?.amount
+                                ? `${i18n.t("send.nice")}`
+                                : `${i18n.t("send.home")}`
+                        }
                         open={!!sentDetails()}
                         setOpen={(open: boolean) => {
                             if (!open) setSentDetails(undefined);
@@ -616,7 +620,7 @@ export default function Send() {
                                 <hr class="w-16 bg-m-grey-400" />
                                 <div class="flex flex-row items-start gap-3">
                                     <p class="text-m-grey-400 text-sm leading-[17px] text-center">
-                                        Fees
+                                        {i18n.t("common.fee")}
                                     </p>
                                     <div class="flex items-start gap-1">
                                         <Amount
@@ -679,7 +683,9 @@ export default function Send() {
                                             setSelectedValues={
                                                 setSelectedContacts
                                             }
-                                            placeholder="Add the receiver for your records"
+                                            placeholder={i18n.t(
+                                                "send.contact_placeholder"
+                                            )}
                                         />
                                     </VStack>
                                 </Card>
@@ -714,7 +720,9 @@ export default function Send() {
                                 onClick={handleSend}
                                 loading={sending()}
                             >
-                                {sending() ? "Sending..." : "Confirm Send"}
+                                {sending()
+                                    ? i18n.t("send.sending")
+                                    : i18n.t("send.confirm_send")}
                             </Button>
                         </Show>
                         <FeedbackLink />