@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.js CHANGED
@@ -6140,13 +6140,17 @@ var LoginPopup = ({
6140
6140
  showKycWidget && renderKycWidget ? /* @__PURE__ */ jsxRuntime.jsxs(KycWidgetContainer, { children: [
6141
6141
  /* @__PURE__ */ jsxRuntime.jsx(InlineCloseButton, { onClick: handleKycWidgetClose, "aria-label": "Close KYC widget", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.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" }) }) }),
6142
6142
  renderKycWidget(handleKycWidgetResult)
6143
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(OnboardingStepContainer, { children: [
6144
- /* @__PURE__ */ jsxRuntime.jsx(OnboardingHeading, { children: "KYC to Continue" }),
6145
- /* @__PURE__ */ jsxRuntime.jsx(OnboardingSubtext, { children: "Loaf requires all users to KYC before they can start purchasing properties." }),
6146
- /* @__PURE__ */ jsxRuntime.jsxs(OnboardingButtonGroup, { children: [
6147
- /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, { onClick: handleKycStart, disabled: kycLoading, children: kycLoading ? "Verifying\u2026" : "KYC me now" }),
6148
- /* @__PURE__ */ jsxRuntime.jsx(OnboardingSkipButton, { onClick: handleKycSkip, children: "I'll do this later, I want to see the properties first" })
6149
- ] }),
6143
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(OnboardingStepContainer, { style: { alignItems: "stretch", textAlign: "left" }, children: [
6144
+ /* @__PURE__ */ jsxRuntime.jsx(OnboardingHeading, { style: { textAlign: "center" }, children: "Verify Your Identity" }),
6145
+ /* @__PURE__ */ jsxRuntime.jsx(OnboardingSubtext, { style: { textAlign: "center", marginBottom: "1rem" }, children: "Complete identity verification to start investing in properties." }),
6146
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: /* @__PURE__ */ jsxRuntime.jsxs(ModalOptionCard, { onClick: handleKycStart, disabled: kycLoading, children: [
6147
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "1.5rem" }, children: "\u{1F6E1}\uFE0F" }),
6148
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
6149
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: kycLoading ? "Verifying\u2026" : "Start Verification" }),
6150
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: "0.8rem" }, children: "Quick identity check \u2014 takes about 2 minutes" })
6151
+ ] })
6152
+ ] }) }),
6153
+ /* @__PURE__ */ jsxRuntime.jsx(OnboardingSkipButton, { onClick: handleKycSkip, style: { marginTop: "1rem" }, children: "I'll do this later" }),
6150
6154
  error && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: error })
6151
6155
  ] })
6152
6156
  ]
@@ -6157,12 +6161,9 @@ var LoginPopup = ({
6157
6161
  return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
6158
6162
  /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.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" }) }) }),
6159
6163
  /* @__PURE__ */ jsxRuntime.jsxs(OnboardingStepContainer, { children: [
6160
- /* @__PURE__ */ jsxRuntime.jsx(KycSuccessIcon, { children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 34.5L28.5 43 44 25", stroke: "var(--color-accent, #e6c656)", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
6161
- /* @__PURE__ */ jsxRuntime.jsx(OnboardingHeading, { children: "KYC pending review" }),
6162
- /* @__PURE__ */ jsxRuntime.jsxs(OnboardingSubtext, { children: [
6163
- "Thanks for submitting your documents.",
6164
- /* @__PURE__ */ jsxRuntime.jsx("br", {})
6165
- ] }),
6164
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "2.5rem", marginBottom: "0.75rem" }, children: "\u2713" }),
6165
+ /* @__PURE__ */ jsxRuntime.jsx(OnboardingHeading, { children: "Verification Submitted" }),
6166
+ /* @__PURE__ */ jsxRuntime.jsx(OnboardingSubtext, { children: "Thanks for submitting your documents. We'll review them shortly." }),
6166
6167
  /* @__PURE__ */ jsxRuntime.jsx(OnboardingButtonGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, { onClick: onClose, children: "Continue" }) })
6167
6168
  ] })
6168
6169
  ] }) });
