Work on iframe integration

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.0",
     "@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/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/providers/ProviderFactory.ts

@@ -1,12 +1,14 @@
-import { CrossWindowProvider } from 'lib/sdkWebWalletCrossWindowProvider';
-import { ExtensionProvider } from '@multiversx/sdk-extension-provider';
 import {
   IProvider,
   IProviderFactory,
   ProviderTypeEnum
 } from './types/providerFactory.types';
-import { isBrowserWithPopupConfirmation } from '../../constants';
 import { createLedgerProvider } from './helpers/ledger/createLedgerProvider';
+import { createCrossWindowProvider } from './helpers/crossWindow/createCrossWindowProvider';
+import { createExtensionProvider } from './helpers/extension/createExtensionProvider';
+import { createMetamaskProvider } from './helpers/iframe/createMetamaskProvider';
+
+console.log('\x1b[42m%s\x1b[0m', 'sdk-dapp-core', 2);
 
 export class ProviderFactory {
   public async create({
@@ -18,7 +20,7 @@ export class ProviderFactory {
 
     switch (type) {
       case ProviderTypeEnum.extension: {
-        const provider = await this.getExtensionProvider();
+        const provider = await createExtensionProvider();
         createdProvider = provider as unknown as IProvider;
 
         createdProvider.getType = () => {
@@ -31,7 +33,7 @@ export class ProviderFactory {
       case ProviderTypeEnum.crossWindow: {
         const { walletAddress } = config.network;
 
-        const provider = await this.createCrossWindowProvider({
+        const provider = await createCrossWindowProvider({
           walletAddress,
           address: config.account?.address || ''
         });
@@ -56,6 +58,20 @@ export class ProviderFactory {
         break;
       }
 
+      case ProviderTypeEnum.metamask: {
+        const provider = await createMetamaskProvider(
+          'https://signing-providers.multiversx.com'
+        );
+
+        if (!provider) {
+          return;
+        }
+
+        createdProvider = provider as unknown as IProvider;
+
+        break;
+      }
+
       case ProviderTypeEnum.custom: {
         createdProvider = customProvider;
         break;
@@ -67,29 +83,4 @@ export class ProviderFactory {
 
     return createdProvider;
   }
-
-  public async createCrossWindowProvider({
-    address,
-    walletAddress
-  }: {
-    address: string;
-    walletAddress: string;
-  }) {
-    const provider = CrossWindowProvider.getInstance();
-    await provider.init();
-    provider.setWalletUrl(String(walletAddress));
-    provider.setAddress(address);
-
-    if (isBrowserWithPopupConfirmation) {
-      provider.setShouldShowConsentPopup(true);
-    }
-
-    return provider;
-  }
-
-  private async getExtensionProvider() {
-    const provider = ExtensionProvider.getInstance();
-    await provider.init();
-    return provider;
-  }
 }

src/core/providers/helpers/crossWindow/createCrossWindowProvider.ts

@@ -0,0 +1,21 @@
+import { isBrowserWithPopupConfirmation } from 'constants/browser.constants';
+import { CrossWindowProvider } from 'lib/sdkWebWalletCrossWindowProvider';
+
+export async function createCrossWindowProvider({
+  address,
+  walletAddress
+}: {
+  address: string;
+  walletAddress: string;
+}) {
+  const provider = CrossWindowProvider.getInstance();
+  await provider.init();
+  provider.setWalletUrl(String(walletAddress));
+  provider.setAddress(address);
+
+  if (isBrowserWithPopupConfirmation) {
+    provider.setShouldShowConsentPopup(true);
+  }
+
+  return provider;
+}

src/core/providers/helpers/extension/createExtensionProvider.ts

@@ -0,0 +1,7 @@
+import { ExtensionProvider } from '@multiversx/sdk-extension-provider/out/extensionProvider';
+
+export async function createExtensionProvider() {
+  const provider = ExtensionProvider.getInstance();
+  await provider.init();
+  return provider;
+}

src/core/providers/helpers/iframe/createMetamaskProvider.ts

@@ -0,0 +1,18 @@
+import { IframeProvider } from '@multiversx/sdk-web-wallet-iframe-provider/out';
+import { IframeLoginTypes } from '@multiversx/sdk-web-wallet-iframe-provider/out/constants';
+import { networkSelector } from 'store/selectors';
+import { getState } from 'store/store';
+
+export async function createMetamaskProvider(
+  customMetamaskSnapWalletAddress?: string
+) {
+  const network = networkSelector(getState());
+  const provider = IframeProvider.getInstance();
+  provider.setLoginType(IframeLoginTypes.metamask);
+  provider.setWalletUrl(
+    customMetamaskSnapWalletAddress || network.metamaskSnapWalletAddress || ''
+  );
+
+  await provider.init();
+  return provider;
+}