@clerk/ui 1.0.0-snapshot.v20251217165918 → 1.0.0-snapshot.v20251218165926

package/dist/components/SignUp/SignUpStartSolanaWalletsCard.js

@@ -0,0 +1,79 @@
+import { useRouter } from "../../router/RouteContext.js";
+import { localizationKeys } from "../../localization/localizationKeys.js";
+import { useSignUpContext } from "../../contexts/components/SignUp.js";
+import { descriptors } from "../../customizables/elementDescriptors.js";
+import { useCardState, withCardStateProvider } from "../../elements/contexts/index.js";
+import { Flow } from "../../customizables/Flow.js";
+import { Flex, Spinner } from "../../customizables/index.js";
+import { Card } from "../../elements/Card/index.js";
+import { Header } from "../../elements/Header.js";
+import { withRedirectToAfterSignUp, withRedirectToSignUpTask } from "../../common/withRedirect.js";
+import { BackLink } from "../../elements/BackLink.js";
+import { web3CallbackErrorHandler } from "../../utils/web3CallbackErrorHandler.js";
+import { Suspense, lazy } from "react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useClerk } from "@clerk/shared/react";
+
+//#region src/components/SignUp/SignUpStartSolanaWalletsCard.tsx
+const Web3SolanaWalletButtons = lazy(() => import(
+	/* webpackChunkName: "web3-solana-wallet-buttons" */
+	"../../elements/Web3SolanaWalletButtons.js"
+).then((m) => ({ default: m.Web3SolanaWalletButtons })));
+const SignUpStartSolanaWalletsCardInner = () => {
+	const clerk = useClerk();
+	const card = useCardState();
+	const router = useRouter();
+	const ctx = useSignUpContext();
+	const onBackLinkClick = () => {
+		router.navigate("../");
+	};
+	return /* @__PURE__ */ jsx(Flow.Part, {
+		part: "chooseWallet",
+		children: /* @__PURE__ */ jsxs(Card.Root, { children: [/* @__PURE__ */ jsxs(Card.Content, { children: [
+			/* @__PURE__ */ jsxs(Header.Root, {
+				showLogo: true,
+				children: [/* @__PURE__ */ jsx(Header.Title, { localizationKey: localizationKeys("signUp.web3Solana.title") }), /* @__PURE__ */ jsx(Header.Subtitle, { localizationKey: localizationKeys("signUp.web3Solana.subtitle") })]
+			}),
+			/* @__PURE__ */ jsx(Card.Alert, { children: card.error }),
+			/* @__PURE__ */ jsxs(Flex, {
+				direction: "col",
+				gap: 4,
+				children: [/* @__PURE__ */ jsx(Suspense, {
+					fallback: /* @__PURE__ */ jsx(Flex, {
+						direction: "row",
+						align: "center",
+						justify: "center",
+						sx: (t) => ({
+							height: "100%",
+							minHeight: t.sizes.$32
+						}),
+						children: /* @__PURE__ */ jsx(Spinner, {
+							size: "lg",
+							colorScheme: "primary",
+							elementDescriptor: descriptors.spinner
+						})
+					}),
+					children: /* @__PURE__ */ jsx(Web3SolanaWalletButtons, { web3AuthCallback: ({ walletName }) => {
+						return clerk.authenticateWithWeb3({
+							customNavigate: router.navigate,
+							redirectUrl: ctx.afterSignUpUrl || "/",
+							signUpContinueUrl: "continue",
+							strategy: "web3_solana_signature",
+							unsafeMetadata: ctx.unsafeMetadata,
+							walletName
+						}).catch((err) => web3CallbackErrorHandler(err, card.setError));
+					} })
+				}), /* @__PURE__ */ jsx(BackLink, {
+					boxElementDescriptor: descriptors.backRow,
+					linkElementDescriptor: descriptors.backLink,
+					onClick: onBackLinkClick
+				})]
+			})
+		] }), /* @__PURE__ */ jsx(Card.Footer, {})] })
+	});
+};
+const SignUpStartSolanaWalletsCard = withRedirectToSignUpTask(withRedirectToAfterSignUp(withCardStateProvider(SignUpStartSolanaWalletsCardInner)));
+
+//#endregion
+export { SignUpStartSolanaWalletsCard };
+//# sourceMappingURL=SignUpStartSolanaWalletsCard.js.map

package/dist/components/SignUp/SignUpStartSolanaWalletsCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignUpStartSolanaWalletsCard.js","names":[],"sources":["../../../src/components/SignUp/SignUpStartSolanaWalletsCard.tsx"],"sourcesContent":["import { useClerk } from '@clerk/shared/react';\nimport { lazy, Suspense } from 'react';\n\nimport { withRedirectToAfterSignUp, withRedirectToSignUpTask } from '@/ui/common/withRedirect';\nimport { descriptors, Flex, Flow, localizationKeys, Spinner } from '@/ui/customizables';\nimport { BackLink } from '@/ui/elements/BackLink';\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Header } from '@/ui/elements/Header';\nimport { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';\n\nconst Web3SolanaWalletButtons = lazy(() =>\n  import(/* webpackChunkName: \"web3-solana-wallet-buttons\" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({\n    default: m.Web3SolanaWalletButtons,\n  })),\n);\n\nimport { useSignUpContext } from '@/contexts';\nimport { useRouter } from '@/router';\n\nconst SignUpStartSolanaWalletsCardInner = () => {\n  const clerk = useClerk();\n  const card = useCardState();\n  const router = useRouter();\n  const ctx = useSignUpContext();\n\n  const onBackLinkClick = () => {\n    void router.navigate('../');\n  };\n\n  return (\n    <Flow.Part part='chooseWallet'>\n      <Card.Root>\n        <Card.Content>\n          <Header.Root showLogo>\n            <Header.Title localizationKey={localizationKeys('signUp.web3Solana.title')} />\n            <Header.Subtitle localizationKey={localizationKeys('signUp.web3Solana.subtitle')} />\n          </Header.Root>\n          <Card.Alert>{card.error}</Card.Alert>\n          <Flex\n            direction='col'\n            gap={4}\n          >\n            <Suspense\n              fallback={\n                <Flex\n                  direction={'row'}\n                  align={'center'}\n                  justify={'center'}\n                  sx={t => ({\n                    height: '100%',\n                    minHeight: t.sizes.$32,\n                  })}\n                >\n                  <Spinner\n                    size={'lg'}\n                    colorScheme={'primary'}\n                    elementDescriptor={descriptors.spinner}\n                  />\n                </Flex>\n              }\n            >\n              <Web3SolanaWalletButtons\n                web3AuthCallback={({ walletName }) => {\n                  return clerk\n                    .authenticateWithWeb3({\n                      customNavigate: router.navigate,\n                      redirectUrl: ctx.afterSignUpUrl || '/',\n                      signUpContinueUrl: 'continue',\n                      strategy: 'web3_solana_signature',\n                      unsafeMetadata: ctx.unsafeMetadata,\n                      walletName,\n                    })\n                    .catch(err => web3CallbackErrorHandler(err, card.setError));\n                }}\n              />\n            </Suspense>\n            <BackLink\n              boxElementDescriptor={descriptors.backRow}\n              linkElementDescriptor={descriptors.backLink}\n              onClick={onBackLinkClick}\n            />\n          </Flex>\n        </Card.Content>\n        <Card.Footer />\n      </Card.Root>\n    </Flow.Part>\n  );\n};\n\nexport const SignUpStartSolanaWalletsCard = withRedirectToSignUpTask(\n  withRedirectToAfterSignUp(withCardStateProvider(SignUpStartSolanaWalletsCardInner)),\n);\n"],"mappings":";;;;;;;;;;;;;;;;;AAWA,MAAM,0BAA0B,WAC9B;;CAA4D;EAAyC,MAAK,OAAM,EAC9G,SAAS,EAAE,yBACZ,EAAE,CACJ;AAKD,MAAM,0CAA0C;CAC9C,MAAM,QAAQ,UAAU;CACxB,MAAM,OAAO,cAAc;CAC3B,MAAM,SAAS,WAAW;CAC1B,MAAM,MAAM,kBAAkB;CAE9B,MAAM,wBAAwB;AAC5B,EAAK,OAAO,SAAS,MAAM;;AAG7B,QACE,oBAAC,KAAK;EAAK,MAAK;YACd,qBAAC,KAAK,mBACJ,qBAAC,KAAK;GACJ,qBAAC,OAAO;IAAK;eACX,oBAAC,OAAO,SAAM,iBAAiB,iBAAiB,0BAA0B,GAAI,EAC9E,oBAAC,OAAO,YAAS,iBAAiB,iBAAiB,6BAA6B,GAAI;KACxE;GACd,oBAAC,KAAK,mBAAO,KAAK,QAAmB;GACrC,qBAAC;IACC,WAAU;IACV,KAAK;eAEL,oBAAC;KACC,UACE,oBAAC;MACC,WAAW;MACX,OAAO;MACP,SAAS;MACT,KAAI,OAAM;OACR,QAAQ;OACR,WAAW,EAAE,MAAM;OACpB;gBAED,oBAAC;OACC,MAAM;OACN,aAAa;OACb,mBAAmB,YAAY;QAC/B;OACG;eAGT,oBAAC,2BACC,mBAAmB,EAAE,iBAAiB;AACpC,aAAO,MACJ,qBAAqB;OACpB,gBAAgB,OAAO;OACvB,aAAa,IAAI,kBAAkB;OACnC,mBAAmB;OACnB,UAAU;OACV,gBAAgB,IAAI;OACpB;OACD,CAAC,CACD,OAAM,QAAO,yBAAyB,KAAK,KAAK,SAAS,CAAC;SAE/D;MACO,EACX,oBAAC;KACC,sBAAsB,YAAY;KAClC,uBAAuB,YAAY;KACnC,SAAS;MACT;KACG;MACM,EACf,oBAAC,KAAK,WAAS,IACL;GACF;;AAIhB,MAAa,+BAA+B,yBAC1C,0BAA0B,sBAAsB,kCAAkC,CAAC,CACpF"}

package/dist/components/SignUp/index.js

@@ -7,6 +7,7 @@ import { withCoreSessionSwitchGuard } from "../../contexts/CoreSessionContext.js
 import { Flow } from "../../customizables/Flow.js";
 import { SignUpEmailLinkFlowComplete } from "../../common/EmailLinkCompleteFlowCard.js";
 import { usePreloadTasks } from "../../hooks/usePreloadTasks.js";
+import { SignUpStartSolanaWalletsCard } from "./SignUpStartSolanaWalletsCard.js";
 import { SignUpContinue } from "./SignUpContinue.js";
 import { SignUpEnterpriseConnections } from "./SignUpEnterpriseConnections.js";
 import { SignUpSSOCallback } from "./SignUpSSOCallback.js";
@@ -89,6 +90,10 @@ function SignUpRoutes() {
 				path: "enterprise-connections",
 				children: /* @__PURE__ */ jsx(SignUpEnterpriseConnections, {})
 			}),
