@compass-labs/widgets 0.1.9 → 0.1.11

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 +142 -88
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +143 -89
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -4229,17 +4229,27 @@ function EarnAccount({
4229
4229
  const gapSize = compact ? "calc(var(--compass-spacing-unit) * 0.75)" : "calc(var(--compass-spacing-unit) * 1.5)";
4230
4230
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: gapSize, fontFamily: "var(--compass-font-family)" }, children: [
4231
4231
  showHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
4232
- /* @__PURE__ */ jsxRuntime.jsx(
4233
- "h2",
4234
- {
4235
- className: "font-semibold",
4236
- style: {
4237
- color: "var(--compass-color-text)",
4238
- fontSize: "var(--compass-font-size-subheading, 1.125rem)"
4239
- },
4240
- children: title
4241
- }
4242
- ),
4232
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
4233
+ /* @__PURE__ */ jsxRuntime.jsx(
4234
+ "h2",
4235
+ {
4236
+ className: "font-semibold",
4237
+ style: {
4238
+ color: "var(--compass-color-text)",
4239
+ fontSize: "var(--compass-font-size-subheading, 1.25rem)"
4240
+ },
4241
+ children: title
4242
+ }
4243
+ ),
4244
+ /* @__PURE__ */ jsxRuntime.jsx(
4245
+ "span",
4246
+ {
4247
+ className: "text-sm",
4248
+ style: { color: "var(--compass-color-text-secondary)" },
4249
+ children: "USDC High-Yield Account"
4250
+ }
4251
+ )
4252
+ ] }),
4243
4253
  /* @__PURE__ */ jsxRuntime.jsx(WalletStatus, { compact: true })
4244
4254
  ] }),
4245
4255
  /* @__PURE__ */ jsxRuntime.jsxs(EarnAccountGuard, { children: [
@@ -4247,57 +4257,90 @@ function EarnAccount({
4247
4257
  "div",
4248
4258
  {
4249
4259
  style: {
4250
- background: "linear-gradient(135deg, var(--compass-color-primary) 0%, var(--compass-color-primary-hover, var(--compass-color-primary)) 100%)",
4260
+ backgroundColor: "var(--compass-color-surface)",
4261
+ border: "1px solid var(--compass-color-border)",
4251
4262
  borderRadius: "var(--compass-border-radius-xl)",
4252
- padding: compact ? "var(--compass-spacing-card)" : "calc(var(--compass-spacing-card) * 1.5)"
4263
+ padding: compact ? "var(--compass-spacing-card)" : "calc(var(--compass-spacing-card) * 1.25)"
4253
4264
  },
4254
4265
  children: [
4255
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.25)", marginBottom: compact ? "var(--compass-spacing-card)" : "calc(var(--compass-spacing-card) * 1.5)" }, children: [
4256
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", style: { color: "rgba(255,255,255,0.7)" }, children: "Total Balance" }),
4257
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", style: { color: "white", fontSize: compact ? "2rem" : "2.75rem", lineHeight: "1" }, children: formatCurrency(totalBalance) })
4266
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
4267
+ /* @__PURE__ */ jsxRuntime.jsx(
4268
+ "span",
4269
+ {
4270
+ className: "text-xs font-medium uppercase tracking-wide",
4271
+ style: { color: "var(--compass-color-text-tertiary)" },
4272
+ children: "Total Balance"
4273
+ }
4274
+ ),
4275
+ /* @__PURE__ */ jsxRuntime.jsx(
4276
+ "span",
4277
+ {
4278
+ className: "font-bold",
4279
+ style: {
4280
+ color: "var(--compass-color-text)",
4281
+ fontSize: compact ? "2rem" : "2.5rem",
4282
+ lineHeight: "1"
4283
+ },
4284
+ children: formatCurrency(totalBalance)
4285
+ }
4286
+ )
4258
4287
  ] }),
4288
+ /* @__PURE__ */ jsxRuntime.jsx(
4289
+ "div",
4290
+ {
4291
+ style: {
4292
+ height: "1px",
4293
+ backgroundColor: "var(--compass-color-border)",
4294
+ margin: compact ? "var(--compass-spacing-card) 0" : "calc(var(--compass-spacing-card) * 1.25) 0"
4295
+ }
4296
+ }
4297
+ ),
4259
4298
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
4260
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
4261
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "rgba(255,255,255,0.6)" }, children: "Available" }),
4262
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", style: { color: "white", fontSize: compact ? "1rem" : "1.25rem" }, children: formatCurrency(available) })
4299
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.25)" }, children: [
4300
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "var(--compass-color-text-tertiary)" }, children: "Earning interest" }),
4301
+ /* @__PURE__ */ jsxRuntime.jsx(
4302
+ "span",
4303
+ {
4304
+ className: "font-semibold",
4305
+ style: {
4306
+ color: "var(--compass-color-text)",
4307
+ fontSize: compact ? "1rem" : "1.125rem"
4308
+ },
4309
+ children: formatCurrency(depositedBalance)
4310
+ }
4311
+ )
4263
4312
  ] }),
