Merge pull request #3184 from thematters/feat/add-install-metamask-guide

feat(signup): add install metamask guide
thematters · Feb 17, 2023 · e40eead · e40eead · vercel · Feb 17, 2023
2 parents 8d515a8 + 2df7545
commit e40eead
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 2 deletions.
diff --git a/lang/en.json b/lang/en.json
@@ -7,6 +7,10 @@
     "defaultMessage": "Download App",
     "description": "src/views/Help/index.tsx"
   },
+  "FaTb0A": {
+    "defaultMessage": "Install MetaMask",
+    "description": "src/components/Forms/WalletAuthForm/Select.tsx"
+  },
   "JMRVO6": {
     "defaultMessage": "Matters Community",
     "description": "src/views/Help/index.tsx"

diff --git a/lang/zh-Hans.json b/lang/zh-Hans.json
@@ -11,6 +11,10 @@
     "defaultMessage": "下载应用",
     "description": "src/views/Help/index.tsx"
   },
+  "FaTb0A": {
+    "defaultMessage": "安装 MetaMask",
+    "description": "src/components/Forms/WalletAuthForm/Select.tsx"
+  },
   "JMRVO6": {
     "defaultMessage": "社区共建基地",
     "description": "src/views/Help/index.tsx"

diff --git a/lang/zh-Hant.json b/lang/zh-Hant.json
@@ -11,6 +11,10 @@
     "defaultMessage": "下載應用",
     "description": "src/views/Help/index.tsx"
   },
+  "FaTb0A": {
+    "defaultMessage": "安裝 MetaMask",
+    "description": "src/components/Forms/WalletAuthForm/Select.tsx"
+  },
   "JMRVO6": {
     "defaultMessage": "社區共建基地",
     "description": "src/views/Help/index.tsx"

diff --git a/src/common/enums/externalLinks.ts b/src/common/enums/externalLinks.ts
@@ -17,6 +17,7 @@ export const EXTERNAL_LINKS = {
     'https://docs.like.co/v/zh/user-guide/likecoin-button/superlike?utm_source=Matters&utm_medium=website&utm_campaign=superlike_funnel',
   PLANET: 'https://www.planetable.xyz/',
   ENS_DOCS: 'https://docs.ens.domains/',
+  METAMASK: 'https://metamask.io/download/',
 }
 
 export const GUIDE_LINKS = {

diff --git a/src/common/utils/analytics.ts b/src/common/utils/analytics.ts
@@ -53,6 +53,7 @@ interface ClickButtonProp {
     | 'share_user'
     | 'signup'
     | 'login/signup'
+    | 'installMetaMask'
     | 'connectorMetaMask'
     | 'connectorWalletConnect'
     | 'top_up'

diff --git a/src/components/Forms/WalletAuthForm/Select.tsx b/src/components/Forms/WalletAuthForm/Select.tsx
@@ -1,7 +1,8 @@
 import React, { useContext, useEffect } from 'react'
+import { FormattedMessage } from 'react-intl'
 import { useAccount, useConnect, useDisconnect } from 'wagmi'
 
-import { GUIDE_LINKS } from '~/common/enums'
+import { EXTERNAL_LINKS, GUIDE_LINKS } from '~/common/enums'
 import { analytics } from '~/common/utils'
 import {
   Dialog,
@@ -190,7 +191,7 @@ const Select: React.FC<FormProps> = ({
       )}
 
       <Form.List groupName={<Translate id="connectWallet" />}>
-        {injectedConnector?.ready && (
+        {injectedConnector?.ready ? (
           <Form.List.Item
             title={
               <TextIcon
@@ -211,6 +212,28 @@ const Select: React.FC<FormProps> = ({
             role="button"
             right={isMetaMaskLoading ? <IconSpinner16 color="grey" /> : null}
           />
+        ) : (
+          <Form.List.Item
+            title={
+              <TextIcon
+                color="black"
+                icon={<IconMetaMask24 size="md" />}
+                size="md"
+                spacing="xtight"
+              >
+                <FormattedMessage
+                  defaultMessage="Install MetaMask"
+                  description="src/components/Forms/WalletAuthForm/Select.tsx" />
+              </TextIcon>
+            }
+            htmlHref={EXTERNAL_LINKS.METAMASK}
+            onClick={() => {
+              analytics.trackEvent('click_button', {
+                type: 'installMetaMask',
+              })
+            }}
+            role="button"
+          />
         )}
         <Form.List.Item
           title={