Integrate Metamask

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- [Metamask integration](https://github.com/multiversx/mx-sdk-dapp-core/pull/27)
 - [Extension integration](https://github.com/multiversx/mx-sdk-dapp-core/pull/26)
 - [Ledger integration](https://github.com/multiversx/mx-sdk-dapp-core/pull/22)
 - [Added sign, send, & track transactions with websocket connection](https://github.com/multiversx/mx-sdk-dapp-core/pull/21)

package.json

@@ -19,9 +19,10 @@
     "url": "git+https://github.com/multiversx/mx-sdk-dapp-core.git"
   },
   "scripts": {
+    "unpublish-verdaccio": "npm unpublish @multiversx/[email protected] --registry http://localhost:4873",
+    "publish-verdaccio": "npm run unpublish-verdaccio && npm run compile && npm publish --registry http://localhost:4873/",
     "compile": "tsc && tsc-alias",
     "build-esbuild": "rimraf out && node esbuild.js",
-    "publish-verdaccio": "npm unpublish --registry http://localhost:4873 @multiversx/[email protected] && rimraf out && yarn compile && npm publish --registry http://localhost:4873",
     "build": "yarn build-esbuild && yarn compile",
     "test": "jest",
     "compile-next": "rimraf out && tsc --p tsconfig.next.json && tsc-alias --project tsconfig.next.json"
@@ -38,6 +39,7 @@
     "@multiversx/sdk-opera-provider": "1.0.0-alpha.1",
     "@multiversx/sdk-wallet": "4.5.1",
     "@multiversx/sdk-wallet-connect-provider": "4.1.2",
+    "@multiversx/sdk-web-wallet-iframe-provider": "2.0.1",
     "@multiversx/sdk-web-wallet-provider": "3.2.1",
     "isomorphic-fetch": "3.0.0",
     "lodash": "4.17.21",

src/constants/network.constants.ts

@@ -18,6 +18,7 @@ export const fallbackNetworkConfigurations: Record<
     walletConnectBridgeAddresses: ['https://bridge.walletconnect.org'],
     walletConnectV2RelayAddresses: ['wss://relay.walletconnect.com'],
     walletAddress: 'https://devnet-wallet.multiversx.com',
+    metamaskSnapWalletAddress: 'https://devnet-snap-wallet.multiversx.com',
     xAliasAddress: 'https://devnet.xalias.com',
     apiAddress: 'https://devnet-api.multiversx.com',
     explorerAddress: 'http://devnet-explorer.multiversx.com',
@@ -37,6 +38,7 @@ export const fallbackNetworkConfigurations: Record<
     walletConnectBridgeAddresses: ['https://bridge.walletconnect.org'],
     walletConnectV2RelayAddresses: ['wss://relay.walletconnect.com'],
     walletAddress: 'https://testnet-wallet.multiversx.com',
+    metamaskSnapWalletAddress: 'https://testnet-snap-wallet.multiversx.com',
     xAliasAddress: 'https://testnet.xalias.com',
     apiAddress: 'https://testnet-api.multiversx.com',
     explorerAddress: 'http://testnet-explorer.multiversx.com',
@@ -56,6 +58,7 @@ export const fallbackNetworkConfigurations: Record<
     walletConnectBridgeAddresses: ['https://bridge.walletconnect.org'],
     walletConnectV2RelayAddresses: ['wss://relay.walletconnect.com'],
     walletAddress: 'https://wallet.multiversx.com',
+    metamaskSnapWalletAddress: 'https://snap-wallet.multiversx.com',
     xAliasAddress: 'https://xalias.com',
     apiAddress: 'https://api.multiversx.com',
     explorerAddress: 'https://explorer.multiversx.com',

src/core/methods/initApp/websocket/initializeWebsocketConnection.ts

@@ -22,7 +22,7 @@ const BATCH_UPDATED_EVENT = 'batchUpdated';
 const CONNECT = 'connect';
 const DISCONNECT = 'disconnect';
 
-export async function initializeWebsocketConnection() {
+export const initializeWebsocketConnection = async () => {
   const { address } = getAccount();
   const { apiAddress } = networkSelector(getStore().getState());
 
@@ -110,4 +110,4 @@ export async function initializeWebsocketConnection() {
   return {
     closeConnection
   };
-}
+};

src/core/methods/login/helpers/extractAccountFromToken.ts

@@ -6,20 +6,22 @@ import { AccountType } from 'types/account.types';
 import { getAccountFromToken } from './getAccountFromToken';
 import { getLatestNonce } from 'core/methods/account/getLatestNonce';
 
-export async function extractAccountFromToken({
-  loginToken,
-  extraInfoData,
-  address,
-  provider
-}: {
+interface IExtractAccountFromTokenProps {
   loginToken: string;
   extraInfoData: {
     multisig?: string;
     impersonate?: string;
   };
   address: string;
   provider: IProvider;
-}) {
+}
+
+export const extractAccountFromToken = async ({
+  loginToken,
+  extraInfoData,
+  address,
+  provider
+}: IExtractAccountFromTokenProps) => {
   const accountDetails = await getAccountFromToken({
     originalLoginToken: loginToken,
     extraInfoData,
@@ -50,4 +52,4 @@ export async function extractAccountFromToken({
   }
 
   return accountDetails;
-}
+};

src/core/methods/logout/logout.ts

@@ -33,12 +33,12 @@ export type LogoutPropsType = {
   hasConsentPopup?: boolean;
 };
 
-export async function logout(
+export const logout = async (
   options = {
     shouldBroadcastLogoutAcrossTabs: true,
     hasConsentPopup: false
   }
-) {
+) => {
   let address = getAddress();
   const provider = getAccountProvider();
   const providerType = getProviderType(provider);
@@ -63,4 +63,4 @@ export async function logout(
   } catch (err) {
     console.error('Logging out error:', err);
   }
-}
+};

src/core/methods/sendTransactions/helpers/sendSignedTransactions.ts

@@ -5,9 +5,9 @@ import { getState } from 'store/store';
 import { TransactionServerStatusesEnum } from 'types';
 import { SignedTransactionType } from 'types/transactions.types';
 
-export async function sendSignedTransactions(
+export const sendSignedTransactions = async (
   signedTransactions: Transaction[]
-): Promise<SignedTransactionType[]> {
+): Promise<SignedTransactionType[]> => {
   const { apiAddress, apiTimeout } = networkSelector(getState());
 
   const promises = signedTransactions.map((transaction) => {
@@ -34,4 +34,4 @@ export async function sendSignedTransactions(
   });
 
   return sentTransactions;
-}
+};

src/core/methods/sendTransactions/sendTransactions.ts

@@ -1,7 +1,6 @@
 import { Transaction } from '@multiversx/sdk-core/out';
 import { AxiosError } from 'axios';
 import { sendSignedTransactions } from './helpers/sendSignedTransactions';
-import { SignedTransactionType } from 'types/transactions.types';
 import { createTransactionsSession } from 'store/actions/transactions/transactionsActions';
 
 export const sendTransactions = async (

src/core/methods/signTransactions/helpers/getGuardedTransactions.ts

@@ -1,9 +1,9 @@
 import { Transaction } from '@multiversx/sdk-core';
 import { getAreAllTransactionsSignedByGuardian } from './getAreAllTransactionsSignedByGuardian';
-import { ProviderFactory } from 'core/providers/ProviderFactory';
 import { getAccount } from 'core/methods/account/getAccount';
 import { walletAddressSelector } from 'store/selectors';
 import { getState } from 'store/store';
+import { createCrossWindowProvider } from 'core/providers/helpers/crossWindow/createCrossWindowProvider';
 
 export const getGuardedTransactions = async ({
   transactions
@@ -22,8 +22,7 @@ export const getGuardedTransactions = async ({
     return transactions;
   }
 
-  const factory = new ProviderFactory();
-  const provider = await factory.createCrossWindowProvider({
+  const provider = await createCrossWindowProvider({
     address,
     walletAddress
   });

src/core/methods/signTransactions/signTransactions.ts

@@ -20,7 +20,7 @@ export const signTransactions = async (
   const { isGuarded, activeGuardianAddress } = getAccount();
 
   const transacitonsToSign =
-    activeGuardianAddress && !options.skipGuardian
+    activeGuardianAddress && isGuarded && !options.skipGuardian
       ? transactions?.map((transaction) => {
           transaction.setVersion(TransactionVersion.withTxOptions());
           transaction.setOptions(

src/core/methods/trackTransactions/helpers/checkTransactionStatus/checkBatch.ts

@@ -124,15 +124,15 @@ function manageTransaction({
   }
 }
 
-export async function checkBatch({
+export const checkBatch = async ({
   sessionId,
   transactionBatch: transactions,
   getTransactionsByHash = getTransactionsByHashes,
   shouldRefreshBalance,
   isSequential,
   onSuccess,
   onFail
-}: TransactionStatusTrackerPropsType) {
+}: TransactionStatusTrackerPropsType) => {
   try {
     if (transactions == null) {
       return;
@@ -187,4 +187,4 @@ export async function checkBatch({
   } catch (error) {
     console.error(error);
   }
-}
+};

src/core/methods/trackTransactions/helpers/checkTransactionStatus/checkTransactionStatus.ts

@@ -3,11 +3,11 @@ import { checkBatch } from './checkBatch';
 import { getPendingStoreTransactions } from '../getPendingStoreTransactions';
 import { TransactionsTrackerType } from '../../trackTransactions.types';
 
-export async function checkTransactionStatus(
+export const checkTransactionStatus = async (
   props: TransactionsTrackerType & {
     shouldRefreshBalance?: boolean;
   }
-) {
+) => {
   const { pendingSessions } = getPendingStoreTransactions();
   if (Object.keys(pendingSessions).length > 0) {
     for (const [sessionId, { transactions }] of Object.entries(
@@ -24,4 +24,4 @@ export async function checkTransactionStatus(
   if (props.shouldRefreshBalance) {
     await refreshAccount();
   }
-}
+};

src/core/methods/trackTransactions/trackTransactions.ts

@@ -14,7 +14,7 @@ import { websocketEventSelector } from 'store/selectors/accountSelectors';
  * @param props - optional object with additional websocket parameters
  * @returns cleanup function
  */
-export async function trackTransactions(props?: TransactionsTrackerType) {
+export const trackTransactions = async (props?: TransactionsTrackerType) => {
   const store = getStore();
   const pollingInterval = getPollingInterval();
   let pollingIntervalTimer: NodeJS.Timeout | null = null;
@@ -70,4 +70,4 @@ export async function trackTransactions(props?: TransactionsTrackerType) {
   return {
     cleanup
   };
-}
+};