@dynamic-labs/sdk-react-core 0.19.0-alpha.7 → 0.19.0-alpha.8

package/CHANGELOG.md

@@ -1,4 +1,28 @@
 
+## [0.19.0-alpha.8](https://github.com/dynamic-labs/DynamicAuth/compare/v0.19.0-alpha.7...v0.19.0-alpha.8) (2023-09-11)
+
+
+### Features
+
+* add onSignedMessage callback ([#3118](https://github.com/dynamic-labs/DynamicAuth/issues/3118)) ([acc36f6](https://github.com/dynamic-labs/DynamicAuth/commit/acc36f6cf584eb05a019027475a6e2e413fd6bd5))
+* add social sign-in without embedded wallet ([#3172](https://github.com/dynamic-labs/DynamicAuth/issues/3172)) ([ff1acc6](https://github.com/dynamic-labs/DynamicAuth/commit/ff1acc6d9753ba745ac01c5ef6d26f2e4291b752))
+* show default wallet icon when image breaks ([#3234](https://github.com/dynamic-labs/DynamicAuth/issues/3234)) ([657e6bb](https://github.com/dynamic-labs/DynamicAuth/commit/657e6bbc1cdcd840562d25194a827ea833237c1a))
+
+
+### Bug Fixes
+
+* catch error sending sdkSettings and log warning ([#3274](https://github.com/dynamic-labs/DynamicAuth/issues/3274)) ([fcbe01b](https://github.com/dynamic-labs/DynamicAuth/commit/fcbe01bc733a73f38aebd6ffb0969b040dd2f781))
+* detect if oauth popup is blocked and throw error ([#3250](https://github.com/dynamic-labs/DynamicAuth/issues/3250)) ([b87ddf3](https://github.com/dynamic-labs/DynamicAuth/commit/b87ddf399104e29c56566abbbecab6ff947992d6))
+* display error message to user if social account already exits ([#3258](https://github.com/dynamic-labs/DynamicAuth/issues/3258)) ([bb52cb4](https://github.com/dynamic-labs/DynamicAuth/commit/bb52cb4ae42d89310d435584ed4ece126f9b6a4a))
+* don't call callbacks if window closed due to oauth process complete ([#3252](https://github.com/dynamic-labs/DynamicAuth/issues/3252)) ([09a3c73](https://github.com/dynamic-labs/DynamicAuth/commit/09a3c73446aa337f24e0875cd4a0af617ea8ca84))
+* issue where unexpected token would occur when bundlers defined process.env ([#3283](https://github.com/dynamic-labs/DynamicAuth/issues/3283)) ([d31d0a4](https://github.com/dynamic-labs/DynamicAuth/commit/d31d0a4011256f59cb3760acdc2c3dfe6c5b504a))
+* login view layout updates ([#3231](https://github.com/dynamic-labs/DynamicAuth/issues/3231)) ([7762d06](https://github.com/dynamic-labs/DynamicAuth/commit/7762d067bdd4b3f313a15308262f18dac0b961ab))
+* **MagicWalletConnector:** remove async from getWeb3Provider method ([#3230](https://github.com/dynamic-labs/DynamicAuth/issues/3230)) ([69356e9](https://github.com/dynamic-labs/DynamicAuth/commit/69356e9b0bd1800acdf24fc96c72b094b595eaa7))
+* remove react component props from sending to sdk api ([#3282](https://github.com/dynamic-labs/DynamicAuth/issues/3282)) ([b0d8f2b](https://github.com/dynamic-labs/DynamicAuth/commit/b0d8f2b9dd0856a5a7bd862f6c3499b65ec29f64))
+* seprate ls checks for dynamiccontext and wagmi settings ([#3275](https://github.com/dynamic-labs/DynamicAuth/issues/3275)) ([aa4e756](https://github.com/dynamic-labs/DynamicAuth/commit/aa4e756a10310ce216b5942d0d6845f7092a89a2))
+* use context to handle social sign-in and display message while processing ([#3216](https://github.com/dynamic-labs/DynamicAuth/issues/3216)) ([0e3ce73](https://github.com/dynamic-labs/DynamicAuth/commit/0e3ce73eafbb8d5725377c9a8cbd86a82d6c525f))
+* **wallet-connect-v2:** use appropriate default chain id with WC v2 ([#3218](https://github.com/dynamic-labs/DynamicAuth/issues/3218)) ([2e6e7be](https://github.com/dynamic-labs/DynamicAuth/commit/2e6e7beb801ea5a8dc7429970bcd1e705610d605))
+
 ## [0.19.0-alpha.7](https://github.com/dynamic-labs/DynamicAuth/compare/v0.19.0-alpha.6...v0.19.0-alpha.7) (2023-08-31)
 
 

package/package.cjs

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.19.0-alpha.7";
+var version = "0.19.0-alpha.8";
 var dependencies = {
-	"@dynamic-labs/iconic": "0.1.27",
-	"@dynamic-labs/sdk-api": "0.0.270",
+	"@dynamic-labs/iconic": "0.1.30",
+	"@dynamic-labs/sdk-api": "0.0.272",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",
 	ethers: "5.7.2",

package/package.js

@@ -1,7 +1,7 @@
-var version = "0.19.0-alpha.7";
+var version = "0.19.0-alpha.8";
 var dependencies = {
-	"@dynamic-labs/iconic": "0.1.27",
-	"@dynamic-labs/sdk-api": "0.0.270",
+	"@dynamic-labs/iconic": "0.1.30",
+	"@dynamic-labs/sdk-api": "0.0.272",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",
 	ethers: "5.7.2",

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "0.19.0-alpha.7",
+  "version": "0.19.0-alpha.8",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
     "directory": "packages/sdk-react-core"
   },
   "dependencies": {
-    "@dynamic-labs/iconic": "0.1.27",
-    "@dynamic-labs/sdk-api": "0.0.270",
+    "@dynamic-labs/iconic": "0.1.30",
+    "@dynamic-labs/sdk-api": "0.0.272",
     "@hcaptcha/react-hcaptcha": "1.4.4",
     "country-list": "2.3.0",
     "ethers": "5.7.2",
@@ -18,13 +18,13 @@
     "react-focus-lock": "2.9.2",
     "react-i18next": "^13.2.0",
     "yup": "0.32.11",
-    "@dynamic-labs/logger": "0.19.0-alpha.7",
-    "@dynamic-labs/multi-wallet": "0.19.0-alpha.7",
-    "@dynamic-labs/rpc-providers": "0.19.0-alpha.7",
-    "@dynamic-labs/types": "0.19.0-alpha.7",
-    "@dynamic-labs/utils": "0.19.0-alpha.7",
-    "@dynamic-labs/wallet-book": "0.19.0-alpha.7",
-    "@dynamic-labs/wallet-connector-core": "0.19.0-alpha.7",
+    "@dynamic-labs/logger": "0.19.0-alpha.8",
+    "@dynamic-labs/multi-wallet": "0.19.0-alpha.8",
+    "@dynamic-labs/rpc-providers": "0.19.0-alpha.8",
+    "@dynamic-labs/types": "0.19.0-alpha.8",
+    "@dynamic-labs/utils": "0.19.0-alpha.8",
+    "@dynamic-labs/wallet-book": "0.19.0-alpha.8",
+    "@dynamic-labs/wallet-connector-core": "0.19.0-alpha.8",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/index.d.ts

@@ -14,7 +14,7 @@ export * from './lib/views';
 export * from './lib/context/MockContext';
 export * from './lib/context/ThemeContext/themesData';
 export type { ViewType } from './lib/context/ViewContext';
-export type { NotSupportedError, NoAccessError, ChainalysisError, EmailAlreadyExistsError, UsernameAlreadyExistsError, WalletNotDeployedError, WalletUsedError, EmailVerificationError, AccountExistsError, } from '@dynamic-labs/utils';
+export type { NotSupportedError, NoAccessError, ChainalysisError, EmailAlreadyExistsError, UsernameAlreadyExistsError, SocialAccountAlreadyExistsError, WalletNotDeployedError, WalletUsedError, EmailVerificationError, AccountExistsError, } from '@dynamic-labs/utils';
 export type { WalletConnector, Chain, } from '@dynamic-labs/wallet-connector-core';
 export type { EvmNetwork } from '@dynamic-labs/types';
 export { normalizeWalletName } from '@dynamic-labs/wallet-connector-core';

package/src/lib/Main.cjs

@@ -63,6 +63,7 @@ require('./main.global.cjs');
 
 const viewsToDisableCloseOnOverlayClick = [
     'email-wallet-otp-verification-view',
+    'social-redirect-view',
 ];
 const Main = () => {
     const { selectedWalletConnector, linkedWallets, isProjectSettingsLoading, projectSettings, setShowAuthFlow, showAuthFlow, wallets, clearStatesOnBackClick, user, unlinkConnectedWallet, authMode, connectedWallets, } = useInternalDynamicContext.useInternalDynamicContext();

package/src/lib/Main.js

@@ -59,6 +59,7 @@ import './main.global.js';
 
 const viewsToDisableCloseOnOverlayClick = [
     'email-wallet-otp-verification-view',
+    'social-redirect-view',
 ];
 const Main = () => {
     const { selectedWalletConnector, linkedWallets, isProjectSettingsLoading, projectSettings, setShowAuthFlow, showAuthFlow, wallets, clearStatesOnBackClick, user, unlinkConnectedWallet, authMode, connectedWallets, } = useInternalDynamicContext();

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

@@ -90,7 +90,7 @@ const AuthProviderIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
     }
     // 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) } }));
+        return (jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.key, style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
     }
     const walletForIcon = wallet ? wallet : primaryWallet;
     if (!walletForIcon) {
@@ -104,7 +104,7 @@ const AuthProviderIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
     if (MagicEmailOrSocialIcon) {
         return showStatus ? (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { iconSize: iconSize, Icon: MagicEmailOrSocialIcon, variant: walletForIcon.connected ? 'green' : 'red' })) : (jsxRuntime.jsx(MagicEmailOrSocialIcon, { style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
     }
-    return showStatus ? (jsxRuntime.jsx(WalletIconWithStatus.WalletIconWithStatus, { iconSize: iconSize, walletName: walletForIcon.connector.name, connected: walletForIcon.connected, variant: 'secondary' })) : (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletForIcon.connector.name, style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
+    return showStatus ? (jsxRuntime.jsx(WalletIconWithStatus.WalletIconWithStatus, { iconSize: iconSize, walletKey: walletForIcon.connector.key, connected: walletForIcon.connected, variant: 'secondary' })) : (jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletForIcon.connector.key, style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
 };
 
 exports.AuthProviderIcon = AuthProviderIcon;

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

@@ -86,7 +86,7 @@ const AuthProviderIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
     }
     // 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) } }));
+        return (jsx(WalletIcon, { walletKey: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.key, style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
     }
     const walletForIcon = wallet ? wallet : primaryWallet;
     if (!walletForIcon) {
@@ -100,7 +100,7 @@ const AuthProviderIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
     if (MagicEmailOrSocialIcon) {
         return showStatus ? (jsx(IconWithStatus, { iconSize: iconSize, Icon: MagicEmailOrSocialIcon, variant: walletForIcon.connected ? 'green' : 'red' })) : (jsx(MagicEmailOrSocialIcon, { style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
     }
-    return showStatus ? (jsx(WalletIconWithStatus, { iconSize: iconSize, walletName: walletForIcon.connector.name, connected: walletForIcon.connected, variant: 'secondary' })) : (jsx(WalletIcon, { walletName: walletForIcon.connector.name, style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
+    return showStatus ? (jsx(WalletIconWithStatus, { iconSize: iconSize, walletKey: walletForIcon.connector.key, connected: walletForIcon.connected, variant: 'secondary' })) : (jsx(WalletIcon, { walletKey: walletForIcon.connector.key, style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
 };
 
 export { AuthProviderIcon };

package/src/lib/components/IconWithStatus/IconWithStatus.cjs

@@ -21,15 +21,15 @@ var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var StatusDot = require('../StatusDot/StatusDot.cjs');
 var Icon = require('../Icon/Icon.cjs');
 
-const IconWithStatus = ({ Icon: Icon$1, InnerIcon, primaryWalletName, containerClassName, iconSize = 16, variant = 'green', }) => {
-    const Inner = primaryWalletName ? (jsxRuntime.jsx("div", Object.assign({ className: 'inner-icon__container' }, { children: jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('inner-icon') }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'medium' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: primaryWalletName }) })) })) }))) : (jsxRuntime.jsx("div", Object.assign({ className: 'inner-icon__container' }, { children: jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('inner-icon', `inner-icon--${variant}`) }, { children: InnerIcon && jsxRuntime.jsx(InnerIcon, {}) })) })));
+const IconWithStatus = ({ Icon: Icon$1, InnerIcon, primaryWalletKey, containerClassName, iconSize = 16, variant = 'green', }) => {
+    const Inner = primaryWalletKey ? (jsxRuntime.jsx("div", Object.assign({ className: 'inner-icon__container' }, { children: jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('inner-icon') }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'medium' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: primaryWalletKey }) })) })) }))) : (jsxRuntime.jsx("div", Object.assign({ className: 'inner-icon__container' }, { children: jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('inner-icon', `inner-icon--${variant}`) }, { children: InnerIcon && jsxRuntime.jsx(InnerIcon, {}) })) })));
     return (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('icon-with-status__container', containerClassName || '') }, { children: [typeof Icon$1 === 'string' ? (jsxRuntime.jsx("img", { style: {
                     height: pixelToRem.pixelToRem(iconSize),
                     width: pixelToRem.pixelToRem(iconSize),
                 }, src: Icon$1, alt: '', className: 'icon' })) : (jsxRuntime.jsx(Icon$1, { style: {
                     height: pixelToRem.pixelToRem(iconSize),
                     width: pixelToRem.pixelToRem(iconSize),
-                } })), InnerIcon || primaryWalletName ? (Inner) : (jsxRuntime.jsx(StatusDot.StatusDot, { variant: variant, containerClassName: 'icon-with-status__status-dot' }))] })));
+                } })), InnerIcon || primaryWalletKey ? (Inner) : (jsxRuntime.jsx(StatusDot.StatusDot, { variant: variant, containerClassName: 'icon-with-status__status-dot' }))] })));
 };
 
 exports.IconWithStatus = IconWithStatus;

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

@@ -5,8 +5,8 @@ type Props = {
     InnerIcon?: Icon;
     containerClassName?: string;
     iconSize?: number;
-    primaryWalletName?: string;
+    primaryWalletKey?: string;
     variant?: 'green' | 'red';
 };
-export declare const IconWithStatus: ({ Icon, InnerIcon, primaryWalletName, containerClassName, iconSize, variant, }: Props) => JSX.Element;
+export declare const IconWithStatus: ({ Icon, InnerIcon, primaryWalletKey, containerClassName, iconSize, variant, }: Props) => JSX.Element;
 export {};

package/src/lib/components/IconWithStatus/IconWithStatus.js

@@ -17,15 +17,15 @@ import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { StatusDot } from '../StatusDot/StatusDot.js';
 import { Icon } from '../Icon/Icon.js';
 
-const IconWithStatus = ({ Icon: Icon$1, InnerIcon, primaryWalletName, containerClassName, iconSize = 16, variant = 'green', }) => {
-    const Inner = primaryWalletName ? (jsx("div", Object.assign({ className: 'inner-icon__container' }, { children: jsx("div", Object.assign({ className: classNames('inner-icon') }, { children: jsx(Icon, Object.assign({ size: 'medium' }, { children: jsx(WalletIcon, { walletName: primaryWalletName }) })) })) }))) : (jsx("div", Object.assign({ className: 'inner-icon__container' }, { children: jsx("div", Object.assign({ className: classNames('inner-icon', `inner-icon--${variant}`) }, { children: InnerIcon && jsx(InnerIcon, {}) })) })));
+const IconWithStatus = ({ Icon: Icon$1, InnerIcon, primaryWalletKey, containerClassName, iconSize = 16, variant = 'green', }) => {
+    const Inner = primaryWalletKey ? (jsx("div", Object.assign({ className: 'inner-icon__container' }, { children: jsx("div", Object.assign({ className: classNames('inner-icon') }, { children: jsx(Icon, Object.assign({ size: 'medium' }, { children: jsx(WalletIcon, { walletKey: primaryWalletKey }) })) })) }))) : (jsx("div", Object.assign({ className: 'inner-icon__container' }, { children: jsx("div", Object.assign({ className: classNames('inner-icon', `inner-icon--${variant}`) }, { children: InnerIcon && jsx(InnerIcon, {}) })) })));
     return (jsxs("div", Object.assign({ className: classNames('icon-with-status__container', containerClassName || '') }, { children: [typeof Icon$1 === 'string' ? (jsx("img", { style: {
                     height: pixelToRem(iconSize),
                     width: pixelToRem(iconSize),
                 }, src: Icon$1, alt: '', className: 'icon' })) : (jsx(Icon$1, { style: {
                     height: pixelToRem(iconSize),
                     width: pixelToRem(iconSize),
-                } })), InnerIcon || primaryWalletName ? (Inner) : (jsx(StatusDot, { variant: variant, containerClassName: 'icon-with-status__status-dot' }))] })));
+                } })), InnerIcon || primaryWalletKey ? (Inner) : (jsx(StatusDot, { variant: variant, containerClassName: 'icon-with-status__status-dot' }))] })));
 };
 
 export { IconWithStatus };

