Rewards V1 (#1664)

* added rewards module

* added /rewards route and changed the snap section in dashboard (#1647)

* added route and layout

* added route and layout

* added header tag

* added review comments

* rewards tabs + dashboard tab ui

* fixed ui

* added leadership board UI

* fixed the colors

* fixed border radius

* Activities tab UI - Rewards page (#1651)

* update UI

* fix: resolve comments and pull rewardsv1

* chore: add dark mode style

* PR fixes done

---------

Co-authored-by: rohitmalhotra1420 <[email protected]>

* added lozenge and leaderboard tab (#1653)

* added lozenge navigation

* added navigation on tab switch

* added navigation on tab switch

* included rewards header in rewards page

* added dark mode support for lozenge

* added dark mode support for leaderboard

* added heading

* changed the background color in masterInterface

* changed the background color in masterInterface

* review fixes

* added review fixes

* Leaderboard api (#1658)

* added api integration

* fixed loading state of leaderboard and some refactoring

* pagination fix needed

* pagination fix needed

* added null page

* added ens resolution

* fixed the infinite scroll issue

* fixed order

* fixed the components

---------

Co-authored-by: rohitmalhotra1420 <[email protected]>

* API Integration of Rewards Activities (#1659)

* dark-mode implementation

* added lozenge and leaderboard tab (#1653)

* added lozenge navigation

* added navigation on tab switch

* added navigation on tab switch

* included rewards header in rewards page

* added dark mode support for lozenge

* added dark mode support for leaderboard

* added heading

* changed the background color in masterInterface

* changed the background color in masterInterface

* review fixes

* added review fixes

* chore: add wallet connect hook

* fix: add update icon

* Mobile Viewport and Dark Mode feature added to the rewards page

* Fixed the width of the reward points

* update queries

* add ref section

* add click to copy

* update code

* Added API Integration of get all activities, create new activity, create user id and also discord

* resolve conflicts and merge image

* resolve comments

* fixed discord error

* resolve all comments

* Added Flow for discord

* chore: create user api

* Update Total Points in header

* fixed things

---------

Co-authored-by: corlard3y <[email protected]>
Co-authored-by: Monalisha Mishra <[email protected]>
Co-authored-by: rohitmalhotra1420 <[email protected]>

* chore: add image

* prop fixed

* Update image name

* fixed the file name

* added none type to border type

* mapped the url and name in the response for the activities and also fixed the redirect url

* update initial commits

* update routes && fix other comments

* update rewards page

* Fixed some of the comments

* add base-url

* update unused variables

* fix design qa

* update design fixes

* remove usegenerateuserid files && fixes

* fix loader

* update text width

* added support for align self in box

* added custom hook for discird session

* replaced custom hook with useSearchParams hook

* removed log

* fixed types

* Twitter Integration in the rewards (#1672)

* Twitter Integration in the rewards

* Fixed the verify Twitter flow

* Fixed the query keys

* Removed flex 1 property

* Removed the desc in case of discord and twitter

* Fixed all the changes related to Reward Activities

* Fixed the button UI and made a separate common button component

* Changed the files of getRewardsActivityTitle to a new file in utils

* fix button min-width

* Client Id for discord

* Updated Preview.yml file

* added support for rewards base URL

* add userGenerateUser hook

* Fixed the Connect and User Profile Modal on rewards page

* fix onboard text

* add pagewrapper

* add base path

* update preview url

* add base

* remove unused helper

* layout and refeactor

* fixed dashboard layout

* staging URL updated for points

* fixed the firebase configs

* changed vapid keys for firebase

* reverted back to firebase config of the app

* fixed export issues

* Fixed the URL issue with the discord

* added points/vault routes (#1683)

* added points/vault routes

* removed /login route

* Points login page (#1687)

* login page changes

* login page changes

* login page changes

* login page changes

* fixed review comments

* fixed review comments

* Removed the loading state in the button and added the disabled label in the verifying state

* Added Pagination for Activities Page (#1688)

* Add Vault List (#1689)

* feat: add vault list

* chore: fix search

* chore: fix issues and refactor code

* chore: update leaderboard skeleton count to 10

* chore: update activity list query keys

* fixed the query invalidation for vault listing

* bug: fix empty params request

---------

Co-authored-by: rohitmalhotra1420 <[email protected]>

* added min-width to  buttons

---------

Co-authored-by: Monalisha Mishra <[email protected]>
Co-authored-by: Kolade <[email protected]>
Co-authored-by: Abhishek <[email protected]>
Co-authored-by: abhishek-01k <[email protected]>
Co-authored-by: Monalisha Mishra <[email protected]>
Co-authored-by: Kalash Shah <[email protected]>

.env.sample

@@ -11,6 +11,9 @@ VITE_APP_PUBLIC_URL=https://dev.push.org/
 # WALLET CONNECT PROJECT ID
 VITE_APP_WALLETCONNECT_PROJECT_ID=walletconnect_project_id
 
+# Discord Client ID
+VITE_APP_DISCORD_CLIENT_ID=client_id
+
 # LOCALHOST CREDS
 # VITE_APP_IPFS_INFURA_API_KEY="your_secret_infura_api_key_for_localhost"
 # VITE_APP_IPFS_INFURA_API_SECRET="your_secret_infura_api_secret_for_localhost"

.github/workflows/preview.yml

@@ -31,7 +31,7 @@ jobs:
  if: github.event.action != 'closed' # You might want to skip the build if the PR has been closed
  env:
  VITE_APP_WALLETCONNECT_PROJECT_ID: ${{ secrets.VITE_APP_WALLETCONNECT_PROJECT_ID }}
-
+ VITE_APP_DISCORD_CLIENT_ID: ${{ secrets.VITE_APP_DISCORD_CLIENT_ID }}
  run: |
  yarn install
  yarn build:pr:preview

package.json

@@ -59,6 +59,7 @@
  "assert": "2.0.0",
  "babel-plugin-styled-components": "1.10.7",
  "blockies": "0.0.2",
+ "blockies-react-svg": "^0.0.13",
  "browserify-zlib": "^0.2.0",
  "browserslist": "4.14.6",
  "buffer": "6.0.3",
@@ -75,6 +76,8 @@
  "eth-crypto": "1.6.0",
  "eth-sig-util": "^3.0.1",
  "ethers": "^5.7.2",
+ "firebase": "^10.12.2",
+ "formik": "^2.4.6",
  "https-browserify": "1.0.0",
  "image-size": "0.9.3",
  "immer": "^10.0.2",
@@ -97,6 +100,7 @@
  "react-ga": "2.7.0",
  "react-icons": "4.12.0",
  "react-image-file-resizer": "^0.4.7",
+ "react-infinite-scroller": "^1.2.6",
  "react-joyride": "^2.4.0",
  "react-multi-select-component": "^4.2.3",
  "react-player": "^2.16.0",
@@ -115,7 +119,8 @@
  "styled-components": "^5.3.8",
  "url": "0.11.0",
  "web3": "^1.8.2",
- "xss": "^1.0.14"
+ "xss": "^1.0.14",
+ "yup": "^1.4.0"
  },
  "devDependencies": {
  "@3id/connect": "0.4.1",
@@ -125,6 +130,7 @@
  "@types/openpgp": "^4.4.18",
  "@types/react": "^18.2.66",
  "@types/react-dom": "^18.2.22",
+ "@types/react-infinite-scroller": "^1",
  "@types/styled-components": "5.1.26",
  "@typescript-eslint/eslint-plugin": "^7.2.0",
  "@typescript-eslint/parser": "^7.2.0",

src/App.tsx

@@ -52,6 +52,7 @@ import SpaceContextProvider from 'contexts/SpaceContext';
 import { SpaceWidgetSection } from 'sections/space/SpaceWidgetSection';
 import { blocksColors } from 'blocks';
 import { textVariants } from 'blocks/text/Text.constants';
+import APP_PATHS from 'config/AppPaths';
 
 dotenv.config();
 
@@ -327,7 +328,8 @@ export default function App() {
  // const { spaceUI } = useSpaceComponents();
 
  const location = useLocation();
- const isSnapPage = location?.pathname.includes('/snap');
+ const isHeaderHidden = location?.pathname.includes(APP_PATHS.PointsVault);
+ const isSidebarHidden = location?.pathname.includes(APP_PATHS.PointsVault) || location?.pathname.includes('/snap');
 
  return (
  <ThemeProvider theme={darkMode ? themeDark : themeLight}>
@@ -379,15 +381,17 @@ export default function App() {
  }}
  />
 
- <HeaderContainer>
- <Header
- isDarkMode={darkMode}
- darkModeToggle={toggleDarkMode}
- />
- </HeaderContainer>
+ {!isHeaderHidden && (
+ <HeaderContainer>
+ <Header
+ isDarkMode={darkMode}
+ darkModeToggle={toggleDarkMode}
+ />
+ </HeaderContainer>
+ )}
 
  <ParentContainer headerHeight={GLOBALS.CONSTANTS.HEADER_HEIGHT}>
- {!isSnapPage && (
+ {!isSidebarHidden && (
  <LeftBarContainer
  leftBarWidth={
  sidebarCollapsed
@@ -401,7 +405,9 @@ export default function App() {
 
  <ContentContainer
  leftBarWidth={
- sidebarCollapsed
+ isSidebarHidden
+ ? GLOBALS.CONSTANTS.NO_LEFT_BAR_WIDTH
+ : sidebarCollapsed
  ? GLOBALS.CONSTANTS.COLLAPSABLE_RIGHT_BAR_WIDTH
  : GLOBALS.CONSTANTS.LEFT_BAR_WIDTH
  }

src/blocks/Blocks.types.ts

@@ -20,7 +20,7 @@ export type Breakpoint = 'initial' | 'ms' | 'mm' | 'ml' | 'tb' | 'lp' | 'll' | '
 
 export type ResponsiveProp<T> = T | { [key in Breakpoint]?: T };
 
-export type RadiusType = `r${number}`;
+export type RadiusType = `r${number}` | `r${number} r${number}` | `r${number} r${number} r${number} r${number}`;
 
 export type SpaceType = `s${number}` | `s${number} s${number}` | `s${number} s${number} s${number} s${number}`;
 
@@ -59,7 +59,7 @@ export type ThemeMode = 'light' | 'dark';
 
 export type ThemeModeColors = Record<ThemeMode, BlocksColors>;
 
-export type BorderValue = `${number}px ${string} ${BlocksColors}`;
+export type BorderValue = `${number}px ${string} ${BlocksColors}` | 'none';
 
 export type ThemeModeBorder = Record<ThemeMode, BorderValue>;
 

src/blocks/Blocks.utils.ts

@@ -11,7 +11,8 @@ import {
  ResponsiveCSSPropertyData,
  ThemeMode,
  ThemeModeBorder,
- BorderValue
+ BorderValue,
+ RadiusType
 } from './Blocks.types';
 
 /**
@@ -166,3 +167,17 @@ export const getBlocksBorder = (mode: ThemeMode, border?: BorderValue | ThemeMod
  borderValues[2] = `var(--${borderValues[2]})`;
  return borderValues.join(' ');
 };
+
+/**
+ * @param radius
+ * @returns
+ */
+export const getBlocksBorderRadius = (radius?: RadiusType) => {
+ // If border-radius is not given return undefined, to avoid any breakages
+ if (!radius) return radius;
+
+ return radius.replace(/\b(\w+)\b/g, 'var(--$1)');
+
+ // If passed a design system border-radius then use radius as a variable
+ return `var(--${radius})`;
+};

src/blocks/box/Box.constants.ts

@@ -10,6 +10,7 @@ export const boxRestrictedCSSPropKeys: (keyof BoxCSSProps | keyof ModeProp)[] =
  'position',
  'boxShadow',
  'alignItems',
+ 'alignSelf',
  'display',
  'flexDirection',
  'gap',

src/blocks/box/Box.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { useBlocksTheme } from '../Blocks.hooks';
 import { TransformedHTMLAttributes, ModeProp } from '../Blocks.types';
-import { getBlocksColor, getBlocksBorder } from '../Blocks.utils';
+import { getBlocksColor, getBlocksBorder, getBlocksBorderRadius } from '../Blocks.utils';
 import { BoxCSSProps, BoxComponentProps } from './Box.types';
 import { getBoxResponsiveCSS } from './Box.utils';
 import { boxRestrictedCSSPropKeys } from './Box.constants';
@@ -13,15 +13,15 @@ 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 & ModeProp>`
  /* Responsive props */
  ${(props) => getBoxResponsiveCSS(props)}
 
  /* Non-responsive props */
  color: ${(props) => getBlocksColor(props.mode, props.color)};
  background-color: ${(props) => getBlocksColor(props.mode, props.backgroundColor)};
  box-shadow: ${(props) => props.boxShadow};
- border-radius: ${(props) => props.borderRadius};
+ border-radius: ${(props) => getBlocksBorderRadius(props.borderRadius)};
  cursor: ${(props) => props.cursor};
  overflow: ${(props) => props.overflow};
  border: ${(props) => getBlocksBorder(props.mode, props.border)};

src/blocks/box/Box.types.ts

@@ -3,6 +3,7 @@ import { CSSProperties, ReactNode } from 'react';
 import {
  BlocksColors,
  BorderValue,
+ RadiusType,
  ResponsiveProp,
  SpaceType,
  ThemeModeBorder,
@@ -14,6 +15,8 @@ import { FlattenSimpleInterpolation } from 'styled-components';
 export type BoxResponsiveProps = {
  /* Sets align-items css property */
  alignItems?: ResponsiveProp<CSSProperties['alignItems']>;
+ /* Sets align-self css property */
+ alignSelf?: ResponsiveProp<CSSProperties['alignSelf']>;
  /* Sets flex-direction css property */
  flexDirection?: ResponsiveProp<CSSProperties['flexDirection']>;
  /* Sets gap between the elements */
@@ -44,7 +47,7 @@ export type BoxNonResponsiveProps = {
  /* Sets border css property */
  border?: BorderValue | ThemeModeBorder;
  /* Sets border-radius css property */
- borderRadius?: string;
+ borderRadius?: RadiusType;
  /* Sets background-color css property */
  backgroundColor?: BlocksColors | ThemeModeColors;
  /* Sets color css property */
@@ -74,6 +77,7 @@ export type BoxComponentProps = {
 
 export type BoxResponsiveCSSProperties =
  | 'align-items'
+ | 'align-self'
  | 'display'
  | 'flex-direction'
  | 'gap'

src/blocks/box/Box.utils.ts

@@ -3,6 +3,7 @@ import { BoxResponsiveCSSPropertiesData, BoxResponsiveProps } from './Box.types'
 
 const getBoxResponsiveCSSProperties = (props: BoxResponsiveProps): BoxResponsiveCSSPropertiesData[] => [
  { propName: 'align-items', prop: props.alignItems },
+ { propName: 'align-self', prop: props.alignSelf },
  { propName: 'display', prop: props.display },
  { propName: 'flex-direction', prop: props.flexDirection },
  { propName: 'gap', prop: props.gap },
@@ -14,7 +15,7 @@ const getBoxResponsiveCSSProperties = (props: BoxResponsiveProps): BoxResponsive
  { propName: 'max-width', prop: props.maxWidth },
  { propName: 'min-width', prop: props.minWidth },
  { propName: 'padding', prop: props.padding },
- { propName: 'width', prop: props.width }
+ { propName: 'width', prop: props.width },
 ];
 
 export const getBoxResponsiveCSS = (props: BoxResponsiveProps) => {

src/blocks/button/Button.utils.ts

@@ -186,6 +186,7 @@ export const getButtonSizeStyles = ({
  gap: var(--s1);
  height: 32px;
  padding: var(--s3) var(--s4);
+ min-width: 100px;
  `}
 
  /* Button text size css */
@@ -224,6 +225,7 @@ export const getButtonSizeStyles = ({
  gap: var(--s1);
  height: 40px;
  padding: var(--s3) var(--s6);
+ min-width: 100px;
  `}
 
  /* Button text size css */
@@ -263,6 +265,7 @@ export const getButtonSizeStyles = ({
  gap: var(--s1);
  height: 48px;
  padding: var(--s4) var(--s6);
+ min-width: 100px;
  `}
 
  /* Button text size css */
@@ -301,6 +304,7 @@ export const getButtonSizeStyles = ({
  gap: var(--s1);
  height: 52px;
  padding: var(--s4) var(--s8);
+ min-width: 100px;
  `}
 
  /* Button text size css */

src/blocks/hoverableSVG/HoverableSVG.tsx

@@ -1,8 +1,15 @@
 import { FC } from 'react';
 import styled from 'styled-components';
 import { useBlocksTheme } from '../Blocks.hooks';
-import { BlocksColors, ThemeModeColors, SpaceType, ModeProp, TransformedHTMLAttributes } from '../Blocks.types';
-import { getBlocksColor } from '../Blocks.utils';
+import {
+ BlocksColors,
+ ThemeModeColors,
+ SpaceType,
+ ModeProp,
+ TransformedHTMLAttributes,
+ RadiusType,
+} from '../Blocks.types';
+import { getBlocksColor, getBlocksBorderRadius } from '../Blocks.utils';
 export type HoverableSVGProps = {
  /* Icon component */
  icon: React.ReactNode;
@@ -20,17 +27,19 @@ export type HoverableSVGProps = {
  padding?: SpaceType;
  /* Sets the margin for SVG button container */
  margin?: SpaceType;
+ /* Sets the margin for SVG button container */
+ borderRadius?: RadiusType;
 } & TransformedHTMLAttributes<HTMLButtonElement>;
 
-
 const StyledButton = styled.button.withConfig({
  shouldForwardProp: (prop, defaultValidatorFn) => !['mode'].includes(prop) && defaultValidatorFn(prop),
-}) <Omit<HoverableSVGProps, 'icon'> & ModeProp>`
+})<Omit<HoverableSVGProps, 'icon'> & ModeProp>`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--${(props) => props.padding || 's0'});
  margin: var(--${(props) => props.margin || 's0'});
+ border-radius: ${(props) => getBlocksBorderRadius(props.borderRadius)};
  background-color: ${({ defaultBackground, mode }) => getBlocksColor(mode, defaultBackground) || 'transparent'};
  color: ${({ mode, defaultColor }) => getBlocksColor(mode, defaultColor) || 'inherit'};
  border: none;
@@ -54,6 +63,7 @@ const HoverableSVG: FC<HoverableSVGProps> = ({
  hoverBackground,
  padding,
  margin,
+ borderRadius,
  ...props
 }) => {
  const { mode } = useBlocksTheme();
@@ -66,11 +76,12 @@ const HoverableSVG: FC<HoverableSVGProps> = ({
  hoverBackground={hoverBackground}
  padding={padding}
  margin={margin}
+ borderRadius={borderRadius}
  mode={mode}
  {...props}
  >
  {icon}
  </StyledButton>
  );
 };
-export { HoverableSVG };
+export { HoverableSVG };

src/blocks/icons/components/Star.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import { IconProps } from '../Icons.types';
+
+const Star: FC<IconProps> = (allProps) => {
+ const { svgProps: props, ...restProps } = allProps;
+ return (
+ <IconWrapper
+ componentName="Star"
+ icon={
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="inherit"
+ height="inherit"
+ viewBox="0 0 8 8"
+ fill="none"
+ {...props}
+ >
+ <path
+ d="M7.99998 4C8.00089 4.11726 7.96526 4.23189 7.89803 4.32796C7.8308 4.42403 7.73533 4.49676 7.62487 4.53604L5.35847 5.36047L4.53466 7.62719C4.49405 7.73662 4.42094 7.83099 4.32515 7.89764C4.22935 7.96428 4.11546 8 3.99878 8C3.8821 8 3.76821 7.96428 3.67241 7.89764C3.57662 7.83099 3.50351 7.73662 3.46291 7.62719L2.63909 5.36011L0.372692 4.53604C0.263301 4.49542 0.168956 4.42229 0.102333 4.32647C0.0357102 4.23064 0 4.11672 0 4C0 3.88328 0.0357102 3.76936 0.102333 3.67353C0.168956 3.57771 0.263301 3.50458 0.372692 3.46396L2.63909 2.63989L3.46291 0.372805C3.50351 0.263381 3.57662 0.169008 3.67241 0.102364C3.76821 0.0357211 3.8821 0 3.99878 0C4.11546 0 4.22935 0.0357211 4.32515 0.102364C4.42094 0.169008 4.49405 0.263381 4.53466 0.372805L5.35883 2.63989L7.62487 3.46396C7.73533 3.50324 7.8308 3.57597 7.89803 3.67204C7.96526 3.76811 8.00089 3.88274 7.99998 4Z"
+ fill="currentColor"
+ />
+ </svg>
+ }
+ {...restProps}
+ />
+ );
+};
+
+export default Star;

src/blocks/icons/index.ts

@@ -117,6 +117,8 @@ export { default as SendNotificationFilled } from './components/SendNotification
 
 export { default as Smiley } from './components/Smiley';
 
+export { default as Star } from './components/Star';
+
 export { default as Settings } from './components/Settings';
 
 export { default as Swap } from './components/Swap';