@pollar/react 0.5.0 → 0.5.2

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 +215 -63
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.mts +117 -4
  4. package/dist/index.d.ts +117 -4
  5. package/dist/index.js +343 -139
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +338 -141
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -53,6 +53,28 @@
53
53
  color: var(--pollar-text);
54
54
  background: var(--pollar-border);
55
55
  }
56
+ .pollar-close-btn {
57
+ position: absolute;
58
+ top: 1rem;
59
+ right: 1rem;
60
+ display: flex;
61
+ align-items: center;
62
+ justify-content: center;
63
+ width: 2rem;
64
+ height: 2rem;
65
+ padding: 0;
66
+ border-radius: var(--pollar-buttons-border-radius, 6px);
67
+ border: 1px solid var(--pollar-border);
68
+ background-color: transparent;
69
+ color: var(--pollar-muted);
70
+ cursor: pointer;
71
+ transition: all 0.15s;
72
+ }
73
+ .pollar-close-btn:hover {
74
+ background-color: var(--pollar-input-bg);
75
+ color: var(--pollar-text);
76
+ border-color: var(--pollar-text);
77
+ }
56
78
  .pollar-modal-refresh-btn {
57
79
  background: none;
58
80
  border: 1px solid var(--pollar-border);
@@ -359,16 +381,16 @@
359
381
  .github-button {
360
382
  -webkit-appearance: none;
361
383
  appearance: none;
362
- background-color: #24292f;
363
- border: 1px solid rgba(240, 246, 252, 0.1);
384
+ background-color: var(--pollar-input-bg);
385
+ border: 1px solid var(--pollar-border);
364
386
  border-radius: var(--pollar-buttons-border-radius, 6px);
365
387
  box-sizing: border-box;
366
- color: #ffffff;
388
+ color: var(--pollar-text);
367
389
  cursor: pointer;
368
390
  display: inline-flex;
369
391
  align-items: center;
370
392
  justify-content: center;
371
- gap: 10px;
393
+ gap: 0.75rem;
372
394
  font-family:
373
395
  -apple-system,
374
396
  BlinkMacSystemFont,
@@ -376,42 +398,39 @@
376
398
  Helvetica,
377
399
  Arial,
378
400
  sans-serif;
379
- font-size: 14px;
401
+ font-size: 1rem;
380
402
  font-weight: 500;
381
- height: var(--pollar-buttons-height, 40px);
382
- letter-spacing: 0.25px;
403
+ height: var(--pollar-buttons-height, 44px);
404
+ letter-spacing: normal;
383
405
  outline: none;
384
406
  overflow: hidden;
385
- padding: 0 16px;
386
- transition: background-color 0.2s, box-shadow 0.2s;
407
+ padding: 0 1rem;
408
+ transition: transform 0.15s, box-shadow 0.15s;
387
409
  white-space: nowrap;
388
- width: auto;
389
- max-width: 400px;
390
- min-width: min-content;
410
+ width: 100%;
391
411
  user-select: none;
392
412
  }
393
413
  .github-button-icon {
394
414
  width: 20px;
395
415
  height: 20px;
396
- object-fit: contain;
397
416
  flex-shrink: 0;
398
417
  }
399
418
  .github-button-contents {
400
- flex-grow: 1;
419
+ flex-grow: 0;
401
420
  overflow: hidden;
402
421
  text-overflow: ellipsis;
403
422
  }
404
423
  .github-button:not(:disabled):hover {
405
- background-color: #32383f;
406
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
424
+ border-color: var(--pollar-accent);
425
+ color: var(--pollar-accent);
426
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
407
427
  }
408
428
  .github-button:not(:disabled):active {
409
- background-color: #3a4149;
429
+ transform: scale(0.99);
410
430
  }
411
431
  .github-button:disabled {
412
432
  cursor: default;
413
- background-color: #24292f61;
414
- border-color: rgba(240, 246, 252, 0.05);
433
+ opacity: 0.5;
415
434
  }
416
435
  .github-button:disabled .github-button-icon,
417
436
  .github-button:disabled .github-button-contents {
@@ -424,46 +443,41 @@
424
443
  -webkit-user-select: none;
425
444
  -ms-user-select: none;
426
445
  -webkit-appearance: none;
427
- background-color: WHITE;
446
+ background-color: var(--pollar-input-bg);
428
447
  background-image: none;
429
- border: 1px solid #747775;
430
- -webkit-border-radius: var(--pollar-buttons-border-radius, 4px);
431
- border-radius: var(--pollar-buttons-border-radius, 4px);
448
+ border: 1px solid var(--pollar-border);
449
+ -webkit-border-radius: var(--pollar-buttons-border-radius, 6px);
450
+ border-radius: var(--pollar-buttons-border-radius, 6px);
432
451
  -webkit-box-sizing: border-box;
433
452
  box-sizing: border-box;
434
- color: #1f1f1f;
453
+ color: var(--pollar-text);
435
454
  cursor: pointer;
436
455
  font-family:
437
- "Roboto",
438
- arial,
456
+ -apple-system,
457
+ BlinkMacSystemFont,
458
+ "Segoe UI",
439
459
  sans-serif;
440
- font-size: 14px;
441
- height: var(--pollar-buttons-height, 40px);
442
- letter-spacing: 0.25px;
460
+ font-size: 1rem;
461
+ font-weight: 600;
462
+ height: var(--pollar-buttons-height, 44px);
463
+ letter-spacing: normal;
443
464
  outline: none;
444
465
  overflow: hidden;
445
- padding: 0 12px;
466
+ padding: 0 1rem;
446
467
  position: relative;
447
468
  text-align: center;
448
- -webkit-transition:
449
- background-color .218s,
450
- border-color .218s,
451
- box-shadow .218s;
452
- transition:
453
- background-color .218s,
454
- border-color .218s,
455
- box-shadow .218s;
469
+ -webkit-transition: transform .15s, box-shadow .15s;
470
+ transition: transform .15s, box-shadow .15s;
456
471
  vertical-align: middle;
457
472
  white-space: nowrap;
458
- width: auto;
459
- max-width: 400px;
460
- min-width: min-content;
473
+ width: 100%;
461
474
  }
462
475
  .gsi-material-button .gsi-material-button-icon {
463
476
  height: 20px;
464
- margin-right: 10px;
477
+ margin-right: 0;
465
478
  min-width: 20px;
466
479
  width: 20px;
480
+ flex-shrink: 0;
467
481
  }
468
482
  .gsi-material-button .gsi-material-button-content-wrapper {
469
483
  -webkit-align-items: center;
@@ -474,21 +488,21 @@
474
488
  -webkit-flex-wrap: nowrap;
475
489
  flex-wrap: nowrap;
476
490
  height: 100%;
477
- justify-content: space-between;
491
+ justify-content: center;
492
+ gap: 0.75rem;
478
493
  position: relative;
479
494
  width: 100%;
480
495
  }
481
496
  .gsi-material-button .gsi-material-button-contents {
482
- -webkit-flex-grow: 1;
483
- flex-grow: 1;
484
497
  font-family:
485
- "Roboto",
486
- arial,
498
+ -apple-system,
499
+ BlinkMacSystemFont,
500
+ "Segoe UI",
487
501
  sans-serif;
488
502
  font-weight: 500;
489
503
  overflow: hidden;
490
504
  text-overflow: ellipsis;
491
- vertical-align: top;
505
+ flex-grow: 0;
492
506
  }
493
507
  .gsi-material-button .gsi-material-button-state {
494
508
  -webkit-transition: opacity .218s;
@@ -517,12 +531,16 @@
517
531
  opacity: 12%;
518
532
  }
519
533
  .gsi-material-button:not(:disabled):hover {
520
- -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
521
- box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
534
+ border-color: var(--pollar-accent);
535
+ color: var(--pollar-accent);
536
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
537
+ }
538
+ .gsi-material-button:not(:disabled):active {
539
+ transform: scale(0.99);
522
540
  }
523
541
  .gsi-material-button:not(:disabled):hover .gsi-material-button-state {
524
- background-color: #303030;
525
- opacity: 8%;
542
+ background-color: transparent;
543
+ opacity: 0;
526
544
  }
527
545
 
528
546
  /* src/components/login-modal/LoginModal.css */
@@ -544,14 +562,14 @@
544
562
  left: 1rem;
545
563
  display: flex;
546
564
  align-items: center;
547
- gap: 0.25rem;
548
- padding: 0.375rem 0.75rem;
565
+ justify-content: center;
566
+ width: 2rem;
567
+ height: 2rem;
568
+ padding: 0;
549
569
  border-radius: var(--pollar-buttons-border-radius, 6px);
550
570
  border: 1px solid var(--pollar-border);
551
571
  background-color: transparent;
552
572
  color: var(--pollar-muted);
553
- font-size: 0.875rem;
554
- font-weight: 500;
555
573
  cursor: pointer;
556
574
  transition: all 0.15s;
557
575
  }
