@b3dotfun/sdk 0.0.35 → 0.0.36

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 (160) hide show
  1. package/dist/cjs/anyspend/react/components/AnySpend.js +5 -3
  2. package/dist/cjs/anyspend/react/components/AnyspendDepositHype.js +2 -2
  3. package/dist/cjs/anyspend/react/components/common/ConnectWalletPayment.d.ts +3 -1
  4. package/dist/cjs/anyspend/react/components/common/ConnectWalletPayment.js +5 -2
  5. package/dist/cjs/anyspend/react/components/common/CryptoPaySection.d.ts +16 -0
  6. package/dist/cjs/anyspend/react/components/common/CryptoPaySection.js +58 -0
  7. package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethod.d.ts +1 -0
  8. package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethod.js +22 -15
  9. package/dist/cjs/anyspend/react/components/common/OrderDetails.js +12 -4
  10. package/dist/cjs/anyspend/react/components/common/PaySection.d.ts +2 -6
  11. package/dist/cjs/anyspend/react/components/common/PaySection.js +10 -15
  12. package/dist/cjs/anyspend/react/components/index.d.ts +2 -2
  13. package/dist/cjs/anyspend/react/components/index.js +5 -5
  14. package/dist/cjs/global-account/bsmnt.d.ts +2 -0
  15. package/dist/cjs/global-account/bsmnt.js +42 -1
  16. package/dist/cjs/global-account/react/components/AvatarCreator/AvatarCreator.d.ts +6 -0
  17. package/dist/cjs/global-account/react/components/AvatarCreator/AvatarCreator.js +55 -0
  18. package/dist/cjs/global-account/react/components/AvatarEditor/AvatarEditor.d.ts +6 -0
  19. package/dist/cjs/global-account/react/components/AvatarEditor/AvatarEditor.js +108 -0
  20. package/dist/cjs/global-account/react/components/B3DynamicModal.js +9 -1
  21. package/dist/cjs/global-account/react/components/LinkAccount/LinkAccount.d.ts +3 -1
  22. package/dist/cjs/global-account/react/components/LinkAccount/LinkAccount.js +21 -11
  23. package/dist/cjs/global-account/react/components/ManageAccount/BalanceContent.d.ts +3 -1
  24. package/dist/cjs/global-account/react/components/ManageAccount/BalanceContent.js +19 -5
  25. package/dist/cjs/global-account/react/components/ManageAccount/ManageAccount.d.ts +3 -1
  26. package/dist/cjs/global-account/react/components/ManageAccount/ManageAccount.js +6 -6
  27. package/dist/cjs/global-account/react/components/SignInWithB3/SignInWithB3.js +2 -2
  28. package/dist/cjs/global-account/react/components/SignInWithB3/SignInWithB3Flow.js +1 -13
  29. package/dist/cjs/global-account/react/components/SignInWithB3/SignInWithB3Privy.js +1 -3
  30. package/dist/cjs/global-account/react/components/SignInWithB3/steps/LoginStep.js +0 -3
  31. package/dist/cjs/global-account/react/components/SignInWithB3/steps/LoginStepCustom.js +0 -3
  32. package/dist/cjs/global-account/react/components/icons/AppleIcon.d.ts +9 -0
  33. package/dist/cjs/global-account/react/components/icons/AppleIcon.js +8 -0
  34. package/dist/cjs/global-account/react/components/icons/DiscordIcon.d.ts +9 -0
  35. package/dist/cjs/global-account/react/components/icons/DiscordIcon.js +8 -0
  36. package/dist/cjs/global-account/react/components/icons/FarcasterIcon.d.ts +9 -0
  37. package/dist/cjs/global-account/react/components/icons/FarcasterIcon.js +8 -0
  38. package/dist/cjs/global-account/react/components/icons/GoogleIcon.d.ts +8 -0
  39. package/dist/cjs/global-account/react/components/icons/GoogleIcon.js +8 -0
  40. package/dist/cjs/global-account/react/components/icons/XIcon.d.ts +9 -0
  41. package/dist/cjs/global-account/react/components/icons/XIcon.js +8 -0
  42. package/dist/cjs/global-account/react/hooks/useAccountWallet.js +3 -2
  43. package/dist/cjs/global-account/react/hooks/useAuthentication.d.ts +1 -2
  44. package/dist/cjs/global-account/react/hooks/useAuthentication.js +16 -15
  45. package/dist/cjs/global-account/react/hooks/useProfile.d.ts +1 -1
  46. package/dist/cjs/global-account/react/hooks/useRPMToken.d.ts +7 -0
  47. package/dist/cjs/global-account/react/hooks/useRPMToken.js +11 -0
  48. package/dist/cjs/global-account/react/stores/useAuthStore.d.ts +2 -4
  49. package/dist/cjs/global-account/react/stores/useAuthStore.js +2 -4
  50. package/dist/cjs/global-account/react/stores/useModalStore.d.ts +11 -1
  51. package/dist/cjs/global-account/react/utils/updateAvatar.d.ts +4 -0
  52. package/dist/cjs/global-account/react/utils/updateAvatar.js +54 -0
  53. package/dist/esm/anyspend/react/components/AnySpend.js +5 -3
  54. package/dist/esm/anyspend/react/components/AnyspendDepositHype.js +2 -2
  55. package/dist/esm/anyspend/react/components/common/ConnectWalletPayment.d.ts +3 -1
  56. package/dist/esm/anyspend/react/components/common/ConnectWalletPayment.js +5 -2
  57. package/dist/esm/anyspend/react/components/common/CryptoPaySection.d.ts +16 -0
  58. package/dist/esm/anyspend/react/components/common/CryptoPaySection.js +55 -0
  59. package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.d.ts +1 -0
  60. package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.js +22 -15
  61. package/dist/esm/anyspend/react/components/common/OrderDetails.js +12 -4
  62. package/dist/esm/anyspend/react/components/common/PaySection.d.ts +2 -6
  63. package/dist/esm/anyspend/react/components/common/PaySection.js +10 -15
  64. package/dist/esm/anyspend/react/components/index.d.ts +2 -2
  65. package/dist/esm/anyspend/react/components/index.js +2 -2
  66. package/dist/esm/global-account/bsmnt.d.ts +2 -0
  67. package/dist/esm/global-account/bsmnt.js +39 -0
  68. package/dist/esm/global-account/react/components/AvatarCreator/AvatarCreator.d.ts +6 -0
  69. package/dist/esm/global-account/react/components/AvatarCreator/AvatarCreator.js +52 -0
  70. package/dist/esm/global-account/react/components/AvatarEditor/AvatarEditor.d.ts +6 -0
  71. package/dist/esm/global-account/react/components/AvatarEditor/AvatarEditor.js +102 -0
  72. package/dist/esm/global-account/react/components/B3DynamicModal.js +9 -1
  73. package/dist/esm/global-account/react/components/LinkAccount/LinkAccount.d.ts +3 -1
  74. package/dist/esm/global-account/react/components/LinkAccount/LinkAccount.js +22 -12
  75. package/dist/esm/global-account/react/components/ManageAccount/BalanceContent.d.ts +3 -1
  76. package/dist/esm/global-account/react/components/ManageAccount/BalanceContent.js +20 -6
  77. package/dist/esm/global-account/react/components/ManageAccount/ManageAccount.d.ts +3 -1
  78. package/dist/esm/global-account/react/components/ManageAccount/ManageAccount.js +6 -6
  79. package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3.js +2 -2
  80. package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Flow.js +1 -13
  81. package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Privy.js +1 -3
  82. package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStep.js +0 -3
  83. package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStepCustom.js +0 -3
  84. package/dist/esm/global-account/react/components/icons/AppleIcon.d.ts +9 -0
  85. package/dist/esm/global-account/react/components/icons/AppleIcon.js +5 -0
  86. package/dist/esm/global-account/react/components/icons/DiscordIcon.d.ts +9 -0
  87. package/dist/esm/global-account/react/components/icons/DiscordIcon.js +5 -0
  88. package/dist/esm/global-account/react/components/icons/FarcasterIcon.d.ts +9 -0
  89. package/dist/esm/global-account/react/components/icons/FarcasterIcon.js +5 -0
  90. package/dist/esm/global-account/react/components/icons/GoogleIcon.d.ts +8 -0
  91. package/dist/esm/global-account/react/components/icons/GoogleIcon.js +5 -0
  92. package/dist/esm/global-account/react/components/icons/XIcon.d.ts +9 -0
  93. package/dist/esm/global-account/react/components/icons/XIcon.js +5 -0
  94. package/dist/esm/global-account/react/hooks/useAccountWallet.js +3 -2
  95. package/dist/esm/global-account/react/hooks/useAuthentication.d.ts +1 -2
  96. package/dist/esm/global-account/react/hooks/useAuthentication.js +16 -15
  97. package/dist/esm/global-account/react/hooks/useProfile.d.ts +1 -1
  98. package/dist/esm/global-account/react/hooks/useRPMToken.d.ts +7 -0
  99. package/dist/esm/global-account/react/hooks/useRPMToken.js +8 -0
  100. package/dist/esm/global-account/react/stores/useAuthStore.d.ts +2 -4
  101. package/dist/esm/global-account/react/stores/useAuthStore.js +2 -4
  102. package/dist/esm/global-account/react/stores/useModalStore.d.ts +11 -1
  103. package/dist/esm/global-account/react/utils/updateAvatar.d.ts +4 -0
  104. package/dist/esm/global-account/react/utils/updateAvatar.js +18 -0
  105. package/dist/styles/index.css +1 -1
  106. package/dist/types/anyspend/react/components/common/ConnectWalletPayment.d.ts +3 -1
  107. package/dist/types/anyspend/react/components/common/CryptoPaySection.d.ts +16 -0
  108. package/dist/types/anyspend/react/components/common/CryptoPaymentMethod.d.ts +1 -0
  109. package/dist/types/anyspend/react/components/common/PaySection.d.ts +2 -6
  110. package/dist/types/anyspend/react/components/index.d.ts +2 -2
  111. package/dist/types/global-account/bsmnt.d.ts +2 -0
  112. package/dist/types/global-account/react/components/AvatarCreator/AvatarCreator.d.ts +6 -0
  113. package/dist/types/global-account/react/components/AvatarEditor/AvatarEditor.d.ts +6 -0
  114. package/dist/types/global-account/react/components/LinkAccount/LinkAccount.d.ts +3 -1
  115. package/dist/types/global-account/react/components/ManageAccount/BalanceContent.d.ts +3 -1
  116. package/dist/types/global-account/react/components/ManageAccount/ManageAccount.d.ts +3 -1
  117. package/dist/types/global-account/react/components/icons/AppleIcon.d.ts +9 -0
  118. package/dist/types/global-account/react/components/icons/DiscordIcon.d.ts +9 -0
  119. package/dist/types/global-account/react/components/icons/FarcasterIcon.d.ts +9 -0
  120. package/dist/types/global-account/react/components/icons/GoogleIcon.d.ts +8 -0
  121. package/dist/types/global-account/react/components/icons/XIcon.d.ts +9 -0
  122. package/dist/types/global-account/react/hooks/useAuthentication.d.ts +1 -2
  123. package/dist/types/global-account/react/hooks/useProfile.d.ts +1 -1
  124. package/dist/types/global-account/react/hooks/useRPMToken.d.ts +7 -0
  125. package/dist/types/global-account/react/stores/useAuthStore.d.ts +2 -4
  126. package/dist/types/global-account/react/stores/useModalStore.d.ts +11 -1
  127. package/dist/types/global-account/react/utils/updateAvatar.d.ts +4 -0
  128. package/package.json +8 -7
  129. package/src/anyspend/react/components/AnySpend.tsx +7 -6
  130. package/src/anyspend/react/components/AnyspendDepositHype.tsx +2 -5
  131. package/src/anyspend/react/components/common/ConnectWalletPayment.tsx +6 -1
  132. package/src/anyspend/react/components/common/CryptoPaySection.tsx +153 -0
  133. package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx +80 -43
  134. package/src/anyspend/react/components/common/OrderDetails.tsx +13 -4
  135. package/src/anyspend/react/components/common/PaySection.tsx +64 -140
  136. package/src/anyspend/react/components/index.ts +2 -2
  137. package/src/global-account/bsmnt.ts +47 -0
  138. package/src/global-account/react/components/AvatarCreator/AvatarCreator.tsx +90 -0
  139. package/src/global-account/react/components/AvatarEditor/AvatarEditor.tsx +233 -0
  140. package/src/global-account/react/components/B3DynamicModal.tsx +27 -2
  141. package/src/global-account/react/components/LinkAccount/LinkAccount.tsx +40 -18
  142. package/src/global-account/react/components/ManageAccount/BalanceContent.tsx +63 -35
  143. package/src/global-account/react/components/ManageAccount/ManageAccount.tsx +106 -78
  144. package/src/global-account/react/components/SignInWithB3/SignInWithB3.tsx +2 -2
  145. package/src/global-account/react/components/SignInWithB3/SignInWithB3Flow.tsx +1 -13
  146. package/src/global-account/react/components/SignInWithB3/SignInWithB3Privy.tsx +1 -3
  147. package/src/global-account/react/components/SignInWithB3/steps/LoginStep.tsx +0 -3
  148. package/src/global-account/react/components/SignInWithB3/steps/LoginStepCustom.tsx +0 -3
  149. package/src/global-account/react/components/icons/AppleIcon.tsx +33 -0
  150. package/src/global-account/react/components/icons/DiscordIcon.tsx +32 -0
  151. package/src/global-account/react/components/icons/FarcasterIcon.tsx +37 -0
  152. package/src/global-account/react/components/icons/GoogleIcon.tsx +40 -0
  153. package/src/global-account/react/components/icons/XIcon.tsx +28 -0
  154. package/src/global-account/react/hooks/useAccountWallet.tsx +3 -2
  155. package/src/global-account/react/hooks/useAuthentication.ts +18 -15
  156. package/src/global-account/react/hooks/useProfile.ts +1 -1
  157. package/src/global-account/react/hooks/useRPMToken.ts +17 -0
  158. package/src/global-account/react/stores/useAuthStore.ts +4 -8
  159. package/src/global-account/react/stores/useModalStore.ts +13 -1
  160. package/src/global-account/react/utils/updateAvatar.ts +21 -0
