MetaMask Mobile Compatibility Checklist (MetaMask#136)

* add the MetaMask Mobile Compatibility Checklist * add alternative ui library section Co-authored-by: Erik Marks <[email protected]>
HarryXCAD · Aug 5, 2020 · dd6eede · dd6eede
1 parent 7c17fe3
commit dd6eede
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 31 deletions.
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -116,10 +116,8 @@ function getGuideSidebar(guide, api, bestPractices, mobile, resources) {
       collapsable: false,
       children: [
         'mobile-getting-started',
+        'site-compatibility-checklist',
         'mobile-best-practices',
-        'dapp-compatibility',
-        'deeplinking',
-        'walletconnect',
       ]
     },
     {

diff --git a/docs/guide/dapp-compatibility.md b/docs/guide/dapp-compatibility.md
diff --git a/docs/guide/deeplinking.md b/docs/guide/deeplinking.md
diff --git a/docs/guide/mobile-best-practices.md b/docs/guide/mobile-best-practices.md
@@ -1,4 +1,4 @@
-# Mobile Best Practices
+# Best Practices
 
 If this page doesn't answer your question, please feel free to open an issue [in our repository](https://github.com/MetaMask/metamask-mobile).
 
@@ -42,3 +42,29 @@ function handleEthereum() {
   }
 }
 ```
+
+## Using WalletConnect
+
+With WalletConnect, you can use MetaMask mobile as a signer while using applications on another browser, desktop, or mobile application.
+Check out the [WalletConnect mobile linking docs](https://docs.walletconnect.org/mobile-linking) for more info.
+
+## Deeplinking
+
+::: tip
+[Click here to create deeplinks for your application.](https://metamask.github.io/metamask-deeplinks/#)
+:::
+
+Deeplinks enable instant invocation of the user's preferred wallet application with correctly parameterized transactions.
+
+Only the (authenticated) user can confirm the transaction, and the wallet can be a web, mobile or desktop app.
+
+URLs embedded in QR codes, hyperlinks in web pages, emails, or chat messages enable robust, cross-application signaling between otherwise loosely coupled applications.
+
+You can use deeplinks for things like:
+
+- Creating a URL so your users can open your app directly in MetaMask mobile to interact with your application with their Ethereum account.
+
+- Providing a one-click experience such that users can easily make payments to another account (with pre-filled parameters like recipient address, amount, network, etc.)
+
+- Let your users make gasless and instant transactions with Connext payment channel requests
+  - This requires that the user opts in for the InstaPay experimental feature.
diff --git a/docs/guide/mobile-getting-started.md b/docs/guide/mobile-getting-started.md
@@ -1,4 +1,4 @@
-# Mobile Getting Started
+# Introduction
 
 ## Why you and your users should use MetaMask Mobile
 

diff --git a/docs/guide/site-compatibility-checklist.md b/docs/guide/site-compatibility-checklist.md
@@ -0,0 +1,16 @@
+# Site Compatibility Checklist
+
+- Ensure that your site is compatible with the [MetaMask Ethereum provider API](./guide/ethereum-provider.html) and review the [MetaMask mobile best practices](./mobile-best-practices.html)
+
+- Include MetaMask mobile as a listed wallet in your application, and link to open the MetaMask mobile app (if installed) or to go to the app store (if not yet installed)
+  - We recommend adding a `Connect With MetaMask` button and using [deeplinks](https://metamask.github.io/metamask-deeplinks/)
+  - For more information about deeplinks, please see the [deeplinking documentation](./mobile-best-practices.html#deeplinking)
+
+Please direct your users to either the relevant app store listing or to [the MetaMask homepage](https://metamask.io/download.html) to download MetaMask mobile
+
+## Web3 Site UI Libraries
+
+Instead of creating your own `Connect With MetaMask` button here are a couple of options:
+
+- [Rimble UI](https://rimble.consensys.design/)
+- [Decentraland UI](https://ui.decentraland.org/?path=/story/atlas--uncontrolled)
diff --git a/docs/guide/walletconnect.md b/docs/guide/walletconnect.md