@zerodev/wallet-react-ui 0.0.6 → 0.0.8

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 (71) hide show
  1. package/README.md +69 -10
  2. package/dist/_types/auth/authStoreSlice.d.ts +3 -4
  3. package/dist/_types/auth/authStoreSlice.d.ts.map +1 -1
  4. package/dist/_types/auth/components/WalletGridSheet/index.d.ts +15 -0
  5. package/dist/_types/auth/components/WalletGridSheet/index.d.ts.map +1 -0
  6. package/dist/_types/auth/hooks/useAuth.d.ts +0 -2
  7. package/dist/_types/auth/hooks/useAuth.d.ts.map +1 -1
  8. package/dist/_types/auth/index.d.ts +9 -1
  9. package/dist/_types/auth/index.d.ts.map +1 -1
  10. package/dist/_types/auth/pages/OtpInput.d.ts.map +1 -1
  11. package/dist/_types/auth/pages/SignUp/Email.d.ts +4 -0
  12. package/dist/_types/auth/pages/SignUp/Email.d.ts.map +1 -0
  13. package/dist/_types/auth/pages/SignUp/Google.d.ts +3 -0
  14. package/dist/_types/auth/pages/SignUp/Google.d.ts.map +1 -0
  15. package/dist/_types/auth/pages/SignUp/InstalledWallets.d.ts +12 -0
  16. package/dist/_types/auth/pages/SignUp/InstalledWallets.d.ts.map +1 -0
  17. package/dist/_types/auth/pages/SignUp/MoreWallets.d.ts +5 -0
  18. package/dist/_types/auth/pages/SignUp/MoreWallets.d.ts.map +1 -0
  19. package/dist/_types/auth/pages/SignUp/Passkey.d.ts +3 -0
  20. package/dist/_types/auth/pages/SignUp/Passkey.d.ts.map +1 -0
  21. package/dist/_types/auth/pages/SignUp/Wallet.d.ts +7 -0
  22. package/dist/_types/auth/pages/SignUp/Wallet.d.ts.map +1 -0
  23. package/dist/_types/auth/pages/SignUp/context.d.ts +30 -0
  24. package/dist/_types/auth/pages/SignUp/context.d.ts.map +1 -0
  25. package/dist/_types/auth/pages/SignUp/index.d.ts +37 -0
  26. package/dist/_types/auth/pages/SignUp/index.d.ts.map +1 -0
  27. package/dist/_types/auth/pages/Verifying.d.ts.map +1 -1
  28. package/dist/_types/auth/types.d.ts +2 -10
  29. package/dist/_types/auth/types.d.ts.map +1 -1
  30. package/dist/_types/auth/utils/isCancellationError.d.ts +2 -0
  31. package/dist/_types/auth/utils/isCancellationError.d.ts.map +1 -0
  32. package/dist/_types/auth/walletGuide.d.ts +108 -0
  33. package/dist/_types/auth/walletGuide.d.ts.map +1 -0
  34. package/dist/_types/connector.d.ts +3 -13
  35. package/dist/_types/connector.d.ts.map +1 -1
  36. package/dist/_types/index.d.ts +5 -3
  37. package/dist/_types/index.d.ts.map +1 -1
  38. package/dist/_types/store.d.ts +1 -6
  39. package/dist/_types/store.d.ts.map +1 -1
  40. package/dist/index.cjs +3 -3
  41. package/dist/index.cjs.map +1 -1
  42. package/dist/index.mjs +810 -576
  43. package/dist/index.mjs.map +1 -1
  44. package/dist/styles.css +1 -1
  45. package/package.json +3 -3
  46. package/src/auth/authStoreSlice.ts +7 -13
  47. package/src/auth/components/WalletGridSheet/index.tsx +77 -0
  48. package/src/auth/hooks/useAuth.ts +0 -5
  49. package/src/auth/index.tsx +19 -20
  50. package/src/auth/pages/OtpInput.tsx +1 -4
  51. package/src/auth/pages/SignUp/Email.tsx +86 -0
  52. package/src/auth/pages/SignUp/Google.tsx +43 -0
  53. package/src/auth/pages/SignUp/InstalledWallets.tsx +95 -0
  54. package/src/auth/pages/SignUp/MoreWallets.tsx +105 -0
  55. package/src/auth/pages/SignUp/Passkey.tsx +56 -0
  56. package/src/auth/pages/SignUp/Wallet.tsx +81 -0
  57. package/src/auth/pages/SignUp/context.tsx +46 -0
  58. package/src/auth/pages/SignUp/index.tsx +164 -0
  59. package/src/auth/pages/Verifying.tsx +3 -10
  60. package/src/auth/types.ts +1 -11
  61. package/src/auth/utils/isCancellationError.ts +10 -0
  62. package/src/auth/walletGuide.ts +132 -0
  63. package/src/connector.ts +12 -28
  64. package/src/index.ts +4 -3
  65. package/src/store.ts +1 -8
  66. package/dist/_types/auth/pages/SignUp.d.ts +0 -2
  67. package/dist/_types/auth/pages/SignUp.d.ts.map +0 -1
  68. package/dist/_types/auth/pages/WalletSelection.d.ts +0 -2
  69. package/dist/_types/auth/pages/WalletSelection.d.ts.map +0 -1
  70. package/src/auth/pages/SignUp.tsx +0 -311
  71. package/src/auth/pages/WalletSelection.tsx +0 -61