package/src/lib/components/MockedQrCode/MockedQrCode.cjs

@@ -14,7 +14,7 @@ const MockedQrCode = () => {
     if (!mockedSDK)
         return null;
     const accentColor = theme.theme.name === 'dark' ? '#FFF' : '#1648F9';
-    return (jsxRuntime.jsx(QRCode.QRCode, { Icon: jsxRuntime.jsx(iconic.CoinbaseIcon, {}), logoSize: 50, accentColor: accentColor, value: 'hello world!'.repeat(20), walletName: 'Coinbase' }));
+    return (jsxRuntime.jsx(QRCode.QRCode, { Icon: jsxRuntime.jsx(iconic.CoinbaseIcon, {}), logoSize: 50, accentColor: accentColor, value: 'hello world!'.repeat(20), walletKey: 'coinbase' }));
 };
 
 exports.MockedQrCode = MockedQrCode;

package/src/lib/components/MockedQrCode/MockedQrCode.js

@@ -10,7 +10,7 @@ const MockedQrCode = () => {
     if (!mockedSDK)
         return null;
     const accentColor = theme.theme.name === 'dark' ? '#FFF' : '#1648F9';
-    return (jsx(QRCode, { Icon: jsx(CoinbaseIcon, {}), logoSize: 50, accentColor: accentColor, value: 'hello world!'.repeat(20), walletName: 'Coinbase' }));
+    return (jsx(QRCode, { Icon: jsx(CoinbaseIcon, {}), logoSize: 50, accentColor: accentColor, value: 'hello world!'.repeat(20), walletKey: 'coinbase' }));
 };
 
 export { MockedQrCode };

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

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

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

