@loafmarkets/ui 0.1.31 → 0.1.33

package/dist/index.mjs

@@ -6115,13 +6115,17 @@ var LoginPopup = ({
           showKycWidget && renderKycWidget ? /* @__PURE__ */ jsxs(KycWidgetContainer, { children: [
             /* @__PURE__ */ jsx(InlineCloseButton, { onClick: handleKycWidgetClose, "aria-label": "Close KYC widget", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
             renderKycWidget(handleKycWidgetResult)
-          ] }) : /* @__PURE__ */ jsxs(OnboardingStepContainer, { children: [
-            /* @__PURE__ */ jsx(OnboardingHeading, { children: "KYC to Continue" }),
-            /* @__PURE__ */ jsx(OnboardingSubtext, { children: "Loaf requires all users to KYC before they can start purchasing properties." }),
-            /* @__PURE__ */ jsxs(OnboardingButtonGroup, { children: [
-              /* @__PURE__ */ jsx(SubmitButton, { onClick: handleKycStart, disabled: kycLoading, children: kycLoading ? "Verifying\u2026" : "KYC me now" }),
-              /* @__PURE__ */ jsx(OnboardingSkipButton, { onClick: handleKycSkip, children: "I'll do this later, I want to see the properties first" })
-            ] }),
+          ] }) : /* @__PURE__ */ jsxs(OnboardingStepContainer, { style: { alignItems: "stretch", textAlign: "left" }, children: [
+            /* @__PURE__ */ jsx(OnboardingHeading, { style: { textAlign: "center" }, children: "Verify Your Identity" }),
+            /* @__PURE__ */ jsx(OnboardingSubtext, { style: { textAlign: "center", marginBottom: "1rem" }, children: "Complete identity verification to start investing in properties." }),
+            /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: /* @__PURE__ */ jsxs(ModalOptionCard, { onClick: handleKycStart, disabled: kycLoading, children: [
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "1.5rem" }, children: "\u{1F6E1}\uFE0F" }),
+              /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+                /* @__PURE__ */ jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: kycLoading ? "Verifying\u2026" : "Start Verification" }),
+                /* @__PURE__ */ jsx("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: "0.8rem" }, children: "Quick identity check \u2014 takes about 2 minutes" })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsx(OnboardingSkipButton, { onClick: handleKycSkip, style: { marginTop: "1rem" }, children: "I'll do this later" }),
             error && /* @__PURE__ */ jsx(StatusMessage, { $error: true, children: error })
           ] })
         ]
@@ -6132,12 +6136,9 @@ var LoginPopup = ({
     return /* @__PURE__ */ jsx(Overlay2, { children: /* @__PURE__ */ jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
       /* @__PURE__ */ jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
       /* @__PURE__ */ jsxs(OnboardingStepContainer, { children: [
-        /* @__PURE__ */ jsx(KycSuccessIcon, { children: /* @__PURE__ */ jsx("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M20 34.5L28.5 43 44 25", stroke: "var(--color-accent, #e6c656)", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
-        /* @__PURE__ */ jsx(OnboardingHeading, { children: "KYC pending review" }),
-        /* @__PURE__ */ jsxs(OnboardingSubtext, { children: [
-          "Thanks for submitting your documents.",
-          /* @__PURE__ */ jsx("br", {})
-        ] }),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: "2.5rem", marginBottom: "0.75rem" }, children: "\u2713" }),
+        /* @__PURE__ */ jsx(OnboardingHeading, { children: "Verification Submitted" }),
+        /* @__PURE__ */ jsx(OnboardingSubtext, { children: "Thanks for submitting your documents. We'll review them shortly." }),
         /* @__PURE__ */ jsx(OnboardingButtonGroup, { children: /* @__PURE__ */ jsx(SubmitButton, { onClick: onClose, children: "Continue" }) })
       ] })
     ] }) });
@@ -6146,29 +6147,19 @@ var LoginPopup = ({
     return /* @__PURE__ */ jsx(Overlay2, { children: /* @__PURE__ */ jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
       /* @__PURE__ */ jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
       /* @__PURE__ */ jsxs(OnboardingStepContainer, { children: [
-        /* @__PURE__ */ jsx(KycFailedIcon, { children: /* @__PURE__ */ jsxs("svg", { width: "84", height: "84", viewBox: "0 0 84 84", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-          /* @__PURE__ */ jsx("circle", { cx: "28", cy: "34", r: "5.5", fill: "var(--color-accent, #e6c656)" }),
-          /* @__PURE__ */ jsx("circle", { cx: "56", cy: "34", r: "5.5", fill: "var(--color-accent, #e6c656)" }),
-          /* @__PURE__ */ jsx("path", { d: "M24 58c5.5-5.5 12.5-8 18-8s12.5 2.5 18 8", stroke: "var(--color-accent, #e6c656)", strokeWidth: "5", strokeLinecap: "round" })
+        /* @__PURE__ */ jsx("div", { style: { fontSize: "2.5rem", marginBottom: "0.75rem" }, children: "\u2715" }),
+        /* @__PURE__ */ jsx(OnboardingHeading, { children: "Verification Failed" }),
+        /* @__PURE__ */ jsx(OnboardingSubtext, { children: "Unfortunately your identity check didn't pass. If you believe this is an error, please contact support." }),
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem", width: "100%" }, children: /* @__PURE__ */ jsxs(ModalOptionCard, { onClick: () => {
+          window.open("mailto:help@loafmarkets.com", "_blank");
+        }, children: [
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "1.5rem" }, children: "\u2709\uFE0F" }),
+          /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: "Contact Support" }),
+            /* @__PURE__ */ jsx("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: "0.8rem" }, children: "help@loafmarkets.com" })
+          ] })
         ] }) }),
