1744 rewards v2 phase

package.json

@@ -37,7 +37,9 @@
  "@pushprotocol/restapi": "1.7.23",
  "@pushprotocol/socket": "0.5.3",
  "@pushprotocol/uiweb": "1.4.2",
+ "@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/tabs": "^0.18.0",
  "@reduxjs/toolkit": "^1.7.1",

src/App.tsx

@@ -1,5 +1,5 @@
 // React + Web3 Essentials
-import { FC, useContext, useEffect, useMemo, useState } from 'react';
+import { FC, useContext, useEffect, useMemo, useRef, useState } from 'react';
 
 // External Packages
 import * as dotenv from 'dotenv';
@@ -85,6 +85,16 @@ const GlobalStyle = createGlobalStyle`
  --s13: 52px;
  --s14: 56px;
  --s15: 60px;
+ --s16: 64px;
+ --s17: 68px;
+ --s18: 72px;
+ --s19: 76px;
+ --s20: 80px;
+ --s21: 84px;
+ --s22: 88px;
+ --s23: 92px;
+ --s24: 96px;
+ --s25: 100px;
  // TODO: Add more as needed
 
  /* deprecated */
@@ -186,6 +196,7 @@ export default function App() {
 
  const { pgpPvtKey } = useContext<any>(AppContext);
  const { sidebarCollapsed, setSidebarCollapsed } = useContext(GlobalContext);
+ const [hasMounted, setHasMounted] = useState(false);
 
  const updateOnboardTheme = useUpdateTheme();
  const { userPushSDKInstance } = useSelector((state: any) => {
@@ -208,14 +219,22 @@ export default function App() {
  setcurrentTime(now);
  }, []);
 
- useEffect(() => {
- if (!account) return;
+ const resetState = () => {
  dispatch(resetSpamSlice());
  dispatch(resetNotificationsSlice());
  dispatch(resetCanSendSlice());
  dispatch(resetChannelCreationSlice());
  dispatch(resetAdminSlice());
  dispatch(resetUserSlice());
+ };
+
+ useEffect(() => {
+ if (!hasMounted) {
+ // do componentDidMount logic
+ setHasMounted(true);
+ if (!account) return;
+ resetState();
+ }
  }, [account]);
 
  // Initialize Theme
@@ -453,7 +472,7 @@ const LeftBarContainer = styled.div`
  position: fixed;
  // position: absolute;
 