@@ -14,6 +14,6 @@ export type SendBalancePageLayoutProps = {
     onClickClose?: MouseEventHandler<HTMLButtonElement>;
     onSubmit: (formValues: SendBalanceFormValues) => void;
     walletAddress: string;
-    walletName: string;
+    walletKey: string;
 };
 export declare const SendBalancePageLayout: FC<SendBalancePageLayoutProps>;

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

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

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

@@ -29,6 +29,7 @@ require('react-dom');
 var Typography = require('../Typography/Typography.cjs');
 require('../ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var Icon = require('../Icon/Icon.cjs');
 require('react-focus-lock');
 require('../Transition/ZoomTransition/ZoomTransition.cjs');
@@ -58,29 +59,40 @@ require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs'
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 
 const MAX_INLINE_ITEMS = 5;
-const SocialSignIn = ({ providers, onClick, isLoading, setSelectedProvider, selectedProvider, testId, }) => {
+const SocialSignIn = ({ providers, onSelectProvider, isLoading, selectedProvider, testId, defaultProvider, numOfItemsToDisplay = 5, }) => {
     const iconThemeVariant = useIconThemeVariant.useIconThemeVariant();
     const [showCard, setShowCard] = React.useState(false);
     const closeCard = () => !isLoading && setShowCard(false);
     const numberOfEnabledSocialProviders = providers.length;
-    const showConnectText = numberOfEnabledSocialProviders === 1;
-    const showCardButton = numberOfEnabledSocialProviders > MAX_INLINE_ITEMS;
-    const socialProvidersToDisplayInline = showCardButton
-        ? providers.slice(0, 4)
-        : providers.slice(0, 5);
-    const numberOfSocialGridItems = numberOfEnabledSocialProviders + (showCardButton ? 1 : 0);
-    const onSelectProvider = (provider) => {
-        onClick(provider);
-        setSelectedProvider(provider);
-    };
+    if (numberOfEnabledSocialProviders === 1) {
+        // set first and only item in providers list as default provider
+        [defaultProvider] = providers;
+    }
+    else {
+        // put default provider at the beggini of the list
+        providers.sort((p1, p2) => (p1 === defaultProvider ? -1 : 0));
+    }
+    const defaultProviderOffset = defaultProvider ? 1 : 0;
+    // display number of items set in prop, with a max limit of MAX_INLINE_ITEMS
+    const numOfInlineItems = Math.min(numOfItemsToDisplay, MAX_INLINE_ITEMS);
+    // show card button if there are more providers than numOfInlineItems items, not counting the default provider
+    const showCardButton = numberOfEnabledSocialProviders - defaultProviderOffset > numOfInlineItems;
+    const cardButtonOffset = showCardButton ? 1 : 0;
+    // get providers to display inline
+    const socialProvidersToDisplayInline = providers.slice(defaultProviderOffset, defaultProviderOffset + numOfInlineItems - cardButtonOffset);
+    const numberOfSocialGridItems = numberOfEnabledSocialProviders + cardButtonOffset;
     const getProviderAsString = (provider) => provider;
     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, {}) })));
