@compass-labs/widgets 0.1.10 → 0.1.12

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 +173 -90
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +174 -91
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -3904,8 +3904,21 @@ function EarnAccount({
3904
3904
  return {
3905
3905
  balance: usdcPosition.balance || "0",
3906
3906
  pnl: usdcPosition.pnl ? {
3907
- totalPnl: usdcPosition.pnl.totalPnl || "0"
3908
- } : void 0
3907
+ unrealizedPnl: usdcPosition.pnl.unrealizedPnl || "0",
3908
+ realizedPnl: usdcPosition.pnl.realizedPnl || "0",
3909
+ totalPnl: usdcPosition.pnl.totalPnl || "0",
3910
+ totalDeposited: usdcPosition.pnl.totalDeposited || "0"
3911
+ } : void 0,
3912
+ deposits: (usdcPosition.deposits || []).map((d) => ({
3913
+ amount: d.inputAmount || d.amount || "0",
3914
+ blockNumber: d.blockNumber || 0,
3915
+ txHash: d.transactionHash || d.txHash || ""
3916
+ })),
3917
+ withdrawals: (usdcPosition.withdrawals || []).map((w) => ({
3918
+ amount: w.outputAmount || w.amount || "0",
3919
+ blockNumber: w.blockNumber || 0,
3920
+ txHash: w.transactionHash || w.txHash || ""
3921
+ }))
3909
3922
  };
3910
3923
  },
3911
3924
  enabled: !!address,
@@ -4229,17 +4242,27 @@ function EarnAccount({
4229
4242
  const gapSize = compact ? "calc(var(--compass-spacing-unit) * 0.75)" : "calc(var(--compass-spacing-unit) * 1.5)";
4230
4243
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: gapSize, fontFamily: "var(--compass-font-family)" }, children: [
4231
4244
  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
- ),
4245
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
4246
+ /* @__PURE__ */ jsxRuntime.jsx(
4247
+ "h2",
4248
+ {
4249
+ className: "font-semibold",
4250
+ style: {
4251
+ color: "var(--compass-color-text)",
4252
+ fontSize: "var(--compass-font-size-subheading, 1.25rem)"
4253
+ },
4254
+ children: title
4255
+ }
4256
+ ),
4257
+ /* @__PURE__ */ jsxRuntime.jsx(
4258
+ "span",
4259
+ {
4260
+ className: "text-sm",
4261
+ style: { color: "var(--compass-color-text-secondary)" },
4262
+ children: "USDC High-Yield Account"
4263
+ }
4264
+ )
4265
+ ] }),
4243
4266
  /* @__PURE__ */ jsxRuntime.jsx(WalletStatus, { compact: true })
4244
4267
  ] }),
4245
4268
  /* @__PURE__ */ jsxRuntime.jsxs(EarnAccountGuard, { children: [
@@ -4247,57 +4270,90 @@ function EarnAccount({
4247
4270
  "div",
4248
4271
  {
4249
4272
  style: {
4250
- background: "linear-gradient(135deg, var(--compass-color-primary) 0%, var(--compass-color-primary-hover, var(--compass-color-primary)) 100%)",
4273
+ backgroundColor: "var(--compass-color-surface)",
4274
+ border: "1px solid var(--compass-color-border)",
4251
4275
  borderRadius: "var(--compass-border-radius-xl)",
4252
- padding: compact ? "var(--compass-spacing-card)" : "calc(var(--compass-spacing-card) * 1.5)"
4276
+ padding: compact ? "var(--compass-spacing-card)" : "calc(var(--compass-spacing-card) * 1.25)"
4253
4277
  },
4254
4278
  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) })
4279
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
4280
+ /* @__PURE__ */ jsxRuntime.jsx(
4281
+ "span",
4282
+ {
4283
+ className: "text-xs font-medium uppercase tracking-wide",
4284
+ style: { color: "var(--compass-color-text-tertiary)" },
4285
+ children: "Total Balance"
4286
+ }
4287
+ ),
4288
+ /* @__PURE__ */ jsxRuntime.jsx(
4289
+ "span",
4290
+ {
4291
+ className: "font-bold",
4292
+ style: {
4293
+ color: "var(--compass-color-text)",
4294
+ fontSize: compact ? "2rem" : "2.5rem",
4295
+ lineHeight: "1"
4296
+ },
4297
+ children: formatCurrency(totalBalance)
4298
+ }
4299
+ )
4258
4300
  ] }),
