Merge pull request #2886 from thematters/develop

Release: v4.8.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "4.8.0",
+  "version": "4.8.1",
   "description": "codebase of Matters' website",
   "sideEffects": false,
   "author": "Matters <[email protected]>",

src/common/enums/externalLinks.ts

@@ -75,4 +75,11 @@ export const GUIDE_LINKS = {
       'https://matters.news/zh-Hans/@hi176/338013-%E5%8A%9F%E8%83%BD%E6%8C%87%E5%8D%97-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8-%E5%85%A7%E5%AE%B9%E8%A8%82%E9%96%B1-%E4%BE%86%E8%BF%BD%E8%B9%A4%E4%BD%A0%E5%96%9C%E6%84%9B%E7%9A%84-matters-%E4%BD%9C%E8%80%85-bafyreidb42pruxqy75tybjarp6kebmf7quyn3etd6mtv7fopwve6a7mjaa',
     en: 'https://matters.news/en/@hi176/338013-%E5%8A%9F%E8%83%BD%E6%8C%87%E5%8D%97-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8-%E5%85%A7%E5%AE%B9%E8%A8%82%E9%96%B1-%E4%BE%86%E8%BF%BD%E8%B9%A4%E4%BD%A0%E5%96%9C%E6%84%9B%E7%9A%84-matters-%E4%BD%9C%E8%80%85-bafyreidb42pruxqy75tybjarp6kebmf7quyn3etd6mtv7fopwve6a7mjaa',
   },
+  mobilePayment: {
+    zh_hant:
+      'https://matters.news/@hi176/343938-%E6%8C%87%E5%8D%97-%E5%A6%82%E4%BD%95%E5%9C%A8%E6%89%8B%E6%A9%9F%E4%B8%8A%E9%80%A3%E6%8E%A5%E9%8C%A2%E5%8C%85%E4%B8%A6%E4%BD%BF%E7%94%A8-usdt-%E6%94%AF%E6%8C%81%E5%8A%9F%E8%83%BD-bafyreifil6hcprdl5g4vtui5sy3gvimbkphib5xcziddixptmy4dckmtiu',
+    zh_hans:
+      'https://matters.news/zh_Hans/@hi176/343938-%E6%8C%87%E5%8D%97-%E5%A6%82%E4%BD%95%E5%9C%A8%E6%89%8B%E6%A9%9F%E4%B8%8A%E9%80%A3%E6%8E%A5%E9%8C%A2%E5%8C%85%E4%B8%A6%E4%BD%BF%E7%94%A8-usdt-%E6%94%AF%E6%8C%81%E5%8A%9F%E8%83%BD-bafyreifil6hcprdl5g4vtui5sy3gvimbkphib5xcziddixptmy4dckmtiu',
+    en: 'https://matters.news/en/@hi176/343938-%E6%8C%87%E5%8D%97-%E5%A6%82%E4%BD%95%E5%9C%A8%E6%89%8B%E6%A9%9F%E4%B8%8A%E9%80%A3%E6%8E%A5%E9%8C%A2%E5%8C%85%E4%B8%A6%E4%BD%BF%E7%94%A8-usdt-%E6%94%AF%E6%8C%81%E5%8A%9F%E8%83%BD-bafyreifil6hcprdl5g4vtui5sy3gvimbkphib5xcziddixptmy4dckmtiu',
+  },
 }

src/components/Forms/PaymentForm/PayTo/SetAmount/index.tsx

@@ -380,8 +380,8 @@ const SetAmount: React.FC<FormProps> = ({
                     }}
                   >
                     <Translate
-                      zh_hant="前往確認授權"
-                      zh_hans="前往确认授权"
+                      zh_hant="首次需確認授權後繼續"
+                      zh_hans="首次需确认授权后继续"
                       en="Approve to continue"
                     />
                   </Dialog.Footer.Button>

src/components/Forms/WalletAuthForm/Select.tsx

@@ -7,13 +7,16 @@ import {
   IconMetaMask24,
   IconSpinner16,
   IconWalletConnect24,
+  LanguageContext,
   Layout,
   Spacer,
   TextIcon,
   Translate,
+  useResponsive,
   ViewerContext,
 } from '~/components'
 
