Feat: Add Foundry Page

api/src/utils/nova/searchExecutor.ts

@@ -127,6 +127,21 @@ export class SearchExecutor {
             );
         }
 
+        if (searchQuery.foundryId) {
+            promises.push(
+                this.executeQuery(
+                    this.apiService.foundryDetails(searchQuery.foundryId),
+                    (response) => {
+                        promisesResult = {
+                            foundryId: response.foundryDetails ? searchQuery.foundryId : undefined,
+                            error: response.error || response.message,
+                        };
+                    },
+                    "Foundry details fetch failed",
+                ),
+            );
+        }
+
         await Promise.any(promises).catch((_) => {});
 
         if (promisesResult !== null) {

client/src/app/components/nova/address/FeaturesSection.tsx

@@ -0,0 +1,46 @@
+import { AccountOutput, FoundryOutput, NftOutput } from "@iota/sdk-wasm-nova/web";
+import { optional } from "@ruffy/ts-optional";
+import React from "react";
+import FeatureView from "../FeaturesView";
+
+interface FeaturesSectionProps {
+    /**
+     * The Output
+     */
+    readonly output?: NftOutput | AccountOutput | FoundryOutput;
+}
+
+const FeaturesSection: React.FC<FeaturesSectionProps> = ({ output }) => (
+    <React.Fragment>
+        {optional(output?.features).nonEmpty() && (
+            <div className="section">
+                <div className="section--header row row--tablet-responsive middle space-between">
+                    <div className="row middle">
+                        <h2>Features</h2>
+                    </div>
+                </div>
+                {output?.features?.map((feature, idx) => (
+                    <FeatureView key={idx} feature={feature} isPreExpanded={true} isImmutable={false} />
+                ))}
+            </div>
+        )}
+        {optional(output?.immutableFeatures).nonEmpty() && (
+            <div className="section">
+                <div className="section--header row row--tablet-responsive middle space-between">
+                    <div className="row middle">
+                        <h2>Immutable features</h2>
+                    </div>
+                </div>
+                {output?.immutableFeatures?.map((feature, idx) => (
+                    <FeatureView key={idx} feature={feature} isPreExpanded={true} isImmutable={true} />
+                ))}
+            </div>
+        )}
+    </React.Fragment>
+);
+
+FeaturesSection.defaultProps = {
+    output: undefined,
+};
+
+export default FeaturesSection;

client/src/app/components/nova/foundry/TokenInfoSection.scss

@@ -0,0 +1,36 @@
+@import "../../../../scss/fonts";
+@import "../../../../scss/mixins";
+@import "../../../../scss/media-queries";
+@import "../../../../scss/variables";
+
+.token-info {
+    display: flex;
+    flex-direction: column;
+
+    .token-metadata__logo {
+        width: 32px;
+        height: 32px;
+    }
+    .section .token-metadata .section--data:last-child {
+        margin-bottom: 26px;
+    }
+
+    .token-metadata__symbol {
+        display: flex;
+        align-items: center;
+        height: 24px;
+        margin-right: 8px;
+        padding: 0 8px;
+        border: 0;
+        border-radius: 6px;
+        outline: none;
+        background-color: $gray-light;
+        color: $gray-midnight;
+        font-family: $inter;
+        font-weight: 500;
+        letter-spacing: 0.5px;
+        white-space: nowrap;
+        background-color: var(--light-bg);
+        color: $gray;
+    }
+}

client/src/app/components/nova/foundry/TokenInfoSection.tsx

@@ -0,0 +1,111 @@
+import { SimpleTokenScheme, TokenScheme, TokenSchemeType } from "@iota/sdk-wasm-nova/web";
+import React from "react";
+import { useTokenRegistryNativeTokenCheck } from "~helpers/stardust/hooks/useTokenRegistryNativeTokenCheck";
+import { formatNumberWithCommas } from "~helpers/stardust/valueFormatHelper";
+import { ITokenMetadata } from "~models/api/stardust/foundry/ITokenMetadata";
+import "./TokenInfoSection.scss";
+
+interface TokenInfoSectionProps {
+    /**
+     * The token id.
+     */
+    readonly tokenId: string;
+    /**
+     * The token scheme for the foundry.
+     */
+    readonly tokenScheme: TokenScheme;
+    /**
+     * The IRC standard metadata.
+     */
+    readonly tokenMetadata?: ITokenMetadata | null;
+}
+
+const TokenInfoSection: React.FC<TokenInfoSectionProps> = ({ tokenId, tokenScheme, tokenMetadata }) => {
+    const [isWhitelisted] = useTokenRegistryNativeTokenCheck(tokenId);
+
+    if (tokenScheme.type !== TokenSchemeType.Simple) {
+        return null;
+    }
+
+    const simpleTokenScheme = tokenScheme as SimpleTokenScheme;
+
+    const maximumSupply = formatNumberWithCommas(BigInt(simpleTokenScheme.maximumSupply));
+    const mintedTokens = formatNumberWithCommas(BigInt(simpleTokenScheme.mintedTokens));
+    const meltedTokens = formatNumberWithCommas(BigInt(simpleTokenScheme.meltedTokens));
+
+    return (
+        <div className="token-info">
+            <div className="section no-border-bottom padding-b-0">
+                {tokenMetadata && isWhitelisted && (
+                    <div className="token-metadata">
+                        <div className="section--data">
+                            <div className="label">Name</div>
+                            <div className="value code row middle">
+                                {tokenMetadata.logoUrl && (
+                                    <span className="margin-r-t">
+                                        <img
+                                            className="token-metadata__logo margin-r-5"
+                                            src={tokenMetadata.logoUrl}
+                                            alt={tokenMetadata.name}
+                                        />
+                                    </span>
+                                )}
+                                <span className="margin-r-t">{tokenMetadata.name}</span>
+                                <span className="token-metadata__symbol margin-r-t">{tokenMetadata.symbol}</span>
+                            </div>
+                        </div>
+                        {tokenMetadata.description && (
+                            <div className="section--data">
+                                <div className="label">Description</div>
+                                <div className="value code row middle">
+                                    <span className="margin-r-t">{tokenMetadata.description}</span>
+                                </div>
+                            </div>
+                        )}
+                        {tokenMetadata.logoUrl && (
+                            <div className="section--data">
+                                <div className="label">Resources</div>
+                                <div className="value code row middle">
+                                    <span className="margin-r-t">
+                                        <a href={tokenMetadata.logoUrl} target="_blank" rel="noreferrer" className="rate--value">
+                                            {tokenMetadata.logoUrl}
+                                        </a>
+                                    </span>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                )}
+                <div className="section--data">
+                    <div className="label">Token scheme</div>
+                    <div className="value code row middle">
+                        <span className="margin-r-t">{tokenScheme.type}</span>
+                    </div>
+                </div>
+                <div className="section--data">
+                    <div className="label">Maximum supply</div>
+                    <div className="value code row middle">
+                        <span className="margin-r-t">{maximumSupply}</span>
+                    </div>
+                </div>
+                <div className="section--data">
+                    <div className="label">Minted tokens</div>
+                    <div className="value code row middle">
+                        <span className="margin-r-t">{mintedTokens}</span>
+                    </div>
+                </div>
+                <div className="section--data">
+                    <div className="label">Melted tokens</div>
+                    <div className="value code row middle">
+                        <span className="margin-r-t">{meltedTokens}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+TokenInfoSection.defaultProps = {
+    tokenMetadata: undefined,
+};
+
+export default TokenInfoSection;

client/src/app/components/stardust/foundry/TokenInfoSection.tsx

@@ -1,4 +1,4 @@
-import { SimpleTokenScheme, TokenScheme, TokenSchemeType } from "@iota/sdk-wasm/web";
+import { SimpleTokenScheme, TokenScheme, TokenSchemeType } from "@iota/sdk-wasm-nova/web";
 import React from "react";
 import { useTokenRegistryNativeTokenCheck } from "~helpers/stardust/hooks/useTokenRegistryNativeTokenCheck";
 import { formatNumberWithCommas } from "~helpers/stardust/valueFormatHelper";

client/src/app/routes.tsx

@@ -37,6 +37,7 @@ import StardustOutputPage from "./routes/stardust/OutputPage";
 import NovaBlockPage from "./routes/nova/Block";
 import NovaTransactionPage from "./routes/nova/TransactionPage";
 import NovaOutputPage from "./routes/nova/OutputPage";
+import NovaFoundryPage from "./routes/nova/FoundryPage";
 import NovaSearch from "./routes/nova/Search";
 import NovaSlotPage from "./routes/nova/SlotPage";
 import StardustSearch from "./routes/stardust/Search";
@@ -182,6 +183,7 @@ const buildAppRoutes = (protocolVersion: string, withNetworkContext: (wrappedCom
         <Route path="/:network/search/:query?" key={keys.next().value} component={NovaSearch} />,
         <Route path="/:network/slot/:slotIndex" key={keys.next().value} component={NovaSlotPage} />,
         <Route path="/:network/transaction/:transactionId" key={keys.next().value} component={NovaTransactionPage} />,
+        <Route path="/:network/foundry/:foundryId" key={keys.next().value} component={NovaFoundryPage} />,
     ];
 
     return (

client/src/app/routes/nova/FoundryPage.scss

@@ -0,0 +1,67 @@
+@import "../../../scss/fonts";
+@import "../../../scss/mixins";
+@import "../../../scss/media-queries";
+@import "../../../scss/variables";
+
+.foundry {
+    display: flex;
+    flex-direction: column;
+
+    .wrapper {
+        display: flex;
+        justify-content: center;
+
+        .inner {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            max-width: $desktop-width;
+            margin: 40px 25px;
+
+            @include desktop-down {
+                flex: unset;
+                width: 100%;
+                max-width: 100%;
+                margin: 40px 24px;
+                padding-right: 24px;
+                padding-left: 24px;
+
+                > .row {
+                    flex-direction: column;
+                }
+            }
+
+            @include tablet-down {
+                margin: 28px 0;
+            }
+
+            .foundry--header {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+
+            .balance {
+                margin-left: 16px;
+            }
+
+            .feature-block {
+                .card--label {
+                    @include font-size(12px);
+
+                    display: flex;
+                    align-items: center;
+                    height: 32px;
+                    color: var(--card-color);
+                    font-family: $inter;
+                    font-weight: 500;
+                    letter-spacing: 0.5px;
+                    white-space: nowrap;
+                }
+                .data-toggle {
+                    margin-top: 12px;
+                }
+            }
+        }
+    }
+}