@pollar/react 0.5.2 → 0.5.3

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 (9) hide show
  1. package/dist/index.css +100 -156
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.mts +10 -3
  4. package/dist/index.d.ts +10 -3
  5. package/dist/index.js +124 -46
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +124 -47
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -21,6 +21,40 @@
21
21
  justify-content: center;
22
22
  background-color: rgba(0, 0, 0, 0.5);
23
23
  }
24
+ .pollar-modal-card {
25
+ position: relative;
26
+ width: 100%;
27
+ border-radius: 1rem;
28
+ border: 1px solid var(--pollar-border);
29
+ padding: var(--pollar-modal-padding, 1.75rem);
30
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
31
+ background-color: var(--pollar-bg);
32
+ box-sizing: border-box;
33
+ font-family: inherit;
34
+ }
35
+ .pollar-input {
36
+ width: 100%;
37
+ height: var(--pollar-input-height, 44px);
38
+ padding: 0 1rem;
39
+ border-radius: var(--pollar-input-border-radius, 0.5rem);
40
+ border: 1px solid var(--pollar-border);
41
+ background-color: var(--pollar-input-bg);
42
+ color: var(--pollar-text);
43
+ font-size: 1rem;
44
+ outline: none;
45
+ box-sizing: border-box;
46
+ }
47
+ .pollar-input::placeholder {
48
+ color: var(--pollar-muted);
49
+ }
50
+ .pollar-input:focus {
51
+ box-shadow: 0 0 0 2px var(--pollar-accent);
52
+ border-color: transparent;
53
+ }
54
+ .pollar-input:disabled {
55
+ opacity: 0.5;
56
+ cursor: not-allowed;
57
+ }
24
58
  .pollar-modal-header {
25
59
  display: flex;
26
60
  align-items: center;
@@ -38,25 +72,9 @@
38
72
  align-items: center;
39
73
  gap: 0.5rem;
40
74
  }
75
+ .pollar-close-btn,
76
+ .pollar-back-btn,
41
77
  .pollar-modal-close {
42
- background: none;
43
- border: none;
44
- cursor: pointer;
45
- color: var(--pollar-muted);
46
- padding: 4px;
47
- display: flex;
48
- align-items: center;
49
- border-radius: 6px;
50
- transition: color 150ms, background 150ms;
51
- }
52
- .pollar-modal-close:hover {
53
- color: var(--pollar-text);
54
- background: var(--pollar-border);
55
- }
56
- .pollar-close-btn {
57
- position: absolute;
58
- top: 1rem;
59
- right: 1rem;
60
78
  display: flex;
61
79
  align-items: center;
62
80
  justify-content: center;
@@ -68,13 +86,28 @@
68
86
  background-color: transparent;
69
87
  color: var(--pollar-muted);
70
88
  cursor: pointer;
71
- transition: all 0.15s;
89
+ transition:
90
+ background-color 0.15s,
91
+ color 0.15s,
92
+ border-color 0.15s;
72
93
  }
