feat: connect mask (DimensionDev#5353)

* feat: update connect dialog UI * feat: enable user guide * style: user guide card * fix: typo * fix: remove unused keys * feat: add pin extension tip * fix: typo * feat: add verified & pin icons * fix: user not login sns * chore: reply review * fix: can't open mask composition dialog on facebook * fix: say hello not show after user guide * chore: location Co-authored-by: septs <[email protected]> * fix: say hello * fix: navigation * fix: eslint * chore: reply review * fix: eslint Co-authored-by: septs <[email protected]>
dmrazzy · Jan 25, 2022 · eaea521 · eaea521
1 parent 6f840e9
commit eaea521
Show file tree

Hide file tree

Showing 23 changed files with 469 additions and 393 deletions.
diff --git a/packages/icons/general/Pin.tsx b/packages/icons/general/Pin.tsx
@@ -0,0 +1,10 @@
+import { createIcon } from '../utils'
+import type { SvgIcon } from '@mui/material'
+
+export const PinIcon: typeof SvgIcon = createIcon(
+    'PinIcon',
+    <g>
+        <path d="M16.5 2.75v1.833h-.917v5.5l1.834 2.75v1.834h-5.5v6.416h-1.834v-6.416h-5.5v-1.834l1.834-2.75v-5.5H5.5V2.75h11ZM8.25 4.583v6.056l-1.463 2.194h8.426L13.75 10.64V4.583h-5.5Z" />
+    </g>,
+    '0 0 22 22',
+)
diff --git a/packages/icons/general/Verified.tsx b/packages/icons/general/Verified.tsx
@@ -0,0 +1,26 @@
+import { createIcon } from '../utils'
+import type { SvgIcon } from '@mui/material'
+
+export const VerifiedIcon: typeof SvgIcon = createIcon(
+    'VerifiedIcon',
+    <g>
+        <g clipPath="url(#a)">
+            <path
+                d="M15.782 5.912V3.851l-1.79-1.033-1.028-1.785h-2.061L9.113 0 7.33 1.033H5.268L4.234 2.818 2.444 3.85v2.061L1.418 7.697 2.45 9.48v2.061l1.79 1.029 1.033 1.789h2.061l1.784 1.028 1.79-1.028h2.056l1.028-1.79 1.79-1.028V9.481l1.028-1.784-1.028-1.785Z"
+                fill="#60DFAB"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M12.549 5.85a.5.5 0 0 1 0 .708L7.97 11.135a.5.5 0 0 1-.707 0l-2.14-2.14a.5.5 0 0 1 .707-.707l1.786 1.786 4.224-4.223a.5.5 0 0 1 .708 0Z"
+                fill="#fff"
+            />
+        </g>
+        <defs>
+            <clipPath id="a">
+                <path fill="#fff" transform="translate(.75)" d="M0 0h16v16H0z" />
+            </clipPath>
+        </defs>
+    </g>,
+    '0 0 16 16',
+)
diff --git a/packages/icons/general/index.ts b/packages/icons/general/index.ts
@@ -82,4 +82,6 @@ export * from './Drop'
 export * from './Right'
 export * from './Tutorial'
 export * from './AssetLoading'
+export * from './Verified'
+export * from './Pin'
 export * from './Selected'
diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json
@@ -45,6 +45,8 @@
     "auto_paste_failed_snackbar_action_close": "Close",
     "automation_request_click_post_button": "Please click the “Post” button to open the compose dialog.",
     "try_again": "Try Again",
+    "ok": "OK",
+    "start": "Start",
     "cancel": "Cancel",
     "twitter_account": "realMaskNetwork",
     "facebook_account": "masknetwork",
@@ -81,14 +83,22 @@
     "download": "Download",
     "failed": "Failed",
     "buy_now": "Buy Now",
-    "setup_guide_optional": "[Optional]",
-    "setup_guide_find_username_title": "Find your username",
-    "setup_guide_find_username_text": "Mask needs the username to connect your Profile to your Persona.<br /> Make sure it is correct.",
+    "setup_guide_login": "Please sign up or log in to connect Mask network.",
+    "setup_guide_find_username_text": "Mask needs the username to connect your profile to your persona.",
     "setup_guide_connect_auto": "Connect",
-    "setup_guide_connect_failed": "Failed… Please try it again.",
+    "setup_guide_connect_failed": "Re-Connect",
     "user_guide_tip_connected": "You have connected to this account successfully.",
-    "user_guide_tip_1": "Click here to connect your wallet. You can choose the network or change your wallet here.",
-    "user_guide_tip_2": "Click here to have a quick start.",
+    "setup_guide_say_hello_content": "Hellow Mask world. This is my first encrypted message. Install https://mask.io to send me encrypted post. Follow @realMaskNetwork to explore Web 3.0.",
+    "setup_guide_pin_tip_0": "Don't forget to pin Mask Network in your browser toolbar to access web 3.0 easily.",
+    "setup_guide_pin_tip_1": "Click on ",
+    "setup_guide_pin_tip_1_s": " at top right of your browser.",
+    "setup_guide_pin_tip_2": "Find Mask Network in the list of extensions and click the ",
+    "setup_guide_pin_tip_2_s": " button.",
+    "setup_guide_pin_tip_3": "Pinned successfully.",
+    "setup_guide_pin_dismiss": "Don't show again.",
+    "user_guide_tip_1": "Connect wallet to explore multi-chain dApps.",
+    "user_guide_tip_2": "Setup your exclusive NFT Avatar, explore the endless possibilities of Web 3.0.",
+    "user_guide_tip_3": "Click here to have a quick start.",
     "create_persona": "Create persona",
     "connect_persona": "Connect persona",
     "please_create_persona": "Please create persona",
@@ -163,7 +173,6 @@
     "share_to": "Share to…",
     "sharing": "Sharing",
     "transfer": "Transfer",
-    "username": "Username",
     "export": "Export",
     "wallet_load_retry": "Failed to load {{symbol}}. Click to retry.",
     "wallet_name": "Wallet Name",

diff --git a/packages/mask/shared-ui/locales/ja-JP.json b/packages/mask/shared-ui/locales/ja-JP.json
@@ -36,8 +36,6 @@
     "done": "完了です！",
     "download": "ダウンロード",
     "buy_now": "今すぐ購入",
-    "setup_guide_optional": "[オプション]",
-    "setup_guide_find_username_title": "ユーザー名を探す",
     "setup_guide_find_username_text": "Mask のペルソナと接続するためにユーザー名が必要です。<br /> 正しいものを入力してください。",
     "setup_guide_connect_auto": "接続する",
     "setup_guide_connect_failed": "失敗しました… もう一度お試しください。",
@@ -92,7 +90,6 @@
     "share_to": "共有先",
     "sharing": "共有する",
     "transfer": "転送",
-    "username": "ユーザー名",
     "wallet_name": "ウォレット名",
     "wallet_rename": "ウォレット名を変更",
     "wallet_balance": "残高",

diff --git a/packages/mask/shared-ui/locales/ko-KR.json b/packages/mask/shared-ui/locales/ko-KR.json
@@ -81,8 +81,6 @@
     "download": "다운로드",
     "failed": "실패",
     "buy_now": "바로 매수하기",
-    "setup_guide_optional": "[옵션널]",
-    "setup_guide_find_username_title": "아이디를 찾기",
     "setup_guide_find_username_text": "프로필과 페르소나를 연결시키려면 아이디가 필요합니다.",
     "setup_guide_connect_auto": "연결",
     "setup_guide_connect_failed": "실패했습니다... 다시 시도해 보세요.",
@@ -161,7 +159,6 @@
     "share_to": "...에게 공유하기",
     "sharing": "공유 중",
     "transfer": "이체",
-    "username": "아이디",
     "wallet_name": "월렛 이름",
     "wallet_rename": "월렛 이름 바꾸기",
     "wallet_add_nft_invalid_owner": "해당 수집품은 존재하지 않거나 유저님의 것이 아닙니다.",

diff --git a/packages/mask/shared-ui/locales/qya-AA.json b/packages/mask/shared-ui/locales/qya-AA.json
@@ -81,8 +81,6 @@
     "download": "crwdns4147:0crwdne4147:0",
     "failed": "crwdns9389:0crwdne9389:0",
     "buy_now": "crwdns4169:0crwdne4169:0",
-    "setup_guide_optional": "crwdns4171:0[Optional]crwdne4171:0",
-    "setup_guide_find_username_title": "crwdns4173:0crwdne4173:0",
     "setup_guide_find_username_text": "crwdns4175:0crwdne4175:0",
     "setup_guide_connect_auto": "crwdns4177:0crwdne4177:0",
     "setup_guide_connect_failed": "crwdns4179:0crwdne4179:0",
@@ -163,7 +161,6 @@
     "share_to": "crwdns4467:0crwdne4467:0",
     "sharing": "crwdns4469:0crwdne4469:0",
     "transfer": "crwdns4471:0crwdne4471:0",
-    "username": "crwdns4475:0crwdne4475:0",
     "export": "crwdns9305:0crwdne9305:0",
     "wallet_load_retry": "crwdns10135:0{{symbol}}crwdne10135:0",
     "wallet_name": "crwdns4487:0crwdne4487:0",

diff --git a/packages/mask/shared-ui/locales/zh-CN.json b/packages/mask/shared-ui/locales/zh-CN.json
@@ -81,8 +81,6 @@
     "download": "下载",
     "failed": "失败",
     "buy_now": "立即购买",
-    "setup_guide_optional": "[可选]",
-    "setup_guide_find_username_title": "寻找您的用户名",
     "setup_guide_find_username_text": "Mask需要用户名来连接您的身份。<br /> 请确保正确无误。",
     "setup_guide_connect_auto": "连接",
     "setup_guide_connect_failed": "失败。请再试一次。",
@@ -162,7 +160,6 @@
     "share_to": "分享到...",
     "sharing": "分享中",
     "transfer": "转账",
-    "username": "用户名",
     "export": "导出",
     "wallet_load_retry": "加载 {{symbol}} 失败，请点击重试。",
     "wallet_name": "钱包名称",

diff --git a/packages/mask/shared-ui/locales/zh-TW.json b/packages/mask/shared-ui/locales/zh-TW.json
@@ -64,8 +64,6 @@
     "download": "下載",
     "failed": "失敗",
     "buy_now": "立即購買",
-    "setup_guide_optional": "[選填]",
-    "setup_guide_find_username_title": "尋找你的使用者名稱",
     "setup_guide_find_username_text": "Mask 需要使用者名稱將您的個人資料連接到您的角色。<br/>請確保它是正確的。",
     "setup_guide_connect_auto": "連線",
     "setup_guide_connect_failed": "連線失敗… 請再試一次。",
@@ -128,7 +126,6 @@
     "share_to": "分享至…",
     "sharing": "分享中",
     "transfer": "傳送",
-    "username": "使用者名稱",
     "export": "導出",
     "wallet_name": "錢包名稱",
     "wallet_rename": "重新命名錢包",

diff --git a/packages/mask/src/components/GuideStep/index.tsx b/packages/mask/src/components/GuideStep/index.tsx
@@ -3,18 +3,18 @@ import { makeStyles, usePortalShadowRoot } from '@masknet/theme'
 import { Box, Portal, Typography, styled } from '@mui/material'
 import classNames from 'classnames'
 import { PropsWithChildren, useRef, cloneElement, useEffect, ReactElement, useState } from 'react'
-import { userGuideStatus } from '../../settings/settings'
+import { sayHelloShowed, userGuideStatus } from '../../settings/settings'
 import { activatedSocialNetworkUI } from '../../social-network'
 import { useI18N } from '../../utils'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
         position: 'absolute',
-        boxShadow: '0 0 20px 3000px rgba(0,0,0,.5)',
+        boxShadow: `0 0 0 3000px ${theme.palette.mode === 'light' ? 'rgba(0,0,0,.3)' : 'rgba(110,118,125,.3)'}`,
+        borderRadius: 8,
     },
     target: {
         background: 'transparent',
-        borderRadius: '4px',
     },
     mask: {
         position: 'fixed',
@@ -26,19 +26,21 @@ const useStyles = makeStyles()((theme) => ({
     },
     card: {
         position: 'absolute',
-        left: -10,
+        left: 0,
         width: 256,
         padding: '16px',
         borderRadius: '16px',
-        background: theme.palette.mode === 'light' ? 'rgba(15, 20, 25, 0.8)' : '#fff',
-        color: theme.palette.mode === 'light' ? '#fff' : '#111432',
+        background: 'rgba(0,0,0,.85)',
+        boxShadow: '0 4px 8px rgba(0,0,0,.1)',
+        boxSizing: 'border-box',
+        color: '#fff',
         '&.arrow-top:after': {
             content: '""',
             display: 'inline-block',
             width: 0,
             height: 0,
             border: 'solid 8px transparent',
-            borderBottomColor: theme.palette.mode === 'light' ? 'rgba(15, 20, 25, 0.8)' : '#fff',
+            borderBottomColor: 'rgba(0,0,0,.85)',
             borderBottomWidth: '13px',
             borderTopWidth: 0,
             position: 'absolute',
@@ -51,7 +53,7 @@ const useStyles = makeStyles()((theme) => ({
             width: 0,
             height: 0,
             border: 'solid 8px transparent',
-            borderTopColor: theme.palette.mode === 'light' ? 'rgba(15, 20, 25, 0.8)' : '#fff',
+            borderTopColor: 'rgba(0,0,0,.85)',
             borderTopWidth: '13px',
             borderBottomWidth: 0,
             position: 'absolute',
@@ -61,28 +63,28 @@ const useStyles = makeStyles()((theme) => ({
     },
     buttonContainer: {
         display: 'flex',
-        justifyContent: 'space-evenly',
+        justifyContent: 'space-between',
         paddingTop: '16px',
     },
 }))
 
 const ActionButton = styled('div')(({ theme }) => ({
     boxSizing: 'border-box',
-    width: '80px',
-    height: '26px',
-    lineHeight: '26px',
-    borderRadius: 15,
+    width: 104,
+    height: 32,
+    lineHeight: '32px',
+    borderRadius: 16,
     textAlign: 'center',
     border: 'solid 1px #000',
-    borderColor: theme.palette.mode === 'light' ? '#fff' : 'rgba(15, 20, 25, 0.8)',
+    borderColor: '#fff',
     cursor: 'pointer',
     fontFamily: 'PingFang SC',
 }))
 
 const NextButton = styled(ActionButton)({
     border: 'none',
-    color: '#fff',
-    background: '#1C68F3',
+    color: '#111418',
+    background: '#fff',
 })
 
 export interface GuideStepProps extends PropsWithChildren<{}> {
@@ -127,6 +129,7 @@ export default function GuideStep({
     const onSkip = () => {
         setOpen(false)
         userGuideStatus[ui.networkIdentifier].value = 'completed'
+        sayHelloShowed[ui.networkIdentifier].value = true
     }
 
     const onNext = () => {
@@ -137,7 +140,8 @@ export default function GuideStep({
     }
 
     const onTry = () => {
-        onSkip()
+        setOpen(false)
+        userGuideStatus[ui.networkIdentifier].value = 'completed'
         onComplete?.()
     }
 
@@ -193,19 +197,24 @@ export default function GuideStep({
                                             arrow ? (bottomAvailable ? 'arrow-top' : 'arrow-bottom') : '',
                                         )}
                                         style={{
+                                            left: clientRect.width < 50 ? -clientRect.width / 2 : 0,
                                             [bottomAvailable ? 'top' : 'bottom']: clientRect.height + 16,
                                         }}>
                                         <div style={{ paddingBottom: '16px' }}>
                                             <Typography sx={{ fontSize: 20 }}>
-                                                <span style={{ color: '#1C68F3' }}>{step}</span>/{total}
+                                                {step}/{total}
                                             </Typography>
                                         </div>
                                         <div>
-                                            <Typography>{tip}</Typography>
+                                            <Typography fontSize={14} fontWeight={600}>
+                                                {tip}
+                                            </Typography>
                                         </div>
                                         <div className={classes.buttonContainer}>
                                             {step === total ? (
-                                                <NextButton onClick={onTry}>{t('try')}</NextButton>
+                                                <NextButton style={{ width: '100%' }} onClick={onTry}>
+                                                    {t('try')}
+                                                </NextButton>
                                             ) : (
                                                 <>
                                                     <ActionButton onClick={onSkip}>{t('skip')}</ActionButton>

diff --git a/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx b/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx
@@ -10,6 +10,7 @@ import { useMyIdentities } from '../DataSource/useActivatedUI'
 import { currentSetupGuideStatus } from '../../settings/settings'
 import { activatedSocialNetworkUI } from '../../social-network'
 import classNames from 'classnames'
+import GuideStep from '../GuideStep'
 
 interface TooltipConfigProps {
     placement?: 'bottom' | 'top'
@@ -42,25 +43,28 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 const EntryIconButton = memo((props: PostDialogHintUIProps) => {
+    const { t } = useI18N()
     const { size, tooltip } = props
     const classes = useStylesExtends(useStyles(), props)
 
     return (
-        <Tooltip
-            title="Mask Network"
-            classes={{ tooltip: classes.tooltip }}
-            placement={tooltip?.placement}
-            disableHoverListener={tooltip?.disabled}
-            PopperProps={{
-                disablePortal: true,
-            }}>
-            <IconButton
-                size="large"
-                className={classNames(classes.button, classes.iconButton)}
-                onClick={props.onHintButtonClicked}>
-                <MaskSharpIcon size={size} color="primary" />
-            </IconButton>
-        </Tooltip>
+        <GuideStep step={3} total={3} tip={t('user_guide_tip_3')} onComplete={props.onHintButtonClicked}>
+            <Tooltip
+                title="Mask Network"
+                classes={{ tooltip: classes.tooltip }}
+                placement={tooltip?.placement}
+                disableHoverListener={tooltip?.disabled}
+                PopperProps={{
+                    disablePortal: true,
+                }}>
+                <IconButton
+                    size="large"
+                    className={classNames(classes.button, classes.iconButton)}
+                    onClick={props.onHintButtonClicked}>
+                    <MaskSharpIcon size={size} color="primary" />
+                </IconButton>
+            </Tooltip>
+        </GuideStep>
     )
 })