thirdweb 5.56.0 → 5.57.0-nightly-cf1683c3feea6eb36ac6b902a1dd64c8ed8803c9-20240918000340

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 (263) hide show
  1. package/dist/cjs/contract/verification/index.js +29 -33
  2. package/dist/cjs/contract/verification/index.js.map +1 -1
  3. package/dist/cjs/react/core/utils/walletIcon.js +4 -1
  4. package/dist/cjs/react/core/utils/walletIcon.js.map +1 -1
  5. package/dist/cjs/react/native/ui/components/WalletImage.js +2 -0
  6. package/dist/cjs/react/native/ui/components/WalletImage.js.map +1 -1
  7. package/dist/cjs/react/native/ui/connect/InAppWalletUI.js +21 -1
  8. package/dist/cjs/react/native/ui/connect/InAppWalletUI.js.map +1 -1
  9. package/dist/cjs/react/native/ui/connect/TokenListScreen.js +2 -1
  10. package/dist/cjs/react/native/ui/connect/TokenListScreen.js.map +1 -1
  11. package/dist/cjs/react/native/ui/icons/svgs.js +2 -1
  12. package/dist/cjs/react/native/ui/icons/svgs.js.map +1 -1
  13. package/dist/cjs/react/web/ui/ConnectWallet/Details.js +15 -2
  14. package/dist/cjs/react/web/ui/ConnectWallet/Details.js.map +1 -1
  15. package/dist/cjs/react/web/ui/ConnectWallet/screens/SignatureScreen.js +12 -12
  16. package/dist/cjs/react/web/ui/ConnectWallet/screens/SignatureScreen.js.map +1 -1
  17. package/dist/cjs/react/web/ui/ConnectWallet/screens/TokenSelector.js +5 -5
  18. package/dist/cjs/react/web/ui/ConnectWallet/screens/TokenSelector.js.map +1 -1
  19. package/dist/cjs/react/web/ui/MediaRenderer/MediaRenderer.js +1 -1
  20. package/dist/cjs/react/web/ui/MediaRenderer/MediaRenderer.js.map +1 -1
  21. package/dist/cjs/react/web/wallets/ecosystem/EcosystemWalletHeader.js +3 -3
  22. package/dist/cjs/react/web/wallets/ecosystem/EcosystemWalletHeader.js.map +1 -1
  23. package/dist/cjs/react/web/wallets/in-app/InAppWalletConnectUI.js +4 -0
  24. package/dist/cjs/react/web/wallets/in-app/InAppWalletConnectUI.js.map +1 -1
  25. package/dist/cjs/react/web/wallets/shared/ConnectWalletSocialOptions.js +38 -19
  26. package/dist/cjs/react/web/wallets/shared/ConnectWalletSocialOptions.js.map +1 -1
  27. package/dist/cjs/react/web/wallets/shared/GuestLogin.js +81 -0
  28. package/dist/cjs/react/web/wallets/shared/GuestLogin.js.map +1 -0
  29. package/dist/cjs/react/web/wallets/shared/OTPLoginUI.js +1 -1
  30. package/dist/cjs/react/web/wallets/shared/OTPLoginUI.js.map +1 -1
  31. package/dist/cjs/react/web/wallets/shared/SocialLogin.js +1 -1
  32. package/dist/cjs/react/web/wallets/shared/SocialLogin.js.map +1 -1
  33. package/dist/cjs/react/web/wallets/shared/locale/de.js +2 -1
  34. package/dist/cjs/react/web/wallets/shared/locale/de.js.map +1 -1
  35. package/dist/cjs/react/web/wallets/shared/locale/en.js +1 -0
  36. package/dist/cjs/react/web/wallets/shared/locale/en.js.map +1 -1
  37. package/dist/cjs/react/web/wallets/shared/locale/es.js +2 -1
  38. package/dist/cjs/react/web/wallets/shared/locale/es.js.map +1 -1
  39. package/dist/cjs/react/web/wallets/shared/locale/fr.js +2 -1
  40. package/dist/cjs/react/web/wallets/shared/locale/fr.js.map +1 -1
  41. package/dist/cjs/react/web/wallets/shared/locale/ja.js +2 -1
  42. package/dist/cjs/react/web/wallets/shared/locale/ja.js.map +1 -1
  43. package/dist/cjs/react/web/wallets/shared/locale/kr.js +2 -1
  44. package/dist/cjs/react/web/wallets/shared/locale/kr.js.map +1 -1
  45. package/dist/cjs/react/web/wallets/shared/locale/tl.js +2 -1
  46. package/dist/cjs/react/web/wallets/shared/locale/tl.js.map +1 -1
  47. package/dist/cjs/react/web/wallets/shared/locale/vi.js +1 -0
  48. package/dist/cjs/react/web/wallets/shared/locale/vi.js.map +1 -1
  49. package/dist/cjs/react/web/wallets/shared/oauthSignIn.js +1 -0
  50. package/dist/cjs/react/web/wallets/shared/oauthSignIn.js.map +1 -1
  51. package/dist/cjs/utils/encoding/hex.js +1 -3
  52. package/dist/cjs/utils/encoding/hex.js.map +1 -1
  53. package/dist/cjs/utils/promise/p-limit.js.map +1 -1
  54. package/dist/cjs/utils/signatures/sign-message.js +2 -4
  55. package/dist/cjs/utils/signatures/sign-message.js.map +1 -1
  56. package/dist/cjs/version.js +1 -1
  57. package/dist/cjs/version.js.map +1 -1
  58. package/dist/cjs/wallets/in-app/core/authentication/guest.js +33 -0
  59. package/dist/cjs/wallets/in-app/core/authentication/guest.js.map +1 -0
  60. package/dist/cjs/wallets/in-app/core/authentication/types.js +1 -0
  61. package/dist/cjs/wallets/in-app/core/authentication/types.js.map +1 -1
  62. package/dist/cjs/wallets/in-app/native/auth/native-auth.js +25 -0
  63. package/dist/cjs/wallets/in-app/native/auth/native-auth.js.map +1 -1
  64. package/dist/cjs/wallets/in-app/native/helpers/api/fetchers.js +1 -3
  65. package/dist/cjs/wallets/in-app/native/helpers/api/fetchers.js.map +1 -1
  66. package/dist/cjs/wallets/in-app/native/helpers/wallet/sss.js.map +1 -1
  67. package/dist/cjs/wallets/in-app/native/native-connector.js +32 -0
  68. package/dist/cjs/wallets/in-app/native/native-connector.js.map +1 -1
  69. package/dist/cjs/wallets/in-app/web/in-app.js +13 -1
  70. package/dist/cjs/wallets/in-app/web/in-app.js.map +1 -1
  71. package/dist/cjs/wallets/in-app/web/lib/web-connector.js +8 -0
  72. package/dist/cjs/wallets/in-app/web/lib/web-connector.js.map +1 -1
  73. package/dist/cjs/wallets/manager/index.js +5 -0
  74. package/dist/cjs/wallets/manager/index.js.map +1 -1
  75. package/dist/cjs/wallets/types.js +1 -0
  76. package/dist/cjs/wallets/types.js.map +1 -1
  77. package/dist/cjs/wallets/wallet-connect/receiver/request-handlers/switch-chain.js +2 -4
  78. package/dist/cjs/wallets/wallet-connect/receiver/request-handlers/switch-chain.js.map +1 -1
  79. package/dist/esm/contract/verification/index.js +29 -33
  80. package/dist/esm/contract/verification/index.js.map +1 -1
  81. package/dist/esm/react/core/utils/walletIcon.js +3 -0
  82. package/dist/esm/react/core/utils/walletIcon.js.map +1 -1
  83. package/dist/esm/react/native/ui/components/WalletImage.js +3 -1
  84. package/dist/esm/react/native/ui/components/WalletImage.js.map +1 -1
  85. package/dist/esm/react/native/ui/connect/InAppWalletUI.js +21 -1
  86. package/dist/esm/react/native/ui/connect/InAppWalletUI.js.map +1 -1
  87. package/dist/esm/react/native/ui/connect/TokenListScreen.js +2 -1
  88. package/dist/esm/react/native/ui/connect/TokenListScreen.js.map +1 -1
  89. package/dist/esm/react/native/ui/icons/svgs.js +1 -0
  90. package/dist/esm/react/native/ui/icons/svgs.js.map +1 -1
  91. package/dist/esm/react/web/ui/ConnectWallet/Details.js +15 -2
  92. package/dist/esm/react/web/ui/ConnectWallet/Details.js.map +1 -1
  93. package/dist/esm/react/web/ui/ConnectWallet/screens/SignatureScreen.js +12 -12
  94. package/dist/esm/react/web/ui/ConnectWallet/screens/SignatureScreen.js.map +1 -1
  95. package/dist/esm/react/web/ui/ConnectWallet/screens/TokenSelector.js +6 -6
  96. package/dist/esm/react/web/ui/ConnectWallet/screens/TokenSelector.js.map +1 -1
  97. package/dist/esm/react/web/ui/MediaRenderer/MediaRenderer.js +1 -1
  98. package/dist/esm/react/web/ui/MediaRenderer/MediaRenderer.js.map +1 -1
  99. package/dist/esm/react/web/wallets/ecosystem/EcosystemWalletHeader.js +3 -3
  100. package/dist/esm/react/web/wallets/ecosystem/EcosystemWalletHeader.js.map +1 -1
  101. package/dist/esm/react/web/wallets/in-app/InAppWalletConnectUI.js +4 -0
  102. package/dist/esm/react/web/wallets/in-app/InAppWalletConnectUI.js.map +1 -1
  103. package/dist/esm/react/web/wallets/shared/ConnectWalletSocialOptions.js +38 -19
  104. package/dist/esm/react/web/wallets/shared/ConnectWalletSocialOptions.js.map +1 -1
  105. package/dist/esm/react/web/wallets/shared/GuestLogin.js +78 -0
  106. package/dist/esm/react/web/wallets/shared/GuestLogin.js.map +1 -0
  107. package/dist/esm/react/web/wallets/shared/OTPLoginUI.js +1 -1
  108. package/dist/esm/react/web/wallets/shared/OTPLoginUI.js.map +1 -1
  109. package/dist/esm/react/web/wallets/shared/SocialLogin.js +1 -1
  110. package/dist/esm/react/web/wallets/shared/SocialLogin.js.map +1 -1
  111. package/dist/esm/react/web/wallets/shared/locale/de.js +2 -1
  112. package/dist/esm/react/web/wallets/shared/locale/de.js.map +1 -1
  113. package/dist/esm/react/web/wallets/shared/locale/en.js +1 -0
  114. package/dist/esm/react/web/wallets/shared/locale/en.js.map +1 -1
  115. package/dist/esm/react/web/wallets/shared/locale/es.js +2 -1
  116. package/dist/esm/react/web/wallets/shared/locale/es.js.map +1 -1
  117. package/dist/esm/react/web/wallets/shared/locale/fr.js +2 -1
  118. package/dist/esm/react/web/wallets/shared/locale/fr.js.map +1 -1
  119. package/dist/esm/react/web/wallets/shared/locale/ja.js +2 -1
  120. package/dist/esm/react/web/wallets/shared/locale/ja.js.map +1 -1
  121. package/dist/esm/react/web/wallets/shared/locale/kr.js +2 -1
  122. package/dist/esm/react/web/wallets/shared/locale/kr.js.map +1 -1
  123. package/dist/esm/react/web/wallets/shared/locale/tl.js +2 -1
  124. package/dist/esm/react/web/wallets/shared/locale/tl.js.map +1 -1
  125. package/dist/esm/react/web/wallets/shared/locale/vi.js +1 -0
  126. package/dist/esm/react/web/wallets/shared/locale/vi.js.map +1 -1
  127. package/dist/esm/react/web/wallets/shared/oauthSignIn.js +1 -0
  128. package/dist/esm/react/web/wallets/shared/oauthSignIn.js.map +1 -1
  129. package/dist/esm/utils/encoding/hex.js +1 -3
  130. package/dist/esm/utils/encoding/hex.js.map +1 -1
  131. package/dist/esm/utils/promise/p-limit.js.map +1 -1
  132. package/dist/esm/utils/signatures/sign-message.js +2 -4
  133. package/dist/esm/utils/signatures/sign-message.js.map +1 -1
  134. package/dist/esm/version.js +1 -1
  135. package/dist/esm/version.js.map +1 -1
  136. package/dist/esm/wallets/in-app/core/authentication/guest.js +30 -0
  137. package/dist/esm/wallets/in-app/core/authentication/guest.js.map +1 -0
  138. package/dist/esm/wallets/in-app/core/authentication/types.js +1 -0
  139. package/dist/esm/wallets/in-app/core/authentication/types.js.map +1 -1
  140. package/dist/esm/wallets/in-app/native/auth/native-auth.js +24 -0
  141. package/dist/esm/wallets/in-app/native/auth/native-auth.js.map +1 -1
  142. package/dist/esm/wallets/in-app/native/helpers/api/fetchers.js +1 -3
  143. package/dist/esm/wallets/in-app/native/helpers/api/fetchers.js.map +1 -1
  144. package/dist/esm/wallets/in-app/native/helpers/wallet/sss.js.map +1 -1
  145. package/dist/esm/wallets/in-app/native/native-connector.js +33 -1
  146. package/dist/esm/wallets/in-app/native/native-connector.js.map +1 -1
  147. package/dist/esm/wallets/in-app/web/in-app.js +13 -1
  148. package/dist/esm/wallets/in-app/web/in-app.js.map +1 -1
  149. package/dist/esm/wallets/in-app/web/lib/web-connector.js +8 -0
  150. package/dist/esm/wallets/in-app/web/lib/web-connector.js.map +1 -1
  151. package/dist/esm/wallets/manager/index.js +5 -0
  152. package/dist/esm/wallets/manager/index.js.map +1 -1
  153. package/dist/esm/wallets/types.js +1 -0
  154. package/dist/esm/wallets/types.js.map +1 -1
  155. package/dist/esm/wallets/wallet-connect/receiver/request-handlers/switch-chain.js +2 -4
  156. package/dist/esm/wallets/wallet-connect/receiver/request-handlers/switch-chain.js.map +1 -1
  157. package/dist/types/contract/verification/index.d.ts.map +1 -1
  158. package/dist/types/react/core/utils/storage.d.ts +1 -1
  159. package/dist/types/react/core/utils/storage.d.ts.map +1 -1
  160. package/dist/types/react/core/utils/walletIcon.d.ts +2 -1
  161. package/dist/types/react/core/utils/walletIcon.d.ts.map +1 -1
  162. package/dist/types/react/native/ui/components/WalletImage.d.ts.map +1 -1
  163. package/dist/types/react/native/ui/connect/InAppWalletUI.d.ts.map +1 -1
  164. package/dist/types/react/native/ui/connect/TokenListScreen.d.ts.map +1 -1
  165. package/dist/types/react/native/ui/icons/svgs.d.ts +1 -0
  166. package/dist/types/react/native/ui/icons/svgs.d.ts.map +1 -1
  167. package/dist/types/react/web/ui/ConnectWallet/Details.d.ts.map +1 -1
  168. package/dist/types/react/web/ui/ConnectWallet/screens/TokenSelector.d.ts.map +1 -1
  169. package/dist/types/react/web/wallets/ecosystem/EcosystemWalletHeader.d.ts.map +1 -1
  170. package/dist/types/react/web/wallets/in-app/InAppWalletConnectUI.d.ts.map +1 -1
  171. package/dist/types/react/web/wallets/shared/ConnectWalletSocialOptions.d.ts +3 -0
  172. package/dist/types/react/web/wallets/shared/ConnectWalletSocialOptions.d.ts.map +1 -1
  173. package/dist/types/react/web/wallets/shared/GuestLogin.d.ts +19 -0
  174. package/dist/types/react/web/wallets/shared/GuestLogin.d.ts.map +1 -0
  175. package/dist/types/react/web/wallets/shared/OTPLoginUI.d.ts.map +1 -1
  176. package/dist/types/react/web/wallets/shared/locale/de.d.ts +1 -0
  177. package/dist/types/react/web/wallets/shared/locale/de.d.ts.map +1 -1
  178. package/dist/types/react/web/wallets/shared/locale/en.d.ts +1 -0
  179. package/dist/types/react/web/wallets/shared/locale/en.d.ts.map +1 -1
  180. package/dist/types/react/web/wallets/shared/locale/es.d.ts +1 -0
  181. package/dist/types/react/web/wallets/shared/locale/es.d.ts.map +1 -1
  182. package/dist/types/react/web/wallets/shared/locale/fr.d.ts +1 -0
  183. package/dist/types/react/web/wallets/shared/locale/fr.d.ts.map +1 -1
  184. package/dist/types/react/web/wallets/shared/locale/ja.d.ts +1 -0
  185. package/dist/types/react/web/wallets/shared/locale/ja.d.ts.map +1 -1
  186. package/dist/types/react/web/wallets/shared/locale/kr.d.ts +1 -0
  187. package/dist/types/react/web/wallets/shared/locale/kr.d.ts.map +1 -1
  188. package/dist/types/react/web/wallets/shared/locale/tl.d.ts +1 -0
  189. package/dist/types/react/web/wallets/shared/locale/tl.d.ts.map +1 -1
  190. package/dist/types/react/web/wallets/shared/locale/types.d.ts +1 -0
  191. package/dist/types/react/web/wallets/shared/locale/types.d.ts.map +1 -1
  192. package/dist/types/react/web/wallets/shared/locale/vi.d.ts +1 -0
  193. package/dist/types/react/web/wallets/shared/locale/vi.d.ts.map +1 -1
  194. package/dist/types/react/web/wallets/shared/oauthSignIn.d.ts.map +1 -1
  195. package/dist/types/utils/encoding/hex.d.ts.map +1 -1
  196. package/dist/types/utils/promise/p-limit.d.ts.map +1 -1
  197. package/dist/types/version.d.ts +1 -1
  198. package/dist/types/version.d.ts.map +1 -1
  199. package/dist/types/wallets/in-app/core/authentication/guest.d.ts +12 -0
  200. package/dist/types/wallets/in-app/core/authentication/guest.d.ts.map +1 -0
  201. package/dist/types/wallets/in-app/core/authentication/types.d.ts +8 -4
  202. package/dist/types/wallets/in-app/core/authentication/types.d.ts.map +1 -1
  203. package/dist/types/wallets/in-app/core/wallet/types.d.ts +2 -1
  204. package/dist/types/wallets/in-app/core/wallet/types.d.ts.map +1 -1
  205. package/dist/types/wallets/in-app/native/auth/native-auth.d.ts +4 -3
  206. package/dist/types/wallets/in-app/native/auth/native-auth.d.ts.map +1 -1
  207. package/dist/types/wallets/in-app/native/helpers/api/fetchers.d.ts.map +1 -1
  208. package/dist/types/wallets/in-app/native/helpers/wallet/sss.d.ts.map +1 -1
  209. package/dist/types/wallets/in-app/native/native-connector.d.ts +1 -0
  210. package/dist/types/wallets/in-app/native/native-connector.d.ts.map +1 -1
  211. package/dist/types/wallets/in-app/web/in-app.d.ts +13 -1
  212. package/dist/types/wallets/in-app/web/in-app.d.ts.map +1 -1
  213. package/dist/types/wallets/in-app/web/lib/auth/oauth.d.ts +3 -3
  214. package/dist/types/wallets/in-app/web/lib/auth/oauth.d.ts.map +1 -1
  215. package/dist/types/wallets/in-app/web/lib/web-connector.d.ts.map +1 -1
  216. package/dist/types/wallets/manager/index.d.ts.map +1 -1
  217. package/dist/types/wallets/types.d.ts +2 -1
  218. package/dist/types/wallets/types.d.ts.map +1 -1
  219. package/dist/types/wallets/wallet-connect/receiver/request-handlers/switch-chain.d.ts.map +1 -1
  220. package/package.json +10 -10
  221. package/src/contract/verification/index.ts +32 -34
  222. package/src/react/core/utils/walletIcon.ts +5 -0
  223. package/src/react/native/ui/components/WalletImage.tsx +3 -0
  224. package/src/react/native/ui/connect/InAppWalletUI.tsx +30 -0
  225. package/src/react/native/ui/connect/TokenListScreen.tsx +9 -12
  226. package/src/react/native/ui/icons/svgs.ts +2 -0
  227. package/src/react/web/ui/ConnectWallet/Details.tsx +15 -2
  228. package/src/react/web/ui/ConnectWallet/screens/SignatureScreen.tsx +36 -38
  229. package/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsx +34 -36
  230. package/src/react/web/ui/MediaRenderer/MediaRenderer.tsx +1 -1
  231. package/src/react/web/wallets/ecosystem/EcosystemWalletHeader.tsx +18 -20
  232. package/src/react/web/wallets/in-app/InAppWalletConnectUI.tsx +16 -0
  233. package/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx +128 -101
  234. package/src/react/web/wallets/shared/GuestLogin.tsx +159 -0
  235. package/src/react/web/wallets/shared/OTPLoginUI.tsx +3 -5
  236. package/src/react/web/wallets/shared/SocialLogin.tsx +1 -1
  237. package/src/react/web/wallets/shared/locale/de.ts +2 -1
  238. package/src/react/web/wallets/shared/locale/en.ts +1 -0
  239. package/src/react/web/wallets/shared/locale/es.ts +2 -1
  240. package/src/react/web/wallets/shared/locale/fr.ts +2 -1
  241. package/src/react/web/wallets/shared/locale/ja.ts +2 -1
  242. package/src/react/web/wallets/shared/locale/kr.ts +2 -1
  243. package/src/react/web/wallets/shared/locale/tl.ts +2 -1
  244. package/src/react/web/wallets/shared/locale/types.ts +1 -0
  245. package/src/react/web/wallets/shared/locale/vi.ts +1 -0
  246. package/src/react/web/wallets/shared/oauthSignIn.ts +6 -2
  247. package/src/utils/encoding/hex.ts +2 -3
  248. package/src/utils/promise/p-limit.ts +165 -165
  249. package/src/utils/signatures/sign-message.ts +3 -3
  250. package/src/version.ts +1 -1
  251. package/src/wallets/in-app/core/authentication/guest.ts +37 -0
  252. package/src/wallets/in-app/core/authentication/types.ts +9 -4
  253. package/src/wallets/in-app/core/wallet/types.ts +6 -1
  254. package/src/wallets/in-app/native/auth/native-auth.ts +34 -3
  255. package/src/wallets/in-app/native/helpers/api/fetchers.ts +1 -2
  256. package/src/wallets/in-app/native/helpers/wallet/sss.ts +1 -6
  257. package/src/wallets/in-app/native/native-connector.ts +42 -2
  258. package/src/wallets/in-app/web/in-app.ts +13 -1
  259. package/src/wallets/in-app/web/lib/auth/oauth.ts +3 -3
  260. package/src/wallets/in-app/web/lib/web-connector.ts +8 -0
  261. package/src/wallets/manager/index.ts +5 -0
  262. package/src/wallets/types.ts +2 -0
  263. package/src/wallets/wallet-connect/receiver/request-handlers/switch-chain.ts +2 -3
