@loafmarkets/ui 0.1.31 → 0.1.32

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.
Files changed (5) hide show
  1. package/dist/index.js +63 -101
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +63 -101
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -6115,13 +6115,17 @@ var LoginPopup = ({
6115
6115
  showKycWidget && renderKycWidget ? /* @__PURE__ */ jsxs(KycWidgetContainer, { children: [
6116
6116
  /* @__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" }) }) }),
6117
6117
  renderKycWidget(handleKycWidgetResult)
6118
- ] }) : /* @__PURE__ */ jsxs(OnboardingStepContainer, { children: [
6119
- /* @__PURE__ */ jsx(OnboardingHeading, { children: "KYC to Continue" }),
6120
- /* @__PURE__ */ jsx(OnboardingSubtext, { children: "Loaf requires all users to KYC before they can start purchasing properties." }),
6121
- /* @__PURE__ */ jsxs(OnboardingButtonGroup, { children: [
6122
- /* @__PURE__ */ jsx(SubmitButton, { onClick: handleKycStart, disabled: kycLoading, children: kycLoading ? "Verifying\u2026" : "KYC me now" }),
6123
- /* @__PURE__ */ jsx(OnboardingSkipButton, { onClick: handleKycSkip, children: "I'll do this later, I want to see the properties first" })
6124
- ] }),
6118
+ ] }) : /* @__PURE__ */ jsxs(OnboardingStepContainer, { style: { alignItems: "stretch", textAlign: "left" }, children: [
6119
+ /* @__PURE__ */ jsx(OnboardingHeading, { style: { textAlign: "center" }, children: "Verify Your Identity" }),
6120
+ /* @__PURE__ */ jsx(OnboardingSubtext, { style: { textAlign: "center", marginBottom: "1rem" }, children: "Complete identity verification to start investing in properties." }),
6121
+ /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: /* @__PURE__ */ jsxs(ModalOptionCard, { onClick: handleKycStart, disabled: kycLoading, children: [
6122
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "1.5rem" }, children: "\u{1F6E1}\uFE0F" }),
6123
+ /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
6124
+ /* @__PURE__ */ jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: kycLoading ? "Verifying\u2026" : "Start Verification" }),
6125
+ /* @__PURE__ */ jsx("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: "0.8rem" }, children: "Quick identity check \u2014 takes about 2 minutes" })
6126
+ ] })
6127
+ ] }) }),
6128
+ /* @__PURE__ */ jsx(OnboardingSkipButton, { onClick: handleKycSkip, style: { marginTop: "1rem" }, children: "I'll do this later" }),
6125
6129
  error && /* @__PURE__ */ jsx(StatusMessage, { $error: true, children: error })
6126
6130
  ] })
6127
6131
  ]
@@ -6132,12 +6136,9 @@ var LoginPopup = ({
6132
6136
  return /* @__PURE__ */ jsx(Overlay2, { children: /* @__PURE__ */ jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
6133
6137
  /* @__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" }) }) }),
6134
6138
  /* @__PURE__ */ jsxs(OnboardingStepContainer, { children: [
6135
- /* @__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" }) }) }),
6136
- /* @__PURE__ */ jsx(OnboardingHeading, { children: "KYC pending review" }),
6137
- /* @__PURE__ */ jsxs(OnboardingSubtext, { children: [
6138
- "Thanks for submitting your documents.",
6139
- /* @__PURE__ */ jsx("br", {})
6140
- ] }),
6139
+ /* @__PURE__ */ jsx("div", { style: { fontSize: "2.5rem", marginBottom: "0.75rem" }, children: "\u2713" }),
6140
+ /* @__PURE__ */ jsx(OnboardingHeading, { children: "Verification Submitted" }),
6141
+ /* @__PURE__ */ jsx(OnboardingSubtext, { children: "Thanks for submitting your documents. We'll review them shortly." }),
6141
6142
  /* @__PURE__ */ jsx(OnboardingButtonGroup, { children: /* @__PURE__ */ jsx(SubmitButton, { onClick: onClose, children: "Continue" }) })
6142
6143
  ] })
6143
6144
  ] }) });