+			/* @__PURE__ */ jsx(Route, {
+				path: "choose-wallet",
+				children: /* @__PURE__ */ jsx(SignUpStartSolanaWalletsCard, {})
+			}),
 			/* @__PURE__ */ jsx(Route, {
 				index: true,
 				children: /* @__PURE__ */ jsx(SignUpStart, {})

package/dist/components/SignUp/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["LazySessionTasks","SignUp: React.ComponentType<SignUpProps>","InternalSignUp: React.ComponentType<WithInternalRouting<SignUpProps>>"],"sources":["../../../src/components/SignUp/index.tsx"],"sourcesContent":["import { useClerk } from '@clerk/shared/react';\nimport type { SignUpModalProps, SignUpProps } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { SignUpEmailLinkFlowComplete } from '@/common/EmailLinkCompleteFlowCard';\nimport { SignUpContext, useSignUpContext, withCoreSessionSwitchGuard } from '@/contexts';\nimport { Flow } from '@/customizables';\nimport { usePreloadTasks } from '@/hooks/usePreloadTasks';\nimport type { WithInternalRouting } from '@/internal';\nimport { SessionTasks as LazySessionTasks } from '@/lazyModules/components';\nimport { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '@/router';\n\nimport { SignUpContinue } from './SignUpContinue';\nimport { SignUpEnterpriseConnections } from './SignUpEnterpriseConnections';\nimport { SignUpSSOCallback } from './SignUpSSOCallback';\nimport { SignUpStart } from './SignUpStart';\nimport { SignUpVerifyEmail } from './SignUpVerifyEmail';\nimport { SignUpVerifyPhone } from './SignUpVerifyPhone';\n\nfunction RedirectToSignUp() {\n  const clerk = useClerk();\n  React.useEffect(() => {\n    void clerk.redirectToSignUp();\n  }, []);\n  return null;\n}\n\nfunction SignUpRoutes(): JSX.Element {\n  usePreloadTasks();\n\n  const signUpContext = useSignUpContext();\n\n  return (\n    <Flow.Root flow='signUp'>\n      <Switch>\n        <Route\n          path='verify-email-address'\n          canActivate={clerk => !!clerk.client.signUp.emailAddress}\n        >\n          <SignUpVerifyEmail />\n        </Route>\n        <Route\n          path='verify-phone-number'\n          canActivate={clerk => !!clerk.client.signUp.phoneNumber}\n        >\n          <SignUpVerifyPhone />\n        </Route>\n        <Route path='sso-callback'>\n          <SignUpSSOCallback\n            signUpUrl={signUpContext.signUpUrl}\n            signInUrl={signUpContext.signInUrl}\n            signUpForceRedirectUrl={signUpContext.afterSignUpUrl}\n            signInForceRedirectUrl={signUpContext.afterSignInUrl}\n            secondFactorUrl={signUpContext.secondFactorUrl}\n            continueSignUpUrl='../continue'\n            verifyEmailAddressUrl='../verify-email-address'\n            verifyPhoneNumberUrl='../verify-phone-number'\n          />\n        </Route>\n        <Route path='verify'>\n          <SignUpEmailLinkFlowComplete\n            redirectUrlComplete={signUpContext.afterSignUpUrl}\n            verifyEmailPath='../verify-email-address'\n            verifyPhonePath='../verify-phone-number'\n          />\n        </Route>\n        <Route path='continue'>\n          <Route\n            path='verify-email-address'\n            canActivate={clerk => !!clerk.client.signUp.emailAddress}\n          >\n            <SignUpVerifyEmail />\n          </Route>\n          <Route\n            path='verify-phone-number'\n            canActivate={clerk => !!clerk.client.signUp.phoneNumber}\n          >\n            <SignUpVerifyPhone />\n          </Route>\n          <Route index>\n            <SignUpContinue />\n          </Route>\n        </Route>\n        <Route path='tasks'>\n          <LazySessionTasks redirectUrlComplete={signUpContext.afterSignUpUrl} />\n        </Route>\n        <Route path='enterprise-connections'>\n          <SignUpEnterpriseConnections />\n        </Route>\n        <Route index>\n          <SignUpStart />\n        </Route>\n        <Route>\n          <RedirectToSignUp />\n        </Route>\n      </Switch>\n    </Flow.Root>\n  );\n}\n\nSignUpRoutes.displayName = 'SignUp';\n\nexport const SignUp: React.ComponentType<SignUpProps> = withCoreSessionSwitchGuard(SignUpRoutes);\n\nconst InternalSignUp: React.ComponentType<WithInternalRouting<SignUpProps>> = withCoreSessionSwitchGuard(SignUpRoutes);\n\nexport const SignUpModal = (props: SignUpModalProps): JSX.Element => {\n  const signUpProps = {\n    signInUrl: `/${VIRTUAL_ROUTER_BASE_PATH}/sign-in`,\n    waitlistUrl: `/${VIRTUAL_ROUTER_BASE_PATH}/waitlist`,\n    ...props,\n  };\n\n  return (\n    <Route path='sign-up'>\n      <SignUpContext.Provider\n        value={{\n          componentName: 'SignUp',\n          ...signUpProps,\n          routing: 'virtual',\n          mode: 'modal',\n        }}\n      >\n        {/*TODO: Used by InvisibleRootBox, can we simplify? */}\n        <div>\n          <InternalSignUp\n            {...signUpProps}\n            routing='virtual'\n          />\n        </div>\n      </SignUpContext.Provider>\n    </Route>\n  );\n};\n\nexport { SignUpContinue, SignUpSSOCallback, SignUpStart, SignUpVerifyEmail, SignUpVerifyPhone };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,SAAS,mBAAmB;CAC1B,MAAM,QAAQ,UAAU;AACxB,OAAM,gBAAgB;AACpB,EAAK,MAAM,kBAAkB;IAC5B,EAAE,CAAC;AACN,QAAO;;AAGT,SAAS,eAA4B;AACnC,kBAAiB;CAEjB,MAAM,gBAAgB,kBAAkB;AAExC,QACE,oBAAC,KAAK;EAAK,MAAK;YACd,qBAAC;GACC,oBAAC;IACC,MAAK;IACL,cAAa,UAAS,CAAC,CAAC,MAAM,OAAO,OAAO;cAE5C,oBAAC,sBAAoB;KACf;GACR,oBAAC;IACC,MAAK;IACL,cAAa,UAAS,CAAC,CAAC,MAAM,OAAO,OAAO;cAE5C,oBAAC,sBAAoB;KACf;GACR,oBAAC;IAAM,MAAK;cACV,oBAAC;KACC,WAAW,cAAc;KACzB,WAAW,cAAc;KACzB,wBAAwB,cAAc;KACtC,wBAAwB,cAAc;KACtC,iBAAiB,cAAc;KAC/B,mBAAkB;KAClB,uBAAsB;KACtB,sBAAqB;MACrB;KACI;GACR,oBAAC;IAAM,MAAK;cACV,oBAAC;KACC,qBAAqB,cAAc;KACnC,iBAAgB;KAChB,iBAAgB;MAChB;KACI;GACR,qBAAC;IAAM,MAAK;;KACV,oBAAC;MACC,MAAK;MACL,cAAa,UAAS,CAAC,CAAC,MAAM,OAAO,OAAO;gBAE5C,oBAAC,sBAAoB;OACf;KACR,oBAAC;MACC,MAAK;MACL,cAAa,UAAS,CAAC,CAAC,MAAM,OAAO,OAAO;gBAE5C,oBAAC,sBAAoB;OACf;KACR,oBAAC;MAAM;gBACL,oBAAC,mBAAiB;OACZ;;KACF;GACR,oBAAC;IAAM,MAAK;cACV,oBAACA,gBAAiB,qBAAqB,cAAc,iBAAkB;KACjE;GACR,oBAAC;IAAM,MAAK;cACV,oBAAC,gCAA8B;KACzB;GACR,oBAAC;IAAM;cACL,oBAAC,gBAAc;KACT;GACR,oBAAC,mBACC,oBAAC,qBAAmB,GACd;MACD;GACC;;AAIhB,aAAa,cAAc;AAE3B,MAAaC,SAA2C,2BAA2B,aAAa;AAEhG,MAAMC,iBAAwE,2BAA2B,aAAa;AAEtH,MAAa,eAAe,UAAyC;CACnE,MAAM,cAAc;EAClB,WAAW,IAAI,yBAAyB;EACxC,aAAa,IAAI,yBAAyB;EAC1C,GAAG;EACJ;AAED,QACE,oBAAC;EAAM,MAAK;YACV,oBAAC,cAAc;GACb,OAAO;IACL,eAAe;IACf,GAAG;IACH,SAAS;IACT,MAAM;IACP;aAGD,oBAAC,mBACC,oBAAC;IACC,GAAI;IACJ,SAAQ;KACR,GACE;IACiB;GACnB"}
+{"version":3,"file":"index.js","names":["LazySessionTasks","SignUp: React.ComponentType<SignUpProps>","InternalSignUp: React.ComponentType<WithInternalRouting<SignUpProps>>"],"sources":["../../../src/components/SignUp/index.tsx"],"sourcesContent":["import { useClerk } from '@clerk/shared/react';\nimport type { SignUpModalProps, SignUpProps } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { SignUpEmailLinkFlowComplete } from '@/common/EmailLinkCompleteFlowCard';\nimport { SignUpContext, useSignUpContext, withCoreSessionSwitchGuard } from '@/contexts';\nimport { Flow } from '@/customizables';\nimport { usePreloadTasks } from '@/hooks/usePreloadTasks';\nimport type { WithInternalRouting } from '@/internal';\nimport { SessionTasks as LazySessionTasks } from '@/lazyModules/components';\nimport { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '@/router';\nimport { SignUpStartSolanaWalletsCard } from '@/ui/components/SignUp/SignUpStartSolanaWalletsCard';\n\nimport { SignUpContinue } from './SignUpContinue';\nimport { SignUpEnterpriseConnections } from './SignUpEnterpriseConnections';\nimport { SignUpSSOCallback } from './SignUpSSOCallback';\nimport { SignUpStart } from './SignUpStart';\nimport { SignUpVerifyEmail } from './SignUpVerifyEmail';\nimport { SignUpVerifyPhone } from './SignUpVerifyPhone';\n\nfunction RedirectToSignUp() {\n  const clerk = useClerk();\n  React.useEffect(() => {\n    void clerk.redirectToSignUp();\n  }, []);\n  return null;\n}\n\nfunction SignUpRoutes(): JSX.Element {\n  usePreloadTasks();\n\n  const signUpContext = useSignUpContext();\n\n  return (\n    <Flow.Root flow='signUp'>\n      <Switch>\n        <Route\n          path='verify-email-address'\n          canActivate={clerk => !!clerk.client.signUp.emailAddress}\n        >\n          <SignUpVerifyEmail />\n        </Route>\n        <Route\n          path='verify-phone-number'\n          canActivate={clerk => !!clerk.client.signUp.phoneNumber}\n        >\n          <SignUpVerifyPhone />\n        </Route>\n        <Route path='sso-callback'>\n          <SignUpSSOCallback\n            signUpUrl={signUpContext.signUpUrl}\n            signInUrl={signUpContext.signInUrl}\n            signUpForceRedirectUrl={signUpContext.afterSignUpUrl}\n            signInForceRedirectUrl={signUpContext.afterSignInUrl}\n            secondFactorUrl={signUpContext.secondFactorUrl}\n            continueSignUpUrl='../continue'\n            verifyEmailAddressUrl='../verify-email-address'\n            verifyPhoneNumberUrl='../verify-phone-number'\n          />\n        </Route>\n        <Route path='verify'>\n          <SignUpEmailLinkFlowComplete\n            redirectUrlComplete={signUpContext.afterSignUpUrl}\n            verifyEmailPath='../verify-email-address'\n            verifyPhonePath='../verify-phone-number'\n          />\n        </Route>\n        <Route path='continue'>\n          <Route\n            path='verify-email-address'\n            canActivate={clerk => !!clerk.client.signUp.emailAddress}\n          >\n            <SignUpVerifyEmail />\n          </Route>\n          <Route\n            path='verify-phone-number'\n            canActivate={clerk => !!clerk.client.signUp.phoneNumber}\n          >\n            <SignUpVerifyPhone />\n          </Route>\n          <Route index>\n            <SignUpContinue />\n          </Route>\n        </Route>\n        <Route path='tasks'>\n          <LazySessionTasks redirectUrlComplete={signUpContext.afterSignUpUrl} />\n        </Route>\n        <Route path='enterprise-connections'>\n          <SignUpEnterpriseConnections />\n        </Route>\n        <Route path='choose-wallet'>\n          <SignUpStartSolanaWalletsCard />\n        </Route>\n        <Route index>\n          <SignUpStart />\n        </Route>\n        <Route>\n          <RedirectToSignUp />\n        </Route>\n      </Switch>\n    </Flow.Root>\n  );\n}\n\nSignUpRoutes.displayName = 'SignUp';\n\nexport const SignUp: React.ComponentType<SignUpProps> = withCoreSessionSwitchGuard(SignUpRoutes);\n\nconst InternalSignUp: React.ComponentType<WithInternalRouting<SignUpProps>> = withCoreSessionSwitchGuard(SignUpRoutes);\n\nexport const SignUpModal = (props: SignUpModalProps): JSX.Element => {\n  const signUpProps = {\n    signInUrl: `/${VIRTUAL_ROUTER_BASE_PATH}/sign-in`,\n    waitlistUrl: `/${VIRTUAL_ROUTER_BASE_PATH}/waitlist`,\n    ...props,\n  };\n\n  return (\n    <Route path='sign-up'>\n      <SignUpContext.Provider\n        value={{\n          componentName: 'SignUp',\n          ...signUpProps,\n          routing: 'virtual',\n          mode: 'modal',\n        }}\n      >\n        {/*TODO: Used by InvisibleRootBox, can we simplify? */}\n        <div>\n          <InternalSignUp\n            {...signUpProps}\n            routing='virtual'\n          />\n        </div>\n      </SignUpContext.Provider>\n    </Route>\n  );\n};\n\nexport { SignUpContinue, SignUpSSOCallback, SignUpStart, SignUpVerifyEmail, SignUpVerifyPhone };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoBA,SAAS,mBAAmB;CAC1B,MAAM,QAAQ,UAAU;AACxB,OAAM,gBAAgB;AACpB,EAAK,MAAM,kBAAkB;IAC5B,EAAE,CAAC;AACN,QAAO;;AAGT,SAAS,eAA4B;AACnC,kBAAiB;CAEjB,MAAM,gBAAgB,kBAAkB;AAExC,QACE,oBAAC,KAAK;EAAK,MAAK;YACd,qBAAC;GACC,oBAAC;IACC,MAAK;IACL,cAAa,UAAS,CAAC,CAAC,MAAM,OAAO,OAAO;cAE5C,oBAAC,sBAAoB;KACf;GACR,oBAAC;IACC,MAAK;IACL,cAAa,UAAS,CAAC,CAAC,MAAM,OAAO,OAAO;cAE5C,oBAAC,sBAAoB;KACf;GACR,oBAAC;IAAM,MAAK;cACV,oBAAC;KACC,WAAW,cAAc;KACzB,WAAW,cAAc;KACzB,wBAAwB,cAAc;KACtC,wBAAwB,cAAc;KACtC,iBAAiB,cAAc;KAC/B,mBAAkB;KAClB,uBAAsB;KACtB,sBAAqB;MACrB;KACI;GACR,oBAAC;IAAM,MAAK;cACV,oBAAC;KACC,qBAAqB,cAAc;KACnC,iBAAgB;KAChB,iBAAgB;MAChB;KACI;GACR,qBAAC;IAAM,MAAK;;KACV,oBAAC;MACC,MAAK;MACL,cAAa,UAAS,CAAC,CAAC,MAAM,OAAO,OAAO;gBAE5C,oBAAC,sBAAoB;OACf;KACR,oBAAC;MACC,MAAK;MACL,cAAa,UAAS,CAAC,CAAC,MAAM,OAAO,OAAO;gBAE5C,oBAAC,sBAAoB;OACf;KACR,oBAAC;MAAM;gBACL,oBAAC,mBAAiB;OACZ;;KACF;GACR,oBAAC;IAAM,MAAK;cACV,oBAACA,gBAAiB,qBAAqB,cAAc,iBAAkB;KACjE;GACR,oBAAC;IAAM,MAAK;cACV,oBAAC,gCAA8B;KACzB;GACR,oBAAC;IAAM,MAAK;cACV,oBAAC,iCAA+B;KAC1B;GACR,oBAAC;IAAM;cACL,oBAAC,gBAAc;KACT;GACR,oBAAC,mBACC,oBAAC,qBAAmB,GACd;MACD;GACC;;AAIhB,aAAa,cAAc;AAE3B,MAAaC,SAA2C,2BAA2B,aAAa;AAEhG,MAAMC,iBAAwE,2BAA2B,aAAa;AAEtH,MAAa,eAAe,UAAyC;CACnE,MAAM,cAAc;EAClB,WAAW,IAAI,yBAAyB;EACxC,aAAa,IAAI,yBAAyB;EAC1C,GAAG;EACJ;AAED,QACE,oBAAC;EAAM,MAAK;YACV,oBAAC,cAAc;GACb,OAAO;IACL,eAAe;IACf,GAAG;IACH,SAAS;IACT,MAAM;IACP;aAGD,oBAAC,mBACC,oBAAC;IACC,GAAI;IACJ,SAAQ;KACR,GACE;IACiB;GACnB"}

package/dist/components/UserProfile/Web3Form.js

@@ -2,33 +2,45 @@ import { useEnabledThirdPartyProviders } from "../../hooks/useEnabledThirdPartyP
 import { useModuleManager } from "../../contexts/ModuleManagerContext.js";
 import { localizationKeys } from "../../localization/localizationKeys.js";
 import { descriptors } from "../../customizables/elementDescriptors.js";
-import { useCardState, withCardStateProvider } from "../../elements/contexts/index.js";
+import { useCardState } from "../../elements/contexts/index.js";
 import { Image, Text } from "../../customizables/index.js";
 import { getFieldError, handleError } from "../../utils/errorHandler.js";
+import { useActionContext } from "../../elements/Action/ActionRoot.js";
+import { Action } from "../../elements/Action/index.js";
 import { ProfileSection } from "../../elements/Section.js";
+import { Web3SelectSolanaWalletScreen } from "./Web3SelectSolanaWalletScreen.js";
 import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useReverification, useUser } from "@clerk/shared/react";
 import { createWeb3 } from "@clerk/shared/internal/clerk-js/web3";
 
 //#region src/components/UserProfile/Web3Form.tsx
-const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }) => {
+const AddWeb3WalletActionMenu = () => {
 	const card = useCardState();
+	const { open } = useActionContext();
 	const { user } = useUser();
 	const { strategies, strategyToDisplayData } = useEnabledThirdPartyProviders();
 	const moduleManager = useModuleManager();
 	const enabledStrategies = strategies.filter((s) => s.startsWith("web3"));
-	const connectedStrategies = user?.verifiedWeb3Wallets.map((w) => w.verification.strategy);
+	const connectedStrategies = user?.verifiedWeb3Wallets?.map((w) => w.verification.strategy) ?? [];
 	const unconnectedStrategies = enabledStrategies.filter((strategy) => {
-		return !connectedStrategies.includes(strategy);
+		return !connectedStrategies.includes(strategy) && strategyToDisplayData[strategy];
 	});
+	if (unconnectedStrategies.length === 0) return null;
 	const createWeb3Wallet = useReverification((identifier) => user?.createWeb3Wallet({ web3Wallet: identifier }));
-	const connect = async (strategy) => {
+	const connect = async ({ strategy, walletName }) => {
 		const web3 = createWeb3(moduleManager);
+		if (strategy === "web3_solana_signature" && !walletName) {
+			open("web3Wallets");
+			return;
+		}
 		const provider = strategy.replace("web3_", "").replace("_signature", "");
 		card.setError(void 0);
 		try {
 			card.setLoading(strategy);
-			const identifier = await web3.getWeb3Identifier({ provider });
+			const identifier = await web3.getWeb3Identifier({
+				provider,
+				walletName
+			});
 			if (!user) throw new Error("user is not defined");
 			let web3Wallet = await createWeb3Wallet(identifier);
 			web3Wallet = await web3Wallet?.prepareVerification({ strategy });
@@ -36,7 +48,8 @@ const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }) => {
 			const signature = await web3.generateWeb3Signature({
 				identifier,
 				nonce: message,
-				provider
+				provider,
+				walletName
 			});
 			await web3Wallet?.attemptVerification({ signature });
 			card.setIdle();
@@ -47,42 +60,50 @@ const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }) => {
 			else handleError(err, [], card.setError);
 		}
 	};
-	if (unconnectedStrategies.length === 0) return null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ProfileSection.ActionMenu, {
-		id: "web3Wallets",
-		triggerLocalizationKey: localizationKeys("userProfile.start.web3WalletsSection.primaryButton"),
-		onClick,
-		children: unconnectedStrategies.map((strategy) => /* @__PURE__ */ jsx(ProfileSection.ActionMenuItem, {
-			id: strategyToDisplayData[strategy].id,
-			onClick: () => {
-				connect(strategy);
-			},
-			isLoading: card.loadingMetadata === strategy,
-			isDisabled: card.isLoading,
-			localizationKey: localizationKeys("userProfile.web3WalletPage.web3WalletButtonsBlockButton", { provider: strategyToDisplayData[strategy].name }),
-			sx: (t) => ({
-				justifyContent: "start",
-				gap: t.space.$2
-			}),
-			leftIcon: /* @__PURE__ */ jsx(Image, {
-				elementDescriptor: descriptors.providerIcon,
-				elementId: descriptors.providerIcon.setId(strategyToDisplayData[strategy].id),
-				isLoading: card.loadingMetadata === strategy,
-				isDisabled: card.isLoading,
-				src: strategyToDisplayData[strategy].iconUrl,
-				alt: `Connect ${strategyToDisplayData[strategy].name}`,
-				sx: (theme) => ({ width: theme.sizes.$5 })
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Action.Closed, {
+			value: "web3Wallets",
+			children: /* @__PURE__ */ jsx(ProfileSection.ActionMenu, {
+				id: "web3Wallets",
+				triggerLocalizationKey: localizationKeys("userProfile.start.web3WalletsSection.primaryButton"),
+				children: unconnectedStrategies.map((strategy) => /* @__PURE__ */ jsx(ProfileSection.ActionMenuItem, {
+					id: strategyToDisplayData[strategy].id,
+					onClick: () => {
+						connect({ strategy });
+					},
+					isLoading: card.loadingMetadata === strategy,
+					isDisabled: card.isLoading,
+					localizationKey: localizationKeys("userProfile.web3WalletPage.web3WalletButtonsBlockButton", { provider: strategyToDisplayData[strategy].name }),
+					sx: (t) => ({
+						justifyContent: "start",
+						gap: t.space.$2
+					}),
+					leftIcon: /* @__PURE__ */ jsx(Image, {
+						elementDescriptor: descriptors.providerIcon,
+						elementId: descriptors.providerIcon.setId(strategyToDisplayData[strategy].id),
+						isLoading: card.loadingMetadata === strategy,
+						isDisabled: card.isLoading,
+						src: strategyToDisplayData[strategy].iconUrl,
+						alt: `Connect ${strategyToDisplayData[strategy].name}`,
+						sx: (theme) => ({ width: theme.sizes.$5 })
+					})
+				}, strategy))
 			})
-		}, strategy))
-	}), card.error && /* @__PURE__ */ jsx(Text, {
-		colorScheme: "danger",
-		sx: (t) => ({
-			padding: t.sizes.$1x5,
-			paddingLeft: t.sizes.$8x5
 		}),
-		children: card.error
-	})] });
-});
+		/* @__PURE__ */ jsx(Action.Open, {
+			value: "web3Wallets",
+			children: /* @__PURE__ */ jsx(Action.Card, { children: /* @__PURE__ */ jsx(Web3SelectSolanaWalletScreen, { onConnect: connect }) })
+		}),
+		card.error && /* @__PURE__ */ jsx(Text, {
+			colorScheme: "danger",
+			sx: (t) => ({
+				padding: t.sizes.$1x5,
+				paddingLeft: t.sizes.$8x5
+			}),
+			children: card.error
+		})
+	] });
+};
 
 //#endregion
 export { AddWeb3WalletActionMenu };

