Skip to content

Commit

Permalink
fix: added condition while showing tokengatedIcon
Browse files Browse the repository at this point in the history
  • Loading branch information
@KlausMikhaelson
KlausMikhaelson committed Sep 18, 2023
1 parent 5021ca5 commit 19ffeab
Showing 1 changed file with 68 additions and 62 deletions.
130 changes: 68 additions & 62 deletions packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,140 +31,146 @@ import 'react-toastify/dist/ReactToastify.min.css';



const Options = ({ options, setOptions, isGroup, chatInfo, groupInfo, setGroupInfo,theme }: OptionProps) => {
const Options = ({ options, setOptions, isGroup, chatInfo, groupInfo, setGroupInfo, theme }: OptionProps) => {
const DropdownRef = useRef(null);
const [modal, setModal] = useState(false);

useClickAway(DropdownRef, () => {
setOptions(false);
});

const ShowModal = () => {
setModal(true);
}
console.log(groupInfo?.rules?.chat, "groupInfooo")

if (groupInfo && isGroup){
if (groupInfo && isGroup) {
return (
<Section zIndex="300" flexDirection="row" gap="10px" margin="0 20px 0 auto">
<Image src={TokenGatedIcon} height="28px" maxHeight="32px" width={'auto'} />
{
(groupInfo?.rules?.chat?.conditions || groupInfo?.rules?.entry?.conditions) && (
<Image src={TokenGatedIcon} height="28px" maxHeight="32px" width={'auto'} />
)
}

{groupInfo?.isPublic &&
(<Image src={PublicChatIcon} height="28px" maxHeight="32px" width={'auto'} />)}
{groupInfo?.isPublic &&
(<Image src={PublicChatIcon} height="28px" maxHeight="32px" width={'auto'} />)}

<ImageItem onClick={() => setOptions(true)}>
<Image src={VerticalEllipsisIcon} height="21px" maxHeight="32px" width={'auto'} cursor="pointer" />
{options &&
(<DropDownBar theme={theme} ref={DropdownRef}>
<DropDownItem cursor='pointer' onClick={ShowModal}>
<Image src={InfoIcon} height="21px" maxHeight="21px" width={'auto'} cursor="pointer" />

<TextItem>
Group Info
</TextItem>
</DropDownItem>
</DropDownBar>)}
{modal &&
(<GroupInfoModal
theme={theme}
modal={modal}
setModal={setModal}
groupInfo={groupInfo}
setGroupInfo={setGroupInfo}
/>)}
<Image src={VerticalEllipsisIcon} height="21px" maxHeight="32px" width={'auto'} cursor="pointer" />

{options &&
(<DropDownBar theme={theme} ref={DropdownRef}>
<DropDownItem cursor='pointer' onClick={ShowModal}>
<Image src={InfoIcon} height="21px" maxHeight="21px" width={'auto'} cursor="pointer" />

<TextItem>
Group Info
</TextItem>
</DropDownItem>
</DropDownBar>)}

{modal &&
(<GroupInfoModal
theme={theme}
modal={modal}
setModal={setModal}
groupInfo={groupInfo}
setGroupInfo={setGroupInfo}
/>)}
</ImageItem>
</Section>
)
} else {
return null }
};
} else {
return null
}
};






export const ChatProfile: React.FC<IChatProfile> = ({ chatId, style }: {chatId: string, style: "Info" | "Preview"}) => {
export const ChatProfile: React.FC<IChatProfile> = ({ chatId, style }: { chatId: string, style: "Info" | "Preview" }) => {
const theme = useContext(ThemeContext);
const { account, env } = useChatData();
const { getGroupByID } = useGetGroupByID();
const { fetchUserChatProfile } = useChatProfile();

const [isGroup, setIsGroup] = useState<boolean>(false);
const [options, setOptions] = useState(false);
const [chatInfo, setChatInfo ] = useState<IUser | null>();
const [groupInfo, setGroupInfo ] = useState<IGroup | null>();
const [ensName, setEnsName ] = useState<string | undefined>('');
const [options, setOptions] = useState(false);
const [chatInfo, setChatInfo] = useState<IUser | null>();
const [groupInfo, setGroupInfo] = useState<IGroup | null>();
const [ensName, setEnsName] = useState<string | undefined>('');
const isMobile = useMediaQuery(device.tablet);
const l1ChainId = allowedNetworks[env].includes(1) ? 1 : 5;
const provider = new ethers.providers.InfuraProvider(l1ChainId, InfuraAPIKey);



const fetchProfileData = async () => {
if(isValidETHAddress(chatId)){
if (isValidETHAddress(chatId)) {
const ChatProfile = await fetchUserChatProfile({ profileId: chatId });
setChatInfo(ChatProfile);
setGroupInfo(null);
setIsGroup(false);
} else {
const GroupProfile = await getGroupByID({ groupId : chatId})
const GroupProfile = await getGroupByID({ groupId: chatId })
setGroupInfo(GroupProfile);
setChatInfo(null);
setIsGroup(true);
}
}

const getName = async (chatId: string) => {
if(isValidETHAddress(chatId)){
const result = await resolveNewEns(chatId, provider);
// if(result)
setEnsName(result);
}
if (isValidETHAddress(chatId)) {
const result = await resolveNewEns(chatId, provider);
// if(result)
setEnsName(result);
}
}


useEffect(()=> {
if(!chatId) return;
useEffect(() => {
if (!chatId) return;
fetchProfileData();
getName(chatId);
},[chatId, account, env])
}, [chatId, account, env])

if (chatId && style === 'Info') {
return (
<Container theme={theme}>
{chatInfo || groupInfo ? (
<Image src={isGroup ? groupInfo?.groupImage ?? GreyImage : chatInfo?.profile?.picture ?? createBlockie?.(chatId)?.toDataURL()
?.toString()} height="48px" maxHeight="48px" width='48px' borderRadius="100%" />
?.toString()} height="48px" maxHeight="48px" width='48px' borderRadius="100%" />
) : (<Image src={createBlockie?.(chatId)?.toDataURL()
?.toString()} height="48px" maxHeight="48px" width='48px' borderRadius="100%" />)}


<Span color={theme.textColor?.chatProfileText} fontSize="17px" margin="0 0 0 10px">
{isGroup ? groupInfo?.groupName : ensName ? `${ensName} (${isMobile ? shortenText(chatInfo?.did?.split(':')[1] ?? '', 4, true) : chatId})`: chatInfo ? shortenText(chatInfo.did?.split(':')[1] ?? '', 6, true) : shortenText(chatId,6, true)}
{isGroup ? groupInfo?.groupName : ensName ? `${ensName} (${isMobile ? shortenText(chatInfo?.did?.split(':')[1] ?? '', 4, true) : chatId})` : chatInfo ? shortenText(chatInfo.did?.split(':')[1] ?? '', 6, true) : shortenText(chatId, 6, true)}

</Span>

<Options
options={options}
setOptions={setOptions}
isGroup={isGroup}
chatInfo={chatInfo}
groupInfo={groupInfo}
setGroupInfo={setGroupInfo}
theme={theme}
/>
<Options
options={options}
setOptions={setOptions}
isGroup={isGroup}
chatInfo={chatInfo}
groupInfo={groupInfo}
setGroupInfo={setGroupInfo}
theme={theme}
/>

{/* {!isGroup &&
<VideoChatSection>
<Image src={VideoChatIcon} height="18px" maxHeight="18px" width={'auto'} />
</VideoChatSection>
} */}

<ToastContainer />
<ToastContainer />



</Container>
</Container>
)
} else {
return null;
Expand Down

0 comments on commit 19ffeab

Please sign in to comment.