@@ -0,0 +1,132 @@
1
+ /**
2
+ * Static wallet metadata ("wallet guide") for the external-wallet auth flow:
3
+ * `rdns` matches EIP-6963 announcements, `mobileLink` builds WalletConnect
4
+ * mobile deep links, `icon`/`downloadUrl` brand rows for wallets that are not
5
+ * installed. Self-contained — no runtime registry fetch.
6
+ *
7
+ * Wallet names and logos are trademarks of their respective owners.
8
+ */
9
+
10
+ export type WalletGuideEntry = {
11
+ id: string
12
+ name: string
13
+ /**
14
+ * EIP-6963 identifier used to match announced (installed) providers.
15
+ * Absent for wallets that never announce (mobile-app-only wallets).
16
+ */
17
+ rdns?: string
18
+ /** Self-contained `data:image/svg+xml` URI. */
19
+ icon: string
20
+ /**
21
+ * WalletConnect mobile deep-link prefix — append `encodeURIComponent(wcUri)`.
22
+ * Absent when the wallet has no WC deep link (SDK- or extension-only).
23
+ */
24
+ mobileLink?: string
25
+ /** Vendor download page, for "get the wallet" fallbacks. */
26
+ downloadUrl: string
27
+ }
28
+
29
+ /**
30
+ * A live connector "claims" a guide wallet by rdns: announced (6963)
31
+ * connectors carry `id === rdns`, explicit ones (e.g. `metaMask()`) declare
32
+ * `rdns` as a string or array.
33
+ */
34
+ export function matchesWallet(
35
+ connector: { id: string; rdns?: string | readonly string[] | undefined },
36
+ wallet: WalletGuideEntry,
37
+ ): boolean {
38
+ return (
39
+ !!wallet.rdns &&
40
+ (connector.id === wallet.rdns ||
41
+ (Array.isArray(connector.rdns)
42
+ ? connector.rdns.includes(wallet.rdns)
43
+ : connector.rdns === wallet.rdns))
44
+ )
45
+ }
46
+
47
+ const guide = [
48
+ {
49
+ id: 'metamask',
50
+ name: 'MetaMask',
51
+ rdns: 'io.metamask',
52
+ icon: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20fill%3D%22none%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h28v28H0z%22%2F%3E%3Cg%20clip-path%3D%22url(%23a)%22%3E%3Cpath%20fill%3D%22%23ff5c16%22%20d%3D%22m24.024%2023.824-4.846-1.434-3.655%202.172-2.55-.001-3.656-2.171-4.844%201.434L3%2018.88l1.473-5.488L3%208.751%204.473%203l7.569%204.496h4.413L24.024%203l1.473%205.751-1.473%204.64%201.473%205.488z%22%2F%3E%3Cpath%20fill%3D%22%23ff5c16%22%20d%3D%22m4.474%203%207.57%204.499-.302%203.087zm4.844%2015.881%203.33%202.522-3.33.987zm3.064-4.17-.64-4.123-4.097%202.804h-.002v.001l.013%202.886%201.661-1.567zM24.024%203l-7.57%204.499.3%203.087zM19.18%2018.881l-3.33%202.522%203.33.987zm1.674-5.488v-.002zl-4.097-2.804-.64%204.124h3.064l1.662%201.567z%22%2F%3E%3Cpath%20fill%3D%22%23e34807%22%20d%3D%22m9.317%2022.39-4.844%201.434L3%2018.881h6.317zm3.064-7.68.925%205.962-1.282-3.315-4.37-1.078%201.662-1.568zm6.799%207.68%204.844%201.434%201.473-4.943H19.18zm-3.064-7.68-.925%205.962%201.282-3.315%204.37-1.078-1.663-1.568z%22%2F%3E%3Cpath%20fill%3D%22%23ff8d5d%22%20d%3D%22m3%2018.88%201.473-5.489h3.169l.012%202.887%204.37%201.078%201.282%203.314-.659.73-3.33-2.522H3zm22.497%200-1.473-5.489h-3.17l-.01%202.887-4.371%201.078-1.282%203.314.659.73%203.33-2.522h6.317zM16.455%207.495h-4.413l-.3%203.087%201.565%2010.084h1.884l1.565-10.084z%22%2F%3E%3Cpath%20fill%3D%22%23661800%22%20d%3D%22M4.473%203%203%208.751l1.473%204.64h3.169l4.1-2.805zm6.992%2012.908H10.03l-.781.761%202.776.685-.56-1.447M24.024%203l1.473%205.751-1.473%204.64h-3.17l-4.098-2.805zm-6.99%2012.908h1.437l.782.762-2.78.686.56-1.45zm-1.512%206.687.328-1.193-.66-.73h-1.885l-.659.73.327%201.192%22%2F%3E%3Cpath%20fill%3D%22%23c0c4cd%22%20d%3D%22M15.522%2022.594v1.969h-2.548v-1.969z%22%2F%3E%3Cpath%20fill%3D%22%23e7ebf6%22%20d%3D%22m9.318%2022.388%203.658%202.174v-1.969l-.328-1.192zm9.862%200-3.658%202.174v-1.969l.328-1.192z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M3%203h22.5v21.563H3z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E',
53
+ mobileLink: 'https://metamask.app.link/wc?uri=',
54
+ downloadUrl: 'https://metamask.io/download',
55
+ },
56
+ {
57
+ id: 'trust',
58
+ name: 'Trust Wallet',
59
+ rdns: 'com.trustwallet.app',
60
+ icon: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h28v28H0z%22%2F%3E%3Cpath%20fill%3D%22%230500FF%22%20d%3D%22M6%207.583%2013.53%205v17.882C8.15%2020.498%206%2015.928%206%2013.345V7.583Z%22%2F%3E%3Cpath%20fill%3D%22url(%23a)%22%20d%3D%22M22%207.583%2013.53%205v17.882c6.05-2.384%208.47-6.954%208.47-9.537V7.583Z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%2219.768%22%20x2%3D%2214.072%22%20y1%3D%223.753%22%20y2%3D%2222.853%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.02%22%20stop-color%3D%22%2300F%22%2F%3E%3Cstop%20offset%3D%22.08%22%20stop-color%3D%22%230094FF%22%2F%3E%3Cstop%20offset%3D%22.16%22%20stop-color%3D%22%2348FF91%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22%230094FF%22%2F%3E%3Cstop%20offset%3D%22.68%22%20stop-color%3D%22%230038FF%22%2F%3E%3Cstop%20offset%3D%22.9%22%20stop-color%3D%22%230500FF%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E',
61
+ mobileLink: 'trust://wc?uri=',
62
+ downloadUrl: 'https://trustwallet.com/download',
63
+ },
64
+ {
65
+ id: 'coinbase',
66
+ name: 'Coinbase Wallet',
67
+ rdns: 'com.coinbase.wallet',
68
+ icon: 'data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%2228%22%20height%3D%2228%22%20fill%3D%22%232C5FF6%22%2F%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14%2023.8C19.4124%2023.8%2023.8%2019.4124%2023.8%2014C23.8%208.58761%2019.4124%204.2%2014%204.2C8.58761%204.2%204.2%208.58761%204.2%2014C4.2%2019.4124%208.58761%2023.8%2014%2023.8ZM11.55%2010.8C11.1358%2010.8%2010.8%2011.1358%2010.8%2011.55V16.45C10.8%2016.8642%2011.1358%2017.2%2011.55%2017.2H16.45C16.8642%2017.2%2017.2%2016.8642%2017.2%2016.45V11.55C17.2%2011.1358%2016.8642%2010.8%2016.45%2010.8H11.55Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E',
69
+ downloadUrl: 'https://coinbase.com/wallet/downloads',
70
+ },
71
+ {
72
+ id: 'rainbow',
73
+ name: 'Rainbow',
74
+ rdns: 'me.rainbow',
75
+ icon: 'data:image/svg+xml,%3Csvg%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22url(%23paint0_linear_62_329)%22%2F%3E%0A%3Cpath%20d%3D%22M20%2038H26C56.9279%2038%2082%2063.0721%2082%2094V100H94C97.3137%20100%20100%2097.3137%20100%2094C100%2053.1309%2066.8691%2020%2026%2020C22.6863%2020%2020%2022.6863%2020%2026V38Z%22%20fill%3D%22url(%23paint1_radial_62_329)%22%2F%3E%0A%3Cpath%20d%3D%22M84%2094H100C100%2097.3137%2097.3137%20100%2094%20100H84V94Z%22%20fill%3D%22url(%23paint2_linear_62_329)%22%2F%3E%0A%3Cpath%20d%3D%22M26%2020L26%2036H20L20%2026C20%2022.6863%2022.6863%2020%2026%2020Z%22%20fill%3D%22url(%23paint3_linear_62_329)%22%2F%3E%0A%3Cpath%20d%3D%22M20%2036H26C58.0325%2036%2084%2061.9675%2084%2094V100H66V94C66%2071.9086%2048.0914%2054%2026%2054H20V36Z%22%20fill%3D%22url(%23paint4_radial_62_329)%22%2F%3E%0A%3Cpath%20d%3D%22M68%2094H84V100H68V94Z%22%20fill%3D%22url(%23paint5_linear_62_329)%22%2F%3E%0A%3Cpath%20d%3D%22M20%2052L20%2036L26%2036L26%2052H20Z%22%20fill%3D%22url(%23paint6_linear_62_329)%22%2F%3E%0A%3Cpath%20d%3D%22M20%2062C20%2065.3137%2022.6863%2068%2026%2068C40.3594%2068%2052%2079.6406%2052%2094C52%2097.3137%2054.6863%20100%2058%20100H68V94C68%2070.804%2049.196%2052%2026%2052H20V62Z%22%20fill%3D%22url(%23paint7_radial_62_329)%22%2F%3E%0A%3Cpath%20d%3D%22M52%2094H68V100H58C54.6863%20100%2052%2097.3137%2052%2094Z%22%20fill%3D%22url(%23paint8_radial_62_329)%22%2F%3E%0A%3Cpath%20d%3D%22M26%2068C22.6863%2068%2020%2065.3137%2020%2062L20%2052L26%2052L26%2068Z%22%20fill%3D%22url(%23paint9_radial_62_329)%22%2F%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22paint0_linear_62_329%22%20x1%3D%2260%22%20y1%3D%220%22%20x2%3D%2260%22%20y2%3D%22120%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color%3D%22%23174299%22%2F%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23001E59%22%2F%3E%0A%3C%2FlinearGradient%3E%0A%3CradialGradient%20id%3D%22paint1_radial_62_329%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate(26%2094)%20rotate(-90)%20scale(74)%22%3E%0A%3Cstop%20offset%3D%220.770277%22%20stop-color%3D%22%23FF4000%22%2F%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238754C9%22%2F%3E%0A%3C%2FradialGradient%3E%0A%3ClinearGradient%20id%3D%22paint2_linear_62_329%22%20x1%3D%2283%22%20y1%3D%2297%22%20x2%3D%22100%22%20y2%3D%2297%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color%3D%22%23FF4000%22%2F%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238754C9%22%2F%3E%0A%3C%2FlinearGradient%3E%0A%3ClinearGradient%20id%3D%22paint3_linear_62_329%22%20x1%3D%2223%22%20y1%3D%2220%22%20x2%3D%2223%22%20y2%3D%2237%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color%3D%22%238754C9%22%2F%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FF4000%22%2F%3E%0A%3C%2FlinearGradient%3E%0A%3CradialGradient%20id%3D%22paint4_radial_62_329%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate(26%2094)%20rotate(-90)%20scale(58)%22%3E%0A%3Cstop%20offset%3D%220.723929%22%20stop-color%3D%22%23FFF700%22%2F%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FF9901%22%2F%3E%0A%3C%2FradialGradient%3E%0A%3ClinearGradient%20id%3D%22paint5_linear_62_329%22%20x1%3D%2268%22%20y1%3D%2297%22%20x2%3D%2284%22%20y2%3D%2297%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color%3D%22%23FFF700%22%2F%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FF9901%22%2F%3E%0A%3C%2FlinearGradient%3E%0A%3ClinearGradient%20id%3D%22paint6_linear_62_329%22%20x1%3D%2223%22%20y1%3D%2252%22%20x2%3D%2223%22%20y2%3D%2236%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color%3D%22%23FFF700%22%2F%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FF9901%22%2F%3E%0A%3C%2FlinearGradient%3E%0A%3CradialGradient%20id%3D%22paint7_radial_62_329%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate(26%2094)%20rotate(-90)%20scale(42)%22%3E%0A%3Cstop%20offset%3D%220.59513%22%20stop-color%3D%22%2300AAFF%22%2F%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2301DA40%22%2F%3E%0A%3C%2FradialGradient%3E%0A%3CradialGradient%20id%3D%22paint8_radial_62_329%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate(51%2097)%20scale(17%2045.3333)%22%3E%0A%3Cstop%20stop-color%3D%22%2300AAFF%22%2F%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2301DA40%22%2F%3E%0A%3C%2FradialGradient%3E%0A%3CradialGradient%20id%3D%22paint9_radial_62_329%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate(23%2069)%20rotate(-90)%20scale(17%20322.37)%22%3E%0A%3Cstop%20stop-color%3D%22%2300AAFF%22%2F%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2301DA40%22%2F%3E%0A%3C%2FradialGradient%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E',
76
+ mobileLink: 'rainbow://wc?uri=',
77
+ downloadUrl: 'https://rainbow.download',
78
+ },
79
+ {
80
+ id: 'rabby',
81
+ name: 'Rabby Wallet',
82
+ rdns: 'io.rabby',
83
+ icon: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cg%20clip-path%3D%22url(%23a)%22%3E%3Cpath%20fill%3D%22%238697FF%22%20d%3D%22M28%200H0v28h28V0Z%22%2F%3E%3Cpath%20fill%3D%22url(%23b)%22%20d%3D%22M22.54%2015.078c.677-1.514-2.673-5.744-5.874-7.506-2.017-1.365-4.12-1.178-4.545-.579-.935%201.316%203.094%202.43%205.788%203.731-.58.252-1.125.703-1.446%201.28-1.004-1.096-3.209-2.04-5.796-1.28-1.743.513-3.191%201.721-3.751%203.546a1.097%201.097%200%201%200-.445%202.1c.112%200%20.463-.075.463-.075l5.612.041c-2.244%203.56-4.018%204.081-4.018%204.698s1.697.45%202.335.22c3.05-1.1%206.327-4.531%206.89-5.519%202.36.295%204.345.33%204.786-.657Z%22%2F%3E%3Cpath%20fill%3D%22url(%23c)%22%20fill-rule%3D%22evenodd%22%20d%3D%22m17.885%2010.713.025.01c.125-.049.105-.233.07-.378-.078-.333-1.438-1.676-2.715-2.277-1.743-.82-3.025-.777-3.212-.398.356.726%201.998%201.408%203.714%202.12.723.3%201.46.606%202.118.923Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23d)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M15.701%2018.036a10.296%2010.296%200%200%200-1.2-.37c.482-.862.583-2.138.128-2.945-.639-1.133-1.44-1.736-3.304-1.736-1.024%200-3.783.346-3.832%202.648-.005.242%200%20.464.017.667l5.036.037a17.264%2017.264%200%200%201-1.871%202.483c.669.172%201.221.316%201.728.448.48.125.92.24%201.38.357a21.003%2021.003%200%200%200%201.918-1.59Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23e)%22%20d%3D%22M6.848%2016.063c.206%201.75%201.2%202.435%203.232%202.638%202.032.203%203.197.067%204.749.208%201.296.118%202.453.778%202.882.55.386-.205.17-.947-.347-1.423-.67-.617-1.597-1.046-3.229-1.199.325-.89.234-2.138-.27-2.817-.731-.982-2.079-1.426-3.785-1.232-1.782.202-3.49%201.08-3.232%203.275Z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%2210.464%22%20x2%3D%2222.394%22%20y1%3D%2213.737%22%20y2%3D%2217.12%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22c%22%20x1%3D%2220.386%22%20x2%3D%2211.779%22%20y1%3D%2213.509%22%20y2%3D%224.879%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%237258DC%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23797DEA%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22d%22%20x1%3D%2215.94%22%20x2%3D%227.673%22%20y1%3D%2218.337%22%20y2%3D%2213.584%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%237461EA%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23BFC2FF%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22e%22%20x1%3D%2211.177%22%20x2%3D%2216.765%22%20y1%3D%2213.648%22%20y2%3D%2220.749%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.984%22%20stop-color%3D%22%23D5CEFF%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h28v28H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E',
84
+ downloadUrl: 'https://rabby.io',
85
+ },
86
+ {
87
+ id: 'okx',
88
+ name: 'OKX Wallet',
89
+ rdns: 'com.okex.wallet',
90
+ icon: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M0%200h28v28H0z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10.819%205.556H5.93a.376.376%200%200%200-.375.375v4.888c0%20.207.168.375.375.375h4.888a.376.376%200%200%200%20.375-.376V5.932a.376.376%200%200%200-.376-.375Zm5.64%205.638h-4.886a.376.376%200%200%200-.376.376v4.887c0%20.208.168.376.376.376h4.887a.376.376%200%200%200%20.376-.375V11.57a.376.376%200%200%200-.376-.377Zm.75-5.638h4.887c.208%200%20.376.168.376.375v4.888a.376.376%200%200%201-.376.375H17.21a.376.376%200%200%201-.376-.376V5.933c0-.208.169-.376.376-.376Zm-6.39%2011.277H5.93a.376.376%200%200%200-.375.376v4.887c0%20.208.168.376.375.376h4.888a.376.376%200%200%200%20.375-.376V17.21a.376.376%200%200%200-.376-.376Zm6.39%200h4.887c.208%200%20.376.169.376.376v4.887a.376.376%200%200%201-.376.376H17.21a.376.376%200%200%201-.376-.376V17.21c0-.207.169-.376.376-.376Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E',
91
+ mobileLink: 'okex://main/wc?uri=',
92
+ downloadUrl: 'https://okx.com/download',
93
+ },
94
+ {
95
+ id: 'zerion',
96
+ name: 'Zerion',
97
+ rdns: 'io.zerion.wallet',
98
+ icon: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20fill%3D%22%232962EF%22%20d%3D%22M0%200h28v28H0z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M6.073%207c-.48%200-.665.593-.262.841l10.073%206.074a.577.577%200%200%200%20.758-.139l4.43-5.814c.3-.404-.004-.962-.525-.962H6.073ZM21.904%2021c.48%200%20.67-.596.267-.844l-10.075-6.073a.569.569%200%200%200-.751.146l-4.437%205.813c-.301.404.012.958.534.958h14.462Z%22%2F%3E%3C%2Fsvg%3E',
99
+ mobileLink: 'zerion://wc?uri=',
100
+ downloadUrl: 'https://zerion.io',
101
+ },
102
+ {
103
+ id: 'uniswap',
104
+ name: 'Uniswap',
105
+ rdns: 'org.uniswap.app',
106
+ icon: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23FFD8EA%22%20d%3D%22M0%200h28v28H0z%22%2F%3E%3Cg%20fill%3D%22%23FF007A%22%20clip-path%3D%22url(%23a)%22%3E%3Cpath%20d%3D%22M9.635%206.068c-.255-.039-.266-.043-.145-.06.23-.035.773.012%201.148.099.874.202%201.67.722%202.519%201.646l.225.246.323-.051c1.36-.213%202.741-.044%203.899.477.319.144.821.43.882.503.022.024.058.173.082.335.086.557.044.982-.13%201.301-.096.173-.101.228-.037.377a.367.367%200%200%200%20.334.206c.287%200%20.597-.454.74-1.086l.056-.252.113.126c.62.685%201.106%201.618%201.189%202.282l.021.174-.103-.158a1.966%201.966%200%200%200-.59-.604c-.415-.268-.855-.36-2.017-.42-1.05-.053-1.645-.141-2.234-.329-1.003-.32-1.508-.744-2.699-2.27-.53-.678-.855-1.053-1.18-1.354-.74-.687-1.466-1.047-2.396-1.187v-.001Z%22%2F%3E%3Cpath%20d%3D%22M18.725%207.581c.026-.453.088-.753.216-1.026.028-.07.063-.136.104-.198a.69.69%200%200%201-.049.178c-.092.266-.108.629-.043%201.052.081.536.126.613.706%201.192.273.272.589.613.704.761l.21.267-.21-.191c-.255-.233-.841-.69-.972-.755-.086-.042-.1-.042-.153.01-.05.048-.06.12-.068.461-.01.532-.084.873-.263%201.213-.096.187-.111.147-.025-.062.066-.155.072-.224.072-.739%200-1.033-.127-1.283-.864-1.707a8.169%208.169%200%200%200-.684-.346%202.614%202.614%200%200%201-.334-.16c.02-.02.74.185%201.029.293.431.163.502.183.555.164.034-.013.051-.113.068-.407h.001Zm-8.595%201.77c-.517-.696-.838-1.764-.768-2.563l.02-.247.119.02c.222.04.603.179.783.286.49.29.703.673.918%201.657.064.288.147.613.185.725.061.178.294.592.483.862.136.194.046.286-.255.26-.46-.04-1.083-.46-1.485-1Zm7.965%205.182c-2.42-.95-3.273-1.777-3.273-3.17%200-.206.007-.374.016-.374.008%200%20.102.067.208.151.491.384%201.04.548%202.563.765.896.128%201.398.231%201.864.382%201.48.478%202.392%201.449%202.61%202.773.063.384.028%201.104-.076%201.484-.082.3-.329.84-.394.861-.019.007-.037-.061-.04-.154-.025-.496-.283-.98-.715-1.343-.49-.412-1.15-.741-2.763-1.375Zm-1.699.396a4.13%204.13%200%200%200-.117-.5l-.062-.18.115.127c.16.173.285.396.391.693.082.227.09.294.09.662%200%20.361-.011.437-.087.64-.104.3-.28.572-.51.794-.443.44-1.011.683-1.833.784-.142.018-.557.047-.922.066-.922.046-1.529.144-2.073.33a.446.446%200%200%201-.156.036c-.021-.021.35-.237.656-.381.431-.204.861-.315%201.825-.47.475-.078.968-.173%201.093-.21%201.178-.352%201.784-1.263%201.59-2.39Z%22%2F%3E%3Cpath%20d%3D%22M17.506%2016.855c-.321-.675-.396-1.327-.22-1.935.02-.067.05-.119.068-.119a.64.64%200%200%201%20.169.09c.149.097.445.261%201.237.682.988.527%201.553.934%201.936%201.4.335.407.542.872.643%201.438.057.32.023%201.093-.061%201.416-.266%201.018-.882%201.818-1.764%202.285a2.129%202.129%200%200%201-.258.124c-.013%200%20.035-.116.104-.259.297-.605.331-1.193.107-1.848-.138-.401-.418-.89-.982-1.718-.657-.96-.817-1.218-.979-1.556Zm-9.095%203.644c.9-.742%202.016-1.267%203.036-1.43a4.85%204.85%200%200%201%201.575.06c.652.163%201.235.528%201.538.962.296.425.423.794.556%201.618.052.324.109.651.125.724.1.427.293.768.532.939.38.272%201.037.29%201.682.044a.853.853%200%200%201%20.21-.064c.023.023-.301.235-.53.347-.27.141-.572.213-.879.208-.59%200-1.08-.294-1.49-.891a7.027%207.027%200%200%201-.402-.784c-.431-.961-.644-1.253-1.145-1.575-.437-.28-1-.329-1.424-.126-.556.266-.71.96-.312%201.4.187.189.43.313.695.354a.75.75%200%200%200%20.589-.174.728.728%200%200%200%20.251-.551c0-.29-.114-.453-.4-.581-.392-.172-.812.029-.81.388%200%20.153.069.249.226.32.1.044.103.046.02.03-.358-.073-.442-.496-.154-.776.347-.336%201.064-.188%201.31.272.103.194.115.578.025.81-.203.52-.79.793-1.387.644-.407-.102-.571-.211-1.06-.703-.852-.856-1.182-1.023-2.408-1.21l-.237-.035.268-.22Z%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M4.418%205.179c2.842%203.368%204.8%204.757%205.017%205.05.18.243.112.462-.195.632a1.899%201.899%200%200%201-.699.191c-.2%200-.269-.075-.269-.075-.115-.106-.18-.088-.773-1.116A176.911%20176.911%200%200%200%205.968%207.56c-.044-.04-.042-.04%201.448%202.564.24.543.047.741.047.819%200%20.157-.044.24-.242.457-.332.36-.48.765-.587%201.604-.12.94-.456%201.604-1.39%202.741-.545.666-.635.787-.773%201.056-.174.338-.221.527-.24.952a2.9%202.9%200%200%200%20.16%201.174c.122.378.252.626.582%201.125.285.43.448.75.448.876%200%20.099.019.099.461.001%201.054-.232%201.91-.64%202.392-1.142.298-.311.367-.482.37-.907.002-.277-.008-.336-.085-.496-.125-.26-.353-.477-.855-.813-.66-.44-.942-.794-1.018-1.28-.065-.4.01-.682.373-1.427.377-.773.47-1.103.535-1.88.04-.503.096-.701.244-.861.155-.166.293-.222.676-.272.623-.084%201.018-.24%201.343-.534a1.14%201.14%200%200%200%20.421-.869l.014-.28-.16-.179C9.563%209.34%204.036%204.667%204%204.667c-.007%200%20.18.23.418.512Zm1.325%2013.086a.486.486%200%200%200-.157-.652c-.203-.133-.522-.069-.522.103%200%20.053.03.092.098.125.114.058.122.122.032.254s-.082.248.02.328c.168.126.404.057.529-.158ZM10.683%2012c-.29.086-.575.389-.664.706-.053.194-.022.534.058.638.13.169.255.213.596.212.665-.004%201.243-.283%201.311-.632.054-.286-.2-.68-.55-.855a1.33%201.33%200%200%200-.75-.07Zm.78.593c.102-.143.057-.296-.118-.4-.331-.199-.835-.035-.835.272%200%20.153.262.32.502.32.16%200%20.38-.093.45-.192Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M4%204h19v20H4z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E',
107
+ mobileLink: 'uniswap://wc?uri=',
108
+ downloadUrl: 'https://wallet.uniswap.org',
109
+ },
110
+ {
111
+ id: 'ledger',
112
+ name: 'Ledger',
113
+ icon: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M0%200h28v28H0z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M11.65%204.4H4.4V9h1.1V5.5l6.15-.04V4.4Zm.05%205.95v7.25h4.6v-1.1h-3.5l-.04-6.15H11.7ZM4.4%2023.6h7.25v-1.06L5.5%2022.5V19H4.4v4.6ZM16.35%204.4h7.25V9h-1.1V5.5l-6.15-.04V4.4Zm7.25%2019.2h-7.25v-1.06l6.15-.04V19h1.1v4.6Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E',
114
+ mobileLink: 'ledgerlive://wc?uri=',
115
+ downloadUrl: 'https://www.ledger.com/ledger-live',
116
+ },
117
+ {
118
+ id: 'binance',
119
+ name: 'Binance Wallet',
120
+ rdns: 'com.binance.wallet',
121
+ icon: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22130%22%20height%3D%22130%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M0%200h130v130H0z%22%2F%3E%3Cpath%20fill%3D%22%23F3BA2F%22%20d%3D%22M45.587%2057.02%2065.01%2037.606l19.43%2019.43%2011.295-11.303L65.01%2015%2034.284%2045.725zM15%2065.004l11.299-11.299%2011.298%2011.299L26.3%2076.302zM45.587%2072.983%2065.01%2092.406l19.43-19.43%2011.303%2011.287-.008.007-30.725%2030.734-30.725-30.718-.016-.016zM92.403%2065.006%20103.7%2053.708%20115%2065.006l-11.299%2011.299z%22%2F%3E%3Cpath%20fill%3D%22%23F3BA2F%22%20d%3D%22m76.471%2064.998-11.46-11.469-8.476%208.475-.98.972-2.005%202.006-.016.016.016.024%2011.46%2011.453%2011.461-11.47.008-.007z%22%2F%3E%3C%2Fsvg%3E',
122
+ mobileLink: 'bnc://app.binance.com/cedefi/wc?uri=',
123
+ downloadUrl: 'https://www.binance.com/en/download',
124
+ },
125
+ ] as const satisfies readonly WalletGuideEntry[]
126
+
127
+ /** Valid `walletId` values for `<SignUp.Wallet>` — the guide's wallet ids. */
128
+ export type WalletId = (typeof guide)[number]['id']
129
+
130
+ // Widened so entries have a uniform shape (`rdns` et al. always accessible);
131
+ // `guide` stays literal only to derive `WalletId`.
132
+ export const WALLET_GUIDE: readonly WalletGuideEntry[] = guide
package/src/connector.ts CHANGED
@@ -7,8 +7,6 @@ import {
7
7
  zeroDevWallet as baseZeroDevWallet,
8
8
  NotAuthenticatedError,
9
9
  } from '@zerodev/wallet-react'
