@dynamic-labs/sdk-react-core 0.16.0

package/src/lib/views/NetworkNotSupported/NetworkNotSupported.es.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
+import { Typography } from '../../components/Typography/Typography.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../context/ViewContext/ViewContext.es.js';
+import '../../utils/constants/colors.es.js';
+import '../../shared/consts/index.es.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.es.js';
+import { createUserProfile } from '../../utils/functions/createUserProfile/createUserProfile.es.js';
+import { isSupportedNetwork } from '../../utils/functions/isSupportedNetwork/isSupportedNetwork.es.js';
+import { pixelToRem } from '../../utils/functions/pixelToRem/pixelToRem.es.js';
+import '../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../context/ThemeContext/ThemeContext.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import { TextButton } from '../../components/TextButton/TextButton.es.js';
+import '../../config/ApiEndpoint.es.js';
+import '../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../context/MockContext/MockContext.es.js';
+import '../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import { Button } from '../../components/Button/Button.es.js';
+import '../../components/IconButton/IconButton.es.js';
+import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.es.js';
+import { NetworkPicker } from '../../components/NetworkPicker/NetworkPicker.es.js';
+import { UserAddress } from '../../components/UserAddress/UserAddress.es.js';
+import { useUpdateUserProfileByJWTCallback } from '../../utils/hooks/useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.es.js';
+
+const NetworkNotSupported = () => {
+    var _a, _b;
+    const { handleLogOut, onboardingOnlyJwt, network, onboardingImageUrl, selectedWalletConnector: walletConnector, decodedOnboardingOnlyToken, } = useInternalDynamicContext();
+    const { updateUserProfileByJWT } = useUpdateUserProfileByJWTCallback();
+    const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
+    if (!decodedOnboardingOnlyToken || !walletConnector) {
+        return null;
+    }
+    const userProfile = createUserProfile(decodedOnboardingOnlyToken);
+    const evmNetworks = walletConnector.evmNetworks || [];
+    const _isSupportedNetwork = isSupportedNetwork({ network, walletConnector });
+    return (jsxs("div", Object.assign({ className: 'network-not-supported', "data-testid": 'network-not-supported' }, { children: [onboardingImageUrl && (jsx("img", { className: 'network-not-supported__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsx(ErrorContainer, Object.assign({ withIcon: false, className: 'network-not-supported__error--not-supported' }, { children: "This network is not available, please update." }))), jsxs("div", Object.assign({ className: 'network-not-supported__content-container' }, { children: [jsx("div", Object.assign({ className: 'network-not-supported__img-container' }, { children: ((_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.ens) === null || _a === void 0 ? void 0 : _a.avatar) ? (jsx("div", Object.assign({ className: 'network-not-supported__network-container' }, { children: jsx("img", { src: (_b = userProfile === null || userProfile === void 0 ? void 0 : userProfile.ens) === null || _b === void 0 ? void 0 : _b.avatar, alt: 'user ens avatar', className: 'network-not-supported__img' }) }))) : (jsx("div", Object.assign({ className: 'network-not-supported__network-container' }, { children: jsx(WalletIcon, { walletName: walletConnector.name, style: { height: pixelToRem(64), width: pixelToRem(64) } }) }))) })), jsx(UserAddress, { userProfile: userProfile }), jsx("div", Object.assign({ className: 'network-not-supported__network-container' }, { children: jsx(NetworkPicker, { evmNetworks: evmNetworks, connector: walletConnector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, showNetworkName: true, buttonClassName: 'network-not-supported__network-picker-button', mainClassName: 'network-not-supported__network-picker' }) })), jsxs("div", Object.assign({ className: 'network-not-supported__welcome-container' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary', className: 'network-not-supported__welcome-title' }, { children: "Update Network" })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Your wallet is not connected to a supported network. Please update before continuing." })), jsx(Button, Object.assign({ type: 'submit', buttonVariant: 'primary', expanded: true, buttonRounded: 'default', buttonPadding: 'large', disabled: !_isSupportedNetwork, onClick: () => onboardingOnlyJwt && updateUserProfileByJWT(onboardingOnlyJwt), buttonClassName: 'network-not-supported__continue' }, { children: "Continue" })), jsx(TextButton, Object.assign({ className: 'network-not-supported__log-out', onClick: () => handleLogOut() }, { children: "Log out" }))] }))] }))] })));
+};
+
+export { NetworkNotSupported };

package/src/lib/views/NetworkNotSupported/index.d.ts

@@ -0,0 +1 @@
+export { NetworkNotSupported } from './NetworkNotSupported';

package/src/lib/views/NetworkNotSupportedSwitchManual/NetworkNotSupportedSwitchManual.cjs.js

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var walletBook = require('@dynamic-labs/wallet-book');
+var Typography = require('../../components/Typography/Typography.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../context/ViewContext/ViewContext.cjs.js');
+require('../../utils/constants/colors.cjs.js');
+require('../../shared/consts/index.cjs.js');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs.js');
+var isSupportedNetwork = require('../../utils/functions/isSupportedNetwork/isSupportedNetwork.cjs.js');
+var pixelToRem = require('../../utils/functions/pixelToRem/pixelToRem.cjs.js');
+require('../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../context/ThemeContext/ThemeContext.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../config/ApiEndpoint.cjs.js');
+require('../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../context/MockContext/MockContext.cjs.js');
+require('../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+require('../../components/IconButton/IconButton.cjs.js');
+var IconWithSpinner = require('../../components/IconWithSpinner/IconWithSpinner.cjs.js');
+var useUpdateUserProfileByJWTCallback = require('../../utils/hooks/useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.cjs.js');
+
+//   The component notifies the user about the required manual network change,
+//   as the wallet does not support programmatic network change.
+const NetworkNotSupportedSwitchManual = () => {
+    var _a, _b;
+    const { user, network, onboardingOnlyJwt, selectedWalletConnector: walletConnector, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { updateUserProfileByJWT } = useUpdateUserProfileByJWTCallback.useUpdateUserProfileByJWTCallback();
+    // Listen for network changes
+    React.useEffect(() => {
+        if (!walletConnector)
+            return;
+        const _isSupportedNetwork = isSupportedNetwork.isSupportedNetwork({
+            network,
+            walletConnector,
+        });
+        // User has changed network to supported network
+        if (_isSupportedNetwork) {
+            // The user had an incorrect network at the time of authorization. We finish the user's authorization.
+            if (onboardingOnlyJwt) {
+                updateUserProfileByJWT(onboardingOnlyJwt);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [network, onboardingOnlyJwt, walletConnector, updateUserProfileByJWT]);
+    const iconSize = 80;
+    const icon = (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.name, style: {
+            height: pixelToRem.pixelToRem(iconSize * IconWithSpinner.iconRatio),
+            width: pixelToRem.pixelToRem(iconSize * IconWithSpinner.iconRatio),
+        } }));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'network-not-supported-switch-manual' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'network-not-supported-switch-manual__img-container' }, { children: ((_a = user === null || user === void 0 ? void 0 : user.ens) === null || _a === void 0 ? void 0 : _a.avatar) ? (jsxRuntime.jsx("div", Object.assign({ className: 'network-not-supported-switch-manual__network-container' }, { children: jsxRuntime.jsx("img", { src: (_b = user === null || user === void 0 ? void 0 : user.ens) === null || _b === void 0 ? void 0 : _b.avatar, alt: 'user ens avatar', className: 'network-not-supported-switch-manual__img' }) }))) : (jsxRuntime.jsx("div", Object.assign({ className: 'network-not-supported-switch-manual__network-container' }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: icon, iconSize: iconSize, isSpinning: true }) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'network-not-supported-switch-manual__content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'network-not-supported-switch-manual__title', weight: 'medium', variant: 'title', color: 'primary' }, { children: "Switch Networks" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary' }, { children: "Your wallet does not support switching networks from this app. Switch networks directly in your wallet." }))] }))] })));
+};
+
+exports.NetworkNotSupportedSwitchManual = NetworkNotSupportedSwitchManual;

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

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const NetworkNotSupportedSwitchManual: FC;