@@ -4,6 +4,7 @@ import { AnySpendDepositHype } from "../../../anyspend/react/components/Anyspend
4
4
  import { useIsMobile, useModalStore } from "../../../global-account/react/index.js";
5
5
  import { cn } from "../../../shared/utils/cn.js";
6
6
  import { debugB3React } from "../../../shared/utils/debug.js";
7
+ import { AvatarEditor } from "./AvatarEditor/AvatarEditor.js";
7
8
  import { useB3 } from "./B3Provider/useB3.js";
8
9
  import { LinkAccount } from "./LinkAccount/LinkAccount.js";
9
10
  import { ManageAccount } from "./ManageAccount/ManageAccount.js";
@@ -29,6 +30,7 @@ export function B3DynamicModal() {
29
30
  "anySpendSignatureMint",
30
31
  "anySpendBondKit",
31
32
  "linkAccount",
33
+ "avatarEditor",
32
34
  ];
33
35
  const freestyleTypes = [
34
36
  "anySpendNft",
@@ -80,6 +82,8 @@ export function B3DynamicModal() {
80
82
  return _jsx(LinkAccount, { ...contentType });
81
83
  case "anySpendDepositHype":
82
84
  return _jsx(AnySpendDepositHype, { ...contentType, mode: "modal" });
85
+ case "avatarEditor":
86
+ return _jsx(AvatarEditor, { onSetAvatar: contentType.onSuccess });
83
87
  // Add other modal types here
84
88
  default:
85
89
  return null;
@@ -89,5 +93,9 @@ export function B3DynamicModal() {
89
93
  const ModalContent = isMobile ? DrawerContent : DialogContent;
90
94
  const ModalTitle = isMobile ? DrawerTitle : DialogTitle;
91
95
  const ModalDescription = isMobile ? DrawerDescription : DialogDescription;
92
- return (_jsx(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: _jsxs(ModalContent, { className: cn(contentClass, "rounded-2xl bg-white shadow-xl dark:bg-gray-900", "border border-gray-200 dark:border-gray-800", "mx-auto w-full max-w-md", "sm:max-w-lg sm:rounded-b-none"), hideCloseButton: hideCloseButton, children: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: cn("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]"), children: [history.length > 0 && contentType?.showBackButton && (_jsxs("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { className: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }) }));
96
+ return (_jsxs(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: [_jsxs(ModalContent, { className: cn(contentClass, "rounded-2xl bg-white shadow-xl dark:bg-gray-900", "border border-gray-200 dark:border-gray-800",
97
+ // Remove default width classes for avatar editor
98
+ contentType?.type === "avatarEditor"
99
+ ? "!w-[90vw] !max-w-none" // Use !important to override default styles
100
+ : "mx-auto w-full max-w-md sm:max-w-lg"), hideCloseButton: hideCloseButton, children: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: cn("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]"), children: [history.length > 0 && contentType?.showBackButton && (_jsxs("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { className: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }), contentType?.type === "avatarEditor" && (_jsx("button", { onClick: () => setB3ModalOpen(false), className: "fixed right-5 top-5 z-[100] cursor-pointer text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
93
101
  }
@@ -1,2 +1,4 @@
1
1
  import { LinkAccountModalProps } from "../../stores/useModalStore";
2
- export declare function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, }: LinkAccountModalProps): import("react/jsx-runtime").JSX.Element;
2
+ export declare function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, className, }: LinkAccountModalProps & {
3
+ className?: string;
4
+ }): import("react/jsx-runtime").JSX.Element;
@@ -1,7 +1,8 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import app from "../../../../global-account/app.js";
2
3
  import { ecosystemWalletId } from "../../../../shared/constants/index.js";
3
4
  import { client } from "../../../../shared/utils/thirdweb.js";
4
- import { Loader2 } from "lucide-react";
5
+ import { Loader2, Mail, Phone } from "lucide-react";
5
6
  import { useCallback, useEffect, useState } from "react";
6
7
  import { toast } from "sonner";
7
8
  import { useLinkProfile, useProfiles } from "thirdweb/react";
@@ -9,18 +10,27 @@ import { preAuthenticate } from "thirdweb/wallets";
9
10
  import { useModalStore } from "../../stores/useModalStore.js";
10
11
  import { getProfileDisplayInfo } from "../../utils/profileDisplay.js";
11
12
  import { useB3 } from "../B3Provider/useB3.js";
13
+ import { AppleIcon } from "../icons/AppleIcon.js";
14
+ import { DiscordIcon } from "../icons/DiscordIcon.js";
15
+ import { FarcasterIcon } from "../icons/FarcasterIcon.js";
16
+ import { GoogleIcon } from "../icons/GoogleIcon.js";
17
+ import { XIcon } from "../icons/XIcon.js";
12
18
  import { Button } from "../ui/button.js";
13
- import app from "../../../../global-account/app.js";
14
19
  const AUTH_METHODS = [
15
- { id: "email", label: "Email", enabled: true },
16
- { id: "phone", label: "Phone", enabled: true },
17
- { id: "google", label: "Google", enabled: true },
18
- { id: "x", label: "X (Twitter)", enabled: true },
19
- { id: "discord", label: "Discord", enabled: true },
20
- { id: "apple", label: "Apple", enabled: true },
21
- { id: "farcaster", label: "Farcaster", enabled: true },
20
+ { id: "email", label: "Email", enabled: true, icon: _jsx(Mail, { className: "text-b3-primary-blue size-6" }) },
21
+ { id: "phone", label: "Phone", enabled: true, icon: _jsx(Phone, { className: "text-b3-primary-blue size-6" }) },
22
+ { id: "google", label: "Google", enabled: true, icon: _jsx(GoogleIcon, { className: "size-6" }) },
23
+ { id: "x", label: "X (Twitter)", enabled: true, icon: _jsx(XIcon, { className: "size-6" }) },
24
+ { id: "discord", label: "Discord", enabled: true, icon: _jsx(DiscordIcon, { className: "size-6" }) },
25
+ { id: "apple", label: "Apple", enabled: true, icon: _jsx(AppleIcon, { className: "size-6" }) },
26
+ {
27
+ id: "farcaster",
28
+ label: "Farcaster",
29
+ enabled: true,
30
+ icon: _jsx(FarcasterIcon, { className: "size-6" }),
31
+ },
22
32
  ];
23
- export function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, }) {
33
+ export function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, className, }) {
24
34
  const { isLinking, linkingMethod, setLinkingState, navigateBack, setB3ModalContentType } = useModalStore();
25
35
  const [selectedMethod, setSelectedMethod] = useState(null);
26
36
  const [email, setEmail] = useState("");
@@ -239,12 +249,12 @@ export function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, ch
239
249
  if (!account) {
240
250
  return _jsx("div", { className: "text-b3-foreground-muted py-8 text-center", children: "Please connect your account first" });
241
251
  }
242
- return (_jsxs("div", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-b3-grey font-neue-montreal-semibold text-2xl", children: "Link New Account" }), selectedMethod && (_jsx(Button, { variant: "ghost", className: "text-b3-grey hover:text-b3-grey/80", onClick: handleBack, children: "Backs" }))] }), !selectedMethod ? (_jsxs("div", { className: "grid gap-3", children: [availableAuthMethods.map(method => (_jsx(Button, { className: "bg-b3-primary-wash hover:bg-b3-primary-wash/70 text-b3-grey font-neue-montreal-semibold h-16 justify-start px-6 text-lg", onClick: () => {
252
+ return (_jsxs("div", { className: `b3-link-account space-y-6 p-6 ${className || ""}`, "data-testid": "link-account", children: [_jsxs("div", { className: "b3-link-account-header flex items-center justify-between", children: [_jsx("h2", { className: "b3-link-account-title text-b3-grey font-neue-montreal-semibold text-2xl", children: "Link New Account" }), selectedMethod && (_jsx(Button, { variant: "ghost", className: "text-b3-grey hover:text-b3-grey/80", onClick: handleBack, children: "Backs" }))] }), !selectedMethod ? (_jsxs("div", { className: "b3-link-account-methods grid gap-3", children: [availableAuthMethods.map(method => (_jsx(Button, { variant: "outline", className: "b3-link-account-method-button border-b3-line hover:border-b3-primary-blue/30 hover:bg-b3-primary-blue/5 text-b3-grey font-neue-montreal-medium h-14 justify-start bg-transparent px-6 text-base transition-all duration-200", "data-method": method.id, onClick: () => {
243
253
  if (method.id === "email" || method.id === "phone") {
244
254
  setSelectedMethod(method.id);
245
255
  }
246
256
  else {
247
257
  handleSocialLink(method.id);
248
258
  }
249
- }, disabled: linkingMethod === method.id, children: isLinking && linkingMethod === method.id ? _jsx(Loader2, { className: "animate-spin" }) : method.label }, method.id))), availableAuthMethods.length === 0 && (_jsx("div", { className: "text-b3-foreground-muted py-8 text-center", children: "All available authentication methods have been connected" }))] })) : (_jsxs("div", { className: "space-y-4", children: [selectedMethod === "email" && (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Email Address" }), _jsx("input", { type: "email", placeholder: "Enter your email", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: email, onChange: e => setEmail(e.target.value), disabled: otpSent || (isLinking && linkingMethod === "email") })] })), selectedMethod === "phone" && (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Phone Number" }), _jsx("input", { type: "tel", placeholder: "Enter your phone number", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: phone, onChange: e => setPhone(e.target.value), disabled: otpSent || (isLinking && linkingMethod === "phone") }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Include country code (e.g., +1 for US)" })] })), error && _jsx("div", { className: "text-b3-negative font-neue-montreal-medium py-2 text-sm", children: error }), otpSent ? (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Verification Code" }), _jsx("input", { type: "text", placeholder: "Enter verification code", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: otp, onChange: e => setOtp(e.target.value) })] }), _jsx(Button, { className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white", onClick: handleLinkAccount, children: "Link Account" })] })) : (_jsx(Button, { className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white", onClick: handleSendOTP, disabled: (!email && !phone) || (isLinking && linkingMethod === selectedMethod), children: isLinking && linkingMethod === selectedMethod ? (_jsx(Loader2, { className: "animate-spin" })) : ("Send Verification Code") }))] }))] }));
259
+ }, disabled: linkingMethod === method.id, children: isLinking && linkingMethod === method.id ? (_jsx(Loader2, { className: "h-5 w-5 animate-spin" })) : (_jsxs("div", { className: "b3-link-account-method-content flex items-center gap-4", children: [_jsx("div", { className: "b3-link-account-method-icon flex items-center justify-center rounded-full", children: method.icon }), _jsx("span", { className: "b3-link-account-method-label font-medium", children: method.label })] })) }, method.id))), availableAuthMethods.length === 0 && (_jsx("div", { className: "text-b3-foreground-muted py-8 text-center", children: "All available authentication methods have been connected" }))] })) : (_jsxs("div", { className: "b3-link-account-form space-y-4", children: [selectedMethod === "email" && (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Email Address" }), _jsx("input", { type: "email", placeholder: "Enter your email", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: email, onChange: e => setEmail(e.target.value), disabled: otpSent || (isLinking && linkingMethod === "email") })] })), selectedMethod === "phone" && (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Phone Number" }), _jsx("input", { type: "tel", placeholder: "Enter your phone number", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: phone, onChange: e => setPhone(e.target.value), disabled: otpSent || (isLinking && linkingMethod === "phone") }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Include country code (e.g., +1 for US)" })] })), error && _jsx("div", { className: "text-b3-negative font-neue-montreal-medium py-2 text-sm", children: error }), otpSent ? (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Verification Code" }), _jsx("input", { type: "text", placeholder: "Enter verification code", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: otp, onChange: e => setOtp(e.target.value) })] }), _jsx(Button, { className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white", onClick: handleLinkAccount, children: "Link Account" })] })) : (_jsx(Button, { className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white", onClick: handleSendOTP, disabled: (!email && !phone) || (isLinking && linkingMethod === selectedMethod), children: isLinking && linkingMethod === selectedMethod ? (_jsx(Loader2, { className: "animate-spin" })) : ("Send Verification Code") }))] }))] }));
250
260
  }
