Merge pull request #939 from multiversx/development

v2.21.1

CHANGELOG.md

@@ -6,6 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+## [[v2.21.1]](https://github.com/multiversx/mx-sdk-dapp/pull/939)] - 2023-09-29
+- [Added `getDefaultCallbackUrl` helper](https://github.com/multiversx/mx-sdk-dapp/pull/936)
+- [Return native auth token when refreshing the token](https://github.com/multiversx/mx-sdk-dapp/pull/938)
 
 ## [[v2.21.0]](https://github.com/multiversx/mx-sdk-dapp/pull/933)] - 2023-09-21
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp",
-  "version": "2.21.0",
+  "version": "2.21.1",
   "description": "A library to hold the main logic for a dapp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "GPL-3.0-or-later",

src/UI/SignTransactionsModals/components/DeviceConfirmationScreen.tsx

@@ -6,7 +6,7 @@ import {
   useSignTransactionsCommonData
 } from 'hooks';
 import { SignPropsType } from 'UI/SignTransactionsModals/types/signTransactionsModals.types';
-import { getWindowLocation } from 'utils/window/getWindowLocation';
+import { getDefaultCallbackUrl } from 'utils/window';
 import { ExtraConfirmationScreenPropsType } from './confirmationScreen.types';
 import {
   TransactionStatusToast,
@@ -49,8 +49,7 @@ export const DeviceConfirmationScreen = ({
     sessionId: transactionsToSign?.sessionId,
     transactions: transactionsToSign?.transactions ?? [],
     providerType,
-    callbackRoute:
-      transactionsToSign?.callbackRoute || getWindowLocation().pathname,
+    callbackRoute: transactionsToSign?.callbackRoute || getDefaultCallbackUrl(),
     className,
     verifyReceiverScam
   };

src/hooks/login/useExtensionLogin.ts

@@ -13,7 +13,8 @@ import {
 import { LoginMethodsEnum } from 'types/enums.types';
 import { getIsLoggedIn } from 'utils/getIsLoggedIn';
 import { optionalRedirect } from 'utils/internal';
-import { addOriginToLocationPath, getWindowLocation } from 'utils/window';
+import { addOriginToLocationPath } from 'utils/window';
+import { getDefaultCallbackUrl } from 'utils/window';
 import { useLoginService } from './useLoginService';
 
 export type UseExtensionLoginReturnType = [
@@ -54,9 +55,9 @@ export const useExtensionLogin = ({
         return;
       }
 
-      const { pathname } = getWindowLocation();
+      const defaultCallbackUrl = getDefaultCallbackUrl();
       const callbackUrl: string = encodeURIComponent(
-        addOriginToLocationPath(callbackRoute ?? pathname)
+        addOriginToLocationPath(callbackRoute ?? defaultCallbackUrl)
       );
 
       if (hasNativeAuth && !token) {

src/hooks/login/useLoginService.ts

@@ -95,6 +95,7 @@ export const useLoginService = (config?: OnProviderLoginType['nativeAuth']) => {
         ...(apiAddress ? { nativeAuthConfig: configuration } : {})
       })
     );
+    return nativeAuthToken;
   };
 
   // TODO: @StanislavSava verify and maybe refactor to separate function
@@ -125,10 +126,12 @@ export const useLoginService = (config?: OnProviderLoginType['nativeAuth']) => {
       message: Buffer.from(`${address}${loginToken}{}`)
     });
     const signedMessage = await signMessageCallback(messageToSign, {});
-    setTokenLoginInfo({
+    const nativeAuthToken = setTokenLoginInfo({
       address,
       signature: signedMessage.getSignature().toString('hex')
     });
+
+    return nativeAuthToken;
   };
 
   return {

src/hooks/login/useOperaLogin.ts

@@ -13,6 +13,7 @@ import {
 import { LoginMethodsEnum } from 'types/enums.types';
 import { getIsLoggedIn } from 'utils/getIsLoggedIn';
 import { optionalRedirect } from 'utils/internal';
+import { getDefaultCallbackUrl } from 'utils/window';
 import { getWindowLocation } from 'utils/window/getWindowLocation';
 import { useLoginService } from './useLoginService';
 
@@ -54,9 +55,10 @@ export const useOperaLogin = ({
         return;
       }
 
-      const { origin, pathname } = getWindowLocation();
+      const { origin } = getWindowLocation();
+      const defaulCallbackUrl = getDefaultCallbackUrl();
       const callbackUrl: string = encodeURIComponent(
-        `${origin}${callbackRoute ?? pathname}`
+        `${origin}${callbackRoute ?? defaulCallbackUrl}`
       );
 
       if (hasNativeAuth && !token) {

src/hooks/signMessage/useSignMessage.ts

@@ -115,7 +115,7 @@ export const useSignMessage = () => {
 
     return `${isWalletLogin ? origin : ''}${callbackUrl.pathname}${
       callbackUrl.search
-    }`;
+    }${callbackUrl.hash}`;
   };
 
   const checkProviderIsInitialized = async () => {

src/hooks/transactions/useSignTransactions.tsx

@@ -39,6 +39,7 @@ import {
 
 import { builtCallbackUrl } from 'utils/transactions/builtCallbackUrl';
 import { parseTransactionAfterSigning } from 'utils/transactions/parseTransactionAfterSigning';
+import { getDefaultCallbackUrl } from 'utils/window';
 import { getWindowLocation } from 'utils/window/getWindowLocation';
 
 import {
@@ -150,9 +151,9 @@ export const useSignTransactions = () => {
       customTransactionInformation
     } = transactionsToSign;
     const { redirectAfterSign } = customTransactionInformation;
-    const { pathname } = getWindowLocation();
-    const redirectRoute = callbackRoute || pathname;
-    const isCurrentRoute = pathname.includes(redirectRoute);
+    const defaultCallbackUrl = getDefaultCallbackUrl();
+    const redirectRoute = callbackRoute || defaultCallbackUrl;
+    const isCurrentRoute = defaultCallbackUrl.includes(redirectRoute);
     const shouldRedirectAfterSign = redirectAfterSign && !isCurrentRoute;
 
     try {

src/services/transactions/sendBatchTransactions.ts

@@ -7,15 +7,15 @@ import {
   SimpleTransactionType
 } from 'types';
 import { generateBatchTransactionsGrouping } from 'utils/transactions/batch/generateBatchTransactionsGrouping';
-import { getWindowLocation } from 'utils/window/getWindowLocation';
+import { getDefaultCallbackUrl } from 'utils/window';
 import { signTransactions } from './signTransactions';
 import { transformTransactionsToSign } from './utils/transformTransactionsToSign';
 
 export async function sendBatchTransactions({
   transactions,
   transactionsDisplayInfo,
   redirectAfterSign = true,
-  callbackRoute = getWindowLocation().pathname,
+  callbackRoute = getDefaultCallbackUrl(),
   signWithoutSending = false,
   completedTransactionsDelay,
   sessionInformation,

src/services/transactions/sendTransactions.ts

@@ -4,15 +4,15 @@ import {
   SendTransactionsPropsType,
   SimpleTransactionType
 } from 'types';
-import { getWindowLocation } from 'utils/window/getWindowLocation';
+import { getDefaultCallbackUrl } from 'utils/window';
 import { signTransactions } from './signTransactions';
 import { transformTransactionsToSign } from './utils/transformTransactionsToSign';
 
 export async function sendTransactions({
   transactions,
   transactionsDisplayInfo,
   redirectAfterSign = true,
-  callbackRoute = getWindowLocation().pathname,
+  callbackRoute = getDefaultCallbackUrl(),
   signWithoutSending = false,
   completedTransactionsDelay,
   sessionInformation,

src/utils/clearNavigationHistory.ts

@@ -1,10 +1,10 @@
-import { getWindowLocation } from './window/getWindowLocation';
+import { getWindowLocation } from './window';
 
 export const clearNavigationHistory = (remainingParams: any) => {
   const newUrlParams = new URLSearchParams(remainingParams).toString();
-  const { pathname } = getWindowLocation();
+  const { pathname, hash } = getWindowLocation();
   const newSearch = newUrlParams ? `?${newUrlParams}` : '';
-  const fullPath = pathname ? `${pathname}${newSearch}` : './';
+  const fullPath = pathname ? `${pathname}${newSearch}${hash}` : './';
 
   setTimeout(() => {
     window?.history.replaceState({}, document?.title, fullPath);

src/utils/sanitizeCallbackUrl.ts

@@ -3,7 +3,6 @@ export const sanitizeCallbackUrl = (
   vulnerableItems: string[] = ['address']
 ) => {
   const url = new URL(targetURL);
-
   const params = new URLSearchParams(url.search);
 
   vulnerableItems.forEach((vulnerableItem) => params.delete(vulnerableItem));
@@ -17,5 +16,7 @@ export const sanitizeCallbackUrl = (
     return targetURL;
   }
 
-  return `${url.origin}${pathname}${questionMark}${params.toString()}`;
+  return `${url.origin}${pathname}${questionMark}${params.toString()}${
+    url.hash
+  }`;
 };

src/utils/tests/sanitizeCallbackUrl.test.ts

@@ -5,6 +5,12 @@ describe('sanitizeLoginCallbackUrl tests', () => {
     const result = sanitizeCallbackUrl('https://wallet.multiversx.com');
     expect(result).toEqual('https://wallet.multiversx.com');
   });
+  test('Keeps the path and hash of the URL', () => {
+    const result = sanitizeCallbackUrl(
+      'https://wallet.multiversx.com/path#hash'
+    );
+    expect(result).toEqual('https://wallet.multiversx.com/path#hash');
+  });
   test('remove "address" item from query params when this is the only query item', () => {
     const result = sanitizeCallbackUrl(
       'https://localhost:3000/feed?address=erd1-address'

src/utils/transactions/batch/generateBatchTransactionsGrouping.ts

@@ -6,6 +6,6 @@ export const generateBatchTransactionsGrouping = (
 ) => {
   let indexInFlatArray = 0;
   return transactions.map((group) => {
-    return group.map((_tx) => indexInFlatArray++);
+    return group.map(() => indexInFlatArray++);
   });
 };

src/utils/transactions/builtCallbackUrl.ts

@@ -27,9 +27,14 @@ export function builtCallbackUrl({
   let url = callbackUrl;
 
   if (Object.entries(urlParams).length > 0) {
-    const { search, origin, pathname } = new URL(callbackUrl);
-    const { nextUrlParams } = buildUrlParams(search, urlParams);
-    url = `${origin}${pathname}?${nextUrlParams}`;
+    try {
+      const { search, origin, pathname, hash } = new URL(callbackUrl);
+      const { nextUrlParams } = buildUrlParams(search, urlParams);
+      url = `${origin}${pathname}?${nextUrlParams}${hash}`;
+    } catch (err) {
+      console.error('Unable to construct URL from: ', callbackUrl, err);
+      return url;
+    }
   }
 
   return url;

src/utils/transactions/tests/builtCallbackUrl.test.ts

@@ -0,0 +1,54 @@
+import { builtCallbackUrl } from '../builtCallbackUrl';
+
+describe('builtCallbackUrl tests', () => {
+  const url = 'https://wallet.multiversx.com';
+
+  test('returns callbackUrl unmodified if urlParams is empty', () => {
+    expect(builtCallbackUrl({ callbackUrl: url })).toBe(url);
+  });
+
+  test('adds urlParams', () => {
+    expect(
+      builtCallbackUrl({
+        callbackUrl: url,
+        urlParams: { status: 'success' }
+      })
+    ).toBe('https://wallet.multiversx.com/?status=success');
+  });
+
+  test('adds urlParams and keeps existing hash', () => {
+    expect(
+      builtCallbackUrl({
+        callbackUrl: url + '#test',
+        urlParams: { status: 'success' }
+      })
+    ).toBe('https://wallet.multiversx.com/?status=success#test');
+  });
+
+  test('keeps existing urlParams', () => {
+    expect(
+      builtCallbackUrl({
+        callbackUrl: url + '?page=1',
+        urlParams: { status: 'success' }
+      })
+    ).toBe('https://wallet.multiversx.com/?page=1&status=success');
+  });
+
+  test('keeps existing hash', () => {
+    expect(
+      builtCallbackUrl({
+        callbackUrl: url + '?page=1#logs',
+        urlParams: { status: 'success' }
+      })
+    ).toBe('https://wallet.multiversx.com/?page=1&status=success#logs');
+  });
+
+  test('throws error if callbackUrl is invalid and urlParams are defined', () => {
+    expect(
+      builtCallbackUrl({
+        callbackUrl: '',
+        urlParams: { status: 'success' }
+      })
+    ).toBe('');
+  });
+});

src/utils/window/getDefaultCallbackUrl.ts

@@ -0,0 +1,7 @@
+import { getWindowLocation } from './index';
+
+export const getDefaultCallbackUrl = () => {
+  const { pathname, search, hash } = getWindowLocation();
+
+  return `${pathname ?? ''}${search ?? ''}${hash ?? ''}`;
+};

src/utils/window/index.ts

@@ -1,2 +1,3 @@
 export * from './addOriginToLocationPath';
+export * from './getDefaultCallbackUrl';
 export * from './getWindowLocation';