@@ -6146,29 +6147,19 @@ var LoginPopup = ({
6146
6147
  return /* @__PURE__ */ jsx(Overlay2, { children: /* @__PURE__ */ jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
6147
6148
  /* @__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" }) }) }),
6148
6149
  /* @__PURE__ */ jsxs(OnboardingStepContainer, { children: [
6149
- /* @__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: [
6150
- /* @__PURE__ */ jsx("circle", { cx: "28", cy: "34", r: "5.5", fill: "var(--color-accent, #e6c656)" }),
6151
- /* @__PURE__ */ jsx("circle", { cx: "56", cy: "34", r: "5.5", fill: "var(--color-accent, #e6c656)" }),
6152
- /* @__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" })
6150
+ /* @__PURE__ */ jsx("div", { style: { fontSize: "2.5rem", marginBottom: "0.75rem" }, children: "\u2715" }),
6151
+ /* @__PURE__ */ jsx(OnboardingHeading, { children: "Verification Failed" }),
6152
+ /* @__PURE__ */ jsx(OnboardingSubtext, { children: "Unfortunately your identity check didn't pass. If you believe this is an error, please contact support." }),
6153
+ /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem", width: "100%" }, children: /* @__PURE__ */ jsxs(ModalOptionCard, { onClick: () => {
6154
+ window.open("mailto:help@loafmarkets.com", "_blank");
6155
+ }, children: [
6156
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "1.5rem" }, children: "\u2709\uFE0F" }),
6157
+ /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
6158
+ /* @__PURE__ */ jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: "Contact Support" }),
6159
+ /* @__PURE__ */ jsx("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: "0.8rem" }, children: "help@loafmarkets.com" })
6160
+ ] })
6153
6161
  ] }) }),
6154
- /* @__PURE__ */ jsx(OnboardingHeading, { children: "KYC Check Failed" }),
6155
- /* @__PURE__ */ jsxs(OnboardingSubtext, { children: [
6156
- "Unfortunately your KYC check hasn't passed.",
6157
- /* @__PURE__ */ jsx("br", {}),
6158
- "If you think this is an error please contact us at help@loafmarkets.com"
6159
- ] }),
6160
- /* @__PURE__ */ jsxs(OnboardingButtonGroup, { children: [
6161
- /* @__PURE__ */ jsx(
6162
- SubmitButton,
6163
- {
6164
- onClick: () => {
6165
- window.open("mailto:help@loafmarkets.com", "_blank");
6166
- },
6167
- children: "Contact us"
6168
- }
6169
- ),
6170
- /* @__PURE__ */ jsx(OnboardingSkipButton, { onClick: onClose, children: "Go home" })
6171
- ] })
6162
+ /* @__PURE__ */ jsx(OnboardingSkipButton, { onClick: onClose, style: { marginTop: "1rem" }, children: "Close" })
6172
6163
  ] })
6173
6164
  ] }) });
6174
6165
  }
@@ -6193,24 +6184,27 @@ var LoginPopup = ({
6193
6184
  allow: "camera; microphone; payment"
6194
6185
  }
6195
6186
  ) })
6196
- ] }) : /* @__PURE__ */ jsxs(OnboardingStepContainer, { children: [
6197
- /* @__PURE__ */ jsx(OnboardingHeading, { children: "Fund your account" }),
6198
- /* @__PURE__ */ jsxs(FundingCard, { children: [
6199
- /* @__PURE__ */ jsxs(FundingOptionsGrid, { children: [
6200
- /* @__PURE__ */ jsxs(FundingOptionCard, { children: [
6201
- /* @__PURE__ */ jsx(FundingOptionHeading, { children: "Crypto transfer" }),
6202
- /* @__PURE__ */ jsx(FundingOptionSubtext, { children: "Use Privy's Coinbase onramp to move crypto from another exchange or wallet." }),
6203
- /* @__PURE__ */ jsx(SubmitButton, { onClick: handleCryptoFund, disabled: cryptoFundingLoading, children: cryptoFundingLoading ? "Opening Coinbase\u2026" : "Use crypto deposit" })
6204
- ] }),
6205
- /* @__PURE__ */ jsxs(FundingOptionCard, { children: [
6206
- /* @__PURE__ */ jsx(FundingOptionHeading, { children: "Fiat onramp" }),
6207
- /* @__PURE__ */ jsx(FundingOptionSubtext, { children: "Buy USDC instantly with your card or local payment methods via Transak." }),
6208
- /* @__PURE__ */ jsx(SubmitButton, { onClick: handleFiatFund, disabled: fiatFundingLoading, children: fiatFundingLoading ? "Loading widget\u2026" : "Use onramp" })
6187
+ ] }) : /* @__PURE__ */ jsxs(OnboardingStepContainer, { style: { alignItems: "stretch", textAlign: "left" }, children: [
6188
+ /* @__PURE__ */ jsx(OnboardingHeading, { style: { textAlign: "center" }, children: "Deposit Funds" }),
6189
+ /* @__PURE__ */ jsx(OnboardingSubtext, { style: { textAlign: "center", marginBottom: "1rem" }, children: "Choose how you'd like to fund your account." }),
6190
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
6191
+ /* @__PURE__ */ jsxs(ModalOptionCard, { onClick: handleCryptoFund, disabled: cryptoFundingLoading, children: [
6192
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "1.5rem" }, children: "\u{1F4B3}" }),
6193
+ /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
6194
+ /* @__PURE__ */ jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: cryptoFundingLoading ? "Opening Coinbase\u2026" : "Crypto Deposit" }),
6195
+ /* @__PURE__ */ jsx("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: "0.8rem" }, children: "Transfer USDC from another exchange or wallet" })
6209
6196
  ] })
6210
6197
  ] }),
6211
- /* @__PURE__ */ jsx(OnboardingSkipButton, { onClick: handleFundingSkip, style: { marginTop: "1.25rem" }, children: "Skip for now" }),
6212
- fundingError && /* @__PURE__ */ jsx(StatusMessage, { $error: true, children: fundingError })
6213
- ] })
6198
+ /* @__PURE__ */ jsxs(ModalOptionCard, { onClick: handleFiatFund, disabled: fiatFundingLoading, children: [
6199
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "1.5rem" }, children: "\u{1F3E6}" }),
6200
+ /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
6201
+ /* @__PURE__ */ jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: fiatFundingLoading ? "Loading widget\u2026" : "Fiat Onramp" }),
6202
+ /* @__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" })
6203
+ ] })
6204
+ ] })
6205
+ ] }),
6206
+ /* @__PURE__ */ jsx(OnboardingSkipButton, { onClick: handleFundingSkip, style: { marginTop: "1rem" }, children: "Skip for now" }),
6207
+ fundingError && /* @__PURE__ */ jsx(StatusMessage, { $error: true, children: fundingError })
6214
6208
  ] })
