diff --git a/public/locales/en.json b/public/locales/en.json
index 55b3e5e..e453e16 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -575,6 +575,14 @@
"resultUnknown": "See console for details."
},
+ "noWalletsResult": {
+ "title": "No wallets yet",
+ "subTitle": "You currently have no wallets saved in KristWeb, so there is nothing to see here yet. Would you like to add a wallet?",
+ "button": "Add wallets",
+ "buttonNetworkTransactions": "Network transactions",
+ "buttonNetworkNames": "Network names"
+ },
+
"backups": {
"importButton": "Import backup",
"exportButton": "Export backup"
diff --git a/src/components/results/NoWalletsResult.tsx b/src/components/results/NoWalletsResult.tsx
new file mode 100644
index 0000000..e050dcc
--- /dev/null
+++ b/src/components/results/NoWalletsResult.tsx
@@ -0,0 +1,68 @@
+// Copyright (c) 2020-2021 Drew Lemmy
+// This file is part of KristWeb 2 under GPL-3.0.
+// Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
+import React from "react";
+import classNames from "classnames";
+import { Button } from "antd";
+import { InfoCircleOutlined } from "@ant-design/icons";
+
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+
+import { SmallResult } from "./SmallResult";
+
+export type ResultType = "transactions" | "names";
+
+interface Props {
+ type?: ResultType;
+ className?: string;
+}
+
+function OtherButton({ type }: { type?: ResultType }): JSX.Element | null {
+ const { t } = useTranslation();
+
+ if (type === "transactions") {
+ return (
+ // Network transactions
+
+
+
+ );
+ } else if (type === "names") {
+ return (
+ // Network names
+
+
+
+ );
+ } else {
+ return null;
+ }
+}
+
+export function NoWalletsResult({ type, className }: Props): JSX.Element {
+ const { t } = useTranslation();
+
+ const classes = classNames("kw-no-wallets-result", className);
+
+ return }
+
+ title={t("noWalletsResult.title")}
+ subTitle={t("noWalletsResult.subTitle")}
+ extra={<>
+ {/* Other helpful buttons (e.g. 'Network transactions') */}
+ {}
+
+ {/* 'Add wallets' button that links to the 'My wallets' page */}
+
+
+
+ >}
+
+ fullPage
+ />;
+}
diff --git a/src/pages/names/NamesPage.tsx b/src/pages/names/NamesPage.tsx
index d121570..22334d5 100644
--- a/src/pages/names/NamesPage.tsx
+++ b/src/pages/names/NamesPage.tsx
@@ -11,6 +11,7 @@
import { PageLayout } from "../../layout/PageLayout";
import { APIErrorResult } from "@comp/results/APIErrorResult";
+import { NoWalletsResult } from "@comp/results/NoWalletsResult";
import { NamesTable } from "./NamesTable";
import { useWallets } from "@wallets";
@@ -101,6 +102,8 @@
const subTitle = listingType === ListingType.NETWORK_ADDRESS
? address : undefined;
+ const isEmpty = listingType === ListingType.WALLETS && !joinedAddressList;
+
return
- {error
- ? (
- {
+ if (error)
+ return
- )
- : memoTable}
+ />;
+ else if (isEmpty) return ;
+ else return memoTable;
+ })()}
;
}
diff --git a/src/pages/transactions/TransactionsPage.tsx b/src/pages/transactions/TransactionsPage.tsx
index 4df9aab..9ac8421 100644
--- a/src/pages/transactions/TransactionsPage.tsx
+++ b/src/pages/transactions/TransactionsPage.tsx
@@ -14,6 +14,7 @@
import { PageLayout } from "../../layout/PageLayout";
import { APIErrorResult } from "@comp/results/APIErrorResult";
+import { NoWalletsResult } from "@comp/results/NoWalletsResult";
import { TransactionsTable } from "./TransactionsTable";
import { useWallets } from "@wallets";
@@ -227,6 +228,8 @@
const siteTitle = getSiteTitle(t, listingType, address);
const subTitle = getSubTitle(t, listingType, { address, name, query });
+ const isEmpty = listingType === ListingType.WALLETS && !joinedAddressList;
+
return
- {error
- ? (
- {
+ if (error)
+ return
- )
- : <>
+ />;
+ else if (isEmpty) return ;
+ else return <>
{memoTable}
{/* "Include mined transactions" switch in the bottom right */}
@@ -259,6 +262,7 @@
{t("transactions.includeMined")}
)}
- >}
+ >;
+ })()}
;
}