Added support for frames and video playback using uiweb alpha

[HarshRajat]

Enables Video and Frames functionality, test group here: (http://localhost:3000/chat/chatid:076b41e6820af9e859cc6c5cc22e350ce329fa1830623c993c544614050cf83b)

Enables code block functionality: (http://localhost:3000/chat/0x71Ffa5771E8019787190D098586EFe02026a3c8C), try asking give me sample code to integrate push notifications

Adjusts scrollbar to the far right for ChatSidebar and ChatViewList, adjust padding to come from themized object for ChatView, ChatViewList, ChatBubble, ChatPreview, MessageInputBar, ChatPreviewList and ChatPreview

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
push-dapp	❌ Failed (Inspect)			May 13, 2024 2:23pm

[github-actions]

In the dev-mode-link-local-sdk.mjs file, I have found the following issues:

1. In the envPresets object, the comment for the prodsdk key is missing the closing curly brace }.
2. The prepForDeployment function is missing a closing curly brace } at the end.
3. In the package.json file:
   • The script deploy:prod is missing a closing double quote " at the end.
   • There is a missing comma , after the "typescript-eslint/parser" dependency key in the devDependencies section.
4. In the vite.config.ts file:
   • The export default defineConfig({ should have a closing curly brace } at the end to close the configuration object.

After fixing these issues, the files should look like this:

// dev-mode-link-local-sdk.mjs
import chalk from 'chalk';
import { spawn } from 'child_process';
import { parse } from 'envfile';
import fs from 'fs';
import path from 'path';
import readline from 'readline';

// import package json
import packageJSON from './package.json' assert { type: 'json' };
const packageJSONWatcher = {
  STORAGE_KEY: 'STORAGE_FOR_RESTORING_PACKAGE_JSON',
  WATCH: ['@pushprotocol/uiweb'],
  LOCAL_PACKAGES_REQ: [
    'animejs@^2.2.0',
    'classnames@^2.2.5',
    'raf@^3.4.0',
    'protobufjs@^7.2.6',
    '@livepeer/react@^2.9.2',
    '@livekit/components-react@^1.5.3',
    'livekit-client@^1.15.13',
  ];
};
const envPresets = {
  localsdk: {
    ENFORCE_WEBPACK_LOCAL: 'TRUE',
  },
  prodsdk: {
    ENFORCE_WEBPACK_LOCAL: 'FALSE',
  }
};
const prepForDeployment = async (sdkENV, tag, start) => {
  const cleanup = tag === 'cleanup' ? true : false;
  const runapp = start === 'start' ? true : false;
  if (sdkENV === 'localsdk') {
    // prep for local sdk
    console.log(chalk.bgBlack.white('Starting Local SDK Deployment Prebuild...'));
    // record package json
    const restorePackageValue = createRestorOGPackageValue();
    // setup modified env
    const envmodified = await verifyLocalSDKENV(sdkENV, restorePackageValue);
    // call cleanup only if env is modified and tag is cleanup
    if ((envmodified && tag === 'cleanup') || tag === 'forcecleanup') {
      // env is modified, which means sdk path is changed, clean up node_modules, yarn cache and reinstall
      await cleanupAndBuild(sdkENV);
    }
  } else if (sdkENV === 'prodsdk') {
    // prep for prod sdk
    console.log(chalk.bgBlack.white('Rolling back changes for Production SDK Deployment...'));
    const envmodified = await verifyLocalSDKENV(sdkENV, null);
  }
};

// package.json
...
  "deploy:prod": "node build.mjs prod && yarn build && echo 'app.push.org' > ./build/CNAME && gh-pages -d build -r https://github.com/push-protocol/push-dapp-prod-deployment"
...

// vite.config.ts
import react from '@vitejs/plugin-react';
import { parse } from 'envfile';
import fs from 'fs';
import path from 'path';
import { defineConfig } from 'vite';
import { nodePolyfills } from 'vite-plugin-node-polyfills';
import vitePluginRequire from 'vite-plugin-require';
import svgr from 'vite-plugin-svgr';
import topLevelAwait from 'vite-plugin-top-level-await';
import viteTsconfigPaths from 'vite-tsconfig-paths';

// for local sdk linking
let addedAlias = {};
// to read and modify webpack config based on local sdk linking or production
let localSDKLinking = false;
const envpath = `./.localsdk.env`;
if (fs.existsSync(envpath)) {
  const envData = fs.readFileSync(envpath, 'utf8');
  const envObject = parse(envData);
  if (envObject['ENFORCE_WEBPACK_LOCAL'] === 'TRUE') {
    localSDKLinking = true;
  }
}
if (localSDKLinking) {
  addedAlias = {
    // Use absolute paths for aliases
    react: path.resolve(__dirname, './node_modules/react'),
    'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
    'react/jsx-runtime': path.resolve(__dirname, './node_modules/react/jsx-runtime'),
    'react-icons': path.resolve(__dirname, './node_modules/react-icons'),
    'react-easy-crop': path.resolve(__dirname, './node_modules/react-easy-crop'),
    'react-image-file-resizer': path.resolve(__dirname, './node_modules/react-image-file-resizer'),
    'react-toastify': path.resolve(__dirname, './node_modules/react-toastify'),
    'react-twitter-embed': path.resolve(__dirname, './node_modules/react-twitter-embed'),
    'emoji-picker-react': path.resolve(__dirname, './node_modules/emoji-picker-react'),
    'gif-picker-react': path.resolve(__dirname, './node_modules/gif-picker-react'),
    '@unstoppabledomains/resolution': path.resolve(__dirname, './node_modules/@unstoppabledomains/resolution'),
    'react-player': path.resolve(__dirname, './node_modules/react-player'),
    animejs: path.resolve(__dirname, './node_modules/animejs'),
    raf: path.resolve(__dirname, './node_modules/raf'),
    classnames: path.resolve(__dirname, './node_modules/classnames'),
    protobufjs: path.resolve(__dirname, './node_modules/protobufjs'),
    '@livepeer/react': path.resolve(__dirname, './node_modules/@livepeer/react'),
    '@livekit/components-react': path.resolve(__dirname, './node_modules/@livekit/components-react'),
    'livekit-client': path.resolve(__dirname, './node_modules/livekit-client'),
  };
}

export default defineConfig({
  resolve: {
    alias: {
      // Define aliases for specific libraries (@uniswap/widgets is importing it with '~' and vite can't resolve it)
      '~@fontsource/ibm-plex-mono': '@fontsource/ibm-plex-mono',
      '~@fontsource/inter': '@fontsource/inter',
      // Add more aliases as needed
      ...addedAlias,
      jsbi: path.resolve(__dirname, 'node_modules/jsbi'),
    },
  },
  plugins: [
    topLevelAwait(),
    react(),
    svgr(),
    viteTsconfigPaths({
      root: './',
    }),
    nodePolyfills(),
    vitePluginRequire.default(),
  ],
  define: {
    global: 'globalThis',
  },
  server: {
    // this ensures that the browser opens upon server start
    // open: true,
    // this sets a default port to 3000
    port: 3000,
  },
  build: {
    outDir: 'build',
    sourcemap: false,
  },
});

After applying these corrections, the code should be error-free.

[github-actions]

In the dev-mode-link-local-sdk.mjs file:

1. The comment "// This script is used to setup the local sdk environment for development" is not closed properly.
2. The return type of the prepForDeployment function is missing. It should be async (sdkENV, tag, start): Promise<void>.
3. The object packageJSONWatcher seems to be defined but not used anywhere in the code.
4. The object envPresets does not have a closing } at the end.

