@dynamic-labs/sdk-react-core 0.17.0-RC.30 → 0.17.0-RC.31

package/CHANGELOG.md

@@ -1,4 +1,18 @@
 
+## [0.17.0-RC.31](https://github.com/dynamic-labs/DynamicAuth/compare/v0.17.0-RC.30...v0.17.0-RC.31) (2023-06-09)
+
+
+### Features
+
+* add fake dapper mobile metadata so that it appears on mobile ([#2288](https://github.com/dynamic-labs/DynamicAuth/issues/2288)) ([ea98462](https://github.com/dynamic-labs/DynamicAuth/commit/ea98462e762d3fa032e2e40f17d2e3679146b3ae))
+* pass variant to social icon getter ([#2277](https://github.com/dynamic-labs/DynamicAuth/issues/2277)) ([b1492ed](https://github.com/dynamic-labs/DynamicAuth/commit/b1492eda50eb80fbfee1aa968771f338694ef7e6))
+
+
+### Bug Fixes
+
+* don't remove network config from ls if there's a connected wallet ([#2280](https://github.com/dynamic-labs/DynamicAuth/issues/2280)) ([0703dfc](https://github.com/dynamic-labs/DynamicAuth/commit/0703dfc099f86a0802e83a27849b6953e1ddca31))
+* **use-wallets-connection-state:** load connected state when wallets are present ([#2285](https://github.com/dynamic-labs/DynamicAuth/issues/2285)) ([7fb72dc](https://github.com/dynamic-labs/DynamicAuth/commit/7fb72dc8fe1404cd76e68bb3f0de9efa78634525))
+
 ## [0.17.0-RC.30](https://github.com/dynamic-labs/DynamicAuth/compare/v0.17.0-RC.29...v0.17.0-RC.30) (2023-06-08)
 
 

package/package.cjs

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.17.0-RC.30";
+var version = "0.17.0-RC.31";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
-	"@dynamic-labs/iconic": "0.1.19",
+	"@dynamic-labs/iconic": "0.1.23",
 	"@dynamic-labs/sdk-api": "0.0.198",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",

package/package.js

@@ -1,7 +1,7 @@
-var version = "0.17.0-RC.30";
+var version = "0.17.0-RC.31";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
-	"@dynamic-labs/iconic": "0.1.19",
+	"@dynamic-labs/iconic": "0.1.23",
 	"@dynamic-labs/sdk-api": "0.0.198",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "0.17.0-RC.30",
+  "version": "0.17.0-RC.31",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "react-focus-lock": "2.9.2",
-    "@dynamic-labs/iconic": "0.1.19",
+    "@dynamic-labs/iconic": "0.1.23",
     "@dynamic-labs/sdk-api": "0.0.198",
     "@hcaptcha/react-hcaptcha": "1.4.4",
     "country-list": "2.3.0",
@@ -16,13 +16,13 @@
     "formik": "2.2.9",
     "qrcode": "1.5.1",
     "ethers": "5.7.2",
-    "@dynamic-labs/logger": "0.17.0-RC.30",
-    "@dynamic-labs/multi-wallet": "0.17.0-RC.30",
-    "@dynamic-labs/rpc-providers": "0.17.0-RC.30",
-    "@dynamic-labs/types": "0.17.0-RC.30",
-    "@dynamic-labs/utils": "0.17.0-RC.30",
-    "@dynamic-labs/wallet-book": "0.17.0-RC.30",
-    "@dynamic-labs/wallet-connector-core": "0.17.0-RC.30"
+    "@dynamic-labs/logger": "0.17.0-RC.31",
+    "@dynamic-labs/multi-wallet": "0.17.0-RC.31",
+    "@dynamic-labs/rpc-providers": "0.17.0-RC.31",
+    "@dynamic-labs/types": "0.17.0-RC.31",
+    "@dynamic-labs/utils": "0.17.0-RC.31",
+    "@dynamic-labs/wallet-book": "0.17.0-RC.31",
+    "@dynamic-labs/wallet-connector-core": "0.17.0-RC.31"
   },
   "devDependencies": {
     "semver": "7.3.8"

package/src/index.cjs

@@ -96,8 +96,8 @@ require('@dynamic-labs/wallet-book');
 require('./lib/components/Alert/Alert.cjs');
 var useWalletItemActions = require('./lib/utils/hooks/useWalletItemActions/useWalletItemActions.cjs');
 var useUserUpdateRequest = require('./lib/utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-var DynamicConnectButton = require('./lib/components/DynamicConnectButton/DynamicConnectButton.cjs');
 require('@dynamic-labs/iconic');
+var DynamicConnectButton = require('./lib/components/DynamicConnectButton/DynamicConnectButton.cjs');
 require('./lib/components/Popper/Popper/Popper.cjs');
 require('./lib/components/Popper/PopperContext/PopperContext.cjs');
 require('formik');

package/src/index.js

@@ -92,8 +92,8 @@ import '@dynamic-labs/wallet-book';
 import './lib/components/Alert/Alert.js';
 export { useWalletItemActions } from './lib/utils/hooks/useWalletItemActions/useWalletItemActions.js';
 export { useUserUpdateRequest } from './lib/utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-export { DynamicConnectButton } from './lib/components/DynamicConnectButton/DynamicConnectButton.js';
 import '@dynamic-labs/iconic';
+export { DynamicConnectButton } from './lib/components/DynamicConnectButton/DynamicConnectButton.js';
 import './lib/components/Popper/Popper/Popper.js';
 import './lib/components/Popper/PopperContext/PopperContext.js';
 import 'formik';

package/src/lib/components/AuthProviderIcon/AuthProviderIcon.cjs

@@ -16,20 +16,40 @@ require('react');
 require('ethers');
 var pixelToRem = require('../../utils/functions/pixelToRem/pixelToRem.cjs');
 var getReferencedAccount = require('../../utils/functions/getReferencedAccount/getReferencedAccount.cjs');
-var getSocialIcon = require('../../utils/functions/getSocialIcon/getSocialIcon.cjs');
 var IconWithStatus = require('../IconWithStatus/IconWithStatus.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 var WalletIconWithStatus = require('../../widgets/DynamicWidget/components/WalletIconWithStatus/WalletIconWithStatus.cjs');
 var AccessDeniedContext = require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../config/ApiEndpoint.cjs');
+require('../../shared/consts/index.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../context/ErrorContext/ErrorContext.cjs');
+require('react-dom');
+require('../ShadowDOM/ShadowDOM.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
+require('react-focus-lock');
+require('../Transition/ZoomTransition/ZoomTransition.cjs');
+require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../Transition/OpacityTransition/OpacityTransition.cjs');
+require('../IconButton/IconButton.cjs');
+require('../Alert/Alert.cjs');
+require('../Popper/Popper/Popper.cjs');
+require('../Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
+require('../../context/MockContext/MockContext.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var useGetSocialIcon = require('../../utils/hooks/useGetSocialIcon/useGetSocialIcon.cjs');
 
-const getMagicEmailOrSocialIcon = ({ wallet, jwt, }) => {
+const getMagicEmailOrSocialIcon = ({ getSocialIcon, wallet, jwt, }) => {
     let Icon = null;
     if (walletConnectorCore.isEmailOTPWalletConnector(wallet.connector)) {
         Icon = iconic.SignInWithEmailIcon;
     }
     if (walletConnectorCore.isSocialWalletConnector(wallet.connector)) {
         const socialAccountDataForWallet = getReferencedAccount.getReferencedAccount(jwt, wallet.id);
-        const MagicSocialWalletIcon = getSocialIcon.getSocialIcon(socialAccountDataForWallet === null || socialAccountDataForWallet === void 0 ? void 0 : socialAccountDataForWallet.oauthProvider);
+        const MagicSocialWalletIcon = getSocialIcon(socialAccountDataForWallet === null || socialAccountDataForWallet === void 0 ? void 0 : socialAccountDataForWallet.oauthProvider);
         Icon = MagicSocialWalletIcon;
     }
     return Icon;
@@ -37,9 +57,10 @@ const getMagicEmailOrSocialIcon = ({ wallet, jwt, }) => {
 const AuthProviderIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
     const { primaryWallet, selectedWalletConnector } = useInternalDynamicContext.useInternalDynamicContext();
     const { deniedOauthProvider, deniedAddress } = AccessDeniedContext.useAccessDeniedContext();
+    const getSocialIcon = useGetSocialIcon.useGetSocialIcon();
     // when access is denied we don't have jwt set, so we're getting this value out of useAccessDeniedContext
     if (deniedOauthProvider) {
-        const MagicSocialWalletIcon = getSocialIcon.getSocialIcon(deniedOauthProvider);
+        const MagicSocialWalletIcon = getSocialIcon(deniedOauthProvider);
         return (jsxRuntime.jsx(MagicSocialWalletIcon, { style: {
                 height: pixelToRem.pixelToRem(iconSize),
                 width: pixelToRem.pixelToRem(iconSize),
@@ -54,6 +75,7 @@ const AuthProviderIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
     }
     const walletForIcon = wallet ? wallet : primaryWallet;
     const MagicEmailOrSocialIcon = getMagicEmailOrSocialIcon({
+        getSocialIcon,
         jwt,
         wallet: walletForIcon,
     });

package/src/lib/components/AuthProviderIcon/AuthProviderIcon.js

@@ -12,13 +12,33 @@ import 'react';
 import 'ethers';
 import { pixelToRem } from '../../utils/functions/pixelToRem/pixelToRem.js';
 import { getReferencedAccount } from '../../utils/functions/getReferencedAccount/getReferencedAccount.js';
-import { getSocialIcon } from '../../utils/functions/getSocialIcon/getSocialIcon.js';
 import { IconWithStatus } from '../IconWithStatus/IconWithStatus.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import { WalletIconWithStatus } from '../../widgets/DynamicWidget/components/WalletIconWithStatus/WalletIconWithStatus.js';
 import { useAccessDeniedContext } from '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../config/ApiEndpoint.js';
+import '../../shared/consts/index.js';
+import '@dynamic-labs/rpc-providers';
+import '../../context/ErrorContext/ErrorContext.js';
+import 'react-dom';
+import '../ShadowDOM/ShadowDOM.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import 'react-focus-lock';
+import '../Transition/ZoomTransition/ZoomTransition.js';
+import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../Transition/OpacityTransition/OpacityTransition.js';
+import '../IconButton/IconButton.js';
+import '../Alert/Alert.js';
+import '../Popper/Popper/Popper.js';
+import '../Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
+import '../../context/MockContext/MockContext.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { useGetSocialIcon } from '../../utils/hooks/useGetSocialIcon/useGetSocialIcon.js';
 
-const getMagicEmailOrSocialIcon = ({ wallet, jwt, }) => {
+const getMagicEmailOrSocialIcon = ({ getSocialIcon, wallet, jwt, }) => {
     let Icon = null;
     if (isEmailOTPWalletConnector(wallet.connector)) {
         Icon = SignInWithEmailIcon;
@@ -33,6 +53,7 @@ const getMagicEmailOrSocialIcon = ({ wallet, jwt, }) => {
 const AuthProviderIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
     const { primaryWallet, selectedWalletConnector } = useInternalDynamicContext();
     const { deniedOauthProvider, deniedAddress } = useAccessDeniedContext();
+    const getSocialIcon = useGetSocialIcon();
     // when access is denied we don't have jwt set, so we're getting this value out of useAccessDeniedContext
     if (deniedOauthProvider) {
         const MagicSocialWalletIcon = getSocialIcon(deniedOauthProvider);
@@ -50,6 +71,7 @@ const AuthProviderIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
     }
     const walletForIcon = wallet ? wallet : primaryWallet;
     const MagicEmailOrSocialIcon = getMagicEmailOrSocialIcon({
+        getSocialIcon,
         jwt,
         wallet: walletForIcon,
     });

package/src/lib/components/Divider/Divider.cjs

@@ -41,6 +41,6 @@ require('yup');
 
 const Divider = ({ text, className = '', fullWidth = false }) => (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('divider', className, {
         'divider__full-width': fullWidth,
-    }) }, { children: [jsxRuntime.jsx("div", { className: 'divider__dash' }), jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'divider__text', variant: 'body_small', color: 'secondary' }, { children: text })), jsxRuntime.jsx("div", { className: 'divider__dash' })] })));
+    }) }, { children: [jsxRuntime.jsx("div", { className: 'divider__dash' }), Boolean(text) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'divider__text', variant: 'body_small', color: 'secondary' }, { children: text })), jsxRuntime.jsx("div", { className: 'divider__dash' })] }))] })));
 
 exports.Divider = Divider;

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

@@ -2,7 +2,7 @@
 type Props = {
     className?: string;
     fullWidth?: boolean;
-    text: string;
+    text?: string;
 };
 export declare const Divider: ({ text, className, fullWidth }: Props) => JSX.Element;
 export {};

package/src/lib/components/Divider/Divider.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import 'react';
 import { Typography } from '../Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
@@ -37,6 +37,6 @@ import 'yup';
 
 const Divider = ({ text, className = '', fullWidth = false }) => (jsxs("div", Object.assign({ className: classNames('divider', className, {
         'divider__full-width': fullWidth,
-    }) }, { children: [jsx("div", { className: 'divider__dash' }), jsx(Typography, Object.assign({ className: 'divider__text', variant: 'body_small', color: 'secondary' }, { children: text })), jsx("div", { className: 'divider__dash' })] })));
+    }) }, { children: [jsx("div", { className: 'divider__dash' }), Boolean(text) && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ className: 'divider__text', variant: 'body_small', color: 'secondary' }, { children: text })), jsx("div", { className: 'divider__dash' })] }))] })));
 
 export { Divider };

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

