@matchain/matchid-sdk-react 0.1.17 → 0.1.18

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 (11) hide show
  1. package/dist/index.css +194 -63
  2. package/dist/index.d.mts +41 -16
  3. package/dist/index.d.ts +41 -16
  4. package/dist/index.js +527 -208
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +513 -194
  7. package/dist/index.mjs.map +1 -1
  8. package/example/src/components/Login/index.tsx +14 -19
  9. package/example/src/config/index.ts +9 -0
  10. package/example/src/pages/User.tsx +29 -22
  11. package/package.json +2 -1
package/dist/index.css CHANGED
@@ -8,10 +8,10 @@ body {
8
8
  --matchid-gray-600: #6E6E6E;
9
9
  --matchid-gray-400: #B6B6B6;
10
10
  --matchid-gray-300: #E3E3E3;
11
- --matchid-gray-200:#F3F3F3;
11
+ --matchid-gray-200: #F3F3F3;
12
12
  --matchid-gray-100: #F8F8F8;
13
13
  --matchid-red-600: #F7585E;
14
- --matchid-green-600:#2CBF68;
14
+ --matchid-green-600: #2CBF68;
15
15
 
16
16
  --matchid-shadow-full: 0px 15px 40px 0px rgba(22, 17, 46, 0.12);
17
17
  --matchid-shadow-middle: 0px 10px 30px 0px rgba(22, 17, 46, 0.12);
@@ -57,7 +57,9 @@ body {
57
57
  /**field component**/
58
58
  --matchid-field-color: var(--matchid-text-color);
59
59
  --matchid-field-error-color: var(--matchid-red-600);
60
- --matchid-field-required-color:#E60808;
60
+ --matchid-field-required-color: #E60808;
61
+ /**popover component**/
62
+ --matchid-popover-bg:var(--matchid-white);
61
63
  /**button component**/
62
64
  --matchid-btn-border-color: var(--matchid-black);
63
65
  --matchid-btn-color: var(--matchid-black);
@@ -78,12 +80,28 @@ body {
78
80
  --matchid-btn-loading-bg: var(--matchid-black-800);
79
81
  --matchid-btn-loading-color: var(--matchid-white);
80
82
 
81
- --matchid-email-verify-header-value-color:var(--matchid-highlight-orange);
82
- --matchid-email-verify-header-value-tips:var(--matchid-gray-600);
83
+ --matchid-login-btn-text-color: var(--matchid-black);
84
+ --matchid-login-btn-icon-color: var(--matchid-black);
85
+ --matchid-login-btn-border-color: var(--matchid-black);
86
+ --matchid-login-btn-bg-color: none;
87
+ --matchid-login-btn-hover-text-color: var(--matchid-black);
88
+ --matchid-login-btn-hover-icon-color: var(--matchid-highlight-orange);
89
+ --matchid-login-btn-hover-border-color: var(--matchid-highlight-orange);
90
+ --matchid-login-btn-hover-bg-color: none;
91
+ --matchid-login-btn-active-text-color: var(--matchid-black);
92
+ --matchid-login-btn-active-icon-color: var(--matchid-highlight-orange);
93
+ --matchid-login-btn-active-border-color: var(--matchid-highlight-orange);
94
+ --matchid-login-btn-active-bg-color: var(--matchid-white);
95
+
96
+
97
+ --matchid-email-verify-header-value-color: var(--matchid-highlight-orange);
98
+ --matchid-email-verify-header-value-tips: var(--matchid-gray-600);
83
99
  /****/
84
- --matchid-valid-error-color:var(--matchid-gray-600);
85
- --matchid-valid-success-color:var(--matchid-black);
86
- --matchid-password-header-color:var(--matchid-black);
100
+ --matchid-valid-error-color: var(--matchid-gray-600);
101
+ --matchid-valid-success-color: var(--matchid-black);
102
+ --matchid-password-header-color: var(--matchid-black);
103
+ --matchid-user-popover-color:var(--matchid-black);
104
+ --matchid-user-popover-hover-color:var(--matchid-highlight-orange);
87
105
 
88
106
  }
89
107
 
@@ -192,7 +210,7 @@ body {
192
210
  justify-content: space-between;
193
211
  }
194
212
 
195
- .matchid-modal-header-border{
213
+ .matchid-modal-header-border {
196
214
  border-bottom: 1px solid var(--matchid-modal-header-border-color, #E3E3E3);
197
215
  }
198
216
 
@@ -215,7 +233,7 @@ body {
215
233
  .matchid-input-box {
216
234
  width: 100%;
217
235
  height: 72px;
218
- padding-left:24px;
236
+ padding-left: 24px;
219
237
  border-radius: 12px;
220
238
  border: 1px solid var(--matchid-input-border-color);
221
239
  display: flex;
@@ -228,23 +246,28 @@ body {
228
246
  border-color: var(--matchid-input-focus-border-color);
229
247
  background: var(--matchid-input-focus-bg);
230
248
  }
231
- .matchid-input-delete-icon{
249
+
250
+ .matchid-input-delete-icon {
232
251
  opacity: 0;
233
252
  cursor: pointer;
234
- margin-left:24px;
253
+ margin-left: 24px;
235
254
  margin-right: 24px;
236
255
  }
237
- .matchid-input-box:focus-within .matchid-input-delete-icon{
256
+
257
+ .matchid-input-box:focus-within .matchid-input-delete-icon {
238
258
  opacity: 1;
239
259
  }
240
- .matchid-input-eye-icon{
260
+
261
+ .matchid-input-eye-icon {
241
262
  cursor: pointer;
242
- margin-left:24px;
263
+ margin-left: 24px;
243
264
  margin-right: 24px;
244
265
  }
266
+
245
267
  .matchid-input-box.matchid-input-has-content {
246
268
  background: var(--matchid-input-focus-bg);
247
269
  }
270
+
248
271
  .matchid-input-field {
249
272
  flex: 1;
250
273
  height: 100%;
@@ -276,11 +299,11 @@ body {
276
299
  font-weight: 600;
277
300
  }
278
301
 
279
- .matchid-field-required{
302
+ .matchid-field-required {
280
303
  color: var(--matchid-field-required-color);
281
304
  }
282
305
 
283
- .matchid-field-error{
306
+ .matchid-field-error {
284
307
  font-size: 14px;
285
308
  font-weight: 600;
286
309
  color: var(--matchid-field-error-color);
@@ -306,7 +329,7 @@ body {
306
329
  border-color: var(--matchid-btn-hover-bg);
307
330
  }
308
331
 
309
- .matchid-btn:focus, .matchid-btn:active {
332
+ .matchid-btn:active {
310
333
  background: var(--matchid-btn-active-bg);
311
334
  color: var(--matchid-btn-active-color);
312
335
  box-shadow: var(--matchid-shadow-middle);
@@ -314,17 +337,18 @@ body {
314
337
  }
315
338
 
316
339
 
317
-
318
- .matchid-btn-highlight, .matchid-btn-highlight:hover, .matchid-btn-highlight:focus, .matchid-btn-highlight:active, .matchid-btn-highlight:not(:disabled):hover {
340
+ .matchid-btn-highlight, .matchid-btn-highlight:hover, .matchid-btn-highlight:active, .matchid-btn-highlight:not(:disabled):hover {
319
341
  background: var(--matchid-btn-highlight-bg);
320
342
  color: var(--matchid-btn-highlight-color);
321
- border:0;
343
+ border: 0;
322
344
  }
345
+
323
346
  .matchid-btn:disabled {
324
347
  cursor: not-allowed;
325
348
  background: var(--matchid-btn-disabled-bg);
326
349
  color: var(--matchid-btn-disabled-color);
327
350
  }
351
+
328
352
  .matchid-btn-loading {
329
353
  background: var(--matchid-btn-loading-bg) !important;
330
354
  color: var(--matchid-btn-loading-color) !important;
@@ -370,100 +394,207 @@ body {
370
394
  .matchid-btn-rounded {
371
395
  border-radius: 100px;
372
396
  }
373
- .matchid-email-verify-box,.matchid-password-box{
397
+
398
+ .matchid-email-verify-box, .matchid-password-box {
374
399
  display: flex;
375
400
  flex-direction: column;
376
401
  gap: 64px;
377
402
  }
378
- .matchid-email-verify-header,.matchid-password-header{
403
+
404
+ .matchid-email-verify-header, .matchid-password-header {
379
405
  display: flex;
380
406
  align-items: center;
381
- gap:16px;
382
- height:40px;
407
+ gap: 16px;
408
+ height: 40px;
383
409
  }
384
- .matchid-email-verify-header-icon,.matchid-password-header-icon{
385
- width:40px;
386
- height:40px;
410
+
411
+ .matchid-email-verify-header-icon, .matchid-password-header-icon {
412
+ width: 40px;
413
+ height: 40px;
387
414
  display: flex;
388
415
  justify-content: center;
389
416
  align-items: center;
390
417
  border-radius: 8px;
391
- border:1px solid var(--matchid-black);
418
+ border: 1px solid var(--matchid-black);
392
419
 
393
420
 
394
421
  }
395
- .matchid-email-verify-header-content{
396
- flex:1;
422
+
423
+ .matchid-email-verify-header-content {
424
+ flex: 1;
397
425
  display: flex;
398
426
  height: 100%;
399
427
  flex-direction: column;
400
428
  justify-content: space-between;
401
429
  }
402
- .matchid-password-header-content{
430
+
431
+ .matchid-password-header-content {
403
432
  font-size: 16px;
404
433
  font-weight: 500;
405
434
  color: var(--matchid-password-header-color);
406
435
  }
407
- .matchid-email-verify-header-value{
436
+
437
+ .matchid-email-verify-header-value {
408
438
  color: var(--matchid-email-verify-header-value-color);
409
439
  font-size: 24px;
410
440
  font-weight: 600;
411
441
  line-height: 100%;
412
442
  }
413
- .matchid-email-verify-header-tips{
443
+
444
+ .matchid-email-verify-header-tips {
414
445
  color: var(--matchid-email-verify-header-value-tips);
415
446
  font-size: 14px;
416
447
  line-height: 120%; /* 16.8px */
417
448
  }
418
- .matchid-unlogin-btn,.matchid-login-btn{
419
- gap:8px
449
+
450
+ .matchid-unlogin-btn, .matchid-login-btn {
451
+ gap: 8px
420
452
  }
421
- .matchid-login-btn{
422
- padding:0 12px 0 4px;
453
+
454
+ .matchid-login-btn {
455
+ padding: 0 12px 0 4px;
456
+ background: var(--matchid-login-btn-bg-color);
457
+ color: var(--matchid-login-btn-text-color);
458
+ fill: var(--matchid-login-btn-icon-color);
459
+ border-color: var(--matchid-login-btn-border-color);
423
460
  }
424
- .matchid-login-btn:hover,.matchid-login-btn:not(:disabled):hover{
425
- border-color:#ffffff;
461
+
462
+ .matchid-login-btn:hover, .matchid-login-btn:not(:disabled):hover {
463
+ background: var(--matchid-login-btn-hover-bg-color);
464
+ color: var(--matchid-login-btn-hover-text-color);
465
+ fill: var(--matchid-login-btn-hover-icon-color);
466
+ border-color: var(--matchid-login-btn-hover-border-color);
426
467
  }
468
+
427
469
  .matchid-login-btn:active,
428
- .matchid-login-btn:focus,
429
- .matchid-login-btn:hover,
430
- .matchid-login-btn:not(:disabled):hover,
431
- .matchid-login-btn:not(:disabled):focus,
432
- .matchid-login-btn:not(:disabled):active
433
- {
434
- color:#000000;
470
+ .matchid-login-btn:not(:disabled):active {
435
471
  box-shadow: var(--matchid-shadow-small);
436
- fill: var(--matchid-highlight-orange);
437
- background:#ffffff;
472
+ background: var(--matchid-login-btn-active-bg-color);
473
+ color: var(--matchid-login-btn-active-text-color);
474
+ fill: var(--matchid-login-btn-active-icon-color);
475
+ border-color: var(--matchid-login-btn-active-border-color);
438
476
  }
439
- .matchid-login-btn:active,.matchid-login-btn:focus{
440
- border:1px solid var(--matchid-highlight-orange);
477
+
478
+ .matchid-login-btn-box{
479
+ position: relative;
441
480
  }
442
481
 
443
- .matchid-valid{
444
- margin-top:24px;
482
+ .matchid-valid {
483
+ margin-top: 24px;
445
484
  display: flex;
446
485
  flex-direction: column;
447
- gap:16px;
486
+ gap: 16px;
448
487
  }
449
- .matchid-valid-status-item{
488
+
489
+ .matchid-valid-status-item {
450
490
  display: flex;
451
491
  font-size: 14px;
452
- gap:8px;
453
- align-items:flex-start;
492
+ gap: 8px;
493
+ align-items: flex-start;
454
494
  }
455
- .matchid-valid-status-item span{
456
- flex:1;
495
+
496
+ .matchid-valid-status-item span {
497
+ flex: 1;
457
498
  }
458
499
 
459
- .matchid-valid-status-success{
500
+ .matchid-valid-status-success {
460
501
  color: var(--matchid-valid-success-color);
461
502
  }
462
- .matchid-valid-status-error{
503
+
504
+ .matchid-valid-status-error {
463
505
  color: var(--matchid-valid-error-color);
464
506
  }
465
- .matchid-password-content{
507
+
508
+ .matchid-password-content {
466
509
  display: flex;
467
510
  flex-direction: column;
468
- gap:24px;
511
+ gap: 24px;
512
+ }
513
+
514
+ .matchid-popover-box{
515
+ position: relative;
516
+ display: inline-block;
517
+ .matchid-popover-content{
518
+ position: absolute;
519
+ z-index: 100;
520
+ background: var(--matchid-popover-bg);
521
+ box-shadow: var(--matchid-shadow-middle);
522
+ border-radius: 12px;
523
+ padding: 16px 0;
524
+ display: none;
525
+ border:1px solid var(--matchid-popover-bg);
526
+ }
527
+ .matchid-popover-content:hover{
528
+ border:1px solid var(--matchid-highlight-orange);
529
+ }
530
+ &.matchid-popover-click-active{
531
+ .matchid-popover-content {
532
+ display: block;
533
+ }
534
+ }
535
+ &.matchid-popover-hover:hover{
536
+ .matchid-popover-content {
537
+ display: block;
538
+ }
539
+ }
540
+ &.matchid-popover-left{
541
+ .matchid-popover-content {
542
+ left: 0;
543
+ top: 100%;
544
+ }
545
+ }
546
+ &.matchid-popover-right{
547
+ .matchid-popover-content {
548
+ right: 0;
549
+ top: 100%;
550
+ }
551
+ }
552
+ &.matchid-popover-center{
553
+ .matchid-popover-content {
554
+ left: 50%;
555
+ top:100%;
556
+ transform: translateX(-50%);
557
+ }
558
+ }
559
+ }
560
+
561
+ .matchid-user-popover-content{
562
+ padding:0 12px;
563
+ display: flex;
564
+ width:280px;
565
+ flex-direction: column;
566
+ gap:32px;
567
+ .matchid-user-popover-list{
568
+ display: flex;
569
+ flex-direction: column;
570
+ width: 100%;
571
+ gap:8px;
572
+ .matchid-user-popover-item{
573
+ display: flex;
574
+ justify-content: space-between;
575
+ align-items: center;
576
+ cursor:pointer;
577
+ gap:8px;
578
+ height: 48px;
579
+ color:var(--matchid-user-popover-color);
580
+ --icon-color:var(--matchid-user-popover-color);
581
+ .matchid-user-popover-item-content{
582
+ display: flex;
583
+ gap:8px;
584
+ align-items: center;
585
+ }
586
+ &:hover{
587
+ color:var(--matchid-user-popover-hover-color);
588
+ --icon-color:var(--matchid-user-popover-hover-color);
589
+
590
+ }
591
+
592
+ }
593
+ }
594
+ }
595
+
596
+ .matchid-user-popover-divider{
597
+ height: 1px;
598
+ width: 100%;
599
+ background: var(--matchid-line);
469
600
  }
package/dist/index.d.mts CHANGED
@@ -1,11 +1,13 @@
1
- import React$1, { PropsWithChildren, CSSProperties, ReactNode } from 'react';
1
+ import * as react from 'react';
2
+ import react__default, { PropsWithChildren, CSSProperties, ReactNode } from 'react';
2
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
4
  import * as viem from 'viem';
4
5
  import { SignableMessage, Hex, TransactionSerializable, Account } from 'viem';
5
6
  import * as _tanstack_react_query from '@tanstack/react-query';
6
7
  import { UseQueryOptions } from '@tanstack/react-query/src/types';
7
8
 
8
- type LoginMethodType = 'wallet' | 'email' | 'google' | 'X' | 'telegram'
9
+ type ISocialLoginMethod = 'google' | 'twitter' | 'discord' | 'github' |'telegram' | 'linkedin'
10
+ type LoginMethodType = 'wallet' | 'email' | ISocialLoginMethod
9
11
  type IEnvConfigType = {
10
12
  endpoints: {
11
13
  back: string;
@@ -37,7 +39,7 @@ type OverviewInfo = {
37
39
  identities: { [key: string]: string }
38
40
  did: string
39
41
  address: string
40
- username?:string
42
+ username?: string
41
43
  }
42
44
 
43
45
  type ModalProps = PropsWithChildren & {
@@ -94,7 +96,7 @@ type ButtonProps = {
94
96
  className?: string
95
97
  }
96
98
 
97
- type BindItemType= {
99
+ type BindItemType = {
98
100
  type: string,
99
101
  type_sort: string,
100
102
  platform_name: string,
@@ -140,6 +142,15 @@ type PohZkpassParams = {
140
142
  validatorAddress: string,
141
143
  validatorSignature: string,
142
144
  }
145
+ type PopoverPositionType = "center" | "left" | "right"
146
+ type PopoverTypeType = "hover" | "click"
147
+ type PopoverProps = PropsWithChildren & {
148
+ position?: PopoverPositionType
149
+ type?: PopoverTypeType
150
+ content: ReactNode,
151
+ className?: string,
152
+ gap?: number | string
153
+ }
143
154
 
144
155
  type MatchContextType = {
145
156
  appid: string;
@@ -150,7 +161,7 @@ type MatchContextType = {
150
161
  }) => Promise<void>;
151
162
  theme: "light" | "dark";
152
163
  } & Partial<IEnvConfigType>;
153
- declare const MatchProvider: React$1.FC<{
164
+ declare const MatchProvider: react__default.FC<{
154
165
  children: ReactNode;
155
166
  appid: string;
156
167
  events?: IMatchEvents;
@@ -172,16 +183,23 @@ declare function Input({ onChange, type, after, className, ...props }: InputProp
172
183
 
173
184
  declare function Button({ size, disabled, loading, children, onClick, highlight, block, type, rounded, className, style }: ButtonProps): react_jsx_runtime.JSX.Element;
174
185
 
175
- declare function LoginBox({ methods, inModal }: LoginBoxProps): react_jsx_runtime.JSX.Element;
176
-
177
186
  declare function Modal({ children, isOpen, width, className }: ModalProps): react_jsx_runtime.JSX.Element;
178
187
  declare function ModalWithHeader({ children, onBack, onClose, title, showBorder, showClose, ...props }: ModalWithHeaderProps): react_jsx_runtime.JSX.Element;
179
188
 
180
- declare function LoginButton({ loginRender, methods, onLoginClick, ...props }: Omit<ButtonProps, 'onClick' | 'highlight'> & {
181
- loginRender?: () => JSX.Element;
189
+ declare function Popover({ children, content, position, type, className, gap }: PopoverProps): react_jsx_runtime.JSX.Element;
190
+
191
+ declare function LoginBox({ methods, inModal }: LoginBoxProps): react_jsx_runtime.JSX.Element;
192
+
193
+ declare function LoginButton({ loginRender, methods, onLoginClick, popoverPosition, popoverType, popoverGap, ...props }: Omit<ButtonProps, 'onClick' | 'highlight'> & {
194
+ loginRender?: ReactNode;
182
195
  methods?: LoginMethodType[];
183
196
  onLoginClick?: () => void;
184
- }): react_jsx_runtime.JSX.Element;
197
+ popoverPosition?: PopoverPositionType;
198
+ popoverType: PopoverTypeType;
199
+ popoverGap?: number | string;
200
+ }): react_jsx_runtime.JSX.Element | {
201
+ loginRender: string | number | true | react.ReactElement<any, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | react.ReactPortal;
202
+ };
185
203
 
186
204
  declare function LoginPanel({ header, onClose, ...props }: LoginPanelProps): react_jsx_runtime.JSX.Element;
187
205
 
@@ -206,16 +224,18 @@ declare const index$3_LoginPanel: typeof LoginPanel;
206
224
  declare const index$3_Modal: typeof Modal;
207
225
  declare const index$3_ModalWithHeader: typeof ModalWithHeader;
208
226
  declare const index$3_PasswordModal: typeof PasswordModal;
227
+ declare const index$3_Popover: typeof Popover;
209
228
  declare const index$3_UsernameModal: typeof UsernameModal;
210
229
  declare namespace index$3 {
211
- export { index$3_Button as Button, index$3_EmailModal as EmailModal, index$3_Field as Field, index$3_Input as Input, index$3_LoginBox as LoginBox, index$3_LoginButton as LoginButton, index$3_LoginModal as LoginModal, index$3_LoginPanel as LoginPanel, index$3_Modal as Modal, index$3_ModalWithHeader as ModalWithHeader, index$3_PasswordModal as PasswordModal, index$3_UsernameModal as UsernameModal };
230
+ export { index$3_Button as Button, index$3_EmailModal as EmailModal, index$3_Field as Field, index$3_Input as Input, index$3_LoginBox as LoginBox, index$3_LoginButton as LoginButton, index$3_LoginModal as LoginModal, index$3_LoginPanel as LoginPanel, index$3_Modal as Modal, index$3_ModalWithHeader as ModalWithHeader, index$3_PasswordModal as PasswordModal, index$3_Popover as Popover, index$3_UsernameModal as UsernameModal };
212
231
  }
213
232
 
214
233
  declare function useUserInfo(): {
215
- loginByTelegram: () => void;
216
- loginByTwitter: () => void;
217
- loginByGoogle: () => void;
218
- loginByWallet: () => void;
234
+ loginByMethod: (method: ISocialLoginMethod) => Promise<Window | null>;
235
+ loginByTelegram: () => Promise<Window | null>;
236
+ loginByTwitter: () => Promise<Window | null>;
237
+ loginByGoogle: () => Promise<Window | null>;
238
+ loginByWallet: () => Promise<Window | null>;
219
239
  loginByEmail: ({ email, code }: {
220
240
  email: string;
221
241
  code: string;
@@ -233,6 +253,8 @@ declare function useUserInfo(): {
233
253
  bindTelegram: () => Promise<void>;
234
254
  username: string;
235
255
  auth: () => Promise<any>;
256
+ login: (method: LoginMethodType) => Promise<Window | null>;
257
+ bind: (method: LoginMethodType) => Promise<void | Window | null>;
236
258
  };
237
259
 
238
260
  declare function useMatchEvents(handlers: IMatchEvents): void;
@@ -259,11 +281,14 @@ interface UseWalletReturnType {
259
281
  }
260
282
  declare function useWallet(): UseWalletReturnType;
261
283
 
284
+ declare function useCopyClipboard(timeout?: number): [boolean, (toCopy: string) => void];
285
+
286
+ declare const index$2_useCopyClipboard: typeof useCopyClipboard;
262
287
  declare const index$2_useMatchEvents: typeof useMatchEvents;
263
288
  declare const index$2_useUserInfo: typeof useUserInfo;
264
289
  declare const index$2_useWallet: typeof useWallet;
265
290
  declare namespace index$2 {
266
- export { index$2_useMatchEvents as useMatchEvents, index$2_useUserInfo as useUserInfo, index$2_useWallet as useWallet };
291
+ export { index$2_useCopyClipboard as useCopyClipboard, index$2_useMatchEvents as useMatchEvents, index$2_useUserInfo as useUserInfo, index$2_useWallet as useWallet };
267
292
  }
268
293
 
269
294
  interface MyResponseType<T> {
package/dist/index.d.ts CHANGED
@@ -1,11 +1,13 @@
1
- import React$1, { PropsWithChildren, CSSProperties, ReactNode } from 'react';
1
+ import * as react from 'react';
2
+ import react__default, { PropsWithChildren, CSSProperties, ReactNode } from 'react';
2
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
4
  import * as viem from 'viem';
4
5
  import { SignableMessage, Hex, TransactionSerializable, Account } from 'viem';
5
6
  import * as _tanstack_react_query from '@tanstack/react-query';
6
7
  import { UseQueryOptions } from '@tanstack/react-query/src/types';
7
8
 
8
- type LoginMethodType = 'wallet' | 'email' | 'google' | 'X' | 'telegram'
9
+ type ISocialLoginMethod = 'google' | 'twitter' | 'discord' | 'github' |'telegram' | 'linkedin'
10
+ type LoginMethodType = 'wallet' | 'email' | ISocialLoginMethod
9
11
  type IEnvConfigType = {
10
12
  endpoints: {
11
13
  back: string;
@@ -37,7 +39,7 @@ type OverviewInfo = {
37
39
  identities: { [key: string]: string }
38
40
  did: string
39
41
  address: string
40
- username?:string
42
+ username?: string
41
43
  }
42
44
 
43
45
  type ModalProps = PropsWithChildren & {
@@ -94,7 +96,7 @@ type ButtonProps = {
94
96
  className?: string
95
97
  }
96
98
 
97
- type BindItemType= {
99
+ type BindItemType = {
98
100
  type: string,
99
101
  type_sort: string,
100
102
  platform_name: string,
@@ -140,6 +142,15 @@ type PohZkpassParams = {
140
142
  validatorAddress: string,
141
143
  validatorSignature: string,
142
144
  }
145
+ type PopoverPositionType = "center" | "left" | "right"
146
+ type PopoverTypeType = "hover" | "click"
147
+ type PopoverProps = PropsWithChildren & {
148
+ position?: PopoverPositionType
149
+ type?: PopoverTypeType
150
+ content: ReactNode,
151
+ className?: string,
152
+ gap?: number | string
153
+ }
143
154
 
144
155
  type MatchContextType = {
145
156
  appid: string;
@@ -150,7 +161,7 @@ type MatchContextType = {
150
161
  }) => Promise<void>;
151
162
  theme: "light" | "dark";
152
163
  } & Partial<IEnvConfigType>;
153
- declare const MatchProvider: React$1.FC<{
164
+ declare const MatchProvider: react__default.FC<{
154
165
  children: ReactNode;
155
166
  appid: string;
156
167
  events?: IMatchEvents;
@@ -172,16 +183,23 @@ declare function Input({ onChange, type, after, className, ...props }: InputProp
172
183
 
173
184
  declare function Button({ size, disabled, loading, children, onClick, highlight, block, type, rounded, className, style }: ButtonProps): react_jsx_runtime.JSX.Element;
174
185
 
175
- declare function LoginBox({ methods, inModal }: LoginBoxProps): react_jsx_runtime.JSX.Element;
176
-
177
186
  declare function Modal({ children, isOpen, width, className }: ModalProps): react_jsx_runtime.JSX.Element;
178
187
  declare function ModalWithHeader({ children, onBack, onClose, title, showBorder, showClose, ...props }: ModalWithHeaderProps): react_jsx_runtime.JSX.Element;
179
188
 
180
- declare function LoginButton({ loginRender, methods, onLoginClick, ...props }: Omit<ButtonProps, 'onClick' | 'highlight'> & {
181
- loginRender?: () => JSX.Element;
189
+ declare function Popover({ children, content, position, type, className, gap }: PopoverProps): react_jsx_runtime.JSX.Element;
190
+
191
+ declare function LoginBox({ methods, inModal }: LoginBoxProps): react_jsx_runtime.JSX.Element;
192
+
193
+ declare function LoginButton({ loginRender, methods, onLoginClick, popoverPosition, popoverType, popoverGap, ...props }: Omit<ButtonProps, 'onClick' | 'highlight'> & {
194
+ loginRender?: ReactNode;
182
195
  methods?: LoginMethodType[];
183
196
  onLoginClick?: () => void;
184
- }): react_jsx_runtime.JSX.Element;
197
+ popoverPosition?: PopoverPositionType;
198
+ popoverType: PopoverTypeType;
199
+ popoverGap?: number | string;
200
+ }): react_jsx_runtime.JSX.Element | {
201
+ loginRender: string | number | true | react.ReactElement<any, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | react.ReactPortal;
202
+ };
185
203
 
186
204
  declare function LoginPanel({ header, onClose, ...props }: LoginPanelProps): react_jsx_runtime.JSX.Element;
187
205
 
@@ -206,16 +224,18 @@ declare const index$3_LoginPanel: typeof LoginPanel;
206
224
  declare const index$3_Modal: typeof Modal;
207
225
  declare const index$3_ModalWithHeader: typeof ModalWithHeader;
208
226
  declare const index$3_PasswordModal: typeof PasswordModal;
227
+ declare const index$3_Popover: typeof Popover;
209
228
  declare const index$3_UsernameModal: typeof UsernameModal;
210
229
  declare namespace index$3 {
211
- export { index$3_Button as Button, index$3_EmailModal as EmailModal, index$3_Field as Field, index$3_Input as Input, index$3_LoginBox as LoginBox, index$3_LoginButton as LoginButton, index$3_LoginModal as LoginModal, index$3_LoginPanel as LoginPanel, index$3_Modal as Modal, index$3_ModalWithHeader as ModalWithHeader, index$3_PasswordModal as PasswordModal, index$3_UsernameModal as UsernameModal };
230
+ export { index$3_Button as Button, index$3_EmailModal as EmailModal, index$3_Field as Field, index$3_Input as Input, index$3_LoginBox as LoginBox, index$3_LoginButton as LoginButton, index$3_LoginModal as LoginModal, index$3_LoginPanel as LoginPanel, index$3_Modal as Modal, index$3_ModalWithHeader as ModalWithHeader, index$3_PasswordModal as PasswordModal, index$3_Popover as Popover, index$3_UsernameModal as UsernameModal };
212
231
  }
213
232
 
214
233
  declare function useUserInfo(): {
215
- loginByTelegram: () => void;
216
- loginByTwitter: () => void;
217
- loginByGoogle: () => void;
218
- loginByWallet: () => void;
234
+ loginByMethod: (method: ISocialLoginMethod) => Promise<Window | null>;
235
+ loginByTelegram: () => Promise<Window | null>;
236
+ loginByTwitter: () => Promise<Window | null>;
237
+ loginByGoogle: () => Promise<Window | null>;
238
+ loginByWallet: () => Promise<Window | null>;
219
239
  loginByEmail: ({ email, code }: {
220
240
  email: string;
221
241
  code: string;
@@ -233,6 +253,8 @@ declare function useUserInfo(): {
233
253
  bindTelegram: () => Promise<void>;
234
254
  username: string;
235
255
  auth: () => Promise<any>;
256
+ login: (method: LoginMethodType) => Promise<Window | null>;
257
+ bind: (method: LoginMethodType) => Promise<void | Window | null>;
236
258
  };
237
259
 
238
260
  declare function useMatchEvents(handlers: IMatchEvents): void;
@@ -259,11 +281,14 @@ interface UseWalletReturnType {
259
281
  }
260
282
  declare function useWallet(): UseWalletReturnType;
261
283
 
284
+ declare function useCopyClipboard(timeout?: number): [boolean, (toCopy: string) => void];
285
+
286
+ declare const index$2_useCopyClipboard: typeof useCopyClipboard;
262
287
  declare const index$2_useMatchEvents: typeof useMatchEvents;
263
288
  declare const index$2_useUserInfo: typeof useUserInfo;
264
289
  declare const index$2_useWallet: typeof useWallet;
265
290
  declare namespace index$2 {
266
- export { index$2_useMatchEvents as useMatchEvents, index$2_useUserInfo as useUserInfo, index$2_useWallet as useWallet };
291
+ export { index$2_useCopyClipboard as useCopyClipboard, index$2_useMatchEvents as useMatchEvents, index$2_useUserInfo as useUserInfo, index$2_useWallet as useWallet };
267
292
  }
268
293
 
269
294
  interface MyResponseType<T> {