@particle-network/auth-core-modal
Version:
Auth Core provides MPC (Multi-Party Computation)-based threshold signatures.
98 lines (94 loc) • 6.17 kB
JavaScript
"use client";
import {
header_default
} from "./chunk-W3JANJPG.js";
import {
svg_icon_default
} from "./chunk-VCVXJFMF.js";
import {
power_footer_default
} from "./chunk-S2Q2HZA6.js";
import {
useCustomNavigate,
useCustomize,
useModalOptions
} from "./chunk-NJW64X5G.js";
import "./chunk-LQ53OFQ3.js";
// src/pages/manageDevices/deviceList/index.tsx
import { getAuthorizationDApps } from "@particle-network/auth-core";
import { useRequest } from "ahooks";
import { Skeleton } from "antd";
import dayjs from "dayjs";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
// src/pages/manageDevices/deviceList/index.less
var deviceList_default = ".device-list-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n color: var(--text-color);\n}\n.device-list-container .scroll-wrapper {\n flex: 1;\n overflow: auto;\n}\n.device-list-container .devices-description {\n margin: 32px 18px 40px;\n font-weight: 400;\n font-size: 13px;\n color: var(--secondary-text-color);\n}\n.device-list-container .ant-spin-nested-loading > div > .ant-spin {\n top: 10vh;\n}\n.device-list-container .device-list {\n width: 100%;\n padding: 0 18px;\n}\n.device-list-container .device-list .ant-skeleton-content .ant-skeleton-title {\n display: none;\n}\n.device-list-container .device-list .item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n height: 70px;\n padding: 0 12px 0 14px;\n margin-bottom: 10px;\n border-radius: var(--card-border-radius);\n background: var(--card-unclickable-background-color);\n cursor: pointer;\n}\n.device-list-container .device-list .item .device {\n font-weight: 500;\n font-size: 14px;\n}\n.device-list-container .device-list .item .created_at {\n margin-top: 4px;\n font-weight: 400;\n font-size: 12px;\n line-height: 1.2;\n color: var(--secondary-text-color);\n}\n.device-list-container .device-list .item .right {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 8px;\n}\n.device-list-container .device-list .item .right .arrow-right-icon {\n color: var(--text-color);\n}\n.device-list-container .device-list .item .right .arrow-right-icon svg {\n width: 12px;\n height: 12px;\n}\n.device-list-container .device-list .item .right .current-icon {\n position: relative;\n height: 20px;\n padding: 0 10px;\n border-radius: 30px;\n overflow: hidden;\n font-size: 13px;\n line-height: 20px;\n white-space: nowrap;\n color: var(--accent-color);\n}\n.device-list-container .device-list .item .right .current-icon::after {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: var(--accent-color);\n opacity: 0.15;\n content: '';\n}\n";
// src/pages/manageDevices/deviceList/index.tsx
var DeviceList = () => {
const { t } = useTranslation();
const navigate = useCustomNavigate();
const { modalOptions } = useModalOptions();
const { language } = useCustomize();
const {
loading,
data: deviceList = [],
run: getAuthorizationsRequest
} = useRequest(
() => {
return getAuthorizationDApps().then((list) => {
return list.map((item) => {
var _a, _b;
if (item.updated_at) {
item.updated_at = dayjs(new Date(item.updated_at)).format("YYYY/MM/DD HH:mm");
}
if (modalOptions.projectId === item.project_app_uuid) {
item.isCurrent = true;
}
if (item.login_channel) {
item.login_channel = item.login_channel.replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
}
if ((_a = item == null ? void 0 : item.location) == null ? void 0 : _a.country_code) {
try {
item.location.country_name = new Intl.DisplayNames([language || "en"], {
type: "region"
}).of((_b = item == null ? void 0 : item.location) == null ? void 0 : _b.country_code);
} catch (error) {
console.log("Intl.DisplayNames", error);
}
}
return item;
});
});
},
{
cacheKey: "getAuthorizations",
manual: true
}
);
useEffect(() => {
getAuthorizationsRequest();
}, []);
return /* @__PURE__ */ React.createElement("div", { className: "device-list-container" }, /* @__PURE__ */ React.createElement("style", null, deviceList_default), /* @__PURE__ */ React.createElement(header_default, { displayBackBtn: true }, t("new.authorization")), /* @__PURE__ */ React.createElement("div", { className: "scroll-wrapper" }, /* @__PURE__ */ React.createElement("div", { className: "devices-description" }, t("new.authorization_tips")), loading ? /* @__PURE__ */ React.createElement("div", { className: "device-list" }, /* @__PURE__ */ React.createElement(Skeleton, null)) : /* @__PURE__ */ React.createElement("div", { className: "device-list" }, deviceList == null ? void 0 : deviceList.map((item, index) => {
return /* @__PURE__ */ React.createElement(
"div",
{
className: "item",
key: index,
onClick: () => {
navigate("/manageDevices/deviceDetails", {
state: {
loginDeviceInfo: item
}
});
}
},
/* @__PURE__ */ React.createElement("div", { className: "left" }, /* @__PURE__ */ React.createElement("div", { className: "wrap" }, /* @__PURE__ */ React.createElement("div", { className: "s-row device" }, item.project_app_name), /* @__PURE__ */ React.createElement("div", { className: "s-row created_at" }, item.updated_at))),
/* @__PURE__ */ React.createElement("div", { className: "right" }, item.isCurrent && /* @__PURE__ */ React.createElement("div", { className: "current-icon" }, t("new.current")), /* @__PURE__ */ React.createElement(svg_icon_default, { className: "arrow-right-icon", name: "arrow_right_icon" }))
);
}))), /* @__PURE__ */ React.createElement(power_footer_default, { className: "footer-box-v2" }));
};
var deviceList_default2 = DeviceList;
export {
deviceList_default2 as default
};
//# sourceMappingURL=deviceList-RSPXJIOI.js.map