@dynamic-labs/sdk-react-core 3.0.0-alpha.57 → 3.0.0-alpha.59

package/src/lib/utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.cjs

@@ -148,6 +148,7 @@ const useAuthLayoutChecks = () => {
         view.type !== 'wallet-claim-intro' &&
         view.type !== 'passkey-recovery-add-email' &&
         view.type !== 'global-wallet-confirm' &&
+        view.type !== 'global-wallet-info' &&
         view.type !== 'mfa-choose-device' &&
         view.type !== 'mfa-verification';
     const showConnectedWalletProgress = isBridgeFlow &&

package/src/lib/utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.js

@@ -144,6 +144,7 @@ const useAuthLayoutChecks = () => {
         view.type !== 'wallet-claim-intro' &&
         view.type !== 'passkey-recovery-add-email' &&
         view.type !== 'global-wallet-confirm' &&
+        view.type !== 'global-wallet-info' &&
         view.type !== 'mfa-choose-device' &&
         view.type !== 'mfa-verification';
     const showConnectedWalletProgress = isBridgeFlow &&

package/src/lib/utils/hooks/useConnectedAccountWallet/useConnectedAccountWallet.d.ts

@@ -1,2 +1,2 @@
 import { Wallet, WalletConnector } from '../../../..';
-export declare const useConnectedAccountWallet: (connector: WalletConnector | undefined, secondaryWallets: Wallet[]) => import("../usePromise").PromiseState<Wallet<import("@dynamic-labs/wallet-connector-core").WalletConnectorCore.WalletConnector> | undefined, Error>;
+export declare const useConnectedAccountWallet: (connector: WalletConnector | undefined, secondaryWallets: Wallet[]) => import("../usePromise").PromiseState<Wallet<import("dist/packages/wallet-connector-core/src").WalletConnectorCore.WalletConnector> | undefined, Error>;

package/src/lib/utils/hooks/useEmbeddedWallet/useEmbeddedWallet.d.ts

@@ -17,7 +17,7 @@ import { UserProfile } from '../../../..';
  */
 export declare const useEmbeddedWallet: () => {
     readonly createEmbeddedWallet: (chains?: EmbeddedWalletChainEnum[], options?: {
-        webAuthnAttestation: import("@dynamic-labs/wallet-connector-core").WebAuthnAttestation;
+        webAuthnAttestation: import("dist/packages/wallet-connector-core/src").WebAuthnAttestation;
     } | undefined) => Promise<Wallet | undefined>;
     readonly createEmbeddedWalletAccount: ({ chain }: {
         chain: EmbeddedWalletChainEnum;
@@ -27,7 +27,7 @@ export declare const useEmbeddedWallet: () => {
     } | undefined) => Promise<string | undefined>;
     readonly createPasskey: (options: {
         oneTimeCode: string;
-    } | undefined) => Promise<import("@dynamic-labs/wallet-connector-core").WebAuthnAttestation>;
+    } | undefined) => Promise<import("dist/packages/wallet-connector-core/src").WebAuthnAttestation>;
     readonly createPassword: (showIntro?: boolean | undefined) => Promise<string>;
     readonly getPasskeys: () => Promise<import("@dynamic-labs/sdk-api-core").UserPasskey[]>;
     readonly getWalletVersion: () => import(".").EmbeddedWalletVersion | undefined;

package/src/lib/utils/hooks/useSyncOnboardingFlow/useSyncOnboardingFlow.cjs

@@ -99,7 +99,7 @@ require('../../../store/state/tokenBalances.cjs');
 var useInternalDynamicContext = require('../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 
 const useSyncOnboardingFlow = () => {
-    const { setShowAuthFlow, userWithMissingInfo, handlers, headless, sdkHasLoaded, setSelectedWalletConnectorKey, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setShowAuthFlow, userWithMissingInfo, handlers, sdkHasLoaded, setSelectedWalletConnectorKey, } = useInternalDynamicContext.useInternalDynamicContext();
     const { setView } = ViewContext.useViewContext();
     const { updateUser } = useUserUpdateRequest.useUserUpdateRequestInternal({
         validationSchemaStripUnknown: false,
@@ -184,10 +184,6 @@ const useSyncOnboardingFlow = () => {
             handleHeadlessOnboarding();
             return;
         }
-        if (headless) {
-            logger.logger.error('No onboarding handler found. Please add a handleUserOnboarding handler to your dynamic provider settings.');
-            return;
-        }
         handleOnboarding();
         return;
     }, [
@@ -196,7 +192,6 @@ const useSyncOnboardingFlow = () => {
         handlers,
         completeAuth,
         updateUser,
-        headless,
         setShowAuthFlow,
         setView,
         formattedPhone,

package/src/lib/utils/hooks/useSyncOnboardingFlow/useSyncOnboardingFlow.js

@@ -95,7 +95,7 @@ import '../../../store/state/tokenBalances.js';
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 
 const useSyncOnboardingFlow = () => {
-    const { setShowAuthFlow, userWithMissingInfo, handlers, headless, sdkHasLoaded, setSelectedWalletConnectorKey, } = useInternalDynamicContext();
+    const { setShowAuthFlow, userWithMissingInfo, handlers, sdkHasLoaded, setSelectedWalletConnectorKey, } = useInternalDynamicContext();
     const { setView } = useViewContext();
     const { updateUser } = useUserUpdateRequestInternal({
         validationSchemaStripUnknown: false,
@@ -180,10 +180,6 @@ const useSyncOnboardingFlow = () => {
             handleHeadlessOnboarding();
             return;
         }
-        if (headless) {
-            logger.error('No onboarding handler found. Please add a handleUserOnboarding handler to your dynamic provider settings.');
-            return;
-        }
         handleOnboarding();
         return;
     }, [
@@ -192,7 +188,6 @@ const useSyncOnboardingFlow = () => {
         handlers,
         completeAuth,
         updateUser,
-        headless,
         setShowAuthFlow,
         setView,
         formattedPhone,

package/src/lib/utils/hooks/useWalletItemActions/useWalletItemActions.cjs

@@ -175,7 +175,11 @@ const useWalletItemActions = () => {
     });
     const handleAlreadyConnectedWallet = (walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         logger.logger.debug('handleAlreadyConnectedWallet', walletConnector);
-        const connectedAccounts = yield walletConnector.getConnectedAccounts(true);
+        setShowAuthFlow(false);
+        const connectedAccounts = yield walletConnector.getConnectedAccounts({
+            chooseAccounts: true,
+            forceFetch: true,
+        });
         const activeAccountAlreadyLinked = linkedWallets.find((wallet) => { var _a; return wallet.address.toLowerCase() === ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
         logVerboseTroubleshootingMessage.logVerboseTroubleshootingMessage('[handleAlreadyConnectedWallet]', {
             activeAccountAlreadyLinked,
@@ -188,7 +192,6 @@ const useWalletItemActions = () => {
         else {
             setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
         }
-        setShowAuthFlow(false);
         setSelectedWalletConnectorKey(walletConnector.key);
     });
     const openWallet = (walletKey, handlers) => {

package/src/lib/utils/hooks/useWalletItemActions/useWalletItemActions.js

@@ -171,7 +171,11 @@ const useWalletItemActions = () => {
     });
     const handleAlreadyConnectedWallet = (walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
         logger.debug('handleAlreadyConnectedWallet', walletConnector);
-        const connectedAccounts = yield walletConnector.getConnectedAccounts(true);
+        setShowAuthFlow(false);
+        const connectedAccounts = yield walletConnector.getConnectedAccounts({
+            chooseAccounts: true,
+            forceFetch: true,
+        });
         const activeAccountAlreadyLinked = linkedWallets.find((wallet) => { var _a; return wallet.address.toLowerCase() === ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
         logVerboseTroubleshootingMessage('[handleAlreadyConnectedWallet]', {
             activeAccountAlreadyLinked,
@@ -184,7 +188,6 @@ const useWalletItemActions = () => {
         else {
             setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
         }
-        setShowAuthFlow(false);
         setSelectedWalletConnectorKey(walletConnector.key);
     });
     const openWallet = (walletKey, handlers) => {

package/src/lib/views/GlobalWalletInfoView/GlobalWalletInfoView.cjs

@@ -0,0 +1,34 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactI18next = require('react-i18next');
+var Typography = require('../../components/Typography/Typography.cjs');
+require('@dynamic-labs/sdk-api-core');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../context/ViewContext/ViewContext.cjs');
+require('react');
+var copy = require('../../shared/assets/copy.cjs');
+var blueWalletconnect = require('../../shared/assets/blue-walletconnect.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../utils/constants/colors.cjs');
+require('../../utils/constants/values.cjs');
+require('../../shared/utils/classes/storage/localStorage.cjs');
+require('../../shared/utils/classes/storage/sessionStorage.cjs');
+require('../../store/state/loadingAndLifecycle.cjs');
+require('@dynamic-labs/utils');
+require('../../shared/consts/index.cjs');
+
+const InlineIconTypography = ({ children }) => (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', children: jsxRuntime.jsx("span", { className: 'inline-icon-text', children: children }) }));
+const GlobalWalletInfoView = () => {
+    const { t } = reactI18next.useTranslation();
+    // we cannot translate some of this as we have icons inline with text
+    return (jsxRuntime.jsx("div", { className: 'info-card', children: jsxRuntime.jsxs("div", { className: 'wrapper', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'bold', color: 'primary', as: 'h2', children: "How do I find the URI or QR code?" }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', children: t('global_wallet.help.step.1') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', children: t('global_wallet.help.step.2') }), jsxRuntime.jsxs(InlineIconTypography, { children: ["3. Open", ' ', jsxRuntime.jsxs("span", { className: 'nowrap', children: ["WalletConnect ", jsxRuntime.jsx(blueWalletconnect.ReactComponent, {})] }), "from the list, this should show a QR code to scan"] }), jsxRuntime.jsxs(InlineIconTypography, { children: ["4. If you are not using the QR code, locate and click", jsxRuntime.jsxs("span", { className: 'nowrap', children: [jsxRuntime.jsx(copy.ReactComponent, {}), " to copy"] }), ' ', "the URI code"] })] }) }));
+};
+
+exports.GlobalWalletInfoView = GlobalWalletInfoView;
+exports["default"] = GlobalWalletInfoView;

package/src/lib/views/GlobalWalletInfoView/GlobalWalletInfoView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const GlobalWalletInfoView: () => JSX.Element;
+export default GlobalWalletInfoView;

package/src/lib/views/GlobalWalletInfoView/GlobalWalletInfoView.js

@@ -0,0 +1,29 @@
+'use client'
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
+import { Typography } from '../../components/Typography/Typography.js';
+import '@dynamic-labs/sdk-api-core';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../context/ViewContext/ViewContext.js';
+import 'react';
+import { ReactComponent as SvgCopy } from '../../shared/assets/copy.js';
+import { ReactComponent as SvgBlueWalletconnect } from '../../shared/assets/blue-walletconnect.js';
+import '@dynamic-labs/wallet-book';
+import '../../utils/constants/colors.js';
+import '../../utils/constants/values.js';
+import '../../shared/utils/classes/storage/localStorage.js';
+import '../../shared/utils/classes/storage/sessionStorage.js';
+import '../../store/state/loadingAndLifecycle.js';
+import '@dynamic-labs/utils';
+import '../../shared/consts/index.js';
+
+const InlineIconTypography = ({ children }) => (jsx(Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', children: jsx("span", { className: 'inline-icon-text', children: children }) }));
+const GlobalWalletInfoView = () => {
+    const { t } = useTranslation();
+    // we cannot translate some of this as we have icons inline with text
+    return (jsx("div", { className: 'info-card', children: jsxs("div", { className: 'wrapper', children: [jsx(Typography, { variant: 'body_small', weight: 'bold', color: 'primary', as: 'h2', children: "How do I find the URI or QR code?" }), jsx(Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', children: t('global_wallet.help.step.1') }), jsx(Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', children: t('global_wallet.help.step.2') }), jsxs(InlineIconTypography, { children: ["3. Open", ' ', jsxs("span", { className: 'nowrap', children: ["WalletConnect ", jsx(SvgBlueWalletconnect, {})] }), "from the list, this should show a QR code to scan"] }), jsxs(InlineIconTypography, { children: ["4. If you are not using the QR code, locate and click", jsxs("span", { className: 'nowrap', children: [jsx(SvgCopy, {}), " to copy"] }), ' ', "the URI code"] })] }) }));
+};
+
+export { GlobalWalletInfoView, GlobalWalletInfoView as default };

package/src/lib/views/viewToComponentMap.cjs

@@ -133,6 +133,7 @@ var MfaRecoveryView = require('./MfaRecoveryView/MfaRecoveryView.cjs');
 var MfaSecureDeviceHelpView = require('./MfaSecureDeviceHelpView/MfaSecureDeviceHelpView.cjs');
 var SandboxMaximumThresholdReached = require('./SandboxMaximumThresholdReached/SandboxMaximumThresholdReached.cjs');
 var GlobalWalletConfirmView = require('./GlobalWalletConfirmView/GlobalWalletConfirmView.cjs');
+var GlobalWalletInfoView = require('./GlobalWalletInfoView/GlobalWalletInfoView.cjs');
 require('../context/SendBalanceContext/SendBalanceContext.cjs');
 require('../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
 require('../context/ConnectWithOtpContext/constants.cjs');
@@ -161,6 +162,7 @@ const viewToComponentMap = {
     'farcaster-connect-view': FarcasterConnectView.FarcasterConnectView,
     'gate-blocked-wallet': NoAccess.NoAccess,
     'global-wallet-confirm': GlobalWalletConfirmView.GlobalWalletConfirmView,
+    'global-wallet-info': GlobalWalletInfoView.GlobalWalletInfoView,
     'login-with-email-or-wallet': LoginView.LoginView,
     'login-with-email-or-wallet-full-wallet-list': WalletList.WalletList,
     'login-with-email-verification': EmailVerification.EmailVerification,

package/src/lib/views/viewToComponentMap.d.ts

@@ -20,6 +20,7 @@ export declare const viewToComponentMap: {
     'farcaster-connect-view': ({ url }: import("./FarcasterConnectView/FarcasterConnectView").FarcasterConnectViewProps) => JSX.Element;
     'gate-blocked-wallet': () => JSX.Element;
     'global-wallet-confirm': import("react").FC<import("./GlobalWalletConfirmView").GlobalWalletConfirmViewProps>;
+    'global-wallet-info': () => JSX.Element;
     'login-with-email-or-wallet': () => JSX.Element;
     'login-with-email-or-wallet-full-wallet-list': ({ isWalletConnectList, }: import("./WalletList").WalletListProps) => JSX.Element;
     'login-with-email-verification': import("react").FC<import("./EmailVerification/EmailVerification").EmailVerificationProps>;

package/src/lib/views/viewToComponentMap.js

@@ -129,6 +129,7 @@ import { MfaRecoveryView } from './MfaRecoveryView/MfaRecoveryView.js';
 import { MfaSecureDeviceHelper } from './MfaSecureDeviceHelpView/MfaSecureDeviceHelpView.js';
 import { SandboxMaximumThresholdReached } from './SandboxMaximumThresholdReached/SandboxMaximumThresholdReached.js';
 import { GlobalWalletConfirmView } from './GlobalWalletConfirmView/GlobalWalletConfirmView.js';
+import { GlobalWalletInfoView } from './GlobalWalletInfoView/GlobalWalletInfoView.js';
 import '../context/SendBalanceContext/SendBalanceContext.js';
 import '../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
 import '../context/ConnectWithOtpContext/constants.js';
@@ -157,6 +158,7 @@ const viewToComponentMap = {
     'farcaster-connect-view': FarcasterConnectView,
     'gate-blocked-wallet': NoAccess,
     'global-wallet-confirm': GlobalWalletConfirmView,
+    'global-wallet-info': GlobalWalletInfoView,
     'login-with-email-or-wallet': LoginView,
     'login-with-email-or-wallet-full-wallet-list': WalletList,
     'login-with-email-verification': EmailVerification,

package/src/lib/widgets/DynamicWidget/views/GlobalWalletView/GlobalWalletTypes.d.ts

@@ -0,0 +1,31 @@
+export interface PairingInfo {
+    id: number;
+    params: {
+        id: number;
+        pairingTopic: string;
+        expiryTimestamp: number;
+        requiredNamespaces: Record<string, unknown>;
+        optionalNamespaces: {
+            eip155: {
+                chains: string[];
+                methods: string[];
+                events: string[];
+                rpcMap: {
+                    [key: string]: string;
+                };
+            };
+        };
+        relays: Array<{
+            protocol: string;
+        }>;
+        proposer: {
+            publicKey: string;
+            metadata: {
+                name: string;
+                description: string;
+                url: string;
+                icons: string[];
+            };
+        };
+    };
+}

package/src/lib/widgets/DynamicWidget/views/GlobalWalletView/GlobalWalletView.cjs

@@ -7,6 +7,7 @@ var _tslib = require('../../../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactI18next = require('react-i18next');
+var utils = require('@dynamic-labs/utils');
 require('@dynamic-labs/sdk-api-core');
 require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
@@ -15,13 +16,13 @@ var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
 var arrowLeft = require('../../../../shared/assets/arrow-left.cjs');
 var copy = require('../../../../shared/assets/copy.cjs');
 var blueWalletconnect = require('../../../../shared/assets/blue-walletconnect.cjs');
+var questionMark = require('../../../../shared/assets/question-mark.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../../../utils/constants/colors.cjs');
 require('../../../../utils/constants/values.cjs');
 require('../../../../shared/utils/classes/storage/localStorage.cjs');
 require('../../../../shared/utils/classes/storage/sessionStorage.cjs');
 require('../../../../store/state/loadingAndLifecycle.cjs');
-require('@dynamic-labs/utils');
 require('../../../../shared/consts/index.cjs');
 var IconButton = require('../../../../components/IconButton/IconButton.cjs');
 var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
@@ -68,6 +69,7 @@ require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
+var Divider = require('../../../../components/Divider/Divider.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('formik');
 require('../../../../store/state/sendBalances/sendBalances.cjs');
@@ -75,6 +77,7 @@ require('../../../../views/TransactionConfirmationView/helpers/transactionErrorM
 var Input = require('../../../../components/Input/Input.cjs');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+var GlobalWalletScanner = require('./scanner/GlobalWalletScanner.cjs');
 require('../../../../../polyfills.cjs');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('../../../../context/ErrorBoundary/ErrorBoundaryBase.cjs');
@@ -101,6 +104,7 @@ require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('qrcode');
 
 const GlobalWalletView = () => {
+    var _a;
     const { t } = reactI18next.useTranslation();
     const { setDynamicWidgetView, goToInitialDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
     const { setView } = ViewContext.useViewContext();
@@ -108,47 +112,60 @@ const GlobalWalletView = () => {
     const { primaryWallet } = useDynamicContext.useDynamicContext();
     const [walletConnectUri, setWalletConnectUri] = React.useState('');
     const [bannerMessage, setBannerMessage] = React.useState(null);
-    const [isHovered, setIsHovered] = React.useState(false);
-    const [isFocused, setIsFocused] = React.useState(false);
-    const { globalWallet } = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
+    const [isScanned, setIsScanned] = React.useState(false);
+    const { globalWallet } = 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) !== null && _a !== void 0 ? _a : {};
     if (!globalWallet)
         throw new Error('Global Wallet not found');
-    React.useEffect(() => {
-        let timeoutId;
-        if (bannerMessage) {
-            timeoutId = setTimeout(() => {
-                setBannerMessage(null);
-            }, 3000);
-        }
-        return () => {
-            if (timeoutId) {
-                clearTimeout(timeoutId);
-            }
-        };
-    }, [bannerMessage]);
-    const onClickBack = () => {
-        goToInitialDynamicWidgetView();
-    };
-    const onConnectClick = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const showBanner = React.useCallback((message, type) => {
+        setBannerMessage({ message, type });
+        const timeout = type === 'success' ? 2000 : 3000;
+        setTimeout(() => {
+            setBannerMessage(null);
+            if (type === 'success')
+                goToInitialDynamicWidgetView();
+        }, timeout);
+    }, [goToInitialDynamicWidgetView]);
+    const handlePairing = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         if (!walletConnectUri.startsWith('wc:')) {
-            setBannerMessage({
-                message: t('global_wallet.banner.bad_input'),
-                type: 'error',
-            });
+            showBanner(t('global_wallet.banner.bad_input'), 'error');
             return;
         }
         try {
             yield globalWallet.pairWithWC(walletConnectUri);
-            // wait 0.5 second to receive the pairing request event
             yield new Promise((resolve) => setTimeout(resolve, 500));
             const pendingPairing = globalWallet.getPendingPairing();
             if (!pendingPairing)
                 throw new Error('No pending pairing');
-            const { name, url, icons } = pendingPairing.params
-                .proposer.metadata;
+            const { name, url, icons } = pendingPairing.params.proposer.metadata;
             setView('global-wallet-confirm', {
-                onCancel: onCancelPairing,
-                onConfirm: onConfirmPairing,
+                onCancel: () => {
+                    setDynamicWidgetView('global-wallet');
+                    setShowAuthFlow(false, {
+                        ignoreIfIsEmbeddedWidget: false,
+                        performMultiWalletChecks: false,
+                    });
+                    setWalletConnectUri('');
+                },
+                onConfirm: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+                    try {
+                        yield globalWallet.confirmPairing(true);
+                        setDynamicWidgetView('global-wallet');
+                        setShowAuthFlow(false, {
+                            ignoreIfIsEmbeddedWidget: false,
+                            performMultiWalletChecks: false,
+                        });
+                        showBanner(t('global_wallet.banner.success', {
+                            name: name !== null && name !== void 0 ? name : t('global_wallet.the_dapp'),
+                        }), 'success');
+                    }
+                    catch (error) {
+                        showBanner(t('global_wallet.banner.warning', {
+                            name: name !== null && name !== void 0 ? name : t('global_wallet.the_dapp'),
+                        }), 'error');
+                    }
+                }),
                 pairingInfo: { icons, name, url },
             });
             setShowAuthFlow(true, {
@@ -157,78 +174,50 @@ const GlobalWalletView = () => {
             });
         }
         catch (error) {
-            if (String(error).includes('expired')) {
-                setBannerMessage({
-                    message: t('global_wallet.banner.expired', {
-                        name: 'this app',
-                    }),
-                    type: 'error',
-                });
+            const errorMessage = String(error);
+            if (errorMessage.includes('expired')) {
+                showBanner(t('global_wallet.banner.expired'), 'error');
             }
-            else if (String(error).includes('exists')) {
-                setBannerMessage({
-                    message: t('global_wallet.banner.already_connected', {
-                        name: 'this app',
-                    }),
-                    type: 'success',
-                });
+            else if (errorMessage.includes('exists')) {
+                showBanner(t('global_wallet.banner.already_connected', {
+                    name: t('global_wallet.this_app'),
+                }), 'success');
             }
             else {
-                setBannerMessage({
-                    message: t('global_wallet.banner.warning', { name: 'the app' }),
-                    type: 'error',
-                });
+                showBanner(t('global_wallet.banner.warning', {
+                    name: t('global_wallet.the_dapp'),
+                }), 'error');
             }
         }
-    });
-    const onConfirmPairing = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        const pendingConnection = (_a = globalWallet.getPendingPairing()) !== null && _a !== void 0 ? _a : {};
-        const { name } = pendingConnection.params.proposer.metadata;
-        try {
-            yield globalWallet.confirmPairing(true);
-            setDynamicWidgetView('global-wallet');
-            setShowAuthFlow(false, {
-                ignoreIfIsEmbeddedWidget: false,
-                performMultiWalletChecks: false,
-            });
-            setBannerMessage({
-                message: t('global_wallet.banner.success', {
-                    name: name !== null && name !== void 0 ? name : 'the dApp',
-                }),
-                type: 'success',
-            });
-        }
-        catch (error) {
-            setBannerMessage({
-                message: t('global_wallet.banner.warning', {
-                    name: name !== null && name !== void 0 ? name : 'the dApp',
-                }),
-                type: 'error',
-            });
+    }), // eslint-disable-next-line react-hooks/exhaustive-deps
+    [walletConnectUri]);
+    const handleScan = React.useCallback((result) => {
+        if (result) {
+            setIsScanned(true);
+            setWalletConnectUri(result);
         }
-    });
-    const onCancelPairing = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        setDynamicWidgetView('global-wallet');
-        setShowAuthFlow(false, {
-            ignoreIfIsEmbeddedWidget: false,
-            performMultiWalletChecks: false,
-        });
-    });
-    const handleSubmit = (e) => {
-        e.preventDefault();
-        onConnectClick();
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === 'Enter') {
-            handleSubmit(e);
+    }, []);
+    React.useEffect(() => {
+        if (walletConnectUri.startsWith('wc:')) {
+            handlePairing();
         }
-    };
-    const InlineWalletConnectTypography = () => (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', children: jsxRuntime.jsxs("span", { className: 'inline-logo-text', children: ["3. Open WalletConnect ", jsxRuntime.jsx(blueWalletconnect.ReactComponent, { className: 'inline-logo' }), ' ', "from the list"] }) }));
-    const InlineCopyTextTypography = () => (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', children: jsxRuntime.jsxs("span", { className: 'inline-logo-text', children: ["4. Locate and click ", jsxRuntime.jsx(copy.ReactComponent, { className: 'inline-logo' }), " to copy the URI code"] }) }));
-    return (jsxRuntime.jsxs("div", { className: 'connect-dapps-view', children: [jsxRuntime.jsxs("div", { className: 'header', children: [jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }), jsxRuntime.jsx(Typography.Typography, { variant: 'title', weight: 'medium', color: 'primary', as: 'h1', children: "Connect to apps" })] }), jsxRuntime.jsxs("div", { className: 'wallet-connect-card', children: [jsxRuntime.jsx("div", { className: 'input-group', children: jsxRuntime.jsx(Input.Input, { id: 'walletconnect-uri', label: 'WalletConnect URI', placeholder: 'wc:...', value: walletConnectUri, onChange: (e) => setWalletConnectUri(e.target.value), variant: 'dense', onKeyDown: handleKeyDown, suffix: 
-                            // eslint-disable-next-line react/jsx-wrap-multilines
-                            jsxRuntime.jsx("div", { className: 'input-suffix', onClick: handleSubmit, role: 'button', tabIndex: 0, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), children: jsxRuntime.jsx(InlineSubmitButton.InlineSubmitButton, { disabled: false, highlighted: Boolean(walletConnectUri), isFocused: isFocused, isHovered: isHovered, emailSubmitButtonInsideInput: true }) }) }) }), bannerMessage && (jsxRuntime.jsx("div", { className: `banner ${bannerMessage.type}`, children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', color: 'primary', children: bannerMessage.message }) }))] }), jsxRuntime.jsx("div", { className: 'info-card', children: jsxRuntime.jsxs("div", { className: 'wrapper', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'bold', color: 'primary', as: 'h2', children: t('global_wallet.help.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', children: t('global_wallet.help.step.1') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', children: t('global_wallet.help.step.2') }), jsxRuntime.jsx(InlineWalletConnectTypography, {}), jsxRuntime.jsx(InlineCopyTextTypography, {})] }) })] }));
+    }, [walletConnectUri, handlePairing]);
+    const renderHeader = () => (jsxRuntime.jsxs("div", { className: 'header', children: [jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: goToInitialDynamicWidgetView, "data-testid": 'back-button', children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }), jsxRuntime.jsx(Typography.Typography, { variant: 'title', weight: 'medium', color: 'primary', as: 'h1', copykey: 'global_wallet.connect_to_apps', children: t('global_wallet.connect_to_apps') }), utils.isMobile() && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: () => {
+                    setView('global-wallet-info');
+                    setShowAuthFlow(true, {
+                        ignoreIfIsEmbeddedWidget: false,
+                        performMultiWalletChecks: false,
+                    });
+                }, "data-testid": 'info-button', children: jsxRuntime.jsx(questionMark.ReactComponent, {}) }))] }));
+    const renderScanner = () => utils.isMobile() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'scanner-wrapper', children: [jsxRuntime.jsx(GlobalWalletScanner.GlobalWalletScanner, { onScan: handleScan, jsQR: globalWallet.qrScanner }), jsxRuntime.jsxs("div", { className: 'scanner-overlay', children: [jsxRuntime.jsxs("div", { className: 'scanner-frame', children: [jsxRuntime.jsx("div", { className: 'corner top-left' }), jsxRuntime.jsx("div", { className: 'corner top-right' }), jsxRuntime.jsx("div", { className: 'corner bottom-left' }), jsxRuntime.jsx("div", { className: 'corner bottom-right' })] }), jsxRuntime.jsxs("div", { className: 'scanner-overlay-content', children: [jsxRuntime.jsx(blueWalletconnect.ReactComponent, { className: 'scanner-icon' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', color: 'white', copykey: 'global_wallet.scan_qr_code', children: t('global_wallet.scan_qr_code') })] })] })] }), jsxRuntime.jsx(Divider.Divider, { text: t('global_wallet.or') })] }));
+    const renderInput = () => (jsxRuntime.jsxs("div", { className: 'wallet-connect-card', children: [jsxRuntime.jsx("div", { className: 'input-group', children: jsxRuntime.jsx(Input.Input, { copykey: 'global_wallet.walletconnect_uri', id: 'walletconnect-uri', label: t('global_wallet.walletconnect_uri'), placeholder: 'wc:...', value: isScanned ? '' : walletConnectUri, onChange: (e) => {
+                        setWalletConnectUri(e.target.value);
+                        setIsScanned(false);
+                    }, variant: 'dense', onKeyDown: (e) => e.key === 'Enter' && handlePairing(), suffix: 
+                    // eslint-disable-next-line react/jsx-wrap-multilines
+                    jsxRuntime.jsx("div", { className: 'input-suffix', onClick: handlePairing, role: 'button', tabIndex: 0, children: jsxRuntime.jsx(InlineSubmitButton.InlineSubmitButton, { disabled: false, highlighted: Boolean(walletConnectUri) && !isScanned, isFocused: false, isHovered: false, emailSubmitButtonInsideInput: true }) }) }) }), bannerMessage && (jsxRuntime.jsx("div", { className: `banner ${bannerMessage.type}`, children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', color: 'primary', children: bannerMessage.message }) }))] }));
+    const renderInfoCard = () => !utils.isMobile() && (jsxRuntime.jsx("div", { className: 'info-card', children: jsxRuntime.jsxs("div", { className: 'wrapper', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'bold', color: 'primary', as: 'h2', children: t('global_wallet.help.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', children: t('global_wallet.help.step.1') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', children: t('global_wallet.help.step.2') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', children: jsxRuntime.jsxs("span", { className: 'inline-logo-text', children: ["3. Open WalletConnect", jsxRuntime.jsx(blueWalletconnect.ReactComponent, { className: 'inline-logo' }), " from the list"] }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', children: jsxRuntime.jsxs("span", { className: 'inline-logo-text', children: ["4. Locate and click ", jsxRuntime.jsx(copy.ReactComponent, { className: 'inline-logo' }), " to copy the URI code"] }) })] }) }));
+    return (jsxRuntime.jsxs("div", { className: 'connect-dapps-view', children: [renderHeader(), renderScanner(), renderInput(), renderInfoCard()] }));
 };
 
 exports.GlobalWalletView = GlobalWalletView;