Why Don't I See My Wallet Link

docs/package.json

@@ -55,7 +55,7 @@
  "type": "module",
  "dependencies": {
  "@web3-onboard/coinbase": "^2.2.1",
- "@web3-onboard/core": "^2.16.0",
+ "@web3-onboard/core": "^2.16.1-alpha.2",
  "@web3-onboard/dcent": "^2.2.4",
  "@web3-onboard/enkrypt": "^2.0.1",
  "@web3-onboard/fortmatic": "^2.0.16",

docs/src/routes/docs/[...3]modules/core.md

@@ -222,6 +222,12 @@ type ConnectModalOptions = {
  * Defaults to `https://ethereum.org/en/wallets/find-wallet/#main-content`
  */
  iDontHaveAWalletLink?: string
+ /**
+ * Customize the link for the `Where's My Wallet` info pop up shown on the
+ * select wallet modal.
+ * Defaults to `https://www.blocknative.com/blog/metamask-wont-connect-web3-wallet-troubleshooting`
+ */
+ wheresMyWalletLink?: string
  /**
  * Define support for Unstoppable Domains resolutions
  * after a user connects. Similar to ens, uns can be used for users who

examples/with-sveltekit/package.json

@@ -32,7 +32,7 @@
  "type": "module",
  "dependencies": {
  "@fontsource/fira-mono": "^4.5.10",
- "@web3-onboard/core": "^2.15.6-alpha.3",
+ "@web3-onboard/core": "^2.16.1-alpha.2",
  "@web3-onboard/injected-wallets": "^2.8.3-alpha.1",
  "@web3-onboard/walletconnect": "^2.3.3-alpha.1",
  "buffer": "^6.0.3"

packages/core/README.md

@@ -199,6 +199,12 @@ type ConnectModalOptions = {
  * Defaults to `https://ethereum.org/en/wallets/find-wallet/#main-content`
  */
  iDontHaveAWalletLink?: string
+ /**
+ * Customize the link for the `Where's My Wallet` info pop up shown on the
+ * select wallet modal.
+ * Defaults to `https://www.blocknative.com/blog/metamask-wont-connect-web3-wallet-troubleshooting`
+ */
+ wheresMyWalletLink?: string
  /**
  * Define support for Unstoppable Domains resolutions
  * after a user connects. Similar to ens, uns can be used for users who

packages/core/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@web3-onboard/core",
- "version": "2.16.1-alpha.1",
+ "version": "2.16.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",

packages/core/src/types.ts

@@ -211,6 +211,13 @@ export type ConnectModalOptions = {
  * Defaults to `https://ethereum.org/en/wallets/find-wallet/#main-content`
  */
  iDontHaveAWalletLink?: string
+ /**
+ * Customize the link for the `Where's My Wallet` info pop up shown on the
+ * select wallet modal.
+ * Defaults to `https://www.blocknative.com/blog/
+ * metamask-wont-connect-web3-wallet-troubleshooting`
+ */
+ wheresMyWalletLink?: string
  /**
  * Define support for Unstoppable Domains resolutions
  * after a user connects. Similar to ens, uns can be used for users who

packages/core/src/validation.ts

@@ -176,6 +176,7 @@ const connectModalOptions = Joi.object({
  autoConnectLastWallet: Joi.boolean(),
  autoConnectAllPreviousWallet: Joi.boolean(),
  iDontHaveAWalletLink: Joi.string(),
+ wheresMyWalletLink: Joi.string(),
  disableUDResolution: Joi.boolean()
 })
 

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

@@ -11,11 +11,15 @@
  export let connectingErrorMessage: string
 
  let windowWidth: number
+ const { connect } = state.get()
 
  function checkConnected(label: string) {
  const { wallets } = state.get()
  return !!wallets.find(wallet => wallet.label === label)
  }
+
+ const wheresMyWalletDefault =
+ 'https://www.blocknative.com/blog/metamask-wont-connect-web3-wallet-troubleshooting'
 </script>
 
 <style>
@@ -41,13 +45,23 @@
  margin: 1rem 1rem 0;
  }
 
+ .notice-container {
+ flex: 0 0 100%;
+ margin-top: 0.75rem;
+ }
+
  @media all and (min-width: 768px) {
  .wallets-container {
  display: grid;
  grid-template-columns: repeat(var(--onboard-wallet-columns, 2), 1fr);
- padding: 1rem;
+ padding: 1rem 1rem 0 1rem;
  border: none;
  }
+ .notice-container {
+ grid-column: span 2;
+ margin-bottom: 1rem;
+ margin-top: 0;
+ }
  }
 </style>
 
@@ -73,5 +87,18 @@
  connectingWalletLabel !== wallet.label}
  />
  {/each}
+ <div class="notice-container">
+ <Warning>
+ <div>
+ <div>Why don't I see my Wallet?</div>
+ <a
+ class="link pointer"
+ href={connect.wheresMyWalletLink || wheresMyWalletDefault}
+ target="_blank"
+ rel="noreferrer noopener">Click here to learn more</a
+ >
+ </div>
+ </Warning>
+ </div>
  </div>
 </div>

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

@@ -5,33 +5,30 @@
 
 <style>
  .container {
- padding: var(--onboard-spacing-5, var(--spacing-5));
+ gap: 1rem;
+ padding: 0.75rem;
  color: var(--onboard-warning-700, var(--warning-700));
  font-size: var(--onboard-font-size-7, var(--font-size-7));
  line-height: 16px;
  border: 1px solid var(--onboard-warning-400, var(--warning-400));
  background: var(--onboard-warning-100, var(--warning-100));
- margin: 0;
  border-radius: 12px;
  }
 
  .icon {
  color: var(--onboard-warning-700, var(--warning-700));
  width: 1rem;
  height: 1rem;
- margin-left: var(--onboard-spacing-5, var(--spacing-5));
- }
-
- p {
- margin: 0;
- width: fit-content;
+flex: 0 0 auto;
  }
+
+ 
 </style>
 
 <div in:fade class="container flex justify-between">
- <p>
+ <div>
  <slot />
- </p>
+ </div>
 
  <div class="icon">
  {@html infoIcon}

packages/demo/package.json

@@ -23,7 +23,7 @@
  "webpack-dev-server": "4.7.4"
  },
  "dependencies": {
- "@web3-onboard/core": "^2.16.1-alpha.1",
+ "@web3-onboard/core": "^2.16.1-alpha.2",
  "@web3-onboard/coinbase": "^2.2.1",
  "@web3-onboard/transaction-preview": "^2.0.5",
  "@web3-onboard/dcent": "^2.2.4",

packages/demo/src/App.svelte

@@ -105,7 +105,7 @@
  const walletConnect = walletConnectModule({
  connectFirstChainId: true,
  version: 2,
- handleUri: (uri) => console.log(uri),
+ handleUri: uri => console.log(uri),
  projectId: 'f6bd6e2911b56f5ac3bc8b2d0e2d7ad5',
  qrcodeModalOptions: {
  mobileLinks: ['rainbow', 'metamask', 'argent', 'trust', 'imtoken', 'pillar']
@@ -329,10 +329,8 @@
  provider => provider.label === 'Unstoppable'
  )
  if (unstoppableUser) console.log(unstoppableUser.instance.user)
- const wc = wallet.find(
- provider => provider.label === 'WalletConnect'
- )
- if(wc) console.log(wc)
+ const wc = wallet.find(provider => provider.label === 'WalletConnect')
+ if (wc) console.log(wc)
  })
 
  const signTransactionMessage = async provider => {

packages/react/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@web3-onboard/react",
- "version": "2.7.0",
+ "version": "2.7.1-alpha.1",
  "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",
@@ -62,7 +62,7 @@
  "typescript": "^4.5.5"
  },
  "dependencies": {
- "@web3-onboard/core": "^2.16.0",
+ "@web3-onboard/core": "^2.16.1-alpha.2",
  "@web3-onboard/common": "^2.3.0",
  "use-sync-external-store": "1.0.0"
  },

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@web3-onboard/vue",
- "version": "2.6.0",
+ "version": "2.6.1-alpha.1",
  "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",
@@ -63,7 +63,7 @@
  "@vueuse/core": "^8.4.2",
  "@vueuse/rxjs": "^8.2.0",
  "@web3-onboard/common": "^2.3.0",
- "@web3-onboard/core": "^2.16.0",
+ "@web3-onboard/core": "^2.16.1-alpha.2",
  "vue-demi": "^0.12.4"
  },
  "peerDependencies": {