Merge branch 'development' of https://github.com/plebbit/seedit into development

2026-06-12 01:56:10 -04:00 · 2024-03-02 11:34:44 +01:00
parent 7cb718c7f4 7802b1b8c2
commit b3df34252c
21 changed files with 1676 additions and 974 deletions
--- a/electron/after-all-artifact-build.js
+++ b/electron/after-all-artifact-build.js
@@ -1,9 +1,11 @@
 // hook that runs after electron-build

-const fs = require('fs-extra');
-const path = require('path');
-const { execSync } = require('child_process');
-const rootPath = path.resolve(__dirname, '..');
+import fs from 'fs-extra';
+import path from 'path';
+import { execSync } from 'child_process';
+import packageJson from '../package.json' assert { type: 'json' };
+import { fileURLToPath } from 'url';
+const rootPath = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const distFolderPath = path.resolve(rootPath, 'dist');

 const addPortableToPortableExecutableFileName = () => {
@@ -21,9 +23,8 @@ const createHtmlArchive = () => {
  if (process.platform !== 'linux') {
    return;
  }
-  const { version } = require('../package.json');
  const zipBinPath = path.resolve(rootPath, 'node_modules', '7zip-bin', 'linux', 'x64', '7za');
-  const seeditHtmlFolderName = `seedit-html-${version}`;
+  const seeditHtmlFolderName = `seedit-html-${packageJson.version}`;
  const outputFile = path.resolve(distFolderPath, `${seeditHtmlFolderName}.zip`);
  const inputFolder = path.resolve(rootPath, 'build');
  try {
@@ -37,7 +38,7 @@ const createHtmlArchive = () => {
  }
 };

-exports.default = async (buildResult) => {
+export default async (buildResult) => {
  addPortableToPortableExecutableFileName();
  createHtmlArchive();
 };
--- a/electron/before-pack.js
+++ b/electron/before-pack.js
@@ -1,11 +1,12 @@
 // download the ipfs binaries before building the electron clients

-const fs = require('fs-extra');
-const ProgressBar = require('progress');
-const https = require('https');
-const decompress = require('decompress');
-const path = require('path');
-const ipfsClientsPath = path.join(__dirname, '..', 'bin');
+import fs from 'fs-extra';
+import ProgressBar from 'progress';
+import https from 'https';
+import decompress from 'decompress';
+import path from 'path';
+import { fileURLToPath } from 'url';
+const ipfsClientsPath = path.join(path.dirname(fileURLToPath(import.meta.url)), '..', 'bin');
 const ipfsClientWindowsPath = path.join(ipfsClientsPath, 'win');
 const ipfsClientMacPath = path.join(ipfsClientsPath, 'mac');
 const ipfsClientLinuxPath = path.join(ipfsClientsPath, 'linux');
@@ -98,14 +99,12 @@ const downloadAndExtract = async (url, destinationPath) => {
  fs.removeSync(dowloadPath);
 };

-const downloadIpfsClients = async () => {
+export const downloadIpfsClients = async () => {
  await downloadAndExtract(ipfsClientWindowsUrl, ipfsClientWindowsPath);
  await downloadAndExtract(ipfsClientMacUrl, ipfsClientMacPath);
  await downloadAndExtract(ipfsClientLinuxPUrl, ipfsClientLinuxPath);
 };

-exports.downloadIpfsClients = downloadIpfsClients;
-
-exports.default = async (context) => {
+export default async (context) => {
  await downloadIpfsClients();
 };
--- a/electron/download-ipfs.js
+++ b/electron/download-ipfs.js
@@ -1,2 +1,2 @@
-const downloadIpfsClients = require('./before-pack').downloadIpfsClients;
+import { downloadIpfsClients } from './before-pack.js';
 downloadIpfsClients();
--- a/electron/log.js
+++ b/electron/log.js
@@ -1,9 +1,10 @@
 // require this file to log to file in case there's a crash

-const envPaths = require('env-paths').default('plebbit', { suffix: false });
-const util = require('util');
-const fs = require('fs-extra');
-const path = require('path');
+import util from 'util';
+import fs from 'fs-extra';
+import path from 'path';
+import EnvPaths from 'env-paths';
+const envPaths = EnvPaths.default('plebbit', { suffix: false });

 // previous version created a file instead of folder
 // we should remove this at some point
--- a/electron/main.js
+++ b/electron/main.js
@@ -1,10 +1,13 @@
-require('./log');
-const { app, BrowserWindow, Menu, MenuItem, Tray, screen: electronScreen, shell, dialog, nativeTheme } = require('electron');
-const isDev = require('electron-is-dev');
-const path = require('path');
-const startIpfs = require('./start-ipfs');
-const startPlebbitRpcServer = require('./start-plebbit-rpc');
-const { URL } = require('node:url');
+import './log.js';
+import { app, BrowserWindow, Menu, MenuItem, Tray, screen as electronScreen, shell, dialog, nativeTheme } from 'electron';
+import isDev from 'electron-is-dev';
+import path from 'path';
+import startIpfs from './start-ipfs.js';
+import './start-plebbit-rpc.js';
+import { URL, fileURLToPath } from 'node:url';
+import contextMenu from 'electron-context-menu';
+import packageJson from '../package.json' assert { type: 'json' };
+const dirname = path.join(path.dirname(fileURLToPath(import.meta.url)));

 let startIpfsError;
 startIpfs.onError = (error) => {
@@ -23,10 +26,9 @@ startIpfs.onError = (error) => {
 let fakeUserAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36';
 if (process.platform === 'darwin') fakeUserAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 13_5_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36';
 if (process.platform === 'linux') fakeUserAgent = 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36';
-const realUserAgent = `seedit/${require('../package.json').version}`;
+const realUserAgent = `seedit/${packageJson.version}`;

 // add right click menu
-const contextMenu = require('electron-context-menu');
 contextMenu({
  // prepend custom buttons to top
  prepend: (defaultActions, parameters, browserWindow) => [
@@ -69,7 +71,7 @@ const createMainWindow = () => {
      nodeIntegration: false,
      contextIsolation: true,
      devTools: true, // TODO: change to isDev when no bugs left
-      preload: path.join(__dirname, 'preload.js'),
+      preload: path.join(dirname, 'preload.js'),
    },
  });

@@ -115,7 +117,7 @@ const createMainWindow = () => {
    callback({ responseHeaders: details.responseHeaders });
  });

-  const startURL = isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`;
+  const startURL = isDev ? 'http://localhost:3000' : `file://${path.join(dirname, '../build/index.html')}`;

  mainWindow.loadURL(startURL);

@@ -219,7 +221,7 @@ const createMainWindow = () => {

  if (process.platform !== 'darwin') {
    // tray
-    const trayIconPath = path.join(__dirname, '..', isDev ? 'public' : 'build', 'electron-tray-icon.png');
+    const trayIconPath = path.join(dirname, '..', isDev ? 'public' : 'build', 'electron-tray-icon.png');
    const tray = new Tray(trayIconPath);
    tray.setToolTip('seedit');
    const trayMenu = Menu.buildFromTemplate([
--- a/electron/preload.js
+++ b/electron/preload.js
@@ -10,8 +10,5 @@ const defaultPlebbitOptions = {
 contextBridge.exposeInMainWorld('defaultPlebbitOptions', defaultPlebbitOptions);
 contextBridge.exposeInMainWorld('defaultMediaIpfsGatewayUrl', 'http://localhost:6473');

-// expose a flag to indicate that we are running in electron
-contextBridge.exposeInMainWorld('isElectron', true);
-
 // uncomment for logs
 // localStorage.debug = 'plebbit-js:*,plebbit-react-hooks:*,seedit:*'
--- a/electron/proxy-server.js
+++ b/electron/proxy-server.js
@@ -1,7 +1,7 @@
 // use this proxy server to debug ipfs api requests made by electron

-const http = require('http');
-const httpProxy = require('http-proxy');
+import http from 'http';
+import httpProxy from 'http-proxy';

 // start proxy
 const proxy = httpProxy.createProxyServer({});
@@ -45,4 +45,4 @@ const start = ({ proxyPort, targetPort } = {}) => {
  console.log(`proxy server listening on port ${proxyPort}`);
 };

-module.exports = { start };
+export default { start };
--- a/electron/start-ipfs.js
+++ b/electron/start-ipfs.js
@@ -1,11 +1,14 @@
-const isDev = require('electron-is-dev');
-const path = require('path');
-const { spawn } = require('child_process');
-const fs = require('fs-extra');
-const envPaths = require('env-paths').default('plebbit', { suffix: false });
-const ps = require('node:process');
-const proxyServer = require('./proxy-server');
-const tcpPortUsed = require('tcp-port-used');
+import isDev from 'electron-is-dev';
+import path from 'path';
+import { spawn } from 'child_process';
+import fs from 'fs-extra';
+import ps from 'node:process';
+import proxyServer from './proxy-server.js';
+import tcpPortUsed from 'tcp-port-used';
+import EnvPaths from 'env-paths';
+import { fileURLToPath } from 'url';
+const dirname = path.join(path.dirname(fileURLToPath(import.meta.url)));
+const envPaths = EnvPaths.default('plebbit', { suffix: false });

 // use this custom function instead of spawnSync for better logging
 // also spawnSync might have been causing crash on start on windows
@@ -37,8 +40,8 @@ const startIpfs = async () => {
    if (process.platform === 'darwin') {
      binFolderName = 'mac';
    }
-    ipfsPath = path.join(__dirname, '..', 'bin', binFolderName, ipfsFileName);
-    ipfsDataPath = path.join(__dirname, '..', '.plebbit', 'ipfs');
+    ipfsPath = path.join(dirname, '..', 'bin', binFolderName, ipfsFileName);
+    ipfsDataPath = path.join(dirname, '..', '.plebbit', 'ipfs');
  }

  if (!fs.existsSync(ipfsPath)) {
@@ -104,6 +107,8 @@ const startIpfs = async () => {
  });
 };

+const DefaultExport = {};
+
 let pendingStart = false;
 const start = async () => {
  if (pendingStart) {
@@ -120,7 +125,7 @@ const start = async () => {
    console.log('failed starting ipfs', e);
    try {
      // try to run exported onError callback, can be undefined
-      module.exports.onError(e)?.catch?.(console.log);
+      DefaultExport.onError(e)?.catch?.(console.log);
    } catch (e) {}
  }
  pendingStart = false;
@@ -132,3 +137,6 @@ start();
 setInterval(() => {
  start();
 }, 1000);
+
+DefaultExport.start = start;
+export default DefaultExport;
--- a/electron/start-plebbit-rpc.js
+++ b/electron/start-plebbit-rpc.js
@@ -1,20 +1,19 @@
-const tcpPortUsed = require('tcp-port-used');
-const { PlebbitWsServer } = require('@plebbit/plebbit-js/rpc');
-const path = require('path');
-const envPaths = require('env-paths').default('plebbit', { suffix: false });
-const { randomBytes } = require('crypto');
-const fs = require('fs-extra');
-
-let isDev = true;
-try {
-  isDev = require('electron-is-dev');
-} catch (e) {}
+import tcpPortUsed from 'tcp-port-used';
+import EnvPaths from 'env-paths';
+import { randomBytes } from 'crypto';
+import fs from 'fs-extra';
+import PlebbitRpc from '@plebbit/plebbit-js/dist/node/rpc/src/index.js';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import isDev from 'electron-is-dev';
+const dirname = path.join(path.dirname(fileURLToPath(import.meta.url)));
+const envPaths = EnvPaths.default('plebbit', { suffix: false });

 //           PLEB, always run plebbit rpc on this port so all clients can use it
 const port = 9138;
 const defaultPlebbitOptions = {
  // find the user's OS data path
-  dataPath: !isDev ? envPaths.data : path.join(__dirname, '..', '.plebbit'),
+  dataPath: !isDev ? envPaths.data : path.join(dirname, '..', '.plebbit'),
  ipfsHttpClientsOptions: ['http://localhost:5001/api/v0'],
  // TODO: having to define pubsubHttpClientsOptions and ipfsHttpClientsOptions is a bug with plebbit-js
  pubsubHttpClientsOptions: ['http://localhost:5001/api/v0'],
@@ -42,7 +41,7 @@ const start = async () => {
    if (started) {
      return;
    }
-    const plebbitWebSocketServer = await PlebbitWsServer({ port, plebbitOptions: defaultPlebbitOptions, authKey: plebbitRpcAuthKey });
+    const plebbitWebSocketServer = await PlebbitRpc.PlebbitWsServer({ port, plebbitOptions: defaultPlebbitOptions, authKey: plebbitRpcAuthKey });

    console.log(`plebbit rpc: listening on ws://localhost:${port} (local connections only)`);
    console.log(`plebbit rpc: listening on ws://localhost:${port}/${plebbitRpcAuthKey} (secret auth key for remote connections)`);
--- a/package.json
+++ b/package.json
@@ -2,12 +2,13 @@
  "name": "seedit",
  "version": "0.1.6",
  "description": "A GUI for plebbit similar to old.reddit",
+  "type": "module",
  "author": "plebeius.eth",
  "private": true,
  "dependencies": {
    "@capacitor/app": "1.1.1",
    "@floating-ui/react": "0.26.1",
-    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#a2d2e9d4dd66f71bfd55768fb30e6799a77ee197",
+    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#557cc3f40b5933a00553ed9c0bc310d2cd7a3b52",
    "@testing-library/jest-dom": "5.14.1",
    "@testing-library/react": "13.0.0",
    "@testing-library/user-event": "13.2.1",
@@ -91,8 +92,8 @@
    "cross-env": "7.0.3",
    "cz-conventional-changelog": "3.3.0",
    "decompress": "4.2.1",
-    "electron": "19.1.8",
-    "electron-builder": "23.0.9",
+    "electron": "23.0.9",
+    "electron-builder": "24.13.2",
    "husky": "4.3.8",
    "lint-staged": "12.3.8",
    "wait-on": "7.0.1"
--- a/prettier.config.cjs
+++ b/prettier.config.cjs
--- a/scripts/release-body.js
+++ b/scripts/release-body.js
@@ -1,6 +1,8 @@
-const {execSync} = require('child_process')
-const path = require('path')
-const conventionalChangelog = path.join('node_modules', '.bin', 'conventional-changelog')
+import {execSync} from 'child_process'
+import path from 'path'
+import {fileURLToPath} from 'url'
+const dirname = path.join(path.dirname(fileURLToPath(import.meta.url)))
+const conventionalChangelog = path.join(dirname, '..', 'node_modules', '.bin', 'conventional-changelog')

 // sometimes release-count 1 is empty
 let releaseChangelog = 
--- a/src/components/author-sidebar/author-sidebar.tsx
+++ b/src/components/author-sidebar/author-sidebar.tsx
@@ -16,7 +16,7 @@ import {
  useComment,
  // useSubplebbits,
 } from '@plebbit/plebbit-react-hooks';
-// import { getShortAddress } from '@plebbit/plebbit-js';
+// import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from './author-sidebar.module.css';
 import { getFormattedTimeDuration } from '../../lib/utils/time-utils';
 import { isAuthorView, isProfileView } from '../../lib/utils/view-utils';
@@ -45,7 +45,7 @@ import { useTranslation } from 'react-i18next';
 //         <ul className={`${styles.modListContent} ${styles.modsList}`}>
 //           {subplebbitAddresses.map((address, index) => (
 //             <li key={index}>
-//               <Link to={`/p/${address}`}>p/{getShortAddress(address)}</Link>
+//               <Link to={`/p/${address}`}>p/{Plebbit.getShortAddress(address)}</Link>
 //             </li>
 //           ))}
 //         </ul>
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { getShortAddress } from '@plebbit/plebbit-js';
+import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import { useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { sortTypes } from '../../app';
 import {
@@ -298,7 +298,7 @@ const HeaderTitle = ({ title, shortAddress }: { title: string; shortAddress: str
  const subplebbitTitle = <Link to={`/p/${params.subplebbitAddress}`}>{title || shortAddress}</Link>;
  const submitTitle = <span className={styles.submitTitle}>{t('submit')}</span>;
  const profileTitle = <Link to='/profile'>{account?.author?.shortAddress}</Link>;
-  const authorTitle = <Link to={`/u/${params.authorAddress}/c/${params.commentCid}`}>{params.authorAddress && getShortAddress(params.authorAddress)}</Link>;
+  const authorTitle = <Link to={`/u/${params.authorAddress}/c/${params.commentCid}`}>{params.authorAddress && Plebbit.getShortAddress(params.authorAddress)}</Link>;

  if (isInSubplebbitSubmitView) {
    return (
--- a/src/components/post/comment-tools/hide-menu/hide-menu.tsx
+++ b/src/components/post/comment-tools/hide-menu/hide-menu.tsx
@@ -3,7 +3,7 @@ import { Author, useBlock } from '@plebbit/plebbit-react-hooks';
 import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
 import styles from './hide-menu.module.css';
 import { useTranslation } from 'react-i18next';
-import { getShortAddress } from '@plebbit/plebbit-js';
+import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';

 type HideMenuProps = {
  author?: Author | undefined;
@@ -36,7 +36,7 @@ const BlockSubplebbitButton = ({ subplebbitAddress }: HideMenuProps) => {

  return (
    <div className={styles.menuItem} onClick={blocked ? unblock : block}>
-      {blocked ? `${t('unblock')}` : `${t('block')}`} p/{subplebbitAddress && getShortAddress(subplebbitAddress)}
+      {blocked ? `${t('unblock')}` : `${t('block')}`} p/{subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress)}
    </div>
  );
 };
--- a/src/components/reply/reply.tsx
+++ b/src/components/reply/reply.tsx
@@ -20,7 +20,7 @@ import useDownvote from '../../hooks/use-downvote';
 import useStateString from '../../hooks/use-state-string';
 import useUpvote from '../../hooks/use-upvote';
 import { isInboxView, isPostContextView } from '../../lib/utils/view-utils';
-import { getShortAddress } from '@plebbit/plebbit-js';
+import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import Markdown from '../markdown';

 interface ReplyAuthorProps {
@@ -191,7 +191,7 @@ const InboxShowParentButton = ({ parentCid }: { parentCid: string | undefined })

 const InboxParentInfo = ({ address, cid, markedAsRead, parentCid, postCid, shortAddress, subplebbitAddress, timestamp }: ParentLinkProps) => {
  const { t } = useTranslation();
-  const shortSubplebbitAddress = subplebbitAddress ? (subplebbitAddress.includes('.') ? subplebbitAddress : getShortAddress(subplebbitAddress)) : '';
+  const shortSubplebbitAddress = subplebbitAddress ? (subplebbitAddress.includes('.') ? subplebbitAddress : Plebbit.getShortAddress(subplebbitAddress)) : '';

  return (
    <>
--- a/src/components/sidebar/sidebar.tsx
+++ b/src/components/sidebar/sidebar.tsx
@@ -1,6 +1,6 @@
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { getShortAddress } from '@plebbit/plebbit-js';
+import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import { useAccount, useBlock, Role, useSubplebbitStats, useAccountComment } from '@plebbit/plebbit-react-hooks';
 import styles from './sidebar.module.css';
 import { getFormattedDate, getFormattedTimeDuration, getFormattedTimeAgo } from '../../lib/utils/time-utils';
@@ -53,7 +53,7 @@ const ModeratorsList = ({ roles }: { roles: Record<string, Role> }) => {
      <div className={styles.listTitle}>{t('moderators')}</div>
      <ul className={`${styles.listContent} ${styles.modsList}`}>
        {rolesList.map(({ address }, index) => (
-          <li key={index}>u/{getShortAddress(address)}</li>
+          <li key={index}>u/{Plebbit.getShortAddress(address)}</li>
        ))}
        {/* TODO: https://github.com/plebbit/seedit/issues/274
         <li className={styles.listMore}>{t('about_moderation')} »</li> */}
@@ -144,7 +144,7 @@ const Sidebar = ({ address, cid, createdAt, description, downvoteCount = 0, role
  const pendingPost = useAccountComment({ commentIndex: params?.accountCommentIndex as any });

  const subplebbitCreator = findSubplebbitCreator(roles);
-  const creatorAddress = subplebbitCreator === 'anonymous' ? 'anonymous' : `${getShortAddress(subplebbitCreator)}`;
+  const creatorAddress = subplebbitCreator === 'anonymous' ? 'anonymous' : `${Plebbit.getShortAddress(subplebbitCreator)}`;
  const submitRoute =
    isInHomeView || isInHomeAboutView || isInAllView ? '/submit' : isInPendingView ? `/p/${pendingPost?.subplebbitAddress}/submit` : `/p/${address}/submit`;

--- a/src/components/topbar/topbar.tsx
+++ b/src/components/topbar/topbar.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useAccount } from '@plebbit/plebbit-react-hooks';
-import { getShortAddress } from '@plebbit/plebbit-js';
+import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from './topbar.module.css';
 import { useDefaultSubplebbitAddresses } from '../../lib/utils/addresses-utils';
 import useTimeFilter, { TimeFilterKey } from '../../hooks/use-time-filter';
@@ -111,7 +111,7 @@ const TopBar = () => {
          <div className={`${styles.dropChoices} ${styles.subsDropChoices} ${subsDropdownClass}`} ref={subsdropdownItemsRef}>
            {subscriptions?.map((subscription: string, index: number) => (
              <Link key={index} to={`/p/${subscription}`} className={styles.dropdownItem}>
-                {getShortAddress(subscription)}
+                {Plebbit.getShortAddress(subscription)}
              </Link>
            ))}
            <Link to='/communities/vote' className={`${styles.dropdownItem} ${styles.defaultCommunities}`}>
--- a/src/lib/utils/addresses-utils.ts
+++ b/src/lib/utils/addresses-utils.ts
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import { useAccount } from '@plebbit/plebbit-react-hooks';
-import { getShortAddress } from '@plebbit/plebbit-js';
+import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import useDefaultSubplebbits from '../../hooks/use-default-subplebbits';

 interface Subplebbit {
@@ -34,7 +34,7 @@ export const useDefaultAndSubscriptionsSubplebbits = (): SubplebbitWithDisplay[]
    const subplebbitsObj: { [key: string]: SubplebbitWithDisplay } = {};

    const addSubplebbit = (subplebbit: Subplebbit) => {
-      let displayAddress = subplebbit.address.includes('.') ? subplebbit.address : getShortAddress(subplebbit.address);
+      let displayAddress = subplebbit.address.includes('.') ? subplebbit.address : Plebbit.getShortAddress(subplebbit.address);

      // Append title in parentheses only if the address doesn't contain '.'
      if (!subplebbit.address.includes('.') && subplebbit.title) {
--- a/src/views/submit/submit.tsx
+++ b/src/views/submit/submit.tsx
@@ -1,7 +1,7 @@
 import { ChangeEvent, forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { PublishCommentOptions, useAccount, usePublishComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
-import { getShortAddress } from '@plebbit/plebbit-js';
+import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import { Trans, useTranslation } from 'react-i18next';
 import { create } from 'zustand';
 import { getRandomSubplebbits, useDefaultSubplebbitAddresses } from '../../lib/utils/addresses-utils';
@@ -188,7 +188,7 @@ const Submit = () => {
            }
          }}
        >
-          {getShortAddress(sub)}
+          {Plebbit.getShortAddress(sub)}
        </span>
      ))}
    </div>
--- a/yarn.lock
+++ b/yarn.lock