@@ -6171,29 +6172,19 @@ var LoginPopup = ({
6171
6172
  return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
6172
6173
  /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.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" }) }) }),
6173
6174
  /* @__PURE__ */ jsxRuntime.jsxs(OnboardingStepContainer, { children: [
6174
- /* @__PURE__ */ jsxRuntime.jsx(KycFailedIcon, { children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "84", height: "84", viewBox: "0 0 84 84", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
6175
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "28", cy: "34", r: "5.5", fill: "var(--color-accent, #e6c656)" }),
6176
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "56", cy: "34", r: "5.5", fill: "var(--color-accent, #e6c656)" }),
6177
- /* @__PURE__ */ jsxRuntime.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" })
6175
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "2.5rem", marginBottom: "0.75rem" }, children: "\u2715" }),
6176
+ /* @__PURE__ */ jsxRuntime.jsx(OnboardingHeading, { children: "Verification Failed" }),
6177
+ /* @__PURE__ */ jsxRuntime.jsx(OnboardingSubtext, { children: "Unfortunately your identity check didn't pass. If you believe this is an error, please contact support." }),
6178
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem", width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsxs(ModalOptionCard, { onClick: () => {
6179
+ window.open("mailto:help@loafmarkets.com", "_blank");
6180
+ }, children: [
6181
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "1.5rem" }, children: "\u2709\uFE0F" }),
6182
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
6183
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: "Contact Support" }),
6184
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: "0.8rem" }, children: "help@loafmarkets.com" })
6185
+ ] })
6178
6186
  ] }) }),
6179
- /* @__PURE__ */ jsxRuntime.jsx(OnboardingHeading, { children: "KYC Check Failed" }),
6180
- /* @__PURE__ */ jsxRuntime.jsxs(OnboardingSubtext, { children: [
6181
- "Unfortunately your KYC check hasn't passed.",
6182
- /* @__PURE__ */ jsxRuntime.jsx("br", {}),
6183
- "If you think this is an error please contact us at help@loafmarkets.com"
6184
- ] }),
6185
- /* @__PURE__ */ jsxRuntime.jsxs(OnboardingButtonGroup, { children: [
6186
- /* @__PURE__ */ jsxRuntime.jsx(
6187
- SubmitButton,
6188
- {
6189
- onClick: () => {
6190
- window.open("mailto:help@loafmarkets.com", "_blank");
6191
- },
6192
- children: "Contact us"
6193
- }
6194
- ),
6195
- /* @__PURE__ */ jsxRuntime.jsx(OnboardingSkipButton, { onClick: onClose, children: "Go home" })
6196
- ] })
6187
+ /* @__PURE__ */ jsxRuntime.jsx(OnboardingSkipButton, { onClick: onClose, style: { marginTop: "1rem" }, children: "Close" })
6197
6188
  ] })
6198
6189
  ] }) });
6199
6190
  }
@@ -6218,24 +6209,27 @@ var LoginPopup = ({
6218
6209
  allow: "camera; microphone; payment"
6219
6210
  }
6220
6211
  ) })
6221
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(OnboardingStepContainer, { children: [
6222
- /* @__PURE__ */ jsxRuntime.jsx(OnboardingHeading, { children: "Fund your account" }),
6223
- /* @__PURE__ */ jsxRuntime.jsxs(FundingCard, { children: [
6224
- /* @__PURE__ */ jsxRuntime.jsxs(FundingOptionsGrid, { children: [
6225
- /* @__PURE__ */ jsxRuntime.jsxs(FundingOptionCard, { children: [
6226
- /* @__PURE__ */ jsxRuntime.jsx(FundingOptionHeading, { children: "Crypto transfer" }),
6227
- /* @__PURE__ */ jsxRuntime.jsx(FundingOptionSubtext, { children: "Use Privy's Coinbase onramp to move crypto from another exchange or wallet." }),
6228
- /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, { onClick: handleCryptoFund, disabled: cryptoFundingLoading, children: cryptoFundingLoading ? "Opening Coinbase\u2026" : "Use crypto deposit" })
6229
- ] }),
6230
- /* @__PURE__ */ jsxRuntime.jsxs(FundingOptionCard, { children: [
6231
- /* @__PURE__ */ jsxRuntime.jsx(FundingOptionHeading, { children: "Fiat onramp" }),
6232
- /* @__PURE__ */ jsxRuntime.jsx(FundingOptionSubtext, { children: "Buy USDC instantly with your card or local payment methods via Transak." }),
6233
- /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, { onClick: handleFiatFund, disabled: fiatFundingLoading, children: fiatFundingLoading ? "Loading widget\u2026" : "Use onramp" })
6212
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(OnboardingStepContainer, { style: { alignItems: "stretch", textAlign: "left" }, children: [
6213
+ /* @__PURE__ */ jsxRuntime.jsx(OnboardingHeading, { style: { textAlign: "center" }, children: "Deposit Funds" }),
6214
+ /* @__PURE__ */ jsxRuntime.jsx(OnboardingSubtext, { style: { textAlign: "center", marginBottom: "1rem" }, children: "Choose how you'd like to fund your account." }),
6215
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
6216
+ /* @__PURE__ */ jsxRuntime.jsxs(ModalOptionCard, { onClick: handleCryptoFund, disabled: cryptoFundingLoading, children: [
6217
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "1.5rem" }, children: "\u{1F4B3}" }),
6218
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
6219
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: cryptoFundingLoading ? "Opening Coinbase\u2026" : "Crypto Deposit" }),
6220
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: "0.8rem" }, children: "Transfer USDC from another exchange or wallet" })
6234
6221
  ] })
6235
6222
  ] }),
6236
- /* @__PURE__ */ jsxRuntime.jsx(OnboardingSkipButton, { onClick: handleFundingSkip, style: { marginTop: "1.25rem" }, children: "Skip for now" }),
6237
- fundingError && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: fundingError })
6238
- ] })
6223
+ /* @__PURE__ */ jsxRuntime.jsxs(ModalOptionCard, { onClick: handleFiatFund, disabled: fiatFundingLoading, children: [
6224
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "1.5rem" }, children: "\u{1F3E6}" }),
6225
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
6226
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: fiatFundingLoading ? "Loading widget\u2026" : "Fiat Onramp" }),
6227
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: "0.8rem" }, children: "Buy USDC instantly with your card or local payment methods" })
6228
+ ] })
6229
+ ] })
6230
+ ] }),
6231
+ /* @__PURE__ */ jsxRuntime.jsx(OnboardingSkipButton, { onClick: handleFundingSkip, style: { marginTop: "1rem" }, children: "Skip for now" }),
6232
+ fundingError && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: fundingError })
6239
6233
  ] })