4264
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
4265
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "rgba(255,255,255,0.6)" }, children: "Earning Interest" }),
4266
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", style: { color: "white", fontSize: compact ? "1rem" : "1.25rem" }, children: formatCurrency(depositedBalance) })
4267
- ] })
4313
+ showInterestRate && /* @__PURE__ */ jsxRuntime.jsxs(
4314
+ "div",
4315
+ {
4316
+ className: "flex items-center",
4317
+ style: {
4318
+ backgroundColor: "var(--compass-color-success-muted, rgba(34, 197, 94, 0.1))",
4319
+ border: "1px solid var(--compass-color-success)",
4320
+ borderRadius: "var(--compass-border-radius-full)",
4321
+ padding: "calc(var(--compass-spacing-unit) * 0.5) calc(var(--compass-spacing-unit) * 1)",
4322
+ gap: "calc(var(--compass-spacing-unit) * 0.5)"
4323
+ },
4324
+ children: [
4325
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { size: compact ? 14 : 16, style: { color: "var(--compass-color-success)" } }),
4326
+ /* @__PURE__ */ jsxRuntime.jsxs(
4327
+ "span",
4328
+ {
4329
+ className: "font-semibold",
4330
+ style: { color: "var(--compass-color-success)", fontSize: compact ? "0.875rem" : "1rem" },
4331
+ children: [
4332
+ formatAPY3(market.supplyApy),
4333
+ "% APY"
4334
+ ]
4335
+ }
4336
+ )
4337
+ ]
4338
+ }
4339
+ )
4268
4340
  ] })
4269
4341
  ]
4270
4342
  }
4271
4343
  ),
4272
- showInterestRate && /* @__PURE__ */ jsxRuntime.jsxs(
4273
- "div",
4274
- {
4275
- className: "flex items-center justify-between",
4276
- style: {
4277
- backgroundColor: "var(--compass-color-success-muted, rgba(34, 197, 94, 0.1))",
4278
- border: "1px solid var(--compass-color-success)",
4279
- borderRadius: "var(--compass-border-radius-lg)",
4280
- padding: spacing
4281
- },
4282
- children: [
4283
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
4284
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { size: compact ? 16 : 18, style: { color: "var(--compass-color-success)" } }),
4285
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", style: { color: "var(--compass-color-text)", fontSize: compact ? "0.875rem" : "1rem" }, children: "Annual Interest Rate" })
4286
- ] }),
4287
- /* @__PURE__ */ jsxRuntime.jsxs(
4288
- "span",
4289
- {
4290
- className: "font-bold",
4291
- style: { color: "var(--compass-color-success)", fontSize: compact ? "1rem" : "1.25rem" },
4292
- children: [
4293
- formatAPY3(market.supplyApy),
4294
- "%"
4295
- ]
4296
- }
4297
- )
4298
- ]
4299
- }
4300
- ),
4301
4344
  showPnL && earnings > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
4302
4345
  "div",
4303
4346
  {
@@ -4330,6 +4373,7 @@ function EarnAccount({
4330
4373
  className: "flex",
4331
4374
  style: {
4332
4375
  backgroundColor: "var(--compass-color-surface)",
4376
+ border: "1px solid var(--compass-color-border)",
4333
4377
  borderRadius: "var(--compass-border-radius-lg)",
4334
4378
  padding: "calc(var(--compass-spacing-unit) * 0.25)"
4335
4379
  },
@@ -4343,16 +4387,17 @@ function EarnAccount({
4343
4387
  },
4344
4388
  className: "flex-1 flex items-center justify-center font-medium transition-all",
4345
4389
  style: {
4346
- backgroundColor: activeTab === "deposit" ? "var(--compass-color-primary)" : "transparent",
4347
- color: activeTab === "deposit" ? "var(--compass-color-primary-text, white)" : "var(--compass-color-text-secondary)",
4390
+ backgroundColor: activeTab === "deposit" ? "var(--compass-color-surface-elevated, var(--compass-color-surface))" : "transparent",
4391
+ color: activeTab === "deposit" ? "var(--compass-color-text)" : "var(--compass-color-text-tertiary)",
4348
4392
  borderRadius: "var(--compass-border-radius-md)",
4349
- padding: compact ? "calc(var(--compass-spacing-unit) * 0.5)" : "calc(var(--compass-spacing-unit) * 0.75)",
4393
+ padding: compact ? "calc(var(--compass-spacing-unit) * 0.75)" : "var(--compass-spacing-card)",
4350
4394
  gap: "calc(var(--compass-spacing-unit) * 0.5)",
4351
- transition: "var(--compass-transition-normal)"
4395
+ transition: "var(--compass-transition-normal)",
4396
+ border: activeTab === "deposit" ? "1px solid var(--compass-color-border)" : "1px solid transparent"
4352
4397
  },
4353
4398
  children: [
4354
4399
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: compact ? 16 : 18 }),
4355
- "Add Money"
4400
+ "Deposit"
4356
4401
  ]
4357
4402
  }
4358
4403
  ),
