@xswap-link/sdk 0.2.5 → 0.3.0

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