@gluwa/connect-kit 0.2.0-next.9 → 0.2.1-next.4

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 (50) hide show
  1. package/CHANGELOG.md +37 -0
  2. package/assets/wc.png +0 -0
  3. package/dist/{chunk-VE5LB7BN.js → chunk-TMKSC7ZT.js} +9 -2
  4. package/dist/credit-connect.js +1 -1
  5. package/dist/index.css +178 -122
  6. package/dist/index.d.ts +96 -26
  7. package/dist/index.js +681 -266
  8. package/dist/package.json +1 -1
  9. package/package.json +6 -6
  10. package/src/ConnectKitProvider.tsx +8 -1
  11. package/src/api/wrappers.ts +361 -0
  12. package/src/components/qrArea/index.tsx +25 -3
  13. package/src/components/qrArea/style.scss +61 -2
  14. package/src/components/toast/index.tsx +41 -0
  15. package/src/components/toast/style.scss +108 -0
  16. package/src/core/config.ts +23 -2
  17. package/src/core/deeplinkSignal.ts +25 -0
  18. package/src/creditConnectConnector.ts +15 -5
  19. package/src/events/account.ts +15 -18
  20. package/src/hooks/useConnectBanner.ts +79 -0
  21. package/src/hooks/useConnectTimeout.ts +21 -9
  22. package/src/hooks/useMetaMaskExtension.ts +2 -1
  23. package/src/hooks/useWCState.ts +7 -2
  24. package/src/hooks/useWagmiConnect.ts +41 -14
  25. package/src/index.ts +29 -24
  26. package/src/layout/allWallets/index.tsx +16 -2
  27. package/src/layout/connectDialog/asset/warningIcon.tsx +21 -0
  28. package/src/layout/connectDialog/idle/assets/banner-placeholder.png +0 -0
  29. package/src/layout/connectDialog/idle/index.tsx +40 -16
  30. package/src/layout/connectDialog/idle/style.scss +42 -51
  31. package/src/layout/connectDialog/index.tsx +174 -37
  32. package/src/layout/connectDialog/metaMask/index.tsx +3 -2
  33. package/src/layout/connectDialog/qr/index.tsx +3 -1
  34. package/src/layout/connectDialog/style.scss +0 -48
  35. package/src/layout/connectDialog/timeout/index.tsx +0 -5
  36. package/src/layout/connectDialog/timeout/style.scss +0 -5
  37. package/src/layout/connectDialog/walletQR/index.tsx +3 -1
  38. package/src/layout/detailPanel/index.tsx +39 -6
  39. package/src/layout/detailPanel/style.scss +2 -1
  40. package/src/layout/selectorPanel/index.tsx +1 -0
  41. package/src/types.ts +20 -0
  42. package/src/utils/platform.ts +7 -0
  43. package/src/api/account.ts +0 -21
  44. package/src/api/asset.ts +0 -10
  45. package/src/api/balance.ts +0 -10
  46. package/src/api/chain.ts +0 -17
  47. package/src/api/contract.ts +0 -33
  48. package/src/api/transaction.ts +0 -12
  49. package/src/components/snackbar/index.tsx +0 -25
  50. package/src/components/snackbar/style.scss +0 -51
package/CHANGELOG.md CHANGED
@@ -1,5 +1,42 @@
1
1
  # @gluwa/wallet-kit
2
2
 