In the package.json file:

1. There is a missing "," before the "devDependencies" section.
2. There are some dependencies missing from the devDependencies section, e.g., "jest", "typescript", etc.

In the vite.config.ts file:

1. The export default defineConfig({ block is not closed with a closing bracket }.

Please address the mentioned issues.

[github-actions]

In the dev-mode-link-local-sdk.mjs file:

1. There is a missing closing brace '}' for the prodsdk object inside envPresets. It should be added after the ENFORCE_WEBPACK_LOCAL: 'FALSE' line.
2. The comment for the script purpose should be outside of the function definition, not inside it. Move the comment "This script is used to set up the local SDK environment for development" outside of the prepForDeployment function.
3. In the prepForDeployment function, the condition runapp === start should be updated to start === 'start'.

In the package.json file:

1. The dependencies section is not closed properly with a closing curly brace '}'. It should be added at the end of the file.
2. Some of the dependencies and their versions are missing.

In the src/App.tsx file:

1. The line containing if (action === 'close' || index === 20) { should have an additional closing brace '}' at the end to close the if block.
2. There are missing dependencies like useEffect, useState, useMemo, useLocation, useContext, etc., which are used in the code. Make sure these are imported or defined.

In the vite.config.ts and yarn.lock files:
These files were not provided or mentioned for review.

Overall, there are some syntax errors and missing dependencies that need to be addressed.

[github-actions]

In dev-mode-link-local-sdk.mjs:

1. Missing closing brace for the prepForDeployment function.
2. envmodified variable is only being checked if it is truthy, a better approach would be to check if it is not equal to null in the second if statement.
3. start variable is being compared to a string in the cleanupAndBuild function instead of being compared to a boolean value.
4. The packageJSON import statement with the assert option seems to be incorrect syntax.
5. The file ends abruptly, so it seems like some code is missing after the last statement.

In package.json:

1. The dependencies list seems to be truncated, some dependencies seem to be missing at the end.

In App.tsx:

1. The comments are ending with ... instead of */.
2. STATUS variable is used but not defined.
3. There are some commented-out code blocks that should be properly removed.
4. Style prop values like darkMode ? themeDark.dynamicTutsBg : themeLight.dynamicTutsBg are used without defining the values of themeDark and themeLight.

In Recommended.tsx:

1. In the getChatParticipant function, chatParticipantAlias should be defaulted to null instead of being left undefined.
2. In the getChatParticipant function, the assignment to chatParticipantAlias should use index i to access the chatParticipantAlias property, like recommendedChatsList[i].chatParticipantAlias.

All looks good.

[github-actions]

Code Review Findings:

1. In 'dev-mode-link-local-sdk.mjs':

• 'import packageJSON from './package.json' assert { type: 'json' };' seems to be an incorrect way to import package.json. This line should be removed as it's not a standard way to import JSON files.
• In the 'prepForDeployment' function, the comment block seems to be incomplete and should be closed properly with '*/'.

2. In 'package.json':

• There seems to be a missing closing curly brace '}' at the end of the dependencies section.

3. In 'src/App.tsx':

• The 'handleJoyrideCallback' function has some commented out code that is not structured properly. It seems like an if-else block but it's missing the 'else' keyword.
• The 'ArrowColor', 'backgroundColor', 'overlayColor', 'primaryColor', 'textColor' values in the Joyride component should be inside an object.

Overall, the code seems to have minor issues and typos. Please address the mentioned points.

All looks good.

[rohitmalhotra1420]

Suggested change

	debug={pushsdkDebug}
	debug={true}

It's fine this way as we are not using it anywhere else.

[HarshRajat]

Corrected debug logic, should be debug true or false based on dev testing but should revert to false for prod environment

[rohitmalhotra1420]

The pull request heading says using uiweb alpha and the version is changed here. What's the correct expected version here?

[HarshRajat]

Was publishing alpha but changes are made to stable release as well so switched to the latest version

[rohitmalhotra1420]

Suggested change

	active={activeTab == 0 ? true : false}
	active={!activeTab}

[HarshRajat]

activeTab is not a boolean, might get hard to read

[rohitmalhotra1420]

yeah, know that but instead of exact number specific checks we could use the javascripts behaviour to consider 0 as a falsy value and shorten our code.

[rohitmalhotra1420]

Suggested change

	active={activeTab == 1 ? true : false}
	active={!!activeTab}

[HarshRajat]

Not a boolean, but will go with what you suggest

[rohitmalhotra1420]

Suggested change

	color={activeTab === 1 ? GLOBALS.COLORS.PRIMARY_PINK : 'inherit'}
	color={activeTab ? GLOBALS.COLORS.PRIMARY_PINK : 'inherit'}

[HarshRajat]

This will result it activeTab color to be pink even when search is active, since activeTab can be 0 - 3

[rohitmalhotra1420]

Got it

[rohitmalhotra1420]

Suggested change

	{numberOfChatReqs === -1 || requestLoadingData?.loading ? (
	{numberOfChatReqs < 0 || requestLoadingData?.loading ? (

[github-actions]

In the file dev-mode-link-local-sdk.mjs:

1. In the 'prepForDeployment' function, the comment is not properly closed with '*/'.
2. Inside the 'prepForDeployment' function, the variable 'restorePackageValue' is used without being defined or imported.
3. The function 'verifyLocalSDKENV' is called with only one argument, but it is defined to take two arguments.
4. In the 'prepForDeployment' function, 'tag' and 'start' arguments should have defaults in the function signature to handle cases where they are not provided.

It seems there are some missing pieces in the code provided. If the missing parts are fulfilling the logic elsewhere, please ensure to address them accordingly. Otherwise, the previously mentioned issues need to be resolved for the code to work correctly.

All looks good.