update sdks (#257)

package.json

@@ -9,8 +9,8 @@
     "@fortawesome/fontawesome-svg-core": "6.5.1",
     "@fortawesome/free-solid-svg-icons": "6.5.1",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@multiversx/sdk-core": "13.13.0",
-    "@multiversx/sdk-dapp": "3.0.3",
+    "@multiversx/sdk-core": "13.15.0",
+    "@multiversx/sdk-dapp": "3.0.14",
     "axios": "1.7.4",
     "classnames": "2.3.2",
     "moment": "2.29.4",

src/App.tsx

@@ -15,8 +15,7 @@ import {
   apiTimeout,
   walletConnectV2ProjectId,
   environment,
-  sampleAuthenticatedDomains,
-  metamaskSnapWalletAddress
+  sampleAuthenticatedDomains
 } from 'config';
 import { RouteNamesEnum } from 'localConstants';
 import { PageNotFound, Unlock } from 'pages';
@@ -30,8 +29,7 @@ const AppContent = () => {
       customNetworkConfig={{
         name: 'customConfig',
         apiTimeout,
-        walletConnectV2ProjectId,
-        metamaskSnapWalletAddress
+        walletConnectV2ProjectId
       }}
       dappConfig={{
         shouldUseWebViewProvider: true,

src/config/config.devnet.ts

@@ -7,5 +7,3 @@ export const contractAddress =
 export const API_URL = 'https://devnet-template-api.multiversx.com';
 export const sampleAuthenticatedDomains = [API_URL];
 export const environment = EnvironmentsEnum.devnet;
-export const metamaskSnapWalletAddress =
-  'https://devnet-snap-wallet.multiversx.com';

src/config/config.mainnet.ts

@@ -7,4 +7,3 @@ export const contractAddress =
 export const API_URL = 'https://template-api.multiversx.com';
 export const sampleAuthenticatedDomains = [API_URL];
 export const environment = EnvironmentsEnum.mainnet;
-export const metamaskSnapWalletAddress = 'https://snap-wallet.multiversx.com';

src/config/config.testnet.ts

@@ -7,5 +7,3 @@ export const contractAddress =
 export const API_URL = 'https://testnet-template-api.multiversx.com';
 export const sampleAuthenticatedDomains = [API_URL];
 export const environment = EnvironmentsEnum.testnet;
-export const metamaskSnapWalletAddress =
-  'https://testnet-snap-wallet.multiversx.com';

src/hooks/index.ts

@@ -3,3 +3,4 @@ export * from './withPageTitle';
 export * from './transactions';
 export * from './useScrollToElement';
 export * from './useIsWebProvider';
+export * from './useWindowSize';

src/hooks/useWindowSize.ts

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+
+export const useWindowSize = () => {
+  const [windowSize, setWindowSize] = useState<{
+    width: number;
+    height: number;
+  }>({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+    window.addEventListener('resize', handleResize);
+    handleResize();
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return windowSize;
+};

src/pages/Unlock/Unlock.tsx

@@ -3,23 +3,28 @@ import {
   type WebWalletLoginButtonPropsType,
   type OperaWalletLoginButtonPropsType,
   type LedgerLoginButtonPropsType,
-  type WalletConnectLoginButtonPropsType,
-  IframeButton
+  type WalletConnectLoginButtonPropsType
 } from '@multiversx/sdk-dapp/UI';
 import {
   ExtensionLoginButton,
   LedgerLoginButton,
   OperaWalletLoginButton,
   WalletConnectLoginButton,
   WebWalletLoginButton as WebWalletUrlLoginButton,
-  XaliasCrossWindowLoginButton,
   CrossWindowLoginButton
 } from 'components/sdkDappComponents';
 import { nativeAuth } from 'config';
 import { RouteNamesEnum } from 'localConstants';
 import { useNavigate } from 'react-router-dom';
 import { AuthRedirectWrapper } from 'wrappers';
-import { WebWalletLoginWrapper, XaliasLoginWrapper } from './components';
+import {
+  IframeButton,
+  WebWalletLoginWrapper,
+  XaliasLoginWrapper
+} from './components';
+import { IframeLoginTypes } from '@multiversx/sdk-web-wallet-iframe-provider/out/constants';
+import { useIframeLogin } from '@multiversx/sdk-dapp/hooks/login/useIframeLogin';
+import { useWindowSize } from 'hooks';
 
 type CommonPropsType =
   | OperaWalletLoginButtonPropsType
@@ -37,12 +42,24 @@ const WebWalletLoginButton = USE_WEB_WALLET_CROSS_WINDOW
 
 export const Unlock = () => {
   const navigate = useNavigate();
-  const commonProps: CommonPropsType = {
+  const { width } = useWindowSize();
+
+  const [onInitiateLogin, { isLoading }] = useIframeLogin({
     callbackRoute: RouteNamesEnum.dashboard,
     nativeAuth,
     onLoginRedirect: () => {
       navigate(RouteNamesEnum.dashboard);
     }
+  });
+
+  const isMobile = width < 768;
+  const commonProps: CommonPropsType = {
+    callbackRoute: RouteNamesEnum.dashboard,
+    nativeAuth,
+    onLoginRedirect: () => {
+      navigate(RouteNamesEnum.dashboard);
+    },
+    disabled: isLoading
   };
 
   return (
@@ -74,16 +91,18 @@ export const Unlock = () => {
             />
             <XaliasLoginWrapper {...commonProps} />
             <WebWalletLoginWrapper {...commonProps} />
-            <IframeButton
-              loginButtonText='Passkey Proxy'
-              loginType='passkey'
-              {...commonProps}
-            />
+            {isMobile && (
+              <IframeButton
+                loginButtonText='Passkey Proxy'
+                {...commonProps}
+                onClick={() => onInitiateLogin(IframeLoginTypes.passkey)}
+              />
+            )}
 
             <IframeButton
               loginButtonText='Metamask Proxy'
-              loginType='metamask'
               {...commonProps}
+              onClick={() => onInitiateLogin(IframeLoginTypes.metamask)}
             />
           </div>
         </div>

src/pages/Unlock/components/IframeButton/IframeButton.tsx

@@ -0,0 +1,23 @@
+import { Button } from 'components';
+
+export interface IframeButtonPropsType {
+  loginButtonText?: string;
+  disabled?: boolean;
+  onClick?: () => void;
+}
+
+export const IframeButton = ({
+  disabled,
+  onClick,
+  loginButtonText
+}: IframeButtonPropsType) => {
+  return (
+    <Button
+      onClick={() => onClick?.()}
+      disabled={disabled}
+      className='inline-block mx-4 rounded-md m-1 text-base text-center bg-[#1b46c2] border-[#007bff] text-white disabled:opacity-[0.65] disabled:cursor-not-allowed px-3 py-1.5 focus:shadow-[0_0_0_0.2rem_rgba(38,143,255,0.5)]'
+    >
+      {loginButtonText}
+    </Button>
+  );
+};

src/pages/Unlock/components/IframeButton/index.ts

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

src/pages/Unlock/components/index.tsx

@@ -1,2 +1,3 @@
 export * from './WebWalletLoginWrapper';
 export * from './XaliasLoginWrapper';
+export * from './IframeButton';