3
+ ## 0.2.1-next.4
4
+
5
+ ### Patch Changes
6
+
7
+ - ceec77a: expose all wagmi actions via connectKit.actions
8
+
9
+ ## 0.2.1-next.1
10
+
11
+ ### Patch Changes
12
+
13
+ - 998578b: update version
14
+ - Updated dependencies [998578b]
15
+ - @gluwa/credit-connect-hub-node-ws@0.1.1-next.1
16
+ - @gluwa/credit-connect-sdk@0.2.1-next.7
17
+ - @gluwa/credit-connect-e2ee-tweetnacl@0.2.1-next.7
18
+ - @gluwa/credit-connect-storage-local@0.2.1-next.7
19
+
20
+ ## 0.2.0-next.11
21
+
22
+ ### Patch Changes
23
+
24
+ - Updated dependencies [4cba4bb]
25
+ - @gluwa/credit-connect-sdk@0.2.0-next.6
26
+ - @gluwa/credit-connect-e2ee-tweetnacl@0.2.0-next.6
27
+ - @gluwa/credit-connect-hub-node-ws@0.1.0-next.6
28
+ - @gluwa/credit-connect-storage-local@0.2.0-next.6
29
+
30
+ ## 0.2.0-next.10
31
+
32
+ ### Patch Changes
33
+
34
+ - Updated dependencies [0b7cf10]
35
+ - @gluwa/credit-connect-sdk@0.2.0-next.5
36
+ - @gluwa/credit-connect-e2ee-tweetnacl@0.2.0-next.5
37
+ - @gluwa/credit-connect-hub-node-ws@0.1.0-next.5
38
+ - @gluwa/credit-connect-storage-local@0.2.0-next.5
39
+
3
40
  ## 0.2.0-next.9
4
41
 
5
42
  ### Patch Changes
package/assets/wc.png CHANGED
Binary file
@@ -1,6 +1,10 @@
1
1
  import React from "react";
2
2
  var __defProp = Object.defineProperty;
3
3
  var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
4
+ var __export = (target, all) => {
5
+ for (var name in all)
6
+ __defProp(target, name, { get: all[name], enumerable: true });
7
+ };
4
8
 
5
9
  // src/creditConnectConnector.ts
6
10
  import { createConnector } from "@wagmi/core";
@@ -53,7 +57,7 @@ var creditConnectConnector = /* @__PURE__ */ __name((options) => {
53
57
  });
54
58
  if (state.status === "CONNECTING" && state.connectingPayload) {
55
59
  console.log("[CC connector] emit display_uri", {
56
- payloadPrefix: state.connectingPayload.slice(0, 80)
60
+ ready: true
57
61
  });
58
62
  (_a = options.onDisplayUri) == null ? void 0 : _a.call(options, state.connectingPayload);
59
63
  emitWagmiMessage == null ? void 0 : emitWagmiMessage("display_uri", state.connectingPayload);
@@ -66,7 +70,9 @@ var creditConnectConnector = /* @__PURE__ */ __name((options) => {
66
70
  }
67
71
  });
68
72
  manager.on("sessionExpired", (payload) => {
69
- console.log("[CC connector] session expired \u2192 emit session_expired", payload);
73
+ console.log("[CC connector] session expired \u2192 emit session_expired", {
74
+ reason: payload.reason
75
+ });
70
76
  emitWagmiMessage == null ? void 0 : emitWagmiMessage("session_expired", payload);
71
77
  });
72
78
  return manager;
@@ -401,5 +407,6 @@ var creditConnectConnector = /* @__PURE__ */ __name((options) => {
401
407
 
402
408
  export {
403
409
  __name,
410
+ __export,
404
411
  creditConnectConnector
405
412
  };
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import {
3
3
  creditConnectConnector
4
- } from "./chunk-VE5LB7BN.js";
4
+ } from "./chunk-TMKSC7ZT.js";
5
5
  export {
6
6
  creditConnectConnector
7
7
  };
package/dist/index.css CHANGED
@@ -576,46 +576,6 @@
576
576
  display: none !important;
577
577
  }
578
578
  }