package/src/lib/views/NetworkNotSupportedSwitchManual/NetworkNotSupportedSwitchManual.es.js

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
+import { Typography } from '../../components/Typography/Typography.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../context/ViewContext/ViewContext.es.js';
+import '../../utils/constants/colors.es.js';
+import '../../shared/consts/index.es.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.es.js';
+import { isSupportedNetwork } from '../../utils/functions/isSupportedNetwork/isSupportedNetwork.es.js';
+import { pixelToRem } from '../../utils/functions/pixelToRem/pixelToRem.es.js';
+import '../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../context/ThemeContext/ThemeContext.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../config/ApiEndpoint.es.js';
+import '../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../context/MockContext/MockContext.es.js';
+import '../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import '../../components/IconButton/IconButton.es.js';
+import { IconWithSpinner, iconRatio } from '../../components/IconWithSpinner/IconWithSpinner.es.js';
+import { useUpdateUserProfileByJWTCallback } from '../../utils/hooks/useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.es.js';
+
+//   The component notifies the user about the required manual network change,
+//   as the wallet does not support programmatic network change.
+const NetworkNotSupportedSwitchManual = () => {
+    var _a, _b;
+    const { user, network, onboardingOnlyJwt, selectedWalletConnector: walletConnector, } = useInternalDynamicContext();
+    const { updateUserProfileByJWT } = useUpdateUserProfileByJWTCallback();
+    // Listen for network changes
+    useEffect(() => {
+        if (!walletConnector)
+            return;
+        const _isSupportedNetwork = isSupportedNetwork({
+            network,
+            walletConnector,
+        });
+        // User has changed network to supported network
+        if (_isSupportedNetwork) {
+            // The user had an incorrect network at the time of authorization. We finish the user's authorization.
+            if (onboardingOnlyJwt) {
+                updateUserProfileByJWT(onboardingOnlyJwt);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [network, onboardingOnlyJwt, walletConnector, updateUserProfileByJWT]);
+    const iconSize = 80;
+    const icon = (jsx(WalletIcon, { walletName: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.name, style: {
+            height: pixelToRem(iconSize * iconRatio),
+            width: pixelToRem(iconSize * iconRatio),
+        } }));
+    return (jsxs("div", Object.assign({ className: 'network-not-supported-switch-manual' }, { children: [jsx("div", Object.assign({ className: 'network-not-supported-switch-manual__img-container' }, { children: ((_a = user === null || user === void 0 ? void 0 : user.ens) === null || _a === void 0 ? void 0 : _a.avatar) ? (jsx("div", Object.assign({ className: 'network-not-supported-switch-manual__network-container' }, { children: jsx("img", { src: (_b = user === null || user === void 0 ? void 0 : user.ens) === null || _b === void 0 ? void 0 : _b.avatar, alt: 'user ens avatar', className: 'network-not-supported-switch-manual__img' }) }))) : (jsx("div", Object.assign({ className: 'network-not-supported-switch-manual__network-container' }, { children: jsx(IconWithSpinner, { Icon: icon, iconSize: iconSize, isSpinning: true }) }))) })), jsxs("div", Object.assign({ className: 'network-not-supported-switch-manual__content' }, { children: [jsx(Typography, Object.assign({ className: 'network-not-supported-switch-manual__title', weight: 'medium', variant: 'title', color: 'primary' }, { children: "Switch Networks" })), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'secondary' }, { children: "Your wallet does not support switching networks from this app. Switch networks directly in your wallet." }))] }))] })));
+};
+
+export { NetworkNotSupportedSwitchManual };

