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 (
+ <>
+
+ -
+
+
+
+
+
+
+
+ -
+
+
+
+ Google
+
+ -
+
+
+
+ Twitter
+
+ -
+
+
+
+ Facebook
+
+
+
+ >
+ )
+}
+
+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 (
+ <>
+
+ -
+
+
+
+ MetaMask
+
+ -
+
+
+
+ Wallet Connect
+
+
+
+ >
+ )
+}
+
+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 (
-
+
+
+ {closeDialog && (
+
('select-login-method')
+ const [email, setEmail] = useState('')
const {
show,
@@ -144,7 +145,10 @@ const BaseUniversalAuthDialog = ({
{currStep === 'email-sign-up-init' && (
forward('email-verification-sent')}
+ submitCallback={(email: string) => {
+ setEmail(email)
+ forward('email-verification-sent')
+ }}
gotoEmailLogin={() => forward('email-login')}
closeDialog={closeDialog}
back={() => forward('email-login')}
@@ -152,9 +156,10 @@ const BaseUniversalAuthDialog = ({
)}
{currStep === 'email-verification-sent' && (
)}
{currStep === 'reset-password-request' && (
From a2b44e424ec27da14005ab8fcd83693c85fab09a Mon Sep 17 00:00:00 2001
From: bluecloud <96812901+pitb2022@users.noreply.github.com>
Date: Tue, 15 Aug 2023 14:50:30 +0800
Subject: [PATCH 010/328] feat(Auth): remove login & signup & forget page
---
.../Buttons/UniversalAuth/index.tsx | 22 +--
src/pages/forget.tsx | 3 -
src/pages/login.tsx | 3 -
src/pages/signup.tsx | 3 -
src/views/Auth/Forget/index.tsx | 53 ------
src/views/Auth/Universal/index.tsx | 154 ------------------
6 files changed, 5 insertions(+), 233 deletions(-)
delete mode 100644 src/pages/forget.tsx
delete mode 100644 src/pages/login.tsx
delete mode 100644 src/pages/signup.tsx
delete mode 100644 src/views/Auth/Forget/index.tsx
delete mode 100644 src/views/Auth/Universal/index.tsx
diff --git a/src/components/Buttons/UniversalAuth/index.tsx b/src/components/Buttons/UniversalAuth/index.tsx
index 29abb8c3b2..9634d89bb6 100644
--- a/src/components/Buttons/UniversalAuth/index.tsx
+++ b/src/components/Buttons/UniversalAuth/index.tsx
@@ -1,15 +1,11 @@
import React from 'react'
-import {
- CLOSE_ACTIVE_DIALOG,
- OPEN_UNIVERSAL_AUTH_DIALOG,
- PATHS,
-} from '~/common/enums'
-import { analytics, appendTarget } from '~/common/utils'
+import { CLOSE_ACTIVE_DIALOG, OPEN_UNIVERSAL_AUTH_DIALOG } from '~/common/enums'
+import { analytics } from '~/common/utils'
import { Button, Media, TextIcon, Translate } from '~/components'
export const UniversalAuthButton: React.FC = () => {
- const smUpProps = {
+ const props = {
onClick: () => {
analytics.trackEvent('click_button', {
type: 'login/signup',
@@ -18,14 +14,6 @@ export const UniversalAuthButton: React.FC = () => {
window.dispatchEvent(new CustomEvent(OPEN_UNIVERSAL_AUTH_DIALOG))
},
}
- const smProps = {
- ...appendTarget(PATHS.SIGNUP, true),
- onClick: () => {
- analytics.trackEvent('click_button', {
- type: 'login/signup',
- })
- },
- }
const ButtonText = () => (
@@ -36,13 +24,13 @@ export const UniversalAuthButton: React.FC = () => {
return (
<>
-
-
+
diff --git a/src/pages/forget.tsx b/src/pages/forget.tsx
deleted file mode 100644
index bb17f504fc..0000000000
--- a/src/pages/forget.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import AuthForget from '~/views/Auth/Forget'
-
-export default AuthForget
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
deleted file mode 100644
index 5e91304030..0000000000
--- a/src/pages/login.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import AuthUniversal from '~/views/Auth/Universal'
-
-export default AuthUniversal
diff --git a/src/pages/signup.tsx b/src/pages/signup.tsx
deleted file mode 100644
index 5e91304030..0000000000
--- a/src/pages/signup.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import AuthUniversal from '~/views/Auth/Universal'
-
-export default AuthUniversal
diff --git a/src/views/Auth/Forget/index.tsx b/src/views/Auth/Forget/index.tsx
deleted file mode 100644
index 4b6a0b3d2e..0000000000
--- a/src/views/Auth/Forget/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import {
- ChangePasswordForm,
- Head,
- Layout,
- useRoute,
- useStep,
- VerificationLinkSent,
-} from '~/components'
-
-type Step = 'request' | 'verification_sent' | 'confirm' | 'complete'
-
-const Forget = () => {
- const { getQuery } = useRoute()
- const email = getQuery('email')
- const code = getQuery('code')
-
- const initStep = code ? 'confirm' : 'request'
- const { currStep, forward } = useStep(initStep)
-
- return (
-
-
-
- {currStep === 'request' && (
- forward('verification_sent')}
- />
- )}
-
- {currStep === 'verification_sent' && (
-
- )}
-
- {currStep === 'confirm' && (
- forward('complete')}
- />
- )}
-
- {currStep === 'complete' && (
-
- )}
-
- )
-}
-
-export default Forget
diff --git a/src/views/Auth/Universal/index.tsx b/src/views/Auth/Universal/index.tsx
deleted file mode 100644
index 1cc3a0901f..0000000000
--- a/src/views/Auth/Universal/index.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import dynamic from 'next/dynamic'
-import { useContext, useEffect } from 'react'
-
-import { PATHS } from '~/common/enums'
-import {
- Head,
- Layout,
- Spinner,
- useRoute,
- useStep,
- VerificationLinkSent,
- ViewerContext,
-} from '~/components'
-import { AuthResultType } from '~/gql/graphql'
-
-const DynamicSelectAuthMethodForm = dynamic(
- () =>
- import('~/components/Forms/SelectAuthMethodForm').then(
- (mod) => mod.SelectAuthMethodForm
- ),
- { ssr: false, loading: Spinner }
-)
-const DynamicEmailLoginForm = dynamic(
- () =>
- import('~/components/Forms/EmailLoginForm').then(
- (mod) => mod.EmailLoginForm
- ),
- { ssr: false, loading: Spinner }
-)
-const DynamicEmailSignUpFormInit = dynamic(
- () => import('~/components/Forms/EmailSignUpForm/Init'),
- { ssr: false, loading: Spinner }
-)
-const DynamicWalletAuthFormSelect = dynamic(
- () => import('~/components/Forms/WalletAuthForm/Select'),
- { ssr: false, loading: Spinner }
-)
-const DynamicWalletAuthFormConnect = dynamic(
- () => import('~/components/Forms/WalletAuthForm/Connect'),
- { ssr: false, loading: Spinner }
-)
-const DynamicEmailSignUpFormPassword = dynamic(
- () => import('~/components/Forms/EmailSignUpForm/Password'),
- { ssr: false, loading: Spinner }
-)
-const DynamicEmailSignUpFormComplete = dynamic(
- () => import('~/components/Forms/EmailSignUpForm/Complete'),
- { ssr: false, loading: Spinner }
-)
-
-type Step =
- | 'select-login-method'
- // wallet
- | 'wallet-select'
- | 'wallet-connect'
- // email
- | 'email-login'
- | 'email-sign-up-init'
- | 'email-sign-up-password'
- | 'email-verification-sent'
- // misc
- | 'complete'
-
-const UniversalAuth = () => {
- const viewer = useContext(ViewerContext)
- const { getQuery, router } = useRoute()
- const email = getQuery('email')
- const code = getQuery('code')
- const displayName = getQuery('displayName')
-
- const initStep =
- email && code && displayName
- ? 'email-sign-up-password'
- : 'select-login-method'
- const { currStep, forward } = useStep(initStep)
-
- useEffect(() => {
- if (!viewer.id) return
-
- router.push(PATHS.HOME)
- }, [viewer.id])
-
- return (
-
-
-
- {currStep === 'select-login-method' && (
- forward('wallet-select')}
- gotoEmailLogin={() => forward('email-login')}
- />
- )}
-
- {/* Wallet */}
- {currStep === 'wallet-select' && (
- {
- forward('wallet-connect')
- }}
- back={() => forward('select-login-method')}
- />
- )}
- {currStep === 'wallet-connect' && (
- {
- if (type === AuthResultType.Signup) {
- forward('complete')
- }
- }}
- back={() => forward('wallet-select')}
- />
- )}
-
- {/* Email */}
- {currStep === 'email-login' && (
- forward('email-sign-up-init')}
- back={() => forward('select-login-method')}
- />
- )}
- {currStep === 'email-sign-up-init' && (
- forward('email-verification-sent')}
- gotoEmailLogin={() => forward('email-login')}
- back={() => forward('email-login')}
- />
- )}
- {currStep === 'email-sign-up-password' && (
- forward('complete')}
- />
- )}
- {currStep === 'email-verification-sent' && (
-
- )}
-
- {/* Misc */}
- {currStep === 'complete' && (
-
- )}
-
- )
-}
-
-export default UniversalAuth
From 483b61f3935bc99a015f0d9d13aa906394bbb22d Mon Sep 17 00:00:00 2001
From: bluecloud <96812901+pitb2022@users.noreply.github.com>
Date: Tue, 15 Aug 2023 16:07:43 +0800
Subject: [PATCH 011/328] feat(SelectAuthMethodForm): extract AuthTabs
component
---
.../AuthTabs.tsx => AuthTabs/index.tsx} | 4 +--
src/components/AuthTabs/styles.module.css | 3 ++
.../Forms/SelectAuthMethodForm/NormalFeed.tsx | 5 +--
.../Forms/SelectAuthMethodForm/index.tsx | 26 ++++----------
.../SelectAuthMethodForm/styles.module.css | 35 -------------------
src/components/index.tsx | 1 +
6 files changed, 15 insertions(+), 59 deletions(-)
rename src/components/{Forms/SelectAuthMethodForm/AuthTabs.tsx => AuthTabs/index.tsx} (91%)
create mode 100644 src/components/AuthTabs/styles.module.css
diff --git a/src/components/Forms/SelectAuthMethodForm/AuthTabs.tsx b/src/components/AuthTabs/index.tsx
similarity index 91%
rename from src/components/Forms/SelectAuthMethodForm/AuthTabs.tsx
rename to src/components/AuthTabs/index.tsx
index 4953e351d6..d61cc8c7f7 100644
--- a/src/components/Forms/SelectAuthMethodForm/AuthTabs.tsx
+++ b/src/components/AuthTabs/index.tsx
@@ -11,7 +11,7 @@ interface AuthTabsProps {
setAuthType: (type: AuthType) => void
}
-const AuthTabs = ({ type, setAuthType }: AuthTabsProps) => {
+export const AuthTabs = ({ type, setAuthType }: AuthTabsProps) => {
const isNormal = type === 'normal'
const isWallet = type === 'wallet'
@@ -35,5 +35,3 @@ const AuthTabs = ({ type, setAuthType }: AuthTabsProps) => {
)
}
-
-export default AuthTabs
diff --git a/src/components/AuthTabs/styles.module.css b/src/components/AuthTabs/styles.module.css
new file mode 100644
index 0000000000..bbc8fa5e44
--- /dev/null
+++ b/src/components/AuthTabs/styles.module.css
@@ -0,0 +1,3 @@
+.tabs {
+ margin-top: var(--spacing-base);
+}
diff --git a/src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx b/src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx
index 5590695694..e134524522 100644
--- a/src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx
+++ b/src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx
@@ -7,13 +7,14 @@ import styles from './styles.module.css'
interface Props {
gotoEmailSignup: () => void
+ gotoEmailLogin: () => void
}
-const NormalFeed = ({ gotoEmailSignup }: Props) => {
+const NormalFeed = ({ gotoEmailSignup, gotoEmailLogin }: Props) => {
return (
<>
- -
+
-
diff --git a/src/components/Forms/SelectAuthMethodForm/index.tsx b/src/components/Forms/SelectAuthMethodForm/index.tsx
index 85b47ccbb5..df92f26e0c 100644
--- a/src/components/Forms/SelectAuthMethodForm/index.tsx
+++ b/src/components/Forms/SelectAuthMethodForm/index.tsx
@@ -3,11 +3,9 @@ import { FormattedMessage } from 'react-intl'
import { useConnect } from 'wagmi'
import { UNIVERSAL_AUTH_SOURCE } from '~/common/enums'
-import { Dialog, LanguageSwitch, Layout } from '~/components'
+import { AuthTabs, AuthType, Dialog } from '~/components'
-import AuthTabs, { AuthType } from './AuthTabs'
import NormalFeed from './NormalFeed'
-import styles from './styles.module.css'
import WalletFeed from './WalletFeed'
interface FormProps {
@@ -27,7 +25,6 @@ export const SelectAuthMethodForm: React.FC = ({
gotoEmailSignup,
closeDialog,
}) => {
- const isInPage = purpose === 'page'
const { connectors } = useConnect()
const injectedConnector = connectors.find((c) => c.id === 'metaMask')
@@ -41,25 +38,16 @@ export const SelectAuthMethodForm: React.FC = ({
<>
- {isNormal && }
+ {isNormal && (
+
+ )}
{isWallet && }
>
)
- if (isInPage) {
- return (
- <>
- } />
-
- {InnerForm}
-
-
- >
- )
- }
-
return (
<>
{InnerForm}
diff --git a/src/components/Forms/SelectAuthMethodForm/styles.module.css b/src/components/Forms/SelectAuthMethodForm/styles.module.css
index 57a31257a0..ad39e069c1 100644
--- a/src/components/Forms/SelectAuthMethodForm/styles.module.css
+++ b/src/components/Forms/SelectAuthMethodForm/styles.module.css
@@ -1,38 +1,3 @@
-.tabs {
- margin-top: var(--spacing-base);
-}
-
-.select {
- margin-top: calc(var(--spacing-base) * -1);
-
- @media (--sm-up) {
- margin-top: 0;
- }
-
- & .option {
- @mixin transition;
-
- padding: var(--spacing-tight);
- margin-top: var(--spacing-base);
- cursor: pointer;
- border: 1px solid var(--color-grey-light);
- border-radius: 0.5rem;
- transition-property: border-color;
-
- &:hover,
- &:focus {
- border-color: var(--color-grey);
- }
- }
-
- & .subtitle {
- padding-left: var(--spacing-x-loose);
- font-size: var(--font-size-sm);
- line-height: 1.375rem;
- color: var(--color-grey);
- }
-}
-
.footer {
@mixin flex-center-all;
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 44f5fce62e..8189bfbdd3 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -1,6 +1,7 @@
/**
* Atomics
*/
+export * from './AuthTabs'
export * from './Avatar'
export * from './Book'
export * from './Button'
From fe99e4b8580a0cdd669695210271640152c44eca Mon Sep 17 00:00:00 2001
From: bluecloud <96812901+pitb2022@users.noreply.github.com>
Date: Tue, 15 Aug 2023 16:31:47 +0800
Subject: [PATCH 012/328] feat(Auth): extract &
and remove unused code
---
.../AuthNormalFeed.tsx} | 4 +-
.../AuthWalletFeed.tsx} | 4 +-
src/components/AuthMethodFeed/index.tsx | 2 +
.../styles.module.css | 14 -----
.../SelectAuthMethodForm/SourceHeader.tsx | 58 -------------------
.../Forms/SelectAuthMethodForm/index.tsx | 15 +++--
src/components/index.tsx | 1 +
7 files changed, 14 insertions(+), 84 deletions(-)
rename src/components/{Forms/SelectAuthMethodForm/NormalFeed.tsx => AuthMethodFeed/AuthNormalFeed.tsx} (96%)
rename src/components/{Forms/SelectAuthMethodForm/WalletFeed.tsx => AuthMethodFeed/AuthWalletFeed.tsx} (94%)
create mode 100644 src/components/AuthMethodFeed/index.tsx
rename src/components/{Forms/SelectAuthMethodForm => AuthMethodFeed}/styles.module.css (89%)
delete mode 100644 src/components/Forms/SelectAuthMethodForm/SourceHeader.tsx
diff --git a/src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx b/src/components/AuthMethodFeed/AuthNormalFeed.tsx
similarity index 96%
rename from src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx
rename to src/components/AuthMethodFeed/AuthNormalFeed.tsx
index e134524522..3637ff847f 100644
--- a/src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx
+++ b/src/components/AuthMethodFeed/AuthNormalFeed.tsx
@@ -10,7 +10,7 @@ interface Props {
gotoEmailLogin: () => void
}
-const NormalFeed = ({ gotoEmailSignup, gotoEmailLogin }: Props) => {
+export const AuthNormalFeed = ({ gotoEmailSignup, gotoEmailLogin }: Props) => {
return (
<>
@@ -77,5 +77,3 @@ const NormalFeed = ({ gotoEmailSignup, gotoEmailLogin }: Props) => {
>
)
}
-
-export default NormalFeed
diff --git a/src/components/Forms/SelectAuthMethodForm/WalletFeed.tsx b/src/components/AuthMethodFeed/AuthWalletFeed.tsx
similarity index 94%
rename from src/components/Forms/SelectAuthMethodForm/WalletFeed.tsx
rename to src/components/AuthMethodFeed/AuthWalletFeed.tsx
index 48e30b3b82..2b2cc89362 100644
--- a/src/components/Forms/SelectAuthMethodForm/WalletFeed.tsx
+++ b/src/components/AuthMethodFeed/AuthWalletFeed.tsx
@@ -4,7 +4,7 @@ import { IconMetamask22, IconWalletConnect22 } from '~/components'
import styles from './styles.module.css'
-const WalletFeed = () => {
+export const AuthWalletFeed = () => {
return (
<>
@@ -32,5 +32,3 @@ const WalletFeed = () => {
>
)
}
-
-export default WalletFeed
diff --git a/src/components/AuthMethodFeed/index.tsx b/src/components/AuthMethodFeed/index.tsx
new file mode 100644
index 0000000000..32b584e49b
--- /dev/null
+++ b/src/components/AuthMethodFeed/index.tsx
@@ -0,0 +1,2 @@
+export * from './AuthNormalFeed'
+export * from './AuthWalletFeed'
diff --git a/src/components/Forms/SelectAuthMethodForm/styles.module.css b/src/components/AuthMethodFeed/styles.module.css
similarity index 89%
rename from src/components/Forms/SelectAuthMethodForm/styles.module.css
rename to src/components/AuthMethodFeed/styles.module.css
index ad39e069c1..2294a7c084 100644
--- a/src/components/Forms/SelectAuthMethodForm/styles.module.css
+++ b/src/components/AuthMethodFeed/styles.module.css
@@ -1,17 +1,3 @@
-.footer {
- @mixin flex-center-all;
-
- margin: var(--spacing-x-loose) 0;
-}
-
-.sourceHeader {
- text-align: center;
-
- & img {
- width: 12.5rem;
- }
-}
-
.feed {
margin-top: var(--spacing-loose);
diff --git a/src/components/Forms/SelectAuthMethodForm/SourceHeader.tsx b/src/components/Forms/SelectAuthMethodForm/SourceHeader.tsx
deleted file mode 100644
index a4209eeb16..0000000000
--- a/src/components/Forms/SelectAuthMethodForm/SourceHeader.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import IMAGE_AUTH_SOURCE_APPRECIATION from '@/public/static/images/auth-source/appreciation.png'
-import IMAGE_AUTH_SOURCE_BOOKMARK from '@/public/static/images/auth-source/bookmark.png'
-import IMAGE_AUTH_SOURCE_CIRCLE from '@/public/static/images/auth-source/circle.png'
-import IMAGE_AUTH_SOURCE_COLLECT from '@/public/static/images/auth-source/collect.png'
-import IMAGE_AUTH_SOURCE_COMMENT from '@/public/static/images/auth-source/comment.png'
-import IMAGE_AUTH_SOURCE_CREATE from '@/public/static/images/auth-source/create.png'
-import IMAGE_AUTH_SOURCE_ENTER from '@/public/static/images/auth-source/enter.png'
-import IMAGE_AUTH_SOURCE_FOLLOW from '@/public/static/images/auth-source/follow.png'
-import IMAGE_AUTH_SOURCE_SUPPORT from '@/public/static/images/auth-source/support.png'
-import { UNIVERSAL_AUTH_SOURCE } from '~/common/enums'
-
-import styles from './styles.module.css'
-
-const AUTH_SOURCE_IMG = {
- [UNIVERSAL_AUTH_SOURCE.enter]: {
- image: IMAGE_AUTH_SOURCE_ENTER.src,
- },
- [UNIVERSAL_AUTH_SOURCE.appreciation]: {
- image: IMAGE_AUTH_SOURCE_APPRECIATION.src,
- },
- [UNIVERSAL_AUTH_SOURCE.bookmark]: {
- image: IMAGE_AUTH_SOURCE_BOOKMARK.src,
- },
- [UNIVERSAL_AUTH_SOURCE.circle]: {
- image: IMAGE_AUTH_SOURCE_CIRCLE.src,
- },
- [UNIVERSAL_AUTH_SOURCE.collectArticle]: {
- image: IMAGE_AUTH_SOURCE_COLLECT.src,
- },
- [UNIVERSAL_AUTH_SOURCE.comment]: {
- image: IMAGE_AUTH_SOURCE_COMMENT.src,
- },
- [UNIVERSAL_AUTH_SOURCE.create]: {
- image: IMAGE_AUTH_SOURCE_CREATE.src,
- },
- [UNIVERSAL_AUTH_SOURCE.followUser]: {
- image: IMAGE_AUTH_SOURCE_FOLLOW.src,
- },
- [UNIVERSAL_AUTH_SOURCE.followTag]: {
- image: IMAGE_AUTH_SOURCE_FOLLOW.src,
- },
- [UNIVERSAL_AUTH_SOURCE.followCircle]: {
- image: IMAGE_AUTH_SOURCE_FOLLOW.src,
- },
- [UNIVERSAL_AUTH_SOURCE.support]: {
- image: IMAGE_AUTH_SOURCE_SUPPORT.src,
- },
-}
-
-const SourceHeader = ({ source }: { source: UNIVERSAL_AUTH_SOURCE }) => {
- return (
-
-
-
- )
-}
-
-export default SourceHeader
diff --git a/src/components/Forms/SelectAuthMethodForm/index.tsx b/src/components/Forms/SelectAuthMethodForm/index.tsx
index df92f26e0c..f898bc4149 100644
--- a/src/components/Forms/SelectAuthMethodForm/index.tsx
+++ b/src/components/Forms/SelectAuthMethodForm/index.tsx
@@ -3,10 +3,13 @@ import { FormattedMessage } from 'react-intl'
import { useConnect } from 'wagmi'
import { UNIVERSAL_AUTH_SOURCE } from '~/common/enums'
-import { AuthTabs, AuthType, Dialog } from '~/components'
-
-import NormalFeed from './NormalFeed'
-import WalletFeed from './WalletFeed'
+import {
+ AuthNormalFeed,
+ AuthTabs,
+ AuthType,
+ AuthWalletFeed,
+ Dialog,
+} from '~/components'
interface FormProps {
purpose: 'dialog' | 'page'
@@ -39,12 +42,12 @@ export const SelectAuthMethodForm: React.FC = ({
{isNormal && (
-
)}
- {isWallet && }
+ {isWallet && }
>
)
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 8189bfbdd3..5c96e7b9cc 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -1,6 +1,7 @@
/**
* Atomics
*/
+export * from './AuthMethodFeed'
export * from './AuthTabs'
export * from './Avatar'
export * from './Book'
From 68e07fc06181e440360f1a805dd4b5fa936f8a41 Mon Sep 17 00:00:00 2001
From: bluecloud <96812901+pitb2022@users.noreply.github.com>
Date: Tue, 15 Aug 2023 17:31:29 +0800
Subject: [PATCH 013/328] feat(Auth): revise Sign Up dialog
---
public/static/icons/20px/left.svg | 5 ++
.../AuthMethodFeed/styles.module.css | 2 -
src/components/AuthTabs/index.tsx | 25 ++++---
src/components/AuthTabs/styles.module.css | 1 +
src/components/Forms/EmailSignUpForm/Init.tsx | 75 ++++++++++---------
.../Forms/SelectAuthMethodForm/index.tsx | 10 +--
.../UniversalAuthDialog/index.tsx | 2 +-
src/components/Icon/IconLeft20.tsx | 5 ++
src/components/Icon/index.tsx | 1 +
9 files changed, 71 insertions(+), 55 deletions(-)
create mode 100644 public/static/icons/20px/left.svg
create mode 100644 src/components/Icon/IconLeft20.tsx
diff --git a/public/static/icons/20px/left.svg b/public/static/icons/20px/left.svg
new file mode 100644
index 0000000000..6d3b8c19b8
--- /dev/null
+++ b/public/static/icons/20px/left.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/components/AuthMethodFeed/styles.module.css b/src/components/AuthMethodFeed/styles.module.css
index 2294a7c084..3bb156cddd 100644
--- a/src/components/AuthMethodFeed/styles.module.css
+++ b/src/components/AuthMethodFeed/styles.module.css
@@ -1,6 +1,4 @@
.feed {
- margin-top: var(--spacing-loose);
-
& .item {
@mixin border-grey-light;
@mixin flex-center-all;
diff --git a/src/components/AuthTabs/index.tsx b/src/components/AuthTabs/index.tsx
index d61cc8c7f7..8c13fabcc8 100644
--- a/src/components/AuthTabs/index.tsx
+++ b/src/components/AuthTabs/index.tsx
@@ -4,28 +4,33 @@ import { Tabs } from '~/components'
import styles from './styles.module.css'
-export type AuthType = 'normal' | 'wallet'
+export type AuthFeedType = 'normal' | 'wallet'
interface AuthTabsProps {
- type: AuthType
- setAuthType: (type: AuthType) => void
+ type: AuthFeedType
+ setType: (type: AuthFeedType) => void
+ normalText?: string | React.ReactNode
}
-export const AuthTabs = ({ type, setAuthType }: AuthTabsProps) => {
+export const AuthTabs = ({ type, setType, normalText }: AuthTabsProps) => {
const isNormal = type === 'normal'
const isWallet = type === 'wallet'
return (
- setAuthType('normal')} selected={isNormal}>
-
+ setType('normal')} selected={isNormal}>
+ {!!normalText ? (
+ normalText
+ ) : (
+
+ )}
- setAuthType('wallet')} selected={isWallet}>
+ setType('wallet')} selected={isWallet}>
void
gotoEmailLogin: () => void
closeDialog?: () => void
- back?: () => void
+ back: () => void
}
interface FormValues {
@@ -35,9 +40,12 @@ const Init: React.FC = ({
back,
}) => {
const { lang } = useContext(LanguageContext)
- const isInPage = purpose === 'page'
const formId = 'email-sign-up-init-form'
+ const [authTypeFeed, setAuthTypeFeed] = useState('normal')
+ const isNormal = authTypeFeed === 'normal'
+ const isWallet = authTypeFeed === 'wallet'
+
// const { token, refreshToken } = useContext(ReCaptchaContext)
const [sendCode] = useMutation(
SEND_CODE,
@@ -126,53 +134,46 @@ const Init: React.FC = ({
/>
)
- if (isInPage) {
- return (
- <>
-
-
-
-
-
- }
- loading={isSubmitting}
- />
- >
- }
- />
-
- {InnerForm}
- >
- )
- }
-
return (
<>
}
+ hasSmUpTitle={false}
+ leftBtn={
+ }
+ color="greyDarker"
+ onClick={back}
+ />
+ }
closeDialog={closeDialog}
rightBtn={SubmitButton}
/>
- {InnerForm}
+
+ {InnerForm}
+
+ }
+ />
+ {isNormal && <>{InnerForm}>}
+ {isWallet && }
+
+
}
+ text={
+ } spacing="xxxtight">
+
+
+ }
color="greyDarker"
- onClick={closeDialog}
+ onClick={back}
/>
{SubmitButton}
diff --git a/src/components/Forms/SelectAuthMethodForm/index.tsx b/src/components/Forms/SelectAuthMethodForm/index.tsx
index f898bc4149..946d9022d1 100644
--- a/src/components/Forms/SelectAuthMethodForm/index.tsx
+++ b/src/components/Forms/SelectAuthMethodForm/index.tsx
@@ -4,9 +4,9 @@ import { useConnect } from 'wagmi'
import { UNIVERSAL_AUTH_SOURCE } from '~/common/enums'
import {
+ AuthFeedType,
AuthNormalFeed,
AuthTabs,
- AuthType,
AuthWalletFeed,
Dialog,
} from '~/components'
@@ -31,15 +31,15 @@ export const SelectAuthMethodForm: React.FC = ({
const { connectors } = useConnect()
const injectedConnector = connectors.find((c) => c.id === 'metaMask')
- const [type, setAuthType] = useState(
+ const [authTypeFeed, setAuthTypeFeed] = useState(
injectedConnector?.ready ? 'wallet' : 'normal'
)
- const isNormal = type === 'normal'
- const isWallet = type === 'wallet'
+ const isNormal = authTypeFeed === 'normal'
+ const isWallet = authTypeFeed === 'wallet'
const InnerForm = (
<>
-
+
{isNormal && (
forward('email-login')}
closeDialog={closeDialog}
- back={() => forward('email-login')}
+ back={() => forward('select-login-method')}
/>
)}
{currStep === 'email-verification-sent' && (
diff --git a/src/components/Icon/IconLeft20.tsx b/src/components/Icon/IconLeft20.tsx
new file mode 100644
index 0000000000..8d321a96ff
--- /dev/null
+++ b/src/components/Icon/IconLeft20.tsx
@@ -0,0 +1,5 @@
+import { ReactComponent as Icon } from '@/public/static/icons/20px/left.svg'
+
+import { withIcon } from './withIcon'
+
+export const IconLeft20 = withIcon(Icon)
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index b608e424b3..d5a0698913 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -104,6 +104,7 @@ export * from './IconInfo24'
export * from './IconIPFS24'
export * from './IconIPFSGreen24'
export * from './IconISCN24'
+export * from './IconLeft20'
export * from './IconLeft32'
export * from './IconLikeCoin40'
export * from './IconLink16'
From 4401150632d778223da358c6d4ce4fe7862c14c9 Mon Sep 17 00:00:00 2001
From: bluecloud <96812901+pitb2022@users.noreply.github.com>
Date: Tue, 15 Aug 2023 17:43:33 +0800
Subject: [PATCH 014/328] feat(Dialog): revise align of Footer
---
src/components/Dialog/Footer/index.tsx | 9 ++++++++-
src/components/Dialog/Footer/styles.module.css | 4 ++++
src/components/Forms/EmailSignUpForm/Init.tsx | 1 +
3 files changed, 13 insertions(+), 1 deletion(-)
diff --git a/src/components/Dialog/Footer/index.tsx b/src/components/Dialog/Footer/index.tsx
index 07de64a27b..762fb32e21 100644
--- a/src/components/Dialog/Footer/index.tsx
+++ b/src/components/Dialog/Footer/index.tsx
@@ -10,6 +10,7 @@ import styles from './styles.module.css'
type FooterProps = {
btns?: React.ReactNode
smUpBtns?: React.ReactNode
+ smUpSpaceBetween?: boolean
closeText?: React.ReactNode
closeDialog?: () => any
}
@@ -17,6 +18,7 @@ type FooterProps = {
const Footer: React.FC = ({
btns,
smUpBtns,
+ smUpSpaceBetween = false,
closeText,
closeDialog,
}) => {
@@ -32,6 +34,11 @@ const Footer: React.FC = ({
const hasBtns = btns || closeDialog
const hasSmUpBtns = smUpBtns || closeDialog
+ const smUpContentClasses = classNames({
+ [styles.smUpContent]: true,
+ [styles.smUpSpaceBetween]: !!smUpSpaceBetween,
+ })
+
return (
- )}
-
- {isSignUp && (
-
-
-
- )}
-
- {isSignUp && (
- }
- hasLabel
- type="email"
- name="email"
- required
- placeholder={intl.formatMessage({
- defaultMessage: 'Enter Email',
- })}
- extraButton={
- }
- color="gold"
- size="sm"
- weight="md"
- spacing="xxtight"
- >
-
-
- }
- value={values.email}
- error={touched.email && errors.email}
- onBlur={handleBlur}
- onChange={handleChange}
- hint={
-
- }
- spacingTop="base"
- spacingBottom="base"
- />
- )}
-
- {isSignUp && (
-
- }
- hasLabel
- type="text"
- name="code"
- required
- placeholder={intl.formatMessage({
- defaultMessage: 'Enter verification code',
- description: 'src/components/Forms/WalletAuthForm/Connect.tsx',
- })}
- hint={intl.formatMessage({
- defaultMessage: 'Code will expire after 20 minutes',
- })}
- value={values.code}
- error={touched.code && errors.code}
- onBlur={handleBlur}
- onChange={handleChange}
- extraButton={
-
- }
- spacingBottom="base"
- />
- )}
-
- {isSignUp && (
-
-
-
-
-
-
-
-
- >
- }
- required
- />
- )}
-
- {isSignUp && }
-
-
-
- )
-
- const SubmitButton = (
- }
- loading={isSubmitting || loading}
- />
- )
-
- if (isInPage) {
- return (
- <>
-
-
- }
- loading={isSubmitting || loading}
- />
- >
- }
- />
-
- {InnerForm}
- >
- )
- }
-
return (
<>
MetaMask>}
+ hasSmUpTitle={false}
leftBtn={
back ? (
}
onClick={onBack}
+ color="greyDarker"
/>
) : null
}
- closeDialog={closeDialog}
- rightBtn={SubmitButton}
+ closeDialog={onCloseDialog}
/>
- {InnerForm}
+
+
+ {
+ if (type === 'normal') {
+ disconnect()
+ if (gotoSignInTab) {
+ gotoSignInTab()
+ }
+ }
+ }}
+ />
+
+
+
+
+
+ {maskAddress(values.address)}
+
+
+
} spacing="xxxtight">
+
+
+ }
color="greyDarker"
- onClick={back || closeDialog}
+ onClick={onBack}
/>
- {SubmitButton}
+ }
+ color="greyDarker"
+ onClick={onCloseDialog}
+ />
>
}
/>
diff --git a/src/components/Forms/WalletAuthForm/gql.ts b/src/components/Forms/WalletAuthForm/gql.ts
index 35591e2932..eedfa7938d 100644
--- a/src/components/Forms/WalletAuthForm/gql.ts
+++ b/src/components/Forms/WalletAuthForm/gql.ts
@@ -29,11 +29,3 @@ export const WALLET_LOGIN = gql`
}
}
`
-
-export const ETH_ADDRESS_USER = gql`
- query ETHAddressUser($ethAddress: String) {
- user(input: { ethAddress: $ethAddress }) {
- id
- }
- }
-`
diff --git a/src/components/Forms/WalletAuthForm/styles.module.css b/src/components/Forms/WalletAuthForm/styles.module.css
index 180615e4a8..a504e1c6c5 100644
--- a/src/components/Forms/WalletAuthForm/styles.module.css
+++ b/src/components/Forms/WalletAuthForm/styles.module.css
@@ -60,3 +60,45 @@
margin-left: var(--spacing-base);
}
}
+
+.walletInfo {
+ @mixin border-grey-light;
+ @mixin flex-center-all;
+ @mixin transition;
+
+ position: relative;
+ padding: var(--spacing-tight) var(--spacing-base);
+ margin-bottom: var(--spacing-base);
+ font-size: var(--font-size-sm);
+ line-height: 1.375rem;
+ color: var(--color-black);
+ cursor: pointer;
+ border-radius: 0.5rem;
+ transition-property: border-color;
+
+ /* &:hover,
+ &:focus {
+ border-color: var(--color-grey);
+ } */
+
+ & .icon {
+ position: absolute;
+ left: var(--spacing-base-loose);
+ height: 1.375rem;
+ }
+}
+
+.loadingInfo {
+ @mixin flex-center-all;
+
+ flex-direction: column;
+ gap: var(--spacing-tight);
+ align-self: stretch;
+ height: 6.88rem;
+ margin-bottom: var(--spacing-loose);
+ font-size: var(--font-size-sm);
+ line-height: 1.375rem;
+ color: var(--color-grey-darker);
+ background: var(--color-green-lighter);
+ border-radius: 0.5rem;
+}
diff --git a/src/components/GlobalDialogs/UniversalAuthDialog/index.tsx b/src/components/GlobalDialogs/UniversalAuthDialog/index.tsx
index 2ce89fd795..26a3b2c919 100644
--- a/src/components/GlobalDialogs/UniversalAuthDialog/index.tsx
+++ b/src/components/GlobalDialogs/UniversalAuthDialog/index.tsx
@@ -1,5 +1,6 @@
import dynamic from 'next/dynamic'
import { useState } from 'react'
+import { useConnect } from 'wagmi'
import {
CLOSE_ACTIVE_DIALOG,
@@ -7,6 +8,7 @@ import {
TEST_ID,
} from '~/common/enums'
import {
+ AuthFeedType,
Dialog,
Spinner,
useDialogSwitch,
@@ -68,6 +70,12 @@ const BaseUniversalAuthDialog = () => {
const { currStep, forward } = useStep('select-login-method')
const [email, setEmail] = useState('')
+ const { connectors } = useConnect()
+ const injectedConnector = connectors.find((c) => c.id === 'metaMask')
+ const [authTypeFeed, setAuthTypeFeed] = useState(
+ injectedConnector?.ready ? 'wallet' : 'normal'
+ )
+
const {
show,
openDialog: baseOpenDialog,
@@ -90,10 +98,11 @@ const BaseUniversalAuthDialog = () => {