WIP: Ylide forum (#1365)

* Initial

* update envs

* Update dev.preset.sh

* Update dev.preset.sh

* Update .env.eth

* filters, sortings, chats

* editorjs for new threads

* walletconnect + evm chains switching

* small fixes before mobile

* Mobile version + tags + txDiscuss/addressDiscuss + bookmarks

* bookmarks/watches/addrdiscuss/txdiscuss/tags

* realtime chats + watched/bookmarked topics/threads

* fix for single child of popovertrigger

* bookmark/watch in Thread, replies reload, fix tags selection

* scroll on reply

* Chats v2

* chats switches chain + back-arrow in bookmarks/watches

* remove Create Thread from txs/addrs topics

* Chats list -> Chats everywhere

* Errors in chats + no watches for accountpopover

* only evm chats

* telegram pushes on watches + pagination fixes

* remote three dots from replies

* fixes

* Envs for forum & CI

* Forum Env variables for CI

* Add forum env variables for validation

* Fix metadata for forum routes

* TS fix on getPageType.ts

* Fix default eth envs + fix fetch types for address verificaion

.vscode/settings.json

@@ -1,3 +1,6 @@
 {
-    "typescript.tsdk": "node_modules/typescript/lib"
+    "typescript.tsdk": "node_modules/typescript/lib",
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true
+    }
 }

configs/app/features/forum.ts

@@ -0,0 +1,32 @@
+import type { Feature } from './types';
+
+import stripTrailingSlash from 'lib/stripTrailingSlash';
+
+import { getEnvValue } from '../utils';
+
+const indexerUrl = stripTrailingSlash(getEnvValue('NEXT_PUBLIC_FORUM_INDEXER_URL') || '') || null;
+const walletConnectProjectId = getEnvValue('NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID') || '';
+
+const title = 'Forum';
+
+const config: Feature<{ indexerUrl: string; walletConnectProjectId: string }> = (() => {
+  if (
+    getEnvValue('NEXT_PUBLIC_IS_FORUM_SUPPORTED') === 'true' &&
+    indexerUrl &&
+    walletConnectProjectId
+  ) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      walletConnectProjectId,
+      indexerUrl,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;

configs/app/features/index.ts

@@ -6,6 +6,7 @@ export { default as beaconChain } from './beaconChain';
 export { default as bridgedTokens } from './bridgedTokens';
 export { default as blockchainInteraction } from './blockchainInteraction';
 export { default as csvExport } from './csvExport';
+export { default as forum } from './forum';
 export { default as googleAnalytics } from './googleAnalytics';
 export { default as graphqlApiDocs } from './graphqlApiDocs';
 export { default as marketplace } from './marketplace';

configs/envs/.env.eth

@@ -45,3 +45,8 @@ NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
 
 #meta
 NEXT_PUBLIC_OG_IMAGE_URL=https://github.com/blockscout/frontend-configs/blob/main/configs/og-images/eth.jpg?raw=true
+
+# ylide
+NEXT_PUBLIC_IS_FORUM_SUPPORTED=true
+NEXT_PUBLIC_FORUM_INDEXER_URL=https://forum-blockscout.ylide.io
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=e9deead089b3383b2db777961e3fa244

deploy/tools/envs-validator/schema.ts

@@ -182,6 +182,19 @@ const sentrySchema = yup
       }),
   });
 
+const ylideSchema = yup
+  .object()
+  .shape({
+    NEXT_PUBLIC_IS_FORUM_SUPPORTED: yup.boolean(),
+    NEXT_PUBLIC_FORUM_INDEXER_URL: yup
+      .string()
+      .when('NEXT_PUBLIC_IS_FORUM_SUPPORTED', {
+        is: (value: boolean) => value,
+        then: (schema) => schema.test(urlTest).required(),
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_FORUM_INDEXER_URL cannot not be used if NEXT_PUBLIC_IS_FORUM_SUPPORTED is not set to "true"'),
+      }),
+  });
+
 const accountSchema = yup
   .object()
   .shape({
@@ -453,6 +466,7 @@ const schema = yup
     NEXT_PUBLIC_USE_NEXT_JS_PROXY: yup.boolean(),
   })
   .concat(accountSchema)
+  .concat(ylideSchema)
   .concat(adsBannerSchema)
   .concat(marketplaceSchema)
   .concat(rollupSchema)

deploy/tools/envs-validator/test/.env.base

@@ -50,4 +50,7 @@ NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS=['fee_per_gas']
 NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS=['value','fee_currency','gas_price','tx_fee','gas_fees','burnt_fees']
 NEXT_PUBLIC_VISUALIZE_API_HOST=https://example.com
 NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET=false
-NEXT_PUBLIC_WEB3_WALLETS=['coinbase','metamask','token_pocket']
+NEXT_PUBLIC_WEB3_WALLETS=['coinbase','metamask','token_pocket']
+NEXT_PUBLIC_IS_FORUM_SUPPORTED=true
+NEXT_PUBLIC_FORUM_INDEXER_URL=https://forum-blockscout.ylide.io
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=e9deead089b3383b2db777961e3fa244

deploy/values/l2-optimism-goerli/values.yaml

@@ -194,6 +194,8 @@ frontend:
     NEXT_PUBLIC_L1_BASE_URL: https://eth-goerli.blockscout.com/
     NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL: https://app.optimism.io/bridge/withdraw
     NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62
+    NEXT_PUBLIC_IS_FORUM_SUPPORTED: true
+    NEXT_PUBLIC_FORUM_INDEXER_URL: https://forum-blockscout.ylide.io
   envFromSecret:
     NEXT_PUBLIC_AUTH0_CLIENT_ID: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_AUTH0_CLIENT_ID
     NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID

deploy/values/main/values.yaml