@@ -679,7 +697,7 @@
679
697
  background-color: var(--pollar-bg);
680
698
  }
681
699
  .pollar-social-list {
682
- margin-bottom: 1rem;
700
+ margin-bottom: .625rem;
683
701
  display: flex;
684
702
  flex-direction: column;
685
703
  gap: 0.625rem;
@@ -720,6 +738,51 @@
720
738
  flex-direction: column;
721
739
  gap: 0.625rem;
722
740
  }
741
+ .pollar-wallet-list {
742
+ display: flex;
743
+ flex-direction: column;
744
+ gap: 0.25rem;
745
+ margin-top: 0.5rem;
746
+ }
747
+ .pollar-wallet-list-btn {
748
+ display: flex;
749
+ width: 100%;
750
+ align-items: center;
751
+ gap: 1rem;
752
+ padding: 0.75rem 0.75rem;
753
+ border-radius: var(--pollar-buttons-border-radius, 0.5rem);
754
+ border: 1px solid transparent;
755
+ background-color: transparent;
756
+ color: var(--pollar-text);
757
+ cursor: pointer;
758
+ transition: all 0.15s;
759
+ box-sizing: border-box;
760
+ text-align: left;
761
+ }
762
+ .pollar-wallet-list-btn:hover:not(:disabled) {
763
+ background-color: var(--pollar-input-bg);
764
+ border-color: var(--pollar-accent);
765
+ color: var(--pollar-accent);
766
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
767
+ }
768
+ .pollar-wallet-list-btn:active:not(:disabled) {
769
+ transform: scale(0.99);
770
+ }
771
+ .pollar-wallet-list-btn:disabled {
772
+ opacity: 0.5;
773
+ cursor: not-allowed;
774
+ }
775
+ .pollar-wallet-list-icon {
776
+ width: 2.75rem;
777
+ height: 2.75rem;
778
+ border-radius: 0.625rem;
779
+ flex-shrink: 0;
780
+ object-fit: contain;
781
+ }
782
+ .pollar-wallet-list-name {
783
+ font-size: 1rem;
784
+ font-weight: 500;
785
+ }
723
786
  .pollar-wallet-label {
724
787
  margin: 0;
725
788
  font-size: 0.6875rem;
@@ -735,14 +798,14 @@
735
798
  height: var(--pollar-buttons-height, 44px);
736
799
  align-items: center;
737
800
  justify-content: center;
738
- gap: 0.625rem;
801
+ gap: 0.75rem;
739
802
  border-radius: var(--pollar-buttons-border-radius, 0.5rem);
740
- border: 1px solid var(--pollar-accent);
741
- background-color: color-mix(in srgb, var(--pollar-accent) 6%, transparent);
742
- color: var(--pollar-accent);
803
+ border: 1px solid var(--pollar-border);
804
+ background-color: var(--pollar-input-bg);
805
+ color: var(--pollar-text);
743
806
  padding: 0 1rem;
744
807
  font-size: 1rem;
745
- font-weight: 600;
808
+ font-weight: 500;
746
809
  cursor: pointer;
747
810
  transition: all 0.15s;
748
811
  box-sizing: border-box;
@@ -758,6 +821,41 @@
758
821
  opacity: 0.5;
759
822
  cursor: not-allowed;
760
823
  }
