Merge remote-tracking branch 'origin/dev' into feat/issues-1349-revie…

…w-info-boxes

api/package.json

@@ -1,7 +1,7 @@
 {
     "name": "explorer-api",
     "description": "API for Tangle Explorer",
-    "version": "3.3.8-rc.2",
+    "version": "3.3.8",
     "author": "Martyn Janes <[email protected]>",
     "repository": {
         "type": "git",

api/src/utils/stardust/associatedOutputsHelper.ts

@@ -214,15 +214,19 @@ export class AssociatedOutputsHelper {
                     // remove expired basic outputs from basic address associations if they exist
                     const expiredIds = this.associationToOutputIds.get(AssociationType.BASIC_ADDRESS_EXPIRED);
                     const filteredOutputIds = outputIds.filter((id) => !expiredIds?.includes(id));
-                    associations.push({ type, outputIds: filteredOutputIds.reverse() });
+                    if (filteredOutputIds.length > 0) {
+                        associations.push({ type, outputIds: filteredOutputIds.reverse() });
+                    }
                 } else if (
                     type === AssociationType.NFT_ADDRESS &&
                     this.associationToOutputIds.get(AssociationType.NFT_ADDRESS_EXPIRED)?.length > 0
                 ) {
                     // remove expired nft outputs from nft address associations if they exist
                     const expiredIds = this.associationToOutputIds.get(AssociationType.NFT_ADDRESS_EXPIRED);
                     const filteredOutputIds = outputIds.filter((id) => !expiredIds?.includes(id));
-                    associations.push({ type, outputIds: filteredOutputIds.reverse() });
+                    if (filteredOutputIds.length > 0) {
+                        associations.push({ type, outputIds: filteredOutputIds.reverse() });
+                    }
                 } else {
                     associations.push({ type, outputIds: outputIds.reverse() });
                 }

api/src/utils/stardust/searchExecutor.ts

@@ -53,7 +53,7 @@ export class SearchExecutor {
                     this.apiService
                         .milestoneDetailsById(searchQuery.milestoneId)
                         .then((milestoneDetails) => {
-                            if (milestoneDetails) {
+                            if (milestoneDetails.blockId) {
                                 promisesResult = {
                                     milestone: milestoneDetails,
                                 };
@@ -139,7 +139,7 @@ export class SearchExecutor {
                     this.apiService
                         .aliasDetails(searchQuery.aliasId)
                         .then((aliasOutputs) => {
-                            if (aliasOutputs) {
+                            if (aliasOutputs.aliasDetails) {
                                 promisesResult = {
                                     aliasId: searchQuery.aliasId,
                                     did: searchQuery.did,
@@ -162,7 +162,7 @@ export class SearchExecutor {
                     this.apiService
                         .nftDetails(searchQuery.nftId)
                         .then((nftOutputs) => {
-                            if (nftOutputs) {
+                            if (nftOutputs.nftDetails) {
                                 promisesResult = {
                                     nftId: searchQuery.nftId,
                                 };

client/Dockerfile

@@ -24,6 +24,9 @@ RUN echo 'server {\
     }\
   }' > /etc/nginx/sites-available/default
 
+# Set Content-Type so streaming compilation works
+RUN mv ./nginx/wasm.conf /etc/nginx/conf.d/wasm.conf
+
 # Running required steps to prepare the web app prod build
 RUN npm install
 RUN npm run build

client/nginx/wasm.conf

@@ -0,0 +1,4 @@
+types {
+    # Set Content-Type so streaming compilation works
+    application/wasm wasm;
+}

client/package.json

@@ -1,7 +1,7 @@
 {
     "name": "explorer-client",
     "description": "Tangle Explorer UI",
-    "version": "3.3.8-rc.2",
+    "version": "3.3.8",
     "author": "Martyn Janes <[email protected]>",
     "type": "module",
     "repository": {

client/src/app/routes.tsx

@@ -31,7 +31,8 @@ import StardustBlock from "./routes/stardust/Block";
 import StardustFoundry from "./routes/stardust/Foundry";
 import { Landing as StardustLanding } from "./routes/stardust/landing/Landing";
 import NovaLanding from "./routes/nova/landing/Landing";
-import NftRedirectRoute from "./routes/stardust/NftRedirectRoute";
+import NftRedirectRouteStardust from "./routes/stardust/NftRedirectRoute";
+import NftRedirectRouteNova from "./routes/nova/NftRedirectRoute";
 import StardustOutputList from "./routes/stardust/OutputList";
 import StardustOutputPage from "./routes/stardust/OutputPage";
 import NovaBlockPage from "./routes/nova/Block";
@@ -169,7 +170,7 @@ const buildAppRoutes = (protocolVersion: string, withNetworkContext: (wrappedCom
         <Route path="/:network/visualizer/" key={keys.next().value} component={StardustVisualizer} />,
         <Route path="/:network/search/:query?" key={keys.next().value} component={StardustSearch} />,
         <Route path="/:network/addr/:address" key={keys.next().value} component={StardustAddressPage} />,
-        <Route path="/:network/nft/:nftId" key={keys.next().value} component={NftRedirectRoute} />,
+        <Route path="/:network/nft/:nftId" key={keys.next().value} component={NftRedirectRouteStardust} />,
         <Route path="/:network/block/:blockId" key={keys.next().value} component={StardustBlock} />,
         <Route path="/:network/transaction/:transactionId" key={keys.next().value} component={StardustTransactionPage} />,
         <Route path="/:network/output/:outputId" key={keys.next().value} component={StardustOutputPage} />,
@@ -189,6 +190,7 @@ const buildAppRoutes = (protocolVersion: string, withNetworkContext: (wrappedCom
         <Route path="/:network/epoch/:epochIndex" key={keys.next().value} component={NovaEpochPage} />,
         <Route path="/:network/transaction/:transactionId" key={keys.next().value} component={NovaTransactionPage} />,
         <Route path="/:network/foundry/:foundryId" key={keys.next().value} component={NovaFoundryPage} />,
+        <Route path="/:network/nft/:nftId" key={keys.next().value} component={NftRedirectRouteNova} />,
         <Route path="/:network/statistics" key={keys.next().value} component={NovaStatisticsPage} />,
         <Route path="/:network/validators" key={keys.next().value} component={ValidatorsPage} />,
         <Route path="/:network/outputs" key={keys.next().value} component={NovaOutputsPage} />,

client/src/app/routes/nova/NftRedirectRoute.tsx

@@ -0,0 +1,36 @@
+import { AddressType } from "@iota/sdk-wasm-nova/web";
+import React from "react";
+import { Redirect, RouteComponentProps } from "react-router-dom";
+import { AddressHelper } from "~helpers/nova/addressHelper";
+import { useNetworkInfoNova } from "~/helpers/nova/networkInfo";
+
+interface NftRedirectRouteProps {
+    /**
+     * The network.
+     */
+    network: string;
+
+    /**
+     * The nftId to redirect.
+     */
+    nftId: string;
+}
+
+const ADDRESS_ROUTE = "addr";
+
+const NftRedirectRoute: React.FC<RouteComponentProps<NftRedirectRouteProps>> = ({
+    match: {
+        params: { network, nftId },
+    },
+}) => {
+    const { bech32Hrp } = useNetworkInfoNova((s) => s.networkInfo);
+    const nftAddress = AddressHelper.buildAddress(bech32Hrp, nftId, AddressType.Nft);
+    const redirectState = {
+        addressDetails: nftAddress,
+    };
+    const routeParam = nftAddress.bech32;
+    const redirect = `/${network}/${ADDRESS_ROUTE}/${routeParam}`;
+    return <Redirect to={{ pathname: redirect, state: redirectState }} />;
+};
+
+export default NftRedirectRoute;

client/src/helpers/stardust/hooks/useAddressBalance.ts

@@ -1,10 +1,12 @@
 import { AddressType, AliasOutput, NftOutput } from "@iota/sdk-wasm-stardust/web";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
+import NetworkContext from "~/app/context/NetworkContext";
 import { IBech32AddressDetails } from "~/models/api/IBech32AddressDetails";
 import { ServiceFactory } from "~factories/serviceFactory";
 import { useIsMounted } from "~helpers/hooks/useIsMounted";
 import { STARDUST } from "~models/config/protocolVersion";
 import { StardustApiClient } from "~services/stardust/stardustApiClient";
+import { TransactionsHelper } from "../transactionsHelper";
 
 /**
  * Fetch the address balance
@@ -23,6 +25,7 @@ export function useAddressBalance(
     const [balance, setBalance] = useState<number | null>(null);
     const [availableBalance, setAvailableBalance] = useState<number | null>(null);
     const [isLoading, setIsLoading] = useState<boolean>(true);
+    const { rentStructure } = useContext(NetworkContext);
 
     useEffect(() => {
         setIsLoading(true);
@@ -33,28 +36,27 @@ export function useAddressBalance(
             // eslint-disable-next-line no-void
             void (async () => {
                 const response = await apiClient.addressBalanceChronicle({ network, address });
-
-                if (response?.totalBalance !== undefined && isMounted) {
-                    let totalBalance = response.totalBalance;
-                    let availableBalance = response.availableBalance ?? 0;
+                if (isMounted) {
+                    let totalBalance = 0;
+                    let availableBalance = null;
+                    if (response?.totalBalance !== undefined) {
+                        totalBalance = response.totalBalance;
+                        availableBalance = response.availableBalance ?? 0;
+                    } else {
+                        // Fallback balance from iotajs (node)
+                        const addressDetailsWithBalance = await apiClient.addressBalance({ network, address });
+                        if (addressDetailsWithBalance && isMounted) {
+                            totalBalance = Number(addressDetailsWithBalance.balance);
+                        }
+                    }
                     if (output) {
-                        totalBalance = Number(totalBalance) + Number(output.amount);
-                        availableBalance = Number(availableBalance) + Number(output.amount);
+                        const outputBalance = Number(output.amount);
+                        const outputStorageDeposit = TransactionsHelper.computeStorageDeposit([output], rentStructure);
+                        totalBalance = Number(totalBalance ?? 0) + outputBalance;
+                        availableBalance = Number(availableBalance ?? 0) + outputBalance - outputStorageDeposit;
                     }
                     setBalance(totalBalance);
-                    setAvailableBalance(availableBalance > 0 ? availableBalance : null);
-                } else if (isMounted) {
-                    // Fallback balance from iotajs (node)
-                    const addressDetailsWithBalance = await apiClient.addressBalance({ network, address });
-
-                    if (addressDetailsWithBalance && isMounted) {
-                        let totalBalance = Number(addressDetailsWithBalance.balance);
-                        if (output) {
-                            totalBalance = Number(totalBalance) + Number(output.amount);
-                        }
-                        setBalance(totalBalance);
-                        setAvailableBalance(null);
-                    }
+                    setAvailableBalance(availableBalance);
                 }
             })();
         } else {

client/src/helpers/stardust/transactionsHelper.ts

@@ -178,8 +178,7 @@ export class TransactionsHelper {
             }
 
             sortedOutputs = [...outputs, ...remainderOutputs];
-            this.sortInputsAndOuputsByIndex(sortedOutputs);
-            this.sortInputsAndOuputsByIndex(inputs);
+            this.sortOuputsByIndex(sortedOutputs);
         }
 
         return { inputs, unlocks, outputs: sortedOutputs, unlockAddresses, transferTotal };
@@ -189,7 +188,7 @@ export class TransactionsHelper {
      * Sort inputs and outputs in assending order by index.
      * @param items Inputs or Outputs.
      */
-    public static sortInputsAndOuputsByIndex(items: IInput[] | IOutput[]) {
+    public static sortOuputsByIndex(items: IOutput[]) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         items.sort((a: any, b: any) => {
             const firstIndex: string = a.id ? a.id.slice(-4) : a.outputId.slice(-4);

package.json

@@ -1,7 +1,7 @@
 {
     "name": "explorer",
     "description": "Tangle Explorer",
-    "version": "3.3.8-rc.2",
+    "version": "3.3.8",
     "scripts": {
         "setup:client": "cd client && npm install && npm run postinstall",
         "setup:api": "cd api && npm install && npm run build-compile && npm run build-config",