-    const renderProviderItem = (provider, insideCard = false) => (jsxRuntime.jsxs(IconListTile.IconListTile, Object.assign({ dataTestId: insideCard ? `card-${provider}` : `inline-${provider}`, onClick: () => onSelectProvider(provider), disabled: Boolean(selectedProvider), className: insideCard ? 'social-sign-in--card--tile' : 'social-sign-in--tile' }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: 
+    const renderProviderItem = (provider, fullWidth = false, insideCard = false) => (jsxRuntime.jsxs(IconListTile.IconListTile, Object.assign({ dataTestId: insideCard ? `card-${provider}` : `inline-${provider}`, onClick: () => onSelectProvider(provider), disabled: Boolean(selectedProvider), className: classNames.classNames({
+            'social-sign-in--card--tile': insideCard,
+            'social-sign-in--tile': !insideCard,
+            'social-sign-in--tile__full-width': fullWidth,
+        }) }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: 
                 // eslint-disable-next-line react/jsx-wrap-multilines
-                jsxRuntime.jsx(iconic.SocialIcon, { name: getProviderAsString(provider), variant: iconThemeVariant }), isSpinning: selectedProvider === provider, iconSize: 32 }), !insideCard && showConnectText && (jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with ", capitalize.capitalize(getProviderAsString(provider))] })))] }), getProviderAsString(provider)));
+                jsxRuntime.jsx(iconic.SocialIcon, { name: getProviderAsString(provider), variant: iconThemeVariant }), isSpinning: selectedProvider === provider, iconSize: 32 }), !insideCard && fullWidth && (jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with ", capitalize.capitalize(getProviderAsString(provider))] })))] }), getProviderAsString(provider)));
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'social-sign-in', style: {
                     '--number-of-social-grid-items': numberOfSocialGridItems,
-                }, "data-testid": testId }, { children: [socialProvidersToDisplayInline.map((provider) => renderProviderItem(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: providers.map((provider) => renderProviderItem(provider, true)) }))] })) }))] }));
+                }, "data-testid": testId }, { children: [defaultProvider && renderProviderItem(defaultProvider, true), socialProvidersToDisplayInline.map((provider) => renderProviderItem(provider, socialProvidersToDisplayInline.length < 2)), showCardButton && (jsxRuntime.jsx(IconListTile.IconListTile, Object.assign({ dataTestId: 'show-more-options', onClick: () => setShowCard(true), className: 'social-sign-in--tile' }, { 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: providers.map((provider) => renderProviderItem(provider, false, true)) }))] })) }))] }));
 };
 
 exports.SocialSignIn = SocialSignIn;

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