package/src/lib/views/NetworkNotSupportedSwitchManual/index.d.ts

@@ -0,0 +1 @@
+export { NetworkNotSupportedSwitchManual } from './NetworkNotSupportedSwitchManual';

package/src/lib/views/NoQrNotInstalledView/NoQrNotInstalledView.cjs.js

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var walletBook = require('@dynamic-labs/wallet-book');
+require('react');
+var Typography = require('../../components/Typography/Typography.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../context/ViewContext/ViewContext.cjs.js');
+require('../../utils/constants/colors.cjs.js');
+require('../../shared/consts/index.cjs.js');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs.js');
+var pixelToRem = require('../../utils/functions/pixelToRem/pixelToRem.cjs.js');
+require('../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../context/ThemeContext/ThemeContext.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../config/ApiEndpoint.cjs.js');
+require('../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../context/MockContext/MockContext.cjs.js');
+require('../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+require('../../components/IconButton/IconButton.cjs.js');
+var getBrowserIcon = require('../../shared/utils/functions/getBrowserIcon/getBrowserIcon.cjs.js');
+var WalletHelpLink = require('./WalletHelpLink.cjs.js');
+
+const NoQrNotInstalledView = () => {
+    const { selectedWalletConnector } = useInternalDynamicContext.useInternalDynamicContext();
+    if (!selectedWalletConnector) {
+        return null;
+    }
+    const downloadLinks = Object.entries(walletBook.getWalletLinks(selectedWalletConnector.name))
+        .filter(([, link]) => link !== '')
+        .filter(([name]) => name !== 'ios' && name !== 'android')
+        .map(([name, link]) => (jsxRuntime.jsx(WalletHelpLink.WalletHelpLink, { name: name, link: link, 
+        // justification: we're looping over the keys of walletLinks.desktop
+        Icon: getBrowserIcon.getBrowserIcon(name) }, name)));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'no-qr-code-installed__container', "data-testid": 'no-qr-code-installed' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'no-qr-code-installed__img' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: selectedWalletConnector.name, style: { height: pixelToRem.pixelToRem(64), width: pixelToRem.pixelToRem(64) } }) })), jsxRuntime.jsxs(Typography.Typography, Object.assign({ className: 'no-qr-code-installed__typography--title', variant: 'title' }, { children: ["Install ", walletBook.getWalletBookWallet(selectedWalletConnector.name).name, ' ', "extension to connect"] })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', className: 'no-qr-code-installed__typography', color: 'secondary' }, { children: "Select from your preferred options below:" })), jsxRuntime.jsx("div", Object.assign({ className: 'no-qr-code-installed__links-section' }, { children: downloadLinks })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_mini', className: 'no-qr-code-installed__typography', weight: 'medium', color: 'secondary' }, { children: "Refresh the page once installed" }))] })));
+};
+
+exports.NoQrNotInstalledView = NoQrNotInstalledView;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const NoQrNotInstalledView: () => JSX.Element | null;