4301
+ /* @__PURE__ */ jsxRuntime.jsx(
4302
+ "div",
4303
+ {
4304
+ style: {
4305
+ height: "1px",
4306
+ backgroundColor: "var(--compass-color-border)",
4307
+ margin: compact ? "var(--compass-spacing-card) 0" : "calc(var(--compass-spacing-card) * 1.25) 0"
4308
+ }
4309
+ }
4310
+ ),
4259
4311
  /* @__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) })
4312
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.25)" }, children: [
4313
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "var(--compass-color-text-tertiary)" }, children: "Earning interest" }),
4314
+ /* @__PURE__ */ jsxRuntime.jsx(
4315
+ "span",
4316
+ {
4317
+ className: "font-semibold",
4318
+ style: {
4319
+ color: "var(--compass-color-text)",
4320
+ fontSize: compact ? "1rem" : "1.125rem"
4321
+ },
4322
+ children: formatCurrency(depositedBalance)
4323
+ }
4324
+ )
4263
4325
  ] }),
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
- ] })
4326
+ showInterestRate && /* @__PURE__ */ jsxRuntime.jsxs(
4327
+ "div",
4328
+ {
4329
+ className: "flex items-center",
4330
+ style: {
4331
+ backgroundColor: "var(--compass-color-success-muted, rgba(34, 197, 94, 0.1))",
4332
+ border: "1px solid var(--compass-color-success)",
4333
+ borderRadius: "var(--compass-border-radius-full)",
4334
+ padding: "calc(var(--compass-spacing-unit) * 0.5) calc(var(--compass-spacing-unit) * 1)",
4335
+ gap: "calc(var(--compass-spacing-unit) * 0.5)"
4336
+ },
4337
+ children: [
4338
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { size: compact ? 14 : 16, style: { color: "var(--compass-color-success)" } }),
4339
+ /* @__PURE__ */ jsxRuntime.jsxs(
4340
+ "span",
4341
+ {
4342
+ className: "font-semibold",
4343
+ style: { color: "var(--compass-color-success)", fontSize: compact ? "0.875rem" : "1rem" },
4344
+ children: [
4345
+ formatAPY3(market.supplyApy),
4346
+ "% APY"
4347
+ ]
4348
+ }
4349
+ )
4350
+ ]
4351
+ }
4352
+ )
4268
4353
  ] })
4269
4354
  ]
4270
4355
  }
4271
4356
  ),
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
4357
  showPnL && earnings > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
4302
4358
  "div",
4303
4359
  {
@@ -4324,12 +4380,29 @@ function EarnAccount({
4324
4380
  ]
4325
4381
  }
4326
4382
  ),
4383
+ userPosition?.pnl && /* @__PURE__ */ jsxRuntime.jsx(
4384
+ PnLSummary,
4385
+ {
4386
+ pnl: userPosition.pnl,
4387
+ tokenSymbol: "USDC",
4388
+ tokenPrice: 1
4389
+ }
4390
+ ),
4391
+ userPosition?.deposits?.length || userPosition?.withdrawals?.length ? /* @__PURE__ */ jsxRuntime.jsx(
4392
+ TransactionHistory,
4393
+ {
4394
+ deposits: userPosition.deposits,
4395
+ withdrawals: userPosition.withdrawals,
4396
+ tokenSymbol: "USDC"
4397
+ }
4398
+ ) : null,
4327
4399
  /* @__PURE__ */ jsxRuntime.jsxs(
4328
4400
  "div",
4329
4401
  {
4330
4402
  className: "flex",
4331
4403
  style: {
4332
4404
  backgroundColor: "var(--compass-color-surface)",
4405
+ border: "1px solid var(--compass-color-border)",
4333
4406
  borderRadius: "var(--compass-border-radius-lg)",
4334
4407
  padding: "calc(var(--compass-spacing-unit) * 0.25)"
4335
4408
  },
@@ -4343,16 +4416,17 @@ function EarnAccount({
4343
4416
  },
4344
4417
  className: "flex-1 flex items-center justify-center font-medium transition-all",
4345
4418
  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)",
4419
+ backgroundColor: activeTab === "deposit" ? "var(--compass-color-surface-elevated, var(--compass-color-surface))" : "transparent",
4420
+ color: activeTab === "deposit" ? "var(--compass-color-text)" : "var(--compass-color-text-tertiary)",
4348
4421
  borderRadius: "var(--compass-border-radius-md)",
4349
- padding: compact ? "calc(var(--compass-spacing-unit) * 0.5)" : "calc(var(--compass-spacing-unit) * 0.75)",
4422
+ padding: compact ? "calc(var(--compass-spacing-unit) * 0.75)" : "var(--compass-spacing-card)",
4350
4423
  gap: "calc(var(--compass-spacing-unit) * 0.5)",
4351
- transition: "var(--compass-transition-normal)"
4424
+ transition: "var(--compass-transition-normal)",
4425
+ border: activeTab === "deposit" ? "1px solid var(--compass-color-border)" : "1px solid transparent"
4352
4426
  },
4353
4427
  children: [
4354
4428
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: compact ? 16 : 18 }),
4355
- "Add Money"
4429
+ "Deposit"
4356
4430
  ]
