Merge pull request #2316 from thematters/develop

Release: v3.34.0

package.json

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

src/components/Icon/IconTraveloggers16.tsx

@@ -0,0 +1,5 @@
+import { ReactComponent as Icon } from '@/public/static/icons/16px/traveloggers.svg'
+
+import { withIcon } from './withIcon'
+
+export const IconTraveloggers16 = withIcon(Icon)

src/components/Icon/index.tsx

@@ -105,6 +105,7 @@ export * from './IconSort16'
 export * from './IconSpinner16'
 export * from './IconSuperLike'
 export * from './IconSupport'
+export * from './IconTraveloggers16'
 export * from './IconUnChecked'
 export * from './IconUnfollow24'
 export * from './IconUnlock24'

src/components/Notice/CryptoNotice/CryptoWalletConnectedNotice.tsx

@@ -18,9 +18,9 @@ const CryptoWalletConnectedNotice = ({ notice }: { notice: NoticeType }) => {
       <section className="content-wrap">
         <p>
           <Translate
-            zh_hant="你已成功設定加密錢包。錢包地址："
-            zh_hans="你已成功设定加密钱包，钱包地址："
-            en="You've connected a crypto wallet, and the address:"
+            zh_hant="你已完成以太坊錢包設定。你設定的地址："
+            zh_hans="你已完成以太坊钱包设定。你设定的地址："
+            en="You have successfully completed Ethereum wallet settings. Please confirm wallet address:"
           />
           <p className="highlight">{notice.target.address}</p>
         </p>

src/components/UserProfile/Badges/index.tsx

@@ -5,6 +5,7 @@ import { EXTERNAL_LINKS } from '~/common/enums'
 import { ReactComponent as IconArchitectBadge } from '@/public/static/icons/16px/badge-architect.svg'
 import { ReactComponent as IconGoldenMotorBadge } from '@/public/static/icons/16px/badge-golden-motor.svg'
 import { ReactComponent as IconSeedBadge } from '@/public/static/icons/16px/badge-seed.svg'
+import { ReactComponent as IconTraveloggersBadge } from '@/public/static/icons/16px/traveloggers.svg'
 import { ReactComponent as IconCivicLikerBadge } from '@/public/static/icons/badge-civic-liker.svg'
 
 import styles from './styles.css'
@@ -61,3 +62,20 @@ export const CivicLikerBadge = () => (
     ))({})}
   </Button>
 )
+
+export const TraveloggersBadge = () => (
+  <Tooltip
+    content={
+      <Translate
+        zh_hant="Traveloggers"
+        zh_hans="Traveloggers"
+        en="Traveloggers"
+      />
+    }
+  >
+    <span className="badge">
+      {withIcon(IconTraveloggersBadge)({})}
+      <style jsx>{styles}</style>
+    </span>
+  </Tooltip>
+)

src/components/UserProfile/DropdownActions/EditProfileDialog/gql.ts

@@ -1,21 +1,49 @@
 import gql from 'graphql-tag'
 
 export const fragments = {
-  user: gql`
-    fragment EditProfileDialogUserPublic on User {
-      id
-      avatar
-      displayName
-      info {
-        profileCover
-        description
-        badges {
-          type
+  user: {
+    public: gql`
+      fragment EditProfileDialogUserPublic on User {
+        id
+        avatar
+        displayName
+        info {
+          profileCover
+          description
+          badges {
+            type
+          }
+        }
+        liker {
+          civicLiker
         }
       }
-      liker {
-        civicLiker
+    `,
+    private: gql`
+      fragment EditProfileDialogUserPrivate on User {
+        id
+        avatar
+        displayName
+        info {
+          profileCover
+          description
+          badges {
+            type
+          }
+          cryptoWallet {
+            id
+            address
+            nfts {
+              id
+              name
+              description
+            }
+          }
+        }
+        liker {
+          civicLiker
+        }
       }
-    }
-  `,
+    `,
+  },
 }

src/components/UserProfile/DropdownActions/index.tsx

@@ -48,14 +48,16 @@ const fragments = {
         ...EditProfileDialogUserPublic
       }
       ${BlockUser.fragments.user.public}
-      ${EditProfileDialog.fragments.user}
+      ${EditProfileDialog.fragments.user.public}
     `,
     private: gql`
       fragment DropdownActionsUserPrivate on User {
         id
         ...BlockUserPrivate
+        ...EditProfileDialogUserPrivate
       }
       ${BlockUser.fragments.user.private}
+      ${EditProfileDialog.fragments.user.private}
     `,
   },
 }

src/components/UserProfile/index.tsx

@@ -25,6 +25,7 @@ import {
   CivicLikerBadge,
   GoldenMotorBadge,
   SeedBadge,
+  TraveloggersBadge,
 } from './Badges'
 import CircleWidget from './CircleWidget'
 import DropdownActions from './DropdownActions'
@@ -33,6 +34,7 @@ import { FollowingDialog } from './FollowingDialog'
 import { USER_PROFILE_PRIVATE, USER_PROFILE_PUBLIC } from './gql'
 import styles from './styles.css'
 
+import { UserProfileUserPrivate_user_info_cryptoWallet_nfts } from './__generated__/UserProfileUserPrivate'
 import { UserProfileUserPublic } from './__generated__/UserProfileUserPublic'
 
 export const UserProfile = () => {
@@ -126,6 +128,13 @@ export const UserProfile = () => {
   const hasSeedBadge = badges.some((b) => b.type === 'seed')
   const hasArchitectBadge = badges.some((b) => b.type === 'architect')
   const hasGoldenMotorBadge = badges.some((b) => b.type === 'golden_motor')
+  const hasTraveloggersBadge =
+    Array.isArray(user.info.cryptoWallet?.nfts) &&
+    (
+      user?.info.cryptoWallet
+        ?.nfts as UserProfileUserPrivate_user_info_cryptoWallet_nfts[]
+    ).length > 0
+
   const profileCover = user.info.profileCover || ''
   const userState = user.status?.state as string
   const isCivicLiker = user.liker.civicLiker
@@ -186,6 +195,7 @@ export const UserProfile = () => {
         <section className="info">
           <section className="display-name">
             <h1 className="name">{user.displayName}</h1>
+            {hasTraveloggersBadge && <TraveloggersBadge />}
             {hasSeedBadge && <SeedBadge />}
             {hasGoldenMotorBadge && <GoldenMotorBadge />}
             {hasArchitectBadge && <ArchitectBadge />}