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 (

src/i18n/config.ts

@@ -0,0 +1,26 @@
+import i18next from 'i18next';
+import HttpApi from 'i18next-http-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+const i18n = i18next
+  .use(HttpApi)
+  .use(LanguageDetector)
+  .init({
+    fallbackLng: 'en',
+    preload: ['en'],
+    load: 'languageOnly',
+    ns: ['translations'],
+    defaultNS: 'translations',
+    fallbackNS: false,
+    debug: true,
+    detection: {
+      order: ['querystring', 'navigator', 'htmlTag'],
+      lookupQuerystring: 'lang',
+    },
+    backend: {
+      loadPath: 'src/i18n/{{lng}}/{{ns}}.json',
+    }
+  }, (err, t) => {
+    // Do we actually wanna log something in case of an unsupported language? 
+    if (err) return console.error(err)
+  });
+export default i18n;

src/i18n/context.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'solid-js';
+import { i18n } from "i18next";
+
+export const I18nContext = createContext<i18n>();
+
+export function useI18n() {
+    const context = useContext(I18nContext);
+    
+    if (!context) throw new ReferenceError('I18nContext');
+    
+    return context;
+}

src/i18n/en/translations.json

@@ -0,0 +1,19 @@
+{
+    "create_an_issue": "Create an issue",
+    "view_all": "View all",
+    "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": "Your first lightning receive needs to be 10,000 sats or greater. A setup fee will be deducted from the requested amount.",
+    "why?": "Why?",
+    "more_info_modal_p1": "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.",
+    "more_info_modal_p2": "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.",
+    "learn_more_about_liquidity": "Learn more about liquidity",
+    "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."
+}

src/i18n/pt/translations.json

@@ -0,0 +1,18 @@
+{
+    "create_an_issue": "Crie uma issue",
+    "view_all": "Ver todas",
+    "receive_some_sats_to_get_started": "Receba alguns satoshis para começar",
+    "send_bitcoin": "Enviar Bitcoin",
+    "view_transaction": "Ver transação",
+    "amount_editable_first_payment_10k_or_greater": "Seu primeiro recebimento na lightning precisa ser de pelo menos 10.000 sats. Uma taxa de configuração será deduzida da quantidade requisitada.",
+    "why?": "Por que?",
+    "more_info_modal_p1": "Mutiny é uma carteira de auto custódia. Para iniciar um pagamento na lightning, nós precisamos abrir um canal que requer uma quantidade mínima e uma taxa de configuração.",
+    "more_info_modal_p2": "Transaçoēs futuras, como envios e recebimentos, terão somente taxas normais da rede e uma taxa de serviço nominal a não ser que seu canal fique sem capacidade de entrada.",
+    "learn_more_about_liquidity": "Aprenda mais sobre liquidez",
+    "set_amount": "Definir quantidade",
+    "whats_with_the_fees": "O que há com as taxas?",
+    "private_tags": "Tags privadas",
+    "receive_add_the_sender": "Marque quem o enviou para registro próprio",
+    "continue": "Continuar",
+    "receive_bitcoin": "Receber Bitcoin"
+}

src/root.tsx

@@ -16,6 +16,7 @@ import "./root.css";
 import { Provider as MegaStoreProvider } from "~/state/megaStore";
 import { Toaster } from "~/components/Toaster";
 import ErrorDisplay from "./components/ErrorDisplay";
+import { I18nProvider } from "./components/I18nProvider";
 
 export default function Root() {
     return (
@@ -76,12 +77,14 @@ export default function Root() {
             <Body>
                 <Suspense>
                     <ErrorBoundary fallback={(e) => <ErrorDisplay error={e} />}>
-                        <MegaStoreProvider>
-                            <Routes>
-                                <FileRoutes />
-                            </Routes>
-                            <Toaster />
-                        </MegaStoreProvider>
+                        <I18nProvider>
+                            <MegaStoreProvider>
+                                <Routes>
+                                    <FileRoutes />
+                                </Routes>
+                                <Toaster />
+                            </MegaStoreProvider>
+                        </I18nProvider>
                     </ErrorBoundary>
                 </Suspense>
                 <Scripts />

src/routes/Receive.tsx

@@ -44,6 +44,7 @@ import { InfoBox } from "~/components/InfoBox";
 import { FeesModal } from "~/components/MoreInfoModal";
 import { IntegratedQr } from "~/components/IntegratedQR";
 import side2side from "~/assets/icons/side-to-side.svg";
+import { useI18n } from "~/i18n/context";
 
 type OnChainTx = {
     transaction: {
@@ -143,6 +144,7 @@ function FeeExplanation(props: { fee: bigint }) {
 export default function Receive() {
     const [state, _actions] = useMegaStore();
     const navigate = useNavigate();
+    const i18n = useI18n();
 
     const [amount, setAmount] = createSignal("");
     const [receiveState, setReceiveState] = createSignal<ReceiveState>("edit");
@@ -331,7 +333,7 @@ export default function Receive() {
                             )
                         }
                     >
-                        Receive Bitcoin
+                        {i18n.t("receive_bitcoin")}
                     </LargeHeader>
                     <Switch>
                         <Match when={!unified() || receiveState() === "edit"}>
@@ -344,11 +346,11 @@ export default function Receive() {
                                     exitRoute={amount() ? "/receive" : "/"}
                                 />
 
-                                <Card title="Private tags">
+                                <Card title={i18n.t("private_tags")}>
                                     <TagEditor
                                         selectedValues={selectedValues()}
                                         setSelectedValues={setSelectedValues}
-                                        placeholder="Add the sender for your records"
+                                        placeholder={i18n.t("receive_add_the_sender")}
                                     />
                                 </Card>
 
@@ -359,7 +361,7 @@ export default function Receive() {
                                     intent="green"
                                     onClick={onSubmit}
                                 >
-                                    Continue
+                                    {i18n.t("continue")}
                                 </Button>
                             </div>
                         </Match>
@@ -371,7 +373,7 @@ export default function Receive() {
                                 kind={flavor()}
                             />
                             <p class="text-neutral-400 text-center">
-                                Keep Mutiny open to receive the payment.
+                                {i18n.t("keep_mutiny_open")}
                             </p>
                             <button
                                 class="font-bold text-m-grey-400 flex gap-2 p-2 items-center mx-auto"

src/routes/Send.tsx

@@ -43,6 +43,7 @@ import { Network } from "~/logic/mutinyWalletSetup";
 import { SuccessModal } from "~/components/successfail/SuccessModal";
 import { ExternalLink } from "~/components/layout/ExternalLink";
 import { InfoBox } from "~/components/InfoBox";
+import { useI18n } from "~/i18n/context";
 
 export type SendSource = "lightning" | "onchain";
 
@@ -193,6 +194,7 @@ function DestinationShower(props: {
 export default function Send() {
     const [state, actions] = useMegaStore();
     const navigate = useNavigate();
+    const i18n = useI18n();
 
     // These can only be set by the user
     const [fieldDestination, setFieldDestination] = createSignal("");
@@ -558,7 +560,7 @@ export default function Send() {
                             title="Start Over"
                         />
                     </Show>
-                    <LargeHeader>Send Bitcoin</LargeHeader>
+                    <LargeHeader>{i18n.t("send_bitcoin")}</LargeHeader>
                     <SuccessModal
                         title={
                             sentDetails()?.amount ? "Sent" : "Payment Failed"
@@ -602,7 +604,7 @@ export default function Send() {
                                             network
                                         )}
                                     >
-                                        View Transaction
+                                        {i18n.t("view_transaction")}
                                     </ExternalLink>
                                 </Show>
                             </Match>
@@ -634,7 +636,7 @@ export default function Send() {
                                             lnurl={lnurlp()}
                                             clearAll={clearAll}
                                         />
-                                        <SmallHeader>Private tags</SmallHeader>
+                                        <SmallHeader>{i18n.t("private_tags")}</SmallHeader>
                                         <TagEditor
                                             selectedValues={selectedContacts()}
                                             setSelectedValues={