examples/vite-react/src/components/custom-elements-jsx.ts 2.7 K raw
1
import type React from 'react';
2
3
declare module 'react' {
4
  namespace JSX {
5
    interface IntrinsicElements {
6
  'contract-call': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
7
    'contract-address'?: string;
8
    'chain-id'?: string;
9
    'method-name'?: string;
10
    'method-args'?: string;
11
    'abi-url'?: string;
12
    'abi'?: string;
13
    'button-text'?: string;
14
    'background'?: string;
15
    'foreground'?: string;
16
    'primary'?: string;
17
    'secondary'?: string;
18
    'border-radius'?: string;
19
    'error-color'?: string;
20
    'success-color'?: string;
21
    onAbiLoaded?: (event: CustomEvent) => void;
22
    onAbiError?: (event: CustomEvent) => void;
23
    onContractCallSuccess?: (event: CustomEvent) => void;
24
    onContractCallError?: (event: CustomEvent) => void;
25
  }, HTMLElement>;
26
  'connect-wallet': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
27
    'chain-id'?: string;
28
    'background'?: string;
29
    'foreground'?: string;
30
    'primary'?: string;
31
    'secondary'?: string;
32
    'border-radius'?: string;
33
    onWalletConnected?: (event: CustomEvent) => void;
34
    onWalletError?: (event: CustomEvent) => void;
35
    onWalletDisconnected?: (event: CustomEvent) => void;
36
  }, HTMLElement>;
37
    }
38
  }
39
40
  interface CSSProperties {
41
    // Norns UI CSS Custom Properties
42
  '--color-background'?: string;
43
  '--color-foreground'?: string;
44
  '--color-primary'?: string;
45
  '--color-secondary'?: string;
46
  '--border-radius'?: string;
47
  }
48
}
49
50
export interface CustomElements {
51
  'contract-call': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
52
    'contract-address'?: string;
53
    'chain-id'?: string;
54
    'method-name'?: string;
55
    'method-args'?: string;
56
    'abi-url'?: string;
57
    'abi'?: string;
58
    'button-text'?: string;
59
    'background'?: string;
60
    'foreground'?: string;
61
    'primary'?: string;
62
    'secondary'?: string;
63
    'border-radius'?: string;
64
    'error-color'?: string;
65
    'success-color'?: string;
66
    onAbiLoaded?: (event: CustomEvent) => void;
67
    onAbiError?: (event: CustomEvent) => void;
68
    onContractCallSuccess?: (event: CustomEvent) => void;
69
    onContractCallError?: (event: CustomEvent) => void;
70
  }, HTMLElement>;
71
  'connect-wallet': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
72
    'chain-id'?: string;
73
    'background'?: string;
74
    'foreground'?: string;
75
    'primary'?: string;
76
    'secondary'?: string;
77
    'border-radius'?: string;
78
    onWalletConnected?: (event: CustomEvent) => void;
79
    onWalletError?: (event: CustomEvent) => void;
80
    onWalletDisconnected?: (event: CustomEvent) => void;
81
  }, HTMLElement>;
82
}
83
84
export interface CustomCssProperties {
85
  '--color-background'?: string;
86
  '--color-foreground'?: string;
87
  '--color-primary'?: string;
88
  '--color-secondary'?: string;
89
  '--border-radius'?: string;
90
}