@gluwa/connect-kit 0.2.0-next.9 → 0.2.1-next.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.
Files changed (43) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/assets/wc.png +0 -0
  3. package/dist/{chunk-VE5LB7BN.js → chunk-CJANPJHY.js} +4 -2
  4. package/dist/credit-connect.js +1 -1
  5. package/dist/index.css +178 -122
  6. package/dist/index.d.ts +4 -1
  7. package/dist/index.js +471 -182
  8. package/dist/package.json +1 -1
  9. package/package.json +6 -6
  10. package/src/ConnectKitProvider.tsx +8 -1
  11. package/src/components/qrArea/index.tsx +25 -3
  12. package/src/components/qrArea/style.scss +61 -2
  13. package/src/components/toast/index.tsx +41 -0
  14. package/src/components/toast/style.scss +108 -0
  15. package/src/core/config.ts +23 -2
  16. package/src/core/deeplinkSignal.ts +25 -0
  17. package/src/creditConnectConnector.ts +15 -5
  18. package/src/events/account.ts +15 -6
  19. package/src/hooks/useConnectBanner.ts +79 -0
  20. package/src/hooks/useConnectTimeout.ts +21 -9
  21. package/src/hooks/useMetaMaskExtension.ts +2 -1
  22. package/src/hooks/useWCState.ts +7 -2
  23. package/src/hooks/useWagmiConnect.ts +41 -14
  24. package/src/index.ts +1 -0
  25. package/src/layout/allWallets/index.tsx +16 -2
  26. package/src/layout/connectDialog/asset/warningIcon.tsx +21 -0
  27. package/src/layout/connectDialog/idle/assets/banner-placeholder.png +0 -0
  28. package/src/layout/connectDialog/idle/index.tsx +40 -16
  29. package/src/layout/connectDialog/idle/style.scss +42 -51
  30. package/src/layout/connectDialog/index.tsx +174 -37
  31. package/src/layout/connectDialog/metaMask/index.tsx +3 -2
  32. package/src/layout/connectDialog/qr/index.tsx +3 -1
  33. package/src/layout/connectDialog/style.scss +0 -48
  34. package/src/layout/connectDialog/timeout/index.tsx +0 -5
  35. package/src/layout/connectDialog/timeout/style.scss +0 -5
  36. package/src/layout/connectDialog/walletQR/index.tsx +3 -1
  37. package/src/layout/detailPanel/index.tsx +39 -6
  38. package/src/layout/detailPanel/style.scss +2 -1
  39. package/src/layout/selectorPanel/index.tsx +1 -0
  40. package/src/types.ts +20 -0
  41. package/src/utils/platform.ts +7 -0
  42. package/src/components/snackbar/index.tsx +0 -25
  43. package/src/components/snackbar/style.scss +0 -51
package/CHANGELOG.md CHANGED
@@ -1,5 +1,36 @@
1
1
  # @gluwa/wallet-kit
2
2
 
3
+ ## 0.2.1-next.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 998578b: update version
8
+ - Updated dependencies [998578b]
9
+ - @gluwa/credit-connect-hub-node-ws@0.1.1-next.1
10
+ - @gluwa/credit-connect-sdk@0.2.1-next.7
11
+ - @gluwa/credit-connect-e2ee-tweetnacl@0.2.1-next.7
12
+ - @gluwa/credit-connect-storage-local@0.2.1-next.7
13
+
14
+ ## 0.2.0-next.11
15
+
16
+ ### Patch Changes
17
+
18
+ - Updated dependencies [4cba4bb]
19
+ - @gluwa/credit-connect-sdk@0.2.0-next.6
20
+ - @gluwa/credit-connect-e2ee-tweetnacl@0.2.0-next.6
21
+ - @gluwa/credit-connect-hub-node-ws@0.1.0-next.6
22
+ - @gluwa/credit-connect-storage-local@0.2.0-next.6
23
+
24
+ ## 0.2.0-next.10
25
+
26
+ ### Patch Changes
27
+
28
+ - Updated dependencies [0b7cf10]
29
+ - @gluwa/credit-connect-sdk@0.2.0-next.5
30
+ - @gluwa/credit-connect-e2ee-tweetnacl@0.2.0-next.5
31
+ - @gluwa/credit-connect-hub-node-ws@0.1.0-next.5
32
+ - @gluwa/credit-connect-storage-local@0.2.0-next.5
33
+
3
34
  ## 0.2.0-next.9