6215
6209
  ]
6216
6210
  }
@@ -6587,60 +6581,28 @@ var OnboardingSkipButton = styled24.button`
6587
6581
  color: var(--color-text, #eaecef);
6588
6582
  }
6589
6583
  `;
6590
- var KycSuccessIcon = styled24.div`
6591
- display: flex;
6592
- align-items: center;
6593
- justify-content: center;
6594
- width: 120px;
6595
- height: 120px;
6596
- border-radius: 50%;
6597
- border: 8px solid var(--color-accent, #e6c656);
6598
- margin-bottom: 1.5rem;
6599
- `;
6600
- var KycFailedIcon = styled24.div`
6584
+ var ModalOptionCard = styled24.button`
6601
6585
  display: flex;
6602
6586
  align-items: center;
6603
- justify-content: center;
6604
- width: 120px;
6605
- height: 120px;
6606
- border-radius: 50%;
6607
- border: 6px solid var(--color-accent, #e6c656);
6608
- margin-bottom: 1.5rem;
6609
- `;
6610
- var FundingCard = styled24.div`
6611
- width: 100%;
6612
- border-radius: 14px;
6613
- background-color: var(--color-background-light, #14151e);
6614
- padding: 1rem;
6615
- text-align: left;
6616
- box-shadow: 0 18px 60px rgba(0, 0, 0, 0.4);
6617
- `;
6618
- var FundingOptionsGrid = styled24.div`
6619
- display: grid;
6620
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
6621
- gap: 0.6rem;
6622
- margin-top: 0.75rem;
6623
- `;
6624
- var FundingOptionCard = styled24.div`
6625
- background-color: rgba(255, 255, 255, 0.03);
6587
+ gap: 1rem;
6588
+ padding: 1.25rem;
6589
+ background: rgba(255, 255, 255, 0.04);
6626
6590
  border: 1px solid rgba(255, 255, 255, 0.08);
6627
6591
  border-radius: 12px;
6628
- padding: 0.85rem;
6629
- display: flex;
6630
- flex-direction: column;
6631
- gap: 0.4rem;
6632
- `;
6633
- var FundingOptionHeading = styled24.h4`
6634
- margin: 0;
6635
- font-size: 0.9rem;
6636
- color: var(--color-text, #eaecef);
6637
- `;
6638
- var FundingOptionSubtext = styled24.p`
6639
- margin: 0;
6640
- font-size: 0.75rem;
6641
- line-height: 1.3;
6642
- color: var(--color-text-secondary, #848e9c);
6643
- flex: 1;
6592
+ cursor: pointer;
6593
+ text-align: left;
6594
+ transition: all 0.15s ease;
6595
+ width: 100%;
6596
+
6597
+ &:hover:not(:disabled) {
6598
+ border-color: rgba(230, 198, 86, 0.4);
6599
+ background: rgba(230, 198, 86, 0.05);
6600
+ }
6601
+
6602
+ &:disabled {
6603
+ opacity: 0.5;
6604
+ cursor: not-allowed;
6605
+ }
6644
6606
  `;
6645
6607
  var FundingPopupContainer = styled24.div`
6646
6608
  background-color: var(--color-background, #0a0a0a);