Feat/nostr/community

.env

@@ -1,3 +1,5 @@
 SASS_PATH=node_modules:src/styles
 # Docker Compose
-COMPOSE_PROJECT_NAME=localterra
+COMPOSE_PROJECT_NAME=localterra
+
+REACT_APP_GIPHY_KEY=Kal3vjWQLATLG64m1qPvSqYYc4XI6Wsv

package.json

@@ -4,7 +4,7 @@
   "hompage": "https://station.money",
   "author": "Terra <[email protected]> (https://station.money)",
   "repository": "github:terra-money/station",
-  "version": "7.3.4",
+  "version": "7.3.5",
   "license": "MIT",
   "scripts": {
     "start": "echo \"$CF_PAGES_COMMIT_SHA\" > public/commit_hash && react-scripts start",
@@ -20,35 +20,63 @@
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^2.0.0",
-    "@anchor-protocol/anchor.js": "^5.1.1",
+    "@dicebear/collection": "^7.0.1",
+    "@emoji-mart/data": "^1.1.2",
+    "@emoji-mart/react": "^1.1.1",
+    "@giphy/js-types": "^4.4.0",
+    "@giphy/react-components": "^9.0.1",
     "@ledgerhq/hw-transport-web-ble": "^6.27.1",
     "@mui/icons-material": "^5.8.0",
     "@mui/material": "^5.9.1",
+    "@noble/curves": "^1.2.0",
+    "@noble/secp256k1": "^2.0.0",
     "@sentry/react": "^7.53.1",
     "@terra-money/feather.js": "^1.0.11",
     "@terra-money/ledger-station-js": "^1.3.8",
     "@terra-money/log-finder-ruleset": "^3.0.3",
     "@terra-money/msg-reader": "^3.0.1",
+    "@terra-money/nostr-tools": "^1.10.4",
     "@terra-money/station-connector": "^1.0.5",
     "@terra-money/terra-station-mobile": "^1.0.12",
     "@terra-money/terra-utils": "^1.0.9",
     "@terra-money/terra.js": "^3.1.9",
     "@terra-money/terra.proto": "^2.0.0",
     "@terra-money/wallet-kit": "^1.0.15",
     "@tippyjs/react": "^4.2.6",
+    "@tiptap/extension-document": "^2.1.10",
+    "@tiptap/extension-history": "^2.1.10",
+    "@tiptap/extension-mention": "^2.1.10",
+    "@tiptap/extension-paragraph": "^2.1.10",
+    "@tiptap/extension-text": "^2.1.10",
+    "@tiptap/react": "^2.1.8",
+    "@tiptap/suggestion": "^2.1.8",
+    "@types/lodash.chunk": "^4.2.7",
+    "@types/lodash.toarray": "^4.4.7",
+    "@types/lodash.uniq": "^4.5.7",
     "axios": "^0.27.2",
     "bech32": "^2.0.0",
     "bignumber.js": "^9.0.2",
     "buffer": "^6.0.3",
     "classnames": "^2.3.2",
+    "comlink": "^4.4.1",
     "crypto-js": "^4.1.1",
     "date-fns": "^2.28.0",
+    "emoji-mart": "^5.5.2",
     "i18next": "^21.8.14",
     "i18next-browser-languagedetector": "^6.1.4",
     "immutability-helper": "^3.1.1",
+    "joi": "^17.11.0",
+    "jotai": "^2.4.2",
     "js-base64": "^3.7.2",
     "keccak256": "^1.0.6",
+    "linkify-react": "^4.1.1",
+    "lodash.chunk": "^4.2.0",
+    "lodash.isequal": "^4.5.0",
+    "lodash.toarray": "^4.4.0",
+    "lodash.uniq": "^4.5.0",
+    "lodash.uniqby": "^4.7.0",
     "lottie-react": "^2.3.1",
+    "moment": "^2.29.4",
     "numeral": "^2.0.6",
     "prettier": "^2.6.2",
     "qrcode.react": "^3.1.0",
@@ -62,17 +90,24 @@
     "react-modal": "^3.15.1",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.15.0",
+    "react-string-replace": "^1.1.1",
     "recharts": "^2.1.16",
     "recoil": "^0.7.2",
     "sass": "^1.52.1",
     "secp256k1": "^4.0.3",
     "semver": "^7.5.2",
     "sentence-case": "^3.0.4",
+    "webpack": "^4.44.2",
     "xss": "1.0.11"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
     "@types/crypto-js": "^4.1.1",
     "@types/jest": "^27.5.1",
+    "@types/lodash.isequal": "^4.5.6",
+    "@types/lodash.uniqby": "^4.7.7",
     "@types/node": "^17.0.35",
     "@types/numeral": "^2.0.2",
     "@types/qrcode.react": "^1.0.2",
@@ -107,14 +142,10 @@
   },
   "browserslist": {
     "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
+      "defaults"
     ],
     "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
+      "defaults"
     ]
   }
 }

src/app/electron.tsx

@@ -1,7 +1,22 @@
+import { Event } from "@terra-money/nostr-tools"
+import { RelayDict } from "types/nostr"
+import Raven from "utils/nostr/raven"
+
 declare global {
   interface Window {
     require: NodeRequire
     electron: any
+    raven: Raven | undefined
+    nostr?: {
+      getPublicKey: () => Promise<string>
+      signEvent: (event: Event) => Promise<Event>
+      getRelays: () => Promise<RelayDict>
+      nip04: {
+        encrypt: (pubkey: string, content: string) => Promise<string>
+        decrypt: (pubkey: string, content: string) => Promise<string>
+      }
+    }
+    requestPrivateKey: (data?: any) => Promise<string>
   }
 }
 

src/app/routes.tsx

