unify callbacks naming, add tx watcher config

CHANGELOG.md

@@ -1,3 +1,8 @@
+### [0.17.0](https://github.com/useElven/core/releases/tag/v0.17.0) (2024-02-25)
+- unify callbacks naming (could be a breaking change, see [docs](https://www.useelven.com/docs/sdk-reference.html) for updates)
+- add transaction watcher timeout and patience configuration
+- update dependencies
+
 ### [0.16.0](https://github.com/useElven/core/releases/tag/v0.16.0) (2024-01-11)
 - allow `useMultiTokenTransfer` to call the endpoint
 - some breaking changes when it comes to `useTokenTransfer` and `useMultiTokenTransfer` types and logic (check [docs](https://www.useElven.com))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useelven/core",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Core React hooks for MultiversX DApps",
   "license": "MIT",
   "author": "Julian Ćwirko <julian.io>",
@@ -65,31 +65,31 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@multiversx/sdk-core": "12.18.0",
+    "@multiversx/sdk-core": "12.18.1",
     "@multiversx/sdk-extension-provider": "3.0.0",
     "@multiversx/sdk-hw-provider": "6.4.0",
     "@multiversx/sdk-native-auth-client": "1.0.7",
-    "@multiversx/sdk-network-providers": "2.2.1",
+    "@multiversx/sdk-network-providers": "2.3.0",
     "@multiversx/sdk-wallet-connect-provider": "4.1.0",
-    "@multiversx/sdk-web-wallet-provider": "3.1.0",
+    "@multiversx/sdk-web-wallet-provider": "3.2.1",
     "lodash.clonedeep": "4.5.0",
-    "swr": "2.2.4",
-    "valtio": "1.13.0"
+    "swr": "2.2.5",
+    "valtio": "1.13.1"
   },
   "devDependencies": {
     "@types/lodash.clonedeep": "4.5.9",
-    "@types/node": "20.11.0",
-    "@types/react": "18.2.47",
-    "@typescript-eslint/eslint-plugin": "6.18.1",
-    "@typescript-eslint/parser": "6.18.1",
-    "eslint": "8.56.0",
+    "@types/node": "20.11.20",
+    "@types/react": "18.2.58",
+    "@typescript-eslint/eslint-plugin": "7.0.2",
+    "@typescript-eslint/parser": "7.0.2",
+    "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "prettier": "3.1.1",
+    "prettier": "3.2.5",
     "rimraf": "5.0.5",
-    "tsup": "8.0.1",
+    "tsup": "8.0.2",
     "typescript": "5.3.3"
   },
   "peerDependencies": {

src/config/network.ts

@@ -23,6 +23,8 @@ export const networkConfig: Record<string, NetworkType> = {
     explorerAddress: 'https://devnet-explorer.multiversx.com',
     IPFSGateway: 'https://devnet-media.multiversx.com/nfts/asset/',
     apiTimeout: '4000',
+    txWatcherTimeout: '90000',
+    txWatcherPatience: '0',
   },
 
   testnet: {
@@ -43,6 +45,8 @@ export const networkConfig: Record<string, NetworkType> = {
     explorerAddress: 'https://testnet-explorer.multiversx.com',
     IPFSGateway: 'https://testnet-media.multiversx.com/nfts/asset/',
     apiTimeout: '4000',
+    txWatcherTimeout: '90000',
+    txWatcherPatience: '0',
   },
 
   mainnet: {
@@ -63,5 +67,7 @@ export const networkConfig: Record<string, NetworkType> = {
     explorerAddress: 'https://explorer.multiversx.com',
     IPFSGateway: 'https://media.multiversx.com/nfts/asset/',
     apiTimeout: '4000',
+    txWatcherTimeout: '90000',
+    txWatcherPatience: '0',
   },
 };

src/hooks/common-helpers/signAndSendTxOperations.ts

@@ -60,11 +60,20 @@ export const postSendTxOperations = async (
   setTransaction: Dispatch<SetStateAction<Transaction | null>>,
   setTxResult: Dispatch<SetStateAction<ITransactionOnNetwork | null>>,
   apiNetworkProvider: NetworkState['apiNetworkProvider'],
-  cb?: (params: TransactionCallbackParams) => void
+  cb?: (params: TransactionCallbackParams) => void,
+  txWatcherTimeout?: string,
+  txWatcherPatience?: string
 ) => {
   setTransaction(signedTx);
   if (apiNetworkProvider) {
-    const transactionWatcher = new TransactionWatcher(apiNetworkProvider);
+    const transactionWatcher = new TransactionWatcher(apiNetworkProvider, {
+      ...(txWatcherTimeout
+        ? { timeoutMilliseconds: parseInt(txWatcherTimeout) }
+        : {}),
+      ...(txWatcherPatience
+        ? { patienceMilliseconds: parseInt(txWatcherPatience) }
+        : {}),
+    });
     const txResult = await transactionWatcher.awaitCompleted(signedTx);
     setTransaction(signedTx);
     setTxResult(txResult);
@@ -100,14 +109,11 @@ export const checkNeedsGuardianSigning = (
   return true;
 };
 
-const getCallbackUrl = (
-  ongoingTxId?: string,
-  webWalletRedirectUrl?: string
-) => {
+const getCallbackUrl = (ongoingTxId?: string, callbackUrl?: string) => {
   const currentUrl = window?.location?.href;
   const clbck =
-    webWalletRedirectUrl && window
-      ? `${window.location.origin}${webWalletRedirectUrl}`
+    callbackUrl && window
+      ? `${window.location.origin}${callbackUrl}`
       : currentUrl;
   if (!ongoingTxId) return clbck;
 
@@ -120,14 +126,14 @@ const getCallbackUrl = (
 export const sendTxToGuardian = async (
   signedTx: Transaction,
   walletAddress?: string,
-  webWalletRedirectUrl?: string,
+  callbackUrl?: string,
   ongoingTxId?: string
 ) => {
   const webWalletProvider = new WalletProvider(
     `${walletAddress}${DAPP_INIT_ROUTE}`
   );
 
-  const clbck = getCallbackUrl(ongoingTxId, webWalletRedirectUrl);
+  const clbck = getCallbackUrl(ongoingTxId, callbackUrl);
 
   const alteredCallbackUrl = new URL(clbck);
   alteredCallbackUrl.searchParams.set(
@@ -149,11 +155,13 @@ export const signAndSendTxOperations = async (
   setTxResult: Dispatch<SetStateAction<ITransactionOnNetwork | null>>,
   setError: Dispatch<SetStateAction<string>>,
   setPending: Dispatch<SetStateAction<boolean>>,
-  webWalletRedirectUrl?: string,
+  callbackUrl?: string,
   cb?: (params: TransactionCallbackParams) => void,
   activeGuardianAddress?: string,
   walletAddress?: string,
-  ongoingTxId?: string
+  ongoingTxId?: string,
+  txWatcherTimeout?: string,
+  txWatcherPatience?: string
 ) => {
   let signedTx = guardianPreSignTxOperations(
     tx,
@@ -165,7 +173,7 @@ export const signAndSendTxOperations = async (
     if (dappProvider instanceof WalletProvider) {
       await dappProvider.signTransaction(tx, {
         callbackUrl: encodeURIComponent(
-          getCallbackUrl(ongoingTxId, webWalletRedirectUrl)
+          getCallbackUrl(ongoingTxId, callbackUrl)
         ),
       });
     }
@@ -192,7 +200,7 @@ export const signAndSendTxOperations = async (
         await sendTxToGuardian(
           signedTx,
           walletAddress,
-          webWalletRedirectUrl,
+          callbackUrl,
           ongoingTxId
         );
 
@@ -206,7 +214,9 @@ export const signAndSendTxOperations = async (
         setTransaction,
         setTxResult,
         apiNetworkProvider,
-        cb
+        cb,
+        txWatcherTimeout,
+        txWatcherPatience
       );
     }
   } catch (e) {

src/hooks/common-helpers/useWebWalletXaliasLogin.tsx

@@ -43,7 +43,7 @@ export const useWebWalletXaliasLogin = (
     const callbackUrl: string =
       typeof window !== 'undefined'
         ? encodeURIComponent(
-            `${window.location.origin}${params?.callbackRoute || '/'}`
+            `${window.location.origin}${params?.callbackUrl || '/'}`
           )
         : '/';
     const providerLoginData = {

src/hooks/useConfig.tsx

@@ -16,6 +16,8 @@ export const useConfig = () => {
     apiAddress,
     explorerAddress,
     apiTimeout,
+    txWatcherTimeout,
+    txWatcherPatience,
     IPFSGateway,
     walletConnectV2RelayAddresses,
     walletConnectV2ProjectId,
@@ -35,6 +37,8 @@ export const useConfig = () => {
     apiAddress,
     explorerAddress,
     apiTimeout,
+    txWatcherTimeout,
+    txWatcherPatience,
     IPFSGateway,
     walletConnectV2RelayAddresses,
     walletConnectV2ProjectId,

src/hooks/useExtensionLogin.tsx

@@ -46,7 +46,7 @@ export const useExtensionLogin = (params?: Login) => {
       const callbackUrl: string =
         typeof window !== 'undefined'
           ? encodeURIComponent(
-              `${window.location.origin}${params?.callbackRoute}`
+              `${window.location.origin}${params?.callbackUrl}`
             )
           : '/';
       const providerLoginData = {
@@ -119,7 +119,7 @@ export const useExtensionLogin = (params?: Login) => {
         setLoginInfoState('accessToken', accessToken);
       }
 
-      optionalRedirect(params?.callbackRoute);
+      optionalRedirect(params?.callbackUrl);
     } catch (e) {
       const err = errorParse(e);
       setLoggingInState('error', `Error logging in ${err}`);

src/hooks/useLedgerLogin.tsx

@@ -102,7 +102,7 @@ export const useLedgerLogin = (params?: Login) => {
 
       setLoginInfoState('expires', getNewLoginExpiresTimestamp());
 
-      optionalRedirect(params?.callbackRoute);
+      optionalRedirect(params?.callbackUrl);
     } catch (e) {
       const err = errorParse(e);
       setLoggingInState('error', `Error logging in ${err}`);

src/hooks/useLogout.tsx

@@ -7,8 +7,8 @@ import { useNetwork } from './useNetwork';
 
 export interface Logout {
   dappProvider?: DappProvider;
-  callbackRoute?: string;
-  redirectFn?: (callbackRoute?: string) => void;
+  callbackUrl?: string;
+  redirectFn?: (callbackUrl?: string) => void;
 }
 
 export const useLogout = () => {
@@ -26,11 +26,11 @@ export const useLogout = () => {
         setLoggingInState('pending', true);
         await dappProvider.logout();
 
-        if (params?.callbackRoute) {
+        if (params?.callbackUrl) {
           if (typeof params?.redirectFn === 'function') {
-            params?.redirectFn(params?.callbackRoute);
+            params?.redirectFn(params?.callbackUrl);
           } else if (typeof window !== 'undefined') {
-            window.location.href = params?.callbackRoute;
+            window.location.href = params?.callbackUrl;
           }
         }
 

src/hooks/useMobileAppLogin.tsx

@@ -64,7 +64,7 @@ export const useMobileAppLogin = (params?: Login) => {
 
   const handleOnLogout = () => {
     logout({
-      callbackRoute: params?.callbackRoute,
+      callbackUrl: params?.callbackUrl,
       dappProvider: dappProviderRef?.current,
     });
   };
@@ -130,7 +130,7 @@ export const useMobileAppLogin = (params?: Login) => {
           WcOnLogin(
             networkStateSnap.apiNetworkProvider as ApiNetworkProvider,
             dappProviderRef.current,
-            params?.callbackRoute
+            params?.callbackUrl
           );
         }
       },

src/hooks/useMultiTokenTransfer.tsx

@@ -35,14 +35,14 @@ export interface MultiTokenTransferArgs {
 
 export interface MultiTokenTransferHookProps {
   id?: TransactionArgs['id'];
-  webWalletRedirectUrl?: TransactionArgs['webWalletRedirectUrl'];
+  callbackUrl?: TransactionArgs['callbackUrl'];
   cb?: TransactionArgs['cb'];
 }
 
 export const useMultiTokenTransfer = (
-  { id, webWalletRedirectUrl, cb }: MultiTokenTransferHookProps = {
+  { id, callbackUrl, cb }: MultiTokenTransferHookProps = {
     id: undefined,
-    webWalletRedirectUrl: undefined,
+    callbackUrl: undefined,
     cb: undefined,
   }
 ) => {
@@ -52,7 +52,7 @@ export const useMultiTokenTransfer = (
 
   const { triggerTx, pending, transaction, txResult, error } = useTransaction({
     id,
-    webWalletRedirectUrl,
+    callbackUrl,
     cb,
   });
 

src/hooks/useScDeploy.tsx

@@ -12,7 +12,7 @@ import { errorParse } from '../utils/errorParse';
 
 export interface ScDeployHookProps {
   id?: TransactionArgs['id'];
-  webWalletRedirectUrl?: TransactionArgs['webWalletRedirectUrl'];
+  callbackUrl?: TransactionArgs['callbackUrl'];
   cb?: TransactionArgs['cb'];
 }
 
@@ -24,9 +24,9 @@ export interface ScDeployArgs {
 }
 
 export const useScDeploy = (
-  { id, webWalletRedirectUrl, cb }: ScDeployHookProps = {
+  { id, callbackUrl, cb }: ScDeployHookProps = {
     id: undefined,
-    webWalletRedirectUrl: undefined,
+    callbackUrl: undefined,
     cb: undefined,
   }
 ) => {
@@ -35,7 +35,7 @@ export const useScDeploy = (
 
   const { triggerTx, pending, transaction, txResult, error } = useTransaction({
     id,
-    webWalletRedirectUrl,
+    callbackUrl,
     cb,
   });
 

src/hooks/useTokenTransfer.tsx

@@ -21,7 +21,7 @@ const NETWORK_ERROR_MSG =
 
 export interface ScTokenTransferHookProps {
   id?: TransactionArgs['id'];
-  webWalletRedirectUrl?: TransactionArgs['webWalletRedirectUrl'];
+  callbackUrl?: TransactionArgs['callbackUrl'];
   cb?: TransactionArgs['cb'];
 }
 
@@ -36,9 +36,9 @@ export interface ScTokenTransferArgs {
 }
 
 export const useTokenTransfer = (
-  { id, webWalletRedirectUrl, cb }: ScTokenTransferHookProps = {
+  { id, callbackUrl, cb }: ScTokenTransferHookProps = {
     id: undefined,
-    webWalletRedirectUrl: undefined,
+    callbackUrl: undefined,
     cb: undefined,
   }
 ) => {
@@ -48,7 +48,7 @@ export const useTokenTransfer = (
 
   const { triggerTx, pending, transaction, txResult, error } = useTransaction({
     id,
-    webWalletRedirectUrl,
+    callbackUrl,
     cb,
   });