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