@dynamic-labs/sdk-react-core 0.17.0-RC.22 → 0.17.0-RC.23

package/CHANGELOG.md

@@ -1,4 +1,12 @@
 
+## [0.17.0-RC.23](https://github.com/dynamic-labs/DynamicAuth/compare/v0.17.0-RC.22...v0.17.0-RC.23) (2023-06-02)
+
+
+### Bug Fixes
+
+* flow connection status improvements ([#2212](https://github.com/dynamic-labs/DynamicAuth/issues/2212)) ([5225e9f](https://github.com/dynamic-labs/DynamicAuth/commit/5225e9f3f19705cdde3c1d860ddf4e69689a839b))
+* **useSyncPrimaryWallet:** disables the hook while connect state is loaded ([#2193](https://github.com/dynamic-labs/DynamicAuth/issues/2193)) ([d2a69c8](https://github.com/dynamic-labs/DynamicAuth/commit/d2a69c8edfbb2a19305b0fd322e24d909bbf9b4f)), closes [#2155](https://github.com/dynamic-labs/DynamicAuth/issues/2155)
+
 ## [0.17.0-RC.22](https://github.com/dynamic-labs/DynamicAuth/compare/v0.17.0-RC.21...v0.17.0-RC.22) (2023-06-02)
 
 

package/package.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.17.0-RC.22";
+var version = "0.17.0-RC.23";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.19",

package/package.js

@@ -1,4 +1,4 @@
-var version = "0.17.0-RC.22";
+var version = "0.17.0-RC.23";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.19",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "0.17.0-RC.22",
+  "version": "0.17.0-RC.23",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -17,12 +17,12 @@
     "formik": "2.2.9",
     "qrcode": "1.5.1",
     "ethers": "5.7.2",
-    "@dynamic-labs/logger": "0.17.0-RC.22",
-    "@dynamic-labs/multi-wallet": "0.17.0-RC.22",
-    "@dynamic-labs/rpc-providers": "0.17.0-RC.22",
-    "@dynamic-labs/types": "0.17.0-RC.22",
-    "@dynamic-labs/utils": "0.17.0-RC.22",
-    "@dynamic-labs/wallet-connector-core": "0.17.0-RC.22"
+    "@dynamic-labs/logger": "0.17.0-RC.23",
+    "@dynamic-labs/multi-wallet": "0.17.0-RC.23",
+    "@dynamic-labs/rpc-providers": "0.17.0-RC.23",
+    "@dynamic-labs/types": "0.17.0-RC.23",
+    "@dynamic-labs/utils": "0.17.0-RC.23",
+    "@dynamic-labs/wallet-connector-core": "0.17.0-RC.23"
   },
   "devDependencies": {
     "semver": "7.3.8"

package/src/index.cjs

@@ -36,7 +36,6 @@ var ceil = require('./lib/shared/utils/functions/ceil/ceil.cjs');
 var useLocalStorage = require('./lib/shared/utils/hooks/useLocalStorage/useLocalStorage.cjs');
 var index$1 = require('./lib/shared/utils/hooks/useOnClickOutside/index.cjs');
 var usePreventPageScroll = require('./lib/shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.cjs');
-var useIsMounted = require('./lib/shared/utils/hooks/useIsMounted/useIsMounted.cjs');
 var useGlobalLoading = require('./lib/shared/utils/hooks/useGlobalLoading/useGlobalLoading.cjs');
 var PhantomLedgerIcon = require('./lib/shared/assets/wallets/PhantomLedgerIcon/PhantomLedgerIcon.cjs');
 var stroke = require('./lib/shared/assets/stroke.cjs');
@@ -155,7 +154,6 @@ exports.ceil = ceil.ceil;
 exports.useLocalStorage = useLocalStorage.useLocalStorage;
 exports.useOnClickOutside = index$1.useOnClickOutside;
 exports.usePreventPageScroll = usePreventPageScroll.usePreventPageScroll;
-exports.useIsMounted = useIsMounted.useIsMounted;
 exports.useGlobalLoading = useGlobalLoading.useGlobalLoading;
 exports.PhantomLedgerIcon = PhantomLedgerIcon.PhantomLedgerIcon;
 exports.ArrowIcon = stroke.ReactComponent;

package/src/index.js

@@ -32,7 +32,6 @@ export { ceil } from './lib/shared/utils/functions/ceil/ceil.js';
 export { useLocalStorage } from './lib/shared/utils/hooks/useLocalStorage/useLocalStorage.js';
 export { useOnClickOutside } from './lib/shared/utils/hooks/useOnClickOutside/index.js';
 export { usePreventPageScroll } from './lib/shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.js';
-export { useIsMounted } from './lib/shared/utils/hooks/useIsMounted/useIsMounted.js';
 export { useGlobalLoading } from './lib/shared/utils/hooks/useGlobalLoading/useGlobalLoading.js';
 export { PhantomLedgerIcon } from './lib/shared/assets/wallets/PhantomLedgerIcon/PhantomLedgerIcon.js';
 export { ReactComponent as ArrowIcon } from './lib/shared/assets/stroke.js';

package/src/lib/components/Chip/Chip.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Typography = require('../Typography/Typography.cjs');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+
+const Chip = ({ children, icon, className, }) => (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('chip', className, {
+        'chip__with-icon': Boolean(icon),
+    }) }, { children: [Boolean(icon) && jsxRuntime.jsx("div", Object.assign({ className: 'chip--icon' }, { children: icon })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small' }, { children: children }))] })));
+
+exports.Chip = Chip;

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

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren, ReactNode } from 'react';
+type ChipProps = {
+    className?: string;
+    icon?: ReactNode;
+};
+export declare const Chip: FC<PropsWithChildren<ChipProps>>;
+export {};

package/src/lib/components/Chip/Chip.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography } from '../Typography/Typography.js';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+
+const Chip = ({ children, icon, className, }) => (jsxs("div", Object.assign({ className: classNames('chip', className, {
+        'chip__with-icon': Boolean(icon),
+    }) }, { children: [Boolean(icon) && jsx("div", Object.assign({ className: 'chip--icon' }, { children: icon })), jsx(Typography, Object.assign({ variant: 'body_small' }, { children: children }))] })));
+
+export { Chip };

package/src/lib/components/Chip/index.d.ts

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

package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.cjs

@@ -29,12 +29,13 @@ require('../Transition/OpacityTransition/OpacityTransition.cjs');
 var VerticalDrawerTransition = require('../Transition/VerticalDrawerTransition/VerticalDrawerTransition.cjs');
 var Alert = require('../Alert/Alert.cjs');
 var SendBalanceForm = require('../SendBalanceForm/SendBalanceForm.cjs');
+var Chip = require('../Chip/Chip.cjs');
 var TokenBalanceCard = require('./components/TokenBalanceCard/TokenBalanceCard.cjs');
 
-const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack, walletName, onSubmit, displayPoweredByDynamicFooter = false, balance, chain, currencySymbol, initialValues, }) => {
+const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack, walletName, onSubmit, displayPoweredByDynamicFooter = false, balance, chain, currencySymbol, initialValues, networkName, networkIcon, }) => {
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close-button' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
     const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })));
