@dynamic-labs/sdk-react-core 4.0.0-alpha.40 → 4.0.0-alpha.42

package/CHANGELOG.md

@@ -1,4 +1,23 @@
 
+## [4.0.0-alpha.42](https://github.com/dynamic-labs/dynamic-auth/compare/v4.0.0-alpha.41...v4.0.0-alpha.42) (2024-12-06)
+
+
+### Bug Fixes
+
+* walletbook loading issues ([#7553](https://github.com/dynamic-labs/dynamic-auth/issues/7553)) ([684ecc3](https://github.com/dynamic-labs/dynamic-auth/commit/684ecc32960e34680088d6cf200318336647ab77))
+
+## [4.0.0-alpha.41](https://github.com/dynamic-labs/dynamic-auth/compare/v4.0.0-alpha.40...v4.0.0-alpha.41) (2024-12-05)
+
+
+### Features
+
+* add shopify login ([04c6a9e](https://github.com/dynamic-labs/dynamic-auth/commit/04c6a9ee9d039d1480aa3b476ab382d7ea6dbaf2))
+
+
+### Bug Fixes
+
+* wallet group icon not rendering properly when no wallets with that same id are found ([#7543](https://github.com/dynamic-labs/dynamic-auth/issues/7543)) ([a26a629](https://github.com/dynamic-labs/dynamic-auth/commit/a26a6294bbe845147245cccc60a7fded49196db6))
+
 ## [4.0.0-alpha.40](https://github.com/dynamic-labs/dynamic-auth/compare/v4.0.0-alpha.39...v4.0.0-alpha.40) (2024-12-03)
 
 

package/package.cjs

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "4.0.0-alpha.40";
+var version = "4.0.0-alpha.42";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.570",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.js

@@ -1,5 +1,5 @@
 'use client'
-var version = "4.0.0-alpha.40";
+var version = "4.0.0-alpha.42";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.570",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "4.0.0-alpha.40",
+  "version": "4.0.0-alpha.42",
   "dependencies": {
     "@dynamic-labs/sdk-api-core": "0.0.570",
     "@hcaptcha/react-hcaptcha": "1.4.4",
@@ -13,16 +13,16 @@
     "react-i18next": "13.5.0",
     "yup": "0.32.11",
     "react-international-phone": "4.2.5",
-    "@dynamic-labs/assert-package-version": "4.0.0-alpha.40",
-    "@dynamic-labs/iconic": "4.0.0-alpha.40",
-    "@dynamic-labs/logger": "4.0.0-alpha.40",
-    "@dynamic-labs/multi-wallet": "4.0.0-alpha.40",
-    "@dynamic-labs/rpc-providers": "4.0.0-alpha.40",
-    "@dynamic-labs/store": "4.0.0-alpha.40",
-    "@dynamic-labs/types": "4.0.0-alpha.40",
-    "@dynamic-labs/utils": "4.0.0-alpha.40",
-    "@dynamic-labs/wallet-book": "4.0.0-alpha.40",
-    "@dynamic-labs/wallet-connector-core": "4.0.0-alpha.40",
+    "@dynamic-labs/assert-package-version": "4.0.0-alpha.42",
+    "@dynamic-labs/iconic": "4.0.0-alpha.42",
+    "@dynamic-labs/logger": "4.0.0-alpha.42",
+    "@dynamic-labs/multi-wallet": "4.0.0-alpha.42",
+    "@dynamic-labs/rpc-providers": "4.0.0-alpha.42",
+    "@dynamic-labs/store": "4.0.0-alpha.42",
+    "@dynamic-labs/types": "4.0.0-alpha.42",
+    "@dynamic-labs/utils": "4.0.0-alpha.42",
+    "@dynamic-labs/wallet-book": "4.0.0-alpha.42",
+    "@dynamic-labs/wallet-connector-core": "4.0.0-alpha.42",
     "bs58": "5.0.0",
     "eventemitter3": "5.0.1"
   },

package/src/index.cjs

@@ -35,6 +35,7 @@ require('@dynamic-labs/utils');
 require('./lib/utils/constants/colors.cjs');
 require('./lib/utils/constants/values.cjs');
 require('@dynamic-labs/wallet-connector-core');
+require('@dynamic-labs/wallet-book');
 require('./lib/store/state/loadingAndLifecycle.cjs');
 var useLocalStorage = require('./lib/shared/utils/hooks/useLocalStorage/useLocalStorage.cjs');
 var index$1 = require('./lib/shared/utils/hooks/useOnClickOutside/index.cjs');
@@ -103,7 +104,6 @@ require('./lib/components/Transition/SlideInUpTransition/SlideInUpTransition.cjs
 require('./lib/components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('./lib/components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
 require('./lib/context/SocialRedirectContext/SocialRedirectContext.cjs');
-require('@dynamic-labs/wallet-book');
 require('./lib/context/WalletGroupContext/WalletGroupContext.cjs');
 require('./lib/widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');

package/src/index.js

@@ -31,6 +31,7 @@ import '@dynamic-labs/utils';
 import './lib/utils/constants/colors.js';
 import './lib/utils/constants/values.js';
 import '@dynamic-labs/wallet-connector-core';
+import '@dynamic-labs/wallet-book';
 import './lib/store/state/loadingAndLifecycle.js';
 export { useLocalStorage } from './lib/shared/utils/hooks/useLocalStorage/useLocalStorage.js';
 export { useOnClickOutside } from './lib/shared/utils/hooks/useOnClickOutside/index.js';
@@ -99,7 +100,6 @@ import './lib/components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import './lib/components/Transition/OpacityTransition/OpacityTransition.js';
 import './lib/components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
 import './lib/context/SocialRedirectContext/SocialRedirectContext.js';
-import '@dynamic-labs/wallet-book';
 import './lib/context/WalletGroupContext/WalletGroupContext.js';
 import './lib/widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';

package/src/lib/components/WalletConnectorEvents/WalletConnectorEvents.cjs

@@ -7,6 +7,7 @@ var React = require('react');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 var multiWallet = require('@dynamic-labs/multi-wallet');
 var rpcProviders = require('@dynamic-labs/rpc-providers');
+var walletBook = require('@dynamic-labs/wallet-book');
 var useWalletItemActions = require('../../utils/hooks/useWalletItemActions/useWalletItemActions.cjs');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/sdk-api-core');
@@ -66,7 +67,6 @@ require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
 require('qrcode');
-require('@dynamic-labs/wallet-book');
 require('formik');
 require('../../context/FooterAnimationContext/index.cjs');
 require('../../context/WalletGroupContext/WalletGroupContext.cjs');
@@ -92,7 +92,8 @@ const WalletConnectorEvents = ({ connectorProps, }) => {
     const walletConnectorConstructorOptions = React.useMemo(() => {
         var _a, _b;
         if (!connectorProps.projectSettings ||
-            !connectorProps.networkConfigurations) {
+            !connectorProps.networkConfigurations ||
+            !walletBook.isWalletBookPopulated(connectorProps.walletBook)) {
             return;
         }
         return multiWallet.getWalletConnectorConstructorOptions(Object.assign(Object.assign({}, connectorProps), { chainRpcProviders: rpcProviders.ChainRpcProviders, settings: connectorProps.projectSettings, walletConnectProjectId: (_b = (_a = connectorProps.projectSettings) === null || _a === void 0 ? void 0 : _a.sdk.walletConnect) === null || _b === void 0 ? void 0 : _b.projectId }));
@@ -138,6 +139,9 @@ const WalletConnectorEvents = ({ connectorProps, }) => {
             }
             walletConnectorOptions.setWalletConnectorOptions(updatedConnectors);
         };
+        if (!walletBook.isWalletBookPopulated(connectorProps.walletBook)) {
+            return;
+        }
         walletConnectorCore.walletConnectorEvents.on('providerReady', handleProviderReady);
         return () => {
             walletConnectorCore.walletConnectorEvents.off('providerReady', handleProviderReady);

package/src/lib/components/WalletConnectorEvents/WalletConnectorEvents.js

@@ -3,6 +3,7 @@ import { useMemo, useEffect } from 'react';
 import { walletConnectorEvents } from '@dynamic-labs/wallet-connector-core';
 import { getWalletConnectorConstructorOptions } from '@dynamic-labs/multi-wallet';
 import { ChainRpcProviders } from '@dynamic-labs/rpc-providers';
+import { isWalletBookPopulated } from '@dynamic-labs/wallet-book';
 import { useWalletItemActions } from '../../utils/hooks/useWalletItemActions/useWalletItemActions.js';
 import '../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/sdk-api-core';
@@ -62,7 +63,6 @@ import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
 import 'qrcode';
-import '@dynamic-labs/wallet-book';
 import 'formik';
 import '../../context/FooterAnimationContext/index.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
@@ -88,7 +88,8 @@ const WalletConnectorEvents = ({ connectorProps, }) => {
     const walletConnectorConstructorOptions = useMemo(() => {
         var _a, _b;
         if (!connectorProps.projectSettings ||
-            !connectorProps.networkConfigurations) {
+            !connectorProps.networkConfigurations ||
+            !isWalletBookPopulated(connectorProps.walletBook)) {
             return;
         }
         return getWalletConnectorConstructorOptions(Object.assign(Object.assign({}, connectorProps), { chainRpcProviders: ChainRpcProviders, settings: connectorProps.projectSettings, walletConnectProjectId: (_b = (_a = connectorProps.projectSettings) === null || _a === void 0 ? void 0 : _a.sdk.walletConnect) === null || _b === void 0 ? void 0 : _b.projectId }));
@@ -134,6 +135,9 @@ const WalletConnectorEvents = ({ connectorProps, }) => {
             }
             setWalletConnectorOptions(updatedConnectors);
         };
+        if (!isWalletBookPopulated(connectorProps.walletBook)) {
+            return;
+        }
         walletConnectorEvents.on('providerReady', handleProviderReady);
         return () => {
             walletConnectorEvents.off('providerReady', handleProviderReady);

package/src/lib/layout/DynamicAuthLayout/HelpContent/WalletListHelpContent/WalletListHelpContent.cjs

@@ -95,7 +95,7 @@ require('../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 
 const WalletListHelpContent = ({ chains, newToWeb3WalletChainMap, }) => {
-    var _a, _b;
+    var _a;
     const { walletConnectorOptions } = useInternalDynamicContext.useInternalDynamicContext();
     const { walletBook: walletBook$1 } = walletBook.useWalletBookContext();
     const [selectedUrl, setSelectedUrl] = React.useState('');
@@ -126,7 +126,7 @@ const WalletListHelpContent = ({ chains, newToWeb3WalletChainMap, }) => {
             url: links.android,
         },
     ];
-    if (!Object.keys((_b = walletBook$1 === null || walletBook$1 === void 0 ? void 0 : walletBook$1.wallets) !== null && _b !== void 0 ? _b : {}).length) {
+    if (!walletBook.isWalletBookPopulated(walletBook$1)) {
         return jsxRuntime.jsx(Skeleton.Skeleton, { className: 'walletlist-footer-content__container' });
     }
     return (jsxRuntime.jsx("div", { className: 'walletlist-help-content__container', children: jsxRuntime.jsxs(EnterTileAnimation.EnterTileAnimation, { delay: '300ms', children: [jsxRuntime.jsx("div", { className: 'walletlist-help-content__icon', children: jsxRuntime.jsx(walletBook.WalletIcon, { icon: metadata === null || metadata === void 0 ? void 0 : metadata.icon, walletKey: walletKey, style: { height: pixelToRem.pixelToRem(56), width: pixelToRem.pixelToRem(56) } }) }), jsxRuntime.jsxs("div", { className: 'walletlist-help-content__typography-wrapper', children: [jsxRuntime.jsxs(Typography.Typography, { as: 'p', variant: 'title', weight: 'medium', children: ["We recommend installing ", metadata === null || metadata === void 0 ? void 0 : metadata.name] }), jsxRuntime.jsx(Typography.Typography, { as: 'label', variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'walletlist-help-content__typography--label', children: "Select your preferred option below:" })] }), jsxRuntime.jsx("div", { className: 'walletlist-help-content__buttons-wrapper', children: walletLinksElements.map((element, i) => element.isEnabled ? (jsxRuntime.jsx("button", { onClick: () => setSelectedUrl(element.url), children: jsxRuntime.jsx(Item.Item, { StartIcon: element.icon, heading: element.content, url: element.url }) }, i)) : undefined) }), isCustodialServiceWallet && (jsxRuntime.jsxs("div", { className: 'walletlist-help-content__custodial-wallet-area', children: [jsxRuntime.jsx(Typography.Typography, { className: 'walletlist-help-content__custodial-wallet-area--title', as: 'p', color: 'secondary', variant: 'body_normal', weight: 'regular', children: "If you don't want to install a wallet, then use:" }), jsxRuntime.jsx(NewToWeb3WalletItem.NewToWeb3WalletItem, { wallet: newToWeb3Wallet })] })), jsxRuntime.jsx(WalletExtensionOrAppContinueButton.WalletExtensionOrAppContinueButton, { selectedUrl: selectedUrl, wallet: newToWeb3Wallet })] }) }));

package/src/lib/layout/DynamicAuthLayout/HelpContent/WalletListHelpContent/WalletListHelpContent.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { AppleIcon, AndroidIcon } from '@dynamic-labs/iconic';
-import { useWalletBookContext, WalletIcon } from '@dynamic-labs/wallet-book';
+import { useWalletBookContext, isWalletBookPopulated, WalletIcon } from '@dynamic-labs/wallet-book';
 import { isMobile } from '@dynamic-labs/utils';
 import { getWalletLinks } from '@dynamic-labs/wallet-connector-core';
 import '../../../../context/DynamicContext/DynamicContext.js';
@@ -91,7 +91,7 @@ import '../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 
 const WalletListHelpContent = ({ chains, newToWeb3WalletChainMap, }) => {
-    var _a, _b;
+    var _a;
     const { walletConnectorOptions } = useInternalDynamicContext();
     const { walletBook } = useWalletBookContext();
     const [selectedUrl, setSelectedUrl] = useState('');
@@ -122,7 +122,7 @@ const WalletListHelpContent = ({ chains, newToWeb3WalletChainMap, }) => {
             url: links.android,
         },
     ];
-    if (!Object.keys((_b = walletBook === null || walletBook === void 0 ? void 0 : walletBook.wallets) !== null && _b !== void 0 ? _b : {}).length) {
+    if (!isWalletBookPopulated(walletBook)) {
         return jsx(Skeleton, { className: 'walletlist-footer-content__container' });
     }
     return (jsx("div", { className: 'walletlist-help-content__container', children: jsxs(EnterTileAnimation, { delay: '300ms', children: [jsx("div", { className: 'walletlist-help-content__icon', children: jsx(WalletIcon, { icon: metadata === null || metadata === void 0 ? void 0 : metadata.icon, walletKey: walletKey, style: { height: pixelToRem(56), width: pixelToRem(56) } }) }), jsxs("div", { className: 'walletlist-help-content__typography-wrapper', children: [jsxs(Typography, { as: 'p', variant: 'title', weight: 'medium', children: ["We recommend installing ", metadata === null || metadata === void 0 ? void 0 : metadata.name] }), jsx(Typography, { as: 'label', variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'walletlist-help-content__typography--label', children: "Select your preferred option below:" })] }), jsx("div", { className: 'walletlist-help-content__buttons-wrapper', children: walletLinksElements.map((element, i) => element.isEnabled ? (jsx("button", { onClick: () => setSelectedUrl(element.url), children: jsx(Item, { StartIcon: element.icon, heading: element.content, url: element.url }) }, i)) : undefined) }), isCustodialServiceWallet && (jsxs("div", { className: 'walletlist-help-content__custodial-wallet-area', children: [jsx(Typography, { className: 'walletlist-help-content__custodial-wallet-area--title', as: 'p', color: 'secondary', variant: 'body_normal', weight: 'regular', children: "If you don't want to install a wallet, then use:" }), jsx(NewToWeb3WalletItem, { wallet: newToWeb3Wallet })] })), jsx(WalletExtensionOrAppContinueButton, { selectedUrl: selectedUrl, wallet: newToWeb3Wallet })] }) }));

package/src/lib/shared/utils/hooks/useGlobalLoading/useGlobalLoading.cjs

@@ -4,12 +4,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var walletBook = require('@dynamic-labs/wallet-book');
 var loadingAndLifecycle = require('../../../../store/state/loadingAndLifecycle.cjs');
 var logger = require('../../../logger.cjs');
 var index = require('../../functions/lastAuthenticatedAccount/index.cjs');
 
-const useGlobalLoading = ({ authMode, connectedInfo, connectedWallets, projectSettings, primaryWalletId, primaryWallet, user, isLoadingUserFromCookie, walletBook, enableInstrumentation, appName, environmentId, }) => {
-    var _a, _b;
+const useGlobalLoading = ({ authMode, connectedInfo, connectedWallets, projectSettings, primaryWalletId, primaryWallet, user, isLoadingUserFromCookie, walletBook: walletBook$1, enableInstrumentation, appName, environmentId, }) => {
+    var _a;
     // Once we declare the SDK as loaded, we do not ever want to flip back to false
     const hasLoaded = React.useRef(false);
     const loadingStart = React.useRef(new Date().getTime());
@@ -41,11 +42,11 @@ const useGlobalLoading = ({ authMode, connectedInfo, connectedWallets, projectSe
     };
     if (hasLoaded.current)
         return true;
-    const isWalletBookLoading = !Object.keys((_a = walletBook === null || walletBook === void 0 ? void 0 : walletBook.wallets) !== null && _a !== void 0 ? _a : {}).length;
+    const isWalletBookLoading = !walletBook.isWalletBookPopulated(walletBook$1);
     const isProjectSettingsLoading = !projectSettings;
     const isUserLoading = isLoadingUserFromCookie;
     const shouldHavePrimaryWallet = primaryWalletId ||
-        (user && ((_b = index.lastAuthenticatedAccount(user)) === null || _b === void 0 ? void 0 : _b.format) === 'blockchain');
+        (user && ((_a = index.lastAuthenticatedAccount(user)) === null || _a === void 0 ? void 0 : _a.format) === 'blockchain');
     const isPrimaryWalletLoading = Boolean(shouldHavePrimaryWallet && !primaryWallet);
     const isConnectOnlyWalletsLoading = authMode === 'connect-only' &&
         connectedInfo &&

package/src/lib/shared/utils/hooks/useGlobalLoading/useGlobalLoading.js

@@ -1,11 +1,12 @@
 'use client'
 import { useRef } from 'react';
+import { isWalletBookPopulated } from '@dynamic-labs/wallet-book';
 import { useLoadingAndLifecycle } from '../../../../store/state/loadingAndLifecycle.js';
 import { logger } from '../../../logger.js';
 import { lastAuthenticatedAccount } from '../../functions/lastAuthenticatedAccount/index.js';
 
 const useGlobalLoading = ({ authMode, connectedInfo, connectedWallets, projectSettings, primaryWalletId, primaryWallet, user, isLoadingUserFromCookie, walletBook, enableInstrumentation, appName, environmentId, }) => {
-    var _a, _b;
+    var _a;
     // Once we declare the SDK as loaded, we do not ever want to flip back to false
     const hasLoaded = useRef(false);
     const loadingStart = useRef(new Date().getTime());
@@ -37,11 +38,11 @@ const useGlobalLoading = ({ authMode, connectedInfo, connectedWallets, projectSe
     };
     if (hasLoaded.current)
         return true;
-    const isWalletBookLoading = !Object.keys((_a = walletBook === null || walletBook === void 0 ? void 0 : walletBook.wallets) !== null && _a !== void 0 ? _a : {}).length;
+    const isWalletBookLoading = !isWalletBookPopulated(walletBook);
     const isProjectSettingsLoading = !projectSettings;
     const isUserLoading = isLoadingUserFromCookie;
     const shouldHavePrimaryWallet = primaryWalletId ||
-        (user && ((_b = lastAuthenticatedAccount(user)) === null || _b === void 0 ? void 0 : _b.format) === 'blockchain');
+        (user && ((_a = lastAuthenticatedAccount(user)) === null || _a === void 0 ? void 0 : _a.format) === 'blockchain');
     const isPrimaryWalletLoading = Boolean(shouldHavePrimaryWallet && !primaryWallet);
     const isConnectOnlyWalletsLoading = authMode === 'connect-only' &&
         connectedInfo &&

package/src/lib/utils/functions/getOauthLoginUrl/getOauthLoginUrl.cjs

@@ -20,7 +20,7 @@ const getMobileOauthUrl = (provider, loginData) => {
     return provider.redirectUrl.replace('redirect', 'authorizeHtml');
 };
 const getOauthLoginUrl = (providers, providerType) => {
-    var _a, _b;
+    var _a, _b, _c;
     const provider = getProviderByType.getProviderByType(providers, providerType);
     if (!(provider === null || provider === void 0 ? void 0 : provider.clientId)) {
         return '';
@@ -34,7 +34,12 @@ const getOauthLoginUrl = (providers, providerType) => {
         loginBaseUrl = (_a = provider.authorizationUrl) !== null && _a !== void 0 ? _a : '';
     }
     else if (provider.baseAuthUrl) {
-        loginBaseUrl = provider.baseAuthUrl;
+        if (providerType === sdkApiCore.ProviderEnum.Shopify) {
+            loginBaseUrl = provider.baseAuthUrl.replace('{{shopifyStore}}', (_b = provider.shopifyStore) !== null && _b !== void 0 ? _b : '');
+        }
+        else {
+            loginBaseUrl = provider.baseAuthUrl;
+        }
     }
     else {
         return '';
@@ -42,7 +47,7 @@ const getOauthLoginUrl = (providers, providerType) => {
     const mobileUrl = getMobileOauthUrl(provider, loginData);
     const baseProps = {
         client_id: provider.clientId,
-        redirect_uri: (_b = provider.redirectUrl) !== null && _b !== void 0 ? _b : '',
+        redirect_uri: (_c = provider.redirectUrl) !== null && _c !== void 0 ? _c : '',
         response_type: 'code',
     };
     if (providerType === sdkApiCore.ProviderEnum.Tiktok) {

package/src/lib/utils/functions/getOauthLoginUrl/getOauthLoginUrl.js

@@ -16,7 +16,7 @@ const getMobileOauthUrl = (provider, loginData) => {
     return provider.redirectUrl.replace('redirect', 'authorizeHtml');
 };
 const getOauthLoginUrl = (providers, providerType) => {
-    var _a, _b;
+    var _a, _b, _c;
     const provider = getProviderByType(providers, providerType);
     if (!(provider === null || provider === void 0 ? void 0 : provider.clientId)) {
         return '';
@@ -30,7 +30,12 @@ const getOauthLoginUrl = (providers, providerType) => {
         loginBaseUrl = (_a = provider.authorizationUrl) !== null && _a !== void 0 ? _a : '';
     }
     else if (provider.baseAuthUrl) {
-        loginBaseUrl = provider.baseAuthUrl;
+        if (providerType === ProviderEnum.Shopify) {
+            loginBaseUrl = provider.baseAuthUrl.replace('{{shopifyStore}}', (_b = provider.shopifyStore) !== null && _b !== void 0 ? _b : '');
+        }
+        else {
+            loginBaseUrl = provider.baseAuthUrl;
+        }
     }
     else {
         return '';
@@ -38,7 +43,7 @@ const getOauthLoginUrl = (providers, providerType) => {
     const mobileUrl = getMobileOauthUrl(provider, loginData);
     const baseProps = {
         client_id: provider.clientId,
-        redirect_uri: (_b = provider.redirectUrl) !== null && _b !== void 0 ? _b : '',
+        redirect_uri: (_c = provider.redirectUrl) !== null && _c !== void 0 ? _c : '',
         response_type: 'code',
     };
     if (providerType === ProviderEnum.Tiktok) {

package/src/lib/utils/hooks/useCreateWalletConnectorOptions/useCreateWalletConnectorOptions.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var React = require('react');
+var walletBook = require('@dynamic-labs/wallet-book');
 var data = require('../../../views/WalletList/data.cjs');
 require('@dynamic-labs/sdk-api-core');
 require('../../constants/values.cjs');
@@ -17,7 +18,6 @@ require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
 require('../../../context/ViewContext/ViewContext.cjs');
-require('@dynamic-labs/wallet-book');
 require('../../../store/state/loadingAndLifecycle.cjs');
 require('../../../shared/consts/index.cjs');
 require('../../../config/ApiEndpoint.cjs');
@@ -29,14 +29,14 @@ var walletConnectorOptions = require('../../../store/state/walletConnectorOption
 var verifyRequiredConnectorsAreSetup = require('./utils/verifyRequiredConnectorsAreSetup/verifyRequiredConnectorsAreSetup.cjs');
 
 const useCreateWalletConnectorOptions = (_a) => {
-    var { projectSettings, networkConfigurations, walletBook, walletConnectorsProp, walletConnectorExtensions } = _a, props = _tslib.__rest(_a, ["projectSettings", "networkConfigurations", "walletBook", "walletConnectorsProp", "walletConnectorExtensions"]);
+    var { projectSettings, networkConfigurations, walletBook: walletBook$1, walletConnectorsProp, walletConnectorExtensions } = _a, props = _tslib.__rest(_a, ["projectSettings", "networkConfigurations", "walletBook", "walletConnectorsProp", "walletConnectorExtensions"]);
     const walletConnectorsKey = React.useMemo(() => { var _a; return (_a = serializeWalletConnectors.serializeWalletConnectors(walletConnectorsProp)) === null || _a === void 0 ? void 0 : _a.join(','); }, [walletConnectorsProp]);
-    const walletBookLength = React.useMemo(() => Object.keys(walletBook !== null && walletBook !== void 0 ? walletBook : {}).length, [walletBook]);
+    const isWalletBookLoaded = React.useMemo(() => walletBook.isWalletBookPopulated(walletBook$1), [walletBook$1]);
     const walletConnectorOptions$1 = React.useMemo(() => {
-        if (!projectSettings || !walletBookLength || !networkConfigurations)
+        if (!projectSettings || !isWalletBookLoaded || !networkConfigurations)
             return [];
         return data.getWallets({
-            getSupportedWalletOpts: Object.assign({ networkConfigurations, settings: projectSettings, skipMemo: true, walletBook, walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [] }, props),
+            getSupportedWalletOpts: Object.assign({ networkConfigurations, settings: projectSettings, skipMemo: true, walletBook: walletBook$1, walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [] }, props),
             walletConnectorExtensions,
         });
         // Cannot include walletUiUtils in the dependency array because it will cause an infinite loop
@@ -44,7 +44,7 @@ const useCreateWalletConnectorOptions = (_a) => {
     }, [
         projectSettings,
         walletConnectorsKey,
-        walletBookLength,
+        isWalletBookLoaded,
         networkConfigurations,
     ]);
     React.useEffect(() => {

package/src/lib/utils/hooks/useCreateWalletConnectorOptions/useCreateWalletConnectorOptions.js

@@ -1,6 +1,7 @@
 'use client'
 import { __rest } from '../../../../../_virtual/_tslib.js';
 import { useMemo, useEffect } from 'react';
+import { isWalletBookPopulated } from '@dynamic-labs/wallet-book';
 import { getWallets } from '../../../views/WalletList/data.js';
 import '@dynamic-labs/sdk-api-core';
 import '../../constants/values.js';
@@ -13,7 +14,6 @@ import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
 import '../../../context/ViewContext/ViewContext.js';
-import '@dynamic-labs/wallet-book';
 import '../../../store/state/loadingAndLifecycle.js';
 import '../../../shared/consts/index.js';
 import '../../../config/ApiEndpoint.js';
@@ -27,9 +27,9 @@ import { verifyRequiredConnectorsAreSetup } from './utils/verifyRequiredConnecto
 const useCreateWalletConnectorOptions = (_a) => {
     var { projectSettings, networkConfigurations, walletBook, walletConnectorsProp, walletConnectorExtensions } = _a, props = __rest(_a, ["projectSettings", "networkConfigurations", "walletBook", "walletConnectorsProp", "walletConnectorExtensions"]);
     const walletConnectorsKey = useMemo(() => { var _a; return (_a = serializeWalletConnectors(walletConnectorsProp)) === null || _a === void 0 ? void 0 : _a.join(','); }, [walletConnectorsProp]);
-    const walletBookLength = useMemo(() => Object.keys(walletBook !== null && walletBook !== void 0 ? walletBook : {}).length, [walletBook]);
+    const isWalletBookLoaded = useMemo(() => isWalletBookPopulated(walletBook), [walletBook]);
     const walletConnectorOptions = useMemo(() => {
-        if (!projectSettings || !walletBookLength || !networkConfigurations)
+        if (!projectSettings || !isWalletBookLoaded || !networkConfigurations)
             return [];
         return getWallets({
             getSupportedWalletOpts: Object.assign({ networkConfigurations, settings: projectSettings, skipMemo: true, walletBook, walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [] }, props),
@@ -40,7 +40,7 @@ const useCreateWalletConnectorOptions = (_a) => {
     }, [
         projectSettings,
         walletConnectorsKey,
-        walletBookLength,
+        isWalletBookLoaded,
         networkConfigurations,
     ]);
     useEffect(() => {

package/src/lib/utils/hooks/useSocialAuth/useSocialAuth.cjs

@@ -106,6 +106,7 @@ const socialProviders = [
     'google',
     'instagram',
     'line',
+    'shopify',
     'spotify',
     'tiktok',
     'telegram',

package/src/lib/utils/hooks/useSocialAuth/useSocialAuth.js

@@ -102,6 +102,7 @@ const socialProviders = [
     'google',
     'instagram',
     'line',
+    'shopify',
     'spotify',
     'tiktok',
     'telegram',

package/src/lib/views/SelectWalletInWalletGroupView/SelectWalletInWalletGroupView.cjs

@@ -94,7 +94,7 @@ const SelectWalletInWalletGroupView = () => {
     if (!selectedWalletGroup)
         throw new Error('Could not access WalletGroup view without selected group');
     const walletBookData = walletBook.getWalletGroup(walletBook$1, selectedWalletGroup === null || selectedWalletGroup === void 0 ? void 0 : selectedWalletGroup.key);
-    return (jsxRuntime.jsx(WalletGroupViewLayout.WalletGroupViewLayout, { icon: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletBookData.key }), title: t('dyn_select_wallet.description', {
+    return (jsxRuntime.jsx(WalletGroupViewLayout.WalletGroupViewLayout, { icon: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletBookData.key, isGroup: true }), title: t('dyn_select_wallet.description', {
             walletName: walletBookData.name,
         }), titleCopyKey: 'dyn_select_wallet.description', children: selectedWalletGroup.groupedWallets.map((wallet, index) => (jsxRuntime.jsx(WalletGroupItem.WalletGroupItem, { groupKey: selectedWalletGroup.key, wallet: wallet, onClick: () => handleWalletItemClick(wallet) }, `${wallet.key}_${index}`))) }));
 };

package/src/lib/views/SelectWalletInWalletGroupView/SelectWalletInWalletGroupView.js

@@ -90,7 +90,7 @@ const SelectWalletInWalletGroupView = () => {
     if (!selectedWalletGroup)
         throw new Error('Could not access WalletGroup view without selected group');
     const walletBookData = getWalletGroup(walletBook, selectedWalletGroup === null || selectedWalletGroup === void 0 ? void 0 : selectedWalletGroup.key);
-    return (jsx(WalletGroupViewLayout, { icon: jsx(WalletIcon, { walletKey: walletBookData.key }), title: t('dyn_select_wallet.description', {
+    return (jsx(WalletGroupViewLayout, { icon: jsx(WalletIcon, { walletKey: walletBookData.key, isGroup: true }), title: t('dyn_select_wallet.description', {
             walletName: walletBookData.name,
         }), titleCopyKey: 'dyn_select_wallet.description', children: selectedWalletGroup.groupedWallets.map((wallet, index) => (jsx(WalletGroupItem, { groupKey: selectedWalletGroup.key, wallet: wallet, onClick: () => handleWalletItemClick(wallet) }, `${wallet.key}_${index}`))) }));
 };

package/src/lib/views/WalletGroupView/WalletGroupView.cjs

@@ -100,7 +100,7 @@ const WalletGroupView = () => {
         .map(({ walletConnector }) => walletConnector)
         .filter((connector) => walletConnectorCore.isHardwareWalletConnector(connector) &&
         connector.canConnectWithHardwareWallet());
-    return (jsxRuntime.jsx(WalletGroupViewLayout.WalletGroupViewLayout, { icon: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletBookData.key }), title: t('dyn_select_chain.description'), titleCopyKey: 'dyn_select_chain.description', children: jsxRuntime.jsxs("div", { className: 'wallet-group__list', children: [Boolean(hardwareWalletConnectors.length) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(HardwareWalletToggle.HardwareWalletToggle, { connectors: hardwareWalletConnectors, copykey: 'dyn_select_chain.using_hardware_wallet_toggle_label', label: t('dyn_select_chain.using_hardware_wallet_toggle_label') }), jsxRuntime.jsx(Divider.Divider, {})] })), jsxRuntime.jsx("div", { className: 'wallet-group-view-layout__list', children: selectedWalletGroup.groupedWallets.map((wallet, index) => (jsxRuntime.jsx(WalletGroupItem.WalletGroupItem, { wallet: wallet, onClick: () => handleWalletItemClick(wallet) }, `${wallet.key}_${index}`))) })] }) }));
+    return (jsxRuntime.jsx(WalletGroupViewLayout.WalletGroupViewLayout, { icon: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletBookData.key, isGroup: true }), title: t('dyn_select_chain.description'), titleCopyKey: 'dyn_select_chain.description', children: jsxRuntime.jsxs("div", { className: 'wallet-group__list', children: [Boolean(hardwareWalletConnectors.length) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(HardwareWalletToggle.HardwareWalletToggle, { connectors: hardwareWalletConnectors, copykey: 'dyn_select_chain.using_hardware_wallet_toggle_label', label: t('dyn_select_chain.using_hardware_wallet_toggle_label') }), jsxRuntime.jsx(Divider.Divider, {})] })), jsxRuntime.jsx("div", { className: 'wallet-group-view-layout__list', children: selectedWalletGroup.groupedWallets.map((wallet, index) => (jsxRuntime.jsx(WalletGroupItem.WalletGroupItem, { wallet: wallet, onClick: () => handleWalletItemClick(wallet) }, `${wallet.key}_${index}`))) })] }) }));
 };
 
 exports.WalletGroupView = WalletGroupView;

package/src/lib/views/WalletGroupView/WalletGroupView.js

@@ -96,7 +96,7 @@ const WalletGroupView = () => {
         .map(({ walletConnector }) => walletConnector)
         .filter((connector) => isHardwareWalletConnector(connector) &&
         connector.canConnectWithHardwareWallet());
-    return (jsx(WalletGroupViewLayout, { icon: jsx(WalletIcon, { walletKey: walletBookData.key }), title: t('dyn_select_chain.description'), titleCopyKey: 'dyn_select_chain.description', children: jsxs("div", { className: 'wallet-group__list', children: [Boolean(hardwareWalletConnectors.length) && (jsxs(Fragment, { children: [jsx(HardwareWalletToggle, { connectors: hardwareWalletConnectors, copykey: 'dyn_select_chain.using_hardware_wallet_toggle_label', label: t('dyn_select_chain.using_hardware_wallet_toggle_label') }), jsx(Divider, {})] })), jsx("div", { className: 'wallet-group-view-layout__list', children: selectedWalletGroup.groupedWallets.map((wallet, index) => (jsx(WalletGroupItem, { wallet: wallet, onClick: () => handleWalletItemClick(wallet) }, `${wallet.key}_${index}`))) })] }) }));
+    return (jsx(WalletGroupViewLayout, { icon: jsx(WalletIcon, { walletKey: walletBookData.key, isGroup: true }), title: t('dyn_select_chain.description'), titleCopyKey: 'dyn_select_chain.description', children: jsxs("div", { className: 'wallet-group__list', children: [Boolean(hardwareWalletConnectors.length) && (jsxs(Fragment, { children: [jsx(HardwareWalletToggle, { connectors: hardwareWalletConnectors, copykey: 'dyn_select_chain.using_hardware_wallet_toggle_label', label: t('dyn_select_chain.using_hardware_wallet_toggle_label') }), jsx(Divider, {})] })), jsx("div", { className: 'wallet-group-view-layout__list', children: selectedWalletGroup.groupedWallets.map((wallet, index) => (jsx(WalletGroupItem, { wallet: wallet, onClick: () => handleWalletItemClick(wallet) }, `${wallet.key}_${index}`))) })] }) }));
 };
 
 export { WalletGroupView };

package/src/lib/views/WalletList/WalletListItem/WalletListItem.cjs

@@ -126,7 +126,7 @@ const WalletListItem = ({ disabled = false, wallet, onResetSearchValue, recommen
     const name = _isWalletGroup
         ? walletBook.getWalletGroup(walletBook$1, wallet.key).name
         : wallet.walletConnector.metadata.name;
-    const leading = (jsxRuntime.jsx(walletBook.WalletIcon, { className: 'wallet-list-item__leading', icon: (_a = wallet.walletConnector) === null || _a === void 0 ? void 0 : _a.metadata.icon, walletKey: wallet.key, style: { height: pixelToRem.pixelToRem(28), width: pixelToRem.pixelToRem(28) } }));
+    const leading = (jsxRuntime.jsx(walletBook.WalletIcon, { className: 'wallet-list-item__leading', icon: (_a = wallet.walletConnector) === null || _a === void 0 ? void 0 : _a.metadata.icon, walletKey: wallet.key, style: { height: pixelToRem.pixelToRem(28), width: pixelToRem.pixelToRem(28) }, isGroup: _isWalletGroup }));
     const trailing = (jsxRuntime.jsx(ListTileAnimatedTrailing.ListTileAnimatedTrailing, { hoverElement: 
         // eslint-disable-next-line react/jsx-wrap-multilines
         jsxRuntime.jsx(Icon.Icon, { color: 'text-tertiary', size: 'mini', children: jsxRuntime.jsx(stroke.ReactComponent, {}) }), children: labelSettings && (jsxRuntime.jsx(Badge.Badge, { dot: !labelSettings.isRecommended, variant: labelSettings.isRecommended ? 'primary' : 'secondary', text: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', children: labelSettings.label }) })) }));

package/src/lib/views/WalletList/WalletListItem/WalletListItem.js

@@ -122,7 +122,7 @@ const WalletListItem = ({ disabled = false, wallet, onResetSearchValue, recommen
     const name = _isWalletGroup
         ? getWalletGroup(walletBook, wallet.key).name
         : wallet.walletConnector.metadata.name;
-    const leading = (jsx(WalletIcon, { className: 'wallet-list-item__leading', icon: (_a = wallet.walletConnector) === null || _a === void 0 ? void 0 : _a.metadata.icon, walletKey: wallet.key, style: { height: pixelToRem(28), width: pixelToRem(28) } }));
+    const leading = (jsx(WalletIcon, { className: 'wallet-list-item__leading', icon: (_a = wallet.walletConnector) === null || _a === void 0 ? void 0 : _a.metadata.icon, walletKey: wallet.key, style: { height: pixelToRem(28), width: pixelToRem(28) }, isGroup: _isWalletGroup }));
     const trailing = (jsx(ListTileAnimatedTrailing, { hoverElement: 
         // eslint-disable-next-line react/jsx-wrap-multilines
         jsx(Icon, { color: 'text-tertiary', size: 'mini', children: jsx(SvgStroke, {}) }), children: labelSettings && (jsx(Badge, { dot: !labelSettings.isRecommended, variant: labelSettings.isRecommended ? 'primary' : 'secondary', text: jsx(Typography, { variant: 'body_small', children: labelSettings.label }) })) }));

package/src/lib/views/WalletList/data.cjs

@@ -16,6 +16,7 @@ var createWallet = require('../../shared/utils/functions/wallet/createWallet.cjs
 require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
 require('../../utils/constants/values.cjs');
+require('@dynamic-labs/wallet-book');
 require('../../store/state/loadingAndLifecycle.cjs');
 require('../../shared/consts/index.cjs');
 

package/src/lib/views/WalletList/data.js

@@ -12,6 +12,7 @@ import { createWallet } from '../../shared/utils/functions/wallet/createWallet.j
 import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
 import '../../utils/constants/values.js';
+import '@dynamic-labs/wallet-book';
 import '../../store/state/loadingAndLifecycle.js';
 import '../../shared/consts/index.js';