@doujins/payments-ui 0.0.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.
@@ -0,0 +1,474 @@
1
+ :root {
2
+ --payments-ui-bg: #0f1116;
3
+ --payments-ui-border: #1f2430;
4
+ --payments-ui-text: #f0f4ff;
5
+ --payments-ui-muted: #9da8c3;
6
+ --payments-ui-accent: #7c4dff;
7
+ --payments-ui-danger: #ff6b6b;
8
+ }
9
+
10
+ .payments-ui-card-form {
11
+ display: flex;
12
+ flex-direction: column;
13
+ gap: 1rem;
14
+ background: rgba(15, 17, 22, 0.85);
15
+ border: 1px solid var(--payments-ui-border);
16
+ border-radius: 1rem;
17
+ padding: 1.5rem;
18
+ color: var(--payments-ui-text);
19
+ }
20
+
21
+ .payments-ui-grid {
22
+ display: grid;
23
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
24
+ gap: 1rem;
25
+ }
26
+
27
+ .payments-ui-label {
28
+ display: flex;
29
+ flex-direction: column;
30
+ gap: 0.4rem;
31
+ font-size: 0.9rem;
32
+ }
33
+
34
+ .payments-ui-input {
35
+ border-radius: 0.6rem;
36
+ border: 1px solid var(--payments-ui-border);
37
+ background: rgba(0, 0, 0, 0.35);
38
+ color: var(--payments-ui-text);
39
+ padding: 0.65rem 0.85rem;
40
+ font-size: 0.95rem;
41
+ }
42
+
43
+ .payments-ui-input:focus {
44
+ outline: 2px solid var(--payments-ui-accent);
45
+ outline-offset: 1px;
46
+ }
47
+
48
+ .payments-ui-icon {
49
+ width: 1rem;
50
+ height: 1rem;
51
+ }
52
+
53
+ .payments-ui-country {
54
+ position: relative;
55
+ }
56
+
57
+ .payments-ui-country-toggle {
58
+ width: 100%;
59
+ border-radius: 0.6rem;
60
+ border: 1px solid var(--payments-ui-border);
61
+ background: rgba(0, 0, 0, 0.35);
62
+ color: var(--payments-ui-text);
63
+ padding: 0.65rem 0.85rem;
64
+ font-size: 0.95rem;
65
+ display: flex;
66
+ align-items: center;
67
+ justify-content: space-between;
68
+ gap: 0.4rem;
69
+ }
70
+
71
+ .payments-ui-country-menu {
72
+ position: absolute;
73
+ inset: auto 0;
74
+ top: calc(100% + 0.25rem);
75
+ z-index: 10;
76
+ background: var(--payments-ui-bg);
77
+ border: 1px solid var(--payments-ui-border);
78
+ border-radius: 0.75rem;
79
+ max-height: 14rem;
80
+ overflow: hidden;
81
+ display: flex;
82
+ flex-direction: column;
83
+ }
84
+
85
+ .payments-ui-country-search {
86
+ display: flex;
87
+ align-items: center;
88
+ gap: 0.5rem;
89
+ padding: 0.5rem 0.75rem;
90
+ border-bottom: 1px solid var(--payments-ui-border);
91
+ }
92
+
93
+ .payments-ui-country-search input {
94
+ flex: 1;
95
+ background: transparent;
96
+ border: none;
97
+ color: var(--payments-ui-text);
98
+ font-size: 0.9rem;
99
+ }
100
+
101
+ .payments-ui-country-search input:focus {
102
+ outline: none;
103
+ }
104
+
105
+ .payments-ui-country-menu ul {
106
+ list-style: none;
107
+ margin: 0;
108
+ padding: 0;
109
+ max-height: 10rem;
110
+ overflow-y: auto;
111
+ }
112
+
113
+ .payments-ui-country-menu li button {
114
+ width: 100%;
115
+ background: transparent;
116
+ border: none;
117
+ text-align: left;
118
+ padding: 0.6rem 0.85rem;
119
+ color: var(--payments-ui-text);
120
+ font-size: 0.9rem;
121
+ }
122
+
123
+ .payments-ui-country-menu li button:hover {
124
+ background: rgba(124, 77, 255, 0.25);
125
+ }
126
+
127
+ .payments-ui-collect-field {
128
+ border-radius: 0.6rem;
129
+ border: 1px dashed var(--payments-ui-border);
130
+ padding: 0.75rem;
131
+ min-height: 48px;
132
+ }
133
+
134
+ .payments-ui-error {
135
+ color: var(--payments-ui-danger);
136
+ font-size: 0.9rem;
137
+ }
138
+
139
+ .payments-ui-button {
140
+ border: none;
141
+ border-radius: 0.75rem;
142
+ padding: 0.85rem 1.25rem;
143
+ font-size: 1rem;
144
+ font-weight: 600;
145
+ background: linear-gradient(135deg, #7c4dff, #44c2ff);
146
+ color: #fff;
147
+ display: inline-flex;
148
+ align-items: center;
149
+ gap: 0.4rem;
150
+ justify-content: center;
151
+ cursor: pointer;
152
+ transition: opacity 0.2s ease;
153
+ }
154
+
155
+ .payments-ui-button:disabled {
156
+ opacity: 0.6;
157
+ cursor: not-allowed;
158
+ }
159
+
160
+ .payments-ui-spinner {
161
+ width: 1rem;
162
+ height: 1rem;
163
+ animation: payments-ui-spin 1s linear infinite;
164
+ }
165
+
166
+ .payments-ui-status {
167
+ text-align: center;
168
+ padding: 1.5rem;
169
+ border-radius: 1rem;
170
+ border: 1px solid var(--payments-ui-border);
171
+ background: rgba(255, 255, 255, 0.02);
172
+ display: flex;
173
+ flex-direction: column;
174
+ gap: 0.75rem;
175
+ align-items: center;
176
+ }
177
+
178
+ .payments-ui-status.success {
179
+ border-color: rgba(0, 200, 160, 0.4);
180
+ }
181
+
182
+ .payments-ui-status.error {
183
+ border-color: rgba(255, 107, 107, 0.4);
184
+ }
185
+
186
+ .payments-ui-status-icon {
187
+ width: 2.5rem;
188
+ height: 2.5rem;
189
+ }
190
+
191
+ .payments-ui-status-meta {
192
+ font-size: 0.85rem;
193
+ color: var(--payments-ui-muted);
194
+ }
195
+
196
+ .payments-ui-status-actions {
197
+ display: flex;
198
+ gap: 0.75rem;
199
+ flex-wrap: wrap;
200
+ justify-content: center;
201
+ }
202
+
203
+ .payments-ui-experience {
204
+ display: flex;
205
+ flex-direction: column;
206
+ gap: 1.5rem;
207
+ }
208
+
209
+ .payments-ui-experience-header {
210
+ display: flex;
211
+ justify-content: space-between;
212
+ gap: 1rem;
213
+ align-items: center;
214
+ }
215
+
216
+ .payments-ui-experience-header h2 {
217
+ display: flex;
218
+ align-items: center;
219
+ gap: 0.5rem;
220
+ margin: 0;
221
+ }
222
+
223
+ .payments-ui-summary {
224
+ min-width: 200px;
225
+ text-align: right;
226
+ color: var(--payments-ui-muted);
227
+ }
228
+
229
+ .payments-ui-experience-grid {
230
+ display: grid;
231
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
232
+ gap: 1.25rem;
233
+ }
234
+
235
+ .payments-ui-column {
236
+ display: flex;
237
+ flex-direction: column;
238
+ gap: 1rem;
239
+ }
240
+
241
+ .payments-ui-solana-banner {
242
+ border-radius: 1rem;
243
+ border: 1px solid rgba(124, 77, 255, 0.4);
244
+ padding: 1rem;
245
+ display: flex;
246
+ justify-content: space-between;
247
+ align-items: center;
248
+ gap: 1rem;
249
+ background: rgba(124, 77, 255, 0.1);
250
+ }
251
+
252
+ .payments-ui-panel {
253
+ background: rgba(15, 17, 22, 0.92);
254
+ border: 1px solid var(--payments-ui-border);
255
+ border-radius: 1rem;
256
+ padding: 1.5rem;
257
+ display: flex;
258
+ flex-direction: column;
259
+ gap: 1rem;
260
+ }
261
+
262
+ .payments-ui-panel-header {
263
+ display: flex;
264
+ justify-content: space-between;
265
+ align-items: center;
266
+ gap: 1rem;
267
+ }
268
+
269
+ .payments-ui-panel-title {
270
+ display: flex;
271
+ align-items: center;
272
+ gap: 0.5rem;
273
+ font-weight: 600;
274
+ }
275
+
276
+ .payments-ui-panel-description {
277
+ color: var(--payments-ui-muted);
278
+ font-size: 0.9rem;
279
+ }
280
+
281
+ .payments-ui-panel-body {
282
+ display: flex;
283
+ flex-direction: column;
284
+ gap: 0.75rem;
285
+ }
286
+
287
+ .payments-ui-empty {
288
+ padding: 1.25rem;
289
+ border-radius: 0.85rem;
290
+ background: rgba(255, 255, 255, 0.03);
291
+ color: var(--payments-ui-muted);
292
+ display: flex;
293
+ align-items: center;
294
+ gap: 0.5rem;
295
+ justify-content: center;
296
+ }
297
+
298
+ .payments-ui-method-list {
299
+ display: flex;
300
+ flex-direction: column;
301
+ gap: 0.75rem;
302
+ }
303
+
304
+ .payments-ui-method-item {
305
+ border: 1px solid var(--payments-ui-border);
306
+ border-radius: 0.85rem;
307
+ padding: 1rem;
308
+ display: flex;
309
+ justify-content: space-between;
310
+ align-items: center;
311
+ gap: 1rem;
312
+ background: rgba(255, 255, 255, 0.015);
313
+ }
314
+
315
+ .payments-ui-method-item.is-selected {
316
+ border-color: var(--payments-ui-accent);
317
+ background: rgba(124, 77, 255, 0.15);
318
+ }
319
+
320
+ .payments-ui-method-label {
321
+ font-weight: 600;
322
+ }
323
+
324
+ .payments-ui-method-meta {
325
+ color: var(--payments-ui-muted);
326
+ font-size: 0.85rem;
327
+ }
328
+
329
+ .payments-ui-method-actions {
330
+ display: flex;
331
+ align-items: center;
332
+ gap: 0.5rem;
333
+ }
334
+
335
+ .payments-ui-text-button {
336
+ border: none;
337
+ background: none;
338
+ color: var(--payments-ui-accent);
339
+ font-weight: 600;
340
+ cursor: pointer;
341
+ }
342
+
343
+ .payments-ui-icon-button {
344
+ border: 1px solid var(--payments-ui-border);
345
+ border-radius: 0.65rem;
346
+ background: transparent;
347
+ color: var(--payments-ui-text);
348
+ width: 2.25rem;
349
+ height: 2.25rem;
350
+ display: inline-flex;
351
+ align-items: center;
352
+ justify-content: center;
353
+ }
354
+
355
+ .payments-ui-icon-button.payments-ui-danger {
356
+ border-color: rgba(255, 107, 107, 0.4);
357
+ color: var(--payments-ui-danger);
358
+ }
359
+
360
+ .payments-ui-balance-row {
361
+ display: flex;
362
+ align-items: center;
363
+ justify-content: space-between;
364
+ padding: 0.75rem 0;
365
+ border-bottom: 1px solid var(--payments-ui-border);
366
+ font-size: 0.95rem;
367
+ }
368
+
369
+ .payments-ui-modal-overlay {
370
+ position: fixed;
371
+ inset: 0;
372
+ background: rgba(0, 0, 0, 0.6);
373
+ backdrop-filter: blur(4px);
374
+ }
375
+
376
+ .payments-ui-modal {
377
+ position: fixed;
378
+ top: 50%;
379
+ left: 50%;
380
+ transform: translate(-50%, -50%);
381
+ background: var(--payments-ui-bg);
382
+ border: 1px solid var(--payments-ui-border);
383
+ border-radius: 1rem;
384
+ padding: 1.5rem;
385
+ width: min(520px, calc(100vw - 2rem));
386
+ max-height: 90vh;
387
+ overflow-y: auto;
388
+ }
389
+
390
+ .payments-ui-modal-header {
391
+ display: flex;
392
+ justify-content: space-between;
393
+ align-items: flex-start;
394
+ margin-bottom: 1rem;
395
+ gap: 1rem;
396
+ }
397
+
398
+ .payments-ui-tab-header {
399
+ display: grid;
400
+ grid-template-columns: repeat(2, minmax(0, 1fr));
401
+ gap: 0.5rem;
402
+ margin-bottom: 1rem;
403
+ }
404
+
405
+ .payments-ui-tab-header button {
406
+ border-radius: 0.75rem;
407
+ border: 1px solid var(--payments-ui-border);
408
+ background: transparent;
409
+ color: var(--payments-ui-text);
410
+ padding: 0.65rem 0.85rem;
411
+ }
412
+
413
+ .payments-ui-tab-header button.active {
414
+ border-color: var(--payments-ui-accent);
415
+ background: rgba(124, 77, 255, 0.2);
416
+ }
417
+
418
+ .payments-ui-token-select {
419
+ display: flex;
420
+ flex-direction: column;
421
+ gap: 0.4rem;
422
+ margin-bottom: 1rem;
423
+ }
424
+
425
+ .payments-ui-token-select label {
426
+ display: flex;
427
+ flex-direction: column;
428
+ gap: 0.35rem;
429
+ font-size: 0.9rem;
430
+ }
431
+
432
+ .payments-ui-token-select select {
433
+ border-radius: 0.6rem;
434
+ border: 1px solid var(--payments-ui-border);
435
+ background: rgba(0, 0, 0, 0.3);
436
+ color: var(--payments-ui-text);
437
+ padding: 0.65rem 0.85rem;
438
+ }
439
+
440
+ .payments-ui-token-meta {
441
+ color: var(--payments-ui-muted);
442
+ font-size: 0.85rem;
443
+ }
444
+
445
+ .payments-ui-qr-wrapper {
446
+ display: flex;
447
+ justify-content: center;
448
+ align-items: center;
449
+ padding: 1rem;
450
+ border-radius: 1rem;
451
+ background: rgba(255, 255, 255, 0.04);
452
+ border: 1px dashed var(--payments-ui-border);
453
+ }
454
+
455
+ .payments-ui-qr-wrapper img {
456
+ width: 320px;
457
+ height: 320px;
458
+ object-fit: contain;
459
+ }
460
+
461
+ .payments-ui-countdown {
462
+ text-align: center;
463
+ font-size: 0.9rem;
464
+ color: var(--payments-ui-muted);
465
+ }
466
+
467
+ @keyframes payments-ui-spin {
468
+ from {
469
+ transform: rotate(0deg);
470
+ }
471
+ to {
472
+ transform: rotate(360deg);
473
+ }
474
+ }
package/package.json ADDED
@@ -0,0 +1,61 @@
1
+ {
2
+ "name": "@doujins/payments-ui",
3
+ "version": "0.0.0",
4
+ "description": "Payments UI",
5
+ "type": "module",
6
+ "main": "dist/index.cjs",
7
+ "module": "dist/index.js",
8
+ "types": "dist/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "types": "./dist/index.d.ts",
12
+ "import": "./dist/index.js",
13
+ "require": "./dist/index.cjs"
14
+ },
15
+ "./styles.css": "./dist/styles.css"
16
+ },
17
+ "files": [
18
+ "dist"
19
+ ],
20
+ "scripts": {
21
+ "build": "tsup --config tsup.config.ts && cp src/styles.css dist/styles.css",
22
+ "dev": "tsup --config tsup.config.ts --watch",
23
+ "typecheck": "tsc --noEmit"
24
+ },
25
+ "keywords": [
26
+ "payments",
27
+ "solana",
28
+ "ui"
29
+ ],
30
+ "author": "Doujins",
31
+ "license": "MIT",
32
+ "peerDependencies": {
33
+ "@solana/spl-token": "^0.4.8",
34
+ "@solana/wallet-adapter-react": "^0.15.0",
35
+ "@solana/web3.js": "^1.90.0",
36
+ "@tanstack/react-query": "^5.0.0",
37
+ "react": "^18.0.0 || ^19.0.0",
38
+ "react-dom": "^18.0.0 || ^19.0.0"
39
+ },
40
+ "devDependencies": {
41
+ "@solana/spl-token": "^0.4.8",
42
+ "@types/country-list": "^2.1.4",
43
+ "@types/qrcode": "^1.5.6",
44
+ "@types/react": "^19.0.2",
45
+ "@types/react-dom": "^19.0.2",
46
+ "autoprefixer": "^10.4.20",
47
+ "postcss": "^8.4.49",
48
+ "tailwindcss": "^3.4.17",
49
+ "tsup": "^8.4.0",
50
+ "typescript": "^5.7.2"
51
+ },
52
+ "dependencies": {
53
+ "@radix-ui/react-dialog": "^1.1.4",
54
+ "buffer": "^6.0.3",
55
+ "clsx": "^2.1.1",
56
+ "country-list": "^2.3.0",
57
+ "lucide-react": "^0.469.0",
58
+ "qrcode": "^1.5.4",
59
+ "zustand": "^5.0.8"
60
+ }
61
+ }