Merge branch 'dev' into feat/improve-transaction-history

iotaledger · Jan 22, 2024 · b56be37 · b56be37
2 parents 95265ed + f26ceb1
commit b56be37
Show file tree

Hide file tree

Showing 28 changed files with 154 additions and 173 deletions.
diff --git a/client/src/app/App.tsx b/client/src/app/App.tsx
@@ -45,7 +45,8 @@ const App: React.FC<RouteComponentProps<AppRouteProps>> = ({
     }, [networksLoaded]);
 
     const networkConfig = networks.find((n) => n.network === network);
-    const identityResolverEnabled = networkConfig?.identityResolverEnabled ?? true;
+    const protocolVersion = networkConfig?.protocolVersion ?? STARDUST;
+    const identityResolverEnabled = protocolVersion !== STARDUST && (networkConfig?.identityResolverEnabled ?? true);
     const currentNetworkName = networkConfig?.network;
     const isShimmer = isShimmerUiTheme(networkConfig?.uiTheme);
     const nodeService = ServiceFactory.get<NodeInfoService>("node-info");

diff --git a/client/src/app/AppUtils.tsx b/client/src/app/AppUtils.tsx
@@ -28,9 +28,7 @@ export const getPages = (currentNetwork: INetwork | undefined, networks: INetwor
     const pages = [];
     if (networks.length > 0 && currentNetwork !== undefined) {
         pages.push({ label: "Explorer", url: `/${currentNetwork.network}/` });
-        if (currentNetwork.network !== CHRYSALIS_MAINNET) {
-            pages.push({ label: "Visualizer", url: `/${currentNetwork.network}/visualizer/` });
-        }
+        pages.push({ label: "Visualizer", url: `/${currentNetwork.network}/visualizer/` });
 
         if (currentNetwork.hasStatisticsSupport) {
             pages.push({ label: "Statistics", url: `/${currentNetwork.network}/statistics/` });
@@ -42,7 +40,7 @@ export const getPages = (currentNetwork: INetwork | undefined, networks: INetwor
 
 export const buildUtilities = (currentNetwork: string, networks: INetwork[], identityResolverEnabled: boolean) => {
     const utilities = [];
-    if (networks.length > 0 && currentNetwork !== CHRYSALIS_MAINNET) {
+    if (networks.length > 0) {
         utilities.push({ label: "Streams v0", url: `/${currentNetwork}/streams/0/` });
         if (identityResolverEnabled) {
             utilities.push({ label: "Decentralized Identifier", url: `/${currentNetwork}/identity-resolver/` });
@@ -63,13 +61,11 @@ export const getFooterItems = (currentNetwork: string, networks: INetwork[], ide
     if (networks.length > 0) {
         let footerArray = networks.filter((network) => network.isEnabled).map((n) => ({ label: n.label, url: n.network.toString() }));
 
-        if (currentNetwork !== CHRYSALIS_MAINNET) {
-            footerArray = footerArray
-                .concat({ label: "Streams v0", url: `${currentNetwork}/streams/0/` })
-                .concat({ label: "Visualizer", url: `${currentNetwork}/visualizer/` });
-        }
+        footerArray = footerArray
+            .concat({ label: "Streams v0", url: `${currentNetwork}/streams/0/` })
+            .concat({ label: "Visualizer", url: `${currentNetwork}/visualizer/` });
 
-        if (identityResolverEnabled && currentNetwork !== CHRYSALIS_MAINNET) {
+        if (identityResolverEnabled) {
             footerArray.push({ label: "Identity Resolver", url: `${currentNetwork}/identity-resolver/` });
         }
 

diff --git a/client/src/app/components/JsonViewer.scss b/client/src/app/components/JsonViewer.scss
@@ -6,6 +6,13 @@
     font-family: "Courier New", Courier, monospace;
     white-space: pre-wrap;
 
+    @include font-size(12px, 20px);
+
+    color: var(--did-color);
+    font-family: $ibm-plex-mono;
+    letter-spacing: 0.02em;
+    white-space: pre-wrap;
+
     .string {
         color: green;
     }

diff --git a/...ts/identity/IdentityStardustResolver.scss → .../app/components/identity/DIDResolver.scss b/...ts/identity/IdentityStardustResolver.scss → .../app/components/identity/DIDResolver.scss
diff --git a/...nts/identity/IdentityStardustResolver.tsx → ...c/app/components/identity/DIDResolver.tsx b/...nts/identity/IdentityStardustResolver.tsx → ...c/app/components/identity/DIDResolver.tsx
@@ -7,17 +7,17 @@ import {
     LinkedDomainService,
 } from "@iota/identity-wasm/web";
 import React, { Fragment, useEffect, useState } from "react";
-import IdentityDomainResolver from "./domains/IdentityDomainResolver";
-import { IdentityStardustResolverProps } from "./IdentityStardustResolverProps";
+import DIDDomainResolver from "./domains/DIDDomainResolver";
+import { DIDResolverProps } from "./DIDResolverProps";
 import { ServiceFactory } from "~factories/serviceFactory";
 import { IdentityService } from "~services/identityService";
-import "./IdentityStardustResolver.scss";
+import "./DIDResolver.scss";
 import CopyButton from "../CopyButton";
 import JsonViewer from "../JsonViewer";
 import Spinner from "../Spinner";
-import { IIdentityStardustResolveResponse } from "~/models/api/IIdentityStardustResolveResponse";
+import { IDIDResolverResponse } from "~/models/api/IDIDResolverResponse";
 
-const IdentityStardustResolver: React.FC<IdentityStardustResolverProps> = ({ resolvedDID, network }) => {
+const IdentityStardustResolver: React.FC<DIDResolverProps> = ({ resolvedDID, network }) => {
     const [DID, setDID] = useState<string>("");
     const [governorAddress, setGovernorAddress] = useState<string>("");
     const [stateControllerAddress, setStateControllerAddress] = useState<string>("");
@@ -86,7 +86,7 @@ const IdentityStardustResolver: React.FC<IdentityStardustResolverProps> = ({ res
 
                     <div className="margin-b-s">
                         <div className="label">Linked Domains</div>
-                        <IdentityDomainResolver verifiedDomains={verifiedDomains} />
+                        <DIDDomainResolver verifiedDomains={verifiedDomains} />
                     </div>
                 </Fragment>
             )}
@@ -146,7 +146,7 @@ const IdentityStardustResolver: React.FC<IdentityStardustResolverProps> = ({ res
 // }
 export default IdentityStardustResolver;
 
-async function constructVerifiedDomains(resolvedDID: IIdentityStardustResolveResponse): Promise<Map<string, Promise<void>>> {
+async function constructVerifiedDomains(resolvedDID: IDIDResolverResponse): Promise<Map<string, Promise<void>>> {
     const newVerifiedDomains = new Map<string, Promise<void>>();
 
     await ServiceFactory.get<IdentityService>("identity").initLibrary();

diff --git a/client/src/app/components/identity/DIDResolverProps.ts b/client/src/app/components/identity/DIDResolverProps.ts
@@ -0,0 +1,7 @@
+import { IDIDResolverResponse } from "~/models/api/IDIDResolverResponse";
+
+export interface DIDResolverProps {
+    resolvedDID: IDIDResolverResponse | null;
+
+    network: string;
+}
diff --git a/client/src/app/components/identity/IdentitySearchInput.tsx b/client/src/app/components/identity/IdentitySearchInput.tsx
@@ -79,21 +79,6 @@ class SearchInput extends AsyncComponent<IdentitySearchInputProps, IdentitySearc
     private doSearch(): void {
         this.props.onSearch(this.state.did);
     }
-
-    private didContainsWrongNetwork(did: string, network: string): boolean {
-        const colonCountInDid = did.split(":").length - 1;
-
-        if (colonCountInDid !== 3) {
-            return false;
-        }
-
-        const networkNameInDid = did.split(":")[2];
-
-        if (networkNameInDid !== network) {
-            return true;
-        }
-        return false;
-    }
 }
 
 export default SearchInput;
diff --git a/client/src/app/components/identity/IdentityStardustResolverProps.ts b/client/src/app/components/identity/IdentityStardustResolverProps.ts
diff --git a/...ntity/domains/IdentityDomainResolver.scss → ...s/identity/domains/DIDDomainResolver.scss b/...ntity/domains/IdentityDomainResolver.scss → ...s/identity/domains/DIDDomainResolver.scss
diff --git a/...entity/domains/IdentityDomainResolver.tsx → ...ts/identity/domains/DIDDomainResolver.tsx b/...entity/domains/IdentityDomainResolver.tsx → ...ts/identity/domains/DIDDomainResolver.tsx
@@ -1,14 +1,14 @@
 import React, { ReactNode } from "react";
 import { IoAlertCircle, IoCheckmarkCircle } from "react-icons/io5";
-import { IdentityDomainResolverProps } from "./IdentityDomainResolverProps";
-import { IdentityDomainResolverState, Status } from "./IdentityDomainResolverState";
+import { DIDDomainResolverProps } from "./DIDDomainResolverProps";
+import { DIDDomainResolverState, Status } from "./DIDDomainResolverState";
 import AsyncComponent from "../../AsyncComponent";
-import "./IdentityDomainResolver.scss";
+import "./DIDDomainResolver.scss";
 import Spinner from "../../Spinner";
 import Tooltip from "../../Tooltip";
 
-class IdentityDomainResolver extends AsyncComponent<IdentityDomainResolverProps, IdentityDomainResolverState> {
-    constructor(props: IdentityDomainResolverProps) {
+class DIDDomainResolver extends AsyncComponent<DIDDomainResolverProps, DIDDomainResolverState> {
+    constructor(props: DIDDomainResolverProps) {
         super(props);
         this.state = {
             verifiedDomainsPresentation: new Map(),
@@ -20,7 +20,7 @@ class IdentityDomainResolver extends AsyncComponent<IdentityDomainResolverProps,
         this.computeVerifiedDomainsPresentation(this.props.verifiedDomains);
     }
 
-    public componentDidUpdate(prevProps: IdentityDomainResolverProps) {
+    public componentDidUpdate(prevProps: DIDDomainResolverProps) {
         if (prevProps !== this.props) {
             this.computeVerifiedDomainsPresentation(this.props.verifiedDomains);
         }
@@ -59,8 +59,8 @@ class IdentityDomainResolver extends AsyncComponent<IdentityDomainResolverProps,
         );
     }
 
-    private computeVerifiedDomainsPresentation(verifiedDomains: IdentityDomainResolverProps["verifiedDomains"]) {
-        const newVerifiedDomainsPresentation: IdentityDomainResolverState["verifiedDomainsPresentation"] = new Map();
+    private computeVerifiedDomainsPresentation(verifiedDomains: DIDDomainResolverProps["verifiedDomains"]) {
+        const newVerifiedDomainsPresentation: DIDDomainResolverState["verifiedDomainsPresentation"] = new Map();
         if (verifiedDomains) {
             for (const [key, value] of verifiedDomains.entries()) {
                 newVerifiedDomainsPresentation.set(key, { status: Status.InFlight });
@@ -87,4 +87,4 @@ class IdentityDomainResolver extends AsyncComponent<IdentityDomainResolverProps,
         });
     }
 }
-export default IdentityDomainResolver;
+export default DIDDomainResolver;
diff --git a/...ty/domains/IdentityDomainResolverProps.ts → ...dentity/domains/DIDDomainResolverProps.ts b/...ty/domains/IdentityDomainResolverProps.ts → ...dentity/domains/DIDDomainResolverProps.ts
@@ -1,3 +1,3 @@
-export interface IdentityDomainResolverProps {
+export interface DIDDomainResolverProps {
     verifiedDomains?: Map<string, Promise<void>>;
 }
diff --git a/...ty/domains/IdentityDomainResolverState.ts → ...dentity/domains/DIDDomainResolverState.ts b/...ty/domains/IdentityDomainResolverState.ts → ...dentity/domains/DIDDomainResolverState.ts
@@ -4,7 +4,7 @@ export enum Status {
     Error = "ERROR",
 }
 
-export interface IdentityDomainResolverState {
+export interface DIDDomainResolverState {
     verifiedDomainsPresentation: Map<
         string,
         {

diff --git a/client/src/app/components/stardust/address/section/did/DidSection.tsx b/client/src/app/components/stardust/address/section/did/DidSection.tsx
@@ -1,9 +1,9 @@
 import React from "react";
-import IdentityStardustResolver from "../../../../identity/IdentityStardustResolver";
-import { IIdentityStardustResolveResponse } from "~/models/api/IIdentityStardustResolveResponse";
+import IdentityStardustResolver from "../../../../identity/DIDResolver";
+import { IDIDResolverResponse } from "~/models/api/IDIDResolverResponse";
 
 interface DIDSectionProps {
-    resolvedDID: IIdentityStardustResolveResponse | null;
+    resolvedDID: IDIDResolverResponse | null;
     network: string;
 }
 

diff --git a/client/src/app/components/stardust/history/TransactionCard.tsx b/client/src/app/components/stardust/history/TransactionCard.tsx
@@ -1,8 +1,7 @@
 import classNames from "classnames";
 import React from "react";
-import TruncatedId from "../TruncatedId";
-import Tooltip from "~app/components/Tooltip";
 import { ITransactionEntryProps } from "./TransactionEntryProps";
+import TransactionIdView from "./TransactionIdView";
 
 const TransactionCard: React.FC<ITransactionEntryProps> = ({
     isGenesisByDate,
@@ -30,14 +29,11 @@ const TransactionCard: React.FC<ITransactionEntryProps> = ({
             <div className="field">
                 <div className="card--label">Transaction Id</div>
                 <div className="row card--value">
-                    <TruncatedId id={transactionId} link={transactionLink} />
-                    {isTransactionFromStardustGenesis && (
-                        <Tooltip tooltipContent="This link opens the transaction on Chrysalis Mainnet" childrenClass="row middle">
-                            <span className="material-icons" style={{ fontSize: "14px" }}>
-                                warning
-                            </span>
-                        </Tooltip>
-                    )}
+                    <TransactionIdView
+                        transactionId={transactionId}
+                        isTransactionFromStardustGenesis={isTransactionFromStardustGenesis}
+                        transactionLink={transactionLink}
+                    />
                 </div>
             </div>
             <div className="field">

diff --git a/client/src/app/components/stardust/history/TransactionIdView.tsx b/client/src/app/components/stardust/history/TransactionIdView.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { STARDUST_SUPPLY_INCREASE_TRANSACTION_ID } from "~/helpers/stardust/transactionsHelper";
+import TruncatedId from "../TruncatedId";
+import Tooltip from "../../Tooltip";
+
+export interface ITransactionIdProps {
+    transactionId: string;
+    isTransactionFromStardustGenesis: boolean;
+    transactionLink: string;
+}
+
+const TransactionIdView: React.FC<ITransactionIdProps> = ({ transactionId, isTransactionFromStardustGenesis, transactionLink }) => {
+    return (
+        <>
+            {isTransactionFromStardustGenesis && transactionId.includes(STARDUST_SUPPLY_INCREASE_TRANSACTION_ID) ? (
+                <span>Stardust Genesis</span>
+            ) : (
+                <>
+                    <TruncatedId id={transactionId} link={transactionLink} />
+                    {isTransactionFromStardustGenesis && (
+                        <Tooltip tooltipContent="This link opens the transaction on Chrysalis Mainnet" childrenClass="row middle">
+                            <span className="material-icons" style={{ fontSize: "14px" }}>
+                                warning
+                            </span>
+                        </Tooltip>
+                    )}
+                </>
+            )}
+        </>
+    );
+};
+
+export default TransactionIdView;
diff --git a/client/src/app/components/stardust/history/TransactionRow.tsx b/client/src/app/components/stardust/history/TransactionRow.tsx
@@ -1,9 +1,7 @@
 import classNames from "classnames";
 import React from "react";
-import { Link } from "react-router-dom";
-import Tooltip from "../../Tooltip";
-import TruncatedId from "../TruncatedId";
 import { ITransactionEntryProps } from "./TransactionEntryProps";
+import TransactionIdView from "./TransactionIdView";
 
 const TransactionRow: React.FC<ITransactionEntryProps> = ({
     isGenesisByDate,
@@ -26,16 +24,13 @@ const TransactionRow: React.FC<ITransactionEntryProps> = ({
         <tr>
             {isGenesisByDate ? <td className="date">Genesis</td> : <td className="date">{dateFormatted}</td>}
             <td className="transaction-id">
-                <Link to={transactionLink} className="row center margin-r-t">
-                    <TruncatedId id={transactionId} />
-                    {isTransactionFromStardustGenesis && (
-                        <Tooltip tooltipContent="This link opens the transaction on Chrysalis Mainnet" childrenClass="row middle">
-                            <span className="material-icons" style={{ fontSize: "14px" }}>
-                                warning
-                            </span>
-                        </Tooltip>
-                    )}
-                </Link>
+                <div className="row center">
+                    <TransactionIdView
+                        transactionId={transactionId}
+                        isTransactionFromStardustGenesis={isTransactionFromStardustGenesis}
+                        transactionLink={transactionLink}
+                    />
+                </div>
             </td>
             <td className={classNames("amount", { negative: isSpent })}>{valueView}</td>
         </tr>

diff --git a/client/src/app/components/stardust/history/transactionHistoryUtils.ts b/client/src/app/components/stardust/history/transactionHistoryUtils.ts
@@ -3,7 +3,7 @@ import moment from "moment/moment";
 
 import { DateHelper } from "~helpers/dateHelper";
 import { OutputWithDetails } from "~helpers/hooks/useAddressHistory";
-import { TransactionsHelper } from "~helpers/stardust/transactionsHelper";
+import { STARDUST_SUPPLY_INCREASE_TRANSACTION_ID, TransactionsHelper } from "~helpers/stardust/transactionsHelper";
 import { formatAmount } from "~helpers/stardust/valueFormatHelper";
 import { CHRYSALIS_MAINNET } from "~models/config/networkType";
 
@@ -69,9 +69,7 @@ export const getTransactionHistoryRecords = (
             TransactionsHelper.isTransactionFromIotaStardustGenesis(network, milestoneIndex),
         );
 
-        const transactionLink = isTransactionFromStardustGenesis
-            ? `/${CHRYSALIS_MAINNET}/search/${transactionId}`
-            : `/${network}/transaction/${transactionId}`;
+        const transactionLink = getTransactionLink(network, transactionId, isTransactionFromStardustGenesis);
 
         const isSpent = balanceChange < 0;
 
@@ -111,3 +109,9 @@ export const calculateBalanceChange = (outputs: OutputWithDetails[]) => {
         return acc + amount;
     }, 0);
 };
+
+export const getTransactionLink = (network: string, transactionId: string, isTransactionFromStardustGenesis: boolean) => {
+    return isTransactionFromStardustGenesis && !transactionId.includes(STARDUST_SUPPLY_INCREASE_TRANSACTION_ID)
+        ? `/${CHRYSALIS_MAINNET}/search/${transactionId}`
+        : `/${network}/transaction/${transactionId}`;
+};
diff --git a/client/src/app/routes.tsx b/client/src/app/routes.tsx
@@ -62,14 +62,21 @@ const buildAppRoutes = (protocolVersion: string, withNetworkContext: (wrappedCom
             key={keys.next().value}
             component={(props: RouteComponentProps<StreamsV0RouteProps>) => <StreamsV0 {...props} />}
         />,
+    ];
+
+    const IdentiyResolverRoute = (
         <Route
             path="/:network/identity-resolver/:did?"
             key={keys.next().value}
             component={(props: RouteComponentProps<IdentityResolverProps>) => (
                 <IdentityResolver {...props} protocolVersion={protocolVersion} />
             )}
-        />,
-    ];
+        />
+    );
+
+    if (protocolVersion !== STARDUST) {
+        commonRoutes.push(IdentiyResolverRoute);
+    }
 
     const legacyRoutes = [
         <Route