@0xchain/header 1.1.0-beta.6 → 1.1.0-beta.60
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/LICENSE +21 -0
- package/dist/index.d.ts +10 -1
- package/dist/index.js +51 -35
- package/dist/lib/Drawer.js +41 -16
- package/dist/lib/Explorer.js +61 -50
- package/dist/lib/Logo.js +74 -17
- package/dist/lib/Nav.js +213 -68
- package/dist/lib/Products.js +89 -0
- package/dist/lib/Right.js +20 -15
- package/dist/lib/Setting/SettingBody.js +44 -36
- package/dist/lib/Setting/index.js +45 -14
- package/dist/lib/User/Logout.js +13 -13
- package/dist/lib/User/MainTrigger.js +33 -23
- package/dist/lib/User/Mobile.js +22 -22
- package/dist/lib/User/Pc.js +24 -22
- package/dist/lib/User/SignIn.js +16 -15
- package/dist/lib/User/index.js +23 -20
- package/dist/lib/authProfile.js +34 -0
- package/dist/lib/context.js +24 -0
- package/dist/lib/events.js +13 -15
- package/package.json +38 -22
package/dist/lib/Nav.js
CHANGED
|
@@ -1,102 +1,247 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsx
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import { twMerge
|
|
8
|
-
import
|
|
9
|
-
import { useLocale
|
|
10
|
-
import
|
|
11
|
-
import { useState
|
|
12
|
-
import
|
|
13
|
-
import {
|
|
14
|
-
import { onUserEvent
|
|
15
|
-
import { usePathname
|
|
16
|
-
import
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
2
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
3
|
+
import LinkBar from "@0xchain/link";
|
|
4
|
+
import UserControl from "./User/index.js";
|
|
5
|
+
import Setting from "./Setting/index.js";
|
|
6
|
+
import Translation from "@0xchain/translation";
|
|
7
|
+
import { twMerge } from "tailwind-merge";
|
|
8
|
+
import BetterLink from "@0xchain/better-link";
|
|
9
|
+
import { useLocale } from "@0xchain/i18n/react";
|
|
10
|
+
import Logout from "./User/Logout.js";
|
|
11
|
+
import { useState, useCallback, useEffect } from "react";
|
|
12
|
+
import SignIn from "./User/SignIn.js";
|
|
13
|
+
import { getRuntimeLoginState } from "@0xchain/auth";
|
|
14
|
+
import { onUserEvent, USER_EVENTS } from "./events.js";
|
|
15
|
+
import { usePathname } from "next/navigation";
|
|
16
|
+
import Explorer from "./Explorer.js";
|
|
17
|
+
import Products from "./Products.js";
|
|
18
|
+
import { useIsChaindigg } from "./context.js";
|
|
19
|
+
import { hasProfileIdentity, fetchHeaderProfile } from "./authProfile.js";
|
|
20
|
+
function Nav({ onClick = () => void 0, hideNews = false, hideLogin = false, user }) {
|
|
21
|
+
const isChaindigg = useIsChaindigg();
|
|
22
|
+
const { gotoAISQL, gotoChat } = BetterLink();
|
|
23
|
+
const locale = useLocale();
|
|
24
|
+
const pathname = usePathname();
|
|
25
|
+
const [userKey, setUserKey] = useState("");
|
|
26
|
+
const [userInfo, setUserInfo] = useState(user);
|
|
27
|
+
const hasUserProfile = hasProfileIdentity(userInfo);
|
|
28
|
+
const [, setExplorerExpanded] = useState(false);
|
|
29
|
+
const ichaingoNavList = [
|
|
20
30
|
{
|
|
21
31
|
baseUrl: process.env.NEXT_PUBLIC_CHAT_URL,
|
|
22
|
-
href:
|
|
23
|
-
key: `/${
|
|
24
|
-
label: /* @__PURE__ */
|
|
25
|
-
show: (
|
|
32
|
+
href: gotoChat({ locale }),
|
|
33
|
+
key: `/${locale}`,
|
|
34
|
+
label: /* @__PURE__ */ jsx("span", { children: "iSearch" }),
|
|
35
|
+
show: (pathname2) => {
|
|
36
|
+
return pathname2 === `/${locale}` || pathname2.includes(`/${locale}/conversation`);
|
|
37
|
+
}
|
|
26
38
|
},
|
|
27
39
|
{
|
|
28
|
-
baseUrl: process.env.
|
|
29
|
-
href:
|
|
30
|
-
key: "/
|
|
31
|
-
label: "
|
|
32
|
-
show: (
|
|
40
|
+
baseUrl: process.env.NEXT_PUBLIC_APP_URL,
|
|
41
|
+
href: gotoAISQL({ locale }),
|
|
42
|
+
key: "/query",
|
|
43
|
+
label: "iQuery",
|
|
44
|
+
show: (pathname2) => {
|
|
45
|
+
return pathname2.includes(`/${locale}/query`);
|
|
46
|
+
}
|
|
33
47
|
},
|
|
34
48
|
{
|
|
35
|
-
baseUrl: process.env.
|
|
36
|
-
href: "/explorer",
|
|
49
|
+
baseUrl: process.env.NEXT_PUBLIC_APP_URL,
|
|
37
50
|
key: "/explorer",
|
|
38
|
-
|
|
39
|
-
|
|
51
|
+
href: "/explorer",
|
|
52
|
+
label: /* @__PURE__ */ jsx(Explorer, { onClick, onExpandChange: setExplorerExpanded }),
|
|
53
|
+
show: (pathname2) => {
|
|
54
|
+
return pathname2.includes(`/explorer`);
|
|
55
|
+
}
|
|
40
56
|
},
|
|
41
|
-
// {
|
|
42
|
-
// baseUrl: process.env.NEXT_PUBLIC_BASE_URL,
|
|
43
|
-
// href: `/etf/btc-us`,
|
|
44
|
-
// key: '/etf',
|
|
45
|
-
// label: <Translation value="etf" parentKey="menu" />,
|
|
46
|
-
// show: (pathname: string) => {
|
|
47
|
-
// return pathname.includes(`/etf`)
|
|
48
|
-
// }
|
|
49
|
-
// },
|
|
50
57
|
{
|
|
51
|
-
baseUrl: process.env.
|
|
52
|
-
href:
|
|
58
|
+
baseUrl: process.env.NEXT_PUBLIC_APP_URL,
|
|
59
|
+
href: `/news`,
|
|
53
60
|
key: "/news",
|
|
54
|
-
label: /* @__PURE__ */
|
|
55
|
-
show: (
|
|
61
|
+
label: /* @__PURE__ */ jsx(Translation, { value: "news", parentKey: "menu" }),
|
|
62
|
+
show: (pathname2) => {
|
|
63
|
+
return pathname2.includes(`/news`);
|
|
64
|
+
}
|
|
56
65
|
},
|
|
57
66
|
{
|
|
58
|
-
baseUrl: process.env.
|
|
59
|
-
href:
|
|
67
|
+
baseUrl: process.env.NEXT_PUBLIC_APP_URL,
|
|
68
|
+
href: `/ranking`,
|
|
60
69
|
key: "/ranking",
|
|
61
|
-
label: /* @__PURE__ */
|
|
62
|
-
show: (
|
|
70
|
+
label: /* @__PURE__ */ jsx(Translation, { value: "ranking", parentKey: "menu" }),
|
|
71
|
+
show: (pathname2) => {
|
|
72
|
+
return pathname2.includes(`/ranking`);
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
baseUrl: process.env.NEXT_PUBLIC_APP_URL,
|
|
77
|
+
href: `/learn`,
|
|
78
|
+
key: "/learn",
|
|
79
|
+
label: /* @__PURE__ */ jsx(Translation, { value: "learn", parentKey: "menu" }),
|
|
80
|
+
show: (pathname2) => {
|
|
81
|
+
return pathname2.includes(`/learn`);
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
baseUrl: process.env.NEXT_PUBLIC_APP_URL,
|
|
86
|
+
key: "/products",
|
|
87
|
+
label: /* @__PURE__ */ jsx(Products, { onClick }),
|
|
88
|
+
show: (pathname2) => {
|
|
89
|
+
return pathname2.includes("/widget");
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
]?.filter((item) => {
|
|
93
|
+
if (hideNews) {
|
|
94
|
+
return !["/explorer", "/chat", "/query"].includes(item.key);
|
|
63
95
|
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
96
|
+
return true;
|
|
97
|
+
});
|
|
98
|
+
const chaindiggNavList = [
|
|
99
|
+
{
|
|
100
|
+
key: "/explorer",
|
|
101
|
+
label: /* @__PURE__ */ jsx(Explorer, {}),
|
|
102
|
+
show: (pathname2) => {
|
|
103
|
+
return pathname2.includes(`/explorer`);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
];
|
|
107
|
+
const NavList = isChaindigg ? chaindiggNavList : ichaingoNavList;
|
|
108
|
+
const updateUserInfo = useCallback(async () => {
|
|
109
|
+
try {
|
|
110
|
+
const profile = await fetchHeaderProfile();
|
|
111
|
+
setUserInfo(profile || {});
|
|
112
|
+
setUserKey((/* @__PURE__ */ new Date()).getTime().toString());
|
|
113
|
+
return profile;
|
|
114
|
+
} catch (error) {
|
|
115
|
+
console.error(error);
|
|
116
|
+
setUserInfo({});
|
|
117
|
+
return null;
|
|
118
|
+
}
|
|
119
|
+
}, []);
|
|
120
|
+
useEffect(() => {
|
|
121
|
+
if (isChaindigg) return;
|
|
122
|
+
const cleanProfileUpdated = onUserEvent(USER_EVENTS.PROFILE_UPDATED, updateUserInfo);
|
|
123
|
+
const cleanLoggedIn = onUserEvent(USER_EVENTS.LOGGED_IN, updateUserInfo);
|
|
124
|
+
if (!hasUserProfile && getRuntimeLoginState() === true) {
|
|
125
|
+
updateUserInfo();
|
|
126
|
+
}
|
|
127
|
+
return () => {
|
|
128
|
+
cleanProfileUpdated();
|
|
129
|
+
cleanLoggedIn();
|
|
130
|
+
};
|
|
131
|
+
}, [hasUserProfile, isChaindigg, updateUserInfo]);
|
|
132
|
+
if (isChaindigg) {
|
|
133
|
+
return /* @__PURE__ */ jsxs(
|
|
134
|
+
"nav",
|
|
135
|
+
{
|
|
136
|
+
className: twMerge(
|
|
137
|
+
"flex flex-col justify-start items-start md:px-3",
|
|
138
|
+
"md:flex-row md:justify-start md:items-start md:px-0",
|
|
139
|
+
"md:gap-6"
|
|
140
|
+
),
|
|
141
|
+
children: [
|
|
142
|
+
/* @__PURE__ */ jsx(
|
|
143
|
+
"ul",
|
|
144
|
+
{
|
|
145
|
+
className: twMerge(
|
|
146
|
+
"flex flex-col flex-1 justify-start items-start w-full h-full text-sm leading-[44px] z-1001 text-foreground",
|
|
147
|
+
"md:flex-row md:items-center md:w-auto md:h-[34px] md:leading-[34px] md:gap-5",
|
|
148
|
+
"order-2 md:order-0"
|
|
149
|
+
),
|
|
150
|
+
children: NavList.map((item, index) => /* @__PURE__ */ jsx(
|
|
151
|
+
"li",
|
|
152
|
+
{
|
|
153
|
+
className: twMerge(
|
|
154
|
+
"w-full md:w-auto h-11 md:h-auto cursor-pointer hover:text-primary",
|
|
155
|
+
item.show(pathname) && "border-b-2 border-primary text-primary"
|
|
156
|
+
),
|
|
157
|
+
children: !item.href || item.href === pathname ? item.label : /* @__PURE__ */ jsx(
|
|
158
|
+
LinkBar,
|
|
159
|
+
{
|
|
160
|
+
href: item.href,
|
|
161
|
+
onClick,
|
|
162
|
+
className: twMerge(
|
|
163
|
+
"w-full md:w-auto h-11 md:h-auto cursor-pointer hover:text-primary",
|
|
164
|
+
item.show(pathname) && "border-b-2 border-primary text-primary",
|
|
165
|
+
"h-full flex items-center justify-start"
|
|
166
|
+
),
|
|
167
|
+
baseUrl: item.baseUrl,
|
|
168
|
+
suppressHydrationWarning: true,
|
|
169
|
+
children: item.label
|
|
170
|
+
}
|
|
171
|
+
)
|
|
172
|
+
},
|
|
173
|
+
index
|
|
174
|
+
))
|
|
175
|
+
}
|
|
176
|
+
),
|
|
177
|
+
/* @__PURE__ */ jsx(Setting, { onClick })
|
|
178
|
+
]
|
|
179
|
+
}
|
|
180
|
+
);
|
|
181
|
+
}
|
|
182
|
+
return /* @__PURE__ */ jsxs(
|
|
72
183
|
"nav",
|
|
73
184
|
{
|
|
74
|
-
className:
|
|
185
|
+
className: twMerge(
|
|
75
186
|
"flex flex-col justify-start items-start md:px-3",
|
|
76
|
-
"md:flex-row md:justify-end md:items-center
|
|
187
|
+
"md:flex-row md:justify-end md:items-center md:px-0 md:flex-1",
|
|
77
188
|
"md:gap-4"
|
|
78
189
|
),
|
|
79
190
|
children: [
|
|
80
|
-
/* @__PURE__ */
|
|
191
|
+
/* @__PURE__ */ jsx(
|
|
81
192
|
"ul",
|
|
82
193
|
{
|
|
83
|
-
className:
|
|
84
|
-
"flex flex-col justify-start items-start w-full
|
|
85
|
-
"md:flex-row md:items-center md:w-auto md:h-[34px]
|
|
194
|
+
className: twMerge(
|
|
195
|
+
"flex flex-col justify-start items-start w-full h-full text-sm z-1001 text-foreground",
|
|
196
|
+
"md:flex-row md:items-center md:w-auto md:h-[34px] md:gap-6 md:flex-1",
|
|
86
197
|
"order-2 md:order-0"
|
|
87
198
|
),
|
|
88
|
-
children:
|
|
199
|
+
children: NavList.map((item, index) => {
|
|
200
|
+
return /* @__PURE__ */ jsx(
|
|
201
|
+
"li",
|
|
202
|
+
{
|
|
203
|
+
className: twMerge(
|
|
204
|
+
"w-full md:h-auto font-bold md:w-auto cursor-pointer md:rounded-full",
|
|
205
|
+
item.key === "/explorer" || item.key === "/products" ? "h-auto" : "h-11",
|
|
206
|
+
item.show(pathname) ? "md:text-primary md:bg-primary/10" : "md:hover:bg-border"
|
|
207
|
+
),
|
|
208
|
+
children: !item.href || item.href === pathname ? item.label : /* @__PURE__ */ jsx(
|
|
209
|
+
LinkBar,
|
|
210
|
+
{
|
|
211
|
+
href: item.href,
|
|
212
|
+
onClick,
|
|
213
|
+
className: twMerge(
|
|
214
|
+
"w-full md:px-4 md:py-1 md:h-auto font-bold md:w-auto cursor-pointer md:rounded-full",
|
|
215
|
+
item.key === "/explorer" || item.key === "/products" ? "h-auto" : "h-11",
|
|
216
|
+
item.show(pathname) ? "md:text-primary md:bg-primary/10" : "md:hover:bg-border",
|
|
217
|
+
"h-full flex items-center justify-start"
|
|
218
|
+
),
|
|
219
|
+
baseUrl: item.baseUrl,
|
|
220
|
+
suppressHydrationWarning: true,
|
|
221
|
+
children: item.label
|
|
222
|
+
}
|
|
223
|
+
)
|
|
224
|
+
},
|
|
225
|
+
index
|
|
226
|
+
);
|
|
227
|
+
})
|
|
89
228
|
}
|
|
90
229
|
),
|
|
91
|
-
/* @__PURE__ */
|
|
92
|
-
!
|
|
93
|
-
/* @__PURE__ */
|
|
94
|
-
|
|
230
|
+
/* @__PURE__ */ jsx(Setting, { onClick }),
|
|
231
|
+
!pathname.includes("/login") && !hideLogin ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
232
|
+
/* @__PURE__ */ jsx(UserControl, { onClick, userInfo }, userKey),
|
|
233
|
+
hasUserProfile ? /* @__PURE__ */ jsx("div", { className: "flex md:hidden h-11 md:h-auto cursor-pointer whitespace-nowrap order-3 bg-background rounded-lg p-2 mt-3 w-full items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx(Logout, {}) }) : /* @__PURE__ */ jsx(
|
|
234
|
+
SignIn,
|
|
235
|
+
{
|
|
236
|
+
onClick,
|
|
237
|
+
className: "flex md:hidden h-11 cursor-pointer whitespace-nowrap order-3 bg-primary text-white rounded-lg p-2 mt-3 w-full items-center justify-center"
|
|
238
|
+
}
|
|
239
|
+
)
|
|
95
240
|
] }) : null
|
|
96
241
|
]
|
|
97
242
|
}
|
|
98
243
|
);
|
|
99
244
|
}
|
|
100
245
|
export {
|
|
101
|
-
|
|
246
|
+
Nav as default
|
|
102
247
|
};
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
3
|
+
import Translation from "@0xchain/translation";
|
|
4
|
+
import { useLocale } from "@0xchain/i18n/react";
|
|
5
|
+
import { Dropdown } from "antd";
|
|
6
|
+
import { useState } from "react";
|
|
7
|
+
import { Accordion, AccordionItem, AccordionTrigger } from "@0xchain/ui/accordion";
|
|
8
|
+
const PRODUCT_ITEMS = [
|
|
9
|
+
{
|
|
10
|
+
key: "widget",
|
|
11
|
+
href: "/widget",
|
|
12
|
+
label: /* @__PURE__ */ jsx(Translation, { value: "products.widget", parentKey: "menu" })
|
|
13
|
+
}
|
|
14
|
+
];
|
|
15
|
+
function Products({
|
|
16
|
+
onClick,
|
|
17
|
+
onExpandChange
|
|
18
|
+
}) {
|
|
19
|
+
const locale = useLocale();
|
|
20
|
+
const [accordionValue, setAccordionValue] = useState("");
|
|
21
|
+
const handleClick = (e, href) => {
|
|
22
|
+
e?.preventDefault();
|
|
23
|
+
e?.stopPropagation();
|
|
24
|
+
onClick?.();
|
|
25
|
+
setAccordionValue("");
|
|
26
|
+
const baseUrl = process.env.NEXT_PUBLIC_APP_URL || "";
|
|
27
|
+
window.location.href = `${baseUrl}/${locale}${href}`;
|
|
28
|
+
};
|
|
29
|
+
const renderItemContent = (item) => /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center gap-2 py-2 cursor-pointer font-medium", children: item.label });
|
|
30
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
31
|
+
/* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx(
|
|
32
|
+
Dropdown,
|
|
33
|
+
{
|
|
34
|
+
getPopupContainer: () => document.body,
|
|
35
|
+
classNames: {
|
|
36
|
+
root: "w-50"
|
|
37
|
+
},
|
|
38
|
+
arrow: { pointAtCenter: true },
|
|
39
|
+
placement: "bottom",
|
|
40
|
+
menu: {
|
|
41
|
+
items: PRODUCT_ITEMS.map((item) => ({
|
|
42
|
+
label: renderItemContent(item),
|
|
43
|
+
key: item.key,
|
|
44
|
+
onClick: (info) => handleClick(info.domEvent, item.href)
|
|
45
|
+
}))
|
|
46
|
+
},
|
|
47
|
+
children: /* @__PURE__ */ jsx("div", { className: "whitespace-nowrap flex items-center gap-1 rounded-lg md:px-4 md:py-1 ", children: /* @__PURE__ */ jsx(Translation, { value: "products.product", parentKey: "menu" }) })
|
|
48
|
+
}
|
|
49
|
+
) }),
|
|
50
|
+
/* @__PURE__ */ jsx("div", { className: "md:hidden w-full", children: /* @__PURE__ */ jsxs("div", { onClick: (e) => {
|
|
51
|
+
e.preventDefault();
|
|
52
|
+
e.stopPropagation();
|
|
53
|
+
}, children: [
|
|
54
|
+
/* @__PURE__ */ jsx(
|
|
55
|
+
Accordion,
|
|
56
|
+
{
|
|
57
|
+
type: "single",
|
|
58
|
+
collapsible: true,
|
|
59
|
+
className: "w-full",
|
|
60
|
+
value: accordionValue,
|
|
61
|
+
onValueChange: (value) => {
|
|
62
|
+
setAccordionValue(value);
|
|
63
|
+
onExpandChange?.(!!value);
|
|
64
|
+
},
|
|
65
|
+
children: /* @__PURE__ */ jsx(AccordionItem, { value: "products", className: "border-0", children: /* @__PURE__ */ jsx(AccordionTrigger, { className: "rounded-lg font-medium h-11 w-full flex py-2 justify-between items-center hover:no-underline focus-visible:ring-0 focus-visible:ring-offset-0", children: /* @__PURE__ */ jsx("div", { className: "flex w-full justify-between items-center", children: /* @__PURE__ */ jsx("span", { className: "text-foreground", children: /* @__PURE__ */ jsx(Translation, { value: "products.product", parentKey: "menu" }) }) }) }) })
|
|
66
|
+
}
|
|
67
|
+
),
|
|
68
|
+
/* @__PURE__ */ jsx(
|
|
69
|
+
"div",
|
|
70
|
+
{
|
|
71
|
+
className: "grid transition-[grid-template-rows] duration-300 ease-in-out",
|
|
72
|
+
style: { gridTemplateRows: accordionValue ? "1fr" : "0fr" },
|
|
73
|
+
children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "mt-3 rounded-lg flex flex-col gap-2 max-h-[60vh] overflow-auto", children: PRODUCT_ITEMS.map((item) => /* @__PURE__ */ jsx(
|
|
74
|
+
"div",
|
|
75
|
+
{
|
|
76
|
+
className: "w-full",
|
|
77
|
+
onClick: (e) => handleClick(e, item.href),
|
|
78
|
+
children: renderItemContent(item)
|
|
79
|
+
},
|
|
80
|
+
item.key
|
|
81
|
+
)) }) })
|
|
82
|
+
}
|
|
83
|
+
)
|
|
84
|
+
] }) })
|
|
85
|
+
] });
|
|
86
|
+
}
|
|
87
|
+
export {
|
|
88
|
+
Products as default
|
|
89
|
+
};
|
package/dist/lib/Right.js
CHANGED
|
@@ -1,21 +1,26 @@
|
|
|
1
|
-
import { jsxs
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import { twMerge
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import Nav from "./Nav.js";
|
|
3
|
+
import Drawer from "./Drawer.js";
|
|
4
|
+
import { twMerge } from "tailwind-merge";
|
|
5
|
+
var HeaderSource = /* @__PURE__ */ ((HeaderSource2) => {
|
|
6
|
+
HeaderSource2["EXPLORER"] = "explorer";
|
|
7
|
+
HeaderSource2["CHAT"] = "chat";
|
|
8
|
+
HeaderSource2["DEFAULT"] = "default";
|
|
9
|
+
return HeaderSource2;
|
|
10
|
+
})(HeaderSource || {});
|
|
11
|
+
function Right({
|
|
12
|
+
hideNews = false,
|
|
13
|
+
hideLogin = false,
|
|
14
|
+
user,
|
|
15
|
+
source = "default"
|
|
11
16
|
/* DEFAULT */
|
|
12
17
|
}) {
|
|
13
|
-
return /* @__PURE__ */
|
|
14
|
-
/* @__PURE__ */
|
|
15
|
-
/* @__PURE__ */
|
|
18
|
+
return /* @__PURE__ */ jsxs("div", { className: twMerge(source === "chat" ? "" : "flex md:flex-1 justify-start items-center md:gap-10 z-1001"), children: [
|
|
19
|
+
/* @__PURE__ */ jsx(Drawer, { hideLogin, hideNews, user }),
|
|
20
|
+
/* @__PURE__ */ jsx("div", { className: "hidden md:block flex-1", children: /* @__PURE__ */ jsx(Nav, { hideNews, hideLogin, user }) })
|
|
16
21
|
] });
|
|
17
22
|
}
|
|
18
23
|
export {
|
|
19
|
-
|
|
20
|
-
|
|
24
|
+
HeaderSource,
|
|
25
|
+
Right as default
|
|
21
26
|
};
|
|
@@ -1,56 +1,64 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsxs
|
|
3
|
-
import { useLocale
|
|
4
|
-
import { useSearchParams
|
|
5
|
-
import { Accordion
|
|
6
|
-
import { twMerge
|
|
7
|
-
import { useCallback
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
function
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const
|
|
2
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useLocale, useTranslations } from "@0xchain/i18n/react";
|
|
4
|
+
import { useSearchParams, usePathname } from "next/navigation";
|
|
5
|
+
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@0xchain/ui/accordion";
|
|
6
|
+
import { twMerge } from "tailwind-merge";
|
|
7
|
+
import { useCallback } from "react";
|
|
8
|
+
import LinkBar from "@0xchain/link";
|
|
9
|
+
import ThemeToggle from "@0xchain/theme-toggle";
|
|
10
|
+
function SettingBody({ onClick = () => void 0 }) {
|
|
11
|
+
const locale = useLocale();
|
|
12
|
+
const params = useSearchParams();
|
|
13
|
+
const t = useTranslations("lang");
|
|
14
|
+
const tSetting = useTranslations("setting");
|
|
15
|
+
const supportedLanguages = [
|
|
14
16
|
{ name: t("en"), lang: "en" },
|
|
15
17
|
{ name: t("ja"), lang: "ja" },
|
|
16
18
|
{ name: t("ko"), lang: "ko" },
|
|
17
19
|
{ name: t("zh-hant"), lang: "zh-hant" },
|
|
18
20
|
{ name: t("zh-hans"), lang: "zh-hans" }
|
|
19
|
-
]
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
];
|
|
22
|
+
const pathname = usePathname();
|
|
23
|
+
const generateLanguageUrl = useCallback(
|
|
24
|
+
(newLang) => {
|
|
25
|
+
const newUrl = pathname.replace(new RegExp(`/${locale}(/|$)`), `/${newLang}$1`);
|
|
26
|
+
const search = params.toString();
|
|
27
|
+
if (search) {
|
|
28
|
+
return `${newUrl}?${search}`;
|
|
29
|
+
}
|
|
30
|
+
return newUrl;
|
|
23
31
|
},
|
|
24
|
-
[
|
|
32
|
+
[pathname, locale, params]
|
|
25
33
|
);
|
|
26
|
-
return /* @__PURE__ */
|
|
27
|
-
/* @__PURE__ */
|
|
28
|
-
/* @__PURE__ */
|
|
29
|
-
/* @__PURE__ */
|
|
30
|
-
/* @__PURE__ */
|
|
34
|
+
return /* @__PURE__ */ jsxs("div", { className: "text-sm gap-2 flex flex-col justify-start items-start md:py-2", children: [
|
|
35
|
+
/* @__PURE__ */ jsx("div", { className: "flex w-full justify-between items-center", children: /* @__PURE__ */ jsx(Accordion, { type: "single", className: "flex-1", collapsible: true, children: /* @__PURE__ */ jsxs(AccordionItem, { value: locale, className: "border-0", children: [
|
|
36
|
+
/* @__PURE__ */ jsx(AccordionTrigger, { className: "p-2 bg-background rounded-lg h-11 md:h-auto text-gray-500 w-full flex py-2 justify-between items-center hover:no-underline focus-visible:ring-0 focus-visible:ring-offset-0", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full justify-between items-center", children: [
|
|
37
|
+
/* @__PURE__ */ jsx("span", { className: "text-foreground", children: tSetting("language") }),
|
|
38
|
+
/* @__PURE__ */ jsx("span", { className: "text-foreground", children: supportedLanguages.find((item) => item.lang === locale)?.name })
|
|
31
39
|
] }) }),
|
|
32
|
-
/* @__PURE__ */
|
|
33
|
-
|
|
40
|
+
/* @__PURE__ */ jsx(AccordionContent, { className: "bg-background mt-3 rounded-lg flex flex-col gap-2", children: supportedLanguages.map((item) => /* @__PURE__ */ jsx(
|
|
41
|
+
LinkBar,
|
|
34
42
|
{
|
|
35
|
-
prefetch:
|
|
36
|
-
withLocale:
|
|
37
|
-
className:
|
|
43
|
+
prefetch: false,
|
|
44
|
+
withLocale: false,
|
|
45
|
+
className: twMerge(
|
|
38
46
|
"p-2 rounded-lg flex w-full justify-between items-center",
|
|
39
|
-
|
|
47
|
+
locale === item.lang ? "text-primary" : ""
|
|
40
48
|
),
|
|
41
|
-
href:
|
|
42
|
-
onClick
|
|
43
|
-
children:
|
|
49
|
+
href: generateLanguageUrl(item.lang),
|
|
50
|
+
onClick,
|
|
51
|
+
children: item.name
|
|
44
52
|
},
|
|
45
|
-
|
|
53
|
+
item.lang
|
|
46
54
|
)) })
|
|
47
55
|
] }) }) }),
|
|
48
|
-
/* @__PURE__ */
|
|
49
|
-
/* @__PURE__ */
|
|
50
|
-
/* @__PURE__ */
|
|
56
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-background p-2 rounded-lg h-11 md:h-auto flex w-full justify-between items-center", children: [
|
|
57
|
+
/* @__PURE__ */ jsx("div", { children: tSetting("theme") }),
|
|
58
|
+
/* @__PURE__ */ jsx(ThemeToggle, {})
|
|
51
59
|
] })
|
|
52
60
|
] });
|
|
53
61
|
}
|
|
54
62
|
export {
|
|
55
|
-
|
|
63
|
+
SettingBody as default
|
|
56
64
|
};
|
|
@@ -1,18 +1,49 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
3
|
+
import IconFont from "@0xchain/iconfont";
|
|
4
|
+
import Tooltip from "@0xchain/tooltip";
|
|
5
|
+
import SettingBody from "./SettingBody.js";
|
|
6
|
+
import { useIsChaindigg } from "../context.js";
|
|
7
|
+
function Setting({ onClick = () => void 0 }) {
|
|
8
|
+
const isChaindigg = useIsChaindigg();
|
|
9
|
+
const onChange = (open) => {
|
|
10
|
+
const iframes = document.querySelectorAll("iframe");
|
|
11
|
+
iframes.forEach((iframe) => {
|
|
12
|
+
iframe.style.pointerEvents = open ? "none" : "auto";
|
|
13
|
+
});
|
|
14
|
+
};
|
|
15
|
+
if (isChaindigg) {
|
|
16
|
+
return /* @__PURE__ */ jsxs("div", { className: "w-full md:w-auto order-3 md:order-0", children: [
|
|
17
|
+
/* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center bg-card rounded-lg p-1.5 cursor-pointer", children: /* @__PURE__ */ jsx(
|
|
18
|
+
Tooltip,
|
|
19
|
+
{
|
|
20
|
+
side: "bottom",
|
|
21
|
+
needClick: true,
|
|
22
|
+
contentClassName: "w-70 rounded-lg bg-card shadow-lg text-foreground border-transparent outline-none",
|
|
23
|
+
trigger: /* @__PURE__ */ jsx(IconFont, { type: "icon-setting", className: "text-2xl border border-transparent hover:border-border" }),
|
|
24
|
+
arrowClassName: "fill-module",
|
|
25
|
+
children: /* @__PURE__ */ jsx(SettingBody, { onClick })
|
|
26
|
+
}
|
|
27
|
+
) }),
|
|
28
|
+
/* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(SettingBody, {}) })
|
|
29
|
+
] });
|
|
30
|
+
}
|
|
31
|
+
return /* @__PURE__ */ jsxs("div", { className: "w-full md:w-auto order-3 md:order-0", children: [
|
|
32
|
+
/* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center bg-card hover:bg-border rounded-lg p-1.5 cursor-pointer", children: /* @__PURE__ */ jsx(
|
|
33
|
+
Tooltip,
|
|
34
|
+
{
|
|
35
|
+
side: "bottom",
|
|
36
|
+
onChange,
|
|
37
|
+
needClick: true,
|
|
38
|
+
contentClassName: "bg-card w-70 rounded-lg bg-card text-foreground border border-border",
|
|
39
|
+
trigger: /* @__PURE__ */ jsx(IconFont, { type: "icon-centersetup", className: "text-2xl" }),
|
|
40
|
+
arrowClassName: "fill-card",
|
|
41
|
+
children: /* @__PURE__ */ jsx(SettingBody, { onClick })
|
|
42
|
+
}
|
|
43
|
+
) }),
|
|
44
|
+
/* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(SettingBody, {}) })
|
|
14
45
|
] });
|
|
15
46
|
}
|
|
16
47
|
export {
|
|
17
|
-
|
|
48
|
+
Setting as default
|
|
18
49
|
};
|