package/dist/components/UserProfile/Web3Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Web3Form.js","names":["err: any"],"sources":["../../../src/components/UserProfile/Web3Form.tsx"],"sourcesContent":["import { createWeb3 } from '@clerk/shared/internal/clerk-js/web3';\nimport { useReverification, useUser } from '@clerk/shared/react';\nimport type { Web3Provider, Web3Strategy } from '@clerk/shared/types';\n\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { ProfileSection } from '@/ui/elements/Section';\nimport { getFieldError, handleError } from '@/ui/utils/errorHandler';\n\nimport { useModuleManager } from '../../contexts';\nimport { descriptors, Image, localizationKeys, Text } from '../../customizables';\nimport { useEnabledThirdPartyProviders } from '../../hooks';\n\nexport const AddWeb3WalletActionMenu = withCardStateProvider(({ onClick }: { onClick?: () => void }) => {\n  const card = useCardState();\n  const { user } = useUser();\n  const { strategies, strategyToDisplayData } = useEnabledThirdPartyProviders();\n  const moduleManager = useModuleManager();\n  const enabledStrategies = strategies.filter(s => s.startsWith('web3')) as Web3Strategy[];\n  const connectedStrategies = user?.verifiedWeb3Wallets.map(w => w.verification.strategy) as Web3Strategy[];\n  const unconnectedStrategies = enabledStrategies.filter(strategy => {\n    return !connectedStrategies.includes(strategy);\n  });\n  const createWeb3Wallet = useReverification((identifier: string) =>\n    user?.createWeb3Wallet({ web3Wallet: identifier }),\n  );\n\n  const connect = async (strategy: Web3Strategy) => {\n    const web3 = createWeb3(moduleManager);\n\n    const provider = strategy.replace('web3_', '').replace('_signature', '') as Web3Provider;\n    card.setError(undefined);\n\n    try {\n      card.setLoading(strategy);\n      const identifier = await web3.getWeb3Identifier({ provider });\n\n      if (!user) {\n        throw new Error('user is not defined');\n      }\n\n      let web3Wallet = await createWeb3Wallet(identifier);\n      web3Wallet = await web3Wallet?.prepareVerification({ strategy });\n      const message = web3Wallet?.verification.message as string;\n      const signature = await web3.generateWeb3Signature({ identifier, nonce: message, provider });\n      await web3Wallet?.attemptVerification({ signature });\n      card.setIdle();\n    } catch (err: any) {\n      card.setIdle();\n      const fieldError = getFieldError(err);\n      if (fieldError) {\n        card.setError(fieldError.longMessage);\n      } else {\n        handleError(err, [], card.setError);\n      }\n    }\n  };\n\n  if (unconnectedStrategies.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      <ProfileSection.ActionMenu\n        id='web3Wallets'\n        triggerLocalizationKey={localizationKeys('userProfile.start.web3WalletsSection.primaryButton')}\n        onClick={onClick}\n      >\n        {unconnectedStrategies.map(strategy => (\n          <ProfileSection.ActionMenuItem\n            key={strategy}\n            id={strategyToDisplayData[strategy].id}\n            onClick={() => {\n              void connect(strategy);\n            }}\n            isLoading={card.loadingMetadata === strategy}\n            isDisabled={card.isLoading}\n            localizationKey={localizationKeys('userProfile.web3WalletPage.web3WalletButtonsBlockButton', {\n              provider: strategyToDisplayData[strategy].name,\n            })}\n            sx={t => ({\n              justifyContent: 'start',\n              gap: t.space.$2,\n            })}\n            leftIcon={\n              <Image\n                elementDescriptor={descriptors.providerIcon}\n                elementId={descriptors.providerIcon.setId(strategyToDisplayData[strategy].id)}\n                isLoading={card.loadingMetadata === strategy}\n                isDisabled={card.isLoading}\n                src={strategyToDisplayData[strategy].iconUrl}\n                alt={`Connect ${strategyToDisplayData[strategy].name}`}\n                sx={theme => ({ width: theme.sizes.$5 })}\n              />\n            }\n          />\n        ))}\n      </ProfileSection.ActionMenu>\n      {card.error && (\n        <Text\n          colorScheme='danger'\n          sx={t => ({\n            padding: t.sizes.$1x5,\n            paddingLeft: t.sizes.$8x5,\n          })}\n        >\n          {card.error}\n        </Text>\n      )}\n    </>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAa,0BAA0B,uBAAuB,EAAE,cAAwC;CACtG,MAAM,OAAO,cAAc;CAC3B,MAAM,EAAE,SAAS,SAAS;CAC1B,MAAM,EAAE,YAAY,0BAA0B,+BAA+B;CAC7E,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,oBAAoB,WAAW,QAAO,MAAK,EAAE,WAAW,OAAO,CAAC;CACtE,MAAM,sBAAsB,MAAM,oBAAoB,KAAI,MAAK,EAAE,aAAa,SAAS;CACvF,MAAM,wBAAwB,kBAAkB,QAAO,aAAY;AACjE,SAAO,CAAC,oBAAoB,SAAS,SAAS;GAC9C;CACF,MAAM,mBAAmB,mBAAmB,eAC1C,MAAM,iBAAiB,EAAE,YAAY,YAAY,CAAC,CACnD;CAED,MAAM,UAAU,OAAO,aAA2B;EAChD,MAAM,OAAO,WAAW,cAAc;EAEtC,MAAM,WAAW,SAAS,QAAQ,SAAS,GAAG,CAAC,QAAQ,cAAc,GAAG;AACxE,OAAK,SAAS,OAAU;AAExB,MAAI;AACF,QAAK,WAAW,SAAS;GACzB,MAAM,aAAa,MAAM,KAAK,kBAAkB,EAAE,UAAU,CAAC;AAE7D,OAAI,CAAC,KACH,OAAM,IAAI,MAAM,sBAAsB;GAGxC,IAAI,aAAa,MAAM,iBAAiB,WAAW;AACnD,gBAAa,MAAM,YAAY,oBAAoB,EAAE,UAAU,CAAC;GAChE,MAAM,UAAU,YAAY,aAAa;GACzC,MAAM,YAAY,MAAM,KAAK,sBAAsB;IAAE;IAAY,OAAO;IAAS;IAAU,CAAC;AAC5F,SAAM,YAAY,oBAAoB,EAAE,WAAW,CAAC;AACpD,QAAK,SAAS;WACPA,KAAU;AACjB,QAAK,SAAS;GACd,MAAM,aAAa,cAAc,IAAI;AACrC,OAAI,WACF,MAAK,SAAS,WAAW,YAAY;OAErC,aAAY,KAAK,EAAE,EAAE,KAAK,SAAS;;;AAKzC,KAAI,sBAAsB,WAAW,EACnC,QAAO;AAGT,QACE,4CACE,oBAAC,eAAe;EACd,IAAG;EACH,wBAAwB,iBAAiB,qDAAqD;EACrF;YAER,sBAAsB,KAAI,aACzB,oBAAC,eAAe;GAEd,IAAI,sBAAsB,UAAU;GACpC,eAAe;AACb,IAAK,QAAQ,SAAS;;GAExB,WAAW,KAAK,oBAAoB;GACpC,YAAY,KAAK;GACjB,iBAAiB,iBAAiB,2DAA2D,EAC3F,UAAU,sBAAsB,UAAU,MAC3C,CAAC;GACF,KAAI,OAAM;IACR,gBAAgB;IAChB,KAAK,EAAE,MAAM;IACd;GACD,UACE,oBAAC;IACC,mBAAmB,YAAY;IAC/B,WAAW,YAAY,aAAa,MAAM,sBAAsB,UAAU,GAAG;IAC7E,WAAW,KAAK,oBAAoB;IACpC,YAAY,KAAK;IACjB,KAAK,sBAAsB,UAAU;IACrC,KAAK,WAAW,sBAAsB,UAAU;IAChD,KAAI,WAAU,EAAE,OAAO,MAAM,MAAM,IAAI;KACvC;KAvBC,SAyBL,CACF;GACwB,EAC3B,KAAK,SACJ,oBAAC;EACC,aAAY;EACZ,KAAI,OAAM;GACR,SAAS,EAAE,MAAM;GACjB,aAAa,EAAE,MAAM;GACtB;YAEA,KAAK;GACD,IAER;EAEL"}
+{"version":3,"file":"Web3Form.js","names":["err: any"],"sources":["../../../src/components/UserProfile/Web3Form.tsx"],"sourcesContent":["import { createWeb3 } from '@clerk/shared/internal/clerk-js/web3';\nimport { useReverification, useUser } from '@clerk/shared/react';\nimport type { Web3Provider, Web3Strategy } from '@clerk/shared/types';\n\nimport { Web3SelectSolanaWalletScreen } from '@/ui/components/UserProfile/Web3SelectSolanaWalletScreen';\nimport { Action } from '@/ui/elements/Action';\nimport { useActionContext } from '@/ui/elements/Action/ActionRoot';\nimport { useCardState } from '@/ui/elements/contexts';\nimport { ProfileSection } from '@/ui/elements/Section';\nimport { getFieldError, handleError } from '@/ui/utils/errorHandler';\n\nimport { useModuleManager } from '../../contexts';\nimport { descriptors, Image, localizationKeys, Text } from '../../customizables';\nimport { useEnabledThirdPartyProviders } from '../../hooks';\n\nexport const AddWeb3WalletActionMenu = () => {\n  const card = useCardState();\n  const { open } = useActionContext();\n  const { user } = useUser();\n  const { strategies, strategyToDisplayData } = useEnabledThirdPartyProviders();\n  const moduleManager = useModuleManager();\n  const enabledStrategies = strategies.filter(s => s.startsWith('web3')) as Web3Strategy[];\n  const connectedStrategies = user?.verifiedWeb3Wallets?.map(w => w.verification.strategy) ?? ([] as Web3Strategy[]);\n  const unconnectedStrategies = enabledStrategies.filter(strategy => {\n    return !connectedStrategies.includes(strategy) && strategyToDisplayData[strategy];\n  });\n\n  if (unconnectedStrategies.length === 0) {\n    return null;\n  }\n\n  const createWeb3Wallet = useReverification((identifier: string) =>\n    user?.createWeb3Wallet({ web3Wallet: identifier }),\n  );\n\n  // If the user selects `web3_solana_signature` as their strategy,\n  // we need to obtain the wallet name to use when connecting and signing the message during the auth flow\n  //\n  // Otherwise, our current Web3 providers are all based on the wallet provider name,\n  // which is sufficient for our current use case when connecting to a wallet.\n  const connect = async ({ strategy, walletName }: { strategy: Web3Strategy; walletName?: string }) => {\n    const web3 = createWeb3(moduleManager);\n\n    if (strategy === 'web3_solana_signature' && !walletName) {\n      open('web3Wallets');\n      return;\n    }\n    const provider = strategy.replace('web3_', '').replace('_signature', '') as Web3Provider;\n    card.setError(undefined);\n\n    try {\n      card.setLoading(strategy);\n      const identifier = await web3.getWeb3Identifier({ provider, walletName });\n\n      if (!user) {\n        throw new Error('user is not defined');\n      }\n\n      let web3Wallet = await createWeb3Wallet(identifier);\n      web3Wallet = await web3Wallet?.prepareVerification({ strategy });\n      const message = web3Wallet?.verification.message as string;\n      const signature = await web3.generateWeb3Signature({ identifier, nonce: message, provider, walletName });\n      await web3Wallet?.attemptVerification({ signature });\n      card.setIdle();\n    } catch (err: any) {\n      card.setIdle();\n      const fieldError = getFieldError(err);\n      if (fieldError) {\n        card.setError(fieldError.longMessage);\n      } else {\n        handleError(err, [], card.setError);\n      }\n    }\n  };\n\n  return (\n    <>\n      <Action.Closed value='web3Wallets'>\n        <ProfileSection.ActionMenu\n          id='web3Wallets'\n          triggerLocalizationKey={localizationKeys('userProfile.start.web3WalletsSection.primaryButton')}\n        >\n          {unconnectedStrategies.map(strategy => (\n            <ProfileSection.ActionMenuItem\n              key={strategy}\n              id={strategyToDisplayData[strategy].id}\n              onClick={() => {\n                void connect({ strategy });\n              }}\n              isLoading={card.loadingMetadata === strategy}\n              isDisabled={card.isLoading}\n              localizationKey={localizationKeys('userProfile.web3WalletPage.web3WalletButtonsBlockButton', {\n                provider: strategyToDisplayData[strategy].name,\n              })}\n              sx={t => ({\n                justifyContent: 'start',\n                gap: t.space.$2,\n              })}\n              leftIcon={\n                <Image\n                  elementDescriptor={descriptors.providerIcon}\n                  elementId={descriptors.providerIcon.setId(strategyToDisplayData[strategy].id)}\n                  isLoading={card.loadingMetadata === strategy}\n                  isDisabled={card.isLoading}\n                  src={strategyToDisplayData[strategy].iconUrl}\n                  alt={`Connect ${strategyToDisplayData[strategy].name}`}\n                  sx={theme => ({ width: theme.sizes.$5 })}\n                />\n              }\n            />\n          ))}\n        </ProfileSection.ActionMenu>\n      </Action.Closed>\n      <Action.Open value='web3Wallets'>\n        <Action.Card>\n          <Web3SelectSolanaWalletScreen onConnect={connect} />\n        </Action.Card>\n      </Action.Open>\n\n      {card.error && (\n        <Text\n          colorScheme='danger'\n          sx={t => ({\n            padding: t.sizes.$1x5,\n            paddingLeft: t.sizes.$8x5,\n          })}\n        >\n          {card.error}\n        </Text>\n      )}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,MAAa,gCAAgC;CAC3C,MAAM,OAAO,cAAc;CAC3B,MAAM,EAAE,SAAS,kBAAkB;CACnC,MAAM,EAAE,SAAS,SAAS;CAC1B,MAAM,EAAE,YAAY,0BAA0B,+BAA+B;CAC7E,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,oBAAoB,WAAW,QAAO,MAAK,EAAE,WAAW,OAAO,CAAC;CACtE,MAAM,sBAAsB,MAAM,qBAAqB,KAAI,MAAK,EAAE,aAAa,SAAS,IAAK,EAAE;CAC/F,MAAM,wBAAwB,kBAAkB,QAAO,aAAY;AACjE,SAAO,CAAC,oBAAoB,SAAS,SAAS,IAAI,sBAAsB;GACxE;AAEF,KAAI,sBAAsB,WAAW,EACnC,QAAO;CAGT,MAAM,mBAAmB,mBAAmB,eAC1C,MAAM,iBAAiB,EAAE,YAAY,YAAY,CAAC,CACnD;CAOD,MAAM,UAAU,OAAO,EAAE,UAAU,iBAAkE;EACnG,MAAM,OAAO,WAAW,cAAc;AAEtC,MAAI,aAAa,2BAA2B,CAAC,YAAY;AACvD,QAAK,cAAc;AACnB;;EAEF,MAAM,WAAW,SAAS,QAAQ,SAAS,GAAG,CAAC,QAAQ,cAAc,GAAG;AACxE,OAAK,SAAS,OAAU;AAExB,MAAI;AACF,QAAK,WAAW,SAAS;GACzB,MAAM,aAAa,MAAM,KAAK,kBAAkB;IAAE;IAAU;IAAY,CAAC;AAEzE,OAAI,CAAC,KACH,OAAM,IAAI,MAAM,sBAAsB;GAGxC,IAAI,aAAa,MAAM,iBAAiB,WAAW;AACnD,gBAAa,MAAM,YAAY,oBAAoB,EAAE,UAAU,CAAC;GAChE,MAAM,UAAU,YAAY,aAAa;GACzC,MAAM,YAAY,MAAM,KAAK,sBAAsB;IAAE;IAAY,OAAO;IAAS;IAAU;IAAY,CAAC;AACxG,SAAM,YAAY,oBAAoB,EAAE,WAAW,CAAC;AACpD,QAAK,SAAS;WACPA,KAAU;AACjB,QAAK,SAAS;GACd,MAAM,aAAa,cAAc,IAAI;AACrC,OAAI,WACF,MAAK,SAAS,WAAW,YAAY;OAErC,aAAY,KAAK,EAAE,EAAE,KAAK,SAAS;;;AAKzC,QACE;EACE,oBAAC,OAAO;GAAO,OAAM;aACnB,oBAAC,eAAe;IACd,IAAG;IACH,wBAAwB,iBAAiB,qDAAqD;cAE7F,sBAAsB,KAAI,aACzB,oBAAC,eAAe;KAEd,IAAI,sBAAsB,UAAU;KACpC,eAAe;AACb,MAAK,QAAQ,EAAE,UAAU,CAAC;;KAE5B,WAAW,KAAK,oBAAoB;KACpC,YAAY,KAAK;KACjB,iBAAiB,iBAAiB,2DAA2D,EAC3F,UAAU,sBAAsB,UAAU,MAC3C,CAAC;KACF,KAAI,OAAM;MACR,gBAAgB;MAChB,KAAK,EAAE,MAAM;MACd;KACD,UACE,oBAAC;MACC,mBAAmB,YAAY;MAC/B,WAAW,YAAY,aAAa,MAAM,sBAAsB,UAAU,GAAG;MAC7E,WAAW,KAAK,oBAAoB;MACpC,YAAY,KAAK;MACjB,KAAK,sBAAsB,UAAU;MACrC,KAAK,WAAW,sBAAsB,UAAU;MAChD,KAAI,WAAU,EAAE,OAAO,MAAM,MAAM,IAAI;OACvC;OAvBC,SAyBL,CACF;KACwB;IACd;EAChB,oBAAC,OAAO;GAAK,OAAM;aACjB,oBAAC,OAAO,kBACN,oBAAC,gCAA6B,WAAW,UAAW,GACxC;IACF;EAEb,KAAK,SACJ,oBAAC;GACC,aAAY;GACZ,KAAI,OAAM;IACR,SAAS,EAAE,MAAM;IACjB,aAAa,EAAE,MAAM;IACtB;aAEA,KAAK;IACD;KAER"}

package/dist/components/UserProfile/Web3Section.js

@@ -89,7 +89,7 @@ const Web3Section = withCardStateProvider(({ shouldAllowCreation = true }) => {
 						})
 					})] }, wallet.id);
 				})
