@xswap-link/sdk 0.2.5 → 0.2.6

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 (30) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/index.css +234 -263
  3. package/dist/index.js +264 -253
  4. package/dist/index.mjs +264 -253
  5. package/package.json +1 -1
  6. package/src/components/Alert/index.tsx +1 -1
  7. package/src/components/Skeleton/index.tsx +3 -1
  8. package/src/components/TxConfigForm/BalanceComponent.tsx +1 -1
  9. package/src/components/TxConfigForm/Button.tsx +1 -1
  10. package/src/components/TxConfigForm/ChainListElement.tsx +2 -2
  11. package/src/components/TxConfigForm/Description.tsx +2 -2
  12. package/src/components/TxConfigForm/ErrorField.tsx +4 -2
  13. package/src/components/TxConfigForm/FeesDetails.tsx +21 -21
  14. package/src/components/TxConfigForm/Form.tsx +2 -2
  15. package/src/components/TxConfigForm/History.tsx +5 -5
  16. package/src/components/TxConfigForm/HistoryCard.tsx +33 -40
  17. package/src/components/TxConfigForm/PoweredBy.tsx +2 -2
  18. package/src/components/TxConfigForm/Settings.tsx +33 -27
  19. package/src/components/TxConfigForm/Summary.tsx +24 -23
  20. package/src/components/TxConfigForm/SwapPanel.tsx +11 -11
  21. package/src/components/TxConfigForm/TokenPicker.tsx +36 -34
  22. package/src/components/TxConfigForm/TopBar.tsx +8 -8
  23. package/src/components/TxConfigForm/UsdPrice.tsx +2 -2
  24. package/src/components/TxConfigForm/index.tsx +6 -6
  25. package/src/components/TxStatusButton/index.tsx +31 -27
  26. package/src/components/UnknownTokenLogo/UnknownTokenLogo.tsx +1 -1
  27. package/src/components/global.css +7 -5
  28. package/src/components/icons/CircularProgressIcon.tsx +1 -1
  29. package/src/config/init.tsx +19 -18
  30. package/tailwind.config.js +1 -0
package/dist/index.css CHANGED
@@ -325,704 +325,693 @@ video {
325
325
  --tw-contain-paint: ;
326
326
  --tw-contain-style: ;
327
327
  }