@@ -1,6 +1,8 @@
1
1
  interface BalanceContentProps {
2
2
  onLogout?: () => void;
3
3
  partnerId: string;
4
+ showDeposit?: boolean;
5
+ showSwap?: boolean;
4
6
  }
5
- export declare function BalanceContent({ onLogout, partnerId }: BalanceContentProps): import("react/jsx-runtime").JSX.Element;
7
+ export declare function BalanceContent({ onLogout, partnerId, showDeposit, showSwap }: BalanceContentProps): import("react/jsx-runtime").JSX.Element;
6
8
  export {};
@@ -1,9 +1,10 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Button, CopyToClipboard, useAuthentication, useB3BalanceFromAddresses, useModalStore, useNativeBalance, useProfile, } from "../../../../global-account/react/index.js";
2
+ import { Button, CopyToClipboard, useAuthentication, useB3, useB3BalanceFromAddresses, useModalStore, useNativeBalance, useProfile, } from "../../../../global-account/react/index.js";
3
3
  import { BankIcon } from "../../../../global-account/react/components/icons/BankIcon.js";
4
4
  import { SignOutIcon } from "../../../../global-account/react/components/icons/SignOutIcon.js";
5
5
  import { SwapIcon } from "../../../../global-account/react/components/icons/SwapIcon.js";
6
6
  import { formatUsername } from "../../../../shared/utils/index.js";
7
+ import { getIpfsUrl } from "../../../../shared/utils/ipfs.js";
7
8
  import { Loader2, Pencil } from "lucide-react";
8
9
  import { useEffect, useRef, useState } from "react";
9
10
  import { useActiveAccount } from "thirdweb/react";
@@ -16,18 +17,31 @@ function centerTruncate(str, length = 4) {
16
17
  return str;
17
18
  return `${str.slice(0, length)}...${str.slice(-length)}`;
18
19
  }