package/src/lib/views/NoQrNotInstalledView/NoQrNotInstalledView.es.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { getWalletLinks, WalletIcon, getWalletBookWallet } from '@dynamic-labs/wallet-book';
+import 'react';
+import { Typography } from '../../components/Typography/Typography.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../context/ViewContext/ViewContext.es.js';
+import '../../utils/constants/colors.es.js';
+import '../../shared/consts/index.es.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.es.js';
+import { pixelToRem } from '../../utils/functions/pixelToRem/pixelToRem.es.js';
+import '../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../context/ThemeContext/ThemeContext.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../config/ApiEndpoint.es.js';
+import '../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../context/MockContext/MockContext.es.js';
+import '../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import '../../components/IconButton/IconButton.es.js';
+import { getBrowserIcon } from '../../shared/utils/functions/getBrowserIcon/getBrowserIcon.es.js';
+import { WalletHelpLink } from './WalletHelpLink.es.js';
+
+const NoQrNotInstalledView = () => {
+    const { selectedWalletConnector } = useInternalDynamicContext();
+    if (!selectedWalletConnector) {
+        return null;
+    }
+    const downloadLinks = Object.entries(getWalletLinks(selectedWalletConnector.name))
+        .filter(([, link]) => link !== '')
+        .filter(([name]) => name !== 'ios' && name !== 'android')
+        .map(([name, link]) => (jsx(WalletHelpLink, { name: name, link: link, 
+        // justification: we're looping over the keys of walletLinks.desktop
+        Icon: getBrowserIcon(name) }, name)));
+    return (jsxs("div", Object.assign({ className: 'no-qr-code-installed__container', "data-testid": 'no-qr-code-installed' }, { children: [jsx("div", Object.assign({ className: 'no-qr-code-installed__img' }, { children: jsx(WalletIcon, { walletName: selectedWalletConnector.name, style: { height: pixelToRem(64), width: pixelToRem(64) } }) })), jsxs(Typography, Object.assign({ className: 'no-qr-code-installed__typography--title', variant: 'title' }, { children: ["Install ", getWalletBookWallet(selectedWalletConnector.name).name, ' ', "extension to connect"] })), jsx(Typography, Object.assign({ variant: 'body_normal', className: 'no-qr-code-installed__typography', color: 'secondary' }, { children: "Select from your preferred options below:" })), jsx("div", Object.assign({ className: 'no-qr-code-installed__links-section' }, { children: downloadLinks })), jsx(Typography, Object.assign({ variant: 'body_mini', className: 'no-qr-code-installed__typography', weight: 'medium', color: 'secondary' }, { children: "Refresh the page once installed" }))] })));
+};
+
+export { NoQrNotInstalledView };

