@dynamic-labs/sdk-react-core 0.18.100-viem.27 → 0.18.100-viem.29

package/CHANGELOG.md

@@ -1,4 +1,22 @@
 
+### [0.18.100-viem.29](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.100-viem.28...v0.18.100-viem.29) (2023-11-22)
+
+
+### Bug Fixes
+
+* allow metadata to be updated in updateUser hook ([#3947](https://github.com/dynamic-labs/DynamicAuth/issues/3947)) ([d6a3591](https://github.com/dynamic-labs/DynamicAuth/commit/d6a35918327b095d1a715942bc84cd9763e6864d))
+* null safe check to window object ([#3919](https://github.com/dynamic-labs/DynamicAuth/issues/3919)) ([e466964](https://github.com/dynamic-labs/DynamicAuth/commit/e4669644c451139d443e534df238602d18fcda07))
+* only process oauth message coming from the expected origin ([#3812](https://github.com/dynamic-labs/DynamicAuth/issues/3812)) ([ff98948](https://github.com/dynamic-labs/DynamicAuth/commit/ff98948b5415967ad3769887bb95d9c6d353a0c6))
+
+### [0.18.100-viem.28](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.100-viem.27...v0.18.100-viem.28) (2023-10-30)
+
+
+### Bug Fixes
+
+* better handling of Coinbase wallet disconnect + upgrade to 3.7.2 ([#3691](https://github.com/dynamic-labs/DynamicAuth/issues/3691)) ([2385af8](https://github.com/dynamic-labs/DynamicAuth/commit/2385af8e960c3c3a23d2ce3379c50668a88b0478))
+* Fix send balance in multiple chains ([#3767](https://github.com/dynamic-labs/DynamicAuth/issues/3767)) ([724d650](https://github.com/dynamic-labs/DynamicAuth/commit/724d650965a4e8cc864a1eeb787646399fce3814))
+* safely render message to sign ([#3655](https://github.com/dynamic-labs/DynamicAuth/issues/3655)) ([#3661](https://github.com/dynamic-labs/DynamicAuth/issues/3661)) ([8ddc30a](https://github.com/dynamic-labs/DynamicAuth/commit/8ddc30a9b43e5ef47fedcaa58e9b20a9528b8cc6))
+
 ### [0.18.100-viem.27](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.100-viem.26...v0.18.100-viem.27) (2023-10-19)
 
 

package/package.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.18.100-viem.27";
+var version = "0.18.100-viem.29";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.32",

package/package.js

@@ -1,4 +1,4 @@
-var version = "0.18.100-viem.27";
+var version = "0.18.100-viem.29";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.32",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "0.18.100-viem.27",
+  "version": "0.18.100-viem.29",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -15,13 +15,13 @@
     "yup": "0.32.11",
     "formik": "2.2.9",
     "qrcode": "1.5.1",
-    "@dynamic-labs/logger": "0.18.100-viem.27",
-    "@dynamic-labs/multi-wallet": "0.18.100-viem.27",
-    "@dynamic-labs/rpc-providers": "0.18.100-viem.27",
-    "@dynamic-labs/types": "0.18.100-viem.27",
-    "@dynamic-labs/utils": "0.18.100-viem.27",
-    "@dynamic-labs/wallet-book": "0.18.100-viem.27",
-    "@dynamic-labs/wallet-connector-core": "0.18.100-viem.27",
+    "@dynamic-labs/logger": "0.18.100-viem.29",
+    "@dynamic-labs/multi-wallet": "0.18.100-viem.29",
+    "@dynamic-labs/rpc-providers": "0.18.100-viem.29",
+    "@dynamic-labs/types": "0.18.100-viem.29",
+    "@dynamic-labs/utils": "0.18.100-viem.29",
+    "@dynamic-labs/wallet-book": "0.18.100-viem.29",
+    "@dynamic-labs/wallet-connector-core": "0.18.100-viem.29",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/lib/components/SignMessagePreview/SignMessagePreview.cjs

@@ -21,7 +21,7 @@ const SignMessagePreview = ({ message, }) => {
     if (signTypedData) {
         return (jsxRuntime.jsx(SignTypedDataPreview.SignTypedDataPreview, { currentType: signTypedData.primaryType, types: signTypedData.types, showTypeName: true, data: signTypedData.message }));
     }
-    return (jsxRuntime.jsx(Typography.Typography, { color: 'primary', variant: 'body_normal', children: jsxRuntime.jsx("span", { style: { whiteSpace: 'pre-line' }, dangerouslySetInnerHTML: { __html: message } }) }));
+    return (jsxRuntime.jsx(Typography.Typography, { color: 'primary', variant: 'body_normal', children: jsxRuntime.jsx("span", { style: { whiteSpace: 'pre-line' }, children: message }) }));
 };
 
 exports.SignMessagePreview = SignMessagePreview;

package/src/lib/components/SignMessagePreview/SignMessagePreview.js

@@ -17,7 +17,7 @@ const SignMessagePreview = ({ message, }) => {
     if (signTypedData) {
         return (jsx(SignTypedDataPreview, { currentType: signTypedData.primaryType, types: signTypedData.types, showTypeName: true, data: signTypedData.message }));
     }
-    return (jsx(Typography, { color: 'primary', variant: 'body_normal', children: jsx("span", { style: { whiteSpace: 'pre-line' }, dangerouslySetInnerHTML: { __html: message } }) }));
+    return (jsx(Typography, { color: 'primary', variant: 'body_normal', children: jsx("span", { style: { whiteSpace: 'pre-line' }, children: message }) }));
 };
 
 export { SignMessagePreview };

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const getProviderByType = (providers, providerType) => providers.find((p) => p.provider === providerType);
+
+exports.getProviderByType = getProviderByType;

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

@@ -0,0 +1,2 @@
+import { Provider, ProviderEnum } from '@dynamic-labs/sdk-api';
+export declare const getProviderByType: (providers: Provider[], providerType: ProviderEnum) => Provider | undefined;

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

@@ -0,0 +1,3 @@
+const getProviderByType = (providers, providerType) => providers.find((p) => p.provider === providerType);
+
+export { getProviderByType };

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

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

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

@@ -28,3 +28,4 @@ export * from './digestSHA256';
 export * from './encodeBase64URL';
 export * from './getRedirectURIOrigin';
 export * from './sendTransactionWithAutoNonce';
+export * from './getProviderByType';

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

@@ -29,6 +29,7 @@ var stringifyURIQuery = require('../../functions/stringifyURIQuery/stringifyURIQ
 var digestSHA256 = require('../../functions/digestSHA256/digestSHA256.cjs');
 var encodeBase64URL = require('../../functions/encodeBase64URL/encodeBase64URL.cjs');
 var getRedirectURIOrigin = require('../../functions/getRedirectURIOrigin/getRedirectURIOrigin.cjs');
+var getProviderByType = require('../../functions/getProviderByType/getProviderByType.cjs');
 
 const socialProviders = [
     'discord',
@@ -136,28 +137,52 @@ const useSocialAccounts = ({ sessionTimeout } = {
             providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: false });
         };
         const handleAuthWindowMessage = (event) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            var _c;
+            var _c, _d;
             const message = event.data;
             const isAuthorizationMessage = (message === null || message === void 0 ? void 0 : message.type) === 'authorization_response';
             if (isAuthorizationMessage) {
                 logger.logger.debug('Message received', { data: message });
             }
-            const isValidMessage = isAuthorizationMessage && (message === null || message === void 0 ? void 0 : message.provider) === provider;
+            const apiProvider = getProviderByType.getProviderByType((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _c !== void 0 ? _c : [], provider);
+            if (!(apiProvider === null || apiProvider === void 0 ? void 0 : apiProvider.redirectUrl)) {
+                return;
+            }
+            let expectedOrigin = '';
+            try {
+                const redirectUri = new URL(apiProvider.redirectUrl);
+                expectedOrigin = redirectUri.origin;
+            }
+            catch (e) {
+                logger.logger.error('Failed to parse social provider redirect url', {
+                    error: e,
+                });
+                return;
+            }
+            const isExpectedOrigin = event.origin === expectedOrigin;
+            const isValidMessage = isAuthorizationMessage &&
+                (message === null || message === void 0 ? void 0 : message.provider) === provider &&
+                isExpectedOrigin;
             // don't process imvalid messages for provider
             if (!isValidMessage) {
                 return;
             }
             setIsProcessing(true);
-            if (!((_c = providersWaitingOauthMessages.current) === null || _c === void 0 ? void 0 : _c[provider])) {
+            if (!((_d = providersWaitingOauthMessages.current) === null || _d === void 0 ? void 0 : _d[provider])) {
                 handleError(`Linking ${provider} account session timeout.`);
                 return;
             }
             clearListeners();
-            const { code, error } = message;
+            const { code, error, state: authState } = message;
             if (error && error !== 'undefined') {
                 handleError(`Failed to link ${provider} social account: ${error}`);
                 return;
             }
+            // check that the state we receive from message is the same state we calculated earlier
+            // this could be an attack
+            if (state !== authState) {
+                handleError(`Failed to link ${provider} social account: invalid auth state`);
+                return;
+            }
             if (!code) {
                 handleError(`Failed to link ${provider} social account: no authorization code`);
                 return;
@@ -184,19 +209,23 @@ const useSocialAccounts = ({ sessionTimeout } = {
         // different origins (our api redirect page and the app where the sdk is running)
         const oauthIFrameUrl = `${getRedirectURIOrigin.getRedirectURIOrigin(loginUrl)}/sdkoauth`;
         addOAuthIFrame(oauthIFrameUrl);
-        let oauthLoginUrl = loginUrl;
+        if (!((_b = providersWaitingOauthMessages.current) === null || _b === void 0 ? void 0 : _b[provider])) {
+            window.addEventListener('message', handleAuthWindowMessage);
+            providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: true });
+        }
+        // add state param for all providers
+        const stateParam = stringifyURIQuery.stringifyURIQuery({
+            state,
+        });
+        let oauthLoginUrl = `${loginUrl}&${stateParam}`;
+        // only add pkce params for providers that support/require it
         if (providersRequiringPkce.includes(provider)) {
             const digest = yield digestSHA256.digestSHA256(verifier);
             const pkceParams = stringifyURIQuery.stringifyURIQuery({
                 code_challenge: encodeBase64URL.encodeBase64URL(digest),
                 code_challenge_method: 'S256',
-                state: state,
             });
-            oauthLoginUrl = `${loginUrl}&${pkceParams}`;
-        }
-        if (!((_b = providersWaitingOauthMessages.current) === null || _b === void 0 ? void 0 : _b[provider])) {
-            window.addEventListener('message', handleAuthWindowMessage);
-            providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: true });
+            oauthLoginUrl = `${oauthLoginUrl}&${pkceParams}`;
         }
         const authWindow = window.open(oauthLoginUrl, '_blank', 'width=500,height=600');
         if (!providersWithoutWindowOpenerRefence.includes(provider)) {
@@ -225,7 +254,7 @@ const useSocialAccounts = ({ sessionTimeout } = {
         }
     });
     const unlinkSocialAccount = (provider) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _d;
+        var _e;
         setError(undefined);
         setIsProcessing(true);
         if (!checkValidProvider(provider)) {
@@ -241,7 +270,7 @@ const useSocialAccounts = ({ sessionTimeout } = {
             const jwt = yield api.unlinkOAuth({
                 environmentId,
                 primaryWalletId,
-                verifiedCrentialId: (_d = verifiedCredential.id) !== null && _d !== void 0 ? _d : '',
+                verifiedCrentialId: (_e = verifiedCredential.id) !== null && _e !== void 0 ? _e : '',
             }, String(userJwt));
             if (!jwt) {
                 handleError(`Failed to unlink social account: ${provider} | ${verifiedCredential.id}`);

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

@@ -25,6 +25,7 @@ import { stringifyURIQuery } from '../../functions/stringifyURIQuery/stringifyUR
 import { digestSHA256 } from '../../functions/digestSHA256/digestSHA256.js';
 import { encodeBase64URL } from '../../functions/encodeBase64URL/encodeBase64URL.js';
 import { getRedirectURIOrigin } from '../../functions/getRedirectURIOrigin/getRedirectURIOrigin.js';
+import { getProviderByType } from '../../functions/getProviderByType/getProviderByType.js';
 
 const socialProviders = [
     'discord',
@@ -132,28 +133,52 @@ const useSocialAccounts = ({ sessionTimeout } = {
             providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: false });
         };
         const handleAuthWindowMessage = (event) => __awaiter(void 0, void 0, void 0, function* () {
-            var _c;
+            var _c, _d;
             const message = event.data;
             const isAuthorizationMessage = (message === null || message === void 0 ? void 0 : message.type) === 'authorization_response';
             if (isAuthorizationMessage) {
                 logger.debug('Message received', { data: message });
             }
-            const isValidMessage = isAuthorizationMessage && (message === null || message === void 0 ? void 0 : message.provider) === provider;
+            const apiProvider = getProviderByType((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _c !== void 0 ? _c : [], provider);
+            if (!(apiProvider === null || apiProvider === void 0 ? void 0 : apiProvider.redirectUrl)) {
+                return;
+            }
+            let expectedOrigin = '';
+            try {
+                const redirectUri = new URL(apiProvider.redirectUrl);
+                expectedOrigin = redirectUri.origin;
+            }
+            catch (e) {
+                logger.error('Failed to parse social provider redirect url', {
+                    error: e,
+                });
+                return;
+            }
+            const isExpectedOrigin = event.origin === expectedOrigin;
+            const isValidMessage = isAuthorizationMessage &&
+                (message === null || message === void 0 ? void 0 : message.provider) === provider &&
+                isExpectedOrigin;
             // don't process imvalid messages for provider
             if (!isValidMessage) {
                 return;
             }
             setIsProcessing(true);
-            if (!((_c = providersWaitingOauthMessages.current) === null || _c === void 0 ? void 0 : _c[provider])) {
+            if (!((_d = providersWaitingOauthMessages.current) === null || _d === void 0 ? void 0 : _d[provider])) {
                 handleError(`Linking ${provider} account session timeout.`);
                 return;
             }
             clearListeners();
-            const { code, error } = message;
+            const { code, error, state: authState } = message;
             if (error && error !== 'undefined') {
                 handleError(`Failed to link ${provider} social account: ${error}`);
                 return;
             }
+            // check that the state we receive from message is the same state we calculated earlier
+            // this could be an attack
+            if (state !== authState) {
+                handleError(`Failed to link ${provider} social account: invalid auth state`);
+                return;
+            }
             if (!code) {
                 handleError(`Failed to link ${provider} social account: no authorization code`);
                 return;
@@ -180,19 +205,23 @@ const useSocialAccounts = ({ sessionTimeout } = {
         // different origins (our api redirect page and the app where the sdk is running)
         const oauthIFrameUrl = `${getRedirectURIOrigin(loginUrl)}/sdkoauth`;
         addOAuthIFrame(oauthIFrameUrl);
-        let oauthLoginUrl = loginUrl;
+        if (!((_b = providersWaitingOauthMessages.current) === null || _b === void 0 ? void 0 : _b[provider])) {
+            window.addEventListener('message', handleAuthWindowMessage);
+            providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: true });
+        }
+        // add state param for all providers
+        const stateParam = stringifyURIQuery({
+            state,
+        });
+        let oauthLoginUrl = `${loginUrl}&${stateParam}`;
+        // only add pkce params for providers that support/require it
         if (providersRequiringPkce.includes(provider)) {
             const digest = yield digestSHA256(verifier);
             const pkceParams = stringifyURIQuery({
                 code_challenge: encodeBase64URL(digest),
                 code_challenge_method: 'S256',
-                state: state,
             });
-            oauthLoginUrl = `${loginUrl}&${pkceParams}`;
-        }
-        if (!((_b = providersWaitingOauthMessages.current) === null || _b === void 0 ? void 0 : _b[provider])) {
-            window.addEventListener('message', handleAuthWindowMessage);
-            providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: true });
+            oauthLoginUrl = `${oauthLoginUrl}&${pkceParams}`;
         }
         const authWindow = window.open(oauthLoginUrl, '_blank', 'width=500,height=600');
         if (!providersWithoutWindowOpenerRefence.includes(provider)) {
@@ -221,7 +250,7 @@ const useSocialAccounts = ({ sessionTimeout } = {
         }
     });
     const unlinkSocialAccount = (provider) => __awaiter(void 0, void 0, void 0, function* () {
-        var _d;
+        var _e;
         setError(undefined);
         setIsProcessing(true);
         if (!checkValidProvider(provider)) {
@@ -237,7 +266,7 @@ const useSocialAccounts = ({ sessionTimeout } = {
             const jwt = yield unlinkOAuth({
                 environmentId,
                 primaryWalletId,
-                verifiedCrentialId: (_d = verifiedCredential.id) !== null && _d !== void 0 ? _d : '',
+                verifiedCrentialId: (_e = verifiedCredential.id) !== null && _e !== void 0 ? _e : '',
             }, String(userJwt));
             if (!jwt) {
                 handleError(`Failed to unlink social account: ${provider} | ${verifiedCredential.id}`);

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

@@ -40,6 +40,7 @@ const userFieldsSchema = yup.object().shape({
     kdaWallet: yup.string(),
     lastName: yup.string(),
     ltcWallet: yup.string(),
+    metadata: yup.object(),
     newsletterNotification: yup.boolean(),
     phoneNumber: yup.string(),
     tShirtSize: yup.string(),
@@ -55,10 +56,13 @@ const useUserUpdateRequestInternal = ({ validationSchemaStripUnknown, }) => {
     const { updateUserProfileByJWT } = useUpdateUserProfileByJWTCallback.useUpdateUserProfileByJWTCallback();
     const updateUser = React.useCallback((userFields, userEnvironmentId) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _a, _b, _c;
+        // `stripUnknown: true` will automatically strip out any values in the metadata object
+        // so we need to pull out the metadata object here and then re-add it after stripping unknown fields
+        const { metadata } = userFields;
         const validatedUserFields = yield userFieldsSchema.validate(userFields, {
             stripUnknown: validationSchemaStripUnknown,
         });
-        const updateUserProfileResponse = yield api.updateUserProfileFields(jwtToken, userEnvironmentId || environmentId, validatedUserFields);
+        const updateUserProfileResponse = yield api.updateUserProfileFields(jwtToken, userEnvironmentId || environmentId, Object.assign(Object.assign({}, validatedUserFields), { metadata }));
         // check if decoded JWT still somehow has missing fields, we can't proceed if it does
         const decodedJwt = decodeJwt.decodeJwt(updateUserProfileResponse.jwt);
         const missingFields = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields) !== null && _a !== void 0 ? _a : [];

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

@@ -36,6 +36,7 @@ const userFieldsSchema = object().shape({
     kdaWallet: string(),
     lastName: string(),
     ltcWallet: string(),
+    metadata: object(),
     newsletterNotification: boolean(),
     phoneNumber: string(),
     tShirtSize: string(),
@@ -51,10 +52,13 @@ const useUserUpdateRequestInternal = ({ validationSchemaStripUnknown, }) => {
     const { updateUserProfileByJWT } = useUpdateUserProfileByJWTCallback();
     const updateUser = useCallback((userFields, userEnvironmentId) => __awaiter(void 0, void 0, void 0, function* () {
         var _a, _b, _c;
+        // `stripUnknown: true` will automatically strip out any values in the metadata object
+        // so we need to pull out the metadata object here and then re-add it after stripping unknown fields
+        const { metadata } = userFields;
         const validatedUserFields = yield userFieldsSchema.validate(userFields, {
             stripUnknown: validationSchemaStripUnknown,
         });
-        const updateUserProfileResponse = yield updateUserProfileFields(jwtToken, userEnvironmentId || environmentId, validatedUserFields);
+        const updateUserProfileResponse = yield updateUserProfileFields(jwtToken, userEnvironmentId || environmentId, Object.assign(Object.assign({}, validatedUserFields), { metadata }));
         // check if decoded JWT still somehow has missing fields, we can't proceed if it does
         const decodedJwt = decodeJwt(updateUserProfileResponse.jwt);
         const missingFields = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields) !== null && _a !== void 0 ? _a : [];

package/src/lib/views/SendBalanceView/SendBalanceView.cjs

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _tslib = require('../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var viem = require('viem');
@@ -51,7 +52,7 @@ require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 
 const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBack, onClickClose, onError, onSuccess, onDone, displayPoweredByDynamicFooter = false, }) => {
     const [stage, setStage] = React.useState('form');
-    const { primaryWallet, network } = useInternalDynamicContext.useInternalDynamicContext();
+    const { primaryWallet, network, walletUiUtils } = useInternalDynamicContext.useInternalDynamicContext();
     const [value, setValue] = React.useState(initialValue !== null && initialValue !== void 0 ? initialValue : null);
     const [recipientAddress, setRecipientAddress] = React.useState(initialRecipientAddress);
     const transactionRef = React.useRef(null);
@@ -86,10 +87,25 @@ const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBa
         const transaction = {
             from: primaryWallet.address,
             to: recipientAddress,
-            type: 'eip2930',
             value,
         };
-        return (jsxRuntime.jsx(TransactionStage.TransactionStage, { walletConnector: walletConnector, provider: provider, transaction: transaction, title: 'Confirm transaction', onClickBack: () => setStage('form'), onError: onError, displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, onSuccess: (transaction) => {
+        return (jsxRuntime.jsx(TransactionStage.TransactionStage, { walletConnector: walletConnector, provider: provider, transaction: transaction, title: 'Confirm transaction', onClickBack: () => setStage('form'), onError: onError, displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, mutation: ({ to, value, gasPrice, nonce }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+                walletUiUtils.disabledConfirmationOnce();
+                const signer = yield walletConnector.getSigner();
+                const sentTransaction = yield signer.sendTransaction({
+                    account: signer.account || primaryWallet.address,
+                    /**
+                     * chain is set to null because viem already have the correct chain from the wallet connector
+                     * docs: https://viem.sh/docs/actions/wallet/sendTransaction.html#chain-optional
+                     */
+                    chain: null,
+                    gasPrice,
+                    nonce,
+                    to,
+                    value,
+                });
+                return sentTransaction;
+            }), onSuccess: (transaction) => {
                 transactionRef.current = transaction;
                 setStage('success');
                 onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(transactionRef.current);

package/src/lib/views/SendBalanceView/SendBalanceView.js

@@ -1,3 +1,4 @@
+import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx } from 'react/jsx-runtime';
 import { useState, useRef } from 'react';
 import { parseEther } from 'viem';
@@ -47,7 +48,7 @@ import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 
 const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBack, onClickClose, onError, onSuccess, onDone, displayPoweredByDynamicFooter = false, }) => {
     const [stage, setStage] = useState('form');
-    const { primaryWallet, network } = useInternalDynamicContext();
+    const { primaryWallet, network, walletUiUtils } = useInternalDynamicContext();
     const [value, setValue] = useState(initialValue !== null && initialValue !== void 0 ? initialValue : null);
     const [recipientAddress, setRecipientAddress] = useState(initialRecipientAddress);
     const transactionRef = useRef(null);
@@ -82,10 +83,25 @@ const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBa
         const transaction = {
             from: primaryWallet.address,
             to: recipientAddress,
-            type: 'eip2930',
             value,
         };
-        return (jsx(TransactionStage, { walletConnector: walletConnector, provider: provider, transaction: transaction, title: 'Confirm transaction', onClickBack: () => setStage('form'), onError: onError, displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, onSuccess: (transaction) => {
+        return (jsx(TransactionStage, { walletConnector: walletConnector, provider: provider, transaction: transaction, title: 'Confirm transaction', onClickBack: () => setStage('form'), onError: onError, displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, mutation: ({ to, value, gasPrice, nonce }) => __awaiter(void 0, void 0, void 0, function* () {
+                walletUiUtils.disabledConfirmationOnce();
+                const signer = yield walletConnector.getSigner();
+                const sentTransaction = yield signer.sendTransaction({
+                    account: signer.account || primaryWallet.address,
+                    /**
+                     * chain is set to null because viem already have the correct chain from the wallet connector
+                     * docs: https://viem.sh/docs/actions/wallet/sendTransaction.html#chain-optional
+                     */
+                    chain: null,
+                    gasPrice,
+                    nonce,
+                    to,
+                    value,
+                });
+                return sentTransaction;
+            }), onSuccess: (transaction) => {
                 transactionRef.current = transaction;
                 setStage('success');
                 onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(transactionRef.current);

package/src/lib/views/SendBalanceView/components/TransactionStage/TransactionStage.cjs

@@ -22,7 +22,7 @@ var isMagicConnector = require('../../../../utils/functions/isMagicConnector/isM
 var sendTransactionWithAutoNonce = require('../../../../utils/functions/sendTransactionWithAutoNonce/sendTransactionWithAutoNonce.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
-var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
@@ -48,20 +48,14 @@ require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs')
 var useTransactionWithGasPrice = require('../../../../utils/hooks/useTransactionWithGasPrice/useTransactionWithGasPrice.cjs');
 
 const TransactionStage = (_a) => {
-    var { transaction, provider, walletConnector } = _a, rest = _tslib.__rest(_a, ["transaction", "provider", "walletConnector"]);
-    const { walletUiUtils } = useInternalDynamicContext.useInternalDynamicContext();
+    var { transaction, provider, walletConnector, mutation } = _a, rest = _tslib.__rest(_a, ["transaction", "provider", "walletConnector", "mutation"]);
     const transactionWithGasPrice = useTransactionWithGasPrice.useTransactionWithGasPrice({
         enabled: isMagicConnector.isMagicConnector(walletConnector),
         increasePercentage: 5,
         provider,
         transaction,
     });
-    return (jsxRuntime.jsx(TransactionConfirmationView.TransactionConfirmationView, Object.assign({ provider: provider, transaction: transactionWithGasPrice, mutation: () => sendTransactionWithAutoNonce.sendTransactionWithAutoNonce(walletConnector, transactionWithGasPrice, (transaction) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            walletUiUtils.disabledConfirmationOnce();
-            const signer = yield walletConnector.getSigner();
-            const sentTransaction = yield signer.sendTransaction(Object.assign(Object.assign({}, transaction), { account: transaction.from, chain: null }));
-            return sentTransaction;
-        })) }, rest)));
+    return (jsxRuntime.jsx(TransactionConfirmationView.TransactionConfirmationView, Object.assign({ provider: provider, transaction: transactionWithGasPrice, mutation: () => sendTransactionWithAutoNonce.sendTransactionWithAutoNonce(walletConnector, transactionWithGasPrice, mutation) }, rest)));
 };
 
 exports.TransactionStage = TransactionStage;

package/src/lib/views/SendBalanceView/components/TransactionStage/TransactionStage.d.ts

@@ -1,8 +1,10 @@
 import { FC } from 'react';
+import { Hex, TransactionRequest } from 'viem';
 import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { TransactionConfirmationViewProps } from '../../../TransactionConfirmationView';
 type TransactionStageProps = Omit<TransactionConfirmationViewProps, 'mutation'> & {
     walletConnector: WalletConnector;
+    mutation: (transaction: TransactionRequest) => Promise<Hex>;
 };
 export declare const TransactionStage: FC<TransactionStageProps>;
 export {};

package/src/lib/views/SendBalanceView/components/TransactionStage/TransactionStage.js

@@ -1,4 +1,4 @@
-import { __rest, __awaiter } from '../../../../../../_virtual/_tslib.js';
+import { __rest } from '../../../../../../_virtual/_tslib.js';
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import '@dynamic-labs/utils';
@@ -18,7 +18,7 @@ import { isMagicConnector } from '../../../../utils/functions/isMagicConnector/i
 import { sendTransactionWithAutoNonce } from '../../../../utils/functions/sendTransactionWithAutoNonce/sendTransactionWithAutoNonce.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
-import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
+import '../../../../context/DynamicContext/DynamicContext.js';
 import '../../../../context/ErrorContext/ErrorContext.js';
 import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../context/AccountExistsContext/AccountExistsContext.js';
@@ -44,20 +44,14 @@ import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import { useTransactionWithGasPrice } from '../../../../utils/hooks/useTransactionWithGasPrice/useTransactionWithGasPrice.js';
 
 const TransactionStage = (_a) => {
-    var { transaction, provider, walletConnector } = _a, rest = __rest(_a, ["transaction", "provider", "walletConnector"]);
-    const { walletUiUtils } = useInternalDynamicContext();
+    var { transaction, provider, walletConnector, mutation } = _a, rest = __rest(_a, ["transaction", "provider", "walletConnector", "mutation"]);
     const transactionWithGasPrice = useTransactionWithGasPrice({
         enabled: isMagicConnector(walletConnector),
         increasePercentage: 5,
         provider,
         transaction,
     });
-    return (jsx(TransactionConfirmationView, Object.assign({ provider: provider, transaction: transactionWithGasPrice, mutation: () => sendTransactionWithAutoNonce(walletConnector, transactionWithGasPrice, (transaction) => __awaiter(void 0, void 0, void 0, function* () {
-            walletUiUtils.disabledConfirmationOnce();
-            const signer = yield walletConnector.getSigner();
-            const sentTransaction = yield signer.sendTransaction(Object.assign(Object.assign({}, transaction), { account: transaction.from, chain: null }));
-            return sentTransaction;
-        })) }, rest)));
+    return (jsx(TransactionConfirmationView, Object.assign({ provider: provider, transaction: transactionWithGasPrice, mutation: () => sendTransactionWithAutoNonce(walletConnector, transactionWithGasPrice, mutation) }, rest)));
 };
 
 export { TransactionStage };