+import { GUIDE_LINKS } from '~/common/enums'
 import { analytics } from '~/common/utils'
 
 import styles from './styles.css'
@@ -57,6 +60,49 @@ const Desc = {
   },
 }
 
+const Hint = () => {
+  const { lang } = useContext(LanguageContext)
+  const isSmallUp = useResponsive('sm-up')
+
+  if (isSmallUp) {
+    return (
+      <p>
+        <Translate
+          zh_hant="剛接觸加密錢包？參考 "
+          zh_hans="刚接触加密钱包？参考 "
+          en="Don't have a wallet yet? Check the "
+        />
+        <a
+          className="u-link-green"
+          href={GUIDE_LINKS.connectWallet[lang]}
+          target="_blank"
+        >
+          <Translate zh_hant="教學指南" zh_hans="教学指南" en="tutorial" />
+        </a>
+        <Translate zh_hant="" zh_hans="" en="." />
+      </p>
+    )
+  }
+
+  return (
+    <p>
+      <Translate
+        zh_hant="在行動裝置上使用問題，參考 "
+        zh_hans="在行动装置上使用问题，参考"
+        en="Have wallet questions on mobile device ? Click the "
+      />
+      <a
+        className="u-link-green"
+        href={GUIDE_LINKS.mobilePayment[lang]}
+        target="_blank"
+      >
+        <Translate zh_hant="教學指南" zh_hans="教学指南" en="tutorial" />
+      </a>
+      <Translate zh_hant="" zh_hans="" en="." />
+    </p>
+  )
+}
+
 const Select: React.FC<FormProps> = ({
   type,
   purpose,
@@ -67,7 +113,6 @@ const Select: React.FC<FormProps> = ({
   const viewer = useContext(ViewerContext)
 
   const formId = 'wallet-auth-select-form'
-  const fieldMsgId = 'wall-auth-select-msg'
   const isInPage = purpose === 'page'
   const isConnect = type === 'connect'
 
@@ -191,15 +236,16 @@ const Select: React.FC<FormProps> = ({
         />
       </Form.List>
 
-      {errorMessage && (
+      {!errorMessage && (
         <section className="msg">
-          <Form.Field>
-            <Form.Field.Footer
-              fieldMsgId={fieldMsgId}
-              // hint={}
-              error={errorMessage}
-            />
-          </Form.Field>
+          <Hint />
+          <style jsx>{styles}</style>
+        </section>
+      )}
+
+      {errorMessage && (
+        <section className="msg error">
+          <p>{errorMessage}</p>
           <style jsx>{styles}</style>
         </section>
       )}

src/components/Forms/WalletAuthForm/styles.css

@@ -1,5 +1,12 @@
 .msg {
-  margin: 0 var(--spacing-base) var(--spacing-loose);
+  margin: var(--spacing-x-tight) 0 var(--spacing-base) var(--spacing-base);
+  font-size: var(--font-size-xs);
+  line-height: 1rem;
+  color: var(--color-grey);
+
+  &.error {
+    color: var(--color-red);
+  }
 }
 
 .emphasize {

src/components/Layout/SideFooter/index.tsx

@@ -1,24 +1,16 @@
 import Link from 'next/link'
+import { useContext } from 'react'
 
-import { LanguageSwitch, Translate } from '~/components'
+import { LanguageContext, LanguageSwitch, Translate } from '~/components'
 
-import { PATHS } from '~/common/enums'
-import { toPath } from '~/common/utils'
+import { GUIDE_LINKS, PATHS } from '~/common/enums'
 
 import styles from './styles.css'
 
 const SideFooter = () => {
+  const { lang } = useContext(LanguageContext)
   const year = new Date().getFullYear()
 
-  const downloadAppLink = toPath({
-    page: 'articleDetail',
-    article: {
-      slug: 'guidance-如何让你的matters之旅更便捷',
-      mediaHash: 'bafyreiayiuxi4qc2a7qpgjp3fe42wmaoppqykckcvtq4hiukl5pgs3dn2m',
-      author: { userName: '1ampa55ag3' },
-    },
-  })
-
   return (
     <footer>
       <section className="buttons">
@@ -72,7 +64,7 @@ const SideFooter = () => {
           <Translate id="bugBountyProgram" />
         </a>
 
-        <Link {...downloadAppLink}>
+        <Link href={GUIDE_LINKS.PWA[lang]}>
           <a>
             <Translate id="downloadApp" />
           </a>

src/views/Guide/content.ts

@@ -16,18 +16,7 @@ export default {
   </li>
 </ul>
 
-<p>其中，標籤與圍爐是 Matters 的兩項特色功能，標籤可以幫助你的文章獲得更多曝光、並找到志同道合的寫作者；圍爐為你提供一個具有私密感的寫作與讀者互動空間。</p>
-
-<ul>
-  <li>
-    <a className="u-link-green" href="${GUIDE_LINKS.tagUsage.zh_hant}">Matters 標籤功能指南</a>
-  </li>
-  <li>
-    <a className="u-link-green" href="${GUIDE_LINKS.circleUsage.zh_hant}">Matters 圍爐指南</a>
-  </li>
-</ul>
-
-<p>Matters 目前尚未推出 app，如果你想要在手機上使用 Matters.News，非常推薦你使用 PWA，功能跟 app 幾乎完全一樣。</p>
+<p>Matters 目前尚未推出 App，如果你想要在手機上使用 Matters.News，非常推薦你使用 PWA，功能跟 App 幾乎完全一樣。</p>
 
 <ul>
   <li>
@@ -53,6 +42,14 @@ export default {
   </li>
 </ul>
 
+<p>如果你想用手機進行登入、綁定錢包及進行 USDT 支付，請參考我們的手機版專屬指南，可以為你解決絕大部分的疑惑。</p>
+
+<ul>
+  <li>
+    <a className="u-link-green" href="${GUIDE_LINKS.mobilePayment.zh_hant}">Matters 錢包與支付指南（手機版）</a>
+  </li>
+</ul>
+
 <p>好文章不遺漏，我們也支援 RSS 、JSON 閱讀器或 IPNS 兼容的 Planet 閱讀器來訂閱作者。</p>
 
 <ul>
@@ -76,18 +73,7 @@ export default {
   </li>
 </ul>
 
-<p>其中，标签与围炉是 Matters 的两项特色功能，标签可以帮助你的文章获得更多曝光、并找到志同道合的写作者；围炉为你提供一个具有私密感的写作与读者互动空间。</p>
-
-<ul>
-  <li>
-    <a className="u-link-green" href="${GUIDE_LINKS.tagUsage.zh_hans}">Matters 标签功能指南</a>
-  </li>
-  <li>
-    <a className="u-link-green" href="${GUIDE_LINKS.circleUsage.zh_hans}">Matters 围炉指南</a>
-  </li>
-</ul>
-
-<p>Matters 目前尚未推出 app，如果你想要在手机上使用 Matters.News，非常推荐你使用 PWA，功能跟 app 几乎完全一样。</p>
+<p>Matters 目前尚未推出 App，如果你想要在手机上使用 Matters.News，非常推荐你使用 PWA，功能跟 App 几乎完全一样。</p>
 
 <ul>
   <li>
@@ -113,6 +99,14 @@ export default {
   </li>
 </ul>
 
+<p>如果你想用手机进行登入、绑定钱包及进行 USDT 支付，请参考我们的手机版专属指南，可以为你解决绝大部分的疑惑。</p>
+
+<ul>
+  <li>
+    <a className="u-link-green" href="${GUIDE_LINKS.mobilePayment.zh_hant}">Matters 钱包与支付指南（手机版）</a>
+  </li>
+</ul>
+
 <p>好文章不遗漏，我们也支援 RSS 、JSON 阅读器或 IPNS 兼容的 Planet 阅读器来订阅作者。</p>
 
 <ul>

src/views/Help/index.tsx

@@ -1,20 +1,14 @@
-import { Form, Layout, Spacer, Translate } from '~/components'
+import { useContext } from 'react'
 
-import { PATHS } from '~/common/enums'
-import { toPath } from '~/common/utils'
+import { Form, LanguageContext, Layout, Spacer, Translate } from '~/components'
+
+import { GUIDE_LINKS, PATHS } from '~/common/enums'
 
 import styles from './styles.css'
 
 const BaseHelp = () => {
+  const { lang } = useContext(LanguageContext)
   const year = new Date().getFullYear()
-  const downloadAppLink = toPath({
-    page: 'articleDetail',
-    article: {
-      slug: 'guidance-如何让你的matters之旅更便捷',
-      mediaHash: 'bafyreiayiuxi4qc2a7qpgjp3fe42wmaoppqykckcvtq4hiukl5pgs3dn2m',
-      author: { userName: '1ampa55ag3' },
-    },
-  })
 
   return (
     <>
@@ -37,7 +31,7 @@ const BaseHelp = () => {
         />
         <Form.List.Item
           title={<Translate id="downloadApp" />}
-          {...downloadAppLink}
+          href={GUIDE_LINKS.PWA[lang]}
         />
       </Form.List>
 

src/views/Me/Wallet/Balance/LikeCoin.tsx

@@ -108,11 +108,7 @@ export const LikeCoinBalance = () => {
         href={PATHS.ME_SETTINGS}
       >
         <TextIcon color="black" size="xs">
-          <Translate
-            zh_hant="設置 Liker ID"
-            zh_hans="设置 Liker ID"
-            en="Set Liker ID"
-          />
+          <Translate zh_hant="前往設置" zh_hans="前往设置" en="Setup" />
         </TextIcon>
       </Button>
     </Wrapper>

src/views/Me/Wallet/Balance/USDT.tsx

@@ -1,6 +1,7 @@
 import { useContext } from 'react'
 
 import {
+  Button,
   CurrencyFormatter,
   IconUSDTActive40,
   TextIcon,
@@ -9,6 +10,7 @@ import {
   ViewerContext,
 } from '~/components'
 
+import { PATHS } from '~/common/enums'
 import { formatAmount } from '~/common/utils'
 
 import styles from './styles.css'
@@ -20,7 +22,30 @@ export const USDTBalance = () => {
   const balanceUSDT = parseFloat(balanceUSDTData?.formatted || '0')
 
   if (!address) {
-    return null
+    return (
+      <section className="assetsItem">
+        <TextIcon
+          icon={<IconUSDTActive40 size="xl-m" />}
+          size="md"
+          spacing="xtight"
+        >
+          <Translate zh_hant="USDT" zh_hans="USDT" en="USDT" />
+        </TextIcon>
+
+        <Button
+          spacing={[0, 'tight']}
+          size={[null, '1.5rem']}
+          borderColor="black"
+          href={PATHS.ME_SETTINGS_CONNECT_WALLET}
+        >
+          <TextIcon color="black" size="xs">
+            <Translate zh_hant="前往設置" zh_hans="前往设置" en="Setup" />
+          </TextIcon>
+        </Button>
+
+        <style jsx>{styles}</style>
+      </section>
+    )
   }
 
   return (

src/views/Settings/Learn/index.tsx

@@ -1,18 +1,12 @@
-import { Form, Translate } from '~/components'
+import { useContext } from 'react'
 
-import { PATHS } from '~/common/enums'
-import { toPath } from '~/common/utils'
+import { Form, LanguageContext, Translate } from '~/components'
 
-const downloadAppLink = toPath({
-  page: 'articleDetail',
-  article: {
-    slug: 'guidance-如何让你的matters之旅更便捷',
-    mediaHash: 'bafyreiayiuxi4qc2a7qpgjp3fe42wmaoppqykckcvtq4hiukl5pgs3dn2m',
-    author: { userName: '1ampa55ag3' },
-  },
-})
+import { GUIDE_LINKS, PATHS } from '~/common/enums'
 
 const Learn = () => {
+  const { lang } = useContext(LanguageContext)
+
   return (
     <Form.List
       groupName={
@@ -32,7 +26,7 @@ const Learn = () => {
       <Form.List.Item title={<Translate id="term" />} href={PATHS.TOS} />
       <Form.List.Item
         title={<Translate id="downloadApp" />}
-        {...downloadAppLink}
+        href={GUIDE_LINKS.PWA[lang]}
       />
     </Form.List>
   )