@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
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/b2b/index.cjs +15 -8
  3. package/dist/cjs/b2b/index.cjs.map +1 -1
  4. package/dist/cjs/index.cjs +45 -56
  5. package/dist/cjs/index.cjs.map +1 -1
  6. package/dist/cjs/{shadcn-Z4AvHriT.js → shadcn-aVU6Lm9q.js} +9 -3
  7. package/dist/cjs/shadcn-aVU6Lm9q.js.map +1 -0
  8. package/dist/cjs-dev/b2b/index.cjs +15 -8
  9. package/dist/cjs-dev/b2b/index.cjs.map +1 -1
  10. package/dist/cjs-dev/index.cjs +45 -56
  11. package/dist/cjs-dev/index.cjs.map +1 -1
  12. package/dist/cjs-dev/{shadcn-DnNfms7-.js → shadcn-DMk6ZSoD.js} +9 -3
  13. package/dist/cjs-dev/shadcn-DMk6ZSoD.js.map +1 -0
  14. package/dist/esm/_virtual/index3.mjs +5 -3
  15. package/dist/esm/_virtual/index3.mjs.map +1 -1
  16. package/dist/esm/_virtual/index4.mjs +3 -5
  17. package/dist/esm/_virtual/index4.mjs.map +1 -1
  18. package/dist/esm/packages/web/src/adminPortal/utils/theme.mjs +1 -1
  19. package/dist/esm/packages/web/src/ui/b2b/components/OAuthB2BButton.mjs +6 -3
  20. package/dist/esm/packages/web/src/ui/b2b/components/OAuthB2BButton.mjs.map +1 -1
  21. package/dist/esm/packages/web/src/ui/b2b/components/SSOButton.mjs +5 -3
  22. package/dist/esm/packages/web/src/ui/b2b/components/SSOButton.mjs.map +1 -1
  23. package/dist/esm/packages/web/src/ui/b2b/screens/SsoAndOAuthButtons.mjs +6 -3
  24. package/dist/esm/packages/web/src/ui/b2b/screens/SsoAndOAuthButtons.mjs.map +1 -1
  25. package/dist/esm/packages/web/src/ui/b2b/types/authMethodKeys.mjs +2 -2
  26. package/dist/esm/packages/web/src/ui/b2b/types/authMethodKeys.mjs.map +1 -1
  27. package/dist/esm/packages/web/src/ui/b2c/components/OAuthButton.mjs +6 -3
  28. package/dist/esm/packages/web/src/ui/b2c/components/OAuthButton.mjs.map +1 -1
  29. package/dist/esm/packages/web/src/ui/b2c/screens/Crypto/SetupNewWallet.mjs +20 -40
  30. package/dist/esm/packages/web/src/ui/b2c/screens/Crypto/SetupNewWallet.mjs.map +1 -1
  31. package/dist/esm/packages/web/src/ui/b2c/screens/Crypto/WalletButtons.mjs +7 -5
  32. package/dist/esm/packages/web/src/ui/b2c/screens/Crypto/WalletButtons.mjs.map +1 -1
  33. package/dist/esm/packages/web/src/ui/components/PresentationConfig.mjs +6 -1
  34. package/dist/esm/packages/web/src/ui/components/PresentationConfig.mjs.map +1 -1
  35. package/dist/esm/packages/web/src/ui/components/atoms/Button.mjs.map +1 -1
  36. package/dist/esm/packages/web/src/ui/components/molecules/EmailInput.mjs +1 -1
  37. package/dist/esm/packages/web/src/ui/components/molecules/EmailInput.mjs.map +1 -1
  38. package/dist/esm/packages/web/src/ui/components/molecules/Input.mjs +1 -1
  39. package/dist/esm/packages/web/src/ui/components/molecules/Input.mjs.map +1 -1
  40. package/dist/esm/packages/web/src/utils/crypto.mjs +12 -8
  41. package/dist/esm/packages/web/src/utils/crypto.mjs.map +1 -1
  42. package/dist/esm-dev/_virtual/index3.mjs +3 -5
  43. package/dist/esm-dev/_virtual/index3.mjs.map +1 -1
  44. package/dist/esm-dev/_virtual/index4.mjs +5 -3
  45. package/dist/esm-dev/_virtual/index4.mjs.map +1 -1
  46. package/dist/esm-dev/packages/web/src/adminPortal/utils/theme.mjs +1 -1
  47. package/dist/esm-dev/packages/web/src/ui/b2b/components/OAuthB2BButton.mjs +6 -3
  48. package/dist/esm-dev/packages/web/src/ui/b2b/components/OAuthB2BButton.mjs.map +1 -1
  49. package/dist/esm-dev/packages/web/src/ui/b2b/components/SSOButton.mjs +5 -3
  50. package/dist/esm-dev/packages/web/src/ui/b2b/components/SSOButton.mjs.map +1 -1
  51. package/dist/esm-dev/packages/web/src/ui/b2b/screens/SsoAndOAuthButtons.mjs +6 -3
  52. package/dist/esm-dev/packages/web/src/ui/b2b/screens/SsoAndOAuthButtons.mjs.map +1 -1
  53. package/dist/esm-dev/packages/web/src/ui/b2b/types/authMethodKeys.mjs +2 -2
  54. package/dist/esm-dev/packages/web/src/ui/b2b/types/authMethodKeys.mjs.map +1 -1
  55. package/dist/esm-dev/packages/web/src/ui/b2c/components/OAuthButton.mjs +6 -3
  56. package/dist/esm-dev/packages/web/src/ui/b2c/components/OAuthButton.mjs.map +1 -1
  57. package/dist/esm-dev/packages/web/src/ui/b2c/screens/Crypto/SetupNewWallet.mjs +20 -40
  58. package/dist/esm-dev/packages/web/src/ui/b2c/screens/Crypto/SetupNewWallet.mjs.map +1 -1
  59. package/dist/esm-dev/packages/web/src/ui/b2c/screens/Crypto/WalletButtons.mjs +7 -5
  60. package/dist/esm-dev/packages/web/src/ui/b2c/screens/Crypto/WalletButtons.mjs.map +1 -1
  61. package/dist/esm-dev/packages/web/src/ui/components/PresentationConfig.mjs +6 -1
  62. package/dist/esm-dev/packages/web/src/ui/components/PresentationConfig.mjs.map +1 -1
  63. package/dist/esm-dev/packages/web/src/ui/components/atoms/Button.mjs.map +1 -1
  64. package/dist/esm-dev/packages/web/src/ui/components/molecules/EmailInput.mjs +1 -1
  65. package/dist/esm-dev/packages/web/src/ui/components/molecules/EmailInput.mjs.map +1 -1
  66. package/dist/esm-dev/packages/web/src/ui/components/molecules/Input.mjs +1 -1
  67. package/dist/esm-dev/packages/web/src/ui/components/molecules/Input.mjs.map +1 -1
  68. package/dist/esm-dev/packages/web/src/utils/crypto.mjs +12 -8
  69. package/dist/esm-dev/packages/web/src/utils/crypto.mjs.map +1 -1
  70. package/dist/types/{PresentationConfig-CcNEXkjS.d.ts → PresentationConfig-B2jX85oV.d.ts} +8 -1
  71. package/dist/types/b2b/index.d.ts +3 -3
  72. package/dist/types/compat.d.ts +1 -1
  73. package/dist/types/index.d.ts +3 -3
  74. package/dist/types/{shadcn-B04UXoBD.d.ts → shadcn-CGdmyIUF.d.ts} +1 -1
  75. package/package.json +1 -1
  76. package/dist/cjs/shadcn-Z4AvHriT.js.map +0 -1
  77. package/dist/cjs-dev/shadcn-DnNfms7-.js.map +0 -1
@@ -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":"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"}
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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"}
@@ -5,22 +5,19 @@ import Column from '../../../components/atoms/Column.mjs';
5
5
  import TextColumn from '../../../components/molecules/TextColumn.mjs';
6
6
  import Button, { ButtonAnchor } from '../../../components/atoms/Button.mjs';
7
7
  import ButtonColumn from '../../../components/molecules/ButtonColumn.mjs';
8
- import { useCryptoIcon } from '../../../../utils/crypto.mjs';
8
+ import { useCryptoButtonProps, WalletToText } from '../../../../utils/crypto.mjs';
9
9
  import { Wallets } from '../../../../../../core/src/public/ui.mjs';
10
10
 
