feat: review and update all info boxes (#1435)

* feat: review and update all info boxes Signed-off-by: Eugene Panteleymonchuk <[email protected]> * Fix lint. Signed-off-by: Eugene Panteleymonchuk <[email protected]> * feat: updates after PR review. Signed-off-by: Eugene Panteleymonchuk <[email protected]> * feat: lint update Signed-off-by: Eugene Panteleymonchuk <[email protected]> * feat: update output & search texts Signed-off-by: Eugene Panteleymonchuk <[email protected]> * feat: remove duplicated nft Signed-off-by: Eugene Panteleymonchuk <[email protected]> * feat: switch links Signed-off-by: Eugene Panteleymonchuk <[email protected]> * fix: links and hex * docs: remove unnecessary block metadata info --------- Signed-off-by: Eugene Panteleymonchuk <[email protected]> Co-authored-by: Bran <[email protected]> Co-authored-by: Branko Bosnic <[email protected]> Co-authored-by: Begoña Álvarez de la Cruz <[email protected]>
iotaledger · Apr 26, 2024 · 34451e6 · 34451e6
1 parent e4be147
commit 34451e6
Show file tree

Hide file tree

Showing 20 changed files with 169 additions and 40 deletions.
diff --git a/client/src/app/components/Modal.scss b/client/src/app/components/Modal.scss
@@ -118,6 +118,9 @@
             .modal--actions {
                 margin: 24px 0;
                 pointer-events: auto;
+                display: flex;
+                gap: 8px;
+
                 .modal--action {
                     @include font-size(14px, 21px);
 

diff --git a/client/src/app/components/header/Header.tsx b/client/src/app/components/header/Header.tsx
@@ -7,10 +7,11 @@ import { IDropdownRoute, IRoute } from "~/app/lib/interfaces";
 import mainChrysalisMessage from "~assets/modals/chrysalis/search/main-header.json";
 import mainLegacyMessage from "~assets/modals/legacy/search/main-header.json";
 import mainStardustMessage from "~assets/modals/stardust/search/main-header.json";
+import mainNovaMessage from "~assets/modals/nova/search/main-header.json";
 import ShimmerLogo from "~assets/shimmer-logo-header.svg?react";
 import { ServiceFactory } from "~factories/serviceFactory";
 import { isMarketedNetwork, isShimmerUiTheme } from "~helpers/networkHelper";
-import { CHRYSALIS, LEGACY, ProtocolVersion, STARDUST } from "~models/config/protocolVersion";
+import { CHRYSALIS, LEGACY, NOVA, ProtocolVersion, STARDUST } from "~models/config/protocolVersion";
 import { SettingsService } from "~services/settingsService";
 import FiatSelector from "../FiatSelector";
 import Modal from "../Modal";
@@ -26,6 +27,7 @@ const MODAL_MESSAGE: { [key in ProtocolVersion]?: { title: string; description:
     [LEGACY]: mainLegacyMessage,
     [CHRYSALIS]: mainChrysalisMessage,
     [STARDUST]: mainStardustMessage,
+    [NOVA]: mainNovaMessage,
 };
 
 interface IHeader {

diff --git a/client/src/app/components/nova/address/AddressNotFoundPage.tsx b/client/src/app/components/nova/address/AddressNotFoundPage.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import addressMainHeaderInfo from "~assets/modals/stardust/address/main-header.json";
+import addressMainHeaderInfo from "~assets/modals/nova/address/main-header.json";
 import Modal from "../../Modal";
 import NotFound from "../../NotFound";
 

diff --git a/client/src/app/components/nova/address/section/AddressPageTabbedSections.tsx b/client/src/app/components/nova/address/section/AddressPageTabbedSections.tsx
@@ -1,16 +1,16 @@
 import React, { useState } from "react";
-import associatedOuputsMessage from "~assets/modals/stardust/address/associated-outputs.json";
-import foundriesMessage from "~assets/modals/stardust/alias/foundries.json";
-import stateMessage from "~assets/modals/stardust/alias/state.json";
+import associatedOuputsMessage from "~assets/modals/nova/address/associated-outputs.json";
+import foundriesMessage from "~assets/modals/nova/output/foundries.json";
+import anchorOutputMessage from "~assets/modals/nova/output/anchor.json";
 import bicMessage from "~assets/modals/nova/account/bic.json";
 import validatorMessage from "~assets/modals/nova/account/validator.json";
 import delegationMessage from "~assets/modals/nova/delegation.json";
-import nftMetadataMessage from "~assets/modals/stardust/nft/metadata.json";
-import addressNftsMessage from "~assets/modals/stardust/address/nfts-in-wallet.json";
+import nftMetadataMessage from "~assets/modals/nova/nft/metadata.json";
+import nftOutputMessage from "~assets/modals/nova/nft/nft-output.json";
 import TabbedSection from "../../../hoc/TabbedSection";
 import AssociatedOutputs from "./association/AssociatedOutputs";
-import nativeTokensMessage from "~assets/modals/stardust/address/assets-in-wallet.json";
-import transactionHistoryMessage from "~assets/modals/stardust/address/transaction-history.json";
+import nativeTokensMessage from "~assets/modals/nova/address/native-token.json";
+import transactionHistoryMessage from "~assets/modals/nova/address/transaction-history.json";
 import { IAccountAddressState } from "~/helpers/nova/hooks/useAccountAddressState";
 import { INftAddressState } from "~/helpers/nova/hooks/useNftAddressState";
 import { IAnchorAddressState } from "~/helpers/nova/hooks/useAnchorAddressState";
@@ -84,7 +84,7 @@ const buildDefaultTabsOptions = (
         hidden: nftsCount === 0,
         counter: nftsCount,
         isLoading: isNftOutputsLoading,
-        infoContent: addressNftsMessage,
+        infoContent: nftOutputMessage,
     },
     [DEFAULT_TABS.Delegation]: {
         disabled: delegationCount === 0,
@@ -129,7 +129,7 @@ const buildAnchorAddressTabsOptions = (isAnchorStateTabDisabled: boolean, isAnch
         disabled: isAnchorStateTabDisabled,
         hidden: isAnchorStateTabDisabled,
         isLoading: isAnchorDetailsLoading,
-        infoContent: stateMessage,
+        infoContent: anchorOutputMessage,
     },
 });
 

diff --git a/client/src/app/components/nova/block/payload/SignedTransactionPayload.tsx b/client/src/app/components/nova/block/payload/SignedTransactionPayload.tsx
@@ -5,7 +5,7 @@ import Input from "~/app/components/nova/Input";
 import OutputView from "~/app/components/nova/OutputView";
 import Unlocks from "~/app/components/nova/Unlocks";
 import { IInput } from "~/models/api/nova/IInput";
-import transactionPayloadMessage from "~assets/modals/stardust/block/transaction-payload.json";
+import transactionPayloadMessage from "~assets/modals/nova/block/transaction-payload.json";
 import { useNetworkInfoNova } from "~helpers/nova/networkInfo";
 import { getInputsPreExpandedConfig, getOutputsPreExpandedConfig } from "~helpers/nova/preExpandedConfig";
 import { IPreExpandedConfig } from "~models/components";

diff --git a/client/src/app/routes/nova/FoundryPage.tsx b/client/src/app/routes/nova/FoundryPage.tsx
@@ -8,8 +8,8 @@ import {
 } from "@iota/sdk-wasm-nova/web";
 import React, { useEffect, useState } from "react";
 import { RouteComponentProps } from "react-router";
-import nativeTokensMessage from "~assets/modals/stardust/address/assets-in-wallet.json";
-import foundryMainHeaderInfo from "~assets/modals/stardust/foundry/main-header.json";
+import nativeTokensMessage from "~assets/modals/nova/address/native-token.json";
+import foundryMainHeaderInfo from "~assets/modals/nova/output/foundries.json";
 import tokenSchemeIRC30 from "~assets/schemas/token-schema-IRC30.json";
 import { useFoundryDetails } from "~helpers/nova/hooks/useFoundryDetails";
 import { useIsMounted } from "~helpers/hooks/useIsMounted";

diff --git a/client/src/app/routes/nova/OutputPage.tsx b/client/src/app/routes/nova/OutputPage.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import mainMessage from "~assets/modals/stardust/output/main-header.json";
+import mainMessage from "~assets/modals/nova/output/main-header.json";
 import { Link, RouteComponentProps } from "react-router-dom";
 import Modal from "~/app/components/Modal";
 import NotFound from "~/app/components/NotFound";

diff --git a/client/src/app/routes/nova/TransactionPage.tsx b/client/src/app/routes/nova/TransactionPage.tsx
@@ -2,8 +2,7 @@
 import { AccountAddress, BasicBlockBody, SignedTransactionPayload, Utils } from "@iota/sdk-wasm-nova/web";
 import React, { useEffect, useState } from "react";
 import { RouteComponentProps } from "react-router-dom";
-import metadataInfoMessage from "~assets/modals/stardust/block/metadata.json";
-import transactionPayloadMessage from "~assets/modals/stardust/transaction/main-header.json";
+import transactionPayloadMessage from "~assets/modals/nova/block/transaction-payload.json";
 import { useBlockMetadata } from "~helpers/nova/hooks/useBlockMetadata";
 import { useInputsAndOutputs } from "~helpers/nova/hooks/useInputsAndOutputs";
 import { useTransactionIncludedBlock } from "~helpers/nova/hooks/useTransactionIncludedBlock";
@@ -154,9 +153,7 @@ const TransactionPage: React.FC<RouteComponentProps<TransactionPageProps>> = ({
                         isLoading: isInputsAndOutputsLoading,
                         infoContent: transactionPayloadMessage,
                     },
-                    [TRANSACTION_PAGE_TABS.Metadata]: {
-                        infoContent: metadataInfoMessage,
-                    },
+                    [TRANSACTION_PAGE_TABS.Metadata]: {},
                 }}
             >
                 {tabbedSections}

diff --git a/client/src/assets/modals/nova/address/associated-outputs.json b/client/src/assets/modals/nova/address/associated-outputs.json
@@ -0,0 +1,4 @@
+{
+    "title": "Associated Outputs",
+    "description": "<p>All outputs that have unlock conditions or features which refer to this address.</p>"
+}
diff --git a/client/src/assets/modals/nova/address/main-header.json b/client/src/assets/modals/nova/address/main-header.json
@@ -0,0 +1,11 @@
+{
+    "title": "Address",
+    "description": "<p>Addresses are similar to a personal account, something viewable and sendable to people you want to do business with. This personal account belongs to a seed. In the world of cryptography, a seed refers to a 'private key'. Simply put, you have the seed (your private key) keeping your address (your account) safe.</p>",
+    "links": [
+        {
+            "label": "Read more",
+            "href": "https://wiki.iota.org/learn/smart-contracts/accounts-addresses-and-fees/",
+            "isExternal": true
+        }
+    ]
+}
diff --git a/client/src/assets/modals/nova/address/native-token.json b/client/src/assets/modals/nova/address/native-token.json
@@ -0,0 +1,16 @@
+{
+    "title": "Native Tokens",
+    "description": "<p>Native Tokens is a custom, user-defined tokens. Fungible tokens, called native tokens, are minted and melted in token foundries. You can think of them as of a custom currency. The list of Native Tokens in Basic, Alias, NFT and Foundry Outputs is replaced by a Native Token Feature that holds a single Native Token which can only be present in Basic and Foundry Outputs.</p>",
+    "links": [
+        {
+            "label": "Read more",
+            "href": "https://wiki.iota.org/learn/protocols/stardust/core-concepts/multi-asset-ledger/#native-tokens",
+            "isExternal": true
+        },
+        {
+            "label": "Native Token",
+            "href": "https://github.com/iotaledger/tips/blob/tip38/tips/TIP-0038/tip-0038.md",
+            "isExternal": true
+        }
+    ]
+}
diff --git a/client/src/assets/modals/nova/address/transaction-history.json b/client/src/assets/modals/nova/address/transaction-history.json
@@ -0,0 +1,11 @@
+{
+    "title": "Transaction History",
+    "description": "<p>The history of all transactions for this address. It displays all blocks that consume or create outputs targeting this address.</p>",
+    "links": [
+        {
+            "label": "Read more",
+            "href": "https://wiki.iota.org/learn/protocols/iota2.0/core-concepts/data-structures/#transactions",
+            "isExternal": true
+        }
+    ]
+}
diff --git a/client/src/assets/modals/nova/block/transaction-payload.json b/client/src/assets/modals/nova/block/transaction-payload.json
@@ -0,0 +1,16 @@
+{
+    "title": "Transaction Payload",
+    "description": "<p>This block is a transaction: the outputs on the left got consumed to create outputs on the right. You can find the owners of the new outputs in their address unlock conditions.</p>",
+    "links": [
+        {
+            "label": "Read more",
+            "href": "https://wiki.iota.org/shimmer/introduction/explanations/ledger/simple_transfers",
+            "isExternal": true
+        },
+        {
+            "label": "IOTA 2.0 Transaction Payload",
+            "href": "https://github.com/iotaledger/tips/blob/tip45/tips/TIP-0045/tip-0045.md",
+            "isExternal": true
+        }
+    ]
+}
diff --git a/client/src/assets/modals/nova/nft/metadata.json b/client/src/assets/modals/nova/nft/metadata.json
@@ -0,0 +1,16 @@
+{
+    "title": "Metadata",
+    "description": "<p>IRC27 is a series of standards to support interoperable and universal NFT systems throughout the IOTA ecosystem, to provide a more robust and secure system for creators and buyers.</p>",
+    "links": [
+        {
+            "label": "Read more",
+            "href": "https://github.com/iotaledger/tips/blob/main/tips/TIP-0027/tip-0027.md",
+            "isExternal": true
+        },
+        {
+            "label": "Nft Output",
+            "href": "https://github.com/iotaledger/tips/blob/tip43/tips/TIP-0043/tip-0043.md#nft-output",
+            "isExternal": true
+        }
+    ]
+}
diff --git a/client/src/assets/modals/nova/nft/nft-output.json b/client/src/assets/modals/nova/nft/nft-output.json
@@ -0,0 +1,16 @@
+{
+    "title": "Non-fungible Tokens (NFTs)",
+    "description": "<p>Non-fungible tokens, so-called NFTs, are different from native tokens because each token must be unique and must have some immutable data attached to them.</p>",
+    "links": [
+        {
+            "label": "Read more",
+            "href": "https://wiki.iota.org/learn/protocols/stardust/core-concepts/multi-asset-ledger/#non-fungible-tokens-nfts",
+            "isExternal": true
+        },
+        {
+            "label": "NFT Output",
+            "href": "https://github.com/iotaledger/tips/blob/tip43/tips/TIP-0043/tip-0043.md",
+            "isExternal": true
+        }
+    ]
+}
diff --git a/client/src/assets/modals/nova/output/anchor.json b/client/src/assets/modals/nova/output/anchor.json
@@ -0,0 +1,11 @@
+{
+    "title": "An Anchor Output",
+    "description": "<p>An Anchor Output represents an output in the ledger with two control levels and a permanent Anchor Address. The anchor owns other outputs that are locked under Anchor Address. The anchor keeps track of state transitions (State Index counter) and can be used to anchor layer 2 state as metadata into the UTXO ledger. The Anchor ID, the unique identifier, is generated deterministically by the protocol and is not allowed to change in any future state transitions.</p>",
+    "links": [
+        {
+            "label": "Read more",
+            "href": "https://github.com/iotaledger/tips/blob/tip54/tips/TIP-0054/tip-0054.md",
+            "isExternal": true
+        }
+    ]
+}
diff --git a/client/src/assets/modals/nova/output/foundries.json b/client/src/assets/modals/nova/output/foundries.json
@@ -0,0 +1,11 @@
+{
+    "title": "Foundries",
+    "description": "<p>A foundry output is an output that controls the supply of user defined native tokens. It can mint and melt tokens according to the policy defined in the Token Scheme field of the output. Foundries can only be created and controlled by accounts.</p>",
+    "links": [
+        {
+            "label": "Read more",
+            "href": "https://github.com/iotaledger/tips/blob/tip44/tips/TIP-0044/tip-0044.md#foundry-output",
+            "isExternal": true
+        }
+    ]
+}
diff --git a/client/src/assets/modals/nova/output/main-header.json b/client/src/assets/modals/nova/output/main-header.json
@@ -0,0 +1,11 @@
+{
+    "title": "Output",
+    "description": "<p>Unspent outputs define the owner of the tokens, the kind of tokens and their amount, as well as conditions by which you can unlock them.</p>",
+    "links": [
+        {
+            "label": "Read more",
+            "href": "https://wiki.iota.org/introduction/stardust/explanations/what_is_stardust/rethink_utxo",
+            "isExternal": true
+        }
+    ]
+}
diff --git a/client/src/assets/modals/nova/search/main-header.json b/client/src/assets/modals/nova/search/main-header.json
@@ -0,0 +1,4 @@
+{
+    "title": "Search Criteria",
+    "description": "<p>All hex searches work with and without 0x prefix.<br />The following formats are supported:</p><ol><li><b>Blocks</b> 74 Hex characters</li><li><b>Block using Transaction Id</b> 74 Hex characters</li><li><b>Account Id</b> 66 Hex characters</li><li><b>Nft Id</b> 66 Hex characters</li><li><b>Anchor Id</b> 66 Hex characters</li><li><b>Delegation Id</b> 66 Hex characters</li><li><b>Foundry Id</b> 78 Hex characters</li><li><b>Outputs</b> 78 Hex characters</li><li><b>Addresses</b> Bech32 Format</li><li><b>SlotIndex</b> a unique index number</li><li><b>Slot Commitment ID</b> the identifier of the slot this block commits to.</li><li><b>Epoch</b> a unique index number</li><li><b>Token Id</b> 78 Hex characters</li></ol>"
+}