19
- export function BalanceContent({ onLogout, partnerId }) {
20
+ export function BalanceContent({ onLogout, partnerId, showDeposit = true, showSwap = true }) {
20
21
  const account = useActiveAccount();
21
22
  const { address: eoaAddress, info: eoaInfo } = useFirstEOA();
22
23
  const { data: profile } = useProfile({
23
24
  address: eoaAddress || account?.address,
24
25
  fresh: true,
25
26
  });
26
- const { setB3ModalOpen, setB3ModalContentType } = useModalStore();
27
+ const { user } = useB3();
28
+ const { setB3ModalOpen, setB3ModalContentType, navigateBack } = useModalStore();
27
29
  const { logout } = useAuthentication(partnerId);
28
30
  const [logoutLoading, setLogoutLoading] = useState(false);
29
31
  const [openAccordions, setOpenAccordions] = useState([]);
30
32
  const hasExpandedRef = useRef(false);
33
+ const avatarUrl = user?.avatar ? getIpfsUrl(user?.avatar) : profile?.avatar;
34
+ const handleEditAvatar = () => {
35
+ setB3ModalOpen(true);
36
+ setB3ModalContentType({
37
+ type: "avatarEditor",
38
+ showBackButton: true,
39
+ onSuccess: () => {
40
+ // navigate back on success
41
+ navigateBack();
42
+ },
43
+ });
44
+ };
31
45
  console.log("eoaAddress", eoaAddress);
32
46
  console.log("account?.address", account?.address);
33
47
  // Balance data fetching
@@ -71,18 +85,18 @@ export function BalanceContent({ onLogout, partnerId }) {
71
85
  setB3ModalOpen(false);
72
86
  setLogoutLoading(false);
73
87
  };
74
- return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "global-account-profile flex items-center gap-4", children: [_jsxs("div", { className: "global-account-profile-avatar relative", children: [profile?.avatar ? (_jsx("img", { src: profile?.avatar, alt: "Profile", className: "size-24 rounded-full" })) : (_jsx("div", { className: "bg-b3-primary-wash size-24 rounded-full" })), _jsx("div", { className: "bg-b3-grey border-b3-background absolute -bottom-1 -right-1 flex size-8 items-center justify-center rounded-full border-4", children: _jsx(Pencil, { size: 16, className: "text-b3-background" }) })] }), _jsxs("div", { className: "global-account-profile-info", children: [_jsx("h2", { className: "text-b3-grey text-xl font-semibold", children: profile?.displayName || formatUsername(profile?.name || "") }), _jsxs("div", { className: "address-button border-b3-line bg-b3-line/20 hover:bg-b3-line/40 flex w-fit items-center gap-2 rounded-full border px-3 py-1 transition-colors", children: [_jsx("span", { className: "text-b3-foreground-muted font-mono text-xs", children: centerTruncate(account?.address || "", 6) }), _jsx(CopyToClipboard, { text: account?.address || "" })] })] })] }) }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs(Button, { className: "manage-account-deposit bg-b3-primary-wash hover:bg-b3-primary-wash/70 h-[84px] w-full flex-col items-start gap-2 rounded-2xl", onClick: () => {
88
+ return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "global-account-profile flex items-center gap-4", children: [_jsxs("div", { className: "global-account-profile-avatar relative", children: [avatarUrl ? (_jsx("img", { src: avatarUrl, alt: "Profile", className: "size-24 rounded-full" })) : (_jsx("div", { className: "bg-b3-primary-wash size-24 rounded-full" })), _jsx("button", { onClick: handleEditAvatar, className: "bg-b3-grey border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-8 items-center justify-center rounded-full border-4 transition-colors", children: _jsx(Pencil, { size: 16, className: "text-b3-background" }) })] }), _jsxs("div", { className: "global-account-profile-info", children: [_jsx("h2", { className: "text-b3-grey text-xl font-semibold", children: profile?.displayName || formatUsername(profile?.name || "") }), _jsxs("div", { className: "address-button border-b3-line bg-b3-line/20 hover:bg-b3-line/40 flex w-fit items-center gap-2 rounded-full border px-3 py-1 transition-colors", children: [_jsx("span", { className: "text-b3-foreground-muted font-mono text-xs", children: centerTruncate(account?.address || "", 6) }), _jsx(CopyToClipboard, { text: account?.address || "" })] })] })] }) }), (showDeposit || showSwap) && (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [showDeposit && (_jsxs(Button, { className: "manage-account-deposit bg-b3-primary-wash hover:bg-b3-primary-wash/70 h-[84px] w-full flex-col items-start gap-2 rounded-2xl", onClick: () => {
75
89
  setB3ModalOpen(true);
76
90
  setB3ModalContentType({
77
91
  type: "anySpend",
78
92
  defaultActiveTab: "fiat",
79
93
  showBackButton: true,
80
94
  });
81
- }, children: [_jsx(BankIcon, { size: 24, className: "text-b3-primary-blue shrink-0" }), _jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Deposit" })] }), _jsxs(Button, { className: "manage-account-swap bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex h-[84px] w-full flex-col items-start gap-2 rounded-2xl", onClick: () => {
95
+ }, children: [_jsx(BankIcon, { size: 24, className: "text-b3-primary-blue shrink-0" }), _jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Deposit" })] })), showSwap && (_jsxs(Button, { className: "manage-account-swap bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex h-[84px] w-full flex-col items-start gap-2 rounded-2xl", onClick: () => {
82
96
  setB3ModalOpen(true);
83
97
  setB3ModalContentType({
84
98
  type: "anySpend",
85
99
  showBackButton: true,
86
100
  });
87
- }, children: [_jsx(SwapIcon, { size: 24, className: "text-b3-primary-blue" }), _jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Swap" })] })] }), _jsxs(Accordion, { type: "multiple", value: openAccordions, onValueChange: setOpenAccordions, className: "space-y-2", children: [_jsxs(AccordionItem, { value: "global-account", className: "border-none", children: [_jsx(AccordionTrigger, { className: "text-b3-grey font-neue-montreal-semibold py-2 hover:no-underline", children: _jsx("span", { children: "Balance" }) }), _jsxs(AccordionContent, { className: "space-y-4", children: [_jsx(TokenBalanceRow, { icon: _jsx(B3TokenIcon, { className: "size-10" }), name: "B3", balance: `${b3Balance?.formattedTotal || "0.00"} B3`, usdValue: b3Balance?.balanceUsdFormatted || "0.00", priceChange: b3Balance?.priceChange24h }), _jsx(TokenBalanceRow, { icon: _jsx(EthereumTokenIcon, { className: "size-10" }), name: "Ethereum", balance: `${nativeBalance?.formattedTotal || "0.00"} ETH`, usdValue: nativeBalance?.formattedTotalUsd || "0.00", priceChange: nativeBalance?.priceChange24h })] })] }), eoaAddress && (_jsxs(AccordionItem, { value: "eoa-account", className: "border-none", children: [_jsx(AccordionTrigger, { className: "text-b3-grey font-neue-montreal-semibold py-2 hover:no-underline", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { children: ["Connected ", eoaInfo?.data?.name || "Wallet"] }), _jsxs("div", { className: "address-button border-b3-line bg-b3-line/20 hover:bg-b3-line/40 flex w-fit items-center gap-2 rounded-full border px-3 py-1 transition-colors", children: [_jsx("span", { className: "text-b3-foreground-muted font-mono text-xs", children: centerTruncate(eoaAddress, 6) }), _jsx(CopyToClipboard, { text: eoaAddress })] })] }) }), _jsxs(AccordionContent, { className: "space-y-4", children: [_jsx(TokenBalanceRow, { icon: _jsx(B3TokenIcon, { className: "size-10" }), name: "B3", balance: `${eoaB3Balance?.formattedTotal || "0.00"} B3`, usdValue: eoaB3Balance?.balanceUsdFormatted || "0.00", priceChange: eoaB3Balance?.priceChange24h }), _jsx(TokenBalanceRow, { icon: _jsx(EthereumTokenIcon, { className: "size-10" }), name: "Ethereum", balance: `${eoaNativeBalance?.formattedTotal || "0.00"} ETH`, usdValue: eoaNativeBalance?.formattedTotalUsd || "0.00", priceChange: eoaNativeBalance?.priceChange24h })] })] }))] }), _jsxs("button", { className: "logout-button border-b3-line hover:bg-b3-line relative flex w-full items-center justify-center rounded-2xl border p-4 transition-colors", onClick: onLogoutEnhanced, children: [_jsx("span", { className: "font-neue-montreal-semibold text-b3-grey", children: "Sign out" }), _jsx("div", { className: "absolute right-4", children: logoutLoading ? (_jsx(Loader2, { className: "animate-spin", size: 16 })) : (_jsx(SignOutIcon, { size: 16, className: "text-b3-grey" })) })] })] }));
101
+ }, children: [_jsx(SwapIcon, { size: 24, className: "text-b3-primary-blue" }), _jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Swap" })] }))] })), _jsxs(Accordion, { type: "multiple", value: openAccordions, onValueChange: setOpenAccordions, className: "space-y-2", children: [_jsxs(AccordionItem, { value: "global-account", className: "border-none", children: [_jsx(AccordionTrigger, { className: "text-b3-grey font-neue-montreal-semibold py-2 hover:no-underline", children: _jsx("span", { children: "Balance" }) }), _jsxs(AccordionContent, { className: "space-y-4", children: [_jsx(TokenBalanceRow, { icon: _jsx(B3TokenIcon, { className: "size-10" }), name: "B3", balance: `${b3Balance?.formattedTotal || "0.00"} B3`, usdValue: b3Balance?.balanceUsdFormatted || "0.00", priceChange: b3Balance?.priceChange24h }), _jsx(TokenBalanceRow, { icon: _jsx(EthereumTokenIcon, { className: "size-10" }), name: "Ethereum", balance: `${nativeBalance?.formattedTotal || "0.00"} ETH`, usdValue: nativeBalance?.formattedTotalUsd || "0.00", priceChange: nativeBalance?.priceChange24h })] })] }), eoaAddress && (_jsxs(AccordionItem, { value: "eoa-account", className: "border-none", children: [_jsx(AccordionTrigger, { className: "text-b3-grey font-neue-montreal-semibold py-2 hover:no-underline", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { children: ["Connected ", eoaInfo?.data?.name || "Wallet"] }), _jsxs("div", { className: "address-button border-b3-line bg-b3-line/20 hover:bg-b3-line/40 flex w-fit items-center gap-2 rounded-full border px-3 py-1 transition-colors", children: [_jsx("span", { className: "text-b3-foreground-muted font-mono text-xs", children: centerTruncate(eoaAddress, 6) }), _jsx(CopyToClipboard, { text: eoaAddress })] })] }) }), _jsxs(AccordionContent, { className: "space-y-4", children: [_jsx(TokenBalanceRow, { icon: _jsx(B3TokenIcon, { className: "size-10" }), name: "B3", balance: `${eoaB3Balance?.formattedTotal || "0.00"} B3`, usdValue: eoaB3Balance?.balanceUsdFormatted || "0.00", priceChange: eoaB3Balance?.priceChange24h }), _jsx(TokenBalanceRow, { icon: _jsx(EthereumTokenIcon, { className: "size-10" }), name: "Ethereum", balance: `${eoaNativeBalance?.formattedTotal || "0.00"} ETH`, usdValue: eoaNativeBalance?.formattedTotalUsd || "0.00", priceChange: eoaNativeBalance?.priceChange24h })] })] }))] }), _jsxs("button", { className: "logout-button border-b3-line hover:bg-b3-line relative flex w-full items-center justify-center rounded-2xl border p-4 transition-colors", onClick: onLogoutEnhanced, children: [_jsx("span", { className: "font-neue-montreal-semibold text-b3-grey", children: "Sign out" }), _jsx("div", { className: "absolute right-4", children: logoutLoading ? (_jsx(Loader2, { className: "animate-spin", size: 16 })) : (_jsx(SignOutIcon, { size: 16, className: "text-b3-grey" })) })] })] }));
88
102
  }
@@ -7,6 +7,8 @@ interface ManageAccountProps {
7
7
  chain: Chain;
8
8
  partnerId: string;
9
9
  containerClassName?: string;
10
+ showSwap?: boolean;
11
+ showDeposit?: boolean;
10
12
  }
11
- export declare function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain, partnerId, }: ManageAccountProps): import("react/jsx-runtime").JSX.Element;
13
+ export declare function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain, partnerId, showSwap, showDeposit, }: ManageAccountProps): import("react/jsx-runtime").JSX.Element;
12
14
  export {};
@@ -13,7 +13,7 @@ import { getProfileDisplayInfo } from "../../utils/profileDisplay.js";
13
13
  import { AccountAssets } from "../AccountAssets/AccountAssets.js";
14
14
  import { ContentTokens } from "./ContentTokens.js";
15
15
  import { BalanceContent } from "./BalanceContent.js";
16
- export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain, partnerId, }) {
16
+ export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain, partnerId, showSwap, showDeposit, }) {
17
17
  const [revokingSignerId, setRevokingSignerId] = useState(null);
18
18
  const account = useActiveAccount();
19
19
  const { data: nfts, isLoading } = useAccountAssets(account?.address);
@@ -146,22 +146,22 @@ export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit
146
146
  },
