@cofhe/react 0.2.0 → 0.2.1

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.
package/dist/styles.css CHANGED
@@ -100,9 +100,8 @@
100
100
  .fnx-token-list-container {
101
101
  display: flex;
102
102
  flex-direction: column;
103
- gap: 0.25rem;
104
- max-height: var(--fnx-token-list-max-height);
105
- overflow-y: auto;
103
+ gap: 0.5rem;
104
+ padding: 0.25rem;
106
105
  }
107
106
  /* Loading dots animation */
108
107
  .fnx-loading-dots {
@@ -847,15 +846,15 @@ video {
847
846
  .mt-3 {
848
847
  margin-top: 0.75rem;
849
848
  }
850
- .mt-4 {
851
- margin-top: 1rem;
852
- }
853
849
  .mt-auto {
854
850
  margin-top: auto;
855
851
  }
856
852
  .block {
857
853
  display: block;
858
854
  }
855
+ .inline-block {
856
+ display: inline-block;
857
+ }
859
858
  .flex {
860
859
  display: flex;
861
860
  }
@@ -868,10 +867,6 @@ video {
868
867
  .hidden {
869
868
  display: none;
870
869
  }
871
- .size-3 {
872
- width: 0.75rem;
873
- height: 0.75rem;
874
- }
875
870
  .size-5 {
876
871
  width: 1.25rem;
877
872
  height: 1.25rem;
@@ -912,9 +907,6 @@ video {
912
907
  .h-full {
913
908
  height: 100%;
914
909
  }
915
- .max-h-60 {
916
- max-height: 15rem;
917
- }
918
910
  .max-h-64 {
919
911
  max-height: 16rem;
920
912
  }
@@ -1028,6 +1020,11 @@ video {
1028
1020
  .cursor-pointer {
1029
1021
  cursor: pointer;
1030
1022
  }
1023
+ .select-none {
1024
+ -webkit-user-select: none;
1025
+ -moz-user-select: none;
1026
+ user-select: none;
1027
+ }
1031
1028
  .appearance-none {
1032
1029
  -webkit-appearance: none;
1033
1030
  -moz-appearance: none;
@@ -1111,11 +1108,6 @@ video {
1111
1108
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
1112
1109
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
1113
1110
  }
1114
- .space-y-5 > :not([hidden]) ~ :not([hidden]) {
1115
- --tw-space-y-reverse: 0;
1116
- margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
1117
- margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
1118
- }
1119
1111
  .self-start {
1120
1112
  align-self: flex-start;
1121
1113
  }
@@ -1148,9 +1140,6 @@ video {
1148
1140
  .rounded {
1149
1141
  border-radius: 0.25rem;
1150
1142
  }
1151
- .rounded-2xl {
1152
- border-radius: 1rem;
1153
- }
1154
1143
  .rounded-full {
1155
1144
  border-radius: 9999px;
1156
1145
  }
@@ -1183,10 +1172,6 @@ video {
1183
1172
  --tw-border-opacity: 1;
1184
1173
  border-color: rgb(6 133 113 / var(--tw-border-opacity, 1));
1185
1174
  }
1186
- .border-\[\#0E2F3F\] {
1187
- --tw-border-opacity: 1;
1188
- border-color: rgb(14 47 63 / var(--tw-border-opacity, 1));
1189
- }
1190
1175
  .border-\[\#0E2F3F\]\/15 {
1191
1176
  border-color: rgb(14 47 63 / 0.15);
1192
1177
  }
@@ -1196,10 +1181,6 @@ video {
1196
1181
  .border-\[\#0E2F3F\]\/40 {
1197
1182
  border-color: rgb(14 47 63 / 0.4);
1198
1183
  }
1199
- .border-\[\#154054\] {
1200
- --tw-border-opacity: 1;
1201
- border-color: rgb(21 64 84 / var(--tw-border-opacity, 1));
1202
- }
1203
1184
  .border-\[\#247AFF\] {
1204
1185
  --tw-border-opacity: 1;
1205
1186
  border-color: rgb(36 122 255 / var(--tw-border-opacity, 1));
@@ -1208,10 +1189,6 @@ video {
1208
1189
  --tw-border-opacity: 1;
1209
1190
  border-color: rgb(102 102 102 / var(--tw-border-opacity, 1));
1210
1191
  }
1211
- .border-\[\#68D8EB\] {
1212
- --tw-border-opacity: 1;
1213
- border-color: rgb(104 216 235 / var(--tw-border-opacity, 1));
1214
- }
1215
1192
  .border-\[\#A1421F\] {
1216
1193
  --tw-border-opacity: 1;
1217
1194
  border-color: rgb(161 66 31 / var(--tw-border-opacity, 1));
@@ -1277,14 +1254,6 @@ video {
1277
1254
  --tw-bg-opacity: 1;
1278
1255
  background-color: rgb(128 230 230 / var(--tw-bg-opacity, 1));
1279
1256
  }
1280
- .bg-\[\#A8F3FB\] {
1281
- --tw-bg-opacity: 1;
1282
- background-color: rgb(168 243 251 / var(--tw-bg-opacity, 1));
1283
- }
1284
- .bg-\[\#EEF6F8\] {
1285
- --tw-bg-opacity: 1;
1286
- background-color: rgb(238 246 248 / var(--tw-bg-opacity, 1));
1287
- }
1288
1257
  .bg-\[\#F0784F\] {
1289
1258
  --tw-bg-opacity: 1;
1290
1259
  background-color: rgb(240 120 79 / var(--tw-bg-opacity, 1));
@@ -1321,6 +1290,9 @@ video {
1321
1290
  --tw-bg-opacity: 1;
1322
1291
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
1323
1292
  }
1293
+ .bg-cyan-200\/70 {
1294
+ background-color: rgb(165 243 252 / 0.7);
1295
+ }
1324
1296
  .bg-gray-100 {
1325
1297
  --tw-bg-opacity: 1;
1326
1298
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
@@ -1396,9 +1368,6 @@ video {
1396
1368
  .p-1 {
1397
1369
  padding: 0.25rem;
1398
1370
  }
1399
- .p-1\.5 {
1400
- padding: 0.375rem;
1401
- }
1402
1371
  .p-10 {
1403
1372
  padding: 2.5rem;
1404
1373
  }
@@ -1411,9 +1380,6 @@ video {
1411
1380
  .p-4 {
1412
1381
  padding: 1rem;
1413
1382
  }
1414
- .p-5 {
1415
- padding: 1.25rem;
1416
- }
1417
1383
  .px-0\.5 {
1418
1384
  padding-left: 0.125rem;
1419
1385
  padding-right: 0.125rem;
@@ -1466,6 +1432,10 @@ video {
1466
1432
  padding-top: 1rem;
1467
1433
  padding-bottom: 1rem;
1468
1434
  }
1435
+ .py-6 {
1436
+ padding-top: 1.5rem;
1437
+ padding-bottom: 1.5rem;
1438
+ }
1469
1439
  .py-8 {
1470
1440
  padding-top: 2rem;
1471
1441
  padding-bottom: 2rem;
@@ -1559,12 +1529,6 @@ video {
1559
1529
  .font-semibold {
1560
1530
  font-weight: 600;
1561
1531
  }
1562
- .uppercase {
1563
- text-transform: uppercase;
1564
- }
1565
- .capitalize {
1566
- text-transform: capitalize;
1567
- }
1568
1532
  .italic {
1569
1533
  font-style: italic;
1570
1534
  }
@@ -1578,16 +1542,12 @@ video {
1578
1542
  .leading-relaxed {
1579
1543
  line-height: 1.625;
1580
1544
  }
1545
+ .leading-tight {
1546
+ line-height: 1.25;
1547
+ }
1581
1548
  .tracking-tight {
1582
1549
  letter-spacing: -0.025em;
1583
1550
  }
1584
- .tracking-wide {
1585
- letter-spacing: 0.025em;
1586
- }
1587
- .text-\[\#00314E\] {
1588
- --tw-text-opacity: 1;
1589
- color: rgb(0 49 78 / var(--tw-text-opacity, 1));
1590
- }
1591
1551
  .text-\[\#003366\] {
1592
1552
  --tw-text-opacity: 1;
1593
1553
  color: rgb(0 51 102 / var(--tw-text-opacity, 1));
@@ -1604,9 +1564,6 @@ video {
1604
1564
  --tw-text-opacity: 1;
1605
1565
  color: rgb(14 47 63 / var(--tw-text-opacity, 1));
1606
1566
  }
1607
- .text-\[\#0E2F3F\]\/70 {
1608
- color: rgb(14 47 63 / 0.7);
1609
- }
1610
1567
  .text-\[\#355366\] {
1611
1568
  --tw-text-opacity: 1;
1612
1569
  color: rgb(53 83 102 / var(--tw-text-opacity, 1));
@@ -1615,10 +1572,6 @@ video {
1615
1572
  --tw-text-opacity: 1;
1616
1573
  color: rgb(74 16 4 / var(--tw-text-opacity, 1));
1617
1574
  }
1618
- .text-\[\#D14324\] {
1619
- --tw-text-opacity: 1;
1620
- color: rgb(209 67 36 / var(--tw-text-opacity, 1));
1621
- }
1622
1575
  .text-\[\#F0784F\] {
1623
1576
  --tw-text-opacity: 1;
1624
1577
  color: rgb(240 120 79 / var(--tw-text-opacity, 1));
@@ -1679,6 +1632,10 @@ video {
1679
1632
  --tw-text-opacity: 1;
1680
1633
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
1681
1634
  }
1635
+ .text-teal-500 {
1636
+ --tw-text-opacity: 1;
1637
+ color: rgb(20 184 166 / var(--tw-text-opacity, 1));
1638
+ }
1682
1639
  .text-white {
1683
1640
  --tw-text-opacity: 1;
1684
1641
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -1703,6 +1660,9 @@ video {
1703
1660
  --tw-placeholder-opacity: 1;
1704
1661
  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
1705
1662
  }
1663
+ .opacity-0 {
1664
+ opacity: 0;
1665
+ }
1706
1666
  .opacity-15 {
1707
1667
  opacity: 0.15;
1708
1668
  }
@@ -1721,11 +1681,6 @@ video {
1721
1681
  .opacity-80 {
1722
1682
  opacity: 0.8;
1723
1683
  }
1724
- .shadow-\[0_25px_60px_rgba\(13\2c 53\2c 71\2c 0\.15\)\] {
1725
- --tw-shadow: 0 25px 60px rgba(13,53,71,0.15);
1726
- --tw-shadow-colored: 0 25px 60px var(--tw-shadow-color);
1727
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1728
- }
1729
1684
  .shadow-sm {
1730
1685
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1731
1686
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -1818,17 +1773,10 @@ video {
1818
1773
  --tw-border-opacity: 1;
1819
1774
  border-color: rgb(74 74 74 / var(--tw-border-opacity, 1));
1820
1775
  }
1821
- .hover\:bg-\[\#0E2F3F\]\/10:hover {
1822
- background-color: rgb(14 47 63 / 0.1);
1823
- }
1824
1776
  .hover\:bg-\[\#6DD5D5\]:hover {
1825
1777
  --tw-bg-opacity: 1;
1826
1778
  background-color: rgb(109 213 213 / var(--tw-bg-opacity, 1));
1827
1779
  }
1828
- .hover\:bg-\[\#90edf7\]:hover {
1829
- --tw-bg-opacity: 1;
1830
- background-color: rgb(144 237 247 / var(--tw-bg-opacity, 1));
1831
- }
1832
1780
  .hover\:bg-\[\#FF9F80\]:hover {
1833
1781
  --tw-bg-opacity: 1;
1834
1782
  background-color: rgb(255 159 128 / var(--tw-bg-opacity, 1));
@@ -1857,13 +1805,6 @@ video {
1857
1805
  --tw-bg-opacity: 1;
1858
1806
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
1859
1807
  }
1860
- .hover\:bg-white:hover {
1861
- --tw-bg-opacity: 1;
1862
- background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
1863
- }
1864
- .hover\:bg-opacity-5:hover {
1865
- --tw-bg-opacity: 0.05;
1866
- }
1867
1808
  .hover\:text-blue-700:hover {
1868
1809
  --tw-text-opacity: 1;
1869
1810
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
@@ -1913,20 +1854,9 @@ video {
1913
1854
  .disabled\:opacity-50:disabled {
1914
1855
  opacity: 0.5;
1915
1856
  }
1916
- .disabled\:opacity-60:disabled {
1917
- opacity: 0.6;
1918
- }
1919
1857
  .dark\:border-\[\#\#858585\]:is(.dark *) {
1920
1858
  border-color: ##858585;
1921
1859
  }
1922
- .dark\:border-\[\#1F6B7D\]:is(.dark *) {
1923
- --tw-border-opacity: 1;
1924
- border-color: rgb(31 107 125 / var(--tw-border-opacity, 1));
1925
- }
1926
- .dark\:border-\[\#2C6D80\]:is(.dark *) {
1927
- --tw-border-opacity: 1;
1928
- border-color: rgb(44 109 128 / var(--tw-border-opacity, 1));
1929
- }
1930
1860
  .dark\:border-blue-800:is(.dark *) {
1931
1861
  --tw-border-opacity: 1;
1932
1862
  border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
@@ -1955,29 +1885,14 @@ video {
1955
1885
  .dark\:border-white\/40:is(.dark *) {
1956
1886
  border-color: rgb(255 255 255 / 0.4);
1957
1887
  }
1958
- .dark\:border-white\/70:is(.dark *) {
1959
- border-color: rgb(255 255 255 / 0.7);
1960
- }
1961
1888
  .dark\:border-yellow-800:is(.dark *) {
1962
1889
  --tw-border-opacity: 1;
1963
1890
  border-color: rgb(133 77 14 / var(--tw-border-opacity, 1));
1964
1891
  }
1965
- .dark\:bg-\[\#102027\]:is(.dark *) {
1966
- --tw-bg-opacity: 1;
1967
- background-color: rgb(16 32 39 / var(--tw-bg-opacity, 1));
1968
- }
1969
- .dark\:bg-\[\#114C5A\]:is(.dark *) {
1970
- --tw-bg-opacity: 1;
1971
- background-color: rgb(17 76 90 / var(--tw-bg-opacity, 1));
1972
- }
1973
1892
  .dark\:bg-\[\#121212\]:is(.dark *) {
1974
1893
  --tw-bg-opacity: 1;
1975
1894
  background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
1976
1895
  }
1977
- .dark\:bg-\[\#1F1F1F\]:is(.dark *) {
1978
- --tw-bg-opacity: 1;
1979
- background-color: rgb(31 31 31 / var(--tw-bg-opacity, 1));
1980
- }
1981
1896
  .dark\:bg-\[\#2E9D9D\]:is(.dark *) {
1982
1897
  --tw-bg-opacity: 1;
1983
1898
  background-color: rgb(46 157 157 / var(--tw-bg-opacity, 1));
@@ -2004,6 +1919,9 @@ video {
2004
1919
  .dark\:bg-blue-900\/50:is(.dark *) {
2005
1920
  background-color: rgb(30 58 138 / 0.5);
2006
1921
  }
1922
+ .dark\:bg-cyan-900\/40:is(.dark *) {
1923
+ background-color: rgb(22 78 99 / 0.4);
1924
+ }
2007
1925
  .dark\:bg-gray-600:is(.dark *) {
2008
1926
  --tw-bg-opacity: 1;
2009
1927
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
@@ -2083,13 +2001,14 @@ video {
2083
2001
  --tw-text-opacity: 1;
2084
2002
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
2085
2003
  }
2004
+ .dark\:text-teal-400:is(.dark *) {
2005
+ --tw-text-opacity: 1;
2006
+ color: rgb(45 212 191 / var(--tw-text-opacity, 1));
2007
+ }
2086
2008
  .dark\:text-white:is(.dark *) {
2087
2009
  --tw-text-opacity: 1;
2088
2010
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
2089
2011
  }
2090
- .dark\:text-white\/70:is(.dark *) {
2091
- color: rgb(255 255 255 / 0.7);
2092
- }
2093
2012
  .dark\:text-white\/80:is(.dark *) {
2094
2013
  color: rgb(255 255 255 / 0.8);
2095
2014
  }
@@ -2125,10 +2044,6 @@ video {
2125
2044
  --tw-border-opacity: 1;
2126
2045
  border-color: rgb(158 158 158 / var(--tw-border-opacity, 1));
2127
2046
  }
2128
- .dark\:hover\:bg-\[\#0f3f4b\]:hover:is(.dark *) {
2129
- --tw-bg-opacity: 1;
2130
- background-color: rgb(15 63 75 / var(--tw-bg-opacity, 1));
2131
- }
2132
2047
  .dark\:hover\:bg-\[\#268585\]:hover:is(.dark *) {
2133
2048
  --tw-bg-opacity: 1;
2134
2049
  background-color: rgb(38 133 133 / var(--tw-bg-opacity, 1));
@@ -2156,9 +2071,6 @@ video {
2156
2071
  --tw-bg-opacity: 1;
2157
2072
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
2158
2073
  }
2159
- .dark\:hover\:bg-white\/10:hover:is(.dark *) {
2160
- background-color: rgb(255 255 255 / 0.1);
2161
- }
2162
2074
  .dark\:hover\:text-blue-300:hover:is(.dark *) {
2163
2075
  --tw-text-opacity: 1;
2164
2076
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
@@ -2179,3 +2091,12 @@ video {
2179
2091
  --tw-ring-opacity: 1;
2180
2092
  --tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity, 1));
2181
2093
  }
2094
+ .\[\&_\.recharts-cartesian-grid_line\]\:stroke-slate-400\/25 .recharts-cartesian-grid line {
2095
+ stroke: rgb(148 163 184 / 0.25);
2096
+ }
2097
+ .dark\:\[\&_\.recharts-cartesian-grid_line\]\:stroke-white\/10 .recharts-cartesian-grid line:is(.dark *) {
2098
+ stroke: rgb(255 255 255 / 0.1);
2099
+ }
2100
+ .\[\&_\.recharts-tooltip-cursor\]\:stroke-current .recharts-tooltip-cursor {
2101
+ stroke: currentColor;
2102
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cofhe/react",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "main": "./dist/index.cjs",
5
5
  "module": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -27,13 +27,10 @@
27
27
  "@mui/icons-material": "^5.0.0",
28
28
  "@svgr/core": "^8.1.0",
29
29
  "@svgr/plugin-jsx": "^8.1.0",
30
- "@testing-library/jest-dom": "^6.4.8",
31
- "@testing-library/react": "^16.1.0",
32
30
  "@types/react": "^18.2.61",
33
31
  "@types/react-dom": "^18.2.19",
34
32
  "eslint": "^8.57.0",
35
33
  "eslint-plugin-react-hooks": "^4.6.0",
36
- "happy-dom": "^15.0.0",
37
34
  "nodemon": "^3.1.11",
38
35
  "postcss-cli": "^11.0.1",
39
36
  "postcss-import": "^16.1.1",
@@ -43,24 +40,26 @@
43
40
  "ts-essentials": "^10.1.1",
44
41
  "tsup": "^8.5.0",
45
42
  "typescript": "5.5.4",
46
- "vitest": "^3.0.0",
47
- "@cofhe/abi": "^0.2.0",
43
+ "@cofhe/abi": "^0.2.1",
48
44
  "@cofhe/eslint-config": "0.2.0",
49
45
  "@cofhe/tsconfig": "0.1.1"
50
46
  },
51
47
  "dependencies": {
52
48
  "@radix-ui/react-dropdown-menu": "^2.1.16",
53
49
  "@radix-ui/react-select": "^2.2.6",
50
+ "@tanstack/query-async-storage-persister": "^5.90.22",
54
51
  "@tanstack/react-query": "^5.90.7",
52
+ "@tanstack/react-query-persist-client": "^5.90.7",
55
53
  "bignumber.js": "^9.3.1",
56
54
  "clsx": "^2.0.0",
57
55
  "motion": "^12.23.26",
58
56
  "react-error-boundary": "^6.0.0",
59
57
  "react-icons": "^5.5.0",
58
+ "recharts": "^3.7.0",
60
59
  "tailwind-merge": "^2.0.0",
61
- "zod": "^3.22.0",
60
+ "zod": "^4.0.0",
62
61
  "zustand": "^5.0.1",
63
- "@cofhe/sdk": "0.2.0"
62
+ "@cofhe/sdk": "0.2.1"
64
63
  },
65
64
  "peerDependencies": {
66
65
  "@mui/icons-material": "^5.0.0",
@@ -76,10 +75,8 @@
76
75
  "build": "tsup && postcss ./src/styles.css -o ./dist/styles.css --minify",
77
76
  "dev": "nodemon",
78
77
  "lint": "eslint \"src/**/*.ts*\"",
79
- "type-check": "tsc --noEmit",
78
+ "check:types": "tsc --noEmit",
80
79
  "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
81
- "test": "vitest run",
82
- "test:watch": "vitest",
83
- "test:coverage": "vitest run --coverage"
80
+ "test": "echo 'No tests configured for @cofhe/react'"
84
81
  }
85
82
  }