npm - @stytch/react - Versions diffs - 20.0.0-next.3 → 20.0.0-next.5 - Mend

@stytch/react 20.0.0-next.3 → 20.0.0-next.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/dist/esm/_virtual/index3.mjs CHANGED Viewed

@@ -1,6 +1,8 @@
-import { __require as requireBs58 } from '../node_modules/bs58/index.mjs';
+import { getDefaultExportFromCjs } from './_commonjsHelpers.mjs';
+import { __require as requireLodash_merge } from '../node_modules/lodash.merge/index.mjs';
-var bs58Exports = requireBs58();
+var lodash_mergeExports = requireLodash_merge();
+var merge = /*@__PURE__*/getDefaultExportFromCjs(lodash_mergeExports);
-export { bs58Exports as b };
+export { merge as default };
 //# sourceMappingURL=index3.mjs.map

package/dist/esm/_virtual/index3.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index3.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;~~"}
1	+ {"version":3,"file":"index3.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/esm/_virtual/index4.mjs CHANGED Viewed

@@ -1,8 +1,6 @@
-import { getDefaultExportFromCjs } from './_commonjsHelpers.mjs';
-import { __require as requireLodash_merge } from '../node_modules/lodash.merge/index.mjs';
+import { __require as requireBs58 } from '../node_modules/bs58/index.mjs';
-var lodash_mergeExports = requireLodash_merge();
-var merge = /*@__PURE__*/getDefaultExportFromCjs(lodash_mergeExports);
+var bs58Exports = requireBs58();
-export { merge as default };
+export { bs58Exports as b };
 //# sourceMappingURL=index4.mjs.map

package/dist/esm/_virtual/index4.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index4.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;~~"}
1	+ {"version":3,"file":"index4.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/esm/packages/web/src/adminPortal/utils/theme.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-import merge from '../../../../../_virtual/index4.mjs';
+import merge from '../../../../../_virtual/index3.mjs';
 import 'react';
 import createTheme from '../../../../../node_modules/@mui/material/styles/createTheme.mjs';
 import selectClasses from '../../../../../node_modules/@mui/material/Select/selectClasses.mjs';

package/dist/esm/packages/web/src/ui/b2b/components/OAuthB2BButton.mjs CHANGED Viewed

@@ -2,7 +2,7 @@ import React__default from 'react';
 import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
 import { useStytch, useGlobalReducer } from '../GlobalContextProvider.mjs';
 import Button from '../../components/atoms/Button.mjs';
-import { usePresentation } from '../../components/PresentationConfig.mjs';
+import { usePresentation, getButtonId } from '../../components/PresentationConfig.mjs';
 import { B2BOAuthProviders } from '../../../../../core/src/public/b2b/ui.mjs';
 const providerInfo = {
@@ -41,7 +41,9 @@ const OAuthB2BButton = ({ providerType, loginRedirectUrl, signupRedirectUrl, dis
     const { i18n: $__i18n, _: $__ } = useLingui();
     const stytchClient = useStytch();
     const [state] = useGlobalReducer();
-    const iconRegistry = usePresentation().iconRegistry;
+    const presentation = usePresentation();
+    const iconRegistry = presentation.iconRegistry;
+    const id = getButtonId(`oauth-${providerType}`, presentation.options);
     const provider = providerInfo[providerType];
     let label = providerType;
     let icon = null;
@@ -73,7 +75,8 @@ const OAuthB2BButton = ({ providerType, loginRedirectUrl, signupRedirectUrl, dis
     return /*#__PURE__*/ React__default.createElement(Button, {
         onClick: onButtonClick,
         variant: "outline",
-        icon: icon
+        icon: icon,
+        id: id
     }, label);
 };

package/dist/esm/packages/web/src/ui/b2b/components/OAuthB2BButton.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OAuthB2BButton.mjs","sources":["../../../../../../../../../web/src/ui/b2b/components/OAuthB2BButton.tsx"],"sourcesContent":["import React from 'react';\nimport { B2BOAuthProviders } from '@stytch/core/public';\nimport { msg } from '@lingui/core/macro';\nimport { useLingui } from '@lingui/react/macro';\nimport { MessageDescriptor } from '@lingui/core';\nimport { useGlobalReducer, useStytch } from '../GlobalContextProvider';\nimport Button from '../../components/atoms/Button';\nimport { usePresentation } from '../../components/PresentationConfig';\nimport { IconRegistry } from '../../components/IconRegistry';\nimport type { oauthIcons } from './Icons';\n\ntype OauthIconName = keyof typeof oauthIcons;\n\ninterface OAuthProviderInfo {\n messageDescriptor: MessageDescriptor;\n}\n\nconst providerInfo: Record<B2BOAuthProviders, OAuthProviderInfo> = {\n [B2BOAuthProviders.Google]: {\n messageDescriptor: msg({ id: 'oauth.continueWithGoogle', message: 'Continue with Google' }),\n },\n [B2BOAuthProviders.Microsoft]: {\n messageDescriptor: msg({ id: 'oauth.continueWithMicrosoft', message: 'Continue with Microsoft' }),\n },\n [B2BOAuthProviders.HubSpot]: {\n messageDescriptor: msg({ id: 'oauth.continueWithHubSpot', message: 'Continue with HubSpot' }),\n },\n [B2BOAuthProviders.Slack]: {\n messageDescriptor: msg({ id: 'oauth.continueWithSlack', message: 'Continue with Slack' }),\n },\n [B2BOAuthProviders.GitHub]: {\n messageDescriptor: msg({ id: 'oauth.continueWithGitHub', message: 'Continue with GitHub' }),\n },\n};\n\nexport type OauthB2BButtonProps = {\n providerType: B2BOAuthProviders;\n loginRedirectUrl?: string;\n signupRedirectUrl?: string;\n discoveryRedirectUrl?: string;\n customScopes?: string[];\n providerParams?: Record<string, string>;\n onSuccess?: () => void;\n};\n\nexport const OAuthB2BButton = ({\n providerType,\n loginRedirectUrl,\n signupRedirectUrl,\n discoveryRedirectUrl,\n customScopes,\n providerParams,\n onSuccess,\n}: OauthB2BButtonProps) => {\n const { t } = useLingui();\n const stytchClient = useStytch();\n const [state] = useGlobalReducer();\n const iconRegistry: IconRegistry<OauthIconName> = ~~usePresentation()~~.iconRegistry;\n\n const provider = providerInfo[providerType];\n let label: string = providerType;\n let icon = null;\n if (provider) {\n const { messageDescriptor } = provider;\n const Icon = iconRegistry[providerType];\n label = t(messageDescriptor);\n icon = <Icon />;\n }\n\n const onButtonClick = async () => {\n const providerClient = stytchClient.oauth[providerType];\n\n if (state.flowState.organization) {\n await providerClient.start({\n login_redirect_url: loginRedirectUrl,\n signup_redirect_url: signupRedirectUrl,\n custom_scopes: customScopes,\n organization_id: state.flowState.organization.organization_id,\n provider_params: providerParams,\n });\n } else {\n await providerClient.discovery.start({\n discovery_redirect_url: discoveryRedirectUrl,\n custom_scopes: customScopes,\n provider_params: providerParams,\n });\n }\n\n onSuccess?.();\n };\n\n return (\n <Button onClick={onButtonClick} variant=\"outline\" icon={icon}>\n {label}\n </Button>\n );\n};\n"],"names":["providerInfo","B2BOAuthProviders","Google","messageDescriptor","Microsoft","HubSpot","Slack","GitHub","OAuthB2BButton","providerType","loginRedirectUrl","signupRedirectUrl","discoveryRedirectUrl","customScopes","providerParams","onSuccess","useLingui","stytchClient","useStytch","state","useGlobalReducer","~~iconRegistry~~","usePresentation","provider","label","icon","Icon","React","onButtonClick","providerClient","oauth","flowState","organization","start","login_redirect_url","signup_redirect_url","custom_scopes","organization_id","provider_params","discovery","discovery_redirect_url","Button","onClick","variant"],"mappings":";;;;;;;AAiBA,MAAMA,YAAAA,GAA6D;IACjE,CAACC,iBAAAA,CAAkBC,MAAM,GAAG;QAC1BC,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,iBAAAA,CAAkBG,SAAS,GAAG;QAC7BD,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,iBAAAA,CAAkBI,OAAO,GAAG;QAC3BF,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,iBAAAA,CAAkBK,KAAK,GAAG;QACzBH,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,iBAAAA,CAAkBM,MAAM,GAAG;QAC1BJ,iBAAiB,EAAA;;;;AACnB;AACF,CAAA;MAYaK,cAAAA,GAAiB,CAAC,EAC7BC,YAAY,EACZC,gBAAgB,EAChBC,iBAAiB,EACjBC,oBAAoB,EACpBC,YAAY,EACZC,cAAc,EACdC,SAAS,EACW,GAAA;AACpB,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,MAAMC,YAAAA,GAAeC,SAAAA,EAAAA;IACrB,MAAM,CAACC,MAAM,GAAGC,gBAAAA,EAAAA;~~IAChB~~,MAAMC,YAAAA,~~GAA4CC~~,~~kBAAkBD~~,YAAY;~~IAEhF~~,~~MAAME~~,QAAAA,~~GAAWvB~~,YAAY,CAACS,YAAAA,CAAa;AAC3C,IAAA,~~IAAIe~~,KAAAA,~~GAAgBf~~,YAAAA;AACpB,IAAA,~~IAAIgB~~,IAAAA,GAAO,IAAA;AACX,IAAA,IAAIF,QAAAA,EAAU;QACZ,MAAM,~~EAAEpB~~,iBAAiB,EAAE,~~GAAGoB~~,QAAAA;QAC9B,MAAMG,IAAAA,~~GAAOL~~,YAAY,~~CAACZ~~,YAAAA,CAAa;~~QACvCe~~,KAAAA,GAAAA,OAAAA,CAAAA,CAAAA,~~CAAUrB~~,iBAAAA,CAAAA;~~AACVsB~~,QAAAA,IAAAA,iBAAOE,cAAA,CAAA,aAAA,CAACD,IAAAA,EAAAA,IAAAA,CAAAA;AACV,IAAA;AAEA,IAAA,MAAME,aAAAA,GAAgB,UAAA;AACpB,QAAA,MAAMC,cAAAA,~~GAAiBZ~~,YAAAA,~~CAAaa~~,KAAK,~~CAACrB~~,YAAAA,CAAa;AAEvD,QAAA,IAAIU,KAAAA,~~CAAMY~~,SAAS,CAACC,YAAY,EAAE;YAChC,MAAMH,cAAAA,CAAeI,KAAK,CAAC;gBACzBC,kBAAAA,~~EAAoBxB~~,gBAAAA;~~gBACpByB~~,mBAAAA,~~EAAqBxB~~,iBAAAA;~~gBACrByB~~,aAAAA,~~EAAevB~~,YAAAA;~~AACfwB~~,gBAAAA,eAAAA,~~EAAiBlB~~,KAAAA,~~CAAMY~~,SAAS,CAACC,YAAY,CAACK,eAAe;gBAC7DC,eAAAA,~~EAAiBxB~~;AACnB,aAAA,CAAA;QACF,CAAA,MAAO;AACL,YAAA,~~MAAMe~~,cAAAA,CAAeU,SAAS,CAACN,KAAK,CAAC;gBACnCO,sBAAAA,~~EAAwB5B~~,oBAAAA;~~gBACxBwB~~,aAAAA,~~EAAevB~~,YAAAA;~~gBACfyB~~,eAAAA,~~EAAiBxB~~;AACnB,aAAA,CAAA;AACF,QAAA;AAEAC,QAAAA,SAAAA,IAAAA;AACF,IAAA,CAAA;AAEA,IAAA,~~qBACEY~~,cAAA,CAAA,aAAA,CAACc,MAAAA,EAAAA;QAAOC,OAAAA,EAASd,aAAAA;QAAee,OAAAA,EAAQ,SAAA;QAAUlB,IAAAA,EAAMA;~~AACrDD~~,KAAAA,EAAAA,KAAAA,CAAAA;AAGP;;;;"}
1	+ {"version":3,"file":"OAuthB2BButton.mjs","sources":["../../../../../../../../../web/src/ui/b2b/components/OAuthB2BButton.tsx"],"sourcesContent":["import React from 'react';\nimport { B2BOAuthProviders } from '@stytch/core/public';\nimport { msg } from '@lingui/core/macro';\nimport { useLingui } from '@lingui/react/macro';\nimport { MessageDescriptor } from '@lingui/core';\nimport { useGlobalReducer, useStytch } from '../GlobalContextProvider';\nimport Button from '../../components/atoms/Button';\nimport { getButtonId, usePresentation } from '../../components/PresentationConfig';\nimport { IconRegistry } from '../../components/IconRegistry';\nimport type { oauthIcons } from './Icons';\n\ntype OauthIconName = keyof typeof oauthIcons;\n\ninterface OAuthProviderInfo {\n messageDescriptor: MessageDescriptor;\n}\n\nconst providerInfo: Record<B2BOAuthProviders, OAuthProviderInfo> = {\n [B2BOAuthProviders.Google]: {\n messageDescriptor: msg({ id: 'oauth.continueWithGoogle', message: 'Continue with Google' }),\n },\n [B2BOAuthProviders.Microsoft]: {\n messageDescriptor: msg({ id: 'oauth.continueWithMicrosoft', message: 'Continue with Microsoft' }),\n },\n [B2BOAuthProviders.HubSpot]: {\n messageDescriptor: msg({ id: 'oauth.continueWithHubSpot', message: 'Continue with HubSpot' }),\n },\n [B2BOAuthProviders.Slack]: {\n messageDescriptor: msg({ id: 'oauth.continueWithSlack', message: 'Continue with Slack' }),\n },\n [B2BOAuthProviders.GitHub]: {\n messageDescriptor: msg({ id: 'oauth.continueWithGitHub', message: 'Continue with GitHub' }),\n },\n};\n\nexport type OauthB2BButtonProps = {\n providerType: B2BOAuthProviders;\n loginRedirectUrl?: string;\n signupRedirectUrl?: string;\n discoveryRedirectUrl?: string;\n customScopes?: string[];\n providerParams?: Record<string, string>;\n onSuccess?: () => void;\n};\n\nexport const OAuthB2BButton = ({\n providerType,\n loginRedirectUrl,\n signupRedirectUrl,\n discoveryRedirectUrl,\n customScopes,\n providerParams,\n onSuccess,\n}: OauthB2BButtonProps) => {\n const { t } = useLingui();\n const stytchClient = useStytch();\n const [state] = useGlobalReducer();\n\n const presentation = usePresentation();\n const iconRegistry: IconRegistry<OauthIconName> = presentation.iconRegistry;\n const id = getButtonId(`oauth-${providerType}`, presentation.options);\n\n const provider = providerInfo[providerType];\n let label: string = providerType;\n let icon = null;\n if (provider) {\n const { messageDescriptor } = provider;\n const Icon = iconRegistry[providerType];\n label = t(messageDescriptor);\n icon = <Icon />;\n }\n\n const onButtonClick = async () => {\n const providerClient = stytchClient.oauth[providerType];\n\n if (state.flowState.organization) {\n await providerClient.start({\n login_redirect_url: loginRedirectUrl,\n signup_redirect_url: signupRedirectUrl,\n custom_scopes: customScopes,\n organization_id: state.flowState.organization.organization_id,\n provider_params: providerParams,\n });\n } else {\n await providerClient.discovery.start({\n discovery_redirect_url: discoveryRedirectUrl,\n custom_scopes: customScopes,\n provider_params: providerParams,\n });\n }\n\n onSuccess?.();\n };\n\n return (\n <Button onClick={onButtonClick} variant=\"outline\" icon={icon} id={id}>\n {label}\n </Button>\n );\n};\n"],"names":["providerInfo","B2BOAuthProviders","Google","messageDescriptor","Microsoft","HubSpot","Slack","GitHub","OAuthB2BButton","providerType","loginRedirectUrl","signupRedirectUrl","discoveryRedirectUrl","customScopes","providerParams","onSuccess","useLingui","stytchClient","useStytch","state","useGlobalReducer","presentation","usePresentation","iconRegistry","id","getButtonId","options","provider","label","icon","Icon","React","onButtonClick","providerClient","oauth","flowState","organization","start","login_redirect_url","signup_redirect_url","custom_scopes","organization_id","provider_params","discovery","discovery_redirect_url","Button","onClick","variant"],"mappings":";;;;;;;AAiBA,MAAMA,YAAAA,GAA6D;IACjE,CAACC,iBAAAA,CAAkBC,MAAM,GAAG;QAC1BC,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,iBAAAA,CAAkBG,SAAS,GAAG;QAC7BD,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,iBAAAA,CAAkBI,OAAO,GAAG;QAC3BF,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,iBAAAA,CAAkBK,KAAK,GAAG;QACzBH,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,iBAAAA,CAAkBM,MAAM,GAAG;QAC1BJ,iBAAiB,EAAA;;;;AACnB;AACF,CAAA;MAYaK,cAAAA,GAAiB,CAAC,EAC7BC,YAAY,EACZC,gBAAgB,EAChBC,iBAAiB,EACjBC,oBAAoB,EACpBC,YAAY,EACZC,cAAc,EACdC,SAAS,EACW,GAAA;AACpB,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,MAAMC,YAAAA,GAAeC,SAAAA,EAAAA;IACrB,MAAM,CAACC,MAAM,GAAGC,gBAAAA,EAAAA;AAEhB,IAAA,MAAMC,YAAAA,GAAeC,eAAAA,EAAAA;IACrB,MAAMC,YAAAA,GAA4CF,aAAaE,YAAY;IAC3E,MAAMC,EAAAA,GAAKC,YAAY,CAAC,MAAM,EAAEhB,YAAAA,CAAAA,CAAc,EAAEY,aAAaK,OAAO,CAAA;IAEpE,MAAMC,QAAAA,GAAW3B,YAAY,CAACS,YAAAA,CAAa;AAC3C,IAAA,IAAImB,KAAAA,GAAgBnB,YAAAA;AACpB,IAAA,IAAIoB,IAAAA,GAAO,IAAA;AACX,IAAA,IAAIF,QAAAA,EAAU;QACZ,MAAM,EAAExB,iBAAiB,EAAE,GAAGwB,QAAAA;QAC9B,MAAMG,IAAAA,GAAOP,YAAY,CAACd,YAAAA,CAAa;QACvCmB,KAAAA,GAAAA,OAAAA,CAAAA,CAAAA,CAAUzB,iBAAAA,CAAAA;AACV0B,QAAAA,IAAAA,iBAAOE,cAAA,CAAA,aAAA,CAACD,IAAAA,EAAAA,IAAAA,CAAAA;AACV,IAAA;AAEA,IAAA,MAAME,aAAAA,GAAgB,UAAA;AACpB,QAAA,MAAMC,cAAAA,GAAiBhB,YAAAA,CAAaiB,KAAK,CAACzB,YAAAA,CAAa;AAEvD,QAAA,IAAIU,KAAAA,CAAMgB,SAAS,CAACC,YAAY,EAAE;YAChC,MAAMH,cAAAA,CAAeI,KAAK,CAAC;gBACzBC,kBAAAA,EAAoB5B,gBAAAA;gBACpB6B,mBAAAA,EAAqB5B,iBAAAA;gBACrB6B,aAAAA,EAAe3B,YAAAA;AACf4B,gBAAAA,eAAAA,EAAiBtB,KAAAA,CAAMgB,SAAS,CAACC,YAAY,CAACK,eAAe;gBAC7DC,eAAAA,EAAiB5B;AACnB,aAAA,CAAA;QACF,CAAA,MAAO;AACL,YAAA,MAAMmB,cAAAA,CAAeU,SAAS,CAACN,KAAK,CAAC;gBACnCO,sBAAAA,EAAwBhC,oBAAAA;gBACxB4B,aAAAA,EAAe3B,YAAAA;gBACf6B,eAAAA,EAAiB5B;AACnB,aAAA,CAAA;AACF,QAAA;AAEAC,QAAAA,SAAAA,IAAAA;AACF,IAAA,CAAA;AAEA,IAAA,qBACEgB,cAAA,CAAA,aAAA,CAACc,MAAAA,EAAAA;QAAOC,OAAAA,EAASd,aAAAA;QAAee,OAAAA,EAAQ,SAAA;QAAUlB,IAAAA,EAAMA,IAAAA;QAAML,EAAAA,EAAIA;AAC/DI,KAAAA,EAAAA,KAAAA,CAAAA;AAGP;;;;"}

package/dist/esm/packages/web/src/ui/b2b/components/SSOButton.mjs CHANGED Viewed

@@ -3,7 +3,7 @@ import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/ind
 import { useStytch, useConfig } from '../GlobalContextProvider.mjs';
 import { SSOIcon } from '../../../assets/sso.mjs';
 import Button from '../../components/atoms/Button.mjs';
-import { usePresentation } from '../../components/PresentationConfig.mjs';
+import { usePresentation, getButtonId } from '../../components/PresentationConfig.mjs';
 const iconMap = {
     'google-workspace': 'google',
@@ -14,8 +14,9 @@ const SSOButton = ({ connection, onStart })=>{
     const { i18n: $__i18n, _: $__ } = useLingui();
     const stytchClient = useStytch();
     const { ssoOptions } = useConfig();
-    const { iconRegistry } = usePresentation();
+    const { iconRegistry, options } = usePresentation();
     const { connection_id, display_name, identity_provider } = connection;
+    const id = getButtonId(`sso-${display_name}`, options);
     const onButtonClick = ()=>stytchClient.sso.start({
             connection_id,
             signup_redirect_url: ssoOptions?.signupRedirectURL,
@@ -28,7 +29,8 @@ const SSOButton = ({ connection, onStart })=>{
     return /*#__PURE__*/ React__default.createElement(Button, {
         variant: "outline",
         onClick: onButtonClick,
-        icon: /*#__PURE__*/ React__default.createElement(Icon, null)
+        icon: /*#__PURE__*/ React__default.createElement(Icon, null),
+        id: id
     }, $__i18n._({
         id: "provider.continueWith",
         message: "Continue with {display_name}",

package/dist/esm/packages/web/src/ui/b2b/components/SSOButton.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SSOButton.mjs","sources":["../../../../../../../../../web/src/ui/b2b/components/SSOButton.tsx"],"sourcesContent":["import React from 'react';\nimport { SSOActiveConnection } from '@stytch/core/public';\nimport { useLingui } from '@lingui/react/macro';\nimport { useConfig, useStytch } from '../GlobalContextProvider';\nimport { SsoKnownIdp } from '../../../utils/KnownIdp';\n\nimport { SSOIcon } from '../../../assets';\nimport Button from '../../components/atoms/Button';\nimport { usePresentation } from '../../components/PresentationConfig';\nimport type { ssoIcons } from './Icons';\n\ntype SsoIconNames = keyof typeof ssoIcons;\n\nconst iconMap: Record<string, SsoIconNames> = {\n 'google-workspace': 'google',\n 'microsoft-entra': 'microsoft',\n okta: 'okta',\n} satisfies Record<Exclude<SsoKnownIdp, 'generic'>, SsoIconNames>;\n\nexport interface SSOButtonProps {\n connection: SSOActiveConnection;\n onStart?: (connection: SSOActiveConnection) => void;\n}\n\nexport const SSOButton = ({ connection, onStart }: SSOButtonProps) => {\n const { t } = useLingui();\n const stytchClient = useStytch();\n const { ssoOptions } = useConfig();\n const { iconRegistry } = usePresentation();\n\n const { connection_id, display_name, identity_provider } = connection;\n\n const onButtonClick = () =>\n stytchClient.sso\n .start({\n connection_id,\n signup_redirect_url: ssoOptions?.signupRedirectURL,\n login_redirect_url: ssoOptions?.loginRedirectURL,\n })\n .then(() => {\n onStart?.(connection);\n });\n\n const iconName = iconMap[identity_provider];\n const Icon = iconRegistry[iconName] ?? SSOIcon;\n\n return (\n <Button variant=\"outline\" onClick={onButtonClick} icon={<Icon />}>\n {t({ id: 'provider.continueWith', message: `Continue with ${display_name}` })}\n </Button>\n );\n};\n"],"names":["iconMap","okta","SSOButton","connection","onStart","useLingui","stytchClient","useStytch","ssoOptions","useConfig","iconRegistry","usePresentation","connection_id","display_name","identity_provider","onButtonClick","sso","start","signup_redirect_url","signupRedirectURL","login_redirect_url","loginRedirectURL","then","iconName","Icon","SSOIcon","React","Button","variant","onClick","icon"],"mappings":";;;;;;;AAaA,MAAMA,OAAAA,GAAwC;IAC5C,kBAAA,EAAoB,QAAA;IACpB,iBAAA,EAAmB,WAAA;IACnBC,IAAAA,EAAM;AACR,CAAA;MAOaC,SAAAA,GAAY,CAAC,EAAEC,UAAU,EAAEC,OAAO,EAAkB,GAAA;AAC/D,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,MAAMC,YAAAA,GAAeC,SAAAA,EAAAA;IACrB,MAAM,EAAEC,UAAU,EAAE,GAAGC,SAAAA,EAAAA;~~IACvB~~,MAAM,EAAEC,YAAY,EAAE,GAAGC,eAAAA,EAAAA;~~AAEzB~~,IAAA,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAEC,iBAAiB,EAAE,~~GAAGX~~,UAAAA;AAE3D,IAAA,~~MAAMY~~,gBAAgB,~~IACpBT~~,YAAAA,~~CAAaU~~,GAAG,CACbC,KAAK,CAAC;~~AACLL~~,YAAAA,aAAAA;~~AACAM~~,YAAAA,mBAAAA,~~EAAqBV~~,UAAAA,~~EAAYW~~,iBAAAA;AACjCC,YAAAA,kBAAAA,~~EAAoBZ~~,UAAAA,~~EAAYa~~;AAClC,SAAA,CAAA,CACCC,IAAI,CAAC,IAAA;~~YACJlB~~,OAAAA,GAAUD,UAAAA,CAAAA;AACZ,QAAA,CAAA,CAAA;IAEJ,~~MAAMoB~~,QAAAA,~~GAAWvB~~,OAAO,~~CAACc~~,iBAAAA,CAAkB;AAC3C,IAAA,~~MAAMU~~,IAAAA,~~GAAOd~~,YAAY,~~CAACa~~,QAAAA,CAAS,IAAIE,OAAAA;AAEvC,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,MAAAA,EAAAA;QAAOC,OAAAA,EAAQ,SAAA;QAAUC,OAAAA,EAASd,aAAAA;AAAee,QAAAA,IAAAA,gBAAMJ,cAAA,CAAA,aAAA,CAACF,IAAAA,EAAAA,IAAAA;;;;;~~AACKX~~,YAAAA,YAAAA,EAAAA;;;AAGlE;;;;"}
1	+ {"version":3,"file":"SSOButton.mjs","sources":["../../../../../../../../../web/src/ui/b2b/components/SSOButton.tsx"],"sourcesContent":["import React from 'react';\nimport { SSOActiveConnection } from '@stytch/core/public';\nimport { useLingui } from '@lingui/react/macro';\nimport { useConfig, useStytch } from '../GlobalContextProvider';\nimport { SsoKnownIdp } from '../../../utils/KnownIdp';\n\nimport { SSOIcon } from '../../../assets';\nimport Button from '../../components/atoms/Button';\nimport { getButtonId, usePresentation } from '../../components/PresentationConfig';\nimport type { ssoIcons } from './Icons';\n\ntype SsoIconNames = keyof typeof ssoIcons;\n\nconst iconMap: Record<string, SsoIconNames> = {\n 'google-workspace': 'google',\n 'microsoft-entra': 'microsoft',\n okta: 'okta',\n} satisfies Record<Exclude<SsoKnownIdp, 'generic'>, SsoIconNames>;\n\nexport interface SSOButtonProps {\n connection: SSOActiveConnection;\n onStart?: (connection: SSOActiveConnection) => void;\n}\n\nexport const SSOButton = ({ connection, onStart }: SSOButtonProps) => {\n const { t } = useLingui();\n const stytchClient = useStytch();\n const { ssoOptions } = useConfig();\n const { iconRegistry, options } = usePresentation();\n\n const { connection_id, display_name, identity_provider } = connection;\n\n const id = getButtonId(`sso-${display_name}`, options);\n\n const onButtonClick = () =>\n stytchClient.sso\n .start({\n connection_id,\n signup_redirect_url: ssoOptions?.signupRedirectURL,\n login_redirect_url: ssoOptions?.loginRedirectURL,\n })\n .then(() => {\n onStart?.(connection);\n });\n\n const iconName = iconMap[identity_provider];\n const Icon = iconRegistry[iconName] ?? SSOIcon;\n\n return (\n <Button variant=\"outline\" onClick={onButtonClick} icon={<Icon />} id={id}>\n {t({ id: 'provider.continueWith', message: `Continue with ${display_name}` })}\n </Button>\n );\n};\n"],"names":["iconMap","okta","SSOButton","connection","onStart","useLingui","stytchClient","useStytch","ssoOptions","useConfig","iconRegistry","options","usePresentation","connection_id","display_name","identity_provider","id","getButtonId","onButtonClick","sso","start","signup_redirect_url","signupRedirectURL","login_redirect_url","loginRedirectURL","then","iconName","Icon","SSOIcon","React","Button","variant","onClick","icon"],"mappings":";;;;;;;AAaA,MAAMA,OAAAA,GAAwC;IAC5C,kBAAA,EAAoB,QAAA;IACpB,iBAAA,EAAmB,WAAA;IACnBC,IAAAA,EAAM;AACR,CAAA;MAOaC,SAAAA,GAAY,CAAC,EAAEC,UAAU,EAAEC,OAAO,EAAkB,GAAA;AAC/D,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,MAAMC,YAAAA,GAAeC,SAAAA,EAAAA;IACrB,MAAM,EAAEC,UAAU,EAAE,GAAGC,SAAAA,EAAAA;AACvB,IAAA,MAAM,EAAEC,YAAY,EAAEC,OAAO,EAAE,GAAGC,eAAAA,EAAAA;AAElC,IAAA,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAEC,iBAAiB,EAAE,GAAGZ,UAAAA;AAE3D,IAAA,MAAMa,KAAKC,WAAAA,CAAY,CAAC,IAAI,EAAEH,cAAc,EAAEH,OAAAA,CAAAA;AAE9C,IAAA,MAAMO,gBAAgB,IACpBZ,YAAAA,CAAaa,GAAG,CACbC,KAAK,CAAC;AACLP,YAAAA,aAAAA;AACAQ,YAAAA,mBAAAA,EAAqBb,UAAAA,EAAYc,iBAAAA;AACjCC,YAAAA,kBAAAA,EAAoBf,UAAAA,EAAYgB;AAClC,SAAA,CAAA,CACCC,IAAI,CAAC,IAAA;YACJrB,OAAAA,GAAUD,UAAAA,CAAAA;AACZ,QAAA,CAAA,CAAA;IAEJ,MAAMuB,QAAAA,GAAW1B,OAAO,CAACe,iBAAAA,CAAkB;AAC3C,IAAA,MAAMY,IAAAA,GAAOjB,YAAY,CAACgB,QAAAA,CAAS,IAAIE,OAAAA;AAEvC,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,MAAAA,EAAAA;QAAOC,OAAAA,EAAQ,SAAA;QAAUC,OAAAA,EAASd,aAAAA;AAAee,QAAAA,IAAAA,gBAAMJ,cAAA,CAAA,aAAA,CAACF,IAAAA,EAAAA,IAAAA,CAAAA;QAASX,EAAAA,EAAIA;;;;;AACRF,YAAAA,YAAAA,EAAAA;;;AAGlE;;;;"}

package/dist/esm/packages/web/src/ui/b2b/screens/SsoAndOAuthButtons.mjs CHANGED Viewed

@@ -5,11 +5,12 @@ import { MainScreenComponent, AppScreens } from '../types/AppScreens.mjs';
 import { useEffectiveAuthConfig } from '../hooks/useEffectiveAuthConfig.mjs';
 import { useProductComponents } from '../utils.mjs';
 import { assertUnreachable } from '../../../utils/assertUnreachable.mjs';
-import { getButtonId, getSsoMethodKey } from '../types/authMethodKeys.mjs';
+import { getButtonKey, getSsoMethodKey } from '../types/authMethodKeys.mjs';
 import { useLastUsedAuthMethod } from '../hooks/useLastUsedAuthMethod.mjs';
 import Button from '../../components/atoms/Button.mjs';
 import LastUsed from '../../components/molecules/LastUsed.mjs';
 import ButtonColumn from '../../components/molecules/ButtonColumn.mjs';
+import { usePresentation, getButtonId } from '../../components/PresentationConfig.mjs';
 import { AuthFlowType, B2BOAuthProviders } from '../../../../../core/src/public/b2b/ui.mjs';
 import { arrayUtils } from '../../../../../core/src/utils/arrayUtils.mjs';
@@ -38,6 +39,7 @@ const SsoAndOAuthButtons = ({ buttons })=>{
     const { i18n: $__i18n, _: $__ } = useLingui();
     const [state, dispatch] = useGlobalReducer();
     const { oauthProviderSettings = [] } = useEffectiveAuthConfig();
+    const presentation = usePresentation();
     const [lastUsedMethod, setLastUsedMethod] = useLastUsedAuthMethod();
     const config = useConfig();
     const { loginRedirectURL, signupRedirectURL, discoveryRedirectURL, customScopes, providerParams } = config.oauthOptions ?? {};
@@ -65,7 +67,7 @@ const SsoAndOAuthButtons = ({ buttons })=>{
         return null;
     }
     // Reorder providers based on last used
-    const [reorderedButtons, foundLastUsedOAuth] = arrayUtils.moveToFront(authButtons, (button)=>getButtonId(button) === lastUsedMethod);
+    const [reorderedButtons, foundLastUsedOAuth] = arrayUtils.moveToFront(authButtons, (button)=>getButtonKey(button) === lastUsedMethod);
     // Helper function to create OAuth button component
     const createOAuthButton = (oauthProvider)=>{
         const providerProps = {
@@ -104,6 +106,7 @@ const SsoAndOAuthButtons = ({ buttons })=>{
                     return /*#__PURE__*/ React__default.createElement(Button, {
                         key: "sso-discovery",
                         variant: "outline",
+                        id: getButtonId('sso-discovery', presentation.options),
                         onClick: ()=>{
                             dispatch({
                                 type: 'transition',
@@ -120,7 +123,7 @@ const SsoAndOAuthButtons = ({ buttons })=>{
             }
         })();
         return foundLastUsedOAuth && index === 0 ? /*#__PURE__*/ React__default.createElement(LastUsed, {
-            key: getButtonId(button)
+            key: getButtonKey(button)
         }, buttonComponent) : buttonComponent;
     }));
 };

package/dist/esm/packages/web/src/ui/b2b/screens/SsoAndOAuthButtons.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SsoAndOAuthButtons.mjs","sources":["../../../../../../../../../web/src/ui/b2b/screens/SsoAndOAuthButtons.tsx"],"sourcesContent":["import React from 'react';\nimport { B2BOAuthProviders, AuthFlowType } from '@stytch/core/public';\nimport { arrayUtils } from '@stytch/core';\nimport { useLingui } from '@lingui/react/macro';\n\nimport { useConfig, useGlobalReducer } from '../GlobalContextProvider';\nimport { AppScreens, ButtonComponent, MainScreenComponent } from '../types/AppScreens';\nimport { OauthProviderParams, useEffectiveAuthConfig } from '../hooks/useEffectiveAuthConfig';\nimport { useProductComponents } from '../utils';\nimport { assertUnreachable } from '../../../utils/assertUnreachable';\nimport { AuthButton as AuthButtonType, getButtonId, getSsoMethodKey } from '../types/authMethodKeys';\nimport { useLastUsedAuthMethod } from '../hooks/useLastUsedAuthMethod';\nimport Button from '../../components/atoms/Button';\nimport LastUsed from '../../components/molecules/LastUsed';\nimport ButtonColumn from '../../components/molecules/ButtonColumn';\n\n// OAuth helper functions\nexport const getCustomScopesForProvider = (\n oauthProvider: {\n type: B2BOAuthProviders;\n one_tap: boolean;\n customScopes: string[];\n providerParams: Record<string, string>;\n cancel_on_tap_outside?: boolean;\n },\n oauthOptionsCustomScopes: string[] \| undefined,\n) => {\n let currentCustomScopes = oauthProvider.customScopes;\n if (Object.keys(currentCustomScopes).length == 0) {\n currentCustomScopes = oauthOptionsCustomScopes as string[];\n }\n return currentCustomScopes;\n};\n\nexport const getProviderParamsForProvider = (\n oauthProvider: {\n type: B2BOAuthProviders;\n one_tap: boolean;\n customScopes: string[];\n providerParams: Record<string, string>;\n cancel_on_tap_outside?: boolean;\n },\n oauthOptionsProviderParams: Record<string, string> \| undefined,\n email: string \| undefined,\n) => {\n let currentProviderParams = oauthProvider.providerParams;\n if (Object.keys(currentProviderParams).length == 0) {\n currentProviderParams = oauthOptionsProviderParams ?? {};\n }\n\n if (\n email &&\n (oauthProvider.type === B2BOAuthProviders.Google \|\| oauthProvider.type === B2BOAuthProviders.Microsoft) &&\n !('login_hint' in currentProviderParams)\n ) {\n currentProviderParams = {\n ...currentProviderParams,\n login_hint: email,\n };\n }\n\n return currentProviderParams;\n};\n\nexport const SsoAndOAuthButtons = ({ buttons }: { buttons: ButtonComponent[] }) => {\n const { t } = useLingui();\n const [state, dispatch] = useGlobalReducer();\n const { oauthProviderSettings = [] } = useEffectiveAuthConfig();\n\n const [lastUsedMethod, setLastUsedMethod] = useLastUsedAuthMethod();\n\n const config = useConfig();\n const { loginRedirectURL, signupRedirectURL, discoveryRedirectURL, customScopes, providerParams } =\n config.oauthOptions ?? {};\n\n const { B2BGoogleOneTap, OAuthB2BButton, SSOButton } = useProductComponents(config, 'ssoAndOAuthButtons')!;\n\n // Determine which buttons need to be displayed\n const isDiscoveryFlow = state.flowState.type === AuthFlowType.Discovery;\n const authButtons = buttons.flatMap<AuthButtonType>((button) => {\n if (button === MainScreenComponent.OAuthButtons) {\n return oauthProviderSettings.map((provider) => ({ type: 'oauth', provider }));\n } else if (button === MainScreenComponent.SSOButtons) {\n return isDiscoveryFlow\n ? { type: 'sso-discovery' }\n : (state.flowState.organization?.sso_active_connections?.map((connection) => ({ type: 'sso', connection })) ??\n []);\n } else {\n assertUnreachable(button);\n }\n });\n\n if (authButtons.length === 0) {\n return null;\n }\n\n // Reorder providers based on last used\n const [reorderedButtons, foundLastUsedOAuth] = arrayUtils.moveToFront(\n authButtons,\n (button) => getButtonId(button) === lastUsedMethod,\n );\n\n // Helper function to create OAuth button component\n const createOAuthButton = (oauthProvider: OauthProviderParams) => {\n const providerProps = {\n customScopes: getCustomScopesForProvider(oauthProvider, customScopes),\n providerParams: getProviderParamsForProvider(oauthProvider, providerParams, state.primary.email),\n };\n\n if (oauthProvider.one_tap) {\n return (\n <B2BGoogleOneTap\n key={oauthProvider.type}\n {...providerProps}\n cancelOnTapOutside={oauthProvider.cancel_on_tap_outside}\n />\n );\n }\n\n return (\n <OAuthB2BButton\n key={oauthProvider.type}\n providerType={oauthProvider.type}\n loginRedirectUrl={loginRedirectURL}\n signupRedirectUrl={signupRedirectURL}\n discoveryRedirectUrl={discoveryRedirectURL}\n onSuccess={() => setLastUsedMethod(oauthProvider.type)}\n {...providerProps}\n />\n );\n };\n\n return (\n <ButtonColumn>\n {reorderedButtons.map((button, index) => {\n const buttonComponent = (() => {\n switch (button.type) {\n case 'oauth':\n return createOAuthButton(button.provider);\n\n case 'sso':\n return (\n <SSOButton\n key={button.connection.display_name}\n connection={button.connection}\n onStart={() => setLastUsedMethod(getSsoMethodKey(button.connection))}\n />\n );\n\n case 'sso-discovery':\n return (\n <Button\n key=\"sso-discovery\"\n variant=\"outline\"\n onClick={() => {\n dispatch({ type: 'transition', screen: AppScreens.SSODiscoveryEmail, history: 'push' });\n }}\n >\n {t({ id: 'provider.continueWithSSO', message: 'Use single sign-on' })}\n </Button>\n );\n\n default:\n assertUnreachable(button);\n }\n })();\n\n return foundLastUsedOAuth && index === 0 ? (\n <LastUsed key={getButtonId(button)}>{buttonComponent}</LastUsed>\n ) : (\n buttonComponent\n );\n })}\n </ButtonColumn>\n );\n};\n"],"names":["getCustomScopesForProvider","oauthProvider","oauthOptionsCustomScopes","currentCustomScopes","customScopes","Object","keys","length","getProviderParamsForProvider","oauthOptionsProviderParams","email","currentProviderParams","providerParams","type","B2BOAuthProviders","Google","Microsoft","login_hint","SsoAndOAuthButtons","buttons","useLingui","state","dispatch","useGlobalReducer","oauthProviderSettings","useEffectiveAuthConfig","lastUsedMethod","setLastUsedMethod","useLastUsedAuthMethod","config","useConfig","loginRedirectURL","signupRedirectURL","discoveryRedirectURL","oauthOptions","B2BGoogleOneTap","OAuthB2BButton","SSOButton","useProductComponents","isDiscoveryFlow","flowState","AuthFlowType","Discovery","authButtons","flatMap","button","MainScreenComponent","OAuthButtons","map","provider","SSOButtons","organization","sso_active_connections","connection","assertUnreachable","reorderedButtons","foundLastUsedOAuth","arrayUtils","moveToFront","getButtonId","createOAuthButton","providerProps","primary","one_tap","React","key","cancelOnTapOutside","cancel_on_tap_outside","providerType","loginRedirectUrl","signupRedirectUrl","discoveryRedirectUrl","onSuccess","ButtonColumn","index","buttonComponent","display_name","onStart","getSsoMethodKey","Button","variant","onClick","screen","AppScreens","SSODiscoveryEmail","history","LastUsed"],"mappings":"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"}
1	+ {"version":3,"file":"SsoAndOAuthButtons.mjs","sources":["../../../../../../../../../web/src/ui/b2b/screens/SsoAndOAuthButtons.tsx"],"sourcesContent":["import React from 'react';\nimport { B2BOAuthProviders, AuthFlowType } from '@stytch/core/public';\nimport { arrayUtils } from '@stytch/core';\nimport { useLingui } from '@lingui/react/macro';\n\nimport { useConfig, useGlobalReducer } from '../GlobalContextProvider';\nimport { AppScreens, ButtonComponent, MainScreenComponent } from '../types/AppScreens';\nimport { OauthProviderParams, useEffectiveAuthConfig } from '../hooks/useEffectiveAuthConfig';\nimport { useProductComponents } from '../utils';\nimport { assertUnreachable } from '../../../utils/assertUnreachable';\nimport { AuthButton as AuthButtonType, getButtonKey, getSsoMethodKey } from '../types/authMethodKeys';\nimport { useLastUsedAuthMethod } from '../hooks/useLastUsedAuthMethod';\nimport Button from '../../components/atoms/Button';\nimport LastUsed from '../../components/molecules/LastUsed';\nimport ButtonColumn from '../../components/molecules/ButtonColumn';\nimport { getButtonId, usePresentation } from '../../components/PresentationConfig';\n\n// OAuth helper functions\nexport const getCustomScopesForProvider = (\n oauthProvider: {\n type: B2BOAuthProviders;\n one_tap: boolean;\n customScopes: string[];\n providerParams: Record<string, string>;\n cancel_on_tap_outside?: boolean;\n },\n oauthOptionsCustomScopes: string[] \| undefined,\n) => {\n let currentCustomScopes = oauthProvider.customScopes;\n if (Object.keys(currentCustomScopes).length == 0) {\n currentCustomScopes = oauthOptionsCustomScopes as string[];\n }\n return currentCustomScopes;\n};\n\nexport const getProviderParamsForProvider = (\n oauthProvider: {\n type: B2BOAuthProviders;\n one_tap: boolean;\n customScopes: string[];\n providerParams: Record<string, string>;\n cancel_on_tap_outside?: boolean;\n },\n oauthOptionsProviderParams: Record<string, string> \| undefined,\n email: string \| undefined,\n) => {\n let currentProviderParams = oauthProvider.providerParams;\n if (Object.keys(currentProviderParams).length == 0) {\n currentProviderParams = oauthOptionsProviderParams ?? {};\n }\n\n if (\n email &&\n (oauthProvider.type === B2BOAuthProviders.Google \|\| oauthProvider.type === B2BOAuthProviders.Microsoft) &&\n !('login_hint' in currentProviderParams)\n ) {\n currentProviderParams = {\n ...currentProviderParams,\n login_hint: email,\n };\n }\n\n return currentProviderParams;\n};\n\nexport const SsoAndOAuthButtons = ({ buttons }: { buttons: ButtonComponent[] }) => {\n const { t } = useLingui();\n const [state, dispatch] = useGlobalReducer();\n const { oauthProviderSettings = [] } = useEffectiveAuthConfig();\n const presentation = usePresentation();\n\n const [lastUsedMethod, setLastUsedMethod] = useLastUsedAuthMethod();\n\n const config = useConfig();\n const { loginRedirectURL, signupRedirectURL, discoveryRedirectURL, customScopes, providerParams } =\n config.oauthOptions ?? {};\n\n const { B2BGoogleOneTap, OAuthB2BButton, SSOButton } = useProductComponents(config, 'ssoAndOAuthButtons')!;\n\n // Determine which buttons need to be displayed\n const isDiscoveryFlow = state.flowState.type === AuthFlowType.Discovery;\n const authButtons = buttons.flatMap<AuthButtonType>((button) => {\n if (button === MainScreenComponent.OAuthButtons) {\n return oauthProviderSettings.map((provider) => ({ type: 'oauth', provider }));\n } else if (button === MainScreenComponent.SSOButtons) {\n return isDiscoveryFlow\n ? { type: 'sso-discovery' }\n : (state.flowState.organization?.sso_active_connections?.map((connection) => ({ type: 'sso', connection })) ??\n []);\n } else {\n assertUnreachable(button);\n }\n });\n\n if (authButtons.length === 0) {\n return null;\n }\n\n // Reorder providers based on last used\n const [reorderedButtons, foundLastUsedOAuth] = arrayUtils.moveToFront(\n authButtons,\n (button) => getButtonKey(button) === lastUsedMethod,\n );\n\n // Helper function to create OAuth button component\n const createOAuthButton = (oauthProvider: OauthProviderParams) => {\n const providerProps = {\n customScopes: getCustomScopesForProvider(oauthProvider, customScopes),\n providerParams: getProviderParamsForProvider(oauthProvider, providerParams, state.primary.email),\n };\n\n if (oauthProvider.one_tap) {\n return (\n <B2BGoogleOneTap\n key={oauthProvider.type}\n {...providerProps}\n cancelOnTapOutside={oauthProvider.cancel_on_tap_outside}\n />\n );\n }\n\n return (\n <OAuthB2BButton\n key={oauthProvider.type}\n providerType={oauthProvider.type}\n loginRedirectUrl={loginRedirectURL}\n signupRedirectUrl={signupRedirectURL}\n discoveryRedirectUrl={discoveryRedirectURL}\n onSuccess={() => setLastUsedMethod(oauthProvider.type)}\n {...providerProps}\n />\n );\n };\n\n return (\n <ButtonColumn>\n {reorderedButtons.map((button, index) => {\n const buttonComponent = (() => {\n switch (button.type) {\n case 'oauth':\n return createOAuthButton(button.provider);\n\n case 'sso':\n return (\n <SSOButton\n key={button.connection.display_name}\n connection={button.connection}\n onStart={() => setLastUsedMethod(getSsoMethodKey(button.connection))}\n />\n );\n\n case 'sso-discovery':\n return (\n <Button\n key=\"sso-discovery\"\n variant=\"outline\"\n id={getButtonId('sso-discovery', presentation.options)}\n onClick={() => {\n dispatch({ type: 'transition', screen: AppScreens.SSODiscoveryEmail, history: 'push' });\n }}\n >\n {t({ id: 'provider.continueWithSSO', message: 'Use single sign-on' })}\n </Button>\n );\n\n default:\n assertUnreachable(button);\n }\n })();\n\n return foundLastUsedOAuth && index === 0 ? (\n <LastUsed key={getButtonKey(button)}>{buttonComponent}</LastUsed>\n ) : (\n buttonComponent\n );\n })}\n </ButtonColumn>\n );\n};\n"],"names":["getCustomScopesForProvider","oauthProvider","oauthOptionsCustomScopes","currentCustomScopes","customScopes","Object","keys","length","getProviderParamsForProvider","oauthOptionsProviderParams","email","currentProviderParams","providerParams","type","B2BOAuthProviders","Google","Microsoft","login_hint","SsoAndOAuthButtons","buttons","useLingui","state","dispatch","useGlobalReducer","oauthProviderSettings","useEffectiveAuthConfig","presentation","usePresentation","lastUsedMethod","setLastUsedMethod","useLastUsedAuthMethod","config","useConfig","loginRedirectURL","signupRedirectURL","discoveryRedirectURL","oauthOptions","B2BGoogleOneTap","OAuthB2BButton","SSOButton","useProductComponents","isDiscoveryFlow","flowState","AuthFlowType","Discovery","authButtons","flatMap","button","MainScreenComponent","OAuthButtons","map","provider","SSOButtons","organization","sso_active_connections","connection","assertUnreachable","reorderedButtons","foundLastUsedOAuth","arrayUtils","moveToFront","getButtonKey","createOAuthButton","providerProps","primary","one_tap","React","key","cancelOnTapOutside","cancel_on_tap_outside","providerType","loginRedirectUrl","signupRedirectUrl","discoveryRedirectUrl","onSuccess","ButtonColumn","index","buttonComponent","display_name","onStart","getSsoMethodKey","Button","variant","id","getButtonId","options","onClick","screen","AppScreens","SSODiscoveryEmail","history","LastUsed"],"mappings":"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"}

package/dist/esm/packages/web/src/ui/b2b/types/authMethodKeys.mjs CHANGED Viewed

@@ -4,7 +4,7 @@
 function extractConnectionId(method) {
     return method?.startsWith('sso:') ? method.slice(4) : undefined;
 }
-function getButtonId(button) {
+function getButtonKey(button) {
     if (button.type === 'oauth') {
         return button.provider.type;
     } else if (button.type === 'sso') {
@@ -14,5 +14,5 @@ function getButtonId(button) {
     }
 }
-export { extractConnectionId, getButtonId, getSsoMethodKey };
+export { extractConnectionId, getButtonKey, getSsoMethodKey };
 //# sourceMappingURL=authMethodKeys.mjs.map

package/dist/esm/packages/web/src/ui/b2b/types/authMethodKeys.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"authMethodKeys.mjs","sources":["../../../../../../../../../web/src/ui/b2b/types/authMethodKeys.ts"],"sourcesContent":["import { B2BOAuthProviders, SSOActiveConnection } from '@stytch/core/public';\nimport { OauthProviderParams } from '../hooks/useEffectiveAuthConfig';\n\n// This file contains a combined type to identify OAuth providers and SSO connections,\n// used to help with rendering these buttons and storing the last used method.\n// Extracting the logic for generating the key helps make it more consistent\n\nexport type LastUsedMethod = B2BOAuthProviders \| `sso:${string}`;\n\n/* eslint-disable lingui/no-unlocalized-strings */\n\nexport function getSsoMethodKey(method: SSOActiveConnection): LastUsedMethod {\n return `sso:${method.connection_id}`;\n}\n\nexport function extractConnectionId(method: string \| null): string \| undefined {\n return method?.startsWith('sso:') ? method.slice(4) : undefined;\n}\n\nexport type AuthButton =\n \| { type: 'oauth'; provider: OauthProviderParams }\n \| { type: 'sso'; connection: SSOActiveConnection }\n \| { type: 'sso-discovery' };\n\nexport function ~~getButtonId~~(button: AuthButton) {\n if (button.type === 'oauth') {\n return button.provider.type;\n } else if (button.type === 'sso') {\n return getSsoMethodKey(button.connection);\n } else {\n return 'sso-discovery';\n }\n}\n"],"names":["getSsoMethodKey","method","connection_id","extractConnectionId","startsWith","slice","undefined","~~getButtonId~~","button","type","provider","connection"],"mappings":"AASA,mDAEO,SAASA,eAAAA,CAAgBC,MAA2B,EAAA;AACzD,IAAA,OAAO,CAAC,IAAI,EAAEA,MAAAA,CAAOC,aAAa,CAAA,CAAE;AACtC;AAEO,SAASC,oBAAoBF,MAAqB,EAAA;AACvD,IAAA,OAAOA,QAAQG,UAAAA,CAAW,MAAA,CAAA,GAAUH,MAAAA,CAAOI,KAAK,CAAC,CAAA,CAAA,GAAKC,SAAAA;AACxD;AAOO,SAASC,~~YAAYC~~,MAAkB,EAAA;~~IAC5C~~,IAAIA,MAAAA,CAAOC,IAAI,KAAK,OAAA,EAAS;QAC3B,OAAOD,MAAAA,CAAOE,QAAQ,CAACD,IAAI;AAC7B,IAAA,CAAA,MAAO,IAAID,MAAAA,CAAOC,IAAI,KAAK,KAAA,EAAO;QAChC,OAAOT,eAAAA,CAAgBQ,OAAOG,UAAU,CAAA;IAC1C,CAAA,MAAO;QACL,OAAO,eAAA;AACT,IAAA;AACF;;;;"}
1	+ {"version":3,"file":"authMethodKeys.mjs","sources":["../../../../../../../../../web/src/ui/b2b/types/authMethodKeys.ts"],"sourcesContent":["import { B2BOAuthProviders, SSOActiveConnection } from '@stytch/core/public';\nimport { OauthProviderParams } from '../hooks/useEffectiveAuthConfig';\n\n// This file contains a combined type to identify OAuth providers and SSO connections,\n// used to help with rendering these buttons and storing the last used method.\n// Extracting the logic for generating the key helps make it more consistent\n\nexport type LastUsedMethod = B2BOAuthProviders \| `sso:${string}`;\n\n/* eslint-disable lingui/no-unlocalized-strings */\n\nexport function getSsoMethodKey(method: SSOActiveConnection): LastUsedMethod {\n return `sso:${method.connection_id}`;\n}\n\nexport function extractConnectionId(method: string \| null): string \| undefined {\n return method?.startsWith('sso:') ? method.slice(4) : undefined;\n}\n\nexport type AuthButton =\n \| { type: 'oauth'; provider: OauthProviderParams }\n \| { type: 'sso'; connection: SSOActiveConnection }\n \| { type: 'sso-discovery' };\n\nexport function getButtonKey(button: AuthButton) {\n if (button.type === 'oauth') {\n return button.provider.type;\n } else if (button.type === 'sso') {\n return getSsoMethodKey(button.connection);\n } else {\n return 'sso-discovery';\n }\n}\n"],"names":["getSsoMethodKey","method","connection_id","extractConnectionId","startsWith","slice","undefined","getButtonKey","button","type","provider","connection"],"mappings":"AASA,mDAEO,SAASA,eAAAA,CAAgBC,MAA2B,EAAA;AACzD,IAAA,OAAO,CAAC,IAAI,EAAEA,MAAAA,CAAOC,aAAa,CAAA,CAAE;AACtC;AAEO,SAASC,oBAAoBF,MAAqB,EAAA;AACvD,IAAA,OAAOA,QAAQG,UAAAA,CAAW,MAAA,CAAA,GAAUH,MAAAA,CAAOI,KAAK,CAAC,CAAA,CAAA,GAAKC,SAAAA;AACxD;AAOO,SAASC,aAAaC,MAAkB,EAAA;IAC7C,IAAIA,MAAAA,CAAOC,IAAI,KAAK,OAAA,EAAS;QAC3B,OAAOD,MAAAA,CAAOE,QAAQ,CAACD,IAAI;AAC7B,IAAA,CAAA,MAAO,IAAID,MAAAA,CAAOC,IAAI,KAAK,KAAA,EAAO;QAChC,OAAOT,eAAAA,CAAgBQ,OAAOG,UAAU,CAAA;IAC1C,CAAA,MAAO;QACL,OAAO,eAAA;AACT,IAAA;AACF;;;;"}

package/dist/esm/packages/web/src/ui/b2c/components/OAuthButton.mjs CHANGED Viewed

@@ -2,7 +2,7 @@ import React__default from 'react';
 import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
 import { useStytch } from '../GlobalContextProvider.mjs';
 import Button from '../../components/atoms/Button.mjs';
-import { usePresentation } from '../../components/PresentationConfig.mjs';
+import { usePresentation, getButtonId } from '../../components/PresentationConfig.mjs';
 import { OAuthProviders } from '../../../../../core/src/public/ui.mjs';
 const providerInfo = {
@@ -124,7 +124,9 @@ const providerInfo = {
 const OAuthButton = ({ providerType, loginRedirectUrl, signupRedirectUrl, customScopes, providerParams, onSuccess })=>{
     const { i18n: $__i18n, _: $__ } = useLingui();
     const stytchClient = useStytch();
-    const iconRegistry = usePresentation().iconRegistry;
+    const presentation = usePresentation();
+    const iconRegistry = presentation.iconRegistry;
+    const id = getButtonId(`oauth-${providerType}`, presentation.options);
     const provider = providerInfo[providerType];
     let label = providerType;
     let icon = null;
@@ -147,7 +149,8 @@ const OAuthButton = ({ providerType, loginRedirectUrl, signupRedirectUrl, custom
     return /*#__PURE__*/ React__default.createElement(Button, {
         onClick: onButtonClick,
         variant: "outline",
-        icon: icon
+        icon: icon,
+        id: id
     }, label);
 };

package/dist/esm/packages/web/src/ui/b2c/components/OAuthButton.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OAuthButton.mjs","sources":["../../../../../../../../../web/src/ui/b2c/components/OAuthButton.tsx"],"sourcesContent":["import React from 'react';\nimport { MessageDescriptor } from '@lingui/core';\nimport { msg } from '@lingui/core/macro';\nimport { useLingui } from '@lingui/react/macro';\nimport { StringLiteralFromEnum } from '@stytch/core';\nimport { OAuthProviders } from '@stytch/core/public';\nimport { useStytch } from '../GlobalContextProvider';\nimport Button from '../../components/atoms/Button';\nimport { usePresentation } from '../../components/PresentationConfig';\nimport type { oauthIcons } from './Icons';\nimport { IconRegistry } from '../../components/IconRegistry';\n\ninterface ProviderInfo {\n messageDescriptor: MessageDescriptor;\n}\n\nconst providerInfo = {\n [OAuthProviders.Google]: {\n messageDescriptor: msg({ id: 'oauth.continueWithGoogle', message: 'Continue with Google' }),\n },\n [OAuthProviders.Microsoft]: {\n messageDescriptor: msg({ id: 'oauth.continueWithMicrosoft', message: 'Continue with Microsoft' }),\n },\n [OAuthProviders.Apple]: {\n messageDescriptor: msg({ id: 'oauth.continueWithApple', message: 'Continue with Apple' }),\n },\n [OAuthProviders.Github]: {\n messageDescriptor: msg({ id: 'oauth.continueWithGitHub', message: 'Continue with GitHub' }),\n },\n [OAuthProviders.GitLab]: {\n messageDescriptor: msg({ id: 'oauth.continueWithGitLab', message: 'Continue with GitLab' }),\n },\n [OAuthProviders.Facebook]: {\n messageDescriptor: msg({ id: 'oauth.continueWithFacebook', message: 'Continue with Facebook' }),\n },\n [OAuthProviders.Discord]: {\n messageDescriptor: msg({ id: 'oauth.continueWithDiscord', message: 'Continue with Discord' }),\n },\n [OAuthProviders.Salesforce]: {\n messageDescriptor: msg({ id: 'oauth.continueWithSalesforce', message: 'Continue with Salesforce' }),\n },\n [OAuthProviders.Slack]: {\n messageDescriptor: msg({ id: 'oauth.continueWithSlack', message: 'Continue with Slack' }),\n },\n [OAuthProviders.Amazon]: {\n messageDescriptor: msg({ id: 'oauth.continueWithAmazon', message: 'Continue with Amazon' }),\n },\n [OAuthProviders.Bitbucket]: {\n messageDescriptor: msg({ id: 'oauth.continueWithBitbucket', message: 'Continue with Bitbucket' }),\n },\n [OAuthProviders.LinkedIn]: {\n messageDescriptor: msg({ id: 'oauth.continueWithLinkedIn', message: 'Continue with LinkedIn' }),\n },\n [OAuthProviders.Coinbase]: {\n messageDescriptor: msg({ id: 'oauth.continueWithCoinbase', message: 'Continue with Coinbase' }),\n },\n [OAuthProviders.Twitch]: {\n messageDescriptor: msg({ id: 'oauth.continueWithTwitch', message: 'Continue with Twitch' }),\n },\n [OAuthProviders.Twitter]: {\n messageDescriptor: msg({ id: 'oauth.continueWithX', message: 'Continue with X' }),\n },\n [OAuthProviders.TikTok]: {\n messageDescriptor: msg({ id: 'oauth.continueWithTikTok', message: 'Continue with TikTok' }),\n },\n [OAuthProviders.Snapchat]: {\n messageDescriptor: msg({ id: 'oauth.continueWithSnapchat', message: 'Continue with Snapchat' }),\n },\n [OAuthProviders.Figma]: {\n messageDescriptor: msg({ id: 'oauth.continueWithFigma', message: 'Continue with Figma' }),\n },\n [OAuthProviders.Yahoo]: {\n messageDescriptor: msg({ id: 'oauth.continueWithYahoo', message: 'Continue with Yahoo' }),\n },\n} satisfies Record<OAuthProviders, ProviderInfo>;\n\ntype Props = {\n providerType: StringLiteralFromEnum<OAuthProviders>;\n loginRedirectUrl?: string;\n signupRedirectUrl?: string;\n customScopes?: string[];\n providerParams?: Record<string, string>;\n onSuccess?: () => void;\n};\n\nexport const OAuthButton = ({\n providerType,\n loginRedirectUrl,\n signupRedirectUrl,\n customScopes,\n providerParams,\n onSuccess,\n}: Props) => {\n const { t } = useLingui();\n const stytchClient = useStytch();\n const iconRegistry: IconRegistry<keyof typeof oauthIcons> = ~~usePresentation()~~.iconRegistry;\n\n const provider = providerInfo[providerType];\n let label: string = providerType;\n let icon = null;\n if (provider) {\n const { messageDescriptor } = provider;\n\n const iconName = providerType === 'twitter' ? 'xTwitter' : providerType;\n const Icon = iconRegistry[iconName];\n\n label = t(messageDescriptor);\n icon = <Icon />;\n }\n\n const onButtonClick = async () => {\n await stytchClient.oauth[providerType].start({\n login_redirect_url: loginRedirectUrl,\n signup_redirect_url: signupRedirectUrl,\n custom_scopes: customScopes,\n provider_params: providerParams,\n });\n onSuccess?.();\n };\n\n return (\n <Button onClick={onButtonClick} variant=\"outline\" icon={icon}>\n {label}\n </Button>\n );\n};\n"],"names":["providerInfo","OAuthProviders","Google","messageDescriptor","Microsoft","Apple","Github","GitLab","Facebook","Discord","Salesforce","Slack","Amazon","Bitbucket","LinkedIn","Coinbase","Twitch","Twitter","TikTok","Snapchat","Figma","Yahoo","OAuthButton","providerType","loginRedirectUrl","signupRedirectUrl","customScopes","providerParams","onSuccess","useLingui","stytchClient","useStytch","~~iconRegistry~~","usePresentation","provider","label","icon","iconName","Icon","React","onButtonClick","oauth","start","login_redirect_url","signup_redirect_url","custom_scopes","provider_params","Button","onClick","variant"],"mappings":";;;;;;;AAgBA,MAAMA,YAAAA,GAAe;IACnB,CAACC,cAAAA,CAAeC,MAAM,GAAG;QACvBC,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,cAAAA,CAAeG,SAAS,GAAG;QAC1BD,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,cAAAA,CAAeI,KAAK,GAAG;QACtBF,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,cAAAA,CAAeK,MAAM,GAAG;QACvBH,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,cAAAA,CAAeM,MAAM,GAAG;QACvBJ,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,cAAAA,CAAeO,QAAQ,GAAG;QACzBL,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,cAAAA,CAAeQ,OAAO,GAAG;QACxBN,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,cAAAA,CAAeS,UAAU,GAAG;QAC3BP,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,cAAAA,CAAeU,KAAK,GAAG;QACtBR,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,cAAAA,CAAeW,MAAM,GAAG;QACvBT,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,cAAAA,CAAeY,SAAS,GAAG;QAC1BV,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,cAAAA,CAAea,QAAQ,GAAG;QACzBX,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,cAAAA,CAAec,QAAQ,GAAG;QACzBZ,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,cAAAA,CAAee,MAAM,GAAG;QACvBb,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,cAAAA,CAAegB,OAAO,GAAG;QACxBd,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,cAAAA,CAAeiB,MAAM,GAAG;QACvBf,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,cAAAA,CAAekB,QAAQ,GAAG;QACzBhB,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,cAAAA,CAAemB,KAAK,GAAG;QACtBjB,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,cAAAA,CAAeoB,KAAK,GAAG;QACtBlB,iBAAiB,EAAA;;;;AACnB;AACF,CAAA;AAWO,MAAMmB,WAAAA,GAAc,CAAC,EAC1BC,YAAY,EACZC,gBAAgB,EAChBC,iBAAiB,EACjBC,YAAY,EACZC,cAAc,EACdC,SAAS,EACH,GAAA;AACN,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,MAAMC,YAAAA,GAAeC,SAAAA,EAAAA;IACrB,MAAMC,YAAAA,~~GAAsDC~~,~~kBAAkBD~~,YAAY;~~IAE1F~~,~~MAAME~~,QAAAA,~~GAAWlC~~,YAAY,CAACuB,YAAAA,CAAa;AAC3C,IAAA,~~IAAIY~~,KAAAA,~~GAAgBZ~~,YAAAA;AACpB,IAAA,~~IAAIa~~,IAAAA,GAAO,IAAA;AACX,IAAA,IAAIF,QAAAA,EAAU;QACZ,MAAM,~~EAAE/B~~,iBAAiB,EAAE,~~GAAG+B~~,QAAAA;QAE9B,MAAMG,QAAAA,~~GAAWd~~,YAAAA,KAAiB,SAAA,GAAY,UAAA,GAAaA,YAAAA;QAC3D,~~MAAMe~~,IAAAA,~~GAAON~~,YAAY,~~CAACK~~,QAAAA,CAAS;QAEnCF,KAAAA,GAAAA,OAAAA,CAAAA,CAAAA,~~CAAUhC~~,iBAAAA,CAAAA;~~AACViC~~,QAAAA,IAAAA,iBAAOG,cAAA,CAAA,aAAA,CAACD,IAAAA,EAAAA,IAAAA,CAAAA;AACV,IAAA;AAEA,IAAA,MAAME,aAAAA,GAAgB,UAAA;AACpB,QAAA,~~MAAMV~~,~~aAAaW~~,KAAK,~~CAAClB~~,YAAAA,CAAa,~~CAACmB~~,KAAK,CAAC;YAC3CC,kBAAAA,~~EAAoBnB~~,gBAAAA;~~YACpBoB~~,mBAAAA,~~EAAqBnB~~,iBAAAA;~~YACrBoB~~,aAAAA,~~EAAenB~~,YAAAA;~~YACfoB~~,eAAAA,~~EAAiBnB~~;AACnB,SAAA,CAAA;AACAC,QAAAA,SAAAA,IAAAA;AACF,IAAA,CAAA;AAEA,IAAA,~~qBACEW~~,cAAA,CAAA,aAAA,CAACQ,MAAAA,EAAAA;QAAOC,OAAAA,EAASR,aAAAA;QAAeS,OAAAA,EAAQ,SAAA;QAAUb,IAAAA,EAAMA;~~AACrDD~~,KAAAA,EAAAA,KAAAA,CAAAA;AAGP;;;;"}
1	+ {"version":3,"file":"OAuthButton.mjs","sources":["../../../../../../../../../web/src/ui/b2c/components/OAuthButton.tsx"],"sourcesContent":["import React from 'react';\nimport { MessageDescriptor } from '@lingui/core';\nimport { msg } from '@lingui/core/macro';\nimport { useLingui } from '@lingui/react/macro';\nimport { StringLiteralFromEnum } from '@stytch/core';\nimport { OAuthProviders } from '@stytch/core/public';\nimport { useStytch } from '../GlobalContextProvider';\nimport Button from '../../components/atoms/Button';\nimport { getButtonId, usePresentation } from '../../components/PresentationConfig';\nimport type { oauthIcons } from './Icons';\nimport { IconRegistry } from '../../components/IconRegistry';\n\ninterface ProviderInfo {\n messageDescriptor: MessageDescriptor;\n}\n\nconst providerInfo = {\n [OAuthProviders.Google]: {\n messageDescriptor: msg({ id: 'oauth.continueWithGoogle', message: 'Continue with Google' }),\n },\n [OAuthProviders.Microsoft]: {\n messageDescriptor: msg({ id: 'oauth.continueWithMicrosoft', message: 'Continue with Microsoft' }),\n },\n [OAuthProviders.Apple]: {\n messageDescriptor: msg({ id: 'oauth.continueWithApple', message: 'Continue with Apple' }),\n },\n [OAuthProviders.Github]: {\n messageDescriptor: msg({ id: 'oauth.continueWithGitHub', message: 'Continue with GitHub' }),\n },\n [OAuthProviders.GitLab]: {\n messageDescriptor: msg({ id: 'oauth.continueWithGitLab', message: 'Continue with GitLab' }),\n },\n [OAuthProviders.Facebook]: {\n messageDescriptor: msg({ id: 'oauth.continueWithFacebook', message: 'Continue with Facebook' }),\n },\n [OAuthProviders.Discord]: {\n messageDescriptor: msg({ id: 'oauth.continueWithDiscord', message: 'Continue with Discord' }),\n },\n [OAuthProviders.Salesforce]: {\n messageDescriptor: msg({ id: 'oauth.continueWithSalesforce', message: 'Continue with Salesforce' }),\n },\n [OAuthProviders.Slack]: {\n messageDescriptor: msg({ id: 'oauth.continueWithSlack', message: 'Continue with Slack' }),\n },\n [OAuthProviders.Amazon]: {\n messageDescriptor: msg({ id: 'oauth.continueWithAmazon', message: 'Continue with Amazon' }),\n },\n [OAuthProviders.Bitbucket]: {\n messageDescriptor: msg({ id: 'oauth.continueWithBitbucket', message: 'Continue with Bitbucket' }),\n },\n [OAuthProviders.LinkedIn]: {\n messageDescriptor: msg({ id: 'oauth.continueWithLinkedIn', message: 'Continue with LinkedIn' }),\n },\n [OAuthProviders.Coinbase]: {\n messageDescriptor: msg({ id: 'oauth.continueWithCoinbase', message: 'Continue with Coinbase' }),\n },\n [OAuthProviders.Twitch]: {\n messageDescriptor: msg({ id: 'oauth.continueWithTwitch', message: 'Continue with Twitch' }),\n },\n [OAuthProviders.Twitter]: {\n messageDescriptor: msg({ id: 'oauth.continueWithX', message: 'Continue with X' }),\n },\n [OAuthProviders.TikTok]: {\n messageDescriptor: msg({ id: 'oauth.continueWithTikTok', message: 'Continue with TikTok' }),\n },\n [OAuthProviders.Snapchat]: {\n messageDescriptor: msg({ id: 'oauth.continueWithSnapchat', message: 'Continue with Snapchat' }),\n },\n [OAuthProviders.Figma]: {\n messageDescriptor: msg({ id: 'oauth.continueWithFigma', message: 'Continue with Figma' }),\n },\n [OAuthProviders.Yahoo]: {\n messageDescriptor: msg({ id: 'oauth.continueWithYahoo', message: 'Continue with Yahoo' }),\n },\n} satisfies Record<OAuthProviders, ProviderInfo>;\n\ntype Props = {\n providerType: StringLiteralFromEnum<OAuthProviders>;\n loginRedirectUrl?: string;\n signupRedirectUrl?: string;\n customScopes?: string[];\n providerParams?: Record<string, string>;\n onSuccess?: () => void;\n};\n\nexport const OAuthButton = ({\n providerType,\n loginRedirectUrl,\n signupRedirectUrl,\n customScopes,\n providerParams,\n onSuccess,\n}: Props) => {\n const { t } = useLingui();\n const stytchClient = useStytch();\n const presentation = usePresentation();\n const iconRegistry: IconRegistry<keyof typeof oauthIcons> = presentation.iconRegistry;\n const id = getButtonId(`oauth-${providerType}`, presentation.options);\n\n const provider = providerInfo[providerType];\n let label: string = providerType;\n let icon = null;\n if (provider) {\n const { messageDescriptor } = provider;\n\n const iconName = providerType === 'twitter' ? 'xTwitter' : providerType;\n const Icon = iconRegistry[iconName];\n\n label = t(messageDescriptor);\n icon = <Icon />;\n }\n\n const onButtonClick = async () => {\n await stytchClient.oauth[providerType].start({\n login_redirect_url: loginRedirectUrl,\n signup_redirect_url: signupRedirectUrl,\n custom_scopes: customScopes,\n provider_params: providerParams,\n });\n onSuccess?.();\n };\n\n return (\n <Button onClick={onButtonClick} variant=\"outline\" icon={icon} id={id}>\n {label}\n </Button>\n );\n};\n"],"names":["providerInfo","OAuthProviders","Google","messageDescriptor","Microsoft","Apple","Github","GitLab","Facebook","Discord","Salesforce","Slack","Amazon","Bitbucket","LinkedIn","Coinbase","Twitch","Twitter","TikTok","Snapchat","Figma","Yahoo","OAuthButton","providerType","loginRedirectUrl","signupRedirectUrl","customScopes","providerParams","onSuccess","useLingui","stytchClient","useStytch","presentation","usePresentation","iconRegistry","id","getButtonId","options","provider","label","icon","iconName","Icon","React","onButtonClick","oauth","start","login_redirect_url","signup_redirect_url","custom_scopes","provider_params","Button","onClick","variant"],"mappings":"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"}

package/dist/esm/packages/web/src/ui/b2c/screens/Crypto/SetupNewWallet.mjs CHANGED Viewed

@@ -5,22 +5,19 @@ import Column from '../../../components/atoms/Column.mjs';
 import TextColumn from '../../../components/molecules/TextColumn.mjs';
 import Button, { ButtonAnchor } from '../../../components/atoms/Button.mjs';
 import ButtonColumn from '../../../components/molecules/ButtonColumn.mjs';
-import { useCryptoIcon } from '../../../../utils/crypto.mjs';
+import { useCryptoButtonProps, WalletToText } from '../../../../utils/crypto.mjs';
 import { Wallets } from '../../../../../../core/src/public/ui.mjs';
-const commonButtonProps = {
-    variant: 'outline',
-    target: '_blank',
-    rel: 'noreferrer'
-};
 const SetupNewWallet = ()=>{
     const { i18n: $__i18n, _: $__ } = useLingui();
     const [, dispatch] = useGlobalReducer();
-    const getCryptoIcon = useCryptoIcon();
-    const MetamaskIcon = getCryptoIcon(Wallets.Metamask);
-    const PhantomIcon = getCryptoIcon(Wallets.Phantom);
-    const CoinbaseIcon = getCryptoIcon(Wallets.Coinbase);
-    const BinanceIcon = getCryptoIcon(Wallets.Binance);
+    const { getIcon, getId } = useCryptoButtonProps();
+    const walletsToRender = [
+        Wallets.Metamask,
+        Wallets.Phantom,
+        Wallets.Coinbase,
+        Wallets.Binance
+    ];
     return /*#__PURE__*/ React__default.createElement(Column, {
         gap: 6
     }, /*#__PURE__*/ React__default.createElement(TextColumn, {
@@ -36,35 +33,18 @@ const SetupNewWallet = ()=>{
             id: "crypto.setupNewWallet.instruction",
             message: "We’ve included a few examples of wallet extensions you can find below. Once you’ve set up your wallet, click “Go back” to use it and sign in."
         })
-    }), /*#__PURE__*/ React__default.createElement(ButtonColumn, null, /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
-        ...commonButtonProps,
-        icon: /*#__PURE__*/ React__default.createElement(MetamaskIcon, null),
-        href: "https://metamask.io/"
-    }, $__i18n._({
-        id: "crypto.wallet.metamask",
-        message: "Metamask"
-    })), /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
-        ...commonButtonProps,
-        icon: /*#__PURE__*/ React__default.createElement(PhantomIcon, null),
-        href: "https://phantom.com/"
-    }, $__i18n._({
-        id: "crypto.wallet.phantom",
-        message: "Phantom"
-    })), /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
-        ...commonButtonProps,
-        icon: /*#__PURE__*/ React__default.createElement(CoinbaseIcon, null),
-        href: "https://www.coinbase.com/wallet"
-    }, $__i18n._({
-        id: "crypto.wallet.coinbase",
-        message: "Coinbase"
-    })), /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
-        ...commonButtonProps,
-        icon: /*#__PURE__*/ React__default.createElement(BinanceIcon, null),
-        href: "https://web3.binance.com/en/about"
-    }, $__i18n._({
-        id: "crypto.wallet.binance",
-        message: "Binance"
-    })), /*#__PURE__*/ React__default.createElement(Button, {
+    }), /*#__PURE__*/ React__default.createElement(ButtonColumn, null, walletsToRender.map((wallet)=>{
+        const Icon = getIcon(wallet);
+        return /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
+            key: wallet,
+            variant: "outline",
+            target: "_blank",
+            rel: "noreferrer",
+            icon: /*#__PURE__*/ React__default.createElement(Icon, null),
+            href: "https://metamask.io/",
+            id: getId(wallet)
+        }, $__i18n._(WalletToText[wallet]));
+    }), /*#__PURE__*/ React__default.createElement(Button, {
         variant: "primary",
         onClick: ()=>dispatch({
                 type: 'transition',

package/dist/esm/packages/web/src/ui/b2c/screens/Crypto/SetupNewWallet.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SetupNewWallet.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Crypto/SetupNewWallet.tsx"],"sourcesContent":["import React from 'react';\nimport { useLingui } from '@lingui/react/macro';\nimport { Wallets } from '@stytch/core/public';\nimport { AppScreens, useGlobalReducer } from '../../GlobalContextProvider';\nimport Column from '../../../components/atoms/Column';\nimport TextColumn from '../../../components/molecules/TextColumn';\nimport Button, { ButtonAnchor } from '../../../components/atoms/Button';\nimport ButtonColumn from '../../../components/molecules/ButtonColumn';\nimport { ~~useCryptoIcon~~ } from '../../../../utils/crypto';\n\~~nconst commonButtonProps = {\n variant: 'outline',\n target: '_blank',\n rel: 'noreferrer',\n} as const;\n\~~nexport const SetupNewWallet = () => {\n const { t } = useLingui();\n const [, dispatch] = useGlobalReducer();\n\n const ~~getCryptoIcon~~ = ~~useCryptoIcon~~();\n const ~~MetamaskIcon~~ = ~~getCryptoIcon(~~Wallets.Metamask~~);\n const~~ ~~PhantomIcon = getCryptoIcon(~~Wallets.Phantom~~);\n const~~ ~~CoinbaseIcon = getCryptoIcon(~~Wallets.Coinbase~~);\n const~~ ~~BinanceIcon = getCryptoIcon(~~Wallets.Binance);\n\n return (\n <Column gap={6}>\n <TextColumn\n header={t({ id: 'crypto.setupNewWallet.title', message: 'Set up a new crypto wallet' })}\n body={t({\n id: 'crypto.setupNewWallet.content',\n message: 'Get started by downloading any Ethereum or Solana wallet.',\n })}\n helper={t({\n id: 'crypto.setupNewWallet.instruction',\n message:\n 'We’ve included a few examples of wallet extensions you can find below. Once you’ve set up your wallet, click “Go back” to use it and sign in.',\n })}\n />\n\n <ButtonColumn>\n ~~<ButtonAnchor~~ {~~...commonButtonProps}~~ ~~icon=~~{~~<MetamaskIcon />} href=\"https://metamask.io/\">\~~n ~~{t({~~ ~~id:~~ ~~'crypto.~~wallet~~.metamask',~~ ~~message: 'Metamask' })}~~\n </ButtonAnchor>\n ~~<ButtonAnchor {...commonButtonProps} icon~~={~~<PhantomIcon />~~} ~~href~~=\"~~https://phantom.com/\~~">\n ~~{t({ id: 'crypto.wallet.phantom', message: 'Phantom' })}~~\n ~~</ButtonAnchor>\n~~\n ~~<ButtonAnchor {...commonButtonProps}~~ icon={<~~CoinbaseIcon~~ />} href=\"https://~~www~~.~~coinbase.com/wallet~~\~~">\~~n {t(~~{ id: 'crypto.~~wallet~~.coinbase', message: 'Coinbase' }~~)}\n ~~</ButtonAnchor~~>\n~~\n <ButtonAnchor~~ {~~...commonButtonProps} icon={<BinanceIcon />} href=\"https://web3.binance.com/en/about\">\n {~~t(~~{ id: 'crypto.~~wallet~~.binance', message: 'Binance' }~~)}\n </ButtonAnchor>\n\n <Button variant=\"primary\" onClick={() => dispatch({ type: 'transition', screen: AppScreens.Main })}>\n {t({ id: 'button.goBack', message: 'Go back' })}\n </Button>\n </ButtonColumn>\n </Column>\n );\n};\n"],"names":["~~commonButtonProps~~","~~variant~~","~~target~~","~~rel~~","~~SetupNewWallet~~","~~useLingui~~","~~dispatch~~","~~useGlobalReducer~~","~~getCryptoIcon~~","~~useCryptoIcon~~","~~MetamaskIcon~~","~~Wallets~~","~~Metamask~~","~~PhantomIcon~~","~~Phantom~~","~~CoinbaseIcon~~","~~Coinbase~~","~~BinanceIcon~~","~~Binance~~","~~React~~","~~Column~~","~~gap~~","~~TextColumn~~","~~header~~","~~body~~","~~helper~~","~~ButtonColumn~~","~~ButtonAnchor~~","icon","href","Button","onClick","type","screen","AppScreens","Main"],"mappings":";;;;;;;;;;~~AAUA~~,~~MAAMA,iBAAAA,GAAoB;IACxBC,OAAAA,EAAS,SAAA;IACTC,MAAAA,EAAQ,QAAA;IACRC,GAAAA,EAAK;AACP,CAAA;MAEaC,~~cAAAA,GAAiB,IAAA;AAC5B,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;IACd,MAAM,GAAGC,SAAS,GAAGC,gBAAAA,EAAAA;AAErB,IAAA,~~MAAMC~~,~~aAAAA~~,~~GAAgBC~~,~~aAAAA~~,EAAAA;~~IACtB~~,MAAMC,~~YAAAA~~,~~GAAeF~~,~~aAAAA~~,~~CAAcG,~~OAAAA,CAAQC,QAAQ~~,CAAA~~;~~IACnD~~,~~MAAMC~~,~~WAAAA,GAAcL,aAAAA,CAAcG,~~OAAAA,~~CAAQG~~,OAAO~~,CAAA~~;~~IACjD~~,~~MAAMC~~,~~YAAAA,GAAeP,aAAAA,CAAcG,~~OAAAA,~~CAAQK~~,QAAQ~~,CAAA~~;~~IACnD~~,~~MAAMC~~,~~WAAAA,GAAcT,aAAAA,CAAcG,~~OAAAA,~~CAAQO~~,~~OAAO,CAAA~~;~~AAEjD~~,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,MAAAA,EAAAA;QAAOC,GAAAA,EAAK;qBACXF,cAAA,CAAA,aAAA,CAACG,UAAAA,EAAAA;QACCC,MAAM,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACNC,IAAI,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QAIJC,MAAM,EAAA,OAAA,CAAA,CAAA,CAAA;;;;AAOR,KAAA,CAAA,gBAAAN,cAAA,CAAA,aAAA,CAACO,~~kCACCP,cAAA,CAAA,aAAA,CAACQ,~~YAAAA,EAAAA~~;AAAc~~,~~QAAA,GAAG3B,iBAAiB;AAAE4B,QAAAA,~~IAAAA,~~gBAAMT~~,~~cAAA~~,~~CAAA~~,~~aAAA~~,~~CAACT~~,~~YAAAA~~,~~EAAAA~~,~~IAAAA,CAAAA~~;~~QAAiBmB~~,~~IAAAA~~,~~EAAK;;;;uBAGlEV~~,~~cAAA~~,~~CAAA~~,~~aAAA~~,~~CAACQ~~,~~YAAAA,EAAAA~~;~~AAAc~~,QAAA,~~GAAG3B~~,~~iBAAiB;AAAE4B,QAAAA,IAAAA,gBAAMT,~~cAAA,CAAA,aAAA,~~CAACN~~,~~WAAAA~~,EAAAA~~,IAAAA,CAAAA~~;~~QAAgBgB~~,~~IAAAA~~,~~EAAK;;;;uBAIjEV~~,~~cAAA~~,~~CAAA~~,~~aAAA~~,~~CAACQ~~,~~YAAAA~~,~~EAAAA;AAAc~~,QAAA,~~GAAG3B~~,~~iBAAiB~~;~~AAAE4B~~,~~QAAAA~~,IAAAA,~~gBAAMT~~,cAAA,CAAA,aAAA,~~CAACJ~~,~~YAAAA~~,EAAAA,IAAAA,CAAAA;~~QAAiBc~~,IAAAA,EAAK~~;;;;uBAIlEV~~,~~cAAA~~,~~CAAA,aAAA,CAACQ,~~YAAAA,EAAAA~~;AAAc~~,~~QAAA~~,~~GAAG3B~~,~~iBAAiB~~;~~AAAE4B~~,~~QAAAA~~,~~IAAAA~~,~~gBAAMT~~,~~cAAA~~,~~CAAA~~,~~aAAA~~,~~CAACF~~,~~WAAAA~~,~~EAAAA~~,~~IAAAA~~,~~CAAAA~~;~~QAAgBY~~,~~IAAAA~~,~~EAAK;;;;uBAIjEV~~,cAAA,CAAA,aAAA,~~CAACW~~,MAAAA,EAAAA;~~QAAO7B~~,OAAAA,EAAQ,SAAA;~~AAAU8B~~,QAAAA,OAAAA,EAAS,~~IAAMzB~~,QAAAA,CAAS;~~gBAAE0B~~,IAAAA,EAAM,YAAA;AAAcC,gBAAAA,MAAAA,EAAQC,WAAWC;AAAK,aAAA;;;;;AAMxG;;;;"}
1	+ {"version":3,"file":"SetupNewWallet.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Crypto/SetupNewWallet.tsx"],"sourcesContent":["import React from 'react';\nimport { useLingui } from '@lingui/react/macro';\nimport { Wallets } from '@stytch/core/public';\nimport { AppScreens, useGlobalReducer } from '../../GlobalContextProvider';\nimport Column from '../../../components/atoms/Column';\nimport TextColumn from '../../../components/molecules/TextColumn';\nimport Button, { ButtonAnchor } from '../../../components/atoms/Button';\nimport ButtonColumn from '../../../components/molecules/ButtonColumn';\nimport { useCryptoButtonProps, WalletToText } from '../../../../utils/crypto';\n\nexport const SetupNewWallet = () => {\n const { t } = useLingui();\n const [, dispatch] = useGlobalReducer();\n\n const { getIcon, getId } = useCryptoButtonProps();\n const walletsToRender = [Wallets.Metamask, Wallets.Phantom, Wallets.Coinbase, Wallets.Binance];\n\n return (\n <Column gap={6}>\n <TextColumn\n header={t({ id: 'crypto.setupNewWallet.title', message: 'Set up a new crypto wallet' })}\n body={t({\n id: 'crypto.setupNewWallet.content',\n message: 'Get started by downloading any Ethereum or Solana wallet.',\n })}\n helper={t({\n id: 'crypto.setupNewWallet.instruction',\n message:\n 'We’ve included a few examples of wallet extensions you can find below. Once you’ve set up your wallet, click “Go back” to use it and sign in.',\n })}\n />\n\n <ButtonColumn>\n {walletsToRender.map((wallet) => {\n const Icon = getIcon(wallet);\n return (\n <ButtonAnchor\n key={wallet}\n variant=\"outline\"\n target=\"_blank\"\n rel=\"noreferrer\"\n icon={<Icon />}\n href=\"https://metamask.io/\"\n id={getId(wallet)}\n >\n {t(WalletToText[wallet])}\n </ButtonAnchor>\n );\n })}\n\n <Button variant=\"primary\" onClick={() => dispatch({ type: 'transition', screen: AppScreens.Main })}>\n {t({ id: 'button.goBack', message: 'Go back' })}\n </Button>\n </ButtonColumn>\n </Column>\n );\n};\n"],"names":["SetupNewWallet","useLingui","dispatch","useGlobalReducer","getIcon","getId","useCryptoButtonProps","walletsToRender","Wallets","Metamask","Phantom","Coinbase","Binance","React","Column","gap","TextColumn","header","body","helper","ButtonColumn","map","wallet","Icon","ButtonAnchor","key","variant","target","rel","icon","href","id","WalletToText","Button","onClick","type","screen","AppScreens","Main"],"mappings":";;;;;;;;;;MAUaA,cAAAA,GAAiB,IAAA;AAC5B,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;IACd,MAAM,GAAGC,SAAS,GAAGC,gBAAAA,EAAAA;AAErB,IAAA,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,oBAAAA,EAAAA;AAC3B,IAAA,MAAMC,eAAAA,GAAkB;AAACC,QAAAA,OAAAA,CAAQC,QAAQ;AAAED,QAAAA,OAAAA,CAAQE,OAAO;AAAEF,QAAAA,OAAAA,CAAQG,QAAQ;AAAEH,QAAAA,OAAAA,CAAQI;AAAQ,KAAA;AAE9F,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,MAAAA,EAAAA;QAAOC,GAAAA,EAAK;qBACXF,cAAA,CAAA,aAAA,CAACG,UAAAA,EAAAA;QACCC,MAAM,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACNC,IAAI,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QAIJC,MAAM,EAAA,OAAA,CAAA,CAAA,CAAA;;;;AAOR,KAAA,CAAA,gBAAAN,cAAA,CAAA,aAAA,CAACO,YAAAA,EAAAA,IAAAA,EACEb,eAAAA,CAAgBc,GAAG,CAAC,CAACC,MAAAA,GAAAA;AACpB,QAAA,MAAMC,OAAOnB,OAAAA,CAAQkB,MAAAA,CAAAA;AACrB,QAAA,qBACET,cAAA,CAAA,aAAA,CAACW,YAAAA,EAAAA;YACCC,GAAAA,EAAKH,MAAAA;YACLI,OAAAA,EAAQ,SAAA;YACRC,MAAAA,EAAO,QAAA;YACPC,GAAAA,EAAI,YAAA;AACJC,YAAAA,IAAAA,gBAAMhB,cAAA,CAAA,aAAA,CAACU,IAAAA,EAAAA,IAAAA,CAAAA;YACPO,IAAAA,EAAK,sBAAA;AACLC,YAAAA,EAAAA,EAAI1B,KAAAA,CAAMiB,MAAAA;AAEPU,SAAAA,EAAAA,OAAAA,CAAAA,CAAAA,CAAAA,YAAY,CAACV,MAAAA,CAAO,CAAA,CAAA;AAG7B,IAAA,CAAA,CAAA,gBAEAT,cAAA,CAAA,aAAA,CAACoB,MAAAA,EAAAA;QAAOP,OAAAA,EAAQ,SAAA;AAAUQ,QAAAA,OAAAA,EAAS,IAAMhC,QAAAA,CAAS;gBAAEiC,IAAAA,EAAM,YAAA;AAAcC,gBAAAA,MAAAA,EAAQC,WAAWC;AAAK,aAAA;;;;;AAMxG;;;;"}

package/dist/esm/packages/web/src/ui/b2c/screens/Crypto/WalletButtons.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useLingui } from '../../../../../../../node_modules/@lingui/react/dist/index.mjs';
 import { useGlobalReducer, useConfig, AppScreens } from '../../GlobalContextProvider.mjs';
-import { useCryptoIcon, isWalletVisible, WalletToText } from '../../../../utils/crypto.mjs';
+import { useCryptoButtonProps, isWalletVisible, WalletToText } from '../../../../utils/crypto.mjs';
 import ButtonColumn from '../../../components/molecules/ButtonColumn.mjs';
 import Button from '../../../components/atoms/Button.mjs';
 import { GenericWalletIcon } from '../../../../assets/genericWallet.mjs';
@@ -38,7 +38,7 @@ const CryptoWalletButtons = ({ type })=>{
     const { i18n: $__i18n, _: $__ } = useLingui();
     const [state, dispatch] = useGlobalReducer();
     const config = useConfig();
-    const getCryptoIcon = useCryptoIcon();
+    const { getIcon, getId } = useCryptoButtonProps();
     const oAuthOptions = config.oauthOptions?.providers.length ?? 0;
     // Crypto Buttons on screen = Maximum Buttons - OAuth Buttons - 1 (Other crypto or set up new wallet)
     const cryptoButtonsOnMainScreen = MAX_BUTTONS - oAuthOptions - 1;
@@ -62,12 +62,13 @@ const CryptoWalletButtons = ({ type })=>{
     const walletsToRender = type === 'main' ? mainWallets : otherWallet;
     return /*#__PURE__*/ React.createElement(ButtonColumn, null, walletsToRender.map((wallet)=>{
         const walletEnum = Wallets[wallet];
-        const Icon = getCryptoIcon(walletEnum);
+        const Icon = getIcon(walletEnum);
         return /*#__PURE__*/ React.createElement(Button, {
             key: wallet,
             variant: "outline",
             icon: /*#__PURE__*/ React.createElement(Icon, null),
-            onClick: ()=>onWalletStart(walletEnum)
+            onClick: ()=>onWalletStart(walletEnum),
+            id: getId(walletEnum)
         }, type === 'main' ? $__i18n._(walletMessages[walletEnum]) : $__i18n._(WalletToText[walletEnum]));
     }), renderOtherScreenButton && type === 'main' ? /*#__PURE__*/ React.createElement(Button, {
         variant: "outline",
@@ -75,7 +76,8 @@ const CryptoWalletButtons = ({ type })=>{
         onClick: ()=>dispatch({
                 type: 'transition',
                 screen: AppScreens.CryptoOtherScreen
-            })
+            }),
+        id: getId(Wallets.GenericEthereumWallet)
     }, $__i18n._({
         id: "crypto.wallet.continueWithOtherWallet",
         message: "Continue with other Crypto Wallet"

package/dist/esm/packages/web/src/ui/b2c/screens/Crypto/WalletButtons.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WalletButtons.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Crypto/WalletButtons.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MessageDescriptor } from '@lingui/core';\nimport { msg } from '@lingui/core/macro';\nimport { useLingui } from '@lingui/react/macro';\nimport { Wallets } from '@stytch/core/public';\n\nimport { useConfig, useGlobalReducer, AppScreens } from '../../GlobalContextProvider';\nimport { WalletToText, isWalletVisible, ~~useCryptoIcon~~ } from '../../../../utils/crypto';\nimport ButtonColumn from '../../../components/molecules/ButtonColumn';\nimport Button from '../../../components/atoms/Button';\nimport { GenericWalletIcon } from '../../../../assets';\n\nconst MAX_BUTTONS = 6;\n\nconst walletMessages = {\n [Wallets.Phantom]: msg({ id: 'crypto.wallet.continueWithPhantom', message: 'Continue with Phantom' }),\n [Wallets.Binance]: msg({ id: 'crypto.wallet.continueWithBinance', message: 'Continue with Binance' }),\n [Wallets.Coinbase]: msg({ id: 'crypto.wallet.continueWithCoinbase', message: 'Continue with Coinbase' }),\n [Wallets.Metamask]: msg({ id: 'crypto.wallet.continueWithMetamask', message: 'Continue with Metamask' }),\n [Wallets.GenericEthereumWallet]: msg({\n id: 'crypto.wallet.continueWithEthereum',\n message: 'Continue with Other Ethereum Wallet',\n }),\n [Wallets.GenericSolanaWallet]: msg({\n id: 'crypto.wallet.continueWithSolana',\n message: 'Continue with Other Solana Wallet',\n }),\n} satisfies Record<Wallets, MessageDescriptor>;\n\nexport const CryptoWalletButtons = ({ type }: { type: 'main' \| 'other' }) => {\n const { t } = useLingui();\n const [state, dispatch] = useGlobalReducer();\n const config = useConfig();\n\n const ~~getCryptoIcon~~ = ~~useCryptoIcon~~();\n\n const oAuthOptions = config.oauthOptions?.providers.length ?? 0;\n\n // Crypto Buttons on screen = Maximum Buttons - OAuth Buttons - 1 (Other crypto or set up new wallet)\n const cryptoButtonsOnMainScreen = MAX_BUTTONS - oAuthOptions - 1;\n const onWalletStart = (wallet: Wallets) => {\n dispatch({\n type: 'update_crypto_state',\n cryptoState: {\n ...state.formState.cryptoState,\n walletOption: wallet,\n },\n });\n dispatch({ type: 'transition', screen: AppScreens.CryptoConnect });\n };\n\n const allDetectedWallets = (Object.keys(Wallets) as (keyof typeof Wallets)[]).filter((wallet) =>\n isWalletVisible(Wallets[wallet]),\n );\n\n const renderOtherScreenButton = allDetectedWallets.length > cryptoButtonsOnMainScreen;\n\n const mainWallets = allDetectedWallets.slice(0, cryptoButtonsOnMainScreen);\n const otherWallet = allDetectedWallets.slice(cryptoButtonsOnMainScreen);\n\n const walletsToRender = type === 'main' ? mainWallets : otherWallet;\n\n return (\n <ButtonColumn>\n {walletsToRender.map((wallet) => {\n const walletEnum = Wallets[wallet];\n const Icon = ~~getCryptoIcon~~(walletEnum);\n return (\n <Button key={wallet} variant=\"outline\" icon={<Icon />} onClick={() => onWalletStart(walletEnum)}>\n {type === 'main' ? t(walletMessages[walletEnum]) : t(WalletToText[walletEnum])}\n </Button>\n );\n })}\n\n {renderOtherScreenButton && type === 'main' ? (\n <Button\n variant=\"outline\"\n icon={<GenericWalletIcon />}\n onClick={() => dispatch({ type: 'transition', screen: AppScreens.CryptoOtherScreen })}\n >\n {t(msg({ id: 'crypto.wallet.continueWithOtherWallet', message: 'Continue with other Crypto Wallet' }))}\n </Button>\n ) : (\n <Button\n variant=\"outline\"\n onClick={() => dispatch({ type: 'transition', screen: AppScreens.CryptoSetupWallet })}\n >\n {t(msg({ id: 'crypto.wallet.setupNewWallet', message: 'Set up a new crypto wallet' }))}\n </Button>\n )}\n </ButtonColumn>\n );\n};\n"],"names":["MAX_BUTTONS","walletMessages","Wallets","Phantom","Binance","Coinbase","Metamask","GenericEthereumWallet","GenericSolanaWallet","CryptoWalletButtons","type","useLingui","state","dispatch","useGlobalReducer","config","useConfig","~~getCryptoIcon~~","~~useCryptoIcon~~","oAuthOptions","oauthOptions","providers","length","cryptoButtonsOnMainScreen","onWalletStart","wallet","cryptoState","formState","walletOption","screen","AppScreens","CryptoConnect","allDetectedWallets","Object","keys","filter","isWalletVisible","renderOtherScreenButton","mainWallets","slice","otherWallet","walletsToRender","ButtonColumn","map","walletEnum","Icon","Button","key","variant","icon","onClick","WalletToText","GenericWalletIcon","CryptoOtherScreen","CryptoSetupWallet"],"mappings":";;;;;;;;;AAYA,MAAMA,WAAAA,GAAc,CAAA;AAEpB,MAAMC,cAAAA,GAAiB;IACrB,CAACC,OAAAA,CAAQC,OAAO,GAAC;;;;IACjB,CAACD,OAAAA,CAAQE,OAAO,GAAC;;;;IACjB,CAACF,OAAAA,CAAQG,QAAQ,GAAC;;;;IAClB,CAACH,OAAAA,CAAQI,QAAQ,GAAC;;;;IAClB,CAACJ,OAAAA,CAAQK,qBAAqB,GAAC;;;;IAI/B,CAACL,OAAAA,CAAQM,mBAAmB,GAAC;;;;AAI/B,CAAA;AAEO,MAAMC,mBAAAA,GAAsB,CAAC,EAAEC,IAAI,EAA8B,GAAA;AACtE,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;IACd,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,gBAAAA,EAAAA;AAC1B,IAAA,MAAMC,MAAAA,GAASC,SAAAA,EAAAA;AAEf,IAAA,~~MAAMC~~,~~aAAAA~~,~~GAAgBC~~,~~aAAAA~~,EAAAA;~~AAEtB~~,IAAA,MAAMC,YAAAA,~~GAAeJ~~,MAAAA,~~CAAOK~~,YAAY,EAAEC,UAAUC,MAAAA,IAAU,CAAA;;IAG9D,MAAMC,yBAAAA,~~GAA4BvB~~,~~cAAcmB~~,YAAAA,GAAe,CAAA;AAC/D,IAAA,MAAMK,gBAAgB,CAACC,MAAAA,GAAAA;~~QACrBZ~~,QAAAA,CAAS;YACPH,IAAAA,EAAM,qBAAA;~~YACNgB~~,WAAAA,EAAa;gBACX,~~GAAGd~~,KAAAA,~~CAAMe~~,SAAS,CAACD,WAAW;gBAC9BE,YAAAA,EAAcH;AAChB;AACF,SAAA,CAAA;~~QACAZ~~,QAAAA,CAAS;YAAEH,IAAAA,EAAM,YAAA;~~AAAcmB~~,YAAAA,MAAAA,EAAQC,WAAWC;AAAc,SAAA,CAAA;AAClE,IAAA,CAAA;AAEA,IAAA,MAAMC,kBAAAA,GAAsBC,MAAAA,CAAOC,IAAI,~~CAAChC~~,OAAAA,CAAAA,~~CAAsCiC~~,MAAM,CAAC,CAACV,MAAAA,GACpFW,eAAAA,~~CAAgBlC~~,OAAO,~~CAACuB~~,MAAAA,CAAO,CAAA,CAAA;IAGjC,MAAMY,uBAAAA,GAA0BL,kBAAAA,CAAmBV,MAAM,GAAGC,yBAAAA;AAE5D,IAAA,MAAMe,WAAAA,GAAcN,kBAAAA,CAAmBO,KAAK,CAAC,CAAA,EAAGhB,yBAAAA,CAAAA;IAChD,MAAMiB,WAAAA,GAAcR,kBAAAA,CAAmBO,KAAK,CAAChB,yBAAAA,CAAAA;IAE7C,MAAMkB,eAAAA,~~GAAkB/B~~,IAAAA,KAAS,MAAA,~~GAAS4B~~,WAAAA,GAAcE,WAAAA;AAExD,IAAA,qBACE,KAAA,CAAA,aAAA,CAACE,YAAAA,EAAAA,IAAAA,EACED,eAAAA,CAAgBE,GAAG,CAAC,CAAClB,MAAAA,GAAAA;QACpB,MAAMmB,UAAAA,~~GAAa1C~~,OAAO,~~CAACuB~~,MAAAA,CAAO;AAClC,QAAA,MAAMoB,~~OAAO5B~~,~~aAAAA~~,~~CAAc2B~~,UAAAA,CAAAA;~~AAC3B~~,QAAA,qBACE,KAAA,CAAA,aAAA,CAACE,MAAAA,EAAAA;~~YAAOC~~,GAAAA,EAAKtB,MAAAA;~~YAAQuB~~,OAAAA,EAAQ,SAAA;~~AAAUC~~,YAAAA,IAAAA,gBAAM,KAAA,CAAA,aAAA,CAACJ,IAAAA,EAAAA,IAAAA,CAAAA;~~AAASK~~,YAAAA,OAAAA,EAAS,IAAM1B,aAAAA,CAAcoB,UAAAA;~~AACjFlC~~,SAAAA,EAAAA,IAAAA,KAAS,mBAAWT,cAAc,~~CAAC2C~~,WAAW,CAAA,GAAA,OAAA,CAAA,CAAA,~~CAAMO~~,YAAY,~~CAACP~~,UAAAA,CAAW,CAAA,CAAA;IAGnF,CAAA,CAAA,EAECP,uBAAAA,~~IAA2B3B~~,IAAAA,KAAS,MAAA,iBACnC,KAAA,CAAA,aAAA,~~CAACoC~~,MAAAA,EAAAA;QACCE,OAAAA,EAAQ,SAAA;AACRC,QAAAA,IAAAA,gBAAM,KAAA,CAAA,aAAA,~~CAACG~~,iBAAAA,EAAAA,IAAAA,CAAAA;~~AACPF~~,QAAAA,OAAAA,EAAS,~~IAAMrC~~,QAAAA,CAAS;gBAAEH,IAAAA,EAAM,YAAA;~~AAAcmB~~,gBAAAA,MAAAA,EAAQC,~~WAAWuB~~;AAAkB,aAAA;;;;~~wBAKrF~~,KAAA,CAAA,aAAA,~~CAACP~~,MAAAA,EAAAA;QACCE,OAAAA,EAAQ,SAAA;AACRE,QAAAA,OAAAA,EAAS,~~IAAMrC~~,QAAAA,CAAS;gBAAEH,IAAAA,EAAM,YAAA;~~AAAcmB~~,gBAAAA,MAAAA,EAAQC,~~WAAWwB~~;AAAkB,aAAA;;;;;AAO7F;;;;"}
1	+ {"version":3,"file":"WalletButtons.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Crypto/WalletButtons.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MessageDescriptor } from '@lingui/core';\nimport { msg } from '@lingui/core/macro';\nimport { useLingui } from '@lingui/react/macro';\nimport { Wallets } from '@stytch/core/public';\n\nimport { useConfig, useGlobalReducer, AppScreens } from '../../GlobalContextProvider';\nimport { WalletToText, isWalletVisible, useCryptoButtonProps } from '../../../../utils/crypto';\nimport ButtonColumn from '../../../components/molecules/ButtonColumn';\nimport Button from '../../../components/atoms/Button';\nimport { GenericWalletIcon } from '../../../../assets';\n\nconst MAX_BUTTONS = 6;\n\nconst walletMessages = {\n [Wallets.Phantom]: msg({ id: 'crypto.wallet.continueWithPhantom', message: 'Continue with Phantom' }),\n [Wallets.Binance]: msg({ id: 'crypto.wallet.continueWithBinance', message: 'Continue with Binance' }),\n [Wallets.Coinbase]: msg({ id: 'crypto.wallet.continueWithCoinbase', message: 'Continue with Coinbase' }),\n [Wallets.Metamask]: msg({ id: 'crypto.wallet.continueWithMetamask', message: 'Continue with Metamask' }),\n [Wallets.GenericEthereumWallet]: msg({\n id: 'crypto.wallet.continueWithEthereum',\n message: 'Continue with Other Ethereum Wallet',\n }),\n [Wallets.GenericSolanaWallet]: msg({\n id: 'crypto.wallet.continueWithSolana',\n message: 'Continue with Other Solana Wallet',\n }),\n} satisfies Record<Wallets, MessageDescriptor>;\n\nexport const CryptoWalletButtons = ({ type }: { type: 'main' \| 'other' }) => {\n const { t } = useLingui();\n const [state, dispatch] = useGlobalReducer();\n const config = useConfig();\n\n const { getIcon, getId } = useCryptoButtonProps();\n\n const oAuthOptions = config.oauthOptions?.providers.length ?? 0;\n\n // Crypto Buttons on screen = Maximum Buttons - OAuth Buttons - 1 (Other crypto or set up new wallet)\n const cryptoButtonsOnMainScreen = MAX_BUTTONS - oAuthOptions - 1;\n const onWalletStart = (wallet: Wallets) => {\n dispatch({\n type: 'update_crypto_state',\n cryptoState: {\n ...state.formState.cryptoState,\n walletOption: wallet,\n },\n });\n dispatch({ type: 'transition', screen: AppScreens.CryptoConnect });\n };\n\n const allDetectedWallets = (Object.keys(Wallets) as (keyof typeof Wallets)[]).filter((wallet) =>\n isWalletVisible(Wallets[wallet]),\n );\n\n const renderOtherScreenButton = allDetectedWallets.length > cryptoButtonsOnMainScreen;\n\n const mainWallets = allDetectedWallets.slice(0, cryptoButtonsOnMainScreen);\n const otherWallet = allDetectedWallets.slice(cryptoButtonsOnMainScreen);\n\n const walletsToRender = type === 'main' ? mainWallets : otherWallet;\n\n return (\n <ButtonColumn>\n {walletsToRender.map((wallet) => {\n const walletEnum = Wallets[wallet];\n const Icon = getIcon(walletEnum);\n return (\n <Button\n key={wallet}\n variant=\"outline\"\n icon={<Icon />}\n onClick={() => onWalletStart(walletEnum)}\n id={getId(walletEnum)}\n >\n {type === 'main' ? t(walletMessages[walletEnum]) : t(WalletToText[walletEnum])}\n </Button>\n );\n })}\n\n {renderOtherScreenButton && type === 'main' ? (\n <Button\n variant=\"outline\"\n icon={<GenericWalletIcon />}\n onClick={() => dispatch({ type: 'transition', screen: AppScreens.CryptoOtherScreen })}\n id={getId(Wallets.GenericEthereumWallet)}\n >\n {t(msg({ id: 'crypto.wallet.continueWithOtherWallet', message: 'Continue with other Crypto Wallet' }))}\n </Button>\n ) : (\n <Button\n variant=\"outline\"\n onClick={() => dispatch({ type: 'transition', screen: AppScreens.CryptoSetupWallet })}\n >\n {t(msg({ id: 'crypto.wallet.setupNewWallet', message: 'Set up a new crypto wallet' }))}\n </Button>\n )}\n </ButtonColumn>\n );\n};\n"],"names":["MAX_BUTTONS","walletMessages","Wallets","Phantom","Binance","Coinbase","Metamask","GenericEthereumWallet","GenericSolanaWallet","CryptoWalletButtons","type","useLingui","state","dispatch","useGlobalReducer","config","useConfig","getIcon","getId","useCryptoButtonProps","oAuthOptions","oauthOptions","providers","length","cryptoButtonsOnMainScreen","onWalletStart","wallet","cryptoState","formState","walletOption","screen","AppScreens","CryptoConnect","allDetectedWallets","Object","keys","filter","isWalletVisible","renderOtherScreenButton","mainWallets","slice","otherWallet","walletsToRender","ButtonColumn","map","walletEnum","Icon","Button","key","variant","icon","onClick","id","WalletToText","GenericWalletIcon","CryptoOtherScreen","CryptoSetupWallet"],"mappings":"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"}

package/dist/esm/packages/web/src/ui/components/PresentationConfig.mjs CHANGED Viewed

@@ -46,6 +46,11 @@ function isDynamicTheme(theme) {
 }
 const PresentationContext = createContext(undefined);
 const usePresentation = ()=>useContext(PresentationContext);
+function getButtonId(base, options) {
+    if (options.buttonId == null || options.buttonId === false) return undefined;
+    if (typeof options.buttonId === 'string') return base + options.buttonId;
+    return base;
+}
-export { PresentationContext, isDynamicTheme, usePresentation, usePresentationWithDefault };
+export { PresentationContext, getButtonId, isDynamicTheme, usePresentation, usePresentationWithDefault };
 //# sourceMappingURL=PresentationConfig.mjs.map