diff --git a/src/layout/nav/SearchResults.less b/src/layout/nav/SearchResults.less
new file mode 100644
index 0000000..6af8285
--- /dev/null
+++ b/src/layout/nav/SearchResults.less
@@ -0,0 +1,53 @@
+@import (reference) "../../App.less";
+
+.search-result-loading {
+ display: flex;
+ justify-content: center;
+ padding-top: 6px;
+}
+
+.search-result {
+ display: flex;
+
+ .search-result-type {
+ display: block;
+
+ color: @text-color-secondary;
+ font-size: @font-size-sm;
+ font-weight: bold;
+ text-transform: uppercase;
+ }
+
+ .search-result-value {
+ font-weight: bold;
+ }
+
+ .result-left {
+ flex: 1;
+ }
+
+ .result-right {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-end;
+
+ flex: 0;
+
+ text-align: right;
+
+ .krist-value {
+ font-size: @font-size-lg;
+ }
+
+ .search-name-owner, .search-block-miner {
+ display: block;
+ color: @text-color-secondary;
+ }
+
+ .date-time {
+ color: @text-color-secondary;
+ font-size: 90%;
+ }
+ }
+}
diff --git a/src/layout/nav/SearchResults.tsx b/src/layout/nav/SearchResults.tsx
new file mode 100644
index 0000000..95aae4d
--- /dev/null
+++ b/src/layout/nav/SearchResults.tsx
@@ -0,0 +1,115 @@
+import React, { ReactNode } from "react";
+import { Typography, Spin } from "antd";
+
+import { Trans, useTranslation } from "react-i18next";
+
+import { KristAddress, KristName, KristBlock, KristTransaction } from "../../krist/api/types";
+import { KristValue } from "../../components/KristValue";
+import { KristNameLink } from "../../components/KristNameLink";
+import { DateTime } from "../../components/DateTime";
+
+import "./SearchResults.less";
+
+const { Text } = Typography;
+
+export function Loading(): JSX.Element {
+ return
;
+}
+
+export function NoResults(): JSX.Element {
+ const { t } = useTranslation();
+ return
{t("nav.search.noResults")};
+}
+
+export function RateLimitHit(): JSX.Element {
+ const { t } = useTranslation();
+ return
{t("nav.search.rateLimitHit")};
+}
+
+interface ExactMatchBaseProps {
+ typeKey: string;
+ primaryValue: ReactNode | number;
+ extraInfo?: ReactNode;
+}
+export function ExactMatchBase({ typeKey, primaryValue, extraInfo }: ExactMatchBaseProps): JSX.Element {
+ const { t } = useTranslation();
+
+ return
+
+ {/* Result type (e.g. 'Address', 'Transaction') */}
+
+ {t(typeKey)}
+
+
+ {/* Primary result value (e.g. the address, the ID) */}
+
+ {typeof primaryValue === "number"
+ ? primaryValue.toLocaleString()
+ : primaryValue}
+
+
+
+ {extraInfo &&
+ {extraInfo}
+
}
+
;
+}
+
+export function ExactAddressMatch({ address }: { address: KristAddress }): JSX.Element {
+ return
}
+ />;
+}
+
+export function ExactNameMatch({ name }: { name: KristName }): JSX.Element {
+ const { t } = useTranslation();
+
+ function Owner() {
+ return
{name.owner};
+ }
+
+ return
}
+ extraInfo={
+
+ Owned by
+
+ }
+ />;
+}
+
+export function ExactBlockMatch({ block }: { block: KristBlock }): JSX.Element {
+ const { t } = useTranslation();
+
+ function Miner() {
+ return
{block.address};
+ }
+
+ return
+
+
+ Mined by
+
+
+
+
+ >}
+ />;
+}
+
+export function ExactTransactionMatch({ transaction }: { transaction: KristTransaction }): JSX.Element {
+ return
+
+
+ >}
+ />;
+}
diff --git a/src/pages/dashboard/TransactionItem.tsx b/src/pages/dashboard/TransactionItem.tsx
index bf6a015..2275062 100644
--- a/src/pages/dashboard/TransactionItem.tsx
+++ b/src/pages/dashboard/TransactionItem.tsx
@@ -12,7 +12,7 @@
import { KristTransaction } from "../../krist/api/types";
import { Wallet } from "../../krist/wallets/Wallet";
import { KristValue } from "../../components/KristValue";
-import { KristName } from "../../components/KristName";
+import { KristNameLink } from "../../components/KristNameLink";
import { ContextualAddress } from "../../components/ContextualAddress";
type InternalTxType = "transferred" | "sent" | "received" | "mined" |
@@ -106,7 +106,7 @@
{(type === "name_a_record" || type === "name_purchased") && (
Name:
-
+
)}
@@ -156,7 +156,7 @@
)
: tx.type === "name_transfer" && (
// Transaction name
-
+
)}
;