Merge pull request #4239 from thematters/develop

Release: v4.30.0

.env.dev

@@ -33,6 +33,9 @@ NEXT_PUBLIC_TWITTER_CLIENT_ID=X3d6Szg5bnVCMm5wRWxSVmhXUTc6MTpjaQ
 NEXT_PUBLIC_FACEBOOK_CLIENT_ID=1072677713882819
 NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY=0x4AAAAAAAKiedvR5qiLUhIs
 NEXT_PUBLIC_NOMAD_MATTERS_CAMPAIGN_LINK=/@rsdyobw/22048-launching-the-nomad-matters-initiative
+NEXT_PUBLIC_BILLBOARD_ADDRESS=0x6a72820E1CCCba1B1FE02E37881cEa3F9Aa6375C
+NEXT_PUBLIC_BILLBOARD_TOKEN_ID=1
+NEXT_PUBLIC_BILLBOARD_IMAGE_URL=matters-billboard-ad-dev.s3.ap-southeast-1.amazonaws.com/
 DEBUG=false
 PLAYWRIGHT_RUNTIME_ENV=ci
 PLAYWRIGHT_TEST_BASE_URL=https://web-develop.matters.town

.env.local.example

@@ -29,6 +29,9 @@ NEXT_PUBLIC_TRAVELOGGERS_URL=https://nft-develop.matters.town
 NEXT_PUBLIC_LOGBOOKS_URL=https://logbooks-vercel.matters.town
 NEXT_PUBLIC_ALCHEMY_KEY=1dMo8xjAFo8M6Y4sQ45WTD3Zie2-MA4C
 NEXT_PUBLIC_NOMAD_MATTERS_CAMPAIGN_LINK=/@rsdyobw/22048-launching-the-nomad-matters-initiative
+NEXT_PUBLIC_BILLBOARD_ADDRESS=0x6a72820E1CCCba1B1FE02E37881cEa3F9Aa6375C
+NEXT_PUBLIC_BILLBOARD_TOKEN_ID=1
+NEXT_PUBLIC_BILLBOARD_IMAGE_URL=matters-billboard-ad-dev.s3.ap-southeast-1.amazonaws.com/
 DEBUG=false
 PLAYWRIGHT_RUNTIME_ENV=local
 PLAYWRIGHT_TEST_BASE_URL=https://web-develop.matters.town

.env.prod

@@ -35,3 +35,6 @@ NEXT_PUBLIC_TWITTER_CLIENT_ID=cmdKbUlyd1ZZZDZYa3dTampidGo6MTpjaQ
 NEXT_PUBLIC_FACEBOOK_CLIENT_ID=687698420193159
 NEXT_PUBLIC_NOMAD_MATTERS_CAMPAIGN_LINK_EN=/@hi176/476405-a-guide-to-invite
 NEXT_PUBLIC_NOMAD_MATTERS_CAMPAIGN_LINK=/@hi176/476404
+NEXT_PUBLIC_BILLBOARD_ADDRESS=0x88EA16c2a69f50B9bc2E8f7684D425f33f29225F
+NEXT_PUBLIC_BILLBOARD_TOKEN_ID=1
+NEXT_PUBLIC_BILLBOARD_IMAGE_URL=matters-billboard-ad.s3.ap-southeast-1.amazonaws.com/

lang/default.json

@@ -271,6 +271,10 @@
   "4l6vz1": {
     "defaultMessage": "Copy"
   },
+  "4wOWfp": {
+    "defaultMessage": "What's this?",
+    "description": "src/components/Billboard/index.tsx"
+  },
   "50cquj": {
     "defaultMessage": "No discussion yet",
     "description": "src/views/Circle/Discussion/Discussion.tsx"
@@ -590,6 +594,10 @@
     "defaultMessage": "bookmarked",
     "description": "src/components/Notice/ArticleNotice/ArticleNewSubscriberNotice.tsx"
   },
