Web-Wallet cross-window login

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp-core",
-  "version": "0.0.0-alpha.1",
+  "version": "0.0.0-alpha.2",
   "main": "out/index.js",
   "module": "out/index.js",
   "types": "out/index.d.ts",
@@ -30,8 +30,15 @@
     "access": "public"
   },
   "dependencies": {
+    "@lifeomic/axios-fetch": "3.0.1",
+    "@multiversx/sdk-extension-provider": "3.0.0",
+    "@multiversx/sdk-hw-provider": "6.4.0",
+    "@multiversx/sdk-metamask-provider": "0.0.5",
     "@multiversx/sdk-native-auth-client": "^1.0.8",
+    "@multiversx/sdk-opera-provider": "1.0.0-alpha.1",
+    "@multiversx/sdk-wallet-connect-provider": "4.1.2",
     "@multiversx/sdk-web-wallet-cross-window-provider": "0.2.0",
+    "@multiversx/sdk-web-wallet-provider": "3.2.1",
     "@types/lodash": "^4.17.4",
     "isomorphic-fetch": "^3.0.0",
     "lodash": "^4.17.21",

src/__mocks__/accountConfig.ts

@@ -1,4 +1,4 @@
-import { fallbackNetworkConfigurations } from 'constants/network';
+import { fallbackNetworkConfigurations } from 'constants/network.constants';
 import { EnvironmentsEnum } from 'types';
 
 export const testAddress =

src/apiCalls/accounts/getAccountFromApi.ts

@@ -0,0 +1,25 @@
+import { ACCOUNTS_ENDPOINT } from 'apiCalls/endpoints';
+import { axiosInstance } from 'apiCalls/utils/axiosInstance';
+import { getCleanApiAddress } from 'apiCalls/utils/getCleanApiAddress';
+
+export const accountFetcher = (address: string | null) => {
+  const apiAddress = getCleanApiAddress();
+  const url = `${apiAddress}/${ACCOUNTS_ENDPOINT}/${address}?withGuardianInfo=true`;
+  // we need to get it with an axios instance because of cross-window user interaction issues
+  return axiosInstance.get(url);
+};
+
+export const getAccountFromApi = async (address?: string) => {
+  if (!address) {
+    return null;
+  }
+
+  try {
+    const { data } = await accountFetcher(address);
+    return data;
+  } catch (err) {
+    console.error('error fetching configuration for ', address);
+  }
+
+  return null;
+};

src/apiCalls/accounts/index.ts

@@ -0,0 +1 @@
+export * from './getAccountFromApi';

src/apiCalls/configuration/getNetworkConfigFromApi.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { ApiNetworkConfigType } from 'types/network.types';
 import { NETWORK_CONFIG_ENDPOINT } from '../endpoints';
-import { getCleanApiAddress } from './getCleanApiAddress';
+import { getCleanApiAddress } from '../utils/getCleanApiAddress';
 
 const urlIsValid = (url: string) => {
   try {

src/apiCalls/utils/axiosFetcher.ts

@@ -0,0 +1,4 @@
+import { axiosInstance } from 'apiCalls/utils/axiosInstance';
+
+export const axiosFetcher = (url: string) =>
+  axiosInstance.get(url).then((response) => response.data);

src/apiCalls/utils/axiosInstance.ts

@@ -0,0 +1,99 @@
+import { buildAxiosFetch } from '@lifeomic/axios-fetch';
+import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
+
+// Needs to be used beacause an async call made after cross-window user interaction makes the dapp unresponsive
+
+const fetch = buildAxiosFetch(axios);
+
+const getFormattedAxiosResponse = async <T>(response: Response, config?: T) => {
+  if (!response.ok) {
+    throw new Error(`HTTP error! Status: ${response.status}`);
+  }
+
+  // Clone the response to be able to read it twice (for status and data)
+  const clonedResponse = response.clone();
+
+  // Parse the JSON body asynchronously
+  const jsonPromise = clonedResponse.json();
+
+  // Return the standardized response object
+  const [responseData] = await Promise.all([jsonPromise]);
+  return {
+    data: responseData,
+    status: response.status,
+    statusText: response.statusText,
+    headers: response.headers,
+    config
+  };
+};
+
+async function customPost<T = any, R = AxiosResponse<T, any>, D = any>(
+  url: string,
+  data?: D,
+  config?: AxiosRequestConfig<D> | undefined
+): Promise<R> {
+  try {
+    const response = await fetch(url, {
+      method: 'POST',
+      body: data ? JSON.stringify(data) : undefined,
+      headers: {
+        'Content-Type': 'application/json',
+        ...(config?.headers || {})
+      },
+      ...config
+    } as RequestInit);
+
+    return getFormattedAxiosResponse(response, config) as unknown as Promise<R>;
+  } catch (error) {
+    console.error('Fetch Error:', error);
+    throw error;
+  }
+}
+
+async function customGet<T = any, R = AxiosResponse<T, any>, D = any>(
+  url: string,
+  config?: AxiosRequestConfig<D> | undefined
+): Promise<R> {
+  try {
+    const response = await fetch(url, config as RequestInit);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+
+    return getFormattedAxiosResponse(response, config) as unknown as Promise<R>;
+  } catch (error) {
+    console.error('Fetch Error:', error);
+    throw error;
+  }
+}
+
+async function customPatch<T = any, R = AxiosResponse<T, any>, D = any>(
+  url: string,
+  data?: D,
+  config?: AxiosRequestConfig<D> | undefined
+): Promise<R> {
+  try {
+    const response = await fetch(url, {
+      method: 'PATCH',
+      body: data ? JSON.stringify(data) : undefined,
+      headers: config?.headers || {},
+      ...config
+    } as RequestInit);
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+
+    return getFormattedAxiosResponse(response, config) as unknown as Promise<R>;
+  } catch (error) {
+    console.error('Fetch Error:', error);
+    throw error;
+  }
+}
+
+const axiosInstance = axios.create();
+axiosInstance.get = customGet;
+axiosInstance.post = customPost;
+axiosInstance.patch = customPatch;
+
+export { axiosInstance };

src/apiCalls/utils/getCleanApiAddress.ts

@@ -0,0 +1,8 @@
+import { networkSelector } from 'store/selectors/networkSelectors';
+import { getState } from 'store/store';
+
+export const getCleanApiAddress = (customApiAddress?: string) => {
+  const network = networkSelector(getState());
+  const apiAddress = customApiAddress ?? network.apiAddress;
+  return apiAddress.endsWith('/') ? apiAddress.slice(0, -1) : apiAddress;
+};

src/apiCalls/utils/getScamAddressData.ts

@@ -0,0 +1,18 @@
+import axios from 'axios';
+import { ScamInfoType } from 'types/account.types';
+import { ACCOUNTS_ENDPOINT } from '../endpoints';
+import { networkSelector } from 'store/selectors';
+import { getState } from 'store/store';
+
+export async function getScamAddressData(addressToVerify: string) {
+  const { apiAddress, apiTimeout } = networkSelector(getState());
+
+  const { data } = await axios.get<{
+    scamInfo?: ScamInfoType;
+    code?: string;
+  }>(`${apiAddress}/${ACCOUNTS_ENDPOINT}/${addressToVerify}`, {
+    timeout: Number(apiTimeout)
+  });
+
+  return data;
+}

src/apiCalls/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './axiosFetcher';
+export * from './axiosInstance';
+export * from './getCleanApiAddress';
+export * from './getScamAddressData';

src/constants/browser.constants.ts

@@ -0,0 +1,10 @@
+import { safeWindow } from './window.constants';
+
+const userAgent = String(safeWindow?.navigator?.userAgent);
+
+export const isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);
+
+const isFirefoxOnWindows =
+  /firefox/i.test(userAgent) && /windows/i.test(userAgent);
+
+export const isBrowserWithPopupConfirmation = isSafari || isFirefoxOnWindows;

src/constants/errorMessages.constants.ts

@@ -0,0 +1,13 @@
+export const ERROR_SIGNING = 'error when signing';
+export const CANCELLED = 'cancelled';
+export const TRANSACTION_CANCELLED = 'Transaction canceled';
+export const ERROR_SIGNING_TX = 'error signing transaction';
+export const PROVIDER_NOT_INITIALIZED = 'provider not initialized';
+export const MISSING_PROVIDER_MESSAGE =
+  'You need a signer/valid signer to send a transaction,use either WalletProvider, LedgerProvider or WalletConnect';
+export const DEFAULT_TRANSACTION_STATUS_MESSAGE =
+  'Undefined transaction status';
+export const SECOND_LOGIN_ATTEMPT_ERROR =
+  'Action not allowed. User is logged in. Call logout() first';
+export const SENDER_DIFFERENT_THAN_LOGGED_IN_ADDRESS =
+  'You cannot sign transactions from a different account';

src/constants/index.ts

@@ -1,4 +1,7 @@
-export * from './network';
-export * from './placeholders';
-export * from './storage';
-export * from './window';
+export * from './network.constants';
+export * from './placeholders.constants';
+export * from './storage.constants';
+export * from './window.constants';
+export * from './browser.constants';
+export * from './errorMessages.constants';
+export * from './ledger.constants';

src/constants/ledger.constants.ts

@@ -0,0 +1 @@
+export const LEDGER_CONTRACT_DATA_ENABLED_VALUE = 1;

src/constants/placeholders.constants.ts

@@ -0,0 +1,8 @@
+/**
+ * Not Applicable
+ * @value N/A
+ */
+export const N_A = 'N/A';
+
+export const ZERO = '0';
+export const ELLIPSIS = '...';

src/constants/storage.ts → src/constants/storage.constants.ts

@@ -1,5 +1,5 @@
 import { createJSONStorage } from 'zustand/middleware';
-import { safeWindow } from './window';
+import { safeWindow } from './window.constants';
 
 export const persistConfig: {
   persistReducersStorageType: 'localStorage' | 'sessionStorage';

src/core/methods/account/getAccount.ts

@@ -0,0 +1,6 @@
+import { accountSelector } from 'store/selectors';
+import { getState } from 'store/store';
+
+export function getAccount() {
+  return accountSelector(getState());
+}

src/core/methods/account/getAddress.ts

@@ -0,0 +1,6 @@
+import { addressSelector } from 'store/selectors';
+import { getState } from 'store/store';
+
+export function getAddress() {
+  return addressSelector(getState());
+}

src/core/methods/account/getIsLoggedIn.ts

@@ -0,0 +1,5 @@
+import { getAddress } from './getAddress';
+
+export function getIsLoggedIn() {
+  return Boolean(getAddress());
+}