Skip to content

Commit a17463d

Browse files
Adamj1232Adamj1232
authored
Merge pull request #1766 from blocknative/release/2.23.2
Release 2.23.2
2 parents da5cb6e + 77eaccf commit a17463d

32 files changed

+387
-276
lines changed

‎docs/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
"dependencies": {
5252
"@web3-onboard/cede-store": "^2.0.2",
5353
"@web3-onboard/coinbase": "^2.2.4",
54-
"@web3-onboard/core": "^2.20.0-alpha.1",
54+
"@web3-onboard/core": "^2.20.1",
5555
"@web3-onboard/dcent": "^2.2.7",
5656
"@web3-onboard/enkrypt": "^2.0.4",
5757
"@web3-onboard/fortmatic": "^2.0.19",
@@ -60,7 +60,7 @@
6060
"@web3-onboard/gas": "^2.1.8",
6161
"@web3-onboard/gnosis": "^2.1.10",
6262
"@web3-onboard/infinity-wallet": "^2.0.4",
63-
"@web3-onboard/injected-wallets": "^2.9.0",
63+
"@web3-onboard/injected-wallets": "^2.10.0",
6464
"@web3-onboard/keepkey": "^2.3.7",
6565
"@web3-onboard/keystone": "^2.3.7",
6666
"@web3-onboard/ledger": "^2.4.6",
@@ -76,7 +76,7 @@
7676
"@web3-onboard/trust": "^2.0.4",
7777
"@web3-onboard/uauth": "^2.0.5",
7878
"@web3-onboard/venly": "^2.0.0-alpha.1",
79-
"@web3-onboard/walletconnect": "^2.3.8",
79+
"@web3-onboard/walletconnect": "^2.3.9",
8080
"@web3-onboard/web3auth": "^2.2.3",
8181
"@web3-onboard/xdefi": "^2.0.4",
8282
"@web3-onboard/zeal": "^2.0.4",

‎docs/src/routes/docs/[...4]wallets/[...24]walletconnect/+page.md

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@ type WalletConnectOptions = {
5454
* Project ID associated with [WalletConnect account](https://cloud.walletconnect.com)
5555
*/
5656
projectId: string
57-
5857
/**
5958
* Defaults to version: 1 - this behavior will be deprecated after the WalletConnect v1 sunset
6059
*/
@@ -67,9 +66,9 @@ type WalletConnectOptions = {
6766
*/
6867
requiredChains?: number[] | undefined
6968
/**
70-
* `undefined` by default, see https://docs.walletconnect.com/2.0/web3modal/options
69+
* `undefined` by default, see https://docs.walletconnect.com/2.0/web/walletConnectModal/options
7170
*/
72-
qrModalOptions?: Web3ModalConfig
71+
qrModalOptions?: EthereumProviderOptions['qrModalOptions']
7372
}
7473
)
7574
```
@@ -97,7 +96,11 @@ const wcV2InitOptions = {
9796
/**
9897
* Optional function to handle WalletConnect URI when it becomes available
9998
*/
100-
handleUri: (uri) => console.log(uri)
99+
handleUri: (uri) => console.log(uri),
100+
/**
101+
* Chains required to be supported by all wallets connecting to your DApp
102+
*/
103+
requiredChains: [1, 56]
101104
}
102105

103106
// initialize the module with options

‎docs/src/routes/docs/[...4]wallets/[...9]injected/+page.md

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,12 @@ const equal = {
153153
provider: window.ethereum
154154
}),
155155
// A list of platforms that this wallet supports
156-
platforms: ['desktop']
156+
platforms: ['desktop'],
157+
/**
158+
* A Url to link users to a download page for the wallet
159+
* to be shown if not installed or available on the browser
160+
*/
161+
externalUrl: 'http://www.CoolEqualWalletDownload.com'
157162
}
158163

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

173178
```javascript
174179
const injected = injectedModule({
175-
displayUnavailable: true
180+
// display all unavailable injected wallets
181+
displayUnavailable: true,
182+
||
183+
// display specific unavailable wallets
184+
displayUnavailable: [ProviderLabel.MetaMask, ProviderLabel.Trust]
176185
})
177186
```
178187

179-
This will render every injected wallet as regardless of whether it has been detected in the window, happy days.
180-
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:
188+
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.
189+
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:
181190

182191
```javascript
183192
const injected = injectedModule({
184-
// display all wallets even if they are unavailable
185-
displayUnavailable: true,
193+
// display specific injected wallets even if they are unavailable
194+
// can also be set to `true` to display all unavailable injected wallets
195+
displayUnavailable: [ProviderLabel.MetaMask, ProviderLabel.Trust],
186196
// do a manual sort of injected wallets so that MetaMask and Coinbase are ordered first
187197
sort: (wallets) => {
188198
const metaMask = wallets.find(({ label }) => label === ProviderLabel.MetaMask)
@@ -203,11 +213,12 @@ const injected = injectedModule({
203213
})
204214
```
205215

206-
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:
216+
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:
207217

208218
```javascript
209219
const injected = injectedModule({
210-
// display all wallets even if they are unavailable
220+
// display specific injected wallets even if they are unavailable
221+
// can also be set to `true` to display all unavailable injected wallets
211222
displayUnavailable: true,
212223
// but only show Binance and Bitski wallet if they are available
213224
filter: {
@@ -234,15 +245,16 @@ const injected = injectedModule({
234245
})
235246
```
236247

237-
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:
248+
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:
238249

239250
```javascript
240251
const injected = injectedModule({
241252
custom: [
242253
// include custom (not natively supported) injected wallet modules here
243254
],
244-
// display all wallets even if they are unavailable
245-
displayUnavailable: true,
255+
// display specific injected wallets even if they are unavailable
256+
// can also be set to `true` to display all unavailable injected wallets
257+
displayUnavailable: [ProviderLabel.MetaMask, ProviderLabel.Trust],
246258
// but only show Binance and Bitski wallet if they are available
247259
filter: {
248260
[ProviderLabel.Binance]: 'unavailable',
@@ -265,7 +277,10 @@ const injected = injectedModule({
265277
.filter((wallet) => wallet)
266278
)
267279
},
268-
walletUnavailableMessage: (wallet) => `Oops ${wallet.label} is unavailable!`
280+
walletUnavailableMessage: (wallet) =>
281+
wallet.externalUrl
282+
? `Oops ${wallet.label} is unavailable! Please <a href="${wallet.externalUrl}" target="_blank">install</a>`
283+
: `Oops ${wallet.label} is unavailable!`
269284
})
270285
```
271286

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "web3-onboard-monorepo",
3-
"version": "2.23.1",
3+
"version": "2.23.2",
44
"private": true,
55
"workspaces": {
66
"packages": [

‎packages/core/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@web3-onboard/core",
3-
"version": "2.20.0",
3+
"version": "2.20.1",
44
"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.",
55
"keywords": [
66
"Ethereum",

‎packages/core/src/i18n/en.json

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"sidebar": {
66
"heading": "",
77
"subheading": "Connect your wallet",
8-
"paragraph": "Connecting your wallet is like “logging in” to Web3. Select your wallet from the options to get started."
8+
"paragraph": "Connecting your wallet is like “logging in” to Web3. Select your wallet from the options to get started.",
9+
"IDontHaveAWallet": "I don't have a wallet"
910
},
1011
"recommendedWalletsPart1": "{app} only supports",
1112
"recommendedWalletsPart2": "on this platform. Please use or install one of the supported wallets to continue",
@@ -15,7 +16,9 @@
1516
"terms": "Terms & Conditions",
1617
"and": "and",
1718
"privacy": "Privacy Policy"
18-
}
19+
},
20+
"whyDontISeeMyWallet": "Why don't I see my wallet?",
21+
"learnMore": "Click here to learn more"
1922
},
2023
"connectingWallet": {
2124
"header": "{connectionRejected, select, false {Connecting to {wallet}...} other {Connection Rejected}}",

‎packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@
143143
</style>
144144

145145
<div
146-
in:fade={{ duration: 250 }}
146+
in:fade|local={{ duration: 250 }}
147147
out:fade={{ duration: 100 }}
148148
class="ac-trigger"
149149
on:click|stopPropagation={toggle}
@@ -187,7 +187,7 @@
187187
: shortenedFirstAddress}
188188
</div>
189189
{#if firstAddressBalance}
190-
<div in:fade class="balance">
190+
<div in:fade|local class="balance">
191191
{firstAddressBalance.length > 7
192192
? firstAddressBalance.slice(0, 7)
193193
: firstAddressBalance}

‎packages/core/src/views/account-center/SecondaryTokenTable.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
<div class="icon-name-container">
7373
{#if token.icon}
7474
{#await token.icon then iconLoaded}
75-
<div in:fade class="icon">
75+
<div in:fade|local class="icon">
7676
{#if isSVG(iconLoaded)}
7777
<!-- render svg string -->
7878
{@html iconLoaded}

‎packages/core/src/views/account-center/WalletRow.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@
237237

238238
<!-- BALANCE -->
239239
{#if balance}
240-
<div in:fade class="balance">
240+
<div in:fade|local class="balance">
241241
{formatBalance(balance)}
242242
</div>
243243
{/if}
@@ -256,7 +256,7 @@
256256
</div>
257257

258258
{#if showMenu === address}
259-
<ul in:fade class="menu absolute">
259+
<ul in:fade|local class="menu absolute">
260260
<li
261261
on:click|stopPropagation={() => {
262262
showMenu = ''

‎packages/core/src/views/connect/SelectingWallet.svelte

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script lang="ts">
2+
import { _ } from 'svelte-i18n'
3+
import en from '../../i18n/en.json'
24
import { MOBILE_WINDOW_WIDTH } from '../../constants.js'
35
import { state } from '../../store/index.js'
46
import type { WalletWithLoadingIcon } from '../../types.js'
@@ -88,12 +90,16 @@
8890
{/each}
8991
<div class="notice-container">
9092
<Warning>
91-
<div>Why don't I see my Wallet?</div>
93+
<div>{$_('connect.selectingWallet.whyDontISeeMyWallet', {
94+
default: en.connect.selectingWallet.whyDontISeeMyWallet
95+
})}</div>
9296
<a
9397
class="link pointer"
9498
href={connect.wheresMyWalletLink || wheresMyWalletDefault}
9599
target="_blank"
96-
rel="noreferrer noopener">Click here to learn more</a
100+
rel="noreferrer noopener">{$_('connect.selectingWallet.learnMore', {
101+
default: en.connect.selectingWallet.learnMore
102+
})}</a
97103
>
98104
</Warning>
99105
</div>

‎packages/core/src/views/connect/Sidebar.svelte

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,9 @@
212212
target="_blank"
213213
rel="noreferrer noopener"
214214
class="no-link"
215-
>I don't have a wallet <div class="info-icon">{@html infoIcon}</div></a
215+
>{$_('connect.selectingWallet.sidebar.IDontHaveAWallet', {
216+
default: en.connect.selectingWallet.sidebar.IDontHaveAWallet
217+
})} <div class="info-icon">{@html infoIcon}</div></a
216218
>
217219
{#if windowWidth < MOBILE_WINDOW_WIDTH}
218220
<div class="indicators flex items-center">

‎packages/core/src/views/connect/WalletButton.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@
109109
class="wallet-button-styling"
110110
class:connected
111111
{disabled}
112-
in:fade
112+
in:fade|local
113113
on:click={onClick}
114114
>
115115
<div class="wallet-button-container-inner">

‎packages/core/src/views/notify/Index.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@
133133
<li
134134
animate:flip={{ duration: 500 }}
135135
on:click|stopPropagation
136-
in:fly={{ duration: 1200, delay: 300, x, y, easing: elasticOut }}
136+
in:fly|local={{ duration: 1200, delay: 300, x, y, easing: elasticOut }}
137137
out:fade={{ duration: 300, easing: cubicOut }}
138138
class={`bn-notify-li-${position} ${
139139
position.includes('top')

‎packages/core/src/views/shared/WalletAppBadge.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@
203203
{#await icon}
204204
<div class="placeholder-icon" />
205205
{:then iconLoaded}
206-
<div in:fade class="icon flex justify-center items-center">
206+
<div in:fade|local class="icon flex justify-center items-center">
207207
{#if isSVG(iconLoaded)}
208208
<!-- render svg string -->
209209
{@html iconLoaded}

‎packages/core/src/views/shared/Warning.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { fade } from 'svelte/transition'
2+
import { slide } from 'svelte/transition'
33
import infoIcon from '../../icons/info.js'
44
</script>
55

@@ -25,7 +25,7 @@
2525
2626
</style>
2727

28-
<div in:fade class="container flex justify-between">
28+
<div in:slide|local="{{delay: 50, duration: 500}}" class="container flex justify-between">
2929
<div>
3030
<slot />
3131
</div>

‎packages/demo/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"dependencies": {
2727
"@web3-onboard/cede-store": "^2.0.2",
2828
"@web3-onboard/coinbase": "^2.2.3",
29-
"@web3-onboard/core": "^2.20.0",
29+
"@web3-onboard/core": "^2.20.1",
3030
"@web3-onboard/dcent": "^2.2.7",
3131
"@web3-onboard/enkrypt": "^2.0.3",
3232
"@web3-onboard/fortmatic": "^2.0.18",
@@ -35,7 +35,7 @@
3535
"@web3-onboard/gas": "^2.1.7",
3636
"@web3-onboard/gnosis": "^2.1.9",
3737
"@web3-onboard/infinity-wallet": "^2.0.3",
38-
"@web3-onboard/injected-wallets": "^2.9.0",
38+
"@web3-onboard/injected-wallets": "^2.10.0",
3939
"@web3-onboard/keepkey": "^2.3.7",
4040
"@web3-onboard/keystone": "^2.3.7",
4141
"@web3-onboard/ledger": "^2.4.5",
@@ -51,7 +51,7 @@
5151
"@web3-onboard/trust": "^2.0.3",
5252
"@web3-onboard/uauth": "^2.0.4",
5353
"@web3-onboard/venly": "^2.0.0",
54-
"@web3-onboard/walletconnect": "^2.3.8",
54+
"@web3-onboard/walletconnect": "^2.3.9-alpha.2",
5555
"@web3-onboard/web3auth": "^2.2.2",
5656
"@web3-onboard/xdefi": "^2.0.3",
5757
"@web3-onboard/zeal": "^2.0.3",

‎packages/demo/src/App.svelte

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,12 @@
7070
const injected = injectedModule({
7171
custom: [
7272
// include custom (not natively supported) injected wallet modules here
73-
]
74-
// display all wallets even if they are unavailable
75-
// displayUnavailable: true
73+
],
74+
// display all unavailable injected wallets
75+
// displayUnavailable: true,
76+
// ||
77+
// display specific unavailable wallets
78+
displayUnavailable: [ProviderLabel.MetaMask, ProviderLabel.Trust],
7679
// but only show Binance and Bitski wallet if they are available
7780
// filter: {
7881
// [ProviderLabel.Binance]: 'unavailable',
@@ -101,7 +104,10 @@
101104
// .filter(wallet => wallet)
102105
// )
103106
// }
104-
// walletUnavailableMessage: wallet => `Oops ${wallet.label} is unavailable!`
107+
// walletUnavailableMessage: wallet =>
108+
// wallet.externalUrl
109+
// ? `Oops ${wallet.label} is unavailable! Please <a href="${wallet.externalUrl}" target="_blank">install</a>`
110+
// : `Oops ${wallet.label} is unavailable!`
105111
})
106112
107113
const coinbaseWallet = coinbaseModule()
@@ -120,7 +126,8 @@
120126
'imtoken',
121127
'pillar'
122128
]
123-
}
129+
},
130+
requiredChains:[1, 56]
124131
})
125132
const portis = portisModule({
126133
apiKey: 'b2b7586f-2b1e-4c30-a7fb-c2d1533b153b'
@@ -686,7 +693,6 @@
686693
>
687694
</div>
688695
<div class="position-buttons">
689-
690696
<button
691697
on:click={() =>
692698
onboard.state.actions.updateAccountCenter({

0 commit comments

Comments
 (0)