Feat: Add Outputs tab to Address page

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

@@ -1,17 +1,26 @@
 import { AccountAddress } from "@iota/sdk-wasm-nova/web";
-import React from "react";
+import React, { Reducer, useReducer } from "react";
 import { useAccountAddressState } from "~/helpers/nova/hooks/useAccountAddressState";
 import Spinner from "../../Spinner";
 import Bech32Address from "../../nova/address/Bech32Address";
-import AssociatedOutputs from "./section/association/AssociatedOutputs";
+import { AddressPageTabbedSections } from "./section/AddressPageTabbedSections";
 
 interface AccountAddressViewProps {
     accountAddress: AccountAddress;
 }
 
+export interface IAccountAddressViewState {
+    isAssociatedOutputsLoading: boolean;
+}
+
 const AccountAddressView: React.FC<AccountAddressViewProps> = ({ accountAddress }) => {
     const { accountAddressDetails, isAccountDetailsLoading } = useAccountAddressState(accountAddress);
-    const isPageLoading = isAccountDetailsLoading;
+    const [state, setState] = useReducer<Reducer<IAccountAddressViewState, Partial<IAccountAddressViewState>>>(
+        (currentState, newState) => ({ ...currentState, ...newState }),
+        { isAssociatedOutputsLoading: false },
+    );
+    const { isAssociatedOutputsLoading } = state;
+    const isPageLoading = isAccountDetailsLoading || isAssociatedOutputsLoading;
 
     return (
         <div className="address-page">
@@ -36,12 +45,11 @@ const AccountAddressView: React.FC<AccountAddressViewProps> = ({ accountAddress
                                 </div>
                             </div>
                         </div>
-                        <div className="section no-border-bottom padding-b-0">
-                            <div className="row middle">
-                                <h2>Associated Outputs</h2>
-                            </div>
-                            <AssociatedOutputs addressDetails={accountAddressDetails} />
-                        </div>
+                        <AddressPageTabbedSections
+                            key={accountAddressDetails.bech32}
+                            addressDetails={accountAddressDetails}
+                            setAssociatedOutputsLoading={(val) => setState({ isAssociatedOutputsLoading: val })}
+                        />
                     </div>
                 )}
             </div>

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

@@ -1,17 +1,27 @@
 import { AnchorAddress } from "@iota/sdk-wasm-nova/web";
-import React from "react";
+import React, { Reducer, useReducer } from "react";
 import { useAnchorAddressState } from "~/helpers/nova/hooks/useAnchorAddressState";
 import Spinner from "../../Spinner";
 import Bech32Address from "./Bech32Address";
-import AssociatedOutputs from "./section/association/AssociatedOutputs";
+import { IEd25519AddressViewState } from "./Ed25519AddressView";
+import { AddressPageTabbedSections } from "./section/AddressPageTabbedSections";
 
 interface AnchorAddressViewProps {
     anchorAddress: AnchorAddress;
 }
 
+export interface IAnchorAddressViewState {
+    isAssociatedOutputsLoading: boolean;
+}
+
 const AnchorAddressView: React.FC<AnchorAddressViewProps> = ({ anchorAddress }) => {
     const { anchorAddressDetails, isAnchorDetailsLoading } = useAnchorAddressState(anchorAddress);
-    const isPageLoading = isAnchorDetailsLoading;
+    const [state, setState] = useReducer<Reducer<IEd25519AddressViewState, Partial<IEd25519AddressViewState>>>(
+        (currentState, newState) => ({ ...currentState, ...newState }),
+        { isAssociatedOutputsLoading: false },
+    );
+    const { isAssociatedOutputsLoading } = state;
+    const isPageLoading = isAnchorDetailsLoading || isAssociatedOutputsLoading;
 
     return (
         <div className="address-page">
@@ -36,12 +46,11 @@ const AnchorAddressView: React.FC<AnchorAddressViewProps> = ({ anchorAddress })
                                 </div>
                             </div>
                         </div>
-                        <div className="section no-border-bottom padding-b-0">
-                            <div className="row middle">
-                                <h2>Associated Outputs</h2>
-                            </div>
-                            <AssociatedOutputs addressDetails={anchorAddressDetails} />
-                        </div>
+                        <AddressPageTabbedSections
+                            key={anchorAddressDetails.bech32}
+                            addressDetails={anchorAddressDetails}
+                            setAssociatedOutputsLoading={(val) => setState({ isAssociatedOutputsLoading: val })}
+                        />
                     </div>
                 )}
             </div>

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

@@ -1,15 +1,27 @@
 import { Ed25519Address } from "@iota/sdk-wasm-nova/web";
-import React from "react";
+import React, { Reducer, useReducer } from "react";
 import { useEd25519AddressState } from "~/helpers/nova/hooks/useEd25519AddressState";
 import Bech32Address from "./Bech32Address";
-import AssociatedOutputs from "./section/association/AssociatedOutputs";
+import { AddressPageTabbedSections } from "./section/AddressPageTabbedSections";
+import Spinner from "../../Spinner";
 
 interface Ed25519AddressViewProps {
     ed25519Address: Ed25519Address;
 }
 
+export interface IEd25519AddressViewState {
+    isAssociatedOutputsLoading: boolean;
+}
+
 const Ed25519AddressView: React.FC<Ed25519AddressViewProps> = ({ ed25519Address }) => {
     const { ed25519AddressDetails } = useEd25519AddressState(ed25519Address);
+    const [state, setState] = useReducer<Reducer<IEd25519AddressViewState, Partial<IEd25519AddressViewState>>>(
+        (currentState, newState) => ({ ...currentState, ...newState }),
+        { isAssociatedOutputsLoading: false },
+    );
+
+    const { isAssociatedOutputsLoading } = state;
+    const isPageLoading = isAssociatedOutputsLoading;
 
     return (
         <div className="address-page">
@@ -19,6 +31,7 @@ const Ed25519AddressView: React.FC<Ed25519AddressViewProps> = ({ ed25519Address
                         <div className="addr--header">
                             <div className="row middle">
                                 <h1>{ed25519AddressDetails.label?.replace("Ed25519", "Address")}</h1>
+                                {isPageLoading && <Spinner />}
                             </div>
                         </div>
                         <div className="section no-border-bottom padding-b-0">
@@ -33,12 +46,11 @@ const Ed25519AddressView: React.FC<Ed25519AddressViewProps> = ({ ed25519Address
                                 </div>
                             </div>
                         </div>
-                        <div className="section no-border-bottom padding-b-0">
-                            <div className="row middle">
-                                <h2>Associated Outputs</h2>
-                            </div>
-                            <AssociatedOutputs addressDetails={ed25519AddressDetails} />
-                        </div>
+                        <AddressPageTabbedSections
+                            key={ed25519AddressDetails.bech32}
+                            addressDetails={ed25519AddressDetails}
+                            setAssociatedOutputsLoading={(val) => setState({ isAssociatedOutputsLoading: val })}
+                        />
                     </div>
                 )}
             </div>

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

@@ -1,15 +1,27 @@
 import { ImplicitAccountCreationAddress } from "@iota/sdk-wasm-nova/web";
-import React from "react";
+import React, { Reducer, useReducer } from "react";
 import { useImplicitAccountCreationAddressState } from "~/helpers/nova/hooks/useImplicitAccountCreationAddressState";
 import Bech32Address from "./Bech32Address";
-import AssociatedOutputs from "./section/association/AssociatedOutputs";
+import Spinner from "../../Spinner";
+import { IEd25519AddressViewState } from "./Ed25519AddressView";
+import { AddressPageTabbedSections } from "./section/AddressPageTabbedSections";
 
 interface ImplicitAccountCreationAddressViewProps {
     implicitAccountCreationAddress: ImplicitAccountCreationAddress;
 }
 
+export interface IImplicitAccountCreationAddressViewState {
+    isAssociatedOutputsLoading: boolean;
+}
+
 const ImplicitAccountCreationAddressView: React.FC<ImplicitAccountCreationAddressViewProps> = ({ implicitAccountCreationAddress }) => {
     const { implicitAccountCreationAddressDetails } = useImplicitAccountCreationAddressState(implicitAccountCreationAddress);
+    const [state, setState] = useReducer<Reducer<IEd25519AddressViewState, Partial<IEd25519AddressViewState>>>(
+        (currentState, newState) => ({ ...currentState, ...newState }),
+        { isAssociatedOutputsLoading: false },
+    );
+    const { isAssociatedOutputsLoading } = state;
+    const isPageLoading = isAssociatedOutputsLoading;
 
     return (
         <div className="address-page">
@@ -20,6 +32,7 @@ const ImplicitAccountCreationAddressView: React.FC<ImplicitAccountCreationAddres
                             <div className="row middle">
                                 <h1>{implicitAccountCreationAddressDetails.label?.replace("Ed25519", "Address")}</h1>
                             </div>
+                            {isPageLoading && <Spinner />}
                         </div>
                         <div className="section no-border-bottom padding-b-0">
                             <div className="section--header">
@@ -33,12 +46,11 @@ const ImplicitAccountCreationAddressView: React.FC<ImplicitAccountCreationAddres
                                 </div>
                             </div>
                         </div>
-                        <div className="section no-border-bottom padding-b-0">
-                            <div className="row middle">
-                                <h2>Associated Outputs</h2>
-                            </div>
-                            <AssociatedOutputs addressDetails={implicitAccountCreationAddressDetails} />
-                        </div>
+                        <AddressPageTabbedSections
+                            key={implicitAccountCreationAddressDetails.bech32}
+                            addressDetails={implicitAccountCreationAddressDetails}
+                            setAssociatedOutputsLoading={(val) => setState({ isAssociatedOutputsLoading: val })}
+                        />
                     </div>
                 )}
             </div>

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

@@ -1,17 +1,27 @@
 import { NftAddress } from "@iota/sdk-wasm-nova/web";
-import React from "react";
+import React, { Reducer, useReducer } from "react";
 import { useNftAddressState } from "~/helpers/nova/hooks/useNftAddressState";
 import Spinner from "../../Spinner";
 import Bech32Address from "./Bech32Address";
-import AssociatedOutputs from "./section/association/AssociatedOutputs";
+import { IEd25519AddressViewState } from "./Ed25519AddressView";
+import { AddressPageTabbedSections } from "./section/AddressPageTabbedSections";
 
 interface NftAddressViewProps {
     nftAddress: NftAddress;
 }
 
+export interface INftAddressViewState {
+    isAssociatedOutputsLoading: boolean;
+}
+
 const NftAddressView: React.FC<NftAddressViewProps> = ({ nftAddress }) => {
     const { nftAddressDetails, isNftDetailsLoading } = useNftAddressState(nftAddress);
-    const isPageLoading = isNftDetailsLoading;
+    const [state, setState] = useReducer<Reducer<IEd25519AddressViewState, Partial<IEd25519AddressViewState>>>(
+        (currentState, newState) => ({ ...currentState, ...newState }),
+        { isAssociatedOutputsLoading: false },
+    );
+    const { isAssociatedOutputsLoading } = state;
+    const isPageLoading = isNftDetailsLoading || isAssociatedOutputsLoading;
 
     return (
         <div className="address-page">
@@ -36,12 +46,11 @@ const NftAddressView: React.FC<NftAddressViewProps> = ({ nftAddress }) => {
                                 </div>
                             </div>
                         </div>
-                        <div className="section no-border-bottom padding-b-0">
-                            <div className="row middle">
-                                <h2>Associated Outputs</h2>
-                            </div>
-                            <AssociatedOutputs addressDetails={nftAddressDetails} />
-                        </div>
+                        <AddressPageTabbedSections
+                            key={nftAddressDetails.bech32}
+                            addressDetails={nftAddressDetails}
+                            setAssociatedOutputsLoading={(val) => setState({ isAssociatedOutputsLoading: val })}
+                        />
                     </div>
                 )}
             </div>

client/src/app/components/nova/address/section/AddressPageTabbedSections.tsx

@@ -0,0 +1,66 @@
+import { AddressType } from "@iota/sdk-wasm-nova/web";
+import React, { useState } from "react";
+import associatedOuputsMessage from "~assets/modals/stardust/address/associated-outputs.json";
+import TabbedSection from "../../../hoc/TabbedSection";
+import AssociatedOutputs from "./association/AssociatedOutputs";
+import { IAddressDetails } from "~/models/api/nova/IAddressDetails";
+
+enum DEFAULT_TABS {
+    AssocOutputs = "Outputs",
+}
+
+const buildDefaultTabsOptions = (associatedOutputCount: number) => ({
+    [DEFAULT_TABS.AssocOutputs]: {
+        disabled: associatedOutputCount === 0,
+        counter: associatedOutputCount,
+        infoContent: associatedOuputsMessage,
+    },
+});
+
+interface IAddressPageTabbedSectionsProps {
+    readonly addressDetails: IAddressDetails;
+    readonly setAssociatedOutputsLoading: (isLoading: boolean) => void;
+}
+
+export const AddressPageTabbedSections: React.FC<IAddressPageTabbedSectionsProps> = ({ addressDetails, setAssociatedOutputsLoading }) => {
+    const [outputCount, setOutputCount] = useState<number>(0);
+
+    if (!addressDetails) {
+        return null;
+    }
+
+    const defaultSections = [
+        <AssociatedOutputs
+            key={`assoc-outputs-${addressDetails.bech32}`}
+            addressDetails={addressDetails}
+            setOutputCount={setOutputCount}
+            setIsLoading={setAssociatedOutputsLoading}
+        />,
+    ];
+
+    const tabEnums = DEFAULT_TABS;
+    const defaultTabsOptions = buildDefaultTabsOptions(outputCount);
+    const tabOptions = defaultTabsOptions;
+    const tabbedSections = defaultSections;
+
+    switch (addressDetails.type) {
+        case AddressType.Account: {
+            break;
+        }
+        case AddressType.Nft: {
+            break;
+        }
+        case AddressType.Anchor: {
+            break;
+        }
+        default: {
+            break;
+        }
+    }
+
+    return (
+        <TabbedSection key={addressDetails.bech32} tabsEnum={tabEnums} tabOptions={tabOptions}>
+            {tabbedSections}
+        </TabbedSection>
+    );
+};