28 | {titleKey ? t(titleKey) : title}{titleExtra}
29 | {value}
30 |
;
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/addresses/ContextualAddress.less:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | @import (reference) "../../App.less";
5 |
6 | .contextual-address {
7 | &:not(.contextual-address-allow-wrap) {
8 | .address-metaname, .address-name, .address-raw-metaname,
9 | .address-wallet {
10 | white-space: nowrap;
11 | }
12 | }
13 |
14 | .address-address, .address-original {
15 | white-space: nowrap;
16 | }
17 |
18 | .address-original {
19 | opacity: 0.8;
20 | }
21 |
22 | &.contextual-address-non-existent {
23 | &, span, a {
24 | color: @text-color-secondary;
25 |
26 | cursor: not-allowed;
27 |
28 | text-decoration-line: underline;
29 | text-decoration-style: dotted;
30 | text-decoration-color: @text-color-secondary;
31 | text-decoration-thickness: 1px;
32 | }
33 | }
34 |
35 | .address-verified {
36 | white-space: nowrap;
37 | word-break: break-word;
38 |
39 | &:not(.address-verified-inactive) {
40 | &, a {
41 | color: fade(@kw-orange, 60%);
42 |
43 | .address-verified-label, .kw-verified-check-icon {
44 | color: @kw-orange;
45 | }
46 | }
47 | }
48 |
49 | .kw-verified-check-icon {
50 | display: inline-block;
51 | font-size: 80%;
52 | margin-left: 0.25em;
53 |
54 | svg {
55 | position: relative;
56 | top: -1px;
57 | }
58 | }
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/components/addresses/VerifiedCheck.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import classNames from "classnames";
5 | import Icon from "@ant-design/icons";
6 |
7 | export const VerifiedCheckSvg = (): JSX.Element => (
8 |
11 | );
12 | export const VerifiedCheck = ({ className, ...props }: any): JSX.Element =>
13 |
11 | {category}
12 |
13 | ),
14 |
15 | // Will possibly be used for filtering. See OptionValue for a comment on
16 | // the naming of this prop.
17 | "data-picker-category": category
18 | };
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/addresses/picker/NameHint.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { Typography } from "antd";
5 |
6 | import { useTranslation, Trans } from "react-i18next";
7 |
8 | import { KristName } from "@api/types";
9 | import { ContextualAddress } from "@comp/addresses/ContextualAddress";
10 |
11 | const { Text } = Typography;
12 |
13 | interface Props {
14 | name?: KristName;
15 | }
16 |
17 | export function NameHint({ name }: Props): JSX.Element {
18 | const { t } = useTranslation();
19 |
20 | return
21 | {name
22 | ? (
23 |
7 | {/* Spinner */}
8 |
9 |
10 | {/* Loading hint */}
11 | {/* NOTE: This is not translated, as usually this component is shown when
12 | the translations are being loaded! */}
13 | setsetstsetsetestLoading KristWeb...
14 |
;
15 | }
16 |
--------------------------------------------------------------------------------
/src/global/AppServices.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { StorageBroadcast } from "./StorageBroadcast";
5 | import { LegacyMigration } from "./legacy/LegacyMigration";
6 | import { SyncWallets } from "@comp/wallets/SyncWallets";
7 | import { ForcedAuth } from "./ForcedAuth";
8 | import { WebsocketService } from "./ws/WebsocketService";
9 | import { SyncMOTD } from "./ws/SyncMOTD";
10 | import { AppHotkeys } from "./AppHotkeys";
11 | import { PurchaseKristHandler } from "./PurchaseKrist";
12 | import { AdvanceTip } from "@pages/dashboard/TipsCard";
13 |
14 | export function AppServices(): JSX.Element {
15 | return <>
16 | {tStr("description")}
40 | 41 | {/* If Sentry error reporting is enabled, add a message saying the error 42 | * was automatically reported. */} 43 | {errorReporting && ( 44 |{tStr("sentryNote")}
45 | )} 46 | } 47 | />; 48 | } 49 | -------------------------------------------------------------------------------- /src/global/ForcedAuth.tsx: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2020-2021 Drew Lemmy 2 | // This file is part of KristWeb 2 under AGPL-3.0. 3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt 4 | import { message } from "antd"; 5 | import { useTranslation, TFunction } from "react-i18next"; 6 | 7 | import { authMasterPassword, useMasterPassword } from "@wallets"; 8 | 9 | import { useMountEffect } from "@utils/hooks"; 10 | import { criticalError } from "@utils"; 11 | 12 | async function forceAuth(t: TFunction, salt: string, tester: string): Promise setSidebarCollapsed(true)}
38 | />}
39 |
40 |
41 |
43 |
44 |
45 | ;
46 | }
47 |
--------------------------------------------------------------------------------
/src/layout/PageLayout.less:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | @import (reference) "../App.less";
5 |
6 | .page-layout {
7 | height: 100%;
8 |
9 | .page-layout-header.ant-page-header {
10 | min-height: @kw-page-header-height;
11 |
12 | padding-bottom: 0;
13 |
14 | .ant-page-header-heading-sub-title {
15 | .ant-typography {
16 | color: inherit;
17 | }
18 | }
19 |
20 | // Hide extra table pagination on mobile
21 | @media (max-width: @screen-md) {
22 | .ant-pagination {
23 | display: none;
24 | }
25 | }
26 | }
27 |
28 | .page-layout-contents {
29 | height: calc(100% - @kw-page-header-height);
30 |
31 | padding: @padding-lg;
32 |
33 | // Make tables full-width on mobile (though most should be replaced with
34 | // custom views)
35 | @media (max-width: @screen-md) {
36 | padding: @padding-md;
37 |
38 | >.ant-table-wrapper {
39 | .ant-table {
40 | margin: 0 -@padding-lg;
41 | }
42 |
43 | .ant-pagination {
44 | justify-content: center;
45 |
46 | .ant-pagination-total-text {
47 | display: none;
48 | }
49 |
50 | .ant-pagination-item, .ant-pagination-prev {
51 | margin-right: 3px;
52 | }
53 |
54 | .ant-pagination-next {
55 | margin-right: 0;
56 | }
57 | }
58 | }
59 | }
60 |
61 | @media (max-width: @screen-sm) {
62 | padding: @padding-sm;
63 | }
64 | }
65 |
66 | &.page-layout-no-top-padding {
67 | .page-layout-contents {
68 | padding-top: 0;
69 | }
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/src/layout/nav/Brand.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { Tag } from "antd";
5 |
6 | import { useTranslation } from "react-i18next";
7 |
8 | import semverMajor from "semver/functions/major";
9 | import semverMinor from "semver/functions/minor";
10 | import semverPatch from "semver/functions/patch";
11 | import semverPrerelease from "semver/functions/prerelease";
12 |
13 | import { ConditionalLink } from "@comp/ConditionalLink";
14 |
15 | import { getDevState } from "@utils";
16 |
17 | declare const __GIT_VERSION__: string;
18 |
19 | const prereleaseTagColours: { [key: string]: string } = {
20 | "dev": "red",
21 | "alpha": "orange",
22 | "beta": "blue",
23 | "rc": "green"
24 | };
25 |
26 | const GIT_RE = /^\d+-g[a-f0-9]{5,32}(?:-dirty)?$/;
27 |
28 | export function Brand(): JSX.Element {
29 | const { t } = useTranslation();
30 |
31 | const gitVersion: string = __GIT_VERSION__;
32 |
33 | const major = semverMajor(gitVersion);
34 | const minor = semverMinor(gitVersion);
35 | const patch = semverPatch(gitVersion);
36 | const prerelease = semverPrerelease(gitVersion);
37 |
38 | const isGit = prerelease ? GIT_RE.test(prerelease.join("")) : false;
39 |
40 | const { isDirty, isDev } = getDevState();
41 |
42 | // Convert semver prerelease parts to Bootstrap badge
43 | const tagContents = isDirty || isDev
44 | ? ["dev"]
45 | : (isGit ? null : prerelease);
46 | let tag = null;
47 | if (tagContents && tagContents.length) {
48 | const variant = prereleaseTagColours[tagContents[0]] || undefined;
49 | tag = {tagContents.join(".")} ;
50 | }
51 |
52 | return = {
15 | "connected": "nav.connection.online",
16 | "disconnected": "nav.connection.offline",
17 | "connecting": "nav.connection.connecting"
18 | };
19 |
20 | export function ConnectionIndicator(): JSX.Element {
21 | const { t } = useTranslation();
22 | const connectionState = useSelector((s: RootState) => s.websocket.connectionState);
23 |
24 | return
29 |
;
42 | }
43 |
--------------------------------------------------------------------------------
/src/pages/backup/BackupResultsSummary.less:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | @import (reference) "../../App.less";
5 |
6 | .backup-results-summary {
7 | .summary-wallets-imported .positive, .summary-contacts-imported .positive {
8 | color: @kw-green;
9 | font-weight: bold;
10 | }
11 |
12 | .summary-errors-warnings .errors {
13 | color: @kw-red;
14 | font-weight: bold;
15 | }
16 |
17 | .summary-errors-warnings .warnings {
18 | color: @kw-orange;
19 | font-weight: bold;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/pages/backup/BackupResultsTree.less:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | @import (reference) "../../App.less";
5 |
6 | .backup-results-tree {
7 | max-height: 480px;
8 | overflow-y: auto;
9 |
10 | .backup-result-icon {
11 | margin-right: @padding-xs;
12 | }
13 |
14 | // Map the different result type icons to their appropriate colours
15 | .anticon.backup-result-success { color: @kw-green; }
16 | .anticon.backup-result-warning { color: @kw-orange; }
17 | .anticon.backup-result-error { color: @kw-red; }
18 |
19 | // Make the non-leaf nodes bold, so the tree is more readable
20 | .ant-tree-treenode:not(.backup-results-tree-message) .ant-tree-title {
21 | font-weight: 500;
22 | }
23 |
24 | // The leaf nodes have an invisible button which takes up space; remove that
25 | .ant-tree-switcher-noop {
26 | display: none;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/pages/backup/ImportProgress.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { useState } from "react";
5 | import { Progress } from "antd";
6 |
7 | import { Trans } from "react-i18next";
8 | import { useTFns } from "@utils/i18n";
9 |
10 | export type IncrProgressFn = () => void;
11 | export type InitProgressFn = (total: number) => void;
12 |
13 | interface ImportProgressHookResponse {
14 | progressBar: JSX.Element;
15 | onProgress: IncrProgressFn;
16 | initProgress: InitProgressFn;
17 | resetProgress: () => void;
18 | }
19 |
20 | export function useImportProgress(): ImportProgressHookResponse {
21 | const { t, tKey } = useTFns("import.");
22 |
23 | const [progress, setProgress] = useState(0);
24 | const [total, setTotal] = useState(1);
25 |
26 | // Increment the progress bar when one of the wallets/contacts have been
27 | // imported
28 | const onProgress = () => setProgress(c => c + 1);
29 |
30 | function initProgress(total: number) {
31 | setProgress(0);
32 | setTotal(total);
33 | }
34 |
35 | function resetProgress() {
36 | setProgress(0);
37 | setTotal(1);
38 | }
39 |
40 | const progressBar = <>
41 | {/* Importing text */}
42 | {
11 | const { salt, tester } = store.getState().masterPassword;
12 | const { wallets } = store.getState().wallets;
13 | const { contacts } = store.getState().contacts;
14 |
15 | // Get the wallets, skipping those with dontSave set to true
16 | const finalWallets = Object.fromEntries(Object.entries(wallets)
17 | .filter(([_, w]) => w.dontSave !== true));
18 |
19 | const gitVersion: string = __GIT_VERSION__;
20 | const pkgbuild = __PKGBUILD__;
21 |
22 | const backup = {
23 | version: 2,
24 | gitVersion,
25 | pkgbuild,
26 |
27 | // Store these to verify the master password is correct when importing
28 | salt, tester,
29 |
30 | wallets: finalWallets,
31 | contacts
32 | };
33 |
34 | // Convert to base64'd JSON
35 | return encode(JSON.stringify(backup));
36 | }
37 |
--------------------------------------------------------------------------------
/src/pages/blocks/BlockHash.less:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | @import (reference) "../../App.less";
5 |
6 | .block-hash {
7 | color: @kw-text-tertiary;
8 |
9 | font-family: monospace;
10 | font-size: 90%;
11 |
12 | &-short-part {
13 | color: @kw-text;
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/pages/blocks/BlockHash.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import classNames from "classnames";
5 | import { Typography } from "antd";
6 |
7 | import { useBooleanSetting } from "@utils/settings";
8 |
9 | import "./BlockHash.less";
10 |
11 | const { Text } = Typography;
12 |
13 | const SHORT_HASH_LENGTH = 12;
14 |
15 | interface Props {
16 | hash?: string | null;
17 | alwaysCopyable?: boolean;
18 | neverCopyable?: boolean;
19 | className?: string;
20 | }
21 |
22 | export function BlockHash({ hash, alwaysCopyable, neverCopyable, className }: Props): JSX.Element | null {
23 | const blockHashCopyButtons = useBooleanSetting("blockHashCopyButtons");
24 |
25 | if (hash === undefined || hash === null) return null;
26 |
27 | // If the hash is longer than 12 characters (i.e. it's not just a short hash
28 | // on its own), then split it into two parts, so the short hash can be
29 | // highlighted. Otherwise, just put the whole hash in restHash.
30 | const shortHash = hash.length > SHORT_HASH_LENGTH
31 | ? hash.substr(0, SHORT_HASH_LENGTH) : "";
32 | const restHash = hash.length > SHORT_HASH_LENGTH
33 | ? hash.substring(SHORT_HASH_LENGTH, hash.length) : hash;
34 |
35 | const copyable = alwaysCopyable || (!neverCopyable && blockHashCopyButtons)
36 | ? { text: hash } : undefined;
37 |
38 | const classes = classNames("block-hash", className);
39 |
40 | return
41 | {shortHash && {shortHash}}
42 | {restHash}
43 | ;
44 | }
45 |
--------------------------------------------------------------------------------
/src/pages/blocks/BlockPage.less:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | @import (reference) "../../App.less";
5 |
6 | .block-page {
7 | .block-nav-buttons {
8 | .block-prev.ant-btn, .block-prev .ant-btn {
9 | margin-right: @margin-sm;
10 | padding-left: @padding-sm;
11 | }
12 |
13 | .block-next.ant-btn, .block-next .ant-btn {
14 | padding-right: @padding-sm;
15 | }
16 | }
17 |
18 | .block-info-row {
19 | max-width: 768px;
20 | margin-top: -@margin-lg;
21 | margin-bottom: @margin-lg;
22 |
23 | .kw-statistic {
24 | margin-top: @margin-lg;
25 | margin-right: @margin-lg;
26 |
27 | .date-time {
28 | font-size: @font-size-base * 1.5;
29 | }
30 |
31 | &.statistic-block-hash .kw-statistic-value, .block-hash {
32 | font-size: @font-size-base;
33 | line-height: 1;
34 | }
35 | }
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/pages/blocks/BlocksPage.less:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | @import (reference) "../../App.less";
5 | @import "../../style/table.less";
6 |
7 | .blocks-page .table-mobile-list-view {
8 | .block-mobile-item {
9 | display: block;
10 | color: @text-color;
11 |
12 | .block-height {
13 | display: block;
14 | font-size: 120%;
15 | }
16 |
17 | .block-value {
18 | float: right;
19 | font-size: 120%;
20 | }
21 |
22 | .block-field {
23 | font-weight: bold;
24 | white-space: nowrap;
25 | color: @text-color-secondary;
26 | }
27 |
28 | .block-technical-row {
29 | display: block;
30 |
31 | .block-mobile-hash, .block-difficulty {
32 | font-size: 90%;
33 | }
34 |
35 | .block-mobile-hash-value {
36 | color: @text-color;
37 | font-family: monospace;
38 | }
39 |
40 | .sep:before {
41 | content: "\2013";
42 |
43 | display: inline-block;
44 | margin: 0 @padding-xs;
45 | color: @text-color-secondary;
46 | }
47 | }
48 |
49 | .block-mined {
50 | color: @text-color-secondary;
51 | font-size: @font-size-sm;
52 | }
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/src/pages/contacts/ContactEditButton.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import React, { useState, useCallback, FC } from "react";
5 |
6 | import { AddContactModal } from "./AddContactModal";
7 |
8 | import { Contact } from "@contacts";
9 |
10 | interface Props {
11 | address?: string;
12 | contact?: Contact;
13 | }
14 |
15 | export const ContactEditButton: FC = ({
16 | address,
17 | contact,
18 | children
19 | }): JSX.Element => {
20 | const [editContactVisible, setEditContactVisible] = useState(false);
21 |
22 | const child = React.Children.only(children) as React.ReactElement;
23 |
24 | return <>
25 | {React.cloneElement(child, { onClick: (e: MouseEvent) => {
26 | e.preventDefault();
27 | setEditContactVisible(true);
28 | }})}
29 |
30 | ();
50 | const [contact, setContact] = useState();
51 |
52 | const open = useCallback((address?: string, contact?: Contact) => {
53 | setAddress(address);
54 | setContact(contact);
55 | setVisible(true);
56 | setOpened(true);
57 | }, []);
58 |
59 | const modal = opened
60 | ?
50 |
51 |
57 | ;
58 | }
59 |
--------------------------------------------------------------------------------
/src/pages/contacts/ContactsPage.less:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | @import (reference) "../../App.less";
5 | @import "../../style/table.less";
6 |
7 | .contacts-page .table-mobile-list-view {
8 | .contact-mobile-item {
9 | .contact-label {
10 | display: block;
11 | font-size: 120%;
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/pages/contacts/ContactsPage.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { useTFns } from "@utils/i18n";
5 |
6 | import { PageLayout } from "@layout/PageLayout";
7 |
8 | import { useContacts } from "@contacts";
9 |
10 | import { useContactsPageActions } from "./ContactsPageActions";
11 | import { ContactsTable } from "./ContactsTable";
12 |
13 | import { useEditContactModal } from "./ContactEditButton";
14 | import { useSendTransactionModal } from "@comp/transactions/SendTransactionModalLink";
15 |
16 | import "./ContactsPage.less";
17 |
18 | /** Contact count subtitle */
19 | function ContactsPageSubtitle(): JSX.Element {
20 | const { t, tStr, tKey } = useTFns("addressBook.");
21 | const { contactAddressList } = useContacts();
22 |
23 | const count = contactAddressList.length;
24 |
25 | return <>{count > 0
26 | ? t(tKey("contactCount"), { count })
27 | : tStr("contactCountEmpty")
28 | };
29 | }
30 |
31 | export function ContactsPage(): JSX.Element {
32 | const [openEditContact, editContactModal] = useEditContactModal();
33 | const [openSendTx, sendTxModal] = useSendTransactionModal();
34 |
35 | const extra = useContactsPageActions();
36 |
37 | return >;
16 | }
17 |
18 | function ContactsPageActions({
19 | setAddContactVisible
20 | }: ExtraButtonsProps): JSX.Element {
21 | const { tStr } = useTFns("addressBook.");
22 |
23 | return <>
24 | {/* Add contact */}
25 | }
28 | onClick={() => setAddContactVisible(true)}
29 | >
30 | {tStr("buttonAddContact")}
31 |
32 | ;
33 | }
34 |
35 | export function useContactsPageActions(): JSX.Element {
36 | const { tStr } = useTFns("addressBook.");
37 |
38 | const [addContactVisible, setAddContactVisible] = useState(false);
39 |
40 | const [usingTopMenu, set, unset] = useTopMenuOptions();
41 | useEffect(() => {
42 | set(<>
43 | {/* Add contact */}
44 | setAddContactVisible(true)}>
45 |
47 | );
48 |
49 | return unset;
50 | }, [tStr, set, unset]);
51 |
52 | return <>
53 | {!usingTopMenu &&
26 | Welcome to the KristWeb v2 public beta! This site is relatively new, so
27 | please report any bugs on
28 | GitHub.
29 | Thanks!
30 | }
31 | />;
32 | }
33 |
--------------------------------------------------------------------------------
/src/pages/dashboard/MOTDCard.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { Card, Alert } from "antd";
5 |
6 | import { useSelector } from "react-redux";
7 | import { RootState } from "@store";
8 |
9 | import { useTranslation } from "react-i18next";
10 |
11 | import Markdown from "markdown-to-jsx";
12 | import { useMarkdownLink } from "@comp/krist/MarkdownLink";
13 | import { DateTime } from "@comp/DateTime";
14 |
15 | export function MOTDCard(): JSX.Element {
16 | const { t } = useTranslation();
17 | const { motd, motdSet, endpoint, debugMode }
18 | = useSelector((s: RootState) => s.node.motd);
19 |
20 | // Make relative links start with the sync node, and override all links to
21 | // open in a new tab
22 | const MarkdownLink = useMarkdownLink();
23 |
24 | return
25 | {(debugMode || (endpoint ? (btoa([...endpoint] as any) !== atob("YXl4eUxHa3NjeXgwTEM0c1l5eGxMSElzYVN4aExIUXNMaXh1TEdVc2RBPT0=") && btoa([...endpoint] as any) !== atob("YXl4eUxHa3NjeXgwTEM0c1pDeGxMSFk9")) : false)) &&
31 | {motd}
32 |
33 |
34 | ;
36 | }
37 |
--------------------------------------------------------------------------------
/src/pages/dashboard/WalletItem.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { Row, Col } from "antd";
5 |
6 | import { Wallet } from "@wallets";
7 |
8 | import { KristValue } from "@comp/krist/KristValue";
9 | import { ContextualAddress } from "@comp/addresses/ContextualAddress";
10 |
11 | export function WalletItem({ wallet }: { wallet: Wallet }): JSX.Element {
12 | return
13 |
;
28 | }
29 |
--------------------------------------------------------------------------------
/src/pages/dashboard/WhatsNewCard.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { Card, Button } from "antd";
5 | import { RightOutlined } from "@ant-design/icons";
6 |
7 | import { Link } from "react-router-dom";
8 |
9 | import { useTranslation } from "react-i18next";
10 |
11 | export function WhatsNewCard(): JSX.Element {
12 | const { t } = useTranslation();
13 |
14 | return
18 |
19 | }>
20 | {t("dashboard.whatsNewButton")}
21 |
22 |
23 | ;
24 | }
25 |
--------------------------------------------------------------------------------
/src/pages/dev/DevPage.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { useState } from "react";
5 | import { Button, Space } from "antd";
6 | import { PageLayout } from "@layout/PageLayout";
7 |
8 | import { useWallets, deleteWallet } from "@wallets";
9 |
10 | import Debug from "debug";
11 | const debug = Debug("kristweb:dev-page");
12 |
13 | export function DevPage(): JSX.Element {
14 | const { wallets } = useWallets();
15 |
16 | const [forceError, setForceError] = useState(false);
17 | if (forceError) throw new Error("Whoops!");
18 |
19 | return
23 |
24 | {/* Delete all wallets with zero balance */}
25 |
34 |
35 | {/* Delete all wallets */}
36 |
39 |
40 | {/* Clear local storage */}
41 |
44 |
45 | {/* Cause an error */}
46 |
49 |
50 | ;
51 | }
52 |
--------------------------------------------------------------------------------
/src/pages/names/NamePage.less:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | @import (reference) "../../App.less";
5 |
6 | .name-page {
7 | .top-name-row {
8 | display: flex;
9 | align-items: center;
10 |
11 | .name {
12 | display: inline-block;
13 | margin-right: @margin-lg;
14 | margin-bottom: 0;
15 |
16 | font-size: @font-size-base * 2;
17 | font-weight: 500;
18 |
19 | .ant-typography-copy {
20 | line-height: 1 !important;
21 | margin-left: @padding-xs;
22 |
23 | .anticon {
24 | font-size: @font-size-base;
25 | vertical-align: 0;
26 | }
27 | }
28 | }
29 |
30 | .ant-btn {
31 | margin-right: @margin-md;
32 | &:last-child { margin-right: 0; }
33 | }
34 | }
35 |
36 | .name-info-row {
37 | max-width: 768px;
38 | margin-bottom: @margin-lg;
39 |
40 | .kw-statistic {
41 | margin-top: @margin-lg;
42 | margin-right: @margin-lg;
43 |
44 | .date-time {
45 | font-size: @font-size-base * 1.5;
46 | }
47 | }
48 | }
49 |
50 | .name-a-record-row {
51 | max-width: 768px;
52 | margin-bottom: @margin-lg;
53 |
54 | .name-a-record-edit {
55 | margin-left: @padding-xs;
56 | }
57 | }
58 |
59 | .name-card-row {
60 | & > .ant-col {
61 | margin-bottom: @margin-md;
62 | }
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/src/pages/names/NamesPage.less:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | @import (reference) "../../App.less";
5 | @import "../../style/table.less";
6 |
7 | .names-page {
8 | // Highlight unpaid names
9 | .ant-table .name-row-unpaid {
10 | background: fade(@kw-primary, 15%);
11 |
12 | td.ant-table-cell {
13 | border-bottom-color: fade(@kw-primary, 20%);
14 | }
15 |
16 | .ant-table-cell.ant-table-column-sort {
17 | background: fade(@kw-primary, 20%);
18 | }
19 |
20 | &:hover td.ant-table-cell {
21 | background: fade(@kw-primary, 20%);
22 |
23 | &.ant-table-cell.ant-table-column-sort {
24 | background: fade(@kw-primary, 35%);
25 | }
26 | }
27 | }
28 |
29 | .table-mobile-list-view {
30 | .name-mobile-item {
31 | .name-name {
32 | display: block;
33 | font-size: 120%;
34 | }
35 |
36 | .name-tags {
37 | float: right;
38 |
39 | .ant-tag {
40 | white-space: nowrap;
41 | }
42 | }
43 |
44 | .name-field {
45 | font-weight: bold;
46 | white-space: nowrap;
47 | color: @text-color-secondary;
48 | }
49 |
50 | .name-registered, .name-updated {
51 | margin-top: @padding-xss;
52 | color: @text-color-secondary;
53 | font-size: @font-size-sm;
54 | }
55 | }
56 | }
57 |
58 | @media (max-width: @screen-sm) {
59 | // Make the "Purchase name" button full width on mobile
60 | .ant-page-header-heading-extra {
61 | width: 100%;
62 |
63 | .ant-btn {
64 | display: block;
65 | width: 100%;
66 | margin-top: @margin-sm;
67 | }
68 | }
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/src/pages/names/mgmt/ConfirmModal.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { useTranslation, Trans, TFunction } from "react-i18next";
5 |
6 | import { ContextualAddress } from "@comp/addresses/ContextualAddress";
7 | import { ModalStaticFunctions } from "antd/lib/modal/confirm";
8 |
9 | interface Props {
10 | count: number;
11 | recipient?: string;
12 | allNamesCount: number;
13 | }
14 |
15 | export function showConfirmModal(
16 | t: TFunction,
17 | confirmModal: Omit,
18 | count: number,
19 | allNamesCount: number,
20 | recipient: string,
21 | triggerSubmit: () => void,
22 | setSubmitting: (value: boolean) => void,
23 | ): void {
24 | confirmModal.confirm({
25 | title: t("nameTransfer.modalTitle"),
26 | content: = allNamesCount
52 | ? "nameTransfer.warningAllNames"
53 | : "nameTransfer.warningMultipleNames"}
54 | count={count}
55 | >
56 | Are you sure you want to transfer {{ count }} names to
57 | ;
59 | }
60 |
--------------------------------------------------------------------------------
/src/pages/names/mgmt/EditProgress.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { useState } from "react";
5 | import { Progress } from "antd";
6 |
7 | import { Trans } from "react-i18next";
8 | import { TFns } from "@utils/i18n";
9 |
10 | interface EditProgressHookResponse {
11 | progressBar: JSX.Element;
12 | onProgress: () => void;
13 | initProgress: (total: number) => void;
14 | resetProgress: () => void;
15 | }
16 |
17 | export function useEditProgress(
18 | { t, tKey }: TFns
19 | ): EditProgressHookResponse {
20 | const [submitProgress, setSubmitProgress] = useState(0);
21 | const [submitTotal, setSubmitTotal] = useState(1);
22 |
23 | // Increment the progress bar when one of the names has been edited
24 | const onProgress = () => setSubmitProgress(c => c + 1);
25 |
26 | function initProgress(total: number) {
27 | setSubmitProgress(0);
28 | setSubmitTotal(total);
29 | }
30 |
31 | function resetProgress() {
32 | setSubmitProgress(0);
33 | setSubmitTotal(1);
34 | }
35 |
36 | const progressBar = <>
37 | {/* Submitting text */}
38 | 255)
22 | throw t("nameUpdate.errorParameterData");
23 | }
24 | }]}
25 | >
26 |
31 | ;
32 | }
33 |
--------------------------------------------------------------------------------
/src/pages/names/mgmt/NamePurchaseModalLink.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { FC, useState } from "react";
5 |
6 | import { AuthorisedAction } from "@comp/auth/AuthorisedAction";
7 | import { NamePurchaseModal } from "./NamePurchaseModal";
8 |
9 | export const NamePurchaseModalLink: FC = ({ children }): JSX.Element => {
10 | const [modalVisible, setModalVisible] = useState(false);
11 |
12 | return <>
13 | setModalVisible(true)}>
14 | {children}
15 |
16 |
17 | >;
14 | className?: string;
15 | }
16 |
17 | export function NoWalletsModal({
18 | className,
19 | visible,
20 | setVisible
21 | }: Props): JSX.Element {
22 | const { t } = useTranslation();
23 | const history = useHistory();
24 |
25 | const classes = classNames("kw-no-names-modal", className);
26 |
27 | return {
34 | setVisible?.(false);
35 | history.push("/me/names");
36 | }}
37 | okText={t("noNamesResult.button")}
38 |
39 | onCancel={() => setVisible?.(false)}
40 | cancelText={t("dialog.cancel")}
41 | >
42 | {t("noNamesResult.subTitle")}
43 | ;
44 | }
45 |
--------------------------------------------------------------------------------
/src/pages/names/mgmt/SuccessNotifContent.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { useTranslation, Trans } from "react-i18next";
5 |
6 | import { ContextualAddress } from "@comp/addresses/ContextualAddress";
7 |
8 | import { Mode } from "./NameEditModal";
9 |
10 | interface Props {
11 | count: number;
12 | recipient?: string;
13 | mode: Mode;
14 | }
15 |
16 | export function SuccessNotifContent({
17 | count,
18 | recipient,
19 | mode
20 | }: Props): JSX.Element | null {
21 | const { t } = useTranslation();
22 |
23 | // Show the appropriate message, if this is all the owner's names
24 | if (mode === "transfer") {
25 | // Transfer names success notification
26 | return
31 | Transferred {{ count }} names to
32 | ;
34 | } else if (mode === "update") {
35 | // Update names success notification
36 | return
41 | Updated {{ count }} names.
42 | ;
43 | } else {
44 | return null;
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/pages/names/mgmt/checkName.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { Dispatch, SetStateAction } from "react";
5 |
6 | import * as api from "@api";
7 | import { criticalError } from "@utils";
8 |
9 | interface CheckNameResponse {
10 | available: boolean;
11 | }
12 |
13 | export async function checkName(
14 | name: string,
15 | setNameAvailable: Dispatch>
16 | ): Promise {
17 | try {
18 | const url = `names/check/${encodeURIComponent(name)}`;
19 | const { available } = await api.get(url);
20 | setNameAvailable(available);
21 | } catch (err: any) {
22 | criticalError(err);
23 | setNameAvailable(undefined);
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/pages/names/tableLock.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { useSelector } from "react-redux";
5 | import { RootState } from "@store";
6 | import { store } from "@app";
7 | import {
8 | incrementNameTableLock, decrementNameTableLock
9 | } from "@actions/MiscActions";
10 |
11 | import Debug from "debug";
12 | const debug = Debug("kristweb:name-table-lock");
13 |
14 | export function useNameTableLock(): boolean {
15 | const nameTableLock = useSelector((s: RootState) => s.misc.nameTableLock);
16 | return nameTableLock > 0;
17 | }
18 |
19 | export interface NameTableLock {
20 | release: () => void;
21 | }
22 |
23 | export function lockNameTable(timeoutMs = 20000): NameTableLock {
24 | let _timeout: ReturnType | undefined = setTimeout(() => {
25 | debug("timeout reached, releasing name table lock");
26 | release();
27 | }, timeoutMs);
28 |
29 | function release() {
30 | if (_timeout !== undefined) {
31 | debug("name table lock being released");
32 | store.dispatch(decrementNameTableLock());
33 |
34 | debug("clearing name table lock timeout %o", _timeout);
35 | clearTimeout(_timeout);
36 | _timeout = undefined;
37 | }
38 | }
39 |
40 | debug("name table being locked");
41 | store.dispatch(incrementNameTableLock());
42 |
43 | return { release };
44 | }
45 |
--------------------------------------------------------------------------------
/src/pages/settings/SettingBoolean.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { Switch } from "antd";
5 |
6 | import { useTranslation } from "react-i18next";
7 |
8 | import { SettingName, setBooleanSetting, useBooleanSetting } from "@utils/settings";
9 | import { SettingDescription } from "./SettingDescription";
10 |
11 | interface Props {
12 | setting: SettingName;
13 | title?: string;
14 | titleKey?: string;
15 | description?: string;
16 | descriptionKey?: string;
17 | }
18 |
19 | export function SettingBoolean({
20 | setting,
21 | title, titleKey,
22 | description, descriptionKey
23 | }: Props): JSX.Element {
24 | const settingValue = useBooleanSetting(setting);
25 |
26 | const { t } = useTranslation();
27 |
28 | function onChange(value: boolean) {
29 | setBooleanSetting(setting, value);
30 | }
31 |
32 | return ;
14 | title?: string;
15 | titleKey?: string;
16 | description?: string;
17 | descriptionKey?: string;
18 | }
19 |
20 | export function SettingInteger({
21 | setting,
22 | title, titleKey,
23 | description, descriptionKey
24 | }: Props): JSX.Element {
25 | const settingValue = useIntegerSetting(setting);
26 | const [value, setValue] = useState(settingValue);
27 |
28 | const { t } = useTranslation();
29 |
30 | const numVal = value ? Number(value) : undefined;
31 | const isValid = numVal !== undefined
32 | && !isNaN(numVal)
33 | && validateIntegerSetting(setting, numVal);
34 |
35 | function onSave() {
36 | if (!isValid) return;
37 | setIntegerSetting(setting, numVal!);
38 | }
39 |
40 | return
30 |
31 |
36 | ;
37 | }
38 |
--------------------------------------------------------------------------------
/src/pages/settings/SettingsPage.less:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | @import (reference) "../../App.less";
5 |
6 | .settings-page {
7 | .big-menu.ant-menu.ant-menu-inline {
8 | .ant-menu-item {
9 | display: flex;
10 | flex-direction: column;
11 | justify-content: center;
12 |
13 | .menu-item-setting {
14 | margin: -@padding-xs 0;
15 | padding: @padding-xs 0;
16 | }
17 | }
18 | }
19 |
20 | .settings-language-item {
21 | // ant-design adds `width: calc(100% + 1px)` to menu items for some reason
22 | width: 100%;
23 |
24 | &.ant-menu-item {
25 | flex-direction: row !important;
26 | justify-content: flex-start !important;
27 | }
28 |
29 | &.settings-language-item-current {
30 | background: lighten(@kw-darker, 5%);
31 | color: @primary-color;
32 | }
33 |
34 | .settings-language-flag {
35 | display: inline-block;
36 |
37 | width: 30px;
38 | height: 20px;
39 |
40 | vertical-align: -0.25em;
41 |
42 | margin-right: @margin-sm;
43 | }
44 |
45 | .settings-language-native-name {
46 | color: @text-color-secondary;
47 | margin-left: @padding-xs;
48 | }
49 | }
50 |
51 | .settings-translations-extra {
52 | // Force the fake label button to vertically align correctly
53 | display: flex;
54 |
55 | .ant-btn {
56 | margin-right: @margin-sm;
57 | &:last-child { margin-right: 0; }
58 | }
59 | }
60 |
61 | .menu-item-setting-integer {
62 | .ant-input-group.ant-input-group-compact {
63 | display: inline-block;
64 | width: auto;
65 | margin-right: @margin-sm;
66 | margin-bottom: @padding-xs;
67 | }
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/src/pages/settings/translations/LanguageItem.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { FC } from "react";
5 | import classNames from "classnames";
6 | import { Menu } from "antd";
7 |
8 | import { useTranslation } from "react-i18next";
9 | import { getLanguages, Language } from "@utils/i18n";
10 |
11 | import { Flag } from "@comp/Flag";
12 |
13 | interface LanguageItemProps {
14 | code: string;
15 | lang: Language;
16 | }
17 | const LanguageItem: FC = ({ code, lang, ...props }): JSX.Element => {
18 | const { i18n } = useTranslation();
19 |
20 | const isCurrent = i18n.language === code;
21 | const classes = classNames("settings-language-item", {
22 | "settings-language-item-current": isCurrent
23 | });
24 |
25 | function changeLanguage() {
26 | i18n.changeLanguage(code);
27 | }
28 |
29 | return
30 | {/* Flag of language country */}
31 | ;
47 | };
48 |
49 | export function getLanguageItems(): JSX.Element[] {
50 | const languages = getLanguages();
51 | if (!languages) return [];
52 |
53 | const entries = Object.entries(languages);
54 | entries.sort((a, b) => a[1].name.localeCompare(b[1].name));
55 |
56 | return entries
57 | .map(([code, lang]) => (
58 | t("settings.translations.tableUntranslatedKeys")}
21 | size="small"
22 |
23 | dataSource={lang.missingKeys}
24 | rowKey="k"
25 |
26 | columns={[
27 | {
28 | title: t("settings.translations.columnKey"),
29 | dataIndex: "k",
30 | key: "k",
31 | render: k =>
53 |
54 | 
55 | {t("app.name")}
56 | v{major}.{minor}.{patch}
57 | {tag}
58 |
59 |
;
60 | }
61 |
--------------------------------------------------------------------------------
/src/layout/nav/ConnectionIndicator.less:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | @import (reference) "../../App.less";
5 |
6 | .connection-indicator {
7 | vertical-align: middle;
8 | line-height: @layout-header-height;
9 |
10 | &::after {
11 | content: " ";
12 | display: inline-block;
13 |
14 | width: 12px;
15 | height: 12px;
16 | border-radius: 50%;
17 |
18 | background-color: @kw-green;
19 | box-shadow: 0 0 0 3px rgba(@kw-green, 0.3);
20 | }
21 |
22 | &.connection-connecting::after {
23 | background-color: @kw-secondary;
24 | box-shadow: 0 0 0 3px rgba(@kw-secondary, 0.3);
25 | }
26 |
27 | &.connection-disconnected::after {
28 | background-color: @kw-red;
29 | box-shadow: 0 0 0 3px rgba(@kw-red, 0.3);
30 | }
31 | }
32 |
33 | .site-header-element.connection-indicator-el {
34 | // Hide the connection indicator entirely on very small screens
35 | @media (max-width: 350px) {
36 | display: none !important;
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/layout/nav/ConnectionIndicator.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { Tooltip } from "antd";
5 |
6 | import { useSelector } from "react-redux";
7 | import { RootState } from "@store";
8 | import { useTranslation } from "react-i18next";
9 |
10 | import { WSConnectionState } from "@api/types";
11 |
12 | import "./ConnectionIndicator.less";
13 |
14 | const CONN_STATE_TOOLTIPS: Record
55 | {t("app.name")}
56 | v{major}.{minor}.{patch}
57 | {tag}
58 |
25 |
26 |
27 |
28 |
;
29 | }
30 |
--------------------------------------------------------------------------------
/src/layout/sidebar/SidebarFooter.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { useTranslation, Trans } from "react-i18next";
5 |
6 | import { getAuthorInfo, useHostInfo } from "@utils";
7 |
8 | import { ConditionalLink } from "@comp/ConditionalLink";
9 |
10 | declare const __GIT_VERSION__: string;
11 | declare const __PKGBUILD__: string;
12 |
13 | export function SidebarFooter(): JSX.Element {
14 | const { t } = useTranslation();
15 |
16 | const { authorName, authorURL, gitURL } = getAuthorInfo();
17 | const host = useHostInfo();
18 |
19 | // Replaced by webpack DefinePlugin and git-revision-webpack-plugin
20 | const gitVersion: string = __GIT_VERSION__;
21 | const pkgbuild = __PKGBUILD__;
22 |
23 | return (
24 |
25 |
26 | Made by {{authorName}}
27 |
28 | { host &&
29 |
30 | Hosted by {{ host: host.host.name }}
31 |
32 | }
33 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/src/layout/sidebar/SidebarTotalBalance.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { useTranslation } from "react-i18next";
5 |
6 | import { useWallets } from "@wallets";
7 | import { KristValue } from "@comp/krist/KristValue";
8 |
9 | export function SidebarTotalBalance(): JSX.Element {
10 | const { t } = useTranslation();
11 |
12 | const { wallets } = useWallets();
13 | const balance = Object.values(wallets)
14 | .filter(w => w.balance !== undefined)
15 | .reduce((acc, w) => acc + w.balance!, 0);
16 |
17 | return (
18 |
34 | {t("sidebar.github")}
35 | –
36 |
37 | {t("sidebar.whatsNew")}
38 |
39 | –
40 |
41 | {t("sidebar.credits")}
42 |
43 |
44 |
45 | {/* Git describe version */}
46 |
47 | {gitVersion}-{pkgbuild}
48 |
49 |
19 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/src/pages/NotFoundPage.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { Button } from "antd";
5 | import { FrownOutlined } from "@ant-design/icons";
6 |
7 | import { useHistory } from "react-router-dom";
8 | import { useTFns } from "@utils/i18n";
9 |
10 | import { SmallResult } from "@comp/results/SmallResult";
11 |
12 | interface Props {
13 | nyi?: boolean;
14 | }
15 |
16 | export function NotFoundPage({ nyi }: Props): JSX.Element {
17 | const { tStr } = useTFns("pageNotFound.");
18 | const history = useHistory();
19 |
20 | return {t("sidebar.totalBalance")}
20 |
30 | {/* Display 'purchased' if this is the original owner, otherwise display
31 | * 'received'. */}
32 | {!transferred
33 | ? Purchased {nameEl}
34 | : Received {nameEl} }
35 |
36 |
37 | {/* Purchase time */}
38 |
39 |
46 |
47 | Importing {{ count: total }} items...
48 |
49 |
50 |
51 | {/* Progress bar */}
52 |
56 | ;
57 |
58 | return { progressBar, onProgress, initProgress, resetProgress };
59 | }
60 |
--------------------------------------------------------------------------------
/src/pages/backup/backupExport.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { store } from "@app";
5 | import { encode } from "js-base64";
6 |
7 | declare const __GIT_VERSION__: string;
8 | declare const __PKGBUILD__: string;
9 |
10 | export async function backupExport(): Promise
30 | {/* Label, if possible */}
31 | {contact.label &&
32 | {contact.label}
33 | }
34 |
35 | {/* Address */}
36 |
47 | ), [contact.address, contact.label]);
48 |
49 | return
37 | {/* Address */}
38 |
46 |
42 |
43 | Editing {{ count: submitTotal }} names...
44 |
45 |
46 |
47 | {/* Progress bar */}
48 |
52 | ;
53 |
54 | return { progressBar, onProgress, initProgress, resetProgress };
55 | }
56 |
--------------------------------------------------------------------------------
/src/pages/names/mgmt/NameDataInput.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { Form, Input } from "antd";
5 |
6 | import { useTranslation } from "react-i18next";
7 |
8 | const A_RECORD_REGEXP = /^[^\s.?#].[^\s]*/;
9 |
10 | export function NameDataInput(): JSX.Element {
11 | const { t } = useTranslation();
12 |
13 | return onChange(!settingValue)}
35 | >
36 |
;
48 | }
49 |
--------------------------------------------------------------------------------
/src/pages/settings/SettingDescription.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 |
5 | import { useTranslation } from "react-i18next";
6 |
7 | interface Props {
8 | description?: string;
9 | descriptionKey?: string;
10 | }
11 |
12 | export function SettingDescription({ description, descriptionKey }: Props): JSX.Element | null {
13 | const { t } = useTranslation();
14 |
15 | if (!description && !descriptionKey) return null;
16 |
17 | return (
18 |
19 | {descriptionKey ? t(descriptionKey) : description}
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/pages/settings/SettingInteger.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { useState } from "react";
5 | import { Input, InputNumber, Button } from "antd";
6 |
7 | import { useTranslation } from "react-i18next";
8 |
9 | import { SettingName, setIntegerSetting, useIntegerSetting, validateIntegerSetting } from "@utils/settings";
10 | import { SettingDescription } from "./SettingDescription";
11 |
12 | interface Props {
13 | setting: SettingName
41 |
42 | {/* Number input */}
43 |
58 |
59 | {titleKey ? t(titleKey) : title}
60 |
61 |
;
63 | }
64 |
--------------------------------------------------------------------------------
/src/pages/settings/SettingLink.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2020-2021 Drew Lemmy
2 | // This file is part of KristWeb 2 under AGPL-3.0.
3 | // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
4 | import { Menu } from "antd";
5 | import { LinkOutlined } from "@ant-design/icons";
6 |
7 | import { HashLink } from "react-router-hash-link";
8 |
9 | import { useTranslation } from "react-i18next";
10 |
11 | import { SettingDescription } from "./SettingDescription";
12 |
13 | interface Props {
14 | link: string;
15 | title?: string;
16 | titleKey?: string;
17 | description?: string;
18 | descriptionKey?: string;
19 | }
20 |
21 | export function SettingLink({
22 | link,
23 | title, titleKey,
24 | description, descriptionKey,
25 | ...props
26 | }: Props): JSX.Element {
27 | const { t } = useTranslation();
28 |
29 | return
32 |
35 |