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")} )} - } + ; + })()} ; }