+  "CNrhz9": {
+    "defaultMessage": "What is Billboard?",
+    "description": "src/components/Dialogs/BillboardDialog/Content.tsx"
+  },
   "Cdkhl8": {
     "defaultMessage": "Delete {commentType}",
     "description": "src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx"
@@ -970,6 +978,10 @@
     "defaultMessage": "followers",
     "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
   },
+  "MP6xe/": {
+    "defaultMessage": "Billboard is an open and rentable on-chain NFT advertising protocol. Once a rental is completed, the content can be displayed for 14 days. The rental fee is calculated based on the concept of the Harberger tax, and the generated rental income is distributed to the community creators through quadratic funding. Please check out our {announcements}.",
+    "description": "src/components/Dialogs/BillboardDialog/Content.tsx"
+  },
   "MPEeBy": {
     "defaultMessage": "Operation failed, please try again later.",
     "description": "ACTION_FAILED"
@@ -2028,6 +2040,10 @@
     "defaultMessage": "Log in",
     "description": "src/components/Buttons/Login/index.tsx"
   },
+  "stTITI": {
+    "defaultMessage": "announcements",
+    "description": "src/components/Dialogs/BillboardDialog/Content.tsx"
+  },
   "sy+pv5": {
     "defaultMessage": "Email"
   },
@@ -2164,6 +2180,10 @@
   "wbcwKd": {
     "defaultMessage": "View All"
   },
