@crossmint/client-sdk-react-ui 1.10.5 → 1.10.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (203) hide show
  1. package/dist/{chunk-GGVJALEH.cjs → chunk-2ROLE4XU.cjs} +3 -3
  2. package/dist/{chunk-HYP7ISWS.js → chunk-5EE2IAIP.js} +2 -2
  3. package/dist/{chunk-FKRBO2MK.js → chunk-5UXGDXPR.js} +2 -2
  4. package/dist/chunk-6CPZDD6Y.js +29 -0
  5. package/dist/chunk-6CPZDD6Y.js.map +1 -0
  6. package/dist/{chunk-NKOG6FTK.js → chunk-6EX2VR7S.js} +2 -2
  7. package/dist/{chunk-U5EONMPH.js → chunk-6FG6NL44.js} +4 -4
  8. package/dist/{chunk-E7KTAG6X.cjs → chunk-6PPUWTTF.cjs} +3 -3
  9. package/dist/{chunk-MBJBFR2H.js → chunk-7BZSIPWM.js} +2 -2
  10. package/dist/chunk-BFTVVPCU.js +81 -0
  11. package/dist/chunk-BFTVVPCU.js.map +1 -0
  12. package/dist/chunk-BURUD6IV.cjs +64 -0
  13. package/dist/chunk-BURUD6IV.cjs.map +1 -0
  14. package/dist/{chunk-LF3XEXLA.js → chunk-DCMLWFDK.js} +2 -2
  15. package/dist/chunk-DR67KSE7.js +31 -0
  16. package/dist/chunk-DR67KSE7.js.map +1 -0
  17. package/dist/{chunk-YP4CPG34.js → chunk-FGHABNQM.js} +2 -2
  18. package/dist/{chunk-YP4CPG34.js.map → chunk-FGHABNQM.js.map} +1 -1
  19. package/dist/{chunk-6AFXSTEN.cjs → chunk-GMKTZIU2.cjs} +3 -3
  20. package/dist/{chunk-4BGD6LSC.js → chunk-HOTEC5UH.js} +2 -2
  21. package/dist/chunk-HW2Q6J4R.js +64 -0
  22. package/dist/chunk-HW2Q6J4R.js.map +1 -0
  23. package/dist/chunk-HZ26XTTK.cjs +81 -0
  24. package/dist/chunk-HZ26XTTK.cjs.map +1 -0
  25. package/dist/{chunk-LD66M6G7.cjs → chunk-K5S6RUJ3.cjs} +3 -3
  26. package/dist/chunk-LGY5FQOZ.cjs +29 -0
  27. package/dist/chunk-LGY5FQOZ.cjs.map +1 -0
  28. package/dist/{chunk-HR57IU52.cjs → chunk-LJA62EVT.cjs} +3 -3
  29. package/dist/{chunk-EBMORHG3.cjs → chunk-MCINXS2Y.cjs} +17 -252
  30. package/dist/chunk-MCINXS2Y.cjs.map +1 -0
  31. package/dist/{chunk-T5WAVOPI.js → chunk-O53ZB544.js} +55 -290
  32. package/dist/chunk-O53ZB544.js.map +1 -0
  33. package/dist/{chunk-G526QBKQ.cjs → chunk-QFZ6GZZR.cjs} +3 -3
  34. package/dist/{chunk-KAXBBO66.cjs → chunk-SBTNHVSD.cjs} +3 -3
  35. package/dist/{chunk-7YHGZZ6G.js → chunk-TH42AO6J.js} +2 -2
  36. package/dist/{chunk-JZYMJ733.js → chunk-U7LXB3SM.js} +2 -2
  37. package/dist/chunk-UGHW5HMB.cjs +31 -0
  38. package/dist/chunk-UGHW5HMB.cjs.map +1 -0
  39. package/dist/{chunk-CPISBXIR.cjs → chunk-Y3SUMTUI.cjs} +2 -2
  40. package/dist/{chunk-CPISBXIR.cjs.map → chunk-Y3SUMTUI.cjs.map} +1 -1
  41. package/dist/{chunk-3LHIEADG.cjs → chunk-YNBGMNE6.cjs} +3 -3
  42. package/dist/{chunk-NTAMXW3Z.cjs → chunk-ZJC4OB5Z.cjs} +3 -3
  43. package/dist/components/CrossmintNFTCollectionView.cjs +3 -3
  44. package/dist/components/CrossmintNFTCollectionView.js +2 -2
  45. package/dist/components/CrossmintNFTDetail.cjs +3 -3
  46. package/dist/components/CrossmintNFTDetail.js +2 -2
  47. package/dist/components/auth/AuthForm.cjs +5 -11
  48. package/dist/components/auth/AuthForm.js +4 -10
  49. package/dist/components/auth/AuthFormBackButton.cjs +5 -11
  50. package/dist/components/auth/AuthFormBackButton.js +4 -10
  51. package/dist/components/auth/AuthFormDialog.cjs +5 -11
  52. package/dist/components/auth/AuthFormDialog.js +4 -10
  53. package/dist/components/auth/EmbeddedAuthForm.cjs +6 -12
  54. package/dist/components/auth/EmbeddedAuthForm.js +5 -11
  55. package/dist/components/auth/methods/email/EmailAuthFlow.cjs +5 -11
  56. package/dist/components/auth/methods/email/EmailAuthFlow.js +4 -10
  57. package/dist/components/auth/methods/email/EmailOTPInput.cjs +5 -11
  58. package/dist/components/auth/methods/email/EmailOTPInput.js +4 -10
  59. package/dist/components/auth/methods/email/EmailSignIn.cjs +5 -11
  60. package/dist/components/auth/methods/email/EmailSignIn.js +4 -10
  61. package/dist/components/auth/methods/farcaster/FarcasterSignIn.cjs +5 -11
  62. package/dist/components/auth/methods/farcaster/FarcasterSignIn.js +4 -10
  63. package/dist/components/auth/methods/google/GoogleSignIn.cjs +5 -11
  64. package/dist/components/auth/methods/google/GoogleSignIn.js +4 -10
  65. package/dist/components/auth/methods/web3/Web3AuthFlow.cjs +43 -12
  66. package/dist/components/auth/methods/web3/Web3AuthFlow.cjs.map +1 -1
  67. package/dist/components/auth/methods/web3/Web3AuthFlow.d.cts +1 -1
  68. package/dist/components/auth/methods/web3/Web3AuthFlow.d.ts +1 -1
  69. package/dist/components/auth/methods/web3/Web3AuthFlow.js +43 -12
  70. package/dist/components/auth/methods/web3/Web3AuthFlow.js.map +1 -1
  71. package/dist/components/auth/methods/web3/Web3AuthFlowButton.cjs +8 -11
  72. package/dist/components/auth/methods/web3/Web3AuthFlowButton.js +7 -10
  73. package/dist/components/auth/methods/web3/Web3Connector.cjs +58 -4
  74. package/dist/components/auth/methods/web3/Web3Connector.cjs.map +1 -1
  75. package/dist/components/auth/methods/web3/Web3Connector.js +58 -4
  76. package/dist/components/auth/methods/web3/Web3Connector.js.map +1 -1
  77. package/dist/components/auth/methods/web3/Web3ConnectorButton.cjs +48 -4
  78. package/dist/components/auth/methods/web3/Web3ConnectorButton.cjs.map +1 -1
  79. package/dist/components/auth/methods/web3/Web3ConnectorButton.js +48 -4
  80. package/dist/components/auth/methods/web3/Web3ConnectorButton.js.map +1 -1
  81. package/dist/components/auth/methods/web3/Web3Connectors.cjs +6 -11
  82. package/dist/components/auth/methods/web3/Web3Connectors.js +5 -10
  83. package/dist/components/common/Divider.cjs +5 -11
  84. package/dist/components/common/Divider.js +4 -10
  85. package/dist/components/embed/index.cjs +4 -4
  86. package/dist/components/embed/index.js +3 -3
  87. package/dist/components/embed/v3/CrossmintEmbeddedCheckoutV3.cjs +7 -13
  88. package/dist/components/embed/v3/CrossmintEmbeddedCheckoutV3.js +6 -12
  89. package/dist/components/embed/v3/EmbeddedCheckoutV3IFrame.cjs +6 -12
  90. package/dist/components/embed/v3/EmbeddedCheckoutV3IFrame.js +5 -11
  91. package/dist/components/embed/v3/crypto/CryptoWalletConnectionHandler.cjs +4 -22
  92. package/dist/components/embed/v3/crypto/CryptoWalletConnectionHandler.cjs.map +1 -1
  93. package/dist/components/embed/v3/crypto/CryptoWalletConnectionHandler.js +3 -21
  94. package/dist/components/embed/v3/crypto/CryptoWalletConnectionHandler.js.map +1 -1
  95. package/dist/components/embed/v3/index.cjs +7 -13
  96. package/dist/components/embed/v3/index.js +6 -12
  97. package/dist/components/hosted/CrossmintPayButton.cjs +3 -3
  98. package/dist/components/hosted/CrossmintPayButton.js +2 -2
  99. package/dist/components/hosted/index.cjs +3 -3
  100. package/dist/components/hosted/index.js +2 -2
  101. package/dist/components/index.cjs +15 -21
  102. package/dist/components/index.js +14 -20
  103. package/dist/consts/version.cjs +2 -2
  104. package/dist/consts/version.js +1 -1
  105. package/dist/hooks/index.cjs +5 -11
  106. package/dist/hooks/index.js +4 -10
  107. package/dist/hooks/useAuth.cjs +5 -11
  108. package/dist/hooks/useAuth.js +4 -10
  109. package/dist/hooks/useCrossmintAuth.cjs +5 -11
  110. package/dist/hooks/useCrossmintAuth.js +4 -10
  111. package/dist/hooks/useCrossmintCheckout.cjs +4 -4
  112. package/dist/hooks/useCrossmintCheckout.js +3 -3
  113. package/dist/hooks/useOAuthWindowListener.cjs +5 -11
  114. package/dist/hooks/useOAuthWindowListener.js +4 -10
  115. package/dist/hooks/useWallet.cjs +5 -11
  116. package/dist/hooks/useWallet.js +4 -10
  117. package/dist/icons/base64Icons.cjs +6 -6
  118. package/dist/icons/base64Icons.cjs.map +1 -1
  119. package/dist/icons/base64Icons.js +5 -5
  120. package/dist/icons/base64Icons.js.map +1 -1
  121. package/dist/index.cjs +15 -21
  122. package/dist/index.cjs.map +1 -1
  123. package/dist/index.js +14 -20
  124. package/dist/index.js.map +1 -1
  125. package/dist/providers/CrossmintAuthProvider.cjs +5 -11
  126. package/dist/providers/CrossmintAuthProvider.js +4 -10
  127. package/dist/providers/CrossmintWalletProvider.cjs +5 -11
  128. package/dist/providers/CrossmintWalletProvider.js +4 -10
  129. package/dist/providers/auth/AuthFormProvider.cjs +5 -11
  130. package/dist/providers/auth/AuthFormProvider.js +4 -10
  131. package/dist/providers/auth/web3/DynamicWeb3WalletConnect.cjs +33 -0
  132. package/dist/providers/auth/web3/DynamicWeb3WalletConnect.d.cts +10 -0
  133. package/dist/providers/auth/web3/DynamicWeb3WalletConnect.d.ts +10 -0
  134. package/dist/providers/auth/web3/DynamicWeb3WalletConnect.js +33 -0
  135. package/dist/providers/index.cjs +5 -11
  136. package/dist/providers/index.js +4 -10
  137. package/dist/utils/createCrossmintApiClient.cjs +3 -3
  138. package/dist/utils/createCrossmintApiClient.js +2 -2
  139. package/dist/utils/dynamic/dynamicChainToCrossmintChain.cjs +8 -0
  140. package/dist/utils/dynamic/dynamicChainToCrossmintChain.d.cts +6 -0
  141. package/dist/utils/dynamic/dynamicChainToCrossmintChain.d.ts +6 -0
  142. package/dist/utils/dynamic/dynamicChainToCrossmintChain.js +8 -0
  143. package/package.json +5 -8
  144. package/src/components/auth/AuthForm.tsx +9 -2
  145. package/src/components/auth/methods/web3/Web3AuthFlow.tsx +18 -0
  146. package/src/components/auth/methods/web3/Web3Connectors.tsx +5 -72
  147. package/src/components/embed/v3/crypto/CryptoWalletConnectionHandler.tsx +3 -24
  148. package/src/providers/CrossmintAuthProvider.test.tsx +0 -4
  149. package/src/providers/CrossmintWalletProvider.test.tsx +0 -6
  150. package/src/providers/auth/AuthFormProvider.test.tsx +0 -5
  151. package/src/providers/auth/AuthFormProvider.tsx +1 -6
  152. package/src/providers/auth/web3/DynamicWeb3WalletConnect.tsx +73 -0
  153. package/src/utils/dynamic/dynamicChainToCrossmintChain.ts +20 -0
  154. package/dist/chunk-5S4VO6RB.cjs +0 -55
  155. package/dist/chunk-5S4VO6RB.cjs.map +0 -1
  156. package/dist/chunk-EBMORHG3.cjs.map +0 -1
  157. package/dist/chunk-HSLAH2PN.cjs +0 -54
  158. package/dist/chunk-HSLAH2PN.cjs.map +0 -1
  159. package/dist/chunk-NFWMF6T7.js +0 -54
  160. package/dist/chunk-NFWMF6T7.js.map +0 -1
  161. package/dist/chunk-OZS4WEKF.js +0 -55
  162. package/dist/chunk-OZS4WEKF.js.map +0 -1
  163. package/dist/chunk-Q3UM7UCM.cjs +0 -64
  164. package/dist/chunk-Q3UM7UCM.cjs.map +0 -1
  165. package/dist/chunk-QFQWKKVU.js +0 -11
  166. package/dist/chunk-QFQWKKVU.js.map +0 -1
  167. package/dist/chunk-QK5J7FD3.cjs +0 -11
  168. package/dist/chunk-QK5J7FD3.cjs.map +0 -1
  169. package/dist/chunk-T5WAVOPI.js.map +0 -1
  170. package/dist/chunk-ZSWTJ6E7.js +0 -64
  171. package/dist/chunk-ZSWTJ6E7.js.map +0 -1
  172. package/dist/components/auth/methods/web3/Web3ConnectorContainer.cjs +0 -36
  173. package/dist/components/auth/methods/web3/Web3ConnectorContainer.d.cts +0 -10
  174. package/dist/components/auth/methods/web3/Web3ConnectorContainer.d.ts +0 -10
  175. package/dist/components/auth/methods/web3/Web3ConnectorContainer.js +0 -36
  176. package/dist/providers/auth/web3/WagmiAuthProvider.cjs +0 -8
  177. package/dist/providers/auth/web3/WagmiAuthProvider.d.cts +0 -8
  178. package/dist/providers/auth/web3/WagmiAuthProvider.d.ts +0 -8
  179. package/dist/providers/auth/web3/WagmiAuthProvider.js +0 -8
  180. package/src/components/auth/methods/web3/Web3ConnectorContainer.tsx +0 -87
  181. package/src/providers/auth/web3/WagmiAuthProvider.tsx +0 -56
  182. /package/dist/{chunk-GGVJALEH.cjs.map → chunk-2ROLE4XU.cjs.map} +0 -0
  183. /package/dist/{chunk-HYP7ISWS.js.map → chunk-5EE2IAIP.js.map} +0 -0
  184. /package/dist/{chunk-FKRBO2MK.js.map → chunk-5UXGDXPR.js.map} +0 -0
  185. /package/dist/{chunk-NKOG6FTK.js.map → chunk-6EX2VR7S.js.map} +0 -0
  186. /package/dist/{chunk-U5EONMPH.js.map → chunk-6FG6NL44.js.map} +0 -0
  187. /package/dist/{chunk-E7KTAG6X.cjs.map → chunk-6PPUWTTF.cjs.map} +0 -0
  188. /package/dist/{chunk-MBJBFR2H.js.map → chunk-7BZSIPWM.js.map} +0 -0
  189. /package/dist/{chunk-LF3XEXLA.js.map → chunk-DCMLWFDK.js.map} +0 -0
  190. /package/dist/{chunk-6AFXSTEN.cjs.map → chunk-GMKTZIU2.cjs.map} +0 -0
  191. /package/dist/{chunk-4BGD6LSC.js.map → chunk-HOTEC5UH.js.map} +0 -0
  192. /package/dist/{chunk-LD66M6G7.cjs.map → chunk-K5S6RUJ3.cjs.map} +0 -0
  193. /package/dist/{chunk-HR57IU52.cjs.map → chunk-LJA62EVT.cjs.map} +0 -0
  194. /package/dist/{chunk-G526QBKQ.cjs.map → chunk-QFZ6GZZR.cjs.map} +0 -0
  195. /package/dist/{chunk-KAXBBO66.cjs.map → chunk-SBTNHVSD.cjs.map} +0 -0
  196. /package/dist/{chunk-7YHGZZ6G.js.map → chunk-TH42AO6J.js.map} +0 -0
  197. /package/dist/{chunk-JZYMJ733.js.map → chunk-U7LXB3SM.js.map} +0 -0
  198. /package/dist/{chunk-3LHIEADG.cjs.map → chunk-YNBGMNE6.cjs.map} +0 -0
  199. /package/dist/{chunk-NTAMXW3Z.cjs.map → chunk-ZJC4OB5Z.cjs.map} +0 -0
  200. /package/dist/{components/auth/methods/web3/Web3ConnectorContainer.cjs.map → providers/auth/web3/DynamicWeb3WalletConnect.cjs.map} +0 -0
  201. /package/dist/{components/auth/methods/web3/Web3ConnectorContainer.js.map → providers/auth/web3/DynamicWeb3WalletConnect.js.map} +0 -0
  202. /package/dist/{providers/auth/web3/WagmiAuthProvider.cjs.map → utils/dynamic/dynamicChainToCrossmintChain.cjs.map} +0 -0
  203. /package/dist/{providers/auth/web3/WagmiAuthProvider.js.map → utils/dynamic/dynamicChainToCrossmintChain.js.map} +0 -0
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  createCrossmintApiClient
3
- } from "../chunk-4BGD6LSC.js";
4
- import "../chunk-YP4CPG34.js";
3
+ } from "../chunk-HOTEC5UH.js";
4
+ import "../chunk-FGHABNQM.js";
5
5
  import "../chunk-CRTRMMJ7.js";