10
- import type { ReactNode } from 'react'
11
- import type { AuthConfig } from './auth/types'
12
10
  import { createStore } from './store.js'
13
11
  import type { Request, RequestMethod } from './types.js'
14
12
 
@@ -20,18 +18,9 @@ const DEFAULT_SIGNING_PROMPT_METHODS: RequestMethod[] = [
20
18
  'eth_signTypedData_v4',
21
19
  ]
22
20
 
23
- export type ZeroDevKitConfig = {
24
- auth?: AuthConfig
25
- /**
26
- * Optional brand logo rendered in the auth flow's top nav. When omitted,
27
- * no logo is shown. `PoweredBy` always shows the ZeroDev mark independently.
28
- */
29
- logo?: ReactNode
30
- }
31
-
32
- export type ZeroDevKitConnectorParams = ZeroDevWalletConnectorParams & {
33
- config?: ZeroDevKitConfig
34
- }
21
+ /** The kit connector takes exactly the base connector's param
22
+ We alias it to leave room for expansion */
23
+ export type ZeroDevKitConnectorParams = ZeroDevWalletConnectorParams
35
24
 
36
25
  function requireUserConfirmation(
37
26
  store: ReturnType<typeof createStore>,
@@ -74,12 +63,7 @@ export function zeroDevWallet(
74
63
  params: ZeroDevKitConnectorParams,
75
64
  ): CreateConnectorFn {
76
65
  const baseFactory = baseZeroDevWallet(params)
77
- const store = createStore({ logo: params.config?.logo })
78
-
79
- // Initialize auth config if provided
80
- if (params.config?.auth) {
81
- store.getState().auth.initialize(params.config.auth)
82
- }
66
+ const store = createStore()
83
67
 
84
68
  return (wagmiConfig) => {
85
69
  const connector = baseFactory(wagmiConfig)
@@ -101,7 +85,6 @@ export function zeroDevWallet(
101
85
  } catch (error) {
102
86
  if (
103
87
  connectParams?.isReconnecting ||
104
- !params.config?.auth ||
105
88
  !(error instanceof NotAuthenticatedError)
106
89
  ) {
107
90
  throw error
@@ -119,24 +102,25 @@ export function zeroDevWallet(
119
102
 
120
103
  async disconnect() {
121
104
  await connector.disconnect?.()
122
- if (params.config?.auth) {
123
- store.getState().auth.reset()
124
- }
105
+ store.getState().auth.reset()
125
106
  },
126
107
 
127
108
  async setup() {
128
109
  await connector.setup?.()
129
110
 
130
- // Request-wrapping is only meaningful in the browser (it gates calls
131
- // on UI confirmation). Skip during SSR getProvider() touches
132
- // `window` for EIP-6963 discovery and would crash on the server.
111
+ // Everything below is browser-only. Skip during SSR getProvider()
112
+ // touches `window` for EIP-6963 discovery and would crash on the
113
+ // server, and the session restore reads localStorage.
133
114
  if (typeof window === 'undefined') return
134
115
 
116
+ // Restore a persisted OTP session so an email flow survives a reload.
117
+ store.getState().auth.initialize()
118
+
135
119
  // Signing is pinned to background mode: the prompt-mode confirmation UI
136
120
  // is not part of this package's public surface, so requests always pass
137
121
  // through without gating. The wrapping logic below is retained but
138
122
  // unreachable.
139
- // const signing = params.config?.signing
123
+ // const signing = params.signing
140
124
  const signing = { mode: 'background' } as const
141
125
  if (signing.mode === 'background') return
142
126
 
package/src/index.ts CHANGED
@@ -4,14 +4,15 @@
4
4
  */
5
5
 
6
6
  // Auth
7
- export { AuthFlow } from './auth'
7
+ export { ConnectWallet } from './auth'
8
8
  export { useAuth } from './auth/hooks/useAuth'
9
- export type { AuthMethod, AuthStep } from './auth/types'
9
+ export { SignUp } from './auth/pages/SignUp'
10
+ export type { AuthMethod, AuthStep, EmailAuthMethod } from './auth/types'
11
+ export type { WalletId } from './auth/walletGuide'
10
12
 
11
13
  // Connector
12
14
  export type {
13
15
  // SigningConfig,
14
- ZeroDevKitConfig,
15
16
  ZeroDevKitConnectorParams,
16
17
  } from './connector.js'
17
18
  export { zeroDevWallet } from './connector.js'
package/src/store.ts CHANGED
@@ -1,4 +1,3 @@
1
- import type { ReactNode } from 'react'
2
1
  import { create } from 'zustand'
3
2
  import { subscribeWithSelector } from 'zustand/middleware'
4
3
  import {
@@ -10,23 +9,17 @@ import type { PendingRequest } from './types.js'
10
9
  export type State = {
11
10
  pendingRequests: PendingRequest[]
12
11
  userConfirmationListenerActive: boolean
13
- logo: ReactNode | null
14
12
  addPendingRequest: (request: PendingRequest) => void
15
13
  removePendingRequest: (id: string) => void
16
14
  clearPendingRequests: () => void
17
15
  setUserConfirmationListenerActive: (active: boolean) => void
18
16
  } & AuthStoreSlice
19
17
 
20
- export type CreateStoreOptions = {
21
- logo?: ReactNode
22
- }
23
-
24
- export const createStore = (options: CreateStoreOptions = {}) =>
18
+ export const createStore = () =>
25
19
  create<State>()(
26
20
  subscribeWithSelector((set, get, store) => ({
27
21
  pendingRequests: [],
28
22
  userConfirmationListenerActive: false,
29
- logo: options.logo ?? null,
30
23
  addPendingRequest: (request) =>
31
24
  set((state) => ({
32
25
  pendingRequests: [...state.pendingRequests, request],
@@ -1,2 +0,0 @@
1
- export declare function SignUp(): import("react").JSX.Element;
2
- //# sourceMappingURL=SignUp.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SignUp.d.ts","sourceRoot":"","sources":["../../../../src/auth/pages/SignUp.tsx"],"names":[],"mappings":"AA+BA,wBAAgB,MAAM,gCAuRrB"}
@@ -1,2 +0,0 @@
1
- export declare function WalletSelection(): import("react").JSX.Element;
2
- //# sourceMappingURL=WalletSelection.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"WalletSelection.d.ts","sourceRoot":"","sources":["../../../../src/auth/pages/WalletSelection.tsx"],"names":[],"mappings":"AAIA,wBAAgB,eAAe,gCAwD9B"}
@@ -1,311 +0,0 @@
1
- import {
2
- Button,
3
- Icon,
4
- Input,
5
- ListItem,
6
- ListItemChevron,
7
- ListItemIcon,
8
- Text,
9
- } from '@zerodev/react-ui'
10
- import {
11
- useAuthenticateOAuth,
12
- useLoginPasskey,
13
- useRegisterPasskey,
14
- useSendMagicLink,
15
- useSendOTP,
16
- } from '@zerodev/wallet-react'
17
- import { useState } from 'react'
18
- import { SignUpFooter } from '../../shared/components/SignUpFooter'
19
- import { isValidEmailAddress } from '../../shared/utils/common'
20
- import { BlobAnimation } from '../components/BlobAnimation'
21
- import { useAuth } from '../hooks/useAuth'
22
-
23
- function isCancellationError(err: unknown): boolean {
24
- if (!(err instanceof Error)) return false
25
- // WebAuthn / passkey
26
- if (err.name === 'AbortError' || err.name === 'NotAllowedError') return true
27
- // OAuth (existing logic, message-based)
28
- const msg = err.message.toLowerCase()
29
- return msg.includes('oauth popup was closed')
30
- }
31
-
32
- export function SignUp() {
33
- const { goToStep, setEmail, setOtpSession, config, enabledMethods } =
34
- useAuth()
35
- const [agreedToTerms, setAgreedToTerms] = useState(false)
36
- const [highlightAgreement, setHighlightAgreement] = useState(false)
37
- const [emailInput, setEmailInput] = useState('')
38
- const shouldUseOtp = config?.emailAuthMethod === 'otp'
39
- const { mutateAsync: sendOtp, isPending: isSendOtpPending } = useSendOTP()
40
- const { mutateAsync: sendMagicLink, isPending: isSendMagicLinkPending } =
41
- useSendMagicLink()
42
- const isEmailLoading = isSendOtpPending || isSendMagicLinkPending
43
-
44
- const [error, setError] = useState<string | null>(null)
45
-
46
- const { mutateAsync: authenticateOAuth, isPending: isGoogleLoading } =
47
- useAuthenticateOAuth({
48
- mutation: {
49
- onSuccess: async () => {
50
- goToStep('authenticated')
51
- config?.onSuccess?.()
52
- },
53
- onError: (err) => {
54
- config?.onError?.(err)
55
- },
56
- },
57
- })
58
-
59
- const { mutate: registerPasskey, isPending: isRegisterPasskeyPending } =
60
- useRegisterPasskey({
61
- mutation: {
62
- onSuccess: () => {
63
- goToStep('authenticated')
64
- config?.onSuccess?.()
65
- },
66
- onError: (err) => {
67
- if (!isCancellationError(err)) {
68
- setError(err instanceof Error ? err.message : String(err))
69
- }
70
- config?.onError?.(err)
71
- },
72
- },
73
- })
74
-
75
- const { mutate: loginPasskey, isPending: isLoginPasskeyPending } =
76
- useLoginPasskey({
77
- mutation: {
78
- onSuccess: () => {
79
- goToStep('authenticated')
80
- config?.onSuccess?.()
81
- },
82
- onError: (err) => {
83
- if (!isCancellationError(err)) {
84
- setError(err instanceof Error ? err.message : String(err))
85
- }
86
- config?.onError?.(err)
87
- },
88
- },
89
- })
90
-
91
- const anyPending =
92
- isGoogleLoading ||
93
- isEmailLoading ||
94
- isRegisterPasskeyPending ||
95
- isLoginPasskeyPending
96
- const requiresAgreement = !!(
97
- config?.termsAndConditionsUrl || config?.privacyPolicyUrl
98
- )
99
- const needsToAcceptAgreement = requiresAgreement && !agreedToTerms
100
-
101
- const handleRegisterPasskey = () => {
102
- if (anyPending) return
103
- if (needsToAcceptAgreement) {
104
- setHighlightAgreement(true)
105
- return
106
- }
107
- setError(null)
108
- registerPasskey()
109
- }
110
-
111
- const handleLoginPasskey = () => {
112
- if (anyPending) return
113
- if (needsToAcceptAgreement) {
114
- setHighlightAgreement(true)
115
- return
116
- }
117
- setError(null)
118
- loginPasskey()
119
- }
120
-
121
- const handleGoogleAuth = async () => {
122
- if (needsToAcceptAgreement) {
123
- setHighlightAgreement(true)
124
- return
125
- }
126
- setError(null)
127
- try {
128
- await authenticateOAuth({ provider: 'google' })
129
- } catch (err) {
130
- const message = err instanceof Error ? err.message : String(err)
131
- if (!isCancellationError(err)) {
132
- setError(message)
133
- }
134
- }
135
- }
136
-
137
- const handleEmailOtp = async () => {
138
- if (!emailInput || anyPending) return
139
- if (!isValidEmailAddress(emailInput)) return
140
- if (needsToAcceptAgreement) {
141
- setHighlightAgreement(true)
142
- return
143
- }
144
-
145
- setError(null)
146
- try {
147
- const { otpId, otpEncryptionTargetBundle } = await sendOtp({
148
- email: emailInput,
149
- })
150
- setEmail(emailInput)
151
- setOtpSession({ otpId, otpEncryptionTargetBundle })
152
- goToStep('otp-input')
153
- } catch (err) {
154
- setError(
155
- err instanceof Error ? err.message : 'Failed to send verification code',
156
- )
157
- }
158
- }
159
-
160
- const handleEmailMagicLink = async () => {
161
- if (!emailInput || anyPending) return
162
- if (!isValidEmailAddress(emailInput)) return
163
- if (needsToAcceptAgreement) {
164
- setHighlightAgreement(true)
165
- return
166
- }
167
-
168
- setError(null)
169
- try {
170
- const { otpId, otpEncryptionTargetBundle } = await sendMagicLink({
171
- email: emailInput,
172
- })
173
- setEmail(emailInput)
174
- setOtpSession({ otpId, otpEncryptionTargetBundle })
175
- goToStep('email-verification')
176
- } catch (err) {
177
- setError(
178
- err instanceof Error ? err.message : 'Failed to send verification code',
179
- )
180
- }
181
- }
182
-
183
- const handleEmailSubmit = shouldUseOtp ? handleEmailOtp : handleEmailMagicLink
184
-
185
- if (error) {
186
- return (
187
- <div className="zd:flex zd:items-center zd:justify-center zd:h-full">
188
- <div className="zd:flex zd:flex-col zd:gap-4 zd:max-w-md">
189
- <Text className="zd:text-h2 zd:text-center">Error occurred</Text>
190
- <Text className="zd:text-center zd:text-red-500">{error}</Text>
191
- <Button
192
- action="primary"
193
- text="Try again"
194
- onClick={() => setError(null)}
195
- />
196
- </div>
197
- </div>
198
- )
199
- }
200
-
201
- return (
202
- <div className="zd:flex-1 zd:flex zd:flex-col zd:justify-between zd:pb-4 zd:overflow-y-auto zd:overflow-x-hidden">
203
- <div className="zd:flex-1 zd:flex zd:flex-col zd:justify-center">
204
- <div className="zd:px-4 zd:flex zd:flex-col zd:items-center">
205
- <div className="zd:w-full zd:px-16 zd:py-4">
206
- <BlobAnimation className="zd:w-full zd:pointer-events-none zd:select-none" />
207
- </div>
208
- <Text className="zd:text-h2 zd:text-center">
209
- Continue to your wallet
210
- </Text>
211
- <Text className="zd:mt-2 zd:text-center zd:text-greyScale/50">
212
- Choose a sign-in method to proceed
213
- </Text>
214
- </div>
215
- <div className="zd:mt-6 zd:flex zd:flex-col zd:gap-4 zd:mb-4">
216
- {enabledMethods.includes('passkey') && (
217
- <>
218
- <div className="zd:px-4 zd:flex zd:flex-col zd:gap-2">
219
- <Button
220
- action="secondary"
221
- text="Create a passkey"
222
- iconName="key"
223
- trailIcon
224
- disabled={anyPending}
225
- onClick={handleRegisterPasskey}
226
- />
227
- <Button
228
- action="secondary"
229
- text="Log in with passkey"
230
- iconName="key"
231
- trailIcon
232
- disabled={anyPending}
233
- onClick={handleLoginPasskey}
234
- />
235
- </div>
236
- <div className="zd:flex zd:items-center zd:gap-3">
237
- <div className="zd:h-px zd:flex-1 zd:bg-greyScale/30" />
238
- <Text className="zd:text-body3">or</Text>
239
- <div className="zd:h-px zd:flex-1 zd:bg-greyScale/30" />
240
- </div>
241
- </>
242
- )}
243
- <div className="zd:px-4 zd:flex zd:flex-col zd:gap-2">
244
- {enabledMethods.includes('google') && (
245
- <ListItem
246
- icon={<ListItemIcon name="google" />}
247
- title="Google"
248
- trailing={<ListItemChevron />}
249
- className="zd:rounded-3xl"
250
- disabled={anyPending}
251
- onClick={handleGoogleAuth}
252
- />
253
- )}
254
- {enabledMethods.includes('email') && (
255
- <Input
256
- iconName="email"
257
- placeholder="Enter your email"
258
- value={emailInput}
259
- onChange={(e) => setEmailInput(e.target.value)}
260
- type="email"
261
- autoCapitalize="none"
262
- autoComplete="email"
263
- disabled={anyPending}
264
- variant="listItemStyle"
265
- containerClassName="zd:rounded-3xl"
266
- onKeyDown={(e) => {
267
- if (e.key === 'Enter' && emailInput && !anyPending) {
268
- handleEmailSubmit()
269
- }
270
- }}
271
- >
272
- {isEmailLoading ? (
273
- <div className="zd:w-13 zd:h-13 zd:flex zd:items-center zd:justify-center">
274
- <div className="zd:w-5 zd:h-5 zd:border-2 zd:border-solarOrange zd:border-t-transparent zd:rounded-full zd:animate-spin" />
275
- </div>
276
- ) : (
277
- <button
278
- type="button"
279
- disabled={
280
- !isValidEmailAddress(emailInput) || needsToAcceptAgreement
281
- }
282
- className={`zd:w-13 zd:h-13 zd:rounded-2xl zd:flex zd:items-center zd:justify-center zd:transition-colors ${
283
- isValidEmailAddress(emailInput) && !needsToAcceptAgreement
284
- ? 'zd:cursor-pointer'
285
- : 'zd:cursor-not-allowed zd:opacity-50'
286
- }`}
287
- onClick={() => handleEmailSubmit()}
288
- >
289
- <Icon name="chevronRight" className="zd:text-greyScale" />
290
- </button>
291
- )}
292
- </Input>
293
- )}
294
- </div>
295
- </div>
296
- </div>
297
- <div className="zd:px-4">
298
- <SignUpFooter
299
- termsAndConditionsUrl={config?.termsAndConditionsUrl}
300
- privacyPolicyUrl={config?.privacyPolicyUrl}
301
- agreedToTerms={agreedToTerms}
302
- setAgreedToTerms={(agreed) => {
303
- setAgreedToTerms(agreed)
304
- if (agreed) setHighlightAgreement(false)
305
- }}
306
- highlight={highlightAgreement}
307
- />
308
- </div>
309
- </div>
310
- )
311
- }