@lumiapassport/ui-kit 1.13.0 → 1.13.1
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/iframe/index.html +1 -1
- package/dist/iframe/main.js +1 -1
- package/dist/index.cjs +115 -106
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +116 -107
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/iframe/index.html
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
<meta http-equiv="X-Content-Type-Options" content="nosniff" />
|
|
16
16
|
<meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
|
|
17
17
|
|
|
18
|
-
<title>Lumia Passport Secure Wallet - iframe version 1.13.
|
|
18
|
+
<title>Lumia Passport Secure Wallet - iframe version 1.13.1</title>
|
|
19
19
|
|
|
20
20
|
<!-- Styles will be injected by build process -->
|
|
21
21
|
<style>
|
package/dist/iframe/main.js
CHANGED
|
@@ -3964,7 +3964,7 @@ var SigningManager = class extends TokenRefreshApiClient {
|
|
|
3964
3964
|
};
|
|
3965
3965
|
|
|
3966
3966
|
// src/iframe/main.ts
|
|
3967
|
-
var IFRAME_VERSION = "1.13.
|
|
3967
|
+
var IFRAME_VERSION = "1.13.1";
|
|
3968
3968
|
var IframeWallet = class {
|
|
3969
3969
|
constructor() {
|
|
3970
3970
|
console.log("=".repeat(60));
|
package/dist/index.cjs
CHANGED
|
@@ -4319,7 +4319,7 @@ var import_react41 = require("react");
|
|
|
4319
4319
|
// package.json
|
|
4320
4320
|
var package_default = {
|
|
4321
4321
|
name: "@lumiapassport/ui-kit",
|
|
4322
|
-
version: "1.13.
|
|
4322
|
+
version: "1.13.1",
|
|
4323
4323
|
description: "React UI components and hooks for Lumia Passport authentication and Account Abstraction",
|
|
4324
4324
|
type: "module",
|
|
4325
4325
|
main: "./dist/index.cjs",
|
|
@@ -4655,10 +4655,8 @@ function Footer() {
|
|
|
4655
4655
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
4656
4656
|
"div",
|
|
4657
4657
|
{
|
|
4658
|
-
|
|
4659
|
-
|
|
4660
|
-
"border-t border-[var(--l-pass-bd)]"
|
|
4661
|
-
),
|
|
4658
|
+
style: { borderTop: "1px solid var(--l-pass-bd)" },
|
|
4659
|
+
className: cn("w-full flex flex-col gap-1 items-center p-[var(--l-pass-pd)] pb-5"),
|
|
4662
4660
|
children: [
|
|
4663
4661
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "w-full flex items-center justify-between", children: [
|
|
4664
4662
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
@@ -4807,100 +4805,107 @@ function Header() {
|
|
|
4807
4805
|
const isKycVerified = !isUserProfileLoading && userProfile?.kycDetails?.kycStatus === "verified" || true;
|
|
4808
4806
|
const { name, logo, logoDataUri } = lumiaBeam;
|
|
4809
4807
|
const isNetworkIcon = !!logoDataUri || logo === "lumia";
|
|
4810
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
4811
|
-
|
|
4812
|
-
|
|
4813
|
-
|
|
4814
|
-
|
|
4815
|
-
|
|
4816
|
-
|
|
4817
|
-
className: "flex-
|
|
4818
|
-
|
|
4819
|
-
|
|
4820
|
-
|
|
4821
|
-
|
|
4822
|
-
|
|
4823
|
-
|
|
4824
|
-
|
|
4825
|
-
|
|
4826
|
-
|
|
4808
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
4809
|
+
"div",
|
|
4810
|
+
{
|
|
4811
|
+
style: { borderBottom: "1px solid var(--l-pass-bd)" },
|
|
4812
|
+
className: "w-full flex flex-col gap-[var(--l-pass-gap)] p-[var(--l-pass-pd)] pt-5",
|
|
4813
|
+
children: [
|
|
4814
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "w-full flex items-center gap-[var(--l-pass-gap)]", children: [
|
|
4815
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex-none w-12 h-12 flex items-center justify-center", children: avatar ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: avatar, alt: displayName, className: "w-full h-full object-cover rounded-full" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LumiaIcon, { width: 48, height: 48 }) }),
|
|
4816
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
4817
|
+
"div",
|
|
4818
|
+
{
|
|
4819
|
+
style: { width: "calc(100% - 48px - var(--l-pass-gap))" },
|
|
4820
|
+
className: "flex-1 flex flex-col justify-center gap-1",
|
|
4821
|
+
children: [
|
|
4822
|
+
!!address && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(UsdBalance, { className: "text-lg leading-5 font-bold" }),
|
|
4823
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "w-full flex items-center gap-2", children: [
|
|
4824
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
4825
|
+
"span",
|
|
4826
|
+
{
|
|
4827
|
+
className: cn(
|
|
4828
|
+
"max-w-full font-mono text-xs leading-4 font-medium text-[var(--l-pass-fg-muted)",
|
|
4829
|
+
"text-ellipsis overflow-hidden whitespace-nowrap"
|
|
4830
|
+
),
|
|
4831
|
+
children: displayName || config.ui.title || "LumiaPassport"
|
|
4832
|
+
}
|
|
4827
4833
|
),
|
|
4828
|
-
|
|
4829
|
-
|
|
4830
|
-
|
|
4831
|
-
|
|
4832
|
-
|
|
4833
|
-
|
|
4834
|
-
|
|
4835
|
-
|
|
4836
|
-
|
|
4837
|
-
|
|
4838
|
-
|
|
4839
|
-
|
|
4840
|
-
|
|
4841
|
-
)
|
|
4842
|
-
|
|
4843
|
-
}
|
|
4844
|
-
)
|
|
4845
|
-
]
|
|
4846
|
-
|
|
4847
|
-
|
|
4848
|
-
|
|
4849
|
-
|
|
4850
|
-
|
|
4851
|
-
|
|
4852
|
-
|
|
4853
|
-
|
|
4854
|
-
|
|
4855
|
-
|
|
4856
|
-
|
|
4857
|
-
|
|
4858
|
-
|
|
4859
|
-
|
|
4860
|
-
|
|
4861
|
-
|
|
4862
|
-
|
|
4863
|
-
|
|
4864
|
-
|
|
4865
|
-
|
|
4866
|
-
|
|
4867
|
-
|
|
4868
|
-
|
|
4869
|
-
|
|
4870
|
-
|
|
4871
|
-
|
|
4872
|
-
|
|
4873
|
-
|
|
4874
|
-
|
|
4875
|
-
|
|
4876
|
-
|
|
4877
|
-
|
|
4878
|
-
|
|
4879
|
-
|
|
4880
|
-
|
|
4881
|
-
|
|
4882
|
-
|
|
4883
|
-
|
|
4884
|
-
|
|
4885
|
-
|
|
4886
|
-
|
|
4887
|
-
|
|
4888
|
-
|
|
4834
|
+
isKycVerified && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "group relative flex flex-shrink-0", children: [
|
|
4835
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.CheckCircle2, { className: "w-4 h-4 text-[var(--l-pass-bg-success)]" }),
|
|
4836
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
4837
|
+
"div",
|
|
4838
|
+
{
|
|
4839
|
+
className: cn(
|
|
4840
|
+
"transition-opacity pointer-events-none whitespace-nowrap z-50",
|
|
4841
|
+
"absolute top-1/2 right-full -translate-y-1/2 -translate-x-[var(--l-pass-gap)]",
|
|
4842
|
+
"px-2 py-1 bg-[var(--l-pass-bg-success)] text-[var(--l-pass-fg)] text-xs rounded-full",
|
|
4843
|
+
"opacity-0 group-hover:opacity-100"
|
|
4844
|
+
),
|
|
4845
|
+
children: "KYC Verified"
|
|
4846
|
+
}
|
|
4847
|
+
)
|
|
4848
|
+
] }),
|
|
4849
|
+
isUserProfileLoading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.Loader, { className: "w-4 h-4 animate-spin text-[var(--l-pass-fg-muted)]" })
|
|
4850
|
+
] })
|
|
4851
|
+
]
|
|
4852
|
+
}
|
|
4853
|
+
)
|
|
4854
|
+
] }),
|
|
4855
|
+
!!address && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "w-full flex items-center justify-between gap-[var(--l-pass-gap)]", children: [
|
|
4856
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "block font-mono text-[10px] break-all leading-6 text-[var(--l-pass-fg-muted)]", children: formatAddress(address) }),
|
|
4857
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "w-fit flex items-center gap-[var(--l-pass-gap)] justify-between", children: [
|
|
4858
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
4859
|
+
Button,
|
|
4860
|
+
{
|
|
4861
|
+
size: "small",
|
|
4862
|
+
variant: "ghost",
|
|
4863
|
+
className: "text-[10px] px-0 text-[var(--l-pass-fg-muted)] hover:text-[var(--l-pass-fg)]",
|
|
4864
|
+
onClick: async () => {
|
|
4865
|
+
await navigator.clipboard.writeText(address);
|
|
4866
|
+
setCopied(true);
|
|
4867
|
+
setTimeout(() => setCopied(false), 1500);
|
|
4868
|
+
},
|
|
4869
|
+
children: [
|
|
4870
|
+
copied ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.Check, { className: "w-4 h-4 text-[var(--l-pass-bg-success)]" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.Copy, { className: "w-4 h-4" }),
|
|
4871
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "COPY" })
|
|
4872
|
+
]
|
|
4873
|
+
}
|
|
4874
|
+
),
|
|
4875
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
4876
|
+
Button,
|
|
4877
|
+
{
|
|
4878
|
+
size: "small",
|
|
4879
|
+
variant: "ghost",
|
|
4880
|
+
className: "text-[10px] px-0 text-[var(--l-pass-fg-muted)] hover:text-[var(--l-pass-fg)]",
|
|
4881
|
+
onClick: () => {
|
|
4882
|
+
if (!address) return;
|
|
4883
|
+
window.open(`${LUMIA_EXPLORER_URL}/address/${address}`, "_blank");
|
|
4884
|
+
},
|
|
4885
|
+
children: [
|
|
4886
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
4887
|
+
"div",
|
|
4888
|
+
{
|
|
4889
|
+
className: cn(
|
|
4890
|
+
"flex-none w-4 h-4 rounded-full flex items-center justify-center overflow-hidden",
|
|
4891
|
+
isNetworkIcon ? "bg-transparent" : "bg-[var(--l-pass-primary)]"
|
|
4892
|
+
),
|
|
4893
|
+
children: [
|
|
4894
|
+
logoDataUri && logo !== "lumia" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: logoDataUri, alt: "Chain Logo", className: "w-4 h-4 object-cover" }),
|
|
4895
|
+
!logoDataUri && logo === "lumia" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LumiaLogo, { size: 16 }),
|
|
4896
|
+
!logoDataUri && logo !== "lumia" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[var(--l-pass-fg-inverted)] text-xs font-bold", children: (name || "L").charAt(0) })
|
|
4897
|
+
]
|
|
4898
|
+
}
|
|
4889
4899
|
),
|
|
4890
|
-
|
|
4891
|
-
|
|
4892
|
-
|
|
4893
|
-
|
|
4894
|
-
|
|
4895
|
-
|
|
4896
|
-
|
|
4897
|
-
|
|
4898
|
-
|
|
4899
|
-
}
|
|
4900
|
-
)
|
|
4901
|
-
] })
|
|
4902
|
-
] })
|
|
4903
|
-
] });
|
|
4900
|
+
"EXPLORER"
|
|
4901
|
+
]
|
|
4902
|
+
}
|
|
4903
|
+
)
|
|
4904
|
+
] })
|
|
4905
|
+
] })
|
|
4906
|
+
]
|
|
4907
|
+
}
|
|
4908
|
+
);
|
|
4904
4909
|
}
|
|
4905
4910
|
{
|
|
4906
4911
|
}
|
|
@@ -4976,14 +4981,16 @@ var DialogContent = React2.forwardRef(
|
|
|
4976
4981
|
DialogPrimitive.Content,
|
|
4977
4982
|
{
|
|
4978
4983
|
ref,
|
|
4979
|
-
style: !!className ? void 0 : {
|
|
4984
|
+
style: !!className ? void 0 : {
|
|
4985
|
+
backgroundColor: "var(--l-pass-bg)",
|
|
4986
|
+
border: "1px solid var(--l-pass-bd)",
|
|
4987
|
+
boxShadow: "0px 4px 10px var(--l-pass-shadow-c)"
|
|
4988
|
+
},
|
|
4980
4989
|
className: cn(
|
|
4981
4990
|
"relative pointer-events-auto w-full",
|
|
4982
4991
|
"text-[var(--l-pass-fg)]",
|
|
4983
4992
|
"rounded-[var(--l-pass-bdrs)] overflow-hidden",
|
|
4984
4993
|
"max-w-[var(--l-pass-maw)] max-h-[80vh] p-0 gap-0",
|
|
4985
|
-
// this gives complete dialog bg & border control by external className
|
|
4986
|
-
!className && "bg-[var(--l-pass-bg)] border border-[var(--l-pass-bd)]",
|
|
4987
4994
|
className
|
|
4988
4995
|
),
|
|
4989
4996
|
...props,
|
|
@@ -6813,7 +6820,7 @@ var VerificationCodeInput = (props) => {
|
|
|
6813
6820
|
className: cn(
|
|
6814
6821
|
isLoading ? "cursor-default opacity-50" : "cursor-text",
|
|
6815
6822
|
"text-[var(--l-pass-fg)]",
|
|
6816
|
-
"w-10 h-12 text-lg text-center font-semibold rounded-[var(--l-pass-el-bdrs)]
|
|
6823
|
+
"w-10 h-12 text-lg text-center font-semibold rounded-[var(--l-pass-el-bdrs)]",
|
|
6817
6824
|
"bg-[var(--l-pass-secondary)] focus:bg-[var(--l-pass-secondary-a)] hover:bg-[var(--l-pass-secondary-h)]",
|
|
6818
6825
|
"focus:outline-none focus:bg-[var(--l-pass-secondary-a)] focus:inset-ring-2 focus:inset-ring-[var(--l-pass-bd-intense)]"
|
|
6819
6826
|
)
|
|
@@ -9139,12 +9146,13 @@ var import_react_query11 = require("@tanstack/react-query");
|
|
|
9139
9146
|
init_common();
|
|
9140
9147
|
var PROVIDERS_QUERY_KEY = "lumia-passport-providers-query";
|
|
9141
9148
|
function useProvidersList() {
|
|
9142
|
-
const
|
|
9149
|
+
const address = useLumiaPassportSession((st) => st.address);
|
|
9150
|
+
const page = useLayoutDataStore((st) => st.page);
|
|
9143
9151
|
return (0, import_react_query11.useQuery)({
|
|
9144
9152
|
retry: false,
|
|
9145
|
-
enabled: !!
|
|
9146
|
-
queryKey: [PROVIDERS_QUERY_KEY,
|
|
9147
|
-
queryFn: getLinkedProviders
|
|
9153
|
+
enabled: !!address && page === "manage-wallet" /* MANAGE_WALLET */,
|
|
9154
|
+
queryKey: [PROVIDERS_QUERY_KEY, address],
|
|
9155
|
+
queryFn: async () => getLinkedProviders()
|
|
9148
9156
|
});
|
|
9149
9157
|
}
|
|
9150
9158
|
|
|
@@ -9648,7 +9656,8 @@ function ManageWalletMenu() {
|
|
|
9648
9656
|
setVerificationError
|
|
9649
9657
|
} = useManageWalletStore();
|
|
9650
9658
|
const configuredProviders = getConfiguredProviders(config);
|
|
9651
|
-
const { data: providers = [],
|
|
9659
|
+
const { data: providers = [], isLoading: isProvidersLoading, error: providersError } = useProvidersList();
|
|
9660
|
+
console.log("[MANAGE WALLET MENU] RENDER", providers);
|
|
9652
9661
|
const renderProviders = (0, import_react28.useMemo)(() => {
|
|
9653
9662
|
const usedProviders = (0, import_lodash_es.fromPairs)(providers.map((p) => [p.provider, true]));
|
|
9654
9663
|
const used = [];
|