147
147
  });
148
148
  };
149
- return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Linked Accounts" }), _jsxs(Button, { className: "bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex items-center gap-2 rounded-full px-4 py-2", onClick: handleOpenLinkModal, disabled: isLinking, children: [isLinking ? (_jsx(Loader2, { className: "text-b3-primary-blue animate-spin", size: 16 })) : (_jsx(LinkIcon, { size: 16, className: "text-b3-primary-blue" })), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: isLinking ? "Linking..." : "Link New Account" })] })] }), isLoadingProfiles ? (_jsx("div", { className: "flex justify-center py-8", children: _jsx(Loader2, { className: "text-b3-grey animate-spin" }) })) : profiles.length > 0 ? (_jsx("div", { className: "space-y-4", children: profiles.map(profile => (_jsxs("div", { className: "bg-b3-line flex items-center justify-between rounded-xl p-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [profile.imageUrl ? (_jsx("img", { src: profile.imageUrl, alt: profile.title, className: "size-10 rounded-full" })) : (_jsx("div", { className: "bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full", children: _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm uppercase", children: profile.initial }) })), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: profile.title }), _jsx("span", { className: "text-b3-foreground-muted font-neue-montreal-medium bg-b3-primary-wash rounded px-2 py-0.5 text-xs", children: profile.type.toUpperCase() })] }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: profile.subtitle })] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "text-b3-grey hover:text-b3-negative", onClick: () => handleUnlink(profile), disabled: unlinkingAccountId === profile.title || isUnlinking, children: unlinkingAccountId === profile.title || isUnlinking ? (_jsx(Loader2, { className: "animate-spin" })) : (_jsx(UnlinkIcon, { size: 16 })) })] }, profile.title))) })) : (_jsx("div", { className: "text-b3-foreground-muted py-8 text-center", children: "No linked accounts found" }))] }), showReferralInfo && (
149
+ return (_jsxs("div", { className: "linked-accounts-settings space-y-8", children: [_jsxs("div", { className: "linked-accounts-section space-y-4", children: [_jsxs("div", { className: "linked-accounts-header flex items-center justify-between", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold linked-accounts-settings-title text-xl", children: "Linked Accounts" }), _jsxs(Button, { className: "linked-accounts-settings-button linked-accounts-link-button bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex items-center gap-2 rounded-full px-4 py-2", onClick: handleOpenLinkModal, disabled: isLinking, children: [isLinking ? (_jsx(Loader2, { className: "linked-accounts-link-loading text-b3-primary-blue animate-spin", size: 16 })) : (_jsx(LinkIcon, { size: 16, className: "linked-accounts-link-icon text-b3-primary-blue" })), _jsx("span", { className: "linked-accounts-link-text text-b3-grey font-neue-montreal-semibold", children: isLinking ? "Linking..." : "Link New Account" })] })] }), isLoadingProfiles ? (_jsx("div", { className: "linked-accounts-loading flex justify-center py-8", children: _jsx(Loader2, { className: "text-b3-grey animate-spin" }) })) : profiles.length > 0 ? (_jsx("div", { className: "linked-accounts-list space-y-4", children: profiles.map(profile => (_jsxs("div", { className: "linked-account-item bg-b3-line flex items-center justify-between rounded-xl p-4", children: [_jsxs("div", { className: "linked-account-info flex items-center gap-3", children: [profile.imageUrl ? (_jsx("img", { src: profile.imageUrl, alt: profile.title, className: "linked-account-avatar linked-account-avatar-image size-10 rounded-full" })) : (_jsx("div", { className: "linked-account-avatar linked-account-avatar-placeholder bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full", children: _jsx("span", { className: "linked-account-initial text-b3-grey font-neue-montreal-semibold text-sm uppercase", children: profile.initial }) })), _jsxs("div", { className: "linked-account-details", children: [_jsxs("div", { className: "linked-account-title-row flex items-center gap-2", children: [_jsx("span", { className: "linked-account-title text-b3-grey font-neue-montreal-semibold", children: profile.title }), _jsx("span", { className: "linked-account-type text-b3-foreground-muted font-neue-montreal-medium bg-b3-primary-wash rounded px-2 py-0.5 text-xs", children: profile.type.toUpperCase() })] }), _jsx("div", { className: "linked-account-subtitle text-b3-foreground-muted font-neue-montreal-medium text-sm", children: profile.subtitle })] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "linked-account-unlink-button text-b3-grey hover:text-b3-negative", onClick: () => handleUnlink(profile), disabled: unlinkingAccountId === profile.title || isUnlinking, children: unlinkingAccountId === profile.title || isUnlinking ? (_jsx(Loader2, { className: "linked-account-unlink-loading animate-spin" })) : (_jsx(UnlinkIcon, { size: 16, className: "linked-account-unlink-icon" })) })] }, profile.title))) })) : (_jsx("div", { className: "linked-accounts-empty text-b3-foreground-muted py-8 text-center", children: "No linked accounts found" }))] }), showReferralInfo && (
150
150
  /* Referral Section */
151
- _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Referrals" }), _jsxs("div", { className: "bg-b3-line rounded-xl p-4", children: [isEditingCode && (_jsxs("div", { children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), _jsxs("div", { className: "flex items-center justify-between", children: [!isEditingCode && (_jsxs("div", { children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), _jsx("div", { className: "flex items-center gap-2", children: isEditingCode ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "text", value: newReferralCode, onChange: e => setNewReferralCode(e.target.value), className: "rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm", placeholder: "Enter new code", ref: referallCodeRef }), _jsx(Button, { size: "sm", onClick: handleUpdateReferralCode, disabled: isUpdatingCode || !newReferralCode, children: isUpdatingCode ? _jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : "Save" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
151
+ _jsxs("div", { className: "referrals-section space-y-4", children: [_jsx("h3", { className: "referrals-title text-b3-grey font-neue-montreal-semibold text-xl", children: "Referrals" }), _jsxs("div", { className: "referral-code-container bg-b3-line rounded-xl p-4", children: [isEditingCode && (_jsxs("div", { className: "referral-code-header-editing", children: [_jsx("div", { className: "referral-code-title text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), _jsx("div", { className: "referral-code-description text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), _jsxs("div", { className: "referral-code-content flex items-center justify-between", children: [!isEditingCode && (_jsxs("div", { className: "referral-code-header", children: [_jsx("div", { className: "referral-code-title text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), _jsx("div", { className: "referral-code-description text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), _jsx("div", { className: "referral-code-actions flex items-center gap-2", children: isEditingCode ? (_jsxs("div", { className: "referral-code-edit-form flex items-center gap-2", children: [_jsx("input", { type: "text", value: newReferralCode, onChange: e => setNewReferralCode(e.target.value), className: "referral-code-input rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm", placeholder: "Enter new code", ref: referallCodeRef }), _jsx(Button, { size: "sm", className: "referral-code-save-button", onClick: handleUpdateReferralCode, disabled: isUpdatingCode || !newReferralCode, children: isUpdatingCode ? (_jsx(Loader2, { className: "referral-code-save-loading h-4 w-4 animate-spin" })) : ("Save") }), _jsx(Button, { size: "sm", variant: "ghost", className: "referral-code-cancel-button", onClick: () => {
152
152
  setIsEditingCode(false);
153
153
  setNewReferralCode("");
154
- }, children: "Cancel" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm", children: currentReferralCode }), _jsx(Button, { size: "icon", variant: "ghost", onClick: handleCopyCode, children: _jsx(Copy, { className: "h-4 w-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", onClick: () => {
154
+ }, children: "Cancel" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "referral-code-display rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm", children: currentReferralCode }), _jsx(Button, { size: "icon", variant: "ghost", className: "referral-code-copy-button", onClick: handleCopyCode, children: _jsx(Copy, { className: "referral-code-copy-icon h-4 w-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", className: "referral-code-edit-button", onClick: () => {
155
155
  setIsEditingCode(true);
156
156
  setTimeout(() => {
157
157
  referallCodeRef.current?.focus();
158
158
  }, 100);
159
- }, children: _jsx(Pencil, { className: "h-4 w-4" }) })] })) })] })] }), _jsxs("div", { className: "bg-b3-line rounded-xl p-4", children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold mb-4", children: "Referred Users" }), isLoadingReferrals ? (_jsx("div", { className: "flex justify-center py-4", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }) })) : referrals?.data?.length ? (_jsx("div", { className: "space-y-3", children: referrals.data.map((referral) => (_jsxs("div", { className: "flex items-center justify-between rounded-lg bg-white p-3", children: [_jsx("div", { className: "text-sm font-medium", children: referral.referreeId }), _jsx("div", { className: "text-sm text-gray-500", children: new Date(referral.createdAt).toLocaleDateString() })] }, String(referral._id)))) })) : (_jsx("div", { className: "py-4 text-center text-gray-500", children: "No referred users yet" }))] })] })), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Account Preferences" }), _jsx("div", { className: "bg-b3-line rounded-xl p-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Dark Mode" }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Switch between light and dark theme" })] }), _jsx("div", { className: "bg-b3-primary-wash h-6 w-12 rounded-full" })] }) })] }), _jsxs("div", { className: "border-b3-line flex items-center justify-between rounded-2xl border p-4", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "h-4" }), _jsx("h3", { className: "font-neue-montreal-semibold text-b3-grey", children: "Global Account" })] }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium mt-2 text-sm", children: "Your universal account for all B3 apps" })] }), _jsx("button", { className: "text-b3-grey hover:text-b3-grey/80 hover:bg-b3-line border-b3-line flex size-12 items-center justify-center rounded-full border", onClick: onLogoutEnhanced, children: logoutLoading ? _jsx(Loader2, { className: "animate-spin" }) : _jsx(SignOutIcon, { size: 16, className: "text-b3-grey" }) })] })] }));
159
+ }, children: _jsx(Pencil, { className: "referral-code-edit-icon h-4 w-4" }) })] })) })] })] }), _jsxs("div", { className: "referred-users-container bg-b3-line rounded-xl p-4", children: [_jsx("div", { className: "referred-users-title text-b3-grey font-neue-montreal-semibold mb-4", children: "Referred Users" }), isLoadingReferrals ? (_jsx("div", { className: "referred-users-loading flex justify-center py-4", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }) })) : referrals?.data?.length ? (_jsx("div", { className: "referred-users-list space-y-3", children: referrals.data.map((referral) => (_jsxs("div", { className: "referred-user-item flex items-center justify-between rounded-lg bg-white p-3", children: [_jsx("div", { className: "referred-user-id text-sm font-medium", children: referral.referreeId }), _jsx("div", { className: "referred-user-date text-sm text-gray-500", children: new Date(referral.createdAt).toLocaleDateString() })] }, String(referral._id)))) })) : (_jsx("div", { className: "referred-users-empty py-4 text-center text-gray-500", children: "No referred users yet" }))] })] })), _jsxs("div", { className: "account-preferences-section space-y-4", children: [_jsx("h3", { className: "account-preferences-title text-b3-grey font-neue-montreal-semibold text-xl", children: "Account Preferences" }), _jsx("div", { className: "account-preferences-container bg-b3-line rounded-xl p-4", children: _jsxs("div", { className: "account-preference-item flex items-center justify-between", children: [_jsxs("div", { className: "account-preference-info", children: [_jsx("div", { className: "account-preference-title text-b3-grey font-neue-montreal-semibold", children: "Dark Mode" }), _jsx("div", { className: "account-preference-description text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Switch between light and dark theme" })] }), _jsx("div", { className: "account-preference-toggle theme-toggle-placeholder bg-b3-primary-wash h-6 w-12 rounded-full" })] }) })] }), _jsxs("button", { className: "logout-button logout-section border-b3-line hover:bg-b3-line relative flex w-full items-center justify-center rounded-2xl border p-4 transition-colors", onClick: onLogoutEnhanced, children: [_jsx("span", { className: "logout-text font-neue-montreal-semibold text-b3-grey", children: "Sign out" }), _jsx("div", { className: "logout-icon-container absolute right-4", children: logoutLoading ? (_jsx(Loader2, { className: "logout-loading animate-spin", size: 16 })) : (_jsx(SignOutIcon, { size: 16, className: "logout-icon text-b3-grey" })) })] })] }));
160
160
  };