6
6
  export {
7
7
  createCrossmintApiClient
@@ -0,0 +1,8 @@
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
+
3
+ var _chunkLGY5FQOZcjs = require('../../chunk-LGY5FQOZ.cjs');
4
+ require('../../chunk-4DAZAO6Y.cjs');
5
+
6
+
7
+ exports.dynamicChainToCrossmintChain = _chunkLGY5FQOZcjs.dynamicChainToCrossmintChain;
8
+ //# sourceMappingURL=dynamicChainToCrossmintChain.cjs.map
@@ -0,0 +1,6 @@
1
+ import { BlockchainIncludingTestnet } from '@crossmint/common-sdk-base';
2
+ import { HandleConnectedWallet } from '@dynamic-labs/sdk-react-core';
3
+
4
+ declare function dynamicChainToCrossmintChain(wallet: Parameters<HandleConnectedWallet>[0]): Promise<BlockchainIncludingTestnet>;
5
+
6
+ export { dynamicChainToCrossmintChain };
@@ -0,0 +1,6 @@
1
+ import { BlockchainIncludingTestnet } from '@crossmint/common-sdk-base';
2
+ import { HandleConnectedWallet } from '@dynamic-labs/sdk-react-core';
3
+
4
+ declare function dynamicChainToCrossmintChain(wallet: Parameters<HandleConnectedWallet>[0]): Promise<BlockchainIncludingTestnet>;
5
+
6
+ export { dynamicChainToCrossmintChain };
@@ -0,0 +1,8 @@
1
+ import {
2
+ dynamicChainToCrossmintChain
3
+ } from "../../chunk-6CPZDD6Y.js";
4
+ import "../../chunk-CRTRMMJ7.js";
5
+ export {
6
+ dynamicChainToCrossmintChain
7
+ };
8
+ //# sourceMappingURL=dynamicChainToCrossmintChain.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crossmint/client-sdk-react-ui",
3
- "version": "1.10.5",
3
+ "version": "1.10.7",
4
4
  "repository": "https://github.com/Crossmint/crossmint-sdk",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Paella Labs Inc",
@@ -28,10 +28,8 @@
28
28
  "@radix-ui/react-dialog": "1.1.2",
29
29
  "@radix-ui/react-visually-hidden": "1.1.0",
30
30
  "@solana/web3.js": "1.95.1",
31
- "@tanstack/react-query": "5.51.18",
32
31
  "@twind/core": "1.1.3",
33
32
  "@twind/preset-tailwind": "1.1.4",
34
- "@wagmi/connectors": "5.3.3",
35
33
  "bs58": "5.0.0",
36
34
  "clsx": "2.1.1",
37
35
  "color": "4.2.3",
@@ -41,13 +39,12 @@
41
39
  "tailwind-merge": "2.4.0",
42
40
  "tailwindcss": "3.4.10",
43
41
  "viem": "2.17.5",
44
- "wagmi": "2.12.25",
45
42
  "zod": "3.22.4",
46
- "@crossmint/client-sdk-auth": "1.1.1",
47
- "@crossmint/client-sdk-smart-wallet": "0.1.22",
48
- "@crossmint/client-sdk-base": "1.3.2",
43
+ "@crossmint/client-sdk-auth": "1.1.3",
44
+ "@crossmint/client-sdk-base": "1.3.4",
45
+ "@crossmint/client-sdk-smart-wallet": "0.1.24",
49
46
  "@crossmint/client-sdk-window": "0.1.0",
50
- "@crossmint/common-sdk-auth": "1.0.1",
47
+ "@crossmint/common-sdk-auth": "1.0.3",
51
48
  "@crossmint/common-sdk-base": "0.3.0"
52
49
  },
