Skip to content

Commit b40fc08

Browse files
taylorjdawsontaylorjdawson
committed
Merge branch 'v2-web3-onboard-develop' into release/2.4.0
2 parents e2feb44 + dd124f9 commit b40fc08

File tree

12 files changed

+254
-266
lines changed

12 files changed

+254
-266
lines changed

‎packages/core/README.md

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -733,9 +733,24 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
733733
--onboard-warning-600: #cc8c00;
734734
--onboard-warning-700: #664600;
735735

736-
/* CUSTOMIZE ACCOUNT CENTER STACK POSITIONING*/
736+
/* CUSTOMIZE ACCOUNT CENTER*/
737737
--account-center-z-index
738-
738+
--account-center-minimized-background
739+
--account-center-maximized-upper-background
740+
--account-center-maximized-network-section
741+
--account-center-maximized-app-info-section
742+
--account-center-minimized-address-color
743+
--account-center-maximized-address-color
744+
--account-center-maximized-account-section-background-hover
745+
--account-center-maximized-action-background-hover
746+
--account-center-minimized-chain-select-background
747+
--account-center-network-selector-color
748+
--account-center-maximized-network-selector-color
749+
--account-center-minimized-network-selector-color
750+
--account-center-app-btn-text-color
751+
--account-center-app-btn-background
752+
--account-center-app-btn-font-family
753+
739754
/* CUSTOMIZE SECTIONS OF THE CONNECT MODAL */
740755
--onboard-connect-content-width
741756
--onboard-connect-content-height
@@ -760,6 +775,10 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
760775
--onboard-wallet-button-box-shadow
761776
--onboard-wallet-app-icon-border-color
762777

778+
/* CUSTOMIZE THE SHARED MODAL */
779+
--onboard-modal-background
780+
--onboard-modal-color
781+
763782
/* CUSTOMIZE THE CONNECT MODAL */
764783
--onboard-modal-border-radius
765784
--onboard-modal-backdrop

‎packages/core/src/validation.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,8 @@ const accountCenter = Joi.object({
198198
enabled: Joi.boolean(),
199199
position: commonPositions,
200200
expanded: Joi.boolean(),
201-
minimal: Joi.boolean()
201+
minimal: Joi.boolean(),
202+
containerElement: Joi.string()
202203
})
203204