161
161
  return (_jsx("div", { className: "b3-manage-account bg-b3-background flex flex-col rounded-xl", children: _jsx("div", { className: "flex-1", children: _jsxs(TabsPrimitive, { defaultValue: activeTab, onValueChange: value => {
162
162
  const tab = value;
163
163
  if (["overview", "tokens", "nfts", "apps", "settings"].includes(tab)) {
164
164
  setActiveTab?.(tab);
165
165
  }
166
- }, children: [_jsx("div", { className: "px-4", children: _jsxs(TabsListPrimitive, { className: "grid h-auto grid-cols-2 grid-rows-2 gap-3 rounded-none border-none bg-transparent", children: [_jsxs(TabTriggerPrimitive, { value: "overview", className: "data-[state=active]:bg-b3-primary-blue data-[state=active]:hover:bg-b3-primary-blue data-[state=active]:border-b3-primary-blue group flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white p-2 text-center shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md data-[state=active]:shadow-lg", children: [_jsx(BarChart3, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "Overview" })] }), _jsxs(TabTriggerPrimitive, { value: "tokens", className: "data-[state=active]:bg-b3-primary-blue data-[state=active]:hover:bg-b3-primary-blue data-[state=active]:border-b3-primary-blue group flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white p-2 text-center shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md data-[state=active]:shadow-lg", children: [_jsx(Coins, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "Tokens" })] }), _jsxs(TabTriggerPrimitive, { value: "nfts", className: "data-[state=active]:bg-b3-primary-blue data-[state=active]:hover:bg-b3-primary-blue data-[state=active]:border-b3-primary-blue group flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white p-2 text-center shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md data-[state=active]:shadow-lg", children: [_jsx(Image, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "NFTs" })] }), _jsxs(TabTriggerPrimitive, { value: "settings", className: "data-[state=active]:bg-b3-primary-blue data-[state=active]:hover:bg-b3-primary-blue data-[state=active]:border-b3-primary-blue group flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white p-2 text-center shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md data-[state=active]:shadow-lg", children: [_jsx(Settings, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "Settings" })] })] }) }), _jsx(TabsContentPrimitive, { value: "overview", className: "px-4 pb-4 pt-2", children: _jsx(BalanceContent, { onLogout: onLogout, partnerId: partnerId }) }), _jsx(TabsContentPrimitive, { value: "tokens", className: "px-4 pb-4 pt-2", children: _jsx(ContentTokens, { activeTab: activeTab }) }), _jsx(TabsContentPrimitive, { value: "nfts", className: "px-4 pb-4 pt-2", children: _jsx("div", { className: "grid grid-cols-3 gap-4", children: nfts?.nftResponse ? (_jsx(AccountAssets, { nfts: nfts.nftResponse, isLoading: isLoading })) : (_jsx("div", { className: "col-span-3 py-12 text-center text-gray-500", children: "No NFTs found" })) }) }), _jsx(TabsContentPrimitive, { value: "apps", className: "px-4 pb-4 pt-2", children: _jsx(AppsContent, {}) }), _jsx(TabsContentPrimitive, { value: "settings", className: "px-4 pb-4 pt-2", children: _jsx(SettingsContent, {}) })] }) }) }));
166
+ }, children: [_jsx("div", { className: "px-4", children: _jsxs(TabsListPrimitive, { className: "grid h-auto grid-cols-2 grid-rows-2 gap-3 rounded-none border-none bg-transparent", children: [_jsxs(TabTriggerPrimitive, { value: "overview", className: "data-[state=active]:bg-b3-primary-blue data-[state=active]:hover:bg-b3-primary-blue data-[state=active]:border-b3-primary-blue group flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white p-2 text-center shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md data-[state=active]:shadow-lg", children: [_jsx(BarChart3, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "Overview" })] }), _jsxs(TabTriggerPrimitive, { value: "tokens", className: "data-[state=active]:bg-b3-primary-blue data-[state=active]:hover:bg-b3-primary-blue data-[state=active]:border-b3-primary-blue group flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white p-2 text-center shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md data-[state=active]:shadow-lg", children: [_jsx(Coins, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "Tokens" })] }), _jsxs(TabTriggerPrimitive, { value: "nfts", className: "data-[state=active]:bg-b3-primary-blue data-[state=active]:hover:bg-b3-primary-blue data-[state=active]:border-b3-primary-blue group flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white p-2 text-center shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md data-[state=active]:shadow-lg", children: [_jsx(Image, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "NFTs" })] }), _jsxs(TabTriggerPrimitive, { value: "settings", className: "data-[state=active]:bg-b3-primary-blue data-[state=active]:hover:bg-b3-primary-blue data-[state=active]:border-b3-primary-blue group flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white p-2 text-center shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md data-[state=active]:shadow-lg", children: [_jsx(Settings, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "Settings" })] })] }) }), _jsx(TabsContentPrimitive, { value: "overview", className: "px-4 pb-4 pt-2", children: _jsx(BalanceContent, { onLogout: onLogout, partnerId: partnerId, showDeposit: showDeposit, showSwap: showSwap }) }), _jsx(TabsContentPrimitive, { value: "tokens", className: "px-4 pb-4 pt-2", children: _jsx(ContentTokens, { activeTab: activeTab }) }), _jsx(TabsContentPrimitive, { value: "nfts", className: "px-4 pb-4 pt-2", children: _jsx("div", { className: "grid grid-cols-3 gap-4", children: nfts?.nftResponse ? (_jsx(AccountAssets, { nfts: nfts.nftResponse, isLoading: isLoading })) : (_jsx("div", { className: "col-span-3 py-12 text-center text-gray-500", children: "No NFTs found" })) }) }), _jsx(TabsContentPrimitive, { value: "apps", className: "px-4 pb-4 pt-2", children: _jsx(AppsContent, {}) }), _jsx(TabsContentPrimitive, { value: "settings", className: "px-4 pb-4 pt-2", children: _jsx(SettingsContent, {}) })] }) }) }));
167
167
  }