-    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletName }) }))), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: error && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsxRuntime.jsx(TokenBalanceCard.TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance }), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues }), displayPoweredByDynamicFooter && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__footer' }, { children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) })))] }))] }));
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletName }) }))), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: error && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), networkName && networkIcon && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__network-container' }, { children: jsxRuntime.jsx(Chip.Chip, Object.assign({ icon: networkIcon }, { children: networkName })) }))), jsxRuntime.jsx(TokenBalanceCard.TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance }), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues }), displayPoweredByDynamicFooter && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__footer' }, { children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) })))] }))] }));
 };
 
 exports.SendBalancePageLayout = SendBalancePageLayout;

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

@@ -1,4 +1,4 @@
-import { FC, MouseEventHandler } from 'react';
+import { FC, MouseEventHandler, ReactNode } from 'react';
 import { SendBalanceFormValues } from '../SendBalanceForm/SendBalanceForm';
 export type SendBalancePageLayoutProps = {
     balance: string | undefined;
@@ -8,6 +8,8 @@ export type SendBalancePageLayoutProps = {
     error?: string;
     initialValues?: SendBalanceFormValues;
     isLoading: boolean;
+    networkIcon?: ReactNode;
+    networkName?: string;
     onClickBack?: MouseEventHandler<HTMLButtonElement>;
     onClickClose?: MouseEventHandler<HTMLButtonElement>;
     onSubmit: (formValues: SendBalanceFormValues) => void;

package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.js

@@ -25,12 +25,13 @@ import '../Transition/OpacityTransition/OpacityTransition.js';
 import { VerticalDrawerTransition } from '../Transition/VerticalDrawerTransition/VerticalDrawerTransition.js';
 import { Alert } from '../Alert/Alert.js';
 import { SendBalanceForm } from '../SendBalanceForm/SendBalanceForm.js';
+import { Chip } from '../Chip/Chip.js';
 import { TokenBalanceCard } from './components/TokenBalanceCard/TokenBalanceCard.js';
 
-const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack, walletName, onSubmit, displayPoweredByDynamicFooter = false, balance, chain, currencySymbol, initialValues, }) => {
+const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack, walletName, onSubmit, displayPoweredByDynamicFooter = false, balance, chain, currencySymbol, initialValues, networkName, networkIcon, }) => {
     const closeButton = onClickClose && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close-button' }, { children: jsx(SvgClose, {}) })));
     const backButton = onClickBack && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })));
