@b3dotfun/sdk 0.0.35-alpha.2 → 0.0.35-alpha.4
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.
- package/dist/cjs/global-account/bsmnt.d.ts +2 -0
- package/dist/cjs/global-account/bsmnt.js +42 -1
- package/dist/cjs/global-account/react/components/AvatarCreator/AvatarCreator.d.ts +6 -0
- package/dist/cjs/global-account/react/components/AvatarCreator/AvatarCreator.js +55 -0
- package/dist/cjs/global-account/react/components/AvatarEditor/AvatarEditor.d.ts +6 -0
- package/dist/cjs/global-account/react/components/AvatarEditor/AvatarEditor.js +108 -0
- package/dist/cjs/global-account/react/components/B3DynamicModal.js +9 -1
- package/dist/cjs/global-account/react/components/ManageAccount/BalanceContent.d.ts +3 -1
- package/dist/cjs/global-account/react/components/ManageAccount/BalanceContent.js +19 -5
- package/dist/cjs/global-account/react/components/ManageAccount/ManageAccount.d.ts +3 -1
- package/dist/cjs/global-account/react/components/ManageAccount/ManageAccount.js +6 -6
- package/dist/cjs/global-account/react/hooks/useAccountWallet.js +3 -2
- package/dist/cjs/global-account/react/hooks/useAuthentication.js +7 -0
- package/dist/cjs/global-account/react/hooks/useProfile.d.ts +1 -1
- package/dist/cjs/global-account/react/hooks/useRPMToken.d.ts +7 -0
- package/dist/cjs/global-account/react/hooks/useRPMToken.js +11 -0
- package/dist/cjs/global-account/react/stores/useModalStore.d.ts +11 -1
- package/dist/cjs/global-account/react/utils/updateAvatar.d.ts +4 -0
- package/dist/cjs/global-account/react/utils/updateAvatar.js +54 -0
- package/dist/esm/global-account/bsmnt.d.ts +2 -0
- package/dist/esm/global-account/bsmnt.js +39 -0
- package/dist/esm/global-account/react/components/AvatarCreator/AvatarCreator.d.ts +6 -0
- package/dist/esm/global-account/react/components/AvatarCreator/AvatarCreator.js +52 -0
- package/dist/esm/global-account/react/components/AvatarEditor/AvatarEditor.d.ts +6 -0
- package/dist/esm/global-account/react/components/AvatarEditor/AvatarEditor.js +102 -0
- package/dist/esm/global-account/react/components/B3DynamicModal.js +9 -1
- package/dist/esm/global-account/react/components/ManageAccount/BalanceContent.d.ts +3 -1
- package/dist/esm/global-account/react/components/ManageAccount/BalanceContent.js +20 -6
- package/dist/esm/global-account/react/components/ManageAccount/ManageAccount.d.ts +3 -1
- package/dist/esm/global-account/react/components/ManageAccount/ManageAccount.js +6 -6
- package/dist/esm/global-account/react/hooks/useAccountWallet.js +3 -2
- package/dist/esm/global-account/react/hooks/useAuthentication.js +7 -0
- package/dist/esm/global-account/react/hooks/useProfile.d.ts +1 -1
- package/dist/esm/global-account/react/hooks/useRPMToken.d.ts +7 -0
- package/dist/esm/global-account/react/hooks/useRPMToken.js +8 -0
- package/dist/esm/global-account/react/stores/useModalStore.d.ts +11 -1
- package/dist/esm/global-account/react/utils/updateAvatar.d.ts +4 -0
- package/dist/esm/global-account/react/utils/updateAvatar.js +18 -0
- package/dist/styles/index.css +1 -1
- package/dist/types/global-account/bsmnt.d.ts +2 -0
- package/dist/types/global-account/react/components/AvatarCreator/AvatarCreator.d.ts +6 -0
- package/dist/types/global-account/react/components/AvatarEditor/AvatarEditor.d.ts +6 -0
- package/dist/types/global-account/react/components/ManageAccount/BalanceContent.d.ts +3 -1
- package/dist/types/global-account/react/components/ManageAccount/ManageAccount.d.ts +3 -1
- package/dist/types/global-account/react/hooks/useProfile.d.ts +1 -1
- package/dist/types/global-account/react/hooks/useRPMToken.d.ts +7 -0
- package/dist/types/global-account/react/stores/useModalStore.d.ts +11 -1
- package/dist/types/global-account/react/utils/updateAvatar.d.ts +4 -0
- package/package.json +6 -5
- package/src/global-account/bsmnt.ts +47 -0
- package/src/global-account/react/components/AvatarCreator/AvatarCreator.tsx +90 -0
- package/src/global-account/react/components/AvatarEditor/AvatarEditor.tsx +233 -0
- package/src/global-account/react/components/B3DynamicModal.tsx +27 -2
- package/src/global-account/react/components/ManageAccount/BalanceContent.tsx +63 -35
- package/src/global-account/react/components/ManageAccount/ManageAccount.tsx +106 -78
- package/src/global-account/react/hooks/useAccountWallet.tsx +3 -2
- package/src/global-account/react/hooks/useAuthentication.ts +9 -0
- package/src/global-account/react/hooks/useProfile.ts +1 -1
- package/src/global-account/react/hooks/useRPMToken.ts +17 -0
- package/src/global-account/react/stores/useModalStore.ts +13 -1
- package/src/global-account/react/utils/updateAvatar.ts +21 -0
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
declare const app: import("@b3dotfun/basement-api").ClientApplication;
|
|
2
2
|
export declare const authenticate: (accessToken: string, identityToken: string, params?: Record<string, any>) => Promise<import("@feathersjs/authentication").AuthenticationResult | null>;
|
|
3
3
|
export declare const resetSocket: () => void;
|
|
4
|
+
export declare function extractAvatarIdFromUrl(url: string): string | null;
|
|
5
|
+
export declare const authenticateWithB3JWT: (fullToken: string, params?: Record<string, any>) => Promise<import("@feathersjs/authentication").AuthenticationResult | null>;
|
|
4
6
|
export default app;
|
|
@@ -3,12 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.resetSocket = exports.authenticate = void 0;
|
|
6
|
+
exports.authenticateWithB3JWT = exports.resetSocket = exports.authenticate = void 0;
|
|
7
|
+
exports.extractAvatarIdFromUrl = extractAvatarIdFromUrl;
|
|
7
8
|
const basement_api_1 = require("@b3dotfun/basement-api");
|
|
9
|
+
const debug_1 = require("../shared/utils/debug");
|
|
8
10
|
const authentication_client_1 = require("@feathersjs/authentication-client");
|
|
9
11
|
const socketio_client_1 = __importDefault(require("@feathersjs/socketio-client"));
|
|
10
12
|
const js_cookie_1 = __importDefault(require("js-cookie"));
|
|
11
13
|
const socket_io_client_1 = __importDefault(require("socket.io-client"));
|
|
14
|
+
const debug = (0, debug_1.debugB3React)("bsmnt");
|
|
12
15
|
// Also use b3 auth token since we are using b3-jwt strategy
|
|
13
16
|
const BSMNT_AUTH_COOKIE_NAME = "b3-auth";
|
|
14
17
|
const BSMNT_API_URL = process.env.EXPO_PUBLIC_BSMNT_API ||
|
|
@@ -66,4 +69,42 @@ const resetSocket = () => {
|
|
|
66
69
|
// reset the socket connection
|
|
67
70
|
};
|
|
68
71
|
exports.resetSocket = resetSocket;
|
|
72
|
+
function extractAvatarIdFromUrl(url) {
|
|
73
|
+
const regex = /https:\/\/models\.readyplayer\.me\/([a-f0-9]{24})\.[a-zA-Z0-9]+/;
|
|
74
|
+
const match = url.match(regex);
|
|
75
|
+
return match ? match[1] : null;
|
|
76
|
+
}
|
|
77
|
+
const authenticateWithB3JWT = async (fullToken, params) => {
|
|
78
|
+
// Do not authenticate if there is no token
|
|
79
|
+
if (!fullToken) {
|
|
80
|
+
console.log("No token found, not authenticating");
|
|
81
|
+
return null;
|
|
82
|
+
}
|
|
83
|
+
debug("Authenticating with token:12", fullToken);
|
|
84
|
+
try {
|
|
85
|
+
const response = await app.authenticate({
|
|
86
|
+
strategy: "b3-jwt",
|
|
87
|
+
accessToken: fullToken,
|
|
88
|
+
}, {
|
|
89
|
+
query: params || {},
|
|
90
|
+
});
|
|
91
|
+
debug("Authenticated", response);
|
|
92
|
+
// Store streamToken if it exists in the response
|
|
93
|
+
if (response?.streamToken) {
|
|
94
|
+
js_cookie_1.default.set("stream-token", response.streamToken, {
|
|
95
|
+
expires: new Date(response.authExpires),
|
|
96
|
+
secure: process.env.NODE_ENV === "production",
|
|
97
|
+
sameSite: "strict",
|
|
98
|
+
});
|
|
99
|
+
debug("Stream token stored in cookies");
|
|
100
|
+
}
|
|
101
|
+
return response;
|
|
102
|
+
}
|
|
103
|
+
catch (error) {
|
|
104
|
+
debug(`Authentication error:5`, error);
|
|
105
|
+
debug("Authentication JWT", fullToken);
|
|
106
|
+
return null;
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
exports.authenticateWithB3JWT = authenticateWithB3JWT;
|
|
69
110
|
exports.default = app;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.AvatarCreator = AvatarCreator;
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const react_1 = require("../../../../global-account/react");
|
|
7
|
+
const useRPMToken_1 = require("../../../../global-account/react/hooks/useRPMToken");
|
|
8
|
+
const updateAvatar_1 = require("../../../../global-account/react/utils/updateAvatar");
|
|
9
|
+
const cn_1 = require("../../../../shared/utils/cn");
|
|
10
|
+
const debug_1 = require("../../../../shared/utils/debug");
|
|
11
|
+
const react_avatar_creator_1 = require("@readyplayerme/react-avatar-creator");
|
|
12
|
+
const react_2 = require("react");
|
|
13
|
+
const sonner_1 = require("sonner");
|
|
14
|
+
const react_3 = require("thirdweb/react");
|
|
15
|
+
const debug = (0, debug_1.debugB3React)("AvatarCreator");
|
|
16
|
+
const config = {
|
|
17
|
+
clearCache: true,
|
|
18
|
+
bodyType: "fullbody",
|
|
19
|
+
quickStart: true,
|
|
20
|
+
language: "en",
|
|
21
|
+
};
|
|
22
|
+
function AvatarCreator({ onSetAvatar, className }) {
|
|
23
|
+
const { token, refetch: refetchRPMToken } = (0, useRPMToken_1.useRPMToken)();
|
|
24
|
+
const [loading, setIsLoading] = (0, react_2.useState)(false);
|
|
25
|
+
const account = (0, react_3.useActiveAccount)();
|
|
26
|
+
const { data: profile, refetch: refreshProfile } = (0, react_1.useProfile)({
|
|
27
|
+
address: account?.address,
|
|
28
|
+
fresh: true,
|
|
29
|
+
});
|
|
30
|
+
const hasAvatar = profile?.avatar;
|
|
31
|
+
const handleOnAvatarExported = async (event) => {
|
|
32
|
+
setIsLoading(true);
|
|
33
|
+
debug("@@AvatarExportedEvent", event);
|
|
34
|
+
try {
|
|
35
|
+
const avatarUpload = await (0, updateAvatar_1.updateAvatar)(event.data.url);
|
|
36
|
+
debug("@@avatarUpload", avatarUpload);
|
|
37
|
+
await refreshProfile();
|
|
38
|
+
sonner_1.toast.success(hasAvatar ? "Nice look! Your avatar has been updated!" : "Looks great! Your avatar has been saved!");
|
|
39
|
+
onSetAvatar?.();
|
|
40
|
+
await refetchRPMToken(undefined);
|
|
41
|
+
}
|
|
42
|
+
catch (e) {
|
|
43
|
+
debug("@@error:AvatarCreator", e);
|
|
44
|
+
sonner_1.toast.error("Failed to update avatar. Please try again.");
|
|
45
|
+
}
|
|
46
|
+
setIsLoading(false);
|
|
47
|
+
};
|
|
48
|
+
if (loading) {
|
|
49
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-[80vh] w-full flex-col items-center justify-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted-foreground text-sm font-medium", children: "Saving your avatar" })] }));
|
|
50
|
+
}
|
|
51
|
+
if (!token) {
|
|
52
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-[80vh] w-full flex-col items-center justify-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted-foreground text-sm font-medium", children: "Loading avatar creator" })] }));
|
|
53
|
+
}
|
|
54
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("h-[calc(90vh-2px)] w-full", className), children: (0, jsx_runtime_1.jsx)(react_avatar_creator_1.AvatarCreator, { className: "h-full w-full", subdomain: "b3", config: { ...config, token }, onAvatarExported: handleOnAvatarExported }) }));
|
|
55
|
+
}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
exports.AvatarEditor = AvatarEditor;
|
|
8
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
9
|
+
const app_1 = __importDefault(require("../../../../global-account/app"));
|
|
10
|
+
const react_1 = require("../../../../global-account/react");
|
|
11
|
+
const cn_1 = require("../../../../shared/utils/cn");
|
|
12
|
+
const debug_1 = require("../../../../shared/utils/debug");
|
|
13
|
+
const thirdweb_1 = require("../../../../shared/utils/thirdweb");
|
|
14
|
+
const lucide_react_1 = require("lucide-react");
|
|
15
|
+
const react_2 = require("react");
|
|
16
|
+
const sonner_1 = require("sonner");
|
|
17
|
+
const react_3 = require("thirdweb/react");
|
|
18
|
+
const storage_1 = require("thirdweb/storage");
|
|
19
|
+
const debug = (0, debug_1.debugB3React)("AvatarEditor");
|
|
20
|
+
function AvatarEditor({ onSetAvatar, className }) {
|
|
21
|
+
const [selectedFile, setSelectedFile] = (0, react_2.useState)(null);
|
|
22
|
+
const [previewUrl, setPreviewUrl] = (0, react_2.useState)(null);
|
|
23
|
+
const [isUploading, setIsUploading] = (0, react_2.useState)(false);
|
|
24
|
+
const [isSaving, setIsSaving] = (0, react_2.useState)(false);
|
|
25
|
+
const fileInputRef = (0, react_2.useRef)(null);
|
|
26
|
+
const { setUser } = (0, react_1.useB3)();
|
|
27
|
+
const account = (0, react_3.useActiveAccount)();
|
|
28
|
+
const { data: profile, refetch: refreshProfile } = (0, react_1.useProfile)({
|
|
29
|
+
address: account?.address,
|
|
30
|
+
fresh: true,
|
|
31
|
+
});
|
|
32
|
+
// Thirdweb upload function
|
|
33
|
+
const hasAvatar = profile?.avatar;
|
|
34
|
+
const handleFileSelect = (event) => {
|
|
35
|
+
const file = event.target.files?.[0];
|
|
36
|
+
if (file) {
|
|
37
|
+
// Validate file type
|
|
38
|
+
if (!file.type.startsWith("image/")) {
|
|
39
|
+
sonner_1.toast.error("Please select an image file");
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
// Validate file size (max 5MB)
|
|
43
|
+
if (file.size > 5 * 1024 * 1024) {
|
|
44
|
+
sonner_1.toast.error("File size must be less than 5MB");
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
setSelectedFile(file);
|
|
48
|
+
// Create preview URL
|
|
49
|
+
const url = URL.createObjectURL(file);
|
|
50
|
+
setPreviewUrl(url);
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
const handleRemoveFile = () => {
|
|
54
|
+
setSelectedFile(null);
|
|
55
|
+
if (previewUrl) {
|
|
56
|
+
URL.revokeObjectURL(previewUrl);
|
|
57
|
+
setPreviewUrl(null);
|
|
58
|
+
}
|
|
59
|
+
if (fileInputRef.current) {
|
|
60
|
+
fileInputRef.current.value = "";
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
const handleUpload = async () => {
|
|
64
|
+
if (!selectedFile) {
|
|
65
|
+
sonner_1.toast.error("Please select an image first");
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
setIsUploading(true);
|
|
69
|
+
try {
|
|
70
|
+
debug("Starting upload to IPFS", selectedFile);
|
|
71
|
+
// Upload to IPFS using Thirdweb
|
|
72
|
+
const ipfsUrl = await (0, storage_1.upload)({
|
|
73
|
+
client: thirdweb_1.client,
|
|
74
|
+
files: [selectedFile],
|
|
75
|
+
});
|
|
76
|
+
debug("Upload successful", ipfsUrl);
|
|
77
|
+
// Save avatar URL using profiles service
|
|
78
|
+
setIsSaving(true);
|
|
79
|
+
const user = await app_1.default.service("users").setAvatar({
|
|
80
|
+
avatar: ipfsUrl,
|
|
81
|
+
},
|
|
82
|
+
// @ts-expect-error - our typed client is expecting context even though it's set elsewhere
|
|
83
|
+
{});
|
|
84
|
+
// update user
|
|
85
|
+
// @ts-expect-error this resolved fine, look into why expect-error needed
|
|
86
|
+
setUser(user);
|
|
87
|
+
// Refresh profile to get updated avatar
|
|
88
|
+
await refreshProfile();
|
|
89
|
+
sonner_1.toast.success(hasAvatar ? "Nice look! Your avatar has been updated!" : "Looks great! Your avatar has been saved!");
|
|
90
|
+
onSetAvatar?.();
|
|
91
|
+
// Clean up
|
|
92
|
+
handleRemoveFile();
|
|
93
|
+
}
|
|
94
|
+
catch (error) {
|
|
95
|
+
debug("Error uploading avatar:", error);
|
|
96
|
+
sonner_1.toast.error("Failed to upload avatar. Please try again.");
|
|
97
|
+
}
|
|
98
|
+
finally {
|
|
99
|
+
setIsUploading(false);
|
|
100
|
+
setIsSaving(false);
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
const handleFileInputClick = () => {
|
|
104
|
+
fileInputRef.current?.click();
|
|
105
|
+
};
|
|
106
|
+
const isLoading = isUploading || isSaving;
|
|
107
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex flex-col items-center justify-center space-y-6 p-8", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-2 text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "font-neue-montreal-semibold text-b3-grey text-2xl", children: hasAvatar ? "Update Your Avatar" : "Set Your Avatar" }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium", children: "Upload an image to personalize your profile" })] }), hasAvatar && !previewUrl && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("div", { className: "border-b3-primary-blue h-32 w-32 overflow-hidden rounded-full border-4", children: (0, jsx_runtime_1.jsx)("img", { src: profile.avatar, alt: "Current avatar", className: "h-full w-full object-cover" }) }) })), (0, jsx_runtime_1.jsxs)("div", { className: "w-full max-w-md", children: [!selectedFile ? ((0, jsx_runtime_1.jsxs)("div", { onClick: handleFileInputClick, className: "border-b3-line hover:border-b3-primary-blue hover:bg-b3-primary-wash/20 cursor-pointer rounded-xl border-2 border-dashed p-8 text-center transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "text-b3-grey mx-auto mb-4 h-12 w-12" }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-grey font-neue-montreal-semibold mb-2", children: "Click to select an image" }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "PNG, JPG, or GIF up to 5MB" })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "border-b3-primary-blue mx-auto h-32 w-32 overflow-hidden rounded-full border-4", children: previewUrl ? ((0, jsx_runtime_1.jsx)("img", { src: previewUrl, alt: "Preview", className: "h-full w-full object-cover" })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash flex h-full w-full items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "No file selected" }) })) }), (0, jsx_runtime_1.jsx)("button", { onClick: handleRemoveFile, className: "bg-b3-negative absolute -right-2 -top-2 flex h-8 w-8 items-center justify-center rounded-full text-white transition-colors hover:bg-red-600", disabled: isLoading, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-1 text-center", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: selectedFile.name }), (0, jsx_runtime_1.jsxs)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-xs", children: [(selectedFile.size / 1024 / 1024).toFixed(2), " MB"] })] })] })), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileSelect, className: "hidden" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full max-w-md gap-3", children: [selectedFile && ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: handleUpload, disabled: isLoading, className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 flex-1 text-white", children: isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isUploading ? "Uploading..." : "Saving..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "mr-2 h-4 w-4" }), hasAvatar ? "Update Avatar" : "Set Avatar"] })) })), (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "outline", onClick: handleFileInputClick, disabled: isLoading, className: "flex-1", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "mr-2 h-4 w-4" }), selectedFile ? "Change Image" : "Select Image"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted font-neue-montreal-medium max-w-md text-center text-xs", children: (0, jsx_runtime_1.jsx)("p", { children: "Your avatar will be uploaded to IPFS and stored securely. Make sure you have the rights to use this image." }) })] }));
|
|
108
|
+
}
|
|
@@ -7,6 +7,7 @@ const AnyspendDepositHype_1 = require("../../../anyspend/react/components/Anyspe
|
|
|
7
7
|
const react_2 = require("../../../global-account/react");
|
|
8
8
|
const cn_1 = require("../../../shared/utils/cn");
|
|
9
9
|
const debug_1 = require("../../../shared/utils/debug");
|
|
10
|
+
const AvatarEditor_1 = require("./AvatarEditor/AvatarEditor");
|
|
10
11
|
const useB3_1 = require("./B3Provider/useB3");
|
|
11
12
|
const LinkAccount_1 = require("./LinkAccount/LinkAccount");
|
|
12
13
|
const ManageAccount_1 = require("./ManageAccount/ManageAccount");
|
|
@@ -32,6 +33,7 @@ function B3DynamicModal() {
|
|
|
32
33
|
"anySpendSignatureMint",
|
|
33
34
|
"anySpendBondKit",
|
|
34
35
|
"linkAccount",
|
|
36
|
+
"avatarEditor",
|
|
35
37
|
];
|
|
36
38
|
const freestyleTypes = [
|
|
37
39
|
"anySpendNft",
|
|
@@ -83,6 +85,8 @@ function B3DynamicModal() {
|
|
|
83
85
|
return (0, jsx_runtime_1.jsx)(LinkAccount_1.LinkAccount, { ...contentType });
|
|
84
86
|
case "anySpendDepositHype":
|
|
85
87
|
return (0, jsx_runtime_1.jsx)(AnyspendDepositHype_1.AnySpendDepositHype, { ...contentType, mode: "modal" });
|
|
88
|
+
case "avatarEditor":
|
|
89
|
+
return (0, jsx_runtime_1.jsx)(AvatarEditor_1.AvatarEditor, { onSetAvatar: contentType.onSuccess });
|
|
86
90
|
// Add other modal types here
|
|
87
91
|
default:
|
|
88
92
|
return null;
|
|
@@ -92,5 +96,9 @@ function B3DynamicModal() {
|
|
|
92
96
|
const ModalContent = isMobile ? drawer_1.DrawerContent : dialog_1.DialogContent;
|
|
93
97
|
const ModalTitle = isMobile ? drawer_1.DrawerTitle : dialog_1.DialogTitle;
|
|
94
98
|
const ModalDescription = isMobile ? drawer_1.DrawerDescription : dialog_1.DialogDescription;
|
|
95
|
-
return ((0, jsx_runtime_1.
|
|
99
|
+
return ((0, jsx_runtime_1.jsxs)(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: [(0, jsx_runtime_1.jsxs)(ModalContent, { className: (0, cn_1.cn)(contentClass, "rounded-2xl bg-white shadow-xl dark:bg-gray-900", "border border-gray-200 dark:border-gray-800",
|
|
100
|
+
// Remove default width classes for avatar editor
|
|
101
|
+
contentType?.type === "avatarEditor"
|
|
102
|
+
? "!w-[90vw] !max-w-none" // Use !important to override default styles
|
|
103
|
+
: "mx-auto w-full max-w-md sm:max-w-lg"), hideCloseButton: hideCloseButton, children: [(0, jsx_runtime_1.jsx)(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), (0, jsx_runtime_1.jsx)(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]"), children: [history.length > 0 && contentType?.showBackButton && ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }), contentType?.type === "avatarEditor" && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
|
|
96
104
|
}
|
|
@@ -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 {};
|
|
@@ -7,6 +7,7 @@ const BankIcon_1 = require("../../../../global-account/react/components/icons/Ba
|
|
|
7
7
|
const SignOutIcon_1 = require("../../../../global-account/react/components/icons/SignOutIcon");
|
|
8
8
|
const SwapIcon_1 = require("../../../../global-account/react/components/icons/SwapIcon");
|
|
9
9
|
const utils_1 = require("../../../../shared/utils");
|
|
10
|
+
const ipfs_1 = require("../../../../shared/utils/ipfs");
|
|
10
11
|
const lucide_react_1 = require("lucide-react");
|
|
11
12
|
const react_2 = require("react");
|
|
12
13
|
const react_3 = require("thirdweb/react");
|
|
@@ -19,18 +20,31 @@ function centerTruncate(str, length = 4) {
|
|
|
19
20
|
return str;
|
|
20
21
|
return `${str.slice(0, length)}...${str.slice(-length)}`;
|
|
21
22
|
}
|
|
22
|
-
function BalanceContent({ onLogout, partnerId }) {
|
|
23
|
+
function BalanceContent({ onLogout, partnerId, showDeposit = true, showSwap = true }) {
|
|
23
24
|
const account = (0, react_3.useActiveAccount)();
|
|
24
25
|
const { address: eoaAddress, info: eoaInfo } = (0, useFirstEOA_1.useFirstEOA)();
|
|
25
26
|
const { data: profile } = (0, react_1.useProfile)({
|
|
26
27
|
address: eoaAddress || account?.address,
|
|
27
28
|
fresh: true,
|
|
28
29
|
});
|
|
29
|
-
const {
|
|
30
|
+
const { user } = (0, react_1.useB3)();
|
|
31
|
+
const { setB3ModalOpen, setB3ModalContentType, navigateBack } = (0, react_1.useModalStore)();
|
|
30
32
|
const { logout } = (0, react_1.useAuthentication)(partnerId);
|
|
31
33
|
const [logoutLoading, setLogoutLoading] = (0, react_2.useState)(false);
|
|
32
34
|
const [openAccordions, setOpenAccordions] = (0, react_2.useState)([]);
|
|
33
35
|
const hasExpandedRef = (0, react_2.useRef)(false);
|
|
36
|
+
const avatarUrl = user?.avatar ? (0, ipfs_1.getIpfsUrl)(user?.avatar) : profile?.avatar;
|
|
37
|
+
const handleEditAvatar = () => {
|
|
38
|
+
setB3ModalOpen(true);
|
|
39
|
+
setB3ModalContentType({
|
|
40
|
+
type: "avatarEditor",
|
|
41
|
+
showBackButton: true,
|
|
42
|
+
onSuccess: () => {
|
|
43
|
+
// navigate back on success
|
|
44
|
+
navigateBack();
|
|
45
|
+
},
|
|
46
|
+
});
|
|
47
|
+
};
|
|
34
48
|
console.log("eoaAddress", eoaAddress);
|
|
35
49
|
console.log("account?.address", account?.address);
|
|
36
50
|
// Balance data fetching
|
|
@@ -74,18 +88,18 @@ function BalanceContent({ onLogout, partnerId }) {
|
|
|
74
88
|
setB3ModalOpen(false);
|
|
75
89
|
setLogoutLoading(false);
|
|
76
90
|
};
|
|
77
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between", children: (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-avatar relative", children: [
|
|
91
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between", children: (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-avatar relative", children: [avatarUrl ? ((0, jsx_runtime_1.jsx)("img", { src: avatarUrl, alt: "Profile", className: "size-24 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash size-24 rounded-full" })), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 16, className: "text-b3-background" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-info", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-b3-grey text-xl font-semibold", children: profile?.displayName || (0, utils_1.formatUsername)(profile?.name || "") }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "text-b3-foreground-muted font-mono text-xs", children: centerTruncate(account?.address || "", 6) }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: account?.address || "" })] })] })] }) }), (showDeposit || showSwap) && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [showDeposit && ((0, jsx_runtime_1.jsxs)(react_1.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: () => {
|
|
78
92
|
setB3ModalOpen(true);
|
|
79
93
|
setB3ModalContentType({
|
|
80
94
|
type: "anySpend",
|
|
81
95
|
defaultActiveTab: "fiat",
|
|
82
96
|
showBackButton: true,
|
|
83
97
|
});
|
|
84
|
-
}, children: [(0, jsx_runtime_1.jsx)(BankIcon_1.BankIcon, { size: 24, className: "text-b3-primary-blue shrink-0" }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Deposit" })] }), (0, jsx_runtime_1.jsxs)(react_1.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: () => {
|
|
98
|
+
}, children: [(0, jsx_runtime_1.jsx)(BankIcon_1.BankIcon, { size: 24, className: "text-b3-primary-blue shrink-0" }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Deposit" })] })), showSwap && ((0, jsx_runtime_1.jsxs)(react_1.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: () => {
|
|
85
99
|
setB3ModalOpen(true);
|
|
86
100
|
setB3ModalContentType({
|
|
87
101
|
type: "anySpend",
|
|
88
102
|
showBackButton: true,
|
|
89
103
|
});
|
|
90
|
-
}, children: [(0, jsx_runtime_1.jsx)(SwapIcon_1.SwapIcon, { size: 24, className: "text-b3-primary-blue" }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Swap" })] })] }), (0, jsx_runtime_1.jsxs)(accordion_1.Accordion, { type: "multiple", value: openAccordions, onValueChange: setOpenAccordions, className: "space-y-2", children: [(0, jsx_runtime_1.jsxs)(accordion_1.AccordionItem, { value: "global-account", className: "border-none", children: [(0, jsx_runtime_1.jsx)(accordion_1.AccordionTrigger, { className: "text-b3-grey font-neue-montreal-semibold py-2 hover:no-underline", children: (0, jsx_runtime_1.jsx)("span", { children: "Balance" }) }), (0, jsx_runtime_1.jsxs)(accordion_1.AccordionContent, { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(TokenBalanceRow_1.TokenBalanceRow, { icon: (0, jsx_runtime_1.jsx)(TokenIcon_1.B3TokenIcon, { className: "size-10" }), name: "B3", balance: `${b3Balance?.formattedTotal || "0.00"} B3`, usdValue: b3Balance?.balanceUsdFormatted || "0.00", priceChange: b3Balance?.priceChange24h }), (0, jsx_runtime_1.jsx)(TokenBalanceRow_1.TokenBalanceRow, { icon: (0, jsx_runtime_1.jsx)(TokenIcon_1.EthereumTokenIcon, { className: "size-10" }), name: "Ethereum", balance: `${nativeBalance?.formattedTotal || "0.00"} ETH`, usdValue: nativeBalance?.formattedTotalUsd || "0.00", priceChange: nativeBalance?.priceChange24h })] })] }), eoaAddress && ((0, jsx_runtime_1.jsxs)(accordion_1.AccordionItem, { value: "eoa-account", className: "border-none", children: [(0, jsx_runtime_1.jsx)(accordion_1.AccordionTrigger, { className: "text-b3-grey font-neue-montreal-semibold py-2 hover:no-underline", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("span", { children: ["Connected ", eoaInfo?.data?.name || "Wallet"] }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "text-b3-foreground-muted font-mono text-xs", children: centerTruncate(eoaAddress, 6) }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: eoaAddress })] })] }) }), (0, jsx_runtime_1.jsxs)(accordion_1.AccordionContent, { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(TokenBalanceRow_1.TokenBalanceRow, { icon: (0, jsx_runtime_1.jsx)(TokenIcon_1.B3TokenIcon, { className: "size-10" }), name: "B3", balance: `${eoaB3Balance?.formattedTotal || "0.00"} B3`, usdValue: eoaB3Balance?.balanceUsdFormatted || "0.00", priceChange: eoaB3Balance?.priceChange24h }), (0, jsx_runtime_1.jsx)(TokenBalanceRow_1.TokenBalanceRow, { icon: (0, jsx_runtime_1.jsx)(TokenIcon_1.EthereumTokenIcon, { className: "size-10" }), name: "Ethereum", balance: `${eoaNativeBalance?.formattedTotal || "0.00"} ETH`, usdValue: eoaNativeBalance?.formattedTotalUsd || "0.00", priceChange: eoaNativeBalance?.priceChange24h })] })] }))] }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-semibold text-b3-grey", children: "Sign out" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute right-4", children: logoutLoading ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "animate-spin", size: 16 })) : ((0, jsx_runtime_1.jsx)(SignOutIcon_1.SignOutIcon, { size: 16, className: "text-b3-grey" })) })] })] }));
|
|
104
|
+
}, children: [(0, jsx_runtime_1.jsx)(SwapIcon_1.SwapIcon, { size: 24, className: "text-b3-primary-blue" }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Swap" })] }))] })), (0, jsx_runtime_1.jsxs)(accordion_1.Accordion, { type: "multiple", value: openAccordions, onValueChange: setOpenAccordions, className: "space-y-2", children: [(0, jsx_runtime_1.jsxs)(accordion_1.AccordionItem, { value: "global-account", className: "border-none", children: [(0, jsx_runtime_1.jsx)(accordion_1.AccordionTrigger, { className: "text-b3-grey font-neue-montreal-semibold py-2 hover:no-underline", children: (0, jsx_runtime_1.jsx)("span", { children: "Balance" }) }), (0, jsx_runtime_1.jsxs)(accordion_1.AccordionContent, { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(TokenBalanceRow_1.TokenBalanceRow, { icon: (0, jsx_runtime_1.jsx)(TokenIcon_1.B3TokenIcon, { className: "size-10" }), name: "B3", balance: `${b3Balance?.formattedTotal || "0.00"} B3`, usdValue: b3Balance?.balanceUsdFormatted || "0.00", priceChange: b3Balance?.priceChange24h }), (0, jsx_runtime_1.jsx)(TokenBalanceRow_1.TokenBalanceRow, { icon: (0, jsx_runtime_1.jsx)(TokenIcon_1.EthereumTokenIcon, { className: "size-10" }), name: "Ethereum", balance: `${nativeBalance?.formattedTotal || "0.00"} ETH`, usdValue: nativeBalance?.formattedTotalUsd || "0.00", priceChange: nativeBalance?.priceChange24h })] })] }), eoaAddress && ((0, jsx_runtime_1.jsxs)(accordion_1.AccordionItem, { value: "eoa-account", className: "border-none", children: [(0, jsx_runtime_1.jsx)(accordion_1.AccordionTrigger, { className: "text-b3-grey font-neue-montreal-semibold py-2 hover:no-underline", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("span", { children: ["Connected ", eoaInfo?.data?.name || "Wallet"] }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "text-b3-foreground-muted font-mono text-xs", children: centerTruncate(eoaAddress, 6) }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: eoaAddress })] })] }) }), (0, jsx_runtime_1.jsxs)(accordion_1.AccordionContent, { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(TokenBalanceRow_1.TokenBalanceRow, { icon: (0, jsx_runtime_1.jsx)(TokenIcon_1.B3TokenIcon, { className: "size-10" }), name: "B3", balance: `${eoaB3Balance?.formattedTotal || "0.00"} B3`, usdValue: eoaB3Balance?.balanceUsdFormatted || "0.00", priceChange: eoaB3Balance?.priceChange24h }), (0, jsx_runtime_1.jsx)(TokenBalanceRow_1.TokenBalanceRow, { icon: (0, jsx_runtime_1.jsx)(TokenIcon_1.EthereumTokenIcon, { className: "size-10" }), name: "Ethereum", balance: `${eoaNativeBalance?.formattedTotal || "0.00"} ETH`, usdValue: eoaNativeBalance?.formattedTotalUsd || "0.00", priceChange: eoaNativeBalance?.priceChange24h })] })] }))] }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-semibold text-b3-grey", children: "Sign out" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute right-4", children: logoutLoading ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "animate-spin", size: 16 })) : ((0, jsx_runtime_1.jsx)(SignOutIcon_1.SignOutIcon, { size: 16, className: "text-b3-grey" })) })] })] }));
|
|
91
105
|
}
|
|
@@ -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 {};
|
|
@@ -19,7 +19,7 @@ const profileDisplay_1 = require("../../utils/profileDisplay");
|
|
|
19
19
|
const AccountAssets_1 = require("../AccountAssets/AccountAssets");
|
|
20
20
|
const ContentTokens_1 = require("./ContentTokens");
|
|
21
21
|
const BalanceContent_1 = require("./BalanceContent");
|
|
22
|
-
function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain, partnerId, }) {
|
|
22
|
+
function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain, partnerId, showSwap, showDeposit, }) {
|
|
23
23
|
const [revokingSignerId, setRevokingSignerId] = (0, react_2.useState)(null);
|
|
24
24
|
const account = (0, react_3.useActiveAccount)();
|
|
25
25
|
const { data: nfts, isLoading } = (0, react_1.useAccountAssets)(account?.address);
|
|
@@ -152,22 +152,22 @@ function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain
|
|
|
152
152
|
},
|
|
153
153
|
});
|
|
154
154
|
};
|
|
155
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Linked Accounts" }), (0, jsx_runtime_1.jsxs)(react_1.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 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-b3-primary-blue animate-spin", size: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.LinkIcon, { size: 16, className: "text-b3-primary-blue" })), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold", children: isLinking ? "Linking..." : "Link New Account" })] })] }), isLoadingProfiles ? ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center py-8", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-b3-grey animate-spin" }) })) : profiles.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: profiles.map(profile => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-line flex items-center justify-between rounded-xl p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [profile.imageUrl ? ((0, jsx_runtime_1.jsx)("img", { src: profile.imageUrl, alt: profile.title, className: "size-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm uppercase", children: profile.initial }) })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold", children: profile.title }), (0, jsx_runtime_1.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() })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: profile.subtitle })] })] }), (0, jsx_runtime_1.jsx)(react_1.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 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "animate-spin" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.UnlinkIcon, { size: 16 })) })] }, profile.title))) })) : ((0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted py-8 text-center", children: "No linked accounts found" }))] }), showReferralInfo && (
|
|
155
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "linked-accounts-settings space-y-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linked-accounts-section space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linked-accounts-header flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-b3-grey font-neue-montreal-semibold linked-accounts-settings-title text-xl", children: "Linked Accounts" }), (0, jsx_runtime_1.jsxs)(react_1.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 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "linked-accounts-link-loading text-b3-primary-blue animate-spin", size: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.LinkIcon, { size: 16, className: "linked-accounts-link-icon text-b3-primary-blue" })), (0, jsx_runtime_1.jsx)("span", { className: "linked-accounts-link-text text-b3-grey font-neue-montreal-semibold", children: isLinking ? "Linking..." : "Link New Account" })] })] }), isLoadingProfiles ? ((0, jsx_runtime_1.jsx)("div", { className: "linked-accounts-loading flex justify-center py-8", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-b3-grey animate-spin" }) })) : profiles.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "linked-accounts-list space-y-4", children: profiles.map(profile => ((0, jsx_runtime_1.jsxs)("div", { className: "linked-account-item bg-b3-line flex items-center justify-between rounded-xl p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linked-account-info flex items-center gap-3", children: [profile.imageUrl ? ((0, jsx_runtime_1.jsx)("img", { src: profile.imageUrl, alt: profile.title, className: "linked-account-avatar linked-account-avatar-image size-10 rounded-full" })) : ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("span", { className: "linked-account-initial text-b3-grey font-neue-montreal-semibold text-sm uppercase", children: profile.initial }) })), (0, jsx_runtime_1.jsxs)("div", { className: "linked-account-details", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linked-account-title-row flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "linked-account-title text-b3-grey font-neue-montreal-semibold", children: profile.title }), (0, jsx_runtime_1.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() })] }), (0, jsx_runtime_1.jsx)("div", { className: "linked-account-subtitle text-b3-foreground-muted font-neue-montreal-medium text-sm", children: profile.subtitle })] })] }), (0, jsx_runtime_1.jsx)(react_1.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 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "linked-account-unlink-loading animate-spin" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.UnlinkIcon, { size: 16, className: "linked-account-unlink-icon" })) })] }, profile.title))) })) : ((0, jsx_runtime_1.jsx)("div", { className: "linked-accounts-empty text-b3-foreground-muted py-8 text-center", children: "No linked accounts found" }))] }), showReferralInfo && (
|
|
156
156
|
/* Referral Section */
|
|
157
|
-
(0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Referrals" }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-line rounded-xl p-4", children: [isEditingCode && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [!isEditingCode && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: isEditingCode ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.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 }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", onClick: handleUpdateReferralCode, disabled: isUpdatingCode || !newReferralCode, children: isUpdatingCode ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }) : "Save" }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", variant: "ghost", onClick: () => {
|
|
157
|
+
(0, jsx_runtime_1.jsxs)("div", { className: "referrals-section space-y-4", children: [(0, jsx_runtime_1.jsx)("h3", { className: "referrals-title text-b3-grey font-neue-montreal-semibold text-xl", children: "Referrals" }), (0, jsx_runtime_1.jsxs)("div", { className: "referral-code-container bg-b3-line rounded-xl p-4", children: [isEditingCode && ((0, jsx_runtime_1.jsxs)("div", { className: "referral-code-header-editing", children: [(0, jsx_runtime_1.jsx)("div", { className: "referral-code-title text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), (0, jsx_runtime_1.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" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "referral-code-content flex items-center justify-between", children: [!isEditingCode && ((0, jsx_runtime_1.jsxs)("div", { className: "referral-code-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "referral-code-title text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), (0, jsx_runtime_1.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" })] })), (0, jsx_runtime_1.jsx)("div", { className: "referral-code-actions flex items-center gap-2", children: isEditingCode ? ((0, jsx_runtime_1.jsxs)("div", { className: "referral-code-edit-form flex items-center gap-2", children: [(0, jsx_runtime_1.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 }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", className: "referral-code-save-button", onClick: handleUpdateReferralCode, disabled: isUpdatingCode || !newReferralCode, children: isUpdatingCode ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "referral-code-save-loading h-4 w-4 animate-spin" })) : ("Save") }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", variant: "ghost", className: "referral-code-cancel-button", onClick: () => {
|
|
158
158
|
setIsEditingCode(false);
|
|
159
159
|
setNewReferralCode("");
|
|
160
|
-
}, children: "Cancel" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm", children: currentReferralCode }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "icon", variant: "ghost", onClick: handleCopyCode, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-4 w-4" }) }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "icon", variant: "ghost", onClick: () => {
|
|
160
|
+
}, children: "Cancel" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "referral-code-display rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm", children: currentReferralCode }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "icon", variant: "ghost", className: "referral-code-copy-button", onClick: handleCopyCode, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "referral-code-copy-icon h-4 w-4" }) }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "icon", variant: "ghost", className: "referral-code-edit-button", onClick: () => {
|
|
161
161
|
setIsEditingCode(true);
|
|
162
162
|
setTimeout(() => {
|
|
163
163
|
referallCodeRef.current?.focus();
|
|
164
164
|
}, 100);
|
|
165
|
-
}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { className: "h-4 w-4" }) })] })) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-line rounded-xl p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-b3-grey font-neue-montreal-semibold mb-4", children: "Referred Users" }), isLoadingReferrals ? ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center py-4", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }) })) : referrals?.data?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: referrals.data.map((referral) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between rounded-lg bg-white p-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: referral.referreeId }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-500", children: new Date(referral.createdAt).toLocaleDateString() })] }, String(referral._id)))) })) : ((0, jsx_runtime_1.jsx)("div", { className: "py-4 text-center text-gray-500", children: "No referred users yet" }))] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Account Preferences" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line rounded-xl p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Dark Mode" }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Switch between light and dark theme" })] }), (0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash h-6 w-12 rounded-full" })] }) })] }), (0, jsx_runtime_1.jsxs)("
|
|
165
|
+
}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { className: "referral-code-edit-icon h-4 w-4" }) })] })) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "referred-users-container bg-b3-line rounded-xl p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "referred-users-title text-b3-grey font-neue-montreal-semibold mb-4", children: "Referred Users" }), isLoadingReferrals ? ((0, jsx_runtime_1.jsx)("div", { className: "referred-users-loading flex justify-center py-4", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }) })) : referrals?.data?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "referred-users-list space-y-3", children: referrals.data.map((referral) => ((0, jsx_runtime_1.jsxs)("div", { className: "referred-user-item flex items-center justify-between rounded-lg bg-white p-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "referred-user-id text-sm font-medium", children: referral.referreeId }), (0, jsx_runtime_1.jsx)("div", { className: "referred-user-date text-sm text-gray-500", children: new Date(referral.createdAt).toLocaleDateString() })] }, String(referral._id)))) })) : ((0, jsx_runtime_1.jsx)("div", { className: "referred-users-empty py-4 text-center text-gray-500", children: "No referred users yet" }))] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "account-preferences-section space-y-4", children: [(0, jsx_runtime_1.jsx)("h3", { className: "account-preferences-title text-b3-grey font-neue-montreal-semibold text-xl", children: "Account Preferences" }), (0, jsx_runtime_1.jsx)("div", { className: "account-preferences-container bg-b3-line rounded-xl p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "account-preference-item flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "account-preference-info", children: [(0, jsx_runtime_1.jsx)("div", { className: "account-preference-title text-b3-grey font-neue-montreal-semibold", children: "Dark Mode" }), (0, jsx_runtime_1.jsx)("div", { className: "account-preference-description text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Switch between light and dark theme" })] }), (0, jsx_runtime_1.jsx)("div", { className: "account-preference-toggle theme-toggle-placeholder bg-b3-primary-wash h-6 w-12 rounded-full" })] }) })] }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "logout-text font-neue-montreal-semibold text-b3-grey", children: "Sign out" }), (0, jsx_runtime_1.jsx)("div", { className: "logout-icon-container absolute right-4", children: logoutLoading ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "logout-loading animate-spin", size: 16 })) : ((0, jsx_runtime_1.jsx)(SignOutIcon_1.SignOutIcon, { size: 16, className: "logout-icon text-b3-grey" })) })] })] }));
|
|
166
166
|
};
|
|
167
167
|
return ((0, jsx_runtime_1.jsx)("div", { className: "b3-manage-account bg-b3-background flex flex-col rounded-xl", children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: (0, jsx_runtime_1.jsxs)(react_1.TabsPrimitive, { defaultValue: activeTab, onValueChange: value => {
|
|
168
168
|
const tab = value;
|
|
169
169
|
if (["overview", "tokens", "nfts", "apps", "settings"].includes(tab)) {
|
|
170
170
|
setActiveTab?.(tab);
|
|
171
171
|
}
|
|
172
|
-
}, children: [(0, jsx_runtime_1.jsx)("div", { className: "px-4", children: (0, jsx_runtime_1.jsxs)(react_1.TabsListPrimitive, { className: "grid h-auto grid-cols-2 grid-rows-2 gap-3 rounded-none border-none bg-transparent", children: [(0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.BarChart3, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "Overview" })] }), (0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.Coins, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "Tokens" })] }), (0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.Image, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "NFTs" })] }), (0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "Settings" })] })] }) }), (0, jsx_runtime_1.jsx)(react_1.TabsContentPrimitive, { value: "overview", className: "px-4 pb-4 pt-2", children: (0, jsx_runtime_1.jsx)(BalanceContent_1.BalanceContent, { onLogout: onLogout, partnerId: partnerId }) }), (0, jsx_runtime_1.jsx)(react_1.TabsContentPrimitive, { value: "tokens", className: "px-4 pb-4 pt-2", children: (0, jsx_runtime_1.jsx)(ContentTokens_1.ContentTokens, { activeTab: activeTab }) }), (0, jsx_runtime_1.jsx)(react_1.TabsContentPrimitive, { value: "nfts", className: "px-4 pb-4 pt-2", children: (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-3 gap-4", children: nfts?.nftResponse ? ((0, jsx_runtime_1.jsx)(AccountAssets_1.AccountAssets, { nfts: nfts.nftResponse, isLoading: isLoading })) : ((0, jsx_runtime_1.jsx)("div", { className: "col-span-3 py-12 text-center text-gray-500", children: "No NFTs found" })) }) }), (0, jsx_runtime_1.jsx)(react_1.TabsContentPrimitive, { value: "apps", className: "px-4 pb-4 pt-2", children: (0, jsx_runtime_1.jsx)(AppsContent, {}) }), (0, jsx_runtime_1.jsx)(react_1.TabsContentPrimitive, { value: "settings", className: "px-4 pb-4 pt-2", children: (0, jsx_runtime_1.jsx)(SettingsContent, {}) })] }) }) }));
|
|
172
|
+
}, children: [(0, jsx_runtime_1.jsx)("div", { className: "px-4", children: (0, jsx_runtime_1.jsxs)(react_1.TabsListPrimitive, { className: "grid h-auto grid-cols-2 grid-rows-2 gap-3 rounded-none border-none bg-transparent", children: [(0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.BarChart3, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "Overview" })] }), (0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.Coins, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "Tokens" })] }), (0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.Image, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "NFTs" })] }), (0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "Settings" })] })] }) }), (0, jsx_runtime_1.jsx)(react_1.TabsContentPrimitive, { value: "overview", className: "px-4 pb-4 pt-2", children: (0, jsx_runtime_1.jsx)(BalanceContent_1.BalanceContent, { onLogout: onLogout, partnerId: partnerId, showDeposit: showDeposit, showSwap: showSwap }) }), (0, jsx_runtime_1.jsx)(react_1.TabsContentPrimitive, { value: "tokens", className: "px-4 pb-4 pt-2", children: (0, jsx_runtime_1.jsx)(ContentTokens_1.ContentTokens, { activeTab: activeTab }) }), (0, jsx_runtime_1.jsx)(react_1.TabsContentPrimitive, { value: "nfts", className: "px-4 pb-4 pt-2", children: (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-3 gap-4", children: nfts?.nftResponse ? ((0, jsx_runtime_1.jsx)(AccountAssets_1.AccountAssets, { nfts: nfts.nftResponse, isLoading: isLoading })) : ((0, jsx_runtime_1.jsx)("div", { className: "col-span-3 py-12 text-center text-gray-500", children: "No NFTs found" })) }) }), (0, jsx_runtime_1.jsx)(react_1.TabsContentPrimitive, { value: "apps", className: "px-4 pb-4 pt-2", children: (0, jsx_runtime_1.jsx)(AppsContent, {}) }), (0, jsx_runtime_1.jsx)(react_1.TabsContentPrimitive, { value: "settings", className: "px-4 pb-4 pt-2", children: (0, jsx_runtime_1.jsx)(SettingsContent, {}) })] }) }) }));
|
|
173
173
|
}
|
|
@@ -4,6 +4,7 @@ exports.useAccountWallet = useAccountWallet;
|
|
|
4
4
|
const react_1 = require("../../../global-account/react");
|
|
5
5
|
const constants_1 = require("../../../shared/constants");
|
|
6
6
|
const debug_1 = require("../../../shared/utils/debug");
|
|
7
|
+
const ipfs_1 = require("../../../shared/utils/ipfs");
|
|
7
8
|
const react_2 = require("react");
|
|
8
9
|
const react_3 = require("thirdweb/react");
|
|
9
10
|
const in_app_1 = require("thirdweb/wallets/in-app");
|
|
@@ -20,7 +21,7 @@ function useLastAuthProvider() {
|
|
|
20
21
|
return lastAuthProvider;
|
|
21
22
|
}
|
|
22
23
|
function useAccountWallet() {
|
|
23
|
-
const { account } = (0, react_1.useB3)();
|
|
24
|
+
const { account, user } = (0, react_1.useB3)();
|
|
24
25
|
const activeWallet = (0, react_3.useActiveWallet)();
|
|
25
26
|
const connectedWallets = (0, react_3.useConnectedWallets)();
|
|
26
27
|
const connectedSmartWallet = connectedWallets.find(wallet => wallet.id === constants_1.ecosystemWalletId);
|
|
@@ -41,7 +42,7 @@ function useAccountWallet() {
|
|
|
41
42
|
: "https://gradvatar.com/0x0000000000000000000000000000000000000000"; // show smart wallet of eoa wallet is gradvatar
|
|
42
43
|
const { data: profileData } = (0, react_1.useProfile)({ address: account?.address });
|
|
43
44
|
const ensName = profileData?.displayName?.replace(/\.b3\.fun/g, "");
|
|
44
|
-
const avatarUrl = profileData?.avatar;
|
|
45
|
+
const avatarUrl = user?.avatar ? (0, ipfs_1.getIpfsUrl)(user?.avatar) : profileData?.avatar;
|
|
45
46
|
const res = (0, react_2.useMemo)(() => ({
|
|
46
47
|
wallet: {
|
|
47
48
|
...account,
|
|
@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.useAuthentication = useAuthentication;
|
|
7
7
|
const app_1 = __importDefault(require("../../../global-account/app"));
|
|
8
|
+
const bsmnt_1 = require("../../../global-account/bsmnt");
|
|
8
9
|
const react_1 = require("../../../global-account/react");
|
|
9
10
|
const constants_1 = require("../../../shared/constants");
|
|
10
11
|
const supported_1 = require("../../../shared/constants/chains/supported");
|
|
@@ -66,6 +67,9 @@ function useAuthentication(partnerId, loginWithSiwe) {
|
|
|
66
67
|
setIsAuthenticated(true);
|
|
67
68
|
setIsAuthenticatingV2(false);
|
|
68
69
|
debug("Re-authenticated successfully", { userAuth });
|
|
70
|
+
// Authenticate on BSMNT with B3 JWT
|
|
71
|
+
const b3Jwt = await (0, bsmnt_1.authenticateWithB3JWT)(userAuth.accessToken);
|
|
72
|
+
console.log("@@b3Jwt", b3Jwt);
|
|
69
73
|
}
|
|
70
74
|
catch (error) {
|
|
71
75
|
// If re-authentication fails, try fresh authentication
|
|
@@ -75,6 +79,9 @@ function useAuthentication(partnerId, loginWithSiwe) {
|
|
|
75
79
|
setIsAuthenticated(true);
|
|
76
80
|
setIsAuthenticatingV2(false);
|
|
77
81
|
debug("Fresh authentication successful", { userAuth });
|
|
82
|
+
// Authenticate on BSMNT with B3 JWT
|
|
83
|
+
const b3Jwt = await (0, bsmnt_1.authenticateWithB3JWT)(userAuth.accessToken);
|
|
84
|
+
console.log("@@b3Jwt", b3Jwt);
|
|
78
85
|
}
|
|
79
86
|
}
|
|
80
87
|
catch (error) {
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.useRPMToken = useRPMToken;
|
|
5
|
+
const useQueryBSMNT_1 = require("../../../global-account/react/hooks/useQueryBSMNT");
|
|
6
|
+
function useRPMToken() {
|
|
7
|
+
const { data, runQuery: refetch, isLoading, error: isError, } = (0, useQueryBSMNT_1.useQueryBSMNT)("profiles", "getReadyPlayerMeToken", undefined, true);
|
|
8
|
+
const token = data?.token || "";
|
|
9
|
+
const accountId = data?.accountId || "";
|
|
10
|
+
return { token, accountId, refetch, isLoading, isError };
|
|
11
|
+
}
|