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

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

@@ -1,8 +1,9 @@
 'use client'
 import { __awaiter } from '../../../../../../_virtual/_tslib.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { isMobile } from '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api-core';
 import '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
@@ -11,13 +12,13 @@ import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgArrowLeft } from '../../../../shared/assets/arrow-left.js';
 import { ReactComponent as SvgCopy } from '../../../../shared/assets/copy.js';
 import { ReactComponent as SvgBlueWalletconnect } from '../../../../shared/assets/blue-walletconnect.js';
+import { ReactComponent as SvgQuestionMark } from '../../../../shared/assets/question-mark.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';
 import { IconButton } from '../../../../components/IconButton/IconButton.js';
 import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
@@ -64,6 +65,7 @@ import '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
+import { Divider } from '../../../../components/Divider/Divider.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import 'formik';
 import '../../../../store/state/sendBalances/sendBalances.js';
@@ -71,6 +73,7 @@ import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMe
 import { Input } from '../../../../components/Input/Input.js';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import { GlobalWalletScanner } from './scanner/GlobalWalletScanner.js';
 import '../../../../../polyfills.js';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '../../../../context/ErrorBoundary/ErrorBoundaryBase.js';
@@ -97,6 +100,7 @@ import '../../../../components/InlineWidget/InlineWidget.js';
 import 'qrcode';
 
 const GlobalWalletView = () => {
+    var _a;
     const { t } = useTranslation();
     const { setDynamicWidgetView, goToInitialDynamicWidgetView } = useWidgetContext();
     const { setView } = useViewContext();
@@ -104,47 +108,60 @@ const GlobalWalletView = () => {
     const { primaryWallet } = useDynamicContext();
     const [walletConnectUri, setWalletConnectUri] = useState('');
     const [bannerMessage, setBannerMessage] = useState(null);
-    const [isHovered, setIsHovered] = useState(false);
-    const [isFocused, setIsFocused] = useState(false);
-    const { globalWallet } = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
+    const [isScanned, setIsScanned] = 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');
-    useEffect(() => {
-        let timeoutId;
-        if (bannerMessage) {
-            timeoutId = setTimeout(() => {
-                setBannerMessage(null);
-            }, 3000);
-        }
-        return () => {
-            if (timeoutId) {
-                clearTimeout(timeoutId);
-            }
-        };
-    }, [bannerMessage]);
-    const onClickBack = () => {
-        goToInitialDynamicWidgetView();
-    };
-    const onConnectClick = () => __awaiter(void 0, void 0, void 0, function* () {
+    const showBanner = useCallback((message, type) => {
+        setBannerMessage({ message, type });
+        const timeout = type === 'success' ? 2000 : 3000;
+        setTimeout(() => {
+            setBannerMessage(null);
+            if (type === 'success')
+                goToInitialDynamicWidgetView();
+        }, timeout);
+    }, [goToInitialDynamicWidgetView]);
+    const handlePairing = useCallback(() => __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: () => __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, {
@@ -153,78 +170,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 = () => __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 = useCallback((result) => {
+        if (result) {
+            setIsScanned(true);
+            setWalletConnectUri(result);
         }
-    });
-    const onCancelPairing = () => __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);
+    }, []);
+    useEffect(() => {
+        if (walletConnectUri.startsWith('wc:')) {
+            handlePairing();
         }
-    };
-    const InlineWalletConnectTypography = () => (jsx(Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', children: jsxs("span", { className: 'inline-logo-text', children: ["3. Open WalletConnect ", jsx(SvgBlueWalletconnect, { className: 'inline-logo' }), ' ', "from the list"] }) }));
-    const InlineCopyTextTypography = () => (jsx(Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', children: jsxs("span", { className: 'inline-logo-text', children: ["4. Locate and click ", jsx(SvgCopy, { className: 'inline-logo' }), " to copy the URI code"] }) }));
-    return (jsxs("div", { className: 'connect-dapps-view', children: [jsxs("div", { className: 'header', children: [jsx(IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsx(SvgArrowLeft, {}) }), jsx(Typography, { variant: 'title', weight: 'medium', color: 'primary', as: 'h1', children: "Connect to apps" })] }), jsxs("div", { className: 'wallet-connect-card', children: [jsx("div", { className: 'input-group', children: jsx(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
-                            jsx("div", { className: 'input-suffix', onClick: handleSubmit, role: 'button', tabIndex: 0, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), children: jsx(InlineSubmitButton, { disabled: false, highlighted: Boolean(walletConnectUri), isFocused: isFocused, isHovered: isHovered, emailSubmitButtonInsideInput: true }) }) }) }), bannerMessage && (jsx("div", { className: `banner ${bannerMessage.type}`, children: jsx(Typography, { variant: 'body_small', weight: 'regular', color: 'primary', children: bannerMessage.message }) }))] }), jsx("div", { className: 'info-card', children: jsxs("div", { className: 'wrapper', children: [jsx(Typography, { variant: 'body_small', weight: 'bold', color: 'primary', as: 'h2', children: t('global_wallet.help.title') }), 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') }), jsx(InlineWalletConnectTypography, {}), jsx(InlineCopyTextTypography, {})] }) })] }));
+    }, [walletConnectUri, handlePairing]);
+    const renderHeader = () => (jsxs("div", { className: 'header', children: [jsx(IconButton, { type: 'button', onClick: goToInitialDynamicWidgetView, "data-testid": 'back-button', children: jsx(SvgArrowLeft, {}) }), jsx(Typography, { variant: 'title', weight: 'medium', color: 'primary', as: 'h1', copykey: 'global_wallet.connect_to_apps', children: t('global_wallet.connect_to_apps') }), isMobile() && (jsx(IconButton, { type: 'button', onClick: () => {
+                    setView('global-wallet-info');
+                    setShowAuthFlow(true, {
+                        ignoreIfIsEmbeddedWidget: false,
+                        performMultiWalletChecks: false,
+                    });
+                }, "data-testid": 'info-button', children: jsx(SvgQuestionMark, {}) }))] }));
+    const renderScanner = () => isMobile() && (jsxs(Fragment, { children: [jsxs("div", { className: 'scanner-wrapper', children: [jsx(GlobalWalletScanner, { onScan: handleScan, jsQR: globalWallet.qrScanner }), jsxs("div", { className: 'scanner-overlay', children: [jsxs("div", { className: 'scanner-frame', children: [jsx("div", { className: 'corner top-left' }), jsx("div", { className: 'corner top-right' }), jsx("div", { className: 'corner bottom-left' }), jsx("div", { className: 'corner bottom-right' })] }), jsxs("div", { className: 'scanner-overlay-content', children: [jsx(SvgBlueWalletconnect, { className: 'scanner-icon' }), jsx(Typography, { variant: 'body_small', weight: 'regular', color: 'white', copykey: 'global_wallet.scan_qr_code', children: t('global_wallet.scan_qr_code') })] })] })] }), jsx(Divider, { text: t('global_wallet.or') })] }));
+    const renderInput = () => (jsxs("div", { className: 'wallet-connect-card', children: [jsx("div", { className: 'input-group', children: jsx(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
+                    jsx("div", { className: 'input-suffix', onClick: handlePairing, role: 'button', tabIndex: 0, children: jsx(InlineSubmitButton, { disabled: false, highlighted: Boolean(walletConnectUri) && !isScanned, isFocused: false, isHovered: false, emailSubmitButtonInsideInput: true }) }) }) }), bannerMessage && (jsx("div", { className: `banner ${bannerMessage.type}`, children: jsx(Typography, { variant: 'body_small', weight: 'regular', color: 'primary', children: bannerMessage.message }) }))] }));
+    const renderInfoCard = () => !isMobile() && (jsx("div", { className: 'info-card', children: jsxs("div", { className: 'wrapper', children: [jsx(Typography, { variant: 'body_small', weight: 'bold', color: 'primary', as: 'h2', children: t('global_wallet.help.title') }), 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') }), jsx(Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', children: jsxs("span", { className: 'inline-logo-text', children: ["3. Open WalletConnect", jsx(SvgBlueWalletconnect, { className: 'inline-logo' }), " from the list"] }) }), jsx(Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', children: jsxs("span", { className: 'inline-logo-text', children: ["4. Locate and click ", jsx(SvgCopy, { className: 'inline-logo' }), " to copy the URI code"] }) })] }) }));
+    return (jsxs("div", { className: 'connect-dapps-view', children: [renderHeader(), renderScanner(), renderInput(), renderInfoCard()] }));
 };
 
 export { GlobalWalletView, GlobalWalletView as default };

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

@@ -0,0 +1,54 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const GlobalWalletScanner = ({ onScan, jsQR, }) => {
+    const videoRef = React.useRef(null);
+    const canvasRef = React.useRef(null);
+    React.useEffect(() => {
+        const video = videoRef.current;
+        const canvas = canvasRef.current;
+        if (!video || !canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const constraints = {
+            video: { facingMode: 'environment' },
+        };
+        navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
+            video.srcObject = stream;
+            video.setAttribute('playsinline', 'true'); // required to tell iOS safari we don't want fullscreen
+            video.play();
+            requestAnimationFrame(tick);
+        });
+        const tick = () => {
+            if (video.readyState === video.HAVE_ENOUGH_DATA) {
+                canvas.height = video.videoHeight;
+                canvas.width = video.videoWidth;
+                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+                const code = jsQR(imageData.data, imageData.width, imageData.height, {
+                    inversionAttempts: 'dontInvert',
+                });
+                if (code) {
+                    onScan(code.data);
+                }
+            }
+            requestAnimationFrame(tick);
+        };
+        return () => {
+            const stream = video.srcObject;
+            const tracks = stream === null || stream === void 0 ? void 0 : stream.getTracks();
+            tracks === null || tracks === void 0 ? void 0 : tracks.forEach((track) => track.stop());
+        };
+    }, [onScan]);
+    return (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("div", { className: 'videoWrapper', children: [jsxRuntime.jsx("video", { ref: videoRef, className: 'qrVideo' }), jsxRuntime.jsx("canvas", { ref: canvasRef, style: { display: 'none' } })] }) }));
+};
+
+exports.GlobalWalletScanner = GlobalWalletScanner;
+exports["default"] = GlobalWalletScanner;

package/src/lib/widgets/DynamicWidget/views/GlobalWalletView/scanner/GlobalWalletScanner.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface GlobalWalletScannerProps {
+    jsQR: (data: Uint8ClampedArray, width: number, height: number, providedOptions?: any) => any;
+    onScan: (result: string) => void;
+}
+export declare const GlobalWalletScanner: React.FC<GlobalWalletScannerProps>;
+export default GlobalWalletScanner;

package/src/lib/widgets/DynamicWidget/views/GlobalWalletView/scanner/GlobalWalletScanner.js

@@ -0,0 +1,49 @@
+'use client'
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+
+const GlobalWalletScanner = ({ onScan, jsQR, }) => {
+    const videoRef = useRef(null);
+    const canvasRef = useRef(null);
+    useEffect(() => {
+        const video = videoRef.current;
+        const canvas = canvasRef.current;
+        if (!video || !canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const constraints = {
+            video: { facingMode: 'environment' },
+        };
+        navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
+            video.srcObject = stream;
+            video.setAttribute('playsinline', 'true'); // required to tell iOS safari we don't want fullscreen
+            video.play();
+            requestAnimationFrame(tick);
+        });
+        const tick = () => {
+            if (video.readyState === video.HAVE_ENOUGH_DATA) {
+                canvas.height = video.videoHeight;
+                canvas.width = video.videoWidth;
+                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+                const code = jsQR(imageData.data, imageData.width, imageData.height, {
+                    inversionAttempts: 'dontInvert',
+                });
+                if (code) {
+                    onScan(code.data);
+                }
+            }
+            requestAnimationFrame(tick);
+        };
+        return () => {
+            const stream = video.srcObject;
+            const tracks = stream === null || stream === void 0 ? void 0 : stream.getTracks();
+            tracks === null || tracks === void 0 ? void 0 : tracks.forEach((track) => track.stop());
+        };
+    }, [onScan]);
+    return (jsx("div", { children: jsxs("div", { className: 'videoWrapper', children: [jsx("video", { ref: videoRef, className: 'qrVideo' }), jsx("canvas", { ref: canvasRef, style: { display: 'none' } })] }) }));
+};
+
+export { GlobalWalletScanner, GlobalWalletScanner as default };