73
- .pollar-close-btn:hover {
94
+ .pollar-close-btn:hover,
95
+ .pollar-back-btn:hover,
96
+ .pollar-modal-close:hover {
74
97
  background-color: var(--pollar-input-bg);
75
98
  color: var(--pollar-text);
76
99
  border-color: var(--pollar-text);
77
100
  }
101
+ .pollar-close-btn {
102
+ position: absolute;
103
+ top: 1rem;
104
+ right: 1rem;
105
+ }
106
+ .pollar-back-btn {
107
+ position: absolute;
108
+ top: 1rem;
109
+ left: 1rem;
110
+ }
78
111
  .pollar-modal-refresh-btn {
79
112
  background: none;
80
113
  border: 1px solid var(--pollar-border);
@@ -258,15 +291,7 @@
258
291
  animation: pollar-pulse 1.5s ease-in-out infinite;
259
292
  }
260
293
  .pollar-kyc-modal {
261
- position: relative;
262
- width: 100%;
263
294
  max-width: 500px;
264
- border-radius: 1rem;
265
- border: 1px solid var(--pollar-border);
266
- padding: 2rem;
267
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
268
- background-color: var(--pollar-bg);
269
- box-sizing: border-box;
270
295
  }
271
296
  .pollar-kyc-header {
272
297
  margin-bottom: 1.5rem;
@@ -274,13 +299,13 @@
274
299
  }
275
300
  .pollar-kyc-title {
276
301
  margin: 0 0 0.375rem;
277
- font-size: 1.375rem;
302
+ font-size: var(--pollar-modal-heading-size, 1.375rem);
278
303
  font-weight: 700;
279
304
  color: var(--pollar-text);
280
305
  }
281
306
  .pollar-kyc-subtitle {
282
307
  margin: 0;
283
- font-size: 0.9rem;
308
+ font-size: var(--pollar-modal-subtitle-size, 0.9rem);
284
309
  color: var(--pollar-muted);
285
310
  }
286
311
  .pollar-kyc-providers {
@@ -295,7 +320,7 @@
295
320
  justify-content: space-between;
296
321
  width: 100%;
297
322
  padding: 0.875rem 1rem;
298
- border-radius: 0.625rem;
323
+ border-radius: var(--pollar-card-border-radius, 10px);
299
324
  border: 1px solid var(--pollar-border);
300
325
  background-color: var(--pollar-input-bg);
301
326
  cursor: pointer;
@@ -545,38 +570,7 @@
545
570
 
546
571
  /* src/components/login-modal/LoginModal.css */
547
572
  .pollar-modal {
548
- position: relative;
549
- width: 100%;
550
573
  max-width: 460px;
551
- border-radius: 1rem;
552
- border: 1px solid var(--pollar-border);
553
- padding: 2rem;
554
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
555
- background-color: var(--pollar-bg);
556
- transition: all 300ms;
557
- box-sizing: border-box;
558
- }
559
- .pollar-back-btn {
560
- position: absolute;
561
- top: 1rem;
562
- left: 1rem;
563
- display: flex;
564
- align-items: center;
565
- justify-content: center;
566
- width: 2rem;
567
- height: 2rem;
568
- padding: 0;
569
- border-radius: var(--pollar-buttons-border-radius, 6px);
570
- border: 1px solid var(--pollar-border);
571
- background-color: transparent;
572
- color: var(--pollar-muted);
573
- cursor: pointer;
574
- transition: all 0.15s;
575
- }
576
- .pollar-back-btn:hover {
577
- background-color: var(--pollar-input-bg);
578
- color: var(--pollar-text);
579
- border-color: var(--pollar-text);
580
574
  }
581
575
  .pollar-header {
582
576
  margin-bottom: 1.75rem;
@@ -595,13 +589,13 @@
595
589
  }
596
590
  .pollar-title {
597
591
  margin: 0 0 0.5rem;
598
- font-size: 1.875rem;
592
+ font-size: var(--pollar-modal-heading-size, 1.375rem);
599
593
  font-weight: 700;
600
594
  color: var(--pollar-text);
601
595
  }
602
596
  .pollar-subtitle {
603
597
  margin: 0;
604
- font-size: 1rem;
598
+ font-size: var(--pollar-modal-subtitle-size, 0.9rem);
605
599
  color: var(--pollar-muted);
606
600
  }
607
601
  .pollar-error {
@@ -619,10 +613,11 @@
619
613
  }
620
614
  .pollar-email-input {
621
615
  width: 100%;
622
- border-radius: 0.5rem;
616
+ height: var(--pollar-input-height, 44px);
617
+ padding: 0 1rem;
618
+ border-radius: var(--pollar-input-border-radius, 0.5rem);
623
619
  border: 1px solid var(--pollar-border);
624
620
  background-color: var(--pollar-input-bg);
625
- padding: 0.875rem 1rem;
626
621
  font-size: 1rem;
627
622
  color: var(--pollar-text);
628
623
  outline: none;
@@ -639,35 +634,6 @@
639
634
  opacity: 0.5;
640
635
  cursor: not-allowed;
641
636
  }
642
- .pollar-submit-btn {
643
- display: flex;
644
- align-items: center;
645
- justify-content: center;
646
- margin-top: 0.75rem;
647
- width: 100%;
648
- height: var(--pollar-buttons-height, 44px);
649
- border: none;
650
- border-radius: var(--pollar-buttons-border-radius, 0.5rem);
651
- padding: 0 0.875rem;
652
- font-size: 1rem;
653
- font-weight: 700;
654
- color: #fff;
655
- background-color: var(--pollar-accent);
656
- cursor: pointer;
657
- transition: all 0.15s;
658
- box-sizing: border-box;
659
- }
660
- .pollar-submit-btn:hover:not(:disabled) {
661
- opacity: 0.9;
662
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
663
- }
664
- .pollar-submit-btn:active:not(:disabled) {
665
- transform: scale(0.98);
666
- }
667
- .pollar-submit-btn:disabled {
668
- opacity: 0.5;
669
- cursor: not-allowed;
670
- }
671
637
  .pollar-divider {
672
638
  position: relative;
673
639
  margin: 1.25rem 0;
@@ -900,15 +866,7 @@
900
866
 
901
867
  /* src/components/ramp-widget/RampWidget.css */
902
868
  .pollar-ramp-modal {
903
- position: relative;
904
- width: 100%;
905
869
  max-width: 480px;
906
- border-radius: 1rem;
907
- border: 1px solid var(--pollar-border);
908
- padding: 2rem;
909
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
910
- background-color: var(--pollar-bg);
911
- box-sizing: border-box;
912
870
  }
913
871
  .pollar-ramp-header {
914
872
  margin-bottom: 1.5rem;
@@ -916,20 +874,20 @@
916
874
  }
917
875
  .pollar-ramp-title {
918
876
  margin: 0 0 0.375rem;
919
- font-size: 1.375rem;
877
+ font-size: var(--pollar-modal-heading-size, 1.375rem);
920
878
  font-weight: 700;
921
879
  color: var(--pollar-text);
922
880
  }
923
881
  .pollar-ramp-subtitle {
924
882
  margin: 0;
925
- font-size: 0.9rem;
883
+ font-size: var(--pollar-modal-subtitle-size, 0.9rem);
926
884
  color: var(--pollar-muted);
927
885
  }
928
886
  .pollar-ramp-tabs {
929
887
  display: flex;
930
888
  gap: 0;
931
889
  border: 1px solid var(--pollar-border);
932
- border-radius: 0.5rem;
890
+ border-radius: var(--pollar-input-border-radius, 0.5rem);
933
891
  overflow: hidden;
934
892
  margin-bottom: 1.25rem;
935
893
  }
@@ -962,9 +920,9 @@
962
920
  }
963
921
  .pollar-ramp-input {
964
922
  width: 100%;
965
- height: var(--pollar-buttons-height, 44px);
923
+ height: var(--pollar-input-height, 44px);
966
924
  padding: 0 1rem;
967
- border-radius: 0.5rem;
925
+ border-radius: var(--pollar-input-border-radius, 0.5rem);
968
926
  border: 1px solid var(--pollar-border);
969
927
  background-color: var(--pollar-input-bg);
970
928
  color: var(--pollar-text);
@@ -1032,7 +990,7 @@
1032
990
  align-items: center;
1033
991
  justify-content: space-between;
1034
992
  padding: 0.875rem 1rem;
1035
- border-radius: 0.625rem;
993
+ border-radius: var(--pollar-card-border-radius, 10px);
1036
994
  border: 1px solid var(--pollar-border);
1037
995
  background-color: var(--pollar-input-bg);
1038
996
  cursor: pointer;
@@ -1105,7 +1063,7 @@
1105
1063
  align-items: center;
1106
1064
  justify-content: space-between;
1107
1065
  padding: 0.75rem 1rem;
1108
- border-radius: 0.5rem;
1066
+ border-radius: var(--pollar-card-border-radius, 10px);
1109
1067
  border: 1px solid var(--pollar-border);
1110
1068
  background-color: var(--pollar-input-bg);
1111
1069
  }
@@ -1118,7 +1076,7 @@
1118
1076
  }
1119
1077
  .pollar-ramp-copy-btn {
1120
1078
  padding: 0.25rem 0.625rem;
1121
- border-radius: 4px;
1079
+ border-radius: var(--pollar-buttons-border-radius, 6px);
1122
1080
  border: 1px solid var(--pollar-border);
1123
1081
  background: transparent;
1124
1082
  color: var(--pollar-muted);
@@ -1139,16 +1097,7 @@
1139
1097
 
1140
1098
  /* src/components/transaction-modal/TransactionModal.css */
1141
1099
  .pollar-tx-modal {
1142
- position: relative;
1143
- width: 100%;
1144
1100
  max-width: 420px;
1145
- border-radius: 1rem;
1146
- border: 1px solid var(--pollar-border);
1147
- padding: 1.75rem;
1148
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
1149
- background-color: var(--pollar-bg);
1150
- box-sizing: border-box;
1151
- font-family: inherit;
1152
1101
  }
1153
1102
  @keyframes pollar-tx-spin {
1154
1103
  to {
@@ -1204,9 +1153,9 @@
1204
1153
  width: 100%;
1205
1154
  }
1206
1155
  .pollar-tx-summary {
1207
- background: var(--pollar-input-bg, rgba(0,0,0,0.04));
1156
+ background: var(--pollar-input-bg);
1208
1157
  border: 1px solid var(--pollar-border);
1209
- border-radius: 10px;
1158
+ border-radius: var(--pollar-card-border-radius, 10px);
1210
1159
  padding: 1rem 1.25rem;
1211
1160
  margin-bottom: 1rem;
1212
1161
  }
@@ -1240,9 +1189,9 @@
1240
1189
  }
1241
1190
  .pollar-tx-meta-item {
1242
1191
  flex: 1;
1243
- background: var(--pollar-input-bg, rgba(0,0,0,0.04));
1192
+ background: var(--pollar-input-bg);
1244
1193
  border: 1px solid var(--pollar-border);
1245
- border-radius: 8px;
1194
+ border-radius: var(--pollar-card-border-radius, 10px);
1246
1195
  padding: 0.625rem 0.875rem;
1247
1196
  }
1248
1197
  .pollar-tx-meta-label {
@@ -1260,9 +1209,9 @@
1260
1209
  color: var(--pollar-text);
1261
1210
  }
1262
1211
  .pollar-tx-result {
1263
- background: var(--pollar-input-bg, rgba(0,0,0,0.04));
1212
+ background: var(--pollar-input-bg);
1264
1213
  border: 1px solid var(--pollar-border);
1265
- border-radius: 8px;
1214
+ border-radius: var(--pollar-card-border-radius, 10px);
1266
1215
  padding: 0.75rem 1rem;
1267
1216
  margin-bottom: 1rem;
1268
1217
  word-break: break-all;
@@ -1291,7 +1240,7 @@
1291
1240
  align-items: center;
1292
1241
  gap: 0.375rem;
1293
1242
  padding: 0.375rem 0.75rem;
1294
- border-radius: 6px;
1243
+ border-radius: var(--pollar-buttons-border-radius, 6px);
1295
1244
  border: 1px solid var(--pollar-border);
1296
1245
  background: none;
1297
1246
  font-size: 0.75rem;
@@ -1346,9 +1295,9 @@
1346
1295
  .pollar-tx-xdr-content {
1347
1296
  margin: 0.5rem 0 0;
1348
1297
  padding: 0.75rem;
1349
- background: var(--pollar-input-bg, rgba(0,0,0,0.04));
1298
+ background: var(--pollar-input-bg);
1350
1299
  border: 1px solid var(--pollar-border);
1351
- border-radius: 8px;
1300
+ border-radius: var(--pollar-card-border-radius, 10px);
1352
1301
  font-family: monospace;
1353
1302
  font-size: 0.6875rem;
1354
1303
  color: var(--pollar-text);
@@ -1372,9 +1321,9 @@
1372
1321
  .pollar-tx-error-details-content {
1373
1322
  margin: 0;
1374
1323
  padding: 0.75rem;
1375
- background: var(--pollar-input-bg, rgba(0,0,0,0.04));
1324
+ background: var(--pollar-input-bg);
1376
1325
  border: 1px solid var(--pollar-border);
1377
- border-radius: 8px;
1326
+ border-radius: var(--pollar-card-border-radius, 10px);
1378
1327
  font-family: monospace;
1379
1328
  font-size: 0.6875rem;
1380
1329
  color: var(--pollar-error-text);
@@ -1386,15 +1335,7 @@
1386
1335
 
1387
1336
  /* src/components/tx-history-modal/TxHistoryModal.css */
1388
1337
  .pollar-hist-modal {
1389
- width: 100%;
1390
1338
  max-width: 480px;
1391
- border-radius: 1rem;
1392
- border: 1px solid var(--pollar-border);
1393
- padding: 1.75rem;
1394
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
1395
- background-color: var(--pollar-bg);
1396
- box-sizing: border-box;
1397
- font-family: inherit;
1398
1339
  }
1399
1340
  .pollar-hist-list {
1400
1341
  display: flex;
@@ -1410,9 +1351,9 @@
1410
1351
  grid-template-rows: auto auto;
1411
1352
  column-gap: 0.75rem;
1412
1353
  row-gap: 0.125rem;
1413
- background: var(--pollar-input-bg, rgba(0,0,0,0.04));
1354
+ background: var(--pollar-input-bg);
1414
1355
  border: 1px solid var(--pollar-border);
1415
- border-radius: 10px;
1356
+ border-radius: var(--pollar-card-border-radius, 10px);
1416
1357
  padding: 0.75rem 1rem;
1417
1358
  }
1418
1359
  .pollar-hist-item-summary {
@@ -1454,6 +1395,17 @@
1454
1395
  background: rgba(107, 114, 128, 0.12);
1455
1396
  color: var(--pollar-muted);
1456
1397
  }
1398
+ .pollar-hist-item-explorer {
1399
+ display: inline-flex;
1400
+ align-items: center;
1401
+ gap: 3px;
1402
+ color: var(--pollar-muted);
1403
+ text-decoration: none;
1404
+ transition: color 150ms;
1405
+ }
1406
+ .pollar-hist-item-explorer:hover {
1407
+ color: var(--pollar-accent);
1408
+ }
1457
1409
  .pollar-hist-pagination {
1458
1410
  display: flex;
1459
1411
  align-items: center;
@@ -1471,7 +1423,7 @@
1471
1423
  .pollar-hist-page-btn {
1472
1424
  background: none;
1473
1425
  border: 1px solid var(--pollar-border);
1474
- border-radius: 6px;
1426
+ border-radius: var(--pollar-buttons-border-radius, 6px);
1475
1427
  padding: 4px 10px;
1476
1428
  font-size: 0.75rem;
1477
1429
  font-weight: 500;
@@ -1490,23 +1442,15 @@
1490
1442
 
1491
1443
  /* src/components/wallet-balance-modal/WalletBalanceModal.css */
1492
1444
  .pollar-bal-modal {
1493
- width: 100%;
1494
1445
  max-width: 380px;
1495
- border-radius: 1rem;
1496
- border: 1px solid var(--pollar-border);
1497
- padding: 1.75rem;
1498
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
1499
- background-color: var(--pollar-bg);
1500
- box-sizing: border-box;
1501
- font-family: inherit;
1502
1446
  }
1503
1447
  .pollar-bal-address {
1504
1448
  font-size: 0.75rem;
1505
1449
  font-family: monospace;
1506
1450
  color: var(--pollar-muted);
1507
- background: var(--pollar-input-bg, rgba(0,0,0,0.04));
1451
+ background: var(--pollar-input-bg);
1508
1452
  border: 1px solid var(--pollar-border);
1509
- border-radius: 6px;
1453
+ border-radius: var(--pollar-card-border-radius, 10px);
1510
1454
  padding: 0.375rem 0.75rem;
1511
1455
  margin-bottom: 1rem;
1512
1456
  overflow: hidden;
@@ -1523,9 +1467,9 @@
1523
1467
  display: flex;
1524
1468
  align-items: center;
1525
1469
  justify-content: space-between;
1526
- background: var(--pollar-input-bg, rgba(0,0,0,0.04));
1470
+ background: var(--pollar-input-bg);
1527
1471
  border: 1px solid var(--pollar-border);
1528
- border-radius: 10px;
1472
+ border-radius: var(--pollar-card-border-radius, 10px);
1529
1473
  padding: 0.75rem 1rem;
1530
1474
  }
1531
1475
  .pollar-bal-asset {
@@ -1588,7 +1532,7 @@
1588
1532
  align-items: center;
1589
1533
  gap: 8px;
1590
1534
  padding: 10px 16px;
1591
- border-radius: 8px;
1535
+ border-radius: 6px;
1592
1536
  color: #fff;
1593
1537
  font-size: 14px;
1594
1538
  font-weight: 500;
@@ -1613,7 +1557,7 @@
1613
1557
  right: 0;
1614
1558
  min-width: 180px;
1615
1559
  border: 1px solid;
1616
- border-radius: 8px;
1560
+ border-radius: 6px;
1617
1561
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
1618
1562
  overflow: hidden;
1619
1563
  z-index: 50;