4357
4431
  }
4358
4432
  ),
@@ -4365,12 +4439,13 @@ function EarnAccount({
4365
4439
  },
4366
4440
  className: "flex-1 flex items-center justify-center font-medium transition-all",
4367
4441
  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)",
4442
+ backgroundColor: activeTab === "withdraw" ? "var(--compass-color-surface-elevated, var(--compass-color-surface))" : "transparent",
4443
+ color: activeTab === "withdraw" ? "var(--compass-color-text)" : "var(--compass-color-text-tertiary)",
4370
4444
  borderRadius: "var(--compass-border-radius-md)",
4371
- padding: compact ? "calc(var(--compass-spacing-unit) * 0.5)" : "calc(var(--compass-spacing-unit) * 0.75)",
4445
+ padding: compact ? "calc(var(--compass-spacing-unit) * 0.75)" : "var(--compass-spacing-card)",
4372
4446
  gap: "calc(var(--compass-spacing-unit) * 0.5)",
4373
- transition: "var(--compass-transition-normal)"
4447
+ transition: "var(--compass-transition-normal)",
4448
+ border: activeTab === "withdraw" ? "1px solid var(--compass-color-border)" : "1px solid transparent"
4374
4449
  },
4375
4450
  children: [
4376
4451
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { size: compact ? 16 : 18 }),
@@ -4396,8 +4471,8 @@ function EarnAccount({
4396
4471
  /* @__PURE__ */ jsxRuntime.jsx(
4397
4472
  "span",
4398
4473
  {
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)" },
4474
+ className: "font-medium",
4475
+ style: { color: "var(--compass-color-text-secondary)", fontSize: compact ? "1.25rem" : "1.5rem", marginRight: "calc(var(--compass-spacing-unit) * 0.25)" },
4401
4476
  children: "$"
4402
4477
  }
4403
4478
  ),
@@ -4412,7 +4487,7 @@ function EarnAccount({
4412
4487
  },
4413
4488
  placeholder: "0.00",
4414
4489
  disabled: isProcessing,
4415
- className: "flex-1 font-bold bg-transparent outline-none",
4490
+ className: "flex-1 font-medium bg-transparent outline-none",
4416
4491
  style: { color: "var(--compass-color-text)", fontSize: compact ? "1.25rem" : "1.5rem" }
4417
4492
  }
4418
4493
  ),
@@ -4421,21 +4496,22 @@ function EarnAccount({
4421
4496
  {
4422
4497
  onClick: () => setAmount(maxAmount.toString()),
4423
4498
  disabled: isProcessing,
4424
- className: "text-sm font-medium",
4499
+ className: "text-xs font-medium uppercase tracking-wide",
4425
4500
  style: {
4426
- backgroundColor: "var(--compass-color-primary-muted, rgba(99, 102, 241, 0.1))",
4427
- color: "var(--compass-color-primary)",
4501
+ backgroundColor: "var(--compass-color-surface-elevated, var(--compass-color-background))",
4502
+ border: "1px solid var(--compass-color-border)",
4503
+ color: "var(--compass-color-text-secondary)",
4428
4504
  borderRadius: "var(--compass-border-radius-md)",
4429
- padding: "calc(var(--compass-spacing-unit) * 0.25) calc(var(--compass-spacing-unit) * 0.75)"
4505
+ padding: "calc(var(--compass-spacing-unit) * 0.5) calc(var(--compass-spacing-unit) * 0.75)"
4430
4506
  },
4431
- children: "Max"
4507
+ children: "MAX"
4432
4508
  }
4433
4509
  )
4434
4510
  ]