@@ -33,8 +33,8 @@ var useWalletUiUtils = require('../../utils/hooks/useWalletUiUtils/useWalletUiUt
 require('../MockContext/MockContext.cjs');
 var CaptchaContext = require('../CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-var ApiEndpoint = require('../../config/ApiEndpoint.cjs');
 var ThemeContext = require('../ThemeContext/ThemeContext.cjs');
+var ApiEndpoint = require('../../config/ApiEndpoint.cjs');
 var useFetchNetworkConfigurations = require('../../utils/hooks/useFetchNetworkConfigurations/useFetchNetworkConfigurations.cjs');
 var useMultiWalletWidgetState = require('../../utils/hooks/multiWallet/useMultiWalletWidgetState/useMultiWalletWidgetState.cjs');
 var useSyncPrimaryWallet = require('../../utils/hooks/multiWallet/useSyncPrimaryWallet/useSyncPrimaryWallet.cjs');

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

@@ -29,8 +29,8 @@ import { useWalletUiUtils } from '../../utils/hooks/useWalletUiUtils/useWalletUi
 import '../MockContext/MockContext.js';
 import { CaptchaContextProvider } from '../CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import ApiEndpoint from '../../config/ApiEndpoint.js';
 import { ThemeContextProvider } from '../ThemeContext/ThemeContext.js';
+import ApiEndpoint from '../../config/ApiEndpoint.js';
 import { useFetchNetworkConfigurations } from '../../utils/hooks/useFetchNetworkConfigurations/useFetchNetworkConfigurations.js';
 import { useMultiWalletWidgetState } from '../../utils/hooks/multiWallet/useMultiWalletWidgetState/useMultiWalletWidgetState.js';
 import { useSyncPrimaryWallet } from '../../utils/hooks/multiWallet/useSyncPrimaryWallet/useSyncPrimaryWallet.js';

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

@@ -20,3 +20,5 @@ export { useWalletItemActions } from './useWalletItemActions';
 export { usePromise } from './usePromise';
 export { useMutation } from './useMutation';
 export { useUserUpdateRequest } from './useUserUpdateRequest/useUserUpdateRequest';
+export { useColorSchemePreference } from './useColorSchemePreference';
+export { useGetSocialIcon } from './useGetSocialIcon';

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

@@ -0,0 +1 @@
+export * from './useColorSchemePreference';

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

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const useColorSchemePreference = () => {
+    const [preference, setPreference] = React.useState(() => window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light');
+    React.useEffect(() => {
+        const listener = (e) => {
+            setPreference(e.matches ? 'dark' : 'light');
+        };
+        window
+            .matchMedia('(prefers-color-scheme: dark)')
+            .addEventListener('change', listener);
+        return () => {
+            window
+                .matchMedia('(prefers-color-scheme: dark)')
+                .removeEventListener('change', listener);
+        };
+    }, []);
+    return preference;
+};
+
+exports.useColorSchemePreference = useColorSchemePreference;

package/src/lib/utils/hooks/useColorSchemePreference/useColorSchemePreference.d.ts

@@ -0,0 +1 @@
+export declare const useColorSchemePreference: () => "dark" | "light";

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

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+
+const useColorSchemePreference = () => {
+    const [preference, setPreference] = useState(() => window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light');
+    useEffect(() => {
+        const listener = (e) => {
+            setPreference(e.matches ? 'dark' : 'light');
+        };
+        window
+            .matchMedia('(prefers-color-scheme: dark)')
+            .addEventListener('change', listener);
+        return () => {
+            window
+                .matchMedia('(prefers-color-scheme: dark)')
+                .removeEventListener('change', listener);
+        };
+    }, []);
+    return preference;
+};
+
+export { useColorSchemePreference };

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

@@ -7,6 +7,7 @@ var utils = require('@dynamic-labs/utils');
 var api = require('../../../data/api.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../shared/logger.cjs');
+var getFromLS = require('../../../shared/utils/functions/storage/getFromLS.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
@@ -46,7 +47,8 @@ const useFetchNetworkConfigurations = ({ authToken, environmentId, evmNetworks:
         }
     }, [environmentId, handleRemoveLsNetworks, lsNetworks, removeLsNetworks]);
     React.useEffect(() => {
-        if (!authToken) {
+        const connectedWalletData = getFromLS.getFromLS(localStorage.CONNECTED_WALLET_CONNECTOR_DATA);
+        if (!authToken && !connectedWalletData) {
             handleRemoveLsNetworks();
         }
     }, [authToken, handleRemoveLsNetworks]);

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

@@ -3,11 +3,12 @@ import { DynamicError } from '@dynamic-labs/utils';
 import { fetchNetworkSettings } from '../../../data/api.js';
 import '@dynamic-labs/sdk-api';
 import '../../../shared/logger.js';
+import { getFromLS } from '../../../shared/utils/functions/storage/getFromLS.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
 import '../../../context/ViewContext/ViewContext.js';
-import { NETWORKS_STORAGE_KEY } from '../../constants/localStorage.js';
+import { NETWORKS_STORAGE_KEY, CONNECTED_WALLET_CONNECTOR_DATA } from '../../constants/localStorage.js';
 import '../../constants/colors.js';
 import 'ethers';
 import { useLocalStorage } from '../../../shared/utils/hooks/useLocalStorage/useLocalStorage.js';
@@ -42,7 +43,8 @@ const useFetchNetworkConfigurations = ({ authToken, environmentId, evmNetworks:
         }
     }, [environmentId, handleRemoveLsNetworks, lsNetworks, removeLsNetworks]);
     useEffect(() => {
-        if (!authToken) {
+        const connectedWalletData = getFromLS(CONNECTED_WALLET_CONNECTOR_DATA);
+        if (!authToken && !connectedWalletData) {
             handleRemoveLsNetworks();
         }
     }, [authToken, handleRemoveLsNetworks]);

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

@@ -0,0 +1 @@
+export * from './useGetSocialIcon';

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

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var iconic = require('@dynamic-labs/iconic');
+var ThemeContext = require('../../../context/ThemeContext/ThemeContext.cjs');
+var useColorSchemePreference = require('../useColorSchemePreference/useColorSchemePreference.cjs');
+
+const useGetSocialIcon = () => {
+    const { theme: { theme: { name }, }, } = ThemeContext.useThemeContext();
+    const preference = useColorSchemePreference.useColorSchemePreference();
+    const variant = name === 'auto' ? preference : name;
+    return React.useCallback((provider) => iconic.getSocialIcon(provider, variant), [variant]);
+};
+
+exports.useGetSocialIcon = useGetSocialIcon;

package/src/lib/utils/hooks/useGetSocialIcon/useGetSocialIcon.d.ts

@@ -0,0 +1,2 @@
+import { SocialProvider } from '@dynamic-labs/wallet-connector-core';
+export declare const useGetSocialIcon: () => (provider: SocialProvider) => import("@dynamic-labs/iconic").Iconic;

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

@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+import { getSocialIcon } from '@dynamic-labs/iconic';
+import { useThemeContext } from '../../../context/ThemeContext/ThemeContext.js';
+import { useColorSchemePreference } from '../useColorSchemePreference/useColorSchemePreference.js';
+
+const useGetSocialIcon = () => {
+    const { theme: { theme: { name }, }, } = useThemeContext();
+    const preference = useColorSchemePreference();
+    const variant = name === 'auto' ? preference : name;
+    return useCallback((provider) => getSocialIcon(provider, variant), [variant]);
+};
+
+export { useGetSocialIcon };

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

@@ -17,25 +17,29 @@ require('ethers');
 var isWalletConnected = require('../../functions/isWalletConnected/isWalletConnected.cjs');
 require('../../../shared/consts/index.cjs');
 
+const connectedWalletStateReducer = (state, connectedWalletsMap) => {
+    const isConnectedWalletsMapEmpty = Object.values(connectedWalletsMap).length === 0;
+    if (isConnectedWalletsMapEmpty && state.didLoad === false) {
+        return state;
+    }
+    return Object.assign(Object.assign({}, state), { connectedWalletsMap, didLoad: true });
+};
 const useWalletsConnectionState = (linkedWallets) => {
-    const [connectedWalletMap, setConnectedWalletMap] = React.useState();
+    const [state, setState] = React.useReducer(connectedWalletStateReducer, {
+        connectedWalletsMap: {},
+        didLoad: false,
+    });
     const computeConnectedStateForWallets = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        const connectedWalletIds = (yield Promise.all(linkedWallets.map((wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            const isConnected = yield isWalletConnected.isWalletConnected(wallet);
-            if (isConnected) {
-                return wallet.id;
-            }
-            else {
-                return undefined;
-            }
-        })))).filter((connectedWalletId) => connectedWalletId !== undefined);
-        const newConnectedStateByWalletIdMap = connectedWalletIds.reduce((result, walletId) => (Object.assign(Object.assign({}, result), { [walletId]: true })), {});
-        setConnectedWalletMap(newConnectedStateByWalletIdMap);
-    }), [linkedWallets, setConnectedWalletMap]);
+        const connectedWalletsMap = {};
+        yield Promise.all(linkedWallets.map((wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            connectedWalletsMap[wallet.id] = yield isWalletConnected.isWalletConnected(wallet);
+        })));
+        setState(connectedWalletsMap);
+    }), [linkedWallets, setState]);
     return {
         computeConnectedStateForWallets,
-        connectedWalletMap: connectedWalletMap !== null && connectedWalletMap !== void 0 ? connectedWalletMap : {},
-        didConnectedStateLoad: Boolean(connectedWalletMap),
+        connectedWalletMap: state.connectedWalletsMap,
+        didConnectedStateLoad: state.didLoad,
     };
 };
 

