From 626f70c57687cc4138a63948563cd165a7d5472f Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Mon, 3 Jan 2022 14:52:01 +0100 Subject: [PATCH] Add token requirements (#165) --- packages/react-chat/src/components/Chat.tsx | 3 +- .../src/components/Chat/ChatBody.tsx | 131 +++++++++++------- .../src/components/Form/TokenRequirement.tsx | 131 ++++++++++++++++++ .../src/components/Icons/EthereumLogo.tsx | 38 +++++ .../src/components/Icons/MarkerdaoLogo.tsx | 33 +++++ .../src/components/Icons/StatusIcon.tsx | 24 ++++ .../components/UserCreation/UserCreation.tsx | 14 +- packages/react-chat/src/styles/themes.ts | 5 + 8 files changed, 325 insertions(+), 54 deletions(-) create mode 100644 packages/react-chat/src/components/Form/TokenRequirement.tsx create mode 100644 packages/react-chat/src/components/Icons/EthereumLogo.tsx create mode 100644 packages/react-chat/src/components/Icons/MarkerdaoLogo.tsx create mode 100644 packages/react-chat/src/components/Icons/StatusIcon.tsx diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx index 3c590f59..4f99c0fe 100644 --- a/packages/react-chat/src/components/Chat.tsx +++ b/packages/react-chat/src/components/Chat.tsx @@ -46,13 +46,14 @@ export function Chat() { {!narrow && ( - {identity ? : } + {identity ? : } )} {state === ChatState.ChatBody && ( setShowMembers(!showMembers)} showMembers={showMembers} + permission={true} /> )} {showMembers && !narrow && state === ChatState.ChatBody && } diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx index e958d782..0ca2ba63 100644 --- a/packages/react-chat/src/components/Chat/ChatBody.tsx +++ b/packages/react-chat/src/components/Chat/ChatBody.tsx @@ -4,6 +4,7 @@ import styled from "styled-components"; import { useMessengerContext } from "../../contexts/messengerProvider"; import { useNarrow } from "../../contexts/narrowProvider"; import { Reply } from "../../hooks/useReply"; +import { TokenRequirement } from "../Form/TokenRequirement"; import { MessagesList } from "../Messages/MessagesList"; import { NarrowChannels } from "../NarrowMode/NarrowChannels"; import { NarrowMembers } from "../NarrowMode/NarrowMembers"; @@ -22,9 +23,10 @@ export enum ChatBodyState { interface ChatBodyProps { onClick: () => void; showMembers: boolean; + permission: boolean; } -export function ChatBody({ onClick, showMembers }: ChatBodyProps) { +export function ChatBody({ onClick, showMembers, permission }: ChatBodyProps) { const { messenger, activeChannel, communityData } = useMessengerContext(); const narrow = useNarrow(); @@ -50,67 +52,98 @@ export function ChatBody({ onClick, showMembers }: ChatBodyProps) { const [reply, setReply] = useState(undefined); return ( - - {editGroup && communityData ? ( - - ) : ( - - )} - {messenger ? ( - <> - {showState === ChatBodyState.Chat && ( - <> - {messenger && communityData ? ( - - ) : ( - - )} - - - )} + + + {editGroup && communityData ? ( + + ) : ( + + )} + {messenger ? ( + <> + {showState === ChatBodyState.Chat && ( + <> + {messenger && communityData ? ( + + ) : ( + + )} + + + )} - {showState === ChatBodyState.Channels && ( - switchShowState(ChatBodyState.Channels)} - /> - )} - {showState === ChatBodyState.Members && ( - - switchShowState(ChatBodyState.Members) - } - /> - )} - - ) : ( - <> - - - + {showState === ChatBodyState.Channels && ( + switchShowState(ChatBodyState.Channels)} + /> + )} + {showState === ChatBodyState.Members && ( + + switchShowState(ChatBodyState.Members) + } + /> + )} + + ) : ( + <> + + + + )} + + {!permission && ( + + + )} - + ); } -const ChatBodyWrapper = styled.div` +const Wrapper = styled.div` width: 61%; display: flex; flex-direction: column; flex: 1; height: 100%; background: ${({ theme }) => theme.bodyBackgroundColor}; + position: relative; &.narrow { width: 100%; } `; + +const ChatBodyWrapper = styled.div` + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + flex: 1; + background: ${({ theme }) => theme.bodyBackgroundColor}; +`; + +const BluredWrapper = styled.div` + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: center; + position: absolute; + bottom: 0; + left: 0; + background: ${({ theme }) => theme.bodyBackgroundGradient}; + backdrop-filter: blur(4px); + z-index: 2; +`; diff --git a/packages/react-chat/src/components/Form/TokenRequirement.tsx b/packages/react-chat/src/components/Form/TokenRequirement.tsx new file mode 100644 index 00000000..de308ad5 --- /dev/null +++ b/packages/react-chat/src/components/Form/TokenRequirement.tsx @@ -0,0 +1,131 @@ +import React from "react"; +import styled from "styled-components"; + +import { useMessengerContext } from "../../contexts/messengerProvider"; +import { textMediumStyles } from "../Text"; + +const communityRequirements = { + requirements: [ + { + name: "STN", + amount: 10, + logo: "https://status.im/img/logo.svg", + }, + ], + alternativeRequirements: [ + { + name: "ETH", + amount: 1, + logo: "https://ethereum.org/static/a110735dade3f354a46fc2446cd52476/db4de/eth-home-icon.webp", + }, + { + name: "MKR", + amount: 10, + logo: "https://cryptologos.cc/logos/maker-mkr-logo.svg?v=017", + }, + ], +}; + +export function TokenRequirement() { + const { communityData } = useMessengerContext(); + return ( + + + To join {communityData?.name} community chat you need to + hold: + + + {communityRequirements.requirements.map((req) => ( + + + + {req.amount} {req.name}{" "} + + + ))} + + {communityRequirements.alternativeRequirements && or} + + {communityRequirements.alternativeRequirements.map((req) => ( + + + + {req.amount} {req.name}{" "} + + + ))} + + + ); +} + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + height: 50%; +`; + +const Text = styled.p` + color: ${({ theme }) => theme.primary}; + text-align: center; + margin-bottom: 16px; + + & > span { + font-weight: 700; + } + + ${textMediumStyles} +`; + +const Requirement = styled.div` + display: flex; + align-items: center; + border-radius: 16px; + padding: 2px 12px 2px 2px; + background: ${({ theme }) => theme.buttonBg}; + color: ${({ theme }) => theme.tertiary}; + + &.denial { + background: ${({ theme }) => theme.buttonNoBgHover}; + color: ${({ theme }) => theme.redColor}; + } + + & + & { + margin-left: 18px; + } +`; + +const Amount = styled.p` + font-weight: 500; + text-transform: uppercase; + margin-left: 6px; + + ${textMediumStyles} +`; + +const Row = styled.div` + display: flex; + align-items: center; + margin-bottom: 16px; +`; + +const Logo = styled.div` + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + border-radius: 50%; + background-size: cover; + background-repeat: no-repeat; +`; diff --git a/packages/react-chat/src/components/Icons/EthereumLogo.tsx b/packages/react-chat/src/components/Icons/EthereumLogo.tsx new file mode 100644 index 00000000..0c0364d6 --- /dev/null +++ b/packages/react-chat/src/components/Icons/EthereumLogo.tsx @@ -0,0 +1,38 @@ +import React from "react"; + +export const EthereumLogo = () => ( + + + + + + + + + +); diff --git a/packages/react-chat/src/components/Icons/MarkerdaoLogo.tsx b/packages/react-chat/src/components/Icons/MarkerdaoLogo.tsx new file mode 100644 index 00000000..1cb39939 --- /dev/null +++ b/packages/react-chat/src/components/Icons/MarkerdaoLogo.tsx @@ -0,0 +1,33 @@ +import React from "react"; + +export const MarkerdaoLogo = () => ( + + + + + + + + + + +); diff --git a/packages/react-chat/src/components/Icons/StatusIcon.tsx b/packages/react-chat/src/components/Icons/StatusIcon.tsx new file mode 100644 index 00000000..69b6e229 --- /dev/null +++ b/packages/react-chat/src/components/Icons/StatusIcon.tsx @@ -0,0 +1,24 @@ +import React from "react"; + +export const StatusIcon = () => ( + + + + +); diff --git a/packages/react-chat/src/components/UserCreation/UserCreation.tsx b/packages/react-chat/src/components/UserCreation/UserCreation.tsx index ec013876..252b9e41 100644 --- a/packages/react-chat/src/components/UserCreation/UserCreation.tsx +++ b/packages/react-chat/src/components/UserCreation/UserCreation.tsx @@ -9,7 +9,11 @@ import { UserCreationModalName } from "../Modals/UserCreationModal"; import { WalletModalName } from "../Modals/WalletModal"; import { textSmallStyles } from "../Text"; -export function UserCreation() { +interface UserCreationProps { + permission: boolean; +} + +export function UserCreation({ permission }: UserCreationProps) { const { setModal } = useModal(UserCreationModalName); const { setModal: setStatusModal } = useModal(StatusModalName); const { setModal: setWalletModal } = useModal(WalletModalName); @@ -24,9 +28,11 @@ export function UserCreation() { setWalletModal(true)}> Connect Ethereum Wallet - setModal(true)}> - Use a throwaway account - + {permission && ( + setModal(true)}> + Use a throwaway account + + )} ); } diff --git a/packages/react-chat/src/styles/themes.ts b/packages/react-chat/src/styles/themes.ts index f32e8346..4183b79c 100644 --- a/packages/react-chat/src/styles/themes.ts +++ b/packages/react-chat/src/styles/themes.ts @@ -4,6 +4,7 @@ export type Theme = { tertiary: string; bodyBackgroundColor: string; sectionBackgroundColor: string; + bodyBackgroundGradient: string; guestNameColor: string; iconColor: string; iconUserColor: string; @@ -34,6 +35,8 @@ export const lightTheme: Theme = { tertiary: "#4360DF", bodyBackgroundColor: "#fff", sectionBackgroundColor: "#F6F8FA", + bodyBackgroundGradient: + "linear-gradient(0deg, #FFFFFF 50%, rgba(255, 255, 255, 0) 102.57%)", guestNameColor: "#887AF9", iconColor: "#D37EF4", iconUserColor: "#717199", @@ -65,6 +68,8 @@ export const darkTheme: Theme = { tertiary: "#88B0FF", bodyBackgroundColor: "#000", sectionBackgroundColor: "#252525", + bodyBackgroundGradient: + "linear-gradient(0deg, #000 50%, rgba(255, 255, 255, 0) 102.57%)", guestNameColor: "#887AF9", iconColor: "#D37EF4", iconUserColor: "#717199",