@@ -160,6 +160,9 @@ frontend:
     NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
     NEXT_PUBLIC_WEB3_WALLETS: "['token_pocket','coinbase','metamask']"
     NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES: "[{'name':'LooksRare','collection_url':'https://goerli.looksrare.org/collections/{hash}','instance_url':'https://goerli.looksrare.org/collections/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/looks-rare.png'}]"
+
+    NEXT_PUBLIC_IS_FORUM_SUPPORTED: true
+    NEXT_PUBLIC_FORUM_INDEXER_URL: https://forum-blockscout.ylide.io
   envFromSecret:
     NEXT_PUBLIC_SENTRY_DSN: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_SENTRY_DSN
     SENTRY_CSP_REPORT_URI: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/SENTRY_CSP_REPORT_URI

deploy/values/review-l2/values.yaml.gotmpl

@@ -69,6 +69,8 @@ frontend:
     NEXT_PUBLIC_L1_BASE_URL: https://blockscout-main.k8s-dev.blockscout.com
     NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62
     NEXT_PUBLIC_USE_NEXT_JS_PROXY: true
+    NEXT_PUBLIC_IS_FORUM_SUPPORTED: true
+    NEXT_PUBLIC_FORUM_INDEXER_URL: https://forum-blockscout.ylide.io
   envFromSecret:
     NEXT_PUBLIC_SENTRY_DSN: ref+vault://deployment-values/blockscout/dev/review-l2?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_SENTRY_DSN
     SENTRY_CSP_REPORT_URI: ref+vault://deployment-values/blockscout/dev/review-l2?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/SENTRY_CSP_REPORT_URI

deploy/values/review/values.yaml.gotmpl

@@ -74,6 +74,8 @@ frontend:
     OTEL_SDK_ENABLED: true
     OTEL_EXPORTER_OTLP_ENDPOINT: http://jaeger-collector.jaeger.svc.cluster.local:4318
     NEXT_OTEL_VERBOSE: 1
+    NEXT_PUBLIC_IS_FORUM_SUPPORTED: true
+    NEXT_PUBLIC_FORUM_INDEXER_URL: https://forum-blockscout.ylide.io
   envFromSecret:
     NEXT_PUBLIC_SENTRY_DSN: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_SENTRY_DSN
     SENTRY_CSP_REPORT_URI: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/SENTRY_CSP_REPORT_URI

docs/ENVS.md

@@ -50,6 +50,7 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
   - [SUAVE chain](ENVS.md#suave-chain)
   - [Sentry error monitoring](ENVS.md#sentry-error-monitoring)
   - [OpenTelemetry](ENVS.md#opentelemetry)
+  - [Ylide Forum](ENVS.md#ylide)
 - [3rd party services configuration](ENVS.md#external-services-configuration)
 
  
@@ -547,6 +548,18 @@ OpenTelemetry SDK for Node.js app could be enabled by passing `OTEL_SDK_ENABLED=
 
  
 
+### Ylide Forum
+
+Decenrtalized forum feature could be enabled by passing `NEXT_PUBLIC_IS_FORUM_SUPPORTED=true` variable. After deploying the forum indexer Docker image, you should pass the public url of backend API to the variable `NEXT_PUBLIC_FORUM_INDEXER_URL` (without trailing slash). If you want to support WalletConnect protocol for authorization, please, kindly sign up in the [Wallet Connect Cloud](https://cloud.walletconnect.com/sign-in) and provide the WalletConnect project ID to the `NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID` variable.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value |
+| --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_IS_FORUM_SUPPORTED | `boolean` | Flag to enable the feature | Required | `false` | `true` |
+| NEXT_PUBLIC_FORUM_INDEXER_URL | `string` | URL of the forum public indexer | Optional | `` | `https://forum-blockscout.ylide.io` |
+| NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID | `string` | Flag to enable the feature | Optional | `` | `e9deead089b3383b2db777961e3fa244` |
+
+ 
+
 ## External services configuration
 
 ### Google ReCaptcha

jest/lib.tsx

@@ -6,9 +6,9 @@ import React from 'react';
 
 import { AppContextProvider } from 'lib/contexts/app';
 import { ScrollDirectionProvider } from 'lib/contexts/scrollDirection';
+import { YlideProvider } from 'lib/contexts/ylide';
 import { SocketProvider } from 'lib/socket/context';
 import theme from 'theme';
-
 import 'lib/setLocale';
 
 const PAGE_PROPS = {
@@ -19,6 +19,8 @@ const PAGE_PROPS = {
   hash: '',
   number: '',
   q: '',
+  topic: '',
+  thread: '',
 };
 
 const TestApp = ({ children }: {children: React.ReactNode}) => {
@@ -37,7 +39,9 @@ const TestApp = ({ children }: {children: React.ReactNode}) => {
         <AppContextProvider pageProps={ PAGE_PROPS }>
           <ScrollDirectionProvider>
             <SocketProvider>
-              { children }
+              <YlideProvider>
+                { children }
+              </YlideProvider>
             </SocketProvider>
           </ScrollDirectionProvider>
         </AppContextProvider>

lib/ago.ts

@@ -0,0 +1,20 @@
+export default function ago(timestamp: number, now = Date.now()) {
+  const seconds = Math.floor((now - timestamp) / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (seconds < 60) {
+    return `${ seconds } second${ seconds === 1 ? '' : 's' } ago`;
+  }
+
+  if (minutes < 60) {
+    return `${ minutes } minute${ minutes === 1 ? '' : 's' } ago`;
+  }
+
+  if (hours < 24) {
+    return `${ hours } hour${ hours === 1 ? '' : 's' } ago`;
+  }
+
+  return `${ days } day${ days === 1 ? '' : 's' } ago`;
+}