824
+ .pollar-wallet-entry-btn {
825
+ display: flex;
826
+ width: 100%;
827
+ height: var(--pollar-buttons-height, 44px);
828
+ align-items: center;
829
+ justify-content: center;
830
+ gap: 0.625rem;
831
+ border-radius: var(--pollar-buttons-border-radius, 0.5rem);
832
+ border: 1px solid var(--pollar-border);
833
+ background-color: var(--pollar-input-bg);
834
+ color: var(--pollar-text);
835
+ padding: 0 1rem;
836
+ font-size: 1rem;
837
+ font-weight: 500;
838
+ cursor: pointer;
839
+ transition: all 0.15s;
840
+ box-sizing: border-box;
841
+ font-family:
842
+ -apple-system,
843
+ BlinkMacSystemFont,
844
+ "Segoe UI",
845
+ sans-serif;
846
+ }
847
+ .pollar-wallet-entry-btn:hover:not(:disabled) {
848
+ border-color: var(--pollar-accent);
849
+ color: var(--pollar-accent);
850
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
851
+ }
852
+ .pollar-wallet-entry-btn:active:not(:disabled) {
853
+ transform: scale(0.99);
854
+ }
855
+ .pollar-wallet-entry-btn:disabled {
856
+ opacity: 0.5;
857
+ cursor: not-allowed;
858
+ }
761
859
  .pollar-wallet-icon {
762
860
  width: 1.125rem;
763
861
  height: 1.125rem;
@@ -1041,6 +1139,7 @@
1041
1139
 
1042
1140
  /* src/components/transaction-modal/TransactionModal.css */
1043
1141
  .pollar-tx-modal {
1142
+ position: relative;
1044
1143
  width: 100%;
1045
1144
  max-width: 420px;
1046
1145
  border-radius: 1rem;
@@ -1051,6 +1150,59 @@
1051
1150
  box-sizing: border-box;
1052
1151
  font-family: inherit;
1053
1152
  }
1153
+ @keyframes pollar-tx-spin {
1154
+ to {
1155
+ transform: rotate(360deg);
1156
+ }
1157
+ }
1158
+ .pollar-tx-wallet-spinner {
1159
+ display: flex;
1160
+ flex-direction: column;
1161
+ align-items: center;
1162
+ gap: 0.875rem;
1163
+ padding: 1.25rem 0 0.5rem;
1164
+ }
1165
+ .pollar-tx-spinner-ring {
1166
+ position: relative;
1167
+ width: 88px;
1168
+ height: 88px;
1169
+ flex-shrink: 0;
1170
+ }
1171
+ .pollar-tx-spinner-svg {
1172
+ position: absolute;
1173
+ inset: 0;
1174
+ width: 88px;
1175
+ height: 88px;
1176
+ }
1177
+ .pollar-tx-spinner-rotating {
1178
+ animation: pollar-tx-spin 1.1s linear infinite;
1179
+ transform-origin: center;
1180
+ }
1181
+ .pollar-tx-wallet-icon {
1182
+ position: absolute;
1183
+ inset: 14px;
1184
+ border-radius: 10px;
1185
+ overflow: hidden;
1186
+ display: flex;
1187
+ align-items: center;
1188
+ justify-content: center;
1189
+ }
1190
+ .pollar-tx-wallet-img {
1191
+ width: 40px;
1192
+ height: 40px;
1193
+ object-fit: contain;
1194
+ border-radius: 10px;
1195
+ }
1196
+ .pollar-tx-spinner-label {
1197
+ font-size: 0.875rem;
1198
+ font-weight: 500;
1199
+ color: var(--pollar-muted);
1200
+ margin: 0;
1201
+ text-align: center;
1202
+ }
1203
+ .pollar-tx-retry-btn {
1204
+ width: 100%;
1205
+ }
1054
1206
  .pollar-tx-summary {
1055
1207
  background: var(--pollar-input-bg, rgba(0,0,0,0.04));
1056
1208
  border: 1px solid var(--pollar-border);
@@ -1399,7 +1551,7 @@
1399
1551
  font-variant-numeric: tabular-nums;
1400
1552
  }
1401
1553
 
1402
- /* src/WalletButton.css */
1554
+ /* src/components/wallet-button/WalletButton.css */
1403
1555
  .wallet-login-btn {
1404
1556
  display: flex;
1405
1557
  align-items: center;