Merge pull request #2349 from thematters/develop

Release: v3.36.0

.env.dev

@@ -21,3 +21,4 @@ NEXT_PUBLIC_RECAPTCHA_KEY=6Lfn4fsUAAAAACKsig4Mr54UP0Vn4ombv4zmOWJk
 NEXT_PUBLIC_STRIPE_PUBLIC_KEY=pk_test_51GrOGRCE0HD6LY9Uo7rK3pSmiIG4KTjWO1rOrJavFFJob3zQlSjZg6uavIhcGbp8o1wZGcEuph2MgUfHhsB48vx000z2S0FiUx
 NEXT_PUBLIC_BUILD_TYPE=dynamic
 NEXT_PUBLIC_PROGRAMMABLE_SEARCH_ENGINE_ID=004538121411474993797:xkl3sdy-9su
+NEXT_PUBLIC_TRAVELOGGERS_URL=https://nft-develop.matters.news

.env.local.example

@@ -20,3 +20,4 @@ NEXT_PUBLIC_RECAPTCHA_KEY=6Lfn4fsUAAAAACKsig4Mr54UP0Vn4ombv4zmOWJk
 NEXT_PUBLIC_STRIPE_PUBLIC_KEY=pk_test_51GrOGRCE0HD6LY9Uo7rK3pSmiIG4KTjWO1rOrJavFFJob3zQlSjZg6uavIhcGbp8o1wZGcEuph2MgUfHhsB48vx000z2S0FiUx
 NEXT_PUBLIC_BUILD_TYPE=dynamic
 NEXT_PUBLIC_PROGRAMMABLE_SEARCH_ENGINE_ID=004538121411474993797:xkl3sdy-9su
+NEXT_PUBLIC_TRAVELOGGERS_URL=https://nft-develop.matters.news

.env.prod

@@ -21,3 +21,4 @@ NEXT_PUBLIC_RECAPTCHA_KEY=6LfZ6uAUAAAAAAQ6m0I2hY62sRQgNQz2J9ba-5Ys
 NEXT_PUBLIC_STRIPE_PUBLIC_KEY=pk_live_NfdCmUIPzQxKEMjLkInsjULK00W7AXBBrG
 NEXT_PUBLIC_BUILD_TYPE=dynamic
 NEXT_PUBLIC_PROGRAMMABLE_SEARCH_ENGINE_ID=004538121411474993797:xkl3sdy-9su
+NEXT_PUBLIC_TRAVELOGGERS_URL=https://traveloggers.matters.news

.env.stage

@@ -21,3 +21,4 @@ NEXT_PUBLIC_RECAPTCHA_KEY=6Lfn4fsUAAAAACKsig4Mr54UP0Vn4ombv4zmOWJk
 NEXT_PUBLIC_STRIPE_PUBLIC_KEY=pk_test_51ITI0rKY3RzN3G1SN3FGU2jdw7Przd8qpdlMXlw1Vx796tqp7zdS4in6Yql7xgs08fCO6x0bZR1QMtZVaoM5uI7S00Hwo1ruoN
 NEXT_PUBLIC_BUILD_TYPE=dynamic
 NEXT_PUBLIC_PROGRAMMABLE_SEARCH_ENGINE_ID=004538121411474993797:xkl3sdy-9su
+NEXT_PUBLIC_TRAVELOGGERS_URL=https://nft-develop.matters.news

package.json

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

src/common/enums/csp.ts

@@ -32,13 +32,21 @@ const STYLE_SRC = [
   'www.google.com/cse/',
 ].join(' ')
 
