Skip to content

Commit

Permalink
Merge pull request #1766 from blocknative/release/2.23.2
Browse files Browse the repository at this point in the history
Release 2.23.2
  • Loading branch information
Adamj1232 authored Jun 9, 2023
2 parents da5cb6e + 77eaccf commit a17463d
Show file tree
Hide file tree
Showing 32 changed files with 387 additions and 276 deletions.
6 changes: 3 additions & 3 deletions docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
"dependencies": {
"@web3-onboard/cede-store": "^2.0.2",
"@web3-onboard/coinbase": "^2.2.4",
"@web3-onboard/core": "^2.20.0-alpha.1",
"@web3-onboard/core": "^2.20.1",
"@web3-onboard/dcent": "^2.2.7",
"@web3-onboard/enkrypt": "^2.0.4",
"@web3-onboard/fortmatic": "^2.0.19",
Expand All @@ -60,7 +60,7 @@
"@web3-onboard/gas": "^2.1.8",
"@web3-onboard/gnosis": "^2.1.10",
"@web3-onboard/infinity-wallet": "^2.0.4",
"@web3-onboard/injected-wallets": "^2.9.0",
"@web3-onboard/injected-wallets": "^2.10.0",
"@web3-onboard/keepkey": "^2.3.7",
"@web3-onboard/keystone": "^2.3.7",
"@web3-onboard/ledger": "^2.4.6",
Expand All @@ -76,7 +76,7 @@
"@web3-onboard/trust": "^2.0.4",
"@web3-onboard/uauth": "^2.0.5",
"@web3-onboard/venly": "^2.0.0-alpha.1",
"@web3-onboard/walletconnect": "^2.3.8",
"@web3-onboard/walletconnect": "^2.3.9",
"@web3-onboard/web3auth": "^2.2.3",
"@web3-onboard/xdefi": "^2.0.4",
"@web3-onboard/zeal": "^2.0.4",
Expand Down
11 changes: 7 additions & 4 deletions docs/src/routes/docs/[...4]wallets/[...24]walletconnect/+page.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@ type WalletConnectOptions = {
* Project ID associated with [WalletConnect account](https://cloud.walletconnect.com)
*/
projectId: string

/**
* Defaults to version: 1 - this behavior will be deprecated after the WalletConnect v1 sunset
*/
Expand All @@ -67,9 +66,9 @@ type WalletConnectOptions = {
*/
requiredChains?: number[] | undefined
/**
* `undefined` by default, see https://docs.walletconnect.com/2.0/web3modal/options
* `undefined` by default, see https://docs.walletconnect.com/2.0/web/walletConnectModal/options
*/
qrModalOptions?: Web3ModalConfig
qrModalOptions?: EthereumProviderOptions['qrModalOptions']
}
)
```
Expand Down Expand Up @@ -97,7 +96,11 @@ const wcV2InitOptions = {
/**
* Optional function to handle WalletConnect URI when it becomes available
*/
handleUri: (uri) => console.log(uri)
handleUri: (uri) => console.log(uri),
/**
* Chains required to be supported by all wallets connecting to your DApp
*/
requiredChains: [1, 56]
}

// initialize the module with options
Expand Down
39 changes: 27 additions & 12 deletions docs/src/routes/docs/[...4]wallets/[...9]injected/+page.md
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,12 @@ const equal = {
provider: window.ethereum
}),
// A list of platforms that this wallet supports
platforms: ['desktop']
platforms: ['desktop'],
/**
* A Url to link users to a download page for the wallet
* to be shown if not installed or available on the browser
*/
externalUrl: 'http://www.CoolEqualWalletDownload.com'
}

const injected = injectedModule({
Expand All @@ -172,17 +177,22 @@ You may want to display injected wallets that are not currently available to the

```javascript
const injected = injectedModule({
displayUnavailable: true
// display all unavailable injected wallets
displayUnavailable: true,
||
// display specific unavailable wallets
displayUnavailable: [ProviderLabel.MetaMask, ProviderLabel.Trust]
})
```

This will render every injected wallet as regardless of whether it has been detected in the window, happy days.
Then the issue of the order of wallets displayed becomes apparent when you have 21 injected wallets at the top of the wallets list. To solve this, all injected wallets are sorted alphabetically by default and there is an additional `sort` parameter which receives the final list of wallets and then returns the list to be rendered. This allows for example setting MetaMask and Coinbase first and then just the rest alphabetically:
This can be set to an array top specify which unavailable injected wallets to show or set to true to display all unavailable injected wallets regardless of whether it has been detected in the window, happy days.
Then the issue of the order of wallets displayed becomes apparent when you have 21 injected wallets at the top of the wallets list. To solve this, all injected wallets are sorted **alphabetically** by default and there is an additional `sort` parameter which receives the final list of wallets and then returns the list to be rendered. This allows for example setting MetaMask and Coinbase first and then just the rest alphabetically:

```javascript
const injected = injectedModule({
// display all wallets even if they are unavailable
displayUnavailable: true,
// display specific injected wallets even if they are unavailable
// can also be set to `true` to display all unavailable injected wallets
displayUnavailable: [ProviderLabel.MetaMask, ProviderLabel.Trust],
// do a manual sort of injected wallets so that MetaMask and Coinbase are ordered first
sort: (wallets) => {
const metaMask = wallets.find(({ label }) => label === ProviderLabel.MetaMask)
Expand All @@ -203,11 +213,12 @@ const injected = injectedModule({
})
```

You may want to display all wallets, but filter out specific wallets based on their availability. For example I may want to display all unavailable wallets except when Binance and Bitski wallet is unavailable, then don't show them, but if they are available, then do show them. To do this, the filters value has been extended to have a new value: `'unavailable'`, as in; remove this wallet if it is unavailable, even though `displayUnavailable` wallets is set:
You may want to display all unavailable injected wallets, but filter out specific wallets based on their availability. For example I may want to display all unavailable wallets except when Binance and Bitski wallet is unavailable, then don't show them, but if they are available, then do show them. To do this, the filters value has been extended to have a new value: `'unavailable'`, as in; remove this wallet if it is unavailable, even though `displayUnavailable` wallets is set:

```javascript
const injected = injectedModule({
// display all wallets even if they are unavailable
// display specific injected wallets even if they are unavailable
// can also be set to `true` to display all unavailable injected wallets
displayUnavailable: true,
// but only show Binance and Bitski wallet if they are available
filter: {
Expand All @@ -234,15 +245,16 @@ const injected = injectedModule({
})
```

If a wallet is selected, but is not available the default error message is: `Please install or enable ${walletName} to continue`. You may want to customise that message, so there is the `walletUnavailableMessage` parameter which is a function that takes the wallet object that is unavailable and returns a string which is the message to display:
If a wallet is selected, but is not available the default error message is: `Oops ${wallet.label} is unavailable! Please <a href="${wallet.externalUrl}" target="_blank">install</a>` if a download link is available for that wallet. If there isn't a download link for that wallet the default is: `Please install or enable ${walletName} to continue`. You may want to customize that message, so there is the `walletUnavailableMessage` parameter which is a function that takes the wallet object that is unavailable and returns a string which is the message to display:

```javascript
const injected = injectedModule({
custom: [
// include custom (not natively supported) injected wallet modules here
],
// display all wallets even if they are unavailable
displayUnavailable: true,
// display specific injected wallets even if they are unavailable
// can also be set to `true` to display all unavailable injected wallets
displayUnavailable: [ProviderLabel.MetaMask, ProviderLabel.Trust],
// but only show Binance and Bitski wallet if they are available
filter: {
[ProviderLabel.Binance]: 'unavailable',
Expand All @@ -265,7 +277,10 @@ const injected = injectedModule({
.filter((wallet) => wallet)
)
},
walletUnavailableMessage: (wallet) => `Oops ${wallet.label} is unavailable!`
walletUnavailableMessage: (wallet) =>
wallet.externalUrl
? `Oops ${wallet.label} is unavailable! Please <a href="${wallet.externalUrl}" target="_blank">install</a>`
: `Oops ${wallet.label} is unavailable!`
})
```

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "web3-onboard-monorepo",
"version": "2.23.1",
"version": "2.23.2",
"private": true,
"workspaces": {
"packages": [
Expand Down
2 changes: 1 addition & 1 deletion packages/core/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@web3-onboard/core",
"version": "2.20.0",
"version": "2.20.1",
"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
7 changes: 5 additions & 2 deletions packages/core/src/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
"sidebar": {
"heading": "",
"subheading": "Connect your wallet",
"paragraph": "Connecting your wallet is like “logging in” to Web3. Select your wallet from the options to get started."
"paragraph": "Connecting your wallet is like “logging in” to Web3. Select your wallet from the options to get started.",
"IDontHaveAWallet": "I don't have a wallet"
},
"recommendedWalletsPart1": "{app} only supports",
"recommendedWalletsPart2": "on this platform. Please use or install one of the supported wallets to continue",
Expand All @@ -15,7 +16,9 @@
"terms": "Terms & Conditions",
"and": "and",
"privacy": "Privacy Policy"
}
},
"whyDontISeeMyWallet": "Why don't I see my wallet?",
"learnMore": "Click here to learn more"
},
"connectingWallet": {
"header": "{connectionRejected, select, false {Connecting to {wallet}...} other {Connection Rejected}}",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@
</style>

<div
in:fade={{ duration: 250 }}
in:fade|local={{ duration: 250 }}
out:fade={{ duration: 100 }}
class="ac-trigger"
on:click|stopPropagation={toggle}
Expand Down Expand Up @@ -187,7 +187,7 @@
: shortenedFirstAddress}
</div>
{#if firstAddressBalance}
<div in:fade class="balance">
<div in:fade|local class="balance">
{firstAddressBalance.length > 7
? firstAddressBalance.slice(0, 7)
: firstAddressBalance}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
<div class="icon-name-container">
{#if token.icon}
{#await token.icon then iconLoaded}
<div in:fade class="icon">
<div in:fade|local class="icon">
{#if isSVG(iconLoaded)}
<!-- render svg string -->
{@html iconLoaded}
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/views/account-center/WalletRow.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@

<!-- BALANCE -->
{#if balance}
<div in:fade class="balance">
<div in:fade|local class="balance">
{formatBalance(balance)}
</div>
{/if}
Expand All @@ -256,7 +256,7 @@
</div>

{#if showMenu === address}
<ul in:fade class="menu absolute">
<ul in:fade|local class="menu absolute">
<li
on:click|stopPropagation={() => {
showMenu = ''
Expand Down
10 changes: 8 additions & 2 deletions packages/core/src/views/connect/SelectingWallet.svelte
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<script lang="ts">
import { _ } from 'svelte-i18n'
import en from '../../i18n/en.json'
import { MOBILE_WINDOW_WIDTH } from '../../constants.js'
import { state } from '../../store/index.js'
import type { WalletWithLoadingIcon } from '../../types.js'
Expand Down Expand Up @@ -88,12 +90,16 @@
{/each}
<div class="notice-container">
<Warning>
<div>Why don't I see my Wallet?</div>
<div>{$_('connect.selectingWallet.whyDontISeeMyWallet', {
default: en.connect.selectingWallet.whyDontISeeMyWallet
})}</div>
<a
class="link pointer"
href={connect.wheresMyWalletLink || wheresMyWalletDefault}
target="_blank"
rel="noreferrer noopener">Click here to learn more</a
rel="noreferrer noopener">{$_('connect.selectingWallet.learnMore', {
default: en.connect.selectingWallet.learnMore
})}</a
>
</Warning>
</div>
Expand Down
4 changes: 3 additions & 1 deletion packages/core/src/views/connect/Sidebar.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,9 @@
target="_blank"
rel="noreferrer noopener"
class="no-link"
>I don't have a wallet <div class="info-icon">{@html infoIcon}</div></a
>{$_('connect.selectingWallet.sidebar.IDontHaveAWallet', {
default: en.connect.selectingWallet.sidebar.IDontHaveAWallet
})} <div class="info-icon">{@html infoIcon}</div></a
>
{#if windowWidth < MOBILE_WINDOW_WIDTH}
<div class="indicators flex items-center">
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/views/connect/WalletButton.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@
class="wallet-button-styling"
class:connected
{disabled}
in:fade
in:fade|local
on:click={onClick}
>
<div class="wallet-button-container-inner">
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/views/notify/Index.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@
<li
animate:flip={{ duration: 500 }}
on:click|stopPropagation
in:fly={{ duration: 1200, delay: 300, x, y, easing: elasticOut }}
in:fly|local={{ duration: 1200, delay: 300, x, y, easing: elasticOut }}
out:fade={{ duration: 300, easing: cubicOut }}
class={`bn-notify-li-${position} ${
position.includes('top')
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/views/shared/WalletAppBadge.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@
{#await icon}
<div class="placeholder-icon" />
{:then iconLoaded}
<div in:fade class="icon flex justify-center items-center">
<div in:fade|local class="icon flex justify-center items-center">
{#if isSVG(iconLoaded)}
<!-- render svg string -->
{@html iconLoaded}
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/views/shared/Warning.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { fade } from 'svelte/transition'
import { slide } from 'svelte/transition'
import infoIcon from '../../icons/info.js'
</script>

Expand All @@ -25,7 +25,7 @@
</style>

<div in:fade class="container flex justify-between">
<div in:slide|local="{{delay: 50, duration: 500}}" class="container flex justify-between">
<div>
<slot />
</div>
Expand Down
6 changes: 3 additions & 3 deletions packages/demo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"dependencies": {
"@web3-onboard/cede-store": "^2.0.2",
"@web3-onboard/coinbase": "^2.2.3",
"@web3-onboard/core": "^2.20.0",
"@web3-onboard/core": "^2.20.1",
"@web3-onboard/dcent": "^2.2.7",
"@web3-onboard/enkrypt": "^2.0.3",
"@web3-onboard/fortmatic": "^2.0.18",
Expand All @@ -35,7 +35,7 @@
"@web3-onboard/gas": "^2.1.7",
"@web3-onboard/gnosis": "^2.1.9",
"@web3-onboard/infinity-wallet": "^2.0.3",
"@web3-onboard/injected-wallets": "^2.9.0",
"@web3-onboard/injected-wallets": "^2.10.0",
"@web3-onboard/keepkey": "^2.3.7",
"@web3-onboard/keystone": "^2.3.7",
"@web3-onboard/ledger": "^2.4.5",
Expand All @@ -51,7 +51,7 @@
"@web3-onboard/trust": "^2.0.3",
"@web3-onboard/uauth": "^2.0.4",
"@web3-onboard/venly": "^2.0.0",
"@web3-onboard/walletconnect": "^2.3.8",
"@web3-onboard/walletconnect": "^2.3.9-alpha.2",
"@web3-onboard/web3auth": "^2.2.2",
"@web3-onboard/xdefi": "^2.0.3",
"@web3-onboard/zeal": "^2.0.3",
Expand Down
18 changes: 12 additions & 6 deletions packages/demo/src/App.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,12 @@
const injected = injectedModule({
custom: [
// include custom (not natively supported) injected wallet modules here
]
// display all wallets even if they are unavailable
// displayUnavailable: true
],
// display all unavailable injected wallets
// displayUnavailable: true,
// ||
// display specific unavailable wallets
displayUnavailable: [ProviderLabel.MetaMask, ProviderLabel.Trust],
// but only show Binance and Bitski wallet if they are available
// filter: {
// [ProviderLabel.Binance]: 'unavailable',
Expand Down Expand Up @@ -101,7 +104,10 @@
// .filter(wallet => wallet)
// )
// }
// walletUnavailableMessage: wallet => `Oops ${wallet.label} is unavailable!`
// walletUnavailableMessage: wallet =>
// wallet.externalUrl
// ? `Oops ${wallet.label} is unavailable! Please <a href="${wallet.externalUrl}" target="_blank">install</a>`
// : `Oops ${wallet.label} is unavailable!`
})
const coinbaseWallet = coinbaseModule()
Expand All @@ -120,7 +126,8 @@
'imtoken',
'pillar'
]
}
},
requiredChains:[1, 56]
})
const portis = portisModule({
apiKey: 'b2b7586f-2b1e-4c30-a7fb-c2d1533b153b'
Expand Down Expand Up @@ -686,7 +693,6 @@
>
</div>
<div class="position-buttons">
<button
on:click={() =>
onboard.state.actions.updateAccountCenter({
Expand Down
Loading

0 comments on commit a17463d

Please sign in to comment.