- KristWeb
+ {t("app.name")}
v{major}.{minor}.{patch}
{badge}
diff --git a/src/layouts/main/components/nav/ConnectionIndicator.tsx b/src/layouts/main/components/nav/ConnectionIndicator.tsx
index 2b996a0..25deef8 100644
--- a/src/layouts/main/components/nav/ConnectionIndicator.tsx
+++ b/src/layouts/main/components/nav/ConnectionIndicator.tsx
@@ -1,9 +1,15 @@
import React from "react";
+import { useTranslation } from "react-i18next";
+
import "./ConnectionIndicator.scss";
-export const ConnectionIndicator = (): JSX.Element => (
-
- Online
-
-);
+export const ConnectionIndicator = (): JSX.Element => {
+ const { t } = useTranslation();
+
+ return (
+
+ {t("nav.connection.online")}
+
+ );
+};
diff --git a/src/layouts/main/components/nav/Search.tsx b/src/layouts/main/components/nav/Search.tsx
index 6bf7a8f..8d08638 100644
--- a/src/layouts/main/components/nav/Search.tsx
+++ b/src/layouts/main/components/nav/Search.tsx
@@ -1,12 +1,18 @@
import React from "react";
+import { useTranslation } from "react-i18next";
+
import Form from "react-bootstrap/Form";
import FormControl from "react-bootstrap/FormControl";
import "./Search.scss";
-export const Search = (): JSX.Element => (
-
-);
+export const Search = (): JSX.Element => {
+ const { t } = useTranslation();
+
+ return (
+
+ );
+};
diff --git a/src/layouts/main/components/nav/index.tsx b/src/layouts/main/components/nav/index.tsx
index b5a1883..b027554 100644
--- a/src/layouts/main/components/nav/index.tsx
+++ b/src/layouts/main/components/nav/index.tsx
@@ -1,5 +1,7 @@
import React from "react";
+import { useTranslation } from "react-i18next";
+
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import { LinkContainer } from "react-router-bootstrap";
@@ -22,28 +24,38 @@
isGuest: state.walletManager.isGuest
});
-const MainNavComponent: React.FC
= ({ isGuest }: Props): JSX.Element => (
-
-
-
-
- {/* Main nav buttons, only show if logged in */}
- {!isGuest && }
-
-
-
-
-
-);
+ return (
+
+
+
+
+ {/* Main nav buttons, only show if logged in */}
+ {!isGuest && }
+
+
+
+
+
+ );
+};
export const MainNav = connect(mapStateToProps)(MainNavComponent);
diff --git a/src/layouts/main/components/sidebar/Footer.tsx b/src/layouts/main/components/sidebar/Footer.tsx
index 3388039..97bca5e 100644
--- a/src/layouts/main/components/sidebar/Footer.tsx
+++ b/src/layouts/main/components/sidebar/Footer.tsx
@@ -1,5 +1,7 @@
import React from "react";
+import { useTranslation, Trans } from "react-i18next";
+
import "./Footer.scss";
import packageJson from "@/package.json";
@@ -9,6 +11,8 @@
const req = require.context("@/", false, /\.\/host.json$/);
export const Footer = (): JSX.Element => {
+ const { t } = useTranslation();
+
const authorName = packageJson.author || "Lemmmy";
const authorURL = `https://github.com/${authorName}`;
const gitURL = packageJson.repository.url.replace(/\.git$/, "");
@@ -21,18 +25,18 @@
return (
);
diff --git a/src/layouts/main/components/sidebar/GuestIndicator.tsx b/src/layouts/main/components/sidebar/GuestIndicator.tsx
index 9d95d98..3f6e98a 100644
--- a/src/layouts/main/components/sidebar/GuestIndicator.tsx
+++ b/src/layouts/main/components/sidebar/GuestIndicator.tsx
@@ -1,5 +1,7 @@
import React from "react";
+import { useTranslation } from "react-i18next";
+
import "./GuestIndicator.scss";
import { bindActionCreators, Dispatch } from "redux";
@@ -11,10 +13,15 @@
type Props = ReturnType;
-const GuestIndicatorComponent: React.FC = (props: Props) => (
+const GuestIndicatorComponent: React.FC = (props: Props) => {
+ const { t } = useTranslation();
+
// Allow clicking the guest indicator to open the master password dialog again
- // eslint-disable-next-line react/prop-types
- { props.openLogin(); }}>Browsing as guest
-);
+ return ( // eslint-disable-next-line react/prop-types
+ { props.openLogin(); }}>
+ {t("sidebar.guestIndicator")}
+
+ );
+};
export const GuestIndicator = connect(null, mapDispatchToProps)(GuestIndicatorComponent);
diff --git a/src/layouts/main/components/sidebar/SidebarItem.tsx b/src/layouts/main/components/sidebar/SidebarItem.tsx
index 79c8134..581bb33 100644
--- a/src/layouts/main/components/sidebar/SidebarItem.tsx
+++ b/src/layouts/main/components/sidebar/SidebarItem.tsx
@@ -1,5 +1,7 @@
import React from "react";
+import { useTranslation } from "react-i18next";
+
import "./SidebarItem.scss";
import Nav from "react-bootstrap/Nav";
@@ -7,17 +9,21 @@
interface Props {
url: string;
- text: string;
+ textKey: string;
icon: string;
};
-export const SidebarItem: React.FC = ({ url, text, icon }: Props) => (
-
-
-
-
- {text}
-
-
-
-);
+export const SidebarItem: React.FC = ({ url, textKey, icon }: Props) => {
+ const { t } = useTranslation();
+
+ return (
+
+
+
+
+ {t(`sidebar.${textKey}`)}
+
+
+
+ );
+};
diff --git a/src/layouts/main/components/sidebar/TotalBalance.tsx b/src/layouts/main/components/sidebar/TotalBalance.tsx
index 7d152a8..fd3050f 100644
--- a/src/layouts/main/components/sidebar/TotalBalance.tsx
+++ b/src/layouts/main/components/sidebar/TotalBalance.tsx
@@ -1,4 +1,7 @@
import React from "react";
+
+import { useTranslation } from "react-i18next";
+
import { KristValue } from "@components/krist-value";
import "./TotalBalance.scss";
@@ -7,9 +10,13 @@
balance: number;
};
-export const TotalBalance: React.FC = ({ balance }: Props) => (
-
-
Total Balance
-
-
-);
+export const TotalBalance: React.FC = ({ balance }: Props) => {
+ const { t } = useTranslation();
+
+ return (
+
+
{t("sidebar.totalBalance")}
+
+
+ );
+};
diff --git a/src/layouts/main/components/sidebar/index.tsx b/src/layouts/main/components/sidebar/index.tsx
index c0c47c9..3d3eae6 100644
--- a/src/layouts/main/components/sidebar/index.tsx
+++ b/src/layouts/main/components/sidebar/index.tsx
@@ -1,5 +1,7 @@
import React from "react";
+import { useTranslation } from "react-i18next";
+
import Nav from "react-bootstrap/Nav";
import { GuestIndicator } from "./GuestIndicator";
@@ -20,35 +22,39 @@
isGuest: state.walletManager.isGuest
});
-const MainSidebarComponent: React.FC = ({ isGuest }: Props): JSX.Element => (
-
+ );
+};
export const MainSidebar = connect(mapStateToProps)(MainSidebarComponent);
diff --git a/src/layouts/main/index.tsx b/src/layouts/main/index.tsx
index 7c390dd..4625eb2 100644
--- a/src/layouts/main/index.tsx
+++ b/src/layouts/main/index.tsx
@@ -10,7 +10,7 @@
import { MainSidebar } from "./components/sidebar";
import { MyWalletsPage } from "@layouts/my-wallets";
-import { Credits } from "@layouts/credits";
+import { CreditsPage } from "@layouts/credits";
import "./index.scss";
@@ -29,7 +29,7 @@
-
+
diff --git a/src/layouts/my-wallets/index.tsx b/src/layouts/my-wallets/index.tsx
index aa9128b..ae16d82 100644
--- a/src/layouts/my-wallets/index.tsx
+++ b/src/layouts/my-wallets/index.tsx
@@ -1,5 +1,7 @@
import React, { Component, ReactNode } from "react";
+import { withTranslation, WithTranslation } from "react-i18next";
+
import { ListView, HeaderSpec } from "@components/list-view";
import { IconButton } from "@components/icon-button";
@@ -20,15 +22,16 @@
}
const WALLET_HEADERS = new Map, HeaderSpec>()
- .set("label", { name: "Label" })
- .set("address", { name: "Address" })
- .set("balance", { name: "Balance" })
- .set("names", { name: "Names" })
- .set("category", { name: "Category", sortable: false }) // TODO: temporary
- .set("firstSeen", { name: "First Seen" });
+ .set("label", { nameKey: "myWallets.columnLabel" })
+ .set("address", { nameKey: "myWallets.columnAddress" })
+ .set("balance", { nameKey: "myWallets.columnBalance" })
+ .set("names", { nameKey: "myWallets.columnNames" })
+ .set("category", { nameKey: "myWallets.columnCategory" })
+ .set("firstSeen", { nameKey: "myWallets.columnFirstSeen" });
-export class MyWalletsPage extends Component {
+class MyWalletsPageComponent extends Component {
render(): ReactNode {
+ const { t } = this.props;
return
title="23 wallets"
@@ -36,14 +39,14 @@
pages={3}
actions={<>
- Manage backups
+ {t("myWallets.manageBackups")}
- Create wallet
+ {t("myWallets.createWallet")}
}
filters={<>
@@ -53,7 +56,7 @@
{/* Category selection box */}
@@ -62,3 +65,5 @@
/>;
}
}
+
+export const MyWalletsPage = withTranslation()(MyWalletsPageComponent);
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index a11ad13..7be475b 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -26,7 +26,7 @@
/* -------------------------------------------------------------------------- */
/* MAIN SIDEBAR */
/* -------------------------------------------------------------------------- */
-$main-sidebar-width: 200px !default;
+$main-sidebar-width: 240px !default;
$main-sidebar-color: $body-color;
$main-sidebar-bg: $darker;
$main-sidebar-hover-bg: mix($darker, $darkest, 50%);
diff --git a/src/setupTests.ts b/src/setupTests.ts
deleted file mode 100644
index 5fdf001..0000000
--- a/src/setupTests.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom/extend-expect";
diff --git a/src/shared-components/list-view/ColumnHeader.tsx b/src/shared-components/list-view/ColumnHeader.tsx
index 93a4689..0fd2bee 100644
--- a/src/shared-components/list-view/ColumnHeader.tsx
+++ b/src/shared-components/list-view/ColumnHeader.tsx
@@ -1,5 +1,7 @@
import React, { ReactNode, Component } from "react";
+import { Translation } from "react-i18next";
+
import { HeaderSpec, SortDirection } from ".";
import "./ColumnHeader.scss";
@@ -46,7 +48,7 @@
};
return
- {headerSpec.name}
+ {t => t(headerSpec.nameKey)}
{sortable && sortButton()}
| ;
}
diff --git a/src/shared-components/list-view/ListPagination.tsx b/src/shared-components/list-view/ListPagination.tsx
index 71a3955..68fd72c 100644
--- a/src/shared-components/list-view/ListPagination.tsx
+++ b/src/shared-components/list-view/ListPagination.tsx
@@ -1,22 +1,26 @@
import React, { ReactNode, Component, createRef, ChangeEvent } from "react";
+import { withTranslation, WithTranslation } from "react-i18next";
+
import InputGroup from "react-bootstrap/InputGroup";
import Button from "react-bootstrap/Button";
import FormControl from "react-bootstrap/FormControl";
import "./ListPagination.scss";
-interface Props {
+interface OwnProps {
defaultPage: number;
pages: number;
}
+type Props = WithTranslation & OwnProps;
+
interface State {
focus: boolean;
value: string;
}
-export class ListPagination extends Component {
+class ListPaginationComponent extends Component {
private textInput = createRef();
private selected = false;
@@ -63,8 +67,12 @@
}
private getFriendlyText() {
+ const { t } = this.props;
const pageNumber = parseInt(this.state.value);
- return `Page ${pageNumber.toLocaleString()} of ${this.props.pages}`;
+ return t("pagination.pageWithTotal", {
+ page: pageNumber.toLocaleString(),
+ total: this.props.pages.toLocaleString()
+ });
}
render(): ReactNode {
@@ -104,3 +112,5 @@
);
}
};
+
+export const ListPagination = withTranslation()(ListPaginationComponent);
diff --git a/src/shared-components/list-view/ListTable.tsx b/src/shared-components/list-view/ListTable.tsx
index 2ec587b..28f1994 100644
--- a/src/shared-components/list-view/ListTable.tsx
+++ b/src/shared-components/list-view/ListTable.tsx
@@ -94,7 +94,7 @@
{headers &&
{Array.from(headers, ([headerKey, headerSpec]) =>
- ( void;
diff --git a/src/utils/setup.ts b/src/utils/setup.ts
index 20e11a9..d516403 100644
--- a/src/utils/setup.ts
+++ b/src/utils/setup.ts
@@ -3,6 +3,9 @@
import * as serviceWorker from "./serviceWorker";
import Debug from "debug";
+// Set up i18next
+import "./i18n";
+
// Set up custom debug formatters
// Booleans (%b)
Debug.formatters.b = (v: boolean) => v ? "true" : "false";