package/src/lib/utils/hooks/useWalletsConnectionState/useWalletsConnectionState.d.ts

@@ -1,11 +1,14 @@
 import { Wallet } from '../../../shared';
-type ConnectedWalletsMap = {
-    [address: string]: boolean;
+type ConnectedState = {
+    didLoad: boolean;
+    connectedWalletsMap: {
+        [address: string]: boolean;
+    };
 };
 type WalletsConnectionStateHook = (wallets: Wallet[]) => {
     computeConnectedStateForWallets: () => Promise<void>;
-    connectedWalletMap: ConnectedWalletsMap;
-    didConnectedStateLoad: boolean;
+    connectedWalletMap: ConnectedState['connectedWalletsMap'];
+    didConnectedStateLoad: ConnectedState['didLoad'];
 };
 export declare const useWalletsConnectionState: WalletsConnectionStateHook;
 export {};

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

@@ -1,5 +1,5 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useState, useCallback } from 'react';
+import { useReducer, useCallback } from 'react';
 import '../../constants/colors.js';
 import '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/utils';
@@ -13,25 +13,29 @@ import 'ethers';
 import { isWalletConnected } from '../../functions/isWalletConnected/isWalletConnected.js';
 import '../../../shared/consts/index.js';
 
+const connectedWalletStateReducer = (state, connectedWalletsMap) => {
+    const isConnectedWalletsMapEmpty = Object.values(connectedWalletsMap).length === 0;
+    if (isConnectedWalletsMapEmpty && state.didLoad === false) {
+        return state;
+    }
+    return Object.assign(Object.assign({}, state), { connectedWalletsMap, didLoad: true });
+};
 const useWalletsConnectionState = (linkedWallets) => {
-    const [connectedWalletMap, setConnectedWalletMap] = useState();
+    const [state, setState] = useReducer(connectedWalletStateReducer, {
+        connectedWalletsMap: {},
+        didLoad: false,
+    });
     const computeConnectedStateForWallets = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        const connectedWalletIds = (yield Promise.all(linkedWallets.map((wallet) => __awaiter(void 0, void 0, void 0, function* () {
-            const isConnected = yield isWalletConnected(wallet);
-            if (isConnected) {
-                return wallet.id;
-            }
-            else {
-                return undefined;
-            }
-        })))).filter((connectedWalletId) => connectedWalletId !== undefined);
-        const newConnectedStateByWalletIdMap = connectedWalletIds.reduce((result, walletId) => (Object.assign(Object.assign({}, result), { [walletId]: true })), {});
-        setConnectedWalletMap(newConnectedStateByWalletIdMap);
-    }), [linkedWallets, setConnectedWalletMap]);
+        const connectedWalletsMap = {};
+        yield Promise.all(linkedWallets.map((wallet) => __awaiter(void 0, void 0, void 0, function* () {
+            connectedWalletsMap[wallet.id] = yield isWalletConnected(wallet);
+        })));
+        setState(connectedWalletsMap);
+    }), [linkedWallets, setState]);
     return {
         computeConnectedStateForWallets,
-        connectedWalletMap: connectedWalletMap !== null && connectedWalletMap !== void 0 ? connectedWalletMap : {},
-        didConnectedStateLoad: Boolean(connectedWalletMap),
+        connectedWalletMap: state.connectedWalletsMap,
+        didConnectedStateLoad: state.didLoad,
     };
 };
 

