@bufinance/web3-signin 0.2.0 → 0.2.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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/react/wallet-panel.tsx +51 -60
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bufinance/web3-signin",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "description": "Headless cross-app Web3 wallet sign-in for BUFI: EIP-6963 wallet discovery + Supabase signInWithWeb3 (EIP-4361) + Turnstile captcha. Shared by desk-v1 and defi-web-app. Source of truth lives here; both apps consume it.",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
package/src/react/wallet-panel.tsx CHANGED
@@ -32,54 +32,58 @@ import {
32
32
  // ink #6954cf / dark #E2D0FD accent #9E84FF
33
33
  // surface bg #fff border #dad4f4 dark bg #1E1633 border #3A2E63
34
34
  // interactive hover bg #f5f3ff dark hover bg #2B224B
35
+ // Dark mode follows EITHER an ancestor `.dark` class (Tailwind's class strategy,
36
+ // which both apps use) OR an explicit data-theme="dark" on the root — so the
37
+ // host never has to thread a theme prop; it just works under the app's `.dark`.
35
38
  const STYLE_ID = "bufi-wallet-panel-style";
36
39
  const PANEL_CSS = `
37
- .bwp-root{box-sizing:border-box;width:calc(100vw - 32px);max-width:340px;padding:16px;border-radius:9px;
38
- border:1px solid #dad4f4;background:#fff;color:#6954cf;
40
+ .bwp-root{
41
+ --bwp-bg:#fff;--bwp-border:#dad4f4;--bwp-ink:#6954cf;--bwp-ink-60:rgba(105,84,207,.6);
42
+ --bwp-ink-30:rgba(105,84,207,.3);--bwp-hover:#f5f3ff;--bwp-menu-bg:#fff;
43
+ --bwp-menu-shadow:0 8px 24px rgba(60,40,120,.16);--bwp-check:#6954cf;--bwp-more:rgba(105,84,207,.5);
44
+ --bwp-tab-hover:rgba(245,243,255,.5);--bwp-tab-on-border:#6954cf;--bwp-tab-on-bg:#f5f3ff;
45
+ --bwp-tab-label:rgba(105,84,207,.7);--bwp-tab-label-on:#6a55cf;--bwp-spin:rgba(105,84,207,.4);
46
+ --bwp-empty:rgba(105,84,207,.3);
47
+ box-sizing:border-box;width:calc(100vw - 32px);max-width:340px;padding:16px;border-radius:9px;
48
+ border:1px solid var(--bwp-border);background:var(--bwp-bg);color:var(--bwp-ink);
39
49
  font-family:inherit;-webkit-font-smoothing:antialiased;}
40
50
  .bwp-root.bwp-team{max-width:380px;}
41
- .bwp-root[data-theme="dark"]{border-color:#3A2E63;background:#1E1633;color:#E2D0FD;}
51
+ .bwp-root[data-theme="dark"], .dark .bwp-root{
52
+ --bwp-bg:#1E1633;--bwp-border:#3A2E63;--bwp-ink:#E2D0FD;--bwp-ink-60:rgba(226,208,253,.6);
53
+ --bwp-ink-30:rgba(226,208,253,.35);--bwp-hover:#2B224B;--bwp-menu-bg:#221a36;
54
+ --bwp-menu-shadow:0 8px 24px rgba(0,0,0,.5);--bwp-check:#9E84FF;--bwp-more:rgba(226,208,253,.5);
55
+ --bwp-tab-hover:rgba(30,22,51,.6);--bwp-tab-on-border:#3A2E63;--bwp-tab-on-bg:#1E1633;
56
+ --bwp-tab-label:rgba(226,208,253,.7);--bwp-tab-label-on:#E2D0FD;--bwp-spin:rgba(226,208,253,.4);
57
+ --bwp-empty:rgba(226,208,253,.4);}
42
58
  .bwp-root *{box-sizing:border-box;}
43
59
 
44
60
  .bwp-row{display:flex;align-items:center;gap:10px;}
45
- .bwp-label{flex-shrink:0;width:46px;font-size:11px;line-height:1.15;font-weight:500;
46
- color:rgba(105,84,207,.6);}
47
- .bwp-root[data-theme="dark"] .bwp-label{color:rgba(226,208,253,.6);}
61
+ .bwp-label{flex-shrink:0;width:46px;font-size:11px;line-height:1.15;font-weight:500;color:var(--bwp-ink-60);}
48
62
 
49
- .bwp-ctl{display:inline-flex;align-items:center;gap:4px;border:1px solid #dad4f4;border-radius:6px;
50
- background:#fff;transition:background-color .15s;cursor:pointer;}
51
- .bwp-root[data-theme="dark"] .bwp-ctl{border-color:#3A2E63;background:#1E1633;}
63
+ .bwp-ctl{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--bwp-border);border-radius:6px;
64
+ background:var(--bwp-bg);transition:background-color .15s;cursor:pointer;}
52
65
  .bwp-ctl--int{padding:6px 8px;flex-shrink:0;}
53
- .bwp-ctl--int:hover{background:#f5f3ff;}
54
- .bwp-root[data-theme="dark"] .bwp-ctl--int:hover{background:#2B224B;}
66
+ .bwp-ctl--int:hover{background:var(--bwp-hover);}
55
67
  .bwp-ctl--int:disabled{opacity:.5;cursor:default;}
56
68
 
57
- .bwp-pill{display:flex;align-items:center;flex:1 1 auto;min-width:0;border:1px solid #dad4f4;border-radius:6px;background:#fff;}
58
- .bwp-root[data-theme="dark"] .bwp-pill{border-color:#3A2E63;background:#1E1633;}
69
+ .bwp-pill{display:flex;align-items:center;flex:1 1 auto;min-width:0;border:1px solid var(--bwp-border);
70
+ border-radius:6px;background:var(--bwp-bg);}
59
71
  .bwp-pill--bal{padding:4px 12px;}
60
72
  .bwp-pill--addr{padding:6px 12px;gap:6px;}
61
73
 
62
- .bwp-cur-label{font-size:14px;font-weight:500;color:#6954cf;}
63
- .bwp-root[data-theme="dark"] .bwp-cur-label{color:#E2D0FD;}
64
- .bwp-amount{margin-left:auto;font-size:18px;font-weight:700;color:#6954cf;font-variant-numeric:tabular-nums;}
65
- .bwp-root[data-theme="dark"] .bwp-amount{color:#E2D0FD;}
74
+ .bwp-cur-label{font-size:14px;font-weight:500;color:var(--bwp-ink);}
75
+ .bwp-amount{margin-left:auto;font-size:18px;font-weight:700;color:var(--bwp-ink);font-variant-numeric:tabular-nums;}
66
76
 
67
- .bwp-addr{font-size:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#6954cf;
77
+ .bwp-addr{font-size:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--bwp-ink);
68
78
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
69
- .bwp-root[data-theme="dark"] .bwp-addr{color:#E2D0FD;}
70
79
  .bwp-addr-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:auto;}
71
- .bwp-iconbtn{display:inline-flex;color:rgba(105,84,207,.3);background:none;border:0;padding:0;cursor:pointer;
80
+ .bwp-iconbtn{display:inline-flex;color:var(--bwp-ink-30);background:none;border:0;padding:0;cursor:pointer;
72
81
  transition:color .15s;text-decoration:none;}
73
- .bwp-iconbtn:hover{color:#6954cf;}
74
- .bwp-root[data-theme="dark"] .bwp-iconbtn{color:rgba(226,208,253,.35);}
75
- .bwp-root[data-theme="dark"] .bwp-iconbtn:hover{color:#E2D0FD;}
76
- .bwp-addr-empty{font-size:14px;font-style:italic;color:rgba(105,84,207,.3);}
77
- .bwp-root[data-theme="dark"] .bwp-addr-empty{color:rgba(226,208,253,.4);}
82
+ .bwp-iconbtn:hover{color:var(--bwp-ink);}
83
+ .bwp-addr-empty{font-size:14px;font-style:italic;color:var(--bwp-empty);}
78
84
 
79
- .bwp-chev{color:rgba(105,84,207,.6);flex-shrink:0;}
80
- .bwp-root[data-theme="dark"] .bwp-chev{color:rgba(226,208,253,.6);}
81
- .bwp-more{font-size:9px;font-weight:500;padding-left:2px;color:rgba(105,84,207,.5);}
82
- .bwp-root[data-theme="dark"] .bwp-more{color:rgba(226,208,253,.5);}
85
+ .bwp-chev{color:var(--bwp-ink-60);flex-shrink:0;}
86
+ .bwp-more{font-size:9px;font-weight:500;padding-left:2px;color:var(--bwp-more);}
83
87
 
84
88
  .bwp-stack{display:inline-flex;align-items:center;}
85
89
  .bwp-stack > * + *{margin-left:-4px;}
@@ -88,45 +92,32 @@ const PANEL_CSS = `
88
92
  .bwp-glyph--dim{opacity:.55;}
89
93
  .bwp-glyph--on{position:relative;z-index:1;}
90
94
 
91
- .bwp-sep{border:0;border-top:1px dashed #dad4f4;margin:12px 0;}
92
- .bwp-root[data-theme="dark"] .bwp-sep{border-top-color:#3A2E63;}
95
+ .bwp-sep{border:0;border-top:1px dashed var(--bwp-border);margin:12px 0;}
93
96
 
94
97
  .bwp-menu-wrap{position:relative;flex-shrink:0;}
95
- .bwp-menu{position:absolute;top:calc(100% + 4px);z-index:200;border-radius:8px;border:1px solid #dad4f4;
96
- background:#fff;box-shadow:0 8px 24px rgba(60,40,120,.16);padding:4px;overflow:hidden;}
97
- .bwp-root[data-theme="dark"] .bwp-menu{border-color:#3A2E63;background:#221a36;
98
- box-shadow:0 8px 24px rgba(0,0,0,.5);}
98
+ .bwp-menu{position:absolute;top:calc(100% + 4px);z-index:200;border-radius:8px;border:1px solid var(--bwp-border);
99
+ background:var(--bwp-menu-bg);box-shadow:var(--bwp-menu-shadow);padding:4px;overflow:hidden;}
99
100
  .bwp-menu-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
100
101
  padding:7px 8px;border-radius:6px;background:none;border:0;cursor:pointer;text-align:left;
101
- font-size:14px;color:#6954cf;transition:background-color .12s;}
102
- .bwp-menu-item:hover{background:#f5f3ff;}
103
- .bwp-root[data-theme="dark"] .bwp-menu-item{color:#E2D0FD;}
104
- .bwp-root[data-theme="dark"] .bwp-menu-item:hover{background:#2B224B;}
102
+ font-size:14px;color:var(--bwp-ink);transition:background-color .12s;}
103
+ .bwp-menu-item:hover{background:var(--bwp-hover);}
105
104
  .bwp-menu-left{display:flex;align-items:center;gap:8px;min-width:0;}
106
- .bwp-menu-check{color:#6954cf;flex-shrink:0;}
107
- .bwp-root[data-theme="dark"] .bwp-menu-check{color:#9E84FF;}
105
+ .bwp-menu-check{color:var(--bwp-check);flex-shrink:0;}
108
106
 
109
107
  .bwp-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;}
110
- .bwp-tab{display:flex;flex-direction:column;gap:6px;padding:8px 12px;border-radius:8px;border:1px solid #dad4f4;
111
- background:none;text-align:left;cursor:pointer;transition:all .18s;}
112
- .bwp-tab:hover{background:rgba(245,243,255,.5);}
113
- .bwp-tab.bwp-tab--on{border-color:#6954cf;background:#f5f3ff;box-shadow:0 1px 2px rgba(60,40,120,.08);}
114
- .bwp-root[data-theme="dark"] .bwp-tab{border-color:#3A2E63;}
115
- .bwp-root[data-theme="dark"] .bwp-tab:hover{background:rgba(30,22,51,.6);}
116
- .bwp-root[data-theme="dark"] .bwp-tab.bwp-tab--on{background:#1E1633;}
108
+ .bwp-tab{display:flex;flex-direction:column;gap:6px;padding:8px 12px;border-radius:8px;
109
+ border:1px solid var(--bwp-border);background:none;text-align:left;cursor:pointer;transition:all .18s;}
110
+ .bwp-tab:hover{background:var(--bwp-tab-hover);}
111
+ .bwp-tab.bwp-tab--on{border-color:var(--bwp-tab-on-border);background:var(--bwp-tab-on-bg);
112
+ box-shadow:0 1px 2px rgba(60,40,120,.08);}
117
113
  .bwp-tab-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
118
- .bwp-tab-label{font-size:11px;font-weight:600;color:rgba(105,84,207,.7);}
119
- .bwp-tab--on .bwp-tab-label{color:#6a55cf;}
120
- .bwp-root[data-theme="dark"] .bwp-tab-label{color:rgba(226,208,253,.7);}
121
- .bwp-root[data-theme="dark"] .bwp-tab--on .bwp-tab-label{color:#E2D0FD;}
122
- .bwp-tab-bal{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:#6954cf;}
123
- .bwp-root[data-theme="dark"] .bwp-tab-bal{color:#E2D0FD;}
124
-
125
- .bwp-empty{font-size:14px;font-style:italic;color:rgba(105,84,207,.3);}
126
- .bwp-root[data-theme="dark"] .bwp-empty{color:rgba(226,208,253,.4);}
127
-
128
- .bwp-spin{animation:bwp-spin 1s linear infinite;color:rgba(105,84,207,.4);}
129
- .bwp-root[data-theme="dark"] .bwp-spin{color:rgba(226,208,253,.4);}
114
+ .bwp-tab-label{font-size:11px;font-weight:600;color:var(--bwp-tab-label);}
115
+ .bwp-tab--on .bwp-tab-label{color:var(--bwp-tab-label-on);}
116
+ .bwp-tab-bal{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--bwp-ink);}
117
+
118
+ .bwp-empty{font-size:14px;font-style:italic;color:var(--bwp-empty);}
119
+
120
+ .bwp-spin{animation:bwp-spin 1s linear infinite;color:var(--bwp-spin);}
130
121
  @keyframes bwp-spin{to{transform:rotate(360deg);}}
131
122
  @media (prefers-reduced-motion:reduce){.bwp-spin{animation:none;}}
132
123
  `;