show tx hash before finalizing, update dependencies

CHANGELOG.md

@@ -1,3 +1,7 @@
+### [7.5.0](https://github.com/ElvenTools/elven-tools-dapp/releases/tag/v7.5.0) (2024-02-25)
+- update useElven - changes in callback urls naming, configuration for tx watcher timeout and patience
+- add transaction hash in UI even when the transaction is not finalized yet
+
 ### [7.4.2](https://github.com/ElvenTools/elven-tools-dapp/releases/tag/v7.4.2) (2024-01-11)
 - update useElven and dependencies
 

components/MintForm.tsx

@@ -23,7 +23,8 @@ interface MintFormProps {
 
 export const MintForm: FC<MintFormProps> = ({ leftToMintForUser, cb }) => {
   const [amount, setAmount] = useState(1);
-  const { mint, pending, txResult, error } = useMintTransaction(cb);
+  const { mint, pending, transaction, txResult, error } =
+    useMintTransaction(cb);
   const { loginMethod } = useLoginInfo();
 
   const handleMint = useCallback(() => {
@@ -37,12 +38,12 @@ export const MintForm: FC<MintFormProps> = ({ leftToMintForUser, cb }) => {
 
   const getAdditionalPendingMessage = () => {
     if (loginMethod === LoginMethodsEnum.walletconnect) {
-      return 'Sign the transaction using xPortal mobile app. It will take some time to finish. You can always close this message. You will get the transaction hash when finished.';
+      return 'Sign the transaction using xPortal mobile app. It will take some time to finish. You can always close this message. You can check the transaction in the explorer.';
     }
     if (loginMethod === LoginMethodsEnum.ledger) {
-      return 'Sign the transaction using Ledger HW. It will take some time to finish. You can always close this message. You will get the transaction hash when finished.';
+      return 'Sign the transaction using Ledger HW. It will take some time to finish. You can always close this message. You can check the transaction in the explorer.';
     }
-    return 'It will take some time to finish. You can always close this message. You will get the transaction hash when finished.';
+    return 'It will take some time to finish. You can always close this message. You can check the transaction in the explorer.';
   };
 
   return (
@@ -83,6 +84,7 @@ export const MintForm: FC<MintFormProps> = ({ leftToMintForUser, cb }) => {
       <TransactionPendingModal
         isOpen={pending}
         successTxHash={txResult?.hash}
+        txHash={transaction?.getHash().hex()}
         txError={error}
         additionalMessage={getAdditionalPendingMessage()}
       />

components/core/TransactionPendingModal.tsx

@@ -18,6 +18,7 @@ interface TransactionPendingModalProps {
   isOpen: boolean;
   successTxHash?: string;
   txError?: string;
+  txHash?: string;
   additionalMessage?: string;
 }
 
@@ -29,6 +30,7 @@ export const TransactionPendingModal: FC<TransactionPendingModalProps> = ({
   isOpen = false,
   successTxHash,
   txError,
+  txHash,
   additionalMessage,
 }) => {
   const { explorerAddress } = useConfig();
@@ -81,6 +83,20 @@ export const TransactionPendingModal: FC<TransactionPendingModalProps> = ({
           <Text textAlign="center" fontWeight="semibold" fontSize="xl">
             {txTitle()}
           </Text>
+          {txHash && !successTxHash ? (
+            <Text
+              as="a"
+              textAlign="center"
+              textDecoration="underline"
+              display="inline-block"
+              width="100%"
+              mt={5}
+              href={`${explorerAddress}/transactions/${txHash}`}
+              target="_blank"
+            >
+              {shortenHash(txHash, 12)}
+            </Text>
+          ) : null}
 
           {!txError && (
             <Flex alignItems="center" justifyContent="center" mt={8}>

hooks/useMintTransaction.tsx

@@ -24,7 +24,9 @@ export function useMintTransaction(
     type: SCQueryType.NUMBER,
   });
 
-  const { pending, triggerTx, txResult, error } = useTransaction({ cb });
+  const { pending, triggerTx, transaction, txResult, error } = useTransaction({
+    cb,
+  });
 
   const mint = async (tokensAmount: number) => {
     const tokens = tokensAmount || 1;
@@ -73,6 +75,7 @@ export function useMintTransaction(
     pending,
     mint,
     txResult,
+    transaction,
     error,
   };
 }

next.config.js

@@ -33,14 +33,22 @@ const nextConfig = {
       {
         protocol: 'https',
         hostname: '**.elrond.com',
+        port: '',
       },
       {
         protocol: 'https',
         hostname: '**.multiversx.com',
+        port: '',
       },
       {
         protocol: 'https',
         hostname: '**.nftstorage.link',
+        port: '',
+      },
+      {
+        protocol: 'https',
+        hostname: 'nftstorage.link',
+        port: '',
       },
     ],
   },