@btc-vision/walletconnect 1.5.7 → 1.6.0
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/build/utils/style.css +135 -0
- package/build/utils/theme.css +26 -0
- package/gulpfile.js +104 -6
- package/package.json +1 -1
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
.wallet-connect-modal-backdrop {
|
|
2
|
+
position: fixed;
|
|
3
|
+
top: 0;
|
|
4
|
+
left: 0;
|
|
5
|
+
width: 100%;
|
|
6
|
+
height: 100%;
|
|
7
|
+
background-color: rgba(10, 11, 13, 0.5);
|
|
8
|
+
backdrop-filter: blur(10px);
|
|
9
|
+
z-index: 9999;
|
|
10
|
+
display: flex;
|
|
11
|
+
justify-content: center;
|
|
12
|
+
align-items: center;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.wallet-connect-modal {
|
|
16
|
+
background-color: var(--background-color);
|
|
17
|
+
border: 1px solid var(--border-color);
|
|
18
|
+
color: var(--primaryColor);
|
|
19
|
+
border-radius: 8px;
|
|
20
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
21
|
+
width: 400px;
|
|
22
|
+
max-width: 90%;
|
|
23
|
+
z-index: 10000;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.wallet-connect-header {
|
|
27
|
+
padding: 16px;
|
|
28
|
+
border-bottom: 1px solid var(--border-color);
|
|
29
|
+
display: flex;
|
|
30
|
+
align-items: center;
|
|
31
|
+
justify-content: space-between;
|
|
32
|
+
font-size: 14px;
|
|
33
|
+
font-weight: bold;
|
|
34
|
+
user-select: none;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.wallet-connect-header > button.close {
|
|
38
|
+
width: 30px;
|
|
39
|
+
height: 30px;
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
justify-content: center;
|
|
43
|
+
color: var(--primaryColor);
|
|
44
|
+
fill: var(--primaryColor);
|
|
45
|
+
background-color: var(--background-color);
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
}
|
|
48
|
+
.wallet-connect-header > button.close:hover {
|
|
49
|
+
border: 1px solid rgba(254, 121, 1, 0.3);
|
|
50
|
+
background-color: rgba(254, 121, 1, 0.1);
|
|
51
|
+
}
|
|
52
|
+
.wallet-connect-header > button.close svg {
|
|
53
|
+
display: flex;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.wallet-connect-header > button.close .close-x-path {
|
|
57
|
+
stroke: var(--primaryColor);
|
|
58
|
+
transition: stroke 0.2s ease;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.wallet-connect-header > button.close:hover .close-x-path {
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.wallet-list {
|
|
65
|
+
max-height: 400px;
|
|
66
|
+
overflow-y: auto;
|
|
67
|
+
padding: 16px;
|
|
68
|
+
display: flex;
|
|
69
|
+
flex-direction: column;
|
|
70
|
+
gap: 10px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.wallet-list > button {
|
|
74
|
+
display: flex;
|
|
75
|
+
align-items: center;
|
|
76
|
+
gap: 12px;
|
|
77
|
+
height: 64px;
|
|
78
|
+
justify-content: space-between;
|
|
79
|
+
padding: 12px;
|
|
80
|
+
color: #fff;
|
|
81
|
+
width: 100%;
|
|
82
|
+
text-align: left;
|
|
83
|
+
cursor: pointer;
|
|
84
|
+
border-radius: 10px;
|
|
85
|
+
border: 1px solid var(--border-color);
|
|
86
|
+
background-color: var(--button-background-color);
|
|
87
|
+
}
|
|
88
|
+
.wallet-list > button:disabled {
|
|
89
|
+
opacity: 0.3;
|
|
90
|
+
cursor: not-allowed;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.wallet-list > button:hover {
|
|
94
|
+
border: 1px solid rgba(254, 121, 1, 0.3);
|
|
95
|
+
background-color: rgba(254, 121, 1, 0.1);
|
|
96
|
+
}
|
|
97
|
+
.wallet-icon {
|
|
98
|
+
display: flex;
|
|
99
|
+
}
|
|
100
|
+
.wallet-icon img {
|
|
101
|
+
max-height: 32px;
|
|
102
|
+
filter: var(--icon-filter);
|
|
103
|
+
}
|
|
104
|
+
.wallet-name {
|
|
105
|
+
font-size: x-large;
|
|
106
|
+
text-align: left;
|
|
107
|
+
}
|
|
108
|
+
.wallet-connected {
|
|
109
|
+
padding: 10px;
|
|
110
|
+
font-size: medium;
|
|
111
|
+
color: green;
|
|
112
|
+
}
|
|
113
|
+
div.wallet-not-installed {
|
|
114
|
+
padding: 10px;
|
|
115
|
+
font-size: medium;
|
|
116
|
+
}
|
|
117
|
+
div.wallet-waiting-plugin {
|
|
118
|
+
padding: 10px;
|
|
119
|
+
font-size: medium;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.wallet-connect-error {
|
|
123
|
+
padding: 16px 16px 0;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.wallet-connect-error > p {
|
|
127
|
+
color: #ff4d4d;
|
|
128
|
+
text-align: center;
|
|
129
|
+
background-color: rgba(255, 77, 77, 0.1);
|
|
130
|
+
font-size: 14px;
|
|
131
|
+
font-weight: bolder;
|
|
132
|
+
padding: 20px 10px;
|
|
133
|
+
border-radius: 10px;
|
|
134
|
+
border: 1px solid #ff4d4d;
|
|
135
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
.wallet-connect-light-theme {
|
|
2
|
+
--background-color: #fafafa;
|
|
3
|
+
--primaryColor: #000000;
|
|
4
|
+
--border-color: #bbbbbb;
|
|
5
|
+
|
|
6
|
+
--button-background-color: #ffffff;
|
|
7
|
+
--icon-filter: invert(1) hue-rotate(180deg) !important;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.wallet-connect-dark-theme {
|
|
11
|
+
--background-color: #1e1e1e;
|
|
12
|
+
--primaryColor: #ffffff;
|
|
13
|
+
--border-color: #333333;
|
|
14
|
+
|
|
15
|
+
--button-background-color: #2a2a2a;
|
|
16
|
+
--icon-filter: unset;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.wallet-connect-moto-theme {
|
|
20
|
+
--background-color: #171239;
|
|
21
|
+
--primaryColor: #9698e2;
|
|
22
|
+
--border-color: #201b4e;
|
|
23
|
+
|
|
24
|
+
--button-background-color: #140932;
|
|
25
|
+
--icon-filter: unset;
|
|
26
|
+
}
|
package/gulpfile.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import gulp from 'gulp';
|
|
2
2
|
import gulpcache from 'gulp-cached';
|
|
3
|
-
import gulpESLintNew from 'gulp-eslint-new';
|
|
4
|
-
|
|
5
3
|
import gulpClean from 'gulp-clean';
|
|
4
|
+
import gulpESLintNew from 'gulp-eslint-new';
|
|
6
5
|
import logger from 'gulp-logger-new';
|
|
7
6
|
import ts from 'gulp-typescript';
|
|
8
7
|
|
|
@@ -14,14 +13,15 @@ const tsProject = ts.createProject('tsconfig.json', {
|
|
|
14
13
|
jsx: 'react-jsx',
|
|
15
14
|
});
|
|
16
15
|
|
|
16
|
+
// TypeScript/JavaScript build
|
|
17
17
|
function buildESM() {
|
|
18
18
|
return tsProject
|
|
19
19
|
.src()
|
|
20
20
|
.pipe(gulpcache('ts-esm'))
|
|
21
21
|
.pipe(
|
|
22
22
|
logger({
|
|
23
|
-
before: 'Starting...',
|
|
24
|
-
after: '
|
|
23
|
+
before: 'Starting TypeScript compilation...',
|
|
24
|
+
after: 'TypeScript compiled!',
|
|
25
25
|
extname: '.js',
|
|
26
26
|
showChange: true,
|
|
27
27
|
}),
|
|
@@ -32,16 +32,114 @@ function buildESM() {
|
|
|
32
32
|
.pipe(gulp.dest('build'));
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
// Copy CSS files
|
|
36
|
+
function copyCSS() {
|
|
37
|
+
return gulp
|
|
38
|
+
.src(['src/**/*.css', 'src/**/*.scss', 'src/**/*.sass'], { base: 'src' })
|
|
39
|
+
.pipe(gulpcache('css'))
|
|
40
|
+
.pipe(
|
|
41
|
+
logger({
|
|
42
|
+
before: 'Copying CSS files...',
|
|
43
|
+
after: 'CSS files copied!',
|
|
44
|
+
showChange: true,
|
|
45
|
+
}),
|
|
46
|
+
)
|
|
47
|
+
.pipe(gulp.dest('build'));
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
// Copy static assets (images, fonts, etc.)
|
|
51
|
+
function copyAssets() {
|
|
52
|
+
return gulp
|
|
53
|
+
.src(
|
|
54
|
+
[
|
|
55
|
+
'src/**/*.png',
|
|
56
|
+
'src/**/*.jpg',
|
|
57
|
+
'src/**/*.jpeg',
|
|
58
|
+
'src/**/*.gif',
|
|
59
|
+
'src/**/*.svg',
|
|
60
|
+
'src/**/*.ico',
|
|
61
|
+
'src/**/*.woff',
|
|
62
|
+
'src/**/*.woff2',
|
|
63
|
+
'src/**/*.ttf',
|
|
64
|
+
'src/**/*.eot',
|
|
65
|
+
'src/**/*.otf',
|
|
66
|
+
'src/**/*.json',
|
|
67
|
+
'!src/**/*.config.json', // Exclude config files if needed
|
|
68
|
+
'!src/**/tsconfig.json',
|
|
69
|
+
],
|
|
70
|
+
{ base: 'src' },
|
|
71
|
+
)
|
|
72
|
+
.pipe(gulpcache('assets'))
|
|
73
|
+
.pipe(
|
|
74
|
+
logger({
|
|
75
|
+
before: 'Copying assets...',
|
|
76
|
+
after: 'Assets copied!',
|
|
77
|
+
showChange: true,
|
|
78
|
+
}),
|
|
79
|
+
)
|
|
80
|
+
.pipe(gulp.dest('build'));
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// Copy HTML files if any
|
|
84
|
+
function copyHTML() {
|
|
85
|
+
return gulp
|
|
86
|
+
.src('src/**/*.html', { base: 'src' })
|
|
87
|
+
.pipe(gulpcache('html'))
|
|
88
|
+
.pipe(
|
|
89
|
+
logger({
|
|
90
|
+
before: 'Copying HTML files...',
|
|
91
|
+
after: 'HTML files copied!',
|
|
92
|
+
showChange: true,
|
|
93
|
+
}),
|
|
94
|
+
)
|
|
95
|
+
.pipe(gulp.dest('build'));
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
// Clean build directory
|
|
35
99
|
export async function clean() {
|
|
36
|
-
return gulp.src('./build
|
|
100
|
+
return gulp.src('./build', { read: false, allowEmpty: true }).pipe(gulpClean());
|
|
37
101
|
}
|
|
38
102
|
|
|
39
|
-
|
|
103
|
+
// Build all
|
|
104
|
+
export const build = gulp.parallel(buildESM, copyCSS, copyAssets, copyHTML);
|
|
105
|
+
|
|
106
|
+
// Default task
|
|
40
107
|
export default build;
|
|
41
108
|
|
|
109
|
+
// Watch task with all file types
|
|
42
110
|
export function watch() {
|
|
111
|
+
// Watch TypeScript/JavaScript files
|
|
43
112
|
gulp.watch(
|
|
44
113
|
['src/**/*.ts', 'src/**/*.tsx', 'src/**/*.js', 'src/**/*.jsx'],
|
|
45
114
|
gulp.series(buildESM),
|
|
46
115
|
);
|
|
116
|
+
|
|
117
|
+
// Watch CSS files
|
|
118
|
+
gulp.watch(['src/**/*.css', 'src/**/*.scss', 'src/**/*.sass'], gulp.series(copyCSS));
|
|
119
|
+
|
|
120
|
+
// Watch assets
|
|
121
|
+
gulp.watch(
|
|
122
|
+
[
|
|
123
|
+
'src/**/*.png',
|
|
124
|
+
'src/**/*.jpg',
|
|
125
|
+
'src/**/*.jpeg',
|
|
126
|
+
'src/**/*.gif',
|
|
127
|
+
'src/**/*.svg',
|
|
128
|
+
'src/**/*.ico',
|
|
129
|
+
'src/**/*.woff',
|
|
130
|
+
'src/**/*.woff2',
|
|
131
|
+
'src/**/*.ttf',
|
|
132
|
+
'src/**/*.eot',
|
|
133
|
+
'src/**/*.otf',
|
|
134
|
+
'src/**/*.json',
|
|
135
|
+
],
|
|
136
|
+
gulp.series(copyAssets),
|
|
137
|
+
);
|
|
138
|
+
|
|
139
|
+
// Watch HTML files
|
|
140
|
+
gulp.watch(['src/**/*.html'], gulp.series(copyHTML));
|
|
47
141
|
}
|
|
142
|
+
|
|
143
|
+
// Additional utility tasks
|
|
144
|
+
export const cleanBuild = gulp.series(clean, build);
|
|
145
|
+
export const dev = gulp.series(build, watch);
|
package/package.json
CHANGED