@@ -6,7 +6,7 @@ import { Loading } from "../ui/Loading.js";
6
6
  export function SignInWithB3(props) {
7
7
  const { setB3ModalOpen, setB3ModalContentType, setEcoSystemAccountAddress } = useModalStore();
8
8
  const { account } = useB3();
9
- const { isAuthenticatingV2, isAuthenticated } = useAuthentication(props.partnerId, props.loginWithSiwe);
9
+ const { isAuthenticating, isAuthenticated } = useAuthentication(props.partnerId, props.loginWithSiwe);
10
10
  const isMobile = useIsMobile();
11
11
  useEffect(() => {
12
12
  if (account) {
@@ -24,7 +24,7 @@ export function SignInWithB3(props) {
24
24
  if (isAuthenticated) {
25
25
  return _jsx(ManageAccountButton, { ...props });
26
26
  }
27
- if (isAuthenticatingV2) {
27
+ if (isAuthenticating) {
28
28
  return (_jsx(StyleRoot, { children: _jsxs(Button, { disabled: true, style: { backgroundColor: "#3368ef" }, className: "flex items-center gap-2 text-white", children: [props.withLogo !== false && (_jsx("img", { src: "https://cdn.b3.fun/b3_logo_white.svg", alt: "B3 Logo", className: "h-5 w-5" })), props.loadingButtonText || (isMobile ? _jsx(Loading, { size: "sm" }) : "Signing in…")] }) }));
29
29
  }
30
30
  return (_jsx(StyleRoot, { children: _jsx(Button, { onClick: handleClick, style: { backgroundColor: "#3368ef" }, className: "b3-sign-in-button flex items-center gap-2 font-medium text-white", children: props.buttonText ? (props.buttonText) : (_jsxs(_Fragment, { children: [_jsx("span", { children: "Sign in with" }), props.withLogo !== false && (_jsx("img", { src: "https://cdn.b3.fun/b3_logo_white.svg", alt: "B3 Logo", className: "h-5 w-6" }))] })) }) }));
@@ -19,7 +19,6 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
19
19
  const { setB3ModalContentType, setB3ModalOpen, isOpen } = useModalStore();
20
20
  const account = useActiveAccount();
21
21
  const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
22
- const setIsAuthenticatingV2 = useAuthStore(state => state.setIsAuthenticatingV2);
23
22
  const isAuthenticating = useAuthStore(state => state.isAuthenticating);
24
23
  const isConnected = useAuthStore(state => state.isConnected);
25
24
  const setIsConnected = useAuthStore(state => state.setIsConnected);
@@ -164,7 +163,6 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
164
163
  if (loginWithSiwe) {
165
164
  debug("setIsAuthenticating:true:1");
166
165
  setIsAuthenticating(true);
167
- setIsAuthenticatingV2(true);
168
166
  const userAuth = await authenticate(account, partnerId);
169
167
  setUser(userAuth.user);
170
168
  }
@@ -172,17 +170,7 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
172
170
  onLoginSuccess?.(account);
173
171
  debug("setIsAuthenticating:false:1");
174
172
  setIsAuthenticating(false);
175
- setIsAuthenticatingV2(false);
176
- }, [
177
- loginWithSiwe,
178
- onLoginSuccess,
179
- setIsAuthenticating,
180
- authenticate,
181
- partnerId,
182
- setUser,
183
- setIsConnected,
184
- setIsAuthenticatingV2,
185
- ]);
173
+ }, [loginWithSiwe, onLoginSuccess, authenticate, partnerId, setUser, setIsConnected, setIsAuthenticating]);
186
174
  useEffect(() => {
187
175
  if (step === "permissions") {
188
176
  setB3ModalContentType({
@@ -6,7 +6,6 @@ const debug = debugB3React("SignInWithB3Privy");
6
6
  export function SignInWithB3Privy({ onSuccess, onError, partnerId, chain }) {
7
7
  const { isLoading, connectTw, fullToken } = useHandleConnectWithPrivy(partnerId, chain, onSuccess);
8
8
  const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
9
- const setIsAuthenticatingV2 = useAuthStore(state => state.setIsAuthenticatingV2);
10
9
  const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
11
10
  const { logout } = useAuthentication(partnerId);
12
11
  debug("@@SignInWithB3Privy", {
@@ -34,11 +33,10 @@ export function SignInWithB3Privy({ onSuccess, onError, partnerId, chain }) {
34
33
  finally {
35
34
  debug("setIsAuthenticating:false:7");
36
35
  setIsAuthenticating(false);
37
- setIsAuthenticatingV2(false);
38
36
  }
39
37
  }
40
38
  autoConnect();
41
- }, [connectTw, onSuccess, onError, setIsAuthenticating, setIsAuthenticated, logout, setIsAuthenticatingV2]);
39
+ }, [connectTw, onSuccess, onError, setIsAuthenticated, logout, setIsAuthenticating]);
42
40
  // Currently we auto login, so we can show loading immediately and the onSuccess will proceed to the next modal
43
41
  return (_jsx("div", { className: "flex aspect-square items-center justify-center p-6", children: _jsx(Loading, { variant: "white", size: "lg" }) }));
44
42
  }
@@ -21,7 +21,6 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }) {
21
21
  });
22
22
  const { theme } = useB3();
23
23
  const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
24
- const setIsAuthenticatingV2 = useAuthStore(state => state.setIsAuthenticatingV2);
25
24
  const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
26
25
  const { logout } = useAuthentication(partnerId);
27
26
  return (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx(ConnectEmbed, { showThirdwebBranding: false, client: client, chain: chain, wallets: [wallet], theme: theme === "light"
@@ -62,7 +61,6 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }) {
62
61
  }, className: "b3-login-step", onConnect: async (wallet) => {
63
62
  try {
64
63
  setIsAuthenticating(true);
65
- setIsAuthenticatingV2(true);
66
64
  debug("setIsAuthenticating:true:6");
67
65
  const account = wallet.getAccount();
68
66
  if (!account)
@@ -79,7 +77,6 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }) {
79
77
  finally {
80
78
  debug("setIsAuthenticating:false:6");
81
79
  setIsAuthenticating(false);
82
- setIsAuthenticatingV2(false);
83
80
  }
84
81
  } }) }));
85
82
  }
