feat: add i18n

src/components/Activity.tsx

@@ -1,6 +1,7 @@
 import { NiceP } from "./layout";
 import { For, Match, Show, Switch, createEffect, createSignal } from "solid-js";
 import { useMegaStore } from "~/state/megaStore";
+import { useI18n } from "~/i18n/context";
 import { Contact } from "@mutinywallet/mutiny-wasm";
 import { ActivityItem, HackActivityType } from "./ActivityItem";
 import { DetailsIdModal } from "./DetailsModal";
@@ -77,6 +78,7 @@ function UnifiedActivityItem(props: {
 
 export function CombinedActivity(props: { limit?: number }) {
     const [state, actions] = useMegaStore();
+    const i18n = useI18n();
 
     const [detailsOpen, setDetailsOpen] = createSignal(false);
     const [detailsKind, setDetailsKind] = createSignal<HackActivityType>();
@@ -115,7 +117,7 @@ export function CombinedActivity(props: { limit?: number }) {
             <Switch>
                 <Match when={state.activity.length === 0}>
                     <div class="w-full text-center pb-4">
-                        <NiceP>Receive some sats to get started</NiceP>
+                        <NiceP>{i18n.t("receive_some_sats_to_get_started")}</NiceP>
                     </div>
                 </Match>
                 <Match

src/components/AmountEditable.tsx

@@ -20,6 +20,7 @@ import { InfoBox } from "./InfoBox";
 import { Network } from "~/logic/mutinyWalletSetup";
 import { FeesModal } from "./MoreInfoModal";
 import { useNavigate } from "@solidjs/router";
+import { useI18n } from "~/i18n/context";
 
 const CHARACTERS = [
     "1",
@@ -193,6 +194,7 @@ export const AmountEditable: ParentComponent<{
     maxAmountSats?: bigint;
     fee?: string;
 }> = (props) => {
+    const i18n = useI18n();
     const navigate = useNavigate();
     const [isOpen, setIsOpen] = createSignal(props.initialOpen);
     const [state, _actions] = useMegaStore();
@@ -236,7 +238,7 @@ export const AmountEditable: ParentComponent<{
             if (network === "bitcoin") {
                 return "Your first lightning receive needs to be 50,000 sats or greater. A setup fee will be deducted from the requested amount.";
             } else {
-                return "Your first lightning receive needs to be 10,000 sats or greater. A setup fee will be deducted from the requested amount.";
+                return i18n.t("amount_editable_first_payment_10k_or_greater");
             }
         }
 
@@ -399,7 +401,7 @@ export const AmountEditable: ParentComponent<{
                 <Show
                     when={localSats() !== "0"}
                     fallback={
-                        <div class="inline-block font-semibold">Set amount</div>
+                        <div class="inline-block font-semibold">{i18n.t("set_amount")}</div>
                     }
                 >
                     <InlineAmount amount={maxOrLocalSats()} />
@@ -526,7 +528,7 @@ export const AmountEditable: ParentComponent<{
                                 class="w-full flex-none"
                                 onClick={handleSubmit}
                             >
-                                Set Amount
+                                {i18n.t("set_amount")}
                             </Button>
                         </div>
                     </Dialog.Content>

src/components/App.tsx

@@ -12,9 +12,11 @@ import { BetaWarningModal } from "~/components/BetaWarningModal";
 import settings from "~/assets/icons/settings.svg";
 import pixelLogo from "~/assets/mutiny-pixel-logo.png";
 import { PendingNwc } from "./PendingNwc";
+import { useI18n } from "~/i18n/context";
 
 export default function App() {
     const [state, _actions] = useMegaStore();
+    const i18n = useI18n();
 
     return (
         <SafeArea>
@@ -68,7 +70,7 @@ export default function App() {
                             href="/activity"
                             class="text-m-red active:text-m-red/80 font-semibold no-underline self-center"
                         >
-                            View All
+                            {i18n.t("view_all")}
                         </A>
                     </Show>
                 </Card>
@@ -76,7 +78,7 @@ export default function App() {
                     Bugs? Feedback?{" "}
                     <span class="text-neutral-400">
                         <ExternalLink href="https://github.com/MutinyWallet/mutiny-web/issues">
-                            Create an issue
+                            {i18n.t("create_an_issue")}
                         </ExternalLink>
                     </span>
                 </p>

src/components/I18nProvider.tsx

@@ -0,0 +1,19 @@
+import { ParentComponent, Show, createResource } from "solid-js";
+import { I18nContext } from "../i18n/context";
+import i18next from "i18next";
+import i18nConfig from "~/i18n/config";
+
+export const I18nProvider: ParentComponent = (props) => {
+    const [i18nConfigured] = createResource(async () => {
+        await i18nConfig;
+        return true;
+    });
+
+    return (
+        <Show when={i18nConfigured()}>
+            <I18nContext.Provider value={i18next}>
+                {props.children}
+            </I18nContext.Provider>
+        </Show>
+    );
+};

src/components/MoreInfoModal.tsx

@@ -3,23 +3,21 @@ import { ParentComponent, createSignal } from "solid-js";
 import { DIALOG_CONTENT, DIALOG_POSITIONER, OVERLAY } from "./DetailsModal";
 import { ModalCloseButton, SmallHeader } from "./layout";
 import { ExternalLink } from "./layout/ExternalLink";
+import { useI18n } from "~/i18n/context";
 
 export function FeesModal() {
+    const i18n = useI18n();
     return (
-        <MoreInfoModal title="What's with the fees?" linkText="Why?">
+        <MoreInfoModal title={i18n.t("whats_with_the_fees")} linkText={i18n.t("why?")}>
             <p>
-                Mutiny is a self-custodial wallet. To initiate a lightning
-                payment we must open a lightning channel, which requires a
-                minimum amount and a setup fee.
+                {i18n.t("more_info_modal_p1")}
             </p>
             <p>
-                Future payments, both send and recieve, will only incur normal
-                network fees and a nominal service fee unless your channel runs
-                out of inbound capacity.
+                {i18n.t("more_info_modal_p2")}
             </p>
             <p>
                 <ExternalLink href="https://github.com/MutinyWallet/mutiny-web/wiki/Understanding-liquidity">
-                    Learn more about liquidity
+                    {i18n.t("learn_more_about_liquidity")}
                 </ExternalLink>
             </p>
         </MoreInfoModal>

src/components/layout/index.tsx

@@ -30,7 +30,7 @@ export const SmallHeader: ParentComponent<{ class?: string }> = (props) => {
 };
 
 export const Card: ParentComponent<{
-    title?: string;
+    title?: string | null;
     titleElement?: JSX.Element;
 }> = (props) => {
     return (