From 0057278db8e6f5012ca3b0e7e13a6ba8a7946fbe Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Fri, 11 Aug 2023 19:22:28 +0800 Subject: [PATCH 001/328] feat(UniversalAuth): revise Select methods --- lang/default.json | 40 +++++---- lang/en.json | 40 +++++---- lang/zh-Hans.json | 40 +++++---- lang/zh-Hant.json | 40 +++++---- public/static/icons/22px/facebook.svg | 4 + public/static/icons/22px/google.svg | 6 ++ public/static/icons/22px/mail.svg | 5 ++ public/static/icons/22px/metamask.svg | 67 +++++++++++++++ public/static/icons/22px/wallet-connect.svg | 3 + public/static/icons/22px/x.svg | 5 ++ src/components/FillTabs/index.tsx | 62 ++++++++++++++ src/components/FillTabs/styles.module.css | 57 +++++++++++++ .../Forms/SelectAuthMethodForm/AuthTabs.tsx | 39 +++++++++ .../Forms/SelectAuthMethodForm/NormalFeed.tsx | 69 ++++++++++++++++ .../Forms/SelectAuthMethodForm/WalletFeed.tsx | 36 ++++++++ .../Forms/SelectAuthMethodForm/index.tsx | 82 +++++-------------- .../SelectAuthMethodForm/styles.module.css | 70 ++++++++++++++++ .../UniversalAuthDialog/index.tsx | 1 + src/components/Icon/IconFacebook22.tsx | 5 ++ src/components/Icon/IconGoogle22.tsx | 5 ++ src/components/Icon/IconMail22.tsx | 5 ++ src/components/Icon/IconMetamask22.tsx | 5 ++ src/components/Icon/IconWalletConnect22.tsx | 5 ++ src/components/Icon/IconX22.tsx | 5 ++ src/components/Icon/index.tsx | 6 ++ src/components/Tabs/index.tsx | 34 ++++++-- src/components/Tabs/styles.module.css | 19 +++++ 27 files changed, 622 insertions(+), 133 deletions(-) create mode 100644 public/static/icons/22px/facebook.svg create mode 100644 public/static/icons/22px/google.svg create mode 100644 public/static/icons/22px/mail.svg create mode 100644 public/static/icons/22px/metamask.svg create mode 100644 public/static/icons/22px/wallet-connect.svg create mode 100644 public/static/icons/22px/x.svg create mode 100644 src/components/FillTabs/index.tsx create mode 100644 src/components/FillTabs/styles.module.css create mode 100644 src/components/Forms/SelectAuthMethodForm/AuthTabs.tsx create mode 100644 src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx create mode 100644 src/components/Forms/SelectAuthMethodForm/WalletFeed.tsx create mode 100644 src/components/Icon/IconFacebook22.tsx create mode 100644 src/components/Icon/IconGoogle22.tsx create mode 100644 src/components/Icon/IconMail22.tsx create mode 100644 src/components/Icon/IconMetamask22.tsx create mode 100644 src/components/Icon/IconWalletConnect22.tsx create mode 100644 src/components/Icon/IconX22.tsx diff --git a/lang/default.json b/lang/default.json index 8b33fac25a..5933ebb036 100644 --- a/lang/default.json +++ b/lang/default.json @@ -452,10 +452,6 @@ "defaultMessage": "invites you to join the circle {circleName} , and you can experience it for {freePeriod} days for free", "description": "src/components/Notice/CircleNotice/CircleInvitationNotice.tsx" }, - "J+LXrH": { - "defaultMessage": "User registered by email can login and enable wallet login later", - "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" - }, "JTWayV": { "defaultMessage": "Add description", "description": "src/views/User/CollectionDetail/Content.tsx" @@ -497,6 +493,10 @@ "defaultMessage": "Free", "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx" }, + "L34EMG": { + "defaultMessage": "No account?", + "description": "src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx" + }, "L4Fcr8": { "defaultMessage": "New Collection" }, @@ -674,6 +674,10 @@ "defaultMessage": "Tags added", "description": "src/views/TagDetail/DropdownActions/index.tsx" }, + "V5OMr4": { + "defaultMessage": "What is a digital wallet?", + "description": "src/components/Forms/SelectAuthMethodForm/WalletFeed.tsx" + }, "V8msLJ": { "defaultMessage": "left comments and mentioned you in your circle", "description": "src/components/Notice/CircleNotice/CircleNewDiscussionComments.tsx" @@ -933,10 +937,6 @@ "hrgo+E": { "defaultMessage": "Archive" }, - "iCFXtS": { - "defaultMessage": "For unregistered or users enabled wallet login", - "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" - }, "ieGrWo": { "defaultMessage": "Follow" }, @@ -950,6 +950,10 @@ "izWS4J": { "defaultMessage": "Unfollow" }, + "jBx/nm": { + "defaultMessage": "Sign up with email", + "description": "src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx" + }, "jJ1Brc": { "defaultMessage": "Pin Comment", "description": "src/components/Comment/DropdownActions/PinButton.tsx" @@ -1014,6 +1018,10 @@ "defaultMessage": "Hottest", "description": "src/views/Circle/Analytics/ContentAnalytics/index.tsx" }, + "mH1a7I": { + "defaultMessage": "Sign in", + "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" + }, "mPe6DK": { "defaultMessage": "subscribed your circle", "description": "src/components/Notice/CircleNotice/CircleNewUserNotice.tsx" @@ -1064,6 +1072,10 @@ "defaultMessage": "Following", "description": "src/components/UserProfile/index.tsx" }, + "p+A406": { + "defaultMessage": "Continued use indicates your agreement to the User Agreement and Privacy Policy.", + "description": "src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx" + }, "p5qZnJ": { "defaultMessage": "liked", "description": "src/components/Notice/ArticleNotice/ArticleNewAppreciationNotice.tsx" @@ -1136,6 +1148,10 @@ "defaultMessage": "This Month", "description": "src/views/Circle/Analytics/IncomeAnalytics/index.tsx" }, + "saXJdD": { + "defaultMessage": "Wallet", + "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" + }, "skbUBl": { "defaultMessage": "Log in", "description": "src/components/Buttons/Login/index.tsx" @@ -1147,10 +1163,6 @@ "sy+pv5": { "defaultMessage": "Email" }, - "t8/r8X": { - "defaultMessage": "Continue with Wallet", - "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" - }, "tEeEJT": { "defaultMessage": "Your work {articleTitle} has been published to decentralized network", "description": "src/components/Notice/ArticleNotice/ArticlePublishedNotice.tsx" @@ -1238,10 +1250,6 @@ "defaultMessage": "{follower, plural, =1 {follower} other {followers}}", "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx" }, - "xiKjd/": { - "defaultMessage": "Continue with Email", - "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" - }, "xkr+zo": { "defaultMessage": "Terms" }, diff --git a/lang/en.json b/lang/en.json index acdf3d3de9..74aeb6afc1 100644 --- a/lang/en.json +++ b/lang/en.json @@ -455,10 +455,6 @@ "defaultMessage": "invites you to join the circle {circleName} , and you can experience it for {freePeriod} days for free", "description": "src/components/Notice/CircleNotice/CircleInvitationNotice.tsx" }, - "J+LXrH": { - "defaultMessage": "User registered by email can login and enable wallet login later", - "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" - }, "JTWayV": { "defaultMessage": "Add description", "description": "src/views/User/CollectionDetail/Content.tsx" @@ -500,6 +496,10 @@ "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx", "defaultMessage": "Free" }, + "L34EMG": { + "defaultMessage": "No account?", + "description": "src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx" + }, "L4Fcr8": { "defaultMessage": "New Collection" }, @@ -678,6 +678,10 @@ "defaultMessage": "Tags added", "description": "src/views/TagDetail/DropdownActions/index.tsx" }, + "V5OMr4": { + "defaultMessage": "What is a digital wallet?", + "description": "src/components/Forms/SelectAuthMethodForm/WalletFeed.tsx" + }, "V8msLJ": { "defaultMessage": "left comments and mentioned you in your circle", "description": "src/components/Notice/CircleNotice/CircleNewDiscussionComments.tsx" @@ -939,10 +943,6 @@ "hrgo+E": { "defaultMessage": "Archive" }, - "iCFXtS": { - "defaultMessage": "For unregistered or users enabled wallet login", - "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" - }, "ieGrWo": { "defaultMessage": "Follow" }, @@ -956,6 +956,10 @@ "izWS4J": { "defaultMessage": "Unfollow" }, + "jBx/nm": { + "defaultMessage": "Sign up with email", + "description": "src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx" + }, "jJ1Brc": { "defaultMessage": "Pin Comment", "description": "src/components/Comment/DropdownActions/PinButton.tsx" @@ -1021,6 +1025,10 @@ "description": "src/views/Circle/Analytics/ContentAnalytics/index.tsx", "defaultMessage": "Hottest" }, + "mH1a7I": { + "defaultMessage": "Sign in", + "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" + }, "mPe6DK": { "defaultMessage": "subscribed your circle", "description": "src/components/Notice/CircleNotice/CircleNewUserNotice.tsx" @@ -1071,6 +1079,10 @@ "defaultMessage": "Following", "description": "src/components/UserProfile/index.tsx" }, + "p+A406": { + "defaultMessage": "Continued use indicates your agreement to the User Agreement and Privacy Policy.", + "description": "src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx" + }, "p5qZnJ": { "defaultMessage": "liked", "description": "src/components/Notice/ArticleNotice/ArticleNewAppreciationNotice.tsx" @@ -1145,6 +1157,10 @@ "description": "src/views/Circle/Analytics/IncomeAnalytics/index.tsx", "defaultMessage": "This Month" }, + "saXJdD": { + "defaultMessage": "Wallet", + "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" + }, "skbUBl": { "defaultMessage": "Log in", "description": "src/components/Buttons/Login/index.tsx" @@ -1156,10 +1172,6 @@ "sy+pv5": { "defaultMessage": "Email" }, - "t8/r8X": { - "defaultMessage": "Continue with Wallet", - "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" - }, "tEeEJT": { "defaultMessage": "Your work {articleTitle} has been published to decentralized network", "description": "src/components/Notice/ArticleNotice/ArticlePublishedNotice.tsx" @@ -1248,10 +1260,6 @@ "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx", "defaultMessage": "{follower, plural, =1 {follower} other {followers}}" }, - "xiKjd/": { - "defaultMessage": "Continue with Email", - "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" - }, "xkr+zo": { "defaultMessage": "Terms" }, diff --git a/lang/zh-Hans.json b/lang/zh-Hans.json index 986958487f..8e7c0930b1 100644 --- a/lang/zh-Hans.json +++ b/lang/zh-Hans.json @@ -453,10 +453,6 @@ "defaultMessage": "邀你加入围炉 {circleName} ,你可以免费体验 {freePeriod} 天", "description": "src/components/Notice/CircleNotice/CircleInvitationNotice.tsx" }, - "J+LXrH": { - "defaultMessage": "使用邮箱进入,未来可随时启用钱包登入", - "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" - }, "JTWayV": { "defaultMessage": "添加描述", "description": "src/views/User/CollectionDetail/Content.tsx" @@ -498,6 +494,10 @@ "defaultMessage": "免费", "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx" }, + "L34EMG": { + "defaultMessage": "没有帐号?", + "description": "src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx" + }, "L4Fcr8": { "defaultMessage": "新建选集" }, @@ -675,6 +675,10 @@ "defaultMessage": "作品已添加标签", "description": "src/views/TagDetail/DropdownActions/index.tsx" }, + "V5OMr4": { + "defaultMessage": "什么是数字钱包?", + "description": "src/components/Forms/SelectAuthMethodForm/WalletFeed.tsx" + }, "V8msLJ": { "defaultMessage": "在你的围炉中留言提及你", "description": "src/components/Notice/CircleNotice/CircleNewDiscussionComments.tsx" @@ -934,10 +938,6 @@ "hrgo+E": { "defaultMessage": "归档" }, - "iCFXtS": { - "defaultMessage": "欢迎未注册或已启用钱包登入的朋友使用", - "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" - }, "ieGrWo": { "defaultMessage": "追踪" }, @@ -951,6 +951,10 @@ "izWS4J": { "defaultMessage": "取消追踪" }, + "jBx/nm": { + "defaultMessage": "邮箱注册", + "description": "src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx" + }, "jJ1Brc": { "defaultMessage": "喜欢回应", "description": "src/components/Comment/DropdownActions/PinButton.tsx" @@ -1015,6 +1019,10 @@ "defaultMessage": "站内阅读热门排行", "description": "src/views/Circle/Analytics/ContentAnalytics/index.tsx" }, + "mH1a7I": { + "defaultMessage": "登录", + "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" + }, "mPe6DK": { "defaultMessage": "订阅了你的围炉", "description": "src/components/Notice/CircleNotice/CircleNewUserNotice.tsx" @@ -1065,6 +1073,10 @@ "defaultMessage": "追踪中", "description": "src/components/UserProfile/index.tsx" }, + "p+A406": { + "defaultMessage": "继续使用表示您同意用户协议及隐私条款", + "description": "src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx" + }, "p5qZnJ": { "defaultMessage": "赞赏了", "description": "src/components/Notice/ArticleNotice/ArticleNewAppreciationNotice.tsx" @@ -1137,6 +1149,10 @@ "defaultMessage": "本月营收", "description": "src/views/Circle/Analytics/IncomeAnalytics/index.tsx" }, + "saXJdD": { + "defaultMessage": "数字钱包", + "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" + }, "skbUBl": { "defaultMessage": "登入", "description": "src/components/Buttons/Login/index.tsx" @@ -1148,10 +1164,6 @@ "sy+pv5": { "defaultMessage": "邮箱" }, - "t8/r8X": { - "defaultMessage": "连接加密钱包", - "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" - }, "tEeEJT": { "defaultMessage": "你的作品 {articleTitle} 已发布到分布式网络", "description": "src/components/Notice/ArticleNotice/ArticlePublishedNotice.tsx" @@ -1239,10 +1251,6 @@ "defaultMessage": "{follower, plural, =1 {人} other {人}}", "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx" }, - "xiKjd/": { - "defaultMessage": "使用电子邮箱", - "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" - }, "xkr+zo": { "defaultMessage": "协议" }, diff --git a/lang/zh-Hant.json b/lang/zh-Hant.json index 2e3f27d1ac..cfeb7e59be 100644 --- a/lang/zh-Hant.json +++ b/lang/zh-Hant.json @@ -453,10 +453,6 @@ "defaultMessage": "邀你加入圍爐 {circleName} ,你可以免費體驗 {freePeriod} 天", "description": "src/components/Notice/CircleNotice/CircleInvitationNotice.tsx" }, - "J+LXrH": { - "defaultMessage": "使用信箱進入,未來可隨時啟用錢包登入", - "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" - }, "JTWayV": { "defaultMessage": "添加描述", "description": "src/views/User/CollectionDetail/Content.tsx" @@ -498,6 +494,10 @@ "defaultMessage": "免費", "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx" }, + "L34EMG": { + "defaultMessage": "沒有帳號?", + "description": "src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx" + }, "L4Fcr8": { "defaultMessage": "新建選集" }, @@ -675,6 +675,10 @@ "defaultMessage": "作品已添加標籤", "description": "src/views/TagDetail/DropdownActions/index.tsx" }, + "V5OMr4": { + "defaultMessage": "什麼是數字錢包?", + "description": "src/components/Forms/SelectAuthMethodForm/WalletFeed.tsx" + }, "V8msLJ": { "description": "src/components/Notice/CircleNotice/CircleNewDiscussionComments.tsx", "defaultMessage": "在你的圍爐中留言並提及你" @@ -934,10 +938,6 @@ "hrgo+E": { "defaultMessage": "封存" }, - "iCFXtS": { - "defaultMessage": "歡迎未註冊或已啟用錢包登入的朋友使用", - "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" - }, "ieGrWo": { "defaultMessage": "追蹤" }, @@ -951,6 +951,10 @@ "izWS4J": { "defaultMessage": "取消追蹤" }, + "jBx/nm": { + "defaultMessage": "電子郵件註冊", + "description": "src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx" + }, "jJ1Brc": { "defaultMessage": "喜歡回應", "description": "src/components/Comment/DropdownActions/PinButton.tsx" @@ -1015,6 +1019,10 @@ "defaultMessage": "站內閱讀熱門排行", "description": "src/views/Circle/Analytics/ContentAnalytics/index.tsx" }, + "mH1a7I": { + "defaultMessage": "登入", + "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" + }, "mPe6DK": { "defaultMessage": "訂閱了你的圍爐", "description": "src/components/Notice/CircleNotice/CircleNewUserNotice.tsx" @@ -1065,6 +1073,10 @@ "defaultMessage": "追蹤中", "description": "src/components/UserProfile/index.tsx" }, + "p+A406": { + "defaultMessage": "繼續使用表示您同意用戶協議及隱私條款", + "description": "src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx" + }, "p5qZnJ": { "defaultMessage": "讚賞了", "description": "src/components/Notice/ArticleNotice/ArticleNewAppreciationNotice.tsx" @@ -1137,6 +1149,10 @@ "defaultMessage": "本月營收", "description": "src/views/Circle/Analytics/IncomeAnalytics/index.tsx" }, + "saXJdD": { + "defaultMessage": "數字錢包", + "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" + }, "skbUBl": { "defaultMessage": "登入", "description": "src/components/Buttons/Login/index.tsx" @@ -1148,10 +1164,6 @@ "sy+pv5": { "defaultMessage": "電子郵箱" }, - "t8/r8X": { - "defaultMessage": "連接加密錢包", - "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" - }, "tEeEJT": { "defaultMessage": "你的作品 {articleTitle} 已發布到分佈式網絡", "description": "src/components/Notice/ArticleNotice/ArticlePublishedNotice.tsx" @@ -1239,10 +1251,6 @@ "defaultMessage": "{follower, plural, =1 {人} other {人}}", "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx" }, - "xiKjd/": { - "defaultMessage": "使用電子信箱", - "description": "src/components/Forms/SelectAuthMethodForm/index.tsx" - }, "xkr+zo": { "defaultMessage": "協議" }, diff --git a/public/static/icons/22px/facebook.svg b/public/static/icons/22px/facebook.svg new file mode 100644 index 0000000000..9b8b53bb98 --- /dev/null +++ b/public/static/icons/22px/facebook.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/icons/22px/google.svg b/public/static/icons/22px/google.svg new file mode 100644 index 0000000000..8628f33200 --- /dev/null +++ b/public/static/icons/22px/google.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/icons/22px/mail.svg b/public/static/icons/22px/mail.svg new file mode 100644 index 0000000000..1404c37f6f --- /dev/null +++ b/public/static/icons/22px/mail.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/static/icons/22px/metamask.svg b/public/static/icons/22px/metamask.svg new file mode 100644 index 0000000000..ea16510d56 --- /dev/null +++ b/public/static/icons/22px/metamask.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/icons/22px/wallet-connect.svg b/public/static/icons/22px/wallet-connect.svg new file mode 100644 index 0000000000..24bb38d109 --- /dev/null +++ b/public/static/icons/22px/wallet-connect.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/icons/22px/x.svg b/public/static/icons/22px/x.svg new file mode 100644 index 0000000000..ed7d5a8b71 --- /dev/null +++ b/public/static/icons/22px/x.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/FillTabs/index.tsx b/src/components/FillTabs/index.tsx new file mode 100644 index 0000000000..2afd2e4024 --- /dev/null +++ b/src/components/FillTabs/index.tsx @@ -0,0 +1,62 @@ +import classNames from 'classnames' +import Link from 'next/link' + +import styles from './styles.module.css' + +type TabProps = { + href?: string + selected?: boolean + count?: number + onClick?: () => void +} + +const Tab: React.FC> = ({ + href, + selected, + count, + children, + onClick, +}) => { + const classes = classNames({ + [styles.item]: true, + [styles.selected]: selected, + }) + + if (href) { + return ( +
  • + + + {children} + {count &&  {count}} + + +
  • + ) + } + + return ( +
  • + +
  • + ) +} + +interface TabsProps {} + +export const FillTabs: React.FC> & { + Tab: typeof Tab +} = ({ children }) => { + return ( + + ) +} + +FillTabs.Tab = Tab diff --git a/src/components/FillTabs/styles.module.css b/src/components/FillTabs/styles.module.css new file mode 100644 index 0000000000..2aebafba5e --- /dev/null +++ b/src/components/FillTabs/styles.module.css @@ -0,0 +1,57 @@ +.tabs { + @mixin border-bottom-grey-light; + + position: relative; + position: sticky; + top: 0; + z-index: var(--z-index-sticky-tabs); + padding: 0 var(--spacing-base); + margin-top: var(--spacing-tight); + white-space: nowrap; + background: var(--color-white); + + @media (--sm-up) { + margin-top: var(--spacing-base-loose); + } +} + +.list { + @mixin hide-scrollbar; + + overflow: auto; + -webkit-overflow-scrolling: touch; +} + +.item { + @mixin inline-flex-center-all; + @mixin transition; + + padding: var(--spacing-tight) 0 var(--spacing-x-tight); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); + line-height: 1.375rem; + color: var(--color-grey-dark); + transition-property: color; + + &.selected, + &:hover, + &:focus { + color: var(--color-black); + } + + &.selected { + border-bottom: 2px solid var(--color-matters-green); + + & .count { + color: var(--color-grey-darker); + } + } + + & + .item { + margin-left: var(--spacing-x-loose); + } + + & .count { + color: var(--color-grey-dark); + } +} diff --git a/src/components/Forms/SelectAuthMethodForm/AuthTabs.tsx b/src/components/Forms/SelectAuthMethodForm/AuthTabs.tsx new file mode 100644 index 0000000000..7de64c4bfe --- /dev/null +++ b/src/components/Forms/SelectAuthMethodForm/AuthTabs.tsx @@ -0,0 +1,39 @@ +import { FormattedMessage } from 'react-intl' + +import { Tabs } from '~/components' + +import styles from './styles.module.css' + +export type AuthType = 'normal' | 'wallet' + +interface AuthTabsProps { + type: AuthType + setAuthType: (type: AuthType) => void +} + +const AuthTabs = ({ type, setAuthType }: AuthTabsProps) => { + const isNormal = type === 'normal' + const isWallet = type === 'wallet' + + return ( +
    + + setAuthType('normal')} selected={isNormal}> + + + + setAuthType('wallet')} selected={isWallet}> + + + +
    + ) +} + +export default AuthTabs diff --git a/src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx b/src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx new file mode 100644 index 0000000000..de648c3c0c --- /dev/null +++ b/src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx @@ -0,0 +1,69 @@ +import { FormattedMessage } from 'react-intl' + +import { IconFacebook22, IconGoogle22, IconMail22, IconX22 } from '~/components' + +import styles from './styles.module.css' + +interface Props { + gotoEmailSignup: () => void +} + +const NormalFeed = ({ gotoEmailSignup }: Props) => { + return ( + <> + +
    +
    + + + + + + + +
    +
    + +
    +
    + + ) +} + +export default NormalFeed diff --git a/src/components/Forms/SelectAuthMethodForm/WalletFeed.tsx b/src/components/Forms/SelectAuthMethodForm/WalletFeed.tsx new file mode 100644 index 0000000000..48e30b3b82 --- /dev/null +++ b/src/components/Forms/SelectAuthMethodForm/WalletFeed.tsx @@ -0,0 +1,36 @@ +import { FormattedMessage } from 'react-intl' + +import { IconMetamask22, IconWalletConnect22 } from '~/components' + +import styles from './styles.module.css' + +const WalletFeed = () => { + return ( + <> + +
    +
    + +
    +
    + + ) +} + +export default WalletFeed diff --git a/src/components/Forms/SelectAuthMethodForm/index.tsx b/src/components/Forms/SelectAuthMethodForm/index.tsx index 78d2a28ea5..85b47ccbb5 100644 --- a/src/components/Forms/SelectAuthMethodForm/index.tsx +++ b/src/components/Forms/SelectAuthMethodForm/index.tsx @@ -1,23 +1,21 @@ +import { useState } from 'react' import { FormattedMessage } from 'react-intl' +import { useConnect } from 'wagmi' import { UNIVERSAL_AUTH_SOURCE } from '~/common/enums' -import { - Dialog, - IconEmail24, - IconWallet24, - LanguageSwitch, - Layout, - TextIcon, -} from '~/components' +import { Dialog, LanguageSwitch, Layout } from '~/components' -import SourceHeader from './SourceHeader' +import AuthTabs, { AuthType } from './AuthTabs' +import NormalFeed from './NormalFeed' import styles from './styles.module.css' +import WalletFeed from './WalletFeed' interface FormProps { purpose: 'dialog' | 'page' source: UNIVERSAL_AUTH_SOURCE gotoWalletAuth: () => void gotoEmailLogin: () => void + gotoEmailSignup: () => void closeDialog?: () => void } @@ -26,56 +24,26 @@ export const SelectAuthMethodForm: React.FC = ({ source, gotoWalletAuth, gotoEmailLogin, + gotoEmailSignup, closeDialog, }) => { const isInPage = purpose === 'page' + const { connectors } = useConnect() + const injectedConnector = connectors.find((c) => c.id === 'metaMask') + + const [type, setAuthType] = useState( + injectedConnector?.ready ? 'wallet' : 'normal' + ) + const isNormal = type === 'normal' + const isWallet = type === 'wallet' const InnerForm = ( -
      -
    • -
      - } - size="md" - spacing="xtight" - > - - -
      -

      - -

      -
    • + <> + -
    • -
      - } - size="md" - spacing="xtight" - > - - -
      -

      - -

      -
    • -
    + {isNormal && } + {isWallet && } + ) if (isInPage) { @@ -94,13 +62,7 @@ export const SelectAuthMethodForm: React.FC = ({ return ( <> - - - - - - {InnerForm} - + {InnerForm} forward('wallet-select')} gotoEmailLogin={() => forward('email-login')} + gotoEmailSignup={() => forward('email-sign-up-init')} closeDialog={closeDialog} /> )} diff --git a/src/components/Icon/IconFacebook22.tsx b/src/components/Icon/IconFacebook22.tsx new file mode 100644 index 0000000000..52c2f0d958 --- /dev/null +++ b/src/components/Icon/IconFacebook22.tsx @@ -0,0 +1,5 @@ +import { ReactComponent as Icon } from '@/public/static/icons/22px/facebook.svg' + +import { withIcon } from './withIcon' + +export const IconFacebook22 = withIcon(Icon) diff --git a/src/components/Icon/IconGoogle22.tsx b/src/components/Icon/IconGoogle22.tsx new file mode 100644 index 0000000000..52d57b9283 --- /dev/null +++ b/src/components/Icon/IconGoogle22.tsx @@ -0,0 +1,5 @@ +import { ReactComponent as Icon } from '@/public/static/icons/22px/google.svg' + +import { withIcon } from './withIcon' + +export const IconGoogle22 = withIcon(Icon) diff --git a/src/components/Icon/IconMail22.tsx b/src/components/Icon/IconMail22.tsx new file mode 100644 index 0000000000..10300d5aa7 --- /dev/null +++ b/src/components/Icon/IconMail22.tsx @@ -0,0 +1,5 @@ +import { ReactComponent as Icon } from '@/public/static/icons/22px/mail.svg' + +import { withIcon } from './withIcon' + +export const IconMail22 = withIcon(Icon) diff --git a/src/components/Icon/IconMetamask22.tsx b/src/components/Icon/IconMetamask22.tsx new file mode 100644 index 0000000000..9e15862a55 --- /dev/null +++ b/src/components/Icon/IconMetamask22.tsx @@ -0,0 +1,5 @@ +import { ReactComponent as Icon } from '@/public/static/icons/22px/metamask.svg' + +import { withIcon } from './withIcon' + +export const IconMetamask22 = withIcon(Icon) diff --git a/src/components/Icon/IconWalletConnect22.tsx b/src/components/Icon/IconWalletConnect22.tsx new file mode 100644 index 0000000000..c75895344a --- /dev/null +++ b/src/components/Icon/IconWalletConnect22.tsx @@ -0,0 +1,5 @@ +import { ReactComponent as Icon } from '@/public/static/icons/22px/wallet-connect.svg' + +import { withIcon } from './withIcon' + +export const IconWalletConnect22 = withIcon(Icon) diff --git a/src/components/Icon/IconX22.tsx b/src/components/Icon/IconX22.tsx new file mode 100644 index 0000000000..9fb59bf66f --- /dev/null +++ b/src/components/Icon/IconX22.tsx @@ -0,0 +1,5 @@ +import { ReactComponent as Icon } from '@/public/static/icons/22px/x.svg' + +import { withIcon } from './withIcon' + +export const IconX22 = withIcon(Icon) diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx index 5250a8e9d4..b608e424b3 100644 --- a/src/components/Icon/index.tsx +++ b/src/components/Icon/index.tsx @@ -87,8 +87,10 @@ export * from './IconEmptyWarning72' export * from './IconExclaimHint' export * from './IconExpand16' export * from './IconExternalLink16' +export * from './IconFacebook22' export * from './IconFiatCurrency40' export * from './IconFilter12' +export * from './IconGoogle22' export * from './IconHandle24' export * from './IconHashTag16' export * from './IconHashTag24' @@ -112,6 +114,8 @@ export * from './IconLogbookBadge16' export * from './IconLogo' export * from './IconLogoGraph' export * from './IconLogout24' +export * from './IconMail22' +export * from './IconMetamask22' export * from './IconMetaMask24' export * from './IconMore16' export * from './IconMore22' @@ -179,7 +183,9 @@ export * from './IconUser16' export * from './IconVolume32' export * from './IconWallet20' export * from './IconWallet24' +export * from './IconWalletConnect22' export * from './IconWalletConnect24' export * from './IconWarning22' export * from './IconWorld16' +export * from './IconX22' export * from './withIcon' diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx index f44300c775..724ca28420 100644 --- a/src/components/Tabs/index.tsx +++ b/src/components/Tabs/index.tsx @@ -36,23 +36,39 @@ const Tab: React.FC> = ({ } return ( -
  • - +
  • + {children} + {count &&  {count}}
  • ) } -interface TabsProps {} +interface TabsProps { + noSpacing?: boolean + fill?: boolean +} export const Tabs: React.FC> & { Tab: typeof Tab -} = ({ children }) => { +} = ({ noSpacing, fill, children }) => { + const tabsClasses = classNames({ + [styles.tabs]: true, + [styles.noSpacing]: !!noSpacing, + }) + + const listClasses = classNames({ + [styles.list]: true, + [styles.fillList]: !!fill, + }) + return ( -