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

package/dist/esm-dev/packages/web/src/ui/b2c/IDPContainer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"IDPContainer.mjs","sources":["../../../../../../../../web/src/ui/b2c/IDPContainer.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { messages } from '../../messages/en';\nimport { I18nProviderWrapper } from '../components/atoms/I18nProviderWrapper';\nimport { GlobalContextProvider, DEFAULT_STATE } from './GlobalContextProvider';\nimport { IDPSDKConfig, StytchLoginConfig } from '../../types';\nimport { readB2CInternals } from '../../utils/internal';\nimport { IDPContextProvider } from '../components/organisms/IDPContextProvider';\nimport { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig';\nimport { IDPConsentScreen } from './screens/IdentityProvider/IDPConsent';\n\nexport const IDPContainer = <TProjectConfiguration extends StytchProjectConfigurationInput>({\n  client,\n  presentation,\n  callbacks,\n  strings,\n  getIDPConsentManifest,\n  authTokenParams,\n}: IDPSDKConfig<TProjectConfiguration>) => {\n  const presentationValue = usePresentationWithDefault(presentation, false, []);\n\n  useEffect(() => {\n    readB2CInternals(client)\n      .bootstrap.getAsync()\n      .then((data) => {\n        readB2CInternals(client).networkClient.logEvent({\n          name: 'render_idp_screen',\n          details: { bootstrap: data },\n        });\n      });\n  }, [client]);\n\n  return (\n    <GlobalContextProvider\n      client={client}\n      config={{} as StytchLoginConfig}\n      callbacks={callbacks}\n      initialState={DEFAULT_STATE}\n    >\n      <IDPContextProvider consentManifestGenerator={getIDPConsentManifest} authTokenParams={authTokenParams}>\n        <PresentationContext.Provider value={presentationValue}>\n          <I18nProviderWrapper messages={messages} overrides={strings}>\n            <IDPConsentScreen />\n          </I18nProviderWrapper>\n        </PresentationContext.Provider>\n      </IDPContextProvider>\n    </GlobalContextProvider>\n  );\n};\n"],"names":["IDPContainer","client","presentation","callbacks","strings","getIDPConsentManifest","authTokenParams","presentationValue","usePresentationWithDefault","useEffect","readB2CInternals","bootstrap","getAsync","then","data","networkClient","logEvent","name","details","React","GlobalContextProvider","config","initialState","DEFAULT_STATE","IDPContextProvider","consentManifestGenerator","PresentationContext","Provider","value","I18nProviderWrapper","messages","overrides","IDPConsentScreen"],"mappings":";;;;;;;;;AAWO,MAAMA,YAAAA,GAAe,CAAgE,EAC1FC,MAAM,EACNC,YAAY,EACZC,SAAS,EACTC,OAAO,EACPC,qBAAqB,EACrBC,eAAe,EACqB,GAAA;AACpC,IAAA,MAAMC,iBAAAA,GAAoBC,0BAAAA,CAA2BN,YAAAA,EAAc,KAAA,EAAO,EAAE,CAAA;IAE5EO,SAAAA,CAAU,IAAA;AACRC,QAAAA,gBAAAA,CAAiBT,QACdU,SAAS,CAACC,QAAQ,EAAA,CAClBC,IAAI,CAAC,CAACC,IAAAA,GAAAA;AACLJ,YAAAA,gBAAAA,CAAiBT,MAAAA,CAAAA,CAAQc,aAAa,CAACC,QAAQ,CAAC;gBAC9CC,IAAAA,EAAM,mBAAA;gBACNC,OAAAA,EAAS;oBAAEP,SAAAA,EAAWG;AAAK;AAC7B,aAAA,CAAA;AACF,QAAA,CAAA,CAAA;IACJ,CAAA,EAAG;AAACb,QAAAA;AAAO,KAAA,CAAA;AAEX,IAAA,qBACEkB,cAAA,CAAA,aAAA,CAACC,qBAAAA,EAAAA;QACCnB,MAAAA,EAAQA,MAAAA;AACRoB,QAAAA,MAAAA,EAAQ,EAAC;QACTlB,SAAAA,EAAWA,SAAAA;QACXmB,YAAAA,EAAcC;qBAEdJ,cAAA,CAAA,aAAA,CAACK,kBAAAA,EAAAA;QAAmBC,wBAAAA,EAA0BpB,qBAAAA;QAAuBC,eAAAA,EAAiBA;AACpF,KAAA,gBAAAa,cAAA,CAAA,aAAA,CAACO,oBAAoBC,QAAQ,EAAA;QAACC,KAAAA,EAAOrB;qBACnCY,cAAA,CAAA,aAAA,CAACU,mBAAAA,EAAAA;QAAoBC,QAAAA,EAAUA,QAAAA;QAAUC,SAAAA,EAAW3B;qBAClDe,cAAA,CAAA,aAAA,CAACa,gBAAAA,EAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAMb;;;;"}
+{"version":3,"file":"IDPContainer.mjs","sources":["../../../../../../../../web/src/ui/b2c/IDPContainer.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { messages } from '../../messages/en';\nimport { I18nProviderWrapper } from '../components/atoms/I18nProviderWrapper';\nimport { GlobalContextProvider, DEFAULT_STATE } from './GlobalContextProvider';\nimport { IDPSDKConfig, StytchLoginConfig, DeprecatedSDKConfig } from '../../types';\nimport { readB2CInternals } from '../../utils/internal';\nimport { IDPContextProvider } from '../components/organisms/IDPContextProvider';\nimport { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig';\nimport { IDPConsentScreen } from './screens/IdentityProvider/IDPConsent';\nimport { logger, RUN_IN_DEV } from '@stytch/core';\n\nexport const IDPContainer = <TProjectConfiguration extends StytchProjectConfigurationInput>({\n  client,\n  presentation,\n  callbacks,\n  strings,\n  styles,\n  getIDPConsentManifest,\n  authTokenParams,\n}: IDPSDKConfig<TProjectConfiguration> & DeprecatedSDKConfig) => {\n  const presentationValue = usePresentationWithDefault(presentation, false, []);\n\n  useEffect(() => {\n    readB2CInternals(client)\n      .bootstrap.getAsync()\n      .then((data) => {\n        readB2CInternals(client).networkClient.logEvent({\n          name: 'render_idp_screen',\n          details: { bootstrap: data },\n        });\n      });\n  }, [client]);\n\n  RUN_IN_DEV(() => {\n    if (styles) {\n      logger.error(\n        'styles is deprecated and has no effect. Use the presentation prop instead.\\n' +\n          'See https://stytch.com/docs/api-reference/consumer/frontend-sdks/react/upgrade-guide#step-by-step-guide',\n      );\n    }\n  });\n\n  return (\n    <GlobalContextProvider\n      client={client}\n      config={{} as StytchLoginConfig}\n      callbacks={callbacks}\n      initialState={DEFAULT_STATE}\n    >\n      <IDPContextProvider consentManifestGenerator={getIDPConsentManifest} authTokenParams={authTokenParams}>\n        <PresentationContext.Provider value={presentationValue}>\n          <I18nProviderWrapper messages={messages} overrides={strings}>\n            <IDPConsentScreen />\n          </I18nProviderWrapper>\n        </PresentationContext.Provider>\n      </IDPContextProvider>\n    </GlobalContextProvider>\n  );\n};\n"],"names":["IDPContainer","client","presentation","callbacks","strings","styles","getIDPConsentManifest","authTokenParams","presentationValue","usePresentationWithDefault","useEffect","readB2CInternals","bootstrap","getAsync","then","data","networkClient","logEvent","name","details","RUN_IN_DEV","logger","error","React","GlobalContextProvider","config","initialState","DEFAULT_STATE","IDPContextProvider","consentManifestGenerator","PresentationContext","Provider","value","I18nProviderWrapper","messages","overrides","IDPConsentScreen"],"mappings":";;;;;;;;;;;MAYaA,YAAAA,GAAe,CAAgE,EAC1FC,MAAM,EACNC,YAAY,EACZC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,qBAAqB,EACrBC,eAAe,EAC2C,GAAA;AAC1D,IAAA,MAAMC,iBAAAA,GAAoBC,0BAAAA,CAA2BP,YAAAA,EAAc,KAAA,EAAO,EAAE,CAAA;IAE5EQ,SAAAA,CAAU,IAAA;AACRC,QAAAA,gBAAAA,CAAiBV,QACdW,SAAS,CAACC,QAAQ,EAAA,CAClBC,IAAI,CAAC,CAACC,IAAAA,GAAAA;AACLJ,YAAAA,gBAAAA,CAAiBV,MAAAA,CAAAA,CAAQe,aAAa,CAACC,QAAQ,CAAC;gBAC9CC,IAAAA,EAAM,mBAAA;gBACNC,OAAAA,EAAS;oBAAEP,SAAAA,EAAWG;AAAK;AAC7B,aAAA,CAAA;AACF,QAAA,CAAA,CAAA;IACJ,CAAA,EAAG;AAACd,QAAAA;AAAO,KAAA,CAAA;IAEXmB,UAAAA,CAAW,IAAA;AACT,QAAA,IAAIf,MAAAA,EAAQ;YACVgB,MAAAA,CAAOC,KAAK,CACV,8EAAA,GACE,yGAAA,CAAA;AAEN,QAAA;AACF,IAAA,CAAA,CAAA;AAEA,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,qBAAAA,EAAAA;QACCvB,MAAAA,EAAQA,MAAAA;AACRwB,QAAAA,MAAAA,EAAQ,EAAC;QACTtB,SAAAA,EAAWA,SAAAA;QACXuB,YAAAA,EAAcC;qBAEdJ,cAAA,CAAA,aAAA,CAACK,kBAAAA,EAAAA;QAAmBC,wBAAAA,EAA0BvB,qBAAAA;QAAuBC,eAAAA,EAAiBA;AACpF,KAAA,gBAAAgB,cAAA,CAAA,aAAA,CAACO,oBAAoBC,QAAQ,EAAA;QAACC,KAAAA,EAAOxB;qBACnCe,cAAA,CAAA,aAAA,CAACU,mBAAAA,EAAAA;QAAoBC,QAAAA,EAAUA,QAAAA;QAAUC,SAAAA,EAAW/B;qBAClDmB,cAAA,CAAA,aAAA,CAACa,gBAAAA,EAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAMb;;;;"}

package/dist/esm-dev/packages/web/src/ui/b2c/PasskeyRegistrationContainer.mjs

