Skip to content

Commit a8ed0c9

Browse files
Adamj1232Adamj1232
authored
Merge pull request #1490 from blocknative/release/2.19.0
Release 2.19.0
2 parents d7a459c + d2116a9 commit a8ed0c9

File tree

103 files changed

+1579
-1559
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

103 files changed

+1579
-1559
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,4 +123,4 @@ If you would like to test out the current functionality of V2 in a small browser
123123
- Checkout the V2 feature branch: `git checkout v2-web3-onboard`
124124
- Install the dependencies: `yarn` (if running a M1 mac - `yarn install-m1-mac`)
125125
- Run all packages in dev mode: `yarn dev`
126-
- [View demo app in the browser](http://localhost:8080)
126+
- To view the demo app in the browser after running the above steps navigate to [http://localhost:8080](http://localhost:8080)

‎docs/package.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -55,23 +55,23 @@
5555
"type": "module",
5656
"dependencies": {
5757
"@web3-onboard/coinbase": "^2.1.4",
58-
"@web3-onboard/core": "^2.12.0",
59-
"@web3-onboard/dcent": "^2.2.2",
58+
"@web3-onboard/core": "^2.14.0",
59+
"@web3-onboard/dcent": "^2.2.3",
6060
"@web3-onboard/enkrypt": "^2.0.0",
6161
"@web3-onboard/fortmatic": "^2.0.14",
6262
"@web3-onboard/gas": "^2.1.4",
63-
"@web3-onboard/gnosis": "^2.1.5",
64-
"@web3-onboard/injected-wallets": "^2.4.0",
65-
"@web3-onboard/keepkey": "^2.3.2",
66-
"@web3-onboard/keystone": "^2.3.2",
67-
"@web3-onboard/ledger": "^2.3.2",
63+
"@web3-onboard/gnosis": "^2.1.6",
64+
"@web3-onboard/injected-wallets": "^2.6.1",
65+
"@web3-onboard/keepkey": "^2.3.3",
66+
"@web3-onboard/keystone": "^2.3.3",
67+
"@web3-onboard/ledger": "^2.4.2",
6868
"@web3-onboard/magic": "^2.1.3",
6969
"@web3-onboard/mew-wallet": "^2.0.0",
7070
"@web3-onboard/portis": "^2.1.3",
7171
"@web3-onboard/sequence": "^2.0.4",
7272
"@web3-onboard/tallyho": "^2.0.1",
7373
"@web3-onboard/torus": "^2.2.0",
74-
"@web3-onboard/trezor": "^2.3.2",
74+
"@web3-onboard/trezor": "^2.3.3",
7575
"@web3-onboard/uauth": "^2.0.1",
7676
"@web3-onboard/walletconnect": "^2.2.1",
7777
"@web3-onboard/web3auth": "^2.1.4",

‎docs/src/lib/components/ThemeCustomizer.svelte

Lines changed: 174 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -18,27 +18,60 @@
1818
rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
1919
},
2020
{
21-
id: '0x3',
22-
token: 'tROP',
23-
label: 'Ethereum Ropsten Testnet',
24-
rpcUrl: `https://ropsten.infura.io/v3/${INFURA_ID}`
21+
id: '0x5',
22+
token: 'ETH',
23+
label: 'Ethereum Goerli Testnet',
24+
rpcUrl: `https://goerli.infura.io/v3/${INFURA_ID}`
25+
},
26+
{
27+
id: '0x13881',
28+
token: 'MATIC',
29+
label: 'Polygon - Mumbai',
30+
rpcUrl: 'https://matic-mumbai.chainstacklabs.com '
31+
},
32+
{
33+
id: '0x38',
34+
token: 'BNB',
35+
label: 'Binance',
36+
rpcUrl: 'https://bsc-dataseed.binance.org/'
37+
},
38+
{
39+
id: 137,
40+
token: 'MATIC',
41+
label: 'Polygon',
42+
rpcUrl: 'https://matic-mainnet.chainstacklabs.com'
43+
},
44+
{
45+
id: 10,
46+
token: 'OETH',
47+
label: 'Optimism',
48+
rpcUrl: 'https://mainnet.optimism.io'
49+
},
50+
{
51+
id: 42161,
52+
token: 'ARB-ETH',
53+
label: 'Arbitrum',
54+
rpcUrl: 'https://rpc.ankr.com/arbitrum'
2555
}
2656
],
2757
appMetadata: {
2858
name: 'Documentation',
29-
icon: '<svg></svg>',
3059
description: 'Example showcasing how to connect a wallet.',
3160
recommendedInjectedWallets: [
3261
{ name: 'MetaMask', url: 'https://metamask.io' },
3362
{ name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
3463
]
3564
},
3665
accountCenter: {
37-
desktop: { enabled: false },
38-
mobile: { enabled: false }
39-
}
66+
desktop: { enabled: true },
67+
mobile: { enabled: true }
68+
},
69+
theme: 'system'
4070
})
4171
72+
const themes = ['system', 'default', 'light', 'dark', 'custom']
73+
let selectedTheme = 'system'
74+
4275
// Subscribe to wallet updates
4376
const wallets$ = onboard.state.select('wallets').pipe(share())
4477
@@ -73,8 +106,9 @@
73106
uploaded_image = undefined
74107
webURL = ''
75108
resetTheme()
76-
const onboardCloseBtnVisible =
77-
document?.querySelector('body > onboard-v2')?.shadowRoot?.querySelector('.close-button')
109+
const onboardCloseBtnVisible = document
110+
?.querySelector('body > onboard-v2')
111+
?.shadowRoot?.querySelector('.close-button')
78112
if (onboardCloseBtnVisible) onboardCloseBtnVisible?.click()
79113
}
80114
@@ -84,34 +118,43 @@
84118
: onboard.connectWallet()
85119
}
86120
87-
const baseStyles = {
88-
'--background-color': '#ffffff',
89-
'--text-color': '#1a1d26',
90-
'--border-color': '#ebebed',
91-
'--accent-background': '#ebebed',
92-
'--accent-color': '#929bed',
93-
'--accent-color-hover': '#eff1fc',
94-
'--secondary-text-color': '#707481'
95-
}
96-
97-
let defaultStyling = {...baseStyles}
98-
99-
const baseStyling = `--onboard-connect-sidebar-background: var(--accent-background);
100-
--onboard-close-button-background: var(--accent-background);
101-
--onboard-connect-sidebar-color: var(--text-color);
102-
--onboard-connect-sidebar-progress-background: var(--secondary-text-color);
103-
--onboard-connect-sidebar-progress-color: var(--accent-color);
104-
--onboard-connect-header-background: var(--background-color);
105-
--onboard-connect-header-color: var(--text-color);
106-
--onboard-main-scroll-container-background: var(--background-color);
107-
--onboard-link-color: var(--accent-color);
108-
--onboard-wallet-button-background: var(--background-color);
109-
--onboard-wallet-button-background-hover: var(--accent-color-hover);
110-
--onboard-wallet-button-border-color: var(--border-color);
111-
--onboard-wallet-app-icon-border-color: var(--border-color);`
121+
const themingObjects = {
122+
default: {
123+
'--w3o-background-color': 'unset',
124+
'--w3o-foreground-color': 'unset',
125+
'--w3o-text-color': 'unset',
126+
'--w3o-border-color': 'unset',
127+
'--w3o-action-color': 'unset',
128+
'--w3o-border-radius': 'unset'
129+
},
130+
custom: {
131+
'--w3o-background-color': 'unset',
132+
'--w3o-foreground-color': 'unset',
133+
'--w3o-text-color': 'unset',
134+
'--w3o-border-color': 'unset',
135+
'--w3o-action-color': 'unset',
136+
'--w3o-border-radius': 'unset'
137+
},
138+
light: {
139+
'--w3o-background-color': '#ffffff',
140+
'--w3o-foreground-color': '#EFF1FC',
141+
'--w3o-text-color': '#1a1d26',
142+
'--w3o-border-color': '#d0d4f7',
143+
'--w3o-action-color': '#6370E5',
144+
'--w3o-border-radius': '16px'
145+
},
146+
dark: {
147+
'--w3o-background-color': '#1A1D26',
148+
'--w3o-foreground-color': '#242835',
149+
'--w3o-text-color': '#EFF1FC',
150+
'--w3o-border-color': '#33394B',
151+
'--w3o-action-color': '#929bed',
152+
'--w3o-border-radius': '16px'
153+
}
154+
}
112155
113156
const styleToString = (style) => {
114-
return Object.keys(style).reduce((acc, key) => acc + key + ': ' + style[key] + '; \n ', '')
157+
return Object.keys(style).reduce((acc, key) => acc + `"${key}": "${style[key]}", \n`, '')
115158
}
116159
117160
async function copyStylingConfig() {
@@ -123,18 +166,28 @@
123166
}
124167
}
125168
126-
let copyableStyles = `:root {\n ${styleToString(defaultStyling)}${baseStyling}\n}`
169+
let copyableStyles =
170+
selectedTheme !== 'custom' ? '' : `{\n ${styleToString(themingObjects[selectedTheme])}}`
171+
172+
const updateTheme = () => {
173+
selectedTheme !== 'custom'
174+
? onboard.state.actions.updateTheme(selectedTheme)
175+
: onboard.state.actions.updateTheme('default')
176+
copyableStyles =
177+
selectedTheme !== 'custom' ? '' : `{\n ${styleToString(themingObjects[selectedTheme])}}`
178+
}
127179
128-
const updateTheme = (e, targetStyle) => {
180+
const updateThemeEl = (e, targetStyle) => {
181+
if (selectedTheme !== 'custom') return
129182
document.documentElement.style.setProperty(targetStyle, e.target.value)
130183
131-
copyableStyles = `:root {\n ${styleToString(defaultStyling)}${baseStyling}\n}`
184+
copyableStyles = `{\n ${styleToString(themingObjects[selectedTheme])}}`
132185
}
133186
134187
const resetTheme = () => {
135-
defaultStyling = {...baseStyles}
136-
Object.keys(defaultStyling).forEach(style => {
137-
document.documentElement.style.setProperty(style, defaultStyling[style])
188+
selectedTheme = 'custom'
189+
Object.keys(themingObjects['custom']).forEach((style) => {
190+
document.documentElement.style.setProperty(style, themingObjects['custom'][style])
138191
})
139192
}
140193
@@ -187,28 +240,66 @@
187240
188241
<section>
189242
<div class="control-panel">
190-
<label for="Theme">Click Color Circles to Set Theme: </label>
191-
<hr />
192-
<div class="theming-container">
193-
{#each Object.keys(defaultStyling) as target}
194-
<div class="theming-inputs-wrapper">
195-
<div class="theming-inputs">
196-
<input
197-
type="color"
198-
name="Theme"
199-
bind:value={defaultStyling[target]}
200-
on:input={(e) => updateTheme(e, target)}
201-
/>
202-
</div>
203-
<span class="text" id="current-theme">{target} : {defaultStyling[target]}</span>
204-
</div>
243+
<label>Select a theme:</label>
244+
<select bind:value={selectedTheme} on:change={() => updateTheme()}>
245+
{#each themes as theme}
246+
<option value={theme}>
247+
{theme}
248+
</option>
205249
{/each}
206-
</div>
207-
<div class="copy-styles-container">
208-
<textarea readonly bind:value={copyableStyles} rows="10" class="copy-styles-textarea" />
209-
<button on:click={async () => await copyStylingConfig()}> Copy Styling Config </button>
210-
</div>
211-
<hr />
250+
</select>
251+
{#if selectedTheme === 'custom'}
252+
<label for="Theme"
253+
>Click Color Circles to Customize Theme, Copy Config and Paste as `theme` property value in
254+
Onboard config:
255+
</label>
256+
<hr />
257+
<div class="theming-container">
258+
{#each Object.keys(themingObjects[selectedTheme]) as target}
259+
{#if !target.includes('border-radius')}
260+
<div class="theming-inputs-wrapper">
261+
<div class="theming-inputs">
262+
<input
263+
type="color"
264+
name="Theme"
265+
bind:value={themingObjects[selectedTheme][target]}
266+
on:input={(e) => updateThemeEl(e, target)}
267+
/>
268+
</div>
269+
<span class="text" id="current-theme"
270+
>{target} : {themingObjects[selectedTheme][target]}</span
271+
>
272+
</div>
273+
{:else}
274+
<div class="theming-inputs-wrapper">
275+
<div class="theming-inputs-text">
276+
<input
277+
class="br-text-input"
278+
type="text"
279+
bind:value={themingObjects[selectedTheme][target]}
280+
on:input={(e) => updateThemeEl(e, target)}
281+
/>
282+
</div>
283+
<span class="text" id="current-theme"
284+
>{target} : {themingObjects[selectedTheme][target]}</span
285+
>
286+
</div>
287+
{/if}
288+
{/each}
289+
</div>
290+
<div class="copy-styles-container">
291+
<textarea readonly bind:value={copyableStyles} rows="8" class="copy-styles-textarea" />
292+
<button on:click={async () => await copyStylingConfig()}> Copy Theming Config </button>
293+
</div>
294+
<hr />
295+
{:else}
296+
<label for="Theme">
297+
The system theme will align the theme with the users system preferences
298+
</label>
299+
<hr />
300+
<div class="theming-container" />
301+
{/if}
302+
212303
<div class="backdrop-toggle">
213304
<label class="switch">
214305
<input type="checkbox" on:change={() => handleBackdrop()} bind:checked />
@@ -255,40 +346,6 @@
255346
</section>
256347
257348
<style>
258-
/* iframe { width: 100%; height: 62.5rem;} */
259-
:root {
260-
--background-color: #ffffff; /* --white */
261-
--text-color: #1a1d26; /* --gray-700 */
262-
--border-color: #ebebed; /* --gray-100 taken from future mock */
263-
264-
--accent-background: #ebebed; /* --gray-100 (currently gray-100 in connect modal) */
265-
--accent-color: #929bed; /* --primary-400 */
266-
--accent-color-hover: #eff1fc; /* --primary-200 */
267-
268-
/* Account Center & Notify */
269-
--secondary-text-color: #707481; /* --gray-400 (balance and token name) */
270-
/* --secondary-accent-background: #242835; --gray-600 (Upper background in maximized) */
271-
272-
/* --onboard-font-family-normal: System,monospace; */
273-
--onboard-connect-sidebar-background: var(--accent-background);
274-
--onboard-close-button-background: var(--accent-background);
275-
--onboard-connect-sidebar-color: var(--text-color);
276-
--onboard-connect-sidebar-progress-background: var(
277-
--secondary-text-color
278-
); /* defaults to gray-200 */
279-
--onboard-connect-sidebar-progress-color: var(--accent-color); /* defaults to primary-600 */
280-
--onboard-connect-header-background: var(--background-color);
281-
--onboard-connect-header-color: var(--text-color);
282-
--onboard-main-scroll-container-background: var(--background-color);
283-
--onboard-link-color: var(--accent-color);
284-
--onboard-wallet-button-background: var(--background-color);
285-
--onboard-wallet-button-background-hover: var(--accent-color-hover);
286-
--onboard-wallet-button-color-hover: var(--text-color);
287-
--onboard-wallet-button-color: var(--text-color);
288-
--onboard-wallet-button-border-color: var(--border-color);
289-
--onboard-wallet-app-icon-border-color: var(--border-color);
290-
}
291-
292349
section {
293350
position: relative;
294351
height: 100%;
@@ -315,9 +372,9 @@
315372
}
316373
317374
.control-panel {
318-
z-index: 9999;
319-
left: auto;
320-
right: 0;
375+
z-index: 25;
376+
left: 0;
377+
right: auto;
321378
bottom: 0;
322379
position: fixed;
323380
overflow: hidden;
@@ -368,6 +425,18 @@
368425
height: 2em;
369426
margin: 0.5em;
370427
}
428+
.theming-inputs-text {
429+
display: inline-flex;
430+
align-items: center;
431+
justify-content: center;
432+
height: 2em;
433+
margin: 0.25em;
434+
}
435+
.br-text-input {
436+
width: 3rem;
437+
padding: 0.25rem;
438+
text-align: center;
439+
}
371440
.iframe-input {
372441
flex: 1;
373442
padding: 1rem;
@@ -503,6 +572,11 @@
503572
transform: translateX(26px);
504573
}
505574
575+
select {
576+
width: 100%;
577+
padding: 1rem;
578+
}
579+
506580
.backdrop-toggle {
507581
display: flex;
508582
align-items: center;

0 commit comments

Comments
 (0)