Feat: Add Outputs tab to Address page (#1115)

* feat: add output tab to address page * Remove unused code in AddressPageTabbedSections component * chore: Remove unused state interfaces --------- Co-authored-by: Mario Sarcevic <[email protected]>
iotaledger · Feb 14, 2024 · e2ccf77 · e2ccf77
1 parent 7093e7b
commit e2ccf77
Show file tree

Hide file tree

Showing 11 changed files with 109 additions and 48 deletions.
diff --git a/client/src/app/components/nova/address/AccountAddressView.tsx b/client/src/app/components/nova/address/AccountAddressView.tsx
@@ -3,17 +3,17 @@ import React 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";
 import AddressBalance from "./AddressBalance";
 
 interface AccountAddressViewProps {
     accountAddress: AccountAddress;
 }
 
 const AccountAddressView: React.FC<AccountAddressViewProps> = ({ accountAddress }) => {
-    const [state] = useAccountAddressState(accountAddress);
-    const { accountAddressDetails, totalBalance, availableBalance, isAccountDetailsLoading } = state;
-    const isPageLoading = isAccountDetailsLoading;
+    const [state, setState] = useAccountAddressState(accountAddress);
+    const { accountAddressDetails, totalBalance, availableBalance, isAccountDetailsLoading, isAssociatedOutputsLoading } = state;
+    const isPageLoading = isAccountDetailsLoading || isAssociatedOutputsLoading;
 
     return (
         <div className="address-page">
@@ -45,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>

diff --git a/client/src/app/components/nova/address/AnchorAddressView.tsx b/client/src/app/components/nova/address/AnchorAddressView.tsx
@@ -4,16 +4,16 @@ import { useAnchorAddressState } from "~/helpers/nova/hooks/useAnchorAddressStat
 import Spinner from "../../Spinner";
 import AddressBalance from "./AddressBalance";
 import Bech32Address from "./Bech32Address";
-import AssociatedOutputs from "./section/association/AssociatedOutputs";
+import { AddressPageTabbedSections } from "./section/AddressPageTabbedSections";
 
 interface AnchorAddressViewProps {
     anchorAddress: AnchorAddress;
 }
 
 const AnchorAddressView: React.FC<AnchorAddressViewProps> = ({ anchorAddress }) => {
-    const [state] = useAnchorAddressState(anchorAddress);
-    const { anchorAddressDetails, totalBalance, availableBalance, isAnchorDetailsLoading } = state;
-    const isPageLoading = isAnchorDetailsLoading;
+    const [state, setState] = useAnchorAddressState(anchorAddress);
+    const { anchorAddressDetails, totalBalance, availableBalance, isAnchorDetailsLoading, isAssociatedOutputsLoading } = state;
+    const isPageLoading = isAnchorDetailsLoading || isAssociatedOutputsLoading;
 
     return (
         <div className="address-page">
@@ -45,12 +45,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>

diff --git a/client/src/app/components/nova/address/Ed25519AddressView.tsx b/client/src/app/components/nova/address/Ed25519AddressView.tsx
@@ -3,15 +3,17 @@ import React from "react";
 import { useEd25519AddressState } from "~/helpers/nova/hooks/useEd25519AddressState";
 import AddressBalance from "./AddressBalance";
 import Bech32Address from "./Bech32Address";
-import AssociatedOutputs from "./section/association/AssociatedOutputs";
+import { AddressPageTabbedSections } from "./section/AddressPageTabbedSections";
+import Spinner from "../../Spinner";
 
 interface Ed25519AddressViewProps {
     ed25519Address: Ed25519Address;
 }
 
 const Ed25519AddressView: React.FC<Ed25519AddressViewProps> = ({ ed25519Address }) => {
-    const [state] = useEd25519AddressState(ed25519Address);
-    const { ed25519AddressDetails, totalBalance, availableBalance } = state;
+    const [state, setState] = useEd25519AddressState(ed25519Address);
+    const { ed25519AddressDetails, totalBalance, availableBalance, isAssociatedOutputsLoading } = state;
+    const isPageLoading = isAssociatedOutputsLoading;
 
     return (
         <div className="address-page">
@@ -21,6 +23,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">
@@ -42,12 +45,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>

diff --git a/client/src/app/components/nova/address/ImplicitAccountCreationAddressView.tsx b/client/src/app/components/nova/address/ImplicitAccountCreationAddressView.tsx
@@ -3,15 +3,17 @@ import React from "react";
 import { useImplicitAccountCreationAddressState } from "~/helpers/nova/hooks/useImplicitAccountCreationAddressState";
 import AddressBalance from "./AddressBalance";
 import Bech32Address from "./Bech32Address";
-import AssociatedOutputs from "./section/association/AssociatedOutputs";
+import Spinner from "../../Spinner";
+import { AddressPageTabbedSections } from "./section/AddressPageTabbedSections";
 
 interface ImplicitAccountCreationAddressViewProps {
     implicitAccountCreationAddress: ImplicitAccountCreationAddress;
 }
 
 const ImplicitAccountCreationAddressView: React.FC<ImplicitAccountCreationAddressViewProps> = ({ implicitAccountCreationAddress }) => {
-    const [state] = useImplicitAccountCreationAddressState(implicitAccountCreationAddress);
-    const { implicitAccountCreationAddressDetails, totalBalance, availableBalance } = state;
+    const [state, setState] = useImplicitAccountCreationAddressState(implicitAccountCreationAddress);
+    const { implicitAccountCreationAddressDetails, totalBalance, availableBalance, isAssociatedOutputsLoading } = state;
+    const isPageLoading = isAssociatedOutputsLoading;
 
     return (
         <div className="address-page">
@@ -22,6 +24,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">
@@ -42,12 +45,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>

diff --git a/client/src/app/components/nova/address/NftAddressView.tsx b/client/src/app/components/nova/address/NftAddressView.tsx
@@ -4,16 +4,16 @@ import { useNftAddressState } from "~/helpers/nova/hooks/useNftAddressState";
 import Spinner from "../../Spinner";
 import AddressBalance from "./AddressBalance";
 import Bech32Address from "./Bech32Address";
-import AssociatedOutputs from "./section/association/AssociatedOutputs";
+import { AddressPageTabbedSections } from "./section/AddressPageTabbedSections";
 
 interface NftAddressViewProps {
     nftAddress: NftAddress;
 }
 
 const NftAddressView: React.FC<NftAddressViewProps> = ({ nftAddress }) => {
-    const [state] = useNftAddressState(nftAddress);
-    const { nftAddressDetails, totalBalance, availableBalance, isNftDetailsLoading } = state;
-    const isPageLoading = isNftDetailsLoading;
+    const [state, setState] = useNftAddressState(nftAddress);
+    const { nftAddressDetails, totalBalance, availableBalance, isNftDetailsLoading, isAssociatedOutputsLoading } = state;
+    const isPageLoading = isNftDetailsLoading || isAssociatedOutputsLoading;
 
     return (
         <div className="address-page">
@@ -45,12 +45,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>

diff --git a/client/src/app/components/nova/address/section/AddressPageTabbedSections.tsx b/client/src/app/components/nova/address/section/AddressPageTabbedSections.tsx
@@ -0,0 +1,50 @@
+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;
+
+    return (
+        <TabbedSection key={addressDetails.bech32} tabsEnum={tabEnums} tabOptions={tabOptions}>
+            {tabbedSections}
+        </TabbedSection>
+    );
+};
diff --git a/client/src/helpers/nova/hooks/useAccountAddressState.ts b/client/src/helpers/nova/hooks/useAccountAddressState.ts
@@ -14,6 +14,7 @@ export interface IAccountAddressState {
     totalBalance: number | null;
     availableBalance: number | null;
     isAccountDetailsLoading: boolean;
+    isAssociatedOutputsLoading: boolean;
 }
 
 const initialState = {
@@ -22,6 +23,7 @@ const initialState = {
     totalBalance: null,
     availableBalance: null,
     isAccountDetailsLoading: true,
+    isAssociatedOutputsLoading: false,
 };
 
 /**

diff --git a/client/src/helpers/nova/hooks/useAnchorAddressState.ts b/client/src/helpers/nova/hooks/useAnchorAddressState.ts
@@ -14,6 +14,7 @@ export interface IAnchorAddressState {
     availableBalance: number | null;
     totalBalance: number | null;
     isAnchorDetailsLoading: boolean;
+    isAssociatedOutputsLoading: boolean;
 }
 
 const initialState = {
@@ -22,6 +23,7 @@ const initialState = {
     totalBalance: null,
     availableBalance: null,
     isAnchorDetailsLoading: true,
+    isAssociatedOutputsLoading: false,
 };
 
 /**

diff --git a/client/src/helpers/nova/hooks/useEd25519AddressState.ts b/client/src/helpers/nova/hooks/useEd25519AddressState.ts
@@ -10,12 +10,14 @@ export interface IEd25519AddressState {
     ed25519AddressDetails: IAddressDetails | null;
     totalBalance: number | null;
     availableBalance: number | null;
+    isAssociatedOutputsLoading: boolean;
 }
 
 const initialState = {
     ed25519AddressDetails: null,
     totalBalance: null,
     availableBalance: null,
+    isAssociatedOutputsLoading: false,
 };
 
 /**

diff --git a/client/src/helpers/nova/hooks/useImplicitAccountCreationAddressState.ts b/client/src/helpers/nova/hooks/useImplicitAccountCreationAddressState.ts
@@ -11,12 +11,14 @@ export interface IImplicitAccountCreationAddressState {
     implicitAccountCreationAddressDetails: IAddressDetails | null;
     totalBalance: number | null;
     availableBalance: number | null;
+    isAssociatedOutputsLoading: boolean;
 }
 
 const initialState = {
     implicitAccountCreationAddressDetails: null,
     totalBalance: null,
     availableBalance: null,
+    isAssociatedOutputsLoading: false,
 };
 
 /**

diff --git a/client/src/helpers/nova/hooks/useNftAddressState.ts b/client/src/helpers/nova/hooks/useNftAddressState.ts
@@ -14,6 +14,7 @@ export interface INftAddressState {
     totalBalance: number | null;
     availableBalance: number | null;
     isNftDetailsLoading: boolean;
+    isAssociatedOutputsLoading: boolean;
 }
 
 const initialState = {
@@ -22,6 +23,7 @@ const initialState = {
     isNftDetailsLoading: true,
     totalBalance: null,
     availableBalance: null,
+    isAssociatedOutputsLoading: false,
 };
 
 /**