6240
6234
  ]
6241
6235
  }
@@ -6612,60 +6606,28 @@ var OnboardingSkipButton = styled24__default.default.button`
6612
6606
  color: var(--color-text, #eaecef);
6613
6607
  }
6614
6608
  `;
6615
- var KycSuccessIcon = styled24__default.default.div`
6616
- display: flex;
6617
- align-items: center;
6618
- justify-content: center;
6619
- width: 120px;
6620
- height: 120px;
6621
- border-radius: 50%;
6622
- border: 8px solid var(--color-accent, #e6c656);
6623
- margin-bottom: 1.5rem;
6624
- `;
6625
- var KycFailedIcon = styled24__default.default.div`
6609
+ var ModalOptionCard = styled24__default.default.button`
6626
6610
  display: flex;
6627
6611
  align-items: center;
6628
- justify-content: center;
6629
- width: 120px;
6630
- height: 120px;
6631
- border-radius: 50%;
6632
- border: 6px solid var(--color-accent, #e6c656);
6633
- margin-bottom: 1.5rem;
6634
- `;
6635
- var FundingCard = styled24__default.default.div`
6636
- width: 100%;
6637
- border-radius: 14px;
6638
- background-color: var(--color-background-light, #14151e);
6639
- padding: 1rem;
6640
- text-align: left;
6641
- box-shadow: 0 18px 60px rgba(0, 0, 0, 0.4);
6642
- `;
6643
- var FundingOptionsGrid = styled24__default.default.div`
6644
- display: grid;
6645
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
6646
- gap: 0.6rem;
6647
- margin-top: 0.75rem;
6648
- `;
6649
- var FundingOptionCard = styled24__default.default.div`
6650
- background-color: rgba(255, 255, 255, 0.03);
6612
+ gap: 1rem;
6613
+ padding: 1.25rem;
6614
+ background: rgba(255, 255, 255, 0.04);
6651
6615
  border: 1px solid rgba(255, 255, 255, 0.08);
6652
6616
  border-radius: 12px;
6653
- padding: 0.85rem;
6654
- display: flex;
6655
- flex-direction: column;
6656
- gap: 0.4rem;
6657
- `;
6658
- var FundingOptionHeading = styled24__default.default.h4`
6659
- margin: 0;
6660
- font-size: 0.9rem;
6661
- color: var(--color-text, #eaecef);
6662
- `;
6663
- var FundingOptionSubtext = styled24__default.default.p`
6664
- margin: 0;
6665
- font-size: 0.75rem;
6666
- line-height: 1.3;
6667
- color: var(--color-text-secondary, #848e9c);
6668
- flex: 1;
6617
+ cursor: pointer;
6618
+ text-align: left;
6619
+ transition: all 0.15s ease;
6620
+ width: 100%;
6621
+
6622
+ &:hover:not(:disabled) {
6623
+ border-color: rgba(230, 198, 86, 0.4);
6624
+ background: rgba(230, 198, 86, 0.05);
6625
+ }
6626
+
6627
+ &:disabled {
6628
+ opacity: 0.5;
6629
+ cursor: not-allowed;
6630
+ }
6669
6631
  `;
6670
6632
  var FundingPopupContainer = styled24__default.default.div`
6671
6633
  background-color: var(--color-background, #0a0a0a);