Create Channel + Channel Dashboard + Chain Alias + Send notification feature

package.json

@@ -34,13 +34,14 @@
  "@metamask/eth-sig-util": "^4.0.0",
  "@mui/icons-material": "^5.8.4",
  "@mui/material": "^5.5.0",
- "@pushprotocol/restapi": "1.7.23",
+ "@pushprotocol/restapi": "1.7.25",
  "@pushprotocol/socket": "0.5.3",
  "@pushprotocol/uiweb": "1.4.3",
  "@radix-ui/react-dialog": "^1.1.1",
  "@radix-ui/react-dropdown-menu": "^2.1.1",
  "@radix-ui/react-switch": "^1.1.0",
  "@radix-ui/react-tooltip": "^1.1.1",
+ "@reach/combobox": "^0.18.0",
  "@reach/tabs": "^0.18.0",
  "@reduxjs/toolkit": "^1.7.1",
  "@tanstack/react-query": "^5.44.0",

src/App.tsx

@@ -116,8 +116,8 @@ const GlobalStyle = createGlobalStyle`
  /* deprecated */
  /* Colors */
  ${Object.entries(blocksColors)
-  .map(([colorName, code]) => `--${colorName}: ${code};`)
-  .join('')}
+ .map(([colorName, code]) => `--${colorName}: ${code};`)
+ .join('')}
 
  /* Font Family */
  --font-family: 'FK Grotesk Neu';
@@ -147,15 +147,15 @@ const extendConsole = () => {
  window.console = {};
  }
  if (window.console[level] === 'undefined' || !window.console[level] || window.console[level] === null) {
- window.console[level] = function () {};
+ window.console[level] = function () { };
  }
  if (enabled) {
  if (disabledConsoles[level]) {
  window.console[level] = disabledConsoles[level];
  }
  } else {
  disabledConsoles[level] = window.console[level];
- window.console[level] = function () {};
+ window.console[level] = function () { };
  }
  };
  } catch (e) {
@@ -356,7 +356,7 @@ export default function App() {
  <ChatUIProvider
  user={userPushSDKInstance}
  theme={darkMode && darkChatTheme}
- debug={false}
+ debug={true}
  uiConfig={{
  suppressToast: false,
  }}
@@ -418,8 +418,8 @@ export default function App() {
  isSidebarHidden
  ? GLOBALS.CONSTANTS.NO_LEFT_BAR_WIDTH
  : sidebarCollapsed
- ? GLOBALS.CONSTANTS.COLLAPSABLE_RIGHT_BAR_WIDTH
- : GLOBALS.CONSTANTS.LEFT_BAR_WIDTH
+  ? GLOBALS.CONSTANTS.COLLAPSABLE_RIGHT_BAR_WIDTH
+  : GLOBALS.CONSTANTS.LEFT_BAR_WIDTH
  }
  >
  {/* Shared among all pages, load universal things here */}

src/blocks/fileUpload/FileUpload.tsx

@@ -0,0 +1,48 @@
+import { DragEventHandler, FC, forwardRef, ReactNode } from 'react';
+import styled, { FlattenSimpleInterpolation, css } from 'styled-components';
+
+export type FileUploadProps = {
+ children?: ReactNode;
+ css?: FlattenSimpleInterpolation;
+ disabled?: boolean;
+ onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+ onDrop?: DragEventHandler;
+ id: string;
+};
+
+const Container = styled.div<{ css?: FlattenSimpleInterpolation }>`
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ flex: 1 0 0;
+ gap: var(--spacing-xxs, 8px);
+
+ /* Custom CSS applied via styled component css prop */
+ ${(props) => props.css || ''};
+`;
+
+
+export const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(
+ ({ disabled, children, onChange, onDrop, id }, ref) => {
+
+ const handleDragOver: DragEventHandler<HTMLDivElement> = (e) => {
+ e.preventDefault();
+ };
+
+
+ return (
+ <Container ref={ref} onDrop={onDrop} onDragOver={handleDragOver}>
+ {children}
+ <input
+ id={id}
+ type="file"
+ accept="image/*"
+ hidden={true}
+ disabled={!!disabled}
+ {...(disabled ? { 'aria-disabled': true } : {})}
+ onChange={onChange}
+ />
+ </Container>
+ );
+ }
+);

src/blocks/fileUpload/index.ts

@@ -0,0 +1 @@
+export * from './FileUpload';

src/blocks/icons/IconWrapper.tsx

@@ -1,6 +1,7 @@
 import { FC, ReactNode } from 'react';
 import styled, { FlattenSimpleInterpolation } from 'styled-components';
 import { IconProps } from './Icons.types';
+import { ThemeColors } from 'blocks/theme/Theme.types';
 
 type IconWrapperProps = Omit<IconProps, 'as' | 'ref'> & {
  /* Name of the component to be used as aria-label for accessibility */
@@ -13,7 +14,7 @@ type IconWrapperProps = Omit<IconProps, 'as' | 'ref'> & {
 
 type StyledIconWrapperProps = {
  /* Color to be applied to the svg */
- color: string;
+ color: string | ThemeColors;
  /* css prop provided by styled components to provide additional css to icon */
  css?: FlattenSimpleInterpolation;
  /* Child react nodes rendered by Wrapper */

src/blocks/icons/components/BellSimpleSlash.tsx

@@ -0,0 +1,47 @@
+import { FC } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import { IconProps } from '../Icons.types';
+
+const BellSimpleSlash: FC<IconProps> = (allProps) => {
+ const { svgProps: props, ...restProps } = allProps;
+ return (
+ <IconWrapper
+ componentName="BellSimpleSlash"
+ icon={
+ <svg
+ width="inherit"
+ height="inherit"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}
+ >
+ <path
+ d="M5.52783 4.4353L19.3386 19.6"
+ stroke="currentColor"
+ stroke-width="1.5"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ <path
+ d="M7.42357 6.49341C7.04446 6.90863 6.28622 8.18319 6.28622 9.95964C6.28622 12.1802 5.85294 15.8631 4.39062 17.4337H17.2265"
+ stroke="currentColor"
+ stroke-width="1.5"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ <path
+ d="M9.59013 20.25H15.3852M9.31934 4.70613C10.6192 3.80347 13.9554 2.73472 16.9017 5.68101C17.2912 6.07049 18.4295 7.23159 18.5807 10.9345C18.6168 11.8191 18.8731 14.0541 19.6097 15.9172"
+ stroke="currentColor"
+ stroke-width="1.5"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ }
+ {...restProps}
+ />
+ );
+};
+
+export default BellSimpleSlash;

src/blocks/icons/components/CircleFilled.tsx

@@ -0,0 +1,27 @@
+import { FC } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import { IconProps } from '../Icons.types';
+
+const CircleFilled: FC<IconProps> = (allProps) => {
+ const { svgProps: props, ...restProps } = allProps;
+ return (
+ <IconWrapper
+ componentName="CircleFilled"
+ icon={
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="inherit"
+ height="inherit"
+ viewBox="0 0 8 8"
+ fill="none"
+ {...props}
+ >
+ <circle cx="4" cy="4" r="4" fill="currentColor" />
+ </svg>
+ }
+ {...restProps}
+ />
+ );
+};
+
+export default CircleFilled;

src/blocks/icons/components/CloudUpload.tsx

@@ -0,0 +1,47 @@
+import { FC } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import { IconProps } from '../Icons.types';
+
+const CloudUpload: FC<IconProps> = (allProps) => {
+ const { svgProps: props, ...restProps } = allProps;
+ return (
+ <IconWrapper
+ componentName="CloudUpload"
+ icon={
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="inherit"
+ height="inherit"
+ viewBox="0 0 53 52"
+ fill="none"
+ {...props}
+ >
+ <path
+ d="M16.1888 26.3978L26.7966 15.7901L37.4043 26.3978"
+ stroke="#C4CBD5"
+ stroke-width="2.5"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ <path
+ d="M27.0618 50.0001V16.8509"
+ stroke="#C4CBD5"
+ stroke-width="2.5"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ <path
+ d="M21.4927 35.4144H11.1502C8.05625 35.0608 1.86841 32.4972 1.86841 25.0718C1.86841 17.6464 8.05625 14.9061 11.1502 14.4641C11.769 10.3094 15.6585 2 26.2662 2C39.2607 2 41.0286 10.8398 41.9126 16.0553C45.0065 15.9669 51.4596 19.2906 51.4596 26.9282C51.2828 29.7569 49.6032 35.4144 44.2993 35.4144C38.9955 35.4144 34.1336 35.4144 32.3656 35.4144"
+ stroke="#C4CBD5"
+ stroke-width="2.5"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ }
+ {...restProps}
+ />
+ );
+};
+
+export default CloudUpload;

src/blocks/icons/components/CrownSimple.tsx

@@ -0,0 +1,40 @@
+import { FC } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import { IconProps } from '../Icons.types';
+
+const CrownSimple: FC<IconProps> = (allProps) => {
+ const { svgProps: props, ...restProps } = allProps;
+ return (
+ <IconWrapper
+ componentName="CrownSimple"
+ icon={
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="inherit"
+ height="inherit"
+ viewBox="0 0 32 33"
+ fill="none"
+ {...props}
+ >
+ <g clip-path="url(#clip0_5441_8171)">
+ <path
+ d="M5.84358 26.76H26.1623C26.4231 26.7601 26.6755 26.6792 26.8752 26.5315C27.075 26.3838 27.2093 26.1789 27.2546 25.9526L30.4013 13.2489C30.4408 13.0399 30.4021 12.8252 30.2911 12.6372C30.18 12.4492 30.0027 12.2981 29.7857 12.2067C29.5687 12.1153 29.3239 12.0885 29.0881 12.1305C28.8523 12.1724 28.6384 12.2807 28.4786 12.4391L22.6567 17.9652L17.0093 6.80669C16.9204 6.63745 16.7784 6.49416 16.6001 6.39374C16.4218 6.29332 16.2146 6.23996 16.003 6.23996C15.7913 6.23996 15.5841 6.29332 15.4058 6.39374C15.2275 6.49416 15.0855 6.63745 14.9966 6.80669L9.34925 17.9652L3.52726 12.4391C3.36781 12.2784 3.15302 12.1681 2.91574 12.1251C2.67846 12.0821 2.43173 12.1088 2.21327 12.201C1.99481 12.2933 1.81663 12.446 1.70597 12.6359C1.59531 12.8258 1.55825 13.0424 1.60046 13.2526L4.74711 25.9563C4.79341 26.1825 4.92872 26.3871 5.12926 26.5341C5.3298 26.6811 5.58273 26.7611 5.84358 26.76Z"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </g>
+ <defs>
+ <clipPath id="clip0_5441_8171">
+ <rect width="32" height="32" fill="white" transform="translate(0 0.5)" />
+ </clipPath>
+ </defs>
+ </svg>
+ }
+ {...restProps}
+ />
+ );
+};
+
+export default CrownSimple;

src/blocks/icons/components/Cube.tsx

@@ -0,0 +1,39 @@
+import { FC } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import { IconProps } from '../Icons.types';
+
+const Cube: FC<IconProps> = (allProps) => {
+ const { svgProps: props, ...restProps } = allProps;
+ return (
+ <IconWrapper
+ componentName="Cube"
+ icon={
+ <svg
+ width="inherit"
+ height="inherit"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}
+ >
+ <path
+ d="M11.8471 12.1528L4.6665 7.95139L11.8471 3.75L19.3332 7.95139L11.8471 12.1528Z"
+ stroke="currentColor"
+ stroke-width="1.5"
+ stroke-linejoin="round"
+ />
+ <path
+ d="M4.6665 8.02783V16.457L11.8471 20.2501L19.3332 16.457V8.02783"
+ stroke="currentColor"
+ stroke-width="1.5"
+ stroke-linejoin="round"
+ />
+ <path d="M11.8472 20.2501V12.1528" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
+ </svg>
+ }
+ {...restProps}
+ />
+ );
+};
+
+export default Cube;

src/blocks/icons/index.ts

@@ -13,6 +13,7 @@ export { default as Back } from './components/Back';
 
 export { default as BellRingFilled } from './components/BellRingFilled';
 export { default as BellSimple } from './components/BellSimple';
+export { default as BellSimpleSlash } from './components/BellSimpleSlash';
 
 export { default as CalendarBlank } from './components/CalendarBlank';
 
@@ -30,11 +31,18 @@ export { default as ChannelHomeFilled } from './components/ChannelHomeFilled';
 export { default as Chat } from './components/Chat';
 export { default as ChatFilled } from './components/ChatFilled';
 
+export { default as CircleFilled } from './components/CircleFilled';
+export { default as CloudUpload } from './components/CloudUpload';
+
 export { default as Copy } from './components/Copy';
 
 export { default as Cross } from './components/Cross';
 export { default as CrossFilled } from './components/CrossFilled';
 
+export { default as CrownSimple } from './components/CrownSimple';
+
+export { default as Cube } from './components/Cube';
+
 export { default as Dash } from './components/Dash';
 
 export { default as Dashboard } from './components/Dashboard';

src/blocks/illustrations/index.ts

@@ -1,6 +1,10 @@
 export * from './IllustrationWrapper';
 export * from './Illustrations.types';
 
+export { default as Arbitrum } from './components/Arbitrum';
+
+export { default as BNB } from './components/BNB';
+
 export { default as ChatIllustration } from './components/Chat';
 export { default as ChatDark } from './components/ChatDark';
 
@@ -37,3 +41,6 @@ export { default as Twitter } from './components/Twitter';
 export { default as RewardsActivity } from './components/RewardsActivity';
 
 export { default as PushLogo } from './components/PushLogo';
+
+export { default as Polygon } from './components/Polygon';
+export { default as PolygonZK } from './components/PolygonZK';

src/blocks/index.ts

@@ -11,13 +11,15 @@ export { notification } from './notification';
 export { ProgressBar, type ProgressBarProps } from './progressBar';
 export { Separator, type SeparatorProps } from './separator';
 export { Skeleton, type SkeletonProps } from './skeleton';
+export { Select, type SelectProps } from './select';
 export { Tabs, type TabsProps, type TabItem } from './tabs';
 export { Tag } from './tag';
 export { Text, type TextProps } from './text';
 export { Tooltip, type TooltipProps } from './tooltip';
 export { TextArea, type TextAreaProps } from './textarea';
 export { TextInput } from './textInput';
 export { ToggleSwitch } from './toggleSwtich';
+export { FileUpload } from './fileUpload';
 export { Spinner, type SpinnerProps } from './spinner';
 
 export * from './Blocks.colors';