328
- .fixed {
328
+ .xpay-global-border {
329
+ border: 1px solid rgba(255, 255, 255, 0.1);
330
+ }
331
+ .xpay-fixed {
329
332
  position: fixed;
330
333
  }
331
- .absolute {
334
+ .xpay-absolute {
332
335
  position: absolute;
333
336
  }
334
- .relative {
337
+ .xpay-relative {
335
338
  position: relative;
336
339
  }
337
- .bottom-0 {
340
+ .xpay-bottom-0 {
338
341
  bottom: 0px;
339
342
  }
340
- .left-0 {
343
+ .xpay-left-0 {
341
344
  left: 0px;
342
345
  }
343
- .right-0 {
346
+ .xpay-right-0 {
344
347
  right: 0px;
345
348
  }
346
- .right-4 {
349
+ .xpay-right-4 {
347
350
  right: 1rem;
348
351
  }
349
- .right-\[50\%\] {
352
+ .xpay-right-\[50\%\] {
350
353
  right: 50%;
351
354
  }
352
- .top-0 {
355
+ .xpay-top-0 {
353
356
  top: 0px;
354
357
  }
355
- .top-10 {
358
+ .xpay-top-10 {
356
359
  top: 2.5rem;
357
360
  }
358
- .top-4 {
361
+ .xpay-top-4 {
359
362
  top: 1rem;
360
363
  }
361
- .top-\[46px\] {
364
+ .xpay-top-\[46px\] {
362
365
  top: 46px;
363
366
  }
364
- .z-10 {
367
+ .xpay-z-10 {
365
368
  z-index: 10;
366
369
  }
367
- .z-20 {
370
+ .xpay-z-20 {
368
371
  z-index: 20;
369
372
  }
370
- .z-\[1\] {
373
+ .xpay-z-\[1\] {
371
374
  z-index: 1;
372
375
  }
373
- .z-\[999\] {
376
+ .xpay-z-\[999\] {
374
377
  z-index: 999;
375
378
  }
376
- .mx-0 {
379
+ .xpay-mx-0 {
377
380
  margin-left: 0px;
378
381
  margin-right: 0px;
379
382
  }
380
- .mx-1 {
383
+ .xpay-mx-1 {
381
384
  margin-left: 0.25rem;
382
385
  margin-right: 0.25rem;
383
386
  }
384
- .mx-1\.5 {
387
+ .xpay-mx-1\.5 {
385
388
  margin-left: 0.375rem;
386
389
  margin-right: 0.375rem;
387
390
  }
388
- .mx-2 {
391
+ .xpay-mx-2 {
389
392
  margin-left: 0.5rem;
390
393
  margin-right: 0.5rem;
391
394
  }
392
- .mx-\[-24px\] {
395
+ .xpay-mx-\[-24px\] {
393
396
  margin-left: -24px;
394
397
  margin-right: -24px;
395
398
  }
396
- .mx-auto {
399
+ .xpay-mx-auto {
397
400
  margin-left: auto;
398
401
  margin-right: auto;
399
402
  }
400
- .my-0 {
403
+ .xpay-my-0 {
401
404
  margin-top: 0px;
402
405
  margin-bottom: 0px;
403
406
  }
404
- .my-3 {
407
+ .xpay-my-3 {
405
408
  margin-top: 0.75rem;
406
409
  margin-bottom: 0.75rem;
407
410
  }
408
- .my-4 {
411
+ .xpay-my-4 {
409
412
  margin-top: 1rem;
410
413
  margin-bottom: 1rem;
411
414
  }
412
- .mb-1 {
415
+ .xpay-mb-1 {
413
416
  margin-bottom: 0.25rem;
414
417
  }
415
- .mb-2 {
418
+ .xpay-mb-2 {
416
419
  margin-bottom: 0.5rem;
417
420
  }
418
- .mb-4 {
421
+ .xpay-mb-4 {
419
422
  margin-bottom: 1rem;
420
423
  }
421
- .ml-1 {
424
+ .xpay-ml-1 {
422
425
  margin-left: 0.25rem;
423
426
  }
424
- .ml-2 {
427
+ .xpay-ml-2 {
425
428
  margin-left: 0.5rem;
426
429
  }
427
- .mr-1 {
430
+ .xpay-mr-1 {
428
431
  margin-right: 0.25rem;
429
432
  }
430
- .mt-4 {
433
+ .xpay-mt-4 {
431
434
  margin-top: 1rem;
432
435
  }
433
- .box-border {
436
+ .xpay-box-border {
434
437
  box-sizing: border-box;
435
438
  }
436
- .block {
439
+ .xpay-block {
437
440
  display: block;
438
441
  }
439
- .flex {
442
+ .xpay-flex {
440
443
  display: flex;
441
444
  }
442
- .inline-flex {
445
+ .xpay-inline-flex {
443
446
  display: inline-flex;
444
447
  }
445
- .h-14 {
448
+ .xpay-h-14 {
446
449
  height: 3.5rem;
447
450
  }
448
- .h-3 {
451
+ .xpay-h-3 {
449
452
  height: 0.75rem;
450
453
  }
451
- .h-3\.5 {
454
+ .xpay-h-3\.5 {
452
455
  height: 0.875rem;
453
456
  }
454
- .h-4 {
457
+ .xpay-h-4 {
455
458
  height: 1rem;
456
459
  }
457
- .h-5 {
460
+ .xpay-h-5 {
458
461
  height: 1.25rem;
459
462
  }
460
- .h-6 {
463
+ .xpay-h-6 {
461
464
  height: 1.5rem;
462
465
  }
463
- .h-7 {
466
+ .xpay-h-7 {
464
467
  height: 1.75rem;
465
468
  }
466
- .h-8 {
469
+ .xpay-h-8 {
467
470
  height: 2rem;
468
471
  }
469
- .h-9 {
472
+ .xpay-h-9 {
470
473
  height: 2.25rem;
471
474
  }
472
- .h-96 {
475
+ .xpay-h-96 {
473
476
  height: 24rem;
474
477
  }
475
- .h-\[2px\] {
478
+ .xpay-h-\[2px\] {
476
479
  height: 2px;
477
480
  }
478
- .h-\[30vh\] {
481
+ .xpay-h-\[30vh\] {
479
482
  height: 30vh;
480
483
  }
481
- .h-\[36px\] {
484
+ .xpay-h-\[36px\] {
482
485
  height: 36px;
483
486
  }
484
- .h-\[41px\] {
487
+ .xpay-h-\[41px\] {
485
488
  height: 41px;
486
489
  }
487
- .h-\[70\%\] {
490
+ .xpay-h-\[70\%\] {
488
491
  height: 70%;
489
492
  }
490
- .h-\[9px\] {
493
+ .xpay-h-\[9px\] {
491
494
  height: 9px;
492
495
  }
493
- .h-full {
496
+ .xpay-h-full {
494
497
  height: 100%;
495
498
  }
496
- .h-px {
499
+ .xpay-h-px {
497
500
  height: 1px;
498
501
  }
499
- .max-h-\[40vh\] {
502
+ .xpay-max-h-\[40vh\] {
500
503
  max-height: 40vh;
501
504
  }
502
- .max-h-\[70\%\] {
505
+ .xpay-max-h-\[70\%\] {
503
506
  max-height: 70%;
504
507
  }
505
- .min-h-\[26px\] {
508
+ .xpay-min-h-\[26px\] {
506
509
  min-height: 26px;
507
510
  }
508
- .w-1\/2 {
511
+ .xpay-w-1\/2 {
509
512
  width: 50%;
510
513
  }
511
- .w-10 {
514
+ .xpay-w-10 {
512
515
  width: 2.5rem;
513
516
  }
514
- .w-12 {
517
+ .xpay-w-12 {
515
518
  width: 3rem;
516
519
  }
517
- .w-14 {
520
+ .xpay-w-14 {
518
521
  width: 3.5rem;
519
522
  }
520
- .w-20 {
523
+ .xpay-w-20 {
521
524
  width: 5rem;
522
525
  }
523
- .w-3 {
526
+ .xpay-w-3 {
524
527
  width: 0.75rem;
525
528
  }
526
- .w-3\.5 {
529
+ .xpay-w-3\.5 {
527
530
  width: 0.875rem;
528
531
  }
529
- .w-4 {
532
+ .xpay-w-4 {
530
533
  width: 1rem;
531
534
  }
532
- .w-5 {
535
+ .xpay-w-5 {
533
536
  width: 1.25rem;
534
537
  }
535
- .w-6 {
538
+ .xpay-w-6 {
536
539
  width: 1.5rem;
537
540
  }
538
- .w-7 {
541
+ .xpay-w-7 {
539
542
  width: 1.75rem;
540
543
  }
541
- .w-8 {
544
+ .xpay-w-8 {
542
545
  width: 2rem;
543
546
  }
544
- .w-9 {
547
+ .xpay-w-9 {
545
548
  width: 2.25rem;
546
549
  }
547
- .w-\[100\%\+48px\] {
550
+ .xpay-w-\[100\%\+48px\] {
548
551
  width: 100%+48px;
549
552
  }
550
- .w-\[100px\] {
553
+ .xpay-w-\[100px\] {
551
554
  width: 100px;
552
555
  }
553
- .w-\[15px\] {
556
+ .xpay-w-\[15px\] {
554
557
  width: 15px;
555
558
  }
556
- .w-\[310px\] {
559
+ .xpay-w-\[310px\] {
557
560
  width: 310px;
558
561
  }
559
- .w-\[452px\] {
562
+ .xpay-w-\[452px\] {
560
563
  width: 452px;
561
564
  }
562
- .w-full {
565
+ .xpay-w-full {
563
566
  width: 100%;
564
567
  }
565
- .min-w-60 {
568
+ .xpay-min-w-60 {
566
569
  min-width: 15rem;
567
570
  }
568
- .min-w-\[26px\] {
571
+ .xpay-min-w-\[26px\] {
569
572
  min-width: 26px;
570
573
  }
571
- .max-w-full {
574
+ .xpay-max-w-full {
572
575
  max-width: 100%;
573
576
  }
574
- .grow {
577
+ .xpay-grow {
575
578
  flex-grow: 1;
576
579
  }
577
- .translate-x-1\/2 {
580
+ .xpay-translate-x-1\/2 {
578
581
  --tw-translate-x: 50%;
579
582
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
580
583
  }
581
- .translate-x-\[12px\] {
584
+ .xpay-translate-x-\[12px\] {
582
585
  --tw-translate-x: 12px;
583
586
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
584
587
  }
585
- .translate-y-\[-4px\] {
588
+ .xpay-translate-y-\[-4px\] {
586
589
  --tw-translate-y: -4px;
587
590
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
588
591
  }
589
- .translate-y-\[-60\%\] {
592
+ .xpay-translate-y-\[-60\%\] {
590
593
  --tw-translate-y: -60%;
591
594
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
592
595
  }
593
- @keyframes pulse {
596
+ @keyframes xpay-pulse {
594
597
  50% {
595
598
  opacity: .5;
596
599
  }
597
600
  }
598
- .animate-pulse {
599
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
600
- }
601
- @keyframes spin {
602
- to {
603
- transform: rotate(360deg);
604
- }
605
- }
606
- .animate-spin-slow {
607
- animation: spin 3s linear infinite;
601
+ .xpay-animate-pulse {
602
+ animation: xpay-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
608
603
  }
609
- .cursor-pointer {
604
+ .xpay-cursor-pointer {
610
605
  cursor: pointer;
611
606
  }
612
- .flex-col {
607
+ .xpay-flex-col {
613
608
  flex-direction: column;
614
609
  }
615
- .flex-wrap {
610
+ .xpay-flex-wrap {
616
611
  flex-wrap: wrap;
617
612
  }
618
- .items-start {
613
+ .xpay-items-start {
619
614
  align-items: flex-start;
620
615
  }
621
- .items-end {
616
+ .xpay-items-end {
622
617
  align-items: flex-end;
623
618
  }
624
- .items-center {
619
+ .xpay-items-center {
625
620
  align-items: center;
626
621
  }
627
- .justify-center {
622
+ .xpay-justify-center {
628
623
  justify-content: center;
629
624
  }
630
- .justify-between {
625
+ .xpay-justify-between {
631
626
  justify-content: space-between;
632
627
  }
633
- .gap-1 {
628
+ .xpay-gap-1 {
634
629
  gap: 0.25rem;
635
630
  }
636
- .gap-2 {
631
+ .xpay-gap-2 {
637
632
  gap: 0.5rem;
638
633
  }
639
- .gap-2\.5 {
634
+ .xpay-gap-2\.5 {
640
635
  gap: 0.625rem;
641
636
  }
642
- .gap-3 {
637
+ .xpay-gap-3 {
643
638
  gap: 0.75rem;
644
639
  }
645
- .gap-4 {
640
+ .xpay-gap-4 {
646
641
  gap: 1rem;
647
642
  }
648
- .overflow-auto {
643
+ .xpay-overflow-auto {
649
644
  overflow: auto;
650
645
  }
651
- .overflow-hidden {
646
+ .xpay-overflow-hidden {
652
647
  overflow: hidden;
653
648
  }
654
- .overflow-scroll {
649
+ .xpay-overflow-scroll {
655
650
  overflow: scroll;
656
651
  }
657
- .overflow-x-hidden {
652
+ .xpay-overflow-x-hidden {
658
653
  overflow-x: hidden;
659
654
  }
660
- .overflow-y-scroll {
655
+ .xpay-overflow-y-scroll {
661
656
  overflow-y: scroll;
662
657
  }
663
- .overflow-ellipsis {
658
+ .xpay-overflow-ellipsis {
664
659
  text-overflow: ellipsis;
665
660
  }
666
- .text-ellipsis {
661
+ .xpay-text-ellipsis {
667
662
  text-overflow: ellipsis;
668
663
  }
669
- .whitespace-nowrap {
664
+ .xpay-whitespace-nowrap {
670
665
  white-space: nowrap;
671
666
  }
672
- .rounded {
667
+ .xpay-rounded {
673
668
  border-radius: 0.25rem;
674
669
  }
675
- .rounded-2xl {
670
+ .xpay-rounded-2xl {
676
671
  border-radius: 1rem;
677
672
  }
678
- .rounded-3xl {
673
+ .xpay-rounded-3xl {
679
674
  border-radius: 1.5rem;
680
675
  }
681
- .rounded-full {
676
+ .xpay-rounded-full {
682
677
  border-radius: 9999px;
683
678
  }
684
- .rounded-lg {
679
+ .xpay-rounded-lg {
685
680
  border-radius: 0.5rem;
686
681
  }
687
- .rounded-xl {
682
+ .xpay-rounded-xl {
688
683
  border-radius: 0.75rem;
689
684
  }
690
- .border {
685
+ .xpay-border {
691
686
  border-width: 1px;
692
687
  }
693
- .border-2 {
688
+ .xpay-border-2 {
694
689
  border-width: 2px;
695
690
  }
696
- .border-solid {
691
+ .xpay-border-solid {
697
692
  border-style: solid;
698
693
  }
699
- .border-none {
694
+ .xpay-border-none {
700
695
  border-style: none;
701
696
  }
702
- .border-\[rgba\(255\,255\,255\,0\.1\)\] {
697
+ .xpay-border-\[rgba\(255\,255\,255\,0\.1\)\] {
703
698
  border-color: rgba(255, 255, 255, 0.1);
704
699
  }
705
- .border-\[rgba\(255\,255\,255\,0\.2\)\] {
700
+ .xpay-border-\[rgba\(255\,255\,255\,0\.2\)\] {
706
701
  border-color: rgba(255, 255, 255, 0.2);
707
702
  }
708
- .border-\[rgba\(54\,129\,198\,1\)\] {
703
+ .xpay-border-\[rgba\(54\,129\,198\,1\)\] {
709
704
  border-color: rgba(54, 129, 198, 1);
710
705
  }
711
- .border-\[rgba\(82\,82\,82\,1\)\] {
706
+ .xpay-border-\[rgba\(82\,82\,82\,1\)\] {
712
707
  border-color: rgba(82, 82, 82, 1);
713
708
  }
714
- .border-transparent {
709
+ .xpay-border-transparent {
715
710
  border-color: transparent;
716
711
  }
717
- .border-x_alert {
712
+ .xpay-border-x_alert {
718
713
  --tw-border-opacity: 1;
719
714
  border-color: rgb(255 183 77 / var(--tw-border-opacity));
720
715
  }
721
- .border-x_blue_dark {
716
+ .xpay-border-x_blue_dark {
722
717
  border-color: rgba(43, 74, 157, 1);
723
718
  }
724
- .border-x_error_border {
719
+ .xpay-border-x_error_border {
725
720
  border-color: rgba(255, 111, 0, 1);
726
721
  }
727
- .border-x_green_dark {
722
+ .xpay-border-x_green_dark {
728
723
  border-color: rgba(46, 125, 50, 1);
729
724
  }
730
- .bg-\[\#272e40\] {
725
+ .xpay-bg-\[\#272e40\] {
731
726
  --tw-bg-opacity: 1;
732
727
  background-color: rgb(39 46 64 / var(--tw-bg-opacity));
733
728
  }
734
- .bg-\[rgb\(15\,15\,15\)\] {
729
+ .xpay-bg-\[rgb\(15\,15\,15\)\] {
735
730
  --tw-bg-opacity: 1;
736
731
  background-color: rgb(15 15 15 / var(--tw-bg-opacity));
737
732
  }
738
- .bg-\[rgb\(35\,35\,35\)\] {
733
+ .xpay-bg-\[rgb\(35\,35\,35\)\] {
739
734
  --tw-bg-opacity: 1;
740
735
  background-color: rgb(35 35 35 / var(--tw-bg-opacity));
741
736
  }
742
- .bg-\[rgba\(0\,0\,0\,0\.8\)\] {
737
+ .xpay-bg-\[rgba\(0\,0\,0\,0\.8\)\] {
743
738
  background-color: rgba(0, 0, 0, 0.8);
744
739
  }
745
- .bg-\[rgba\(15\,15\,15\,1\)\] {
740
+ .xpay-bg-\[rgba\(15\,15\,15\,1\)\] {
746
741
  background-color: rgba(15, 15, 15, 1);
747
742
  }
748
- .bg-\[rgba\(2\,2\,2\,1\)\] {
743
+ .xpay-bg-\[rgba\(2\,2\,2\,1\)\] {
749
744
  background-color: rgba(2, 2, 2, 1);
750
745
  }
751
- .bg-\[rgba\(255\,255\,255\,0\.1\)\] {
746
+ .xpay-bg-\[rgba\(255\,255\,255\,0\.1\)\] {
752
747
  background-color: rgba(255, 255, 255, 0.1);
753
748
  }
754
- .bg-\[rgba\(255\,255\,255\,0\.15\)\] {
749
+ .xpay-bg-\[rgba\(255\,255\,255\,0\.15\)\] {
755
750
  background-color: rgba(255, 255, 255, 0.15);
756
751
  }
757
- .bg-\[rgba\(255\,255\,255\,0\.3\)\] {
752
+ .xpay-bg-\[rgba\(255\,255\,255\,0\.3\)\] {
758
753
  background-color: rgba(255, 255, 255, 0.3);
759
754
  }
760
- .bg-\[rgba\(39\,39\,39\,1\)\] {
755
+ .xpay-bg-\[rgba\(39\,39\,39\,1\)\] {
761
756
  background-color: rgba(39, 39, 39, 1);
762
757
  }
763
- .bg-black {
758
+ .xpay-bg-black {
764
759
  --tw-bg-opacity: 1;
765
760
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
766
761
  }
767
- .bg-current {
762
+ .xpay-bg-current {
768
763
  background-color: currentColor;
769
764
  }
770
- .bg-transparent {
765
+ .xpay-bg-transparent {
771
766
  background-color: transparent;
772
767
  }
773
- .bg-white {
768
+ .xpay-bg-white {
774
769
  --tw-bg-opacity: 1;
775
770
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
776
771
  }
777
- .bg-x_blue {
772
+ .xpay-bg-x_blue {
778
773
  --tw-bg-opacity: 1;
779
774
  background-color: rgb(51 150 255 / var(--tw-bg-opacity));
780
775
  }
781
- .bg-x_error_background {
776
+ .xpay-bg-x_error_background {
782
777
  background-color: rgba(255, 202, 40, 0.1);
783
778
  }
784
- .bg-gradient-to-l {
779
+ .xpay-bg-gradient-to-l {
785
780
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
786
781
  }
787
- .bg-gradient-to-r {
782
+ .xpay-bg-gradient-to-r {
788
783
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
789
784
  }
790
- .from-\[\#3681c6\] {
785
+ .xpay-from-\[\#3681c6\] {
791
786
  --tw-gradient-from: #3681c6 var(--tw-gradient-from-position);
792
787
  --tw-gradient-to: rgb(54 129 198 / 0) var(--tw-gradient-to-position);
793
788
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
794
789
  }
795
- .from-\[rgba\(54\,129\,198\,0\.2\)\] {
790
+ .xpay-from-\[rgba\(54\,129\,198\,0\.2\)\] {
796
791
  --tw-gradient-from: rgba(54,129,198,0.2) var(--tw-gradient-from-position);
797
792
  --tw-gradient-to: rgba(54, 129, 198, 0) var(--tw-gradient-to-position);
798
793
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
799
794
  }
800
- .from-\[rgba\(54\,129\,198\,1\)\] {
795
+ .xpay-from-\[rgba\(54\,129\,198\,1\)\] {
801
796
  --tw-gradient-from: rgba(54,129,198,1) var(--tw-gradient-from-position);
802
797
  --tw-gradient-to: rgba(54, 129, 198, 0) var(--tw-gradient-to-position);
803
798
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
804
799
  }
805
- .from-\[rgba\(76\,175\,80\,0\.2\)\] {
800
+ .xpay-from-\[rgba\(76\,175\,80\,0\.2\)\] {
806
801
  --tw-gradient-from: rgba(76,175,80,0.2) var(--tw-gradient-from-position);
807
802
  --tw-gradient-to: rgba(76, 175, 80, 0) var(--tw-gradient-to-position);
808
803
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
809
804
  }
810
- .from-x_blue_light {
805
+ .xpay-from-x_blue_light {
811
806
  --tw-gradient-from: rgba(54,129,198,1) var(--tw-gradient-from-position);
812
807
  --tw-gradient-to: rgba(54, 129, 198, 0) var(--tw-gradient-to-position);
813
808
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
814
809
  }
815
- .to-\[\#2b4a9d\] {
810
+ .xpay-to-\[\#2b4a9d\] {
816
811
  --tw-gradient-to: #2b4a9d var(--tw-gradient-to-position);
817
812
  }
818
- .to-\[rgba\(43\,74\,157\,0\.2\)\] {
813
+ .xpay-to-\[rgba\(43\,74\,157\,0\.2\)\] {
819
814
  --tw-gradient-to: rgba(43,74,157,0.2) var(--tw-gradient-to-position);
820
815
  }
821
- .to-\[rgba\(43\,74\,157\,1\)\] {
816
+ .xpay-to-\[rgba\(43\,74\,157\,1\)\] {
822
817
  --tw-gradient-to: rgba(43,74,157,1) var(--tw-gradient-to-position);
823
818
  }
824
- .to-\[rgba\(46\,125\,50\,0\.2\)\] {
819
+ .xpay-to-\[rgba\(46\,125\,50\,0\.2\)\] {
825
820
  --tw-gradient-to: rgba(46,125,50,0.2) var(--tw-gradient-to-position);
826
821
  }
827
- .to-x_blue_dark {
822
+ .xpay-to-x_blue_dark {
828
823
  --tw-gradient-to: rgba(43,74,157,1) var(--tw-gradient-to-position);
829
824
  }
830
- .bg-clip-text {
825
+ .xpay-bg-clip-text {
831
826
  background-clip: text;
832
827
  }
833
- .p-0 {
828
+ .xpay-p-0 {
834
829
  padding: 0px;
835
830
  }
836
- .p-1 {
837
- padding: 0.25rem;
838
- }
839
- .p-2 {
831
+ .xpay-p-2 {
840
832
  padding: 0.5rem;
841
833
  }
842
- .p-3 {
834
+ .xpay-p-3 {
843
835
  padding: 0.75rem;
844
836
  }
845
- .p-4 {
837
+ .xpay-p-4 {
846
838
  padding: 1rem;
847
839
  }
848
- .p-5 {
840
+ .xpay-p-5 {
849
841
  padding: 1.25rem;
850
842
  }
851
- .p-6 {
843
+ .xpay-p-6 {
852
844
  padding: 1.5rem;
853
845
  }
854
- .p-\[5px\] {
855
- padding: 5px;
856
- }
857
- .px-0 {
846
+ .xpay-px-0 {
858
847
  padding-left: 0px;
859
848
  padding-right: 0px;
860
849
  }
861
- .px-12 {
850
+ .xpay-px-12 {
862
851
  padding-left: 3rem;
863
852
  padding-right: 3rem;
864
853
  }
865
- .px-2 {
854
+ .xpay-px-2 {
866
855
  padding-left: 0.5rem;
867
856
  padding-right: 0.5rem;
868
857
  }
869
- .px-3 {
858
+ .xpay-px-3 {
870
859
  padding-left: 0.75rem;
871
860
  padding-right: 0.75rem;
872
861
  }
873
- .px-4 {
862
+ .xpay-px-4 {
874
863
  padding-left: 1rem;
875
864
  padding-right: 1rem;
876
865
  }
877
- .px-\[24px\] {
866
+ .xpay-px-\[24px\] {
878
867
  padding-left: 24px;
879
868
  padding-right: 24px;
880
869
  }
881
- .py-0 {
870
+ .xpay-py-0 {
882
871
  padding-top: 0px;
883
872
  padding-bottom: 0px;
884
873
  }
885
- .py-0\.5 {
874
+ .xpay-py-0\.5 {
886
875
  padding-top: 0.125rem;
887
876
  padding-bottom: 0.125rem;
888
877
  }
889
- .py-1 {
878
+ .xpay-py-1 {
890
879
  padding-top: 0.25rem;
891
880
  padding-bottom: 0.25rem;
892
881
  }
893
- .py-2 {
882
+ .xpay-py-2 {
894
883
  padding-top: 0.5rem;
895
884
  padding-bottom: 0.5rem;
896
885
  }
897
- .py-4 {
886
+ .xpay-py-4 {
898
887
  padding-top: 1rem;
899
888
  padding-bottom: 1rem;
900
889
  }
901
- .text-left {
890
+ .xpay-text-left {
902
891
  text-align: left;
903
892
  }
904
- .text-center {
893
+ .xpay-text-center {
905
894
  text-align: center;
906
895
  }
907
- .text-right {
896
+ .xpay-text-right {
908
897
  text-align: right;
909
898
  }
910
- .align-middle {
899
+ .xpay-align-middle {
911
900
  vertical-align: middle;
912
901
  }
913
- .text-2xl {
902
+ .xpay-text-2xl {
914
903
  font-size: 1.5rem;
915
904
  line-height: 2rem;
916
905
  }
917
- .text-\[10px\] {
906
+ .xpay-text-\[10px\] {
918
907
  font-size: 10px;
919
908
  }
920
- .text-\[11px\] {
909
+ .xpay-text-\[11px\] {
921
910
  font-size: 11px;
922
911
  }
923
- .text-\[15px\] {
912
+ .xpay-text-\[15px\] {
924
913
  font-size: 15px;
925
914
  }
926
- .text-base {
915
+ .xpay-text-base {
927
916
  font-size: 1rem;
928
917
  line-height: 1.5rem;
929
918
  }
930
- .text-sm {
919
+ .xpay-text-sm {
931
920
  font-size: 0.875rem;
932
921
  line-height: 1.25rem;
933
922
  }
934
- .text-xl {
923
+ .xpay-text-xl {
935
924
  font-size: 1.25rem;
936
925
  line-height: 1.75rem;
937
926
  }
938
- .text-xs {
927
+ .xpay-text-xs {
939
928
  font-size: 0.75rem;
940
929
  line-height: 1rem;
941
930
  }
942
- .font-light {
931
+ .xpay-font-light {
943
932
  font-weight: 300;
944
933
  }
945
- .font-medium {
934
+ .xpay-font-medium {
946
935
  font-weight: 500;
947
936
  }
948
- .font-normal {
937
+ .xpay-font-normal {
949
938
  font-weight: 400;
950
939
  }
951
- .leading-\[10px\] {
940
+ .xpay-leading-\[10px\] {
952
941
  line-height: 10px;
953
942
  }
954
- .leading-\[16px\] {
943
+ .xpay-leading-\[16px\] {
955
944
  line-height: 16px;
956
945
  }
957
- .leading-\[41px\] {
946
+ .xpay-leading-\[41px\] {
958
947
  line-height: 41px;
959
948
  }
960
- .leading-none {
949
+ .xpay-leading-none {
961
950
  line-height: 1;
962
951
  }
963
- .text-\[\#888\] {
952
+ .xpay-text-\[\#888\] {
964
953
  --tw-text-opacity: 1;
965
954
  color: rgb(136 136 136 / var(--tw-text-opacity));
966
955
  }
967
- .text-\[\#e0e7fa\] {
956
+ .xpay-text-\[\#e0e7fa\] {
968
957
  --tw-text-opacity: 1;
969
958
  color: rgb(224 231 250 / var(--tw-text-opacity));
970
959
  }
971
- .text-\[\#ffa726\] {
960
+ .xpay-text-\[\#ffa726\] {
972
961
  --tw-text-opacity: 1;
973
962
  color: rgb(255 167 38 / var(--tw-text-opacity));
974
963
  }
975
- .text-\[rgb\(100\,200\,100\)\] {
964
+ .xpay-text-\[rgb\(100\,200\,100\)\] {
976
965
  --tw-text-opacity: 1;
977
966
  color: rgb(100 200 100 / var(--tw-text-opacity));
978
967
  }
979
- .text-\[rgb\(158\,158\,158\)\] {
968
+ .xpay-text-\[rgb\(158\,158\,158\)\] {
980
969
  --tw-text-opacity: 1;
981
970
  color: rgb(158 158 158 / var(--tw-text-opacity));
982
971
  }
983
- .text-\[rgb\(250\,200\,100\)\] {
972
+ .xpay-text-\[rgb\(250\,200\,100\)\] {
984
973
  --tw-text-opacity: 1;
985
974
  color: rgb(250 200 100 / var(--tw-text-opacity));
986
975
  }
987
- .text-\[rgb\(255\,100\,100\)\] {
976
+ .xpay-text-\[rgb\(255\,100\,100\)\] {
988
977
  --tw-text-opacity: 1;
989
978
  color: rgb(255 100 100 / var(--tw-text-opacity));
990
979
  }
991
- .text-\[rgba\(255\,255\,255\,0\.2\)\] {
980
+ .xpay-text-\[rgba\(255\,255\,255\,0\.2\)\] {
992
981
  color: rgba(255, 255, 255, 0.2);
993
982
  }
994
- .text-\[rgba\(255\,255\,255\,0\.6\)\] {
983
+ .xpay-text-\[rgba\(255\,255\,255\,0\.6\)\] {
995
984
  color: rgba(255, 255, 255, 0.6);
996
985
  }
997
- .text-black {
986
+ .xpay-text-black {
998
987
  --tw-text-opacity: 1;
999
988
  color: rgb(0 0 0 / var(--tw-text-opacity));
1000
989
  }
1001
- .text-transparent {
990
+ .xpay-text-transparent {
1002
991
  color: transparent;
1003
992
  }
1004
- .text-white {
993
+ .xpay-text-white {
1005
994
  --tw-text-opacity: 1;
1006
995
  color: rgb(255 255 255 / var(--tw-text-opacity));
1007
996
  }
1008
- .text-x_alert_light {
997
+ .xpay-text-x_alert_light {
1009
998
  --tw-text-opacity: 1;
1010
999
  color: rgb(255 226 183 / var(--tw-text-opacity));
1011
1000
  }
1012
- .text-x_green {
1001
+ .xpay-text-x_green {
1013
1002
  --tw-text-opacity: 1;
1014
1003
  color: rgb(102 187 106 / var(--tw-text-opacity));
1015
1004
  }
1016
- .text-x_grey {
1005
+ .xpay-text-x_grey {
1017
1006
  color: #ffffff80;
1018
1007
  }
1019
- .no-underline {
1008
+ .xpay-no-underline {
1020
1009
  text-decoration-line: none;
1021
1010
  }
1022
- .opacity-60 {
1011
+ .xpay-opacity-60 {
1023
1012
  opacity: 0.6;
1024
1013
  }
1025
- .shadow-sm {
1014
+ .xpay-shadow-sm {
1026
1015
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1027
1016
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1028
1017
  box-shadow:
@@ -1030,19 +1019,16 @@ video {
1030
1019
  var(--tw-ring-shadow, 0 0 #0000),
1031
1020
  var(--tw-shadow);
1032
1021
  }
1033
- .outline-none {
1022
+ .xpay-outline-none {
1034
1023
  outline: 2px solid transparent;
1035
1024
  outline-offset: 2px;
1036
1025
  }
1037
- .filter {
1038
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1039
- }
1040
- .transition-all {
1026
+ .xpay-transition-all {
1041
1027
  transition-property: all;
1042
1028
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1043
1029
  transition-duration: 150ms;
1044
1030
  }
1045
- .xswap {
1031
+ .xpay {
1046
1032
  * {
1047
1033
  scrollbar-width: thin;
1048
1034
  scrollbar-color: #252525 #000;
@@ -1058,84 +1044,69 @@ video {
1058
1044
  background-color: #252525;
1059
1045
  border-radius: 4px;
1060
1046
  }
1061
- .globalBorder {
1062
- border: 1px solid rgba(255, 255, 255, 0.1);
1063
- }
1064
- }
1065
- .xswap-tx-status {
1066
- position: fixed;
1067
- bottom: 1.25rem;
1068
- right: 0.5rem;
1069
- z-index: 50;
1070
- display: flex;
1071
- width: 100%;
1072
- flex-direction: column;
1073
- align-items: flex-end;
1074
- gap: 0.75rem;
1075
- padding-left: 2.25rem;
1076
1047
  }
1077
- .placeholder\:text-sm::placeholder {
1048
+ .placeholder\:xpay-text-sm::placeholder {
1078
1049
  font-size: 0.875rem;
1079
1050
  line-height: 1.25rem;
1080
1051
  }
1081
- .placeholder\:text-\[rgba\(255\,255\,255\,0\.2\)\]::placeholder {
1052
+ .placeholder\:xpay-text-\[rgba\(255\,255\,255\,0\.2\)\]::placeholder {
1082
1053
  color: rgba(255, 255, 255, 0.2);
1083
1054
  }
1084
- .last\:mb-0:last-child {
1055
+ .last\:xpay-mb-0:last-child {
1085
1056
  margin-bottom: 0px;
1086
1057
  }
1087
- .hover\:cursor-pointer:hover {
1058
+ .hover\:xpay-cursor-pointer:hover {
1088
1059
  cursor: pointer;
1089
1060
  }
1090
- .hover\:bg-\[rgb\(25\,25\,25\)\]:hover {
1061
+ .hover\:xpay-bg-\[rgb\(25\,25\,25\)\]:hover {
1091
1062
  --tw-bg-opacity: 1;
1092
1063
  background-color: rgb(25 25 25 / var(--tw-bg-opacity));
1093
1064
  }
1094
- .focus\:outline-none:focus {
1065
+ .focus\:xpay-outline-none:focus {
1095
1066
  outline: 2px solid transparent;
1096
1067
  outline-offset: 2px;
1097
1068
  }
1098
- .disabled\:opacity-25:disabled {
1069
+ .disabled\:xpay-opacity-25:disabled {
1099
1070
  opacity: 0.25;
1100
1071
  }
1101
1072
  @media (min-width: 640px) {
1102
- .sm\:w-\[190px\] {
1073
+ .sm\:xpay-w-\[190px\] {
1103
1074
  width: 190px;
1104
1075
  }
1105
- .sm\:w-\[520px\] {
1076
+ .sm\:xpay-w-\[520px\] {
1106
1077
  width: 520px;
1107
1078
  }
1108
- .sm\:w-x_desktop {
1079
+ .sm\:xpay-w-x_desktop {
1109
1080
  width: 600px;
1110
1081
  }
1111
- .sm\:flex-row {
1082
+ .sm\:xpay-flex-row {
1112
1083
  flex-direction: row;
1113
1084
  }
1114
- .sm\:gap-5 {
1085
+ .sm\:xpay-gap-5 {
1115
1086
  gap: 1.25rem;
1116
1087
  }
1117
- .sm\:p-4 {
1088
+ .sm\:xpay-p-4 {
1118
1089
  padding: 1rem;
1119
1090
  }
1120
- .sm\:text-3xl {
1091
+ .sm\:xpay-text-3xl {
1121
1092
  font-size: 1.875rem;
1122
1093
  line-height: 2.25rem;
1123
1094
  }
1124
- .sm\:text-base {
1095
+ .sm\:xpay-text-base {
1125
1096
  font-size: 1rem;
1126
1097
  line-height: 1.5rem;
1127
1098
  }
1128
- .sm\:text-sm {
1099
+ .sm\:xpay-text-sm {
1129
1100
  font-size: 0.875rem;
1130
1101
  line-height: 1.25rem;
1131
1102
  }
1132
- .sm\:text-xl {
1103
+ .sm\:xpay-text-xl {
1133
1104
  font-size: 1.25rem;
1134
1105
  line-height: 1.75rem;
1135
1106
  }
1136
1107
  }
1137
1108
  @media (min-width: 768px) {
1138
- .md\:p-4 {
1109
+ .md\:xpay-p-4 {
1139
1110
  padding: 1rem;
1140
1111
  }
1141
1112
  }