Skip to content

Fix: Account Center Minimized chain icon display standardization #1719

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 15, 2023
Merged

Fix: Account Center Minimized chain icon display standardization #1719

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6a09f63
Handle chainIcons consistently within Account Center minimized
Adamj1232 May 15, 2023
fb5602b
Remove unused css vars
Adamj1232 May 15, 2023
41ca1a4
Cleanup format
Adamj1232 May 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@web3-onboard/core",
"version": "2.18.1-alpha.1",
"version": "2.18.1-alpha.2",
"description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
"keywords": [
"Ethereum",
Expand Down
70 changes: 36 additions & 34 deletions packages/core/src/views/account-center/Minimized.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,19 @@

<style>
.minimized {
--background-color: var(--account-center-minimized-background, var(--w3o-background-color, white));
--background-color: var(
--account-center-minimized-background,
var(--w3o-background-color, white)
);
--text-color: var(--w3o-text-color, var(--gray-700));
--border-color: var(--account-center-border, var(--w3o-border-color, var(--onboard-gray-200, var(--gray-200))));
--border-radius: var(--account-center-border-radius, var(--w3o-border-radius, 1rem));
--border-color: var(
--account-center-border,
var(--w3o-border-color, var(--onboard-gray-200, var(--gray-200)))
);
--border-radius: var(
--account-center-border-radius,
var(--w3o-border-radius, 1rem)
);
cursor: pointer;
pointer-events: auto;
Expand Down Expand Up @@ -118,11 +127,7 @@
color: var(--account-center-minimized-balance-color, inherit);
}
.chain-icon {
width: 22px;
height: 22px;
padding: 4px;
border-radius: 25px;
.chain-icon-container {
margin-right: 4px;
}
Expand All @@ -138,17 +143,6 @@
.drop-shadow {
filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.2));
}
.color-yellow {
color: var(
--account-center-chain-warning,
var(--onboard-warning-500, var(--warning-500))
);
}
.color-white {
color: var(--onboard-primary-100, var(--primary-100));
}
</style>

<div
Expand Down Expand Up @@ -221,23 +215,32 @@
})`}
>
<div class="flex items-center">
<div
class:color-yellow={!validAppChain}
class:color-white={validAppChain && !validAppChain.icon}
class="chain-icon flex justify-center items-center"
style={`background-color: ${
validAppChain
<div class="chain-icon-container">
Copy link
Contributor

@leightkt leightkt May 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does the same thing need to happen in Micro.svelte?

Copy link
Contributor Author

@Adamj1232 Adamj1232 May 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@leightkt good question! Luckily micro is already using the WalletAppBadge component that handles the chain icons properly

<WalletAppBadge
size={22}
padding={4}
background="custom"
color={!validAppChain
? `var(
--account-center-chain-warning,
var(--onboard-warning-500, var(--warning-500))
)`
: !validAppChain.icon
? `var(--onboard-primary-100, var(--primary-100))`
: undefined}
customBackgroundColor={validAppChain
? validAppChain.color ||
(defaultChainStyles && defaultChainStyles.color) ||
unrecognizedChainStyle.color
: 'var(--onboard-warning-200, var(--warning-200))'
};`}
>
{@html validAppChain
? validAppChain.icon ||
(defaultChainStyles && defaultChainStyles.icon) ||
unrecognizedChainStyle.icon
: warningIcon}
: `var(--onboard-warning-200, var(--warning-200))`}
border="transparent"
radius={25}
icon={validAppChain
? validAppChain.icon ||
(defaultChainStyles && defaultChainStyles.icon) ||
unrecognizedChainStyle.icon
: warningIcon}
/>
</div>

<NetworkSelector
Expand All @@ -249,6 +252,5 @@
</div>
</div>
</div>

</div>
</div>
2 changes: 1 addition & 1 deletion packages/demo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"webpack-dev-server": "4.7.4"
},
"dependencies": {
"@web3-onboard/core": "^2.18.1-alpha.1",
"@web3-onboard/core": "^2.18.1-alpha.2",
"@web3-onboard/coinbase": "^2.2.3",
"@web3-onboard/transaction-preview": "^2.0.7",
"@web3-onboard/dcent": "^2.2.6",
Expand Down
4 changes: 2 additions & 2 deletions packages/react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@web3-onboard/react",
"version": "2.8.3-alpha.1",
"version": "2.8.3-alpha.2",
"description": "A collection of React hooks for integrating Web3-Onboard in to React and Next.js projects. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
"keywords": [
"Ethereum",
Expand Down Expand Up @@ -62,7 +62,7 @@
"typescript": "^4.5.5"
},
"dependencies": {
"@web3-onboard/core": "^2.18.1-alpha.1",
"@web3-onboard/core": "^2.18.1-alpha.2",
"@web3-onboard/common": "^2.3.2",
"use-sync-external-store": "1.0.0"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/vue/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@web3-onboard/vue",
"version": "2.7.2-alpha.1",
"version": "2.7.2-alpha.2",
"description": "A collection of Vue Composables for integrating Web3-Onboard in to a Vue or Nuxt project. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
"keywords": [
"Ethereum",
Expand Down Expand Up @@ -63,7 +63,7 @@
"@vueuse/core": "^8.4.2",
"@vueuse/rxjs": "^8.2.0",
"@web3-onboard/common": "^2.3.2",
"@web3-onboard/core": "^2.18.1-alpha.1",
"@web3-onboard/core": "^2.18.1-alpha.2",
"vue-demi": "^0.12.4"
},
"peerDependencies": {
Expand Down
8 changes: 8 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3782,6 +3782,14 @@
"@walletconnect/window-getters" "^1.0.1"
tslib "1.14.1"

"@web3-onboard/cede-store@^2.0.1":
version "2.0.1"
resolved "https://registry.yarnpkg.com/@web3-onboard/cede-store/-/cede-store-2.0.1.tgz#0dec82e6f511e5b89885586c3229732c824f1fc0"
integrity sha512-ZgC/cgGdci+TuFJ2Yt2NK7BH84kCvSTj/Ko+VxWaAfiAw8m249SIsJeqmW7hEGM0ZJhJW0rmQHvDpSv0w4wF5g==
dependencies:
"@cedelabs/providers" "^0.0.7"
"@web3-onboard/common" "^2.3.2"

"@web3-react/abstract-connector@^6.0.7":
version "6.0.7"
resolved "https://registry.yarnpkg.com/@web3-react/abstract-connector/-/abstract-connector-6.0.7.tgz#401b3c045f1e0fab04256311be49d5144e9badc6"
Expand Down