-			}), shouldAllowCreation && /* @__PURE__ */ jsx(AddWeb3WalletActionMenu, { onClick: () => setActionValue(null) })]
+			}), shouldAllowCreation && /* @__PURE__ */ jsx(AddWeb3WalletActionMenu, {})]
 		})]
 	});
 });

package/dist/components/UserProfile/Web3Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Web3Section.js","names":[],"sources":["../../../src/components/UserProfile/Web3Section.tsx"],"sourcesContent":["import { useReverification, useUser } from '@clerk/shared/react';\nimport { Fragment, useState } from 'react';\n\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { ProfileSection } from '@/ui/elements/Section';\nimport { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';\nimport { handleError } from '@/ui/utils/errorHandler';\n\nimport { Badge, Box, Flex, Image, localizationKeys, Text } from '../../customizables';\nimport { Action } from '../../elements/Action';\nimport { useActionContext } from '../../elements/Action/ActionRoot';\nimport { useEnabledThirdPartyProviders } from '../../hooks';\nimport type { PropsOfComponent } from '../../styledSystem';\nimport { RemoveWeb3WalletForm } from './RemoveResourceForm';\nimport { sortIdentificationBasedOnVerification } from './utils';\nimport { AddWeb3WalletActionMenu } from './Web3Form';\n\ntype RemoveWeb3WalletScreenProps = { walletId: string };\nconst RemoveWeb3WalletScreen = (props: RemoveWeb3WalletScreenProps) => {\n  const { close } = useActionContext();\n  return (\n    <RemoveWeb3WalletForm\n      onSuccess={close}\n      onReset={close}\n      {...props}\n    />\n  );\n};\n\nconst shortenWeb3Address = (address: string) => {\n  if (address.length <= 10) {\n    return address;\n  }\n  return address.slice(0, 6) + '...' + address.slice(-4);\n};\n\nexport const Web3Section = withCardStateProvider(\n  ({ shouldAllowCreation = true }: { shouldAllowCreation?: boolean }) => {\n    const { user } = useUser();\n    const card = useCardState();\n    const { strategyToDisplayData } = useEnabledThirdPartyProviders();\n    const hasWeb3Wallets = Boolean(user?.web3Wallets?.length);\n    const [actionValue, setActionValue] = useState<string | null>(null);\n\n    if (!shouldAllowCreation && !hasWeb3Wallets) {\n      return null;\n    }\n\n    return (\n      <ProfileSection.Root\n        title={localizationKeys('userProfile.start.web3WalletsSection.title')}\n        centered={false}\n        id='web3Wallets'\n      >\n        <Card.Alert>{card.error}</Card.Alert>\n        <Action.Root\n          value={actionValue}\n          onChange={setActionValue}\n        >\n          <ProfileSection.ItemList id='web3Wallets'>\n            {sortIdentificationBasedOnVerification(user?.web3Wallets, user?.primaryWeb3WalletId).map(wallet => {\n              const strategy = wallet.verification.strategy as keyof typeof strategyToDisplayData;\n              const walletId = wallet.id;\n              return (\n                strategyToDisplayData[strategy] && (\n                  <Fragment key={wallet.id}>\n                    <ProfileSection.Item\n                      key={walletId}\n                      id='web3Wallets'\n                      align='start'\n                    >\n                      <Flex sx={t => ({ alignItems: 'center', gap: t.space.$2, width: '100%' })}>\n                        {strategyToDisplayData[strategy].iconUrl && (\n                          <Image\n                            src={strategyToDisplayData[strategy].iconUrl}\n                            alt={strategyToDisplayData[strategy].name}\n                            sx={theme => ({ width: theme.sizes.$4 })}\n                          />\n                        )}\n                        <Box sx={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>\n                          <Flex\n                            gap={2}\n                            justify='start'\n                          >\n                            <Text>\n                              {strategyToDisplayData[strategy].name} ({shortenWeb3Address(wallet.web3Wallet)})\n                            </Text>\n                            {user?.primaryWeb3WalletId === walletId && (\n                              <Badge localizationKey={localizationKeys('badge__primary')} />\n                            )}\n                            {wallet.verification.status !== 'verified' && (\n                              <Badge localizationKey={localizationKeys('badge__unverified')} />\n                            )}\n                          </Flex>\n                        </Box>\n                      </Flex>\n                      <Web3WalletMenu walletId={walletId} />\n                    </ProfileSection.Item>\n\n                    <Action.Open value={`remove-${walletId}`}>\n                      <Action.Card variant='destructive'>\n                        <RemoveWeb3WalletScreen walletId={wallet.id} />\n                      </Action.Card>\n                    </Action.Open>\n                  </Fragment>\n                )\n              );\n            })}\n          </ProfileSection.ItemList>\n          {shouldAllowCreation && <AddWeb3WalletActionMenu onClick={() => setActionValue(null)} />}\n        </Action.Root>\n      </ProfileSection.Root>\n    );\n  },\n);\n\nconst Web3WalletMenu = ({ walletId }: { walletId: string }) => {\n  const card = useCardState();\n  const { open } = useActionContext();\n  const { user } = useUser();\n  const isPrimary = user?.primaryWeb3WalletId === walletId;\n  const setPrimary = useReverification(() => {\n    return user?.update({ primaryWeb3WalletId: walletId });\n  });\n\n  const actions = (\n    [\n      !isPrimary\n        ? {\n            label: localizationKeys('userProfile.start.web3WalletsSection.detailsAction__nonPrimary'),\n            onClick: () => {\n              setPrimary().catch(e => handleError(e, [], card.setError));\n            },\n          }\n        : null,\n      {\n        label: localizationKeys('userProfile.start.web3WalletsSection.destructiveAction'),\n        isDestructive: true,\n        onClick: () => open(`remove-${walletId}`),\n      },\n    ] satisfies (PropsOfComponent<typeof ThreeDotsMenu>['actions'][0] | null)[]\n  ).filter(a => a !== null) as PropsOfComponent<typeof ThreeDotsMenu>['actions'];\n\n  return <ThreeDotsMenu actions={actions} />;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,MAAM,0BAA0B,UAAuC;CACrE,MAAM,EAAE,UAAU,kBAAkB;AACpC,QACE,oBAAC;EACC,WAAW;EACX,SAAS;EACT,GAAI;GACJ;;AAIN,MAAM,sBAAsB,YAAoB;AAC9C,KAAI,QAAQ,UAAU,GACpB,QAAO;AAET,QAAO,QAAQ,MAAM,GAAG,EAAE,GAAG,QAAQ,QAAQ,MAAM,GAAG;;AAGxD,MAAa,cAAc,uBACxB,EAAE,sBAAsB,WAA8C;CACrE,MAAM,EAAE,SAAS,SAAS;CAC1B,MAAM,OAAO,cAAc;CAC3B,MAAM,EAAE,0BAA0B,+BAA+B;CACjE,MAAM,iBAAiB,QAAQ,MAAM,aAAa,OAAO;CACzD,MAAM,CAAC,aAAa,kBAAkB,SAAwB,KAAK;AAEnE,KAAI,CAAC,uBAAuB,CAAC,eAC3B,QAAO;AAGT,QACE,qBAAC,eAAe;EACd,OAAO,iBAAiB,6CAA6C;EACrE,UAAU;EACV,IAAG;aAEH,oBAAC,KAAK,mBAAO,KAAK,QAAmB,EACrC,qBAAC,OAAO;GACN,OAAO;GACP,UAAU;cAEV,oBAAC,eAAe;IAAS,IAAG;cACzB,sCAAsC,MAAM,aAAa,MAAM,oBAAoB,CAAC,KAAI,WAAU;KACjG,MAAM,WAAW,OAAO,aAAa;KACrC,MAAM,WAAW,OAAO;AACxB,YACE,sBAAsB,aACpB,qBAAC,uBACC,qBAAC,eAAe;MAEd,IAAG;MACH,OAAM;iBAEN,qBAAC;OAAK,KAAI,OAAM;QAAE,YAAY;QAAU,KAAK,EAAE,MAAM;QAAI,OAAO;QAAQ;kBACrE,sBAAsB,UAAU,WAC/B,oBAAC;QACC,KAAK,sBAAsB,UAAU;QACrC,KAAK,sBAAsB,UAAU;QACrC,KAAI,WAAU,EAAE,OAAO,MAAM,MAAM,IAAI;SACvC,EAEJ,oBAAC;QAAI,IAAI;SAAE,YAAY;SAAU,UAAU;SAAU;kBACnD,qBAAC;SACC,KAAK;SACL,SAAQ;;UAER,qBAAC;WACE,sBAAsB,UAAU;WAAK;WAAG,mBAAmB,OAAO,WAAW;WAAC;cAC1E;UACN,MAAM,wBAAwB,YAC7B,oBAAC,SAAM,iBAAiB,iBAAiB,iBAAiB,GAAI;UAE/D,OAAO,aAAa,WAAW,cAC9B,oBAAC,SAAM,iBAAiB,iBAAiB,oBAAoB,GAAI;;UAE9D;SACH;QACD,EACP,oBAAC,kBAAyB,WAAY;QA7BjC,SA8Be,EAEtB,oBAAC,OAAO;MAAK,OAAO,UAAU;gBAC5B,oBAAC,OAAO;OAAK,SAAQ;iBACnB,oBAAC,0BAAuB,UAAU,OAAO,KAAM;QACnC;OACF,KAtCD,OAAO,GAuCX;MAGf;KACsB,EACzB,uBAAuB,oBAAC,2BAAwB,eAAe,eAAe,KAAK,GAAI;IAC5E;GACM;EAG3B;AAED,MAAM,kBAAkB,EAAE,eAAqC;CAC7D,MAAM,OAAO,cAAc;CAC3B,MAAM,EAAE,SAAS,kBAAkB;CACnC,MAAM,EAAE,SAAS,SAAS;CAC1B,MAAM,YAAY,MAAM,wBAAwB;CAChD,MAAM,aAAa,wBAAwB;AACzC,SAAO,MAAM,OAAO,EAAE,qBAAqB,UAAU,CAAC;GACtD;AAoBF,QAAO,oBAAC,iBAAc,SAjBpB,CACE,CAAC,YACG;EACE,OAAO,iBAAiB,iEAAiE;EACzF,eAAe;AACb,eAAY,CAAC,OAAM,MAAK,YAAY,GAAG,EAAE,EAAE,KAAK,SAAS,CAAC;;EAE7D,GACD,MACJ;EACE,OAAO,iBAAiB,yDAAyD;EACjF,eAAe;EACf,eAAe,KAAK,UAAU,WAAW;EAC1C,CACF,CACD,QAAO,MAAK,MAAM,KAAK,GAEiB"}
+{"version":3,"file":"Web3Section.js","names":[],"sources":["../../../src/components/UserProfile/Web3Section.tsx"],"sourcesContent":["import { useReverification, useUser } from '@clerk/shared/react';\nimport { Fragment, useState } from 'react';\n\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { ProfileSection } from '@/ui/elements/Section';\nimport { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';\nimport { handleError } from '@/ui/utils/errorHandler';\n\nimport { Badge, Box, Flex, Image, localizationKeys, Text } from '../../customizables';\nimport { Action } from '../../elements/Action';\nimport { useActionContext } from '../../elements/Action/ActionRoot';\nimport { useEnabledThirdPartyProviders } from '../../hooks';\nimport type { PropsOfComponent } from '../../styledSystem';\nimport { RemoveWeb3WalletForm } from './RemoveResourceForm';\nimport { sortIdentificationBasedOnVerification } from './utils';\nimport { AddWeb3WalletActionMenu } from './Web3Form';\n\ntype RemoveWeb3WalletScreenProps = { walletId: string };\nconst RemoveWeb3WalletScreen = (props: RemoveWeb3WalletScreenProps) => {\n  const { close } = useActionContext();\n  return (\n    <RemoveWeb3WalletForm\n      onSuccess={close}\n      onReset={close}\n      {...props}\n    />\n  );\n};\n\nconst shortenWeb3Address = (address: string) => {\n  if (address.length <= 10) {\n    return address;\n  }\n  return address.slice(0, 6) + '...' + address.slice(-4);\n};\n\nexport const Web3Section = withCardStateProvider(\n  ({ shouldAllowCreation = true }: { shouldAllowCreation?: boolean }) => {\n    const { user } = useUser();\n    const card = useCardState();\n    const { strategyToDisplayData } = useEnabledThirdPartyProviders();\n    const hasWeb3Wallets = Boolean(user?.web3Wallets?.length);\n    const [actionValue, setActionValue] = useState<string | null>(null);\n\n    if (!shouldAllowCreation && !hasWeb3Wallets) {\n      return null;\n    }\n\n    return (\n      <ProfileSection.Root\n        title={localizationKeys('userProfile.start.web3WalletsSection.title')}\n        centered={false}\n        id='web3Wallets'\n      >\n        <Card.Alert>{card.error}</Card.Alert>\n        <Action.Root\n          value={actionValue}\n          onChange={setActionValue}\n        >\n          <ProfileSection.ItemList id='web3Wallets'>\n            {sortIdentificationBasedOnVerification(user?.web3Wallets, user?.primaryWeb3WalletId).map(wallet => {\n              const strategy = wallet.verification.strategy as keyof typeof strategyToDisplayData;\n              const walletId = wallet.id;\n              return (\n                strategyToDisplayData[strategy] && (\n                  <Fragment key={wallet.id}>\n                    <ProfileSection.Item\n                      key={walletId}\n                      id='web3Wallets'\n                      align='start'\n                    >\n                      <Flex sx={t => ({ alignItems: 'center', gap: t.space.$2, width: '100%' })}>\n                        {strategyToDisplayData[strategy].iconUrl && (\n                          <Image\n                            src={strategyToDisplayData[strategy].iconUrl}\n                            alt={strategyToDisplayData[strategy].name}\n                            sx={theme => ({ width: theme.sizes.$4 })}\n                          />\n                        )}\n                        <Box sx={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>\n                          <Flex\n                            gap={2}\n                            justify='start'\n                          >\n                            <Text>\n                              {strategyToDisplayData[strategy].name} ({shortenWeb3Address(wallet.web3Wallet)})\n                            </Text>\n                            {user?.primaryWeb3WalletId === walletId && (\n                              <Badge localizationKey={localizationKeys('badge__primary')} />\n                            )}\n                            {wallet.verification.status !== 'verified' && (\n                              <Badge localizationKey={localizationKeys('badge__unverified')} />\n                            )}\n                          </Flex>\n                        </Box>\n                      </Flex>\n                      <Web3WalletMenu walletId={walletId} />\n                    </ProfileSection.Item>\n\n                    <Action.Open value={`remove-${walletId}`}>\n                      <Action.Card variant='destructive'>\n                        <RemoveWeb3WalletScreen walletId={wallet.id} />\n                      </Action.Card>\n                    </Action.Open>\n                  </Fragment>\n                )\n              );\n            })}\n          </ProfileSection.ItemList>\n          {shouldAllowCreation && <AddWeb3WalletActionMenu />}\n        </Action.Root>\n      </ProfileSection.Root>\n    );\n  },\n);\n\nconst Web3WalletMenu = ({ walletId }: { walletId: string }) => {\n  const card = useCardState();\n  const { open } = useActionContext();\n  const { user } = useUser();\n  const isPrimary = user?.primaryWeb3WalletId === walletId;\n  const setPrimary = useReverification(() => {\n    return user?.update({ primaryWeb3WalletId: walletId });\n  });\n\n  const actions = (\n    [\n      !isPrimary\n        ? {\n            label: localizationKeys('userProfile.start.web3WalletsSection.detailsAction__nonPrimary'),\n            onClick: () => {\n              setPrimary().catch(e => handleError(e, [], card.setError));\n            },\n          }\n        : null,\n      {\n        label: localizationKeys('userProfile.start.web3WalletsSection.destructiveAction'),\n        isDestructive: true,\n        onClick: () => open(`remove-${walletId}`),\n      },\n    ] satisfies (PropsOfComponent<typeof ThreeDotsMenu>['actions'][0] | null)[]\n  ).filter(a => a !== null) as PropsOfComponent<typeof ThreeDotsMenu>['actions'];\n\n  return <ThreeDotsMenu actions={actions} />;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,MAAM,0BAA0B,UAAuC;CACrE,MAAM,EAAE,UAAU,kBAAkB;AACpC,QACE,oBAAC;EACC,WAAW;EACX,SAAS;EACT,GAAI;GACJ;;AAIN,MAAM,sBAAsB,YAAoB;AAC9C,KAAI,QAAQ,UAAU,GACpB,QAAO;AAET,QAAO,QAAQ,MAAM,GAAG,EAAE,GAAG,QAAQ,QAAQ,MAAM,GAAG;;AAGxD,MAAa,cAAc,uBACxB,EAAE,sBAAsB,WAA8C;CACrE,MAAM,EAAE,SAAS,SAAS;CAC1B,MAAM,OAAO,cAAc;CAC3B,MAAM,EAAE,0BAA0B,+BAA+B;CACjE,MAAM,iBAAiB,QAAQ,MAAM,aAAa,OAAO;CACzD,MAAM,CAAC,aAAa,kBAAkB,SAAwB,KAAK;AAEnE,KAAI,CAAC,uBAAuB,CAAC,eAC3B,QAAO;AAGT,QACE,qBAAC,eAAe;EACd,OAAO,iBAAiB,6CAA6C;EACrE,UAAU;EACV,IAAG;aAEH,oBAAC,KAAK,mBAAO,KAAK,QAAmB,EACrC,qBAAC,OAAO;GACN,OAAO;GACP,UAAU;cAEV,oBAAC,eAAe;IAAS,IAAG;cACzB,sCAAsC,MAAM,aAAa,MAAM,oBAAoB,CAAC,KAAI,WAAU;KACjG,MAAM,WAAW,OAAO,aAAa;KACrC,MAAM,WAAW,OAAO;AACxB,YACE,sBAAsB,aACpB,qBAAC,uBACC,qBAAC,eAAe;MAEd,IAAG;MACH,OAAM;iBAEN,qBAAC;OAAK,KAAI,OAAM;QAAE,YAAY;QAAU,KAAK,EAAE,MAAM;QAAI,OAAO;QAAQ;kBACrE,sBAAsB,UAAU,WAC/B,oBAAC;QACC,KAAK,sBAAsB,UAAU;QACrC,KAAK,sBAAsB,UAAU;QACrC,KAAI,WAAU,EAAE,OAAO,MAAM,MAAM,IAAI;SACvC,EAEJ,oBAAC;QAAI,IAAI;SAAE,YAAY;SAAU,UAAU;SAAU;kBACnD,qBAAC;SACC,KAAK;SACL,SAAQ;;UAER,qBAAC;WACE,sBAAsB,UAAU;WAAK;WAAG,mBAAmB,OAAO,WAAW;WAAC;cAC1E;UACN,MAAM,wBAAwB,YAC7B,oBAAC,SAAM,iBAAiB,iBAAiB,iBAAiB,GAAI;UAE/D,OAAO,aAAa,WAAW,cAC9B,oBAAC,SAAM,iBAAiB,iBAAiB,oBAAoB,GAAI;;UAE9D;SACH;QACD,EACP,oBAAC,kBAAyB,WAAY;QA7BjC,SA8Be,EAEtB,oBAAC,OAAO;MAAK,OAAO,UAAU;gBAC5B,oBAAC,OAAO;OAAK,SAAQ;iBACnB,oBAAC,0BAAuB,UAAU,OAAO,KAAM;QACnC;OACF,KAtCD,OAAO,GAuCX;MAGf;KACsB,EACzB,uBAAuB,oBAAC,4BAA0B;IACvC;GACM;EAG3B;AAED,MAAM,kBAAkB,EAAE,eAAqC;CAC7D,MAAM,OAAO,cAAc;CAC3B,MAAM,EAAE,SAAS,kBAAkB;CACnC,MAAM,EAAE,SAAS,SAAS;CAC1B,MAAM,YAAY,MAAM,wBAAwB;CAChD,MAAM,aAAa,wBAAwB;AACzC,SAAO,MAAM,OAAO,EAAE,qBAAqB,UAAU,CAAC;GACtD;AAoBF,QAAO,oBAAC,iBAAc,SAjBpB,CACE,CAAC,YACG;EACE,OAAO,iBAAiB,iEAAiE;EACzF,eAAe;AACb,eAAY,CAAC,OAAM,MAAK,YAAY,GAAG,EAAE,EAAE,KAAK,SAAS,CAAC;;EAE7D,GACD,MACJ;EACE,OAAO,iBAAiB,yDAAyD;EACjF,eAAe;EACf,eAAe,KAAK,UAAU,WAAW;EAC1C,CACF,CACD,QAAO,MAAK,MAAM,KAAK,GAEiB"}

package/dist/components/UserProfile/Web3SelectSolanaWalletScreen.js

@@ -0,0 +1,73 @@
+import { localizationKeys } from "../../localization/localizationKeys.js";
+import { descriptors } from "../../customizables/elementDescriptors.js";
+import { useCardState } from "../../elements/contexts/index.js";
+import { Button, Flex, Spinner } from "../../customizables/index.js";
+import { handleError } from "../../utils/errorHandler.js";
+import { Form } from "../../elements/Form.js";
+import { FormButtonContainer } from "../../elements/FormButtons.js";
+import { FormContainer } from "../../elements/FormContainer.js";
+import { useActionContext } from "../../elements/Action/ActionRoot.js";
+import { Suspense, lazy } from "react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { ClerkRuntimeError } from "@clerk/shared/error";
+
+//#region src/components/UserProfile/Web3SelectSolanaWalletScreen.tsx
+const Web3SolanaWalletButtons = lazy(() => import(
+	/* webpackChunkName: "web3-solana-wallet-buttons" */
+	"../../elements/Web3SolanaWalletButtons.js"
+).then((m) => ({ default: m.Web3SolanaWalletButtons })));
+const Web3SelectSolanaWalletScreen = ({ onConnect }) => {
+	const card = useCardState();
+	const { close } = useActionContext();
+	const onClick = async ({ walletName }) => {
+		card.setLoading(walletName);
+		try {
+			await onConnect({
+				strategy: "web3_solana_signature",
+				walletName
+			});
+			card.setIdle();
+			close();
+		} catch (err) {
+			card.setIdle();
+			if (err instanceof Error) handleError(err, [], card.setError);
+			else handleError(new ClerkRuntimeError("An error occurred while generating the Solana signature.", {
+				code: "web3_solana_signature_generation_failed",
+				cause: err instanceof Error ? err : void 0
+			}), [], card.setError);
+		}
+	};
+	return /* @__PURE__ */ jsx(FormContainer, {
+		headerTitle: localizationKeys("userProfile.start.web3WalletsSection.web3SelectSolanaWalletScreen.title"),
+		headerSubtitle: localizationKeys("userProfile.start.web3WalletsSection.web3SelectSolanaWalletScreen.subtitle"),
+		children: /* @__PURE__ */ jsxs(Form.Root, { children: [/* @__PURE__ */ jsx(Suspense, {
+			fallback: /* @__PURE__ */ jsx(Flex, {
+				direction: "row",
+				align: "center",
+				justify: "center",
+				sx: (t) => ({
+					height: "100%",
+					minHeight: t.sizes.$32
+				}),
+				children: /* @__PURE__ */ jsx(Spinner, {
+					size: "lg",
+					colorScheme: "primary",
+					elementDescriptor: descriptors.spinner
+				})
+			}),
+			children: /* @__PURE__ */ jsx(Web3SolanaWalletButtons, { web3AuthCallback: onClick })
+		}), /* @__PURE__ */ jsx(FormButtonContainer, { children: /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			onClick: () => {
+				close();
+			},
+			localizationKey: localizationKeys("userProfile.formButtonReset"),
+			elementDescriptor: descriptors.formButtonReset
+		}) })] })
+	});
+};
+
+//#endregion
+export { Web3SelectSolanaWalletScreen };
+//# sourceMappingURL=Web3SelectSolanaWalletScreen.js.map

