diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx index ccccf116..3c590f59 100644 --- a/packages/react-chat/src/components/Chat.tsx +++ b/packages/react-chat/src/components/Chat.tsx @@ -10,11 +10,14 @@ import { ChatBody } from "./Chat/ChatBody"; import { ChatCreation } from "./Chat/ChatCreation"; import { Community } from "./Community"; import { Members } from "./Members/Members"; +import { CoinbaseModal } from "./Modals/CoinbaseModal"; import { CommunityModal } from "./Modals/CommunityModal"; import { EditModal } from "./Modals/EditModal"; import { ProfileModal } from "./Modals/ProfileModal"; import { StatusModal } from "./Modals/StatusModal"; import { UserCreationModal } from "./Modals/UserCreationModal"; +import { WalletConnectModal } from "./Modals/WalletConnectModal"; +import { WalletModal } from "./Modals/WalletModal"; import { ToastMessageList } from "./ToastMessages/ToastMessageList"; import { UserCreation } from "./UserCreation/UserCreation"; @@ -26,6 +29,9 @@ function Modals() { + + + ); } diff --git a/packages/react-chat/src/components/Form/CopyInput.tsx b/packages/react-chat/src/components/Form/CopyInput.tsx index da8aa915..06ecd829 100644 --- a/packages/react-chat/src/components/Form/CopyInput.tsx +++ b/packages/react-chat/src/components/Form/CopyInput.tsx @@ -3,21 +3,28 @@ import React from "react"; import { copy } from "../../utils/copy"; import { reduceString } from "../../utils/reduceString"; -import { ButtonWrapper, InputBtn, Label, Text, Wrapper } from "./inputStyles"; +import { + ButtonWrapper, + InputBtn, + InputWrapper, + Label, + Text, + Wrapper, +} from "./inputStyles"; interface CopyInputProps { - label: string; + label?: string; value: string; } export const CopyInput = ({ label, value }: CopyInputProps) => ( -
- + + {label && } {reduceString(value, 15, 15)} copy(value)}>Copy -
+ ); diff --git a/packages/react-chat/src/components/Form/PasteInput.tsx b/packages/react-chat/src/components/Form/PasteInput.tsx index 5f4f0720..b09a6f15 100644 --- a/packages/react-chat/src/components/Form/PasteInput.tsx +++ b/packages/react-chat/src/components/Form/PasteInput.tsx @@ -7,6 +7,7 @@ import { ButtonWrapper, InputBtn, inputStyles, + InputWrapper, Label, Wrapper, } from "./inputStyles"; @@ -16,7 +17,7 @@ interface PasteInputProps { } export const PasteInput = ({ label }: PasteInputProps) => ( - + @@ -24,13 +25,9 @@ export const PasteInput = ({ label }: PasteInputProps) => ( paste("pasteInput")}>Paste - + ); -const PasteWrapper = styled.div` - width: 100%; -`; - const Input = styled.input` ${inputStyles} width: 100%; diff --git a/packages/react-chat/src/components/Form/inputStyles.ts b/packages/react-chat/src/components/Form/inputStyles.ts index 8f971d9a..763feb97 100644 --- a/packages/react-chat/src/components/Form/inputStyles.ts +++ b/packages/react-chat/src/components/Form/inputStyles.ts @@ -27,6 +27,10 @@ export const Label = styled.p` ${textSmallStyles} `; +export const InputWrapper = styled.div` + width: 100%; +`; + export const Wrapper = styled.div` position: relative; padding: 14px 70px 14px 8px; diff --git a/packages/react-chat/src/components/Icons/CoinbaseLogo.tsx b/packages/react-chat/src/components/Icons/CoinbaseLogo.tsx new file mode 100644 index 00000000..210cbae8 --- /dev/null +++ b/packages/react-chat/src/components/Icons/CoinbaseLogo.tsx @@ -0,0 +1,50 @@ +import React from "react"; + +export const CoinbaseLogo = () => { + return ( + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/react-chat/src/components/Icons/MetamaskLogo.tsx b/packages/react-chat/src/components/Icons/MetamaskLogo.tsx new file mode 100644 index 00000000..33a5f161 --- /dev/null +++ b/packages/react-chat/src/components/Icons/MetamaskLogo.tsx @@ -0,0 +1,217 @@ +import React from "react"; + +export const MetamaskLogo = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/react-chat/src/components/Icons/WalletConnectLogo.tsx b/packages/react-chat/src/components/Icons/WalletConnectLogo.tsx new file mode 100644 index 00000000..e55bdc4d --- /dev/null +++ b/packages/react-chat/src/components/Icons/WalletConnectLogo.tsx @@ -0,0 +1,35 @@ +import React from "react"; + +export const WalletConnectLogo = () => { + return ( + + + + + + + + + + + ); +}; diff --git a/packages/react-chat/src/components/Modals/CoinbaseModal.tsx b/packages/react-chat/src/components/Modals/CoinbaseModal.tsx new file mode 100644 index 00000000..787f96f0 --- /dev/null +++ b/packages/react-chat/src/components/Modals/CoinbaseModal.tsx @@ -0,0 +1,18 @@ +import React from "react"; + +import { ConnectModal } from "./ConnectModal"; +import { Modal } from "./Modal"; + +export const CoinbaseModalName = "CoinbaseModal"; + +export function CoinbaseModal() { + return ( + + + + ); +} diff --git a/packages/react-chat/src/components/Modals/ConnectModal.tsx b/packages/react-chat/src/components/Modals/ConnectModal.tsx new file mode 100644 index 00000000..cbacd2e5 --- /dev/null +++ b/packages/react-chat/src/components/Modals/ConnectModal.tsx @@ -0,0 +1,32 @@ +import QRCode from "qrcode.react"; +import React from "react"; + +import { CopyInput } from "../Form/CopyInput"; + +import { Heading, MiddleSection, QRWrapper, Section, Text } from "./ModalStyle"; + +export const ConnectModalName = "ConnectModal"; + +interface ConnectModalProps { + name: string; + address: string; + text: string; +} + +export function ConnectModal({ name, address, text }: ConnectModalProps) { + return ( + <> +
+ Connect with {name} +
+ + {text} + + {" "} + + + + + + ); +} diff --git a/packages/react-chat/src/components/Modals/ModalStyle.tsx b/packages/react-chat/src/components/Modals/ModalStyle.tsx index 0631b537..690808ef 100644 --- a/packages/react-chat/src/components/Modals/ModalStyle.tsx +++ b/packages/react-chat/src/components/Modals/ModalStyle.tsx @@ -11,6 +11,12 @@ export const Section = styled.div` } `; +export const MiddleSection = styled(Section)` + display: flex; + flex-direction: column; + align-items: center; +`; + export const Heading = styled.p` color: ${({ theme }) => theme.primary}; font-weight: bold; @@ -73,3 +79,7 @@ export const AddWrapper = styled.div` background: ${({ theme }) => theme.tertiary}; border-radius: 50%; `; + +export const QRWrapper = styled.div` + margin: 30px 0; +`; diff --git a/packages/react-chat/src/components/Modals/StatusModal.tsx b/packages/react-chat/src/components/Modals/StatusModal.tsx index 97acab8b..e6fb2840 100644 --- a/packages/react-chat/src/components/Modals/StatusModal.tsx +++ b/packages/react-chat/src/components/Modals/StatusModal.tsx @@ -7,7 +7,7 @@ import { LoginInstructions } from "../Form/LoginInstructions"; import { PasteInput } from "../Form/PasteInput"; import { Modal } from "./Modal"; -import { Heading, Section } from "./ModalStyle"; +import { Heading, MiddleSection, Section } from "./ModalStyle"; export const StatusModalName = "StatusModal"; @@ -32,7 +32,7 @@ export function StatusModal() {
Sync with Status profile
- + } - + ); } -const MiddleSection = styled(Section)` - display: flex; - flex-direction: column; - align-items: center; +const MiddleSectionStatus = styled(MiddleSection)` height: 514px; `; diff --git a/packages/react-chat/src/components/Modals/WalletConnectModal.tsx b/packages/react-chat/src/components/Modals/WalletConnectModal.tsx new file mode 100644 index 00000000..0bd0b145 --- /dev/null +++ b/packages/react-chat/src/components/Modals/WalletConnectModal.tsx @@ -0,0 +1,19 @@ +import React from "react"; + +import { ConnectModal } from "./ConnectModal"; +import { Modal } from "./Modal"; + +export const WalletConnectModalName = "WalletConnectModal"; + +export function WalletConnectModal() { + return ( + + + + ); +} diff --git a/packages/react-chat/src/components/Modals/WalletModal.tsx b/packages/react-chat/src/components/Modals/WalletModal.tsx new file mode 100644 index 00000000..f4fe3288 --- /dev/null +++ b/packages/react-chat/src/components/Modals/WalletModal.tsx @@ -0,0 +1,72 @@ +import React from "react"; +import styled from "styled-components"; + +import { useModal } from "../../contexts/modalProvider"; +import { CoinbaseLogo } from "../Icons/CoinbaseLogo"; +import { MetamaskLogo } from "../Icons/MetamaskLogo"; +import { WalletConnectLogo } from "../Icons/WalletConnectLogo"; + +import { CoinbaseModalName } from "./CoinbaseModal"; +import { Modal } from "./Modal"; +import { Heading, MiddleSection, Section, Text } from "./ModalStyle"; +import { WalletConnectModalName } from "./WalletConnectModal"; + +export const WalletModalName = "WalletModal"; + +export function WalletModal() { + const { setModal } = useModal(WalletModalName); + const { setModal: setWalleConnectModal } = useModal(WalletConnectModalName); + const { setModal: setCoinbaseModal } = useModal(CoinbaseModalName); + + return ( + +
+ Connect an Ethereum Wallet +
+ + Choose a way to chat using your Ethereum address. + + (setModal(false), setWalleConnectModal(true))}> + WalletConnect + + + (setModal(false), setCoinbaseModal(true))}> + Coinbase Wallet + + + + MetaMask + + + + + + ); +} + +const MiddleSectionWallet = styled(MiddleSection)` + align-items: stretch; +`; + +const Wallets = styled.div` + display: flex; + flex-direction: column; + align-items: center; + margin-top: 16px; +`; + +const Wallet = styled.div` + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; + padding: 12px 16px; + border: 1px solid ${({ theme }) => theme.skeletonDark}; + border-radius: 8px; + cursor: pointer; + + &:hover { + background: ${({ theme }) => theme.buttonBgHover}; + } +`; diff --git a/packages/react-chat/src/components/UserCreation/UserCreation.tsx b/packages/react-chat/src/components/UserCreation/UserCreation.tsx index ec71ee45..ec013876 100644 --- a/packages/react-chat/src/components/UserCreation/UserCreation.tsx +++ b/packages/react-chat/src/components/UserCreation/UserCreation.tsx @@ -6,11 +6,13 @@ import { buttonStyles, buttonTransparentStyles } from "../Buttons/buttonStyle"; import { ColorChatIcon } from "../Icons/ColorChatIcon"; import { StatusModalName } from "../Modals/StatusModal"; import { UserCreationModalName } from "../Modals/UserCreationModal"; +import { WalletModalName } from "../Modals/WalletModal"; import { textSmallStyles } from "../Text"; export function UserCreation() { const { setModal } = useModal(UserCreationModalName); const { setModal: setStatusModal } = useModal(StatusModalName); + const { setModal: setWalletModal } = useModal(WalletModalName); return ( @@ -19,7 +21,9 @@ export function UserCreation() { setStatusModal(true)}> Sync with Status profile - Connect Ethereum Wallet + setWalletModal(true)}> + Connect Ethereum Wallet + setModal(true)}> Use a throwaway account