fix(deploy-web): fixed error handling for transaction page

apps/api/src/services/db/transactionsService.ts

@@ -3,6 +3,7 @@ import { AkashBlock as Block, AkashMessage as Message } from "@akashnetwork/clou
 import { msgToJSON } from "@src/utils/protobuf";
 import { QueryTypes } from "sequelize";
 import { chainDb } from "@src/db/dbConnection";
+import { ApiTransactionResponse } from "@src/types/transactions";
 
 export async function getTransactions(limit: number) {
   const _limit = Math.min(limit, 100);
@@ -41,7 +42,7 @@ export async function getTransactions(limit: number) {
   }));
 }
 
-export async function getTransaction(hash: string) {
+export async function getTransaction(hash: string): Promise<ApiTransactionResponse | null> {
   const tx = await Transaction.findOne({
     where: {
       hash: hash
@@ -62,7 +63,9 @@ export async function getTransaction(hash: string) {
     ]
   });
 
-  if (!tx) return null;
+  if (!tx) {
+    return null;
+  }
 
   const messages = await Message.findAll({
     where: {

apps/api/src/services/external/apiNodeService.ts

@@ -1,14 +1,13 @@
 import fetch from "node-fetch";
 import { getDeploymentRelatedMessages } from "../db/deploymentService";
-import { averageBlockCountInAMonth } from "@src/utils/constants";
+import { apiNodeUrl, averageBlockCountInAMonth, betaTypeVersion, betaTypeVersionMarket } from "@src/utils/constants";
 import { coinToAsset } from "@src/utils/coin";
 import { getTransactionByAddress } from "@src/services/db/transactionsService";
 import axios from "axios";
 import { Validator } from "@akashnetwork/cloudmos-shared/dbSchemas/base";
 import { Op } from "sequelize";
 import { Deployment, Lease, Provider, ProviderAttribute } from "@akashnetwork/cloudmos-shared/dbSchemas/akash";
 import { cacheKeys, cacheResponse } from "@src/caching/helpers";
-import { env } from "@src/utils/env";
 import {
   CosmosGovProposalResponse,
   CosmosGovProposalsResponse,
@@ -31,15 +30,7 @@ import { CosmosDistributionParamsResponse } from "@src/types/rest/cosmosDistribu
 import { CosmosDistributionValidatorsCommissionResponse } from "@src/types/rest/cosmosDistributionValidatorsCommissionResponse";
 import { getProviderList } from "../db/providerStatusService";
 
-const defaultNodeUrlMapping: { [key: string]: string } = {
-  mainnet: "https://api.akashnet.net:443",
-  sandbox: "https://api.sandbox-01.aksh.pw",
-  testnet: "https://api.testnet-02.aksh.pw"
-};
 
-const apiNodeUrl = env.RestApiNodeUrl ?? defaultNodeUrlMapping[env.Network] ?? defaultNodeUrlMapping.mainnet;
-const betaTypeVersion = "v1beta3";
-const betaTypeVersionMarket = "v1beta4";
 
 export async function getChainStats() {
   const result = await cacheResponse(

apps/api/src/types/rest/cosmosTransactionResponse.ts

@@ -0,0 +1,147 @@
+export type RestCosmostTransactionResponse = {
+  tx: {
+    body: {
+      messages: {
+        "@type": string;
+        client_id: string;
+        header: {
+          "@type": string;
+          signed_header: {
+            header: {
+              version: {
+                block: string;
+                app: string;
+              };
+              chain_id: string;
+              height: string;
+              time: string;
+              last_block_id: {
+                hash: string;
+                part_set_header: {
+                  total: number;
+                  hash: string;
+                };
+              };
+              last_commit_hash: string;
+              data_hash: string;
+              validators_hash: string;
+              next_validators_hash: string;
+              consensus_hash: string;
+              app_hash: string;
+              last_results_hash: string;
+              evidence_hash: string;
+              proposer_address: string;
+            };
+            commit: {
+              height: string;
+              round: number;
+              block_id: {
+                hash: string;
+                part_set_header: {
+                  total: number;
+                  hash: string;
+                };
+              };
+              signatures: {
+                block_id_flag: string;
+                validator_address: string;
+                timestamp: string;
+                signature: string;
+              }[];
+            };
+          };
+        };
+      }[];
+    };
+    auth_info: {
+      signer_infos: [
+        {
+          public_key: {
+            "@type": string;
+            key: string;
+          };
+          mode_info: {
+            single: {
+              mode: string;
+            };
+          };
+          sequence: string;
+        }
+      ];
+      fee: {
+        amount: [
+          {
+            denom: string;
+            amount: string;
+          }
+        ];
+        gas_limit: string;
+        payer: string;
+        granter: string;
+      };
+    };
+    signatures: string[];
+  };
+  tx_response: {
+    height: string;
+    txhash: string;
+    codespace: string;
+    code: number;
+    data: string;
+    raw_log: string;
+    logs: {
+      msg_index: number;
+      log: string;
+      events: {
+        type: string;
+        attributes: {
+          key: string;
+          value: string;
+        }[];
+      }[];
+    }[];
+    info: string;
+    gas_wanted: string;
+    gas_used: string;
+    tx: {
+      type: string;
+      value: {
+        msg: {
+          type: string;
+          value: {
+            from_address: string;
+            to_address: string;
+            amount: {
+              denom: string;
+              amount: string;
+            }[];
+          };
+        }[];
+        fee: {
+          amount: {
+            denom: string;
+            amount: string;
+          }[];
+          gas: string;
+        };
+        signatures: {
+          pub_key: {
+            type: string;
+            value: string;
+          };
+          signature: string;
+        }[];
+        memo: string;
+      };
+    };
+    timestamp: string;
+    events: {
+      type: string;
+      attributes: {
+        key: string;
+        value: string;
+        index: boolean;
+      }[];
+    }[];
+  };
+};

apps/api/src/types/transactions.ts

@@ -0,0 +1,19 @@
+export type ApiTransactionResponse = {
+  height: number | string;
+  datetime: Date;
+  hash: string;
+  multisigThreshold?: number;
+  signers?: string[];
+  isSuccess: boolean;
+  error: string | null;
+  gasUsed: number;
+  gasWanted: number;
+  fee: number;
+  memo: string;
+  messages: {
+    id: string;
+    type: string;
+    data: unknown;
+    relatedDeploymentId: string | null;
+  }[];
+};

apps/api/src/utils/constants.ts

@@ -14,3 +14,13 @@ export const openApiExampleAddress = "akash13265twfqejnma6cc93rw5dxk4cldyz2zyy8c
 export const openApiExampleProviderAddress = "akash18ga02jzaq8cw52anyhzkwta5wygufgu6zsz6xc";
 export const openApiExampleTransactionHash = "A19F1950D97E576F0D7B591D71A8D0366AA8BA0A7F3DA76F44769188644BE9EB";
 export const openApiExampleValidatorAddress = "akashvaloper14mt78hz73d9tdwpdvkd59ne9509kxw8yj7qy8f";
+
+export const defaultNodeUrlMapping: { [key: string]: string } = {
+  mainnet: "https://api.akashnet.net:443",
+  sandbox: "https://api.sandbox-01.aksh.pw",
+  testnet: "https://api.testnet-02.aksh.pw"
+};
+
+export const apiNodeUrl = env.RestApiNodeUrl ?? defaultNodeUrlMapping[env.Network] ?? defaultNodeUrlMapping.mainnet;
+export const betaTypeVersion = "v1beta3";
+export const betaTypeVersionMarket = "v1beta4";

apps/deploy-web/src/context/WalletProvider/WalletProvider.tsx

@@ -2,7 +2,7 @@
 import React, { useRef } from "react";
 import { useState, useEffect } from "react";
 import { SigningStargateClient } from "@cosmjs/stargate";
-import { uAktDenom } from "@src/utils/constants";
+import { STATS_APP_URL, uAktDenom } from "@src/utils/constants";
 import { EncodeObject } from "@cosmjs/proto-signing";
 import { TransactionModal } from "@src/components/layout/TransactionModal";
 import { event } from "nextjs-google-analytics";
@@ -325,7 +325,7 @@ export function useWallet() {
 
 const TransactionSnackbarContent = ({ snackMessage, transactionHash }) => {
   const selectedNetwork = useSelectedNetwork();
-  const txUrl = transactionHash && `https://stats.akash.network/transactions/${transactionHash}?network=${selectedNetwork.id}`;
+  const txUrl = transactionHash && `${STATS_APP_URL}/transactions/${transactionHash}?network=${selectedNetwork.id}`;
 
   return (
     <>

apps/deploy-web/src/utils/constants.ts

@@ -24,13 +24,15 @@ export enum RouteStepKeys {
 const productionMainnetApiUrl = "https://api.cloudmos.io";
 const productionTestnetApiUrl = "https://api-testnet.cloudmos.io";
 const productionSandboxApiUrl = "https://api-sandbox.cloudmos.io";
+const productionStatsAppUrl = "https://stats.akash.network";
 const productionHostnames = ["deploy.cloudmos.io", "console.akash.network", "staging-console.akash.network", "beta.cloudmos.io"];
 
 export const isProd = process.env.NODE_ENV === "production";
 export const isMaintenanceMode = process.env.MAINTENANCE_MODE === "true";
 export const BASE_API_MAINNET_URL = getApiMainnetUrl();
 export const BASE_API_TESTNET_URL = getApiTestnetUrl();
 export const BASE_API_SANDBOX_URL = getApiSandboxUrl();
+export const STATS_APP_URL = getStatsAppUrl();
 
 export const BASE_API_URL = getApiUrl();
 
@@ -100,6 +102,13 @@ function getApiUrl() {
   return "http://localhost:3080";
 }
 
+function getStatsAppUrl() {
+  if (process.env.STATS_APP_URL) return process.env.STATS_APP_URL;
+  if (typeof window === "undefined") return "http://localhost:3001";
+  if (productionHostnames.includes(window.location?.hostname)) return productionStatsAppUrl;
+  return "http://localhost:3001";
+}
+
 function getProviderProxyHttpUrl() {
   if (typeof window === "undefined") return "http://localhost:3040";
   if (window.location?.hostname === "deploybeta.cloudmos.io") return "https://deployproxybeta.cloudmos.io";

apps/stats-web/.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals",
+  "extends": "next/core-web-vitals"
 }

apps/stats-web/src/app/addresses/[address]/deployments/[dseq]/DeploymentInfo.tsx

@@ -8,15 +8,14 @@ import { Title } from "@/components/Title";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent } from "@/components/ui/card";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { useFriendlyMessageType } from "@/hooks/useFriendlyMessageType";
 import { getSplitText } from "@/hooks/useShortText";
 import { roundDecimal, udenomToDenom } from "@/lib/mathHelpers";
 import { bytesToShrink } from "@/lib/unitUtils";
 import { UrlService } from "@/lib/urlUtils";
-import { cn } from "@/lib/utils";
 import { DeploymentDetail } from "@/types";
 import Link from "next/link";
 import { FormattedNumber, FormattedTime } from "react-intl";
+import { EventRow } from "./EventRow";
 
 interface IProps {
   deployment: DeploymentDetail;
@@ -90,17 +89,7 @@ export function DeploymentInfo({ deployment }: IProps) {
 
               <TableBody>
                 {deployment.events.map((event, i) => (
-                  <TableRow key={`${event.txHash}_${i}`}>
-                    <TableCell>
-                      <Link href={UrlService.transaction(event.txHash)} target="_blank">
-                        {getSplitText(event.txHash, 6, 6)}
-                      </Link>
-                    </TableCell>
-                    <TableCell align="center">{useFriendlyMessageType(event.type)}</TableCell>
-                    <TableCell align="center">
-                      <FormattedTime value={event.date} day="2-digit" month="2-digit" year="numeric" />
-                    </TableCell>
-                  </TableRow>
+                  <EventRow key={`${event.txHash}_${i}`} event={event} />
                 ))}
               </TableBody>
             </Table>

apps/stats-web/src/app/addresses/[address]/deployments/[dseq]/EventRow.tsx

@@ -0,0 +1,30 @@
+import { TableCell, TableRow } from "@/components/ui/table";
+import { useFriendlyMessageType } from "@/hooks/useFriendlyMessageType";
+import { getSplitText } from "@/hooks/useShortText";
+import { UrlService } from "@/lib/urlUtils";
+import Link from "next/link";
+import { FormattedTime } from "react-intl";
+
+export const EventRow = ({
+  event
+}: React.PropsWithChildren<{
+  event: {
+    txHash: string;
+    date: string;
+    type: string;
+  };
+}>) => {
+  return (
+    <TableRow>
+      <TableCell>
+        <Link href={UrlService.transaction(event.txHash)} target="_blank">
+          {getSplitText(event.txHash, 6, 6)}
+        </Link>
+      </TableCell>
+      <TableCell align="center">{useFriendlyMessageType(event.type)}</TableCell>
+      <TableCell align="center">
+        <FormattedTime value={event.date} day="2-digit" month="2-digit" year="numeric" />
+      </TableCell>
+    </TableRow>
+  );
+};

apps/stats-web/src/app/addresses/[address]/transactions/TransactionTypeCell.tsx

@@ -0,0 +1,22 @@
+import { Badge } from "@/components/ui/badge";
+import { useFriendlyMessageType } from "@/hooks/useFriendlyMessageType";
+import { TransactionRowType } from "@/lib/zod/transactionRow";
+import { Row } from "@tanstack/react-table";
+
+export const TransactionTypeCell = ({
+  row
+}: React.PropsWithChildren<{
+  row: Row<TransactionRowType>;
+}>) => {
+  const friendlyMessage = useFriendlyMessageType(row.original.messages[0].type);
+  const firstMessageType = row.original.messages[0].isReceiver ? "Receive" : friendlyMessage;
+
+  return (
+    <>
+      <Badge className="h-4 max-w-[120px] bg-primary">
+        <span className="truncate">{firstMessageType}</span>
+      </Badge>
+      <span className="text-xs">{row.original.messages.length > 1 ? " +" + (row.original.messages.length - 1) : ""}</span>
+    </>
+  );
+};