+/* const { hostname: NEXT_PUBLIC_API_HOSTNAME } = new URL(
+  process.env.NEXT_PUBLIC_API_URL as string
+) */
+
 const IMG_SRC = [
   "'self'",
 
   // Asssets
   'data:',
   process.env.NEXT_PUBLIC_ASSET_DOMAIN,
 
+  // 'server-develop.matters.news',
+  // NEXT_PUBLIC_API_HOSTNAME as string,
+  new URL(process.env.NEXT_PUBLIC_API_URL as string).hostname,
+
   // for some old articles were using this s3 urls directly
   'matters-server-production.s3-ap-southeast-1.amazonaws.com',
 
@@ -55,6 +63,8 @@ const CONNECT_SRC = [
   process.env.NEXT_PUBLIC_API_URL,
   process.env.NEXT_PUBLIC_OAUTH_API_URL,
 
+  // 'server-develop.matters.news',
+
   // Sentry
   'sentry.matters.one',
 

src/common/enums/text.ts

@@ -165,6 +165,8 @@ export const TEXT = {
     LIKER_EMAIL_EXISTS: 'Liker ID 電子信箱已被其他人使用',
     LIKER_NOT_FOUND: 'Liker ID 不存在',
     LIKER_USER_ID_EXISTS: 'Liker ID 已被其他人使用',
+    logbook: '航行日誌',
+    myNFTCollections: '我的 NFT 收藏',
     login: '登入',
     loginPassword: '登入密碼',
     logout: '登出',
@@ -494,6 +496,8 @@ export const TEXT = {
     LIKER_EMAIL_EXISTS: 'Liker ID 邮箱已被其他人使用',
     LIKER_NOT_FOUND: 'Liker ID 不存在',
     LIKER_USER_ID_EXISTS: 'Liker ID 已被其他人使用',
+    logbook: '航行日志',
+    myNFTCollections: '我的 NFT 收藏',
     login: '登录',
     loginPassword: '登录密码',
     logout: '登出',
@@ -840,6 +844,8 @@ export const TEXT = {
     LIKER_EMAIL_EXISTS: 'Liker ID email is already used by others.',
     LIKER_NOT_FOUND: 'Liker ID not found',
     LIKER_USER_ID_EXISTS: 'Liker ID is already used by others.',
+    logbook: 'Logbook',
+    myNFTCollections: 'My NFT Collections',
     login: 'Log in',
     loginPassword: 'Password',
     logout: 'Log Out',

src/components/Avatar/index.tsx

@@ -1,23 +1,28 @@
 import classNames from 'classnames'
 import gql from 'graphql-tag'
 
-import { ResponsiveImage } from '~/components'
+import { IconLogbookBadge16, ResponsiveImage } from '~/components'
 
 import ICON_AVATAR_DEFAULT from '@/public/static/icons/72px/avatar-default.svg'
 import IMAGE_MATTERS_ARCHITECT_RING from '@/public/static/icons/architect-ring.svg'
 import IMAGE_CIVIC_LIKER_RING from '@/public/static/icons/civic-liker-ring.svg'
+import LOGBOOK from '@/public/static/images/logbook.gif'
 
 import styles from './styles.css'
 
 import { AvatarUser } from './__generated__/AvatarUser'
+import { AvatarUserLogbook } from './__generated__/AvatarUserLogbook'
 
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl'
 
+export type AvatarLogbook = PartialDeep<AvatarUserLogbook>
+
 export interface AvatarProps {
-  user?: AvatarUser
+  user?: AvatarUser & AvatarLogbook
   size?: AvatarSize
   src?: string | null
   inEditor?: boolean
+  inProfile?: boolean
 }
 
 const fragments = {
@@ -34,20 +39,37 @@ const fragments = {
       }
     }
   `,
+  logbook: gql`
+    fragment AvatarUserLogbook on User {
+      info {
+        cryptoWallet {
+          id
+          address
+          nfts {
+            id
+          }
+        }
+      }
+    }
+  `,
 }
 
 export const Avatar = (props: AvatarProps) => {
-  const { user, size = 'default', src, inEditor } = props
+  const { user, size = 'default', src, inEditor, inProfile } = props
   const source = src || user?.avatar || ICON_AVATAR_DEFAULT
   const isFallback =
     (!src && !user?.avatar) || source.indexOf('data:image') >= 0
   const isCivicLiker = user?.liker.civicLiker
   const badges = user?.info?.badges || []
   const hasArchitectBadge = badges.some((b) => b.type === 'architect')
+  const hasLogbook =
+    Array.isArray(user?.info?.cryptoWallet?.nfts) &&
+    (user?.info?.cryptoWallet?.nfts || []).length > 0
   const avatarClasses = classNames({
     avatar: true,
     [size]: true,
     hasRing: isCivicLiker || hasArchitectBadge,
+    hasBadge: hasLogbook,
   })
 
   return (
@@ -60,6 +82,15 @@ export const Avatar = (props: AvatarProps) => {
 
       {isCivicLiker && <span className="civic-liker ring" />}
       {hasArchitectBadge && <span className="architect ring" />}
+      {hasLogbook && (
+        <section className="badge">
+          {inProfile ? (
+            <img className="logbook" src={LOGBOOK.src} />
+          ) : (
+            <IconLogbookBadge16 />
+          )}
+        </section>
+      )}
 
       <style jsx>{styles}</style>
 

src/components/Avatar/styles.css

@@ -6,7 +6,7 @@
   flex-shrink: 0;
   border-radius: 50%;
 
-  & :global(img) {
+  & :global(img:not(.logbook)) {
     @mixin object-fit-cover;
 
     background-color: var(--color-grey-lighter);
@@ -29,6 +29,27 @@
   }
 }
 
+.hasBadge {
+  & .badge {
+    @mixin flex-center-all;
+
+    position: absolute;
+    right: 0;
+    bottom: 0;
+
+    & :global(img) {
+      width: var(--spacing-base);
+      height: auto;
+      transform: translateX(25%);
+    }
+
+    & :global(svg) {
+      height: auto;
+      transform: translateX(50%);
+    }
+  }
+}
+
 /**
  * Sizes
  */
@@ -37,24 +58,56 @@
 .xs {
   width: 1rem;
   height: 1rem;
+
+  &.hasBadge {
+    & .badge {
+      & :global(svg) {
+        width: calc(1rem * 0.4);
+      }
+    }
+  }
 }
 
 /* 20px */
 .sm {
   width: 1.25rem;
   height: 1.25rem;
+
+  &.hasBadge {
+    & .badge {
+      & :global(svg) {
+        width: calc(1.25rem * 0.4);
+      }
+    }
+  }
 }
 
 /* 24px */
 .md {
   width: 1.5rem;
   height: 1.5rem;
+
+  &.hasBadge {
+    & .badge {
+      & :global(svg) {
+        width: calc(1.5rem * 0.35);
+      }
+    }
+  }
 }
 
 /* 32px */
 .lg {
   width: 2rem;
   height: 2rem;
+
+  &.hasBadge {
+    & .badge {
+      & :global(svg) {
+        width: calc(2rem * 0.3);
+      }
+    }
+  }
 }
 
 /* 40px */
@@ -72,6 +125,14 @@
       left: -4px;
     }
   }
+
+  &.hasBadge {
+    & .badge {
+      & :global(svg) {
+        width: calc(2.5rem * 0.3);
+      }
+    }
+  }
 }
 
 /* 48px */
@@ -87,6 +148,15 @@
       left: -5px;
     }
   }
+
+  &.hasBadge {
+    & .badge {
+      & :global(svg) {
+        width: calc(3rem * 0.3);
+        transform: translateX(20%);
+      }
+    }
+  }
 }
 
 /* 56px */
@@ -102,6 +172,14 @@
       left: -6px;
     }
   }
+
+  &.hasBadge {
+    & .badge {
+      & :global(svg) {
+        transform: translateX(25%);
+      }
+    }
+  }
 }
 
 /* 72px */
@@ -117,4 +195,12 @@
       left: -8px;
     }
   }
+
+  &.hasBadge {
+    & .badge {
+      & :global(svg) {
+        transform: translateX(25%);
+      }
+    }
+  }
 }

src/components/Context/Viewer/index.tsx

@@ -37,6 +37,13 @@ const ViewerFragments = {
           badges {
             type
           }
+          cryptoWallet {
+            id
+            address
+            nfts {
+              id
+            }
+          }
         }
         settings {
           language

src/components/GQL/updates/circleFollowers.ts

@@ -48,6 +48,7 @@ const update = ({
             info: {
               description: viewer.info.description,
               badges: viewer.info.badges,
+              cryptoWallet: viewer.info.cryptoWallet,
               __typename: 'UserInfo',
             },
             isBlocked: false,

src/components/Icon/IconLogbook24.tsx

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

src/components/Icon/IconLogbookBadge16.tsx

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

src/components/Icon/index.tsx

@@ -73,6 +73,8 @@ export * from './IconImage24'
 export * from './IconInfo16'
 export * from './IconIPFS24'
 export * from './IconLeft32'
+export * from './IconLogbook24'
+export * from './IconLogbookBadge16'
 export * from './IconLogo'
 export * from './IconLogoGraph'
 export * from './IconLogout24'