diff --git a/docs/package.json b/docs/package.json index bbbb9133e..1c28dd77d 100644 --- a/docs/package.json +++ b/docs/package.json @@ -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", @@ -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", @@ -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", diff --git a/docs/src/routes/docs/[...4]wallets/[...24]walletconnect/+page.md b/docs/src/routes/docs/[...4]wallets/[...24]walletconnect/+page.md index 05595e056..5563381c8 100644 --- a/docs/src/routes/docs/[...4]wallets/[...24]walletconnect/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...24]walletconnect/+page.md @@ -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 */ @@ -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'] } ) ``` @@ -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 diff --git a/docs/src/routes/docs/[...4]wallets/[...9]injected/+page.md b/docs/src/routes/docs/[...4]wallets/[...9]injected/+page.md index 23cc2b3f3..240372226 100644 --- a/docs/src/routes/docs/[...4]wallets/[...9]injected/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...9]injected/+page.md @@ -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({ @@ -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) @@ -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: { @@ -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 install` 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', @@ -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 install` + : `Oops ${wallet.label} is unavailable!` }) ``` diff --git a/package.json b/package.json index fefaaf38c..eee28ef41 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "web3-onboard-monorepo", - "version": "2.23.1", + "version": "2.23.2", "private": true, "workspaces": { "packages": [ diff --git a/packages/core/package.json b/packages/core/package.json index c55e7e1d8..9fd774b47 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -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", diff --git a/packages/core/src/i18n/en.json b/packages/core/src/i18n/en.json index a4698e470..a36ccf079 100644 --- a/packages/core/src/i18n/en.json +++ b/packages/core/src/i18n/en.json @@ -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", @@ -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}}", diff --git a/packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte b/packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte index 895402226..f085a27e0 100644 --- a/packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte +++ b/packages/core/src/views/account-center/AcctCenterTriggerLarge.svelte @@ -143,7 +143,7 @@
{#if firstAddressBalance} -
+
{firstAddressBalance.length > 7 ? firstAddressBalance.slice(0, 7) : firstAddressBalance} diff --git a/packages/core/src/views/account-center/SecondaryTokenTable.svelte b/packages/core/src/views/account-center/SecondaryTokenTable.svelte index 15b86f62e..e954fd3fa 100644 --- a/packages/core/src/views/account-center/SecondaryTokenTable.svelte +++ b/packages/core/src/views/account-center/SecondaryTokenTable.svelte @@ -72,7 +72,7 @@
{#if token.icon} {#await token.icon then iconLoaded} -
+
{#if isSVG(iconLoaded)} {@html iconLoaded} diff --git a/packages/core/src/views/account-center/WalletRow.svelte b/packages/core/src/views/account-center/WalletRow.svelte index 1e02aa089..734b6b58f 100644 --- a/packages/core/src/views/account-center/WalletRow.svelte +++ b/packages/core/src/views/account-center/WalletRow.svelte @@ -237,7 +237,7 @@ {#if balance} -
+
{formatBalance(balance)}
{/if} @@ -256,7 +256,7 @@
{#if showMenu === address} -
    +
    • { showMenu = '' diff --git a/packages/core/src/views/connect/SelectingWallet.svelte b/packages/core/src/views/connect/SelectingWallet.svelte index 2e6b976ae..2a171b5ef 100644 --- a/packages/core/src/views/connect/SelectingWallet.svelte +++ b/packages/core/src/views/connect/SelectingWallet.svelte @@ -1,4 +1,6 @@ @@ -25,7 +25,7 @@ -
      +
      diff --git a/packages/demo/package.json b/packages/demo/package.json index 9845d1aa0..fcd07fd67 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -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", @@ -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", @@ -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", diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte index 91a5f267b..c5c1cdb6f 100644 --- a/packages/demo/src/App.svelte +++ b/packages/demo/src/App.svelte @@ -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', @@ -101,7 +104,10 @@ // .filter(wallet => wallet) // ) // } - // walletUnavailableMessage: wallet => `Oops ${wallet.label} is unavailable!` + // walletUnavailableMessage: wallet => + // wallet.externalUrl + // ? `Oops ${wallet.label} is unavailable! Please install` + // : `Oops ${wallet.label} is unavailable!` }) const coinbaseWallet = coinbaseModule() @@ -120,7 +126,8 @@ 'imtoken', 'pillar' ] - } + }, + requiredChains:[1, 56] }) const portis = portisModule({ apiKey: 'b2b7586f-2b1e-4c30-a7fb-c2d1533b153b' @@ -686,7 +693,6 @@ >
      -