Add new chain to a channel

package.json

@@ -34,12 +34,13 @@
  "@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.2",
  "@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

@@ -331,7 +331,7 @@ export default function App() {
  <ChatUIProvider
  user={userPushSDKInstance}
  theme={darkMode && darkChatTheme}
- debug={false}
+ debug={true}
  uiConfig={{
  suppressToast: false,
  }}

src/blocks/icons/IconWrapper.tsx

@@ -3,6 +3,7 @@ import styled, { FlattenSimpleInterpolation } from 'styled-components';
 import { useBlocksTheme } from '../Blocks.hooks';
 import { getBlocksColor } from '../Blocks.utils';
 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 */
@@ -15,7 +16,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/Icons.types.ts

@@ -1,8 +1,9 @@
+import { ThemeColors } from 'blocks/theme/Theme.types';
 import { BlocksColors, ThemeModeColors } from '../Blocks.types';
 
 export type IconProps = {
  /** Set icon fill color from design system */
- color?: BlocksColors | ThemeModeColors;
+ color?: BlocksColors | ThemeModeColors | ThemeColors;
  /** Set width and height of icon in pixels */
  size?: number;
  /** Whether to scale icon according to font-size. Sets width and height to 1em. */

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';
 
@@ -32,3 +36,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

@@ -7,13 +7,15 @@ export { Lozenge, type LozengeProps } from './lozenge';
 export { Menu, type MenuProps, MenuItem, type MenuItemComponentProps } from './menu';
 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 { 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 * from './Blocks.colors';
 export * from './Blocks.types';
 export * from './Blocks.utils';

src/blocks/select/Select.tsx

@@ -0,0 +1,269 @@
+import React, { useRef, useEffect, useState } from 'react';
+import styled, { FlattenSimpleInterpolation, css } from 'styled-components';
+import { Combobox, ComboboxInput, ComboboxPopover, ComboboxList, ComboboxOption } from '@reach/combobox';
+import '@reach/combobox/styles.css';
+
+import { textVariants } from '../text';
+import { CaretDown } from '../icons';
+
+export type SelectOption = {
+ icon?: React.ReactNode;
+ label: string;
+ value: string;
+};
+
+export type SelectProps = {
+ /* Additional prop from styled components to apply custom css to Button */
+ css?: FlattenSimpleInterpolation;
+ /* Description below the select field*/
+ description?: string;
+ /* Sets button as disabled */
+ disabled?: boolean;
+ /* Sets error state */
+ error?: boolean;
+ /* The error message to be shown */
+ errorMessage?: string;
+ /* Shows the label for the select field */
+ label?: string;
+ /* Function invoked when an option is selected */
+ onSelect?: (value: string) => void;
+ /* Select option list */
+ options: SelectOption[];
+ /* Placeholder to be shown when nothing is selected */
+ placeholder?: string;
+ /* To make the field compulsory */
+ required?: boolean;
+ /* Selected value */
+ value?: string;
+ /* Sets success state */
+ success?: boolean;
+};
+
+const Container = styled.div<{ css?: FlattenSimpleInterpolation }>`
+ align-items: flex-start;
+ 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 || ''};
+`;
+
+const StyledBox = styled.div<{
+ error?: boolean;
+ success?: boolean;
+ disabled?: boolean;
+}>`
+ ${({ theme, success, error, disabled }) => {
+ const colors = theme?.blocksTheme?.colors;
+ const defaultState = error ? 'danger' : success ? 'success' : disabled ? 'disabled' : 'default';
+ const focusState = error ? 'danger' : success ? 'success' : 'focus';
+
+ return css`
+ display: flex;
+ align-self: stretch;
+ cursor: pointer;
+ align-items: center;
+ justify-content: space-between;
+ border-radius: var(--radius-xs, 12px);
+ border: 1.5px solid
+ var(--components-inputs-stroke-${defaultState}, ${colors[`components-inputs-stroke-${defaultState}`]});
+ background: var(
+ --components-inputs-background-${defaultState},
+ ${colors[`components-inputs-background-${defaultState}`]}
+ );
+ padding: var(--spacing-xs, 12px);
+ &:hover {
+ border: 1.5px solid var(--components-inputs-stroke-hover, #c4cbd5);
+ }
+
+ &:focus-within {
+ border: 1.5px solid
+ var(--components-inputs-stroke-${focusState}, ${colors[`components-inputs-stroke-${focusState}`]});
+ outline: none;
+ }
+
+ [data-reach-combobox-input] {
+ background-color: transparent;
+ border: none;
+ color: var(--components-inputs-text-default, ${colors['components-inputs-text-default']});
+
+ display: flex;
+
+ font-family: var(--font-family);
+ font-size: ${textVariants['bs-regular'].fontSize};
+ font-style: ${textVariants['bs-regular'].fontStyle};
+ font-weight: ${textVariants['bs-regular'].fontWeight};
+ line-height: ${textVariants['bs-regular'].lineHeight};
+
+ gap: var(--spacing-none, 0px);
+
+ &:focus {
+ outline: none;
+ }
+ &:hover {
+ outline: none;
+ }
+ &:disabled {
+ background-color: transparent;
+ cursor: not-allowed;
+ color: var(--components-inputs-text-disabled, ${colors['components-inputs-text-disabled']});
+ }
+
+ ::placeholder {
+ color: var(--components-inputs-text-placeholder, ${colors['components-inputs-text-placeholder']});
+ }
+ }
+ `;
+ }}
+`;
+
+const StyledPopover = styled(ComboboxPopover)`
+ margin: var(--spacing-sm) var(--spacing-xl) var(--spacing-none) var(--spacing-none);
+ padding: var(--spacing-xxs, 8px);
+ border-radius: var(--radius-xs, 12px);
+ border: var(--border-sm, 1px) solid var(--stroke-secondary, #eaebf2);
+ background: var(--surface-primary, #fff);
+ overflow: hidden auto;
+ max-height: 20rem;
+`;
+
+const StyledCombobox = styled(Combobox)`
+ width: 100%;
+`;
+
+const StyledInputContainer = styled.div`
+ display: flex;
+ width: 100%;
+ gap: var(--spacing-xxs);
+`;
+
+const StyledInput = styled(ComboboxInput)`
+ width: 100%;
+`;
+const StyledList = styled(ComboboxList)`
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-xs, 12px);
+`;
+
+const StyledOption = styled(ComboboxOption)`
+ display: flex;
+ align-items: center;
+ padding: var(--spacing-xxxs, 4px);
+ gap: var(--spacing-xxs, 8px);
+ color: var(--components-dropdown-text-default, #17181b);
+ font-family: var(--font-family);
+ font-size: ${textVariants['bs-regular'].fontSize};
+ font-style: ${textVariants['bs-regular'].fontStyle};
+ font-weight: ${textVariants['bs-regular'].fontWeight};
+ line-height: ${textVariants['bs-regular'].lineHeight};
+ &:hover {
+ border-radius: var(--radius-xxs, 8px);
+ background: var(--surface-secondary, #f5f6f8);
+ }
+ [role='img'] {
+ width: 24px;
+ height: 24px;
+ }
+`;
+
+const Select: React.FC<SelectProps> = ({
+ options,
+ onSelect,
+ css,
+ value,
+ placeholder = '',
+ error,
+ success,
+ disabled,
+}) => {
+ const [popoverWidth, setPopoverWidth] = useState(0);
+ const [viewPopover, setViewPopover] = useState(true);
+ const comboboxRef = useRef<HTMLDivElement>(null);
+ const parentRef = useRef<HTMLDivElement>(null);
+ const childRef = useRef<HTMLInputElement>(null);
+
+ // useEffect(() => {
+ // const handleResize = () => {
+ // if (comboboxRef.current) {
+ // setPopoverWidth(comboboxRef.current.offsetWidth - 18);
+ // }
+ // };
+
+ // handleResize();
+ // window.addEventListener('resize', handleResize);
+ // return () => {
+ // window.removeEventListener('resize', handleResize);
+ // };
+ // }, []);
+ const selectedOption = options.find((option) => option.value === value);
+
+ const handleParentFocus = () => {
+ childRef?.current?.focus();
+ };
+
+ return (
+ <Container css={css}>
+ {/* label will be added here */}
+
+ <StyledCombobox
+ ref={comboboxRef}
+ aria-labelledby="select"
+ openOnFocus
+ onSelect={(value: string) => {
+ onSelect?.(value);
+ setViewPopover(false);
+ }}
+ >
+ <StyledBox
+ ref={parentRef}
+ error={error}
+ success={success}
+ disabled={disabled}
+ onFocus={handleParentFocus}
+ onClick={() => {
+ handleParentFocus();
+ setViewPopover(true);
+ }}
+ >
+ <StyledInputContainer>
+ {selectedOption?.icon}
+ <StyledInput
+ ref={childRef}
+ disabled={disabled}
+ placeholder={placeholder}
+ value={selectedOption?.label}
+ />
+ </StyledInputContainer>
+ <CaretDown
+ size={20}
+ color="icon-tertiary"
+ />
+ </StyledBox>
+
+ {viewPopover && (
+ <StyledPopover>
+ <StyledList>
+ {options.map((option) => (
+ <StyledOption
+ value={option.value}
+ key={option.value}
+ >
+ {option?.icon}
+ {option.label}
+ </StyledOption>
+ ))}
+ </StyledList>
+ </StyledPopover>
+ )}
+ </StyledCombobox>
+ {/* description and error message will be added here */}
+ </Container>
+ );
+};
+
+Select.displayName = 'Select';
+
+export { Select };

src/blocks/select/index.tsx

@@ -0,0 +1 @@
+export { Select, type SelectProps } from './Select';

src/blocks/textInput/TextInput.tsx

@@ -13,7 +13,7 @@ export type TextInputProps = {
  type?: 'text' | 'password';
  errorMessage?: string;
  label?: string;
- onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+ onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onClear?: () => void;
  placeholder?: string;
  required?: boolean;
@@ -56,12 +56,6 @@ const StyledTextInput = styled.div<{
 
  display: flex;
 
- font-family: var(--font-family);
- font-size: ${textVariants['bs-regular'].fontSize};
- font-style: ${textVariants['bs-regular'].fontStyle};
- font-weight: ${textVariants['bs-regular'].fontWeight};
- line-height: ${textVariants['bs-regular'].lineHeight};
-
  gap: var(--spacing-xxs, 8px);
 
  padding: var(--spacing-xs, 12px);
@@ -74,6 +68,11 @@ const StyledTextInput = styled.div<{
  & input {
  color: var(--components-inputs-text-${defaultState}, ${colors[`components-inputs-text-${defaultState}`]});
 
+ font-family: var(--font-family);
+ font-size: ${textVariants['bs-regular'].fontSize};
+ font-style: ${textVariants['bs-regular'].fontStyle};
+ font-weight: ${textVariants['bs-regular'].fontWeight};
+ line-height: ${textVariants['bs-regular'].lineHeight};
  width: 100%;
  ::placeholder {
  color: var(--components-inputs-text-placeholder, ${colors['components-inputs-text-placeholder']});