4
35
 
5
36
  ### Patch Changes
package/assets/wc.png CHANGED
Binary file
@@ -53,7 +53,7 @@ var creditConnectConnector = /* @__PURE__ */ __name((options) => {
53
53
  });
54
54
  if (state.status === "CONNECTING" && state.connectingPayload) {
55
55
  console.log("[CC connector] emit display_uri", {
56
- payloadPrefix: state.connectingPayload.slice(0, 80)
56
+ ready: true
57
57
  });
58
58
  (_a = options.onDisplayUri) == null ? void 0 : _a.call(options, state.connectingPayload);
59
59
  emitWagmiMessage == null ? void 0 : emitWagmiMessage("display_uri", state.connectingPayload);
@@ -66,7 +66,9 @@ var creditConnectConnector = /* @__PURE__ */ __name((options) => {
66
66
  }
67
67
  });
68
68
  manager.on("sessionExpired", (payload) => {
69
- console.log("[CC connector] session expired \u2192 emit session_expired", payload);
69
+ console.log("[CC connector] session expired \u2192 emit session_expired", {
70
+ reason: payload.reason
71
+ });
70
72
  emitWagmiMessage == null ? void 0 : emitWagmiMessage("session_expired", payload);
71
73
  });
72
74
  return manager;
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import {
3
3
  creditConnectConnector
4
- } from "./chunk-VE5LB7BN.js";
4
+ } from "./chunk-CJANPJHY.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;
package/dist/index.d.ts CHANGED
@@ -37,6 +37,7 @@ interface WCWallet {
37
37
  }
38
38
  type WCSubView = 'qr' | 'list' | 'wallet';
39
39
  type ConnectKitTheme = 'light' | 'dark';
40
+ type ConnectBannerSiteKey = 'penguin-swap' | 'penguin-bridge' | 'penguin-base' | 'penguin-wallet';
40
41
  interface ConnectResult {
41
42
  address: `0x${string}`;
42
43
  connectorId: ConnectorId;
@@ -63,6 +64,8 @@ interface ConnectModalProps {
63
64
 
64
65
  interface ConnectKitProviderProps {
65
66
  children: ReactNode;
67
+ siteKey: ConnectBannerSiteKey;
68
+ connectBannerUrl: string;
66
69
  kitConfig?: ConnectKitConfig;
67
70
  connectors: Connectors;
68
71
  requiredChainId?: number;
@@ -111,4 +114,4 @@ declare const connectKit: {
111
114
  };
112
115
  };
113
116
 
114
- export { type ConnectErrorContext, type ConnectErrorReason, type ConnectKitConfig, type ConnectKitContextValue, ConnectKitProvider, type ConnectKitProviderProps, type ConnectKitTheme, type ConnectModalProps, type ConnectResult, type ConnectorId, type ConnectorKey, type Connectors, type WCSubView, type WCWallet, connectKit, initConfig, useConnectKit };
117
+ export { type ConnectBannerSiteKey, type ConnectErrorContext, type ConnectErrorReason, type ConnectKitConfig, type ConnectKitContextValue, ConnectKitProvider, type ConnectKitProviderProps, type ConnectKitTheme, type ConnectModalProps, type ConnectResult, type ConnectorId, type ConnectorKey, type Connectors, type WCSubView, type WCWallet, connectKit, initConfig, useConnectKit };