@matchain/matchid-sdk-react 0.1.18 → 0.1.19
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/index.js +169 -146
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +169 -146
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -513,23 +513,41 @@ function CopyIcon({ size = 20, color = "black", ...props }) {
|
|
|
513
513
|
) });
|
|
514
514
|
}
|
|
515
515
|
|
|
516
|
-
// src/
|
|
516
|
+
// src/assets/icon/LinkedinIcon.tsx
|
|
517
517
|
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
518
|
+
function LinkedinIcon({
|
|
519
|
+
size = 40,
|
|
520
|
+
...props
|
|
521
|
+
}) {
|
|
522
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("svg", { width: size, height: size, ...props, viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
523
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("rect", { width: "40", height: "40", rx: "8", fill: "#0A66C2" }),
|
|
524
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
525
|
+
"path",
|
|
526
|
+
{
|
|
527
|
+
d: "M29.376 9H10.624C10.1933 9 9.78023 9.1711 9.47567 9.47567C9.1711 9.78023 9 10.1933 9 10.624V29.376C9 29.8067 9.1711 30.2198 9.47567 30.5243C9.78023 30.8289 10.1933 31 10.624 31H29.376C29.8067 31 30.2198 30.8289 30.5243 30.5243C30.8289 30.2198 31 29.8067 31 29.376V10.624C31 10.1933 30.8289 9.78023 30.5243 9.47567C30.2198 9.1711 29.8067 9 29.376 9ZM15.5572 27.7413H12.2496V17.2347H15.5572V27.7413ZM13.9011 15.7788C13.5259 15.7766 13.1598 15.6634 12.8488 15.4534C12.5379 15.2434 12.2962 14.946 12.1541 14.5987C12.0121 14.2514 11.9761 13.8699 12.0507 13.5022C12.1253 13.1345 12.3072 12.7971 12.5733 12.5326C12.8395 12.2682 13.178 12.0885 13.5462 12.0163C13.9144 11.944 14.2957 11.9825 14.642 12.1267C14.9884 12.271 15.2842 12.5147 15.4923 12.8269C15.7003 13.1392 15.8111 13.5061 15.8108 13.8813C15.8144 14.1324 15.7673 14.3818 15.6724 14.6144C15.5776 14.847 15.4368 15.0582 15.2586 15.2352C15.0804 15.4123 14.8684 15.5517 14.6351 15.6451C14.4019 15.7384 14.1523 15.7839 13.9011 15.7788ZM27.7489 27.7504H24.4428V22.0106C24.4428 20.3178 23.7232 19.7953 22.7943 19.7953C21.8135 19.7953 20.851 20.5347 20.851 22.0533V27.7504H17.5433V17.2424H20.7242V18.6983H20.7669C21.0863 18.0521 22.2046 16.9475 23.9111 16.9475C25.7567 16.9475 27.7504 18.0429 27.7504 21.2513L27.7489 27.7504Z",
|
|
528
|
+
fill: "white"
|
|
529
|
+
}
|
|
530
|
+
)
|
|
531
|
+
] });
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
// src/components/Modal/index.tsx
|
|
535
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
518
536
|
function Modal({
|
|
519
537
|
children,
|
|
520
538
|
isOpen,
|
|
521
539
|
width = 480,
|
|
522
540
|
className = ""
|
|
523
541
|
}) {
|
|
524
|
-
return isOpen ? /* @__PURE__ */ (0,
|
|
542
|
+
return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
525
543
|
"div",
|
|
526
544
|
{
|
|
527
545
|
className: "matchid-overlay",
|
|
528
|
-
children: /* @__PURE__ */ (0,
|
|
546
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `matchid-modal ${className}`, style: {
|
|
529
547
|
width
|
|
530
548
|
}, children })
|
|
531
549
|
}
|
|
532
|
-
) : /* @__PURE__ */ (0,
|
|
550
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, {});
|
|
533
551
|
}
|
|
534
552
|
function ModalWithHeader({
|
|
535
553
|
children,
|
|
@@ -540,13 +558,13 @@ function ModalWithHeader({
|
|
|
540
558
|
showClose = true,
|
|
541
559
|
...props
|
|
542
560
|
}) {
|
|
543
|
-
return /* @__PURE__ */ (0,
|
|
544
|
-
/* @__PURE__ */ (0,
|
|
545
|
-
/* @__PURE__ */ (0,
|
|
546
|
-
onBack && /* @__PURE__ */ (0,
|
|
547
|
-
/* @__PURE__ */ (0,
|
|
561
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Modal, { ...props, children: [
|
|
562
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: `matchid-modal-header ${showBorder ? "matchid-modal-header-border" : ""}`, children: [
|
|
563
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "matchid-modal-header-content", children: [
|
|
564
|
+
onBack && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ArrowLeftIcon, { className: "matchid-modal-header-back", onClick: onBack }),
|
|
565
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "matchid-modal-header-title", children: title })
|
|
548
566
|
] }),
|
|
549
|
-
onClose && /* @__PURE__ */ (0,
|
|
567
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CloseRoundIcon, { className: "matchid-modal-header-close", onClick: onClose })
|
|
550
568
|
] }),
|
|
551
569
|
children
|
|
552
570
|
] });
|
|
@@ -557,7 +575,7 @@ var import_react5 = require("react");
|
|
|
557
575
|
|
|
558
576
|
// src/components/Input/index.tsx
|
|
559
577
|
var import_react = require("react");
|
|
560
|
-
var
|
|
578
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
561
579
|
function Input({
|
|
562
580
|
onChange,
|
|
563
581
|
type,
|
|
@@ -566,22 +584,22 @@ function Input({
|
|
|
566
584
|
...props
|
|
567
585
|
}) {
|
|
568
586
|
const [inputType, setInputType] = (0, import_react.useState)(type);
|
|
569
|
-
return /* @__PURE__ */ (0,
|
|
570
|
-
/* @__PURE__ */ (0,
|
|
571
|
-
props.value.length > 0 && /* @__PURE__ */ (0,
|
|
587
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: `matchid-input-box ${props.value.length > 0 ? "matchid-input-has-content" : ""} ${className}`, children: [
|
|
588
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("input", { type: inputType, onChange, ...props, className: "matchid-input-field" }),
|
|
589
|
+
props.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DeleteRoundIcon, { onClick: (e) => {
|
|
572
590
|
if (onChange) {
|
|
573
591
|
onChange({ target: { value: "" } });
|
|
574
592
|
}
|
|
575
593
|
}, className: "matchid-input-delete-icon", color: "var(--matchid-input-delete-icon-color)" }),
|
|
576
|
-
type === "password" && /* @__PURE__ */ (0,
|
|
594
|
+
type === "password" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "matchid-input-eye-icon", onClick: () => {
|
|
577
595
|
setInputType(inputType === "password" ? "text" : "password");
|
|
578
|
-
}, children: inputType === "password" ? /* @__PURE__ */ (0,
|
|
596
|
+
}, children: inputType === "password" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CloseEyeIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(OpenEyeIcon, {}) }),
|
|
579
597
|
after
|
|
580
598
|
] });
|
|
581
599
|
}
|
|
582
600
|
|
|
583
601
|
// src/components/Field/index.tsx
|
|
584
|
-
var
|
|
602
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
585
603
|
function Field({
|
|
586
604
|
label,
|
|
587
605
|
children,
|
|
@@ -589,18 +607,18 @@ function Field({
|
|
|
589
607
|
required,
|
|
590
608
|
className = ""
|
|
591
609
|
}) {
|
|
592
|
-
return /* @__PURE__ */ (0,
|
|
593
|
-
/* @__PURE__ */ (0,
|
|
594
|
-
required && /* @__PURE__ */ (0,
|
|
610
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: `matchid-field-box ${className}`, children: [
|
|
611
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "matchid-field-label", children: [
|
|
612
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "matchid-field-required", children: "*" }),
|
|
595
613
|
label
|
|
596
614
|
] }),
|
|
597
615
|
children,
|
|
598
|
-
error && /* @__PURE__ */ (0,
|
|
616
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "matchid-field-error", children: error })
|
|
599
617
|
] });
|
|
600
618
|
}
|
|
601
619
|
|
|
602
620
|
// src/components/Button/index.tsx
|
|
603
|
-
var
|
|
621
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
604
622
|
function Button({
|
|
605
623
|
size = "df",
|
|
606
624
|
disabled = false,
|
|
@@ -619,7 +637,7 @@ function Button({
|
|
|
619
637
|
onClick && onClick();
|
|
620
638
|
}
|
|
621
639
|
};
|
|
622
|
-
return /* @__PURE__ */ (0,
|
|
640
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
623
641
|
"button",
|
|
624
642
|
{
|
|
625
643
|
type,
|
|
@@ -629,7 +647,7 @@ function Button({
|
|
|
629
647
|
...style
|
|
630
648
|
},
|
|
631
649
|
onClick: onAction,
|
|
632
|
-
children: loading ? /* @__PURE__ */ (0,
|
|
650
|
+
children: loading ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(LoadingIcon_default, { className: "matchid-btn-loading-icon", color: "var(--matchid-btn-loading-color)" }) : children
|
|
633
651
|
}
|
|
634
652
|
);
|
|
635
653
|
}
|
|
@@ -1339,7 +1357,7 @@ function useCopyClipboard(timeout = 500) {
|
|
|
1339
1357
|
}
|
|
1340
1358
|
|
|
1341
1359
|
// src/components/PasswordModal/index.tsx
|
|
1342
|
-
var
|
|
1360
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1343
1361
|
function PasswordModal({
|
|
1344
1362
|
title,
|
|
1345
1363
|
isOpen,
|
|
@@ -1385,13 +1403,13 @@ function PasswordModal({
|
|
|
1385
1403
|
setIsSubmitting(false);
|
|
1386
1404
|
}
|
|
1387
1405
|
};
|
|
1388
|
-
return /* @__PURE__ */ (0,
|
|
1389
|
-
/* @__PURE__ */ (0,
|
|
1390
|
-
/* @__PURE__ */ (0,
|
|
1391
|
-
/* @__PURE__ */ (0,
|
|
1406
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ModalWithHeader, { isOpen: isOpen && isLogin, ...props, title: title || "Set Password", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "matchid-password-box", children: [
|
|
1407
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "matchid-password-header", children: [
|
|
1408
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "matchid-password-header-icon", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PasswordRoundIcon, {}) }),
|
|
1409
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "matchid-password-header-content", children: "Please set the wallet password that will be used to recover the wallet" })
|
|
1392
1410
|
] }),
|
|
1393
|
-
/* @__PURE__ */ (0,
|
|
1394
|
-
/* @__PURE__ */ (0,
|
|
1411
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "matchid-password-content", children: [
|
|
1412
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Field, { label: "Password", error: password.length > 0 && passwordError, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
1395
1413
|
Input,
|
|
1396
1414
|
{
|
|
1397
1415
|
placeholder: "Enter the Password",
|
|
@@ -1401,7 +1419,7 @@ function PasswordModal({
|
|
|
1401
1419
|
value: password
|
|
1402
1420
|
}
|
|
1403
1421
|
) }),
|
|
1404
|
-
/* @__PURE__ */ (0,
|
|
1422
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Field, { label: "Re Password", error: rePassword.length > 0 ? rePasswordError || error : error, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
1405
1423
|
Input,
|
|
1406
1424
|
{
|
|
1407
1425
|
placeholder: "Re Enter the Password",
|
|
@@ -1412,7 +1430,7 @@ function PasswordModal({
|
|
|
1412
1430
|
}
|
|
1413
1431
|
) })
|
|
1414
1432
|
] }),
|
|
1415
|
-
/* @__PURE__ */ (0,
|
|
1433
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
1416
1434
|
Button,
|
|
1417
1435
|
{
|
|
1418
1436
|
disabled: password.length == 0 || !!passwordError || !!rePasswordError,
|
|
@@ -1429,7 +1447,7 @@ function PasswordModal({
|
|
|
1429
1447
|
|
|
1430
1448
|
// src/components/RecoveryModal/index.tsx
|
|
1431
1449
|
var import_react6 = require("react");
|
|
1432
|
-
var
|
|
1450
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1433
1451
|
function RecoveryModal({
|
|
1434
1452
|
title,
|
|
1435
1453
|
isOpen,
|
|
@@ -1465,12 +1483,12 @@ function RecoveryModal({
|
|
|
1465
1483
|
setIsSubmitting(false);
|
|
1466
1484
|
}
|
|
1467
1485
|
};
|
|
1468
|
-
return /* @__PURE__ */ (0,
|
|
1469
|
-
/* @__PURE__ */ (0,
|
|
1470
|
-
/* @__PURE__ */ (0,
|
|
1471
|
-
/* @__PURE__ */ (0,
|
|
1486
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ModalWithHeader, { isOpen: isOpen && isLogin, ...props, title: title || "Recover Wallet", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "matchid-password-box", children: [
|
|
1487
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "matchid-password-header", children: [
|
|
1488
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "matchid-password-header-icon", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PasswordRoundIcon, {}) }),
|
|
1489
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "matchid-password-header-content", children: "Please enter your password to recover your wallet" })
|
|
1472
1490
|
] }),
|
|
1473
|
-
/* @__PURE__ */ (0,
|
|
1491
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "matchid-password-content", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Field, { label: "Password", error: password.length > 0 ? passwordError || error : error, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
1474
1492
|
Input,
|
|
1475
1493
|
{
|
|
1476
1494
|
placeholder: "Enter the Password",
|
|
@@ -1480,7 +1498,7 @@ function RecoveryModal({
|
|
|
1480
1498
|
value: password
|
|
1481
1499
|
}
|
|
1482
1500
|
) }) }),
|
|
1483
|
-
/* @__PURE__ */ (0,
|
|
1501
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
1484
1502
|
Button,
|
|
1485
1503
|
{
|
|
1486
1504
|
disabled: password.length == 0 || !!passwordError,
|
|
@@ -1496,13 +1514,13 @@ function RecoveryModal({
|
|
|
1496
1514
|
}
|
|
1497
1515
|
|
|
1498
1516
|
// src/context/BusinessProvider.tsx
|
|
1499
|
-
var
|
|
1517
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1500
1518
|
function BusinessProvider({ children }) {
|
|
1501
1519
|
const { overview, token } = useUserInfo();
|
|
1502
1520
|
const { recoveryModal } = useStore_default();
|
|
1503
|
-
return /* @__PURE__ */ (0,
|
|
1504
|
-
/* @__PURE__ */ (0,
|
|
1505
|
-
/* @__PURE__ */ (0,
|
|
1521
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
|
|
1522
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PasswordModal, { isOpen: !!token && !!overview && !overview.address && !!overview.did, showClose: false }),
|
|
1523
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
1506
1524
|
RecoveryModal,
|
|
1507
1525
|
{
|
|
1508
1526
|
isOpen: !!token && !!overview && !!overview.address && recoveryModal.open,
|
|
@@ -1515,12 +1533,12 @@ function BusinessProvider({ children }) {
|
|
|
1515
1533
|
}
|
|
1516
1534
|
|
|
1517
1535
|
// src/context/index.tsx
|
|
1518
|
-
var
|
|
1536
|
+
var import_jsx_runtime33 = (
|
|
1519
1537
|
// <MpcWalletProvider>
|
|
1520
1538
|
require("react/jsx-runtime")
|
|
1521
1539
|
);
|
|
1522
1540
|
var Providers = ({ children }) => {
|
|
1523
|
-
return /* @__PURE__ */ (0,
|
|
1541
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(BusinessProvider, { children });
|
|
1524
1542
|
};
|
|
1525
1543
|
var context_default = Providers;
|
|
1526
1544
|
|
|
@@ -1766,7 +1784,7 @@ function useInit({
|
|
|
1766
1784
|
|
|
1767
1785
|
// src/MatchContext.tsx
|
|
1768
1786
|
var import_react_query = require("@tanstack/react-query");
|
|
1769
|
-
var
|
|
1787
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1770
1788
|
var queryClient = new import_react_query.QueryClient();
|
|
1771
1789
|
var MatchContext = (0, import_react9.createContext)(void 0);
|
|
1772
1790
|
var MatchProvider = ({ children, appid, events, theme = "light", endpoints }) => {
|
|
@@ -1779,7 +1797,7 @@ var MatchProvider = ({ children, appid, events, theme = "light", endpoints }) =>
|
|
|
1779
1797
|
useWalletInit({
|
|
1780
1798
|
refreshOverview: loadOverview
|
|
1781
1799
|
});
|
|
1782
|
-
return /* @__PURE__ */ (0,
|
|
1800
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
1783
1801
|
MatchContext.Provider,
|
|
1784
1802
|
{
|
|
1785
1803
|
value: {
|
|
@@ -1789,7 +1807,7 @@ var MatchProvider = ({ children, appid, events, theme = "light", endpoints }) =>
|
|
|
1789
1807
|
login,
|
|
1790
1808
|
theme
|
|
1791
1809
|
},
|
|
1792
|
-
children: /* @__PURE__ */ (0,
|
|
1810
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(context_default, { children })
|
|
1793
1811
|
}
|
|
1794
1812
|
) });
|
|
1795
1813
|
};
|
|
@@ -1824,7 +1842,7 @@ var import_react12 = require("react");
|
|
|
1824
1842
|
|
|
1825
1843
|
// src/components/EmailModal/StepEmail.tsx
|
|
1826
1844
|
var import_react10 = require("react");
|
|
1827
|
-
var
|
|
1845
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1828
1846
|
function StepEmail(props) {
|
|
1829
1847
|
const [emailVal, setEmailVal] = (0, import_react10.useState)("");
|
|
1830
1848
|
(0, import_react10.useEffect)(() => {
|
|
@@ -1838,8 +1856,8 @@ function StepEmail(props) {
|
|
|
1838
1856
|
const onContinue = async () => {
|
|
1839
1857
|
props.onContinue(emailVal);
|
|
1840
1858
|
};
|
|
1841
|
-
return /* @__PURE__ */ (0,
|
|
1842
|
-
/* @__PURE__ */ (0,
|
|
1859
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "matchid-email-email-box", children: [
|
|
1860
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Field, { label: "Email Address", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
1843
1861
|
Input,
|
|
1844
1862
|
{
|
|
1845
1863
|
placeholder: "Enter Your Email Address",
|
|
@@ -1847,7 +1865,7 @@ function StepEmail(props) {
|
|
|
1847
1865
|
value: emailVal
|
|
1848
1866
|
}
|
|
1849
1867
|
) }),
|
|
1850
|
-
/* @__PURE__ */ (0,
|
|
1868
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button, { disabled: !canContinue, style: {
|
|
1851
1869
|
marginTop: "64px"
|
|
1852
1870
|
}, onClick: onContinue, size: "lg", block: true, highlight: true, children: "Continue" })
|
|
1853
1871
|
] });
|
|
@@ -1861,7 +1879,7 @@ var EMAIL_INTERVAL = 60;
|
|
|
1861
1879
|
var EMAIL_CODE_LENGTH = 6;
|
|
1862
1880
|
|
|
1863
1881
|
// src/components/EmailModal/StepVerify.tsx
|
|
1864
|
-
var
|
|
1882
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
1865
1883
|
function StepVerify(props) {
|
|
1866
1884
|
const { getLoginEmailCode, loginByEmail } = useUserInfo();
|
|
1867
1885
|
const [error, setError] = (0, import_react11.useState)("");
|
|
@@ -1930,22 +1948,22 @@ function StepVerify(props) {
|
|
|
1930
1948
|
setSubmitting(false);
|
|
1931
1949
|
}
|
|
1932
1950
|
};
|
|
1933
|
-
return /* @__PURE__ */ (0,
|
|
1934
|
-
/* @__PURE__ */ (0,
|
|
1935
|
-
/* @__PURE__ */ (0,
|
|
1936
|
-
/* @__PURE__ */ (0,
|
|
1937
|
-
/* @__PURE__ */ (0,
|
|
1938
|
-
/* @__PURE__ */ (0,
|
|
1951
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "matchid-email-verify-box", children: [
|
|
1952
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "matchid-email-verify-header", children: [
|
|
1953
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "matchid-email-verify-header-icon", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(EmailLineIcon, {}) }),
|
|
1954
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "matchid-email-verify-header-content", children: [
|
|
1955
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "matchid-email-verify-header-value", children: props.email }),
|
|
1956
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "matchid-email-verify-header-tips", children: "We have sent a verification code to your email" })
|
|
1939
1957
|
] })
|
|
1940
1958
|
] }),
|
|
1941
|
-
/* @__PURE__ */ (0,
|
|
1959
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Field, { label: "Verification Code", error, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
1942
1960
|
Input,
|
|
1943
1961
|
{
|
|
1944
1962
|
placeholder: "Enter the code",
|
|
1945
1963
|
maxLength: codeLength,
|
|
1946
1964
|
onChange: (e) => setCode(e.target.value),
|
|
1947
1965
|
value: code,
|
|
1948
|
-
after: /* @__PURE__ */ (0,
|
|
1966
|
+
after: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
1949
1967
|
Button,
|
|
1950
1968
|
{
|
|
1951
1969
|
highlight: true,
|
|
@@ -1964,12 +1982,12 @@ function StepVerify(props) {
|
|
|
1964
1982
|
)
|
|
1965
1983
|
}
|
|
1966
1984
|
) }),
|
|
1967
|
-
/* @__PURE__ */ (0,
|
|
1985
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { disabled: !canContinue, highlight: true, block: true, size: "lg", onClick: onContinue, children: "Continue" })
|
|
1968
1986
|
] });
|
|
1969
1987
|
}
|
|
1970
1988
|
|
|
1971
1989
|
// src/components/EmailModal/index.tsx
|
|
1972
|
-
var
|
|
1990
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
1973
1991
|
function EmailModal({
|
|
1974
1992
|
isOpen = false,
|
|
1975
1993
|
width = 480,
|
|
@@ -1985,7 +2003,7 @@ function EmailModal({
|
|
|
1985
2003
|
setEmailVal("");
|
|
1986
2004
|
}
|
|
1987
2005
|
}, [isOpen]);
|
|
1988
|
-
return /* @__PURE__ */ (0,
|
|
2006
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
1989
2007
|
ModalWithHeader,
|
|
1990
2008
|
{
|
|
1991
2009
|
isOpen,
|
|
@@ -1993,17 +2011,17 @@ function EmailModal({
|
|
|
1993
2011
|
onClose,
|
|
1994
2012
|
title: "Email",
|
|
1995
2013
|
onBack: step == "verify" ? () => setStep("input") : onBack,
|
|
1996
|
-
children: step === "input" ? /* @__PURE__ */ (0,
|
|
2014
|
+
children: step === "input" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StepEmail, { email: emailVal, onContinue: (email) => {
|
|
1997
2015
|
setEmailVal(email);
|
|
1998
2016
|
setStep("verify");
|
|
1999
|
-
} }) : /* @__PURE__ */ (0,
|
|
2017
|
+
} }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StepVerify, { email: emailVal, onSuccess: onLogin })
|
|
2000
2018
|
}
|
|
2001
2019
|
);
|
|
2002
2020
|
}
|
|
2003
2021
|
|
|
2004
2022
|
// src/components/Popover/index.tsx
|
|
2005
2023
|
var import_react13 = require("react");
|
|
2006
|
-
var
|
|
2024
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
2007
2025
|
function Popover({
|
|
2008
2026
|
children,
|
|
2009
2027
|
content,
|
|
@@ -2013,7 +2031,7 @@ function Popover({
|
|
|
2013
2031
|
gap = "20px"
|
|
2014
2032
|
}) {
|
|
2015
2033
|
const [active, setActive] = (0, import_react13.useState)(false);
|
|
2016
|
-
return /* @__PURE__ */ (0,
|
|
2034
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
2017
2035
|
"div",
|
|
2018
2036
|
{
|
|
2019
2037
|
onClick: () => {
|
|
@@ -2024,9 +2042,9 @@ function Popover({
|
|
|
2024
2042
|
className: `matchid-popover-box matchid-popover-${position} matchid-popover-${type} ${className} ${type == "click" && active ? "matchid-popover-click-active" : ""}`,
|
|
2025
2043
|
children: [
|
|
2026
2044
|
children,
|
|
2027
|
-
/* @__PURE__ */ (0,
|
|
2045
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: {
|
|
2028
2046
|
paddingTop: gap
|
|
2029
|
-
}, children: /* @__PURE__ */ (0,
|
|
2047
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `matchid-popover-content`, children: content }) })
|
|
2030
2048
|
]
|
|
2031
2049
|
}
|
|
2032
2050
|
);
|
|
@@ -2034,7 +2052,7 @@ function Popover({
|
|
|
2034
2052
|
|
|
2035
2053
|
// src/components/LoginBox/index.tsx
|
|
2036
2054
|
var import_react14 = require("react");
|
|
2037
|
-
var
|
|
2055
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
2038
2056
|
function LoginBox({
|
|
2039
2057
|
methods,
|
|
2040
2058
|
inModal = false
|
|
@@ -2056,66 +2074,71 @@ function LoginBox({
|
|
|
2056
2074
|
name,
|
|
2057
2075
|
onClick
|
|
2058
2076
|
}) => {
|
|
2059
|
-
return /* @__PURE__ */ (0,
|
|
2060
|
-
/* @__PURE__ */ (0,
|
|
2061
|
-
/* @__PURE__ */ (0,
|
|
2062
|
-
/* @__PURE__ */ (0,
|
|
2077
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "matchid-login-method", onClick, children: [
|
|
2078
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "matchid-login-method-content", children: [
|
|
2079
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "matchid-login-method-icon", children: icon }),
|
|
2080
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "matchid-login-method-name", children: name })
|
|
2063
2081
|
] }),
|
|
2064
|
-
/* @__PURE__ */ (0,
|
|
2082
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ArrowRightIcon, { className: "matchid-login-method-arrow", size: 20, color: "var(--matchid-arrow-color)" })
|
|
2065
2083
|
] });
|
|
2066
2084
|
};
|
|
2067
2085
|
const methodMap = {
|
|
2068
2086
|
wallet: {
|
|
2069
|
-
icon: /* @__PURE__ */ (0,
|
|
2087
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(WalletIcon, {}),
|
|
2070
2088
|
name: "Wallet",
|
|
2071
2089
|
onClick: () => login("wallet")
|
|
2072
2090
|
},
|
|
2073
2091
|
email: {
|
|
2074
|
-
icon: /* @__PURE__ */ (0,
|
|
2092
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(EmailIcon, {}),
|
|
2075
2093
|
name: "Email",
|
|
2076
2094
|
onClick: () => {
|
|
2077
2095
|
setEmailOpen(true);
|
|
2078
2096
|
}
|
|
2079
2097
|
},
|
|
2080
2098
|
google: {
|
|
2081
|
-
icon: /* @__PURE__ */ (0,
|
|
2099
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(GoogleIcon, {}),
|
|
2082
2100
|
name: "Google",
|
|
2083
2101
|
onClick: () => login("google")
|
|
2084
2102
|
},
|
|
2085
2103
|
twitter: {
|
|
2086
|
-
icon: /* @__PURE__ */ (0,
|
|
2104
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(XIcon, {}),
|
|
2087
2105
|
name: "X",
|
|
2088
2106
|
onClick: () => login("twitter")
|
|
2089
2107
|
},
|
|
2090
2108
|
telegram: {
|
|
2091
|
-
icon: /* @__PURE__ */ (0,
|
|
2109
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TelegramIcon, {}),
|
|
2092
2110
|
name: "Telegram",
|
|
2093
2111
|
onClick: () => login("telegram")
|
|
2094
2112
|
},
|
|
2095
2113
|
github: {
|
|
2096
|
-
icon: /* @__PURE__ */ (0,
|
|
2114
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(GithubIcon, {}),
|
|
2097
2115
|
name: "Github",
|
|
2098
2116
|
onClick: () => login("github")
|
|
2099
2117
|
},
|
|
2100
2118
|
discord: {
|
|
2101
|
-
icon: /* @__PURE__ */ (0,
|
|
2119
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DiscordIcon, {}),
|
|
2102
2120
|
name: "Discord",
|
|
2103
2121
|
onClick: () => login("discord")
|
|
2122
|
+
},
|
|
2123
|
+
linkedin: {
|
|
2124
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(LinkedinIcon, {}),
|
|
2125
|
+
name: "Linkedin",
|
|
2126
|
+
onClick: () => login("linkedin")
|
|
2104
2127
|
}
|
|
2105
2128
|
};
|
|
2106
|
-
return /* @__PURE__ */ (0,
|
|
2107
|
-
(!inModal || !emailOpen) && /* @__PURE__ */ (0,
|
|
2108
|
-
return /* @__PURE__ */ (0,
|
|
2129
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
|
|
2130
|
+
(!inModal || !emailOpen) && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "matchid-login-box", children: methodList.map((m) => {
|
|
2131
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2109
2132
|
LoginItem,
|
|
2110
2133
|
{
|
|
2111
|
-
icon: methodMap[m]
|
|
2112
|
-
name: methodMap[m]
|
|
2113
|
-
onClick: methodMap[m]
|
|
2134
|
+
icon: methodMap[m]?.icon,
|
|
2135
|
+
name: methodMap[m]?.name,
|
|
2136
|
+
onClick: methodMap[m]?.onClick
|
|
2114
2137
|
},
|
|
2115
2138
|
m
|
|
2116
2139
|
);
|
|
2117
2140
|
}) }),
|
|
2118
|
-
/* @__PURE__ */ (0,
|
|
2141
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2119
2142
|
EmailModal,
|
|
2120
2143
|
{
|
|
2121
2144
|
isOpen: emailOpen,
|
|
@@ -2134,39 +2157,39 @@ function LoginBox({
|
|
|
2134
2157
|
var import_react16 = require("react");
|
|
2135
2158
|
|
|
2136
2159
|
// src/components/LoginPanel/index.tsx
|
|
2137
|
-
var
|
|
2160
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2138
2161
|
function LoginPanel({
|
|
2139
2162
|
header,
|
|
2140
2163
|
onClose,
|
|
2141
2164
|
...props
|
|
2142
2165
|
}) {
|
|
2143
|
-
return /* @__PURE__ */ (0,
|
|
2144
|
-
header ? header : /* @__PURE__ */ (0,
|
|
2145
|
-
/* @__PURE__ */ (0,
|
|
2146
|
-
/* @__PURE__ */ (0,
|
|
2147
|
-
/* @__PURE__ */ (0,
|
|
2166
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "matchid-login-panel", children: [
|
|
2167
|
+
header ? header : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "matchid-login-panel-header", children: [
|
|
2168
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "matchid-login-panel-header-content", children: [
|
|
2169
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "matchid-login-panel-header-title", children: "Log in / Sign up" }),
|
|
2170
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "matchid-login-panel-header-subtilte", children: "You can use the following methods" })
|
|
2148
2171
|
] }),
|
|
2149
|
-
onClose && /* @__PURE__ */ (0,
|
|
2172
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "matchid-login-panel-header-close", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CloseRoundIcon, {}) })
|
|
2150
2173
|
] }),
|
|
2151
|
-
/* @__PURE__ */ (0,
|
|
2152
|
-
/* @__PURE__ */ (0,
|
|
2174
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "matchid-login-panel-divide" }),
|
|
2175
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(LoginBox, { ...props })
|
|
2153
2176
|
] });
|
|
2154
2177
|
}
|
|
2155
2178
|
|
|
2156
2179
|
// src/components/LoginModal/index.tsx
|
|
2157
|
-
var
|
|
2180
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
2158
2181
|
function LoginModal({
|
|
2159
2182
|
isOpen = false,
|
|
2160
2183
|
width = 480,
|
|
2161
2184
|
...props
|
|
2162
2185
|
}) {
|
|
2163
2186
|
const { isLogin } = useUserInfo();
|
|
2164
|
-
return /* @__PURE__ */ (0,
|
|
2187
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
2165
2188
|
Modal,
|
|
2166
2189
|
{
|
|
2167
2190
|
isOpen: isOpen && !isLogin,
|
|
2168
2191
|
width,
|
|
2169
|
-
children: /* @__PURE__ */ (0,
|
|
2192
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(LoginPanel, { ...props, inModal: true })
|
|
2170
2193
|
}
|
|
2171
2194
|
);
|
|
2172
2195
|
}
|
|
@@ -2175,10 +2198,10 @@ function LoginModal({
|
|
|
2175
2198
|
var import_react15 = require("react");
|
|
2176
2199
|
|
|
2177
2200
|
// src/assets/icon/ProfileIcon.tsx
|
|
2178
|
-
var
|
|
2201
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
2179
2202
|
function ProfileIcon({ size = 24, color = "black", ...props }) {
|
|
2180
|
-
return /* @__PURE__ */ (0,
|
|
2181
|
-
/* @__PURE__ */ (0,
|
|
2203
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
2204
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2182
2205
|
"path",
|
|
2183
2206
|
{
|
|
2184
2207
|
fillRule: "evenodd",
|
|
@@ -2187,7 +2210,7 @@ function ProfileIcon({ size = 24, color = "black", ...props }) {
|
|
|
2187
2210
|
fill: color
|
|
2188
2211
|
}
|
|
2189
2212
|
),
|
|
2190
|
-
/* @__PURE__ */ (0,
|
|
2213
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2191
2214
|
"path",
|
|
2192
2215
|
{
|
|
2193
2216
|
fillRule: "evenodd",
|
|
@@ -2200,7 +2223,7 @@ function ProfileIcon({ size = 24, color = "black", ...props }) {
|
|
|
2200
2223
|
}
|
|
2201
2224
|
|
|
2202
2225
|
// src/components/UserPopover/index.tsx
|
|
2203
|
-
var
|
|
2226
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
2204
2227
|
function UserContent() {
|
|
2205
2228
|
const { logout, address, username } = useUserInfo();
|
|
2206
2229
|
const [logouting, setLogouting] = (0, import_react15.useState)(false);
|
|
@@ -2221,31 +2244,31 @@ function UserContent() {
|
|
|
2221
2244
|
rightIcon,
|
|
2222
2245
|
onClick
|
|
2223
2246
|
}) => {
|
|
2224
|
-
return /* @__PURE__ */ (0,
|
|
2225
|
-
/* @__PURE__ */ (0,
|
|
2247
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "matchid-user-popover-item", onClick, children: [
|
|
2248
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: `matchid-user-popover-item-content`, children: [
|
|
2226
2249
|
icon,
|
|
2227
|
-
/* @__PURE__ */ (0,
|
|
2250
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "matchid-user-popover-item-text", children })
|
|
2228
2251
|
] }),
|
|
2229
2252
|
rightIcon
|
|
2230
2253
|
] });
|
|
2231
2254
|
};
|
|
2232
2255
|
const UserDivider = () => {
|
|
2233
|
-
return /* @__PURE__ */ (0,
|
|
2256
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: `matchid-user-popover-divider` });
|
|
2234
2257
|
};
|
|
2235
2258
|
const [usernameOpen, setUsernameOpen] = (0, import_react15.useState)(false);
|
|
2236
2259
|
const [copied, setCopied] = useCopyClipboard();
|
|
2237
|
-
return /* @__PURE__ */ (0,
|
|
2238
|
-
/* @__PURE__ */ (0,
|
|
2239
|
-
/* @__PURE__ */ (0,
|
|
2260
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "matchid-user-popover-content", children: [
|
|
2261
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "matchid-user-popover-list", children: [
|
|
2262
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(UserItem, { onClick: () => {
|
|
2240
2263
|
setCopied(address);
|
|
2241
|
-
}, icon: copied ? /* @__PURE__ */ (0,
|
|
2242
|
-
/* @__PURE__ */ (0,
|
|
2243
|
-
/* @__PURE__ */ (0,
|
|
2264
|
+
}, icon: copied ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CheckIcon, { size: 20, color: "#0ecb81" }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CopyIcon, { size: 20, color: "var(--icon-color)" }), rightIcon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CheckIcon, { size: 20, color: "var(--icon-color)" }), children: truncateAddress(address) }),
|
|
2265
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(UserDivider, {}),
|
|
2266
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(UserItem, { onClick: () => {
|
|
2244
2267
|
setUsernameOpen(true);
|
|
2245
|
-
}, icon: /* @__PURE__ */ (0,
|
|
2268
|
+
}, icon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ProfileIcon, { size: 20, color: "var(--icon-color)" }), rightIcon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ArrowRightIcon, { size: 20, color: "var(--icon-color)" }), children: username || "Set a username" })
|
|
2246
2269
|
] }),
|
|
2247
|
-
/* @__PURE__ */ (0,
|
|
2248
|
-
/* @__PURE__ */ (0,
|
|
2270
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Button, { onClick: onLogout, loading: logouting, children: "Disconnect" }),
|
|
2271
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(UsernameModal, { isOpen: usernameOpen, onClose: () => {
|
|
2249
2272
|
setUsernameOpen(false);
|
|
2250
2273
|
}, onSuccess: () => {
|
|
2251
2274
|
setUsernameOpen(false);
|
|
@@ -2256,11 +2279,11 @@ function UserPopover({
|
|
|
2256
2279
|
children,
|
|
2257
2280
|
...props
|
|
2258
2281
|
}) {
|
|
2259
|
-
return /* @__PURE__ */ (0,
|
|
2282
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Popover, { ...props, content: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(UserContent, {}), children });
|
|
2260
2283
|
}
|
|
2261
2284
|
|
|
2262
2285
|
// src/components/LoginButton/index.tsx
|
|
2263
|
-
var
|
|
2286
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
2264
2287
|
function LoginButton({
|
|
2265
2288
|
loginRender,
|
|
2266
2289
|
methods,
|
|
@@ -2273,17 +2296,17 @@ function LoginButton({
|
|
|
2273
2296
|
const { isLogin, username } = useUserInfo();
|
|
2274
2297
|
const [loginOpen, setLoginOpen] = (0, import_react16.useState)(false);
|
|
2275
2298
|
if (!isLogin) {
|
|
2276
|
-
return /* @__PURE__ */ (0,
|
|
2277
|
-
/* @__PURE__ */ (0,
|
|
2278
|
-
/* @__PURE__ */ (0,
|
|
2279
|
-
/* @__PURE__ */ (0,
|
|
2280
|
-
/* @__PURE__ */ (0,
|
|
2299
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
|
|
2300
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(LoginModal, { methods, isOpen: loginOpen, onClose: () => setLoginOpen(false) }),
|
|
2301
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Button, { className: "matchid-unlogin-btn", ...props, highlight: true, onClick: () => setLoginOpen(true), children: [
|
|
2302
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(UnLoginIcon_default, {}),
|
|
2303
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: "Login" })
|
|
2281
2304
|
] })
|
|
2282
2305
|
] });
|
|
2283
2306
|
}
|
|
2284
|
-
return loginRender ? { loginRender } : /* @__PURE__ */ (0,
|
|
2285
|
-
/* @__PURE__ */ (0,
|
|
2286
|
-
/* @__PURE__ */ (0,
|
|
2307
|
+
return loginRender ? { loginRender } : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(UserPopover, { position: popoverPosition, type: popoverType, gap: popoverGap, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Button, { onClick: onLoginClick, className: "matchid-login-btn", ...props, children: [
|
|
2308
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(LoginIcon_default, {}),
|
|
2309
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: username ? truncateAddress(username) : "MatchID User" })
|
|
2287
2310
|
] }) });
|
|
2288
2311
|
}
|
|
2289
2312
|
|
|
@@ -2291,14 +2314,14 @@ function LoginButton({
|
|
|
2291
2314
|
var import_react17 = require("react");
|
|
2292
2315
|
|
|
2293
2316
|
// src/assets/icon/InfoRoundIcon.tsx
|
|
2294
|
-
var
|
|
2317
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
2295
2318
|
function InfoRoundIcon({
|
|
2296
2319
|
size,
|
|
2297
2320
|
color = "#6E6E6E",
|
|
2298
2321
|
...props
|
|
2299
2322
|
}) {
|
|
2300
|
-
return /* @__PURE__ */ (0,
|
|
2301
|
-
/* @__PURE__ */ (0,
|
|
2323
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
2324
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("g", { clipPath: "url(#clip0_418_7746)", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2302
2325
|
"path",
|
|
2303
2326
|
{
|
|
2304
2327
|
fillRule: "evenodd",
|
|
@@ -2307,19 +2330,19 @@ function InfoRoundIcon({
|
|
|
2307
2330
|
fill: color
|
|
2308
2331
|
}
|
|
2309
2332
|
) }),
|
|
2310
|
-
/* @__PURE__ */ (0,
|
|
2333
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("clipPath", { id: "clip0_418_7746", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
|
|
2311
2334
|
] });
|
|
2312
2335
|
}
|
|
2313
2336
|
|
|
2314
2337
|
// src/components/UsernameModal/index.tsx
|
|
2315
|
-
var
|
|
2338
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
2316
2339
|
var ValidItem = ({
|
|
2317
2340
|
success = false,
|
|
2318
2341
|
text
|
|
2319
2342
|
}) => {
|
|
2320
|
-
return /* @__PURE__ */ (0,
|
|
2321
|
-
success ? /* @__PURE__ */ (0,
|
|
2322
|
-
/* @__PURE__ */ (0,
|
|
2343
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: `matchid-valid-status-item matchid-valid-status-${success ? "success" : "error"}`, children: [
|
|
2344
|
+
success ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(CheckRoundIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(InfoRoundIcon, { size: 16 }),
|
|
2345
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: text })
|
|
2323
2346
|
] });
|
|
2324
2347
|
};
|
|
2325
2348
|
function UsernameModal({
|
|
@@ -2365,8 +2388,8 @@ function UsernameModal({
|
|
|
2365
2388
|
setIsSubmitting(false);
|
|
2366
2389
|
}
|
|
2367
2390
|
};
|
|
2368
|
-
return /* @__PURE__ */ (0,
|
|
2369
|
-
/* @__PURE__ */ (0,
|
|
2391
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ModalWithHeader, { isOpen: isOpen && isLogin, ...props, title: title || (username ? "Edit User Name" : "Set User Name"), children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "matchid-username-box", children: [
|
|
2392
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Field, { label: "User Name", error, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
2370
2393
|
Input,
|
|
2371
2394
|
{
|
|
2372
2395
|
placeholder: "Enter Your User Name",
|
|
@@ -2377,20 +2400,20 @@ function UsernameModal({
|
|
|
2377
2400
|
value: val
|
|
2378
2401
|
}
|
|
2379
2402
|
) }),
|
|
2380
|
-
/* @__PURE__ */ (0,
|
|
2381
|
-
/* @__PURE__ */ (0,
|
|
2403
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "matchid-valid", children: [
|
|
2404
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
2382
2405
|
ValidItem,
|
|
2383
2406
|
{
|
|
2384
2407
|
success: isValid,
|
|
2385
2408
|
text: "Name can be composed of numbers and letters as well as characters"
|
|
2386
2409
|
}
|
|
2387
2410
|
),
|
|
2388
|
-
/* @__PURE__ */ (0,
|
|
2411
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ValidItem, { success: isLength, text: "No less than 2 characters" })
|
|
2389
2412
|
] }),
|
|
2390
|
-
/* @__PURE__ */ (0,
|
|
2413
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Button, { disabled: !isSafe, loading: isSubmitting, style: {
|
|
2391
2414
|
marginTop: "64px"
|
|
2392
2415
|
}, onClick: onSubmit, size: "lg", block: true, highlight: true, children: "Confirm" }),
|
|
2393
|
-
/* @__PURE__ */ (0,
|
|
2416
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Button, { style: {
|
|
2394
2417
|
marginTop: "24px"
|
|
2395
2418
|
}, onClick: props.onClose, size: "lg", block: true, children: "Next Time" })
|
|
2396
2419
|
] }) });
|