replaced creategroup feature with token gated creategroup component from ui-web

package.json

@@ -36,7 +36,7 @@
     "@pushprotocol/ledgerlive": "latest",
     "@pushprotocol/restapi": "0.0.1-alpha.50",
     "@pushprotocol/socket": "latest",
-    "@pushprotocol/uiweb": "0.0.1-alpha.22",
+    "@pushprotocol/uiweb": "0.0.1-alpha.25",
     "@reduxjs/toolkit": "^1.7.1",
     "@testing-library/dom": "^9.0.1",
     "@testing-library/jest-dom": "^4.2.4",

src/App.tsx

@@ -10,6 +10,7 @@ import { DarkModeSwitch } from 'react-toggle-dark-mode';
 import styled, { createGlobalStyle, ThemeProvider } from 'styled-components';
 import ReactGA from 'react-ga';
 import * as dotenv from 'dotenv';
+import { PushAPI } from '@pushprotocol/restapi';
 
 // Internal Compoonents
 import InitState from 'components/InitState';
@@ -31,6 +32,7 @@ import { resetChannelCreationSlice } from 'redux/slices/channelCreationSlice';
 import { resetAdminSlice } from 'redux/slices/adminSlice';
 import Navigation from 'structure/Navigation';
 import {  ErrorContext } from './contexts/ErrorContext'
+import { resetUserSlice, setUserPushSDKInstance } from 'redux/slices/userSlice';
 
 // Internal Configs
 import { appConfig } from 'config';
@@ -79,6 +81,9 @@ export default function App() {
   const [currentTime, setcurrentTime] = React.useState(0);
   const {authError, setAuthError } = useContext(ErrorContext);
   const updateOnboardTheme = useUpdateTheme();
+  const { userPushSDKInstance } = useSelector((state: any) => {
+    return state.user;
+  });
 
   const { run, stepIndex, tutorialContinous } = useSelector((state: any) => state.userJourney);
   // const location = useLocation();
@@ -102,8 +107,29 @@ export default function App() {
     dispatch(resetCanSendSlice());
     dispatch(resetChannelCreationSlice());
     dispatch(resetAdminSlice());
+    dispatch(resetUserSlice());
   }, [account]);
 
+  useEffect(() => {
+    const librarySigner = provider?.getSigner(account);
+    if(!account || !librarySigner || !appConfig?.appEnv || userPushSDKInstance) return;
+
+    const initializePushSDK = async () => {
+        try {
+          const userInstance = await PushAPI.initialize(librarySigner, {
+              env: appConfig.appEnv, // defaults to staging
+              account: account
+          });
+
+          dispatch(setUserPushSDKInstance(userInstance));
+        } catch (error) {
+        // Handle initialization error
+        }
+    };
+
+    initializePushSDK();
+}, [account, provider]);
+
   // console.log(isActive, chainId, account);
   // handle logic to reconnect in response to certain events from the provider
   const { allowedChain } = useInactiveListener();