579
- .ck-root .ck-dialog-snackbar {
580
- position: fixed;
581
- top: clamp(20px, 9.2vh, 99px);
582
- left: 50%;
583
- z-index: 1001;
584
- width: min(100vw - 40px, 400px);
585
- transform: translateX(-50%);
586
- animation: ck-dialog-snackbar-in 0.2s ease;
587
- }
588
- @media (max-width: 767px) {
589
- .ck-root .ck-dialog-snackbar {
590
- top: clamp(env(safe-area-inset-top, 0px) + 20px, env(safe-area-inset-top, 0px) + 20px, env(safe-area-inset-top, 0px) + 20px);
591
- left: 20px;
592
- right: 20px;
593
- width: auto;
594
- transform: none;
595
- }
596
- }
597
- @keyframes ck-dialog-snackbar-in {
598
- from {
599
- opacity: 0;
600
- transform: translateX(-50%) translateY(8px);
601
- }
602
- to {
603
- opacity: 1;
604
- transform: translateX(-50%) translateY(0);
605
- }
606
- }
607
- @media (max-width: 767px) {
608
- @keyframes ck-dialog-snackbar-in {
609
- from {
610
- opacity: 0;
611
- transform: translateY(8px);
612
- }
613
- to {
614
- opacity: 1;
615
- transform: translateY(0);
616
- }
617
- }
618
- }
619
579
 
620
580
  /* src/layout/selectorPanel/style.scss */