@@ -1,11 +1,12 @@
 /// <reference types="react" />
-type Props<T> = {
-    providers: T[];
-    onClick: (provider: T) => void;
+import { SocialSignInProviderEnum } from '@dynamic-labs/sdk-api';
+import { SocialSectionProps } from '../../views/LoginView/sections';
+interface Props extends SocialSectionProps {
+    providers: SocialSignInProviderEnum[];
+    onSelectProvider: (provider: SocialSignInProviderEnum) => void;
     isLoading?: boolean;
-    setSelectedProvider: (provider: T) => void;
-    selectedProvider?: T;
+    selectedProvider?: SocialSignInProviderEnum;
     testId?: string;
-};
-export declare const SocialSignIn: <T = number | typeof Symbol.iterator | "toString" | "charAt" | "charCodeAt" | "concat" | "indexOf" | "lastIndexOf" | "localeCompare" | "match" | "replace" | "search" | "slice" | "split" | "substring" | "toLowerCase" | "toLocaleLowerCase" | "toUpperCase" | "toLocaleUpperCase" | "trim" | "length" | "substr" | "valueOf" | "codePointAt" | "includes" | "endsWith" | "normalize" | "repeat" | "startsWith" | "anchor" | "big" | "blink" | "bold" | "fixed" | "fontcolor" | "fontsize" | "italics" | "link" | "small" | "strike" | "sub" | "sup" | "padStart" | "padEnd" | "trimEnd" | "trimStart" | "trimLeft" | "trimRight" | "matchAll" | "at">({ providers, onClick, isLoading, setSelectedProvider, selectedProvider, testId, }: Props<T>) => JSX.Element;
+}
+export declare const SocialSignIn: ({ providers, onSelectProvider, isLoading, selectedProvider, testId, defaultProvider, numOfItemsToDisplay, }: Props) => JSX.Element;
 export {};

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

@@ -25,6 +25,7 @@ import 'react-dom';
 import { Typography } from '../Typography/Typography.js';
 import '../ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { Icon } from '../Icon/Icon.js';
 import 'react-focus-lock';
 import '../Transition/ZoomTransition/ZoomTransition.js';
@@ -54,29 +55,40 @@ import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 
 const MAX_INLINE_ITEMS = 5;
