@dynamic-labs/sdk-react-core 1.4.15 → 1.4.16

package/CHANGELOG.md

@@ -1,4 +1,11 @@
 
+### [1.4.16](https://github.com/dynamic-labs/DynamicAuth/compare/v1.4.15...v1.4.16) (2024-07-25)
+
+
+### Bug Fixes
+
+* improve network switch ux for metamask starknet snap ([#6376](https://github.com/dynamic-labs/DynamicAuth/issues/6376)) ([#6419](https://github.com/dynamic-labs/DynamicAuth/issues/6419)) ([4909806](https://github.com/dynamic-labs/DynamicAuth/commit/4909806ee5fa8a6a90d85f7e9c24b2bde6de5e75))
+
 ### [1.4.15](https://github.com/dynamic-labs/DynamicAuth/compare/v1.4.14...v1.4.15) (2024-07-17)
 
 

package/package.cjs

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

package/package.js

@@ -1,4 +1,4 @@
-var version = "1.4.15";
+var version = "1.4.16";
 var dependencies = {
 	"@dynamic-labs/sdk-api": "0.0.387",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "1.4.15",
+  "version": "1.4.16",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -16,16 +16,16 @@
     "react-focus-lock": "2.9.2",
     "react-i18next": "^13.2.0",
     "yup": "0.32.11",
-    "@dynamic-labs/ethereum": "1.4.15",
-    "@dynamic-labs/iconic": "1.4.15",
-    "@dynamic-labs/logger": "1.4.15",
-    "@dynamic-labs/multi-wallet": "1.4.15",
-    "@dynamic-labs/rpc-providers": "1.4.15",
-    "@dynamic-labs/types": "1.4.15",
-    "@dynamic-labs/utils": "1.4.15",
-    "@dynamic-labs/viem-utils": "1.4.15",
-    "@dynamic-labs/wallet-book": "1.4.15",
-    "@dynamic-labs/wallet-connector-core": "1.4.15",
+    "@dynamic-labs/ethereum": "1.4.16",
+    "@dynamic-labs/iconic": "1.4.16",
+    "@dynamic-labs/logger": "1.4.16",
+    "@dynamic-labs/multi-wallet": "1.4.16",
+    "@dynamic-labs/rpc-providers": "1.4.16",
+    "@dynamic-labs/types": "1.4.16",
+    "@dynamic-labs/utils": "1.4.16",
+    "@dynamic-labs/viem-utils": "1.4.16",
+    "@dynamic-labs/wallet-book": "1.4.16",
+    "@dynamic-labs/wallet-connector-core": "1.4.16",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

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

@@ -663,6 +663,9 @@ const translation = {
      * @description copy keys for network not supported view for manual switch
      * @default
      * {
+        subtitle_network_defined_metamaskstarknet:
+          'To continue, please update the network in your wallet to {{network}} by visiting the Starknet Snap companion app',
+        subtitle_network_defined_metamaskstarknet_companion_app: 'companion app',
         subtitle_network_defined: 'To continue, please update the network in your wallet to {{network}}',
         subtitle_no_network_defined: 'Your wallet does not support switching networks from this app. Switch networks directly in your wallet.',
         title: 'Update your Network',
@@ -670,6 +673,8 @@ const translation = {
       }
      */
     dyn_network_not_supported_manual_switch: {
+        subtitle_network_defined_metamaskstarknet: 'To continue, please update the network in your wallet to {{network}} by visiting the Starknet Snap',
+        subtitle_network_defined_metamaskstarknet_companion_app: 'companion app',
         subtitle_network_defined: 'To continue, please update the network in your wallet to {{network}}',
         subtitle_no_network_defined: 'Your wallet does not support switching networks from this app. Switch networks directly in your wallet.',
         title: 'Update your Network',

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

@@ -658,6 +658,9 @@ export declare const translation: {
      * @description copy keys for network not supported view for manual switch
      * @default
      * {
+        subtitle_network_defined_metamaskstarknet:
+          'To continue, please update the network in your wallet to {{network}} by visiting the Starknet Snap companion app',
+        subtitle_network_defined_metamaskstarknet_companion_app: 'companion app',
         subtitle_network_defined: 'To continue, please update the network in your wallet to {{network}}',
         subtitle_no_network_defined: 'Your wallet does not support switching networks from this app. Switch networks directly in your wallet.',
         title: 'Update your Network',
@@ -665,6 +668,8 @@ export declare const translation: {
       }
      */
     dyn_network_not_supported_manual_switch: {
+        subtitle_network_defined_metamaskstarknet: string;
+        subtitle_network_defined_metamaskstarknet_companion_app: string;
         subtitle_network_defined: string;
         subtitle_no_network_defined: string;
         title: string;

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

@@ -659,6 +659,9 @@ const translation = {
      * @description copy keys for network not supported view for manual switch
      * @default
      * {
+        subtitle_network_defined_metamaskstarknet:
+          'To continue, please update the network in your wallet to {{network}} by visiting the Starknet Snap companion app',
+        subtitle_network_defined_metamaskstarknet_companion_app: 'companion app',
         subtitle_network_defined: 'To continue, please update the network in your wallet to {{network}}',
         subtitle_no_network_defined: 'Your wallet does not support switching networks from this app. Switch networks directly in your wallet.',
         title: 'Update your Network',
@@ -666,6 +669,8 @@ const translation = {
       }
      */
     dyn_network_not_supported_manual_switch: {
+        subtitle_network_defined_metamaskstarknet: 'To continue, please update the network in your wallet to {{network}} by visiting the Starknet Snap',
+        subtitle_network_defined_metamaskstarknet_companion_app: 'companion app',
         subtitle_network_defined: 'To continue, please update the network in your wallet to {{network}}',
         subtitle_no_network_defined: 'Your wallet does not support switching networks from this app. Switch networks directly in your wallet.',
         title: 'Update your Network',

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

@@ -15,6 +15,7 @@ require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
+var externalLink = require('../../shared/assets/externalLink.cjs');
 require('../../utils/constants/colors.cjs');
 require('../../utils/constants/values.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
@@ -89,11 +90,27 @@ const NetworkNotSupportedSwitchManual = () => {
             width: pixelToRem.pixelToRem(iconSize * IconWithSpinner.iconRatio),
         } }));
     const walletConnectorNetworks = getWalletConnectorNetworks.getWalletConnectorNetworks(walletConnector);
-    return (jsxRuntime.jsxs("div", { "data-testid": 'network-not-supported', className: 'network-not-supported-switch-manual', children: [jsxRuntime.jsx("div", { 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", { 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", { className: 'network-not-supported-switch-manual__network-container', children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: icon, iconSize: iconSize, isSpinning: true }) })) }), jsxRuntime.jsxs("div", { className: 'network-not-supported-switch-manual__content', children: [jsxRuntime.jsx(Typography.Typography, { className: 'network-not-supported-switch-manual__title', weight: 'medium', variant: 'title', color: 'primary', copykey: 'dyn_network_not_supported_manual_switch.title', children: t('dyn_network_not_supported_manual_switch.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: walletConnectorNetworks.length
-                            ? 'dyn_network_not_supported_manual_switch.subtitle_network_defined'
-                            : 'dyn_network_not_supported_manual_switch.subtitle_no_network_defined', children: walletConnectorNetworks.length
-                            ? t('dyn_network_not_supported_manual_switch.subtitle_network_defined', { network: walletConnectorNetworks[0].name })
-                            : t('dyn_network_not_supported_manual_switch.subtitle_no_network_defined') })] })] }));
+    const getSubtitleCopyKey = () => {
+        if ((walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key) === 'metamaskstarknet') {
+            return 'dyn_network_not_supported_manual_switch.subtitle_network_defined_metamaskstarknet';
+        }
+        return walletConnectorNetworks.length
+            ? 'dyn_network_not_supported_manual_switch.subtitle_network_defined'
+            : 'dyn_network_not_supported_manual_switch.subtitle_no_network_defined';
+    };
+    const getSubtitle = () => {
+        if ((walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key) === 'metamaskstarknet') {
+            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [t('dyn_network_not_supported_manual_switch.subtitle_network_defined_metamaskstarknet', {
+                        network: walletConnectorNetworks[0].name,
+                    }), jsxRuntime.jsxs("a", { href: 'https://snaps.consensys.io/starknet', target: '_blank', rel: 'noreferrer', children: [' ', t('dyn_network_not_supported_manual_switch.subtitle_network_defined_metamaskstarknet_companion_app'), ' ', jsxRuntime.jsx(externalLink.ReactComponent, { style: { display: 'inline-block' } })] })] }));
+        }
+        return walletConnectorNetworks.length
+            ? t('dyn_network_not_supported_manual_switch.subtitle_network_defined', {
+                network: walletConnectorNetworks[0].name,
+            })
+            : t('dyn_network_not_supported_manual_switch.subtitle_no_network_defined');
+    };
+    return (jsxRuntime.jsxs("div", { "data-testid": 'network-not-supported', className: 'network-not-supported-switch-manual', children: [jsxRuntime.jsx("div", { 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", { 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", { className: 'network-not-supported-switch-manual__network-container', children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: icon, iconSize: iconSize, isSpinning: true }) })) }), jsxRuntime.jsxs("div", { className: 'network-not-supported-switch-manual__content', children: [jsxRuntime.jsx(Typography.Typography, { className: 'network-not-supported-switch-manual__title', weight: 'medium', variant: 'title', color: 'primary', copykey: 'dyn_network_not_supported_manual_switch.title', children: t('dyn_network_not_supported_manual_switch.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: getSubtitleCopyKey(), children: getSubtitle() })] })] }));
 };
 
 exports.NetworkNotSupportedSwitchManual = NetworkNotSupportedSwitchManual;

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

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTranslation } from 'react-i18next';
 import { WalletIcon } from '@dynamic-labs/wallet-book';
 import 'react';
@@ -11,6 +11,7 @@ import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgExternalLink } from '../../shared/assets/externalLink.js';
 import '../../utils/constants/colors.js';
 import '../../utils/constants/values.js';
 import '../../shared/utils/classes/storage/localStorage.js';
@@ -85,11 +86,27 @@ const NetworkNotSupportedSwitchManual = () => {
             width: pixelToRem(iconSize * iconRatio),
         } }));
     const walletConnectorNetworks = getWalletConnectorNetworks(walletConnector);
-    return (jsxs("div", { "data-testid": 'network-not-supported', className: 'network-not-supported-switch-manual', children: [jsx("div", { 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", { 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", { className: 'network-not-supported-switch-manual__network-container', children: jsx(IconWithSpinner, { Icon: icon, iconSize: iconSize, isSpinning: true }) })) }), jsxs("div", { className: 'network-not-supported-switch-manual__content', children: [jsx(Typography, { className: 'network-not-supported-switch-manual__title', weight: 'medium', variant: 'title', color: 'primary', copykey: 'dyn_network_not_supported_manual_switch.title', children: t('dyn_network_not_supported_manual_switch.title') }), jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: walletConnectorNetworks.length
-                            ? 'dyn_network_not_supported_manual_switch.subtitle_network_defined'
-                            : 'dyn_network_not_supported_manual_switch.subtitle_no_network_defined', children: walletConnectorNetworks.length
-                            ? t('dyn_network_not_supported_manual_switch.subtitle_network_defined', { network: walletConnectorNetworks[0].name })
-                            : t('dyn_network_not_supported_manual_switch.subtitle_no_network_defined') })] })] }));
+    const getSubtitleCopyKey = () => {
+        if ((walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key) === 'metamaskstarknet') {
+            return 'dyn_network_not_supported_manual_switch.subtitle_network_defined_metamaskstarknet';
+        }
+        return walletConnectorNetworks.length
+            ? 'dyn_network_not_supported_manual_switch.subtitle_network_defined'
+            : 'dyn_network_not_supported_manual_switch.subtitle_no_network_defined';
+    };
+    const getSubtitle = () => {
+        if ((walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key) === 'metamaskstarknet') {
+            return (jsxs(Fragment, { children: [t('dyn_network_not_supported_manual_switch.subtitle_network_defined_metamaskstarknet', {
+                        network: walletConnectorNetworks[0].name,
+                    }), jsxs("a", { href: 'https://snaps.consensys.io/starknet', target: '_blank', rel: 'noreferrer', children: [' ', t('dyn_network_not_supported_manual_switch.subtitle_network_defined_metamaskstarknet_companion_app'), ' ', jsx(SvgExternalLink, { style: { display: 'inline-block' } })] })] }));
+        }
+        return walletConnectorNetworks.length
+            ? t('dyn_network_not_supported_manual_switch.subtitle_network_defined', {
+                network: walletConnectorNetworks[0].name,
+            })
+            : t('dyn_network_not_supported_manual_switch.subtitle_no_network_defined');
+    };
+    return (jsxs("div", { "data-testid": 'network-not-supported', className: 'network-not-supported-switch-manual', children: [jsx("div", { 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", { 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", { className: 'network-not-supported-switch-manual__network-container', children: jsx(IconWithSpinner, { Icon: icon, iconSize: iconSize, isSpinning: true }) })) }), jsxs("div", { className: 'network-not-supported-switch-manual__content', children: [jsx(Typography, { className: 'network-not-supported-switch-manual__title', weight: 'medium', variant: 'title', color: 'primary', copykey: 'dyn_network_not_supported_manual_switch.title', children: t('dyn_network_not_supported_manual_switch.title') }), jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: getSubtitleCopyKey(), children: getSubtitle() })] })] }));
 };
 
 export { NetworkNotSupportedSwitchManual };