src/components/StepsTransactionModal.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import { ReactComponent as Close } from 'assets/chat/group-chat/close.svg';
+import { ButtonV2, H2V2, ItemHV2, ItemVV2, SpanV2 } from './reusables/SharedStylingV2';
+import styled from 'styled-components';
+import Globals from 'config/Globals';
+import { LOADER_SPINNER_TYPE } from './reusables/loaders/LoaderSpinner';
+import Spinner from './reusables/spinners/SpinnerUnit';
+import { ReactComponent as CheckMark } from 'assets/checkmark.svg';
+
+const StepsTransactionModal = ({ onClose, InnerComponentProps }) => {
+
+    const {
+        currentTransactionNo,
+        totalTransactionNo,
+        transactionSteps,
+        transactionText,
+        setCurrentTransactionNo,
+        setTotalTransactionNo,
+        setTransactionSteps,
+        claimRewards,
+        unstakeTokensPaginated,
+    } = InnerComponentProps;
+
+    const handleClose = () => {
+        setTransactionSteps(0);
+        onClose();
+    }
+
+    const retryClaimingRewards = async () => {
+        setTransactionSteps(0);
+        setTotalTransactionNo(0);
+        setCurrentTransactionNo(0);
+        if(transactionText?.includes('Unstaking')){
+            unstakeTokensPaginated();
+        }else{
+            claimRewards();
+        }
+    }
+
+    return (
+        <Container>
+
+            {totalTransactionNo ? (
+                <>
+                    <ItemHV2 justifyContent='end'>
+                        <Close
+                            onClick={() => handleClose()}
+                            style={{ cursor: 'pointer' }}
+                        />
+                    </ItemHV2>
+
+
+                    {transactionSteps === 0 && (
+                        <>
+                            <Spinner
+                                size={42}
+                                color={Globals.COLORS.PRIMARY_PINK}
+                                type={LOADER_SPINNER_TYPE.PROCESSING}
+                            />
+
+                            <ItemVV2 gap='24px' margin='16px 0 0 0'>
+
+                                <ItemVV2>
+                                    <H2V2 fontSize='28px' fontWeight='500' letterSpacing='-0.84px'>
+                                        Please sign transaction {" "}
+                                        {currentTransactionNo}/{totalTransactionNo}
+                                    </H2V2>
+                                    <H2V2 fontSize='18px' fontWeight='400' color='#657795'>
+                                        Processing your request
+                                    </H2V2>
+                                </ItemVV2>
+
+                                <H2V2 fontSize='18px' fontWeight='400' color='#657795'>
+                                    {transactionText}
+                                </H2V2>
+
+                                <ItemVV2 padding='16px'>
+                                    <H2V2 fontSize='16px' fontWeight='400' color='#D53A94'>
+                                        Confirm the request in your wallet
+                                    </H2V2>
+                                </ItemVV2>
+
+                            </ItemVV2></>
+                    )}
+
+                    {transactionSteps === 1 && (
+                        <ItemVV2 gap='24px'>
+
+                            <ItemVV2 gap='9px'>
+                                <H2V2 fontSize='28px' fontWeight='500' letterSpacing='-0.84px'>
+                                    Transaction Error
+                                </H2V2>
+                                <H2V2 fontSize='18px' fontWeight='400' color='#657795'>
+                                    User denied the transaction signature.
+                                </H2V2>
+                            </ItemVV2>
+
+                            <ItemVV2>
+                                <FilledButton onClick={retryClaimingRewards}>Retry</FilledButton>
+                            </ItemVV2>
+                        </ItemVV2>
+                    )}
+
+                    {transactionSteps === 2 && (
+                        <ItemVV2 gap='24px'>
+
+                            <ItemVV2>
+                                <CheckMark height='50px' width='50px' />
+
+                                <ItemVV2 gap='9px'>
+                                    <H2V2 fontSize='28px' fontWeight='500' letterSpacing='-0.84px'>
+                                        Transactions Successful
+                                    </H2V2>
+                                    <H2V2 fontSize='18px' fontWeight='400' color='#657795'>
+                                        You have claimed all the rewards.
+                                    </H2V2>
+                                </ItemVV2>
+
+                            </ItemVV2>
+
+                            <ItemVV2 onClick={handleClose}>
+                                <FilledButton>Close</FilledButton>
+                            </ItemVV2>
+
+
+                        </ItemVV2>
+                    )}
+                </>
+            ) : (
+                <Spinner
+                    size={42}
+                    color={Globals.COLORS.PRIMARY_PINK}
+                    type={LOADER_SPINNER_TYPE.PROCESSING}
+                />
+
+            )}
+
+
+
+
+
+
+
+
+
+
+        </Container>
+    );
+};
+
+export default StepsTransactionModal;
+
+const Container = styled(ItemVV2)`
+
+    min-width:493px;
+    padding:32px 24px;
+
+
+`
+
+const FilledButton = styled(ButtonV2)`
+    min-width:200px;
+    background: #D53A94;
+    border: 1px solid #D53A94;
+    border-radius: 8px;
+    padding: 12px;
+    font-size: 16px;
+    line-height: 141%;
+    letter-spacing: -0.03em;
+    color: #FFFFFF;
+    cursor:pointer;
+    & > div{
+        display:block;
+    }
+
+    @media(max-width:600px){
+        font-size: 14px;
+    }
+
+`;

src/components/chat/w2wChat/groupChat/createGroup/CreateGroupModalContent.tsx

@@ -24,6 +24,9 @@ import { fetchInbox } from 'helpers/w2w/user';
 import { profilePicture } from 'config/W2WConfig';
 import { useAccount, useDeviceWidthCheck } from 'hooks';
 import { device } from 'config/Globals';