package/src/lib/views/NoQrNotInstalledView/WalletHelpLink.cjs.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var Typography = require('../../components/Typography/Typography.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../context/ViewContext/ViewContext.cjs.js');
+require('../../utils/constants/colors.cjs.js');
+require('../../shared/consts/index.cjs.js');
+require('../../context/DynamicContext/DynamicContext.cjs.js');
+require('../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../context/ThemeContext/ThemeContext.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../config/ApiEndpoint.cjs.js');
+require('../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../context/MockContext/MockContext.cjs.js');
+require('../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+require('../../components/IconButton/IconButton.cjs.js');
+
+const capitalize = (value) => value[0].toUpperCase() + value.slice(1);
+const WalletHelpLink = ({ name, link, Icon }) => (jsxRuntime.jsx("div", Object.assign({ className: 'wallet-help-link' }, { children: jsxRuntime.jsxs("a", Object.assign({ className: 'wallet-help-link__anchor', href: link, target: '_blank', rel: 'noreferrer' }, { children: [jsxRuntime.jsx(Icon, { style: {
+                    height: '1.5rem',
+                    width: '1.5rem',
+                } }), jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'button_primary', weight: 'medium' }, { children: ["Install ", capitalize(name), " extension"] }))] })) })));
+
+exports.WalletHelpLink = WalletHelpLink;

package/src/lib/views/NoQrNotInstalledView/WalletHelpLink.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Icon } from '../../shared';
+interface WalletHelpLinkProps {
+    Icon: Icon;
+    link: string;
+    name: string;
+}
+export declare const WalletHelpLink: ({ name, link, Icon }: WalletHelpLinkProps) => JSX.Element;
+export {};

package/src/lib/views/NoQrNotInstalledView/WalletHelpLink.es.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import { Typography } from '../../components/Typography/Typography.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../context/ViewContext/ViewContext.es.js';
+import '../../utils/constants/colors.es.js';
+import '../../shared/consts/index.es.js';
+import '../../context/DynamicContext/DynamicContext.es.js';
+import '../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../context/ThemeContext/ThemeContext.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../config/ApiEndpoint.es.js';
+import '../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../context/MockContext/MockContext.es.js';
+import '../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import '../../components/IconButton/IconButton.es.js';
+
+const capitalize = (value) => value[0].toUpperCase() + value.slice(1);
+const WalletHelpLink = ({ name, link, Icon }) => (jsx("div", Object.assign({ className: 'wallet-help-link' }, { children: jsxs("a", Object.assign({ className: 'wallet-help-link__anchor', href: link, target: '_blank', rel: 'noreferrer' }, { children: [jsx(Icon, { style: {
+                    height: '1.5rem',
+                    width: '1.5rem',
+                } }), jsxs(Typography, Object.assign({ variant: 'button_primary', weight: 'medium' }, { children: ["Install ", capitalize(name), " extension"] }))] })) })));
+
+export { WalletHelpLink };

package/src/lib/views/NoQrNotInstalledView/index.d.ts

@@ -0,0 +1 @@
+export { NoQrNotInstalledView } from './NoQrNotInstalledView';