@@ -4365,12 +4410,13 @@ function EarnAccount({
4365
4410
  },
4366
4411
  className: "flex-1 flex items-center justify-center font-medium transition-all",
4367
4412
  style: {
4368
- backgroundColor: activeTab === "withdraw" ? "var(--compass-color-primary)" : "transparent",
4369
- color: activeTab === "withdraw" ? "var(--compass-color-primary-text, white)" : "var(--compass-color-text-secondary)",
4413
+ backgroundColor: activeTab === "withdraw" ? "var(--compass-color-surface-elevated, var(--compass-color-surface))" : "transparent",
4414
+ color: activeTab === "withdraw" ? "var(--compass-color-text)" : "var(--compass-color-text-tertiary)",
4370
4415
  borderRadius: "var(--compass-border-radius-md)",
4371
- padding: compact ? "calc(var(--compass-spacing-unit) * 0.5)" : "calc(var(--compass-spacing-unit) * 0.75)",
4416
+ padding: compact ? "calc(var(--compass-spacing-unit) * 0.75)" : "var(--compass-spacing-card)",
4372
4417
  gap: "calc(var(--compass-spacing-unit) * 0.5)",
4373
- transition: "var(--compass-transition-normal)"
4418
+ transition: "var(--compass-transition-normal)",
4419
+ border: activeTab === "withdraw" ? "1px solid var(--compass-color-border)" : "1px solid transparent"
4374
4420
  },
4375
4421
  children: [
4376
4422
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { size: compact ? 16 : 18 }),
@@ -4396,8 +4442,8 @@ function EarnAccount({
4396
4442
  /* @__PURE__ */ jsxRuntime.jsx(
4397
4443
  "span",
4398
4444
  {
4399
- className: "font-bold",
4400
- style: { color: "var(--compass-color-text-secondary)", fontSize: compact ? "1.25rem" : "1.5rem", marginRight: "calc(var(--compass-spacing-unit) * 0.5)" },
4445
+ className: "font-medium",
4446
+ style: { color: "var(--compass-color-text-secondary)", fontSize: compact ? "1.25rem" : "1.5rem", marginRight: "calc(var(--compass-spacing-unit) * 0.25)" },
4401
4447
  children: "$"
4402
4448
  }
4403
4449
  ),
@@ -4412,7 +4458,7 @@ function EarnAccount({
4412
4458
  },
4413
4459
  placeholder: "0.00",
4414
4460
  disabled: isProcessing,
4415
- className: "flex-1 font-bold bg-transparent outline-none",
4461
+ className: "flex-1 font-medium bg-transparent outline-none",
4416
4462
  style: { color: "var(--compass-color-text)", fontSize: compact ? "1.25rem" : "1.5rem" }
4417
4463
  }
4418
4464
  ),
@@ -4421,21 +4467,22 @@ function EarnAccount({
4421
4467
  {
4422
4468
  onClick: () => setAmount(maxAmount.toString()),
4423
4469
  disabled: isProcessing,
4424
- className: "text-sm font-medium",
4470
+ className: "text-xs font-medium uppercase tracking-wide",
4425
4471
  style: {
4426
- backgroundColor: "var(--compass-color-primary-muted, rgba(99, 102, 241, 0.1))",
4427
- color: "var(--compass-color-primary)",
4472
+ backgroundColor: "var(--compass-color-surface-elevated, var(--compass-color-background))",
4473
+ border: "1px solid var(--compass-color-border)",
4474
+ color: "var(--compass-color-text-secondary)",
4428
4475
  borderRadius: "var(--compass-border-radius-md)",
4429
- padding: "calc(var(--compass-spacing-unit) * 0.25) calc(var(--compass-spacing-unit) * 0.75)"
4476
+ padding: "calc(var(--compass-spacing-unit) * 0.5) calc(var(--compass-spacing-unit) * 0.75)"
4430
4477
  },
4431
- children: "Max"
4478
+ children: "MAX"
4432
4479
  }
4433
4480
  )
4434
4481
  ]
4435
4482
  }
4436
4483
  ),