11
- const commonButtonProps = {
12
- variant: 'outline',
13
- target: '_blank',
14
- rel: 'noreferrer'
15
- };
16
11
  const SetupNewWallet = ()=>{
17
12
  const { i18n: $__i18n, _: $__ } = useLingui();
18
13
  const [, dispatch] = useGlobalReducer();
19
- const getCryptoIcon = useCryptoIcon();
20
- const MetamaskIcon = getCryptoIcon(Wallets.Metamask);
21
- const PhantomIcon = getCryptoIcon(Wallets.Phantom);
22
- const CoinbaseIcon = getCryptoIcon(Wallets.Coinbase);
23
- const BinanceIcon = getCryptoIcon(Wallets.Binance);
14
+ const { getIcon, getId } = useCryptoButtonProps();
15
+ const walletsToRender = [
16
+ Wallets.Metamask,
17
+ Wallets.Phantom,
18
+ Wallets.Coinbase,
19
+ Wallets.Binance
20
+ ];
24
21
  return /*#__PURE__*/ React__default.createElement(Column, {
25
22
  gap: 6
26
23
  }, /*#__PURE__*/ React__default.createElement(TextColumn, {
@@ -36,35 +33,18 @@ const SetupNewWallet = ()=>{
36
33
  id: "crypto.setupNewWallet.instruction",
37
34
  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."
38
35
  })
39
- }), /*#__PURE__*/ React__default.createElement(ButtonColumn, null, /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
40
- ...commonButtonProps,
41
- icon: /*#__PURE__*/ React__default.createElement(MetamaskIcon, null),
42
- href: "https://metamask.io/"
43
- }, $__i18n._({
44
- id: "crypto.wallet.metamask",
45
- message: "Metamask"
46
- })), /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
47
- ...commonButtonProps,
48
- icon: /*#__PURE__*/ React__default.createElement(PhantomIcon, null),
49
- href: "https://phantom.com/"
50
- }, $__i18n._({
51
- id: "crypto.wallet.phantom",
52
- message: "Phantom"
53
- })), /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
54
- ...commonButtonProps,
55
- icon: /*#__PURE__*/ React__default.createElement(CoinbaseIcon, null),
56
- href: "https://www.coinbase.com/wallet"
57
- }, $__i18n._({
58
- id: "crypto.wallet.coinbase",
59
- message: "Coinbase"
60
- })), /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
61
- ...commonButtonProps,
62
- icon: /*#__PURE__*/ React__default.createElement(BinanceIcon, null),
63
- href: "https://web3.binance.com/en/about"
64
- }, $__i18n._({
65
- id: "crypto.wallet.binance",
66
- message: "Binance"
67
- })), /*#__PURE__*/ React__default.createElement(Button, {
36
+ }), /*#__PURE__*/ React__default.createElement(ButtonColumn, null, walletsToRender.map((wallet)=>{
37
+ const Icon = getIcon(wallet);
38
+ return /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
39
+ key: wallet,
40
+ variant: "outline",
41
+ target: "_blank",
42
+ rel: "noreferrer",
43
+ icon: /*#__PURE__*/ React__default.createElement(Icon, null),
44
+ href: "https://metamask.io/",
45
+ id: getId(wallet)
46
+ }, $__i18n._(WalletToText[wallet]));
47
+ }), /*#__PURE__*/ React__default.createElement(Button, {
68
48
  variant: "primary",
69
49
  onClick: ()=>dispatch({
70
50
  type: 'transition',
@@ -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;;;;"}
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { useLingui } from '../../../../../../../node_modules/@lingui/react/dist/index.mjs';
3
3
  import { useGlobalReducer, useConfig, AppScreens } from '../../GlobalContextProvider.mjs';
4
- import { useCryptoIcon, isWalletVisible, WalletToText } from '../../../../utils/crypto.mjs';
4
+ import { useCryptoButtonProps, isWalletVisible, WalletToText } from '../../../../utils/crypto.mjs';
5
5
  import ButtonColumn from '../../../components/molecules/ButtonColumn.mjs';
6
6
  import Button from '../../../components/atoms/Button.mjs';
7
7
  import { GenericWalletIcon } from '../../../../assets/genericWallet.mjs';
@@ -38,7 +38,7 @@ const CryptoWalletButtons = ({ type })=>{
38
38
  const { i18n: $__i18n, _: $__ } = useLingui();
39
39
  const [state, dispatch] = useGlobalReducer();
40
40
  const config = useConfig();
41
- const getCryptoIcon = useCryptoIcon();
41
+ const { getIcon, getId } = useCryptoButtonProps();
42
42
  const oAuthOptions = config.oauthOptions?.providers.length ?? 0;
43
43
  // Crypto Buttons on screen = Maximum Buttons - OAuth Buttons - 1 (Other crypto or set up new wallet)
44
44
  const cryptoButtonsOnMainScreen = MAX_BUTTONS - oAuthOptions - 1;
@@ -62,12 +62,13 @@ const CryptoWalletButtons = ({ type })=>{
62
62
  const walletsToRender = type === 'main' ? mainWallets : otherWallet;
63
63
  return /*#__PURE__*/ React.createElement(ButtonColumn, null, walletsToRender.map((wallet)=>{
64
64
  const walletEnum = Wallets[wallet];
65
- const Icon = getCryptoIcon(walletEnum);
65
+ const Icon = getIcon(walletEnum);
66
66
  return /*#__PURE__*/ React.createElement(Button, {
67
67
  key: wallet,
68
68
  variant: "outline",
69
69
  icon: /*#__PURE__*/ React.createElement(Icon, null),
70
- onClick: ()=>onWalletStart(walletEnum)
70
+ onClick: ()=>onWalletStart(walletEnum),
71
+ id: getId(walletEnum)
71
72
  }, type === 'main' ? $__i18n._(walletMessages[walletEnum]) : $__i18n._(WalletToText[walletEnum]));
72
73
  }), renderOtherScreenButton && type === 'main' ? /*#__PURE__*/ React.createElement(Button, {
73
74
  variant: "outline",
@@ -75,7 +76,8 @@ const CryptoWalletButtons = ({ type })=>{
75
76
  onClick: ()=>dispatch({
76
77
  type: 'transition',
77
78
  screen: AppScreens.CryptoOtherScreen
78
- })
79
+ }),
80
+ id: getId(Wallets.GenericEthereumWallet)
79
81
  }, $__i18n._({
80
82
  id: "crypto.wallet.continueWithOtherWallet",
81
83
  message: "Continue with other Crypto Wallet"
@@ -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":"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"}
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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"}
@@ -55,6 +55,11 @@ function isDynamicTheme(theme) {
55
55
  }
56
56
  const PresentationContext = createContext(undefined);
57
57
  const usePresentation = ()=>useContext(PresentationContext);
58
+ function getButtonId(base, options) {
59
+ if (options.buttonId == null || options.buttonId === false) return undefined;
60
+ if (typeof options.buttonId === 'string') return base + options.buttonId;
61
+ return base;
62
+ }
58
63
 
59
- export { PresentationContext, isDynamicTheme, usePresentation, usePresentationWithDefault };
64
+ export { PresentationContext, getButtonId, isDynamicTheme, usePresentation, usePresentationWithDefault };
60
65
  //# sourceMappingURL=PresentationConfig.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"PresentationConfig.mjs","sources":["../../../../../../../../web/src/ui/components/PresentationConfig.ts"],"sourcesContent":["import { defaultTheme } from './themes/themes';\nimport { createContext, useContext, useMemo } from 'react';\nimport { PresentationConfig } from '../../types';\nimport { Theme } from './themes/ThemeConfig';\nimport { useMediaQuery } from '../hooks/useMediaQuery';\nimport { IconRegistry } from './IconRegistry';\nimport { IconNames } from '../b2c/components/Icons';\nimport { logger, RUN_IN_DEV } from '@stytch/core';\n\nexport type PresentationOptions = {\n /**\n * When this value is false, the title and description text will not show in the SDK.\n */\n hideHeaderText: boolean;\n\n /**\n * Optional suffix for <input> id attribute so input IDs are unique.\n */\n inputIdSuffix?: string;\n\n /**\n * The configuration object for your custom logo.\n */\n logo?: {\n /**\n * The URL of your custom logo.\n */\n url: string;\n\n /**\n * Alt text for the logo. This would usually be the name of the website or your company,\n * unless this is already repeated nearby in which case this should be left empty.\n */\n alt: string;\n };\n\n /**\n * Override our icons. Currently, this only supports logos, such as those that appear in Oauth buttons.\n * This should be an object where the key is the icon name and the value is a React component\n * (not React element) with a size prop and the rest spread onto the root element.\n *\n * Note that custom logos not imported from our packages is not yet available in @stytch/vanilla-js.\n * We are looking at provide alternatives in the future.\n *\n * @example\n *\n * // Using a solid black or white icon\n * import { whiteIcons } from '@stytch/react';\n *\n * const presentation = {\n * options: {\n * icons: {\n * outlook: whiteIcons.outlook,\n * },\n * },\n * };\n *\n * // Using a custom icon\n * const presentation = {\n * icons: {\n * outlook: ({ size, ...props }) => (\n * <svg width={size} height={size} {...props}>...</svg>\n * ),\n * },\n * };\n */\n icons?: IconRegistry<string>;\n};\n\nconst defaultOptions: PresentationOptions = {\n hideHeaderText: false,\n};\n\n/**\n * Internal type -\n * @see {PresentationConfig} is the public one\n */\nexport type Presentation = {\n theme: Theme;\n options: PresentationOptions;\n\n // Internal properties\n displayWatermark: boolean;\n iconRegistry: IconRegistry<string>;\n};\n\nexport function usePresentationWithDefault(\n maybeConfig: PresentationConfig | undefined,\n displayWatermark: boolean,\n products: { id: string; icons?: Partial<IconRegistry<IconNames>> }[],\n productsName?: string,\n): Presentation {\n const { theme, options } = maybeConfig ?? {};\n\n RUN_IN_DEV(() => {\n const stringProducts = products.filter((p) => typeof p === 'string');\n if (stringProducts.length > 0) {\n logger.error(\n `Please add an import for ${productsName} and update config.products to\\n` +\n 'products: [' +\n products.map((p) => `${productsName}.${typeof p === 'string' ? p : p.id}`).join(', ') +\n ']',\n );\n\n throw new Error(\"'config.products' should not include strings anymore\");\n }\n });\n\n // Switch theme automatically depending on color scheme\n const isDynamic = isDynamicTheme(theme);\n const darkMode = useMediaQuery(isDynamic ? '(prefers-color-scheme: dark)' : undefined);\n\n let effectiveTheme: Partial<Theme> | undefined;\n if (isDynamic) {\n effectiveTheme = darkMode ? theme[1] : theme[0];\n } else {\n effectiveTheme = theme;\n }\n\n // Memoize the icon registry so it only need to be constructed once\n const iconRegistry = useMemo(() => {\n const registry: IconRegistry<string> = {};\n for (const product of products) {\n Object.assign(registry, product.icons);\n }\n Object.assign(registry, options?.icons);\n return registry;\n }, [products, options]);\n\n return {\n theme: {\n ...defaultTheme,\n ...effectiveTheme,\n },\n options: {\n ...defaultOptions,\n ...options,\n },\n displayWatermark,\n iconRegistry,\n };\n}\n\nexport function isDynamicTheme(\n theme: PresentationConfig['theme'],\n): theme is readonly [light: Partial<Theme>, dark: Partial<Theme>] {\n return Array.isArray(theme);\n}\n\nexport const PresentationContext = createContext<Presentation>(undefined!);\nexport const usePresentation = () => useContext(PresentationContext);\n"],"names":["defaultOptions","hideHeaderText","usePresentationWithDefault","maybeConfig","displayWatermark","products","productsName","theme","options","RUN_IN_DEV","stringProducts","filter","p","length","logger","error","map","id","join","Error","isDynamic","isDynamicTheme","darkMode","useMediaQuery","undefined","effectiveTheme","iconRegistry","useMemo","registry","product","Object","assign","icons","defaultTheme","Array","isArray","PresentationContext","createContext","usePresentation","useContext"],"mappings":";;;;;;AAqEA,MAAMA,cAAAA,GAAsC;IAC1CC,cAAAA,EAAgB;AAClB,CAAA;AAeO,SAASC,2BACdC,WAA2C,EAC3CC,gBAAyB,EACzBC,QAAoE,EACpEC,YAAqB,EAAA;AAErB,IAAA,MAAM,EAAEC,KAAK,EAAEC,OAAO,EAAE,GAAGL,eAAe,EAAC;IAE3CM,UAAAA,CAAW,IAAA;AACT,QAAA,MAAMC,iBAAiBL,QAAAA,CAASM,MAAM,CAAC,CAACC,CAAAA,GAAM,OAAOA,CAAAA,KAAM,QAAA,CAAA;QAC3D,IAAIF,cAAAA,CAAeG,MAAM,GAAG,CAAA,EAAG;AAC7BC,YAAAA,MAAAA,CAAOC,KAAK,CACV,CAAC,yBAAyB,EAAET,YAAAA,CAAa,gCAAgC,CAAC,GACxE,aAAA,GACAD,QAAAA,CAASW,GAAG,CAAC,CAACJ,CAAAA,GAAM,CAAA,EAAGN,YAAAA,CAAa,CAAC,EAAE,OAAOM,CAAAA,KAAM,QAAA,GAAWA,CAAAA,GAAIA,CAAAA,CAAEK,EAAE,CAAA,CAAE,CAAA,CAAEC,IAAI,CAAC,IAAA,CAAA,GAChF,GAAA,CAAA;AAGJ,YAAA,MAAM,IAAIC,KAAAA,CAAM,sDAAA,CAAA;AAClB,QAAA;AACF,IAAA,CAAA,CAAA;;AAGA,IAAA,MAAMC,YAAYC,cAAAA,CAAed,KAAAA,CAAAA;IACjC,MAAMe,QAAAA,GAAWC,aAAAA,CAAcH,SAAAA,GAAY,8BAAA,GAAiCI,SAAAA,CAAAA;IAE5E,IAAIC,cAAAA;AACJ,IAAA,IAAIL,SAAAA,EAAW;AACbK,QAAAA,cAAAA,GAAiBH,WAAWf,KAAK,CAAC,EAAE,GAAGA,KAAK,CAAC,CAAA,CAAE;IACjD,CAAA,MAAO;QACLkB,cAAAA,GAAiBlB,KAAAA;AACnB,IAAA;;AAGA,IAAA,MAAMmB,eAAeC,OAAAA,CAAQ,IAAA;AAC3B,QAAA,MAAMC,WAAiC,EAAC;QACxC,KAAK,MAAMC,WAAWxB,QAAAA,CAAU;AAC9ByB,YAAAA,MAAAA,CAAOC,MAAM,CAACH,QAAAA,EAAUC,OAAAA,CAAQG,KAAK,CAAA;AACvC,QAAA;QACAF,MAAAA,CAAOC,MAAM,CAACH,QAAAA,EAAUpB,OAAAA,EAASwB,KAAAA,CAAAA;QACjC,OAAOJ,QAAAA;IACT,CAAA,EAAG;AAACvB,QAAAA,QAAAA;AAAUG,QAAAA;AAAQ,KAAA,CAAA;IAEtB,OAAO;QACLD,KAAAA,EAAO;AACL,YAAA,GAAG0B,YAAY;AACf,YAAA,GAAGR;AACL,SAAA;QACAjB,OAAAA,EAAS;AACP,YAAA,GAAGR,cAAc;AACjB,YAAA,GAAGQ;AACL,SAAA;AACAJ,QAAAA,gBAAAA;AACAsB,QAAAA;AACF,KAAA;AACF;AAEO,SAASL,eACdd,KAAkC,EAAA;IAElC,OAAO2B,KAAAA,CAAMC,OAAO,CAAC5B,KAAAA,CAAAA;AACvB;AAEO,MAAM6B,mBAAAA,GAAsBC,aAAAA,CAA4Bb,SAAAA;AACxD,MAAMc,eAAAA,GAAkB,IAAMC,UAAAA,CAAWH,mBAAAA;;;;"}
1
+ {"version":3,"file":"PresentationConfig.mjs","sources":["../../../../../../../../web/src/ui/components/PresentationConfig.ts"],"sourcesContent":["import { defaultTheme } from './themes/themes';\nimport { createContext, useContext, useMemo } from 'react';\nimport { PresentationConfig } from '../../types';\nimport { Theme } from './themes/ThemeConfig';\nimport { useMediaQuery } from '../hooks/useMediaQuery';\nimport { IconRegistry } from './IconRegistry';\nimport { IconNames } from '../b2c/components/Icons';\nimport { logger, RUN_IN_DEV } from '@stytch/core';\n\nexport type PresentationOptions = {\n /**\n * When this value is false, the header title and description text will be hidden.\n * This is useful if you prefer to display and style the title outside the Stytch component.\n */\n hideHeaderText: boolean;\n\n /**\n * Optional suffix for <input> id attribute so input IDs are unique.\n */\n inputIdSuffix?: string;\n\n /**\n * The configuration object for your custom logo.\n */\n logo?: {\n /**\n * The URL of your custom logo.\n */\n url: string;\n\n /**\n * Alt text for the logo. This would usually be the name of the website or your company,\n * unless this is already repeated nearby in which case this should be left empty.\n */\n alt: string;\n };\n\n /**\n * Set to true to add id like 'oauth-google' to buttons, or a string to add a suffix to button ids to make\n * them more unique. This exists for backwards compatibility. We do not recommend using this to style or\n * modify elements in Stytch UI.\n */\n buttonId?: string | boolean;\n\n /**\n * Override our icons. Currently, this only supports logos, such as those that appear in Oauth buttons.\n * This should be an object where the key is the icon name and the value is a React component\n * (not React element) with a size prop and the rest spread onto the root element.\n *\n * Note that custom logos not imported from our packages is not yet available in @stytch/vanilla-js.\n * We are looking at provide alternatives in the future.\n *\n * @example\n *\n * // Using a solid black or white icon\n * import { whiteIcons } from '@stytch/react';\n *\n * const presentation = {\n * options: {\n * icons: {\n * outlook: whiteIcons.outlook,\n * },\n * },\n * };\n *\n * // Using a custom icon\n * const presentation = {\n * icons: {\n * outlook: ({ size, ...props }) => (\n * <svg width={size} height={size} {...props}>...</svg>\n * ),\n * },\n * };\n */\n icons?: IconRegistry<string>;\n};\n\nconst defaultOptions: PresentationOptions = {\n hideHeaderText: false,\n};\n\n/**\n * Internal type -\n * @see {PresentationConfig} is the public one\n */\nexport type Presentation = {\n theme: Theme;\n options: PresentationOptions;\n\n // Internal properties\n displayWatermark: boolean;\n iconRegistry: IconRegistry<string>;\n};\n\nexport function usePresentationWithDefault(\n maybeConfig: PresentationConfig | undefined,\n displayWatermark: boolean,\n products: { id: string; icons?: Partial<IconRegistry<IconNames>> }[],\n productsName?: string,\n): Presentation {\n const { theme, options } = maybeConfig ?? {};\n\n RUN_IN_DEV(() => {\n const stringProducts = products.filter((p) => typeof p === 'string');\n if (stringProducts.length > 0) {\n logger.error(\n `Please add an import for ${productsName} and update config.products to\\n` +\n 'products: [' +\n products.map((p) => `${productsName}.${typeof p === 'string' ? p : p.id}`).join(', ') +\n ']',\n );\n\n throw new Error(\"'config.products' should not include strings anymore\");\n }\n });\n\n // Switch theme automatically depending on color scheme\n const isDynamic = isDynamicTheme(theme);\n const darkMode = useMediaQuery(isDynamic ? '(prefers-color-scheme: dark)' : undefined);\n\n let effectiveTheme: Partial<Theme> | undefined;\n if (isDynamic) {\n effectiveTheme = darkMode ? theme[1] : theme[0];\n } else {\n effectiveTheme = theme;\n }\n\n // Memoize the icon registry so it only need to be constructed once\n const iconRegistry = useMemo(() => {\n const registry: IconRegistry<string> = {};\n for (const product of products) {\n Object.assign(registry, product.icons);\n }\n Object.assign(registry, options?.icons);\n return registry;\n }, [products, options]);\n\n return {\n theme: {\n ...defaultTheme,\n ...effectiveTheme,\n },\n options: {\n ...defaultOptions,\n ...options,\n },\n displayWatermark,\n iconRegistry,\n };\n}\n\nexport function isDynamicTheme(\n theme: PresentationConfig['theme'],\n): theme is readonly [light: Partial<Theme>, dark: Partial<Theme>] {\n return Array.isArray(theme);\n}\n\nexport const PresentationContext = createContext<Presentation>(undefined!);\nexport const usePresentation = () => useContext(PresentationContext);\n\nexport function getButtonId(base: string, options: PresentationOptions) {\n if (options.buttonId == null || options.buttonId === false) return undefined;\n if (typeof options.buttonId === 'string') return base + options.buttonId;\n return base;\n}\n"],"names":["defaultOptions","hideHeaderText","usePresentationWithDefault","maybeConfig","displayWatermark","products","productsName","theme","options","RUN_IN_DEV","stringProducts","filter","p","length","logger","error","map","id","join","Error","isDynamic","isDynamicTheme","darkMode","useMediaQuery","undefined","effectiveTheme","iconRegistry","useMemo","registry","product","Object","assign","icons","defaultTheme","Array","isArray","PresentationContext","createContext","usePresentation","useContext","getButtonId","base","buttonId"],"mappings":";;;;;;AA6EA,MAAMA,cAAAA,GAAsC;IAC1CC,cAAAA,EAAgB;AAClB,CAAA;AAeO,SAASC,2BACdC,WAA2C,EAC3CC,gBAAyB,EACzBC,QAAoE,EACpEC,YAAqB,EAAA;AAErB,IAAA,MAAM,EAAEC,KAAK,EAAEC,OAAO,EAAE,GAAGL,eAAe,EAAC;IAE3CM,UAAAA,CAAW,IAAA;AACT,QAAA,MAAMC,iBAAiBL,QAAAA,CAASM,MAAM,CAAC,CAACC,CAAAA,GAAM,OAAOA,CAAAA,KAAM,QAAA,CAAA;QAC3D,IAAIF,cAAAA,CAAeG,MAAM,GAAG,CAAA,EAAG;AAC7BC,YAAAA,MAAAA,CAAOC,KAAK,CACV,CAAC,yBAAyB,EAAET,YAAAA,CAAa,gCAAgC,CAAC,GACxE,aAAA,GACAD,QAAAA,CAASW,GAAG,CAAC,CAACJ,CAAAA,GAAM,CAAA,EAAGN,YAAAA,CAAa,CAAC,EAAE,OAAOM,CAAAA,KAAM,QAAA,GAAWA,CAAAA,GAAIA,CAAAA,CAAEK,EAAE,CAAA,CAAE,CAAA,CAAEC,IAAI,CAAC,IAAA,CAAA,GAChF,GAAA,CAAA;AAGJ,YAAA,MAAM,IAAIC,KAAAA,CAAM,sDAAA,CAAA;AAClB,QAAA;AACF,IAAA,CAAA,CAAA;;AAGA,IAAA,MAAMC,YAAYC,cAAAA,CAAed,KAAAA,CAAAA;IACjC,MAAMe,QAAAA,GAAWC,aAAAA,CAAcH,SAAAA,GAAY,8BAAA,GAAiCI,SAAAA,CAAAA;IAE5E,IAAIC,cAAAA;AACJ,IAAA,IAAIL,SAAAA,EAAW;AACbK,QAAAA,cAAAA,GAAiBH,WAAWf,KAAK,CAAC,EAAE,GAAGA,KAAK,CAAC,CAAA,CAAE;IACjD,CAAA,MAAO;QACLkB,cAAAA,GAAiBlB,KAAAA;AACnB,IAAA;;AAGA,IAAA,MAAMmB,eAAeC,OAAAA,CAAQ,IAAA;AAC3B,QAAA,MAAMC,WAAiC,EAAC;QACxC,KAAK,MAAMC,WAAWxB,QAAAA,CAAU;AAC9ByB,YAAAA,MAAAA,CAAOC,MAAM,CAACH,QAAAA,EAAUC,OAAAA,CAAQG,KAAK,CAAA;AACvC,QAAA;QACAF,MAAAA,CAAOC,MAAM,CAACH,QAAAA,EAAUpB,OAAAA,EAASwB,KAAAA,CAAAA;QACjC,OAAOJ,QAAAA;IACT,CAAA,EAAG;AAACvB,QAAAA,QAAAA;AAAUG,QAAAA;AAAQ,KAAA,CAAA;IAEtB,OAAO;QACLD,KAAAA,EAAO;AACL,YAAA,GAAG0B,YAAY;AACf,YAAA,GAAGR;AACL,SAAA;QACAjB,OAAAA,EAAS;AACP,YAAA,GAAGR,cAAc;AACjB,YAAA,GAAGQ;AACL,SAAA;AACAJ,QAAAA,gBAAAA;AACAsB,QAAAA;AACF,KAAA;AACF;AAEO,SAASL,eACdd,KAAkC,EAAA;IAElC,OAAO2B,KAAAA,CAAMC,OAAO,CAAC5B,KAAAA,CAAAA;AACvB;AAEO,MAAM6B,mBAAAA,GAAsBC,aAAAA,CAA4Bb,SAAAA;AACxD,MAAMc,eAAAA,GAAkB,IAAMC,UAAAA,CAAWH,mBAAAA;AAEzC,SAASI,WAAAA,CAAYC,IAAY,EAAEjC,OAA4B,EAAA;IACpE,IAAIA,OAAAA,CAAQkC,QAAQ,IAAI,IAAA,IAAQlC,QAAQkC,QAAQ,KAAK,OAAO,OAAOlB,SAAAA;IACnE,IAAI,OAAOhB,QAAQkC,QAAQ,KAAK,UAAU,OAAOD,IAAAA,GAAOjC,QAAQkC,QAAQ;IACxE,OAAOD,IAAAA;AACT;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Button.mjs","sources":["../../../../../../../../../web/src/ui/components/atoms/Button.tsx"],"sourcesContent":["import React, { ReactNode, KeyboardEventHandler } from 'react';\nimport classNames from 'classnames';\nimport { CircularProgress } from './CircularProgress';\nimport styles from './Button.module.css';\n\nexport type ButtonProps = {\n variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';\n children: ReactNode;\n\n /**\n * Button is full width and content is centered\n * @default true\n */\n block?: boolean;\n\n icon?: ReactNode;\n\n /** If true, display a spinner and disables the button */\n loading?: boolean;\n disabled?: boolean;\n\n /**\n * Unlike HTML <button> we deliberately set the default to button to\n * avoid bugs where buttons inadvertently submit forms\n * @default 'button'\n **/\n type?: 'button' | 'submit' | 'reset';\n onClick?: () => void;\n onKeyDown?: KeyboardEventHandler<HTMLElement>;\n};\n\nexport function buttonClassNames({ variant, block = true }: Pick<ButtonProps, 'variant' | 'block'>) {\n return classNames(styles.button, styles[variant], {\n [styles.block]: block,\n });\n}\n\n// Base renderer for both <a> and <button> based <Button>s\nconst baseButton = (props: ButtonProps & { as?: string }) => {\n const { as, children, icon, onClick, loading, disabled = loading, block, variant, ...otherProps } = props;\n const Element = as as 'button';\n\n let buttonContent = (\n <>\n {icon}\n <span>{children}</span>\n </>\n );\n\n if (loading) {\n buttonContent = <CircularProgress size={20} />;\n }\n\n return (\n <Element className={buttonClassNames(props)} onClick={onClick} disabled={disabled} {...otherProps}>\n {buttonContent}\n </Element>\n );\n};\n\nconst Button = (props: ButtonProps) =>\n baseButton({\n type: 'button',\n as: 'button',\n ...props,\n });\n\nexport default Button;\n\n// Deriving this from ButtonProps is not very neat, but ButtonAnchor is not frequently used\nexport type ButtonAnchorProps = Omit<ButtonProps, 'type' | 'as'> & {\n href: string;\n download?: string;\n target?: string;\n rel?: string;\n};\n\nexport const ButtonAnchor = (props: ButtonAnchorProps) =>\n baseButton({\n ...props,\n // Links don't fire click event on space while buttons do, so we implement that ourselves for these\n // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/button_role#accessibility_concerns\n onKeyDown: (evt) => {\n props.onKeyDown?.(evt);\n if (evt.defaultPrevented) return;\n if (evt.key === ' ') evt.currentTarget.click();\n },\n as: 'a',\n });\n"],"names":["buttonClassNames","variant","block","classNames","styles","button","baseButton","props","as","children","icon","onClick","loading","disabled","otherProps","Element","buttonContent","React","span","CircularProgress","size","className","Button","type","ButtonAnchor","onKeyDown","evt","defaultPrevented","key","currentTarget","click"],"mappings":";;;;;AA+BO,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAAEC,KAAAA,GAAQ,IAAI,EAA0C,EAAA;AAChG,IAAA,OAAOC,WAAWC,gBAAAA,CAAOC,MAAM,EAAED,gBAAM,CAACH,QAAQ,EAAE;QAChD,CAACG,gBAAAA,CAAOF,KAAK,GAAGA;AAClB,KAAA,CAAA;AACF;AAEA;AACA,MAAMI,aAAa,CAACC,KAAAA,GAAAA;IAClB,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,OAAO,EAAEC,OAAO,EAAEC,QAAAA,GAAWD,OAAO,EAAEV,KAAK,EAAED,OAAO,EAAE,GAAGa,YAAY,GAAGP,KAAAA;AACpG,IAAA,MAAMQ,OAAAA,GAAUP,EAAAA;AAEhB,IAAA,IAAIQ,aAAAA,iBACFC,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,EACGP,IAAAA,gBACDO,cAAA,CAAA,aAAA,CAACC,MAAAA,EAAAA,IAAAA,EAAMT,QAAAA,CAAAA,CAAAA;AAIX,IAAA,IAAIG,OAAAA,EAAS;AACXI,QAAAA,aAAAA,iBAAgBC,cAAA,CAAA,aAAA,CAACE,gBAAAA,EAAAA;YAAiBC,IAAAA,EAAM;;AAC1C,IAAA;AAEA,IAAA,qBACEH,cAAA,CAAA,aAAA,CAACF,OAAAA,EAAAA;AAAQM,QAAAA,SAAAA,EAAWrB,gBAAAA,CAAiBO,KAAAA,CAAAA;QAAQI,OAAAA,EAASA,OAAAA;QAASE,QAAAA,EAAUA,QAAAA;AAAW,QAAA,GAAGC;AACpFE,KAAAA,EAAAA,aAAAA,CAAAA;AAGP,CAAA;AAEA,MAAMM,MAAAA,GAAS,CAACf,KAAAA,GACdD,UAAAA,CAAW;QACTiB,IAAAA,EAAM,QAAA;QACNf,EAAAA,EAAI,QAAA;AACJ,QAAA,GAAGD;AACL,KAAA;AAYK,MAAMiB,YAAAA,GAAe,CAACjB,KAAAA,GAC3BD,UAAAA,CAAW;AACT,QAAA,GAAGC,KAAK;;;AAGRkB,QAAAA,SAAAA,EAAW,CAACC,GAAAA,GAAAA;AACVnB,YAAAA,KAAAA,CAAMkB,SAAS,GAAGC,GAAAA,CAAAA;YAClB,IAAIA,GAAAA,CAAIC,gBAAgB,EAAE;AAC1B,YAAA,IAAID,IAAIE,GAAG,KAAK,KAAKF,GAAAA,CAAIG,aAAa,CAACC,KAAK,EAAA;AAC9C,QAAA,CAAA;QACAtB,EAAAA,EAAI;KACN;;;;"}
1
+ {"version":3,"file":"Button.mjs","sources":["../../../../../../../../../web/src/ui/components/atoms/Button.tsx"],"sourcesContent":["import React, { ReactNode, KeyboardEventHandler } from 'react';\nimport classNames from 'classnames';\nimport { CircularProgress } from './CircularProgress';\nimport styles from './Button.module.css';\n\nexport type ButtonProps = {\n variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';\n children: ReactNode;\n\n /**\n * Button is full width and content is centered\n * @default true\n */\n block?: boolean;\n\n icon?: ReactNode;\n\n /** If true, display a spinner and disables the button */\n loading?: boolean;\n disabled?: boolean;\n\n /**\n * Unlike HTML <button> we deliberately set the default to button to\n * avoid bugs where buttons inadvertently submit forms\n * @default 'button'\n **/\n type?: 'button' | 'submit' | 'reset';\n onClick?: () => void;\n onKeyDown?: KeyboardEventHandler<HTMLElement>;\n id?: string;\n};\n\nexport function buttonClassNames({ variant, block = true }: Pick<ButtonProps, 'variant' | 'block'>) {\n return classNames(styles.button, styles[variant], {\n [styles.block]: block,\n });\n}\n\n// Base renderer for both <a> and <button> based <Button>s\nconst baseButton = (props: ButtonProps & { as?: string }) => {\n const { as, children, icon, onClick, loading, disabled = loading, block, variant, ...otherProps } = props;\n const Element = as as 'button';\n\n let buttonContent = (\n <>\n {icon}\n <span>{children}</span>\n </>\n );\n\n if (loading) {\n buttonContent = <CircularProgress size={20} />;\n }\n\n return (\n <Element className={buttonClassNames(props)} onClick={onClick} disabled={disabled} {...otherProps}>\n {buttonContent}\n </Element>\n );\n};\n\nconst Button = (props: ButtonProps) =>\n baseButton({\n type: 'button',\n as: 'button',\n ...props,\n });\n\nexport default Button;\n\n// Deriving this from ButtonProps is not very neat, but ButtonAnchor is not frequently used\nexport type ButtonAnchorProps = Omit<ButtonProps, 'type' | 'as'> & {\n href: string;\n download?: string;\n target?: string;\n rel?: string;\n};\n\nexport const ButtonAnchor = (props: ButtonAnchorProps) =>\n baseButton({\n ...props,\n // Links don't fire click event on space while buttons do, so we implement that ourselves for these\n // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/button_role#accessibility_concerns\n onKeyDown: (evt) => {\n props.onKeyDown?.(evt);\n if (evt.defaultPrevented) return;\n if (evt.key === ' ') evt.currentTarget.click();\n },\n as: 'a',\n });\n"],"names":["buttonClassNames","variant","block","classNames","styles","button","baseButton","props","as","children","icon","onClick","loading","disabled","otherProps","Element","buttonContent","React","span","CircularProgress","size","className","Button","type","ButtonAnchor","onKeyDown","evt","defaultPrevented","key","currentTarget","click"],"mappings":";;;;;AAgCO,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAAEC,KAAAA,GAAQ,IAAI,EAA0C,EAAA;AAChG,IAAA,OAAOC,WAAWC,gBAAAA,CAAOC,MAAM,EAAED,gBAAM,CAACH,QAAQ,EAAE;QAChD,CAACG,gBAAAA,CAAOF,KAAK,GAAGA;AAClB,KAAA,CAAA;AACF;AAEA;AACA,MAAMI,aAAa,CAACC,KAAAA,GAAAA;IAClB,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,OAAO,EAAEC,OAAO,EAAEC,QAAAA,GAAWD,OAAO,EAAEV,KAAK,EAAED,OAAO,EAAE,GAAGa,YAAY,GAAGP,KAAAA;AACpG,IAAA,MAAMQ,OAAAA,GAAUP,EAAAA;AAEhB,IAAA,IAAIQ,aAAAA,iBACFC,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,EACGP,IAAAA,gBACDO,cAAA,CAAA,aAAA,CAACC,MAAAA,EAAAA,IAAAA,EAAMT,QAAAA,CAAAA,CAAAA;AAIX,IAAA,IAAIG,OAAAA,EAAS;AACXI,QAAAA,aAAAA,iBAAgBC,cAAA,CAAA,aAAA,CAACE,gBAAAA,EAAAA;YAAiBC,IAAAA,EAAM;;AAC1C,IAAA;AAEA,IAAA,qBACEH,cAAA,CAAA,aAAA,CAACF,OAAAA,EAAAA;AAAQM,QAAAA,SAAAA,EAAWrB,gBAAAA,CAAiBO,KAAAA,CAAAA;QAAQI,OAAAA,EAASA,OAAAA;QAASE,QAAAA,EAAUA,QAAAA;AAAW,QAAA,GAAGC;AACpFE,KAAAA,EAAAA,aAAAA,CAAAA;AAGP,CAAA;AAEA,MAAMM,MAAAA,GAAS,CAACf,KAAAA,GACdD,UAAAA,CAAW;QACTiB,IAAAA,EAAM,QAAA;QACNf,EAAAA,EAAI,QAAA;AACJ,QAAA,GAAGD;AACL,KAAA;AAYK,MAAMiB,YAAAA,GAAe,CAACjB,KAAAA,GAC3BD,UAAAA,CAAW;AACT,QAAA,GAAGC,KAAK;;;AAGRkB,QAAAA,SAAAA,EAAW,CAACC,GAAAA,GAAAA;AACVnB,YAAAA,KAAAA,CAAMkB,SAAS,GAAGC,GAAAA,CAAAA;YAClB,IAAIA,GAAAA,CAAIC,gBAAgB,EAAE;AAC1B,YAAA,IAAID,IAAIE,GAAG,KAAK,KAAKF,GAAAA,CAAIG,aAAa,CAACC,KAAK,EAAA;AAC9C,QAAA,CAAA;QACAtB,EAAAA,EAAI;KACN;;;;"}
@@ -6,7 +6,7 @@ import Input from './Input.mjs';
6
6
  const EmailInput = ({ email, setEmail, hasPasskeys = false, ...additionalProps })=>{
7
7
  const { i18n: $__i18n, _: $__ } = useLingui();
8
8
  return /*#__PURE__*/ React__default.createElement(Input, {
9
- id: "email",
9
+ id: "email-input",
10
10
  label: $__i18n._({
11
11
  id: "formField.email.label",
12
12
  message: "Email"
@@ -1 +1 @@
1
- {"version":3,"file":"EmailInput.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/EmailInput.tsx"],"sourcesContent":["import React from 'react';\nimport { useLingui } from '@lingui/react/macro';\nimport { passwordManagerDisableAutofillProps } from '../../../utils/passwordManagerDisableAutofillProps';\nimport Input from './Input';\n\nconst EmailInput = ({\n email,\n setEmail,\n hasPasskeys = false,\n ...additionalProps\n}: {\n email: string;\n setEmail: (email: string) => void;\n hasPasskeys?: boolean;\n\n // Passed through\n hideLabel?: boolean;\n disabled?: boolean;\n error?: string;\n}) => {\n const { t } = useLingui();\n return (\n <Input\n id=\"email\"\n label={t({ id: 'formField.email.label', message: 'Email' })}\n placeholder={t({ id: 'formField.email.placeholder', message: 'example@email.com' })}\n type=\"email\"\n autoComplete={hasPasskeys ? 'username webauthn' : 'email'}\n value={email}\n onChange={(e) => setEmail(e.target.value)}\n required\n // We want to block 1PW's autofill when passkeys is enabled for now\n // (it is breaking to our integration)\n {...(hasPasskeys ? passwordManagerDisableAutofillProps : {})}\n {...additionalProps}\n />\n );\n};\n\nexport default EmailInput;\n"],"names":["EmailInput","email","setEmail","hasPasskeys","additionalProps","useLingui","React","Input","id","label","placeholder","type","autoComplete","value","onChange","e","target","required","passwordManagerDisableAutofillProps"],"mappings":";;;;;AAKA,MAAMA,UAAAA,GAAa,CAAC,EAClBC,KAAK,EACLC,QAAQ,EACRC,WAAAA,GAAc,KAAK,EACnB,GAAGC,eAAAA,EAUJ,GAAA;AACC,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;QACCC,EAAAA,EAAG,OAAA;QACHC,KAAK,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACLC,WAAW,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACXC,IAAAA,EAAK,OAAA;AACLC,QAAAA,YAAAA,EAAcT,cAAc,mBAAA,GAAsB,OAAA;QAClDU,KAAAA,EAAOZ,KAAAA;AACPa,QAAAA,QAAAA,EAAU,CAACC,CAAAA,GAAMb,QAAAA,CAASa,CAAAA,CAAEC,MAAM,CAACH,KAAK,CAAA;QACxCI,QAAAA,EAAAA,IAAAA;QAGC,GAAId,WAAAA,GAAce,mCAAAA,GAAsC,EAAE;AAC1D,QAAA,GAAGd;;AAGV;;;;"}
1
+ {"version":3,"file":"EmailInput.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/EmailInput.tsx"],"sourcesContent":["import React from 'react';\nimport { useLingui } from '@lingui/react/macro';\nimport { passwordManagerDisableAutofillProps } from '../../../utils/passwordManagerDisableAutofillProps';\nimport Input from './Input';\n\nconst EmailInput = ({\n email,\n setEmail,\n hasPasskeys = false,\n ...additionalProps\n}: {\n email: string;\n setEmail: (email: string) => void;\n hasPasskeys?: boolean;\n\n // Passed through\n hideLabel?: boolean;\n disabled?: boolean;\n error?: string;\n}) => {\n const { t } = useLingui();\n return (\n <Input\n id=\"email-input\"\n label={t({ id: 'formField.email.label', message: 'Email' })}\n placeholder={t({ id: 'formField.email.placeholder', message: 'example@email.com' })}\n type=\"email\"\n autoComplete={hasPasskeys ? 'username webauthn' : 'email'}\n value={email}\n onChange={(e) => setEmail(e.target.value)}\n required\n // We want to block 1PW's autofill when passkeys is enabled for now\n // (it is breaking to our integration)\n {...(hasPasskeys ? passwordManagerDisableAutofillProps : {})}\n {...additionalProps}\n />\n );\n};\n\nexport default EmailInput;\n"],"names":["EmailInput","email","setEmail","hasPasskeys","additionalProps","useLingui","React","Input","id","label","placeholder","type","autoComplete","value","onChange","e","target","required","passwordManagerDisableAutofillProps"],"mappings":";;;;;AAKA,MAAMA,UAAAA,GAAa,CAAC,EAClBC,KAAK,EACLC,QAAQ,EACRC,WAAAA,GAAc,KAAK,EACnB,GAAGC,eAAAA,EAUJ,GAAA;AACC,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;QACCC,EAAAA,EAAG,aAAA;QACHC,KAAK,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACLC,WAAW,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACXC,IAAAA,EAAK,OAAA;AACLC,QAAAA,YAAAA,EAAcT,cAAc,mBAAA,GAAsB,OAAA;QAClDU,KAAAA,EAAOZ,KAAAA;AACPa,QAAAA,QAAAA,EAAU,CAACC,CAAAA,GAAMb,QAAAA,CAASa,CAAAA,CAAEC,MAAM,CAACH,KAAK,CAAA;QACxCI,QAAAA,EAAAA,IAAAA;QAGC,GAAId,WAAAA,GAAce,mCAAAA,GAAsC,EAAE;AAC1D,QAAA,GAAGd;;AAGV;;;;"}
@@ -12,7 +12,7 @@ import { usePresentation } from '../PresentationConfig.mjs';
12
12
  * You may want to use a more specific component in /molecules instead like {@link EmailInput}, {@link PasswordInput}
13
13
  */ const Input = /*#__PURE__*/ forwardRef(({ className, label: labelText, hideLabel, action, id: idProp, containerClassName, error, ...props }, ref)=>{
14
14
  const presentation = usePresentation();
15
- const id = idProp + (presentation.options?.inputIdSuffix || '');
15
+ const id = idProp + (presentation.options?.inputIdSuffix ?? '');
16
16
  const errorId = useUniqueId();
17
17
  // Calculate the width of the action element and add it to the input padding so the input content
18
18
  // cannot go behind the action
@@ -1 +1 @@
1
- {"version":3,"file":"Input.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/Input.tsx"],"sourcesContent":["import React, { forwardRef, InputHTMLAttributes, ReactNode, useLayoutEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useUniqueId } from '../../../utils/uniqueId';\nimport ErrorText from './ErrorText';\nimport VisuallyHidden from '../atoms/VisuallyHidden';\nimport styles from './Input.module.css';\nimport { usePresentation } from '../PresentationConfig';\n\nexport type InputProps = InputHTMLAttributes<HTMLInputElement> & {\n label: string;\n id: string;\n containerClassName?: string;\n hideLabel?: boolean;\n action?: ReactNode;\n error?: string;\n};\n\n/**\n * Generic low level text Input element\n * A label must be provided for accessibility, but can be hidden using the `hideLabel` prop\n * You may want to use a more specific component in /molecules instead like {@link EmailInput}, {@link PasswordInput}\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n ({ className, label: labelText, hideLabel, action, id: idProp, containerClassName, error, ...props }, ref) => {\n const presentation = usePresentation();\n const id = idProp + (presentation.options?.inputIdSuffix || '');\n\n const errorId = useUniqueId();\n\n // Calculate the width of the action element and add it to the input padding so the input content\n // cannot go behind the action\n const actionRef = useRef<HTMLDivElement>(null);\n const [actionWidth, setActionWidth] = useState<number>();\n useLayoutEffect(() => {\n if (actionRef.current) {\n // getBoundingClientRect accounts for transformations while clientWidth does not\n setActionWidth(actionRef.current.getBoundingClientRect().width);\n }\n }, [action]);\n\n const label = (\n <label className={styles.label} htmlFor={id}>\n {labelText}\n </label>\n );\n\n if (error) {\n props['aria-invalid'] = true;\n props['aria-errormessage'] = errorId;\n }\n\n return (\n <div className={classNames(containerClassName, styles.container)}>\n {hideLabel ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n\n <div className={styles.inputWrapper}>\n <input\n ref={ref}\n id={id}\n className={classNames(className, styles.input)}\n style={\n actionWidth\n ? {\n // spacing-4 because action has a 2 unit horizontal margin\n paddingInlineEnd: `calc(${actionWidth}px + var(--st-spacing-4))`,\n }\n : undefined\n }\n {...props}\n />\n {action && (\n <div ref={actionRef} className={styles.action}>\n {action}\n </div>\n )}\n </div>\n\n {error && (\n <ErrorText id={errorId} className={styles.error} aria-live=\"polite\">\n {error}\n </ErrorText>\n )}\n </div>\n );\n },\n);\n\nexport default Input;\n"],"names":["Input","forwardRef","className","label","labelText","hideLabel","action","id","idProp","containerClassName","error","props","ref","presentation","usePresentation","options","inputIdSuffix","errorId","useUniqueId","actionRef","useRef","actionWidth","setActionWidth","useState","useLayoutEffect","current","getBoundingClientRect","width","React","styles","htmlFor","div","classNames","container","VisuallyHidden","inputWrapper","input","style","paddingInlineEnd","undefined","ErrorText","aria-live"],"mappings":";;;;;;;;AAiBA;;;;IAKA,MAAMA,sBAAQC,UAAAA,CACZ,CAAC,EAAEC,SAAS,EAAEC,KAAAA,EAAOC,SAAS,EAAEC,SAAS,EAAEC,MAAM,EAAEC,EAAAA,EAAIC,MAAM,EAAEC,kBAAkB,EAAEC,KAAK,EAAE,GAAGC,KAAAA,EAAO,EAAEC,GAAAA,GAAAA;AACpG,IAAA,MAAMC,YAAAA,GAAeC,eAAAA,EAAAA;AACrB,IAAA,MAAMP,KAAKC,MAAAA,IAAUK,aAAaE,OAAO,EAAEC,iBAAiB,EAAC,CAAA;AAE7D,IAAA,MAAMC,OAAAA,GAAUC,WAAAA,EAAAA;;;AAIhB,IAAA,MAAMC,YAAYC,MAAAA,CAAuB,IAAA,CAAA;IACzC,MAAM,CAACC,WAAAA,EAAaC,cAAAA,CAAe,GAAGC,QAAAA,EAAAA;IACtCC,eAAAA,CAAgB,IAAA;QACd,IAAIL,SAAAA,CAAUM,OAAO,EAAE;;AAErBH,YAAAA,cAAAA,CAAeH,SAAAA,CAAUM,OAAO,CAACC,qBAAqB,GAAGC,KAAK,CAAA;AAChE,QAAA;IACF,CAAA,EAAG;AAACrB,QAAAA;AAAO,KAAA,CAAA;AAEX,IAAA,MAAMH,sBACJyB,cAAA,CAAA,aAAA,CAACzB,OAAAA,EAAAA;AAAMD,QAAAA,SAAAA,EAAW2B,iBAAO1B,KAAK;QAAE2B,OAAAA,EAASvB;AACtCH,KAAAA,EAAAA,SAAAA,CAAAA;AAIL,IAAA,IAAIM,KAAAA,EAAO;QACTC,KAAK,CAAC,eAAe,GAAG,IAAA;QACxBA,KAAK,CAAC,oBAAoB,GAAGM,OAAAA;AAC/B,IAAA;AAEA,IAAA,qBACEW,cAAA,CAAA,aAAA,CAACG,KAAAA,EAAAA;QAAI7B,SAAAA,EAAW8B,UAAAA,CAAWvB,kBAAAA,EAAoBoB,gBAAAA,CAAOI,SAAS;AAC5D5B,KAAAA,EAAAA,SAAAA,iBAAYuB,cAAA,CAAA,aAAA,CAACM,cAAAA,EAAAA,IAAAA,EAAgB/B,KAAAA,CAAAA,GAA0BA,KAAAA,gBAExDyB,cAAA,CAAA,aAAA,CAACG,KAAAA,EAAAA;AAAI7B,QAAAA,SAAAA,EAAW2B,iBAAOM;qBACrBP,cAAA,CAAA,aAAA,CAACQ,OAAAA,EAAAA;QACCxB,GAAAA,EAAKA,GAAAA;QACLL,EAAAA,EAAIA,EAAAA;QACJL,SAAAA,EAAW8B,UAAAA,CAAW9B,SAAAA,EAAW2B,gBAAAA,CAAOO,KAAK,CAAA;AAC7CC,QAAAA,KAAAA,EACEhB,WAAAA,GACI;;AAEEiB,YAAAA,gBAAAA,EAAkB,CAAC,KAAK,EAAEjB,WAAAA,CAAY,yBAAyB;SACjE,GACAkB,SAAAA;AAEL,QAAA,GAAG5B;AAELL,KAAAA,CAAAA,EAAAA,MAAAA,kBACCsB,cAAA,CAAA,aAAA,CAACG,KAAAA,EAAAA;QAAInB,GAAAA,EAAKO,SAAAA;AAAWjB,QAAAA,SAAAA,EAAW2B,iBAAOvB;AACpCA,KAAAA,EAAAA,MAAAA,CAAAA,CAAAA,EAKNI,uBACCkB,cAAA,CAAA,aAAA,CAACY,SAAAA,EAAAA;QAAUjC,EAAAA,EAAIU,OAAAA;AAASf,QAAAA,SAAAA,EAAW2B,iBAAOnB,KAAK;QAAE+B,WAAAA,EAAU;AACxD/B,KAAAA,EAAAA,KAAAA,CAAAA,CAAAA;AAKX,CAAA;;;;"}
1
+ {"version":3,"file":"Input.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/Input.tsx"],"sourcesContent":["import React, { forwardRef, InputHTMLAttributes, ReactNode, useLayoutEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useUniqueId } from '../../../utils/uniqueId';\nimport ErrorText from './ErrorText';\nimport VisuallyHidden from '../atoms/VisuallyHidden';\nimport styles from './Input.module.css';\nimport { usePresentation } from '../PresentationConfig';\n\nexport type InputProps = InputHTMLAttributes<HTMLInputElement> & {\n label: string;\n id: string;\n containerClassName?: string;\n hideLabel?: boolean;\n action?: ReactNode;\n error?: string;\n};\n\n/**\n * Generic low level text Input element\n * A label must be provided for accessibility, but can be hidden using the `hideLabel` prop\n * You may want to use a more specific component in /molecules instead like {@link EmailInput}, {@link PasswordInput}\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n ({ className, label: labelText, hideLabel, action, id: idProp, containerClassName, error, ...props }, ref) => {\n const presentation = usePresentation();\n const id = idProp + (presentation.options?.inputIdSuffix ?? '');\n\n const errorId = useUniqueId();\n\n // Calculate the width of the action element and add it to the input padding so the input content\n // cannot go behind the action\n const actionRef = useRef<HTMLDivElement>(null);\n const [actionWidth, setActionWidth] = useState<number>();\n useLayoutEffect(() => {\n if (actionRef.current) {\n // getBoundingClientRect accounts for transformations while clientWidth does not\n setActionWidth(actionRef.current.getBoundingClientRect().width);\n }\n }, [action]);\n\n const label = (\n <label className={styles.label} htmlFor={id}>\n {labelText}\n </label>\n );\n\n if (error) {\n props['aria-invalid'] = true;\n props['aria-errormessage'] = errorId;\n }\n\n return (\n <div className={classNames(containerClassName, styles.container)}>\n {hideLabel ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n\n <div className={styles.inputWrapper}>\n <input\n ref={ref}\n id={id}\n className={classNames(className, styles.input)}\n style={\n actionWidth\n ? {\n // spacing-4 because action has a 2 unit horizontal margin\n paddingInlineEnd: `calc(${actionWidth}px + var(--st-spacing-4))`,\n }\n : undefined\n }\n {...props}\n />\n {action && (\n <div ref={actionRef} className={styles.action}>\n {action}\n </div>\n )}\n </div>\n\n {error && (\n <ErrorText id={errorId} className={styles.error} aria-live=\"polite\">\n {error}\n </ErrorText>\n )}\n </div>\n );\n },\n);\n\nexport default Input;\n"],"names":["Input","forwardRef","className","label","labelText","hideLabel","action","id","idProp","containerClassName","error","props","ref","presentation","usePresentation","options","inputIdSuffix","errorId","useUniqueId","actionRef","useRef","actionWidth","setActionWidth","useState","useLayoutEffect","current","getBoundingClientRect","width","React","styles","htmlFor","div","classNames","container","VisuallyHidden","inputWrapper","input","style","paddingInlineEnd","undefined","ErrorText","aria-live"],"mappings":";;;;;;;;AAiBA;;;;IAKA,MAAMA,sBAAQC,UAAAA,CACZ,CAAC,EAAEC,SAAS,EAAEC,KAAAA,EAAOC,SAAS,EAAEC,SAAS,EAAEC,MAAM,EAAEC,EAAAA,EAAIC,MAAM,EAAEC,kBAAkB,EAAEC,KAAK,EAAE,GAAGC,KAAAA,EAAO,EAAEC,GAAAA,GAAAA;AACpG,IAAA,MAAMC,YAAAA,GAAeC,eAAAA,EAAAA;AACrB,IAAA,MAAMP,KAAKC,MAAAA,IAAUK,aAAaE,OAAO,EAAEC,iBAAiB,EAAC,CAAA;AAE7D,IAAA,MAAMC,OAAAA,GAAUC,WAAAA,EAAAA;;;AAIhB,IAAA,MAAMC,YAAYC,MAAAA,CAAuB,IAAA,CAAA;IACzC,MAAM,CAACC,WAAAA,EAAaC,cAAAA,CAAe,GAAGC,QAAAA,EAAAA;IACtCC,eAAAA,CAAgB,IAAA;QACd,IAAIL,SAAAA,CAAUM,OAAO,EAAE;;AAErBH,YAAAA,cAAAA,CAAeH,SAAAA,CAAUM,OAAO,CAACC,qBAAqB,GAAGC,KAAK,CAAA;AAChE,QAAA;IACF,CAAA,EAAG;AAACrB,QAAAA;AAAO,KAAA,CAAA;AAEX,IAAA,MAAMH,sBACJyB,cAAA,CAAA,aAAA,CAACzB,OAAAA,EAAAA;AAAMD,QAAAA,SAAAA,EAAW2B,iBAAO1B,KAAK;QAAE2B,OAAAA,EAASvB;AACtCH,KAAAA,EAAAA,SAAAA,CAAAA;AAIL,IAAA,IAAIM,KAAAA,EAAO;QACTC,KAAK,CAAC,eAAe,GAAG,IAAA;QACxBA,KAAK,CAAC,oBAAoB,GAAGM,OAAAA;AAC/B,IAAA;AAEA,IAAA,qBACEW,cAAA,CAAA,aAAA,CAACG,KAAAA,EAAAA;QAAI7B,SAAAA,EAAW8B,UAAAA,CAAWvB,kBAAAA,EAAoBoB,gBAAAA,CAAOI,SAAS;AAC5D5B,KAAAA,EAAAA,SAAAA,iBAAYuB,cAAA,CAAA,aAAA,CAACM,cAAAA,EAAAA,IAAAA,EAAgB/B,KAAAA,CAAAA,GAA0BA,KAAAA,gBAExDyB,cAAA,CAAA,aAAA,CAACG,KAAAA,EAAAA;AAAI7B,QAAAA,SAAAA,EAAW2B,iBAAOM;qBACrBP,cAAA,CAAA,aAAA,CAACQ,OAAAA,EAAAA;QACCxB,GAAAA,EAAKA,GAAAA;QACLL,EAAAA,EAAIA,EAAAA;QACJL,SAAAA,EAAW8B,UAAAA,CAAW9B,SAAAA,EAAW2B,gBAAAA,CAAOO,KAAK,CAAA;AAC7CC,QAAAA,KAAAA,EACEhB,WAAAA,GACI;;AAEEiB,YAAAA,gBAAAA,EAAkB,CAAC,KAAK,EAAEjB,WAAAA,CAAY,yBAAyB;SACjE,GACAkB,SAAAA;AAEL,QAAA,GAAG5B;AAELL,KAAAA,CAAAA,EAAAA,MAAAA,kBACCsB,cAAA,CAAA,aAAA,CAACG,KAAAA,EAAAA;QAAInB,GAAAA,EAAKO,SAAAA;AAAWjB,QAAAA,SAAAA,EAAW2B,iBAAOvB;AACpCA,KAAAA,EAAAA,MAAAA,CAAAA,CAAAA,EAKNI,uBACCkB,cAAA,CAAA,aAAA,CAACY,SAAAA,EAAAA;QAAUjC,EAAAA,EAAIU,OAAAA;AAASf,QAAAA,SAAAA,EAAW2B,iBAAOnB,KAAK;QAAE+B,WAAAA,EAAU;AACxD/B,KAAAA,EAAAA,KAAAA,CAAAA,CAAAA;AAKX,CAAA;;;;"}
@@ -1,7 +1,7 @@
1
- import { b as bs58Exports } from '../../../../_virtual/index4.mjs';
1
+ import { b as bs58Exports } from '../../../../_virtual/index3.mjs';
2
2
  import 'react';
3
3
  import { GenericWalletIcon } from '../assets/genericWallet.mjs';
4
- import { usePresentation } from '../ui/components/PresentationConfig.mjs';
4
+ import { usePresentation, getButtonId } from '../ui/components/PresentationConfig.mjs';
5
5
  import { Wallets } from '../../../core/src/public/ui.mjs';
6
6
 
7
7
  const hasMultipleEthereumWallets = ()=>!!window.ethereum?.providers;
@@ -17,11 +17,15 @@ const walletIcons = {
17
17
  [Wallets.Coinbase]: 'coinbase',
18
18
  [Wallets.Metamask]: 'metamask'
19
19
  };
20
- const useCryptoIcon = ()=>{
21
- const iconRegistry = usePresentation().iconRegistry;
22
- return (wallet)=>{
23
- const iconName = walletIcons[wallet];
24
- return iconName ? iconRegistry[iconName] : GenericWalletIcon;
20
+ const useCryptoButtonProps = ()=>{
21
+ const presentation = usePresentation();
22
+ const iconRegistry = presentation.iconRegistry;
23
+ return {
24
+ getIcon: (wallet)=>{
25
+ const iconName = walletIcons[wallet];
26
+ return iconName ? iconRegistry[iconName] : GenericWalletIcon;
27
+ },
28
+ getId: (wallet)=>getButtonId(`wallet-${wallet}`, presentation.options)
25
29
  };
26
30
  };
27
31
  const WalletToText = {
@@ -168,5 +172,5 @@ const isSolanaWallet = (wallet)=>{
168
172
  return solanaWallets.includes(wallet);
169
173
  };
170
174
 
171
- export { WalletToText, connectWithWallet, isSolanaWallet, isWalletVisible, signMessageWithWallet, useCryptoIcon, walletIcons };
175
+ export { WalletToText, connectWithWallet, isSolanaWallet, isWalletVisible, signMessageWithWallet, useCryptoButtonProps, walletIcons };
172
176
  //# sourceMappingURL=crypto.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"crypto.mjs","sources":["../../../../../../../web/src/utils/crypto.tsx"],"sourcesContent":["import { MessageDescriptor } from '@lingui/core';\nimport { msg } from '@lingui/core/macro';\nimport { Wallets } from '@stytch/core/public';\nimport { encode } from 'bs58';\n\nimport { GenericWalletIcon } from '../assets';\nimport { cryptoIcons } from '../ui/b2c/components/Icons';\nimport { IconRegistry } from '../ui/components/IconRegistry';\nimport { usePresentation } from '../ui/components/PresentationConfig';\n\ntype ProviderRequest = ({\n method,\n params,\n}: {\n method: 'eth_requestAccounts' | 'personal_sign';\n params?: string[];\n}) => string[] | string;\n\ntype ETHProvider = {\n isMetaMask?: boolean;\n isCoinbaseWallet?: boolean;\n request: ProviderRequest;\n};\n\ndeclare global {\n interface Window {\n solana: {\n isPhantom?: boolean;\n connect: () => { publicKey: { toString: () => string } };\n request: ({\n method,\n params,\n }: {\n method: 'signMessage';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n params: Record<string, any>;\n }) => { signature: Uint8Array };\n };\n\n ethereum: {\n isMetaMask?: boolean;\n isCoinbaseWallet?: boolean;\n request?: ({ method, params }: { method: string; params?: string[] }) => string[] | string;\n providers?: ETHProvider[];\n };\n\n BinanceChain: { request: ProviderRequest };\n }\n}\n\nconst hasMultipleEthereumWallets = () => !!window.ethereum?.providers;\n\nconst hasMetaMask = () =>\n !!(hasMultipleEthereumWallets()\n ? window.ethereum.providers?.find((wallet) => wallet.isMetaMask)\n : window.ethereum.isMetaMask);\n\nconst hasCoinbaseWallet = () =>\n !!(hasMultipleEthereumWallets()\n ? window.ethereum.providers?.find((wallet) => wallet.isCoinbaseWallet)\n : window.ethereum?.isCoinbaseWallet);\n\nconst hasOtherEthereumWallet = () => !hasMetaMask() && !hasCoinbaseWallet() && !!window.ethereum;\n\nconst getMetaMaskProvider = () =>\n hasMultipleEthereumWallets() ? window.ethereum.providers?.find((wallet) => wallet.isMetaMask) : window.ethereum;\n\nconst getCoinbaseProvider = () =>\n hasMultipleEthereumWallets() ? window.ethereum.providers?.find((wallet) => wallet.isCoinbaseWallet) : window.ethereum;\n\nconst getOtherInjectedProvider = () =>\n window.ethereum.providers?.find((wallet) => !wallet.isCoinbaseWallet && !wallet.isMetaMask);\n\ntype CryptoIcon = keyof typeof cryptoIcons;\nexport const walletIcons: Partial<Record<Wallets, CryptoIcon>> = {\n [Wallets.Phantom]: 'phantom',\n [Wallets.Binance]: 'binance',\n [Wallets.Coinbase]: 'coinbase',\n [Wallets.Metamask]: 'metamask',\n};\n\nexport const useCryptoIcon = () => {\n const iconRegistry: IconRegistry<CryptoIcon> = usePresentation().iconRegistry;\n return (wallet: Wallets) => {\n const iconName = walletIcons[wallet];\n return iconName ? iconRegistry[iconName] : GenericWalletIcon;\n };\n};\n\nexport const WalletToText: Record<Wallets, MessageDescriptor> = {\n [Wallets.Phantom]: msg({ id: 'crypto.wallet.phantom', message: 'Phantom' }),\n [Wallets.Binance]: msg({ id: 'crypto.wallet.binance', message: 'Binance' }),\n [Wallets.Coinbase]: msg({ id: 'crypto.wallet.coinbase', message: 'Coinbase' }),\n [Wallets.Metamask]: msg({ id: 'crypto.wallet.metamask', message: 'Metamask' }),\n [Wallets.GenericEthereumWallet]: msg({ id: 'crypto.wallet.otherEthereum', message: 'Other Ethereum Wallet' }),\n [Wallets.GenericSolanaWallet]: msg({ id: 'crypto.wallet.otherSolana', message: 'Other Solana Wallet' }),\n};\n\nexport const isWalletVisible = (wallet: Wallets): boolean => {\n switch (wallet) {\n case Wallets.Metamask:\n return !!window.ethereum && hasMetaMask();\n case Wallets.Phantom:\n return (!!window.solana && window.solana?.isPhantom) ?? false;\n case Wallets.Binance:\n return !!window.BinanceChain;\n case Wallets.Coinbase:\n return !!window.ethereum && hasCoinbaseWallet();\n case Wallets.GenericEthereumWallet:\n return !!window.ethereum && hasOtherEthereumWallet();\n case Wallets.GenericSolanaWallet:\n return !!window.solana && !window.solana.isPhantom;\n default:\n return false;\n }\n};\n\nconst connectWithEthereumProvider = async (request: ProviderRequest): Promise<string> => {\n const [address] = await request({\n method: 'eth_requestAccounts',\n });\n return address;\n};\n\nexport const connectWithWallet = async ({ wallet }: { wallet: Wallets }): Promise<string> => {\n switch (wallet) {\n case Wallets.Metamask: {\n const provider = getMetaMaskProvider();\n return provider?.request ? connectWithEthereumProvider(provider?.request) : '';\n }\n case Wallets.Phantom: {\n const connectResp = await window.solana.connect();\n return connectResp.publicKey.toString();\n }\n case Wallets.Binance: {\n const provider = window.BinanceChain;\n return provider?.request ? connectWithEthereumProvider(provider?.request) : '';\n }\n case Wallets.Coinbase: {\n const provider = getCoinbaseProvider();\n return provider?.request ? connectWithEthereumProvider(provider?.request) : '';\n }\n case Wallets.GenericEthereumWallet: {\n const provider = getOtherInjectedProvider();\n return provider?.request ? connectWithEthereumProvider(provider?.request) : '';\n }\n case Wallets.GenericSolanaWallet: {\n const connectResp = await window.solana.connect();\n return connectResp.publicKey.toString();\n }\n default:\n return '';\n }\n};\n\nconst signMessageWithSolanaProvider = async (message: string): Promise<string> => {\n const encodedMessage = new TextEncoder().encode(message);\n const signResp = await window.solana.request({\n method: 'signMessage',\n params: {\n message: encodedMessage,\n display: 'utf8',\n },\n });\n return encode(signResp.signature);\n};\n\nconst signMessageWithEthereumProvider = async (\n request: ProviderRequest,\n message: string,\n address: string,\n): Promise<string> => {\n const signature = await request({\n method: 'personal_sign',\n params: [message, address],\n });\n return signature as string;\n};\n\nexport const signMessageWithWallet = async ({\n wallet,\n message,\n address,\n}: {\n wallet: Wallets;\n message: string;\n address: string;\n}): Promise<string> => {\n switch (wallet) {\n case Wallets.Phantom:\n case Wallets.GenericSolanaWallet:\n return signMessageWithSolanaProvider(message);\n case Wallets.Metamask: {\n const provider = getMetaMaskProvider();\n return provider?.request ? signMessageWithEthereumProvider(provider?.request, message, address) : '';\n }\n case Wallets.Binance: {\n const provider = window.BinanceChain;\n return provider?.request ? signMessageWithEthereumProvider(provider?.request, message, address) : '';\n }\n case Wallets.Coinbase: {\n const provider = getCoinbaseProvider();\n return provider?.request ? signMessageWithEthereumProvider(provider?.request, message, address) : '';\n }\n case Wallets.GenericEthereumWallet: {\n const provider = getOtherInjectedProvider();\n return provider?.request ? signMessageWithEthereumProvider(provider?.request, message, address) : '';\n }\n default:\n return '';\n }\n};\n\nexport const isSolanaWallet = (wallet: Wallets) => {\n const solanaWallets: Wallets[] = [Wallets.Phantom, Wallets.GenericSolanaWallet];\n return solanaWallets.includes(wallet);\n};\n\nexport const isEthereumWallet = (wallet: Wallets) => {\n const ethWallets: Wallets[] = [Wallets.Binance, Wallets.GenericEthereumWallet, Wallets.Coinbase, Wallets.Metamask];\n return ethWallets.includes(wallet);\n};\n"],"names":["hasMultipleEthereumWallets","window","ethereum","providers","hasMetaMask","find","wallet","isMetaMask","hasCoinbaseWallet","isCoinbaseWallet","hasOtherEthereumWallet","getMetaMaskProvider","getCoinbaseProvider","getOtherInjectedProvider","walletIcons","Wallets","Phantom","Binance","Coinbase","Metamask","useCryptoIcon","iconRegistry","usePresentation","iconName","GenericWalletIcon","WalletToText","GenericEthereumWallet","GenericSolanaWallet","isWalletVisible","solana","isPhantom","BinanceChain","connectWithEthereumProvider","request","address","method","connectWithWallet","provider","connectResp","connect","publicKey","toString","signMessageWithSolanaProvider","message","encodedMessage","TextEncoder","encode","signResp","params","display","signature","signMessageWithEthereumProvider","signMessageWithWallet","isSolanaWallet","solanaWallets","includes"],"mappings":"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"}
1
+ {"version":3,"file":"crypto.mjs","sources":["../../../../../../../web/src/utils/crypto.tsx"],"sourcesContent":["import { MessageDescriptor } from '@lingui/core';\nimport { msg } from '@lingui/core/macro';\nimport { Wallets } from '@stytch/core/public';\nimport { encode } from 'bs58';\n\nimport { GenericWalletIcon } from '../assets';\nimport { cryptoIcons } from '../ui/b2c/components/Icons';\nimport { IconRegistry } from '../ui/components/IconRegistry';\nimport { getButtonId, usePresentation } from '../ui/components/PresentationConfig';\n\ntype ProviderRequest = ({\n method,\n params,\n}: {\n method: 'eth_requestAccounts' | 'personal_sign';\n params?: string[];\n}) => string[] | string;\n\ntype ETHProvider = {\n isMetaMask?: boolean;\n isCoinbaseWallet?: boolean;\n request: ProviderRequest;\n};\n\ndeclare global {\n interface Window {\n solana: {\n isPhantom?: boolean;\n connect: () => { publicKey: { toString: () => string } };\n request: ({\n method,\n params,\n }: {\n method: 'signMessage';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n params: Record<string, any>;\n }) => { signature: Uint8Array };\n };\n\n ethereum: {\n isMetaMask?: boolean;\n isCoinbaseWallet?: boolean;\n request?: ({ method, params }: { method: string; params?: string[] }) => string[] | string;\n providers?: ETHProvider[];\n };\n\n BinanceChain: { request: ProviderRequest };\n }\n}\n\nconst hasMultipleEthereumWallets = () => !!window.ethereum?.providers;\n\nconst hasMetaMask = () =>\n !!(hasMultipleEthereumWallets()\n ? window.ethereum.providers?.find((wallet) => wallet.isMetaMask)\n : window.ethereum.isMetaMask);\n\nconst hasCoinbaseWallet = () =>\n !!(hasMultipleEthereumWallets()\n ? window.ethereum.providers?.find((wallet) => wallet.isCoinbaseWallet)\n : window.ethereum?.isCoinbaseWallet);\n\nconst hasOtherEthereumWallet = () => !hasMetaMask() && !hasCoinbaseWallet() && !!window.ethereum;\n\nconst getMetaMaskProvider = () =>\n hasMultipleEthereumWallets() ? window.ethereum.providers?.find((wallet) => wallet.isMetaMask) : window.ethereum;\n\nconst getCoinbaseProvider = () =>\n hasMultipleEthereumWallets() ? window.ethereum.providers?.find((wallet) => wallet.isCoinbaseWallet) : window.ethereum;\n\nconst getOtherInjectedProvider = () =>\n window.ethereum.providers?.find((wallet) => !wallet.isCoinbaseWallet && !wallet.isMetaMask);\n\ntype CryptoIcon = keyof typeof cryptoIcons;\nexport const walletIcons: Partial<Record<Wallets, CryptoIcon>> = {\n [Wallets.Phantom]: 'phantom',\n [Wallets.Binance]: 'binance',\n [Wallets.Coinbase]: 'coinbase',\n [Wallets.Metamask]: 'metamask',\n};\n\nexport const useCryptoButtonProps = () => {\n const presentation = usePresentation();\n const iconRegistry: IconRegistry<CryptoIcon> = presentation.iconRegistry;\n\n return {\n getIcon: (wallet: Wallets) => {\n const iconName = walletIcons[wallet];\n return iconName ? iconRegistry[iconName] : GenericWalletIcon;\n },\n getId: (wallet: Wallets) => getButtonId(`wallet-${wallet}`, presentation.options),\n };\n};\n\nexport const WalletToText: Record<Wallets, MessageDescriptor> = {\n [Wallets.Phantom]: msg({ id: 'crypto.wallet.phantom', message: 'Phantom' }),\n [Wallets.Binance]: msg({ id: 'crypto.wallet.binance', message: 'Binance' }),\n [Wallets.Coinbase]: msg({ id: 'crypto.wallet.coinbase', message: 'Coinbase' }),\n [Wallets.Metamask]: msg({ id: 'crypto.wallet.metamask', message: 'Metamask' }),\n [Wallets.GenericEthereumWallet]: msg({ id: 'crypto.wallet.otherEthereum', message: 'Other Ethereum Wallet' }),\n [Wallets.GenericSolanaWallet]: msg({ id: 'crypto.wallet.otherSolana', message: 'Other Solana Wallet' }),\n};\n\nexport const isWalletVisible = (wallet: Wallets): boolean => {\n switch (wallet) {\n case Wallets.Metamask:\n return !!window.ethereum && hasMetaMask();\n case Wallets.Phantom:\n return (!!window.solana && window.solana?.isPhantom) ?? false;\n case Wallets.Binance:\n return !!window.BinanceChain;\n case Wallets.Coinbase:\n return !!window.ethereum && hasCoinbaseWallet();\n case Wallets.GenericEthereumWallet:\n return !!window.ethereum && hasOtherEthereumWallet();\n case Wallets.GenericSolanaWallet:\n return !!window.solana && !window.solana.isPhantom;\n default:\n return false;\n }\n};\n\nconst connectWithEthereumProvider = async (request: ProviderRequest): Promise<string> => {\n const [address] = await request({\n method: 'eth_requestAccounts',\n });\n return address;\n};\n\nexport const connectWithWallet = async ({ wallet }: { wallet: Wallets }): Promise<string> => {\n switch (wallet) {\n case Wallets.Metamask: {\n const provider = getMetaMaskProvider();\n return provider?.request ? connectWithEthereumProvider(provider?.request) : '';\n }\n case Wallets.Phantom: {\n const connectResp = await window.solana.connect();\n return connectResp.publicKey.toString();\n }\n case Wallets.Binance: {\n const provider = window.BinanceChain;\n return provider?.request ? connectWithEthereumProvider(provider?.request) : '';\n }\n case Wallets.Coinbase: {\n const provider = getCoinbaseProvider();\n return provider?.request ? connectWithEthereumProvider(provider?.request) : '';\n }\n case Wallets.GenericEthereumWallet: {\n const provider = getOtherInjectedProvider();\n return provider?.request ? connectWithEthereumProvider(provider?.request) : '';\n }\n case Wallets.GenericSolanaWallet: {\n const connectResp = await window.solana.connect();\n return connectResp.publicKey.toString();\n }\n default:\n return '';\n }\n};\n\nconst signMessageWithSolanaProvider = async (message: string): Promise<string> => {\n const encodedMessage = new TextEncoder().encode(message);\n const signResp = await window.solana.request({\n method: 'signMessage',\n params: {\n message: encodedMessage,\n display: 'utf8',\n },\n });\n return encode(signResp.signature);\n};\n\nconst signMessageWithEthereumProvider = async (\n request: ProviderRequest,\n message: string,\n address: string,\n): Promise<string> => {\n const signature = await request({\n method: 'personal_sign',\n params: [message, address],\n });\n return signature as string;\n};\n\nexport const signMessageWithWallet = async ({\n wallet,\n message,\n address,\n}: {\n wallet: Wallets;\n message: string;\n address: string;\n}): Promise<string> => {\n switch (wallet) {\n case Wallets.Phantom:\n case Wallets.GenericSolanaWallet:\n return signMessageWithSolanaProvider(message);\n case Wallets.Metamask: {\n const provider = getMetaMaskProvider();\n return provider?.request ? signMessageWithEthereumProvider(provider?.request, message, address) : '';\n }\n case Wallets.Binance: {\n const provider = window.BinanceChain;\n return provider?.request ? signMessageWithEthereumProvider(provider?.request, message, address) : '';\n }\n case Wallets.Coinbase: {\n const provider = getCoinbaseProvider();\n return provider?.request ? signMessageWithEthereumProvider(provider?.request, message, address) : '';\n }\n case Wallets.GenericEthereumWallet: {\n const provider = getOtherInjectedProvider();\n return provider?.request ? signMessageWithEthereumProvider(provider?.request, message, address) : '';\n }\n default:\n return '';\n }\n};\n\nexport const isSolanaWallet = (wallet: Wallets) => {\n const solanaWallets: Wallets[] = [Wallets.Phantom, Wallets.GenericSolanaWallet];\n return solanaWallets.includes(wallet);\n};\n\nexport const isEthereumWallet = (wallet: Wallets) => {\n const ethWallets: Wallets[] = [Wallets.Binance, Wallets.GenericEthereumWallet, Wallets.Coinbase, Wallets.Metamask];\n return ethWallets.includes(wallet);\n};\n"],"names":["hasMultipleEthereumWallets","window","ethereum","providers","hasMetaMask","find","wallet","isMetaMask","hasCoinbaseWallet","isCoinbaseWallet","hasOtherEthereumWallet","getMetaMaskProvider","getCoinbaseProvider","getOtherInjectedProvider","walletIcons","Wallets","Phantom","Binance","Coinbase","Metamask","useCryptoButtonProps","presentation","usePresentation","iconRegistry","getIcon","iconName","GenericWalletIcon","getId","getButtonId","options","WalletToText","GenericEthereumWallet","GenericSolanaWallet","isWalletVisible","solana","isPhantom","BinanceChain","connectWithEthereumProvider","request","address","method","connectWithWallet","provider","connectResp","connect","publicKey","toString","signMessageWithSolanaProvider","message","encodedMessage","TextEncoder","encode","signResp","params","display","signature","signMessageWithEthereumProvider","signMessageWithWallet","isSolanaWallet","solanaWallets","includes"],"mappings":"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"}
@@ -115,7 +115,8 @@ type IconRegistry<T extends string> = Record<T, ComponentType<IconProps>>;
115
115
 
116
116
  type PresentationOptions = {
117
117
  /**
118
- * When this value is false, the title and description text will not show in the SDK.
118
+ * When this value is false, the header title and description text will be hidden.
119
+ * This is useful if you prefer to display and style the title outside the Stytch component.
119
120
  */
120
121
  hideHeaderText: boolean;
121
122
  /**
@@ -136,6 +137,12 @@ type PresentationOptions = {
136
137
  */
137
138
  alt: string;
138
139
  };
140
+ /**
141
+ * Set to true to add id like 'oauth-google' to buttons, or a string to add a suffix to button ids to make
142
+ * them more unique. This exists for backwards compatibility. We do not recommend using this to style or
143
+ * modify elements in Stytch UI.
144
+ */
145
+ buttonId?: string | boolean;
139
146
  /**
140
147
  * Override our icons. Currently, this only supports logos, such as those that appear in Oauth buttons.
141
148
  * This should be an object where the key is the icon name and the value is a React component
@@ -6,10 +6,10 @@ import { ComponentType, ReactNode } from 'react';
6
6
  import { S as StytchB2BClient } from '../StytchB2BClient-D16e_lp1.js';
7
7
  import { a as StytchProjectConfigurationInput, M as MemberSession, r as Member, O as Organization, s as StytchProjectConfiguration, t as Callbacks, u as StringsOptions, g as StytchClientOptions } from '../ui-B7IvSGQf.js';
8
8
  export { ae as AccessTokenExchangeFactor, _ as AmazonOAuthFactor, N as AppleOAuthFactor, A as AuthenticateResponse, af as AuthenticationFactor, a9 as AuthenticatorAppFactor, cu as B2BAllowedAuthMethods, cv as B2BAllowedMFAMethods, cs as B2BAuthenticateResponse, ct as B2BAuthenticateResponseWithMFA, cn as B2BAuthenticationFactor, dS as B2BDiscoveryAuthenticateResponse, dQ as B2BDiscoveryIntermediateSessionsExchangeOptions, dR as B2BDiscoveryIntermediateSessionsExchangeResponse, ej as B2BDiscoveryOTPEmailAuthenticateOptions, ek as B2BDiscoveryOTPEmailAuthenticateResponse, eh as B2BDiscoveryOTPEmailSendOptions, ei as B2BDiscoveryOTPEmailSendResponse, dO as B2BDiscoveryOrganizationsCreateOptions, dP as B2BDiscoveryOrganizationsCreateResponse, dN as B2BDiscoveryOrganizationsResponse, cg as B2BEmailFactor, cm as B2BGitHubOAuthFactor, ci as B2BGoogleOAuthFactor, ck as B2BHubSpotOAuthFactor, et as B2BImpersonationAuthenticateOptions, eu as B2BImpersonationAuthenticateResponse, cI as B2BMagicLinkLoginOrSignupOptions, cJ as B2BMagicLinkLoginOrSignupResponse, cK as B2BMagicLinksAuthenticateOptions, cL as B2BMagicLinksAuthenticateResponse, cP as B2BMagicLinksDiscoveryAuthenticateOptions, cO as B2BMagicLinksDiscoveryAuthenticateResponse, cM as B2BMagicLinksEmailDiscoverySendOptions, cN as B2BMagicLinksEmailDiscoverySendResponse, cG as B2BMagicLinksInviteOptions, cH as B2BMagicLinksInviteResponse, cj as B2BMicrosoftOAuthFactor, dk as B2BOAuthAuthenticateOptions, dn as B2BOAuthAuthenticateResponse, dm as B2BOAuthDiscoveryAuthenticateResponse, dj as B2BOAuthDiscoveryStartOptions, ef as B2BOTPsEmailAuthenticateOptions, eg as B2BOTPsEmailAuthenticateResponse, ed as B2BOTPsEmailLoginOrSignupOptions, ee as B2BOTPsEmailLoginOrSignupResponse, cS as B2BOrganizationsDeleteResponse, cT as B2BOrganizationsGetBySlugOptions, cV as B2BOrganizationsGetBySlugResponse, cX as B2BOrganizationsGetConnectedAppOptions, cY as B2BOrganizationsGetConnectedAppResponse, cW as B2BOrganizationsGetConnectedAppsResponse, d7 as B2BOrganizationsMemberDeleteMFAPhoneNumberResponse, d8 as B2BOrganizationsMemberDeleteMFATOTPResponse, d6 as B2BOrganizationsMemberDeletePasswordResponse, dd as B2BOrganizationsMemberGetConnectedAppsOptions, de as B2BOrganizationsMemberGetConnectedAppsResponse, df as B2BOrganizationsMemberRevokeConnectedAppOptions, dg as B2BOrganizationsMemberRevokeConnectedAppResponse, db as B2BOrganizationsMemberStartEmailUpdateOptions, dc as B2BOrganizationsMemberStartEmailUpdateResponse, d9 as B2BOrganizationsMemberUnlinkRetiredEmailOptions, da as B2BOrganizationsMemberUnlinkRetiredEmailResponse, cZ as B2BOrganizationsMembersCreateOptions, c_ as B2BOrganizationsMembersCreateResponse, d4 as B2BOrganizationsMembersDeleteResponse, d5 as B2BOrganizationsMembersReactivateResponse, d2 as B2BOrganizationsMembersSearchOptions, d3 as B2BOrganizationsMembersSearchResponse, c$ as B2BOrganizationsMembersUpdateOptions, d0 as B2BOrganizationsMembersUpdateResponse, cQ as B2BOrganizationsUpdateOptions, cR as B2BOrganizationsUpdateResponse, dT as B2BPasswordAuthenticateOptions, dW as B2BPasswordAuthenticateResponse, dV as B2BPasswordDiscoveryAuthenticateOptions, dU as B2BPasswordDiscoveryAuthenticateResponse, d$ as B2BPasswordDiscoveryResetByEmailOptions, e0 as B2BPasswordDiscoveryResetByEmailResponse, dZ as B2BPasswordDiscoveryResetByEmailStartOptions, d_ as B2BPasswordDiscoveryResetByEmailStartResponse, e1 as B2BPasswordResetByEmailOptions, e2 as B2BPasswordResetByEmailResponse, dX as B2BPasswordResetByEmailStartOptions, dY as B2BPasswordResetByEmailStartResponse, e3 as B2BPasswordResetByExistingPasswordOptions, e4 as B2BPasswordResetByExistingPasswordResponse, e5 as B2BPasswordResetBySessionOptions, e6 as B2BPasswordResetBySessionResponse, e7 as B2BPasswordStrengthCheckOptions, e8 as B2BPasswordStrengthCheckResponse, ch as B2BPhoneNumberFactor, eb as B2BSMSAuthenticateOptions, ec as B2BSMSAuthenticateResponse, e9 as B2BSMSSendOptions, ea as B2BSMSSendResponse, dC as B2BSSOCreateExternalConnectionOptions, dD as B2BSSOCreateExternalConnectionResponse, dL as B2BSSODeleteConnectionResponse, dM as B2BSSODiscoverConnectionsResponse, dK as B2BSSOGetConnectionsResponse, dG as B2BSSOOIDCCreateConnectionOptions, dH as B2BSSOOIDCCreateConnectionResponse, dI as B2BSSOOIDCUpdateConnectionOptions, dJ as B2BSSOOIDCUpdateConnectionResponse, ds as B2BSSOSAMLCreateConnectionOptions, dt as B2BSSOSAMLCreateConnectionResponse, dA as B2BSSOSAMLDeleteEncryptionPrivateKeyOptions, dB as B2BSSOSAMLDeleteEncryptionPrivateKeyResponse, dy as B2BSSOSAMLDeleteVerificationCertificateOptions, dz as B2BSSOSAMLDeleteVerificationCertificateResponse, dw as B2BSSOSAMLUpdateConnectionByURLOptions, dx as B2BSSOSAMLUpdateConnectionByURLResponse, du as B2BSSOSAMLUpdateConnectionOptions, dv as B2BSSOSAMLUpdateConnectionResponse, dE as B2BSSOUpdateExternalConnectionOptions, dF as B2BSSOUpdateExternalConnectionResponse, cl as B2BSlackOAuthFactor, B as B2BState, en as B2BTOTPAuthenticateOptions, eo as B2BTOTPAuthenticateResponse, el as B2BTOTPCreateOptions, em as B2BTOTPCreateResponse, ad as BiometricFactor, cc as BiometricRegistrationIdIsNullOrBlank, bM as BiometricsAlreadyEnrolledError, b$ as BiometricsFailedError, bI as BiometricsUnavailableError, $ as BitbucketOAuthFactor, bW as ChallengeSigningFailedError, a1 as CoinbaseOAuthFactor, G as ConnectedAppPublic, C as ConsumerState, aJ as CryptoWalletAuthenticateOptions, aK as CryptoWalletAuthenticateResponse, aH as CryptoWalletAuthenticateStartOptions, aI as CryptoWalletAuthenticateStartResponse, ab as CryptoWalletFactor, cd as DFPNotConfigured, D as DeleteResponse, E as DeviceAttributeDetails, bP as DeviceCredentialsNotAllowedError, X as DiscordOAuthFactor, cx as DiscoveredOrganization, J as EmailFactor, b5 as EmailMagicLinksOptions, cC as EncryptionPrivateKey, cF as ExternalConnection, V as FacebookOAuthFactor, bY as FailedCodeChallengeError, b_ as FailedToDecryptDataError, a5 as FigmaOAuthFactor, T as GitLabOAuthFactor, Q as GithubOAuthFactor, K as GoogleOAuthFactor, bh as IDPConsentItem, bj as IDPConsentScreenManifest, bi as IDPConsentSection, ce as IDPOAuthFlowMissingParamError, l as IHeadlessB2BDiscoveryClient, q as IHeadlessB2BImpersonationClient, i as IHeadlessB2BMagicLinksClient, h as IHeadlessB2BOAuthClient, n as IHeadlessB2BOTPsClient, j as IHeadlessB2BOrganizationClient, m as IHeadlessB2BPasswordClient, p as IHeadlessB2BRecoveryCodesClient, k as IHeadlessB2BSSOClient, o as IHeadlessB2BTOTPsClient, d as IHeadlessCryptoWalletClient, I as IHeadlessMagicLinksClient, c as IHeadlessOTPsClient, f as IHeadlessPasswordClient, b as IHeadlessSessionClient, e as IHeadlessWebAuthnClient, bG as InternalError, bT as InvalidAuthorizationCredentialError, c3 as InvalidCredentialTypeError, cb as InvalidPrivateKeyLength, c1 as InvalidRedirectSchemeError, c0 as InvalidStartUrlError, c5 as JSONDataNotConvertibleToStringError, bJ as KeyInvalidatedError, bK as KeystoreUnavailableError, a0 as LinkedInOAuthFactor, ax as MagicLinksAuthenticateOptions, ay as MagicLinksAuthenticateResponse, at as MagicLinksLoginOrCreateOptions, av as MagicLinksLoginOrCreateResponse, au as MagicLinksSendOptions, aw as MagicLinksSendResponse, z as MemberEmailUpdateDeliveryMethod, cA as MemberOptions, co as MemberResponseCommon, cq as MemberRole, cy as MfaRequired, L as MicrosoftOAuthFactor, c4 as MissingAttestationObjectError, bS as MissingAuthorizationCredentialIDTokenError, ca as MissingCipherIv, bQ as MissingGoogleClientIDError, bR as MissingPKCEError, bV as MissingPublicKeyError, c2 as MissingUrlError, bL as NoBiometricsEnrolledError, bH as NoBiometricsRegistrationError, bU as NoCredentialsPresentError, bF as NoCurrentSessionError, dl as OAuthDiscoveryAuthenticateOptions, bb as OAuthOptions, b6 as OAuthProviders, cp as OAuthRegistration, di as OAuthStartOptions, cE as OIDCConnection, aC as OTPAuthenticateOptions, aB as OTPCodeEmailOptions, az as OTPCodeOptions, aA as OTPCodeSMSOptions, bc as OTPMethods, aF as OTPsAuthenticateResponse, aD as OTPsLoginOrCreateResponse, aE as OTPsSendResponse, b8 as OneTapPositions, bm as OneTapStyleConfig, cU as OrganizationBySlugMatch, dh as OrganizationInfo, bd as OtpOptions, bg as PasskeyOptions, c7 as PasskeysInvalidEncoding, c8 as PasskeysMisconfigured, bZ as PasskeysUnsupportedError, aV as PasswordAuthenticateOptions, aW as PasswordAuthenticateResponse, aT as PasswordCreateOptions, aU as PasswordCreateResponse, ac as PasswordFactor, be as PasswordOptions, aZ as PasswordResetByEmailOptions, a_ as PasswordResetByEmailResponse, aX as PasswordResetByEmailStartOptions, aY as PasswordResetByEmailStartResponse, a$ as PasswordResetByExistingPasswordOptions, b0 as PasswordResetByExistingPasswordResponse, b1 as PasswordResetBySessionOptions, b2 as PasswordResetBySessionResponse, b3 as PasswordStrengthCheckOptions, b4 as PasswordStrengthCheckResponse, P as PhoneNumberFactor, cz as PrimaryRequired, b9 as ProviderOptions, ba as ProvidersOptions, bo as RNUIEmailMagicLinksOptions, bp as RNUIOAuthOptions, bq as RNUIOTPOptions, br as RNUIPasswordOptions, bs as RNUIProductConfig, bn as RNUIProducts, c6 as RandomNumberGenerationFailed, aa as RecoveryCodeFactor, es as RecoveryCodeGetResponse, ep as RecoveryCodeRecoverOptions, eq as RecoveryCodeRecoverResponse, er as RecoveryCodeRotateResponse, R as ResponseCommon, cr as RetiredEmailAddress, cD as SAMLConnection, bt as SDKAPIUnreachableError, F as SDKDeviceHistory, bX as SDKNotConfiguredError, aG as SIWEParams, cw as SSOActiveConnection, dq as SSOAuthenticateOptions, dr as SSOAuthenticateResponse, dp as SSOStartOptions, Y as SalesforceOAuthFactor, H as ScopeResult, d1 as SearchQueryOperand, ag as Session, aj as SessionAccessTokenExchangeOptions, ak as SessionAccessTokenExchangeResponse, an as SessionAttestOptions, ao as SessionAttestResponse, ah as SessionAuthenticateOptions, ai as SessionAuthenticateResponse, w as SessionDurationOptions, as as SessionInfo, ap as SessionOnChangeCallback, bf as SessionOptions, al as SessionRevokeOptions, am as SessionRevokeResponse, aq as SessionTokens, ar as SessionTokensUpdate, c9 as SignInWithAppleMisconfigured, Z as SlackOAuthFactor, a6 as SnapchatOAuthFactor, S as StyleConfig, bB as StytchAPIError, bA as StytchAPISchemaError, bz as StytchAPIUnreachableError, by as StytchError, bl as StytchEvent, bk as StytchEventType, bw as StytchSDKAPIError, bD as StytchSDKError, bC as StytchSDKErrorOptions, bv as StytchSDKSchemaError, bE as StytchSDKUIError, bu as StytchSDKUsageError, a4 as TikTokOAuthFactor, a2 as TwitchOAuthFactor, a3 as TwitterOAuthFactor, bx as UNRECOVERABLE_ERROR_TYPES, x as UnsubscribeFunction, v as UpdateResponse, U as User, bN as UserCancellationError, bO as UserLockedOutError, b7 as Wallets, aQ as WebAuthnAuthenticateResponse, aO as WebAuthnAuthenticateStartOptions, aP as WebAuthnAuthenticateStartResponse, a8 as WebAuthnFactor, aN as WebAuthnRegisterResponse, aL as WebAuthnRegisterStartOptions, aM as WebAuthnRegisterStartResponse, W as WebAuthnRegistration, aR as WebAuthnUpdateOptions, aS as WebAuthnUpdateResponse, cB as X509Certificate, a7 as YahooOAuthFactor, cf as errorToStytchError, y as locale } from '../ui-B7IvSGQf.js';
9
- import { S as StytchB2BProduct, a as StytchB2BUIConfig, P as PresentationConfig, D as DeprecatedSDKConfig, B as B2BSDKConfig, b as B2BIDPConsentManifestGenerator, A as AuthTokenParams } from '../shadcn-B04UXoBD.js';
10
- export { c as B2BIDPSDKConfig, f as defaultDarkTheme, e as defaultTheme, i as iconsBlack, d as iconsWhite, s as shadcnTheme } from '../shadcn-B04UXoBD.js';
9
+ import { S as StytchB2BProduct, a as StytchB2BUIConfig, P as PresentationConfig, D as DeprecatedSDKConfig, B as B2BSDKConfig, b as B2BIDPConsentManifestGenerator, A as AuthTokenParams } from '../shadcn-CGdmyIUF.js';
10
+ export { c as B2BIDPSDKConfig, f as defaultDarkTheme, e as defaultTheme, i as iconsBlack, d as iconsWhite, s as shadcnTheme } from '../shadcn-CGdmyIUF.js';
11
11
  export { O as OAuthAuthorizeParams, b as OAuthLogoutParams, p as parseOAuthAuthorizeParams, a as parseOAuthLogoutParams } from '../idpHelpers-BQP76WgZ.js';
12
- export { I as IconRegistry, P as PresentationOptions, T as Theme } from '../PresentationConfig-CcNEXkjS.js';
12
+ export { I as IconRegistry, P as PresentationOptions, T as Theme } from '../PresentationConfig-B2jX85oV.js';
13
13
  import '../StytchClient-BwQdJzdj.js';
14
14
 
15
15
  declare const emailMagicLinks: StytchB2BProduct;
@@ -1,4 +1,4 @@
1
- import { T as Theme, C as ColorMixFallback, P as PresentationOptions } from './PresentationConfig-CcNEXkjS.js';
1
+ import { T as Theme, C as ColorMixFallback, P as PresentationOptions } from './PresentationConfig-B2jX85oV.js';
2
2
  import { S as StyleConfig } from './ui-B7IvSGQf.js';
3
3
  import 'react';
4
4