@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/index.js
CHANGED
|
@@ -4278,7 +4278,7 @@ import { useEffect as useEffect26 } from "react";
|
|
|
4278
4278
|
// package.json
|
|
4279
4279
|
var package_default = {
|
|
4280
4280
|
name: "@lumiapassport/ui-kit",
|
|
4281
|
-
version: "1.13.
|
|
4281
|
+
version: "1.13.1",
|
|
4282
4282
|
description: "React UI components and hooks for Lumia Passport authentication and Account Abstraction",
|
|
4283
4283
|
type: "module",
|
|
4284
4284
|
main: "./dist/index.cjs",
|
|
@@ -4614,10 +4614,8 @@ function Footer() {
|
|
|
4614
4614
|
return /* @__PURE__ */ jsxs3(
|
|
4615
4615
|
"div",
|
|
4616
4616
|
{
|
|
4617
|
-
|
|
4618
|
-
|
|
4619
|
-
"border-t border-[var(--l-pass-bd)]"
|
|
4620
|
-
),
|
|
4617
|
+
style: { borderTop: "1px solid var(--l-pass-bd)" },
|
|
4618
|
+
className: cn("w-full flex flex-col gap-1 items-center p-[var(--l-pass-pd)] pb-5"),
|
|
4621
4619
|
children: [
|
|
4622
4620
|
/* @__PURE__ */ jsxs3("div", { className: "w-full flex items-center justify-between", children: [
|
|
4623
4621
|
/* @__PURE__ */ jsxs3(
|
|
@@ -4766,100 +4764,107 @@ function Header() {
|
|
|
4766
4764
|
const isKycVerified = !isUserProfileLoading && userProfile?.kycDetails?.kycStatus === "verified" || true;
|
|
4767
4765
|
const { name, logo, logoDataUri } = lumiaBeam;
|
|
4768
4766
|
const isNetworkIcon = !!logoDataUri || logo === "lumia";
|
|
4769
|
-
return /* @__PURE__ */ jsxs6(
|
|
4770
|
-
|
|
4771
|
-
|
|
4772
|
-
|
|
4773
|
-
|
|
4774
|
-
|
|
4775
|
-
|
|
4776
|
-
className: "flex-
|
|
4777
|
-
|
|
4778
|
-
|
|
4779
|
-
|
|
4780
|
-
|
|
4781
|
-
|
|
4782
|
-
|
|
4783
|
-
|
|
4784
|
-
|
|
4785
|
-
|
|
4767
|
+
return /* @__PURE__ */ jsxs6(
|
|
4768
|
+
"div",
|
|
4769
|
+
{
|
|
4770
|
+
style: { borderBottom: "1px solid var(--l-pass-bd)" },
|
|
4771
|
+
className: "w-full flex flex-col gap-[var(--l-pass-gap)] p-[var(--l-pass-pd)] pt-5",
|
|
4772
|
+
children: [
|
|
4773
|
+
/* @__PURE__ */ jsxs6("div", { className: "w-full flex items-center gap-[var(--l-pass-gap)]", children: [
|
|
4774
|
+
/* @__PURE__ */ jsx7("div", { className: "flex-none w-12 h-12 flex items-center justify-center", children: avatar ? /* @__PURE__ */ jsx7("img", { src: avatar, alt: displayName, className: "w-full h-full object-cover rounded-full" }) : /* @__PURE__ */ jsx7(LumiaIcon, { width: 48, height: 48 }) }),
|
|
4775
|
+
/* @__PURE__ */ jsxs6(
|
|
4776
|
+
"div",
|
|
4777
|
+
{
|
|
4778
|
+
style: { width: "calc(100% - 48px - var(--l-pass-gap))" },
|
|
4779
|
+
className: "flex-1 flex flex-col justify-center gap-1",
|
|
4780
|
+
children: [
|
|
4781
|
+
!!address && /* @__PURE__ */ jsx7(UsdBalance, { className: "text-lg leading-5 font-bold" }),
|
|
4782
|
+
/* @__PURE__ */ jsxs6("div", { className: "w-full flex items-center gap-2", children: [
|
|
4783
|
+
/* @__PURE__ */ jsx7(
|
|
4784
|
+
"span",
|
|
4785
|
+
{
|
|
4786
|
+
className: cn(
|
|
4787
|
+
"max-w-full font-mono text-xs leading-4 font-medium text-[var(--l-pass-fg-muted)",
|
|
4788
|
+
"text-ellipsis overflow-hidden whitespace-nowrap"
|
|
4789
|
+
),
|
|
4790
|
+
children: displayName || config.ui.title || "LumiaPassport"
|
|
4791
|
+
}
|
|
4786
4792
|
),
|
|
4787
|
-
|
|
4788
|
-
|
|
4789
|
-
|
|
4790
|
-
|
|
4791
|
-
|
|
4792
|
-
|
|
4793
|
-
|
|
4794
|
-
|
|
4795
|
-
|
|
4796
|
-
|
|
4797
|
-
|
|
4798
|
-
|
|
4799
|
-
|
|
4800
|
-
)
|
|
4801
|
-
|
|
4802
|
-
}
|
|
4803
|
-
)
|
|
4804
|
-
]
|
|
4805
|
-
|
|
4806
|
-
|
|
4807
|
-
|
|
4808
|
-
|
|
4809
|
-
|
|
4810
|
-
|
|
4811
|
-
|
|
4812
|
-
|
|
4813
|
-
|
|
4814
|
-
|
|
4815
|
-
|
|
4816
|
-
|
|
4817
|
-
|
|
4818
|
-
|
|
4819
|
-
|
|
4820
|
-
|
|
4821
|
-
|
|
4822
|
-
|
|
4823
|
-
|
|
4824
|
-
|
|
4825
|
-
|
|
4826
|
-
|
|
4827
|
-
|
|
4828
|
-
|
|
4829
|
-
|
|
4830
|
-
|
|
4831
|
-
|
|
4832
|
-
|
|
4833
|
-
|
|
4834
|
-
|
|
4835
|
-
|
|
4836
|
-
|
|
4837
|
-
|
|
4838
|
-
|
|
4839
|
-
|
|
4840
|
-
|
|
4841
|
-
|
|
4842
|
-
|
|
4843
|
-
|
|
4844
|
-
|
|
4845
|
-
|
|
4846
|
-
|
|
4847
|
-
|
|
4793
|
+
isKycVerified && /* @__PURE__ */ jsxs6("div", { className: "group relative flex flex-shrink-0", children: [
|
|
4794
|
+
/* @__PURE__ */ jsx7(CheckCircle2, { className: "w-4 h-4 text-[var(--l-pass-bg-success)]" }),
|
|
4795
|
+
/* @__PURE__ */ jsx7(
|
|
4796
|
+
"div",
|
|
4797
|
+
{
|
|
4798
|
+
className: cn(
|
|
4799
|
+
"transition-opacity pointer-events-none whitespace-nowrap z-50",
|
|
4800
|
+
"absolute top-1/2 right-full -translate-y-1/2 -translate-x-[var(--l-pass-gap)]",
|
|
4801
|
+
"px-2 py-1 bg-[var(--l-pass-bg-success)] text-[var(--l-pass-fg)] text-xs rounded-full",
|
|
4802
|
+
"opacity-0 group-hover:opacity-100"
|
|
4803
|
+
),
|
|
4804
|
+
children: "KYC Verified"
|
|
4805
|
+
}
|
|
4806
|
+
)
|
|
4807
|
+
] }),
|
|
4808
|
+
isUserProfileLoading && /* @__PURE__ */ jsx7(Loader2, { className: "w-4 h-4 animate-spin text-[var(--l-pass-fg-muted)]" })
|
|
4809
|
+
] })
|
|
4810
|
+
]
|
|
4811
|
+
}
|
|
4812
|
+
)
|
|
4813
|
+
] }),
|
|
4814
|
+
!!address && /* @__PURE__ */ jsxs6("div", { className: "w-full flex items-center justify-between gap-[var(--l-pass-gap)]", children: [
|
|
4815
|
+
/* @__PURE__ */ jsx7("span", { className: "block font-mono text-[10px] break-all leading-6 text-[var(--l-pass-fg-muted)]", children: formatAddress(address) }),
|
|
4816
|
+
/* @__PURE__ */ jsxs6("div", { className: "w-fit flex items-center gap-[var(--l-pass-gap)] justify-between", children: [
|
|
4817
|
+
/* @__PURE__ */ jsxs6(
|
|
4818
|
+
Button,
|
|
4819
|
+
{
|
|
4820
|
+
size: "small",
|
|
4821
|
+
variant: "ghost",
|
|
4822
|
+
className: "text-[10px] px-0 text-[var(--l-pass-fg-muted)] hover:text-[var(--l-pass-fg)]",
|
|
4823
|
+
onClick: async () => {
|
|
4824
|
+
await navigator.clipboard.writeText(address);
|
|
4825
|
+
setCopied(true);
|
|
4826
|
+
setTimeout(() => setCopied(false), 1500);
|
|
4827
|
+
},
|
|
4828
|
+
children: [
|
|
4829
|
+
copied ? /* @__PURE__ */ jsx7(Check, { className: "w-4 h-4 text-[var(--l-pass-bg-success)]" }) : /* @__PURE__ */ jsx7(Copy, { className: "w-4 h-4" }),
|
|
4830
|
+
/* @__PURE__ */ jsx7("span", { children: "COPY" })
|
|
4831
|
+
]
|
|
4832
|
+
}
|
|
4833
|
+
),
|
|
4834
|
+
/* @__PURE__ */ jsxs6(
|
|
4835
|
+
Button,
|
|
4836
|
+
{
|
|
4837
|
+
size: "small",
|
|
4838
|
+
variant: "ghost",
|
|
4839
|
+
className: "text-[10px] px-0 text-[var(--l-pass-fg-muted)] hover:text-[var(--l-pass-fg)]",
|
|
4840
|
+
onClick: () => {
|
|
4841
|
+
if (!address) return;
|
|
4842
|
+
window.open(`${LUMIA_EXPLORER_URL}/address/${address}`, "_blank");
|
|
4843
|
+
},
|
|
4844
|
+
children: [
|
|
4845
|
+
/* @__PURE__ */ jsxs6(
|
|
4846
|
+
"div",
|
|
4847
|
+
{
|
|
4848
|
+
className: cn(
|
|
4849
|
+
"flex-none w-4 h-4 rounded-full flex items-center justify-center overflow-hidden",
|
|
4850
|
+
isNetworkIcon ? "bg-transparent" : "bg-[var(--l-pass-primary)]"
|
|
4851
|
+
),
|
|
4852
|
+
children: [
|
|
4853
|
+
logoDataUri && logo !== "lumia" && /* @__PURE__ */ jsx7("img", { src: logoDataUri, alt: "Chain Logo", className: "w-4 h-4 object-cover" }),
|
|
4854
|
+
!logoDataUri && logo === "lumia" && /* @__PURE__ */ jsx7(LumiaLogo, { size: 16 }),
|
|
4855
|
+
!logoDataUri && logo !== "lumia" && /* @__PURE__ */ jsx7("span", { className: "text-[var(--l-pass-fg-inverted)] text-xs font-bold", children: (name || "L").charAt(0) })
|
|
4856
|
+
]
|
|
4857
|
+
}
|
|
4848
4858
|
),
|
|
4849
|
-
|
|
4850
|
-
|
|
4851
|
-
|
|
4852
|
-
|
|
4853
|
-
|
|
4854
|
-
|
|
4855
|
-
|
|
4856
|
-
|
|
4857
|
-
|
|
4858
|
-
}
|
|
4859
|
-
)
|
|
4860
|
-
] })
|
|
4861
|
-
] })
|
|
4862
|
-
] });
|
|
4859
|
+
"EXPLORER"
|
|
4860
|
+
]
|
|
4861
|
+
}
|
|
4862
|
+
)
|
|
4863
|
+
] })
|
|
4864
|
+
] })
|
|
4865
|
+
]
|
|
4866
|
+
}
|
|
4867
|
+
);
|
|
4863
4868
|
}
|
|
4864
4869
|
{
|
|
4865
4870
|
}
|
|
@@ -4935,14 +4940,16 @@ var DialogContent = React2.forwardRef(
|
|
|
4935
4940
|
DialogPrimitive.Content,
|
|
4936
4941
|
{
|
|
4937
4942
|
ref,
|
|
4938
|
-
style: !!className ? void 0 : {
|
|
4943
|
+
style: !!className ? void 0 : {
|
|
4944
|
+
backgroundColor: "var(--l-pass-bg)",
|
|
4945
|
+
border: "1px solid var(--l-pass-bd)",
|
|
4946
|
+
boxShadow: "0px 4px 10px var(--l-pass-shadow-c)"
|
|
4947
|
+
},
|
|
4939
4948
|
className: cn(
|
|
4940
4949
|
"relative pointer-events-auto w-full",
|
|
4941
4950
|
"text-[var(--l-pass-fg)]",
|
|
4942
4951
|
"rounded-[var(--l-pass-bdrs)] overflow-hidden",
|
|
4943
4952
|
"max-w-[var(--l-pass-maw)] max-h-[80vh] p-0 gap-0",
|
|
4944
|
-
// this gives complete dialog bg & border control by external className
|
|
4945
|
-
!className && "bg-[var(--l-pass-bg)] border border-[var(--l-pass-bd)]",
|
|
4946
4953
|
className
|
|
4947
4954
|
),
|
|
4948
4955
|
...props,
|
|
@@ -6772,7 +6779,7 @@ var VerificationCodeInput = (props) => {
|
|
|
6772
6779
|
className: cn(
|
|
6773
6780
|
isLoading ? "cursor-default opacity-50" : "cursor-text",
|
|
6774
6781
|
"text-[var(--l-pass-fg)]",
|
|
6775
|
-
"w-10 h-12 text-lg text-center font-semibold rounded-[var(--l-pass-el-bdrs)]
|
|
6782
|
+
"w-10 h-12 text-lg text-center font-semibold rounded-[var(--l-pass-el-bdrs)]",
|
|
6776
6783
|
"bg-[var(--l-pass-secondary)] focus:bg-[var(--l-pass-secondary-a)] hover:bg-[var(--l-pass-secondary-h)]",
|
|
6777
6784
|
"focus:outline-none focus:bg-[var(--l-pass-secondary-a)] focus:inset-ring-2 focus:inset-ring-[var(--l-pass-bd-intense)]"
|
|
6778
6785
|
)
|
|
@@ -9094,16 +9101,17 @@ function EmailForm() {
|
|
|
9094
9101
|
}
|
|
9095
9102
|
|
|
9096
9103
|
// src/internal/components/ManageWalletMenu/hooks/useProvidersList.ts
|
|
9097
|
-
import { useQuery as useQuery5 } from "@tanstack/react-query";
|
|
9098
9104
|
init_common();
|
|
9105
|
+
import { useQuery as useQuery5 } from "@tanstack/react-query";
|
|
9099
9106
|
var PROVIDERS_QUERY_KEY = "lumia-passport-providers-query";
|
|
9100
9107
|
function useProvidersList() {
|
|
9101
|
-
const
|
|
9108
|
+
const address = useLumiaPassportSession((st) => st.address);
|
|
9109
|
+
const page = useLayoutDataStore((st) => st.page);
|
|
9102
9110
|
return useQuery5({
|
|
9103
9111
|
retry: false,
|
|
9104
|
-
enabled: !!
|
|
9105
|
-
queryKey: [PROVIDERS_QUERY_KEY,
|
|
9106
|
-
queryFn: getLinkedProviders
|
|
9112
|
+
enabled: !!address && page === "manage-wallet" /* MANAGE_WALLET */,
|
|
9113
|
+
queryKey: [PROVIDERS_QUERY_KEY, address],
|
|
9114
|
+
queryFn: async () => getLinkedProviders()
|
|
9107
9115
|
});
|
|
9108
9116
|
}
|
|
9109
9117
|
|
|
@@ -9607,7 +9615,8 @@ function ManageWalletMenu() {
|
|
|
9607
9615
|
setVerificationError
|
|
9608
9616
|
} = useManageWalletStore();
|
|
9609
9617
|
const configuredProviders = getConfiguredProviders(config);
|
|
9610
|
-
const { data: providers = [],
|
|
9618
|
+
const { data: providers = [], isLoading: isProvidersLoading, error: providersError } = useProvidersList();
|
|
9619
|
+
console.log("[MANAGE WALLET MENU] RENDER", providers);
|
|
9611
9620
|
const renderProviders = useMemo2(() => {
|
|
9612
9621
|
const usedProviders = fromPairs(providers.map((p) => [p.provider, true]));
|
|
9613
9622
|
const used = [];
|