+  "wdz6Pf": {
+    "defaultMessage": "Learn more",
+    "description": "src/components/Dialogs/BillboardDialog/Content.tsx"
+  },
   "wm9xNB": {
     "defaultMessage": "{type} disconnected",
     "description": "src/components/Dialogs/RemoveSocialLoginDialog/Content.tsx"

lang/en.json

@@ -271,6 +271,10 @@
   "4l6vz1": {
     "defaultMessage": "Copy"
   },
+  "4wOWfp": {
+    "defaultMessage": "What's this?",
+    "description": "src/components/Billboard/index.tsx"
+  },
   "50cquj": {
     "defaultMessage": "No discussion yet",
     "description": "src/views/Circle/Discussion/Discussion.tsx"
@@ -590,6 +594,10 @@
     "defaultMessage": "bookmarked",
     "description": "src/components/Notice/ArticleNotice/ArticleNewSubscriberNotice.tsx"
   },
+  "CNrhz9": {
+    "defaultMessage": "What is Billboard?",
+    "description": "src/components/Dialogs/BillboardDialog/Content.tsx"
+  },
   "Cdkhl8": {
     "defaultMessage": "Delete {commentType}",
     "description": "src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx"
@@ -970,6 +978,10 @@
     "defaultMessage": "followers",
     "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
   },
+  "MP6xe/": {
+    "defaultMessage": "Billboard is an open and rentable on-chain NFT advertising protocol. Once a rental is completed, the content can be displayed for 14 days. The rental fee is calculated based on the concept of the Harberger tax, and the generated rental income is distributed to the community creators through quadratic funding. Please check out our {announcements}.",
+    "description": "src/components/Dialogs/BillboardDialog/Content.tsx"
+  },
   "MPEeBy": {
     "defaultMessage": "Operation failed, please try again later.",
     "description": "ACTION_FAILED"
@@ -2028,6 +2040,10 @@
     "defaultMessage": "Log in",
     "description": "src/components/Buttons/Login/index.tsx"
   },
+  "stTITI": {
+    "defaultMessage": "announcements",
+    "description": "src/components/Dialogs/BillboardDialog/Content.tsx"
+  },
   "sy+pv5": {
     "defaultMessage": "Email"
   },
@@ -2164,6 +2180,10 @@
   "wbcwKd": {
     "defaultMessage": "View All"
   },
+  "wdz6Pf": {
+    "defaultMessage": "Learn more",
+    "description": "src/components/Dialogs/BillboardDialog/Content.tsx"
+  },
   "wm9xNB": {
     "defaultMessage": "{type} disconnected",
     "description": "src/components/Dialogs/RemoveSocialLoginDialog/Content.tsx"

lang/zh-Hans.json

@@ -271,6 +271,10 @@
   "4l6vz1": {
     "defaultMessage": "复制"
   },
+  "4wOWfp": {
+    "defaultMessage": "这是什么？",
+    "description": "src/components/Billboard/index.tsx"
+  },
   "50cquj": {
     "defaultMessage": "还没有众聊",
     "description": "src/views/Circle/Discussion/Discussion.tsx"
@@ -590,6 +594,10 @@
     "defaultMessage": "收藏了",
     "description": "src/components/Notice/ArticleNotice/ArticleNewSubscriberNotice.tsx"
   },
+  "CNrhz9": {
+    "defaultMessage": "什么是社区公告栏（Billboard）？",
+    "description": "src/components/Dialogs/BillboardDialog/Content.tsx"
+  },
   "Cdkhl8": {
     "defaultMessage": "刪除{commentType}",
     "description": "src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx"
@@ -970,6 +978,10 @@
     "defaultMessage": "人",
     "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
   },
+  "MP6xe/": {
+    "defaultMessage": "Billboard 是一个公开且可付费租借的链上 NFT 广告协议。租借成功后，可以进行14天的内容投放。租借费用基于哈柏格税概念计算，产生的租借收入将以二次方配捐方式回馈给社区创作者。更多详情请查看{announcements}。",
+    "description": "src/components/Dialogs/BillboardDialog/Content.tsx"
+  },
   "MPEeBy": {
     "defaultMessage": "操作失败，请稍候重试",
     "description": "ACTION_FAILED"
@@ -2028,6 +2040,10 @@
     "defaultMessage": "登录",
     "description": "src/components/Buttons/Login/index.tsx"
   },
+  "stTITI": {
+    "defaultMessage": "社区公告",
+    "description": "src/components/Dialogs/BillboardDialog/Content.tsx"
+  },
   "sy+pv5": {
     "defaultMessage": "邮箱"
   },
@@ -2164,6 +2180,10 @@
   "wbcwKd": {
     "defaultMessage": "查看全部"
   },
+  "wdz6Pf": {
+    "defaultMessage": "了解更多",
+    "description": "src/components/Dialogs/BillboardDialog/Content.tsx"
+  },
   "wm9xNB": {
     "defaultMessage": "{type} 已解绑",
     "description": "src/components/Dialogs/RemoveSocialLoginDialog/Content.tsx"

lang/zh-Hant.json

@@ -271,6 +271,10 @@
   "4l6vz1": {
     "defaultMessage": "複製"
   },
+  "4wOWfp": {
+    "defaultMessage": "這是什麼？",
+    "description": "src/components/Billboard/index.tsx"
+  },
   "50cquj": {
     "defaultMessage": "還沒有眾聊",
     "description": "src/views/Circle/Discussion/Discussion.tsx"
@@ -590,6 +594,10 @@
     "defaultMessage": "收藏了",
     "description": "src/components/Notice/ArticleNotice/ArticleNewSubscriberNotice.tsx"
   },
+  "CNrhz9": {
+    "defaultMessage": "什麼是社區公告欄（Billboard）？",
+    "description": "src/components/Dialogs/BillboardDialog/Content.tsx"
+  },
   "Cdkhl8": {
     "defaultMessage": "刪除{commentType}",
     "description": "src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx"
@@ -970,6 +978,10 @@
     "defaultMessage": "人",
     "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
   },
+  "MP6xe/": {
+    "defaultMessage": "Billboard 是一個公開且可付費租借的鏈上 NFT 廣告協議。租借成功後，可進行 14 天的內容投放。租借費用基於哈柏格稅概念計算，產生的租借收入將以二次方配捐方式回饋給社區創作者。更多詳情請查看{announcements}。",
+    "description": "src/components/Dialogs/BillboardDialog/Content.tsx"
+  },
   "MPEeBy": {
     "defaultMessage": "操作失敗，請稍候重試",
     "description": "ACTION_FAILED"
@@ -2028,6 +2040,10 @@
     "defaultMessage": "登入",
     "description": "src/components/Buttons/Login/index.tsx"
   },
+  "stTITI": {
+    "defaultMessage": "社區公告",
+    "description": "src/components/Dialogs/BillboardDialog/Content.tsx"
+  },
   "sy+pv5": {
     "defaultMessage": "電子郵件"
   },
@@ -2164,6 +2180,10 @@
   "wbcwKd": {
     "defaultMessage": "查看全部"
   },
+  "wdz6Pf": {
+    "defaultMessage": "瞭解更多",
+    "description": "src/components/Dialogs/BillboardDialog/Content.tsx"
+  },
   "wm9xNB": {
     "defaultMessage": "{type} 已解綁",
     "description": "src/components/Dialogs/RemoveSocialLoginDialog/Content.tsx"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "4.29.1",
+  "version": "4.30.0",
   "description": "codebase of Matters' website",
   "author": "Matters <hi@matters.town>",
   "engines": {

src/common/enums/csp.ts

@@ -89,6 +89,9 @@ const IMG_SRC = [
 
   // WalletConnect
   '*.walletconnect.com',
+
+  // Billboard
+  process.env.NEXT_PUBLIC_BILLBOARD_IMAGE_URL,
 ]
 
 const MEDIA_SRC = IMG_SRC

src/common/utils/abis/billboard.ts

@@ -0,0 +1,53 @@
+export const BillboardABI = [
+  {
+    inputs: [
+      {
+        internalType: 'uint256',
+        name: 'tokenId_',
+        type: 'uint256',
+      },
+    ],
+    name: 'getBoard',
+    outputs: [
+      {
+        components: [
+          {
+            internalType: 'address',
+            name: 'creator',
+            type: 'address',
+          },
+          {
+            internalType: 'string',
+            name: 'name',
+            type: 'string',
+          },
+          {
+            internalType: 'string',
+            name: 'description',
+            type: 'string',
+          },
+          {
+            internalType: 'string',
+            name: 'location',
+            type: 'string',
+          },
+          {
+            internalType: 'string',
+            name: 'contentURI',
+            type: 'string',
+          },
+          {
+            internalType: 'string',
+            name: 'redirectURI',
+            type: 'string',
+          },
+        ],
+        internalType: 'struct IBillboardRegistry.Board',
+        name: 'board',
+        type: 'tuple',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+] as const

src/common/utils/abis/index.ts

@@ -1,2 +1,3 @@
+export * from './billboard'
 export * from './curation'
 export * from './ensPublicResolver'

src/common/utils/analytics.ts

@@ -37,6 +37,8 @@ type EventArgs =
   | ['tag_exposure', TagExposureProp]
   | ['image_upload', ImageUploadProp]
   | ['authenticate', AuthenticateProp]
+  | ['billboard_exposure', BillboardExposureProp]
+  | ['click_billboard', ClickBillboardProp]
 
 /**
  * Event: Page View
@@ -176,6 +178,18 @@ interface TagExposureProp {
   delay_msecs?: number
 }
 
+interface BillboardExposureProp {
+  id: number
+  type: string
+  delay_msecs?: number
+}
+
+interface ClickBillboardProp {
+  id: number
+  type: string
+  target: string
+}
+
 interface ImageUploadProp {
   uploadURL: string
   type: string

src/common/utils/wallet.ts

@@ -18,6 +18,7 @@ const isProd = process.env.NEXT_PUBLIC_RUNTIME_ENV === 'production'
 const alchemyId = process.env.NEXT_PUBLIC_ALCHEMY_KEY!
 
 export const featureSupportedChains = {
+  billboard: isProd ? [optimism] : [optimismSepolia],
   curation: isProd ? [optimism] : [optimismSepolia],
   ens: isProd ? [mainnet] : [goerli],
 }