621
581
  .ck-selector {
@@ -886,11 +846,12 @@
886
846
  .ck-detail-header {
887
847
  display: flex;
888
848
  align-items: center;
849
+ position: relative;
850
+ z-index: 1;
889
851
  gap: 10px;
890
852
  height: 60px;
891
853
  padding: 0 20px;
892
854
  flex-shrink: 0;
893
- background: var(--semantic-paper-sheet);
894
855
  }
895
856
  .ck-btn-back {
896
857
  display: flex;
@@ -966,36 +927,26 @@
966
927
  }
967
928
 
968
929
  /* src/layout/connectDialog/idle/style.scss */
969
- .ck-idle {
930
+ .ck-root .ck-idle {
970
931
  display: flex;
971
932
  flex-direction: column;
972
- align-items: center;
973
- justify-content: center;
974
- gap: 20px;
975
- height: 100%;
976
- padding: 0px 40px;
977
- margin-top: -30px;
978
- }
979
- .ck-idle-graphic {
980
- max-width: 440px;
981
- height: auto;
982
- max-height: 240px;
983
- flex-shrink: 0;
984
- margin: 0;
933
+ align-items: flex-start;
934
+ gap: 6px;
935
+ position: absolute;
936
+ inset: 0;
937
+ z-index: 0;
938
+ padding: 60px;
939
+ box-sizing: border-box;
985
940
  }
986
- .ck-idle-graphic img {
941
+ .ck-root .ck-idle-bg {
942
+ position: absolute;
943
+ inset: 0;
987
944
  width: 100%;
988
945
  height: 100%;
989
- object-fit: contain;
990
- }
991
- .ck-idle-text {
992
- display: flex;
993
- flex-direction: column;
994
- align-items: center;
995
- gap: 6px;
996
- width: 100%;
946
+ object-fit: cover;
947
+ z-index: -1;
997
948
  }
998
- .ck-idle-title {
949
+ .ck-root .ck-idle-title {
999
950
  --font-name: title1-bold;
1000
951
  font-family: "Inter-SB";
1001
952
  font-size: 32px;
@@ -1003,22 +954,22 @@
1003
954
  letter-spacing: -0.03em;
1004
955
  }
1005
956
  @media (max-width: 767px) {
1006
- .ck-idle-title {
957
+ .ck-root .ck-idle-title {
1007
958
  font-size: 28px;
1008
959
  }
1009
960
  }
1010
961
  @media (max-width: 450px) {
1011
- .ck-idle-title {
962
+ .ck-root .ck-idle-title {
1012
963
  font-size: 24px;
1013
964
  }
1014
965
  }
1015
- .ck-idle-title {
966
+ .ck-root .ck-idle-title {
1016
967
  color: var(--scale-gray-900);
1017
- text-align: center;
1018
- width: 100%;
1019
- letter-spacing: -0.96px;
1020
968
  }
1021
- .ck-idle-desc {
969
+ .ck-root .ck-idle-desc {
970
+ color: var(--scale-gray-600);
971
+ margin-top: 6px;
972
+ white-space: pre-line;
1022
973
  --font-name: body4-l1-regular;
1023
974
  font-family: "Inter-R";
1024
975
  font-size: 15px;
@@ -1026,28 +977,24 @@
1026
977
  letter-spacing: -0.01em;
1027
978
  }
1028
979
  @media (max-width: 767px) {
1029
- .ck-idle-desc {
980
+ .ck-root .ck-idle-desc {
1030
981
  font-size: 14px;
1031
982
  }
1032
983
  }
1033
984
  @media (max-width: 450px) {
1034
- .ck-idle-desc {
985
+ .ck-root .ck-idle-desc {
1035
986
  font-size: 13px;
1036
987
  }
1037
988
  }
1038
- .ck-idle-desc {
1039
- color: var(--scale-gray-600);
1040
- text-align: center;
1041
- width: 100%;
1042
- }
1043
989
  .ck-root .ck-idle-link {
1044
- display: inline-flex;
990
+ display: flex;
1045
991
  align-items: center;
1046
- color: var(--scale-gray-600);
992
+ margin: -2px -8px -8px -8px;
993
+ padding: 8px;
1047
994
  }
1048
995
  .ck-root .ck-idle-link span {
1049
- --font-name: body4-l1-regular;
1050
- font-family: "Inter-R";
996
+ --font-name: body4-l1-bold;
997
+ font-family: "Inter-SB";
1051
998
  font-size: 15px;
1052
999
  line-height: 1.8;
1053
1000
  letter-spacing: -0.01em;
@@ -1062,8 +1009,12 @@
1062
1009
  font-size: 13px;
1063
1010
  }
1064
1011
  }
1012
+ .ck-root .ck-idle-link span {
1013
+ color: inherit;
1014
+ }
1065
1015
  .ck-root .ck-idle-link svg {
1066
1016
  flex-shrink: 0;
1017
+ color: inherit;
1067
1018
  }
1068
1019
 
1069
1020
  /* src/layout/connectDialog/loading/style.scss */
@@ -1119,11 +1070,11 @@
1119
1070
  /* src/components/qrArea/style.scss */
1120
1071
  .ck-qr-area {
1121
1072
  display: flex;
1073
+ flex-direction: column;
1122
1074
  align-items: center;
1123
- justify-content: center;
1124
1075
  flex: 1;
1125
1076
  width: 100%;
1126
- padding-bottom: 32px;
1077
+ padding: 32px 0;
1127
1078
  }
1128
1079
  .ck-qr-text {
1129
1080
  display: flex;
@@ -1133,6 +1084,11 @@
1133
1084
  width: 100%;
1134
1085
  margin-top: 24px;
1135
1086
  }
1087
+ @media (max-width: 767px) {
1088
+ .ck-qr-text {
1089
+ gap: 12px;
1090
+ }
1091
+ }
1136
1092
  .ck-qr-label {
1137
1093
  --font-name: subtitle2-bold;
1138
1094
  font-family: "Inter-SB";
@@ -1154,6 +1110,61 @@
1154
1110
  color: var(--scale-gray-900);
1155
1111
  text-align: center;
1156
1112
  }
1113
+ .ck-root .ck-qr-open-app {
1114
+ display: none;
1115
+ align-items: center;
1116
+ justify-content: center;
1117
+ padding: 12px 28px;
1118
+ border: 1px solid var(--semantic-divider-divider-4);
1119
+ border-radius: 500px;
1120
+ --font-name: label4-bold;
1121
+ font-family: "Inter-SB";
1122
+ font-size: 15px;
1123
+ line-height: 1.5;
1124
+ letter-spacing: -0.01em;
1125
+ }
1126
+ @media (max-width: 767px) {
1127
+ .ck-root .ck-qr-open-app {
1128
+ font-size: 14px;
1129
+ }
1130
+ }
1131
+ @media (max-width: 450px) {
1132
+ .ck-root .ck-qr-open-app {
1133
+ font-size: 13px;
1134
+ }
1135
+ }
1136
+ .ck-root .ck-qr-open-app {
1137
+ color: var(--scale-gray-900);
1138
+ cursor: pointer;
1139
+ transition: background 0.15s ease;
1140
+ }
1141
+ @media (max-width: 767px) {
1142
+ .ck-root .ck-qr-open-app {
1143
+ display: inline-flex;
1144
+ }
1145
+ }
1146
+ .ck-root .ck-qr-open-app:hover {
1147
+ background: var(--scale-gray-100);
1148
+ }
1149
+ .ck-qr-open-app-skeleton {
1150
+ display: none;
1151
+ width: 116px;
1152
+ height: 44px;
1153
+ border-radius: 500px;
1154
+ background:
1155
+ linear-gradient(
1156
+ 132deg,
1157
+ var(--scale-gray-100) 36%,
1158
+ var(--scale-gray-200) 51%,
1159
+ var(--scale-gray-100) 66%);
1160
+ background-size: 200% 100%;
1161
+ animation: ck-qr-shimmer 1.5s linear infinite;
1162
+ }
1163
+ @media (max-width: 767px) {
1164
+ .ck-qr-open-app-skeleton {
1165
+ display: block;
1166
+ }
1167
+ }
1157
1168
  .ck-qr {
1158
1169
  display: flex;
1159
1170
  flex-direction: column;
@@ -1202,6 +1213,20 @@
1202
1213
  height: 240px;
1203
1214
  }
1204
1215
  }
1216
+ .ck-qr-copy-skeleton {
1217
+ display: block;
1218
+ width: 84px;
1219
+ height: 20px;
1220
+ border-radius: 4px;
1221
+ background:
1222
+ linear-gradient(
1223
+ 132deg,
1224
+ var(--scale-gray-100) 36%,
1225
+ var(--scale-gray-200) 51%,
1226
+ var(--scale-gray-100) 66%);
1227
+ background-size: 200% 100%;
1228
+ animation: ck-qr-shimmer 1.5s linear infinite;
1229
+ }
1205
1230
  @keyframes ck-qr-shimmer {
1206
1231
  0% {
1207
1232
  background-position: 200% 0;
@@ -1388,26 +1413,6 @@
1388
1413
  .ck-timeout-title {
1389
1414
  color: var(--scale-gray-900);
1390
1415
  }
1391
- .ck-timeout-desc {
1392
- --font-name: body4-l1-regular;
1393
- font-family: "Inter-R";
1394
- font-size: 15px;
1395
- line-height: 1.8;
1396
- letter-spacing: -0.01em;
1397
- }
1398
- @media (max-width: 767px) {
1399
- .ck-timeout-desc {
1400
- font-size: 14px;
1401
- }
1402
- }
1403
- @media (max-width: 450px) {
1404
- .ck-timeout-desc {
1405
- font-size: 13px;
1406
- }
1407
- }
1408
- .ck-timeout-desc {
1409
- color: var(--scale-gray-600);
1410
- }
1411
1416
  .ck-root .ck-timeout-retry-btn {
1412
1417
  display: inline-flex;
1413
1418
  align-items: center;
@@ -2008,40 +2013,85 @@
2008
2013
  }
2009
2014
  }
2010
2015
 
2011
- /* src/components/snackbar/style.scss */
2012
- .ck-snackbar {
2016
+ /* src/components/toast/style.scss */
2017
+ .ck-toast-stack {
2018
+ position: fixed;
2019
+ top: clamp(20px, 9.2vh, 99px);
2020
+ left: 50%;
2021
+ z-index: 1001;
2013
2022
  display: flex;
2023
+ flex-direction: column;
2014
2024
  align-items: center;
2025
+ gap: 8px;
2026
+ max-width: calc(100vw - 40px);
2027
+ transform: translateX(-50%);
2028
+ }
2029
+ @media (max-width: 767px) {
2030
+ .ck-toast-stack {
2031
+ top: clamp(env(safe-area-inset-top, 0px) + 20px, env(safe-area-inset-top, 0px) + 20px, env(safe-area-inset-top, 0px) + 20px);
2032
+ left: 20px;
2033
+ right: 20px;
2034
+ align-items: stretch;
2035
+ max-width: none;
2036
+ transform: none;
2037
+ }
2038
+ }
2039
+ .ck-toast {
2040
+ display: flex;
2041
+ align-items: center;
2042
+ justify-content: space-between;
2015
2043
  gap: 16px;
2044
+ width: max-content;
2045
+ min-width: min(400px, 100vw - 40px);
2046
+ max-width: 100%;
2016
2047
  padding: 12px 16px;
2017
2048
  border-radius: 8px;
2018
2049
  background: var(--semantic-paper-sheet);
2019
2050
  border: 1px solid var(--semantic-divider-divider-1);
2020
- width: 100%;
2021
- max-width: 400px;
2051
+ animation: ck-toast-in 0.2s ease;
2022
2052
  }
2023
2053
  @media (max-width: 767px) {
2024
- .ck-snackbar {
2025
- max-width: none;
2054
+ .ck-toast {
2055
+ width: 100%;
2056
+ min-width: 0;
2026
2057
  }
2027
2058
  }
2028
- .ck-snackbar-content {
2059
+ @keyframes ck-toast-in {
2060
+ from {
2061
+ opacity: 0;
2062
+ transform: translateY(8px);
2063
+ }
2064
+ to {
2065
+ opacity: 1;
2066
+ transform: translateY(0);
2067
+ }
2068
+ }
2069
+ .ck-toast-content {
2029
2070
  display: flex;
2030
2071
  align-items: center;
2031
2072
  gap: 8px;
2032
- flex: 1;
2033
- min-width: 0;
2034
2073
  }
2035
- .ck-snackbar-check {
2074
+ @media (max-width: 767px) {
2075
+ .ck-toast-content {
2076
+ flex: 1;
2077
+ min-width: 0;
2078
+ }
2079
+ }
2080
+ .ck-toast-icon {
2036
2081
  display: flex;
2037
2082
  align-items: center;
2038
2083
  justify-content: center;
2039
2084
  width: 24px;
2040
2085
  height: 24px;
2041
2086
  flex-shrink: 0;
2087
+ }
2088
+ .ck-toast-icon--success {
2042
2089
  color: var(--semantic-information-success);
2043
2090
  }
2044
- .ck-snackbar-message {
2091
+ .ck-toast-icon--warning {
2092
+ color: var(--semantic-information-caution);
2093
+ }
2094
+ .ck-toast-message {
2045
2095
  --font-name: body3-l1-medium;
2046
2096
  font-family: "Inter-M";
2047
2097
  font-size: 16px;
@@ -2049,21 +2099,27 @@
2049
2099
  letter-spacing: -0.01em;
2050
2100
  }
2051
2101
  @media (max-width: 767px) {
2052
- .ck-snackbar-message {
2102
+ .ck-toast-message {
2053
2103
  font-size: 15px;
2054
2104
  }
2055
2105
  }
2056
2106
  @media (max-width: 450px) {
2057
- .ck-snackbar-message {
2107
+ .ck-toast-message {
2058
2108
  font-size: 14px;
2059
2109
  }
2060
2110
  }
2061
- .ck-snackbar-message {
2111
+ .ck-toast-message {
2062
2112
  color: var(--scale-gray-900);
2063
- flex: 1;
2064
- min-width: 0;
2113
+ white-space: nowrap;
2114
+ }
2115
+ @media (max-width: 767px) {
2116
+ .ck-toast-message {
2117
+ flex: 1;
2118
+ min-width: 0;
2119
+ white-space: normal;
2120
+ }
2065
2121
  }
2066
- .ck-root .ck-snackbar-close {
2122
+ .ck-root .ck-toast-close {
2067
2123
  display: flex;
2068
2124
  align-items: center;
2069
2125
  justify-content: center;