-    return (jsxs("div", { children: [jsx(ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsx(Icon, Object.assign({ size: 'small' }, { children: jsx(WalletIcon, { walletName: walletName }) }))), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: error && (jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsx(TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance }), jsx(SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues }), displayPoweredByDynamicFooter && (jsx("div", Object.assign({ className: 'send-balance-page-layout__footer' }, { children: jsx(PoweredByDynamic, {}) })))] }))] }));
+    return (jsxs("div", { children: [jsx(ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsx(Icon, Object.assign({ size: 'small' }, { children: jsx(WalletIcon, { walletName: walletName }) }))), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: error && (jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), networkName && networkIcon && (jsx("div", Object.assign({ className: 'send-balance-page-layout__network-container' }, { children: jsx(Chip, Object.assign({ icon: networkIcon }, { children: networkName })) }))), jsx(TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance }), jsx(SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues }), displayPoweredByDynamicFooter && (jsx("div", Object.assign({ className: 'send-balance-page-layout__footer' }, { children: jsx(PoweredByDynamic, {}) })))] }))] }));
 };
 
 export { SendBalancePageLayout };

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

@@ -37,3 +37,4 @@ export * from './Transition';
 export * from './Popper';
 export * from './TransactionConfirmationPageLayout';
 export * from './SendBalancePageLayout';
+export * from './Chip';

package/src/lib/context/DynamicContext/DynamicContext.cjs

@@ -136,7 +136,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         localStorage.removeItem(localStorage$1.AUTH_TOKEN);
         removeUser();
     }, [removeUser]);
-    const { clearWalletStates, computeConnectedStateForWallets, walletConnectors, primaryWallet, primaryWalletId, showQrcodeModal, secondaryWallets, setPrimaryWallet, setPrimaryWalletId, setShowQrcodeModal, } = useWalletConnectors.useWalletConnectors({
+    const { clearPrimaryWalletId, computeConnectedStateForWallets, didConnectedStateLoad, walletConnectors, primaryWallet, primaryWalletId, showQrcodeModal, secondaryWallets, setPrimaryWallet, setPrimaryWalletId, setShowQrcodeModal, } = useWalletConnectors.useWalletConnectors({
         authToken: getAuthToken.getAuthToken() || onboardingOnlyJwt,
         multiWalletWidgetState,
         setDesktopUri,
@@ -182,7 +182,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         handleRemoveLsNetworks();
         setOnboardingOnlyJwt(undefined);
         removeConnectedInfo();
-        clearWalletStates();
+        clearPrimaryWalletId();
         removeConnectedNameService();
         (_g = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLogout) === null || _g === void 0 ? void 0 : _g.call(eventsCallbacks, user);
     }), [
@@ -195,12 +195,13 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         handleRemoveLsNetworks,
         removeConnectedInfo,
         removeConnectedNameService,
-        clearWalletStates,
+        clearPrimaryWalletId,
         eventsCallbacks,
         environmentId,
         walletConnectors,
     ]);
     useSyncPrimaryWallet.useSyncPrimaryWallet({
+        canSync: didConnectedStateLoad,
         computeConnectedStateForWallets,
         handleLogOut,
         multiWalletWidgetState,

package/src/lib/context/DynamicContext/DynamicContext.js

@@ -132,7 +132,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         localStorage.removeItem(AUTH_TOKEN);
         removeUser();
     }, [removeUser]);
-    const { clearWalletStates, computeConnectedStateForWallets, walletConnectors, primaryWallet, primaryWalletId, showQrcodeModal, secondaryWallets, setPrimaryWallet, setPrimaryWalletId, setShowQrcodeModal, } = useWalletConnectors({
+    const { clearPrimaryWalletId, computeConnectedStateForWallets, didConnectedStateLoad, walletConnectors, primaryWallet, primaryWalletId, showQrcodeModal, secondaryWallets, setPrimaryWallet, setPrimaryWalletId, setShowQrcodeModal, } = useWalletConnectors({
         authToken: getAuthToken() || onboardingOnlyJwt,
         multiWalletWidgetState,
         setDesktopUri,
@@ -178,7 +178,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         handleRemoveLsNetworks();
         setOnboardingOnlyJwt(undefined);
         removeConnectedInfo();
-        clearWalletStates();
+        clearPrimaryWalletId();
         removeConnectedNameService();
         (_g = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLogout) === null || _g === void 0 ? void 0 : _g.call(eventsCallbacks, user);
     }), [
@@ -191,12 +191,13 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         handleRemoveLsNetworks,
         removeConnectedInfo,
         removeConnectedNameService,
-        clearWalletStates,
+        clearPrimaryWalletId,
         eventsCallbacks,
         environmentId,
         walletConnectors,
     ]);
     useSyncPrimaryWallet({
+        canSync: didConnectedStateLoad,
         computeConnectedStateForWallets,
         handleLogOut,
         multiWalletWidgetState,

package/src/lib/shared/utils/hooks/index.d.ts

@@ -1,5 +1,4 @@
 export { useLocalStorage } from './useLocalStorage';
 export { useOnClickOutside } from './useOnClickOutside';
 export { usePreventPageScroll } from './usePreventPageScroll';
-export { useIsMounted } from './useIsMounted';
 export { useGlobalLoading } from './useGlobalLoading';