53
50
  "devDependencies": {
@@ -1,3 +1,5 @@
1
+ import { lazy } from "react";
2
+ import Color from "color";
1
3
  import { useAuthForm } from "@/providers/auth/AuthFormProvider";
2
4
  import { EmailAuthFlow } from "./methods/email/EmailAuthFlow";
3
5
  import { Divider } from "../common/Divider";
@@ -6,10 +8,15 @@ import { FarcasterSignIn } from "./methods/farcaster/FarcasterSignIn";
6
8
  import { PoweredByCrossmint } from "../common/PoweredByCrossmint";
7
9
  import { FarcasterProvider } from "../../providers/auth/FarcasterProvider";
8
10
  import { classNames } from "@/utils/classNames";
9
- import { Web3AuthFlow } from "./methods/web3/Web3AuthFlow";
10
- import Color from "color";
11
11
  import { AlertIcon } from "@/icons/alert";
12
12
 
13
+ const Web3AuthFlow = lazy(() =>
14
+ // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
15
+ import("./methods/web3/Web3AuthFlow").then((mod) => ({
16
+ default: mod.Web3AuthFlow,
17
+ }))
18
+ );
19
+
13
20
  export function AuthForm({ className }: { className?: string }) {
14
21
  const { step, appearance, loginMethods, baseUrl, error } = useAuthForm();
15
22
 
@@ -1,14 +1,32 @@
1
1
  import { useAuthForm } from "@/providers/auth/AuthFormProvider";
2
2
  import { Web3AuthFlowButton } from "./Web3AuthFlowButton";
3
3
  import { Web3Connectors } from "./Web3Connectors";
4
+ import { useCrossmint } from "@/hooks";
5
+ import { createCrossmintApiClient } from "@/utils/createCrossmintApiClient";
6
+ import { DynamicWeb3WalletConnect } from "@/providers/auth/web3/DynamicWeb3WalletConnect";
4
7
 
5
8
  export function Web3AuthFlow() {
9
+ const { crossmint } = useCrossmint();
10
+ const apiClient = createCrossmintApiClient(crossmint, {
11
+ usageOrigin: "client",
12
+ });
13
+
14
+ return (
15
+ <DynamicWeb3WalletConnect apiKeyEnvironment={apiClient["parsedAPIKey"].environment}>
16
+ <Web3AuthFlowContent />
17
+ </DynamicWeb3WalletConnect>
18
+ );
19
+ }
20
+
21
+ function Web3AuthFlowContent() {
6
22
  const { step } = useAuthForm();
7
23
 
24
+ // Show wallet connectors when in any web3 step
8
25
  if (step.startsWith("web3")) {
9
26
  return <Web3Connectors />;
10
27
  }
11
28
 
29
+ // Show initial connect button on first step
12
30
  if (step === "initial") {
13
31
  return <Web3AuthFlowButton />;
14
32
  }
@@ -1,14 +1,9 @@
1
1
  import { useAuthForm } from "@/providers/auth/AuthFormProvider";
2
2
  import { AuthFormBackButton } from "../../AuthFormBackButton";
3
- import { Web3ConnectorButton } from "./Web3ConnectorButton";
4
- import { metamaskIcon, walletConnectIcon } from "@/icons/base64Icons";
5
- import { Web3ConnectorContainer } from "./Web3ConnectorContainer";
6
- import { useAccount, useDisconnect } from "wagmi";
3
+ import { DynamicEmbeddedWidget } from "@dynamic-labs/sdk-react-core";
7
4
 
8
5
  export function Web3Connectors() {
9
6
  const { appearance, step, setStep } = useAuthForm();
10
- const { isConnected } = useAccount();
11
- const { disconnect } = useDisconnect();
12
7
 
13
8
  if (step === "web3") {
14
9
  return (
@@ -18,78 +13,16 @@ export function Web3Connectors() {
18
13
  iconColor={appearance?.colors?.textPrimary}
19
14
  ringColor={appearance?.colors?.accent}
20
15
  />
21
- <div className="flex flex-col items-center gap-2">
22
- <div className="text-center mb-6">
23
- <h3
24
- className="text-lg font-semibold text-cm-text-primary"
25
- style={{ color: appearance?.colors?.textPrimary }}
26
- >
27
- Connect wallet
28
- </h3>
29
- </div>
16
+ <div className="flex flex-col items-center">
30
17
  <div className="flex flex-col gap-[10px] w-full">
31
- <Web3ConnectorButton
32
- title="Metamask"
33
- appearance={appearance}
34
- img={metamaskIcon}
35
- onClick={() => {
36
- if (isConnected) {
37
- disconnect();
38
- }
39
- // wait for all disconnect state to be cleared before proceeding to the next step
40
- setTimeout(() => {
41
- setStep("web3/metamask");
42
- }, 200);
43
- }}
44
- />
45
- <Web3ConnectorButton
46
- title="WalletConnect"
47
- appearance={appearance}
48
- img={walletConnectIcon}
49
- onClick={() => {
50
- if (isConnected) {
51
- disconnect();
52
- }
53
- setTimeout(() => {
54
- setStep("web3/walletconnect");
55
- }, 200);
56
- }}
57
- />
18
+ <div className="widget-container">
19
+ <DynamicEmbeddedWidget background="none" />
20
+ </div>
58
21
  </div>
59
22
  </div>
60
23
  </>
61
24
  );
62
25
  }
63
26
 
64
- if (step === "web3/metamask") {
65
- return (
66
- <>
67
- <AuthFormBackButton
68
- onClick={() => {
69
- setStep("web3");
70
- }}
71
- iconColor={appearance?.colors?.textPrimary}
72
- ringColor={appearance?.colors?.accent}
73
- />
74
- <Web3ConnectorContainer providerType="metaMaskSDK" flag="isMetaMask" icon={metamaskIcon} />
75
- </>
76
- );
77
- }
78
-
79
- if (step === "web3/walletconnect") {
80
- return (
81
- <>
82
- <AuthFormBackButton
83
- onClick={() => {
84
- setStep("web3");
85
- }}
86
- iconColor={appearance?.colors?.textPrimary}
87
- ringColor={appearance?.colors?.accent}
88
- />
89
- <Web3ConnectorContainer providerType="walletConnect" icon={walletConnectIcon} />
90
- </>
91
- );
92
- }
93
-
94
27
  return null;
95
28
  }
@@ -1,15 +1,12 @@
1
1
  import DynamicContextProviderWrapper from "@/components/dynamic-xyz/DynamicContextProviderWrapper";
2
2
  import type { EmbeddedCheckoutV3IFrameEmitter } from "@crossmint/client-sdk-base";
3
- import {
4
- type APIKeyEnvironmentPrefix,
5
- type BlockchainIncludingTestnet,
6
- chainIdToBlockchain,
7
- } from "@crossmint/common-sdk-base";
3
+ import type { APIKeyEnvironmentPrefix, BlockchainIncludingTestnet } from "@crossmint/common-sdk-base";
8
4
  import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
9
- import { DynamicContext, useDynamicContext, type HandleConnectedWallet } from "@dynamic-labs/sdk-react-core";
5
+ import { DynamicContext, useDynamicContext } from "@dynamic-labs/sdk-react-core";
10
6
  import { SolanaWalletConnectors } from "@dynamic-labs/solana";
11
7
  import { type Dispatch, type SetStateAction, useContext, useEffect, useState } from "react";
12
8
  import { handleSendTransaction } from "./utils/handleSendTransaction";
9
+ import { dynamicChainToCrossmintChain } from "@/utils/dynamic/dynamicChainToCrossmintChain";
13
10
 
14
11
  export function CryptoWalletConnectionHandler(props: {
15
12
  iframeClient: EmbeddedCheckoutV3IFrameEmitter | null;
@@ -119,24 +116,6 @@ function _CryptoWalletConnectionHandler({ iframeClient }: Parameters<typeof Cryp
119
116
  return showDynamicModal ? <ShowDynamicModal setShowDynamicModal={setShowDynamicModal} /> : null;
120
117
  }
121
118
 
122
- async function dynamicChainToCrossmintChain(
123
- wallet: Parameters<HandleConnectedWallet>[0]
124
- ): Promise<BlockchainIncludingTestnet> {
125
- const chain = wallet.chain;
126
- if (chain === "SOL") {
127
- return "solana";
128
- }
129
- const chainId = await wallet.connector?.getNetwork();
130
- if (typeof chainId !== "number") {
131
- throw new Error("chainId is not a number");
132
- }
133
- const chainFromChainId = chainIdToBlockchain(chainId);
134
- if (!chainFromChainId) {
135
- throw new Error(`ChainId ${chainId} is not supported`);
136
- }
137
- return chainFromChainId as BlockchainIncludingTestnet;
138
- }
139
-
140
119
  export function ShowDynamicModal({ setShowDynamicModal }: { setShowDynamicModal: Dispatch<SetStateAction<boolean>> }) {
141
120
  const context = useContext(DynamicContext);
142
121
  if (context == null) {
@@ -13,10 +13,6 @@ import { CrossmintProvider, useCrossmint } from "../hooks/useCrossmint";
13
13
  import { MOCK_API_KEY } from "../testUtils";
14
14
  import { CrossmintAuthProvider, type CrossmintAuthWalletConfig } from "./CrossmintAuthProvider";
15
15
 
16
- vi.mock("./auth/web3/WagmiAuthProvider", () => ({
17
- WagmiAuthProvider: ({ children }: { children: ReactNode }) => <>{children}</>,
18
- }));
19
-
20
16
  vi.mock("@crossmint/client-sdk-smart-wallet", async () => {
21
17
  const actual = await vi.importActual("@crossmint/client-sdk-smart-wallet");
22
18
  return {
@@ -11,10 +11,6 @@ import { useWallet } from "../hooks/useWallet";
11
11
  import { MOCK_API_KEY } from "../testUtils";
12
12
  import { CrossmintWalletProvider } from "./CrossmintWalletProvider";
13
13
 
14
- vi.mock("./auth/web3/WagmiAuthProvider", () => ({
15
- WagmiAuthProvider: ({ children }: { children: ReactNode }) => <>{children}</>,
16
- }));
17
-
18
14
  vi.mock("@crossmint/client-sdk-smart-wallet", async () => {
19
15
  const actual = await vi.importActual("@crossmint/client-sdk-smart-wallet");
20
16
  return {
@@ -80,7 +76,6 @@ describe("CrossmintWalletProvider", () => {
80
76
  jwt: "mock-jwt",
81
77
  },
82
78
  setJwt: () => {},
83
- setRefreshToken: () => {},
84
79
  });
85
80
 
86
81
  mockSDK = mock<SmartWalletSDK>();
@@ -122,7 +117,6 @@ describe("CrossmintWalletProvider", () => {
122
117
  jwt: undefined,
123
118
  },
124
119
  setJwt: () => {},
125
- setRefreshToken: () => {},
126
120
  });
127
121
  });
128
122
 
@@ -1,4 +1,3 @@
1
- import type { ReactNode } from "react";
2
1
  import { render, fireEvent, waitFor } from "@testing-library/react";
3
2
  import { beforeEach } from "vitest";
4
3
  import { AuthFormProvider, useAuthForm } from "./AuthFormProvider";
@@ -6,10 +5,6 @@ import { describe, expect, it, vi } from "vitest";
6
5
  import type { CrossmintAuthWalletConfig, LoginMethod } from "..";
7
6
  import { useCrossmintAuth } from "@/hooks/useCrossmintAuth";
8
7
 
9
- vi.mock("./web3/WagmiAuthProvider", () => ({
10
- WagmiAuthProvider: ({ children }: { children: ReactNode }) => <>{children}</>,
11
- }));
12
-
13
8
  vi.mock("@/hooks/useCrossmintAuth");
14
9
 
15
10
  // Mock component to test the AuthFormProvider
@@ -3,7 +3,6 @@ import type { OAuthProvider } from "@crossmint/common-sdk-auth";
3
3
  import type { UIConfig } from "@crossmint/common-sdk-base";
4
4
  import type { CrossmintAuthWalletConfig, LoginMethod } from "../CrossmintAuthProvider";
5
5
  import { useCrossmintAuth } from "@/hooks/useCrossmintAuth";
6
- import { WagmiAuthProvider } from "./web3/WagmiAuthProvider";
7
6
 
8
7
  type AuthStep = "initial" | "otp" | "qrCode" | "web3" | "web3/metamask" | "web3/walletconnect";
9
8
 
@@ -106,9 +105,5 @@ export const AuthFormProvider = ({
106
105
  setStep,
107
106
  };
108
107
 
109
- return (
110
- <AuthFormContext.Provider value={value}>
111
- <WagmiAuthProvider>{children}</WagmiAuthProvider>
112
- </AuthFormContext.Provider>
113
- );
108
+ return <AuthFormContext.Provider value={value}>{children}</AuthFormContext.Provider>;
114
109
  };
@@ -0,0 +1,73 @@
1
+ import type React from "react";
2
+ import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
3
+ import { SolanaWalletConnectors } from "@dynamic-labs/solana";
4
+ import type { APIKeyEnvironmentPrefix } from "@crossmint/common-sdk-base";
5
+ import DynamicContextProviderWrapper from "@/components/dynamic-xyz/DynamicContextProviderWrapper";
6
+ import { useCrossmintAuth } from "@/hooks/useCrossmintAuth";
7
+ import { useAuthForm } from "../AuthFormProvider";
8
+ import { dynamicChainToCrossmintChain } from "@/utils/dynamic/dynamicChainToCrossmintChain";
9
+
10
+ export function DynamicWeb3WalletConnect({
11
+ children,
12
+ apiKeyEnvironment,
13
+ }: { children: React.ReactNode; apiKeyEnvironment: APIKeyEnvironmentPrefix }) {
14
+ const { crossmintAuth } = useCrossmintAuth();
15
+ const { appearance } = useAuthForm();
16
+
17
+ const cssOverrides = `.powered-by-dynamic { display: none !important; } .wallet-list__scroll-container { padding: 0px !important; } .wallet-list__search-container { padding-left: 0px !important; padding-right: 0px !important; } .dynamic-footer { display: none !important; } h1 { color: ${appearance?.colors?.textPrimary} !important; } * { color: ${appearance?.colors?.textSecondary} !important; }`;
18
+
19
+ return (
20
+ <DynamicContextProviderWrapper
21
+ apiKeyEnvironment={apiKeyEnvironment}
22
+ settings={{
23
+ cssOverrides,
24
+ walletConnectors: [EthereumWalletConnectors, SolanaWalletConnectors],
25
+ events: {
26
+ onAuthFlowCancel() {
27
+ console.log("[CryptoWalletConnectionHandler] onAuthFlowCancel");
28
+ },
29
+ onAuthFlowClose() {
30
+ console.log("[CryptoWalletConnectionHandler] onAuthFlowClose");
31
+ },
32
+ onAuthFailure(data, reason) {
33
+ console.error("[CryptoWalletConnectionHandler] onAuthFailure", data, reason);
34
+ },
35
+ onAuthSuccess(data) {
36
+ console.log("[CryptoWalletConnectionHandler] onAuthSuccess", data);
37
+ },
38
+ },
39
+ handlers: {
40
+ handleConnectedWallet: async (wallet) => {
41
+ console.log("[CryptoWalletConnectionHandler] handleConnectedWallet", wallet);
42
+
43
+ const address = wallet.address;
44
+ if (!address) {
45
+ console.error("[CryptoWalletConnectionHandler] handleConnectedWallet: address is missing");
46
+ return false;
47
+ }
48
+
49
+ const chain = await dynamicChainToCrossmintChain(wallet);
50
+ console.log({ chain });
51
+
52
+ try {
53
+ const res = await crossmintAuth?.signInWithSmartWallet(address);
54
+ const signature = (await wallet.connector?.signMessage(res.challenge)) as `0x${string}`;
55
+ const authResponse = (await crossmintAuth?.authenticateSmartWallet(address, signature)) as {
56
+ oneTimeSecret: string;
57
+ };
58
+ const oneTimeSecret = authResponse.oneTimeSecret;
59
+ await crossmintAuth?.handleRefreshAuthMaterial(oneTimeSecret);
60
+ } catch (error) {
61
+ console.error("[CryptoWalletConnectionHandler] Error authenticating wallet:", error);
62
+ return false;
63
+ }
64
+
65
+ return true;
66
+ },
67
+ },
68
+ }}
69
+ >
70
+ {children}
71
+ </DynamicContextProviderWrapper>
72
+ );
73
+ }
@@ -0,0 +1,20 @@
1
+ import { chainIdToBlockchain, type BlockchainIncludingTestnet } from "@crossmint/common-sdk-base";
2
+ import type { HandleConnectedWallet } from "@dynamic-labs/sdk-react-core";
3
+
4
+ export async function dynamicChainToCrossmintChain(
5
+ wallet: Parameters<HandleConnectedWallet>[0]
6
+ ): Promise<BlockchainIncludingTestnet> {
7
+ const chain = wallet.chain;
8
+ if (chain === "SOL") {
9
+ return "solana";
10
+ }
11
+ const chainId = await wallet.connector?.getNetwork();
12
+ if (typeof chainId !== "number") {
13
+ throw new Error("chainId is not a number");
14
+ }
15
+ const chainFromChainId = chainIdToBlockchain(chainId);
16
+ if (!chainFromChainId) {
17
+ throw new Error(`ChainId ${chainId} is not supported`);
18
+ }
19
+ return chainFromChainId as BlockchainIncludingTestnet;
20
+ }
@@ -1,55 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/providers/auth/web3/WagmiAuthProvider.tsx
2
- var _wagmi = require('wagmi');
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
- var _chains = require('wagmi/chains');
14
- var _reactquery = require('@tanstack/react-query');
15
- var _connectors = require('wagmi/connectors');
16
- var _jsxruntime = require('react/jsx-runtime');
17
- var ALCHEMY_API_KEY = "-7M6vRDBDknwvMxnqah_jbcieWg0qad9";
18
- var ALCHEMY_RPC_SUBDOMAIN = {
19
- mainnet: "mainnet",
20
- polygon: "polygon-mainnet",
21
- "polygon-amoy": "polygon-amoy",
22
- base: "base-mainnet",
23
- "base-sepolia": "base-sepolia",
24
- optimism: "opt-mainnet",
25
- "optimism-sepolia": "opt-sepolia",
26
- arbitrum: "arb-mainnet",
27
- "arbitrum-sepolia": "arb-sepolia"
28
- };
29
- function getAlchemyRPC(chain) {
30
- return `https://${ALCHEMY_RPC_SUBDOMAIN[chain]}.g.alchemy.com/v2/${ALCHEMY_API_KEY}`;
31
- }
32
- var config = _wagmi.createConfig.call(void 0, {
33
- chains: [_chains.mainnet, _chains.base, _chains.polygon, _chains.optimism, _chains.arbitrum, _chains.baseSepolia, _chains.polygonAmoy, _chains.optimismSepolia, _chains.arbitrumSepolia],
34
- connectors: [_connectors.metaMask.call(void 0, ), _connectors.walletConnect.call(void 0, { projectId: "94ed8f7549329dad7be968888eec3688" })],
35
- transports: {
36
- [_chains.mainnet.id]: _wagmi.http.call(void 0, getAlchemyRPC("mainnet")),
37
- [_chains.base.id]: _wagmi.http.call(void 0, getAlchemyRPC("base")),
38
- [_chains.polygon.id]: _wagmi.http.call(void 0, getAlchemyRPC("polygon")),
39
- [_chains.optimism.id]: _wagmi.http.call(void 0, getAlchemyRPC("optimism")),
40
- [_chains.arbitrum.id]: _wagmi.http.call(void 0, getAlchemyRPC("arbitrum")),
41
- [_chains.baseSepolia.id]: _wagmi.http.call(void 0, getAlchemyRPC("base-sepolia")),
42
- [_chains.polygonAmoy.id]: _wagmi.http.call(void 0, getAlchemyRPC("polygon-amoy")),
43
- [_chains.optimismSepolia.id]: _wagmi.http.call(void 0, getAlchemyRPC("optimism-sepolia")),
44
- [_chains.arbitrumSepolia.id]: _wagmi.http.call(void 0, getAlchemyRPC("arbitrum-sepolia"))
45
- }
46
- });
47
- function WagmiAuthProvider({ children }) {
48
- const queryClient = new (0, _reactquery.QueryClient)();
49
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _wagmi.WagmiProvider, { config, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children }) });
50
- }
51
-
52
-
53
-
54
- exports.WagmiAuthProvider = WagmiAuthProvider;
55
- //# sourceMappingURL=chunk-5S4VO6RB.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/providers/auth/web3/WagmiAuthProvider.tsx"],"names":[],"mappings":";AACA,SAAS,cAAc,MAAM,qBAAqB;AAClD;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,aAAa,2BAA2B;AACjD,SAAS,UAAU,qBAAqB;AAsC5B;AApCZ,IAAM,kBAAkB;AACxB,IAAM,wBAAwB;AAAA,EAC1B,SAAS;AAAA,EACT,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,oBAAoB;AACxB;AACA,SAAS,cAAc,OAAmD;AACtE,SAAO,WAAW,sBAAsB,KAAK,CAAC,qBAAqB,eAAe;AACtF;AAEA,IAAM,SAAS,aAAa;AAAA,EACxB,QAAQ,CAAC,SAAS,MAAM,SAAS,UAAU,UAAU,aAAa,aAAa,iBAAiB,eAAe;AAAA,EAC/G,YAAY,CAAC,SAAS,GAAG,cAAc,EAAE,WAAW,mCAAmC,CAAC,CAAC;AAAA,EACzF,YAAY;AAAA,IACR,CAAC,QAAQ,EAAE,GAAG,KAAK,cAAc,SAAS,CAAC;AAAA,IAC3C,CAAC,KAAK,EAAE,GAAG,KAAK,cAAc,MAAM,CAAC;AAAA,IACrC,CAAC,QAAQ,EAAE,GAAG,KAAK,cAAc,SAAS,CAAC;AAAA,IAC3C,CAAC,SAAS,EAAE,GAAG,KAAK,cAAc,UAAU,CAAC;AAAA,IAC7C,CAAC,SAAS,EAAE,GAAG,KAAK,cAAc,UAAU,CAAC;AAAA,IAC7C,CAAC,YAAY,EAAE,GAAG,KAAK,cAAc,cAAc,CAAC;AAAA,IACpD,CAAC,YAAY,EAAE,GAAG,KAAK,cAAc,cAAc,CAAC;AAAA,IACpD,CAAC,gBAAgB,EAAE,GAAG,KAAK,cAAc,kBAAkB,CAAC;AAAA,IAC5D,CAAC,gBAAgB,EAAE,GAAG,KAAK,cAAc,kBAAkB,CAAC;AAAA,EAChE;AACJ,CAAC;AAEM,SAAS,kBAAkB,EAAE,SAAS,GAAkC;AAC3E,QAAM,cAAc,IAAI,YAAY;AACpC,SACI,oBAAC,iBAAc,QACX,8BAAC,uBAAoB,QAAQ,aAAc,UAAS,GACxD;AAER","sourcesContent":["import type React from \"react\";\nimport { createConfig, http, WagmiProvider } from \"wagmi\";\nimport {\n arbitrum,\n arbitrumSepolia,\n base,\n baseSepolia,\n optimism,\n optimismSepolia,\n polygon,\n polygonAmoy,\n mainnet,\n} from \"wagmi/chains\";\nimport { QueryClient, QueryClientProvider } from \"@tanstack/react-query\";\nimport { metaMask, walletConnect } from \"wagmi/connectors\";\n\nconst ALCHEMY_API_KEY = \"-7M6vRDBDknwvMxnqah_jbcieWg0qad9\";\nconst ALCHEMY_RPC_SUBDOMAIN = {\n mainnet: \"mainnet\",\n polygon: \"polygon-mainnet\",\n \"polygon-amoy\": \"polygon-amoy\",\n base: \"base-mainnet\",\n \"base-sepolia\": \"base-sepolia\",\n optimism: \"opt-mainnet\",\n \"optimism-sepolia\": \"opt-sepolia\",\n arbitrum: \"arb-mainnet\",\n \"arbitrum-sepolia\": \"arb-sepolia\",\n};\nfunction getAlchemyRPC(chain: keyof typeof ALCHEMY_RPC_SUBDOMAIN): string {\n return `https://${ALCHEMY_RPC_SUBDOMAIN[chain]}.g.alchemy.com/v2/${ALCHEMY_API_KEY}`;\n}\n\nconst config = createConfig({\n chains: [mainnet, base, polygon, optimism, arbitrum, baseSepolia, polygonAmoy, optimismSepolia, arbitrumSepolia],\n connectors: [metaMask(), walletConnect({ projectId: \"94ed8f7549329dad7be968888eec3688\" })],\n transports: {\n [mainnet.id]: http(getAlchemyRPC(\"mainnet\")),\n [base.id]: http(getAlchemyRPC(\"base\")),\n [polygon.id]: http(getAlchemyRPC(\"polygon\")),\n [optimism.id]: http(getAlchemyRPC(\"optimism\")),\n [arbitrum.id]: http(getAlchemyRPC(\"arbitrum\")),\n [baseSepolia.id]: http(getAlchemyRPC(\"base-sepolia\")),\n [polygonAmoy.id]: http(getAlchemyRPC(\"polygon-amoy\")),\n [optimismSepolia.id]: http(getAlchemyRPC(\"optimism-sepolia\")),\n [arbitrumSepolia.id]: http(getAlchemyRPC(\"arbitrum-sepolia\")),\n },\n});\n\nexport function WagmiAuthProvider({ children }: { children: React.ReactNode }) {\n const queryClient = new QueryClient();\n return (\n <WagmiProvider config={config}>\n <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>\n </WagmiProvider>\n );\n}\n"]}