-        /* @__PURE__ */ jsx(OnboardingHeading, { children: "KYC Check Failed" }),
-        /* @__PURE__ */ jsxs(OnboardingSubtext, { children: [
-          "Unfortunately your KYC check hasn't passed.",
-          /* @__PURE__ */ jsx("br", {}),
-          "If you think this is an error please contact us at help@loafmarkets.com"
-        ] }),
-        /* @__PURE__ */ jsxs(OnboardingButtonGroup, { children: [
-          /* @__PURE__ */ jsx(
-            SubmitButton,
-            {
-              onClick: () => {
-                window.open("mailto:help@loafmarkets.com", "_blank");
-              },
-              children: "Contact us"
-            }
-          ),
-          /* @__PURE__ */ jsx(OnboardingSkipButton, { onClick: onClose, children: "Go home" })
-        ] })
+        /* @__PURE__ */ jsx(OnboardingSkipButton, { onClick: onClose, style: { marginTop: "1rem" }, children: "Close" })
       ] })
     ] }) });
   }
@@ -6193,24 +6184,27 @@ var LoginPopup = ({
                 allow: "camera; microphone; payment"
               }
             ) })
-          ] }) : /* @__PURE__ */ jsxs(OnboardingStepContainer, { children: [
-            /* @__PURE__ */ jsx(OnboardingHeading, { children: "Fund your account" }),
-            /* @__PURE__ */ jsxs(FundingCard, { children: [
-              /* @__PURE__ */ jsxs(FundingOptionsGrid, { children: [
-                /* @__PURE__ */ jsxs(FundingOptionCard, { children: [
-                  /* @__PURE__ */ jsx(FundingOptionHeading, { children: "Crypto transfer" }),
-                  /* @__PURE__ */ jsx(FundingOptionSubtext, { children: "Use Privy's Coinbase onramp to move crypto from another exchange or wallet." }),
-                  /* @__PURE__ */ jsx(SubmitButton, { onClick: handleCryptoFund, disabled: cryptoFundingLoading, children: cryptoFundingLoading ? "Opening Coinbase\u2026" : "Use crypto deposit" })
-                ] }),
-                /* @__PURE__ */ jsxs(FundingOptionCard, { children: [
-                  /* @__PURE__ */ jsx(FundingOptionHeading, { children: "Fiat onramp" }),
-                  /* @__PURE__ */ jsx(FundingOptionSubtext, { children: "Buy USDC instantly with your card or local payment methods via Transak." }),
-                  /* @__PURE__ */ jsx(SubmitButton, { onClick: handleFiatFund, disabled: fiatFundingLoading, children: fiatFundingLoading ? "Loading widget\u2026" : "Use onramp" })
+          ] }) : /* @__PURE__ */ jsxs(OnboardingStepContainer, { style: { alignItems: "stretch", textAlign: "left" }, children: [
+            /* @__PURE__ */ jsx(OnboardingHeading, { style: { textAlign: "center" }, children: "Deposit Funds" }),
+            /* @__PURE__ */ jsx(OnboardingSubtext, { style: { textAlign: "center", marginBottom: "1rem" }, children: "Choose how you'd like to fund your account." }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
+              /* @__PURE__ */ jsxs(ModalOptionCard, { onClick: handleCryptoFund, disabled: cryptoFundingLoading, children: [
+                /* @__PURE__ */ jsx("span", { style: { fontSize: "1.5rem" }, children: "\u{1F4B3}" }),
+                /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+                  /* @__PURE__ */ jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: cryptoFundingLoading ? "Opening Coinbase\u2026" : "Crypto Deposit" }),
+                  /* @__PURE__ */ jsx("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: "0.8rem" }, children: "Transfer USDC from another exchange or wallet" })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx(OnboardingSkipButton, { onClick: handleFundingSkip, style: { marginTop: "1.25rem" }, children: "Skip for now" }),
-              fundingError && /* @__PURE__ */ jsx(StatusMessage, { $error: true, children: fundingError })
-            ] })
+              /* @__PURE__ */ jsxs(ModalOptionCard, { onClick: handleFiatFund, disabled: fiatFundingLoading, children: [
+                /* @__PURE__ */ jsx("span", { style: { fontSize: "1.5rem" }, children: "\u{1F3E6}" }),
+                /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+                  /* @__PURE__ */ jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: fiatFundingLoading ? "Loading widget\u2026" : "Fiat Onramp" }),
+                  /* @__PURE__ */ jsx("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: "0.8rem" }, children: "Buy USDC instantly with your card or local payment methods" })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(OnboardingSkipButton, { onClick: handleFundingSkip, style: { marginTop: "1rem" }, children: "Skip for now" }),
+            fundingError && /* @__PURE__ */ jsx(StatusMessage, { $error: true, children: fundingError })
           ] })
         ]
       }
@@ -6587,60 +6581,28 @@ var OnboardingSkipButton = styled24.button`
     color: var(--color-text, #eaecef);
   }
 `;
-var KycSuccessIcon = styled24.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 120px;
-  height: 120px;
-  border-radius: 50%;
-  border: 8px solid var(--color-accent, #e6c656);
-  margin-bottom: 1.5rem;
-`;
-var KycFailedIcon = styled24.div`
+var ModalOptionCard = styled24.button`
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: 120px;
-  height: 120px;
-  border-radius: 50%;
-  border: 6px solid var(--color-accent, #e6c656);
-  margin-bottom: 1.5rem;
-`;
-var FundingCard = styled24.div`
-  width: 100%;
-  border-radius: 14px;
-  background-color: var(--color-background-light, #14151e);
-  padding: 1rem;
-  text-align: left;
-  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.4);
-`;
-var FundingOptionsGrid = styled24.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 0.6rem;
-  margin-top: 0.75rem;
-`;
-var FundingOptionCard = styled24.div`
-  background-color: rgba(255, 255, 255, 0.03);
+  gap: 1rem;
+  padding: 1.25rem;
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 12px;
-  padding: 0.85rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-`;
-var FundingOptionHeading = styled24.h4`
-  margin: 0;
-  font-size: 0.9rem;
-  color: var(--color-text, #eaecef);
-`;
-var FundingOptionSubtext = styled24.p`
-  margin: 0;
-  font-size: 0.75rem;
-  line-height: 1.3;
-  color: var(--color-text-secondary, #848e9c);
-  flex: 1;
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.15s ease;
+  width: 100%;
+
+  &:hover:not(:disabled) {
+    border-color: rgba(230, 198, 86, 0.4);
+    background: rgba(230, 198, 86, 0.05);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 `;
 var FundingPopupContainer = styled24.div`
   background-color: var(--color-background, #0a0a0a);
@@ -10370,8 +10332,12 @@ var formatCurrency5 = (value, opts) => {
 var formatNumber2 = (value, maximumFractionDigits = 2) => value.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits });
 var formatTimestamp = (unix) => {
   if (!unix) return "\u2014";
-  const ts = unix > 1e15 ? Math.floor(unix / 1e6) : unix > 1e12 ? Math.floor(unix / 1e3) : unix;
-  return new Date(ts * 1e3).toLocaleString("en-AU", {
+  let sec;
+  if (unix > 1e18) sec = Math.floor(unix / 1e9);
+  else if (unix > 1e14) sec = Math.floor(unix / 1e6);
+  else if (unix > 1e12) sec = Math.floor(unix / 1e3);
+  else sec = unix;
+  return new Date(sec * 1e3).toLocaleString("en-AU", {
     day: "2-digit",
     month: "short",
     hour: "2-digit",