4437
4484
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", style: { padding: "0 calc(var(--compass-spacing-unit) * 0.25)" }, children: [
4438
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "var(--compass-color-text-tertiary)" }, children: activeTab === "deposit" ? "Available to add" : "Available to withdraw" }),
4485
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "var(--compass-color-text-tertiary)" }, children: "Available balance" }),
4439
4486
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", style: { color: "var(--compass-color-text-secondary)" }, children: formatCurrency(maxAmount) })
4440
4487
  ] })
4441
4488
  ] }),
@@ -4463,13 +4510,13 @@ function EarnAccount({
4463
4510
  color: "var(--compass-color-primary-text, white)",
4464
4511
  borderRadius: "var(--compass-border-radius-lg)",
4465
4512
  padding: compact ? "calc(var(--compass-spacing-unit) * 0.75)" : "var(--compass-spacing-card)",
4466
- fontSize: compact ? "0.875rem" : "1.125rem",
4513
+ fontSize: compact ? "0.875rem" : "1rem",
4467
4514
  transition: "var(--compass-transition-normal)"
4468
4515
  },
4469
4516
  children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
4470
4517
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: compact ? 16 : 20, className: "animate-spin" }),
4471
4518
  "Processing..."
4472
- ] }) : activeTab === "deposit" ? "Add to Savings" : "Withdraw to Account"
4519
+ ] }) : activeTab === "deposit" ? "Deposit funds" : "Withdraw funds"
4473
4520
  }
4474
4521
  ),
4475
4522
  statusMessage && !error && /* @__PURE__ */ jsxRuntime.jsx(
@@ -4485,20 +4532,27 @@ function EarnAccount({
4485
4532
  children: statusMessage
4486
4533
  }
4487
4534
  ),
4488
- showTrustBadge && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)", paddingTop: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
4489
- /* @__PURE__ */ jsxRuntime.jsx(
4490
- "div",
4491
- {
4492
- style: {
4493
- width: "0.5rem",
4494
- height: "0.5rem",
4495
- borderRadius: "var(--compass-border-radius-full)",
4496
- backgroundColor: "var(--compass-color-success)"
4497
- }
4498
- }
4499
- ),
4500
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "Secured & Insured" })
4501
- ] }),
4535
+ showTrustBadge && /* @__PURE__ */ jsxRuntime.jsxs(
4536
+ "div",
4537
+ {
4538
+ className: "flex items-center justify-center",
4539
+ style: {
4540
+ gap: "calc(var(--compass-spacing-unit) * 1)",
4541
+ paddingTop: "calc(var(--compass-spacing-unit) * 0.5)"
4542
+ },
4543
+ children: [
4544
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
4545
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Shield, { size: compact ? 14 : 16, style: { color: "var(--compass-color-text-tertiary)" } }),
4546
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "var(--compass-color-text-tertiary)" }, children: "Non-custodial" })
4547
+ ] }),
4548
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-border)" }, children: "|" }),
4549
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
4550
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { size: compact ? 14 : 16, style: { color: "var(--compass-color-text-tertiary)" } }),
4551
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "var(--compass-color-text-tertiary)" }, children: "Audited protocols" })
4552
+ ] })
4553
+ ]
4554
+ }
4555
+ ),
4502
4556
  showFundButton && /* @__PURE__ */ jsxRuntime.jsxs(
4503
4557
  "button",
4504
4558
  {
@@ -4509,13 +4563,13 @@ function EarnAccount({
4509
4563
  border: "1px solid var(--compass-color-border)",
4510
4564
  color: "var(--compass-color-text)",
4511
4565
  borderRadius: "var(--compass-border-radius-lg)",
4512
- padding: compact ? "calc(var(--compass-spacing-unit) * 0.5)" : "calc(var(--compass-spacing-unit) * 0.75)",
4566
+ padding: compact ? "calc(var(--compass-spacing-unit) * 0.75)" : "var(--compass-spacing-card)",
4513
4567
  gap: "calc(var(--compass-spacing-unit) * 0.5)",
4514
4568
  transition: "var(--compass-transition-normal)"
4515
4569
  },
4516
4570
  children: [
4517
4571
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { size: compact ? 16 : 18 }),
4518
- "Transfer from Wallet"
4572
+ "Transfer from wallet"
4519
4573
  ]
4520
4574
  }
4521
4575
  )