@@ -7,8 +7,10 @@ import { readB2CInternals } from '../../utils/internal.mjs';
 import { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig.mjs';
 import { passkeyRegistration } from './Products.mjs';
 import { addProduct } from './utils.mjs';
+import { RUN_IN_DEV } from '../../../../core/src/utils/dev.mjs';
+import { logger } from '../../../../core/src/utils/logger.mjs';
 
-const PasskeyRegistrationContainer = ({ client, config: rawConfig, presentation, callbacks, strings })=>{
+const PasskeyRegistrationContainer = ({ client, config: rawConfig, presentation, callbacks, strings, styles })=>{
     const config = addProduct(rawConfig, passkeyRegistration);
     /**
    * Read the watermark out of sync storage, then read it out of async storage
@@ -23,6 +25,11 @@ const PasskeyRegistrationContainer = ({ client, config: rawConfig, presentation,
     }, [
         client
     ]);
+    RUN_IN_DEV(()=>{
+        if (styles) {
+            logger.error('styles is deprecated and has no effect. Use the presentation prop instead.\n' + 'See https://stytch.com/docs/api-reference/consumer/frontend-sdks/react/upgrade-guide#step-by-step-guide');
+        }
+    });
     const initialState = {
         ...DEFAULT_STATE,
         screen: AppScreens.PasskeyRegistrationStart,

package/dist/esm-dev/packages/web/src/ui/b2c/PasskeyRegistrationContainer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasskeyRegistrationContainer.mjs","sources":["../../../../../../../../web/src/ui/b2c/PasskeyRegistrationContainer.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { messages } from '../../messages/en';\nimport { I18nProviderWrapper } from '../components/atoms/I18nProviderWrapper';\nimport { GlobalContextProvider, DEFAULT_STATE, AppState, AppScreens } from './GlobalContextProvider';\nimport Container from './Container';\nimport { SDKConfig } from '../../types';\nimport { readB2CInternals } from '../../utils/internal';\nimport { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig';\nimport { passkeyRegistration } from './Products';\nimport { addProduct } from './utils';\n\nexport const PasskeyRegistrationContainer = <TProjectConfiguration extends StytchProjectConfigurationInput>({\n  client,\n  config: rawConfig,\n  presentation,\n  callbacks,\n  strings,\n}: SDKConfig<TProjectConfiguration>) => {\n  const config = addProduct(rawConfig, passkeyRegistration);\n\n  /**\n   * Read the watermark out of sync storage, then read it out of async storage\n   */\n  const [displayWatermark, setDisplayWatermark] = useState(() => {\n    const { displayWatermark } = readB2CInternals(client).bootstrap.getSync();\n    return displayWatermark;\n  });\n\n  useEffect(() => {\n    readB2CInternals(client)\n      .bootstrap.getAsync()\n      .then(({ displayWatermark }) => {\n        setDisplayWatermark(displayWatermark);\n      });\n  }, [client]);\n\n  const initialState: AppState = {\n    ...DEFAULT_STATE,\n    screen: AppScreens.PasskeyRegistrationStart,\n    formState: {\n      ...DEFAULT_STATE.formState,\n    },\n  };\n\n  const presentationValue = usePresentationWithDefault(presentation, displayWatermark, config.products, 'Products');\n\n  return (\n    <GlobalContextProvider client={client} config={config} callbacks={callbacks} initialState={initialState}>\n      <PresentationContext.Provider value={presentationValue}>\n        <I18nProviderWrapper messages={messages} overrides={strings}>\n          <Container />\n        </I18nProviderWrapper>\n      </PresentationContext.Provider>\n    </GlobalContextProvider>\n  );\n};\n"],"names":["PasskeyRegistrationContainer","client","config","rawConfig","presentation","callbacks","strings","addProduct","passkeyRegistration","displayWatermark","setDisplayWatermark","useState","readB2CInternals","bootstrap","getSync","useEffect","getAsync","then","initialState","DEFAULT_STATE","screen","AppScreens","PasskeyRegistrationStart","formState","presentationValue","usePresentationWithDefault","products","React","GlobalContextProvider","PresentationContext","Provider","value","I18nProviderWrapper","messages","overrides","Container"],"mappings":";;;;;;;;;;AAYO,MAAMA,4BAAAA,GAA+B,CAAgE,EAC1GC,MAAM,EACNC,MAAAA,EAAQC,SAAS,EACjBC,YAAY,EACZC,SAAS,EACTC,OAAO,EAC0B,GAAA;IACjC,MAAMJ,MAAAA,GAASK,WAAWJ,SAAAA,EAAWK,mBAAAA,CAAAA;AAErC;;AAEC,MACD,MAAM,CAACC,gBAAAA,EAAkBC,mBAAAA,CAAoB,GAAGC,QAAAA,CAAS,IAAA;QACvD,MAAM,EAAEF,gBAAgB,EAAE,GAAGG,iBAAiBX,MAAAA,CAAAA,CAAQY,SAAS,CAACC,OAAO,EAAA;QACvE,OAAOL,gBAAAA;AACT,IAAA,CAAA,CAAA;IAEAM,SAAAA,CAAU,IAAA;QACRH,gBAAAA,CAAiBX,MAAAA,CAAAA,CACdY,SAAS,CAACG,QAAQ,EAAA,CAClBC,IAAI,CAAC,CAAC,EAAER,gBAAgB,EAAE,GAAA;YACzBC,mBAAAA,CAAoBD,gBAAAA,CAAAA;AACtB,QAAA,CAAA,CAAA;IACJ,CAAA,EAAG;AAACR,QAAAA;AAAO,KAAA,CAAA;AAEX,IAAA,MAAMiB,YAAAA,GAAyB;AAC7B,QAAA,GAAGC,aAAa;AAChBC,QAAAA,MAAAA,EAAQC,WAAWC,wBAAwB;QAC3CC,SAAAA,EAAW;AACT,YAAA,GAAGJ,cAAcI;AACnB;AACF,KAAA;AAEA,IAAA,MAAMC,oBAAoBC,0BAAAA,CAA2BrB,YAAAA,EAAcK,gBAAAA,EAAkBP,MAAAA,CAAOwB,QAAQ,EAAE,UAAA,CAAA;AAEtG,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,qBAAAA,EAAAA;QAAsB3B,MAAAA,EAAQA,MAAAA;QAAQC,MAAAA,EAAQA,MAAAA;QAAQG,SAAAA,EAAWA,SAAAA;QAAWa,YAAAA,EAAcA;AACzF,KAAA,gBAAAS,cAAA,CAAA,aAAA,CAACE,oBAAoBC,QAAQ,EAAA;QAACC,KAAAA,EAAOP;qBACnCG,cAAA,CAAA,aAAA,CAACK,mBAAAA,EAAAA;QAAoBC,QAAAA,EAAUA,QAAAA;QAAUC,SAAAA,EAAW5B;qBAClDqB,cAAA,CAAA,aAAA,CAACQ,YAAAA,EAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAKX;;;;"}
+{"version":3,"file":"PasskeyRegistrationContainer.mjs","sources":["../../../../../../../../web/src/ui/b2c/PasskeyRegistrationContainer.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { messages } from '../../messages/en';\nimport { I18nProviderWrapper } from '../components/atoms/I18nProviderWrapper';\nimport { GlobalContextProvider, DEFAULT_STATE, AppState, AppScreens } from './GlobalContextProvider';\nimport Container from './Container';\nimport { SDKConfig, DeprecatedSDKConfig } from '../../types';\nimport { readB2CInternals } from '../../utils/internal';\nimport { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig';\nimport { passkeyRegistration } from './Products';\nimport { addProduct } from './utils';\nimport { logger, RUN_IN_DEV } from '@stytch/core';\n\nexport const PasskeyRegistrationContainer = <TProjectConfiguration extends StytchProjectConfigurationInput>({\n  client,\n  config: rawConfig,\n  presentation,\n  callbacks,\n  strings,\n  styles,\n}: SDKConfig<TProjectConfiguration> & DeprecatedSDKConfig) => {\n  const config = addProduct(rawConfig, passkeyRegistration);\n\n  /**\n   * Read the watermark out of sync storage, then read it out of async storage\n   */\n  const [displayWatermark, setDisplayWatermark] = useState(() => {\n    const { displayWatermark } = readB2CInternals(client).bootstrap.getSync();\n    return displayWatermark;\n  });\n\n  useEffect(() => {\n    readB2CInternals(client)\n      .bootstrap.getAsync()\n      .then(({ displayWatermark }) => {\n        setDisplayWatermark(displayWatermark);\n      });\n  }, [client]);\n\n  RUN_IN_DEV(() => {\n    if (styles) {\n      logger.error(\n        'styles is deprecated and has no effect. Use the presentation prop instead.\\n' +\n          'See https://stytch.com/docs/api-reference/consumer/frontend-sdks/react/upgrade-guide#step-by-step-guide',\n      );\n    }\n  });\n\n  const initialState: AppState = {\n    ...DEFAULT_STATE,\n    screen: AppScreens.PasskeyRegistrationStart,\n    formState: {\n      ...DEFAULT_STATE.formState,\n    },\n  };\n\n  const presentationValue = usePresentationWithDefault(presentation, displayWatermark, config.products, 'Products');\n\n  return (\n    <GlobalContextProvider client={client} config={config} callbacks={callbacks} initialState={initialState}>\n      <PresentationContext.Provider value={presentationValue}>\n        <I18nProviderWrapper messages={messages} overrides={strings}>\n          <Container />\n        </I18nProviderWrapper>\n      </PresentationContext.Provider>\n    </GlobalContextProvider>\n  );\n};\n"],"names":["PasskeyRegistrationContainer","client","config","rawConfig","presentation","callbacks","strings","styles","addProduct","passkeyRegistration","displayWatermark","setDisplayWatermark","useState","readB2CInternals","bootstrap","getSync","useEffect","getAsync","then","RUN_IN_DEV","logger","error","initialState","DEFAULT_STATE","screen","AppScreens","PasskeyRegistrationStart","formState","presentationValue","usePresentationWithDefault","products","React","GlobalContextProvider","PresentationContext","Provider","value","I18nProviderWrapper","messages","overrides","Container"],"mappings":";;;;;;;;;;;;MAaaA,4BAAAA,GAA+B,CAAgE,EAC1GC,MAAM,EACNC,MAAAA,EAAQC,SAAS,EACjBC,YAAY,EACZC,SAAS,EACTC,OAAO,EACPC,MAAM,EACiD,GAAA;IACvD,MAAML,MAAAA,GAASM,WAAWL,SAAAA,EAAWM,mBAAAA,CAAAA;AAErC;;AAEC,MACD,MAAM,CAACC,gBAAAA,EAAkBC,mBAAAA,CAAoB,GAAGC,QAAAA,CAAS,IAAA;QACvD,MAAM,EAAEF,gBAAgB,EAAE,GAAGG,iBAAiBZ,MAAAA,CAAAA,CAAQa,SAAS,CAACC,OAAO,EAAA;QACvE,OAAOL,gBAAAA;AACT,IAAA,CAAA,CAAA;IAEAM,SAAAA,CAAU,IAAA;QACRH,gBAAAA,CAAiBZ,MAAAA,CAAAA,CACda,SAAS,CAACG,QAAQ,EAAA,CAClBC,IAAI,CAAC,CAAC,EAAER,gBAAgB,EAAE,GAAA;YACzBC,mBAAAA,CAAoBD,gBAAAA,CAAAA;AACtB,QAAA,CAAA,CAAA;IACJ,CAAA,EAAG;AAACT,QAAAA;AAAO,KAAA,CAAA;IAEXkB,UAAAA,CAAW,IAAA;AACT,QAAA,IAAIZ,MAAAA,EAAQ;YACVa,MAAAA,CAAOC,KAAK,CACV,8EAAA,GACE,yGAAA,CAAA;AAEN,QAAA;AACF,IAAA,CAAA,CAAA;AAEA,IAAA,MAAMC,YAAAA,GAAyB;AAC7B,QAAA,GAAGC,aAAa;AAChBC,QAAAA,MAAAA,EAAQC,WAAWC,wBAAwB;QAC3CC,SAAAA,EAAW;AACT,YAAA,GAAGJ,cAAcI;AACnB;AACF,KAAA;AAEA,IAAA,MAAMC,oBAAoBC,0BAAAA,CAA2BzB,YAAAA,EAAcM,gBAAAA,EAAkBR,MAAAA,CAAO4B,QAAQ,EAAE,UAAA,CAAA;AAEtG,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,qBAAAA,EAAAA;QAAsB/B,MAAAA,EAAQA,MAAAA;QAAQC,MAAAA,EAAQA,MAAAA;QAAQG,SAAAA,EAAWA,SAAAA;QAAWiB,YAAAA,EAAcA;AACzF,KAAA,gBAAAS,cAAA,CAAA,aAAA,CAACE,oBAAoBC,QAAQ,EAAA;QAACC,KAAAA,EAAOP;qBACnCG,cAAA,CAAA,aAAA,CAACK,mBAAAA,EAAAA;QAAoBC,QAAAA,EAAUA,QAAAA;QAAUC,SAAAA,EAAWhC;qBAClDyB,cAAA,CAAA,aAAA,CAACQ,YAAAA,EAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAKX;;;;"}

package/dist/esm-dev/packages/web/src/ui/b2c/ResetPasswordContainer.mjs

@@ -7,8 +7,10 @@ import { readB2CInternals } from '../../utils/internal.mjs';
 import { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig.mjs';
 import { passwords } from './Products.mjs';
 import { addProduct } from './utils.mjs';
+import { RUN_IN_DEV } from '../../../../core/src/utils/dev.mjs';
+import { logger } from '../../../../core/src/utils/logger.mjs';
 
-const ResetPasswordContainer = ({ client, config: rawConfig, presentation, callbacks, strings, passwordResetToken: rawToken })=>{
+const ResetPasswordContainer = ({ client, config: rawConfig, presentation, callbacks, strings, styles, passwordResetToken: rawToken })=>{
     const config = addProduct(rawConfig, passwords);
     // Default to reading token from URL if not provided
     let token = rawToken;
@@ -30,6 +32,11 @@ const ResetPasswordContainer = ({ client, config: rawConfig, presentation, callb
     }, [
         client
     ]);
+    RUN_IN_DEV(()=>{
+        if (styles) {
+            logger.error('styles is deprecated and has no effect. Use the presentation prop instead.\n' + 'See https://stytch.com/docs/api-reference/consumer/frontend-sdks/react/upgrade-guide#step-by-step-guide');
+        }
+    });
     const initialState = {
         ...DEFAULT_STATE,
         screen: AppScreens.PasswordResetForm,

package/dist/esm-dev/packages/web/src/ui/b2c/ResetPasswordContainer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ResetPasswordContainer.mjs","sources":["../../../../../../../../web/src/ui/b2c/ResetPasswordContainer.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { messages } from '../../messages/en';\nimport { I18nProviderWrapper } from '../components/atoms/I18nProviderWrapper';\nimport { GlobalContextProvider, DEFAULT_STATE, AppState, AppScreens } from './GlobalContextProvider';\nimport Container from './Container';\nimport { ResetPasswordSDKConfig } from '../../types';\nimport { readB2CInternals } from '../../utils/internal';\nimport { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig';\nimport { passwords } from './Products';\nimport { addProduct } from './utils';\n\nexport const ResetPasswordContainer = <TProjectConfiguration extends StytchProjectConfigurationInput>({\n  client,\n  config: rawConfig,\n  presentation,\n  callbacks,\n  strings,\n  passwordResetToken: rawToken,\n}: ResetPasswordSDKConfig<TProjectConfiguration>) => {\n  const config = addProduct(rawConfig, passwords);\n\n  // Default to reading token from URL if not provided\n  let token = rawToken;\n  if (!token) {\n    const result = client.parseAuthenticateUrl();\n    if (result?.tokenType === 'reset_password' || result?.tokenType === 'login') {\n      token = result.token;\n    }\n  }\n\n  // Read the watermark out of sync storage, then read it out of async storage\n  const [displayWatermark, setDisplayWatermark] = useState(() => {\n    const { displayWatermark } = readB2CInternals(client).bootstrap.getSync();\n    return displayWatermark;\n  });\n  useEffect(() => {\n    readB2CInternals(client)\n      .bootstrap.getAsync()\n      .then(({ displayWatermark }) => {\n        setDisplayWatermark(displayWatermark);\n      });\n  }, [client]);\n\n  const initialState: AppState = {\n    ...DEFAULT_STATE,\n    screen: AppScreens.PasswordResetForm,\n    formState: {\n      ...DEFAULT_STATE.formState,\n      resetPasswordState: {\n        token: token!,\n      },\n    },\n  };\n\n  const presentationValue = usePresentationWithDefault(presentation, displayWatermark, config.products, 'Products');\n\n  return (\n    <GlobalContextProvider client={client} config={config} callbacks={callbacks} initialState={initialState}>\n      <PresentationContext.Provider value={presentationValue}>\n        <I18nProviderWrapper messages={messages} overrides={strings}>\n          <Container />\n        </I18nProviderWrapper>\n      </PresentationContext.Provider>\n    </GlobalContextProvider>\n  );\n};\n"],"names":["ResetPasswordContainer","client","config","rawConfig","presentation","callbacks","strings","passwordResetToken","rawToken","addProduct","passwords","token","result","parseAuthenticateUrl","tokenType","displayWatermark","setDisplayWatermark","useState","readB2CInternals","bootstrap","getSync","useEffect","getAsync","then","initialState","DEFAULT_STATE","screen","AppScreens","PasswordResetForm","formState","resetPasswordState","presentationValue","usePresentationWithDefault","products","React","GlobalContextProvider","PresentationContext","Provider","value","I18nProviderWrapper","messages","overrides","Container"],"mappings":";;;;;;;;;;MAYaA,sBAAAA,GAAyB,CAAgE,EACpGC,MAAM,EACNC,MAAAA,EAAQC,SAAS,EACjBC,YAAY,EACZC,SAAS,EACTC,OAAO,EACPC,kBAAAA,EAAoBC,QAAQ,EACkB,GAAA;IAC9C,MAAMN,MAAAA,GAASO,WAAWN,SAAAA,EAAWO,SAAAA,CAAAA;;AAGrC,IAAA,IAAIC,KAAAA,GAAQH,QAAAA;AACZ,IAAA,IAAI,CAACG,KAAAA,EAAO;QACV,MAAMC,MAAAA,GAASX,OAAOY,oBAAoB,EAAA;AAC1C,QAAA,IAAID,MAAAA,EAAQE,SAAAA,KAAc,gBAAA,IAAoBF,MAAAA,EAAQE,cAAc,OAAA,EAAS;AAC3EH,YAAAA,KAAAA,GAAQC,OAAOD,KAAK;AACtB,QAAA;AACF,IAAA;;AAGA,IAAA,MAAM,CAACI,gBAAAA,EAAkBC,mBAAAA,CAAoB,GAAGC,QAAAA,CAAS,IAAA;QACvD,MAAM,EAAEF,gBAAgB,EAAE,GAAGG,iBAAiBjB,MAAAA,CAAAA,CAAQkB,SAAS,CAACC,OAAO,EAAA;QACvE,OAAOL,gBAAAA;AACT,IAAA,CAAA,CAAA;IACAM,SAAAA,CAAU,IAAA;QACRH,gBAAAA,CAAiBjB,MAAAA,CAAAA,CACdkB,SAAS,CAACG,QAAQ,EAAA,CAClBC,IAAI,CAAC,CAAC,EAAER,gBAAgB,EAAE,GAAA;YACzBC,mBAAAA,CAAoBD,gBAAAA,CAAAA;AACtB,QAAA,CAAA,CAAA;IACJ,CAAA,EAAG;AAACd,QAAAA;AAAO,KAAA,CAAA;AAEX,IAAA,MAAMuB,YAAAA,GAAyB;AAC7B,QAAA,GAAGC,aAAa;AAChBC,QAAAA,MAAAA,EAAQC,WAAWC,iBAAiB;QACpCC,SAAAA,EAAW;AACT,YAAA,GAAGJ,cAAcI,SAAS;YAC1BC,kBAAAA,EAAoB;gBAClBnB,KAAAA,EAAOA;AACT;AACF;AACF,KAAA;AAEA,IAAA,MAAMoB,oBAAoBC,0BAAAA,CAA2B5B,YAAAA,EAAcW,gBAAAA,EAAkBb,MAAAA,CAAO+B,QAAQ,EAAE,UAAA,CAAA;AAEtG,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,qBAAAA,EAAAA;QAAsBlC,MAAAA,EAAQA,MAAAA;QAAQC,MAAAA,EAAQA,MAAAA;QAAQG,SAAAA,EAAWA,SAAAA;QAAWmB,YAAAA,EAAcA;AACzF,KAAA,gBAAAU,cAAA,CAAA,aAAA,CAACE,oBAAoBC,QAAQ,EAAA;QAACC,KAAAA,EAAOP;qBACnCG,cAAA,CAAA,aAAA,CAACK,mBAAAA,EAAAA;QAAoBC,QAAAA,EAAUA,QAAAA;QAAUC,SAAAA,EAAWnC;qBAClD4B,cAAA,CAAA,aAAA,CAACQ,YAAAA,EAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAKX;;;;"}
+{"version":3,"file":"ResetPasswordContainer.mjs","sources":["../../../../../../../../web/src/ui/b2c/ResetPasswordContainer.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { messages } from '../../messages/en';\nimport { I18nProviderWrapper } from '../components/atoms/I18nProviderWrapper';\nimport { GlobalContextProvider, DEFAULT_STATE, AppState, AppScreens } from './GlobalContextProvider';\nimport Container from './Container';\nimport { ResetPasswordSDKConfig, DeprecatedSDKConfig } from '../../types';\nimport { readB2CInternals } from '../../utils/internal';\nimport { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig';\nimport { passwords } from './Products';\nimport { addProduct } from './utils';\nimport { logger, RUN_IN_DEV } from '@stytch/core';\n\nexport const ResetPasswordContainer = <TProjectConfiguration extends StytchProjectConfigurationInput>({\n  client,\n  config: rawConfig,\n  presentation,\n  callbacks,\n  strings,\n  styles,\n  passwordResetToken: rawToken,\n}: ResetPasswordSDKConfig<TProjectConfiguration> & DeprecatedSDKConfig) => {\n  const config = addProduct(rawConfig, passwords);\n\n  // Default to reading token from URL if not provided\n  let token = rawToken;\n  if (!token) {\n    const result = client.parseAuthenticateUrl();\n    if (result?.tokenType === 'reset_password' || result?.tokenType === 'login') {\n      token = result.token;\n    }\n  }\n\n  // Read the watermark out of sync storage, then read it out of async storage\n  const [displayWatermark, setDisplayWatermark] = useState(() => {\n    const { displayWatermark } = readB2CInternals(client).bootstrap.getSync();\n    return displayWatermark;\n  });\n  useEffect(() => {\n    readB2CInternals(client)\n      .bootstrap.getAsync()\n      .then(({ displayWatermark }) => {\n        setDisplayWatermark(displayWatermark);\n      });\n  }, [client]);\n\n  RUN_IN_DEV(() => {\n    if (styles) {\n      logger.error(\n        'styles is deprecated and has no effect. Use the presentation prop instead.\\n' +\n          'See https://stytch.com/docs/api-reference/consumer/frontend-sdks/react/upgrade-guide#step-by-step-guide',\n      );\n    }\n  });\n\n  const initialState: AppState = {\n    ...DEFAULT_STATE,\n    screen: AppScreens.PasswordResetForm,\n    formState: {\n      ...DEFAULT_STATE.formState,\n      resetPasswordState: {\n        token: token!,\n      },\n    },\n  };\n\n  const presentationValue = usePresentationWithDefault(presentation, displayWatermark, config.products, 'Products');\n\n  return (\n    <GlobalContextProvider client={client} config={config} callbacks={callbacks} initialState={initialState}>\n      <PresentationContext.Provider value={presentationValue}>\n        <I18nProviderWrapper messages={messages} overrides={strings}>\n          <Container />\n        </I18nProviderWrapper>\n      </PresentationContext.Provider>\n    </GlobalContextProvider>\n  );\n};\n"],"names":["ResetPasswordContainer","client","config","rawConfig","presentation","callbacks","strings","styles","passwordResetToken","rawToken","addProduct","passwords","token","result","parseAuthenticateUrl","tokenType","displayWatermark","setDisplayWatermark","useState","readB2CInternals","bootstrap","getSync","useEffect","getAsync","then","RUN_IN_DEV","logger","error","initialState","DEFAULT_STATE","screen","AppScreens","PasswordResetForm","formState","resetPasswordState","presentationValue","usePresentationWithDefault","products","React","GlobalContextProvider","PresentationContext","Provider","value","I18nProviderWrapper","messages","overrides","Container"],"mappings":";;;;;;;;;;;;MAaaA,sBAAAA,GAAyB,CAAgE,EACpGC,MAAM,EACNC,QAAQC,SAAS,EACjBC,YAAY,EACZC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,kBAAAA,EAAoBC,QAAQ,EACwC,GAAA;IACpE,MAAMP,MAAAA,GAASQ,WAAWP,SAAAA,EAAWQ,SAAAA,CAAAA;;AAGrC,IAAA,IAAIC,KAAAA,GAAQH,QAAAA;AACZ,IAAA,IAAI,CAACG,KAAAA,EAAO;QACV,MAAMC,MAAAA,GAASZ,OAAOa,oBAAoB,EAAA;AAC1C,QAAA,IAAID,MAAAA,EAAQE,SAAAA,KAAc,gBAAA,IAAoBF,MAAAA,EAAQE,cAAc,OAAA,EAAS;AAC3EH,YAAAA,KAAAA,GAAQC,OAAOD,KAAK;AACtB,QAAA;AACF,IAAA;;AAGA,IAAA,MAAM,CAACI,gBAAAA,EAAkBC,mBAAAA,CAAoB,GAAGC,QAAAA,CAAS,IAAA;QACvD,MAAM,EAAEF,gBAAgB,EAAE,GAAGG,iBAAiBlB,MAAAA,CAAAA,CAAQmB,SAAS,CAACC,OAAO,EAAA;QACvE,OAAOL,gBAAAA;AACT,IAAA,CAAA,CAAA;IACAM,SAAAA,CAAU,IAAA;QACRH,gBAAAA,CAAiBlB,MAAAA,CAAAA,CACdmB,SAAS,CAACG,QAAQ,EAAA,CAClBC,IAAI,CAAC,CAAC,EAAER,gBAAgB,EAAE,GAAA;YACzBC,mBAAAA,CAAoBD,gBAAAA,CAAAA;AACtB,QAAA,CAAA,CAAA;IACJ,CAAA,EAAG;AAACf,QAAAA;AAAO,KAAA,CAAA;IAEXwB,UAAAA,CAAW,IAAA;AACT,QAAA,IAAIlB,MAAAA,EAAQ;YACVmB,MAAAA,CAAOC,KAAK,CACV,8EAAA,GACE,yGAAA,CAAA;AAEN,QAAA;AACF,IAAA,CAAA,CAAA;AAEA,IAAA,MAAMC,YAAAA,GAAyB;AAC7B,QAAA,GAAGC,aAAa;AAChBC,QAAAA,MAAAA,EAAQC,WAAWC,iBAAiB;QACpCC,SAAAA,EAAW;AACT,YAAA,GAAGJ,cAAcI,SAAS;YAC1BC,kBAAAA,EAAoB;gBAClBtB,KAAAA,EAAOA;AACT;AACF;AACF,KAAA;AAEA,IAAA,MAAMuB,oBAAoBC,0BAAAA,CAA2BhC,YAAAA,EAAcY,gBAAAA,EAAkBd,MAAAA,CAAOmC,QAAQ,EAAE,UAAA,CAAA;AAEtG,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,qBAAAA,EAAAA;QAAsBtC,MAAAA,EAAQA,MAAAA;QAAQC,MAAAA,EAAQA,MAAAA;QAAQG,SAAAA,EAAWA,SAAAA;QAAWuB,YAAAA,EAAcA;AACzF,KAAA,gBAAAU,cAAA,CAAA,aAAA,CAACE,oBAAoBC,QAAQ,EAAA;QAACC,KAAAA,EAAOP;qBACnCG,cAAA,CAAA,aAAA,CAACK,mBAAAA,EAAAA;QAAoBC,QAAAA,EAAUA,QAAAA;QAAUC,SAAAA,EAAWvC;qBAClDgC,cAAA,CAAA,aAAA,CAACQ,YAAAA,EAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAKX;;;;"}

package/dist/esm-dev/packages/web/src/ui/b2c/screens/Crypto/SetupNewWallet.mjs

@@ -1,11 +1,11 @@
 import React__default from 'react';
 import { useLingui } from '../../../../../../../node_modules/@lingui/react/dist/index.mjs';
 import { useGlobalReducer, AppScreens } from '../../GlobalContextProvider.mjs';
-import { WalletToIcon } from '../../../../utils/crypto.mjs';
 import Column from '../../../components/atoms/Column.mjs';
 import TextColumn from '../../../components/molecules/TextColumn.mjs';
 import Button, { ButtonAnchor } from '../../../components/atoms/Button.mjs';
 import ButtonColumn from '../../../components/molecules/ButtonColumn.mjs';
+import { useCryptoIcon } from '../../../../utils/crypto.mjs';
 import { Wallets } from '../../../../../../core/src/public/ui.mjs';
 
 const commonButtonProps = {
@@ -13,13 +13,14 @@ const commonButtonProps = {
     target: '_blank',
     rel: 'noreferrer'
 };
-const walletIcon = (wallet)=>{
-    const Icon = WalletToIcon[wallet];
-    return /*#__PURE__*/ React__default.createElement(Icon, null);
-};
 const SetupNewWallet = ()=>{
     const { i18n: $__i18n, _: $__ } = useLingui();
     const [, dispatch] = useGlobalReducer();
+    const getCryptoIcon = useCryptoIcon();
+    const MetamaskIcon = getCryptoIcon(Wallets.Metamask);
+    const PhantomIcon = getCryptoIcon(Wallets.Phantom);
+    const CoinbaseIcon = getCryptoIcon(Wallets.Coinbase);
+    const BinanceIcon = getCryptoIcon(Wallets.Binance);
     return /*#__PURE__*/ React__default.createElement(Column, {
         gap: 6
     }, /*#__PURE__*/ React__default.createElement(TextColumn, {
@@ -37,29 +38,29 @@ const SetupNewWallet = ()=>{
         })
     }), /*#__PURE__*/ React__default.createElement(ButtonColumn, null, /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
         ...commonButtonProps,
-        icon: walletIcon(Wallets.Metamask),
+        icon: /*#__PURE__*/ React__default.createElement(MetamaskIcon, null),
         href: "https://metamask.io/"
     }, $__i18n._({
         id: "crypto.wallet.metamask",
         message: "Metamask"
     })), /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
         ...commonButtonProps,
-        icon: walletIcon(Wallets.Phantom),
-        href: "https://phantom.app/"
+        icon: /*#__PURE__*/ React__default.createElement(PhantomIcon, null),
+        href: "https://phantom.com/"
     }, $__i18n._({
         id: "crypto.wallet.phantom",
         message: "Phantom"
     })), /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
         ...commonButtonProps,
-        icon: walletIcon(Wallets.Coinbase),
+        icon: /*#__PURE__*/ React__default.createElement(CoinbaseIcon, null),
         href: "https://www.coinbase.com/wallet"
     }, $__i18n._({
         id: "crypto.wallet.coinbase",
         message: "Coinbase"
     })), /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
         ...commonButtonProps,
-        icon: walletIcon(Wallets.Binance),
-        href: "https://www.bnbchain.world/en/binance-wallet"
+        icon: /*#__PURE__*/ React__default.createElement(BinanceIcon, null),
+        href: "https://web3.binance.com/en/about"
     }, $__i18n._({
         id: "crypto.wallet.binance",
         message: "Binance"

package/dist/esm-dev/packages/web/src/ui/b2c/screens/Crypto/SetupNewWallet.mjs.map

@@ -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 { WalletToIcon } from '../../../../utils/crypto';\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';\n\nconst commonButtonProps = {\n  variant: 'outline',\n  target: '_blank',\n  rel: 'noreferrer',\n} as const;\n\nconst walletIcon = (wallet: Wallets) => {\n  const Icon = WalletToIcon[wallet];\n  return <Icon />;\n};\n\nexport const SetupNewWallet = () => {\n  const { t } = useLingui();\n  const [, dispatch] = useGlobalReducer();\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={walletIcon(Wallets.Metamask)} href=\"https://metamask.io/\">\n          {t({ id: 'crypto.wallet.metamask', message: 'Metamask' })}\n        </ButtonAnchor>\n        <ButtonAnchor {...commonButtonProps} icon={walletIcon(Wallets.Phantom)} href=\"https://phantom.app/\">\n          {t({ id: 'crypto.wallet.phantom', message: 'Phantom' })}\n        </ButtonAnchor>\n\n        <ButtonAnchor {...commonButtonProps} icon={walletIcon(Wallets.Coinbase)} href=\"https://www.coinbase.com/wallet\">\n          {t({ id: 'crypto.wallet.coinbase', message: 'Coinbase' })}\n        </ButtonAnchor>\n\n        <ButtonAnchor\n          {...commonButtonProps}\n          icon={walletIcon(Wallets.Binance)}\n          href=\"https://www.bnbchain.world/en/binance-wallet\"\n        >\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","walletIcon","wallet","Icon","WalletToIcon","React","SetupNewWallet","useLingui","dispatch","useGlobalReducer","Column","gap","TextColumn","header","body","helper","ButtonColumn","ButtonAnchor","icon","Wallets","Metamask","href","Phantom","Coinbase","Binance","Button","onClick","type","screen","AppScreens","Main"],"mappings":";;;;;;;;;;AAUA,MAAMA,iBAAAA,GAAoB;IACxBC,OAAAA,EAAS,SAAA;IACTC,MAAAA,EAAQ,QAAA;IACRC,GAAAA,EAAK;AACP,CAAA;AAEA,MAAMC,aAAa,CAACC,MAAAA,GAAAA;IAClB,MAAMC,IAAAA,GAAOC,YAAY,CAACF,MAAAA,CAAO;AACjC,IAAA,qBAAOG,cAAA,CAAA,aAAA,CAACF,IAAAA,EAAAA,IAAAA,CAAAA;AACV,CAAA;MAEaG,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,qBACEJ,cAAA,CAAA,aAAA,CAACK,MAAAA,EAAAA;QAAOC,GAAAA,EAAK;qBACXN,cAAA,CAAA,aAAA,CAACO,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,gBAAAV,cAAA,CAAA,aAAA,CAACW,kCACCX,cAAA,CAAA,aAAA,CAACY,YAAAA,EAAAA;AAAc,QAAA,GAAGpB,iBAAiB;QAAEqB,IAAAA,EAAMjB,UAAAA,CAAWkB,QAAQC,QAAQ,CAAA;QAAGC,IAAAA,EAAK;;;;uBAG9EhB,cAAA,CAAA,aAAA,CAACY,YAAAA,EAAAA;AAAc,QAAA,GAAGpB,iBAAiB;QAAEqB,IAAAA,EAAMjB,UAAAA,CAAWkB,QAAQG,OAAO,CAAA;QAAGD,IAAAA,EAAK;;;;uBAI7EhB,cAAA,CAAA,aAAA,CAACY,YAAAA,EAAAA;AAAc,QAAA,GAAGpB,iBAAiB;QAAEqB,IAAAA,EAAMjB,UAAAA,CAAWkB,QAAQI,QAAQ,CAAA;QAAGF,IAAAA,EAAK;;;;uBAI9EhB,cAAA,CAAA,aAAA,CAACY,YAAAA,EAAAA;AACE,QAAA,GAAGpB,iBAAiB;QACrBqB,IAAAA,EAAMjB,UAAAA,CAAWkB,QAAQK,OAAO,CAAA;QAChCH,IAAAA,EAAK;;;;uBAKPhB,cAAA,CAAA,aAAA,CAACoB,MAAAA,EAAAA;QAAO3B,OAAAA,EAAQ,SAAA;AAAU4B,QAAAA,OAAAA,EAAS,IAAMlB,QAAAA,CAAS;gBAAEmB,IAAAA,EAAM,YAAA;AAAcC,gBAAAA,MAAAA,EAAQC,WAAWC;AAAK,aAAA;;;;;AAMxG;;;;"}
+{"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;;;;"}

package/dist/esm-dev/packages/web/src/ui/b2c/screens/Crypto/WalletButtons.mjs

@@ -1,16 +1,13 @@
 import * as React from 'react';
 import { useLingui } from '../../../../../../../node_modules/@lingui/react/dist/index.mjs';
 import { useGlobalReducer, useConfig, AppScreens } from '../../GlobalContextProvider.mjs';
-import { isWalletVisible, WalletToText, WalletToIcon } from '../../../../utils/crypto.mjs';
+import { useCryptoIcon, isWalletVisible, WalletToText } from '../../../../utils/crypto.mjs';
 import ButtonColumn from '../../../components/molecules/ButtonColumn.mjs';
 import Button from '../../../components/atoms/Button.mjs';
+import { GenericWalletIcon } from '../../../../assets/genericWallet.mjs';
 import { Wallets } from '../../../../../../core/src/public/ui.mjs';
 
 const MAX_BUTTONS = 6;
-const WalletIconComponent = ({ wallet })=>{
-    const Icon = WalletToIcon[wallet];
-    return /*#__PURE__*/ React.createElement(Icon, null);
-};
 const walletMessages = {
     [Wallets.Phantom]: {
         id: "crypto.wallet.continueWithPhantom",
@@ -41,6 +38,7 @@ const CryptoWalletButtons = ({ type })=>{
     const { i18n: $__i18n, _: $__ } = useLingui();
     const [state, dispatch] = useGlobalReducer();
     const config = useConfig();
+    const getCryptoIcon = useCryptoIcon();
     const oAuthOptions = config.oauthOptions?.providers.length ?? 0;
     // Crypto Buttons on screen = Maximum Buttons - OAuth Buttons - 1 (Other crypto or set up new wallet)
     const cryptoButtonsOnMainScreen = MAX_BUTTONS - oAuthOptions - 1;
@@ -62,18 +60,18 @@ const CryptoWalletButtons = ({ type })=>{
     const mainWallets = allDetectedWallets.slice(0, cryptoButtonsOnMainScreen);
     const otherWallet = allDetectedWallets.slice(cryptoButtonsOnMainScreen);
     const walletsToRender = type === 'main' ? mainWallets : otherWallet;
-    return /*#__PURE__*/ React.createElement(ButtonColumn, null, walletsToRender.map((wallet)=>/*#__PURE__*/ React.createElement(Button, {
+    return /*#__PURE__*/ React.createElement(ButtonColumn, null, walletsToRender.map((wallet)=>{
+        const walletEnum = Wallets[wallet];
+        const Icon = getCryptoIcon(walletEnum);
+        return /*#__PURE__*/ React.createElement(Button, {
             key: wallet,
             variant: "outline",
-            icon: /*#__PURE__*/ React.createElement(WalletIconComponent, {
-                wallet: Wallets[wallet]
-            }),
-            onClick: ()=>onWalletStart(Wallets[wallet])
-        }, type === 'main' ? $__i18n._(walletMessages[Wallets[wallet]]) : $__i18n._(WalletToText[Wallets[wallet]]))), renderOtherScreenButton && type === 'main' ? /*#__PURE__*/ React.createElement(Button, {
+            icon: /*#__PURE__*/ React.createElement(Icon, null),
+            onClick: ()=>onWalletStart(walletEnum)
+        }, type === 'main' ? $__i18n._(walletMessages[walletEnum]) : $__i18n._(WalletToText[walletEnum]));
+    }), renderOtherScreenButton && type === 'main' ? /*#__PURE__*/ React.createElement(Button, {
         variant: "outline",
-        icon: /*#__PURE__*/ React.createElement(WalletIconComponent, {
-            wallet: Wallets.GenericEthereumWallet
-        }),
+        icon: /*#__PURE__*/ React.createElement(GenericWalletIcon, null),
         onClick: ()=>dispatch({
                 type: 'transition',
                 screen: AppScreens.CryptoOtherScreen

package/dist/esm-dev/packages/web/src/ui/b2c/screens/Crypto/WalletButtons.mjs.map

@@ -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 { WalletToIcon, WalletToText, isWalletVisible } from '../../../../utils/crypto';\nimport ButtonColumn from '../../../components/molecules/ButtonColumn';\nimport Button from '../../../components/atoms/Button';\n\nconst MAX_BUTTONS = 6;\n\nconst WalletIconComponent = ({ wallet }: { wallet: Wallets }) => {\n  const Icon = WalletToIcon[wallet];\n  return <Icon />;\n};\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  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        <Button\n          key={wallet}\n          variant=\"outline\"\n          icon={<WalletIconComponent wallet={Wallets[wallet]} />}\n          onClick={() => onWalletStart(Wallets[wallet])}\n        >\n          {type === 'main' ? t(walletMessages[Wallets[wallet]]) : t(WalletToText[Wallets[wallet]])}\n        </Button>\n      ))}\n      {renderOtherScreenButton && type === 'main' ? (\n        <Button\n          variant=\"outline\"\n          icon={<WalletIconComponent wallet={Wallets.GenericEthereumWallet} />}\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","WalletIconComponent","wallet","Icon","WalletToIcon","walletMessages","Wallets","Phantom","Binance","Coinbase","Metamask","GenericEthereumWallet","GenericSolanaWallet","CryptoWalletButtons","type","useLingui","state","dispatch","useGlobalReducer","config","useConfig","oAuthOptions","oauthOptions","providers","length","cryptoButtonsOnMainScreen","onWalletStart","cryptoState","formState","walletOption","screen","AppScreens","CryptoConnect","allDetectedWallets","Object","keys","filter","isWalletVisible","renderOtherScreenButton","mainWallets","slice","otherWallet","walletsToRender","ButtonColumn","map","Button","key","variant","icon","onClick","WalletToText","CryptoOtherScreen","CryptoSetupWallet"],"mappings":";;;;;;;;AAWA,MAAMA,WAAAA,GAAc,CAAA;AAEpB,MAAMC,mBAAAA,GAAsB,CAAC,EAAEC,MAAM,EAAuB,GAAA;IAC1D,MAAMC,IAAAA,GAAOC,YAAY,CAACF,MAAAA,CAAO;AACjC,IAAA,qBAAO,KAAA,CAAA,aAAA,CAACC,IAAAA,EAAAA,IAAAA,CAAAA;AACV,CAAA;AAEA,MAAME,cAAAA,GAAiB;IACrB,CAACC,OAAAA,CAAQC,OAAO,GAAC;;;;IACjB,CAACD,OAAAA,CAAQE,OAAO,GAAC;;;;IACjB,CAACF,OAAAA,CAAQG,QAAQ,GAAC;;;;IAClB,CAACH,OAAAA,CAAQI,QAAQ,GAAC;;;;IAClB,CAACJ,OAAAA,CAAQK,qBAAqB,GAAC;;;;IAI/B,CAACL,OAAAA,CAAQM,mBAAmB,GAAC;;;;AAI/B,CAAA;AAEO,MAAMC,mBAAAA,GAAsB,CAAC,EAAEC,IAAI,EAA8B,GAAA;AACtE,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;IACd,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,gBAAAA,EAAAA;AAC1B,IAAA,MAAMC,MAAAA,GAASC,SAAAA,EAAAA;AACf,IAAA,MAAMC,YAAAA,GAAeF,MAAAA,CAAOG,YAAY,EAAEC,UAAUC,MAAAA,IAAU,CAAA;;IAG9D,MAAMC,yBAAAA,GAA4BzB,cAAcqB,YAAAA,GAAe,CAAA;AAC/D,IAAA,MAAMK,gBAAgB,CAACxB,MAAAA,GAAAA;QACrBe,QAAAA,CAAS;YACPH,IAAAA,EAAM,qBAAA;YACNa,WAAAA,EAAa;gBACX,GAAGX,KAAAA,CAAMY,SAAS,CAACD,WAAW;gBAC9BE,YAAAA,EAAc3B;AAChB;AACF,SAAA,CAAA;QACAe,QAAAA,CAAS;YAAEH,IAAAA,EAAM,YAAA;AAAcgB,YAAAA,MAAAA,EAAQC,WAAWC;AAAc,SAAA,CAAA;AAClE,IAAA,CAAA;AAEA,IAAA,MAAMC,kBAAAA,GAAsBC,MAAAA,CAAOC,IAAI,CAAC7B,OAAAA,CAAAA,CAAsC8B,MAAM,CAAC,CAAClC,MAAAA,GACpFmC,eAAAA,CAAgB/B,OAAO,CAACJ,MAAAA,CAAO,CAAA,CAAA;IAGjC,MAAMoC,uBAAAA,GAA0BL,kBAAAA,CAAmBT,MAAM,GAAGC,yBAAAA;AAE5D,IAAA,MAAMc,WAAAA,GAAcN,kBAAAA,CAAmBO,KAAK,CAAC,CAAA,EAAGf,yBAAAA,CAAAA;IAChD,MAAMgB,WAAAA,GAAcR,kBAAAA,CAAmBO,KAAK,CAACf,yBAAAA,CAAAA;IAE7C,MAAMiB,eAAAA,GAAkB5B,IAAAA,KAAS,MAAA,GAASyB,WAAAA,GAAcE,WAAAA;AAExD,IAAA,qBACE,oBAACE,YAAAA,EAAAA,IAAAA,EACED,eAAAA,CAAgBE,GAAG,CAAC,CAAC1C,uBACpB,KAAA,CAAA,aAAA,CAAC2C,MAAAA,EAAAA;YACCC,GAAAA,EAAK5C,MAAAA;YACL6C,OAAAA,EAAQ,SAAA;AACRC,YAAAA,IAAAA,gBAAM,KAAA,CAAA,aAAA,CAAC/C,mBAAAA,EAAAA;gBAAoBC,MAAAA,EAAQI,OAAO,CAACJ,MAAAA;;AAC3C+C,YAAAA,OAAAA,EAAS,IAAMvB,aAAAA,CAAcpB,OAAO,CAACJ,MAAAA,CAAO;AAE3CY,SAAAA,EAAAA,IAAAA,KAAS,mBAAWT,cAAc,CAACC,OAAO,CAACJ,MAAAA,CAAO,CAAC,CAAA,GAAA,OAAA,CAAA,CAAA,CAAMgD,YAAY,CAAC5C,OAAO,CAACJ,MAAAA,CAAO,CAAC,KAG1FoC,uBAAAA,IAA2BxB,IAAAA,KAAS,uBACnC,KAAA,CAAA,aAAA,CAAC+B,MAAAA,EAAAA;QACCE,OAAAA,EAAQ,SAAA;AACRC,QAAAA,IAAAA,gBAAM,KAAA,CAAA,aAAA,CAAC/C,mBAAAA,EAAAA;AAAoBC,YAAAA,MAAAA,EAAQI,QAAQK;;AAC3CsC,QAAAA,OAAAA,EAAS,IAAMhC,QAAAA,CAAS;gBAAEH,IAAAA,EAAM,YAAA;AAAcgB,gBAAAA,MAAAA,EAAQC,WAAWoB;AAAkB,aAAA;;;;wBAKrF,KAAA,CAAA,aAAA,CAACN,MAAAA,EAAAA;QACCE,OAAAA,EAAQ,SAAA;AACRE,QAAAA,OAAAA,EAAS,IAAMhC,QAAAA,CAAS;gBAAEH,IAAAA,EAAM,YAAA;AAAcgB,gBAAAA,MAAAA,EAAQC,WAAWqB;AAAkB,aAAA;;;;;AAO7F;;;;"}
+{"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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"}

package/dist/esm-dev/packages/web/src/ui/b2c/screens/Secondary/PasswordlessAuthenticate.mjs

@@ -42,10 +42,14 @@ const PasswordlessAuthenticate = ({ secondaryType })=>{
     useMountEffect(()=>{
         switch(secondaryType){
             case 'eml':
-                sendLink();
+                sendLink().catch(()=>{
+                // Swallow error to avoid unhandled promise errors, sendLink() will already show error toast
+                });
                 return;
             case 'otp':
-                sendCode();
+                sendCode().catch(()=>{
+                // Swallow error to avoid unhandled promise errors, sendLink() will already show error toast
+                });
                 return;
             default:
                 stytchClient.passwords.resetByEmailStart(convertPasswordResetOptions(email, passwordOptions)).then((data)=>{

package/dist/esm-dev/packages/web/src/ui/b2c/screens/Secondary/PasswordlessAuthenticate.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordlessAuthenticate.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Secondary/PasswordlessAuthenticate.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { StytchAPIError, StytchEventType } from '@stytch/core/public';\nimport { EmailConfirmation } from './EmailConfirmation';\nimport { OTPAuthenticate } from './OTPAuthenticate';\nimport Divider from '../../../components/molecules/Divider';\nimport { convertPasswordResetOptions } from '../../../../utils';\nimport {\n  AppScreens,\n  useConfig,\n  useErrorCallback,\n  useEventCallback,\n  useGlobalReducer,\n  useStytch,\n} from '../../GlobalContextProvider';\nimport { useMountEffect } from '../../../hooks/useMountEffect';\nimport Button from '../../../components/atoms/Button';\nimport ErrorText from '../../../components/molecules/ErrorText';\nimport { getTranslatedError } from '../../../../utils/getTranslatedError';\nimport { useLingui } from '@lingui/react/macro';\nimport Column from '../../../components/atoms/Column';\nimport { usePasswordlessAuthenticate } from './usePasswordlessAuthenticate';\n\ntype PasswordlessAuthenticateProps = {\n  secondaryType: 'eml' | 'otp' | undefined;\n};\n\nexport const PasswordlessAuthenticate = ({ secondaryType }: PasswordlessAuthenticateProps) => {\n  const { t } = useLingui();\n  const stytchClient = useStytch();\n  const config = useConfig();\n  const [state, dispatch] = useGlobalReducer();\n  const onEvent = useEventCallback();\n  const onError = useErrorCallback();\n\n  const [errorMessage, setErrorMessage] = useState('');\n\n  const { sendLink, sendCode } = usePasswordlessAuthenticate();\n  const passwordOptions = config.passwordOptions;\n\n  const email = state.formState.passwordState.email;\n\n  const resetPassword = () => {\n    stytchClient.passwords\n      .resetByEmailStart(convertPasswordResetOptions(email, passwordOptions))\n      .then((data) => {\n        onEvent({ type: StytchEventType.PasswordResetByEmailStart, data });\n        dispatch({ type: 'transition', screen: AppScreens.PasswordSetNew });\n      })\n      .catch((e: StytchAPIError) => {\n        onError(e);\n        setErrorMessage(getTranslatedError(e, t));\n      });\n  };\n\n  useMountEffect(() => {\n    switch (secondaryType) {\n      case 'eml':\n        sendLink();\n        return;\n\n      case 'otp':\n        sendCode();\n        return;\n\n      default:\n        stytchClient.passwords\n          .resetByEmailStart(convertPasswordResetOptions(email, passwordOptions))\n          .then((data) => {\n            onEvent({ type: StytchEventType.PasswordResetByEmailStart, data });\n            dispatch({ type: 'transition', screen: AppScreens.PasswordSetNew });\n          })\n          .catch((e: StytchAPIError) => {\n            onError(e);\n          });\n        return;\n    }\n  });\n\n  if (!secondaryType) {\n    return null;\n  }\n\n  return (\n    <>\n      {secondaryType === 'eml' ? <EmailConfirmation showGoBack={false} /> : <OTPAuthenticate hideBackButton />}\n\n      <Divider />\n\n      <Column gap={2}>\n        <Button onClick={resetPassword} variant=\"outline\">\n          {t({ id: 'button.createPasswordInstead', message: 'Create a password instead' })}\n        </Button>\n        {errorMessage && <ErrorText>{errorMessage}</ErrorText>}\n      </Column>\n    </>\n  );\n};\n"],"names":["PasswordlessAuthenticate","secondaryType","useLingui","stytchClient","useStytch","config","useConfig","state","dispatch","useGlobalReducer","onEvent","useEventCallback","onError","useErrorCallback","errorMessage","setErrorMessage","useState","sendLink","sendCode","usePasswordlessAuthenticate","passwordOptions","email","formState","passwordState","resetPassword","passwords","resetByEmailStart","convertPasswordResetOptions","then","data","type","StytchEventType","PasswordResetByEmailStart","screen","AppScreens","PasswordSetNew","catch","e","getTranslatedError","useMountEffect","React","EmailConfirmation","showGoBack","OTPAuthenticate","hideBackButton","Divider","Column","gap","Button","onClick","variant","ErrorText"],"mappings":"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"}
+{"version":3,"file":"PasswordlessAuthenticate.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Secondary/PasswordlessAuthenticate.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { StytchAPIError, StytchEventType } from '@stytch/core/public';\nimport { EmailConfirmation } from './EmailConfirmation';\nimport { OTPAuthenticate } from './OTPAuthenticate';\nimport Divider from '../../../components/molecules/Divider';\nimport { convertPasswordResetOptions } from '../../../../utils';\nimport {\n  AppScreens,\n  useConfig,\n  useErrorCallback,\n  useEventCallback,\n  useGlobalReducer,\n  useStytch,\n} from '../../GlobalContextProvider';\nimport { useMountEffect } from '../../../hooks/useMountEffect';\nimport Button from '../../../components/atoms/Button';\nimport ErrorText from '../../../components/molecules/ErrorText';\nimport { getTranslatedError } from '../../../../utils/getTranslatedError';\nimport { useLingui } from '@lingui/react/macro';\nimport Column from '../../../components/atoms/Column';\nimport { usePasswordlessAuthenticate } from './usePasswordlessAuthenticate';\n\ntype PasswordlessAuthenticateProps = {\n  secondaryType: 'eml' | 'otp' | undefined;\n};\n\nexport const PasswordlessAuthenticate = ({ secondaryType }: PasswordlessAuthenticateProps) => {\n  const { t } = useLingui();\n  const stytchClient = useStytch();\n  const config = useConfig();\n  const [state, dispatch] = useGlobalReducer();\n  const onEvent = useEventCallback();\n  const onError = useErrorCallback();\n\n  const [errorMessage, setErrorMessage] = useState('');\n\n  const { sendLink, sendCode } = usePasswordlessAuthenticate();\n  const passwordOptions = config.passwordOptions;\n\n  const email = state.formState.passwordState.email;\n\n  const resetPassword = () => {\n    stytchClient.passwords\n      .resetByEmailStart(convertPasswordResetOptions(email, passwordOptions))\n      .then((data) => {\n        onEvent({ type: StytchEventType.PasswordResetByEmailStart, data });\n        dispatch({ type: 'transition', screen: AppScreens.PasswordSetNew });\n      })\n      .catch((e: StytchAPIError) => {\n        onError(e);\n        setErrorMessage(getTranslatedError(e, t));\n      });\n  };\n\n  useMountEffect(() => {\n    switch (secondaryType) {\n      case 'eml':\n        sendLink().catch(() => {\n          // Swallow error to avoid unhandled promise errors, sendLink() will already show error toast\n        });\n        return;\n\n      case 'otp':\n        sendCode().catch(() => {\n          // Swallow error to avoid unhandled promise errors, sendLink() will already show error toast\n        });\n        return;\n\n      default:\n        stytchClient.passwords\n          .resetByEmailStart(convertPasswordResetOptions(email, passwordOptions))\n          .then((data) => {\n            onEvent({ type: StytchEventType.PasswordResetByEmailStart, data });\n            dispatch({ type: 'transition', screen: AppScreens.PasswordSetNew });\n          })\n          .catch((e: StytchAPIError) => {\n            onError(e);\n          });\n        return;\n    }\n  });\n\n  if (!secondaryType) {\n    return null;\n  }\n\n  return (\n    <>\n      {secondaryType === 'eml' ? <EmailConfirmation showGoBack={false} /> : <OTPAuthenticate hideBackButton />}\n\n      <Divider />\n\n      <Column gap={2}>\n        <Button onClick={resetPassword} variant=\"outline\">\n          {t({ id: 'button.createPasswordInstead', message: 'Create a password instead' })}\n        </Button>\n        {errorMessage && <ErrorText>{errorMessage}</ErrorText>}\n      </Column>\n    </>\n  );\n};\n"],"names":["PasswordlessAuthenticate","secondaryType","useLingui","stytchClient","useStytch","config","useConfig","state","dispatch","useGlobalReducer","onEvent","useEventCallback","onError","useErrorCallback","errorMessage","setErrorMessage","useState","sendLink","sendCode","usePasswordlessAuthenticate","passwordOptions","email","formState","passwordState","resetPassword","passwords","resetByEmailStart","convertPasswordResetOptions","then","data","type","StytchEventType","PasswordResetByEmailStart","screen","AppScreens","PasswordSetNew","catch","e","getTranslatedError","useMountEffect","React","EmailConfirmation","showGoBack","OTPAuthenticate","hideBackButton","Divider","Column","gap","Button","onClick","variant","ErrorText"],"mappings":"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"}

package/dist/esm-dev/packages/web/src/ui/b2c/screens/Secondary/usePasswordlessAuthenticate.mjs

@@ -1,10 +1,14 @@
+import { useLingui } from '../../../../../../../node_modules/@lingui/react/dist/index.mjs';
 import { useState } from 'react';
 import { useStytch, useConfig, useGlobalReducer, useEventCallback, useErrorCallback } from '../../GlobalContextProvider.mjs';
 import { convertMagicLinkOptions } from '../../../../utils/index.mjs';
+import { errorToast } from '../../../components/atoms/Toast.mjs';
+import { getTranslatedError } from '../../../../utils/getTranslatedError.mjs';
 import { DEFAULT_OTP_EXPIRATION_MINUTES } from '../../../../../../core/src/constants.mjs';
 import { StytchEventType, OTPMethods } from '../../../../../../core/src/public/ui.mjs';
 
 function usePasswordlessAuthenticate() {
+    const { i18n: $__i18n, _: $__ } = useLingui();
     const stytchClient = useStytch();
     const { emailMagicLinksOptions, otpOptions } = useConfig();
     const [state, dispatch] = useGlobalReducer();
@@ -29,6 +33,9 @@ function usePasswordlessAuthenticate() {
             });
         } catch (e) {
             onError(e);
+            errorToast({
+                message: getTranslatedError(e, $__)
+            });
             throw e;
         } finally{
             setIsSubmitting(false);
@@ -55,6 +62,9 @@ function usePasswordlessAuthenticate() {
             });
         } catch (e) {
             onError(e);
+            errorToast({
+                message: getTranslatedError(e, $__)
+            });
             throw e;
         } finally{
             setIsSubmitting(false);

package/dist/esm-dev/packages/web/src/ui/b2c/screens/Secondary/usePasswordlessAuthenticate.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePasswordlessAuthenticate.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Secondary/usePasswordlessAuthenticate.ts"],"sourcesContent":["import { useState } from 'react';\nimport { DEFAULT_OTP_EXPIRATION_MINUTES } from '@stytch/core';\nimport { OTPMethods, StytchEventType, StytchSDKAPIError } from '@stytch/core/public';\nimport {\n  useConfig,\n  useErrorCallback,\n  useEventCallback,\n  useGlobalReducer,\n  useStytch,\n} from '../../GlobalContextProvider';\nimport { convertMagicLinkOptions } from '../../../../utils';\n\nexport function usePasswordlessAuthenticate() {\n  const stytchClient = useStytch();\n  const { emailMagicLinksOptions, otpOptions } = useConfig();\n  const [state, dispatch] = useGlobalReducer();\n  const onEvent = useEventCallback();\n  const onError = useErrorCallback();\n\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  const email = state.formState.passwordState.email;\n\n  const sendLink = async () => {\n    setIsSubmitting(true);\n\n    try {\n      const data = await stytchClient.magicLinks.email.loginOrCreate(\n        email,\n        convertMagicLinkOptions(emailMagicLinksOptions),\n      );\n      onEvent({ type: StytchEventType.MagicLinkLoginOrCreateEvent, data: { ...data, email } });\n      dispatch({ type: 'set_magic_link_email', email: email });\n    } catch (e) {\n      onError(e as StytchSDKAPIError);\n      throw e;\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  const sendCode = async () => {\n    setIsSubmitting(true);\n\n    try {\n      const data = await stytchClient.otps.email.loginOrCreate(email, {\n        expiration_minutes: otpOptions?.expirationMinutes ?? DEFAULT_OTP_EXPIRATION_MINUTES,\n        locale: otpOptions?.locale,\n      });\n      onEvent({ type: StytchEventType.OTPsLoginOrCreateEvent, data });\n      dispatch({\n        type: 'update_otp_state',\n        otpState: {\n          type: OTPMethods.Email,\n          methodId: data.method_id,\n          otpDestination: email,\n        },\n      });\n    } catch (e) {\n      onError(e as StytchSDKAPIError);\n      throw e;\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  return {\n    sendLink,\n    sendCode,\n    isSubmitting,\n  };\n}\n"],"names":["usePasswordlessAuthenticate","stytchClient","useStytch","emailMagicLinksOptions","otpOptions","useConfig","state","dispatch","useGlobalReducer","onEvent","useEventCallback","onError","useErrorCallback","isSubmitting","setIsSubmitting","useState","email","formState","passwordState","sendLink","data","magicLinks","loginOrCreate","convertMagicLinkOptions","type","StytchEventType","MagicLinkLoginOrCreateEvent","e","sendCode","otps","expiration_minutes","expirationMinutes","DEFAULT_OTP_EXPIRATION_MINUTES","locale","OTPsLoginOrCreateEvent","otpState","OTPMethods","Email","methodId","method_id","otpDestination"],"mappings":";;;;;;AAYO,SAASA,2BAAAA,GAAAA;AACd,IAAA,MAAMC,YAAAA,GAAeC,SAAAA,EAAAA;AACrB,IAAA,MAAM,EAAEC,sBAAsB,EAAEC,UAAU,EAAE,GAAGC,SAAAA,EAAAA;IAC/C,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,gBAAAA,EAAAA;AAC1B,IAAA,MAAMC,OAAAA,GAAUC,gBAAAA,EAAAA;AAChB,IAAA,MAAMC,OAAAA,GAAUC,gBAAAA,EAAAA;AAEhB,IAAA,MAAM,CAACC,YAAAA,EAAcC,eAAAA,CAAgB,GAAGC,QAAAA,CAAS,KAAA,CAAA;AAEjD,IAAA,MAAMC,QAAQV,KAAAA,CAAMW,SAAS,CAACC,aAAa,CAACF,KAAK;AAEjD,IAAA,MAAMG,QAAAA,GAAW,UAAA;QACfL,eAAAA,CAAgB,IAAA,CAAA;QAEhB,IAAI;YACF,MAAMM,IAAAA,GAAO,MAAMnB,YAAAA,CAAaoB,UAAU,CAACL,KAAK,CAACM,aAAa,CAC5DN,KAAAA,EACAO,uBAAAA,CAAwBpB,sBAAAA,CAAAA,CAAAA;YAE1BM,OAAAA,CAAQ;AAAEe,gBAAAA,IAAAA,EAAMC,gBAAgBC,2BAA2B;gBAAEN,IAAAA,EAAM;AAAE,oBAAA,GAAGA,IAAI;AAAEJ,oBAAAA;AAAM;AAAE,aAAA,CAAA;YACtFT,QAAAA,CAAS;gBAAEiB,IAAAA,EAAM,sBAAA;gBAAwBR,KAAAA,EAAOA;AAAM,aAAA,CAAA;AACxD,QAAA,CAAA,CAAE,OAAOW,CAAAA,EAAG;YACVhB,OAAAA,CAAQgB,CAAAA,CAAAA;YACR,MAAMA,CAAAA;QACR,CAAA,QAAU;YACRb,eAAAA,CAAgB,KAAA,CAAA;AAClB,QAAA;AACF,IAAA,CAAA;AAEA,IAAA,MAAMc,QAAAA,GAAW,UAAA;QACfd,eAAAA,CAAgB,IAAA,CAAA;QAEhB,IAAI;YACF,MAAMM,IAAAA,GAAO,MAAMnB,YAAAA,CAAa4B,IAAI,CAACb,KAAK,CAACM,aAAa,CAACN,KAAAA,EAAO;AAC9Dc,gBAAAA,kBAAAA,EAAoB1B,YAAY2B,iBAAAA,IAAqBC,8BAAAA;AACrDC,gBAAAA,MAAAA,EAAQ7B,UAAAA,EAAY6B;AACtB,aAAA,CAAA;YACAxB,OAAAA,CAAQ;AAAEe,gBAAAA,IAAAA,EAAMC,gBAAgBS,sBAAsB;AAAEd,gBAAAA;AAAK,aAAA,CAAA;YAC7Db,QAAAA,CAAS;gBACPiB,IAAAA,EAAM,kBAAA;gBACNW,QAAAA,EAAU;AACRX,oBAAAA,IAAAA,EAAMY,WAAWC,KAAK;AACtBC,oBAAAA,QAAAA,EAAUlB,KAAKmB,SAAS;oBACxBC,cAAAA,EAAgBxB;AAClB;AACF,aAAA,CAAA;AACF,QAAA,CAAA,CAAE,OAAOW,CAAAA,EAAG;YACVhB,OAAAA,CAAQgB,CAAAA,CAAAA;YACR,MAAMA,CAAAA;QACR,CAAA,QAAU;YACRb,eAAAA,CAAgB,KAAA,CAAA;AAClB,QAAA;AACF,IAAA,CAAA;IAEA,OAAO;AACLK,QAAAA,QAAAA;AACAS,QAAAA,QAAAA;AACAf,QAAAA;AACF,KAAA;AACF;;;;"}
+{"version":3,"file":"usePasswordlessAuthenticate.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Secondary/usePasswordlessAuthenticate.ts"],"sourcesContent":["import { useLingui } from '@lingui/react/macro';\nimport { useState } from 'react';\nimport { DEFAULT_OTP_EXPIRATION_MINUTES } from '@stytch/core';\nimport { OTPMethods, StytchEventType, StytchSDKAPIError } from '@stytch/core/public';\nimport {\n  useConfig,\n  useErrorCallback,\n  useEventCallback,\n  useGlobalReducer,\n  useStytch,\n} from '../../GlobalContextProvider';\nimport { convertMagicLinkOptions } from '../../../../utils';\nimport { errorToast } from '../../../components/atoms/Toast';\nimport { getTranslatedError } from '../../../../utils/getTranslatedError';\n\nexport function usePasswordlessAuthenticate() {\n  const { t } = useLingui();\n\n  const stytchClient = useStytch();\n  const { emailMagicLinksOptions, otpOptions } = useConfig();\n  const [state, dispatch] = useGlobalReducer();\n  const onEvent = useEventCallback();\n  const onError = useErrorCallback();\n\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  const email = state.formState.passwordState.email;\n\n  const sendLink = async () => {\n    setIsSubmitting(true);\n\n    try {\n      const data = await stytchClient.magicLinks.email.loginOrCreate(\n        email,\n        convertMagicLinkOptions(emailMagicLinksOptions),\n      );\n      onEvent({ type: StytchEventType.MagicLinkLoginOrCreateEvent, data: { ...data, email } });\n      dispatch({ type: 'set_magic_link_email', email: email });\n    } catch (e) {\n      onError(e as StytchSDKAPIError);\n      errorToast({ message: getTranslatedError(e as StytchSDKAPIError, t) });\n      throw e;\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  const sendCode = async () => {\n    setIsSubmitting(true);\n\n    try {\n      const data = await stytchClient.otps.email.loginOrCreate(email, {\n        expiration_minutes: otpOptions?.expirationMinutes ?? DEFAULT_OTP_EXPIRATION_MINUTES,\n        locale: otpOptions?.locale,\n      });\n      onEvent({ type: StytchEventType.OTPsLoginOrCreateEvent, data });\n      dispatch({\n        type: 'update_otp_state',\n        otpState: {\n          type: OTPMethods.Email,\n          methodId: data.method_id,\n          otpDestination: email,\n        },\n      });\n    } catch (e) {\n      onError(e as StytchSDKAPIError);\n      errorToast({ message: getTranslatedError(e as StytchSDKAPIError, t) });\n      throw e;\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  return {\n    sendLink,\n    sendCode,\n    isSubmitting,\n  };\n}\n"],"names":["usePasswordlessAuthenticate","useLingui","stytchClient","useStytch","emailMagicLinksOptions","otpOptions","useConfig","state","dispatch","useGlobalReducer","onEvent","useEventCallback","onError","useErrorCallback","isSubmitting","setIsSubmitting","useState","email","formState","passwordState","sendLink","data","magicLinks","loginOrCreate","convertMagicLinkOptions","type","StytchEventType","MagicLinkLoginOrCreateEvent","e","errorToast","message","getTranslatedError","sendCode","otps","expiration_minutes","expirationMinutes","DEFAULT_OTP_EXPIRATION_MINUTES","locale","OTPsLoginOrCreateEvent","otpState","OTPMethods","Email","methodId","method_id","otpDestination"],"mappings":"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"}

package/dist/esm-dev/packages/web/src/ui/compat/generateColorFallback.mjs

@@ -0,0 +1,63 @@
+import '../../../../../node_modules/chroma-js/index.mjs';
+import chroma from '../../../../../node_modules/chroma-js/src/chroma.mjs';
+
+/* eslint-disable lingui/no-unlocalized-strings */ function rgba(color) {
+    if (color.alpha() === 1) return `rgb(${color.rgb().join(',')})`;
+    return `rgba(${color.rgba().join(',')})`;
+}
+/**
+ * Takes a theme and dynamically generate the styles that uses color-mix,
+ * as a fallback for browsers that do not support color-mix()
+ */ function generateColorFallback(theme) {
+    // Don't use chroma.colorMix since chroma.js treats transparent as rgba(0, 0, 0, 0)
+    // which means our color is mixed with black rather than the original color
+    // with alpha 0, which is what browsers so instead
+    return {
+        // --tab-background: color-mix(in oklab, var(--accent) 80%, transparent);
+        'tab-background': rgba(chroma(theme.accent).alpha(0.8)),
+        // --primary-button-hover: color-mix(in oklab, var(--primary) 90%, transparent);
+        'primary-button-hover': rgba(chroma(theme.primary).alpha(0.9)),
+        // --secondary-button-hover: color-mix(in oklab, var(--secondary) 80%, transparent);
+        'secondary-button-hover': rgba(chroma(theme.secondary).alpha(0.8)),
+        // --destructive-button-hover: color-mix(in oklab, var(--destructive) 80%, transparent);
+        'destructive-button-hover': rgba(chroma(theme.destructive).alpha(0.8)),
+        // --divider-color: color-mix(in oklab, var(--border) 50%, transparent);
+        'divider-color': rgba(chroma(theme.border).alpha(0.5)),
+        // --focus-ring-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+        'focus-ring-shadow': `0 0 0 3px ${rgba(chroma(theme.ring).alpha(0.5))}`
+    };
+}
+const colors = [
+    'background',
+    'foreground',
+    'primary',
+    'primary-foreground',
+    'secondary',
+    'secondary-foreground',
+    'muted',
+    'muted-foreground',
+    'accent',
+    'accent-foreground',
+    'border',
+    'input',
+    'ring',
+    'destructive',
+    'warning',
+    'success'
+];
+function addColorFallback(theme) {
+    const updatedTheme = {
+        ...theme,
+        ...generateColorFallback(theme)
+    };
+    // RGB fallbacks for all Theme colors that use oklch, if the customer's browsers
+    // don't support them
+    for (const property of colors){
+        if (!chroma.valid(theme[property])) continue;
+        updatedTheme[property] = rgba(chroma(theme[property]));
+    }
+    return updatedTheme;
+}
+
+export { addColorFallback, generateColorFallback };
+//# sourceMappingURL=generateColorFallback.mjs.map

package/dist/esm-dev/packages/web/src/ui/compat/generateColorFallback.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateColorFallback.mjs","sources":["../../../../../../../../web/src/ui/compat/generateColorFallback.ts"],"sourcesContent":["import chroma from 'chroma-js';\n\nimport type { ColorMixFallback, Theme } from '../components/themes/ThemeConfig';\n\n/* eslint-disable lingui/no-unlocalized-strings */\n\nfunction rgba(color: chroma.Color) {\n  if (color.alpha() === 1) return `rgb(${color.rgb().join(',')})`;\n  return `rgba(${color.rgba().join(',')})`;\n}\n\n/**\n * Takes a theme and dynamically generate the styles that uses color-mix,\n * as a fallback for browsers that do not support color-mix()\n */\nexport function generateColorFallback(theme: Theme): ColorMixFallback {\n  // Don't use chroma.colorMix since chroma.js treats transparent as rgba(0, 0, 0, 0)\n  // which means our color is mixed with black rather than the original color\n  // with alpha 0, which is what browsers so instead\n  return {\n    // --tab-background: color-mix(in oklab, var(--accent) 80%, transparent);\n    'tab-background': rgba(chroma(theme.accent).alpha(0.8)),\n    // --primary-button-hover: color-mix(in oklab, var(--primary) 90%, transparent);\n    'primary-button-hover': rgba(chroma(theme.primary).alpha(0.9)),\n    // --secondary-button-hover: color-mix(in oklab, var(--secondary) 80%, transparent);\n    'secondary-button-hover': rgba(chroma(theme.secondary).alpha(0.8)),\n    // --destructive-button-hover: color-mix(in oklab, var(--destructive) 80%, transparent);\n    'destructive-button-hover': rgba(chroma(theme.destructive).alpha(0.8)),\n    // --divider-color: color-mix(in oklab, var(--border) 50%, transparent);\n    'divider-color': rgba(chroma(theme.border).alpha(0.5)),\n    // --focus-ring-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);\n    'focus-ring-shadow': `0 0 0 3px ${rgba(chroma(theme.ring).alpha(0.5))}`,\n  };\n}\n\nconst colors = [\n  'background',\n  'foreground',\n  'primary',\n  'primary-foreground',\n  'secondary',\n  'secondary-foreground',\n  'muted',\n  'muted-foreground',\n  'accent',\n  'accent-foreground',\n  'border',\n  'input',\n  'ring',\n  'destructive',\n  'warning',\n  'success',\n] as const satisfies (keyof Theme)[];\n\nexport function addColorFallback(theme: Theme): Theme {\n  const updatedTheme = { ...theme, ...generateColorFallback(theme) };\n\n  // RGB fallbacks for all Theme colors that use oklch, if the customer's browsers\n  // don't support them\n  for (const property of colors) {\n    if (!chroma.valid(theme[property])) continue;\n    updatedTheme[property] = rgba(chroma(theme[property]!));\n  }\n\n  return updatedTheme;\n}\n"],"names":["rgba","color","alpha","rgb","join","generateColorFallback","theme","chroma","accent","primary","secondary","destructive","border","ring","colors","addColorFallback","updatedTheme","property","valid"],"mappings":";;;AAIA,mDAEA,SAASA,IAAAA,CAAKC,KAAmB,EAAA;AAC/B,IAAA,IAAIA,KAAAA,CAAMC,KAAK,EAAA,KAAO,CAAA,EAAG,OAAO,CAAC,IAAI,EAAED,KAAAA,CAAME,GAAG,EAAA,CAAGC,IAAI,CAAC,GAAA,CAAA,CAAK,CAAC,CAAC;IAC/D,OAAO,CAAC,KAAK,EAAEH,KAAAA,CAAMD,IAAI,GAAGI,IAAI,CAAC,GAAA,CAAA,CAAK,CAAC,CAAC;AAC1C;AAEA;;;IAIO,SAASC,qBAAAA,CAAsBC,KAAY,EAAA;;;;IAIhD,OAAO;;AAEL,QAAA,gBAAA,EAAkBN,KAAKO,MAAAA,CAAOD,KAAAA,CAAME,MAAM,CAAA,CAAEN,KAAK,CAAC,GAAA,CAAA,CAAA;;AAElD,QAAA,sBAAA,EAAwBF,KAAKO,MAAAA,CAAOD,KAAAA,CAAMG,OAAO,CAAA,CAAEP,KAAK,CAAC,GAAA,CAAA,CAAA;;AAEzD,QAAA,wBAAA,EAA0BF,KAAKO,MAAAA,CAAOD,KAAAA,CAAMI,SAAS,CAAA,CAAER,KAAK,CAAC,GAAA,CAAA,CAAA;;AAE7D,QAAA,0BAAA,EAA4BF,KAAKO,MAAAA,CAAOD,KAAAA,CAAMK,WAAW,CAAA,CAAET,KAAK,CAAC,GAAA,CAAA,CAAA;;AAEjE,QAAA,eAAA,EAAiBF,KAAKO,MAAAA,CAAOD,KAAAA,CAAMM,MAAM,CAAA,CAAEV,KAAK,CAAC,GAAA,CAAA,CAAA;;QAEjD,mBAAA,EAAqB,CAAC,UAAU,EAAEF,IAAAA,CAAKO,MAAAA,CAAOD,MAAMO,IAAI,CAAA,CAAEX,KAAK,CAAC,GAAA,CAAA,CAAA,CAAA;AAClE,KAAA;AACF;AAEA,MAAMY,MAAAA,GAAS;AACb,IAAA,YAAA;AACA,IAAA,YAAA;AACA,IAAA,SAAA;AACA,IAAA,oBAAA;AACA,IAAA,WAAA;AACA,IAAA,sBAAA;AACA,IAAA,OAAA;AACA,IAAA,kBAAA;AACA,IAAA,QAAA;AACA,IAAA,mBAAA;AACA,IAAA,QAAA;AACA,IAAA,OAAA;AACA,IAAA,MAAA;AACA,IAAA,aAAA;AACA,IAAA,SAAA;AACA,IAAA;AACD,CAAA;AAEM,SAASC,iBAAiBT,KAAY,EAAA;AAC3C,IAAA,MAAMU,YAAAA,GAAe;AAAE,QAAA,GAAGV,KAAK;AAAE,QAAA,GAAGD,sBAAsBC,KAAAA;AAAO,KAAA;;;IAIjE,KAAK,MAAMW,YAAYH,MAAAA,CAAQ;AAC7B,QAAA,IAAI,CAACP,MAAAA,CAAOW,KAAK,CAACZ,KAAK,CAACW,SAAS,CAAA,EAAG;AACpCD,QAAAA,YAAY,CAACC,QAAAA,CAAS,GAAGjB,KAAKO,MAAAA,CAAOD,KAAK,CAACW,QAAAA,CAAS,CAAA,CAAA;AACtD,IAAA;IAEA,OAAOD,YAAAA;AACT;;;;"}