Skip to content

Commit

Permalink
Merge pull request #1490 from blocknative/release/2.19.0
Browse files Browse the repository at this point in the history 
Release 2.19.0
  • Loading branch information
@Adamj1232
Adamj1232 authored Jan 26, 2023
2 parents d7a459c + d2116a9 commit a8ed0c9
Show file tree
Hide file tree
Showing 103 changed files with 1,579 additions and 1,559 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,4 +123,4 @@ If you would like to test out the current functionality of V2 in a small browser
- Checkout the V2 feature branch: `git checkout v2-web3-onboard`
- Install the dependencies: `yarn` (if running a M1 mac - `yarn install-m1-mac`)
- Run all packages in dev mode: `yarn dev`
- [View demo app in the browser](http://localhost:8080)
- To view the demo app in the browser after running the above steps navigate to [http://localhost:8080](http://localhost:8080)
16 changes: 8 additions & 8 deletions docs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,23 +55,23 @@
"type": "module",
"dependencies": {
"@web3-onboard/coinbase": "^2.1.4",
"@web3-onboard/core": "^2.12.0",
"@web3-onboard/dcent": "^2.2.2",
"@web3-onboard/core": "^2.14.0",
"@web3-onboard/dcent": "^2.2.3",
"@web3-onboard/enkrypt": "^2.0.0",
"@web3-onboard/fortmatic": "^2.0.14",
"@web3-onboard/gas": "^2.1.4",
"@web3-onboard/gnosis": "^2.1.5",
"@web3-onboard/injected-wallets": "^2.4.0",
"@web3-onboard/keepkey": "^2.3.2",
"@web3-onboard/keystone": "^2.3.2",
"@web3-onboard/ledger": "^2.3.2",
"@web3-onboard/gnosis": "^2.1.6",
"@web3-onboard/injected-wallets": "^2.6.1",
"@web3-onboard/keepkey": "^2.3.3",
"@web3-onboard/keystone": "^2.3.3",
"@web3-onboard/ledger": "^2.4.2",
"@web3-onboard/magic": "^2.1.3",
"@web3-onboard/mew-wallet": "^2.0.0",
"@web3-onboard/portis": "^2.1.3",
"@web3-onboard/sequence": "^2.0.4",
"@web3-onboard/tallyho": "^2.0.1",
"@web3-onboard/torus": "^2.2.0",
"@web3-onboard/trezor": "^2.3.2",
"@web3-onboard/trezor": "^2.3.3",
"@web3-onboard/uauth": "^2.0.1",
"@web3-onboard/walletconnect": "^2.2.1",
"@web3-onboard/web3auth": "^2.1.4",
Expand Down
274 changes: 174 additions & 100 deletions docs/src/lib/components/ThemeCustomizer.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,27 +18,60 @@
rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
},
{
id: '0x3',
token: 'tROP',
label: 'Ethereum Ropsten Testnet',
rpcUrl: `https://ropsten.infura.io/v3/${INFURA_ID}`
id: '0x5',
token: 'ETH',
label: 'Ethereum Goerli Testnet',
rpcUrl: `https://goerli.infura.io/v3/${INFURA_ID}`
},
{
id: '0x13881',
token: 'MATIC',
label: 'Polygon - Mumbai',
rpcUrl: 'https://matic-mumbai.chainstacklabs.com '
},
{
id: '0x38',
token: 'BNB',
label: 'Binance',
rpcUrl: 'https://bsc-dataseed.binance.org/'
},
{
id: 137,
token: 'MATIC',
label: 'Polygon',
rpcUrl: 'https://matic-mainnet.chainstacklabs.com'
},
{
id: 10,
token: 'OETH',
label: 'Optimism',
rpcUrl: 'https://mainnet.optimism.io'
},
{
id: 42161,
token: 'ARB-ETH',
label: 'Arbitrum',
rpcUrl: 'https://rpc.ankr.com/arbitrum'
}
],
appMetadata: {
name: 'Documentation',
icon: '<svg></svg>',
description: 'Example showcasing how to connect a wallet.',
recommendedInjectedWallets: [
{ name: 'MetaMask', url: 'https://metamask.io' },
{ name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
]
},
accountCenter: {
desktop: { enabled: false },
mobile: { enabled: false }
}
desktop: { enabled: true },
mobile: { enabled: true }
},
theme: 'system'
})
const themes = ['system', 'default', 'light', 'dark', 'custom']
let selectedTheme = 'system'
// Subscribe to wallet updates
const wallets$ = onboard.state.select('wallets').pipe(share())
Expand Down Expand Up @@ -73,8 +106,9 @@
uploaded_image = undefined
webURL = ''
resetTheme()
const onboardCloseBtnVisible =
document?.querySelector('body > onboard-v2')?.shadowRoot?.querySelector('.close-button')
const onboardCloseBtnVisible = document
?.querySelector('body > onboard-v2')
?.shadowRoot?.querySelector('.close-button')
if (onboardCloseBtnVisible) onboardCloseBtnVisible?.click()
}
Expand All @@ -84,34 +118,43 @@
: onboard.connectWallet()
}
const baseStyles = {
'--background-color': '#ffffff',
'--text-color': '#1a1d26',
'--border-color': '#ebebed',
'--accent-background': '#ebebed',
'--accent-color': '#929bed',
'--accent-color-hover': '#eff1fc',
'--secondary-text-color': '#707481'
}
let defaultStyling = {...baseStyles}
const baseStyling = `--onboard-connect-sidebar-background: var(--accent-background);
--onboard-close-button-background: var(--accent-background);
--onboard-connect-sidebar-color: var(--text-color);
--onboard-connect-sidebar-progress-background: var(--secondary-text-color);
--onboard-connect-sidebar-progress-color: var(--accent-color);
--onboard-connect-header-background: var(--background-color);
--onboard-connect-header-color: var(--text-color);
--onboard-main-scroll-container-background: var(--background-color);
--onboard-link-color: var(--accent-color);
--onboard-wallet-button-background: var(--background-color);
--onboard-wallet-button-background-hover: var(--accent-color-hover);
--onboard-wallet-button-border-color: var(--border-color);
--onboard-wallet-app-icon-border-color: var(--border-color);`
const themingObjects = {
default: {
'--w3o-background-color': 'unset',
'--w3o-foreground-color': 'unset',
'--w3o-text-color': 'unset',
'--w3o-border-color': 'unset',
'--w3o-action-color': 'unset',
'--w3o-border-radius': 'unset'
},
custom: {
'--w3o-background-color': 'unset',
'--w3o-foreground-color': 'unset',
'--w3o-text-color': 'unset',
'--w3o-border-color': 'unset',
'--w3o-action-color': 'unset',
'--w3o-border-radius': 'unset'
},
light: {
'--w3o-background-color': '#ffffff',
'--w3o-foreground-color': '#EFF1FC',
'--w3o-text-color': '#1a1d26',
'--w3o-border-color': '#d0d4f7',
'--w3o-action-color': '#6370E5',
'--w3o-border-radius': '16px'
},
dark: {
'--w3o-background-color': '#1A1D26',
'--w3o-foreground-color': '#242835',
'--w3o-text-color': '#EFF1FC',
'--w3o-border-color': '#33394B',
'--w3o-action-color': '#929bed',
'--w3o-border-radius': '16px'
}
}
const styleToString = (style) => {
return Object.keys(style).reduce((acc, key) => acc + key + ': ' + style[key] + '; \n ', '')
return Object.keys(style).reduce((acc, key) => acc + `"${key}": "${style[key]}", \n`, '')
}
async function copyStylingConfig() {
Expand All @@ -123,18 +166,28 @@
}
}
let copyableStyles = `:root {\n ${styleToString(defaultStyling)}${baseStyling}\n}`
let copyableStyles =
selectedTheme !== 'custom' ? '' : `{\n ${styleToString(themingObjects[selectedTheme])}}`
const updateTheme = () => {
selectedTheme !== 'custom'
? onboard.state.actions.updateTheme(selectedTheme)
: onboard.state.actions.updateTheme('default')
copyableStyles =
selectedTheme !== 'custom' ? '' : `{\n ${styleToString(themingObjects[selectedTheme])}}`
}
const updateTheme = (e, targetStyle) => {
const updateThemeEl = (e, targetStyle) => {
if (selectedTheme !== 'custom') return
document.documentElement.style.setProperty(targetStyle, e.target.value)
copyableStyles = `:root {\n ${styleToString(defaultStyling)}${baseStyling}\n}`
copyableStyles = `{\n ${styleToString(themingObjects[selectedTheme])}}`
}
const resetTheme = () => {
defaultStyling = {...baseStyles}
Object.keys(defaultStyling).forEach(style => {
document.documentElement.style.setProperty(style, defaultStyling[style])
selectedTheme = 'custom'
Object.keys(themingObjects['custom']).forEach((style) => {
document.documentElement.style.setProperty(style, themingObjects['custom'][style])
})
}
Expand Down Expand Up @@ -187,28 +240,66 @@
<section>
<div class="control-panel">
<label for="Theme">Click Color Circles to Set Theme: </label>
<hr />
<div class="theming-container">
{#each Object.keys(defaultStyling) as target}
<div class="theming-inputs-wrapper">
<div class="theming-inputs">
<input
type="color"
name="Theme"
bind:value={defaultStyling[target]}
on:input={(e) => updateTheme(e, target)}
/>
</div>
<span class="text" id="current-theme">{target} : {defaultStyling[target]}</span>
</div>
<label>Select a theme:</label>
<select bind:value={selectedTheme} on:change={() => updateTheme()}>
{#each themes as theme}
<option value={theme}>
{theme}
</option>
{/each}
</div>
<div class="copy-styles-container">
<textarea readonly bind:value={copyableStyles} rows="10" class="copy-styles-textarea" />
<button on:click={async () => await copyStylingConfig()}> Copy Styling Config </button>
</div>
<hr />
</select>
{#if selectedTheme === 'custom'}
<label for="Theme"
>Click Color Circles to Customize Theme, Copy Config and Paste as `theme` property value in
Onboard config:
</label>
<hr />
<div class="theming-container">
{#each Object.keys(themingObjects[selectedTheme]) as target}
{#if !target.includes('border-radius')}
<div class="theming-inputs-wrapper">
<div class="theming-inputs">
<input
type="color"
name="Theme"
bind:value={themingObjects[selectedTheme][target]}
on:input={(e) => updateThemeEl(e, target)}
/>
</div>
<span class="text" id="current-theme"
>{target} : {themingObjects[selectedTheme][target]}</span
>
</div>
{:else}
<div class="theming-inputs-wrapper">
<div class="theming-inputs-text">
<input
class="br-text-input"
type="text"
bind:value={themingObjects[selectedTheme][target]}
on:input={(e) => updateThemeEl(e, target)}
/>
</div>
<span class="text" id="current-theme"
>{target} : {themingObjects[selectedTheme][target]}</span
>
</div>
{/if}
{/each}
</div>
<div class="copy-styles-container">
<textarea readonly bind:value={copyableStyles} rows="8" class="copy-styles-textarea" />
<button on:click={async () => await copyStylingConfig()}> Copy Theming Config </button>
</div>
<hr />
{:else}
<label for="Theme">
The system theme will align the theme with the users system preferences
</label>
<hr />
<div class="theming-container" />
{/if}
<div class="backdrop-toggle">
<label class="switch">
<input type="checkbox" on:change={() => handleBackdrop()} bind:checked />
Expand Down Expand Up @@ -255,40 +346,6 @@
</section>
<style>
/* iframe { width: 100%; height: 62.5rem;} */
:root {
--background-color: #ffffff; /* --white */
--text-color: #1a1d26; /* --gray-700 */
--border-color: #ebebed; /* --gray-100 taken from future mock */
--accent-background: #ebebed; /* --gray-100 (currently gray-100 in connect modal) */
--accent-color: #929bed; /* --primary-400 */
--accent-color-hover: #eff1fc; /* --primary-200 */
/* Account Center & Notify */
--secondary-text-color: #707481; /* --gray-400 (balance and token name) */
/* --secondary-accent-background: #242835; --gray-600 (Upper background in maximized) */
/* --onboard-font-family-normal: System,monospace; */
--onboard-connect-sidebar-background: var(--accent-background);
--onboard-close-button-background: var(--accent-background);
--onboard-connect-sidebar-color: var(--text-color);
--onboard-connect-sidebar-progress-background: var(
--secondary-text-color
); /* defaults to gray-200 */
--onboard-connect-sidebar-progress-color: var(--accent-color); /* defaults to primary-600 */
--onboard-connect-header-background: var(--background-color);
--onboard-connect-header-color: var(--text-color);
--onboard-main-scroll-container-background: var(--background-color);
--onboard-link-color: var(--accent-color);
--onboard-wallet-button-background: var(--background-color);
--onboard-wallet-button-background-hover: var(--accent-color-hover);
--onboard-wallet-button-color-hover: var(--text-color);
--onboard-wallet-button-color: var(--text-color);
--onboard-wallet-button-border-color: var(--border-color);
--onboard-wallet-app-icon-border-color: var(--border-color);
}
section {
position: relative;
height: 100%;
Expand All @@ -315,9 +372,9 @@
}
.control-panel {
z-index: 9999;
left: auto;
right: 0;
z-index: 25;
left: 0;
right: auto;
bottom: 0;
position: fixed;
overflow: hidden;
Expand Down Expand Up @@ -368,6 +425,18 @@
height: 2em;
margin: 0.5em;
}
.theming-inputs-text {
display: inline-flex;
align-items: center;
justify-content: center;
height: 2em;
margin: 0.25em;
}
.br-text-input {
width: 3rem;
padding: 0.25rem;
text-align: center;
}
.iframe-input {
flex: 1;
padding: 1rem;
Expand Down Expand Up @@ -503,6 +572,11 @@
transform: translateX(26px);
}
select {
width: 100%;
padding: 1rem;
}
.backdrop-toggle {
display: flex;
align-items: center;
Expand Down
Loading

0 comments on commit a8ed0c9

Please sign in to comment.