@@ -154,43 +154,41 @@ export function TokenSelector(props: {
154
154
  <Spacer y="md" />
155
155
 
156
156
  {props.chainSelection && (
157
- <>
158
- <Container px="lg">
159
- <Text size="sm">Select Network</Text>
160
- <Spacer y="xxs" />
161
- <SelectTokenBtn
162
- fullWidth
163
- variant="secondary"
164
- onClick={() => {
165
- setScreen("select-chain");
166
- }}
167
- >
168
- <ChainIcon
169
- chainIconUrl={chainIconQuery.url}
170
- size={iconSize.lg}
171
- client={props.client}
172
- />
157
+ <Container px="lg">
158
+ <Text size="sm">Select Network</Text>
159
+ <Spacer y="xxs" />
160
+ <SelectTokenBtn
161
+ fullWidth
162
+ variant="secondary"
163
+ onClick={() => {
164
+ setScreen("select-chain");
165
+ }}
166
+ >
167
+ <ChainIcon
168
+ chainIconUrl={chainIconQuery.url}
169
+ size={iconSize.lg}
170
+ client={props.client}
171
+ />
173
172
 
174
- {chainNameQuery.name ? (
175
- <Text color="primaryText" size="sm">
176
- {chainNameQuery.name}
177
- </Text>
178
- ) : (
179
- <Skeleton height={fontSize.md} />
180
- )}
181
-
182
- <ChevronDownIcon
183
- width={iconSize.sm}
184
- height={iconSize.sm}
185
- style={{
186
- marginLeft: "auto",
187
- }}
188
- />
189
- </SelectTokenBtn>
190
- <Spacer y="xl" />
191
- <Text size="sm">Select Token</Text>
192
- </Container>
193
- </>
173
+ {chainNameQuery.name ? (
174
+ <Text color="primaryText" size="sm">
175
+ {chainNameQuery.name}
176
+ </Text>
177
+ ) : (
178
+ <Skeleton height={fontSize.md} />
179
+ )}
180
+
181
+ <ChevronDownIcon
182
+ width={iconSize.sm}
183
+ height={iconSize.sm}
184
+ style={{
185
+ marginLeft: "auto",
186
+ }}
187
+ />
188
+ </SelectTokenBtn>
189
+ <Spacer y="xl" />
190
+ <Text size="sm">Select Token</Text>
191
+ </Container>
194
192
  )}
195
193
 
196
194
  <Container px="lg">
@@ -549,7 +549,7 @@ const IframePlayer = /* @__PURE__ */ (() =>
549
549
  <div style={{ position: "relative", ...style }} {...restProps}>
550
550
  <iframe
551
551
  title={alt || "thirdweb iframe player"}
552
- src={playing ? src ?? undefined : undefined}
552
+ src={playing ? (src ?? undefined) : undefined}
553
553
  ref={ref}
554
554
  style={{
555
555
  objectFit: "contain",
@@ -23,26 +23,24 @@ export function EcosystemWalletHeader(props: {
23
23
  <ModalHeader
24
24
  onBack={props.onBack}
25
25
  title={
26
- <>
27
- {walletInfo.isLoading ? (
28
- <Skeleton height="24px" width="200px" />
29
- ) : (
30
- <>
31
- {!walletInfo.data?.image_id ? null : (
32
- <Img
33
- src={walletInfo.data?.image_id}
34
- style={{
35
- borderRadius: radius.sm,
36
- }}
37
- width={iconSize.md}
38
- height={iconSize.md}
39
- client={props.client}
40
- />
41
- )}
42
- <ModalTitle>{walletInfo.data?.name}</ModalTitle>
43
- </>
44
- )}
45
- </>
26
+ walletInfo.isLoading ? (
27
+ <Skeleton height="24px" width="200px" />
28
+ ) : (
29
+ <>
30
+ {!walletInfo.data?.image_id ? null : (
31
+ <Img
32
+ src={walletInfo.data?.image_id}
33
+ style={{
34
+ borderRadius: radius.sm,
35
+ }}
36
+ width={iconSize.md}
37
+ height={iconSize.md}
38
+ client={props.client}
39
+ />
40
+ )}
41
+ <ModalTitle>{walletInfo.data?.name}</ModalTitle>
42
+ </>
43
+ )
46
44
  }
47
45
  leftAligned
48
46
  />
@@ -9,6 +9,7 @@ import {
9
9
  import { useScreenContext } from "../../ui/ConnectWallet/Modal/screen.js";
10
10
  import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
11
11
  import type { ConnectWalletSelectUIState } from "../shared/ConnectWalletSocialOptions.js";
12
+ import { GuestLogin } from "../shared/GuestLogin.js";
12
13
  import { LoadingScreen } from "../shared/LoadingScreen.js";
13
14
  import { OTPLoginUI } from "../shared/OTPLoginUI.js";
14
15
  import { PassKeyLogin } from "../shared/PassKeyLogin.js";
@@ -135,6 +136,21 @@ function InAppWalletConnectUI(props: {
135
136
  );
136
137
  }
137
138
 
139
+ if (state?.guestLogin) {
140
+ return (
141
+ <GuestLogin
142
+ locale={locale}
143
+ done={done}
144
+ goBack={goBackToMain}
145
+ wallet={props.wallet}
146
+ state={state}
147
+ client={props.client}
148
+ size={props.size}
149
+ connectLocale={props.connectLocale}
150
+ />
151
+ );
152
+ }
153
+
138
154
  return (
139
155
  <InAppWalletFormUIScreen
140
156
  select={() => {}}
@@ -53,6 +53,9 @@ export type ConnectWalletSelectUIState =
53
53
  type: SocialAuthOption;
54
54
  connectionPromise: Promise<Account | Profile[]>;
55
55
  };
56
+ guestLogin?: {
57
+ connectionPromise: Promise<Account | Profile[]>;
58
+ };
56
59
  passkeyLogin?: boolean;
57
60
  walletLogin?: boolean;
58
61
  };
@@ -124,8 +127,8 @@ export const ConnectWalletSocialOptions = (
124
127
  retry: false,
125
128
  });
126
129
  const authOptions = isEcosystemWallet(wallet)
127
- ? ecosystemAuthOptions ?? defaultAuthOptions
128
- : wallet.getConfig()?.auth?.options ?? defaultAuthOptions;
130
+ ? (ecosystemAuthOptions ?? defaultAuthOptions)
131
+ : (wallet.getConfig()?.auth?.options ?? defaultAuthOptions);
129
132
 
130
133
  const emailIndex = authOptions.indexOf("email");
131
134
  const isEmailEnabled = emailIndex !== -1;
@@ -157,6 +160,7 @@ export const ConnectWalletSocialOptions = (
157
160
  }
158
161
 
159
162
  const passKeyEnabled = authOptions.includes("passkey");
163
+ const guestEnabled = authOptions.includes("guest");
160
164
 
161
165
  const placeholder =
162
166
  inputMode === "email" ? locale.emailPlaceholder : locale.phonePlaceholder;
@@ -182,6 +186,27 @@ export const ConnectWalletSocialOptions = (
182
186
  }
183
187
  : undefined;
184
188
 
189
+ const handleGuestLogin = async () => {
190
+ const connectOptions = {
191
+ client: props.client,
192
+ ecosystem: ecosystemInfo,
193
+ strategy: "guest" as const,
194
+ };
195
+ const connectPromise = (async () => {
196
+ const result = await wallet.connect(connectOptions);
197
+ setLastAuthProvider("guest", webLocalStorage);
198
+ return result;
199
+ })();
200
+
201
+ setData({
202
+ guestLogin: {
203
+ connectionPromise: connectPromise,
204
+ },
205
+ });
206
+
207
+ props.select(); // show Connect UI
208
+ };
209
+
185
210
  // Need to trigger login on button click to avoid popup from being blocked
186
211
  const handleSocialLogin = async (strategy: SocialAuthOption) => {
187
212
  const walletConfig = wallet.getConfig();
@@ -227,11 +252,11 @@ export const ConnectWalletSocialOptions = (
227
252
  throw new Error("Only in-app wallets support multi-auth");
228
253
  }
229
254
  return linkProfile(wallet, connectOptions);
230
- } else {
231
- const connectPromise = wallet.connect(connectOptions);
232
- setLastAuthProvider(strategy, webLocalStorage);
233
- return connectPromise;
234
255
  }
256
+
257
+ const connectPromise = wallet.connect(connectOptions);
258
+ setLastAuthProvider(strategy, webLocalStorage);
259
+ return connectPromise;
235
260
  })();
236
261
 
237
262
  setData({
@@ -303,12 +328,11 @@ export const ConnectWalletSocialOptions = (
303
328
  const imgIconSize = (() => {
304
329
  if (!showOnlyIcons) {
305
330
  return iconSize.md;
306
- } else {
307
- if (socialLogins.length > 4) {
308
- return iconSize.md;
309
- }
310
- return iconSize.lg;
311
331
  }
332
+ if (socialLogins.length > 4) {
333
+ return iconSize.md;
334
+ }
335
+ return iconSize.lg;
312
336
  })();
313
337
 
314
338
  return (
@@ -341,108 +365,111 @@ export const ConnectWalletSocialOptions = (
341
365
  (isEmailEnabled || isPhoneEnabled) && <TextDivider text={locale.or} />}
342
366
 
343
367
  {/* Email/Phone Login */}
344
- {isEmailEnabled && (
345
- <>
346
- {inputMode === "email" ? (
347
- <InputSelectionUI
348
- type={type}
349
- onSelect={(value) => {
350
- setData({ emailLogin: value });
351
- props.select();
352
- }}
353
- placeholder={placeholder}
354
- name="email"
355
- errorMessage={(input) => {
356
- const isValidEmail = validateEmail(input.toLowerCase());
357
- if (!isValidEmail) {
358
- return locale.invalidEmail;
359
- }
360
- return undefined;
361
- }}
362
- disabled={props.disabled}
363
- emptyErrorMessage={emptyErrorMessage}
364
- submitButtonText={locale.submitEmail}
365
- />
366
- ) : (
367
- <WalletTypeRowButton
368
- client={props.client}
369
- icon={emailIcon}
370
- onClick={() => {
371
- setManualInputMode("email");
372
- }}
373
- title={locale.emailPlaceholder}
374
- disabled={props.disabled}
375
- />
376
- )}
377
- </>
378
- )}
379
- {isPhoneEnabled && (
380
- <>
381
- {inputMode === "phone" ? (
382
- <InputSelectionUI
383
- format="phone"
384
- type={type}
385
- onSelect={(value) => {
386
- // removes white spaces and special characters
387
- setData({ phoneLogin: value.replace(/[-\(\) ]/g, "") });
388
- props.select();
389
- }}
390
- placeholder={placeholder}
391
- name="phone"
392
- errorMessage={(_input) => {
393
- // removes white spaces and special characters
394
- const input = _input.replace(/[-\(\) ]/g, "");
395
- const isPhone = /^[0-9]+$/.test(input);
396
-
397
- if (!isPhone && isPhoneEnabled) {
398
- return locale.invalidPhone;
399
- }
400
-
401
- return undefined;
402
- }}
403
- disabled={props.disabled}
404
- emptyErrorMessage={emptyErrorMessage}
405
- submitButtonText={locale.submitEmail}
406
- />
407
- ) : (
408
- <WalletTypeRowButton
409
- client={props.client}
410
- icon={phoneIcon}
411
- onClick={() => {
412
- setManualInputMode("phone");
413
- }}
414
- title={locale.phonePlaceholder}
415
- disabled={props.disabled}
416
- />
417
- )}
418
- </>
419
- )}
420
-
421
- {passKeyEnabled && (
422
- <>
368
+ {isEmailEnabled &&
369
+ (inputMode === "email" ? (
370
+ <InputSelectionUI
371
+ type={type}
372
+ onSelect={(value) => {
373
+ setData({ emailLogin: value });
374
+ props.select();
375
+ }}
376
+ placeholder={placeholder}
377
+ name="email"
378
+ errorMessage={(input) => {
379
+ const isValidEmail = validateEmail(input.toLowerCase());
380
+ if (!isValidEmail) {
381
+ return locale.invalidEmail;
382
+ }
383
+ return undefined;
384
+ }}
385
+ disabled={props.disabled}
386
+ emptyErrorMessage={emptyErrorMessage}
387
+ submitButtonText={locale.submitEmail}
388
+ />
389
+ ) : (
423
390
  <WalletTypeRowButton
424
391
  client={props.client}
425
- icon={passkeyIcon}
392
+ icon={emailIcon}
426
393
  onClick={() => {
427
- handlePassKeyLogin();
394
+ setManualInputMode("email");
428
395
  }}
429
- title={locale.passkey}
396
+ title={locale.emailPlaceholder}
430
397
  disabled={props.disabled}
431
398
  />
432
- </>
433
- )}
399
+ ))}
400
+ {isPhoneEnabled &&
401
+ (inputMode === "phone" ? (
402
+ <InputSelectionUI
403
+ format="phone"
404
+ type={type}
405
+ onSelect={(value) => {
406
+ // removes white spaces and special characters
407
+ setData({ phoneLogin: value.replace(/[-\(\) ]/g, "") });
408
+ props.select();
409
+ }}
410
+ placeholder={placeholder}
411
+ name="phone"
412
+ errorMessage={(_input) => {
413
+ // removes white spaces and special characters
414
+ const input = _input.replace(/[-\(\) ]/g, "");
415
+ const isPhone = /^[0-9]+$/.test(input);
416
+
417
+ if (!isPhone && isPhoneEnabled) {
418
+ return locale.invalidPhone;
419
+ }
434
420
 
435
- {props.isLinking && (
436
- <>
421
+ return undefined;
422
+ }}
423
+ disabled={props.disabled}
424
+ emptyErrorMessage={emptyErrorMessage}
425
+ submitButtonText={locale.submitEmail}
426
+ />
427
+ ) : (
437
428
  <WalletTypeRowButton
438
429
  client={props.client}
439
- icon={getWalletIcon("")}
430
+ icon={phoneIcon}
440
431
  onClick={() => {
441
- handleWalletLogin();
432
+ setManualInputMode("phone");
442
433
  }}
443
- title={locale.linkWallet}
434
+ title={locale.phonePlaceholder}
435
+ disabled={props.disabled}
444
436
  />
445
- </>
437
+ ))}
438
+
439
+ {passKeyEnabled && (
440
+ <WalletTypeRowButton
441
+ client={props.client}
442
+ icon={passkeyIcon}
443
+ onClick={() => {
444
+ handlePassKeyLogin();
445
+ }}
446
+ title={locale.passkey}
447
+ disabled={props.disabled}
448
+ />
449
+ )}
450
+
451
+ {/* Guest login */}
452
+ {guestEnabled && (
453
+ <WalletTypeRowButton
454
+ client={props.client}
455
+ icon={getWalletIcon("guest")}
456
+ onClick={() => {
457
+ handleGuestLogin();
458
+ }}
459
+ title={locale.loginAsGuest}
460
+ disabled={props.disabled}
461
+ />
462
+ )}
463
+
464
+ {props.isLinking && (
465
+ <WalletTypeRowButton
466
+ client={props.client}
467
+ icon={getWalletIcon("")}
468
+ onClick={() => {
469
+ handleWalletLogin();
470
+ }}
471
+ title={locale.linkWallet}
472
+ />
446
473
  )}
447
474
  </Container>
448
475
  );
@@ -0,0 +1,159 @@
1
+ "use client";
2
+ import { useEffect, useRef, useState } from "react";
3
+ import type { ThirdwebClient } from "../../../../client/client.js";
4
+ import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
5
+ import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
6
+ import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
7
+ import { setLastAuthProvider } from "../../../core/utils/storage.js";
8
+ import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
9
+ import { Spacer } from "../../ui/components/Spacer.js";
10
+ import { Spinner } from "../../ui/components/Spinner.js";
11
+ import { Container, ModalHeader } from "../../ui/components/basic.js";
12
+ import { Button } from "../../ui/components/buttons.js";
13
+ import { Text } from "../../ui/components/text.js";
14
+ import type { ConnectWalletSelectUIState } from "./ConnectWalletSocialOptions.js";
15
+ import type { InAppWalletLocale } from "./locale/types.js";
16
+
17
+ /**
18
+ * @internal
19
+ */
20
+ export function GuestLogin(props: {
21
+ locale: InAppWalletLocale;
22
+ wallet: Wallet;
23
+ done: () => void;
24
+ goBack?: () => void;
25
+ state: ConnectWalletSelectUIState;
26
+ size: "compact" | "wide";
27
+ client: ThirdwebClient;
28
+ connectLocale: ConnectLocale;
29
+ }) {
30
+ const ewLocale = props.locale;
31
+ const locale = ewLocale.socialLoginScreen;
32
+
33
+ const [authError, setAuthError] = useState<string | undefined>(undefined);
34
+ const { done, wallet } = props;
35
+ const [status, setStatus] = useState<"connecting" | "connected" | "error">(
36
+ "connecting",
37
+ );
38
+
39
+ const handleGuestLogin = async () => {
40
+ const connectOptions = {
41
+ client: props.client,
42
+ ecosystem: isEcosystemWallet(wallet)
43
+ ? {
44
+ id: wallet.id,
45
+ partnerId: wallet.getConfig()?.partnerId,
46
+ }
47
+ : undefined,
48
+ strategy: "guest" as const,
49
+ };
50
+ try {
51
+ await wallet.connect(connectOptions);
52
+ await setLastAuthProvider("guest", webLocalStorage);
53
+
54
+ setStatus("connected");
55
+ done();
56
+ } catch (e) {
57
+ setStatus("error");
58
+ // TODO this only happens on 'retry' button click, not on initial login
59
+ // should pass auth error message to this component
60
+ if (
61
+ e instanceof Error &&
62
+ e?.message?.includes("PAYMENT_METHOD_REQUIRED")
63
+ ) {
64
+ setAuthError(ewLocale.maxAccountsExceeded);
65
+ }
66
+ console.error("Error generating guest account", e);
67
+ }
68
+ };
69
+
70
+ const guestLogin = props.state?.guestLogin;
71
+
72
+ const socialLoginStarted = useRef(false);
73
+ useEffect(() => {
74
+ if (socialLoginStarted.current) {
75
+ return;
76
+ }
77
+
78
+ if (guestLogin) {
79
+ socialLoginStarted.current = true;
80
+ setStatus("connecting");
81
+ guestLogin.connectionPromise
82
+ .then(() => {
83
+ done();
84
+ setStatus("connected");
85
+ })
86
+ .catch((e) => {
87
+ setAuthError(e.message);
88
+ setStatus("error");
89
+ });
90
+ }
91
+ }, [done, guestLogin]);
92
+
93
+ return (
94
+ <Container animate="fadein" flex="column" fullHeight>
95
+ <Container
96
+ flex="column"
97
+ expand
98
+ p="lg"
99
+ style={{
100
+ paddingBottom: 0,
101
+ }}
102
+ >
103
+ {props.goBack && (
104
+ <ModalHeader title={locale.title} onBack={props.goBack} />
105
+ )}
106
+
107
+ {props.size === "compact" ? <Spacer y="xl" /> : null}
108
+
109
+ <Container
110
+ flex="column"
111
+ center="both"
112
+ expand
113
+ style={{
114
+ textAlign: "center",
115
+ minHeight: "250px",
116
+ }}
117
+ >
118
+ {status !== "error" && (
119
+ <Container animate="fadein">
120
+ <Text
121
+ color="primaryText"
122
+ center
123
+ multiline
124
+ style={{
125
+ maxWidth: "250px",
126
+ }}
127
+ >
128
+ Generating your guest account
129
+ </Text>
130
+ <Spacer y="xl" />
131
+ <Container center="x" flex="row">
132
+ <Spinner size="lg" color="accentText" />
133
+ </Container>
134
+
135
+ <Spacer y="xxl" />
136
+ </Container>
137
+ )}
138
+
139
+ {status === "error" && (
140
+ <Container animate="fadein">
141
+ {authError ? (
142
+ <Text center color="danger">
143
+ {authError}
144
+ </Text>
145
+ ) : (
146
+ <Text color="danger">{locale.failed}</Text>
147
+ )}
148
+ <Spacer y="lg" />
149
+ <Button variant="primary" onClick={handleGuestLogin}>
150
+ {locale.retry}
151
+ </Button>
152
+ <Spacer y="xxl" />
153
+ </Container>
154
+ )}
155
+ </Container>
156
+ </Container>
157
+ </Container>
158
+ );
159
+ }
@@ -280,11 +280,9 @@ export function OTPLoginUI(props: {
280
280
 
281
281
  <Container p={isWideModal ? undefined : "lg"}>
282
282
  {accountStatus === "error" && (
283
- <>
284
- <Text size="sm" center color="danger">
285
- {locale.emailLoginScreen.failedToSendCode}
286
- </Text>
287
- </>
283
+ <Text size="sm" center color="danger">
284
+ {locale.emailLoginScreen.failedToSendCode}
285
+ </Text>
288
286
  )}
289
287
 
290
288
  {accountStatus === "sending" && (
@@ -50,7 +50,7 @@ export function SocialLogin(props: {
50
50
  const walletConfig = wallet.getConfig();
51
51
  const authMode =
52
52
  walletConfig && "auth" in walletConfig
53
- ? walletConfig?.auth?.mode ?? "popup"
53
+ ? (walletConfig?.auth?.mode ?? "popup")
54
54
  : "popup";
55
55
 
56
56
  if (
@@ -56,5 +56,6 @@ export default {
56
56
  signInWithPhone: "Mit Telefonnummer anmelden",
57
57
  phoneRequired: "Telefonnummer ist erforderlich",
58
58
  passkey: "Passkey",
59
- linkWallet: "Link a Wallet",
59
+ linkWallet: "Verknüpfen Sie eine Brieftasche",
60
+ loginAsGuest: "Melden Sie sich als Gast an",
60
61
  } satisfies InAppWalletLocale;
@@ -56,4 +56,5 @@ export default {
56
56
  phoneRequired: "Phone number is required",
57
57
  passkey: "Passkey",
58
58
  linkWallet: "Link a Wallet",
59
+ loginAsGuest: "Continue as guest",
59
60
  } satisfies InAppWalletLocale;
@@ -55,5 +55,6 @@ export default {
55
55
  phoneRequired: "Se requiere número de teléfono",
56
56
  signInWithEmail: "Iniciar sesión con correo electrónico",
57
57
  passkey: "Clave de acceso",
58
- linkWallet: "Link a Wallet",
58
+ linkWallet: "Vincular una billetera",
59
+ loginAsGuest: "Inicia sesión como invitado",
59
60
  } satisfies InAppWalletLocale;
@@ -56,5 +56,6 @@ export default {
56
56
  signInWithPhone: "Se connecter avec le numéro de téléphone",
57
57
  phoneRequired: "Le numéro de téléphone est requis",
58
58
  passkey: "Passkey",
59
- linkWallet: "Link a Wallet",
59
+ linkWallet: "Lier un portefeuille",
60
+ loginAsGuest: "Connectez-vous en tant qu'invité",
60
61
  } satisfies InAppWalletLocale;