-const SocialSignIn = ({ providers, onClick, isLoading, setSelectedProvider, selectedProvider, testId, }) => {
+const SocialSignIn = ({ providers, onSelectProvider, isLoading, selectedProvider, testId, defaultProvider, numOfItemsToDisplay = 5, }) => {
     const iconThemeVariant = useIconThemeVariant();
     const [showCard, setShowCard] = useState(false);
     const closeCard = () => !isLoading && setShowCard(false);
     const numberOfEnabledSocialProviders = providers.length;
-    const showConnectText = numberOfEnabledSocialProviders === 1;
-    const showCardButton = numberOfEnabledSocialProviders > MAX_INLINE_ITEMS;
-    const socialProvidersToDisplayInline = showCardButton
-        ? providers.slice(0, 4)
-        : providers.slice(0, 5);
-    const numberOfSocialGridItems = numberOfEnabledSocialProviders + (showCardButton ? 1 : 0);
-    const onSelectProvider = (provider) => {
-        onClick(provider);
-        setSelectedProvider(provider);
-    };
+    if (numberOfEnabledSocialProviders === 1) {
+        // set first and only item in providers list as default provider
+        [defaultProvider] = providers;
+    }
+    else {
+        // put default provider at the beggini of the list
+        providers.sort((p1, p2) => (p1 === defaultProvider ? -1 : 0));
+    }
+    const defaultProviderOffset = defaultProvider ? 1 : 0;
+    // display number of items set in prop, with a max limit of MAX_INLINE_ITEMS
+    const numOfInlineItems = Math.min(numOfItemsToDisplay, MAX_INLINE_ITEMS);
+    // show card button if there are more providers than numOfInlineItems items, not counting the default provider
+    const showCardButton = numberOfEnabledSocialProviders - defaultProviderOffset > numOfInlineItems;
+    const cardButtonOffset = showCardButton ? 1 : 0;
+    // get providers to display inline
+    const socialProvidersToDisplayInline = providers.slice(defaultProviderOffset, defaultProviderOffset + numOfInlineItems - cardButtonOffset);
+    const numberOfSocialGridItems = numberOfEnabledSocialProviders + cardButtonOffset;
     const getProviderAsString = (provider) => provider;
     const closeButton = (jsx(IconButton, Object.assign({ onClick: closeCard, type: 'button', id: 'close-button', disabled: isLoading, "data-testid": 'close-button' }, { children: jsx(SvgClose, {}) })));
-    const renderProviderItem = (provider, insideCard = false) => (jsxs(IconListTile, Object.assign({ dataTestId: insideCard ? `card-${provider}` : `inline-${provider}`, onClick: () => onSelectProvider(provider), disabled: Boolean(selectedProvider), className: insideCard ? 'social-sign-in--card--tile' : 'social-sign-in--tile' }, { children: [jsx(IconWithSpinner, { Icon: 
+    const renderProviderItem = (provider, fullWidth = false, insideCard = false) => (jsxs(IconListTile, Object.assign({ dataTestId: insideCard ? `card-${provider}` : `inline-${provider}`, onClick: () => onSelectProvider(provider), disabled: Boolean(selectedProvider), className: classNames({
+            'social-sign-in--card--tile': insideCard,
+            'social-sign-in--tile': !insideCard,
+            'social-sign-in--tile__full-width': fullWidth,
+        }) }, { children: [jsx(IconWithSpinner, { Icon: 
                 // eslint-disable-next-line react/jsx-wrap-multilines
-                jsx(SocialIcon, { name: getProviderAsString(provider), variant: iconThemeVariant }), isSpinning: selectedProvider === provider, iconSize: 32 }), !insideCard && showConnectText && (jsxs(Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with ", capitalize(getProviderAsString(provider))] })))] }), getProviderAsString(provider)));
+                jsx(SocialIcon, { name: getProviderAsString(provider), variant: iconThemeVariant }), isSpinning: selectedProvider === provider, iconSize: 32 }), !insideCard && fullWidth && (jsxs(Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with ", capitalize(getProviderAsString(provider))] })))] }), getProviderAsString(provider)));
     return (jsxs(Fragment, { children: [jsxs("div", Object.assign({ className: 'social-sign-in', style: {
                     '--number-of-social-grid-items': numberOfSocialGridItems,
-                }, "data-testid": testId }, { children: [socialProvidersToDisplayInline.map((provider) => renderProviderItem(provider)), showCardButton && (jsx(IconListTile, Object.assign({ dataTestId: 'show-more-options', onClick: () => setShowCard(true) }, { children: jsx(Icon, Object.assign({ color: 'text-primary' }, { children: jsx(SvgDotsHorizontal, {}) })) }), 'show-more-options'))] })), jsx(OverlayCard, Object.assign({ isOpen: showCard, onClickOverlay: closeCard }, { children: jsxs("div", Object.assign({ className: 'social-sign-in--card' }, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton }, { children: jsx(Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: "Choose a social account" })) })), jsx("div", Object.assign({ className: 'social-sign-in--card--body' }, { children: providers.map((provider) => renderProviderItem(provider, true)) }))] })) }))] }));
+                }, "data-testid": testId }, { children: [defaultProvider && renderProviderItem(defaultProvider, true), socialProvidersToDisplayInline.map((provider) => renderProviderItem(provider, socialProvidersToDisplayInline.length < 2)), showCardButton && (jsx(IconListTile, Object.assign({ dataTestId: 'show-more-options', onClick: () => setShowCard(true), className: 'social-sign-in--tile' }, { children: jsx(Icon, Object.assign({ color: 'text-primary' }, { children: jsx(SvgDotsHorizontal, {}) })) }), 'show-more-options'))] })), jsx(OverlayCard, Object.assign({ isOpen: showCard, onClickOverlay: closeCard }, { children: jsxs("div", Object.assign({ className: 'social-sign-in--card' }, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton }, { children: jsx(Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: "Choose a social account" })) })), jsx("div", Object.assign({ className: 'social-sign-in--card--body' }, { children: providers.map((provider) => renderProviderItem(provider, false, true)) }))] })) }))] }));
 };
 
 export { SocialSignIn };

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