204205
const customNotificationUpdate = Joi.object({

‎packages/core/src/views/account-center/Maximized.svelte

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,10 @@
5050

5151
<style>
5252
.outer-container {
53-
background: var(--onboard-gray-600, var(--gray-600));
53+
background: var(
54+
--account-center-maximized-upper-background,
55+
var(--onboard-gray-600, var(--gray-600))
56+
);
5457
border-radius: var(--onboard-border-radius-3, var(--border-radius-3));
5558
width: 100%;
5659
filter: drop-shadow(0px 4px 16px rgba(178, 178, 178, 0.2));
@@ -84,7 +87,10 @@
8487
}
8588
8689
.action-container:hover {
87-
background-color: rgba(146, 155, 237, 0.2);
90+
background-color: var(
91+
--account-center-maximized-action-background-hover,
92+
rgba(146, 155, 237, 0.2)
93+
);
8894
}
8995
9096
.plus-icon {
@@ -119,7 +125,10 @@
119125
120126
.network-container {
121127
border-radius: var(--onboard-border-radius-3, var(--border-radius-3));
122-
color: var(--onboard-gray-500, var(--gray-500));
128+
color: var(
129+
--account-center-maximized-network-section,
130+
var(--onboard-gray-500, var(--gray-500))
131+
);
123132
}
124133
125134
.p5-5 {
@@ -136,7 +145,10 @@
136145
}
137146
138147
.app-info-container {
139-
background: var(--onboard-white, var(--white));
148+
background: var(
149+
--account-center-maximized-app-info-section,
150+
var(--onboard-white, var(--white))
151+
);
140152
border-radius: 16px;
141153
padding: 12px;
142154
}
@@ -183,6 +195,15 @@
183195
184196
.app-button {
185197
margin-top: var(--onboard-spacing-5, var(--spacing-5));
198+
color: var(
199+
--account-center-app-btn-text-color,
200+
var(--onboard-white, var(--white))
201+
);
202+
background: var(
203+
--account-center-app-btn-background,
204+
var(--onboard-gray-500, var(--gray-500))
205+
);
206+
font-family: var(--account-center-app-btn-font-family, inherit);
186207
}
187208
188209
.powered-by-container {
@@ -318,7 +339,7 @@
318339
<div on:click class="flex items-center">
319340
<NetworkBadgeSelector
320341
chains={appChains}
321-
color="#33394B"
342+
colorVar="--account-center-maximized-network-selector-color"
322343
bold={true}
323344
selectIcon={caretLightIcon}
324345
/>

‎packages/core/src/views/account-center/Minimized.svelte

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,10 @@
5858

5959
<style>
6060
.minimized {
61-
background: var(--onboard-white, var(--white));
61+
background: var(
62+
--account-center-minimized-background,
63+
var(--onboard-white, var(--white))
64+
);
6265
border: 1px solid var(--onboard-gray-100, var(--gray-100));
6366
width: 100%;
6467
box-shadow: var(--onboard-shadow-3, var(--shadow-3));
@@ -80,6 +83,7 @@
8083
.address {
8184
font-weight: 700;
8285
line-height: var(--onboard-font-line-height-2, var(--font-line-height-2));
86+
color: var(--account-center-minimized-address-color, initial);
8387
}
8488
8589
.balance {
@@ -178,7 +182,9 @@
178182
class="container shadow-1 flex items-center"
179183
style={`border-color: ${
180184
validAppChain ? '#D0D4F7' : '#FFAF00'
181-
}; background-color: ${validAppChain ? '#EFF1FC' : '#FFEFCC'}`}
185+
}; background-color: var(--account-center-minimized-chain-select-background, var(${
186+
validAppChain ? '--primary-100' : '--warning-100'
187+
}))`}
182188
>
183189
<div class="flex items-center">
184190
<div
@@ -200,7 +206,11 @@
200206
: warningIcon}
201207
</div>
202208

203-
<NetworkSelector {chains} color="#33394B" selectIcon={caretIcon} />
209+
<NetworkSelector
210+
{chains}
211+
colorVar="--account-center-minimized-network-selector-color"
212+
selectIcon={caretIcon}
213+
/>
204214
</div>
205215
</div>
206216
</div>

‎packages/core/src/views/account-center/WalletRow.svelte

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,10 @@
7070
}
7171
7272
.container:hover {
73-
background: var(--onboard-gray-500, var(--gray-500));
73+
background: var(
74+
--account-center-maximized-account-section-background-hover,
75+
var(--onboard-gray-500, var(--gray-500))
76+
);
7477
}
7578
7679
.container:hover > div > span.balance {
@@ -84,7 +87,10 @@
8487
.address-ens {
8588
margin-left: 0.5rem;
8689
font-weight: 700;
87-
color: var(--onboard-primary-100, var(--primary-100));
90+
color: var(
91+
--account-center-maximized-address-color,
92+
var(--onboard-primary-100, var(--primary-100))
93+
);
8894
}
8995
9096
.balance {

‎packages/core/src/views/shared/Modal.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@
9090
border-radius: var(--onboard-modal-border-radius, var(--border-radius-1));
9191
overflow-y: auto;
9292
background: var(--onboard-modal-background, white);
93+
color: var(--onboard-modal-color, initial);
9394
}
9495
9596
@media all and (max-width: 520px) {

‎packages/core/src/views/shared/NetworkSelector.svelte

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
import caretIcon from '../../icons/caret'
99
1010
export let selectIcon: string = caretIcon
11-
export let color = '#33394B'
11+
export let colorVar: string
1212
export let chains: Chain[]
1313
export let bold = false
1414
@@ -95,14 +95,24 @@
9595

9696
{#if wallet}
9797
{#if $switching$}
98-
<span style={`color: ${color}; padding: 0 8px 0 4px;`}>switching...</span>
98+
<span
99+
style={`
100+
color: var(${colorVar},
101+
var(--account-center-network-selector-color, var (--gray-500)));
102+
padding: 0 8px 0 4px;
103+
`}
104+
>switching...</span
105+
>
99106
{:else}
100107
<select
101108
class="flex justify-center items-center pointer"
102109
bind:this={selectElement}
103110
value={wallet.chains[0].id}
104111
on:change={handleSelect}
105-
style={`color: ${color}; background-image: url('data:image/svg+xml;utf8,${selectIcon}'); ${
112+
style={`
113+
color: var(${colorVar},
114+
var(--account-center-network-selector-color, var (--gray-500)));
115+
background-image: url('data:image/svg+xml;utf8,${selectIcon}'); ${
106116
bold ? 'font-weight: 700;' : ''
107117
}`}
108118
>

‎packages/demo/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
},
2424
"dependencies": {
2525
"@web3-onboard/coinbase": "^2.0.7",
26-
"@web3-onboard/core": "^2.4.0-alpha.7",
26+
"@web3-onboard/core": "^2.4.0-alpha.8",
2727
"@web3-onboard/dcent": "^2.0.4",
2828
"@web3-onboard/fortmatic": "^2.0.6",
2929
"@web3-onboard/gnosis": "^2.0.5",

‎packages/react/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
"typescript": "^4.5.5"
6060
},
6161
"dependencies": {
62-
"@web3-onboard/core": "^2.4.0-alpha.7",
62+
"@web3-onboard/core": "^2.4.0-alpha.9",
6363
"@web3-onboard/common": "^2.1.4",
6464
"use-sync-external-store": "1.0.0"
6565
},

‎packages/vue/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
"@vueuse/core": "^8.4.2",
6161
"@vueuse/rxjs": "^8.2.0",
6262
"@web3-onboard/common": "^2.1.4",
63-
"@web3-onboard/core": "^2.4.0-alpha.7",
63+
"@web3-onboard/core": "^2.4.0-alpha.9",
6464
"vue-demi": "^0.12.4"
6565
},
6666
"peerDependencies": {

0 commit comments

Comments
 (0)