package/src/lib/views/LoginWithEmailView/components/SocialSignIn/SocialSignIn.cjs

@@ -40,19 +40,20 @@ require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 var useMutation = require('../../../../utils/hooks/useMutation/useMutation.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var useGetSocialIcon = require('../../../../utils/hooks/useGetSocialIcon/useGetSocialIcon.cjs');
 var IconListTile = require('../../../../components/IconListTile/IconListTile.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 var SocialRedirectContext = require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
-var getSocialIcon = require('../../../../utils/functions/getSocialIcon/getSocialIcon.cjs');
 var OverlayCard = require('../../../../components/OverlayCard/OverlayCard.cjs');
 require('../../../../components/OverlayCard/OverlayCard.context.cjs');
 var capitalize = require('../../../../shared/utils/functions/capitalize/capitalize.cjs');
 
 const SocialSignIn = () => {
     const { socialProvider, setSocialProvider, socialWalletConnector, enabledSocialProviders, } = SocialRedirectContext.useSocialRedirectContext();
+    const getSocialIcon = useGetSocialIcon.useGetSocialIcon();
     const [showCard, setShowCard] = React.useState(false);
     const closeCard = () => !isLoading && setShowCard(false);
     const numberOfEnabledSocialProviders = enabledSocialProviders.length;
@@ -70,7 +71,7 @@ const SocialSignIn = () => {
     const closeButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: closeCard, type: 'button', id: 'close-button', disabled: isLoading, "data-testid": 'close-button' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'social-sign-in', style: {
                     '--number-of-social-grid-items': numberOfSocialGridItems,
-                } }, { children: [socialProvidersToDisplayInline.map((provider) => (jsxRuntime.jsxs(IconListTile.IconListTile, Object.assign({ dataTestId: `inline-${provider}`, onClick: () => onClickProvider(provider), className: 'social-sign-in--tile' }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: getSocialIcon.getSocialIcon(provider), isSpinning: socialProvider === provider, iconSize: 32 }), showConnectText && (jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with ", capitalize.capitalize(provider)] })))] }), provider))), showCardButton && (jsxRuntime.jsx(IconListTile.IconListTile, Object.assign({ dataTestId: 'show-more-options', onClick: () => setShowCard(true) }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-primary' }, { children: jsxRuntime.jsx(dotsHorizontal.ReactComponent, {}) })) }), 'show-more-options'))] })), jsxRuntime.jsx(OverlayCard.OverlayCard, Object.assign({ isOpen: showCard, onClickOverlay: closeCard }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'social-sign-in--card' }, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: "Choose a social account" })) })), jsxRuntime.jsx("div", Object.assign({ className: 'social-sign-in--card--body' }, { children: enabledSocialProviders.map((provider) => (jsxRuntime.jsx(IconListTile.IconListTile, Object.assign({ dataTestId: `card-${provider}`, onClick: () => onClickProvider(provider), className: 'social-sign-in--card--tile' }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: getSocialIcon.getSocialIcon(provider), isSpinning: socialProvider === provider, iconSize: 32 }) }), provider))) }))] })) }))] }));
+                } }, { children: [socialProvidersToDisplayInline.map((provider) => (jsxRuntime.jsxs(IconListTile.IconListTile, Object.assign({ dataTestId: `inline-${provider}`, onClick: () => onClickProvider(provider), className: 'social-sign-in--tile' }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: getSocialIcon(provider), isSpinning: socialProvider === provider, iconSize: 32 }), showConnectText && (jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with ", capitalize.capitalize(provider)] })))] }), provider))), showCardButton && (jsxRuntime.jsx(IconListTile.IconListTile, Object.assign({ dataTestId: 'show-more-options', onClick: () => setShowCard(true) }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-primary' }, { children: jsxRuntime.jsx(dotsHorizontal.ReactComponent, {}) })) }), 'show-more-options'))] })), jsxRuntime.jsx(OverlayCard.OverlayCard, Object.assign({ isOpen: showCard, onClickOverlay: closeCard }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'social-sign-in--card' }, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: "Choose a social account" })) })), jsxRuntime.jsx("div", Object.assign({ className: 'social-sign-in--card--body' }, { children: enabledSocialProviders.map((provider) => (jsxRuntime.jsx(IconListTile.IconListTile, Object.assign({ dataTestId: `card-${provider}`, onClick: () => onClickProvider(provider), className: 'social-sign-in--card--tile' }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: getSocialIcon(provider), isSpinning: socialProvider === provider, iconSize: 32 }) }), provider))) }))] })) }))] }));
 };
 
 exports.SocialSignIn = SocialSignIn;

package/src/lib/views/LoginWithEmailView/components/SocialSignIn/SocialSignIn.js

@@ -36,19 +36,20 @@ import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import { useMutation } from '../../../../utils/hooks/useMutation/useMutation.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { useGetSocialIcon } from '../../../../utils/hooks/useGetSocialIcon/useGetSocialIcon.js';
 import { IconListTile } from '../../../../components/IconListTile/IconListTile.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import { useSocialRedirectContext } from '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
-import { getSocialIcon } from '../../../../utils/functions/getSocialIcon/getSocialIcon.js';
 import { OverlayCard } from '../../../../components/OverlayCard/OverlayCard.js';
 import '../../../../components/OverlayCard/OverlayCard.context.js';
 import { capitalize } from '../../../../shared/utils/functions/capitalize/capitalize.js';
 
 const SocialSignIn = () => {
     const { socialProvider, setSocialProvider, socialWalletConnector, enabledSocialProviders, } = useSocialRedirectContext();
+    const getSocialIcon = useGetSocialIcon();
     const [showCard, setShowCard] = useState(false);
     const closeCard = () => !isLoading && setShowCard(false);
     const numberOfEnabledSocialProviders = enabledSocialProviders.length;

package/src/lib/views/SocialRedirectView/SocialRedirectView.cjs

@@ -35,22 +35,23 @@ require('../../components/Alert/Alert.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var useGetSocialIcon = require('../../utils/hooks/useGetSocialIcon/useGetSocialIcon.cjs');
 var TosAndPp = require('../../components/TosAndPp/TosAndPp.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 var SocialRedirectContext = require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
-var getSocialIcon = require('../../utils/functions/getSocialIcon/getSocialIcon.cjs');
 
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const SocialRedirectView = () => {
     const { socialProvider, socialWalletConnector } = SocialRedirectContext.useSocialRedirectContext();
+    const getSocialIcon = useGetSocialIcon.useGetSocialIcon();
     const { termsOfServiceUrl, privacyPolicyUrl, isAuthenticated } = useInternalDynamicContext.useInternalDynamicContext();
     if (!socialWalletConnector || !socialProvider) {
         return null;
     }
-    return (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('social-redirect-view__container') }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { iconSize: 64, Icon: getSocialIcon.getSocialIcon(socialProvider), isSpinning: true }), jsxRuntime.jsxs(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', className: classNames.classNames('social-redirect-view__title') }, { children: ["Connecting to ", capitalize(socialProvider), "..."] })), jsxRuntime.jsx(TosAndPp.TosAndPp, { mode: isAuthenticated ? 'connecting' : 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('social-redirect-view__container') }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { iconSize: 64, Icon: getSocialIcon(socialProvider), isSpinning: true }), jsxRuntime.jsxs(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', className: classNames.classNames('social-redirect-view__title') }, { children: ["Connecting to ", capitalize(socialProvider), "..."] })), jsxRuntime.jsx(TosAndPp.TosAndPp, { mode: isAuthenticated ? 'connecting' : 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })] })));
 };
 
 exports.SocialRedirectView = SocialRedirectView;

package/src/lib/views/SocialRedirectView/SocialRedirectView.js

@@ -31,17 +31,18 @@ import '../../components/Alert/Alert.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { useGetSocialIcon } from '../../utils/hooks/useGetSocialIcon/useGetSocialIcon.js';
 import { TosAndPp } from '../../components/TosAndPp/TosAndPp.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import { useSocialRedirectContext } from '../../context/SocialRedirectContext/SocialRedirectContext.js';
-import { getSocialIcon } from '../../utils/functions/getSocialIcon/getSocialIcon.js';
 
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const SocialRedirectView = () => {
     const { socialProvider, socialWalletConnector } = useSocialRedirectContext();
+    const getSocialIcon = useGetSocialIcon();
     const { termsOfServiceUrl, privacyPolicyUrl, isAuthenticated } = useInternalDynamicContext();
     if (!socialWalletConnector || !socialProvider) {
         return null;

package/src/lib/views/SocialWrongAccountView/SocialWrongAccountView.cjs

@@ -36,19 +36,20 @@ require('../../components/Alert/Alert.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var useGetSocialIcon = require('../../utils/hooks/useGetSocialIcon/useGetSocialIcon.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 var SocialRedirectContext = require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
-var getSocialIcon = require('../../utils/functions/getSocialIcon/getSocialIcon.cjs');
 
 const SocialWrongAccountView = () => {
     const [tryAgainClicked, setTryAgainClicked] = React.useState(false);
     const { socialWalletConnector, socialAccount } = SocialRedirectContext.useSocialRedirectContext();
+    const getSocialIcon = useGetSocialIcon.useGetSocialIcon();
     if (!socialAccount || !socialWalletConnector)
         return null;
-    return (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('social-wrong-account-view__container') }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: getSocialIcon.getSocialIcon(socialAccount.oauthProvider), isSpinning: tryAgainClicked, iconSize: 64 }), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', className: classNames.classNames('social-wrong-account-view__title') }, { children: "Whoops. Wrong Account" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', className: classNames.classNames('social-wrong-account-view__copy') }, { children: "You must connect with the same account you originally signed in with." })), jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', className: classNames.classNames('social-wrong-account-view__copy') }, { children: ["Please connect with: ", jsxRuntime.jsx("b", { children: socialAccount.oauthUsername })] })), jsxRuntime.jsx(Button.Button, Object.assign({ buttonClassName: 'social-wrong-account-view__button', buttonRounded: 'medium', buttonVariant: 'primary', buttonPadding: 'large', expanded: true, typographyProps: {
+    return (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('social-wrong-account-view__container') }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: getSocialIcon(socialAccount.oauthProvider), isSpinning: tryAgainClicked, iconSize: 64 }), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', className: classNames.classNames('social-wrong-account-view__title') }, { children: "Whoops. Wrong Account" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', className: classNames.classNames('social-wrong-account-view__copy') }, { children: "You must connect with the same account you originally signed in with." })), jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', className: classNames.classNames('social-wrong-account-view__copy') }, { children: ["Please connect with: ", jsxRuntime.jsx("b", { children: socialAccount.oauthUsername })] })), jsxRuntime.jsx(Button.Button, Object.assign({ buttonClassName: 'social-wrong-account-view__button', buttonRounded: 'medium', buttonVariant: 'primary', buttonPadding: 'large', expanded: true, typographyProps: {
                     variant: 'button_primary',
                     weight: 'medium',
                 }, disabled: tryAgainClicked, onClick: () => {

package/src/lib/views/SocialWrongAccountView/SocialWrongAccountView.js

@@ -32,16 +32,17 @@ import '../../components/Alert/Alert.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { useGetSocialIcon } from '../../utils/hooks/useGetSocialIcon/useGetSocialIcon.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import { useSocialRedirectContext } from '../../context/SocialRedirectContext/SocialRedirectContext.js';
-import { getSocialIcon } from '../../utils/functions/getSocialIcon/getSocialIcon.js';
 
 const SocialWrongAccountView = () => {
     const [tryAgainClicked, setTryAgainClicked] = useState(false);
     const { socialWalletConnector, socialAccount } = useSocialRedirectContext();
+    const getSocialIcon = useGetSocialIcon();
     if (!socialAccount || !socialWalletConnector)
         return null;
     return (jsxs("div", Object.assign({ className: classNames('social-wrong-account-view__container') }, { children: [jsx(IconWithSpinner, { Icon: getSocialIcon(socialAccount.oauthProvider), isSpinning: tryAgainClicked, iconSize: 64 }), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', className: classNames('social-wrong-account-view__title') }, { children: "Whoops. Wrong Account" })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', className: classNames('social-wrong-account-view__copy') }, { children: "You must connect with the same account you originally signed in with." })), jsxs(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', className: classNames('social-wrong-account-view__copy') }, { children: ["Please connect with: ", jsx("b", { children: socialAccount.oauthUsername })] })), jsx(Button, Object.assign({ buttonClassName: 'social-wrong-account-view__button', buttonRounded: 'medium', buttonVariant: 'primary', buttonPadding: 'large', expanded: true, typographyProps: {

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

@@ -1,22 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var iconic = require('@dynamic-labs/iconic');
-
-const socialIconMap = {
-    apple: iconic.AppleIcon,
-    bitbucket: iconic.BitbucketIcon,
-    discord: iconic.DiscordIcon,
-    facebook: iconic.FacebookIcon,
-    github: iconic.GithubIcon,
-    gitlab: iconic.GitlabIcon,
-    google: iconic.GoogleIcon,
-    linkedin: iconic.LinkedinIcon,
-    microsoft: iconic.MicrosoftIcon,
-    twitch: iconic.TwitchIcon,
-    twitter: iconic.TwitterIcon,
-};
-const getSocialIcon = (provider) => socialIconMap[provider];
-
-exports.getSocialIcon = getSocialIcon;

package/src/lib/utils/functions/getSocialIcon/getSocialIcon.d.ts

@@ -1,3 +0,0 @@
-import { Iconic } from '@dynamic-labs/iconic';
-import { SocialProvider } from '@dynamic-labs/wallet-connector-core';
-export declare const getSocialIcon: (provider: SocialProvider) => Iconic;

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

@@ -1,18 +0,0 @@
-import { AppleIcon, BitbucketIcon, DiscordIcon, FacebookIcon, GithubIcon, GitlabIcon, GoogleIcon, LinkedinIcon, MicrosoftIcon, TwitchIcon, TwitterIcon } from '@dynamic-labs/iconic';
-
-const socialIconMap = {
-    apple: AppleIcon,
-    bitbucket: BitbucketIcon,
-    discord: DiscordIcon,
-    facebook: FacebookIcon,
-    github: GithubIcon,
-    gitlab: GitlabIcon,
-    google: GoogleIcon,
-    linkedin: LinkedinIcon,
-    microsoft: MicrosoftIcon,
-    twitch: TwitchIcon,
-    twitter: TwitterIcon,
-};
-const getSocialIcon = (provider) => socialIconMap[provider];
-
-export { getSocialIcon };

package/src/lib/utils/functions/getSocialIcon/index.d.ts

@@ -1 +0,0 @@
-export * from './getSocialIcon';