package/src/lib/views/PendingConnectView/PendingConnectView.cjs.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var multiWallet = require('@dynamic-labs/multi-wallet');
+var walletBook = require('@dynamic-labs/wallet-book');
+require('react');
+var Typography = require('../../components/Typography/Typography.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('../../context/ViewContext/ViewContext.cjs.js');
+require('../../utils/constants/colors.cjs.js');
+require('../../shared/consts/index.cjs.js');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs.js');
+var pixelToRem = require('../../utils/functions/pixelToRem/pixelToRem.cjs.js');
+require('../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../context/ThemeContext/ThemeContext.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../config/ApiEndpoint.cjs.js');
+require('../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../context/MockContext/MockContext.cjs.js');
+require('../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+require('../../components/IconButton/IconButton.cjs.js');
+var PoweredByDynamic = require('../../components/PoweredByDynamic/PoweredByDynamic.cjs.js');
+var IconWithSpinner = require('../../components/IconWithSpinner/IconWithSpinner.cjs.js');
+var TosAndPp = require('../../components/TosAndPp/TosAndPp.cjs.js');
+
+const PendingConnectView = () => {
+    const { selectedWalletConnector: walletConnector, termsOfServiceUrl, privacyPolicyUrl, } = useInternalDynamicContext.useInternalDynamicContext();
+    const iconSize = 94;
+    const icon = (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.name, style: {
+            height: pixelToRem.pixelToRem(iconSize * IconWithSpinner.iconRatio),
+            width: pixelToRem.pixelToRem(iconSize * IconWithSpinner.iconRatio),
+        } }));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'pending-connect__container' }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: icon, iconSize: iconSize, isSpinning: true }), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', className: 'pending-connect__title' }, { children: "Connecting to your wallet" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', className: 'pending-connect__copy-text' }, { children: multiWallet.isMobile()
+                    ? 'Click connect in your mobile wallet'
+                    : 'Click connect in your wallet popup' })), termsOfServiceUrl && privacyPolicyUrl && (jsxRuntime.jsx(TosAndPp.TosAndPp, { mode: 'connecting', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'pending-connect__powered-by' })] })));
+};
+
+exports.PendingConnectView = PendingConnectView;

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

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

package/src/lib/views/PendingConnectView/PendingConnectView.es.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { isMobile } from '@dynamic-labs/multi-wallet';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
+import 'react';
+import { Typography } from '../../components/Typography/Typography.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '../../context/ViewContext/ViewContext.es.js';
+import '../../utils/constants/colors.es.js';
+import '../../shared/consts/index.es.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.es.js';
+import { pixelToRem } from '../../utils/functions/pixelToRem/pixelToRem.es.js';
+import '../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../context/ThemeContext/ThemeContext.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../config/ApiEndpoint.es.js';
+import '../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../context/MockContext/MockContext.es.js';
+import '../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import '../../components/IconButton/IconButton.es.js';
+import { PoweredByDynamic } from '../../components/PoweredByDynamic/PoweredByDynamic.es.js';
+import { IconWithSpinner, iconRatio } from '../../components/IconWithSpinner/IconWithSpinner.es.js';
+import { TosAndPp } from '../../components/TosAndPp/TosAndPp.es.js';
+
+const PendingConnectView = () => {
+    const { selectedWalletConnector: walletConnector, termsOfServiceUrl, privacyPolicyUrl, } = useInternalDynamicContext();
+    const iconSize = 94;
+    const icon = (jsx(WalletIcon, { walletName: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.name, style: {
+            height: pixelToRem(iconSize * iconRatio),
+            width: pixelToRem(iconSize * iconRatio),
+        } }));
+    return (jsxs("div", Object.assign({ className: 'pending-connect__container' }, { children: [jsx(IconWithSpinner, { Icon: icon, iconSize: iconSize, isSpinning: true }), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', className: 'pending-connect__title' }, { children: "Connecting to your wallet" })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', className: 'pending-connect__copy-text' }, { children: isMobile()
+                    ? 'Click connect in your mobile wallet'
+                    : 'Click connect in your wallet popup' })), termsOfServiceUrl && privacyPolicyUrl && (jsx(TosAndPp, { mode: 'connecting', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })), jsx(PoweredByDynamic, { classNameRoot: 'pending-connect__powered-by' })] })));
+};
+
+export { PendingConnectView };

package/src/lib/views/PendingConnectView/index.d.ts

@@ -0,0 +1 @@
+export { PendingConnectView } from './PendingConnectView';

package/src/lib/views/PendingSignatureView/PendingSignatureView.cjs.js