package/dist/components/UserProfile/Web3SelectSolanaWalletScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Web3SelectSolanaWalletScreen.js","names":[],"sources":["../../../src/components/UserProfile/Web3SelectSolanaWalletScreen.tsx"],"sourcesContent":["import { ClerkRuntimeError } from '@clerk/shared/error';\nimport type { Web3Strategy } from '@clerk/shared/types';\nimport { lazy, Suspense } from 'react';\n\nimport { Button, descriptors, Flex, localizationKeys, Spinner } from '@/customizables';\nimport { useActionContext } from '@/ui/elements/Action/ActionRoot';\nimport { useCardState } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { FormButtonContainer } from '@/ui/elements/FormButtons';\nimport { FormContainer } from '@/ui/elements/FormContainer';\nimport { handleError } from '@/utils/errorHandler';\n\nconst Web3SolanaWalletButtons = lazy(() =>\n  import(/* webpackChunkName: \"web3-solana-wallet-buttons\" */ '@/ui/elements/Web3SolanaWalletButtons').then(m => ({\n    default: m.Web3SolanaWalletButtons,\n  })),\n);\n\nexport type Web3SelectWalletProps = {\n  onConnect: (params: { strategy: Web3Strategy; walletName: string }) => Promise<void>;\n};\n\nexport const Web3SelectSolanaWalletScreen = ({ onConnect }: Web3SelectWalletProps) => {\n  const card = useCardState();\n  const { close } = useActionContext();\n\n  const onClick = async ({ walletName }: { walletName: string }) => {\n    card.setLoading(walletName);\n    try {\n      await onConnect({ strategy: 'web3_solana_signature', walletName });\n      card.setIdle();\n      close();\n    } catch (err) {\n      card.setIdle();\n      if (err instanceof Error) {\n        handleError(err, [], card.setError);\n      } else {\n        const error = new ClerkRuntimeError('An error occurred while generating the Solana signature.', {\n          code: 'web3_solana_signature_generation_failed',\n          cause: err instanceof Error ? err : undefined,\n        });\n        handleError(error, [], card.setError);\n      }\n    }\n  };\n\n  return (\n    <FormContainer\n      headerTitle={localizationKeys('userProfile.start.web3WalletsSection.web3SelectSolanaWalletScreen.title')}\n      headerSubtitle={localizationKeys('userProfile.start.web3WalletsSection.web3SelectSolanaWalletScreen.subtitle')}\n    >\n      <Form.Root>\n        <Suspense\n          fallback={\n            <Flex\n              direction={'row'}\n              align={'center'}\n              justify={'center'}\n              sx={t => ({\n                height: '100%',\n                minHeight: t.sizes.$32,\n              })}\n            >\n              <Spinner\n                size={'lg'}\n                colorScheme={'primary'}\n                elementDescriptor={descriptors.spinner}\n              />\n            </Flex>\n          }\n        >\n          <Web3SolanaWalletButtons web3AuthCallback={onClick} />\n        </Suspense>\n        <FormButtonContainer>\n          <Button\n            type='button'\n            variant='ghost'\n            onClick={() => {\n              close();\n            }}\n            localizationKey={localizationKeys('userProfile.formButtonReset')}\n            elementDescriptor={descriptors.formButtonReset}\n          />\n        </FormButtonContainer>\n      </Form.Root>\n    </FormContainer>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAYA,MAAM,0BAA0B,WAC9B;;CAA4D;EAAyC,MAAK,OAAM,EAC9G,SAAS,EAAE,yBACZ,EAAE,CACJ;AAMD,MAAa,gCAAgC,EAAE,gBAAuC;CACpF,MAAM,OAAO,cAAc;CAC3B,MAAM,EAAE,UAAU,kBAAkB;CAEpC,MAAM,UAAU,OAAO,EAAE,iBAAyC;AAChE,OAAK,WAAW,WAAW;AAC3B,MAAI;AACF,SAAM,UAAU;IAAE,UAAU;IAAyB;IAAY,CAAC;AAClE,QAAK,SAAS;AACd,UAAO;WACA,KAAK;AACZ,QAAK,SAAS;AACd,OAAI,eAAe,MACjB,aAAY,KAAK,EAAE,EAAE,KAAK,SAAS;OAMnC,aAJc,IAAI,kBAAkB,4DAA4D;IAC9F,MAAM;IACN,OAAO,eAAe,QAAQ,MAAM;IACrC,CAAC,EACiB,EAAE,EAAE,KAAK,SAAS;;;AAK3C,QACE,oBAAC;EACC,aAAa,iBAAiB,0EAA0E;EACxG,gBAAgB,iBAAiB,6EAA6E;YAE9G,qBAAC,KAAK,mBACJ,oBAAC;GACC,UACE,oBAAC;IACC,WAAW;IACX,OAAO;IACP,SAAS;IACT,KAAI,OAAM;KACR,QAAQ;KACR,WAAW,EAAE,MAAM;KACpB;cAED,oBAAC;KACC,MAAM;KACN,aAAa;KACb,mBAAmB,YAAY;MAC/B;KACG;aAGT,oBAAC,2BAAwB,kBAAkB,UAAW;IAC7C,EACX,oBAAC,iCACC,oBAAC;GACC,MAAK;GACL,SAAQ;GACR,eAAe;AACb,WAAO;;GAET,iBAAiB,iBAAiB,8BAA8B;GAChE,mBAAmB,YAAY;IAC/B,GACkB,IACZ;GACE"}