@bufinance/web3-signin 0.2.0 → 0.2.2

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 +57 -62
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.2",
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,101 +32,96 @@ 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;}
86
90
  .bwp-stack--chain > * + *{margin-left:-2px;}
87
- .bwp-glyph{display:inline-flex;border-radius:9999px;transition:opacity .15s;}
91
+ .bwp-glyph{display:inline-flex;flex-shrink:0;border-radius:9999px;transition:opacity .15s;}
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
+ /* Icons (every child but the trailing label) keep their size when the label
106
+ wraps to two lines — long currency/chain names must not shrink the glyph. */
107
+ .bwp-menu-left > *:not(:last-child){flex-shrink:0;}
108
+ .bwp-menu-left > img{flex-shrink:0;}
109
+ .bwp-menu-check{color:var(--bwp-check);flex-shrink:0;}
108
110
 
109
111
  .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;}
112
+ .bwp-tab{display:flex;flex-direction:column;gap:6px;padding:8px 12px;border-radius:8px;
113
+ border:1px solid var(--bwp-border);background:none;text-align:left;cursor:pointer;transition:all .18s;}
114
+ .bwp-tab:hover{background:var(--bwp-tab-hover);}
115
+ .bwp-tab.bwp-tab--on{border-color:var(--bwp-tab-on-border);background:var(--bwp-tab-on-bg);
116
+ box-shadow:0 1px 2px rgba(60,40,120,.08);}
117
117
  .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);}
118
+ .bwp-tab-label{font-size:11px;font-weight:600;color:var(--bwp-tab-label);}
119
+ .bwp-tab--on .bwp-tab-label{color:var(--bwp-tab-label-on);}
120
+ .bwp-tab-bal{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--bwp-ink);}
121
+
122
+ .bwp-empty{font-size:14px;font-style:italic;color:var(--bwp-empty);}
123
+
124
+ .bwp-spin{animation:bwp-spin 1s linear infinite;color:var(--bwp-spin);}
130
125
  @keyframes bwp-spin{to{transform:rotate(360deg);}}
131
126
  @media (prefers-reduced-motion:reduce){.bwp-spin{animation:none;}}
132
127
  `;
@@ -434,7 +429,7 @@ export function WalletPanel({
434
429
  </Menu>
435
430
 
436
431
  <div className="bwp-pill bwp-pill--bal">
437
- <span className="bwp-cur-label">{currencyLabel}</span>
432
+ {currencyLabel ? <span className="bwp-cur-label">{currencyLabel}</span> : null}
438
433
  {isLoading ? (
439
434
  <span style={{ marginLeft: "auto", display: "inline-flex" }}>
440
435
  <SpinnerIcon />