+import { CreateGroupModal } from "@pushprotocol/uiweb";
+import { ChatUIProvider } from '@pushprotocol/uiweb';
+
 
 export const CreateGroupModalContent = ({ onClose, onConfirm: createGroup, toastObject }: ModalInnerComponentType) => {
   const [createGroupState, setCreateGroupState] = React.useState<number>(1);
@@ -40,6 +43,7 @@ export const CreateGroupModalContent = ({ onClose, onConfirm: createGroup, toast
   const createGroupToast = useToast();
   const isMobile = useDeviceWidthCheck(600);
 
+
   const handlePrevious = () => {
     setCreateGroupState(1);
   };
@@ -133,34 +137,8 @@ export const CreateGroupModalContent = ({ onClose, onConfirm: createGroup, toast
   };
   return (
     <ThemeProvider theme={themes}>
-      <ModalContainer createGroupState={createGroupState}>
-
-        {createGroupState == 1 && (
-          <GroupDetailsContent
-            groupNameData={groupNameData}
-            groupDescriptionData={groupDescriptionData}
-            groupImageData={groupImageData}
-            groupTypeObject={groupTypeObject}
-            handleGroupNameData={setGroupNameData}
-            handleGroupDescriptionData={setGroupDescriptionData}
-            handleGroupImageData={setGroupImageData}
-            handleGroupTypeObject={setGroupTypeObject}
-            handleCreateGroupState={setCreateGroupState}
-            handlePrevious={handlePrevious}
-            handleClose={handleClose}
-          />
-        )}
-        {createGroupState == 2 && (
-          <AddWalletContent
-            onSubmit={handleCreateGroup}
-            memberList={memberList}
-            handleMemberList={setMemberList}
-            isLoading={isLoading}
-            handlePrevious={handlePrevious}
-            handleClose={handleClose}
-            title={"Create Group"}
-          />
-        )}
+      <ModalContainer>
+        <CreateGroupModal onClose={() => handleClose()} />
       </ModalContainer>
     </ThemeProvider>
   );

src/components/dropdowns/ManageNotifSettingDropdown.tsx

@@ -3,7 +3,7 @@ import React, { useContext, useMemo, useState } from "react";
 
 // External Packages
 import styled, { css, useTheme } from "styled-components";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 // Internal Components
 import { DropdownBtnHandler } from "./DropdownBtnHandler";
@@ -107,7 +107,9 @@ const ManageNotifSettingDropdown: React.FC<ManageNotifSettingDropdownProps> = (o
   } = options;
   const [isOpen, setIsOpen] = useState(false);
   const { chainId } = useAccount();
-  const { userPushSDKInstance } = useContext(AppContext);
+  const { userPushSDKInstance } = useSelector((state: any) => {
+    return state.user;
+  });
   const dispatch = useDispatch();
 
   const channelSetting = useMemo(() => {

src/components/dropdowns/OptinNotifSettingDropdown.tsx

@@ -5,7 +5,7 @@ import React, { useContext, useMemo, useState } from "react";
 import Switch from 'react-switch';
 import Slider from 'react-input-slider';
 import styled, { css, useTheme } from "styled-components";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 // Internal Components
 import { DropdownBtnHandler } from "./DropdownBtnHandler";
@@ -136,7 +136,9 @@ const OptinNotifSettingDropdown: React.FC<OptinNotifSettingDropdownProps> = (opt
   const { children, channelDetail, setLoading, onSuccessOptin } = options;
 
   const { chainId } = useAccount();
-  const { userPushSDKInstance } = useContext(AppContext);
+  const { userPushSDKInstance } = useSelector((state: any) => {
+    return state.user;
+  });
   const [isOpen, setIsOpen] = useState(false);
   const dispatch = useDispatch();
 

src/components/dropdowns/UpdateNotifSettingDropdown.tsx

@@ -5,7 +5,7 @@ import React, { useContext, useState } from "react";
 import Switch from 'react-switch';
 import Slider from 'react-input-slider';
 import styled, { css, useTheme } from "styled-components";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 // Internal Components
 import { DropdownBtnHandler } from "./DropdownBtnHandler";
@@ -145,7 +145,9 @@ const UpdateNotifSettingDropdown: React.FC<UpdateNotifSettingDropdownProps> = ({
   const [isOpen, setIsOpen] = useState(false);
 
   const { chainId } = useAccount();
-  const { userPushSDKInstance } = useContext(AppContext);
+  const { userPushSDKInstance } = useSelector((state: any) => {
+    return state.user;
+  });
   const dispatch = useDispatch();
 
   const onCoreNetwork = chainId === appConfig.coreContractChain;