tmp

.dockerignore

@@ -0,0 +1,8 @@
+**/node_modules/
+.github/
+.vscode/
+**/build/
+yarn-error.log
+.husky/
+.git/
+**/dist/

.drone.yml

@@ -1,142 +0,0 @@
----
-kind: pipeline
-type: kubernetes
-name: docker
-concurrency:
-  limit: 1
-trigger:
-  branch:
-  - main
-metadata:
-  namespace: git
-steps:
-  - name: Build site
-    image: node:current-bullseye
-    volumes:
-      - name: cache
-        path: /cache
-    environment:
-      YARN_CACHE_FOLDER: /cache/.yarn-docker
-    commands:
-      - yarn install
-      - yarn build
-  - name: build docker image
-    image: r.j3ss.co/img
-    privileged: true
-    volumes:
-      - name: cache
-        path: /cache
-    environment:
-      TOKEN:
-        from_secret: docker_hub
-    commands:
-      - img login -u voidic -p $TOKEN
-      - img build -t voidic/snort:latest --platform linux/amd64,linux/arm64 -f Dockerfile.prebuilt .
-      - img push voidic/snort:latest
-volumes:
-- name: cache
-  claim:
-    name: docker-cache
----
-kind: pipeline
-type: kubernetes
-name: test-lint
-concurrency:
-  limit: 1
-metadata:
-  namespace: git
-steps:
-  - name: Test/Lint
-    image: node:current-bullseye
-    volumes:
-      - name: cache
-        path: /cache
-    environment:
-      YARN_CACHE_FOLDER: /cache/.yarn-test
-    commands:
-      - yarn install
-      - yarn build
-      - yarn test
-      - yarn workspace @snort/app eslint
-      - yarn workspace @snort/app prettier --check .
-volumes:
-- name: cache
-  claim:
-    name: docker-cache
----
-kind: pipeline
-type: kubernetes
-name: crowdin
-concurrency:
-  limit: 1
-trigger:
-  branch:
-  - main
-metadata:
-  namespace: git
-steps:
-  - name: Push/Pull translations
-    image: node:current-bullseye
-    volumes:
-      - name: cache
-        path: /cache
-    environment:
-      YARN_CACHE_FOLDER: /cache/.yarn-translations
-      TOKEN:
-        from_secret: gitea
-      CTOKEN:
-        from_secret: crowdin
-    commands:
-      - git config --global user.email drone@v0l.io
-      - git config --global user.name "Drone CI"
-      - git remote set-url origin https://drone:$TOKEN@git.v0l.io/Kieran/snort.git
-      - yarn install
-      - npx @crowdin/cli upload sources -b main -T $CTOKEN
-      - npx @crowdin/cli pull -b main -T $CTOKEN
-      - yarn workspace @snort/app format
-      - git add .
-      - 'git commit -a -m "chore: Update translations"'
-      - git push -u origin main
-volumes:
-- name: cache
-  claim:
-    name: docker-cache
----
-kind: pipeline
-type: kubernetes
-name: docker-release
-concurrency:
-  limit: 1
-trigger:
-  event:
-  - tag
-metadata:
-  namespace: git
-steps:
-  - name: Build site
-    image: node:current-bullseye
-    volumes:
-      - name: cache
-        path: /cache
-    environment:
-      YARN_CACHE_FOLDER: /cache/.yarn-docker-release
-    commands:
-      - yarn install
-      - yarn build
-  - name: build docker image
-    image: r.j3ss.co/img
-    privileged: true
-    volumes:
-      - name: cache
-        path: /cache
-    environment:
-      TOKEN:
-        from_secret: docker_hub
-    commands:
-      - img login -u voidic -p $TOKEN
-      - img build -t voidic/snort:$DRONE_TAG --platform linux/amd64,linux/arm64 -f Dockerfile.prebuilt .
-      - img push voidic/snort:$DRONE_TAG
-volumes:
-- name: cache
-  claim:
-    name: docker-cache

.github/ISSUE_TEMPLATE/bug_report.md

@@ -7,11 +7,9 @@ assignees: ""
 ---
 
 **Describe the bug**
-
 A clear and concise description of what the bug is.
 
 **To Reproduce**
-
 Steps to reproduce the behavior:
 
 1. Go to '...'
@@ -20,25 +18,23 @@ Steps to reproduce the behavior:
 4. See error
 
 **Expected behavior**
-
 A clear and concise description of what you expected to happen.
 
 **Screenshots**
-
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
 
 - OS: [e.g. iOS]
-- Browser: [e.g. chrome, safari]
-- Version: [e.g. 22]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
 
 - Device: [e.g. iPhone6]
 - OS: [e.g. iOS8.1]
-- Browser: [e.g. stock browser, safari]
-- Version: [e.g. 22]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/workflows/docker.yaml

@@ -0,0 +1,27 @@
+name: Docker build
+on:
+  push:
+    branches: [main]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    concurrency:
+      group: ${{ github.ref }}
+      cancel-in-progress: true
+    steps:
+      - uses: actions/checkout@v2
+      - uses: docker/login-action@v1
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - uses: docker/setup-qemu-action@v2
+      - uses: docker/setup-buildx-action@v2
+      - name: Build the Docker image
+        run: | 
+          docker buildx build \
+          -t ghcr.io/${{ github.repository_owner }}/snort:latest \
+          --platform linux/amd64,linux/arm64 \
+          --cache-from "type=local,src=/tmp/.buildx-cache" \
+          --cache-to "type=local,dest=/tmp/.buildx-cache" \
+          --push .

.github/workflows/release.yml

@@ -47,4 +47,31 @@ jobs:
           releaseName: 'Snort v__VERSION__'
           releaseBody: 'See the assets to download and install this version.'
           releaseDraft: true
-          prerelease: false
+          prerelease: false
+  build_docker:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set env variables
+        run: echo "TAG=${GITHUB_REF/refs\/tags\//}" >> $GITHUB_ENV
+      - uses: actions/checkout@v2
+      - uses: actions/cache@v2
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-buildx-
+      - uses: docker/login-action@v1
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - uses: docker/setup-qemu-action@v2
+      - uses: docker/setup-buildx-action@v2
+      - name: Build the Docker image
+        run: |
+          docker buildx build \
+            -t ghcr.io/${{ github.repository_owner }}/snort:$TAG \
+            --cache-from "type=local,src=/tmp/.buildx-cache" \
+            --cache-to "type=local,dest=/tmp/.buildx-cache" \
+            --platform linux/amd64,linux/arm64 \
+            --push .

.github/workflows/test-lint.yaml

@@ -0,0 +1,24 @@
+name: Test+Lint
+on:
+  pull_request:
+jobs:
+  test_and_lint:
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: Install Dependencies
+        run: yarn install
+      - name: Build packages
+        run: yarn workspace @snort/nostr build
+      - name: Run tests
+        run: yarn workspace @snort/app test
+      - name: Check Eslint
+        run: yarn workspace @snort/app eslint
+      - name: Check Formatting
+        run: yarn workspace @snort/app prettier --check .

.gitignore

@@ -2,7 +2,3 @@ node_modules/
 .idea
 .yarn
 yarn.lock
-dist/
-*.tgz
-*.log
-.DS_Store

Dockerfile.prebuilt

@@ -1,3 +0,0 @@
-FROM nginx:mainline-alpine
-COPY packages/app/build /usr/share/nginx/html
-COPY docker/nginx.conf /etc/nginx/conf.d/default.conf

README.md

@@ -27,18 +27,14 @@ Snort supports the following NIP's:
 - [x] NIP-26: Delegated Event Signing (Display delegated signings only)
 - [x] NIP-27: Text note references (Parsing only)
 - [ ] NIP-28: Public Chat
-- [x] NIP-30: Custom Emoji
 - [x] NIP-36: Sensitive Content
 - [ ] NIP-40: Expiration Timestamp
 - [x] NIP-42: Authentication of clients to relays
-- [x] NIP-44: Versioned encryption
 - [x] NIP-50: Search
 - [x] NIP-51: Lists
 - [x] NIP-58: Badges
-- [x] NIP-59: Gift Wrap
 - [x] NIP-65: Relay List Metadata
 - [ ] NIP-78: App specific data
-- [x] NIP-102: Live Events
 
 ### Running
 

crowdin.yml

@@ -1,5 +1,5 @@
-project_id: 568149
+project_id: snort
 preserve_hierarchy: true
 files:
-  - source: packages/app/src/translations/en.json
-    translation: packages/app/src/translations/%locale_with_underscore%.json
+  - source: /packages/app/src/translations/en.json
+    translation: /packages/app/src/translations/%locale_with_underscore%.json

functions/e/[id].ts

@@ -10,7 +10,6 @@ export const onRequest: PagesFunction<Env> = async (context) => {
       method: "POST",
       body: await next.arrayBuffer(),
       headers: {
-        "user-agent": "Snort-Functions/1.0 (https://snort.social)",
         "content-type": "text/plain"
       }
     });

functions/p/[id].ts

@@ -10,7 +10,6 @@ export const onRequest: PagesFunction<Env> = async (context) => {
       method: "POST",
       body: await next.arrayBuffer(),
       headers: {
-        "user-agent": "Snort-Functions/1.0 (https://snort.social)",
         "content-type": "text/plain"
       }
     });

package.json

@@ -4,9 +4,8 @@
     "packages/*"
   ],
   "scripts": {
-    "build": "yarn workspace @snort/shared build && yarn workspace @snort/system build && yarn workspace @snort/system-react build && yarn workspace @snort/app build",
-    "start": "yarn workspace @snort/shared build && yarn workspace @snort/system build && yarn workspace @snort/system-react build && yarn workspace @snort/app start",
-    "test": "yarn workspace @snort/shared build && yarn workspace @snort/system build && yarn workspace @snort/app test && yarn workspace @snort/system test"
+    "build": "yarn workspace @snort/nostr build && yarn workspace @snort/app build",
+    "start": "yarn workspace @snort/nostr build && yarn workspace @snort/app start"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.2.3",

packages/app/.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": [["formatjs"]]
+}

packages/app/.eslintrc.cjs

@@ -3,11 +3,11 @@ module.exports = {
   parser: "@typescript-eslint/parser",
   plugins: ["@typescript-eslint"],
   root: true,
-  ignorePatterns: ["build/", "*.test.ts", "*.js"],
+  ignorePatterns: ["build/", "*.test.ts"],
   env: {
     browser: true,
     worker: true,
     commonjs: true,
-    node: false,
+    node: true,
   },
 };

packages/app/.gitignore

@@ -23,5 +23,3 @@ yarn-debug.log*
 yarn-error.log*
 
 .idea
-
-dist/

packages/app/_headers

@@ -1,2 +0,0 @@
-/*
-  Content-Security-Policy: default-src 'self'; manifest-src *; child-src 'none'; worker-src 'self'; frame-src youtube.com www.youtube.com https://platform.twitter.com https://embed.tidal.com https://w.soundcloud.com https://www.mixcloud.com https://open.spotify.com https://player.twitch.tv https://embed.music.apple.com https://nostrnests.com https://embed.wavlake.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; connect-src *; img-src * data: blob:; font-src https://fonts.gstatic.com; media-src * blob:; script-src 'self' 'wasm-unsafe-eval' https://static.cloudflareinsights.com https://platform.twitter.com https://embed.tidal.com;

packages/app/babel.config.json

@@ -1,4 +0,0 @@
-{
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": [["formatjs"]]
-}

packages/app/config-overrides.js

@@ -0,0 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { useBabelRc, override } = require("customize-cra");
+
+module.exports = override(useBabelRc());

packages/app/d.ts

@@ -1,5 +1,3 @@
-/// <reference types="@webbtc/webln-types" />
-
 declare module "*.jpg" {
   const value: unknown;
   export default value;
@@ -29,3 +27,17 @@ declare module "translations/*.json" {
   const value: Record<string, string>;
   export default value;
 }
+
+declare module "light-bolt11-decoder" {
+  export function decode(pr?: string): ParsedInvoice;
+
+  export interface ParsedInvoice {
+    paymentRequest: string;
+    sections: Section[];
+  }
+
+  export interface Section {
+    name: string;
+    value: string | Uint8Array | number | undefined;
+  }
+}

packages/app/jest.config.js

@@ -1,9 +0,0 @@
-/** @type {import('ts-jest').JestConfigWithTsJest} */
-module.exports = {
-  bail: true,
-  preset: "ts-jest",
-  testEnvironment: "jsdom",
-  roots: ["src"],
-  moduleDirectories: ["src", "node_modules"],
-  setupFiles: ["./src/setupTests.ts"],
-};

packages/app/package.json

