From 99e4a589d29633391f918999d4be844ef4817a84 Mon Sep 17 00:00:00 2001 From: DanutIlie <42973343+DanutIlie@users.noreply.github.com> Date: Tue, 26 Nov 2024 10:20:40 +0200 Subject: [PATCH] update sdks (#257) --- package.json | 4 +- src/App.tsx | 6 +-- src/config/config.devnet.ts | 2 - src/config/config.mainnet.ts | 1 - src/config/config.testnet.ts | 2 - src/hooks/index.ts | 1 + src/hooks/useWindowSize.ts | 25 +++++++++++ src/pages/Unlock/Unlock.tsx | 41 ++++++++++++++----- .../components/IframeButton/IframeButton.tsx | 23 +++++++++++ .../Unlock/components/IframeButton/index.ts | 1 + src/pages/Unlock/components/index.tsx | 1 + 11 files changed, 85 insertions(+), 22 deletions(-) create mode 100644 src/hooks/useWindowSize.ts create mode 100644 src/pages/Unlock/components/IframeButton/IframeButton.tsx create mode 100644 src/pages/Unlock/components/IframeButton/index.ts diff --git a/package.json b/package.json index fb230185..7c2f7b4b 100644 --- a/package.json +++ b/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", diff --git a/src/App.tsx b/src/App.tsx index 7c2865a4..3b9cc9fb 100644 --- a/src/App.tsx +++ b/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, diff --git a/src/config/config.devnet.ts b/src/config/config.devnet.ts index 53eeb7ee..16843fbc 100644 --- a/src/config/config.devnet.ts +++ b/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'; diff --git a/src/config/config.mainnet.ts b/src/config/config.mainnet.ts index 08891eb9..7327e026 100644 --- a/src/config/config.mainnet.ts +++ b/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'; diff --git a/src/config/config.testnet.ts b/src/config/config.testnet.ts index af3dec37..ff1e1c0a 100644 --- a/src/config/config.testnet.ts +++ b/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'; diff --git a/src/hooks/index.ts b/src/hooks/index.ts index f5eff249..8572a88e 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -3,3 +3,4 @@ export * from './withPageTitle'; export * from './transactions'; export * from './useScrollToElement'; export * from './useIsWebProvider'; +export * from './useWindowSize'; diff --git a/src/hooks/useWindowSize.ts b/src/hooks/useWindowSize.ts new file mode 100644 index 00000000..a2bdc7ea --- /dev/null +++ b/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; +}; diff --git a/src/pages/Unlock/Unlock.tsx b/src/pages/Unlock/Unlock.tsx index 57a27675..556e9f95 100644 --- a/src/pages/Unlock/Unlock.tsx +++ b/src/pages/Unlock/Unlock.tsx @@ -3,8 +3,7 @@ import { type WebWalletLoginButtonPropsType, type OperaWalletLoginButtonPropsType, type LedgerLoginButtonPropsType, - type WalletConnectLoginButtonPropsType, - IframeButton + type WalletConnectLoginButtonPropsType } from '@multiversx/sdk-dapp/UI'; import { ExtensionLoginButton, @@ -12,14 +11,20 @@ import { 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 = () => { /> - + {isMobile && ( + onInitiateLogin(IframeLoginTypes.passkey)} + /> + )} onInitiateLogin(IframeLoginTypes.metamask)} /> diff --git a/src/pages/Unlock/components/IframeButton/IframeButton.tsx b/src/pages/Unlock/components/IframeButton/IframeButton.tsx new file mode 100644 index 00000000..770ba56c --- /dev/null +++ b/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 ( + + ); +}; diff --git a/src/pages/Unlock/components/IframeButton/index.ts b/src/pages/Unlock/components/IframeButton/index.ts new file mode 100644 index 00000000..6a65c504 --- /dev/null +++ b/src/pages/Unlock/components/IframeButton/index.ts @@ -0,0 +1 @@ +export * from './IframeButton'; diff --git a/src/pages/Unlock/components/index.tsx b/src/pages/Unlock/components/index.tsx index 93dbf205..bc2e8042 100644 --- a/src/pages/Unlock/components/index.tsx +++ b/src/pages/Unlock/components/index.tsx @@ -1,2 +1,3 @@ export * from './WebWalletLoginWrapper'; export * from './XaliasLoginWrapper'; +export * from './IframeButton';