@dynamic-labs/sdk-react-core 0.17.0-RC.20 → 0.17.0-RC.21

package/CHANGELOG.md

@@ -1,4 +1,11 @@
 
+## [0.17.0-RC.21](https://github.com/dynamic-labs/DynamicAuth/compare/v0.17.0-RC.20...v0.17.0-RC.21) (2023-06-02)
+
+
+### Bug Fixes
+
+* social icon is missing on some views ([#2211](https://github.com/dynamic-labs/DynamicAuth/issues/2211)) ([bddd255](https://github.com/dynamic-labs/DynamicAuth/commit/bddd255f0aa61aed4b767145c51624ac1eb9b963))
+
 ## [0.17.0-RC.20](https://github.com/dynamic-labs/DynamicAuth/compare/v0.17.0-RC.19...v0.17.0-RC.20) (2023-06-01)
 
 

package/package.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.17.0-RC.20";
+var version = "0.17.0-RC.21";
 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.20";
+var version = "0.17.0-RC.21";
 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.20",
+  "version": "0.17.0-RC.21",
   "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.20",
-    "@dynamic-labs/multi-wallet": "0.17.0-RC.20",
-    "@dynamic-labs/rpc-providers": "0.17.0-RC.20",
-    "@dynamic-labs/types": "0.17.0-RC.20",
-    "@dynamic-labs/utils": "0.17.0-RC.20",
-    "@dynamic-labs/wallet-connector-core": "0.17.0-RC.20"
+    "@dynamic-labs/logger": "0.17.0-RC.21",
+    "@dynamic-labs/multi-wallet": "0.17.0-RC.21",
+    "@dynamic-labs/rpc-providers": "0.17.0-RC.21",
+    "@dynamic-labs/types": "0.17.0-RC.21",
+    "@dynamic-labs/utils": "0.17.0-RC.21",
+    "@dynamic-labs/wallet-connector-core": "0.17.0-RC.21"
   },
   "devDependencies": {
     "semver": "7.3.8"

package/src/lib/Main.cjs

@@ -50,11 +50,12 @@ require('./main.global.cjs');
 const Main = () => {
     const { selectedWalletConnector, appName, connectedWallets, isProjectSettingsLoading, projectSettings, privacyPolicyUrl, setShowAuthFlow, showAuthFlow, termsOfServiceUrl, newToWeb3WalletChainMap, wallets, clearStatesOnBackClick, user, loginWithEmail, } = useInternalDynamicContext.useInternalDynamicContext();
     const { view, setView } = ViewContext.useViewContext();
-    const { setDeniedAddress } = AccessDeniedContext.useAccessDeniedContext();
+    const { setDeniedAddress, setDeniedOauthProvider } = AccessDeniedContext.useAccessDeniedContext();
     usePreventPageScroll.usePreventPageScroll(showAuthFlow);
     const handleClose = () => {
         setShowAuthFlow(false);
         setDeniedAddress('');
+        setDeniedOauthProvider(undefined);
         clearStatesOnBackClick();
     };
     const handleOnPortalUnmount = React.useCallback(

package/src/lib/Main.js

@@ -46,11 +46,12 @@ import './main.global.js';
 const Main = () => {
     const { selectedWalletConnector, appName, connectedWallets, isProjectSettingsLoading, projectSettings, privacyPolicyUrl, setShowAuthFlow, showAuthFlow, termsOfServiceUrl, newToWeb3WalletChainMap, wallets, clearStatesOnBackClick, user, loginWithEmail, } = useInternalDynamicContext();
     const { view, setView } = useViewContext();
-    const { setDeniedAddress } = useAccessDeniedContext();
+    const { setDeniedAddress, setDeniedOauthProvider } = useAccessDeniedContext();
     usePreventPageScroll(showAuthFlow);
     const handleClose = () => {
         setShowAuthFlow(false);
         setDeniedAddress('');
+        setDeniedOauthProvider(undefined);
         clearStatesOnBackClick();
     };
     const handleOnPortalUnmount = useCallback(

package/src/lib/components/WalletOrSocialMagicIcon/WalletOrSocialMagicIcon.cjs

@@ -19,18 +19,44 @@ var getReferencedAccount = require('../../utils/functions/getReferencedAccount/g
 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');
 
-const WalletOrSocialMagicIcon = ({ jwt, iconSize = 64, showInnerMagicIcon, }) => {
-    const { primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
+const WalletOrSocialMagicIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
+    const { primaryWallet, selectedWalletConnector } = useInternalDynamicContext.useInternalDynamicContext();
+    const { deniedOauthProvider, deniedAddress } = AccessDeniedContext.useAccessDeniedContext();
+    // 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);
+        return (jsxRuntime.jsx(MagicSocialWalletIcon, { style: {
+                height: pixelToRem.pixelToRem(iconSize),
+                width: pixelToRem.pixelToRem(iconSize),
+            } }));
+    }
+    // it means that user tried to login with actual wallet and no magic social and failed to go through the access list
+    if (deniedAddress) {
+        return (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name, style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
+    }
     if (!primaryWallet) {
         return null;
     }
-    if (walletConnectorCore.isSocialWalletConnector(primaryWallet.connector)) {
-        const socialAccountDataForWallet = getReferencedAccount.getReferencedAccount(jwt, primaryWallet.id);
+    const walletForIcon = wallet ? wallet : primaryWallet;
+    if (walletConnectorCore.isSocialWalletConnector(walletForIcon.connector)) {
+        const socialAccountDataForWallet = getReferencedAccount.getReferencedAccount(jwt, walletForIcon.id);
         const MagicSocialWalletIcon = getSocialIcon.getSocialIcon(socialAccountDataForWallet === null || socialAccountDataForWallet === void 0 ? void 0 : socialAccountDataForWallet.oauthProvider);
-        return showInnerMagicIcon ? (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { iconSize: iconSize, Icon: MagicSocialWalletIcon, primaryWalletName: primaryWallet.connector.name })) : (jsxRuntime.jsx(MagicSocialWalletIcon, { style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
+        // to show social icon with status dot
+        if (showStatus) {
+            return (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { iconSize: iconSize, Icon: MagicSocialWalletIcon, variant: walletForIcon.connected ? 'green' : 'red' }));
+        }
+        // to show social icon
+        return (jsxRuntime.jsx(MagicSocialWalletIcon, { style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
+    }
+    // to show wallet icon with status dot
+    if (showStatus) {
+        return (jsxRuntime.jsx(WalletIconWithStatus.WalletIconWithStatus, { iconSize: iconSize, walletName: walletForIcon.connector.name, connected: walletForIcon.connected, variant: 'secondary' }));
     }
-    return (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: primaryWallet.connector.name, style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
+    // to show wallet icon without status dot
+    return (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletForIcon.connector.name, style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
 };
 
 exports.WalletOrSocialMagicIcon = WalletOrSocialMagicIcon;

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

@@ -1,8 +1,10 @@
 import { FC } from 'react';
+import { Wallet } from '../../shared';
 type Props = {
     iconSize?: number;
     jwt: string | undefined;
-    showInnerMagicIcon?: boolean;
+    wallet?: Wallet | null;
+    showStatus?: boolean;
 };
 export declare const WalletOrSocialMagicIcon: FC<Props>;
 export {};

package/src/lib/components/WalletOrSocialMagicIcon/WalletOrSocialMagicIcon.js

@@ -15,18 +15,44 @@ import { getReferencedAccount } from '../../utils/functions/getReferencedAccount
 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';
 
-const WalletOrSocialMagicIcon = ({ jwt, iconSize = 64, showInnerMagicIcon, }) => {
-    const { primaryWallet } = useInternalDynamicContext();
+const WalletOrSocialMagicIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
+    const { primaryWallet, selectedWalletConnector } = useInternalDynamicContext();
+    const { deniedOauthProvider, deniedAddress } = useAccessDeniedContext();
+    // 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);
+        return (jsx(MagicSocialWalletIcon, { style: {
+                height: pixelToRem(iconSize),
+                width: pixelToRem(iconSize),
+            } }));
+    }
+    // it means that user tried to login with actual wallet and no magic social and failed to go through the access list
+    if (deniedAddress) {
+        return (jsx(WalletIcon, { walletName: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name, style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
+    }
     if (!primaryWallet) {
         return null;
     }
-    if (isSocialWalletConnector(primaryWallet.connector)) {
-        const socialAccountDataForWallet = getReferencedAccount(jwt, primaryWallet.id);
+    const walletForIcon = wallet ? wallet : primaryWallet;
+    if (isSocialWalletConnector(walletForIcon.connector)) {
+        const socialAccountDataForWallet = getReferencedAccount(jwt, walletForIcon.id);
         const MagicSocialWalletIcon = getSocialIcon(socialAccountDataForWallet === null || socialAccountDataForWallet === void 0 ? void 0 : socialAccountDataForWallet.oauthProvider);
-        return showInnerMagicIcon ? (jsx(IconWithStatus, { iconSize: iconSize, Icon: MagicSocialWalletIcon, primaryWalletName: primaryWallet.connector.name })) : (jsx(MagicSocialWalletIcon, { style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
+        // to show social icon with status dot
+        if (showStatus) {
+            return (jsx(IconWithStatus, { iconSize: iconSize, Icon: MagicSocialWalletIcon, variant: walletForIcon.connected ? 'green' : 'red' }));
+        }
+        // to show social icon
+        return (jsx(MagicSocialWalletIcon, { style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
+    }
+    // to show wallet icon with status dot
+    if (showStatus) {
+        return (jsx(WalletIconWithStatus, { iconSize: iconSize, walletName: walletForIcon.connector.name, connected: walletForIcon.connected, variant: 'secondary' }));
     }
-    return (jsx(WalletIcon, { walletName: primaryWallet.connector.name, style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
+    // to show wallet icon without status dot
+    return (jsx(WalletIcon, { walletName: walletForIcon.connector.name, style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
 };
 
 export { WalletOrSocialMagicIcon };

package/src/lib/context/AccessDeniedContext/AccessDeniedContext.cjs

@@ -8,7 +8,13 @@ var React = require('react');
 const AccessDeniedContext = React.createContext(undefined);
 const AccessDeniedContextProvider = ({ children, }) => {
     const [deniedAddress, setDeniedAddress] = React.useState('');
-    const value = React.useMemo(() => ({ deniedAddress, setDeniedAddress }), [deniedAddress]);
+    const [deniedOauthProvider, setDeniedOauthProvider] = React.useState(undefined);
+    const value = React.useMemo(() => ({
+        deniedAddress,
+        deniedOauthProvider,
+        setDeniedAddress,
+        setDeniedOauthProvider,
+    }), [deniedAddress, deniedOauthProvider]);
     return (jsxRuntime.jsx(AccessDeniedContext.Provider, Object.assign({ value: value }, { children: children })));
 };
 const useAccessDeniedContext = () => {

package/src/lib/context/AccessDeniedContext/AccessDeniedContext.d.ts

@@ -1,7 +1,10 @@
 import { ReactNode } from 'react';
+import { ProviderEnum } from '@dynamic-labs/sdk-api';
 export type AccessDeniedContextType = {
     deniedAddress: string;
     setDeniedAddress(address: string): void;
+    setDeniedOauthProvider(deniedOauthProvider: ProviderEnum | undefined): void;
+    deniedOauthProvider: ProviderEnum | undefined;
 };
 export declare const AccessDeniedContext: import("react").Context<AccessDeniedContextType | undefined>;
 export declare const AccessDeniedContextProvider: ({ children, }: {

package/src/lib/context/AccessDeniedContext/AccessDeniedContext.js

@@ -4,7 +4,13 @@ import { createContext, useState, useMemo, useContext } from 'react';
 const AccessDeniedContext = createContext(undefined);
 const AccessDeniedContextProvider = ({ children, }) => {
     const [deniedAddress, setDeniedAddress] = useState('');
-    const value = useMemo(() => ({ deniedAddress, setDeniedAddress }), [deniedAddress]);
+    const [deniedOauthProvider, setDeniedOauthProvider] = useState(undefined);
+    const value = useMemo(() => ({
+        deniedAddress,
+        deniedOauthProvider,
+        setDeniedAddress,
+        setDeniedOauthProvider,
+    }), [deniedAddress, deniedOauthProvider]);
     return (jsx(AccessDeniedContext.Provider, Object.assign({ value: value }, { children: children })));
 };
 const useAccessDeniedContext = () => {