@@ -10,7 +10,6 @@ export function LoginStepCustom({ onSuccess, onError, partnerId, chain, strategi
10
10
  const [showAllWallets, setShowAllWallets] = useState(false);
11
11
  const { connect } = useConnect(partnerId, chain);
12
12
  const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
13
- const setIsAuthenticatingV2 = useAuthStore(state => state.setIsAuthenticatingV2);
14
13
  const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
15
14
  const { logout } = useAuthentication(partnerId);
16
15
  const { connect: connectTW } = useConnectTW();
@@ -24,7 +23,6 @@ export function LoginStepCustom({ onSuccess, onError, partnerId, chain, strategi
24
23
  setIsLoading(true);
25
24
  debug("setIsAuthenticating:true:3");
26
25
  setIsAuthenticating(true);
27
- setIsAuthenticatingV2(true);
28
26
  const options = getConnectOptionsFromStrategy(strategy);
29
27
  let connectResult;
30
28
  if (automaticallySetFirstEoa) {
@@ -59,7 +57,6 @@ export function LoginStepCustom({ onSuccess, onError, partnerId, chain, strategi
59
57
  setIsLoading(false);
60
58
  debug("setIsAuthenticating:false:3");
61
59
  setIsAuthenticating(false);
62
- setIsAuthenticatingV2(false);
63
60
  }
64
61
  };
65
62
  return (_jsxs(LoginStepContainer, { partnerId: partnerId, children: [authStrategies.length > 0 && (_jsx("div", { className: "mb-6 grid w-full grid-cols-4 gap-4", children: authStrategies.map(strategy => {
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ export interface AppleIconProps {
3
+ className?: string;
4
+ size?: number;
5
+ color?: string;
6
+ style?: React.CSSProperties;
7
+ }
8
+ export declare function AppleIcon({ className, size, color, style }: AppleIconProps): import("react/jsx-runtime").JSX.Element;
9
+ export default AppleIcon;
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ export function AppleIcon({ className, size = 24, color = "currentColor", style }) {
3
+ return (_jsx("svg", { width: size, height: size, viewBox: "0 0 41.5 51", xmlns: "http://www.w3.org/2000/svg", className: className, style: style, children: _jsx("g", { children: _jsx("path", { fill: color, d: "M40.2,17.4c-3.4,2.1-5.5,5.7-5.5,9.7c0,4.5,2.7,8.6,6.8,10.3c-0.8,2.6-2,5-3.5,7.2c-2.2,3.1-4.5,6.3-7.9,6.3s-4.4-2-8.4-2\n\t\tc-3.9,0-5.3,2.1-8.5,2.1s-5.4-2.9-7.9-6.5C2,39.5,0.1,33.7,0,27.6c0-9.9,6.4-15.2,12.8-15.2c3.4,0,6.2,2.2,8.3,2.2\n\t\tc2,0,5.2-2.3,9-2.3C34.1,12.2,37.9,14.1,40.2,17.4z M28.3,8.1C30,6.1,30.9,3.6,31,1c0-0.3,0-0.7-0.1-1c-2.9,0.3-5.6,1.7-7.5,3.9\n\t\tc-1.7,1.9-2.7,4.3-2.8,6.9c0,0.3,0,0.6,0.1,0.9c0.2,0,0.5,0.1,0.7,0.1C24.1,11.6,26.6,10.2,28.3,8.1z" }) }) }));
4
+ }
5
+ export default AppleIcon;
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ export interface DiscordIconProps {
3
+ className?: string;
4
+ size?: number;
5
+ color?: string;
6
+ style?: React.CSSProperties;
7
+ }
8
+ export declare function DiscordIcon({ className, size, color, style }: DiscordIconProps): import("react/jsx-runtime").JSX.Element;
9
+ export default DiscordIcon;
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ export function DiscordIcon({ className, size = 24, color = "#5865F2", style }) {
3
+ return (_jsx("svg", { width: size, height: size, viewBox: "0 -28.5 256 256", xmlns: "http://www.w3.org/2000/svg", className: className, style: style, preserveAspectRatio: "xMidYMid", children: _jsx("g", { children: _jsx("path", { d: "M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z", fill: color, fillRule: "nonzero" }) }) }));
4
+ }
5
+ export default DiscordIcon;
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ export interface FarcasterIconProps {
3
+ className?: string;
4
+ size?: number;
5
+ color?: string;
6
+ style?: React.CSSProperties;
7
+ }
8
+ export declare function FarcasterIcon({ className, size, color, style }: FarcasterIconProps): import("react/jsx-runtime").JSX.Element;
9
+ export default FarcasterIcon;
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ export function FarcasterIcon({ className, size = 24, color = "#855DCD", style }) {
3
+ return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 1000 1000", xmlns: "http://www.w3.org/2000/svg", className: className, style: style, children: [_jsx("rect", { width: "1000", height: "1000", rx: "200", fill: color }), _jsx("path", { d: "M257.778 155.556H742.222V844.444H671.111V528.889H670.414C662.554 441.677 589.258 373.333 500 373.333C410.742 373.333 337.446 441.677 329.586 528.889H328.889V844.444H257.778V155.556Z", fill: "white" }), _jsx("path", { d: "M128.889 253.333L157.778 351.111H182.222V746.667C169.949 746.667 160 756.616 160 768.889V795.556H155.556C143.283 795.556 133.333 805.505 133.333 817.778V844.444H382.222V817.778C382.222 805.505 372.273 795.556 360 795.556H355.556V768.889C355.556 756.616 345.606 746.667 333.333 746.667H306.667V253.333H128.889Z", fill: "white" }), _jsx("path", { d: "M675.556 746.667C663.283 746.667 653.333 756.616 653.333 768.889V795.556H648.889C636.616 795.556 626.667 805.505 626.667 817.778V844.444H875.556V817.778C875.556 805.505 865.606 795.556 853.333 795.556H848.889V768.889C848.889 756.616 838.94 746.667 826.667 746.667V351.111H851.111L880 253.333H702.222V746.667H675.556Z", fill: "white" })] }));
4
+ }
5
+ export default FarcasterIcon;
@@ -0,0 +1,8 @@
1
+ import React from "react";
2
+ export interface GoogleIconProps {
3
+ className?: string;
4
+ size?: number;
5
+ style?: React.CSSProperties;
6
+ }
7
+ export declare function GoogleIcon({ className, size, style }: GoogleIconProps): import("react/jsx-runtime").JSX.Element;
8
+ export default GoogleIcon;
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ export function GoogleIcon({ className, size = 24, style }) {
3
+ return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", className: className, style: style, children: [_jsx("path", { fill: "#EA4335", d: "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" }), _jsx("path", { fill: "#4285F4", d: "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" }), _jsx("path", { fill: "#FBBC05", d: "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" }), _jsx("path", { fill: "#34A853", d: "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" }), _jsx("path", { fill: "none", d: "M0 0h48v48H0z" })] }));
4
+ }
5
+ export default GoogleIcon;
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ export interface XIconProps {
3
+ className?: string;
4
+ size?: number;
5
+ color?: string;
6
+ style?: React.CSSProperties;
7
+ }
8
+ export declare function XIcon({ className, size, color, style }: XIconProps): import("react/jsx-runtime").JSX.Element;
9
+ export default XIcon;
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ export function XIcon({ className, size = 24, color = "currentColor", style }) {
3
+ return (_jsx("svg", { width: size, height: size, viewBox: "0 0 300 300.251", xmlns: "http://www.w3.org/2000/svg", className: className, style: style, children: _jsx("path", { d: "M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66", fill: color }) }));
4
+ }
5
+ export default XIcon;
@@ -1,6 +1,7 @@
1
1
  import { useB3, useProfile } from "../../../global-account/react/index.js";
2
2
  import { ecosystemWalletId } from "../../../shared/constants/index.js";
3
3
  import { debugB3React } from "../../../shared/utils/debug.js";
4
+ import { getIpfsUrl } from "../../../shared/utils/ipfs.js";
4
5
  import { useEffect, useMemo, useState } from "react";
5
6
  import { getLastAuthProvider, useActiveWallet, useConnectedWallets, useWalletImage } from "thirdweb/react";
6
7
  import { socialIcons } from "thirdweb/wallets/in-app";
@@ -17,7 +18,7 @@ function useLastAuthProvider() {
17
18
  return lastAuthProvider;
18
19
  }
19
20
  export function useAccountWallet() {
20
- const { account } = useB3();
21
+ const { account, user } = useB3();
21
22
  const activeWallet = useActiveWallet();
22
23
  const connectedWallets = useConnectedWallets();
23
24
  const connectedSmartWallet = connectedWallets.find(wallet => wallet.id === ecosystemWalletId);
@@ -38,7 +39,7 @@ export function useAccountWallet() {
38
39
  : "https://gradvatar.com/0x0000000000000000000000000000000000000000"; // show smart wallet of eoa wallet is gradvatar
39
40
  const { data: profileData } = useProfile({ address: account?.address });
40
41
  const ensName = profileData?.displayName?.replace(/\.b3\.fun/g, "");
41
- const avatarUrl = profileData?.avatar;
42
+ const avatarUrl = user?.avatar ? getIpfsUrl(user?.avatar) : profileData?.avatar;
42
43
  const res = useMemo(() => ({
43
44
  wallet: {
44
45
  ...account,
@@ -1,7 +1,6 @@
1
1
  import { preAuthenticate } from "thirdweb/wallets/in-app";
2
2
  export declare function useAuthentication(partnerId: string, loginWithSiwe?: boolean): {
3
3
  logout: (callback?: () => void) => Promise<void>;
4
- isAuthenticating: boolean;
5
4
  isAuthenticated: boolean;
6
5
  isReady: boolean;
7
6
  isConnecting: boolean;
@@ -9,5 +8,5 @@ export declare function useAuthentication(partnerId: string, loginWithSiwe?: boo
9
8
  wallet: import("thirdweb/dist/types/wallets/in-app/core/wallet/types").EcosystemWallet;
10
9
  preAuthenticate: typeof preAuthenticate;
11
10
  connect: (strategyOptions?: import("thirdweb/wallets").SingleStepAuthArgsType) => Promise<import("thirdweb/wallets").Wallet | null>;
12
- isAuthenticatingV2: boolean;
11
+ isAuthenticating: boolean;
13
12
  };