From c0cc5086c330538ecb4e599140270a736ae24e7a Mon Sep 17 00:00:00 2001 From: katspaugh <381895+katspaugh@users.noreply.github.com> Date: Thu, 16 Jun 2022 21:03:10 +0200 Subject: [PATCH 01/18] Feature: optional public RPC and block explorer Chain params (#1021) * Feat: add publicRpcUrl and blockExplorerUrl to the Chain type for adding a chain to wallet * Update docs * packages bump Co-authored-by: Mahmud Adeleye --- packages/common/package.json | 2 +- packages/common/src/types.ts | 2 ++ packages/core/README.md | 2 ++ packages/core/package.json | 4 ++-- packages/core/src/provider.ts | 3 ++- packages/core/src/validation.ts | 14 +++++++++----- packages/react/package.json | 6 +++--- 7 files changed, 21 insertions(+), 12 deletions(-) diff --git a/packages/common/package.json b/packages/common/package.json index 350ff6335..13126b123 100644 --- a/packages/common/package.json +++ b/packages/common/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/common", - "version": "2.1.1", + "version": "2.1.2-alpha.1", "scripts": { "build": "rollup -c", "dev": "rollup -c -w", diff --git a/packages/common/src/types.ts b/packages/common/src/types.ts index b93475114..ed14165f2 100644 --- a/packages/common/src/types.ts +++ b/packages/common/src/types.ts @@ -430,6 +430,8 @@ export interface Chain { color?: string icon?: string // svg string providerConnectionInfo?: ConnectionInfo + publicRpcUrl?: string + blockExplorerUrl?: string } export type TokenSymbol = string // eg ETH diff --git a/packages/core/README.md b/packages/core/README.md index a6f43fcc9..37d9de742 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -49,6 +49,8 @@ type Chain = { token: TokenSymbol // the native token symbol, eg ETH, BNB, MATIC color?: string // the color used to represent the chain and will be used as a background for the icon icon?: string // the icon to represent the chain + publicRpcUrl?: string // an optional public RPC used when adding a new chain config to the wallet + blockExplorerUrl?: string // also used when adding a new config to the wallet } ``` diff --git a/packages/core/package.json b/packages/core/package.json index ddf61f936..7835e6957 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/core", - "version": "2.2.12", + "version": "2.2.13-alpha.1", "scripts": { "build": "rollup -c", "dev": "rollup -c -w", @@ -41,7 +41,7 @@ "typescript": "^4.5.5" }, "dependencies": { - "@web3-onboard/common": "^2.1.1", + "@web3-onboard/common": "^2.1.2", "bowser": "^2.11.0", "ethers": "5.5.3", "eventemitter3": "^4.0.7", diff --git a/packages/core/src/provider.ts b/packages/core/src/provider.ts index afd461008..42a593d04 100644 --- a/packages/core/src/provider.ts +++ b/packages/core/src/provider.ts @@ -324,7 +324,8 @@ export function addNewChain( symbol: chain.token, decimals: 18 }, - rpcUrls: [chain.rpcUrl] + rpcUrls: [chain.publicRpcUrl || chain.rpcUrl], + blockExplorerUrls: chain.blockExplorerUrl ? [chain.blockExplorerUrl] : undefined } ] }) diff --git a/packages/core/src/validation.ts b/packages/core/src/validation.ts index 14fc5bb05..e10c1f79d 100644 --- a/packages/core/src/validation.ts +++ b/packages/core/src/validation.ts @@ -1,5 +1,5 @@ -import Joi from 'joi' -import type { ChainId, WalletInit, WalletModule } from '@web3-onboard/common' +import Joi, { ObjectSchema, Schema } from 'joi' +import type { Chain, ChainId, WalletInit, WalletModule } from '@web3-onboard/common' import type { InitOptions, @@ -28,7 +28,7 @@ const providerConnectionInfo = Joi.object({ timeout: Joi.number() }) -const chain = Joi.object({ +const chainValidationParams: Record = { namespace: chainNamespace, id: chainId.required(), rpcUrl: Joi.string().required(), @@ -36,8 +36,11 @@ const chain = Joi.object({ token: Joi.string().required(), icon: Joi.string(), color: Joi.string(), - providerConnectionInfo: providerConnectionInfo -}) + publicRpcUrl: Joi.string(), + blockExplorerUrl: Joi.string(), + providerConnectionInfo +} +const chain = Joi.object(chainValidationParams) const connectedChain = Joi.object({ namespace: chainNamespace.required(), @@ -207,6 +210,7 @@ export function validateString(str: string): ValidateReturn { export function validateSetChainOptions(data: { chainId: ChainId + chainNamespace?: string wallet?: WalletState['label'] }): ValidateReturn { return validate(setChainOptions, data) diff --git a/packages/react/package.json b/packages/react/package.json index 8608d936a..8e17c4701 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/react", - "version": "2.1.9", + "version": "2.1.10-alpha.1", "description": "Collection of React Hooks for web3-onboard", "module": "dist/index.js", "browser": "dist/index.js", @@ -23,8 +23,8 @@ "typescript": "^4.5.5" }, "dependencies": { - "@web3-onboard/core": "^2.2.12", - "@web3-onboard/common": "^2.1.1", + "@web3-onboard/core": "^2.2.13-alpha.1", + "@web3-onboard/common": "^2.1.2-alpha.1", "use-sync-external-store": "1.0.0" }, "peerDependencies": { From 74e3cd01f2875b922969c5ebf6280733c4b01c1e Mon Sep 17 00:00:00 2001 From: Mahmud <104795334+mahmud-bn@users.noreply.github.com> Date: Thu, 16 Jun 2022 13:39:04 -0600 Subject: [PATCH 02/18] package bump (#1071) --- packages/core/package.json | 4 ++-- packages/react/package.json | 4 ++-- packages/web3auth/package.json | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index 7835e6957..0838ae243 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/core", - "version": "2.2.13-alpha.1", + "version": "2.2.13-alpha.2", "scripts": { "build": "rollup -c", "dev": "rollup -c -w", @@ -41,7 +41,7 @@ "typescript": "^4.5.5" }, "dependencies": { - "@web3-onboard/common": "^2.1.2", + "@web3-onboard/common": "^2.1.2-alpha.1", "bowser": "^2.11.0", "ethers": "5.5.3", "eventemitter3": "^4.0.7", diff --git a/packages/react/package.json b/packages/react/package.json index 8e17c4701..a2c894435 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/react", - "version": "2.1.10-alpha.1", + "version": "2.1.10-alpha.2", "description": "Collection of React Hooks for web3-onboard", "module": "dist/index.js", "browser": "dist/index.js", @@ -23,7 +23,7 @@ "typescript": "^4.5.5" }, "dependencies": { - "@web3-onboard/core": "^2.2.13-alpha.1", + "@web3-onboard/core": "^2.2.13-alpha.2", "@web3-onboard/common": "^2.1.2-alpha.1", "use-sync-external-store": "1.0.0" }, diff --git a/packages/web3auth/package.json b/packages/web3auth/package.json index 97a108069..1710cb41e 100644 --- a/packages/web3auth/package.json +++ b/packages/web3auth/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/web3auth", - "version": "2.0.0", + "version": "2.0.1-alpha.1", "description": "Web3Auth module for web3-onboard", "module": "dist/index.js", "browser": "dist/index.js", @@ -20,7 +20,7 @@ "typescript": "^4.5.5" }, "dependencies": { - "@web3-onboard/common": "^2.1.1", + "@web3-onboard/common": "^2.1.2-alpha.1", "@web3auth/web3auth": "^1.0.0" } } From da66132f2e00283ced64a2d8e10f6bd618a01344 Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Fri, 17 Jun 2022 11:34:53 -0600 Subject: [PATCH 03/18] [Coinbase, Common, Core, Injected-Wallets, Keepkey, Keystone, Ledger, React, Trezor, Vue] : Update - Convert background color to background (#1074) * Convert background-color styling that are associated with variables to background for further flexibility * Update package versions --- packages/coinbase/package.json | 4 +-- packages/common/package.json | 2 +- .../common/src/elements/AddressTable.svelte | 4 +-- .../common/src/elements/TableHeader.svelte | 6 ++-- .../common/src/views/AccountSelect.svelte | 4 +-- packages/core/package.json | 4 +-- packages/core/src/views/Index.svelte | 16 +++++----- .../DisconnectAllConfirm.svelte | 2 +- .../src/views/account-center/Maximized.svelte | 8 ++--- .../src/views/account-center/Micro.svelte | 2 +- .../src/views/account-center/Minimized.svelte | 2 +- .../src/views/account-center/WalletRow.svelte | 10 +++---- .../src/views/connect/ActionRequired.svelte | 2 +- .../src/views/connect/ConnectingWallet.svelte | 4 +-- .../src/views/connect/WalletButton.svelte | 6 ++-- packages/core/src/views/shared/Warning.svelte | 2 +- packages/dcent/package.json | 4 +-- packages/demo/package.json | 30 +++++++++---------- packages/fortmatic/package.json | 4 +-- packages/gnosis/package.json | 4 +-- packages/injected/package.json | 4 +-- packages/keepkey/package.json | 4 +-- packages/keystone/package.json | 4 +-- packages/ledger/package.json | 4 +-- packages/magic/package.json | 4 +-- packages/mew/package.json | 4 +-- packages/portis/package.json | 4 +-- packages/react/package.json | 6 ++-- packages/torus/package.json | 4 +-- packages/trezor/package.json | 4 +-- packages/vue/package.json | 6 ++-- packages/walletconnect/package.json | 4 +-- packages/web3auth/package.json | 4 +-- 33 files changed, 88 insertions(+), 88 deletions(-) diff --git a/packages/coinbase/package.json b/packages/coinbase/package.json index d27f7df96..b0bf3ebc0 100644 --- a/packages/coinbase/package.json +++ b/packages/coinbase/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/coinbase", - "version": "2.0.4", + "version": "2.0.5-alpha.1", "description": "Coinbase Wallet module for web3-onboard", "module": "dist/index.js", "browser": "dist/index.js", @@ -21,6 +21,6 @@ }, "dependencies": { "@coinbase/wallet-sdk": "^3.0.5", - "@web3-onboard/common": "2.1.1" + "@web3-onboard/common": "2.1.2-alpha.2" } } diff --git a/packages/common/package.json b/packages/common/package.json index 13126b123..e13ea417a 100644 --- a/packages/common/package.json +++ b/packages/common/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/common", - "version": "2.1.2-alpha.1", + "version": "2.1.2-alpha.2", "scripts": { "build": "rollup -c", "dev": "rollup -c -w", diff --git a/packages/common/src/elements/AddressTable.svelte b/packages/common/src/elements/AddressTable.svelte index 2e3ce51ba..704098e1a 100644 --- a/packages/common/src/elements/AddressTable.svelte +++ b/packages/common/src/elements/AddressTable.svelte @@ -55,7 +55,7 @@ } tbody tr:hover { - background-color: var( + background: var( --account-select-primary-100, var(--onboard-primary-100, var(--primary-100)) ); @@ -70,7 +70,7 @@ .selected-row, .selected-row:hover { - background-color: var( + background: var( --account-select-primary-500, var(--onboard-primary-500, var(--primary-500)) ); diff --git a/packages/common/src/elements/TableHeader.svelte b/packages/common/src/elements/TableHeader.svelte index ec9fc6ac8..7abd0e9c8 100644 --- a/packages/common/src/elements/TableHeader.svelte +++ b/packages/common/src/elements/TableHeader.svelte @@ -71,7 +71,7 @@ } input:disabled { - background-color: var( + background: var( --account-select-gray-100, var(--onboard-gray-100, var(--gray-100)) ); @@ -80,7 +80,7 @@ input[type='checkbox'] { -webkit-appearance: none; width: auto; - background-color: var( + background: var( --account-select-white, var(--onboard-white, var(--white)) ); @@ -105,7 +105,7 @@ } input[type='checkbox']:checked { - background-color: var( + background: var( --account-select-primary-500, var(--onboard-primary-500, var(--primary-500)) ); diff --git a/packages/common/src/views/AccountSelect.svelte b/packages/common/src/views/AccountSelect.svelte index ec8fdc8d1..2cbf071bb 100644 --- a/packages/common/src/views/AccountSelect.svelte +++ b/packages/common/src/views/AccountSelect.svelte @@ -243,7 +243,7 @@ } select:disabled { - background-color: var( + background: var( --account-select-gray-100, var(--onboard-gray-100, var(--gray-100)) ); @@ -397,7 +397,7 @@ right: 0.2rem; width: 2.5rem; height: 2.5rem; - background-color: var( + background: var( --account-select-white, var(--onboard-white, var(--white)) ); diff --git a/packages/core/package.json b/packages/core/package.json index 0838ae243..e58661ac6 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/core", - "version": "2.2.13-alpha.2", + "version": "2.2.13-alpha.3", "scripts": { "build": "rollup -c", "dev": "rollup -c -w", @@ -41,7 +41,7 @@ "typescript": "^4.5.5" }, "dependencies": { - "@web3-onboard/common": "^2.1.2-alpha.1", + "@web3-onboard/common": "^2.1.2-alpha.2", "bowser": "^2.11.0", "ethers": "5.5.3", "eventemitter3": "^4.0.7", diff --git a/packages/core/src/views/Index.svelte b/packages/core/src/views/Index.svelte index 6adbe1326..d51566c15 100644 --- a/packages/core/src/views/Index.svelte +++ b/packages/core/src/views/Index.svelte @@ -96,7 +96,7 @@ :global(input[type='checkbox']) { -webkit-appearance: none; width: auto; - background-color: var(--onboard-white, var(--white)); + background: var(--onboard-white, var(--white)); outline: 1px solid var(--onboard-gray-300, var(--gray-300)); border: none; padding: 0.5em; @@ -116,7 +116,7 @@ } :global(input[type='checkbox']:checked) { - background-color: var( + background: var( --onboard-checkbox-background, var(--onboard-primary-500, var(--primary-500)) ); @@ -152,7 +152,7 @@ } :global(input:disabled, textarea:disabled, select:disabled) { - background-color: var(--gray-100); + background: var(--gray-100); } :global(input::-moz-focus-inner) { @@ -200,14 +200,14 @@ :global(.button-neutral-solid) { width: 100%; border-radius: 8px; - background-color: var(--onboard-gray-500, var(--gray-500)); + background: var(--onboard-gray-500, var(--gray-500)); color: var(--onboard-white, var(--white)); line-height: var(--onboard-font-line-height-3, var(--font-line-height-3)); } :global(.button-neutral-solid-b) { width: 100%; - background-color: var(--onboard-gray-100, var(--gray-100)); + background: var(--onboard-gray-100, var(--gray-100)); color: var(--onboard-gray-500, var(--gray-500)); line-height: var(--onboard-font-line-height-3, var(--font-line-height-3)); } @@ -217,10 +217,10 @@ } :global(.button-neutral-solid:hover) { - background-color: var(--onboard-gray-700, var(--gray-700)); + background: var(--onboard-gray-700, var(--gray-700)); } :global(.button-neutral-solid-b:hover) { - background-color: var(--onboard-gray-200, var(--gray-200)); + background: var(--onboard-gray-200, var(--gray-200)); } :global(.button-neutral-solid:active) { @@ -229,7 +229,7 @@ :global(.button-neutral-solid-b:active) { color: var(--onboard-gray-600, var(--gray-600)); - background-color: var(--onboard-gray-300, var(--gray-300)); + background: var(--onboard-gray-300, var(--gray-300)); } diff --git a/packages/core/src/views/account-center/DisconnectAllConfirm.svelte b/packages/core/src/views/account-center/DisconnectAllConfirm.svelte index 5abae1a07..55e53c7bc 100644 --- a/packages/core/src/views/account-center/DisconnectAllConfirm.svelte +++ b/packages/core/src/views/account-center/DisconnectAllConfirm.svelte @@ -20,7 +20,7 @@ .icon-container { width: 3rem; height: 3rem; - background-color: var(--onboard-warning-100, var(--warning-100)); + background: var(--onboard-warning-100, var(--warning-100)); border-radius: 24px; padding: 12px; color: var(--onboard-warning-500, var(--warning-500)); diff --git a/packages/core/src/views/account-center/Maximized.svelte b/packages/core/src/views/account-center/Maximized.svelte index 2f8d69a58..094287fea 100644 --- a/packages/core/src/views/account-center/Maximized.svelte +++ b/packages/core/src/views/account-center/Maximized.svelte @@ -50,7 +50,7 @@ diff --git a/packages/core/src/views/connect/ActionRequired.svelte b/packages/core/src/views/connect/ActionRequired.svelte index 840ad2ef8..e208b0fbb 100644 --- a/packages/core/src/views/connect/ActionRequired.svelte +++ b/packages/core/src/views/connect/ActionRequired.svelte @@ -27,7 +27,7 @@ .icon-container { width: 3rem; height: 3rem; - background-color: var(--onboard-primary-100, var(--primary-100)); + background: var(--onboard-primary-100, var(--primary-100)); border-radius: 24px; } diff --git a/packages/core/src/views/connect/ConnectingWallet.svelte b/packages/core/src/views/connect/ConnectingWallet.svelte index 196b87252..535c8a7be 100644 --- a/packages/core/src/views/connect/ConnectingWallet.svelte +++ b/packages/core/src/views/connect/ConnectingWallet.svelte @@ -27,14 +27,14 @@ transition: background-color 100ms ease-in-out, border-color 100ms ease-in-out; border-radius: 24px; - background-color: var(--onboard-primary-100, var(--primary-100)); + background: var(--onboard-primary-100, var(--primary-100)); border: 1px solid; border-color: var(--onboard-primary-300, var(--primary-300)); color: var(--onboard-gray-600, var(--gray-600)); } .connecting-container.warning { - background-color: var(--onboard-warning-100, var(--warning-100)); + background: var(--onboard-warning-100, var(--warning-100)); border-color: var(--onboard-warning-400, var(--warning-400)); } diff --git a/packages/core/src/views/connect/WalletButton.svelte b/packages/core/src/views/connect/WalletButton.svelte index fa56d3eec..876aca599 100644 --- a/packages/core/src/views/connect/WalletButton.svelte +++ b/packages/core/src/views/connect/WalletButton.svelte @@ -12,7 +12,7 @@ {#if $connectWallet$.inProgress} @@ -245,6 +277,37 @@ {/if} -{#if $accountCenter$.enabled && $wallets$.length} - +{#if ($notify$.enabled || $accountCenter$.enabled) && $wallets$.length} +
+ {#if $notify$.enabled && $accountCenter$.position.includes('bottom')} + + {/if} +
+ {#if $accountCenter$.enabled && $wallets$.length} + + {/if} +
+ + {#if $notify$.enabled && $accountCenter$.position.includes('top')} + + {/if} +
{/if} diff --git a/packages/core/src/views/account-center/Index.svelte b/packages/core/src/views/account-center/Index.svelte index e3c36d474..f98af7de2 100644 --- a/packages/core/src/views/account-center/Index.svelte +++ b/packages/core/src/views/account-center/Index.svelte @@ -1,6 +1,5 @@ - - -
- {#if !settings.expanded && !settings.minimal} - - - {:else if !settings.expanded && settings.minimal} - - - {:else} - - - {/if} -
+{#if !settings.expanded && !settings.minimal} + + +{:else if !settings.expanded && settings.minimal} + + +{:else} + + +{/if} diff --git a/packages/core/src/views/account-center/Maximized.svelte b/packages/core/src/views/account-center/Maximized.svelte index 094287fea..788dc4242 100644 --- a/packages/core/src/views/account-center/Maximized.svelte +++ b/packages/core/src/views/account-center/Maximized.svelte @@ -20,14 +20,14 @@ import { updateAccountCenter } from '../../store/actions' import blocknative from '../../icons/blocknative' import DisconnectAllConfirm from './DisconnectAllConfirm.svelte' - import { internalState } from '../../internals' + import { configuration } from '../../configuration' function disconnectAllWallets() { $wallets$.forEach(({ label }) => disconnect({ label })) } const { chains: appChains } = state.get() - const { appMetadata } = internalState + const { appMetadata } = configuration let disconnectConfirmModal = false let hideWalletRowMenu: () => void @@ -45,7 +45,7 @@ ) const { position } = state.get().accountCenter - const { device } = internalState + const { device } = configuration + +
+ {@html icon} +
diff --git a/packages/core/src/views/notify/Index.svelte b/packages/core/src/views/notify/Index.svelte new file mode 100644 index 000000000..272722e02 --- /dev/null +++ b/packages/core/src/views/notify/Index.svelte @@ -0,0 +1,141 @@ + + + + +{#if $notifications$.length} +
    + {#each $notifications$ as notification (notification.key)} +
  • + +
    • + {/each} +
+{/if} diff --git a/packages/core/src/views/notify/Notification.svelte b/packages/core/src/views/notify/Notification.svelte new file mode 100644 index 000000000..154f69c03 --- /dev/null +++ b/packages/core/src/views/notify/Notification.svelte @@ -0,0 +1,127 @@ + + + + +
notification.onclick && notification.onclick(e)} + class="bn-notify-notification bn-notify-notification-{notification.type}}" +> + + + +
{ + removeNotification(notification.id) + updateParentOnRemove() + }} + class="notify-close-btn notify-close-btn-{device.type} pointer flex" + > +
+ {@html closeIcon} +
+
+
diff --git a/packages/core/src/views/notify/NotificationContent.svelte b/packages/core/src/views/notify/NotificationContent.svelte new file mode 100644 index 000000000..013a0e13e --- /dev/null +++ b/packages/core/src/views/notify/NotificationContent.svelte @@ -0,0 +1,93 @@ + + + + +
+ + {notification.message} + + + {#if notification.id && !notification.id.includes('customNotification')} + + {#if notification.link} + + {shortenAddress(notification.id)} + + {:else} +
+ {shortenAddress(notification.id)} +
+ {/if} + + + {/if} +
diff --git a/packages/core/src/views/notify/StatusIconBadge.svelte b/packages/core/src/views/notify/StatusIconBadge.svelte new file mode 100644 index 000000000..d0486f782 --- /dev/null +++ b/packages/core/src/views/notify/StatusIconBadge.svelte @@ -0,0 +1,105 @@ + + + + +{#if notification.type} +
+ {#if notification.type === 'pending'} +
+ {/if} + +
+
+ {@html defaultNotifyEventStyles[notification.type]['eventIcon']} +
+
+ {#if !notification.id.includes('customNotification')} +
+ +
+ {/if} +
+{/if} diff --git a/packages/core/src/views/notify/Timer.svelte b/packages/core/src/views/notify/Timer.svelte new file mode 100644 index 000000000..f2c52677a --- /dev/null +++ b/packages/core/src/views/notify/Timer.svelte @@ -0,0 +1,63 @@ + + + + +
+ {#if startTime} + - + + {timeString(currentTime - startTime)} + + ago + {/if} +
diff --git a/packages/core/src/views/shared/CloseButton.svelte b/packages/core/src/views/shared/CloseButton.svelte index ef07847a5..96db260ac 100644 --- a/packages/core/src/views/shared/CloseButton.svelte +++ b/packages/core/src/views/shared/CloseButton.svelte @@ -1,28 +1,29 @@
-
-
{@html closeIcon}
+
+
+ {@html closeIcon} +
diff --git a/packages/core/src/views/shared/Modal.svelte b/packages/core/src/views/shared/Modal.svelte index db7f69ff1..9362d11c8 100644 --- a/packages/core/src/views/shared/Modal.svelte +++ b/packages/core/src/views/shared/Modal.svelte @@ -16,9 +16,9 @@
- - - {#if $wallets$} - - - - - {/if} +
+ + + {#if $wallets$} + +
+
+ + + + + +
+
+ + + +
+
+ {/if} +
{#if $wallets$} {#each $wallets$ as { icon, label, accounts, chains, provider }} @@ -300,6 +400,7 @@ {#each accounts as { address, ens, balance }}