Merge pull request #2861 from thematters/fix/usdt-donation

Bugfixes and enhancement on donation

src/common/enums/externalLinks.ts

@@ -63,10 +63,10 @@ export const GUIDE_LINKS = {
   },
   PWA: {
     zh_hant:
-      'https://matters.news/zh-Hant/@1ampa55ag3/24439-guidance-%E5%A6%82%E4%BD%95%E8%AE%A9%E4%BD%A0%E7%9A%84matters%E4%B9%8B%E6%97%85%E6%9B%B4%E4%BE%BF%E6%8D%B7-bafyreiayiuxi4qc2a7qpgjp3fe42wmaoppqykckcvtq4hiukl5pgs3dn2m',
+      'https://matters.news/@hi176/342215-%E6%8C%87%E5%8D%97-%E6%83%B3%E5%9C%A8%E6%89%8B%E6%A9%9F%E4%B8%8A%E6%96%B9%E4%BE%BF%E5%9C%B0%E4%BD%BF%E7%94%A8-matters-%E9%80%99%E8%A3%A1%E6%9C%89%E4%B8%80%E5%80%8B%E5%BE%88%E5%A5%BD%E7%9A%84%E6%96%B9%E6%B3%95-bafyreiclzb52uisucbf7gch2k2ll7mcc6kiivaxxqdqo7drnx5oj4sqvu4',
     zh_hans:
-      'https://matters.news/@1ampa55ag3/24439-guidance-%E5%A6%82%E4%BD%95%E8%AE%A9%E4%BD%A0%E7%9A%84matters%E4%B9%8B%E6%97%85%E6%9B%B4%E4%BE%BF%E6%8D%B7-bafyreiayiuxi4qc2a7qpgjp3fe42wmaoppqykckcvtq4hiukl5pgs3dn2m',
-    en: 'https://matters.news/en/@1ampa55ag3/24439-guidance-%E5%A6%82%E4%BD%95%E8%AE%A9%E4%BD%A0%E7%9A%84matters%E4%B9%8B%E6%97%85%E6%9B%B4%E4%BE%BF%E6%8D%B7-bafyreiayiuxi4qc2a7qpgjp3fe42wmaoppqykckcvtq4hiukl5pgs3dn2m',
+      'https://matters.news/zh-Hans/@hi176/342215-%E6%8C%87%E5%8D%97-%E6%83%B3%E5%9C%A8%E6%89%8B%E6%A9%9F%E4%B8%8A%E6%96%B9%E4%BE%BF%E5%9C%B0%E4%BD%BF%E7%94%A8-matters-%E9%80%99%E8%A3%A1%E6%9C%89%E4%B8%80%E5%80%8B%E5%BE%88%E5%A5%BD%E7%9A%84%E6%96%B9%E6%B3%95-bafyreiclzb52uisucbf7gch2k2ll7mcc6kiivaxxqdqo7drnx5oj4sqvu4',
+    en: 'https://matters.news/en/@hi176/342215-%E6%8C%87%E5%8D%97-%E6%83%B3%E5%9C%A8%E6%89%8B%E6%A9%9F%E4%B8%8A%E6%96%B9%E4%BE%BF%E5%9C%B0%E4%BD%BF%E7%94%A8-matters-%E9%80%99%E8%A3%A1%E6%9C%89%E4%B8%80%E5%80%8B%E5%BE%88%E5%A5%BD%E7%9A%84%E6%96%B9%E6%B3%95-bafyreiclzb52uisucbf7gch2k2ll7mcc6kiivaxxqdqo7drnx5oj4sqvu4',
   },
   RSS: {
     zh_hant:

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

@@ -2,13 +2,13 @@ import { useQuery } from '@apollo/react-hooks'
 import _pickBy from 'lodash/pickBy'
 
 import {
-  Avatar,
   CurrencyFormatter,
   Dialog,
   IconFiatCurrency40,
   Spinner,
   TextIcon,
   Translate,
+  UserDigest,
 } from '~/components'
 import WALLET_BALANCE from '~/components/GQL/queries/walletBalance'
 
@@ -49,11 +49,19 @@ const CurrencyChoice: React.FC<FormProps> = ({
           <Translate zh_hant="選擇支持" zh_hans="选择支持" en="Support " />
         </span>
         <span className="userInfo">
-          <Avatar user={recipient} size="xs" />
-          <span className="userName">{recipient.displayName}</span>
+          <UserDigest.Mini
+            user={recipient}
+            avatarSize="xs"
+            textSize="md-s"
+            textWeight="semibold"
+            nameColor="black"
+            spacing="xxtight"
+            hasAvatar
+            hasDisplayName
+          />
         </span>
         <span>
-          <Translate zh_hant="的方式" zh_hans="的方式" en="with: " />
+          <Translate zh_hant="的方式：" zh_hans="的方式：" en="with: " />
         </span>
       </section>
 

src/components/Forms/PaymentForm/PayTo/CurrencyChoice/styles.css

@@ -7,18 +7,16 @@
     @mixin flex-center-start;
 
     margin: var(--spacing-base) 0;
-    font-size: 1rem;
+    font-size: var(--font-size-md-s);
     line-height: 1.5rem;
 
-    & .userInfo {
-      @mixin inline-flex-center-start;
+    & :global(> *) {
+      flex-shrink: 0;
+    }
 
-      gap: var(--spacing-xx-tight);
+    & .userInfo {
+      flex-shrink: 1;
       margin: 0 var(--spacing-x-tight);
-
-      & .userName {
-        font-weight: var(--font-weight-semibold);
-      }
     }
   }
 

src/components/Forms/PaymentForm/Processing/index.tsx

@@ -267,9 +267,9 @@ const USDTProcessingForm: React.FC<Props> = ({
             </p>
             <p>
               <Translate
-                zh_hant="完成前請勿關閉此畫面"
-                zh_hans="完成前请勿关闭此画面"
-                en="Do not close the window."
+                zh_hant="操作結果以鏈上紀錄為主，稍後將同步至 Matters"
+                zh_hans="操作结果以链上记录为主，稍后将同步至 Matters"
+                en="Transaction will be updated to Matters shortly."
               />
             </p>
           </section>

src/components/UserDigest/Mini/index.tsx

@@ -27,9 +27,10 @@ export type UserDigestMiniProps = {
 
   avatarSize?: Extract<AvatarSize, 'xs' | 'sm' | 'md' | 'lg'>
   textSize?: 'xs' | 'sm-s' | 'sm' | 'md-s' | 'md'
-  textWeight?: 'md'
+  textWeight?: 'md' | 'semibold'
   nameColor?: 'black' | 'white' | 'grey-darker' | 'green'
   direction?: 'row' | 'column'
+  spacing?: 'xxtight' | 'xtight'
 
   hasAvatar?: boolean
   hasDisplayName?: boolean
@@ -61,6 +62,7 @@ const Mini = ({
   textWeight,
   nameColor = 'black',
   direction = 'row',
+  spacing = 'xtight',
 
   hasAvatar,
   hasDisplayName,
@@ -79,6 +81,7 @@ const Mini = ({
     [`text-size-${textSize}`]: !!textSize,
     [`text-weight-${textWeight}`]: !!textWeight,
     [`name-color-${nameColor}`]: !!nameColor,
+    [`spacing-${spacing}`]: !!spacing,
     hasAvatar,
     disabled: disabled || isArchived,
   })

src/components/UserDigest/Mini/styles.css

@@ -1,10 +1,6 @@
 .container {
   @mixin flex-center-start;
 
-  &.hasAvatar .name {
-    margin-left: var(--spacing-x-tight);
-  }
-
   &:not(.disabled) {
     &:hover,
     &:focus {
@@ -40,10 +36,14 @@
 }
 
 .displayname {
+  @mixin line-clamp;
+
   line-height: 1.25;
 }
 
 .username {
+  @mixin line-clamp;
+
   margin-left: var(--spacing-xx-tight);
   font-size: var(--font-size-sm);
   line-height: 1.25;
@@ -73,6 +73,9 @@
 .text-weight-md {
   font-weight: var(--font-weight-medium);
 }
+.text-weight-semibold {
+  font-weight: var(--font-weight-semibold);
+}
 
 .name-color-black {
   & .displayname {
@@ -97,3 +100,15 @@
     color: var(--color-matters-green);
   }
 }
+
+.spacing-xtight {
+  &.hasAvatar .name {
+    margin-left: var(--spacing-x-tight);
+  }
+}
+
+.spacing-xxtight {
+  &.hasAvatar .name {
+    margin-left: var(--spacing-xx-tight);
+  }
+}