@@ -6,6 +6,6 @@ export type Props = {
     originAddress: string;
     textClassName?: string;
     walletIconClassName?: string;
-    walletName?: string;
+    walletKey?: string;
 };
 export declare const TransactionOriginDestination: FC<Props>;

package/src/lib/components/UserProfile/UserProfile.cjs

@@ -23,12 +23,15 @@ require('@dynamic-labs/multi-wallet');
 var index = require('../../utils/functions/getEnabledOAuthProviders/index.cjs');
 var isSocialKycEnabled = require('../../utils/functions/isSocialKycEnabled/isSocialKycEnabled.cjs');
 var getUserProfileFields = require('../../utils/functions/getUserProfileFields/getUserProfileFields.cjs');
+var ErrorContext = require('../../context/ErrorContext/ErrorContext.cjs');
+var ErrorContainer = require('../ErrorContainer/ErrorContainer.cjs');
 var UserProfileField = require('./parts/UserProfileField/UserProfileField.cjs');
 var UserProfileSection = require('./parts/UserProfileSection/UserProfileSection.cjs');
 var UserProfileSocialAccount = require('./parts/UserProfileSocialAccount/UserProfileSocialAccount.cjs');
 
 const UserProfile = ({ rootClassName }) => {
     const { projectSettings, user } = useInternalDynamicContext.useInternalDynamicContext();
+    const { error } = ErrorContext.useErrorContext();
     const allUserFields = getUserProfileFields.getUserProfileFields({
         projectSettingsKyc: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.kyc,
         user,
@@ -39,7 +42,7 @@ const UserProfile = ({ rootClassName }) => {
     const mapFieldKeyToValue = (fieldKey) => user === null || user === void 0 ? void 0 : user[fieldKey];
     if (!user)
         return null;
-    return (jsxRuntime.jsxs("div", Object.assign({ "data-testid": 'userProfile', className: classNames.classNames('user-profile', rootClassName) }, { children: [(allUserFields === null || allUserFields === void 0 ? void 0 : allUserFields.length) > 0 && (jsxRuntime.jsx(UserProfileSection.UserProfileSection, Object.assign({ title: 'My information' }, { children: jsxRuntime.jsx("div", Object.assign({ className: 'user-profile__fields' }, { children: allUserFields.map(({ name }) => {
+    return (jsxRuntime.jsxs("div", Object.assign({ "data-testid": 'userProfile', className: classNames.classNames('user-profile', rootClassName) }, { children: [error && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: error }), (allUserFields === null || allUserFields === void 0 ? void 0 : allUserFields.length) > 0 && (jsxRuntime.jsx(UserProfileSection.UserProfileSection, Object.assign({ title: 'My information' }, { children: jsxRuntime.jsx("div", Object.assign({ className: 'user-profile__fields' }, { children: allUserFields.map(({ name }) => {
                         const { label } = index$1.getValueByKey(fieldsConfig.fieldsConfig, name);
                         const value = mapFieldKeyToValue(name);
                         return (jsxRuntime.jsx(UserProfileField.UserProfileField, { name: name, label: label, value: value }, name));

package/src/lib/components/UserProfile/UserProfile.js

@@ -19,12 +19,15 @@ import '@dynamic-labs/multi-wallet';
 import { getEnabledOAuthProviders } from '../../utils/functions/getEnabledOAuthProviders/index.js';
 import { isSocialKycEnabled } from '../../utils/functions/isSocialKycEnabled/isSocialKycEnabled.js';
 import { getUserProfileFields } from '../../utils/functions/getUserProfileFields/getUserProfileFields.js';
+import { useErrorContext } from '../../context/ErrorContext/ErrorContext.js';
+import { ErrorContainer } from '../ErrorContainer/ErrorContainer.js';
 import { UserProfileField } from './parts/UserProfileField/UserProfileField.js';
 import { UserProfileSection } from './parts/UserProfileSection/UserProfileSection.js';
 import { UserProfileSocialAccount } from './parts/UserProfileSocialAccount/UserProfileSocialAccount.js';
 
 const UserProfile = ({ rootClassName }) => {
     const { projectSettings, user } = useInternalDynamicContext();
+    const { error } = useErrorContext();
     const allUserFields = getUserProfileFields({
         projectSettingsKyc: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.kyc,
         user,
@@ -35,7 +38,7 @@ const UserProfile = ({ rootClassName }) => {
     const mapFieldKeyToValue = (fieldKey) => user === null || user === void 0 ? void 0 : user[fieldKey];
     if (!user)
         return null;
-    return (jsxs("div", Object.assign({ "data-testid": 'userProfile', className: classNames('user-profile', rootClassName) }, { children: [(allUserFields === null || allUserFields === void 0 ? void 0 : allUserFields.length) > 0 && (jsx(UserProfileSection, Object.assign({ title: 'My information' }, { children: jsx("div", Object.assign({ className: 'user-profile__fields' }, { children: allUserFields.map(({ name }) => {
+    return (jsxs("div", Object.assign({ "data-testid": 'userProfile', className: classNames('user-profile', rootClassName) }, { children: [error && jsx(ErrorContainer, { children: error }), (allUserFields === null || allUserFields === void 0 ? void 0 : allUserFields.length) > 0 && (jsx(UserProfileSection, Object.assign({ title: 'My information' }, { children: jsx("div", Object.assign({ className: 'user-profile__fields' }, { children: allUserFields.map(({ name }) => {
                         const { label } = getValueByKey(fieldsConfig, name);
                         const value = mapFieldKeyToValue(name);
                         return (jsx(UserProfileField, { name: name, label: label, value: value }, name));

package/src/lib/components/UserProfile/parts/UserProfileSocialAccount/UserProfileSocialAccount.cjs

@@ -18,7 +18,7 @@ require('../../../../utils/constants/colors.cjs');
 require('../../../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../../../shared/consts/index.cjs');
-require('../../../../context/DynamicContext/DynamicContext.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
 require('../../../ShadowDOM/ShadowDOM.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
@@ -57,22 +57,24 @@ var ConnectedAccountAvatar = require('./components/ConnectedAccountAvatar/Connec
 
 const UserProfileSocialAccount = ({ provider, }) => {
     var _a;
+    const { user, primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
     const { linkSocialAccount, unlinkSocialAccount, isProcessing, isLinked, getLinkedAccountInformation, } = useSocialAccounts.useSocialAccounts();
     const isProviderLinked = isLinked(provider);
     const connectedAccountInfo = getLinkedAccountInformation(provider);
     const iconThemeVariant = useIconThemeVariant.useIconThemeVariant();
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'user-profile-social-account', "data-testid": `social-account-${provider}` }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'user-profile-social-account__icon' }, { children: isProviderLinked ? (jsxRuntime.jsx(ConnectedAccountAvatar.ConnectedAccountAvatar, { provider: provider, avatarUrl: connectedAccountInfo === null || connectedAccountInfo === void 0 ? void 0 : connectedAccountInfo.avatar })) : (jsxRuntime.jsx(iconic.SocialIcon, { name: provider, variant: iconThemeVariant })) })), jsxRuntime.jsx("div", Object.assign({ className: 'user-profile-social-account__label' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary' }, { children: (_a = connectedAccountInfo === null || connectedAccountInfo === void 0 ? void 0 : connectedAccountInfo.publicIdentifier) !== null && _a !== void 0 ? _a : helpers.capitalize(provider) })) })), isProviderLinked ? (jsxRuntime.jsx(Button.Button, { buttonClassName: 'user-profile-social-account__button', buttonVariant: 'secondary', buttonRounded: 'small', buttonPadding: 'none', onClick: () => unlinkSocialAccount(provider), loading: isProcessing, dataTestId: 'social-account-disconnect-button', typographyProps: {
-                    color: 'secondary',
-                    variant: 'button_tertiary',
-                }, startSlot: 
-                // eslint-disable-next-line react/jsx-wrap-multilines
-                jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary', size: 'small' }, { children: jsxRuntime.jsx(unlink.ReactComponent, {}) })) })) : (jsxRuntime.jsx(Button.Button, Object.assign({ buttonClassName: 'user-profile-social-account__button', buttonVariant: 'secondary', buttonRounded: 'small', buttonPadding: 'none', onClick: () => linkSocialAccount(provider), loading: isProcessing, dataTestId: 'social-account-connect-button', typographyProps: {
-                    color: 'secondary',
-                    variant: 'button_tertiary',
-                    weight: 'medium',
-                }, startSlot: 
-                // eslint-disable-next-line react/jsx-wrap-multilines
-                jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary', size: 'small' }, { children: jsxRuntime.jsx(add.ReactComponent, {}) })) }, { children: "Connect" })))] })));
+    const isActiveCredential = !primaryWallet &&
+        connectedAccountInfo &&
+        (connectedAccountInfo === null || connectedAccountInfo === void 0 ? void 0 : connectedAccountInfo.id) === (user === null || user === void 0 ? void 0 : user.lastVerifiedCredentialId);
+    const renderButton = () => (jsxRuntime.jsx(Button.Button, Object.assign({ buttonClassName: 'user-profile-social-account__button', buttonVariant: 'secondary', buttonRounded: 'small', buttonPadding: 'none', onClick: () => isProviderLinked
+            ? unlinkSocialAccount(provider)
+            : linkSocialAccount(provider), loading: isProcessing, dataTestId: `social-account-${isProviderLinked ? 'disconnect' : 'connect'}-button`, typographyProps: {
+            color: 'secondary',
+            variant: 'button_tertiary',
+            // weight: 'medium',
+        }, startSlot: 
+        // eslint-disable-next-line react/jsx-wrap-multilines
+        jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary', size: 'small' }, { children: isProviderLinked ? jsxRuntime.jsx(unlink.ReactComponent, {}) : jsxRuntime.jsx(add.ReactComponent, {}) })) }, { children: isProviderLinked ? null : 'Connect' })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'user-profile-social-account', "data-testid": `social-account-${provider}` }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'user-profile-social-account__icon' }, { children: isProviderLinked ? (jsxRuntime.jsx(ConnectedAccountAvatar.ConnectedAccountAvatar, { provider: provider, avatarUrl: connectedAccountInfo === null || connectedAccountInfo === void 0 ? void 0 : connectedAccountInfo.avatar })) : (jsxRuntime.jsx(iconic.SocialIcon, { name: provider, variant: iconThemeVariant })) })), jsxRuntime.jsx("div", Object.assign({ className: 'user-profile-social-account__label' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary' }, { children: (_a = connectedAccountInfo === null || connectedAccountInfo === void 0 ? void 0 : connectedAccountInfo.publicIdentifier) !== null && _a !== void 0 ? _a : helpers.capitalize(provider) })) })), !isActiveCredential ? renderButton() : null] })));
 };
 
 exports.UserProfileSocialAccount = UserProfileSocialAccount;