@@ -0,0 +1,78 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var multiWallet = require('@dynamic-labs/multi-wallet');
+var walletBook = require('@dynamic-labs/wallet-book');
+var Typography = require('../../components/Typography/Typography.cjs.js');
+require('@dynamic-labs/sdk-api');
+var logger = require('../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('../../context/ViewContext/ViewContext.cjs.js');
+require('../../utils/constants/colors.cjs.js');
+require('../../shared/consts/index.cjs.js');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs.js');
+var requiresTwoStepAuthentication = require('../../utils/functions/requiresTwoStepAuthentication/requiresTwoStepAuthentication.cjs.js');
+var pixelToRem = require('../../utils/functions/pixelToRem/pixelToRem.cjs.js');
+require('../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../context/ThemeContext/ThemeContext.cjs.js');
+var classNames = require('../../utils/functions/classNames/classNames.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../config/ApiEndpoint.cjs.js');
+require('../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../context/MockContext/MockContext.cjs.js');
+require('../../context/CaptchaContext/CaptchaContext.cjs.js');
+var useConnectAndSignSplitSteps = require('../../utils/hooks/authenticationHooks/useConnectAndSignSplitSteps/useConnectAndSignSplitSteps.cjs.js');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+var Button = require('../../components/Button/Button.cjs.js');
+require('../../components/IconButton/IconButton.cjs.js');
+var PoweredByDynamic = require('../../components/PoweredByDynamic/PoweredByDynamic.cjs.js');
+var IconWithSpinner = require('../../components/IconWithSpinner/IconWithSpinner.cjs.js');
+var TosAndPp = require('../../components/TosAndPp/TosAndPp.cjs.js');
+
+const PendingSignatureView = () => {
+    const [loading, setLoading] = React.useState(false);
+    const { user, selectedWalletConnector: walletConnector, privacyPolicyUrl, termsOfServiceUrl, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { signAlreadyConnectedUser } = useConnectAndSignSplitSteps.useConnectAndSignSplitSteps();
+    const iconSize = 100;
+    /**
+     * The following check on Phantom+Ledger will be fixed in a future ticket.
+     */
+    const isPhantomLedger = (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.name) === multiWallet.phantomLedgerWalletName;
+    if (!walletConnector) {
+        return null;
+    }
+    const handleClick = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        try {
+            setLoading(true);
+            yield signAlreadyConnectedUser({ walletConnector });
+        }
+        catch (e) {
+            logger.logger.error(e);
+        }
+        finally {
+            setLoading(false);
+        }
+    });
+    const icon = (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletConnector.name, style: {
+            height: pixelToRem.pixelToRem(iconSize * IconWithSpinner.iconRatio),
+            width: pixelToRem.pixelToRem(iconSize * IconWithSpinner.iconRatio),
+        } }));
+    const typographyBodyCopy = isPhantomLedger
+        ? "We need your signature to confirm you own this wallet (this doesn't cost gas). Click sign in your wallet to log in."
+        : 'We need your signature to confirm you own this wallet. Click sign in your wallet to log in.';
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'pending-signature__container', "data-testid": 'pending-signature-view' }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: icon, iconSize: iconSize, isSpinning: true, indicator: 'connected' }), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', className: classNames.classNames('pending-signature__title') }, { children: "Requesting signature" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', className: classNames.classNames('pending-signature__copy') }, { children: typographyBodyCopy })), isPhantomLedger && (jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_small', weight: 'regular', className: classNames.classNames('pending-signature__copy', 'pending-signature__copy--mini') }, { children: [jsxRuntime.jsx("strong", { children: "Note:" }), " Ledger with Phantom doesn\u2019t support message signing. When logging in, a small fee (which should not apply) may appear. See below to learn more."] }))), !user && (jsxRuntime.jsx(TosAndPp.TosAndPp, { mode: 'signing', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })), requiresTwoStepAuthentication.requiresTwoStepAuthentication(walletConnector) && (jsxRuntime.jsx(Button.Button, Object.assign({ buttonClassName: 'pending-signature__button', onClick: handleClick, loading: loading, buttonRounded: 'medium', buttonVariant: 'primary', buttonPadding: 'large', expanded: true, typographyProps: {
+                    variant: 'button_primary',
+                    weight: 'medium',
+                } }, { children: "Click to Sign" }))), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'pending-signature__powered-by' })] })));
+};
+
+exports.PendingSignatureView = PendingSignatureView;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PendingSignatureView: () => JSX.Element | null;