@@ -1,41 +1,60 @@
 {
   "name": "@snort/app",
-  "version": "0.1.10",
+  "version": "0.1.6",
   "private": true,
   "dependencies": {
-    "@cashu/cashu-ts": "^0.6.1",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@jukben/emoji-search": "^2.0.1",
     "@lightninglabs/lnc-web": "^0.2.3-alpha",
-    "@noble/curves": "^1.0.0",
     "@noble/hashes": "^1.2.0",
+    "@noble/secp256k1": "^1.7.0",
+    "@protobufjs/base64": "^1.1.2",
     "@reduxjs/toolkit": "^1.9.1",
-    "@scure/bip32": "^1.3.0",
+    "@scure/bip32": "^1.1.5",
     "@scure/bip39": "^1.1.1",
+    "@snort/nostr": "^1.0.0",
     "@szhsin/react-menu": "^3.3.1",
-    "@void-cat/api": "^1.0.4",
-    "debug": "^4.3.4",
-    "dexie": "^3.2.4",
-    "dns-over-http-resolver": "^2.1.1",
-    "hls.js": "^1.4.6",
+    "base32-decode": "^1.0.0",
+    "bech32": "^2.0.0",
+    "dexie": "^3.2.2",
+    "dexie-react-hooks": "^1.1.1",
+    "events": "^3.3.0",
     "light-bolt11-decoder": "^2.1.0",
     "qr-code-styling": "^1.6.0-rc.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.4.1",
     "react-intl": "^6.2.8",
+    "react-markdown": "^8.0.4",
+    "react-query": "^3.39.2",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.5.0",
     "react-textarea-autosize": "^8.4.0",
     "react-twitter-embed": "^4.0.4",
+    "throttle-debounce": "^5.0.0",
+    "unist-util-visit": "^4.1.2",
     "use-long-press": "^2.0.3",
+    "uuid": "^9.0.0",
+    "workbox-background-sync": "^6.4.2",
+    "workbox-broadcast-update": "^6.4.2",
+    "workbox-cacheable-response": "^6.4.2",
     "workbox-core": "^6.4.2",
+    "workbox-expiration": "^6.4.2",
+    "workbox-google-analytics": "^6.4.2",
+    "workbox-navigation-preload": "^6.4.2",
+    "workbox-precaching": "^6.4.2",
+    "workbox-range-requests": "^6.4.2",
     "workbox-routing": "^6.4.2",
-    "workbox-strategies": "^6.4.2"
+    "workbox-strategies": "^6.4.2",
+    "workbox-streams": "^6.4.2"
   },
   "scripts": {
-    "start": "webpack serve",
-    "build": "webpack --node-env=production",
-    "test": "jest --runInBand",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-scripts eject",
     "intl-extract": "formatjs extract 'src/**/*.ts*' --ignore='**/*.d.ts' --out-file src/lang.json --flatten true",
     "intl-compile": "formatjs compile src/lang.json --out-file src/translations/en.json",
     "format": "prettier --write .",
@@ -49,11 +68,9 @@
   },
   "browserslist": {
     "production": [
-      "chrome >= 67",
-      "edge >= 79",
-      "firefox >= 68",
-      "opera >= 54",
-      "safari >= 14"
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
     ],
     "development": [
       "last 1 chrome version",
@@ -63,43 +80,23 @@
   },
   "devDependencies": {
     "@babel/plugin-syntax-import-assertions": "^7.20.0",
-    "@babel/preset-env": "^7.21.5",
-    "@babel/preset-react": "^7.18.6",
     "@formatjs/cli": "^6.0.1",
-    "@formatjs/ts-transformer": "^3.13.1",
-    "@types/debug": "^4.1.8",
-    "@types/jest": "^29.5.1",
+    "@types/jest": "^29.2.5",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
+    "@types/uuid": "^9.0.0",
     "@types/webscopeio__react-textarea-autocomplete": "^4.7.2",
     "@types/webtorrent": "^0.109.3",
-    "@webbtc/webln-types": "^1.0.10",
-    "@webpack-cli/generators": "^3.0.4",
     "@webscopeio/react-textarea-autocomplete": "^4.9.2",
-    "babel-loader": "^9.1.2",
-    "babel-plugin-formatjs": "^10.5.1",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.7.3",
-    "css-minimizer-webpack-plugin": "^5.0.0",
+    "babel-plugin-formatjs": "^10.3.36",
     "customize-cra": "^1.0.0",
-    "eslint-plugin-formatjs": "^4.10.1",
-    "eslint-webpack-plugin": "^4.0.1",
-    "html-webpack-plugin": "^5.5.1",
     "husky": ">=6",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
     "lint-staged": ">=10",
-    "mini-css-extract-plugin": "^2.7.5",
     "prettier": "2.8.3",
-    "ts-jest": "^29.1.0",
-    "ts-loader": "^9.4.2",
-    "typescript": "^5.0.4",
-    "webpack": "^5.82.1",
-    "webpack-bundle-analyzer": "^4.8.0",
-    "webpack-cli": "^5.1.1",
-    "webpack-dev-server": "^4.15.0",
-    "workbox-webpack-plugin": "^6.5.4"
+    "react-app-rewired": "^2.2.1",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.4"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,css,md}": "prettier --write"

packages/app/public/icons.svg

@@ -1,174 +1,358 @@
-<svg xmlns="http://www.w3.org/2000/svg">
+<svg xmlns="http://www.w3.org/2000/svg" >
   <defs>
     <symbol id="arrowBack" viewBox="0 0 16 13">
-      <path d="M14.6667 6.5H1.33334M1.33334 6.5L6.33334 11.5M1.33334 6.5L6.33334 1.5" stroke="currentColor" stroke-Width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M14.6667 6.5H1.33334M1.33334 6.5L6.33334 11.5M1.33334 6.5L6.33334 1.5"
+        stroke="currentColor"
+        stroke-Width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="arrowFront" viewBox="0 0 8 14" fill="none">
       <path d="M1 13L7 7L1 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
     </symbol>
     <symbol id="arrowUp" viewBox="0 0 12 12" fill="none">
-      <path d="M5.99992 10.6673V1.33398M5.99992 1.33398L1.33325 6.00065M5.99992 1.33398L10.6666 6.00065" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M5.99992 10.6673V1.33398M5.99992 1.33398L1.33325 6.00065M5.99992 1.33398L10.6666 6.00065"
+        stroke="currentColor"
+        stroke-width="1.33333"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="attachment" viewBox="0 0 21 22" fill="none">
-      <path d="M19.1525 9.89945L10.1369 18.9151C8.08662 20.9653 4.7625 20.9653 2.71225 18.9151C0.661997 16.8648 0.661998 13.5407 2.71225 11.4904L11.7279 2.47483C13.0947 1.108 15.3108 1.108 16.6776 2.47483C18.0444 3.84167 18.0444 6.05775 16.6776 7.42458L8.01555 16.0866C7.33213 16.7701 6.22409 16.7701 5.54068 16.0866C4.85726 15.4032 4.85726 14.2952 5.54068 13.6118L13.1421 6.01037" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M19.1525 9.89945L10.1369 18.9151C8.08662 20.9653 4.7625 20.9653 2.71225 18.9151C0.661997 16.8648 0.661998 13.5407 2.71225 11.4904L11.7279 2.47483C13.0947 1.108 15.3108 1.108 16.6776 2.47483C18.0444 3.84167 18.0444 6.05775 16.6776 7.42458L8.01555 16.0866C7.33213 16.7701 6.22409 16.7701 5.54068 16.0866C4.85726 15.4032 4.85726 14.2952 5.54068 13.6118L13.1421 6.01037"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="badge" viewBox="0 0 16 15" fill="none">
-      <path d="M6.00004 7.50065L7.33337 8.83398L10.3334 5.83398M11.9342 2.83299C12.0714 3.16501 12.3349 3.42892 12.6667 3.5667L13.8302 4.04864C14.1622 4.18617 14.426 4.44998 14.5636 4.78202C14.7011 5.11407 14.7011 5.48715 14.5636 5.81919L14.082 6.98185C13.9444 7.31404 13.9442 7.6875 14.0824 8.01953L14.5632 9.18185C14.6313 9.34631 14.6664 9.52259 14.6665 9.70062C14.6665 9.87865 14.6315 10.0549 14.5633 10.2194C14.4952 10.3839 14.3953 10.5333 14.2694 10.6592C14.1435 10.7851 13.9941 10.8849 13.8296 10.953L12.6669 11.4346C12.3349 11.5718 12.071 11.8354 11.9333 12.1672L11.4513 13.3307C11.3138 13.6627 11.05 13.9265 10.718 14.0641C10.3859 14.2016 10.0129 14.2016 9.68085 14.0641L8.51823 13.5825C8.18619 13.4453 7.81326 13.4455 7.48143 13.5832L6.31797 14.0645C5.98612 14.2017 5.61338 14.2016 5.28162 14.0642C4.94986 13.9267 4.68621 13.6632 4.54858 13.3316L4.06652 12.1677C3.92924 11.8357 3.66574 11.5718 3.33394 11.434L2.17048 10.9521C1.8386 10.8146 1.57488 10.5509 1.4373 10.2191C1.29971 9.88724 1.29953 9.51434 1.43678 9.18235L1.91835 8.01968C2.05554 7.68763 2.05526 7.31469 1.91757 6.98284L1.43669 5.81851C1.36851 5.65405 1.3334 5.47777 1.33337 5.29974C1.33335 5.12171 1.3684 4.94542 1.43652 4.78094C1.50465 4.61646 1.60452 4.46702 1.73042 4.34115C1.85632 4.21529 2.00579 4.11546 2.17028 4.04739L3.33291 3.5658C3.66462 3.42863 3.92836 3.16545 4.06624 2.83402L4.54816 1.67052C4.68569 1.33848 4.94949 1.07467 5.28152 0.937137C5.61355 0.7996 5.98662 0.7996 6.31865 0.937137L7.48127 1.41873C7.81331 1.55593 8.18624 1.55565 8.51808 1.41795L9.68202 0.937884C10.014 0.800424 10.387 0.800452 10.719 0.937962C11.0509 1.07547 11.3147 1.3392 11.4522 1.67116L11.9343 2.835L11.9342 2.83299Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M6.00004 7.50065L7.33337 8.83398L10.3334 5.83398M11.9342 2.83299C12.0714 3.16501 12.3349 3.42892 12.6667 3.5667L13.8302 4.04864C14.1622 4.18617 14.426 4.44998 14.5636 4.78202C14.7011 5.11407 14.7011 5.48715 14.5636 5.81919L14.082 6.98185C13.9444 7.31404 13.9442 7.6875 14.0824 8.01953L14.5632 9.18185C14.6313 9.34631 14.6664 9.52259 14.6665 9.70062C14.6665 9.87865 14.6315 10.0549 14.5633 10.2194C14.4952 10.3839 14.3953 10.5333 14.2694 10.6592C14.1435 10.7851 13.9941 10.8849 13.8296 10.953L12.6669 11.4346C12.3349 11.5718 12.071 11.8354 11.9333 12.1672L11.4513 13.3307C11.3138 13.6627 11.05 13.9265 10.718 14.0641C10.3859 14.2016 10.0129 14.2016 9.68085 14.0641L8.51823 13.5825C8.18619 13.4453 7.81326 13.4455 7.48143 13.5832L6.31797 14.0645C5.98612 14.2017 5.61338 14.2016 5.28162 14.0642C4.94986 13.9267 4.68621 13.6632 4.54858 13.3316L4.06652 12.1677C3.92924 11.8357 3.66574 11.5718 3.33394 11.434L2.17048 10.9521C1.8386 10.8146 1.57488 10.5509 1.4373 10.2191C1.29971 9.88724 1.29953 9.51434 1.43678 9.18235L1.91835 8.01968C2.05554 7.68763 2.05526 7.31469 1.91757 6.98284L1.43669 5.81851C1.36851 5.65405 1.3334 5.47777 1.33337 5.29974C1.33335 5.12171 1.3684 4.94542 1.43652 4.78094C1.50465 4.61646 1.60452 4.46702 1.73042 4.34115C1.85632 4.21529 2.00579 4.11546 2.17028 4.04739L3.33291 3.5658C3.66462 3.42863 3.92836 3.16545 4.06624 2.83402L4.54816 1.67052C4.68569 1.33848 4.94949 1.07467 5.28152 0.937137C5.61355 0.7996 5.98662 0.7996 6.31865 0.937137L7.48127 1.41873C7.81331 1.55593 8.18624 1.55565 8.51808 1.41795L9.68202 0.937884C10.014 0.800424 10.387 0.800452 10.719 0.937962C11.0509 1.07547 11.3147 1.3392 11.4522 1.67116L11.9343 2.835L11.9342 2.83299Z"
+        stroke="currentColor"
+        stroke-width="1.33333"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="bell" viewBox="0 0 20 23" fill="none">
-      <path d="M7.35419 20.5C8.05933 21.1224 8.98557 21.5 10 21.5C11.0145 21.5 11.9407 21.1224 12.6458 20.5M16 7.5C16 5.9087 15.3679 4.38258 14.2427 3.25736C13.1174 2.13214 11.5913 1.5 10 1.5C8.40872 1.5 6.8826 2.13214 5.75738 3.25736C4.63216 4.38258 4.00002 5.9087 4.00002 7.5C4.00002 10.5902 3.22049 12.706 2.34968 14.1054C1.61515 15.2859 1.24788 15.8761 1.26134 16.0408C1.27626 16.2231 1.31488 16.2926 1.46179 16.4016C1.59448 16.5 2.19261 16.5 3.38887 16.5H16.6112C17.8074 16.5 18.4056 16.5 18.5382 16.4016C18.6852 16.2926 18.7238 16.2231 18.7387 16.0408C18.7522 15.8761 18.3849 15.2859 17.6504 14.1054C16.7795 12.706 16 10.5902 16 7.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M7.35419 20.5C8.05933 21.1224 8.98557 21.5 10 21.5C11.0145 21.5 11.9407 21.1224 12.6458 20.5M16 7.5C16 5.9087 15.3679 4.38258 14.2427 3.25736C13.1174 2.13214 11.5913 1.5 10 1.5C8.40872 1.5 6.8826 2.13214 5.75738 3.25736C4.63216 4.38258 4.00002 5.9087 4.00002 7.5C4.00002 10.5902 3.22049 12.706 2.34968 14.1054C1.61515 15.2859 1.24788 15.8761 1.26134 16.0408C1.27626 16.2231 1.31488 16.2926 1.46179 16.4016C1.59448 16.5 2.19261 16.5 3.38887 16.5H16.6112C17.8074 16.5 18.4056 16.5 18.5382 16.4016C18.6852 16.2926 18.7238 16.2231 18.7387 16.0408C18.7522 15.8761 18.3849 15.2859 17.6504 14.1054C16.7795 12.706 16 10.5902 16 7.5Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="block" viewBox="0 0 20 20" fill="none">
-      <path d="M4.10829 4.10768L15.8916 15.891M18.3333 9.99935C18.3333 14.6017 14.6023 18.3327 9.99996 18.3327C5.39759 18.3327 1.66663 14.6017 1.66663 9.99935C1.66663 5.39698 5.39759 1.66602 9.99996 1.66602C14.6023 1.66602 18.3333 5.39698 18.3333 9.99935Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M4.10829 4.10768L15.8916 15.891M18.3333 9.99935C18.3333 14.6017 14.6023 18.3327 9.99996 18.3327C5.39759 18.3327 1.66663 14.6017 1.66663 9.99935C1.66663 5.39698 5.39759 1.66602 9.99996 1.66602C14.6023 1.66602 18.3333 5.39698 18.3333 9.99935Z"
+        stroke="currentColor"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="bookmark" viewBox="0 0 12 14" fill="none">
-      <path d="M1.3335 4.2C1.3335 3.0799 1.3335 2.51984 1.55148 2.09202C1.74323 1.71569 2.04919 1.40973 2.42552 1.21799C2.85334 1 3.41339 1 4.5335 1H7.46683C8.58693 1 9.14699 1 9.57481 1.21799C9.95114 1.40973 10.2571 1.71569 10.4488 2.09202C10.6668 2.51984 10.6668 3.0799 10.6668 4.2V13L6.00016 10.3333L1.3335 13V4.2Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M1.3335 4.2C1.3335 3.0799 1.3335 2.51984 1.55148 2.09202C1.74323 1.71569 2.04919 1.40973 2.42552 1.21799C2.85334 1 3.41339 1 4.5335 1H7.46683C8.58693 1 9.14699 1 9.57481 1.21799C9.95114 1.40973 10.2571 1.71569 10.4488 2.09202C10.6668 2.51984 10.6668 3.0799 10.6668 4.2V13L6.00016 10.3333L1.3335 13V4.2Z"
+        stroke="currentColor"
+        stroke-width="1.33333"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="check" viewBox="0 0 18 13" fill="none">
       <path d="M17 1L6 12L1 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
     </symbol>
     <symbol id="chevronDown" viewBox="0 0 24 24" fill="none">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" fill="currentColor" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
+        fill="currentColor"
+      />
     </symbol>
     <symbol id="close" viewBox="0 0 8 8" fill="none">
-      <path d="M7.33332 0.666992L0.666656 7.33366M0.666656 0.666992L7.33332 7.33366" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M7.33332 0.666992L0.666656 7.33366M0.666656 0.666992L7.33332 7.33366"
+        stroke="currentColor"
+        stroke-width="1.33333"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="zap" viewBox="0 0 16 20" fill="none">
-      <path d="M8.8333 1.70166L1.41118 10.6082C1.12051 10.957 0.975169 11.1314 0.972948 11.2787C0.971017 11.4068 1.02808 11.5286 1.12768 11.6091C1.24226 11.7017 1.46928 11.7017 1.92333 11.7017H7.99997L7.16663 18.3683L14.5888 9.46178C14.8794 9.11297 15.0248 8.93857 15.027 8.79128C15.0289 8.66323 14.9719 8.54141 14.8723 8.46092C14.7577 8.36833 14.5307 8.36833 14.0766 8.36833H7.99997L8.8333 1.70166Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M8.8333 1.70166L1.41118 10.6082C1.12051 10.957 0.975169 11.1314 0.972948 11.2787C0.971017 11.4068 1.02808 11.5286 1.12768 11.6091C1.24226 11.7017 1.46928 11.7017 1.92333 11.7017H7.99997L7.16663 18.3683L14.5888 9.46178C14.8794 9.11297 15.0248 8.93857 15.027 8.79128C15.0289 8.66323 14.9719 8.54141 14.8723 8.46092C14.7577 8.36833 14.5307 8.36833 14.0766 8.36833H7.99997L8.8333 1.70166Z"
+        stroke="currentColor"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="zapFast" viewBox="0 0 23 20" fill="none">
-      <path d="M8 15.5H2.5M5.5 10H1M8 4.5H3M16 1L9.40357 10.235C9.1116 10.6438 8.96562 10.8481 8.97194 11.0185C8.97744 11.1669 9.04858 11.3051 9.1661 11.3958C9.30108 11.5 9.55224 11.5 10.0546 11.5H15L14 19L20.5964 9.76499C20.8884 9.35624 21.0344 9.15187 21.0281 8.98147C21.0226 8.83312 20.9514 8.69489 20.8339 8.60418C20.6989 8.5 20.4478 8.5 19.9454 8.5H15L16 1Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M8 15.5H2.5M5.5 10H1M8 4.5H3M16 1L9.40357 10.235C9.1116 10.6438 8.96562 10.8481 8.97194 11.0185C8.97744 11.1669 9.04858 11.3051 9.1661 11.3958C9.30108 11.5 9.55224 11.5 10.0546 11.5H15L14 19L20.5964 9.76499C20.8884 9.35624 21.0344 9.15187 21.0281 8.98147C21.0226 8.83312 20.9514 8.69489 20.8339 8.60418C20.6989 8.5 20.4478 8.5 19.9454 8.5H15L16 1Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="zapCircle" viewBox="0 0 33 32" fill="none">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 1.33301C8.39986 1.33301 1.83337 7.8995 1.83337 15.9997C1.83337 24.0999 8.39986 30.6663 16.5 30.6663C24.6002 30.6663 31.1667 24.0999 31.1667 15.9997C31.1667 7.8995 24.6002 1.33301 16.5 1.33301ZM10.3155 16.3287L16.5 7.33301V13.9997H21.8056C22.4627 13.9997 22.7913 13.9997 22.9705 14.1364C23.1265 14.2555 23.2221 14.4372 23.2318 14.6333C23.243 14.8583 23.0569 15.1291 22.6845 15.6706L16.5 24.6663V17.9997H11.1944C10.5373 17.9997 10.2087 17.9997 10.0295 17.863C9.87353 17.7439 9.77791 17.5621 9.76818 17.3661C9.75699 17.141 9.94315 16.8702 10.3155 16.3287Z" fill="currentColor" fill-opacity="0.21" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16.5 1.33301C8.39986 1.33301 1.83337 7.8995 1.83337 15.9997C1.83337 24.0999 8.39986 30.6663 16.5 30.6663C24.6002 30.6663 31.1667 24.0999 31.1667 15.9997C31.1667 7.8995 24.6002 1.33301 16.5 1.33301ZM10.3155 16.3287L16.5 7.33301V13.9997H21.8056C22.4627 13.9997 22.7913 13.9997 22.9705 14.1364C23.1265 14.2555 23.2221 14.4372 23.2318 14.6333C23.243 14.8583 23.0569 15.1291 22.6845 15.6706L16.5 24.6663V17.9997H11.1944C10.5373 17.9997 10.2087 17.9997 10.0295 17.863C9.87353 17.7439 9.77791 17.5621 9.76818 17.3661C9.75699 17.141 9.94315 16.8702 10.3155 16.3287Z"
+        fill="currentColor"
+        fill-opacity="0.21"
+      />
     </symbol>
     <symbol id="search" viewBox="0 0 20 21" fill="none">
-      <path d="M19 19.5L14.65 15.15M17 9.5C17 13.9183 13.4183 17.5 9 17.5C4.58172 17.5 1 13.9183 1 9.5C1 5.08172 4.58172 1.5 9 1.5C13.4183 1.5 17 5.08172 17 9.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M19 19.5L14.65 15.15M17 9.5C17 13.9183 13.4183 17.5 9 17.5C4.58172 17.5 1 13.9183 1 9.5C1 5.08172 4.58172 1.5 9 1.5C13.4183 1.5 17 5.08172 17 9.5Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="envelope" viewBox="0 0 22 19" fill="none">
-      <path d="M1 4.5L9.16492 10.2154C9.82609 10.6783 10.1567 10.9097 10.5163 10.9993C10.8339 11.0785 11.1661 11.0785 11.4837 10.9993C11.8433 10.9097 12.1739 10.6783 12.8351 10.2154L21 4.5M5.8 17.5H16.2C17.8802 17.5 18.7202 17.5 19.362 17.173C19.9265 16.8854 20.3854 16.4265 20.673 15.862C21 15.2202 21 14.3802 21 12.7V6.3C21 4.61984 21 3.77976 20.673 3.13803C20.3854 2.57354 19.9265 2.1146 19.362 1.82698C18.7202 1.5 17.8802 1.5 16.2 1.5H5.8C4.11984 1.5 3.27976 1.5 2.63803 1.82698C2.07354 2.1146 1.6146 2.57354 1.32698 3.13803C1 3.77976 1 4.61984 1 6.3V12.7C1 14.3802 1 15.2202 1.32698 15.862C1.6146 16.4265 2.07354 16.8854 2.63803 17.173C3.27976 17.5 4.11984 17.5 5.8 17.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M1 4.5L9.16492 10.2154C9.82609 10.6783 10.1567 10.9097 10.5163 10.9993C10.8339 11.0785 11.1661 11.0785 11.4837 10.9993C11.8433 10.9097 12.1739 10.6783 12.8351 10.2154L21 4.5M5.8 17.5H16.2C17.8802 17.5 18.7202 17.5 19.362 17.173C19.9265 16.8854 20.3854 16.4265 20.673 15.862C21 15.2202 21 14.3802 21 12.7V6.3C21 4.61984 21 3.77976 20.673 3.13803C20.3854 2.57354 19.9265 2.1146 19.362 1.82698C18.7202 1.5 17.8802 1.5 16.2 1.5H5.8C4.11984 1.5 3.27976 1.5 2.63803 1.82698C2.07354 2.1146 1.6146 2.57354 1.32698 3.13803C1 3.77976 1 4.61984 1 6.3V12.7C1 14.3802 1 15.2202 1.32698 15.862C1.6146 16.4265 2.07354 16.8854 2.63803 17.173C3.27976 17.5 4.11984 17.5 5.8 17.5Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="mute" viewBox="0 0 19 18" fill="none">
-      <path d="M13.75 12.3333L17.9166 16.5M17.9166 12.3333L13.75 16.5M9.99996 11.9167H6.24996C5.08699 11.9167 4.5055 11.9167 4.03234 12.0602C2.96701 12.3834 2.13333 13.217 1.81016 14.2824C1.66663 14.7555 1.66663 15.337 1.66663 16.5M12.0833 5.25C12.0833 7.32107 10.4044 9 8.33329 9C6.26222 9 4.58329 7.32107 4.58329 5.25C4.58329 3.17893 6.26222 1.5 8.33329 1.5C10.4044 1.5 12.0833 3.17893 12.0833 5.25Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M13.75 12.3333L17.9166 16.5M17.9166 12.3333L13.75 16.5M9.99996 11.9167H6.24996C5.08699 11.9167 4.5055 11.9167 4.03234 12.0602C2.96701 12.3834 2.13333 13.217 1.81016 14.2824C1.66663 14.7555 1.66663 15.337 1.66663 16.5M12.0833 5.25C12.0833 7.32107 10.4044 9 8.33329 9C6.26222 9 4.58329 7.32107 4.58329 5.25C4.58329 3.17893 6.26222 1.5 8.33329 1.5C10.4044 1.5 12.0833 3.17893 12.0833 5.25Z"
+        stroke="currentColor"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="copy" viewBox="0 0 20 20" fill="none">
-      <path d="M13.3333 13.3327V15.666C13.3333 16.5994 13.3333 17.0661 13.1516 17.4227C12.9918 17.7363 12.7369 17.9912 12.4233 18.151C12.0668 18.3327 11.6 18.3327 10.6666 18.3327H4.33329C3.39987 18.3327 2.93316 18.3327 2.57664 18.151C2.26304 17.9912 2.00807 17.7363 1.84828 17.4227C1.66663 17.0661 1.66663 16.5994 1.66663 15.666V9.33268C1.66663 8.39926 1.66663 7.93255 1.84828 7.57603C2.00807 7.26243 2.26304 7.00746 2.57664 6.84767C2.93316 6.66602 3.39987 6.66602 4.33329 6.66602H6.66663M9.33329 13.3327H15.6666C16.6 13.3327 17.0668 13.3327 17.4233 13.151C17.7369 12.9912 17.9918 12.7363 18.1516 12.4227C18.3333 12.0661 18.3333 11.5994 18.3333 10.666V4.33268C18.3333 3.39926 18.3333 2.93255 18.1516 2.57603C17.9918 2.26243 17.7369 2.00746 17.4233 1.84767C17.0668 1.66602 16.6 1.66602 15.6666 1.66602H9.33329C8.39987 1.66602 7.93316 1.66602 7.57664 1.84767C7.26304 2.00746 7.00807 2.26243 6.84828 2.57603C6.66663 2.93255 6.66663 3.39926 6.66663 4.33268V10.666C6.66663 11.5994 6.66663 12.0661 6.84828 12.4227C7.00807 12.7363 7.26304 12.9912 7.57664 13.151C7.93316 13.3327 8.39987 13.3327 9.33329 13.3327Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M13.3333 13.3327V15.666C13.3333 16.5994 13.3333 17.0661 13.1516 17.4227C12.9918 17.7363 12.7369 17.9912 12.4233 18.151C12.0668 18.3327 11.6 18.3327 10.6666 18.3327H4.33329C3.39987 18.3327 2.93316 18.3327 2.57664 18.151C2.26304 17.9912 2.00807 17.7363 1.84828 17.4227C1.66663 17.0661 1.66663 16.5994 1.66663 15.666V9.33268C1.66663 8.39926 1.66663 7.93255 1.84828 7.57603C2.00807 7.26243 2.26304 7.00746 2.57664 6.84767C2.93316 6.66602 3.39987 6.66602 4.33329 6.66602H6.66663M9.33329 13.3327H15.6666C16.6 13.3327 17.0668 13.3327 17.4233 13.151C17.7369 12.9912 17.9918 12.7363 18.1516 12.4227C18.3333 12.0661 18.3333 11.5994 18.3333 10.666V4.33268C18.3333 3.39926 18.3333 2.93255 18.1516 2.57603C17.9918 2.26243 17.7369 2.00746 17.4233 1.84767C17.0668 1.66602 16.6 1.66602 15.6666 1.66602H9.33329C8.39987 1.66602 7.93316 1.66602 7.57664 1.84767C7.26304 2.00746 7.00807 2.26243 6.84828 2.57603C6.66663 2.93255 6.66663 3.39926 6.66663 4.33268V10.666C6.66663 11.5994 6.66663 12.0661 6.84828 12.4227C7.00807 12.7363 7.26304 12.9912 7.57664 13.151C7.93316 13.3327 8.39987 13.3327 9.33329 13.3327Z"
+        stroke="currentColor"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="dislike" viewBox="0 0 19 20" fill="none">
-      <path d="M13.1667 1.66667V10.8333M17.3333 8.16667V4.33334C17.3333 3.39992 17.3333 2.93321 17.1517 2.57669C16.9919 2.26308 16.7369 2.00812 16.4233 1.84833C16.0668 1.66667 15.6001 1.66667 14.6667 1.66667H5.76501C4.54711 1.66667 3.93816 1.66667 3.44632 1.88953C3.01284 2.08595 2.64442 2.40202 2.38437 2.8006C2.08931 3.25283 1.99672 3.8547 1.81153 5.05844L1.37563 7.89178C1.13137 9.47943 1.00925 10.2733 1.24484 10.8909C1.45162 11.4331 1.84054 11.8864 2.34494 12.1732C2.91961 12.5 3.72278 12.5 5.32912 12.5H6C6.46671 12.5 6.70007 12.5 6.87833 12.5908C7.03513 12.6707 7.16261 12.7982 7.24251 12.955C7.33334 13.1333 7.33334 13.3666 7.33334 13.8333V16.2785C7.33334 17.4133 8.25333 18.3333 9.3882 18.3333C9.65889 18.3333 9.90419 18.1739 10.0141 17.9266L12.8148 11.6252C12.9421 11.3385 13.0058 11.1952 13.1065 11.0902C13.1955 10.9973 13.3048 10.9263 13.4258 10.8827C13.5627 10.8333 13.7195 10.8333 14.0332 10.8333H14.6667C15.6001 10.8333 16.0668 10.8333 16.4233 10.6517C16.7369 10.4919 16.9919 10.2369 17.1517 9.92332C17.3333 9.5668 17.3333 9.10009 17.3333 8.16667Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M13.1667 1.66667V10.8333M17.3333 8.16667V4.33334C17.3333 3.39992 17.3333 2.93321 17.1517 2.57669C16.9919 2.26308 16.7369 2.00812 16.4233 1.84833C16.0668 1.66667 15.6001 1.66667 14.6667 1.66667H5.76501C4.54711 1.66667 3.93816 1.66667 3.44632 1.88953C3.01284 2.08595 2.64442 2.40202 2.38437 2.8006C2.08931 3.25283 1.99672 3.8547 1.81153 5.05844L1.37563 7.89178C1.13137 9.47943 1.00925 10.2733 1.24484 10.8909C1.45162 11.4331 1.84054 11.8864 2.34494 12.1732C2.91961 12.5 3.72278 12.5 5.32912 12.5H6C6.46671 12.5 6.70007 12.5 6.87833 12.5908C7.03513 12.6707 7.16261 12.7982 7.24251 12.955C7.33334 13.1333 7.33334 13.3666 7.33334 13.8333V16.2785C7.33334 17.4133 8.25333 18.3333 9.3882 18.3333C9.65889 18.3333 9.90419 18.1739 10.0141 17.9266L12.8148 11.6252C12.9421 11.3385 13.0058 11.1952 13.1065 11.0902C13.1955 10.9973 13.3048 10.9263 13.4258 10.8827C13.5627 10.8333 13.7195 10.8333 14.0332 10.8333H14.6667C15.6001 10.8333 16.0668 10.8333 16.4233 10.6517C16.7369 10.4919 16.9919 10.2369 17.1517 9.92332C17.3333 9.5668 17.3333 9.10009 17.3333 8.16667Z"
+        stroke="currentColor"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="dots" viewBox="0 0 4 16" fill="none">
-      <path d="M1.99996 8.86865C2.4602 8.86865 2.83329 8.49556 2.83329 8.03532C2.83329 7.57508 2.4602 7.20199 1.99996 7.20199C1.53972 7.20199 1.16663 7.57508 1.16663 8.03532C1.16663 8.49556 1.53972 8.86865 1.99996 8.86865Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
-      <path d="M1.99996 3.03532C2.4602 3.03532 2.83329 2.66222 2.83329 2.20199C2.83329 1.74175 2.4602 1.36865 1.99996 1.36865C1.53972 1.36865 1.16663 1.74175 1.16663 2.20199C1.16663 2.66222 1.53972 3.03532 1.99996 3.03532Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
-      <path d="M1.99996 14.702C2.4602 14.702 2.83329 14.3289 2.83329 13.8687C2.83329 13.4084 2.4602 13.0353 1.99996 13.0353C1.53972 13.0353 1.16663 13.4084 1.16663 13.8687C1.16663 14.3289 1.53972 14.702 1.99996 14.702Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M1.99996 8.86865C2.4602 8.86865 2.83329 8.49556 2.83329 8.03532C2.83329 7.57508 2.4602 7.20199 1.99996 7.20199C1.53972 7.20199 1.16663 7.57508 1.16663 8.03532C1.16663 8.49556 1.53972 8.86865 1.99996 8.86865Z"
+        stroke="currentColor"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M1.99996 3.03532C2.4602 3.03532 2.83329 2.66222 2.83329 2.20199C2.83329 1.74175 2.4602 1.36865 1.99996 1.36865C1.53972 1.36865 1.16663 1.74175 1.16663 2.20199C1.16663 2.66222 1.53972 3.03532 1.99996 3.03532Z"
+        stroke="currentColor"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M1.99996 14.702C2.4602 14.702 2.83329 14.3289 2.83329 13.8687C2.83329 13.4084 2.4602 13.0353 1.99996 13.0353C1.53972 13.0353 1.16663 13.4084 1.16663 13.8687C1.16663 14.3289 1.53972 14.702 1.99996 14.702Z"
+        stroke="currentColor"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="gear" viewBox="0 0 20 22" fill="none">
-      <path d="M7.39504 18.3711L7.97949 19.6856C8.15323 20.0768 8.43676 20.4093 8.79571 20.6426C9.15466 20.8759 9.5736 21.0001 10.0017 21C10.4298 21.0001 10.8488 20.8759 11.2077 20.6426C11.5667 20.4093 11.8502 20.0768 12.0239 19.6856L12.6084 18.3711C12.8164 17.9047 13.1664 17.5159 13.6084 17.26C14.0532 17.0034 14.5677 16.8941 15.0784 16.9478L16.5084 17.1C16.934 17.145 17.3636 17.0656 17.7451 16.8713C18.1265 16.6771 18.4434 16.3763 18.6573 16.0056C18.8714 15.635 18.9735 15.2103 18.951 14.7829C18.9285 14.3555 18.7825 13.9438 18.5306 13.5978L17.6839 12.4344C17.3825 12.0171 17.2214 11.5148 17.2239 11C17.2238 10.4866 17.3864 9.98635 17.6884 9.57111L18.535 8.40778C18.7869 8.06175 18.933 7.65007 18.9554 7.22267C18.9779 6.79528 18.8759 6.37054 18.6617 6C18.4478 5.62923 18.1309 5.32849 17.7495 5.13423C17.3681 4.93997 16.9385 4.86053 16.5128 4.90556L15.0828 5.05778C14.5722 5.11141 14.0576 5.00212 13.6128 4.74556C13.1699 4.48825 12.8199 4.09736 12.6128 3.62889L12.0239 2.31444C11.8502 1.92317 11.5667 1.59072 11.2077 1.3574C10.8488 1.12408 10.4298 0.99993 10.0017 1C9.5736 0.99993 9.15466 1.12408 8.79571 1.3574C8.43676 1.59072 8.15323 1.92317 7.97949 2.31444L7.39504 3.62889C7.18797 4.09736 6.83792 4.48825 6.39504 4.74556C5.95026 5.00212 5.43571 5.11141 4.92504 5.05778L3.4906 4.90556C3.06493 4.86053 2.63534 4.93997 2.25391 5.13423C1.87249 5.32849 1.55561 5.62923 1.34171 6C1.12753 6.37054 1.02549 6.79528 1.04798 7.22267C1.07046 7.65007 1.2165 8.06175 1.46838 8.40778L2.31504 9.57111C2.61698 9.98635 2.77958 10.4866 2.77949 11C2.77958 11.5134 2.61698 12.0137 2.31504 12.4289L1.46838 13.5922C1.2165 13.9382 1.07046 14.3499 1.04798 14.7773C1.02549 15.2047 1.12753 15.6295 1.34171 16C1.55582 16.3706 1.87274 16.6712 2.25411 16.8654C2.63548 17.0596 3.06496 17.1392 3.4906 17.0944L4.9206 16.9422C5.43127 16.8886 5.94581 16.9979 6.3906 17.2544C6.83513 17.511 7.18681 17.902 7.39504 18.3711Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-      <path d="M9.99992 14C11.6568 14 12.9999 12.6569 12.9999 11C12.9999 9.34315 11.6568 8 9.99992 8C8.34307 8 6.99992 9.34315 6.99992 11C6.99992 12.6569 8.34307 14 9.99992 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M7.39504 18.3711L7.97949 19.6856C8.15323 20.0768 8.43676 20.4093 8.79571 20.6426C9.15466 20.8759 9.5736 21.0001 10.0017 21C10.4298 21.0001 10.8488 20.8759 11.2077 20.6426C11.5667 20.4093 11.8502 20.0768 12.0239 19.6856L12.6084 18.3711C12.8164 17.9047 13.1664 17.5159 13.6084 17.26C14.0532 17.0034 14.5677 16.8941 15.0784 16.9478L16.5084 17.1C16.934 17.145 17.3636 17.0656 17.7451 16.8713C18.1265 16.6771 18.4434 16.3763 18.6573 16.0056C18.8714 15.635 18.9735 15.2103 18.951 14.7829C18.9285 14.3555 18.7825 13.9438 18.5306 13.5978L17.6839 12.4344C17.3825 12.0171 17.2214 11.5148 17.2239 11C17.2238 10.4866 17.3864 9.98635 17.6884 9.57111L18.535 8.40778C18.7869 8.06175 18.933 7.65007 18.9554 7.22267C18.9779 6.79528 18.8759 6.37054 18.6617 6C18.4478 5.62923 18.1309 5.32849 17.7495 5.13423C17.3681 4.93997 16.9385 4.86053 16.5128 4.90556L15.0828 5.05778C14.5722 5.11141 14.0576 5.00212 13.6128 4.74556C13.1699 4.48825 12.8199 4.09736 12.6128 3.62889L12.0239 2.31444C11.8502 1.92317 11.5667 1.59072 11.2077 1.3574C10.8488 1.12408 10.4298 0.99993 10.0017 1C9.5736 0.99993 9.15466 1.12408 8.79571 1.3574C8.43676 1.59072 8.15323 1.92317 7.97949 2.31444L7.39504 3.62889C7.18797 4.09736 6.83792 4.48825 6.39504 4.74556C5.95026 5.00212 5.43571 5.11141 4.92504 5.05778L3.4906 4.90556C3.06493 4.86053 2.63534 4.93997 2.25391 5.13423C1.87249 5.32849 1.55561 5.62923 1.34171 6C1.12753 6.37054 1.02549 6.79528 1.04798 7.22267C1.07046 7.65007 1.2165 8.06175 1.46838 8.40778L2.31504 9.57111C2.61698 9.98635 2.77958 10.4866 2.77949 11C2.77958 11.5134 2.61698 12.0137 2.31504 12.4289L1.46838 13.5922C1.2165 13.9382 1.07046 14.3499 1.04798 14.7773C1.02549 15.2047 1.12753 15.6295 1.34171 16C1.55582 16.3706 1.87274 16.6712 2.25411 16.8654C2.63548 17.0596 3.06496 17.1392 3.4906 17.0944L4.9206 16.9422C5.43127 16.8886 5.94581 16.9979 6.3906 17.2544C6.83513 17.511 7.18681 17.902 7.39504 18.3711Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M9.99992 14C11.6568 14 12.9999 12.6569 12.9999 11C12.9999 9.34315 11.6568 8 9.99992 8C8.34307 8 6.99992 9.34315 6.99992 11C6.99992 12.6569 8.34307 14 9.99992 14Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="heart" viewBox="0 0 20 18" fill="none">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M9.99425 3.315C8.32813 1.36716 5.54975 0.843192 3.4622 2.62683C1.37466 4.41048 1.08077 7.39264 2.72012 9.50216C4.08314 11.2561 8.2081 14.9552 9.56004 16.1525C9.7113 16.2865 9.78692 16.3534 9.87514 16.3798C9.95213 16.4027 10.0364 16.4027 10.1134 16.3798C10.2016 16.3534 10.2772 16.2865 10.4285 16.1525C11.7804 14.9552 15.9054 11.2561 17.2684 9.50216C18.9077 7.39264 18.6497 4.39171 16.5263 2.62683C14.4029 0.861954 11.6604 1.36716 9.99425 3.315Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M9.99425 3.315C8.32813 1.36716 5.54975 0.843192 3.4622 2.62683C1.37466 4.41048 1.08077 7.39264 2.72012 9.50216C4.08314 11.2561 8.2081 14.9552 9.56004 16.1525C9.7113 16.2865 9.78692 16.3534 9.87514 16.3798C9.95213 16.4027 10.0364 16.4027 10.1134 16.3798C10.2016 16.3534 10.2772 16.2865 10.4285 16.1525C11.7804 14.9552 15.9054 11.2561 17.2684 9.50216C18.9077 7.39264 18.6497 4.39171 16.5263 2.62683C14.4029 0.861954 11.6604 1.36716 9.99425 3.315Z"
+        stroke="currentColor"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="json" viewBox="0 0 22 18" fill="none">
-      <path d="M17.5708 17C18.8328 17 19.8568 15.977 19.8568 14.714V10.143L20.9998 9L19.8568 7.857V3.286C19.8568 2.023 18.8338 1 17.5708 1M4.429 1C3.166 1 2.143 2.023 2.143 3.286V7.857L1 9L2.143 10.143V14.714C2.143 15.977 3.166 17 4.429 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M17.5708 17C18.8328 17 19.8568 15.977 19.8568 14.714V10.143L20.9998 9L19.8568 7.857V3.286C19.8568 2.023 18.8338 1 17.5708 1M4.429 1C3.166 1 2.143 2.023 2.143 3.286V7.857L1 9L2.143 10.143V14.714C2.143 15.977 3.166 17 4.429 17"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="link" viewBox="0 0 22 22" fill="none">
-      <path d="M8.99996 12C9.42941 12.5742 9.97731 13.0492 10.6065 13.393C11.2357 13.7367 11.9315 13.9411 12.6466 13.9924C13.3617 14.0436 14.0795 13.9404 14.7513 13.6898C15.4231 13.4392 16.0331 13.0471 16.54 12.54L19.54 9.54003C20.4507 8.59702 20.9547 7.334 20.9433 6.02302C20.9319 4.71204 20.4061 3.45797 19.479 2.53093C18.552 1.60389 17.2979 1.07805 15.987 1.06666C14.676 1.05526 13.413 1.55924 12.47 2.47003L10.75 4.18003M13 10C12.5705 9.4259 12.0226 8.95084 11.3934 8.60709C10.7642 8.26333 10.0684 8.05891 9.3533 8.00769C8.63816 7.95648 7.92037 8.05966 7.24861 8.31025C6.57685 8.56083 5.96684 8.95296 5.45996 9.46003L2.45996 12.46C1.54917 13.403 1.04519 14.666 1.05659 15.977C1.06798 17.288 1.59382 18.5421 2.52086 19.4691C3.4479 20.3962 4.70197 20.922 6.01295 20.9334C7.32393 20.9448 8.58694 20.4408 9.52995 19.53L11.24 17.82" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M8.99996 12C9.42941 12.5742 9.97731 13.0492 10.6065 13.393C11.2357 13.7367 11.9315 13.9411 12.6466 13.9924C13.3617 14.0436 14.0795 13.9404 14.7513 13.6898C15.4231 13.4392 16.0331 13.0471 16.54 12.54L19.54 9.54003C20.4507 8.59702 20.9547 7.334 20.9433 6.02302C20.9319 4.71204 20.4061 3.45797 19.479 2.53093C18.552 1.60389 17.2979 1.07805 15.987 1.06666C14.676 1.05526 13.413 1.55924 12.47 2.47003L10.75 4.18003M13 10C12.5705 9.4259 12.0226 8.95084 11.3934 8.60709C10.7642 8.26333 10.0684 8.05891 9.3533 8.00769C8.63816 7.95648 7.92037 8.05966 7.24861 8.31025C6.57685 8.56083 5.96684 8.95296 5.45996 9.46003L2.45996 12.46C1.54917 13.403 1.04519 14.666 1.05659 15.977C1.06798 17.288 1.59382 18.5421 2.52086 19.4691C3.4479 20.3962 4.70197 20.922 6.01295 20.9334C7.32393 20.9448 8.58694 20.4408 9.52995 19.53L11.24 17.82"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="logout" viewBox="0 0 22 20" fill="none">
-      <path d="M17 6L21 10M21 10L17 14M21 10H8M14 2.20404C12.7252 1.43827 11.2452 1 9.66667 1C4.8802 1 1 5.02944 1 10C1 14.9706 4.8802 19 9.66667 19C11.2452 19 12.7252 18.5617 14 17.796" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M17 6L21 10M21 10L17 14M21 10H8M14 2.20404C12.7252 1.43827 11.2452 1 9.66667 1C4.8802 1 1 5.02944 1 10C1 14.9706 4.8802 19 9.66667 19C11.2452 19 12.7252 18.5617 14 17.796"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="pin" viewBox="0 0 16 16" fill="none">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M10.9224 1.60798C10.752 1.43747 10.5936 1.27906 10.4521 1.16112C10.3041 1.03772 10.1054 0.897647 9.84544 0.844944C9.50107 0.775136 9.14307 0.84408 8.84926 1.03679C8.62745 1.18228 8.49504 1.38611 8.40342 1.55566C8.31586 1.7177 8.22763 1.92361 8.13268 2.14523L7.4096 3.83242C7.39337 3.8703 7.38541 3.88876 7.37934 3.90209L7.37892 3.903L7.37824 3.90372C7.36811 3.91431 7.35393 3.92856 7.32479 3.9577L6.28419 4.99829C6.23867 5.04382 6.21617 5.06618 6.19929 5.08193L6.19809 5.08305L6.19649 5.08343C6.17402 5.08874 6.14294 5.09505 6.0798 5.10768L3.60856 5.60192C3.31543 5.66053 3.05184 5.71323 2.84493 5.77469C2.63787 5.83621 2.37038 5.93737 2.16809 6.16535C1.90934 6.45696 1.79118 6.84722 1.84472 7.23339C1.88657 7.53529 2.05302 7.76784 2.19118 7.93388C2.32925 8.09979 2.51933 8.28985 2.73071 8.50121L4.64158 10.4121L1.34175 13.7119C1.0814 13.9723 1.0814 14.3944 1.34175 14.6547C1.6021 14.9151 2.02421 14.9151 2.28456 14.6547L5.58439 11.3549L7.49532 13.2658C7.70668 13.4772 7.89673 13.6673 8.06265 13.8053C8.22869 13.9435 8.46123 14.11 8.76314 14.1518C9.14931 14.2053 9.53956 14.0872 9.83117 13.8284C10.0592 13.6261 10.1603 13.3587 10.2218 13.1516C10.2833 12.9447 10.336 12.6811 10.3946 12.388L10.8889 9.91673C10.9015 9.85359 10.9078 9.82251 10.9131 9.80003L10.9135 9.79844L10.9146 9.79724C10.9303 9.78035 10.9527 9.75786 10.9982 9.71233L12.0388 8.67174C12.068 8.6426 12.0822 8.62841 12.0928 8.61829L12.0935 8.6176L12.0944 8.61719C12.1078 8.61111 12.1262 8.60316 12.1641 8.58692L13.8513 7.86385C14.0729 7.7689 14.2788 7.68066 14.4409 7.5931C14.6104 7.50149 14.8142 7.36908 14.9597 7.14726C15.1524 6.85346 15.2214 6.49545 15.1516 6.15109C15.0989 5.89111 14.9588 5.69247 14.8354 5.54443C14.7175 5.40295 14.5591 5.24456 14.3885 5.07409L10.9224 1.60798Z" fill="currentColor" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10.9224 1.60798C10.752 1.43747 10.5936 1.27906 10.4521 1.16112C10.3041 1.03772 10.1054 0.897647 9.84544 0.844944C9.50107 0.775136 9.14307 0.84408 8.84926 1.03679C8.62745 1.18228 8.49504 1.38611 8.40342 1.55566C8.31586 1.7177 8.22763 1.92361 8.13268 2.14523L7.4096 3.83242C7.39337 3.8703 7.38541 3.88876 7.37934 3.90209L7.37892 3.903L7.37824 3.90372C7.36811 3.91431 7.35393 3.92856 7.32479 3.9577L6.28419 4.99829C6.23867 5.04382 6.21617 5.06618 6.19929 5.08193L6.19809 5.08305L6.19649 5.08343C6.17402 5.08874 6.14294 5.09505 6.0798 5.10768L3.60856 5.60192C3.31543 5.66053 3.05184 5.71323 2.84493 5.77469C2.63787 5.83621 2.37038 5.93737 2.16809 6.16535C1.90934 6.45696 1.79118 6.84722 1.84472 7.23339C1.88657 7.53529 2.05302 7.76784 2.19118 7.93388C2.32925 8.09979 2.51933 8.28985 2.73071 8.50121L4.64158 10.4121L1.34175 13.7119C1.0814 13.9723 1.0814 14.3944 1.34175 14.6547C1.6021 14.9151 2.02421 14.9151 2.28456 14.6547L5.58439 11.3549L7.49532 13.2658C7.70668 13.4772 7.89673 13.6673 8.06265 13.8053C8.22869 13.9435 8.46123 14.11 8.76314 14.1518C9.14931 14.2053 9.53956 14.0872 9.83117 13.8284C10.0592 13.6261 10.1603 13.3587 10.2218 13.1516C10.2833 12.9447 10.336 12.6811 10.3946 12.388L10.8889 9.91673C10.9015 9.85359 10.9078 9.82251 10.9131 9.80003L10.9135 9.79844L10.9146 9.79724C10.9303 9.78035 10.9527 9.75786 10.9982 9.71233L12.0388 8.67174C12.068 8.6426 12.0822 8.62841 12.0928 8.61829L12.0935 8.6176L12.0944 8.61719C12.1078 8.61111 12.1262 8.60316 12.1641 8.58692L13.8513 7.86385C14.0729 7.7689 14.2788 7.68066 14.4409 7.5931C14.6104 7.50149 14.8142 7.36908 14.9597 7.14726C15.1524 6.85346 15.2214 6.49545 15.1516 6.15109C15.0989 5.89111 14.9588 5.69247 14.8354 5.54443C14.7175 5.40295 14.5591 5.24456 14.3885 5.07409L10.9224 1.60798Z"
+        fill="currentColor"
+      />
     </symbol>
     <symbol id="plus" viewBox="0 0 16 16" fill="none">
       <path d="M8 1V15M1 8H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
     </symbol>
     <symbol id="profile" viewBox="0 0 22 22" fill="none">
-      <path d="M14 8H14.01M8 8H8.01M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11ZM14.5 8C14.5 8.27614 14.2761 8.5 14 8.5C13.7239 8.5 13.5 8.27614 13.5 8C13.5 7.72386 13.7239 7.5 14 7.5C14.2761 7.5 14.5 7.72386 14.5 8ZM8.5 8C8.5 8.27614 8.27614 8.5 8 8.5C7.72386 8.5 7.5 8.27614 7.5 8C7.5 7.72386 7.72386 7.5 8 7.5C8.27614 7.5 8.5 7.72386 8.5 8ZM11 16.5C13.5005 16.5 15.5 14.667 15.5 13H6.5C6.5 14.667 8.4995 16.5 11 16.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M14 8H14.01M8 8H8.01M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11ZM14.5 8C14.5 8.27614 14.2761 8.5 14 8.5C13.7239 8.5 13.5 8.27614 13.5 8C13.5 7.72386 13.7239 7.5 14 7.5C14.2761 7.5 14.5 7.72386 14.5 8ZM8.5 8C8.5 8.27614 8.27614 8.5 8 8.5C7.72386 8.5 7.5 8.27614 7.5 8C7.5 7.72386 7.72386 7.5 8 7.5C8.27614 7.5 8.5 7.72386 8.5 8ZM11 16.5C13.5005 16.5 15.5 14.667 15.5 13H6.5C6.5 14.667 8.4995 16.5 11 16.5Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="qr" viewBox="0 0 20 20" fill="none">
-      <path d="M4.5 4.5H4.51M15.5 4.5H15.51M4.5 15.5H4.51M11 11H11.01M15.5 15.5H15.51M15 19H19V15M12 14.5V19M19 12H14.5M13.6 8H17.4C17.9601 8 18.2401 8 18.454 7.89101C18.6422 7.79513 18.7951 7.64215 18.891 7.45399C19 7.24008 19 6.96005 19 6.4V2.6C19 2.03995 19 1.75992 18.891 1.54601C18.7951 1.35785 18.6422 1.20487 18.454 1.10899C18.2401 1 17.9601 1 17.4 1H13.6C13.0399 1 12.7599 1 12.546 1.10899C12.3578 1.20487 12.2049 1.35785 12.109 1.54601C12 1.75992 12 2.03995 12 2.6V6.4C12 6.96005 12 7.24008 12.109 7.45399C12.2049 7.64215 12.3578 7.79513 12.546 7.89101C12.7599 8 13.0399 8 13.6 8ZM2.6 8H6.4C6.96005 8 7.24008 8 7.45399 7.89101C7.64215 7.79513 7.79513 7.64215 7.89101 7.45399C8 7.24008 8 6.96005 8 6.4V2.6C8 2.03995 8 1.75992 7.89101 1.54601C7.79513 1.35785 7.64215 1.20487 7.45399 1.10899C7.24008 1 6.96005 1 6.4 1H2.6C2.03995 1 1.75992 1 1.54601 1.10899C1.35785 1.20487 1.20487 1.35785 1.10899 1.54601C1 1.75992 1 2.03995 1 2.6V6.4C1 6.96005 1 7.24008 1.10899 7.45399C1.20487 7.64215 1.35785 7.79513 1.54601 7.89101C1.75992 8 2.03995 8 2.6 8ZM2.6 19H6.4C6.96005 19 7.24008 19 7.45399 18.891C7.64215 18.7951 7.79513 18.6422 7.89101 18.454C8 18.2401 8 17.9601 8 17.4V13.6C8 13.0399 8 12.7599 7.89101 12.546C7.79513 12.3578 7.64215 12.2049 7.45399 12.109C7.24008 12 6.96005 12 6.4 12H2.6C2.03995 12 1.75992 12 1.54601 12.109C1.35785 12.2049 1.20487 12.3578 1.10899 12.546C1 12.7599 1 13.0399 1 13.6V17.4C1 17.9601 1 18.2401 1.10899 18.454C1.20487 18.6422 1.35785 18.7951 1.54601 18.891C1.75992 19 2.03995 19 2.6 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M4.5 4.5H4.51M15.5 4.5H15.51M4.5 15.5H4.51M11 11H11.01M15.5 15.5H15.51M15 19H19V15M12 14.5V19M19 12H14.5M13.6 8H17.4C17.9601 8 18.2401 8 18.454 7.89101C18.6422 7.79513 18.7951 7.64215 18.891 7.45399C19 7.24008 19 6.96005 19 6.4V2.6C19 2.03995 19 1.75992 18.891 1.54601C18.7951 1.35785 18.6422 1.20487 18.454 1.10899C18.2401 1 17.9601 1 17.4 1H13.6C13.0399 1 12.7599 1 12.546 1.10899C12.3578 1.20487 12.2049 1.35785 12.109 1.54601C12 1.75992 12 2.03995 12 2.6V6.4C12 6.96005 12 7.24008 12.109 7.45399C12.2049 7.64215 12.3578 7.79513 12.546 7.89101C12.7599 8 13.0399 8 13.6 8ZM2.6 8H6.4C6.96005 8 7.24008 8 7.45399 7.89101C7.64215 7.79513 7.79513 7.64215 7.89101 7.45399C8 7.24008 8 6.96005 8 6.4V2.6C8 2.03995 8 1.75992 7.89101 1.54601C7.79513 1.35785 7.64215 1.20487 7.45399 1.10899C7.24008 1 6.96005 1 6.4 1H2.6C2.03995 1 1.75992 1 1.54601 1.10899C1.35785 1.20487 1.20487 1.35785 1.10899 1.54601C1 1.75992 1 2.03995 1 2.6V6.4C1 6.96005 1 7.24008 1.10899 7.45399C1.20487 7.64215 1.35785 7.79513 1.54601 7.89101C1.75992 8 2.03995 8 2.6 8ZM2.6 19H6.4C6.96005 19 7.24008 19 7.45399 18.891C7.64215 18.7951 7.79513 18.6422 7.89101 18.454C8 18.2401 8 17.9601 8 17.4V13.6C8 13.0399 8 12.7599 7.89101 12.546C7.79513 12.3578 7.64215 12.2049 7.45399 12.109C7.24008 12 6.96005 12 6.4 12H2.6C2.03995 12 1.75992 12 1.54601 12.109C1.35785 12.2049 1.20487 12.3578 1.10899 12.546C1 12.7599 1 13.0399 1 13.6V17.4C1 17.9601 1 18.2401 1.10899 18.454C1.20487 18.6422 1.35785 18.7951 1.54601 18.891C1.75992 19 2.03995 19 2.6 19Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="read" viewBox="0 0 22 22" fill="none">
-      <path d="M14.9996 2V7M14.9996 7L19.9996 7M14.9996 7L20.9996 1M10.2266 11.8631C9.02506 10.6615 8.07627 9.30285 7.38028 7.85323C7.32041 7.72854 7.29048 7.66619 7.26748 7.5873C7.18576 7.30695 7.24446 6.96269 7.41447 6.72526C7.46231 6.65845 7.51947 6.60129 7.63378 6.48698C7.98338 6.13737 8.15819 5.96257 8.27247 5.78679C8.70347 5.1239 8.70347 4.26932 8.27247 3.60643C8.15819 3.43065 7.98338 3.25585 7.63378 2.90624L7.43891 2.71137C6.90747 2.17993 6.64174 1.91421 6.35636 1.76987C5.7888 1.4828 5.11854 1.4828 4.55098 1.76987C4.2656 1.91421 3.99987 2.17993 3.46843 2.71137L3.3108 2.86901C2.78117 3.39863 2.51636 3.66344 2.31411 4.02348C2.08969 4.42298 1.92833 5.04347 1.9297 5.5017C1.93092 5.91464 2.01103 6.19687 2.17124 6.76131C3.03221 9.79471 4.65668 12.6571 7.04466 15.045C9.43264 17.433 12.295 19.0575 15.3284 19.9185C15.8928 20.0787 16.1751 20.1588 16.588 20.16C17.0462 20.1614 17.6667 20 18.0662 19.7756C18.4263 19.5733 18.6911 19.3085 19.2207 18.7789L19.3783 18.6213C19.9098 18.0898 20.1755 17.8241 20.3198 17.5387C20.6069 16.9712 20.6069 16.3009 20.3198 15.7333C20.1755 15.448 19.9098 15.1822 19.3783 14.6508L19.1835 14.4559C18.8339 14.1063 18.6591 13.9315 18.4833 13.8172C17.8204 13.3862 16.9658 13.3862 16.3029 13.8172C16.1271 13.9315 15.9523 14.1063 15.6027 14.4559C15.4884 14.5702 15.4313 14.6274 15.3644 14.6752C15.127 14.8453 14.7828 14.904 14.5024 14.8222C14.4235 14.7992 14.3612 14.7693 14.2365 14.7094C12.7869 14.0134 11.4282 13.0646 10.2266 11.8631Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M14.9996 2V7M14.9996 7L19.9996 7M14.9996 7L20.9996 1M10.2266 11.8631C9.02506 10.6615 8.07627 9.30285 7.38028 7.85323C7.32041 7.72854 7.29048 7.66619 7.26748 7.5873C7.18576 7.30695 7.24446 6.96269 7.41447 6.72526C7.46231 6.65845 7.51947 6.60129 7.63378 6.48698C7.98338 6.13737 8.15819 5.96257 8.27247 5.78679C8.70347 5.1239 8.70347 4.26932 8.27247 3.60643C8.15819 3.43065 7.98338 3.25585 7.63378 2.90624L7.43891 2.71137C6.90747 2.17993 6.64174 1.91421 6.35636 1.76987C5.7888 1.4828 5.11854 1.4828 4.55098 1.76987C4.2656 1.91421 3.99987 2.17993 3.46843 2.71137L3.3108 2.86901C2.78117 3.39863 2.51636 3.66344 2.31411 4.02348C2.08969 4.42298 1.92833 5.04347 1.9297 5.5017C1.93092 5.91464 2.01103 6.19687 2.17124 6.76131C3.03221 9.79471 4.65668 12.6571 7.04466 15.045C9.43264 17.433 12.295 19.0575 15.3284 19.9185C15.8928 20.0787 16.1751 20.1588 16.588 20.16C17.0462 20.1614 17.6667 20 18.0662 19.7756C18.4263 19.5733 18.6911 19.3085 19.2207 18.7789L19.3783 18.6213C19.9098 18.0898 20.1755 17.8241 20.3198 17.5387C20.6069 16.9712 20.6069 16.3009 20.3198 15.7333C20.1755 15.448 19.9098 15.1822 19.3783 14.6508L19.1835 14.4559C18.8339 14.1063 18.6591 13.9315 18.4833 13.8172C17.8204 13.3862 16.9658 13.3862 16.3029 13.8172C16.1271 13.9315 15.9523 14.1063 15.6027 14.4559C15.4884 14.5702 15.4313 14.6274 15.3644 14.6752C15.127 14.8453 14.7828 14.904 14.5024 14.8222C14.4235 14.7992 14.3612 14.7693 14.2365 14.7094C12.7869 14.0134 11.4282 13.0646 10.2266 11.8631Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="relay" viewBox="0 0 22 22" fill="none">
-      <path d="M21 9.5L20.5256 5.70463C20.3395 4.21602 20.2465 3.47169 19.8961 2.9108C19.5875 2.41662 19.1416 2.02301 18.613 1.77804C18.013 1.5 17.2629 1.5 15.7626 1.5H6.23735C4.73714 1.5 3.98704 1.5 3.38702 1.77804C2.85838 2.02301 2.4125 2.41662 2.10386 2.9108C1.75354 3.47169 1.6605 4.21601 1.47442 5.70463L1 9.5M4.5 13.5H17.5M4.5 13.5C2.567 13.5 1 11.933 1 10C1 8.067 2.567 6.5 4.5 6.5H17.5C19.433 6.5 21 8.067 21 10C21 11.933 19.433 13.5 17.5 13.5M4.5 13.5C2.567 13.5 1 15.067 1 17C1 18.933 2.567 20.5 4.5 20.5H17.5C19.433 20.5 21 18.933 21 17C21 15.067 19.433 13.5 17.5 13.5M5 10H5.01M5 17H5.01M11 10H17M11 17H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M21 9.5L20.5256 5.70463C20.3395 4.21602 20.2465 3.47169 19.8961 2.9108C19.5875 2.41662 19.1416 2.02301 18.613 1.77804C18.013 1.5 17.2629 1.5 15.7626 1.5H6.23735C4.73714 1.5 3.98704 1.5 3.38702 1.77804C2.85838 2.02301 2.4125 2.41662 2.10386 2.9108C1.75354 3.47169 1.6605 4.21601 1.47442 5.70463L1 9.5M4.5 13.5H17.5M4.5 13.5C2.567 13.5 1 11.933 1 10C1 8.067 2.567 6.5 4.5 6.5H17.5C19.433 6.5 21 8.067 21 10C21 11.933 19.433 13.5 17.5 13.5M4.5 13.5C2.567 13.5 1 15.067 1 17C1 18.933 2.567 20.5 4.5 20.5H17.5C19.433 20.5 21 18.933 21 17C21 15.067 19.433 13.5 17.5 13.5M5 10H5.01M5 17H5.01M11 10H17M11 17H17"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="reply" viewBox="0 0 18 18" fill="none">
-      <path d="M1.5 5.5C1.5 4.09987 1.5 3.3998 1.77248 2.86502C2.01217 2.39462 2.39462 2.01217 2.86502 1.77248C3.3998 1.5 4.09987 1.5 5.5 1.5H12.5C13.9001 1.5 14.6002 1.5 15.135 1.77248C15.6054 2.01217 15.9878 2.39462 16.2275 2.86502C16.5 3.3998 16.5 4.09987 16.5 5.5V10C16.5 11.4001 16.5 12.1002 16.2275 12.635C15.9878 13.1054 15.6054 13.4878 15.135 13.7275C14.6002 14 13.9001 14 12.5 14H10.4031C9.88308 14 9.62306 14 9.37435 14.051C9.15369 14.0963 8.94017 14.1712 8.73957 14.2737C8.51347 14.3892 8.31043 14.5517 7.90434 14.8765L5.91646 16.4668C5.56973 16.7442 5.39636 16.8829 5.25045 16.8831C5.12356 16.8832 5.00352 16.8255 4.92436 16.7263C4.83333 16.6123 4.83333 16.3903 4.83333 15.9463V14C4.05836 14 3.67087 14 3.35295 13.9148C2.49022 13.6836 1.81635 13.0098 1.58519 12.147C1.5 11.8291 1.5 11.4416 1.5 10.6667V5.5Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M1.5 5.5C1.5 4.09987 1.5 3.3998 1.77248 2.86502C2.01217 2.39462 2.39462 2.01217 2.86502 1.77248C3.3998 1.5 4.09987 1.5 5.5 1.5H12.5C13.9001 1.5 14.6002 1.5 15.135 1.77248C15.6054 2.01217 15.9878 2.39462 16.2275 2.86502C16.5 3.3998 16.5 4.09987 16.5 5.5V10C16.5 11.4001 16.5 12.1002 16.2275 12.635C15.9878 13.1054 15.6054 13.4878 15.135 13.7275C14.6002 14 13.9001 14 12.5 14H10.4031C9.88308 14 9.62306 14 9.37435 14.051C9.15369 14.0963 8.94017 14.1712 8.73957 14.2737C8.51347 14.3892 8.31043 14.5517 7.90434 14.8765L5.91646 16.4668C5.56973 16.7442 5.39636 16.8829 5.25045 16.8831C5.12356 16.8832 5.00352 16.8255 4.92436 16.7263C4.83333 16.6123 4.83333 16.3903 4.83333 15.9463V14C4.05836 14 3.67087 14 3.35295 13.9148C2.49022 13.6836 1.81635 13.0098 1.58519 12.147C1.5 11.8291 1.5 11.4416 1.5 10.6667V5.5Z"
+        stroke="currentColor"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="repost" viewBox="0 0 22 20" fill="none">
-      <path d="M1 12C1 12 1.12132 12.8492 4.63604 16.364C8.15076 19.8787 13.8492 19.8787 17.364 16.364C18.6092 15.1187 19.4133 13.5993 19.7762 12M1 12V18M1 12H7M21 8C21 8 20.8787 7.15076 17.364 3.63604C13.8492 0.12132 8.15076 0.12132 4.63604 3.63604C3.39076 4.88131 2.58669 6.40072 2.22383 8M21 8V2M21 8H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M1 12C1 12 1.12132 12.8492 4.63604 16.364C8.15076 19.8787 13.8492 19.8787 17.364 16.364C18.6092 15.1187 19.4133 13.5993 19.7762 12M1 12V18M1 12H7M21 8C21 8 20.8787 7.15076 17.364 3.63604C13.8492 0.12132 8.15076 0.12132 4.63604 3.63604C3.39076 4.88131 2.58669 6.40072 2.22383 8M21 8V2M21 8H15"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="share" viewBox="0 0 18 16" fill="none">
-      <path d="M16.3261 8.50715C16.5296 8.33277 16.6313 8.24559 16.6686 8.14184C16.7013 8.05078 16.7013 7.95117 16.6686 7.86011C16.6313 7.75636 16.5296 7.66918 16.3261 7.4948L9.26719 1.44429C8.917 1.14412 8.74191 0.99404 8.59367 0.990363C8.46483 0.987167 8.34177 1.04377 8.26035 1.14367C8.16667 1.25861 8.16667 1.48923 8.16667 1.95045V5.52984C6.38777 5.84105 4.75966 6.74244 3.54976 8.09586C2.23069 9.5714 1.50103 11.4809 1.5 13.4601V13.9701C2.37445 12.9167 3.46626 12.0647 4.70063 11.4726C5.78891 10.9505 6.96535 10.6412 8.16667 10.5597V14.0515C8.16667 14.5127 8.16667 14.7433 8.26035 14.8583C8.34177 14.9582 8.46483 15.0148 8.59367 15.0116C8.74191 15.0079 8.917 14.8578 9.26719 14.5577L16.3261 8.50715Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M16.3261 8.50715C16.5296 8.33277 16.6313 8.24559 16.6686 8.14184C16.7013 8.05078 16.7013 7.95117 16.6686 7.86011C16.6313 7.75636 16.5296 7.66918 16.3261 7.4948L9.26719 1.44429C8.917 1.14412 8.74191 0.99404 8.59367 0.990363C8.46483 0.987167 8.34177 1.04377 8.26035 1.14367C8.16667 1.25861 8.16667 1.48923 8.16667 1.95045V5.52984C6.38777 5.84105 4.75966 6.74244 3.54976 8.09586C2.23069 9.5714 1.50103 11.4809 1.5 13.4601V13.9701C2.37445 12.9167 3.46626 12.0647 4.70063 11.4726C5.78891 10.9505 6.96535 10.6412 8.16667 10.5597V14.0515C8.16667 14.5127 8.16667 14.7433 8.26035 14.8583C8.34177 14.9582 8.46483 15.0148 8.59367 15.0116C8.74191 15.0079 8.917 14.8578 9.26719 14.5577L16.3261 8.50715Z"
+        stroke="currentColor"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="translate" viewBox="0 0 20 18" fill="none">
-      <path d="M10.7608 13.1667H16.7391M10.7608 13.1667L9.16663 16.5M10.7608 13.1667L13.1485 8.17419C13.3409 7.77189 13.4371 7.57075 13.5688 7.50718C13.6832 7.4519 13.8167 7.4519 13.9311 7.50718C14.0628 7.57075 14.159 7.77189 14.3514 8.17419L16.7391 13.1667M16.7391 13.1667L18.3333 16.5M1.66663 3.16667H6.66663M6.66663 3.16667H9.58329M6.66663 3.16667V1.5M9.58329 3.16667H11.6666M9.58329 3.16667C9.16984 5.63107 8.21045 7.86349 6.80458 9.73702M8.33329 10.6667C7.82285 10.4373 7.30217 10.1184 6.80458 9.73702M6.80458 9.73702C5.67748 8.87314 4.66893 7.68886 4.16663 6.5M6.80458 9.73702C5.46734 11.5191 3.72615 12.9765 1.66663 14" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M10.7608 13.1667H16.7391M10.7608 13.1667L9.16663 16.5M10.7608 13.1667L13.1485 8.17419C13.3409 7.77189 13.4371 7.57075 13.5688 7.50718C13.6832 7.4519 13.8167 7.4519 13.9311 7.50718C14.0628 7.57075 14.159 7.77189 14.3514 8.17419L16.7391 13.1667M16.7391 13.1667L18.3333 16.5M1.66663 3.16667H6.66663M6.66663 3.16667H9.58329M6.66663 3.16667V1.5M9.58329 3.16667H11.6666M9.58329 3.16667C9.16984 5.63107 8.21045 7.86349 6.80458 9.73702M8.33329 10.6667C7.82285 10.4373 7.30217 10.1184 6.80458 9.73702M6.80458 9.73702C5.67748 8.87314 4.66893 7.68886 4.16663 6.5M6.80458 9.73702C5.46734 11.5191 3.72615 12.9765 1.66663 14"
+        stroke="currentColor"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="trash" viewBox="0 0 20 22" fill="none">
-      <path d="M14 5V4.2C14 3.0799 14 2.51984 13.782 2.09202C13.5903 1.71569 13.2843 1.40973 12.908 1.21799C12.4802 1 11.9201 1 10.8 1H9.2C8.07989 1 7.51984 1 7.09202 1.21799C6.71569 1.40973 6.40973 1.71569 6.21799 2.09202C6 2.51984 6 3.0799 6 4.2V5M1 5H19M17 5V16.2C17 17.8802 17 18.7202 16.673 19.362C16.3854 19.9265 15.9265 20.3854 15.362 20.673C14.7202 21 13.8802 21 12.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M14 5V4.2C14 3.0799 14 2.51984 13.782 2.09202C13.5903 1.71569 13.2843 1.40973 12.908 1.21799C12.4802 1 11.9201 1 10.8 1H9.2C8.07989 1 7.51984 1 7.09202 1.21799C6.71569 1.40973 6.40973 1.71569 6.21799 2.09202C6 2.51984 6 3.0799 6 4.2V5M1 5H19M17 5V16.2C17 17.8802 17 18.7202 16.673 19.362C16.3854 19.9265 15.9265 20.3854 15.362 20.673C14.7202 21 13.8802 21 12.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V5"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="write" viewBox="0 0 22 22" fill="none">
-      <path d="M20.9996 6V1M20.9996 1H15.9996M20.9996 1L14.9996 7M10.2266 11.8631C9.02506 10.6615 8.07627 9.30285 7.38028 7.85323C7.32041 7.72854 7.29048 7.66619 7.26748 7.5873C7.18576 7.30695 7.24446 6.96269 7.41447 6.72526C7.46231 6.65845 7.51947 6.60129 7.63378 6.48698C7.98338 6.13737 8.15819 5.96257 8.27247 5.78679C8.70347 5.1239 8.70347 4.26932 8.27247 3.60643C8.15819 3.43065 7.98338 3.25585 7.63378 2.90624L7.43891 2.71137C6.90747 2.17993 6.64174 1.91421 6.35636 1.76987C5.7888 1.4828 5.11854 1.4828 4.55098 1.76987C4.2656 1.91421 3.99987 2.17993 3.46843 2.71137L3.3108 2.86901C2.78117 3.39863 2.51636 3.66344 2.31411 4.02348C2.08969 4.42298 1.92833 5.04347 1.9297 5.5017C1.93092 5.91464 2.01103 6.19687 2.17124 6.76131C3.03221 9.79471 4.65668 12.6571 7.04466 15.045C9.43264 17.433 12.295 19.0575 15.3284 19.9185C15.8928 20.0787 16.1751 20.1588 16.588 20.16C17.0462 20.1614 17.6667 20 18.0662 19.7756C18.4263 19.5733 18.6911 19.3085 19.2207 18.7789L19.3783 18.6213C19.9098 18.0898 20.1755 17.8241 20.3198 17.5387C20.6069 16.9712 20.6069 16.3009 20.3198 15.7333C20.1755 15.448 19.9098 15.1822 19.3783 14.6508L19.1835 14.4559C18.8339 14.1063 18.6591 13.9315 18.4833 13.8172C17.8204 13.3862 16.9658 13.3862 16.3029 13.8172C16.1271 13.9315 15.9523 14.1063 15.6027 14.4559C15.4884 14.5702 15.4313 14.6274 15.3644 14.6752C15.127 14.8453 14.7828 14.904 14.5024 14.8222C14.4235 14.7992 14.3612 14.7693 14.2365 14.7094C12.7869 14.0134 11.4282 13.0646 10.2266 11.8631Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M20.9996 6V1M20.9996 1H15.9996M20.9996 1L14.9996 7M10.2266 11.8631C9.02506 10.6615 8.07627 9.30285 7.38028 7.85323C7.32041 7.72854 7.29048 7.66619 7.26748 7.5873C7.18576 7.30695 7.24446 6.96269 7.41447 6.72526C7.46231 6.65845 7.51947 6.60129 7.63378 6.48698C7.98338 6.13737 8.15819 5.96257 8.27247 5.78679C8.70347 5.1239 8.70347 4.26932 8.27247 3.60643C8.15819 3.43065 7.98338 3.25585 7.63378 2.90624L7.43891 2.71137C6.90747 2.17993 6.64174 1.91421 6.35636 1.76987C5.7888 1.4828 5.11854 1.4828 4.55098 1.76987C4.2656 1.91421 3.99987 2.17993 3.46843 2.71137L3.3108 2.86901C2.78117 3.39863 2.51636 3.66344 2.31411 4.02348C2.08969 4.42298 1.92833 5.04347 1.9297 5.5017C1.93092 5.91464 2.01103 6.19687 2.17124 6.76131C3.03221 9.79471 4.65668 12.6571 7.04466 15.045C9.43264 17.433 12.295 19.0575 15.3284 19.9185C15.8928 20.0787 16.1751 20.1588 16.588 20.16C17.0462 20.1614 17.6667 20 18.0662 19.7756C18.4263 19.5733 18.6911 19.3085 19.2207 18.7789L19.3783 18.6213C19.9098 18.0898 20.1755 17.8241 20.3198 17.5387C20.6069 16.9712 20.6069 16.3009 20.3198 15.7333C20.1755 15.448 19.9098 15.1822 19.3783 14.6508L19.1835 14.4559C18.8339 14.1063 18.6591 13.9315 18.4833 13.8172C17.8204 13.3862 16.9658 13.3862 16.3029 13.8172C16.1271 13.9315 15.9523 14.1063 15.6027 14.4559C15.4884 14.5702 15.4313 14.6274 15.3644 14.6752C15.127 14.8453 14.7828 14.904 14.5024 14.8222C14.4235 14.7992 14.3612 14.7693 14.2365 14.7094C12.7869 14.0134 11.4282 13.0646 10.2266 11.8631Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="bitcoin" viewBox="0 0 16 22" fill="none">
-      <path d="M5.5 1V3M5.5 19V21M9.5 1V3M9.5 19V21M3.5 3H10C12.2091 3 14 4.79086 14 7C14 9.20914 12.2091 11 10 11H3.5H11C13.2091 11 15 12.7909 15 15C15 17.2091 13.2091 19 11 19H3.5M3.5 3H1.5M3.5 3V19M3.5 19H1.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M5.5 1V3M5.5 19V21M9.5 1V3M9.5 19V21M3.5 3H10C12.2091 3 14 4.79086 14 7C14 9.20914 12.2091 11 10 11H3.5H11C13.2091 11 15 12.7909 15 15C15 17.2091 13.2091 19 11 19H3.5M3.5 3H1.5M3.5 3V19M3.5 19H1.5"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </symbol>
     <symbol id="lightbulb" viewBox="0 0 22 22" fill="none">
-      <path d="M9 16.6586V19C9 20.1046 9.89543 21 11 21C12.1046 21 13 20.1046 13 19V16.6586M11 1V2M2 11H1M4.5 4.5L3.8999 3.8999M17.5 4.5L18.1002 3.8999M21 11H20M17 11C17 14.3137 14.3137 17 11 17C7.68629 17 5 14.3137 5 11C5 7.68629 7.68629 5 11 5C14.3137 5 17 7.68629 17 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      <path 
+        d="M9 16.6586V19C9 20.1046 9.89543 21 11 21C12.1046 21 13 20.1046 13 19V16.6586M11 1V2M2 11H1M4.5 4.5L3.8999 3.8999M17.5 4.5L18.1002 3.8999M21 11H20M17 11C17 14.3137 14.3137 17 11 17C7.68629 17 5 14.3137 5 11C5 7.68629 7.68629 5 11 5C14.3137 5 17 7.68629 17 11Z" 
+        stroke="currentColor" 
+        stroke-width="2" 
+        stroke-linecap="round" 
+        stroke-linejoin="round"
+      />
     </symbol>
-    <symbol id="openeye" viewBox="0 0 24 24" fill="none">
-      <path d="M1.42012 8.71318C1.28394 8.49754 1.21584 8.38972 1.17772 8.22342C1.14909 8.0985 1.14909 7.9015 1.17772 7.77658C1.21584 7.61028 1.28394 7.50246 1.42012 7.28682C2.54553 5.50484 5.8954 1 11.0004 1C16.1054 1 19.4553 5.50484 20.5807 7.28682C20.7169 7.50246 20.785 7.61028 20.8231 7.77658C20.8517 7.9015 20.8517 8.0985 20.8231 8.22342C20.785 8.38972 20.7169 8.49754 20.5807 8.71318C19.4553 10.4952 16.1054 15 11.0004 15C5.8954 15 2.54553 10.4952 1.42012 8.71318Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-      <path d="M11.0004 11C12.6573 11 14.0004 9.65685 14.0004 8C14.0004 6.34315 12.6573 5 11.0004 5C9.34355 5 8.0004 6.34315 8.0004 8C8.0004 9.65685 9.34355 11 11.0004 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-    </symbol>
-    <symbol id="closedeye" viewBox="0 0 24 24" fill="none">
-      <path d="M9.74294 3.09232C10.1494 3.03223 10.5686 3 11.0004 3C16.1054 3 19.4553 7.50484 20.5807 9.28682C20.7169 9.5025 20.785 9.61034 20.8231 9.77667C20.8518 9.90159 20.8517 10.0987 20.8231 10.2236C20.7849 10.3899 20.7164 10.4985 20.5792 10.7156C20.2793 11.1901 19.8222 11.8571 19.2165 12.5805M5.72432 4.71504C3.56225 6.1817 2.09445 8.21938 1.42111 9.28528C1.28428 9.50187 1.21587 9.61016 1.17774 9.77648C1.1491 9.9014 1.14909 10.0984 1.17771 10.2234C1.21583 10.3897 1.28393 10.4975 1.42013 10.7132C2.54554 12.4952 5.89541 17 11.0004 17C13.0588 17 14.8319 16.2676 16.2888 15.2766M2.00042 1L20.0004 19M8.8791 7.87868C8.3362 8.42157 8.00042 9.17157 8.00042 10C8.00042 11.6569 9.34356 13 11.0004 13C11.8288 13 12.5788 12.6642 13.1217 12.1213" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-    </symbol>
-    <symbol id="pie-chart" viewBox="0 0 22 22" fill="none">
-      <path d="M20.2104 14.8901C19.5742 16.3946 18.5792 17.7203 17.3123 18.7514C16.0454 19.7825 14.5452 20.4875 12.9428 20.8048C11.3405 21.1222 9.68483 21.0422 8.12055 20.5719C6.55627 20.1015 5.13103 19.2551 3.96942 18.1067C2.80782 16.9583 1.94522 15.5428 1.45704 13.984C0.968859 12.4252 0.869965 10.7706 1.169 9.1647C1.46804 7.55885 2.1559 6.0507 3.17245 4.7721C4.189 3.4935 5.50329 2.48339 7.0004 1.83007M20.2392 7.17323C20.6395 8.1397 20.8851 9.16143 20.9684 10.2009C20.989 10.4577 20.9993 10.5861 20.9483 10.7018C20.9057 10.7984 20.8213 10.8898 20.7284 10.94C20.6172 11.0001 20.4783 11.0001 20.2004 11.0001H11.8004C11.5204 11.0001 11.3804 11.0001 11.2734 10.9456C11.1793 10.8976 11.1028 10.8211 11.0549 10.7271C11.0004 10.6201 11.0004 10.4801 11.0004 10.2001V1.80007C11.0004 1.5222 11.0004 1.38327 11.0605 1.27205C11.1107 1.17915 11.2021 1.09476 11.2987 1.05216C11.4144 1.00117 11.5428 1.01146 11.7996 1.03205C12.839 1.11539 13.8608 1.36095 14.8272 1.76127C16.0405 2.26382 17.1429 3.00042 18.0715 3.929C19.0001 4.85759 19.7367 5.95998 20.2392 7.17323Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-    </symbol>
-    <symbol id="diamond" viewBox="0 0 22 20" fill="none">
-      <path d="M1.49954 7H20.4995M8.99954 1L6.99954 7L10.9995 18.5L14.9995 7L12.9995 1M11.6141 18.2625L20.5727 7.51215C20.7246 7.32995 20.8005 7.23885 20.8295 7.13717C20.8551 7.04751 20.8551 6.95249 20.8295 6.86283C20.8005 6.76114 20.7246 6.67005 20.5727 6.48785L16.2394 1.28785C16.1512 1.18204 16.1072 1.12914 16.0531 1.09111C16.0052 1.05741 15.9518 1.03238 15.8953 1.01717C15.8314 1 15.7626 1 15.6248 1H6.37424C6.2365 1 6.16764 1 6.10382 1.01717C6.04728 1.03238 5.99385 1.05741 5.94596 1.09111C5.89192 1.12914 5.84783 1.18204 5.75966 1.28785L1.42633 6.48785C1.2745 6.67004 1.19858 6.76114 1.16957 6.86283C1.144 6.95249 1.144 7.04751 1.16957 7.13716C1.19858 7.23885 1.2745 7.32995 1.42633 7.51215L10.385 18.2625C10.596 18.5158 10.7015 18.6424 10.8279 18.6886C10.9387 18.7291 11.0603 18.7291 11.1712 18.6886C11.2975 18.6424 11.4031 18.5158 11.6141 18.2625Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-    </symbol>
-    <symbol id="wallet" viewBox="0 0 22 18" fill="none">
-      <path d="M19 6.5V4.2C19 3.0799 19 2.51984 18.782 2.09202C18.5903 1.7157 18.2843 1.40974 17.908 1.21799C17.4802 1 16.9201 1 15.8 1H4.2C3.0799 1 2.51984 1 2.09202 1.21799C1.7157 1.40973 1.40973 1.71569 1.21799 2.09202C1 2.51984 1 3.0799 1 4.2V13.8C1 14.9201 1 15.4802 1.21799 15.908C1.40973 16.2843 1.71569 16.5903 2.09202 16.782C2.51984 17 3.07989 17 4.2 17L15.8 17C16.9201 17 17.4802 17 17.908 16.782C18.2843 16.5903 18.5903 16.2843 18.782 15.908C19 15.4802 19 14.9201 19 13.8V11.5M14 9C14 8.53535 14 8.30302 14.0384 8.10982C14.1962 7.31644 14.8164 6.69624 15.6098 6.53843C15.803 6.5 16.0353 6.5 16.5 6.5H18.5C18.9647 6.5 19.197 6.5 19.3902 6.53843C20.1836 6.69624 20.8038 7.31644 20.9616 8.10982C21 8.30302 21 8.53535 21 9C21 9.46466 21 9.69698 20.9616 9.89018C20.8038 10.6836 20.1836 11.3038 19.3902 11.4616C19.197 11.5 18.9647 11.5 18.5 11.5H16.5C16.0353 11.5 15.803 11.5 15.6098 11.4616C14.8164 11.3038 14.1962 10.6836 14.0384 9.89018C14 9.69698 14 9.46465 14 9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-    </symbol>
-    <symbol id="code-circle" viewBox="0 0 22 22" fill="none">
-      <path d="M13 16L16 13L13 10M9 6L6 9L9 12M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    </symbol>
-    <symbol id="key" viewBox="0 0 20 20" fill="none">
-      <path d="M15 6.99994C15 6.48812 14.8047 5.9763 14.4142 5.58579C14.0237 5.19526 13.5118 5 13 5M13 13C16.3137 13 19 10.3137 19 7C19 3.68629 16.3137 1 13 1C9.68629 1 7 3.68629 7 7C7 7.27368 7.01832 7.54308 7.05381 7.80704C7.11218 8.24118 7.14136 8.45825 7.12172 8.59559C7.10125 8.73865 7.0752 8.81575 7.00469 8.9419C6.937 9.063 6.81771 9.18229 6.57913 9.42087L1.46863 14.5314C1.29568 14.7043 1.2092 14.7908 1.14736 14.8917C1.09253 14.9812 1.05213 15.0787 1.02763 15.1808C1 15.2959 1 15.4182 1 15.6627V17.4C1 17.9601 1 18.2401 1.10899 18.454C1.20487 18.6422 1.35785 18.7951 1.54601 18.891C1.75992 19 2.03995 19 2.6 19H5V17H7V15H9L10.5791 13.4209C10.8177 13.1823 10.937 13.063 11.0581 12.9953C11.1843 12.9248 11.2613 12.8987 11.4044 12.8783C11.5417 12.8586 11.7588 12.8878 12.193 12.9462C12.4569 12.9817 12.7263 13 13 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    </symbol>
-    <symbol id="user" viewBox="0 0 18 20" fill="none">
-      <path d="M17 19C17 17.6044 17 16.9067 16.8278 16.3389C16.44 15.0605 15.4395 14.06 14.1611 13.6722C13.5933 13.5 12.8956 13.5 11.5 13.5H6.5C5.10444 13.5 4.40665 13.5 3.83886 13.6722C2.56045 14.06 1.56004 15.0605 1.17224 16.3389C1 16.9067 1 17.6044 1 19M13.5 5.5C13.5 7.98528 11.4853 10 9 10C6.51472 10 4.5 7.98528 4.5 5.5C4.5 3.01472 6.51472 1 9 1C11.4853 1 13.5 3.01472 13.5 5.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    </symbol>
-    <symbol id="camera-plus" viewBox="0 0 22 21" fill="none">
-      <path d="M21 10.5V13.6C21 15.8402 21 16.9603 20.564 17.816C20.1805 18.5686 19.5686 19.1805 18.816 19.564C17.9603 20 16.8402 20 14.6 20H7.4C5.15979 20 4.03969 20 3.18404 19.564C2.43139 19.1805 1.81947 18.5686 1.43597 17.816C1 16.9603 1 15.8402 1 13.6V8.4C1 6.15979 1 5.03969 1.43597 4.18404C1.81947 3.43139 2.43139 2.81947 3.18404 2.43597C4.03969 2 5.15979 2 7.4 2H11.5M18 7V1M15 4H21M15 11C15 13.2091 13.2091 15 11 15C8.79086 15 7 13.2091 7 11C7 8.79086 8.79086 7 11 7C13.2091 7 15 8.79086 15 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    </symbol>
-    <symbol id="edit" viewBox="0 0 23 23" fill="none">
-      <path d="M10 3.99998H5.8C4.11984 3.99998 3.27976 3.99998 2.63803 4.32696C2.07354 4.61458 1.6146 5.07353 1.32698 5.63801C1 6.27975 1 7.11983 1 8.79998V17.2C1 18.8801 1 19.7202 1.32698 20.362C1.6146 20.9264 2.07354 21.3854 2.63803 21.673C3.27976 22 4.11984 22 5.8 22H14.2C15.8802 22 16.7202 22 17.362 21.673C17.9265 21.3854 18.3854 20.9264 18.673 20.362C19 19.7202 19 18.8801 19 17.2V13M6.99997 16H8.67452C9.1637 16 9.40829 16 9.63846 15.9447C9.84254 15.8957 10.0376 15.8149 10.2166 15.7053C10.4184 15.5816 10.5914 15.4086 10.9373 15.0627L20.5 5.49998C21.3284 4.67156 21.3284 3.32841 20.5 2.49998C19.6716 1.67156 18.3284 1.67155 17.5 2.49998L7.93723 12.0627C7.59133 12.4086 7.41838 12.5816 7.29469 12.7834C7.18504 12.9624 7.10423 13.1574 7.05523 13.3615C6.99997 13.5917 6.99997 13.8363 6.99997 14.3255V16Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    </symbol>
-    <symbol id="arrow-right" viewBox="0 0 14 14" fill="none">
-      <path d="M1.16663 6.99935H12.8333M12.8333 6.99935L6.99996 1.16602M12.8333 6.99935L6.99996 12.8327" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
-    </symbol>
-    <symbol id="piggy-bank" viewBox="0 0 22 20" fill="none">
-      <path d="M3.99993 11C3.99993 12.6484 4.66466 14.1415 5.74067 15.226C5.84445 15.3305 5.89633 15.3828 5.92696 15.4331C5.95619 15.4811 5.9732 15.5224 5.98625 15.5771C5.99993 15.6343 5.99993 15.6995 5.99993 15.8298V18.2C5.99993 18.48 5.99993 18.62 6.05443 18.727C6.10236 18.8211 6.17885 18.8976 6.27293 18.9455C6.37989 19 6.5199 19 6.79993 19H8.69993C8.97996 19 9.11997 19 9.22693 18.9455C9.32101 18.8976 9.3975 18.8211 9.44543 18.727C9.49993 18.62 9.49993 18.48 9.49993 18.2V17.8C9.49993 17.52 9.49993 17.38 9.55443 17.273C9.60236 17.1789 9.67885 17.1024 9.77293 17.0545C9.87989 17 10.0199 17 10.2999 17H11.6999C11.98 17 12.12 17 12.2269 17.0545C12.321 17.1024 12.3975 17.1789 12.4454 17.273C12.4999 17.38 12.4999 17.52 12.4999 17.8V18.2C12.4999 18.48 12.4999 18.62 12.5544 18.727C12.6024 18.8211 12.6789 18.8976 12.7729 18.9455C12.8799 19 13.0199 19 13.2999 19H15.2C15.48 19 15.62 19 15.727 18.9455C15.8211 18.8976 15.8976 18.8211 15.9455 18.727C16 18.62 16 18.48 16 18.2V17.2243C16 17.0223 16 16.9212 16.0288 16.8401C16.0563 16.7624 16.0911 16.708 16.15 16.6502C16.2114 16.59 16.3155 16.5417 16.5237 16.445C17.5059 15.989 18.344 15.2751 18.9511 14.3902C19.0579 14.2346 19.1112 14.1568 19.1683 14.1108C19.2228 14.0668 19.2717 14.0411 19.3387 14.021C19.4089 14 19.4922 14 19.6587 14H20.2C20.48 14 20.62 14 20.727 13.9455C20.8211 13.8976 20.8976 13.8211 20.9455 13.727C21 13.62 21 13.48 21 13.2V9.78575C21 9.51916 21 9.38586 20.9505 9.28303C20.9013 9.181 20.819 9.09867 20.717 9.04953C20.6141 9 20.4808 9 20.2143 9C20.0213 9 19.9248 9 19.8471 8.9738C19.7633 8.94556 19.7045 8.90798 19.6437 8.84377C19.5874 8.78422 19.5413 8.68464 19.4493 8.48547C19.1538 7.84622 18.7492 7.26777 18.2593 6.77404C18.1555 6.66945 18.1036 6.61716 18.073 6.56687C18.0437 6.51889 18.0267 6.47759 18.0137 6.42294C18 6.36567 18 6.30051 18 6.17018V5.06058C18 4.70053 18 4.52051 17.925 4.39951C17.8593 4.29351 17.7564 4.21588 17.6365 4.18184C17.4995 4.14299 17.3264 4.19245 16.9802 4.29136L14.6077 4.96922C14.5673 4.98074 14.5472 4.9865 14.5267 4.99054C14.5085 4.99414 14.4901 4.99671 14.4716 4.99826C14.4508 5 14.4298 5 14.3879 5H13.959M3.99993 11C3.99993 8.69594 5.29864 6.6952 7.20397 5.6899M3.99993 11H3C1.89543 11 1 10.1046 1 9C1 8.25972 1.4022 7.61337 2 7.26756M14 4.5C14 6.433 12.433 8 10.5 8C8.567 8 7 6.433 7 4.5C7 2.567 8.567 1 10.5 1C12.433 1 14 2.567 14 4.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    </symbol>
-    <symbol id="clock" viewBox="0 0 22 22" fill="none">
-      <path d="M11 5V11L15 13M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    </symbol>
-    <symbol id="book-closed" viewBox="0 0 18 22" fill="none">
-      <path d="M17 18V15H4C2.34315 15 1 16.3431 1 18M5.8 21H13.8C14.9201 21 15.4802 21 15.908 20.782C16.2843 20.5903 16.5903 20.2843 16.782 19.908C17 19.4802 17 18.9201 17 17.8V4.2C17 3.07989 17 2.51984 16.782 2.09202C16.5903 1.71569 16.2843 1.40973 15.908 1.21799C15.4802 1 14.9201 1 13.8 1H5.8C4.11984 1 3.27976 1 2.63803 1.32698C2.07354 1.6146 1.6146 2.07354 1.32698 2.63803C1 3.27976 1 4.11984 1 5.8V16.2C1 17.8802 1 18.7202 1.32698 19.362C1.6146 19.9265 2.07354 20.3854 2.63803 20.673C3.27976 21 4.11984 21 5.8 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    </symbol>
-    <symbol id="shopping-bag" viewBox="0 0 22 22" fill="none">
-      <path d="M15.0004 8V5C15.0004 2.79086 13.2095 1 11.0004 1C8.79123 1 7.00037 2.79086 7.00037 5V8M2.59237 9.35196L1.99237 15.752C1.82178 17.5717 1.73648 18.4815 2.03842 19.1843C2.30367 19.8016 2.76849 20.3121 3.35839 20.6338C4.0299 21 4.94374 21 6.77142 21H15.2293C17.057 21 17.9708 21 18.6423 20.6338C19.2322 20.3121 19.6971 19.8016 19.9623 19.1843C20.2643 18.4815 20.179 17.5717 20.0084 15.752L19.4084 9.35197C19.2643 7.81535 19.1923 7.04704 18.8467 6.46616C18.5424 5.95458 18.0927 5.54511 17.555 5.28984C16.9444 5 16.1727 5 14.6293 5L7.37142 5C5.82806 5 5.05638 5 4.44579 5.28984C3.90803 5.54511 3.45838 5.95458 3.15403 6.46616C2.80846 7.04704 2.73643 7.81534 2.59237 9.35196Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    </symbol>
-    <symbol id="wifi" viewBox="0 0 24 18" fill="none">
-      <path d="M12 16.5H12.01M22.8064 5.70076C19.9595 3.09199 16.1656 1.5 11.9999 1.5C7.83414 1.5 4.04023 3.09199 1.19336 5.70076M4.73193 9.24297C6.67006 7.53566 9.21407 6.5 12 6.5C14.7859 6.5 17.3299 7.53566 19.268 9.24297M15.6983 12.7751C14.6792 11.9763 13.3952 11.5 11.9999 11.5C10.5835 11.5 9.28172 11.9908 8.25537 12.8116" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    </symbol>
-
   </defs>
 </svg>

packages/app/public/index.html

@@ -2,21 +2,23 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Feature packed nostr client" />
+    <meta name="description" content="Fast nostr web ui" />
     <meta
-      name="keywords"
-      content="nostr snort fast decentralized social media censorship resistant open source software" />
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; manifest-src *; child-src 'none'; worker-src 'self'; frame-src youtube.com www.youtube.com https://platform.twitter.com https://embed.tidal.com https://w.soundcloud.com https://www.mixcloud.com https://open.spotify.com https://player.twitch.tv https://embed.music.apple.com https://nostrnests.com https://embed.wavlake.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; connect-src *; img-src * data:; font-src https://fonts.gstatic.com; media-src *; script-src 'self' 'wasm-unsafe-eval' https://static.cloudflareinsights.com https://platform.twitter.com https://embed.tidal.com;" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://imgproxy.snort.social" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
-    <link rel="apple-touch-icon" href="/nostrich_512.png" />
-    <link rel="manifest" href="/manifest.json" />
-    <title>Snort - Nostr</title>
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/nostrich_512.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>snort.social - Nostr interface</title>
   </head>
+
   <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>
 </html>

packages/app/src/Cache/DMCache.ts

@@ -1,13 +1,13 @@
-import { NostrEvent } from "@snort/system";
-import { FeedCache } from "@snort/shared";
+import { RawEvent } from "@snort/nostr";
 import { db } from "Db";
+import FeedCache from "./FeedCache";
 
-export class ChatCache extends FeedCache<NostrEvent> {
+class DMCache extends FeedCache<RawEvent> {
   constructor() {
-    super("ChatCache", db.chats);
+    super("DMCache", db.dms);
   }
 
-  key(of: NostrEvent): string {
+  key(of: RawEvent): string {
     return of.id;
   }
 
@@ -23,7 +23,13 @@ export class ChatCache extends FeedCache<NostrEvent> {
     return ret;
   }
 
-  takeSnapshot(): Array<NostrEvent> {
+  allDms(): Array<RawEvent> {
     return [...this.cache.values()];
   }
+
+  takeSnapshot(): Array<RawEvent> {
+    return this.allDms();
+  }
 }
+
+export const DmCache = new DMCache();

packages/app/src/Cache/EventInteractionCache.ts

@@ -1,42 +0,0 @@
-import { FeedCache } from "@snort/shared";
-import { db, EventInteraction } from "Db";
-import { LoginStore } from "Login";
-import { sha256 } from "SnortUtils";
-
-export class EventInteractionCache extends FeedCache<EventInteraction> {
-  constructor() {
-    super("EventInteraction", db.eventInteraction);
-  }
-
-  key(of: EventInteraction): string {
-    return sha256(of.event + of.by);
-  }
-
-  override async preload(): Promise<void> {
-    await super.preload();
-
-    const data = window.localStorage.getItem("zap-cache");
-    if (data) {
-      const toImport = [...new Set<string>(JSON.parse(data) as Array<string>)].map(a => {
-        const ret = {
-          event: a,
-          by: LoginStore.takeSnapshot().publicKey,
-          zapped: true,
-          reacted: false,
-          reposted: false,
-        } as EventInteraction;
-        ret.id = this.key(ret);
-        return ret;
-      });
-      await this.bulkSet(toImport);
-
-      console.debug(`Imported dumb-zap-cache events: `, toImport.length);
-      window.localStorage.removeItem("zap-cache");
-    }
-    await this.buffer([...this.onTable]);
-  }
-
-  takeSnapshot(): EventInteraction[] {
-    return [...this.cache.values()];
-  }
-}

packages/app/src/Cache/FeedCache.ts

@@ -1,45 +1,38 @@
-import debug from "debug";
+import { db } from "Db";
 import { Table } from "dexie";
-import { unixNowMs, unwrap } from "./utils";
+import { unixNowMs, unwrap } from "Util";
 
 type HookFn = () => void;
 
-export interface KeyedHookFilter {
+interface HookFilter {
   key: string;
   fn: HookFn;
 }
 
-/**
- * Dexie backed generic hookable store
- */
-export abstract class FeedCache<TCached> {
+export default abstract class FeedCache<TCached> {
   #name: string;
-  #hooks: Array<KeyedHookFilter> = [];
+  #table: Table<TCached>;
+  #hooks: Array<HookFilter> = [];
   #snapshot: Readonly<Array<TCached>> = [];
   #changed = true;
-  #hits = 0;
-  #miss = 0;
-  protected table?: Table<TCached>;
   protected onTable: Set<string> = new Set();
   protected cache: Map<string, TCached> = new Map();
 
-  constructor(name: string, table?: Table<TCached>) {
+  constructor(name: string, table: Table<TCached>) {
     this.#name = name;
-    this.table = table;
+    this.#table = table;
     setInterval(() => {
-      debug(this.#name)(
-        "%d loaded, %d on-disk, %d hooks, %d% hit",
-        this.cache.size,
-        this.onTable.size,
-        this.#hooks.length,
-        ((this.#hits / (this.#hits + this.#miss)) * 100).toFixed(1)
+      console.debug(
+        `[${this.#name}] ${this.cache.size} loaded, ${this.onTable.size} on-disk, ${this.#hooks.length} hooks`
       );
-    }, 30_000);
+    }, 5_000);
   }
 
   async preload() {
-    const keys = await this.table?.toCollection().primaryKeys() ?? [];
-    this.onTable = new Set<string>(keys.map(a => a as string));
+    if (db.ready) {
+      const keys = await this.#table.toCollection().primaryKeys();
+      this.onTable = new Set<string>(keys.map(a => a as string));
+    }
   }
 
   hook(fn: HookFn, key: string | undefined) {
@@ -63,19 +56,13 @@ export abstract class FeedCache<TCached> {
 
   getFromCache(key?: string) {
     if (key) {
-      const ret = this.cache.get(key);
-      if (ret) {
-        this.#hits++;
-      } else {
-        this.#miss++;
-      }
-      return ret;
+      return this.cache.get(key);
     }
   }
 
   async get(key?: string) {
-    if (key && !this.cache.has(key) && this.table) {
-      const cached = await this.table.get(key);
+    if (key && !this.cache.has(key) && db.ready) {
+      const cached = await this.#table.get(key);
       if (cached) {
         this.cache.set(this.key(cached), cached);
         this.notifyChange([key]);
@@ -87,8 +74,8 @@ export abstract class FeedCache<TCached> {
 
   async bulkGet(keys: Array<string>) {
     const missing = keys.filter(a => !this.cache.has(a));
-    if (missing.length > 0 && this.table) {
-      const cached = await this.table.bulkGet(missing);
+    if (missing.length > 0 && db.ready) {
+      const cached = await this.#table.bulkGet(missing);
       cached.forEach(a => {
         if (a) {
           this.cache.set(this.key(a), a);
@@ -104,53 +91,22 @@ export abstract class FeedCache<TCached> {
   async set(obj: TCached) {
     const k = this.key(obj);
     this.cache.set(k, obj);
-    if (this.table) {
-      await this.table.put(obj);
+    if (db.ready) {
+      await this.#table.put(obj);
       this.onTable.add(k);
     }
     this.notifyChange([k]);
   }
 
   async bulkSet(obj: Array<TCached>) {
-    if (this.table) {
-      await this.table.bulkPut(obj);
+    if (db.ready) {
+      await this.#table.bulkPut(obj);
       obj.forEach(a => this.onTable.add(this.key(a)));
     }
     obj.forEach(v => this.cache.set(this.key(v), v));
     this.notifyChange(obj.map(a => this.key(a)));
   }
 
-  /**
-   * Try to update an entry where created values exists
-   * @param m Profile metadata
-   * @returns
-   */
-  async update<TCachedWithCreated extends TCached & { created: number; loaded: number }>(m: TCachedWithCreated) {
-    const k = this.key(m);
-    const existing = this.getFromCache(k) as TCachedWithCreated;
-    const updateType = (() => {
-      if (!existing) {
-        return "new";
-      }
-      if (existing.created < m.created) {
-        return "updated";
-      }
-      if (existing && existing.loaded < m.loaded) {
-        return "refresh";
-      }
-      return "no_change";
-    })();
-    debug(this.#name)("Updating %s %s %o", k, updateType, m);
-    if (updateType !== "no_change") {
-      const updated = {
-        ...existing,
-        ...m,
-      };
-      await this.set(updated);
-    }
-    return updateType;
-  }
-
   /**
    * Loads a list of rows from disk cache
    * @param keys List of ids to load
@@ -158,23 +114,22 @@ export abstract class FeedCache<TCached> {
    */
   async buffer(keys: Array<string>): Promise<Array<string>> {
     const needsBuffer = keys.filter(a => !this.cache.has(a));
-    if (this.table && needsBuffer.length > 0) {
+    if (db.ready && needsBuffer.length > 0) {
       const mapped = needsBuffer.map(a => ({
         has: this.onTable.has(a),
         key: a,
       }));
       const start = unixNowMs();
-      const fromCache = await this.table.bulkGet(mapped.filter(a => a.has).map(a => a.key));
+      const fromCache = await this.#table.bulkGet(mapped.filter(a => a.has).map(a => a.key));
       const fromCacheFiltered = fromCache.filter(a => a !== undefined).map(a => unwrap(a));
       fromCacheFiltered.forEach(a => {
         this.cache.set(this.key(a), a);
       });
       this.notifyChange(fromCacheFiltered.map(a => this.key(a)));
-      debug(this.#name)(
-        `Loaded %d/%d in %d ms`,
-        fromCacheFiltered.length,
-        keys.length,
-        (unixNowMs() - start).toLocaleString()
+      console.debug(
+        `[${this.#name}] Loaded ${fromCacheFiltered.length}/${keys.length} in ${(
+          unixNowMs() - start
+        ).toLocaleString()} ms`
       );
       return mapped.filter(a => !a.has).map(a => a.key);
     }
@@ -184,7 +139,7 @@ export abstract class FeedCache<TCached> {
   }
 
   async clear() {
-    await this.table?.clear();
+    await this.#table.clear();
     this.cache.clear();
     this.onTable.clear();
   }
@@ -199,7 +154,7 @@ export abstract class FeedCache<TCached> {
 
   protected notifyChange(keys: Array<string>) {
     this.#changed = true;
-    this.#hooks.filter(a => keys.includes(a.key) || a.key === "*").forEach(h => h.fn());
+    this.#hooks.filter(a => keys.includes(a.key)).forEach(h => h.fn());
   }
 
   abstract key(of: TCached): string;

packages/app/src/Cache/PaymentsCache.ts

@@ -1,16 +0,0 @@
-import { Payment, db } from "Db";
-import { FeedCache } from "@snort/shared";
-
-export class Payments extends FeedCache<Payment> {
-  constructor() {
-    super("PaymentsCache", db.payments);
-  }
-
-  key(of: Payment): string {
-    return of.url;
-  }
-
-  takeSnapshot(): Array<Payment> {
-    return [...this.cache.values()];
-  }
-}

packages/app/src/Cache/UserCache.ts

@@ -0,0 +1,100 @@
+import FeedCache from "Cache/FeedCache";
+import { db } from "Db";
+import { LNURL } from "LNURL";
+import { MetadataCache } from "Cache";
+
+class UserProfileCache extends FeedCache<MetadataCache> {
+  constructor() {
+    super("UserCache", db.users);
+  }
+
+  key(of: MetadataCache): string {
+    return of.pubkey;
+  }
+
+  async search(q: string): Promise<Array<MetadataCache>> {
+    if (db.ready) {
+      // on-disk cache will always have more data
+      return (
+        await db.users
+          .where("npub")
+          .startsWithIgnoreCase(q)
+          .or("name")
+          .startsWithIgnoreCase(q)
+          .or("display_name")
+          .startsWithIgnoreCase(q)
+          .or("nip05")
+          .startsWithIgnoreCase(q)
+          .toArray()
+      ).slice(0, 5);
+    } else {
+      return [...this.cache.values()]
+        .filter(user => {
+          const profile = user as MetadataCache;
+          return (
+            profile.name?.includes(q) ||
+            profile.npub?.includes(q) ||
+            profile.display_name?.includes(q) ||
+            profile.nip05?.includes(q)
+          );
+        })
+        .slice(0, 5);
+    }
+  }
+
+  /**
+   * Try to update the profile metadata cache with a new version
+   * @param m Profile metadata
+   * @returns
+   */
+  async update(m: MetadataCache) {
+    const existing = this.getFromCache(m.pubkey);
+    const updateType = (() => {
+      if (!existing) {
+        return "new_profile";
+      }
+      if (existing.created < m.created) {
+        return "updated_profile";
+      }
+      if (existing && existing.loaded < m.loaded) {
+        return "refresh_profile";
+      }
+      return "no_change";
+    })();
+    console.debug(`Updating ${m.pubkey} ${updateType}`, m);
+    if (updateType !== "no_change") {
+      if (updateType !== "refresh_profile") {
+        // fetch zapper key
+        const lnurl = m.lud16 || m.lud06;
+        if (lnurl) {
+          try {
+            const svc = new LNURL(lnurl);
+            await svc.load();
+            m.zapService = svc.zapperPubkey;
+          } catch {
+            console.warn("Failed to load LNURL for zapper pubkey", lnurl);
+          }
+        }
+      }
+
+      const writeProfile = {
+        ...existing,
+        ...m,
+      };
+      this.cache.set(m.pubkey, writeProfile);
+      if (db.ready) {
+        await db.users.put(writeProfile);
+        this.onTable.add(m.pubkey);
+      }
+      this.notifyChange([m.pubkey]);
+      return true;
+    }
+    return false;
+  }
+
+  takeSnapshot(): MetadataCache[] {
+    return [];
+  }
+}
+
+export const UserCache = new UserProfileCache();

packages/app/src/Cache/index.ts

@@ -1,22 +1,53 @@
-import { UserProfileCache, UserRelaysCache, RelayMetricCache } from "@snort/system";
-import { EventInteractionCache } from "./EventInteractionCache";
-import { ChatCache } from "./ChatCache";
-import { Payments } from "./PaymentsCache";
+import { HexKey, TaggedRawEvent, UserMetadata } from "@snort/nostr";
+import { hexToBech32, unixNowMs } from "Util";
+import { DmCache } from "./DMCache";
+import { UserCache } from "./UserCache";
 
-export const UserCache = new UserProfileCache();
-export const UserRelays = new UserRelaysCache();
-export const RelayMetrics = new RelayMetricCache();
-export const Chats = new ChatCache();
-export const PaymentsCache = new Payments();
-export const InteractionCache = new EventInteractionCache();
+export interface MetadataCache extends UserMetadata {
+  /**
+   * When the object was saved in cache
+   */
+  loaded: number;
 
-export async function preload(follows?: Array<string>) {
-  const preloads = [
-    UserCache.preload(follows),
-    Chats.preload(),
-    InteractionCache.preload(),
-    UserRelays.preload(follows),
-    RelayMetrics.preload(),
-  ];
-  await Promise.all(preloads);
+  /**
+   * When the source metadata event was created
+   */
+  created: number;
+
+  /**
+   * The pubkey of the owner of this metadata
+   */
+  pubkey: HexKey;
+
+  /**
+   * The bech32 encoded pubkey
+   */
+  npub: string;
+
+  /**
+   * Pubkey of zapper service
+   */
+  zapService?: HexKey;
 }
+
+export function mapEventToProfile(ev: TaggedRawEvent) {
+  try {
+    const data: UserMetadata = JSON.parse(ev.content);
+    return {
+      pubkey: ev.pubkey,
+      npub: hexToBech32("npub", ev.pubkey),
+      created: ev.created_at,
+      ...data,
+      loaded: unixNowMs(),
+    } as MetadataCache;
+  } catch (e) {
+    console.error("Failed to parse JSON", ev, e);
+  }
+}
+
+export async function preload() {
+  await UserCache.preload();
+  await DmCache.preload();
+}
+
+export { UserCache, DmCache };

packages/app/src/Const.ts

@@ -1,4 +1,4 @@
-import { RelaySettings } from "@snort/system";
+import { RelaySettings } from "@snort/nostr";
 
 /**
  * Add-on api for snort features
@@ -33,21 +33,21 @@ export const DefaultConnectTimeout = 2000;
 /**
  * How long profile cache should be considered valid for
  */
-export const ProfileCacheExpire = 1_000 * 60 * 60 * 6;
+export const ProfileCacheExpire = 1_000 * 60 * 30;
 
 /**
  * Default bootstrap relays
  */
 export const DefaultRelays = new Map<string, RelaySettings>([
-  ["wss://relay.snort.social/", { read: true, write: true }],
-  ["wss://nostr.wine/", { read: true, write: false }],
-  ["wss://nos.lol/", { read: true, write: true }],
+  ["wss://relay.snort.social", { read: true, write: true }],
+  ["wss://nostr.wine", { read: true, write: false }],
+  ["wss://nos.lol", { read: true, write: true }],
 ]);
 
 /**
  * Default search relays
  */
-export const SearchRelays = ["wss://relay.nostr.band"];
+export const SearchRelays = new Map<string, RelaySettings>([["wss://relay.nostr.band", { read: true, write: false }]]);
 
 /**
  * List of recommended follows for new users
@@ -74,15 +74,6 @@ export const RecommendedFollows = [
   "7fa56f5d6962ab1e3cd424e758c3002b8665f7b0d8dcee9fe9e288d7751ac194", // verbiricha
 ];
 
-/**
- * Snort imgproxy details
- */
-export const DefaultImgProxy = {
-  url: "https://imgproxy.snort.social",
-  key: "a82fcf26aa0ccb55dfc6b4bd6a1c90744d3be0f38429f21a8828b43449ce7cebe6bdc2b09a827311bef37b18ce35cb1e6b1c60387a254541afa9e5b4264ae942",
-  salt: "a897770d9abf163de055e9617891214e75a9016d748f8ef865e6ffbcb9ed932295659549773a22a019a5f06d0b440c320be411e3fddfe784e199e4f03d74bd9b",
-};
-
 /**
  * NIP06-defined derivation path for private keys
  */
@@ -98,7 +89,7 @@ export const EmailRegex =
 /**
  * Regex to match a mnemonic seed
  */
-export const MnemonicRegex = /(\w+)/g;
+export const MnemonicRegex = /^([^\s]+\s){11}[^\s]+$/;
 
 /**
  * Extract file extensions regex
@@ -131,7 +122,7 @@ export const TweetUrlRegex = /https?:\/\/twitter\.com\/(?:#!\/)?(\w+)\/status(?:
  * Hashtag regex
  */
 // eslint-disable-next-line no-useless-escape
-export const HashtagRegex = /(#[^\s!@#$%^&*()=+.\/,\[{\]};:'"?><]+)/g;
+export const HashtagRegex = /(#[^\s!@#$%^&*()=+.\/,\[{\]};:'"?><]+)/;
 
 /**
  * Tidal share link regex
@@ -177,10 +168,4 @@ export const MagnetRegex = /(magnet:[\S]+)/i;
 /**
  * Wavlake embed regex
  */
-export const WavlakeRegex =
-  /https?:\/\/(?:player\.|www\.)?wavlake\.com\/(?!top|new|artists|account|activity|login|preferences|feed|profile)(?:(?:track|album)\/[a-f0-9]{8}(?:-[a-f0-9]{4}){3}-[a-f0-9]{12}|[a-z-]+)/i;
-
-/*
- * Regex to match any base64 string
- */
-export const CashuRegex = /(cashuA[A-Za-z0-9_-]{0,10000}={0,3})/i;
+export const WavlakeRegex = /(?:player\.)?wavlake\.com\/(track\/[.a-zA-Z0-9-]+|album\/[.a-zA-Z0-9-]+|[.a-zA-Z0-9-]+)/i;

packages/app/src/Db/index.ts

@@ -1,8 +1,9 @@
 import Dexie, { Table } from "dexie";
-import { HexKey, NostrEvent, u256 } from "@snort/system";
+import { FullRelaySettings, HexKey, RawEvent, u256 } from "@snort/nostr";
+import { MetadataCache } from "Cache";
 
 export const NAME = "snortDB";
-export const VERSION = 11;
+export const VERSION = 7;
 
 export interface SubCache {
   id: string;
@@ -11,33 +12,33 @@ export interface SubCache {
   since?: number;
 }
 
-export interface EventInteraction {
-  id: u256;
-  event: u256;
-  by: HexKey;
-  reacted: boolean;
-  zapped: boolean;
-  reposted: boolean;
+export interface RelayMetrics {
+  addr: string;
+  events: number;
+  disconnects: number;
+  latency: number[];
 }
 
-export interface Payment {
-  url: string;
-  pr: string;
-  preimage: string;
-  macaroon: string;
+export interface UsersRelays {
+  pubkey: HexKey;
+  relays: FullRelaySettings[];
 }
 
 const STORES = {
-  chats: "++id",
-  eventInteraction: "++id",
-  payments: "++url",
+  users: "++pubkey, name, display_name, picture, nip05, npub",
+  relays: "++addr",
+  userRelays: "++pubkey",
+  events: "++id, pubkey, created_at",
+  dms: "++id, pubkey",
 };
 
 export class SnortDB extends Dexie {
   ready = false;
-  chats!: Table<NostrEvent>;
-  eventInteraction!: Table<EventInteraction>;
-  payments!: Table<Payment>;
+  users!: Table<MetadataCache>;
+  relayMetrics!: Table<RelayMetrics>;
+  userRelays!: Table<UsersRelays>;
+  events!: Table<RawEvent>;
+  dms!: Table<RawEvent>;
 
   constructor() {
     super(NAME);

packages/app/src/Element/AsyncButton.tsx

@@ -12,7 +12,6 @@ export default function AsyncButton(props: AsyncButtonProps) {
   const [loading, setLoading] = useState<boolean>(false);
 
   async function handle(e: React.MouseEvent) {
-    e.stopPropagation();
     if (loading || props.disabled) return;
     setLoading(true);
     try {

packages/app/src/Element/Avatar.css

@@ -8,7 +8,6 @@
   background-clip: content-box, border-box;
   background-size: cover;
   box-sizing: border-box;
-  background-color: var(--gray);
 }
 
 .avatar[data-domain="snort.social"] {

packages/app/src/Element/Avatar.tsx

@@ -2,32 +2,26 @@ import "./Avatar.css";
 import Nostrich from "nostrich.webp";
 
 import { CSSProperties, useEffect, useState } from "react";
-import type { UserMetadata } from "@snort/system";
+import type { UserMetadata } from "@snort/nostr";
 
 import useImgProxy from "Hooks/useImgProxy";
 
-interface AvatarProps {
-  user?: UserMetadata;
-  onClick?: () => void;
-  size?: number;
-}
-const Avatar = ({ user, size, onClick }: AvatarProps) => {
+const Avatar = ({ user, ...rest }: { user?: UserMetadata; onClick?: () => void }) => {
   const [url, setUrl] = useState<string>(Nostrich);
   const { proxy } = useImgProxy();
 
   useEffect(() => {
     if (user?.picture) {
-      const url = proxy(user.picture, size ?? 120);
-      setUrl(url);
-    } else {
-      setUrl(Nostrich);
+      proxy(user.picture, 120)
+        .then(a => setUrl(a))
+        .catch(console.warn);
     }
   }, [user]);
 
   const backgroundImage = `url(${url})`;
   const style = { "--img-url": backgroundImage } as CSSProperties;
   const domain = user?.nip05 && user.nip05.split("@")[1];
-  return <div onClick={onClick} style={style} className="avatar" data-domain={domain?.toLowerCase()}></div>;
+  return <div {...rest} style={style} className="avatar" data-domain={domain?.toLowerCase()}></div>;
 };
 
 export default Avatar;

packages/app/src/Element/AvatarEditor.tsx

@@ -1,49 +0,0 @@
-import Icon from "Icons/Icon";
-import { useState } from "react";
-import useFileUpload from "Upload";
-import { openFile, unwrap } from "SnortUtils";
-
-interface AvatarEditorProps {
-  picture?: string;
-  onPictureChange?: (newPicture: string) => void;
-}
-
-export default function AvatarEditor({ picture, onPictureChange }: AvatarEditorProps) {
-  const uploader = useFileUpload();
-  const [error, setError] = useState("");
-
-  async function uploadFile() {
-    setError("");
-    try {
-      const f = await openFile();
-      if (f) {
-        const rsp = await uploader.upload(f, f.name);
-        console.log(rsp);
-        if (typeof rsp?.error === "string") {
-          setError(`Upload failed: ${rsp.error}`);
-        } else {
-          onPictureChange?.(unwrap(rsp.url));
-        }
-      }
-    } catch (e) {
-      if (e instanceof Error) {
-        setError(`Upload failed: ${e.message}`);
-      } else {
-        setError(`Upload failed`);
-      }
-    }
-  }
-
-  return (
-    <>
-      <div className="flex f-center">
-        <div style={{ backgroundImage: `url(${picture})` }} className="avatar">
-          <div className={`edit${picture ? "" : " new"}`} onClick={() => uploadFile().catch(console.error)}>
-            <Icon name={picture ? "edit" : "camera-plus"} />
-          </div>
-        </div>
-      </div>
-      {error && <b className="error">{error}</b>}
-    </>
-  );
-}

packages/app/src/Element/BadgeList.tsx

@@ -3,13 +3,13 @@ import "./BadgeList.css";
 import { useState } from "react";
 import { FormattedMessage } from "react-intl";
 
-import { TaggedRawEvent } from "@snort/system";
+import { TaggedRawEvent } from "@snort/nostr";
 
 import { ProxyImg } from "Element/ProxyImg";
 import Icon from "Icons/Icon";
 import Modal from "Element/Modal";
 import Username from "Element/Username";
-import { findTag } from "SnortUtils";
+import { findTag } from "Util";
 
 export default function BadgeList({ badges }: { badges: TaggedRawEvent[] }) {
   const [showModal, setShowModal] = useState(false);

packages/app/src/Element/BlockButton.tsx

@@ -1,5 +1,5 @@
 import { FormattedMessage } from "react-intl";
-import { HexKey } from "@snort/system";
+import { HexKey } from "@snort/nostr";
 import useModeration from "Hooks/useModeration";
 
 import messages from "./messages";

packages/app/src/Element/Bookmarks.tsx

@@ -1,13 +1,13 @@
 import { useState, useMemo, ChangeEvent } from "react";
+import { useSelector } from "react-redux";
 import { FormattedMessage } from "react-intl";
-import { HexKey, TaggedRawEvent } from "@snort/system";
+import { HexKey, TaggedRawEvent } from "@snort/nostr";
 
 import Note from "Element/Note";
-import useLogin from "Hooks/useLogin";
-import { UserCache } from "Cache";
+import { RootState } from "State/Store";
+import { UserCache } from "Cache/UserCache";
 
 import messages from "./messages";
-
 interface BookmarksProps {
   pubkey: HexKey;
   bookmarks: readonly TaggedRawEvent[];
@@ -16,7 +16,7 @@ interface BookmarksProps {
 
 const Bookmarks = ({ pubkey, bookmarks, related }: BookmarksProps) => {
   const [onlyPubkey, setOnlyPubkey] = useState<HexKey | "all">("all");
-  const loginPubKey = useLogin().publicKey;
+  const loginPubKey = useSelector((s: RootState) => s.login.publicKey);
   const ps = useMemo(() => {
     return [...new Set(bookmarks.map(ev => ev.pubkey))];
   }, [bookmarks]);

packages/app/src/Element/CashuNuts.tsx

@@ -1,82 +0,0 @@
-import { useEffect, useState } from "react";
-import { FormattedMessage } from "react-intl";
-
-import useLogin from "Hooks/useLogin";
-import { useUserProfile } from "@snort/system-react";
-import { System } from "index";
-
-interface Token {
-  token: Array<{
-    mint: string;
-    proofs: Array<{
-      amount: number;
-    }>;
-  }>;
-  memo?: string;
-}
-
-export default function CashuNuts({ token }: { token: string }) {
-  const login = useLogin();
-  const profile = useUserProfile(System, login.publicKey);
-
-  async function copyToken(e: React.MouseEvent<HTMLButtonElement>, token: string) {
-    e.stopPropagation();
-    await navigator.clipboard.writeText(token);
-  }
-  async function redeemToken(e: React.MouseEvent<HTMLButtonElement>, token: string) {
-    e.stopPropagation();
-    const lnurl = profile?.lud16 ?? "";
-    const url = `https://redeem.cashu.me?token=${encodeURIComponent(token)}&lightning=${encodeURIComponent(
-      lnurl
-    )}&autopay=yes`;
-    window.open(url, "_blank");
-  }
-
-  const [cashu, setCashu] = useState<Token>();
-  useEffect(() => {
-    try {
-      if (!token.startsWith("cashuA") || token.length < 10) {
-        return;
-      }
-      import("@cashu/cashu-ts").then(({ getDecodedToken }) => {
-        const tkn = getDecodedToken(token);
-        setCashu(tkn);
-      });
-    } catch {
-      // ignored
-    }
-  }, [token]);
-
-  if (!cashu) return <>{token}</>;
-
-  return (
-    <div className="note-invoice">
-      <div className="flex f-between">
-        <div>
-          <h4>
-            <FormattedMessage defaultMessage="Cashu token" />
-          </h4>
-          <p>
-            <FormattedMessage
-              defaultMessage="Amount: {amount} sats"
-              values={{
-                amount: cashu.token[0].proofs.reduce((acc, v) => acc + v.amount, 0),
-              }}
-            />
-          </p>
-          <small className="xs">
-            <FormattedMessage defaultMessage="Mint: {url}" values={{ url: cashu.token[0].mint }} />
-          </small>
-        </div>
-        <div>
-          <button onClick={e => copyToken(e, token)} className="mr5">
-            <FormattedMessage defaultMessage="Copy" description="Button: Copy Cashu token" />
-          </button>
-          <button onClick={e => redeemToken(e, token)}>
-            <FormattedMessage defaultMessage="Redeem" description="Button: Redeem Cashu token" />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

packages/app/src/Element/Collapsed.tsx

@@ -32,25 +32,23 @@ export const CollapsedIcon = ({ icon, collapsed }: CollapsedIconProps) => {
 interface CollapsedSectionProps {
   title: ReactNode;
   children: ReactNode;
-  className?: string;
 }
 
-export const CollapsedSection = ({ title, children, className }: CollapsedSectionProps) => {
+export const CollapsedSection = ({ title, children }: CollapsedSectionProps) => {
   const [collapsed, setCollapsed] = useState(true);
   const icon = (
-    <div className={`collapse-icon ${collapsed ? "" : "flip"}`}>
-      <Icon name="arrowFront" />
+    <div className={`collapse-icon ${collapsed ? "" : "flip"}`} onClick={() => setCollapsed(!collapsed)}>
+      <Icon name="chevronDown" />
     </div>
   );
   return (
     <>
-      <div
-        className={`collapsable-section${className ? ` ${className}` : ""}`}
-        onClick={() => setCollapsed(!collapsed)}>
-        {title}
+      <div className="collapsable-section">
+        <h3 onClick={() => setCollapsed(!collapsed)}>{title}</h3>
         <CollapsedIcon icon={icon} collapsed={collapsed} />
       </div>
-      {!collapsed && children}
+
+      {collapsed ? null : children}
     </>
   );
 };

packages/app/src/Element/DM.css

@@ -1,37 +1,23 @@
 .dm {
-  margin-top: 16px;
+  padding: 8px;
+  background-color: var(--gray);
+  margin-bottom: 5px;
+  border-radius: 5px;
+  width: fit-content;
   min-width: 100px;
   max-width: 90%;
+  overflow: hidden;
+  min-height: 40px;
   white-space: pre-wrap;
-  color: var(--font-color);
 }
 
-.dm a {
-  color: var(--font-color) !important;
-}
-
-.dm > div:last-child {
+.dm > div:first-child {
   color: var(--gray-light);
   font-size: small;
-  margin-top: 3px;
-}
-
-.dm.other > div:first-child {
-  padding: 12px 16px;
-  background: var(--gray-secondary);
-  border-radius: 16px 16px 16px 0px;
+  margin-bottom: 3px;
 }
 
 .dm.me {
   align-self: flex-end;
-}
-
-.dm.me > div:first-child {
-  padding: 12px 16px;
-  background: var(--dm-gradient);
-  border-radius: 16px 16px 0px 16px;
-}
-
-.dm.me > div:last-child {
-  text-align: end;
+  background-color: var(--gray-secondary);
 }

packages/app/src/Element/DM.tsx

@@ -1,66 +1,58 @@
 import "./DM.css";
 import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import { useIntl } from "react-intl";
 import { useInView } from "react-intersection-observer";
-import { EventKind, TaggedRawEvent } from "@snort/system";
+import { HexKey, TaggedRawEvent } from "@snort/nostr";
 
 import useEventPublisher from "Feed/EventPublisher";
 import NoteTime from "Element/NoteTime";
 import Text from "Element/Text";
-import useLogin from "Hooks/useLogin";
-import { Chat, ChatType, chatTo, setLastReadIn } from "chat";
+import { setLastReadDm } from "Pages/MessagesPage";
+import { RootState } from "State/Store";
+import { incDmInteraction } from "State/Login";
+import { unwrap } from "Util";
 
 import messages from "./messages";
-import ProfileImage from "./ProfileImage";
 
-export interface DMProps {
-  chat: Chat;
+export type DMProps = {
   data: TaggedRawEvent;
-}
+};
 
 export default function DM(props: DMProps) {
-  const pubKey = useLogin().publicKey;
+  const dispatch = useDispatch();
+  const pubKey = useSelector<RootState, HexKey | undefined>(s => s.login.publicKey);
   const publisher = useEventPublisher();
-  const ev = props.data;
-  const needsDecryption = ev.kind === EventKind.DirectMessage;
-  const [content, setContent] = useState(needsDecryption ? "Loading..." : ev.content);
+  const [content, setContent] = useState("Loading...");
   const [decrypted, setDecrypted] = useState(false);
   const { ref, inView } = useInView();
   const { formatMessage } = useIntl();
-  const isMe = ev.pubkey === pubKey;
-  const otherPubkey = isMe ? pubKey : chatTo(ev);
+  const isMe = props.data.pubkey === pubKey;
+  const otherPubkey = isMe ? pubKey : unwrap(props.data.tags.find(a => a[0] === "p")?.[1]);
 
   async function decrypt() {
-    if (publisher) {
-      const decrypted = await publisher.decryptDm(ev);
-      setContent(decrypted || "<ERROR>");
-      if (!isMe) {
-        setLastReadIn(ev.pubkey);
-      }
-    }
-  }
-
-  function sender() {
-    if (props.chat.type !== ChatType.DirectMessage && !isMe) {
-      return <ProfileImage pubkey={ev.pubkey} />;
+    const decrypted = await publisher.decryptDm(props.data);
+    setContent(decrypted || "<ERROR>");
+    if (!isMe) {
+      setLastReadDm(props.data.pubkey);
+      dispatch(incDmInteraction());
     }
   }
 
   useEffect(() => {
-    if (!decrypted && inView && needsDecryption) {
+    if (!decrypted && inView) {
       setDecrypted(true);
       decrypt().catch(console.error);
     }
-  }, [inView, ev]);
+  }, [inView, props.data]);
 
   return (
-    <div className={isMe ? "dm me" : "dm other"} ref={ref}>
+    <div className={`flex dm f-col${isMe ? " me" : ""}`} ref={ref}>
       <div>
-        {sender()}
-        <Text content={content} tags={[]} creator={otherPubkey} />
+        <NoteTime from={props.data.created_at * 1000} fallback={formatMessage(messages.JustNow)} />
       </div>
-      <div>
-        <NoteTime from={ev.created_at * 1000} fallback={formatMessage(messages.JustNow)} />
+      <div className="w-max">
+        <Text content={content} tags={[]} creator={otherPubkey} />
       </div>
     </div>
   );

packages/app/src/Element/DmWindow.css

@@ -1,21 +0,0 @@
-.dm-window {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.dm-window > div:nth-child(2) {
-  overflow-y: auto;
-  padding: 0 10px 10px 10px;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column-reverse;
-}
-
-.dm-window > div:nth-child(3) {
-  display: flex;
-  align-items: center;
-  background-color: var(--bg-color);
-  gap: 10px;
-  padding: 5px 10px;
-}

packages/app/src/Element/DmWindow.tsx

@@ -1,62 +0,0 @@
-import "./DmWindow.css";
-import { useMemo } from "react";
-import { TaggedRawEvent } from "@snort/system";
-
-import ProfileImage from "Element/ProfileImage";
-import DM from "Element/DM";
-import NoteToSelf from "Element/NoteToSelf";
-import useLogin from "Hooks/useLogin";
-import WriteMessage from "Element/WriteMessage";
-import { Chat, ChatType, useChatSystem } from "chat";
-import { Nip4ChatSystem } from "chat/nip4";
-
-export default function DmWindow({ id }: { id: string }) {
-  const pubKey = useLogin().publicKey;
-  const dms = useChatSystem();
-  const chat = dms.find(a => a.id === id) ?? Nip4ChatSystem.createChatObj(id, []);
-
-  function sender() {
-    if (id === pubKey) {
-      return <NoteToSelf className="f-grow mb-10" pubkey={id} />;
-    }
-    if (chat?.type === ChatType.DirectMessage) {
-      return <ProfileImage pubkey={id} className="f-grow mb10" />;
-    }
-    if (chat?.profile) {
-      return <ProfileImage pubkey={id} className="f-grow mb10" profile={chat.profile} />;
-    }
-    return <ProfileImage pubkey={id ?? ""} className="f-grow mb10" overrideUsername={chat?.id} />;
-  }
-
-  return (
-    <div className="dm-window">
-      <div>{sender()}</div>
-      <div>
-        <div className="flex f-col">{chat && <DmChatSelected chat={chat} />}</div>
-      </div>
-      <div>
-        <WriteMessage chat={chat} />
-      </div>
-    </div>
-  );
-}
-
-function DmChatSelected({ chat }: { chat: Chat }) {
-  const { publicKey: myPubKey } = useLogin();
-  const sortedDms = useMemo(() => {
-    const myDms = chat?.messages;
-    if (myPubKey && myDms) {
-      // filter dms in this chat, or dms to self
-      return [...myDms].sort((a, b) => a.created_at - b.created_at);
-    }
-    return [];
-  }, [chat, myPubKey]);
-
-  return (
-    <>
-      {sortedDms.map(a => (
-        <DM data={a as TaggedRawEvent} key={a.id} chat={chat} />
-      ))}
-    </>
-  );
-}

packages/app/src/Element/FollowButton.tsx

@@ -1,12 +1,10 @@
 import "./FollowButton.css";
+import { useSelector } from "react-redux";
 import { FormattedMessage } from "react-intl";
-import { HexKey } from "@snort/system";
-
 import useEventPublisher from "Feed/EventPublisher";
-import { parseId } from "SnortUtils";
-import useLogin from "Hooks/useLogin";
-import AsyncButton from "Element/AsyncButton";
-import { System } from "index";
+import { HexKey } from "@snort/nostr";
+import { RootState } from "State/Store";
+import { parseId } from "Util";
 
 import messages from "./messages";
 
@@ -16,33 +14,26 @@ export interface FollowButtonProps {
 }
 export default function FollowButton(props: FollowButtonProps) {
   const pubkey = parseId(props.pubkey);
-  const publisher = useEventPublisher();
-  const { follows, relays } = useLogin();
-  const isFollowing = follows.item.includes(pubkey);
+  const publiser = useEventPublisher();
+  const isFollowing = useSelector<RootState, boolean>(s => s.login.follows?.includes(pubkey) ?? false);
   const baseClassname = `${props.className} follow-button`;
 
   async function follow(pubkey: HexKey) {
-    if (publisher) {
-      const ev = await publisher.contactList([pubkey, ...follows.item], relays.item);
-      System.BroadcastEvent(ev);
-    }
+    const ev = await publiser.addFollow(pubkey);
+    publiser.broadcast(ev);
   }
 
   async function unfollow(pubkey: HexKey) {
-    if (publisher) {
-      const ev = await publisher.contactList(
-        follows.item.filter(a => a !== pubkey),
-        relays.item
-      );
-      System.BroadcastEvent(ev);
-    }
+    const ev = await publiser.removeFollow(pubkey);
+    publiser.broadcast(ev);
   }
 
   return (
-    <AsyncButton
+    <button
+      type="button"
       className={isFollowing ? `${baseClassname} secondary` : baseClassname}
       onClick={() => (isFollowing ? unfollow(pubkey) : follow(pubkey))}>
       {isFollowing ? <FormattedMessage {...messages.Unfollow} /> : <FormattedMessage {...messages.Follow} />}
-    </AsyncButton>
+    </button>
   );
 }

packages/app/src/Element/FollowListBase.tsx

@@ -1,47 +1,31 @@
 import { ReactNode } from "react";
 import { FormattedMessage } from "react-intl";
-import { HexKey } from "@snort/system";
 
 import useEventPublisher from "Feed/EventPublisher";
+import { HexKey } from "@snort/nostr";
 import ProfilePreview from "Element/ProfilePreview";
-import useLogin from "Hooks/useLogin";
-import { System } from "index";
 
 import messages from "./messages";
 
 export interface FollowListBaseProps {
   pubkeys: HexKey[];
-  title?: ReactNode;
+  title?: ReactNode | string;
   showFollowAll?: boolean;
   showAbout?: boolean;
-  className?: string;
-  actions?: ReactNode;
 }
-
-export default function FollowListBase({
-  pubkeys,
-  title,
-  showFollowAll,
-  showAbout,
-  className,
-  actions,
-}: FollowListBaseProps) {
+export default function FollowListBase({ pubkeys, title, showFollowAll, showAbout }: FollowListBaseProps) {
   const publisher = useEventPublisher();
-  const { follows, relays } = useLogin();
 
   async function followAll() {
-    if (publisher) {
-      const ev = await publisher.contactList([...pubkeys, ...follows.item], relays.item);
-      System.BroadcastEvent(ev);
-    }
+    const ev = await publisher.addFollow(pubkeys);
+    publisher.broadcast(ev);
   }
 
   return (
-    <div className={className}>
+    <div className="main-content">
       {(showFollowAll ?? true) && (
         <div className="flex mt10 mb10">
           <div className="f-grow bold">{title}</div>
-          {actions}
           <button className="transparent" type="button" onClick={() => followAll()}>
             <FormattedMessage {...messages.FollowAll} />
           </button>

packages/app/src/Element/Hashtag.css

@@ -1,7 +1,3 @@
 .hashtag {
   color: var(--highlight);
 }
-
-.hashtag > a {
-  text-decoration: none;
-}

packages/app/src/Element/HyperText.tsx

@@ -13,7 +13,7 @@ import {
   NostrNestsRegex,
   WavlakeRegex,
 } from "Const";
-import { magnetURIDecode } from "SnortUtils";
+import { magnetURIDecode } from "Util";
 import SoundCloudEmbed from "Element/SoundCloudEmded";
 import MixCloudEmbed from "Element/MixCloudEmbed";
 import SpotifyEmbed from "Element/SpotifyEmbed";
@@ -26,7 +26,7 @@ import NostrLink from "Element/NostrLink";
 import RevealMedia from "Element/RevealMedia";
 import MagnetLink from "Element/MagnetLink";
 
-export default function HyperText({ link, creator, depth }: { link: string; creator: string; depth?: number }) {
+export default function HyperText({ link, creator }: { link: string; creator: string }) {
   const a = link;
   try {
     const url = new URL(a);
@@ -85,14 +85,21 @@ export default function HyperText({ link, creator, depth }: { link: string; crea
     } else if (isWavlakeLink) {
       return <WavlakeEmbed link={a} />;
     } else if (url.protocol === "nostr:" || url.protocol === "web+nostr:") {
-      return <NostrLink link={a} depth={depth} />;
+      return <NostrLink link={a} />;
     } else if (url.protocol === "magnet:") {
       const parsed = magnetURIDecode(a);
       if (parsed) {
         return <MagnetLink magnet={parsed} />;
       }
     } else {
-      return <LinkPreview url={a} />;
+      return (
+        <>
+          <a href={a} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
+            {a}
+          </a>
+          <LinkPreview url={a} />
+        </>
+      );
     }
   } catch {
     // Ignore the error.

packages/app/src/Element/Invoice.tsx

@@ -2,11 +2,11 @@ import "./Invoice.css";
 import { useState } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
 import { useMemo } from "react";
-import { decodeInvoice } from "@snort/shared";
 
 import SendSats from "Element/SendSats";
 import Icon from "Icons/Icon";
 import { useWallet } from "Wallet";
+import { decodeInvoice } from "Util";
 
 import messages from "./messages";
 

packages/app/src/Element/LinkPreview.css

@@ -1,32 +0,0 @@
-.link-preview-container {
-  border: 1px solid var(--gray);
-  border-radius: 10px;
-  overflow: hidden;
-}
-
-.link-preview-container:hover {
-  cursor: pointer;
-}
-
-.link-preview-container > a {
-  text-decoration: none;
-}
-
-.link-preview-title {
-  padding: 0 10px 10px 10px;
-}
-
-.link-preview-title > small {
-  color: var(--font-secondary-color);
-  font-size: small;
-}
-
-.link-preview-image {
-  margin: 0 0 15px 0 !important;
-  border-radius: 0 !important;
-  background-image: var(--img-url);
-  min-height: 250px;
-  max-height: 500px;
-  background-size: cover;
-  background-position: center;
-}

packages/app/src/Element/LinkPreview.tsx

@@ -1,15 +1,21 @@
-import "./LinkPreview.css";
-import { CSSProperties, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
+import { ApiHost } from "Const";
 import Spinner from "Icons/Spinner";
-import SnortApi, { LinkPreviewData } from "SnortApi";
-import useImgProxy from "Hooks/useImgProxy";
-import { MediaElement } from "Element/MediaElement";
+import { ProxyImg } from "Element/ProxyImg";
+
+interface LinkPreviewData {
+  title?: string;
+  description?: string;
+  image?: string;
+}
 
 async function fetchUrlPreviewInfo(url: string) {
-  const api = new SnortApi();
   try {
-    return await api.linkPreview(url);
+    const res = await fetch(`${ApiHost}/api/v1/preview?url=${encodeURIComponent(url)}`);
+    if (res.ok) {
+      return (await res.json()) as LinkPreviewData;
+    }
   } catch (e) {
     console.warn(`Failed to load link preview`, url);
   }
@@ -17,68 +23,31 @@ async function fetchUrlPreviewInfo(url: string) {
 
 const LinkPreview = ({ url }: { url: string }) => {
   const [preview, setPreview] = useState<LinkPreviewData | null>();
-  const { proxy } = useImgProxy();
 
   useEffect(() => {
     (async () => {
       const data = await fetchUrlPreviewInfo(url);
-      if (data) {
-        const type = data.og_tags?.find(a => a[0].toLowerCase() === "og:type");
-        const canPreviewType = type?.[1].startsWith("image") || type?.[1].startsWith("video") || false;
-        if (canPreviewType || data.image) {
-          setPreview(data);
-          return;
-        }
+      if (data && data.title) {
+        setPreview(data);
+      } else {
+        setPreview(null);
       }
-
-      setPreview(null);
     })();
   }, [url]);
 
-  if (preview === null)
-    return (
-      <a href={url} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
-        {url}
-      </a>
-    );
-
-  function previewElement() {
-    const type = preview?.og_tags?.find(a => a[0].toLowerCase() === "og:type")?.[1];
-    if (type?.startsWith("video")) {
-      const urlTags = ["og:video:secure_url", "og:video:url", "og:video"];
-      const link = preview?.og_tags?.find(a => urlTags.includes(a[0].toLowerCase()))?.[1];
-      const videoType = preview?.og_tags?.find(a => a[0].toLowerCase() === "og:video:type")?.[1] ?? "video/mp4";
-      if (link) {
-        return <MediaElement url={link} mime={videoType} />;
-      }
-    }
-    if (type?.startsWith("image")) {
-      const urlTags = ["og:image:secure_url", "og:image:url", "og:image"];
-      const link = preview?.og_tags?.find(a => urlTags.includes(a[0].toLowerCase()))?.[1];
-      const videoType = preview?.og_tags?.find(a => a[0].toLowerCase() === "og:image:type")?.[1] ?? "image/png";
-      if (link) {
-        return <MediaElement url={link} mime={videoType} />;
-      }
-    }
-    if (preview?.image) {
-      const backgroundImage = preview?.image ? `url(${proxy(preview?.image)})` : "";
-      const style = { "--img-url": backgroundImage } as CSSProperties;
-      return <div className="link-preview-image" style={style}></div>;
-    }
-    return null;
-  }
+  if (preview === null) return null;
 
   return (
     <div className="link-preview-container">
       {preview && (
         <a href={url} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
-          {previewElement()}
+          {preview?.image && <ProxyImg src={preview?.image} className="link-preview-image" />}
           <p className="link-preview-title">
             {preview?.title}
             {preview?.description && (
               <>
                 <br />
-                <small>{preview.description.slice(0, 160)}</small>
+                <small>{preview?.description}</small>
               </>
             )}
           </p>

packages/app/src/Element/LiveChat.css

@@ -1,47 +0,0 @@
-.live-chat {
-  height: calc(100vh - 100px);
-  display: flex;
-  flex-direction: column;
-}
-
-.live-chat > div:nth-child(1) {
-  font-size: 24px;
-  line-height: 29px;
-  font-weight: bold;
-}
-
-.live-chat > div:nth-child(2) {
-  flex-grow: 1;
-  display: flex;
-  gap: 16px;
-  flex-direction: column-reverse;
-  margin-block-end: 20px;
-  overflow-y: auto;
-}
-
-.live-chat > div:nth-child(3) {
-  display: flex;
-  gap: 10px;
-}
-
-.live-chat .message {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.live-chat .message .name {
-  display: inline-flex;
-  align-items: center;
-  color: var(--highlight);
-  font-weight: 600;
-  cursor: pointer;
-  user-select: none;
-}
-
-.live-chat .message .avatar {
-  width: 24px;
-  height: 24px;
-  display: inline-block;
-  margin-right: 8px;
-}

packages/app/src/Element/LiveChat.tsx

@@ -1,92 +0,0 @@
-import "./LiveChat.css";
-import { EventKind, NostrLink, TaggedRawEvent } from "@snort/system";
-import { useUserProfile } from "@snort/system-react";
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { FormattedMessage, useIntl } from "react-intl";
-
-import Textarea from "Element/Textarea";
-import { useLiveChatFeed } from "Feed/LiveChatFeed";
-import useEventPublisher from "Feed/EventPublisher";
-import { getDisplayName } from "Element/ProfileImage";
-import Avatar from "Element/Avatar";
-import AsyncButton from "Element/AsyncButton";
-import Text from "Element/Text";
-import { System } from "index";
-import { profileLink } from "SnortUtils";
-
-export function LiveChat({ ev, link }: { ev: TaggedRawEvent; link: NostrLink }) {
-  const [chat, setChat] = useState("");
-  const messages = useLiveChatFeed(link);
-  const pub = useEventPublisher();
-  const { formatMessage } = useIntl();
-
-  async function sendChatMessage() {
-    if (chat.length > 1) {
-      const reply = await pub?.generic(eb => {
-        return eb
-          .kind(1311 as EventKind)
-          .content(chat)
-          .tag(["a", `${link.kind}:${link.author}:${link.id}`])
-          .processContent();
-      });
-      if (reply) {
-        console.debug(reply);
-        System.BroadcastEvent(reply);
-      }
-      setChat("");
-    }
-  }
-  return (
-    <div className="live-chat">
-      <div>
-        <FormattedMessage defaultMessage="Stream Chat" />
-      </div>
-      <div>
-        {[...(messages.data ?? [])]
-          .sort((a, b) => b.created_at - a.created_at)
-          .map(a => (
-            <ChatMessage ev={a} key={a.id} />
-          ))}
-      </div>
-      <div>
-        <Textarea
-          autoFocus={false}
-          className=""
-          onChange={v => setChat(v.target.value)}
-          value={chat}
-          onFocus={() => {}}
-          placeholder={formatMessage({
-            defaultMessage: "Message...",
-          })}
-          onKeyDown={async e => {
-            if (e.code === "Enter") {
-              e.preventDefault();
-              await sendChatMessage();
-            }
-          }}
-        />
-        <AsyncButton onClick={sendChatMessage}>
-          <FormattedMessage defaultMessage="Send" />
-        </AsyncButton>
-      </div>
-    </div>
-  );
-}
-
-function ChatMessage({ ev }: { ev: TaggedRawEvent }) {
-  const profile = useUserProfile(System, ev.pubkey);
-  const navigate = useNavigate();
-
-  return (
-    <div className="message">
-      <div className="name" onClick={() => navigate(profileLink(ev.pubkey, ev.relays))}>
-        <Avatar user={profile} />
-        {getDisplayName(profile, ev.pubkey)}:
-      </div>
-      <span>
-        <Text disableMedia={true} content={ev.content} creator={ev.pubkey} tags={ev.tags} />
-      </span>
-    </div>
-  );
-}

packages/app/src/Element/LiveEvent.tsx

@@ -1,25 +0,0 @@
-import { NostrEvent, NostrPrefix, encodeTLV } from "@snort/system";
-import { findTag, unwrap } from "SnortUtils";
-import { FormattedMessage } from "react-intl";
-import { Link } from "react-router-dom";
-
-export function LiveEvent({ ev }: { ev: NostrEvent }) {
-  const title = findTag(ev, "title");
-  const d = unwrap(findTag(ev, "d"));
-  return (
-    <div className="text">
-      <div className="flex card">
-        <div className="f-grow">
-          <h3>{title}</h3>
-        </div>
-        <div>
-          <Link to={`/live/${encodeTLV(NostrPrefix.Address, d, undefined, ev.kind, ev.pubkey)}`}>
-            <button className="primary" type="button">
-              <FormattedMessage defaultMessage="Watch Live!" />
-            </button>
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-}

packages/app/src/Element/LiveVideoPlayer.tsx

@@ -1,19 +0,0 @@
-import Hls from "hls.js";
-import { HTMLProps, useEffect, useRef } from "react";
-
-export function LiveVideoPlayer(props: HTMLProps<HTMLVideoElement> & { stream: string }) {
-  const video = useRef<HTMLVideoElement>(null);
-  useEffect(() => {
-    if (props.stream && video.current && !video.current.src && Hls.isSupported()) {
-      const hls = new Hls();
-      hls.loadSource(props.stream);
-      hls.attachMedia(video.current);
-      return () => hls.destroy();
-    }
-  }, [video, props]);
-  return (
-    <div>
-      <video ref={video} {...props} controls={true} />
-    </div>
-  );
-}

packages/app/src/Element/LogoutButton.tsx

@@ -1,22 +1,24 @@
+import { useDispatch } from "react-redux";
 import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
+import { logout } from "State/Login";
 
-import { logout } from "Login";
-import useLogin from "Hooks/useLogin";
 import messages from "./messages";
 
 export default function LogoutButton() {
+  const dispatch = useDispatch();
   const navigate = useNavigate();
-  const publicKey = useLogin().publicKey;
 
-  if (!publicKey) return;
   return (
     <button
       className="secondary"
       type="button"
       onClick={() => {
-        logout(publicKey);
-        navigate("/");
+        dispatch(
+          logout(() => {
+            navigate("/");
+          })
+        );
       }}>
       <FormattedMessage {...messages.Logout} />
     </button>

packages/app/src/Element/MagnetLink.tsx

@@ -1,6 +1,6 @@
 import { FormattedMessage } from "react-intl";
 
-import { Magnet } from "SnortUtils";
+import { Magnet } from "Util";
 
 interface MagnetLinkProps {
   magnet: Magnet;

packages/app/src/Element/MediaElement.css

@@ -1,15 +0,0 @@
-.modal.spotlight .modal-body {
-  max-width: 100vw;
-  width: unset;
-}
-
-.modal.spotlight img,
-.modal.spotlight video {
-  max-width: 90vw;
-  max-height: 90vh;
-  aspect-ratio: unset;
-}
-
-.modal.spotlight .close {
-  text-align: right;
-}

packages/app/src/Element/MediaElement.tsx

@@ -1,224 +0,0 @@
-import { ProxyImg } from "Element/ProxyImg";
-import React, { MouseEvent, useEffect, useState } from "react";
-import { FormattedMessage, FormattedNumber } from "react-intl";
-import { Link } from "react-router-dom";
-import { decodeInvoice, InvoiceDetails } from "@snort/shared";
-
-import "./MediaElement.css";
-import Modal from "Element/Modal";
-import Icon from "Icons/Icon";
-import { kvToObject } from "SnortUtils";
-import AsyncButton from "Element/AsyncButton";
-import { useWallet } from "Wallet";
-import { PaymentsCache } from "Cache";
-import { Payment } from "Db";
-import PageSpinner from "Element/PageSpinner";
-import { LiveVideoPlayer } from "Element/LiveVideoPlayer";
-/*
-[
-  "imeta",
-  "url https://nostr.build/i/148e3e8cbe29ae268b0d6aad0065a086319d3c3b1fdf8b89f1e2327d973d2d05.jpg",
-  "blurhash e6A0%UE2t6D*R%?u?a9G?aM|~pM|%LR*RjR-%2NG%2t7_2R*%1IVWB",
-  "dim 3024x4032"
-],
-*/
-interface MediaElementProps {
-  mime: string;
-  url: string;
-  magnet?: string;
-  sha256?: string;
-  blurHash?: string;
-}
-
-interface L402Object {
-  macaroon: string;
-  invoice: string;
-}
-
-export function MediaElement(props: MediaElementProps) {
-  const [invoice, setInvoice] = useState<InvoiceDetails>();
-  const [l402, setL402] = useState<L402Object>();
-  const [auth, setAuth] = useState<Payment>();
-  const [error, setError] = useState("");
-  const [url, setUrl] = useState(props.url);
-  const [loading, setLoading] = useState(false);
-  const wallet = useWallet();
-
-  async function probeFor402() {
-    const cached = await PaymentsCache.get(props.url);
-    if (cached) {
-      setAuth(cached);
-      return;
-    }
-
-    const req = new Request(props.url, {
-      method: "OPTIONS",
-      headers: {
-        accept: "L402",
-      },
-    });
-    const rsp = await fetch(req);
-    if (rsp.status === 402) {
-      const auth = rsp.headers.get("www-authenticate");
-      if (auth?.startsWith("L402")) {
-        const vals = kvToObject<L402Object>(auth.substring(5));
-        console.debug(vals);
-        setL402(vals);
-
-        if (vals.invoice) {
-          const decoded = decodeInvoice(vals.invoice);
-          setInvoice(decoded);
-        }
-      }
-    }
-  }
-
-  async function payInvoice() {
-    if (wallet.wallet && l402) {
-      try {
-        const res = await wallet.wallet.payInvoice(l402.invoice);
-        console.debug(res);
-        if (res.preimage) {
-          const pmt = {
-            pr: l402.invoice,
-            url: props.url,
-            macaroon: l402.macaroon,
-            preimage: res.preimage,
-          };
-          await PaymentsCache.set(pmt);
-          setAuth(pmt);
-        }
-      } catch (e) {
-        if (e instanceof Error) {
-          setError(e.message);
-        }
-      }
-    }
-  }
-
-  async function loadMedia() {
-    if (!auth) return;
-    setLoading(true);
-
-    const mediaReq = new Request(props.url, {
-      headers: {
-        Authorization: `L402 ${auth.macaroon}:${auth.preimage}`,
-      },
-    });
-    const rsp = await fetch(mediaReq);
-    if (rsp.ok) {
-      const buf = await rsp.blob();
-      setUrl(URL.createObjectURL(buf));
-    }
-    setLoading(false);
-  }
-
-  useEffect(() => {
-    if (auth) {
-      loadMedia().catch(console.error);
-    }
-  }, [auth]);
-
-  if (auth && loading) {
-    return <PageSpinner />;
-  }
-
-  if (invoice) {
-    return (
-      <div className="note-invoice">
-        <h3>
-          <FormattedMessage defaultMessage="Payment Required" />
-        </h3>
-        <div className="flex f-row">
-          <div className="f-grow">
-            <FormattedMessage
-              defaultMessage="You must pay {n} sats to access this file."
-              values={{
-                n: <FormattedNumber value={(invoice.amount ?? 0) / 1000} />,
-              }}
-            />
-          </div>
-          <div>
-            {wallet.wallet && (
-              <AsyncButton onClick={() => payInvoice()}>
-                <FormattedMessage defaultMessage="Pay Now" />
-              </AsyncButton>
-            )}
-          </div>
-        </div>
-        {!wallet.wallet && (
-          <b>
-            <FormattedMessage
-              defaultMessage="Please connect a wallet {here} to be able to pay this invoice"
-              values={{
-                here: (
-                  <Link to="/settings/wallet" onClick={e => e.stopPropagation()}>
-                    <FormattedMessage defaultMessage="here" description="Inline link text pointing to another page" />
-                  </Link>
-                ),
-              }}
-            />
-          </b>
-        )}
-        {error && <b className="error">{error}</b>}
-      </div>
-    );
-  }
-
-  if (props.mime.startsWith("image/")) {
-    return (
-      <SpotlightMedia>
-        <ProxyImg key={props.url} src={url} onError={() => probeFor402()} />
-      </SpotlightMedia>
-    );
-  } else if (props.mime.startsWith("audio/")) {
-    return <audio key={props.url} src={url} controls onError={() => probeFor402()} />;
-  } else if (props.mime.startsWith("video/")) {
-    if (props.url.endsWith(".m3u8")) {
-      return <LiveVideoPlayer stream={props.url} />;
-    }
-    return <video key={props.url} src={url} controls onError={() => probeFor402()} />;
-  } else {
-    return (
-      <a
-        key={props.url}
-        href={props.url}
-        onClick={e => e.stopPropagation()}
-        target="_blank"
-        rel="noreferrer"
-        className="ext">
-        {props.url}
-      </a>
-    );
-  }
-}
-
-export function SpotlightMedia({ children }: { children: React.ReactNode }) {
-  const [showModal, setShowModal] = useState(false);
-
-  function onClick(e: MouseEvent<HTMLDivElement>) {
-    e.stopPropagation();
-    e.preventDefault();
-    setShowModal(s => !s);
-  }
-
-  function onClose(e: MouseEvent<HTMLDivElement>) {
-    e.stopPropagation();
-    e.preventDefault();
-    setShowModal(false);
-  }
-
-  return (
-    <>
-      {showModal && (
-        <Modal onClose={onClose} className="spotlight">
-          <div className="close" onClick={onClose}>
-            <Icon name="close" />
-          </div>
-          {children}
-        </Modal>
-      )}
-      <div onClick={onClick}>{children}</div>
-    </>
-  );
-}

packages/app/src/Element/MediaLink.tsx

@@ -0,0 +1,43 @@
+import { FileExtensionRegex } from "Const";
+import { ProxyImg } from "Element/ProxyImg";
+
+export default function MediaLink({ link }: { link: string }) {
+  const url = new URL(link);
+  const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1;
+  switch (extension) {
+    case "gif":
+    case "jpg":
+    case "jpeg":
+    case "jfif":
+    case "png":
+    case "bmp":
+    case "webp": {
+      return <ProxyImg key={url.toString()} src={url.toString()} />;
+    }
+    case "wav":
+    case "mp3":
+    case "ogg": {
+      return <audio key={url.toString()} src={url.toString()} controls />;
+    }
+    case "mp4":
+    case "mov":
+    case "mkv":
+    case "avi":
+    case "m4v":
+    case "webm": {
+      return <video key={url.toString()} src={url.toString()} controls />;
+    }
+    default:
+      return (
+        <a
+          key={url.toString()}
+          href={url.toString()}
+          onClick={e => e.stopPropagation()}
+          target="_blank"
+          rel="noreferrer"
+          className="ext">
+          {url.toString()}
+        </a>
+      );
+  }
+}

packages/app/src/Element/Mention.tsx

@@ -1,14 +1,13 @@
 import { useMemo } from "react";
 import { Link } from "react-router-dom";
-import { HexKey } from "@snort/system";
+import { HexKey } from "@snort/nostr";
 
-import { useUserProfile } from "@snort/system-react";
-import { profileLink } from "SnortUtils";
+import { useUserProfile } from "Hooks/useUserProfile";
+import { profileLink } from "Util";
 import { getDisplayName } from "Element/ProfileImage";
-import { System } from "index";
 
 export default function Mention({ pubkey, relays }: { pubkey: HexKey; relays?: Array<string> | string }) {
-  const user = useUserProfile(System, pubkey);
+  const user = useUserProfile(pubkey);
 
   const name = useMemo(() => {
     return getDisplayName(user, pubkey);

packages/app/src/Element/MixCloudEmbed.tsx

@@ -1,11 +1,14 @@
 import { MixCloudRegex } from "Const";
-import useLogin from "Hooks/useLogin";
+import { useSelector } from "react-redux";
+import { RootState } from "State/Store";
 
 const MixCloudEmbed = ({ link }: { link: string }) => {
   const feedPath = (MixCloudRegex.test(link) && RegExp.$1) + "%2F" + (MixCloudRegex.test(link) && RegExp.$2);
 
-  const lightTheme = useLogin().preferences.theme === "light";
+  const lightTheme = useSelector<RootState, boolean>(s => s.login.preferences.theme === "light");
+
   const lightParams = lightTheme ? "light=1" : "light=0";
+
   return (
     <>
       <br />

packages/app/src/Element/Modal.css

@@ -7,6 +7,7 @@
   background-color: var(--modal-bg-color);
   display: flex;
   justify-content: center;
+  align-items: center;
   z-index: 42;
   overflow-y: auto;
 }
@@ -16,7 +17,12 @@
   padding: 10px;
   border-radius: 10px;
   width: 500px;
-  border: 1px solid var(--font-tertiary-color);
-  margin-top: auto;
-  margin-bottom: auto;
+  min-height: 10vh;
+}
+
+@media (max-width: 720px) {
+  .modal-body {
+    width: 100vw;
+    margin: 0 10px;
+  }
 }

packages/app/src/Element/Modal.tsx

@@ -1,15 +1,32 @@
 import "./Modal.css";
-import { useEffect, MouseEventHandler, ReactNode } from "react";
+import { useEffect, useRef } from "react";
+import * as React from "react";
 
 export interface ModalProps {
   className?: string;
-  onClose?: MouseEventHandler;
-  children: ReactNode;
+  onClose?: () => void;
+  children: React.ReactNode;
+}
+
+function useOnClickOutside(ref: React.MutableRefObject<Element | null>, onClickOutside: () => void) {
+  useEffect(() => {
+    function handleClickOutside(ev: MouseEvent) {
+      if (ref && ref.current && !ref.current.contains(ev.target as Node)) {
+        onClickOutside();
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref]);
 }
 
 export default function Modal(props: ModalProps) {
+  const ref = useRef(null);
   const onClose = props.onClose || (() => undefined);
   const className = props.className || "";
+  useOnClickOutside(ref, onClose);
 
   useEffect(() => {
     document.body.classList.add("scroll-lock");
@@ -17,8 +34,8 @@ export default function Modal(props: ModalProps) {
   }, []);
 
   return (
-    <div className={`modal ${className}`} onClick={onClose}>
-      <div className="modal-body" onClick={e => e.stopPropagation()}>
+    <div className={`modal ${className}`}>
+      <div ref={ref} className="modal-body">
         {props.children}
       </div>
     </div>

packages/app/src/Element/MuteButton.tsx

@@ -1,5 +1,5 @@
 import { FormattedMessage } from "react-intl";
-import { HexKey } from "@snort/system";
+import { HexKey } from "@snort/nostr";
 import useModeration from "Hooks/useModeration";
 
 import messages from "./messages";

packages/app/src/Element/MutedList.tsx

@@ -1,5 +1,5 @@
 import { FormattedMessage } from "react-intl";
-import { HexKey } from "@snort/system";
+import { HexKey } from "@snort/nostr";
 import MuteButton from "Element/MuteButton";
 import ProfilePreview from "Element/ProfilePreview";
 import useModeration from "Hooks/useModeration";

packages/app/src/Element/Nip05.css

@@ -1,5 +1,7 @@
 .nip05 {
   color: var(--font-secondary-color);
+  justify-content: flex-start;
+  align-items: center;
   font-weight: normal;
 }
 
@@ -50,4 +52,10 @@
   .zap .pfp .display-name {
     align-items: center;
   }
+  .nip05 .nick {
+    display: none;
+  }
+  .nip05 .domain {
+    display: none;
+  }
 }

packages/app/src/Element/Nip05.tsx

@@ -1,13 +1,46 @@
 import "./Nip05.css";
-import { HexKey } from "@snort/system";
-
+import { useQuery } from "react-query";
 import Icon from "Icons/Icon";
-import { useUserProfile } from "@snort/system-react";
-import { System } from "index";
+import { HexKey } from "@snort/nostr";
 
-export function useIsVerified(pubkey: HexKey, bypassCheck?: boolean) {
-  const profile = useUserProfile(System, pubkey);
-  return { isVerified: bypassCheck || profile?.isNostrAddressValid };
+interface NostrJson {
+  names: Record<string, string>;
+}
+
+async function fetchNip05Pubkey(name: string, domain: string) {
+  if (!name || !domain) {
+    return undefined;
+  }
+  try {
+    const res = await fetch(`https://${domain}/.well-known/nostr.json?name=${encodeURIComponent(name)}`);
+    const data: NostrJson = await res.json();
+    const match = Object.keys(data.names).find(n => {
+      return n.toLowerCase() === name.toLowerCase();
+    });
+    return match ? data.names[match] : undefined;
+  } catch (error) {
+    return undefined;
+  }
+}
+
+const VERIFICATION_CACHE_TIME = 24 * 60 * 60 * 1000;
+const VERIFICATION_STALE_TIMEOUT = 10 * 60 * 1000;
+
+export function useIsVerified(pubkey: HexKey, nip05?: string, bypassCheck?: boolean) {
+  const [name, domain] = nip05 ? nip05.split("@") : [];
+  const { isError, isSuccess, data } = useQuery(
+    ["nip05", nip05],
+    () => (bypassCheck ? Promise.resolve(pubkey) : fetchNip05Pubkey(name, domain)),
+    {
+      retry: false,
+      retryOnMount: false,
+      cacheTime: VERIFICATION_CACHE_TIME,
+      staleTime: VERIFICATION_STALE_TIMEOUT,
+    }
+  );
+  const isVerified = isSuccess && data === pubkey;
+  const cantVerify = isSuccess && data !== pubkey;
+  return { isVerified, couldNotVerify: isError || cantVerify };
 }
 
 export interface Nip05Params {
@@ -19,10 +52,10 @@ export interface Nip05Params {
 const Nip05 = ({ nip05, pubkey, verifyNip = true }: Nip05Params) => {
   const [name, domain] = nip05 ? nip05.split("@") : [];
   const isDefaultUser = name === "_";
-  const { isVerified } = useIsVerified(pubkey, !verifyNip);
+  const { isVerified, couldNotVerify } = useIsVerified(pubkey, nip05, !verifyNip);
 
   return (
-    <div className={`flex nip05${!isVerified ? " failed" : ""}`}>
+    <div className={`flex nip05${couldNotVerify ? " failed" : ""}`} onClick={ev => ev.stopPropagation()}>
       {!isDefaultUser && isVerified && <span className="nick">{`${name}@`}</span>}
       {isVerified && (
         <>

packages/app/src/Element/Nip5Service.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useMemo, useState, ChangeEvent } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
+import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { UserMetadata, mapEventToProfile } from "@snort/system";
 
-import { unwrap } from "SnortUtils";
+import { unwrap } from "Util";
 import { formatShort } from "Number";
 import {
   ServiceProvider,
@@ -17,15 +17,13 @@ import {
 import AsyncButton from "Element/AsyncButton";
 import SendSats from "Element/SendSats";
 import Copy from "Element/Copy";
-import { useUserProfile } from "@snort/system-react";
+import { useUserProfile } from "Hooks/useUserProfile";
 import useEventPublisher from "Feed/EventPublisher";
-import { debounce } from "SnortUtils";
-import useLogin from "Hooks/useLogin";
-import SnortServiceProvider from "Nip05/SnortServiceProvider";
-import { UserCache } from "Cache";
+import { debounce } from "Util";
+import { UserMetadata } from "@snort/nostr";
 
 import messages from "./messages";
-import { System } from "index";
+import { RootState } from "State/Store";
 
 type Nip05ServiceProps = {
   name: string;
@@ -34,7 +32,6 @@ type Nip05ServiceProps = {
   link: string;
   supportLink: string;
   helpText?: boolean;
-  forSubscription?: string;
   onChange?(h: string): void;
   onSuccess?(h: string): void;
 };
@@ -43,8 +40,8 @@ export default function Nip5Service(props: Nip05ServiceProps) {
   const navigate = useNavigate();
   const { helpText = true } = props;
   const { formatMessage } = useIntl();
-  const pubkey = useLogin().publicKey;
-  const user = useUserProfile(System, pubkey);
+  const pubkey = useSelector((s: RootState) => s.login.publicKey);
+  const user = useUserProfile(pubkey);
   const publisher = useEventPublisher();
   const svc = useMemo(() => new ServiceProvider(props.service), [props.service]);
   const [serviceConfig, setServiceConfig] = useState<ServiceConfig>();
@@ -192,38 +189,18 @@ export default function Nip5Service(props: Nip05ServiceProps) {
     }
   }
 
-  async function claimForSubscription(handle: string, domain: string, sub: string) {
-    if (!pubkey || !publisher) {
-      return;
-    }
-
-    const svcEx = new SnortServiceProvider(publisher, props.service);
-    const rsp = await svcEx.registerForSubscription(handle, domain, sub);
-    if ("error" in rsp) {
-      setError(rsp);
-    } else {
-      if (props.onSuccess) {
-        const nip05 = `${handle}@${domain}`;
-        props.onSuccess(nip05);
-      }
-    }
-  }
   async function updateProfile(handle: string, domain: string) {
-    if (user && publisher) {
+    if (user) {
       const nip05 = `${handle}@${domain}`;
       const newProfile = {
         ...user,
         nip05,
       } as UserMetadata;
       const ev = await publisher.metadata(newProfile);
-      System.BroadcastEvent(ev);
+      publisher.broadcast(ev);
       if (props.onSuccess) {
         props.onSuccess(nip05);
       }
-      const newMeta = mapEventToProfile(ev);
-      if (newMeta) {
-        UserCache.set(newMeta);
-      }
       if (helpText) {
         navigate("/settings");
       }
@@ -269,27 +246,16 @@ export default function Nip5Service(props: Nip05ServiceProps) {
       )}
       {availabilityResponse?.available && !registerStatus && (
         <div className="flex">
-          {!props.forSubscription && (
-            <div className="mr10">
-              <FormattedMessage
-                {...messages.Sats}
-                values={{ n: formatShort(unwrap(availabilityResponse.quote?.price)) }}
-              />
-              <br />
-              <small>{availabilityResponse.quote?.data.type}</small>
-            </div>
-          )}
-          <AsyncButton
-            onClick={() =>
-              props.forSubscription
-                ? claimForSubscription(handle, domain, props.forSubscription)
-                : startBuy(handle, domain)
-            }>
-            {props.forSubscription ? (
-              <FormattedMessage defaultMessage="Claim Now" />
-            ) : (
-              <FormattedMessage {...messages.BuyNow} />
-            )}
+          <div className="mr10">
+            <FormattedMessage
+              {...messages.Sats}
+              values={{ n: formatShort(unwrap(availabilityResponse.quote?.price)) }}
+            />
+            <br />
+            <small>{availabilityResponse.quote?.data.type}</small>
+          </div>
+          <AsyncButton onClick={() => startBuy(handle, domain)}>
+            <FormattedMessage {...messages.BuyNow} />
           </AsyncButton>
         </div>
       )}

packages/app/src/Element/NostrFileHeader.tsx

@@ -1,40 +0,0 @@
-import { FormattedMessage } from "react-intl";
-import { NostrEvent, NostrLink } from "@snort/system";
-
-import { findTag } from "SnortUtils";
-import useEventFeed from "Feed/EventFeed";
-import PageSpinner from "Element/PageSpinner";
-import Reveal from "Element/Reveal";
-import { MediaElement } from "Element/MediaElement";
-
-export default function NostrFileHeader({ link }: { link: NostrLink }) {
-  const ev = useEventFeed(link);
-
-  if (!ev.data) return <PageSpinner />;
-  return <NostrFileElement ev={ev.data} />;
-}
-
-export function NostrFileElement({ ev }: { ev: NostrEvent }) {
-  // assume image or embed which can be rendered by the hypertext kind
-  // todo: make use of hash
-  // todo: use magnet or other links if present
-  const u = findTag(ev, "url");
-  const x = findTag(ev, "x");
-  const m = findTag(ev, "m");
-  const blurHash = findTag(ev, "blurhash");
-  const magnet = findTag(ev, "magnet");
-
-  if (u && m) {
-    return (
-      <Reveal message={<FormattedMessage defaultMessage="Click to load content from {link}" values={{ link: u }} />}>
-        <MediaElement mime={m} url={u} sha256={x} magnet={magnet} blurHash={blurHash} />
-      </Reveal>
-    );
-  } else {
-    return (
-      <b className="error">
-        <FormattedMessage defaultMessage="Unknown file header: {name}" values={{ name: ev.content }} />
-      </b>
-    );
-  }
-}

packages/app/src/Element/NostrLink.tsx

@@ -1,25 +1,21 @@
+import { NostrPrefix } from "@snort/nostr";
 import { Link } from "react-router-dom";
-import { NostrPrefix, tryParseNostrLink } from "@snort/system";
 
 import Mention from "Element/Mention";
-import NoteQuote from "Element/NoteQuote";
+import { eventLink, parseNostrLink } from "Util";
 
-export default function NostrLink({ link, depth }: { link: string; depth?: number }) {
-  const nav = tryParseNostrLink(link);
+export default function NostrLink({ link }: { link: string }) {
+  const nav = parseNostrLink(link);
 
   if (nav?.type === NostrPrefix.PublicKey || nav?.type === NostrPrefix.Profile) {
     return <Mention pubkey={nav.id} relays={nav.relays} />;
-  } else if (nav?.type === NostrPrefix.Note || nav?.type === NostrPrefix.Event || nav?.type === NostrPrefix.Address) {
-    if ((depth ?? 0) > 0) {
-      const evLink = nav.encode();
-      return (
-        <Link to={`/e/${evLink}`} onClick={e => e.stopPropagation()} state={{ from: location.pathname }}>
-          #{evLink.substring(0, 12)}
-        </Link>
-      );
-    } else {
-      return <NoteQuote link={nav} depth={depth} />;
-    }
+  } else if (nav?.type === NostrPrefix.Note || nav?.type === NostrPrefix.Event) {
+    const evLink = eventLink(nav.id, nav.relays);
+    return (
+      <Link to={evLink} onClick={e => e.stopPropagation()} state={{ from: location.pathname }}>
+        #{evLink.split("/").at(-1)?.substring(0, 12)}
+      </Link>
+    );
   } else {
     return (
       <a href={link} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">

packages/app/src/Element/Note.css

@@ -38,7 +38,6 @@
   display: flex;
   align-items: center;
 }
-
 .note > .header > .info .saved svg {
   margin-right: 8px;
 }
@@ -57,16 +56,6 @@
   margin-right: 8px;
 }
 
-.note-quote {
-  border: 1px solid var(--gray);
-  border-radius: 10px;
-  padding: 5px;
-}
-
-.note-quote.note > .body {
-  padding-left: 0;
-}
-
 .note > .body {
   margin-top: 4px;
   margin-bottom: 24px;
@@ -108,6 +97,9 @@
   border-radius: 16px;
 }
 
+.light .note > .footer .ctx-menu {
+}
+
 .note > .footer .ctx-menu li {
   background: #1e1e1e;
   padding-top: 8px;
@@ -125,7 +117,6 @@
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;
 }
-
 .note > .footer .ctx-menu li:last-of-type {
   padding-bottom: 12px;
   border-bottom-left-radius: 16px;
@@ -156,38 +147,6 @@
   margin-left: 56px;
 }
 
-.note .poll-body {
-  padding: 5px;
-  user-select: none;
-}
-
-.note .poll-body > div {
-  border: 1px solid var(--font-secondary-color);
-  border-radius: 5px;
-  margin-bottom: 3px;
-  position: relative;
-  overflow: hidden;
-}
-
-.note .poll-body > div > div {
-  padding: 5px 10px;
-  z-index: 2;
-}
-
-.note .poll-body > div:hover {
-  cursor: pointer;
-  border: 1px solid var(--highlight);
-}
-
-.note .poll-body > div > .progress {
-  background-color: var(--gray);
-  height: stretch;
-  height: -webkit-fill-available;
-  height: -moz-available;
-  position: absolute;
-  z-index: 1;
-}
-
 .reaction-pill {
   display: flex;
   min-width: 1rem;
@@ -272,3 +231,26 @@
 .close-menu-container {
   position: absolute;
 }
+
+.link-preview-container {
+  border: 1px solid var(--gray);
+  border-radius: 10px;
+  text-align: center;
+}
+
+.link-preview-container:hover {
+  cursor: pointer;
+}
+
+.link-preview-title {
+  padding: 0 10px 10px 10px;
+}
+
+.link-preview-title > small {
+  color: var(--font-secondary-color);
+  font-size: small;
+}
+
+.link-preview-image {
+  margin: 0 0 15px 0 !important;
+}

packages/app/src/Element/Note.tsx

@@ -1,13 +1,14 @@
 import "./Note.css";
 import React, { useMemo, useState, useLayoutEffect, ReactNode } from "react";
 import { useNavigate, Link } from "react-router-dom";
+import { useSelector, useDispatch } from "react-redux";
 import { useInView } from "react-intersection-observer";
 import { useIntl, FormattedMessage } from "react-intl";
-import { TaggedRawEvent, HexKey, EventKind, NostrPrefix, Lists, EventExt, parseZap } from "@snort/system";
+import { TaggedRawEvent, HexKey, EventKind, NostrPrefix } from "@snort/nostr";
 
-import { System } from "index";
 import useEventPublisher from "Feed/EventPublisher";
 import Icon from "Icons/Icon";
+import { parseZap } from "Element/Zap";
 import ProfileImage from "Element/ProfileImage";
 import Text from "Element/Text";
 import {
@@ -19,21 +20,17 @@ import {
   normalizeReaction,
   Reaction,
   profileLink,
-} from "SnortUtils";
+} from "Util";
 import NoteFooter, { Translation } from "Element/NoteFooter";
 import NoteTime from "Element/NoteTime";
 import Reveal from "Element/Reveal";
 import useModeration from "Hooks/useModeration";
-import { UserCache } from "Cache";
-import Poll from "Element/Poll";
-import useLogin from "Hooks/useLogin";
-import { setBookmarked, setPinned } from "Login";
-import { NostrFileElement } from "Element/NostrFileHeader";
-import ZapstrEmbed from "Element/ZapstrEmbed";
-import PubkeyList from "Element/PubkeyList";
-import { LiveEvent } from "Element/LiveEvent";
+import { setPinned, setBookmarked } from "State/Login";
+import type { RootState } from "State/Store";
+import { UserCache } from "Cache/UserCache";
 
 import messages from "./messages";
+import { EventExt } from "System/EventExt";
 
 export interface NoteProps {
   data: TaggedRawEvent;
@@ -41,8 +38,6 @@ export interface NoteProps {
   related: readonly TaggedRawEvent[];
   highlight?: boolean;
   ignoreModeration?: boolean;
-  onClick?: (e: TaggedRawEvent) => void;
-  depth?: number;
   options?: {
     showHeader?: boolean;
     showTime?: boolean;
@@ -75,23 +70,9 @@ const HiddenNote = ({ children }: { children: React.ReactNode }) => {
 };
 
 export default function Note(props: NoteProps) {
-  const { data: ev, related, highlight, options: opt, ignoreModeration = false, className } = props;
-
-  if (ev.kind === EventKind.FileHeader) {
-    return <NostrFileElement ev={ev} />;
-  }
-  if (ev.kind === EventKind.ZapstrTrack) {
-    return <ZapstrEmbed ev={ev} />;
-  }
-  if (ev.kind === EventKind.PubkeyLists) {
-    return <PubkeyList ev={ev} className={className} />;
-  }
-  if (ev.kind === EventKind.LiveEvent) {
-    return <LiveEvent ev={ev} />;
-  }
-
-  const baseClassName = `note card${className ? ` ${className}` : ""}`;
   const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const { data: ev, related, highlight, options: opt, ignoreModeration = false } = props;
   const [showReactions, setShowReactions] = useState(false);
   const deletions = useMemo(() => getReactions(related, ev.id, EventKind.Deletion), [related]);
   const { isMuted } = useModeration();
@@ -99,8 +80,8 @@ export default function Note(props: NoteProps) {
   const { ref, inView, entry } = useInView({ triggerOnce: true });
   const [extendable, setExtendable] = useState<boolean>(false);
   const [showMore, setShowMore] = useState<boolean>(false);
-  const login = useLogin();
-  const { pinned, bookmarked } = login;
+  const baseClassName = `note card ${props.className ? props.className : ""}`;
+  const { pinned, bookmarked } = useSelector((s: RootState) => s.login);
   const publisher = useEventPublisher();
   const [translated, setTranslated] = useState<Translation>();
   const { formatMessage } = useIntl();
@@ -134,7 +115,7 @@ export default function Note(props: NoteProps) {
   );
   const zaps = useMemo(() => {
     const sortedZaps = getReactions(related, ev.id, EventKind.ZapReceipt)
-      .map(a => parseZap(a, UserCache, ev))
+      .map(a => parseZap(a, ev))
       .filter(z => z.valid);
     sortedZaps.sort((a, b) => b.amount - a.amount);
     return sortedZaps;
@@ -151,23 +132,23 @@ export default function Note(props: NoteProps) {
   };
 
   async function unpin(id: HexKey) {
-    if (options.canUnpin && publisher) {
+    if (options.canUnpin) {
       if (window.confirm(formatMessage(messages.ConfirmUnpin))) {
-        const es = pinned.item.filter(e => e !== id);
-        const ev = await publisher.noteList(es, Lists.Pinned);
-        System.BroadcastEvent(ev);
-        setPinned(login, es, ev.created_at * 1000);
+        const es = pinned.filter(e => e !== id);
+        const ev = await publisher.pinned(es);
+        publisher.broadcast(ev);
+        dispatch(setPinned({ keys: es, createdAt: new Date().getTime() }));
       }
     }
   }
 
   async function unbookmark(id: HexKey) {
-    if (options.canUnbookmark && publisher) {
+    if (options.canUnbookmark) {
       if (window.confirm(formatMessage(messages.ConfirmUnbookmark))) {
-        const es = bookmarked.item.filter(e => e !== id);
-        const ev = await publisher.noteList(es, Lists.Bookmarked);
-        System.BroadcastEvent(ev);
-        setBookmarked(login, es, ev.created_at * 1000);
+        const es = bookmarked.filter(e => e !== id);
+        const ev = await publisher.bookmarked(es);
+        publisher.broadcast(ev);
+        dispatch(setBookmarked({ keys: es, createdAt: new Date().getTime() }));
       }
     }
   }
@@ -205,7 +186,7 @@ export default function Note(props: NoteProps) {
         </Reveal>
       );
     }
-    return <Text content={body} tags={ev.tags} creator={ev.pubkey} depth={props.depth} />;
+    return <Text content={body} tags={ev.tags} creator={ev.pubkey} />;
   };
 
   useLayoutEffect(() => {
@@ -227,11 +208,6 @@ export default function Note(props: NoteProps) {
     }
 
     e.stopPropagation();
-    if (props.onClick) {
-      props.onClick(eTarget);
-      return;
-    }
-
     const link = eventLink(eTarget.id, eTarget.relays);
     // detect cmd key and open in new tab
     if (e.metaKey) {
@@ -250,8 +226,8 @@ export default function Note(props: NoteProps) {
     }
 
     const maxMentions = 2;
-    const replyId = thread?.replyTo?.value ?? thread?.root?.value;
-    const replyRelayHints = thread?.replyTo?.relay ?? thread.root?.relay;
+    const replyId = thread?.replyTo?.Event ?? thread?.root?.Event;
+    const replyRelayHints = thread?.replyTo?.Relay ?? thread.root?.Relay;
     const mentions: { pk: string; name: string; link: ReactNode }[] = [];
     for (const pk of thread?.pubKeys ?? []) {
       const u = UserCache.getFromCache(pk);
@@ -294,8 +270,7 @@ export default function Note(props: NoteProps) {
     );
   }
 
-  const canRenderAsTextNote = [EventKind.TextNote, EventKind.Polls];
-  if (!canRenderAsTextNote.includes(ev.kind)) {
+  if (ev.kind !== EventKind.TextNote) {
     return (
       <>
         <h4>
@@ -325,12 +300,6 @@ export default function Note(props: NoteProps) {
     }
   }
 
-  function pollOptions() {
-    if (ev.kind !== EventKind.Polls) return;
-
-    return <Poll ev={ev} zaps={zaps} />;
-  }
-
   function content() {
     if (!inView) return undefined;
     return (
@@ -338,9 +307,10 @@ export default function Note(props: NoteProps) {
         {options.showHeader && (
           <div className="header flex">
             <ProfileImage
+              autoWidth={false}
               pubkey={ev.pubkey}
               subHeader={replyTag() ?? undefined}
-              link={opt?.canClick === undefined ? undefined : ""}
+              linkToProfile={opt?.canClick === undefined}
             />
             {(options.showTime || options.showBookmarked) && (
               <div className="info">
@@ -362,7 +332,6 @@ export default function Note(props: NoteProps) {
         <div className="body" onClick={e => goToEvent(e, ev, true)}>
           {transformBody()}
           {translation()}
-          {pollOptions()}
           {options.showReactionsLink && (
             <div className="reactions-link" onClick={() => setShowReactions(true)}>
               <FormattedMessage {...messages.ReactionsLink} values={{ n: totalReactions }} />

packages/app/src/Element/NoteCreator.css

@@ -17,10 +17,9 @@
   resize: none;
   background-color: var(--note-bg);
   border-radius: 10px 10px 0 0;
-  min-height: 100px;
-  width: stretch;
-  width: -webkit-fill-available;
-  width: -moz-available;
+  min-height: 120px;
+  max-width: stretch;
+  min-width: stretch;
   max-height: 210px;
 }
 
@@ -42,9 +41,6 @@
   }
 }
 
-.note-creator.poll textarea {
-  min-height: 120px;
-}
 .note-creator-actions {
   width: 100%;
   display: flex;
@@ -54,24 +50,19 @@
   margin-bottom: 5px;
 }
 
-.note-creator .insert {
-  display: flex;
-  justify-content: flex-end;
-  width: stretch;
-  width: -webkit-fill-available;
-  width: -moz-available;
-}
-
-.note-creator .insert > button {
+.note-creator .attachment {
+  cursor: pointer;
+  position: absolute;
+  right: 16px;
+  bottom: 12px;
   width: 48px;
   height: 36px;
   background: var(--gray-dark);
   color: white;
-  border-radius: 17px;
-  margin-right: 5px;
+  border-radius: 100px;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
 }
 
 .note-creator .attachment:hover {
@@ -96,11 +87,19 @@
   position: absolute;
   left: 16px;
   bottom: 12px;
-  color: var(--error);
+  font-color: var(--error);
   margin-right: 12px;
   font-size: 16px;
 }
 
+.note-creator .btn {
+  border-radius: 20px;
+  font-weight: bold;
+  background-color: var(--bg-color);
+  color: var(--font-color);
+  font-size: var(--font-size);
+}
+
 .note-create-button {
   width: 48px;
   height: 48px;
@@ -115,10 +114,31 @@
   justify-content: center;
 }
 
+@media (min-width: 520px) {
+  .note-create-button {
+    right: 10vw;
+  }
+}
+
+@media (min-width: 1020px) {
+  .note-create-button {
+    right: calc(50% - 360px);
+  }
+}
+
 .note-creator-modal .modal-body {
   background: var(--modal-bg-color);
 }
 
+@media (max-width: 720px) {
+  .note-creator-modal {
+    align-items: flex-start;
+  }
+  .note-creator-modal .modal-body {
+    margin-top: 20vh;
+  }
+}
+
 .note-preview {
   word-break: break-all;
 }

packages/app/src/Element/NoteCreator.tsx

@@ -1,12 +1,11 @@
 import "./NoteCreator.css";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useDispatch, useSelector } from "react-redux";
-import { encodeTLV, EventKind, NostrPrefix, TaggedRawEvent, EventBuilder } from "@snort/system";
-import { LNURL } from "@snort/shared";
+import { TaggedRawEvent } from "@snort/nostr";
 
 import Icon from "Icons/Icon";
 import useEventPublisher from "Feed/EventPublisher";
-import { openFile } from "SnortUtils";
+import { openFile } from "Util";
 import Textarea from "Element/Textarea";
 import Modal from "Element/Modal";
 import ProfileImage from "Element/ProfileImage";
@@ -19,23 +18,14 @@ import {
   setActive,
   setPreview,
   setShowAdvanced,
-  setSelectedCustomRelays,
   setZapForward,
   setSensitive,
   reset,
-  setPollOptions,
-  setOtherEvents,
 } from "State/NoteCreator";
 import type { RootState } from "State/Store";
+import { LNURL } from "LNURL";
 
 import messages from "./messages";
-import { ClipboardEventHandler, useState } from "react";
-import Spinner from "Icons/Spinner";
-import { Menu, MenuItem } from "@szhsin/react-menu";
-import { LoginStore } from "Login";
-import { getCurrentSubscription } from "Subscription";
-import useLogin from "Hooks/useLogin";
-import { System } from "index";
 
 interface NotePreviewProps {
   note: TaggedRawEvent;
@@ -57,28 +47,19 @@ export function NoteCreator() {
   const { formatMessage } = useIntl();
   const publisher = useEventPublisher();
   const uploader = useFileUpload();
-  const {
-    note,
-    zapForward,
-    sensitive,
-    pollOptions,
-    replyTo,
-    otherEvents,
-    preview,
-    active,
-    show,
-    showAdvanced,
-    selectedCustomRelays,
-    error,
-  } = useSelector((s: RootState) => s.noteCreator);
-  const [uploadInProgress, setUploadInProgress] = useState(false);
+  const note = useSelector((s: RootState) => s.noteCreator.note);
+  const show = useSelector((s: RootState) => s.noteCreator.show);
+  const error = useSelector((s: RootState) => s.noteCreator.error);
+  const active = useSelector((s: RootState) => s.noteCreator.active);
+  const preview = useSelector((s: RootState) => s.noteCreator.preview);
+  const replyTo = useSelector((s: RootState) => s.noteCreator.replyTo);
+  const showAdvanced = useSelector((s: RootState) => s.noteCreator.showAdvanced);
+  const zapForward = useSelector((s: RootState) => s.noteCreator.zapForward);
+  const sensitive = useSelector((s: RootState) => s.noteCreator.sensitive);
   const dispatch = useDispatch();
-  const sub = getCurrentSubscription(LoginStore.allSubscriptions());
-  const login = useLogin();
-  const relays = login.relays;
 
   async function sendNote() {
-    if (note && publisher) {
+    if (note) {
       let extraTags: Array<Array<string>> | undefined;
       if (zapForward) {
         try {
@@ -96,29 +77,13 @@ export function NoteCreator() {
           return;
         }
       }
-
       if (sensitive) {
         extraTags ??= [];
         extraTags.push(["content-warning", sensitive]);
       }
-      const kind = pollOptions ? EventKind.Polls : EventKind.TextNote;
-      if (pollOptions) {
-        extraTags ??= [];
-        extraTags.push(...pollOptions.map((a, i) => ["poll_option", i.toString(), a]));
-      }
-      const hk = (eb: EventBuilder) => {
-        extraTags?.forEach(t => eb.tag(t));
-        eb.kind(kind);
-        return eb;
-      };
-      const ev = replyTo ? await publisher.reply(replyTo, note, hk) : await publisher.note(note, hk);
-      if (selectedCustomRelays) selectedCustomRelays.forEach(r => System.WriteOnceToRelay(r, ev));
-      else System.BroadcastEvent(ev);
-      dispatch(reset());
-      for (const oe of otherEvents) {
-        if (selectedCustomRelays) selectedCustomRelays.forEach(r => System.WriteOnceToRelay(r, oe));
-        else System.BroadcastEvent(oe);
-      }
+      const ev = replyTo ? await publisher.reply(replyTo, note, extraTags) : await publisher.note(note, extraTags);
+      console.debug("Sending note: ", ev);
+      publisher.broadcast(ev);
       dispatch(reset());
     }
   }
@@ -126,26 +91,9 @@ export function NoteCreator() {
   async function attachFile() {
     try {
       const file = await openFile();
-      if (file) {
-        uploadFile(file);
-      }
-    } catch (error: unknown) {
-      if (error instanceof Error) {
-        dispatch(setError(error?.message));
-      }
-    }
-  }
-
-  async function uploadFile(file: File | Blob) {
-    setUploadInProgress(true);
-    try {
       if (file) {
         const rx = await uploader.upload(file, file.name);
-        if (rx.header) {
-          const link = `nostr:${encodeTLV(NostrPrefix.Event, rx.header.id, undefined, rx.header.kind)}`;
-          dispatch(setNote(`${note ? `${note}\n` : ""}${link}`));
-          dispatch(setOtherEvents([...otherEvents, rx.header]));
-        } else if (rx.url) {
+        if (rx.url) {
           dispatch(setNote(`${note ? `${note}\n` : ""}${rx.url}`));
         } else if (rx?.error) {
           dispatch(setError(rx.error));
@@ -155,8 +103,6 @@ export function NoteCreator() {
       if (error instanceof Error) {
         dispatch(setError(error?.message));
       }
-    } finally {
-      setUploadInProgress(false);
     }
   }
 
@@ -181,8 +127,8 @@ export function NoteCreator() {
 
   async function loadPreview() {
     if (preview) {
-      dispatch(setPreview(undefined));
-    } else if (publisher) {
+      dispatch(setPreview(null));
+    } else {
       const tmpNote = await publisher.note(note);
       if (tmpNote) {
         dispatch(setPreview(tmpNote));
@@ -205,118 +151,6 @@ export function NoteCreator() {
     }
   }
 
-  function renderPollOptions() {
-    if (pollOptions) {
-      return (
-        <>
-          <h4>
-            <FormattedMessage defaultMessage="Poll Options" />
-          </h4>
-          {pollOptions?.map((a, i) => (
-            <div className="form-group w-max" key={`po-${i}`}>
-              <div>
-                <FormattedMessage defaultMessage="Option: {n}" values={{ n: i + 1 }} />
-              </div>
-              <div>
-                <input type="text" value={a} onChange={e => changePollOption(i, e.target.value)} />
-                {i > 1 && (
-                  <button onClick={() => removePollOption(i)} className="ml5">
-                    <Icon name="close" size={14} />
-                  </button>
-                )}
-              </div>
-            </div>
-          ))}
-          <button onClick={() => dispatch(setPollOptions([...pollOptions, ""]))}>
-            <Icon name="plus" size={14} />
-          </button>
-        </>
-      );
-    }
-  }
-
-  function changePollOption(i: number, v: string) {
-    if (pollOptions) {
-      const copy = [...pollOptions];
-      copy[i] = v;
-      dispatch(setPollOptions(copy));
-    }
-  }
-
-  function removePollOption(i: number) {
-    if (pollOptions) {
-      const copy = [...pollOptions];
-      copy.splice(i, 1);
-      dispatch(setPollOptions(copy));
-    }
-  }
-
-  function renderRelayCustomisation() {
-    return (
-      <div>
-        {Object.keys(relays.item || {})
-          .filter(el => relays.item[el].write)
-          .map((r, i, a) => (
-            <div className="card flex">
-              <div className="flex f-col f-grow">
-                <div>{r}</div>
-              </div>
-              <div>
-                <input
-                  type="checkbox"
-                  checked={!selectedCustomRelays || selectedCustomRelays.includes(r)}
-                  onChange={e =>
-                    dispatch(
-                      setSelectedCustomRelays(
-                        // set false if all relays selected
-                        e.target.checked && selectedCustomRelays && selectedCustomRelays.length == a.length - 1
-                          ? false
-                          : // otherwise return selectedCustomRelays with target relay added / removed
-                            a.filter(el =>
-                              el === r ? e.target.checked : !selectedCustomRelays || selectedCustomRelays.includes(el)
-                            )
-                      )
-                    )
-                  }
-                />
-              </div>
-            </div>
-          ))}
-      </div>
-    );
-  }
-
-  function listAccounts() {
-    return LoginStore.getSessions().map(a => (
-      <MenuItem
-        onClick={ev => {
-          ev.stopPropagation = true;
-          LoginStore.switchAccount(a);
-        }}>
-        <ProfileImage pubkey={a} link={""} />
-      </MenuItem>
-    ));
-  }
-
-  const handlePaste: ClipboardEventHandler<HTMLDivElement> = evt => {
-    if (evt.clipboardData) {
-      const clipboardItems = evt.clipboardData.items;
-      const items: DataTransferItem[] = Array.from(clipboardItems).filter(function (item: DataTransferItem) {
-        // Filter the image items only
-        return /^image\//.test(item.type);
-      });
-      if (items.length === 0) {
-        return;
-      }
-
-      const item = items[0];
-      const blob = item.getAsFile();
-      if (blob) {
-        uploadFile(blob);
-      }
-    }
-  };
-
   return (
     <>
       {show && (
@@ -324,72 +158,38 @@ export function NoteCreator() {
           {replyTo && <NotePreview note={replyTo} />}
           {preview && getPreviewNote()}
           {!preview && (
-            <div
-              onPaste={handlePaste}
-              className={`flex note-creator${replyTo ? " note-reply" : ""}${pollOptions ? " poll" : ""}`}>
-              <div className="flex f-col f-grow">
+            <div className={`flex note-creator ${replyTo ? "note-reply" : ""}`}>
+              <div className="flex f-col mr10 f-grow">
                 <Textarea
                   autoFocus
                   className={`textarea ${active ? "textarea--focused" : ""}`}
                   onChange={onChange}
                   value={note}
                   onFocus={() => dispatch(setActive(true))}
-                  onKeyDown={e => {
-                    if (e.key === "Enter" && e.metaKey) {
-                      sendNote().catch(console.warn);
-                    }
-                  }}
                 />
-                {renderPollOptions()}
-                <div className="insert">
-                  {sub && (
-                    <Menu
-                      menuButton={
-                        <button>
-                          <Icon name="code-circle" />
-                        </button>
-                      }
-                      menuClassName="ctx-menu">
-                      {listAccounts()}
-                    </Menu>
-                  )}
-                  {pollOptions === undefined && !replyTo && (
-                    <button onClick={() => dispatch(setPollOptions(["A", "B"]))}>
-                      <Icon name="pie-chart" />
-                    </button>
-                  )}
-                  <button onClick={attachFile}>
-                    <Icon name="attachment" />
-                  </button>
-                </div>
+                <button type="button" className="attachment" onClick={attachFile}>
+                  <Icon name="attachment" />
+                </button>
               </div>
               {error && <span className="error">{error}</span>}
             </div>
           )}
           <div className="note-creator-actions">
-            {uploadInProgress && <Spinner />}
-            <button className="secondary" onClick={() => dispatch(setShowAdvanced(!showAdvanced))}>
+            <button className="secondary" type="button" onClick={() => dispatch(setShowAdvanced(!showAdvanced))}>
               <FormattedMessage defaultMessage="Advanced" />
             </button>
-            <button className="secondary" onClick={cancel}>
+            <button className="secondary" type="button" onClick={cancel}>
               <FormattedMessage {...messages.Cancel} />
             </button>
-            <button onClick={onSubmit}>
+            <button type="button" onClick={onSubmit}>
               {replyTo ? <FormattedMessage {...messages.Reply} /> : <FormattedMessage {...messages.Send} />}
             </button>
           </div>
           {showAdvanced && (
             <div>
-              <button className="secondary" onClick={loadPreview}>
+              <button className="secondary" type="button" onClick={loadPreview}>
                 <FormattedMessage defaultMessage="Toggle Preview" />
               </button>
-              <h4>
-                <FormattedMessage defaultMessage="Custom Relays" />
-              </h4>
-              <p>
-                <FormattedMessage defaultMessage="Send note to a subset of your write relays" />
-              </p>
-              {renderRelayCustomisation()}
               <h4>
                 <FormattedMessage defaultMessage="Forward Zaps" />
               </h4>

packages/app/src/Element/NoteFooter.tsx

@@ -3,39 +3,63 @@ import { useSelector, useDispatch } from "react-redux";
 import { useIntl, FormattedMessage } from "react-intl";
 import { Menu, MenuItem } from "@szhsin/react-menu";
 import { useLongPress } from "use-long-press";
-import { TaggedRawEvent, HexKey, u256, encodeTLV, NostrPrefix, Lists, ParsedZap } from "@snort/system";
-import { LNURL } from "@snort/shared";
-import { useUserProfile } from "@snort/system-react";
+import { TaggedRawEvent, HexKey, u256, encodeTLV, NostrPrefix } from "@snort/nostr";
 
 import Icon from "Icons/Icon";
 import Spinner from "Icons/Spinner";
 
 import { formatShort } from "Number";
 import useEventPublisher from "Feed/EventPublisher";
-import { delay, normalizeReaction, unwrap } from "SnortUtils";
+import { bech32ToHex, delay, normalizeReaction, unwrap } from "Util";
 import { NoteCreator } from "Element/NoteCreator";
-import { ReBroadcaster } from "Element/ReBroadcaster";
 import Reactions from "Element/Reactions";
 import SendSats from "Element/SendSats";
-import { ZapsSummary } from "Element/Zap";
+import { ParsedZap, ZapsSummary } from "Element/Zap";
+import { useUserProfile } from "Hooks/useUserProfile";
 import { RootState } from "State/Store";
+import { UserPreferences, setPinned, setBookmarked } from "State/Login";
 import { setReplyTo, setShow, reset } from "State/NoteCreator";
-import {
-  setNote as setReBroadcastNote,
-  setShow as setReBroadcastShow,
-  reset as resetReBroadcast,
-} from "State/ReBroadcast";
 import useModeration from "Hooks/useModeration";
-import { TranslateHost } from "Const";
+import { SnortPubKey, TranslateHost } from "Const";
+import { LNURL } from "LNURL";
+import { DonateLNURL } from "Pages/DonatePage";
 import { useWallet } from "Wallet";
-import useLogin from "Hooks/useLogin";
-import { setBookmarked, setPinned } from "Login";
-import { useInteractionCache } from "Hooks/useInteractionCache";
-import { ZapPoolController } from "ZapPoolController";
-import { System } from "index";
 
 import messages from "./messages";
 
+// a dumb cache to remember which notes we zapped
+class DumbZapCache {
+  #set: Set<u256> = new Set();
+  constructor() {
+    this.#load();
+  }
+
+  add(id: u256) {
+    this.#set.add(this.#truncId(id));
+    this.#save();
+  }
+
+  has(id: u256) {
+    return this.#set.has(this.#truncId(id));
+  }
+
+  #truncId(id: u256) {
+    return id.slice(0, 12);
+  }
+
+  #save() {
+    window.localStorage.setItem("zap-cache", JSON.stringify([...this.#set]));
+  }
+
+  #load() {
+    const data = window.localStorage.getItem("zap-cache");
+    if (data) {
+      this.#set = new Set<u256>(JSON.parse(data) as Array<u256>);
+    }
+  }
+}
+const ZapCache = new DumbZapCache();
+
 let isZapperBusy = false;
 const barrierZapper = async <T,>(then: () => Promise<T>): Promise<T> => {
   while (isZapperBusy) {
@@ -70,30 +94,27 @@ export default function NoteFooter(props: NoteFooterProps) {
   const { ev, showReactions, setShowReactions, positive, negative, reposts, zaps } = props;
   const dispatch = useDispatch();
   const { formatMessage } = useIntl();
-  const login = useLogin();
-  const { pinned, bookmarked, publicKey, preferences: prefs, relays } = login;
+  const { pinned, bookmarked } = useSelector((s: RootState) => s.login);
+  const login = useSelector<RootState, HexKey | undefined>(s => s.login.publicKey);
   const { mute, block } = useModeration();
-  const author = useUserProfile(System, ev.pubkey);
-  const interactionCache = useInteractionCache(publicKey, ev.id);
+  const prefs = useSelector<RootState, UserPreferences>(s => s.login.preferences);
+  const author = useUserProfile(ev.pubkey);
   const publisher = useEventPublisher();
   const showNoteCreatorModal = useSelector((s: RootState) => s.noteCreator.show);
-  const showReBroadcastModal = useSelector((s: RootState) => s.reBroadcast.show);
-  const reBroadcastNote = useSelector((s: RootState) => s.reBroadcast.note);
   const replyTo = useSelector((s: RootState) => s.noteCreator.replyTo);
   const willRenderNoteCreator = showNoteCreatorModal && replyTo?.id === ev.id;
-  const willRenderReBroadcast = showReBroadcastModal && reBroadcastNote && reBroadcastNote?.id === ev.id;
   const [tip, setTip] = useState(false);
   const [zapping, setZapping] = useState(false);
   const walletState = useWallet();
   const wallet = walletState.wallet;
 
-  const isMine = ev.pubkey === publicKey;
+  const isMine = ev.pubkey === login;
   const lang = window.navigator.language;
   const langNames = new Intl.DisplayNames([...window.navigator.languages], {
     type: "language",
   });
   const zapTotal = zaps.reduce((acc, z) => acc + z.amount, 0);
-  const didZap = interactionCache.data.zapped || zaps.some(a => a.sender === publicKey);
+  const didZap = ZapCache.has(ev.id) || zaps.some(a => a.sender === login);
   const longPress = useLongPress(
     e => {
       e.stopPropagation();
@@ -105,37 +126,32 @@ export default function NoteFooter(props: NoteFooterProps) {
   );
 
   function hasReacted(emoji: string) {
-    return (
-      interactionCache.data.reacted ||
-      positive?.some(({ pubkey, content }) => normalizeReaction(content) === emoji && pubkey === publicKey)
-    );
+    return positive?.some(({ pubkey, content }) => normalizeReaction(content) === emoji && pubkey === login);
   }
 
   function hasReposted() {
-    return interactionCache.data.reposted || reposts.some(a => a.pubkey === publicKey);
+    return reposts.some(a => a.pubkey === login);
   }
 
   async function react(content: string) {
-    if (!hasReacted(content) && publisher) {
+    if (!hasReacted(content)) {
       const evLike = await publisher.react(ev, content);
-      System.BroadcastEvent(evLike);
-      await interactionCache.react();
+      publisher.broadcast(evLike);
     }
   }
 
   async function deleteEvent() {
-    if (window.confirm(formatMessage(messages.ConfirmDeletion, { id: ev.id.substring(0, 8) })) && publisher) {
+    if (window.confirm(formatMessage(messages.ConfirmDeletion, { id: ev.id.substring(0, 8) }))) {
       const evDelete = await publisher.delete(ev.id);
-      System.BroadcastEvent(evDelete);
+      publisher.broadcast(evDelete);
     }
   }
 
   async function repost() {
-    if (!hasReposted() && publisher) {
+    if (!hasReposted()) {
       if (!prefs.confirmReposts || window.confirm(formatMessage(messages.ConfirmRepost, { id: ev.id }))) {
         const evRepost = await publisher.repost(ev);
-        System.BroadcastEvent(evRepost);
-        await interactionCache.repost();
+        publisher.broadcast(evRepost);
       }
     }
   }
@@ -161,6 +177,7 @@ export default function NoteFooter(props: NoteFooterProps) {
       setZapping(true);
       try {
         await fastZapInner(lnurl, prefs.defaultZapAmount, ev.pubkey, ev.id);
+        fastZapDonate();
       } catch (e) {
         console.warn("Fast zap failed", e);
         if (!(e instanceof Error) || e.message !== "User rejected") {
@@ -179,25 +196,37 @@ export default function NoteFooter(props: NoteFooterProps) {
     await barrierZapper(async () => {
       const handler = new LNURL(lnurl);
       await handler.load();
-
-      const zr = Object.keys(relays.item);
-      const zap = handler.canZap && publisher ? await publisher.zap(amount * 1000, key, zr, id) : undefined;
+      const zap = handler.canZap ? await publisher.zap(amount * 1000, key, id) : undefined;
       const invoice = await handler.getInvoice(amount, undefined, zap);
       await wallet?.payInvoice(unwrap(invoice.pr));
-      ZapPoolController.allocate(amount);
+    });
+  }
 
-      await interactionCache.zap();
+  function fastZapDonate() {
+    queueMicrotask(async () => {
+      if (prefs.fastZapDonate > 0) {
+        // spin off donate
+        const donateAmount = Math.floor(prefs.defaultZapAmount * prefs.fastZapDonate);
+        if (donateAmount > 0) {
+          console.debug(`Donating ${donateAmount} sats to ${DonateLNURL}`);
+          fastZapInner(DonateLNURL, donateAmount, bech32ToHex(SnortPubKey))
+            .then(() => console.debug("Donation sent! Thank You!"))
+            .catch(() => console.debug("Failed to donate"));
+        }
+      }
     });
   }
 
   useEffect(() => {
-    if (prefs.autoZap && !didZap && !isMine && !zapping) {
+    if (prefs.autoZap && !ZapCache.has(ev.id) && !isMine && !zapping) {
       const lnurl = getLNURL();
       if (wallet?.isReady() && lnurl) {
         setZapping(true);
         queueMicrotask(async () => {
           try {
             await fastZapInner(lnurl, prefs.defaultZapAmount, ev.pubkey, ev.id);
+            ZapCache.add(ev.id);
+            fastZapDonate();
           } catch {
             // ignored
           } finally {
@@ -244,12 +273,13 @@ export default function NoteFooter(props: NoteFooterProps) {
           <Icon name="heart" />
           <div className="reaction-pill-number">{formatShort(positive.length)}</div>
         </div>
+        {repostIcon()}
       </>
     );
   }
 
   async function share() {
-    const link = encodeTLV(NostrPrefix.Event, ev.id, ev.relays);
+    const link = encodeTLV(ev.id, NostrPrefix.Event, ev.relays);
     const url = `${window.location.protocol}//${window.location.host}/e/${link}`;
     if ("share" in window.navigator) {
       await window.navigator.share({
@@ -285,26 +315,22 @@ export default function NoteFooter(props: NoteFooterProps) {
   }
 
   async function copyId() {
-    const link = encodeTLV(NostrPrefix.Event, ev.id, ev.relays);
+    const link = encodeTLV(ev.id, NostrPrefix.Event, ev.relays);
     await navigator.clipboard.writeText(link);
   }
 
   async function pin(id: HexKey) {
-    if (publisher) {
-      const es = [...pinned.item, id];
-      const ev = await publisher.noteList(es, Lists.Pinned);
-      System.BroadcastEvent(ev);
-      setPinned(login, es, ev.created_at * 1000);
-    }
+    const es = [...pinned, id];
+    const ev = await publisher.pinned(es);
+    publisher.broadcast(ev);
+    dispatch(setPinned({ keys: es, createdAt: new Date().getTime() }));
   }
 
   async function bookmark(id: HexKey) {
-    if (publisher) {
-      const es = [...bookmarked.item, id];
-      const ev = await publisher.noteList(es, Lists.Bookmarked);
-      System.BroadcastEvent(ev);
-      setBookmarked(login, es, ev.created_at * 1000);
-    }
+    const es = [...bookmarked, id];
+    const ev = await publisher.bookmarked(es);
+    publisher.broadcast(ev);
+    dispatch(setBookmarked({ keys: es, createdAt: new Date().getTime() }));
   }
 
   async function copyEvent() {
@@ -329,13 +355,13 @@ export default function NoteFooter(props: NoteFooterProps) {
           <Icon name="share" />
           <FormattedMessage {...messages.Share} />
         </MenuItem>
-        {!pinned.item.includes(ev.id) && (
+        {!pinned.includes(ev.id) && (
           <MenuItem onClick={() => pin(ev.id)}>
             <Icon name="pin" />
             <FormattedMessage {...messages.Pin} />
           </MenuItem>
         )}
-        {!bookmarked.item.includes(ev.id) && (
+        {!bookmarked.includes(ev.id) && (
           <MenuItem onClick={() => bookmark(ev.id)}>
             <Icon name="bookmark" />
             <FormattedMessage {...messages.Bookmark} />
@@ -355,18 +381,10 @@ export default function NoteFooter(props: NoteFooterProps) {
             <FormattedMessage {...messages.DislikeAction} />
           </MenuItem>
         )}
-        {ev.pubkey === publicKey && (
-          <MenuItem onClick={handleReBroadcastButtonClick}>
-            <Icon name="relay" />
-            <FormattedMessage {...messages.ReBroadcast} />
-          </MenuItem>
-        )}
-        {ev.pubkey !== publicKey && (
-          <MenuItem onClick={() => block(ev.pubkey)}>
-            <Icon name="block" />
-            <FormattedMessage {...messages.Block} />
-          </MenuItem>
-        )}
+        <MenuItem onClick={() => block(ev.pubkey)}>
+          <Icon name="block" />
+          <FormattedMessage {...messages.Block} />
+        </MenuItem>
         <MenuItem onClick={() => translate()}>
           <Icon name="translate" />
           <FormattedMessage {...messages.TranslateTo} values={{ lang: langNames.of(lang.split("-")[0]) }} />
@@ -396,22 +414,12 @@ export default function NoteFooter(props: NoteFooterProps) {
     dispatch(setShow(!showNoteCreatorModal));
   };
 
-  const handleReBroadcastButtonClick = () => {
-    if (reBroadcastNote?.id !== ev.id) {
-      dispatch(resetReBroadcast());
-    }
-
-    dispatch(setReBroadcastNote(ev));
-    dispatch(setReBroadcastShow(!showReBroadcastModal));
-  };
-
   return (
     <>
       <div className="footer">
         <div className="footer-reactions">
           {tipButton()}
           {reactionIcons()}
-          {repostIcon()}
           <div className={`reaction-pill ${showNoteCreatorModal ? "reacted" : ""}`} onClick={handleReplyButtonClick}>
             <Icon name="reply" size={17} />
           </div>
@@ -426,7 +434,6 @@ export default function NoteFooter(props: NoteFooterProps) {
           </Menu>
         </div>
         {willRenderNoteCreator && <NoteCreator />}
-        {willRenderReBroadcast && <ReBroadcaster />}
         <Reactions
           show={showReactions}
           setShow={setShowReactions}
@@ -442,7 +449,6 @@ export default function NoteFooter(props: NoteFooterProps) {
           author={author?.pubkey}
           target={getTargetName()}
           note={ev.id}
-          allocatePool={true}
         />
       </div>
       <div className="zaps-container">

packages/app/src/Element/NoteQuote.tsx

@@ -1,20 +0,0 @@
-import useEventFeed from "Feed/EventFeed";
-import { NostrLink } from "@snort/system";
-import Note from "Element/Note";
-import PageSpinner from "Element/PageSpinner";
-
-export default function NoteQuote({ link, depth }: { link: NostrLink; depth?: number }) {
-  const ev = useEventFeed(link);
-  if (!ev.data) return <PageSpinner />;
-  return (
-    <Note
-      data={ev.data}
-      related={[]}
-      className="note-quote"
-      depth={(depth ?? 0) + 1}
-      options={{
-        showFooter: false,
-      }}
-    />
-  );
-}

packages/app/src/Element/NoteReaction.tsx

@@ -1,13 +1,14 @@
 import "./NoteReaction.css";
 import { Link } from "react-router-dom";
 import { useMemo } from "react";
-import { EventKind, NostrEvent, TaggedRawEvent, NostrPrefix, EventExt } from "@snort/system";
+import { EventKind, RawEvent, TaggedRawEvent, NostrPrefix } from "@snort/nostr";
 
 import Note from "Element/Note";
 import ProfileImage from "Element/ProfileImage";
-import { eventLink, hexToBech32 } from "SnortUtils";
+import { eventLink, hexToBech32 } from "Util";
 import NoteTime from "Element/NoteTime";
 import useModeration from "Hooks/useModeration";
+import { EventExt } from "System/EventExt";
 
 export interface NoteReactionProps {
   data: TaggedRawEvent;
@@ -42,7 +43,7 @@ export default function NoteReaction(props: NoteReactionProps) {
   function extractRoot() {
     if (ev?.kind === EventKind.Repost && ev.content.length > 0 && ev.content !== "#[0]") {
       try {
-        const r: NostrEvent = JSON.parse(ev.content);
+        const r: RawEvent = JSON.parse(ev.content);
         return r as TaggedRawEvent;
       } catch (e) {
         console.error("Could not load reposted content", e);

packages/app/src/Element/NoteTime.tsx

@@ -28,6 +28,7 @@ export default function NoteTime(props: NoteTimeProps) {
         year: "2-digit",
         month: "short",
         day: "2-digit",
+        weekday: "short",
       });
     } else if (absAgo > HourInMs) {
       return `${fromDate.getHours().toString().padStart(2, "0")}:${fromDate.getMinutes().toString().padStart(2, "0")}`;

packages/app/src/Element/NoteToSelf.css

@@ -3,19 +3,20 @@
   align-items: center;
 }
 
+.note-to-self {
+  margin-left: 5px;
+  margin-top: 3px;
+}
+
 .nts .avatar-wrapper {
   margin-right: 8px;
 }
 
 .nts .avatar {
   border-width: 1px;
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  width: 40px;
+  height: 40px;
 }
-
 .nts .avatar.clickable {
   cursor: pointer;
 }

packages/app/src/Element/NoteToSelf.tsx

@@ -1,10 +1,11 @@
 import "./NoteToSelf.css";
 import { Link, useNavigate } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
-import { profileLink } from "SnortUtils";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBook, faCertificate } from "@fortawesome/free-solid-svg-icons";
+import { profileLink } from "Util";
 
 import messages from "./messages";
-import Icon from "Icons/Icon";
 
 export interface NoteToSelfProps {
   pubkey: string;
@@ -16,7 +17,7 @@ export interface NoteToSelfProps {
 function NoteLabel() {
   return (
     <div>
-      <FormattedMessage {...messages.NoteToSelf} /> <Icon name="badge" size={15} />
+      <FormattedMessage {...messages.NoteToSelf} /> <FontAwesomeIcon icon={faCertificate} size="xs" />
     </div>
   );
 }
@@ -34,7 +35,7 @@ export default function NoteToSelf({ pubkey, clickable, className, link }: NoteT
     <div className={`nts${className ? ` ${className}` : ""}`}>
       <div className="avatar-wrapper">
         <div className={`avatar${clickable ? " clickable" : ""}`}>
-          <Icon onClick={clickLink} name="book-closed" size={20} />
+          <FontAwesomeIcon onClick={clickLink} className="note-to-self" icon={faBook} size="2xl" />
         </div>
       </div>
       <div className="f-grow">

packages/app/src/Element/PageSpinner.tsx

@@ -1,9 +0,0 @@
-import Spinner from "Icons/Spinner";
-
-export default function PageSpinner() {
-  return (
-    <div className="flex f-center">
-      <Spinner width={50} height={50} />
-    </div>
-  );
-}

packages/app/src/Element/Poll.tsx

@@ -1,137 +0,0 @@
-import { TaggedRawEvent, ParsedZap } from "@snort/system";
-import { LNURL } from "@snort/shared";
-import { useState } from "react";
-import { FormattedMessage, FormattedNumber, useIntl } from "react-intl";
-import { useUserProfile } from "@snort/system-react";
-
-import Text from "Element/Text";
-import useEventPublisher from "Feed/EventPublisher";
-import { useWallet } from "Wallet";
-import { unwrap } from "SnortUtils";
-import { formatShort } from "Number";
-import Spinner from "Icons/Spinner";
-import SendSats from "Element/SendSats";
-import useLogin from "Hooks/useLogin";
-import { System } from "index";
-
-interface PollProps {
-  ev: TaggedRawEvent;
-  zaps: Array<ParsedZap>;
-}
-
-export default function Poll(props: PollProps) {
-  const { formatMessage } = useIntl();
-  const publisher = useEventPublisher();
-  const { wallet } = useWallet();
-  const { preferences: prefs, publicKey: myPubKey, relays } = useLogin();
-  const pollerProfile = useUserProfile(System, props.ev.pubkey);
-  const [error, setError] = useState("");
-  const [invoice, setInvoice] = useState("");
-  const [voting, setVoting] = useState<number>();
-  const didVote = props.zaps.some(a => a.sender === myPubKey);
-  const isMyPoll = props.ev.pubkey === myPubKey;
-  const showResults = didVote || isMyPoll;
-
-  const options = props.ev.tags.filter(a => a[0] === "poll_option").sort((a, b) => Number(a[1]) - Number(b[1]));
-  async function zapVote(ev: React.MouseEvent, opt: number) {
-    ev.stopPropagation();
-    if (voting || !publisher) return;
-
-    const amount = prefs.defaultZapAmount;
-    try {
-      if (amount <= 0) {
-        throw new Error(
-          formatMessage(
-            {
-              defaultMessage: "Can't vote with {amount} sats, please set a different default zap amount",
-            },
-            {
-              amount,
-            }
-          )
-        );
-      }
-
-      setVoting(opt);
-      const r = Object.keys(relays.item);
-      const zap = await publisher.zap(amount * 1000, props.ev.pubkey, r, props.ev.id, undefined, eb =>
-        eb.tag(["poll_option", opt.toString()])
-      );
-
-      const lnurl = props.ev.tags.find(a => a[0] === "zap")?.[1] || pollerProfile?.lud16 || pollerProfile?.lud06;
-      if (!lnurl) return;
-
-      const svc = new LNURL(lnurl);
-      await svc.load();
-
-      if (!svc.canZap) {
-        throw new Error(
-          formatMessage({
-            defaultMessage: "Can't vote because LNURL service does not support zaps",
-          })
-        );
-      }
-
-      const invoice = await svc.getInvoice(amount, undefined, zap);
-      if (wallet?.isReady()) {
-        await wallet?.payInvoice(unwrap(invoice.pr));
-      } else {
-        setInvoice(unwrap(invoice.pr));
-      }
-    } catch (e) {
-      if (e instanceof Error) {
-        setError(e.message);
-      } else {
-        setError(
-          formatMessage({
-            defaultMessage: "Failed to send vote",
-          })
-        );
-      }
-    } finally {
-      setVoting(undefined);
-    }
-  }
-
-  const allTotal = props.zaps.filter(a => a.pollOption !== undefined).reduce((acc, v) => (acc += v.amount), 0);
-  return (
-    <>
-      <small>
-        <FormattedMessage
-          defaultMessage="You are voting with {amount} sats"
-          values={{
-            amount: formatShort(prefs.defaultZapAmount),
-          }}
-        />
-      </small>
-      <div className="poll-body">
-        {options.map(a => {
-          const opt = Number(a[1]);
-          const desc = a[2];
-          const zapsOnOption = props.zaps.filter(b => b.pollOption === opt);
-          const total = zapsOnOption.reduce((acc, v) => (acc += v.amount), 0);
-          const weight = allTotal === 0 ? 0 : total / allTotal;
-          return (
-            <div key={a[1]} className="flex" onClick={e => zapVote(e, opt)}>
-              <div className="f-grow">
-                {opt === voting ? <Spinner /> : <Text content={desc} tags={props.ev.tags} creator={props.ev.pubkey} />}
-              </div>
-              {showResults && (
-                <>
-                  <div className="flex">
-                    <FormattedNumber value={weight * 100} maximumFractionDigits={0} />% &nbsp;
-                    <small>({formatShort(total)})</small>
-                  </div>
-                  <div style={{ width: `${weight * 100}%` }} className="progress"></div>
-                </>
-              )}
-            </div>
-          );
-        })}
-        {error && <b className="error">{error}</b>}
-      </div>
-
-      <SendSats show={invoice !== ""} onClose={() => setInvoice("")} invoice={invoice} />
-    </>
-  );
-}

packages/app/src/Element/ProfileImage.css

@@ -1,10 +1,6 @@
 .pfp {
-  display: grid;
-  grid-template-columns: min-content auto;
+  display: flex;
   align-items: center;
-  text-decoration: none;
-  user-select: none;
-  min-width: 0;
 }
 
 .pfp .avatar-wrapper {
@@ -18,7 +14,7 @@
   cursor: pointer;
 }
 
-a.pfp {
+.pfp a {
   text-decoration: none;
 }
 
@@ -30,11 +26,23 @@ a.pfp {
 }
 
 .pfp .profile-name {
-  max-width: stretch;
-  max-width: -webkit-fill-available;
-  max-width: -moz-available;
+  display: flex;
+  flex-direction: column;
 }
 
-.pfp a {
-  text-decoration: none;
+.pfp .display-name {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+@media (max-width: 420px) {
+  .pfp .display-name {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.pfp .subheader .about {
+  max-width: calc(100vw - 140px);
 }

packages/app/src/Element/ProfileImage.tsx

@@ -1,14 +1,14 @@
 import "./ProfileImage.css";
 
-import React, { useMemo } from "react";
-import { Link } from "react-router-dom";
-import { HexKey, NostrPrefix, UserMetadata } from "@snort/system";
-import { useUserProfile } from "@snort/system-react";
-
-import { hexToBech32, profileLink } from "SnortUtils";
+import { useMemo } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useUserProfile } from "Hooks/useUserProfile";
+import { hexToBech32, profileLink } from "Util";
 import Avatar from "Element/Avatar";
 import Nip05 from "Element/Nip05";
-import { System } from "index";
+import { HexKey, NostrPrefix } from "@snort/nostr";
+import { MetadataCache } from "Cache";
+import usePageWidth from "Hooks/usePageWidth";
 
 export interface ProfileImageProps {
   pubkey: HexKey;
@@ -16,10 +16,11 @@ export interface ProfileImageProps {
   showUsername?: boolean;
   className?: string;
   link?: string;
+  autoWidth?: boolean;
   defaultNip?: string;
   verifyNip?: boolean;
+  linkToProfile?: boolean;
   overrideUsername?: string;
-  profile?: UserMetadata;
 }
 
 export default function ProfileImage({
@@ -28,51 +29,58 @@ export default function ProfileImage({
   showUsername = true,
   className,
   link,
+  autoWidth = true,
   defaultNip,
   verifyNip,
+  linkToProfile = true,
   overrideUsername,
-  profile,
 }: ProfileImageProps) {
-  const user = profile ?? useUserProfile(System, pubkey);
+  const navigate = useNavigate();
+  const user = useUserProfile(pubkey);
   const nip05 = defaultNip ? defaultNip : user?.nip05;
+  const width = usePageWidth();
 
   const name = useMemo(() => {
     return overrideUsername ?? getDisplayName(user, pubkey);
   }, [user, pubkey, overrideUsername]);
 
-  function handleClick(e: React.MouseEvent) {
-    if (link === "") {
-      e.preventDefault();
-    }
+  if (!pubkey && !link) {
+    link = "#";
   }
 
+  const onAvatarClick = () => {
+    if (linkToProfile) {
+      navigate(link ?? profileLink(pubkey));
+    }
+  };
+
   return (
-    <Link
-      className={`pfp${className ? ` ${className}` : ""}`}
-      to={link === undefined ? profileLink(pubkey) : link}
-      onClick={handleClick}
-      replace={true}>
+    <div className={`pfp f-ellipsis${className ? ` ${className}` : ""}`}>
       <div className="avatar-wrapper">
-        <Avatar user={user} />
+        <Avatar user={user} onClick={onAvatarClick} />
       </div>
       {showUsername && (
-        <div className="f-ellipsis">
+        <div className="profile-name">
           <div className="username">
-            <div>{name.trim()}</div>
-            {nip05 && <Nip05 nip05={nip05} pubkey={pubkey} verifyNip={verifyNip} />}
+            <Link className="display-name" key={pubkey} to={link ?? profileLink(pubkey)}>
+              <div>{name.trim()}</div>
+              {nip05 && <Nip05 nip05={nip05} pubkey={pubkey} verifyNip={verifyNip} />}
+            </Link>
+          </div>
+          <div className="subheader" style={{ width: autoWidth ? width - 190 : "" }}>
+            {subHeader}
           </div>
-          <div className="subheader">{subHeader}</div>
         </div>
       )}
-    </Link>
+    </div>
   );
 }
 
-export function getDisplayName(user: UserMetadata | undefined, pubkey: HexKey) {
+export function getDisplayName(user: MetadataCache | undefined, pubkey: HexKey) {
   let name = hexToBech32(NostrPrefix.PublicKey, pubkey).substring(0, 12);
-  if (typeof user?.display_name === "string" && user.display_name.length > 0) {
+  if (user?.display_name !== undefined && user.display_name.length > 0) {
     name = user.display_name;
-  } else if (typeof user?.name === "string" && user.name.length > 0) {
+  } else if (user?.name !== undefined && user.name.length > 0) {
     name = user.name;
   }
   return name;

packages/app/src/Element/ProfilePreview.css

@@ -1,7 +1,7 @@
 .profile-preview {
   display: flex;
   align-items: center;
-  min-height: 59px;
+  min-height: 40px;
 }
 
 .profile-preview .pfp {

packages/app/src/Element/ProfilePreview.tsx

@@ -1,12 +1,11 @@
 import "./ProfilePreview.css";
 import { ReactNode } from "react";
-import { HexKey } from "@snort/system";
-import { useUserProfile } from "@snort/system-react";
-import { useInView } from "react-intersection-observer";
 
 import ProfileImage from "Element/ProfileImage";
 import FollowButton from "Element/FollowButton";
-import { System } from "index";
+import { useUserProfile } from "Hooks/useUserProfile";
+import { HexKey } from "@snort/nostr";
+import { useInView } from "react-intersection-observer";
 
 export interface ProfilePreviewProps {
   pubkey: HexKey;
@@ -18,8 +17,8 @@ export interface ProfilePreviewProps {
 }
 export default function ProfilePreview(props: ProfilePreviewProps) {
   const pubkey = props.pubkey;
+  const user = useUserProfile(pubkey);
   const { ref, inView } = useInView({ triggerOnce: true });
-  const user = useUserProfile(System, inView ? pubkey : undefined);
   const options = {
     about: true,
     ...props.options,

packages/app/src/Element/ProxyImg.tsx

@@ -1,48 +1,22 @@
 import useImgProxy from "Hooks/useImgProxy";
 import { useEffect, useState } from "react";
-import { FormattedMessage } from "react-intl";
-import { getUrlHostname } from "SnortUtils";
 
 interface ProxyImgProps extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
   size?: number;
 }
 
 export const ProxyImg = (props: ProxyImgProps) => {
+  const { src, size, ...rest } = props;
+  const [url, setUrl] = useState<string>();
   const { proxy } = useImgProxy();
-  const [loadFailed, setLoadFailed] = useState(false);
-  const [bypass, setBypass] = useState(false);
 
-  if (loadFailed) {
-    if (bypass) {
-      return <img {...props} />;
+  useEffect(() => {
+    if (src) {
+      proxy(src, size)
+        .then(a => setUrl(a))
+        .catch(console.warn);
     }
-    return (
-      <div
-        className="note-invoice error"
-        onClick={e => {
-          e.stopPropagation();
-          setBypass(true);
-        }}>
-        <FormattedMessage
-          defaultMessage="Failed to proxy image from {host}, click here to load directly"
-          values={{
-            host: getUrlHostname(props.src),
-          }}
-        />
-      </div>
-    );
-  }
-  return (
-    <img
-      {...props}
-      src={props.src ? proxy(props.src, props.size) : ""}
-      onError={e => {
-        if (props.onError) {
-          props.onError(e);
-        } else {
-          setLoadFailed(true);
-        }
-      }}
-    />
-  );
+  }, [src]);
+
+  return <img src={url} {...rest} />;
 };

packages/app/src/Element/PubkeyList.tsx

@@ -1,84 +0,0 @@
-import { NostrEvent } from "@snort/system";
-import { FormattedMessage, FormattedNumber } from "react-intl";
-import { LNURL } from "@snort/shared";
-
-import { dedupe, hexToBech32, unixNow } from "SnortUtils";
-import FollowListBase from "Element/FollowListBase";
-import AsyncButton from "Element/AsyncButton";
-import { useWallet } from "Wallet";
-import { Toastore } from "Toaster";
-import { getDisplayName } from "Element/ProfileImage";
-import { UserCache } from "Cache";
-import useLogin from "Hooks/useLogin";
-import useEventPublisher from "Feed/EventPublisher";
-import { WalletInvoiceState } from "Wallet";
-
-export default function PubkeyList({ ev, className }: { ev: NostrEvent; className?: string }) {
-  const wallet = useWallet();
-  const login = useLogin();
-  const publisher = useEventPublisher();
-  const ids = dedupe(ev.tags.filter(a => a[0] === "p").map(a => a[1]));
-
-  async function zapAll() {
-    for (const pk of ids) {
-      try {
-        const profile = await UserCache.get(pk);
-        const amtSend = login.preferences.defaultZapAmount;
-        const lnurl = profile?.lud16 || profile?.lud06;
-        if (lnurl) {
-          const svc = new LNURL(lnurl);
-          await svc.load();
-
-          const zap = await publisher?.zap(
-            amtSend * 1000,
-            pk,
-            Object.keys(login.relays.item),
-            undefined,
-            `Zap from ${hexToBech32("note", ev.id)}`
-          );
-          const invoice = await svc.getInvoice(amtSend, undefined, zap);
-          if (invoice.pr) {
-            const rsp = await wallet.wallet?.payInvoice(invoice.pr);
-            if (rsp?.state === WalletInvoiceState.Paid) {
-              Toastore.push({
-                element: (
-                  <FormattedMessage
-                    defaultMessage="Sent {n} sats to {name}"
-                    values={{
-                      n: amtSend,
-                      name: getDisplayName(profile, pk),
-                    }}
-                  />
-                ),
-                icon: "zap",
-              });
-            }
-          }
-        }
-      } catch (e) {
-        console.debug("Failed to zap", pk, e);
-      }
-    }
-  }
-
-  return (
-    <FollowListBase
-      pubkeys={ids}
-      showAbout={true}
-      className={className}
-      title={ev.tags.find(a => a[0] === "d")?.[1]}
-      actions={
-        <>
-          <AsyncButton className="mr5 transparent" onClick={() => zapAll()}>
-            <FormattedMessage
-              defaultMessage="Zap All {n} sats"
-              values={{
-                n: <FormattedNumber value={login.preferences.defaultZapAmount * ids.length} />,
-              }}
-            />
-          </AsyncButton>
-        </>
-      }
-    />
-  );
-}

packages/app/src/Element/ReBroadcaster.tsx

@@ -1,88 +0,0 @@
-import { FormattedMessage } from "react-intl";
-import { useDispatch, useSelector } from "react-redux";
-import useEventPublisher from "Feed/EventPublisher";
-import Modal from "Element/Modal";
-import type { RootState } from "State/Store";
-import { setShow, reset, setSelectedCustomRelays } from "State/ReBroadcast";
-import messages from "./messages";
-import useLogin from "Hooks/useLogin";
-import { System } from "index";
-
-export function ReBroadcaster() {
-  const publisher = useEventPublisher();
-  const { note, show, selectedCustomRelays } = useSelector((s: RootState) => s.reBroadcast);
-  const dispatch = useDispatch();
-
-  async function sendReBroadcast() {
-    if (note && publisher) {
-      if (selectedCustomRelays) selectedCustomRelays.forEach(r => System.WriteOnceToRelay(r, note));
-      else System.BroadcastEvent(note);
-      dispatch(reset());
-    }
-  }
-
-  function cancel() {
-    dispatch(reset());
-  }
-
-  function onSubmit(ev: React.MouseEvent<HTMLButtonElement>) {
-    ev.stopPropagation();
-    sendReBroadcast().catch(console.warn);
-  }
-
-  const login = useLogin();
-  const relays = login.relays;
-
-  function renderRelayCustomisation() {
-    return (
-      <div>
-        {Object.keys(relays.item || {})
-          .filter(el => relays.item[el].write)
-          .map((r, i, a) => (
-            <div className="card flex">
-              <div className="flex f-col f-grow">
-                <div>{r}</div>
-              </div>
-              <div>
-                <input
-                  type="checkbox"
-                  checked={!selectedCustomRelays || selectedCustomRelays.includes(r)}
-                  onChange={e =>
-                    dispatch(
-                      setSelectedCustomRelays(
-                        // set false if all relays selected
-                        e.target.checked && selectedCustomRelays && selectedCustomRelays.length == a.length - 1
-                          ? false
-                          : // otherwise return selectedCustomRelays with target relay added / removed
-                            a.filter(el =>
-                              el === r ? e.target.checked : !selectedCustomRelays || selectedCustomRelays.includes(el)
-                            )
-                      )
-                    )
-                  }
-                />
-              </div>
-            </div>
-          ))}
-      </div>
-    );
-  }
-
-  return (
-    <>
-      {show && (
-        <Modal className="note-creator-modal" onClose={() => dispatch(setShow(false))}>
-          {renderRelayCustomisation()}
-          <div className="note-creator-actions">
-            <button className="secondary" onClick={cancel}>
-              <FormattedMessage {...messages.Cancel} />
-            </button>
-            <button onClick={onSubmit}>
-              <FormattedMessage {...messages.ReBroadcast} />
-            </button>
-          </div>
-        </Modal>
-      )}
-    </>
-  );
-}

packages/app/src/Element/Reactions.css

@@ -1,23 +1,27 @@
 .reactions-modal .modal-body {
+  padding: 0;
+  max-width: 586px;
+}
+
+.reactions-view {
   padding: 24px 32px;
   background-color: #1b1b1b;
   border-radius: 16px;
   position: relative;
-  min-height: 33vh;
 }
 
-.light .reactions-modal .modal-body {
+.light .reactions-view {
   background-color: var(--note-bg);
 }
 
 @media (max-width: 720px) {
-  .reactions-modal .modal-body {
+  .reactions-view {
     padding: 12px 16px;
-    max-width: calc(100vw - 32px);
+    margin-top: -160px;
   }
 }
 
-.reactions-modal .modal-body .close {
+.reactions-view .close {
   position: absolute;
   top: 12px;
   right: 16px;
@@ -25,18 +29,18 @@
   cursor: pointer;
 }
 
-.reactions-modal .modal-body .close:hover {
+.reactions-view .close:hover {
   color: var(--font-tertiary-color);
 }
 
-.reactions-modal .modal-body .reactions-header {
+.reactions-view .reactions-header {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-bottom: 32px;
 }
 
-.reactions-modal .modal-body .reactions-header h2 {
+.reactions-view .reactions-header h2 {
   margin: 0;
   flex-grow: 1;
   font-weight: 600;
@@ -44,25 +48,26 @@
   line-height: 19px;
 }
 
-.reactions-modal .modal-body .reactions-body {
+.reactions-view .body {
   overflow: scroll;
-  height: 40vh;
+  height: 320px;
   -ms-overflow-style: none; /* for Internet Explorer, Edge */
   scrollbar-width: none; /* Firefox */
 }
 
-.reactions-modal .modal-body .reactions-body::-webkit-scrollbar {
+.reactions-view .body::-webkit-scrollbar {
   display: none;
 }
 
 .reactions-item {
-  display: grid;
-  grid-template-columns: 52px auto;
+  display: flex;
+  flex-direction: row;
   align-items: center;
   margin-bottom: 24px;
 }
 
 .reactions-item .reaction-icon {
+  width: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -87,8 +92,12 @@
   line-height: 17px;
 }
 
+.reactions-item .zap-comment {
+  width: 332px;
+}
+
 @media (max-width: 520px) {
-  .reactions-modal .modal-body .tab.disabled {
+  .reactions-view .tab.disabled {
     display: none;
   }
 }

packages/app/src/Element/Reactions.tsx

@@ -2,11 +2,13 @@ import "./Reactions.css";
 
 import { useState, useMemo, useEffect } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
-import { TaggedRawEvent, ParsedZap } from "@snort/system";
+
+import { TaggedRawEvent } from "@snort/nostr";
 
 import { formatShort } from "Number";
 import Icon from "Icons/Icon";
 import { Tab } from "Element/Tabs";
+import { ParsedZap } from "Element/Zap";
 import ProfileImage from "Element/ProfileImage";
 import Tabs from "Element/Tabs";
 import Modal from "Element/Modal";
@@ -73,66 +75,72 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio
 
   return show ? (
     <Modal className="reactions-modal" onClose={onClose}>
-      <div className="close" onClick={onClose}>
-        <Icon name="close" />
-      </div>
-      <div className="reactions-header">
-        <h2>
-          <FormattedMessage {...messages.ReactionsCount} values={{ n: total }} />
-        </h2>
-      </div>
-      <Tabs tabs={tabs} tab={tab} setTab={setTab} />
-      <div className="reactions-body" key={tab.value}>
-        {tab.value === 0 &&
-          likes.map(ev => {
-            return (
-              <div key={ev.id} className="reactions-item">
-                <div className="reaction-icon">{ev.content === "+" ? <Icon name="heart" /> : ev.content}</div>
-                <ProfileImage pubkey={ev.pubkey} />
-              </div>
-            );
-          })}
-        {tab.value === 1 &&
-          zaps.map(z => {
-            return (
-              z.sender && (
-                <div key={z.id} className="reactions-item">
-                  <div className="zap-reaction-icon">
-                    <Icon name="zap" size={20} />
-                    <span className="zap-amount">{formatShort(z.amount)}</span>
+      <div className="reactions-view">
+        <div className="close" onClick={onClose}>
+          <Icon name="close" />
+        </div>
+        <div className="reactions-header">
+          <h2>
+            <FormattedMessage {...messages.ReactionsCount} values={{ n: total }} />
+          </h2>
+        </div>
+        <Tabs tabs={tabs} tab={tab} setTab={setTab} />
+        <div className="body" key={tab.value}>
+          {tab.value === 0 &&
+            likes.map(ev => {
+              return (
+                <div key={ev.id} className="reactions-item">
+                  <div className="reaction-icon">{ev.content === "+" ? <Icon name="heart" /> : ev.content}</div>
+                  <ProfileImage autoWidth={false} pubkey={ev.pubkey} />
+                </div>
+              );
+            })}
+          {tab.value === 1 &&
+            zaps.map(z => {
+              return (
+                z.sender && (
+                  <div key={z.id} className="reactions-item">
+                    <div className="zap-reaction-icon">
+                      <Icon name="zap" size={20} />
+                      <span className="zap-amount">{formatShort(z.amount)}</span>
+                    </div>
+                    <ProfileImage
+                      autoWidth={false}
+                      pubkey={z.anonZap ? "" : z.sender}
+                      subHeader={
+                        <div className="f-ellipsis zap-comment" title={z.content}>
+                          {z.content}
+                        </div>
+                      }
+                      overrideUsername={z.anonZap ? formatMessage({ defaultMessage: "Anonymous" }) : undefined}
+                    />
                   </div>
-                  <ProfileImage
-                    pubkey={z.anonZap ? "" : z.sender}
-                    subHeader={<div title={z.content}>{z.content}</div>}
-                    link={z.anonZap ? "" : undefined}
-                    overrideUsername={z.anonZap ? formatMessage({ defaultMessage: "Anonymous" }) : undefined}
-                  />
+                )
+              );
+            })}
+          {tab.value === 2 &&
+            reposts.map(ev => {
+              return (
+                <div key={ev.id} className="reactions-item">
+                  <div className="reaction-icon">
+                    <Icon name="repost" size={16} />
+                  </div>
+                  <ProfileImage autoWidth={false} pubkey={ev.pubkey} />
                 </div>
-              )
-            );
-          })}
-        {tab.value === 2 &&
-          reposts.map(ev => {
-            return (
-              <div key={ev.id} className="reactions-item">
-                <div className="reaction-icon">
-                  <Icon name="repost" size={16} />
+              );
+            })}
+          {tab.value === 3 &&
+            dislikes.map(ev => {
+              return (
+                <div key={ev.id} className="reactions-item">
+                  <div className="reaction-icon">
+                    <Icon name="dislike" />
+                  </div>
+                  <ProfileImage autoWidth={false} pubkey={ev.pubkey} />
                 </div>
-                <ProfileImage pubkey={ev.pubkey} />
-              </div>
-            );
-          })}
-        {tab.value === 3 &&
-          dislikes.map(ev => {
-            return (
-              <div key={ev.id} className="reactions-item f-ellipsis">
-                <div className="reaction-icon">
-                  <Icon name="dislike" />
-                </div>
-                <ProfileImage pubkey={ev.pubkey} />
-              </div>
-            );
-          })}
+              );
+            })}
+        </div>
       </div>
     </Modal>
   ) : null;

packages/app/src/Element/Relay.tsx

@@ -1,15 +1,25 @@
 import "./Relay.css";
 import { useMemo } from "react";
-import { FormattedMessage } from "react-intl";
+import { useIntl, FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
-import { RelaySettings } from "@snort/system";
+import { useDispatch, useSelector } from "react-redux";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faPlug,
+  faSquareCheck,
+  faSquareXmark,
+  faWifi,
+  faPlugCircleXmark,
+  faGear,
+  faWarning,
+} from "@fortawesome/free-solid-svg-icons";
+import { RelaySettings } from "@snort/nostr";
 
 import useRelayState from "Feed/RelayState";
-import { System } from "index";
-import { getRelayName, unixNowMs, unwrap } from "SnortUtils";
-import useLogin from "Hooks/useLogin";
-import { setRelays } from "Login";
-import Icon from "Icons/Icon";
+import { setRelays } from "State/Login";
+import { RootState } from "State/Store";
+import { System } from "System";
+import { getRelayName, unwrap } from "Util";
 
 import messages from "./messages";
 
@@ -18,30 +28,32 @@ export interface RelayProps {
 }
 
 export default function Relay(props: RelayProps) {
+  const dispatch = useDispatch();
+  const { formatMessage } = useIntl();
   const navigate = useNavigate();
-  const login = useLogin();
-  const relaySettings = unwrap(
-    login.relays.item[props.addr] ?? System.Sockets.find(a => a.address === props.addr)?.settings ?? {}
-  );
+  const allRelaySettings = useSelector<RootState, Record<string, RelaySettings>>(s => s.login.relays);
+  const relaySettings = unwrap(allRelaySettings[props.addr] ?? System.Sockets.get(props.addr)?.Settings ?? {});
   const state = useRelayState(props.addr);
   const name = useMemo(() => getRelayName(props.addr), [props.addr]);
 
   function configure(o: RelaySettings) {
-    setRelays(
-      login,
-      {
-        ...login.relays.item,
-        [props.addr]: o,
-      },
-      unixNowMs()
+    dispatch(
+      setRelays({
+        relays: {
+          ...allRelaySettings,
+          [props.addr]: o,
+        },
+        createdAt: Math.floor(new Date().getTime() / 1000),
+      })
     );
   }
 
+  const latency = Math.floor(state?.avgLatency ?? 0);
   return (
     <>
       <div className={`relay w-max`}>
         <div className={`flex ${state?.connected ? "bg-success" : "bg-error"}`}>
-          <Icon name="wifi" />
+          <FontAwesomeIcon icon={faPlug} />
         </div>
         <div className="f-grow f-col">
           <div className="flex mb10">
@@ -56,7 +68,7 @@ export default function Relay(props: RelayProps) {
                     read: relaySettings.read,
                   })
                 }>
-                <Icon name={relaySettings.write ? "check" : "close"} size={12} />
+                <FontAwesomeIcon icon={relaySettings.write ? faSquareCheck : faSquareXmark} />
               </span>
             </div>
             <div className="f-1">
@@ -69,15 +81,28 @@ export default function Relay(props: RelayProps) {
                     read: !relaySettings.read,
                   })
                 }>
-                <Icon name={relaySettings.read ? "check" : "close"} size={12} />
+                <FontAwesomeIcon icon={relaySettings.read ? faSquareCheck : faSquareXmark} />
               </span>
             </div>
           </div>
           <div className="flex">
-            <div className="f-grow"></div>
+            <div className="f-grow">
+              <FontAwesomeIcon icon={faWifi} className="mr5 ml5" />
+              {latency > 2000
+                ? formatMessage(messages.Seconds, {
+                    n: (latency / 1000).toFixed(0),
+                  })
+                : formatMessage(messages.Milliseconds, {
+                    n: latency.toLocaleString(),
+                  })}
+              &nbsp;
+              <FontAwesomeIcon icon={faPlugCircleXmark} className="mr5 ml5" /> {state?.disconnects}
+              <FontAwesomeIcon icon={faWarning} className="mr5 ml5" />
+              {state?.pendingRequests?.length}
+            </div>
             <div>
               <span className="icon-btn" onClick={() => navigate(state?.id ?? "")}>
-                <Icon name="gear" size={12} />
+                <FontAwesomeIcon icon={faGear} />
               </span>
             </div>
           </div>

packages/app/src/Element/RelaysMetadata.tsx

@@ -2,7 +2,7 @@ import "./RelaysMetadata.css";
 import Nostrich from "nostrich.webp";
 import { useState } from "react";
 
-import { FullRelaySettings } from "@snort/system";
+import { FullRelaySettings } from "@snort/nostr";
 import Icon from "Icons/Icon";
 
 const RelayFavicon = ({ url }: { url: string }) => {

packages/app/src/Element/RevealMedia.tsx

@@ -1,9 +1,9 @@
 import { FormattedMessage } from "react-intl";
+import { useSelector } from "react-redux";
 
-import { FileExtensionRegex } from "Const";
+import MediaLink from "Element/MediaLink";
 import Reveal from "Element/Reveal";
-import useLogin from "Hooks/useLogin";
-import { MediaElement } from "Element/MediaElement";
+import { RootState } from "State/Store";
 
 interface RevealMediaProps {
   creator: string;
@@ -11,51 +11,23 @@ interface RevealMediaProps {
 }
 
 export default function RevealMedia(props: RevealMediaProps) {
-  const login = useLogin();
-  const { preferences: pref, follows, publicKey } = login;
+  const pref = useSelector((s: RootState) => s.login.preferences);
+  const follows = useSelector((s: RootState) => s.login.follows);
+  const publicKey = useSelector((s: RootState) => s.login.publicKey);
 
-  const hideNonFollows = pref.autoLoadMedia === "follows-only" && !follows.item.includes(props.creator);
+  const hideNonFollows = pref.autoLoadMedia === "follows-only" && !follows.includes(props.creator);
   const isMine = props.creator === publicKey;
   const hideMedia = pref.autoLoadMedia === "none" || (!isMine && hideNonFollows);
   const hostname = new URL(props.link).hostname;
 
-  const url = new URL(props.link);
-  const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1;
-  const type = (() => {
-    switch (extension) {
-      case "gif":
-      case "jpg":
-      case "jpeg":
-      case "jfif":
-      case "png":
-      case "bmp":
-      case "webp":
-        return "image";
-      case "wav":
-      case "mp3":
-      case "ogg":
-        return "audio";
-      case "mp4":
-      case "mov":
-      case "mkv":
-      case "avi":
-      case "m4v":
-      case "webm":
-      case "m3u8":
-        return "video";
-      default:
-        return "unknown";
-    }
-  })();
-
   if (hideMedia) {
     return (
       <Reveal
         message={<FormattedMessage defaultMessage="Click to load content from {link}" values={{ link: hostname }} />}>
-        <MediaElement mime={`${type}/${extension}`} url={url.toString()} />
+        <MediaLink link={props.link} />
       </Reveal>
     );
   } else {
-    return <MediaElement mime={`${type}/${extension}`} url={url.toString()} />;
+    return <MediaLink link={props.link} />;
   }
 }

packages/app/src/Element/SendSats.tsx

@@ -1,23 +1,21 @@
 import "./SendSats.css";
 import React, { useEffect, useMemo, useState } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
+import { useSelector } from "react-redux";
+import { HexKey, RawEvent } from "@snort/nostr";
 
-import { HexKey, NostrEvent, EventPublisher } from "@snort/system";
-import { LNURL, LNURLError, LNURLErrorCode, LNURLInvoice, LNURLSuccessAction } from "@snort/shared";
-
-import { System } from "index";
 import { formatShort } from "Number";
+import { RootState } from "State/Store";
 import Icon from "Icons/Icon";
 import useEventPublisher from "Feed/EventPublisher";
 import ProfileImage from "Element/ProfileImage";
 import Modal from "Element/Modal";
 import QrCode from "Element/QrCode";
 import Copy from "Element/Copy";
-import { chunks, debounce } from "SnortUtils";
+import { LNURL, LNURLError, LNURLErrorCode, LNURLInvoice, LNURLSuccessAction } from "LNURL";
+import { chunks, debounce } from "Util";
 import { useWallet } from "Wallet";
-import useLogin from "Hooks/useLogin";
-import { generateRandomKey } from "Login";
-import { ZapPoolController } from "ZapPoolController";
+import { EventExt } from "System/EventExt";
 
 import messages from "./messages";
 
@@ -38,14 +36,12 @@ export interface SendSatsProps {
   target?: string;
   note?: HexKey;
   author?: HexKey;
-  allocatePool?: boolean;
 }
 
 export default function SendSats(props: SendSatsProps) {
   const onClose = props.onClose || (() => undefined);
   const { note, author, target } = props;
-  const login = useLogin();
-  const defaultZapAmount = login.preferences.defaultZapAmount;
+  const defaultZapAmount = useSelector((s: RootState) => s.login.preferences.defaultZapAmount);
   const amounts = [defaultZapAmount, 1_000, 5_000, 10_000, 20_000, 50_000, 100_000, 1_000_000];
   const emojis: Record<number, string> = {
     1_000: "👍",
@@ -123,21 +119,22 @@ export default function SendSats(props: SendSatsProps) {
   };
 
   async function loadInvoice() {
-    if (!amount || !handler || !publisher) return null;
+    if (!amount || !handler) return null;
 
-    let zap: NostrEvent | undefined;
+    let zap: RawEvent | undefined;
     if (author && zapType !== ZapType.NonZap) {
-      const relays = Object.keys(login.relays.item);
-
-      // use random key for anon zaps
-      if (zapType === ZapType.AnonZap) {
-        const randomKey = generateRandomKey();
-        console.debug("Generated new key for zap: ", randomKey);
-
-        const publisher = EventPublisher.privateKey(randomKey.privateKey);
-        zap = await publisher.zap(amount * 1000, author, relays, note, comment, eb => eb.tag(["anon", ""]));
-      } else {
-        zap = await publisher.zap(amount * 1000, author, relays, note, comment);
+      const ev = await publisher.zap(amount * 1000, author, note, comment);
+      if (ev) {
+        // replace sig for anon-zap
+        if (zapType === ZapType.AnonZap) {
+          const randomKey = publisher.newKey();
+          console.debug("Generated new key for zap: ", randomKey);
+          ev.pubkey = randomKey.publicKey;
+          ev.id = "";
+          ev.tags.push(["anon"]);
+          await EventExt.sign(ev, randomKey.privateKey);
+        }
+        zap = ev;
       }
     }
 
@@ -197,12 +194,9 @@ export default function SendSats(props: SendSatsProps) {
 
   async function payWithWallet(invoice: LNURLInvoice) {
     try {
-      if (wallet?.isReady()) {
+      if (wallet?.isReady) {
         setPaying(true);
         const res = await wallet.payInvoice(invoice?.pr ?? "");
-        if (props.allocatePool) {
-          ZapPoolController.allocate(amount);
-        }
         console.log(res);
         setSuccess(invoice?.successAction ?? {});
       }

packages/app/src/Element/SubDebug.tsx

@@ -1,13 +1,13 @@
 import "./SubDebug.css";
 import { useState } from "react";
-import { ReqFilter } from "@snort/system";
-import { useSystemState } from "@snort/system-react";
 
 import useRelayState from "Feed/RelayState";
 import Tabs, { Tab } from "Element/Tabs";
-import { unwrap } from "SnortUtils";
+import { System } from "System";
+import { unwrap } from "Util";
+import useSystemState from "Hooks/useSystemState";
+import { RawReqFilter } from "@snort/nostr";
 import { useCopy } from "useCopy";
-import { System } from "index";
 
 function RelayInfo({ id }: { id: string }) {
   const state = useRelayState(id);
@@ -15,10 +15,10 @@ function RelayInfo({ id }: { id: string }) {
 }
 
 function Queries() {
-  const qs = useSystemState(System);
+  const qs = useSystemState();
   const { copy } = useCopy();
 
-  function countElements(filters: Array<ReqFilter>) {
+  function countElements(filters: Array<RawReqFilter>) {
     let total = 0;
     for (const f of filters) {
       for (const v of Object.values(f)) {
@@ -30,10 +30,15 @@ function Queries() {
     return total;
   }
 
-  function queryInfo(q: { id: string; filters: Array<ReqFilter>; subFilters: Array<ReqFilter> }) {
+  function queryInfo(q: {
+    id: string;
+    filters: Array<RawReqFilter>;
+    closing: boolean;
+    subFilters: Array<RawReqFilter>;
+  }) {
     return (
       <div key={q.id}>
-        {q.id}
+        {q.closing ? <s>{q.id}</s> : <>{q.id}</>}
         <br />
         <span onClick={() => copy(JSON.stringify(q.filters))} className="pointer">
           &nbsp; Filters: {q.filters.length} ({countElements(q.filters)} elements)
@@ -61,8 +66,8 @@ const SubDebug = () => {
     return (
       <>
         <b>Connections:</b>
-        {System.Sockets.map(k => (
-          <RelayInfo id={k.address} />
+        {[...System.Sockets.keys()].map(k => (
+          <RelayInfo id={k} />
         ))}
       </>
     );

packages/app/src/Element/SuggestedProfiles.tsx

@@ -1,72 +0,0 @@
-import { useEffect, useState } from "react";
-import { HexKey, NostrPrefix } from "@snort/system";
-import { FormattedMessage } from "react-intl";
-
-import FollowListBase from "Element/FollowListBase";
-import PageSpinner from "Element/PageSpinner";
-import NostrBandApi from "External/NostrBand";
-import SemisolDevApi from "External/SemisolDev";
-import useLogin from "Hooks/useLogin";
-import { hexToBech32 } from "SnortUtils";
-
-enum Provider {
-  NostrBand = 1,
-  SemisolDev = 2,
-}
-
-export default function SuggestedProfiles() {
-  const login = useLogin();
-  const [userList, setUserList] = useState<HexKey[]>();
-  const [provider, setProvider] = useState(Provider.NostrBand);
-  const [error, setError] = useState("");
-
-  async function loadSuggestedProfiles() {
-    if (!login.publicKey) return;
-    setUserList(undefined);
-    setError("");
-
-    try {
-      switch (provider) {
-        case Provider.NostrBand: {
-          const api = new NostrBandApi();
-          const users = await api.sugguestedFollows(hexToBech32(NostrPrefix.PublicKey, login.publicKey));
-          const keys = users.profiles.map(a => a.pubkey);
-          setUserList(keys);
-          break;
-        }
-        case Provider.SemisolDev: {
-          const api = new SemisolDevApi();
-          const users = await api.sugguestedFollows(login.publicKey, login.follows.item);
-          const keys = users.recommendations.sort(a => a[1]).map(a => a[0]);
-          setUserList(keys);
-          break;
-        }
-      }
-    } catch (e) {
-      if (e instanceof Error) {
-        setError(e.message);
-      }
-    }
-  }
-
-  useEffect(() => {
-    loadSuggestedProfiles().catch(console.error);
-  }, [login, provider]);
-
-  return (
-    <>
-      <h3>
-        <FormattedMessage defaultMessage="Suggested Follows" />
-      </h3>
-      <div className="card flex f-space">
-        <FormattedMessage defaultMessage="Provider" />
-        <select onChange={e => setProvider(Number(e.target.value))}>
-          <option value={Provider.NostrBand}>nostr.band</option>
-          <option value={Provider.SemisolDev}>semisol.dev</option>
-        </select>
-      </div>
-      {error && <b className="error">{error}</b>}
-      {userList ? <FollowListBase pubkeys={userList} showAbout={true} /> : <PageSpinner />}
-    </>
-  );
-}

packages/app/src/Element/Text.css

@@ -5,7 +5,7 @@
   word-break: break-word;
 }
 
-.text > a {
+.text a {
   color: var(--highlight);
   text-decoration: none;
 }
@@ -44,7 +44,6 @@
 
 .text pre {
   margin: 0;
-  overflow: scroll;
 }
 
 .text li {
@@ -61,7 +60,7 @@
   margin: 20px;
 }
 
-.text img:not(.custom-emoji),
+.text img,
 .text video,
 .text iframe,
 .text audio {