Why Don't I See My Wallet Link (#1617)

Author: leightkt

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",