4435
4511
  }
4436
4512
  ),
4437
4513
  /* @__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" }),
4514
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "var(--compass-color-text-tertiary)" }, children: "Available balance" }),
4439
4515
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", style: { color: "var(--compass-color-text-secondary)" }, children: formatCurrency(maxAmount) })
4440
4516
  ] })
4441
4517
  ] }),
@@ -4463,13 +4539,13 @@ function EarnAccount({
4463
4539
  color: "var(--compass-color-primary-text, white)",
4464
4540
  borderRadius: "var(--compass-border-radius-lg)",
4465
4541
  padding: compact ? "calc(var(--compass-spacing-unit) * 0.75)" : "var(--compass-spacing-card)",
4466
- fontSize: compact ? "0.875rem" : "1.125rem",
4542
+ fontSize: compact ? "0.875rem" : "1rem",
4467
4543
  transition: "var(--compass-transition-normal)"
4468
4544
  },
4469
4545
  children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
4470
4546
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: compact ? 16 : 20, className: "animate-spin" }),
4471
4547
  "Processing..."
4472
- ] }) : activeTab === "deposit" ? "Add to Savings" : "Withdraw to Account"
4548
+ ] }) : activeTab === "deposit" ? "Deposit funds" : "Withdraw funds"
4473
4549
  }
4474
4550
  ),
4475
4551
  statusMessage && !error && /* @__PURE__ */ jsxRuntime.jsx(
@@ -4485,20 +4561,27 @@ function EarnAccount({
4485
4561
  children: statusMessage
4486
4562
  }
4487
4563
  ),
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
- ] }),
4564
+ showTrustBadge && /* @__PURE__ */ jsxRuntime.jsxs(
4565
+ "div",
4566
+ {
4567
+ className: "flex items-center justify-center",
4568
+ style: {
4569
+ gap: "calc(var(--compass-spacing-unit) * 1)",
4570
+ paddingTop: "calc(var(--compass-spacing-unit) * 0.5)"
4571
+ },
4572
+ children: [
4573
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
4574
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Shield, { size: compact ? 14 : 16, style: { color: "var(--compass-color-text-tertiary)" } }),
4575
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "var(--compass-color-text-tertiary)" }, children: "Non-custodial" })
4576
+ ] }),
4577
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-border)" }, children: "|" }),
4578
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
4579
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { size: compact ? 14 : 16, style: { color: "var(--compass-color-text-tertiary)" } }),
4580
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "var(--compass-color-text-tertiary)" }, children: "Audited protocols" })
4581
+ ] })
4582
+ ]
4583
+ }
4584
+ ),
4502
4585
  showFundButton && /* @__PURE__ */ jsxRuntime.jsxs(
4503
4586
  "button",
4504
4587
  {
@@ -4509,13 +4592,13 @@ function EarnAccount({
4509
4592
  border: "1px solid var(--compass-color-border)",
4510
4593
  color: "var(--compass-color-text)",
4511
4594
  borderRadius: "var(--compass-border-radius-lg)",
4512
- padding: compact ? "calc(var(--compass-spacing-unit) * 0.5)" : "calc(var(--compass-spacing-unit) * 0.75)",
4595
+ padding: compact ? "calc(var(--compass-spacing-unit) * 0.75)" : "var(--compass-spacing-card)",
4513
4596
  gap: "calc(var(--compass-spacing-unit) * 0.5)",
4514
4597
  transition: "var(--compass-transition-normal)"
4515
4598
  },
4516
4599
  children: [
4517
4600
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { size: compact ? 16 : 18 }),
4518
- "Transfer from Wallet"
4601
+ "Transfer from wallet"
4519
4602
  ]
4520
4603
  }
4521
4604
  )