fix: added loader

push-protocol · Oct 10, 2023 · 4fc9940 · 4fc9940
2 parents ed32af7 + 05ec10c
commit 4fc9940
Show file tree

Hide file tree

Showing 11 changed files with 170 additions and 93 deletions.
diff --git a/packages/examples/sdk-frontend-react/src/app/app.tsx b/packages/examples/sdk-frontend-react/src/app/app.tsx
@@ -313,7 +313,7 @@ export function App() {
           <Web3Context.Provider value={{ account, active, library, chainId }}>
             <SocketContext.Provider value={socketData}>
               <AccountContext.Provider value={{ pgpPrivateKey, setSpaceId }}>
-                <ChatUIProvider  env={env} theme={darkChatTheme}>
+                <ChatUIProvider  env={env} theme={darkChatTheme} account={account} pgpPrivateKey={pgpPrivateKey} signer={signer}>
                   <SpacesUIProvider spaceUI={spaceUI} theme={customDarkTheme}>
                     <Routes>
                       <Route

diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/AddButtons.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/AddButtons.tsx
@@ -1,4 +1,5 @@
 import React, { useContext } from 'react'
+
 import { Button } from '../reusables'
 import { ThemeContext } from '../theme/ThemeProvider';
 

diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/AddCriteria.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/AddCriteria.tsx
@@ -1,4 +1,5 @@
 import { useContext, useEffect, useState } from 'react';
+
 import {
   Button,
   DropDownInput,
@@ -7,20 +8,19 @@ import {
   TextInput,
 } from '../reusables';
 import { Section, } from '../../reusables';
-import EthereumSvg from '../../../icons/ethereum.svg';
-import PolygonSvg from '../../../icons/polygon.svg';
-import BSCSvg from '../../../icons/bsc.svg';
-import OptimismSvg from '../../../icons/optimisim.svg';
-
 import useMediaQuery from '../../../hooks/useMediaQuery';
-
-import { BLOCKCHAIN_NETWORK, device } from '../../../config';
 import { GatingRulesInformation, ModalHeaderProps } from './CreateGroupModal';
 import { useChatData } from '../../../hooks';
 import { QuantityInput } from '../reusables/QuantityInput';
 import { ThemeContext } from '../theme/ThemeProvider';
 import { Checkbox } from '../reusables/Checkbox';
 import OptionButtons from '../reusables/OptionButtons';
+
+import EthereumSvg from '../../../icons/ethereum.svg';
+import PolygonSvg from '../../../icons/polygon.svg';
+import BSCSvg from '../../../icons/bsc.svg';
+import OptimismSvg from '../../../icons/optimisim.svg';
+import { BLOCKCHAIN_NETWORK, device } from '../../../config';
 import { GUILD_COMPARISON_OPTIONS, INVITE_CHECKBOX_LABEL } from '../constants';
 import {
   CATEGORY,
@@ -33,8 +33,7 @@ import {
   ReadonlyInputType,
 } from '../types';
 import { Data, GuildData, PushData, Rule } from '../types/tokenGatedGroupCreationType';
-import styled from 'styled-components';
-import { IChatTheme } from '../theme';
+
 
 
 const AddCriteria = ({
@@ -273,9 +272,6 @@ const AddCriteria = ({
 
   const getSubCategoryDropdownValues = () => {
     const category = getCategoryDropdownValues();
-    console.log(category);
-    console.log(selectedCategoryValue);
-    console.log((category as DropdownValueType[])[selectedCategoryValue]);
     if (Array.isArray(category))
       return dropdownSubCategoryValues[
         (category as DropdownValueType[])[selectedCategoryValue]
@@ -293,11 +289,13 @@ const AddCriteria = ({
     const category:string = _type === "PUSH" ? (dropdownCategoryValues[_type] as DropdownValueType[])[
       selectedCategoryValue
     ].value || CATEGORY.ERC20 : "ROLES"
-
+ 
     let subCategory = "DEFAULT"
     if(_type === "PUSH"){ 
       if(category === CATEGORY.ERC20 || category === CATEGORY.ERC721){
         subCategory = tokenCategoryValues[selectedSubCategoryValue].value
+      }else if(category === CATEGORY.CustomEndpoint){
+        subCategory = "GET"
       } 
     }
 

diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx
@@ -1,15 +1,17 @@
 import React, { useContext, useRef, useState } from 'react';
+
+import styled from 'styled-components';
+
 import { Section, Span } from '../../reusables';
 import { MoreDarkIcon } from '../../../icons/MoreDark';
 import { ThemeContext } from '../theme/ThemeProvider';
-import styled from 'styled-components';
-import { device } from '../../../config';
 import Dropdown, { DropdownValueType } from '../reusables/DropDown';
-import EditSvg from '../../../icons/EditSvg.svg';
-import RemoveSvg from '../../../icons/RemoveSvg.svg';
 import { ConditionArray, ConditionData, IChatTheme } from '../exportedTypes';
 import { useClickAway } from '../../../hooks';
 import { CATEGORY, CRITERIA_TYPE, CriteriaType, TOKEN_NFT_COMPARISION, TokenNftComparision } from '../types';
+
+import EditSvg from '../../../icons/EditSvg.svg';
+import RemoveSvg from '../../../icons/RemoveSvg.svg';
 import { shortenText } from '../../../helpers';
 import { GUILD_COMPARISON_OPTIONS } from '../constants';
 
@@ -51,7 +53,6 @@ const MoreOptionsContainer = ({
   const dropdownRef = useRef<any>(null);
 
   useClickAway(dropdownRef, () => setSelectedIndex(null));
-  console.log('in dropdown');
   return (
     <Section onClick={() => handleMoreOptionsClick(row, col)}  position='static'>
       <MoreDarkIcon color={theme.iconColor?.groupSettings} />
@@ -183,11 +184,9 @@ const ConditionsComponent = ({
   useClickAway(dropdownRef, () => setSelectedIndex(null));
 
   const handleMoreOptionsClick = (row: number, col: number) => {
-    console.log('in click');
     setSelectedIndex([row, col]);
   };
 
-  console.log(conditionData);
   return (
     <Section flexDirection="column" width="100%" height="100%">
       {conditionData &&

diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx
@@ -1,7 +1,9 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 
 import styled from 'styled-components';
+import { ToastContainer } from 'react-toastify';
 import { AiTwotoneCamera } from 'react-icons/ai';
+import { MdError } from 'react-icons/md';
 
 import { ModalHeader } from '../reusables/Modal';
 import { Modal } from '../reusables/Modal';
@@ -11,19 +13,16 @@ import { Section, Span } from '../../reusables';
 import { Button } from '../reusables';
 import { CreateGroupType } from './CreateGroupType';
 import useToast from '../reusables/NewToast';
-import { MdError } from 'react-icons/md';
-
-import {Image} from "../../../config/styles"
-import { device } from '../../../config';
 import { CreateGroupModalProps, IChatTheme } from '../exportedTypes';
 import useMediaQuery from '../../../hooks/useMediaQuery';
 import { DefineCondtion } from './DefineCondition';
 import AddCriteria from './AddCriteria';
 import { SpamIcon } from '../../../icons/SpamIcon';
 import { ThemeContext } from '../theme/ThemeProvider';
-import { ToastContainer } from 'react-toastify';
-import { CriteriaStateType} from '../types/tokenGatedGroupCreationType';
-import { CriteriaStateManagerType, useCriteriaState, useCriteriaStateManager } from '../../../hooks/chat/useCriteriaState';
+import { CriteriaStateManagerType, useCriteriaStateManager } from '../../../hooks/chat/useCriteriaState';
+
+import {Image} from "../../../config/styles"
+import { device } from '../../../config';
 
 export const CREATE_GROUP_STEP_KEYS = {
   INPUT_DETAILS: 1,

diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx
@@ -1,25 +1,29 @@
 import { useContext, useState } from 'react';
-import { MdError } from 'react-icons/md';
+
+import { MdCheckCircle, MdError } from 'react-icons/md';
+import styled from 'styled-components';
+
 import { ModalHeader } from '../reusables/Modal';
 import OptionButtons, { OptionDescription } from '../reusables/OptionButtons';
-import { Section, Span } from '../../reusables';
+import { Section, Span, Spinner } from '../../reusables';
 import { ToggleInput } from '../reusables';
 import { Button } from '../reusables';
 import { GatingRulesInformation, ModalHeaderProps } from './CreateGroupModal';
 import { GroupTypeState } from './CreateGroupModal';
-
 import { ThemeContext } from '../theme/ThemeProvider';
 import useToast from '../reusables/NewToast';
-import { ACCESS_TYPE_TITLE, OPERATOR_OPTIONS, OPERATOR_OPTIONS_INFO } from '../constants';
-import { ConditionArray, IChatTheme } from '../exportedTypes';
 import {
   ConditionType,
   CriteriaStateType,
 } from '../types/tokenGatedGroupCreationType';
 import ConditionsComponent from './ConditionsComponent';
 import { OperatorContainer } from './OperatorContainer';
 import { SelectedCriteria } from '../../../hooks/chat/useCriteriaState';
-import styled from 'styled-components';
+import { useCreateGatedGroup } from '../../../hooks/chat/useCreateGatedGroup';
+import { GrouInfoType as GroupInfoType } from '../types';
+
+import { ACCESS_TYPE_TITLE } from '../constants';
+import { IChatTheme } from '../exportedTypes';
 
 const GROUP_TYPE_OPTIONS: Array<OptionDescription> = [
   {
@@ -34,8 +38,6 @@ const GROUP_TYPE_OPTIONS: Array<OptionDescription> = [
   },
 ];
 
-
-
 interface AddConditionProps {
   heading: string;
   subHeading: string;
@@ -78,14 +80,16 @@ const AddConditionSection = ({
         </Span>
       </Section>
 
-     {criteriaState.entryOptionsDataArray.length>1 &&  <Section margin="20px 0 10px 0">
-       <OperatorContainer 
-        operator={criteriaState.entryRootCondition} 
-        setOperator={(newEl: string) => {
-          criteriaState.setEntryRootCondition(newEl as ConditionType);
-        }}
-      />
-      </Section>}
+      {criteriaState.entryOptionsDataArray.length > 1 && (
+        <Section margin="20px 0 10px 0">
+          <OperatorContainer
+            operator={criteriaState.entryRootCondition}
+            setOperator={(newEl: string) => {
+              criteriaState.setEntryRootCondition(newEl as ConditionType);
+            }}
+          />
+        </Section>
+      )}
       <ConditionSection
         width="100%"
         overflow="hidden auto"
@@ -137,33 +141,47 @@ export const CreateGroupType = ({
   handlePrevious,
   groupInputDetails,
   handleNext,
-  criteriaStateManager
+  criteriaStateManager,
 }: ModalHeaderProps & GroupTypeState) => {
   const [checked, setChecked] = useState<boolean>(true);
-  const [groupEncryptionType, setGroupEncryptionType] = useState('');
+  const [groupEncryptionType, setGroupEncryptionType] = useState(
+    GROUP_TYPE_OPTIONS[0].value
+  );
 
-  // const theme = useContext(ThemeContext);
-  // const isMobile = useMediaQuery(device.mobileL);
+  const { createGatedGroup, loading } = useCreateGatedGroup();
   const groupInfoToast = useToast();
 
   const createGroupService = async () => {
-
-    const groupInfo = {
-      groupInfo: { ...groupInputDetails },
-      groupType: groupEncryptionType,
+    // TODO:use actual data instead of dummy data
+    // const groupInfo = {
+    //   groupInfo: { ...groupInputDetails },
+    //   groupType: groupEncryptionType,
+    // };
+    const dummyGrouInfo: GroupInfoType = {
+      groupName: 'Push Group Chat 3',
+      groupDescription: 'This is the oficial group for Push Protocol',
+      groupImage:
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=',
+      isPublic: true,
     };
 
-    const rules = criteriaStateManager.generateRule()
-    console.log("rules are", JSON.stringify(rules));
-    console.log('created group with', groupInfo);
+    const rules: any = criteriaStateManager.generateRule();
+    await createGatedGroup(dummyGrouInfo, rules);
+    groupInfoToast.showMessageToast({
+      toastTitle: 'Success',
+      toastMessage: 'Group created successfully',
+      toastType: 'SUCCESS',
+      getToastIcon: (size) => <MdCheckCircle size={size} color="green" />,
+    });
     onClose();
   };
 
   const verifyAndCreateGroup = async () => {
-    if (groupEncryptionType.trim() === '') {
-      showError('Group encryption type is not selected');
-      return;
-    }
+    // TODO:validate the fields
+    // if (groupEncryptionType.trim() === '') {
+    //   showError('Group encryption type is not selected');
+    //   return;
+    // }
 
     await createGroupService();
   };
@@ -203,33 +221,34 @@ export const CreateGroupType = ({
         <Section flexDirection="column" gap="32px">
           <AddConditionSection
             criteriaState={criteriaStateManager.entryCriteria}
-            handleNext={
-              ()=>{
-                if(handleNext){
-                  criteriaStateManager.setSelectedCriteria(SelectedCriteria.ENTRY)
-                  handleNext()
-                }
+            handleNext={() => {
+              if (handleNext) {
+                criteriaStateManager.setSelectedCriteria(
+                  SelectedCriteria.ENTRY
+                );
+                handleNext();
               }
-            }
+            }}
             {...ACCESS_TYPE_TITLE.ENTRY}
           />
           <AddConditionSection
-            handleNext={
-              ()=>{
-                if(handleNext){
-                  criteriaStateManager.setSelectedCriteria(SelectedCriteria.CHAT)
-                  handleNext()
-                } 
+            handleNext={() => {
+              if (handleNext) {
+                criteriaStateManager.setSelectedCriteria(SelectedCriteria.CHAT);
+                handleNext();
               }
-            }
+            }}
             criteriaState={criteriaStateManager.chatCriteria}
             {...ACCESS_TYPE_TITLE.CHAT}
           />
         </Section>
       )}
 
       <Section gap="20px" flexDirection="column">
-        <Button width="197px" onClick={verifyAndCreateGroup}>Create Group</Button>
+        <Button width="197px" onClick={verifyAndCreateGroup}>
+          {!loading && 'Create Group'}
+          {loading && <Spinner size="20" color="#fff" />}
+        </Button>
         <GatingRulesInformation />
       </Section>
     </Section>