- @media (max-width: 992px) {
+ @media (max-width: 1024px) {
  display: none;
  }
 `;
@@ -465,7 +484,7 @@ const ContentContainer = styled.div`
  width: calc(100% - ${(props) => props.leftBarWidth}px);
  margin: 0px 0px 0px ${(props) => props.leftBarWidth}px;
 
- @media (max-width: 992px) {
+ @media (max-width: 1024px) {
  margin: 0px;
  }
 `;
@@ -475,30 +494,6 @@ const PushLogo = styled.div`
  padding-bottom: 20px;
 `;
 
-const ProviderButton = styled.button`
- flex: none;
- min-width: 179px;
- background: ${(props) => props.theme.default.bg};
- margin: 20px 15px;
- overflow: hidden;
- padding: 20px 5px;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 24px;
- display: flex;
- flex-direction: column;
-
- &:hover {
- cursor: pointer;
- background: rgba(207, 206, 255, 0.24);
- }
- &:active {
- cursor: pointer;
- background: rgba(207, 206, 255, 0.24);
- }
-`;
-
 const ProviderImage = styled.img`
  width: 73px;
  height: 69px;

src/blocks/Blocks.constants.ts

@@ -1,7 +1,3 @@
-export const newRadiusRegex = /\bradius-[a-z]+\b/g;
+export const radiusRegex = /\bradius-[a-z]+\b/g;
 
-export const oldRadiusRegex = /\br[0-9]+\b/g;
-
-export const newSpacingRegex = /\bspacing-[a-z]+\b/g;
-
-export const oldSpacingRegex = /\bs[0-9]+\b/g;
+export const spacingRegex = /\bspacing-[a-z]+\b/g;

src/blocks/Blocks.types.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { BoxResponsiveCSSProperties, BoxResponsiveCSSPropertiesData, BoxResponsivePropValues } from './box';
 import { blocksColorsLegacy } from './Blocks.colors';
-import { ThemeBorderRadius, ThemeBorderSize, ThemeColors, ThemeSpacing } from './theme/Theme.types';
+import { StrokeColors, ThemeBorderRadius, ThemeBorderSize, ThemeSpacing } from './theme/Theme.types';
 import {
  SkeletonResponsiveCSSProperties,
  SkeletonResponsiveCSSPropertiesData,
@@ -21,20 +21,12 @@ export type Breakpoint = 'initial' | 'ms' | 'mm' | 'ml' | 'tb' | 'lp' | 'll' | '
 
 export type ResponsiveProp<T> = T | { [key in Breakpoint]?: T };
 
-// Remove old RadiusType types
 export type BlocksRadiusType =
- | `r${number}`
- | `r${number} r${number}`
- | `r${number} r${number} r${number} r${number}`
  | ThemeBorderRadius
  | `${ThemeBorderRadius} ${ThemeBorderRadius}`
  | `${ThemeBorderRadius} ${ThemeBorderRadius} ${ThemeBorderRadius} ${ThemeBorderRadius}`;
 
-// Remove old SpaceType types
 export type BlocksSpaceType =
- | `s${number}`
- | `s${number} s${number}`
- | `s${number} s${number} s${number} s${number}`
  | ThemeSpacing
  | `${ThemeSpacing} ${ThemeSpacing}`
  | `${ThemeSpacing} ${ThemeSpacing} ${ThemeSpacing} ${ThemeSpacing}`;
@@ -74,12 +66,6 @@ export type BlocksColors = keyof BlocksColorData;
 
 export type ThemeMode = 'light' | 'dark';
 
-// TODO: Remove ThemeModeColors
-export type ThemeModeColors = Record<ThemeMode, BlocksColors | ThemeColors>;
-
-// TODO: Remove the blocks colors border size
-export type BorderValue = `${number}px ${string} ${BlocksColors}` | `${number}px ${string} ${ThemeBorderSize}` | 'none';
-
-export type ThemeModeBorder = Record<ThemeMode, BorderValue>;
+export type BorderValue = `${ThemeBorderSize} ${string} ${StrokeColors}` | 'none';
 
 export type ModeProp = { mode: ThemeMode };

src/blocks/Blocks.utils.ts

@@ -1,21 +1,18 @@
 import { css } from 'styled-components';
 import { deviceMediaQ, deviceSizes, breakpointMap } from './theme';
 import {
- BlocksColors,
  Breakpoint,
  CSSPropName,
  CSSPropValueType,
  DeviceSizeName,
- ThemeModeColors,
  PixelValue,
  ResponsiveCSSPropertyData,
- ThemeMode,
- ThemeModeBorder,
  BorderValue,
  BlocksRadiusType,
 } from './Blocks.types';
+import { radiusRegex, spacingRegex } from './Blocks.constants';
+import { textVariants, TextVariants } from './text';
 import { ThemeColors } from './theme/Theme.types';
-import { newRadiusRegex, newSpacingRegex, oldRadiusRegex, oldSpacingRegex } from './Blocks.constants';
 
 /**
  * @param propName
@@ -25,10 +22,7 @@ import { newRadiusRegex, newSpacingRegex, oldRadiusRegex, oldSpacingRegex } from
 const getCSSValue = (propName: CSSPropName, value: CSSPropValueType | undefined) => {
  if (propName === 'padding' || propName === 'margin') {
  if (typeof value === 'string') {
- return value.replace(
- newSpacingRegex.test(value) ? newSpacingRegex : oldSpacingRegex,
- (match) => `var(--${match})`
- );
+ return value.replace(spacingRegex, (match) => `var(--${match})`);
  }
  } else if (propName === 'gap' || propName === 'border-radius') {
  return `var(--${value})`;
@@ -139,39 +133,20 @@ export const getResponsiveCSS = (data: ResponsiveCSSPropertyData[]) => {
  `;
 };
 
-/**
- * @deprecated
- * @param color
- * @returns color as a css variable: var(--primary)
- *
- * // TODO: Remove this function. We don't need it.
- */
-export const getBlocksColor = (mode: ThemeMode, color?: BlocksColors | ThemeModeColors | ThemeColors) => {
- // If color is not given return undefined, to avoid any breakages
- if (!color) return color;
-
- // Handle the colors for light and dark mode
- if (typeof color === 'object') {
- return `var(--${color[mode]})`;
- }
-
- // If passed a design system color then use color as a variable
- return `var(--${color})`;
-};
-
 /**
  * @param border
  * @returns border
  */
-export const getBlocksBorder = (mode: ThemeMode, border?: BorderValue | ThemeModeBorder) => {
+export const getBlocksBorder = (border?: BorderValue) => {
  // If border is not given return undefined, to avoid any breakages
  if (!border) return border;
- // Handle the border for light and dark mode
+
  let borderValues;
- if (typeof border === 'object') borderValues = border[mode].split(' ');
- else borderValues = border.split(' ');
 
- // If passed a design system border then use border as a variable
+ borderValues = border.split(' ');
+
+ borderValues[0] = `var(--${borderValues[0]})`;
+
  borderValues[2] = `var(--${borderValues[2]})`;
  return borderValues.join(' ');
 };
@@ -184,10 +159,19 @@ export const getBlocksBorderRadius = (radius?: BlocksRadiusType) => {
  // If border-radius is not given return undefined, to avoid any breakages
  if (!radius) return radius;
 
- const result = radius.replace(
- newRadiusRegex.test(radius) ? newRadiusRegex : oldRadiusRegex,
- (match) => `var(--${match})`
- );
+ const result = radius.replace(radiusRegex, (match) => `var(--${match})`);
 
  return result;
 };
+
+export const getTextVariantStyles = (variant: TextVariants, color: ThemeColors) => css`
+ color: var(--${color});
+ font-family: var(--font-family);
+ font-size: ${textVariants[variant].fontSize};
+ font-style: ${textVariants[variant].fontStyle};
+ font-weight: ${textVariants[variant].fontWeight};
+ line-height: ${textVariants[variant].lineHeight};
+ letter-spacing: ${textVariants[variant].letterSpacing};
+ text-transform: ${textVariants[variant].textTransform};
+ margin: var(--spacing-none);
+`;

src/blocks/box/Box.constants.ts

@@ -24,5 +24,4 @@ export const boxRestrictedCSSPropKeys: (keyof BoxCSSProps | keyof ModeProp)[] =
  'overflow',
  'padding',
  'width',
- 'mode',
 ];

src/blocks/box/Box.tsx

@@ -1,9 +1,8 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 
-import { useBlocksTheme } from '../Blocks.hooks';
-import { TransformedHTMLAttributes, ModeProp } from '../Blocks.types';
-import { getBlocksColor, getBlocksBorder, getBlocksBorderRadius } from '../Blocks.utils';
+import { TransformedHTMLAttributes } from '../Blocks.types';
+import { getBlocksBorder, getBlocksBorderRadius } from '../Blocks.utils';
 import { BoxCSSProps, BoxComponentProps } from './Box.types';
 import { getBoxResponsiveCSS } from './Box.utils';
 import { boxRestrictedCSSPropKeys } from './Box.constants';
@@ -14,18 +13,18 @@ export type BoxProps = BoxCSSProps & BoxComponentProps & TransformedHTMLAttribut
 const StyledBox = styled.div.withConfig({
  shouldForwardProp: (prop, defaultValidatorFn) =>
  !boxRestrictedCSSPropKeys.includes(prop as keyof BoxCSSProps) && defaultValidatorFn(prop),
-})<BoxProps & ModeProp>`
+})<BoxProps>`
  /* Responsive props */
  ${(props) => getBoxResponsiveCSS(props)}
 
  /* Non-responsive props */
- color: ${(props) => getBlocksColor(props.mode, props.color)};
- background-color: ${(props) => getBlocksColor(props.mode, props.backgroundColor)};
+ color: ${(props) => (props?.color ? `var(--${props.color})` : ``)};
+ background-color: ${(props) => (props?.backgroundColor ? `var(--${props.backgroundColor})` : ``)};
  box-shadow: ${(props) => props.boxShadow};
  border-radius: ${(props) => getBlocksBorderRadius(props.borderRadius)};
  cursor: ${(props) => props.cursor};
  overflow: ${(props) => props.overflow};
- border: ${(props) => getBlocksBorder(props.mode, props.border)};
+ border: ${(props) => getBlocksBorder(props.border)};
  position: ${(props) => props.position};
 
  // push custom scroll
@@ -51,18 +50,13 @@ const StyledBox = styled.div.withConfig({
  /* Extra CSS prop */
  ${(props) => props.css || ''}
 `;
-const Box = forwardRef<HTMLElement, BoxProps>(({ as = 'div', ...props }, ref) => {
- const { mode } = useBlocksTheme();
- // TODO: We need to remove color dependency from BlocksColors | ThemeModeColors to fix this error
- return (
- <StyledBox
- as={as}
- mode={mode}
- ref={ref}
- {...props}
- />
- );
-});
+const Box = forwardRef<HTMLElement, BoxProps>(({ as = 'div', ...props }, ref) => (
+ <StyledBox
+ as={as}
+ ref={ref}
+ {...props}
+ />
+));
 
 Box.displayName = 'Box';
 

src/blocks/box/Box.types.ts

@@ -1,18 +1,15 @@
 import { CSSProperties, ReactNode } from 'react';
 
 import {
- BlocksColors,
  BorderValue,
  BlocksRadiusType,
  ResponsiveProp,
  BlocksSpaceType,
- ThemeModeBorder,
- ThemeModeColors,
  ValueOf,
  BlocksGapType,
 } from '../Blocks.types';
 import { FlattenSimpleInterpolation } from 'styled-components';
-import { ThemeColors } from 'blocks/theme/Theme.types';
+import { SurfaceColors, TextColors } from 'blocks/theme/Theme.types';
 
 export type BoxResponsiveProps = {
  /* Sets align-items css property */
@@ -22,7 +19,7 @@ export type BoxResponsiveProps = {
  /* Sets flex-direction css property */
  flexDirection?: ResponsiveProp<CSSProperties['flexDirection']>;
  /* Sets gap between the elements */
- gap?: ResponsiveProp<BlocksGapType | BlocksSpaceType>;
+ gap?: ResponsiveProp<BlocksGapType>;
  /* Sets display css property */
  display?: ResponsiveProp<CSSProperties['display']>;
  /* Sets height css property */
@@ -47,13 +44,13 @@ export type BoxResponsiveProps = {
 
 export type BoxNonResponsiveProps = {
  /* Sets border css property */
- border?: BorderValue | ThemeModeBorder;
+ border?: BorderValue;
  /* Sets border-radius css property */
  borderRadius?: BlocksRadiusType;
  /* Sets background-color css property */
- backgroundColor?: BlocksColors | ThemeModeColors | ThemeColors;
+ backgroundColor?: SurfaceColors;
  /* Sets color css property */
- color?: BlocksColors | ThemeModeColors | ThemeColors;
+ color?: TextColors;
  /* Sets cursor css property */
  cursor?: CSSProperties['cursor'];
  /* Sets position css property */