@@ -50,6 +50,8 @@ import Labs from "pages/labs/Labs"
 /* 404 */
 import NotFound from "pages/NotFound"
 import DonateAllVestingTokensTx from "txs/stake/DonateAllVestingTokensTx"
+import { Group } from "@mui/icons-material"
+import { Community } from "pages/community/Community"
 
 const ICON_SIZE = { width: 20, height: 20 }
 
@@ -82,6 +84,12 @@ export const useNav = () => {
       title: t("Governance"),
       icon: <GovernanceIcon {...ICON_SIZE} />,
     },
+    {
+      path: "/community",
+      element: <Community />,
+      title: t("Community"),
+      icon: <Group {...ICON_SIZE} />,
+    },
     ...(devMode
       ? [
           {
@@ -129,6 +137,9 @@ export const useNav = () => {
     //{ path: "/network/new", element: <AddNetworkPage /> },
     { path: "/settings", element: <Settings /> },
 
+    /* community */
+    { path: "/community", element: <Community /> },
+
     /* dev */
     { path: "/labs", element: <Labs /> },
 

src/components/channel/Channel.module.scss

@@ -0,0 +1,4 @@
+.ChannelView {
+  display: grid;
+  grid-auto-flow: column;
+}

src/components/channel/chat-input/ChatInput.module.scss

@@ -0,0 +1,35 @@
+.ChatInputWrapper {
+  margin: 14px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  border-radius: var(--border-radius);
+  background-color: var(--bg-muted);
+}
+
+.ChatInput {
+  padding: 1em;
+}
+
+.ToolsWrapper {
+  padding-left: 12px;
+  display: flex;
+  align-items: center;
+  gap: 0.75em;
+}
+
+.ChatActions {
+  border-top: 1px solid var(--input-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px;
+  height: 60px;
+}
+.EditorContent {
+  padding: 1em;
+}
+
+.SendButton {
+  height: 38px;
+  min-width: 100px;
+}

src/components/channel/chat-input/editor/index.tsx

@@ -0,0 +1,133 @@
+import { useRef } from "react"
+import { Extension, ReactRenderer, useEditor } from "@tiptap/react"
+import Document from "@tiptap/extension-document"
+import Paragraph from "@tiptap/extension-paragraph"
+import Text from "@tiptap/extension-text"
+import History from "@tiptap/extension-history"
+import { Mention } from "@tiptap/extension-mention"
+import tippy, { GetReferenceClientRect, Instance } from "tippy.js"
+import { SuggestionProps } from "@tiptap/suggestion"
+import { MentionListRef } from "./types"
+import MentionList from "./mention-list"
+
+const useMakeEditor = ({
+  content,
+  onUpdate,
+}: {
+  content: string
+  onUpdate: () => void
+}) => {
+  const reactRenderer = useRef<ReactRenderer<MentionListRef> | null>(null)
+  let saveTimer: any = null
+
+  return useEditor({
+    extensions: [
+      Document,
+      Paragraph,
+      Text,
+      History,
+      Extension.create({
+        name: "ShiftEnterExtension",
+        addKeyboardShortcuts() {
+          return {
+            "Shift-Enter": () =>
+              this.editor.commands.first(({ commands }) => [
+                () => commands.createParagraphNear(),
+                () => commands.liftEmptyBlock(),
+                () => commands.splitBlock(),
+              ]),
+            Enter: () => true,
+          }
+        },
+      }),
+      Mention.configure({
+        HTMLAttributes: {
+          class: "mention",
+        },
+        renderLabel({ options, node }) {
+          const label = (options?.suggestion?.char as string) || ""
+          return `${label}${String(node?.attrs?.label)}`
+        },
+        suggestion: {
+          render: () => {
+            let popup: Instance[]
+
+            return {
+              onStart: (
+                props: Pick<SuggestionProps, "editor" | "clientRect">
+              ) => {
+                reactRenderer.current = new ReactRenderer(MentionList, {
+                  props,
+                  editor: props.editor,
+                })
+
+                if (!props.clientRect) {
+                  return
+                }
+
+                popup = tippy("body", {
+                  getReferenceClientRect:
+                    props.clientRect as GetReferenceClientRect,
+                  appendTo: () => document.body,
+                  content: reactRenderer.current.element,
+                  showOnCreate: true,
+                  interactive: true,
+                  trigger: "manual",
+                  placement: "top-start",
+                })
+              },
+              onUpdate(props: Pick<SuggestionProps, "clientRect">) {
+                if (reactRenderer.current) {
+                  reactRenderer.current.updateProps(props)
+                }
+
+                if (!props.clientRect) {
+                  return
+                } else {
+                  popup[0].setProps({
+                    getReferenceClientRect:
+                      props.clientRect as GetReferenceClientRect,
+                  })
+                }
+              },
+              onKeyDown(props: { event: KeyboardEvent }) {
+                props.event.stopPropagation()
+                if (props.event.key === "Escape") {
+                  popup[0].hide()
+
+                  return true
+                }
+
+                if (reactRenderer.current && reactRenderer.current.ref) {
+                  return reactRenderer.current.ref?.onKeyDown(props)
+                } else {
+                  return false
+                }
+              },
+              onExit() {
+                if (popup) {
+                  popup[0]?.destroy()
+                }
+                setTimeout(() => {
+                  if (reactRenderer.current) {
+                    reactRenderer.current.destroy()
+                  }
+                  reactRenderer.current = null
+                }, 0)
+              },
+            }
+          },
+        },
+      }),
+    ],
+    content: content,
+    onUpdate: () => {
+      clearTimeout(saveTimer)
+      saveTimer = setTimeout(() => {
+        onUpdate()
+      }, 200)
+    },
+  })
+}
+
+export default useMakeEditor