vitwit · Hemanthghs · Sep 2, 2024 · Sep 2, 2024
diff --git a/frontend/src/app/(routes)/cosmwasm/components/tx-status/DialogTxExecuteStatus.tsx b/frontend/src/app/(routes)/cosmwasm/components/tx-status/DialogTxExecuteStatus.tsx
@@ -13,7 +13,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 const DialogTxExecuteStatus = ({ chainID }: { chainID: string }) => {
   const { getChainInfo, getDenomInfo } = useGetChainInfo();
-  const { explorerTxHashEndpoint } = getChainInfo(chainID);
+  const { explorerTxHashEndpoint, chainName } = getChainInfo(chainID);
   const {
     decimals = 0,
     displayDenom = '',
@@ -54,14 +54,19 @@ const DialogTxExecuteStatus = ({ chainID }: { chainID: string }) => {
           src={txResponse?.code === 0 ? TXN_SUCCESS_ICON : TXN_FAILED_ICON}
           height={60}
           width={60}
-          alt={txResponse?.code === 0 ? 'Transaction Successful' : 'Transaction Failed'}
+          alt={
+            txResponse?.code === 0
+              ? 'Transaction Successful'
+              : 'Transaction Failed'
+          }
         />
       </div>
       <div className="w-full">
         <TxnStatus
           explorer={explorerTxHashEndpoint || ''}
           txHash={txResponse?.transactionHash || ''}
           txSuccess={txResponse?.code === 0}
+          chainName={chainName}
         />
         <div className="divider-line mt-2 mb-6"></div>
         <div className="space-y-6">

diff --git a/frontend/src/app/(routes)/cosmwasm/components/tx-status/DialogTxInstantiateStatus.tsx b/frontend/src/app/(routes)/cosmwasm/components/tx-status/DialogTxInstantiateStatus.tsx
@@ -13,7 +13,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 const DialogTxInstantiateStatus = ({ chainID }: { chainID: string }) => {
   const { getChainInfo, getDenomInfo } = useGetChainInfo();
-  const { explorerTxHashEndpoint } = getChainInfo(chainID);
+  const { explorerTxHashEndpoint, chainName } = getChainInfo(chainID);
   const {
     decimals = 0,
     displayDenom = '',
@@ -54,14 +54,19 @@ const DialogTxInstantiateStatus = ({ chainID }: { chainID: string }) => {
           src={txResponse?.code === 0 ? TXN_SUCCESS_ICON : TXN_FAILED_ICON}
           height={60}
           width={60}
-          alt={txResponse?.code === 0 ? 'Transaction Successful' : 'Transaction Failed'}
+          alt={
+            txResponse?.code === 0
+              ? 'Transaction Successful'
+              : 'Transaction Failed'
+          }
         />
       </div>
       <div className="w-full">
         <TxnStatus
           explorer={explorerTxHashEndpoint || ''}
           txHash={txResponse?.transactionHash || ''}
           txSuccess={txResponse?.code === 0}
+          chainName={chainName}
         />
         <div className="divider-line mt-2 mb-6"></div>
         <div className="space-y-6">

diff --git a/frontend/src/app/(routes)/cosmwasm/components/tx-status/DialogTxUploadCodeStatus.tsx b/frontend/src/app/(routes)/cosmwasm/components/tx-status/DialogTxUploadCodeStatus.tsx
@@ -13,7 +13,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 const DialogTxUploadCodeStatus = ({ chainID }: { chainID: string }) => {
   const { getChainInfo, getDenomInfo } = useGetChainInfo();
-  const { explorerTxHashEndpoint } = getChainInfo(chainID);
+  const { explorerTxHashEndpoint, chainName } = getChainInfo(chainID);
   const {
     decimals = 0,
     displayDenom = '',
@@ -54,14 +54,19 @@ const DialogTxUploadCodeStatus = ({ chainID }: { chainID: string }) => {
           src={txResponse?.code === 0 ? TXN_SUCCESS_ICON : TXN_FAILED_ICON}
           height={60}
           width={60}
-          alt={txResponse?.code === 0 ? 'Transaction Successful' : 'Transaction Failed'}
+          alt={
+            txResponse?.code === 0
+              ? 'Transaction Successful'
+              : 'Transaction Failed'
+          }
         />
       </div>
       <div className="w-full">
         <TxnStatus
           explorer={explorerTxHashEndpoint || ''}
           txHash={txResponse?.transactionHash || ''}
           txSuccess={txResponse?.code === 0}
+          chainName={chainName}
         />
         <div className="divider-line mt-2 mb-6"></div>
         <div className="space-y-6">

diff --git a/frontend/src/app/(routes)/transactions/history/SearchTransaction.tsx b/frontend/src/app/(routes)/transactions/history/SearchTransaction.tsx
@@ -0,0 +1,100 @@
+import { useAppDispatch, useAppSelector } from '@/custom-hooks/StateHooks';
+import { getAnyChainTransaction } from '@/store/features/recent-transactions/recentTransactionsSlice';
+import React, { useEffect, useState } from 'react';
+import SearchTransactionHash from './[network]/components/SearchTransactionHash';
+import { TxStatus } from '@/types/enums';
+import { parseTxnData } from '@/utils/util';
+import Transaction from './[network]/components/Transaction';
+import useGetChainInfo from '@/custom-hooks/useGetChainInfo';
+import { CircularProgress } from '@mui/material';
+
+const SearchTransaction = () => {
+  const dispatch = useAppDispatch();
+  const { getChainInfo } = useGetChainInfo();
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const handleSearchQueryChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+  };
+
+  const handleClearSearch = () => {
+    setSearchQuery('');
+  };
+
+  const onSearch = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (searchQuery) dispatch(getAnyChainTransaction({ txhash: searchQuery }));
+  };
+
+  const loading = useAppSelector(
+    (state) => state.recentTransactions.txn?.status
+  );
+
+  const txnResult = useAppSelector(
+    (state) => state.recentTransactions.txn?.data?.[0]
+  );
+  const { txHash = '' } = txnResult ? parseTxnData(txnResult) : {};
+
+  const [chainID, setChainID] = useState('');
+  const { chainName } = getChainInfo(chainID);
+
+  useEffect(() => {
+    if (txnResult) {
+      setChainID(txnResult.chain_id);
+    }
+  }, [txnResult]);
+
+  return (
+    <div className="w-full">
+      <form onSubmit={onSearch} className="flex gap-6 items-center">
+        <SearchTransactionHash
+          searchQuery={searchQuery}
+          handleSearchQueryChange={handleSearchQueryChange}
+          handleClearSearch={handleClearSearch}
+        />
+        <button type="submit" className="primary-btn">
+          Search
+        </button>
+      </form>
+
+      {loading === TxStatus.PENDING ? (
+        <div className="flex-center-center gap-2 my-[25%]">
+          <CircularProgress sx={{ color: 'white' }} size={18} />
+          <div className="italic font-extralight text-[14px]">
+            Fetching transaction info <span className="dots-flashing"></span>
+          </div>
+        </div>
+      ) : (
+        <>
+          {txnResult && chainID && chainName ? (
+            <Transaction
+              hash={txHash}
+              chainName={chainName}
+              chainID={chainID}
+              isSearchPage
+            />
+          ) : null}
+        </>
+      )}
+      <TransactionNotFound />
+    </div>
+  );
+};
+
+export default SearchTransaction;
+
+const TransactionNotFound = () => {
+  const txSearchError = useAppSelector(
+    (state) => state.recentTransactions.txn.error
+  );
+
+  if (txSearchError)
+    return (
+      <div className="w-full my-[25%]">
+        <p className="text-h2 font-bold w-fit mx-auto">
+          Sorry, the transaction you&apos;re looking for is not found.
+        </p>
+      </div>
+    );
+  return <></>;
+};
diff --git a/...tend/src/app/(routes)/transactions/history/[network]/components/SearchTransactionHash.tsx b/...tend/src/app/(routes)/transactions/history/[network]/components/SearchTransactionHash.tsx
@@ -4,25 +4,38 @@ import React from 'react';
 const SearchTransactionHash = ({
   searchQuery,
   handleSearchQueryChange,
+  handleClearSearch,
 }: {
   searchQuery: string;
   handleSearchQueryChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleClearSearch?: () => void;
 }) => {
   return (
     <div className="search-Txn-field">
       <div className="flex gap-2 items-center flex-1">
         <Image src="/icons/search-icon.svg" height={24} width={24} alt="" />
-        <input
-          type="text"
-          placeholder="Search by Transaction Hash...."
-          value={searchQuery}
-          onChange={handleSearchQueryChange}
-          className="search-Txn-input text-[14px]"
-          autoFocus={true}
-        />
+        <div className="flex gap-2 items-center flex-1">
+          <input
+            type="text"
+            placeholder="Search by Transaction Hash...."
+            value={searchQuery}
+            onChange={handleSearchQueryChange}
+            className="search-Txn-input text-[14px] flex-1"
+            autoFocus={true}
+          />
+          {searchQuery && handleClearSearch && (
+            <button
+              type="button"
+              onClick={handleClearSearch}
+              className="text-white opacity-50"
+            >
+              &#x2715;
+            </button>
+          )}
+        </div>
       </div>
     </div>
   );
 };
 
-export default SearchTransactionHash;
+export default SearchTransactionHash;
diff --git a/frontend/src/app/(routes)/transactions/history/[network]/components/Transaction.tsx b/frontend/src/app/(routes)/transactions/history/[network]/components/Transaction.tsx
@@ -8,7 +8,7 @@ import NumberFormat from '@/components/common/NumberFormat';
 import { get } from 'lodash';
 import useGetChainInfo from '@/custom-hooks/useGetChainInfo';
 import TxMsg from './TxMsg';
-import { parseTxnData } from '@/utils/util';
+import { getTxnURL, parseTxnData } from '@/utils/util';
 import { buildMessages } from '@/utils/transaction';
 import { txRepeatTransaction } from '@/store/features/recent-transactions/recentTransactionsSlice';
 import DialogLoader from '@/components/common/DialogLoader';
@@ -18,15 +18,17 @@ const Transaction = ({
   chainName,
   hash,
   chainID,
+  isSearchPage = false,
 }: {
   chainName: string;
   hash: string;
   chainID: string;
+  isSearchPage?: boolean;
 }) => {
   const dispatch = useAppDispatch();
   const { getChainInfo, getDenomInfo } = useGetChainInfo();
   const basicChainInfo = getChainInfo(chainID);
-  const { chainLogo } = basicChainInfo;
+  const { chainLogo, explorerTxHashEndpoint } = basicChainInfo;
 
   const txnRepeatStatus = useAppSelector(
     (state) => state.recentTransactions?.txnRepeat?.status
@@ -76,6 +78,9 @@ const Transaction = ({
         status={success ? 'success' : 'failed'}
         onRepeatTxn={onRepeatTxn}
         disableAction={disableAction}
+        goBackUrl={`/transactions/history/${chainName.toLowerCase()}`}
+        isSearchPage={isSearchPage}
+        mintscanURL={getTxnURL(explorerTxHashEndpoint, hash || '')}
       />
       <div className="flex gap-10 w-full">
         <div className="flex-1 flex w-full">
@@ -91,7 +96,7 @@ const Transaction = ({
                     alt="network-logo"
                     className="w-6 h-6"
                   />
-                  <p className="text-h2 font-bold">{chainName}</p>
+                  <p className="text-h2 font-bold capitalize">{chainName}</p>
                 </div>
               </div>
               <div className="txn-history-card">

diff --git a/frontend/src/app/(routes)/transactions/history/[network]/components/TransactionCard.tsx b/frontend/src/app/(routes)/transactions/history/[network]/components/TransactionCard.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import Copy from '@/components/common/Copy';
-import { getTypeURLName, parseTxnData, shortenString } from '@/utils/util';
+import { parseTxnData, shortenString } from '@/utils/util';
 import NewTxnMsg from '@/components/NewTxnMsg';
 import Link from 'next/link';
 import { useAppDispatch } from '@/custom-hooks/StateHooks';
-import { buildMessages } from '@/utils/transaction';
+import { buildMessages, formattedMsgType } from '@/utils/transaction';
 import { txRepeatTransaction } from '@/store/features/recent-transactions/recentTransactionsSlice';
 import CustomButton from '@/components/common/CustomButton';
 import TxnTimeStamp from './TxnTimeStamp';
@@ -39,7 +39,7 @@ const TransactionCard = ({
           <div className="flex justify-between w-[70%]">
             <div className="flex items-center gap-1">
               <Link
-                className="capitalize"
+                className="capitalize hover:underline"
                 href={`/transactions/history/${basicChainInfo.chainName.toLowerCase()}/${txHash}`}
               >
                 <p className="text-b1">{shortenString(txHash, 24)}</p>
@@ -50,7 +50,7 @@ const TransactionCard = ({
               {txn?.messages?.map((msg, index) => (
                 <div key={index} className="txn-permission-card">
                   <span className="text-b1">
-                    {getTypeURLName(msg?.['@type'])}
+                    {formattedMsgType(msg?.['@type'])}
                   </span>
                 </div>
               ))}