@dynamic-labs/sdk-react-core 2.0.0-alpha.26 → 2.0.0-alpha.27

package/CHANGELOG.md

@@ -1,4 +1,13 @@
 
+## [2.0.0-alpha.27](https://github.com/dynamic-labs/DynamicAuth/compare/v2.0.0-alpha.26...v2.0.0-alpha.27) (2024-04-09)
+
+
+### Bug Fixes
+
+* coinbase improvements ([#5268](https://github.com/dynamic-labs/DynamicAuth/issues/5268)) ([c10a6de](https://github.com/dynamic-labs/DynamicAuth/commit/c10a6debcacff6cd97f2436fbde387f85faa5682))
+* show qr code for metamask on desktop when not installed ([#5262](https://github.com/dynamic-labs/DynamicAuth/issues/5262)) ([1dcb4d9](https://github.com/dynamic-labs/DynamicAuth/commit/1dcb4d98de8a95f6b11d7bad90b9059110087385))
+* update title of hardware wallet select screen ([#5270](https://github.com/dynamic-labs/DynamicAuth/issues/5270)) ([6e8fe17](https://github.com/dynamic-labs/DynamicAuth/commit/6e8fe17306677786ccf528b97ab673b9ae6b57b9))
+
 ## [2.0.0-alpha.26](https://github.com/dynamic-labs/DynamicAuth/compare/v2.0.0-alpha.25...v2.0.0-alpha.26) (2024-04-08)
 
 

package/package.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "2.0.0-alpha.26";
+var version = "2.0.0-alpha.27";
 var dependencies = {
 	"@dynamic-labs/sdk-api": "0.0.410",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.js

@@ -1,4 +1,4 @@
-var version = "2.0.0-alpha.26";
+var version = "2.0.0-alpha.27";
 var dependencies = {
 	"@dynamic-labs/sdk-api": "0.0.410",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "2.0.0-alpha.26",
+  "version": "2.0.0-alpha.27",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -17,18 +17,18 @@
     "react-i18next": "13.5.0",
     "yup": "0.32.11",
     "react-international-phone": "4.2.5",
-    "@dynamic-labs/ethereum": "2.0.0-alpha.26",
-    "@dynamic-labs/iconic": "2.0.0-alpha.26",
-    "@dynamic-labs/logger": "2.0.0-alpha.26",
-    "@dynamic-labs/multi-wallet": "2.0.0-alpha.26",
-    "@dynamic-labs/rpc-provider-ethereum": "2.0.0-alpha.26",
-    "@dynamic-labs/rpc-provider-solana": "2.0.0-alpha.26",
-    "@dynamic-labs/rpc-providers": "2.0.0-alpha.26",
-    "@dynamic-labs/types": "2.0.0-alpha.26",
-    "@dynamic-labs/utils": "2.0.0-alpha.26",
-    "@dynamic-labs/viem-utils": "2.0.0-alpha.26",
-    "@dynamic-labs/wallet-book": "2.0.0-alpha.26",
-    "@dynamic-labs/wallet-connector-core": "2.0.0-alpha.26",
+    "@dynamic-labs/ethereum": "2.0.0-alpha.27",
+    "@dynamic-labs/iconic": "2.0.0-alpha.27",
+    "@dynamic-labs/logger": "2.0.0-alpha.27",
+    "@dynamic-labs/multi-wallet": "2.0.0-alpha.27",
+    "@dynamic-labs/rpc-provider-ethereum": "2.0.0-alpha.27",
+    "@dynamic-labs/rpc-provider-solana": "2.0.0-alpha.27",
+    "@dynamic-labs/rpc-providers": "2.0.0-alpha.27",
+    "@dynamic-labs/types": "2.0.0-alpha.27",
+    "@dynamic-labs/utils": "2.0.0-alpha.27",
+    "@dynamic-labs/viem-utils": "2.0.0-alpha.27",
+    "@dynamic-labs/wallet-book": "2.0.0-alpha.27",
+    "@dynamic-labs/wallet-connector-core": "2.0.0-alpha.27",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/lib/components/CopyButton/CopyButton.cjs

@@ -6,16 +6,21 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var TextButton = require('../TextButton/TextButton.cjs');
+var Button = require('../Button/Button.cjs');
 var Tooltip = require('../Tooltip/Tooltip.cjs');
 
-const CopyButton = ({ children, className = '', textToCopy, onClick, }) => {
+const CopyButton = ({ children, className = '', textToCopy, onClick, variant = 'text', copykey, buttonPadding = 'small', buttonVariant = 'primary', buttonClassName = '', startSlot, }) => {
     const [copied, setCopied] = React.useState(false);
     const copyToClipboard = () => {
         navigator.clipboard.writeText(textToCopy);
         setCopied(true);
         onClick === null || onClick === void 0 ? void 0 : onClick();
     };
-    return (jsxRuntime.jsx(TextButton.TextButton, { className: classNames.classNames('copy-button__container', className), onClick: () => copyToClipboard(), onMouseLeave: () => setCopied(false), children: jsxRuntime.jsx(Tooltip.Tooltip, { className: 'copy-button__tooltip', content: copied ? 'Copied' : 'Copy', children: children }) }));
+    const CopyButtonTooltip = () => (jsxRuntime.jsx(Tooltip.Tooltip, { className: 'copy-button__tooltip', content: copied ? 'Copied' : 'Copy', children: children }));
+    if (variant === 'text') {
+        return (jsxRuntime.jsx(TextButton.TextButton, { className: classNames.classNames('copy-button__container', className), onClick: () => copyToClipboard(), onMouseLeave: () => setCopied(false), copykey: copykey, children: jsxRuntime.jsx(CopyButtonTooltip, {}) }));
+    }
+    return (jsxRuntime.jsx(Button.Button, { expanded: true, buttonPadding: buttonPadding, buttonVariant: buttonVariant, buttonClassName: buttonClassName, onClick: () => copyToClipboard(), copykey: copykey, startSlot: startSlot, children: jsxRuntime.jsx(CopyButtonTooltip, {}) }));
 };
 
 exports.CopyButton = CopyButton;

package/src/lib/components/CopyButton/CopyButton.d.ts

@@ -1,10 +1,12 @@
 import { ReactNode, ComponentPropsWithoutRef } from 'react';
 import { CopyKey } from '../../shared';
+import { ButtonProps } from '../Button/Button';
 type Props = ComponentPropsWithoutRef<'button'> & {
     children: ReactNode;
     className?: string;
     onClick?: VoidFunction;
     textToCopy: string;
-};
-export declare const CopyButton: ({ children, className, textToCopy, onClick, }: Props & CopyKey) => JSX.Element;
+    variant?: 'text' | 'button';
+} & CopyKey & Pick<ButtonProps, 'buttonPadding' | 'buttonVariant' | 'buttonClassName' | 'startSlot'>;
+export declare const CopyButton: ({ children, className, textToCopy, onClick, variant, copykey, buttonPadding, buttonVariant, buttonClassName, startSlot, }: Props) => JSX.Element;
 export {};

package/src/lib/components/CopyButton/CopyButton.js

@@ -2,16 +2,21 @@ import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { TextButton } from '../TextButton/TextButton.js';
+import { Button } from '../Button/Button.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 
-const CopyButton = ({ children, className = '', textToCopy, onClick, }) => {
+const CopyButton = ({ children, className = '', textToCopy, onClick, variant = 'text', copykey, buttonPadding = 'small', buttonVariant = 'primary', buttonClassName = '', startSlot, }) => {
     const [copied, setCopied] = useState(false);
     const copyToClipboard = () => {
         navigator.clipboard.writeText(textToCopy);
         setCopied(true);
         onClick === null || onClick === void 0 ? void 0 : onClick();
     };
-    return (jsx(TextButton, { className: classNames('copy-button__container', className), onClick: () => copyToClipboard(), onMouseLeave: () => setCopied(false), children: jsx(Tooltip, { className: 'copy-button__tooltip', content: copied ? 'Copied' : 'Copy', children: children }) }));
+    const CopyButtonTooltip = () => (jsx(Tooltip, { className: 'copy-button__tooltip', content: copied ? 'Copied' : 'Copy', children: children }));
+    if (variant === 'text') {
+        return (jsx(TextButton, { className: classNames('copy-button__container', className), onClick: () => copyToClipboard(), onMouseLeave: () => setCopied(false), copykey: copykey, children: jsx(CopyButtonTooltip, {}) }));
+    }
+    return (jsx(Button, { expanded: true, buttonPadding: buttonPadding, buttonVariant: buttonVariant, buttonClassName: buttonClassName, onClick: () => copyToClipboard(), copykey: copykey, startSlot: startSlot, children: jsx(CopyButtonTooltip, {}) }));
 };
 
 export { CopyButton };

package/src/lib/components/QrCodeWrapper/QrCodeContainer/QrCodeContainer.cjs

@@ -9,7 +9,7 @@ require('@dynamic-labs/sdk-api');
 require('../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
-require('../../../context/ViewContext/ViewContext.cjs');
+var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
 require('react');
 var externalLink = require('../../../shared/assets/externalLink.cjs');
 var link = require('../../../shared/assets/link.cjs');
@@ -62,6 +62,7 @@ require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../IconButton/IconButton.cjs');
 require('../../MenuList/Dropdown/Dropdown.cjs');
 require('formik');
+var Button = require('../../Button/Button.cjs');
 require('../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../Alert/Alert.cjs');
 require('../../Input/Input.cjs');
@@ -71,7 +72,6 @@ require('../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCa
 var CopyButton = require('../../CopyButton/CopyButton.cjs');
 require('../../InlineWidget/InlineWidget.cjs');
 require('../../IsBrowser/IsBrowser.cjs');
-var TextButton = require('../../TextButton/TextButton.cjs');
 require('../../Popper/Popper/Popper.cjs');
 require('../../Popper/PopperContext/PopperContext.cjs');
 var QRCode = require('../../QRCode/QRCode.cjs');
@@ -82,16 +82,25 @@ require('../../../views/LoginView/sections/PhoneNumberSignInSection/PhoneNumberS
 
 const QrCodeContainer = ({ accentColor, walletConnector, qrcodeValue, Icon: MainIcon, showCopyToClipboardButton = false, desktopUri, showQrCodeMessage, showQrCodeImage, }) => {
     const { t } = reactI18next.useTranslation();
+    const { setView } = ViewContext.useViewContext();
+    const renderAppOrExtensionButton = () => {
+        if ((walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key) === 'walletconnect') {
+            return null;
+        }
+        if (desktopUri) {
+            return (jsxRuntime.jsx(Button.Button, { expanded: true, dataTestId: 'get-extension-button', buttonPadding: 'small', buttonVariant: 'primary', buttonClassName: 'qr-code-button', onClick: () => window.open(desktopUri), copykey: 'dyn_qr_code.open_button', typographyProps: { variant: 'button_secondary' }, startSlot: 
+                // eslint-disable-next-line react/jsx-wrap-multilines
+                jsxRuntime.jsx(Icon.Icon, { size: 'xsmall', color: 'text-tertiary', children: jsxRuntime.jsx(externalLink.ReactComponent, {}) }), children: t('dyn_qr_code.open_button') }));
+        }
+        return (jsxRuntime.jsx(Button.Button, { expanded: true, dataTestId: 'get-extension-button', buttonPadding: 'small', buttonVariant: 'primary', buttonClassName: 'qr-code-button', onClick: () => setView('no-qr-not-installed'), copykey: 'dyn_qr_code.get_extension_button', typographyProps: { variant: 'button_secondary' }, startSlot: 
+            // eslint-disable-next-line react/jsx-wrap-multilines
+            jsxRuntime.jsx(Icon.Icon, { size: 'xsmall', color: 'text-tertiary', children: jsxRuntime.jsx(externalLink.ReactComponent, {}) }), children: t('dyn_qr_code.get_extension_button') }));
+    };
     return (jsxRuntime.jsxs("div", { className: classNames.classNames('qrcode-container__container', {
             'qrcode-container__container--message': showQrCodeMessage,
-        }), children: [jsxRuntime.jsxs("div", { className: 'qrcode-container__top', children: [qrcodeValue ? (jsxRuntime.jsx(QRCode.QRCode, { Icon: MainIcon, accentColor: accentColor, value: qrcodeValue, logoSize: 50, walletKey: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key, showQrCodeImage: showQrCodeImage })) : (
-                    // this div exists to give the parent a child, so that the parent
-                    // takes on its given width and height. the result is stable
-                    // rendering of this component, without this there is a brief flash
-                    jsxRuntime.jsx("div", {})), jsxRuntime.jsx(MockedQrCode.MockedQrCode, {}), ((showCopyToClipboardButton && qrcodeValue) || desktopUri) && (jsxRuntime.jsxs("div", { className: 'button-container', children: [showCopyToClipboardButton && qrcodeValue && (jsxRuntime.jsx(CopyButton.CopyButton, { textToCopy: qrcodeValue, copykey: 'dyn_qr_code.copy_button', children: jsxRuntime.jsxs("div", { className: 'button__content', children: [jsxRuntime.jsx(Icon.Icon, { size: 'small', color: 'text-tertiary', children: jsxRuntime.jsx(link.ReactComponent, {}) }), t('dyn_qr_code.copy_button')] }) })), desktopUri && (jsxRuntime.jsxs(TextButton.TextButton, { className: 'desktop-button', onClick: () => window.open(desktopUri), copykey: 'dyn_qr_code.open_button', children: [jsxRuntime.jsx(Icon.Icon, { size: 'xsmall', color: 'text-tertiary', children: jsxRuntime.jsx(externalLink.ReactComponent, {}) }), Boolean(walletConnector) &&
-                                        t('dyn_qr_code.open_button', {
-                                            wallet: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.name,
-                                        })] }))] }))] }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', className: 'qrcode-container__content', copykey: 'dyn_qr_code.scan_title', children: t('dyn_qr_code.scan_title', {
+        }), children: [jsxRuntime.jsxs("div", { className: 'qrcode-container__top', children: [qrcodeValue && (jsxRuntime.jsx(QRCode.QRCode, { Icon: MainIcon, accentColor: accentColor, value: qrcodeValue, logoSize: 50, walletKey: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key, showQrCodeImage: showQrCodeImage })), jsxRuntime.jsx(MockedQrCode.MockedQrCode, {}), jsxRuntime.jsxs("div", { className: 'button-container', children: [showCopyToClipboardButton && qrcodeValue && (jsxRuntime.jsx(CopyButton.CopyButton, { variant: 'button', textToCopy: qrcodeValue, buttonClassName: 'qr-code-button', copykey: 'dyn_qr_code.copy_button', startSlot: 
+                                // eslint-disable-next-line react/jsx-wrap-multilines
+                                jsxRuntime.jsx(Icon.Icon, { size: 'mini', color: 'text-tertiary', children: jsxRuntime.jsx(link.ReactComponent, {}) }), children: t('dyn_qr_code.copy_button') })), renderAppOrExtensionButton()] })] }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', className: 'qrcode-container__content', copykey: 'dyn_qr_code.scan_title', children: t('dyn_qr_code.scan_title', {
                     app: walletConnector ? 'wallet' : 'app',
                 }) })] }));
 };

package/src/lib/components/QrCodeWrapper/QrCodeContainer/QrCodeContainer.js

@@ -5,7 +5,7 @@ import '@dynamic-labs/sdk-api';
 import '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
-import '../../../context/ViewContext/ViewContext.js';
+import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
 import 'react';
 import { ReactComponent as SvgExternalLink } from '../../../shared/assets/externalLink.js';
 import { ReactComponent as SvgLink } from '../../../shared/assets/link.js';
@@ -58,6 +58,7 @@ import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../IconButton/IconButton.js';
 import '../../MenuList/Dropdown/Dropdown.js';
 import 'formik';
+import { Button } from '../../Button/Button.js';
 import '../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../Alert/Alert.js';
 import '../../Input/Input.js';
@@ -67,7 +68,6 @@ import '../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCar
 import { CopyButton } from '../../CopyButton/CopyButton.js';
 import '../../InlineWidget/InlineWidget.js';
 import '../../IsBrowser/IsBrowser.js';
-import { TextButton } from '../../TextButton/TextButton.js';
 import '../../Popper/Popper/Popper.js';
 import '../../Popper/PopperContext/PopperContext.js';
 import { QRCode } from '../../QRCode/QRCode.js';
@@ -78,16 +78,25 @@ import '../../../views/LoginView/sections/PhoneNumberSignInSection/PhoneNumberSi
 
 const QrCodeContainer = ({ accentColor, walletConnector, qrcodeValue, Icon: MainIcon, showCopyToClipboardButton = false, desktopUri, showQrCodeMessage, showQrCodeImage, }) => {
     const { t } = useTranslation();
+    const { setView } = useViewContext();
+    const renderAppOrExtensionButton = () => {
+        if ((walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key) === 'walletconnect') {
+            return null;
+        }
+        if (desktopUri) {
+            return (jsx(Button, { expanded: true, dataTestId: 'get-extension-button', buttonPadding: 'small', buttonVariant: 'primary', buttonClassName: 'qr-code-button', onClick: () => window.open(desktopUri), copykey: 'dyn_qr_code.open_button', typographyProps: { variant: 'button_secondary' }, startSlot: 
+                // eslint-disable-next-line react/jsx-wrap-multilines
+                jsx(Icon, { size: 'xsmall', color: 'text-tertiary', children: jsx(SvgExternalLink, {}) }), children: t('dyn_qr_code.open_button') }));
+        }
+        return (jsx(Button, { expanded: true, dataTestId: 'get-extension-button', buttonPadding: 'small', buttonVariant: 'primary', buttonClassName: 'qr-code-button', onClick: () => setView('no-qr-not-installed'), copykey: 'dyn_qr_code.get_extension_button', typographyProps: { variant: 'button_secondary' }, startSlot: 
+            // eslint-disable-next-line react/jsx-wrap-multilines
+            jsx(Icon, { size: 'xsmall', color: 'text-tertiary', children: jsx(SvgExternalLink, {}) }), children: t('dyn_qr_code.get_extension_button') }));
+    };
     return (jsxs("div", { className: classNames('qrcode-container__container', {
             'qrcode-container__container--message': showQrCodeMessage,
-        }), children: [jsxs("div", { className: 'qrcode-container__top', children: [qrcodeValue ? (jsx(QRCode, { Icon: MainIcon, accentColor: accentColor, value: qrcodeValue, logoSize: 50, walletKey: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key, showQrCodeImage: showQrCodeImage })) : (
-                    // this div exists to give the parent a child, so that the parent
-                    // takes on its given width and height. the result is stable
-                    // rendering of this component, without this there is a brief flash
-                    jsx("div", {})), jsx(MockedQrCode, {}), ((showCopyToClipboardButton && qrcodeValue) || desktopUri) && (jsxs("div", { className: 'button-container', children: [showCopyToClipboardButton && qrcodeValue && (jsx(CopyButton, { textToCopy: qrcodeValue, copykey: 'dyn_qr_code.copy_button', children: jsxs("div", { className: 'button__content', children: [jsx(Icon, { size: 'small', color: 'text-tertiary', children: jsx(SvgLink, {}) }), t('dyn_qr_code.copy_button')] }) })), desktopUri && (jsxs(TextButton, { className: 'desktop-button', onClick: () => window.open(desktopUri), copykey: 'dyn_qr_code.open_button', children: [jsx(Icon, { size: 'xsmall', color: 'text-tertiary', children: jsx(SvgExternalLink, {}) }), Boolean(walletConnector) &&
-                                        t('dyn_qr_code.open_button', {
-                                            wallet: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.name,
-                                        })] }))] }))] }), jsx(Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', className: 'qrcode-container__content', copykey: 'dyn_qr_code.scan_title', children: t('dyn_qr_code.scan_title', {
+        }), children: [jsxs("div", { className: 'qrcode-container__top', children: [qrcodeValue && (jsx(QRCode, { Icon: MainIcon, accentColor: accentColor, value: qrcodeValue, logoSize: 50, walletKey: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key, showQrCodeImage: showQrCodeImage })), jsx(MockedQrCode, {}), jsxs("div", { className: 'button-container', children: [showCopyToClipboardButton && qrcodeValue && (jsx(CopyButton, { variant: 'button', textToCopy: qrcodeValue, buttonClassName: 'qr-code-button', copykey: 'dyn_qr_code.copy_button', startSlot: 
+                                // eslint-disable-next-line react/jsx-wrap-multilines
+                                jsx(Icon, { size: 'mini', color: 'text-tertiary', children: jsx(SvgLink, {}) }), children: t('dyn_qr_code.copy_button') })), renderAppOrExtensionButton()] })] }), jsx(Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', className: 'qrcode-container__content', copykey: 'dyn_qr_code.scan_title', children: t('dyn_qr_code.scan_title', {
                     app: walletConnector ? 'wallet' : 'app',
                 }) })] }));
 };

package/src/lib/layout/DynamicAuthLayout/Header/header.cjs

@@ -22,6 +22,7 @@ require('../../../utils/constants/colors.cjs');
 require('../../../utils/constants/values.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('../../../shared/consts/index.cjs');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
 var ErrorContext = require('../../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
@@ -84,7 +85,8 @@ require('../../../views/LoginView/sections/PhoneNumberSignInSection/PhoneNumberS
 const Header = ({ onClose: handleClose, heading, projectSettings, copykey, }) => {
     const { setError } = ErrorContext.useErrorContext();
     const { isFooterExpanded, setIsFooterExpanded } = index.useFooterAnimationContext();
-    const { goToInitialView, view } = ViewContext.useViewContext();
+    const { selectedWalletConnector } = useInternalDynamicContext.useInternalDynamicContext();
+    const { goToInitialView, view, setView } = ViewContext.useViewContext();
     const { showBackButton, showCloseButton, showHelpContent, isWalletListTypeView, displayBorderBelowHeader, } = useAuthLayoutChecks.useAuthLayoutChecks();
     const { setExistentAccountData } = AccountExistsContext.useAccountExistsContext();
     const { setSocialProvider } = SocialRedirectContext.useSocialRedirectContext();
@@ -93,15 +95,22 @@ const Header = ({ onClose: handleClose, heading, projectSettings, copykey, }) =>
             setSocialProvider(undefined);
             dynamicEvents.dynamicEvents.emit('farcasterConnectCancelled');
         }
-        goToInitialView();
         setExistentAccountData(undefined);
         setError(undefined);
+        if (view.type === 'no-qr-not-installed' &&
+            (selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.canConnectViaQrCode)) {
+            setView('qr-code');
+            return;
+        }
+        goToInitialView();
     }, [
         view.type,
         goToInitialView,
         setExistentAccountData,
         setError,
         setSocialProvider,
+        setView,
+        selectedWalletConnector,
     ]);
     const closeButton = showCloseButton && handleClose && (jsxRuntime.jsx(IconButton.IconButton, { onClick: handleClose, type: 'button', id: 'close-button', "data-testid": 'close-button', className: 'header__icon', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
     const infoButton = showHelpContent && (jsxRuntime.jsx(Tooltip.Tooltip, { content: 'Need some help?', className: 'header__tooltip', children: jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: () => setIsFooterExpanded(!isFooterExpanded), "data-testid": 'info-button', className: 'header__icon', children: isWalletListTypeView ? jsxRuntime.jsx(questionMark.ReactComponent, {}) : jsxRuntime.jsx(footerInfoIcon.ReactComponent, {}) }) }, 'info-button'));

package/src/lib/layout/DynamicAuthLayout/Header/header.js

@@ -18,6 +18,7 @@ import '../../../utils/constants/colors.js';
 import '../../../utils/constants/values.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import '../../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
 import { useErrorContext } from '../../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
@@ -80,7 +81,8 @@ import '../../../views/LoginView/sections/PhoneNumberSignInSection/PhoneNumberSi
 const Header = ({ onClose: handleClose, heading, projectSettings, copykey, }) => {
     const { setError } = useErrorContext();
     const { isFooterExpanded, setIsFooterExpanded } = useFooterAnimationContext();
-    const { goToInitialView, view } = useViewContext();
+    const { selectedWalletConnector } = useInternalDynamicContext();
+    const { goToInitialView, view, setView } = useViewContext();
     const { showBackButton, showCloseButton, showHelpContent, isWalletListTypeView, displayBorderBelowHeader, } = useAuthLayoutChecks();
     const { setExistentAccountData } = useAccountExistsContext();
     const { setSocialProvider } = useSocialRedirectContext();
@@ -89,15 +91,22 @@ const Header = ({ onClose: handleClose, heading, projectSettings, copykey, }) =>
             setSocialProvider(undefined);
             dynamicEvents.emit('farcasterConnectCancelled');
         }
-        goToInitialView();
         setExistentAccountData(undefined);
         setError(undefined);
+        if (view.type === 'no-qr-not-installed' &&
+            (selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.canConnectViaQrCode)) {
+            setView('qr-code');
+            return;
+        }
+        goToInitialView();
     }, [
         view.type,
         goToInitialView,
         setExistentAccountData,
         setError,
         setSocialProvider,
+        setView,
+        selectedWalletConnector,
     ]);
     const closeButton = showCloseButton && handleClose && (jsx(IconButton, { onClick: handleClose, type: 'button', id: 'close-button', "data-testid": 'close-button', className: 'header__icon', children: jsx(SvgClose, {}) }));
     const infoButton = showHelpContent && (jsx(Tooltip, { content: 'Need some help?', className: 'header__tooltip', children: jsx(IconButton, { type: 'button', onClick: () => setIsFooterExpanded(!isFooterExpanded), "data-testid": 'info-button', className: 'header__icon', children: isWalletListTypeView ? jsx(SvgQuestionMark, {}) : jsx(SvgFooterInfoIcon, {}) }) }, 'info-button'));

package/src/lib/locale/en/translation.cjs

@@ -621,6 +621,7 @@ const translation = {
             phone_number_form: {
                 invalid_phone: 'Invalid or incorrect number. Did you mistype it?',
                 invalid_sms_verification: 'The code you entered is incorrect. Please try again.',
+                too_many_sms_verification_attempts: 'Too many verification attempts, please try again later.',
             },
             pending_connect: {
                 title: 'Connecting a wallet',
@@ -1098,7 +1099,8 @@ const translation = {
        * @default
        * {
           copy_button: 'Copy QR URI',
-          open_button: 'Open {{wallet}} App',
+          get_extension_button: 'Get extension',
+          open_button: 'Open App',
           scan_title: "Scan this QR code from your mobile {{app}} or phone's camera to connect.",
           wallet_not_installed: {
             browser_install: 'Install {{browser}} extension',
@@ -1110,7 +1112,8 @@ const translation = {
        */
     dyn_qr_code: {
         copy_button: 'Copy QR URI',
-        open_button: 'Open {{wallet}} App',
+        get_extension_button: 'Get Extension',
+        open_button: 'Open App',
         scan_title: "Scan this QR code from your mobile {{app}} or phone's camera to connect.",
         wallet_not_installed: {
             browser_install: 'Install {{browser}} extension',
@@ -1401,14 +1404,14 @@ const translation = {
      * @description copy keys for Select Chain view
      * @default
      * {
-        title: "Enable Ledger",
+        title: "Connect",
         description:
           "This wallet supports using ledger. Toggle on ledger to enable it.",
         using_hardware_wallet_toggle_label: "Using Ledger with {{chainName}}",
       }
      */
     dyn_select_hardware_wallet: {
-        title: 'Enable Ledger',
+        title: 'Connect',
         description: 'This wallet supports using ledger. Toggle on ledger to enable it.',
         using_hardware_wallet_toggle_label: 'Using Ledger with {{chainName}}',
     },

package/src/lib/locale/en/translation.d.ts

@@ -616,6 +616,7 @@ export declare const translation: {
             phone_number_form: {
                 invalid_phone: string;
                 invalid_sms_verification: string;
+                too_many_sms_verification_attempts: string;
             };
             pending_connect: {
                 title: string;
@@ -1093,7 +1094,8 @@ export declare const translation: {
        * @default
        * {
           copy_button: 'Copy QR URI',
-          open_button: 'Open {{wallet}} App',
+          get_extension_button: 'Get extension',
+          open_button: 'Open App',
           scan_title: "Scan this QR code from your mobile {{app}} or phone's camera to connect.",
           wallet_not_installed: {
             browser_install: 'Install {{browser}} extension',
@@ -1105,6 +1107,7 @@ export declare const translation: {
        */
     dyn_qr_code: {
         copy_button: string;
+        get_extension_button: string;
         open_button: string;
         scan_title: string;
         wallet_not_installed: {
@@ -1396,7 +1399,7 @@ export declare const translation: {
      * @description copy keys for Select Chain view
      * @default
      * {
-        title: "Enable Ledger",
+        title: "Connect",
         description:
           "This wallet supports using ledger. Toggle on ledger to enable it.",
         using_hardware_wallet_toggle_label: "Using Ledger with {{chainName}}",

package/src/lib/locale/en/translation.js

@@ -617,6 +617,7 @@ const translation = {
             phone_number_form: {
                 invalid_phone: 'Invalid or incorrect number. Did you mistype it?',
                 invalid_sms_verification: 'The code you entered is incorrect. Please try again.',
+                too_many_sms_verification_attempts: 'Too many verification attempts, please try again later.',
             },
             pending_connect: {
                 title: 'Connecting a wallet',
@@ -1094,7 +1095,8 @@ const translation = {
        * @default
        * {
           copy_button: 'Copy QR URI',
-          open_button: 'Open {{wallet}} App',
+          get_extension_button: 'Get extension',
+          open_button: 'Open App',
           scan_title: "Scan this QR code from your mobile {{app}} or phone's camera to connect.",
           wallet_not_installed: {
             browser_install: 'Install {{browser}} extension',
@@ -1106,7 +1108,8 @@ const translation = {
        */
     dyn_qr_code: {
         copy_button: 'Copy QR URI',
-        open_button: 'Open {{wallet}} App',
+        get_extension_button: 'Get Extension',
+        open_button: 'Open App',
         scan_title: "Scan this QR code from your mobile {{app}} or phone's camera to connect.",
         wallet_not_installed: {
             browser_install: 'Install {{browser}} extension',
@@ -1397,14 +1400,14 @@ const translation = {
      * @description copy keys for Select Chain view
      * @default
      * {
-        title: "Enable Ledger",
+        title: "Connect",
         description:
           "This wallet supports using ledger. Toggle on ledger to enable it.",
         using_hardware_wallet_toggle_label: "Using Ledger with {{chainName}}",
       }
      */
     dyn_select_hardware_wallet: {
-        title: 'Enable Ledger',
+        title: 'Connect',
         description: 'This wallet supports using ledger. Toggle on ledger to enable it.',
         using_hardware_wallet_toggle_label: 'Using Ledger with {{chainName}}',
     },

package/src/lib/shared/consts/index.cjs

@@ -25,7 +25,7 @@ const teamNames = [
 const defaultWalletsForChains = {
     primary_chain: 'evm',
     wallets: {
-        algorand: 'myalgo',
+        algorand: 'perawallet',
         bitcoin: 'xverse',
         cosmos: 'keplr',
         evm: 'metamask',

package/src/lib/shared/consts/index.js

@@ -21,7 +21,7 @@ const teamNames = [
 const defaultWalletsForChains = {
     primary_chain: 'evm',
     wallets: {
-        algorand: 'myalgo',
+        algorand: 'perawallet',
         bitcoin: 'xverse',
         cosmos: 'keplr',
         evm: 'metamask',