diff --git a/src/pages/Unlock/Unlock.tsx b/src/pages/Unlock/Unlock.tsx
index b2a78151..a17cb57a 100644
--- a/src/pages/Unlock/Unlock.tsx
+++ b/src/pages/Unlock/Unlock.tsx
@@ -18,6 +18,7 @@ import { nativeAuth } from 'config';
import { RouteNamesEnum } from 'localConstants';
import { useNavigate } from 'react-router-dom';
import { AuthRedirectWrapper } from 'wrappers';
+import { WebWalletLoginWrapper, WebWalletLoginConfigEnum } from './components';
type CommonPropsType =
| OperaWalletLoginButtonPropsType
@@ -70,16 +71,16 @@ export const Unlock = () => {
loginButtonText='Opera Crypto Wallet - Beta'
{...commonProps}
/>
-
+
+
diff --git a/src/pages/Unlock/components/WebWalletLoginWrapper.tsx b/src/pages/Unlock/components/WebWalletLoginWrapper.tsx
new file mode 100644
index 00000000..948f3444
--- /dev/null
+++ b/src/pages/Unlock/components/WebWalletLoginWrapper.tsx
@@ -0,0 +1,144 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { WebWalletLoginButtonPropsType } from '@multiversx/sdk-dapp/UI/webWallet/WebWalletLoginButton/WebWalletLoginButton';
+import { useWebWalletLogin } from '@multiversx/sdk-dapp/hooks/login/useWebWalletLogin';
+import {
+ CrossWindowLoginButton,
+ WebWalletLoginButton as WebWalletUrlLoginButton
+} from 'components/sdkDappComponents';
+
+export const WebWalletLoginConfigEnum = {
+ crossWindow: 'crossWindow',
+ url: 'url'
+};
+
+export const WebWalletLoginWrapper = ({
+ config,
+ ...commonProps
+}: WebWalletLoginButtonPropsType & {
+ config: (keyof typeof WebWalletLoginConfigEnum)[];
+}) => {
+ const dropdownRef = useRef(null);
+ const anchorRef = useRef(null);
+
+ const [onInitiateLogin] = useWebWalletLogin({
+ ...commonProps
+ });
+
+ const [showOptions, setShowOptions] = useState(false);
+
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ const isOutside = [dropdownRef, anchorRef].every((ref) => {
+ return ref.current && !ref.current.contains(event.target as Node);
+ });
+ if (isOutside) {
+ setShowOptions(false);
+ }
+ };
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, [dropdownRef, anchorRef]);
+
+ const onDropdownClick = () => {
+ setShowOptions((current) => !current);
+ };
+
+ const handleLegacyUrlLogin = (
+ e: React.MouseEvent
+ ) => {
+ e.preventDefault();
+ onInitiateLogin();
+ };
+
+ const hasBothOptions = config.length === 2;
+
+ if (hasBothOptions) {
+ return (
+
+ );
+ }
+
+ if (config.includes('url')) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+};
diff --git a/src/pages/Unlock/components/index.tsx b/src/pages/Unlock/components/index.tsx
new file mode 100644
index 00000000..3461e600
--- /dev/null
+++ b/src/pages/Unlock/components/index.tsx
@@ -0,0 +1 @@
+export * from './WebWalletLoginWrapper';